/* Kalmy, landing de test. Monde « Primal Wellness » : crème, orange, périwinkle,
   encre brune. Quicksand pour les titres et les chiffres (la police ronde du
   hero, partout), Poppins pour le corps, DM Mono pour les petites étiquettes.
   Bricolage ne sert qu'à imiter autre chose (la plateforme concurrente, la
   bannière du back-office), Fraunces qu'au wordmark de Maison Iris. */

:root{
  --canvas:#fbeedb;         /* la crème Kalmy, tirée un rien vers le grade de la vidéo */
  --panel:#fffaf1;
  --panel-deep:#f5e2c6;
  --accent:#fa5109;
  --accent-hover:#d63f04;
  --accent-muted:#ffd9c7;
  --calm:#6e84c7;
  --calm-deep:#4f65a8;
  --calm-muted:#d8def2;
  --rose:#ffbdc5;
  --rose-deep:#f79a85;
  --text-secondary:#5c4436;
  --text-primary:#331a0f;
  --hairline:rgba(51,26,15,.14);
  --border-strong:rgba(51,26,15,.34);
  --font-display:"Quicksand","Poppins",system-ui,sans-serif;
  --font-heading:"Quicksand","Poppins",system-ui,sans-serif;
  --font-autre:"Bricolage Grotesque","Poppins",sans-serif;  /* ce qui imite autre chose que Kalmy */
  --font-chiffres:"Bricolage Grotesque","Poppins",sans-serif;  /* les grands nombres : prix, statistiques */
  --font-body:"Poppins",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --tshadow-clair:0 1px 2px rgba(252,239,220,.9),0 3px 14px rgba(252,239,220,.75),0 10px 44px rgba(252,239,220,.8);
}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);
  color:var(--text-primary);
  font:400 17px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .6s var(--ease-soft);
}
body.prete{opacity:1}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}

.skip{position:absolute;left:-999px;top:8px;background:var(--text-primary);color:var(--canvas);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

:focus-visible{outline:3px solid var(--calm);outline-offset:3px;border-radius:6px}

/* Le fond vivant : des poussières qui dérivent derrière toute la page, comme dans le rai de lumière de la vidéo. */
.poussieres{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--font-body);text-decoration:none;
  padding:14px 22px;border-radius:999px;border:1.5px solid var(--border-strong);
  color:var(--text-primary);background:var(--panel);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s;
  text-shadow:none;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(51,26,15,.45)}
/* La réassurance DANS le bouton. Posée en dessous, elle suivait le lien
   secondaire et avait l'air de s'y rapporter ; et elle ajoutait une ligne à un
   bloc ancré par le bas, ce qui poussait tout le héros vers le haut. */
.btn--note{flex-direction:column;gap:2px;line-height:1.1}
.btn--note small{font:500 11px/1 var(--font-body);opacity:.78;letter-spacing:.01em}
.btn--accent{background:var(--accent);border-color:var(--accent);color:#fff5ea}
.btn--accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--grand{padding:18px 28px;font-size:16px}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:40;box-sizing:border-box;
  display:flex;align-items:center;gap:28px;
  padding:14px clamp(16px,4vw,48px);border-radius:0;
  color:#fff8ef;
  transition:background .5s,box-shadow .5s,color .4s,width .8s cubic-bezier(.34,1.56,.64,1),top .8s cubic-bezier(.34,1.56,.64,1),padding .8s cubic-bezier(.34,1.56,.64,1),border-radius .8s cubic-bezier(.34,1.56,.64,1);
  will-change:width,transform;
}
.nav .nav__liens a,.nav .nav__connexion{text-shadow:0 1px 10px rgba(0,0,0,.35)}
/* La bulle : une fois le hero quitté, la barre se resserre en pilule, avec un rebond chewing-gum */
.nav.sol{top:12px;width:min(92vw,1040px);padding:8px 10px 8px 20px;border-radius:999px;color:var(--text-primary);
  background:rgba(251,238,219,.84);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 18px 40px -20px rgba(51,26,15,.45),0 0 0 1px rgba(51,26,15,.08),inset 0 1px 0 rgba(255,255,255,.7);
  animation:bulle .9s cubic-bezier(.34,1.56,.64,1)}
.nav.sol .nav__liens a,.nav.sol .nav__connexion{text-shadow:none}
.nav.retour{animation:barre .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes bulle{0%{transform:translateX(-50%) scale(1,1)}35%{transform:translateX(-50%) scale(1.05,.86)}60%{transform:translateX(-50%) scale(.98,1.06)}80%{transform:translateX(-50%) scale(1.01,.98)}100%{transform:translateX(-50%) scale(1,1)}}
@keyframes barre{0%{transform:translateX(-50%) scale(.97,1.06)}55%{transform:translateX(-50%) scale(1.01,.96)}100%{transform:translateX(-50%) scale(1,1)}}
.nav__logo{display:inline-flex;color:var(--calm);transition:color .4s}
.nav.sol .nav__logo{color:var(--text-primary)}
.nav__liens{display:flex;gap:22px;margin-left:8px;font-size:14px;font-weight:500}
.nav__liens a{text-decoration:none;opacity:.8;transition:opacity .3s}
.nav__liens a:hover{opacity:1}
.nav__connexion{margin-left:auto;font-size:14px;font-weight:500;opacity:.8;text-decoration:none;white-space:nowrap;padding:8px 14px;border-radius:999px;transition:opacity .3s,background .3s}
.nav__connexion:hover{opacity:1;background:rgba(255,255,255,.12)}
.nav.sol .nav__connexion:hover{background:rgba(51,26,15,.06)}
.nav__cta{margin-left:6px;padding:11px 18px;font-size:14px}
.nav__cta-court{display:none}
@media (max-width:720px){.nav{gap:10px}.nav__logo svg{width:74px;height:34px}.nav__connexion{font-size:13px;padding:8px 6px}.nav__cta{padding:10px 14px;font-size:13px;white-space:nowrap}.nav__cta-long{display:none}.nav__cta-court{display:inline}}
.nav.sol .nav__cta{padding:10px 16px}
@media (prefers-reduced-motion:reduce){.nav,.nav.sol,.nav.retour{animation:none;transition:none}}
@media (max-width:1240px){.nav__liens{gap:14px;font-size:13px}.nav.sol .nav__liens{gap:12px;font-size:12.5px}.nav__cta{padding:10px 14px;font-size:13px}.nav.sol .nav__cta{padding:9px 13px;font-size:12.5px}}
/* Le seuil est celui de la barre RESSERRÉE (`.nav.sol`, plafonnée à 1180 px),
   pas celui de la barre déployée : c'est elle qui déborde la première, et
   elle est la seule visible dès qu'on a quitté le héros. Sept liens plus un
   CTA de vingt-sept caractères y tiennent à partir de 1260 px seulement ;
   en dessous, « Pourquoi Kalmy » et « FAQ » cèdent la place. */
@media (max-width:1260px){.nav__liens a:nth-child(1),.nav__liens a:nth-child(7){display:none}}
@media (max-width:1040px){.nav__liens{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;height:520vh;z-index:1}
.hero--v2{height:1040vh}
.hero--v3{height:820vh}
.stage{
  position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  background:#2a1d17;isolation:isolate;
}
.poster,#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.poster{background-size:cover;background-position:50% 50%}
#hero-video{opacity:0;transition:opacity .8s var(--ease-soft);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

/* La dalle : un rectangle de 1440x800 unités projeté sur l'écran par matrix3d.
   Le fondu multiply la cache naturellement derrière les cheveux et le haut noir. */
.ecran-monde{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:multiply}
.ecran{position:absolute;left:0;top:0;width:1440px;height:800px;transform-origin:0 0;overflow:hidden;background:#fbf7ec;will-change:transform;backface-visibility:hidden}
.ecran__site,.ecran__bo{position:absolute;inset:0;transition:none}
.ecran__bo{opacity:0}

.scrim{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(20,12,8,0) 40%,rgba(20,12,8,.42) 100%)}

/* ---------- Bandes ---------- */
.band{position:absolute;z-index:5;opacity:0;pointer-events:none;will-change:opacity}
.band--1,.band--2{left:clamp(20px,6vw,96px);top:clamp(96px,18vh,190px);width:min(46vw,760px)}
.band--1{text-shadow:var(--tshadow-clair)}
.band--2{text-shadow:var(--tshadow-clair)}
/* Un voile clair local derrière les titres sombres, qui aplanit le mur ensoleillé. */
.band--1::before,.band--2::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 72% 66% at 42% 50%,rgba(252,240,222,.80) 0%,rgba(252,240,222,.55) 46%,rgba(252,240,222,0) 76%)}
.titre-hero{font:700 clamp(48px,7.4vw,112px)/1 var(--font-display);letter-spacing:-.01em;color:var(--text-primary)}
.titre-hero--2{font:600 clamp(30px,3.8vw,58px)/1.12 var(--font-display);letter-spacing:0}

.band--chip{left:0;top:0;transform:translate(var(--cx,60vw),var(--cy,20vh))}
.chip{display:inline-block;font:500 13px/1.2 var(--font-mono);letter-spacing:.02em;color:#fff5ea;
  background:rgba(30,18,12,.62);border:1px solid rgba(252,240,222,.28);border-radius:10px;padding:9px 12px;
  backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}

.band--5{left:clamp(20px,6vw,96px);bottom:clamp(28px,8vh,90px);width:min(36vw,520px);color:#fff5ea;text-shadow:var(--tshadow)}
.band--5-haut{left:auto;right:clamp(20px,5vw,80px);bottom:auto;top:clamp(84px,11vh,120px);width:min(40vw,560px);color:var(--text-primary);text-shadow:var(--tshadow-clair)}
.band--5-haut::before{background:radial-gradient(ellipse 76% 70% at 54% 50%,rgba(252,240,222,.86) 0%,rgba(252,240,222,.62) 46%,rgba(252,240,222,0) 78%)}
.band--5-haut .lien-clair{color:var(--text-primary)}
.band--5::before{content:"";position:absolute;inset:-18% -14%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 66% at 46% 54%,rgba(20,12,8,.70) 0%,rgba(20,12,8,.46) 46%,rgba(20,12,8,0) 76%)}
.sous-titre{font:400 clamp(15px,1.25vw,19px)/1.55 var(--font-body)}
.band__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px;pointer-events:auto}
.lien-clair{color:#fff5ea;font-size:14px;font-weight:500;text-underline-offset:4px}
.band.active{pointer-events:auto}

/* Chorégraphie : mots qui se posent (bande 1, punch avec dépassement ; bande 2, approche ; bande 5, montée en trois temps). */
.band .w{display:inline-block;white-space:pre}
.band--1 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - .12)*2.8,1);
  opacity:var(--kc);transform:scale(calc(.6 + (.4 + .16)*var(--kc) - .16*var(--ks)))}
.band--2 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:scale(calc(.86 + .14*var(--kc))) translateY(calc((1 - var(--kc))*10px))}
.band--5 .sous-titre{opacity:clamp(0,(var(--k,0) - .1)*2.2,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .1)*2.2,1))*18px))}
.band--5 .band__cta{opacity:clamp(0,(var(--k,0) - .45)*3,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .45)*3,1))*18px))}

