/* Finances perso : interface en noir et blanc, la couleur est réservée à la data (Besoin, Envie, Invest). */
:root{
  --bg:#f3f5f8;
  --surface:#ffffff;
  --sunk:#eef1f5;
  --ink:#0f1419;
  --ink-2:#4a5463;
  --muted:#7c8592;
  --line:#e0e4ea;
  --bar:#3a4556;
  --s1:#2a78d6;
  --s2:#eb6834;
  --s3:#1baf7a;
  --heat-lo:#eef1f5;
  --heat-hi:#2f3a4b;
  --warn-bg:#fff2d9;
  --warn-ink:#8a5300;
  --rouge:#d03b3b;
  --ombre:0 18px 40px -18px rgba(15,20,25,.35);
  --police:system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0f13; --surface:#151a21; --sunk:#1f2630; --ink:#eef1f5; --ink-2:#b3bcc8; --muted:#808a97; --line:#2a313c;
    --bar:#a9b6c8; --s1:#3987e5; --s2:#d95926; --s3:#199e70;
    --heat-lo:#1d232c; --heat-hi:#b8c6d8; --warn-bg:#3a2b12; --warn-ink:#f2c46d; --rouge:#e66767;
    --ombre:0 18px 40px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0}
body{background:var(--surface); color:var(--ink); font-family:var(--police); font-size:15px; line-height:1.4; -webkit-font-smoothing:antialiased; overscroll-behavior:none}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--s1); outline-offset:2px; border-radius:6px}
.sw{display:inline-block; width:9px; height:9px; border-radius:2px; flex:none}
.sw.s1{background:var(--s1)} .sw.s2{background:var(--s2)} .sw.s3{background:var(--s3)}
.k{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}

/* Connexion */
.connexion{min-height:100%; display:grid; place-items:center; padding:24px}
.connexion-boite{width:min(320px,100%); display:flex; flex-direction:column; gap:12px; align-items:stretch; text-align:center}
.connexion-logo{align-self:center; border-radius:16px}
.connexion h1{margin:0 0 8px; font-size:24px}
.connexion input{height:48px; border-radius:12px; border:1px solid var(--line); background:var(--sunk); padding:0 14px; font-size:16px}
.erreur{color:var(--rouge); margin:0; font-size:14px}

/* Coquille */
.appli{height:100%; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px)}
.ecrans{flex:1; min-height:0; position:relative}
.vue{position:absolute; inset:0; display:flex; flex-direction:column}
.defile{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 18px 24px; display:flex; flex-direction:column; gap:16px}
.defile > *{flex-shrink:0}
.tabs{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); background:var(--surface); padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px))}
.tab{border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:600; color:var(--muted); padding:4px 0}
.tab svg{width:24px; height:24px}
.tab.on{color:var(--ink)}
@media (min-width:720px){
  body{background:var(--bg)}
  .appli{max-width:480px; margin:24px auto; height:calc(100% - 48px); background:var(--surface); border:1px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:var(--ombre); padding-top:0}
}

