:root{
  --creme:#f7f3f0;
  --creme-2:#efe9e4;
  --taupe:#c8bfb8;
  --brun:#82624d;
  --brun-fonce:#6a4f3e;
  --sombre:#3a322c;
  --encre:#2e2a26;
  --encre-doux:#6b6259;
  --soleil:#d99a3f;
  --soleil-vif:#e8ac4e;
  --soleil-doux:#f2c98a;
  --soleil-fonce:#a8641f;
  --pilule:999px;
  --carte:26px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --tex-platre:url("../assets/extracted/tex-platre.jpg");
  --tex-poudre:url("../assets/extracted/tex-poudre.jpg");
  --tex-sable:url("../assets/extracted/tex-sable.jpg");
  --tex-gauche:url("../assets/extracted/tex-gauche.jpg");
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--creme);color:var(--encre);
  font-family:var(--sans);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.16;text-wrap:balance}
p{margin:0 0 1rem}
.lead{font-size:1.16rem;color:var(--encre-doux);max-width:54ch}
/* tous les liens de contenu prennent les tons du site, jamais le bleu par defaut */
.doc a:not(.btn),.carte a:not(.btn),.faq-item a,.legal-content a,.zone a:not(.btn),.rembourse-box a{
  color:var(--brun);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(217,154,63,.55);text-decoration-thickness:1px;
}
.doc a:not(.btn):hover,.faq-item a:hover,.legal-content a:hover{color:var(--soleil-fonce);text-decoration-color:var(--soleil)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--brun);outline-offset:3px;border-radius:var(--pilule)}

.btn{
  display:inline-block;font-size:.86rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;padding:16px 34px;
  border-radius:var(--pilule);border:1px solid var(--brun);
  background:linear-gradient(135deg,var(--soleil) 0%,var(--brun) 78%);color:#fff;
  transition:background .25s,transform .12s,border-color .25s;
  white-space:nowrap;
}
.btn:hover{background:linear-gradient(135deg,var(--soleil-vif) 0%,var(--brun-fonce) 78%);border-color:var(--brun-fonce)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--brun-fonce)}
.btn-ghost:hover{background:rgba(130,98,77,.1);color:var(--brun-fonce)}
.btn-clair{background:rgba(255,255,255,.94);border-color:transparent;color:var(--sombre)}
.btn-clair:hover{background:#fff;border-color:transparent;color:var(--brun-fonce)}
.btn-soleil{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;padding:10px 20px;border-radius:var(--pilule);
  border:1px solid var(--soleil);color:var(--brun-fonce);background:rgba(217,154,63,.12);
  transition:background .25s,border-color .25s;white-space:nowrap;
}
.btn-soleil:hover{background:rgba(217,154,63,.22);border-color:var(--soleil-vif)}

/* ---------- navigation : fond sombre, le logo passe en blanc pour rester lisible ---------- */
.nav{
  background:var(--sombre);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:50;
}
.nav-in{display:flex;align-items:center;gap:30px;min-height:88px;padding:12px 0}
/* le logo garde ses couleurs d'origine (taupe + script peche + trait blanc) :
   sur le fond sombre de la nav, les trois ressortent, ce qui n'etait pas le cas sur creme. */
.nav-logo{height:58px;width:auto}
.nav-liens{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav-liens a{
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,243,240,.82);
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .25s,color .25s;
}
.nav-liens a:hover{border-bottom-color:var(--soleil);color:#fff}
.burger{color:var(--creme)}
.nav-tel{
  font-size:.95rem;color:var(--sombre);text-decoration:none;font-weight:600;
  white-space:nowrap;margin-left:30px;
}

/* ---------- hero : la photo d'abord, le texte cale a gauche ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(86vh,760px);display:flex;align-items:flex-end;
  padding:0 0 74px;
}
.hero-fond{position:absolute;inset:0;z-index:-2}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* voile : sombre en bas a gauche pour porter le texte, transparent en haut a droite */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(30,24,18,.92) 0%,rgba(30,24,18,.62) 34%,rgba(30,24,18,.18) 66%,rgba(30,24,18,.34) 100%),
    linear-gradient(to right,rgba(30,24,18,.55) 0%,rgba(30,24,18,0) 62%);
}
.hero-in{position:relative;max-width:1180px;width:100%;margin:0 auto;padding:0 28px;text-align:left}
.hero-logo{height:96px;width:auto;margin:0 0 30px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.hero .sur-titre{color:var(--soleil-doux)}
.hero h1{
  font-size:clamp(2.3rem,5.2vw,4.05rem);letter-spacing:-.008em;color:#fff;max-width:17ch;
  text-shadow:0 2px 24px rgba(30,24,18,.5);
}
.hero h1 em{font-style:normal;color:var(--soleil-doux)}
.hero .lead{margin:22px 0 34px;color:rgba(255,255,255,.9);max-width:44ch;font-size:1.14rem}
.hero-cta{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---------- bandeau photo pleine largeur ---------- */
.bandeau{position:relative;overflow:hidden;isolation:isolate;padding:120px 0;text-align:center}
.bandeau-fond{position:absolute;inset:0;z-index:-2}
.bandeau-fond img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.bandeau::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(30,24,18,.52)}
.bandeau p{
  position:relative;font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.3;
  color:#fff;max-width:20ch;margin:0 auto;text-wrap:balance;
}
.bandeau .attribution{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soleil-doux);margin-top:22px;
}

