:root{
  --bg:#F2F5F3; --surface:#FFFFFF; --surface2:#E9EEEA; --ink:#1C2621; --muted:#5A6A61;
  --line:#D8E0DA; --accent:#1E6B4F; --accent-ink:#FFFFFF; --accent-soft:#DCEDE4;
  --warn:#8A5F00; --warn-bar:#C9992B; --warn-soft:#F4E8C8;
  --over:#A93F26; --over-bar:#C05237; --over-soft:#F6DED5;
  --shadow:0 1px 2px rgba(28,38,33,.06),0 4px 14px rgba(28,38,33,.05);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121815; --surface:#1A211D; --surface2:#232C27; --ink:#E6ECE8; --muted:#93A29A;
    --line:#2E3934; --accent:#53BE93; --accent-ink:#0E1512; --accent-soft:#1F3A2F;
    --warn:#D9A93E; --warn-bar:#C99A2F; --warn-soft:#3A3120;
    --over:#E0785A; --over-bar:#C96548; --over-soft:#3D251E;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121815; --surface:#1A211D; --surface2:#232C27; --ink:#E6ECE8; --muted:#93A29A;
  --line:#2E3934; --accent:#53BE93; --accent-ink:#0E1512; --accent-soft:#1F3A2F;
  --warn:#D9A93E; --warn-bar:#C99A2F; --warn-soft:#3A3120;
  --over:#E0785A; --over-bar:#C96548; --over-soft:#3D251E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Archivo",system-ui,sans-serif; text-wrap:balance; margin:0}
.wrap{max-width:940px; margin:0 auto; padding:28px 20px 80px}
.topbar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:22px}
.topbar h1{font-size:26px; font-weight:700; letter-spacing:-.01em}
.topbar .spacer{flex:1}
.monthnav{display:flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:4px; box-shadow:var(--shadow)}
.monthnav button{border:0; background:transparent; color:var(--ink); font-size:16px; width:32px; height:32px; border-radius:7px; cursor:pointer}
.monthnav button:hover{background:var(--surface2)}
.monthnav .mlabel{min-width:130px; text-align:center; font-weight:600; text-transform:capitalize; font-size:14.5px}
.btn{font:inherit; font-weight:600; border-radius:10px; padding:9px 16px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn[disabled]{opacity:.55; cursor:default}
.savedot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--warn-bar); margin-right:7px; vertical-align:1px}
.banner{border:1px solid var(--line); background:var(--warn-soft); color:var(--ink); border-radius:12px; padding:12px 16px; margin:0 0 18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:14px}
.banner.info{background:var(--accent-soft)}
.banner .btn{padding:6px 12px; font-size:13.5px}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px}
@media (max-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow)}
.tile .tl{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.tile .tv{font-family:"Bricolage Grotesque",sans-serif; font-size:24px; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.tile .ts{font-size:12.5px; color:var(--muted); margin-top:2px}
.tile.neg .tv{color:var(--over)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px; margin-bottom:22px}
.card h2{font-size:17px; font-weight:600; margin-bottom:14px}
.card h2 .sub{font-family:"Archivo",sans-serif; font-weight:400; font-size:13px; color:var(--muted); margin-left:8px}
table{border-collapse:collapse; width:100%}
.budtable th{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--line)}
.budtable td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:14.5px}
.budtable tr:last-child td{border-bottom:0}
.budtable .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.budtable .catname{font-weight:500}
.budtable tfoot td{font-weight:700; border-top:2px solid var(--line); border-bottom:0}
.barwrap{background:var(--surface2); border-radius:4px; height:8px; min-width:90px; position:relative; overflow:hidden}
.bar{height:100%; border-radius:4px; background:var(--accent)}
.bar.warn{background:var(--warn-bar)}
.bar.over{background:var(--over-bar)}
.ecart-ok{color:var(--muted)} .ecart-over{color:var(--over); font-weight:600}
.statuschip{display:inline-block; font-size:11.5px; font-weight:600; border-radius:99px; padding:1px 8px; margin-left:6px; vertical-align:1px}
.statuschip.over{background:var(--over-soft); color:var(--over)}
.statuschip.warn{background:var(--warn-soft); color:var(--warn)}
form.addform{display:grid; grid-template-columns:150px 1fr 1.4fr 120px auto; gap:10px; align-items:end}
@media (max-width:720px){form.addform{grid-template-columns:1fr 1fr}}
label.fld{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
input,select{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:8px 10px; width:100%}
input::placeholder{color:var(--muted); opacity:.7}
.explist td{padding:8px; border-bottom:1px solid var(--line); font-size:14.5px}
.explist tr:last-child td{border-bottom:0}
.explist .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600}
.explist .d{color:var(--muted); white-space:nowrap}
.catchip{display:inline-block; background:var(--surface2); border-radius:99px; font-size:12.5px; padding:2px 10px}
.iconbtn{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:15px; border-radius:7px; width:28px; height:28px; line-height:1}
.iconbtn:hover{background:var(--surface2); color:var(--over)}
details.settings{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); margin-bottom:22px}
details.settings summary{cursor:pointer; padding:16px 20px; font-family:"Bricolage Grotesque",sans-serif; font-size:17px; font-weight:600; list-style:none; display:flex; align-items:center; gap:10px}
details.settings summary::before{content:"▸"; font-size:13px; transition:transform .15s}
details.settings[open] summary::before{transform:rotate(90deg)}
details.settings .inner{padding:0 20px 20px; display:grid; gap:26px}
.setgrid{display:grid; gap:8px}
.setrow{display:grid; grid-template-columns:1fr 130px auto; gap:8px; align-items:center}
.sethead{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.addline{margin-top:6px}
.hint{font-size:13px; color:var(--muted); margin-top:8px}
.empty{color:var(--muted); font-size:14px; padding:6px 0}
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:10px; font-size:14px; box-shadow:var(--shadow); z-index:50; max-width:90vw}
.tablescroll{overflow-x:auto}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }
/* --- Écran de connexion --- */
.loginwrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.logincard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; max-width:380px; width:100%; box-shadow:var(--shadow); display:grid; gap:14px}
.logincard h1{font-size:24px}
.loginsub{margin:0; font-size:14px; color:var(--muted)}
.loginerr{color:var(--over); font-size:14px; margin:0; font-weight:600}