/* askalon_ui.css — la feuille de style commune de la console (client et admin).
 * ─────────────────────────────────────────────────────────────────────────────
 * Langage visuel : Blueprint (le kit d'interface de Palantir), palette Gotham. Palette,
 * ombres, états de survol et de focus en sont repris. Écart voulu : TOUS les coins sont
 * carrés (décision du 14/09/2026), boutons, champs, panneaux, pastilles et interrupteurs
 * compris ; seul le spinner reste rond. Texte en casse de phrase, icônes monochromes 16 px, chiffres tabulaires,
 * couleur réservée au sens (bleu = action, rouge = danger, vert = en ligne).
 *
 * Chaque page charge ce fichier AVANT son propre <style>. Les anciens noms de variables
 * (--bg, --surface, --accent…) y sont redéfinis sur la palette Blueprint : une page encore
 * écrite avec eux prend les bonnes couleurs sans rien changer.
 *
 * Les composants des pages (barre d'onglets, listes, formulaires, toasts, cartes d'alerte)
 * sont en bas, section « Composants de la console » ; les outils JS vont avec : askalon_ui.js.
 */

/* ── Palette Askalon : fonds noirs + Gotham (Blueprint 3), figée le 14/09/2026 ────
 * SEULE source des couleurs de la console. Une page n'écrit aucune couleur en dur : elle
 * utilise les rôles --ak-* (ou l'échelle --bp-* dans les composants de ce fichier).
 * Le lecteur askalon_audio.js garde ses valeurs littérales (il sert aussi à echo, sans
 * cette feuille) : ce sont les mêmes. */
:root {
  /* Échelle */
  /* Fonds : on GARDE le noir de la console (décision du 14/09/2026) ; tout le reste est Gotham. */
  --bp-black: #0a0c12;
  --bp-dg1: #0f1117; --bp-dg2: #1a1d27; --bp-dg3: #22263a; --bp-dg4: #2a2d3a; --bp-dg5: #343849;
  --bp-g1: #5c7080; --bp-g2: #738694; --bp-g3: #8a9ba8; --bp-g4: #a7b6c2; --bp-g5: #bfccd6;
  --bp-lg1: #ced9e0; --bp-lg3: #e1e8ed; --bp-lg5: #f5f8fa;
  --bp-blue1: #0e5a8a; --bp-blue2: #106ba3; --bp-blue3: #137cbd; --bp-blue4: #2b95d6; --bp-blue5: #48aff0;
  --bp-green2: #0d8050; --bp-green3: #0f9960; --bp-green4: #15b371; --bp-green5: #3dcc91;
  --bp-orange3: #d9822b; --bp-orange4: #f29d49; --bp-orange5: #ffb366;
  --bp-red2: #c23030; --bp-red3: #db3737; --bp-red4: #f55656; --bp-red5: #ff7373;

  /* Rôles — c'est ce qu'utilisent les pages */
  --ak-nav: var(--bp-black);        /* barre du haut */
  --ak-bg: var(--bp-dg1);           /* fond */
  --ak-panel: var(--bp-dg2);        /* panneaux, cartes, bulles */
  --ak-raised: var(--bp-dg3);       /* éléments en relief : boutons neutres, tags */
  --ak-border: var(--bp-dg4);       /* bordures */
  --ak-text: var(--bp-lg5);
  --ak-text2: var(--bp-g4);         /* secondaire */
  --ak-text3: var(--bp-g2);         /* discret */
  --ak-text4: var(--bp-g1);         /* désactivé, indices */
  --ak-g3: var(--bp-g3);
  --ak-g5: var(--bp-g5);
  --ak-white: #fff;
  --ak-action: var(--bp-blue3);     /* boutons */
  --ak-action-hover: var(--bp-blue2);
  --ak-action-press: var(--bp-blue1);
  --ak-focus: var(--bp-blue4);      /* focus, sélection, soulignement des onglets */
  --ak-link: var(--bp-blue5);
  --ak-ok: var(--bp-green4);
  --ak-warn: var(--bp-orange4);
  --ak-warn-text: var(--bp-orange5);
  --ak-danger: var(--bp-red3);
  --ak-danger-hover: var(--bp-red2);
  --ak-danger-strong: var(--bp-red4);
  --ak-danger-text: var(--bp-red5);
  --ak-tooltip: var(--bp-lg3);

  /* Transparences */
  --ak-hover: rgba(138,155,168,.15);
  --ak-hover-soft: rgba(138,155,168,.08);
  --ak-press: rgba(138,155,168,.3);
  --ak-tag: rgba(138,155,168,.18);
  --ak-select: rgba(19,124,189,.14);
  --ak-select-hover: rgba(19,124,189,.2);
  --ak-action-soft: rgba(19,124,189,.15);
  --ak-mine: rgba(19,124,189,.3);
  --ak-focus-ring: rgba(19,124,189,.6);
  --ak-danger-soft: rgba(219,55,55,.14);
  --ak-line: rgba(255,255,255,.12);
  --ak-divider: rgba(255,255,255,.06);
  --ak-input: rgba(16,22,26,.5);
  --ak-input-edge: rgba(255,255,255,.15);
  --ak-well: rgba(16,22,26,.35);
  --ak-overlay: rgba(16,22,26,.92);
  --ak-shade: rgba(0,0,0,.45);
  --ak-scrim: rgba(0,0,0,.55);

  /* Ancien vocabulaire des composants de ce fichier */
  --bp-line: var(--ak-line);
  --bp-divider: rgba(255,255,255,.08);
  --bp-hover: var(--ak-hover);
  --bp-press: var(--ak-press);
  --bp-focus: var(--ak-focus-ring);
  --bp-shadow-1: 0 0 0 1px rgba(16,22,26,.4), 0 1px 1px rgba(16,22,26,.4);
  --bp-shadow-2: 0 0 0 1px rgba(16,22,26,.4), 0 1px 1px rgba(16,22,26,.4), 0 2px 6px rgba(16,22,26,.4);
  --bp-shadow-3: 0 0 0 1px var(--ak-line), 0 2px 4px rgba(16,22,26,.4), 0 8px 24px rgba(16,22,26,.4);
  --bp-shadow-4: 0 0 0 1px var(--ak-line), 0 4px 8px rgba(16,22,26,.4), 0 18px 46px 6px rgba(16,22,26,.4);
  --bp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --bp-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Noms des anciens gabarits, redirigés : une page pas encore migrée prend la palette. */
  --bg: var(--ak-bg);
  --surface: var(--ak-panel);
  --surface2: var(--ak-raised);
  --border: var(--ak-border);
  --text: var(--ak-text);
  --muted: var(--ak-text2);
  --accent: var(--ak-focus);
  --danger: var(--ak-danger);
  --ok: var(--ak-ok);
  --warn: var(--ak-warn);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--bp-font);
  background: var(--bp-dg1);
  color: var(--bp-lg5);
  -webkit-font-smoothing: antialiased;
}
/* Liens : la couleur de leur contexte. `a:visited` pèserait plus lourd que les classes de
   navigation et teindrait les onglets au fil des visites. */
