:root {
  --fond: #f6f7f9; --carte: #fff; --texte: #1d2330; --discret: #667085; --trait: #dde1e8;
  --ok: #17803d; --ko: #b42318; --attente: #a15c07; --accent: #2150c4;
  --ds-fond: #fdf1e7; --ds-trait: #e8833a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14171d; --carte: #1d2129; --texte: #e6e8ec; --discret: #98a2b3; --trait: #333a46;
    --ok: #4ade80; --ko: #f87171; --attente: #fbbf24; --accent: #7aa2ff;
    --ds-fond: #33241a; --ds-trait: #c96a24;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; background: var(--fond); color: var(--texte); }
a { color: var(--accent); }
code { font-size: .9em; }
.barre { padding: .8rem 1rem; border-bottom: 1px solid var(--trait); background: var(--carte);
  display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; align-items: baseline; }
.barre h1 { font-size: 1.15rem; margin: 0; }
.resume { margin: 0; color: var(--discret); }
.compte { margin: 0 0 0 auto; color: var(--discret); }
.compte button { margin-left: .5rem; padding: .2rem .6rem; }
.connexion { max-width: 22rem; margin: 12vh auto 0; padding: 1.4rem 1.6rem; background: var(--carte);
  border: 1px solid var(--trait); border-radius: 10px; }
.connexion h1 { font-size: 1.2rem; margin: 0 0 1rem; }
.connexion label { display: block; margin: .8rem 0 .25rem; font-weight: 600; }
.connexion input { width: 100%; font: inherit; padding: .45rem .6rem; border: 1px solid var(--trait);
  border-radius: 6px; background: var(--fond); color: var(--texte); }
.connexion button { width: 100%; margin-top: 1.2rem; padding: .5rem; }
.connexion .ko { margin: 0 0 .5rem; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: .8rem 1rem; }
.carte h2 { font-size: 1rem; margin: 0 0 .4rem; }
.carte p { margin: .3rem 0; }
.discret { color: var(--discret); font-size: .9em; }
.ok { color: var(--ok); } .ko { color: var(--ko); } .attente { color: var(--attente); font-size: .85em; }
pre.extrait { white-space: pre-wrap; font-size: .8rem; max-height: 16rem; overflow: auto;
  background: var(--fond); padding: .5rem; border-radius: 4px; }
button { font: inherit; cursor: pointer; border-radius: 6px; padding: .35rem .8rem;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; }
button.secondaire, button.retirer { background: transparent; color: var(--accent); }
button.retirer { border-color: var(--ko); color: var(--ko); }
button:disabled { opacity: .5; cursor: wait; }
#message { margin: 1rem 0 0; padding: .6rem .9rem; border-radius: 6px; white-space: pre-wrap;
  background: var(--carte); border: 1px solid currentColor; }
.alerte { margin-top: 1rem; padding: .5rem 1rem; border: 1px solid var(--attente); border-radius: 6px; }
.filtres { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: 1.2rem 0 .4rem; }
.filtres input[type=search] { font: inherit; padding: .35rem .6rem; min-width: 0; flex: 1 1 14rem;
  border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); color: var(--texte); }
.types { display: flex; gap: .8rem; }
.niveau > h2 { font-size: 1.2rem; margin: 1.4rem 0 .3rem; }
.chapitre h3 { font-size: 1rem; margin: 1rem 0 .3rem; color: var(--discret); }
.chapitre, .journal { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; }
td { padding: .45rem .6rem; border-top: 1px solid var(--trait); vertical-align: middle; }
tr:first-child td { border-top: 0; }
tr.type-eval { background: var(--ds-fond); box-shadow: inset 4px 0 var(--ds-trait); }
.col-type { width: 4.5rem; } .col-date { width: 7.5rem; white-space: nowrap; }
.col-action { width: 9rem; text-align: right; } .col-etat { width: 15rem; }
.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .45rem;
  border-radius: 4px; border: 1px solid var(--trait); }
.badge-eval { border-color: var(--ds-trait); color: var(--ds-trait); }
.fichier { display: block; color: var(--discret); font-size: .78rem; }
.etat { font-weight: 600; margin-right: .3rem; }
tr.en-ligne .etat { color: var(--ok); } tr.hors-ligne .etat { color: var(--discret); }
.raison { font-size: .85em; color: var(--discret); }
.col-etat .attente, .col-etat .ko, .col-date .attente { display: block; }
.journal h2 { font-size: 1.1rem; margin: 2rem 0 .4rem; }
.journal td { font-size: .88rem; }