:root {
  --fond: #f4f5f7;
  --carte: #ffffff;
  --encre: #1b2430;
  --discret: #5b6573;
  --filet: #dde1e7;
  --accent: #1e3a5f;
  --accent-texte: #ffffff;
  --ok: #1f7a4d;
  --ok-fond: #e7f4ed;
  --attention: #8a5a00;
  --attention-fond: #fdf3dc;
  --urgence: #b42318;
  --urgence-fond: #fdecea;
  --info: #3a5a80;
  --info-fond: #e9f0f8;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #11161d;
    --carte: #1a212b;
    --encre: #e6e9ee;
    --discret: #9aa4b2;
    --filet: #2c3542;
    --accent: #8db4e2;
    --accent-texte: #0d1520;
    --ok: #6fcf9a;
    --ok-fond: #15291f;
    --attention: #f2c063;
    --attention-fond: #2e2511;
    --urgence: #ff8a7a;
    --urgence-fond: #331614;
    --info: #9cbde4;
    --info-fond: #172433;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
code { font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); margin: 1.5rem 0 .5rem; }

.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.25rem; background: var(--carte); border-bottom: 1px solid var(--filet);
}
.marque { font-weight: 650; display: flex; align-items: center; gap: .5rem; }
.pastille { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); display: inline-block; }

main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.barre { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.discret { color: var(--discret); margin: 0; }

.bouton, .bouton-clair {
  font: inherit; font-weight: 600; border-radius: 8px; padding: .6rem 1rem; cursor: pointer; min-height: 44px;
}
.bouton { background: var(--accent); color: var(--accent-texte); border: 0; }
.bouton-clair { background: transparent; color: var(--encre); border: 1px solid var(--filet); min-height: 36px; padding: .35rem .8rem; }
.bouton:focus-visible, .bouton-clair:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 1rem; }
.carte {
  background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; padding: 1.25rem;
  border-top: 4px solid var(--filet); min-width: 0;
}
.carte.large { margin-top: 1rem; }
.carte-ok { border-top-color: var(--ok); }
.carte-attention { border-top-color: var(--attention); }
.carte-urgence { border-top-color: var(--urgence); }
.carte-titre { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }

.etat { font-size: .8rem; font-weight: 650; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.etat-ok { color: var(--ok); background: var(--ok-fond); }
.etat-attention { color: var(--attention); background: var(--attention-fond); }
.etat-urgence { color: var(--urgence); background: var(--urgence-fond); }

.message { padding: .65rem .9rem; border-radius: 8px; margin: .5rem 0; }
.message-ok { color: var(--ok); background: var(--ok-fond); }
.message-attention { color: var(--attention); background: var(--attention-fond); }
.message-urgence { color: var(--urgence); background: var(--urgence-fond); }

.alertes { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.alerte { padding: .6rem .8rem; border-radius: 8px; border-left: 4px solid; display: grid; gap: .15rem; overflow-wrap: anywhere; }
.alerte-urgence { background: var(--urgence-fond); border-color: var(--urgence); }
.alerte-urgence strong { color: var(--urgence); }
.alerte-attention { background: var(--attention-fond); border-color: var(--attention); }
.alerte-attention strong { color: var(--attention); }
.alerte-info { background: var(--info-fond); border-color: var(--info); }
.alerte-info strong { color: var(--info); }
.texte-urgence { color: var(--urgence); }

.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau th[scope="row"] { font-weight: 500; color: var(--discret); width: 55%; }
.tableau thead th { font-size: .8rem; color: var(--discret); font-weight: 600; }
.tableau tr.risque th, .tableau tr.risque summary { color: var(--urgence); font-weight: 650; }
.defile { overflow-x: auto; }
.historique td, .historique th { white-space: nowrap; }

details summary { cursor: pointer; }
.noms { margin: .4rem 0 0; padding-left: 1.1rem; }

.jauge { display: block; margin-top: .3rem; max-width: 100%; }
.jauge-fond { fill: var(--filet); }
.jauge-ok { fill: var(--ok); }
.jauge-attention { fill: var(--attention); }
.jauge-urgence { fill: var(--urgence); }
.courbe polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }

.connexion { max-width: 420px; margin: 3rem auto; }
.connexion form { display: grid; gap: .5rem; margin-top: 1rem; }
.connexion label { font-weight: 600; margin-top: .5rem; }
.connexion input {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--filet); border-radius: 8px;
  background: var(--fond); color: var(--encre); min-height: 44px;
}
.connexion .bouton { margin-top: 1rem; }

@media (max-width: 600px) {
  .tableau th[scope="row"] { width: 50%; }
  .carte { padding: 1rem; }
}

.alerte .noms { margin: .2rem 0 0; }
.alerte form { margin-top: .4rem; }
.alerte .bouton-clair { background: var(--carte); }