/* =====================================================================
   OCTOBRE ROSE — ALMAVIVA SANTÉ
   Feuille de style unique. Palette rose / encre, typo massive,
   compositions volontairement décalées.
   ===================================================================== */

/* ---------- FONTS (locales) ---------- */
/* D-DIN (police d'affichage de la charte). Deux fichiers seulement, Regular
   et Bold : les plages de graisses déclarées ci-dessous couvrent tout le
   spectre utilisé sur le site, pour que le navigateur choisisse le vrai Bold
   au lieu de graisser artificiellement le Regular. Pas de découpe par
   unicode-range, le fichier couvre déjà tout le latin accentué français. */
@font-face{font-family:'DDIN';src:url('../fonts/d-din.woff2') format('woff2');
  font-weight:100 500;font-style:normal;font-display:swap;}
@font-face{font-family:'DDIN';src:url('../fonts/d-din-bold.woff2') format('woff2');
  font-weight:600 900;font-style:normal;font-display:swap;}

/* Bricolage Grotesque — conservée pour le seul « OCTOBRE ROSE » du hero, qui
   garde sa typo d'origine (voir .hero__title). Partout ailleurs c'est D-DIN.
   Police variable : les axes opsz / wght sont réglés sur la règle du titre. */
@font-face{font-family:'Bricolage';src:url('../fonts/bricolage-latin.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage';src:url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'SpaceG';src:url('../fonts/spacegrotesk-latin.woff2') format('woff2');
  font-weight:300 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'SpaceG';src:url('../fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  font-weight:300 700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Signature manuscrite de la campagne (« Tous acteurs de votre santé »).
   Beyond Infinity — BLKBK. Une seule graisse, pas de découpe par
   unicode-range : le fichier couvre déjà tout le latin accentué français. */
@font-face{font-family:'BeyondInf';
  src:url('../fonts/beyond-infinity.woff2') format('woff2'),
      url('../fonts/beyond-infinity.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;}

@font-face{font-family:'InstrSerif';src:url('../fonts/instrumentserif-latin.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'InstrSerif';src:url('../fonts/instrumentserif-latin-ext.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- TOKENS ---------- */
:root{
  --rose:#FF1F7D;
  --rose-2:#FF5FA2;
  --rose-3:#FFB3D1;
  --rose-4:#FFE1EE;
  --creme:#FFF5F9;
  --cremeTransp: rgba(255, 245, 249, 0.85);
  --encre:#150710;
  --encre-2:#25101C;
  /* Texte sur fond clair : prune foncé et non l'encre noire (le noir est jugé
     trop connoté deuil dans un contexte santé / cancer — demande de la
     direction, 09/2026, teinte #411C31 choisie par elle). Les fonds sombres,
     boutons et voiles restent en encre. */
  --texte:#411C31;
  --bleu:#143C7E;
  --orange:#F07C22;

  --f-disp:'DDIN','DIN Alternate','Arial Narrow',Arial,sans-serif;
  /* Réservée au « OCTOBRE ROSE » du hero, qui garde la Bricolage d'origine. */
  --f-hero:'Bricolage','Arial Black',sans-serif;
  --f-body:'SpaceG','Helvetica Neue',Arial,sans-serif;
  --f-serif:'InstrSerif',Georgia,serif;
  /* Réservée à la signature « Tous acteurs de votre santé » : script lié,
     donc jamais d'italique simulée ni d'interlettrage (ça casserait les
     liaisons entre les lettres). */
  --f-sign:'BeyondInf','Segoe Script','Brush Script MT',cursive;

  --pad:clamp(18px,5vw,88px);
  /* Réserve de lecture au bas d'un panneau sortant (voir PANNEAUX EMPILÉS).
     Le panneau entrant monte par-dessus depuis le bas de l'écran dès que le
     sortant se fige : sans cette réserve il recouvre la dernière ligne de
     contenu dans la seconde, avant qu'on ait pu la lire. Mesuré sur 390×844 :
     175px de défilement pour le dernier témoignage, 100px pour la dernière
     date de l'agenda. Avec la réserve, c'est du vide qui est recouvert en
     premier — et la section redevient plus haute que la fenêtre, donc elle
     s'épingle quand son bas atteint le bas de l'écran, tout ayant défilé. */
  --lecture:46svh;
  --r:22px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* le clip est posé sur les deux : sur mobile, ScrollSmoother ne prend pas la
   main (pas de lissage au doigt), le document reste donc le scroller natif et
   c'est lui qui doit refuser tout débordement latéral */
/* overflow-anchor:none : quand un bloc change de hauteur (la carte du quiz
   entre deux volets), le navigateur déplace de lui-même le défilement pour
   garder « l'ancre » en place. Sous ScrollSmoother, ce déplacement natif
   n'est pas suivi par le contenu lissé : au recalcul suivant, la page
   sautait de quelques dizaines de pixels et la carte remontait sous la
   barre. */
html{-webkit-text-size-adjust:100%;overflow-x:clip;overflow-anchor:none}
body{
  margin:0;background:var(--creme);color:var(--texte);
  font-family:var(--f-body);font-size:clamp(15px,1.05vw,18px);line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;
  overflow-anchor:none;   /* voir html : Chrome lit aussi la valeur du body */
}
/* Verrou du défilement (menu, visionneuse), posé par le script seulement
   quand ScrollSmoother ne tient pas la page (au doigt, mouvement réduit).
   Avec lui, paused() suffit : retirer la barre de défilement native
   élargissait la fenêtre de 15 px et décalait toute la page sous le menu. */
html.is-locked,html.is-locked body{overflow:hidden}
/* Arrivée avec une ancre : classe posée par le script en ligne de <head>,
   retirée par site.js qui prend le relais (opacité animée). L'animation
   de secours dévoile la page seule au bout de 4 s si le script n'est
   jamais arrivé. */
.vers-ancre #smooth-wrapper{opacity:0;animation:versAncreSecours 0s 4s forwards}
@keyframes versAncreSecours{to{opacity:1}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:800;line-height:.92;
  letter-spacing:-.035em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
::selection{background:var(--rose);color:#fff}

/* ---------- GRAIN ---------- */
/* Deux corrections par rapport à la version d'origine :

   — la texture était un filtre SVG (feTurbulence) et non une image : le
     navigateur devait calculer le bruit, et le recalculer chaque fois que le
     calque était invalidé. Elle est désormais pré-tirée dans grain.webp
     (192px physiques affichés sur 64px CSS, soit un pixel de bruit par pixel
     d'écran sur un téléphone à 3×, comme le rendait le filtre) ;

   — inset:-14% et non -120% : le calque ne doit dépasser que de ce que le
     décalage de l'animation consomme (±5 % de sa propre largeur). À -120% il
     couvrait 3,4 écrans de large, soit ~11 fois la surface à rasteriser et à
     garder en mémoire GPU. */
.grain{
  position:fixed;inset:-14%;z-index:9998;pointer-events:none;
  opacity:.32;mix-blend-mode:multiply;
  background-image:url('../../img/grain.webp');
  background-size:64px 64px;
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}    16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)} 50%{transform:translate(-3%,4%)}
  66%{transform:translate(4%,3%)}  83%{transform:translate(-5%,-2%)}
  100%{transform:translate(0,0)}
}
/* Au doigt, pas de grain du tout.

   Constat de terrain (iPhone 16) : c'est ce voile, et lui seul, qui rendait
   le défilement saccadé — sans lui la page redevient fluide. Un élément fixe
   couvrant tout l'écran doit être recomposé par-dessus le contenu à chaque
   image, et mix-blend-mode obligeait en plus à rasteriser le fond dans le
   même groupe de composition, empêchant de simplement faire glisser un calque
   déjà peint. Sur une page qui défile, c'est le chemin de rendu le plus
   coûteux d'iOS, et il pèse sur la totalité de l'écran, partout.

   Sur un écran de téléphone la texture ne se lisait de toute façon presque
   pas — l'échange est très favorable. */
@media (hover:none) and (pointer:coarse){
  .grain{display:none}
}

/* Styles de survol : html.souris et non @media (hover:hover). Firefox sur
   un PC qui a aussi un écran tactile répond hover:none (le toucher est pris
   comme pointeur principal) et perdait tous les survols, souris en main. La
   classe est posée par le script (surSouris dans site.js) : média vrai, ou
   premier mouvement d'un pointeur de type souris. Au doigt, jamais. */

/* ---------- ÉTIQUETTES DE SECTION ---------- */
.sec-tag{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose);
}
.sec-tag i{
  font-style:normal;display:grid;place-items:center;
  width:2.1em;height:2.1em;border-radius:50%;
  background:var(--rose);color:#fff;font-size:.68rem;letter-spacing:0;
}
.sec-tag--light{color:var(--rose-3)}
.sec-tag--light i{background:var(--rose)}

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(12px,1.8vw,22px) var(--pad);
  mix-blend-mode:normal;
  
  /* En haut de page (hero, clair) la barre est transparente. Dès 50 px de
     défilement (.is-scrolled, posée par le script) elle prend un fond crème
     opaque et le garde jusqu'au bout, quelle que soit la section dessous.
     La version précédente (voile translucide flouté, inversé en crème sur les
     sections sombres) réagissait à tout ce qui passait dessous — la carte
     noire du quiz sur la section crème la faisait osciller à chaque réponse.
     Un fond fixe n'a rien à décider (demande du 2026-09-09). */
  background:transparent;
  transition:background-color .45s var(--ease-out),box-shadow .45s var(--ease-out),color .35s;
}
.hdr.is-scrolled{
  background:var(--creme);
  box-shadow:0 1px 0 rgba(21,7,16,.08);
}
/* menu plein écran ouvert, ou en train de se replier (.menu-closing, retirée
   par le script à la fin du repli) : la barre se pose sur le menu, sans fond */
.menu-open .hdr,.menu-closing .hdr{background:transparent;box-shadow:none}
.hdr__brand{display:flex;align-items:center;gap:.7rem}
/* Logo plus grand en haut de page, qui revient à sa taille dès qu'on
   défile (.is-scrolled), en même temps que le fond crème apparaît. */
.hdr__logo{height:clamp(48px,5.6vw,84px);width:auto;transition:height .45s var(--ease-out)}
.hdr.is-scrolled .hdr__logo{height:clamp(26px,2.6vw,36px)}
.hdr__logo--light{display:none}
.hdr__x{font-family:var(--f-disp);font-size:1.1rem;color:var(--rose);opacity:.55}
.hdr__tag{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.5em .85em;border-radius:99px;background:var(--rose);color:#fff;
  display:inline-flex;gap:.4em;align-items:center;
}
.hdr__tag i{font-style:normal;opacity:.65}
.hdr__right{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.hdr__cta{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.85em 1.25em;border-radius:99px;border:1.4px solid currentColor;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out),border-color .35s;
}
.hdr__cta svg{width:1.1em;height:1.1em;transition:transform .35s var(--ease-out)}
.hdr__cta:hover{background:var(--rose);border-color:var(--rose);color:#fff}
.hdr__cta:hover svg{transform:translateX(3px)}

.burger{
  display:inline-flex;align-items:center;gap:.6em;background:none;border:0;padding:.4em 0;
  color:inherit;font:inherit;cursor:pointer;
}
.burger__box{display:grid;gap:5px;width:26px}
.burger__box i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .45s var(--ease-out),opacity .3s,width .45s var(--ease-out)}
.burger__box i:nth-child(2){width:70%;margin-left:auto}
.burger__txt{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.menu-open .burger__box i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger__box i:nth-child(2){opacity:0;width:0}
.menu-open .burger__box i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* La barre ne s'inverse plus sur les sections sombres (fond crème fixe) :
   seul le menu ouvert la passe en crème. */
.menu-open .hdr{color:var(--creme)}
.menu-open .hdr .hdr__logo--dark{display:none}
.menu-open .hdr .hdr__logo--light{display:block}
/* visibility en plus de l'opacité : invisible, le bouton restait dans
   l'ordre de tabulation du menu */
.menu-open .hdr__cta{opacity:0;visibility:hidden;pointer-events:none}

/* =====================================================================
   MENU OVERLAY
   ===================================================================== */
.menu{
  position:fixed;inset:0;z-index:590;visibility:hidden;
  display:grid;align-items:center;
}
.menu.is-open{visibility:visible}
.menu__panels{position:absolute;inset:0;display:flex}
.menu__panels span{flex:1;background:var(--encre);transform:scaleY(0);transform-origin:bottom}
.menu__bg{position:absolute;inset:0;overflow:hidden}
.menu__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:grayscale(1) contrast(1.1);
}
.menu__bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(21,7,16,.94) 28%,rgba(21,7,16,.62) 100%)}
.menu__inner{
  position:relative;z-index:2;padding:calc(var(--pad) + 60px) var(--pad) var(--pad);
  display:grid;gap:clamp(24px,4vw,60px);align-content:center;
  /* hauteur fixe et défilement propre : sur un petit écran en paysage la
     liste peut déborder ; elle défile alors seule, sans entraîner la page
     en dessous (overscroll-behavior), et le script laisse passer le geste
     dans cette zone (data-defilable) */
  height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.menu__inner::-webkit-scrollbar{display:none}
.menu__list{display:grid;gap:clamp(2px,.4vw,8px)}
.menu__list li{overflow:hidden}
.menu__list a{
  display:flex;align-items:baseline;gap:clamp(12px,2vw,32px);
  padding:clamp(2px,.5vw,10px) 0;color:var(--creme);
}
.menu__list i{
  font-style:normal;font-family:var(--f-body);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;color:var(--rose);flex:0 0 auto;width:2.4em;
}
.menu__list span{
  font-family:var(--f-disp);font-weight:800;letter-spacing:-.04em;line-height:.94;
  /* borné par la hauteur de fenêtre : 7 liens doivent tenir sans scroll */
  font-size:clamp(2rem,min(5.6vw,7.4svh),4.8rem);
  transition:color .4s var(--ease-out),transform .55s var(--ease-out),-webkit-text-stroke-color .4s;
  display:inline-block;
}
  html.souris .menu__list a:hover span{
    color:transparent;-webkit-text-stroke:1.6px var(--rose);
    transform:translateX(clamp(10px,2vw,34px));
  }
.menu__aside{
  display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,40px);align-items:center;
  justify-content:space-between;border-top:1px solid rgba(255,179,209,.22);
  padding-top:clamp(16px,2.4vw,30px);
}
.menu__note{color:var(--rose-3);font-size:.9rem;max-width:34ch}
.menu__phone{
  font-family:var(--f-disp);font-size:clamp(1.1rem,2vw,1.7rem);color:var(--rose);
  letter-spacing:-.02em;transition:transform .4s var(--ease-out);display:inline-block;
}
.menu__phone:hover{transform:translateX(8px)}

/* =====================================================================
   RAIL DE PROGRESSION
   ===================================================================== */
.rail{
  position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);
  z-index:500;display:grid;justify-items:center;gap:12px;opacity:0;
}
.rail__num{font-family:var(--f-disp);font-size:.9rem;color:var(--rose);letter-spacing:-.02em}
.rail__track{width:2px;height:min(34vh,260px);background:rgba(255,31,125,.2);
  border-radius:2px;overflow:hidden;position:relative}
.rail__track i{position:absolute;top:0;left:0;right:0;height:100%;background:var(--rose);
  transform:scaleY(0);transform-origin:top;display:block}
.rail__label{
  writing-mode:vertical-rl;font-size:.64rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--texte);opacity:.55;white-space:nowrap;
}
.rail.on-dark .rail__label{color:var(--creme)}
.menu-open .rail{opacity:0 !important;pointer-events:none}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:calc(var(--pad) + 70px) var(--pad) calc(var(--pad) + 40px);
   
}
/* le voile s'éteint avant le bas du hero : sinon l'overflow:hidden de la
   section le tranche net et laisse une démarcation horizontale */
