:root {
  --fond: #0f1216;
  --panneau: #171c22;
  --panneau-2: #1e252d;
  --bord: #2a333d;
  --texte: #e7edf3;
  --muet: #93a1b1;
  --accent: #4cb4ff;
  --accent-2: #47d6a0;
  --alerte: #ff7a7a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 24px clamp(16px, 4vw, 48px) 40px;
  background: radial-gradient(1200px 600px at 15% -10%, #1b2530 0%, var(--fond) 55%);
  color: var(--texte);
  font: 15px/1.5 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9em; color: var(--accent); }
.entete { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.sous-titre { margin: 4px 0 0; color: var(--muet); font-size: .9rem; }
.horodatage { margin: 0; color: var(--muet); font-size: .8rem; }
h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 600; }
.muet { color: var(--muet); font-weight: 400; font-size: .85em; }
.alerte { background: #3a1d1d; border: 1px solid var(--alerte); color: #ffc9c9; padding: 12px 14px; border-radius: 10px; }
.cartes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 18px; }
.carte { background: linear-gradient(160deg, var(--panneau-2), var(--panneau)); border: 1px solid var(--bord); border-radius: 14px; padding: 16px 18px; }
.etiquette { margin: 0; color: var(--muet); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.valeur { margin: 6px 0 2px; font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.detail { margin: 0; color: var(--muet); font-size: .82rem; font-variant-numeric: tabular-nums; }
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 18px; }
.panneau { background: var(--panneau); border: 1px solid var(--bord); border-radius: 14px; padding: 18px; }
.zone-graphique { position: relative; height: 240px; }
.modeles { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.modeles li::marker { color: var(--accent); font-weight: 700; }
.nom-modele { font-family: ui-monospace, Menlo, monospace; font-size: .86rem; }
.mesure { color: var(--muet); font-size: .82rem; font-variant-numeric: tabular-nums; }
.defilement { max-height: 300px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--bord); text-align: left; font-size: .86rem; }
th { position: sticky; top: 0; background: var(--panneau); color: var(--muet); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:hover { background: #1b222a; }
.droite { text-align: right; }
.pied { color: var(--muet); font-size: .78rem; margin-top: 8px; }
@media (max-width: 640px) {
  .valeur { font-size: 1.4rem; }
  .zone-graphique { height: 200px; }
}