/* ============================================================
   DRAINETOI — Feuille de style principale
   Palette : vert très clair (presque blanc) · sable · vert doux
   ============================================================ */

:root{
  /* --- Couleurs --- */
  --vert-voile:   #F3F7F2;  /* fond principal, vert très clair presque blanc */
  --vert-brume:   #E8EFE6;  /* sections alternées */
  --vert-doux:    #7E9B84;  /* vert moyen doux — couleur signature */
  --vert-profond: #4E6A56;  /* titres, hover */
  --sable:        #DFD4BE;  /* sable — liserés, cartouches */
  --sable-clair:  #F1ECE1;  /* sable pâle — sections */
  --encre:        #2F3A33;  /* texte principal */
  --encre-douce:  #5D6A61;  /* texte secondaire */
  --blanc:        #FFFFFF;

  /* --- Typographie --- */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* --- Mesures --- */
  --max:     1140px;
  --gouttiere: clamp(1.25rem, 5vw, 3rem);
  --radius:  2px;
  --ombre:   0 18px 45px -30px rgba(47,58,51,.45);
}

/* ------------------ Base ------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--vert-voile);
  color:var(--encre);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  font-weight:300;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--vert-profond);text-decoration:none;transition:color .25s ease,opacity .25s ease;}
a:hover{color:var(--vert-doux);}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  color:var(--vert-profond);
  line-height:1.15;
  margin:0 0 .6em;
  letter-spacing:.005em;
}
h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.15rem);}
h2{font-size:clamp(1.85rem,1.35rem + 2.1vw,2.9rem);}
h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

/* Surtitre en capitales espacées */
.surtitre{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--vert-doux);
  margin-bottom:1.4rem;
}
.chapeau{
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  line-height:1.55;
  color:var(--encre-douce);
  font-style:italic;
}

/* Filet décoratif */
.filet{
  width:64px;height:1px;border:0;
  background:var(--sable);
  margin:2.2rem 0;
}
.filet--centre{margin-inline:auto;}

/* ------------------ Structure ------------------ */
.conteneur{
  width:100%;max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gouttiere);
}
.conteneur--etroit{max-width:760px;}
section{padding-block:clamp(3.5rem,2rem + 7vw,7rem);}
.section--brume{background:var(--vert-brume);}
.section--sable{background:var(--sable-clair);}

/* ------------------ Boutons ------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.78rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  padding:1.05rem 2.1rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .3s ease;
}
.btn--plein{background:var(--vert-doux);color:var(--blanc);}
.btn--plein:hover{background:var(--vert-profond);color:var(--blanc);}
.btn--ligne{background:transparent;color:var(--vert-profond);border-color:var(--vert-doux);}
.btn--ligne:hover{background:var(--vert-doux);color:var(--blanc);}
.btn--sable{background:var(--sable);color:var(--encre);}
.btn--sable:hover{background:var(--vert-profond);color:var(--blanc);}
.btn svg{width:17px;height:17px;flex:none;}

/* ------------------ En-tête ------------------ */
.entete{
  position:sticky;top:0;z-index:50;
  background:rgba(243,247,242,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(223,212,190,.7);
}
.entete__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:78px;
}
.logo{
  font-family:var(--serif);
  font-size:1.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vert-profond);
  line-height:1;
}
.logo sup{font-size:.5em;letter-spacing:0;top:-.9em;}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem);}
.nav a{
  font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--encre);padding-block:.4rem;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--vert-doux);
  transition:width .3s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%;}
.nav a[aria-current="page"]{color:var(--vert-profond);}

.burger{
  display:none;background:none;border:0;cursor:pointer;
  padding:.5rem;color:var(--vert-profond);
}
.burger svg{width:26px;height:26px;}

@media (max-width:900px){
  .burger{display:block;}
  .nav{
    position:fixed;inset:78px 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--vert-voile);
    border-bottom:1px solid var(--sable);
    padding:1rem var(--gouttiere) 2rem;
    transform:translateY(-120%);
    transition:transform .35s ease;
    box-shadow:var(--ombre);
  }
  .nav[data-ouvert="true"]{transform:translateY(0);}
  .nav a{width:100%;padding-block:.95rem;border-bottom:1px solid rgba(223,212,190,.55);font-size:.85rem;}
  .nav a:last-child{border-bottom:0;}
}

/* ------------------ Hero ------------------ */
.hero{
  position:relative;
  padding-block:clamp(4rem,2rem + 10vw,8.5rem);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(223,212,190,.55) 0%, rgba(223,212,190,0) 60%),
    linear-gradient(180deg,var(--vert-brume) 0%,var(--vert-voile) 100%);
  overflow:hidden;
}
.hero__grille{
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1.1fr .9fr;align-items:center;
}
@media (max-width:860px){.hero__grille{grid-template-columns:1fr;}}
.hero h1{margin-bottom:.35em;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem;}