.hero__blobs{position:absolute;inset:0;pointer-events:none;filter:blur(70px);opacity:.62;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 97%)}
.hero__blobs span{position:absolute;border-radius:50%;display:block}
.hero__blobs span:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-8vw;background:var(--rose-3)}
.hero__blobs span:nth-child(2){width:38vw;height:38vw;right:-6vw;bottom:-12vw;background:var(--rose-4)}
.hero__blobs span:nth-child(3){width:26vw;height:26vw;right:22vw;top:6vw;background:#FFD9E8}

/* Au doigt : mêmes halos, sans un seul pixel de flou. Un blur(70px) sur trois
   disques de la taille de l'écran, plus le masque du conteneur, oblige le
   navigateur à refiltrer toute la zone dès que le hero est déplacé au scroll.
   Des dégradés radiaux donnent le même rendu pour un coût de peinture nul. */
@media (hover:none) and (pointer:coarse){
  .hero__blobs{
    filter:none;opacity:.5;
    /* le masque n'a plus lieu d'être : les dégradés s'éteignent d'eux-mêmes
       avant le bord, il n'y a plus de flou tranché par l'overflow du hero */
    -webkit-mask-image:none;mask-image:none;
  }
  /* Le pic d'opacité reproduit celui d'un disque plein passé au blur(70px),
     pas celui du disque : à ce rayon de flou la couleur ne dépasse pas la
     moitié de sa valeur, même au centre. */
  .hero__blobs span{background:none}
  .hero__blobs span:nth-child(1){width:76vw;height:76vw;left:-26vw;top:-22vw;
    background:radial-gradient(closest-side,rgba(255,179,209,.8),rgba(255,179,209,0))}
  .hero__blobs span:nth-child(2){width:64vw;height:64vw;right:-20vw;bottom:-22vw;
    background:radial-gradient(closest-side,rgba(255,225,238,.9),rgba(255,225,238,0))}
  .hero__blobs span:nth-child(3){width:48vw;height:48vw;right:2vw;top:-4vw;
    background:radial-gradient(closest-side,rgba(255,217,232,.75),rgba(255,217,232,0))}
}

.hero__ruban{
  --rw:clamp(200px,29vw,460px);
  position:absolute;right:clamp(-40px,4vw,90px);
  width:var(--rw);top:calc(50% - var(--rw) * .8);
  z-index:1;opacity:.95;pointer-events:none;
}
.hero__ruban-img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 30px 50px rgba(209,0,94,.22));
}

