/* header.css — le header commun de lernanto.app : logo, onglets LERNANTO (accueil), ESSAYER,
   COMBIEN DE TEMPS ?, choix de langue. Chargé par styles.css (landing et « Combien de temps ? »)
   et directement par essayer/index.html, qui a sa propre feuille : une seule source, pour que
   le header ne bouge pas d'une page à l'autre. Couleurs avec repli pour les pages qui n'ont pas
   les variables de la landing. */

/* rendu des polices identique partout (essayer/ coupe le lissage pour son écran de séance) */
header.top { -webkit-font-smoothing: auto; }
header.top { --h-ink: var(--ink, #23201c); --h-paper: var(--paper, #f2e7cc); --h-surface: var(--surface, #fbf4e0); --h-ambre: #eaa427; --h-rule: #c9b98f; }
header.top .wrap { max-width: 1020px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ---- header ---- */
header.top {
  border-bottom: 3px solid var(--h-ink);
  background: var(--h-paper);
  position: sticky; top: 0; z-index: 20;
}
header.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--h-ink);
}
.brand img { width: 36px; height: 36px; image-rendering: pixelated; display: block; }
.brand .name {
  font-family: "Press Start 2P", monospace;
  font-size: 15px; letter-spacing: 0.06em;
}

/* ---- sélecteur de langue : drapeau + code ISO, comme le LangChip de l'app ----
   Un <details> plutôt qu'un menu scripté : la page en est déjà pleine, ça marche sans JS, et
   les entrées restent de vrais liens (ce que les moteurs suivent pour les hreflang).
   Les drapeaux viennent de `flags.css`, GÉNÉRÉ depuis la table de l'app. */
/* Lu par les lecteurs d'écran, invisible à l'œil : « EN » seul ne dit pas « English ». */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.langpick { position: relative; }
.langpick > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 0.08em;
  color: var(--h-ink); background: var(--h-surface);
  border: 3px solid var(--h-ink); box-shadow: 3px 3px 0 var(--h-ink);
  padding: 7px 10px 6px;
}
.langpick > summary::-webkit-details-marker { display: none; }
/* Plus de triangle après le code de langue (retiré le 2026-09-18, trop petit pour se lire) :
   drapeau + code suffisent. La liste ouverte a la même largeur que la case et se décale de
   3 px comme elle, pour tomber pile dessous. */
.langpick > summary:hover { background: var(--h-ambre); }
.langpick[open] > summary { box-shadow: 0 0 0 var(--h-ink); transform: translate(3px, 3px); }
.langpick ul {
  position: absolute; right: -3px; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 0; list-style: none; min-width: 100%;
  background: var(--h-surface);
  border: 3px solid var(--h-ink); box-shadow: 4px 4px 0 var(--h-ink);
}
/* 27 langues au menu depuis l'arrivée du catalan (2026-10-03 ; 26 depuis la deuxième vague du
   2026-09-28) : une colonne ferait ~880 px de haut, plus qu'un téléphone. Trois colonnes, neuf
   rangées, filet sous chaque case. */
.langpick ul { display: grid; grid-template-columns: repeat(3, auto); }
.langpick li { border-bottom: 2px solid var(--h-rule); }
.langpick li:nth-last-child(-n+3) { border-bottom: 0; }
.langpick ul a {
  display: flex; align-items: center; gap: 8px;
  font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 0.08em;
  color: var(--h-ink); text-decoration: none; padding: 9px 10px 8px; white-space: nowrap;
}
.langpick ul a:hover { background: var(--h-ambre); }

/* ---- boutons de pages dans le header (2026-09-29) ----
   ESSAYER et COMBIEN DE TEMPS ?, côte à côte et indépendants, poussés à droite, à côté du choix de langue, avec le même bouton pixel que lui.
   Traduits dans les 28 langues (nav.try, nav.howLong de essayer/i18n/xx.json). */
/* les onglets se suivent, collés à LERNANTO ; le choix de langue, qui n'est pas un onglet, seul à droite */
nav.pages { display: flex; flex-wrap: wrap; gap: 12px; }
header.top .langpick { margin-left: auto; }
.navbtn {
  display: inline-flex; align-items: center;
  font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 0.08em; line-height: 1.5;
  color: var(--h-ink); background: var(--h-surface); text-decoration: none;
  border: 3px solid var(--h-ink); box-shadow: 3px 3px 0 var(--h-ink);
  padding: 5px 10px 4px; box-sizing: border-box; min-height: 37px; /* hauteur du bouton de langue, drapeau compris */
}
.navbtn:hover { background: var(--h-ambre); color: var(--h-ink); }
.navbtn:active { box-shadow: 0 0 0 var(--h-ink); transform: translate(3px, 3px); }
/* onglet de la page ouverte : noir, écriture blanche ; les autres restent blancs, écriture noire */
.navbtn[aria-current="page"], .navbtn[aria-current="page"]:hover { background: var(--h-ink); color: var(--h-surface); }
@media (max-width: 480px) {
  /* téléphone : logo, LERNANTO et drapeau sur la 1re ligne ; ESSAYER et COMBIEN DE TEMPS ? sur la 2e */
  nav.pages { gap: 8px; order: 2; width: 100%; }
  .navbtn { font-size: 7px; letter-spacing: 0; padding: 5px 8px 4px; }
}

/* « LERNANTO » est l'onglet de l'accueil : encadré comme ESSAYER et COMBIEN DE TEMPS ?,
   noir quand on est sur l'accueil, blanc ailleurs. Le logo reste à sa gauche, hors du cadre. */
.brand .name {
  display: inline-flex; align-items: center; min-height: 37px;
  padding: 6px 10px 5px; background: var(--h-surface); color: var(--h-ink);
  border: 3px solid var(--h-ink); box-shadow: 3px 3px 0 var(--h-ink);
}
.brand:hover .name { background: var(--h-ambre); }
.brand:active .name { box-shadow: 0 0 0 var(--h-ink); transform: translate(3px, 3px); }
.brand[aria-current="page"] .name, .brand[aria-current="page"]:hover .name { background: var(--h-ink); color: var(--h-surface); }

@media (max-width: 640px) {
  /* l'en-tête complet ferait ~40 % de l'écran : il ne doit pas rester collé */
  header.top { position: static; }
  header.top .wrap { row-gap: 4px; }
}