/* scroll-story.module — tokens uniquement.
   Une scène COLLÉE (sticky) pendant (n + 1) hauteurs d'écran ; la progression du défilement
   dans la section pilote titre, plaque, repères (profondeur), cartes (glissement) et sortie.
   Deux moteurs, même chorégraphie :
   • CSS : `animation-timeline` nommée sur la section, keyframes en % de la phase collée
     (`animation-range: contain`), dans @supports ;
   • JS  : sans prise en charge, module.js pose `.no-sda` et alimente --p / --s / --o / --bl / --k.
   Sous prefers-reduced-motion et sous 768 px : état final statique, rien ne bouge. */

.sstory { --n: 4; --card-w: clamp(260px, 27vw, 380px); --card-step: calc(var(--card-w) + var(--space-5));
  position: relative; padding: 0; min-height: calc((var(--n) + 1) * 100vh); view-timeline-name: --sstory; view-timeline-axis: block; }
.sstory .sec__inner { padding: 0; }
/* --sticky-top : hauteur d'un en-tête collé au-dessus (0 dans le thème HubSpot où la barre n'est pas
   collée ; l'aperçu statique la pose). --plate-h/--plate-w : géométrie de la plaque, réutilisée pour
   ancrer les repères À la plaque (et non aux coins de l'écran). */
.sstory { --sticky-top: 0px; --plate-cy: 40%;
  /* 02/09 — la plaque accueille un visuel presque carré (animation IA V2, 1352×1391) : plus haute et
     moins allongée qu'un 16/10, sinon le cerveau ne mesure que 180 px dans une plaque de 460. */
  --plate-h: min(40vh, 400px); --plate-w: calc(var(--plate-h) * 1.75);
  --label-gap: clamp(56px, 7vw, 128px); }
