/*
  style.css — Habillage de la console technique.

  Trois partis pris :

  • CLAIR ET SOMBRE, sans bouton. La console se consulte à 9 h au bureau et à
    23 h sur un téléphone ; le thème suit celui du système.
  • LES NIVEAUX ONT UNE FORME, PAS SEULEMENT UNE COULEUR. Chaque état porte
    aussi un signe (✓ ▲ ✕ ?) : un bilan de sécurité qui ne se lit qu'en couleur
    ne se lit pas du tout pour une partie des gens, ni sur une capture
    imprimée en noir et blanc.
  • RIEN NE VIENT DE L'EXTÉRIEUR. Aucune police ni feuille distante : la
    console doit s'afficher même quand le serveur n'a pas d'accès sortant.
*/

:root {
  --accent: #2563eb;

  --fond: #f5f6f8;
  --fond-carte: #ffffff;
  --fond-doux: #eef0f4;
  --bord: #d9dde5;
  --texte: #1a1d24;
  --texte-doux: #5c6472;

  --ok: #17803d;
  --ok-fond: #e7f6ec;
  --warn: #9a6200;
  --warn-fond: #fdf3e0;
  --err: #b3261e;
  --err-fond: #fdeceb;
  --inconnu: #55596b;
  --inconnu-fond: #eceef3;

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(16, 20, 30, .06), 0 4px 12px rgba(16, 20, 30, .05);
  --largeur: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14161b;
    --fond-carte: #1c1f26;
    --fond-doux: #23262f;
    --bord: #333845;
    --texte: #e8eaf0;
    --texte-doux: #9aa1b1;

    --ok: #56d68a;
    --ok-fond: #10291a;
    --warn: #f0b449;
    --warn-fond: #2c2110;
    --err: #ff8a80;
    --err-fond: #2e1514;
    --inconnu: #a8adbd;
    --inconnu-fond: #24272f;

    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

/* ── Barre du haut ───────────────────────────────────────────────────────── */
.barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bord);
}

.barre-titre { display: flex; align-items: center; gap: 12px; }
.barre-titre strong { display: block; font-size: 1.05rem; }
.barre-titre small { color: var(--texte-doux); font-size: .78rem; }

.pastille-app {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); flex: none;
}

.barre-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qui { font-size: .85rem; color: var(--texte-doux); }
.qui em { font-style: normal; opacity: .75; }

.lien-discret {
  color: var(--texte-doux); text-decoration: none; font-size: .85rem;
  padding: 4px 8px; border-radius: 6px;
}
.lien-discret:hover { background: var(--fond-doux); color: var(--texte); }

/* ── Onglets ─────────────────────────────────────────────────────────────── */
.onglets {
  display: flex; gap: 2px; overflow-x: auto;
  padding: 0 12px;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bord);
  scrollbar-width: thin;
}

.onglet {
  flex: none;
  padding: 11px 15px;
  color: var(--texte-doux); text-decoration: none;
  font-size: .9rem; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.onglet:hover { color: var(--texte); background: var(--fond-doux); }
.onglet.courant {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}

/* ── Mise en page ────────────────────────────────────────────────────────── */
.page { max-width: var(--largeur); margin: 0 auto; padding: 22px 20px 60px; }

h1 { font-size: 1.35rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 28px 0 12px; }
h3 { font-size: .92rem; margin: 0 0 8px; }
.sous-titre { color: var(--texte-doux); margin: 0 0 22px; font-size: .9rem; }

.grille { display: grid; gap: 14px; }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
}
.carte-plate { box-shadow: none; }

/* ── Vignettes d'état ────────────────────────────────────────────────────── */
.vignette { display: flex; flex-direction: column; gap: 6px; }
.vignette .etiquette {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-doux);
}
.vignette .valeur { font-size: 1.5rem; font-weight: 650; line-height: 1.15; }
.vignette .detail { font-size: .82rem; color: var(--texte-doux); }
.vignette a { color: var(--accent); }

