/* En-tête, dans la grammaire de cowlock et de SelixyBrain : onglets plats en texte seul, sans fond
   ni pastille ; seule la couleur du texte bouge et un trait fin, qui s'estompe aux extrémités, marque la page courante.
   Bureau (900 px et plus) : barre en haut, entrée de compte à droite.
   Téléphone : la barre disparaît, un burger rond fixé en bas à droite porte la navigation. */
:root {
  /* estompage du trait de page courante : courbe en S (smoothstep), pas un dégradé linéaire */
  --fade-stops: color-mix(in srgb, var(--accent) 0%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 10%,
    color-mix(in srgb, var(--accent) 35%, transparent) 20%,
    color-mix(in srgb, var(--accent) 65%, transparent) 30%,
    color-mix(in srgb, var(--accent) 90%, transparent) 40%,
    color-mix(in srgb, var(--accent) 100%, transparent) 50%,
    color-mix(in srgb, var(--accent) 90%, transparent) 60%,
    color-mix(in srgb, var(--accent) 65%, transparent) 70%,
    color-mix(in srgb, var(--accent) 35%, transparent) 80%,
    color-mix(in srgb, var(--accent) 10%, transparent) 90%,
    color-mix(in srgb, var(--accent) 0%, transparent) 100%;
}
.header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; min-height: 40px;
  padding: 0 8px 0 .6rem;
  background: var(--bg-1); border-bottom: 1px solid var(--border);
}
.header-tabs { display: flex; justify-content: flex-start; }
.header-account { margin-left: auto; display: flex; }

.tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 96px; min-height: 40px; padding: 0 12px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--text-dim); transition: color .15s ease;
}
.tab:hover { color: var(--text); }
/* entrée de compte : avatar rond facultatif aligné avec le pseudo */
.tab-moi, .burger-moi { gap: 8px; }
.avatar-mini { width: 22px; height: 22px; flex: 0 0 auto; object-fit: cover; border-radius: 50%; }
.tab[aria-current='page'] { color: var(--text-h); }
.tab[aria-current='page']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, var(--fade-stops));
  pointer-events: none;
}
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* téléphone : burger sans JavaScript (<details>), le menu s'ouvre vers le haut */
.burger { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 210; }
.burger > summary {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  list-style: none; cursor: pointer; color: var(--text-h);
  background: var(--bg-1); border: 1px solid var(--border-fort); border-radius: 50%;
  box-shadow: var(--ombre-3); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.burger > summary::-webkit-details-marker { display: none; }
.burger > summary:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent-fort); }
.burger[open] > summary { background: var(--accent-bg); border-color: var(--accent); }
.burger > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.burger-list {
  position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 190px;
  margin: 0; padding: 4px; list-style: none;
  background: var(--bg-1); border: 1px solid var(--border-fort); border-radius: 8px; box-shadow: var(--ombre-3);
}
.burger-list a {
  position: relative; display: block; min-height: 44px; padding: 12px;
  font-size: 15px; font-weight: 600; text-decoration: none; color: var(--text-dim); border-radius: 6px;
}
.burger-list a:hover { color: var(--text-h); background: var(--bg-2); }
.burger-list a[aria-current='page'] { color: var(--text-h); }
.burger-list a[aria-current='page']::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: linear-gradient(to bottom, var(--fade-stops));
}
.burger-list a.burger-moi { display: flex; align-items: center; }
.burger-separator { height: 1px; margin: 4px 8px; list-style: none; background: var(--border); }

@media (max-width: 899px) { .header { display: none; } }
@media (min-width: 900px) { .burger { display: none; } }