@import url("tokens/organic.css");

/* Couleurs propres à Cauris — banques et état d'attention. Voir CLAUDE.md. */
:root {
  --bnp: oklch(0.52 0.13 160);
  --bnp-100: oklch(0.97 0.014 160);
  --bnp-800: oklch(0.30 0.07 160);
  --bo: oklch(0.72 0.22 350);
  --bo-100: oklch(0.97 0.018 350);
  --bo-800: oklch(0.33 0.11 340);
  --warn-200: oklch(0.92 0.06 80);
  --warn-500: oklch(0.68 0.115 80);
  --warn-700: oklch(0.46 0.10 80);
  --color-carte: #fff;
  /* Toujours sombre, même en thème clair ou sombre — pastilles et cartes
     à fond encre volontairement invariables (À faire, boutons pleins). */
  --color-encre: oklch(0.22 0.012 60);
}

/* ─── Thème sombre ───────────────────────────────────────────────────────
   Réglages → Apparence propose Clair / Sombre / Système. « Système » suit
   prefers-color-scheme (aucun attribut posé) ; « Sombre » force via
   data-theme="dark" ; « Clair » force via data-theme="light" et bloque la
   bascule automatique. Les tokens de tokens/organic.css ne sont jamais
   réécrits : cette surcharge vit ici, dans le fichier de l'app. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: oklch(0.19 0.012 60);
    --color-surface: oklch(0.24 0.014 55);
    --color-text: oklch(0.94 0.01 70);
    --color-accent: oklch(0.70 0.15 42);
    --color-accent-2: oklch(0.74 0.10 135);
    --color-divider: color-mix(in srgb, #f5ead8 16%, transparent);
    --color-neutral-100: oklch(0.22 0.012 60);
    --color-neutral-200: oklch(0.26 0.014 60);
    --color-neutral-300: oklch(0.32 0.016 60);
    --color-neutral-400: oklch(0.42 0.018 60);
    --color-neutral-500: oklch(0.52 0.018 60);
    --color-neutral-600: oklch(0.64 0.016 60);
    --color-neutral-700: oklch(0.74 0.014 60);
    --color-neutral-800: oklch(0.85 0.012 60);
    --color-neutral-900: oklch(0.95 0.01 60);
    --color-accent-100: oklch(0.24 0.05 40);
    --color-accent-200: oklch(0.30 0.07 40);
    --color-accent-300: oklch(0.38 0.09 40);
    --color-accent-400: oklch(0.48 0.11 40);
    --color-accent-500: oklch(0.58 0.13 40);
    --color-accent-600: oklch(0.66 0.14 40);
    --color-accent-700: oklch(0.76 0.15 45);
    --color-accent-800: oklch(0.86 0.10 50);
    --color-accent-900: oklch(0.93 0.06 55);
    --color-accent-2-100: oklch(0.24 0.03 135);
    --color-accent-2-200: oklch(0.30 0.045 135);
    --color-accent-2-300: oklch(0.38 0.06 135);
    --color-accent-2-400: oklch(0.48 0.07 135);
    --color-accent-2-500: oklch(0.58 0.08 135);
    --color-accent-2-600: oklch(0.66 0.09 135);
    --color-accent-2-700: oklch(0.78 0.10 138);
    --color-accent-2-800: oklch(0.87 0.08 140);
    --color-accent-2-900: oklch(0.94 0.05 142);
    --bnp: oklch(0.70 0.14 160);
    --bnp-100: oklch(0.24 0.03 160);
    --bnp-800: oklch(0.92 0.05 160);
    --bo: oklch(0.80 0.17 350);
    --bo-100: oklch(0.26 0.04 350);
    --bo-800: oklch(0.92 0.06 345);
    --warn-200: oklch(0.28 0.05 80);
    --warn-500: oklch(0.68 0.115 80);
    --warn-700: oklch(0.84 0.10 85);
    --color-carte: oklch(0.24 0.014 55);
  }
}
:root[data-theme="dark"] {
  --color-bg: oklch(0.19 0.012 60);
  --color-surface: oklch(0.24 0.014 55);
  --color-text: oklch(0.94 0.01 70);
  --color-accent: oklch(0.70 0.15 42);
  --color-accent-2: oklch(0.74 0.10 135);
  --color-divider: color-mix(in srgb, #f5ead8 16%, transparent);
  --color-neutral-100: oklch(0.22 0.012 60);
  --color-neutral-200: oklch(0.26 0.014 60);
  --color-neutral-300: oklch(0.32 0.016 60);
  --color-neutral-400: oklch(0.42 0.018 60);
  --color-neutral-500: oklch(0.52 0.018 60);
  --color-neutral-600: oklch(0.64 0.016 60);
  --color-neutral-700: oklch(0.74 0.014 60);
  --color-neutral-800: oklch(0.85 0.012 60);
  --color-neutral-900: oklch(0.95 0.01 60);
  --color-accent-100: oklch(0.24 0.05 40);
  --color-accent-200: oklch(0.30 0.07 40);
  --color-accent-300: oklch(0.38 0.09 40);
  --color-accent-400: oklch(0.48 0.11 40);
  --color-accent-500: oklch(0.58 0.13 40);
  --color-accent-600: oklch(0.66 0.14 40);
  --color-accent-700: oklch(0.76 0.15 45);
  --color-accent-800: oklch(0.86 0.10 50);
  --color-accent-900: oklch(0.93 0.06 55);
  --color-accent-2-100: oklch(0.24 0.03 135);
  --color-accent-2-200: oklch(0.30 0.045 135);
  --color-accent-2-300: oklch(0.38 0.06 135);
  --color-accent-2-400: oklch(0.48 0.07 135);
  --color-accent-2-500: oklch(0.58 0.08 135);
  --color-accent-2-600: oklch(0.66 0.09 135);
  --color-accent-2-700: oklch(0.78 0.10 138);
  --color-accent-2-800: oklch(0.87 0.08 140);
  --color-accent-2-900: oklch(0.94 0.05 142);
  --bnp: oklch(0.70 0.14 160);
  --bnp-100: oklch(0.24 0.03 160);
  --bnp-800: oklch(0.92 0.05 160);
  --bo: oklch(0.80 0.17 350);
  --bo-100: oklch(0.26 0.04 350);
  --bo-800: oklch(0.92 0.06 345);
  --warn-200: oklch(0.28 0.05 80);
  --warn-500: oklch(0.68 0.115 80);
  --warn-700: oklch(0.84 0.10 85);
  --color-carte: oklch(0.24 0.014 55);
}
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-neutral-200);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

input, select, button, textarea { font-family: var(--font-body); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 1px;
}
button { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* ─── Coquille de l'application ─────────────────────────────────────── */

