html{
scroll-behavior:smooth;
background:#f8f5f1;
}

/* CONTENEUR */
.derys-page{
max-width:980px;
margin:0 auto;
padding:42px 22px 70px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:#66755a;
line-height:1.85;
position:relative;
}

/* FOND DOUX */
.derys-page:before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:100%;
height:420px;
background:
radial-gradient(circle at top left,rgba(194,125,82,0.10),transparent 35%),
radial-gradient(circle at top right,rgba(134,150,111,0.10),transparent 30%);
pointer-events:none;
z-index:-1;
}

/* TYPO */
.derys-page h1,
.derys-page h2,
.derys-page h3{
margin:0;
font-weight:600;
letter-spacing:-0.03em;
line-height:1.2;
}

.derys-page h1{
font-size:52px;
color:#7d8d68;
margin-bottom:22px;
max-width:820px;
}

.derys-page h2{
font-size:34px;
color:#81906b;
margin-bottom:18px;
}

.derys-page h3{
font-size:22px;
color:#788664;
margin-bottom:14px;
}

.derys-page p{
font-size:19px;
color:#6d7c61;
margin-bottom:18px;
}

/* HERO */
.derys-hero{
padding:55px 48px;
background:
linear-gradient(145deg,#fcfaf7,#f4efe8);
border-radius:34px;
box-shadow:
0 10px 40px rgba(0,0,0,0.05),
inset 0 1px 0 rgba(255,255,255,0.9);
border:1px solid #ece5dd;
position:relative;
overflow:hidden;
}

.derys-hero:after{
content:"";
position:absolute;
right:-120px;
top:-120px;
width:320px;
height:320px;
border-radius:50%;
background:rgba(194,125,82,0.10);
}

/* BLOCS */
.derys-block{
margin-top:54px;
}

/* HIGHLIGHT */
.derys-highlight{
margin:40px 0;
padding:34px;
background:
linear-gradient(145deg,#faf6f1,#f5f1eb);
border-radius:28px;
text-align:center;
font-size:24px;
line-height:1.6;
color:#86956f;
box-shadow:
0 8px 30px rgba(0,0,0,0.04);
border:1px solid #ebe3da;
}

/* GRID */
.derys-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
margin-top:30px;
}

/* CARDS */
.derys-card{
background:
linear-gradient(180deg,#ffffff,#faf7f3);
border-radius:26px;
padding:28px;
border:1px solid #ece4db;
box-shadow:
0 8px 24px rgba(0,0,0,0.04);
transition:transform 0.25s ease,box-shadow 0.25s ease;
}

.derys-card:hover{
transform:translateY(-4px);
box-shadow:
0 14px 34px rgba(0,0,0,0.06);
}

/* PETITS TITRES CARDS */
.derys-card h3{
margin-bottom:10px;
}

/* LISTES */
.derys-page ul{
padding-left:22px;
margin-top:10px;
}

.derys-page li{
margin-bottom:10px;
font-size:18px;
color:#728264;
}

/* TABLEAUX PREMIUM */
.derys-table{
overflow-x:auto;
margin-top:28px;
border-radius:24px;
box-shadow:
0 10px 28px rgba(0,0,0,0.04);
}

.derys-table table{
width:100%;
border-collapse:collapse;
background:white;
overflow:hidden;
}

.derys-table th{
background:#eef1e8;
color:#748364;
font-size:17px;
padding:18px;
text-align:left;
}

.derys-table td{
padding:18px;
border-top:1px solid #efe9e2;
font-size:17px;
color:#728164;
}

/* CITATION */
.derys-quote{
margin-top:30px;
padding:30px;
border-left:5px solid #c27d52;
background:#faf6f2;
border-radius:22px;
font-size:22px;
font-style:italic;
color:#7d8b69;
}

/* CTA */
.derys-cta{
margin-top:65px;
padding:44px;
background:
linear-gradient(145deg,#fcfaf7,#f5efe7);
border-radius:32px;
text-align:center;
border:1px solid #ebe2d8;
box-shadow:
0 10px 36px rgba(0,0,0,0.04);
}

.derys-button{
display:inline-block;
padding:18px 34px;
background:
linear-gradient(145deg,#c27d52,#b96f44);
color:white !important;
border-radius:999px;
font-size:18px;
font-weight:600;
text-decoration:none;
margin-top:18px;
box-shadow:
0 10px 24px rgba(194,125,82,0.28);
transition:all 0.25s ease;
}

.derys-button:hover{
transform:translateY(-2px) scale(1.01);
box-shadow:
0 16px 30px rgba(194,125,82,0.35);
}

/* FAQ */
.derys-faq{
margin-top:55px;
}

.derys-faq details{
background:white;
border-radius:20px;
padding:22px 24px;
margin-bottom:16px;
border:1px solid #ece4db;
box-shadow:
0 5px 18px rgba(0,0,0,0.03);
}

.derys-faq summary{
cursor:pointer;
font-size:18px;
font-weight:600;
color:#7b8a67;
}

/* IMAGES */
.derys-page img{
max-width:100%;
border-radius:26px;
margin:26px 0;
box-shadow:
0 10px 30px rgba(0,0,0,0.06);
}

/* MOBILE */
@media(max-width:767px){

.derys-page{
padding:18px 14px 50px;
}

.derys-page h1{
font-size:34px;
}

.derys-page h2{
font-size:28px;
}

.derys-page p{
font-size:17px;
}

.derys-hero{
padding:34px 24px;
border-radius:26px;
}

.derys-highlight{
font-size:20px;
padding:26px;
}

.derys-grid{
grid-template-columns:1fr;
gap:18px;
}

.derys-card{
padding:22px;
}

.derys-cta{
padding:30px 22px;
}

.derys-button{
width:100%;
text-align:center;
}

}