/* ============================================================
   FORMELEA — feuille de style commune
   Bleu nuit #0F1B36 · Or #C9A24B · Argent · Crème
   ============================================================ */

/* ---- Typographies hébergées sur notre propre domaine ----
   Elles ne sont PAS chargées depuis Google : cela transmettrait
   l'adresse IP des visiteurs à un tiers, ce que le RGPD n'autorise
   pas sans consentement. Ce sont des fontes variables : trois
   fichiers suffisent pour toutes les graisses. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/cormorant-garamond-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/jost.woff2") format("woff2");
}

:root{
  --nuit:#0F1B36;
  --nuit-2:#152648;
  --nuit-3:#1B2E59;
  --nuit-profond:#050B33;
  --or:#C9A24B;
  --or-clair:#E8CE8C;
  --or-soft:rgba(201,162,75,.35);
  --argent-1:#F2F4F7;
  --argent-2:#AEB5C1;
  --creme:#FAF8F2;
  --encre:#1D2433;
  --brume:#5D6B84;
  --blanc:#FDFDFB;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--nuit);color:var(--blanc);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--or);color:var(--nuit)}
:focus-visible{outline:2px dashed var(--or);outline-offset:3px}
section[id],header[id]{scroll-margin-top:88px}

/* ---- L'interrupteur de lancement ---- */
[data-etat="precommande"] .si-vente{display:none!important}
[data-etat="vente"] .si-precommande{display:none!important}

.container{width:min(1180px,92%);margin-inline:auto}
.section{padding:6.5rem 0}
.kicker{display:inline-flex;align-items:center;gap:.55rem;color:var(--or);text-transform:uppercase;
  letter-spacing:.26em;font:500 .76rem var(--sans);margin-bottom:1.1rem}
.kicker::before,.kicker::after{content:"";width:26px;height:1px;background:var(--or-soft)}
.h2{font:600 clamp(2.1rem,4.4vw,3.2rem)/1.12 var(--serif);letter-spacing:.01em;text-wrap:balance}
.h2 em{font-style:italic;color:var(--or-clair)}
.center{text-align:center}
.lead{font:300 1.08rem/1.85 var(--sans)}

/* ---- Apparition ---- */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.rv.on{opacity:1;transform:none}

/* ---- Boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1.05rem 2.3rem;
  border-radius:999px;font:500 .95rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;position:relative;overflow:hidden;cursor:pointer;border:0;
  transition:transform .3s var(--ease),box-shadow .3s,background-color .3s,color .3s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-shine::before{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .75s ease;pointer-events:none}
.btn-shine:hover::before{left:125%}
.btn-or{background:linear-gradient(120deg,var(--or) 0%,var(--or-clair) 55%,var(--or) 100%);
  color:var(--nuit);font-weight:600;box-shadow:0 16px 36px -14px rgba(201,162,75,.65)}
.btn-or:hover{box-shadow:0 22px 46px -16px rgba(201,162,75,.8)}
.btn-ghost{border:1px solid rgba(253,253,251,.5);color:var(--blanc)}
.btn-ghost:hover{background:var(--blanc);color:var(--nuit)}
.btn-nuit{background:var(--nuit);color:var(--blanc);box-shadow:0 14px 30px -12px rgba(15,27,54,.55)}
.btn-nuit:hover{background:var(--nuit-3)}

/* ---- Progression ---- */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--or),var(--or-clair))}

/* ---- Navbar ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.1rem 0;
  transition:background-color .35s,padding .35s,box-shadow .35s,backdrop-filter .35s}
.nav.scrolled{background:rgba(15,27,54,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:.6rem 0;box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;text-decoration:none;position:relative}
.brand img{height:34px;width:auto;transition:filter .5s ease,transform .5s var(--ease)}
.brand:hover img{transform:translateY(-1px);filter:drop-shadow(0 0 9px rgba(201,162,75,.45))}
/* Un reflet doré traverse les lettres elles-mêmes : le SVG du logo
   sert de masque, donc la lueur épouse la typographie. */
.brand-gleam{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:140px;height:34px;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 38%,rgba(232,206,140,.9) 50%,transparent 62%);
  background-size:260% 100%;background-position:135% 0;
  transition:background-position .9s var(--ease),opacity .35s ease}
@supports not ((-webkit-mask-image:url("logo-blanc.svg")) or (mask-image:url("logo-blanc.svg"))){
  .brand-gleam{display:none}
}
.brand-gleam{-webkit-mask:url("logo-blanc.svg") no-repeat left center/auto 34px;
  mask:url("logo-blanc.svg") no-repeat left center/auto 34px}
.brand:hover .brand-gleam{opacity:1;background-position:-45% 0}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a:not(.nav-cta){color:rgba(253,253,251,.88);text-decoration:none;font:500 .8rem var(--sans);
  letter-spacing:.16em;text-transform:uppercase;position:relative;padding:.4rem 0}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--or);transition:width .35s var(--ease)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active:not(.nav-cta)::after{width:100%}
.nav-links a.active:not(.nav-cta){color:var(--or-clair)}
.nav-cta{background:linear-gradient(120deg,var(--or),var(--or-clair) 60%,var(--or));color:var(--nuit);
  text-decoration:none;font:600 .78rem var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:.72rem 1.5rem;border-radius:999px;transition:transform .3s,box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(201,162,75,.6)}
.burger{display:none;width:46px;height:46px;background:none;border:0;cursor:pointer;position:relative;z-index:48}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:#fff;border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s,top .4s var(--ease)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px}
.burger.open span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:23px;transform:rotate(-45deg)}
@media (max-width:920px){.nav-links{display:none}.burger{display:block}}

#mmenu{position:fixed;inset:0;z-index:45;background:linear-gradient(160deg,#0A1226,var(--nuit-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease}
#mmenu.open{opacity:1;visibility:visible}
#mmenu::before{content:"F";position:absolute;bottom:-6rem;left:50%;transform:translateX(-50%);
  font:700 24rem var(--serif);color:rgba(255,255,255,.03);pointer-events:none}
.mlink{font:600 1.8rem var(--serif);color:var(--blanc);text-decoration:none;padding:.55rem 1rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease var(--d),transform .5s var(--ease) var(--d),color .3s}
.mlink:hover{color:var(--or-clair)}
#mmenu.open .mlink{opacity:1;transform:none}
.mlink-cta{margin-top:1.2rem;font:600 1rem var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(120deg,var(--or),var(--or-clair));color:var(--nuit);
  border-radius:999px;padding:1rem 2.4rem}
.mlink-cta:hover{color:var(--nuit)}

