/* Barre de menus « Platinum » — l'apparence de Mac OS 9, au trait.

   🔴 Mac OS 9 est ANGULEUX. Pas un coin arrondi, pas un dégradé doux, pas une ombre
   floue : la barre est un dégradé vertical blanc → gris avec un filet noir dessous, un
   titre ouvert est INVERSÉ (fond noir, texte blanc), et l'ombre du déroulant est un
   décalage net de 2 px, sans flou. C'est ce vocabulaire-là qui a été demandé, et il ne
   tolère pas d'à-peu-près : un fond bleu doux au survol suffirait à ce que ça ne
   ressemble plus à rien de connu.

   Le comportement — ouvrir, dérouler, parcourir au clavier — est dans `menus.js`, et
   ce que chaque item FAIT est branché dans `carte.js`. Ici, rien que l'apparence. */

:root {
  /* Les trois seules mesures d'un menu Mac OS 9, et elles sont citées telles quelles
     dans les captures de référence : barre de 20 px, item de 16 px, et une gouttière de
     20 px à gauche pour que la coche ne pousse jamais le libellé. */
  --platinum-barre: 20px;
  --platinum-item: 16px;
  --platinum-gouttiere: 20px;
  /* Geneva était la police de la barre de menus ; Verdana lui ressemble et existe
     partout, la police système ferme la marche. */
  --platinum-police: Geneva, Verdana, -apple-system, sans-serif;
  --platinum-gris: #808080;
}

/* ── L'en-tête : la barre, puis la ligne d'avertissement ────────────────────── */

/* 🔴 En flux normal, PAS en position fixe. C'est ce qui règle le défaut T116 : le
   bandeau du §12.5 flottait sur les premiers pixels de la carte, et les marqueurs qui
   s'y trouvaient étaient visibles sans être cliquables. Ici l'en-tête pousse la carte
   vers le bas au lieu de la recouvrir — il ne peut plus rien manger du tout. */
.chapeau {
  flex: none;
  position: relative;   /* les déroulants se posent par rapport à lui */
  z-index: 2000;        /* au-dessus des panneaux Leaflet (400) et contrôles (1000) */
}