/* à partir de 1800px, le ruban se cale sur la hauteur du hero. top/bottom
   plutôt que height + translate : GSAP anime déjà la transformation du
   conteneur au scroll et neutraliserait un centrage par translate. */
@media (min-width:1800px){
  .hero__ruban{
    right:clamp(-30px,3vw,80px);
    top:15%;bottom:15%;width:auto;
  }
  .hero__ruban-img{height:100%;width:auto;max-width:none}
}

.hero__inner{position:relative;z-index:4;max-width:min(1400px,100%)}
.hero__over{
  display:inline-flex;align-items:center;gap:.6em;margin-bottom:clamp(14px,2vw,26px);
  font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.hero__over b{color:var(--rose)}
.hero__over .dot{width:8px;height:8px;border-radius:50%;background:var(--rose);
  animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}

.hero__title{
  /* seul titre resté en Bricolage : le crénage négatif et les tailles
     ci-dessous sont réglés sur elle, pas sur la D-DIN du reste du site */
  font-family:var(--f-hero);
  font-variation-settings:'opsz' 96,'wght' 800;
  font-size:clamp(3.6rem,17.5vw,17rem);line-height:.8;letter-spacing:-.055em;
  display:grid;
}
.hero__l1{display:block}
.hero__l2{
  display:flex;align-items:center;gap:clamp(12px,2.2vw,40px);
  color:var(--rose);
  /* retrait volontairement modéré : « ROSE » + logo doivent rester à distance
     du ruban, qui remonte vers la gauche sur les écrans intermédiaires */
  margin-left:clamp(20px,5.5vw,180px);
  position:relative;
}
.hero__l2-word{display:block}
/* logo posé à hauteur de « ROSE » : dimensionné sur la ligne, pas sur la fenêtre */
.hero__logo{
  flex:0 0 auto;width:auto;height:.53em;align-self:center;
  translate:0 .02em;
}
.hero__sub{
  margin-top:clamp(20px,3vw,44px);max-width:30ch;
  font-size:clamp(1.05rem,1.8vw,1.6rem);line-height:1.35;
}
.hero__sub em{font-size:1.22em;color:var(--rose)}
.hero__sub b{font-weight:700}
/* signature de la campagne, reprise de l'affiche */
.hero__claim{
  display:block;margin-top:.5em;font-family:var(--f-sign);font-style:normal;
  font-size:1.52em;letter-spacing:0;line-height:1.3;opacity:.88;
}

.badge{
  position:absolute;z-index:5;left:var(--pad);bottom:clamp(16px,3vh,40px);
  width:clamp(78px,7.5vw,112px);aspect-ratio:1;display:grid;place-items:center;color:var(--texte);
}
.badge__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge__ring text{font-family:var(--f-body);font-size:9.6px;font-weight:700;
  letter-spacing:.16em;fill:currentColor;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
.badge__core{
  width:44%;aspect-ratio:1;border-radius:50%;background:var(--rose);color:#fff;
  display:grid;place-items:center;transition:transform .4s var(--ease-out);
}
.badge__core svg{width:52%;height:52%}
.badge:hover .badge__core{transform:scale(1.14)}
@keyframes stretch{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marq{position:relative;padding:clamp(40px,7vw,110px) 0;overflow:hidden;z-index:5}
.marq__band{white-space:nowrap;overflow:hidden;padding:clamp(8px,1vw,16px) 0}
.marq__band--fill{background:var(--rose);color:var(--creme);rotate:-2.4deg;
  margin:0 -6vw;box-shadow:0 20px 50px -30px rgba(255,31,125,.9)}
.marq__band--line{rotate:1.8deg;margin:clamp(-14px,-1.4vw,-6px) -6vw 0;position:relative}
.marq__row{display:flex;width:max-content;will-change:transform}
.marq__row span{
  font-family:var(--f-disp);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.6rem,5.2vw,5rem);padding-right:.4em;
}
.marq__band--line .marq__row span{
  color:transparent;-webkit-text-stroke:1.4px var(--rose);
}

/* =====================================================================
   MANIFESTE
   ===================================================================== */
.mani{
  position:relative;padding:clamp(60px,11vw,190px) var(--pad) clamp(60px,10vw,160px);
  display:grid;gap:clamp(26px,4vw,60px);justify-items:start;
  max-width:1500px;margin:0 auto;
  /* panneau sortant de la paire 01 → 02 */
  padding-bottom:max(clamp(60px,10vw,160px),var(--lecture));
}
.mani__text{
  font-family:var(--f-disp);font-weight:500;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.5rem,4.6vw,4.1rem);
}
.mani__text .w{opacity:.14;transition:none;display:inline-block}
.mani__text b{font-weight:800;color:var(--rose)}
.mani__text em{color:var(--rose-2);font-size:1.06em}
.mani__sign{display:flex;align-items:center;gap:1rem}
.mani__sign img{height:clamp(24px,2.4vw,34px);width:auto;opacity:.9}
/* « Tous acteurs de votre santé » : la signature manuscrite de l'affiche */
.mani__sign span{font-family:var(--f-sign);font-style:normal;font-size:clamp(1.75rem,2.85vw,2.5rem);
  letter-spacing:0;line-height:1.2;color:var(--rose);opacity:1}

/* ---- l'affiche + « Parlons prévention » ---- */
.mani__duo{
  width:100%;margin-top:clamp(20px,4vw,70px);
  display:grid;gap:clamp(30px,5vw,90px);align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
}
/* L'affiche : un tirage posé de biais, comme les polaroïds du rail. La
   rotation de repos vient de la CSS (--rot) et GSAP y revient en fin
   d'entrée, sinon l'affiche finirait droite. */
.affiche{
  --rot:-3deg;
  margin:0;position:relative;justify-self:center;width:min(100%,440px);
  rotate:var(--rot);
}
.affiche__pic,.flyer__pic{
  position:relative;display:block;width:100%;padding:0;margin:0;border:0;
  font:inherit;color:inherit;cursor:zoom-in;-webkit-appearance:none;appearance:none;
  background:var(--creme);border-radius:6px;overflow:hidden;
  box-shadow:0 50px 90px -46px rgba(21,7,16,.7),0 0 0 1px rgba(21,7,16,.06);
  transition:box-shadow .6s var(--ease-out);
}
/* Pas de zoom de l'image au survol (demande du 2026-09-09) : seule la
   bascule 3D sous la souris bouge le tirage (revealFlyer dans site.js). */
.affiche__pic img,.flyer__pic img{width:100%;height:auto;display:block}
.affiche__pic:focus-visible,.flyer__pic:focus-visible{outline:3px solid var(--rose);outline-offset:4px}
.affiche__pic:focus-visible .card__zoom,.flyer__pic:focus-visible .card__zoom{opacity:1;transform:scale(1)}
  html.souris .affiche__pic:hover, html.souris .flyer__pic:hover{box-shadow:0 60px 100px -46px rgba(21,7,16,.8),0 0 0 1px rgba(21,7,16,.06)}
  html.souris .affiche__pic:hover .card__zoom, html.souris .flyer__pic:hover .card__zoom{opacity:1;transform:scale(1)}
.affiche__cap,.flyer__cap{
  margin-top:1rem;text-align:center;font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;opacity:.5;
}

.prev{display:grid;gap:clamp(14px,1.8vw,24px);justify-items:start;max-width:60ch}
.prev__title{font-size:clamp(2rem,5vw,4.2rem);letter-spacing:-.04em}
.prev__title em{color:var(--rose)}
.prev__txt{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;opacity:.82}
.prev__txt b{font-weight:700;color:var(--rose)}
.prev__q{font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.03em;margin-top:.4em}
.prev__list{display:grid;gap:.4em;padding-left:0}
.prev__list li{position:relative;padding-left:1.6em;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.5}
.prev__list li::before{
  content:'';position:absolute;left:0;top:.62em;width:.85em;height:.85em;border-radius:50%;
  background:var(--rose);opacity:.85;
}

/* bouton plein, même dessin que celui du quiz mais sur fond clair */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:1em 1.7em;border-radius:99px;border:0;cursor:pointer;
  background:var(--rose);color:#fff;font-family:var(--f-body);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;overflow:hidden;margin-top:.4em;
  transition:box-shadow .5s var(--ease-out);
  box-shadow:0 18px 34px -20px rgba(255,31,125,.9);
}
.btn::before{content:'';position:absolute;inset:0;background:var(--encre);border-radius:99px;
  transform:translateY(101%);transition:transform .55s var(--ease-out)}
.btn span,.btn svg{position:relative;z-index:1}
.btn svg{width:1.15em;height:1.15em;transition:transform .35s var(--ease-out)}
  html.souris .btn:hover::before{transform:translateY(0)}
  html.souris .btn:hover svg{transform:translateX(3px)}

@media (max-width:900px){
  .mani__duo{grid-template-columns:1fr;gap:clamp(30px,6vw,60px)}
  .affiche{width:min(100%,360px);justify-self:start}
}

