/* ==========================================================================
   En-tête du Glossaire — page glossaire.html uniquement.
   Fichier isolé : ne modifie jamais .page-hero (partagé par 36 pages).
   S'applique uniquement aux éléments portant .glossary-hero.
   ========================================================================== */

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

.glossary-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
.glossary-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.glossary-hero-video.is-ready { opacity: 1; }
.glossary-hero-fallback {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  animation: glossary-hero-kenburns 22s ease-in-out infinite alternate;
}
@keyframes glossary-hero-kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Halo doré discret, évoque un lever de soleil sans dénaturer la photo */
.glossary-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;
}

.glossary-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.glossary-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;
}

.glossary-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 .glossary-hero-fade {
  /* CORRECTIF 2026-08-13 : aligné sur le "noir vrai" #08090b du reste du
     thème Premium, plutôt que var(--navy-deep) (patch bleuté). */
  background: linear-gradient(180deg, rgba(5, 14, 28, 0) 0%, #08090b 90%);
}

.glossary-hero-inner {
  position: relative;
  z-index: 3;
  padding: 84px 0 56px;
}

.glossary-hero-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(201, 162, 75, 0.38);
}
.glossary-hero-icon svg { width: 28px; height: 28px; color: #fff; }

.glossary-hero .eyebrow { color: var(--gold-light); }
.glossary-hero h1 { margin-bottom: 14px; color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.32); }
.glossary-hero p { color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24); }

.glossary-hero-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0 6px;
}

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

/* --- Entrée en cascade --- */
.glossary-hero-anim {
  opacity: 0;
  transform: translateY(20px);
}
.glossary-hero-anim.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);
}

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

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