/* ---- Hero ---- */
/* Hauteur calée sur les proportions de la photo (2,33:1).
   Un hero plein écran forcerait un zoom de 1,3× : on perdrait le tiers
   beige de gauche et le cadrage deviendrait trop rapproché. */
.hero{position:relative;min-height:clamp(560px,44vw,720px);display:flex;align-items:center;
  overflow:hidden;background:var(--nuit)}
/* La photo occupe tout le hero ; un voile bleu nuit dégradé depuis la
   gauche garde le texte lisible sans assombrir le flacon ni le modèle. */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% center}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(15,27,54,.97) 0%,
    rgba(15,27,54,.93) 26%,
    rgba(15,27,54,.58) 43%,
    rgba(15,27,54,.14) 57%,
    rgba(15,27,54,0) 70%)}
.hero-badge{display:inline-block;margin-bottom:1.4rem;
  background:linear-gradient(120deg,var(--or),var(--or-clair));color:var(--nuit);
  border-radius:999px;padding:.5rem 1.15rem;font:600 .7rem var(--sans);letter-spacing:.14em;
  text-transform:uppercase;box-shadow:0 14px 30px -12px rgba(201,162,75,.6)}
.grain{position:absolute;inset:0;z-index:1;opacity:.07;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
/* Ces trois valeurs déterminent la hauteur du hero, donc le zoom de la
   photo. Colonne plus large = titre sur 2 lignes au lieu de 3, et les
   deux boutons côte à côte : le hero raccourcit, la photo se rapproche
   de ses proportions d'origine et le cadrage s'ouvre. */
.hero-inner{position:relative;z-index:3;width:min(1180px,92%);margin:0 auto;padding:6.5rem 0 3.5rem}
.hero-copy{max-width:40rem;min-width:0}
.hero-eyebrow{color:var(--or-clair);text-transform:uppercase;letter-spacing:.3em;
  font:500 .8rem var(--sans);margin-bottom:1.5rem}
.hero-title{font:600 clamp(2.4rem,5.2vw,4.05rem)/1.08 var(--serif);margin-bottom:1.3rem;text-wrap:balance}
.hero-title em{font-style:italic;color:var(--or-clair)}
.hero-sub{color:rgba(253,253,251,.85);font:300 1.06rem/1.8 var(--sans);max-width:34rem;margin-bottom:1.8rem}
.hero-sub strong{color:#fff;font-weight:500}
.prix-row{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}
.prix{font:600 2.3rem var(--serif);color:var(--or-clair)}
.prix-note{font:300 .82rem var(--sans);color:rgba(253,253,251,.6);letter-spacing:.04em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem}

.hero-visuel{flex:.88;display:flex;justify-content:center;min-width:0}
.bottle-area{position:relative;padding-top:3.2rem}
.halo{position:absolute;inset:-30px -60px;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,rgba(201,162,75,.24),transparent 62%);filter:blur(6px)}
.bottle{position:relative;width:min(360px,80vw);animation:flotte 7s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.bottle-img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid rgba(201,162,75,.28);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.75),0 60px 110px -50px rgba(0,0,0,.85)}
.bottle-ombre{width:70%;height:26px;margin:26px auto 0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);animation:ombre 7s ease-in-out infinite}
@keyframes ombre{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.7}}
.badge-date{position:absolute;top:0;right:-14px;z-index:4;
  background:linear-gradient(120deg,var(--or),var(--or-clair));color:var(--nuit);border-radius:999px;
  padding:.55rem 1.1rem;font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(6deg);box-shadow:0 14px 30px -12px rgba(201,162,75,.6);
  transition:transform .4s var(--ease)}
.bottle-area:hover .badge-date{transform:rotate(0deg) scale(1.08)}
/* ---- Le hero en dessous de 880 px ----
   Le voile couvrait toute la surface pour garder le texte lisible, et
   la photographie disparaissait : on ne voyait plus ni le flacon ni le
   modele. Elle occupe maintenant une bande en haut, ou le flacon est
   entier et net, et le texte passe dessous sur le bleu nuit. Personne
   n'a plus a choisir entre voir le produit et lire la page. */
@media (max-width:880px){
  .hero{display:block;min-height:0}
  .hero-inner{text-align:center;padding:2.4rem 0 3.6rem}
  .hero-copy{max-width:none}
  .hero-sub{margin-inline:auto}
  .hero-ctas,.prix-row{justify-content:center}
  .hero-media{position:relative;height:clamp(250px,36vw,340px)}
  .hero-media img{object-position:76% center}
  /* Le haut reste assombri pour la barre de navigation, le bas se fond
     dans le bleu nuit : la bande n'a aucun bord visible. */
  .hero-media::after{background:linear-gradient(180deg,
    rgba(15,27,54,.86) 0%,
    rgba(15,27,54,.26) 22%,
    rgba(15,27,54,.14) 48%,
    rgba(15,27,54,.62) 82%,
    var(--nuit) 100%)}
}

/* Sur telephone, la bande est plus courte et les deux boutons
   passent l'un sous l'autre : cote a cote ils devenaient illisibles. */
@media (max-width:640px){
  .hero-media{height:clamp(250px,64vw,310px)}
  .hero-inner{padding:2.2rem 0 3.4rem}
  .hero-title{font-size:clamp(2.1rem,8.8vw,2.8rem)}
  .hero-sub{font:300 1rem/1.74 var(--sans)}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
}

/* ---- Marquee ---- */
.marquee{background:linear-gradient(90deg,var(--or) 0%,var(--or-clair) 30%,var(--or) 60%,var(--or-clair) 100%);
  color:var(--nuit);overflow:hidden;padding:.95rem 0}
.mq-track{display:flex;width:max-content;animation:mq 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center;flex:none}
.mq-group span{font:600 .84rem var(--sans);letter-spacing:.3em;text-transform:uppercase;
  white-space:nowrap;padding:0 1.7rem}
.mq-group i{font-style:normal;font-size:.62rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- Chiffres ---- */
.stats{background:var(--nuit-2);position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 120% at 50% -20%,rgba(201,162,75,.12),transparent)}
.stats-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem 1rem;padding:4.4rem 0}
.stat{text-align:center;padding:0 1rem}
.stat+.stat{border-left:1px solid rgba(201,162,75,.25)}
.stat .num{font:600 clamp(2.5rem,4.5vw,3.6rem)/1 var(--serif);color:var(--or-clair);display:block;
  margin-bottom:.7rem;font-variant-numeric:tabular-nums}
.stat p{color:rgba(253,253,251,.78);font:400 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase}
@media (max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:2.2rem .5rem}.stat:nth-child(3){border-left:0}}

