/* ============================================================================
   Scène 2026 — film piloté par le défilement (v2)
   Desktop souris : la vidéo avance avec la molette, le texte se déroule en
   cinq temps. Tactile / mouvement réduit : version empilée, vidéo en boucle.
   ============================================================================ */
.chapter--scene { position: relative; }
.scene { position: relative; z-index: 6; width: var(--scene-w, 100vw); margin-left: var(--scene-bleed, 0px); background: var(--bg-deep); }
.scene__track { height: 460vh; }
.scene__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.scene__film { position: absolute; inset: 0; clip-path: inset(var(--clip, 0%) round var(--clip-r, 0px)); will-change: clip-path; }
.scene__film video, .scene__film img, .scene__film canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--fx, 4%), 0, 0) scale(var(--fs, 1.08)); transform-origin: 55% 55%; will-change: transform; }
.scene__film video, .scene__film canvas { opacity: 0; transition: opacity 700ms ease; }
.scene__film.is-ready video, .scene__film.is-ready canvas { opacity: 1; }
.scene--live .scene__film video { display: none; }
.scene--static .scene__film canvas { display: none; }
.scene__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.6) 28%, rgba(10,10,10,0) 55%),
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 70%, rgba(10,10,10,0.9) 100%); }
.scene__grain { position: absolute; inset: -50%; width: 200%; height: 200%; pointer-events: none; opacity: 0.07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: scene-grain 1.2s steps(6) infinite; }
@keyframes scene-grain { 0%{transform:translate(0,0)} 33%{transform:translate(-4%,3%)} 66%{transform:translate(3%,-2%)} 100%{transform:translate(0,0)} }

/* HUD : année, étapes, barre */
.scene__hud { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 22px); display: flex; align-items: center; gap: 28px; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-muted); }
.scene__kicker { color: var(--bronze-light); }
.scene__steps { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.scene__steps li { transition: color 400ms ease; }
.scene__steps li.is-on { color: var(--text); }
.scene__bar { flex: 1; height: 1px; background: rgba(255,255,255,0.14); position: relative; overflow: hidden; }
.scene__bar i { position: absolute; inset: 0; background: var(--bronze-light); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Les cinq temps du texte */
.scene__beats { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.scene__beat { position: absolute; left: var(--gutter); bottom: clamp(70px, 14vh, 150px); width: min(34ch, 40vw); opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px); will-change: opacity, transform, filter; }
.scene__beat p { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--text); }
.scene__title { font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: 0.96; width: 9ch; margin: 0; }
.scene__beat--title { width: min(60vw, 900px); }
.scene__cap { margin-top: 18px; font-family: var(--font-display); font-size: 0.78rem !important; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze-light) !important; }
.scene__beat--quote { width: min(60vw, 920px); }
.scene__beat--quote p { font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 4.4rem) !important; line-height: 1.04 !important; color: var(--text); }

/* Chiffres moteur, pilotés par le défilement */
.scene__specs { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(70px, 14vh, 150px); display: flex; gap: clamp(28px, 4vw, 64px); margin: 0; opacity: 0; transform: translate3d(0, 24px, 0); will-change: opacity, transform; }
.scene__specs div { text-align: right; }
.scene__specs dt { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.scene__specs dt, .scene__specs dd { text-shadow: 0 2px 18px rgba(0,0,0,0.85); }
.scene__specs dd { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1; color: var(--text); }
.scene__specs dd small { font-size: 0.36em; letter-spacing: 0.12em; color: var(--bronze-light); margin-left: 6px; }

.scene__after { margin-top: clamp(40px, 6vw, 80px); }

/* ---------- Version statique (tactile, écran étroit, mouvement réduit, sans JS) ---------- */
.no-js .scene, .scene--static { width: auto; margin-left: 0; background: transparent; }
.no-js .scene__track, .scene--static .scene__track { height: auto; }
.no-js .scene__sticky, .scene--static .scene__sticky { position: relative; height: auto; overflow: visible; }
.no-js .scene__film, .scene--static .scene__film { position: relative; aspect-ratio: 16 / 9; clip-path: none; border-radius: var(--radius-sm); overflow: hidden; }
.no-js .scene__film video, .scene--static .scene__film video { transform: none; }
.no-js .scene__shade, .scene--static .scene__shade { background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.7) 100%); }
.no-js .scene__hud, .scene--static .scene__hud { position: static; margin: 0 0 18px; flex-wrap: wrap; gap: 14px; }
.no-js .scene__bar, .scene--static .scene__bar { display: none; }
.no-js .scene__beats, .scene--static .scene__beats { position: static; display: grid; gap: 22px; margin-top: 28px; }
.no-js .scene__beat, .scene--static .scene__beat { position: static; width: auto; max-width: 62ch; opacity: 1; transform: none; filter: none; }
.no-js .scene__specs, .scene--static .scene__specs { position: static; opacity: 1; transform: none; margin-top: 28px; justify-content: flex-start; }
.scene--static .scene__specs div { text-align: left; }
.scene--static .scene__beat--quote p { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
.scene--static .scene__title { font-size: clamp(2.2rem, 9vw, 3.4rem); width: auto; }

/* ---------- Smartphone / tablette : le film en bandeau, le récit dessous ---------- */
@media (max-width: 900px) {
  .scene__track { height: 420vh; height: 420svh; }
  .scene__hud { top: calc(var(--header-h) + 14px); flex-wrap: wrap; gap: 10px 16px; font-size: 0.62rem; letter-spacing: 0.2em; }
  .scene__steps { gap: 14px; }
  .scene__bar { flex: 1 0 100%; order: 3; }
  .scene--live .scene__film { top: calc(var(--header-h) + 64px); bottom: auto; height: 66vw; max-height: 52svh; }
  .scene--live .scene__shade { background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0) 25%, rgba(10,10,10,0) 70%, rgba(10,10,10,0.95) 100%); }
  .scene--live .scene__beats { top: calc(var(--header-h) + 64px + min(66vw, 52svh) + 18px); bottom: 0; }
  .scene--live .scene__beat { left: var(--gutter); right: var(--gutter); top: 0; bottom: auto; width: auto; }
  .scene--live .scene__beat p { font-size: clamp(1rem, 4.2vw, 1.12rem); line-height: 1.55; }
  .scene--live .scene__title { font-size: clamp(2.6rem, 13vw, 3.6rem); width: auto; }
  .scene--live .scene__beat--title, .scene--live .scene__beat--quote { width: auto; }
  .scene--live .scene__beat--quote p { font-size: clamp(2rem, 10vw, 2.8rem) !important; }
  .scene--live .scene__specs { right: var(--gutter); left: auto; bottom: auto; top: calc(var(--header-h) + 64px + min(66vw, 52svh) - 78px); gap: 22px; }
  .scene--live .scene__specs dt { font-size: 0.56rem; letter-spacing: 0.16em; }
  .scene--live .scene__specs dd { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}