/* ==========================================================================
   Hero cinématique — page d'accueil uniquement.
   Fichier isolé : ne modifie jamais style.css, ne s'applique qu'aux
   éléments portant les classes .hero-page-header / .hero-cinematic.
   ========================================================================== */

/* --- Navbar flottante (glassmorphism) --------------------------------- */
.hero-page-header.hero-page-header {
  margin: 14px auto 0;
  max-width: 1180px;
  width: calc(100% - 32px);
  border-radius: 999px;
  background: rgba(9, 18, 34, 0.42);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 10px 34px rgba(4, 10, 22, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-page-header.hero-page-header.is-scrolled {
  background: rgba(6, 13, 26, 0.82);
  box-shadow: 0 14px 40px rgba(4, 10, 22, 0.32);
}
.hero-page-header .nav-wrap { min-height: 68px; padding: 10px 0; }
/* CORRECTIF 2026-08-24 : voir même correctif dans site-header-glass.css
   (logo/profil collés aux bords arrondis de la pill flottante). */
.hero-page-header .container.nav-wrap { padding-left: 34px; padding-right: 34px; }
.hero-page-header .brand-name { color: #fff; }
.hero-page-header .brand-name .accent { color: #8ea0c9; }
.hero-page-header .nav-links > a,
.hero-page-header .nav-dropdown-trigger,
.hero-page-header .nav-dropdown-trigger-link { color: rgba(255, 255, 255, 0.86); }
/* CORRECTIF 2026-08-11 : ce sélecteur (3 classes + :hover) est plus
   spécifique que .nav-dropdown-trigger-link:hover / .nav-dropdown.open
   .nav-dropdown-trigger de style.css (fond off-white + texte navy) — il
   gagnait donc UNIQUEMENT sur la couleur de texte (color:#fff), laissant
   le fond off-white de style.css intact en dessous : texte blanc sur
   fond quasi blanc au survol souris de Simulateur/L'observatoire/Roadmaps
   sur écran étroit, signalé par Jean. On fixe ici fond ET texte ensemble
   pour ne plus jamais dépendre de la règle de style.css sous-jacente. */
.hero-page-header .nav-links > a:hover,
.hero-page-header .nav-links > a.active,
.hero-page-header .nav-dropdown-trigger:hover,
.hero-page-header .nav-dropdown.open .nav-dropdown-trigger,
.hero-page-header .nav-dropdown-trigger-link:hover,
.hero-page-header .nav-hover-dropdown:hover .nav-dropdown-trigger-link,
.hero-page-header .nav-hover-dropdown:focus-within .nav-dropdown-trigger-link {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.hero-page-header .nav-links > a.active { color: var(--gold-light); }
.hero-page-header .nav-dropdown-caret { color: var(--gold-light); }
.hero-page-header .nav-toggle span { background: #fff; }
.hero-page-header .btn-outline.btn-sm {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.hero-page-header .btn-outline.btn-sm:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 860px) {
  .hero-page-header.hero-page-header { border-radius: 22px; margin-top: 10px; width: calc(100% - 20px); }
  .hero-page-header .nav-links { background: rgba(6, 13, 26, 0.96); }
}

/* CORRECTIF 2026-08-11 : le panneau mobile (.nav-links, ci-dessus) est
   TOUJOURS sombre sur cette page — indépendamment du thème Premium
   (.dark-header, un tout autre interrupteur). Or les couleurs de texte
   claires des liens/dropdowns n'existaient jusqu'ici que sous
   .dark-header (voir style.css) : un visiteur non-Premium ouvrant le
   menu hamburger se retrouvait donc avec du texte bleu marine (pensé
   pour un fond clair) sur ce fond sombre — quasi illisible. On force ici
   un texte clair inconditionnel pour les déclencheurs (Simulateur/
   L'observatoire/Roadmaps), en cohérence avec le fond toujours sombre du
   panneau à cette largeur. Dupliqué à l'identique dans
   site-header-glass.css (voir sa propre note du même jour) — même
   politique de duplication volontaire que le reste de ce fichier.
   CORRECTIF 2026-08-11 (bis) : le panneau DÉROULANT (.nav-dropdown-menu)
   est maintenant une vraie carte blanche à la demande de Jean (voir
   style.css) — les anciennes règles de texte clair pour ce panneau ont
   été retirées ici aussi, car elles rendraient le texte illisible sur la
   nouvelle carte blanche. Le texte sombre par défaut (var(--text))
   s'applique déjà correctement sur ce fond blanc. */
@media (max-width: 760px) {
  .hero-page-header .nav-links > a,
  .hero-page-header .nav-dropdown-trigger,
  .hero-page-header .nav-dropdown-trigger-link {
    color: rgba(255, 255, 255, 0.78);
  }
  .hero-page-header .nav-links > a:hover,
  .hero-page-header .nav-links > a.active,
  .hero-page-header .nav-dropdown-trigger:hover,
  .hero-page-header .nav-dropdown.open .nav-dropdown-trigger,
  .hero-page-header .nav-dropdown-trigger-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .hero-page-header .nav-dropdown-caret { color: rgba(255, 255, 255, 0.6); }
}

/* --- Structure du Hero --------------------------------------------------- */
.hero.hero-cinematic {
  padding: 0;
  margin-top: -14px;
  overflow: hidden;
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
}
.hero.hero-cinematic .hero-glow { display: none; }

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

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 9, 20, 0.72) 0%, rgba(4, 9, 20, 0.38) 32%, rgba(5, 11, 23, 0.55) 72%, rgba(4, 9, 20, 0.88) 100%),
    linear-gradient(90deg, rgba(4, 9, 20, 0.62) 0%, rgba(4, 9, 20, 0.18) 46%, rgba(4, 9, 20, 0.05) 100%);
  pointer-events: none;
}

/* CORRECTIF 2026-08-13 : en thème Premium (.dark-section, posée sur <main>,
   donc ancêtre de ce hero), Jean veut un vrai fondu vers le noir plutôt
   qu'un dégradé qui s'arrête à 88% d'opacité puis une coupure nette contre
   la section suivante (fond noir plein #08090b). Le dernier palier passe à
   100% dans la même teinte que le reste du site en thème sombre. */
.dark-section .hero-overlay {
  background:
    linear-gradient(180deg, rgba(4, 9, 20, 0.72) 0%, rgba(4, 9, 20, 0.38) 32%, rgba(5, 11, 23, 0.6) 68%, #08090b 100%),
    linear-gradient(90deg, rgba(4, 9, 20, 0.62) 0%, rgba(4, 9, 20, 0.18) 46%, rgba(4, 9, 20, 0.05) 100%);
}

.hero-cinematic-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 96px 0 64px;
}

/* --- Texte / copy ---------------------------------------------------- */
.hero-cinematic-copy h1 {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}
.hero-cinematic-copy .lead {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.22);
}

.hero-anim-item {
  opacity: 0;
  transform: translateY(22px);
}
.hero-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);
}