a { color: inherit; }
::selection { background: rgba(43,149,214,.4); }

* { scrollbar-width: thin; scrollbar-color: var(--bp-dg5) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bp-dg5); border-radius: 0; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Blueprint : ce que la page de connexion et le sélecteur de période utilisent ── */
.bp-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; display: inline-block; vertical-align: -3px; }

.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 30px; min-width: 30px; padding: 5px 10px; border: none; border-radius: 0;
  background: var(--bp-dg3); color: var(--bp-lg5); font-family: inherit;
  font-size: 14px; line-height: 20px; font-weight: 400; cursor: pointer; text-align: left;
  text-decoration: none; white-space: nowrap; vertical-align: middle; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(16,22,26,.3);
  transition: background-color .1s, box-shadow .1s;
}
.bp-btn:hover { background: var(--bp-dg2); }
.bp-btn:active { background: var(--bp-dg1); }
.bp-btn:disabled { background: rgba(41,55,66,.5); color: rgba(167,182,194,.45); box-shadow: none; cursor: not-allowed; }
.bp-btn .bp-icon { color: var(--bp-g4); }
.bp-btn:disabled .bp-icon { color: inherit; }
.bp-btn:focus-visible, .bp-min:focus-visible { outline: 2px solid var(--bp-focus); outline-offset: 2px; }
.bp-btn.bp-primary { color: var(--ak-white); background: var(--bp-blue3); box-shadow: inset 0 0 0 1px rgba(16,22,26,.2), 0 1px 2px rgba(16,22,26,.3); }
.bp-btn.bp-primary .bp-icon { color: var(--ak-white); }
.bp-btn.bp-primary:hover { background: var(--bp-blue2); }
.bp-btn.bp-primary:active { background: var(--bp-blue1); }
.bp-btn.bp-primary:disabled { background: rgba(19,124,189,.45); color: rgba(255,255,255,.6); box-shadow: none; }
.bp-btn.bp-small { min-height: 24px; min-width: 24px; padding: 2px 8px; font-size: 13px; line-height: 18px; gap: 5px; }
.bp-btn.bp-large { min-height: 40px; min-width: 40px; padding: 5px 15px; font-size: 16px; gap: 10px; }
.bp-btn.bp-fill { display: flex; width: 100%; justify-content: center; }

