/* Concept: console fintech noir et or, navigation latérale (rail sur tablette, barre basse sur téléphone), cartes vitrées, mouvements façon Vue/Angular. */
:root{
  --bg:#07070a;--s1:#0d0d11;--s2:#131318;--s3:#1a1a21;--line:#25252d;--line2:#33333d;
  --ink:#f4efe2;--mut:#9d988b;--gold:#e3b94a;--gold2:#f6dc8a;--gold3:#a8801f;
  --ok:#4ade80;--warn:#fbbf24;--bad:#fb7185;--blue:#7aa2ff;
  --font:Lato,"Avenir Next","Segoe UI",system-ui,sans-serif;--disp:Sora,Lato,system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 520px at 85% -8%,rgba(227,185,74,.14),transparent 60%),radial-gradient(700px 520px at -10% 108%,rgba(227,185,74,.07),transparent 60%)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gold)}
.app{position:relative;z-index:1;display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;align-self:start;display:flex;flex-direction:column;gap:2px;padding:22px 14px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(13,13,17,.92),rgba(7,7,10,.92));overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px;font:700 .95rem var(--disp);letter-spacing:.2em;color:var(--gold)}
.brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--gold2),var(--gold3));display:grid;place-items:center;color:#15110a;font:700 .95rem var(--disp);letter-spacing:0;flex:none}
.nl{display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:11px;background:none;color:#cfc9b8;text-align:left;position:relative;transition:background .25s,color .25s,transform .25s}
.nl svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nl:hover{background:var(--s2);color:#fff;transform:translateX(3px)}
.nl[aria-current=page]{background:linear-gradient(90deg,rgba(227,185,74,.16),rgba(227,185,74,.02));color:var(--gold2)}
.nl[aria-current=page]::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--gold);animation:growy .35s both}
.sgrp{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);padding:14px 12px 4px}
.side .foot{margin-top:auto;padding:14px 10px 0;color:var(--mut);font-size:.78rem}
.main{min-width:0}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px clamp(16px,3vw,36px);background:rgba(7,7,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top h1{margin:0;font:600 clamp(1.15rem,2.4vw,1.55rem) var(--disp);letter-spacing:.06em}
.top p{margin:0;color:var(--mut);font-size:.85rem}
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ib{position:relative;width:40px;height:40px;border-radius:11px;border:1px solid var(--line2);background:var(--s2);display:grid;place-items:center;color:var(--ink);transition:border-color .2s,transform .2s}
.ib:hover{border-color:var(--gold);transform:translateY(-2px)}
.ib svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ib .bd{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font:700 .68rem/18px var(--font);text-align:center;padding:0 4px}
.ib.ring svg{animation:ring 1s ease 1}
.msel{height:40px;min-width:190px;padding:0 12px;border-radius:11px;border:1px solid var(--gold3);background:var(--s2);color:var(--gold2);font:600 .95rem var(--font);text-transform:capitalize}
.sy{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;border:1px solid var(--line2);background:var(--s2);font-size:.78rem;color:var(--mut)}
.sy i{width:8px;height:8px;border-radius:50%;background:var(--mut)}
.sy.ok i{background:var(--ok);box-shadow:0 0 8px var(--ok)}.sy.sv i{background:var(--warn);animation:blink 1s infinite}.sy.er i{background:var(--bad)}
.view{padding:22px clamp(16px,3vw,36px) 90px;display:grid;gap:18px;min-width:0}
.view>*{min-width:0}
.g{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
@media(max-width:1100px){.c8,.c7,.c6,.c5,.c4{grid-column:span 12}.c3{grid-column:span 6}}
.card{position:relative;background:linear-gradient(160deg,rgba(26,26,33,.92),rgba(13,13,17,.95));border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 1px 0 rgba(246,220,138,.07) inset,0 16px 40px -24px #000;transition:transform .3s,border-color .3s,box-shadow .3s;min-width:0}
.card.hv:hover{transform:translateY(-3px);border-color:rgba(227,185,74,.45);box-shadow:0 1px 0 rgba(246,220,138,.1) inset,0 22px 44px -22px rgba(227,185,74,.28)}
.card h2{margin:0 0 12px;font:600 .8rem var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.card h3{margin:14px 0 6px;font:600 .95rem var(--font)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sp{justify-content:space-between}
.mut{color:var(--mut)}.sm{font-size:.82rem}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}.gold{color:var(--gold2)}
.num{font-family:var(--disp);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hero{background:linear-gradient(135deg,rgba(60,46,12,.7),rgba(13,13,17,.95) 55%);border-color:rgba(227,185,74,.35)}
.hero .big{font:300 clamp(2.2rem,6vw,3.6rem)/1.05 var(--disp);color:var(--gold2);margin:4px 0 12px;letter-spacing:-.02em}
.flow{display:flex;gap:10px;flex-wrap:wrap}
.flow>div{flex:1 1 130px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.25)}
.flow b{display:block;font:600 1.05rem var(--disp)}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.kpi{padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,var(--s3),var(--s1));transition:transform .3s,border-color .3s}
.kpi:hover{transform:translateY(-3px);border-color:var(--gold3)}
.kpi span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.kpi b{display:block;margin-top:4px;font:600 1.3rem var(--disp);font-variant-numeric:tabular-nums}
.kpi small{color:var(--mut)}
.btn{position:relative;overflow:hidden;border:0;border-radius:11px;padding:10px 16px;font-weight:700;background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,var(--gold3));color:#17120a;transition:transform .15s,filter .2s,box-shadow .2s;box-shadow:0 8px 20px -10px rgba(227,185,74,.6)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:active{transform:scale(.97)}
.btn.gh{background:var(--s2);color:var(--ink);border:1px solid var(--line2);box-shadow:none;font-weight:600}
.btn.gh:hover{border-color:var(--gold)}
.btn.sm{padding:6px 11px;font-size:.82rem;border-radius:9px}
.btn.dg{background:rgba(251,113,133,.12);color:var(--bad);border:1px solid rgba(251,113,133,.4);box-shadow:none}
.rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);width:40px;height:40px;margin:-20px 0 0 -20px;transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input,select,textarea{background:var(--s1);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;min-width:0;max-width:100%;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,185,74,.15);outline:0}
input::placeholder{color:#6d695f}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold);padding:0}
input[type=range]{accent-color:var(--gold);padding:0}
select{color-scheme:dark}
.ed{background:transparent;border-color:transparent;padding:6px 8px;width:100%;border-radius:8px}
.ed:hover{border-color:var(--line2);border-style:dashed}.ed:focus{background:var(--s1)}
.ed.r{text-align:right}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
label.f input,label.f select,label.f textarea{text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink)}
.fg{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%}
th{font:600 .7rem var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:left;padding:10px 10px;background:var(--s2);white-space:nowrap}
td{padding:4px 6px;border-top:1px solid var(--line);vertical-align:middle}
td.p{padding:8px 12px}
tr{transition:background .2s}tbody tr:hover{background:rgba(227,185,74,.045)}
th.r,td.r{text-align:right}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;font-size:.72rem;font-weight:700;background:var(--s3);color:var(--mut);white-space:nowrap}
.pill.ok{background:rgba(74,222,128,.13);color:var(--ok)}.pill.warn{background:rgba(251,191,36,.13);color:var(--warn)}.pill.bad{background:rgba(251,113,133,.14);color:var(--bad)}.pill.gold{background:rgba(227,185,74,.15);color:var(--gold2)}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--s2);border:1px solid var(--line);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 14px;border-radius:9px;color:var(--mut);font-weight:600;transition:all .25s}
.seg button[aria-pressed=true]{background:linear-gradient(135deg,var(--gold2),var(--gold3));color:#17120a}
.tl{display:grid}
.tx{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:4px 12px;align-items:center;padding:11px 8px;border-top:1px solid var(--line);border-radius:10px;transition:background .2s}
.tx:first-child{border-top:0}.tx:hover{background:rgba(227,185,74,.05)}
.tx .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--s3)}
.tx .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tx .t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .s{font-size:.78rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .a{font:600 1rem var(--disp);text-align:right;font-variant-numeric:tabular-nums}
.tx .b{display:flex;gap:2px}
.mi{border:0;background:none;width:32px;height:32px;border-radius:9px;color:var(--mut);display:grid;place-items:center;transition:all .2s}
.mi:hover{background:var(--s3);color:var(--gold2)}.mi.dg:hover{color:var(--bad)}
.mi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.in .ic{color:var(--ok);background:rgba(74,222,128,.1)}.ex .ic{color:var(--gold2)}.tr .ic{color:var(--blue);background:rgba(122,162,255,.1)}.sv .ic{color:#c084fc;background:rgba(192,132,252,.1)}
.in .a{color:var(--ok)}.tr .a,.sv .a{color:var(--mut)}
.bar{height:9px;border-radius:6px;background:var(--s3);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,var(--gold3),var(--gold2));transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) both}
.bar i.o{background:linear-gradient(90deg,#be123c,var(--bad))}.bar i.g{background:linear-gradient(90deg,#15803d,var(--ok))}.bar i.y{background:linear-gradient(90deg,#b45309,var(--warn))}
.bl{display:grid;grid-template-columns:minmax(90px,1.2fr) minmax(80px,2fr) auto;gap:10px;align-items:center;font-size:.88rem;padding:6px 0}
.bl>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.leg{display:grid;gap:6px;font-size:.84rem;min-width:0}
.leg div{display:flex;align-items:center;gap:8px;min-width:0}.leg i{width:10px;height:10px;border-radius:50%;flex:none}.leg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ins{display:flex;gap:10px;padding:11px 14px;margin-bottom:8px;border-radius:12px;background:var(--s2);border:1px solid var(--line);border-left:3px solid var(--gold);font-size:.9rem}
.ins.crit{border-left-color:var(--bad)}.ins.warn{border-left-color:var(--warn)}.ins.ok{border-left-color:var(--ok)}.ins.info{border-left-color:var(--blue)}
.ins .go{margin-left:auto;flex:none}
.empty{padding:26px 14px;text-align:center;color:var(--mut)}
.drop{border:1.5px dashed var(--gold3);border-radius:16px;padding:30px 16px;text-align:center;background:rgba(227,185,74,.04);transition:all .25s}
.drop.on{background:rgba(227,185,74,.12);transform:scale(1.01)}
.sc{width:112px;height:112px;flex:none}
.sc text{font:600 26px var(--disp);fill:var(--ink)}
svg text{font-family:var(--font)}
.chat{display:grid;gap:10px;max-height:56vh;overflow-y:auto;padding:4px}
.msg{max-width:92%;padding:11px 14px;border-radius:14px;line-height:1.55;animation:up .35s both}
.msg.u{justify-self:end;background:linear-gradient(135deg,var(--gold2),var(--gold3));color:#17120a;border-bottom-right-radius:4px}
.msg.a{background:var(--s2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg p{margin:0 0 8px}.msg p:last-child{margin:0}.msg ul{margin:4px 0 8px;padding-left:20px}
.sk{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:10px;min-height:16px}
#modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#modal.on{display:flex;animation:fade .2s both}
.mb{width:min(640px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:linear-gradient(160deg,var(--s3),var(--s1));border:1px solid var(--line2);border-radius:20px;padding:20px;animation:pop .32s cubic-bezier(.2,.9,.3,1.2) both;box-shadow:0 40px 90px -30px #000}
.mb.w{width:min(900px,100%)}
.mb h2{margin:0 0 14px;font:600 1.05rem var(--disp);letter-spacing:.06em}
#toasts{position:fixed;z-index:120;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--s3);border:1px solid var(--line2);border-left:3px solid var(--gold);box-shadow:0 20px 40px -16px #000;animation:slideIn .35s cubic-bezier(.2,.9,.3,1.2) both}
.toast.crit{border-left-color:var(--bad)}.toast.ok{border-left-color:var(--ok)}.toast.out{animation:fade .25s reverse both}
.toast button{margin-left:auto}
.tabbar,.fab{display:none}
.rin{animation:rowin .5s cubic-bezier(.2,.8,.2,1) both}
.lv{animation:leave .26s ease forwards;overflow:hidden}
@keyframes up{from{opacity:0;transform:translateY(16px) scale(.985)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.92)}}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}}
@keyframes rowin{from{opacity:0;transform:translateX(-18px);background:rgba(227,185,74,.18)}}
@keyframes leave{to{opacity:0;transform:translateX(36px);max-height:0;padding-top:0;padding-bottom:0}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes growy{from{transform:scaleY(0)}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes seg{from{stroke-dasharray:0 400}}
@keyframes dr{from{stroke-dashoffset:var(--len)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes ripple{to{transform:scale(7);opacity:0}}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
@keyframes blink{50%{opacity:.25}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,185,74,.5)}100%{box-shadow:0 0 0 18px rgba(227,185,74,0)}}
.anim .st{animation:up .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms)}
.anim .ba{transform-box:fill-box;transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*35ms)}
.anim .sg{animation:seg 1s cubic-bezier(.2,.8,.2,1) both}
.anim .ln{stroke-dasharray:var(--len);animation:dr 1.3s ease both}
@media(max-width:1099px) and (min-width:761px){
  .app{grid-template-columns:78px minmax(0,1fr)}
  .side{padding:16px 10px;align-items:center}
  .nl{padding:12px;justify-content:center}.nl span,.sgrp,.side .foot,.brand span{display:none}
  .brand{padding:0 0 14px}
}
@media(max-width:760px){
  .app{grid-template-columns:minmax(0,1fr)}.side{display:none}
  .view{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .msel{min-width:0;flex:1}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:rgba(10,10,14,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .tabbar button{display:grid;justify-items:center;gap:2px;border:0;background:none;color:var(--mut);font-size:.68rem;padding:6px 0;border-radius:10px}
  .tabbar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar button[aria-current=page]{color:var(--gold2)}
  .fab{display:grid;place-items:center;position:fixed;right:18px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:31;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--gold2),var(--gold3));color:#17120a;box-shadow:0 14px 30px -8px rgba(227,185,74,.6);animation:pulse 2.4s infinite}
  .fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
  .tx{grid-template-columns:38px minmax(0,1fr) auto}.tx .b{grid-column:2/4;justify-content:flex-end}
  #toasts{left:16px;right:16px;max-width:none;bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:761px){.fab{display:grid;place-items:center;position:fixed;right:28px;bottom:28px;z-index:31;width:54px;height:54px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--gold2),var(--gold3));color:#17120a;box-shadow:0 14px 30px -8px rgba(227,185,74,.6);transition:transform .25s}.fab:hover{transform:rotate(90deg) scale(1.06)}.fab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}#toasts{bottom:96px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:760px){.msel{min-width:0;width:150px}}

/* Écran de connexion */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 500px at 70% -10%,#20190a 0,var(--bg) 60%);overflow:auto}
.gate[hidden]{display:none}
.gc{width:min(440px,100%)}
.gc .brand{padding:0 0 14px}
.gc h2{text-transform:none;letter-spacing:.04em;font-size:1.1rem;color:var(--ink)}
.gc input{width:100%}