/* ===========================================================================
   TG INVEST — système de design partagé (cockpit, architecture, fonctionnement)
   Polices auto-hébergées sur la VM (Outfit display / Inter texte) : aucune
   requête vers un CDN. Couleurs catégorielles validées daltonisme en clair ET
   en sombre (ΔE adjacent ≥ 8 protan/deutan).
   =========================================================================== */

:root{
  --ground:#f2f4f8; --surface:#ffffff; --surface-2:#f7f8fb; --surface-3:#eef1f6;
  --ink:#12131a; --ink-2:#3d404d; --mute:#6b6e7b;
  --line:#e3e5ec; --line-2:#eef0f5;

  --gain:#0a7d55; --gain-tint:#e6f4ee; --gain-ink:#07603f;
  --loss:#c0362c; --loss-tint:#fbeceb; --loss-ink:#93251d;
  --flag:#b5730b; --flag-tint:#fdf3e3;
  --info:#2563c9; --info-tint:#e8effb;

  --sonolix:#2563c9; --voice:#b02aa0; --assist:#0f8f7a; --chat:#c07a0e;
  --sonolix-tint:#e8effb; --voice-tint:#faeaf6; --assist-tint:#e4f4f1; --chat-tint:#fbf2e2;

  --shadow:0 1px 2px rgba(16,20,40,.05), 0 10px 26px -14px rgba(16,20,40,.16);
  --shadow-lift:0 2px 6px rgba(16,20,40,.07), 0 22px 44px -20px rgba(16,20,40,.26);
  --r:18px; --r-s:11px; --r-xs:8px;
  --maxw:1200px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0b0c10; --surface:#15171e; --surface-2:#1a1d25; --surface-3:#21242e;
    --ink:#eceef4; --ink-2:#c3c7d2; --mute:#8f93a1;
    --line:#262a34; --line-2:#1d212a;
    --gain:#35b884; --gain-tint:#0f2a1f; --gain-ink:#6fd6ab;
    --loss:#e8695c; --loss-tint:#2a1513; --loss-ink:#ffa093;
    --flag:#d9a03f; --flag-tint:#271e10;
    --info:#5d97ef; --info-tint:#131e30;
    --sonolix-tint:#131e30; --voice-tint:#291328; --assist-tint:#0d221e; --chat-tint:#251a0c;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.7);
    --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 22px 44px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0b0c10; --surface:#15171e; --surface-2:#1a1d25; --surface-3:#21242e;
  --ink:#eceef4; --ink-2:#c3c7d2; --mute:#8f93a1;
  --line:#262a34; --line-2:#1d212a;
  --gain:#35b884; --gain-tint:#0f2a1f; --gain-ink:#6fd6ab;
  --loss:#e8695c; --loss-tint:#2a1513; --loss-ink:#ffa093;
  --flag:#d9a03f; --flag-tint:#271e10;
  --info:#5d97ef; --info-tint:#131e30;
  --sonolix-tint:#131e30; --voice-tint:#291328; --assist-tint:#0d221e; --chat-tint:#251a0c;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--ground); color:var(--ink); min-height:100vh;
  font-feature-settings:'cv05' 1,'ss01' 1; -webkit-font-smoothing:antialiased;
}
.num,.tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
a{color:inherit}