.sstory__sticky { position: sticky; top: var(--sticky-top); height: calc(100vh - var(--sticky-top)); height: calc(100svh - var(--sticky-top)); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.sstory__stage { position: relative; height: 100%; width: min(100% - 2 * var(--section-gutter), var(--section-maxw)); margin-inline: auto;
  perspective: 1200px; perspective-origin: 50% 45%; }

/* ---- Titre + introduction : révélés par balayage, puis effacés -------------------------- */
.sstory__title { position: absolute; left: 50%; top: 26%; translate: -50% 0; margin: 0; width: min(100%, 22ch); text-align: center;
  color: var(--text-strong); text-wrap: balance; clip-path: inset(0 0 0 0); z-index: 5; }
.on-dark .sstory__title { color: var(--on-ink); }
.sstory__word { display: inline-block; }
.sstory__lede { position: absolute; left: 50%; top: calc(26% + 3.2em + var(--space-6)); translate: -50% 0; margin: 0; width: min(100%, 60ch);
  text-align: center; color: var(--ink-muted); z-index: 5; }
.on-dark .sstory__lede { color: var(--on-ink-muted); }
.sstory__lede p { margin: 0; }

/* ---- Plaque centrale : verre dépoli, quatre arêtes lumineuses, logo réel, capture -------- */
.sstory__plate { position: absolute; left: 50%; top: var(--plate-cy); translate: -50% -50%; z-index: 2;
  height: var(--plate-h); width: var(--plate-w); aspect-ratio: 16 / 10; max-width: 100%; padding: var(--space-5); border-radius: var(--radius-xl);
  background: var(--surface-glass); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-raised); display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.sstory__plate:has(.sstory__plate-head) { grid-template-rows: auto minmax(0, 1fr); gap: var(--space-4); } /* repli : logo + capture */
.sec--light .sstory__plate, .sec--paper .sstory__plate { background: var(--surface-glass-light-strong); }
.sstory__plate-edge { position: absolute; background: var(--ema-primary); opacity: .8; }
.sstory__plate-edge--t, .sstory__plate-edge--b { left: var(--space-5); right: var(--space-5); height: 2px; transform-origin: left center; }
.sstory__plate-edge--t { top: 0; } .sstory__plate-edge--b { bottom: 0; transform-origin: right center; }
.sstory__plate-edge--l, .sstory__plate-edge--r { top: var(--space-5); bottom: var(--space-5); width: 2px; transform-origin: center top; }
.sstory__plate-edge--l { left: 0; } .sstory__plate-edge--r { right: 0; transform-origin: center bottom; }
.sstory__plate-head { display: flex; justify-content: center; }
.sstory__logo { height: clamp(28px, 3vw, 40px); width: auto; }
/* 02/09 (Gaspard, deux captures) : l'animation IA V2 est recentrée et jamais rognée. La piste `1fr` d'une
   grille a un minimum « auto » = la hauteur intrinsèque de l'image (1 391 px) : la piste débordait de la
   plaque et `overflow: hidden` coupait le cerveau. `minmax(0, 1fr)` + `min-height: 0` rendent la piste
   compressible, et `contain` fait le reste. Le PNG lui-même a perdu ses 500 px de marge transparente. */
.sstory__shot { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; border-radius: var(--radius-md); opacity: .92; }

/* ---- Le flux dans la plaque (02/09, Gaspard : « plus contrasté, l'animation des connecteurs entre les
   4 étapes ») : sources → noyau → MCP → IA. Chaque groupe s'allume à son étape, les fils se tracent à
   l'étape suivante, les points circulent (SMIL) une fois le fil tracé. Tokens seulement. ---- */
.sflow { width: 100%; height: 100%; min-height: 0; display: block; font-family: var(--font-display); font-weight: var(--weight-semibold); }
.sflow__g { opacity: .28; }
/* Fond du schéma : la silhouette du cerveau. Le PNG ne sert que de masque (voir module.html et
   tools/fabriquer-fond-cerveau.py) ; la couleur vient d'ici, donc d'un token, et suit la variante
   de la section — le fichier de Laurène est vert très sombre et resterait invisible sur l'encre.
   Deux réglages :
   · l'OPACITÉ est un token local : la même valeur ne convient pas aux deux fonds ;
   · la RESPIRATION est au TEMPS, pas au défilement, contrairement au reste du module. C'est
     volontaire : elle continue quand le lecteur s'arrête au milieu de l'histoire, et elle ne dépend
     pas du support des scroll-driven animations (rendu identique sous les deux moteurs).
   `transform-box: fill-box` fait porter le `transform-origin: center` sur la boîte du rectangle et
   non sur l'origine du viewBox — sans lui, le cerveau grandirait vers le coin bas-droit. */
.sflow__brain { opacity: var(--brain-o, .15); transform-box: fill-box; transform-origin: center;
  animation: sflow-breathe 8s ease-in-out infinite; }
.sflow__brain rect { fill: var(--ema-primary); }
.sec--light .sflow__brain, .sec--paper .sflow__brain { --brain-o: .1; }
.sec--light .sflow__brain rect, .sec--paper .sflow__brain rect { fill: var(--color-green-900); }
@keyframes sflow-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.sflow__node rect { fill: var(--surface-glass-hover); stroke: var(--line-glass); stroke-width: 1; }
.sec--light .sflow__node rect, .sec--paper .sflow__node rect { fill: var(--surface-glass-light-strong); }
.sec--light .sflow__node text, .sec--paper .sflow__node text { fill: var(--text-strong); }
.sflow__node text { fill: var(--on-ink); }
.sflow__core rect { fill: var(--color-green-900); stroke: var(--ema-primary); stroke-width: 1.5; }
.sflow__core text { fill: var(--on-ink-muted); font-weight: var(--weight-regular); }
.sflow__bridge rect { fill: var(--ema-primary); }
.sflow__bridge text { fill: var(--on-primary); font-weight: var(--weight-bold); }
.sflow__wires path { fill: none; stroke: var(--ema-primary); stroke-width: 1.5; stroke-linecap: round; opacity: .75;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.sflow__dots { opacity: 0; }
.sflow__dots circle { fill: var(--ema-primary); }


/* ---- Repères aux coins : profondeur (petit et estompé → net → grand, flou, disparu) ------ */
.sstory__labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sstory__label { position: absolute; transform: scale(.62); opacity: .3; will-change: transform, opacity, filter; transform-origin: center; }
/* Ancrage À LA PLAQUE : à gauche/à droite de ses bords, sur deux hauteurs (haut, bas). Le trait part du
   repère et rejoint le bord de la plaque : le lien visuel est immédiat, quelle que soit la largeur d'écran. */
.sstory__label--tl, .sstory__label--bl { left: calc(50% - var(--plate-w) / 2 - var(--label-gap)); translate: -100% -50%; }
.sstory__label--tr, .sstory__label--br { left: calc(50% + var(--plate-w) / 2 + var(--label-gap)); translate: 0 -50%; }
.sstory__label--tl, .sstory__label--tr { top: calc(var(--plate-cy) - var(--plate-h) / 2 + var(--plate-h) * .22); }
.sstory__label--bl, .sstory__label--br { top: calc(var(--plate-cy) + var(--plate-h) / 2 - var(--plate-h) * .22); }
.sstory__label-box { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); color: var(--text-strong);
  background: var(--surface-glass-light-strong); box-shadow: var(--shadow-card);
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-label); }
.on-dark .sstory__label-box { color: var(--on-ink); background: var(--surface-glass); box-shadow: none; }
.sstory__label-square { width: var(--space-2); height: var(--space-2); background: var(--ema-primary); flex: 0 0 auto; }
.sstory__label-index { color: var(--ink-muted); font-family: var(--font-mono); }
.on-dark .sstory__label-index { color: var(--on-ink-muted); }
/* Les traits partent du repère VERS la plaque, hors de la boîte : ils ne croisent jamais le texte. */
.sstory__label-line { position: absolute; background: var(--ema-secondary-teal); opacity: .7; transform: scale(0); }
.sstory__label-line--h { top: 50%; height: 2px; width: calc(var(--label-gap) - var(--space-3)); transform-origin: left center; }
.sstory__label-line--v { display: none; }
.sstory__label--tl .sstory__label-line--h, .sstory__label--bl .sstory__label-line--h { left: 100%; }
.sstory__label--tr .sstory__label-line--h, .sstory__label--br .sstory__label-line--h { right: 100%; transform-origin: right center; }
.sstory__label--tl .sstory__label-line--v, .sstory__label--tr .sstory__label-line--v { top: 100%; }
.sstory__label--bl .sstory__label-line--v, .sstory__label--br .sstory__label-line--v { bottom: 100%; transform-origin: center bottom; }

