/* BeandBus — en-tête unifié · chargé APRÈS la feuille de la page.
   Une seule hauteur, un seul rail, un seul traitement visuel sur les neuf pages.
   Rails : pages publiques 1240 px (= .wrap), espaces connectés 1320 px (= .shell). */

/* --hdr-max : fixe ici, par famille (voir bloc RAIL UNIQUE plus bas), et non
   plus par feuille de page — chacune declarait le sien (1080/1140/1200/1240) et
   l'en-tete demarrait a une verticale differente d'une page a l'autre. */
:root { --hdr-h: 64px; }  /* 64 px : hauteur du redesign 2026. Etait 58 —
   l'accueil passait a 64 et les 14 autres pages restaient a 58, marche
   visible en passant de l'une a l'autre. fiche-autocariste.css lit ce
   jeton pour caler son sticky : il suit tout seul. */
/* La barre de defilement vaut ~15 px : une page courte (connexion) n'en a pas, une page longue
   (index) oui, et l'en-tete changeait de largeur de l'une a l'autre — le logo se decalait de
   7 px et la barre paraissait plus large sur la page de connexion. La gouttiere est reservee
   partout : meme largeur d'en-tete sur toutes les pages, avec ou sans defilement. */
html { scrollbar-gutter: stable; }

/* RAIL UNIQUE — le vrai probleme : chaque feuille de page declarait son propre
   `--hdr-max` (index 1200, connexion 1140, annuaire 1240, demande 1080...), donc
   l'en-tete et le bandeau demarraient a une verticale differente d'une page a
   l'autre. On fixe ici, apres toutes les feuilles, un rail unique par famille :
   1240 px pour tout le public (menu + bandeau de service), 1320 px pour les
   consoles. Plus specifique que le `:root` des pages, donc il l'emporte. */
.nav, body > .topbar { --hdr-max: 1280px; }  /* 1280 : rail de l'accueil
   redessine. Etait 1240, donc l'en-tete de l'accueil et celui des autres
   pages ne demarraient pas a la meme verticale. */
.top { --hdr-max: 1320px; }

/* gouttière latérale : celle de la page (--edge sur les pages publiques),
   sinon celle des espaces connectés. L'en-tête ne décide pas seul de sa marge. */
.nav, .top, .topbar { --hdr-pad: 24px; }  /* fixe, comme l'accueil.
   Avant : var(--edge, ...) — or --edge vaut clamp(20px, 5vw, 72px) sur
   les pages publiques : a 1440 px de large, le premier lien du menu
   commencait a x=164 sur connexion contre x=97 sur l'accueil. L'en-tete
   est un element global : il ne suit plus la gouttiere de chaque page. */

/* gouttière commune : en-tête, bandeau de service et contenu partent de la même verticale */
.nav,
.top,
.topbar { --hdr-gutter: max(var(--hdr-pad), calc((100% - var(--hdr-max, 1240px)) / 2 + var(--hdr-pad))); }

/* le bandeau de service au-dessus de l'en-tête suit exactement le même rail */
.topbar { padding-inline: var(--hdr-gutter); }

.nav,
.top {
  position: sticky; top: 0; z-index: 40;
  box-sizing: border-box;
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(10px, 1.4vw, 18px);
  height: var(--hdr-h); min-height: var(--hdr-h);
  margin: 0;
  padding-inline: var(--hdr-gutter);
  background: color-mix(in srgb, var(--color-neutral-100) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  /* jamais de découpe : les menus déroulants (cloche, notifications) débordent la barre.
     Le trop-plein est géré par les points de rupture plus bas, pas par un overflow. */
  overflow: visible;
}

/* les panneaux déroulants du header passent au-dessus de tout et s'alignent
   sur le bord du rail, pas sur le bord de la fenêtre */
.top .notif,
.top .notif-panel,
.nav .notif,
.nav .notif-panel {
  z-index: 60;
  right: var(--hdr-gutter);
  top: calc(var(--hdr-h) - 6px);
  max-height: min(70vh, calc(100vh - var(--hdr-h) - 20px));
  overflow-y: auto;
}

/* aucun enfant ne se comprime : ni le logo, ni les puces */
.nav > *,
.top > * { flex: 0 0 auto; }
.nav .sp,
.top .sp,
.nav .spacer,
.top .spacer { flex: 1 1 auto; min-width: 0; }

/* marque : même graisse et même taille partout */
.nav .brand,
.nav .nav-brand,
.top .brand,
.top .nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 22px; letter-spacing: -0.01em;
  color: var(--color-neutral-900); text-decoration: none;
}

/* liens : même hauteur de frappe, cible tactile confortable */
.nav > a,
.top > a {
  display: inline-flex; align-items: center;
  height: 34px; font-size: 13.5px; line-height: 20px; white-space: nowrap;
}

/* puces de rôle (CLIENT, AUTOCARISTE, SUPER ADMIN…) : même gabarit */
.nav .role,
.top .tag,
.top .side-tag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0.04em;
}

/* pastilles de bascule entre espaces */
.top .swap,
.top .side-swap,
.nav .alt {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; line-height: 1; white-space: nowrap;
}

/* boutons du header : jamais plus hauts que la barre */
.nav > .btn,
.nav > .cta {
  height: 36px; padding-block: 0; display: inline-flex; align-items: center;
  font-size: 13.5px; line-height: 1;
}
/* le bloc de droite est poussé au bord du rail */
.nav > .cta,
.nav > .btn:last-child,
.top .org,
.top .me { margin-left: auto; }
.nav > .cta ~ .btn { margin-left: 0; }