/* ---------- Notifications ---------- */
.notifs{position:absolute;inset:0;z-index:6;pointer-events:none}
.notifs--repos .notif{--z:1;padding:0 calc(18px*var(--z));gap:calc(14px*var(--z));border-radius:calc(16px*var(--z));box-sizing:border-box}
.notifs--repos .notif b{font-size:calc(17px*var(--z))}
.notifs--repos .notif span{font-size:calc(13.5px*var(--z));margin-top:calc(3px*var(--z))}
.notifs--repos .notif em{font-size:calc(16px*var(--z))}
.notifs--repos .notif__ico{width:calc(42px*var(--z));height:calc(42px*var(--z));border-radius:calc(12px*var(--z))}
.notifs--repos .notif__ico::after{inset:calc(11px*var(--z))}
.notif{
  position:absolute;display:flex;align-items:center;gap:12px;
  width:min(340px,27vw);padding:12px 14px;border-radius:14px;
  background:#fffaf1;border:1px solid rgba(51,26,15,.16);
  box-shadow:0 14px 34px -12px rgba(51,26,15,.55),0 2px 0 rgba(51,26,15,.08);
  color:var(--text-primary);
  transform-origin:0 50%;
  opacity:var(--o,0);
  transform:translate(var(--x,0px),var(--y,0px)) scale(var(--s,.5)) rotate(var(--r,0deg));
  will-change:transform,opacity;
}
.notif>div{flex:1;min-width:0}  /* sinon le bloc de texte refuse de rétrécir et pousse le montant hors de la carte */
.notif b{display:block;font:700 15px/1.15 var(--font-heading)}
.notif span{display:block;font:400 12.5px/1.3 var(--font-body);color:var(--text-secondary);margin-top:3px}
.notif em{margin-left:auto;font:500 14px/1 var(--font-mono);font-style:normal;color:var(--text-primary);white-space:nowrap}
.notif__ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--accent-muted);position:relative}
.notif__ico::after{content:"";position:absolute;inset:10px;border-radius:4px;background:var(--accent);opacity:.9}
.notif--boutique .notif__ico{background:var(--calm-muted)}
.notif--boutique .notif__ico::after{background:var(--calm);border-radius:50%}
.notif--cadeau .notif__ico{background:#ffe1e5}
.notif--cadeau .notif__ico::after{background:var(--rose-deep);border-radius:2px;transform:rotate(45deg)}

/* Un cue de défilement, avec l'anneau de chargement dedans. */
/* Le repère de défilement est posé SUR la vidéo : il se lit en blanc, jamais
   dans l'encre de la page, et l'arc de progression suit (il est en
   `currentColor`). Un peu plus haut que le bord, pour ne pas se confondre avec
   la barre de navigation du téléphone. */
.cue{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;
  color:#fff8ef;font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.85;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
  transition:opacity .4s}
.stage.cue-off .cue{opacity:0}
.ring{width:26px;height:26px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .2s linear}
.chevron{width:14px;height:14px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:chevron 2.4s var(--ease-soft) infinite;animation-delay:-1.2s}
@keyframes chevron{0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.5}50%{transform:translateY(3px) rotate(45deg);opacity:1}}
@media (max-height:560px){.cue{display:none}}

/* ---------- Hero statique ---------- */
.hero-static{display:none;padding:110px clamp(16px,5vw,48px) 40px;position:relative;z-index:1}
.hero-static__titre{font:600 clamp(38px,9.5vw,64px)/1.02 var(--font-display);letter-spacing:-.02em}
.hero-static__titre span{display:block;font:500 clamp(21px,5.2vw,34px)/1.2 var(--font-display);margin-top:14px;letter-spacing:-.01em}
.hero-static__sous{margin-top:18px;font-size:16px;color:var(--text-secondary);max-width:56ch}
.hero-static__cta{margin-top:22px}
/* « Sans carte bancaire » sous les CTA de milieu et de fin de page. Dans les
   deux héros, elle vit DANS le bouton (`.btn--note`) : posée dessous, elle
   suivait le lien secondaire et ajoutait une ligne à un bloc ancré par le bas. */
.cta-rassure{margin-top:10px;font-size:13.5px;color:var(--text-secondary)}
/* Les deux CTA de MILIEU de page : après les trois étapes, et après les avis.
   Treize mille pixels séparaient la fin du héros des tarifs, soit seize écrans
   sans un seul bouton, et c'est justement là que la page convainc. Centrés et
   isolés, pour qu'ils se lisent comme une respiration et non comme un encart
   publicitaire collé au bas d'une section. */
.cta-section{margin-top:clamp(32px,4vw,52px);display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-section .cta-rassure{margin-top:12px}
.hero-static__fig{position:relative;margin:34px 0 0;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(51,26,15,.55);isolation:isolate}
.hero-static__fig img{width:100%}
.ecran-monde--static{position:absolute;inset:0}
.notifs--static .notif{width:340px}

/* ---------- Sections ---------- */
.sec{position:relative;z-index:1;padding:clamp(72px,10vw,140px) clamp(16px,5vw,48px)}
.sec__in{max-width:1180px;margin:0 auto}
.kicker{font:600 11px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.h2{font:600 clamp(30px,4vw,54px)/1.08 var(--font-display);letter-spacing:-.02em;max-width:22ch}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;max-width:62ch;color:var(--text-primary)}
.lede--2{margin-top:18px;color:var(--text-secondary)}
.lede strong{font-weight:600;color:var(--text-primary)}
.a-valider{margin-top:10px;font:500 11px/1.2 var(--font-mono);color:var(--calm-deep);letter-spacing:.04em;text-transform:uppercase}

/* Le problème : une liste de plaintes, en deux colonnes, sur fond crème profond */
.sec--probleme{background:linear-gradient(180deg,var(--canvas) 0%,var(--panel-deep) 100%)}

/* La solution : intro à gauche, trois étapes le long d'un fil qui se dessine */
.sec--solution .sec__in{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(36px,5vw,80px);align-items:start}
.etapes{position:relative;padding-left:52px;display:grid;gap:36px}
.etapes__fil{position:absolute;left:19px;top:14px;width:4px;height:calc(100% - 28px)}
.etapes__fil path{stroke:var(--accent);stroke-width:3;fill:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--trace,0));stroke-linecap:round}
.etape{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.etape__num{position:absolute;left:-52px;top:-2px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--panel);border:1.5px solid var(--accent);color:var(--accent);font:700 15px/1 var(--font-heading)}
.etape h3{font:700 clamp(19px,1.6vw,22px)/1.2 var(--font-heading)}
.etape p{margin-top:8px;color:var(--text-secondary);font-size:15.5px}
.etape>div{grid-column:2}
@media (max-width:1000px){.sec--solution .sec__in{grid-template-columns:1fr}.sec--solution .maquette-etape{max-width:560px}}
@media (max-width:860px){.etapes{padding-left:44px}.etape__num{left:-44px;width:34px;height:34px}.etapes__fil{left:16px}}
.sec--solution .sec__in>*{min-width:0}
/* La section est une GRILLE à deux colonnes (le texte à gauche, les étapes
   à droite) : posé tel quel, le bouton se centrait dans la colonne de
   gauche, sous du vide. Il traverse les deux. */
.sec--solution .cta-section{grid-column:1 / -1}
.etape>div{min-width:0}
.maquette-etape{max-width:100%}