/* ---- Synergie ---- */
.synergie{background:var(--creme);color:var(--encre)}
.synergie .lead{color:var(--brume);max-width:46rem;margin:1.8rem auto 0}
.synergie .lead strong{color:var(--encre);font-weight:500}
/* ---- La double hélice de la synergie ---- */
.synergie-scene{display:grid;grid-template-columns:1.02fr .98fr;gap:3.5rem;align-items:center;margin-top:4.2rem}
/* minmax() sur la colonne des étiquettes : elle ne contient que des
   éléments en position absolue, donc sa largeur intrinsèque vaut zéro
   et un simple 1fr la ferait disparaître. */
.helice{position:relative;display:grid;grid-template-columns:132px minmax(14rem,1fr);gap:1.1rem;
  height:660px;width:100%;max-width:520px;margin-inline:auto}
.helice-zone{position:relative;height:100%}
.helice-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-brins path{fill:none;stroke:rgba(201,162,75,.45);stroke-width:1.6;stroke-linecap:round}
.h-brins path.brin-2{stroke:rgba(174,181,193,.55)}
.h-barreaux line{stroke:rgba(201,162,75,.3);stroke-width:1.3;
  transition:stroke .35s,stroke-width .35s}
.h-barreaux line.barreau-on{stroke:var(--or);stroke-width:2.6}
.h-points circle{fill:#fff;stroke:var(--or);stroke-width:1.6;
  transition:r .35s var(--ease),fill .35s,stroke-width .35s}
.h-points circle.point-on{fill:var(--or);stroke:var(--or-clair);stroke-width:3}
.h-points circle.point-coeur{fill:var(--nuit);stroke:var(--or)}
.h-points circle.point-coeur.point-on{fill:var(--nuit);stroke:var(--or-clair);stroke-width:3.4}

.helice-etiquettes{position:relative;height:100%}
.hnoeud{position:absolute;left:0;top:var(--y);transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left;
  background:#fff;border:1px solid rgba(201,162,75,.4);color:var(--encre);border-radius:12px;
  padding:.6rem .95rem;cursor:pointer;width:100%;max-width:15.5rem;
  box-shadow:0 8px 20px -14px rgba(29,36,51,.45);
  transition:background .35s,color .35s,border-color .35s,box-shadow .35s,transform .35s var(--ease)}
.hnoeud .h-nom{font:500 .92rem var(--sans);white-space:nowrap}
.hnoeud .h-dose{font:400 .7rem var(--sans);letter-spacing:.1em;color:#8A6D25}
.hnoeud:hover{transform:translateY(-50%) translateX(6px);border-color:var(--or)}
.hnoeud[aria-selected="true"]{background:linear-gradient(120deg,var(--or),var(--or-clair));
  border-color:transparent;color:var(--nuit);
  box-shadow:0 16px 34px -14px rgba(201,162,75,.8)}
.hnoeud[aria-selected="true"] .h-nom{font-weight:600}
.hnoeud[aria-selected="true"] .h-dose{color:var(--nuit);opacity:.75}
.hnoeud.h-coeur{background:var(--nuit);border-color:var(--or);color:var(--blanc)}
.hnoeud.h-coeur .h-nom{font:600 .98rem var(--serif);font-size:1.02rem}
.hnoeud.h-coeur .h-dose{color:var(--or-clair)}
.hnoeud.h-coeur[aria-selected="true"]{background:linear-gradient(150deg,var(--nuit-3),var(--nuit));
  border-color:var(--or-clair);color:var(--blanc);
  box-shadow:0 0 0 3px rgba(201,162,75,.2),0 20px 40px -16px rgba(15,27,54,.7)}
.hnoeud.h-coeur[aria-selected="true"] .h-dose{color:var(--or-clair)}
.hnoeud.h-cle::after{content:"";position:absolute;top:-5px;right:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--or);border:2px solid var(--creme)}
.hnoeud[aria-selected="true"].h-cle::after{display:none}

.synergie-detail{position:relative;min-height:15rem;display:flex;flex-direction:column;justify-content:center}
/* Sur grand écran l'hélice reste fixe et c'est le texte qui se déplace
   pour venir se placer en face de l'actif choisi. */
@media (min-width:981px){
  .synergie-detail{height:660px;display:block;min-height:0}
  .detail-piste{position:absolute;left:0;right:0;top:0;
    transition:transform .55s var(--ease);will-change:transform}
}
.detail-panneau{animation:detailIn .45s var(--ease)}
@keyframes detailIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.detail-cle{display:inline-block;margin-bottom:.8rem;
  background:linear-gradient(120deg,var(--or),var(--or-clair));color:var(--nuit);border-radius:999px;
  padding:.3rem .9rem;font:600 .62rem var(--sans);letter-spacing:.16em;text-transform:uppercase}
.detail-dose{display:block;font:600 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:#8A6D25;margin-bottom:.5rem}
.synergie-detail h3{font:600 clamp(1.8rem,3.2vw,2.5rem)/1.15 var(--serif);color:var(--encre);
  margin-bottom:.8rem}
.synergie-detail p{font:300 1.02rem/1.8 var(--sans);color:var(--brume);max-width:34rem}
.detail-aide{margin-top:1.8rem;font:400 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--or);opacity:.8}

@media (max-width:980px){
  .synergie-scene{grid-template-columns:1fr;gap:2.4rem}
  .synergie-detail{min-height:11rem;text-align:center;align-items:center}
  .synergie-detail p{margin-inline:auto}
}
@media (max-width:560px){
  .helice{grid-template-columns:84px minmax(10rem,1fr);gap:.7rem;height:600px}
  .hnoeud{padding:.5rem .8rem;max-width:none;border-radius:10px}
  .hnoeud .h-nom{font-size:.85rem}
  .hnoeud .h-dose{font-size:.66rem}
  .hnoeud.h-coeur .h-nom{font-size:.94rem}
  .hnoeud:hover{transform:translateY(-50%) translateX(3px)}
}