/* =====================================================================
   CHIFFRES
   ===================================================================== */
.nums{
  position:relative;background:var(--encre);color:var(--creme);
  padding:clamp(60px,10vw,150px) var(--pad) clamp(70px,11vw,170px);
  border-radius:clamp(24px,4vw,60px) clamp(24px,4vw,60px) 0 0;
  overflow:hidden;
}
/* Le halo épouse la section (inset:0) et son dégradé est défini en % de cette
   boîte : il s'éteint donc toujours avant les bords, quelle que soit la taille
   de l'écran. Auparavant c'était un carré de 70vw débordant de 30 % vers le
   haut, que le overflow:hidden de la section tranchait net. */
.nums::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 64% 46% at 50% 38%,
             rgba(255,31,125,.24), rgba(255,31,125,0) 72%);
}
.nums__head{position:relative;display:grid;gap:clamp(14px,2vw,26px);margin-bottom:clamp(40px,6vw,90px)}
.nums__title{font-size:clamp(2.2rem,7vw,6rem);letter-spacing:-.045em}
.nums__title em{color:var(--rose)}
.nums__grid{
  position:relative;display:grid;gap:clamp(24px,3.4vw,54px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.num{
  position:relative;rotate:var(--tilt,0deg);padding:clamp(18px,2vw,28px) 0 0;
  border-top:1px solid rgba(255,179,209,.26);
}
.num--offset{translate:0 clamp(18px,3.4vw,52px)}
.num__big{
  display:flex;align-items:baseline;white-space:nowrap;
  font-family:var(--f-disp);font-weight:800;
  font-size:clamp(2.8rem,6.6vw,6.4rem);line-height:.82;letter-spacing:-.05em;
  color:var(--rose);font-variant-numeric:tabular-nums;
}
.num__big s{text-decoration:none;opacity:.42;margin:0 .04em}
.num__big b{font-weight:inherit}
.num__unit{display:block;margin-top:.7rem;font-size:clamp(.92rem,1.3vw,1.15rem);
  font-weight:600;letter-spacing:-.01em}
.num__desc{margin-top:.6rem;font-size:.92rem;opacity:.62;max-width:30ch;line-height:1.5}
.num__bar{display:block;height:2px;background:var(--rose);margin-top:1.4rem;
  transform:scaleX(0);transform-origin:left}
.nums__src{margin-top:clamp(46px,6vw,90px);font-size:.92rem;letter-spacing:.12em;
  line-height:1.6;text-transform:uppercase;opacity:.4}

/* =====================================================================
   PARCOURS / DÉPISTAGE
   ===================================================================== */
.path{position:relative;background:var(--encre);color:var(--creme)}

/* ---- intro : le texte et le flyer d'auto-palpation, avant le tracé ---- */
.path__intro{
  position:relative;z-index:2;
  padding:clamp(70px,10vw,150px) var(--pad) clamp(30px,5vw,80px);
  display:grid;gap:clamp(30px,5vw,90px);align-items:center;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  max-width:1500px;margin:0 auto;
}
.path__intro-txt{display:grid;gap:clamp(14px,1.8vw,24px);justify-items:start;max-width:62ch}
.path__intro-title{font-size:clamp(2rem,5.2vw,4.4rem);letter-spacing:-.04em}
.path__intro-title em{color:var(--rose)}
.path__lead{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;opacity:.78}
.path__lead b{font-weight:700;opacity:1;color:var(--creme)}
.path__lead--strong{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.6rem);
  color:var(--rose-3);opacity:1;line-height:1.3}

/* le flyer : même tirage que l'affiche, mais sur fond sombre (ombre plus
   dense, liseré crème) ; --rot est lue par GSAP comme pour l'affiche */
.flyer{--rot:2.4deg;margin:0;position:relative;justify-self:center;width:min(100%,420px);rotate:var(--rot)}
.flyer__pic{
  box-shadow:0 60px 100px -50px rgba(0,0,0,.95),0 0 0 4px var(--creme);
}
  html.souris .flyer__pic:hover{box-shadow:0 70px 110px -50px rgba(0,0,0,1),0 0 0 4px var(--creme)}
.flyer__cap{color:var(--rose-3);opacity:.75}

@media (max-width:900px){
  .path__intro{grid-template-columns:1fr}
  .flyer{width:min(100%,340px);justify-self:start}
}

.path__pin{
  position:relative;min-height:100svh;display:grid;align-content:center;
  padding:clamp(70px,9vw,120px) var(--pad);overflow:hidden;
}
.path__head{position:relative;z-index:3;display:grid;gap:clamp(12px,1.6vw,22px);
  justify-items:start;margin-bottom:clamp(20px,4vw,50px)}
.path__title{font-size:clamp(2.2rem,6.6vw,5.6rem)}
.path__title em{color:var(--rose)}

.path__svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.path__line{stroke:var(--rose);stroke-width:3.5;stroke-linecap:round}
.path__line-ghost{stroke:rgba(255,179,209,.16);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:2 14}
.path__runner circle{fill:var(--rose)}
.path__runner .path__runner-halo{fill:var(--rose);opacity:.22}

.path__steps{position:relative;z-index:3;min-height:min(52vh,440px)}
.step{
  position:absolute;left:var(--x);top:var(--y);width:min(300px,72vw);
  translate:-50% 0;padding:clamp(16px,1.6vw,24px);
  background:rgba(37,16,28,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(255,179,209,.2);border-radius:var(--r);
}
.step__no{
  display:inline-grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;
  background:var(--rose);color:#fff;font-family:var(--f-disp);font-size:.8rem;margin-bottom:.7rem;
}
.step h3{font-size:clamp(1.2rem,2.2vw,1.9rem);margin-bottom:.4rem}
.step p{font-size:.9rem;opacity:.72;line-height:1.5}

/* =====================================================================
   CLINIQUES — SCROLL HORIZONTAL
   ===================================================================== */
#cliniques{ margin-top: -4px;}
.clin{position:relative;background:var(--encre);color:var(--creme);
  padding-bottom:clamp(30px,5vw,80px)}
/* grid-template-columns : sans ça, la colonne prend la largeur max-content du rail
   horizontal (3300px+) et l'en-tête part hors écran */
.clin__pin{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  align-content:center;overflow:hidden;padding:clamp(70px,8vw,110px) 0 clamp(30px,4vw,60px)}
.clin__ghost{
  position:absolute;left:0;top:clamp(8vh,12vh,16vh);white-space:nowrap;pointer-events:none;
  font-size:clamp(4rem,16vw,15rem);line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,179,209,.16);z-index:0;
}
/* indispensable : une transformation ne s'applique pas à une boîte inline,
   le défilement du titre restait sans effet visuel */
.clin__ghost span{display:inline-block;will-change:transform}
.clin__head{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 var(--pad);margin-bottom:clamp(22px,3vw,44px);flex-wrap:wrap;
}
.clin__hint{display:inline-flex;align-items:center;gap:.7em;font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.clin__hint i{width:38px;height:1px;background:currentColor;display:block;
  animation:stretch 2.2s ease-in-out infinite}

.clin__track{
  position:relative;z-index:2;display:flex;align-items:center;
  gap:clamp(18px,2.6vw,44px);padding:clamp(28px,3.6vw,58px) var(--pad);
  width:max-content;will-change:transform;
}
.card{
  position:relative;flex:0 0 auto;width:clamp(228px,21vw,320px);
  height:min(56svh,470px);display:flex;flex-direction:column;
  rotate:var(--rot,0deg);translate:0 var(--up,0px);
  background:var(--creme);color:var(--texte);border-radius:6px;
  padding:13px 13px 18px;box-shadow:0 40px 70px -40px rgba(0,0,0,.85);
  transition:rotate .5s var(--ease-out),scale .5s var(--ease-out);
}
/* Le survol n'existe que là où il y en a un. Sur écran tactile, :hover reste
   collé au doigt : la carte et sa photo zoomaient pendant qu'on faisait
   défiler le rail. Les règles de survol des cartes sont donc regroupées plus
   bas dans un @media (hover:hover). */
.card__pic{
  position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden;
  background:var(--rose-4);border-radius:3px;
  display:block;padding:0;border:0;margin:0;font:inherit;color:inherit;
  cursor:zoom-in;-webkit-appearance:none;appearance:none;
}
.card__pic img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out),filter .6s}
.card__pic:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.card__zoom{
  position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(21,7,16,.55);color:var(--creme);
  opacity:0;transform:scale(.7);pointer-events:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.card__zoom svg{width:17px;height:17px}
.card__pic:focus-visible .card__zoom{opacity:1;transform:scale(1)}

  html.souris .card:hover{rotate:0deg;scale:1.03}
  html.souris .card:hover .card__pic img{transform:scale(1.07)}
  html.souris .card:hover .card__zoom{opacity:1;transform:scale(1)}
/* sans survol possible, la loupe reste visible : c'est le seul indice
   qui signale que la photo s'agrandit */
@media (hover:none){
  .card__zoom{opacity:.9;transform:scale(1)}
}
.card__meta{flex:0 0 auto;padding:13px 5px 0}
.card__city{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose)}
.card__name{font-size:clamp(1.15rem,1.7vw,1.6rem);margin:.3rem 0 .45rem;letter-spacing:-.03em}
.card__act{font-size:.86rem;opacity:.68;line-height:1.45}
.card__pin{
  position:absolute;top:-14px;left:-14px;width:38px;height:38px;border-radius:50%;
  background:var(--rose);color:#fff;display:grid;place-items:center;
  font-family:var(--f-disp);font-size:.86rem;box-shadow:0 8px 20px -8px rgba(255,31,125,.9);
}
.card--end{
  background:none;box-shadow:none;rotate:0deg;translate:0 0;height:auto;
  width:clamp(210px,18vw,280px);display:grid;place-items:center;
}
.card__end{text-align:center;color:var(--creme)}
.card__end p{font-family:var(--f-disp);font-size:clamp(1.1rem,1.8vw,1.7rem);
  line-height:1.1;letter-spacing:-.03em;margin-bottom:1rem}
