@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ═══════════════════════════════════════════
   MODALE DE CONFIRMATION
   ═══════════════════════════════════════════ */

.modal-confirm-text {
  font-size: .95rem;
  color: var(--ink);
  text-align: center;
  line-height: 1.6;
  padding: 8px 0;
  white-space: pre-line;
}

.modal-confirm-buttons {
  display: flex;
  gap: 10px;
  padding: 0 24px 20px;
}

.modal-confirm-btn-cancel {
  flex: 1;
  padding: 11px;
  border-radius: 14px;
  border: 1.5px solid var(--gray-l);
  background: var(--bg);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: transform .15s;
}

.modal-confirm-btn-ok {
  flex: 1;
  padding: 11px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--glow);
  transition: transform .15s;
}

.modal-confirm-btn-ok.danger {
  background: linear-gradient(135deg, var(--coral-m), var(--coral));
  box-shadow: 0 4px 16px var(--coral-glow);
}

.modal-confirm-btn-cancel:active { opacity: .8; }
.modal-confirm-btn-ok:active { opacity: .85; }


/* ═══════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════ */

#onboardingOverlay {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#onboardingTrack {
  display: flex;
  flex: 1;
  width: 400%; /* 4 écrans */
  will-change: transform;
  transition: transform .3s cubic-bezier(.25, .46, .45, .94);
}

#onboardingTrack.dragging {
  transition: none;
}

.onboarding-screen {
  width: calc(100% / 4); /* 1/4 du track = 100% de l'overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px 20px;
  overflow-y: auto;
}

.onboarding-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 360px;
}

.onboarding-logo {
  display: block;
  margin: 0 auto 16px;
  width: 100%;
  max-width: 240px;
  height: auto;
}

.onboarding-title {
  font-family: 'Lora', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue-text);
  text-align: center;
  line-height: 1.2;
}

.onboarding-subtitle {
  font-family: 'Lora', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blue-text);
  text-align: center;
}

.onboarding-text {
  font-size: .95rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.onboarding-text-muted {
  font-size: .82rem;
  color: var(--muted);
}

/* Étapes */
.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--blue-l);
  border-radius: 16px;
  padding: 14px 16px;
}

.onboarding-step-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.onboarding-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onboarding-step-text strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}

.onboarding-step-text span {
  font-size: .75rem;
  color: var(--muted);
}

/* Navigation bas */
.onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px calc(20px + env(safe-area-inset-bottom));
  gap: 16px;
}

.onboarding-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--blue-l);
  transition: width .2s ease, background .2s ease;
}

.onboarding-dot.active {
  width: 22px;
  background: var(--blue);
}

.onboarding-skip {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 4px;
  min-width: 60px;
}

.onboarding-next {
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  border: none;
  border-radius: 99px;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  padding: 12px 24px;
  min-width: 100px;
  box-shadow: 0 4px 16px var(--glow);
}

.onboarding-next:active { opacity: .85; }

/* ============================================================
   MON BUDGET TRANQUILLE — V2 — style.css
   9 pages · 6 nav icons · Swipe · Thème bleu
   ============================================================ */

:root {
  --header-angle: 145deg;
  --blue: #3a78c9;
  --blue-m: #6ba4eb;
  --blue-l: #a8d5f7;
  --blue-l2: #d0e8fc;
  --blue-xl: #e8f3fd;
  --blue-text: #1a3f7a;
  --grad-start: #a8d5f7;
  --grad-end: #d5c8f7;
  --glow: rgba(58, 120, 201, .1);
  --bg: #FEFEFE;
  --bg-card: #FFFFFF;
  --bg-soft: #f0f2f5;
  --ink: #1c1e1c;
  --ink-soft: #3a3e3c;
  --muted: #6e7470;
  --radius: 18px;
  --radius-sm: 14px;
  --px: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-height: 62px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  height: 100%;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Lora', serif; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }
input::placeholder { color: var(--blue-l); }

/* ── App Shell ── */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 501px) {
  .app {
    border-left: 2px solid var(--blue-m);
    border-right: 2px solid var(--blue-m);
    box-shadow: 0 0 80px rgba(58, 120, 201, .08);
  }
}

/* ── Page Dots ── */

.page-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: background .3s, transform .2s;
  cursor: pointer;
}

.dot.active {
  transform: scale(1.3);
}

/* Couleur du dot actif par page */
[data-page="0"] .dot.active { background: var(--blue); }
[data-page="1"] .dot.active { background: var(--rainbow); }
[data-page="2"] .dot.active { background: var(--green-e); }
[data-page="3"] .dot.active { background: var(--coral); }
[data-page="4"] .dot.active { background: var(--gold); }
[data-page="5"] .dot.active { background: var(--orange); }
[data-page="6"] .dot.active { background: var(--teal); }
[data-page="7"] .dot.active { background: var(--blue); }
[data-page="8"] .dot.active { background: var(--violet); }
[data-page="9"] .dot.active { background: var(--rose); }
[data-page="10"] .dot.active { background: var(--gray); }

/* ── Swipe System ── */

.swipe-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.swipe-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .3s cubic-bezier(.25, .46, .45, .94);
  background: var(--bg);
}

.swipe-track.dragging {
  transition: none;
}

.page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top Bar ── */

.top-bar {
  position: relative;
  height: calc(76px + var(--safe-top));
  flex-shrink: 0;
  overflow: hidden;
}

.top-bar-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--header-angle), var(--grad-start) 0%, var(--grad-end) 100%);
  z-index: 0;
}

.top-bar-bg::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  top: -70px;
  right: -30px;
}

.top-bar-bg::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  bottom: -30px;
  left: 20px;
}

.top-bar-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-top) var(--px) 0;
  height: 100%;
}

.top-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--blue-text);
  text-align: right;
}

.top-spacer {
  width: 36px;
}

/* Cadre Total sous la top bar (même style que card-montant) */
.total-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  margin-bottom: 12px;
  text-align: center;
}

.total-card-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.total-card-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.total-card-value {
  font-family: 'Lora', serif;
  font-size: 2.4rem;
  font-weight: 700;
}

.total-card-euro {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: .65;
}

.total-card-line {
  width: 50%;
  height: 2px;
  border-radius: 99px;
  margin: 6px auto 0;
}

/* Variantes couleurs */
.total-card-green {
  border: 1.5px solid var(--green-el);
  box-shadow: 0 4px 16px var(--green-glow);
}
.total-card-green .total-card-label { color: var(--green-text); }
.total-card-green .total-card-value { color: var(--green-e); }
.total-card-green .total-card-euro { color: var(--green-em); }
.total-card-green .total-card-line { background: linear-gradient(90deg, transparent, var(--green-em), transparent); }

.total-card-coral {
  border: 1.5px solid var(--coral-l);
  box-shadow: 0 4px 16px var(--coral-glow);
}
.total-card-coral .total-card-label { color: var(--coral-text); }
.total-card-coral .total-card-value { color: var(--coral); }
.total-card-coral .total-card-euro { color: var(--coral-m); }
.total-card-coral .total-card-line { background: linear-gradient(90deg, transparent, var(--coral-m), transparent); }

.total-card-orange {
  border: 1.5px solid var(--orange-l);
  box-shadow: 0 4px 16px var(--orange-glow);
}
.total-card-orange .total-card-label { color: var(--orange-text); }
.total-card-orange .total-card-value { color: var(--orange); }
.total-card-orange .total-card-euro { color: var(--orange-m); }
.total-card-orange .total-card-line { background: linear-gradient(90deg, transparent, var(--orange-m), transparent); }

.total-card-blue {
  border: 1.5px solid var(--blue-l);
  box-shadow: 0 4px 16px var(--glow);
}
.total-card-blue .total-card-label { color: var(--blue-text); }
.total-card-blue .total-card-value { color: var(--blue); }
.total-card-blue .total-card-euro { color: var(--blue-m); }
.total-card-blue .total-card-line { background: linear-gradient(90deg, transparent, var(--blue-m), transparent); }

/* ── Page Scroll ── */

.page-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px var(--px);
  padding-bottom: 20px;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
  overscroll-behavior: contain;
}

.page-scroll::-webkit-scrollbar { width: 3px; }
.page-scroll::-webkit-scrollbar-thumb { background: var(--scroll-color, var(--blue-m)); border-radius: 99px; }

/* Scrollbar couleur par page */
[data-page="0"] .page-scroll { --scroll-color: var(--blue-m); }
[data-page="1"] .page-scroll { --scroll-color: var(--violet-m); }
[data-page="2"] .page-scroll { --scroll-color: var(--green-em); }
[data-page="3"] .page-scroll { --scroll-color: var(--coral-m); }
[data-page="4"] .page-scroll { --scroll-color: var(--gold-m); }
[data-page="5"] .page-scroll { --scroll-color: var(--orange-m); }
[data-page="6"] .page-scroll { --scroll-color: var(--teal-m); }
[data-page="7"] .page-scroll { --scroll-color: var(--blue-m); }
[data-page="8"] .page-scroll { --scroll-color: var(--violet-m); }
[data-page="9"] .page-scroll { --scroll-color: var(--rose-m); }
[data-page="10"] .page-scroll { --scroll-color: var(--gray-m); }

/* ── Cards ── */

.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 18px;
  border: 1.5px solid var(--blue-l);
  box-shadow: 0 4px 16px var(--glow);
  margin-bottom: 8px;
}

.card-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--blue-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

/* ── Montant ── */

.card-montant {
  text-align: center;
  padding: 16px 18px 14px;
  margin-bottom: 12px;
}

.montant-input-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.montant-input {
  background: transparent;
  border: none;
  outline: none;
  text-align: right;
  font-family: 'Lora', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--blue);
  width: 4ch;
  min-width: 4ch;
  max-width: 70%;
  caret-color: var(--blue);
}

.montant-input::placeholder { color: var(--blue-l); }

/* Placeholders colorés par thème de modale */
.text-input-green::placeholder { color: var(--green-el); }
.text-input-coral::placeholder { color: var(--coral-l); }
.text-input-orange::placeholder { color: var(--orange-l); }
.text-input-gold::placeholder { color: var(--gold-l); }
.text-input-teal::placeholder { color: var(--teal-l); }

/* Traits (border-bottom) colorés au repos */
.text-input-green { border-bottom-color: var(--green-el); }
.text-input-coral { border-bottom-color: var(--coral-l); }
.text-input-orange { border-bottom-color: var(--orange-l); }
.text-input-gold { border-bottom-color: var(--gold-l); }
.text-input-teal { border-bottom-color: var(--teal-l); }

/* Inputs sans classe couleur dans une modale colorée (ex: sous-modale catégorie) */
.modal-green .text-input { border-bottom-color: var(--green-el); }
.modal-green .text-input::placeholder { color: var(--green-el); }
.modal-green .text-input:focus { border-bottom-color: var(--green-em); }
.modal-coral .text-input { border-bottom-color: var(--coral-l); }
.modal-coral .text-input::placeholder { color: var(--coral-l); }
.modal-coral .text-input:focus { border-bottom-color: var(--coral-m); }
.modal-orange .text-input { border-bottom-color: var(--orange-l); }
.modal-orange .text-input::placeholder { color: var(--orange-l); }
.modal-orange .text-input:focus { border-bottom-color: var(--orange-m); }
.modal-gold .text-input { border-bottom-color: var(--gold-l); }
.modal-gold .text-input::placeholder { color: var(--gold-l); }
.modal-gold .text-input:focus { border-bottom-color: var(--gold-m); }
.modal-teal .text-input { border-bottom-color: var(--teal-l); }
.modal-teal .text-input::placeholder { color: var(--teal-l); }
.modal-teal .text-input:focus { border-bottom-color: var(--teal-m); }

.montant-euro {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-m);
  opacity: .65;
}

.montant-line {
  width: 50%;
  height: 2px;
  border-radius: 99px;
  margin: 6px auto 0;
  background: linear-gradient(90deg, transparent, var(--blue-m), transparent);
}

/* ── Text Input ── */

.text-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: .85rem;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1.5px solid var(--blue-l2);
  background: transparent;
  transition: border-color .25s;
}

.text-input:focus { border-bottom-color: var(--blue-m); }

/* ── Chips ── */

.chips {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 2px 4px;
  max-height: 135px;
}
/* Page 0 : 2 lignes de chips */
[data-page="0"] .chips { max-height: 90px; }
.chips::-webkit-scrollbar { display: none; }
.chips-row-wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  min-width: max-content;
}
.chips-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
}

/* Chips dans les modales : même layout naturel */
.modal-body .chips {
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  padding: 2px 2px 2px 4px;
}
.modal-body .chips::-webkit-scrollbar { display: none; }

.modal-chips-add {
  margin-top: 8px;
  padding-left: 4px;
}
.modal-chips-add .chip-add,
.modal-chips-add .chip-green.chip-add,
.modal-chips-add .chip-coral.chip-add,
.modal-chips-add .chip-orange.chip-add {
  font-size: .82rem;
  padding: 9px 16px;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  padding: 7px 11px 7px 13px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  background: var(--bg-card);
  color: var(--blue-text);
  border: 1.5px solid var(--blue-l);
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chip:active { transform: scale(.95); }

.chip.selected {
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 4px 14px var(--glow);
  transform: scale(1.04);
}

.chip-delete,
.chip-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: .6rem;
  background: rgba(0, 0, 0, .08);
  color: var(--muted);
  transition: all .2s;
  flex-shrink: 0;
  line-height: 1;
}

.chip-edit { font-size: .55rem; }

.chip-delete:active { background: rgba(212, 96, 58, .25); color: var(--coral); transform: scale(1.15); }
.chip-edit:active { background: rgba(58, 120, 201, .2); color: var(--blue); transform: scale(1.15); }

.chip.selected .chip-delete,
.chip.selected .chip-edit { background: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .8); }

.chip-add {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all .25s;
  border: 1.5px dashed var(--blue-m);
  background: var(--blue-xl);
  color: var(--blue);
  user-select: none;
  -webkit-user-select: none;
}

.chip-add:active { transform: scale(.95); background: var(--blue-l2); }

/* chip-add dans une modale : même taille */
.chip.chip-add { padding: 9px 16px; }

/* Chip color variants */
.chip.chip-green { color: var(--green-e); border-color: var(--green-el); }
.chip.chip-green.selected { background: linear-gradient(135deg, var(--green-em), var(--green-e)); border-color: var(--green-e); color: #fff; box-shadow: 0 4px 14px var(--green-glow); }
.chip-green.chip-add { border-color: var(--green-em); background: var(--green-exl); color: var(--green-e); }
.chip-green.chip-add:active { background: var(--green-el2); }

.chip.chip-coral { color: var(--coral); border-color: var(--coral-l); }
.chip.chip-coral.selected { background: linear-gradient(135deg, var(--coral-m), var(--coral)); border-color: var(--coral); color: #fff; box-shadow: 0 4px 14px var(--coral-glow); }
.chip-coral.chip-add { border-color: var(--coral-m); background: var(--coral-exl); color: var(--coral); }
.chip-coral.chip-add:active { background: var(--coral-l2); }

.chip.chip-orange { color: var(--orange); border-color: var(--orange-l); }
.chip.chip-orange.selected { background: linear-gradient(135deg, var(--orange-m), var(--orange)); border-color: var(--orange); color: #fff; box-shadow: 0 4px 14px var(--orange-glow); }
.chip-orange.chip-add { border-color: var(--orange-m); background: var(--orange-exl); color: var(--orange); }
.chip-orange.chip-add:active { background: var(--orange-l); }

/* ── Pay Grid ── */

.pay-grid { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.pay-grid::-webkit-scrollbar { display: none; }

.pay-card {
  width: 72px;
  flex-shrink: 0;
  padding: 10px 8px 8px;
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  background: var(--bg-card);
  border: 2px solid var(--blue-l);
  user-select: none;
  -webkit-user-select: none;
}

.pay-card:active { opacity: .8; }

.pay-card.selected {
  border-color: var(--blue);
  background: var(--bg-card);
}

.pay-icon { margin-bottom: 3px; display: flex; align-items: center; justify-content: center; min-height: 22px; }
.pay-svg { width: 26px; height: 17px; }
.pay-svg-lg { width: 36px; height: 24px; }
.pay-name { font-size: .66rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pay-card.selected .pay-name { color: var(--blue); }
.pay-sub { display: none; }

/* ── Date Card ── */

.card-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-left { display: flex; flex-direction: column; }

.date-value { font-size: .85rem; color: var(--ink); font-weight: 500; }

/* Habitudes — raccourcis dépenses fréquentes */
.habits-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}
.habits-chips::-webkit-scrollbar { display: none; }
.habit-chip {
  padding: 7px 12px;
  border-radius: 99px;
  border: 1.5px solid var(--blue-l);
  background: var(--bg-card);
  font-size: .75rem;
  font-weight: 600;
  color: var(--blue-text);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.habit-chip:active {
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: #fff;
  border-color: var(--blue);
}

/* Cards rétractables */
.card-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.card-toggle-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-toggle-value {
  font-size: .85rem;
  color: var(--ink);
  font-weight: 500;
}
.card-toggle-arrow {
  font-size: 1.1rem;
  color: var(--muted);
  display: inline-block;
  transform: rotate(-90deg);
  line-height: 1;
  padding: 4px;
}
.card-collapsible.collapsed .card-toggle-arrow {
  transform: rotate(90deg);
}
/* Animation fluide via grid */
.card-collapsible-body-outer {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease;
  overflow: hidden;
}
.card-collapsible.collapsed .card-collapsible-body-outer {
  grid-template-rows: 0fr;
}
.card-collapsible-body {
  overflow: hidden;
  padding-top: 10px;
}
.card-collapsible .card-label {
  cursor: pointer;
  margin-bottom: 0;
}

.date-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1.5px solid var(--blue-l);
  background: linear-gradient(135deg, rgba(168, 213, 247, .25), rgba(213, 200, 247, .25));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform .15s;
}

.date-btn:active { transform: scale(.9); }

/* ── Primary Button ── */

.btn-primary {
  width: 100%;
  padding: 17px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: #fff;
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 8px 28px var(--glow), 0 2px 8px rgba(58, 120, 201, .15);
  transition: all .2s;
  margin-top: 8px;
  margin-bottom: 12px;
}

.btn-primary:active {
  transform: scale(.97);
  box-shadow: 0 4px 16px var(--glow);
}

/* ── Bottom Nav ── */

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 4px;
  padding-bottom: calc(6px + var(--safe-bottom));
  border-top: none;
  background: var(--bg);
  flex-shrink: 0;
  min-height: 56px;
  position: relative;
  z-index: 90;
}

/* Cacher la bottom-nav quand le clavier Android est ouvert
   (elle remonte au-dessus du clavier à cause d'adjustResize sinon) */
body.keyboard-open .bottom-nav { display: none; }

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  position: relative;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s;
  flex: 1;
  min-width: 0;
}

.nav-btn:active { transform: scale(.88); }
.nav-icon { font-size: 1rem; line-height: 1; }
.nav-label { font-size: .56rem; font-weight: 500; color: var(--muted); transition: all .25s; }
.nav-btn.active .nav-label { font-weight: 700 }

.nav-indicator {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 0 0 99px 99px;
}

/* ── Popover Données ── */

.donnees-popover {
  position: fixed;
  bottom: calc(62px + var(--safe-bottom) + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-card);
  border: 1.5px solid var(--gray-l, #d1d5db);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  padding: 6px 4px;
  z-index: 91;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.donnees-popover.open {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.donnees-popover-items {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.donnees-popover-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s;
  flex: 1;
  min-width: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.donnees-popover-btn:active { transform: scale(.88); }
/* Barre indicateur active — colorée par JS via --pop-color */
.donnees-popover-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: var(--pop-color, transparent);
}
.donnees-popover-icon { font-size: 1rem; line-height: 1; }
.donnees-popover-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .56rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* Flèche vers le bas — positionnée par JS */
.donnees-popover-arrow {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 7px;
  overflow: hidden;
}
.donnees-popover-arrow::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--gray-l, #d1d5db);
  border-radius: 0 0 2px 0;
}

.donnees-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: none;
}
.donnees-popover-backdrop.open { display: block; }

/* ── Modal ── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: layout style paint;
  overscroll-behavior: contain;
}

.modal-overlay.open { opacity: 1; pointer-events: auto; }

#modalSubCat { z-index: 150; }
#modalOverlay  { z-index: 150; }

.modal {
  background: var(--bg-card);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 500px;
  padding: 20px var(--px) calc(20px + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  border-top: 2px solid var(--blue-m);
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
}

.modal-overlay.open .modal { transform: translate3d(0,0,0); }
#modalBilan.open .modal-bilan { animation: bilanSpring .65s cubic-bezier(.4,0,.2,1) forwards; }


.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

.modal-title { font-size: 1.05rem; font-weight: 700; color: var(--blue-text); }

.modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid var(--blue-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--muted);
}

.modal-close:active { background: var(--blue-l); transform: scale(.9); }
.modal-body { margin-bottom: 18px; }
.modal-body .card-label { margin-bottom: 6px; }

.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 4px;
}

.icon-picker::-webkit-scrollbar { width: 3px; }
.icon-picker::-webkit-scrollbar-thumb { background: var(--picker-accent, var(--blue-m)); border-radius: 99px; }

.icon-option {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  border: 1.5px solid var(--picker-accent-light, var(--blue-l));
  background: var(--bg-card);
  transition: all .2s;
  user-select: none;
  -webkit-user-select: none;
}

.icon-option:active { transform: scale(.9); }

.icon-option.selected {
  border-color: var(--picker-accent, var(--blue));
  background: var(--picker-accent-bg, linear-gradient(135deg, var(--grad-start), var(--grad-end)));
  box-shadow: 0 4px 12px var(--picker-glow, var(--glow));
  transform: scale(1.08);
}


/* ═══ Dépenses du Mois ═══ */

.month-nav { display: flex; align-items: center; gap: 8px; }

.month-arrow {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--blue-text);
  border: 1px solid rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: transform .15s;
}

.month-arrow:active { transform: scale(.88); background: rgba(255, 255, 255, .65); }

.month-display { display: flex; flex-direction: column; align-items: center; min-width: 100px; }

.month-label { font-family: 'Lora', serif; font-size: 1.1rem; font-weight: 700; color: var(--blue-text); }

.year-label { font-size: .65rem; font-weight: 600; color: var(--blue-text); opacity: .6; letter-spacing: .06em; }

.top-total { display: flex; flex-direction: column; align-items: flex-end; }

.top-total-label { font-size: .6rem; font-weight: 600; color: var(--blue-text); opacity: .6; text-transform: uppercase; letter-spacing: .06em; }

.top-total-value { font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 700; color: var(--blue-text); }

.resume-bar { display: flex; gap: 8px; margin-bottom: 14px; }

.resume-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--blue-l);
  box-shadow: 0 3px 12px var(--glow);
}