.bp-min {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  flex-shrink: 0; border: none; border-radius: 0; background: transparent; color: var(--bp-g4);
  cursor: pointer; padding: 0; font-family: inherit;
}
.bp-min:hover { background: var(--bp-hover); color: var(--bp-lg5); }
.bp-min:active { background: var(--bp-press); }
.bp-min:disabled { color: var(--bp-g1); background: transparent; cursor: not-allowed; }

.bp-form-group { display: flex; flex-direction: column; margin: 0 0 15px; }
.bp-label { display: block; font-size: 14px; line-height: 20px; color: var(--bp-lg5); margin-bottom: 5px; }
.bp-input {
  display: block; width: 100%; height: 30px; padding: 0 10px; border: none; border-radius: 0;
  background: rgba(16,22,26,.3); color: var(--bp-lg5); outline: none; font-family: inherit;
  font-size: 14px; line-height: 30px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 1px rgba(16,22,26,.4);
  transition: box-shadow .1s;
}
.bp-input::placeholder { color: rgba(167,182,194,.55); }
.bp-input:focus { box-shadow: inset 0 0 0 1px var(--bp-blue4), 0 0 0 1px var(--bp-blue4); }
.bp-input:disabled, .bp-input[readonly] { background: rgba(41,55,66,.5); color: var(--bp-g4); box-shadow: none; }
.bp-input.bp-intent-danger, .bp-input.bad { box-shadow: inset 0 0 0 1px var(--bp-red4), 0 0 0 1px var(--bp-red4); }
.bp-input.bp-large { height: 40px; line-height: 40px; font-size: 16px; }
.bp-input-group { position: relative; display: block; }
.bp-input-group > .bp-icon { position: absolute; left: 7px; top: 7px; color: var(--bp-g4); pointer-events: none; z-index: 1; }
.bp-input-group > .bp-input { padding-left: 30px; }
.bp-input-group > .bp-input-right { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding-right: 3px; }
.bp-input-group > .bp-input-right ~ .bp-input, .bp-input-group > .bp-input.has-right { padding-right: 34px; }
.bp-input-group.bp-large > .bp-icon { left: 12px; top: 12px; }
.bp-input-group.bp-large > .bp-input { height: 40px; line-height: 40px; font-size: 16px; padding-left: 40px; }
.bp-input-group.bp-large > .bp-input-right { padding-right: 5px; }

.bp-callout {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 0;
  background: rgba(138,155,168,.15); color: var(--bp-lg5); font-size: 14px; line-height: 20px;
}
.bp-callout > .bp-icon { margin-top: 2px; color: var(--bp-g4); }
.bp-callout-title { font-weight: 600; margin-bottom: 2px; }
.bp-callout.bp-intent-warning { background: rgba(217,130,43,.2); }
.bp-callout.bp-intent-warning > .bp-icon, .bp-callout.bp-intent-warning .bp-callout-title { color: var(--bp-orange5); }
.bp-callout.bp-intent-danger { background: rgba(219,55,55,.2); }
.bp-callout.bp-intent-danger > .bp-icon, .bp-callout.bp-intent-danger .bp-callout-title { color: var(--bp-red5); }

.bp-card { background: var(--bp-dg2); border-radius: 0; padding: 20px; box-shadow: var(--bp-shadow-1); }
.bp-elevation-2 { box-shadow: var(--bp-shadow-2); }

.bp-spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(138,155,168,.25); border-top-color: var(--bp-g4); animation: bp-spin .6s linear infinite; }
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* ══ Composants de la console, client et admin ═══════════════════════════════════
 * Repris de la carte client et du monitor (validés le 14/09/2026). Une page ne les
 * redéfinit pas : elle n'écrit que sa mise en page. Noms en ak-*, modificateurs en
 * anglais (primary, danger, link, on, off).
 */