/* Médaillon décoratif (remplaçable par une photo) */
.medaillon{
  position:relative;aspect-ratio:4/5;width:100%;
  border-radius:999px 999px 6px 6px;
  background:
    linear-gradient(155deg,var(--sable) 0%,var(--sable-clair) 45%,var(--vert-brume) 100%);
  box-shadow:var(--ombre);
  overflow:hidden;
}
.medaillon img{width:100%;height:100%;object-fit:cover;}
.medaillon::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 50% 30%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260'%3E%3Cg fill='none' stroke='%237E9B84' stroke-width='.9' opacity='.5'%3E%3Cpath d='M100 205V95'/%3E%3Cpath d='M100 175c-26 0-40-14-40-32 20 0 40 10 40 32z'/%3E%3Cpath d='M100 175c26 0 40-14 40-32-20 0-40 10-40 32z'/%3E%3Cpath d='M100 140c-22 0-34-12-34-27 17 0 34 8 34 27z'/%3E%3Cpath d='M100 140c22 0 34-12 34-27-17 0-34 8-34 27z'/%3E%3Cpath d='M100 108c-17 0-27-10-27-22 14 0 27 7 27 22z'/%3E%3Cpath d='M100 108c17 0 27-10 27-22-14 0-27 7-27 22z'/%3E%3C/g%3E%3C/svg%3E") center 55% / 62% auto no-repeat;
  pointer-events:none;
}
.medaillon:has(img)::before{display:none;}
.medaillon::after{
  content:"";position:absolute;inset:14px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:inherit;pointer-events:none;
}

/* ------------------ Bandeau valeurs ------------------ */
.valeurs{
  display:grid;gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  text-align:center;
}
.valeur__num{
  font-family:var(--serif);font-size:2rem;
  color:var(--vert-doux);display:block;margin-bottom:.4rem;
}
.valeur h3{font-size:1.15rem;margin-bottom:.4rem;}
.valeur p{font-size:.95rem;color:var(--encre-douce);}

/* ------------------ Cartes soins ------------------ */
.grille-soins{
  display:grid;gap:clamp(1.5rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.soin{
  display:flex;flex-direction:column;
  background:var(--blanc);
  border:1px solid rgba(223,212,190,.9);
  border-radius:var(--radius);
  padding:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);
  transition:transform .35s ease,box-shadow .35s ease;
}
.soin:hover{transform:translateY(-5px);box-shadow:var(--ombre);}
.soin__eyebrow{
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--vert-doux);margin-bottom:.9rem;
  min-height:2.6em;line-height:1.3;
}
.soin h3{margin-bottom:.5rem;}
.soin p{font-size:.97rem;color:var(--encre-douce);}
.soin__meta{
  margin-top:auto;padding-top:1.5rem;
  border-top:1px solid var(--sable);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);
}
.soin__prix{
  font-family:var(--serif);font-size:1.75rem;
  letter-spacing:.02em;text-transform:none;color:var(--vert-profond);
}

/* ------------------ Citation ------------------ */
.citation{
  text-align:center;max-width:720px;margin-inline:auto;
}
.citation blockquote{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2.15rem);
  line-height:1.45;color:var(--vert-profond);
}
.citation cite{
  display:block;margin-top:1.6rem;font-style:normal;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--vert-doux);font-family:var(--sans);
}

/* ------------------ Bloc contact / CTA ------------------ */
.contact-duo{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:2.6rem;
}
.carte-lien{
  display:flex;align-items:center;gap:1.15rem;
  background:var(--blanc);
  border:1px solid rgba(223,212,190,.9);
  border-radius:var(--radius);
  padding:1.5rem 1.7rem;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.carte-lien:hover{transform:translateY(-3px);border-color:var(--vert-doux);box-shadow:var(--ombre);}
.carte-lien__icone{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vert-brume);color:var(--vert-profond);
}
.carte-lien__icone svg{width:22px;height:22px;}
.carte-lien strong{
  display:block;font-family:var(--serif);font-size:1.2rem;
  font-weight:400;color:var(--vert-profond);
}
.carte-lien span{font-size:.88rem;color:var(--encre-douce);}

