[data-hero] {
  padding-top: var(--header-height);
}
/* ========================================
    ANIMATIONS GLOBALES
    ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes growWidth {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* ========================================
    HEROS « SCROLL » — STRUCTURE PARTAGÉE
    Opt-in par `data-hero-scroll` (CLAUDE.md §3.6) : la section est haute de
    plusieurs écrans, sa scène reste collée en haut pendant que le défilement
    fait avancer le film et se succéder les étapes (moteur : heros/main.js).
    Ici, la MÉCANIQUE seulement — la mise en scène (entrées, typo, couleurs)
    appartient à chaque variante.

    États de la racine :
      * (défaut)          : scène collée, une étape visible à la fois ;
      * .is-statique      : sans JS ou en mouvement réduit — textes empilés sur
                            la photo, hauteur naturelle ;
      * .is-epingle-js    : filet si un ancêtre du thème casse le sticky
                            (overflow) — le JS épingle la scène en fixe.
    ======================================== */
[data-hero-scroll] {
  /* Défilement consacré à chaque étape, en hauteurs d'écran. */
  --hero-scroll-pas: 0.85;

  position: relative;
  height: calc(100vh * (1 + (var(--hero-scroll-etapes, 4) - 1) * var(--hero-scroll-pas)));
  height: calc(100svh * (1 + (var(--hero-scroll-etapes, 4) - 1) * var(--hero-scroll-pas)));
}

/* La scène couvre l'écran sous le header transparent : pas de décalage. */
[data-hero][data-hero-scroll] {
  padding-top: 0;
}

[data-hero-scroll-scene] {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

[data-hero-scroll-media] {
  position: absolute;
  inset: 0;
  z-index: 0;
}

[data-hero-scroll-affiche],
[data-hero-scroll-film] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

[data-hero-scroll-affiche] {
  object-fit: cover;
}

/* Le film n'apparaît qu'une fois sa première image dessinée : jusque-là, et
   pour toujours si la séquence manque, c'est la photo qu'on voit. */
[data-hero-scroll-film] {
  opacity: 0;
  transition: opacity 0.8s ease;
}

[data-hero-scroll].is-pret [data-hero-scroll-film] {
  opacity: 1;
}

/* Toutes les étapes occupent la même case : une seule est visible. Les
   entrées (glissé, flou, balayage…) sont écrites par la variante. */
[data-hero-scroll-etape] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

[data-hero-scroll-etape].is-actif {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease 0.1s, visibility 0s;
}

[data-hero-scroll].est-fin [data-hero-scroll-passer] {
  opacity: 0;
  pointer-events: none;
}

[data-hero-scroll-suite] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

/* ---- Filet : sticky cassé par le thème, le JS épingle ------- */
[data-hero-scroll].is-epingle-js [data-hero-scroll-scene] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

[data-hero-scroll].is-epingle-js.est-epingle [data-hero-scroll-scene] {
  position: fixed;
}

[data-hero-scroll].is-epingle-js.est-apres [data-hero-scroll-scene] {
  top: auto;
  bottom: 0;
}

/* ---- État statique : sans JS, ou mouvement réduit ---------- */
[data-hero-scroll].is-statique {
  height: auto;
}

[data-hero-scroll].is-statique [data-hero-scroll-scene] {
  position: relative;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}

[data-hero-scroll].is-statique [data-hero-scroll-etape] {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  clip-path: none;
  transition: none;
}

/* Ce qui n'a de sens qu'en mouvement (film, indice, progression, sortie,
   repères de chapitre) s'efface. */
[data-hero-scroll].is-statique [data-hero-scroll-film],
[data-hero-scroll].is-statique [data-hero-scroll-passer],
[data-hero-scroll].is-statique [data-hero-scroll-anime] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-scroll] *,
  [data-hero-scroll] *::before,
  [data-hero-scroll] *::after {
    animation: none !important;
  }
}