@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/static/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(/static/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/static/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(/static/fonts/inter-700.woff2) format("woff2")}
:root{--bg:#070707;--side:#0b0b0b;--card:#111111;--card2:#161616;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);
--txt:#f2f2f2;--mut:#8b8b8b;--mut2:#5e5e5e;--acc:#F5C38B;--acc2:#e9a96a;--pos:#3ddc97;--pos-2:#2bb57c;--pos-3:#1e8a5e;--pos-4:#7ff0bf;--pos-5:#b9f8dc;--posbg:rgba(61,220,151,.13);--neg:#ff1f4b;--blue:#7aa7ff;--c0:#ef7b8e;--c1:#7aa7ff;--c2:#f2b27a;--c3:#6fd3c1;--c4:#b48cff;--c5:#F5C38B;--c6:#e86a6a;--c7:#9ad97a;--c8:#5fb3e8;--c9:#d98ad9;--negbg:rgba(255,31,75,.15)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--txt);font:14px/1.45 Inter,system-ui,sans-serif;font-feature-settings:"tnum" 1,"cv11" 1;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(900px 500px at 8% -10%,rgba(98,70,190,.22),transparent 60%),radial-gradient(800px 500px at 95% -15%,rgba(160,110,60,.20),transparent 60%)}
a{color:inherit;text-decoration:none}
.num,.amt,td.r{font-variant-numeric:tabular-nums}
/* layout */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:232px 1fr;min-height:100vh}
aside{background:rgba(11,11,11,.72);backdrop-filter:blur(12px);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.2px;padding:0 10px 26px}
.brand .mk{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--acc),#a8714a);box-shadow:0 0 18px rgba(245,195,139,.35)}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--mut);font-weight:500;margin-bottom:2px;transition:.15s}
.nav a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.nav a:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.nav a.on{color:var(--acc);background:#161616;border:1px solid var(--line)}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3a3a3a,#1d1d1d);display:grid;place-items:center;font-size:12px;font-weight:600;border:1px solid var(--line2)}
.side-foot form{margin-left:auto}.iconbtn{background:none;border:1px solid var(--line);color:var(--mut);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.iconbtn:hover{color:var(--txt);border-color:var(--line2)}.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.main{padding:18px 30px 40px;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.search{display:flex;align-items:center;gap:8px;background:#111;border:1px solid var(--line);border-radius:11px;padding:0 12px;width:300px;height:38px;color:var(--mut)}
.search input{background:none;border:0;outline:0;color:var(--txt);font:inherit;width:100%}
.search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.topbar .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#f8cf9f,var(--acc));color:#1a1206;border:0;border-radius:11px;padding:0 16px;height:38px;font:600 13px Inter;cursor:pointer;box-shadow:0 4px 20px rgba(245,195,139,.18)}
.btn.sec{background:#161616;color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn:hover{filter:brightness(1.05)}
/* cards */
.card{background:linear-gradient(180deg,#131313,#0f0f0f);border:1px solid var(--line);border-radius:18px;padding:22px}
.card.flat{background:#111}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ch h2,.ch h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.1px}
.ch h3{font-size:13px;color:var(--mut);font-weight:500}
.grid{display:grid;gap:16px}.g-main{grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1fr 1fr}
@media(max-width:1100px){.g-main,.g4,.g2{grid-template-columns:1fr}.shell{grid-template-columns:1fr}aside{display:none}}
.label{color:var(--mut);font-size:12px}
.hero-n{font-size:40px;font-weight:600;letter-spacing:-1px;line-height:1.1;margin:6px 0 8px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:7px;font-size:12px;font-weight:600}
.pill.pos{background:var(--posbg);color:var(--pos)}.pill.neg{background:var(--negbg);color:var(--neg)}.pill.mut{background:#1c1c1c;color:var(--mut)}
.seg{display:inline-flex;background:#0b0b0b;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{background:none;border:0;color:var(--mut);font:500 12px Inter;padding:5px 11px;border-radius:7px;cursor:pointer}
.seg button.on{background:#222;color:var(--txt)}
.kpi{font-size:24px;font-weight:600;letter-spacing:-.4px;margin-top:6px}
.sub{color:var(--mut);font-size:12px;margin-top:4px}
.bar{height:6px;background:#1d1d1d;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#b98252,var(--acc))}
.donut{position:relative;max-width:300px;margin:6px auto 0}.donut .c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.donut .c b{font-size:22px;font-weight:600;letter-spacing:-.4px;display:block}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:18px;font-size:12px}
.legend div{display:flex;align-items:center;gap:8px;color:var(--mut)}.legend i{width:8px;height:8px;border-radius:3px}.legend span{margin-left:auto;color:var(--txt)}
/* perf cards */
.perf-wrap{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.perf{min-width:206px;background:#111;border:1px solid var(--line);border-radius:14px;padding:14px}
.perf .top{display:flex;align-items:center;gap:9px}.ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#111}
.perf .nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.perf .in{color:var(--mut2);font-size:11px}
.perf .bt{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px}.perf .v{font-size:18px;font-weight:600;letter-spacing:-.3px}
.perf canvas{width:80px!important;height:30px!important}
/* tables */
table{width:100%;border-collapse:collapse}td,th{padding:11px 8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--mut2);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px}td.r,th.r{text-align:right}
tr:last-child td{border-bottom:0}tbody tr:hover td{background:rgba(255,255,255,.015)}
.tag{font-size:11px;padding:3px 8px;border-radius:7px;background:#1b1b1b;color:var(--mut);border:1px solid var(--line)}.tag.ok{color:var(--acc);border-color:rgba(245,195,139,.25);background:rgba(245,195,139,.07)}
input,textarea,select{background:#0b0b0b;border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 10px;font:inherit;outline:0}
input:focus{border-color:rgba(245,195,139,.5)}input.num{text-align:right;width:140px}
.pos{color:var(--pos)}.neg{color:var(--neg)}.mut{color:var(--mut)}.ok{color:var(--pos)}.err{color:var(--neg)}
.page-t{font-size:22px;font-weight:600;letter-spacing:-.4px;margin:0 0 4px}
canvas{display:block}
/* masquer les montants */
body.masked .amt{filter:blur(8px);user-select:none}
/* login */
.login-wrap{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center}
.login{width:380px;padding:34px}.login input{width:100%;height:44px;margin:18px 0 12px}.login .btn{width:100%;justify-content:center;height:44px}
.eye-off{display:none}body.masked .eye-on{display:none}body.masked .eye-off{display:block}
body:before{background:radial-gradient(1000px 560px at 6% -12%,rgba(98,70,190,.30),transparent 62%),radial-gradient(900px 560px at 96% -18%,rgba(170,115,60,.26),transparent 62%)}

.lg{display:inline-grid;place-items:center;border-radius:50%;background:#fff;overflow:hidden;flex:none;border:1px solid var(--line2)}
.lg img{width:72%;height:72%;object-fit:contain}.lg.ini{color:#111;font-weight:700;font-size:12px;border:0}
.acc{display:flex;align-items:center;gap:10px}
.bar.posb i{background:var(--pos)}
form.card input:not(.num),form.card select{width:100%;min-width:0}
/* ================= Responsive (mobile d'abord pour les écrans < 1100 px) ================= */
.bnav,.sheet{display:none}
html,body{overflow-x:hidden}
.main,.card,.grid>*{min-width:0}
canvas{max-width:100%}
@media (max-width:1100px){
 .shell{display:block}
 aside{display:none}
 .main{padding:14px 14px calc(92px + env(safe-area-inset-bottom))}
 .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;justify-content:space-around;align-items:center;
  background:rgba(10,10,10,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
 .bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--mut);min-width:58px;min-height:46px;justify-content:center}
 .bnav a.on{color:var(--acc)}
 .bnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
 .bnav a.add{width:48px;height:48px;min-width:48px;border-radius:16px;background:linear-gradient(180deg,#f8cf9f,var(--acc));color:#1a1206;margin-top:-18px;box-shadow:0 6px 24px rgba(245,195,139,.3)}
 .bnav a.add svg{stroke-width:2.4}
 body.menu .sheet{display:flex;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);align-items:flex-end}
 .sheet-in{width:100%;background:#121212;border-top:1px solid var(--line2);border-radius:22px 22px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .sheet-in a,.sheet-in button{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;background:#1a1a1a;border:1px solid var(--line);color:var(--txt);font:500 14px Inter}
 .sheet-in form{grid-column:1/-1}.sheet-in button{width:100%;color:var(--neg);cursor:pointer}
 .topbar{gap:8px;margin-bottom:14px}
 .topbar .search{flex:1;width:auto;min-width:0}
 .topbar .tag,.topbar .btn{display:none}
 .grid.g-main,.grid.g2,.grid.g3{grid-template-columns:1fr}
 .grid.g4{grid-template-columns:1fr 1fr}
 .card{padding:16px;border-radius:16px}
 .hero-n{font-size:34px}
 .page-t{font-size:20px}
 /* en-têtes de page (titre + actions) : on empile */
 .main>div[style*="justify-content:space-between"]{flex-direction:column;align-items:stretch!important;gap:12px}
 .main>div[style*="justify-content:space-between"] form,.main>div[style*="justify-content:space-between"]>div:last-child{flex-wrap:wrap}
 /* tableaux : défilement horizontal interne, jamais la page */
 table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
 thead,tbody{display:table;width:100%}
 /* cible tactile + pas de zoom iOS */
 input,select,textarea{font-size:16px;min-height:44px}
 input.num{width:120px}
 .btn{min-height:44px}
 .seg{flex-wrap:wrap}.seg button{min-height:34px;padding:6px 12px}
 .iconbtn{width:40px;height:40px}
 .perf{min-width:180px}
 .donut{max-width:240px}
}
@media (max-width:640px){
 .grid.g4{grid-template-columns:1fr}
 .grid.g4>.card.flat{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:14px 16px}
 .grid.g4>.card.flat .kpi{margin-top:0;font-size:20px}
 .grid.g4>.card.flat .sub{width:100%}
 /* toutes les grilles de formulaire inline passent sur 1 colonne */
 .main [style*="grid-template-columns"]{grid-template-columns:1fr!important}
 .main label[style*="justify-content:space-between"] input.num{width:46%!important;min-width:110px}
 .legend{grid-template-columns:1fr 1fr}
 .hero-n{font-size:30px}
 .card .ch{flex-wrap:wrap;gap:8px}
 td,th{padding:10px 8px}
 .login{width:calc(100vw - 28px);padding:26px}
}
@media (max-width:640px){
 .hm{display:none}
 table:has(input.amt){white-space:normal}
 table input.amt{width:112px!important}
}