/* Saisir */
.tete{display:flex; justify-content:space-between; align-items:center; min-height:36px}
.tete-t{font-weight:700; font-size:17px}
.ico{width:38px; height:38px; border-radius:50%; border:0; background:transparent; display:grid; place-items:center; color:var(--ink-2)}
.ico:hover{background:var(--sunk)}
.trip{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; border:0; background:var(--sunk); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600}
.trip i{width:7px; height:7px; border-radius:50%; background:var(--ink)}
.propositions{display:flex; flex-direction:column; gap:12px}
.said{margin:0; font-size:14px; color:var(--ink-2); font-style:italic}
ul.cards{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.card{border:1px solid var(--line); border-radius:14px; padding:10px 12px; display:grid; grid-template-columns:22px minmax(0,1fr); gap:6px 10px; align-items:start}
.ck{width:22px; height:22px; border-radius:50%; border:0; padding:0; background:var(--ink); color:var(--surface); display:grid; place-items:center; margin-top:2px}
.ck.off{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line); color:transparent}
.card-h{display:flex; align-items:center; gap:8px; min-width:0}
.c-lib{flex:1; min-width:0; border:0; background:transparent; font-weight:650; font-size:15px; padding:2px 0; border-radius:4px}
.c-mt{width:92px; border:0; background:transparent; font-weight:650; font-size:15px; text-align:right; font-variant-numeric:tabular-nums; padding:2px 0; border-radius:4px}
.c-lib:focus,.c-mt:focus{background:var(--sunk); outline:none}
.euro{font-weight:650}
.chips{grid-column:2; display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:5px; border:0; background:var(--sunk); color:var(--ink-2); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600}
.chip.vide{background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--muted)}
.chip.fixe{cursor:default}
.warn{grid-column:2; justify-self:start; display:inline-flex; align-items:center; gap:5px; background:var(--warn-bg); color:var(--warn-ink); border-radius:6px; padding:2px 8px; font-size:12px; font-weight:650}
.card.dim .c-lib,.card.dim .c-mt,.card.dim .euro{color:var(--muted)}
.actions{display:flex; gap:10px}
.btn-ok{flex:1; border:0; min-height:46px; border-radius:12px; background:var(--ink); color:var(--surface); font-weight:650; font-size:15px; padding:0 16px}
.btn-ok:disabled{opacity:.4}
.btn-sec{border:0; min-height:46px; border-radius:12px; background:var(--sunk); color:var(--ink); font-weight:600; padding:0 16px}
.btn-danger{border:0; min-height:46px; border-radius:12px; background:transparent; color:var(--rouge); font-weight:650; padding:0 16px}
.btn-danger.arme{background:var(--rouge); color:#fff}
.dock{display:flex; align-items:center; gap:12px; padding:10px 18px 12px; border-top:1px solid var(--line); background:var(--surface)}
.dock input{flex:1; min-width:0; height:46px; border-radius:23px; border:0; background:var(--sunk); padding:0 16px; font-size:16px}
.mic{flex:none; width:56px; height:56px; border-radius:50%; border:0; background:var(--ink); color:var(--surface); display:grid; place-items:center; box-shadow:0 0 0 5px var(--sunk); position:relative}
.mic.ecoute{background:var(--rouge); color:#fff}
.mic.travail{opacity:.75}
.mic .duree{position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:650; color:var(--rouge); font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: no-preference){
  .mic.ecoute{animation:pouls 1.4s ease-in-out infinite}
  @keyframes pouls{0%,100%{box-shadow:0 0 0 5px var(--sunk)}50%{box-shadow:0 0 0 10px var(--sunk)}}
  .tourne{animation:tour 0.9s linear infinite; transform-origin:center}
  @keyframes tour{to{transform:rotate(360deg)}}
}
.recent{display:flex; flex-direction:column; gap:18px}
.jour-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.jour-h b{font-variant-numeric:tabular-nums}
.jour-vide{color:var(--muted); font-size:14px}

/* Listes d'opérations */
ul.ops{list-style:none; margin:0; padding:0}
.op{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 12px; padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer}
.op:last-child{border-bottom:0}
.op-n{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.op-c{grid-column:1; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; min-width:0}
.op-m{grid-row:1 / span 2; grid-column:2; align-self:center; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap}
.op.revenu .op-m{color:var(--s3)}
.op.avenir .op-n,.op.avenir .op-m{color:var(--muted)}
.liste-ops{display:flex; flex-direction:column; gap:14px}
.groupe-h{display:flex; justify-content:space-between; font-size:12px; font-weight:650; color:var(--muted)}

/* Mois */
.msw{display:flex; align-items:center; justify-content:space-between; gap:8px}
.msw-t{display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px}
.part{font-size:11px; font-weight:650; color:var(--ink-2); background:var(--sunk); border-radius:999px; padding:1px 8px}
.nav-b{width:38px; height:38px; border-radius:50%; border:0; background:transparent; display:grid; place-items:center}
.nav-b:hover{background:var(--sunk)}
.nav-b:disabled{color:var(--line); background:transparent; cursor:default}
.hero{display:flex; justify-content:space-between; align-items:flex-end; gap:12px}
.hero > div{display:flex; flex-direction:column; gap:1px}
.hero-v{font-size:38px; font-weight:700; letter-spacing:-.02em; line-height:1.05}
.hero-d{font-size:13px; color:var(--ink-2)}
.hero-in{align-items:flex-end; text-align:right}
.hero-v2{font-size:21px; font-weight:650}
.bei{display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; background:var(--sunk)}
.bei i{display:block; min-width:2px}
.bei-l{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:-8px}
.bei-l span{display:inline-flex; align-items:center; gap:5px}
.bei-l b{color:var(--ink); font-variant-numeric:tabular-nums}
.voyages{display:flex; flex-wrap:wrap; gap:6px}
.bloc-h{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:4px}
.avgkey{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted)}
.avgkey i{display:inline-block; width:2px; height:11px; border-radius:1px; background:var(--ink)}
ul.cats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.cat{display:flex; flex-direction:column; gap:5px; cursor:pointer; border-radius:8px}
.cat.choisie .cat-n{font-weight:700}
.cat-t{display:flex; align-items:baseline; gap:8px}
.cat-n{flex:1; min-width:0; overflow-wrap:anywhere}
.cat-v{font-weight:650; font-variant-numeric:tabular-nums}
.cat-p{width:38px; text-align:right; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums}
.cat-b{position:relative; height:6px; border-radius:3px; background:var(--sunk)}
.cat-b i{position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--bar)}
.cat-b b{position:absolute; top:-3px; width:2px; height:12px; border-radius:1px; background:var(--ink); margin-left:-1px}
.cats.filtre-actif .cat:not(.choisie) .cat-b i{opacity:.35}
.filtre{border:0; background:var(--sunk); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:650}
.ops-h .k span{color:var(--ink-2)}

/* Année */
.ytitle{font-weight:700; font-size:17px; text-align:center; padding:6px 0}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .base{stroke:var(--muted); stroke-width:1}
.chart .ax{fill:var(--muted); font-size:8.5px; font-family:var(--police)}
.chart .ax.on{fill:var(--ink); font-weight:700}
.chart .f1{fill:var(--s1)} .chart .f2{fill:var(--s2)} .chart .f3{fill:var(--s3)}
.chart .rev{stroke:var(--ink); stroke-width:2; stroke-linecap:round}
.chart .hit{fill:transparent}
.chart .sel{fill:var(--sunk)}
.chart .col{cursor:pointer; outline:none}
.chart .col.partiel .seg{opacity:.45}
.chart .col:hover .seg,.chart .col:focus .seg{opacity:.8}
.chart .col:focus-visible .hit{stroke:var(--s1); stroke-width:1.5}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--ink-2); margin-top:-6px}
.legend span{display:inline-flex; align-items:center; gap:5px}
.lk{display:inline-block; width:12px; height:2px; border-radius:1px; background:var(--ink)}
table.heat{width:100%; border-collapse:separate; border-spacing:2px; font-size:12px; font-variant-numeric:tabular-nums; margin:0 -2px}
table.heat th{font-weight:600; color:var(--muted); font-size:11px; padding:0 0 2px}
table.heat th:first-child,table.heat td:first-child{text-align:left; padding-right:4px; color:var(--ink-2); font-weight:600; white-space:nowrap}
table.heat td.c{text-align:center; height:26px; border-radius:4px; font-weight:600}

/* Feuille du bas */
.voile{position:fixed; inset:0; background:rgba(8,10,14,.45); z-index:30}
.feuille{position:fixed; left:0; right:0; bottom:0; z-index:31; max-height:88%; overflow-y:auto; background:var(--surface); border-radius:20px 20px 0 0; padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:14px; box-shadow:var(--ombre)}
@media (min-width:720px){.feuille{left:50%; right:auto; width:480px; transform:translateX(-50%)}}
.poignee{align-self:center; width:40px; height:5px; border-radius:3px; background:var(--line)}
.f-tete{display:flex; justify-content:space-between; align-items:center}
.f-tete h2{margin:0; font-size:17px}
.champ{display:flex; flex-direction:column; gap:5px}
.champ > span{font-size:12px; font-weight:650; color:var(--muted)}
.champ input,.champ select{height:46px; border-radius:12px; border:1px solid var(--line); background:var(--sunk); padding:0 12px; font-size:16px; width:100%}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.segment{display:flex; background:var(--sunk); border-radius:12px; padding:3px; gap:3px}
.segment button{flex:1; border:0; background:transparent; border-radius:9px; min-height:38px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; gap:6px}
.segment button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.grille{display:flex; flex-wrap:wrap; gap:8px}
.grille .chip{font-size:14px; padding:8px 12px}
.grille .chip.on{background:var(--ink); color:var(--surface)}
.ligne-fixe{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 12px; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer}
.ligne-fixe.inactive{opacity:.45}
.ligne-fixe small{grid-column:1; color:var(--muted); font-size:12.5px}
.ligne-fixe b{grid-row:1 / span 2; grid-column:2; align-self:center; font-variant-numeric:tabular-nums}
.bascule{display:flex; justify-content:space-between; align-items:center; min-height:44px}
.bascule input{width:46px; height:28px; accent-color:var(--ink)}
.sep{height:1px; background:var(--line)}

/* Toast et infobulle */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(150px + env(safe-area-inset-bottom,0px)); z-index:40; background:var(--ink); color:var(--surface); border-radius:12px; padding:10px 16px; font-weight:600; font-size:14px; max-width:calc(100% - 32px); box-shadow:var(--ombre)}
.tip{position:fixed; z-index:20; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--ombre); border-radius:10px; padding:8px 10px; font-size:12px; line-height:1.45; min-width:150px; max-width:230px}
.tip-t{font-weight:700; margin-bottom:2px}
.tip-r{display:flex; align-items:center; gap:7px}
.tip-r b{font-variant-numeric:tabular-nums}
.tip-r span{color:var(--ink-2)}
.tip-k{display:inline-block; width:10px; height:2px; border-radius:1px; flex:none}