/* ============================================================
   Thème « Terminal » · Portail Dispatch DexFly (décision Bechir 2026-10-05)
   ------------------------------------------------------------
   Signalétique d'aéroport : anthracite et jaune signal, statuts
   façon écrans d'information des vols (FIDS), Barlow pour le
   texte, Barlow Semi Condensed pour titres, navigation, boutons,
   en-têtes de tableaux, badges et chiffres. Mode NUIT par défaut
   (data-bs-theme="dark" sur <html>, appliqué avant l'affichage
   par portal/_ao_head.html), mode jour au bouton de la barre.

   Ce fichier porte le thème PARTAGÉ avec l'autre application
   d'exploitation de Bechir (préfixe ao-, valeurs du brief) :
     1. les variables --ao-* des deux modes ;
     2. les pièces nouvelles : barre du haut, horloge UTC, bouton
        jour / nuit, sous-navigation, bandeau, connexion, pied de
        page, tableaux en cartes sur téléphone.
   Le portail n'utilise PAS Bootstrap : les surcharges Bootstrap du
   brief sont transposées dans dexfly.css et hub.css, dont les
   variables historiques (--bg, --ink, --gold...) pointent vers
   les --ao-* ci-dessous. Aucune classe existante n'est renommée.
   À charger APRÈS fonts.css et AVANT dexfly.css ou hub.css.
   ============================================================ */

/* ---------- 1. variables, mode jour ---------- */
:root {
  color-scheme: light;
  --ao-ink: #1e2328;            /* anthracite des panneaux (barre, actif, statuts) */
  --ao-ink-2: #2b3138;
  --ao-ink-3: #3a414a;
  --ao-ink-rgb: 30, 35, 40;
  /* Accent du mode JOUR = bleu marine du logo DexFly (#183a80), à la place du
     jaune signal (demande Bechir 2026-10-15). Le rouge framboise du logo est
     écarté : dans le portail le rouge veut dire alerte. La nuit garde le
     jaune (bloc [data-bs-theme="dark"]). Les statuts « vigilance » ne passent
     JAMAIS par l'accent : ils prennent --ao-warn. */
  --ao-signal: #183a80;         /* bleu DexFly */
  --ao-signal-hover: #14306b;
  --ao-signal-active: #10285a;
  --ao-signal-deep: #183a80;    /* accent lisible sur fond clair (icônes, filets) */
  --ao-signal-text: #183a80;    /* accent en TEXTE sur fond clair (10:1 sur blanc) */
  --ao-signal-rgb: 24, 58, 128;
  --ao-on-signal: #fff;         /* texte posé SUR l'accent */
  --ao-signal-on-dark: #8fb0f5; /* accent sur un panneau resté anthracite */
  --ao-info: #0b5cad;           /* bleu information : liens, focus */
  --ao-info-hover: #084785;
  --ao-info-rgb: 11, 92, 173;
  --ao-canvas: #f4f5f7;
  --ao-surface: #fff;           /* cartes, tableaux */
  --ao-surface-2: #f8f9fa;      /* en-têtes de cartes, lignes alternées */
  --ao-surface-3: #eceef1;      /* puces, survols appuyés */
  --ao-field: #fff;             /* champs de formulaire */
  --ao-glass: rgba(30, 35, 40, .04);
  --ao-glass-strong: rgba(30, 35, 40, .08);
  --ao-line: #dde1e6;
  --ao-line-strong: #c3c9d0;
  --ao-table-line: #e6e9ed;
  --ao-input-border: #c9d0d7;
  --ao-text: #1e2328;
  --ao-heading: #1e2328;
  --ao-muted: #5c6670;
  --ao-faint: #6a737d;          /* reste AA sur blanc */
  --ao-head-bg: #eef0f3;
  --ao-head-text: #3f4851;      /* en-têtes de tableaux */
  --ao-chip-bg: #e6e9ed;        /* badges neutres */
  --ao-scroll-thumb: rgba(30, 35, 40, .28);
  --ao-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ao-font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  /* statuts en TEXTE sur les surfaces du mode (AA) et leur fond teinté */
  --ao-ok: #19773f;      --ao-ok-bg: rgba(31, 138, 76, .10);
  --ao-warn: #8f5a00;    --ao-warn-bg: rgba(255, 199, 44, .20);
  --ao-bad: #c8102e;     --ao-bad-bg: rgba(200, 16, 46, .08);
  --ao-neutral: #5c6670; --ao-neutral-bg: rgba(92, 102, 112, .10);
  --ao-cyan: #0e6f8f;    --ao-cyan-bg: rgba(26, 143, 191, .10);
  --ao-olive: #5c7417;   --ao-olive-bg: rgba(95, 122, 26, .11);
  --ao-maint: #4d5b70;   --ao-maint-bg: rgba(77, 91, 112, .10);
  --ao-maint-line: rgba(77, 91, 112, .30);
  --ao-mag: #a3366f;     /* simulateur Cost Control */
  /* couleurs de CATÉGORIE (rubriques, canaux) : texte AA et fond teinté par mode */
  --ao-violet: #6d28d9;  --ao-violet-bg: rgba(109, 40, 217, .10);
  --ao-teal: #0f766e;    --ao-teal-bg: rgba(13, 148, 136, .12);
  --ao-brown: #795513;   --ao-brown-bg: rgba(121, 85, 19, .14);
  --ao-orange: #c2410c;  --ao-orange-bg: rgba(194, 65, 12, .12);
  --ao-success: #1f8a4c;        /* aplats (boutons) */
  --ao-danger: #c8102e;

  /* statuts façon FIDS : texte coloré sur fond anthracite */
  /* élément ACTIF ou sélectionné : anthracite à texte jaune en jour, jaune à texte anthracite en nuit */
  --ao-active-bg: var(--ao-signal);
  --ao-active-fg: var(--ao-on-signal);

  --ao-fids-bg: var(--ao-ink);
  --ao-fids-green: #7ce0a3;
  --ao-fids-amber: #ffc72c;
  --ao-fids-red: #ff7b7b;
  --ao-fids-blue: #8cc8ff;
  --ao-fids-cyan: #8ee3f5;
  --ao-fids-white: #f2f4f7;
  --ao-fids-olive: #c9dc86;
  --ao-fids-grey: #b8c0c9;

  /* ombres */
  --ao-sh-sm: 0 1px 2px rgba(16, 24, 32, .04);
  --ao-sh-md: 0 6px 18px rgba(16, 24, 32, .10);
  --ao-sh-lg: 0 12px 32px rgba(16, 24, 32, .16);

  /* graphiques : séries dans l'ordre, quadrillage, texte */
  --ao-series-1: #2a6fc4; --ao-series-2: #c2491b; --ao-series-3: #13805a;
  --ao-series-4: #9a6700; --ao-series-5: #b93c6c; --ao-series-6: #2e7d32;
  --ao-series-7: #6a5acd; --ao-series-8: #c94c4c; --ao-series-9: #6e6c66;
  --ao-grid: #e3e6ea; --ao-chart-text: #5c6670;

  /* hauteur de la barre du haut (repère des éléments collants) */
  --ao-navbar-h: 59px;
  /* hauteur des onglets du module collés sous la barre : 0 sans onglets,
     valeur de repli ci-dessous, puis hauteur MESURÉE par terminal.js (les
     rubriques passent sur deux lignes sur un écran moyen) */
  --ao-zone-nav-h: 0px;
}
:root:has(.ao-zone-nav) { --ao-zone-nav-h: 62px; }
/* Une ancre (#section) ou un scrollIntoView s'arrête SOUS les deux barres collées */
html { scroll-padding-top: calc(var(--ao-navbar-h) + var(--ao-zone-nav-h) + .5rem); }