/* Fonctionnalités : mosaïque, la première carte plus large avec le moment interactif */
.sec--fonctions{background:var(--panel-deep)}
.benefices{margin-top:56px;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.benefice{grid-column:span 4;background:var(--panel);border:1px solid var(--hairline);border-radius:20px;padding:28px;box-shadow:0 2px 0 rgba(51,26,15,.05)}
.benefice--large{grid-column:span 8;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.benefice--large>.tenir{grid-row:1/3;grid-column:2}
.benefice--accent{background:var(--text-primary);color:var(--canvas);border-color:transparent}
.benefice--accent h3{color:var(--panel)}
.benefice h3{font:600 clamp(19px,1.5vw,22px)/1.2 var(--font-display);letter-spacing:-.01em}
.benefice p{margin-top:10px;color:var(--text-secondary);font-size:15px}
.benefice--accent p{color:var(--panel-deep)}
@media (max-width:1000px){.benefice{grid-column:span 6}.benefice--large{grid-column:span 12}}
@media (max-width:640px){.benefice,.benefice--large{grid-column:span 12;grid-template-columns:1fr}.benefice--large>.tenir{grid-row:auto;grid-column:1}}

/* Le moment interactif : maintenir pour changer les couleurs du site fictif */
.tenir{display:grid;gap:12px}
.tenir__site{position:relative;aspect-ratio:1440/800;border-radius:12px;overflow:hidden;border:1px solid var(--hairline);background:#fbf7ec;box-shadow:0 18px 40px -22px rgba(51,26,15,.5)}
.ecran--mini{transform-origin:0 0}
.btn--tenir{position:relative;overflow:hidden;justify-content:center;width:100%;user-select:none;-webkit-user-select:none;touch-action:none}
.btn--tenir__jauge{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent-muted);transform-origin:0 50%;transform:scaleX(var(--j,0));z-index:0}
.btn--tenir>span:last-child{position:relative;z-index:1}
.tenir__note{font-size:13px;color:var(--text-secondary)}

/* Les sites réels */
.vitrines{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.vitrine{display:block;text-decoration:none;border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--hairline);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.vitrine:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(51,26,15,.55)}
.vitrine img{aspect-ratio:1440/900;object-fit:cover;object-position:top}


/* Commencer */
.sec--commencer{background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(250,81,9,.10),transparent 60%),var(--canvas)}
.commencer{text-align:center;display:grid;justify-items:center;gap:20px}
.commencer .h2{max-width:none}
.h2--ligne{max-width:none}
@media (min-width:721px){.h2--ligne{white-space:nowrap}}
.commencer__note{font-size:13px;color:var(--text-secondary)}

/* Pied */
.pied{position:relative;z-index:1;border-top:1px solid var(--hairline);padding:28px clamp(16px,5vw,48px);font-size:13px;color:var(--text-secondary)}
.pied__in{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.pied__liens{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%}
.pied__liens a{color:inherit;text-decoration:none;text-underline-offset:3px}
.pied__liens a:hover{color:var(--text-primary);text-decoration:underline}

/* ---------- Entrées au scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.plaintes .plainte:nth-child(2){transition-delay:.1s}.plaintes .plainte:nth-child(3){transition-delay:.2s}.plaintes .plainte:nth-child(4){transition-delay:.3s}
.plaintes .plainte.in:nth-child(n){transition-delay:0s}
.benefices .benefice:nth-child(2){transition-delay:.08s}.benefices .benefice:nth-child(3){transition-delay:.16s}.benefices .benefice:nth-child(4){transition-delay:.24s}
.benefices .benefice.in:nth-child(n){transition-delay:0s}
.vitrines .vitrine:nth-child(2){transition-delay:.1s}.vitrines .vitrine:nth-child(3){transition-delay:.2s}
.vitrines .vitrine.in:nth-child(n){transition-delay:0s}

/* ---------- Les cinq gates du hero statique (identiques dans hero.js) ---------- */
@media (prefers-reduced-motion:reduce){
  .hero{display:none}
  .hero-static{display:block}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  body{opacity:1}
  .reveal{opacity:1;transform:none}
  .etapes__fil path{stroke-dashoffset:0}
  .poussieres{display:none}
  .btn--tenir__jauge{transform:scaleX(1)}
}

/* ---------- v4 : derrière l'écran ---------- */
.hero--v4{height:820vh}
.teinte{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
  background:
    radial-gradient(ellipse 55% 70% at 50% 55%,rgba(250,81,9,calc(.55*var(--chaud,0))),transparent 70%),
    radial-gradient(ellipse 55% 70% at 50% 55%,rgba(110,132,199,calc(.7*var(--froid,0))),transparent 70%)}
.scrim--v4{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(20,12,8,0) 45%,rgba(20,12,8,.34) 100%)}

.verres{position:absolute;inset:0;z-index:4;pointer-events:none;perspective:1400px;perspective-origin:50% 50%}
.verre{position:absolute;opacity:var(--op,0);transform:translate3d(var(--px,0px),var(--ty,0px),0) scale(var(--sc,1));transform-style:preserve-3d;will-change:transform,opacity}
.verre--site{left:51vw;top:12vh;width:min(45vw,720px)}
.verre--agenda{left:4vw;top:11vh;width:min(56vw,860px);transform-origin:0 0}
.verre__cadre{position:relative;border-radius:18px;overflow:visible;transform-style:preserve-3d;
  background:rgba(255,250,241,.46);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 40px 90px -36px rgba(51,26,15,.6),inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(6px) saturate(1.05);-webkit-backdrop-filter:blur(6px) saturate(1.05)}
.ecran--verre{position:absolute;left:0;top:0;width:1440px;height:800px;transform-origin:0 0;overflow:visible;background:transparent;transform-style:preserve-3d;border-radius:18px}
.ecran--verre .ks{background:rgba(250,246,239,.4);border-radius:18px;transform-style:preserve-3d;overflow:visible}
.ecran--verre .ks__barre{background:rgba(255,255,255,.72);border-radius:18px 18px 0 0}
.ecran--verre .ks__cases{transform-style:preserve-3d}
.ecran--verre .ks__case{transform-style:preserve-3d;border-radius:0;
  transform:translate3d(calc(var(--lift,0)*var(--dx,0px)),calc(var(--lift,0)*-10px),calc(var(--lift,0)*170px)) rotateY(calc(var(--lift,0)*-7deg));
  box-shadow:0 calc(var(--lift,0)*40px) calc(var(--lift,0)*60px) calc(var(--lift,0)*-20px) rgba(51,26,15,.55);
  will-change:transform}
.ecran--verre .ks__case::before{opacity:.84}
.ecran--verre .ks__case:first-child{border-radius:0 0 0 18px}
.ecran--verre .ks__case:last-child{border-radius:0 0 18px 0}
.ecran--verre .kb{background:rgba(252,239,220,.5);border-radius:18px;transform-style:preserve-3d}
.ecran--verre .kb__side{background:rgba(255,255,255,.58);border-radius:18px 0 0 18px}
.ecran--verre .kb__grille{background:rgba(255,255,255,.62);transform-style:preserve-3d;overflow:visible}
.ecran--verre .kb__rdv{transform:translate3d(0,0,calc(var(--lift,0)*70px));
  box-shadow:0 calc(var(--lift,0)*14px) calc(var(--lift,0)*22px) calc(var(--lift,0)*-6px) rgba(51,26,15,.5);will-change:transform}

.notifs--verre{position:absolute;inset:0;z-index:6}
.notifs--verre .notif{width:min(360px,30vw);left:64vw;transform-origin:100% 50%}
.notifs--verre .notif[data-n="0"]{top:16vh}
.notifs--verre .notif[data-n="1"]{top:30vh}
.notifs--verre .notif[data-n="2"]{top:44vh}

.band--v4{left:clamp(20px,6vw,96px);top:clamp(96px,18vh,190px);width:min(42vw,700px)}
.band--5-v4{left:clamp(20px,6vw,96px);bottom:clamp(24px,5vh,60px);width:min(40vw,560px);color:var(--text-primary);text-shadow:var(--tshadow-clair)}
.band--5-v4::before{background:radial-gradient(ellipse 76% 70% at 46% 54%,rgba(252,240,222,.88) 0%,rgba(252,240,222,.64) 46%,rgba(252,240,222,0) 78%)}
.band--5-v4 .lien-clair{color:var(--text-primary)}
.hero-static__fig--v4 .notifs--static .notif{width:340px}

/* Les captures réelles dans les sections : cadre fin, coins doux, ombre brune */
.etape__fig,.benefice__fig{margin:16px 0 0;border-radius:12px;overflow:hidden;border:1px solid var(--hairline);box-shadow:0 18px 40px -24px rgba(51,26,15,.5);background:var(--panel)}
.etape__fig img,.benefice__fig img{aspect-ratio:1440/900;object-fit:cover;object-position:top left}

/* v4 : la ligne 2 et le sous-titre au milieu de l'écran, sans voile derrière */
.band--2.band--v4{left:50%;top:50%;transform:translate(-50%,-50%);width:min(64vw,900px);text-align:center;text-shadow:0 1px 2px rgba(252,240,222,.9),0 2px 18px rgba(252,240,222,.85),0 0 40px rgba(252,240,222,.7)}
.band--2.band--v4::before{display:none}
.band--1.band--v4::before{display:none}
.band--1.band--v4{text-shadow:0 1px 2px rgba(252,240,222,.9),0 2px 18px rgba(252,240,222,.85),0 0 40px rgba(252,240,222,.7)}
.band--5-v4{left:50%;right:auto;bottom:clamp(24px,7vh,80px);transform:translateX(-50%);width:min(60vw,760px);text-align:center;text-shadow:0 1px 2px rgba(252,240,222,.9),0 2px 18px rgba(252,240,222,.85),0 0 40px rgba(252,240,222,.7)}
.band--5-v4::before{display:none}
.band--5-v4 .band__cta{justify-content:center}
.hero-static__titre,.hero-static__titre span,.h2,.plainte h3,.benefice h3{font-family:var(--font-display)}
.h2{letter-spacing:-.01em}

/* v4 : aucun halo derrière les textes. Un voile uniforme assombrit la vidéo pendant les titres, le texte est blanc. */
.voile{position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(20,12,8,1);opacity:var(--v,0);will-change:opacity}
.band--1.band--v4,.band--2.band--v4,.band--5-v4{text-shadow:0 2px 14px rgba(0,0,0,.28);color:#fff8ef}
.band--1.band--v4 .titre-hero,.band--2.band--v4 .titre-hero{color:#fff8ef}
.band--1.band--v4{left:50%;top:50%;transform:translate(-50%,-50%);width:min(80vw,1100px);text-align:center}
.band--5-v4{color:#fff8ef}
.band--5-v4 .sous-titre{font:500 clamp(20px,1.9vw,28px)/1.45 var(--font-body)}
.band--5-v4{width:min(70vw,900px);bottom:clamp(28px,9vh,110px)}
.band--5-v4 .lien-clair{color:#fff8ef}

/* Elles en parlent : un portrait rond, la citation en grand, la signature reliée au vrai site */
.sec--temoignage{background:var(--canvas)}
.temoins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:28px;margin-top:28px}
.temoin{margin:0;display:grid;gap:18px;align-content:start;background:var(--panel);border:1px solid var(--hairline);border-radius:22px;padding:clamp(22px,3vw,36px);box-shadow:0 2px 0 rgba(51,26,15,.05)}
.temoin__portrait{width:clamp(96px,10vw,132px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid var(--panel-deep);box-shadow:0 18px 40px -22px rgba(51,26,15,.55);background:var(--panel-deep)}
.temoin__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.temoin__portrait--vide img{display:none}
.temoin__portrait--vide{background:radial-gradient(circle at 50% 35%,var(--accent-muted),var(--panel-deep))}
.temoin__citation{margin:0;font:500 clamp(16px,1.25vw,19px)/1.55 var(--font-body);color:var(--text-primary)}
.temoin__citation--attente p:first-child{color:var(--text-secondary);font-style:italic}
.temoin__qui{display:grid;gap:4px;font-size:15px;color:var(--text-secondary)}
.temoin__qui b{font:700 17px/1.2 var(--font-heading);color:var(--text-primary)}
.temoin__qui a{color:var(--accent);font-weight:500;text-underline-offset:4px}


/* ---------- v4 sur téléphone : le même scroll, en portrait ---------- */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  .hero--v4{height:700vh}
  .poster,#hero-video{object-position:50% 45%}
  .band--1.band--v4{width:92vw}
  .band--1.band--v4 .titre-hero{font-size:clamp(44px,13vw,64px)}
  .band--2.band--v4{width:90vw}
  .band--2.band--v4 .titre-hero--2{font-size:clamp(24px,6.6vw,34px)}
  .band--chip{display:none}
  .verre--site{left:4vw;top:12vh;width:92vw}
  .verre--agenda{left:4vw;top:10vh;width:92vw}
  .notifs--verre .notif{width:min(300px,80vw);left:10vw;transform-origin:0 50%;padding:10px 12px}
  .notifs--verre .notif[data-n="0"]{top:40vh}
  .notifs--verre .notif[data-n="1"]{top:50vh}
  .notifs--verre .notif[data-n="2"]{top:60vh}
  .verre--agenda{top:8vh}
  .band--5-v4{width:92vw;bottom:8vh}
  .band--5-v4 .sous-titre{font-size:clamp(15px,4vw,18px);line-height:1.4}
  .band--5-v4 .band__cta{margin-top:12px}
  .band--5-v4 .btn--grand{padding:13px 24px;font-size:15.5px}
  .band--5-v4 .band__cta{gap:12px}
  .cue{bottom:32px}
}
/* Téléphone à viewport court (Safari avec ses barres) : tout remonte un peu */
@media (max-width:720px) and (max-height:720px){
  .verre--agenda{top:10vh;width:84vw;left:8vw}
  .notifs--verre .notif[data-n="0"]{top:33vh}
  .notifs--verre .notif[data-n="1"]{top:43vh}
  .notifs--verre .notif[data-n="2"]{top:53vh}
  .band--5-v4{bottom:7vh}
  .band--5-v4 .sous-titre{font-size:15px;line-height:1.35}
}

/* ---------- Ce que tu as : les scènes ---------- */
.scenes{margin-top:24px}
.scene{position:relative;height:230vh}
.scene__stage{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(280px,36%) 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:96px clamp(16px,5vw,48px) 32px;max-width:1280px;margin:0 auto;box-sizing:border-box}
.scene__num{display:inline-block;font:500 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--accent);border:1px solid var(--accent-muted);border-radius:8px;padding:6px 8px;background:var(--panel);margin-bottom:16px}
.scene__texte h3{font:600 clamp(24px,2.3vw,34px)/1.12 var(--font-display);letter-spacing:-.01em}
.scene__texte p{margin-top:12px;color:var(--text-secondary);font-size:16px}
.scene__visuel{position:relative;min-width:0}
.ecran--scene{position:absolute;left:0;top:0;width:1440px;height:800px;transform-origin:0 0;overflow:hidden;background:#fbf7ec;border-radius:18px}

/* 1. identités */
.ident-cadre{position:relative;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(51,26,15,.55);background:var(--panel-deep)}
.ident{position:absolute;inset:0;opacity:var(--op,0);transform:scale(var(--sc,1));transform-origin:50% 50%;will-change:opacity,transform}
.ident[data-i="0"]{--op:1}
.ident .ks__case{opacity:var(--vu,1);transform:translateY(calc((1 - var(--vu,1))*40px))}
.ident-liste{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ident-liste li{font:500 13px/1 var(--font-body);padding:8px 12px;border-radius:999px;border:1px solid var(--hairline);color:var(--text-secondary);transition:background .3s,color .3s,border-color .3s}
.ident-liste li.on{background:var(--text-primary);color:var(--canvas);border-color:var(--text-primary)}

/* 2. prestations : du pictogramme à la vraie photo */
.resa{background:var(--panel);border:1px solid var(--hairline);border-radius:18px;padding:clamp(16px,2vw,28px);box-shadow:0 30px 70px -30px rgba(51,26,15,.5)}
.resa__titre{font:500 clamp(18px,1.6vw,24px)/1.2 var(--font-display);margin-bottom:12px}
.resa__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.resa__chips span{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--hairline);color:var(--text-secondary)}
.resa__chips span.on{background:#8a3f2a;color:#fff;border-color:#8a3f2a}
.resa__cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.presta{display:grid;gap:4px;font-size:12px}
.presta__media{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#ece6dc;perspective:800px}
/* Les deux faces de la vignette. L'opacité double le `backface-visibility` :
   WebKit ne cache PAS la face arrière ici (le parent porte `overflow:hidden`
   avec sa `perspective`, ce qui aplatit le contexte 3D), si bien que la photo
   se voyait dès le départ sur iPhone et que la bascule n'existait pas. Chrome,
   lui, la joue correctement : le défaut est invisible en émulation. */
.presta__picto,.presta__photo{position:absolute;inset:0;backface-visibility:hidden}
.presta__picto{display:grid;place-items:center;background:#e9e3d9;transform:rotateY(calc(var(--flip,0)*180deg));opacity:calc(1 - var(--flip,0))}
.presta__picto::before{content:"";width:42%;aspect-ratio:1;border-radius:50%;border:3px solid #b9ad9e;background:radial-gradient(circle at 50% 42%,#b9ad9e 22%,transparent 24%)}
.presta__picto--massage::before{border-radius:12px;background:linear-gradient(#b9ad9e,#b9ad9e) 50% 55%/60% 10% no-repeat}
.presta__picto--regard::before{border-radius:50% 50% 0 0;border-bottom-color:transparent}
.presta__picto--mains::before{border-radius:40% 40% 10% 10%}
.presta__photo{background:var(--photo) 50% 40%/cover;transform:rotateY(calc((1 - var(--flip,0))*-180deg));opacity:var(--flip,0)}
.presta b{font:600 13px/1.2 var(--font-body);margin-top:6px}
.presta small{color:var(--text-secondary);font-size:11px;line-height:1.3}
.presta em{font-style:normal;font:500 11px/1 var(--font-mono);color:var(--text-primary);margin-top:4px}

.chiffre{margin-top:22px;display:grid;gap:4px}
.chiffre b{font:800 clamp(36px,4.2vw,60px)/1 var(--font-chiffres);color:var(--accent);font-variant-numeric:tabular-nums;opacity:calc(.3 + .7*var(--k,0))}
.chiffre span{font-size:13.5px;color:var(--text-secondary);max-width:32ch}
.chiffres{display:grid;gap:14px;margin-top:8px}
.chiffres .chiffre{margin-top:8px}
.chiffres .chiffre b{font-size:clamp(28px,3vw,40px)}
.chiffre--grand b{font-size:clamp(56px,7vw,96px);color:var(--text-primary)}
sup{font-size:.7em;color:var(--accent)}

/* 3. agenda qui se remplit, rappel stylisé */
.agenda-cadre{position:relative;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(51,26,15,.55);background:var(--panel-deep)}
.agenda-cadre .kb__rdv{opacity:var(--vu,1);transform:translateY(calc((1 - var(--vu,1))*10px)) scale(calc(.9 + .1*var(--vu,1)))}
.mail{position:absolute;right:-2%;bottom:-6%;width:min(380px,78%);background:#fffaf1;border:1px solid rgba(51,26,15,.16);border-radius:16px;padding:18px 20px;box-shadow:0 24px 50px -20px rgba(51,26,15,.55);
  opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0))*40px)) rotate(calc((1 - var(--k,0))*-2deg))}
.mail__entete{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--text-secondary)}
.mail__de{font-weight:600;color:var(--text-primary)}
.mail__objet{display:block;font:700 17px/1.2 var(--font-heading);margin:10px 0 6px}
.mail__corps{font-size:13.5px;line-height:1.45;color:var(--text-secondary);margin:0}
.mail__actions{display:flex;align-items:center;gap:14px;margin-top:14px}
.mail__btn{background:var(--accent);color:#fff5ea;border-radius:999px;padding:9px 14px;font:600 12.5px/1 var(--font-body)}
.mail__lien{font-size:12.5px;color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}

/* 4. chiffre d'affaires : deux pages réelles inclinées, des notifications */
.appareils{position:relative;height:min(52vh,520px);perspective:1200px}
.appareil{position:absolute;border-radius:14px;overflow:hidden;border:1px solid var(--hairline);background:#fff;box-shadow:0 40px 80px -30px rgba(51,26,15,.6);opacity:var(--k,0);will-change:transform,opacity}
.appareil img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.appareil--a{left:0;top:4%;width:62%;height:78%;transform:rotateY(calc(14deg - var(--k,0)*6deg)) translateX(calc((1 - var(--k,0))*-60px))}
.appareil--b{right:0;top:18%;width:58%;height:78%;transform:rotateY(calc(-16deg + var(--k,0)*6deg)) translateX(calc((1 - var(--k,0))*60px))}
.notifs--scene{position:absolute;inset:auto 0 0 0;height:100%;z-index:3}
.notifs--scene .notif{left:auto;right:-4%;width:min(300px,60%);transform-origin:100% 50%;opacity:var(--k,0);transform:translate(calc((1 - var(--k,0))*60px),0) scale(calc(.8 + .2*var(--k,0)))}


/* 5. le site qui se monte, chrono */
.montage-cadre{position:relative;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(51,26,15,.55);background:var(--panel-deep)}
.ident--montage{--op:1}
.ident--montage .ks__barre{opacity:var(--vu,1);transform:translateY(calc((1 - var(--vu,1))*-30px))}
.ident--montage .ks__case{opacity:var(--vu,1);transform:translateY(calc((1 - var(--vu,1))*60px)) scale(calc(.94 + .06*var(--vu,1)))}
.publie{position:absolute;right:18px;top:18px;background:#1f7a4d;color:#fff;font:600 13px/1 var(--font-body);padding:10px 14px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);opacity:var(--k,0);transform:scale(calc(.7 + .3*var(--k,0)))}
.publie::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#9ff0c4;margin-right:8px;vertical-align:middle}
.chrono{margin-top:22px}
.chrono b{display:block;font:500 clamp(40px,4.6vw,64px)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.chrono span{font-size:13px;color:var(--text-secondary)}

/* 6. la liste des clientes qui défile */
.clientes-cadre{position:relative;height:min(56vh,560px);overflow:hidden;border-radius:18px;background:var(--panel);border:1px solid var(--hairline);box-shadow:0 30px 70px -30px rgba(51,26,15,.5);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.clientes{transform:translateY(var(--ty,0px));will-change:transform;padding:12px 0}
.cliente{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--hairline)}
.cliente__ini{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--font-body);font-style:normal;color:#331a0f;background:hsl(var(--h,20) 60% 86%)}
.cliente b{font:600 14px/1.2 var(--font-body)}
.cliente span{display:block;font-size:12px;color:var(--text-secondary);margin-top:2px}
.cliente em{font:400 12px/1 var(--font-mono);font-style:normal;color:var(--text-secondary)}

.benefices--fin{margin-top:8px}
.benefices--fin .benefice{grid-column:span 12}
.sources{margin-top:0;font-size:11.5px;line-height:1.5;color:var(--text-secondary);max-width:80ch}
.sources summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:500;opacity:.75}
.sources summary::-webkit-details-marker{display:none}
.sources summary::after{content:"+";font:500 13px/1 var(--font-mono)}
.sources[open] summary::after{content:"-"}
.sources summary:hover{opacity:1}
.sources p{margin:8px 0 0}
.sec--fonctions{padding-bottom:36px}

@media (max-width:900px){
  .scene{height:210vh}
  .scene__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px;align-items:start;padding-top:84px}
  .scene__texte p{font-size:15px}
  .resa__cartes{grid-template-columns:repeat(2,1fr)}
  .appareils{height:min(40vh,360px)}
  .mail{right:0;bottom:-4%}
  .clientes-cadre{height:min(42vh,420px)}
  .ident-liste{margin-top:12px}
  .chiffre{margin-top:12px}
}

/* ---------- Maquettes stylisées (jamais de capture réelle en illustration) ---------- */
/* La carte cadeau */
.appareil--a,.appareil--b{background:transparent;border:0;box-shadow:none;overflow:visible}
.cadeau{position:relative;width:100%;aspect-ratio:16/10;border-radius:18px;padding:22px 24px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:6px;color:#3b2a22;overflow:hidden;
  background:linear-gradient(135deg,#fff8ef 0%,#f6e4d3 55%,#ffd9c7 100%);border:1px solid rgba(255,255,255,.8);box-shadow:0 40px 80px -30px rgba(51,26,15,.55),inset 0 1px 0 #fff}
.cadeau__ruban{position:absolute;right:-40px;top:22px;width:180px;height:26px;background:#8a3f2a;transform:rotate(35deg);opacity:.9}
.cadeau__haut{display:flex;justify-content:space-between;align-items:center}
.cadeau__marque{font:italic 500 22px/1 "Fraunces",serif;color:#8a3f2a}
.cadeau__chip{font:500 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.7);border-radius:999px;padding:6px 9px;color:#5c4436}
.cadeau__titre{align-self:end;font:500 clamp(14px,1.3vw,18px)/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#7b6a60}
.cadeau__montant{font:800 clamp(40px,4.6vw,64px)/1 var(--font-chiffres);color:#331a0f}
.cadeau__bas{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:#5c4436}
.cadeau__code{font:500 12px/1 var(--font-mono);letter-spacing:.1em;color:#331a0f}

/* La boutique */
.boutique{width:100%;border-radius:16px;background:#fbf7ec;border:1px solid var(--hairline);box-shadow:0 40px 80px -30px rgba(51,26,15,.55);padding:14px 16px 16px;box-sizing:border-box}
.boutique__entete{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;margin-bottom:12px}
.boutique__marque{font:italic 500 16px/1 "Fraunces",serif;color:#8a3f2a}
.boutique__titre{font:500 13px/1 var(--font-body);color:#5c4436;text-align:center}
.boutique__panier{font:500 11px/1 var(--font-mono);background:#8a3f2a;color:#fff;border-radius:999px;padding:6px 9px}
.boutique__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.produit{display:grid;gap:3px;font-size:11px}
.produit__photo{aspect-ratio:4/5;border-radius:10px;background:var(--photo) 50% 45%/cover}
.produit b{font:600 12px/1.2 var(--font-body);margin-top:4px}
.produit small{color:#7b6a60}
.produit em{font-style:normal;font:500 12px/1 var(--font-mono);color:#331a0f}
.produit__btn{margin-top:4px;text-align:center;font:600 11px/1 var(--font-body);color:#8a3f2a;border:1px solid #8a3f2a;border-radius:999px;padding:7px 8px}

/* Les trois étapes */
.maquette-etape{margin-top:16px;background:var(--panel);border:1px solid var(--hairline);border-radius:16px;padding:18px;box-shadow:0 18px 40px -24px rgba(51,26,15,.5);display:grid;gap:10px;max-width:none}
.inscription__titre{font:600 16px/1.2 var(--font-display)}
.champ{display:grid;gap:3px;border:1px solid var(--hairline);border-radius:10px;padding:8px 12px;background:#fff}
.champ span{font:500 10.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.champ b{font:500 14px/1.2 var(--font-body)}
.champ--vide b{letter-spacing:.2em}
.inscription__btn,.monsite__btn{justify-self:start;background:var(--accent);color:#fff5ea;border-radius:999px;padding:11px 18px;font:600 13px/1 var(--font-body)}
.inscription__note{font-size:12px;color:var(--text-secondary)}
.monsite__ligne{display:grid;grid-template-columns:minmax(84px,130px) 1fr;align-items:center;gap:12px;font-size:13.5px;color:var(--text-secondary)}
.pastilles{display:flex;gap:10px}
.pastilles i{width:26px;height:26px;border-radius:50%;background:var(--c);border:2px solid transparent;box-shadow:0 0 0 1px var(--hairline)}
.pastilles i.on{border-color:#fff;box-shadow:0 0 0 2px var(--text-primary)}
.pilules{display:flex;gap:6px;flex-wrap:wrap}
.pilules em{font-style:normal;font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid var(--hairline);color:var(--text-primary)}
.pilules em.on{background:var(--text-primary);color:var(--canvas);border-color:var(--text-primary)}
.vignettes{display:flex;gap:8px;flex-wrap:wrap}
.vignettes i{width:42px;height:42px;border-radius:8px;background:var(--photo) 50% 40%/cover;display:grid;place-items:center;font-style:normal}
.vignette-plus{border:1px dashed var(--border-strong);color:var(--text-secondary);font-size:16px}
.resume__ligne{display:flex;align-items:center;gap:10px;font-size:12.5px}
.resume__ligne b{display:block;font:700 13px/1.15 var(--font-heading)}
.resume__ligne span{display:block;color:var(--text-secondary);font-size:11.5px;margin-top:2px}
.resume__ligne em{margin-left:auto;font:500 13px/1 var(--font-mono);font-style:normal}
.resume__ligne .notif__ico{width:32px;height:32px}
.resume__ligne--boutique .notif__ico{background:var(--calm-muted)}.resume__ligne--boutique .notif__ico::after{background:var(--calm);border-radius:50%}
.resume__ligne--cadeau .notif__ico{background:#ffe1e5}.resume__ligne--cadeau .notif__ico::after{background:var(--rose-deep);border-radius:2px;transform:rotate(45deg)}
.resume__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--hairline);padding-top:10px;font-size:12px;color:var(--text-secondary)}
.resume__total b{font:800 20px/1 var(--font-chiffres);color:var(--text-primary)}

/* Les scènes sur téléphone : tout doit tenir dans un écran, texte compact, visuel dessous */
@media (max-width:720px){
  .monsite__ligne{grid-template-columns:1fr;gap:6px;font-size:12.5px}
  .monsite__ligne>span:first-child{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
  .pastilles i{width:24px;height:24px}
  .pilules em{font-size:12.5px;padding:6px 11px}
  .vignettes i{width:38px;height:38px}
  .scene{height:190vh}
  .scene__stage{padding:78px 16px 16px;gap:12px}
  .scene__num{margin-bottom:8px}
  .scene__texte h3{font-size:21px}
  .scene__texte p{font-size:13.5px;margin-top:8px}
  .scene__texte .a-valider{display:none}
  .chiffre{margin-top:10px;gap:2px}
  .chiffre b{font-size:30px}
  .chiffre span{font-size:11.5px}
  .chiffres{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
  .chiffres .chiffre{margin-top:0}
  .chiffres .chiffre b{font-size:22px}
  .chiffres .chiffre span{font-size:10.5px}
  .chiffre--grand b{font-size:44px}
  .ident-liste{margin-top:8px}
  .ident-liste li{padding:6px 10px;font-size:12px}
  .resa{padding:12px}
  .resa__titre{font-size:15px;margin-bottom:8px}
  .resa__chips{margin-bottom:10px}
  .resa__chips span{font-size:11px;padding:5px 9px}
  .resa__cartes{grid-template-columns:repeat(4,1fr);gap:8px}
  .presta__media{aspect-ratio:3/4}
  .presta small{display:none}
  .presta b{font-size:11px}
  .presta em{font-size:10px}
  .appareils{height:min(34vh,300px)}
  .appareil--a{width:70%;top:0;height:60%}
  .appareil--b{width:66%;top:34%;height:64%}
  .notifs--scene .notif{width:min(240px,66%);padding:8px 10px;gap:8px}
  .notifs--scene .notif b{font-size:12.5px}
  .notifs--scene .notif span{font-size:10.5px}
  .notifs--scene .notif__ico{width:28px;height:28px}
  .mail{width:92%;padding:12px 14px}
  .mail__objet{font-size:14px}
  .mail__corps{font-size:12px}
  .chrono{margin-top:10px}
  .chrono b{font-size:36px}
  .clientes-cadre{height:min(36vh,320px)}
  .cliente{padding:9px 12px}
}

@media (max-width:720px){
  .presta em{white-space:nowrap;font-size:9.5px}
  .mail{position:relative;right:auto;bottom:auto;width:100%;margin-top:10px;transform:translateY(calc((1 - var(--k,0))*24px));box-sizing:border-box}
  .appareils{height:auto;display:grid;gap:10px;perspective:none}
  .appareil{position:static;width:100%;height:auto;transform:none!important}
  .cadeau{aspect-ratio:16/7;padding:14px 16px;gap:2px}
  .cadeau__marque{font-size:16px}
  .cadeau__montant{font-size:34px}
  .cadeau__titre{font-size:11px}
  .cadeau__bas{font-size:11px}
  .boutique{padding:10px 12px 12px}
  .notifs--scene .notif[data-n="1"],.notifs--scene .notif[data-n="2"]{display:none}
  .notifs--scene .notif[data-n="0"]{top:auto;bottom:-6%;right:-2%;width:min(230px,64%)}
}
/* Hero sur téléphone : les vitres vivent sur le capot, sous son visage.
   Chaque pièce se cale sur le MILIEU de l'écran au moment où elle est seule à
   l'image — l'aperçu du site, puis l'agenda, puis la pile de notifications.
   Le texte, lui, quitte le bord bas. Les quatre remontent du même nombre de
   vh : l'air entre la dernière notification et le texte est réglé, et il doit
   le rester. */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  .verre--site{top:36vh}
  .verre--agenda{top:36vh;left:8vw;width:84vw}
  .notifs--verre .notif[data-n="0"]{top:33vh}
  .notifs--verre .notif[data-n="1"]{top:44vh}
  .notifs--verre .notif[data-n="2"]{top:55vh}
}
@media (max-width:720px) and (max-height:720px){
  .verre--agenda{top:34vh}
  .notifs--verre .notif[data-n="0"]{top:27vh}
  .notifs--verre .notif[data-n="1"]{top:38vh}
  .notifs--verre .notif[data-n="2"]{top:49vh}
}

/* ---------- La pile « Ce que tu as » ---------- */
.pile{position:relative;height:calc(7 * 120vh + 40vh)}
.pile__stage{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(300px,40%) 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:88px clamp(16px,4vw,48px) 24px;box-sizing:border-box;overflow:hidden}
.pile__textes,.pile__visuels{position:relative;height:100%;min-width:0}
.fiche{position:absolute;left:0;right:0;top:50%;transform:translate3d(0,calc(-50% + var(--ty,0vh)),0);opacity:var(--op,0);will-change:transform,opacity;pointer-events:none}
.fiche--active{pointer-events:auto}
.fiche__num{display:inline-block;font:500 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--accent);border:1px solid var(--accent-muted);border-radius:8px;padding:6px 8px;background:var(--panel);margin-bottom:14px}
.fiche h3{font:700 clamp(26px,2.6vw,40px)/1.08 var(--font-display);letter-spacing:-.015em}
.fiche p{margin-top:14px;color:var(--text-secondary);font-size:15.5px;max-width:44ch}
.fiche__petit{font:500 14px/1.3 var(--font-body);color:var(--text-secondary);margin-top:10px}
.grand{margin-top:18px;display:grid;gap:2px}
.grand b{font:800 clamp(40px,4.6vw,66px)/1 var(--font-chiffres);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em;opacity:calc(.35 + .65*var(--k,1))}
.grand em{font-style:normal;font:700 clamp(17px,1.5vw,21px)/1.15 var(--font-heading);color:var(--text-primary)}
.grand small{font-size:13px;color:var(--text-secondary);margin-top:6px;max-width:40ch}
.grand--univers b{color:var(--text-primary);font-size:clamp(48px,5.8vw,86px);transform:translateY(calc((1 - var(--k,1))*10px))}
.grand--univers em{color:var(--accent);font-size:clamp(24px,2.6vw,36px);font-weight:800}
.grand--chrono b{font-family:var(--font-mono);font-weight:500;color:var(--text-primary)}
.fiche .grand.chiffre b{color:var(--accent)}
/* Les trois gains de la fiche 04, au MÊME rang. Le taux de cartes cadeaux
   trônait seul en « grand », les deux autres en dessous, plus petits et en
   encre neutre : l'oeil lisait un chiffre et deux notes de bas de page, alors
   que la boutique et les nouvelles clientes sont trois fois le même argument.
   Deux colonnes, même corps, même accent, la troisième dessous. */
.trio{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:16px}
.trio .chiffre{margin:0;min-width:0}
.trio .chiffre b{font:800 clamp(30px,3.4vw,46px)/1 var(--font-chiffres);color:var(--accent)}
.trio .chiffre em{font-style:normal;font:700 clamp(14px,1.25vw,16px)/1.2 var(--font-heading);color:var(--text-primary);display:block;margin-top:2px}
.trio .chiffre small{display:block;font-size:11.5px;color:var(--text-secondary);margin-top:4px;line-height:1.35}

.vis{position:absolute;inset:0;display:grid;align-items:center;opacity:var(--op,0);transform:translate3d(0,var(--ty,0px),0) scale(var(--sc,1));transform-origin:50% 50%;will-change:transform,opacity;pointer-events:none}
.vis>*{width:100%}
.vis .appareils{height:min(60vh,600px)}
.vis .clientes-cadre{height:min(64vh,640px)}

/* Le rappel, bien plus marquant */
.mail{width:min(440px,84%);padding:22px 24px 18px;border:1px solid rgba(250,81,9,.35);box-shadow:0 30px 60px -20px rgba(51,26,15,.6),0 0 0 6px rgba(250,81,9,calc(.12*var(--k,0)))}
.mail__badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff5ea;font:700 12px/1 var(--font-heading);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:8px 12px;margin-bottom:12px;box-shadow:0 8px 18px -8px rgba(250,81,9,.7)}
.mail__badge i{width:8px;height:8px;border-radius:50%;background:#fff5ea;animation:pouls 1.6s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.mail__objet{font-size:19px}
.mail__envoye{margin-top:12px;display:flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font-body);color:#1f7a4d;opacity:var(--e,0);transform:translateY(calc((1 - var(--e,0))*6px))}
.mail__envoye i{width:16px;height:16px;border-radius:50%;background:#1f7a4d;position:relative}
.mail__envoye i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Le tarif */
.tarif{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.tarif__carte{background:var(--panel);border:1px solid var(--hairline);border-radius:20px;padding:26px 24px;display:grid;gap:8px;align-content:start;box-shadow:0 30px 60px -30px rgba(51,26,15,.5);opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0))*30px))}
.tarif__carte--gratuit{background:var(--text-primary);color:var(--canvas);border-color:transparent}
.tarif__nom{font:600 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.tarif__prix{font:800 clamp(44px,5vw,72px)/1 var(--font-chiffres)}
.tarif__carte--croissance .tarif__prix{color:var(--accent)}
.tarif__detail{font:600 14px/1.3 var(--font-body)}
.tarif__inclus{font-size:13px;line-height:1.45;opacity:.85;margin-top:8px}
.tarif__barre{grid-column:1/3;position:relative;height:10px;border-radius:999px;background:var(--panel-deep);margin-top:6px}
.tarif__jauge{position:absolute;left:0;top:0;bottom:0;width:calc(var(--k,0)*100%);border-radius:999px;background:linear-gradient(90deg,var(--accent-muted),var(--accent))}
.tarif__barre em{position:absolute;right:0;top:16px;font:500 11px/1 var(--font-mono);color:var(--text-secondary);font-style:normal}

@media (max-width:900px){
  .pile{height:calc(7 * 115vh + 30vh)}
  .pile__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:12px;align-items:start;padding:78px 16px 16px}
  .pile__textes{height:auto;min-height:44vh}
  .fiche{top:0;transform:translate3d(0,var(--ty,0vh),0)}
  .fiche h3{font-size:23px}
  .fiche p{font-size:13.5px;margin-top:8px}
  .grand{margin-top:10px}
  .grand b{font-size:34px}
  .grand em{font-size:15px}
  .grand small{font-size:11.5px;margin-top:3px}
  .grand--univers b{font-size:44px}
  .grand--univers em{font-size:22px}
  .trio{gap:10px 12px;margin-top:8px}
  .trio .chiffre b{font-size:26px}
  .trio .chiffre em{font-size:12.5px}
  .trio .chiffre small{font-size:10.5px}
  .vis{align-items:start}
  .vis .appareils{height:auto}
  .vis .clientes-cadre{height:min(40vh,380px)}
  .mail{width:100%;padding:14px 16px}
  .mail__objet{font-size:15px}
  .tarif{gap:10px}
  .tarif__carte{padding:16px}
  .tarif__prix{font-size:34px}
  .tarif__inclus{font-size:12px}
}

.ca-wrap{position:relative}
.ca-wrap .notifs--scene{position:absolute;inset:0;height:auto}
.vis[data-i="2"]{align-items:start;padding-top:2vh}
.vis[data-i="2"] .mail{bottom:auto;top:calc(100% - 20px);right:0}
@media (min-width:901px){.vis[data-i="2"] .agenda-cadre{margin-top:0}.vis[data-i="2"]{align-items:center;padding-top:0}.vis[data-i="2"] .mail{top:auto;bottom:-2%}}
@media (max-width:900px){
  .pile__textes{height:46vh;min-height:0;overflow:hidden}
  .fiche{top:0;transform:translate3d(0,calc(var(--ty,0vh)*0.7),0)}
  /* Le texte et son visuel se lisent ENSEMBLE : la boîte de texte a une hauteur
     fixe, et les fiches courtes y laissaient soixante pixels de vide sous le
     dernier mot. Le visuel remonte dans ce vide, sans venir coller le texte.
     La carte « Rappel automatique » suit son agenda, puisqu'elle se positionne
     sur le visuel entier : les deux gardent leur superposition. */
  .vis[data-i="1"]{margin-top:-34px}
}

/* ---------- Elles en parlent : une voix à la fois ---------- */
.sec--temoignage{background:linear-gradient(180deg,var(--canvas) 0%,var(--panel-deep) 100%)}
.avis{margin-top:40px;display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.avis__portraits{display:grid;gap:10px}
.avis__portrait{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;text-align:left;padding:10px 14px 10px 10px;border-radius:16px;border:1px solid transparent;background:transparent;cursor:pointer;font:inherit;color:var(--text-primary);transition:background .35s var(--ease-out),border-color .35s,transform .35s var(--ease-out)}
.avis__portrait img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 30%;filter:saturate(.7);opacity:.7;transition:filter .4s,opacity .4s,transform .4s var(--ease-out)}
.avis__portrait span{display:grid;gap:2px;min-width:0}
.avis__portrait b{font:700 15px/1.2 var(--font-heading)}
.avis__portrait small{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avis__portrait:hover{background:rgba(255,250,241,.6)}
.avis__portrait.on{background:var(--panel);border-color:var(--hairline);box-shadow:0 14px 30px -20px rgba(51,26,15,.45);transform:translateX(6px)}
.avis__portrait.on img{filter:none;opacity:1;transform:scale(1.06)}
.avis__portrait--vide img{background:var(--panel-deep)}
.avis__scene{position:relative;min-height:340px}
.avis__carte{position:absolute;inset:0;margin:0;padding:8px 0 0 clamp(28px,4vw,56px);opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);pointer-events:none}
.avis__carte.on{position:relative;opacity:1;transform:none;pointer-events:auto}
.avis__guillemet{position:absolute;left:0;top:-18px;font:700 120px/1 var(--font-display);color:var(--accent-muted);pointer-events:none}
.avis__phrase{margin:0}
.avis__phrase p{margin:0;font:500 clamp(22px,2.1vw,32px)/1.35 var(--font-display);letter-spacing:-.01em;color:var(--text-primary);max-width:30ch}
.avis__complet{margin-top:18px;max-width:60ch}
.avis__complet summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--font-body);color:var(--accent);padding:8px 0}
.avis__complet summary::-webkit-details-marker{display:none}
.avis__complet summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s;margin-top:-3px}
.avis__complet[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.avis__complet p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--text-secondary)}
.avis__qui{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:14px;color:var(--text-secondary)}
.avis__qui b{font:700 15px/1.2 var(--font-heading);color:var(--text-primary)}
.avis__qui a{color:var(--accent);font-weight:500;text-underline-offset:4px}
.avis__points{display:flex;gap:6px;margin-top:22px;padding-left:clamp(28px,4vw,56px)}
.avis__points i{width:22px;height:4px;border-radius:999px;background:rgba(51,26,15,.15);transition:background .4s,width .4s}
.avis__points i.on{background:var(--accent);width:36px}
@media (max-width:860px){
  .avis{grid-template-columns:1fr;gap:18px}
  .avis__portraits{grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-between;gap:6px}
  .avis__portrait{grid-template-columns:40px auto;gap:7px;padding:7px 11px 7px 7px}
  .avis__portrait img{width:40px;height:40px}
  .avis__portrait b{font-size:14px;white-space:nowrap}
  .avis__portrait small{display:none}
  .avis__portrait.on{transform:none}
  .avis__scene{min-height:0}
  .avis__carte{padding-left:0;padding-top:34px}
  .avis__guillemet{font-size:80px;top:-10px}
  .avis__points{padding-left:0}
}
@media (max-width:370px){
  .avis__portrait{grid-template-columns:36px auto;padding:6px 9px 6px 6px}
  .avis__portrait img{width:36px;height:36px}
  .avis__portrait b{font-size:13.5px}
}
.tarif--trois{grid-template-columns:1fr 1fr 1fr}
.tarif--trois .tarif__barre{grid-column:1/4}
.tarif__carte--illimite{opacity:var(--k,0)}
.tarif__carte--illimite .tarif__prix{color:var(--calm-deep)}
.tarif__detail{font-size:13px;line-height:1.35}
.tarif__ligne{grid-column:1/4;margin:26px 0 0;font:500 14px/1.4 var(--font-body);color:var(--text-secondary)}
@media (max-width:900px){.tarif--trois{grid-template-columns:1fr 1fr 1fr;gap:8px}.tarif--trois .tarif__carte{padding:12px}.tarif--trois .tarif__prix{font-size:26px}.tarif__detail{font-size:11px}.tarif__ligne{font-size:12.5px;margin-top:22px}}
/* Cinq étoiles, discrètes, sans compteur : la note de la praticienne, rien d'autre */
.avis__etoiles{display:inline-flex;gap:2px;margin-right:2px;vertical-align:middle}
.avis__etoiles i{width:12px;height:12px;background:var(--accent);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ---------- Tarifs ---------- */
.sec--tarifs{background:var(--canvas)}
.periode{display:inline-flex;gap:4px;margin-top:26px;padding:4px;border-radius:999px;background:var(--panel-deep);border:1px solid var(--hairline)}
.periode__btn{border:0;background:transparent;border-radius:999px;padding:10px 16px;font:600 13.5px/1 var(--font-body);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s}
.periode__btn small{font:600 10.5px/1 var(--font-body);color:var(--accent);background:var(--accent-muted);border-radius:999px;padding:4px 7px}
.periode__btn.on{background:var(--text-primary);color:var(--canvas)}
.periode__btn.on small{background:rgba(255,255,255,.18);color:#fff5ea}
.paliers{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.palier{min-width:0}  /* un 1fr nu vaut minmax(auto,1fr) : la pastille d'économie en max-content élargissait la carte au-delà de l'écran */
.palier{position:relative;background:var(--panel);border:1px solid var(--hairline);border-radius:22px;padding:28px 26px;display:grid;gap:14px;align-content:start;box-shadow:0 2px 0 rgba(51,26,15,.05)}
.palier--phare{border-color:var(--accent);box-shadow:0 30px 60px -30px rgba(250,81,9,.45),0 0 0 4px var(--accent-muted);transform:translateY(-10px)}
.palier__badge{position:absolute;top:-14px;left:26px;background:var(--accent);color:#fff5ea;font:700 11px/1 var(--font-heading);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:8px 12px}
.palier__nom{font:700 20px/1.2 var(--font-heading)}
.palier__prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.palier__prix b{font:800 clamp(38px,3.6vw,52px)/1 var(--font-chiffres);letter-spacing:-.01em}
.palier__prix span{font-size:13px;color:var(--text-secondary)}
.palier__economie{margin-top:10px;display:inline-block;width:fit-content;max-width:100%;justify-self:start;align-self:flex-start;font:600 12.5px/1.2 var(--font-body);color:var(--accent);background:var(--accent-muted);border-radius:999px;padding:6px 11px}
.palier--mensuel .palier__economie{color:var(--text-secondary);background:var(--panel-deep)}
.palier__quota{font:600 14px/1.3 var(--font-body);color:var(--text-primary);padding:10px 12px;background:var(--panel-deep);border-radius:10px}
.palier--phare .palier__quota{background:var(--accent-muted)}
.palier__liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--text-secondary)}
.palier__liste li{padding-left:22px;position:relative}
.palier__liste li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--accent-muted)}
.palier__liste li::after{content:"";position:absolute;left:4px;top:9px;width:3px;height:6px;border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.palier__btn{margin-top:6px;justify-content:center}
.tarifs__note{margin-top:22px;font-size:13.5px;color:var(--text-secondary);max-width:70ch}
@media (max-width:900px){.paliers{grid-template-columns:minmax(0,1fr);gap:22px}.palier--phare{transform:none}}

/* ---------- Questions ---------- */
.sec--faq{background:linear-gradient(180deg,var(--canvas) 0%,var(--panel-deep) 100%)}
.sec__in--faq{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:clamp(24px,5vw,72px);align-items:start}
.faq{display:grid;gap:8px}
.faq__q{background:var(--panel);border:1px solid var(--hairline);border-radius:16px;padding:0 20px;transition:box-shadow .3s}
.faq__q[open]{box-shadow:0 18px 40px -26px rgba(51,26,15,.45)}
.faq__q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:600 16px/1.3 var(--font-body);color:var(--text-primary)}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font:500 18px/1 var(--font-mono);color:var(--text-secondary);transition:transform .3s,background .3s}
.faq__q[open] summary::after{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:#fff5ea}
.faq__q p{margin:0;padding:0 0 18px;color:var(--text-secondary);font-size:15px;line-height:1.6;max-width:62ch}
@media (max-width:860px){.sec__in--faq{grid-template-columns:1fr}}

/* ---------- Commencer ---------- */
.sec--commencer{background:radial-gradient(ellipse 80% 70% at 50% 100%,rgba(250,81,9,.14),transparent 62%),var(--panel-deep);padding-top:clamp(80px,12vw,160px);padding-bottom:clamp(80px,12vw,160px)}
.commencer .h2{font-size:clamp(34px,5vw,64px)}
.commencer__btn{font-size:17px;padding:20px 34px}
.commencer__reassurance{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:14px;color:var(--text-secondary)}
.commencer__reassurance li{position:relative;padding-left:18px}
.commencer__reassurance li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Fiche 04 et viewports courts (Safari iPhone) : le texte tient dans sa boîte, le visuel dans le reste */
@media (max-width:720px){
  .trio{gap:8px 12px;margin-top:6px}
  .trio .chiffre b{font-size:24px}
  .trio .chiffre em{font-size:12px;margin-top:1px}
  .trio .chiffre small{display:none}
  .grand small{display:none}
  .fiche p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .vis .cadeau{aspect-ratio:16/6.5;padding:12px 14px}
  .vis .cadeau__montant{font-size:30px}
  .vis .boutique__grille{gap:8px}
  .vis .produit__photo{aspect-ratio:4/3}
  .vis .produit small,.vis .produit__btn{display:none}
  .vis .produit b{font-size:11px;margin-top:2px}
  .vis .produit em{font-size:11px}
  .ca-wrap .notifs--scene .notif[data-n="0"]{bottom:-4%}
}
@media (max-width:720px) and (max-height:720px){
  .pile__stage{padding-top:70px}
  .pile__textes{height:40vh}
  .fiche h3{font-size:20px}
  .fiche p{font-size:12.5px;-webkit-line-clamp:2}
  .grand{margin-top:6px}
  .grand b{font-size:30px}
  .grand em{font-size:14px}
  .grand--univers b{font-size:38px}
  .grand--univers em{font-size:19px}
  .fiche__num{margin-bottom:6px}
  .ident-liste{margin-top:6px}
  .vis .clientes-cadre{height:min(36vh,300px)}
  .vis .resa__cartes{gap:6px}
  .vis .presta__media{aspect-ratio:3/4}
}

/* Fiche 04 : chaque notification se pose sur ce qu'elle annonce */
.appareil--a,.appareil--b{overflow:visible}
.notif--sur{position:absolute;z-index:3;width:min(300px,78%);opacity:var(--k,0);transform:translate(calc((1 - var(--k,0))*40px),calc((1 - var(--k,0))*10px)) scale(calc(.85 + .15*var(--k,0)))}
.appareil--a .notif--cadeau{right:-6%;bottom:-14%;transform-origin:100% 100%}
.appareil--b .notif--boutique{right:-4%;top:-10%;transform-origin:100% 0}
.appareil--b .notif--rdv{left:-6%;bottom:-8%;transform-origin:0 100%}
@media (max-width:720px){
  /* Les deux visuels remontent vers le texte : la boîte de texte est calée sur
     la fiche la plus haute, et celle-ci, plus courte, ouvrait soixante-quinze
     pixels de vide sous son dernier chiffre. */
  .vis[data-i="3"]{align-items:start;padding-top:0;margin-top:-34px}
  .appareil--a .notif--cadeau{right:-2%;bottom:-18%;width:min(240px,70%)}
  .appareil--b .notif--boutique{right:-2%;top:-12%;width:min(240px,70%)}
  .appareil--b .notif--rdv{display:none}
  .appareils{gap:22px}
  .pile__stage{gap:6px}
}
/* Fiche 04, réglage fin : la carte cadeau porte sa notification, la boutique la sienne */
.appareil--a .notif--cadeau{right:-6%;bottom:8%}
.appareil--b .notif--rdv{left:auto;right:-4%;bottom:-6%;transform-origin:100% 100%}
@media (max-width:720px){
  .pile__textes{height:38vh}
  .appareil--a .notif--cadeau{right:0;bottom:6%}
  .appareil--b .notif--boutique{top:auto;bottom:4%;right:0}
}
@media (max-width:720px) and (max-height:720px){.pile__textes{height:40vh}}
.appareil--a .notif--cadeau{right:auto;left:-6%;bottom:8%;transform-origin:0 100%}
.faq__q p a{color:var(--accent);font-weight:500;text-underline-offset:3px}
@media (max-width:720px){.appareil--a .notif--cadeau{left:auto;right:-2%;bottom:6%}}
/* Les cadres épousent leur contenu, pour que les notifications se posent bien dessus */
@media (min-width:721px){
  .appareil--a,.appareil--b{height:auto}
  .appareil--a .notif--cadeau{left:-6%;bottom:-12%}
  .appareil--b .notif--rdv{right:-4%;bottom:-10%}
}

/* ---------- Le problème : la page standardisée au centre, les plaintes autour ---------- */
.h2--agitation{max-width:26ch;font-size:clamp(28px,3.6vw,50px)}
.agitation{margin-top:48px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,1.35fr) minmax(220px,1fr);grid-template-rows:auto auto;gap:22px clamp(18px,3vw,40px);align-items:center}
.plateforme{grid-column:2;grid-row:1/3;background:#eeeeea;border:1px solid #d9d8d2;border-radius:16px;padding:14px;font-family:var(--font-body);color:#3a3a3a;box-shadow:0 30px 60px -30px rgba(51,26,15,.45)}
.plateforme__barre{display:flex;align-items:center;gap:12px;padding:8px 6px 12px;border-bottom:1px solid #d9d8d2}
.plateforme__logo{display:inline-flex;align-items:center;gap:6px;font:800 14px/1 var(--font-autre);color:#6b7a99}
.plateforme__logo i{width:16px;height:16px;border-radius:5px;background:#6b7a99}
.plateforme__logo--petit{font-size:11px}.plateforme__logo--petit i{width:11px;height:11px}
.plateforme__recherche{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#777;background:#fff;border:1px solid #d9d8d2;border-radius:999px;padding:7px 12px}
.plateforme__compte{width:22px;height:22px;border-radius:50%;background:#cfcfca}
.plateforme__liste{display:grid;gap:8px;padding:12px 0}
.fiche-std{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid #e2e1db;border-radius:10px;padding:8px 10px}
.fiche-std__photo{width:44px;height:44px;border-radius:8px;background:repeating-linear-gradient(45deg,#dcdbd5 0 4px,#e8e7e1 4px 8px)}
.fiche-std b{display:block;font:600 12.5px/1.2 var(--font-body)}
.fiche-std span{display:block;font-size:10.5px;color:#777;margin-top:2px}
.fiche-std em{display:block;font-style:normal;font-size:10.5px;color:#555;margin-top:2px}
.fiche-std__btn{font:600 11px/1 var(--font-body);color:#fff;background:#8d98b3;border-radius:999px;padding:8px 12px}
.fiche-std--toi{outline:2px dashed var(--accent);outline-offset:2px;filter:saturate(1)}
.fiche-std__toi{position:absolute;top:-10px;right:10px;font:700 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff5ea;background:var(--accent);border-radius:999px;padding:4px 8px}
.plateforme__options,.plateforme__produits{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 6px;border-top:1px solid #d9d8d2;font-size:11.5px;color:#777}
.plateforme__options span,.plateforme__produits span{font:600 10.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#999}
.plateforme__options em{font-style:normal;background:#fff;border:1px solid #e2e1db;border-radius:999px;padding:5px 10px;color:#555}
.plateforme__options em b{color:#c0392b;font-weight:700}
.plateforme__produits em{font-style:normal;color:#c0392b;font-weight:600}
.plateforme__pied{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 6px 2px;border-top:1px solid #d9d8d2;font-size:10.5px;color:#999}
.plainte{position:relative;padding:18px 20px 18px 56px;background:var(--panel);border:1px solid var(--hairline);border-radius:16px;box-shadow:0 18px 40px -26px rgba(51,26,15,.45)}
.plainte__num{position:absolute;left:16px;top:18px;font:700 13px/1 var(--font-mono);color:var(--accent);padding:6px 8px;border:1px solid var(--accent-muted);border-radius:8px;background:var(--panel)}
.plainte h3{font:600 clamp(17px,1.4vw,21px)/1.25 var(--font-display);letter-spacing:-.01em}
.plainte p{margin-top:8px;color:var(--text-secondary);font-size:14px;line-height:1.5}
.plainte--1{grid-column:1;grid-row:1}
.plainte--2{grid-column:1;grid-row:2}
.plainte--3{grid-column:3;grid-row:1}
.plainte--4{grid-column:3;grid-row:2}
/* Le fil qui relie chaque plainte à ce qu'elle dénonce */
.plainte::after{content:"";position:absolute;top:50%;width:clamp(18px,3vw,40px);height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px);opacity:.8}
.plainte--1::after,.plainte--2::after{right:calc(-1 * clamp(18px,3vw,40px) - 1px)}
.plainte--3::after,.plainte--4::after{left:calc(-1 * clamp(18px,3vw,40px) - 1px)}
.agitation .plainte:nth-child(2){transition-delay:.12s}.agitation .plainte:nth-child(4){transition-delay:.24s}.agitation .plainte:nth-child(5){transition-delay:.36s}
.agitation .plainte.in:nth-child(n){transition-delay:0s}
@media (max-width:900px){
  .agitation{grid-template-columns:1fr;grid-template-rows:auto;gap:14px}
  .plateforme{grid-column:1;grid-row:1}
  .plainte--1,.plainte--2,.plainte--3,.plainte--4{grid-column:1;grid-row:auto}
  .plainte::after{display:none}
}
/* Sur téléphone, la maquette de la plateforme encombre : les quatre plaintes suffisent. */
@media (max-width:720px){.plateforme{display:none}}

/* Le titre d'agitation : centré, un cran plus petit, les mots-clés surlignés au scroll */
.kicker--centre{text-align:center}
.h2--agitation{margin:0 auto;text-align:center;max-width:30ch;font-size:clamp(24px,3vw,42px);line-height:1.2}
.surligne{color:inherit;background:none;position:relative;white-space:nowrap;z-index:0}
.surligne::before{content:"";position:absolute;left:-.12em;right:-.12em;top:.12em;bottom:.02em;z-index:-1;border-radius:.35em;background:linear-gradient(90deg,var(--accent-muted),#ffc9ad);transform:scaleX(var(--s,0));transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.reveal.in .surligne:nth-of-type(1)::before{--s:1;transition-delay:.25s}
.reveal.in .surligne:nth-of-type(2)::before{--s:1;transition-delay:.55s}
.reveal.in .surligne:nth-of-type(3)::before{--s:1;transition-delay:.85s}
@media (prefers-reduced-motion:reduce){.surligne::before{--s:1;transition:none}}
@media (max-width:640px){.surligne{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}.surligne::before{display:none}.surligne{background:linear-gradient(90deg,var(--accent-muted),#ffc9ad);border-radius:.3em;padding:0 .12em}}

/* Fiche 03 : le rappel se pose SUR l'agenda, dans son tiers bas, pas au ras de l'écran */
@media (min-width:901px){
  .vis[data-i="2"]{align-items:center;padding-top:0}
  .vis[data-i="2"] .mail{top:auto;bottom:10%;right:-3%;width:min(440px,72%)}
  .vis[data-i="2"] .agenda-cadre{transform:translateY(-4%)}
}
/* La bulle tient sur une ligne ; un dégradé sombre en haut du hero porte la nav blanche */
.nav__liens a{white-space:nowrap}
.nav.sol{width:min(94vw,1180px);gap:18px}
.nav.sol .nav__liens{gap:16px;font-size:13.5px}
.nav.sol .nav__cta{padding:10px 16px;font-size:13.5px;white-space:nowrap}
.stage::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(20,12,8,.42),rgba(20,12,8,0))}
/* La pilule resserrée était dissymétrique : seize pixels à gauche du logo,
   huit à droite du bouton. L'œil lit le bouton comme collé au bord. Les deux
   côtés valent désormais la même chose. */
/* ---------- Le menu du téléphone (décision : il remplace « Se connecter ») ----
   La barre du téléphone ne peut pas porter quatre choses : à 375 px, logo,
   menu, connexion et bouton demandent 355 px de contenu dans une boîte de 343.
   Le menu prend donc la place de « Se connecter », qui devient la dernière
   entrée de la feuille. La composition ne change pas entre la barre pleine et
   la pilule : rien ne se réarrange sous l'œil quand elle se resserre.
   ------------------------------------------------------------------------- */
.nav__menu{display:none;border:0;background:none;padding:0;cursor:pointer;color:inherit;
  width:40px;height:40px;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.nav__menu-traits{position:relative;display:block;width:18px;height:11px}
.nav__menu-traits i{position:absolute;left:0;width:100%;height:1.6px;border-radius:2px;background:currentColor;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.nav__menu-traits i:nth-child(1){top:0}
.nav__menu-traits i:nth-child(2){bottom:0}
/* Ouvert, les deux traits se croisent : la croix naît du menu, on ne substitue
   pas une icône à une autre. */
.nav.menu-ouvert .nav__menu-traits i:nth-child(1){transform:translateY(4.7px) rotate(45deg)}
.nav.menu-ouvert .nav__menu-traits i:nth-child(2){transform:translateY(-4.7px) rotate(-45deg)}
.nav .nav__menu{text-shadow:none}

/* La feuille emprunte le vocabulaire de la pilule : même crème, même flou,
   même ombre. Posée DANS la barre, elle suit sa largeur sans qu'on la calcule,
   y compris pendant l'animation de resserrement. */
.menu-mobile{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:5;
  padding:10px;border-radius:22px;color:var(--text-primary);
  /* Fond PLEIN, sans flou : un `backdrop-filter` imbriqué dans celui de la
     barre laissait la page transparaître au travers, uniquement en pilule. À
     0,97 d'opacité le flou n'apportait rien de toute façon. */
  background:#fffaf1;
  box-shadow:0 24px 50px -22px rgba(51,26,15,.5),0 0 0 1px rgba(51,26,15,.08),inset 0 1px 0 rgba(255,255,255,.7);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:0 0;
  transition:opacity .28s,transform .5s cubic-bezier(.34,1.56,.64,1),visibility .28s}
.nav.menu-ouvert .menu-mobile{opacity:1;visibility:visible;transform:none}
.menu-mobile__liens{display:grid}
.menu-mobile a{display:block;padding:12px 14px;border-radius:14px;text-decoration:none;
  color:var(--text-primary);font:500 15.5px/1.2 var(--font-body);text-shadow:none;
  transition:background .25s}
.menu-mobile a:active{background:rgba(51,26,15,.06)}
/* La connexion est d'un autre ordre que les ancres : elle quitte la page. Un
   filet le dit, plutôt qu'un libellé de section qui mentirait. */
.menu-mobile__connexion{margin-top:6px;padding-top:14px !important;
  border-top:1px solid rgba(51,26,15,.12);color:var(--text-secondary) !important;font-weight:400 !important}

@media (max-width:900px){
  /* La hiérarchie de gauche à droite : le menu, puis la marque qui lui est
     accolée, puis la connexion au milieu, puis l'action. Le menu ouvre la
     ligne parce qu'une signalétique se cherche au bord ; le logo reste contre
     lui pour qu'ils forment UN bloc d'identité et non deux objets flottants. */
  .nav{gap:8px}
  .nav__menu{display:inline-flex;order:-1}
  /* Deux pixels de chaque côté au lieu de six : c'est ce qui permet au menu de
     s'aligner sur la même marge que tout le reste plutôt que de mordre dessus. */
  .nav__connexion{padding-left:2px;padding-right:2px}
  /* « Se connecter » se pose au MILIEU de la place restante : deux marges
     automatiques, pas une. Avec une seule, elle collait au bouton. */
  .nav__connexion{margin-left:auto;margin-right:auto}
  .nav__cta{margin-left:0}
  /* En pilule, « Se connecter » disparaît et emporte sa marge automatique :
     sans celle-ci, le bouton restait collé au logo, le vide à droite. */
  .nav.sol .nav__cta{margin-left:auto}
  /* Une fois la barre resserrée, la connexion cède sa place : la pilule est
     plus étroite que la barre pleine, et c'est elle qui manque de largeur.
     Elle reste à une touche, en bas de la feuille. */
  .nav.sol .nav__connexion{display:none}
}
@media (min-width:901px){.nav__menu,.menu-mobile{display:none}}

@media (max-width:900px){
  .nav.sol{width:min(94vw,520px);padding:8px 16px;gap:10px}
  /* `.nav.sol .nav__cta` (deux classes) l'emportait sur la règle mobile de
     `.nav__cta` (une seule) : en pilule, le bouton reprenait sa taille de
     BUREAU. Les trois enfants faisaient alors 349 px dans une boîte de 337,
     et le bouton débordait par-dessus le padding droit — d'où l'impression
     qu'il touche le bord. On remet la taille compacte, à spécificité égale. */
  .nav.sol .nav__cta{padding:10px 14px;font-size:13px}
}

/* Les sites réels : on voit qu'on peut cliquer */
.vitrine{position:relative;cursor:pointer}
.vitrine__pied{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--hairline)}
.vitrine__pied b{font:600 15px/1.2 var(--font-body)}
.vitrine__cta{font:600 13px/1 var(--font-body);font-style:normal;color:var(--accent);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--accent-muted);border-radius:999px;padding:8px 12px;background:var(--panel);transition:background .3s,color .3s,border-color .3s}
.vitrine__cta i{font-style:normal;transition:transform .3s var(--ease-out)}
.vitrine:hover .vitrine__cta,.vitrine:focus-visible .vitrine__cta{background:var(--accent);color:#fff5ea;border-color:var(--accent)}
.vitrine:hover .vitrine__cta i{transform:translate(2px,-2px)}
.vitrine__voile{position:absolute;left:0;right:0;top:0;aspect-ratio:1440/900;display:grid;place-items:center;background:rgba(51,26,15,0);transition:background .35s;pointer-events:none}
.vitrine__voile span{font:600 14px/1 var(--font-body);color:var(--text-primary);background:rgba(255,250,241,.96);border-radius:999px;padding:12px 18px;box-shadow:0 14px 30px -14px rgba(51,26,15,.6);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.vitrine:hover .vitrine__voile{background:rgba(51,26,15,.18)}
.vitrine:hover .vitrine__voile span,.vitrine:focus-visible .vitrine__voile span{opacity:1;transform:none}
@media (hover:none){.vitrine__voile{display:none}}
/* Fiche 03 sur téléphone : le calendrier se cale juste sous le texte, et le
   rappel arrive PAR-DESSUS lui, à cheval sur sa moitié basse. C'est l'ordre du
   récit : l'agenda se remplit, puis le rappel part tout seul. Posé sous le
   calendrier il tombait sous le pli, posé au-dessus il volait la place du
   calendrier ; il lui passe donc devant. `--cadre-h` est écrite par scenes.js,
   seul endroit qui connaisse la hauteur du cadre une fois mis à l'échelle. */
@media (max-width:900px){
  /* Le calendrier se cale sous le texte, d'un cran plus haut que le visuel de
     la fiche 02 : la boîte de texte a une hauteur fixe, et cette fiche-ci,
     courte, y laissait soixante-cinq pixels de vide. La carte du rappel suit,
     du même nombre de pixels, puisqu'elle se positionne sur le visuel entier
     et non sur le cadre : leur chevauchement ne bouge pas. */
  .vis[data-i="2"]{align-items:start;padding-top:0;margin-top:-10px}
  .vis[data-i="2"] .agenda-cadre{margin-top:0}
  .vis[data-i="2"] .mail{position:absolute;left:0;right:auto;top:calc(var(--cadre-h,200px) * .62);
    width:100%;margin-top:0;z-index:3;box-sizing:border-box;
    transform:translateY(calc((1 - var(--k,0))*20px)) rotate(calc((1 - var(--k,0))*-1.5deg))}
  /* Deux lignes de corps, et un badge sur UNE ligne : la troisième ligne ne
     disait rien de plus, et chacune rendait la carte plus haute, donc plus
     couvrante pour le calendrier qu'elle est censée chevaucher. */
  .vis[data-i="2"] .mail__corps{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .vis[data-i="2"] .mail__badge{font-size:10.5px;padding:7px 10px;white-space:nowrap}
}