svg.i { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; display: block; }

/* ── Barre du haut ────────────────────────────────────────────────────────────
 * Le dessin des onglets est celui d'Alexandre : capitales espacées, séparateurs, souligné
 * bleu sous l'onglet actif. Seule retouche : le bleu du souligné (#2b95d6). */
.nav { display: flex; align-items: stretch; height: 38px; background: var(--ak-nav); border-bottom: 1px solid var(--ak-border); flex-shrink: 0; position: relative; z-index: 40; }
.nav-brand { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid var(--ak-border); flex-shrink: 0; }
.nav-brand img { height: 22px; width: 22px; object-fit: contain; display: block; }
.nav-tabs { display: flex; align-items: stretch; flex: 1; }
.nav-tab { display: flex; align-items: center; padding: 0 16px; color: var(--ak-text); background: none; border: none; border-right: 1px solid var(--ak-border); border-bottom: 2px solid transparent; font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .1s, background .1s; }
.nav-tab:hover { color: var(--ak-white); background: var(--ak-hover-soft); }
.nav-tab.active { color: var(--ak-white); background: var(--ak-bg); border-bottom-color: var(--ak-focus); }
.nav-tag { padding: 0 5px; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-link); background: var(--ak-action-soft); }
.nav-logout { display: flex; align-items: center; margin-left: auto; padding: 0 14px; border-left: 1px solid var(--ak-border); color: var(--ak-text); text-decoration: none; font-size: .7rem; letter-spacing: .06em; }
.nav-logout:hover { color: var(--ak-white); }

/* Barre d'onglets du bas, sur téléphone. */
#mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 52px; background: var(--ak-nav); border-top: 1px solid var(--ak-border); z-index: 40; align-items: stretch; }
.mnav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; color: var(--ak-text2); cursor: pointer; font-size: .52rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; padding: 0; transition: color .15s; }
.mnav-tab:hover { color: var(--ak-text); }
.mnav-tab.active { color: var(--ak-focus); }
@media (max-width: 768px) {
  #mobile-nav { display: flex; }
  .nav-tabs { display: none; }
}

/* ── Titres, étiquettes, états ────────────────────────────────────────────── */
/* En-tête de section : titre en capitales espacées, puis une aide ou un compteur. */
.ak-sec-hdr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; min-height: 28px; }
.ak-sec-hdr b { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-text); }
.ak-aide { font-size: 12px; color: var(--ak-text2); font-variant-numeric: tabular-nums; }
.ak-espace { flex: 1; }

/* Pastille d'état carrée, sans halo : vert en ligne, gris sinon. */
.ak-carre { width: 8px; height: 8px; flex-shrink: 0; background: var(--ak-text4); }
.ak-carre.online { background: var(--ak-ok); }

.ak-tag { flex-shrink: 0; padding: 0 6px; font-size: 11px; line-height: 18px; background: var(--ak-tag); color: var(--ak-g5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-tag.warn { background: rgba(242,157,73,.16); color: var(--ak-warn-text); }

/* Score d'une alerte : gris, orange dès 50 %, rouge dès 70 %. */
.ak-score { width: 44px; flex-shrink: 0; text-align: center; font-size: 11px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--ak-tag); color: var(--ak-g5); }
.ak-score.danger { background: var(--ak-danger-soft); color: var(--ak-danger-text); }
.ak-score.warn { background: rgba(242,157,73,.16); color: var(--ak-warn-text); }

.ak-vide { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--ak-text3); }

/* Bandeau sous une barre : hors ligne, service indisponible, mode édition. */
.ak-bandeau { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; font-size: 12px; line-height: 16px; }
.ak-bandeau[hidden] { display: none; }
.ak-bandeau > span { flex: 1; }
.ak-bandeau b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ak-bandeau.danger { background: var(--ak-danger-soft); color: var(--ak-danger-text); box-shadow: inset 3px 0 0 var(--ak-danger); }
.ak-bandeau.info { background: rgba(138,155,168,.1); color: var(--ak-g5); box-shadow: inset 3px 0 0 var(--ak-text4); }
.ak-bandeau.primary { background: var(--ak-select); color: var(--ak-link); box-shadow: inset 3px 0 0 var(--ak-focus); }

