:root{
  --bg:#EEF0F6;--surface:#FFFFFF;--ink:#1E2240;--muted:#5B6084;--line:#D6D9E7;--neg:#B3261E;--on-c:#FFFFFF;
  --c0:#2F7D6D;--c0s:#DCEFEA;--c1:#7A4A9E;--c1s:#EEE3F6;--c2:#B8691A;--c2s:#F8E9D6;--c3:#2F5DA8;--c3s:#DEE7F6;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14172B;--surface:#1D2140;--ink:#EDEFFA;--muted:#A9AECF;--line:#31365C;--neg:#FF8A80;--on-c:#14172B;
    --c0:#5CC2A9;--c0s:#1B3A35;--c1:#BC90DE;--c1s:#33284A;--c2:#F0A65A;--c2s:#3D2E1C;--c3:#7FA6EE;--c3s:#1F2D4A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14172B;--surface:#1D2140;--ink:#EDEFFA;--muted:#A9AECF;--line:#31365C;--neg:#FF8A80;--on-c:#14172B;
  --c0:#5CC2A9;--c0s:#1B3A35;--c1:#BC90DE;--c1s:#33284A;--c2:#F0A65A;--c2s:#3D2E1C;--c3:#7FA6EE;--c3s:#1F2D4A;
  color-scheme:dark;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
.c0{--c:var(--c0);--cs:var(--c0s)}.c1{--c:var(--c1);--cs:var(--c1s)}.c2{--c:var(--c2);--cs:var(--c2s)}.c3{--c:var(--c3);--cs:var(--c3s)}
main{max-width:720px;margin:0 auto;padding:20px 16px 48px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 20px}
h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:0}
h2{margin:0;font-weight:600;font-size:1.15rem}
button{font:inherit;cursor:pointer;border:none;border-radius:999px;padding:10px 16px;font-weight:600}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.link{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.envs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.env{position:relative;background:var(--cs);border-radius:12px 12px 18px 18px;padding:62px 20px 20px;overflow:hidden}
.env .flap{position:absolute;inset:0 0 auto 0;height:50px;background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%)}
.env h2{color:var(--c)}
.bal{font-size:clamp(2.4rem,10vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.bal.neg{color:var(--neg)}
.meta{margin:0;color:var(--muted);font-size:.93rem}
.actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.primary{background:var(--c,var(--ink));color:var(--on-c)}
.ghost{background:transparent;color:var(--c,var(--ink));border:1.5px solid var(--c,var(--ink))}
.hist{margin-top:36px}
.hist-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.chip{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);padding:6px 12px;font-size:.9rem}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.month{margin-top:22px}
.month h3{margin:0;font-size:1.05rem;font-weight:800}
.month .sum{margin:2px 0 8px;color:var(--muted);font-size:.9rem}
ul.txs{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:14px;border:1px solid var(--line)}
.tx{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:12px;padding:12px 8px 12px 14px;border-top:1px solid var(--line)}
.tx:first-child{border-top:none}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c)}
.lbl{display:block;font-weight:600;overflow-wrap:anywhere}
.sub{display:block;color:var(--muted);font-size:.85rem}
.amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.amt.plus{color:var(--c)}
.del{background:transparent;color:var(--muted);padding:6px 10px;font-size:1.2rem;line-height:1}
.empty{color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:18px;margin-top:12px}
.banner{background:var(--c2s);color:var(--ink);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:.93rem}
/* forms */
.setup p.intro{color:var(--muted);margin:0 0 20px;max-width:60ch}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:12px}
input,select,textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{min-height:110px;font-size:14px}
.hint{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:4px}
fieldset.env-edit{border:none;margin:0 0 16px;padding:16px 16px 6px;border-radius:14px;background:var(--cs);border-left:6px solid var(--c)}
fieldset.env-edit legend{float:left;width:100%;padding:0;margin-bottom:10px;font-weight:800;color:var(--c)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 24px}
.block{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:20px}
.block h2{margin-bottom:6px}
.block p{margin:0 0 12px;color:var(--muted);font-size:.93rem}
.danger{background:transparent;color:var(--neg);border:1.5px solid var(--neg)}
.small{font-size:.9rem;padding:8px 14px}
.err{color:var(--neg);font-weight:600;margin:0 0 12px}
dialog{border:none;border-radius:18px;padding:0;width:calc(100% - 32px);max-width:420px;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(10,12,30,.55)}
dialog form{padding:20px}
dialog h2{font-size:1.4rem;font-weight:800;margin-bottom:14px}
.pick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px;border:none;padding:0}
.pick legend{font-weight:600;font-size:.95rem;padding:0;margin-bottom:6px}
.pick label{margin:0;font-weight:600}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid var(--c);color:var(--c);cursor:pointer}
.pick input:checked+span{background:var(--c);color:var(--on-c)}
.pick input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* ---------- ajouts version serveur ---------- */
.c4{--c:var(--ink);--cs:var(--surface)}
nav.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 22px}
nav.tabs a{color:var(--ink);text-decoration:none;font-weight:600;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;gap:6px}
nav.tabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.badge{display:inline-block;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--neg);color:#fff;font-size:.8rem;font-weight:800;text-align:center}
.notice{display:block;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 16px;color:var(--ink);text-decoration:none}
.notice.todo{border-color:var(--neg)}
.notice.ok{border-color:var(--c0)}
.notice strong{display:block;font-size:1.05rem}
.notice span{color:var(--muted);font-size:.93rem}
.status{margin-top:36px;color:var(--muted);font-size:.88rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.status .warn{color:var(--neg);font-weight:600}
ul.sort{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sort li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.sort-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.envbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.envbtn{background:var(--cs);color:var(--c);border:1.5px solid var(--c);padding:12px 16px;font-size:1rem}
.envbtn:active{background:var(--c);color:var(--on-c)}
.tag{display:inline-block;font-size:.75rem;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:0 8px;margin-left:6px;color:var(--muted)}
.tx{cursor:pointer}
.tx.unsorted .dot{background:transparent;border:2px dashed var(--muted)}
.dots{display:inline-flex;gap:3px}
.split-row{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center;margin-bottom:10px}
.split-row label{margin:0}
.split-row input{margin-top:0;text-align:right}
.remain{font-weight:600;margin:4px 0 14px}
.remain.bad{color:var(--neg)}
.rule-env{display:grid;grid-template-columns:1fr 110px auto;gap:10px;align-items:center;margin-bottom:8px}
.rule-env input[type=text]{margin:0;text-align:right}
.rule-env label{margin:0;font-weight:400;font-size:.9rem;display:flex;gap:6px;align-items:center;white-space:nowrap}
.rule-env label input{width:auto;margin:0}
ul.plain{list-style:none;margin:0 0 12px;padding:0}
ul.plain li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
ul.plain li:first-child{border-top:none}
.env-line{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.env-line input{margin:0}
.swatches{display:flex;gap:6px}
.swatch{width:28px;height:28px;padding:0;border-radius:50%;background:var(--c);border:3px solid transparent}
.swatch[aria-pressed="true"]{border-color:var(--ink)}
.login{max-width:360px;margin:12vh auto 0}
.login .env{padding-bottom:24px}
.login button{width:100%;margin-top:6px;padding:14px}
.big{font-size:1.05rem;padding:14px 20px}
.muted{color:var(--muted)}