/* ==========================================================================
   Navbar flottante (glassmorphism) — sitewide, sauf index.html.
   Fichier isolé : ne modifie jamais style.css, ne s'applique qu'aux
   éléments portant la classe .hero-page-header, ajoutée sur <header> à
   côté de .site-header (jamais à sa place). Aucun composant, formulaire,
   calcul ou route n'est concerné.

   Reprend à l'identique la navbar flottante déjà utilisée sur la page
   d'accueil (assets/css/hero-cinematic.css) afin que le même visuel soit
   cohérent sur l'ensemble du site. Volontairement dupliqué plutôt que
   partagé avec hero-cinematic.css : ce dernier reste strictement réservé à
   la page d'accueil (vidéo, canvas, halo CTA) et ne doit jamais être
   chargé ailleurs ; toute évolution du style de la navbar doit donc être
   répercutée dans les deux fichiers.
   ========================================================================== */

.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 : sur une pill entièrement arrondie (border-radius
   999px), le padding standard de .container (24px) laisse le logo et
   l'icône profil quasi collés à la courbe des bords — signalé par Jean.
   On ajoute de la marge horizontale dédiée à ce header flottant. */
.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 les pages hero-page-header (quasi toutes, sauf
   index.html) — indépendamment du thème Premium (.dark-header, un tout
   autre interrupteur). Or les couleurs de texte des liens/dropdowns
   sombres n'existaient jusqu'ici que sous .dark-header (voir style.css) :
   un visiteur non-Premium ouvrant le menu hamburger sur mobile/écran
   étroit se retrouvait donc avec du texte bleu marine (var(--text), pensé
   pour un fond clair) sur ce fond sombre — quasi illisible, signalé par
   Jean ("bleu sur bleu"). On force ici un texte clair inconditionnel pour
   les déclencheurs (Simulateur/L'observatoire/Roadmaps), qu'importe
   .dark-header, en cohérence avec le fond toujours sombre du panneau à
   cette largeur.
   CORRECTIF 2026-08-11 (bis) : le panneau DÉROULANT (.nav-dropdown-menu,
   la liste de liens qui apparaît sous chaque déclencheur) est maintenant
   une vraie carte blanche à la demande de Jean, "pour mettre en avant les
   différents boutons" (voir style.css) — il n'a donc plus besoin d'un
   texte clair spécifique ici : le texte sombre par défaut (var(--text))
   s'applique déjà correctement sur ce fond blanc. Les anciennes règles de
   texte clair pour .nav-dropdown-menu ont été retirées (elles rendraient
   le texte illisible sur la nouvelle carte blanche). Le menu profil
   (.nav-profile) garde son propre panneau blanc, inchangé (voir style.css). */
@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); }
}

/* --- Accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .hero-page-header.hero-page-header { transition: none; }
}
.hero-page-header a:focus-visible,
.hero-page-header button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}