/* ==========================================================================
   LES TROIS ACCUEILS À L'ESSAI (28/09/2026) : page-accueil-labo|progres|actifs.php
   Chargée sur ces trois pages seulement (inc/accueils.php). Mobile d'abord :
   Rayan juge sur un Android, en 4G.

   1. L'ACIER : le noir devient un gris acier doux, légèrement métallique.
      Contrastes MESURÉS le 28/09 (WCAG) :
        graphite #3B434A sur ivoire #F6F0EB ...... 8,9:1  (texte)
        acier doux #5A646C sur ivoire ............ 5,4:1  (texte secondaire)
        blanc sur surface acier #6A7580 à #4E5861  4,7 à 7,3:1
        graphite sur le bleu de marque ........... 3,4:1  -> JAMAIS de texte courant sur le bleu plein
   2. LE HAUT DE PAGE COMMUN (.ah) : le texte, puis la scène où les vrais flacons
      dominent. Le relief (assets/accueils.js) se pose PAR-DESSUS les images : sans
      lui, les photos restent.
   3 à 5. Chaque version.
   ========================================================================== */

/* ---------- 1. L'acier ---------------------------------------------------- */
body.accueil-acier{
  --encre:#3B434A;
  --encre-nuit:#56616B;
  --encre-douce:#5A646C;
  --filet:rgba(59,67,74,.16);
  --filet-fort:rgba(59,67,74,.32);
  --filet-encre:rgba(59,67,74,.28);
  /* L'acier des grandes surfaces : son point le plus clair (#5F6A74) garde le blanc à 5,6:1 et
     le blanc à 86 % au-dessus de 4,5:1 (mesuré le 28/09 ; un départ à #67727D faisait tomber le
     doré et le texte à 84 % sous le seuil). */
  --acier-clair:#5F6A74;
  --acier-metal:
    linear-gradient(115deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,.04) 52%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#5F6A74 0%,#535E68 55%,#4A535C 100%);
  --acier-bouton:linear-gradient(180deg,#6A7580 0%,#56616B 60%,#4E5861 100%);
  --ciel:#E6F4FA;
  color:var(--encre);
}
/* Les surfaces sombres du site : bande de service, pied de page, boutons pleins. */
.accueil-acier .annonce,
.accueil-acier .serv__case,
.accueil-acier .pied,
.accueil-acier .encre{background:var(--acier-metal);background-color:var(--acier-clair)}
/* Sur l'acier, les textes sont blancs pleins (le doré et le blanc à 84 % du thème n'y tiennent pas 4,5:1). */
.accueil-acier .encre,.accueil-acier .encre p,.accueil-acier .encre .lead{color:#fff}
.accueil-acier .encre .sur-titre,.accueil-acier .diag-acier .sur-titre{color:#fff}
.accueil-acier .encre .etapes b{color:#F1DDA8}
.accueil-acier .pied a{color:#fff}
.accueil-acier .serv__case{background:linear-gradient(180deg,#5F6A74 0%,#535E68 100%);background-color:var(--acier-clair)}
.accueil-acier .btn--plein{background:var(--acier-bouton);background-color:#5A656F;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(40,48,55,.18)}
.accueil-acier .btn--plein:hover{background:linear-gradient(180deg,#76818C 0%,#606B75 60%,#56616B 100%)}
.accueil-acier .btn--fil:hover{background:var(--encre-nuit);border-color:var(--encre-nuit);color:#fff}
.accueil-acier .btn--clair:hover{background:var(--encre-nuit);color:#fff}
.accueil-acier ::selection{background:#BFE5F2;color:var(--encre)}
/* L'appel du bas de page : le bleu reste, mais en ciel, pour que le texte tienne 4,5:1. */
.accueil-acier .appel{background:linear-gradient(135deg,#E3F3F9 0%,#C4E7F3 100%)}
.accueil-acier .appel .btn--fil:hover{background:var(--encre-nuit);color:#fff}

/* Les angles arrondis (retour de Rayan, 28/09 : « arrondir les angles, des boutons ») : les
   boutons en pilule, comme la bulle ; les cartes et les photos adoucies d'autant. */
.accueil-acier .btn{border-radius:999px}
.accueil-acier .carte__vue{border-radius:18px}
.accueil-acier .carte__pct{border-radius:0 0 12px 0}
.accueil-acier .formule__lien{border-radius:18px}
.accueil-acier .formule__actifs span,.accueil-acier .formule__barre{border-radius:999px}
.accueil-acier .labo__media{border-radius:22px}

/* La bulle WhatsApp : le vert officiel, pictogramme blanc. */
.accueil-acier .bulle-wa{background:#25D366;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 10px 26px rgba(18,120,64,.32)}
.accueil-acier .bulle-wa:hover{background:#1EBE5B}

/* ---------- 2. Le haut de page commun ------------------------------------- */
.ah{position:relative;isolation:isolate;overflow:hidden}
.ah__in{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"s" "t" "scene" "lead" "actions";
  padding-block:var(--e4) var(--e6);row-gap:0}
.ah__texte{display:contents}
.ah .sur-titre{grid-area:s;color:var(--encre)}
.ah__titre{grid-area:t;margin:var(--e2) 0 0;font-size:clamp(1.95rem,1.25rem + 2.9vw,3.5rem);
  line-height:1.05;letter-spacing:-.022em;font-weight:var(--g-titre);color:var(--encre)}
.ah__scene{grid-area:scene;position:relative;margin:var(--e4) 0 0}
.ah__lead{grid-area:lead;margin-top:var(--e4);font-size:var(--t-corps);line-height:1.55;
  color:var(--encre-douce);max-width:44ch}
.ah__actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--e2);margin-top:var(--e4)}
.ah__actions .btn{flex:1 1 12rem}
.ah__gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .7s var(--courbe)}
.ah__scene.gl-pret .ah__gl{opacity:1}
.ah__legende{position:absolute;z-index:4;left:0;bottom:0;margin:0;font-size:var(--t-mini);
  line-height:1.35;color:var(--encre-douce);max-width:22ch}
.ah__legende b{display:block;font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:var(--g-label);color:var(--encre);margin-bottom:.2rem}

.flacon-lien{display:block;position:absolute;bottom:0;text-decoration:none}
.flacon-hd{display:block;height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none}
/* Le relief dessine le flacon : la photo s'efface sous lui une fois qu'il la couvre
   entièrement (jamais deux demi-opacités, qui creuseraient le flacon). Elle reste le contenu. */
.ah__scene.gl-couvre .flacon-hd{opacity:0}
/* L'ombre portée au sol, sous chaque flacon. */
.ah__scene .flacon-lien::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;bottom:-2.2%;
  height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,48,55,.30),rgba(40,48,55,0))}

@media (min-width:980px){
  .ah{min-height:min(calc(100svh - var(--entete-h) - 58px),52rem);display:grid;align-items:center}
  /* Le texte se centre sur la hauteur de la scène : deux rangées souples l'encadrent. */
  .ah__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--e6);
    grid-template-areas:". scene" "s scene" "t scene" "lead scene" "actions scene" ". scene";
    grid-template-rows:1fr auto auto auto auto 1fr;padding-block:var(--e5)}
  .ah__scene{margin:0;align-self:center}
  .ah__actions .btn{flex:0 0 auto}
}

/* ---------- 3. Version 1 · Le laboratoire --------------------------------- */
.accueil--labo .ah{background:
  radial-gradient(55% 65% at 70% 48%,#FFFFFF 0%,rgba(255,255,255,0) 72%),
  linear-gradient(180deg,#EEF1F3 0%,#E2E7EA 100%)}
/* Le papier millimétré du laboratoire, à peine visible, qui s'efface vers les bords. */
.accueil--labo .ah::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(59,67,74,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,67,74,.055) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(60% 70% at 70% 50%,#000 0%,transparent 75%);
          mask-image:radial-gradient(60% 70% at 70% 50%,#000 0%,transparent 75%)}

/* --H : la hauteur du flacon avant. Toutes les positions de la scène en découlent,
   sans script : la lecture reste alignée sur l'étiquette même sans relief. */
.scan{--H:clamp(21rem,50svh,27rem);--gx:3%;height:calc(var(--H) + 4.4rem)}
.scan__groupe{position:absolute;left:var(--gx);top:0;height:var(--H);width:calc(var(--H) * .64)}
.scan__flacon--avant{left:0;height:var(--H)}
.scan__flacon--milieu,.scan__flacon--fond{display:none}
.scan__lecture{list-style:none;margin:0;padding:0;position:absolute;top:0;height:var(--H);
  left:calc(var(--gx) + var(--H) * .326 + 1.1rem);right:0;z-index:4}
.scan__lecture li{position:absolute;left:0;right:0;top:calc(var(--y) * 100%);transform:translateY(-50%);
  font-size:.9375rem;line-height:1.25;color:var(--encre);font-weight:var(--g-fort)}
.scan__lecture li span{display:inline-block;padding:.12rem 0}
/* Le trait de rappel : part de l'étiquette, rejoint le mot. */
.scan__lecture li::before{content:"";position:absolute;top:50%;right:100%;
  width:calc(1.1rem + var(--H) * .09);height:1px;margin-right:.45rem;
  background:linear-gradient(90deg,rgba(30,162,204,.9),rgba(59,67,74,.35))}
.scan__lecture li::after{content:"";position:absolute;top:50%;
  right:calc(100% + 1.1rem + var(--H) * .09 + .45rem - 3px);width:5px;height:5px;margin-top:-2px;
  border-radius:50%;background:#1EA2CC;box-shadow:0 0 0 3px rgba(30,162,204,.18)}
.scan__lecture .scan__taux{font-size:1.0625rem;color:var(--encre)}
.scan__lecture .scan__taux span{border-bottom:2px solid #1EA2CC}
.js .scan__lecture li{opacity:0;transition:opacity .5s var(--courbe),transform .5s var(--courbe);
  transform:translate(-8px,-50%)}
.js .scan__lecture li.est-lu{opacity:1;transform:translate(0,-50%)}
.scan__lecture li::after{transition:box-shadow .35s var(--courbe)}
.scan__lecture li.passe::after{box-shadow:0 0 0 7px rgba(30,162,204,.22)}
/* La ligne de lecture : posée par le script (--scan de 0 à 1 sur la hauteur du flacon). */
.scan__ligne{position:absolute;z-index:5;left:calc(var(--gx) - .5rem);right:0;height:1px;
  top:calc(var(--scan,0) * var(--H));opacity:var(--scan-o,0);pointer-events:none;
  background:linear-gradient(90deg,rgba(30,162,204,0) 0%,rgba(30,162,204,.95) 8%,rgba(30,162,204,.85) 55%,rgba(30,162,204,0) 100%);
  box-shadow:0 0 12px 1px rgba(30,162,204,.45)}
.scan .ah__legende{left:var(--gx);bottom:0;max-width:none}

@media (min-width:980px){
  /* Trois sérums en profondeur, du plus lointain (CLOUD CREAM) au plus proche (NECTAR) :
     assez écartés pour que chaque étiquette se lise. */
  .scan{--H:min(calc(100svh - var(--entete-h) - 58px - 8.5rem),38rem);--gx:3%}
  .scan__flacon--fond,.scan__flacon--milieu{display:block}
  .scan__flacon--fond{left:0;height:calc(var(--H) * .64);bottom:calc(var(--H) * .05)}
  .scan__flacon--milieu{left:calc(var(--H) * .17);height:calc(var(--H) * .8);bottom:calc(var(--H) * .025)}
  .scan__flacon--avant{left:calc(var(--H) * .39)}
  .scan__groupe{width:calc(var(--H) * .72)}
  .scan__lecture{left:calc(var(--gx) + var(--H) * .716 + 1.6rem)}
  .scan__lecture li{font-size:1.0625rem}
  .scan__lecture .scan__taux{font-size:1.1875rem}
}

/* Les neuf formules : un rail au doigt au téléphone, une grille au bureau. */
.formules{background:linear-gradient(180deg,#E2E7EA 0%,#F3F5F6 22%,var(--ivoire) 100%)}
.formules__tete{display:grid;gap:var(--e3);max-width:46rem}
.formules__tete .h2{margin:0}
.formules__rail{list-style:none;margin:var(--e5) 0 0;padding:0 var(--gouttiere) var(--e3);
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,20rem);gap:var(--e3);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gouttiere);
  scrollbar-width:none;overscroll-behavior-x:contain}
.formules__rail::-webkit-scrollbar{display:none}
.formule{scroll-snap-align:start}
.formule__lien{display:flex;flex-direction:column;height:100%;padding:var(--e4);text-decoration:none;color:var(--encre);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F8F9 100%);border:1px solid rgba(59,67,74,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 30px -22px rgba(40,48,55,.35);
  transition:transform var(--duree-court) var(--courbe),box-shadow var(--duree-court) var(--courbe)}
.formule__lien:hover{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 22px 40px -24px rgba(40,48,55,.45)}
.formule__media{display:flex;align-items:flex-end;justify-content:center;height:11.5rem;margin-bottom:var(--e4);
  background:radial-gradient(60% 55% at 50% 65%,#EEF3F5 0%,rgba(238,243,245,0) 100%)}
.formule__media img{height:100%;width:auto;object-fit:contain}
.formule__nom{font-size:var(--t-h4);font-weight:var(--g-titre);letter-spacing:.02em}
.formule__type{margin-top:.2rem;font-size:var(--t-petit);color:var(--encre-douce);line-height:1.4}
.formule__jauge{display:block;margin-top:var(--e4)}
.formule__barre{display:block;height:4px;background:rgba(59,67,74,.12);overflow:hidden}
.formule__barre i{display:block;height:100%;width:calc(var(--pct) * 1%);
  background:linear-gradient(90deg,#8FCFE6,#1EA2CC 60%,#5E6973);transform-origin:left}
.js .formule__barre i{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .25s}
.js .formule.est-vu .formule__barre i{transform:scaleX(1)}
.formule__pct{display:block;margin-top:.55rem;font-size:1.0625rem;font-weight:var(--g-fort);font-variant-numeric:tabular-nums}
.formule__pct small{font-size:var(--t-mini);font-weight:var(--g-corps);color:var(--encre-douce)}
.formule__actifs{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:var(--e3)}
.formule__actifs span{font-size:var(--t-mini);line-height:1.2;padding:.32rem .55rem;border:1px solid rgba(59,67,74,.16);
  color:var(--encre);background:rgba(255,255,255,.7)}
.formule__pied{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  margin-top:auto;padding-top:var(--e4)}
.formule__prix{font-weight:var(--g-fort);font-variant-numeric:tabular-nums}
.formule__voir{display:inline-flex;align-items:center;gap:.4em;font-size:var(--t-petit);color:var(--encre-douce)}
.formule__voir svg{width:1em;height:1em}
@media (min-width:980px){
  .formules__rail{width:min(var(--page),100% - var(--gouttiere)*2);margin-inline:auto;padding:0;
    grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:var(--e4)}
}

/* Le laboratoire. */
.labo{background:var(--ivoire)}
.labo__grille{display:grid;gap:var(--e5)}
.labo__media{position:relative;overflow:hidden;aspect-ratio:1100/1450;max-height:34rem}
.labo__media img{width:100%;height:100%;object-fit:cover}
.labo__media .voile{background:#E2E7EA}
.labo__texte .h2{margin:var(--e3) 0 0}
.labo__p{margin-top:var(--e4);max-width:52ch;line-height:1.6;color:var(--encre-douce)}
.labo__faits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3);margin:var(--e5) 0}
.labo__faits div{border-top:1px solid var(--filet-fort);padding-top:var(--e3)}
.labo__faits dt{font-size:clamp(1.35rem,1.1rem + 1.2vw,2.2rem);font-weight:var(--g-titre);line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--encre)}
.labo__faits dd{margin:.35rem 0 0;font-size:var(--t-mini);line-height:1.4;color:var(--encre-douce)}
@media (min-width:980px){
  .labo__grille{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:var(--e6)}
  .labo__media{max-height:none}
}

/* ---------- 4. Version 2 · La peau qui progresse -------------------------- */
.accueil--progres .ah{background:
  radial-gradient(50% 60% at 72% 58%,rgba(30,162,204,.30) 0%,rgba(30,162,204,0) 70%),
  linear-gradient(165deg,#F1F9FC 0%,#DCF0F8 48%,#BCE3F1 100%)}
/* La lumière qui balaie le rang : un halo bleu qui suit le geste allumé. */
.trio{--H:clamp(19rem,44svh,25rem);height:calc(var(--H) + 3rem)}
.trio__rang{list-style:none;margin:0;padding:0;position:absolute;inset:0;
  display:grid;grid-template-columns:1.08fr .9fr .9fr;align-items:end;gap:.35rem}
.trio__geste{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.trio__flacon{position:relative;bottom:auto}
.trio__geste:nth-child(1) .trio__flacon{height:var(--H)}
.trio__geste:nth-child(2) .trio__flacon{height:calc(var(--H) * .74)}
.trio__geste:nth-child(3) .trio__flacon{height:calc(var(--H) * .8)}
.trio__mot{display:flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.9375rem;
  font-weight:var(--g-fort);color:var(--encre-douce);white-space:nowrap;transition:color .5s var(--courbe)}
.trio__mot b{display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;
  font-size:.8125rem;border:1px solid var(--filet-fort);color:var(--encre);
  transition:background .5s var(--courbe),color .5s var(--courbe),border-color .5s var(--courbe)}
.trio__geste.est-eclaire .trio__mot{color:var(--encre)}
.trio__geste.est-eclaire .trio__mot b{background:#1EA2CC;border-color:#1EA2CC;color:#fff}
@media (min-width:980px){
  .trio{--H:min(calc(100svh - var(--entete-h) - 58px - 10rem),36rem)}
  .trio__rang{gap:var(--e4);padding-inline:var(--e4)}
  .trio__mot{font-size:1.0625rem}
}

/* La routine, geste par geste. */
.routine{padding-block:var(--section);background:linear-gradient(180deg,#BCE3F1 0%,#E9F5FA 9rem,var(--ivoire) 26rem)}
.routine__tete{display:grid;gap:var(--e3);margin-bottom:var(--e5)}
.routine__tete .h2{margin:0;max-width:18ch}
.routine__scene{display:none}
.routine__etapes{list-style:none;margin:0;padding:0;display:grid;gap:var(--e6)}
.etape{position:relative;padding-top:var(--e4);border-top:1px solid var(--filet-fort)}
.etape__n{position:absolute;top:var(--e3);right:0;margin:0;font-size:clamp(3.5rem,2rem + 6vw,6rem);line-height:1;
  font-weight:var(--g-titre);color:transparent;-webkit-text-stroke:1px rgba(59,67,74,.35)}
.etape__moment{margin:0;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--g-label);color:#0A6E92}
.etape__geste{margin:.35rem 0 0;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.015em}
.etape__media{display:flex;justify-content:center;align-items:flex-end;height:17rem;margin:var(--e4) 0;
  background:radial-gradient(55% 50% at 50% 70%,#DCEFF7 0%,rgba(220,239,247,0) 100%)}
.etape__media img{height:100%;width:auto}
.etape__soin{margin:0;font-size:var(--t-h4);font-weight:var(--g-titre)}
.etape__soin a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--filet-fort)}
.etape__soin span{display:block;margin-top:.15rem;font-size:var(--t-petit);font-weight:var(--g-corps);color:var(--encre-douce)}
.etape__texte{margin-top:var(--e3);line-height:1.6;max-width:48ch}
.etape__aussi{margin-top:var(--e3);padding-left:var(--e3);border-left:2px solid #8FCFE6;font-size:var(--t-petit);
  line-height:1.55;color:var(--encre-douce);max-width:48ch}
.etape__aussi a{color:var(--encre);white-space:nowrap}
.etape__achat{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e4);font-weight:var(--g-fort);font-variant-numeric:tabular-nums}
/* Au téléphone, chaque flacon monte à son arrivée : animation native, pilotée par le défilement. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .etape__media img{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes monte{from{opacity:0;transform:translateY(22%) scale(.92)}to{opacity:1;transform:none}}
@media (min-width:980px){
  .routine__corps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--e6);align-items:start}
  .js .routine__scene{display:block;position:sticky;top:calc(var(--entete-h) + 6svh);height:min(76svh,40rem)}
  .routine__rail{position:absolute;left:0;top:8%;bottom:8%;width:2px;background:rgba(59,67,74,.14)}
  .routine__rail i{display:block;width:100%;height:calc(var(--avance,0) * 100%);background:linear-gradient(#8FCFE6,#1EA2CC);
    transition:height .6s var(--courbe)}
  .routine__soin{position:absolute;inset:0 0 0 12%;display:flex;align-items:flex-end;justify-content:center;
    opacity:0;transform:translateY(4%) scale(.96);transition:opacity .7s var(--courbe),transform .9s var(--courbe)}
  .routine__soin.est-actif{opacity:1;transform:none}
  .routine__soin .flacon-lien{position:relative;height:88%}
  .routine__soin::after{content:"";position:absolute;left:30%;right:18%;bottom:-1%;height:5%;border-radius:50%;
    background:radial-gradient(closest-side,rgba(40,48,55,.28),rgba(40,48,55,0))}
  .js .routine__etapes{gap:0}
  .js .etape{min-height:78svh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding-block:var(--e5)}
  .js .etape__media{display:none}
  .js .etape{opacity:.32;transition:opacity .6s var(--courbe)}
  .js .etape.est-actif{opacity:1}
  .etape__n{position:static;order:-1;margin-bottom:var(--e2)}
}

/* Le diagnostic, sur l'acier. */
.diag-acier{background:var(--acier-metal);background-color:var(--acier-clair);color:#fff}
.diag-acier .h2{margin:var(--e3) 0 0;color:#fff;max-width:20ch}
.diag-acier__p{margin-top:var(--e4);max-width:50ch;line-height:1.6;color:rgba(255,255,255,.9)}
.diag-acier__in{display:grid;gap:var(--e5)}
.diag-acier__choix{display:flex;flex-wrap:wrap;gap:var(--e2);align-self:end}
.diag-acier .btn--clair{color:var(--encre)}
@media (min-width:980px){.diag-acier__in{grid-template-columns:1.2fr .8fr;align-items:end}}

/* ---------- 5. Version 3 · L'actif à l'honneur ---------------------------- */
.accueil--actifs .ah,.accueil--fusion .ah{background:
  radial-gradient(48% 58% at 70% 52%,#FBE3E8 0%,rgba(251,227,232,0) 72%),
  linear-gradient(180deg,#F8F2EE 0%,var(--ivoire) 100%)}
/* Trois soins en triangle : PULPE devant, NECTAR et GLASS SKIN derrière, à peine
   plus petits et plus hauts. Positions en fractions de --H (hauteur de PULPE). */
.nuee{--H:clamp(20rem,52svh,28rem);height:calc(var(--H) + 3.2rem)}
.nuee__flacon{bottom:3.2rem}
.nuee__flacon--devant{left:calc(50% - var(--H) * .1385);height:var(--H)}
.nuee__flacon--gauche{left:calc(50% - var(--H) * .3655);height:calc(var(--H) * .88);bottom:calc(3.2rem + var(--H) * .035)}
.nuee__flacon--droite{left:calc(50% + var(--H) * .0785);height:calc(var(--H) * .88);bottom:calc(3.2rem + var(--H) * .035)}
/* La nuée déborde de la scène jusqu'aux bords de l'écran (sans passer sur le texte) :
   elle n'est jamais coupée net. Un <canvas> est un élément remplacé : étiré par
   left/right sans largeur, il prendrait la taille de son image interne. D'où des
   dimensions explicites. */
.nuee .ah__gl{left:calc(var(--gouttiere) * -1);top:-3rem;
  width:calc(100% + var(--gouttiere) * 2);height:calc(100% + 3rem)}
.nuee__actifs{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;justify-content:center;flex-wrap:wrap;
  gap:.35rem .9rem;margin:0;font-size:var(--t-mini);line-height:1.3;color:var(--encre)}
.nuee__actif{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.nuee__actif::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--c)}
.nuee__actif--gauche{order:1}.nuee__actif--devant{order:2;font-weight:var(--g-fort)}.nuee__actif--droite{order:3}
@media (min-width:980px){
  .nuee{--H:min(calc(100svh - var(--entete-h) - 58px - 8rem),40rem)}
  .nuee .ah__gl{left:-1.5rem;top:-4rem;width:calc(100% + 1.5rem + var(--gouttiere));height:calc(100% + 4rem)}
  .nuee__actifs{font-size:var(--t-petit)}
}

/* Un actif par écran. */
.actif{--t:#F7E6E9;--t-fort:#D9A3AE;position:relative;overflow:hidden;padding-block:var(--section);background:var(--t)}
.actif--corail{--t:#F8E9E0;--t-fort:#E3B49A}
.actif--lavande{--t:#ECEBF7;--t-fort:#B7B2E0}
.actif--or{--t:#F5EEDC;--t-fort:#D9C28A}
.actif--sauge{--t:#E6EEE4;--t-fort:#A9C0A2}
/* Le nom de l'actif en très grand, derrière le flacon, jamais derrière le texte. Au
   téléphone il tient sur deux lignes et ne glisse pas (plus large que l'écran, tout
   glissement le couperait) ; au bureau il glisse avec le défilement. */
.actif__geant{position:absolute;left:var(--gouttiere);right:var(--gouttiere);top:var(--e4);margin:0;pointer-events:none;
  font-size:clamp(3.1rem,1.6rem + 7vw,14rem);line-height:.92;font-weight:var(--g-titre);letter-spacing:-.04em;
  color:var(--t-fort);opacity:.55}
.actif__grille{position:relative;display:grid;gap:var(--e5)}
.actif__media{position:relative;height:clamp(19rem,46svh,27rem);margin-top:clamp(3rem,10vw,7rem)}
.actif__flacon{left:50%;transform:translateX(-50%);height:100%}
/* Les pots (plus larges que hauts) : à hauteur égale ils déborderaient de l'écran. */
.actif__flacon.flacon-lien--pot{height:62%}
.routine__soin .flacon-lien--pot{height:54%}
.actif__media::after{content:"";position:absolute;left:25%;right:25%;bottom:-2%;height:6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(40,48,55,.26),rgba(40,48,55,0))}
.actif__texte .sur-titre{color:var(--encre-douce)}
.actif__nom{margin:var(--e2) 0 0;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.015em}
.actif__detail{margin-top:.5rem;font-size:var(--t-lead);color:var(--encre)}
.actif__p{margin-top:var(--e3);line-height:1.6;color:var(--encre-douce);max-width:46ch}
.actif__soin{margin-top:var(--e4)}
.actif__soin a{text-decoration:none;color:var(--encre)}
.actif__soin b{font-size:var(--t-h4);font-weight:var(--g-titre);border-bottom:1px solid var(--filet-fort)}
.actif__soin span{display:block;margin-top:.2rem;font-size:var(--t-petit);color:var(--encre-douce)}
.actif__achat{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e4);font-weight:var(--g-fort);font-variant-numeric:tabular-nums}
/* Le défilement pilote la scène, sans script : le nom glisse, le flacon monte. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .actif__geant{animation:apparait linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .actif__flacon img{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    /* Le texte est entièrement lisible dès qu'il est entièrement à l'écran. */
    .actif__texte>*{animation:apparait linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes glisse{from{transform:translateX(6%)}to{transform:translateX(-6%)}}
@keyframes apparait{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (min-width:980px){
  .actif{min-height:92svh;display:grid;align-items:center}
  .actif__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--e6)}
  .actif--inverse .actif__media{order:2}
  .actif__media{height:min(70svh,36rem);margin-top:0}
  .actif__geant{right:auto;white-space:nowrap;top:var(--e5)}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .actif__geant{animation:glisse linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    }
  }
}

/* ---------- 6. Version 4 · La fusion -------------------------------------- */
/* La lecture de la formule (animation de la 1), en section : NECTAR seul, la lecture à droite.
   Même fond que le haut de page, et aucun quadrillage (« le fond n'est pas respecté », 28/09). */
.lue{position:relative;background:linear-gradient(180deg,var(--ivoire) 0%,#F8F2EE 100%)}
.lue__grille{position:relative;display:grid;gap:var(--e5)}
/* .ah__scene se place dans la zone « scene » du haut de page : ici, la grille n'a pas de zone
   nommée (sans ce rappel, la scène partait dans une colonne implicite, invisible). */
.lue .ah__scene{grid-area:auto;margin:0}
.lue__texte .h2{margin:var(--e3) 0 0}
.lue__p{margin-top:var(--e4);max-width:52ch;line-height:1.6;color:var(--encre-douce)}
.scan--seul .scan__groupe{width:calc(var(--H) * .33)}
@media (min-width:980px){
  .lue__grille{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:var(--e6)}
  .lue .scan{--H:min(70svh,34rem)}
  .scan--seul .scan__flacon--avant{left:0}
  .scan--seul .scan__lecture{left:calc(var(--gx) + var(--H) * .326 + 1.6rem)}
}

/* Soin après soin : cinq fiches en image, en carrousel qui glisse de droite à gauche. Les
   cartes s'appellent .fiche-soin : .fiche est déjà la mise en page des pages produit (styles.css). */
.fiches{background:#F8F2EE;overflow:hidden}
.fiches__tete{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4)}
.fiches__tete .h2{margin:var(--e3) 0 0;max-width:22ch}
.fiches__nav{display:none;gap:.6rem;flex:none}
.fiches__fleche{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;cursor:pointer;
  border:1px solid var(--filet-fort);background:transparent;color:var(--encre);
  transition:background var(--duree-court) var(--courbe),color var(--duree-court) var(--courbe),opacity var(--duree-court)}
.fiches__fleche:hover{background:var(--encre-nuit);border-color:var(--encre-nuit);color:#fff}
.fiches__fleche:disabled{opacity:.3;cursor:default;background:transparent;color:var(--encre);border-color:var(--filet-fort)}
.fiches__fleche svg{width:1.25rem;height:1.25rem}
.fiches__rail{list-style:none;margin:var(--e5) 0 0;padding:0 var(--gouttiere) var(--e2);
  display:grid;grid-auto-flow:column;grid-auto-columns:min(76vw,21rem);gap:var(--e4);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gouttiere);
  scrollbar-width:none;overscroll-behavior-x:contain}
.fiches__rail::-webkit-scrollbar{display:none}
/* L'arrivée : le carrousel entre par la droite quand on l'atteint. */
.js .fiches__rail{opacity:0;translate:22% 0;transition:opacity .8s var(--courbe),translate 1.2s var(--courbe)}
.js .fiches.est-vu .fiches__rail{opacity:1;translate:0 0}
.fiche-soin{scroll-snap-align:start}
.fiche-soin__lien{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--encre)}
.fiche-soin__photo{position:relative;display:block;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#E9E4DE;
  box-shadow:0 18px 40px -28px rgba(40,48,55,.45)}
.fiche-soin__photo img{display:block;width:100%;height:100%;object-fit:cover}
.fiche-soin__n{position:absolute;left:.9rem;top:.9rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--encre);font-weight:var(--g-fort);font-size:1rem}
.fiche-soin__geste{margin-top:var(--e4);font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--g-label);color:#0A6E92}
.fiche-soin__actif{margin-top:.35rem;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.01em;font-weight:var(--g-titre)}
.fiche-soin__benefice{margin:.5rem 0 var(--e3);line-height:1.45;color:var(--encre-douce)}
.fiche-soin__pied{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);margin-top:auto;
  padding-top:var(--e3);border-top:1px solid var(--filet);font-size:var(--t-petit)}
.fiche-soin__soin{font-weight:var(--g-fort);letter-spacing:.02em}
.fiche-soin__prix{font-weight:var(--g-fort);font-variant-numeric:tabular-nums}
.fiche-soin__lien:hover .fiche-soin__soin{text-decoration:underline;text-underline-offset:.25em}
/* La jauge d'avancée : la part visible du carrousel, et où l'on en est. */
.fiches__avance{height:2px;margin-top:var(--e4);border-radius:2px;background:rgba(59,67,74,.12);overflow:hidden}
.fiches__avance i{display:block;height:100%;border-radius:2px;margin-left:calc(var(--debut,0) * 100%);
  width:calc(var(--vu,.3) * 100%);background:linear-gradient(90deg,#8FCFE6,#1EA2CC);transition:margin-left .25s linear}
@media (min-width:980px){
  .fiches__nav{display:flex}
  .fiches__rail{--bord:max(var(--gouttiere),(100vw - var(--page)) / 2);
    grid-auto-columns:calc((min(var(--page),100vw - var(--gouttiere) * 2) - var(--e4) * 2) / 3.2);
    padding-inline:var(--bord);scroll-padding-inline:var(--bord)}
}

/* ---------- Réduire les animations : tout est là, rien ne bouge ------------ */
@media (prefers-reduced-motion:reduce){
  .js .scan__lecture li{opacity:1;transform:translateY(-50%)}
  .scan__ligne{display:none}
  .js .formule__barre i{transform:none;transition:none}
  .js .fiches__rail{opacity:1;translate:none;transition:none}
}