.barre-menus {
  display: flex;
  align-items: stretch;
  height: var(--platinum-barre);
  background: linear-gradient(to bottom, #ffffff, #dddddd);
  border-bottom: 1px solid #000;
  font: 12px/var(--platinum-barre) var(--platinum-police);
  color: #000;
  user-select: none;
}

.barre-menus .titres { display: flex; align-items: stretch; min-width: 0 }

/* Un `[hidden]` doit rester caché quoi qu'en dise le reste de cette feuille : c'est le
   seul mécanisme qui ouvre et ferme les déroulants. */
.chapeau [hidden] { display: none }

/* ── Titres de la barre ─────────────────────────────────────────────────────── */

.barre-menus .titre {
  appearance: none;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: default;
  white-space: nowrap;
}

/* Le titre du compte porte un pictogramme DESSINÉ, jamais un caractère : `⌂` et `▭` se
   sont affichés en petits carrés sur les polices système de macOS, sans erreur ni
   avertissement. `currentColor` le fait s'inverser avec le titre. */
.barre-menus .titre-moi { display: inline-flex; align-items: center; gap: 4px }
.barre-menus .pict-moi { width: 11px; height: 11px; flex: none }
/* Le nom d'un compte peut être long ; la barre, elle, ne s'étire pas. Il se tronque par
   les points de suspension du navigateur et reste entier dans l'infobulle. */
.barre-menus .titre-moi > span {
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 🔴 La signature de Mac OS 9 : le titre survolé ou ouvert s'INVERSE. */
.barre-menus .titre:hover,
.barre-menus .titre[aria-expanded="true"] { background: #000; color: #fff }

.barre-menus .titre:focus-visible { outline: 1px dotted currentColor; outline-offset: -3px }

/* ── Déroulants ─────────────────────────────────────────────────────────────── */

.chapeau .deroulant {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2001;
  margin: 0;
  padding: 2px 0;
  min-width: 190px;
  max-width: calc(100vw - 16px);
  list-style: none;
  background: #fff;
  border: 1px solid #000;
  /* Ombre portée NETTE et décalée : Mac OS 9 n'a jamais flouté quoi que ce soit. */
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}

.chapeau .deroulant li { position: relative; margin: 0; padding: 0 }

/* Un séparateur est un trait, pas un item : il ne se survole pas et le clavier le saute
   (cf. `menus.js`, qui ne parcourt que les `role="menuitem*"`). */
.chapeau .deroulant li[role="separator"] {
  height: 1px;
  margin: 3px 1px;
  background: var(--platinum-gris);
}

.chapeau .deroulant [role^="menuitem"] {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--platinum-item);
  margin: 0;
  padding: 0 var(--platinum-gouttiere);
  border: 0;
  border-radius: 0;
  background: none;
  font: 12px/var(--platinum-item) var(--platinum-police);
  color: #000;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
  appearance: none;
}

.chapeau .deroulant [role^="menuitem"]:hover,
.chapeau .deroulant [role^="menuitem"]:focus {
  background: #000;
  color: #fff;
  outline: none;
}

/* 🔴 Un item désactivé est GRIS et ne réagit à rien. Il reste affiché : « ce que les
   exports ne portent pas » est une information, une ligne absente n'en serait pas une. */
.chapeau .deroulant [aria-disabled="true"],
.chapeau .deroulant [aria-disabled="true"]:hover,
.chapeau .deroulant [aria-disabled="true"]:focus {
  background: none;
  color: var(--platinum-gris);
  cursor: default;
}

/* La coche, dans la gouttière ; la pointe du sous-menu, à droite. */
.chapeau .deroulant [aria-checked="true"]::before {
  content: "✓";
  position: absolute;
  left: 5px;
}

.chapeau .deroulant [aria-haspopup="true"]::after {
  content: "▸";
  position: absolute;
  right: 6px;
}

/* ── Sous-menus ─────────────────────────────────────────────────────────────── */

.chapeau .deroulant .deroulant { top: -3px; left: 100% }

/* ── Ligne d'avertissement, sous la barre ───────────────────────────────────── */

/* 🔴 UNE ligne, rouge, toujours là. Elle ne peut pas partir derrière un menu : elle
   dit comment LIRE les points, et quelqu'un qui ne l'a pas lue prendra une position
   floutée pour une parcelle. Le texte complet, lui, attend le menu « ? ». */
.avertissement-positions {
  display: flex;
  /* 🔴 Hauteur IMPOSÉE, et centrage plutôt qu'alignement sur la ligne de base. Mesuré
     au navigateur : laissée libre, la bande faisait 46 px — le panneau « ⚠ » entraîne
     une police de repli aux métriques d'émoji, dont la boîte de ligne fait trois fois
     la hauteur du texte. Une ligne d'avertissement qui mange 46 px de carte, c'est le
     pavé qu'on vient justement de retirer. */
  height: 22px;
  align-items: center;
  overflow: hidden;
  gap: 6px;
  margin: 0;
  padding: 0 8px;
  background: #fff0ef;
  border-bottom: 1px solid #000;
  font: 11px/1.4 var(--platinum-police);
  color: var(--alerte);
}

.avertissement-positions .texte {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avertissement-positions .detail {
  flex: none;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--alerte);
  border-radius: 0;
  background: #fff;
  font: 10px/1.35 var(--platinum-police);
  color: var(--alerte);
  cursor: pointer;
}

.avertissement-positions .detail:hover { background: var(--alerte); color: #fff }

/* ── Compteurs, à droite de la barre — l'horloge de Mac OS 9 ────────────────── */

.barre-menus .compteurs {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 8px;
  min-width: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Écrans étroits ─────────────────────────────────────────────────────────── */

/* 🔴 Rien ne doit sortir de l'écran ni recouvrir la carte. Les titres se resserrent, les
   compteurs se tronquent par les points de suspension du navigateur — ils restent
   lisibles au survol —, et les sous-menus cessent de s'ouvrir SUR LE CÔTÉ : ils
   s'ouvrent en dessous, à l'intérieur du déroulant, où il y a forcément la place. */
@media (max-width: 980px) {
  .barre-menus .titre { padding: 0 5px }
  .barre-menus .compteurs { font-size: 10px }
  .chapeau .deroulant .deroulant {
    position: static;
    min-width: 0;
    margin: 0 0 0 12px;
    border-width: 1px 0 0;
    box-shadow: none;
  }
}

/* ── Retour à la carte, à droite de la barre du backoffice ───────────────────────
 *
 * Guillaume, le 2026-09-11 : « il faut aussi que le bouton pour revenir à la carte
 * soit apparent ». C'est le seul chemin de retour depuis le backoffice ; le laisser
 * dans un en-tête que le menu recouvre le rendait introuvable.
 *
 * `margin-left: auto` le pousse à droite, à la place qu'occupe le menu de compte sur
 * la carte — même barre, même vocabulaire, mêmes réflexes. */
.barre-menus .retour-carte {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

/* ── Le backoffice défile ; sa barre de menus, non ───────────────────────────────
 *
 * Sous Mac OS 9, la barre de menus EST la bande la plus haute de l'écran : elle ne
 * défile jamais, quoi que fasse la fenêtre en dessous. La carte, qui ne défile pas,
 * n'avait pas besoin de le dire. Une page de backoffice de huit sections, si.
 *
 * 🔴 `position: sticky` et non `fixed` : `fixed` sortirait la barre du flux et la
 * première section passerait dessous. Le `z-index` du chapeau (2000) suffit à la
 * garder au-dessus du contenu.
 *
 * Le sélecteur vise `body > .chapeau` — celui de la carte est imbriqué dans sa
 * colonne flex, où `sticky` n'aurait aucun sens et n'est pas voulu. */
body > .chapeau {
  position: sticky;
  top: 0;
}

/* Le nom de l'application, à gauche de la barre — la place du menu Pomme sous
 * Mac OS 9. Ce n'est PAS un menu : pas de `role`, pas de clic. C'est le `h1` de la
 * page, et une page sans titre principal n'offre aucun repère à un lecteur d'écran. */
.barre-menus .nom-appli {
  margin: 0;
  padding: 0 10px 0 8px;
  font: inherit;
  font-weight: bold;
  align-self: center;
  white-space: nowrap;
}

/* ── Chaque déroulant sous SON titre ─────────────────────────────────────────────
 *
 * Guillaume, le 2026-09-11 : « le sous menu doit être aligné sur la gauche avec le
 * titre sur lequel on clique ».
 *
 * 🔴 `.chapeau .deroulant` est en `position: absolute`, et son seul ancêtre positionné
 * était `.chapeau` : les trois déroulants se posaient donc tous au bord gauche de la
 * barre, les uns sur les autres. Ça ne se voyait pas tant qu'un seul s'ouvrait à la
 * fois — le défaut était là depuis le début, la carte comprise.
 *
 * L'enveloppe `[role="none"]` de chaque titre devient l'origine : le déroulant se pose
 * alors sous son propre titre, et les sous-menus continuent de partir de leur `li`
 * (règle plus bas, inchangée). */
.barre-menus .titres > [role="none"] { position: relative }