/* ---------- sections ---------- */
.sec{padding:104px 0}
.sec-titre{font-size:clamp(1.95rem,3.3vw,2.7rem);max-width:19ch}
.sur-titre{
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--soleil-fonce);margin:0 0 16px;font-weight:600;
}

/* ---------- les soins : la photo porte la carte ---------- */
/* grille : une bande vedette en haut, puis 2x2, sans trou */
.soins{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.carte{
  border-radius:var(--carte);position:relative;overflow:hidden;background:var(--creme-2);
  display:flex;flex-direction:column;
}
.carte-img{position:relative;overflow:hidden;aspect-ratio:16/10}
.carte-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.carte:hover .carte-img img{transform:scale(1.045)}
.carte-corps{padding:30px 32px 34px}
.carte h3{font-size:1.5rem;margin-bottom:6px}
.carte .duree{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  display:block;margin-bottom:16px;font-weight:600;color:var(--soleil-fonce);
}
.carte p{font-size:1rem;margin:0;line-height:1.66;color:var(--encre-doux)}
/* la carte vedette : deux colonnes, photo a gauche, texte a droite */
/* bande horizontale : hauteur bornee, sinon la photo verticale fait exploser la carte */
.carte-vedette{grid-column:span 2;flex-direction:row;align-items:stretch;background:var(--sombre);max-height:330px}
.carte-vedette .carte-img{aspect-ratio:auto;flex:1 1 42%;min-height:0;height:330px}
.carte-vedette .carte-corps{flex:1 1 58%;display:flex;flex-direction:column;justify-content:center;padding:38px 42px}
.carte-vedette h3{color:#fff;font-size:1.85rem}
.carte-vedette .duree{color:var(--soleil-doux)}
.carte-vedette p{color:rgba(247,243,240,.86)}
/* la cicatrice : meme gabarit, mais fond sombre pour la distinguer */
.carte-sombre{background:var(--brun-fonce)}
.carte-sombre h3{color:#fff}
.carte-sombre .duree{color:var(--soleil-doux)}
.carte-sombre p{color:rgba(247,243,240,.88)}

/* ---------- parcours : portrait plein cadre sur fond sombre ---------- */
.parcours{background:var(--sombre);color:var(--creme);padding:0;overflow:hidden}
.parcours-in{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;align-items:stretch;
  max-width:none;padding:0;
}
.parcours-photo{position:relative;min-height:520px}
.parcours-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
/* le texte respire sur toute la colonne au lieu d'etre tasse au centre */
.parcours-texte{padding:92px 72px;max-width:none;display:flex;flex-direction:column;justify-content:center}
.parcours-texte > *{max-width:60ch}
.parcours .sur-titre{color:var(--soleil-doux)}
.parcours h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:24px;color:#fff;max-width:18ch}
.parcours p{color:rgba(247,243,240,.84);max-width:54ch}
.legitime{
  background:rgba(255,255,255,.07);border-left:3px solid var(--soleil);border-radius:0 12px 12px 0;
  padding:22px 26px;font-size:1.06rem;color:#fff;max-width:54ch;
}
.signature{font-family:var(--serif);font-size:1.7rem;color:var(--soleil-doux);margin-top:24px;display:block}

/* ---------- page soins : blocs alternes ---------- */
.soin-bloc{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:76px 0;border-bottom:1px solid rgba(58,50,44,.1)}
.soin-bloc:last-child{border-bottom:0}
.soin-bloc:nth-child(even) .soin-photo{order:2}
.soin-photo{border-radius:var(--carte);overflow:hidden;box-shadow:0 18px 50px rgba(58,50,44,.16)}
.soin-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.soin-bloc h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:8px}
.soin-meta{
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soleil-fonce);
  font-weight:600;display:block;margin-bottom:20px;
}
.soin-bloc p{color:var(--encre-doux);max-width:52ch}
.soin-pour{margin-top:22px;padding-left:18px;border-left:3px solid var(--soleil);max-width:52ch}
.soin-pour strong{color:var(--encre);display:block;margin-bottom:4px;font-size:.95rem}
.soin-pour p{margin:0;font-size:.97rem}

/* ---------- CTA final ---------- */
.cta-final{position:relative;overflow:hidden;isolation:isolate;padding:110px 0;text-align:center}
.cta-final-fond{position:absolute;inset:0;z-index:-2}
.cta-final-fond img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.cta-final::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(30,24,18,.72)}
/* sur photo, le bouton fantome a besoin d'un fond pour ne pas disparaitre */
.hero .btn-ghost,.cta-final .btn-ghost{background:rgba(30,24,18,.42);backdrop-filter:blur(2px)}
.cta-final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.cta-final .btn-ghost:hover{background:rgba(30,24,18,.62);color:#fff}
.cta-final h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:20ch;margin:0 auto 16px}
.cta-final p{color:rgba(255,255,255,.86);max-width:48ch;margin:0 auto 32px}
.cta-note{font-size:.9rem;color:rgba(255,255,255,.7);margin-top:22px}

