/* La page du globe : l'interface posée sur la carte.

   Mêmes jetons que le site (assets/site.css), recopiés pour ne pas charger une
   feuille écrite pour des pages qui défilent. Propriétés LOGIQUES partout :
   l'arabe met l'interface en miroir, la carte reste en gauche-à-droite (son
   conteneur porte dir="ltr" — la leçon du calque ciel de l'application).

   Deux régimes :
   - globe : `html.js` sans `.sans-webgl` — plein écran, rien ne défile ;
   - repli : sans JavaScript ou sans WebGL 2 — une page qui défile, avec le
     texte, l'appel à l'action et la section sur les données. */

:root {
  --night: #071119; --deep: #040A11; --panel: #0E1D2A; --edge: #1B3348;
  --paper: #E8F0F7; --sky: #93B2CD; --faint: #5E7891; --route: #55C8F5; --warn: #E8BE72;
  --display: "IBM Plex Sans Condensed", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, menlo, monospace;
  /* Verre SANS flou : un backdrop-filter relit la carte sous lui à chaque image,
     et la carte se repeint jusqu'à 60 fois par seconde pendant un geste. Une
     quinzaine de pastilles floutées, c'est autant de passes de plus par image sur
     le GPU d'un téléphone, pour un gain invisible sur un fond aussi sombre. */
  --verre: rgba(10, 22, 33, .9);
  --bord: rgba(27, 51, 72, .95);
  --marge: 12px;
  /* Marges de sécurité LATÉRALES : `viewport-fit=cover` rend à la page toute la
     largeur, y compris, téléphone couché, la bande de l'encoche ou de la Dynamic
     Island et les coins arrondis (62 px de chaque côté sur un iPhone 17 Pro).
     Tout ce qui se pose sur un bord latéral passe par --debut et --fin, qui
     suivent le sens de lecture : en arabe, le début est à droite. */
  --s-debut: env(safe-area-inset-left, 0px);
  --s-fin: env(safe-area-inset-right, 0px);
  --debut: max(var(--marge), var(--s-debut));
  --fin: max(var(--marge), var(--s-fin));
  --haut: calc(env(safe-area-inset-top, 0px) + var(--marge));
  --bas: env(safe-area-inset-bottom, 0px);
  --h-mention: 34px;
  /* Hauteur réelle du bandeau des sources, marge de sécurité comprise ; la page
     la mesure et la repose ici (ResizeObserver), le bandeau pouvant passer sur
     deux lignes. */
  --pied: calc(var(--bas) + var(--h-mention));
  --ombre: 0 18px 40px -18px rgba(0, 0, 0, .85);
  color-scheme: dark;
}
html[dir="rtl"] { --s-debut: env(safe-area-inset-right, 0px); --s-fin: env(safe-area-inset-left, 0px); }

* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--paper);
  font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--route); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sauter {
  position: fixed; z-index: 60; inset-block-start: var(--haut); inset-inline-start: var(--debut);
  background: var(--paper); color: var(--deep); padding: 10px 14px; border-radius: 8px;
  /* Au-dessus du bord de l'écran, marge du haut comprise : sous une encoche
     (viewport-fit=cover, 62 px sur un iPhone 17 Pro), −160 % de sa propre
     hauteur ne suffisait pas, et le lien restait à moitié visible. */
  transform: translateY(calc(-100% - var(--haut) - 8px)); text-decoration: none; font-weight: 500;
}
.sauter:focus { transform: none; }

/* ── Régime globe : plein écran ─────────────────────────────────────────── */
html.js:not(.sans-webgl), html.js:not(.sans-webgl) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.js:not(.sans-webgl) .repli { display: none; }
html:not(.js) .ui, html.sans-webgl .ui { display: none !important; }

.carte { position: fixed; inset: 0; z-index: 0; background: var(--night); }
.carte .maplibregl-canvas:focus-visible { outline: 2px solid var(--route); outline-offset: -3px; }

/* Verre : les éléments posés sur la carte. */
.verre {
  background: var(--verre); border: 1px solid var(--bord);
}