.resume-item-value { font-family: 'Lora', serif; font-size: .82rem; font-weight: 700; color: var(--blue); }
.resume-item-label { font-size: .6rem; font-weight: 500; color: var(--muted); margin-top: 2px; }

.filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar { display: none; }

.filter-chip {
  padding: 7px 14px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  border: 1.5px solid var(--blue-l);
  background: var(--bg-card);
  color: var(--blue-text);
  transition: all .25s;
  user-select: none;
  -webkit-user-select: none;
}

.filter-chip:active { transform: scale(.95); }

.filter-chip.selected {
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 3px 12px var(--glow);
}

.date-group { margin-bottom: 6px; }

.date-header { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; }

.date-header-label { font-family: 'Lora', serif; font-size: .78rem; font-weight: 700; color: var(--blue); white-space: nowrap; }

.date-header-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--blue-l), transparent); }

.date-header-total { font-size: .68rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.depense-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--blue-l);
  box-shadow: 0 2px 10px var(--glow);
  margin-bottom: 8px;
  transition: transform .15s;
  cursor: pointer;
}

.depense-row:active { transform: scale(.98); }

.depense-cat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  border: 1.5px solid var(--blue-l);
  flex-shrink: 0;
}

.depense-info { flex: 1; min-width: 0; }
.depense-name { font-size: .82rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depense-cat-label { font-size: .66rem; color: var(--muted); margin-top: 2px; }
.depense-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.depense-amount { font-family: 'Lora', serif; font-size: .95rem; font-weight: 700; color: var(--blue); }
.depense-pay { font-size: .85rem; margin-top: 2px; display: flex; align-items: center; }
.depense-pay .pay-svg { width: 19px; height: 13px; }
.depense-pay .pay-svg-lg { width: 23px; height: 15px; }

.empty-state {
  text-align: center;
  padding: 40px 28px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty-icon {
  font-size: 3.4rem;
  margin-bottom: 18px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
}
.empty-text {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue-text);
  margin-bottom: 10px;
}
.empty-sub {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 260px;
  margin: 0 auto;
}

.btn-copy-month {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.btn-copy-month:active { opacity: .8; }

/* ── Placeholders ── */

.placeholder-state { text-align: center; padding: 80px 20px; }
.placeholder-icon { font-size: 3.5rem; margin-bottom: 16px; }
.placeholder-text { font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 700; color: var(--blue-text); margin-bottom: 6px; }
.placeholder-sub { font-size: .82rem; color: var(--muted); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════
   RÉSUMÉ — Modale Détail centrée
   ═══════════════════════════════════════════ */

/* Overlay centré (écrase le comportement bottom-sheet) */
.modal-overlay-center {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay-center .modal-detail-resume {
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  transform: scale(0.8);
  opacity: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
  border-top: none;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

#modalResumeDetailClose {
  border: 1.5px solid;
  border-radius: 10px;
  padding: 4px 8px;
  background: transparent;
  cursor: pointer;
  font-size: .85rem;
  margin-bottom: 8px;
}

.modal-overlay-center.open .modal-detail-resume {
  transform: scale(1);
  opacity: 1;
}

.modal-detail-body {
  overflow-y: auto;
  padding: 4px 20px 20px;
  flex: 1;
}

/* Lignes de détail */
.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-l2);
}
.detail-row:last-child { border-bottom: none; }

.detail-row-left { flex: 1; min-width: 0; }
.detail-row-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-row-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
}
.detail-row-amount {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 12px;
}
.detail-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 4px;
  margin-top: -1px;
  border-top: 2px solid var(--gray-l2);
}
.detail-total-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.detail-total-amount {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
}
.detail-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--muted);
  font-size: .85rem;
}

/* Effets de pression manquants */
.resume-row:active { transform: scale(.97); }
.resume-prev-month-card:active { transform: scale(.97); }
.modal-confirm-btn-cancel:active { opacity: .8; transform: scale(.97); }
.modal-confirm-btn-ok:active { opacity: .85; transform: scale(.97); }
.settings-link:active { background: var(--gray-l2); transform: scale(.98); }

/* ═══════════════════════════════════════════
   REVENUS — Thème vert émeraude
   ═══════════════════════════════════════════ */

:root {
  --green-e: #2e9e6b;
  --green-em: #5ec49a;
  --green-el: #b2e5d0;
  --green-el2: #d6f2e6;
  --green-exl: #eaf8f1;
  --green-et: #1a5e3f;
  --green-grad1: #b2e5d0;
  --green-grad2: #a8d5f7;
  --green-glow: rgba(46, 158, 107, .1);
}

.top-bar-green {
  background: linear-gradient(var(--header-angle), var(--green-grad1) 0%, var(--green-grad2) 100%) !important;
}

.month-arrow-green {
  color: var(--green-et) !important;
}

.green-text {
  color: var(--green-et) !important;
}

/* Résumé revenus */
.revenus-resume {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.rev-resume-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--green-el);
  box-shadow: 0 3px 12px var(--green-glow);
}

.rev-resume-value {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--green-e);
}

.rev-resume-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* Revenu row */
.revenu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--green-el);
  box-shadow: 0 2px 10px var(--green-glow);
  margin-bottom: 8px;
  transition: transform .15s;
  cursor: pointer;
}

.revenu-row:active {
  transform: scale(.98);
}

.revenu-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--green-grad1), var(--green-grad2));
  border: 1.5px solid var(--green-el);
  flex-shrink: 0;
}

.revenu-info {
  flex: 1;
  min-width: 0;
}

.revenu-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revenu-type {
  font-size: .66rem;
  color: var(--muted);
  margin-top: 2px;
}

.revenu-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.revenu-amount {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--green-e);
}

.revenu-freq {
  font-size: .6rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Bouton ajouter revenu */
.btn-add-revenu {
  width: 100%;
  padding: 17px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Lora', serif;
  color: #fff;
  background: linear-gradient(135deg, var(--green-em), var(--green-e));
  box-shadow: 0 8px 28px var(--green-glow), 0 2px 8px rgba(46, 158, 107, .15);
  margin-top: 8px;
  margin-bottom: 12px;
  transition: all .2s;
  letter-spacing: .02em;
}

.btn-add-revenu:active {
  transform: scale(.97);
  box-shadow: 0 4px 16px var(--green-glow);
}

/* Modal verte */
.modal-green {
  border-top: 2px solid var(--green-em) !important;
}

.modal-close-green {
  border-color: var(--green-el) !important;
}

.modal-close-green:active {
  background: var(--green-el) !important;
}

.green-label {
  color: var(--green-et) !important;
}

.text-input-green:focus {
  border-bottom-color: var(--green-em) !important;
}

.btn-green {
  background: linear-gradient(135deg, var(--green-em), var(--green-e)) !important;
  box-shadow: 0 8px 28px var(--green-glow), 0 2px 8px rgba(46, 158, 107, .15) !important;
}

/* Type row (Mensuel / Ponctuel) */
.rev-type-row {
  display: flex;
  gap: 8px;
}

.rev-type-chip {
  flex: 1;
  padding: 9px 12px;
  border-radius: 99px;
  font-size: .76rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid var(--green-el);
  background: var(--bg-card);
  color: var(--green-et);
  transition: all .25s;
  user-select: none;
  -webkit-user-select: none;
}

.rev-type-chip:active {
  transform: scale(.95);
}

.rev-type-chip.selected {
  background: linear-gradient(135deg, var(--green-em), var(--green-e));
  color: #fff;
  border-color: var(--green-e);
  box-shadow: 0 3px 12px var(--green-glow);
}

/* ── Row action buttons (shared) ── */

.row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 4px;
}

.row-edit,
.row-delete {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  background: rgba(0, 0, 0, .06);
  color: var(--muted);
  flex-shrink: 0;
  cursor: pointer;
  transition: all .2s;
  line-height: 1;
}
.row-delete-confirm {
  background: var(--violet) !important;
  color: #fff !important;
  border-color: var(--violet) !important;
}

.row-edit:active {
  background: rgba(58, 120, 201, .2);
  color: var(--blue);
  transform: scale(1.15);
}

.row-delete:active {
  background: rgba(212, 96, 58, .25);
  color: var(--coral);
  transform: scale(1.15);
}

/* ── Edit modal mini-chips ── */

.edit-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.edit-chip {
  padding: 6px 12px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--blue-l);
  background: var(--bg-card);
  color: var(--blue-text);
  transition: all .2s;
  user-select: none;
  -webkit-user-select: none;
}

.edit-chip:active { transform: scale(.95); }

.edit-chip.selected {
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: #fff;
  border-color: var(--blue);
}

.edit-chip.edit-chip-add {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-style: dashed;
  border-color: var(--blue-m);
  color: var(--blue);
  background: var(--blue-xl);
}

/* Green icon picker */
.modal-green {
  --picker-accent: var(--green-e);
  --picker-accent-light: var(--green-el);
  --picker-accent-bg: linear-gradient(135deg, var(--green-grad1), var(--green-grad2));
  --picker-glow: var(--green-glow);
}


/* ═══════════════════════════════════════════
   PRÉLÈVEMENTS — Thème coral
   ═══════════════════════════════════════════ */

:root {
  --coral: #d4603a;
  --coral-m: #e88a6a;
  --coral-l: #f5c4b0;
  --coral-l2: #fae0d6;
  --coral-exl: #fdf0eb;
  --coral-text: #7a2e1a;
  --coral-grad1: #f5c4b0;
  --coral-grad2: #f7c8b8;
  --coral-glow: rgba(212, 96, 58, .1);
}

.top-bar-coral {
  background: linear-gradient(var(--header-angle), var(--coral-grad1) 0%, var(--coral-grad2) 100%) !important;
}

.month-arrow-coral { color: var(--coral-text) !important; }
.coral-text { color: var(--coral-text) !important; }

/* Résumé prélèvements */
.prelev-resume {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.prelev-resume-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--coral-l);
  box-shadow: 0 3px 12px var(--coral-glow);
}

.prelev-resume-value {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--coral);
}

.prelev-resume-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* Prélèvement row */
.prelev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--coral-l);
  box-shadow: 0 2px 10px var(--coral-glow);
  margin-bottom: 8px;
  transition: transform .15s;
  cursor: pointer;
}

.prelev-row:active { transform: scale(.98); }

.prelev-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--coral-grad1), var(--coral-grad2));
  border: 1.5px solid var(--coral-l);
  flex-shrink: 0;
}

.prelev-info { flex: 1; min-width: 0; }

.prelev-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prelev-cat {
  font-size: .66rem;
  color: var(--muted);
  margin-top: 2px;
}

.prelev-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.prelev-amount {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--coral);
}

.prelev-day {
  font-size: .6rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Statut prélevé / à venir */
.prelev-status {
  font-size: .58rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: .02em;
}

.prelev-status.done {
  background: var(--green-exl);
  color: var(--green-e);
  border: 1px solid var(--green-el);
}

.prelev-row.done {
  opacity: .35;
  border-color: var(--gray-l);
  box-shadow: none;
}
.prelev-row.done .prelev-icon {
  background: var(--gray-exl);
  border-color: var(--gray-l);
}
.prelev-row.done .prelev-amount { color: var(--muted); }

.prelev-status.upcoming {
  background: var(--coral-exl);
  color: var(--coral);
  border: 1px solid var(--coral-l);
}


/* Toggle Mensuel / Annuel */
.prelev-freq-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.prelev-freq-btn {
  flex: 1;
  padding: 10px 6px;
  border-radius: 12px;
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg);
  border: 1.5px solid var(--coral-l);
  color: var(--muted);
  transition: all .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.prelev-freq-btn .freq-icon {
  font-size: 1.15rem;
  line-height: 1;
}
.prelev-freq-btn.active {
  background: linear-gradient(135deg, var(--coral-grad1), var(--coral-grad2));
  border-color: var(--coral);
  color: var(--coral);
}

/* Badge Annuel */
.prelev-annual-badge {
  display: inline-block;
  font-size: .55rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--orange-exl);
  color: var(--orange);
  border: 1px solid var(--orange-l);
  margin-left: 4px;
  vertical-align: middle;
}
.prelev-quarterly-badge {
  background: var(--violet-exl);
  color: var(--violet);
  border-color: var(--violet-l);
}

/* Rappel échéance */
.prelev-rappel {
  margin-bottom: 10px;
}
.prelev-rappel-item {
  font-size: .78rem;
  color: var(--ink-soft);
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1.5px solid var(--orange-l);
  margin-bottom: 6px;
}

/* Bouton ajouter prélèvement */
.btn-add-prelev {
  width: 100%;
  padding: 17px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Lora', serif;
  color: #fff;
  background: linear-gradient(135deg, var(--coral-m), var(--coral));
  box-shadow: 0 8px 28px var(--coral-glow), 0 2px 8px rgba(212, 96, 58, .15);
  margin-top: 8px;
  margin-bottom: 12px;
  transition: all .2s;
  letter-spacing: .02em;
}

.btn-add-prelev:active {
  transform: scale(.97);
  box-shadow: 0 4px 16px var(--coral-glow);
}

/* Modal coral */
.modal-coral {
  border-top: 2px solid var(--coral-m) !important;
}

.modal-close-coral { border-color: var(--coral-l) !important; }
.modal-close-coral:active { background: var(--coral-l) !important; }
.coral-label { color: var(--coral-text) !important; }
.text-input-coral:focus { border-bottom-color: var(--coral-m) !important; }

.btn-coral {
  background: linear-gradient(135deg, var(--coral-m), var(--coral)) !important;
  box-shadow: 0 8px 28px var(--coral-glow), 0 2px 8px rgba(212, 96, 58, .15) !important;
}

/* Coral icon picker */
.modal-coral {
  --picker-accent: var(--coral);
  --picker-accent-light: var(--coral-l);
  --picker-accent-bg: linear-gradient(135deg, var(--coral-grad1), var(--coral-grad2));
  --picker-glow: var(--coral-glow);
}

/* Coral edit chips */
.edit-chip-coral.selected {
  background: linear-gradient(135deg, var(--coral-m), var(--coral));
  color: #fff;
  border-color: var(--coral);
}

/* Autocomplete */
.autocomplete-list {
  display: none;
  max-height: 120px;
  overflow-y: auto;
  margin-top: 4px;
}

.autocomplete-list.open {
  display: block;
}

.autocomplete-item {
  padding: 8px 12px;
  font-size: .8rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .15s;
}

.autocomplete-item:active {
  background: var(--blue-xl);
}

.autocomplete-count {
  font-size: .6rem;
  color: var(--muted);
  font-weight: 600;
}


/* ═══════════════════════════════════════════
   CRÉDITS — Thème doré
   ═══════════════════════════════════════════ */

:root {
  --gold: #e0cc50;
  --gold-m: #e8d86c;
  --gold-l: #f4e8a0;
  --gold-l2: #f8f0c4;
  --gold-exl: #fcf8e4;
  --gold-text: #726210;
  --gold-grad1: #f4e8a0;
  --gold-grad2: #f6ecb0;
  --gold-glow: rgba(224, 204, 80, .1);
}

.top-bar-gold {
  background: linear-gradient(var(--header-angle), var(--gold-grad1) 0%, var(--gold-grad2) 100%) !important;
}

.gold-text { color: var(--gold-text) !important; }

/* Cards crédits — même pattern que coral/orange/green */
.total-card-gold {
  border: 1.5px solid var(--gold-l);
  box-shadow: 0 4px 16px var(--gold-glow);
}
.total-card-gold .total-card-label { color: var(--gold-text); }
.total-card-gold .total-card-value { color: var(--gold); }
.total-card-gold .total-card-euro { color: var(--gold-m); }
.total-card-gold .total-card-line { background: linear-gradient(90deg, transparent, var(--gold-m), transparent); }

/* Résumé crédits — même pattern que prelev-resume */
.credit-resume {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.credit-resume-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--gold-l);
  box-shadow: 0 3px 12px var(--gold-glow);
}
.credit-resume-value {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.credit-resume-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* Liste crédits */
.credit-row {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 8px;
  border: 1.5px solid var(--gold-l);
  box-shadow: 0 3px 12px var(--gold-glow);
  position: relative;
  transition: transform .15s;
  cursor: pointer;
}
.credit-row:active { transform: scale(.98); }

/* Boule de neige */
.snowball-section {
  margin-top: 18px;
  margin-bottom: 8px;
  padding-top: 18px;
}
.snowball-section::before {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-m), transparent);
  margin-bottom: 20px;
}
.snowball-header {
  margin-bottom: 10px;
}
.snowball-title {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.snowball-strategy {
  margin-bottom: 12px;
}
.snowball-strategy-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.snowball-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.snowball-chip {
  padding: 6px 12px;
  border-radius: 99px;
  border: 1.5px solid var(--gold-l);
  background: var(--bg-card);
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.snowball-chip.selected {
  background: linear-gradient(135deg, var(--gold-m), var(--gold));
  color: #fff;
  border-color: var(--gold);
}
.snowball-compare {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.snowball-card {
  flex: 1;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--gold-l);
}
.snowball-card-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
}
.snowball-card-value {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.snowball-card-sub {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 2px;
}
.snowball-card-interest {
  font-size: .65rem;
  color: var(--muted);
  margin-top: 2px;
}
.snowball-card-snowball {
  border-color: var(--gold);
  box-shadow: 0 3px 12px var(--gold-glow);
}
.snowball-card-snowball .snowball-card-value {
  color: var(--gold);
}
.snowball-savings {
  display: flex;
  gap: 8px;
}
.snowball-saving-item {
  flex: 1;
  background: linear-gradient(135deg, var(--gold-exl), var(--gold-l2));
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--gold-l);
}
.snowball-saving-value {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
}
.snowball-saving-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--gold-text);
  margin-top: 2px;
  display: block;
}

/* Simulateur "Et si" */
.whatif-section {
  margin-top: 18px;
  margin-bottom: 8px;
  padding-top: 18px;
}
.whatif-section::before {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-m), transparent);
  margin-bottom: 20px;
}
.whatif-header {
  margin-bottom: 12px;
}
.whatif-title {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.whatif-subtitle {
  font-size: .72rem;
  color: var(--muted);
}
.whatif-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1.5px solid var(--gold-l);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.whatif-prefix {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
}
.whatif-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Lora', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  outline: none;
  min-width: 0;
}
.whatif-input::placeholder {
  color: var(--gold-l);
}
.whatif-suffix {
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.whatif-result-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gold-l);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-bottom: 10px;
}
.whatif-result-highlight {
  border-color: var(--gold);
  box-shadow: 0 4px 16px var(--gold-glow);
}
.whatif-result-value {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
}
.whatif-result-label {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
}
.whatif-result-sub {
  font-size: .7rem;
  color: var(--muted);
  margin-top: 2px;
}
.whatif-gains {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.whatif-gain-item {
  flex: 1;
  background: linear-gradient(135deg, var(--gold-exl), var(--gold-l2));
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--gold-l);
}
.whatif-gain-value {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
}
.whatif-gain-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--gold-text);
  margin-top: 2px;
  display: block;
}
.whatif-motivation {
  background: linear-gradient(135deg, var(--gold-exl), var(--gold-l2));
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  border: 1.5px solid var(--gold-l);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-text);
  line-height: 1.4;
}
.credit-row-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 6px;
  padding-right: 60px;
}
.credit-row-name {
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
}
.credit-row-category {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .65rem;
  font-weight: 500;
  color: var(--gold-text);
  background: var(--gold-exl);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.credit-row-amounts {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.credit-row-bar {
  height: 6px;
  background: var(--gold-l2);
  border-radius: 99px;
  overflow: hidden;
}
.credit-row-bar-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 99px;
  transition: width .6s ease;
}
.credit-row-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: .72rem;
  color: var(--muted);
}

.credit-row .row-actions {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Bouton ajouter crédit — même pattern que btn-add-prelev */
.btn-add-credit {
  width: 100%;
  padding: 17px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Lora', serif;
  color: #fff;
  background: linear-gradient(135deg, var(--gold-m), var(--gold));
  box-shadow: 0 8px 28px var(--gold-glow), 0 2px 8px rgba(224, 204, 80, .15);
  margin-top: 8px;
  margin-bottom: 12px;
  transition: all .2s;
  letter-spacing: .02em;
}
.btn-add-credit:active {
  transform: scale(.97);
  box-shadow: 0 4px 16px var(--gold-glow);
}

/* Modal crédit — même pattern que modal-coral */
.modal-gold {
  border-top: 2px solid var(--gold-m) !important;
  --picker-accent: var(--gold);
  --picker-accent-light: var(--gold-l);
  --picker-accent-bg: linear-gradient(135deg, var(--gold-l2), var(--gold-l));
  --picker-glow: var(--gold-glow);
}
.modal-close-gold { border-color: var(--gold-l) !important; }
.modal-close-gold:active { background: var(--gold-l) !important; }
.gold-label { color: var(--gold-text) !important; }
.text-input-gold:focus { border-bottom-color: var(--gold-m) !important; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-m), var(--gold)) !important;
  box-shadow: 0 8px 28px var(--gold-glow), 0 2px 8px rgba(224, 204, 80, .15) !important;
}

