:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #1c2330;
  --discret: #5b6576;
  --bord: #dde1e7;
  --accent: #1f3a5f;
  --accent-texte: #ffffff;
  --ok: #1e6b3a;
  --ok-fond: #e5f3ea;
  --erreur: #9b1c1c;
  --erreur-fond: #fbe9e9;
  --s-inbox: #e8eaee; --s-backlog: #e3e8f2; --s-pret: #dcebf9; --s-en_cours: #fff1cc;
  --s-a_valider: #f6ddf0; --s-a_reprendre: #fde2cf; --s-termine: #dff1e4; --s-annule: #eeeeee;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #12161d; --surface: #1b212b; --texte: #e6e9ee; --discret: #9aa4b3; --bord: #2d3542;
    --accent: #8fb4e3; --accent-texte: #0f1620; --ok: #8fd6a6; --ok-fond: #183324;
    --erreur: #f2a3a3; --erreur-fond: #3a1a1a;
    --s-inbox: #2a2f38; --s-backlog: #283246; --s-pret: #1f3550; --s-en_cours: #4a3d12;
    --s-a_valider: #4a2542; --s-a_reprendre: #4b2e1a; --s-termine: #1d3b27; --s-annule: #2b2b2b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #12161d; --surface: #1b212b; --texte: #e6e9ee; --discret: #9aa4b3; --bord: #2d3542;
  --accent: #8fb4e3; --accent-texte: #0f1620; --ok: #8fd6a6; --ok-fond: #183324;
  --erreur: #f2a3a3; --erreur-fond: #3a1a1a;
  --s-inbox: #2a2f38; --s-backlog: #283246; --s-pret: #1f3550; --s-en_cours: #4a3d12;
  --s-a_valider: #4a2542; --s-a_reprendre: #4b2e1a; --s-termine: #1d3b27; --s-annule: #2b2b2b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: .4rem 0 .6rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }

.barre {
  position: sticky; top: 0; z-index: 1; background: var(--accent); color: var(--accent-texte);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.barre a { color: var(--accent-texte); text-decoration: none; }
.marque { font-weight: 700; font-size: 1.1rem; }
.barre nav { display: flex; align-items: center; gap: 14px; }
.barre nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.bouton-nouvelle {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--accent-texte); font-size: 1.3rem; font-weight: 700; line-height: 1;
}

.message { padding: 10px 12px; border-radius: 8px; margin: 0 0 12px; background: var(--ok-fond); color: var(--ok); }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); }
.vide, .aide { color: var(--discret); margin: .3rem 0; }
.compte {
  font-size: .8rem; font-weight: 600; background: var(--bord); border-radius: 999px; padding: 1px 8px;
}

.rubrique, details, .decisions, section {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 10px;
  padding: 14px; margin-bottom: 14px;
}
.rubrique-a_valider { border-left: 4px solid #b0479a; }
.rubrique-bloque_retard { border-left: 4px solid var(--erreur); }

ul.taches { list-style: none; margin: 0; padding: 0; }
.tache a { display: block; padding: 10px 0; border-top: 1px solid var(--bord); color: inherit; text-decoration: none; }
.tache:first-child a { border-top: 0; padding-top: 2px; }
.ref { color: var(--discret); font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .3rem; }
.titre { font-weight: 600; }
.meta { display: block; color: var(--discret); font-size: .88rem; margin-top: 2px; }
.retard { color: var(--erreur); font-weight: 600; }
.prio-1 { color: var(--erreur); }
.pastille {
  display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 1px 8px;
  color: var(--texte); background: var(--s-inbox); margin-right: .2rem;
}
.statut-backlog { background: var(--s-backlog); } .statut-pret { background: var(--s-pret); }
.statut-en_cours { background: var(--s-en_cours); } .statut-a_valider { background: var(--s-a_valider); }
.statut-a_reprendre { background: var(--s-a_reprendre); } .statut-termine { background: var(--s-termine); }
.statut-annule { background: var(--s-annule); }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface);
}
textarea { resize: vertical; }
button {
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-texte); font-weight: 600; cursor: pointer;
}
button.secondaire { background: transparent; color: var(--accent); }
button.lien { background: none; border: 0; color: var(--discret); text-decoration: underline; padding: 0; font-weight: 400; }

.formulaire { display: grid; gap: 12px; }
.formulaire label { display: grid; gap: 4px; font-size: .9rem; color: var(--discret); }
.formulaire label > * { color: var(--texte); }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.saisie-eclair { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 14px; }
.saisie-eclair input { grid-column: 1 / -1; }
@media (min-width: 600px) { .saisie-eclair { grid-template-columns: 1fr 200px auto; } .saisie-eclair input { grid-column: auto; } }
.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }

.decisions { display: flex; flex-wrap: wrap; gap: 8px; }
.decisions form { margin: 0; }
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: 12px; }
.historique { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.historique time { color: var(--discret); font-variant-numeric: tabular-nums; }

ul.projets { list-style: none; margin: 0; padding: 0; }
ul.projets li { padding: 10px 0; border-top: 1px solid var(--bord); }
ul.projets li:first-child { border-top: 0; }
ul.projets li.inactif { opacity: .6; }
ul.projets form { display: flex; gap: 8px; margin-top: 6px; }
ul.projets select { width: auto; }

footer { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; }
.page-connexion main { max-width: 360px; margin: 18vh auto 0; text-align: center; }
.page-connexion button { width: 100%; padding: 14px; }