/* ── Listes ───────────────────────────────────────────────────────────────── */
.ak-liste { background: var(--ak-panel); box-shadow: inset 0 0 0 1px var(--ak-border); }
/* Intertitre de jour, collant : en faisant défiler une longue journée, on sait toujours
   de quel jour on lit les lignes. Une page sous une barre collante décale `top`. */
.ak-jour { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; background: var(--ak-bg); border-bottom: 1px solid var(--ak-border); font-size: 12px; font-weight: 600; color: var(--ak-text2); }
.ak-jour-n { font-weight: 400; font-size: 11px; line-height: 16px; padding: 0 6px; background: rgba(138,155,168,.2); color: var(--bp-lg1); font-variant-numeric: tabular-nums; }

/* Ligne d'une liste de valeurs (contacts) : texte, précision, actions à droite. */
.ak-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px 0 14px; }
.ak-item:hover { background: var(--ak-hover-soft); }
.ak-item-main { flex: 1; min-width: 0; font-size: 13px; color: var(--ak-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ak-item.off .ak-item-main { color: var(--ak-text3); }
.ak-item-sub { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ak-g3); flex-shrink: 0; }
/* Suppression confirmée dans la ligne elle-même, jamais par un confirm() du navigateur. */
.ak-item.confirm { background: rgba(219,55,55,.12); }
.ak-item.confirm .ak-item-main { white-space: normal; font-size: 12px; line-height: 16px; padding: 6px 0; }

/* Tableau : en-têtes en capitales espacées, lignes de 42 px séparées d'un filet. */
.ak-table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 13px; }
.ak-table th { height: 32px; padding: 0 14px; text-align: left; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ak-text2); background: var(--ak-bg); box-shadow: inset 0 -1px 0 var(--ak-border); }
.ak-table td { height: 42px; padding: 0 14px; vertical-align: middle; box-shadow: inset 0 -1px 0 var(--ak-divider); }
.ak-table tbody tr:hover > td { background: var(--ak-hover-soft); }
.ak-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ak-table .dim { color: var(--ak-text2); }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.ak-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px; border: none; border-radius: 0; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; text-decoration: none; background: var(--ak-raised); color: var(--ak-text); box-shadow: inset 0 0 0 1px var(--ak-line); }
.ak-btn:hover { background: var(--ak-panel); }
.ak-btn:disabled { opacity: .5; cursor: not-allowed; }
.ak-btn[hidden] { display: none; }
.ak-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.ak-btn.primary { background: var(--ak-action); box-shadow: none; }
.ak-btn.primary:hover { background: var(--ak-action-hover); }
.ak-btn.danger { background: var(--ak-danger); box-shadow: none; }
.ak-btn.danger:hover { background: var(--ak-danger-hover); }
.ak-btn.link { background: transparent; box-shadow: none; color: var(--ak-link); padding: 0 6px; }
.ak-btn.link:hover { background: var(--ak-action-soft); }
.ak-btn.small { height: 24px; padding: 0 8px; font-size: 12px; }

/* Bouton-icône carré (fermer, supprimer, lire). */
.ak-min { width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ak-g3); text-decoration: none; }
.ak-min svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.ak-min:hover { background: var(--ak-hover); color: var(--ak-text); }
.ak-min.danger:hover { background: rgba(219,55,55,.15); color: var(--ak-danger-text); }
.ak-btn:focus-visible, .ak-min:focus-visible, .ak-seg > *:focus-visible { outline: 2px solid var(--ak-focus-ring); outline-offset: 1px; }

