/* ===== 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;
  /* top/right/bottom/left plutôt que le raccourci `inset` : sur Samsung
     Internet 7.0/Android 8 (Chromium 59, `inset` arrivé en 2020), la
     propriété est ignorée et l'overlay reste réduit à 0×0 — invisible, donc
     le cercle "ne fonctionne pas" alors qu'il s'anime bel et bien. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: circle(0px at 0px 0px);
  transition: clip-path 0.45s ease;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Hauteur fixe (identique à .logo--compact img 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;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  margin-bottom: 0;
}

/* Barres dessinées en CSS plutôt que caractère "☰" : sur Samsung Internet/
   Android (constaté sur un Galaxy S7, Android 8), ce glyphe est remplacé par
   une icône bitmap propriétaire de Samsung qui ignore `color`, et reste donc
   noire quel que soit le mode. background-color n'est pas concerné.
   Espacement par margin plutôt que `gap` flexbox : ce Samsung Internet ne
   supporte pas `gap` en flexbox (arrivé en 2020 dans Chromium), ce qui
   collait les 3 barres sans espace et les faisait fusionner visuellement en
   une seule. */
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-inverse);
  transition: background var(--fg-fade);
}

.nav-toggle-bar + .nav-toggle-bar {
  margin-top: 5px;
}

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