/* Chips catégorie crédit */
.credit-cat-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 2px 0;
}
.credit-cat-chips::-webkit-scrollbar { display: none; }
.credit-cat-chip {
  padding: 8px 14px;
  border-radius: 99px;
  border: 1.5px solid var(--gold-l);
  background: var(--bg-card);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.credit-cat-chip.selected {
  background: linear-gradient(135deg, var(--gold-m), var(--gold));
  color: #fff;
  border-color: var(--gold);
}


/* ═══════════════════════════════════════════
   ÉPARGNE — Thème teal
   ═══════════════════════════════════════════ */

:root {
  --teal: #2a9d8f;
  --teal-m: #52b8ad;
  --teal-l: #a0d8d0;
  --teal-l2: #c8ebe6;
  --teal-exl: #e8f6f4;
  --teal-text: #1a6b60;
  --teal-grad1: #a0d8d0;
  --teal-grad2: #b0e0d8;
  --teal-glow: rgba(42, 157, 143, .1);
}

.top-bar-teal {
  background: linear-gradient(var(--header-angle), var(--teal-grad1) 0%, var(--teal-grad2) 100%) !important;
}

.teal-text { color: var(--teal-text) !important; }

/* Cards épargne */
.total-card-teal {
  border: 1.5px solid var(--teal-l);
  box-shadow: 0 4px 16px var(--teal-glow);
}
.total-card-teal .total-card-label { color: var(--teal-text); }
.total-card-teal .total-card-value { color: var(--teal); }
.total-card-teal .total-card-euro { color: var(--teal-m); }
.total-card-teal .total-card-line { background: linear-gradient(90deg, transparent, var(--teal-m), transparent); }

/* Résumé épargne */
.epargne-resume {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.epargne-resume-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--teal-l);
  box-shadow: 0 3px 12px var(--teal-glow);
}
.epargne-resume-value {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}
.epargne-resume-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* Liste objectifs */
.epargne-row {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 8px;
  border: 1.5px solid var(--teal-l);
  box-shadow: 0 3px 12px var(--teal-glow);
  position: relative;
  transition: transform .15s;
  cursor: pointer;
}
.epargne-row:active { transform: scale(.98); }
.epargne-row-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  padding-right: 60px;
}
.epargne-row-name {
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
}
.epargne-row-monthly {
  font-size: .7rem;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: 6px;
}
.epargne-row-amounts {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.epargne-row-bar {
  height: 6px;
  background: var(--teal-l2);
  border-radius: 99px;
  overflow: hidden;
}
.epargne-row-bar-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 99px;
  transition: width .6s ease;
}
.epargne-complete-badge {
  text-align: center;
  margin-top: 8px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--teal);
}
.epargne-row-estimate {
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 500;
  color: var(--teal-text);
  padding: 6px 10px;
  background: var(--teal-exl);
  border-radius: 8px;
  text-align: center;
}
.epargne-row .row-actions {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Bouton masquer objectif atteint */
.epargne-hide-btn {
  display: block;
  margin: 10px auto 0;
  padding: 8px 20px;
  border: 1.5px solid var(--teal-l);
  border-radius: 99px;
  background: var(--teal-exl);
  color: var(--teal-text);
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.epargne-hide-btn:active { transform: scale(.95); background: var(--teal-l2); }

/* Section objectifs atteints (repliable) */
.epargne-completed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  margin-top: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.epargne-completed-header::before {
  content: '▸';
  font-size: .8rem;
  color: var(--muted);
  transition: transform .2s;
}
.epargne-completed-header.open::before { transform: rotate(90deg); }
.epargne-completed-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}
.epargne-completed-list {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.epargne-completed-header.open + .epargne-completed-list { display: flex; }
.epargne-completed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--gray-l, #d1d5db);
}
.epargne-completed-info { flex: 1; min-width: 0; }
.epargne-completed-name {
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}
.epargne-completed-detail {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 2px;
}
.epargne-reactivate-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--teal-l);
  border-radius: 99px;
  background: transparent;
  color: var(--teal);
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.epargne-reactivate-btn:active { transform: scale(.95); background: var(--teal-exl); }

/* Bouton ajouter objectif */
.btn-add-epargne {
  width: 100%;
  padding: 17px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Lora', serif;
  color: #fff;
  background: linear-gradient(135deg, var(--teal-m), var(--teal));
  box-shadow: 0 8px 28px var(--teal-glow), 0 2px 8px rgba(42, 157, 143, .15);
  margin-top: 8px;
  margin-bottom: 12px;
  transition: all .2s;
  letter-spacing: .02em;
}
.btn-add-epargne:active {
  transform: scale(.97);
  box-shadow: 0 4px 16px var(--teal-glow);
}

/* Modal épargne */
.modal-teal {
  border-top: 2px solid var(--teal-m) !important;
  --picker-accent: var(--teal);
  --picker-accent-light: var(--teal-l);
  --picker-accent-bg: linear-gradient(135deg, var(--teal-l2), var(--teal-l));
  --picker-glow: var(--teal-glow);
}
.modal-close-teal { border-color: var(--teal-l) !important; }
.modal-close-teal:active { background: var(--teal-l) !important; }
.modal-close-teal { border-color: var(--teal-l) !important; }
.modal-close-teal:active { background: var(--teal-l) !important; }
.teal-label { color: var(--teal-text) !important; }
.text-input-teal:focus { border-bottom-color: var(--teal-m) !important; }
.btn-teal {
  background: linear-gradient(135deg, var(--teal-m), var(--teal)) !important;
  box-shadow: 0 8px 28px var(--teal-glow), 0 2px 8px rgba(42, 157, 143, .15) !important;
}


/* ═══════════════════════════════════════════
   BUDGET PRÉVU — Thème orange
   ═══════════════════════════════════════════ */

:root {
  --orange: #e07a00;
  --orange-m: #f0a040;
  --orange-l: #f5d4a0;
  --orange-l2: #fae8cc;
  --orange-exl: #fdf4e8;
  --orange-text: #7a4400;
  --orange-grad1: #f5d4a0;
  --orange-grad2: #f7dbb0;
  --orange-glow: rgba(224, 122, 0, .1);
  --sage: #6b9e6b;
  --sage-l: #d4e8d4;
  --sage-bg: #eef6ee;
}

.top-bar-orange {
  background: linear-gradient(var(--header-angle), var(--orange-grad1) 0%, var(--orange-grad2) 100%) !important;
}

.month-arrow-orange { color: var(--orange-text) !important; }
.orange-text { color: var(--orange-text) !important; }

/* Résumé budget */
.budget-resume {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.budget-resume-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--orange-l);
  box-shadow: 0 3px 12px var(--orange-glow);
}

.budget-resume-value {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--orange);
}

.budget-resume-value.positive { color: var(--sage); }

.budget-resume-label {
  font-size: .6rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* Budget row */
.budget-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--orange-l);
  box-shadow: 0 2px 10px var(--orange-glow);
  margin-bottom: 8px;
  transition: transform .15s;
  cursor: pointer;
}

.budget-row:active { transform: scale(.98); }

.budget-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--orange-grad1), var(--orange-grad2));
  border: 1.5px solid var(--orange-l);
  flex-shrink: 0;
}

.budget-info { flex: 1; min-width: 0; }

.budget-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-amounts {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  overflow: hidden;
}

.budget-spent {
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.budget-of {
  font-size: .62rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barre de progression */
.budget-bar-bg {
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: var(--bg-soft);
  margin-top: 6px;
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease, background .4s ease;
  min-width: 2px;
}

/* Couleurs : sage → orange → coral */
.budget-bar-fill.level-ok { background: var(--sage); }
.budget-bar-fill.level-warn { background: var(--orange-m); }
.budget-bar-fill.level-over { background: var(--coral); }

.budget-spent.level-ok { color: var(--sage); }
.budget-spent.level-warn { color: var(--orange); }
.budget-spent.level-over { color: var(--coral); }

/* Reste / dépassement */
.budget-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.budget-remain {
  font-family: 'Lora', serif;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}

.budget-remain.positive { color: var(--sage); }
.budget-remain.negative { color: var(--coral); }

.budget-pct {
  font-size: .58rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  margin-top: 2px;
}

.budget-pct.level-ok {
  background: var(--sage-bg);
  color: var(--sage);
  border: 1px solid var(--sage-l);
}

.budget-pct.level-warn {
  background: var(--orange-exl);
  color: var(--orange);
  border: 1px solid var(--orange-l);
}

.budget-pct.level-over {
  background: var(--coral-exl);
  color: var(--coral);
  border: 1px solid var(--coral-l);
}

/* Bouton ajouter budget */
.btn-add-budget {
  width: 100%;
  padding: 17px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Lora', serif;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-m), var(--orange));
  box-shadow: 0 8px 28px var(--orange-glow), 0 2px 8px rgba(224, 122, 0, .15);
  margin-top: 8px;
  margin-bottom: 12px;
  transition: all .2s;
  letter-spacing: .02em;
}

.btn-add-budget:active {
  transform: scale(.97);
  box-shadow: 0 4px 16px var(--orange-glow);
}

/* Modal orange */
.modal-orange {
  border-top: 2px solid var(--orange-m) !important;
}
.modal-orange .modal-title { color: var(--orange) !important; }
.modal-orange .card-label { color: var(--orange-text) !important; }
.modal-orange .modal-close { border-color: var(--orange-l) !important; color: var(--orange) !important; }
.modal-orange .text-input:focus { border-bottom-color: var(--orange-m) !important; }
.modal-orange .modal-btn {
  background: linear-gradient(135deg, var(--orange-m), var(--orange)) !important;
  box-shadow: 0 8px 28px var(--orange-glow) !important;
}

.modal-close-orange { border-color: var(--orange-l) !important; }
.modal-close-orange:active { background: var(--orange-l) !important; }
.orange-label { color: var(--orange-text) !important; }
.text-input-orange:focus { border-bottom-color: var(--orange-m) !important; }

.btn-orange {
  background: linear-gradient(135deg, var(--orange-m), var(--orange)) !important;
  box-shadow: 0 8px 28px var(--orange-glow), 0 2px 8px rgba(224, 122, 0, .15) !important;
}

/* Orange icon picker */
.modal-orange {
  --picker-accent: var(--orange);
  --picker-accent-light: var(--orange-l);
  --picker-accent-bg: linear-gradient(135deg, var(--orange-grad1), var(--orange-grad2));
  --picker-glow: var(--orange-glow);
}


/* ═══════════════════════════════════════════
   RÉSUMÉ — Thème rainbow
   ═══════════════════════════════════════════ */

:root {
  --rainbow: linear-gradient(90deg, var(--blue), var(--green-e), var(--orange), var(--coral), var(--violet), var(--rose));
  --rainbow-soft: linear-gradient(90deg, var(--blue-l), var(--green-el), var(--orange-l), var(--coral-l), var(--violet-l), var(--rose-l));
  --rainbow-glow: rgba(122, 80, 180, .08);
  --resume-text: #4a3a6a;
}

.top-bar-rainbow {
  background: linear-gradient(var(--header-angle), var(--green-el) 0%, var(--coral-l) 20%, var(--orange-l) 40%, var(--blue-l) 60%, var(--violet-l) 80%, var(--gray-l) 100%) !important;
}

.month-arrow-rainbow { color: var(--resume-text) !important; }
.rainbow-text { color: var(--resume-text) !important; }

/* Total card rainbow */
.total-card-rainbow {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              var(--rainbow) border-box;
  background-origin: border-box;
  box-shadow: 0 4px 16px var(--rainbow-glow);
}
.total-card-rainbow .total-card-label { color: var(--resume-text); }
.total-card-rainbow .total-card-value { color: var(--resume-text); }
.total-card-rainbow .total-card-euro { color: var(--violet); opacity: .5; }
.total-card-rainbow .total-card-line { background: var(--rainbow); }

.total-card-rainbow .total-card-value.positive { color: var(--sage); }
.total-card-rainbow .total-card-value.negative { color: var(--coral); }
.total-card-rainbow .total-card-euro.positive { color: var(--sage); }
.total-card-rainbow .total-card-euro.negative { color: var(--coral); }

@keyframes bilanSpring {
  0%   { transform: translateY(100%); }
  60%  { transform: translateY(-12px); }
  78%  { transform: translateY(6px); }
  90%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
/* ── Modal Bilan de fin de mois ── */
.modal-bilan {
  position: relative;
  overflow: hidden;
  border-top: none;
  background: var(--bg-card);
  padding: 28px var(--px) calc(28px + var(--safe-bottom));
}
.modal-bilan::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
}
.bilan-header {
  text-align: center;
  margin-bottom: 24px;
}
.bilan-emoji {
  display: block;
  font-size: 2.2rem;
  margin-bottom: 8px;
}
.bilan-title {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.bilan-subtitle {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
}
.bilan-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.bilan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gray-exl);
  border-radius: 12px;
  padding: 12px 14px;
}
.bilan-row-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}
.bilan-row-value {
  font-family: 'Lora', serif;
  font-size: .9rem;
  font-weight: 700;
}
.bilan-row-value.positive { color: var(--sage); }
.bilan-row-value.negative { color: var(--coral); }
.bilan-row-value.neutral  { color: var(--orange); }
.bilan-phrase {
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 24px;
  padding: 0 8px;
  line-height: 1.5;
}
.bilan-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bilan-btn-close {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              var(--rainbow) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  cursor: pointer;
  transition: transform .15s;
}
.bilan-btn-close .btn-text {
  background: var(--rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.bilan-btn-close .btn-emoji {
  -webkit-text-fill-color: initial;
  color: initial;
}
.bilan-btn-detail {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  font-size: .82rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              var(--rainbow) border-box;
  background-clip: padding-box, border-box;
  cursor: pointer;
  background-origin: border-box;
  transition: transform .15s;
}
.bilan-btn-detail span {
  background: var(--rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.bilan-btn-detail:active { transform: scale(.97); }
.bilan-btn-close:active { transform: scale(.97); }
.bilan-btn-export {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  font-size: .82rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              linear-gradient(135deg, var(--blue-m), var(--violet-m)) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.bilan-btn-export .btn-icon {
  -webkit-text-fill-color: initial;
  font-size: 1rem;
  line-height: 1;
}
.bilan-btn-export .btn-text {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue-m), var(--violet-m));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bilan-btn-export:active { transform: scale(.97); }

/* ═══ PAYWALL MODAL ═══ */
.modal-paywall {
  width: 92%;
  max-width: 380px;
  max-height: 85vh;
  border-radius: 24px;
  overflow: hidden;
  overflow-y: auto;
  background: var(--bg-card);
  padding: 0;
  position: relative;
  margin-bottom: 10vh;
  animation: bilanSpring .5s cubic-bezier(.4,0,.2,1) forwards;
}
.paywall-close-btn {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 2;
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
}
.paywall-header {
  background: linear-gradient(135deg, var(--blue-m), var(--violet-m));
  padding: 28px 20px 22px;
  text-align: center;
  color: #fff;
}
.paywall-star { font-size: 2.2rem; margin-bottom: 6px; }
.paywall-title {
  font-family: 'Lora', serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.paywall-subtitle {
  font-size: .82rem;
  opacity: .9;
  margin: 0;
}
.paywall-benefits {
  padding: 18px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paywall-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--ink);
}
.paywall-check {
  color: var(--green-e);
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.paywall-options {
  padding: 14px 18px;
  display: flex;
  gap: 10px;
}
.paywall-option {
  flex: 1;
  padding: 16px 10px 14px;
  border-radius: 16px;
  border: 2px solid var(--gray-l);
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, transform .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.paywall-option:active { transform: scale(.97); }
.paywall-option-monthly:active,
.paywall-option-monthly:hover { border-color: var(--blue-m); }
.paywall-option-lifetime { border-color: var(--violet-m); background: linear-gradient(145deg, var(--violet-exl), var(--violet-l2)); }
.paywall-option-lifetime:active { border-color: var(--violet); }
.paywall-option-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--violet-m), var(--violet));
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.paywall-option-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.paywall-option-price {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
.paywall-option-price span {
  font-size: .7rem;
  font-weight: 400;
  color: var(--muted);
}
.paywall-option-sub {
  font-size: .65rem;
  color: var(--muted);
  margin-top: 4px;
}
.paywall-footer {
  padding: 6px 18px 20px;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.paywall-restore, .paywall-promo {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}
.paywall-restore:hover, .paywall-promo:hover { color: var(--ink); }

/* Promo code input */
.promo-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-l);
  font-family: 'DM Sans', monospace;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-soft);
  transition: border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.promo-input:focus {
  outline: none;
  border-color: var(--violet);
}

/* Premium badge dans Réglages */
.premium-status-card {
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
}
.premium-status-active {
  background: linear-gradient(135deg, var(--green-exl), var(--violet-exl));
  border: 1.5px solid var(--green-e);
}
.premium-status-active .premium-status-label {
  color: var(--green-e);
  font-weight: 700;
  font-size: .9rem;
}
.premium-status-active .premium-status-sub {
  color: var(--muted);
  font-size: .72rem;
  margin-top: 4px;
}
/* Premium button dans Réglages — même style que resume-export-btn */
.premium-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              linear-gradient(135deg, var(--blue-m), var(--violet-m)) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.premium-upgrade-btn .btn-text {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue-m), var(--violet-m));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.premium-upgrade-btn .btn-icon {
  -webkit-text-fill-color: initial;
  font-size: 1rem;
  line-height: 1;
}
.premium-upgrade-btn:active { transform: scale(.97); }

/* Premium lock placeholder (Stats) */
.stats-premium-lock {
  margin: 16px 0;
  padding: 24px 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--violet-exl), var(--violet-l2));
  border: 1.5px dashed var(--violet-m);
  text-align: center;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.stats-premium-lock:active { transform: scale(.98); }
.stats-lock-icon { font-size: 1.6rem; margin-bottom: 6px; }
.stats-lock-text {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 4px;
}
.stats-lock-sub {
  font-size: .75rem;
  color: var(--muted);
}

/* Premium lock overlay (Comparatif annuel page 7) */
.premium-page-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 10;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.premium-page-lock-icon { font-size: 2rem; margin-bottom: 8px; }
.premium-page-lock-text {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 4px;
}
.premium-page-lock-sub {
  font-size: .78rem;
  color: var(--muted);
}

/* Donut interactif */
.donut-legend-item {
  cursor: pointer;
  transition: opacity .2s;
  border-radius: 6px;
  padding: 1px 4px;
}
.donut-legend-item.donut-selected {
  opacity: 1 !important;
}

/* Tooltip barres comparatif */
.comp-bar-col {
  position: relative;
  cursor: pointer;
}
.comp-bar-tooltip {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  animation: tooltipFade 2.2s ease forwards;
  z-index: 10;
}
.comp-bar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink);
}
@keyframes tooltipFade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Micro-animations */
@keyframes cardBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.03); }
  70%  { transform: scale(.98); }
  100% { transform: scale(1); }
}
@keyframes amountPulse {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.06); opacity: .85; }
  100% { transform: scale(1); opacity: 1; }
}
.card-bounce { animation: cardBounce .35s cubic-bezier(.4,0,.2,1); }
.amount-pulse { animation: amountPulse .5s cubic-bezier(.4,0,.2,1); }

/* Crossfade ligne/phrase Résumé */
.resume-line-wrap {
  position: relative;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}
.resume-line-a {
  position: absolute;
  width: 50%;
  height: 2px;
  border-radius: 99px;
  margin-top: 0;
  opacity: 1;
  transition: opacity 2s ease 2s;
}
.resume-line-b {
  position: absolute;
  font-size: .68rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s ease 0s;
}
.resume-line-wrap.ctx-visible .resume-line-a { opacity: 0; transition: opacity 1.2s ease 0s; }
.resume-line-wrap.ctx-visible .resume-line-b { opacity: 1; transition: opacity 2s ease 2s; }


/* Résumé row */
.resume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 16px;
  margin-bottom: 8px;
  transition: transform .15s;
}

.resume-row-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.resume-row-info { flex: 1; min-width: 0; }

.resume-row-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}

.resume-row-value {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Couleurs par type de row */
.resume-row-green {
  border: 1.5px solid var(--green-el);
  box-shadow: 0 2px 10px var(--green-glow);
}
.resume-row-green .resume-row-icon {
  background: linear-gradient(135deg, var(--green-grad1), var(--green-grad2));
  border: 1.5px solid var(--green-el);
}
.resume-row-green .resume-row-value { color: var(--green-e); }

.resume-row-coral {
  border: 1.5px solid var(--coral-l);
  box-shadow: 0 2px 10px var(--coral-glow);
}
.resume-row-coral .resume-row-icon {
  background: linear-gradient(135deg, var(--coral-grad1), var(--coral-grad2));
  border: 1.5px solid var(--coral-l);
}
.resume-row-coral .resume-row-value { color: var(--coral); }

.resume-row-orange {
  border: 1.5px solid var(--orange-l);
  box-shadow: 0 2px 10px var(--orange-glow);
}
.resume-row-orange .resume-row-icon {
  background: linear-gradient(135deg, var(--orange-grad1), var(--orange-grad2));
  border: 1.5px solid var(--orange-l);
}
.resume-row-orange .resume-row-value { color: var(--orange); }

.resume-row-blue {
  border: 1.5px solid var(--blue-l);
  box-shadow: 0 2px 10px var(--glow);
}
.resume-row-blue .resume-row-icon {
  background: linear-gradient(135deg, var(--blue-xl), var(--blue-l));
  border: 1.5px solid var(--blue-l);
}
.resume-row-blue .resume-row-value { color: var(--blue); }

.resume-row-purple {
  border: 1.5px dashed var(--violet-l);
  box-shadow: 0 2px 10px var(--rainbow-glow);
  opacity: 0.55;
}
.resume-row-purple .resume-row-icon {
  background: linear-gradient(135deg, var(--violet-l2), var(--violet-l));
  border: 1.5px solid var(--violet-l);
}
.resume-row-purple .resume-row-value { color: var(--violet); }


/* Solde Mois Précédent */
.resume-prev-month-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 16px;
  margin-bottom: 8px;
  border: 1.5px dashed var(--gray-l);
  box-shadow: 0 2px 10px var(--gray-glow);
  opacity: 0.55;
  transition: transform .15s;
}
.resume-prev-month-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gray-exl), var(--gray-l2));
  border: 1.5px solid var(--gray-l);
}
.resume-prev-month-info { flex: 1; min-width: 0; }
.resume-prev-month-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}
.resume-prev-month-value {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--ink);
}
.resume-prev-month-value.negative { color: var(--coral); }

.resume-export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 4px);
  margin: 12px auto 24px;
  padding: 13px 20px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
              linear-gradient(135deg, var(--blue-m), var(--violet-m)) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.resume-export-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.resume-export-text {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue-m), var(--violet-m));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.resume-export-btn:active { transform: scale(.97); }



