/* Console Níunda : sobre, lisible, clair et sombre. Aucune ressource tierce (polices système). */
:root {
  --fond: #f6f5f1;
  --surface: #ffffff;
  --texte: #1d1c1a;
  --discret: #66625a;
  --bord: #dedad1;
  --accent: #6b4f1d;
  --sain: #1f7a3e;
  --degrade: #a86400;
  --malade: #b42318;
  --injoignable: #5b5b66;
  --barre: #8a6a2f;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16150f;
    --surface: #201e17;
    --texte: #ece8de;
    --discret: #a9a397;
    --bord: #39352a;
    --accent: #d9b56a;
    --sain: #5cc283;
    --degrade: #e9a23b;
    --malade: #f07467;
    --injoignable: #a0a0ad;
    --barre: #c79c4d;
  }
}

* { box-sizing: border-box; }

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

a { color: var(--accent); }

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
}

.marque { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--texte); }
.marque span { font-weight: 400; color: var(--discret); }

nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; }
nav a { text-decoration: none; color: var(--discret); padding: 0.2rem 0; border-bottom: 2px solid transparent; }
nav a.actif, nav a:hover { color: var(--texte); border-bottom-color: var(--accent); }

.deconnexion { display: flex; gap: 0.75rem; align-items: center; color: var(--discret); font-size: 0.9rem; }

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

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.chiffre { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.legende { color: var(--discret); font-size: 0.85rem; }
.discret { color: var(--discret); }

.defilement { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--discret); font-weight: 600; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 650; }

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-weight: 550;
}
.pastille::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: currentColor; }
.Sain { color: var(--sain); }
.Degrade { color: var(--degrade); }
.Malade { color: var(--malade); }
.Injoignable, .Inconnu { color: var(--injoignable); }

.etiquette {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  font-size: 0.8rem;
  white-space: nowrap;
}
.etiquette.alerte { border-color: var(--malade); color: var(--malade); }
.etiquette.ok { border-color: var(--sain); color: var(--sain); }
.etiquette.attente { border-color: var(--degrade); color: var(--degrade); }

form.ligne { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
form.pile { display: grid; gap: 0.9rem; max-width: 640px; }
label { display: grid; gap: 0.25rem; font-weight: 550; font-size: 0.9rem; }
label.case { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
input, select, textarea {
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}
textarea { min-height: 5rem; }

button, .bouton {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--surface);
  border-radius: 6px;
  padding: 0.45rem 1rem;
  text-decoration: none;
  display: inline-block;
}
button.secondaire, .bouton.secondaire { background: transparent; color: var(--accent); }
button.danger { background: transparent; border-color: var(--malade); color: var(--malade); }
button.lien { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; }

.message { padding: 0.75rem 1rem; border-radius: 6px; border: 1px solid var(--bord); background: var(--surface); margin-bottom: 1rem; }
.message.erreur { border-color: var(--malade); color: var(--malade); }
.message.ok { border-color: var(--sain); }

.cle {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  word-break: break-all;
  background: var(--fond);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px dashed var(--accent);
}

.connexion { max-width: 380px; margin: 4rem auto; }
.qr { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 6px; }

.barres { width: 100%; height: 160px; display: block; }
.barres rect { fill: var(--barre); }
.barres text { fill: var(--discret); font-size: 10px; }

.onglets { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

@media (max-width: 640px) {
  main { padding: 1rem; }
  .entete { padding: 0.75rem 1rem; }
}