/* ---------- barre supérieure : le cockpit ---------- */
.tgi-bar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.tgi-bar-in{
  max-width:var(--maxw); margin:0 auto; padding:11px 18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.tgi-brand{
  font-family:'Outfit','Inter',sans-serif; font-weight:800; font-size:17px;
  letter-spacing:-.02em; line-height:1.1; white-space:nowrap;
}
.tgi-brand span{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.1em; color:var(--mute); text-transform:uppercase; margin-top:2px}
.tgi-tabs{display:flex; gap:4px; flex-wrap:wrap; padding:3px; background:var(--surface-3);
  border-radius:12px}
.tgi-tab{
  font-size:13px; font-weight:600; text-decoration:none; color:var(--ink-2);
  padding:7px 13px; border-radius:9px; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.tgi-tab:hover{background:color-mix(in srgb, var(--surface) 70%, transparent); color:var(--ink)}
.tgi-tab.is-active{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(16,20,40,.14); font-weight:700}
.tgi-bar-end{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.tgi-who{font-size:11px; color:var(--mute); text-align:right; line-height:1.4}
.tgi-who a{color:var(--info); cursor:pointer; text-decoration:none; font-weight:600}
.tgi-who a:hover{text-decoration:underline}

/* ---------- ossature de page ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:24px 18px 72px}
.sec{
  font-family:'Outfit','Inter',sans-serif; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:var(--mute);
  margin:34px 0 14px; display:flex; align-items:center; gap:10px;
}
.sec::after{content:''; flex:1; height:1px; background:var(--line)}
.sec:first-child{margin-top:8px}
.lead{font-size:14px; color:var(--mute); line-height:1.6; margin:-6px 0 16px; max-width:70ch}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow);
}
.card-t{font-family:'Outfit','Inter',sans-serif; font-weight:700; font-size:15px;
  display:flex; align-items:center; gap:9px; letter-spacing:-.01em}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-2{display:grid; grid-template-columns:1.25fr .75fr; gap:16px}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}.wrap{padding:16px 12px 48px}}

/* ---------- le verdict : gagne-t-on ou perd-on ---------- */
.verdict{
  border-radius:22px; padding:28px 28px 24px; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-lift); position:relative; overflow:hidden;
}
.verdict::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--vcolor,var(--mute));
}
.verdict.is-gain{--vcolor:var(--gain)}
.verdict.is-loss{--vcolor:var(--loss)}
.verdict-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.verdict-kicker{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
.verdict-num{
  font-family:'Outfit','Inter',sans-serif; font-weight:800; letter-spacing:-.035em;
  font-size:clamp(40px,7vw,64px); line-height:1; color:var(--vcolor); margin:10px 0 6px;
  font-variant-numeric:tabular-nums;
}
.verdict-say{font-size:15px; line-height:1.6; color:var(--ink-2); max-width:62ch}
.verdict-say b{color:var(--ink)}
.verdict-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start}
@media(max-width:860px){.verdict-grid{grid-template-columns:1fr; gap:22px}}

/* barre de balance : revenus vs dépenses, même échelle */
.bal{display:flex; flex-direction:column; gap:14px}
.bal-row{display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:12px}
.bal-lab{font-size:12px; font-weight:600; color:var(--mute); text-transform:uppercase; letter-spacing:.06em}
.bal-track{display:block;height:26px; background:var(--surface-3); border-radius:8px; overflow:hidden}
.bal-fill{height:100%; border-radius:8px; transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bal-val{font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap}

.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px;
  font-size:11.5px; font-weight:700; letter-spacing:.01em}
.chip-gain{background:var(--gain-tint); color:var(--gain-ink)}
.chip-loss{background:var(--loss-tint); color:var(--loss-ink)}
.chip-flag{background:var(--flag-tint); color:var(--flag)}
.chip-info{background:var(--info-tint); color:var(--info)}
.chip-mute{background:var(--surface-3); color:var(--mute)}

/* ---------- cartes application ---------- */
.appcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:0; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.appcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.appcard-top{height:4px; background:var(--c)}
.appcard-in{padding:18px 18px 14px; display:flex; flex-direction:column; gap:2px; flex:1}
.appcard-name{font-family:'Outfit','Inter',sans-serif; font-weight:700; font-size:14.5px;
  display:flex; align-items:center; gap:8px}
.appcard-dot{width:9px; height:9px; border-radius:50%; background:var(--c); flex:none}
.appcard-big{font-family:'Outfit','Inter',sans-serif; font-weight:800; font-size:30px;
  letter-spacing:-.03em; margin-top:10px; font-variant-numeric:tabular-nums; line-height:1}
.appcard-cap{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); margin-top:5px}
.appcard-share{height:6px; border-radius:99px; background:var(--surface-3); margin-top:14px; overflow:hidden}
.appcard-share>div{height:100%; background:var(--c); border-radius:99px}
.appcard-meta{font-size:11.5px; color:var(--mute); line-height:1.55; margin-top:10px}
.appcard-spark{height:40px; margin-top:auto; padding-top:12px}

