/* Budget — feuille de style. Univers : coffre sombre émeraude, or biseauté, verre épais. */
:root{
  --ink:#030d0a; --vault:#071a15; --deep:#06231b;
  --gold:#e3c27a; --gold-hi:#fff1c7; --gold-lo:#8a6424; --gold-ink:#2b1d05;
  --text:#eef3ef; --muted:#9db3aa; --faint:#6f8a80;
  --line:rgba(227,194,122,.2); --hair:rgba(255,255,255,.08);
  --good:#62d3a4; --warn:#f0b35a; --bad:#f0806c;
  --f-display:"Bodoni Moda","Bodoni 72","Didot","Bodoni MT",Georgia,serif;
  --f-ui:"Manrope",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink)}
body{color:var(--text);font-family:var(--f-ui);font-size:15px;line-height:1.45;overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Fond de l'application ---------- */
.shell{position:fixed;inset:0;overflow:hidden;
  background:
   radial-gradient(520px 360px at 100% 0%,rgba(227,194,122,.16),transparent 70%),
   radial-gradient(520px 520px at 0% 30%,rgba(40,160,120,.24),transparent 70%),
   radial-gradient(500px 500px at 100% 85%,rgba(30,110,140,.18),transparent 70%),
   linear-gradient(180deg,#07271e,#03100c)}
.scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.page{max-width:560px;margin:0 auto;
  padding:calc(var(--safe-t) + 12px) max(14px,var(--safe-r)) calc(var(--safe-b) + 120px) max(14px,var(--safe-l))}

/* ---------- En-tête ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px}
.top .hello{font-size:12px;color:var(--muted)}
.top .ttl{display:block;height:36px;width:min(230px,58vw)}
.top-r{display:flex;align-items:center;gap:10px}
.top .ic{width:44px;height:44px;border-radius:11px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.syncdot{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);background:rgba(0,0,0,.25);padding:5px 9px;border-radius:999px;border:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.07)}
.syncdot i{width:8px;height:8px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.syncdot.ok i{background:var(--good);box-shadow:0 0 8px var(--good)}
.syncdot.busy i{background:var(--gold);animation:pulse 1s infinite}
.syncdot.err i{background:var(--bad)}
@keyframes pulse{50%{opacity:.3}}
.h-title{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1.1;margin:6px 0 4px;
  background:linear-gradient(180deg,#fff6d6,#e3c27a 55%,#a5772c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3a2706) drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.h-sub{color:var(--muted);font-size:13px;margin:0 0 14px}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--gold);font-weight:800;font-size:13px;padding:6px 0}
.back svg{width:16px;height:16px}

/* ---------- Mois ---------- */
.months{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -14px 12px;padding:6px 14px 12px;scroll-snap-type:x proximity}
.months::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:0;color:#a9bdb5;border-radius:12px;padding:7px 12px;font-size:12px;font-weight:800;scroll-snap-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.03));box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.08);position:relative}
.chip.on{color:var(--gold-ink);text-shadow:0 1px 0 rgba(255,255,255,.5);background:linear-gradient(180deg,#fff6d6,#f1d28b 35%,#c99a44 70%,#e8c67c);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 3px 0 #7a5418,0 4px 0 #3e2a08,0 8px 12px rgba(0,0,0,.5);transform:translateY(-2px)}
.chip .dotr{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--good)}
.seg{display:flex;padding:4px;border-radius:14px;gap:4px;margin-bottom:14px;background:rgba(0,0,0,.3);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.07)}
.seg button{flex:1;border:0;background:none;color:var(--muted);font-weight:800;font-size:12.5px;padding:8px 6px;border-radius:10px}
.seg button.on{color:var(--gold-ink);background:linear-gradient(180deg,#fff6d6,#f1d28b 35%,#c99a44 70%,#e8c67c);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 #7a5418,0 5px 10px rgba(0,0,0,.45)}

/* ---------- Verre épais ---------- */
.stack{display:flex;flex-direction:column;gap:14px}
.g{position:relative;border-radius:24px;padding:14px;
  background:linear-gradient(155deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.07) 100%),rgba(6,30,24,.55);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.38),inset 1.5px 0 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.35),
    inset 0 -18px 28px -10px rgba(0,0,0,.35),inset 0 18px 24px -14px rgba(255,255,255,.12),
    0 4px 0 rgba(4,22,17,.95),0 5px 0 rgba(255,255,255,.05),0 22px 34px -12px rgba(0,0,0,.85),0 8px 14px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  transition:transform .25s ease}
.g::before{content:"";position:absolute;left:10px;right:10px;top:1px;height:44%;max-height:120px;border-radius:22px 22px 60% 60%/22px 22px 30% 30%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0))}
.g.goldrim{border-color:rgba(227,194,122,.38)}
.g.alert-over{border-color:rgba(240,128,108,.55)}
.lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.num{font-variant-numeric:tabular-nums;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.7)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.muted{color:var(--muted)} .small{font-size:12px}
.pos{color:var(--good)} .neg{color:var(--bad)}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.link{background:none;border:0;padding:0;font-size:11.5px;color:var(--gold);font-weight:800}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 9px;border-radius:999px;text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 2px 4px rgba(0,0,0,.4)}
.pill.prev{color:var(--gold);background:linear-gradient(180deg,rgba(227,194,122,.22),rgba(227,194,122,.06));border:1px solid rgba(227,194,122,.45)}
.pill.real,.pill.ok{color:var(--good);background:linear-gradient(180deg,rgba(98,211,164,.22),rgba(98,211,164,.05));border:1px solid rgba(98,211,164,.45)}
.pill.wa{color:var(--warn);background:linear-gradient(180deg,rgba(240,179,90,.22),rgba(240,179,90,.05));border:1px solid rgba(240,179,90,.45)}
.pill.ko{color:var(--bad);background:linear-gradient(180deg,rgba(240,128,108,.22),rgba(240,128,108,.05));border:1px solid rgba(240,128,108,.45)}