.app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-carte);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.app-entete {
  padding: 18px 18px 12px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 1.5px solid var(--color-neutral-200);
}
.app-entete-titres { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-entete-titre { font: 400 22px/1 var(--font-heading); color: var(--color-text); }
.app-entete-soustitre { font: 500 11.5px/1 var(--font-body); color: var(--color-neutral-700); }
.bouton-pastille {
  font: 600 11px/1 var(--font-body); color: var(--color-text);
  background: var(--color-neutral-100); border-radius: 999px; padding: 10px 13px;
  min-height: 44px; display: inline-flex; align-items: center;
}

.app-contenu {
  flex: 1; overflow-y: auto; scrollbar-width: none;
  padding: 14px 14px 130px;
  display: flex; flex-direction: column; gap: 12px;
}
.app-contenu::-webkit-scrollbar { display: none; }

.ecran-a-venir { padding: 40px 4px; font: 400 13px/1.6 var(--font-body); color: var(--color-neutral-700); text-align: center; }

/* ─── Barre basse ────────────────────────────────────────────────────── */

.nav-basse {
  position: sticky; bottom: 0; background: var(--color-carte);
  border-top: 1.5px solid var(--color-neutral-200);
  padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 2px;
}
.nav-onglet {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 2px; border-radius: 16px; min-height: 44px;
}
.nav-onglet-actif { background: var(--color-neutral-100); }
.nav-marque { width: 15px; height: 15px; }
.nav-libelle { font-size: 10.5px; line-height: 1; }
.nav-saisir {
  flex: none; width: 58px; height: 58px; margin: 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 999px; background: var(--color-encre); box-shadow: var(--shadow-md);
}
.nav-saisir-plus { font: 400 22px/1 var(--font-body); color: #f5ead8; }
.nav-saisir-label { font: 600 8px/1 var(--font-body); letter-spacing: .06em; color: rgba(245,234,216,.85); }

/* ─── Bandeau sombre (chiffre de tête) ───────────────────────────────── */

.bandeau {
  background: var(--color-encre); border-radius: 26px; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.bandeau-entete { display: flex; flex-direction: column; gap: 5px; }
.bandeau-kicker {
  font: 600 9px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,234,216,.78);
}
.bandeau-montant { font: 400 44px/1 var(--font-heading); color: #f5ead8; }
.bandeau-soustitre { font: 500 11px/1.4 var(--font-body); color: rgba(245,234,216,.7); }
.bandeau-blocs { display: flex; gap: 10px; }
.bandeau-bloc {
  flex: 1; background: rgba(245,234,216,.12); border-radius: 18px; padding: 12px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.bandeau-bloc-kicker {
  font: 600 8.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,234,216,.75);
}
.bandeau-bloc-valeur { font: 400 20px/1 var(--font-heading); color: #f5ead8; }
.bandeau-bloc-meta { font: 500 9.5px/1 var(--font-body); color: rgba(245,234,216,.65); }

/* ─── Cartes génériques ──────────────────────────────────────────────── */

.carte {
  background: var(--color-carte); border: 1.5px solid var(--color-neutral-200); border-radius: 24px;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 13px;
}
.carte-entete { display: flex; align-items: baseline; gap: 10px; }
.carte-titre { flex: 1; font: 400 17px/1.15 var(--font-heading); color: var(--color-text); min-width: 0; }
.carte-total { font: 400 17px/1 var(--font-heading); color: var(--color-text); white-space: nowrap; }

/* ─── Rythmes (accueil) ──────────────────────────────────────────────── */

.rythme-ligne { display: flex; flex-direction: column; gap: 6px; }
.rythme-entete { display: flex; align-items: baseline; gap: 9px; }
.rythme-libelle { flex: 1; font: 600 12.5px/1.2 var(--font-body); color: var(--color-text); }
.rythme-valeur { font: 700 12px/1 var(--font-body); white-space: nowrap; }
.rythme-meta { font: 400 10px/1.35 var(--font-body); color: var(--color-neutral-700); }

.jauge { height: 8px; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.jauge--petite { height: 6px; }
.jauge-remplissage { display: block; height: 100%; }

/* ─── À faire ────────────────────────────────────────────────────────── */

.afaire { background: var(--color-accent-200); border-radius: 24px; padding: 15px 16px; display: flex; flex-direction: column; gap: 11px; }
.afaire-entete { display: flex; align-items: baseline; gap: 10px; }
.afaire-titre { flex: 1; font: 400 17px/1.15 var(--font-heading); color: var(--color-accent-800); }
.afaire-compteur { font: 700 11px/1 var(--font-body); color: var(--color-accent-800); }
.afaire-item {
  background: var(--color-carte); border-radius: 16px; padding: 12px 13px;
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  min-height: 44px;
}
.afaire-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.afaire-libelle { font: 600 12.5px/1.25 var(--font-body); color: var(--color-text); }
.afaire-note { font: 400 10.5px/1.3 var(--font-body); color: var(--color-neutral-700); }
.afaire-action { font: 600 11px/1 var(--font-body); color: var(--color-accent-700); white-space: nowrap; }

/* ─── Poches ─────────────────────────────────────────────────────────── */

.poche-ligne { display: flex; align-items: center; gap: 10px; }
.poche-marque { width: 11px; height: 11px; flex: none; }
.poche-libelle { flex: 1; font: 500 12.5px/1.2 var(--font-body); color: var(--color-text); }
.poche-solde { font: 700 13px/1 var(--font-body); color: var(--color-text); white-space: nowrap; }

/* ─── Dépenses ───────────────────────────────────────────────────────── */

.depenses-actions { display: flex; gap: 8px; }
.bouton-onglet {
  flex: 1; text-align: center; font: 600 12px/1 var(--font-body); color: var(--color-text);
  background: var(--color-neutral-100); border-radius: 999px; padding: 13px 12px;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.bouton-onglet-bnp { color: #fff; background: var(--bnp); }

/* Bouton pleine largeur autonome (hors rangée flex) : jamais flex:1, sinon
   il s'étire sur toute la hauteur d'un parent en colonne. */
.bouton-pleine-largeur {
  display: flex; align-items: center; justify-content: center; width: 100%;
  text-align: center; font: 600 12px/1 var(--font-body); color: var(--color-text);
  background: var(--color-neutral-100); border-radius: 999px; padding: 13px 12px;
  min-height: 44px;
}
.bouton-pleine-largeur-bnp { color: #fff; background: var(--bnp); }

.groupe-carte {
  background: var(--color-carte); border-radius: 24px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1.5px solid var(--color-neutral-200); border-left: 5px solid var(--color-neutral-500);
}
.groupe-entete { display: flex; align-items: flex-end; gap: 10px; }
.groupe-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.groupe-titre { font: 400 18px/1.1 var(--font-heading); color: var(--color-text); }
.groupe-note { font: 400 10.5px/1.3 var(--font-body); color: var(--color-neutral-700); }
.groupe-chiffres { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.groupe-valeur { font: 400 18px/1 var(--font-heading); white-space: nowrap; }
.pastille-etat { font: 700 9.5px/1 var(--font-body); border-radius: 999px; padding: 5px 8px; white-space: nowrap; }

.ligne-sous-poste { display: flex; flex-direction: column; gap: 5px; }
.ligne-entete { display: flex; align-items: baseline; gap: 9px; }
.ligne-libelle { flex: 1; font: 500 12.5px/1.25 var(--font-body); color: var(--color-text); }
.ligne-valeur { font: 700 11.5px/1 var(--font-body); white-space: nowrap; }
.ligne-chemin { font: 400 9.5px/1.3 var(--font-body); color: var(--color-neutral-700); }

.provisions-carte { background: var(--bnp-100); border-radius: 24px; padding: 15px 16px; display: flex; flex-direction: column; gap: 12px; }
.provisions-carte .carte-titre, .provisions-carte .carte-total { color: var(--bnp-800); }
.provision-carte { background: var(--color-carte); border-radius: 16px; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.provision-ligne { display: flex; align-items: center; gap: 9px; }
.provision-libelle { flex: 1; font: 600 12.5px/1.2 var(--font-body); color: var(--color-text); }
.champ-cumul {
  width: 76px; text-align: right; font: 700 13px/1 var(--font-body); color: var(--color-text);
  border: 1.5px solid var(--color-neutral-200); outline: none; background: var(--color-carte);
  border-radius: 11px; padding: 9px 10px;
}
.bouton-ajout-provision {
  font: 700 11px/1 var(--font-body); color: #fff; background: var(--bnp);
  border-radius: 999px; padding: 9px 11px; white-space: nowrap; min-height: 30px;
}
.provision-meta { font: 400 10px/1.4 var(--font-body); color: var(--color-neutral-700); }

/* ─── Impression (export PDF du bilan) ──────────────────────────────── */

@media print {
  /* Le papier reste toujours clair, quel que soit le thème à l'écran. */
  :root {
    --color-bg: #f5ead8; --color-text: #201e1d; --color-carte: #fff; --color-encre: #201e1d;
    --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4;
    --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a;
    --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25;
    --bnp: oklch(0.52 0.13 160); --bo: oklch(0.72 0.22 350);
    --warn-200: oklch(0.92 0.06 80); --warn-700: oklch(0.46 0.10 80);
  }
  @page { margin: 10mm; }
  body { background: var(--color-carte); }
  .app { box-shadow: none; max-width: none; min-height: 0; }
  .nav-basse, [data-ouvrir-menu], .depenses-actions, .bouton-onglet,
  .menu-overlay, .saisie-overlay, .onboarding-overlay, .verrou-overlay {
    display: none !important;
  }
  /* Mise en page resserrée pour tenir le bilan sur une page : mêmes
     informations, marges et interlignes réduits plutôt que du contenu en
     moins (RECETTE.md — une page, aucun bloc coupé en deux). */
  .app-entete { padding: 6px 0; border-bottom: none; }
  .app-contenu { padding: 6px 0 0; overflow: visible; gap: 7px; }
  .carte, .bandeau, .bilan-avenir, .provisions-carte {
    padding: 9px 11px; gap: 6px; border-radius: 12px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .bilan-paire, .rythme-ligne, .ligne-sous-poste { gap: 2px; }
  .carte-titre, .bandeau-kicker { font-size: 13px; }
  .bandeau-blocs { gap: 6px; }
  .bandeau-bloc { padding: 6px 8px; }
}

/* ─── Répartition ────────────────────────────────────────────────────── */

.repartition-bandeau {
  position: sticky; top: -14px; z-index: 3; border-radius: 20px; padding: 13px 15px;
  display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-sm);
}
.repartition-bandeau-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.repartition-bandeau-kicker { font: 600 9px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.repartition-bandeau-montant { font: 400 24px/1 var(--font-heading); }
.bouton-valider {
  font: 700 12px/1 var(--font-body); border-radius: 999px; padding: 13px 15px;
  white-space: nowrap; min-height: 44px;
}
.bouton-valider:disabled { cursor: default; }

.revenu-ligne {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--color-neutral-200); border-radius: 14px; padding: 8px 9px 8px 12px;
}
.revenu-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.revenu-libelle { font: 500 13px/1.2 var(--font-body); color: var(--color-text); }
.revenu-note { font: 400 9.5px/1.2 var(--font-body); color: var(--color-neutral-700); }
.champ-montant {
  width: 82px; text-align: right; font: 700 14px/1 var(--font-body); color: var(--color-text);
  border: none; outline: none; background: var(--color-neutral-100); border-radius: 11px; padding: 11px;
}

.groupe-repartition-carte { border-radius: 24px; padding: 14px 15px; display: flex; flex-direction: column; gap: 11px; }
.groupe-repartition-entete { display: flex; align-items: center; gap: 9px; }
.groupe-repartition-marque { width: 11px; height: 11px; flex: none; }
.groupe-repartition-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.groupe-repartition-titre { font: 400 17px/1.15 var(--font-heading); color: var(--color-text); }
.groupe-repartition-banque {
  font: 500 9px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.groupe-repartition-total { font: 400 19px/1 var(--font-heading); color: var(--color-text); white-space: nowrap; }

.ligne-repartition { background: var(--color-carte); border-radius: 14px; padding: 8px 9px 8px 12px; display: flex; align-items: center; gap: 8px; }
.ligne-repartition-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ligne-repartition-libelle { font: 600 12.5px/1.2 var(--font-body); color: var(--color-text); }
.ligne-repartition-chemin { font: 400 9.5px/1.2 var(--font-body); color: var(--color-neutral-700); }
.stepper-bouton {
  width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--font-body); color: var(--color-text); background: var(--color-neutral-100); border-radius: 999px;
}
.champ-montant-repartition {
  width: 74px; text-align: right; font: 700 13.5px/1 var(--font-body); color: var(--color-text);
  border: none; outline: none; background: var(--color-neutral-100); border-radius: 11px; padding: 10px;
}

/* ─── Mouvements ─────────────────────────────────────────────────────── */

.mouvements-filtres { display: flex; gap: 8px; }
.champ-filtre {
  flex: 1; font: 500 12px/1 var(--font-body); color: var(--color-text);
  background: var(--color-neutral-100); border: none; border-radius: 999px; padding: 12px;
  min-height: 44px;
}
.mouvement-ligne {
  background: var(--color-carte); border: 1.5px solid var(--color-neutral-200); border-radius: 18px;
  padding: 12px 13px; display: flex; align-items: center; gap: 10px;
}
.mouvement-date { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; }
.mouvement-jour { font: 700 14px/1 var(--font-body); color: var(--color-text); }
.mouvement-mois { font: 500 9.5px/1.2 var(--font-body); color: var(--color-neutral-700); }
.mouvement-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mouvement-libelle { font: 600 12.5px/1.25 var(--font-body); color: var(--color-text); }
.mouvement-meta { font: 400 10px/1.3 var(--font-body); color: var(--color-neutral-700); }
.mouvement-montant { font: 700 13px/1 var(--font-body); white-space: nowrap; }
.bouton-mouvement {
  font: 600 10.5px/1 var(--font-body); color: var(--color-text); background: var(--color-neutral-100);
  border-radius: 999px; padding: 9px 10px;
}
.bouton-mouvement-supprimer { color: var(--color-accent-700); background: var(--color-accent-200); }
.mouvements-vide { font: 400 12.5px/1.5 var(--font-body); color: var(--color-neutral-700); padding: 12px 4px; }

/* ─── À confirmer ────────────────────────────────────────────────────── */

.echeance-carte {
  background: var(--color-carte); border-radius: 20px; padding: 14px 15px; display: flex; flex-direction: column;
  gap: 11px; border: 1.5px solid var(--color-neutral-200);
}
.echeance-entete { display: flex; align-items: center; gap: 11px; }
.echeance-date { width: 42px; flex: none; display: flex; flex-direction: column; align-items: center; }
.echeance-jour { font: 700 15px/1 var(--font-body); color: var(--color-text); }
.echeance-mois { font: 500 9.5px/1.2 var(--font-body); color: var(--color-neutral-700); }
.echeance-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.echeance-libelle { font: 600 13px/1.2 var(--font-body); color: var(--color-text); }
.echeance-meta { font: 400 10px/1.3 var(--font-body); color: var(--color-neutral-700); }
.echeance-montant { font: 700 14px/1 var(--font-body); color: var(--color-text); white-space: nowrap; }
.echeance-actions { display: flex; align-items: center; gap: 8px; }
.champ-montant-echeance {
  width: 86px; text-align: right; font: 700 13px/1 var(--font-body); color: var(--color-text);
  border: 1.5px solid var(--color-neutral-200); outline: none; border-radius: 11px; padding: 10px;
}
.bouton-confirmer {
  flex: 1; text-align: center; font: 700 11.5px/1 var(--font-body); color: #fff; background: var(--bnp);
  border-radius: 999px; padding: 12px 10px;
}
.bouton-reporter {
  font: 600 11.5px/1 var(--font-body); color: var(--color-text); background: var(--color-neutral-100);
  border-radius: 999px; padding: 12px;
}
.echeance-statut { flex: 1; font: 600 11.5px/1.3 var(--font-body); }
.bouton-annuler {
  font: 600 11px/1 var(--font-body); color: var(--color-text); background: var(--color-neutral-100);
  border-radius: 999px; padding: 10px 12px;
}

/* ─── Feuille de saisie ──────────────────────────────────────────────── */

.saisie-overlay {
  position: fixed; inset: 0; background: oklch(0.25 0.02 60 / 0.42);
  display: flex; align-items: flex-end; justify-content: center; z-index: 30;
}
.saisie-feuille {
  width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; scrollbar-width: none;
  background: var(--color-carte); border-radius: 28px 28px 0 0; padding: 20px 18px calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 13px;
}
.saisie-feuille::-webkit-scrollbar { display: none; }
.saisie-entete { display: flex; align-items: baseline; gap: 10px; }
.saisie-titre { flex: 1; font: 400 21px/1.1 var(--font-heading); color: var(--color-text); }
.saisie-types { display: flex; gap: 7px; }
.saisie-type {
  flex: 1; text-align: center; font: 600 11.5px/1.2 var(--font-body); color: var(--color-text);
  background: var(--color-neutral-100); border-radius: 999px; padding: 11px 8px; min-height: 44px;
}
.saisie-type-actif-bnp { color: #fff; background: var(--bnp); }
.saisie-type-actif { color: #fff; background: var(--color-encre); }
.saisie-champ { display: flex; flex-direction: column; gap: 5px; }
.saisie-kicker { font: 600 9px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700); }
.saisie-montant {
  font: 400 38px/1 var(--font-heading); color: var(--color-text); border: none; outline: none;
  background: var(--color-neutral-100); border-radius: 18px; padding: 14px 16px; width: 100%; box-sizing: border-box;
}
.saisie-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.saisie-pastille {
  font: 500 11.5px/1 var(--font-body); color: var(--color-neutral-800); background: var(--color-neutral-100);
  border-radius: 999px; padding: 9px 11px; min-height: 36px;
}
.saisie-select {
  font: 600 13px/1.2 var(--font-body); color: var(--color-text); border: 1.5px solid var(--color-neutral-200);
  outline: none; background: var(--color-carte); border-radius: 14px; padding: 13px 12px; width: 100%; box-sizing: border-box;
  min-height: 44px;
}
.saisie-etat-ligne { font: 400 10.5px/1.4 var(--font-body); color: var(--color-neutral-700); }
.saisie-rangee { display: flex; gap: 9px; }
.saisie-valider {
  text-align: center; font: 700 13px/1 var(--font-body); border-radius: 999px; padding: 16px;
  min-height: 44px; width: 100%;
}
.saisie-valider:disabled { cursor: default; }

/* ─── Projets ────────────────────────────────────────────────────────── */

.projet-carte { background: var(--bo-100); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.projet-entete { display: flex; align-items: flex-end; gap: 11px; }
.projet-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.projet-titre { font: 400 19px/1.1 var(--font-heading); color: var(--bo-800); }
.projet-chemin { font: 400 10.5px/1.3 var(--font-body); color: var(--color-neutral-700); }
.projet-chiffres { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.projet-cumul { font: 400 22px/1 var(--font-heading); color: var(--bo-800); white-space: nowrap; }
.projet-cumul-libelle { font: 500 10px/1 var(--font-body); color: var(--color-neutral-700); }
.projet-jauge { height: 9px; background: var(--color-carte); }
.projet-rangee { display: flex; align-items: center; gap: 9px; }
.projet-objectif { flex: none; display: flex; flex-direction: column; gap: 2px; }
.champ-objectif {
  width: 96px; font: 700 13px/1 var(--font-body); color: var(--bo-800);
  border: 1.5px solid var(--color-carte); outline: none; background: var(--color-carte); border-radius: 11px; padding: 10px;
}
.champ-objectif-fixe { display: inline-block; box-sizing: border-box; }
.projet-textes { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.projet-part-lib, .projet-atteinte { font: 500 10.5px/1.3 var(--font-body); color: var(--color-neutral-800); }
.projet-verser { text-align: center; font: 700 12px/1 var(--font-body); border-radius: 999px; padding: 13px; min-height: 44px; }
.projet-verser:disabled { cursor: default; }

/* ─── Virement du mois ───────────────────────────────────────────────── */

.virement-carte { background: var(--color-carte); border: 1.5px solid var(--color-neutral-200); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.virement-chiffres { display: flex; gap: 10px; }
.virement-chiffre { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.virement-valeur { font: 400 19px/1 var(--font-heading); color: var(--color-text); }
.virement-note { font: 400 10.5px/1.35 var(--font-body); color: var(--color-neutral-800); }
.virement-termine {
  text-align: center; font: 700 12px/1 var(--font-body); color: var(--color-accent-2-800);
  background: var(--color-accent-2-200); border-radius: 999px; padding: 13px;
}
.tranche-ligne { display: flex; align-items: center; gap: 11px; }
.tranche-montant { flex: 1; font: 700 13px/1 var(--font-body); color: var(--color-text); }
.tranche-ajout { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

.invariant-ligne { display: flex; align-items: baseline; gap: 9px; }
.invariant-libelle { flex: 1; font: 500 12.5px/1.2 var(--font-body); color: var(--color-text); }
.invariant-valeur { font: 600 11.5px/1.3 var(--font-body); text-align: right; }

/* ─── Bilan du mois ──────────────────────────────────────────────────── */

.bilan-texte { font: 400 12.5px/1.5 var(--font-body); color: var(--color-neutral-800); }
.bilan-paire { display: flex; align-items: baseline; gap: 10px; }
.bilan-paire .bilan-texte { flex: 1; }
.bilan-valeur-forte { font: 700 12.5px/1 var(--font-body); color: var(--color-text); white-space: nowrap; }
.bilan-avenir { background: var(--color-accent-800); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.bilan-avenir-texte { font: 400 11.5px/1.5 var(--font-body); color: rgba(245,234,216,.88); }
.bouton-onglet-sage { color: #fff; background: oklch(0.50 0.13 152); }
.bouton-onglet:disabled { opacity: .5; cursor: default; }

/* ─── Statistiques ───────────────────────────────────────────────────── */

.stats-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.stats-legende-item { display: flex; align-items: center; gap: 6px; }
.stats-legende-marque { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.stats-legende-texte { font: 500 11px/1.2 var(--font-body); color: var(--color-neutral-800); }

/* ─── Réglages ────────────────────────────────────────────────────────── */

.reglages-champ-texte {
  flex: 1; min-width: 0; font: 500 12.5px/1.2 var(--font-body); color: var(--color-text);
  border: 1.5px solid var(--color-neutral-200); outline: none; background: var(--color-carte);
  border-radius: 11px; padding: 9px 10px; min-height: 40px;
}
.reglages-select-court {
  flex: none; font: 500 11.5px/1.2 var(--font-body); color: var(--color-text);
  border: 1.5px solid var(--color-neutral-200); outline: none; background: var(--color-carte);
  border-radius: 11px; padding: 9px 8px; min-height: 40px;
}
.reglages-select-large { width: 100%; box-sizing: border-box; font: 500 12px/1.2 var(--font-body); color: var(--color-text);
  border: 1.5px solid var(--color-neutral-200); outline: none; background: var(--color-carte); border-radius: 11px; padding: 9px 10px; min-height: 40px; }
.reglages-verrouille {
  flex: none; font: 600 10px/1 var(--font-body); color: var(--color-neutral-700);
  background: var(--color-neutral-100); border-radius: 999px; padding: 8px 10px;
}
.reglages-supprimer {
  flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--color-accent-200);
  color: var(--color-accent-700); font: 600 14px/1 var(--font-body); display: flex; align-items: center; justify-content: center;
}
.reglages-groupe { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-neutral-200); }
.reglages-groupe:first-of-type { border-top: none; padding-top: 0; }
.reglages-groupe-entete, .reglages-poste-entete { display: flex; align-items: center; gap: 7px; }
.reglages-poste { display: flex; flex-direction: column; gap: 6px; margin-left: 14px; padding-left: 10px; border-left: 2px solid var(--color-neutral-200); }
.reglages-sous-poste { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-left: 14px; }
.reglages-champ-sous { font-weight: 400; flex: 1 1 100px; min-width: 90px; }
.reglages-sous-poste .reglages-select-court { flex: 1 1 130px; min-width: 110px; }
.reglages-ajout { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.reglages-bouton-ajout {
  flex: none; font: 600 11px/1 var(--font-body); color: #fff; background: var(--color-encre);
  border-radius: 999px; padding: 10px 12px; min-height: 40px;
}
.reglages-recurrent { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--color-neutral-200); }
.reglages-recurrent:first-of-type { border-top: none; padding-top: 0; }
.reglages-rangee-3 { display: flex; gap: 7px; align-items: center; }
.reglages-case { display: flex; align-items: center; gap: 5px; font: 500 11px/1 var(--font-body); color: var(--color-neutral-800); white-space: nowrap; }
.reglages-champ-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ─── Verrou ──────────────────────────────────────────────────────────── */

.verrou-overlay {
  position: fixed; inset: 0; background: var(--color-bg); z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px;
}
.verrou-marque { font: 400 22px/1 var(--font-heading); color: var(--color-text); }
.verrou-titre { font: 600 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.verrou-points { display: flex; gap: 12px; margin: 6px 0; }
.verrou-point { width: 13px; height: 13px; border-radius: 999px; border: 1.5px solid var(--color-accent-700); background: transparent; }
.verrou-point-plein { background: var(--color-accent-700); }
.verrou-message { font: 500 12px/1.3 var(--font-body); color: var(--color-accent-700); min-height: 16px; }
.verrou-clavier { display: grid; grid-template-columns: repeat(3, 64px); gap: 16px; }
.verrou-touche {
  width: 64px; height: 64px; border-radius: 999px; background: var(--color-neutral-100);
  color: var(--color-text); font: 400 22px/1 var(--font-heading); display: flex; align-items: center; justify-content: center;
}
.verrou-touche:disabled { opacity: .4; }
.verrou-biometrie {
  margin-top: 6px; font: 600 12px/1 var(--font-body); color: var(--color-accent-700);
  background: var(--color-neutral-100); border-radius: 999px; padding: 13px 18px; min-height: 44px;
}
.verrou-biometrie:disabled { opacity: .4; }

/* ─── Onboarding ──────────────────────────────────────────────────────── */

.onboarding-overlay {
  position: fixed; inset: 0; background: oklch(0.25 0.02 60 / 0.42); z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
}
.onboarding-progression { font: 600 11px/1 var(--font-body); color: var(--color-neutral-700); }
.onboarding-corps { display: flex; flex-direction: column; gap: 9px; max-height: 50vh; overflow-y: auto; }
.onboarding-groupe { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.onboarding-groupe-titre { font: 600 13px/1.2 var(--font-body); color: var(--color-text); }

/* ─── Sauvegarde et exports ──────────────────────────────────────────── */

.bouton-pleine-largeur-sombre { color: #fff; background: var(--color-encre); }
.carte-neutre { background: var(--color-neutral-100); border: none; }
.bouton-reinit {
  text-align: center; font: 700 12px/1 var(--font-body); color: var(--color-accent-700);
  background: var(--color-accent-200); border-radius: 999px; padding: 13px; min-height: 44px;
}
.export-sous-titre {
  font: 600 9px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700);
}
.export-liste { display: flex; flex-direction: column; gap: 6px; }
.export-choix {
  display: flex; align-items: center; gap: 10px; background: var(--color-neutral-100);
  border: 1.5px solid transparent; border-radius: 14px; padding: 10px 12px; text-align: left; min-height: 44px;
}
.export-choix-actif { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.export-puce { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--color-neutral-400); flex: none; }
.export-puce-actif { border-color: var(--color-accent-700); background: var(--color-accent-700); }
.export-choix-textes { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.export-choix-lib { font: 600 12.5px/1.2 var(--font-body); color: var(--color-text); }
.export-choix-note { font: 400 10px/1.25 var(--font-body); color: var(--color-neutral-700); }
.export-segmente { display: flex; gap: 5px; background: var(--color-neutral-100); border-radius: 999px; padding: 4px; }
.export-segment { flex: 1; text-align: center; border-radius: 999px; padding: 12px 6px; font: 500 11.5px/1 var(--font-body); color: var(--color-neutral-800); min-height: 40px; }
.export-segment-actif { background: var(--color-carte); font-weight: 700; color: var(--color-text); }
.export-formats { display: flex; gap: 6px; }
.export-format {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--color-neutral-100);
  border: 1.5px solid transparent; border-radius: 14px; padding: 10px 4px; min-height: 44px;
}
.export-format-actif { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.export-format-lib { font: 700 11.5px/1 var(--font-body); color: var(--color-text); }
.export-format-note { font: 400 8.5px/1 var(--font-body); color: var(--color-neutral-700); }

/* ─── Feuille de menu ────────────────────────────────────────────────── */

.menu-overlay {
  position: fixed; inset: 0; background: oklch(0.25 0.02 60 / 0.42);
  display: flex; align-items: flex-end; justify-content: center; z-index: 20;
}
.menu-feuille {
  width: 100%; max-width: 440px; background: var(--color-carte); border-radius: 28px 28px 0 0;
  padding: 20px 18px calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.menu-entete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.menu-titre { flex: 1; font: 400 21px/1.1 var(--font-heading); color: var(--color-text); }
.menu-item {
  text-align: left; font: 600 13px/1.2 var(--font-body); color: var(--color-text);
  background: var(--color-neutral-100); border-radius: 14px; padding: 14px 15px;
  min-height: 44px; display: flex; align-items: center;
}