/* ============================================================
   HOME V10 — ce qui est propre à la home : le loader, la scène three.js, le hero, les chapitres
   au défilement, les étiquettes de la carte. Se charge APRÈS css/v10.css, qui porte le reste (barre,
   méga-menu, pied de page, prise de contact). Extrait de public/preview/home-vision-3d-v10/ (06/10),
   copie de Loïc ; la copie « mix », les outils du prototype et le sélecteur de versions sont restés
   dans l'aperçu.
   ============================================================ */
:root{--sand:#f7f1e7;--gold:#b98a45;--gold-d:#8a6127}
body{transition:background-color .6s ease}
html.is-light body{background:#f7f1e7}
html.is-light,html.is-light *{scrollbar-color:rgba(138,97,39,.35) transparent}
html.is-light ::-webkit-scrollbar-thumb{background:rgba(138,97,39,.35);background-clip:padding-box}
.grad-t{color:inherit}
/* le rail des étapes : sur téléphone, il passe en ligne au bas de l'écran ; il s'efface sous un menu ouvert */
html.menu-open .rail{opacity:0;pointer-events:none}
@media (max-width:960px){

  /* les points du rail passent en ligne sous la carte, et les versions de la maquette vont dans le menu */
  body .rail{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));right:auto;left:50%;transform:translateX(-50%);flex-direction:row;align-items:center;gap:5px;
    height:22px;padding:0 10px;border-radius:999px;background:rgba(14,17,34,.5);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  body .rail a,body .rail a.is-first{height:22px;width:auto;margin:0;gap:0;justify-content:center;font-size:0}
  body .rail a.is-first{margin-left:5px}body .rail a:first-child{margin-left:0}
  body .rail a::after,body .rail a.is-on::after{width:4px;height:4px;border-radius:2px;transform:none;box-shadow:none;background:rgba(255,255,255,.28);transition:width .35s cubic-bezier(.2,.8,.2,1),background .3s}
  body .rail a.is-past::after{background:rgba(140,194,255,.6)}
  body .rail a.is-on::after{width:16px;background:#fff}
  html.is-light body .rail{background:rgba(255,252,246,.7);border-color:rgba(138,97,39,.16)}
  html.is-light body .rail a::after{background:rgba(42,33,22,.22)}
  html.is-light body .rail a.is-past::after{background:rgba(138,97,39,.5)}
  html.is-light body .rail a.is-on::after{background:var(--gold-d)}
}
/* ─── LE LOADER ───────────────────────────────────── */
/* Le logo seul, en particules : un nuage épars qui se range en Oméga, dans le bleu de la marque
   (#479AF3, --blue), puis s'éparpille quand la page apparaît. Ni texte, ni barre. */
.loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 45%,#1b2748,#161d31 70%);transition:opacity .7s ease,visibility .7s}
.loader.is-done{opacity:0;visibility:hidden}
.loader svg{position:relative;width:120px;height:auto;overflow:visible}
/* la toile couvre l'écran, l'Oméga SVG ne sert plus que de cible (et de repli sans canvas) */
.loader canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.loader.is-pts svg{visibility:hidden}
.loader path{fill:rgba(71,154,243,0);stroke:var(--blue);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:omDraw 1s cubic-bezier(.6,0,.2,1) forwards,omFill .5s .8s ease forwards}
@keyframes omDraw{to{stroke-dashoffset:0}}
@keyframes omFill{to{fill:var(--blue);stroke:rgba(71,154,243,0)}}
@media (prefers-reduced-motion:reduce){.loader path{animation:none;stroke-dashoffset:0;fill:var(--blue)}}

/* ─── LA SCÈNE ────────────────────────────────────── */
html.can-grab body{cursor:grab}
html.is-grabbing body,html.is-grabbing *{cursor:grabbing !important;user-select:none}
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;opacity:0}
.fallback #gl{display:none}
.fallback body{background:radial-gradient(60% 60% at 70% 50%,rgba(71,154,243,.22),transparent 70%),var(--ink)}
main{position:relative;z-index:1}
.labels{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.lab{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s;white-space:nowrap;will-change:transform}
.hlabel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.3);color:var(--tx)}
.hlabel{padding:6px 14px;height:40px;display:flex;align-items:center;gap:10px}
.p3--logo .hlabel{position:relative;background:rgba(12,20,42,.94);border-color:rgba(255,255,255,.22);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.hlabel img{filter:brightness(0) invert(1);opacity:.92}
.hlabel img{height:24px;width:auto;max-width:96px;object-fit:contain}
/* le CHSF tient sur deux lignes à côté de son S : à 24 px, son texte faisait 4 px de haut */
.hlabel img[src*="chsf"]{height:32px;max-width:none;margin:-2px 0}
.hlabel::after{content:"";position:absolute;left:50%;bottom:calc(-1 * var(--tige,8px));width:1.5px;height:var(--tige,8px);background:rgba(255,255,255,.32);transform:translateX(-50%)}
.hlabel--main{height:auto;padding:8px 22px 8px 16px;border-radius:999px;gap:14px}
.hlabel--main span{padding-left:14px;border-left:1px solid rgba(255,255,255,.16)}
.hlabel--main small{display:block;font-size:11px;font-weight:600;color:#7ee3b0;letter-spacing:.02em}
.hlabel--main b{display:block;font-size:12.5px;line-height:1.2}
.case{pointer-events:auto;font-size:11.5px;font-weight:700;color:var(--tx);background:var(--ink);border-radius:999px;padding:6px 11px}
.svc{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--tx)}
.svc::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(140,194,255,.9))}
.svc span{background:rgba(22,47,78,.85);border:1px solid rgba(140,194,255,.35);border-radius:999px;padding:4px 10px;backdrop-filter:blur(6px)}
/* l'étiquette de la région allumée : sa ville, et ce qu'elle fait remonter au tableau de bord */
.reg{z-index:2;background:rgba(14,22,44,.96);border:1px solid rgba(140,194,255,.4);border-radius:12px;padding:9px 13px;font-size:12px;color:rgba(var(--tx-rgb),.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 36px rgba(0,0,0,.35);white-space:nowrap}
.reg small{display:block;font-size:11px;color:var(--blue-l);margin-bottom:2px}
.reg b{display:block;color:var(--tx);font-size:14px;font-weight:700}
.reg--hint{padding:8px 14px;border-radius:999px;border-color:rgba(140,194,255,.55);animation:hintRespire 2.4s ease-in-out infinite}
.reg--hint b{display:flex;align-items:center;gap:8px;font-size:13px}.reg--hint svg{width:14px;height:14px;color:var(--blue-l)}
@keyframes hintRespire{50%{box-shadow:0 0 0 6px rgba(71,154,243,.12),0 14px 36px rgba(0,0,0,.35)}}
.reg--annecy{border-color:rgba(126,227,176,.55)}.reg--annecy small{color:#7ee3b0}
.nation{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.nation b{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:-.005em;color:var(--tx);border-radius:999px;padding:8px 18px 8px 14px;
  background:rgba(71,154,243,.16);border:1px solid rgba(71,154,243,.6);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 28px rgba(0,0,0,.3)}
.nation b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(71,154,243,.22)}
.debate{width:250px;white-space:normal;background:#fffdf8;color:#2a2116;border-radius:16px;padding:12px 14px;box-shadow:0 20px 50px rgba(110,80,30,.16);border:1px solid rgba(138,97,39,.14);font-size:12.5px;line-height:1.4}
.debate__who{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:11.5px;color:var(--ink-dim)}
.debate__who i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#e2b36b,#b98a45);flex:none}
.debate__who b{color:#2a2116}
.debate__tag{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-d);background:#f4e8d4;border-radius:999px;padding:3px 8px}
.case-card{pointer-events:auto;background:#fff;color:#0a0c18;border-radius:14px;padding:10px 14px;box-shadow:0 14px 40px rgba(0,0,0,.35);font-size:12px;line-height:1.35;text-align:center}
.case-card b{display:block;font-size:13.5px}
.case-card span{color:var(--ink-dim)}
.svc span{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 11px;font-size:13px;letter-spacing:.005em;
  border-color:color-mix(in srgb,var(--c) 58%,rgba(255,255,255,.22)) !important;background:color-mix(in srgb,var(--c) 18%,rgba(12,18,38,.58)) !important;
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.3)}
.svc span svg{width:15px;height:15px;color:color-mix(in srgb,var(--c) 70%,#fff)}
.svc::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7)) !important}
.svc span{transition:transform .3s,box-shadow .3s}
/* les pills de l'hôpital, projetées dans la scène (cf. placePill) : .p3 est un point (0 × 0) placé à
   l'accroche, la pill s'y suspend. L'opacité est portée par la pill et son trait (--o), pas par un
   parent : un parent en fondu couperait le flou d'arrière-plan. */
.css3d{position:absolute;inset:0;pointer-events:none}
.p3{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.p3__in{position:absolute;left:0;top:0;white-space:nowrap;width:max-content} /* sans max-content, la pill se calait sur l'accroche (0 px) et l'icône s'écrasait */
.p3 svg{flex:none}
.p3--top{transform:translate(-50%,-100%)}
.p3--side{transform:translate(0,-50%)}
.svc > span,.svc::before{opacity:var(--o,0)}
.p3 .hlabel{opacity:var(--o,0)}
.p3--logo{display:flex;flex-direction:column;align-items:center}
.p3__tige{display:block;width:1.5px;height:var(--tige,10px);background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(140,194,255,.7));opacity:var(--o,0)}
/* leurs traits sont dessinés dans la scène (ils entrent dans les étages) : plus de trait HTML */
.p3 .svc::before,.p3 .hlabel::after{display:none}
/* l'état de chaque étage, dans sa pill : discret, sauf l'étage en service et celui en formation */
.svc__etat{font-style:normal;font-weight:500;font-size:11px;color:rgba(var(--tx-rgb),.55);padding-left:9px;margin-left:2px;border-left:1px solid rgba(255,255,255,.16)}
.svc__etat:empty{display:none} /* plus d'état par étage à Saint-Joseph (08/10) : sans texte, ni filet ni marge */
.svc__etat.is-actif,.svc__etat.is-forme{color:#7ee3b0;display:inline-flex;align-items:center;gap:6px}
.svc__etat.is-actif::before,.svc__etat.is-forme::before{content:"";width:6px;height:6px;border-radius:50%;background:#7ee3b0}
.svc__etat.is-forme{color:#ffd27a}.svc__etat.is-forme::before{background:#ffd27a;animation:svcPouls 1.6s ease-in-out infinite}
@keyframes svcPouls{50%{box-shadow:0 0 0 5px rgba(255,210,122,.18)}}
/* la photo qui sort de l'étage : ancrée sur son flanc gauche, elle glisse hors de la dalle, reliée par un trait */
.p3--photo{transform:translate(-50%,0)}
.p3--gauche{transform:translate(-100%,-50%)}.p3--gauche.svc span{transform-origin:100% 50%}
.sj-photo{position:relative;margin:18px 0 0;width:250px;opacity:var(--o,0);transform:translateY(-30px) scale(.4);transform-origin:50% 0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);border-radius:16px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,210,122,.35)}
.p3--photo.is-on .sj-photo{transform:none}
.sj-photo img{display:block;width:100%;height:160px;object-fit:cover;object-position:50% 40%}
.sj-photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;padding:22px 12px 9px;font-size:11.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,rgba(8,12,26,0),rgba(8,12,26,.82))}
.sj-photo figcaption i{width:6px;height:6px;border-radius:50%;background:#ffd27a;animation:svcPouls 1.6s ease-in-out infinite}
.sj-photo::after{content:"";position:absolute;left:50%;top:-18px;width:1.5px;height:18px;background:linear-gradient(0deg,rgba(255,210,122,.75),rgba(255,210,122,.2))}
.p3--photo .sj-photo{overflow:visible}.p3--photo .sj-photo img{border-radius:16px}.p3--photo .sj-photo figcaption{border-radius:0 0 16px 16px}
.svc span{transform-origin:0 50%}
.svc span{background:color-mix(in srgb,var(--c) 22%,rgba(12,18,38,.66)) !important;backdrop-filter:blur(14px) saturate(140%) !important;-webkit-backdrop-filter:blur(14px) saturate(140%) !important}
.hlabel--main{background:rgba(16,26,52,.55);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.svc.is-lit span{transform:scale(1.12);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent),0 8px 24px rgba(0,0,0,.35)}
.n19{font-size:clamp(15px,1.4vw,19px);font-weight:600;letter-spacing:.01em;color:var(--tx);text-shadow:0 2px 14px rgba(0,0,0,.7)}
.nation span{font-size:11px;color:var(--dim);letter-spacing:.06em}
.neigh{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(190,220,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* ─── les humains. Les points deviennent des visages, puis de vraies photos : la photo sort d'une
   trame de points (un masque de disques qui grossissent jusqu'à se toucher), la même que le nuage. ─── */
@property --d{syntax:'<length>';inherits:false;initial-value:0px}
.faces{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.face{position:absolute;left:0;top:0;border-radius:50%;overflow:hidden;opacity:0;will-change:transform,opacity;--cell:8px;
  -webkit-mask-image:radial-gradient(circle,#000 var(--d),transparent calc(var(--d) + .7px));mask-image:radial-gradient(circle,#000 var(--d),transparent calc(var(--d) + .7px));
  -webkit-mask-size:var(--cell) var(--cell);mask-size:var(--cell) var(--cell);-webkit-mask-position:center;mask-position:center}
.face.is-full{-webkit-mask-image:none;mask-image:none}
.soin-play3{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;pointer-events:none}
.soin-play{position:absolute;left:-32px;top:-32px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;opacity:0;pointer-events:none;
  color:#fff;background:rgba(10,18,40,.28);border:1.5px solid rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,scale .3s}
.soin-play svg{width:16px;height:16px;margin-left:3px}
.soin-play:hover{background:var(--blue);scale:1.08}
.soin-play:focus-visible{outline:2px solid var(--blue-l);outline-offset:4px}
html.soin-hover main{cursor:pointer}
/* à droite : la scène des soignants vit à gauche de l'écran */
.tune{position:fixed;right:54px;top:70px;z-index:300;width:280px;max-height:calc(100vh - 28px);overflow:auto;font:12px/1.35 var(--f, system-ui),sans-serif;color:#e8f0ff;
  background:rgba(8,14,32,.9);border:1px solid rgba(255,255,255,.14);border-radius:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tune__hd{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;position:sticky;top:0;background:inherit}
.tune__hd button{width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.1);color:inherit}
.tune.is-min .tune__bd{display:none}
.tune__bd{padding:0 12px 12px}
.tune__sec{margin:10px 0 4px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8cc2ff}
.tune details{border-top:1px solid rgba(255,255,255,.08);padding:6px 0}.tune summary{cursor:pointer;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8cc2ff;padding:4px 0}
.tune label{display:block;margin:6px 0}
.tune label span{display:flex;justify-content:space-between;gap:8px;color:rgba(232,240,255,.8)}
.tune output{font-variant-numeric:tabular-nums;color:#fff}
.tune input[type=range]{width:100%;accent-color:#479af3}
.tune .tune__chk{display:flex;align-items:center;gap:8px;margin:8px 0}.tune__chk input{accent-color:#479af3;width:16px;height:16px}
.tune__btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tune__btns button{flex:1 1 auto;padding:7px 8px;border-radius:8px;background:rgba(71,154,243,.22);color:#fff;font-weight:600}
.tune textarea{width:100%;margin-top:8px;font:11px/1.3 ui-monospace,monospace;color:#bcd4ff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px;resize:vertical}
.beat .hint{margin-top:14px;font-size:13px;color:var(--dim-2)}
@media (hover:none){.hint--mouse{display:none}}
.vlb{width:min(1100px,92vw);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.vlb iframe{width:100%;height:100%;border:0;display:block}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(170,210,255,.5),inset 0 -30px 40px rgba(10,20,50,.25)}
.face--crowd::after{box-shadow:inset 0 0 0 2px rgba(170,210,255,.7)}
.face--crowd{pointer-events:auto;cursor:pointer}
.eclat{position:fixed;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;z-index:60;pointer-events:none;animation:eclat 1.2s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes eclat{to{transform:translate(var(--dx),var(--dy)) scale(.25);opacity:0}}
.beat__photo{position:relative;margin:-30px -32px 24px;height:150px;border-radius:24px 24px 0 0;overflow:hidden;--d:0px;
  -webkit-mask-image:radial-gradient(circle,#000 var(--d),transparent calc(var(--d) + .7px));mask-image:radial-gradient(circle,#000 var(--d),transparent calc(var(--d) + .7px));
  -webkit-mask-size:9px 9px;mask-size:9px 9px;transition:--d 1.2s cubic-bezier(.3,.7,.2,1) .3s}
.beat.is-on .beat__photo{--d:7px}
.beat__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
@media (max-width:760px){.beat__photo{height:110px;margin:-22px -22px 18px}}
@media (prefers-reduced-motion:reduce){.beat__photo{transition:none;--d:7px}}
@media (max-width:760px){.svc,.neigh{display:none}.debate{width:210px;font-size:11.5px;padding:10px 12px}.lab--hide-m{display:none}}

/* ─── ① HERO ──────────────────────────────────────── */
.hero{position:relative;height:100vh;height:100dvh;display:flex;align-items:flex-end;overflow:hidden;background:#0b1020}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* voile : fort à gauche, là où vivent le titre et le texte ; la vidéo respire à droite */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(11,16,32,.86) 0%,rgba(11,16,32,.62) 30%,rgba(11,16,32,.18) 58%,rgba(11,16,32,0) 75%),
  linear-gradient(180deg,rgba(11,16,32,.45) 0%,rgba(11,16,32,0) 28%,rgba(22,29,49,0) 62%,var(--ink) 100%)}
.hero__in{position:relative;z-index:1;padding-bottom:clamp(56px,10vh,110px)}
.hero .btn{height:48px;font-size:14.5px}
.btn--glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:var(--tx);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--glass:hover{background:#fff;color:#0a0c18;border-color:#fff}
.hero h1{font-size:clamp(46px,7vw,108px);letter-spacing:-.045em;line-height:.92;max-width:10ch}
.hero__sub{margin:22px 0 32px;font-size:clamp(14.5px,1.1vw,16px);font-weight:400;line-height:1.55;color:rgba(var(--tx-rgb),.74);max-width:44ch}
.proof{display:flex;align-items:baseline;gap:12px;margin:0 0 34px;font-size:15px;color:var(--dim)}
.proof b{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;color:var(--tx);line-height:1}
.hero__row{display:flex;flex-wrap:wrap;gap:14px}
.hero__trust{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12.5px;color:var(--dim-2)}
.hero__trust span{display:inline-flex;align-items:center;gap:8px}
.hero__trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.cue{position:absolute;left:50%;bottom:26px;z-index:1;width:1px;height:44px;overflow:hidden;transform:translateX(-50%);background:linear-gradient(rgba(var(--tx-rgb),0),rgba(var(--tx-rgb),.16));opacity:0;transition:opacity .9s ease;pointer-events:none}
.cue.is-on{opacity:1}
.cue i{position:absolute;left:0;top:0;width:1px;height:45%;background:linear-gradient(rgba(71,154,243,0),var(--blue));transform:translateY(-100%);animation:cue 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{to{transform:translateY(225%)}}
@media (prefers-reduced-motion:reduce){.cue i{animation:none;transform:translateY(60%)}}
@keyframes blink{50%{opacity:.35}}

/* ─── LES CHAPITRES ───────────────────────────────── */
/* Les chapitres ne portent plus leurs textes : ce sont des longueurs de défilement. Les cartes
   vivent toutes dans un même calque fixe (.stage), pour qu'il y en ait TOUJOURS une à l'écran,
   y compris au passage d'un chapitre à l'autre, là où la V6 laissait un temps mort. */
.chap{position:relative}
.stage{position:fixed;inset:0;z-index:2;pointer-events:none;will-change:transform}
.stage > .wrap{position:relative;height:100%}
/* Toujours le même côté : l'illustration à gauche amène le texte, à droite, dans le sens de la
   lecture. Le texte ne revient plus à gauche à Codex. */
.beat,.sheet{position:absolute;right:32px;top:50%;translate:0 -50%;max-width:520px;width:calc(100% - 64px)}
.beat{opacity:0;transform:translateY(38px);pointer-events:none;z-index:3;
  transition:opacity .55s ease,transform .75s cubic-bezier(.2,.8,.2,1),background .6s,color .6s,border-color .6s}
/* .glass déclare sa propre transition (plus bas) et effaçait celle-ci : les cartes de verre
   apparaissaient et disparaissaient sans fondu. On réunit les deux. */
.beat.glass{transition:opacity .55s ease,transform .75s cubic-bezier(.2,.8,.2,1),background .6s,color .6s,border-color .6s}
.beat.is-on{opacity:1;transform:none;pointer-events:auto}
/* la carte qui s'en va rejoint la pile, derrière la nouvelle ; en revenant en arrière, elle en ressort */
.beat.is-past{opacity:0;transform:translateY(-16px) scale(.95);z-index:2;transition:opacity .38s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
/* Codex quitte la page sur un fondu long : derrière lui, le fond repasse au sombre (cf. FROM_CODEX) */
.beat[data-chap=codex].is-past{transform:translateY(-10px) scale(.98);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.beat.no-tr,.sheet.no-tr{transition:none !important}
@media (prefers-reduced-motion:reduce){.beat,.beat.is-past,.sheet{transform:none !important;transition:opacity .25s ease !important}}
.beat--center,.sheet.is-center{left:0;right:0;margin:0 auto;max-width:760px;text-align:center}
.beat--center .eyebrow{justify-content:center}
/* La pile : une feuille par carte déjà lue dans le chapitre, qui dépasse au-dessus de la carte
   en cours. Elle dit où on en est, sans jamais rien masquer. */
.sheet{z-index:1;border-radius:24px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,54,92,.72),rgba(22,29,49,.5));border:1px solid rgba(255,255,255,.1);
  transform:translateY(0) scale(1);transform-origin:50% 0;
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
.sheet.is-1{opacity:.9;transform:translateY(-12px) scale(.955)}
.sheet.is-2{opacity:.55;transform:translateY(-23px) scale(.91)}
.sheet.is-3{opacity:.34;transform:translateY(-33px) scale(.865)}
.sheet.is-4{opacity:.18;transform:translateY(-42px) scale(.82)}
html.is-light .sheet{background:linear-gradient(180deg,rgba(255,250,240,.92),rgba(247,241,231,.7));border-color:rgba(138,97,39,.16)}
/* la progression dans le chapitre : un trait par carte, le trait en cours s'allonge */
.beat__prog{display:flex;gap:6px;margin:0 0 16px}
.beat__prog i{height:3px;width:14px;border-radius:2px;background:rgba(255,255,255,.2);transition:width .5s cubic-bezier(.2,.8,.2,1),background .4s}
.beat__prog i.is-done{background:rgba(140,194,255,.6)}
.beat__prog i.is-on{width:30px;background:var(--blue-l)}
html.is-light .beat__prog i{background:rgba(42,33,22,.14)}
html.is-light .beat__prog i.is-done{background:rgba(138,97,39,.4)}
html.is-light .beat__prog i.is-on{background:var(--gold-d)}

/* la communauté : plus un halo rond derrière le texte, un voile sur tout l'écran, plus dense au
   centre (le texte) et qui s'éclaircit vers les bords. Il vit et s'efface avec la carte.
   Il déborde de 100vh au-dessus et au-dessous d'elle (plein écran même sur mobile, où la carte est en
   bas), et son ellipse est en vw/vh : 72vw × 64vh, soit l'ancienne 36 % × 32 % d'une boîte de
   200vw × 200vh. Sous la carte, un masque le ramène à 20 % : la trame de la fin se voit à la lisière
   du pied de page et un peu derrière lui. */
.beat--center::before{content:"";position:absolute;left:50%;top:-100vh;bottom:-100vh;width:200vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72vw 64vh at 50% 50%,rgba(22,31,64,.9),rgba(22,31,64,.7) 55%,rgba(16,23,46,.46) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 96vh),rgba(0,0,0,.2) calc(100% - 76vh));
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 96vh),rgba(0,0,0,.2) calc(100% - 76vh))}
.beat__num{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--dim-2);margin-bottom:14px;font-variant-numeric:tabular-nums}
.beat h2{font-size:clamp(30px,3.5vw,50px)}
.beat h3{font-size:clamp(26px,2.6vw,36px)}
.beat p{margin:18px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--dim)}
.beat .btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.glass{padding:30px 32px;border-radius:24px;background:linear-gradient(180deg,rgba(22,29,49,.78),rgba(22,29,49,.56));border:1px solid var(--line-d);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .6s,color .6s,border-color .6s}
html.is-light .glass{background:rgba(255,252,246,.86);border-color:rgba(138,97,39,.14);color:#2a2116;box-shadow:0 30px 80px rgba(110,80,30,.12)}
html.is-light .glass p,html.is-light .glass .mini{color:rgba(42,33,22,.7)}
html.is-light .glass .beat__num{color:rgba(10,12,24,.45)}
html.is-light .glass .mini b{color:#2a2116}
html.is-light .glass .eyebrow,html.is-light .glass .beat__num{color:rgba(138,97,39,.75)}
html.is-light .glass .btn--solid{background:#0a0c18;color:var(--tx)}
html.is-light .glass .btn--ghost{border-color:rgba(10,12,24,.3);color:#0a0c18}
/* un libellé, pas une pastille */
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.02em;padding:0;border-radius:0;background:none;color:var(--blue-l);margin-bottom:16px}
html.is-light .tag{color:var(--blue-d)}
/* « En construction » reste une pastille (statut du produit, pas un libellé de rubrique) */
.tag--build{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(194,105,47,.16);color:#c2692f}
html.is-light .tag--build{background:rgba(185,138,69,.16);color:var(--gold-d)}
.tag--build::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.6s ease-in-out infinite}
.stat{display:flex;align-items:baseline;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-d)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-d)}
.stats b{display:block;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.035em;line-height:1}
.stats span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--dim)}
.stat b{font-size:clamp(40px,4vw,56px);letter-spacing:-.04em;line-height:1}
.stat span{font-size:14px;color:var(--dim);line-height:1.45}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.versus div{border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.45;border:1px solid var(--line-d);color:var(--dim)}
.versus div b{display:block;color:var(--tx);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.versus .with{background:rgba(71,154,243,.14);border-color:rgba(140,194,255,.4)}
.versus .with b{color:var(--blue-l)}
.mini{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--dim)}
.mini li{display:flex;gap:10px;align-items:flex-start}
.mini li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:8px;background:var(--cyan)}
.mini li.todo::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cyan)}
.mini b{color:var(--tx)}
.flags{margin-top:18px;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--dim)}
.flag{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.certs{margin-top:22px;display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line-d);font-size:13.5px;color:var(--dim)}
.certs img{height:38px;width:auto;flex:none}
/* vers la page Codex : un lien sous le texte, pour laisser la liste d'attente seule en bouton */
.codex-lien{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--gold-d);text-decoration:underline;text-decoration-color:rgba(138,97,39,.35);text-underline-offset:4px;transition:text-decoration-color .2s}
.codex-lien:hover{text-decoration-color:currentColor}
.codex-lien .arrow{width:16px;height:16px;transition:transform .2s}
.codex-lien:hover .arrow{transform:translateX(3px)}
@media (max-width:760px){.codex-lien{margin-top:8px;font-size:13.5px}}
/* la liste d'attente de Codex, tenue dans le temps : un champ, un bouton */
.wait{margin-top:24px;display:flex;gap:6px;padding:5px;border-radius:999px;background:#fff;border:1px solid rgba(138,97,39,.2)}
.wait label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wait input{flex:1;min-width:0;height:44px;border:0;background:transparent;padding:0 16px;font-size:14.5px;outline:none;color:#2a2116}
.wait input::placeholder{color:rgba(42,33,22,.4)}
.wait .btn{height:44px;padding:0 20px;font-size:14px;background:#2a2116;color:var(--tx)}
.wait__note{margin:10px 0 0 !important;font-size:12.5px !important;color:rgba(42,33,22,.55) !important}
/* sur mobile, plus de bouton enfermé dans le champ : le champ seul, puis le bouton pleine largeur.
   flex:none, sinon en colonne le flex:1 du champ porte sur sa hauteur et l'écrase à 22px ;
   16px dans le champ, sinon iOS zoome la page au focus. */
@media (max-width:560px){
  .wait{flex-direction:column;gap:8px;padding:0;border:0;border-radius:0;background:none}
  .wait input{flex:none;height:50px;padding:0 20px;font-size:16px;border-radius:999px;background:#fff;border:1px solid rgba(138,97,39,.22);transition:border-color .2s,box-shadow .2s}
  .wait input:focus{border-color:var(--gold-d);box-shadow:0 0 0 3px rgba(185,138,69,.16)}
  .wait .btn{height:50px;justify-content:center;font-size:15px}
}
.soon{display:inline-flex;align-items:center;height:52px;padding:0 20px;border-radius:999px;border:1.5px dashed rgba(255,255,255,.35);color:var(--dim);font-size:14px;font-weight:600}
/* pionniers : qui êtes-vous */
.who{margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.who button{height:42px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);font-size:14px;font-weight:600;color:rgba(var(--tx-rgb),.85);transition:background .2s,border-color .2s,color .2s}
.who button[aria-pressed="true"]{background:#fff;border-color:#fff;color:#0a0c18}
.lists{margin:14px 0 0 !important;font-size:13.5px !important;color:var(--dim) !important}
.lists b{color:var(--tx)}
.news{margin:18px auto 0;max-width:540px;display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line-d);backdrop-filter:blur(8px)}
.news label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.news input{flex:1;min-width:0;height:48px;border:0;background:transparent;padding:0 18px;font-size:15px;outline:none}
.news input::placeholder{color:var(--dim-2)}
.news .btn{height:48px}
.news__note{margin:12px 0 0 !important;font-size:12.5px !important;color:var(--dim-2) !important}
@media (max-width:960px){.who{margin-top:14px;gap:6px}.who button{height:36px;padding:0 12px;font-size:13px}}

/* le rail : un point par changement de la scène, cliquable ; le nom de l'étape au survol, celui
   du chapitre sous le point actif. Les chapitres sont séparés par un espace. */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:0;opacity:0;transition:opacity .3s}
.rail.is-on{opacity:1}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px;font-size:11px;font-weight:600;letter-spacing:.06em;color:transparent;transition:color .2s;white-space:nowrap}
.rail a.is-first{margin-top:14px}.rail a:first-child{margin-top:0}
.rail a::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.42);transition:background .2s,transform .25s,box-shadow .25s}
html.is-light .rail a::after{background:rgba(42,33,22,.25)}
.rail a:hover{color:rgba(var(--tx-rgb),.75)}
html.is-light .rail a:hover{color:rgba(42,33,22,.7)}
.rail a.is-on{color:transparent}
.rail:hover a.is-on{color:var(--tx)}
html.is-light .rail:hover a.is-on{color:#2a2116}
.rail a.is-on::after{background:#fff;transform:scale(1.35);box-shadow:0 0 0 4px rgba(255,255,255,.14)}
html.is-light .rail a.is-on::after{background:var(--gold-d);box-shadow:0 0 0 4px rgba(185,138,69,.18)}
.rail a.is-past::after{background:rgba(140,194,255,.75)}
html.is-light .rail a.is-past::after{background:rgba(138,97,39,.45)}
@media (max-width:960px){.rail a{font-size:0}}


/* Retour haptique sur iPhone (voir le module en bas de page) : un vrai interrupteur natif, invisible,
   posé sur le bouton. Son apparence native porte le tic : on annule tout style d'auteur hérité
   (.wait input, .news input retirent bordure et fond), et on ne garde que sa place et sa transparence. */
html body input.hx{all:revert!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;
  opacity:0!important;z-index:5!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important}

@media (max-width:960px){
  .stage > .wrap{padding:0}
  .beat,.sheet{left:16px;right:22px;width:auto;top:auto;translate:none;bottom:calc(60px + env(safe-area-inset-bottom));max-width:none}
  .sheet{transform-origin:50% 0}
  .beat--center,.sheet.is-center{margin:0}
  .beat__prog{margin-bottom:10px}
  .glass{padding:22px}
  .beat p{font-size:14.5px;margin-top:12px}
  .beat h2{font-size:26px}.beat h3{font-size:22px}
  .beat .btns{margin-top:14px;gap:8px}.beat .btn{height:40px;font-size:13.5px;padding:0 16px}
  .stat{margin-top:12px;padding-top:10px}.stat b{font-size:34px}.stat span{font-size:12.5px}
  .tag{margin-bottom:10px}.wait{margin-top:14px}
  .glass{background:linear-gradient(180deg,rgba(22,29,49,.9),rgba(22,29,49,.84))}
  .stats b{font-size:26px}.stats span{font-size:12px}
  .meet__grid{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
}
@media (max-width:560px){
  .news{flex-direction:column;gap:8px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .news input{flex:none;height:50px;padding:0 20px;font-size:16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line-d);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s}
  .news input:focus{border-color:rgba(255,255,255,.45)}
  .news .btn{height:50px;justify-content:center;font-size:15px}
}
/* V8, sur téléphone : des cartes plus compactes. Le texte courant tient en trois lignes, la photo
   d'illustration et la consigne « cliquez sur une vidéo » partent (on clique sans qu'on le dise) */
@media (max-width:760px){
  .glass{padding:16px 18px}
  .beat__num{margin-bottom:8px}
  .beat h2{font-size:22px}.beat h3{font-size:19px}
  .beat p{font-size:13.5px;line-height:1.5;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .beat .btns{margin-top:12px}.beat .btn{height:36px;font-size:13px;padding:0 14px}
  .beat .hint,.beat__photo{display:none}
  .stats{margin-top:10px}.stats b{font-size:22px}.stats span{font-size:11px}
  .tag{margin-bottom:8px;font-size:10px}
}

/* ── V9 : le texte dans la page, plus dans une carte (retour de Nico, 01/10) ──
   La carte de verre obligeait à se concentrer sur un petit texte enfermé. Ici le titre est grand, posé à
   droite de la scène, et un voile très doux, sans bord ni flou, le détache du fond. Un texte par scène :
   il change à chaque changement de scène, jamais deux animations sans lui. */
.sheet{display:none !important}
.beat.glass{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
html.is-light .beat.glass{background:none;box-shadow:none}
.beat,.sheet{max-width:600px}
.beat h2{font-size:clamp(40px,4.7vw,70px);line-height:1.02;letter-spacing:-.035em}
.beat h3{font-size:clamp(34px,3.7vw,54px);line-height:1.05;letter-spacing:-.03em}
.beat p{font-size:clamp(17px,1.4vw,21px);line-height:1.55;max-width:34em;margin-top:22px}
.beat h2,.beat h3,.beat p{text-shadow:0 2px 28px rgba(5,8,22,.55)}
html.is-light .beat h2,html.is-light .beat h3,html.is-light .beat p{text-shadow:none}
.beat .tag{margin-bottom:16px}
.beat__photo{margin:26px 0 0;height:190px;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.beat .stats{border-top-color:rgba(255,255,255,.18);margin-top:28px}
.beat .stats b{font-size:clamp(40px,3.6vw,56px)}
.beat .stats span{font-size:14.5px}
/* le voile : à droite, là où vit le texte ; la scène garde toute la gauche */
/* deux couches : un flou progressif (la scène s'y dissout en passant sous le texte, comme le bas de l'écran)
   et, dessus, le voile sombre. Le voile seul laissait lire les pills de Saint-Joseph à travers le titre. */
.stage::before,.stage::after{content:"";position:absolute;top:0;bottom:0;right:0;width:min(1100px,72vw);pointer-events:none;z-index:0;opacity:var(--voile,1);transition:opacity .6s}
.stage::after{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
.stage::before{z-index:1;background:linear-gradient(90deg,rgba(12,16,32,0) 0%,rgba(12,16,32,.62) 22%,rgba(12,16,32,.88) 44%,rgba(12,16,32,.94) 100%)}
html.is-light .stage::before{background:linear-gradient(90deg,rgba(247,241,231,0),rgba(247,241,231,.62) 28%,rgba(247,241,231,.88) 58%,rgba(247,241,231,.94))}
/* pas de voile quand aucun texte n'est à l'écran (les scènes seules), ni pour la fin, centrée */
.stage:not(:has(.beat.is-on))::before,.stage:has(.beat--center.is-on)::before,.stage:not(:has(.beat.is-on))::after,.stage:has(.beat--center.is-on)::after{opacity:0}
/* sur un écran moyen, la colonne de texte se resserre à droite : elle ne mord plus sur le bâtiment */
@media (min-width:961px){.beat:not(.beat--center){max-width:min(600px,44vw)}}
/* la fin (les pionniers et la newsletter) garde la taille de la V8 : centrée, pleine largeur, elle n'a pas à crier */
.beat--center h2{font-size:clamp(30px,3.5vw,50px);line-height:1.08}
.beat--center p{font-size:clamp(15px,1.2vw,17px);margin-top:18px}
@media (max-width:960px){
  .stage::before,.stage::after{width:100%;top:auto;height:66vh}
  .stage::before{background:linear-gradient(180deg,rgba(12,16,32,0),rgba(12,16,32,.84) 36%,rgba(12,16,32,.94))}
  /* Codex (le seul chapitre clair) aussi : la règle claire, plus précise, gardait le dégradé horizontal de l'ordinateur,
     opaque à droite dès le bord haut du voile, d'où une coupure nette en travers de l'écran */
  html.is-light .stage::before{background:linear-gradient(180deg,rgba(247,241,231,0),rgba(247,241,231,.84) 36%,rgba(247,241,231,.94))}
  .stage::after{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%);mask-image:linear-gradient(180deg,transparent 0%,#000 34%)}
  .beat--center h2{font-size:26px}.beat--center p{font-size:14.5px}
  .beat h2{font-size:30px}.beat h3{font-size:26px}.beat p{font-size:15.5px;margin-top:12px}
  .beat__photo{height:120px;margin:16px 0 0}
  .beat .stats b{font-size:34px}
}
/* V10 : on reste sur le texte dans la page de la V9 (pas de retour aux cartes). */
/* (les étiquettes de la carte et la photo de Saint-Joseph passent au-dessus du voile, sous le texte) */
.sur-voile{z-index:2}
/* le voile commence un peu plus à droite : la carte des hôpitaux et la photo de Saint-Joseph passaient dessous */
@media (min-width:961px){.stage::before,.stage::after{width:min(960px,64vw)}}
/* V10 : sur un écran bas (un portable, barre du navigateur comprise), les blocs les plus longs (Saint-Joseph, Codex, les
   pionniers) montaient sous la barre de navigation : le texte rapetisse un peu et le bloc descend sous elle. */
@media (min-width:961px) and (max-height:760px){
  .beat{top:calc(50% + 30px)}
  .beat h2{font-size:clamp(32px,3.6vw,50px)}.beat h3{font-size:clamp(28px,2.9vw,40px)}
  .beat p{font-size:16px;margin-top:14px}.beat .tag{margin-bottom:10px}
  .beat .stats{margin-top:18px;padding-top:14px}.beat .stats b{font-size:34px}.beat .btns{margin-top:18px}
  .beat--center h2{font-size:clamp(28px,3vw,40px)}.beat--center p{font-size:15px;margin-top:12px}
}
/* les étiquettes des hôpitaux sur la carte (V10) : un point d'accroche sur le toit, un fil, et la pill du logo,
   avec les visages des soignants qu'on vient de voir (--f : 0 → 1, ils arrivent après la pill) */
.hpin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.hpin::before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#bfe0ff;box-shadow:0 0 0 3px rgba(71,154,243,.28),0 0 12px rgba(140,194,255,.8)}
.hpin__fil{position:absolute;left:0;top:0;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(191,224,255,.85),rgba(191,224,255,.25))}
.hpin__pill{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;white-space:nowrap;
  background:rgba(12,20,42,.82);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 26px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
.hpin__logo{flex:none;height:22px;width:auto;max-width:96px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.hpin__logo[src*="chsf"]{height:30px;max-width:none;margin:-2px 0}
.hpin--sj .hpin__pill{height:44px;border-color:rgba(255,210,122,.5);box-shadow:0 0 0 4px rgba(255,210,122,.1),0 10px 26px rgba(0,0,0,.32)}
.hpin--sj .hpin__logo{height:27px;max-width:120px}
.hpin__faces{flex:none;display:flex;align-items:center;margin-right:-6px;opacity:var(--f,0);transform:translateX(calc((1 - var(--f,0)) * -8px))}
.hpin__faces img{flex:none;max-width:none;width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 28%;border:2px solid rgba(12,20,42,.95);margin-left:-7px}
.hpin__faces img:first-child{margin-left:0}
.hpin__faces em{font-style:normal;font-size:11px;font-weight:700;color:#bfe0ff;margin-left:4px}
@media (max-width:760px){.hpin__pill{height:28px;padding:0 9px;gap:6px}.hpin__logo{height:15px;max-width:64px}.hpin__faces img{width:20px;height:20px}.hpin--sj .hpin__pill{height:32px}.hpin--sj .hpin__logo{height:19px;max-width:84px}}
/* la photo des services, à droite du bâtiment : les images empilées, une seule visible à la fois */
.p3--photo{transform:translate(0,-50%)}
.p3--photo .sj-photo{margin:0;width:196px;transform:translateX(-24px) scale(.5);transform-origin:0 50%}
.p3--photo.is-on .sj-photo{transform:none}
.p3--photo .sj-photo::after{left:-18px;top:50%;width:18px;height:1.5px;background:linear-gradient(90deg,rgba(255,210,122,.2),rgba(255,210,122,.75))}
.sj-photo__img{position:relative;height:134px;border-radius:16px;overflow:hidden;background:#0c142a}
.sj-photo__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:0;transform:scale(1.06);transition:opacity .45s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sj-photo__img img.is-on{opacity:1;transform:none}
.p3--photo .sj-photo figcaption{border-radius:0 0 16px 16px;align-items:flex-end}
.sj-photo figcaption span{display:block;line-height:1.3}.sj-photo figcaption b{display:block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#ffd27a;margin-bottom:1px}
.sj-photo figcaption i{margin-bottom:4px;flex:none}
/* la légende hérite du nowrap des pills (.p3__in) : sans retour à la ligne, « Jérôme, sage-femme au CHI Toulon » sortait
   de la photo (08/10). Elle revient à la ligne dans la largeur de la photo. */
.sj-photo figcaption{white-space:normal}.sj-photo figcaption span{min-width:0;overflow-wrap:break-word}
.soin-play__soon{display:none}
.soin-play.is-soon{width:max-content;height:auto;left:0;top:0;translate:-50% -50%;padding:12px 20px;border-radius:999px;font-size:17px;font-weight:600;white-space:nowrap}
.soin-play.is-soon svg{display:none}.soin-play.is-soon .soin-play__soon{display:block}
/* le pied de page de la home : sans le fond du kit (une bande pleine qui coupait la scène). Comme dans l'aperçu V10,
   les étoiles et l'aurore continuent derrière lui (08/10). Les autres pages V10 gardent le fond du kit. */
.foot{background:none}