/* Zone Budget v4 — clair épuré façon Apple. Une seule feuille, aucun héritage de budget.css. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --bg: #F5F5F2; --card: #FFFFFF; --card-2: #F2F2F7; --ink: #1C1C1E; --ink-2: #48484D; --muted: #6C6C72; --line: rgba(60,60,67,.14);
  --accent: #0A64D6; --accent-ink: #FFFFFF; --accent-soft: rgba(10,100,214,.10);
  --vert: #1E8E3E; --vert-bar: #34C759; --vert-soft: rgba(52,199,89,.14);
  --jaune: #8A5A00; --jaune-bar: #FFB800; --jaune-soft: rgba(255,184,0,.18);
  --rouge: #C4251B; --rouge-bar: #FF3B30; --rouge-soft: rgba(255,59,48,.12);
  --gris-bar: #C7C7CC; --track: #E9E9EE;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --shadow-up: 0 -1px 0 rgba(0,0,0,.06);
  --radius: 18px; --radius-s: 12px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --tabbar: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --card: #1C1C1E; --card-2: #2C2C2E; --ink: #F2F2F7; --ink-2: #D1D1D6; --muted: #A1A1A8; --line: rgba(235,235,245,.16);
    --accent: #4AA3FF; --accent-ink: #00152E; --accent-soft: rgba(74,163,255,.16);
    --vert: #4CD97B; --vert-soft: rgba(76,217,123,.16); --jaune: #FFCC33; --jaune-soft: rgba(255,204,51,.16); --rouge: #FF6B61; --rouge-soft: rgba(255,107,97,.16);
    --gris-bar: #636366; --track: #2C2C2E; --shadow: none; --shadow-up: 0 -1px 0 rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000; --card: #1C1C1E; --card-2: #2C2C2E; --ink: #F2F2F7; --ink-2: #D1D1D6; --muted: #A1A1A8; --line: rgba(235,235,245,.16);
  --accent: #4AA3FF; --accent-ink: #00152E; --accent-soft: rgba(74,163,255,.16);
  --vert: #4CD97B; --vert-soft: rgba(76,217,123,.16); --jaune: #FFCC33; --jaune-soft: rgba(255,204,51,.16); --rouge: #FF6B61; --rouge-soft: rgba(255,107,97,.16);
  --gris-bar: #636366; --track: #2C2C2E; --shadow: none; --shadow-up: 0 -1px 0 rgba(255,255,255,.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── Connexion ── */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 32px 24px; text-align: center; }
.login-card img { width: 72px; height: 72px; border-radius: 18px; }
.login-card h1 { font-size: 28px; margin: 16px 0 4px; letter-spacing: -.02em; }
.login-card .sous { color: var(--muted); margin: 0 0 24px; }
.login-card form { display: grid; gap: 10px; text-align: left; margin-top: 18px; }
.login-card label { font-size: 14px; color: var(--muted); }
.ou { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: 18px 0 0; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-err { min-height: 22px; margin-top: 14px; color: var(--rouge); font-size: 15px; }
.login-diag { margin-top: 10px; font-size: 12px; color: var(--muted); word-break: break-word; }

/* ── Champs et boutons ── */
.field { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card-2); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn { min-height: 48px; padding: 12px 18px; border: 0; border-radius: 14px; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--card-2); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--rouge-soft); color: var(--rouge); }
.btn.plein { width: 100%; }
.btn.lien { background: none; color: var(--accent); padding: 8px; min-height: 44px; }
.btn.petit { min-height: 40px; padding: 8px 14px; font-size: 15px; border-radius: 12px; }
.seg { display: inline-flex; background: var(--card-2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 8px 16px; min-height: 38px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 34px; border-radius: 999px; background: var(--card-2); font-size: 14px; border: 0; }
.chip.ok { background: var(--vert-soft); color: var(--vert); }
.chip.warn { background: var(--jaune-soft); color: var(--jaune); }
.chip.err { background: var(--rouge-soft); color: var(--rouge); }

/* ── Ossature : barre du bas (mobile), barre latérale (≥ 1024 px) ── */
.app { min-height: 100vh; min-height: 100dvh; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.top h1 { font-size: 28px; margin: 0; flex: 1; letter-spacing: -.025em; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 20px; }
.view { padding: 4px 16px calc(var(--tabbar) + 28px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--card); background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-up); }
.tabbar .brand, .tabbar .side-only { display: none; }
.tab { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; min-height: 52px; color: var(--muted); font-size: 12px; font-weight: 600; border-radius: 12px; }
.tab svg { width: 26px; height: 26px; }
.tab[aria-current="page"] { color: var(--accent); }
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 248px 1fr; }
  .tabbar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 24px 14px; background: var(--card); box-shadow: 1px 0 0 var(--line); }
  .tabbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; padding: 0 10px 18px; }
  .tabbar .brand img { width: 36px; height: 36px; border-radius: 10px; }
  .tabbar .side-only { display: flex; }
  .tab { flex-direction: row; gap: 12px; font-size: 16px; padding: 10px 12px; min-height: 48px; justify-content: flex-start; }
  .tab svg { width: 24px; height: 24px; }
  .tab[aria-current="page"] { background: var(--accent-soft); }
  .tabbar .spacer { flex: 1; }
  .top { padding: 24px 32px 12px; }
  .top .icon-btn.reglages { display: none; }
  .view { padding: 8px 32px 48px; max-width: 1100px; margin: 0; }
  .grid-2 { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; grid-template-areas: "beigne env" "dettes env"; column-gap: 20px; align-items: start; }
  .grid-2 > .a-beigne { grid-area: beigne; } .grid-2 > .a-env { grid-area: env; } .grid-2 > .a-dettes { grid-area: dettes; }
}

