:root{
  --bg:#f4f5f7; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --green:#159a5b; --green-d:#0f7a47; --red:#dc2626; --navy:#0f1b2d; --amber:#fef9c3; --amber-b:#f2e39a;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased;}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  background:var(--navy); color:#e8eef6; padding:10px 16px; border-bottom:1px solid #0a1220;}
.topbar .brand{font-size:16px;font-weight:600;white-space:nowrap}
.topbar select,.topbar button{font:inherit;border-radius:8px;border:1px solid #22344c;
  background:#17273c;color:#e8eef6;padding:7px 11px;cursor:pointer}
.topbar select:hover,.topbar button:hover{background:#1e304a}
.topbar .subtitle{color:#8aa0ba;font-size:12.5px;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .maj{color:#7f96b0;font-size:12px;white-space:nowrap}
.topbar #yearToggle.active{background:#2563eb;border-color:#2563eb;color:#fff}
.topbar #saveBtn{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.topbar #saveBtn:hover{background:var(--green-d)}
.topbar #saveBtn.dirty{box-shadow:0 0 0 3px rgba(21,154,91,.35)}
.topbar #saveBtn:disabled{opacity:.5;cursor:default;box-shadow:none}

main{max-width:1500px;margin:0 auto;padding:16px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .val{font-size:24px;font-weight:700;margin-top:6px}
.kpi.pos{background:linear-gradient(135deg,var(--green),var(--green-d));border-color:transparent;color:#fff}
.kpi.pos .lbl{color:#d6f5e5}
.kpi.neg .val{color:var(--red)}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* ---------- columns ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.card>.hd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.card>.hd h2{margin:0;font-size:15px;font-weight:700}
.card>.hd .tot{font-size:16px;font-weight:700}
.card.collecte>.hd h2{color:var(--green-d)} .card.collecte>.hd .tot{color:var(--green-d)}
.card.depenses>.hd h2{color:var(--red)} .card.depenses>.hd .tot{color:var(--red)}

/* group / rows */
.grp{padding:2px 0}
.grp .grphd{display:flex;align-items:center;justify-content:space-between;padding:9px 16px 5px}
.grp .grphd .gname{font-weight:700;font-size:12.5px;color:#334155}
.grp .grphd .gname.mk{color:var(--red)}
.row{display:grid;align-items:center;gap:8px;padding:4px 16px}
.row.rev{grid-template-columns:1.6fr .8fr .7fr auto}
.row.exp{grid-template-columns:1.5fr 1.5fr auto auto}
.row .cell{min-width:0}
.row input.txt,.row input.num{width:100%;border:1px solid transparent;background:transparent;border-radius:6px;
  padding:5px 6px;font:inherit;color:var(--ink)}
.row input.num{text-align:right;font-variant-numeric:tabular-nums}
.row input.txt:hover,.row input.num:hover{background:#f1f5f9}
.row input.txt:focus,.row input.num:focus{background:#fff;border-color:#93c5fd;outline:none}
.row .muted{color:var(--muted);font-size:12.5px}
.row .amt{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .src{font-size:12px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.badge.paid{background:#dcfce7;color:#166534}
.badge.refund{background:#fee2e2;color:#991b1b}
.badge.open{background:#e0e7ff;color:#3730a3}
.pill{border:none;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;cursor:pointer}
.pill.on{background:#dcfce7;color:#166534} .pill.off{background:#f1f5f9;color:#64748b}
.del{border:none;background:none;color:#cbd5e1;cursor:pointer;font-size:15px;line-height:1}
.del:hover{color:var(--red)}
.subtot{display:flex;justify-content:space-between;padding:7px 16px;font-weight:700;font-size:13px;border-top:1px dashed var(--line);margin-top:2px}
.addline{margin:2px 16px 6px;border:1px dashed var(--line);background:#fafbfc;color:#475569;border-radius:8px;padding:5px 10px;font:inherit;cursor:pointer;width:calc(100% - 32px)}
.addline:hover{background:#f1f5f9}
.total-bar{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:11px 16px;font-weight:700;font-size:15px}
.subtitle-note{padding:8px 16px;color:var(--muted);font-size:12px}

/* ---------- répartition ---------- */
#repartition .rrow{display:grid;grid-template-columns:1.4fr .7fr .5fr 1.4fr;gap:10px;align-items:center;padding:7px 16px;border-top:1px solid #f1f5f9}
#repartition .rrow .rmt{text-align:right;font-variant-numeric:tabular-nums}
#repartition .rrow .rpc{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:9px;border-radius:999px;background:#eef2f7;overflow:hidden}
.bar>span{display:block;height:100%;background:var(--navy);border-radius:999px}
.ratios{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 24px;padding:10px 16px;border-top:1px solid var(--line)}
.ratios .rt{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f4f6f9}
.ratios .rt .k{color:#475569}.ratios .rt .v{font-weight:600;font-variant-numeric:tabular-nums}
.ratios .rt .v.warn{color:var(--red)}

/* ---------- prévisionnel ---------- */
.prev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 16px}
.prev-tile{border:1px solid var(--line);border-radius:10px;padding:12px}
.prev-tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.prev-tile .v{font-size:20px;font-weight:700;margin-top:4px}
.prev-tile.warn .v{color:#b45309}
.prev-list{max-height:230px;overflow:auto;border-top:1px solid var(--line)}
.prev-list .row{grid-template-columns:1.6fr .7fr .8fr;font-size:12.5px}

/* ---------- partage ---------- */
.partage-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px}
.pcard{border:1px solid var(--line);border-radius:10px;padding:16px}
.pcard.sophie{background:#f0fdf4;border-color:#bbf7d0}
.pcard.growth{background:#f8fafc}
.pcard .who{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.pcard .amt{font-size:26px;font-weight:800;margin-top:6px}
.pcard.sophie .amt{color:var(--green-d)}
.pcard .sub{color:var(--muted);font-size:12px;margin-top:4px}

.foot{color:var(--muted);font-size:12px;text-align:center;padding:18px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;transition:.25s;pointer-events:none;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.loading{padding:40px;text-align:center;color:var(--muted)}
.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px 14px;border-radius:8px;margin:10px 16px}

/* year view */
.ytable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ytable th,.ytable td{padding:8px 12px;border-bottom:1px solid #f1f5f9;text-align:right}
.ytable th:first-child,.ytable td:first-child{text-align:left}
.ytable thead th{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.ytable tfoot td{font-weight:700;border-top:2px solid var(--navy)}