.actifs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:4rem}
.actif{background:#fff;border:1px solid rgba(201,162,75,.28);border-radius:16px;padding:1.6rem 1.4rem;
  position:relative;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.actif:hover{transform:translateY(-7px);border-color:var(--or);box-shadow:0 30px 55px -28px rgba(138,109,37,.4)}
.actif.star{background:linear-gradient(160deg,#FFFDF6,#FBF3DD);border-color:var(--or)}
.actif .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(120deg,var(--or),var(--or-clair));color:var(--nuit);border-radius:999px;
  padding:.28rem .85rem;font:600 .6rem var(--sans);letter-spacing:.16em;text-transform:uppercase}
.actif h3{font:600 1.28rem var(--serif);color:var(--encre)}
.actif .dose{display:inline-block;margin:.55rem 0 .7rem;border:1px solid rgba(201,162,75,.5);
  color:#8A6D25;border-radius:999px;padding:.24rem .8rem;font:600 .68rem var(--sans);letter-spacing:.1em}
.actif p{font:300 .88rem/1.65 var(--sans);color:var(--brume)}
.claims-note{margin:2.6rem auto 0;text-align:center;font:300 .78rem/1.7 var(--sans);
  color:var(--brume);max-width:48rem}
@media (max-width:1000px){.actifs-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.actifs-grid{grid-template-columns:1fr}}

/* ---- Formule ---- */
.formule{background:var(--nuit);position:relative;overflow:hidden}
.formule::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 70% at 15% 30%,rgba(201,162,75,.1),transparent 70%)}
.formule-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:center}
.formule p{color:rgba(253,253,251,.82);font:300 1rem/1.85 var(--sans);margin:1.2rem 0}
.formule p strong{color:var(--or-clair);font-weight:500}
.compo{border:1px solid rgba(201,162,75,.35);border-radius:16px;overflow:hidden;background:var(--nuit-2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
/* Ce depliant portait exactement le degrade dore et le texte bleu nuit
   de .btn-or, le bouton d'achat : deux objets identiques a l'oeil, dont
   un seul mene a la vente. Le plus voyant des deux n'etait pas celui
   qui vend. Il devient ce qu'il est — un depliant : meme zone cliquable,
   meme marqueur, mais en retrait. Le dore plein reste au bouton d'achat. */
.compo>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1.15rem 1.4rem;background:rgba(201,162,75,.08);
  color:var(--or-clair);font:500 .76rem var(--sans);letter-spacing:.18em;text-transform:uppercase;
  transition:background-color .3s var(--ease),color .3s}
.compo>summary:hover{background:rgba(201,162,75,.15)}
.compo[open]>summary{border-bottom:1px solid rgba(201,162,75,.22)}
.compo>summary::-webkit-details-marker{display:none}
.compo>summary::after{content:"+";font:500 1.5rem var(--serif);transition:transform .35s var(--ease)}
.compo[open]>summary::after{transform:rotate(45deg)}
.compo table{width:100%;border-collapse:collapse;font:400 .92rem var(--sans)}
.compo th,.compo td{padding:.78rem 1.4rem;text-align:left}
.compo thead th{font:500 .68rem var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-clair);border-bottom:1px solid rgba(201,162,75,.3)}
.compo tbody tr+tr td{border-top:1px solid rgba(253,253,251,.08)}
.compo tbody tr{transition:background-color .25s}
.compo tbody tr:hover td{background:rgba(201,162,75,.09)}
.compo td:nth-child(2),.compo td:nth-child(3),
.compo th:nth-child(2),.compo th:nth-child(3){text-align:right;white-space:nowrap}
.compo tbody tr:first-child td{color:var(--or-clair);font-weight:500}
.compo tfoot td{padding:.9rem 1.4rem;font:300 .72rem var(--sans);color:rgba(253,253,251,.55);
  border-top:1px solid rgba(201,162,75,.3)}
.tablescroll{overflow-x:auto}
@media (max-width:920px){.formule-grid{grid-template-columns:1fr;gap:3rem}}

/* ---- Beauté 360 ---- */
.b360{background:var(--creme);color:var(--encre)}
.piliers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem}
.pilier{border-radius:18px;overflow:hidden;background:var(--nuit);
  box-shadow:0 24px 50px -30px rgba(29,36,51,.45);
  transition:transform .5s var(--ease),box-shadow .5s}
.pilier:hover{transform:translateY(-9px);box-shadow:0 38px 68px -30px rgba(29,36,51,.5)}
.pilier-photo{position:relative;overflow:hidden;aspect-ratio:410/470}
.pilier-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pilier:hover .pilier-photo img{transform:scale(1.06)}
.pilier-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(15,27,54,.55))}
.pilier-corps{background:var(--nuit);color:var(--blanc);padding:1.9rem 1.6rem 2.1rem;text-align:center;
  border-top:1px solid rgba(201,162,75,.35)}
.pilier .pico{width:54px;height:54px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--or);color:var(--or-clair);background:rgba(201,162,75,.06);
  transition:background .45s,transform .45s var(--ease)}
.pilier:hover .pico{background:rgba(201,162,75,.16);transform:translateY(-3px)}
.pilier h3{font:500 1.05rem var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:var(--blanc);display:inline-block;position:relative;padding-bottom:.6rem}
.pilier h3::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;height:1px;
  width:34px;background:var(--or);transition:width .5s var(--ease)}
.pilier:hover h3::after{width:100%}
.pilier p{margin-top:.9rem;font:300 .92rem/1.75 var(--sans);color:rgba(253,253,251,.75)}
.pilier p strong{color:var(--or-clair);font-weight:500}
/* Sur un telephone, des cartes l'une sous l'autre font une page
   interminable. Empilees, chacune vient se poser sur la precedente et
   ne laisse depasser qu'un lisere : on parcourt la serie sans la subir.
   Le decalage de .6rem entre les cartes cree l'epaisseur de la pile. */
@media (max-width:860px){
  .piliers{display:block;max-width:26rem;margin-inline:auto}
  .pilier{margin-bottom:1.4rem}
  .pilier:last-child{margin-bottom:0}
  /* Au survol la carte se souleve : sur une pile, cela la decolle de
     celle du dessous. */
  .pilier:hover{transform:none}
}
/* L'empilement demande que la carte tienne dans l'ecran : sous 640 px
   de haut elle serait epinglee en depassant, et on ne verrait jamais
   son bas. Sur ces ecrans-la, les cartes restent l'une sous l'autre. */
@media (max-width:860px) and (min-height:640px){
  .pilier{position:sticky;
    box-shadow:0 -16px 36px -22px rgba(29,36,51,.55),0 24px 50px -30px rgba(29,36,51,.45)}
  .pilier:nth-child(1){top:5.4rem}
  .pilier:nth-child(2){top:6rem}
  .pilier:nth-child(3){top:6.6rem}
  /* La carte entiere doit rester au-dessus du bouton flottant, sur un
     grand telephone comme sur un petit. La photo etait calee sur un
     rapport fixe : 395 px de haut quel que soit l'ecran, soit une carte
     de 658 px qui, epinglee, descendait sous le bas d'un telephone
     reel. Elle suit maintenant la hauteur de l'ecran. Verifie sur la
     plus haute des trois cartes (celles dont le texte fait deux lignes
     de plus) : il reste de la marge de 640 px de haut jusqu'en haut. */
  .pilier-photo{aspect-ratio:auto;height:clamp(170px,30vh,300px)}
}

