/* ─────────────────────────────────────────────────────────────────────────
   masthead.css — SOURCE UNIQUE du bandeau (masthead) + barre de piliers.
   Chargé par index.html (SPA) ET les pages autonomes (tarifs, compte,
   founders) pour que le header reste STRICTEMENT commun à toutes les pages.
   Toute évolution du header/barre de piliers se fait ICI — ne jamais
   redupliquer ces règles en inline (c'est la dérive que ce fichier corrige).

   Les variables (--f-mono, --ink-2, --paper, --rule…) sont fournies par le
   :root de chaque page ; les couleurs de marque en dur (#D25D38, #FAE8E1,
   #A8402A) matchent volontairement la SPA (pas de --accent, figées en dark).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Masthead grid (2 colonnes : wordmark à gauche, contrôles à droite) ── */
.masthead-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 16px 0;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 768px) { .masthead-grid { padding: 12px 40px 0 16px; } }

.mw-logo-header { height: 18px; width: auto; opacity: 0.55; }
html.dark .mw-logo-header { filter: invert(1); }

/* ── Pastille compte (avatar initiales) ── */
.av-xs { width: 26px; height: 26px; border-radius: 50%; background: #FAE8E1; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #A8402A; flex-shrink: 0; font-family: var(--f-mono); letter-spacing: 0.04em; }

/* ── Barre de piliers (tabs) — fonctionne pour <button> (SPA) et <a> (pages
      autonomes) grâce à text-decoration:none ── */
.tab {
  font-family: var(--f-mono);
  font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.tab.on { color: #D25D38; border-bottom-color: transparent; font-weight: 600; }
#tab-nav .tab.on .tab-label {
  background: #D25D38;
  color: #fff;
  padding: 3px 9px;
  border-radius: 0;
}
.tab-nav-inner {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav-inner::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .tab-nav-inner { padding: 0 40px 0 16px; } }

/* premier tab aligné au bord gauche du contenu, espacement entre tabs */
#tab-nav .tab { padding-left: 0; padding-right: 19px; }
#tab-nav .tab:last-child { padding-right: 0; }

/* ── Focus clavier (audit accessibilité 2026-07-30, WCAG 2.4.7) ──────────────
   Plusieurs boutons du header (thème, hamburger, langue) posent
   focus:outline-none (Tailwind) sans anneau de remplacement : au clavier, le
   focus devient invisible. Règle partagée par les 6 pages qui chargent ce
   fichier — corrige donc le header partout en un seul endroit, conformément
   à l'intention du fichier (« toute évolution du header se fait ICI »).
   :focus-visible ne se déclenche qu'au clavier/focus programmatique, jamais
   au clic souris — l'esthétique au clic reste inchangée.
   box-shadow plutôt que outline : la classe Tailwind .focus\:outline-none:focus
   a une spécificité (0,2,0) supérieure au simple :focus-visible (0,1,0) et
   gagnerait sur la propriété outline elle-même — box-shadow n'entre pas dans
   ce conflit de spécificité, propriété distincte jamais posée par Tailwind ici. */
:focus-visible {
  outline: 2px solid #D25D38;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #D25D38;
}