:root { --bg:#f5f6f8; --panel:#fff; --ink:#1b2430; --muted:#657182; --line:#dfe3ea; --prive:#b4532a; --societe:#1f5f8b; --avenir:#7a6a2f; --good:#1f7a4d; --bad:#b3261e; --soft:#eef1f6; --now:#fff8e1; --future:#fafbfd; --shadow:0 1px 2px rgba(20,30,50,.08); }
@media (prefers-color-scheme: dark) { :root { --bg:#12161c; --panel:#1b212b; --ink:#e8ecf2; --muted:#9aa6b6; --line:#2d3644; --prive:#f09a6e; --societe:#7bbbe6; --avenir:#d5c170; --good:#6fd3a0; --bad:#ff8a80; --soft:#252d3a; --now:#2c2a1c; --future:#171c24; --shadow:none; } }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
h1 { font-size:22px; margin:0; } h2 { font-size:19px; margin:18px 0 8px; } h3 { font-size:15px; margin:0 0 8px; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.top { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:flex-end; padding:16px 18px 8px; }
.title p { margin:2px 0 0; font-size:13px; }
.stats { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.stat { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:8px; padding:7px 12px; min-width:132px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.stat .lab { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .stat strong { font-size:18px; font-variant-numeric:tabular-nums; } .stat .sub { font-size:11.5px; color:var(--muted); }
.stat.prive { border-left-color:var(--prive); } .stat.societe { border-left-color:var(--societe); } .stat.avenir { border-left-color:var(--avenir); } .stat.ok { border-left-color:var(--good); } .stat.alert { border-left-color:var(--bad); } .stat.alert .sub { color:var(--bad); }
.tabs { display:flex; gap:4px; padding:6px 18px 0; border-bottom:1px solid var(--line); }
.tabs button { border:0; background:none; color:var(--muted); font:inherit; padding:8px 14px; border-bottom:3px solid transparent; cursor:pointer; } .tabs button.on { color:var(--ink); border-bottom-color:var(--societe); font-weight:600; }
section { padding:10px 18px 30px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:4px 0 10px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); } .seg button { border:0; background:none; color:var(--ink); font:inherit; padding:6px 12px; cursor:pointer; } .seg button + button { border-left:1px solid var(--line); } .seg button.on { background:var(--soft); font-weight:600; }
.chk { display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--muted); }
.badge { font-size:12.5px; padding:4px 10px; border-radius:99px; border:1px solid currentColor; } .badge.good { color:var(--good); } .badge.bad { color:var(--bad); font-weight:600; }
.board { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x proximity; align-items:flex-start; }
.col { flex:0 0 218px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px; scroll-snap-align:start; box-shadow:var(--shadow); }
.col.future { background:var(--future); border-style:dashed; } .col.now { background:var(--now); border-style:solid; border-color:var(--avenir); }
.col-head { padding:2px 4px 8px; border-bottom:1px solid var(--line); margin-bottom:8px; position:sticky; top:0; }
.col-month { font-weight:650; display:flex; gap:6px; align-items:center; } .col-total { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; } .col-sub { font-size:12px; color:var(--muted); min-height:17px; } .down { color:var(--good); } .up { color:var(--bad); }
.pill { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; background:var(--avenir); color:#fff; border-radius:99px; padding:1px 7px; } .pill.soft { background:var(--soft); color:var(--muted); text-transform:none; letter-spacing:0; font-size:11.5px; }
.event { font-size:12px; background:var(--soft); border-radius:6px; padding:4px 7px; margin-bottom:6px; }
.card { display:flex; flex-direction:column; width:100%; text-align:left; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--societe); border-radius:7px; padding:6px 8px; margin-bottom:6px; cursor:pointer; }
.card.prive { border-left-color:var(--prive); } .card:hover { border-color:var(--muted); }
.card-name { font-size:12.5px; color:var(--muted); line-height:1.25; } .card-bal { font-size:15.5px; font-weight:650; font-variant-numeric:tabular-nums; } .card-sub { font-size:11.5px; color:var(--muted); min-height:14px; } .card-sub b { color:var(--good); font-weight:600; } .card-sub em { color:var(--bad); font-style:normal; font-weight:600; }
.card.done { opacity:.75; } .card.done .card-bal { color:var(--good); } .card.pending { opacity:.6; border-style:dashed; border-left-style:solid; border-left-color:var(--avenir); } .card.unpaid { border-color:var(--bad); border-left-color:var(--bad); } .est { color:var(--muted); font-weight:400; }
.col-foot { font-size:11.5px; color:var(--muted); padding:4px; border-top:1px solid var(--line); margin-top:4px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; margin-bottom:12px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow); margin-bottom:12px; } .grid2 .panel { margin-bottom:0; }
.panel ul, .panel ol { margin:0; padding-left:20px; } .panel li { margin-bottom:6px; } .decision p, .phase p { margin:2px 0 10px; } ol.tight li { margin-bottom:3px; }
table { border-collapse:collapse; width:100%; } td, th { padding:4px 8px; border-bottom:1px solid var(--line); text-align:left; font-size:13.5px; } th { font-size:12px; color:var(--muted); font-weight:600; } tr.sep td { background:var(--soft); font-weight:600; font-size:12.5px; } tr.tot td { font-weight:700; border-bottom:0; } .wide { min-width:640px; } .panel { overflow-x:auto; }
.todo { list-style:none; padding:0 !important; } .todo li { padding:5px 0; border-bottom:1px solid var(--line); } .todo li.done { opacity:.55; text-decoration:line-through; } .todo li.late .pill { background:var(--bad); color:#fff; } .todo input { margin-right:8px; transform:scale(1.15); }
.field { display:grid; grid-template-columns:1fr 130px; gap:2px 10px; align-items:center; margin-bottom:8px; font-size:13.5px; } .field small { grid-column:1 / -1; color:var(--muted); font-size:12px; } .field input[type=number], .field input[type=month] { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); width:100%; text-align:right; }
.field.chk { grid-template-columns:22px 1fr; } .row { display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin-bottom:8px; } .row .field { flex:1 1 240px; margin:0; }
.calc { background:var(--soft); border-radius:6px; padding:6px 10px; font-size:13.5px; margin:8px 0 0; }
.btn { font:inherit; border:1px solid var(--societe); background:var(--societe); color:#fff; border-radius:7px; padding:7px 14px; cursor:pointer; } .btn.ghost { background:none; color:var(--societe); }
dialog { border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--ink); max-width:520px; width:92vw; max-height:86vh; padding:18px 20px; } dialog::backdrop { background:rgba(10,15,25,.5); } dialog form { text-align:right; margin-top:12px; } dialog button { font:inherit; padding:6px 14px; }
.kv { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:8px 0 4px; } .kv div { display:flex; flex-direction:column; } .kv span { font-size:11.5px; color:var(--muted); }
body.login { display:grid; place-items:center; min-height:100vh; } body.login form { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px 28px; width:min(92vw,340px); display:grid; gap:10px; } body.login input, body.login button { font:inherit; padding:9px 11px; border-radius:7px; border:1px solid var(--line); } body.login button { background:var(--societe); color:#fff; border-color:var(--societe); cursor:pointer; } .err { color:var(--bad); margin:0; }
@media (max-width:640px) { .top { padding:12px 12px 6px; } section { padding:8px 12px 24px; } .col { flex-basis:78vw; } .stat { min-width:calc(50% - 4px); } }