/* ---- Qualité ---- */
.qualite{background:var(--nuit-2);position:relative;overflow:hidden}
.qualite::before{content:"";position:absolute;inset:0;opacity:.06;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 12px,var(--or) 12px,var(--or) 13px)}
.qualite .container{position:relative}
.qualite .lead{color:rgba(253,253,251,.8);max-width:44rem;margin:1.8rem auto 0}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:3.2rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(201,162,75,.5);
  border-radius:999px;padding:.7rem 1.4rem;font:500 .78rem var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--or-clair);background:rgba(201,162,75,.07);
  transition:background .3s,transform .3s var(--ease)}
.chip:hover{background:rgba(201,162,75,.16);transform:translateY(-3px)}
.chip.fr{background:linear-gradient(120deg,var(--or),var(--or-clair));color:var(--nuit);
  border-color:transparent;font-weight:600}
/* Drapeau en SVG et non en emoji : Windows n'a pas de glyphe couleur
   pour les drapeaux et afficherait « FR » à la place. */
.drapeau{display:block;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(15,27,54,.3)}

/* ---- Rituel / étapes ---- */
.rituel{background:var(--creme);color:var(--encre)}
.rituel-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:3.6rem;align-items:center;margin-top:4rem}
.rituel-photo{position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 34px 70px -35px rgba(29,36,51,.45)}
.rituel-photo img{width:100%;height:100%;min-height:400px;object-fit:cover;
  transition:transform 1s var(--ease)}
.rituel-photo:hover img{transform:scale(1.05)}
.rituel-photo .r-chip{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(15,27,54,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--or-clair);
  border:1px solid var(--or-soft);border-radius:999px;padding:.6rem 1.2rem;
  font:500 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase}
.etapes{display:grid;gap:1.9rem}
.etape{display:flex;gap:1.3rem;align-items:flex-start;text-align:left}
.etape .n{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--or);color:#8A6D25;font:600 1.3rem var(--serif);background:#fff;
  box-shadow:0 0 0 8px rgba(201,162,75,.08)}
.etape h3{font:600 1.3rem var(--serif)}
.etape p{margin-top:.4rem;font:300 .95rem/1.7 var(--sans);color:var(--brume)}
@media (max-width:860px){
  .rituel-grid{grid-template-columns:1fr;gap:2.6rem}
  .rituel-photo img{min-height:300px}
}

/* ---- CTA en ligne ---- */
.cta-inline{text-align:center;margin-top:3.6rem}
.cta-inline .note{display:block;margin-top:1rem;font:300 .8rem var(--sans);letter-spacing:.06em;color:var(--brume)}

/* ---- FAQ ---- */
.faq{background:var(--creme);color:var(--encre)}
.faq-list{max-width:52rem;margin:3.6rem auto 0;display:grid;gap:1rem}
.faq details{background:#fff;border:1px solid rgba(29,36,51,.1);border-radius:14px;overflow:hidden;
  transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:0 24px 50px -30px rgba(29,36,51,.3);border-color:rgba(201,162,75,.5)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1.3rem 1.6rem;font:500 1.05rem var(--sans);color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#8A6D25}
.faq summary::after{content:"+";font:500 1.5rem var(--serif);color:var(--or);flex:none;
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .rep{padding:0 1.6rem 1.4rem;font:300 .95rem/1.75 var(--sans);color:var(--brume)}
.faq .rep strong{color:var(--encre);font-weight:500}

/* ---- Liste d'attente / achat ---- */
.liste{background:radial-gradient(ellipse 80% 100% at 50% 0%,#1D3160 0%,var(--nuit) 62%);position:relative}
.liste-card{position:relative;max-width:46rem;margin:0 auto;background:var(--nuit-2);border-radius:22px;
  padding:3.4rem clamp(1.6rem,5vw,3.4rem);text-align:center;border:1px solid rgba(201,162,75,.4);
  box-shadow:0 44px 90px -44px rgba(0,0,0,.85)}
.liste-card .h2{margin-bottom:1rem}
.liste-card .lead{color:rgba(253,253,251,.8);max-width:34rem;margin:0 auto 1.8rem}
.perks{list-style:none;display:grid;gap:.75rem;max-width:28rem;margin:0 auto 2.2rem;text-align:left}
.perks li{display:flex;gap:.7rem;align-items:flex-start;font:300 .95rem/1.55 var(--sans);
  color:rgba(253,253,251,.8)}
.perks li b{color:#fff;font-weight:500}
.perks svg{flex:none;margin-top:.2rem;color:var(--or-clair)}
.liste-form{display:flex;gap:.8rem;max-width:30rem;margin:0 auto}
.liste-form input[type="email"]{flex:1;min-width:0;background:var(--nuit);
  border:1px solid rgba(201,162,75,.4);border-radius:999px;padding:1.05rem 1.5rem;color:#fff;
  font:400 .95rem var(--sans);outline:none;transition:border-color .3s,box-shadow .3s}
.liste-form input[type="email"]:focus{border-color:var(--or-clair);box-shadow:0 0 0 3px rgba(201,162,75,.22)}
.liste-form input::placeholder{color:rgba(253,253,251,.45)}
.hp{position:absolute;left:-9999px;opacity:0}
.liste-note{margin-top:1.2rem;font:300 .78rem var(--sans);color:rgba(253,253,251,.55)}
.form-msg{margin-top:1rem;font:400 .9rem var(--sans);color:var(--or-clair);min-height:1.2em}
@media (max-width:560px){.liste-form{flex-direction:column}.liste-form .btn{width:100%}}

/* ---- Footer ---- */
footer{background:#0A1226;color:rgba(253,253,251,.7);padding:4.5rem 0 2rem;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--or),transparent)}
.f-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.f-inner>img{height:44px;width:auto}
.f-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem 2rem;margin:2.2rem 0 1.8rem;list-style:none}
.f-links a{color:rgba(253,253,251,.72);text-decoration:none;font:400 .78rem var(--sans);
  letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.f-links a:hover{color:var(--or-clair)}
.f-contact{font:300 .88rem var(--sans);color:rgba(253,253,251,.65);margin-bottom:2.4rem}
.f-contact a{color:var(--or-clair);text-decoration:none}
.f-contact a:hover{text-decoration:underline}
.f-legal{max-width:54rem;font:300 .72rem/1.7 var(--sans);color:rgba(253,253,251,.42);margin-bottom:2rem}
.f-bottom{width:100%;border-top:1px solid rgba(255,255,255,.09);padding-top:1.8rem;display:flex;
  flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:center;
  font:300 .74rem var(--sans);color:rgba(253,253,251,.45)}
.f-vymarai{letter-spacing:.04em}
.f-vymarai span,.f-vymarai a{color:rgba(253,253,251,.72);font-weight:500;letter-spacing:.1em;
  text-decoration:none;transition:color .3s}
.f-vymarai a:hover{color:var(--or-clair)}

/* ---- Retour haut / CTA flottant ---- */
.sticky-cta{position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%,160%);z-index:39;
  box-shadow:0 22px 46px -16px rgba(0,0,0,.6);transition:transform .45s var(--ease)}
.sticky-cta.show{transform:translate(-50%,0)}
.sticky-cta.show:hover{transform:translate(-50%,-3px)}
/* Sur telephone le bouton passait sur deux lignes faute de place :
   64 px de haut poses sur le contenu au lieu de 48. */
@media (max-width:560px){
  .sticky-cta{width:calc(100% - 5.8rem);justify-content:center;
    padding-inline:1.3rem;font-size:.86rem;letter-spacing:.04em;white-space:nowrap}
}
#toTop{position:fixed;right:1.4rem;bottom:1.4rem;z-index:40;width:50px;height:50px;border-radius:50%;
  background:var(--nuit-2);color:var(--or-clair);border:1px solid var(--or-soft);display:grid;
  place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s,visibility .4s,transform .4s var(--ease),background .3s,color .3s;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.6)}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:var(--or);color:var(--nuit)}

/* ============================================================
   PAGE /start
   ============================================================ */

.rituel-bloc{background:var(--creme);color:var(--encre)}
.rituel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.4rem}
.rituel-card{background:#fff;border:1px solid rgba(29,36,51,.09);border-radius:18px;padding:2rem 1.7rem;
  transition:transform .5s var(--ease),border-color .5s}
.rituel-card:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.5)}
.rituel-card h3{font:600 1.3rem var(--serif);margin-bottom:.5rem}
.rituel-card p{font:300 .94rem/1.75 var(--sans);color:var(--brume)}
.rituel-card p strong{color:var(--encre);font-weight:500}
@media (max-width:860px){.rituel-cards{grid-template-columns:1fr}}

