/* DavidOpère · page Santé 2027 */
/* Santé 2027 · socle commun, posé par-dessus site.css (mêmes couleurs, mêmes polices) */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --cream: #F6F4EF;      /* le fond « papier » du document PDF */
  --deep: #032C7A;       /* le bleu profond du PDF */
  --blue-2: #0B47C9;
}
html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 120px; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
button, a, summary { touch-action: manipulation; }
.btn, .chip, summary, .tabbar a { -webkit-user-select: none; user-select: none; }
.btn { transition: transform 140ms var(--ease-out), background-color 160ms ease; cursor: pointer; font-family: inherit; }
button.btn { border: 0; }
.btn:active { transform: scale(0.97); }
.top { padding-top: env(safe-area-inset-top, 0px); }
.actions { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* L'entrée « Santé 2027 » dans le menu burger */
.menu-panel > a.s27-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s27-badge { font: 700 11px/1 'Inter', sans-serif; letter-spacing: 0.04em; color: var(--ink); background: var(--yellow); padding: 6px 9px; border-radius: 999px; }
.desk-links a.s27-desk { color: var(--yellow); }

/* Apparitions */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: 70ms; } .js .rv.d2 { transition-delay: 140ms; } .js .rv.d3 { transition-delay: 210ms; }
.js .rv.d4 { transition-delay: 280ms; } .js .rv.d5 { transition-delay: 350ms; }

/* Barre de lecture */
.readbar { position: fixed; left: 0; right: 0; top: calc(56px + env(safe-area-inset-top, 0px)); height: 3px; z-index: 45; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }

.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.src { font-size: 12.5px; line-height: 1.45; color: var(--muted); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { transform: none; transition: opacity 200ms ease; }
}

/* Proposition A · Le dossier */

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--deep); color: #fff; padding: 40px 0 44px; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--yellow); transform-origin: top; transform: scaleY(0); transition: transform 900ms var(--ease-out) 100ms; }
.ready .hero::before { transform: scaleY(1); }
.hero-kicker { margin: 0 0 18px; font: 700 12.5px/1 'Inter', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); }
.hero h1 { margin: 0; font-size: clamp(33px, 9vw, 58px); line-height: 1.04; letter-spacing: -0.025em; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero h1 .ln > span { display: block; transform: translateY(105%); transition: transform 900ms var(--ease-out); }
.hero h1 .ln.y { color: var(--yellow); margin-top: 0.18em; }
.hero h1 .ln.y > span { transition-delay: 160ms; }
.ready .hero h1 .ln > span { transform: none; }
.hero-lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.6; color: #C9D3F0; max-width: 58ch; opacity: 0; transition: opacity 700ms ease 500ms; }
.hero-lead b { color: #fff; }
.ready .hero-lead { opacity: 1; }
.hero-cta { display: grid; gap: 10px; margin-top: 26px; }
.hero-date { margin: 22px 0 0; font-size: 12.5px; color: #8EA0D4; }

/* ---------- Sommaire collant ---------- */
.tabbar { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 35; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tabbar-in { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; max-width: 1120px; margin: 0 auto; }
.tabbar-in::-webkit-scrollbar { display: none; }
.tabbar a { position: relative; flex-shrink: 0; padding: 15px 10px 14px; font: 600 14px/1 'Inter', sans-serif; color: var(--muted); text-decoration: none; transition: color 160ms ease; }
.tabbar a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--yellow); transform: scaleX(0); transition: transform 240ms var(--ease-out); }
.tabbar a.on { color: var(--deep); }
.tabbar a.on::after { transform: scaleX(1); }

/* ---------- Sections ---------- */
.sec { padding: 52px 0 56px; }
.sec.paper { background: var(--cream); }
.sec.white { background: #fff; }
.sec.navy { background: var(--deep); color: #fff; }
.sec.yellow { background: var(--yellow); }
.sec h2 { margin: 0; font-size: clamp(28px, 7.4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: var(--deep); }
.sec.navy h2 { color: #fff; }
.blk-tag { margin: 0 0 12px; font: 700 12px/1.3 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-2); }
.sec.navy .blk-tag { color: var(--yellow); }
.sec.yellow .blk-tag { color: var(--deep); }

.part-head { margin-bottom: 8px; padding-bottom: 18px; border-bottom: 2px solid var(--deep); display: flex; flex-direction: column; gap: 8px; }
.part-n { align-self: flex-start; font: 700 12px/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; background: var(--deep); color: var(--yellow); padding: 7px 10px; border-radius: 6px; }

.blk { padding-top: 36px; }
.blk + .blk { margin-top: 20px; border-top: 1px solid rgba(3,44,122,0.12); }
.blk h3 { margin: 0; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: var(--deep); }
.blk-intro { margin: 16px 0 0; font-size: 16.5px; color: var(--text); }
.blk-intro b, .blk-outro b { color: var(--ink); }
.blk-grid { margin-top: 22px; display: grid; gap: 22px; }

/* Grand chiffre */
.big { margin: 0; }
.big-n { font: 800 clamp(76px, 24vw, 128px)/0.9 'Manrope', sans-serif; letter-spacing: -0.05em; color: var(--blue-2); }
.big figcaption { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--ink); max-width: 34ch; }
.big .src { display: block; margin-top: 10px; }
.sec.yellow .big-n { color: var(--deep); }

/* Listes */
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pts li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--text); }
.pts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--deep); }
.pts li b { color: var(--ink); }
.sec.yellow .pts li { color: var(--ink); }
.sec.yellow .pts li::before { background: var(--deep); }