:root {
  --violet: #7c4dbd;
  --violet-m: #a070d0;
  --violet-l: #d6c8e8;
  --violet-l2: #e8e0f0;
  --violet-exl: #f4f0fa;
  --violet-text: #4a2e7a;
  --violet-grad1: #e0d4f0;
  --violet-grad2: #e8daf4;
  --violet-glow: rgba(124, 77, 189, .08);
}

.top-bar-violet {
  background: linear-gradient(var(--header-angle), var(--violet-grad1) 0%, var(--violet-grad2) 100%) !important;
}

.month-arrow-violet { color: var(--violet-text) !important; }
.violet-text { color: var(--violet-text) !important; }

/* Section titles */
.stats-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 12px;
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--violet);
}

.stats-section-title:first-child { margin-top: 4px; }

.stats-section-line {
  flex: 1;
  height: 1.5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--violet-l), transparent);
}

/* Donut charts - stacked */
.donut-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.donut-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.donut-card-coral {
  border: 1.5px solid var(--coral-l);
  box-shadow: 0 2px 10px var(--coral-glow);
}
.donut-card-orange {
  border: 1.5px solid var(--orange-l);
  box-shadow: 0 2px 10px var(--orange-glow);
}
.donut-card-blue {
  border: 1.5px solid var(--blue-l);
  box-shadow: 0 2px 10px var(--glow);
}
.donut-card-green {
  border: 1.5px solid var(--green-el);
  box-shadow: 0 2px 10px var(--green-glow);
}

.donut-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 10px;
}

.donut-title-coral { color: var(--coral-text); }
.donut-title-orange { color: var(--orange-text); }
.donut-title-blue { color: var(--blue-text); }

.donut-left {
  flex-shrink: 0;
}

.donut-wrap {
  position: relative;
  width: 110px;
  height: 110px;
}

.donut-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--bg-soft);
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: .78rem;
  font-weight: 700;
}

.donut-center-coral { color: var(--coral); }
.donut-center-orange { color: var(--orange); }
.donut-center-blue { color: var(--blue); }

.donut-right {
  flex: 1;
  min-width: 0;
}

.donut-legend {
  margin-top: 10px;
  width: 100%;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--ink);
  margin-bottom: 5px;
}

.donut-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donut-legend-pct {
  font-weight: 700;
  flex-shrink: 0;
}

.donut-card-coral .donut-legend-pct { color: var(--coral); }
.donut-card-orange .donut-legend-pct { color: var(--orange); }
.donut-card-blue .donut-legend-pct { color: var(--blue); }
.donut-card-green .donut-legend-pct { color: var(--green-e); }
.donut-title-green { color: var(--green-et) !important; }
.donut-center-green { color: var(--green-e); }

/* Stat info cards */
.stat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--violet-l);
  box-shadow: 0 2px 10px var(--violet-glow);
  margin-bottom: 8px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--violet-grad1), var(--violet-grad2));
  border: 1.5px solid var(--violet-l);
  flex-shrink: 0;
}

.stat-info { flex: 1; min-width: 0; }

.stat-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}

.stat-value {
  font-family: 'Lora', serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--violet);
  margin-top: 2px;
}

.stat-sub {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 2px;
}


/* ═══════════════════════════════════════════
   COMPARATIF ANNUEL — Thème rose
   ═══════════════════════════════════════════ */

:root {
  --rose: #c0529a;
  --rose-m: #d080b8;
  --rose-l: #e8c0d8;
  --rose-l2: #f0d8e8;
  --rose-exl: #faf0f6;
  --rose-text: #6a2858;
  --rose-grad1: #f0d4e4;
  --rose-grad2: #f4dcea;
  --rose-glow: rgba(192, 82, 154, .08);
}

.top-bar-rose {
  background: linear-gradient(var(--header-angle), var(--rose-grad1) 0%, var(--rose-grad2) 100%) !important;
}

.month-arrow-rose { color: var(--rose-text) !important; }
.rose-text { color: var(--rose-text) !important; }

/* Year nav */
.year-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.year-nav-value {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 50px;
  text-align: center;
}

/* Chart swipeable */
.comp-chart-area {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  margin-bottom: 8px;
}

.comp-chart-track {
  display: flex;
  transition: transform .3s ease;
}

.comp-chart-slide {
  flex-shrink: 0;
  width: 100%;
}

.comp-chart-title {
  text-align: center;
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
  padding: 10px 0 6px;
  background: var(--bg-card);
  border-radius: 14px;
  border: 1.5px solid var(--rose-l);
  box-shadow: 0 2px 8px var(--rose-glow);
  margin-bottom: 8px;
}

/* Dots indicateur */
.comp-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.comp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s, border-color .2s;
  opacity: .4;
}

.comp-dot.active {
  opacity: 1;
  transform: scale(1.25);
  border-color: var(--ink);
}

/* Vertical bar chart */
.comp-chart {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--rose-l);
  box-shadow: 0 2px 10px var(--rose-glow);
  padding: 16px 12px 10px 50px;
}

.comp-chart-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 180px;
  padding: 0 4px;
  position: relative;
}

/* Y-axis lines */
.comp-chart-ylines {
  position: absolute;
  top: 0;
  left: -42px;
  right: 0;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.comp-chart-yline {
  border-top: 1px solid var(--bg-soft);
  position: relative;
}

.comp-chart-ylabel {
  position: absolute;
  top: -8px;
  left: 0px;
  font-size: .45rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Bar column */
.comp-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

.comp-vbar {
  width: 14px;
  border-radius: 4px 4px 0 0;
  transition: height .4s ease;
  min-height: 2px;
}

.comp-vbar-label {
  font-size: .5rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 6px;
}

/* Bar colors */
.comp-vbar-rainbow { background: linear-gradient(180deg, var(--sage), var(--green-em)); }
.comp-vbar-blue { background: linear-gradient(180deg, var(--blue), var(--blue-m)); }
.comp-vbar-coral { background: linear-gradient(180deg, var(--coral), var(--coral-m)); }
.comp-vbar-orange { background: linear-gradient(180deg, var(--orange), var(--orange-m)); }
.comp-vbar-purple { background: linear-gradient(180deg, var(--violet), var(--violet-m)); }
.comp-vbar-green { background: linear-gradient(180deg, var(--green-e), var(--green-em)); }
.comp-vbar-rainbow.negative { background: linear-gradient(180deg, var(--coral), var(--coral-m)); }

/* Chart bipolaire — vue Solde */
.comp-chart-grid-solde {
  height: auto;
  align-items: stretch;
  flex-wrap: nowrap;
}
.comp-chart-ylines-abs {
  position: absolute;
  top: 0;
  left: -42px;
  width: 40px;
  height: 161px; /* halfH*2 + baseline */
  pointer-events: none;
}
.comp-chart-ylabel-abs {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: .45rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.comp-chart-ylabel-neg { color: var(--coral); }
.comp-chart-baseline {
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.comp-bar-col-solde {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
.comp-vbar-pos-zone {
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.comp-vbar-neg-zone {
  height: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.comp-vbar-down {
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, var(--coral-m), var(--coral));
}

/* Section séparateur */
.comp-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 12px;
  font-family: 'Lora', serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--rose);
}

.comp-section-line {
  flex: 1;
  height: 1.5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--rose-l), transparent);
}

/* Comparatif month card */
.comp-month {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--rose-l);
  box-shadow: 0 2px 10px var(--rose-glow);
  margin-bottom: 10px;
  padding: 14px 16px;
}

.comp-month-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comp-month-name {
  font-family: 'Lora', serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--rose);
}

.comp-month-solde {
  font-family: 'Lora', serif;
  font-size: .85rem;
  font-weight: 700;
}

.comp-month-solde.positive { color: var(--sage); }
.comp-month-solde.negative { color: var(--coral); }

/* Bar row */
.comp-hbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.comp-hbar-label {
  font-size: .6rem;
  font-weight: 600;
  color: var(--muted);
  width: 70px;
  flex-shrink: 0;
  text-align: right;
}

.comp-hbar-bg {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--bg-soft);
  overflow: hidden;
}

.comp-hbar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 2px;
}

.comp-hbar-fill-green { background: var(--green-em); }
.comp-hbar-fill-blue { background: var(--blue-m); }
.comp-hbar-fill-coral { background: var(--coral-m); }
.comp-hbar-fill-orange { background: var(--orange-m); }
.comp-hbar-fill-purple { background: var(--violet-m); }

.comp-hbar-amount {
  font-size: .6rem;
  font-weight: 700;
  color: var(--ink);
  width: 65px;
  flex-shrink: 0;
  text-align: right;
}

/* Empty month */
.comp-month-empty {
  opacity: .4;
}

.comp-month-empty .comp-month-name {
  color: var(--muted);
}


/* ═══════════════════════════════════════════
   RÉGLAGES — Thème gris
   ═══════════════════════════════════════════ */

:root {
  --gray: #6b7280;
  --gray-m: #9ca3af;
  --gray-l: #d1d5db;
  --gray-l2: #e5e7eb;
  --gray-exl: #f3f4f6;
  --gray-text: #374151;
  --gray-grad1: #e5e7eb;
  --gray-grad2: #ebedf0;
  --gray-glow: rgba(107, 114, 128, .08);
}

.top-bar-gray {
  background: linear-gradient(var(--header-angle), var(--gray-grad1) 0%, var(--gray-grad2) 100%) !important;
}

.gray-text { color: var(--gray-text) !important; }

/* Settings sections */
.settings-section {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1.5px solid var(--gray-l);
  box-shadow: 0 2px 10px var(--gray-glow);
  margin-bottom: 12px;
  padding: 16px 18px;
}

.settings-section-header {
  font-family: 'Lora', serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--gray-text);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.settings-section-line {
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gray-l), transparent);
  margin: 10px 0 12px;
  border-radius: 99px;
}

/* Settings link buttons */
.settings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--gray-exl);
  border: none;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 8px;
  text-align: left;
  transition: background .15s;
}

.settings-link:last-child { margin-bottom: 0; }

.settings-link:active { background: var(--gray-l2); }

.settings-arrow {
  color: var(--gray-m);
  font-size: .9rem;
  flex-shrink: 0;
}

.settings-link-danger {
  color: var(--coral);
}
.settings-link-danger .settings-arrow { color: var(--coral); }

/* Settings row with select */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-row:last-child { margin-bottom: 0; }

.settings-row-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}

.settings-select {
  flex: 1;
  max-width: 200px;
  padding: 10px 12px;
  border: 1.5px solid var(--gray-l);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.settings-select:focus {
  outline: none;
  border-color: var(--gray);
}

/* Settings Picker Button */
.settings-picker-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--gray-l);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
  max-width: 200px;
  flex: 1;
  transition: background .15s;
}
.settings-picker-btn:active { background: var(--gray-l2); }
.settings-picker-label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-picker-arrow {
  font-size: .85rem;
  color: var(--gray-m);
  flex-shrink: 0;
}

/* Picker Options List */
.picker-options { display: flex; flex-direction: column; }
.picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  border-bottom: 1px solid var(--gray-l2);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink);
  transition: background .1s;
}
.picker-option:last-child { border-bottom: none; }
.picker-option:active { background: var(--gray-exl); }
.picker-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gray-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s;
}
.picker-option.selected .picker-radio {
  border-color: var(--gray);
}
.picker-radio-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gray);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s, transform .15s;
}
.picker-option.selected .picker-radio-dot { opacity: 1; transform: scale(1); }

/* Import Sélectif */
.import-select-intro {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 4px 14px;
  line-height: 1.5;
}
.import-select-options {
  display: flex;
  flex-direction: column;
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: 14px;
}
.import-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid var(--gray-l2);
  cursor: pointer;
  font-size: .9rem;
  color: var(--ink);
  transition: background .1s;
}
.import-select-option:last-child { border-bottom: none; }
.import-select-option:active { background: var(--gray-exl); }
.import-select-option-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.import-select-option-count {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 400;
}
.import-select-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--gray-l);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}
.import-select-option.selected .import-select-check {
  background: var(--gray);
  border-color: var(--gray);
}
.import-select-actions {
  display: flex;
  gap: 8px;
  padding-top: 6px;
}
.import-select-toggle-all {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-l);
  background: transparent;
  color: var(--gray-text);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.import-select-toggle-all:active { background: var(--gray-exl); }
.import-select-confirm {
  flex: 1.3;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--gray-m), var(--gray));
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.import-select-confirm:active { opacity: .85; }
.import-select-confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.modal-close-gray {
  border-color: var(--gray-l) !important;
  color: var(--gray) !important;
}
.modal-close-gray:active { background: var(--gray-l2) !important; }

/* Version */
.settings-version {
  text-align: center;
  font-size: .72rem;
  color: var(--gray-m);
  margin-top: 10px;
  font-weight: 500;
}

/* Display mode: compact (bouton d'action fixe, données scrollables) */
/* En mode normal, le wrapper est transparent */
.compact-scroll-area {
  display: contents;
}

body.display-compact .page-scroll:has(.compact-scroll-area) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.display-compact .page-scroll > .total-card,
body.display-compact .page-scroll > .total-card-blue,
body.display-compact .page-scroll > .total-card-green,
body.display-compact .page-scroll > .total-card-coral,
body.display-compact .page-scroll > .total-card-orange,
body.display-compact .page-scroll > .card-montant {
  flex-shrink: 0;
}

body.display-compact .compact-scroll-area {
  display: block;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

body.display-compact .page-scroll > .btn-primary,
body.display-compact .page-scroll > .btn-add-revenu,
body.display-compact .page-scroll > .btn-add-prelev,
body.display-compact .page-scroll > .btn-add-budget,
body.display-compact .page-scroll > [class*="btn-add"],
body.display-compact .page-scroll > [class*="btn-green"],
body.display-compact .page-scroll > [class*="btn-orange"] {
  flex-shrink: 0;
  margin-top: 12px;
  margin-bottom: 10px;
}

/* About modal */
/* ═══════════════════════════════════════
   AUTH OVERLAY
   ═══════════════════════════════════════ */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(145deg, var(--blue-l2), var(--violet-l2));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

[data-theme="dark"] .auth-overlay {
  background: linear-gradient(145deg, #1a1b1e, #1e1a28);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 8px 24px 16px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
}

[data-theme="dark"] .auth-card {
  background: var(--bg-card);
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}

.auth-logo {
  text-align: center;
  margin-bottom: 0;
  line-height: 0;
}

.auth-logo-img {
  display: block;
  margin: 64px auto 64px;
  width: 100%;
  max-width: 220px;
  height: auto;
}

.auth-logo-name {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue-text);
  margin-bottom: 16px;
}

[data-theme="dark"] .auth-logo-name { color: var(--blue-m); }

.auth-title {
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

.auth-desc {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

.auth-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--blue-l);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  color: var(--ink);
  background: var(--bg-card);
  outline: none;
  margin-bottom: 10px;
  transition: border-color .2s;
  box-sizing: border-box;
}

.auth-input:focus { border-color: var(--blue); }

.auth-input::placeholder { color: var(--muted); }

.auth-password-wrap {
  position: relative;
}
.auth-password-wrap .auth-input {
  padding-right: 44px;
}
.auth-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(calc(-50% - 5px));
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: .4;
  transition: opacity .2s;
  padding: 4px;
  line-height: 1;
}
.auth-eye:hover { opacity: .7; }
.auth-eye.visible { opacity: .7; }

[data-theme="dark"] .auth-input {
  background: var(--bg-soft);
  border-color: #3a3b40;
  color: var(--ink);
}

[data-theme="dark"] .auth-input:focus { border-color: var(--blue); }

.auth-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: white;
  font-family: 'Lora', serif;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity .2s;
}

.auth-btn:active { opacity: .85; }
.auth-btn:disabled { opacity: .5; cursor: default; }

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.auth-links a {
  font-size: .76rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.auth-links a:active { opacity: .7; }

.auth-skip {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

.auth-message {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .78rem;
  margin-bottom: 14px;
  text-align: center;
}

.auth-message-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.auth-message-success {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

[data-theme="dark"] .auth-message-error {
  background: rgba(220, 38, 38, .1);
  border-color: rgba(220, 38, 38, .25);
}

[data-theme="dark"] .auth-message-success {
  background: rgba(22, 163, 74, .1);
  border-color: rgba(22, 163, 74, .25);
}

/* ═══════════════════════════════════════
   CLOUD SECTION (Settings)
   ═══════════════════════════════════════ */

.cloud-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--green-exl);
  border-radius: 12px;
  margin-bottom: 10px;
}

.cloud-user-email {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.cloud-user-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.cloud-user-status {
  font-size: .68rem;
  font-weight: 700;
  color: var(--green-e);
  background: rgba(46, 158, 107, .12);
  padding: 3px 10px;
  border-radius: 20px;
}

[data-theme="dark"] .cloud-user {
  background: rgba(46, 158, 107, .08);
}

.cloud-info {
  text-align: center;
  font-size: .68rem;
  color: var(--muted);
  padding: 6px 0;
}

.cloud-guest {
  text-align: center;
  padding: 16px;
}

.cloud-guest-text {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.cloud-login-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-m), var(--blue));
  color: white;
  font-family: 'Lora', serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}

.cloud-login-btn:active { opacity: .85; }

/* ═══════════════════════════════════════
   NOTIFICATIONS TOAST
   ═══════════════════════════════════════ */

.toast-notif {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  z-index: 9998;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

.toast-notif.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-notif.toast-blue { background: var(--blue-l2); color: var(--blue); }
.toast-notif.toast-green { background: var(--green-exl); color: var(--green-e); }
.toast-notif.toast-orange { background: var(--orange-exl); color: var(--orange); }
.toast-notif.toast-coral { background: var(--coral-exl); color: var(--coral); }
.toast-notif.toast-cloud { background: var(--bg-soft); color: var(--muted); font-size: .7rem; padding: 6px 14px; }

[data-theme="dark"] .toast-notif {
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] .toast-notif.toast-blue { background: rgba(58, 120, 201, .15); }
[data-theme="dark"] .toast-notif.toast-green { background: rgba(46, 158, 107, .15); }
[data-theme="dark"] .toast-notif.toast-orange { background: rgba(224, 122, 0, .15); }
[data-theme="dark"] .toast-notif.toast-coral { background: rgba(212, 96, 58, .15); }
[data-theme="dark"] .toast-notif.toast-cloud { background: rgba(255,255,255,.08); }

.about-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.about-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.about-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  position: relative;
}

.about-logo-img {
  width: 180px;
  height: 180px;
  border-radius: 24px;
  margin-bottom: 14px;
  object-fit: contain;
}

