/* Jetons et règles : docs/DESIGN.md. Le Hub est clair ; les jetons vivent dans le bloc « Charte » (body.hub-mode). */
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--surface-0); color: var(--text-1);
         font:13px/1.55 var(--font-ui); }

  /* ---- Top bar ---- */

  /* ---- Status pill (icône + label, jamais couleur seule) ---- */

  /* ---- App shell : sidebar + contenu ---- */
  .chk { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); font-size:13px; }
  .muted { color: var(--text-muted); font-size:12px; }
  @media (max-width: 420px) {
    body { font-size:15px; }
  }

  /* ---- Cards ---- */

  /* ---- Aperçu ---- */
  canvas#preview { image-rendering: pixelated; background: #000; border-radius: var(--r-2);
                   display: block; width: 100%; aspect-ratio: 1; outline: 1px solid var(--line); outline-offset: -1px; }

  /* ---- Stat tiles ---- */

  /* ---- Contrôles ---- */
  label { display: block; margin: 12px 0 5px; color: var(--text-muted); font-size:13px; }
  input, select, textarea {
    font: inherit; background: var(--surface-1); color: var(--text-1);
    border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 10px; }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus-ring); }
  /* accessibilité : anneau de focus clavier (ui-craft — pair hover/focus-visible) */
  :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-2); }
  button:focus:not(:focus-visible) { outline: none; }
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { transition-duration: .01ms !important; }
  }
  input[type=range] { width: 100%; padding: 0; accent-color: var(--focus-ring); background: none; }
  input[type=color] { padding: 2px; width: 42px; height: 36px; }
  input[type=file] { padding: 6px; }
  input[type=checkbox] { accent-color: var(--focus-ring); width: 16px; height: 16px; }
  button { font: inherit; cursor: pointer; background: var(--surface-1); color: var(--text-1);
           border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 12px; min-height: 44px;
           transition: background-color .12s, border-color .12s, filter .12s; }
  button:hover { border-color: var(--line-strong); background: var(--surface-0); }

  /* ---- Scènes ---- */

  /* ---- Tables / transit ---- */
  table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size:13px; }
  td, th { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line); }
  th { position: sticky; top: 0; color: var(--text-muted); font-weight:400; font-size:12px; }
  tr:last-child td { border-bottom: none; }

  /* ---- Bibliothèque ---- */

  /* ---- Éditeur pixel ---- */

  /* ---- Presets / petits boutons ---- */
  textarea { width: 100%; min-height: 200px; font-family: ui-monospace, monospace; font-size:12px; }
  pre { margin: 0; white-space: pre-wrap; font-size:12px; color: var(--text-2);
        background: var(--surface-1); padding: 12px; border-radius: var(--r-2); max-height: 320px; overflow: auto; }

  /* ---- Toasts ---- */
  #toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex;
            flex-direction: column; gap: 8px; }
  /* cycle de vie 100% CSS (apparition → maintien → disparition), retiré du DOM
     sur animationend — pas de setTimeout pilotant l'animation */
  .toast { display: flex; align-items: flex-start; gap: 8px; background: var(--surface-1); border: 1px solid var(--line);
           color: var(--text-1); padding: 10px 14px; border-radius: var(--r-2); box-shadow: var(--elev-2);
           font-size:13px; max-width: 340px; animation: toastLife 3.8s ease forwards; }
  @keyframes toastLife {
    0% { opacity: 0; transform: translateX(12px); }
    6% { opacity: 1; transform: none; }
    90% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateX(12px); }
  }
  @media (prefers-reduced-motion: reduce) {
    @keyframes toastLife { 0%,100% { opacity: 0; } 6%,90% { opacity: 1; } }
  }
  .toast::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: var(--r-pill); background: var(--focus-ring); }
  .toast.good::before { background: var(--traffic-arrival); }
  .toast.bad::before { background: var(--traffic-emergency); }
  .toast.warn::before { background: var(--state-warn); }
  .aircraft-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); color: var(--text-1); cursor: pointer; }
  .aircraft-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .aircraft-card.selected { border-color: var(--focus-ring); }

  /* Vue Cast 1280x800 : tableau de bord clair, lisible à distance. */
  body.hub-mode { height: 100vh; overflow: hidden; background: var(--surface-0); color: var(--text-1); }
  .hub-view { display: none; }
  .hub-view:not([hidden]) { display: grid; }
  body.hub-mode .hub-view:not([hidden]) { height: 100vh; grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; padding: 12px 14px 8px; }
  .hub-head { display:flex; justify-content:space-between; align-items:center; gap:16px; min-width:0; padding:0 2px 8px; border-bottom:1px solid var(--line); }
  .hub-head h1 { margin:0; font-size:22px; line-height:1.1; letter-spacing:-.02em; }
  .hub-subtitle { margin:3px 0 0; color:var(--text-muted); font-size:12px; }
  .hub-subtitle:empty { display:none; }
  .hub-live-meta { display: grid; justify-items: end; gap: 6px; color: var(--text-muted); font-size:12px; white-space: nowrap; }
  .hub-source-health { position:relative; z-index:30; font-size:12px; }
  .hub-source-health summary { cursor:pointer; font-weight:700; color:var(--text-accent); }
  .hub-source-health[data-state="degraded"] summary { color:var(--state-warn); }
  .hub-source-health ul { position:absolute; right:0; top:100%; width:min(380px,calc(100vw - 32px)); max-height:65vh; overflow:auto; padding:12px; list-style:none; text-align:left; background:var(--glass-bg-solid); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--elev-2); }
  .hub-source-health li { padding:8px 0; border-bottom:1px solid var(--line); }
  .hub-source-health li strong,.hub-source-health li span { display:block; }
  .hub-source-health li strong::before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:var(--r-pill); background:var(--line-strong); }
  .hub-source-health li[data-state="good"] strong::before { background:var(--traffic-arrival); }
  .hub-source-health li[data-state="bad"] strong::before { background:var(--traffic-emergency); }
  .hub-source-health li[data-state="warn"] strong::before { background:var(--state-warn); }
  .hub-compact-leaders { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
  .hub-compact-leaders path { fill:none; stroke:var(--text-2); stroke-width:1; opacity:.65; }
  /* Echelle de superposition : alertes (50) > capsule (11) > popovers/panneaux (10) > dock (9) > info (6). Les alertes ne sont jamais recouvertes. */
  .hub-alert-zone { position:absolute; z-index:50; top:56px; left:50%; transform:translateX(-50%); width:min(520px,calc(100% - 28px)); display:flex; flex-direction:column; gap:8px; align-items:stretch; pointer-events:none; }
  .hub-alert-zone > * { pointer-events:auto; }
  .hub-go-around-alert { position:static; width:100%; box-sizing:border-box; display:flex; align-items:center; gap:10px; padding:10px; background:#fff4d8; border:1px solid var(--state-warn); border-radius:var(--r-2); font-size:12px; color:var(--state-warn); }
  .hub-go-around-alert[hidden] { display:none; }
  .hub-go-around-alert button { padding:5px 8px; border:1px solid var(--state-warn); background:var(--surface-1); border-radius:var(--r-1); cursor:pointer; }
  .hub-connection { display: inline-flex; align-items: center; gap: 8px; font-weight:700; }
  .hub-connection::before { width: 9px; height: 9px; border-radius: 50%; background: var(--state-warn); content: ""; }
  .hub-connection.good::before { background: var(--traffic-arrival); }
  .hub-connection.offline::before { background: var(--traffic-emergency); }
  .hub-layout { display:grid; position:relative; min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:8px; }
  .hub-radar { position:relative; grid-column:1; grid-row:1; min-width:0; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface-0); }
  #hub-map { position:absolute; inset:0; width:100%; height:100%; background:var(--surface-0); }
  .hub-map-title { position:absolute; z-index:4; top:12px; left:14px; display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--glass-line); border-radius:var(--r-2); background:var(--glass-bg); color:var(--text-1); font-size:13px; font-weight:700; box-shadow:var(--glass-reflect), var(--elev-1); pointer-events:none; }
  .hub-search { position:absolute; z-index:6; top:56px; left:14px; width:min(300px,calc(100% - 28px)); }
  .hub-search input { width:100%; box-sizing:border-box; min-height:36px; padding:6px 10px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--glass-bg-solid); color:var(--text-1); font:13px var(--font-ui); }
  .hub-search input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-search-results { position:absolute; left:0; right:0; top:100%; margin:4px 0 0; padding:4px; list-style:none; max-height:min(50vh,360px); overflow:auto; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--glass-bg-solid); color:var(--text-1); box-shadow:var(--elev-2); font:13px var(--font-ui); }
  .hub-search-results[hidden] { display:none; }
  .hub-search-results li { padding:6px 8px; border-radius:var(--r-2); cursor:pointer; }
  .hub-search-results li[aria-selected="true"], .hub-search-results li:hover { background:var(--accent-fill-1); }
  .hub-search-results li[role="presentation"] { cursor:default; color:var(--text-2); }
  .hub-search-tag { display:inline-block; margin-right:6px; padding:1px 5px; border-radius:var(--r-1); background:var(--text-accent); color:#fff; font-size:12px; font-weight:700; }
  .hub-search-tag.history { background:var(--traffic-sim); }
  .hub-search-results small { display:block; color:var(--text-2); font-size:12px; }
  .hub-map-title span { color:var(--text-muted); font-size:12px; font-weight:600; }
  .hub-map-toggles { position:absolute; z-index:4; top:58px; left:14px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; max-width:min(260px,calc(100% - 28px)); max-height:calc(100% - 120px); overflow:auto; }
  .hub-map-toggles label { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px 9px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--glass-bg); color:var(--text-1); font-size:12px; cursor:pointer; }
  .hub-weather-opacity { display:grid!important; grid-template-columns:auto minmax(85px,1fr) auto; width:100%; cursor:default!important; }
  .hub-weather-opacity input { width:100%!important; accent-color:var(--focus-ring); }
  .hub-weather-opacity output { min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
  .hub-map-toggles input { width:15px; height:15px; margin:0; accent-color:var(--focus-ring); }
  .hub-map-toggles label:hover { border-color:var(--line-strong); }
  .hub-map-toggles label:focus-within { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-filter-group { width:100%; border:1px solid var(--line); border-radius:var(--r-2); background:var(--glass-bg); box-shadow:var(--elev-1); }
  .hub-filter-group > summary { padding:8px 10px; color:var(--text-1); font-size:12px; font-weight:700; cursor:pointer; }
  .hub-filter-options { display:flex; flex-wrap:wrap; gap:5px; padding:0 7px 7px; }
  .hub-filter-options label { min-height:28px; padding:4px 7px; font-size:12px; }
  .hub-map-info { position:absolute; z-index:4; bottom:60px; left:12px; padding:8px; border:1px solid var(--glass-line); border-radius:var(--r-2); background:var(--glass-bg); color:var(--text-2); box-shadow:var(--glass-reflect), var(--elev-1); font-size:12px; pointer-events:none; }
  .hub-airspace-detail { position:absolute; z-index:9; top:58px; right:354px; width:min(300px,calc(100% - 380px)); max-height:calc(100% - 80px); overflow:auto; padding:12px; border:1px solid var(--line); border-radius:var(--r-3); background:var(--glass-bg); color:var(--text-1); box-shadow:var(--elev-2); }
  .hub-airspace-detail[hidden], .hub-squawk-alert[hidden] { display:none; }
  .hub-airspace-detail header { display:flex; align-items:start; justify-content:space-between; gap:10px; }
  .hub-airspace-detail h3 { margin:0; font-size:15px; }
  .hub-airspace-class { margin:4px 0 10px; color:var(--text-muted); font-size:12px; }
  .hub-airspace-levels { display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:stretch; }
  .hub-airspace-column { position:relative; min-height:58px; border:1px solid var(--line-strong); border-radius:var(--r-1); background:linear-gradient(to top,#dce7e2 0 18%,#f8fbf8 18% 100%); }
  .hub-airspace-column::before { position:absolute; right:-4px; bottom:17%; left:-4px; border-top:2px solid var(--text-2); content:""; }
  .hub-airspace-level-labels { display:flex; flex-direction:column; justify-content:space-between; color:var(--text-1); font-size:12px; font-variant-numeric:tabular-nums; }
  .hub-airspace-close { min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-1); cursor:pointer; }
  .hub-airspace-close:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-metar-summary { margin-top:8px; padding:7px 8px; border-radius:var(--r-2); background:var(--surface-0); color:var(--text-2); font-size:12px; line-height:1.45; }
  .hub-metar-summary strong { color:var(--text-1); }
  .hub-metar-button { min-height:27px; margin-top:3px; padding:3px 7px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface-0); color:var(--text-accent); font:inherit; cursor:pointer; }
  .hub-squawk-alert { position:static; width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #a3262d; border-radius:var(--r-2); background:#8f1f28; color:#fff; box-shadow:var(--elev-2); font-size:12px; font-weight:700; }
  .hub-squawk-alert button { min-height:36px; min-width:44px; flex:none; border:1px solid #ffd9d9; border-radius:var(--r-2); background:var(--surface-1); color:#74202a; cursor:pointer; }
  .hub-squawk-alert button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  .hub-inspector { background:var(--glass-bg); position:absolute; z-index:5; top:54px; right:12px; display:grid; width:min(330px,calc(100% - 24px)); max-height:calc(100% - 66px); grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid var(--glass-line); border-radius:var(--r-3); box-shadow:var(--glass-reflect), var(--elev-2); }
  .hub-procedure { padding:13px 14px 11px; border-bottom:1px solid var(--line); }
  .hub-procedure h2 { margin:0 0 10px; font-size:15px; }
  .hub-procedure-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .hub-procedure-controls label { display:grid; min-width:0; gap:4px; color:var(--text-muted); font-size:12px; }
  .hub-procedure-controls select { width:100%; min-width:0; min-height:36px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-1); font:inherit; font-size:12px; }
  .hub-procedure-controls select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-chart-control { margin-top:8px; }
  .hub-map-selectors { position:absolute; z-index:7; top:10px; right:12px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 24px); }
  .hub-map-selectors select,.hub-map-selectors label,.hub-map-selectors button { min-height:32px; margin:0; padding:5px 8px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--glass-bg); color:var(--text-1); font-size:12px; }
  .hub-map-selectors button { cursor:pointer; font-weight:700; }
  .hub-map-selectors label { display:inline-flex; align-items:center; gap:5px; }
  .hub-map-selectors input { width:15px; height:15px; margin:0; }
  .hub-map-selectors #hub-aircraft-3d-mode { max-width:125px; }
  .hub-metar-control { margin-top:4px; }
  .hub-metar-control button { justify-self:start; }
  .hub-terrain-pick { padding:8px 12px; border-bottom:1px solid var(--line); }
  .hub-terrain-pick label { display:grid; gap:4px; color:var(--text-muted); font-size:12px; font-weight:700; }
  .hub-terrain-pick select { width:100%; min-height:36px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-1); font:inherit; font-size:13px; }
  .hub-terrain-pick select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-config-combo-label { display:grid; gap:4px; margin-top:8px; color:var(--text-muted); font-size:12px; }
  .hub-config-combo-label select { min-height:34px; padding:5px 8px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-1); font:inherit; font-size:12px; }
  .hub-vector-control { margin-top:8px; }
  .hub-vector-control label { display:grid; gap:4px; color:var(--text-muted); font-size:12px; }
  #hub-map .maplibregl-popup-content { padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-3); background:var(--surface-1); box-shadow:var(--elev-2); }
  #hub-map .maplibregl-popup-close-button { z-index:2; width:30px; height:30px; color:var(--text-2); font-size:22px; }
  .hub-aircraft-popup .maplibregl-popup-content { cursor:auto; user-select:text; touch-action:pan-y; }
  .hub-aircraft-card h3,.hub-aircraft-card .hub-aircraft-sub { cursor:grab; user-select:none; touch-action:none; }
  #hub-map .hub-aircraft-popup > .maplibregl-popup-close-button { pointer-events:auto; position:absolute; top:0; right:0; z-index:4; cursor:pointer; background:var(--glass-bg-solid); border-radius:0 var(--r-3) 0 var(--r-1); }
  .hub-aircraft-leader { position:absolute; z-index:8; inset:0; overflow:visible; pointer-events:none; }
  .hub-aircraft-leader line { stroke:var(--focus-ring); stroke-width:1.5; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
  .hub-aircraft-leader circle { fill:var(--focus-ring); stroke:#fff; stroke-width:1.4; vector-effect:non-scaling-stroke; }
  .hub-glide-profile { margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--text-2); font-size:12px; }
  .hub-glide-profile svg { display:block; width:100%; height:auto; margin-top:4px; }
  .hub-glide-profile svg text { fill:#405a55; font:12px var(--font-ui); }
  .hub-approach-profile { width:min(360px,calc(100vw - 32px)); padding:10px; color:var(--text-1); font:12px/1.35 var(--font-ui); }
  .hub-approach-profile h3 { margin:0 24px 5px 0; font-size:13px; }
  .hub-approach-profile svg { display:block; width:100%; height:auto; background:var(--surface-0); border-radius:var(--r-2); }
  .hub-approach-profile svg text { fill:#405a55; font:12px var(--font-ui); }
  .hub-approach-profile .beam { fill:#e6b74055; stroke:#a77812; stroke-width:1.4; }
  .hub-approach-profile .aircraft-dot { fill:var(--focus-ring); stroke:#fff; stroke-width:2; }
  /* Fiche : une seule surface. Les sections sont séparées par 12 px et un filet, sans encadré ni bande (CSS seul : le DOM généré et sa réconciliation ne changent pas). */
  .hub-aircraft-card { width:min(330px,calc(100vw - 44px)); padding:12px; color:var(--text-1); font:13px/1.4 var(--font-ui); font-variant-numeric:tabular-nums; }
  .hub-aircraft-card > :is(section,details,dl,div) { margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); }
  .hub-aircraft-card h3 { margin:0; padding-right:24px; font-size:18px; line-height:1.15; }
  .hub-aircraft-card .hub-aircraft-sub { margin:4px 0 8px; color:var(--text-2); font-size:13px; }
  .hub-aircraft-card .hub-aircraft-route { display:grid; gap:2px; font-size:13px; font-weight:700; }
  .hub-aircraft-card .hub-aircraft-route small { color:var(--text-2); font-size:13px; font-weight:400; }
  .hub-aircraft-arrival { display:grid; gap:4px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .hub-aircraft-arrival small,.hub-aircraft-arrival span { color:var(--text-2); font-size:13px; line-height:1.35; }
  .hub-aircraft-arrival strong { color:var(--text-accent); font-size:13px; }
  .hub-aircraft-arrival small::before,.hub-aircraft-trend strong::before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:var(--r-pill); background:var(--traffic-arrival); }
  .hub-aircraft-arrival.muted small::before { background:var(--line-strong); }
  .hub-aircraft-card .hub-aircraft-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
  .hub-aircraft-card .hub-aircraft-stat small { display:block; color:var(--text-2); font-size:13px; text-transform:none; }
  .hub-aircraft-card .hub-aircraft-stat strong { display:block; margin-top:2px; font-size:15px; font-variant-numeric:tabular-nums; }
  .hub-aircraft-card .hub-key-stat[data-field="baro-altitude"] { margin:-6px; padding:6px; border-radius:var(--r-2); background:var(--surface-0); }
  .hub-aircraft-card .hub-key-stat .hub-key-sub { display:block; margin-top:2px; color:var(--text-2); font-size:13px; line-height:1.3; }
  .hub-aircraft-card .hub-card-details > summary { cursor:pointer; font-size:13px; font-weight:600; min-height:24px; }
  .hub-aircraft-card .hub-card-details > :is(dl,div,p) { margin:12px 0 0; }
  .hub-aircraft-card .hub-card-head [data-live=freshness] { flex-basis:100%; margin:0 0 8px; }
  .hub-aircraft-card .hub-key-note { margin:8px 0 0; font-size:13px; }
  .hub-aircraft-card .hub-adsb-visible h4 { margin:0 0 8px; font-size:13px; }
  .hub-aircraft-card .hub-adsb-visible dl { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin:0; }
  .hub-aircraft-card .hub-adsb-visible dt { color:var(--text-2); font-size:13px; }
  .hub-aircraft-card .hub-adsb-visible dd { margin:0; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
  .hub-aircraft-card .hub-aircraft-trend.descending strong::before { background:var(--state-warn); }
  .hub-aircraft-card .hub-aircraft-trend.unknown strong::before { background:var(--line-strong); }
  .hub-aircraft-card .hub-aircraft-note { margin:8px 0 0; color:var(--text-2); font-size:13px; }
  .hub-aircraft-card .hub-card-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
  .hub-aircraft-card .hub-card-head h3 { flex:1 1 auto; font-size:22px; }
  .hub-aircraft-card .hub-card-flight { color:var(--text-2); font-size:13px; font-weight:600; }
  .hub-aircraft-card .hub-card-head .hub-aircraft-sub { flex-basis:100%; margin:0 0 8px; }
  .hub-aircraft-card .hub-card-badge { padding:1px 6px; border-radius:var(--r-1); background:var(--line); color:var(--text-1); font-size:13px; font-weight:700; }
  .hub-aircraft-card .hub-card-badge.stale { background:#f6e3d6; color:var(--state-stale); }
  .hub-aircraft-card .hub-card-route { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .hub-aircraft-card .hub-card-end { display:grid; gap:1px; min-width:0; }
  .hub-aircraft-card .hub-card-end strong { font-size:22px; line-height:1.1; }
  .hub-aircraft-card .hub-card-end span { color:var(--text-2); font-size:13px; font-weight:400; overflow:hidden; text-overflow:ellipsis; }
  .hub-aircraft-card .hub-card-identity { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
  .hub-aircraft-card .hub-card-identity dt { color:var(--text-2); font-size:13px; }
  .hub-aircraft-card .hub-card-identity dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
  .hub-aircraft-card .hub-card-squawk.alert dd { color:var(--traffic-emergency); }
  .hub-aircraft-card .hub-card-analysis > summary { cursor:pointer; font-weight:700; }
  #hub-chart-info { margin:6px 0 0; color:var(--text-2); font-size:12px; line-height:1.4; }
  .hub-procedure-note { margin:6px 0 0; color:var(--text-2); font-size:12px; line-height:1.35; }
  .hub-traffic { min-height:0; overflow:auto; }
  .hub-traffic summary { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; padding:10px 14px; background:var(--glass-bg-solid); color:var(--text-1); font-size:13px; font-weight:700; cursor:pointer; }
  .hub-flights { display:grid; grid-template-rows:auto minmax(0,1fr); padding:0 13px 8px; }
  .hub-section-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 0 7px; }
  .hub-section-head h2 { margin:0; font-size:15px; }
  .hub-section-head p { margin:3px 0 0; color:var(--text-2); font-size:12px; }
  .hub-flight-count { padding:4px 8px; border-radius:var(--r-pill); background:var(--accent-fill-1); color:var(--text-accent); font-size:12px; font-weight:700; white-space:nowrap; }
  .hub-flight-list { display:grid; min-height:0; max-height:min(52vh,420px); overflow-y:auto; grid-template-rows:none; }
  .hub-flight-row:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; background:var(--surface-0); cursor:pointer; }
  .hub-flight-row { cursor:pointer; }
  .visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .hub-flight-filter input { width:100%; box-sizing:border-box; margin:0 0 6px; }
  .hub-flight-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:8px; align-items:center; min-width:0; min-height:var(--hub-tap,44px); padding:4px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
  .hub-airline { display:grid; width:30px; height:30px; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-accent); font-size:12px; font-weight:700; }
  .hub-airline img { width:100%; height:100%; padding:3px; object-fit:contain; }
  .hub-flight-main { display:grid; min-width:0; gap:2px; }
  .hub-flight-main strong { overflow:hidden; color:var(--text-1); font-size:12px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
  .hub-flight-main span { overflow:hidden; color:var(--text-2); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
  .hub-distance { justify-self:end; color:var(--text-accent); text-align:right; white-space:nowrap; }
  .hub-distance strong { display:block; font-size:12px; font-variant-numeric:tabular-nums; }
  .hub-distance small { color:var(--text-2); font-size:12px; }
  .hub-empty { max-width:300px; margin:15px auto; color:var(--text-muted); font-size:12px; line-height:1.5; text-align:center; }
  @media (max-width: 900px) {
    body.hub-mode { height: auto; overflow: auto; }
    body.hub-mode .hub-view:not([hidden]) { min-height: 100vh; height: auto; }
    .hub-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(460px,1fr) auto; }
    .hub-radar { grid-column:1; grid-row:1; min-height:460px; }
    .hub-inspector { top:auto; right:8px; bottom:8px; left:8px; width:auto; max-height:46%; }
    .hub-map-toggles { max-height:44%; max-width:min(250px,calc(100% - 16px)); top:54px; left:8px; }
    .hub-airspace-detail { top:54px; right:8px; left:auto; width:min(280px,calc(100% - 270px)); max-height:42%; }
    .hub-map-selectors { top:8px; right:8px; left:8px; justify-content:flex-end; }
    .hub-map-selectors label { padding:4px 6px; font-size:12px; }
    .hub-flight-list { grid-template-rows:none; }
  }
  @media (max-height: 700px) and (min-width: 901px) {
    body.hub-mode .hub-view:not([hidden]) { padding-top: 12px; gap: 9px; }
    .hub-layout { grid-template-rows:minmax(0,1fr); gap:6px; }
    .hub-flight-list { grid-template-rows:none; max-height:30vh; }
    .hub-flight-row { padding-block:2px; }
  }

  /* One bounded settings panel; the map and its controls always have their own area. */
  body.hub-mode { height:100dvh; overflow:hidden; }
  body.hub-mode .hub-view:not([hidden]) { height:100dvh; min-height:0; }
  .hub-layout { grid-template-columns:minmax(0,1fr) minmax(290px,330px); grid-template-rows:minmax(0,1fr); }
  .hub-layout.panel-closed { grid-template-columns:minmax(0,1fr); }
  .hub-inspector { position:relative; grid-column:2; grid-row:1; inset:auto; display:block; width:auto; min-height:0; max-height:100%; height:100%; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  .hub-inspector[hidden] { display:none; }
  .hub-inspector-head { position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--glass-bg); }
  .hub-inspector-head h2 { margin:0; font-size:15px; }
  .hub-inspector-head button { min-height:34px; padding:5px 10px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--glass-bg-solid); color:var(--text-1); font:600 12px var(--font-ui); cursor:pointer; }
  .hub-map-actions button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:var(--hub-tap); min-height:var(--hub-tap); padding:5px 10px; border:1px solid transparent; border-radius:var(--r-pill); background:transparent; color:var(--text-1); font:600 12px var(--font-ui); white-space:nowrap; cursor:pointer; transition:background-color .15s; }
  .hub-inspector-head button { min-width:34px; line-height:1; }
  .hub-inspector-head button:focus-visible,.hub-map-actions button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-map-actions { position:absolute; z-index:10; top:10px; left:50%; transform:translateX(-50%); display:flex; align-items:center; flex-wrap:nowrap; gap:2px; max-width:calc(100% - 28px); padding:4px; border:1px solid var(--glass-line); border-radius:var(--r-pill); background:var(--glass-bg); box-shadow:var(--glass-reflect), var(--elev-1); }
  .hub-map-title { max-width:calc(100% - 220px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
  .hub-map-title span { font-size:12px; }
  #hub-map .maplibregl-ctrl-top-right { top:54px; }
  .hub-map-selectors { position:static; display:grid; grid-template-columns:1fr 1fr; max-width:none; padding:0 9px 10px; gap:6px; }
  .hub-map-selectors label { display:grid; gap:4px; min-width:0; padding:6px; font-size:12px; }
  .hub-map-selectors label:has(input) { display:flex; }
  .hub-map-selectors select { width:100%; min-width:0; padding:4px; font-size:12px; }
  .hub-map-selectors #hub-aircraft-3d-mode { max-width:none; }
  .hub-map-toggles { position:static; display:flex; gap:6px; width:100%; max-width:none; max-height:none; overflow:visible; padding:9px; }
  .hub-filter-group { flex:none; box-shadow:none; }
  .hub-filter-group > summary { min-height:34px; padding:8px; }
  .hub-filter-options label { font-size:12px; }
  .hub-inspector .hub-airspace-detail { position:static; width:auto; max-height:none; margin:8px; box-shadow:none; }
  .hub-procedure { padding:10px 12px; }
  .hub-procedure h2 { font-size:15px; }
  .hub-procedure-controls:has(#hub-runway) { grid-template-columns:1fr; }
  .hub-traffic{ max-height:none; overflow:visible; }
  .hub-traffic summary { position:static; }
  .hub-flight-list { grid-template-rows:none; }
  .hub-map-info { right:54px; max-height:44px; overflow:hidden; }
  .hub-approach-profile-popup { max-width:var(--hub-popup-width,390px)!important; }
  #hub-map .hub-approach-profile-popup .maplibregl-popup-content { max-width:var(--hub-popup-width,390px); max-height:var(--hub-popup-max-height,calc(100dvh - 190px)); overflow:auto; overscroll-behavior:contain; }
  .hub-approach-profile-popup .hub-approach-profile { box-sizing:border-box; width:min(360px,calc(var(--hub-popup-width,390px) - 24px)); }
  .hub-aircraft-popup { max-width:var(--hub-popup-width,360px)!important; }
  #hub-map .hub-aircraft-popup .maplibregl-popup-content { max-width:var(--hub-popup-width,360px); max-height:var(--hub-popup-max-height,calc(100dvh - 190px)); overflow:auto; overscroll-behavior:contain; }
  .hub-aircraft-popup .hub-aircraft-card { width:330px; max-width:var(--hub-popup-width,330px); }
  /* Ancre « center » : la pointe MapLibre (20 px, flex) décalait le centre de l'élément de 10 px par rapport au contenu et faussait l'écart de 18 px. */
  .hub-aircraft-popup .maplibregl-popup-tip { display:none; }
  .hub-aircraft-popup .maplibregl-popup-content { cursor:auto; touch-action:pan-y; }
  .hub-aircraft-popup h3,.hub-aircraft-popup .hub-aircraft-sub { cursor:grab; touch-action:none; }
  @media (max-width:900px) {
    body.hub-mode .hub-view:not([hidden]) { padding:6px; gap:5px; }
    .hub-head { gap:8px; padding-bottom:5px; }
    .hub-head h1 { font-size:15px; }
    .hub-subtitle { font-size:12px; }
    .hub-live-meta { font-size:12px; gap:3px; }
    .hub-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(190px,1fr) minmax(0,42%); gap:6px; }
    .hub-layout.panel-closed { grid-template-rows:minmax(0,1fr); }
    .hub-radar { min-height:0; }
    .hub-inspector { grid-column:1; grid-row:2; inset:auto; width:100%; max-height:100%; }
    .hub-map-toggles { max-width:none; max-height:none; }
    .hub-map-selectors { inset:auto; }
    .hub-map-title { top:10px; left:8px; max-width:calc(100% - 198px); padding:7px; }
    .hub-map-title span { display:none; }
    .hub-map-info { font-size:12px; left:8px; padding:4px 6px; }
  }

  .hub-ground-popup { max-width:min(300px,var(--hub-popup-width,300px))!important; }
  #hub-map .hub-ground-popup .maplibregl-popup-content { box-sizing:border-box; width:300px; max-width:var(--hub-popup-width,300px); max-height:var(--hub-popup-max-height,70vh); overflow:auto; }
  .hub-airport-popup { max-width:min(340px,var(--hub-popup-width,340px))!important; }
  #hub-map .hub-airport-popup .maplibregl-popup-content { box-sizing:border-box; width:340px; max-width:var(--hub-popup-width,340px); max-height:var(--hub-popup-max-height,70vh); overflow:auto; }
  .hub-airport-popup details { margin-top:10px; }.hub-airport-popup summary { cursor:pointer; font-weight:600; }.hub-airport-popup ul { padding-left:16px; font-size:12px; }.hub-airport-popup li { margin:6px 0; }
  .hub-airport-flight { padding:12px 0 0; margin:12px 0 0; border-top:1px solid var(--line); font-size:12px; }.hub-airport-flight h4 { margin:0 0 5px; }.hub-airport-flight p { margin:5px 0; }
  /* Settings overlay: opening it never changes the map rectangle or camera. */
  .hub-layout,.hub-layout.panel-closed { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .hub-inspector { position:absolute; z-index:10; grid-column:auto; grid-row:auto; top:64px; right:8px; bottom:8px; left:auto; width:min(350px,calc(100% - 16px)); height:auto; max-height:none; }
  .hub-3d-note { grid-column:1/-1; margin:0 4px; font-size:12px; color:var(--text-muted); }
  .hub-cockpit { position:absolute; z-index:7; inset:0; pointer-events:none; border:solid #142b2b55; border-width:0 10px 12px; }
  .hub-cockpit[hidden] { display:none; }
  .hub-cockpit-cross { position:absolute; top:50%; left:50%; color:#b9f3c9; filter:drop-shadow(0 1px 1px #000); line-height:0; transform:translate(-50%,-50%); }.hub-cockpit-cross .hub-ico { width:32px; height:32px; }
  .hub-cockpit-instruments { position:absolute; top:8px; left:8px; width:min(300px,calc(100% - 28px)); max-height:calc(100% - 150px); overflow:auto; box-sizing:border-box; padding:8px; border:1px solid #688c80; border-radius:var(--r-2); background:#102b26dd; color:#d7f4df; font:12px/1.4 var(--font-ui); }
  .hub-wing-banner { position:absolute; top:64px; left:50%; transform:translateX(-50%); max-width:calc(100% - 28px); box-sizing:border-box; margin:0; padding:5px 9px; border:1px dashed #e0d793; border-radius:var(--r-1); color:#f3ecb4; background:#142b2bcc; font:12px/1.35 var(--font-ui); text-align:center; }
  .hub-wing-banner[hidden] { display:none; }
  .hub-wing-view .hub-cockpit-instruments,.hub-wing-view .hub-cockpit-cross { display:none; }
  .hub-cockpit-banner { margin:0 0 6px; padding:4px 6px; border:1px dashed #e0d793; border-radius:var(--r-1); color:#f3ecb4; font:12px/1.35 var(--font-ui); }
  .hub-instrument-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  .hub-instrument { padding:3px 5px; border:1px solid #3f6a5e; border-radius:var(--r-1); background:#0b1f1b; }
  .hub-instrument small,.hub-instrument em { display:block; color:#9fc4b4; font:12px/1.3 var(--font-ui); font-style:normal; }
  .hub-instrument strong { display:block; font-variant-numeric:tabular-nums; font-size:12px; overflow-wrap:anywhere; }
  .hub-instrument.is-unknown strong { color:#b9a98f; font-weight:400; font-style:italic; }
  .hub-instrument[data-instrument="selected"],.hub-instrument[data-instrument="modes"],.hub-instrument[data-instrument="pitch"] { grid-column:1/-1; }
  .hub-instrument-fresh { grid-column:1/-1; margin:2px 0 0; font:12px/1.3 var(--font-ui); color:#9fc4b4; }.hub-instrument-fresh.is-stale { color:#ffd27a; font-weight:700; }
  @media(max-width:650px){.hub-cockpit-instruments { max-height:38%; }.hub-instrument-grid { grid-template-columns:1fr; }}
  .hub-cockpit-strip { position:absolute; bottom:48px; left:50%; transform:translateX(-50%); max-width:calc(100% - 24px); display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid #688c80; border-radius:var(--r-2); background:#102b26e8; color:#d7f4df; font:12px/1.5 var(--font-ui); }
  .hub-closure-title { margin:6px 0 2px; font-size:12px; }.hub-closure-list { margin:2px 0 6px 14px; padding:0; font-size:12px; }.hub-closure-unknown { border-left:3px solid var(--line-strong); padding-left:6px; list-style:none; margin-left:0; }.hub-closure-explicit { color:inherit; }
  .hub-history-badge { margin:0; padding:3px 6px; border-radius:var(--r-1); background:var(--sim-surface); color:var(--traffic-sim); font-size:12px; font-weight:700; }.hub-history-form { display:grid; gap:6px; }.hub-history-form label { display:grid; gap:2px; font-size:12px; }.hub-filter-options .hub-history-form input { width:100%; height:auto; min-width:0; box-sizing:border-box; padding:5px; border:1px solid var(--line-strong); border-radius:var(--r-2); font:inherit; }.hub-history-form button,#hub-history-more,.hub-history-replay { min-height:34px; padding:5px 10px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--glass-bg-solid); color:var(--text-1); font:600 12px var(--font-ui); cursor:pointer; }.hub-history-form button:focus-visible,#hub-history-more:focus-visible,.hub-history-replay:focus-visible,.hub-history-form input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }.hub-history-status { margin:2px 0; font-size:12px; }.hub-history-status[data-tone="error"] { color:var(--traffic-emergency); }.hub-history-list { margin:0; padding:0; list-style:none; display:grid; gap:6px; }.hub-history-item { display:flex; gap:8px; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; overflow-wrap:anywhere; }.hub-history-item::before { content:""; flex:none; width:8px; height:8px; margin-top:.4em; border-radius:var(--r-pill); background:var(--traffic-sim); }
  .hub-replay-bar { position:absolute; z-index:12; left:8px; right:8px; bottom:42px; display:grid; gap:4px; padding:8px 10px; border:2px solid var(--traffic-sim); border-radius:var(--r-2); background:var(--sim-surface); color:var(--text-1); font:12px var(--font-ui); max-width:640px; }.hub-replay-bar[hidden],.hub-replay-controls[hidden] { display:none; }.hub-replay-title { font-size:12px; }.hub-replay-status { margin:0; font-size:12px; overflow-wrap:anywhere; }.hub-replay-status[data-tone="error"] { color:var(--traffic-emergency); }.hub-replay-controls { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }.hub-replay-controls input[type=range] { flex:1 1 140px; min-width:0; }.hub-replay-bar button { min-height:34px; padding:4px 10px; border:1px solid var(--traffic-sim); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-1); font:600 12px var(--font-ui); cursor:pointer; }.hub-replay-bar button:focus-visible,.hub-replay-bar input:focus-visible,.hub-replay-bar select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  @media (max-width:900px) { .hub-replay-bar { bottom:64px; } }
  .hub-ops-table { overflow-x:auto; max-width:100%; }.hub-ops-table table { border-collapse:collapse; font-size:12px; }.hub-ops-table td,.hub-ops-table th { padding:4px; border-bottom:1px solid var(--line); text-align:left; }.hub-ops-table td small { display:block; }.hub-filter-options ul { padding-left:15px; }
  .hub-cockpit-time { pointer-events:auto; min-width:170px; margin:0; border:1px solid #688c80; border-radius:var(--r-2); padding:4px 8px; font:12px/1.4 var(--font-ui); }.hub-cockpit-time label { display:flex; align-items:center; gap:5px; }.hub-cockpit-time input { width:140px; }.hub-cockpit-time select { padding:3px; }.hub-cockpit-time output,.hub-cockpit-time small { display:block; }.hub-cockpit-time input:focus-visible,.hub-cockpit-time select:focus-visible { outline:2px solid #e0d793; }
  @media(max-width:650px){.hub-cockpit-strip { flex-wrap:wrap; justify-content:center; width:calc(100% - 24px); box-sizing:border-box; }.hub-cockpit-time { flex:1; min-width:140px; }.hub-cockpit-time input { width:100px; }}
  .hub-cockpit-strip strong { display:block; }
  #hub-cockpit-exit { pointer-events:auto; white-space:nowrap; border:1px solid #b3cfc2; border-radius:var(--r-2); padding:7px; color:#e3f4ec; background:#31584e; cursor:pointer; }
  .hub-aircraft-cockpit { margin:8px 0; width:100%; min-height:34px; border:1px solid #6f9688; border-radius:var(--r-2); color:var(--text-1); background:var(--accent-fill-1); cursor:pointer; }
  .hub-extra-data summary { cursor:pointer; padding:8px 0; font-weight:600; }
  .hub-extra-data dl { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin:4px 0; font-size:12px; }
  .hub-extra-data dt { color:var(--text-muted); }.hub-extra-data dd { margin:0; text-align:right; }
  @media(max-width:900px) {
    .hub-layout,.hub-layout.panel-closed { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
    .hub-inspector { top:auto; right:8px; bottom:8px; left:auto; width:min(350px,calc(100% - 16px)); max-height:60%; height:auto; }
    .hub-cockpit-strip { bottom:46px; font-size:12px; gap:6px; padding:6px; }
  }

  body.hub-mode .hub-view:not([hidden]) { padding:6px 8px 5px; gap:4px; }
  .hub-head { padding-bottom:4px; }
  .hub-live-meta { grid-template-columns:auto auto; gap:3px 12px; }
  #hub-service-status { grid-column:1 / -1; }
  #hub-data-time { grid-column:1 / -1; font-size:12px; }.hub-subtitle { font-size:12px; }
  .hub-radar,#hub-map { overflow:visible; }
  #hub-map .maplibregl-canvas-container { width:100%; height:100%; overflow:hidden; }
  .hub-map-actions button[hidden] { display:none; }
  .hub-map-title { max-width:calc(100% - 300px); }
  .hub-aircraft-leader { z-index:5; }
  .hub-aircraft-leader line { stroke-dasharray:none; }
  .hub-layout.hub-map-focus { position:fixed; inset:0; z-index:40; background:var(--surface-0); }
  .hub-map-focus .hub-radar { border-radius:0; }
  .hub-radio-name { font-size:12px; font-weight:600; color:var(--text-2); }
  .hub-celestial-info { position:absolute; bottom:48px; left:10px; z-index:3; max-width:calc(100% - 24px); display:grid; gap:2px; border:1px solid var(--glass-line); border-radius:var(--r-2); padding:8px; color:var(--text-1); background:var(--glass-bg); box-shadow:var(--glass-reflect), var(--elev-1); font-size:12px; pointer-events:none; }
  .hub-celestial-info[data-preview="true"] { border-color:#ac7b2d; background:#fff3dcf0; }
  .hub-celestial-info[hidden],.hub-sky-body[hidden] { display:none; }
  .hub-sky-body { position:absolute; z-index:1; pointer-events:none; transform:translate(-50%,-50%); line-height:0; }
  .hub-sky-svg { display:block; width:28px; height:28px; }
  .hub-ico { display:inline-block; flex:none; width:20px; height:20px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
  .hub-celestial-line { display:flex; align-items:center; gap:8px; }.hub-celestial-line .hub-ico { width:16px; height:16px; }
  @media(max-width:900px){.hub-map-title { max-width:calc(100% - 290px); min-width:42px; }.hub-head h1 { font-size:15px; }.hub-live-meta { gap:2px 5px; font-size:12px; }}
  .hub-legend { background:var(--glass-bg); position:absolute; z-index:12; top:64px; right:8px; width:min(370px,calc(100% - 16px)); max-height:calc(100% - 100px); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--glass-line); border-radius:var(--r-3); color:var(--text-1); box-shadow:var(--glass-reflect), var(--elev-2); font-size:12px; }
  .hub-legend[hidden] { display:none; }
  .hub-legend header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:transparent; }
  .hub-legend h2 { margin:0; font-size:15px; }
  .hub-legend header button { min-width:34px; min-height:34px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-1); cursor:pointer; }
  .hub-legend button:focus-visible,.hub-legend summary:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-legend-content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:5px 12px 12px; }
  .hub-legend-group { border-bottom:1px solid var(--line); }
  .hub-legend-group summary { cursor:pointer; padding:9px 0; font-weight:700; }
  .hub-legend-group ul { list-style:none; padding:0; margin:0 0 9px; }
  .hub-legend-group li { display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; gap:7px; margin:7px 0; }
  .hub-legend-group li strong { font-weight:600; }.hub-legend-group li small { display:block; color:var(--text-2); font-size:12px; line-height:1.35; }
  .hub-legend-key { justify-self:center; width:11px; height:11px; border:1px solid #ffffff; border-radius:50%; background:var(--key-color); }
  .hub-legend-key.line,.hub-legend-key.dashed { width:24px; height:0; border:0; border-top:2px solid var(--key-color); border-radius:0; background:none; }
  .hub-legend-key.dashed { border-top-style:dashed; }.hub-legend-key.cross { border:0; width:22px; height:22px; background:none; color:var(--key-color); font:25px/20px monospace; text-align:center; }
  .hub-legend-families { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:8px 0 12px; font-size:12px; }
  .hub-legend-families span { display:grid; justify-items:center; gap:2px; }.hub-legend-families img { width:30px; height:30px; }
  .hub-legend-group dl { display:grid; grid-template-columns:85px minmax(0,1fr); gap:7px; margin:0 0 12px; font-size:12px; }.hub-legend-group dt { font-weight:700; }.hub-legend-group dd { margin:0; }
  .hub-legend-note { margin:10px 0 0; color:var(--text-muted); font-size:12px; line-height:1.45; }
  @media(max-width:900px){.hub-legend-word { display:none; }.hub-map-title { max-width:calc(100% - 330px); }.hub-legend { max-height:calc(100% - 100px); }.hub-legend header button { min-width:44px; min-height:44px; }.hub-legend-open .hub-aircraft-popup,.hub-legend-open .hub-aircraft-leader { visibility:hidden; }}
  /* Charte : jetons du Hub (docs plan F). Texte >= 4.5:1 au pire cas (verre clair composé sur noir, verre sombre sur blanc) ; --brand-accent réservé aux traits et icônes (>= 3:1). */
  body.hub-mode {
    --brand-ink:#102c35; --brand-mint:#36d3aa; --brand-accent:#0e8e76; --brand-line:#c9dad3; --font-ui:"Segoe UI",system-ui,sans-serif; font-family:var(--font-ui);
    --text-1:#102c35; --text-2:#435b57; --text-muted:#4f6762; --text-accent:#06705e; --focus-ring:#087b68;
    --traffic-arrival:#17672f; --traffic-departure:#1a5ca8; --traffic-enroute:#525e66; --traffic-sim:#6a4bc4; --traffic-emergency:#b42323; --state-warn:#7a5000; --state-stale:#8a3b12;
    --surface-0:#edf3f0; --surface-1:#ffffff; --line:#c9dad3; --line-strong:#6a877d;
    --glass-bg:rgba(251,252,250,.92); --glass-bg-solid:#fbfcfa; --glass-blur:18px; --glass-saturate:1.1;
    --glass-reflect:inset 0 1px 0 rgba(255,255,255,.6); --glass-shadow:0 1px 2px rgba(16,44,53,.10), 0 8px 24px rgba(16,44,53,.12);
    --glass-line:rgba(16,44,53,.14);
    --elev-1:0 1px 2px rgba(16,44,53,.12), 0 2px 6px rgba(16,44,53,.08); --elev-2:var(--glass-shadow);
    --r-1:4px; --r-2:8px; --r-3:14px; --r-pill:999px;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
    --accent-fill-1:rgba(8,123,104,.12); --accent-fill-2:rgba(8,123,104,.18); --sim-surface:#f5f1fc;
    color-scheme:light;
  }
  .hub-head h1 { display:flex; align-items:center; gap:8px; letter-spacing:-.6px; color:var(--brand-ink); }
  .hub-brand-mark { flex:none; border-radius:var(--r-2); }
  .hub-cockpit-values,.hub-aircraft-stats strong,.hub-flight-row,#hub-data-time,#hub-clock,.hub-metar-summary,.hub-visible-values,.hub-source-health li,.hub-history-item { font-variant-numeric:tabular-nums; }
  .hub-aircraft-photo { margin:12px 0 0; background:var(--surface-0); border-radius:var(--r-2); overflow:hidden; }
  .hub-aircraft-photo img { display:block; width:100%; max-height:148px; object-fit:cover; }
  .hub-aircraft-photo figcaption { padding:4px 7px; color:var(--text-2); font-size:13px; }
  .hub-approach-profile .profile-terrain { fill:#a5b8a777; stroke:#667f68; stroke-width:1.2; }
  .hub-approach-profile .profile-town { fill:#3c5645; font-size:12px; paint-order:stroke; stroke:#f5f7f5; stroke-width:2px; }
  .profile-source { display:block; margin-top:4px; font-size:12px; color:var(--text-muted); }
  #hub-map .maplibregl-popup { z-index:6; }
  .hub-aircraft-leader { z-index:3; }.hub-aircraft-leader line { stroke-dasharray:none; stroke-width:1.4; }
  /* Verre : un seul matériau (fond --glass-bg, filet --glass-line, reflet, flou 18 px) pour ce qui flotte sur la carte : capsule, dock, inspecteur, légende, info carte, crédits. Repli opaque si la transparence ou le mouvement sont réduits. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hub-inspector, .hub-legend, .hub-map-info, .hub-map-actions, .hub-dock-btn, .hub-attribution-toggle, .hub-attribution-persistent span { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
  }
  @media (prefers-reduced-transparency: reduce) { body.hub-mode { --glass-bg:var(--glass-bg-solid); } }
  @media (prefers-reduced-motion: reduce) { body.hub-mode { --glass-bg:var(--glass-bg-solid); } }
  @media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
    .hub-inspector, .hub-legend, .hub-map-info, .hub-map-actions, .hub-dock-btn, .hub-attribution-toggle, .hub-attribution-persistent span { -webkit-backdrop-filter:none; backdrop-filter:none; }
  }
  /* F-A2 : commandes en capsule flottante (haut, centre) ; panneaux superposés sous la capsule. Aucune règle ne touche au rectangle de la carte. */
  :root { --hub-tap: 44px; --hub-focus: var(--focus-ring, #087b68); }
  .hub-map-actions button:hover { background:var(--accent-fill-1); }
  .hub-map-actions button[aria-expanded="true"], .hub-map-actions button[aria-pressed="true"] { background:var(--accent-fill-2); border-color:rgba(8,123,104,.45); }
  .hub-map-actions button:focus-visible, .hub-inspector-head button:focus-visible, .hub-legend header button:focus-visible { outline:2px solid var(--hub-focus); outline-offset:2px; }
  .hub-inspector, .hub-legend { right:12px; }
  .hub-inspector-head button, .hub-legend header button { min-height:var(--hub-tap); min-width:var(--hub-tap); }
  /* F-A3 : options rangées sur 4 niveaux (capsule, Affichage, Couches repliées, Avancé replié). */
  details.hub-level > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:var(--hub-tap); padding:8px 12px; border-top:1px solid var(--line); background:transparent; color:var(--text-1); font-size:13px; font-weight:700; cursor:pointer; }
  details.hub-level > summary:focus-visible { outline:2px solid var(--hub-focus); outline-offset:-2px; }
  .hub-badge { min-width:1.6em; padding:1px 8px; border-radius:var(--r-pill); background:var(--accent-fill-2); color:var(--text-1); font-size:12px; font-weight:700; text-align:center; }
  .hub-badge:empty { display:none; }
  .hub-level-diag { padding:4px 12px; }
  /* F-A4 : mobile, commandes en capsule basse et panneau en feuille basse à trois crans (aperçu, moitié, plein). Aucune règle ne redimensionne la carte. */
  .hub-sheet-snap { display:none; }
  @media (max-width: 900px) {
    .hub-map-actions { top:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); max-width:calc(100% - 16px); }
    .hub-map-info { bottom:calc(112px + env(safe-area-inset-bottom, 0px)); right:54px; }
    .hub-inspector, .hub-legend { top:auto; left:8px; right:8px; width:auto; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); border-radius:var(--r-3); }
    .hub-inspector { height:55%; max-height:none; }
    .hub-inspector[data-snap="peek"] { height:30%; }
    .hub-inspector[data-snap="full"] { height:calc(100% - 84px - env(safe-area-inset-bottom, 0px)); }
    .hub-legend { max-height:calc(100% - 100px); }
    .hub-inspector-head { touch-action:none; cursor:grab; }
    .hub-inspector-head::before { content:""; position:absolute; top:5px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:var(--r-1); background:rgba(41,68,64,.35); }
    .hub-inspector-head { position:sticky; padding-top:14px; }
    .hub-sheet-snap { display:inline-block; margin-left:auto; margin-right:6px; }
    .hub-map-actions button { min-width:44px; min-height:44px; padding-inline:10px; }
    .hub-inspector-head button, .hub-legend header button { min-width:44px; min-height:44px; }
  }
  @media (max-width: 480px) { .hub-map-actions button { padding-inline:8px; } .hub-map-title { max-width:calc(100% - 24px); } }
  @media (max-height: 700px) and (max-width: 900px) { .hub-inspector[data-snap="peek"] { height:36%; } }
  /* Lot D : dock de réglages en bas à droite, popovers superposés. Aucune règle ne touche au rectangle de la carte. */
  /* Crédits de la carte : une puce discrète en bas à gauche (le dock reste en bas à droite). Cible de 44 px, texte de 12 px. */
  .hub-attribution { position:absolute; z-index:8; left:10px; bottom:6px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; max-width:calc(100% - 100px); font-size:12px; color:var(--text-2,var(--text-2)); }
  .hub-attribution-toggle { min-height:44px; min-width:44px; padding:0 8px; border:1px solid var(--glass-line); border-radius:var(--r-2); background:var(--glass-bg); box-shadow:var(--glass-reflect), var(--elev-1); color:inherit; font:inherit; cursor:pointer; }
  .hub-attribution-toggle:hover { background:var(--surface-0); }
  .hub-attribution-persistent { display:flex; flex-wrap:wrap; gap:2px 8px; }
  .hub-attribution-persistent span { padding:4px 8px; border:1px solid var(--glass-line); border-radius:var(--r-2); background:var(--glass-bg); box-shadow:var(--glass-reflect), var(--elev-1); }
  .hub-attribution a { color:var(--text-accent); text-decoration:underline; text-underline-offset:2px; }
  .hub-attribution a:focus-visible, .hub-attribution-toggle:focus-visible { outline:3px solid var(--hub-focus,#0e8e76); outline-offset:2px; }
  .hub-attribution-pop { position:absolute; left:0; bottom:100%; width:min(340px,calc(100vw - 24px)); margin-bottom:6px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:var(--r-3); background:var(--glass-bg-solid); box-shadow:var(--elev-2); }
  .hub-attribution-pop[hidden] { display:none; }
  .hub-attribution-pop ul { margin:0 0 6px; padding-left:18px; }
  .hub-attribution-pop li, .hub-attribution-pop p { margin:0; padding:6px 0; line-height:1.3; }
  .hub-attribution-pop a { display:inline-block; min-height:32px; line-height:32px; }
  #hub-data-time[data-age="warn"] { color:var(--state-warn,var(--state-warn)); font-weight:700; }
  #hub-data-time[data-age="stale"] { color:var(--state-stale); font-weight:700; }
  .hub-map-dock { position:absolute; z-index:9; right:10px; bottom:34px; display:flex; flex-direction:column; gap:6px; }
  .hub-dock-btn { display:grid; justify-items:center; align-content:center; gap:2px; min-width:64px; min-height:44px; padding:4px 6px; border:1px solid var(--glass-line); border-radius:var(--r-2); background:var(--glass-bg); color:var(--text-1); font:600 12px var(--font-ui); cursor:pointer; box-shadow:var(--glass-reflect), var(--elev-1); }
  .hub-dock-btn:hover { background:var(--surface-0); }
  .hub-dock-btn[aria-expanded="true"] { background:var(--accent-fill-2); border-color:var(--focus-ring); }
  .hub-dock-btn:focus-visible,.hub-basemap-choice:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .hub-dock-popover { position:absolute; right:calc(100% + 8px); bottom:0; width:min(320px,calc(100vw - 100px)); max-height:60vh; overflow:auto; overscroll-behavior:contain; padding:8px; border:1px solid var(--line); border-radius:var(--r-3); background:var(--glass-bg-solid); color:var(--text-1); box-shadow:var(--elev-2); font-size:12px; }
  .hub-dock-popover[hidden] { display:none; }
  .hub-dock-popover label:not(.visually-hidden) { display:flex; align-items:center; gap:6px; min-height:32px; font-size:12px; }
  .hub-dock-popover select { max-width:100%; min-height:32px; font-size:12px; }
  .hub-dock-popover .hub-filter-group { border-bottom:1px solid var(--line); }
  .hub-dock-popover .hub-filter-group summary { min-height:36px; padding:8px 4px; cursor:pointer; font-weight:700; }
  .hub-basemap-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .hub-basemap-choice { display:grid; justify-items:center; gap:4px; min-height:44px; padding:6px 4px; border:2px solid transparent; border-radius:var(--r-2); background:transparent; color:var(--text-1); font:600 12px var(--font-ui); cursor:pointer; }
  .hub-basemap-choice[aria-pressed="true"] { border-color:var(--focus-ring); background:var(--accent-fill-1); }
  .hub-dock-thumb { display:block; width:30px; height:20px; border:1px solid var(--line-strong); border-radius:var(--r-1); background:#e8eeec; }
  .hub-basemap-choice .hub-dock-thumb { width:56px; height:40px; }
  .hub-dock-thumb[data-basemap-thumb="flat"] { background:linear-gradient(135deg,#f1f3ef 0 45%,#d6e3dd 45% 60%,#f1f3ef 60%); }
  .hub-dock-thumb[data-basemap-thumb="satellite"] { background:linear-gradient(135deg,#3d5a3a,#6b6a4a 55%,#2f4a56); }
  .hub-dock-thumb[data-basemap-thumb="relief"] { background:linear-gradient(135deg,#d8d2b4,#a7b58a 50%,#7e9a7a); }
  .hub-layout:not(.panel-closed) .hub-map-dock { right:min(366px,calc(100% - 16px)); }
  @media (max-width: 900px) {
    .hub-map-dock,.hub-layout:not(.panel-closed) .hub-map-dock { right:8px; bottom:calc(118px + env(safe-area-inset-bottom, 0px)); flex-direction:row; }
    .hub-attribution { bottom:calc(64px + env(safe-area-inset-bottom, 0px)); left:8px; max-width:calc(100% - 16px); }
    .hub-dock-btn { min-width:44px; }
    /* Mobile : popover ancré au-dessus du dock (jamais en position fixe, qui recouvrait les boutons). */
    .hub-dock-popover { position:absolute; right:0; left:auto; bottom:calc(100% + 8px); width:min(340px,calc(100vw - 16px)); max-height:min(50vh,calc(100dvh - 260px)); }
    body.hub-card-open .hub-search { display:none; }
  }
  /* Lisibilité : plancher 12 px sur le bandeau, la carte et le pied (aucune géométrie modifiée). */
  .hub-view small { font-size:12px; }
   .hub-subtitle, .hub-live-meta, #hub-data-time, #hub-clock, #hub-service-status, .hub-map-info, .hub-map-title span { font-size:12px; }
   .hub-subtitle, .hub-live-meta, #hub-data-time, #hub-clock, #hub-service-status, .hub-source-health summary { line-height:1.2; }
  @media (max-width: 900px) {  .hub-subtitle, .hub-live-meta, #hub-data-time, #hub-clock, #hub-service-status, .hub-source-health summary { line-height:1.05; } }
  @media (max-width: 900px) {
    .hub-subtitle, .hub-live-meta, .hub-map-info { font-size:12px; }
  }
  /* Cibles tactiles >= 44 px : zone agrandie par marges négatives, sans modifier la hauteur du bandeau. */
  .hub-source-health summary { display:flex; align-items:center; min-height:44px; margin-block:-12px; box-sizing:border-box; }
  #hub-map .maplibregl-ctrl-group button { width:44px; height:44px; }
  #hub-map .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { width:44px; height:44px; }
  #hub-map .maplibregl-ctrl-attrib a { display:inline-block; padding-block:16px; line-height:12px; }
  @media (pointer: coarse), (max-width: 900px) {
    .hub-source-health ul { top:calc(100% - 12px); }
    /* La liste reste dans la fenêtre : bords fixés à 8 px, position verticale inchangée. */
    .hub-source-health ul { position:fixed; top:auto; left:8px; right:8px; width:auto; box-sizing:border-box; margin-top:0; }
  }
  /* Le tableau des finales défile dans son conteneur au lieu de dépasser du panneau. */
  #hub-arrival-content { min-width:0; max-width:100%; overflow-x:auto; }
  /* Lot 2 accessibilité : cibles >= 44 px (jeton unique --hub-tap), focus visible partout, aucune règle ne touche au rectangle de la carte. */
  #hub-dashboard button, #hub-dashboard select, #hub-dashboard input:not([type=checkbox]):not([type=radio]), #hub-dashboard textarea, #hub-dashboard summary { min-height:var(--hub-tap); box-sizing:border-box; }
  #hub-dashboard button { min-width:var(--hub-tap); }
  #hub-dashboard label:has(> input[type=checkbox]), #hub-dashboard label:has(> input[type=radio]) { min-height:var(--hub-tap); box-sizing:border-box; align-items:center; }
  #hub-dashboard input[type=checkbox], #hub-dashboard input[type=radio] { width:20px; height:20px; flex:none; }
  #hub-dashboard input[type=range] { min-height:var(--hub-tap); }
  #hub-dashboard summary { padding-block:max(8px,calc((var(--hub-tap) - 1.4em) / 2)); }
  #hub-dashboard .hub-source-health summary { padding-block:0; }
  #hub-map .maplibregl-popup-close-button, #hub-map .hub-aircraft-popup > .maplibregl-popup-close-button { width:var(--hub-tap); height:var(--hub-tap); }
  #hub-dashboard .hub-dock-popover [hidden] { display:none !important; }
  /* Focus : anneau à deux tons (vert + liseré blanc), plus spécifique que les anciennes règles input:focus { outline:none }. */
  #hub-dashboard :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible, #hub-map .maplibregl-canvas-container:focus-visible { outline:3px solid var(--hub-focus); outline-offset:2px; box-shadow:0 0 0 2px #fff; }
  #hub-dashboard :is(.hub-squawk-alert,.hub-go-around-alert) button:focus-visible { outline-color:#111; box-shadow:0 0 0 2px #fff; }
  #hub-dashboard details > summary:focus-visible { outline-offset:-3px; }
  #hub-map .maplibregl-canvas:focus-visible { outline:3px solid var(--hub-focus); outline-offset:-3px; }
  /* I5 : à partir de 901 px, la légende ouverte écarte aussi le dock (le panneau le fait déjà) ; aucun recouvrement. */
  @media (min-width: 901px) { .hub-layout.hub-legend-open .hub-map-dock { right:min(386px,calc(100% - 16px)); } }

/* Avions dans l'écran : valeur + provenance (mesuré / calculé / inconnu) */
.hub-visible-list { max-height:40vh; overflow:auto; }
.hub-visible-row { display:block; padding:5px 2px; border-top:1px solid var(--line); cursor:pointer; }
.hub-visible-row:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }
.hub-visible-values { display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:2px; font-size:12px; }
.hub-prov i { font-style:normal; font-size:12px; color:var(--text-2); }
.hub-prov-computed i { text-decoration:underline dotted; }
.hub-prov-unknown b { font-weight:400; color:var(--text-2); }
.hub-card-performance dl { margin:6px 0 0; display:grid; gap:3px; }
.hub-card-performance dl > div { display:flex; justify-content:space-between; gap:8px; }
.hub-route-priors h4 { margin:8px 0 0; font-size:13px; }
.hub-visible > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; }
.hub-visible-row { min-height:44px; box-sizing:border-box; }
  /* Écran de chargement : fond clair identique au Hub (pas de flash sombre), champ ASCII décoratif, retiré au « load » de la carte. */
  .hub-splash { position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:var(--surface-0,var(--surface-0)); opacity:1; transition:opacity .2s ease; }
  .hub-splash.is-leaving { opacity:0; pointer-events:none; }
  .hub-splash-field { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .hub-splash-card { position:relative; display:grid; justify-items:center; gap:8px; padding:20px 28px; border:1px solid var(--line); border-radius:var(--r-3); background:var(--glass-bg-solid,var(--glass-bg-solid)); color:var(--text-1); box-shadow:var(--elev-2); text-align:center; }
  .hub-splash-card img { border-radius:var(--r-3); }
  .hub-splash-card strong { font-size:22px; letter-spacing:-.4px; color:var(--brand-ink); }
  .hub-splash-card span { font-size:13px; color:var(--text-2); }
  .hub-splash-card button { min-height:44px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--surface-1); color:var(--text-1); font:inherit; cursor:pointer; }
  .hub-splash-card button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce) { .hub-splash { transition:none; } }