/* ── Haut : marque, recherche, outils ──────────────────────────────────── */
.haut {
  position: fixed; z-index: 25; inset-block-start: var(--haut); inset-inline: var(--debut) var(--fin);
  display: flex; gap: 8px; align-items: flex-start; pointer-events: none;
}
.haut > * { pointer-events: auto; }
.marque {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 8px 14px;
  border-radius: 999px; color: var(--paper); text-decoration: none; flex: none;
  font: 700 17px/1 var(--display); letter-spacing: -.01em;
  background: var(--verre); border: 1px solid var(--bord);
}
.marque img { width: 28px; height: 28px; }
.recherche { position: relative; flex: 0 1 400px; min-width: 0; margin: 0; }
/* z-index : un champ qui crée un contexte d'empilement (flou, opacité) et vient
   après l'icône la recouvrirait — c'est arrivé. */
.recherche > .icone { position: absolute; z-index: 1; inset-block-start: 12px; inset-inline-start: 14px; color: var(--sky); pointer-events: none; }
.recherche-champ {
  width: 100%; height: 44px; border-radius: 22px; padding-inline: 42px 44px;
  background: var(--verre); border: 1px solid var(--bord); color: var(--paper);
  font: 400 16px/1 var(--body); -webkit-appearance: none; appearance: none;
}
.recherche-champ::placeholder { color: var(--sky); opacity: 1; }
.recherche-champ::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche-champ:placeholder-shown { padding-inline-end: 14px; }
.recherche-champ::placeholder { text-overflow: ellipsis; }
.recherche-champ:focus { outline: none; border-color: var(--route); }
.recherche-champ:focus-visible { outline: 2px solid var(--route); outline-offset: 1px; }
.recherche-effacer {
  position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; color: var(--sky); cursor: pointer; border-radius: 22px;
}
.recherche-liste, .recherche-etat.visible {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 2;
  margin: 0; list-style: none; padding: 6px; border-radius: 14px;
  background: #0A1621; border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.recherche-liste { max-height: min(60dvh, 440px); overflow-y: auto; overscroll-behavior: contain; }
.recherche-etat { margin: 0; }
.recherche-etat:not(.visible) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.recherche-etat.visible { padding: 12px 14px; color: var(--sky); font-size: 14px; }
.option {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 10px;
  border-radius: 9px; cursor: pointer;
}
.option[aria-selected="true"] { background: var(--edge); }
.option-genre {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font: 500 10.5px/1 var(--mono); letter-spacing: .02em; color: var(--sky); background: rgba(27, 51, 72, .6);
}
.option:is([data-genre="vol"], [data-genre="compagnie"]) .option-genre { color: var(--paper); background: rgba(85, 200, 245, .18); }
.option-textes { min-width: 0; display: grid; }
.option-nom { color: var(--paper); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.option-detail { color: var(--sky); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.option-titre {
  padding: 8px 10px 4px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky);
}

.haut-outils { display: flex; gap: 8px; margin-inline-start: auto; flex: none; }
.bouton-rond, .bouton-carre {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--paper);
  background: var(--verre); border: 1px solid var(--bord);
}
.bouton-rond { border-radius: 50%; }
.bouton-carre { border-radius: 12px; }
.bouton-rond:hover, .bouton-carre:hover { border-color: var(--route); }
.bouton-carre[aria-pressed="true"], .bouton-carre[aria-expanded="true"], .bouton-rond[aria-expanded="true"] {
  color: var(--deep); background: var(--route); border-color: var(--route);
}

/* Sélecteur de langue : le `<details>` de build.py, en pastille ronde. */
.langues { position: relative; font: 400 14px/1 var(--body); }
.langues summary {
  list-style: none; cursor: pointer; height: 44px; min-width: 44px; padding-inline: 14px;
  display: inline-flex; align-items: center; border-radius: 22px; color: var(--paper);
  background: var(--verre); border: 1px solid var(--bord); white-space: nowrap;
}
.langues summary::-webkit-details-marker { display: none; }
.langues .menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); z-index: 30;
  display: grid; gap: 2px; min-width: 170px; padding: 6px; border-radius: 12px;
  background: #0A1621; border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.langues .menu a, .langues .menu span {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  text-decoration: none; color: var(--sky);
}
.langues .menu a:hover { background: var(--edge); color: var(--paper); }
.langues .menu [aria-current] { color: var(--paper); background: var(--edge); }