/* Groupe segmenté (périodes, mesures, filtres). */
.ak-seg { display: inline-flex; flex-wrap: wrap; }
.ak-seg > * { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin-left: -1px; font: inherit; font-size: 12px; color: var(--ak-text2); background: var(--ak-panel); text-decoration: none; border: none; box-shadow: inset 0 0 0 1px var(--ak-border); cursor: pointer; white-space: nowrap; }
.ak-seg > *:first-child { margin-left: 0; }
.ak-seg > *:hover { color: var(--ak-text); background: var(--ak-raised); }
.ak-seg > .on { color: var(--ak-white); background: var(--ak-action); box-shadow: none; position: relative; z-index: 1; }
.ak-seg > .off { opacity: .45; }

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.ak-form { padding: 12px; background: var(--ak-well); box-shadow: inset 0 0 0 1px var(--ak-divider); }
.ak-form[hidden] { display: none; }
.ak-lbl { display: block; font-size: 12px; color: var(--ak-text2); margin: 0 0 4px; }
.ak-lbl + .ak-lbl, .ak-champ + .ak-lbl, .ak-note + .ak-lbl { margin-top: 10px; }
.ak-rang { display: flex; gap: 6px; }
.ak-input { display: block; width: 100%; height: 30px; padding: 0 8px; border: none; border-radius: 0; outline: none; background: var(--ak-input); color: var(--ak-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--ak-input-edge); }
.ak-input::placeholder { color: var(--ak-text4); }
.ak-input:focus { box-shadow: inset 0 0 0 1px var(--ak-focus), 0 0 0 1px var(--ak-focus); }
.ak-input.bad { box-shadow: inset 0 0 0 1px var(--ak-danger-strong), 0 0 0 1px var(--ak-danger-strong); }
input.ak-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
/* Liste déroulante : même relief que les boutons, flèche dessinée (la couleur est celle
   de --ak-text2 : une variable ne passe pas dans une image). */
.ak-select { display: block; width: 100%; height: 30px; padding: 0 28px 0 8px; border: none; border-radius: 0; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--ak-text); background: var(--ak-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23a7b6c2' d='M4.5 6h7L8 10.5z'/%3E%3C/svg%3E") no-repeat right 6px center; box-shadow: inset 0 0 0 1px var(--ak-line); }
.ak-select:hover { background-color: var(--ak-panel); }
.ak-select:focus { box-shadow: inset 0 0 0 1px var(--ak-focus), 0 0 0 1px var(--ak-focus); }
.ak-champ { position: relative; }
.ak-champ .ak-min { position: absolute; right: 1px; top: 1px; width: 28px; height: 28px; }
.ak-champ .ak-input { padding-right: 32px; }
.ak-err { min-height: 0; font-size: 12px; line-height: 16px; color: var(--ak-danger-text); margin-top: 4px; }
.ak-err:empty { display: none; }
.ak-note { font-size: 12px; line-height: 16px; color: var(--ak-g3); margin-top: 4px; }
.ak-btns { display: flex; gap: 6px; margin-top: 12px; }

/* Interrupteur carré : <label class="ak-switch"><input type="checkbox"><span></span></label> */
.ak-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; margin-top: 2px; }
.ak-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ak-switch span { width: 30px; height: 16px; background: var(--ak-press); position: relative; transition: background .12s; }
.ak-switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: var(--ak-bg); transition: left .12s, background .12s; }
.ak-switch:hover span { background: rgba(138,155,168,.45); }
.ak-switch input:checked + span { background: var(--ak-action); }
.ak-switch:hover input:checked + span { background: var(--ak-action-hover); }
.ak-switch input:checked + span::after { left: 16px; background: var(--ak-text); }
.ak-switch input:disabled + span { opacity: .45; cursor: not-allowed; }
.ak-switch input:focus-visible + span { outline: 2px solid var(--ak-focus-ring); outline-offset: 2px; }

/* Case à cocher carrée, bleu d'action. */
.ak-check { width: 14px; height: 14px; margin: 0; flex-shrink: 0; accent-color: var(--ak-action); cursor: pointer; }

/* ── Toast : sombre, liseré vert (réussite) ou rouge (erreur). AskalonUI.toast(). ── */
#toast { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 8px); z-index: 999; max-width: min(420px, calc(100vw - 32px));
         padding: 9px 14px 9px 16px; background: var(--ak-raised); color: var(--ak-text); font-size: 13px; line-height: 18px;
         box-shadow: inset 3px 0 0 var(--ak-ok), 0 0 0 1px rgba(16,22,26,.4), 0 8px 24px var(--ak-shade);
         opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { box-shadow: inset 3px 0 0 var(--ak-danger), 0 0 0 1px rgba(16,22,26,.4), 0 8px 24px var(--ak-shade); }