/* ---------- zone de consultation ---------- */
.zone{padding:76px 0}
.zone-in{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.zone h2{font-size:clamp(1.6rem,2.6vw,2.15rem);margin-bottom:16px}
.zone-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.zone-liste li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  background:var(--creme-2);border-left:3px solid var(--soleil);border-radius:4px;padding:16px 20px;
}
.zone-ville{font-family:var(--serif);font-size:1.25rem;color:var(--encre)}
.zone-detail{font-size:.9rem;color:var(--encre-doux);text-align:right}
.zone-photo{border-radius:var(--carte);overflow:hidden;box-shadow:0 18px 50px rgba(58,50,44,.16)}
.zone-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}

/* ---------- tarifs : une carte, pas un panneau ---------- */
.tarifs{
  position:relative;background:var(--creme);
  padding:110px 0;overflow:hidden;
}
.tarifs::before{
  content:"";position:absolute;inset:0;
  background:var(--tex-platre);background-size:cover;background-position:center 78%;
  opacity:.2;
}
.tarifs-in{position:relative;z-index:1;display:grid;grid-template-columns:210px 1fr;gap:64px;align-items:center}
.tarifs-branche{width:200px;height:auto;opacity:.72;justify-self:center}
.tarifs h2{font-size:clamp(1.95rem,3.3vw,2.6rem);color:var(--encre)}
.tarifs .sous{color:var(--encre-doux);max-width:56ch;margin:14px 0 46px;font-size:1.04rem}
.carte-tarifs{list-style:none;margin:0;padding:0;max-width:780px}
.carte-tarifs li{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  column-gap:16px;padding:22px 0;border-top:1px solid rgba(58,50,44,.13);
}
.carte-tarifs li:last-child{border-bottom:1px solid rgba(58,50,44,.13)}
.t-offrir{align-self:center}
.cures-titre{
  font-family:var(--serif);font-size:1.1rem;color:var(--brun-fonce);margin:38px 0 4px;
}
.rembourse-box{
  background:rgba(217,154,63,.1);border-left:3px solid var(--soleil);
  border-radius:4px;padding:18px 22px;margin:28px 0 40px;max-width:640px;
}
.rembourse-titre{font-family:var(--serif);font-size:1.15rem;color:var(--brun-fonce);margin-bottom:6px}
.rembourse-box p:last-child{margin:0;font-size:.95rem;color:var(--encre-doux)}
.t-nom{font-family:var(--serif);font-size:1.55rem;line-height:1.2;color:var(--encre)}
.t-duree{
  display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre-doux);margin-top:6px;
}
.t-filet{border-bottom:1px dotted rgba(217,154,63,.55);transform:translateY(-4px)}
.t-prix{font-family:var(--serif);font-size:1.9rem;color:var(--soleil-fonce);line-height:1;white-space:nowrap}
.tarifs-note{margin:36px 0 0}

