/* 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 : le rail de la page, déclaré par sa propre feuille (:root).
   L'en-tête s'aligne ainsi toujours sur le contenu qu'il surplombe. */
/* pas de --hdr-max ici : cette feuille est chargée en dernier et écraserait
   celui de la page. La valeur de repli vit dans le calcul, plus bas. */
:root { --hdr-h: 58px; }

/* 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: var(--edge, clamp(16px, 3vw, 32px)); }

/* 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: 54px; }
  /* 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"] { 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; }
}