.card__end b{color:var(--rose)}
.card__end a{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1.5px solid var(--rose);padding-bottom:.3em;transition:color .3s}
.card__end a:hover{color:var(--rose)}

/* =====================================================================
   AVANT / APRÈS — masque au scroll
   Les deux photos ont exactement le même cadrage : la seconde est révélée
   par un clip-path qui balaie l'image, avec un trait rose sur la jointure.
   ===================================================================== */
.cmp{position:relative;background:var(--encre);
  border-radius:clamp(24px,4vw,60px) clamp(24px,4vw,60px) 0 0}
/* le même arrondi sur le bloc épinglé : c'est lui qui porte les photos */
.cmp__pin{position:relative;height:100svh;overflow:hidden;
  border-radius:clamp(24px,4vw,60px) clamp(24px,4vw,60px) 0 0}
.cmp__frame{position:absolute;inset:0;margin:0}
.cmp__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
/* la photo « après » démarre entièrement masquée */
.cmp__img--apres{clip-path:inset(0 100% 0 0)}
.cmp__line{
  position:absolute;top:0;bottom:0;left:0;width:3px;
  background:var(--creme);box-shadow:0 0 30px 6px rgba(255,31,125,.6);
  z-index:3;pointer-events:none;
}
.cmp__head{
  position:absolute;left:var(--pad);top:clamp(90px,13vh,170px);z-index:4;
  display:grid;gap:clamp(12px,1.6vw,22px);justify-items:start;
  max-width:min(640px,80vw);color:var(--creme);
  text-shadow:0 2px 30px rgba(21,7,16,.55);
}
.cmp__title{font-size:clamp(2rem,5.2vw,4.4rem)}
.cmp__title em{color:var(--rose-3)}
.cmp__tag{
  position:absolute;bottom:clamp(22px,4vh,52px);z-index:4;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:.7em 1.1em;border-radius:99px;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.cmp__tag--a{left:var(--pad);background:var(--rose);color:#fff;opacity:0}
.cmp__tag--b{right:var(--pad);background:rgba(21,7,16,.5);color:var(--creme)}

@media (max-width:760px){
  .cmp__head{max-width:none;right:var(--pad)}
  .cmp__tag{font-size:.6rem;padding:.6em .9em}
}

/* =====================================================================
   MUR ROSE
   ===================================================================== */
.wall{
  position:relative;background:var(--encre);color:var(--creme);
  padding:clamp(60px,9vw,140px) var(--pad) clamp(70px,10vw,160px);
  border-radius:0 0 clamp(24px,4vw,60px) clamp(24px,4vw,60px);
  /* les tuiles entrent décalées de ±70px et pivotées : sans ce clip elles
     dépassent à droite et créent un défilement horizontal de la page.
     « clip » et non « hidden » : l'axe vertical reste visible. */
  overflow-x:clip;
}
/* dans les angles arrondis du bas, c'est le crème du body qui se voyait alors
   que la section suivante (.temo) est rose : on prolonge sa couleur dessous */
.wall::after{
  content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;
  height:clamp(24px,4vw,60px);background:var(--rose-4);
}
.wall__head{display:grid;gap:clamp(12px,1.6vw,22px);justify-items:start;
  margin-bottom:clamp(34px,5vw,80px);max-width:900px}
.wall__title{font-size:clamp(2.2rem,7vw,6rem)}
.wall__title em{color:var(--rose)}
.wall__lead{opacity:.62;max-width:46ch;font-size:clamp(.95rem,1.2vw,1.1rem)}
.wall__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.5vw,26px)}
.tile{margin:0;position:relative;overflow:hidden;border-radius:12px;background:var(--encre-2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),
  filter .6s var(--ease-out);filter:grayscale(.35) contrast(1.05)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.1rem .9rem;
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(21,7,16,.85),transparent);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease-out);
}
.tile:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.05)}
.tile:hover figcaption{opacity:1;transform:translateY(0)}
.tile--a{grid-column:1/5;aspect-ratio:4/5}
.tile--b{grid-column:5/9;aspect-ratio:16/10;align-self:end}
.tile--c{grid-column:9/13;aspect-ratio:3/4}
.tile--d{grid-column:1/4;aspect-ratio:1/1}
.tile--e{grid-column:4/9;aspect-ratio:16/9;align-self:center}
.tile--f{grid-column:9/13;aspect-ratio:5/4}
.tile--g{grid-column:1/6;aspect-ratio:16/10}
.tile--h{grid-column:6/10;aspect-ratio:4/5}
.tile--i{grid-column:10/13;aspect-ratio:1/1;align-self:center}
.tile--j{grid-column:3/10;aspect-ratio:16/9}

/* =====================================================================
   TÉMOIGNAGES
   ===================================================================== */