/* ---------- offrir un soin ---------- */
.cadeau-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.cadeau-img{border-radius:var(--carte);overflow:hidden;box-shadow:0 20px 54px rgba(58,50,44,.18)}
/* sans ratio impose, la photo verticale s'etire et se deforme dans sa colonne */
.cadeau-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.cadeau h2{font-size:clamp(1.85rem,3vw,2.5rem);margin-bottom:20px}
.sablier-icone{margin-bottom:22px}
.sablier-icone img{height:188px;width:auto}
.tarifs-branche{width:110px;height:auto;opacity:.9;justify-self:center}

/* ---------- rendez-vous ---------- */
.rdv{background:var(--creme-2)}
.rdv-cadre{
  max-width:820px;border:1px dashed rgba(217,154,63,.55);border-radius:var(--carte);
  background:rgba(255,255,255,.6);padding:52px 40px;text-align:center;
}

/* ---------- le cabinet : clair, avec la photo ---------- */
.cabinet{background:var(--creme)}
.cabinet h2{font-size:clamp(1.95rem,3.3vw,2.6rem);margin-bottom:12px}
.cabinet-grille{display:grid;grid-template-columns:1fr 1fr .9fr;gap:48px;margin-top:46px;align-items:start}
.cabinet-photo{border-radius:var(--carte);overflow:hidden;box-shadow:0 18px 50px rgba(58,50,44,.16)}
.cabinet-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.bloc{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid rgba(58,50,44,.12)}
.bloc:last-child{border-bottom:0}
.bloc dt{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soleil-fonce);margin-bottom:8px;font-weight:600}
.bloc dd{margin:0;font-size:1.05rem;color:var(--encre)}
.bloc dd a:not(.btn){color:var(--brun);text-decoration:none;border-bottom:1px solid rgba(130,98,77,.4)}

/* ---------- pied ---------- */
.pied{background:#2b2521;color:rgba(247,243,240,.62);font-size:.88rem;padding:56px 0 62px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:46px}
.pied strong{color:var(--creme);font-weight:600;display:block;margin-bottom:11px;font-size:.95rem}
.pied p{margin:0 0 .5rem;line-height:1.62}
.pied a:not(.btn){color:rgba(247,243,240,.8)}

/* ---------- champs a completer ---------- */
.todo{
  display:inline-flex;align-items:baseline;gap:10px;
  background:rgba(130,98,77,.11);border:1px dashed rgba(130,98,77,.5);
  border-radius:14px;padding:10px 16px;margin:6px 0;
  font-size:.87rem;color:var(--brun-fonce);font-style:italic;line-height:1.5;
}
.todo b{
  font-style:normal;font-weight:600;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brun);flex-shrink:0;
}
/* le cabinet est passe en fond clair : le .todo garde donc le style clair par defaut */

