/* ===========================================================================
 * En-tête de site — transposition des règles d'en-tête de la homepage
 *
 * POURQUOI CE FICHIER EXISTE
 * --------------------------
 * Le nouvel en-tête est stylé, sur `/`, par les feuilles livrées du handoff
 * (`home_e1/04-version-d.css` + `05-version-e.css` + `06-integration.css`).
 * Ces feuilles ne peuvent PAS être servies sur le reste du site : leurs
 * voisines du même paquet portent les resets globaux du prototype
 * (préflight Tailwind complet dans `00-tailwind-preflight.css` ; `* {…}`,
 * `html`, `body { font-family: serif; font-size: 18px }`, `a {…}` dans
 * `01-globals.css`), et les 209 gabarits du site sont bâtis sur Bootstrap 3+5
 * et `style.css`. Et on ne peut pas les élaguer : `website/tests/test_home_d.py`
 * les compare OCTET À OCTET avec le dossier de livraison.
 *
 * D'où cette transposition : les SEULES règles d'en-tête, re-scopées sous
 * `.vc-header`, sans aucun reset global.
 *
 * MÉTHODE — à respecter pour toute reprise
 * ----------------------------------------
 * Les règles sont recopiées DANS L'ORDRE DE LA CASCADE D'ORIGINE
 * (04 base → 04 media → 05 base → 05 media → 06), et chaque sélecteur est
 * transposé de façon UNIFORME :
 *   • ce qui visait la racine (`.d-header`, `.e-header`, `.e-hybrid-header`)
 *     devient `.vc-header` — spécificité inchangée ;
 *   • tout descendant est préfixé `.vc-header ` — spécificité +(0,1,0) pour
 *     TOUS, donc les rapports de force entre règles sont préservés.
 * C'est ce qui garantit que le rendu est identique sans avoir à re-résoudre
 * la cascade à la main. Ne pas réordonner les blocs, ne pas « regrouper » deux
 * règles au même sélecteur venues de fichiers différents.
 *
 * Les règles scopées `.e-page-editorial` de `05-version-e.css` sont
 * VOLONTAIREMENT absentes : la racine de la page est `.d-page`, elles ne
 * s'appliquent donc pas non plus sur `/`. Les reprendre ferait diverger le
 * reste du site de la homepage (c'est le piège déjà rencontré cinq fois).
 *
 * Les écarts assumés sont regroupés en fin de fichier, chacun justifié.
 *
 * ⚠️ À charger APRÈS `tokens.css` : celui-ci pose `a { color; text-decoration }`
 * et `a:hover` à la même spécificité que la règle de lien de l'en-tête. Sur `/`
 * l'égalité est tranchée par l'ordre source ; il faut reproduire cet ordre.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Socle — repris de `04-version-d.css` (règles de `.d-page` dont l'en-tête
 * dépend). Seules les déclarations réellement utiles à l'en-tête sont reprises :
 * pas de `min-height: 100vh`, pas de `overflow: hidden`, pas de fond ni de
 * police serif de page.
 * ------------------------------------------------------------------------ */
/* Tokens raccordés au set commun tokens.css — même valeur, source unique */
.vc-header {
  --d-blue: var(--vefa-primary);
  --d-blue-dark: var(--vefa-primary-dark);
  --d-blue-deep: var(--vefa-primary-darker);
  --d-orange: var(--vefa-accent);
  --d-orange-dark: var(--vefa-accent-dark);
  --d-slate: var(--vefa-text);
  --d-ink: var(--vefa-text-strong);
  --d-muted: var(--vefa-text-muted);
  --d-subtle: var(--vefa-text-subtle);
  --d-border: var(--vefa-border);

  /* Reprise de `01-globals.css` (`:root`), la seule variable de cette feuille
   * dont l'en-tête a besoin. `--font-ui: Geist` vient de `00-geist.css`, qui
   * est chargé globalement par base.html — donc déjà disponible partout. */
  --ui: var(--font-ui), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Hérité de `.d-page` sur la homepage. */
  color: var(--d-slate);
}

.vc-header,
.vc-header * { box-sizing: border-box; }

/* `.d-page a` — bat le `a { color; text-decoration-line: underline }` de
 * tokens.css par l'ordre source, exactement comme sur `/`. */
