/* ==========================================================================
   Hero cinématique — page Observatoire uniquement.
   Fichier isolé : ne modifie jamais style.css ni .page-hero partagé par
   36 autres pages. S'applique uniquement aux éléments portant .obs-hero.
   ========================================================================== */

.page-hero.obs-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin-top: -1px;
  min-height: min(100vh, 940px);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
}

.obs-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
.obs-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.obs-hero-video.is-ready { opacity: 1; }
.obs-hero-fallback {
  position: absolute;
  inset: 0;
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
}
.obs-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Halo doré discret, évoque un lever de soleil sans dénaturer la vidéo */
.obs-hero-sunhalo {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 46vw;
  max-width: 620px;
  height: 46vw;
  max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 199, 147, 0.18), transparent 68%);
  z-index: 1;
  pointer-events: none;
}

.obs-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(4, 9, 20, 0.55) 0%, rgba(4, 9, 20, 0.25) 30%, rgba(4, 9, 20, 0.4) 100%),
    radial-gradient(circle at 50% 38%, rgba(4, 9, 20, 0.05), rgba(4, 9, 20, 0.5) 78%);
  pointer-events: none;
}

/* Fondu de sortie : mélange la couleur du Hero avec le fond de la section
   suivante (blanc en thème clair, navy en thème Premium sombre). */
.obs-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  min-height: 120px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%);
  pointer-events: none;
}
.dark-section .obs-hero-fade {
  /* CORRECTIF 2026-08-13 : fondu vers var(--navy-deep) (bleu nuit) alors
     que le reste du thème Premium est passé au "noir vrai" #08090b — créait
     un patch bleuté juste sous ce hero. Aligné sur la même teinte noire. */
  background: linear-gradient(180deg, rgba(5, 14, 28, 0) 0%, #08090b 90%);
}

.obs-hero-inner {
  position: relative;
  z-index: 3;
  padding: 84px 0 56px;
  text-align: center;
}
.obs-hero-inner .eyebrow { color: var(--gold-light); }
.obs-hero-inner h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3); }
.obs-hero-inner p { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.24); }
/* Badges (ex. "12 chapitres") posés directement sur un Hero sombre : le
   .tag-gold par défaut (pensé pour un fond clair) devient peu lisible sur
   .obs-hero — variante plus claire, réutilisable par tout Hero de cette
   famille, pas seulement celui de l'Observatoire. */
.obs-hero-inner .tag-gold {
  background: rgba(223, 199, 147, 0.14);
  color: var(--gold-light);
  border-color: rgba(223, 199, 147, 0.35);
}

.obs-hero-scroll-cue {
  margin: 28px auto 0;
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.55);
  animation: obs-cue-bounce 2.4s ease-in-out infinite;
}
.obs-hero-scroll-cue svg { width: 100%; height: 100%; }
@keyframes obs-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(8px); opacity: 0.9; }
}

/* --- Entrée en cascade --- */
.obs-anim-item {
  opacity: 0;
  transform: translateY(20px);
}
.obs-anim-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Variante compacte : réutilisée par des Hero qui n'ont pas la même densité
   visuelle que celui de l'Observatoire (pas de vidéo, canvas seul) — évite
   un grand vide entre le contenu texte et le bas du Hero sur les écrans
   hauts. N'affecte que les Hero portant explicitement ce modificateur. */
.page-hero.obs-hero.obs-hero--compact {
  min-height: min(58vh, 600px);
}
.obs-hero--compact .obs-hero-inner { padding: 72px 0 40px; }

/* --- Responsive --- */
@media (max-width: 760px) {
  .page-hero.obs-hero { min-height: 82vh; }
  .page-hero.obs-hero.obs-hero--compact { min-height: 66vh; }
  .obs-hero-inner { padding: 64px 0 40px; }
  .obs-hero-sunhalo { width: 70vw; height: 70vw; top: 2%; right: -10%; }
  .obs-hero-fade { height: 16%; min-height: 90px; }
}

/* --- Accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .obs-hero-video { display: none; }
  .obs-hero-canvas { display: none; }
  .obs-hero-scroll-cue { animation: none; }
  .obs-anim-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}