/* ---- Cartes : rangée horizontale, glisse d'une carte par étape ------------------------- */
.sstory__cards { list-style: none; margin: 0; padding: 0; position: absolute; bottom: 5%; max-height: 40vh; align-items: flex-end; left: calc(50% - var(--card-w) / 2);
  display: flex; gap: var(--space-5); z-index: 4; will-change: transform; }
.sstory__card { flex: 0 0 var(--card-w); width: var(--card-w); padding: var(--space-4) var(--space-5); max-height: 34vh; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface-glass-light-strong); box-shadow: var(--shadow-card); color: var(--ink); opacity: .45; transform: scale(.96);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); overflow-wrap: normal; word-break: keep-all; }
.on-dark .sstory__card { background: var(--surface-glass); color: var(--on-ink); box-shadow: none; }
.sstory__card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.sstory__card-title { margin: 0; color: var(--text-strong); font-size: var(--text-base); }
.on-dark .sstory__card-title { color: var(--on-ink); }
.sstory__card-index { font-family: var(--font-mono); color: var(--ema-primary); }
.sstory__card-text { margin: 0; color: var(--ink-muted); font-size: var(--text-small); }
.on-dark .sstory__card-text { color: var(--on-ink-muted); }
.sstory__card-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sstory__card-list li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-glass-mint); color: var(--text-strong); }
.on-dark .sstory__card-list li { color: var(--on-ink); }

/* ---- Sortie ----------------------------------------------------------------------------- */
.sstory__outro { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 6; width: min(100%, 60ch); text-align: center;
  display: grid; gap: var(--space-5); justify-items: center; opacity: 0; visibility: hidden; transform: translateY(24px); }
.sstory__outro-title { margin: 0; color: var(--text-strong); font-weight: var(--weight-bold); }
.on-dark .sstory__outro-title { color: var(--on-ink); }

/* ---- Barre de progression ------------------------------------------------------------- */
.sstory__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--surface-glass); z-index: 7; }
.sstory__progress-fill { display: block; height: 100%; width: 100%; background: var(--ema-primary); transform: scaleX(0); transform-origin: left center; }

/* =========================================================================================
   MOTEUR CSS — scroll-driven animations (Chrome, Edge, Safari 26). Plage : la phase collée.
   ========================================================================================= */