.vc-header a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------------
 * `04-version-d.css` — base
 * ------------------------------------------------------------------------ */
.vc-header {
  position: relative;
  z-index: 20;
  width: min(1220px, calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--ui);
}

.vc-header .d-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.045em;
}

.vc-header .d-brand-mark {
  width: 43px;
  height: 43px;
  padding: 6px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--vefa-bg);
}

.vc-header .d-brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.vc-header .d-brand > span:last-child { color: var(--vefa-text-on-dark); }
.vc-header .d-brand > span:last-child b { color: #dbeafe; } /* hex-ok — bleu clair du prototype sans token */

.vc-header nav {
  display: flex;
  align-items: center;
  gap: 27px;
  color: #eff6ff; /* hex-ok — bleu clair du prototype sans token */
  font-size: 13px;
  font-weight: 720;
}

.vc-header nav a,
.vc-header > div > a:first-child { transition: color 150ms ease; }
.vc-header nav a:hover,
.vc-header > div > a:first-child:hover { color: var(--vefa-text-on-dark); }

.vc-header > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 750;
}

/* Seuls `.d-button`, `-small` et `-orange` servent dans l'en-tête ; les
 * variantes bleue et blanche du prototype sont propres au corps de la page. */
.vc-header .d-button {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 850;
  transition: transform 250ms cubic-bezier(.22, 1, .36, 1), box-shadow 250ms ease;
}

.vc-header .d-button:hover { transform: translateY(-3px); }
.vc-header .d-button-small { min-height: 42px; padding-inline: 16px; font-size: 12px; }
.vc-header .d-button-orange { background: linear-gradient(135deg, var(--d-orange), #ff7a45); color: var(--vefa-text-on-primary) !important; box-shadow: 0 16px 35px rgba(255, 64, 0, .25); } /* hex-ok — #ff7a45 = 2e stop du dégradé accent, pas de token autonome */

/* Variante CLAIRE (`04-version-d.css`, section « version D ») — c'est elle qui
 * donne la carte flottante blanche ; le bloc ci-dessus est la variante sombre
 * du hero bleu, qu'elle écrase. */
.vc-header {
  width: min(1250px, calc(100% - 32px));
  min-height: 72px;
  margin-top: 16px;
  padding: 0 18px;
  border: 1px solid rgba(203, 213, 225, .86);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .1);
  backdrop-filter: blur(16px);
}

.vc-header .d-brand > span:last-child { color: var(--d-orange); }
.vc-header .d-brand > span:last-child b { color: var(--vefa-brand-vefa); }
.vc-header nav { color: var(--d-slate); font-weight: 780; }
.vc-header > div { color: var(--d-slate); }
.vc-header nav a:hover,
.vc-header > div > a:first-child:hover { color: var(--d-blue-deep); }

/* ---------------------------------------------------------------------------
 * `04-version-d.css` — media queries
 * ------------------------------------------------------------------------ */
@media (max-width: 1120px) {
  .vc-header { grid-template-columns: 1fr auto; }
  .vc-header nav { display: none; }
}

@media (max-width: 860px) {
  .vc-header { width: min(100% - 34px, 700px); }
}

@media (max-width: 560px) {
  .vc-header { width: calc(100% - 28px); min-height: 74px; }
  .vc-header > div > a:first-child { display: none; }
  .vc-header .d-brand > span:last-child { display: none; }
  .vc-header .d-brand-mark { width: 40px; height: 40px; }
  .vc-header .d-button-small { min-height: 42px; padding-inline: 13px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
 * `05-version-e.css` — base (navigation hybride)
 * ------------------------------------------------------------------------ */
.vc-header {
  position: relative;
}

.vc-header {
  width: min(1280px, calc(100% - 40px));
  min-height: 76px;
  margin-top: 18px;
  padding: 0 16px 0 14px;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 2.4vw, 34px);
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .09);
  backdrop-filter: blur(18px);
}

.vc-header .d-brand {
  padding-right: clamp(12px, 1.5vw, 22px);
  border-right: 1px solid var(--d-border);
}

.vc-header .e-hybrid-nav {
  min-width: 0;
  justify-content: flex-start;
  gap: clamp(16px, 1.65vw, 26px) !important;
  font-size: 13px !important;
}

.vc-header .e-hybrid-nav > a,
.vc-header .e-hybrid-nav summary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--d-slate);
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease;
}