/* --- CTA micro-interactions -------------------------------------------- */
.hero-cta-primary,
.hero-cta-secondary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-cta-primary:hover,
.hero-cta-secondary:hover {
  transform: translateY(-2px) scale(1.02);
}
.hero-cta-primary { box-shadow: 0 8px 28px rgba(201, 162, 75, 0.28); }
.hero-cta-primary:hover { box-shadow: 0 12px 36px rgba(201, 162, 75, 0.4); }
.hero-cta-secondary {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.hero-cta-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.hero-cta-halo {
  position: absolute;
  inset: -40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.hero-cta-primary:hover .hero-cta-halo,
.hero-cta-secondary:hover .hero-cta-halo { opacity: 1; }

/* --- Carte patrimoine : restyle glassmorphism sombre -------------------- */
.hero-glass-card.hero-glass-card {
  background: rgba(14, 24, 44, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow: 0 24px 60px rgba(2, 6, 16, 0.4);
  will-change: transform;
}
.hero-glass-card .eyebrow { color: var(--gold-light); }
.hero-glass-card .hp-muted { color: rgba(255, 255, 255, 0.6); }
.hero-glass-card .hp-figure { color: #fff; }
.hero-glass-card strong { color: #fff; }
.hero-glass-card #hp-edit-label { color: var(--gold-light) !important; }
.hero-glass-card .hp-assets-empty { color: rgba(255, 255, 255, 0.55); }
.hero-glass-card input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff;
}
.hero-glass-card .btn-outline {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.hero-glass-card .btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .hero.hero-cinematic .grid.grid-2 { grid-template-columns: 1fr; }
  .hero-cinematic-copy { text-align: left; }
}

@media (max-width: 700px) {
  .hero.hero-cinematic { min-height: auto; padding-bottom: 12px; }
  .hero-cinematic-inner { padding: 76px 0 40px; }
  .hero-video { object-position: center 60%; }
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(4, 9, 20, 0.62) 0%, rgba(4, 9, 20, 0.5) 40%, rgba(4, 9, 20, 0.9) 100%);
  }
}

/* --- Accessibilité : mouvement réduit ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-anim-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-cta-primary:hover,
  .hero-cta-secondary:hover { transform: none; }
  .hero-page-header.hero-page-header { transition: none; }
}

/* --- Focus visible (clavier) --------------------------------------------- */
.hero-cinematic a:focus-visible,
.hero-cinematic button:focus-visible,
.hero-page-header a:focus-visible,
.hero-page-header button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 6px;
}