/* identité de l'utilisateur (espaces connectés) */
.top .org,
.top .me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top .org-name { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.top .org-name b { font-size: 13px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .org-name span,
.top .me > span:not(.av) { font-size: 11.5px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .avatar,
.top .me .av,
.top .logo-chip {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; overflow: hidden;
}
.top .logo-chip img { max-width: 24px; max-height: 24px; object-fit: contain; }

/* la cloche reste accessible à toutes les tailles */
.top .bell { flex: none; position: relative; }

/* ---------------------------------------------------------------- mobile */

/* portable : les bascules de démonstration entre espaces sortent de la barre
   avant qu'elle ne déborde — seule la déconnexion reste. */
@media (max-width: 1080px) {
  .top .swap,
  .top .side-swap:not(#logout):not([href="annuaire.html"]) { display: none; }
}

/* tablette : la ligne secondaire de l'identité s'efface, l'avatar reste */
@media (max-width: 900px) {
  .top .org-name { max-width: 150px; }
  .top .org-name span { display: none; }
}

@media (max-width: 720px) {
  /* la gouttière reste celle de la page (--edge ≈ 20 px ici) : rien à forcer */
  :root { --hdr-h: 58px; }  /* mobile, meme ecart qu'avant */
  /* liens de section et de navigation secondaire hors de la barre —
     mais jamais le bouton d'action, qui reste le chemin principal */
  .nav > a[href*="#"]:not(.btn):not(.cta),
  .nav > a[href$="annuaire.html"],
  .nav > a[href$="fiche-autocariste.html"],
  /* `.alt` : les liens secondaires des pages de connexion (support, espace
     autocariste). La liste ci-dessus enumere des href un par un, donc elle les
     laissait passer : a 375 px ils sortaient du cadre et la page defilait
     lateralement. Defaut anterieur au redesign, corrige ici. */
  .nav > a.alt { display: none; }
  /* bascules de démonstration entre espaces : superflues au doigt */
  .top .side-swap:not(#logout),
  .top .swap { display: none; }
  .top .org-name,
  .top .me > span:not(.av) { display: none; }
  .nav .role,
  .top .tag,
  .top .side-tag { display: none; }
}

@media (max-width: 560px) {
  /* le lien « Se déconnecter » cède la place à l'essentiel */
  .top #logout { padding: 0 9px; font-size: 12px; }
  /* un seul appel à l'action dans la barre : le dernier, celui qui convertit */
  .nav > a.cta:not(:last-of-type) { display: none; }
}

@media (max-width: 480px) {
  .nav > .btn,
  .nav > .cta { height: 34px; padding-inline: 12px; font-size: 13px; }
  .nav .brand,
  .nav .nav-brand,
  .top .brand,
  .top .nav-brand { font-size: 16px; }
}

/* Tres a etroit : logo + « Demander mes devis » + hamburgeur depassaient la
   barre de 21 px a 375 px (piege connu du HANDOFF). En dessous de 430 px, le
   hamburgeur porte deja le CTA (mobile-nav.js le clone dans le tiroir), donc on
   le retire de la barre : le chemin principal reste, il vit dans le menu. */
@media (max-width: 430px) {
  .nav, .top { --hdr-pad: 14px; gap: 8px; }
  .nav > .btn-primary,
  .nav > .cta { display: none; }
}

/* ---------------------------------------------------------------- tablette (audit 23-09)
   Entre 720 et ~1260 px, les pages du redesign (accueil, annuaire, fiche, demande) ne
   chargent plus blocks.css, où vivait le repli progressif des liens de section : la barre
   débordait de 340 px et « Demander mes devis » sortait de l'écran. Les paliers vivent ici,
   dans la feuille que toutes les pages chargent ; sous 960 px, le tiroir (mobile-nav.js)
   prend le relais. Sélecteurs d'attribut en `$=` : le même lien s'écrit `#saison` sur
   l'accueil et `index.html#saison` ailleurs (leçon 53). */
/* Audit du 25-09 : les paliers (1180 / 1040 / 880) étaient calés sur le français sans barre de
   défilement. En espagnol (« Pedir mis presupuestos », « Cuándo viajar ») et avec la gouttière de
   15 px réservée plus haut, la barre débordait à 1041-1095 et 1181-1237 px, et de 4 px à 890.
   Paliers relevés d'après la largeur mesurée dans les quatre langues, plus les 15 px de la
   gouttière et une marge. Sous le dernier palier, le hamburgeur prend le relais (même valeur dans
   les cinq feuilles qui le dessinent) : entre 721 et 880 px, l'annuaire et le support n'étaient
   plus atteignables. */
@media (max-width: 1260px) { .nav > a[href$="#saison"], .nav > a[href$="#trajets"] { display: none; } }
@media (max-width: 1150px) { .nav > a[href$="#comparateur"], .nav > a[href$="#fidelite"] { display: none; } }
@media (max-width: 960px) { .nav > a[href$="annuaire.html"], .nav > a[href$="#fonctionnement"], .nav > a[href$="support.html"] { display: none; } }
/* Pages de connexion (celles qui portent la pastille de rôle) : pastille, deux liens et deux appels
   à l'action demandent 1 070 px en espagnol. L'appel secondaire (« Vous êtes autocariste ? »,
   « Vous êtes client ? », « Espace client ») cède sa place sous 1 100 px — le tiroir le reprend
   sous 960 px, et le bandeau haut et le pied de page le portent aussi. Sous 960 px la pastille
   s'efface comme au téléphone : « EMPRESA DE AUTOCARES » débordait encore de 18 px à 721. */
@media (max-width: 1100px) { .nav > .role ~ a.cta:not(:last-of-type) { display: none; } }
@media (max-width: 960px) { .nav .role { display: none; } }