/* ============================================================
   BUDGET APP - Styles principaux (version en em)
   Direction esthétique : carnet de comptable moderne

   Notes sur la conversion px → em :
   - Base racine : html font-size = 15px (browser 16px × 0.9375)
   - font-size : converti relativement au parent (= 15 par défaut)
   - padding/margin/gap/width/etc. : converti relativement à la
     PROPRE font-size de l'élément (la cascade fait scaler tout
     ensemble si tu changes la font-size d'un parent)
   - Borders 1-2px et box-shadows fins : gardés en px (sub-pixel
     en em donne du flou)
   - Breakpoints @media : gardés en px (1em en media query = 16px
     toujours, donc pas comparable à notre base 15)
   ============================================================ */

:root {
  --bg: #f5f3ee;
  --bg-card: #ffffff;
  --bg-soft: #ebe8e0;
  --bg-softer: #f0ede5;
  --ink: #1a1714;
  --ink-soft: #3d3832;
  --ink-muted: #5d574e;
  --line: #8e8881;
  --line-soft: #b8b3ab;
  --accent: #1a1714;
  --pos: #2d6a4f;
  --neg: #a23b3b;
  --warn: #c8842b;
  --shared: #4a5d8c;
  --personal: #8b6f47;
  --project: #6b4a7a;
  /* Famille violet — boutons actifs, accents, submit */
  --primary: #6b4a7a;
  --primary-soft: #8c6a9d;
  --primary-light: #e7dce9;
  --primary-lighter: #f3ecf5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  color: var(--ink);
  font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 0.9375em; /* 15px (base browser 16px) */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background-color: var(--bg);
}

/* Carte ancienne en fond, fixée au viewport, à 20 % d'opacité.
   Sur ::before de html pour garantir une couverture pleine fenêtre
   peu importe la hauteur du body. */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../img/bg-map.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
  /* Légère sur-échelle pour rogner les bords blancs du scan. */
  transform: scale(1.05);
  transform-origin: center center;
}

body {
  min-height: 100vh;
  background-color: transparent; /* laisse html (carte) traverser */
  background-image: radial-gradient(circle at 1px 1px, rgba(26,23,20,0.09) 1px, transparent 0);
  background-size: 1.6em 1.6em; /* 24px / 15 */
  overflow-x: hidden; /* garde-fou contre tout débordement horizontal */
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.serif { font-family: 'Google Sans Flex', system-ui, sans-serif; }
.mono { font-family: 'Roboto Mono', 'SF Mono', Menlo, monospace; font-feature-settings: "tnum"; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }

/* ===== Layout principal ===== */
.shell {
  max-width: 85.333em;
  margin: 0 auto;
  padding: 2.5em 1.6em 1.6em 1.6em;
}

@media (max-width: 768px) {
  .shell { padding: 2.5em 0.933em 6.667em 0.933em; }
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 10em;
  margin-bottom: 1.867em;
  padding-bottom: 1.333em;
  border-bottom: 1px solid var(--line);
}

.topbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em; /* 12 / 15 */
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.667em; /* 10 / 15 */
  flex-wrap: wrap;
  min-width: 0;
}

.brand-mark {
  font-family: 'Tangerine', cursive;
  font-size: 5em; /* Tangerine est très étroite, on compense */
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  isolation: isolate; /* contient le z-index négatif du ::before */
}
/* Bateau en filigrane retiré — gardait trop d'espace gauche sur mobile et
   alourdissait l'en-tête. Le SVG reste sur disque pour réutilisation
   éventuelle (icône PWA, etc.). */

.brand-sub {
  font-size: 0.733em; /* 11 / 15 */
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}

.brand-tagline {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 0.867em; /* 13 / 15 */
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 400;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4em; /* 6 / 15 */
  flex-wrap: wrap;
  row-gap: 0.533em; /* 8 / 15 */
}

/* .user-pill : font-size 13, props internes / 13 */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.769em; /* 10 / 13 */
  padding: 0.462em 0.923em 0.462em 0.462em; /* 6 12 6 6 / 13 */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 0.867em; /* 13 / 15 */
  flex-shrink: 0;
}

/* .avatar : font-size 11, props / 11 */
.avatar {
  width: 2.364em; /* 26 / 11 */
  height: 2.364em;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.733em; /* 11 / 15 */
  font-weight: 600;
  flex-shrink: 0;
}

/* .nav-link : font-size 13, props / 13 */
.nav-link {
  padding: 0.538em 0.923em;
  border-radius: 0.615em;
  color: var(--ink-soft);
  font-size: 1.2em;
  font-weight: 500;
  white-space: nowrap;
}
.nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.nav-link.active { background: var(--ink); color: var(--bg); }
/* .nav-link-icon : font-size 16, props / 16 */
.nav-link-icon { font-size: 1.067em; line-height: 1; padding: 0.375em 0.625em; } /* 16/15 ; 6/16 10/16 */
.nav-link-icon .emoji { width: 1em; height: 1em; vertical-align: -0.188em; } /* 16/16 ; -3/16 */

@media (max-width: 540px) {
  /* En-tête plus compact sur mobile : titre réduit, tagline masquée
     (gain d'une ligne), nav plus serrée. */
  .topbar { margin-bottom: 1em; padding-bottom: 0.667em; }
  .topbar-top { gap: 0.533em; }
  .brand { gap: 0.4em; }
  .brand-mark { font-size: 2.4em; } /* 36 / 15, lisible sans dominer */
  .brand-sub { font-size: 0.667em; letter-spacing: 0.12em; } /* 10/15 */
  .brand-tagline { display: none; }
  .nav-link { padding: 0.4em 0.667em; font-size: 0.8em; }
  .topbar-actions { gap: 0.267em; row-gap: 0.333em; }
  .user-pill { padding: 0.333em 0.833em 0.333em 0.333em; font-size: 0.8em; }
  .avatar { width: 2.2em; height: 2.2em; font-size: 0.667em; }
}

@media (max-width: 380px) {
  .user-pill span { display: none; }
  .user-pill { padding: 0.231em; } /* 3 / 13 */
}