/* ── Niveaux ─────────────────────────────────────────────────────────────── */
/* La couleur ne porte jamais l'information seule : le signe la double. */
.niveau {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.niveau::before { font-weight: 700; }
.niveau-ok      { color: var(--ok);      background: var(--ok-fond); }
.niveau-ok::before      { content: "✓"; }
.niveau-warn    { color: var(--warn);    background: var(--warn-fond); }
.niveau-warn::before    { content: "▲"; }
.niveau-err     { color: var(--err);     background: var(--err-fond); }
.niveau-err::before     { content: "✕"; }
.niveau-unknown { color: var(--inconnu); background: var(--inconnu-fond); }
.niveau-unknown::before { content: "?"; }

.bord-ok      { border-left: 3px solid var(--ok); }
.bord-warn    { border-left: 3px solid var(--warn); }
.bord-err     { border-left: 3px solid var(--err); }
.bord-unknown { border-left: 3px solid var(--inconnu); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  font: inherit; font-size: .88rem; font-weight: 550;
  color: #fff; background: var(--accent);
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; text-decoration: none;
}
.bouton:hover { filter: brightness(1.08); }
.bouton:disabled { opacity: .55; cursor: not-allowed; filter: none; }

.bouton-doux {
  color: var(--texte); background: var(--fond-carte); border-color: var(--bord);
}
.bouton-doux:hover { background: var(--fond-doux); filter: none; }

.bouton-danger { background: var(--err); }

.bouton-petit { padding: 5px 10px; font-size: .82rem; }

.actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ── Formulaires ─────────────────────────────────────────────────────────── */
label { display: block; font-size: .85rem; font-weight: 550; margin-bottom: 5px; }
.aide { font-size: .8rem; color: var(--texte-doux); font-weight: 400; margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=time], input[type=url], select, textarea {
  width: 100%; padding: 9px 11px;
  font: inherit; font-size: .92rem;
  color: var(--texte); background: var(--fond);
  border: 1px solid var(--bord); border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
textarea { min-height: 90px; resize: vertical; }

.champ { margin-bottom: 14px; }
.ligne-champs { display: flex; gap: 12px; flex-wrap: wrap; }
.ligne-champs > * { flex: 1 1 180px; }

.bascule { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.bascule input { width: auto; margin-top: 3px; flex: none; }
.bascule label { margin: 0; }

/* ── Tableaux ────────────────────────────────────────────────────────────── */
.tableau-cadre { overflow-x: auto; border-radius: var(--rayon); }
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th, td {
  padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--bord); vertical-align: top;
}
th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texte-doux); font-weight: 600;
  background: var(--fond-doux);
  position: sticky; top: 0;
}
tbody tr:hover { background: var(--fond-doux); }
td.serre { white-space: nowrap; }

/* ── Listes de contrôles ─────────────────────────────────────────────────── */
.sonde {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--fond-carte);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  margin-bottom: 8px;
  cursor: pointer;
}
.sonde:hover { background: var(--fond-doux); }
.sonde .corps { flex: 1; min-width: 0; }
.sonde .titre { font-weight: 600; font-size: .93rem; }
.sonde .resume { color: var(--texte-doux); font-size: .85rem; }
.sonde .fleche { color: var(--texte-doux); font-size: .8rem; flex: none; }

.details {
  margin: -4px 0 10px;
  padding: 12px 14px;
  background: var(--fond-doux);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow-y: auto;
}

/* ── Divers ──────────────────────────────────────────────────────────────── */
.puce {
  display: inline-block; padding: 2px 8px;
  font-size: .76rem; font-weight: 600;
  border-radius: 999px;
  background: var(--fond-doux); color: var(--texte-doux);
}
.puce-accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

.vide {
  padding: 34px 20px; text-align: center;
  color: var(--texte-doux); font-size: .9rem;
}

