/* ===== Header ===== */
.site-header {
  background: var(--primary);
  color: var(--text-inverse);
  padding: 18px 0 36px;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  padding: 10px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Deux causes de transitions/animations parasites au chargement, toutes deux
   couvertes par `body.page-settling` (retiré par Site.header.settlePage, dans
   js/header.js, une fois l'état initial stabilisé) qui coupe tout transition/
   animation sur TOUTE la page pendant cette fenêtre — pas seulement le
   header, puisque la seconde cause touche aussi le footer (voir body.fg-pro
   plus bas) :
   1. Le navigateur peut restaurer le scroll d'une page rechargée APRÈS que
      js/app.js ait déjà lu window.scrollY : le contenu (header/footer/
      sections) est injecté dynamiquement, donc la page est trop courte au
      tout premier passage pour que le navigateur atteigne la position
      mémorisée — il réessaie en arrière-plan une fois la page devenue assez
      haute, ce qui déclenche un vrai scroll après le premier rendu et ferait
      jouer les transitions du header (ex. le grand logo qui rétrécit) pour
      de vrai.
   2. `document.body.classList.toggle("fg-pro", ...)` (chargement direct en
      mode pro, ex. via ?mode=pro) est togglé APRÈS qu'un appel comme
      `getComputedStyle()` ait déjà forcé un recalcul de style dans l'état
      précédent (voir PRIMARY_BY_MODE dans js/mode-switch.js) — ce recalcul
      "committe" cet état comme point de départ, et le toggle qui suit ferait
      alors jouer pour de vrai le fondu couleur du footer/header (var(--fg-fade)). */
body.page-settling,
body.page-settling * {
  transition: none !important;
  animation: none !important;
}

/* Overlay de la transition "cercle" entre les modes particuliers/pro (voir
   js/mode-switch.js, Site.modeSwitch.runCircleTransition). z-index négatif :
   peint au-dessus du fond propre de .site-header
   mais en dessous de tout le contenu en flux (nav, logo, tagline) qui doit rester
   visible et lisible pendant que le cercle grandit. `inset:0` (plutôt qu'une hauteur
   fixée en JS) calque toujours l'overlay sur la boîte RÉELLE et COURANTE du header —
   y compris si celui-ci est encore en train de se déplier (transition padding 0.3s
   après un scroll-to-top) : il ne peut donc jamais déborder sous un header pas
   encore à sa taille finale. Le rayon du cercle, lui, est calculé en JS sur la
   hauteur finale (dépliée) du header pour garantir une couverture complète même
   si le clic part d'un header encore réduit. */
.mode-transition-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: circle(0px at 0px 0px);
  transition: clip-path 0.45s ease;
}

.header-bar {
  position: relative; /* ancre .mode-toggle-wrap--navbar, centrée en absolu */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Hauteur fixe (identique à .logo--compact img et .mode-toggle-track plus bas)
     pour que la ligne garde la même taille que .nav-top (liens) ou .nav-toggle
     (bouton burger, plus grand) soit affiché — sinon .logo-block juste en
     dessous saute verticalement au franchissement du breakpoint mobile. */
  height: 30px;
}

.nav-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  margin-bottom: 0;
}

.nav-top a {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.92;
  border-bottom: 2px solid transparent;
  transition: color var(--fg-fade);
}

.nav-top a:hover,
.nav-top a.active {
  opacity: 1;
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-inverse);
  font-size: 26px;
  cursor: pointer;
  margin-bottom: 0;
  transition: color var(--fg-fade);
}

.logo-block {
  text-align: center;
  margin-bottom: 14px;
  transition: margin-bottom 0.3s ease;
}

.site-header.is-scrolled .logo-block {
  margin-bottom: -15px;
}

/* Logo compact dans la barre nav (masqué par défaut) */
.logo--compact {
  display: none;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

.logo--compact img {
  height: 30px;
  width: auto;
  transition: filter var(--fg-fade);
}

/* Quand scrollé : logo compact à gauche. L'animation d'entrée n'est liée
   qu'à .header-scroll-enter (impulsion posée par Site.header.pulseScrollEnter,
   dans js/header.js, UNIQUEMENT lors d'un vrai franchissement de seuil par
   scroll utilisateur), jamais à
   .is-scrolled seul — sinon elle rejouerait aussi au chargement de la page
   (état initial déjà scrollé) et à chaque reconstruction du header. */
.site-header.is-scrolled .logo--compact {
  display: flex;
}

.site-header.is-scrolled.header-scroll-enter .logo--compact {
  animation: logoFadeIn 0.4s ease forwards;
}

@keyframes logoFadeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.site-header.is-scrolled .header-bar {
  justify-content: space-between;
}

.site-header.is-scrolled .logo-block .logo img {
  height: 0;
  opacity: 0;
  /* La hauteur suit le rythme du reste du header (0.3s, comme .logo img
     ci-dessous), mais le fondu (opacity) est plus rapide : le logo doit être
     visuellement effacé avant que les autres éléments n'aient fini de se
     réorganiser, pour éviter le chevauchement visuel. */
  transition: height 0.3s ease, opacity 0.15s ease, filter var(--fg-fade);
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  height: 78px;
  width: auto;
  transition: height 0.3s ease, filter var(--fg-fade);
}

.tagline {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.9;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, color var(--fg-fade);
}

.site-header.is-scrolled .tagline {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}