@media (max-width: 768px) { #toast { bottom: 72px; } }

/* ── Cartes MapLibre ──────────────────────────────────────────────────────── */
/* Contrôles de zoom, boussole : blancs par défaut, sombres ici comme les autres boutons. */
.maplibregl-ctrl-group:not(:empty) { background: var(--bp-dg3) !important; border-radius: 0!important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 1px 2px rgba(16,22,26,.3) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 30px !important; height: 30px !important; background-color: transparent !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,.1) !important; }
.maplibregl-ctrl-group button:hover { background-color: var(--bp-hover) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(.8); }
.maplibregl-ctrl-attrib { background: rgba(28,33,39,.8) !important; color: var(--bp-g4) !important; }
.maplibregl-ctrl-attrib a { color: var(--bp-g5) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1) brightness(.8); }
/* Bulle d'un boîtier : mêmes codes que le bloc LIVE. */
.maplibregl-popup-content { background: var(--ak-bg) !important; color: var(--ak-text) !important; border-radius: 0 !important;
  box-shadow: 0 0 0 1px var(--ak-border), 0 8px 24px rgba(0,0,0,.5) !important; padding: 10px 12px 6px !important; min-width: 210px; }
.maplibregl-popup-tip { border-top-color: var(--ak-bg) !important; border-bottom-color: var(--ak-bg) !important; }
.maplibregl-popup-close-button { width: 26px; height: 26px; color: var(--ak-text2) !important; font-size: 18px; border-radius: 0 !important; }
.maplibregl-popup-close-button:hover { background: var(--ak-hover) !important; color: var(--ak-text) !important; }
.pu-hdr { display: flex; align-items: center; gap: 8px; padding-right: 22px; }
.pu-hdr b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-etat { font-size: 12px; color: var(--ak-text2); margin: 2px 0 0 16px; }
.pu-coord { font-size: 11px; color: var(--ak-text3); margin: 2px 0 0 16px; font-variant-numeric: tabular-nums; }
.pu-actions { margin: 6px 0 0 8px; }

/* Boutons posés sur la carte. */
.mb { position: absolute; z-index: 10; cursor: pointer; background: var(--ak-overlay); border: 1px solid var(--ak-border); border-radius: 0; color: var(--ak-text); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.mb:hover { background: var(--ak-raised); }

/* Marqueur d'un boîtier qui vient de détecter (pulsation bornée par la page) ; éclair
   quand on arrive dessus depuis une alerte. */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(219,55,55,.9); } 70% { box-shadow: 0 0 0 16px rgba(219,55,55,0); } 100% { box-shadow: 0 0 0 0 rgba(219,55,55,0); } }
.pulse-alert { animation: pulse-ring 1.4s ease-out infinite !important; border-color: var(--ak-danger) !important; }
.mk-flash { animation: mk-flash .9s ease-out 2; }
@keyframes mk-flash { 0% { box-shadow: 0 0 0 0 rgba(43,149,214,.95); } 100% { box-shadow: 0 0 0 16px rgba(43,149,214,0); } }

/* ── Carte d'alerte en direct ─────────────────────────────────────────────────
 * Fond noir, un seul rouge : le liseré de gauche et le surtitre. Rien ne clignote ; le
 * lecteur est celui des listes. */
@keyframes notif-in { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
.notif { position: relative; background: var(--ak-bg); color: var(--ak-text); box-shadow: inset 3px 0 0 var(--ak-danger); border-top: 1px solid var(--ak-border); animation: notif-in .2s ease-out; }
.notif-hdr { display: flex; align-items: flex-start; gap: 8px; padding: 8px 6px 0 14px; }
.notif-titres { flex: 1; min-width: 0; }
.notif-surtitre { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ak-danger-text); white-space: nowrap; }
.notif-device { display: block; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-ts { flex-shrink: 0; font-size: 12px; line-height: 24px; color: var(--ak-text2); font-variant-numeric: tabular-nums; }
.notif-close { width: 24px; height: 24px; flex-shrink: 0; padding: 0; border: none; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--ak-text2); }
.notif-close:hover { background: var(--ak-hover); color: var(--ak-text); }
.notif-close svg, .notif-act svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.notif-audio { padding: 8px 12px 0 14px; }
.notif-wait { display: flex; align-items: center; gap: 8px; height: 30px; font-size: 12px; color: var(--ak-text2); }
.notif-spin { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--ak-press); border-top-color: var(--ak-text2); animation: notif-tourne .6s linear infinite; }
@keyframes notif-tourne { to { transform: rotate(360deg); } }
.notif-foot { display: flex; gap: 2px; padding: 6px 8px 8px 8px; }
.notif-act { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: none; border-radius: 0; background: transparent; color: var(--ak-link); font: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.notif-act:hover { background: var(--ak-action-soft); }
.notif-close:focus-visible, .notif-act:focus-visible { outline: 2px solid var(--ak-focus-ring); outline-offset: 1px; }