.avis {
  padding: 12px 14px; border-radius: var(--rayon);
  font-size: .88rem; margin-bottom: 16px;
  border: 1px solid var(--bord);
}
.avis-info { background: var(--fond-doux); }
.avis-warn { background: var(--warn-fond); color: var(--warn); border-color: transparent; }
.avis-err  { background: var(--err-fond);  color: var(--err);  border-color: transparent; }
.avis-ok   { background: var(--ok-fond);   color: var(--ok);   border-color: transparent; }
.avis strong { display: block; margin-bottom: 3px; }

.jauge {
  height: 6px; border-radius: 999px; background: var(--fond-doux);
  overflow: hidden; margin-top: 7px;
}
.jauge span { display: block; height: 100%; background: var(--accent); }
.jauge.pleine span { background: var(--err); }

code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .85em;
  background: var(--fond-doux); padding: 1px 5px; border-radius: 4px;
}

/* ── Boîtes de dialogue ──────────────────────────────────────────────────── */
/* Jamais confirm() ni alert() : ils sont gris, hors charte, et bloquent le fil
   d'exécution. */
.voile {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10, 12, 18, .55);
}
.boite {
  width: 100%; max-width: 500px; max-height: 88vh; overflow-y: auto;
  background: var(--fond-carte);
  border: 1px solid var(--bord); border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.boite h2 { margin: 0 0 6px; font-size: 1.1rem; }
.boite .sous-titre { margin-bottom: 18px; }
.boite-actions {
  display: flex; gap: 9px; justify-content: flex-end;
  margin-top: 20px; flex-wrap: wrap;
}

/* ── Notifications ───────────────────────────────────────────────────────── */
.toasts {
  position: fixed; z-index: 80; bottom: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 9px;
  max-width: min(400px, calc(100vw - 36px));
}
.toast {
  padding: 11px 15px; border-radius: 9px;
  background: var(--fond-carte); border: 1px solid var(--bord);
  box-shadow: var(--ombre); font-size: .88rem;
  animation: entree .18s ease-out;
}
.toast-ok  { border-left: 3px solid var(--ok); }
.toast-err { border-left: 3px solid var(--err); }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } }

/* ── Page de connexion ───────────────────────────────────────────────────── */
.centre {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.connexion { width: 100%; max-width: 385px; }
.connexion .marque { text-align: center; margin-bottom: 24px; }
.connexion .marque .pastille-app {
  width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 12px;
}
.connexion .marque strong { display: block; font-size: 1.15rem; }
.connexion .marque small { color: var(--texte-doux); font-size: .82rem; }
.connexion .bouton { width: 100%; justify-content: center; margin-top: 6px; }
.connexion .note { text-align: center; font-size: .78rem; color: var(--texte-doux); margin-top: 18px; }

.code-2fa {
  text-align: center; letter-spacing: .5em; font-size: 1.4rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  padding-left: .5em;
}

.qr {
  display: flex; justify-content: center; padding: 16px;
  background: #fff; border-radius: var(--rayon); margin-bottom: 14px;
}
.qr svg { width: 100%; max-width: 210px; height: auto; }

.secret {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem; text-align: center; letter-spacing: .1em;
  padding: 11px; border-radius: 8px;
  background: var(--fond-doux); word-break: break-all;
}

/* ── Téléphone ───────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .page { padding: 16px 14px 50px; }
  .barre { padding: 10px 14px; }
  .barre-titre small { display: none; }
  .onglet { padding: 10px 12px; font-size: .85rem; }
  .vignette .valeur { font-size: 1.3rem; }
  h1 { font-size: 1.2rem; }
  /* Les tableaux larges défilent dans leur cadre, jamais la page entière. */
  .tableau-cadre { margin-inline: -14px; padding-inline: 14px; }
}

@media print {
  .barre-actions, .onglets, .toasts, .actions { display: none; }
  body { background: #fff; }
  .carte, .sonde { box-shadow: none; break-inside: avoid; }
}