/* ── Cartes ── */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.card h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; }
.card h2 .aside { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--muted); }
.sous-t { color: var(--muted); font-size: 15px; margin: -6px 0 12px; }
.vide { text-align: center; padding: 18px 8px; color: var(--muted); }
.vide .e { font-size: 40px; display: block; margin-bottom: 6px; }
.vide p { margin: 0 0 12px; }
.erreur { background: var(--rouge-soft); color: var(--rouge); border-radius: var(--radius-s); padding: 12px 14px; display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.charge { height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--track), var(--card-2), var(--track)); background-size: 200% 100%; animation: luit 1.2s infinite linear; margin: 10px 0; }
@keyframes luit { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .charge { animation: none; } }

/* ── Sélecteur de mois ── */
.mois-nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 14px; }
.mois-nav .lbl { min-width: 170px; text-align: center; font-weight: 700; font-size: 17px; }
.mois-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow); font-size: 22px; line-height: 1; }
.mois-nav button:disabled { opacity: .35; cursor: default; }

/* ── Beigne ── */
.beigne-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.beigne { position: relative; width: 220px; height: 220px; }
.beigne svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.beigne .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.beigne .gros { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.beigne .petit { color: var(--muted); font-size: 14px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.duo div { background: var(--card-2); border-radius: 14px; padding: 10px 12px; }
.duo span { display: block; color: var(--muted); font-size: 13px; }
.duo b { font-size: 22px; letter-spacing: -.02em; }
.phrase { font-size: 17px; font-weight: 600; text-align: center; margin: 0; }
.phrase.ok { color: var(--vert); } .phrase.over { color: var(--rouge); }
.legende { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.legende li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.legende i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legende .m { margin-left: auto; font-weight: 600; }

/* ── Enveloppes ── */
.env { width: 100%; text-align: left; border: 0; background: none; padding: 12px 4px; display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: center; border-bottom: 1px solid var(--line); min-height: 64px; }
.env:last-child { border-bottom: 0; }
.env .ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.env .nom { font-weight: 600; }
.env .val { font-weight: 700; text-align: right; }
.env .val small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }
.env .bar { grid-column: 2 / 4; }
.bar { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 5px; background: var(--gris-bar); transition: width .3s; }
.bar i.vert { background: var(--vert-bar); } .bar i.jaune { background: var(--jaune-bar); } .bar i.rouge { background: var(--rouge-bar); }
.etat { font-size: 13px; font-weight: 600; }
.etat.vert { color: var(--vert); } .etat.jaune { color: var(--jaune); } .etat.rouge { color: var(--rouge); } .etat.aucun { color: var(--muted); }

/* ── Dettes ── */
.dette { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dette:last-of-type { border-bottom: 0; }
.dette-tete { display: flex; align-items: baseline; gap: 8px; }
.dette-tete b { font-size: 26px; letter-spacing: -.02em; margin-left: auto; }
.thermo { height: 14px; border-radius: 7px; background: var(--rouge-soft); overflow: hidden; margin: 10px 0 6px; }
.thermo i { display: block; height: 100%; background: var(--vert-bar); border-radius: 7px; }
.dette p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }

/* ── Listes ── */
.liste { list-style: none; margin: 0; padding: 0; }
.ligne { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); min-height: 56px; }
.liste > .ligne:last-child, .liste > li:last-child .ligne { border-bottom: 0; }
.ligne .q { flex: 1; min-width: 0; }
.ligne .q b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .q small { color: var(--muted); font-size: 13px; }
.ligne .m { font-weight: 700; white-space: nowrap; }
.ligne .m.in { color: var(--vert); }
button.ligne { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.date-pastille { width: 44px; flex: none; text-align: center; background: var(--card-2); border-radius: 10px; padding: 4px 0; line-height: 1.1; }
.date-pastille b { display: block; font-size: 18px; }
.date-pastille small { font-size: 11px; color: var(--muted); text-transform: uppercase; }

/* ── Ajouter ── */
.photo-btn { width: 100%; border: 0; border-radius: 24px; background: var(--accent); color: var(--accent-ink); padding: 34px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow); font-size: 22px; font-weight: 700; }
.photo-btn svg { width: 56px; height: 56px; }
.photo-btn small { font-size: 15px; font-weight: 500; opacity: .85; }
.sync { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0; color: var(--muted); font-size: 14px; }
.sync .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-bar); }
.sync.ok .pt { background: var(--vert-bar); } .sync.error .pt { background: var(--rouge-bar); } .sync.offline .pt { background: var(--jaune-bar); }
.recu-res { text-align: center; }
.recu-res .gros { font-size: 44px; font-weight: 800; letter-spacing: -.03em; margin: 4px 0; }
.recu-res .qui { font-size: 19px; font-weight: 600; }
.recu-res .infos { color: var(--muted); margin: 6px 0 14px; }
.a-verifier { background: var(--jaune-soft); color: var(--jaune); border-radius: 12px; padding: 10px 12px; text-align: left; font-size: 15px; margin-bottom: 14px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--track); border-top-color: var(--accent); border-radius: 50%; animation: tourne 0.9s linear infinite; margin: 12px auto; }
@keyframes tourne { to { transform: rotate(360deg); } }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 500; }
.form .rang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .msg { color: var(--rouge); font-size: 15px; min-height: 20px; margin: 0; }