/* ---------- répartition (barre empilée) ---------- */
.stack{display:flex; height:34px; border-radius:10px; overflow:hidden; gap:2px; background:var(--surface-3)}
.stack>div{height:100%; position:relative}
.stack-leg{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px}
.stack-leg span{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2)}
.stack-leg i{width:10px; height:10px; border-radius:3px; display:block}
.stack-leg b{font-variant-numeric:tabular-nums}

/* ---------- lignes, tableaux, notes ---------- */
.row{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px}
.row:last-child{border-bottom:none}
.row b{font-weight:700; font-variant-numeric:tabular-nums}
.row-strong{border-top:2px solid var(--ink); border-bottom:none; margin-top:6px; padding-top:12px}
.row-strong b{font-size:16px}
.note{font-size:11.5px; color:var(--mute); margin-top:12px; line-height:1.6}
.pos{color:var(--gain)} .neg{color:var(--loss)}
table{width:100%; border-collapse:collapse; font-size:13px}
th{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--mute);
  text-align:left; padding:8px; border-bottom:1px solid var(--line)}
td{padding:9px 8px; border-bottom:1px solid var(--line-2)}
tr:last-child td{border-bottom:none}
.tablewrap{overflow-x:auto}

/* ---------- boutons ---------- */
.btn{font:inherit; font-size:12.5px; font-weight:700; padding:9px 15px; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;
  margin:10px 8px 0 0; transition:background .15s, border-color .15s}
.btn:hover{background:var(--surface-2)}
.btn-blue{background:var(--info); border-color:var(--info); color:#fff}
.btn-red{background:var(--loss); border-color:var(--loss); color:#fff}
.btn.armed{outline:3px solid var(--flag); font-weight:800}
.btn[disabled]{opacity:.5; cursor:wait}
.action-msg{font-size:12px; margin-top:10px; min-height:16px}
.action-msg.ok{color:var(--gain)} .action-msg.ko{color:var(--loss)}

/* ---------- repli technique ---------- */
details.fold{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; margin-top:16px}
details.fold>summary{
  cursor:pointer; list-style:none; padding:16px 20px; font-family:'Outfit','Inter',sans-serif;
  font-weight:700; font-size:14px; display:flex; align-items:center; gap:10px;
}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'▾'; margin-left:auto; color:var(--mute); transition:transform .2s}
details.fold[open]>summary::after{transform:rotate(180deg)}
details.fold>summary small{font-weight:500; color:var(--mute); font-family:'Inter',sans-serif; font-size:12px}
.fold-body{padding:0 20px 20px; border-top:1px solid var(--line-2)}
.fold-body>*:first-child{margin-top:16px}

/* ---------- écran de connexion ---------- */
.login{max-width:380px; margin:11vh auto; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:36px 32px; box-shadow:var(--shadow-lift)}
.login h1{font-family:'Outfit','Inter',sans-serif; font-size:21px; font-weight:800; letter-spacing:-.02em}
.login p{font-size:12.5px; color:var(--mute); margin:4px 0 22px}
.login label{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--mute)}
.login input{width:100%; font:inherit; padding:11px 13px; margin:6px 0 15px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface-2); color:var(--ink)}
.login input:focus{outline:2px solid var(--info); outline-offset:1px}
.login button{width:100%; font:inherit; font-weight:700; padding:12px; border:0;
  border-radius:var(--r-s); background:var(--ink); color:var(--surface); cursor:pointer}
.login .lerr{color:var(--loss); font-size:12px; margin-top:12px; min-height:16px}
.login .alt{display:block; text-align:center; font-size:12px; color:var(--info);
  text-decoration:none; margin-top:14px; font-weight:600}

.errbox{background:var(--loss-tint); color:var(--loss-ink); border:1px solid var(--loss);
  border-radius:var(--r-s); padding:13px 16px; margin:16px 0; font-size:13px; display:none}
.loading{color:var(--mute); font-size:13px; padding:40px; text-align:center}
input[type=month]{font:inherit; font-weight:600; font-size:13px; padding:8px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); color:var(--ink)}

@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}