.temo{
  position:relative;padding:clamp(70px,10vw,170px) var(--pad);
  display:grid;gap:clamp(18px,2.4vw,34px);justify-items:start;
  background:var(--rose-4);
  /* même raison que le mur rose : les cartes entrent décalées de ±70px et
     pivotées ; sans ce clip elles dépassent à droite et ouvrent un
     défilement horizontal sur toute la page (mesuré à 398px pour 390px
     de fenêtre). « clip » et non « hidden » : l'axe vertical reste libre. */
  overflow-x:clip;
  /* panneau sortant de la paire 06 → 07 : sans réserve, « L'agenda » recouvrait
     le dernier témoignage 175px après l'épinglage */
  padding-bottom:max(clamp(70px,10vw,170px),var(--lecture));
}
.temo .sec-tag{color:var(--rose)}
.temo .sec-tag i{background:var(--rose)}
.temo__title{font-size:clamp(2.2rem,6.6vw,5.4rem)}
.temo__title em{color:var(--rose)}
.temo__lead{max-width:64ch;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;opacity:.72}
.temo__grid{
  width:100%;margin-top:clamp(24px,4vw,60px);
  display:grid;gap:clamp(20px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
/* 9 témoignages : 3 colonnes pour trois rangées pleines. En auto-fit, un
   écran large en tenait 4 et laissait une carte seule en dernière ligne. */
@media (min-width:1100px){
  .temo__grid{grid-template-columns:repeat(3,1fr)}
}
.quote{
  margin:0;position:relative;background:var(--creme);border-radius:var(--r);
  padding:clamp(20px,2.4vw,34px);
  /* inclinaison de repos, et repli si le JS ne tourne pas : GSAP lit --rot
     pour finir son entrée sur ce même angle */
  rotate:var(--rot,0deg);
  box-shadow:0 30px 60px -40px rgba(21,7,16,.5);
  transition:box-shadow .5s var(--ease-out);
}
/* Le survol passe par l'ombre et non par rotate/translate : GSAP anime
   maintenant la transformation de la carte et neutralise ces deux propriétés,
   un survol qui s'appuierait dessus n'aurait plus aucun effet. */
.quote:hover{box-shadow:0 44px 74px -34px rgba(21,7,16,.62)}
/* décalage de la colonne du milieu en margin, pour la même raison */
.quote--mid{margin-top:clamp(14px,2.6vw,42px)}
.quote__pic{width:64px;height:64px;border-radius:50%;overflow:hidden;margin-bottom:1.1rem;
  border:3px solid var(--rose-3)}
.quote__pic img{width:100%;height:100%;object-fit:cover}
.quote p{font-family:var(--f-serif);font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.28;letter-spacing:-.015em}
/* la question posée au soignant, au-dessus de sa réponse */
.quote__q,.quote p.quote__q{
  font-family:var(--f-disp);font-style:normal;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(.98rem,1.3vw,1.15rem);line-height:1.2;color:var(--rose);
  margin-bottom:.8rem;
}
/* nom, puis spécialité et établissement sur deux lignes */
.quote cite{display:grid;gap:.15em;margin-top:1.2rem;font-style:normal;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.quote cite b{color:var(--rose);opacity:1;font-size:.9rem}
.quote cite span{font-size:.7rem;letter-spacing:.12em}
.temo__demo{margin-top:clamp(18px,2.4vw,30px);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.42}

/* =====================================================================
   QUIZ (section 07 — a remplacé l'agenda)
   ===================================================================== */
.qz{
  position:relative;padding:clamp(70px,10vw,170px) var(--pad);overflow:hidden;
  /* panneau opaque et arrondi : il glisse par-dessus « Elles racontent » */
  background:var(--creme);
  border-radius:clamp(24px,4vw,60px) clamp(24px,4vw,60px) 0 0;
  /* panneau sortant de la paire 07 → 08 : plus court que la fenêtre, il
     s'épinglerait dès son haut et « Prenez rendez-vous » recouvrirait la
     carte avant qu'on ait fini de jouer */
  padding-bottom:max(clamp(70px,10vw,170px),var(--lecture));
  /* align-content:start : panneau épinglé, la section reçoit de ScrollTrigger
     une hauteur explicite au recalcul. Sans ça, quand la carte du quiz
     rétrécit (volet plus court), les lignes auto de la grille s'étirent pour
     combler la hauteur figée : l'en-tête gonflait et poussait la carte sous la
     barre jusqu'au recalcul suivant. */
  display:grid;gap:clamp(26px,3.6vw,54px);align-content:start;
  /* grid-auto-rows:max-content : épinglée, la section a une hauteur définie
     (inline, posée par ScrollTrigger). Si son contenu déborde, les lignes
     « auto » d'une grille à hauteur définie restent à leur taille minimale :
     la carte retombait à son min-height et le feedback de la question était
     rogné par overflow:hidden. En max-content, la carte garde sa vraie
     hauteur et déborde dans la marge basse (46 svh), jamais rognée. */
  grid-auto-rows:max-content;
}
.qz__head{display:grid;gap:clamp(12px,1.6vw,22px);justify-items:start;max-width:900px}
.qz__title{font-size:clamp(2.2rem,6.6vw,5.4rem)}
.qz__title em{color:var(--rose)}
.qz__lead{font-size:clamp(1rem,1.3vw,1.2rem);opacity:.7;max-width:56ch}

/* La carte : sombre sur la page crème, comme la section des chiffres. Une
   hauteur minimale absorbe la différence de taille entre les volets, sinon
   la page « respirait » à chaque question et déplaçait le footer. */
.qz__card{
  position:relative;z-index:2;width:min(100%,940px);margin:0 auto;
  background:var(--encre);color:var(--creme);border-radius:calc(var(--r) * 1.4);
  padding:clamp(22px,3.4vw,52px);
  box-shadow:0 40px 80px -50px rgba(21,7,16,.7);
  overflow:hidden;
  min-height:clamp(440px,56vh,660px);display:grid;grid-template-rows:auto 1fr;align-content:start;
}
.qz__card::before{
  content:'';position:absolute;right:-22%;top:-42%;width:72%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,31,125,.34),transparent 72%);pointer-events:none;
}
.qz__bar{position:absolute;left:0;top:0;right:0;height:4px;background:rgba(255,245,249,.12)}
.qz__bar i{display:block;height:100%;background:var(--rose);transform:scaleX(0);transform-origin:0 50%}
.qz__top{
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  margin-bottom:clamp(20px,3vw,40px);opacity:0;transition:opacity .5s;
}
.qz__card.is-playing .qz__top{opacity:.72}
.qz__step b,.qz__score b{color:var(--rose);font-family:var(--f-disp);font-size:1.3em;letter-spacing:0}

.qz__pane{position:relative;z-index:1;display:grid;gap:clamp(16px,2.2vw,30px);align-content:start;justify-items:start}
/* la classe pose display:grid et l'emporterait sur le display:none du
   navigateur pour [hidden] : on le repose explicitement */
.qz__pane[hidden]{display:none}

/* ---- accueil ---- */
.qz__intro{align-content:center;padding-right:clamp(0px,16vw,220px)}
.qz__ruban{position:absolute;right:-8%;bottom:-24%;width:clamp(150px,28%,270px);height:auto;opacity:.16;
  rotate:-16deg;pointer-events:none;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.qz__over{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--rose-3)}
.qz__intro-title{font-size:clamp(1.7rem,3.6vw,3.2rem);letter-spacing:-.03em;line-height:1}
.qz__intro-title em{color:var(--rose)}
.qz__txt{opacity:.78;max-width:54ch;line-height:1.55}

/* ---- boutons ---- */
.qz__btn{
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:1em 1.7em;border-radius:99px;border:0;cursor:pointer;
  background:var(--rose);color:#fff;font-family:var(--f-body);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;overflow:hidden;
  /* pas de transition sur opacity : GSAP anime l'entrée du bouton et
     relirait la valeur en cours de transition (0) comme valeur d'arrivée —
     le bouton restait invisible */
  transition:box-shadow .5s var(--ease-out);
}
.qz__btn::before{content:'';position:absolute;inset:0;background:var(--creme);border-radius:99px;
  transform:translateY(101%);transition:transform .55s var(--ease-out)}
.qz__btn span,.qz__btn svg{position:relative;z-index:1;transition:color .4s var(--ease-out)}
.qz__btn svg{width:1.15em;height:1.15em}
  html.souris .qz__btn:hover::before{transform:translateY(0)}
  html.souris .qz__btn:hover span, html.souris .qz__btn:hover svg{color:var(--texte)}
.qz__btn:disabled{opacity:.55;cursor:wait}
.qz__link{
  background:none;border:0;padding:0;cursor:pointer;color:var(--rose-3);
  font-family:var(--f-body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  text-decoration:underline;text-underline-offset:.4em;text-decoration-color:rgba(255,179,209,.45);
  transition:color .3s;
}
.qz__link:hover{color:var(--creme)}

/* ---- question ---- */
.qz__question{font-size:clamp(1.35rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1.08;max-width:28ch}
.qz__opts{width:100%;display:grid;gap:clamp(8px,1vw,12px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.qz__opt{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.9em;text-align:left;
  padding:clamp(12px,1.4vw,18px) clamp(14px,1.6vw,22px);border-radius:16px;
  background:rgba(255,245,249,.06);border:1.5px solid rgba(255,245,249,.14);color:var(--creme);
  font-family:var(--f-body);font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.3;cursor:pointer;
  transition:border-color .35s,background .35s,transform .5s var(--ease-out),opacity .4s;
}
.qz__opt i{font-style:normal;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;
  background:rgba(255,245,249,.1);font-family:var(--f-disp);font-weight:800;font-size:.85em;
  transition:background .35s,color .35s}
  html.souris .qz__opt:not(:disabled):hover{border-color:var(--rose);background:rgba(255,31,125,.12);transform:translateX(4px)}
  html.souris .qz__opt:not(:disabled):hover i{background:var(--rose);color:#fff}
.qz__opt.is-picked{border-color:var(--rose-3)}
.qz__opt:disabled{cursor:default}
.qz__q.is-answered .qz__opt:not(.is-good):not(.is-bad){opacity:.36}
.qz__opt.is-good{border-color:var(--rose);background:var(--rose);color:#fff}
.qz__opt.is-good i{background:#fff;color:var(--rose)}
.qz__opt.is-bad{border-color:var(--orange);background:rgba(240,124,34,.14)}
.qz__opt.is-bad i{background:var(--orange);color:#fff}
.qz__opt.is-bad span{text-decoration:line-through;text-decoration-color:rgba(255,245,249,.55)}

/* ---- correction ---- */
.qz__fb{width:100%;display:grid;gap:.75em;justify-items:start;padding:clamp(16px,2vw,26px);border-radius:18px;
  background:rgba(255,245,249,.06);border-left:4px solid var(--orange)}
.qz__fb.is-ok{border-left-color:var(--rose)}
.qz__fb[hidden]{display:none}
.qz__fb-tag{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.02em;color:var(--orange)}
.qz__fb.is-ok .qz__fb-tag{color:var(--rose)}
.qz__fb-txt{opacity:.85;line-height:1.55;max-width:70ch}
.qz__fb .qz__btn{margin-top:.4em}

/* ---- score ---- */
.qz__end{align-content:center}
.qz__end-score{display:flex;align-items:baseline;gap:.06em;font-family:var(--f-disp);font-weight:800;
  letter-spacing:-.05em;line-height:.9}
.qz__end-score b{font-size:clamp(4.5rem,11vw,9rem);color:var(--rose)}
.qz__end-score s{text-decoration:none;font-size:clamp(2rem,5vw,4rem);opacity:.4;font-weight:400}
.qz__end-score span{font-size:clamp(2rem,5vw,4rem);opacity:.6}
.qz__end-title{font-size:clamp(1.6rem,3.2vw,2.8rem);letter-spacing:-.03em;line-height:1}
.qz__end-acts{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin-top:.4em}

.qz__err{position:relative;z-index:1;margin-top:1em;padding:.8em 1em;border-radius:12px;
  background:rgba(240,124,34,.16);border:1px solid rgba(240,124,34,.5);font-size:.9rem}
.qz__err[hidden]{display:none}
.qz__src{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.42;text-align:center}

/* Flèches en SVG et non en caractère : « ↗ » (U+2197) possède une variante
   emoji, qu'iOS rend par défaut — un carré bleu au lieu du signe typographique.
   currentColor : elles restent alignées sur la couleur du texte porteur. */
.ico-go{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.14em}
.ft__cols a .ico-go{width:.85em;height:.85em;opacity:.8}

/* =====================================================================
   CTA
   ===================================================================== */
.cta{
  position:relative;background:var(--rose);color:var(--creme);
  padding:clamp(80px,12vw,190px) var(--pad);overflow:hidden;text-align:center;
  display:grid;place-items:center;min-height:80svh;
  /* panneau qui remonte par-dessus l'agenda */
  border-radius:clamp(24px,4vw,60px) clamp(24px,4vw,60px) 0 0;
}
.cta__ruban{
  --cw:min(78vw,900px);
  position:absolute;left:calc(50% - var(--cw) * .5);top:calc(50% - var(--cw) * .8);
  width:var(--cw);height:auto;opacity:.22;pointer-events:none;
  /* Le ruban est blanc dès le fichier (ruban-blanc.webp) : il l'était
     auparavant par brightness(0) invert(1), un filtre recalculé alors même
     que l'image tourne au scrub. Ne restent que les ombres portées, qui le
     décollent de l'aplat — et elles sautent au doigt. */
  filter:drop-shadow(0 26px 44px rgba(105,0,44,.55))
         drop-shadow(0 2px 6px rgba(105,0,44,.35));
}
.cta__inner{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(16px,2vw,30px)}
.cta__over{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  opacity:.85}
.cta__title{font-size:clamp(2.6rem,11vw,10rem);line-height:.82;letter-spacing:-.05em;
  display:grid;gap:0}
/* Le masque de SplitText est en overflow:clip, calé sur la boîte de ligne. Or
   avec un letter-spacing négatif la dernière lettre déborde de sa boîte : le S
   de RENDEZ-VOUS se faisait raser. On élargit la zone de clip à gauche et à
   droite, et on annule l'élargissement en marge pour ne rien décaler. Le clip
   vertical, lui, reste serré : c'est lui qui porte la révélation. */
.cta__title .cline-mask{padding-inline:.09em;margin-inline:-.09em}
.cta__title span:nth-child(2){color:var(--texte)}
.cta__btn{
  position:relative;display:inline-grid;place-items:center;
  padding:clamp(1.1em,1.6vw,1.5em) clamp(2em,3vw,3.2em);border-radius:99px;
  background:var(--creme);color:var(--texte);overflow:hidden;
  font-size:clamp(.82rem,1.05vw,.95rem);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;will-change:transform;
}
.cta__btn::before{
  content:'';position:absolute;inset:0;background:var(--encre);border-radius:99px;
  transform:translateY(101%);transition:transform .55s var(--ease-out);
}
.cta__btn span{position:relative;z-index:2;transition:color .4s var(--ease-out)}
.cta__btn:hover::before{transform:translateY(0)}
.cta__btn:hover span{color:var(--creme)}
.cta__txt{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.55;max-width:58ch;opacity:.92}
.cta__small{font-size:.8rem;opacity:.8;max-width:70ch}
/* La signature l'emporte sur la règle globale em{} (serif italique). Taille en
   clamp et non en em : le .8rem du parent la rendait minuscule et figée. */
.cta__small em{font-family:var(--f-sign);font-style:normal;letter-spacing:0;
  font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.2;opacity:1}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* z-index au-dessus de .stack-in (10) : sans lui le CTA, devenu panneau
   entrant, passerait devant le footer et masquerait sa vague */
.ft{position:relative;z-index:11;background:var(--encre);color:var(--creme);
  padding:clamp(50px,7vw,110px) var(--pad)
  clamp(24px,3vw,44px);display:grid;gap:clamp(34px,5vw,70px)}
/* posé au-dessus du footer, hors de son flux : il déborde sur le CTA, dont
   l'overflow:hidden ne le clippe pas puisqu'il n'en est pas un descendant */
.ft__wave{
  /* bottom:100% ferait coïncider son bord bas avec le haut du footer, au pixel
     près : l'arrondi sous-pixel laissait alors passer un trait du rose du CTA
     à la jointure. Elle mord donc d'un pixel dans le footer. */
  position:absolute;left:0;right:0;bottom:calc(100% - 1px);
  width:100%;height:clamp(90px,13vw,200px);display:block;
  pointer-events:none;overflow:visible;
}
.ft__wave path{fill:var(--encre)}
.ft__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,50px)}
.ft__logo{height:clamp(80px,4vw,100px);width:auto}
.ft__claim{font-family:var(--f-disp);font-size:clamp(1.2rem,2.6vw,2.4rem);line-height:1.05;
  letter-spacing:-.035em;text-align:right}
.ft__claim b{color:var(--rose)}
.ft__cols{display:grid;gap:clamp(22px,3vw,50px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid rgba(255,179,209,.18);padding-top:clamp(24px,3vw,44px)}
.ft__cols h4{font-family:var(--f-body);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose);margin-bottom:1rem}
.ft__cols a{display:block;padding:.35em 0;opacity:.68;transition:opacity .3s,transform .35s var(--ease-out)}
.ft__cols a:hover{opacity:1;transform:translateX(5px)}
/* Bas de footer : identité de l'éditeur + accès aux documents légaux.
   L'opacité reste basse sur la mention d'identité (c'est de la mention, pas
   de la lecture), mais surtout pas sur les liens : mentions légales, CGU,
   confidentialité et RGPD doivent se voir et se cliquer depuis n'importe
   quelle page — c'est ce qu'un contrôle vient y chercher. */
/* L'opacité n'est plus posée sur le bloc mais sur chaque paragraphe : un
   enfant ne peut pas remonter au-dessus de l'opacité de son parent, et les
   liens doivent rester pleins. */
.ft__legal{border-top:1px solid rgba(255,179,209,.18);padding-top:clamp(18px,2.4vw,30px);
  display:grid;gap:.7rem;font-size:.74rem;line-height:1.6}
.ft__legal p{color:rgba(255,245,249,.5)}
.ft__legal a{text-decoration:underline;text-underline-offset:3px;color:var(--creme)}
.ft__legal b{color:rgba(255,245,249,.75)}
.ft__legal-liens{display:flex;flex-wrap:wrap;gap:.35em 1.5rem;font-size:.82rem}
.ft__legal-liens a{font-weight:600;transition:color .3s}
.ft__legal-liens a:hover{color:var(--rose-3)}

/* =====================================================================
   PANNEAUX EMPILÉS
   La section sortante est épinglée et rétrécit pendant que la suivante
   remonte par-dessus. L'ombre du panneau entrant est posée directement
   sur l'élément : surtout pas via ::before, que .nums utilise déjà pour
   son halo (un seul pseudo par élément — la seconde règle l'écraserait).
   ===================================================================== */
/* Pas de will-change ici : le recul promeut lui-même la section, mais
   seulement le temps de la traversée (voir initStack). Posé en permanence,
   il immobiliserait trois sections entières en mémoire GPU d'un bout à
   l'autre de la page. */
.stack-out{position:relative;transform-origin:50% 42%}
.stack-in{
  position:relative;z-index:10;
  /* 1px de recouvrement sur la section précédente : entre un bloc épinglé
     (déplacé par transformation) et le panneau qui monte, l'arrondi
     sous-pixel peut laisser un interstice où le crème de la page transparaît
     — ça se voit comme un trait blanc qui clignote au défilement */
  margin-top:-1px;
  /* Un liseré rose net dessine le bord du panneau, et une ombre rosée très
     douce le décolle. Sur la paire 06→07 les deux sections sont presque de
     la même couleur : sans ce trait, l'arête n'existe pas. */
  box-shadow:0 -1.5px 0 0 rgba(255,31,125,.32),
             0 -14px 34px -22px rgba(209,0,94,.32);
}

/* =====================================================================
   VISIONNEUSE (zoom des photos « sur le terrain »)
   ===================================================================== */
.lb{
  position:fixed;inset:0;z-index:900;display:grid;place-items:center;
  padding:clamp(16px,4vw,58px);visibility:hidden;pointer-events:none;
  overflow:hidden;   /* la photo qui glisse ne doit pas déborder de l'écran */
}
.lb.is-open{visibility:visible;pointer-events:auto}
/* un flyer seul dans son groupe : rien vers quoi naviguer */
.lb.lb--solo .lb__nav{display:none}
.lb__veil{
  position:absolute;inset:0;opacity:0;cursor:zoom-out;
  background:radial-gradient(120% 90% at 50% 40%,rgba(37,16,28,.82),rgba(21,7,16,.94));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lb__fig{
  position:relative;margin:0;max-width:min(1180px,92vw);
  display:grid;gap:22px;justify-items:center;
}
.lb__img{
  display:block;width:auto;height:auto;
  /* un peu de marge : inclinée, la photo occupe plus que sa boîte droite */
  max-width:min(1140px,88vw);max-height:74svh;
  border-radius:10px;object-fit:cover;
  border:4px solid var(--creme);
  box-shadow:0 0 0 7px rgba(255,245,249,.10),
             0 60px 120px -46px rgba(0,0,0,.95);
}
.lb__cap{
  display:grid;gap:.25rem;text-align:center;color:var(--creme);
  font-size:.84rem;line-height:1.45;
}
.lb__cap b{
  font-family:var(--f-disp);font-size:clamp(1rem,1.5vw,1.35rem);
  letter-spacing:-.02em;font-weight:800;
}
.lb__cap span{opacity:.6}
.lb__close,.lb__nav{
  position:absolute;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  width:clamp(42px,3.6vw,54px);height:clamp(42px,3.6vw,54px);border-radius:50%;
  background:rgba(255,245,249,.12);color:var(--creme);opacity:0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color .3s,transform .35s var(--ease-out);
}
.lb__close:hover,.lb__nav:hover{background:var(--rose)}
.lb__close svg,.lb__nav svg{width:44%;height:44%}
.lb__close{top:clamp(14px,2.4vw,32px);right:clamp(14px,2.4vw,32px)}
.lb__nav{top:50%;margin-top:-27px}
.lb__nav--prev{left:clamp(10px,2vw,30px)}
.lb__nav--next{right:clamp(10px,2vw,30px)}
.lb__nav--prev:hover{transform:translateX(-3px)}
.lb__nav--next:hover{transform:translateX(3px)}
/* Voile des longs sauts (voir defilerVers dans site.js) : au-dessus de
   tout sauf de la visionneuse, dans l'encre des panneaux du menu. Levé
   par le script (autoAlpha), jamais cliquable. */
.voile{position:fixed;inset:0;z-index:890;background:var(--encre);opacity:0;visibility:hidden;pointer-events:none}

@media (max-width:760px){
  .lb__nav{top:auto;bottom:clamp(12px,4vw,26px);margin-top:0}
  .lb__img{max-height:64svh}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .hero__ruban{--rw:clamp(180px,34vw,300px);right:-6vw;opacity:.8}
  .float--3{display:none}
  .rail{display:none}
  .step{position:relative;left:auto;top:auto;translate:0 0;width:auto}
  .path__steps{display:grid;gap:14px;min-height:0}
  .path__svg{opacity:.35}
  .path__pin{min-height:0;padding-bottom:clamp(50px,8vw,90px)}
  .tile--a{grid-column:1/7;aspect-ratio:4/5}
  .tile--b{grid-column:7/13;aspect-ratio:4/5}
  .tile--c{grid-column:1/7;aspect-ratio:1/1}
  .tile--d{grid-column:7/13;aspect-ratio:1/1}
  .tile--e{grid-column:1/13;aspect-ratio:16/9}
  .tile--f{grid-column:1/7;aspect-ratio:4/5}
  .tile--g{grid-column:7/13;aspect-ratio:4/5}
  .tile--h{grid-column:1/7;aspect-ratio:1/1}
  .tile--i{grid-column:7/13;aspect-ratio:1/1}
  .tile--j{grid-column:1/13;aspect-ratio:16/9}
}

@media (max-width:760px){
  .hdr__cta{display:none}
  .hdr__tag i{display:none}
  .hero{min-height:92svh}
  .hero__l2{margin-left:0}
  .hero__sub{max-width:26ch}
  /* les deux vignettes passent sous le bloc de texte, jamais dessus */
  .float--1{left:auto;right:4vw;bottom:8vh;width:100px}
  .float--2{width:80px;top:auto;bottom:4vh;left:4vw;right:auto}
  .badge{width:74px;left:auto;right:4vw;bottom:auto;top:calc(var(--pad) + 66px)}
  .card{height:min(58svh,460px)}
  .marq__band--fill{rotate:-3.4deg}
  .marq__band--line{rotate:2.6deg}
  .num--offset{translate:0 0}
  .num{rotate:0deg}
  .clin__pin{min-height:0;padding-top:clamp(50px,12vw,90px)}
  .clin__track{
    width:auto;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    transform:none !important;
  }
  .clin__track::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:center;rotate:0deg;translate:0 0;width:min(74vw,300px)}
  .card--end{width:min(60vw,240px)}
  .clin__ghost{font-size:22vw;top:2vh}
  .menu__list span{font-size:clamp(1.9rem,8.6vw,3rem)}
  .menu__list i{width:1.9em;font-size:.64rem}
  /* pas d'empilement 07 → 08 au téléphone (voir initStack dans site.js) :
     la réserve de lecture (--lecture) sous le quiz n'a plus lieu d'être */
  .qz{padding-bottom:clamp(70px,10vw,170px)}
  .qz__card{min-height:0;padding:22px 18px 26px}
  .qz__intro{padding-right:0}
  .qz__ruban{display:none}
  .qz__top{font-size:.64rem;letter-spacing:.14em}
  .ft__claim{text-align:left}
  .quote--mid{translate:0 0}
  .quote{rotate:0deg}
  .affiche,.flyer{--rot:0deg}
  .cta__btn{font-size:.72rem;padding:1.1em 1.6em;text-align:center}
}

@media (max-width:420px){
  .hero__over{font-size:.64rem;letter-spacing:.14em}
}

/* =====================================================================
   ALLÈGEMENT TACTILE
   Tout ce qui, sur un GPU de téléphone, se paie à chaque image de
   défilement : fusion de calques, flous d'arrière-plan, grandes ombres
   portées, filtres d'image. Le rendu reste le même à l'œil ; c'est le
   coût de peinture qui tombe.
   ===================================================================== */
@media (hover:none) and (pointer:coarse){
  /* backdrop-filter = relecture puis flou de tout ce qui se trouve derrière,
     recalculés dès que le fond bouge — c'est-à-dire à chaque frame de scroll.
     On repasse sur des fonds opaques, indiscernables sur ces éléments. */
  .step{background:#2a1220;backdrop-filter:none}
  .card__zoom{background:rgba(21,7,16,.82);backdrop-filter:none;-webkit-backdrop-filter:none}
  .cmp__tag{backdrop-filter:none;-webkit-backdrop-filter:none}
  .cmp__tag--b{background:rgba(21,7,16,.72)}
  .lb__veil{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:radial-gradient(120% 90% at 50% 40%,rgba(37,16,28,.94),rgba(21,7,16,.98))}
  .lb__close,.lb__nav{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(255,245,249,.18)}

  /* Ombres très étalées : leur surface est repeinte à chaque changement
     d'échelle ou de position. Rayons réduits, même lecture. */
  .card{box-shadow:0 16px 26px -20px rgba(0,0,0,.85)}
  .affiche__pic{box-shadow:0 18px 30px -22px rgba(21,7,16,.7),0 0 0 1px rgba(21,7,16,.06)}
  .flyer__pic{box-shadow:0 20px 34px -24px rgba(0,0,0,.95),0 0 0 4px var(--creme)}
  .qz__card{box-shadow:0 20px 34px -28px rgba(21,7,16,.7)}
  .qz__ruban{filter:none}
  .quote{box-shadow:0 14px 26px -20px rgba(21,7,16,.5)}
  .quote:hover{box-shadow:0 14px 26px -20px rgba(21,7,16,.5)}
  .lb__img{box-shadow:0 0 0 5px rgba(255,245,249,.10),0 24px 48px -28px rgba(0,0,0,.95)}
  .marq__band--fill{box-shadow:none}

  /* Le ruban du CTA tourne au scroll : sans filtre du tout, sa rotation est
     une simple composition. Avec, il serait refait à chaque image — sur une
     image de 78vw de large. */
  .cta__ruban{filter:none;opacity:.18}

  /* Même chose pour celui du hero, en pire : il flotte en boucle (rotation,
     translation, échelle) tant que la section est à l'écran. Le drop-shadow
     serait donc recalculé à chaque image, en permanence, dès l'arrivée. */
  .hero__ruban-img{filter:none}

  /* Le trait balaie tout l'écran pendant le scrub : sa lueur de 30px est
     repeinte à chaque position. */
  .cmp__line{box-shadow:0 0 12px 2px rgba(255,31,125,.55)}

  /* Ces calques restent promus en permanence, même hors écran, et
     immobilisent d'autant de mémoire GPU. GSAP les promeut lui-même le
     temps de l'animation. */
  /* Seul le bouton magnétique est concerné : son effet est réservé au
     pointeur fin, le calque ne sert donc à rien au doigt. En revanche le
     bandeau et le titre de fond des cliniques sont déplacés en continu — les
     dépromouvoir les faisait repeindre à chaque image au lieu d'être
     simplement recomposés. C'était une erreur de la passe d'optimisation. */
  .cta__btn{will-change:auto}
}

/* ---------- ACCESSIBILITÉ / MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  /* sans pin ni scrub, les jalons du parcours ne peuvent plus être posés
     en absolu le long du tracé : on repasse en pile lisible */
  .step{position:relative;left:auto;top:auto;translate:0 0;width:auto}
  .path__steps{display:grid;gap:14px;min-height:0}
  .path__svg{opacity:.3}
  .path__pin{min-height:0;padding-bottom:clamp(50px,8vw,90px)}
  .clin__pin{min-height:0}
  .clin__track{overflow-x:auto;width:auto}
  .card{rotate:0deg;translate:0 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .grain{animation:none}
  .mani__text .w{opacity:1 !important}
  .marq__row{transform:none !important}
}

/* focus visible propre */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--rose);outline-offset:4px;border-radius:6px;
}

#rdv{ border-bottom: 0px !important;}