/* Console MiraGate — design « à la MiraPerf », retenu le 19/10/2026 face à la charte Miranui.

   Repris de MiraPerf (frontend/shared/theme.js, nav.js, dashboard.html, login.html) : la palette
   Miranui en couleurs Tailwind (navy, primary, secondary, accent, coral, mist), la barre de
   navigation latérale marine, le fond gris très clair, les cartes blanches à 12 px et ombre légère,
   les libellés en petites capitales grises, le sélecteur segmenté, la police du système.

   Pas de thème sombre, comme MiraPerf : décision du 19/10/2026. La page s'annonce en clair, pour
   qu'un navigateur réglé en sombre ne lui applique pas ses propres couleurs de formulaires. */
:root {
  --navy: #15203F; --primary: #22335C; --secondary: #404F8E; --accent: #6F7BB6; --coral: #D75B65;
  --rose: #FFA4AB; --mist: #EFF1F8;
  --fond: #F9FAFB; --surface: #FFFFFF; --texte: #374151; --texte-fort: #1F2937; --texte-2: #6B7280;
  --texte-3: #9CA3AF; --filet: #F3F4F6; --bord: #E5E7EB; --bord-fort: #D1D5DB; --segment: #F3F4F6;
  --titre: var(--navy); --nav: var(--primary); --nav-texte: var(--accent); --nav-actif: var(--secondary);
  --ok-fond: #DCFCE7; --ok-texte: #15803D; --neutre-fond: #F3F4F6; --neutre-texte: #4B5563;
  --ambre-fond: #FEF3C7; --ambre-texte: #B45309; --alerte-fond: #FDECEE; --alerte-texte: #B4232F;
  --ombre: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --ombre-forte: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --corps: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 14px/1.5 var(--corps); }
code, .mono { font-family: var(--mono); font-size: .9em; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cadre { display: flex; min-height: 100vh; }

/* ─── Navigation latérale ─────────────────────────────────────────────────────────────── */
.nav { width: 236px; flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  gap: 18px; padding: 16px 10px 12px; background: var(--nav); color: var(--nav-texte); overflow-y: auto; }
.nav-entete { display: flex; align-items: center; gap: 10px; padding: 2px 10px 6px; }
/* Le nom et, dessous, la mention calée à droite — comme « BETA » sous « MiraPerf ». */
.nav-libelle { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.nav-nom { color: #fff; font-size: 20px; font-weight: 700; line-height: 1; }
/* Le logo, inscrit ici une fois (la feuille est mise en cache) plutot que servi par une route de
   plus : la politique de securite admet deja les images `data:`. 195 x 112, le double de sa
   plus grande taille a l'ecran. */
.logo { display: block; flex: none; aspect-ratio: 195 / 112; background: center / contain no-repeat
  url("data:image/png;base64,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"); }
.logo-nav { height: 32px; }
.logo-carte { height: 56px; margin: 0 auto 14px; }
.nav-mention { color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .05em; line-height: 1; text-transform: uppercase; }
.nav-titre { margin: 0 0 6px; padding: 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); opacity: .75; }
.onglets { display: flex; flex-direction: column; gap: 2px; }
.onglets button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--nav-texte); border-radius: 8px; padding: 9px 12px; font-size: 14px;
  transition: background-color .15s, color .15s; }