/* ── État : le compteur, l'âge des positions, les alertes ─────────────── */
.pile-haut {
  position: fixed; z-index: 10; inset-block-start: calc(var(--haut) + 54px); inset-inline-start: var(--debut);
  display: grid; gap: 8px; justify-items: start; max-width: min(400px, calc(100vw - var(--debut) - var(--fin) - 56px));
  pointer-events: none;
}
.pile-haut > * { pointer-events: auto; }
.etat {
  padding: 8px 12px; border-radius: 12px; background: var(--verre); border: 1px solid var(--bord);
}
/* Le fondu du passage « ouverture → bandeau » porte sur le CONTENU, jamais sur la
   boîte : dans Safari (iOS 26.5, simulateur), une boîte floutée dont l'opacité
   était animée réapparaissait vide — le flou, sans le texte. Le flou a depuis
   disparu (voir --verre) ; la règle reste, elle ne coûte rien. */
.etat > * { transition: opacity .3s ease; }
.etat.bascule > * { opacity: 0; }
.etat p { margin: 0; }
.etat-titre {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
.etat-compte { font-size: 14px; color: var(--sky); }
/* Plex Sans en chiffres tabulaires, pas la chasse fixe : l'espace des milliers
   y prendrait la largeur d'un chiffre (« 12  242 »). */
.etat-nombre { font: 500 15.5px/1 var(--body); color: var(--paper); font-variant-numeric: tabular-nums; }
.etat-nombre:empty { display: none; }
.etat-age { font-size: 12.5px; color: var(--sky); }
.etat-age:empty { display: none; }
.etat-alerte { font-size: 13px; color: var(--warn); max-width: 36ch; }
.etat-alerte::before { content: "● "; }
/* Suivi exclusif : un seul avion dessiné. Le compteur le dit en clair, et le
   retour au trafic est un vrai bouton, plein, de 44 px — pas un lien discret :
   c'est la seule issue visible d'un globe qui n'a plus qu'un avion. */
html.suivi-exclusif .etat-compte { color: var(--paper); font-size: 14.5px; }
html.suivi-perdu .etat-age { display: none; }
.etat-suivi { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.etat-suivi .bouton { flex: 0 1 auto; padding-inline: 14px; }
/* Deux classes : `.bouton`, déclaré plus bas, l'emporterait à égalité. */
.etat-suivi .bouton-tout { background: var(--route); border-color: var(--route); color: var(--deep); }
.etat-suivi .bouton-tout:hover { background: #7AD6F8; border-color: #7AD6F8; }

/* Ouverture : le compteur au centre bas, en grand. Le moteur écarte le disque
   du globe de ce bloc (cadrageOuverture, globe.mjs) : il le mesure AVANT que
   le nombre n'arrive, d'où la place du nombre réservée d'emblée — sans elle, le
   bloc grandissait de 46 à 86 px vers le haut, dans le disque. */
html.intro .etat {
  position: fixed; inset-inline: var(--debut) var(--fin); inset-block-end: calc(var(--pied) + 96px);
  background: none; border: 0;
  text-align: center; pointer-events: none;
}
html.intro .etat-titre {
  position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
  font: 500 12px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sky);
  margin: 0 0 10px;
}
html.intro .etat-compte { display: grid; justify-items: center; gap: 6px; font-size: clamp(16px, 2.2vw, 19px); color: var(--sky); }
html.intro .etat-nombre { font: 700 clamp(46px, 9vw, 86px)/1 var(--display); letter-spacing: -.02em; }
html.intro .etat-nombre:empty { display: block; min-height: 1em; visibility: hidden; }
/* L'âge attend le bandeau ; une alerte, elle, se dit tout de suite — un globe vide
   sans explication serait pire qu'un globe vide. */
html.intro .etat-age { display: none; }
html.intro .etat-alerte { max-width: 42ch; margin-block-start: 10px; font-size: 14px; }
/* Sur un grand écran, le disque occupe le centre : le compteur se pose à côté. */
@media (min-width: 760px) {
  html.intro .etat { inset-inline: calc(var(--debut) + 18px) auto; inset-block-end: calc(var(--pied) + 36px); text-align: start; }
  html.intro .etat-compte { justify-items: start; }
}
html.intro .zone { display: none !important; }

/* Pendant l'ouverture, seuls le globe, le compteur, la recherche, l'appel et
   la mention des sources restent à l'écran. */
.legende, .commandes { transition: opacity .5s ease; }
html.intro .legende, html.intro .commandes { opacity: 0; pointer-events: none; }

.zone {
  display: flex; align-items: center; gap: 4px; padding-inline-start: 12px; border-radius: 12px;
  background: var(--verre); border: 1px solid var(--route);
}
.zone-texte { margin: 0; font-size: 14px; color: var(--paper); padding-block: 6px; }
.bouton-texte {
  min-height: 44px; padding-inline: 12px; border: 0; background: none; color: var(--route);
  font-weight: 500; cursor: pointer; border-radius: 10px; white-space: nowrap;
}
.bouton-texte[aria-expanded="true"] { color: var(--paper); }
.bouton-fermer {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; background: none;
  color: var(--sky); cursor: pointer; border-radius: 10px;
}
.bouton-fermer:hover { color: var(--paper); }

/* ── Commandes de la carte ──────────────────────────────────────────────── */
.commandes {
  position: fixed; z-index: 10; inset-inline-end: var(--fin); inset-block-start: 50%;
  transform: translateY(-50%); display: grid; gap: 6px;
}

/* ── Légende ────────────────────────────────────────────────────────────── */
.legende {
  position: fixed; z-index: 10; inset-inline-start: var(--debut);
  inset-block-end: calc(var(--pied) + 12px); width: 232px;
  padding: 2px 4px 10px 12px; border-radius: 12px; font-size: 12.5px; color: var(--sky);
  background: var(--verre); border: 1px solid var(--bord);
  display: grid; grid-template-columns: 1fr auto; column-gap: 6px; align-items: center;
}
.legende-titre { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.legende-unites {
  grid-column: 2; grid-row: 1; min-height: 44px; min-width: 64px; padding: 0 8px; border: 0; background: none;
  cursor: pointer; color: var(--sky); font: 500 12px/1 var(--mono); border-radius: 10px;
}
.legende-unites b { color: var(--paper); font-weight: 500; }
.legende-rampe, .legende-graduations, .legende-ligne { grid-column: 1 / -1; margin-inline-end: 8px; }
.legende-rampe {
  position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, #7C83F7 0%, #55C8F5 33.33%, #E8F0F7 100%);
}
[dir="rtl"] .legende-rampe { background: linear-gradient(to left, #7C83F7 0%, #55C8F5 33.33%, #E8F0F7 100%); }
.legende-rampe::after {
  content: ""; position: absolute; inset-block: -3px; inset-inline-start: var(--pos, 33.33%);
  width: 1.5px; background: var(--night); opacity: .7;
}
.legende-graduations { position: relative; height: 18px; margin-block: 4px 2px; font: 400 11.5px/18px var(--mono); color: var(--paper); }
.legende-graduations span { position: absolute; inset-block-start: 0; white-space: nowrap; }
.legende-graduations .g0 { inset-inline-start: 0; }
.legende-graduations .g1 { inset-inline-start: var(--pos, 33.33%); transform: translateX(-50%); }
[dir="rtl"] .legende-graduations .g1 { transform: translateX(50%); }
.legende-graduations .g2 { inset-inline-end: 0; }
.legende-ligne { margin-block: 2px 0; display: flex; align-items: center; gap: 6px; }
.pastille-sol { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.legende-hauteur { margin-inline-start: auto; color: var(--paper); font-family: var(--mono); font-size: 11.5px; }

/* ── Appel à l'action ───────────────────────────────────────────────────── */
.appel {
  position: fixed; z-index: 12; inset-inline-end: var(--fin);
  inset-block-end: calc(var(--pied) + 12px);
}
.pilule {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 6px 18px 6px 8px;
  border-radius: 999px; text-decoration: none; color: var(--paper); font-weight: 500; font-size: 14.5px;
  background: rgba(10, 22, 33, .92); border: 1px solid rgba(85, 200, 245, .55); box-shadow: var(--ombre);
}
.pilule:hover { border-color: var(--route); }
.pilule img { width: 30px; height: 30px; border-radius: 8px; }
.encart {
  position: absolute; inset-block-end: calc(100% + 10px); inset-inline-end: 0; width: min(340px, calc(100vw - var(--debut) - var(--fin)));
  padding: 18px 18px 14px; border-radius: 16px; background: #0A1621; border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.encart .bouton-fermer { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; }
.encart-titre { margin: 0 40px 8px 0; margin-inline: 0 40px; font: 700 20px/1.15 var(--display); letter-spacing: -.01em; }
.encart-texte { margin: 0 0 14px; color: var(--sky); font-size: 14.5px; }
.encart-get, .repli-get { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.badge { display: inline-block; line-height: 0; }
.badge img { width: 150px; height: auto; }
.qr { line-height: 0; }
.qr-carte { display: block; background: #fff; border-radius: 10px; padding: 8px; }
.qr img { width: 128px; height: 128px; display: block; }
.encart-note { margin: 12px 0 0; font-size: 12.5px; color: var(--sky); }
html.ios .qr { display: none; }

/* ── Panneaux : fiche d'un avion, liste d'une zone ────────────────────── */
.panneau {
  position: fixed; z-index: 30; color: var(--paper);
  background: #0A1621; border: 1px solid var(--bord); border-radius: 16px; box-shadow: var(--ombre);
  overflow-y: auto; overscroll-behavior: contain;
}
.panneau:focus { outline: none; }
.panneau:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }
.panneau-tete { display: flex; align-items: flex-start; gap: 8px; padding: 12px 6px 4px 16px; padding-inline: 16px 6px; }
.panneau-tete > div { flex: 1; min-width: 0; }
.fiche {
  inset-block-start: calc(var(--haut) + 56px); inset-inline-end: calc(var(--fin) + 56px);
  width: 340px; max-height: calc(100dvh - var(--haut) - 56px - var(--pied) - 24px);
}
.fiche-titre { margin: 4px 0 0; font: 700 26px/1.1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
/* Sous le titre : la compagnie (OpenFlights ou adsbdb), puis le trajet en villes,
   « Paris → Nice », comme dans l'application. Vides, ils ne prennent aucune place. */
.fiche-sous-titre { margin: 4px 0 0; font: 400 13.5px/1.35 var(--body); color: var(--sky); overflow-wrap: anywhere; }
.fiche-trajet { margin: 3px 0 0; font: 500 15px/1.35 var(--body); color: var(--paper); overflow-wrap: anywhere; }
.fiche-sous-titre:empty, .fiche-trajet:empty { display: none; }
.fiche-perdu { margin: 8px 16px; color: var(--warn); font-size: 14px; }
.fiche-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 10px 16px 0; }
.fiche-grille > div { min-width: 0; }
.fiche-grille dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.fiche-grille dd { margin: 2px 0 0; font: 500 15px/1.35 var(--mono); color: var(--paper); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fiche-grille dd small { display: block; font-size: 12.5px; color: var(--sky); font-weight: 400; }
.fiche-grille [data-champ="alt"] dd { font-size: 17px; }
.fiche-age { margin: 12px 16px 0; font-size: 13px; color: var(--sky); }
/* La mention courte des sources de la compagnie et du trajet (ODbL 4.3 pour
   OpenFlights ; adsbdb), là où ils s'affichent. Un point médian entre deux. */
.fiche-sources { margin: 6px 16px 0; font-size: 12px; line-height: 1.45; color: var(--sky); }
.fiche-sources > span:not([hidden]) ~ span:not([hidden])::before { content: " · "; }
.fiche-actions { display: flex; gap: 8px; margin: 12px 16px 0; }
.bouton {
  flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; border: 1px solid var(--bord); background: rgba(27, 51, 72, .55); color: var(--paper);
  cursor: pointer; font-weight: 500; font-size: 14.5px;
}
.bouton:hover { border-color: var(--route); }
.fiche-appel {
  margin: 14px 16px 16px; padding: 12px 14px; border-radius: 12px;
  background: rgba(85, 200, 245, .08); border: 1px solid rgba(85, 200, 245, .3);
}
.fiche-appel p { margin: 0 0 6px; font-size: 14px; color: var(--paper); }
.fiche-appel-lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

.liste {
  inset-block-start: calc(var(--haut) + 56px); inset-inline-start: var(--debut);
  width: min(400px, calc(100vw - var(--debut) - var(--fin)));
  max-height: calc(100dvh - var(--haut) - 56px - var(--pied) - 24px);
  display: flex; flex-direction: column; overflow: hidden;
}
.liste-titre { margin: 8px 0 0; font: 700 20px/1.15 var(--display); }
.liste-resume { margin: 4px 16px 8px; font-size: 13.5px; color: var(--sky); }
.liste-note { margin: 0 16px 8px; font-size: 13px; color: var(--warn); }
.liste-defile { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px; min-height: 0; }
.liste-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.liste-table th {
  position: sticky; inset-block-start: 0; background: #0A1621; text-align: start;
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sky);
  padding: 8px 8px; border-bottom: 1px solid var(--bord);
}
.liste-table td { padding: 0 8px; border-bottom: 1px solid rgba(27, 51, 72, .6); font-family: var(--mono); color: var(--paper); white-space: nowrap; }
.liste-table td:first-child { padding: 0; }
.liste-table td button {
  width: 100%; min-height: 44px; text-align: start; padding: 0 8px; border: 0; background: none; cursor: pointer;
  color: var(--route); font: 500 13.5px var(--mono); border-radius: 8px;
}
.liste-table tr:hover td { background: rgba(27, 51, 72, .35); }
.liste-reste { margin: 8px 16px 12px; font-size: 12.5px; color: var(--sky); }
.liste-reste:empty { display: none; }

/* ── Mention des sources : toujours visible, jamais couverte ─────────── */
.mention {
  position: fixed; z-index: 20; inset-inline: 0; inset-block-end: 0;
  padding-block: 7px calc(7px + var(--bas)); padding-inline: var(--debut) var(--fin);
  background: rgba(4, 10, 17, .82); border-top: 1px solid rgba(27, 51, 72, .7);
  font-size: 12px; line-height: 1.45; color: var(--sky);
}
.mention p { margin: 0; }
.mention-courte { display: none; }
.mention-plus {
  border: 0; background: none; color: var(--route); cursor: pointer; padding: 0 10px; min-height: 36px;
  text-decoration: underline; text-underline-offset: 2px;
}
.lien-apropos { margin-inline-start: 6px; }

.toast {
  position: fixed; z-index: 45; inset-inline-start: 50%; inset-block-end: calc(var(--pied) + 80px);
  transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 999px;
  max-width: calc(100vw - 2 * max(16px, var(--s-debut), var(--s-fin)));
  background: var(--paper); color: var(--deep); font-weight: 500; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease; overflow-wrap: anywhere;
}
[dir="rtl"] .toast { transform: translateX(50%); }
.toast.visible { opacity: 1; }

/* ── À propos des données ───────────────────────────────────────────────── */
.a-propos { color: var(--paper); }
.a-propos h2 { font: 700 26px/1.15 var(--display); letter-spacing: -.01em; margin: 0 0 14px; }
.a-propos h3 { font: 600 17px/1.3 var(--display); margin: 22px 0 6px; }
.a-propos p { margin: 0 0 12px; color: var(--sky); max-width: 66ch; }
.a-propos p strong { color: var(--paper); font-weight: 500; }
.a-propos .pied { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--edge); font-size: 13.5px; }
.a-propos .pied p { color: var(--sky); }
.a-propos .langues.plat { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.a-propos .langues.plat a, .a-propos .langues.plat span { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky); text-decoration: none; }
.a-propos .langues.plat a:hover { color: var(--route); }
.a-propos .langues.plat [aria-current] { color: var(--paper); }
.a-propos .pied a { color: var(--route); }
html.js:not(.sans-webgl) .a-propos {
  position: fixed; z-index: 40; inset-block: calc(var(--haut) + 56px) calc(var(--pied) + 12px);
  inset-inline: max(var(--debut), calc(50vw - 340px)) max(var(--fin), calc(50vw - 340px)); padding: 26px 28px 18px; border-radius: 18px;
  background: #0A1621; border: 1px solid var(--bord); box-shadow: var(--ombre);
  overflow-y: auto; overscroll-behavior: contain;
}
html.js:not(.sans-webgl) .a-propos:not(.ouvert) { display: none; }
.a-propos > .bouton-fermer { position: sticky; inset-block-start: 0; float: inline-end; margin: -14px -16px 0 0; margin-inline: 0 -16px; }
.a-propos:focus { outline: none; }

/* ── Repli : sans JavaScript, ou sans WebGL 2 ───────────────────────────── */
.repli { display: none; }
html:not(.js) .repli, html.sans-webgl .repli {
  display: grid; gap: 22px 40px; max-width: 980px; margin: 0 auto; padding: 18px 20px 36px;
  grid-template-columns: 1fr; align-items: start;
}
html:not(.js) .pile-haut, html.sans-webgl .pile-haut {
  position: static; max-width: 980px; margin: 0 auto; padding: 96px 20px 0; display: block;
}
html:not(.js) .etat, html.sans-webgl .etat { background: none; border: 0; padding: 0; }
html:not(.js) .etat-titre, html.sans-webgl .etat-titre {
  position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
  font: 700 clamp(34px, 6vw, 58px)/1.04 var(--display); letter-spacing: -.02em; color: var(--paper);
}
html:not(.js) .haut, html.sans-webgl .haut { position: absolute; }
html:not(.js) .a-propos, html.sans-webgl .a-propos { max-width: 980px; margin: 0 auto; padding: 24px 20px 48px; border-top: 1px solid var(--edge); }
.repli-globe { width: 120px; height: 120px; fill: none; stroke: var(--edge); stroke-width: 1.4; }
.repli-globe circle { stroke: var(--route); opacity: .6; }
.repli-texte p { color: var(--sky); font-size: 17px; margin: 0 0 14px; max-width: 56ch; }
.repli-texte h2 { font: 700 26px/1.15 var(--display); margin: 0 0 12px; }
.repli-telephone { max-width: 280px; border-radius: 34px; padding: 7px; background: linear-gradient(160deg, #22364a, #0b1622); box-shadow: var(--ombre); }
.repli-telephone img { width: 100%; height: auto; border-radius: 27px; display: block; }
@media (min-width: 820px) {
  html:not(.js) .repli, html.sans-webgl .repli { grid-template-columns: 1fr 300px; }
  .repli-globe, .repli-texte, .repli-get { grid-column: 1; }
  .repli-telephone { grid-column: 2; grid-row: 1 / span 3; }
}

/* ── Ordinateur : phrase complète des sources ──────────────────────────── */
@media (min-width: 760px) {
  .mention-longue { display: block !important; }
  .mention-courte { display: none !important; }
}

/* ── Téléphone ──────────────────────────────────────────────────────────── */
@media (max-width: 759px) {
  :root { --h-mention: 44px; --marge: 10px; }
  .marque { width: 44px; padding: 0; justify-content: center; }
  .marque-nom { display: none; }
  .recherche { flex: 1 1 auto; }
  .langues summary { padding-inline: 0; width: 44px; justify-content: center; }
  .langues summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .langues summary::before {
    content: ""; width: 20px; height: 20px;
    background: no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8F0F7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h8M8 3v2M6 5c.5 3 2.5 5.5 5 7M10 5c-.6 3.4-3 6.4-6 8'/%3E%3Cpath d='M12 21l4-9 4 9M13.4 18h5.2'/%3E%3C/svg%3E");
  }
  .haut-outils { gap: 6px; }
  .haut { gap: 6px; }
  .pile-haut { inset-block-start: calc(var(--haut) + 52px); max-width: calc(100vw - var(--debut) - var(--fin)); }
  .mention { display: flex; align-items: center; min-height: calc(var(--h-mention) + var(--bas)); padding-block: 4px calc(4px + var(--bas)); }
  .mention-courte { display: block; }
  .mention-plus { min-height: 44px; }
  .mention-longue { display: none; }
  .mention.ouverte .mention-longue { display: block; }
  .mention.ouverte .mention-courte { display: none; }
  .mention.ouverte { font-size: 12px; }
  .appel { inset-inline: var(--debut) var(--fin); display: flex; justify-content: flex-end; }
  .pilule { font-size: 14px; }
  /* 188 px : à 172, « 10,000 ft » et « 30,000 ft+ » se chevauchaient de 2,7 px
     dans les six langues (les pieds sont l'unité par défaut aux États-Unis et au
     Royaume-Uni). Contrôle : outils/globe/controler_page.mjs, les deux unités. */
  .legende {
    width: 188px; inset-block-end: calc(var(--pied) + 70px);
  }
  .commandes { inset-block-start: auto; transform: none; inset-block-end: calc(var(--pied) + 70px); gap: 6px; }
  /* --borne-suivi : posée sur la fiche seule, pendant un suivi exclusif, pour
     laisser l'avion suivi entre elle et le compteur (page.mjs, ajusterFicheSuivi). */
  .fiche, .liste {
    inset-inline: max(8px, var(--s-debut)) max(8px, var(--s-fin)); inset-block-start: auto; inset-block-end: calc(var(--pied) + 6px);
    width: auto; max-height: min(64dvh, calc(100dvh - var(--haut) - 64px - var(--pied)), var(--borne-suivi, 100dvh));
    border-radius: 18px;
  }
  .fiche-titre { font-size: 24px; }
  /* Trois colonnes : la fiche garde la carte visible au-dessus d'elle. */
  .fiche-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  .fiche-grille dd { font-size: 14px; }
  .fiche-grille [data-champ="alt"] dd { font-size: 15px; }
  .fiche-age, .fiche-actions { margin-block-start: 10px; }
  .fiche-appel { margin-block-start: 10px; padding: 10px 12px; }
  .fiche-appel p { font-size: 13.5px; margin-block-end: 2px; }
  /* Résultats de recherche sur toute la largeur de l'écran, pas celle du champ. */
  .recherche-liste, .recherche-etat.visible {
    position: fixed; inset-inline: var(--debut) var(--fin); inset-block-start: calc(var(--haut) + 52px);
  }
  .fiche-appel { margin-block-end: 12px; }
  html.js:not(.sans-webgl) .a-propos { inset-inline: max(8px, var(--s-debut)) max(8px, var(--s-fin)); padding: 22px 18px 14px; }
  html.intro .etat { inset-block-end: calc(var(--pied) + 84px); }
  html.intro .etat-alerte { margin-inline: auto; }
  .toast { inset-block-end: calc(var(--pied) + 72px); }
}

/* Téléphone étroit : la recherche a besoin de la largeur. Le choix de la langue
   reste dans « À propos des données » (liste complète en pied), et dans la page
   de repli. */
@media (max-width: 420px) {
  html.js:not(.sans-webgl) .haut .langues { display: none; }
  .pilule { font-size: 13.5px; padding-inline-end: 14px; text-wrap: balance; }
}

/* Écrans bas (téléphone couché, fenêtre réduite) : la légende laisse la place,
   et les commandes passent sur deux colonnes, SOUS la barre du haut. Centrées
   en hauteur sur une seule colonne (236 px), elles descendaient sous la pastille
   de l'appel (« Aircraft in view » couvert, de 844 × 390 à 956 × 440) ou, ancrées
   au-dessus de la mention sur un téléphone, remontaient sous le bouton de langue
   (« Zoom in » couvert à 667 × 375 et 740 × 360). Sur deux colonnes, trois
   rangées font 140 px : elles tiennent entre la barre et la pastille dès 330 px
   de haut. La pastille se range en plus à côté d'elles : aucune hauteur ne peut
   les faire se chevaucher. Contrôle : outils/globe/controler_page.mjs. */
@media (max-height: 560px) {
  .legende { display: none; }
  .commandes {
    inset-block: calc(var(--haut) + 56px) auto; transform: none;
    grid-template-columns: repeat(2, 44px); gap: 4px;
  }
  .appel { inset-inline-end: calc(var(--fin) + 100px); }
  .pile-haut { max-width: min(400px, calc(100vw - var(--debut) - var(--fin) - 104px)); }
  .fiche { inset-inline-end: calc(var(--fin) + 104px); }
}
@media (max-height: 560px) and (max-width: 759px) {
  .fiche { inset-inline-end: max(8px, var(--s-fin)); }
}

/* Encart ouvert : au-dessus des panneaux (la fiche d'un avion occupe le même coin). */
.appel.ouvert { z-index: 36; }

/* ── Arabe ──────────────────────────────────────────────────────────────────
   L'espacement des lettres DÉLIE l'écriture arabe : les capitales espacées des
   intitulés (légende, fiche, titre d'ouverture) deviennent des lettres isolées.
   Et une valeur à unité (« 850 km/h ») posée dans un paragraphe de droite à
   gauche s'afficherait « km/h 850 » : les valeurs sont isolées en gauche-à-droite,
   alignées à droite comme le reste. */
html[lang="ar"] * { letter-spacing: normal !important; }
/* Les intitulés en chasse fixe n'ont pas d'arabe ni de chinois dans Plex Mono : la
   police de repli à chasse fixe pose chaque lettre arabe dans sa propre case, et
   le mot se défait. Ces intitulés prennent la police du texte. */
html[lang="ar"] :is(.etat-titre, .legende-titre, .legende-hauteur, .fiche-grille dt, .liste-table th, .option-titre),
html[lang="zh-Hans"] :is(.etat-titre, .legende-titre, .legende-hauteur, .fiche-grille dt, .liste-table th, .option-titre) {
  font-family: var(--body); text-transform: none;
}
[dir="rtl"] .fiche-grille dd, [dir="rtl"] .liste-table td {
  direction: ltr; unicode-bidi: isolate; text-align: right;
}
/* Les graduations sont posées par `inset-inline-start`, qui se résout dans la
   direction de l'élément lui-même : les passer en ltr les aurait placées à
   gauche d'une rampe qui, en arabe, part de la droite. `plaintext` règle l'ordre
   du texte (« 9,000 m+ ») sans toucher à la direction. */
[dir="rtl"] .legende-graduations span, [dir="rtl"] .legende-unites { unicode-bidi: plaintext; }
[dir="rtl"] .liste-table td button { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .etat > *, .legende, .commandes, .toast { transition: none; }
}