/* ------------------ Parutions ------------------ */
.grille-presse{
  display:grid;gap:clamp(1.4rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.presse{
  background:var(--blanc);
  border:1px solid rgba(223,212,190,.9);
  border-radius:var(--radius);
  padding:2rem 1.9rem;
  display:flex;flex-direction:column;
}
.presse__media{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--vert-doux);margin-bottom:1rem;
}
.presse h3{font-size:1.28rem;margin-bottom:.6rem;}
.presse p{font-size:.94rem;color:var(--encre-douce);}
.presse__lien{
  margin-top:auto;padding-top:1.3rem;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
}

.temoins{
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
  margin-top:2.4rem;
}
.temoins li{
  list-style:none;
  background:var(--vert-brume);
  border:1px solid rgba(223,212,190,.8);
  border-radius:999px;
  padding:.55rem 1.25rem;
  font-size:.85rem;color:var(--encre-douce);
}

/* ------------------ FAQ ------------------ */
.faq{max-width:820px;margin-inline:auto;}
.faq details{
  border-bottom:1px solid var(--sable);
  padding:1.35rem 0;
}
.faq details[open]{padding-bottom:1.8rem;}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  font-family:var(--serif);
  font-size:clamp(1.12rem,1rem + .5vw,1.4rem);
  color:var(--vert-profond);
  line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";flex:none;font-family:var(--sans);font-weight:300;
  font-size:1.5rem;line-height:1;color:var(--vert-doux);
  transition:transform .3s ease;
}
.faq details[open] summary::after{content:"–";transform:rotate(180deg);}
.faq__reponse{padding-top:1rem;color:var(--encre-douce);font-size:.99rem;}
.faq__reponse ul{margin:.6rem 0 0;padding-left:1.1rem;}
.faq__reponse li{margin-bottom:.35rem;}

/* ------------------ Encadré ------------------ */
.encadre{
  background:var(--sable-clair);
  border-left:2px solid var(--vert-doux);
  padding:1.6rem 1.9rem;
  border-radius:var(--radius);
  font-size:.96rem;color:var(--encre-douce);
}

/* ------------------ Pied de page ------------------ */
.pied{
  background:var(--vert-profond);
  color:rgba(255,255,255,.78);
  padding-block:clamp(3rem,2rem + 4vw,4.5rem);
  font-size:.93rem;
}
.pied a{color:rgba(255,255,255,.85);}
.pied a:hover{color:var(--sable);}
.pied h4{
  color:var(--blanc);font-family:var(--sans);
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:1.1rem;font-weight:400;
}
.pied__grille{
  display:grid;gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.pied .logo{color:var(--blanc);margin-bottom:1rem;display:inline-block;}
.pied ul{list-style:none;margin:0;padding:0;}
.pied li{margin-bottom:.55rem;}
.pied__bas{
  margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.8rem;color:rgba(255,255,255,.6);
}
.pied__social{display:flex;gap:.8rem;margin-top:1.2rem;}
.pied__social a{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);
}
.pied__social a:hover{background:rgba(255,255,255,.12);border-color:var(--sable);}
.pied__social svg{width:19px;height:19px;}

/* ------------------ Bouton WhatsApp flottant ------------------ */
.wa-flottant{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  z-index:60;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vert-doux);color:var(--blanc);
  box-shadow:0 12px 28px -12px rgba(47,58,51,.6);
  transition:transform .3s ease,background .3s ease;
}
.wa-flottant:hover{transform:scale(1.07);background:var(--vert-profond);color:var(--blanc);}
.wa-flottant svg{width:28px;height:28px;}

/* ------------------ En-tête de page intérieure ------------------ */
.page-tete{
  background:
    radial-gradient(100% 120% at 15% 0%, rgba(223,212,190,.5) 0%, rgba(223,212,190,0) 65%),
    var(--vert-brume);
  padding-block:clamp(3rem,2rem + 5vw,5.5rem);
  text-align:center;
}
.page-tete h1{margin-bottom:.3em;}
.page-tete p{max-width:640px;margin-inline:auto;color:var(--encre-douce);}

/* ------------------ Bio ------------------ */
.bio{
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:.85fr 1.15fr;align-items:center;
}
@media (max-width:860px){.bio{grid-template-columns:1fr;}}

/* ------------------ Utilitaires ------------------ */
.centre{text-align:center;}
.tete-section{max-width:640px;margin:0 auto clamp(2.5rem,4vw,3.5rem);text-align:center;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* Espacement entre deux boutons côte à côte */
.btn + .btn{margin-left:.85rem;}
@media (max-width:520px){
  .btn{width:100%;justify-content:center;}
  .btn + .btn{margin-left:0;margin-top:.75rem;}
}

/* Grille de 4 cartes : 2×2 sur grand écran */
.grille-presse--duo{grid-template-columns:repeat(2,1fr);}
@media (max-width:700px){.grille-presse--duo{grid-template-columns:1fr;}}