/* =========================================================================
   Observatoire BSTP — En-tête « portail »
   Transparent au-dessus du héros, verre indigo au défilement.
   Portage du .glass-nav du Portail BSTP, réaccordé aux jetons de ce projet.

   À charger APRÈS main.css (il en surcharge le padding du héros).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Ajout au système d'accent du projet : une variante CLAIRE.

   Les variantes existantes (--accent-fort, --accent-survol, --accent-texte,
   --accent-profond) sont toutes PLUS SOMBRES que --accent : elles sont pensées
   pour porter du texte sur fond clair. Aucune ne convient ici.

   Sur l'indigo, --accent (#f7711c) échoue le seuil AA :
     4,89:1 sur --primary-700 | 4,42:1 sur --primary | 3,68:1 sur --primary-600
   (11px gras n'est pas du « grand texte » : le seuil reste 4,5:1.)

   --accent-clair conserve la teinte (23°) et la saturation (93%) de la marque,
   et monte la clarté à 64%. Mesures sur les trois arrêts du dégradé du héros :
     6,08:1 sur --primary-700 | 5,51:1 sur --primary | 4,57:1 sur --primary-600
   ------------------------------------------------------------------------- */
:root {
  --accent-clair: #f9904e;

  /* Triplets pour les fonds translucides.
     On écrit rgba(var(--triplet), alpha) et non color-mix() : le portail vise
     un public largement sur mobiles anciens, et color-mix() n'est acquis que
     depuis 2023 côté Safari et Firefox. Une valeur rejetée à l'analyse ne
     laisse aucune trace en console — la barre resterait simplement invisible
     au défilement. Le repli n'est pas exprimable ici, la prudence l'est.
     Tenir ces valeurs en phase avec --primary, --primary-700, --accent-fort
     et --accent-clair de main.css. */
  --rgb-primary:      30, 42, 120;   /* #1e2a78 */
  --rgb-primary-700:  26, 37, 102;   /* #1a2566 */
  --rgb-accent-fort: 184, 70, 15;    /* #b8460f */
  --rgb-accent-clair:249, 144, 78;   /* #f9904e */
}

/* ---- Ossature ------------------------------------------------------------ */
.entete {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  padding: 12px 0;
  background: transparent;
  transition: padding .5s cubic-bezier(.23, 1, .32, 1),
              background-color .5s cubic-bezier(.23, 1, .32, 1),
              border-color .5s cubic-bezier(.23, 1, .32, 1);
}

/* Pages sans héros : l'en-tête reprend sa place dans le flux, comme avant. */
.entete--opaque { position: sticky; }

.entete.est-defile,
.entete--opaque {
  padding: 8px 0;
  background: rgba(var(--rgb-primary), .88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(var(--rgb-accent-clair), .22);
}

.entete__contenu {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---- Marque -------------------------------------------------------------- */
/* Le logo officiel exige un fond clair — c'est déjà la solution retenue dans
   le pied de page (.brand-chip). On la réutilise ici telle quelle. */
.entete__marque {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 6px 12px;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1);
}
.entete__marque:hover { transform: scale(1.04); }
.entete__marque img { height: 38px; width: auto; display: block; }

/* ---- Liens --------------------------------------------------------------- */
.entete__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.lien-nav {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;          /* 0.2em au portail : trop large pour 7 entrées */
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);   /* 7,1:1 sur l'indigo */
  transition: color .2s ease;
}
.lien-nav:hover,
.lien-nav.actif { color: var(--accent-clair); }

/* ---- Boutons ------------------------------------------------------------- */
.entete__action { display: flex; align-items: center; gap: 10px; }

.btn-entete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s cubic-bezier(.23, 1, .32, 1),
              border-color .3s cubic-bezier(.23, 1, .32, 1),
              color .3s cubic-bezier(.23, 1, .32, 1),
              transform .3s cubic-bezier(.23, 1, .32, 1),
              box-shadow .3s cubic-bezier(.23, 1, .32, 1);
}

/* Fond plein : --accent-fort et non --accent.
   Blanc sur #f7711c = 2,86:1 (échec) ; blanc sur #b8460f = 5,36:1 (OK). */
.btn-entete--plein { background: var(--accent-fort); color: #fff; border: 2px solid transparent; }
.btn-entete--plein:hover {
  background: var(--accent-survol);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(var(--rgb-accent-fort), .35);
}

.btn-entete--contour { border: 2px solid rgba(255, 255, 255, .28); color: #fff; }
.btn-entete--contour:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--accent-clair);
  color: var(--accent-clair);
}

/* ---- Hamburger ----------------------------------------------------------- */
.entete__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-left: 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.entete__burger:hover { background: rgba(255, 255, 255, .22); }

/* ---- Voile plein écran --------------------------------------------------- */
.voile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--rgb-primary-700), .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.23, 1, .32, 1);
}
.voile-menu.est-ouvert { opacity: 1; pointer-events: auto; }

.voile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 90px 24px 24px;
  max-height: 100vh;
  overflow-y: auto;
}
.voile-menu__nav .lien-nav { font-size: 14px; letter-spacing: .14em; }
.voile-menu__nav .entete__action { flex-direction: column; margin-top: 10px; }

/* ---- Le héros rend la place prise par l'en-tête fixe --------------------- */
/* L'en-tête est `fixed` : il ne pousse plus rien, le héros doit lui rendre sa
   hauteur (74 px au repos) plus l'air voulu par la maquette (52 px).

   ⚠️ Ce dégagement doit rester la SEULE autorité sur le padding haut du héros.
   Les gabarits portaient un `style="padding:52px 0"` en ligne — un style inline
   bat n'importe quelle feuille de style, et onze pages sur douze passaient donc
   sous la barre. Ils ne déclarent plus que leur `padding-bottom`, qui leur est
   propre. Ne pas réintroduire de `padding` complet en ligne sur un `.hero`. */
.hero { padding-top: 126px; }

/* ---- Points de rupture ---------------------------------------------------
   Le projet travaille à 900px et 560px, repris tels quels pour la navigation.
   Il faut cependant un palier supplémentaire au-dessus : mesuré sur la page,
   le contenu incompressible de la barre vaut logo 72px + nav 625px (7 entrées,
   nowrap) + boutons 331px = 1064px, alors que .container ne fait que
   min(1180px, 92%) — soit moins de 1064px dès 1157px de fenêtre.
   Les deux boutons partent donc les premiers ; ils restent joignables dans le
   menu plein écran, dont le hamburger apparaît en même temps.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .entete .entete__action { display: none; }
  .entete__burger { display: inline-flex; }
}

@media (max-width: 900px) {
  .entete__nav { display: none; }
  .entete__burger { margin-left: auto; }
  .hero { padding-top: 110px; }
}

@media (max-width: 560px) {
  .entete__marque img { height: 32px; }
  .hero { padding-top: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .entete, .voile-menu, .btn-entete, .entete__marque { transition-duration: .01ms; }
}