.vc-header .e-hybrid-nav summary {
  list-style: none;
}

.vc-header .e-hybrid-nav summary::-webkit-details-marker {
  display: none;
}

.vc-header .e-hybrid-nav summary > span {
  color: var(--d-subtle);
  font-size: 14px;
  transition: transform 150ms ease;
}

.vc-header .e-hybrid-nav details {
  position: relative;
}

.vc-header .e-hybrid-nav details[open] summary,
.vc-header .e-hybrid-nav > a:hover,
.vc-header .e-hybrid-nav summary:hover {
  color: var(--d-blue-deep);
}

.vc-header .e-hybrid-nav details[open] summary > span {
  transform: rotate(180deg);
}

.vc-header .e-nav-forum {
  color: var(--d-blue-deep) !important;
}

.vc-header .e-nav-forum i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-orange);
  box-shadow: 0 0 0 4px rgba(255, 64, 0, .09);
}

.vc-header .e-nav-promoter {
  margin-left: 2px;
  padding-left: clamp(15px, 1.4vw, 23px);
  border-left: 1px solid var(--d-border);
  color: #0f1729 !important; /* hex-ok — near-miss de --vefa-text #0f172a, valeur distincte du prototype */
}

.vc-header .e-nav-dropdown {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: -18px;
  width: 290px;
  padding: 8px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--d-border);
  border-radius: 12px;
  background: var(--vefa-bg);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .15);
}

.vc-header .e-nav-dropdown-wide {
  width: 310px;
}

.vc-header .e-nav-dropdown a {
  padding: 11px 12px;
  display: block;
  border-radius: 8px;
  transition: background 150ms ease, color 150ms ease;
}

.vc-header .e-nav-dropdown a:hover {
  background: rgba(52, 152, 219, .08);
}

.vc-header .e-nav-dropdown b,
.vc-header .e-nav-dropdown small {
  display: block;
}

.vc-header .e-nav-dropdown b {
  color: var(--d-slate);
  font-size: 13px;
}

.vc-header .e-nav-dropdown small {
  margin-top: 3px;
  color: var(--d-muted);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.35;
}

.vc-header .e-nav-actions {
  gap: 14px !important;
}

.vc-header .e-login-link {
  white-space: nowrap;
}

.vc-header .d-button-small {
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 11px 28px rgba(255, 64, 0, .2);
}

.vc-header .e-mobile-menu {
  position: relative;
  display: none;
}

.vc-header .e-mobile-menu > summary {
  width: 44px;
  height: 44px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--d-border);
  border-radius: 10px;
  background: var(--d-bg-soft, #f8fafc);
  list-style: none;
  cursor: pointer;
}

.vc-header .e-mobile-menu > summary::-webkit-details-marker {
  display: none;
}

.vc-header .e-mobile-menu > summary i {
  width: 100%;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: var(--d-slate);
}

.vc-header .e-mobile-menu > nav {
  position: absolute;
  z-index: 70;
  top: calc(100% + 14px);
  right: 0;
  width: min(350px, calc(100vw - 28px));
  padding: 10px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--d-border);
  border-radius: 14px;
  background: var(--vefa-bg);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .2);
}

.vc-header .e-mobile-menu > nav a {
  padding: 11px 12px;
  display: block;
  border-radius: 9px;
}

.vc-header .e-mobile-menu > nav b,
.vc-header .e-mobile-menu > nav span {
  display: block;
}

.vc-header .e-mobile-menu > nav b {
  font-size: 13px;
}

.vc-header .e-mobile-menu > nav span {
  margin-top: 3px;
  color: var(--d-muted);
  font-size: 11px;
  font-weight: 500;
}

.vc-header .e-mobile-menu > nav a:hover {
  background: rgba(52, 152, 219, .08);
}

.vc-header .e-mobile-menu .e-mobile-pro {
  margin-top: 5px;
  border-top: 1px solid var(--d-border);
  border-radius: 0 0 9px 9px;
  background: var(--vefa-bg-soft);
}

.vc-header .e-mobile-menu .e-mobile-login {
  color: var(--d-blue-deep);
  font-weight: 850;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * `05-version-e.css` — media queries
 * ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .vc-header { grid-template-columns: 1fr auto; }
  .vc-header .e-hybrid-nav { display: none; }
  .vc-header .e-mobile-menu { display: block; }
}

