:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --texte: #1b2430;
  --discret: #5d6b7a;
  --bord: #d5dbe3;
  --accent: #1f3a5f;
  --accent-texte: #ffffff;
  --ok: #1e7a46;
  --alerte: #a85d00;
  --danger: #b3261e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #11161d;
    --surface: #1a212b;
    --texte: #e6ebf1;
    --discret: #9aa8b8;
    --bord: #2e3947;
    --accent: #5bc0eb;
    --accent-texte: #0b1a26;
    --ok: #5fd08f;
    --alerte: #f0a742;
    --danger: #ff8a80;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 system-ui, "Segoe UI", sans-serif;
}
.barre {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--bord);
}
.barre h1 { font-size: 1.1rem; margin: 0 auto 0 0; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
h2 { font-size: 1.05rem; margin: .4rem 0 .8rem; }

.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 8px;
  padding: 1rem; margin: .8rem 0;
  display: grid; gap: .8rem;
}
label { display: grid; gap: .25rem; font-size: .9rem; color: var(--discret); }
label.case { display: flex; align-items: center; gap: .5rem; color: var(--texte); }
input, select, textarea {
  font: inherit; color: var(--texte); background: var(--fond);
  border: 1px solid var(--bord); border-radius: 6px; padding: .5rem .6rem; width: 100%;
}
input[type=checkbox] { width: 1.2rem; height: 1.2rem; }

button {
  font: inherit; cursor: pointer;
  background: var(--accent); color: var(--accent-texte);
  border: 0; border-radius: 6px; padding: .5rem .9rem;
}
button.lien { background: none; color: var(--accent); padding: .2rem 0; }
button.danger { background: var(--danger); color: #fff; }
.boutons { display: flex; gap: .6rem; flex-wrap: wrap; }

.entete-section { display: flex; justify-content: space-between; align-items: center; }
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.liste > li > button {
  width: 100%; text-align: left; background: var(--surface); color: var(--texte);
  border: 1px solid var(--bord); padding: .7rem .9rem;
}
.liste .meta { display: block; font-size: .85rem; color: var(--discret); }
.liste.compacte li { font-size: .9rem; padding: .1rem 0; }

.pastille { font-size: .8rem; padding: .15rem .55rem; border-radius: 99px; border: 1px solid var(--bord); }
.pastille.ok { color: var(--ok); border-color: var(--ok); }
.pastille.hors-ligne { color: var(--alerte); border-color: var(--alerte); }
.discret { color: var(--discret); font-size: .85rem; }
.erreur { color: var(--danger); min-height: 1.2em; margin: 0; }
summary { cursor: pointer; }
code { font-size: .9em; }
.pastille:empty { display: none; }