/* ===== Tabs de contexte ===== */
.context-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.267em; /* 4 / 15 */
  margin-bottom: 1.6em; /* 24 / 15 */
  padding: 0.267em; /* 4 / 15 */
  /*background: var(--bg-soft);*/
  border-radius: 0.8em; /* 12 / 15 */
}

/* .tab : font-size 14, props / 14 */
.tab {
  display: flex;
  align-items: center;
  gap: 0.571em; /* 8 / 14 */
  padding: 0.714em 1.143em; /* 10 16 / 14 */
  border: none;
  background: transparent;
  border-radius: 0.571em; /* 8 / 14 */
  font-size: 0.933em; /* 14 / 15 */
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all 0.15s ease;
}
.tab:hover { color: var(--ink); }
.tab.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--line);
}

.tab-dot { width: 0.533em; height: 0.533em; border-radius: 50%; } /* 8/15 */
.tab-personal .tab-dot { background: var(--personal); }
.tab-couple .tab-dot { background: var(--shared); }
.tab-project .tab-dot { background: var(--project); }

.tab-add { color: var(--ink-muted); font-weight: 400; }
.tab-add:hover { color: var(--ink); background: rgba(0,0,0,0.04); }

/* ===== Grid ===== */
.grid {
  display: grid;
  grid-template-columns: 1fr 25.333em; /* 380 / 15 */
  gap: 1.6em; /* 24 / 15 */
}
@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
}

/* ===== Saisie rapide ===== */
.quick-entry {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 1.067em; /* 16 / 15 */
  padding: 1.333em; /* 20 / 15 */
  margin-bottom: 1.333em; /* 20 / 15 */
  position: relative;
}

/* .qe-close : font-size 22, props / 22 */
.qe-close {
  display: none;
  position: absolute;
  top: 0.455em; /* 10 / 22 */
  right: 0.545em; /* 12 / 22 */
  width: 1.636em; /* 36 / 22 */
  height: 1.636em;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  border: none;
  font-size: 1.467em; /* 22 / 15 */
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.qe-close:hover { background: var(--line); }

/* ============================================================
   SAISIE RAPIDE — Refonte design (purement visuelle, JS inchangé)
   ============================================================ */

/* Visibilité progressive par État */
#qeBox[data-qe-step="1"] .qe-step-2-only,
#qeBox[data-qe-step="1"] .qe-step-3-only,
#qeBox[data-qe-step="1"] .qe-step-23-only { display: none !important; }
#qeBox[data-qe-step="2"] .qe-step-1-only,
#qeBox[data-qe-step="2"] .qe-step-3-only { display: none !important; }
#qeBox[data-qe-step="3"] .qe-step-1-only,
#qeBox[data-qe-step="3"] .qe-step-2-only { display: none !important; }

/* Filtrage Dépense / Revenu : on cache la grille du type non actif */
#qeBox[data-qe-type="expense"] .qe-cats-grid[data-cats-type="income"],
#qeBox[data-qe-type="income"]  .qe-cats-grid[data-cats-type="expense"] { display: none !important; }

/* Mode Retrait : on cache toute la machinerie cat (grilles + step 3 régulier)
   et on montre uniquement le panneau Retrait. Hors retrait : panneau caché. */
#qeBox[data-qe-type="withdrawal"] .qe-cats-grid,
#qeBox[data-qe-type="withdrawal"] .qe-cat-parent,
#qeBox[data-qe-type="withdrawal"] #qeStep3 { display: none !important; }
#qeBox:not([data-qe-type="withdrawal"]) #qeStep3Withdrawal { display: none !important; }
#qeBox[data-qe-type="withdrawal"] #qeStep3Withdrawal {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  animation: qeFadeIn 0.2s ease-out;
}

/* Fade-in léger sur les blocs qui apparaissent */
#qeBox[data-qe-step] .qe-cats-grid,
#qeBox[data-qe-step] .qe-cat-parent,
#qeBox[data-qe-step] #qeStep3 {
  animation: qeFadeIn 0.2s ease-out;
}
@keyframes qeFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header : toggle Dépense/Revenu (à gauche) + actions photo/galerie/micro (à droite) */
.qe-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875em;
  padding: 0 0.125em;
  gap: 0.75em;
}

.qe-top-toggle {
  display: inline-flex;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.1875em;
  flex-shrink: 0;
}
.qe-top-toggle-btn {
  padding: 0.3125em 0.875em;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 0.6875em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  font-family: inherit;
}
.qe-top-toggle-btn:hover { color: var(--ink-soft); }
.qe-top-toggle-btn.active {
  background: var(--primary);
  color: var(--bg);
  box-shadow: 0 1px 2px rgba(107,74,122,0.2);
}
.qe-top-toggle-btn.active[data-type="income"] { background: var(--primary); }

.qe-actions {
  display: flex;
  gap: 0.25em;
  flex-shrink: 0;
}
.qe-icon-btn {
  width: 2em;
  height: 2em;
  border-radius: 0.4em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.15s ease;
  font-family: inherit;
}
.qe-icon-btn:hover {
  background: var(--bg-soft);
  color: var(--ink);
  border-color: var(--line);
}
.qe-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qe-icon-btn svg { width: 1em; height: 1em; }
.qe-icon-btn.recording { background: var(--neg); color: #fff; border-color: var(--neg); }

/* Grille de catégories — compacte, auto-fill */
.qe-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5em, 1fr));
  gap: 0.375em;
}

.cat-tile {
  background: var(--bg-softer);
  border: 1px solid transparent;
  border-radius: 0.5em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875em;
  padding: 0.625em 0.375em;
  transition: all 0.12s ease;
  min-height: 4em;
  font-family: inherit;
}
.cat-tile:hover {
  background: var(--bg-soft);
  border-color: var(--line);
}
.cat-tile:active { transform: scale(0.97); }
.cat-tile.active {
  background: var(--primary);
  border-color: var(--primary);
}
.cat-tile.active .cat-tile-label { color: var(--bg); }