@media (max-width: 560px) {
  .vc-header {
    width: calc(100% - 20px);
    min-height: 68px;
    margin-top: 10px;
    padding: 0 9px 0 10px;
    border-radius: 11px;
  }

  .vc-header .d-brand {
    padding-right: 0;
    border-right: 0;
  }

  .vc-header .d-brand > span:last-child {
    display: inline;
    font-size: 18px;
  }

  .vc-header .d-brand-mark {
    width: 38px;
    height: 38px;
  }

  .vc-header .e-nav-actions {
    gap: 8px !important;
  }

  .vc-header .e-login-link {
    display: none;
  }

  .vc-header .d-button-small {
    min-height: 42px;
    padding-inline: 12px;
    font-size: 11px;
  }

  .vc-header .e-mobile-menu > summary {
    width: 42px;
    height: 42px;
  }
}

/* ---------------------------------------------------------------------------
 * `06-integration.css` — deltas d'intégration déjà appliqués sur `/`
 *
 * Sous 560 px, marque + CTA + burger ne tiennent pas sur la ligne : mesuré à
 * 390 px, le burger sortait du header de 28 px et devenait INATTEIGNABLE. Le
 * CTA passe donc la main au menu, qui reprend sa taille tactile pleine.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  .vc-header .d-button-small {
    display: none;
  }

  .vc-header .e-mobile-menu > summary {
    width: 44px;
    height: 44px;
  }

  .vc-header .e-mobile-menu > nav {
    top: calc(100% + 10px);
    right: -1px;
  }
}

/* ===========================================================================
 * ÉCARTS ASSUMÉS — tout ce qui suit diverge sciemment de la homepage.
 * Rien ne doit être ajouté ici sans justification écrite.
 * ======================================================================== */

/* (1) EMPILEMENT. Sur `/`, l'en-tête vit dans le hero et 20 lui suffit. Sur le
 * reste du site il précède un contenu qui pose ses propres contextes
 * d'empilement (hero de fiche programme en z-index 10, carte MapLibre,
 * bandeaux collants…) : les menus déroulants passeraient dessous. On reprend
 * la valeur que la navbar historique utilisait déjà pour la même raison. */
.vc-header {
  z-index: 1030;
}

/* (2) GRAISSE DES `<b>` DU MENU. Sur `/`, le reboot de Bootstrap
 * (`b, strong { font-weight: bolder }`) s'applique à l'en-tête et donne 900
 * (relatif au 780 hérité de la nav). Les pages `no_bootstrap` n'ont pas ce
 * reboot et retomberaient sur le `bold` (700) du navigateur — un menu plus
 * maigre sur ces seules pages. On rend la valeur déterministe partout. */
.vc-header .e-nav-dropdown b,
.vc-header .e-mobile-menu > nav b {
  font-weight: bolder;
}

/* (3) POINTS D'ENTRÉE MOBILES DES PAGES INTÉRIEURES.
 *
 * La feuille livrée masque « Se connecter » sous 560 px (marque + lien + CTA +
 * burger ne tiennent pas sur la ligne). Sur la HOMEPAGE c'est tenable : elle
 * porte un CTA collant en bas d'écran et son propre moteur de recherche dans le
 * visuel de tête. Sur une page intérieure, ça ne l'est pas — il ne restait plus
 * que la marque et le burger, quand l'ancienne navbar mobile offrait la loupe,
 * « Pro » et la connexion en accès direct. Un point d'entrée rangé dans un menu
 * n'en est plus un.
 *
 * Ce fichier n'étant PAS servi sur `/`, ce delta ne touche que les pages
 * intérieures : la homepage garde le comportement livré.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  .vc-header .e-login-link {
    /* `inline-flex` + `min-height` et non un simple `inline` : mesuré, le lien
     * nu ne faisait que 18 px de haut — sous la cible tactile de 44 px, et
     * quasi impossible à viser au pouce. La largeur, elle, vient du texte. */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
  }
}

