/* Feuille de style unique de l'interface web (servie par Apache, aucune police ni ressource extérieure : WEB-02). */
:root {
  --fond: #f6f7f8; --carte: #fff; --texte: #1d2327; --doux: #5f6b73; --accent: #11a792; --bord: #dde2e5;
  --alerte: #c62828; --alerte-fond: #fdecea; --perte: #b26a00; --perte-fond: #fff4e0; --gris-fond: #eef0f2;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #15191c; --carte: #1f2529; --texte: #e8ecee; --doux: #a3adb3; --bord: #333c42;
          --alerte-fond: #3a1d1d; --perte-fond: #3a2c14; --gris-fond: #262d32; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--fond); color: var(--texte); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--carte); border-bottom: 1px solid var(--bord); }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.marque { font-weight: 700; color: var(--accent); text-decoration: none; font-size: 1.15em; }
.qui { color: var(--doux); font-size: .9em; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4em; margin: 6px 0 14px; }
h2 { font-size: 1.15em; margin: 22px 0 8px; }
a { color: var(--accent); }
.message { padding: 10px 12px; border-radius: 6px; }
.message.ok { background: #e6f6f3; color: #0b5e52; }
.message.erreur { background: var(--alerte-fond); color: var(--alerte); }
.carte-form { display: grid; gap: 12px; max-width: 420px; background: var(--carte); padding: 16px; border: 1px solid var(--bord); border-radius: 8px; }
label { display: grid; gap: 4px; font-weight: 600; }
label.case { display: flex; align-items: center; gap: 8px; font-weight: 400; }
input, select { font: inherit; padding: 9px 10px; border: 1px solid var(--bord); border-radius: 6px; background: var(--carte); color: var(--texte); }
button, .bouton { font: inherit; display: inline-block; padding: 10px 18px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; }
.bouton.secondaire { background: var(--gris-fond); color: var(--texte); }
button.lien { background: none; color: var(--accent); padding: 0; text-decoration: underline; }
button.petit { padding: 6px 10px; font-size: .9em; }
.enligne { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.carte { display: grid; gap: 2px; padding: 14px; background: var(--carte); border: 1px solid var(--bord); border-left: 6px solid var(--accent); border-radius: 8px; color: inherit; text-decoration: none; }
.carte .valeur { font-size: 1.9em; font-weight: 700; }
.carte .lieu, .lieu, .age, .note { color: var(--doux); font-size: .9em; }
.carte .etat { font-weight: 600; }
.etat-alerte, .etat-sonde { border-left-color: var(--alerte); background: var(--alerte-fond); }
.etat-alerte .etat, .etat-sonde .etat { color: var(--alerte); }
.etat-perte { border-left-color: var(--perte); background: var(--perte-fond); }
.etat-perte .etat { color: var(--perte); }
.etat-maintenance, .etat-attente, .etat-detache { border-left-color: var(--doux); }
.periodes { display: flex; gap: 8px; margin: 8px 0; }
.periodes a { padding: 6px 12px; border-radius: 16px; background: var(--gris-fond); text-decoration: none; color: var(--texte); }
.periodes a.actif { background: var(--accent); color: #fff; }
.courbe { width: 100%; height: auto; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; }
.courbe .grille { stroke: var(--bord); stroke-width: 1; }
.courbe .grad { fill: var(--doux); font-size: 11px; }
.courbe .limite { stroke: var(--alerte); stroke-width: 1.5; stroke-dasharray: 6 4; }
.courbe .bande { fill: var(--accent); fill-opacity: .18; stroke: none; }
.courbe .valeur { fill: none; stroke: var(--accent); stroke-width: 2; }
.courbe .point { fill: var(--accent); stroke: var(--carte); stroke-width: 1.5; }
.courbe .vide { fill: var(--doux); font-size: 16px; }
table { border-collapse: collapse; width: 100%; background: var(--carte); margin-top: 12px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--bord); font-size: .95em; }
tr.hors td { color: var(--alerte); font-weight: 600; }
tr.trou td { color: var(--perte); font-style: italic; background: var(--perte-fond); }
tr.change td { font-weight: 700; }
.cle { font: 1.15em/1.6 ui-monospace, Consolas, monospace; letter-spacing: .05em; word-break: break-all; }
.codes { font: 1.1em/1.8 ui-monospace, Consolas, monospace; }
.comptes li { margin: 8px 0; }
.comptes .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
fieldset { border: 1px solid var(--bord); border-radius: 6px; display: grid; gap: 4px; }
@media (max-width: 600px) {
  .histo th:nth-child(3), .histo td:nth-child(3), .histo th:nth-child(4), .histo td:nth-child(4) { display: none; }
}