.cat-tile-icon {
  font-size: 1.25em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-tile-icon img {
  width: 1.25em;
  height: 1.25em;
  display: block;
}
.cat-tile-label {
  font-size: 0.625em;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-tile-more {
  background: transparent;
  border: 1px dashed var(--line);
}
.cat-tile-more:hover { background: var(--bg-softer); }
.cat-tile-more .cat-tile-icon { color: var(--ink-muted); }

/* Raccourcis vers les autres pages de création (récurrence, transfert, etc.)
   Visibles uniquement en step 1 et hors mode Retrait. */
.qe-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 0.8em;
  padding-top: 0.8em;
  border-top: 1px dashed var(--line-soft);
}
.qe-shortcut-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.8em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.867em;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.qe-shortcut-link:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.qe-shortcut-icon { font-size: 1.1em; }
#qeBox:not([data-qe-step="1"]) .qe-shortcuts,
#qeBox[data-qe-type="withdrawal"] .qe-shortcuts { display: none; }

/* Breadcrumb catégorie parent (États 2 et 3) */
.qe-cat-parent {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.75em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 0.5em;
  cursor: pointer;
  margin-bottom: 0.625em;
  width: 100%;
  text-align: left;
  transition: all 0.12s ease;
  font-family: inherit;
}
.qe-cat-parent:hover { background: var(--bg-soft); }
.qe-cat-parent-back {
  color: var(--ink-muted);
  font-size: 0.875em;
}
.qe-cat-parent-icon {
  font-size: 1em;
  display: flex;
  align-items: center;
  line-height: 1;
}
.qe-cat-parent-icon img {
  width: 1em;
  height: 1em;
}
.qe-cat-parent-label {
  font-weight: 600;
  font-size: 0.8125em;
  color: var(--ink);
}
.qe-cat-parent-sub {
  margin-left: auto;
  font-size: 0.6875em;
  color: var(--ink-muted);
  font-style: italic;
}
.qe-cat-parent-sub:not(:empty)::before { content: '· '; }

/* ===== État 3 : formulaire complet ===== */
#qeStep3 {
  display: flex;
  flex-direction: column;
  gap: 0.875em;
}

/* Montant en hero */
.qe-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.375em 0 0.625em 0;
  border-bottom: 1px solid var(--line-soft);
}
.qe-amount-currency {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5em;
  color: var(--ink-muted);
  font-weight: 400;
}
.qe-amount-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 2em;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  outline: none;
  padding: 0;
}
.qe-amount-input::placeholder {
  color: var(--ink-muted);
  font-weight: 400;
}

/* Labels meta uppercase */
.qe-meta-label {
  font-size: 0.625em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.4375em;
}

/* Chips de contexte (pill arrondi) */
.qe-ctx-chips {
  display: flex;
  gap: 0.3125em;
  flex-wrap: wrap;
}
.qe-ctx-chip {
  padding: 0.375em 0.75em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.qe-ctx-chip:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}
.qe-ctx-chip.active {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}

/* Toggle générique (payeur, split ratio) */
.qe-toggle {
  display: inline-flex;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 0.4em;
  padding: 0.1875em;
}
.qe-toggle-btn {
  padding: 0.375em 0.75em;
  background: transparent;
  border: none;
  border-radius: 0.25em;
  font-size: 0.6875em;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.qe-toggle-btn.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26,23,20,0.06);
  font-weight: 600;
}

/* Payeur (label au-dessus du toggle) */
.qe-payer-row {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

/* Dépense partagée (switch) */
.qe-shared-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.625em 0.875em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 0.5em;
  flex-wrap: wrap;
}
.qe-shared-toggle {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--ink);
}
.qe-switch {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 1.125em;
  flex-shrink: 0;
}
.qe-switch input { display: none; }
.qe-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--line);
  border-radius: 999px;
  transition: 0.2s;
}
.qe-switch-slider::before {
  content: '';
  position: absolute;
  height: 0.875em;
  width: 0.875em;
  left: 0.125em;
  top: 0.125em;
  background: var(--bg-card);
  border-radius: 50%;
  transition: 0.2s;
}
.qe-switch input:checked + .qe-switch-slider { background: var(--primary); }
.qe-switch input:checked + .qe-switch-slider::before { transform: translateX(0.875em); }

.qe-share-ratio-toggle { display: inline-flex; }
#qeBox[data-qe-shared="0"] .qe-share-ratio-toggle { display: none; }

/* Chips méthodes de paiement */
.qe-method-chips {
  display: flex;
  gap: 0.3125em;
  flex-wrap: wrap;
}
.qe-method-chip {
  padding: 0.4375em 0.625em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 0.4em;
  font-size: 0.6875em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3125em;
  transition: all 0.15s ease;
  font-family: inherit;
}
.qe-method-chip:hover { border-color: var(--ink-muted); }
.qe-method-chip.active {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}
.qe-method-chip-name { font-weight: 500; }
.qe-method-chip-bal {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}
.qe-method-empty {
  padding: 0.625em 0;
  font-size: 0.75em;
  color: var(--ink-muted);
  font-style: italic;
}
.qe-method-empty a { text-decoration: underline; color: var(--ink); }

/* Inputs texte */
.qe-text-input {
  width: 100%;
  padding: 0.5em 0.75em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 0.4em;
  font-family: inherit;
  font-size: 0.8125em;
  color: var(--ink);
  outline: none;
  transition: all 0.15s ease;
}
.qe-text-input:focus {
  border-color: var(--ink-muted);
  background: var(--bg-card);
}
.qe-text-input::placeholder { color: var(--ink-muted); }
textarea.qe-text-input {
  min-height: 2.5em;
  resize: vertical;
}