/* ---------- 1 bis. variables, mode nuit (par défaut) ----------
   Fond bleu-gris très sombre plutôt que noir, texte blanc cassé (moins
   d'éblouissement de nuit), contrastes AA ou mieux, jaune signal pour
   l'action et l'élément actif. */
[data-bs-theme="dark"] {
  /* accent de NUIT : le jaune signal */
  --ao-signal: #ffc72c;
  --ao-signal-hover: #f2b705;
  --ao-signal-active: #e0a800;
  --ao-signal-rgb: 255, 199, 44;
  --ao-on-signal: var(--ao-ink);
  --ao-signal-on-dark: var(--ao-signal);
  color-scheme: dark;
  --ao-canvas: #0e1216;
  --ao-surface: #161b21;
  --ao-surface-2: #1c232a;
  --ao-surface-3: #232a32;
  --ao-field: #10151a;
  --ao-glass: rgba(255, 255, 255, .04);
  --ao-glass-strong: rgba(255, 255, 255, .08);
  --ao-line: #2a323b;
  --ao-line-strong: #3a444f;
  --ao-table-line: #232a32;
  --ao-input-border: #36404a;
  --ao-text: #e3e7ec;
  --ao-heading: #f2f4f7;
  --ao-muted: #9aa5b1;
  --ao-faint: #7d8894;
  --ao-head-bg: #1c232a;
  --ao-head-text: #aab4bf;
  --ao-chip-bg: #2a323b;
  --ao-scroll-thumb: rgba(255, 255, 255, .18);
  --ao-signal-deep: var(--ao-signal);
  --ao-signal-text: var(--ao-signal);
  --ao-info: #6cb4ff;
  --ao-info-hover: #9ccbff;
  --ao-info-rgb: 108, 180, 255;

  --ao-ok: #7ce0a3;      --ao-ok-bg: rgba(124, 224, 163, .12);
  --ao-warn: #ffc72c;    --ao-warn-bg: rgba(255, 199, 44, .12);
  --ao-bad: #ff7b7b;     --ao-bad-bg: rgba(255, 123, 123, .12);
  --ao-neutral: #9aa5b1; --ao-neutral-bg: rgba(154, 165, 177, .12);
  --ao-cyan: #8ee3f5;    --ao-cyan-bg: rgba(142, 227, 245, .11);
  --ao-olive: #b7cc6e;   --ao-olive-bg: rgba(183, 204, 110, .12);
  --ao-maint: #a7b4cc;   --ao-maint-bg: rgba(167, 180, 204, .12);
  --ao-maint-line: rgba(167, 180, 204, .34);
  --ao-mag: #e07bb0;
  --ao-violet: #b9a4ff;  --ao-violet-bg: rgba(185, 164, 255, .13);
  --ao-teal: #6fd6c8;    --ao-teal-bg: rgba(111, 214, 200, .12);
  --ao-brown: #e0b872;   --ao-brown-bg: rgba(224, 184, 114, .13);
  --ao-orange: #ff9f6e;  --ao-orange-bg: rgba(255, 159, 110, .13);

  --ao-fids-bg: #0a0d10;
  --ao-active-bg: var(--ao-signal);
  --ao-active-fg: var(--ao-ink);

  --ao-sh-sm: none;
  --ao-sh-md: 0 6px 18px rgba(0, 0, 0, .45);
  --ao-sh-lg: 0 12px 32px rgba(0, 0, 0, .55);

  --ao-series-1: #3987e5; --ao-series-2: #d95926; --ao-series-3: #199e70;
  --ao-series-4: #c98500; --ao-series-5: #d55181; --ao-series-6: #008300;
  --ao-series-7: #9085e9; --ao-series-8: #e66767; --ao-series-9: #898781;
  --ao-grid: #2a323b; --ao-chart-text: #b8c0c9;
}

