/* ══════════════════════════════════════════════════════════════
   QUATRE V2 — HERO STICKY (pattern commun à toutes les pages)
   La hero reste épinglée, le contenu scrolle par-dessus.
   --hero-p (0 → 1, posé par shared.js) estompe les enfants du hero.
   data-fade-dist sur .hero ajuste la longueur du fade (défaut 0.45).
   ═════════════════════════════════════════════════════════════ */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  background-color: var(--bg-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero > * {
  opacity: calc(1 - var(--hero-p, 0));
}

/* Les sections qui suivent recouvrent le hero sticky */
.page-over,
.segment,
.footer {
  position: relative;
  z-index: 1;
}