.about-name {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.about-desc {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

.about-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: var(--gray-exl);
  border: none;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

.about-link:active { background: var(--gray-l2); }

.about-close-x {
  position: absolute;
  top: 12px;
  right: 12px;
}


/* ═══════════════════════════════════════════
   THÈME SOMBRE
   ═══════════════════════════════════════════ */

/* ═══ THÈME OCÉAN — PROFONDEUR ═══ */
/* Surface (H178) → Abysses (H224) */
/* Dérivées à L progressives : plus on descend, plus tout s'assombrit */
[data-color-theme="ocean"] {
  --header-angle: 90deg;
  /* Revenus — surface — H178 S72 L40 — depth 0 */
  --green-e: #1cafaa;
  --green-em: #4fd8d3;
  --green-el: #a8e5e3;
  --green-el2: #d2eeed;
  --green-exl: #e9f5f5;
  --green-et: #0f7571;
  --green-glow: rgba(28, 175, 170, .10);
  --green-grad1: #a6e7e5;
  --green-grad2: #9ce1e6;
  /* Prélèvements — H184 S74 L38 — depth 1 */
  --coral: #199fa8;
  --coral-m: #46cfd9;
  --coral-l: #9fdfe4;
  --coral-l2: #cbeaec;
  --coral-exl: #e4f2f3;
  --coral-text: #0c676d;
  --coral-glow: rgba(25, 159, 168, .10);
  --coral-grad1: #9ce1e6;
  --coral-grad2: #95d4e1;
  /* Crédits — H190 S70 L36 — depth 2 */
  --gold: #1b869c;
  --gold-m: #45bbd3;
  --gold-l: #9ad3df;
  --gold-l2: #c6e3e8;
  --gold-exl: #dfedf0;
  --gold-text: #0e5462;
  --gold-glow: rgba(27, 134, 156, .10);
  --gold-grad1: #95d4e1;
  --gold-grad2: #89cbe1;
  /* Budget Prévu — H195 S74 L35 — depth 3 */
  --orange: #177a9b;
  --orange-m: #3aafd6;
  --orange-l: #8fcbdf;
  --orange-l2: #bddde8;
  --orange-exl: #d9e9ee;
  --orange-text: #0b4a5f;
  --orange-glow: rgba(23, 122, 155, .10);
  --orange-grad1: #89cbe1;
  --orange-grad2: #82bddd;
  /* Épargne — H201 S72 L33 — depth 4 */
  --teal: #176690;
  --teal-m: #369cd2;
  --teal-l: #89bedb;
  --teal-l2: #b8d5e4;
  --teal-exl: #d4e3ec;
  --teal-text: #0b3b55;
  --teal-glow: rgba(23, 102, 144, .10);
  --teal-grad1: #82bddd;
  --teal-grad2: #77afdd;
  /* Dépenses du Mois — H207 S74 L31 — depth 5 */
  --blue: #145489;
  --blue-m: #2d89d4;
  --blue-l: #7fb1db;
  --blue-l2: #b0cce3;
  --blue-exl: #ceddea;
  --blue-text: #092e4d;
  --glow: rgba(20, 84, 137, .10);
  --blue-grad1: #77afdd;
  --blue-grad2: #719fd7;
  /* Statistiques — H213 S70 L29 — depth 6 */
  --violet: #16447d;
  --violet-m: #2f75ca;
  --violet-l: #7ba3d5;
  --violet-l2: #acc3de;
  --violet-exl: #cad7e6;
  --violet-text: #092342;
  --violet-glow: rgba(22, 68, 125, .10);
  --violet-grad1: #719fd7;
  --violet-grad2: #668fd6;
  /* Comparatif — H218 S72 L28 — depth 7 */
  --rose: #13397a;
  --rose-m: #2b64c6;
  --rose-l: #7195d4;
  --rose-l2: #a4b9dd;
  --rose-exl: #c4d0e4;
  --rose-text: #081c3f;
  --rose-glow: rgba(19, 57, 122, .10);
  --rose-grad1: #668fd6;
  --rose-grad2: #6f84c2;
  /* Réglages — fond marin — H225 S55 L24 — depth 8 */
  --gray: #1b2c5e;
  --gray-m: #3e59ac;
  --gray-l: #7a8cc1;
  --gray-l2: #a9b3cf;
  --gray-exl: #c7ccda;
  --gray-text: #0e1839;
  --gray-glow: rgba(27, 44, 94, .10);
  --gray-grad1: #6f84c2;
  --gray-grad2: #6f84c2;
  --grad-start: #77afdd;
  --grad-end: #719fd7;
  --blue-xl: #ceddea;
  --rainbow: linear-gradient(90deg, #145489, #1cafaa, #177a9b, #199fa8, #16447d, #13397a);
  --rainbow-soft: linear-gradient(90deg, #7fb1db, #a8e5e3, #8fcbdf, #9fdfe4, #7ba3d5, #7195d4);
  --resume-text: #092e4d;
}

/* ═══ THÈME OCÉAN — MODE SOMBRE ═══ */
[data-theme="dark"][data-color-theme="ocean"] {
  --green-el: #186764;
  --green-el2: #0f3836;
  --green-exl: #0b2222;
  --green-grad1: #0f3836;
  --green-grad2: #0e3538;
  --green-glow: rgba(28, 175, 170, .08);
  --coral-l: #166368;
  --coral-l2: #0e3538;
  --coral-exl: #0a2123;
  --coral-grad1: #0e3538;
  --coral-grad2: #103037;
  --coral-glow: rgba(25, 159, 168, .08);
  --gold-l: #195966;
  --gold-l2: #103037;
  --gold-exl: #0b1e22;
  --gold-grad1: #103037;
  --gold-grad2: #0e2e38;
  --gold-glow: rgba(27, 134, 156, .08);
  --orange-l: #165468;
  --orange-l2: #0e2e38;
  --orange-exl: #0a1d23;
  --orange-grad1: #0e2e38;
  --orange-grad2: #0f2938;
  --orange-glow: rgba(23, 122, 155, .08);
  --teal-l: #184b67;
  --teal-l2: #0f2938;
  --teal-exl: #0b1a22;
  --teal-grad1: #0f2938;
  --teal-grad2: #0e2538;
  --teal-glow: rgba(23, 102, 144, .08);
  --blue-l: #164368;
  --blue-l2: #0e2538;
  --blue-exl: #0a1823;
  --blue-grad1: #0e2538;
  --blue-grad2: #102137;
  --glow: rgba(20, 84, 137, .08);
  --violet-l: #193b66;
  --violet-l2: #102137;
  --violet-exl: #0b1522;
  --violet-grad1: #102137;
  --violet-grad2: #0f1e38;
  --violet-glow: rgba(22, 68, 125, .08);
  --rose-l: #183567;
  --rose-l2: #0f1e38;
  --rose-exl: #0b1322;
  --rose-grad1: #0f1e38;
  --rose-grad2: #151c31;
  --rose-glow: rgba(19, 57, 122, .08);
  --gray-l: #23315c;
  --gray-l2: #151c31;
  --gray-exl: #0e121e;
  --gray-grad1: #151c31;
  --gray-grad2: #121725;
  --gray-glow: rgba(27, 44, 94, .08);
  --blue-xl: #0a1823;
  --grad-start: #0e2538;
  --grad-end: #102137;
  --rainbow-soft: linear-gradient(90deg, #123653, #135250, #124353, #124f53, #142f51, #132a52);
}
/* Boutons dark ocean */
[data-theme="dark"][data-color-theme="ocean"] .btn-primary {
  background: linear-gradient(135deg, #092942, #072035) !important;
  box-shadow: 0 2px 8px rgba(17,73,119,.15) !important;
}
[data-theme="dark"][data-color-theme="ocean"] .btn-add-revenu,
[data-theme="dark"][data-color-theme="ocean"] .btn-green {
  background: linear-gradient(135deg, #0c4e4c, #093d3b) !important;
  box-shadow: 0 2px 8px rgba(22,140,136,.15) !important;
}
[data-theme="dark"][data-color-theme="ocean"] .btn-add-prelev,
[data-theme="dark"][data-color-theme="ocean"] .btn-coral {
  background: linear-gradient(135deg, #0b474b, #083639) !important;
  box-shadow: 0 2px 8px rgba(19,125,133,.15) !important;
}
[data-theme="dark"][data-color-theme="ocean"] .btn-add-credit,
[data-theme="dark"][data-color-theme="ocean"] .btn-gold {
  background: linear-gradient(135deg, #0c3b45, #092c34) !important;
  box-shadow: 0 2px 8px rgba(21,104,121,.15) !important;
  color: #86c7d4 !important;
}
[data-theme="dark"][data-color-theme="ocean"] .btn-add-budget,
[data-theme="dark"][data-color-theme="ocean"] .btn-orange {
  background: linear-gradient(135deg, #0a3746, #072935) !important;
  box-shadow: 0 2px 8px rgba(18,97,124,.15) !important;
}
[data-theme="dark"][data-color-theme="ocean"] .btn-add-epargne,
[data-theme="dark"][data-color-theme="ocean"] .btn-teal {
  background: linear-gradient(135deg, #0a2e41, #072230) !important;
  box-shadow: 0 2px 8px rgba(18,80,114,.15) !important;
}


/* ═══ THÈME FORÊT — CANOPÉE → SOL ═══ */
/* Canopée (H80, vert tilleul) → Sol forestier (H160, mousse) */
[data-color-theme="forest"] {
  --header-angle: 90deg;
  /* Revenus — canopée (vert tilleul) — H80 S65 L38 — depth 0 */
  --green-e: #759f21;
  --green-em: #a8d056;
  --green-el: #cfe1ac;
  --green-el2: #e4ecd4;
  --green-exl: #f1f4ea;
  --green-et: #4b6812;
  --green-glow: rgba(117, 159, 33, .10);
  --green-grad1: #d0e3aa;
  --green-grad2: #c1dda4;
  /* Prélèvements — feuillage clair — H90 S60 L36 — depth 1 */
  --coral: #5b9224;
  --coral-m: #90c956;
  --coral-l: #c1dba8;
  --coral-l2: #dbe7d0;
  --coral-exl: #ebf0e6;
  --coral-text: #385c13;
  --coral-glow: rgba(91, 146, 36, .10);
  --coral-grad1: #c1dda4;
  --coral-grad2: #b2d79f;
  /* Crédits — vert pomme — H100 S55 L34 — depth 2 */
  --gold: #468627;
  --gold-m: #7ac256;
  --gold-l: #b4d5a4;
  --gold-l2: #d3e2cc;
  --gold-exl: #e6ece3;
  --gold-text: #285114;
  --gold-glow: rgba(70, 134, 39, .10);
  --gold-grad1: #b2d79f;
  --gold-grad2: #98d892;
  /* Budget Prévu — vert forêt — H115 S62 L32 — depth 3 */
  --orange: #27841f;
  --orange-m: #53c848;
  --orange-l: #9dd798;
  --orange-l2: #c5e2c3;
  --orange-exl: #ddebdc;
  --orange-text: #144c0f;
  --orange-glow: rgba(39, 132, 31, .10);
  --orange-grad1: #98d892;
  --orange-grad2: #8dd298;
  /* Épargne — vert émeraude — H130 S58 L30 — depth 4 */
  --teal: #20782e;
  --teal-m: #47c15b;
  --teal-l: #93d19e;
  --teal-l2: #bfdec4;
  --teal-exl: #d9e7db;
  --teal-text: #0f4217;
  --teal-glow: rgba(32, 120, 46, .10);
  --teal-grad1: #8dd298;
  --teal-grad2: #83d19f;
  /* Dépenses — vert profond — H142 S60 L28 — depth 5 */
  --blue: #1c723b;
  --blue-m: #3fc26f;
  --blue-l: #8bcfa4;
  --blue-l2: #b8dcc5;
  --blue-exl: #d3e5da;
  --blue-text: #0c3a1d;
  --glow: rgba(28, 114, 59, .10);
  --blue-grad1: #83d19f;
  --blue-grad2: #7fc9a4;
  /* Statistiques — mousse — H150 S55 L26 — depth 6 */
  --violet: #1d6642;
  --violet-m: #42b77c;
  --violet-l: #88c8a8;
  --violet-l2: #b4d6c5;
  --violet-exl: #d0e0d8;
  --violet-text: #0e3923;
  --violet-glow: rgba(29, 102, 66, .10);
  --violet-grad1: #7fc9a4;
  --violet-grad2: #7cc1a7;
  /* Comparatif — sous-bois — H158 S50 L24 — depth 7 */
  --rose: #1e5b45;
  --rose-m: #46ab86;
  --rose-l: #85c0ab;
  --rose-l2: #b2d0c5;
  --rose-exl: #cedbd6;
  --rose-text: #103728;
  --rose-glow: rgba(30, 91, 69, .10);
  --rose-grad1: #7cc1a7;
  --rose-grad2: #7eb397;
  /* Réglages — sol forestier — H148 S40 L20 — depth 8 */
  --gray: #1e4731;
  --gray-m: #4f9a72;
  --gray-l: #88b39c;
  --gray-l2: #b3c5bc;
  --gray-exl: #cdd4d0;
  --gray-text: #133322;
  --gray-glow: rgba(30, 71, 49, .10);
  --gray-grad1: #7eb397;
  --gray-grad2: #7eb397;
  --grad-start: #83d19f;
  --grad-end: #7fc9a4;
  --blue-xl: #d3e5da;
  --rainbow: linear-gradient(90deg, #1c723b, #759f21, #27841f, #5b9224, #1d6642, #1e5b45);
  --rainbow-soft: linear-gradient(90deg, #8bcfa4, #cfe1ac, #9dd798, #c1dba8, #88c8a8, #85c0ab);
  --resume-text: #0c3a1d;
}

/* ═══ THÈME FORÊT — MODE SOMBRE ═══ */
[data-theme="dark"][data-color-theme="forest"] {
  --green-el: #4b621c;
  --green-el2: #293511;
  --green-exl: #1a210c;
  --green-grad1: #293511;
  --green-grad2: #233313;
  --green-glow: rgba(117, 159, 33, .08);
  --coral-l: #3f5f1f;
  --coral-l2: #233313;
  --coral-exl: #16200d;
  --coral-grad1: #233313;
  --coral-grad2: #1e3115;
  --coral-glow: rgba(91, 146, 36, .08);
  --gold-l: #365c23;
  --gold-l2: #1e3115;
  --gold-exl: #141e0e;
  --gold-grad1: #1e3115;
  --gold-grad2: #153412;
  --gold-glow: rgba(70, 134, 39, .08);
  --orange-l: #24601e;
  --orange-l2: #153412;
  --orange-exl: #0e200d;
  --orange-grad1: #153412;
  --orange-grad2: #143319;
  --orange-glow: rgba(39, 132, 31, .08);
  --teal-l: #215e2b;
  --teal-l2: #143319;
  --teal-exl: #0e1f11;
  --teal-grad1: #143319;
  --teal-grad2: #13331f;
  --teal-glow: rgba(32, 120, 46, .08);
  --blue-l: #1f5f37;
  --blue-l2: #13331f;
  --blue-exl: #0d2014;
  --blue-grad1: #13331f;
  --blue-grad2: #153123;
  --glow: rgba(28, 114, 59, .08);
  --violet-l: #235c3f;
  --violet-l2: #153123;
  --violet-exl: #0e1e16;
  --violet-grad1: #153123;
  --violet-grad2: #173027;
  --violet-glow: rgba(29, 102, 66, .08);
  --rose-l: #265946;
  --rose-l2: #173027;
  --rose-exl: #101d18;
  --rose-grad1: #173027;
  --rose-grad2: #1a2c23;
  --rose-glow: rgba(30, 91, 69, .08);
  --gray-l: #2c523e;
  --gray-l2: #1a2c23;
  --gray-exl: #121b16;
  --gray-grad1: #1a2c23;
  --gray-grad2: #16211b;
  --gray-glow: rgba(30, 71, 49, .08);
  --blue-xl: #0d2014;
  --grad-start: #13331f;
  --grad-end: #153123;
  --rainbow-soft: linear-gradient(90deg, #194c2c, #3c4f16, #1c4d18, #334c19, #1c4933, #1e4738);
}

/* Boutons dark forêt */
[data-theme="dark"][data-color-theme="forest"] .btn-primary {
  background: linear-gradient(135deg, #0f3d20, #0c3019) !important;
  box-shadow: 0 2px 8px rgba(27,110,57,.15) !important;
}
[data-theme="dark"][data-color-theme="forest"] .btn-add-revenu,
[data-theme="dark"][data-color-theme="forest"] .btn-green {
  background: linear-gradient(135deg, #2e3f0d, #25320a) !important;
  box-shadow: 0 2px 8px rgba(83,113,24,.15) !important;
}
[data-theme="dark"][data-color-theme="forest"] .btn-add-prelev,
[data-theme="dark"][data-color-theme="forest"] .btn-coral {
  background: linear-gradient(135deg, #263d0f, #1e300c) !important;
  box-shadow: 0 2px 8px rgba(68,110,27,.15) !important;
}
[data-theme="dark"][data-color-theme="forest"] .btn-add-credit,
[data-theme="dark"][data-color-theme="forest"] .btn-gold {
  background: linear-gradient(135deg, #1f3b11, #182f0d) !important;
  box-shadow: 0 2px 8px rgba(56,106,30,.15) !important;
  color: #c6dbbc !important;
}
[data-theme="dark"][data-color-theme="forest"] .btn-add-budget,
[data-theme="dark"][data-color-theme="forest"] .btn-orange {
  background: linear-gradient(135deg, #123d0e, #0e310b) !important;
  box-shadow: 0 2px 8px rgba(33,111,26,.15) !important;
}
[data-theme="dark"][data-color-theme="forest"] .btn-add-epargne,
[data-theme="dark"][data-color-theme="forest"] .btn-teal {
  background: linear-gradient(135deg, #103c17, #0c3012) !important;
  box-shadow: 0 2px 8px rgba(28,108,42,.15) !important;
}


/* ═══ THÈME CRÉPUSCULE — COUCHER DE SOLEIL ÉCLATANT ═══ */
/* Doré vif (H48) → Orange → Rouge → Crépuscule (H335) */
/* Headers en dégradé inter-pages pour continuité totale */
[data-color-theme="crepuscule"] {
  --header-angle: 90deg;
  /* Revenus — soleil doré éclatant — H48 S80 L52 — depth 0 */
  --green-e: #e6bf22;
  --green-em: #e5c956;
  --green-el: #f0e3b1;
  --green-el2: #f5eed5;
  --green-exl: #f9f6eb;
  --green-et: #9c821b;
  --green-glow: rgba(230, 191, 34, .10);
  --green-grad1: #ecd98c;
  --green-grad2: #e9c987;
  /* Prélèvements — or vif — H40 S78 L48 — depth 1 */
  --coral: #d99a1a;
  --coral-m: #e2b252;
  --coral-l: #edd7ab;
  --coral-l2: #f3e8d1;
  --coral-exl: #f7f2e7;
  --coral-text: #8a6418;
  --coral-glow: rgba(217, 154, 26, .10);
  --coral-grad1: #e9c987;
  --coral-grad2: #eab87f;
  /* Crédits — orange doré intense — H32 S80 L44 — depth 2 */
  --gold: #c97616;
  --gold-m: #e49c4b;
  --gold-l: #edcaa2;
  --gold-l2: #f2e0cb;
  --gold-exl: #f7ede3;
  --gold-text: #794a15;
  --gold-glow: rgba(201, 118, 22, .10);
  --gold-grad1: #eab87f;
  --gold-grad2: #e7a27a;
  /* Budget Prévu — orange vif — H22 S78 L42 — depth 3 */
  --orange: #be5417;
  --orange-m: #e18047;
  --orange-l: #eab99c;
  --orange-l2: #f0d6c6;
  --orange-exl: #f5e7df;
  --orange-text: #703513;
  --orange-glow: rgba(190, 84, 23, .10);
  --orange-grad1: #e7a27a;
  --orange-grad2: #e49076;
  /* Épargne — orange-rouge lumineux — H14 S75 L40 — depth 4 */
  --teal: #b23d19;
  --teal-m: #dd6845;
  --teal-l: #e7a997;
  --teal-l2: #eecdc2;
  --teal-exl: #f3e1dc;
  --teal-text: #682612;
  --teal-glow: rgba(178, 61, 25, .10);
  --teal-grad1: #e49076;
  --teal-grad2: #e07d72;
  /* Dépenses — rouge-orange — H6 S72 L38 — depth 5 */
  --blue: #a6291b;
  --blue-m: #d85243;
  --blue-l: #e39a91;
  --blue-l2: #ebc3bf;
  --blue-exl: #f1dbd9;
  --blue-text: #5f1810;
  --glow: rgba(166, 41, 27, .10);
  --blue-grad1: #e07d72;
  --blue-grad2: #d87279;
  /* Statistiques — rouge crépuscule — H356 S65 L35 — depth 6 */
  --violet: #931f26;
  --violet-m: #cf464f;
  --violet-l: #dc8f94;
  --violet-l2: #e7bdc0;
  --violet-exl: #eed7d8;
  --violet-text: #520e13;
  --violet-glow: rgba(147, 31, 38, .10);
  --violet-grad1: #d87279;
  --violet-grad2: #cd768c;
  /* Comparatif — rouge sombre — H345 S55 L30 — depth 7 */
  --rose: #762237;
  --rose-m: #c24d6a;
  --rose-l: #d390a1;
  --rose-l2: #e0bdc6;
  --rose-exl: #e9d6db;
  --rose-text: #390e18;
  --rose-glow: rgba(118, 34, 55, .10);
  --rose-grad1: #cd768c;
  --rose-grad2: #bd7f98;
  /* Réglages — crépuscule — H335 S40 L26 — depth 8 */
  --gray: #5c273d;
  --gray-m: #ae5a7d;
  --gray-l: #c496a9;
  --gray-l2: #d7c0ca;
  --gray-exl: #e3d8dc;
  --gray-text: #2c101c;
  --gray-glow: rgba(92, 39, 61, .10);
  --gray-grad1: #bd7f98;
  --gray-grad2: #bd7f98;
  --grad-start: #e07d72;
  --grad-end: #d87279;
  --blue-xl: #f1dbd9;
  --rainbow: linear-gradient(90deg, #a6291b, #e6bf22, #be5417, #d99a1a, #931f26, #762237);
  --rainbow-soft: linear-gradient(90deg, #e39a91, #f0e3b1, #eab99c, #edd7ab, #dc8f94, #d390a1);
  --resume-text: #5f1810;
}

/* ═══ THÈME CRÉPUSCULE — MODE SOMBRE ═══ */
[data-theme="dark"][data-color-theme="crepuscule"] {
  --green-el: #6c5a13;
  --green-el2: #3a310c;
  --green-exl: #241f09;
  --green-grad1: #3a310c;
  --green-grad2: #3a2b0d;
  --green-glow: rgba(230, 191, 34, .08);
  --coral-l: #6b4e14;
  --coral-l2: #3a2b0d;
  --coral-exl: #241b09;
  --coral-grad1: #3a2b0d;
  --coral-grad2: #3a250c;
  --coral-glow: rgba(217, 154, 26, .08);
  --gold-l: #6c4213;
  --gold-l2: #3a250c;
  --gold-exl: #241709;
  --gold-grad1: #3a250c;
  --gold-grad2: #3a1d0d;
  --gold-glow: rgba(201, 118, 22, .08);
  --orange-l: #6b3414;
  --orange-l2: #3a1d0d;
  --orange-exl: #241309;
  --orange-grad1: #3a1d0d;
  --orange-grad2: #39180e;
  --orange-glow: rgba(190, 84, 23, .08);
  --teal-l: #692916;
  --teal-l2: #39180e;
  --teal-exl: #23100a;
  --teal-grad1: #39180e;
  --teal-grad2: #38130f;
  --teal-glow: rgba(178, 61, 25, .08);
  --blue-l: #672018;
  --blue-l2: #38130f;
  --blue-exl: #220d0b;
  --blue-grad1: #38130f;
  --blue-grad2: #351114;
  --glow: rgba(166, 41, 27, .08);
  --violet-l: #621c21;
  --violet-l2: #351114;
  --violet-exl: #210c0d;
  --violet-grad1: #351114;
  --violet-grad2: #31151c;
  --violet-glow: rgba(147, 31, 38, .08);
  --rose-l: #5c2331;
  --rose-l2: #31151c;
  --rose-exl: #1e0e12;
  --rose-grad1: #31151c;
  --rose-grad2: #2c1a22;
  --rose-glow: rgba(118, 34, 55, .08);
  --gray-l: #522c3c;
  --gray-l2: #2c1a22;
  --gray-exl: #1b1216;
  --gray-grad1: #2c1a22;
  --gray-grad2: #21161b;
  --gray-glow: rgba(92, 39, 61, .08);
  --blue-xl: #220d0b;
  --grad-start: #38130f;
  --grad-end: #351114;
  --rainbow-soft: linear-gradient(90deg, #672018, #6c5a13, #6b3414, #6b4e14, #621c21, #5c2331);
}

/* Boutons dark crépuscule */
[data-theme="dark"][data-color-theme="crepuscule"] .btn-primary {
  background: linear-gradient(135deg, #41100a, #340c08) !important;
  box-shadow: 0 2px 8px rgba(118,29,19,.15) !important;
}
[data-theme="dark"][data-color-theme="crepuscule"] .btn-add-revenu,
[data-theme="dark"][data-color-theme="crepuscule"] .btn-green {
  background: linear-gradient(135deg, #443807, #372d06) !important;
  box-shadow: 0 2px 8px rgba(123,101,13,.15) !important;
}
[data-theme="dark"][data-color-theme="crepuscule"] .btn-add-prelev,
[data-theme="dark"][data-color-theme="crepuscule"] .btn-coral {
  background: linear-gradient(135deg, #443008, #362606) !important;
  box-shadow: 0 2px 8px rgba(122,86,15,.15) !important;
}
[data-theme="dark"][data-color-theme="crepuscule"] .btn-add-credit,
[data-theme="dark"][data-color-theme="crepuscule"] .btn-gold {
  background: linear-gradient(135deg, #442807, #372006) !important;
  box-shadow: 0 2px 8px rgba(123,72,13,.15) !important;
  color: #dbcdbc !important;
}
[data-theme="dark"][data-color-theme="crepuscule"] .btn-add-budget,
[data-theme="dark"][data-color-theme="crepuscule"] .btn-orange {
  background: linear-gradient(135deg, #441e08, #361806) !important;
  box-shadow: 0 2px 8px rgba(122,54,15,.15) !important;
}
[data-theme="dark"][data-color-theme="crepuscule"] .btn-add-epargne,
[data-theme="dark"][data-color-theme="crepuscule"] .btn-teal {
  background: linear-gradient(135deg, #421609, #351207) !important;
  box-shadow: 0 2px 8px rgba(120,41,17,.15) !important;
}


/* ═══ THÈME PRESTIGE — OR & ÉLÉGANCE ═══ */
/* Toutes les pages en or/champagne — pas de dégradé de profondeur */
[data-color-theme="prestige"] {
  /* Revenus — H45 S55 L40 */
  --green-e: #9e822d;
  --green-em: #c8ae5f;
  --green-el: #dfd2ae;
  --green-el2: #ebe6d5;
  --green-exl: #f4f2ea;
  --green-et: #614f18;
  --green-glow: rgba(158, 130, 45, .10);
  --green-grad1: #dfd2ae;
  --green-grad2: #dfd5b8;
  /* Prélèvements — H44 S53 L39 */
  --coral: #987c2e;
  --coral-m: #c6ab61;
  --coral-l: #ddd1af;
  --coral-l2: #ebe5d5;
  --coral-exl: #f4f1eb;
  --coral-text: #5c4a18;
  --coral-glow: rgba(152, 124, 46, .10);
  --coral-grad1: #ddd1af;
  --coral-grad2: #ded4b9;
  /* Crédits — H42 S55 L38 */
  --gold: #96762b;
  --gold-m: #c8a85f;
  --gold-l: #dfd0ae;
  --gold-l2: #ebe4d5;
  --gold-exl: #f4f1ea;
  --gold-text: #594516;
  --gold-glow: rgba(150, 118, 43, .10);
  --gold-grad1: #dfd0ae;
  --gold-grad2: #dfd3b8;
  /* Budget Prévu — H41 S52 L37 */
  --orange: #8f702d;
  --orange-m: #c5a562;
  --orange-l: #ddcfb0;
  --orange-l2: #eae4d5;
  --orange-exl: #f3f1eb;
  --orange-text: #544017;
  --orange-glow: rgba(143, 112, 45, .10);
  --orange-grad1: #ddcfb0;
  --orange-grad2: #ded2b9;
  /* Épargne — H40 S55 L36 */
  --teal: #8e6c29;
  --teal-m: #c8a55f;
  --teal-l: #dfceae;
  --teal-l2: #ebe4d5;
  --teal-exl: #f4f1ea;
  --teal-text: #513d14;
  --teal-glow: rgba(142, 108, 41, .10);
  --teal-grad1: #dfceae;
  --teal-grad2: #dfd2b8;
  /* Dépenses — H42 S54 L38 */
  --blue: #95752c;
  --blue-m: #c7a860;
  --blue-l: #ded0af;
  --blue-l2: #ebe4d5;
  --blue-exl: #f4f1eb;
  --blue-text: #594517;
  --glow: rgba(149, 117, 44, .10);
  --blue-grad1: #ded0af;
  --blue-grad2: #dfd3b8;
  /* Statistiques — H43 S52 L37 */
  --violet: #8f732d;
  --violet-m: #c5a962;
  --violet-l: #ddd0b0;
  --violet-l2: #eae4d5;
  --violet-exl: #f3f1eb;
  --violet-text: #544217;
  --violet-glow: rgba(143, 115, 45, .10);
  --violet-grad1: #ddd0b0;
  --violet-grad2: #ded3b9;
  /* Comparatif — H41 S53 L36 */
  --rose: #8c6d2b;
  --rose-m: #c6a661;
  --rose-l: #ddcfaf;
  --rose-l2: #ebe4d5;
  --rose-exl: #f4f1eb;
  --rose-text: #503d15;
  --rose-glow: rgba(140, 109, 43, .10);
  --rose-grad1: #ddcfaf;
  --rose-grad2: #ded2b9;
  /* Réglages — H40 S48 L34 */
  --gray: #80642d;
  --gray-m: #c0a266;
  --gray-l: #dbcdb2;
  --gray-l2: #e9e3d7;
  --gray-exl: #f3f0ec;
  --gray-text: #463615;
  --gray-glow: rgba(128, 100, 45, .10);
  --gray-grad1: #dbcdb2;
  --gray-grad2: #dcd1bb;
  --grad-start: #ded0af;
  --grad-end: #dfd3b8;
  --blue-xl: #f4f1eb;
  --rainbow: linear-gradient(90deg, #95752c, #9e822d, #8f702d, #987c2e, #8f732d, #8c6d2b);
  --rainbow-soft: linear-gradient(90deg, #ded0af, #dfd2ae, #ddcfb0, #ddd1af, #ddd0b0, #ddcfaf);
  --resume-text: #594517;
}

/* ═══ THÈME PRESTIGE — MODE SOMBRE (NOIR + OR) ═══ */
/* Fond noir profond, texte doré, accents or — style banque privée */
[data-theme="dark"][data-color-theme="prestige"] {
  /* Fond noir chaud teinté or */
  --bg: #0c0b08;
  --bg-card: #16140e;
  --bg-soft: #1e1b14;
  --ink: #e2cd9c;
  --ink-soft: #c6ab6b;
  --muted: #958050;
  --green-el: #54461c;
  --green-el2: #3b3116;
  --green-exl: #231e0f;
  --green-grad1: #443916;
  --green-grad2: #332b13;
  --green-glow: rgba(150, 123, 43, .12);
  --coral-l: #53441d;
  --coral-l2: #3a3017;
  --coral-exl: #231e0f;
  --coral-grad1: #433817;
  --coral-grad2: #332a14;
  --coral-glow: rgba(148, 120, 45, .12);
  --gold-l: #54431c;
  --gold-l2: #3b3016;
  --gold-exl: #231d0f;
  --gold-grad1: #443716;
  --gold-grad2: #332a13;
  --gold-glow: rgba(150, 118, 43, .12);
  --orange-l: #52411d;
  --orange-l2: #392f17;
  --orange-exl: #221c10;
  --orange-grad1: #433518;
  --orange-grad2: #322914;
  --orange-glow: rgba(147, 115, 46, .12);
  --teal-l: #54411c;
  --teal-l2: #3b2e16;
  --teal-exl: #231c0f;
  --teal-grad1: #443516;
  --teal-grad2: #332913;
  --teal-glow: rgba(150, 114, 43, .12);
  --blue-l: #53431c;
  --blue-l2: #3a2f16;
  --blue-exl: #231d0f;
  --blue-grad1: #443617;
  --blue-grad2: #332913;
  --glow: rgba(149, 117, 44, .12);
  --violet-l: #52431d;
  --violet-l2: #393017;
  --violet-exl: #221d10;
  --violet-grad1: #433718;
  --violet-grad2: #322a14;
  --violet-glow: rgba(147, 118, 46, .12);
  --rose-l: #53411d;
  --rose-l2: #3a2f17;
  --rose-exl: #231d0f;
  --rose-grad1: #433517;
  --rose-grad2: #332914;
  --rose-glow: rgba(148, 115, 45, .12);
  --gray-l: #50401f;
  --gray-l2: #382d19;
  --gray-exl: #211c11;
  --gray-grad1: #41341a;
  --gray-grad2: #312816;
  --gray-glow: rgba(143, 112, 50, .12);
  --blue-xl: #231d0f;
  --grad-start: #443617;
  --grad-end: #332913;
  --rainbow-soft: linear-gradient(90deg, #53431c, #54461c, #52411d, #53441d, #52431d, #53411d);
}

/* Boutons dark prestige — or sur noir */
[data-theme="dark"][data-color-theme="prestige"] .btn-primary {
  background: linear-gradient(135deg, #463715, #362b10) !important;
  box-shadow: 0 2px 8px rgba(117,93,35,.15) !important;
  color: #dbcaa2 !important;
}
[data-theme="dark"][data-color-theme="prestige"] .btn-add-revenu,
[data-theme="dark"][data-color-theme="prestige"] .btn-green {
  background: linear-gradient(135deg, #473a14, #372d10) !important;
  box-shadow: 0 2px 8px rgba(118,97,34,.15) !important;
  color: #dbcda2 !important;
}
[data-theme="dark"][data-color-theme="prestige"] .btn-add-prelev,
[data-theme="dark"][data-color-theme="prestige"] .btn-coral {
  background: linear-gradient(135deg, #463915, #362c10) !important;
  box-shadow: 0 2px 8px rgba(117,95,35,.15) !important;
  color: #dbcca2 !important;
}
[data-theme="dark"][data-color-theme="prestige"] .btn-add-credit,
[data-theme="dark"][data-color-theme="prestige"] .btn-gold {
  background: linear-gradient(135deg, #473714, #372b10) !important;
  box-shadow: 0 2px 8px rgba(118,93,34,.15) !important;
  color: #dbcaa2 !important;
}
[data-theme="dark"][data-color-theme="prestige"] .btn-add-budget,
[data-theme="dark"][data-color-theme="prestige"] .btn-orange {
  background: linear-gradient(135deg, #453616, #362a11) !important;
  box-shadow: 0 2px 8px rgba(116,91,36,.15) !important;
  color: #dbc9a2 !important;
}
[data-theme="dark"][data-color-theme="prestige"] .btn-add-epargne,
[data-theme="dark"][data-color-theme="prestige"] .btn-teal {
  background: linear-gradient(135deg, #473614, #372a10) !important;
  box-shadow: 0 2px 8px rgba(118,90,34,.15) !important;
  color: #dbc8a2 !important;
}

/* ═══ THÈME ARCADE — NÉON RÉTRO ═══ */
/* Couleurs vives, coins pixelisés, ambiance jeu vidéo */
[data-color-theme="arcade"] {
  /* Style pixel */
  --radius: 4px;
  --radius-sm: 2px;
  /* Revenus — vert arcade — H142 S72 L46 */
  --green-e: #20c95e;
  --green-em: #5ede8d;
  --green-el: #aee9c4;
  --green-el2: #d1efdc;
  --green-exl: #e8f6ed;
  --green-et: #15793a;
  --green-glow: rgba(32, 201, 94, .12);
  --green-grad1: #a6e7be;
  --green-grad2: #7adf9f;
  /* Prélèvements — cyan — H188 S80 L43 */
  --coral: #15adc5;
  --coral-m: #56d2e5;
  --coral-l: #aae4ed;
  --coral-l2: #ceedf2;
  --coral-exl: #e7f5f7;
  --coral-text: #13606c;
  --coral-glow: rgba(21, 173, 197, .12);
  --coral-grad1: #a1e2eb;
  --coral-grad2: #74d7e6;
  /* Crédits — jaune néon — H48 S88 L48 */
  --gold: #e6bb0e;
  --gold-m: #edcd4e;
  --gold-l: #f1e2a6;
  --gold-l2: #f4eccc;
  --gold-exl: #f8f5e6;
  --gold-text: #826c16;
  --gold-glow: rgba(230, 187, 14, .12);
  --gold-grad1: #f0df9d;
  --gold-grad2: #edd36d;
  /* Budget Prévu — orange néon — H25 S90 L52 */
  --orange: #f27216;
  --orange-m: #ef904c;
  --orange-l: #f2c5a5;
  --orange-l2: #f5dccb;
  --orange-exl: #f9eee6;
  --orange-text: #934c1a;
  --orange-glow: rgba(242, 114, 22, .12);
  --orange-grad1: #f1bf9c;
  --orange-grad2: #eea26c;
  /* Épargne — magenta — H322 S75 L46 */
  --teal: #cd1d8c;
  --teal-m: #e05baf;
  --teal-l: #ebacd4;
  --teal-l2: #f0d0e4;
  --teal-exl: #f6e8f1;
  --teal-text: #791554;
  --teal-glow: rgba(205, 29, 140, .12);
  --teal-grad1: #e9a4d0;
  --teal-grad2: #e278bb;
  /* Dépenses — bleu néon — H217 S85 L55 */
  --blue: #2a75ed;
  --blue-m: #518cea;
  --blue-l: #a7c3f0;
  --blue-l2: #cddbf3;
  --blue-exl: #e6edf8;
  --blue-text: #1c4ea0;
  --glow: rgba(42, 117, 237, .12);
  --blue-grad1: #9fbdee;
  --blue-grad2: #709fea;
  /* Statistiques — rouge néon — H0 S80 L55 */
  --violet: #e83030;
  --violet-m: #e55656;
  --violet-l: #edaaaa;
  --violet-l2: #f2cece;
  --violet-exl: #f7e7e7;
  --violet-text: #a01c1c;
  --violet-glow: rgba(232, 48, 48, .12);
  --violet-grad1: #eba1a1;
  --violet-grad2: #e67474;
  /* Comparatif — violet néon — H271 S75 L52 */
  --rose: #8728e0;
  --rose-m: #a05be0;
  --rose-l: #cdaceb;
  --rose-l2: #e0d0f0;
  --rose-exl: #efe8f6;
  --rose-text: #581a93;
  --rose-glow: rgba(135, 40, 224, .12);
  --rose-grad1: #c8a4e9;
  --rose-grad2: #af78e2;
  /* Réglages — gris arcade — H220 S20 L42 */
  --gray: #556380;
  --gray-m: #8a97b1;
  --gray-l: #c5c9d2;
  --gray-l2: #dddfe2;
  --gray-exl: #eeeff0;
  --gray-text: #2d384c;
  --gray-glow: rgba(85, 99, 128, .12);
  --gray-grad1: #c0c4cd;
  --gray-grad2: #a1a9b9;
  --grad-start: #5f95ec;
  --grad-end: #709fea;
  --blue-xl: #e6edf8;
  --rainbow: linear-gradient(90deg, #2a75ed, #20c95e, #f27216, #15adc5, #e83030, #8728e0);
  --rainbow-soft: linear-gradient(90deg, #a7c3f0, #aee9c4, #f2c5a5, #aae4ed, #edaaaa, #cdaceb);
  --resume-text: #1c4ea0;
}

/* ═══ THÈME ARCADE — MODE SOMBRE (NÉON SUR NOIR) ═══ */
[data-theme="dark"][data-color-theme="arcade"] {
  --radius: 4px;
  --radius-sm: 2px;
  --bg: #0a0a0e;
  --bg-card: #12121a;
  --bg-soft: #1a1a24;
  --green-el: #125d2e;
  --green-el2: #0d391d;
  --green-exl: #092413;
  --green-grad1: #0f4c25;
  --green-grad2: #0d391d;
  --green-glow: rgba(32, 201, 94, .15);
  --coral-l: #0e5662;
  --coral-l2: #0a363c;
  --coral-exl: #082125;
  --coral-grad1: #0b4750;
  --coral-grad2: #0a363c;
  --coral-glow: rgba(23, 186, 211, .15);
  --gold-l: #665409;
  --gold-l2: #3f3407;
  --gold-exl: #272106;
  --gold-grad1: #534407;
  --gold-grad2: #3f3407;
  --gold-glow: rgba(220, 179, 14, .15);
  --orange-l: #673008;
  --orange-l2: #401e07;
  --orange-exl: #281405;
  --orange-grad1: #542706;
  --orange-grad2: #401e07;
  --orange-glow: rgba(222, 99, 11, .15);
  --teal-l: #5f1042;
  --teal-l2: #3a0c29;
  --teal-exl: #24091a;
  --teal-grad1: #4e0d36;
  --teal-grad2: #3a0c29;
  --teal-glow: rgba(205, 29, 140, .15);
  --blue-l: #0b2d64;
  --blue-l2: #081d3e;
  --blue-exl: #061327;
  --blue-grad1: #092552;
  --blue-grad2: #081d3e;
  --glow: rgba(17, 94, 217, .15);
  --violet-l: #620e0e;
  --violet-l2: #3c0a0a;
  --violet-exl: #250808;
  --violet-grad1: #500b0b;
  --violet-grad2: #3c0a0a;
  --violet-glow: rgba(211, 23, 23, .15);
  --rose-l: #39105f;
  --rose-l2: #240c3a;
  --rose-exl: #170924;
  --rose-grad1: #2e0d4e;
  --rose-grad2: #240c3a;
  --rose-glow: rgba(120, 29, 205, .15);
  --gray-l: #2f3540;
  --gray-l2: #1f2227;
  --gray-exl: #151618;
  --gray-grad1: #272b34;
  --gray-grad2: #1f2227;
  --gray-glow: rgba(93, 109, 140, .15);
  --blue-xl: #061327;
  --grad-start: #092552;
  --grad-end: #081d3e;
  --rainbow-soft: linear-gradient(90deg, #0b2d64, #125d2e, #673008, #0e5662, #620e0e, #39105f);
}

/* Boutons dark arcade — néon */
[data-theme="dark"][data-color-theme="arcade"] .btn-primary {
  background: linear-gradient(135deg, #062454, #051c42) !important;
  box-shadow: 0 2px 8px rgba(11,61,141,.2) !important;
  border-radius: 4px !important;
}
[data-theme="dark"][data-color-theme="arcade"] .btn-add-revenu,
[data-theme="dark"][data-color-theme="arcade"] .btn-green {
  background: linear-gradient(135deg, #0c4e25, #093d1c) !important;
  box-shadow: 0 2px 8px rgba(21,131,61,.2) !important;
  border-radius: 4px !important;
}
[data-theme="dark"][data-color-theme="arcade"] .btn-add-prelev,
[data-theme="dark"][data-color-theme="arcade"] .btn-coral {
  background: linear-gradient(135deg, #094852, #073840) !important;
  box-shadow: 0 2px 8px rgba(15,121,137,.2) !important;
  border-radius: 4px !important;
}
[data-theme="dark"][data-color-theme="arcade"] .btn-add-credit,
[data-theme="dark"][data-color-theme="arcade"] .btn-gold {
  background: linear-gradient(135deg, #564605, #433604) !important;
  box-shadow: 0 2px 8px rgba(143,116,9,.2) !important;
  border-radius: 4px !important;
}
[data-theme="dark"][data-color-theme="arcade"] .btn-add-budget,
[data-theme="dark"][data-color-theme="arcade"] .btn-orange {
  background: linear-gradient(135deg, #572704, #431e03) !important;
  box-shadow: 0 2px 8px rgba(145,65,7,.2) !important;
  border-radius: 4px !important;
}
[data-theme="dark"][data-color-theme="arcade"] .btn-add-epargne,
[data-theme="dark"][data-color-theme="arcade"] .btn-teal {
  background: linear-gradient(135deg, #500b37, #3e082a) !important;
  box-shadow: 0 2px 8px rgba(133,19,91,.2) !important;
  border-radius: 4px !important;
}

/* ═══ ARCADE — Style pixel sur TOUS les éléments ═══ */

/* Cards & conteneurs */
[data-color-theme="arcade"] .card,
[data-color-theme="arcade"] .depense-row,
[data-color-theme="arcade"] .total-card,
[data-color-theme="arcade"] .resume-row,
[data-color-theme="arcade"] .resume-item,
[data-color-theme="arcade"] .resume-prev-month-card,
[data-color-theme="arcade"] .revenu-row,
[data-color-theme="arcade"] .prelev-row,
[data-color-theme="arcade"] .budget-row,
[data-color-theme="arcade"] .credit-row,
[data-color-theme="arcade"] .epargne-row,
[data-color-theme="arcade"] .stat-row,
[data-color-theme="arcade"] .bilan-row,
[data-color-theme="arcade"] .pay-card,
[data-color-theme="arcade"] .pay-method-card,
[data-color-theme="arcade"] .settings-section,
[data-color-theme="arcade"] .about-card,
[data-color-theme="arcade"] .auth-card,
[data-color-theme="arcade"] .donut-card,
[data-color-theme="arcade"] .snowball-card,
[data-color-theme="arcade"] .premium-status-card,
[data-color-theme="arcade"] .whatif-result-card,
[data-color-theme="arcade"] .comp-chart,
[data-color-theme="arcade"] .cloud-user {
  border-radius: 4px !important;
}

/* Boutons */
[data-color-theme="arcade"] .btn-primary,
[data-color-theme="arcade"] .btn-add-revenu,
[data-color-theme="arcade"] .btn-add-prelev,
[data-color-theme="arcade"] .btn-add-budget,
[data-color-theme="arcade"] .btn-add-credit,
[data-color-theme="arcade"] .btn-add-epargne,
[data-color-theme="arcade"] .btn-green,
[data-color-theme="arcade"] .btn-coral,
[data-color-theme="arcade"] .btn-orange,
[data-color-theme="arcade"] .btn-gold,
[data-color-theme="arcade"] .btn-teal,
[data-color-theme="arcade"] .btn-copy-month,
[data-color-theme="arcade"] .auth-btn,
[data-color-theme="arcade"] .cloud-login-btn,
[data-color-theme="arcade"] .premium-upgrade-btn,
[data-color-theme="arcade"] .month-arrow,
[data-color-theme="arcade"] .date-btn,
[data-color-theme="arcade"] .bilan-btn-close,
[data-color-theme="arcade"] .bilan-btn-detail,
[data-color-theme="arcade"] .bilan-btn-export,
[data-color-theme="arcade"] .resume-export-btn,
[data-color-theme="arcade"] .modal-confirm-btn-ok,
[data-color-theme="arcade"] .modal-confirm-btn-cancel,
[data-color-theme="arcade"] .onboarding-next,
[data-color-theme="arcade"] .pm-save-btn,
[data-color-theme="arcade"] .epargne-hide-btn,
[data-color-theme="arcade"] .epargne-reactivate-btn,
[data-color-theme="arcade"] .donnees-popover-btn,
[data-color-theme="arcade"] .pay-method-btn {
  border-radius: 4px !important;
}

/* Chips & badges */
[data-color-theme="arcade"] .chip,
[data-color-theme="arcade"] .chip-add,
[data-color-theme="arcade"] .chip-edit,
[data-color-theme="arcade"] .chip-delete,
[data-color-theme="arcade"] .filter-chip,
[data-color-theme="arcade"] .edit-chip,
[data-color-theme="arcade"] .rev-type-chip,
[data-color-theme="arcade"] .credit-cat-chip,
[data-color-theme="arcade"] .snowball-chip,
[data-color-theme="arcade"] .pay-method-badge,
[data-color-theme="arcade"] .paywall-option-badge,
[data-color-theme="arcade"] .prelev-annual-badge,
[data-color-theme="arcade"] .prelev-freq-btn,
[data-color-theme="arcade"] .prelev-status,
[data-color-theme="arcade"] .budget-pct,
[data-color-theme="arcade"] .cloud-user-status,
[data-color-theme="arcade"] .pm-principal {
  border-radius: 4px !important;
}

/* Modales (coins du haut seulement) */
[data-color-theme="arcade"] .modal,
[data-color-theme="arcade"] .modal-paywall {
  border-radius: 4px 4px 0 0 !important;
}
[data-color-theme="arcade"] .modal-close {
  border-radius: 4px !important;
}

/* Inputs & selects */
[data-color-theme="arcade"] .auth-input,
[data-color-theme="arcade"] .pm-input,
[data-color-theme="arcade"] .promo-input,
[data-color-theme="arcade"] .settings-select,
[data-color-theme="arcade"] .settings-picker-btn,
[data-color-theme="arcade"] .settings-link,
[data-color-theme="arcade"] .about-link,
[data-color-theme="arcade"] .autocomplete-item {
  border-radius: 4px !important;
}

/* Icônes (cercles → carrés arrondis) */
[data-color-theme="arcade"] .depense-cat-icon,
[data-color-theme="arcade"] .resume-row-icon,
[data-color-theme="arcade"] .resume-prev-month-icon,
[data-color-theme="arcade"] .revenu-icon,
[data-color-theme="arcade"] .prelev-icon,
[data-color-theme="arcade"] .budget-icon,
[data-color-theme="arcade"] .stat-icon,
[data-color-theme="arcade"] .about-logo-img,
[data-color-theme="arcade"] .icon-option {
  border-radius: 6px !important;
}

/* Toggles */
[data-color-theme="arcade"] .toggle-slider {
  border-radius: 4px !important;
}
[data-color-theme="arcade"] .toggle-slider::before {
  border-radius: 3px !important;
}

/* Barres de progression */
[data-color-theme="arcade"] .budget-bar-bg,
[data-color-theme="arcade"] .budget-bar-fill,
[data-color-theme="arcade"] .credit-row-bar,
[data-color-theme="arcade"] .credit-row-bar-fill,
[data-color-theme="arcade"] .epargne-row-bar,
[data-color-theme="arcade"] .epargne-row-bar-fill,
[data-color-theme="arcade"] .comp-hbar-bg,
[data-color-theme="arcade"] .comp-hbar-fill {
  border-radius: 2px !important;
}

/* Toasts & popovers */
[data-color-theme="arcade"] .toast-notif,
[data-color-theme="arcade"] .donnees-popover,
[data-color-theme="arcade"] .auth-message,
[data-color-theme="arcade"] .comp-bar-tooltip {
  border-radius: 4px !important;
}

/* Indicateurs de navigation */
[data-color-theme="arcade"] .nav-indicator {
  border-radius: 2px !important;
}

/* Divers */
[data-color-theme="arcade"] .paywall-option,
[data-color-theme="arcade"] .onboarding-step,
[data-color-theme="arcade"] .onboarding-dot,
[data-color-theme="arcade"] .pm-color-swatch,
[data-color-theme="arcade"] .pm-type-card,
[data-color-theme="arcade"] .whatif-input-row,
[data-color-theme="arcade"] .whatif-motivation,
[data-color-theme="arcade"] .whatif-gain-item,
[data-color-theme="arcade"] .donut-legend-item,
[data-color-theme="arcade"] .epargne-completed-item,
[data-color-theme="arcade"] .epargne-row-estimate,
[data-color-theme="arcade"] .prelev-rappel-item,
[data-color-theme="arcade"] .snowball-saving-item,
[data-color-theme="arcade"] .comp-month,
[data-color-theme="arcade"] .budget-resume-item,
[data-color-theme="arcade"] .credit-resume-item,
[data-color-theme="arcade"] .epargne-resume-item,
[data-color-theme="arcade"] .rev-resume-item,
[data-color-theme="arcade"] .prelev-resume-item {
  border-radius: 4px !important;
}

/* Barres verticales de comparatif */
[data-color-theme="arcade"] .comp-vbar,
[data-color-theme="arcade"] .comp-vbar-down {
  border-radius: 2px !important;
}

/* Bottom nav */
[data-color-theme="arcade"] .bottom-nav {
  border-radius: 0 !important;
}

/* Icon picker */
[data-color-theme="arcade"] .icon-picker {
  border-radius: 4px !important;
}

/* Éléments manquants */
[data-color-theme="arcade"] .comp-chart-title,
[data-color-theme="arcade"] .comp-chart-area,
[data-color-theme="arcade"] .comp-chart-slide {
  border-radius: 4px !important;
}
[data-color-theme="arcade"] .comp-dot,
[data-color-theme="arcade"] .onboarding-dot {
  border-radius: 2px !important;
}

/* Boutons d'action circulaires → carrés */
[data-color-theme="arcade"] .row-edit,
[data-color-theme="arcade"] .row-delete,
[data-color-theme="arcade"] .row-delete-confirm,
[data-color-theme="arcade"] .pay-method-btn-del,
[data-color-theme="arcade"] .modal-close {
  border-radius: 4px !important;
}

/* Dots de navigation → carrés */
[data-color-theme="arcade"] .dot {
  border-radius: 2px !important;
}

/* Donut legend & picker radio → carrés */
[data-color-theme="arcade"] .donut-legend-dot {
  border-radius: 2px !important;
}
[data-color-theme="arcade"] .picker-radio {
  border-radius: 3px !important;
}
[data-color-theme="arcade"] .picker-radio-dot {
  border-radius: 2px !important;
}

/* Donut → carré arrondi style écran rétro */
[data-color-theme="arcade"] .donut-ring {
  border-radius: 12px !important;
}
[data-color-theme="arcade"] .donut-center {
  border-radius: 8px !important;
}

/* Cercles décoratifs du header → carrés pixelisés */
[data-color-theme="arcade"] .top-bar-bg::before {
  border-radius: 6px;
  background: rgba(255, 255, 255, .25);
}
[data-color-theme="arcade"] .top-bar-bg::after {
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
}
[data-theme="dark"][data-color-theme="arcade"] .top-bar-bg::before {
  background: rgba(255, 255, 255, .1);
}
[data-theme="dark"][data-color-theme="arcade"] .top-bar-bg::after {
  background: rgba(255, 255, 255, .07);
}

/* ═══ ARCADE — Police Pixelify Sans — PARTOUT ═══ */
[data-color-theme="arcade"],
[data-color-theme="arcade"] * {
  font-family: 'Share Tech Mono', monospace !important;
}
[data-color-theme="arcade"] h1,
[data-color-theme="arcade"] h2,
[data-color-theme="arcade"] h3,
[data-color-theme="arcade"] .top-title,
[data-color-theme="arcade"] .total-amount,
[data-color-theme="arcade"] .montant-input,
[data-color-theme="arcade"] .donut-center,
[data-color-theme="arcade"] .modal-title {
  font-weight: 700 !important;
}

/* Masquer les cercles décoratifs sur les thèmes profondeur — continuité inter-pages */
[data-color-theme="ocean"] .top-bar-bg::before,
[data-color-theme="ocean"] .top-bar-bg::after,
[data-color-theme="forest"] .top-bar-bg::before,
[data-color-theme="forest"] .top-bar-bg::after,
[data-color-theme="crepuscule"] .top-bar-bg::before,
[data-color-theme="crepuscule"] .top-bar-bg::after,
[data-color-theme="licorne"] .top-bar-bg::before,
[data-color-theme="licorne"] .top-bar-bg::after,
[data-color-theme="bonbon"] .top-bar-bg::before,
[data-color-theme="bonbon"] .top-bar-bg::after {
  display: none;
}


/* ═══ THÈME LICORNE ═══ */
/* Rose vif (H340) → Nuit étoilée (H252) */
[data-color-theme="licorne"] {
  --header-angle: 90deg;
  /* Revenus — rose vif — H340 S65 L48 — depth 0 */
  --green-e: #c92a5f;
  --green-em: #d7648b;
  --green-el: #e9b8c8;
  --green-el2: #f1d9e1;
  --green-exl: #f7edf0;
  --green-et: #8a183e;
  --green-glow: rgba(201, 42, 95, .10);
  --green-grad1: #e296b0;
  --green-grad2: #de93bb;
  /* Prélèvements — rose magenta — H328 S62 L45 — depth 1 */
  --coral: #b92b77;
  --coral-m: #d2629e;
  --coral-l: #e5b3ce;
  --coral-l2: #eed5e3;
  --coral-exl: #f5e9f0;
  --coral-text: #7b184d;
  --coral-glow: rgba(185, 43, 119, .10);
  --coral-grad1: #de93bb;
  --coral-grad2: #db8ec6;
  /* Crédits — magenta doux — H316 S60 L42 — depth 2 */
  --gold: #ab2a89;
  --gold-m: #cf5fb1;
  --gold-l: #e2add4;
  --gold-l2: #ecd1e5;
  --gold-exl: #f3e6f0;
  --gold-text: #6d1756;
  --gold-glow: rgba(171, 42, 137, .10);
  --gold-grad1: #db8ec6;
  --gold-grad2: #db87d5;
  /* Budget Prévu — violet rosé — H304 S62 L40 — depth 3 */
  --orange: #a5269c;
  --orange-m: #d058c8;
  --orange-l: #e1a6dd;
  --orange-l2: #ebcce9;
  --orange-exl: #f2e2f1;
  --orange-text: #661460;
  --orange-glow: rgba(165, 38, 156, .10);
  --orange-grad1: #db87d5;
  --orange-grad2: #cb84d6;
  /* Épargne — violet pur — H292 S58 L38 — depth 4 */
  --teal: #8a2899;
  --teal-m: #bb58ca;
  --teal-l: #d4a1dc;
  --teal-l2: #e3c9e8;
  --teal-exl: #ede0ef;
  --teal-text: #52145b;
  --teal-glow: rgba(138, 40, 153, .10);
  --teal-grad1: #cb84d6;
  --teal-grad2: #b87dd5;
  /* Dépenses — indigo clair — H280 S60 L36 — depth 5 */
  --blue: #6e2492;
  --blue-m: #a251cb;
  --blue-l: #c59adb;
  --blue-l2: #dbc4e6;
  --blue-exl: #e8dcee;
  --blue-text: #3e1154;
  --glow: rgba(110, 36, 146, .10);
  --blue-grad1: #b87dd5;
  --blue-grad2: #a57bcf;
  /* Statistiques — indigo — H270 S55 L33 — depth 6 */
  --violet: #542582;
  --violet-m: #8a52c3;
  --violet-l: #b697d5;
  --violet-l2: #d2c1e2;
  --violet-exl: #e2daeb;
  --violet-text: #2b1145;
  --violet-glow: rgba(84, 37, 130, .10);
  --violet-grad1: #a57bcf;
  --violet-grad2: #9478ca;
  /* Comparatif — bleu nuit — H260 S52 L30 — depth 7 */
  --rose: #3f2474;
  --rose-m: #7550be;
  --rose-l: #a793d0;
  --rose-l2: #c9bedf;
  --rose-exl: #ddd7e8;
  --rose-text: #1c0f38;
  --rose-glow: rgba(63, 36, 116, .10);
  --rose-grad1: #9478ca;
  --rose-grad2: #8a7dbf;
  /* Réglages — nuit étoilée — H252 S42 L26 — depth 8 */
  --gray: #31265e;
  --gray-m: #6a58b0;
  --gray-l: #9e94c5;
  --gray-l2: #c4bfd8;
  --gray-exl: #dad7e3;
  --gray-text: #15102c;
  --gray-glow: rgba(49, 38, 94, .10);
  --gray-grad1: #8a7dbf;
  --gray-grad2: #8a7dbf;
  --grad-start: #b87dd5;
  --grad-end: #a57bcf;
  --blue-xl: #e8dcee;
  --rainbow: linear-gradient(90deg, #6e2492, #c92a5f, #a5269c, #b92b77, #542582, #3f2474);
  --rainbow-soft: linear-gradient(90deg, #c59adb, #e9b8c8, #e1a6dd, #e5b3ce, #b697d5, #a793d0);
  --resume-text: #3e1154;
}

/* ═══ THÈME LICORNE — MODE SOMBRE ═══ */
[data-theme="dark"][data-color-theme="licorne"] {
  --green-el: #621c34;
  --green-el2: #35111d;
  --green-exl: #210c13;
  --green-grad1: #35111d;
  --green-grad2: #341224;
  --green-glow: rgba(201, 42, 95, .08);
  --coral-l: #601e41;
  --coral-l2: #341224;
  --coral-exl: #200d17;
  --coral-grad1: #341224;
  --coral-grad2: #33132b;
  --coral-glow: rgba(185, 43, 119, .08);
  --gold-l: #5f1f4e;
  --gold-l2: #33132b;
  --gold-exl: #200d1b;
  --gold-grad1: #33132b;
  --gold-grad2: #341232;
  --gold-glow: rgba(171, 42, 137, .08);
  --orange-l: #601e5c;
  --orange-l2: #341232;
  --orange-exl: #200d1f;
  --orange-grad1: #341232;
  --orange-grad2: #2e1433;
  --orange-glow: rgba(165, 38, 156, .08);
  --teal-l: #56215e;
  --teal-l2: #2e1433;
  --teal-exl: #1d0e1f;
  --teal-grad1: #2e1433;
  --teal-grad2: #291333;
  --teal-glow: rgba(138, 40, 153, .08);
  --blue-l: #4a1f5f;
  --blue-l2: #291333;
  --blue-exl: #1a0d20;
  --blue-grad1: #291333;
  --blue-grad2: #231531;
  --glow: rgba(110, 36, 146, .08);
  --violet-l: #3f235c;
  --violet-l2: #231531;
  --violet-exl: #160e1e;
  --violet-grad1: #231531;
  --violet-grad2: #1f1630;
  --violet-glow: rgba(84, 37, 130, .08);
  --rose-l: #36245a;
  --rose-l2: #1f1630;
  --rose-exl: #140f1e;
  --rose-grad1: #1f1630;
  --rose-grad2: #1d1a2d;
  --rose-glow: rgba(63, 36, 116, .08);
  --gray-l: #332b54;
  --gray-l2: #1d1a2d;
  --gray-exl: #13111b;
  --gray-grad1: #1d1a2d;
  --gray-grad2: #181522;
  --gray-glow: rgba(49, 38, 94, .08);
  --blue-xl: #1a0d20;
  --grad-start: #291333;
  --grad-end: #231531;
  --rainbow-soft: linear-gradient(90deg, #4a1f5f, #621c34, #601e5c, #601e41, #3f235c, #36245a);
}

/* Boutons dark licorne */
[data-theme="dark"][data-color-theme="licorne"] .btn-primary {
  background: linear-gradient(135deg, #2d0f3d, #240c30) !important;
  box-shadow: 0 2px 8px rgba(82,27,110,.15) !important;
}
[data-theme="dark"][data-color-theme="licorne"] .btn-add-revenu,
[data-theme="dark"][data-color-theme="licorne"] .btn-green {
  background: linear-gradient(135deg, #3f0d1d, #320a17) !important;
  box-shadow: 0 2px 8px rgba(113,24,53,.15) !important;
}
[data-theme="dark"][data-color-theme="licorne"] .btn-add-prelev,
[data-theme="dark"][data-color-theme="licorne"] .btn-coral {
  background: linear-gradient(135deg, #3d0e27, #310b1f) !important;
  box-shadow: 0 2px 8px rgba(111,26,71,.15) !important;
}
[data-theme="dark"][data-color-theme="licorne"] .btn-add-credit,
[data-theme="dark"][data-color-theme="licorne"] .btn-gold {
  background: linear-gradient(135deg, #3d0f30, #300c27) !important;
  box-shadow: 0 2px 8px rgba(110,27,88,.15) !important;
  color: #dbbcd3 !important;
}
[data-theme="dark"][data-color-theme="licorne"] .btn-add-budget,
[data-theme="dark"][data-color-theme="licorne"] .btn-orange {
  background: linear-gradient(135deg, #3d0e3a, #310b2f) !important;
  box-shadow: 0 2px 8px rgba(111,26,105,.15) !important;
}
[data-theme="dark"][data-color-theme="licorne"] .btn-add-epargne,
[data-theme="dark"][data-color-theme="licorne"] .btn-teal {
  background: linear-gradient(135deg, #36103c, #2b0c30) !important;
  box-shadow: 0 2px 8px rgba(98,28,108,.15) !important;
}
/* ═══ THÈME BONBON — ROSE BONBON + BLEU BONBON ═══ */
/* 5 pages rose (H348) + 4 pages bleu (H192) — comme une bouteille acidulée */
[data-color-theme="bonbon"] {
  --header-angle: 90deg;
  /* Revenus — rose bonbon clair — H348 S68 L58 — depth 0 */
  --green-e: #dc4b68;
  --green-em: #da627a;
  --green-el: #eab7c1;
  --green-el2: #f2d8dd;
  --green-exl: #f7ecee;
  --green-et: #b6203e;
  --green-glow: rgba(220, 75, 104, .10);
  --green-grad1: #e494a4;
  --green-grad2: #e190a0;
  /* Prélèvements — rose bonbon — H348 S66 L54 — depth 1 */
  --coral: #d73c5b;
  --coral-m: #d65e76;
  --coral-l: #e7b1bc;
  --coral-l2: #f0d4da;
  --coral-exl: #f6e9eb;
  --coral-text: #a41d38;
  --coral-glow: rgba(215, 60, 91, .10);
  --coral-grad1: #e190a0;
  --coral-grad2: #de8b9c;
  /* Crédits — rose moyen — H348 S64 L50 — depth 2 */
  --gold: #d12d4e;
  --gold-m: #d35b73;
  --gold-l: #e4abb7;
  --gold-l2: #edd0d6;
  --gold-exl: #f4e6e8;
  --gold-text: #921a32;
  --gold-glow: rgba(209, 45, 78, .10);
  --gold-grad1: #de8b9c;
  --gold-grad2: #db8798;
  /* Budget Prévu — rose profond — H348 S62 L46 — depth 3 */
  --orange: #be2c49;
  --orange-m: #d05870;
  --orange-l: #e1a6b1;
  --orange-l2: #ebccd2;
  --orange-exl: #f2e2e5;
  --orange-text: #7f192d;
  --orange-glow: rgba(190, 44, 73, .10);
  --orange-grad1: #db8798;
  --orange-grad2: #d68494;
  /* Épargne — rose soutenu — H348 S58 L42 — depth 4 */
  --teal: #a92c45;
  --teal-m: #ca586f;
  --teal-l: #dca1ad;
  --teal-l2: #e8c9cf;
  --teal-exl: #efe0e3;
  --teal-text: #6c1829;
  --teal-glow: rgba(169, 44, 69, .10);
  --teal-grad1: #d68494;
  --teal-grad2: #76c8dc;
  /* Dépenses — bleu bonbon — H192 S68 L42 — depth 5 */
  --blue: #2296b3;
  --blue-m: #48b8d4;
  --blue-l: #94d1e0;
  --blue-l2: #c0e1ea;
  --blue-exl: #daecf0;
  --blue-text: #135e70;
  --glow: rgba(34, 150, 179, .10);
  --blue-grad1: #76c8dc;
  --blue-grad2: #73c3d7;
  /* Statistiques — bleu moyen — H192 S64 L38 — depth 6 */
  --violet: #22869e;
  --violet-m: #47b3ce;
  --violet-l: #90ccdc;
  --violet-l2: #bddee6;
  --violet-exl: #d7e9ee;
  --violet-text: #114f5e;
  --violet-glow: rgba(34, 134, 158, .10);
  --violet-grad1: #73c3d7;
  --violet-grad2: #71bed2;
  /* Comparatif — bleu profond — H192 S60 L34 — depth 7 */
  --rose: #22758a;
  --rose-m: #47aec8;
  --rose-l: #8cc8d6;
  --rose-l2: #bbdbe3;
  --rose-exl: #d5e7eb;
  --rose-text: #103f4b;
  --rose-glow: rgba(34, 117, 138, .10);
  --rose-grad1: #71bed2;
  --rose-grad2: #77b5c4;
  /* Réglages — bleu givré — H192 S48 L30 — depth 8 */
  --gray: #276271;
  --gray-m: #51a3b8;
  --gray-l: #90bfca;
  --gray-l2: #bcd5db;
  --gray-exl: #d5e2e5;
  --gray-text: #102f36;
  --gray-glow: rgba(39, 98, 113, .10);
  --gray-grad1: #77b5c4;
  --gray-grad2: #77b5c4;
  --grad-start: #76c8dc;
  --grad-end: #73c3d7;
  --blue-xl: #daecf0;
  --rainbow: linear-gradient(90deg, #2296b3, #dc4b68, #be2c49, #d73c5b, #22869e, #22758a);
  --rainbow-soft: linear-gradient(90deg, #94d1e0, #eab7c1, #e1a6b1, #e7b1bc, #90ccdc, #8cc8d6);
  --resume-text: #135e70;
}

/* ═══ THÈME BONBON — MODE SOMBRE ═══ */
[data-theme="dark"][data-color-theme="bonbon"] {
  --green-el: #641a29;
  --green-el2: #361018;
  --green-exl: #210b10;
  --green-grad1: #361018;
  --green-grad2: #351118;
  --green-glow: rgba(220, 75, 104, .08);
  --coral-l: #631c2a;
  --coral-l2: #351118;
  --coral-exl: #210c10;
  --coral-grad1: #351118;
  --coral-grad2: #351219;
  --coral-glow: rgba(215, 60, 91, .08);
  --gold-l: #621d2b;
  --gold-l2: #351219;
  --gold-exl: #210c10;
  --gold-grad1: #351219;
  --gold-grad2: #341219;
  --gold-glow: rgba(209, 45, 78, .08);
  --orange-l: #601e2b;
  --orange-l2: #341219;
  --orange-exl: #200d11;
  --orange-grad1: #341219;
  --orange-grad2: #33141a;
  --orange-glow: rgba(190, 44, 73, .08);
  --teal-l: #5e212d;
  --teal-l2: #33141a;
  --teal-exl: #1f0e11;
  --teal-grad1: #33141a;
  --teal-grad2: #102f36;
  --teal-glow: rgba(169, 44, 69, .08);
  --blue-l: #1a5564;
  --blue-l2: #102f36;
  --blue-exl: #0b1d21;
  --blue-grad1: #102f36;
  --blue-grad2: #122e35;
  --glow: rgba(34, 150, 179, .08);
  --violet-l: #1d5462;
  --violet-l2: #122e35;
  --violet-exl: #0c1d21;
  --violet-grad1: #122e35;
  --violet-grad2: #132d33;
  --violet-glow: rgba(34, 134, 158, .08);
  --rose-l: #1f525f;
  --rose-l2: #132d33;
  --rose-exl: #0d1c20;
  --rose-grad1: #132d33;
  --rose-grad2: #172a2f;
  --rose-glow: rgba(34, 117, 138, .08);
  --gray-l: #274e57;
  --gray-l2: #172a2f;
  --gray-exl: #101a1d;
  --gray-grad1: #172a2f;
  --gray-grad2: #142023;
  --gray-glow: rgba(39, 98, 113, .08);
  --blue-xl: #0b1d21;
  --grad-start: #102f36;
  --grad-end: #122e35;
  --rainbow-soft: linear-gradient(90deg, #1a5564, #641a29, #601e2b, #631c2a, #1d5462, #1f525f);
}

/* Boutons dark bonbon */
[data-theme="dark"][data-color-theme="bonbon"] .btn-primary {
  background: linear-gradient(135deg, #0c3540, #092b33) !important;
  box-shadow: 0 2px 8px rgba(22,96,115,.15) !important;
}
[data-theme="dark"][data-color-theme="bonbon"] .btn-add-revenu,
[data-theme="dark"][data-color-theme="bonbon"] .btn-green {
  background: linear-gradient(135deg, #400c16, #330912) !important;
  box-shadow: 0 2px 8px rgba(115,22,40,.15) !important;
}
[data-theme="dark"][data-color-theme="bonbon"] .btn-add-prelev,
[data-theme="dark"][data-color-theme="bonbon"] .btn-coral {
  background: linear-gradient(135deg, #3f0d17, #320a12) !important;
  box-shadow: 0 2px 8px rgba(114,23,41,.15) !important;
}
[data-theme="dark"][data-color-theme="bonbon"] .btn-add-credit,
[data-theme="dark"][data-color-theme="bonbon"] .btn-gold {
  background: linear-gradient(135deg, #3e0d17, #320b12) !important;
  box-shadow: 0 2px 8px rgba(112,24,42,.15) !important;
  color: #dbbcc2 !important;
}
[data-theme="dark"][data-color-theme="bonbon"] .btn-add-budget,
[data-theme="dark"][data-color-theme="bonbon"] .btn-orange {
  background: linear-gradient(135deg, #3d0e18, #310b13) !important;
  box-shadow: 0 2px 8px rgba(111,26,43,.15) !important;
}
[data-theme="dark"][data-color-theme="bonbon"] .btn-add-epargne,
[data-theme="dark"][data-color-theme="bonbon"] .btn-teal {
  background: linear-gradient(135deg, #3c1018, #300c13) !important;
  box-shadow: 0 2px 8px rgba(108,28,44,.15) !important;
}
[data-theme="dark"] {
  --bg: #1a1b1e;
  --bg-card: #252629;
  --bg-soft: #2e2f33;
  --ink: #e5e5e7;
  --muted: #8b8d94;
  --glow: rgba(58, 120, 201, .12);

  /* Borders & shadows */
  --blue-l: #2a3a5a;
  --blue-l2: #1e2a42;
  --blue-exl: #1a2234;
  --blue-xl: #1a2234;
  --green-el: #1a3a2a;
  --green-el2: #1e4234;
  --green-exl: #162a20;
  --coral-l: #4a2828;
  --coral-l2: #3a2020;
  --coral-exl: #2e1a1a;
  --orange-l: #4a3218;
  --orange-l2: #3a2810;
  --orange-exl: #2e2010;
  --violet-l: #302050;
  --violet-l2: #281840;
  --violet-exl: #201030;
  --rose-l: #402030;
  --rose-l2: #381828;
  --rose-exl: #2e1020;
  --gray-l: #3a3b40;
  --gray-l2: #32333a;
  --gray-exl: #2a2b30;

  /* Gold */
  --gold-l: #4a4020;
  --gold-l2: #3a3218;
  --gold-exl: #2e2a14;
  --gold-glow: rgba(224, 204, 80, .08);

  /* Teal */
  --teal-l: #1a4a40;
  --teal-l2: #163a32;
  --teal-exl: #122e28;
  --teal-glow: rgba(42, 157, 143, .08);

  /* Glows darker */
  --green-glow: rgba(46, 158, 107, .08);
  --coral-glow: rgba(212, 96, 58, .08);
  --orange-glow: rgba(224, 122, 0, .08);
  --violet-glow: rgba(124, 77, 189, .08);
  --rose-glow: rgba(192, 82, 154, .08);
  --gray-glow: rgba(107, 114, 128, .08);

  /* Gradients */
  --blue-grad1: #1e2a42;
  --blue-grad2: #1a2234;
  --green-grad1: #1a3a2a;
  --green-grad2: #162a3a;
  --coral-grad1: #3a2020;
  --coral-grad2: #3a2828;
  --orange-grad1: #3a2810;
  --orange-grad2: #3a2818;
  --violet-grad1: #281840;
  --violet-grad2: #302050;
  --rose-grad1: #381828;
  --rose-grad2: #402030;
  --gray-grad1: #2a2b30;
  --gray-grad2: #32333a;
  --gold-grad1: #3a3218;
  --gold-grad2: #2e2a14;
  --teal-grad1: #1a3632;
  --teal-grad2: #162e2a;

  /* Sage */
  --sage-bg: #1a2a20;
}

[data-theme="dark"] .app-shell {
  background: var(--bg);
}

[data-theme="dark"] .bottom-nav {
  background: rgba(26, 27, 30, .95);
  border-top-color: #2e2f33;
}

[data-theme="dark"] .donnees-popover {
  background: var(--bg-card);
  border-color: #3a3b40;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] .donnees-popover-arrow::before {
  background: var(--bg-card);
  border-color: #3a3b40;
}

[data-theme="dark"] .settings-link {
  background: var(--bg-soft);
}

[data-theme="dark"] .settings-link:active {
  background: #3a3b40;
}

[data-theme="dark"] .settings-select {
  background-color: var(--bg-soft);
  color: var(--ink);
  border-color: var(--gray-l);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b8d94'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, .6);
}

[data-theme="dark"] .modal-card {
  background: var(--bg-card);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select {
  background: var(--bg-soft);
  color: var(--ink);
  border-color: #3a3b40;
}

[data-theme="dark"] .about-card {
  background: var(--bg-card);
}

[data-theme="dark"] .about-link {
  background: var(--bg-soft);
  color: var(--ink);
}

[data-theme="dark"] .settings-section-header { color: #b0b8c0; }
[data-theme="dark"] .settings-section-line { background: linear-gradient(90deg, transparent, #3a3b40, transparent); }
[data-theme="dark"] .settings-row-label { color: var(--ink); }
[data-theme="dark"] .settings-version { color: #5a5e66; }

[data-theme="dark"] .filter-chip {
  background: var(--bg-soft);
  color: var(--muted);
  border-color: #3a3b40;
}

[data-theme="dark"] .filter-chip.active {
  background: var(--blue);
  color: white;
}

[data-theme="dark"] .icon-picker {
  background: var(--bg);
}

[data-theme="dark"] {
  /* Top bar gradient */
  --grad-start: #1e2a42;
  --grad-end: #2a2040;
}

[data-theme="dark"] .top-bar-bg::before { background: rgba(255,255,255,.06); }
[data-theme="dark"] .top-bar-bg::after { background: rgba(255,255,255,.04); }
[data-theme="dark"] .top-bar-rainbow {
  background: linear-gradient(var(--header-angle), var(--green-el) 0%, var(--coral-l) 20%, var(--orange-l) 40%, var(--blue-l) 60%, var(--violet-l) 80%, var(--gray-l) 100%) !important;
}

/* Nouvelle Dépense dark — mêmes couleurs que Dépenses du mois */
[data-theme="dark"] .montant-input {
  color: var(--blue) !important;
  caret-color: var(--blue) !important;
  background: transparent !important;
}
[data-theme="dark"] .montant-input::placeholder { color: var(--blue-m); opacity: .5; }
[data-theme="dark"] .montant-euro { color: var(--blue-m); }
[data-theme="dark"] .montant-line { background: linear-gradient(90deg, transparent, var(--blue-m), transparent); }
[data-theme="dark"] .card-label { color: var(--blue); }
[data-theme="dark"] .text-input {
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom-color: #2a3a4a;
}
[data-theme="dark"] .text-input:focus { border-bottom-color: var(--blue-m); }
[data-theme="dark"] .text-input::placeholder { color: var(--blue-m); opacity: .5; }

/* Placeholders colorés dark mode */
[data-theme="dark"] .text-input-green::placeholder { color: var(--green-em); opacity: .5; }
[data-theme="dark"] .text-input-coral::placeholder { color: var(--coral-m); opacity: .5; }
[data-theme="dark"] .text-input-orange::placeholder { color: var(--orange-m); opacity: .5; }
[data-theme="dark"] .text-input-gold::placeholder { color: var(--gold-m); opacity: .5; }
[data-theme="dark"] .text-input-teal::placeholder { color: var(--teal-m); opacity: .5; }
[data-theme="dark"] input::placeholder { color: var(--blue-m); opacity: .5; }

/* Traits dark mode colorés au repos */
[data-theme="dark"] .text-input-green { border-bottom-color: var(--green-l); }
[data-theme="dark"] .text-input-coral { border-bottom-color: var(--coral-l); }
[data-theme="dark"] .text-input-orange { border-bottom-color: var(--orange-l); }
[data-theme="dark"] .text-input-gold { border-bottom-color: var(--gold-l); }
[data-theme="dark"] .text-input-teal { border-bottom-color: var(--teal-l); }

/* Inputs sans classe dans modales colorées dark mode */
[data-theme="dark"] .modal-green .text-input { border-bottom-color: var(--green-l); }
[data-theme="dark"] .modal-green .text-input::placeholder { color: var(--green-em); opacity: .5; }
[data-theme="dark"] .modal-coral .text-input { border-bottom-color: var(--coral-l); }
[data-theme="dark"] .modal-coral .text-input::placeholder { color: var(--coral-m); opacity: .5; }
[data-theme="dark"] .modal-orange .text-input { border-bottom-color: var(--orange-l); }
[data-theme="dark"] .modal-orange .text-input::placeholder { color: var(--orange-m); opacity: .5; }
[data-theme="dark"] .modal-gold .text-input { border-bottom-color: var(--gold-l); }
[data-theme="dark"] .modal-gold .text-input::placeholder { color: var(--gold-m); opacity: .5; }
[data-theme="dark"] .modal-teal .text-input { border-bottom-color: var(--teal-l); }
[data-theme="dark"] .modal-teal .text-input::placeholder { color: var(--teal-m); opacity: .5; }

[data-theme="dark"] .chip {
  background: var(--bg-soft);
  border-color: var(--blue-l);
  color: #c0c8d0;
}

[data-theme="dark"] .chip.selected {
  background: linear-gradient(135deg, var(--blue-l), var(--blue));
  color: white;
  border-color: var(--blue);
}

[data-theme="dark"] .chip-add {
  background: var(--blue-exl);
  border-color: var(--blue-l);
  color: var(--blue-m);
}

[data-theme="dark"] .chip.chip-green { border-color: var(--green-el); color: var(--green-em); }
[data-theme="dark"] .chip.chip-green.selected { background: linear-gradient(135deg, var(--green-el), var(--green-e)); border-color: var(--green-e); }
[data-theme="dark"] .chip-green.chip-add { background: var(--green-exl); border-color: var(--green-el); color: var(--green-em); }

[data-theme="dark"] .chip.chip-coral { border-color: var(--coral-l); color: var(--coral-m); }
[data-theme="dark"] .chip.chip-coral.selected { background: linear-gradient(135deg, var(--coral-l), var(--coral)); border-color: var(--coral); }
[data-theme="dark"] .chip-coral.chip-add { background: var(--coral-exl); border-color: var(--coral-l); color: var(--coral-m); }

[data-theme="dark"] .chip.chip-orange { border-color: var(--orange-l); color: var(--orange-m); }
[data-theme="dark"] .chip.chip-orange.selected { background: linear-gradient(135deg, var(--orange-l), var(--orange)); border-color: var(--orange); }
[data-theme="dark"] .chip-orange.chip-add { background: var(--orange-exl); border-color: var(--orange-l); color: var(--orange-m); }

[data-theme="dark"] .pay-card {
  background: var(--bg-soft);
  border-color: #3a4a5a;
}

[data-theme="dark"] .pay-card.selected {
  border-color: var(--blue);
  background: var(--bg-soft);
}

[data-theme="dark"] .pay-card.selected .pay-name { color: var(--blue); }

[data-theme="dark"] .date-btn {
  background: var(--bg-soft);
  border-color: #3a4a5a;
}

[data-theme="dark"] .autocomplete-list {
  background: var(--bg-card);
  border-color: #3a3b40;
}

[data-theme="dark"] .autocomplete-item:active {
  background: var(--bg-soft);
}

[data-theme="dark"] .total-card {
  background: var(--bg-card);
}

[data-theme="dark"] .summary-cards .summary-card {
  background: var(--bg-card);
}

[data-theme="dark"] .page-scroll { color: var(--ink); }

[data-theme="dark"] .card {
  border-color: var(--blue-l);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

[data-theme="dark"] .settings-section {
  border-color: #3a3b40;
}

[data-theme="dark"] .settings-link {
  background: #2a2b30;
  color: var(--ink);
}

[data-theme="dark"] .settings-link:active {
  background: #3a3b40;
}


/* ═══════════════════════════════════════════
   MOYENS DE PAIEMENT
   ═══════════════════════════════════════════ */

/* Type selector */
.pm-section {
  margin-bottom: 16px;
}

.pm-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.pm-type-row {
  display: flex;
  gap: 10px;
}

.pm-type-card {
  flex: 1;
  padding: 14px 8px 12px;
  border: 2px solid var(--gray-l);
  border-radius: 14px;
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
  transition: all .2s;
}

.pm-type-icon { font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.pm-type-icon .pay-svg { width: 36px; height: 24px; }
.pm-type-name { font-size: .72rem; font-weight: 600; color: var(--ink); }

.pm-type-card.active {
  border-color: var(--green-e);
  background: var(--green-exl);
}
.pm-type-card.active .pm-type-name { color: var(--green-e); }

[data-theme="dark"] .pm-type-card {
  background: var(--bg-soft);
  border-color: #3a3b40;
}
[data-theme="dark"] .pm-type-card.active {
  background: rgba(46, 158, 107, .12);
  border-color: var(--green-e);
}

/* Input */
.pm-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-l);
  border-radius: 12px;
  background: var(--bg-card);
  font-size: .85rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.pm-input:focus { border-color: var(--gray); }
.pm-input::placeholder { color: var(--muted); }

[data-theme="dark"] .pm-input {
  background: var(--bg-soft);
  border-color: #3a3b40;
  color: var(--ink);
}
[data-theme="dark"] .pm-input:focus { border-color: #5a5e66; }

/* Color grid */
.pm-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.pm-color-swatch {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all .2s;
}

.pm-color-swatch:active { transform: scale(.9); }

.pm-color-swatch.active {
  border-color: var(--ink);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Principal toggle */
.pm-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-exl);
  border-radius: 12px;
  margin-bottom: 16px;
}

[data-theme="dark"] .pm-principal { background: var(--bg-soft); }

.pm-principal-info { flex: 1; }
.pm-principal-label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.pm-principal-sub { font-size: .65rem; color: var(--muted); margin-top: 1px; }

/* Save button */
.pm-save-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #4a5568, #2d3748);
  color: white;
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}

.pm-save-btn:active { transform: scale(.97); }

[data-theme="dark"] .pm-save-btn {
  background: linear-gradient(135deg, #4a7ab0, #3a6090);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gray-l);
  border-radius: 24px;
  transition: background .2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--green-em), var(--green-e));
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Payment method card in list */
.pay-method-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--gray-exl);
  border-radius: 12px;
  margin-bottom: 8px;
}

[data-theme="dark"] .pay-method-card {
  background: var(--bg-soft);
}

/* ═══ DARK MODE — CORRECTIONS COMPLÈTES ═══ */

/* 1. Headers gold + teal — gradients sombres */
[data-theme="dark"] .top-bar-gold {
  background: linear-gradient(var(--header-angle), var(--gold-grad1) 0%, var(--gold-grad2) 100%) !important;
}
[data-theme="dark"] .top-bar-teal {
  background: linear-gradient(var(--header-angle), var(--teal-grad1) 0%, var(--teal-grad2) 100%) !important;
}

/* 2. Cards Boule de Neige — fond sombre */
[data-theme="dark"] .snowball-saving-item {
  background: linear-gradient(135deg, var(--gold-l2), var(--gold-l));
  border-color: var(--gold-l);
}
[data-theme="dark"] .snowball-saving-label { color: var(--gold-m); }
[data-theme="dark"] .snowball-chip {
  background: var(--bg-soft);
  border-color: var(--gold-l);
}
[data-theme="dark"] .snowball-chip.selected {
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  border-color: var(--gold);
}

/* 3. Boutons principaux — gradients plus profonds, ombres réduites */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #2a5a9a, #1e4a80);
  box-shadow: 0 2px 8px rgba(30, 74, 128, .2);
}
[data-theme="dark"] .btn-add-revenu,
[data-theme="dark"] .btn-green {
  background: linear-gradient(135deg, #1a6a40, #14523a) !important;
  box-shadow: 0 2px 8px rgba(20, 82, 58, .2) !important;
}
[data-theme="dark"] .btn-add-prelev,
[data-theme="dark"] .btn-coral {
  background: linear-gradient(135deg, #9a4028, #7a3020) !important;
  box-shadow: 0 2px 8px rgba(122, 48, 32, .2) !important;
}
[data-theme="dark"] .btn-add-credit,
[data-theme="dark"] .btn-gold {
  background: linear-gradient(135deg, #8a7a28, #6a5e1e) !important;
  box-shadow: 0 2px 8px rgba(106, 94, 30, .2) !important;
  color: #f0e8c0 !important;
}
[data-theme="dark"] .btn-add-budget,
[data-theme="dark"] .btn-orange {
  background: linear-gradient(135deg, #a06010, #7a4a0a) !important;
  box-shadow: 0 2px 8px rgba(122, 74, 10, .2) !important;
}
[data-theme="dark"] .btn-add-epargne,
[data-theme="dark"] .btn-teal {
  background: linear-gradient(135deg, #1a6a5a, #105248) !important;
  box-shadow: 0 2px 8px rgba(16, 82, 72, .2) !important;
}

/* 4. Résumé — cards pointillées adaptées */
[data-theme="dark"] .resume-row-purple {
  border: 1.5px dashed #4a3a6a;
  background: var(--bg-card);
  opacity: 0.7;
}
[data-theme="dark"] .resume-row-purple .resume-row-icon {
  background: linear-gradient(135deg, var(--violet-l2), var(--violet-l));
  border-color: var(--violet-l);
}
[data-theme="dark"] .resume-prev-month-card {
  border: 1.5px dashed #3e4044;
  background: var(--bg-card);
  opacity: 0.7;
}
[data-theme="dark"] .resume-prev-month-icon {
  background: linear-gradient(135deg, var(--gray-l2), var(--gray-l)) !important;
  border-color: #3e4044 !important;
}

/* 5. Titres headers, modales, mois/année — blancs/clairs */
[data-theme="dark"] .top-title { color: #e8e8ea !important; }
[data-theme="dark"] .month-label { color: #e0e0e2 !important; }
[data-theme="dark"] .year-label { color: #c0c0c4 !important; }
[data-theme="dark"] .year-nav-value { color: #e0e0e2 !important; }
[data-theme="dark"] .month-arrow { color: #c0c0c4 !important; }
[data-theme="dark"] .modal-title { color: #e8e8ea !important; }

/* Total card rainbow en dark — bordure visible */
[data-theme="dark"] .total-card-rainbow {
  border: 1.5px solid #3e4044;
  background: var(--bg-card);
  box-shadow: 0 2px 10px var(--rainbow-glow);
}
[data-theme="dark"] .total-card-rainbow .total-card-line { background: var(--rainbow); }

/* 6. Card Premium actif — fond sombre */
[data-theme="dark"] .premium-status-active {
  background: linear-gradient(135deg, #1a2e22, #1e2030);
  border-color: var(--green-e);
}
[data-theme="dark"] .premium-status-active .premium-status-label { color: var(--green-em); }
[data-theme="dark"] .premium-status-active .premium-status-sub { color: var(--muted); }

.pay-method-icon {
  width: 36px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.pay-method-icon .pay-svg { width: 30px; height: 20px; }
.pay-method-icon .pay-svg-lg { width: 36px; height: 24px; }

.pay-method-info { flex: 1; min-width: 0; }

.pay-method-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}

.pay-method-type {
  font-size: .62rem;
  color: var(--muted);
}

.pay-method-badge {
  font-size: .55rem;
  font-weight: 700;
  color: var(--green-e);
  background: var(--green-exl);
  padding: 2px 6px;
  border-radius: 6px;
}

.pay-method-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.pay-method-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: var(--bg-card);
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-method-btn-del { color: var(--coral); }

/* Gray modal */
.modal-gray { border-top-color: var(--gray-m) !important; }
.modal-gray .modal-title { color: var(--gray-text); }
.modal-gray .modal-close { border-color: var(--gray-l); }
/* ── Google Sign-In ── */
.auth-btn-google {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}
.auth-btn-google:hover { background: #f8f8f8; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: .75rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--blue-l);
}