/* Submit row */
.qe-submit-row {
  display: flex;
  align-items: center;
  gap: 0.625em;
  padding-top: 0.25em;
}
.qe-date {
  flex: 0 0 auto;
  padding: 0.5em 0.625em;
  background: var(--bg-softer);
  border: 1px solid var(--line-soft);
  border-radius: 0.4em;
  font-family: inherit;
  font-size: 0.75em;
  color: var(--ink);
  outline: none;
}
.qe-submit-btn {
  flex: 1;
  padding: 0.625em 1em;
  background: var(--primary);
  color: var(--bg);
  border: none;
  border-radius: 0.4em;
  font-family: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.qe-submit-btn:hover { background: var(--primary-soft); }
.qe-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Sur petit écran, date + submit empilés */
@media (max-width: 480px) {
  .qe-submit-row { flex-direction: column; align-items: stretch; }
  .qe-submit-row .qe-submit-btn { width: 100%; }
}

/* ===== Sections ===== */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.933em; /* 14 / 15 */
  padding: 0 0.267em; /* 0 4 / 15 */
}
/* .section-title h2 : font-size 20, props / 20 */
.section-title h2 {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.333em; /* 20 / 15 */
  letter-spacing: -0.01em;
}
/* .section-title .meta : font-size 12 */
.section-title .meta {
  font-size: 0.8em; /* 12 / 15 */
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ===== Stats du mois ===== */
.month-stats {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 1.067em; /* 16 / 15 */
  padding: 1.333em; /* 20 / 15 */
  margin-bottom: 1.333em; /* 20 / 15 */
}

.month-totals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.067em; /* 16 / 15 */
  margin-bottom: 1.333em; /* 20 / 15 */
}
@media (max-width: 540px) {
  .month-totals { grid-template-columns: 1fr 1fr; }
  .month-totals > div:last-child { grid-column: span 2; }
}

/* Projets actifs du mois : chaque projet est une tuile gris foncé. */
.month-projects {
  margin-top: -0.4em; /* -6 / 15 */
  margin-bottom: 1.867em; /* 28 / 15 */
}
.month-projects .month-totals {
  margin-bottom: 0;
  gap: 0.8em; /* 12 / 15 */
}
.month-projects .total-block {
  text-decoration: none;
  color: var(--bg);
  background-color: #6b4a7a;
  padding: 0.333em 0.667em;
  border-radius: 0.533em;
  line-height: 1;
  font-size: 0.6em;
}
.month-projects .total-block .label {
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.111em; /* 1 / 9 (label own font-size) */
}
.month-projects .total-block .amount { line-height: 1; }
.month-projects .total-block .delta {
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  margin-top: 0.091em; /* 1 / 11 (delta own font-size) */
  line-height: 1;
}

