:root { --fond:#f6f7f5; --carte:#fff; --texte:#1c2321; --doux:#5d6b67; --vert:#1f6f5c; --rouge:#b3261e;
        --orange:#a15c00; --bord:#dde3e0; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --fond:#111615; --carte:#1b2220; --texte:#e5ece9; --doux:#9aa8a3; --vert:#5cc6a6; --rouge:#ff8a80;
          --orange:#ffb74d; --bord:#2c3633; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, sans-serif; background:var(--fond); color:var(--texte);
       padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
header { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem;
         background:var(--carte); border-bottom:1px solid var(--bord); position:sticky; top:0; }
header form { margin:0; }
header .actions { display:flex; gap:.4rem; }
.checklist .label a { color:inherit; text-decoration:none; }
a.bouton { color:var(--vert); font-weight:600; }
nav.mois { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
nav.mois a { color:var(--vert); text-decoration:none; font-size:.9em; }
nav.mois h1 { text-align:center; }
.message { padding:.5rem .8rem; border-radius:.5rem; background:var(--carte); border:1px solid var(--bord); }
.vert { color:var(--vert); }
.saisie label { display:flex; align-items:center; gap:.6rem; margin:.6rem 0; }
.saisie label span { flex:1; }
.saisie input[type=text], .saisie input[type=date] { font:inherit; padding:.45rem .6rem; width:10.5rem;
  border-radius:.5rem; border:1px solid var(--bord); background:var(--fond); color:var(--texte); text-align:right; }
.saisie input[type=checkbox] { width:1.3rem; height:1.3rem; accent-color:var(--vert); }
.saisie button { background:var(--vert); color:#fff; border:0; margin-top:.3rem; }
section { scroll-margin-top:4rem; }
details.corrections { margin-top:1.2rem; }
details.corrections summary { cursor:pointer; color:var(--doux); font-weight:500; padding:.4rem 0; }
.login { max-width:22rem; padding-top:15vh; }
.login label { display:block; margin:1rem 0; color:var(--doux); }
.login input[type=password] { display:block; width:100%; margin-top:.3rem; font:inherit; padding:.6rem;
  border-radius:.5rem; border:1px solid var(--bord); background:var(--carte); color:var(--texte); }
.login button { width:100%; padding:.6rem; background:var(--vert); color:#fff; border:0; }
nav a { color:var(--doux); text-decoration:none; margin-right:1rem; font-weight:500; }
nav a[aria-current] { color:var(--vert); }
button { font:inherit; padding:.35rem .8rem; border-radius:.5rem; border:1px solid var(--bord);
         background:var(--fond); color:var(--texte); }
main { max-width:40rem; margin:0 auto; padding:0 1rem 2rem; }
h1 { font-size:1.4rem; margin:1rem 0 .6rem; }
h2 { font-size:1.05rem; margin:1rem 0 .4rem; }
small { color:var(--doux); font-weight:normal; font-size:.85em; }
section { background:var(--carte); border:1px solid var(--bord); border-radius:.8rem; padding:.2rem 1rem .6rem; margin-top:.8rem; }
.paie p { margin:.5rem 0; }
.paie .gros { font-size:1.3rem; }
.paie.ok, .paie.virée { border-left:6px solid var(--vert); }
.paie.attends { border-left:6px solid var(--rouge); }
.paie.inconnu { border-left:6px solid var(--orange); }
ul { list-style:none; margin:0; padding:0; }
.checklist li, .echeances li { display:grid; gap:0 .6rem; padding:.45rem 0; border-top:1px solid var(--bord); }
.checklist li:first-child, .echeances li:first-child { border-top:0; }
.checklist li { grid-template-columns:1.6rem 1fr auto; }
.checklist .quand { grid-column:2 / 4; color:var(--doux); font-size:.9em; }
.checklist .na { color:var(--doux); }
.echeances li { grid-template-columns:3.2rem 1fr auto; }
.echeances .date { color:var(--doux); font-variant-numeric:tabular-nums; }
.echeances .perso .label::after { content:" · perso"; color:var(--doux); font-size:.85em; }
.montant { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.alertes { max-width:40rem; margin:.6rem auto 0; padding:0 1rem; }
.alertes li { padding:.5rem .8rem; border-radius:.5rem; margin-top:.4rem; font-weight:500; }
.alertes .rouge { background:color-mix(in srgb, var(--rouge) 14%, transparent); color:var(--rouge); }
.alertes .orange { background:color-mix(in srgb, var(--orange) 14%, transparent); color:var(--orange); }
.rouge { color:var(--rouge); }
.note, .vide { color:var(--doux); font-size:.9em; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; }
.kv dt { color:var(--doux); } .kv dd { margin:0; }
.journal li { padding:.45rem 0; border-top:1px solid var(--bord); font-size:.9em; }
.journal li:first-child { border-top:0; }
.journal .quand, .journal .pourquoi { display:block; color:var(--doux); font-size:.9em; }
.journal .valeurs { display:block; overflow-wrap:anywhere; }
footer { text-align:center; color:var(--doux); font-size:.8em; padding:1rem; }