.cure{background:var(--nuit)}
.cure-intro{color:rgba(253,253,251,.8);max-width:44rem;margin:1.8rem auto 0;text-align:center;
  font:300 1.02rem/1.8 var(--sans)}
.jalons{max-width:56rem;margin:4rem auto 0;position:relative;--ligne-x:calc(6.5rem + 12px)}
.jalons::before{content:"";position:absolute;left:var(--ligne-x);top:.6rem;bottom:.6rem;width:1px;
  background:linear-gradient(180deg,transparent,var(--or-soft) 12%,var(--or-soft) 88%,transparent)}
/* la ligne se remplit à mesure qu'on descend */
.jalons::after{content:"";position:absolute;left:var(--ligne-x);top:.6rem;width:2px;margin-left:-.5px;
  height:var(--progres,0%);border-radius:2px;pointer-events:none;
  background:linear-gradient(180deg,var(--or-clair),var(--or));
  box-shadow:0 0 14px rgba(201,162,75,.55);
  transition:height .18s linear}
.jalon{display:grid;grid-template-columns:6.5rem 26px 1fr;gap:0 1.4rem;align-items:start;
  padding-bottom:2.6rem}
.jalon:last-child{padding-bottom:0}
.jalon .jours{font:500 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--or-clair);text-align:right;padding-top:.15rem;font-variant-numeric:tabular-nums}
.jalon .pip{width:26px;height:26px;border-radius:50%;border:1px solid var(--or-soft);background:var(--nuit-2);
  display:grid;place-items:center;position:relative;z-index:2;
  transition:border-color .45s,box-shadow .45s,transform .45s var(--ease)}
.jalon .pip span{width:7px;height:7px;border-radius:50%;background:rgba(201,162,75,.35);
  transition:background .45s,transform .45s var(--ease)}
.jalon.atteint .pip{border-color:var(--or-clair);transform:scale(1.12);
  box-shadow:0 0 0 5px rgba(201,162,75,.14),0 0 18px rgba(201,162,75,.5)}
.jalon.atteint .pip span{background:var(--or-clair);transform:scale(1.2)}
.jalon h3,.jalon .jours{transition:color .45s}
.jalon:not(.atteint) .jours{color:rgba(232,206,140,.5)}
.jalon h3{font:600 1.4rem var(--serif);margin-bottom:.4rem}
.jalon p{font:300 .96rem/1.75 var(--sans);color:rgba(253,253,251,.72);max-width:40rem}
@media (max-width:640px){
  .jalons{--ligne-x:12px}
  /* Le titre et le texte sont enveloppes dans un <div> : c'est LUI
     l'element de grille, pas le h3 ni le p. Sans colonne explicite il
     tombait dans la colonne de 26 px et le texte s'affichait un mot
     par ligne. */
  .jalon{grid-template-columns:26px 1fr;gap:0 1.1rem}
  .jalon .pip{grid-row:1;grid-column:1}
  .jalon .jours{grid-row:1;grid-column:2;text-align:left;margin-bottom:.55rem}
  .jalon>div{grid-row:2;grid-column:2}
}

.rappel{background:var(--creme);color:var(--encre)}
.rappel-card{max-width:44rem;margin:0 auto;background:#fff;border:1px solid rgba(201,162,75,.45);
  border-radius:22px;padding:3rem clamp(1.6rem,5vw,3rem);text-align:center;
  box-shadow:0 34px 70px -40px rgba(29,36,51,.35)}
.rappel-card .h2{margin-bottom:1rem}
.rappel-card p{font:300 1rem/1.8 var(--sans);color:var(--brume);max-width:34rem;margin:0 auto 1.8rem}
.rappel-card p strong{color:var(--encre);font-weight:500}
.rappel-card .liste-form input[type="email"]{background:var(--creme);color:var(--encre);
  border-color:rgba(201,162,75,.55)}