@supports (animation-timeline: view()) {
  .sstory__title, .sstory__lede, .sstory__plate, .sstory__plate-edge, .sstory__label, .sstory__label-line, .sstory__cards, .sstory__card, .sstory__outro, .sstory__progress-fill, .sflow__g, .sflow__wires path, .sflow__dots {
    animation-timeline: --sstory; animation-range: contain 0% contain 100%; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1s; }
  .sstory__title { animation-name: sstory-title; }
  .sstory__lede { animation-name: sstory-lede; }
  .sstory__plate { animation-name: sstory-plate; }
  .sstory__plate-edge { animation-name: sstory-edge; }
  .sstory__label:nth-child(1) { animation-name: sstory-label-1; }
  .sstory__label:nth-child(2) { animation-name: sstory-label-2; }
  .sstory__label:nth-child(3) { animation-name: sstory-label-3; }
  .sstory__label:nth-child(4) { animation-name: sstory-label-4; }
  .sstory__label:nth-child(1) .sstory__label-line { animation-name: sstory-line-1; }
  .sstory__label:nth-child(2) .sstory__label-line { animation-name: sstory-line-2; }
  .sstory__label:nth-child(3) .sstory__label-line { animation-name: sstory-line-3; }
  .sstory__label:nth-child(4) .sstory__label-line { animation-name: sstory-line-4; }
  .sstory__cards { animation-name: sstory-track; }
  .sstory__card:nth-child(1) { animation-name: sstory-card-1; }
  .sstory__card:nth-child(2) { animation-name: sstory-card-2; }
  .sstory__card:nth-child(3) { animation-name: sstory-card-3; }
  .sstory__card:nth-child(4) { animation-name: sstory-card-4; }
  .sstory__outro { animation-name: sstory-outro; }
  .sstory__progress-fill { animation-name: sstory-progress; }
  .sflow__g--1 { animation-name: sstory-flow-1; } .sflow__g--2 { animation-name: sstory-flow-2; }
  .sflow__g--3 { animation-name: sstory-flow-3; } .sflow__g--4 { animation-name: sstory-flow-4; }
  .sflow__wires--2 path { animation-name: sstory-wire-2; } .sflow__wires--3 path { animation-name: sstory-wire-3; } .sflow__wires--4 path { animation-name: sstory-wire-4; }
  .sflow__dots--2 { animation-name: sstory-dots-2; } .sflow__dots--3 { animation-name: sstory-dots-3; } .sflow__dots--4 { animation-name: sstory-dots-4; }
}
@keyframes sstory-title { 0% { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; } 8% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
  11% { clip-path: inset(0 0 0 0); opacity: 1; } 16% { opacity: 0; transform: scale(.9) translateY(-18px); } 100% { opacity: 0; transform: scale(.9) translateY(-18px); clip-path: inset(0 0 0 0); } }