/* ── Calendrier ── */
.cal-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .jn { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.jour { min-height: 58px; border: 0; border-radius: 12px; background: var(--card-2); padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 15px; }
.jour.hors { visibility: hidden; }
.jour.auj { box-shadow: inset 0 0 0 2px var(--accent); }
.jour[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.jour .fac { font-size: 10.5px; font-weight: 700; color: var(--rouge); line-height: 1.1; }
.jour[aria-pressed="true"] .fac { color: inherit; }
.jour .pts { display: flex; gap: 3px; }
.jour .pts i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.jour[aria-pressed="true"] .pts i { background: var(--accent-ink); }
.legende-cal { display: flex; gap: 14px; justify-content: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
.legende-cal i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.annee-mois { width: 100%; border: 0; background: none; text-align: left; padding: 12px 2px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 92px 1fr auto; gap: 6px 12px; align-items: center; min-height: 56px; }
.annee-mois:last-child { border-bottom: 0; }
.annee-mois .nom { font-weight: 600; text-transform: capitalize; }
.annee-mois .grosses { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; }
.annee-mois .chip { font-size: 13px; min-height: 28px; padding: 4px 10px; background: var(--rouge-soft); color: var(--rouge); }
.annee-mois.fort .bar i { background: var(--rouge-bar); }

/* ── Skoolie ── */
.voyage { width: 100%; border: 0; text-align: left; display: grid; gap: 8px; }
.voyage .trajet { color: var(--muted); font-size: 15px; }
.voyage .chiffres { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.voyage .chiffres b { font-size: 18px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 16px; }
.stats div { background: var(--card-2); border-radius: 14px; padding: 10px 12px; }
.stats span { display: block; color: var(--muted); font-size: 13px; }
.stats b { font-size: 21px; letter-spacing: -.02em; }

/* ── Fenêtres (feuille du bas sur téléphone, boîte centrée sur ordi) ── */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.38); display: flex; align-items: flex-end; justify-content: center; }
.feuille { width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow: auto; background: var(--card); border-radius: 22px 22px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom)); animation: monte .22s ease-out; overscroll-behavior: contain; }
.feuille::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--gris-bar); margin: 0 auto 10px; }
.feuille-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.feuille-tete h2 { flex: 1; margin: 0; font-size: 21px; letter-spacing: -.015em; }
.fermer { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card-2); font-size: 16px; color: var(--muted); }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feuille { animation: none; } }
@media (min-width: 700px) { .voile { align-items: center; } .feuille { border-radius: 22px; padding-bottom: 22px; } .feuille::before { display: none; } }
.reglage { padding: 14px 0; border-bottom: 1px solid var(--line); }
.reglage:last-child { border-bottom: 0; }
.reglage h3 { margin: 0 0 10px; font-size: 16px; }
.plafond { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; padding: 6px 0; }
.plafond .field { min-height: 44px; padding: 8px 10px; text-align: right; }
.petit-texte { font-size: 13px; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
@media (min-width: 1024px) { .toast { bottom: 32px; } }
.hors-ligne { background: var(--jaune-soft); color: var(--jaune); text-align: center; padding: 8px 16px; font-size: 14px; font-weight: 600; }