/* Chiffres alignés (heures, montants, compteurs) */
.ao-num, time, input[type="time"], input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---------- 2. barre du haut ---------- */
.ao-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ao-ink);
  border-bottom: 3px solid var(--ao-signal);
  color: rgba(242, 244, 247, .78);
  font-family: var(--ao-font-display);
}
.ao-navbar-in {
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  min-height: 56px;
  padding: .4rem clamp(1rem, 2.4vw, 1.875rem);
}
.ao-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; flex: 0 0 auto; }
.ao-brand:hover { color: #fff; }
.ao-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 1.75rem;
  padding: 0 .35rem;
  border-radius: 3px;
  background: var(--ao-signal);
  color: var(--ao-on-signal);
  font-family: var(--ao-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
}
.ao-brand-logo { height: 2rem; width: auto; flex: 0 0 auto; display: block; }
/* Logo officiel sombre (marine et framboise) : léger halo pour le détacher de l'anthracite */
.ao-navbar .ao-brand-logo, .ao-board .ao-brand-logo {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)) drop-shadow(0 0 3px rgba(255, 255, 255, .18));
}
.ao-brand-name {
  font-family: var(--ao-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* liens de modules */
.ao-collapse { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; }
.ao-navlinks { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; margin: 0 auto 0 .5rem; padding: 0; list-style: none; }
.ao-navlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .45rem .3rem;
  border-bottom: 2px solid transparent;
  color: rgba(242, 244, 247, .78);
  font-weight: 500;
  font-size: .97rem;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
}
.ao-navlink:hover, .ao-navlink.active { color: #fff; border-bottom-color: var(--ao-signal); }
.ao-navlink:focus-visible { outline: 2px solid var(--ao-signal); outline-offset: 2px; }
.ao-navlink svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ao-navtools { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

/* heure UTC permanente */
.ao-utc {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .15rem .6rem;
  border: 1px solid rgba(255, 199, 44, .4);
  border-radius: 4px;
  background: #15191d;
  font-family: var(--ao-font-display);
  white-space: nowrap;
  order: 3;
  flex: 0 0 auto;
}
.ao-utc-label { font-size: .7rem; font-weight: 500; letter-spacing: .14em; color: rgba(242, 244, 247, .6); }
.ao-utc-time {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ao-signal);
  font-variant-numeric: tabular-nums;
}

/* boutons clairs de la barre (jour / nuit, menu) */
.ao-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 2.1rem;
  min-width: 2.1rem;
  padding: 0 .55rem;
  border: 1px solid rgba(242, 244, 247, .22);
  border-radius: .375rem;
  background: transparent;
  color: rgba(242, 244, 247, .9);
  font-family: var(--ao-font-display);
  font-weight: 500;
  cursor: pointer;
}
.ao-navbtn:hover { background: var(--ao-ink-3); border-color: rgba(242, 244, 247, .4); color: #fff; }
.ao-navbtn:active { background: var(--ao-ink-3); color: var(--ao-signal); }
.ao-navbtn:focus-visible { outline: 2px solid var(--ao-signal); outline-offset: 2px; }
.ao-navbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ao-navtoggler { display: none; }

/* Bouton jour / nuit : lune en jour, soleil en nuit */
.ao-theme-toggle .ao-ic-sun { display: none; }
[data-bs-theme="dark"] .ao-theme-toggle .ao-ic-sun { display: inline-block; }
[data-bs-theme="dark"] .ao-theme-toggle .ao-ic-moon { display: none; }

/* ---------- 3. sous-navigation : panneau de la section puis onglets ----------
   Collée sous la barre du haut dans TOUS les modules (décision Bechir 10/10) :
   les rubriques restent à portée au défilement. z-index sous la barre (50)
   pour que son menu replié passe dessus, au-dessus des en-têtes de tableaux
   collants (6) et du bandeau simulateur (5), qui se calent dessous par
   --sticky-top. Fond opaque : le contenu glisse derrière sans transparaître. */
.ao-zone-nav {
  position: sticky;
  top: var(--ao-navbar-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .65rem clamp(1rem, 2.4vw, 1.875rem);
  background: var(--ao-surface);
  border-bottom: 1px solid var(--ao-line);
}
.ao-zone-nav-sign {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  padding: .25rem .7rem .25rem .25rem;
  border-radius: .45rem;
  background: var(--ao-ink);
  color: #fff;
  font-family: var(--ao-font-display);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.ao-zone-nav-sign:hover { color: var(--ao-signal); }
.ao-zone-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: var(--ao-signal);
  color: var(--ao-on-signal);
  font-family: var(--ao-font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.ao-zone-letter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
[data-bs-theme="dark"] .ao-zone-nav-sign { box-shadow: inset 0 0 0 1px var(--ao-line-strong); }

/* ---------- 4. bandeau de page (accueil) : texte sur dégradé anthracite, filet jaune ----------
   Photo facultative : style="--ao-hero-photo: url(...)", variante jour
   facultative : --ao-hero-photo-day (le mode nuit garde --ao-hero-photo) */
.ao-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 12.5rem;
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  margin-bottom: 1.25rem;
  border-radius: .5rem;
  border-bottom: 4px solid var(--ao-signal);
  overflow: hidden;
  color: #fff;
  /* une seule photo chargée : celle du thème affiché */
  --ao-hero-img: var(--ao-hero-photo-day, var(--ao-hero-photo, none));
  background:
    linear-gradient(90deg, rgba(30, 35, 40, .92) 0%, rgba(30, 35, 40, .72) 38%, rgba(30, 35, 40, .08) 75%),
    var(--ao-ink) var(--ao-hero-img) var(--ao-hero-position, center) / cover no-repeat;
}
[data-bs-theme="dark"] .ao-hero { --ao-hero-img: var(--ao-hero-photo, none); }
.ao-hero h1, .ao-hero .h1, .ao-hero .h2, .ao-hero .h3 { color: #fff; margin: 0 0 .25rem; }
.ao-hero p { color: rgba(242, 244, 247, .85); margin: 0; max-width: 38rem; }
.ao-hero strong { color: var(--ao-signal); }
.ao-hero-kicker {
  font-family: var(--ao-font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ao-signal);
  margin-bottom: .35rem;
}
@media (max-width: 575.98px) {
  .ao-hero {
    min-height: 10rem;
    padding: 1rem;
    background:
      linear-gradient(0deg, rgba(30, 35, 40, .92) 0%, rgba(30, 35, 40, .55) 60%, rgba(30, 35, 40, .2) 100%),
      var(--ao-ink) var(--ao-hero-img) var(--ao-hero-position, center) / cover no-repeat;
  }
}

/* ---------- 5. connexion : panneau façon affichage des départs à gauche, carte à droite ----------
   Photo facultative sur le panneau : style="--ao-board-photo: url(...)",
   variante jour facultative : --ao-board-photo-day */
.ao-entrance {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: 100vh;
}
.ao-board {
  position: relative;
  --ao-board-img: var(--ao-board-photo-day, var(--ao-board-photo, none));
  background:
    linear-gradient(180deg, rgba(30, 35, 40, .45) 0%, rgba(30, 35, 40, .88) 42%, var(--ao-ink) 70%),
    var(--ao-ink) var(--ao-board-img) center top / cover no-repeat;
  color: var(--ao-fids-white);
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-right: 4px solid var(--ao-signal);
}
[data-bs-theme="dark"] .ao-board { --ao-board-img: var(--ao-board-photo, none); }
.ao-board .ao-brand-logo { height: 3rem; }
.ao-board .ao-brand-name { font-size: 1.6rem; }
.ao-board .ao-brand-mark { height: 2.3rem; min-width: 2.8rem; font-size: 1.3rem; }
.ao-board-clock {
  display: flex;
  gap: 2rem;
  margin-top: auto;
  font-family: var(--ao-font-display);
  font-variant-numeric: tabular-nums;
}
.ao-board-clock div { display: flex; flex-direction: column; }
.ao-board-clock span:first-child { font-size: .8rem; letter-spacing: .12em; color: rgba(242, 244, 247, .6); }
.ao-board-clock span:last-child { font-size: 2.2rem; font-weight: 600; color: var(--ao-signal); line-height: 1.1; }
.ao-board-table { width: 100%; border-collapse: collapse; font-family: var(--ao-font-display); }
.ao-board-table th {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(242, 244, 247, .55);
  text-align: left;
  padding: 0 .75rem .5rem 0;
  border-bottom: 1px solid rgba(242, 244, 247, .18);
}
.ao-board-table td {
  padding: .55rem .75rem .55rem 0;
  border-bottom: 1px solid rgba(242, 244, 247, .08);
  font-size: 1.15rem;
  letter-spacing: .03em;
}
.ao-board-table td:first-child { color: var(--ao-signal); font-weight: 600; width: 5rem; letter-spacing: .08em; }
.ao-entrance-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  background: var(--ao-canvas);
}
.ao-entrance-card {
  width: 100%;
  max-width: 26rem;
  padding: 2rem 1.75rem 1.5rem;
  border: 1px solid var(--ao-line);
  border-top: 4px solid var(--ao-signal);
  border-radius: .5rem;
  background: var(--ao-surface);
  box-shadow: var(--ao-sh-md);
}
.ao-entrance-logo { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto 1.25rem; }
/* Logo à lettres sombres sur plaque claire dans la carte de connexion */
[data-bs-theme="dark"] .ao-entrance-logo { background: #eef0f3; padding: .6rem .8rem; border-radius: .5rem; }
@media (max-width: 991.98px) {
  .ao-entrance { grid-template-columns: 1fr; min-height: 100vh; grid-template-rows: auto 1fr; }
  .ao-board {
    border-right: 0;
    border-bottom: 4px solid var(--ao-signal);
    padding: 1.25rem 1rem;
    gap: .75rem;
  }
  .ao-board-table, .ao-board-clock { display: none; }
}

/* ---------- 6. pied de page, écrans tactiles, encoche iOS ---------- */
.ao-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .6rem clamp(1rem, 2.4vw, 1.875rem);
  background: var(--ao-surface);
  border-top: 1px solid var(--ao-line);
  color: var(--ao-muted);
  font-size: .85rem;
}
@supports (padding: env(safe-area-inset-top)) {
  .ao-navbar { padding-top: env(safe-area-inset-top); }
}
/* Grilles non converties en cartes : défilement horizontal dans leur conteneur */
.ao-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ---------- 7. barre sur écran étroit : menu repliable ----------
   Sous 1600 px depuis le 2026-10-15 (1366 avant) : avec dix modules, la barre
   débordait à 1440 px, l'heure UTC passait sous le menu utilisateur. */
@media (max-width: 1599.98px) {
  .ao-navbar-in { flex-wrap: wrap; }
  .ao-utc { order: 1; margin-left: auto; }
  .ao-navtoggler { display: inline-flex; order: 2; }
  .ao-collapse {
    order: 4;
    flex: 1 0 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .25rem 0 .6rem;
  }
  .ao-navbar.is-open .ao-collapse { display: flex; }
  .ao-navlinks { flex-direction: column; align-items: stretch; margin: 0; }
  .ao-navlink { padding: .6rem .25rem; border-bottom: 1px solid rgba(242, 244, 247, .08); border-left: 3px solid transparent; }
  .ao-navlink:hover, .ao-navlink.active { border-bottom-color: rgba(242, 244, 247, .08); border-left-color: var(--ao-signal); padding-left: .6rem; }
  .ao-navtools { justify-content: flex-start; flex-wrap: wrap; }
}
@media (min-width: 1600px) and (max-width: 1799.98px) {
  .ao-brand-name { display: none; }
}
@media (max-width: 767.98px) {
  .ao-brand-name { display: none; }
  .ao-utc { padding: .1rem .45rem; }
  .ao-utc-time { font-size: 1rem; }
  .ao-zone-nav { gap: .5rem; padding: .5rem 1rem; }
  .ao-zone-nav-name { display: none; }
  .ao-zone-nav-sign { padding-right: .25rem; }
}
@media (pointer: coarse) {
  .ao-navbtn { min-height: 2.75rem; min-width: 2.75rem; }
}
/* Téléphone à l'horizontale : deux barres collées mangeraient près d'un tiers
   de l'écran, les onglets défilent alors avec la page (terminal.js publie 0). */
@media (max-height: 500px) {
  .ao-zone-nav { position: static; }
  :root:has(.ao-zone-nav) { --ao-zone-nav-h: 0px; }
}

/* ---------- 8. téléphone : tableaux en cartes repliables (terminal.js) ----------
   Voir dexfly.css : les règles s'appuient sur table.tbl, la classe des tableaux
   du portail (table.table dans l'autre application). */

/* ---------- 9. menu utilisateur (portal/_usermenu.html), dans la barre ---------- */
.ao-navbar .usermenu { position: relative; }
.ao-navbar .usermenu-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 2.1rem;
  margin: 0;
  padding: 0 .5rem 0 .25rem;
  border: 1px solid rgba(242, 244, 247, .22);
  border-radius: .375rem;
  background: transparent;
  color: rgba(242, 244, 247, .9);
  font-family: var(--ao-font-display);
  cursor: pointer;
}
.ao-navbar .usermenu-btn:hover, .ao-navbar .usermenu-btn[aria-expanded="true"] {
  background: var(--ao-ink-3);
  border-color: rgba(242, 244, 247, .4);
  color: #fff;
}
.ao-navbar .usermenu-btn:focus-visible { outline: 2px solid var(--ao-signal); outline-offset: 2px; }
.ao-navbar .usermenu-btn .who { text-align: left; line-height: 1.1; }
.ao-navbar .usermenu-btn .who-n { display: block; font-size: .95rem; font-weight: 500; letter-spacing: .02em; }
.ao-navbar .usermenu-btn .who-r { display: none; }
.ao-navbar .usermenu-btn .avatar {
  width: 1.65rem;
  height: 1.65rem;
  border: 0;
  border-radius: 3px;
  background: var(--ao-signal);
  color: var(--ao-on-signal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ao-font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.ao-navbar .usermenu-caret {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s;
}
.ao-navbar .usermenu-btn[aria-expanded="true"] .usermenu-caret { transform: rotate(180deg); }
.ao-navbar .usermenu-panel {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  z-index: 120;
  min-width: 15.75rem;
  padding: .4rem;
  border: 1px solid var(--ao-line);
  border-radius: .5rem;
  background: var(--ao-surface);
  color: var(--ao-text);
  font-family: var(--ao-font);
  box-shadow: var(--ao-sh-lg);
}
.ao-navbar .usermenu-panel[hidden] { display: none; }
.ao-navbar .um-head { padding: .6rem .75rem .55rem; border-bottom: 1px solid var(--ao-line); margin-bottom: .35rem; }
.ao-navbar .um-name { font-size: .9rem; font-weight: 600; color: var(--ao-heading); }
.ao-navbar .um-mail { font-size: .78rem; color: var(--ao-muted); margin-top: 2px; }
.ao-navbar .um-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  margin: 0;
  padding: .55rem .75rem;
  border: 0;
  border-radius: .375rem;
  background: none;
  color: var(--ao-text);
  font-family: var(--ao-font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ao-navbar .um-item:hover { background: var(--ao-active-bg); color: var(--ao-active-fg); }
[data-bs-theme="dark"] .ao-navbar .um-item:hover { background: var(--ao-signal); color: var(--ao-on-signal); }
.ao-navbar .um-item:focus-visible { outline: 2px solid var(--ao-info); outline-offset: -2px; }
.ao-navbar .um-item .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ao-navbar .um-sep { height: 1px; background: var(--ao-line); margin: .35rem .25rem; }
.ao-navbar .um-logout { margin: 0; }
.ao-navbar .um-danger { color: var(--ao-bad); }
.ao-navbar .um-danger:hover { background: var(--ao-danger); color: #fff; }
[data-bs-theme="dark"] .ao-navbar .um-danger:hover { background: var(--ao-danger); color: #fff; }
@media (max-width: 1799.98px) {
  .ao-navbar .usermenu-btn .who { display: none; }
}
@media (max-width: 1599.98px) {
  .ao-navbar .usermenu-btn .who { display: block; }
  .ao-navbar .usermenu-panel { left: 0; right: auto; }
}

/* ---------- 9 bis. barre du haut en mode JOUR (demande Bechir 2026-10-15) ----------
   La barre reste anthracite la nuit ; le jour elle passe sur la surface
   claire, filet jaune conservé. Jamais de jaune en TEXTE sur fond clair :
   l'heure UTC prend --ao-signal-text. */
html:not([data-bs-theme="dark"]) .ao-navbar {
  background: var(--ao-surface);
  color: var(--ao-text);
  box-shadow: var(--ao-sh-md);
}
html:not([data-bs-theme="dark"]) .ao-navbar .ao-brand,
html:not([data-bs-theme="dark"]) .ao-navbar .ao-brand:hover { color: var(--ao-heading); }
html:not([data-bs-theme="dark"]) .ao-navbar .ao-brand-logo { filter: none; }
html:not([data-bs-theme="dark"]) .ao-navlink { color: var(--ao-muted); }
html:not([data-bs-theme="dark"]) .ao-navlink:hover,
html:not([data-bs-theme="dark"]) .ao-navlink.active { color: var(--ao-heading); }
html:not([data-bs-theme="dark"]) .ao-navlink.active { font-weight: 600; }
html:not([data-bs-theme="dark"]) .ao-utc { background: var(--ao-surface-2); border-color: var(--ao-line-strong); }
html:not([data-bs-theme="dark"]) .ao-utc-label { color: var(--ao-muted); }
html:not([data-bs-theme="dark"]) .ao-utc-time { color: var(--ao-signal-text); }
html:not([data-bs-theme="dark"]) .ao-navbtn,
html:not([data-bs-theme="dark"]) .ao-navbar .usermenu-btn { border-color: var(--ao-line-strong); color: var(--ao-text); }
html:not([data-bs-theme="dark"]) .ao-navbtn:hover,
html:not([data-bs-theme="dark"]) .ao-navbar .usermenu-btn:hover,
html:not([data-bs-theme="dark"]) .ao-navbar .usermenu-btn[aria-expanded="true"] {
  background: var(--ao-surface-3);
  border-color: var(--ao-muted);
  color: var(--ao-heading);
}
html:not([data-bs-theme="dark"]) .ao-navbtn:active { background: var(--ao-surface-3); color: var(--ao-signal-text); }
/* Panneaux qui restent anthracite en jour (bandeaux, connexion, panneau du
   module, KPI anthracite, numéro des cartes sur leur voile) : le bleu marine
   y serait illisible, l'accent y prend la teinte claire du bleu DexFly. */
html:not([data-bs-theme="dark"]) :is(.ao-hero, .ao-board, .ao-zone-nav-sign, .kpi.grad, .hero, .mod-num) {
  --ao-signal: var(--ao-signal-on-dark);
  --ao-signal-hover: var(--ao-signal-on-dark);
  --ao-signal-deep: var(--ao-signal-on-dark);
  --ao-signal-text: var(--ao-signal-on-dark);
  --ao-on-signal: var(--ao-ink);
}
@media (max-width: 1599.98px) {
  html:not([data-bs-theme="dark"]) .ao-navlink,
  html:not([data-bs-theme="dark"]) .ao-navlink:hover,
  html:not([data-bs-theme="dark"]) .ao-navlink.active { border-bottom-color: var(--ao-line); }
}

/* ---------- 10. impression ----------
   Le papier est blanc : en mode nuit, un texte clair y sortirait illisible.
   L'impression reprend donc TOUJOURS les valeurs du mode jour, et laisse de
   côté la barre, les onglets, le pied de page et l'Assistant. */
@media print {
  [data-bs-theme="dark"] {
  color-scheme: light;
  --ao-ink: #1e2328;            /* anthracite des panneaux (barre, actif, statuts) */
  --ao-ink-2: #2b3138;
  --ao-ink-3: #3a414a;
  --ao-ink-rgb: 30, 35, 40;
  --ao-signal: #183a80;         /* bleu DexFly */
  --ao-signal-hover: #14306b;
  --ao-signal-active: #10285a;
  --ao-signal-deep: #183a80;    /* accent lisible sur fond clair (icônes, filets) */
  --ao-signal-text: #183a80;    /* accent en TEXTE sur fond clair (10:1 sur blanc) */
  --ao-signal-rgb: 24, 58, 128;
  --ao-on-signal: #fff;         /* texte posé SUR l'accent */
  --ao-signal-on-dark: #8fb0f5; /* accent sur un panneau resté anthracite */
  --ao-info: #0b5cad;           /* bleu information : liens, focus */
  --ao-info-hover: #084785;
  --ao-info-rgb: 11, 92, 173;
  --ao-canvas: #f4f5f7;
  --ao-surface: #fff;           /* cartes, tableaux */
  --ao-surface-2: #f8f9fa;      /* en-têtes de cartes, lignes alternées */
  --ao-surface-3: #eceef1;      /* puces, survols appuyés */
  --ao-field: #fff;             /* champs de formulaire */
  --ao-glass: rgba(30, 35, 40, .04);
  --ao-glass-strong: rgba(30, 35, 40, .08);
  --ao-line: #dde1e6;
  --ao-line-strong: #c3c9d0;
  --ao-table-line: #e6e9ed;
  --ao-input-border: #c9d0d7;
  --ao-text: #1e2328;
  --ao-heading: #1e2328;
  --ao-muted: #5c6670;
  --ao-faint: #6a737d;          /* reste AA sur blanc */
  --ao-head-bg: #eef0f3;
  --ao-head-text: #3f4851;      /* en-têtes de tableaux */
  --ao-chip-bg: #e6e9ed;        /* badges neutres */
  --ao-scroll-thumb: rgba(30, 35, 40, .28);
  --ao-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ao-font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  /* statuts en TEXTE sur les surfaces du mode (AA) et leur fond teinté */
  --ao-ok: #19773f;      --ao-ok-bg: rgba(31, 138, 76, .10);
  --ao-warn: #8f5a00;    --ao-warn-bg: rgba(255, 199, 44, .20);
  --ao-bad: #c8102e;     --ao-bad-bg: rgba(200, 16, 46, .08);
  --ao-neutral: #5c6670; --ao-neutral-bg: rgba(92, 102, 112, .10);
  --ao-cyan: #0e6f8f;    --ao-cyan-bg: rgba(26, 143, 191, .10);
  --ao-olive: #5c7417;   --ao-olive-bg: rgba(95, 122, 26, .11);
  --ao-maint: #4d5b70;   --ao-maint-bg: rgba(77, 91, 112, .10);
  --ao-maint-line: rgba(77, 91, 112, .30);
  --ao-mag: #a3366f;     /* simulateur Cost Control */
  /* couleurs de CATÉGORIE (rubriques, canaux) : texte AA et fond teinté par mode */
  --ao-violet: #6d28d9;  --ao-violet-bg: rgba(109, 40, 217, .10);
  --ao-teal: #0f766e;    --ao-teal-bg: rgba(13, 148, 136, .12);
  --ao-brown: #795513;   --ao-brown-bg: rgba(121, 85, 19, .14);
  --ao-orange: #c2410c;  --ao-orange-bg: rgba(194, 65, 12, .12);
  --ao-success: #1f8a4c;        /* aplats (boutons) */
  --ao-danger: #c8102e;

  /* statuts façon FIDS : texte coloré sur fond anthracite */
  /* élément ACTIF ou sélectionné : anthracite à texte jaune en jour, jaune à texte anthracite en nuit */
  --ao-active-bg: var(--ao-signal);
  --ao-active-fg: var(--ao-on-signal);

  --ao-fids-bg: var(--ao-ink);
  --ao-fids-green: #7ce0a3;
  --ao-fids-amber: #ffc72c;
  --ao-fids-red: #ff7b7b;
  --ao-fids-blue: #8cc8ff;
  --ao-fids-cyan: #8ee3f5;
  --ao-fids-white: #f2f4f7;
  --ao-fids-olive: #c9dc86;
  --ao-fids-grey: #b8c0c9;

  /* ombres */
  --ao-sh-sm: 0 1px 2px rgba(16, 24, 32, .04);
  --ao-sh-md: 0 6px 18px rgba(16, 24, 32, .10);
  --ao-sh-lg: 0 12px 32px rgba(16, 24, 32, .16);

  /* graphiques : séries dans l'ordre, quadrillage, texte */
  --ao-series-1: #2a6fc4; --ao-series-2: #c2491b; --ao-series-3: #13805a;
  --ao-series-4: #9a6700; --ao-series-5: #b93c6c; --ao-series-6: #2e7d32;
  --ao-series-7: #6a5acd; --ao-series-8: #c94c4c; --ao-series-9: #6e6c66;
  --ao-grid: #e3e6ea; --ao-chart-text: #5c6670;

  /* hauteur de la barre du haut (repère des éléments collants) */
  --ao-navbar-h: 59px;
}
  .ao-navbar, .ao-zone-nav, .ao-footer, #ax-fab, #ax-panel { display: none !important; }
  body { background: #fff !important; }
}