.rappel-card .liste-form input::placeholder{color:var(--brume)}
.rappel-card .liste-note{color:var(--brume)}
.rappel-card .form-msg{color:#8A6D25}

.contact-bloc{background:var(--nuit-2);text-align:center}
.contact-bloc .lead{color:rgba(253,253,251,.8);max-width:40rem;margin:1.6rem auto 0}
.contact-bloc .mail{display:inline-block;margin-top:1.8rem;font:600 1.25rem var(--serif);
  color:var(--or-clair);text-decoration:none;border-bottom:1px solid var(--or-soft);padding-bottom:.2rem;
  transition:border-color .3s}
.contact-bloc .mail:hover{border-color:var(--or-clair)}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legale-hero{padding:10rem 0 3.5rem;
  background:radial-gradient(ellipse 90% 80% at 50% 0%,#1D3160 0%,var(--nuit) 65%)}
.legale-hero .container{text-align:center}
.legale-hero h1{font:600 clamp(2.1rem,4.6vw,3.2rem)/1.12 var(--serif);margin:.9rem 0 .8rem}
.legale-hero h1 em{font-style:italic;color:var(--or-clair)}
.legale-hero p{color:rgba(253,253,251,.7);font:300 .95rem var(--sans)}

.legale{background:var(--creme);color:var(--encre);padding:4.5rem 0 6rem}
.legale .container{max-width:52rem}
.legale-bloc{background:#fff;border:1px solid rgba(29,36,51,.1);border-radius:16px;
  padding:2rem 2.2rem;margin-bottom:1.2rem}
.legale h2{font:600 1.55rem var(--serif);color:var(--encre);margin-bottom:1rem;
  padding-bottom:.6rem;border-bottom:1px solid rgba(201,162,75,.35)}
.legale h3{font:500 .95rem var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:#8A6D25;margin:1.4rem 0 .5rem}
.legale p,.legale li{font:300 .96rem/1.8 var(--sans);color:var(--brume)}
.legale p+p{margin-top:.8rem}
.legale strong{color:var(--encre);font-weight:500}
.legale ul{margin:.6rem 0 0 1.1rem;display:grid;gap:.45rem}
.legale a{color:#8A6D25;text-decoration:underline;text-underline-offset:3px}
.legale a:hover{color:var(--or)}
.legale dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin-top:.4rem}
.legale dt{font:500 .84rem var(--sans);letter-spacing:.06em;color:var(--encre);white-space:nowrap}
.legale dd{font:300 .94rem var(--sans);color:var(--brume)}
@media (max-width:620px){.legale dl{grid-template-columns:1fr;gap:.15rem .5rem}
  .legale dd{margin-bottom:.7rem}}
.a-completer{display:inline-block;background:rgba(201,162,75,.16);border:1px dashed var(--or);
  border-radius:5px;padding:.05rem .5rem;font:500 .82rem var(--sans);color:#8A6D25}
.avis-legalego{background:linear-gradient(160deg,#FFFDF6,#FBF3DD);border:1px solid var(--or);
  border-radius:16px;padding:1.5rem 1.8rem;margin-bottom:2rem}
.avis-legalego p{color:var(--encre)}
.avis-legalego strong{color:#8A6D25}
.legale-maj{text-align:center;margin-top:2rem;font:300 .82rem var(--sans);color:var(--brume)}

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
  .mq-track{animation:none}
}

/* ---- Étiquette « Prix de lancement » ----
   Pas de prix barré : la loi n'autorise à barrer qu'un prix
   réellement pratiqué pendant les 30 jours précédents. */
.prix-etiquette{display:inline-block;background:rgba(201,162,75,.16);
  border:1px solid var(--or-soft);border-radius:999px;padding:.3rem .85rem;
  font:600 .66rem var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-clair);align-self:center}

/* ============================================================
   /start — le carnet offert avec le flacon
   ============================================================ */


.quotidien{background:var(--creme);color:var(--encre)}
.quotidien .lead{color:var(--brume);max-width:44rem;margin:1.8rem auto 0}
.quot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:4rem}
.quot-carte{position:relative;background:#fff;border:1px solid rgba(29,36,51,.09);
  border-radius:18px;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.quot-photo{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--nuit)}
.quot-photo img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.quot-carte:hover .quot-photo img{transform:scale(1.07)}
.quot-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(15,27,54,.55))}
.quot-corps{padding:1.6rem 1.8rem 1.9rem}
.quot-carte:hover{transform:translateY(-7px);border-color:rgba(201,162,75,.5);
  box-shadow:0 30px 58px -30px rgba(29,36,51,.35)}
.quot-num{position:absolute;left:1.4rem;bottom:1rem;z-index:2;font:600 2.4rem var(--serif);
  color:var(--or-clair);line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 14px rgba(15,27,54,.8);transition:transform .5s var(--ease)}
.quot-carte:hover .quot-num{transform:translateY(-3px)}
.quot-carte h3{font:600 1.4rem var(--serif);margin-bottom:.6rem}
.quot-carte p{font:300 .95rem/1.8 var(--sans);color:var(--brume)}
.quot-note{max-width:46rem;margin:3rem auto 0;text-align:center;
  font:300 .82rem/1.75 var(--sans);color:var(--brume)}
@media (max-width:820px){
  .quot-grid{display:block;max-width:30rem;margin-inline:auto}
  .quot-carte{margin-bottom:1.4rem}
  .quot-carte:last-child{margin-bottom:0}
  .quot-carte:hover{transform:none}
}
@media (max-width:820px) and (min-height:640px){
  .quot-carte{position:sticky;box-shadow:0 -16px 36px -22px rgba(29,36,51,.3)}
  .quot-carte:nth-child(1){top:5.4rem}
  .quot-carte:nth-child(2){top:5.9rem}
  .quot-carte:nth-child(3){top:6.4rem}
  .quot-carte:nth-child(4){top:6.9rem}
}

/* ============================================================
   Hero — entrée en scène
   ============================================================ */

/* Les mots du titre montent depuis un masque, l'un après l'autre. */
.hw{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.hw>span{display:inline-block;transform:translateY(118%);
  transition:transform 1.15s var(--ease) var(--d,0s)}
body.loaded .hw>span{transform:none}

.hfade{opacity:0;transform:translateY(20px);
  transition:opacity .95s ease var(--d,0s),transform .95s var(--ease) var(--d,0s)}
body.loaded .hfade{opacity:1;transform:none}

/* Pastille clignotante du badge « Bientôt » */
.pastille{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--nuit);margin-right:.5rem;vertical-align:middle;
  animation:pastille 2.4s ease-in-out infinite}
@keyframes pastille{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* La photo suit le curseur de quelques pixels. Le recadrage laisse
   141 px de jeu latéral : le déplacement ne découvre aucun bord. */
.hero-media{will-change:transform;transition:transform .7s cubic-bezier(.22,1,.36,1)}

/* Invitation à faire défiler */
.hero-cue{position:absolute;left:50%;bottom:1.6rem;z-index:3;transform:translateX(-50%);
  width:34px;height:52px;display:grid;place-items:center;text-decoration:none}
.hero-cue .cue-trait{position:relative;width:1px;height:46px;overflow:hidden;
  background:rgba(232,206,140,.22)}
.hero-cue .cue-trait::after{content:"";position:absolute;left:0;width:1px;height:16px;
  background:linear-gradient(180deg,transparent,var(--or-clair));
  animation:cue 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cue{0%{top:-18px}60%,100%{top:46px}}
.hero-cue:hover .cue-trait{background:rgba(232,206,140,.4)}
@media (max-width:720px){.hero-cue{display:none}}

@media (prefers-reduced-motion: reduce){
  .hw>span{transform:none}
  .hfade{opacity:1;transform:none}
  .pastille,.hero-cue .cue-trait::after{animation:none}
  .hero-media{transition:none}
}


/* ---- Rappel de la formule sur /start ----
   La même hélice que sur l'accueil, sans le panneau de détail :
   ici elle rappelle le concept et le contenu du flacon. */
.formule-rappel{background:var(--nuit);position:relative;overflow:hidden}
.formule-rappel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(201,162,75,.1),transparent 70%)}
.formule-rappel .container{position:relative;z-index:2}
.formule-rappel .lead{color:rgba(253,253,251,.75);max-width:42rem;margin:1.8rem auto 0}
.helice-seule{margin-top:3.5rem}
.formule-note{max-width:40rem;margin:3rem auto 0;text-align:center;
  font:300 .82rem/1.75 var(--sans);color:rgba(253,253,251,.5)}

/* ---- « Votre formule » : les huit actifs dans le hero de /start ----
   Premiere version : l'helice seule, une bande etroite posee au milieu
   de la photographie, coupee net en haut et en bas — elle ne disait
   rien. Deuxieme version : un panneau large avec les noms a cote de
   l'helice — il masquait le flacon, c'est-a-dire le produit.
   Ici : une colonne mince plaquee contre le bord droit, la ou la
   photographie n'a rien a montrer. L'helice passe DERRIERE les noms,
   en filigrane : elle donne la matiere, les noms donnent l'information.
   La section « Huit actifs » ayant ete retiree de /start, c'est le seul
   endroit de la page ou la composition apparait. */
/* Le verre s'eclaircit et le flou prend le relais : la photographie
     se devine a travers le panneau au lieu d'etre bouchee, et les noms
     restent lisibles parce que le flou efface le detail derriere eux.
     Le panneau se rapproche aussi du bord : il mord moins sur l'image. */
.hero-formule{position:absolute;top:50%;right:clamp(.6rem,1.7vw,1.4rem);
  transform:translateY(-50%);z-index:2;pointer-events:none;
  width:clamp(150px,13.5vw,176px);
  padding:1.25rem 1.05rem 1.3rem;border-radius:18px;
  background:linear-gradient(152deg,rgba(5,11,51,.62),rgba(5,11,51,.44));
  border:1px solid rgba(201,162,75,.24);
  box-shadow:0 30px 68px -38px rgba(0,0,0,.8),inset 0 1px 0 rgba(232,206,140,.09);
  -webkit-backdrop-filter:blur(13px) saturate(1.18);
          backdrop-filter:blur(13px) saturate(1.18);
  /* animation-fill-mode: backwards, et non forwards. L'etat de repos
     du bloc est VISIBLE ; l'animation ne fait que l'amener. Avec
     forwards depuis opacity:0, le jour ou l'animation ne demarre pas
     — onglet en arriere-plan, reglage d'accessibilite — le bloc
     serait reste invisible pour toujours. Meme lecon que l'entree
     du hero, qui n'utilise pas requestAnimationFrame pour la meme
     raison. */
  opacity:1;animation:hfParait 1.3s var(--ease) 1s backwards}
@keyframes hfParait{from{opacity:0;transform:translateY(calc(-50% + 16px))}
                    to{opacity:1;transform:translateY(-50%)}}
.hf-titre{font:500 .58rem var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--or-clair);opacity:.85;margin:0 0 .9rem;text-align:center}
.hf-corps{position:relative;height:clamp(228px,29vw,296px)}

/* L'helice en filigrane, derriere les noms. */
.hf-corps svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  opacity:.45;filter:drop-shadow(0 0 6px rgba(201,162,75,.35))}
/* Les brins s'effacent en haut et en bas : plus de coupure franche. */
.hero-formule .adn-brins{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.hero-formule .adn-brins path{fill:none;stroke:rgba(232,206,140,.7);stroke-width:1.5;
  stroke-linecap:round}
.hero-formule .adn-brins path.b2{stroke:rgba(214,222,234,.5)}
.hero-formule .adn-barreaux line{stroke:rgba(232,206,140,.3);stroke-width:1.1}
.hero-formule .adn-liens{display:none}
.hero-formule .adn-noeuds circle{fill:var(--or-clair);
  filter:drop-shadow(0 0 5px rgba(232,206,140,.9))}

/* Huit lignes de hauteur egale : le barreau i est trace a la hauteur
   (i + 0,5) / 8, donc le dessin respire au meme rythme que la liste. */
.hf-liste{position:relative;height:100%;list-style:none;margin:0;padding:0;
  display:grid;grid-template-rows:repeat(8,1fr)}
.hf-liste li{display:flex;align-items:center;gap:.5rem;
  font:400 .715rem var(--sans);letter-spacing:.05em;color:#fff;
  text-shadow:0 1px 3px rgba(5,11,51,1),0 2px 12px rgba(5,11,51,.9)}
.hf-liste li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--or-clair);box-shadow:0 0 7px rgba(232,206,140,.85)}
.hf-liste li b{font-weight:500;color:var(--or-clair)}

/* Des que le hero passe en colonne, le panneau ne peut plus etre pose
   en absolu : il se range sous le texte, sur deux colonnes. La page
   /start est deja longue — une colonne de huit lignes lui ajoutait
   300 px pour rien. */
@media (max-width:880px){
  /* Largeur calee sur le contenu, pas sur l'ecran : avec des colonnes
     en 1fr, « Zinc » et « Iode » trainaient derriere elles un vide
     aussi long que le mot, et le panneau avait l'air etire. En
     max-content, les huit noms forment un groupe serre et centre. */
  .hero-formule{position:static;transform:none;animation:none;opacity:1;
    width:max-content;max-width:min(94%,26rem);
    margin:0 auto 3rem;padding:1.2rem 1.35rem 1.3rem}
  .hf-corps{height:178px}
  .hf-corps svg{opacity:.3}
  .hf-liste{grid-template-rows:repeat(4,1fr);
    grid-template-columns:max-content max-content;
    justify-content:center;column-gap:1.5rem}
  .hf-liste li{font-size:.78rem}
}
@media (max-width:640px){
  .hf-corps{height:168px}
  .hf-liste{column-gap:1.2rem}
  .hf-liste li{font-size:.74rem}
}