@keyframes sstory-lede { 0% { opacity: 0; } 6% { opacity: 0; } 9% { opacity: 1; } 12% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sstory-plate { 0% { opacity: 0; transform: scale(.84) translateZ(-120px); } 14% { opacity: 0; transform: scale(.84) translateZ(-120px); }
  22% { opacity: 1; transform: scale(1) translateZ(0); } 84% { opacity: 1; transform: scale(1) translateZ(0); } 94% { opacity: 0; transform: scale(1.12) translateZ(80px); } 100% { opacity: 0; transform: scale(1.12) translateZ(80px); } }
@keyframes sstory-edge { 0% { transform: scale(0); } 16% { transform: scale(0); } 26% { transform: scale(1); } 100% { transform: scale(1); } }
/* Repères : centres 22 / 40 / 58 / 76 % — loin (.62, .3) → au point (1, 1) → passé (1.42, 0, flou). */
@keyframes sstory-label-1 { 0% { transform: scale(.62); opacity: .3; filter: blur(0); } 6% { transform: scale(.62); opacity: .3; filter: blur(0); } 18% { transform: scale(1); opacity: 1; filter: blur(0); } 26% { transform: scale(1); opacity: 1; filter: blur(0); } 36% { transform: scale(1.42); opacity: 0; filter: blur(6px); } 100% { transform: scale(1.42); opacity: 0; filter: blur(6px); } }
@keyframes sstory-label-2 { 0% { transform: scale(.62); opacity: .3; filter: blur(0); } 24% { transform: scale(.62); opacity: .3; filter: blur(0); } 36% { transform: scale(1); opacity: 1; filter: blur(0); } 44% { transform: scale(1); opacity: 1; filter: blur(0); } 54% { transform: scale(1.42); opacity: 0; filter: blur(6px); } 100% { transform: scale(1.42); opacity: 0; filter: blur(6px); } }
@keyframes sstory-label-3 { 0% { transform: scale(.62); opacity: .3; filter: blur(0); } 42% { transform: scale(.62); opacity: .3; filter: blur(0); } 54% { transform: scale(1); opacity: 1; filter: blur(0); } 62% { transform: scale(1); opacity: 1; filter: blur(0); } 72% { transform: scale(1.42); opacity: 0; filter: blur(6px); } 100% { transform: scale(1.42); opacity: 0; filter: blur(6px); } }
@keyframes sstory-label-4 { 0% { transform: scale(.62); opacity: .3; filter: blur(0); } 60% { transform: scale(.62); opacity: .3; filter: blur(0); } 72% { transform: scale(1); opacity: 1; filter: blur(0); } 80% { transform: scale(1); opacity: 1; filter: blur(0); } 90% { transform: scale(1.42); opacity: 0; filter: blur(6px); } 100% { transform: scale(1.42); opacity: 0; filter: blur(6px); } }
@keyframes sstory-line-1 { 0% { transform: scale(0); } 10% { transform: scale(0); } 18% { transform: scale(1); } 28% { transform: scale(1); } 34% { transform: scale(0); } 100% { transform: scale(0); } }
@keyframes sstory-line-2 { 0% { transform: scale(0); } 28% { transform: scale(0); } 36% { transform: scale(1); } 46% { transform: scale(1); } 52% { transform: scale(0); } 100% { transform: scale(0); } }
@keyframes sstory-line-3 { 0% { transform: scale(0); } 46% { transform: scale(0); } 54% { transform: scale(1); } 64% { transform: scale(1); } 70% { transform: scale(0); } 100% { transform: scale(0); } }
@keyframes sstory-line-4 { 0% { transform: scale(0); } 64% { transform: scale(0); } 72% { transform: scale(1); } 82% { transform: scale(1); } 88% { transform: scale(0); } 100% { transform: scale(0); } }
@keyframes sstory-track { 0% { transform: translateX(0); opacity: 0; } 14% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; transform: translateX(0); } 24% { transform: translateX(0); opacity: 1; }
  76% { transform: translateX(calc(-1 * (var(--n) - 1) * var(--card-step))); opacity: 1; } 86% { opacity: 1; transform: translateX(calc(-1 * (var(--n) - 1) * var(--card-step))); } 94% { opacity: 0; transform: translateX(calc(-1 * (var(--n) - 1) * var(--card-step))); } 100% { opacity: 0; transform: translateX(calc(-1 * (var(--n) - 1) * var(--card-step))); } }
