/* Banc d'essai : thème sombre « planche de bord », lisible en cabine. */
:root {
  --fond: #070b10;
  --surface: #111a24;
  --surface-2: #16212d;
  --encre: #e3eaf1;
  --encre-douce: #93a4b3;
  --trait: #243241;
  --magenta: #e45bb5;
  --vert: #5cc172;
  --ambre: #f0a53a;
  --rouge: #ef6b62;
  --bleu: #5fa8e8;
  --police: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --chiffres: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.45;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.entete {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; background: var(--fond); z-index: 2;
}
.entete h1 { margin: 0; font-size: 1.25rem; letter-spacing: .02em; }
.entete p { margin: 2px 0 0; color: var(--encre-douce); font-size: .85rem; }
#version { font-family: var(--chiffres); color: var(--magenta); }
.pastilles { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pastille {
  font-family: var(--chiffres); font-size: .72rem; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--trait); color: var(--encre-douce); white-space: nowrap;
}
.pastille.bon { border-color: var(--vert); color: var(--vert); }
.pastille.alerte { border-color: var(--ambre); color: var(--ambre); }

.bandeau-maj {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px;
  background: #3a1630; border: 1px solid var(--magenta);
}

main { display: grid; gap: 14px; padding: 14px 16px 24px; max-width: 720px; margin: 0 auto; }
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: 14px; display: grid; gap: 10px; }
.carte h2 { margin: 0; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.carte h3 { margin: 4px 0 0; font-size: .95rem; color: var(--encre-douce); }
.frequence { font-family: var(--chiffres); font-size: .8rem; color: var(--encre-douce); font-weight: 400; }
.frequence.bon { color: var(--vert); }
.aide { margin: 0; color: var(--encre-douce); font-size: .9rem; }
.etat-ligne { margin: 0; font-family: var(--chiffres); font-size: .8rem; color: var(--encre-douce); }

.boutons { display: flex; flex-wrap: wrap; gap: 8px; }
button {
  font: inherit; font-size: .95rem; font-weight: 600;
  min-height: 44px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--trait); background: var(--surface-2); color: var(--encre);
  cursor: pointer;
}
button.principal { background: var(--magenta); border-color: var(--magenta); color: #fff; }
button.danger { color: var(--rouge); border-color: #5a2a29; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.valeurs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.valeurs div { background: var(--surface-2); border-radius: 6px; padding: 6px 9px; min-width: 0; }
.valeurs div.large { grid-column: 1 / -1; }
.valeurs dt { font-size: .74rem; color: var(--encre-douce); letter-spacing: .02em; }
.valeurs dd { margin: 2px 0 0; font-family: var(--chiffres); font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.champ { display: grid; gap: 6px; font-size: .85rem; color: var(--encre-douce); }
.champ input {
  font: inherit; font-family: var(--chiffres); font-size: .95rem; color: var(--encre);
  background: var(--surface-2); border: 1px solid var(--trait); border-radius: 6px; padding: 10px;
}

.tableau { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { color: var(--encre-douce); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
td.chiffre { font-family: var(--chiffres); white-space: nowrap; text-align: right; }
td small { display: block; color: var(--encre-douce); }
.vide { color: var(--encre-douce); }
.ok { color: var(--vert); font-weight: 600; }
.ko { color: var(--rouge); font-weight: 600; }
.attente { color: var(--ambre); font-weight: 600; }

.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sessions li { background: var(--surface-2); border-radius: 6px; padding: 8px 10px; display: grid; gap: 8px; }
.sessions li .boutons button { min-height: 38px; font-size: .85rem; }

.protocole { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .92rem; }
.journal { margin: 0; padding-left: 0; list-style: none; font-family: var(--chiffres); font-size: .75rem; color: var(--encre-douce); display: grid; gap: 3px; max-height: 240px; overflow-y: auto; }
.pied { padding: 0 16px 28px; max-width: 720px; margin: 0 auto; font-size: .72rem; color: var(--encre-douce); }

@media (max-width: 360px) { .valeurs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }