:root{
    --bg:#f2ede7; --card:#fffdfb; --border:#e0d5c8; --text:#2b241d; --sub:#7d7061; --muted:#aa9c8a;
    --accent:#8c6f56; --accent-bg:#ece0d2;
    --green:#5b7a5e; --green-bg:#e6ede3;
    --red:#a2503f; --red-bg:#f5e3dd;
    --amber:#93752e; --amber-bg:#f3e8d0;
    /* Variantes plus foncées pour le texte des pastilles (.pill-*) : le texte 11px en gras sur fond
       clair (--accent sur --accent-bg, --amber sur --amber-bg) tombait sous le seuil WCAG AA de
       4,5:1 pour du texte normal (3,57:1 et 3,58:1 mesurés) — ces tokens dédiés corrigent juste le
       contraste des pastilles sans toucher --accent/--green/--amber, utilisés ailleurs (boutons,
       bordures, icônes) où le contraste mesuré est suffisant. */
    --accent-pill-fg:#6e5540; --green-pill-fg:#3f5c42; --amber-pill-fg:#75581c;
    /* Couleur dédiée "Compte pro" (bleu-violet) — indépendante de --accent pour rester reconnaissable
       quel que soit le thème d'accent courant (voir aussi la surcharge de --accent dans #view-pro). */
    --pro:#4f5fd1; --pro-bg:#e3e5fb; --pro-pill-fg:#3c48a8;
    --radius:14px;
    --container:520px;
  }
  @media (min-width:700px){ :root{ --container:640px; } }
  @media (min-width:1000px){ :root{ --container:760px; } }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#1b1713; --card:#241f1a; --border:#3a332b; --text:#f0e9e1; --sub:#b3a696; --muted:#7d7161;
      --accent:#c4a688; --accent-bg:#3c2f24;
      --green:#8fb08f; --green-bg:#233024;
      --red:#d99687; --red-bg:#3c241e;
      --amber:#d9b876; --amber-bg:#3a2c15;
      --accent-pill-fg:var(--accent); --green-pill-fg:var(--green); --amber-pill-fg:var(--amber);
      --pro:#9aa4f2; --pro-bg:#252a4a; --pro-pill-fg:var(--pro);
    }
  }
  html[data-theme="dark"]{
    --bg:#1b1713; --card:#241f1a; --border:#3a332b; --text:#f0e9e1; --sub:#b3a696; --muted:#7d7161;
    --accent:#c4a688; --accent-bg:#3c2f24;
    --green:#8fb08f; --green-bg:#233024;
    --red:#d99687; --red-bg:#3c241e;
    --amber:#d9b876; --amber-bg:#3a2c15;
    --accent-pill-fg:var(--accent); --green-pill-fg:var(--green); --amber-pill-fg:var(--amber);
    --pro:#9aa4f2; --pro-bg:#252a4a; --pro-pill-fg:var(--pro);
  }
  html[data-theme="light"]{
    --bg:#f2ede7; --card:#fffdfb; --border:#e0d5c8; --text:#2b241d; --sub:#7d7061; --muted:#aa9c8a;
    --accent:#8c6f56; --accent-bg:#ece0d2;
    --green:#5b7a5e; --green-bg:#e6ede3;
    --red:#a2503f; --red-bg:#f5e3dd;
    --amber:#93752e; --amber-bg:#f3e8d0;
    --accent-pill-fg:#6e5540; --green-pill-fg:#3f5c42; --amber-pill-fg:#75581c;
    --pro:#4f5fd1; --pro-bg:#e3e5fb; --pro-pill-fg:#3c48a8;
  }
  /* Onglet Compte pro : accent différent (bleu-violet) pour signaler visuellement qu'on est en mode
     "pro" et éviter de confondre une saisie pro avec une saisie perso — surcharge juste --accent/
     --accent-bg localement, tout le reste (structure, layout) reste identique aux autres onglets. */
  #view-pro{ --accent:var(--pro); --accent-bg:var(--pro-bg); --accent-pill-fg:var(--pro-pill-fg); }
  .theme-row{display:flex; gap:8px;}
  .theme-btn{flex:1; padding:10px; border-radius:10px; border:1px solid var(--border); text-align:center; font-size:13px; color:var(--sub); cursor:pointer;}
  .theme-btn.active{background:var(--accent); color:#fff; border-color:var(--accent);}
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  .icon{width:1.15em; height:1.15em; stroke:currentColor; fill:none; vertical-align:-0.2em; flex-shrink:0;}
  .report-btn-icon .icon{width:20px; height:20px;}
  .bnav-icon .icon{width:20px; height:20px;}
  .lock-icon .icon{width:52px; height:52px;}
  .small-btn .icon{width:14px; height:14px; vertical-align:-0.15em;}
  html{font-size:clamp(14px, 1vw + 10px, 16px); overflow-x:hidden;}
  body{
    margin:0; background:var(--bg); color:var(--text); min-height:100vh; min-height:100dvh;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    transition:background .3s;
  }
  body.space-bg{
    background:
      radial-gradient(ellipse at 20% 15%, rgba(196,166,136,.32) 0%, transparent 45%),
      radial-gradient(ellipse at 85% 75%, rgba(140,111,86,.28) 0%, transparent 50%),
      radial-gradient(1.5px 1.5px at 10% 20%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 25% 65%, #f0e9e1 100%, transparent),
      radial-gradient(1.5px 1.5px at 40% 10%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 55% 80%, #f0e9e1 100%, transparent),
      radial-gradient(2px 2px at 70% 30%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 85% 55%, #f0e9e1 100%, transparent),
      radial-gradient(1.5px 1.5px at 95% 15%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 15% 85%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 60% 45%, #f0e9e1 100%, transparent),
      radial-gradient(1.5px 1.5px at 30% 40%, #f0e9e1 100%, transparent),
      #140f0b;
    background-attachment:fixed;
    background-size:cover;
  }
  /* L'écran de verrouillage doit TOUJOURS être totalement opaque, même avec le fond étoilé —
     jamais transparent, sinon le contenu réel resterait visible derrière (faille de confidentialité). */
  body.space-bg .lock-screen{
    background:
      radial-gradient(ellipse at 20% 15%, rgba(196,166,136,.32) 0%, transparent 45%),
      radial-gradient(ellipse at 85% 75%, rgba(140,111,86,.28) 0%, transparent 50%),
      radial-gradient(1.5px 1.5px at 10% 20%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 25% 65%, #f0e9e1 100%, transparent),
      radial-gradient(1.5px 1.5px at 40% 10%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 55% 80%, #f0e9e1 100%, transparent),
      radial-gradient(2px 2px at 70% 30%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 85% 55%, #f0e9e1 100%, transparent),
      radial-gradient(1.5px 1.5px at 95% 15%, #f0e9e1 100%, transparent),
      radial-gradient(1px 1px at 15% 85%, #f0e9e1 100%, transparent),
      #140f0b;
  }
  body.space-bg .lock-screen .lock-title, body.space-bg .lock-screen .lock-sub{ color:#f0e9e1; }
  .app-shell{
    padding:16px 16px 100px; max-width:var(--container); margin:0 auto;
    padding-top:calc(16px + env(safe-area-inset-top));
  }
  @media (display-mode: standalone){
    .app-shell{ padding-top:calc(20px + env(safe-area-inset-top)); }
  }
  @media (min-width:900px){
    :root{ --container:1400px; }
    body{ padding-top:8px; }
    .app-shell{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start; padding-top:32px; }
    h1{ grid-column:1; grid-row:1; margin-bottom:8px; }
    .tabs{
      grid-column:1; grid-row:2; flex-direction:column; position:sticky; top:32px; align-self:start;
      height:fit-content; overflow-x:visible; background:transparent; border:none; box-shadow:none; padding:0; gap:2px;
    }
    .tab{ text-align:left; padding:10px 14px; min-width:0; }
    .view{ grid-column:2; grid-row:2 / span 20; }
    .card{ padding:20px; }
    #view-accueil.active, #view-transactions.active, #view-objectifs.active, #view-stats.active, #view-prets.active, #view-reglages.active, #view-comptes.active{
      display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start;
    }
    #view-accueil.active > *, #view-transactions.active > *, #view-objectifs.active > *, #view-stats.active > *, #view-prets.active > *, #view-reglages.active > *, #view-comptes.active > *{
      grid-column:1 / -1;
    }
    #view-accueil.active .grid2{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; }
  }
  @media (min-width:1300px){
    #view-accueil.active{ grid-template-columns:1fr 1fr 1fr; }
    #view-accueil.active .balance-card, #view-accueil.active #reminderBanner, #view-accueil.active .month-nav{ grid-column:1 / -1; }
  }
  h1{font-size:21px; font-weight:650; margin:4px 0 18px; letter-spacing:-.01em;}
  body.space-bg h1{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4); }
  body.space-bg h1 span{ color:rgba(255,255,255,.75) !important; }
  .tabs{
    display:flex; gap:4px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:4px;
    margin-bottom:18px; position:sticky; top:8px; z-index:5; overflow-x:auto; scrollbar-width:none;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex:0 0 auto; min-width:80px; text-align:center; padding:9px 10px; border-radius:9px; font-size:12.5px; font-weight:500; color:var(--sub); cursor:pointer; user-select:none; white-space:nowrap; transition:background .15s, color .15s;}
  .tab.active{background:var(--accent); color:#fff;}
  .view{display:none;} .view.active{display:block; animation:fadein .18s ease;}
  @keyframes fadein{ from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:none;} }
  .card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
  }
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
  .stat-label{font-size:12px; color:var(--sub); margin:0 0 4px;}
  .stat-value{font-size:20px; font-weight:600; margin:0;}
  .stat-value.green{color:var(--green);} .stat-value.red{color:var(--red);}
  .balance-card{background:var(--accent-bg); border:none;}
  .balance-card .stat-label{color:var(--accent); opacity:.85;}
  .balance-card .stat-value{color:var(--accent); font-size:30px;}
  .section-title{font-size:12.5px; font-weight:700; margin:22px 2px 10px; color:var(--sub); text-transform:uppercase; letter-spacing:.06em;}
  .pill{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;}
  .pill-accent{background:var(--accent-bg); color:var(--accent-pill-fg);}
  .pill-green{background:var(--green-bg); color:var(--green-pill-fg);}
  .pill-red{background:var(--red-bg); color:var(--red);}
  .pill-amber{background:var(--amber-bg); color:var(--amber-pill-fg);}
  /* --- Infobulle (ⓘ) : explication repliée au survol/focus/tap au lieu d'un paragraphe permanent --- */
  .info-tip{position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border-radius:50%; font-size:12px; line-height:1; color:var(--sub); opacity:.8; cursor:help; vertical-align:middle;}
  .info-tip:hover, .info-tip:focus{opacity:1; outline:none;}
  .info-tip-bubble{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); width:min(260px, 70vw); background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.45; text-transform:none; letter-spacing:normal; font-weight:400; box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:20;}
  .info-tip:hover .info-tip-bubble, .info-tip:focus .info-tip-bubble{opacity:1; transform:translateX(-50%) translateY(0);}
  /* --- Piste à jalons (mode Objectifs, épargne / objectif patrimoine) --- */
  .track-wrap{position:relative; padding:0 3px; margin-bottom:2px;}
  .track{position:relative; height:8px; border-radius:100px; background:var(--bg); overflow:visible; margin:20px 0 46px;}
  .track-fill{position:absolute; left:0; top:0; height:100%; border-radius:100px; background:linear-gradient(90deg, var(--accent), var(--green));}
  .milestone{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); background:var(--card); border:2.5px solid var(--border); display:flex; align-items:center; justify-content:center;}
  .milestone.done{border-color:var(--green); background:var(--green);}
  .milestone.now{border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-bg);}
  .milestone svg{width:9px; height:9px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
  .milestone-label{position:absolute; top:16px; transform:translateX(-50%); text-align:center; white-space:nowrap;}
  .milestone-label.edge{transform:translateX(-92%);}
  .milestone-label .amt{font-size:10.5px; font-weight:700; color:var(--text);}
  .milestone-label .when{font-size:9.5px; color:var(--muted); display:block; margin-top:1px;}
  .milestone-label.done .amt{color:var(--green);}
  .milestone-label.now .amt{color:var(--accent);}
  /* --- Liste verticale à paliers (objectif patrimoine — montants libres, pas forcément réguliers) --- */
  .step-list{margin-top:6px;}
  .step-row{position:relative; display:flex; align-items:flex-start; gap:12px; padding-bottom:20px;}
  .step-row.last{padding-bottom:0;}
  .step-row:not(.last)::before{content:''; position:absolute; left:9px; top:20px; bottom:0; width:2px; background:var(--border);}
  .step-dot{position:relative; z-index:1; flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--card); border:2.5px solid var(--border); display:flex; align-items:center; justify-content:center; margin-top:1px;}
  .step-dot.done{border-color:var(--green); background:var(--green);}
  .step-dot.now{border-color:var(--accent); background:var(--accent-bg);}
  .step-dot svg{width:11px; height:11px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
  .step-body{flex:1; min-width:0;}
  .row{display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border); transition:background .15s;}
  .cat-row{padding:9px 0;}
  .cat-row-bar-bg{height:5px; border-radius:3px; background:var(--bg); margin-top:5px; overflow:hidden;}
  .cat-row-bar{height:100%; border-radius:3px;}
  .cat-row-pct{font-size:11px; color:var(--sub); margin-left:6px;}
  .row:last-child{border-bottom:none;}
  .row-left{display:flex; align-items:center; gap:10px; min-width:0;}
  .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
  .row-title{font-size:14px; font-weight:500; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .row-sub{font-size:12px; color:var(--sub); margin:2px 0 0;}
  .row-amount{font-size:14px; font-weight:600; white-space:nowrap; margin-left:8px;}
  .row-amount.green{color:var(--green);} .row-amount.red{color:var(--red);}
  .empty{text-align:center; color:var(--muted); font-size:13px; padding:24px 0;}
  input, select, textarea{
    width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:10px;
    background:var(--bg); color:var(--text); font-size:16px; margin-bottom:10px; transition:border-color .15s;
  }
  textarea{ font-family:inherit; resize:vertical; }
  input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); }
  label{font-size:12px; color:var(--sub); display:block; margin:0 0 5px; font-weight:500;}
  .field{margin-bottom:12px;}
  .toggle-row{display:flex; gap:8px; margin-bottom:10px;}
  .toggle-btn{flex:1; padding:11px; border-radius:10px; border:1px solid var(--border); text-align:center; font-size:13px; font-weight:500; color:var(--sub); cursor:pointer; transition:.15s;}
  .toggle-btn.active-exp{background:var(--red-bg); color:var(--red); border-color:var(--red-bg);}
  .toggle-btn.active-inc{background:var(--green-bg); color:var(--green); border-color:var(--green-bg);}
  .toggle-btn.active-sav{background:var(--accent-bg); color:var(--accent); border-color:var(--accent-bg);}
  .toggle-btn.active-pro{background:var(--pro-bg); color:var(--pro); border-color:var(--pro-bg);}
  .toggle-btn.active-perso{background:var(--border); color:var(--text); border-color:var(--border);}
  .cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:10px;}
  .cat-btn{padding:9px 4px; border-radius:9px; border:1px solid var(--border); text-align:center; font-size:11px; color:var(--sub); cursor:pointer; transition:.15s;}
  .cat-btn.sel{border-color:var(--accent); background:var(--accent-bg); color:var(--accent); font-weight:600;}
  .btn{
    width:100%; padding:13px; border-radius:12px; border:none; background:var(--accent); color:#fff;
    font-size:15px; font-weight:600; cursor:pointer; margin-top:4px; transition:filter .15s, transform .1s;
  }
  .btn:active{transform:scale(.98); filter:brightness(.92);}
  .btn-ghost{background:transparent; color:var(--red); border:1px solid var(--red); font-weight:500; font-size:13px; padding:9px; margin-top:8px;}
  .btn-sm{width:auto; padding:8px 14px; margin:0; font-size:13px; border-radius:10px; border:none; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0;}
  .btn-sm:active{transform:scale(.98); filter:brightness(.92);}
  .fab{
    position:fixed; bottom:24px; right:max(24px, calc(50vw - (var(--container) / 2) + 24px));
    width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff;
    font-size:26px; border:none; box-shadow:0 6px 18px rgba(140,111,86,.35); cursor:pointer;
    display:flex; align-items:center; justify-content:center; z-index:10; transition:transform .15s;
  }
  .fab:active{ transform:scale(.94); }
  /* Notifications toast (ex. franchissement d'un palier d'objectif) — empilées au-dessus du FAB et
     de la nav du bas mobile plutôt que superposées à l'un des deux. */
  #toastStack{
    position:fixed; left:50%; transform:translateX(-50%); bottom:calc(90px + env(safe-area-inset-bottom));
    z-index:30; display:flex; flex-direction:column-reverse; gap:8px; width:min(400px, calc(100vw - 32px)); pointer-events:none;
  }
  .toast{
    background:var(--text); color:var(--bg); border-radius:12px; padding:12px 16px; font-size:13.5px; font-weight:500;
    box-shadow:0 8px 24px rgba(0,0,0,.22); opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease;
    text-align:center;
  }
  .toast.show{ opacity:1; transform:translateY(0); }
  .toast-success{ background:var(--green); color:#fff; }
  .modal-bg{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20;
    align-items:flex-end; justify-content:center;
  }
  .modal-bg.open{display:flex;}
  .modal{
    background:var(--card); width:100%; max-width:var(--container); border-radius:18px 18px 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom)); max-height:85vh; overflow-y:auto;
  }
  .modal h3{margin:0 0 14px; font-size:16px;}
  .goal-bar-bg{height:8px; background:var(--bg); border-radius:4px; overflow:hidden; margin-top:6px;}
  .goal-bar{height:100%; border-radius:4px;}
  .small-btn{font-size:12px; color:var(--accent); background:none; border:none; padding:0; cursor:pointer;}
  .month-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .month-nav button{background:var(--card); border:1px solid var(--border); border-radius:8px; width:32px; height:32px; font-size:16px; color:var(--text); cursor:pointer;}
  .month-label{font-size:15px; font-weight:600;}
  .budget-row{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
  .budget-row input{margin:0;}
  .budget-row .btn{width:auto; padding:8px 14px; margin:0; font-size:13px;}
  .search-row{display:flex; gap:8px; margin-bottom:12px;}
  .search-row input{margin:0; flex:1 1 auto; min-width:0;}
  .search-row select{margin:0; flex:0 0 auto; width:auto; max-width:52%;}
  .chart-wrap{position:relative; height:200px; margin:4px 0 4px;}
  .chart-wrap-tall{position:relative; height:220px; margin:4px 0 4px;}
  .compare{font-size:12px; font-weight:600; margin-left:6px;}
  .compare.up{color:var(--red);} .compare.down{color:var(--green);} .compare.flat{color:var(--sub);}
  .export-row{display:flex; gap:8px; margin-bottom:12px;}
  .export-row .btn{margin:0; font-size:13px; padding:11px;}
  .btn-secondary{background:var(--accent-bg); color:var(--accent);}
  .tabs-sub{display:flex; gap:6px; margin-bottom:12px;}
  .subtab{flex:1; text-align:center; padding:7px 4px; border-radius:8px; font-size:12px; font-weight:500; color:var(--sub); background:var(--card); border:1px solid var(--border); cursor:pointer;}
  .subtab.active{background:var(--accent); color:#fff; border-color:var(--accent);}
  .sync-status{display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:12px;}
  .sync-dot{width:9px; height:9px; border-radius:50%; background:var(--muted);}
  .sync-dot.on{background:var(--green);}
  .sync-dot.err{background:var(--red);}
  .report-btn{
    width:100%; display:flex; align-items:center; gap:12px; text-align:left;
    background:var(--card); color:var(--text); border:1px solid var(--border);
    border-radius:14px; padding:13px 16px; margin:4px 0 8px; cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .15s, box-shadow .15s;
  }
  .report-btn:active{ transform:scale(.98); }
  .report-btn-icon{font-size:19px; flex-shrink:0; opacity:.85;}
  .report-btn-text{display:flex; flex-direction:column; flex:1; min-width:0;}
  .report-btn-title{font-size:13px; font-weight:600;}
  .report-btn-sub{font-size:12px; color:var(--sub); margin-top:1px;}
  .report-btn-arrow{font-size:20px; color:var(--sub); flex-shrink:0;}

  .outils-cat{ margin-bottom:8px; }
  .outils-cat-header{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:var(--card); color:var(--text); border:1px solid var(--border);
    border-radius:14px; padding:13px 16px; cursor:pointer; font-size:14px; font-weight:600;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  .outils-cat-body{ padding-top:8px; }
  .outils-chevron{ color:var(--sub); transition:transform .2s; }
  .outils-chevron.open{ transform:rotate(180deg); }

  /* Sections repliables (onglet Stats) — même chevron que l'accordéon Outils, mais indépendantes les
     unes des autres (pas un accordéon à une seule section ouverte) et ouvertes par défaut, pour ne
     rien cacher au premier chargement : seule la classe .open initiale change le sens du chevron. */
  .section-title.collapsible{ cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .stats-chevron{ color:var(--muted); transition:transform .2s; flex-shrink:0; }
  .stats-chevron.open{ transform:rotate(180deg); }

  .alert-stack{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .alert-stack:empty{ margin-bottom:0; }
  .alert-line{ border-radius:10px; padding:9px 12px; font-size:12.5px; line-height:1.4; }

  /* Repère de date au-dessus d'un groupe de transactions (liste "Transactions") — un simple libellé
     dans le rythme des lignes, pas un bandeau collant : la version position:sticky avec fond plein
     créait une bande flottante disgracieuse au-dessus des lignes (retour visuel de l'utilisateur),
     donc on reste sur un repère discret qui défile avec le reste. */
  .tx-date-header{
    padding:16px 2px 4px; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--muted);
  }
  .tx-date-header:first-child{ padding-top:0; }

  /* Nav mobile : 3 onglets + Plus */
  .bottom-nav{ display:none; }
  @media (max-width:899px){
    .tabs{ display:none; }
    .app-shell{ padding-bottom:88px; }
    .bottom-nav{
      display:flex; position:fixed; bottom:0; left:0; right:0; z-index:15;
      background:var(--card); border-top:1px solid var(--border);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom));
      box-shadow:0 -2px 12px rgba(0,0,0,.06);
    }
    .bnav-item{
      flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
      padding:6px 2px; border-radius:10px; color:var(--muted); font-size:10.5px; font-weight:500;
      cursor:pointer; transition:color .15s;
    }
    .bnav-icon{ font-size:20px; line-height:1; }
    .bnav-item.active{ color:var(--accent); }
    .fab{ bottom:88px; }
  }
  .more-menu-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
  .more-item{
    display:flex; align-items:center; gap:12px; padding:14px 10px; border-radius:10px;
    font-size:14px; font-weight:500; color:var(--text); cursor:pointer; transition:background .15s;
  }
  .more-item:active{ background:var(--accent-bg); }
  .more-item span:first-child{ font-size:18px; width:24px; text-align:center; }
  .lock-screen{
    position:fixed; inset:0; z-index:100; background:var(--bg);
    display:none; flex-direction:column; align-items:center; gap:18px; padding:24px; text-align:center;
    overflow-y:auto;
  }
  .lock-screen.active{ display:flex; }
  .lock-icon{ font-size:52px; }
  .lock-title{ font-size:17px; font-weight:600; }
  .lock-sub{ font-size:13px; color:var(--sub); max-width:320px; }