/* Cas réel */
.cas { position: relative; margin: 30px 0 0; padding: 24px 18px 18px; background: #fff; border-radius: 16px; box-shadow: 0 1px 0 rgba(3,44,122,0.06), 0 12px 30px rgba(3,44,122,0.08); }
.cas-tag { position: absolute; top: -12px; left: 16px; margin: 0; font: 700 11.5px/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 7px 10px; border-radius: 999px; }
.cas p:last-child { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--text); }
.cas b { color: var(--ink); }
.sec.yellow .cas-tag { background: var(--deep); color: #fff; }
.cas.thread { margin-top: 36px; }

.src { margin: 18px 0 0; }
.sec.navy .src { color: #8EA0D4; }
.sec.yellow .src { color: #4A4210; }

/* Trois constats */
.trio { margin-top: 22px; display: grid; gap: 12px; }
.trio-i { background: #fff; border-radius: 16px; padding: 18px; box-shadow: inset 0 4px 0 var(--blue-2), 0 8px 24px rgba(3,44,122,0.06); }
.trio-i h4 { margin: 4px 0 8px; font: 800 19px/1.25 'Manrope', sans-serif; color: var(--deep); }
.trio-i p { margin: 0; font-size: 15px; color: var(--text); }

/* Chiffres en ligne */
.stats { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats.s3 .stat:first-child { grid-column: 1 / -1; }
.stat { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px rgba(3,44,122,0.06); }
.stat strong { font: 800 clamp(26px, 7.6vw, 36px)/1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--blue-2); }
.stat > span { font-size: 14px; line-height: 1.45; color: var(--ink); }

/* Tableau des procédures, en cartes sur téléphone */
.proc { margin-top: 22px; display: grid; gap: 10px; }
.proc-row { background: #fff; border-radius: 16px; padding: 16px; display: grid; gap: 8px; box-shadow: 0 8px 24px rgba(3,44,122,0.06); }
.proc-row p { margin: 0; }
.proc-name { font: 800 17px/1.3 'Manrope', sans-serif; color: var(--deep); }
.proc-goal { font-size: 14.5px; color: var(--text); }
.proc-goal span, .proc-res span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.proc-res { font-weight: 700; color: var(--ink); background: #FFF6D1; border-radius: 10px; padding: 10px 12px; }

/* Deux colonnes */
.cols { margin-top: 22px; display: grid; gap: 12px; }
.col { background: #fff; border-radius: 16px; padding: 20px 18px; box-shadow: inset 0 4px 0 var(--blue-2), 0 8px 24px rgba(3,44,122,0.06); }
.col.c1 { box-shadow: inset 0 4px 0 var(--yellow), 0 8px 24px rgba(3,44,122,0.06); }
.col h4 { margin: 4px 0 14px; font: 800 19px/1.25 'Manrope', sans-serif; color: var(--deep); }
.col .pts li { font-size: 15px; }

/* Encadré « ce que le président peut changer » */
.box { margin-top: 26px; background: var(--deep); color: #fff; border-radius: 18px; padding: 22px 18px; box-shadow: inset 0 4px 0 var(--yellow); }
.box h4 { margin: 4px 0 6px; font: 800 20px/1.25 'Manrope', sans-serif; }
.box-sub { margin: 0 0 14px; font-size: 14px; color: #B9C6EA; }
.box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.box li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.box li svg { flex-shrink: 0; color: var(--yellow); margin-top: 2px; }
.box li b { color: var(--yellow); }

.blk-outro { margin: 22px 0 0; font-size: 17.5px; line-height: 1.5; color: var(--text); }
.blk-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* France / Allemagne */
.versus { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs-side { border-radius: 18px; padding: 16px 14px 18px; }
.vs-side.fr { background: var(--deep); color: #fff; }
.vs-side.de { background: #fff; color: var(--deep); box-shadow: 0 8px 24px rgba(3,44,122,0.06); }
.vs-side p { margin: 0; }
.vs-name { font: 800 16px/1 'Manrope', sans-serif; margin-bottom: 14px !important; }
.vs-side.fr .vs-name { color: var(--yellow); }
.vs-big { font: 800 clamp(26px, 8vw, 40px)/1 'Manrope', sans-serif; letter-spacing: -0.03em; margin-top: 4px !important; }
.vs-l { font-size: 13px; line-height: 1.4; opacity: 0.85; margin: 6px 0 12px !important; }
.vs-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 18px; }
.vs-dots i { height: 18px; border-radius: 4px; background: currentColor; opacity: 0.14; transition: opacity 300ms ease calc(var(--i) * 70ms), background-color 300ms ease calc(var(--i) * 70ms); }
.vs-dots.is-on i.on { opacity: 1; }
.vs-side.fr .vs-dots.is-on i.on { background: var(--yellow); }
.vs-side.de .vs-dots.is-on i.on { background: var(--blue-2); }
.vs-bar { height: 10px; border-radius: 5px; background: currentColor; background: rgba(127,127,127,0.18); overflow: hidden; }
.vs-bar i { display: block; height: 100%; border-radius: 5px; transform-origin: left; transform: scaleX(0); transition: transform 1400ms var(--ease-out) 300ms; }
.vs-side.fr .vs-bar i { background: var(--yellow); }
.vs-side.de .vs-bar i { background: var(--blue-2); }
.versus.is-on .vs-bar i { transform: scaleX(var(--w)); }

/* Masques : la chute */
.masks { margin: 24px 0 0; background: var(--deep); color: #fff; border-radius: 18px; padding: 20px 16px; }
.mk-row { display: grid; grid-template-columns: 42px 1fr; gap: 6px 10px; align-items: center; margin-bottom: 14px; }
.mk-y { font: 700 13px/1 'Inter', sans-serif; color: #B9C6EA; }
.mk-bar { height: 22px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mk-bar i { display: block; height: 100%; border-radius: 6px; background: var(--yellow); transform-origin: left; }
.mk-bar i.b { transform: scaleX(1); transition: transform 1800ms var(--ease-in-out) 400ms; }
.masks.is-on .mk-bar i.b { transform: scaleX(0.004); }
.mk-v { grid-column: 2; font: 800 18px/1 'Manrope', sans-serif; color: var(--yellow); }
.masks figcaption { margin-top: 6px; font-size: 15px; color: #DCE3F7; }
.masks figcaption b { color: #fff; }

/* L'essentiel : 6 chiffres */
.six { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.six-i { background: #0B3E9E; border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.six-i strong { font: 800 clamp(28px, 8.4vw, 44px)/1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--yellow); }
.six-i > span { font-size: 13.5px; line-height: 1.45; color: #DCE3F7; }

/* 10 décisions */
.dec-sub { margin: 12px 0 0; color: #B9C6EA; font-size: 15px; }
.dec-groups { margin-top: 26px; display: grid; gap: 26px; }
.dec-gname { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--yellow); font: 700 12.5px/1 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.dec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dec-list li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; }
.dec-n { font: 800 36px/0.9 'Manrope', sans-serif; color: var(--yellow); letter-spacing: -0.04em; }
.dec-list p { margin: 0; font-size: 16px; line-height: 1.55; color: #DCE3F7; }
.dec-list b { color: #fff; }

/* Candidats */
.inv-stats { margin: 22px 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inv-stats div { background: var(--deep); border-radius: 14px; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.inv-stats strong { font: 800 clamp(18px, 5.6vw, 28px)/1.05 'Manrope', sans-serif; color: var(--yellow); }
.inv-stats span { font-size: 12px; line-height: 1.35; color: #DCE3F7; }
.countdown { margin-top: 28px; background: var(--deep); color: #fff; border-radius: 18px; padding: 20px 16px; text-align: center; }
.cd-l { margin: 0 0 14px; font: 700 12px/1.4 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.cd-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cd-row div { background: rgba(255,255,255,0.07); border-radius: 12px; padding: 12px 4px; }
.cd-row b { display: block; font: 800 34px/1 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.cd-row span { font-size: 12px; color: #B9C6EA; }
.cd-s { margin: 12px 0 0; font-size: 13px; color: #B9C6EA; }
.slots { margin-top: 12px; display: grid; gap: 10px; }
.slot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; background: var(--blue-2); color: #fff; text-decoration: none; transition: transform 140ms var(--ease-out); }
.slot:active { transform: scale(0.98); }
.slot-h { font: 800 18px/1.2 'Manrope', sans-serif; }
.slot-p { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--yellow); white-space: nowrap; }
.studio { margin-top: 24px; background: #fff; border-radius: 18px; padding: 20px 18px; display: grid; gap: 18px; box-shadow: 0 8px 24px rgba(3,44,122,0.06); }
.studio h3 { margin: 0 0 6px; font-size: 20px; color: var(--deep); }
.studio p { margin: 0 0 4px; font-size: 15px; color: var(--text); }
.studio-map { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--blue-2); }
.studio-contact { display: grid; gap: 8px; }
.studio-contact p { margin: 0; color: var(--deep); }
.studio-contact .btn { width: 100%; font-size: 14px; }

/* Sources */
.sources { margin-top: 28px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.sources summary { list-style: none; cursor: pointer; padding: 18px; display: flex; justify-content: space-between; align-items: center; font: 800 17px/1.2 'Manrope', sans-serif; color: var(--deep); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary span { font: 700 12px/1 'Inter', sans-serif; background: var(--soft); padding: 6px 9px; border-radius: 999px; color: var(--muted); }
.sources ul { margin: 0; padding: 0 18px 18px 34px; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }

@media (hover: hover) and (pointer: fine) {
  .tabbar a:hover { color: var(--deep); }
  .slot:hover { background: var(--blue); }
}

@media (min-width: 900px) {
  .wrap { max-width: 1040px; }
  .hero { padding: 80px 0 84px; }
  .hero-cta { display: flex; }
  .sec { padding: 88px 0; }
  .blk-grid.has-big { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: 48px; }
  .trio, .cols { grid-template-columns: repeat(var(--n, 3), 1fr); }
  .cols { --n: 2; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats.s3 { grid-template-columns: repeat(3, 1fr); }
  .stats.s3 .stat:first-child { grid-column: auto; }
  .proc-row { grid-template-columns: 1.1fr 1.2fr 0.9fr; align-items: center; }
  .six { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .six-i { padding: 24px; }
  .dec-groups { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .studio { grid-template-columns: 1fr 1fr; }
  .tabbar-in { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero h1 .ln > span { transition: none; transform: none; }
  .hero-lead { opacity: 1; transition: none; }
  .vs-bar i, .mk-bar i.b, .vs-dots i { transition: none; }
}

/* Proposition B · Le fil (s'appuie sur les composants de A, change la mise en scène) */

/* ---------- Hero : le compte à rebours d'abord ---------- */
.hero { background: var(--blue); padding: 26px 0 30px; min-height: calc(100svh - 56px - 76px); display: flex; align-items: center; }
.hero::before { display: none; }
.hero .wrap { width: 100%; }
.cd-hero { margin-bottom: 18px; }
.cd-k { margin: 0; font: 700 12.5px/1 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #C9D3F0; }
.cd-days { margin: 6px 0 0; font: 800 clamp(96px, 34vw, 170px)/0.86 'Manrope', sans-serif; letter-spacing: -0.06em; color: var(--yellow); display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.cd-j { font-size: 0.42em; letter-spacing: -0.02em; margin-right: 4px; color: #fff; }
.cd-sub { margin: 10px 0 0; font-size: 14px; color: #C9D3F0; font-variant-numeric: tabular-nums; }
.cd-sub span { color: #fff; font-weight: 700; }
.hero h1 { font-size: clamp(27px, 7.4vw, 46px); line-height: 1.1; margin-top: 8px; }
.hero h1 .t1 { color: #fff; }
.hero h1 .t2 { color: var(--yellow); }
.hero-lead { opacity: 1; color: #DCE3F7; margin-top: 16px; }
.scroll-cue { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.scroll-cue svg { animation: nudge 1.8s var(--ease-in-out) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.ready .cd-hero { animation: rise 700ms var(--ease-out) both; }
.ready .hero h1 { animation: rise 700ms var(--ease-out) 120ms both; }
.ready .hero-lead { animation: rise 700ms var(--ease-out) 220ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Stories ---------- */
.stories-sec { background: var(--night); color: #fff; padding: 40px 0 28px; }
.stories-sec h2 { margin: 0 0 18px; color: #fff; font-size: clamp(26px, 7vw, 40px); }
.stories { max-width: 760px; margin: 0 auto; }
.segs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 0 16px 12px; }
.segs i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); overflow: hidden; }
.segs b { display: block; height: 100%; background: var(--yellow); transform-origin: left; transform: scaleX(0); }
.segs i.done b, .segs i.still b { transform: scaleX(1); }
.segs i.on b { animation: seg 4.2s linear forwards; }
@keyframes seg { to { transform: scaleX(1); } }
.story-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.story-track::-webkit-scrollbar { display: none; }
.story { flex: 0 0 100%; scroll-snap-align: center; min-height: 360px; border-radius: 22px; padding: 22px 22px 26px; display: flex; flex-direction: column; justify-content: flex-end; }
.story.s0 { background: var(--yellow); color: var(--ink); }
.story.s1 { background: var(--blue); color: #fff; }
.story.s2 { background: #fff; color: var(--deep); }
.story-i { margin: 0 0 auto; font: 700 12px/1 'Inter', sans-serif; letter-spacing: 0.1em; opacity: 0.7; }
.story-n { margin: 0; font: 800 clamp(64px, 20vw, 110px)/0.92 'Manrope', sans-serif; letter-spacing: -0.05em; }
.story.s1 .story-n { color: var(--yellow); }
.story-l { margin: 14px 0 0; font-size: 19px; line-height: 1.4; font-weight: 600; max-width: 22ch; }
.story-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.story-nav button { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 140ms var(--ease-out); }
.story-nav button:active { transform: scale(0.92); }
.story-nav .src { margin: 0; text-align: center; color: #8EA0D4; font-size: 11.5px; }

/* ---------- 100 points ---------- */
.dotgrid-fig { margin: 22px 0 26px; display: grid; gap: 16px; }
.dotgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 320px; }
.dotgrid i { aspect-ratio: 1; border-radius: 50%; background: #D9DEEA; }
.dotgrid i.on { transform: scale(0.6); transition: transform 380ms var(--ease-out) calc(var(--i) * 12ms), background-color 380ms ease calc(var(--i) * 12ms); }
.dotgrid-fig.is-on i.on { background: var(--blue-2); transform: scale(1); }
.dotgrid-fig figcaption { font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.dotgrid-fig figcaption strong { display: block; font: 800 64px/0.95 'Manrope', sans-serif; color: var(--blue-2); letter-spacing: -0.04em; margin-bottom: 6px; }
.dotgrid-fig .src { display: block; margin-top: 10px; }
.sec .cas.missing { margin-top: 34px; }

/* ---------- Liste des chapitres ---------- */
.chap-nav { background: #fff; padding: 36px 0 30px; }
.chap-nav p { margin: 0 0 14px; font: 800 22px/1.2 'Manrope', sans-serif; color: var(--deep); }
.chap-list { display: grid; gap: 8px; }
.chap-list a { display: grid; grid-template-columns: 34px 1fr 16px; gap: 12px; align-items: center; padding: 16px 14px; border-radius: 14px; background: var(--soft); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; transition: transform 140ms var(--ease-out), background-color 160ms ease; }
.chap-list a:active { transform: scale(0.98); }
.chap-list a span { width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: var(--yellow); display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Manrope', sans-serif; }
.chap-list a svg { color: var(--blue); }
.chap-list .dec-link { background: var(--yellow); }
.chap-list .dec-link span { background: var(--ink); }

/* ---------- Chapitres ---------- */
.chap { background: var(--soft); padding-bottom: 48px; }
.chap.yellow { background: var(--yellow); }
.chap-head { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--blue); color: #fff; padding: 12px 0 13px; box-shadow: 0 8px 20px rgba(5,28,88,0.18); }
.chap.yellow .chap-head { background: var(--ink); }
.chap-n { display: block; font: 700 11.5px/1 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 5px; }
.chap-head h2 { margin: 0; font-size: 21px; line-height: 1.15; color: #fff; }
.chap .blk { margin-top: 18px; padding: 24px 18px 22px; background: #fff; border-radius: 22px; border-top: 0; box-shadow: 0 10px 30px rgba(5,28,88,0.07); }
.chap .blk + .blk { margin-top: 14px; }
.chap.yellow .blk { background: #FFF8DC; }
.blk h3 { font-size: clamp(23px, 6.2vw, 32px); }
.big-n { font-size: clamp(72px, 22vw, 116px); color: var(--blue); }
.cas { box-shadow: inset 0 0 0 1px var(--line); }
.chap .stat, .chap .trio-i, .chap .proc-row, .chap .col { background: var(--soft); box-shadow: none; }
.chap .trio-i { box-shadow: inset 0 4px 0 var(--blue); }
.chap .col.c0 { box-shadow: inset 0 4px 0 var(--blue); }
.chap .col.c1 { box-shadow: inset 0 4px 0 var(--yellow); }
.chap .vs-side.de { background: var(--soft); box-shadow: none; }

/* Cas réel à déplier */
.cas.fold { padding: 0; margin-top: 22px; background: var(--soft); box-shadow: none; overflow: hidden; }
.chap.yellow .cas.fold { background: #fff; }
.cas.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 14px; min-height: 56px; }
.cas.fold summary::-webkit-details-marker { display: none; }
.cas.fold .cas-tag { position: static; flex-shrink: 0; }
.cas.fold summary b { flex: 1; font: 800 16px/1.25 'Manrope', sans-serif; color: var(--deep); }
.cas.fold summary svg { flex-shrink: 0; color: var(--blue); transition: transform 220ms var(--ease-out); }
.cas.fold[open] summary svg { transform: rotate(45deg); }
.cas.fold p { margin: 0; padding: 0 16px 18px; font-size: 15.5px; line-height: 1.62; color: var(--text); }
.cas.fold[open] p { animation: rise 320ms var(--ease-out); }

/* ---------- Décisions en onglets ---------- */
.sec.navy { background: var(--night); }
.seg-ctl { position: relative; margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,0.08); border-radius: 14px; padding: 4px; }
.seg-ctl button { position: relative; z-index: 1; border: 0; background: none; color: #DCE3F7; font: 700 13px/1.2 'Inter', sans-serif; padding: 12px 6px; min-height: 48px; cursor: pointer; transition: color 200ms ease; }
.seg-ctl button[aria-selected="true"] { color: var(--ink); }
.seg-pill { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 11px; background: var(--yellow); transition: transform 280ms var(--ease-out), width 280ms var(--ease-out); }
.dec-panels { margin-top: 22px; min-height: 300px; }
.dec-list.enter li { animation: rise 420ms var(--ease-out) both; }
.dec-list.enter li:nth-child(2) { animation-delay: 60ms; }
.dec-list.enter li:nth-child(3) { animation-delay: 120ms; }
.dec-list.enter li:nth-child(4) { animation-delay: 180ms; }
.dec-list li { background: rgba(255,255,255,0.06); border-radius: 16px; padding: 16px 14px; }

/* ---------- Candidats ---------- */
.sec.paper { background: var(--soft); }
.countdown { background: var(--blue); }
.inv-stats div { background: var(--blue); }
.slot { background: var(--night); }

@media (min-width: 900px) {
  .hero { min-height: 0; padding: 72px 0; }
  .story { flex-basis: calc(50% - 6px); min-height: 420px; }
  .chap-list { grid-template-columns: 1fr 1fr; }
  .chap .wrap { max-width: 900px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg, .segs i.on b { animation: none; }
  .dotgrid i.on { transition: none; transform: none; }
}


/* ---------- Ouverture « diagnostic » (reprise de la proposition C) ---------- */
.hero { min-height: 0; display: block; background: var(--blue); padding: 26px 0 40px; }
.chart-card { margin: 0 0 24px; background: rgba(255,255,255,0.08); border-radius: 16px; padding: 4px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.chart-card div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,0.18); }
.chart-card div:last-child { border-bottom: 0; }
.chart-card dt { font: 700 11.5px/1.4 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.chart-card dd { margin: 0; font-size: 14.5px; font-weight: 600; color: #fff; }
.hero h1 { font-size: clamp(30px, 8.4vw, 54px); line-height: 1.06; margin-top: 0; }
.ecg-hero { height: 70px; margin: 20px -16px 0; }
.ecg-hero svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Moniteur : la trace reste, un balayage l'efface juste devant la tête lumineuse, en boucle */
.ecg-hero path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ecg-line { stroke: var(--yellow); stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(255,212,46,0.45)); }
.ecg-glow { stroke: #FFF6C7; stroke-width: 3.6; filter: drop-shadow(0 0 6px rgba(255,236,150,0.95)) drop-shadow(0 0 14px rgba(255,212,46,0.7)); }
.ecg-hero { opacity: 0; transition: opacity 700ms ease 200ms; }
.ready .ecg-hero { opacity: 1; }
.ecg-cap { margin: 6px 0 0; font-size: 14px; font-style: italic; color: #C9D3F0; }
.hero-lead { margin-top: 18px; }

/* ---------- Constantes vitales : les 6 chiffres sur un moniteur ---------- */
.vitals-sec { background: var(--night); color: #fff; }
.vitals-sec h2 { color: #fff; }
.vit-sub { margin: 8px 0 0; color: #B9C6EA; }
.monitor {
  margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 20px; overflow: hidden;
  background-color: rgba(255,212,46,0.12);
  box-shadow: 0 20px 44px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.vit {
  position: relative; background-color: #07154A; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 150px;
  background-image: linear-gradient(rgba(255,212,46,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,212,46,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.vit-led { position: absolute; right: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: blink 2.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes blink { 0%, 60%, 100% { opacity: 1; } 75% { opacity: 0.2; } }
.vit strong { margin-top: 10px; font: 800 clamp(28px, 8.6vw, 44px)/1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.vit-l { font-size: 13px; line-height: 1.42; color: #DCE3F7; }
.vitals-sec .src { color: #8EA0D4; }

@media (min-width: 900px) {
  .hero { padding: 64px 0 72px; }
  .chart-card { max-width: 560px; }
  .monitor { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ecg-hero { transition: none; opacity: 1; }
  .ecg-glow { display: none; }
  .vit-led { animation: none; }
}