/* ---------- FAQ ---------- */
.faq-liste{margin-top:48px;max-width:760px}
.faq-item{margin-bottom:30px}
.faq-item:last-child{margin-bottom:0}
.faq-item h3{
  font-family:var(--serif);font-weight:500;font-size:1.28rem;color:var(--encre);
  padding-left:18px;border-left:3px solid var(--soleil);margin-bottom:10px;
}
.faq-item p{margin:0;padding-left:18px;color:var(--encre-doux);font-size:1rem}

/* ---------- burger + menu mobile ---------- */
/* La barre de navigation est toujours sombre : le trait du burger doit rester
   creme. Cette regle arrivait apres « .burger{color:var(--creme)} » plus haut
   et l'annulait, ce qui donnait un contraste de 1,00 (icone invisible). */
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--creme);padding:6px;margin-left:12px}
.mobile-menu{
  display:none;position:fixed;inset:96px 0 0;z-index:49;background:var(--creme);
  padding:32px 28px;flex-direction:column;gap:4px;overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  font-family:var(--serif);font-size:1.5rem;color:var(--encre);text-decoration:none;
  padding:14px 0;border-bottom:1px solid rgba(58,50,44,.13);
}
.mobile-menu .btn{margin-top:20px;text-align:center}

/* ---------- pages interieures ---------- */
.page-hero{background:var(--creme-2);padding:64px 0 46px}
.page-hero h1{font-size:clamp(2rem,3.8vw,2.9rem);max-width:26ch}
.page-hero p{color:var(--encre-doux);font-size:1.1rem;max-width:56ch;margin:14px 0 0}

/* ---------- pages legales ---------- */
.legal-content{max-width:70ch}
.legal-content h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:2.1rem 0 .8rem;color:var(--encre)}
.legal-content p{margin-bottom:1rem;color:var(--encre)}
.legal-content a{color:var(--brun);font-weight:600}
.legal-box{background:var(--creme-2);border-radius:14px;padding:22px 26px;margin:12px 0 22px}
.legal-box p{margin-bottom:.35rem}
.legal-box p:last-child{margin-bottom:0}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .soins{grid-template-columns:1fr}
  .carte-vedette,.carte-large{grid-column:auto;flex-direction:column}
  .carte-vedette .carte-img,.carte-large .carte-img{aspect-ratio:16/10;min-height:0}
  .carte-vedette .carte-corps,.carte-large .carte-corps{padding:30px 32px 34px}
  .parcours-in{grid-template-columns:1fr}
  .parcours-photo{min-height:340px}
  .parcours-texte{padding:56px 28px 64px}
  .cadeau-in,.cabinet-grille,.pied-grille,.zone-in{grid-template-columns:1fr;gap:36px}
  .tarifs-in{grid-template-columns:1fr;gap:30px}
  .tarifs-branche{width:120px}
  .nav-liens{display:none}
  .burger{display:block;margin-left:auto}
  /* Le bouton de prise de rendez-vous fait 280 px en nowrap : additionne au
     logo et au burger, il faisait deborder la page de 51 px sur un telephone
     de 390 px et ecrasait le logo a 0 px de large. Le menu mobile porte deja
     ce meme bouton, on le retire donc de la barre. */
  .nav-tel{display:none}
  .sec,.tarifs{padding:68px 0}
  .hero{min-height:auto;padding:120px 0 56px}
  .hero-logo{height:74px;margin-bottom:22px}
  .bandeau{padding:88px 0}
  .cta-final{padding:80px 0}
  .zone-photo img{aspect-ratio:16/10}
  .cabinet-photo img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  /* Un libelle long en nowrap deborde la page sous 340 px (« Voir le detail de
     chaque soin » sortait de 29 px). Deux lignes valent mieux qu'un defilement
     horizontal : on laisse le bouton revenir a la ligne. */
  .btn{white-space:normal;padding:14px 22px;letter-spacing:.1em}
  .carte{padding:34px 28px}
  .carte-tarifs li{grid-template-columns:1fr auto;row-gap:10px;column-gap:12px}
  .t-filet{display:none}
  .t-offrir{grid-column:1 / -1;justify-self:start}
  .t-nom{font-size:1.3rem}
  .t-prix{font-size:1.6rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{text-align:center}
  .hero-logo{height:60px}
  .carte-corps{padding:26px 24px 30px}
  .parcours-texte{padding:48px 22px 56px}
}
/* ---------- bandeau cookies ---------- */
#cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--sombre);color:rgba(247,243,240,.92);
  padding:18px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  box-shadow:0 -4px 30px rgba(42,37,33,.22);transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