/* Sous 400 px, la marque se réduit à sa pastille — exactement ce que faisait
 * l'ancienne navbar mobile (`mobile-logo-compact`), et ce que prévoyait la
 * variante D d'origine avant que la nav hybride ne réaffiche le mot-symbole.
 *
 * La contrainte, mesurée colonne par colonne : les actions (loupe + « Se
 * connecter » + burger) occupent 179 px, la gouttière 20 px, et la marque
 * complète en réclame 158. Il faut donc 357 px utiles, soit un viewport de
 * ~396 px. Relevé : à 390 px la colonne de marque vaut exactement 158 — zéro
 * marge ; à 378 px le burger sortait de la carte de 27 px. Au-dessus de 400 px
 * la marge redevient franche (16 px à 414 px, davantage ensuite).
 *
 * Masquer un des deux points d'entrée aurait aussi rendu la place ; supprimer
 * 120 px de texte la rend SANS retirer d'actionnable. La pastille reste le lien
 * vers l'accueil. */
@media (max-width: 400px) {
  .vc-header .d-brand > span:last-child {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * DELTA 4 — marge BASSE de la carte (retour utilisateur 2026-08-11 :
 * « rien ne doit être collé à la navbar »).
 *
 * La transposition reprend `margin-top` (18px, 10px sous 560px) mais laisse la
 * marge basse à 0 : sur `/` la section qui suit l'en-tête porte son propre
 * rythme, ailleurs non. Relevé avant correctif, largeur 390 : `/feed/`,
 * `/outils/` et `/faq/` collaient une surface peinte (bande blanche, carte,
 * hero) à 0 px du bord bas de la carte — elle cessait de flotter.
 *
 * Pourquoi ICI et pas page par page : le défaut ne vient d'aucun gabarit en
 * particulier, il vient de l'en-tête, et il réapparaîtrait sur la prochaine
 * page créée. Une marge basse pose l'invariant une fois pour les 209 gabarits.
 * Valeur = le miroir exact de `margin-top` → la carte flotte symétriquement.
 *
 * ⚠️ COUPLAGE : `/search/?view=map` réserve cette empreinte en dur
 * (`calc(100dvh - …)` dans programs_map.css). Elle inclut désormais cette
 * marge — l'écart de 12 px que `.search-map-container` posait de son côté a
 * été retiré, il faisait doublon. Verrouillé par `MapFullScreenCouplingTests`.
 *
 * Ce fichier n'étant PAS servi sur `/`, la homepage garde son rythme livré.
 * ------------------------------------------------------------------------ */
.vc-header {
  margin-bottom: 18px;
}

@media (max-width: 560px) {
  .vc-header {
    margin-bottom: 10px;
  }
}

/* ---------------------------------------------------------------------------
 * DELTA 5 — l'ANONYME replie sa nav plus tôt (ajout de l'entrée « Photos »,
 * 2026-08-11).
 *
 * La nav livrée bascule dans le burger à 1180 px. Ce seuil était calibré pour
 * CINQ entrées ; l'anonyme en a six depuis « Photos » (Programmes · Forum ·
 * Photos · Guides & outils · Découvrir · Promoteurs), et sa barre d'actions est
 * la plus large du site (loupe + « Se connecter » + CTA orange, 337 px).
 *
 * Mesuré, anonyme, chevauchement réel entre le bord droit de « Promoteurs » et
 * le bord gauche de la loupe (une valeur POSITIVE = recouvrement) :
 *     1181 px → +52   1220 px → +19   1250 px → −7   1280 px → −33
 * Sans « Photos », la même mesure donnait −13 à 1181 px : la marge était déjà
 * quasi nulle, l'entrée ne pouvait pas tenir. La nav à six entrées n'a donc de
 * place que carte PLEINE (≥ 1280 px) — d'où ce seuil.
 *
 * ⚠️ NE PAS se fier aux boîtes pour vérifier ça : `.e-hybrid-nav` est en
 * `flex: 0 1 auto`, `min-width: 0`, `overflow: visible` — ses enfants débordent
 * SILENCIEUSEMENT de sa boîte. Comparer `nav.right` à `actions.left` annonçait
 * « 28 px de marge » là où la loupe recouvrait « Promoteurs » de 52 px, visible
 * à l'écran. Mesurer le dernier ENFANT de la nav contre la première ACTION.
 *
 * Le connecté garde le seuil livré : quatre entrées, il a la place.
 * ------------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .vc-header:not(.vc-header--auth) .e-hybrid-nav {
    display: none;
  }

  .vc-header:not(.vc-header--auth) .e-mobile-menu {
    display: block;
  }
}