/* Feuille unique : la CSP interdit tout style en ligne. */
:root { --fond: #14161a; --texte: #e6e6e6; --faible: #9aa0a6; --ok: #3fb950; --ko: #f85149; --alerte: #d29922; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte);
       font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
      padding: .75rem 1rem; border-bottom: 1px solid #2a2e35; }
nav a { color: var(--texte); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav form { margin-left: auto; }
main { padding: 1rem; max-width: 1100px; }
h1, h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid #2a2e35;
         white-space: nowrap; }
td.message { white-space: pre-wrap; word-break: break-word; max-width: 60ch; }
.ok { color: var(--ok); } .ko { color: var(--ko); } .alerte { color: var(--alerte); }
.faible { color: var(--faible); }
.erreur { color: var(--ko); }
.cartes { display: grid; gap: 1rem;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.carte { border: 1px solid #2a2e35; border-radius: 6px; padding: .75rem; }
.graphe { width: 100%; height: auto; }
.graphe polyline { fill: none; stroke: #58a6ff; stroke-width: 2; }
.graphe text { fill: var(--faible); font-size: 11px; }
/* Le maximum de la fenêtre est un second rôle : il ne doit pas concurrencer
   la valeur actuelle, seul chiffre que l'on veut lire d'un coup d'œil. */
.graphe .sommet { fill: var(--faible); font-size: 10px; }
.graphe .vide { fill: var(--faible); }
/* Hiérarchie des cartes : l'étiquette est discrète, le chiffre domine, sa
   provenance s'énonce en petit. On consulte ce tableau en trois secondes. */
.carte h3 { margin: 0; font-size: .7rem; font-weight: normal; color: var(--faible);
            text-transform: uppercase; letter-spacing: .09em; }
.carte .valeur { margin: .1rem 0 0; font-size: 2.4rem; line-height: 1.05;
                 font-weight: 600; letter-spacing: -.02em;
                 font-variant-numeric: tabular-nums; }
.carte .valeur .unite { font-size: 1rem; font-weight: normal; color: var(--faible);
                        margin-left: .15rem; letter-spacing: 0; }
.carte .source { margin: .1rem 0 .6rem; font-size: .72rem; color: var(--faible); }
main ul { margin: .5rem 0 1.5rem; padding-left: 1.2rem; }
main li { margin: .2rem 0; }
button { font: inherit; background: #21262d; color: var(--texte);
         border: 1px solid #2a2e35; border-radius: 4px; padding: .3rem .7rem; }
label { display: block; margin: .5rem 0; }
input { font: inherit; background: #0d1117; color: var(--texte);
        border: 1px solid #2a2e35; border-radius: 4px; padding: .3rem; }
@media (max-width: 600px) { th, td { white-space: normal; } }
main a { color: #58a6ff; }
/* Le bouton de redémarrage se signale comme une action destructrice. La CSP
   interdit tout style en ligne : la règle vit donc ici. */
button.danger { border-color: var(--ko); color: var(--ko); }
button.danger:hover { background: var(--ko); color: #0d1117; }