@keyframes sstory-card-1 { 0% { opacity: 1; transform: scale(1); } 26% { opacity: 1; transform: scale(1); } 34% { opacity: .45; transform: scale(.96); } 100% { opacity: .45; transform: scale(.96); } }
@keyframes sstory-card-2 { 0% { opacity: .45; transform: scale(.96); } 28% { opacity: .45; transform: scale(.96); } 36% { opacity: 1; transform: scale(1); } 44% { opacity: 1; transform: scale(1); } 52% { opacity: .45; transform: scale(.96); } 100% { opacity: .45; transform: scale(.96); } }
@keyframes sstory-card-3 { 0% { opacity: .45; transform: scale(.96); } 46% { opacity: .45; transform: scale(.96); } 54% { opacity: 1; transform: scale(1); } 62% { opacity: 1; transform: scale(1); } 70% { opacity: .45; transform: scale(.96); } 100% { opacity: .45; transform: scale(.96); } }
@keyframes sstory-card-4 { 0% { opacity: .45; transform: scale(.96); } 64% { opacity: .45; transform: scale(.96); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sstory-outro { 0% { opacity: 0; visibility: hidden; transform: translateY(24px); } 88% { opacity: 0; visibility: hidden; transform: translateY(24px); } 96% { opacity: 1; visibility: visible; transform: translateY(0); } 100% { opacity: 1; visibility: visible; transform: translateY(0); } }
@keyframes sstory-progress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
/* le flux : mêmes centres d'étape que les repères (22 · 40 · 58 · 76 %) */
@keyframes sstory-flow-1 { 0%, 12% { opacity: .28; } 20%, 100% { opacity: 1; } }
@keyframes sstory-flow-2 { 0%, 30% { opacity: .28; } 38%, 100% { opacity: 1; } }
@keyframes sstory-flow-3 { 0%, 48% { opacity: .28; } 56%, 100% { opacity: 1; } }
@keyframes sstory-flow-4 { 0%, 66% { opacity: .28; } 74%, 100% { opacity: 1; } }
@keyframes sstory-wire-2 { 0%, 34% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes sstory-wire-3 { 0%, 52% { stroke-dashoffset: 1; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes sstory-wire-4 { 0%, 70% { stroke-dashoffset: 1; } 82%, 100% { stroke-dashoffset: 0; } }
@keyframes sstory-dots-2 { 0%, 46% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes sstory-dots-3 { 0%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes sstory-dots-4 { 0%, 82% { opacity: 0; } 86%, 100% { opacity: 1; } }

/* =========================================================================================
   MOTEUR JS — module.js pose .no-sda et alimente les variables (mêmes courbes).
   ========================================================================================= */
.no-sda .sstory__title { clip-path: inset(0 var(--clip, 100%) 0 0); opacity: var(--o, 1); transform: scale(var(--s, 1)) translateY(var(--ty, 0px)); }
.no-sda .sstory__lede { opacity: var(--o, 0); }
.no-sda .sstory__plate { opacity: var(--o, 0); transform: scale(var(--s, .84)) translateZ(var(--tz, -120px)); }
.no-sda .sstory__plate-edge { transform: scale(var(--edge, 0)); }
.no-sda .sstory__label { transform: scale(var(--s, .62)); opacity: var(--o, .3); filter: blur(var(--bl, 0px)); }
.no-sda .sstory__label-line { transform: scale(var(--ln, 0)); }
.no-sda .sstory__cards { transform: translateX(calc(-1 * var(--k, 0) * var(--card-step))); opacity: var(--o, 0); }
.no-sda .sstory__card { opacity: var(--o, .45); transform: scale(var(--s, .96)); }
.no-sda .sstory__outro { opacity: var(--o, 0); visibility: var(--vis, hidden); transform: translateY(var(--ty, 24px)); }
.no-sda .sstory__progress-fill { transform: scaleX(var(--p, 0)); }
.no-sda .sflow__g { opacity: var(--fo, .28); }
.no-sda .sflow__wires path { stroke-dashoffset: var(--wd, 1); }
.no-sda .sflow__dots { opacity: var(--do, 0); }

/* =========================================================================================
   ÉTAT STATIQUE — mouvement réduit, ou petit écran : rien ne bouge, tout est lisible.
   ========================================================================================= */
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .sflow__dots { display: none; } /* pas de points en mouvement sous mouvement réduit */
  .sflow__brain { animation: none; transform: none; }
  .sstory { min-height: 0; padding-block: var(--section-py); }
  .sstory__sticky { position: static; height: auto; overflow: visible; }
  .sstory__stage { height: auto; width: auto; max-width: var(--section-maxw); padding-inline: var(--section-gutter); perspective: none; display: grid; gap: var(--space-6); justify-items: center; }
  .sstory__title, .sstory__lede, .sstory__outro { width: auto; max-width: 100%; }
  .sstory__title, .sstory__lede, .sstory__plate, .sstory__cards, .sstory__outro { position: static; translate: none; transform: none; opacity: 1; visibility: visible; animation: none; clip-path: none; }
  .sstory__plate { width: min(100%, 720px); height: auto; }
  .sstory__plate-edge { transform: scale(1); animation: none; }
  .sstory__plate { aspect-ratio: 700 / 360; }

  .sflow__g, .sflow__dots { opacity: 1; animation: none; }
  .sflow__wires path { stroke-dashoffset: 0; animation: none; }
  .no-sda .sflow__g, .no-sda .sflow__dots { opacity: 1; } .no-sda .sflow__wires path { stroke-dashoffset: 0; }
  .sstory__labels, .sstory__progress { display: none; }
  .sstory__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); width: 100%; max-width: 100%; max-height: none; left: auto; }
  .sstory__card { width: auto; flex: none; opacity: 1; transform: none; animation: none; }
  .no-sda .sstory__title, .no-sda .sstory__lede, .no-sda .sstory__plate, .no-sda .sstory__cards, .no-sda .sstory__card, .no-sda .sstory__outro { opacity: 1; transform: none; clip-path: none; visibility: visible; }
}
/* 02/09 (Gaspard : « alléger certaines mises en page » en mobile) — sous 768 px le flux (700 × 360)
   tombe à 360 px de large, libellés de 6 px : la plaque s'efface, les quatre cartes portent tout.
   (Séparé du bloc mouvement-réduit : sur grand écran sans animation, le flux statique reste lisible.) */
@media (max-width: 767px) { .sstory__plate:has(.sflow) { display: none; } }