#cookie-banner.hidden{transform:translateY(110%)}
#cookie-banner p{margin:0;font-size:.9rem;max-width:720px;line-height:1.55}
#cookie-banner p a{color:#fff;text-decoration:underline}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btns button{font-family:inherit;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:11px 22px;border-radius:var(--pilule);cursor:pointer;border:none}
#cookie-accept{background:var(--soleil);color:var(--sombre)}
#cookie-refuse{background:transparent;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.32)}

.brand-link{display:block;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   MOUVEMENT
   ========================================================================== */

/* --- La scene du sable, en remplacement du bandeau citation.
   Le dessin est produit puis detoure en transparence : il se pose sur le creme
   sans rectangle visible. Les grains animes tombent par-dessus, le long du
   filet dessine. Reperes releves dans l'image elle-meme : filet a 0,461 de la
   largeur, paume a 0,545, sortie sous les doigts a 0,66 (voir js/main.js). */
.scene-sable{background:var(--creme);padding:96px 0;overflow:clip}
.scene-in{
  /* on rapproche les colonnes en bornant la GRILLE, jamais en retrecissant le
     texte : borne a 16ch, la citation tombait a un mot par ligne. */
  max-width:1120px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
}
.scene-cit{
  font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.14;
  color:var(--encre);margin:0;text-wrap:balance;
}
.scene-att{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soleil-fonce);margin:26px 0 0;
}
.scene-main{position:relative;margin:0;width:min(40vw,400px);flex:0 0 auto}
/* le filet dessine atteint les bords de l'image : on l'estompe pour qu'il
   n'ait pas l'air coupe net */
.scene-main img,.scene-grains{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 93%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 93%,transparent 100%);
}
.scene-main img{width:100%;height:auto;display:block}
.scene-grains{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (max-width:860px){
  .scene-in{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center}
  .scene-main{width:min(78vw,340px)}
  .scene-sable{padding:64px 0}
}

/* --- Le hero prend de la profondeur : la photo derive plus lentement que la
   page. Pilote par le defilement, donc rien ne bouge tant que le visiteur ne
   bouge pas. L'etat par defaut est l'etat FINAL (photo immobile, simplement
   agrandie) : sur Firefox, ou animation-timeline n'est pas actif par defaut,
   la page reste correcte au lieu de casser. */
.hero,.cta-final{overflow:clip}
.hero-fond img{transform:scale(1.16)}
@keyframes hero-derive{
  from{transform:scale(1.16) translateY(-4.4%)}
  to  {transform:scale(1.16) translateY(4.4%)}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-fond img{
      animation:hero-derive linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100svh;
    }
  }
}
/* le soleil qui respire sur l'eau, tres lent et tres pale */
.hero-fond::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 58% at 66% 32%,rgba(255,214,150,.24),rgba(255,214,150,0) 62%);
  animation:halo-soleil 26s ease-in-out infinite alternate;
}
@keyframes halo-soleil{
  from{opacity:.4;transform:translate3d(-2%,1%,0) scale(1)}
  to  {opacity:.95;transform:translate3d(2%,-1%,0) scale(1.09)}
}

/* --- Les cartes de soins se levent en cascade. L'etat cache n'est pose QUE si
   le script tourne (classe js-anim) : sans JavaScript, ou en mouvement reduit,
   les cartes sont visibles. Jamais de contenu invisible. */
.js-anim .soins .carte{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i,0)*95ms);
}
.js-anim .soins .carte.vu{opacity:1;transform:none}

/* --- Mouvement reduit. La regle generale plus haut coupe deja transitions et
   animations CSS ; il reste a neutraliser ce qui n'en depend pas. */
@media (prefers-reduced-motion:reduce){
  .hero-fond::after{display:none}
  .hero-fond img{transform:none}
  .scene-grains{display:none}
}