/* Couleurs : jetons (tokens) définis une fois, réutilisés partout.
   Le mode sombre suit le réglage du téléphone / de l'ordinateur. */
:root {
  color-scheme: light;
  --fond: #f4f3f0;
  --surface: #fcfcfb;
  --bordure: #e3e2dd;
  --grille: #ecebe7;
  --texte: #0b0b0b;
  --texte-2: #52514e;
  --texte-3: #6f6e69;
  --serie-1: #2a78d6;
  --serie-1-clair: #86b6ef;
  --piste: #ecebe7;
  --ok: #0ca30c;
  --ok-texte: #006300;
  --alerte: #fab219;
  --critique: #d03b3b;
  --inconnu: #9b9a95;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #121211;
    --surface: #1a1a19;
    --bordure: #2e2e2c;
    --grille: #2a2a28;
    --texte: #f0efec;
    --texte-2: #c3c2b7;
    --texte-3: #9b9a92;
    --serie-1: #3987e5;
    --serie-1-clair: #1c5cab;
    --piste: #2e2e2c;
    --ok-texte: #4cc94c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #121211; --surface: #1a1a19; --bordure: #2e2e2c; --grille: #2a2a28;
  --texte: #f0efec; --texte-2: #c3c2b7; --texte-3: #9b9a92;
  --serie-1: #3987e5; --serie-1-clair: #1c5cab; --piste: #2e2e2c; --ok-texte: #4cc94c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 16px;
  max-width: 1180px;
  margin-inline: auto;
}
h1 { font-size: 1.5rem; margin: 0; letter-spacing: -0.01em; }
h3 { font-size: 0.95rem; margin: 0 0 12px; color: var(--texte-2); font-weight: 600; }
.entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.sous-titre { margin: 4px 0 0; color: var(--texte-3); font-size: 0.85rem; }
.badge-demo {
  font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--serie-1); color: var(--serie-1);
}
.titre-section { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-3); margin: 28px 0 10px; font-weight: 600; }
.fraicheur .titre-section { margin-top: 0; }

/* Pastilles de fraîcheur */
.pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 999px; padding: 4px 10px 4px 8px; font-size: 0.8rem; color: var(--texte-2);
}
.pastille .point { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pastille .age { color: var(--texte-3); }
.etat-ok .point { background: var(--ok); }
.etat-alerte .point { background: var(--alerte); }
.etat-critique .point { background: var(--critique); }
.etat-inconnu .point { background: var(--inconnu); }

/* Cartes */
.grille { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grille { grid-template-columns: repeat(2, 1fr); } .carte-large { grid-column: 1 / -1; } }
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 16px; min-width: 0; }
.carte-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.carte-entete .src { font-size: 0.72rem; color: var(--texte-3); white-space: nowrap; }

.chiffre { font-size: 2rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chiffre-moyen { font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.legende { color: var(--texte-3); font-size: 0.8rem; }
.ligne-chiffres { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-bottom: 14px; }
.ecart { font-size: 0.8rem; color: var(--texte-2); margin-top: 2px; }
.ecart.hausse::before { content: "▲ "; color: var(--ok); }
.ecart.baisse::before { content: "▼ "; color: var(--critique); }
.ecart.stable::before { content: "● "; color: var(--inconnu); }

/* Listes et tableaux */
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--grille); font-size: 0.88rem; }
.liste li:first-child { border-top: 0; }
.liste .val { font-variant-numeric: tabular-nums; color: var(--texte-2); white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { text-align: left; color: var(--texte-3); font-weight: 500; font-size: 0.75rem; padding: 4px 0; }
td { padding: 6px 0; border-top: 1px solid var(--grille); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 10px; }
.sous-grille { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sous-grille { grid-template-columns: 1fr 1fr; } }

/* Graphiques */
.graph { width: 100%; height: auto; display: block; overflow: visible; }
.graph .axe { fill: var(--texte-3); font-size: 11px; }
.histo { min-height: 60px; }
.graph .ligne-grille { stroke: var(--grille); stroke-width: 1; }
.graph .barre { fill: var(--serie-1); }
.graph .barre-passee { fill: var(--serie-1-clair); }
.graph .cible { fill: transparent; cursor: pointer; }
.graph .sparkline { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graph .point-fin { fill: var(--serie-1); stroke: var(--surface); stroke-width: 2; }
.graph .objectif { stroke: var(--texte-2); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* Jauge (meter) */
.jauge { position: relative; height: 12px; background: var(--piste); border-radius: 6px; margin: 10px 0 30px; }
.jauge .rempli { position: absolute; inset: 0 auto 0 0; background: var(--serie-1); border-radius: 6px; }
.jauge .projection { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--serie-1-clair) 0 3px, transparent 3px 6px); border-radius: 0 6px 6px 0; }
.jauge .repere { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texte-2); }
.jauge .repere span { position: absolute; top: 20px; transform: translateX(-50%); font-size: 0.72rem; color: var(--texte-3); white-space: nowrap; }
.jauge .repere.fin span { transform: translateX(-100%); }

/* Barres horizontales (sources de trafic, projets) */
.hbarres { display: grid; gap: 8px; }
.hbarre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 0.82rem; }
.hbarre .piste { grid-column: 1 / -1; height: 6px; background: var(--piste); border-radius: 3px; }
.hbarre .piste i { display: block; height: 100%; background: var(--serie-1); border-radius: 3px; }
.hbarre .val { color: var(--texte-2); font-variant-numeric: tabular-nums; }

.statut { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.statut::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.statut.ok { color: var(--ok-texte); }
.statut.critique { color: var(--critique); }
.note { font-size: 0.78rem; color: var(--texte-3); margin: 10px 0 0; }
.note.alerte { color: var(--texte); background: color-mix(in srgb, var(--alerte) 18%, transparent); padding: 6px 8px; border-radius: 6px; }
.vide { color: var(--texte-3); font-size: 0.88rem; }
details { margin-top: 10px; font-size: 0.82rem; color: var(--texte-2); }
summary { cursor: pointer; color: var(--texte-3); }

.infobulle {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--texte); color: var(--surface);
  font-size: 0.78rem; padding: 5px 8px; border-radius: 6px; white-space: nowrap;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }