/* VEXTRA · intégration D-Fusion — la scène validée (D1 → D2 → D3) au hero de la
   landing page réelle (VEXTRA-WEB-D-FUSION-001). Feuille EXTERNE même origine :
   la CSP de la page est style-src 'self' (aucun style inline, aucune écriture de
   style par JS — le moteur pilote les calques par attributs SVG/canvas).

   Règles d'intégration respectées :
   · Seul le DÉCOR du hero (orbes/pattern) est remplacé : le contenu éditorial
     (h1, lede, piliers, CTA, sysmap) et les sections sont ceux de v2.css.
   · La feuille ne règle JAMAIS l'opacité/transform des couches de scène.
   · Piste « roulette » 400vh : activée uniquement par html.scene-roulette
     (moteur + écran large + mouvement). Sans JS / reduced-motion / mobile :
     hero à hauteur naturelle, la page reste une page.
   · Sans JS : poster D1 (opacité en attribut) + pause masquée (html.scene-on requis). */

/* ── Hôte du hero : la scène remplace le décor, le contenu éditorial reste ── */
.hero-scene { padding: 0; overflow: visible; } /* overflow:hidden casserait le sticky */
.scene-track { position: relative; }

.scene {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh; padding: var(--sp-5, 3rem) 0;
  background: #04101f;
}
.scene .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer-bg    { z-index: 0; }
.layer-fx    { z-index: 1; }
.layer-d1    { z-index: 2; }
.layer-flux  { z-index: 3; }
.layer-d2    { z-index: 4; }
.layer-d3    { z-index: 5; }
.layer-obj   { z-index: 6; }
.layer-morph { z-index: 7; }
.layer-glow  { z-index: 8; }
/* Couches larges promues en couches de composition dédiées : les invalidations
   voisines (canvas, halo) ne re-rastrent plus les stries (≈ +30 FPS mesurés). */
.layer-d1, .layer-d2, .layer-d3 { will-change: transform, opacity; }

/* Voile de lisibilité : le texte éditorial reste lisible sur TOUS les actes */
.scene-veil {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(4, 10, 22, .62) 0%, rgba(4, 10, 22, .20) 40%, rgba(4, 10, 22, 0) 64%),
    linear-gradient(102deg, rgba(4, 10, 22, .80) 0%, rgba(4, 10, 22, .44) 48%, rgba(4, 10, 22, .16) 100%);
}
.hero-scene .hero-grid { z-index: 20; }          /* au-dessus de tous les calques */
.hero-scene .sysmap { box-shadow: 0 18px 54px rgba(2, 6, 16, .45); }

/* ── Roulette : piste collante 400vh — SEULEMENT si html.scene-roulette (JS,
      mouvement, écran large). Position sticky interdite sous overflow:hidden :
      .hero-scene le met donc à visible. ── */
html.scene-roulette .scene-track { height: 400vh; }
html.scene-roulette .scene {
  position: sticky; top: 0; height: 100vh; min-height: 560px; padding: 0;
}

/* ── L5 : dimensionnement du contenu dans la scène figée (roulette 100vh).
      Cause mesurée : .hero-grid ≈ 974 px (h1 seul ≈ 508 px / 7 lignes à 70 px
      sur 596 px de large) > 100vh sur tout écran plus bas que ≈ 1050 px ; le
      centrage flex de .scene fait alors déborder le bloc SOUS le header sticky
      (haut masqué) et SOUS le viewport (CTAs coupés).
      Correctif : hauteur du titre bornée par la hauteur disponible, puis
      rythme vertical compact sous 940 px — uniquement en mode roulette
      (scène 100vh figée) ; mobile, reduced et sans-JS inchangés. ── */
html.scene-roulette .hero h1 {
  font-size: clamp(2.4rem, min(4vw + 1rem, 6.4vh), 4.4rem);
}
@media (min-width: 62rem) and (max-height: 940px) {
  html.scene-roulette .hero .lede { font-size: var(--step--1); margin-bottom: var(--sp-3); }
  html.scene-roulette .pillars { gap: var(--sp-1); margin-bottom: var(--sp-3); }
  html.scene-roulette .hero-grid { gap: var(--sp-4); }
  html.scene-roulette .sysmap { padding: var(--sp-3); }
  html.scene-roulette .sysmap-desc { min-height: 0; }
}

/* ── Pause discrète (WCAG 2.2.2) : affichée seulement si le moteur est prêt
      (html.scene-on) et masquée en reduced-motion (rien à mettre en pause). ── */
.scene-pause {
  display: none; position: absolute; z-index: 30;
  right: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(0.75rem, 2vw, 1.5rem);
  width: 44px; height: 44px;                     /* cible tactile ≥ 44 px */
  align-items: center; justify-content: center;
  background: rgba(4, 16, 31, .55); color: #a9bcd6;
  border: 1px solid #1d3357; border-radius: 999px;
  font-size: .95rem; line-height: 1; cursor: pointer; opacity: .7;
  transition: opacity .2s ease, border-color .2s ease;
}
.scene-pause:hover { opacity: 1; border-color: #22c9f0; }
.scene-pause:focus-visible { outline: 2px solid #22c9f0; outline-offset: 2px; opacity: 1; }
html.scene-on .scene-pause { display: inline-flex; }
html.scene-reduced .scene-pause { display: none; }

/* ── Impression : le contenu éditorial s'imprime, la scène ne s'imprime pas ── */
@media print {
  html.scene-roulette .scene-track, .scene-track { height: auto; }
  html.scene-roulette .scene, .scene {
    position: static; height: auto; min-height: 0; display: block; background: none;
  }
  .layer, .scene-veil, .scene-pause { display: none !important; }
}