.hero{padding:16px 16px 10px}
.bigsvg{display:block;width:100%;max-width:100%;margin:2px 0 0}
.hero .bigsvg{height:52px}
.spark{width:100%;height:64px;display:block;margin-top:4px}
.sparkwrap{position:relative}
.sdot{position:absolute;width:14px;height:14px;border-radius:50%;pointer-events:none;transition:left .3s,top .3s;
  background:radial-gradient(circle at 35% 30%,#fffaf0,#e3c27a 50%,#7d571c);box-shadow:0 3px 6px rgba(0,0,0,.6),0 0 0 2px rgba(255,246,214,.35)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{padding:12px}
.kpi .v{font-size:18px;margin-top:2px}
.kpi .s{font-size:11px;color:var(--muted);margin-top:1px}
.gem{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:8px;position:relative;
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 var(--edge),0 8px 12px rgba(0,0,0,.5)}
.gem svg{width:17px;height:17px;position:relative;z-index:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.45))}
.gem::after{content:"";position:absolute;left:4px;right:4px;top:2px;height:45%;border-radius:8px 8px 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0))}
.d-in{background:radial-gradient(circle at 35% 25%,#c4f7df,#4cc394 45%,#1b7353);--edge:#0d4a34}
.d-out{background:radial-gradient(circle at 35% 25%,#ffd6c9,#ea7c62 45%,#99391f);--edge:#5c1f0f}
.d-sav{background:radial-gradient(circle at 35% 25%,#dcebff,#6f9fd8 45%,#2f5c96);--edge:#1a3559}
.d-left{background:radial-gradient(circle at 35% 25%,#fff6d6,#e3b960 45%,#94681f);--edge:#5a3d0c}
.d-debt{background:radial-gradient(circle at 35% 25%,#eadcff,#a07fd6 45%,#563894);--edge:#2e1c55}
.gauge-row{display:flex;align-items:center;gap:12px}
.gauge{width:108px;height:108px;flex:0 0 auto}
.gauge-txt{min-width:0}
.gauge-txt p{margin:6px 0 0;font-size:12px;color:var(--muted)}
.donut-wrap{display:flex;gap:8px;align-items:center}
.donut{width:142px;height:118px;flex:0 0 auto}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.legend li{display:flex;align-items:center;gap:7px;font-size:11.5px}
.legend li i{width:10px;height:10px;border-radius:3px;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 rgba(0,0,0,.45)}
.legend li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d8e3de}
.legend li b{font-variant-numeric:tabular-nums;font-weight:800}
.bars{width:100%;height:168px;display:block}
.leg2{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted);margin-top:2px}
.leg2 i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;box-shadow:0 2px 0 rgba(0,0,0,.45)}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:18px 8px}
.empty b{display:block;color:var(--text);font-size:15px;margin-bottom:4px}

/* listes en creux */
.list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li,.well{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(255,255,255,.02));box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.07)}
.list .t{flex:1;min-width:0}
.list .t b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .t small{color:var(--muted);font-size:11px}
.list .a{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;text-shadow:0 2px 3px rgba(0,0,0,.7);white-space:nowrap}
.a.out{color:#f6c3b5} .a.in{color:#b6f0d5}
.cal{width:32px;height:34px;border-radius:8px;flex:0 0 auto;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,#fdfaf0,#d9d2bd);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 3px 0 #8f8670,0 6px 8px rgba(0,0,0,.5)}
.cal b{display:block;height:9px;background:linear-gradient(180deg,#e9745b,#b6432c);font-size:6px;color:#fff;text-align:center;line-height:9px;letter-spacing:.06em}
.cal span{flex:1;display:grid;place-items:center;font-weight:800;font-size:14px;color:#1d2a25;line-height:1}
.tick{width:30px;height:30px;border-radius:50%;flex:0 0 auto;border:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(255,255,255,.04));box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.1)}
.tick svg{width:15px;height:15px;opacity:.25}
.tick.on{background:radial-gradient(circle at 35% 28%,#d4ffec,#4cc394 50%,#1b7353);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 #0d4a34,0 6px 10px rgba(0,0,0,.5)}
.tick.on svg{opacity:1}
.bar{height:8px;border-radius:999px;background:rgba(0,0,0,.4);box-shadow:inset 0 2px 3px rgba(0,0,0,.6);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(180deg,#d4ffec,#4cc394 50%,#1b7353);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.bar.warn i{background:linear-gradient(180deg,#ffe2b0,#f0b35a 50%,#a46a17)}
.bar.over i{background:linear-gradient(180deg,#ffd0c4,#f0806c 50%,#a3392a)}

/* tableau du mois */
.mt{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12.5px}
.mt th{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;text-align:right;padding:0 4px}
.mt th:first-child{text-align:left}
.mt td{padding:7px 4px;background:rgba(0,0,0,.18);text-align:right;font-variant-numeric:tabular-nums;vertical-align:middle}
.mt td:first-child{text-align:left;border-radius:12px 0 0 12px;padding-left:10px;max-width:120px}
.mt td:last-child{border-radius:0 12px 12px 0;padding-right:6px}
.mt td .lab{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt td .d{font-size:10.5px;color:var(--muted)}
.mt tfoot td{background:none;font-weight:800;color:var(--gold);border-top:1px solid var(--line)}
.in-num{width:82px;text-align:right;border:0;border-radius:10px;padding:7px 8px;font-weight:800;font-variant-numeric:tabular-nums;font-size:13px;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2));box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.08)}
.in-num::placeholder{color:#58716a;font-weight:600}
.in-num:focus{outline:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 2px var(--gold)}

/* formulaires */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.field .fl{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.inp,select.inp,textarea.inp{width:100%;border:0;border-radius:12px;padding:11px 12px;font-size:15px;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2));box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.08);color:var(--text)}
select.inp{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2));
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%,0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat;padding-right:32px}
.inp:focus{outline:0;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 0 0 2px var(--gold)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mgrid .field .in-num{width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:11px 16px;font-size:14px;font-weight:800;color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 3px 0 rgba(0,0,0,.55),0 8px 14px rgba(0,0,0,.4)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 1px 0 rgba(0,0,0,.55)}
.btn.gold,.cta-gold{border:0;color:var(--gold-ink);text-shadow:0 1px 0 rgba(255,255,255,.55);
  background:linear-gradient(180deg,#fff6d6 0%,#f1d28b 30%,#c99a44 62%,#e8c67c 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -2px 3px rgba(90,60,10,.45) inset,0 4px 0 #6b4a14,0 5px 0 #3e2a08,0 14px 22px rgba(0,0,0,.5)}
.btn.gold:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 0 #6b4a14,0 6px 12px rgba(0,0,0,.5)}
.btn.danger{color:#ffd8cf;border-color:rgba(240,128,108,.5);background:linear-gradient(180deg,rgba(240,128,108,.28),rgba(240,128,108,.08))}
.btn.block{width:100%}
.btn.sm{padding:7px 11px;font-size:12.5px;border-radius:11px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.icon-btn{width:34px;height:34px;border-radius:11px;border:0;display:grid;place-items:center;flex:0 0 auto;color:var(--muted);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 0 rgba(0,0,0,.5)}
.icon-btn svg{width:16px;height:16px}
.toggle{position:relative;width:52px;height:30px;border-radius:999px;border:0;flex:0 0 auto;background:rgba(0,0,0,.45);box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;transition:left .2s;
  background:radial-gradient(circle at 35% 30%,#fff,#c9d6d1 60%,#7d8f88);box-shadow:0 3px 5px rgba(0,0,0,.5)}
.toggle.on{background:linear-gradient(180deg,#c99a44,#e3c27a);box-shadow:inset 0 2px 4px rgba(90,60,10,.6)}
.toggle.on::after{left:25px;background:radial-gradient(circle at 35% 30%,#fffaf0,#f5dc9a 50%,#b8862f)}

/* menu Plus */
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.menu button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;background:none;padding:0}
.menu .g{padding:12px 14px}
.menu .t{flex:1;min-width:0}
.menu .t b{display:block;font-size:14.5px}
.menu .t small{color:var(--muted);font-size:12px}
.menu .chev{width:16px;height:16px;color:var(--faint)}
.tagchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tagchips span{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:5px 6px 5px 10px;border-radius:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.tagchips span button{border:0;background:none;color:var(--faint);padding:0 4px;font-size:14px;line-height:1}
.tagchips span button:disabled{opacity:.25}
details.fold summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:12px;color:var(--gold);padding:6px 0}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::after{content:"+";font-size:16px}
details.fold[open] summary::after{content:"–"}
.ctl{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--hair);font-size:13px}
.ctl:first-child{border-top:0}
.ctl .st{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900}
.ctl .st.ok{background:rgba(98,211,164,.18);color:var(--good)}
.ctl .st.ko{background:rgba(240,128,108,.2);color:var(--bad)}
.ctl small{display:block;color:var(--muted)}
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:18px;font-size:13px;
  background:linear-gradient(180deg,rgba(240,179,90,.2),rgba(240,179,90,.06));border:1px solid rgba(240,179,90,.45);box-shadow:0 10px 20px rgba(0,0,0,.35)}
.banner.over{background:linear-gradient(180deg,rgba(240,128,108,.24),rgba(240,128,108,.07));border-color:rgba(240,128,108,.55)}
.banner b{display:block}
.ytd{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:8px}
.ytd div{min-width:0}
.ytd .v{font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
.ytd .k{font-size:11px;color:var(--muted)}
.ring{width:64px;height:64px;flex:0 0 auto}
.proj-h{display:flex;gap:12px;align-items:center}
.note{font-size:12px;color:var(--muted);margin:8px 0 0}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px;margin-top:8px}
.kv span:nth-child(odd){color:var(--muted)}
.kv span:nth-child(even){text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.phrase{font-family:var(--f-mono);font-size:14px;padding:12px;border-radius:12px;background:rgba(0,0,0,.35);box-shadow:inset 0 2px 5px rgba(0,0,0,.6);word-break:break-all;user-select:all;-webkit-user-select:all}

/* ---------- Barre d'onglets ---------- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 10px);width:min(540px,calc(100% - 20px));height:68px;border-radius:28px;z-index:30;
  display:flex;align-items:center;justify-content:space-around;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06) 50%,rgba(255,255,255,.1)),rgba(5,25,20,.4);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.3),0 5px 0 rgba(3,16,12,.9),0 24px 34px rgba(0,0,0,.6)}
.tab{background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:800;padding:4px 6px;min-width:56px}
.tab svg{width:22px;height:22px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.tab.on{color:var(--gold)}
.fab{width:62px;height:62px;border-radius:50%;margin-top:-34px;border:0;display:grid;place-items:center;color:#3e2a08;flex:0 0 auto;
  background:radial-gradient(circle at 35% 28%,#fffaf0 0%,#f3d58f 22%,#d1a14a 55%,#8a6424 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -5px 8px rgba(80,50,8,.55),0 0 0 3px #b8862f,0 0 0 4px #5e3f0e,0 6px 0 4px #3e2a08,0 18px 26px rgba(0,0,0,.6),0 0 0 9px rgba(3,16,12,.9)}
.fab svg{width:27px;height:27px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 -1px 0 rgba(0,0,0,.35))}
.fab:active{transform:translateY(3px)}

/* ---------- Feuille (saisie, confirmations) ---------- */
.sheet-bg{position:fixed;inset:0;z-index:50;background:rgba(1,8,6,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.sheet-bg.show{opacity:1}
.sheet{position:fixed;left:50%;bottom:0;z-index:51;width:min(560px,100%);max-height:92%;overflow-y:auto;transform:translate(-50%,105%);transition:transform .32s cubic-bezier(.2,.9,.25,1);
  border-radius:28px 28px 0 0;padding:10px max(16px,var(--safe-r)) calc(var(--safe-b) + 18px) max(16px,var(--safe-l));
  background:linear-gradient(180deg,#123a30,#07211a 40%,#051712);border:1px solid rgba(255,255,255,.14);border-bottom:0;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 -20px 40px rgba(0,0,0,.6)}
.sheet.show{transform:translate(-50%,0)}
.sheet .grab{width:42px;height:5px;border-radius:9px;background:rgba(255,255,255,.25);margin:0 auto 10px}
.sheet h3{font-family:var(--f-display);font-weight:800;font-size:21px;margin:0 0 8px;color:var(--gold-hi)}
.amount{font-size:40px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;margin:0 0 6px;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff8dc,#f1d28b 40%,#b8862f 70%,#f3d58f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #2c1d04) drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0}
.pad button{height:42px;border-radius:14px;border:0;font-size:21px;font-weight:800;color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 rgba(0,0,0,.6),0 8px 12px rgba(0,0,0,.35)}
.pad button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.6)}
.choices{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 8px;max-height:96px;overflow-y:auto;padding:2px}
.choices button{border:0;border-radius:11px;padding:8px 11px;font-size:12.5px;font-weight:700;color:#cfe0d9;background:rgba(0,0,0,.3);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.08)}
.choices button.on{color:var(--gold-ink);background:linear-gradient(180deg,#fff6d6,#f1d28b 35%,#c99a44 70%,#e8c67c);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 #7a5418,0 5px 8px rgba(0,0,0,.45)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 12px);transform:translate(-50%,-140%);z-index:80;max-width:calc(100% - 32px);transition:transform .35s cubic-bezier(.2,.9,.25,1.2);
  padding:11px 16px;border-radius:16px;font-size:13.5px;font-weight:700;background:linear-gradient(180deg,#1c4a3d,#0b2a22);border:1px solid rgba(227,194,122,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 30px rgba(0,0,0,.6)}
.toast.show{transform:translate(-50%,0)}

/* ---------- Verrouillage ---------- */
.lock{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;
  background:radial-gradient(90% 60% at 50% 35%,#11433a,#061a14 60%,#020806)}
.lock img{width:92px;height:92px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6))}
.lock .dots{display:flex;gap:16px}
.lock .dots i{width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.45);box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
.lock .dots i.on{background:radial-gradient(circle at 35% 30%,#fffaf0,#e3c27a 50%,#7d571c);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.lock .pad{width:min(300px,100%)}
.lock .pad button{height:64px;border-radius:50%;width:64px;justify-self:center;font-size:24px}
.lock .msg{min-height:20px;color:var(--muted);font-size:13px;text-align:center}
.lock.shake .dots{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;background:radial-gradient(90% 60% at 50% 40%,#11433a 0%,#061a14 55%,#020806 100%);transition:opacity .6s}
.intro.out{opacity:0;pointer-events:none}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
.intro .i-bg{z-index:1}.intro .i-fg{z-index:6;pointer-events:none}
.i-halo{position:absolute;left:50%;top:41%;width:420px;height:420px;transform:translate(-50%,-50%) scale(.5);border-radius:50%;z-index:2;opacity:0;
  background:radial-gradient(circle,rgba(255,226,150,.38),rgba(227,194,122,.08) 45%,transparent 70%)}
.intro.play .i-halo{animation:halo 2.6s .6s ease-out forwards}
@keyframes halo{45%{opacity:1}to{opacity:.6;transform:translate(-50%,-50%) scale(1)}}
.i-word{position:absolute;left:50%;top:41%;transform:translate(-50%,-58%);width:min(440px,96vw);z-index:4;text-align:center}
.i-svg{width:100%;height:auto;display:block;overflow:visible}
.i-svg .L{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.intro.play .i-svg .L{animation:drop 1.25s cubic-bezier(.18,.9,.25,1.12) forwards}
@keyframes drop{0%{opacity:0;transform:translateY(-70px) scale(1.5);filter:blur(10px)}60%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:none}}
.i-svg .spark{opacity:0;transform-box:fill-box;transform-origin:center}
.intro.play .i-svg .spark{animation:glint 1.4s ease-in-out infinite}
@keyframes glint{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.i-sub{margin-top:-6px;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:0;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.intro.play .i-sub{animation:fade 1s 2.3s forwards}
@keyframes fade{to{opacity:1}}
.i-enter{position:absolute;bottom:calc(var(--safe-b) + 56px);left:50%;transform:translateX(-50%);z-index:7;opacity:0;display:flex;flex-direction:column;align-items:center;gap:12px;white-space:nowrap}
.intro.play .i-enter{animation:fade .8s 3.2s forwards}
.i-skip{font-size:11px;color:var(--muted);letter-spacing:.06em}
.cta-gold{border-radius:999px;padding:15px 32px;font-weight:800;font-size:15px;letter-spacing:.06em}
.cta-gold:active{transform:translateY(4px)}

@media (min-width:900px){ .page{max-width:600px} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} .i-svg .L,.i-sub,.i-enter{opacity:1!important} }

.choices.types{flex-wrap:nowrap;overflow-x:auto;max-height:none;scrollbar-width:none;margin:0 -16px 6px;padding:2px 16px 6px}
.choices.types::-webkit-scrollbar{display:none}
.choices.types button{flex:0 0 auto}
@media (max-height:700px){.amount{font-size:34px}.pad button{height:38px}.sheet h3{font-size:19px}}

svg{max-width:100%}
.page{overflow-x:clip}