.onglets button:hover { background: rgb(64 79 142 / .6); color: #fff; }
.onglets button[aria-selected="true"] { background: var(--nav-actif); color: #fff; font-weight: 500; }
.nav-avenir .nav-note { margin: 0; padding: 0 12px; font-size: 12px; opacity: .6; }
.nav-pied { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 10px;
  border-top: 1px solid rgb(64 79 142 / .6); }
.nav-pied button { border: 0; background: transparent; color: var(--nav-texte); text-align: left; border-radius: 8px;
  padding: 7px 12px; font-size: 12px; }
.nav-pied button:hover { background: rgb(64 79 142 / .6); color: #fff; }
.nav-session { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 12px; min-width: 0; }
.nav-session #qui { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--secondary); color: #fff;
  font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.avatar:empty { display: none; }

main { flex: 1; min-width: 0; padding: 22px 24px 48px; max-width: 1600px; }

/* ─── Connexion : la carte centrée de MiraPerf ────────────────────────────────────────── */
/* Sans la navigation, la carte de connexion se centre sur toute la largeur. */
.nav[hidden] + main { margin-inline: auto; }
.connexion { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.connexion-carte { width: 100%; max-width: 380px; background: var(--surface); border-radius: 12px;
  box-shadow: var(--ombre-forte); padding: 32px 28px; text-align: center; }
.connexion-carte h1 { margin: 0; color: var(--titre); font-size: 22px; font-weight: 700; }
.sous-titre { margin: 4px 0 22px; color: var(--texte-2); font-size: 13px; }
.bouton-microsoft { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); font-weight: 500;
  border-radius: 8px; padding: 10px; }
.bouton-microsoft:hover { background: var(--fond); }
/* Le logo Microsoft, en quatre carrés dessinés par la feuille de style : aucune image à charger. */
.logo-ms { width: 14px; height: 14px; flex: none;
  background: linear-gradient(#f25022, #f25022) 0 0 / 6.5px 6.5px no-repeat,
              linear-gradient(#7fba00, #7fba00) 100% 0 / 6.5px 6.5px no-repeat,
              linear-gradient(#00a4ef, #00a4ef) 0 100% / 6.5px 6.5px no-repeat,
              linear-gradient(#ffb900, #ffb900) 100% 100% / 6.5px 6.5px no-repeat; }
.erreur { color: var(--alerte-texte); font-size: 13px; }

/* ─── En-tête de page et sélecteur segmenté ───────────────────────────────────────────── */
.entete-page { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.entete-page h1 { margin: 0; color: var(--titre); font-size: 18px; font-weight: 600; line-height: 1.2; }
.periode { display: inline-flex; gap: 2px; padding: 3px; background: var(--segment); border-radius: 8px; }
.periode button { border: 0; background: transparent; color: var(--texte-2); border-radius: 6px; padding: 4px 12px; font-size: 13px; }
.periode button:hover { color: var(--texte); }
.periode button[aria-pressed="true"] { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

.filtres { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.filtres label { display: flex; gap: 6px; align-items: center; color: var(--texte-2); font-size: 11px;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.filtres select { padding: 5px 8px; border: 1px solid var(--bord-fort); border-radius: 8px; background: var(--surface);
  color: var(--texte); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.etat { color: var(--texte-3); min-height: 1.5em; margin-bottom: 10px; font-size: 12px; }
.etat.erreur { color: var(--alerte-texte); }

/* ─── Cartes ──────────────────────────────────────────────────────────────────────────── */
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.carte { background: var(--surface); border-radius: 12px; box-shadow: var(--ombre); padding: 16px; }
.carte h2 { margin: 0 0 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.carte h2 .chemin { font-family: var(--mono); color: var(--titre); font-weight: 600; font-size: 15px; }
.carte h2 .mono { color: var(--texte-3); font-weight: 400; font-size: 12px; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.chiffre { display: flex; flex-direction: column-reverse; gap: 2px; }
.chiffre .n { font-size: 24px; font-weight: 700; color: var(--texte-fort); font-variant-numeric: tabular-nums; line-height: 1.15; }
/* L'indicateur de tête en corail, comme le chiffre d'affaires du tableau de bord de MiraPerf. */
.chiffre:first-child .n { color: var(--coral); }
.chiffre .l { color: var(--texte-2); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.latence { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; font-size: 13px; align-items: center; }
.latence > span:first-child, .latence > span:nth-child(4) { color: var(--texte-2); }
.latence .barre-l { height: 8px; border-radius: 999px; background: var(--filet); overflow: hidden; display: flex; }
.latence .barre-l span { display: block; height: 100%; }
.latence .amont { background: var(--secondary); }
.latence .passerelle { background: var(--accent); opacity: .5; }
.legende { color: var(--texte-2); font-size: 12px; margin: 8px 0 0; }
svg.serie { width: 100%; height: 48px; display: block; margin-top: 12px; }
svg.serie path.aire { fill: var(--mist); }
svg.serie path.ligne { fill: none; stroke: var(--secondary); stroke-width: 1.5; }

/* ─── Tableaux ────────────────────────────────────────────────────────────────────────── */
.tableau { overflow-x: auto; background: var(--surface); border-radius: 12px; box-shadow: var(--ombre); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
th { background: var(--fond); color: var(--texte-2); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
td { color: var(--texte); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--fond); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.vide { color: var(--texte-2); padding: 16px; margin: 0; }

/* ─── Pastilles ───────────────────────────────────────────────────────────────────────── */
.pastille { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.p-ok { background: var(--ok-fond); color: var(--ok-texte); }
.p-neutre { background: var(--neutre-fond); color: var(--neutre-texte); }
.p-ambre { background: var(--ambre-fond); color: var(--ambre-texte); }
.p-alerte { background: var(--alerte-fond); color: var(--alerte-texte); }
.puces { display: flex; flex-wrap: wrap; gap: 4px; }
.puces .pastille { font-family: var(--mono); }

dl.config { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
dl.config dt { color: var(--texte-2); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; }
dl.config dd { margin: 0; }
ul.routes { margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12.5px; }

/* ─── Écran étroit : la navigation passe en haut, les vues en ligne ───────────────────── */
@media (max-width: 767.98px) {
  .cadre { flex-direction: column; }
  .nav { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; }
  .nav-entete { padding: 0 4px; }
  .nav-groupe { order: 3; width: 100%; }
  .nav-titre, .nav-avenir { display: none; }
  .onglets { flex-direction: row; overflow-x: auto; }
  .onglets button { width: auto; white-space: nowrap; padding: 7px 10px; font-size: 13px; }
  .nav-pied { order: 2; margin: 0 0 0 auto; flex-direction: row; align-items: center; border: 0; padding: 0; }
  .nav-session #qui { display: none; }
  main { padding: 16px; }
}