/* .total-block .label : font-size 9, props / 9 */
.total-block .label {
  font-size: 0.8em;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.667em;
  font-weight: 500;
}
/* .total-block .amount : font-size 22, props / 22 */
.total-block .amount {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 1.467em; /* 22 / 15 */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* .total-block .amount .cents : font-size 16, herité parent 22 → 16/22 */
.total-block .amount .cents { font-size: 0.727em; color: var(--ink-muted); }
.total-block .amount.pos { color: var(--pos); }
/* .total-block .delta : font-size 11, props / 11 */
.total-block .delta {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.733em; /* 11 / 15 */
  margin-top: 0.364em; /* 4 / 11 */
}
.delta.up { color: var(--neg); }
.delta.down { color: var(--pos); }

/* ===== Onglets Catégories / Marchands (au-dessus de .cat-list) ===== */
.cat-merchant-tabs {
  display: flex;
  gap: 0.4em;
  margin-bottom: 0.8em;
  flex-wrap: wrap;
}
.cm-tab {
  padding: 0.4em 0.9em;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.867em;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.cm-tab.active {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}

/* ===== Liste catégories : 2 colonnes desktop, 1 colonne mobile ===== */
.cat-list {
  column-count: 2;
  column-gap: 2.667em; /* 40 / 15 */
}

@media (max-width: 720px) {
  .cat-list {
    column-count: 1;
  }
}

/* Un groupe = catégorie parent + ses enfants, ne se sépare jamais. */
.cat-group {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  margin-bottom: 0.4em; /* 6 / 15 */
}

.cat-row {
  display: grid;
  grid-template-columns: 1.6em 1fr auto; /* 24 / 15 */
  gap: 0.667em; /* 10 / 15 */
  align-items: baseline;
  padding: 0.3em 0;
  border-bottom: 1px solid #dedede;
}

.cat-row--child {
  padding-left: 1.867em; /* 28 / 15 */
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Première sous-cat d'un groupe : un peu d'air en haut pour la séparer du parent. */
.cat-row:not(.cat-row--child) + .cat-row--child {
  padding-top: 0.4em;
}

/* La dernière sous-catégorie d'un groupe reprend la border bottom. */
.cat-group .cat-row--child:last-child {
  padding-bottom: 0.667em; /* 10 / 15 */
  border-bottom: 1px solid #dedede;
}

/* .cat-icon : font-size 16, props / 16 */
.cat-icon {
  font-size: 1.067em; /* 16 / 15 */
  line-height: 1;
}

/* .cat-row--child .cat-icon : font-size 13 */
.cat-row--child .cat-icon {
  font-size: 0.867em; /* 13 / 15 */
  opacity: 0.6;
}

.cat-name-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.533em; /* 8 / 15 */
  min-width: 0;
}

/* .cat-name : font-size 14 */
.cat-name {
  font-size: 0.933em; /* 14 / 15 */
  font-weight: 500;
}

/* .cat-row--child .cat-name : font-size 13 */
.cat-row--child .cat-name {
  font-weight: 400;
  font-size: 0.867em; /* 13 / 15 */
  color: var(--ink-soft);
}

/* .cat-meta : font-size 11 */
.cat-meta {
  font-size: 0.733em; /* 11 / 15 */
  color: var(--ink-muted);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* .cat-amount : font-size 14 */
.cat-amount {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.933em; /* 14 / 15 */
}

/* .cat-row--child .cat-amount : font-size 13 */
.cat-row--child .cat-amount {
  font-weight: 400;
  font-size: 0.867em; /* 13 / 15 */
  color: var(--ink-soft);
}

/* ===== Transactions ===== */
.tx-list {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 1.067em; /* 16 / 15 */
  overflow: hidden;
}

/* --- Bloc "À venir" --- */
.tx-upcoming {
  background: linear-gradient(to bottom, rgba(200,132,43,0.04) 0%, transparent 100%);
  padding-bottom: 0.533em; /* 8 / 15 */
}
.tx-upcoming-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8em; /* 12 / 15 */
  padding: 0.933em 1.333em 0.667em 1.333em; /* 14 20 10 20 / 15 */
}
/* .tx-upcoming-title : font-size 14, props / 14 */
.tx-upcoming-title {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.933em; /* 14 / 15 */
}
.tx-upcoming-title::before {
  content: '↻';
  font-style: normal;
  margin-right: 0.429em; /* 6 / 14 */
}
/* .tx-upcoming-meta : font-size 12 */
.tx-upcoming-meta {
  font-family: 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8em; /* 12 / 15 */
  color: var(--ink-muted);
}
.tx-upcoming .tx-row {
  opacity: 0.95;
  border-bottom: 1px dashed var(--line-soft);
}
.tx-upcoming .tx-row:last-child { border-bottom: none; }
.tx-upcoming .tx-amount.is-overdue { color: var(--neg); }

/* --- En-têtes de jour --- */
.tx-day-header {
  padding: 1.2em 1.333em 0.667em 1.333em; /* 18 20 10 20 / 15 */
  background: var(--bg-softer);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* .tx-day-label : font-size 15 */
.tx-day-label {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 1em; /* 15 / 15 */
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
}
/* .tx-day-date : font-size 10, props / 10 */
.tx-day-date {
  margin-left: 1em; /* 10 / 10 */
  font-style: normal;
  font-weight: 500;
  font-size: 0.667em; /* 10 / 15 */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
/* .tx-day-total : font-size 12 */
.tx-day-total {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8em; /* 12 / 15 */
  font-weight: 500;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Lignes --- */
.tx-row {
  display: grid;
  grid-template-columns: 2.667em 1fr auto; /* 40 / 15 */
  gap: 0.933em; /* 14 / 15 */
  align-items: center;
  padding: 0.8em 1.333em; /* 12 20 / 15 */
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.1s ease;
  color: inherit;
}
.tx-row:hover { background: var(--bg-soft); }
.tx-row:last-child { border-bottom: none; }

/* .tx-icon : font-size 16, props / 16 */
.tx-icon {
  width: 2.5em; /* 40 / 16 */
  height: 2.5em;
  border-radius: 0.625em; /* 10 / 16 */
  display: flex; align-items: center; justify-content: center;
  font-size: 1.067em; /* 16 / 15 */
  background: var(--bg-soft);
  flex-shrink: 0;
}
.tx-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.267em; /* 4 / 15 */
}
/* .tx-title : font-size 14, props / 14 */
.tx-title {
  font-size: 0.933em; /* 14 / 15 */
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .tx-subtitle : description en sous-ligne quand marchand + description coexistent */
.tx-subtitle {
  font-size: 0.8em; /* 12 / 15 */
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* tx-title-line : marchand + description sur la même ligne (desktop),
   séparés par "·". Sur mobile (<48em), passe sur deux lignes : marchand
   en haut (proéminent), description en dessous (plus petite). */
.tx-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em; /* 6 / 15 */
  line-height: 1.3;
  overflow: hidden;
}
.tx-title-line .tx-merchant {
  font-size: 0.933em; /* 14 / 15 */
  font-weight: 500;
  color: var(--ink);
}
.tx-title-line .tx-desc {
  font-size: 0.933em;
  font-weight: 400;
  color: var(--ink-soft);
}
.tx-title-line .tx-sep { color: var(--ink-muted); }
@media (max-width: 48em) {
  .tx-title-line { flex-direction: column; gap: 0.067em; }
  .tx-title-line .tx-sep { display: none; }
  .tx-title-line .tx-desc { font-size: 0.8em; }
}
/* .tx-meta : font-size 11, props / 11 */
.tx-meta {
  display: flex; gap: 0.727em; align-items: center; /* 8/11 */
  font-size: 0.733em; color: var(--ink-muted); /* 11/15 */
  flex-wrap: wrap;
}

/* .tx-tag : base commune à tous les tags dans .tx-meta (font-size = 1em) */
.tx-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1em 0.6em;
  border-radius: 0.4em;
  background: var(--bg-soft);
  font-weight: 500;
  font-size: 1em;
}
.tx-tag-shared { background: rgba(74,93,140,0.10); color: var(--shared); }
.tx-tag-personal { background: rgba(139,111,71,0.10); color: var(--personal); }
.tx-tag-project { background: rgba(107,74,122,0.10); color: var(--project); }
.tx-tag-deduct { background: rgba(45,106,79,0.12); color: var(--pos); }
.tx-tag-method { background: var(--bg-soft); color: var(--ink-muted); }
.tx-tag-method::before { content: '💳'; }

.tx-tag-recurring,
.tx-tag-scheduled,
.tx-tag-planned {
  background: transparent;
  color: var(--ink-muted);
  padding: 0.091em 0.364em;
  font-weight: 400;
}
.tx-tag-recurring::before {
  content: '↻';
  margin-right: 0.182em;
}

/* .tx-paid : couleur uniquement, font-size hérité de .tx-tag */
.tx-paid {
  color: var(--ink-soft);
}
.tx-meta > .tx-paid:first-child::before { display: none; }

/* .tx-amount : font-size 15, props / 15 */
.tx-amount {
  font-family: 'Roboto Mono', monospace;
  font-size: 1em; /* 15 / 15 */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.133em; /* 2 / 15 */
}
.tx-amount.income { color: var(--pos); }

/* --- Règlements --- */
.tx-row.tx-settlement { background: rgba(74,93,140,0.04); }
.tx-row.tx-settlement:hover { background: rgba(74,93,140,0.08); }
/* tx-settlement .tx-icon : font-size 20 override, on garde la taille de .tx-icon mais font-size change */
.tx-row.tx-settlement .tx-icon {
  background: rgba(74,93,140,0.12);
  color: var(--shared);
  font-size: 1.333em; /* 20 / 15 */
}
.tx-row.tx-settlement .tx-amount { color: var(--shared); }

/* --- Charger plus (sentinel) --- */
/* .tx-load-more : font-size 12 */
.tx-load-more {
  padding: 1.667em; /* 20 / 12 */
  text-align: center;
  font-size: 0.8em; /* 12 / 15 */
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
  font-style: italic;
}

/* ===== Sidebar ===== */
.sidebar > * + * { margin-top: 1.333em; } /* 20 / 15 */

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 1.067em; /* 16 / 15 */
  padding: 1.333em; /* 20 / 15 */
}

/* .card-title : font-size 16, props / 16 */
.card-title {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 1.067em; /* 16 / 15 */
  font-weight: 500;
  margin-bottom: 0.875em; /* 14 / 16 */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* .card-title .label : font-size 10, props / 10 */
.card-title .label {
  font-size: 0.625em; /* 10 / 16 (parent .card-title est 16) */
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: 'Google Sans Flex', sans-serif;
  font-weight: 500;
}

.balance-display { text-align: center; padding: 0.933em 0; } /* 14/15 */
/* .balance-amount : font-size 42, props / 42 */
.balance-amount {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-size: 2.8em; /* 42 / 15 */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}
.balance-amount.neg { color: var(--neg); }
.balance-amount.pos { color: var(--pos); }
.balance-amount.zero { color: var(--ink-muted); }
/* .balance-subtitle : font-size 13, props / 13 */
.balance-subtitle {
  font-size: 0.867em; /* 13 / 15 */
  color: var(--ink-soft);
  margin-top: 0.615em; /* 8 / 13 */
  font-style: italic;
  font-family: 'Google Sans Flex', sans-serif;
}
/* .balance-action : font-size 13, props / 13 */
.balance-action {
  display: block;
  width: 100%;
  margin-top: 1.231em; /* 16 / 13 */
  padding: 0.769em; /* 10 / 13 */
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 0.769em; /* 10 / 13 */
  font-size: 0.867em; /* 13 / 15 */
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}
.balance-action:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.method-list { display: flex; flex-direction: column; gap: 0.667em; } /* 10/15 */
/* .method-row : font-size 13 */
.method-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.769em 0.923em; /* 10 12 / 13 */
  background: var(--bg-soft);
  border-radius: 0.769em; /* 10 / 13 */
  font-size: 0.867em; /* 13 / 15 */
}
.method-info { display: flex; align-items: center; gap: 0.769em; } /* 10/13 (méthod-row context 13) */
.method-icon { width: 1.846em; height: 1.231em; border-radius: 3px; flex-shrink: 0; } /* 24/13 16/13 ; border-radius hairline */
.method-icon.account { background: linear-gradient(135deg, #2d6a4f, #5a7a3e); }
.method-icon.credit { background: linear-gradient(135deg, #1a4178, #2d6dbe); }
.method-icon.line_of_credit { background: linear-gradient(135deg, #6b4a7a, #8c6a9d); }
.method-icon.cash { background: linear-gradient(135deg, #c8842b, #a23b3b); }
.method-icon.investment { background: linear-gradient(135deg, #1a7a5d, #3a8c7a); }
/* .method-name : font-size 13 */
.method-name { font-weight: 500; font-size: 0.867em; } /* 13/15 */
/* .method-balance : font-size 13 */
.method-balance {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.867em; /* 13 / 15 */
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.method-balance.neg { color: var(--neg); }
.method-balance.pos { color: var(--pos); }

.upcoming-list { display: flex; flex-direction: column; gap: 0.8em; } /* 12/15 */
/* .upcoming-row : font-size 13, props / 13 */
.upcoming-row {
  display: grid;
  grid-template-columns: 2.462em 1fr auto; /* 32 / 13 */
  gap: 0.769em; /* 10 / 13 */
  align-items: center;
  font-size: 0.867em; /* 13 / 15 */
}
/* .upcoming-date : font-size 10, props / 10 */
.upcoming-date {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.667em; /* 10 / 15 */
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
}
/* .upcoming-date strong : font-size 16, props / 16 */
.upcoming-date strong {
  display: block;
  font-size: 1.6em; /* 16 / 10 (parent .upcoming-date est 10) */
  color: var(--ink);
  font-family: 'Google Sans Flex', sans-serif;
  font-weight: 500;
}
.upcoming-name { font-weight: 500; }
/* .upcoming-meta : font-size 11, props / 11 */
.upcoming-meta { font-size: 0.733em; color: var(--ink-muted); margin-top: 0.182em; } /* 11/15 ; 2/11 */
/* .upcoming-amount : font-size 13 */
.upcoming-amount {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.867em; /* 13 / 15 */
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ===== FAB Mobile ===== */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: 1.333em; /* 20 / 15 */
  right: 1.333em; /* 20 / 15 */
  width: 3.733em; /* 56 / 15 */
  height: 3.733em;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); /* shadow gardé en px (hairline-ish) */
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.mobile-fab svg { width: 1.467em; height: 1.467em; } /* 22/15 */
@media (max-width: 768px) {
  .mobile-fab { display: flex; }
  .quick-entry.collapsible { display: none; }
  .quick-entry.collapsible.open {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    border-radius: 1.067em 1.067em 0 0; /* 16 / 15 */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    margin-bottom: 0;
    max-height: 90vh;
    overflow-y: auto;
    padding-top: 3.733em; /* 56 / 15 */
  }
  .quick-entry.collapsible.open .qe-close { display: flex; align-items: center; justify-content: center; }
}

/* ===== Forms génériques ===== */
.form-field { margin-bottom: 1.067em; } /* 16 / 15 */
/* .form-field label : font-size 12, props / 12 */
.form-field label {
  display: block;
  font-size: 0.8em; /* 12 / 15 */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.5em; /* 6 / 12 */
  font-weight: 500;
}
/* inputs : font-size 14, props / 14 */
.form-field input[type=text],
.form-field input[type=number],
.form-field input[type=date],
.form-field input[type=password],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.714em 0.857em; /* 10 12 / 14 */
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 0.571em; /* 8 / 14 */
  font-family: inherit;
  font-size: 0.933em; /* 14 / 15 */
  color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form-field textarea { resize: vertical; min-height: 5.714em; } /* 80 / 14 */

.form-row { display: flex; gap: 0.8em; } /* 12 / 15 */
.form-row > .form-field { flex: 1; }

/* .btn : font-size 14, props / 14 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.429em; /* 6 / 14 */
  padding: 0.714em 1.286em; /* 10 18 / 14 */
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 0.714em; /* 10 / 14 */
  font-size: 0.933em; /* 14 / 15 */
  font-weight: 600;
}
.btn:hover { background: #2d2925; }
.btn-secondary { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--line-soft); }
.btn-danger { background: var(--neg); }
/* .btn-small : font-size 12, props / 12 */
.btn-small { padding: 0.5em 0.833em; font-size: 0.8em; } /* 6 10 / 12 ; 12/15 */

/* ===== Toast/notifs ===== */
/* .toast : font-size 14, props / 14 */
.toast {
  position: fixed;
  bottom: 6.429em; /* 90 / 14 */
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 0.857em 1.429em; /* 12 20 / 14 */
  border-radius: 999px;
  font-size: 0.933em; /* 14 / 15 */
  font-weight: 500;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: toastFade 3s ease forwards;
}

/* ===== Toggle d'attribution Moi/Conjoint ===== */
/* .attr-toggle : font-size 12, props / 12 */
.attr-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  padding: 0.167em; /* 2 / 12 */
  font-size: 0.8em; /* 12 / 15 */
  font-weight: 500;
}
/* .attr-btn : font-size inherit du parent .attr-toggle = 12 */
.attr-btn {
  background: transparent;
  border: none;
  padding: 0.333em 1em; /* 4 12 / 12 */
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.attr-btn:hover { color: var(--ink); }
.attr-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* ===== Affichage dual CAD + devise originale ===== */
.amt-main { display: inline; font-weight: inherit; }
/* .amt-orig : font-size 11, props / 11 */
.amt-orig {
  display: block;
  font-size: 0.733em; /* 11 / 15 */
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 0.091em; /* 1 / 11 */
}
.tx-row .amt-orig { text-align: right; }

.toast.error { background: var(--neg); }
.toast.success { background: var(--pos); }
@keyframes toastFade {
  0% { opacity: 0; transform: translate(-50%, 20px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,23,20,0.5);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.333em; /* 20 / 15 */
}
.modal {
  background: var(--bg-card);
  border-radius: 1.067em; /* 16 / 15 */
  padding: 1.6em; /* 24 / 15 */
  max-width: 33.333em; /* 500 / 15 */
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
/* .modal-title : font-size 22, props / 22 */
.modal-title {
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 1.467em; /* 22 / 15 */
  font-weight: 500;
  margin-bottom: 0.727em; /* 16 / 22 */
}
/* .modal-close : font-size 24 */
.modal-close {
  float: right;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 1.6em; /* 24 / 15 */
  line-height: 1;
}

/* Empty states */
.empty {
  text-align: center;
  padding: 2.667em 1.333em; /* 40 20 / 15 */
  color: var(--ink-muted);
}
.empty-icon { font-size: 2.133em; margin-bottom: 0.25em; } /* 32/15 ; 8/32 */
.empty-text { font-size: 0.933em; } /* 14 / 15 */

/* ===== Utility ===== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 0.533em; } /* 8 / 15 */
.gap-12 { gap: 0.8em; } /* 12 / 15 */
.mt-8 { margin-top: 0.533em; } /* 8 / 15 */
.mt-16 { margin-top: 1.067em; } /* 16 / 15 */
.mt-24 { margin-top: 1.6em; } /* 24 / 15 */
.mb-16 { margin-bottom: 1.067em; } /* 16 / 15 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none !important; }

/* ============================================================
   PROJECT CARD
   ============================================================ */
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 0.875em;
  padding: 1.25em;
}

/* Header */
.pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.125em;
}

.pc-titleblock {
  display: flex;
  align-items: center;
  gap: 0.625em;
}

.pc-title {
  font-size: 1.0625em;
  font-weight: 600;
  color: var(--ink);
}

.pc-tag {
  font-size: 0.625em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--project);
  padding: 0.2em 0.8em;
  background: rgba(107,74,122,0.12);
  border-radius: 0.4em;
}

.pc-manage {
  font-size: 0.75em;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  padding: 0.4167em 1em;
  border-radius: 0.5em;
  border: 1px solid var(--line);
  transition: all 0.12s;
}
.pc-manage:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

/* Total + rate */
.pc-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
  margin-bottom: 0.5em;
}

.pc-total-num {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.875em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pc-total-rate {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125em;
  color: var(--ink-soft);
  font-weight: 500;
}
.pc-total-rate .unit {
  color: var(--ink-muted);
  font-weight: 400;
}

/* ============================================================
   "À faire" — bloc temporaire ancré à gauche du sélecteur de mois
   ============================================================ */
.todo-pad {
  position: absolute;
  top: 0;
  right: calc(100% + 1em + 50px);
  width: 300px;
  padding: 0.9em 1em 0.8em 1em;
  background: linear-gradient(180deg, #fffdf6 0%, #fbf6e8 100%);
  border: 1px solid var(--line-soft);
  border-radius: 0.5em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 18px rgba(60, 50, 30, 0.06);
  transform: rotate(-1.2deg);
  transition: transform 0.2s ease;
}
.todo-pad::before {
  /* punaise décorative */
  content: '';
  position: absolute;
  top: -0.45em;
  left: 50%;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c97a5e, #8c3a25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}
.todo-pad:hover {
  transform: rotate(0deg);
}
.todo-pad-title {
  font-family: 'Tangerine', cursive;
  font-size: 2em;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-align: center;
  margin-bottom: 0.2em;
}
.todo-pad-textarea {
  width: 100%;
  min-height: 480px;
  padding: 0.5em 0.6em;
  border: none;
  outline: none;
  background: transparent;
  resize: vertical;
  font-family: 'Google Sans Flex', -apple-system, sans-serif;
  font-size: 0.933em;
  line-height: 1.55;
  color: var(--ink-soft);
  /* lignes de carnet */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.42em,
    rgba(140, 110, 70, 0.22) 1.42em,
    rgba(140, 110, 70, 0.22) calc(1.42em + 1px)
  );
  background-position: 0 1.2em;
}
.todo-pad-textarea::placeholder {
  color: var(--ink-muted);
  font-style: italic;
}
.todo-pad-status {
  margin-top: 0.3em;
  font-size: 0.75em;
  color: var(--ink-muted);
  text-align: right;
  min-height: 1em;
  font-family: 'JetBrains Mono', monospace;
}

/* ---------- Transaction : rangée de 4 drapeaux (cases à cocher) ---------- */
/* Cellules : sur écran large 4 colonnes ; sur étroit, wrap en 2 colonnes.   */
.tx-flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.533em; /* 8 / 15 */
}
.form-field label.tx-flag,
.tx-flag {
  flex: 1 1 9em; /* 135 / 15 — wrap quand < ~36em dispo */
  display: flex;
  flex-direction: column;
  gap: 0.267em; /* 4 / 15 */
  padding: 0.6em 0.733em; /* 9 11 / 15 */
  margin: 0; /* écrase .form-field label margin-bottom */
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 0.4em; /* 6 / 15 */
  cursor: pointer;
  font-size: 1em; /* écrase .form-field label font-size 0.8em */
  text-transform: none; /* écrase .form-field label uppercase */
  letter-spacing: 0;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.tx-flag:hover { background: var(--bg-softer); border-color: var(--line-soft); }
.tx-flag-head {
  display: flex;
  align-items: center;
  gap: 0.4em; /* 6 / 15 */
  font-weight: 500;
  font-size: 0.933em; /* 14 / 15 */
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.tx-flag-head input[type=checkbox] {
  flex: 0 0 auto;
  margin: 0;
  width: 1.067em; /* 16 / 15 */
  height: 1.067em;
  cursor: pointer;
}
.tx-flag-hint {
  font-size: 0.733em; /* 11 / 15 */
  color: var(--ink-muted);
  line-height: 1.35;
  margin: 0;
  /* aligné sous le label, pas sous la checkbox */
  padding-left: 1.467em; /* 16 + 6 = 22 / 15 */
}
.tx-flag input[type=checkbox]:checked ~ .tx-flag-hint,
.tx-flag:has(input[type=checkbox]:checked) {
  /* léger état actif : fond plus marqué quand cochée */
}
.tx-flag:has(input[type=checkbox]:checked) {
  background: var(--bg-softer);
  border-color: var(--line-soft);
}

/* ---------- Transaction : champ « Via (intermédiaire) » repliable ------- */
/* Visible déplié sur cat. de type Restaurant/Café/Épicerie, sinon bouton. */
.tx-sec-merchant-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.533em 0.8em; /* 8 12 / 15 */
  background: transparent;
  border: 1px dashed var(--line-soft);
  border-radius: 0.4em;
  color: var(--ink-muted);
  font-size: 0.8em; /* 12 / 15 */
  cursor: pointer;
  transition: all 0.15s ease;
}
.tx-sec-merchant-toggle:hover {
  background: var(--bg-soft);
  color: var(--ink);
  border-style: solid;
  border-color: var(--ink-muted);
}
.tx-sec-merchant-wrap[hidden] { display: none; }

/* ---------- Dashboard : Solde + Comptes côte à côte sous la saisie ------ */
/* 2 colonnes égales sous le bloc de saisie rapide. Wrap en 1 col sur écran  */
/* très étroit (sub-28em) pour rester lisible.                              */
.qe-balance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.667em; /* 10 / 15 */
  margin-top: 1.067em; /* 16 / 15 */
}
.qe-balance-row > .card {
  margin: 0; /* annule la marge inférieure standard du .card */
  min-width: 0; /* permet aux enfants longs de wrap au lieu de déborder */
}
@media (max-width: 28em) {
  .qe-balance-row { grid-template-columns: 1fr; }
}

/* Caché en-dessous d'un viewport assez large pour avoir de l'espace à gauche
   de la shell centrée (max-width ~85em + marges). */
@media (max-width: 1400px) {
  .todo-pad { display: none; }
}

.pc-total-sub {
  font-size: 0.75em;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: 1em;
}

/* Barre composite */
.pc-bar {
  position: relative;
  height: 1.125em;
  border-radius: 0.25em;
  background: var(--bg-soft);
  overflow: hidden;
  display: flex;
}

.pc-bar-paid-user1 { background: var(--project); }
.pc-bar-paid-user2 { background: #8c6a9d; }
.pc-bar-future-user1 {
  background: repeating-linear-gradient(45deg, rgba(107,74,122,0.35) 0 4px, rgba(107,74,122,0.18) 4px 8px);
}
.pc-bar-future-user2 {
  background: repeating-linear-gradient(45deg, rgba(140,106,157,0.35) 0 4px, rgba(140,106,157,0.18) 4px 8px);
}

.pc-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5em;
  font-size: 0.625em;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Personnes */
.pc-people {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 3.5em;
  margin-top: 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}

.pc-people-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line-soft);
  margin: 0.5em 0;
}

.pc-person {
  display: grid;
  grid-template-columns: 0.75em 1fr;
  gap: 0.75em;
  align-items: start;
}

.pc-person-dot {
  width: 0.75em;
  height: 0.75em;
  border-radius: 0.1875em;
  margin-top: 0.3125em;
}

.pc-person-name {
  font-size: 0.8125em;
  font-weight: 600;
}

.pc-person-total {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0.125em 0;
}

.pc-person-rate {
  font-size: 0.6875em;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: 0.5em;
}

.pc-person-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75em;
  padding: 0.125em 0;
}

.pc-person-row-label { color: var(--ink-muted); }

.pc-person-row-val {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-soft);
}

.pc-person-versements {
  font-size: 0.625em;
  color: var(--ink-muted);
  margin-left: 0.25em;
  font-style: italic;
}

/* Responsive : sur mobile, pas de divider, blocs empilés */
@media (max-width: 37.5em) {
  .pc-people {
    grid-template-columns: 1fr;
    gap: 1.5em;
    padding-top: 1em;
  }
  .pc-people-divider {
    display: none;
  }
}