/* ============================================================
   Wallet Manager — design system
   Direction : registre bancaire contemporain. Papier calme,
   encre profonde, vert bouteille en héros, filet laiton.
   Mobile-first ; la sidebar n'apparaît qu'à partir de 1024px.
   ============================================================ */

:root {
  /* Palette */
  --paper:      #F6F5F0;   /* fond général, papier froid légèrement chaud */
  --surface:    #FFFFFF;
  --ink:        #152420;   /* texte principal, vert-noir d'encre */
  --ink-soft:   #4C5A54;   /* texte secondaire */
  --ink-faint:  #8A968F;   /* méta, placeholders */
  --line:       #E4E2D8;   /* filets, bordures */
  --line-soft:  #EEEDE6;

  --green:      #0F5C4A;   /* vert bouteille — marque */
  --green-deep: #0A4237;
  --green-soft: #E3EEE9;   /* fond teinté pour états actifs */
  --brass:      #C8963E;   /* laiton — accent de gravure */

  --credit:     #237A53;   /* revenus */
  --credit-bg:  #E4F1E9;
  --debit:      #B8452D;   /* dépenses */
  --debit-bg:   #F8E9E4;
  --danger:     #B8452D;

  /* Typo */
  --font-ui:      'Manrope', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  /* Rythme */
  --r-hero: 20px;
  --r-card: 16px;
  --r-el:   10px;
  --pad:    16px;

  --shadow-card:  0 1px 2px rgba(21, 36, 32, .05);
  --shadow-float: 0 8px 28px rgba(10, 66, 55, .28);
  --shadow-sheet: 0 -12px 40px rgba(21, 36, 32, .18);

  --mix-base:     #ffffff;
  --tabbar-bg:    rgba(255, 255, 255, .92);
  --alert-line:   #EED3B5;
  --alert-bg:     #FBF3E4;
  --alert-ink:    #7A5518;
  --skeleton-mid: #F4F3EC;

  --tabbar-h: 62px;
  --ease: cubic-bezier(.22, .8, .3, 1);

  color-scheme: light;
}

html.theme-dark {
  color-scheme: dark;

  --paper:      #101816;
  --surface:    #1A2420;
  --ink:        #E8EEEA;
  --ink-soft:   #A7B5AE;
  --ink-faint:  #6F7F78;
  --line:       #2C3A35;
  --line-soft:  #24302C;

  --green:      #3BAF8E;
  --green-deep: #1E6B56;
  --green-soft: #1C332C;
  --brass:      #D4A84A;

  --credit:     #4BB87A;
  --credit-bg:  #163028;
  --debit:      #E07A62;
  --debit-bg:   #33201C;
  --danger:     #E07A62;

  --shadow-card:  0 1px 2px rgba(0, 0, 0, .35);
  --shadow-float: 0 8px 28px rgba(0, 0, 0, .45);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .55);

  --mix-base:     #1A2420;
  --tabbar-bg:    rgba(26, 36, 32, .92);
  --alert-line:   #5C4A28;
  --alert-bg:     #2A2418;
  --alert-ink:    #E0C48A;
  --skeleton-mid: #24302C;
}

/* ------------------------------------------------ Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -.01em;
}

h2 { font-size: 1rem; font-weight: 700; }

a { color: var(--green); text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--green-soft); }

body.has-sheet { overflow: hidden; }

.is-hidden { display: none !important; }

/* Montants : chiffres tabulaires partout */
.op__amount, .amount-credit, .amount-debit, .amount-inv, .budget__nums,
.proj-balance, .ledger-head__amount, .donut-legend__val, .amount-input {
  font-variant-numeric: tabular-nums;
}

.amount-credit { color: var(--credit); font-weight: 700; }
.amount-debit  { color: var(--debit);  font-weight: 700; }
.amount-inv    { color: var(--brass);  font-weight: 700; }

/* ------------------------------------------------ Layout ---- */
main#app {
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  padding: 18px var(--pad) calc(var(--tabbar-h) + 88px);
  outline: none;
}

body:not(.is-authed) main#app {
  max-width: none;
  padding: 0;
}

@media (max-width: 1023.98px) {
  body.is-authed main#app {
    padding-top: calc(56px + env(safe-area-inset-top));
    padding-bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  h1 { font-size: 1.45rem; }
}

/* Chrome applicatif : masqué tant que non connecté */
.sidebar, .tabbar, .fab, .nav-tools { display: none; }

/* --- Barre d'onglets (mobile) --- */
body.is-authed .tabbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  position: fixed;
  inset: auto 0 0 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--tabbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  z-index: 40;
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  font-size: .6rem;
  font-weight: 600;
  color: var(--ink-faint);
  transition: color .15s;
}

.tabbar__item svg { width: 22px; height: 22px; }

.tabbar__item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabbar__item.is-active { color: var(--green); }

/* --- Bouton flottant : au-dessus de la barre, centré, sans recouvrir un onglet --- */
body.is-authed .fab {
  display: grid;
  place-items: center;
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: var(--shadow-float), inset 0 0 0 1.5px rgba(200, 150, 62, .55);
  z-index: 41;
  transition: transform .18s var(--ease), box-shadow .18s;
}

.fab:active { transform: translateX(-50%) scale(.92); }

/* --- Thème + réglages (mobile) --- */
body.is-authed .nav-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: calc(48px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  z-index: 42;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* --- Sidebar (desktop) --- */
.sidebar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.15;
  color: #fff;
  padding: 6px 14px 22px;
}

.sidebar__link {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-el);
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  text-align: left;
  width: 100%;
  transition: background .15s, color .15s;
}

.sidebar__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.sidebar__link.is-active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: inset 2.5px 0 0 var(--brass);
}

.sidebar__settings { margin-top: auto; }

/* ------------------------------------------------ Pages ---- */
.page {
  animation: page-in .32s var(--ease) both;
  min-width: 0;
  max-width: 100%;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.page > * { min-width: 0; max-width: 100%; }
.page > * + * { margin-top: 14px; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 2px;
}

.page-head h1 {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: break-word;
}

.page-head .btn { flex: 0 1 auto; margin-left: auto; }

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.page-head__actions .btn { margin-left: 0; }

.page-sub { color: var(--ink-soft); font-size: .88rem; }

/* ------------------------------------------------ Héros ---- */
/* Le moment signature : encart « billet » vert bouteille,
   montant en Fraunces, sparkline laiton qui se trace. */
.ledger-head {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-hero);
  padding: 22px 20px 18px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(200, 150, 62, .16) 0%, transparent 45%),
    linear-gradient(155deg, #116854 0%, var(--green) 42%, var(--green-deep) 100%);
  box-shadow: 0 10px 30px rgba(10, 66, 55, .22);
}

.ledger-head::after {              /* filet gravure */
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: calc(var(--r-hero) - 7px);
  pointer-events: none;
}

.ledger-head__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}

.ledger-head__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 9vw, 2.7rem);
  letter-spacing: -.015em;
  margin-top: 2px;
}

.ledger-head__spark { margin: 10px 0 4px; height: 46px; color: var(--brass); }
.ledger-head__spark--month { height: 120px; }

.ledger-head .month-cash {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ledger-head .month-cash .chart-tick,
.ledger-head .month-cash .chart-y-tick {
  fill: rgba(255, 255, 255, .74);
  text-transform: none;
}
.ledger-head .month-cash .chart-grid { stroke: rgba(255, 255, 255, .14); }
.ledger-head .month-cash .chart-zero { stroke: rgba(255, 255, 255, .32); }
.ledger-head .month-cash-today {
  stroke: rgba(255, 255, 255, .5);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.ledger-head .month-cash-future {
  stroke-dasharray: 5 4;
  opacity: .82;
}

.ledger-head__month {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .82);
}

.ledger-head__month span:first-child { text-transform: capitalize; margin-right: auto; }

.ledger-head__flow {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.ledger-head__flow small {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .68);
}
.ledger-head__flow strong { font-size: .95rem; }

.ledger-head__month .amount-credit { color: #8FD8B2; }
.ledger-head__month .amount-debit  { color: #F0B4A2; }

.ledger-head__forecast {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, .2);
  position: relative;
  z-index: 1;
}

.ledger-head__forecast-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}

.ledger-head__forecast-amt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 5.5vw, 1.7rem);
  letter-spacing: -.01em;
  margin-top: 2px;
}

.ledger-head__forecast-hint {
  margin-top: 4px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .75);
}

.forecast-panel__amt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  margin: 4px 0 6px;
}

.ledger-head__wealth {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .82rem;
  color: rgba(255, 255, 255, .82);
  position: relative;
  z-index: 1;
}

.ledger-head__wealth a {
  color: #fff;
  font-weight: 700;
}

.ledger-head__wealth strong {
  font-variant-numeric: tabular-nums;
}

.ledger-head--proj { text-align: center; }

/* ------------------------------------------------ Panneaux ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--pad);
  box-shadow: var(--shadow-card);
  min-width: 0;
  overflow-wrap: break-word;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  min-width: 0;
}

.panel__more { font-size: .82rem; font-weight: 700; }

.panel-duo { display: grid; gap: 14px; }

/* ------------------------------------------------ Épargne ---- */
.inv-grid { display: grid; gap: 10px; }

.inv-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px 12px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: background .12s;
}

.inv-card:hover, .inv-card:active { background: var(--paper); }

.inv-card__bal {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.95rem, 4.2vw, 1.15rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  justify-self: end;
}

.inv-card__ceil {
  grid-column: 1 / -1;
  width: 100%;
}

.inv-card__ceil .budget { margin: 0; }

.btn--tiny {
  flex-shrink: 0;
  min-height: 32px;
  padding: 4px 8px;
  font-size: .75rem;
}

.alerts { display: grid; gap: 8px; margin-bottom: 4px; }

.alert {
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.alert span {
  font-weight: 500;
  font-size: .8rem;
  opacity: .9;
}

.alert--danger { border-color: var(--alert-line); }
.alert--warn {
  border-color: color-mix(in srgb, var(--brass) 55%, var(--line));
  background: color-mix(in srgb, var(--brass) 14%, var(--surface));
}
.alert--info {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.goal-list { display: grid; gap: 10px; }

.goal-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
}

.goal-card.is-behind { border-color: var(--alert-line); }

.goal-card__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  min-width: 0;
}
.goal-card__top span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goal-card__status { font-size: .75rem; font-weight: 600; color: var(--ink-faint); }
.goal-card.is-behind .goal-card__status { color: var(--alert-ink); }
.goal-card__meta { font-size: .78rem; color: var(--ink-faint); }

.exc-list { display: grid; gap: 10px; }

.exc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.exc-row__date { font-weight: 650; grid-column: 1 / -1; }

.exc-row .amount-input { justify-content: flex-end; }
.exc-row .amount-input input {
  font-size: 1.15rem;
  max-width: 90px;
}

.ceil-form { display: grid; gap: 8px; padding: 4px; }
.ceil-form .amount-input { justify-content: flex-start; }
.ceil-form .amount-input input { font-size: 1.35rem; text-align: left; max-width: 140px; }

.proj-nw { font-weight: 500; color: var(--ink-faint); font-size: .75rem; }

.op--rec {
  grid-template-columns: 40px minmax(0, 1fr) auto auto auto;
  column-gap: 8px;
}
.op--rec .btn--tiny,
.op--rec .switch { align-self: center; }

.inv-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.inv-actions:has([data-mov="interest"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.loan-card__due {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: var(--ink-soft);
}

@media (max-width: 1023.98px) {
  .op--rec {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "icon text amt amt"
      "icon text tog  sw";
    row-gap: 6px;
    align-items: center;
  }
  .op--rec .op__icon { grid-area: icon; }
  .op--rec .op__text { grid-area: text; }
  .op--rec .op__amount { grid-area: amt; }
  .op--rec .btn--tiny { grid-area: tog; }
  .op--rec .switch { grid-area: sw; }

  .inv-actions:has([data-mov="interest"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr));
  }
}

.inv-actions + .btn--block { margin-top: 8px; }
.btn--block + .inv-actions { margin-top: 8px; }

.kind-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inv-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 14px;
  font-size: .88rem;
}

.inv-stats span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.pocket-edit {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
}
.pocket-edit__head {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.pocket-edit__head .field { flex: 1; margin: 0; }
.pocket-edit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bracket-list { display: grid; gap: 6px; margin-top: 6px; }
.bracket-row {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 6px;
  align-items: center;
}
.pocket-row {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pocket-row:last-child { border-bottom: 0; }
.pocket-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.pocket-row__head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.abondement-preview {
  padding: 10px 12px;
  border-radius: var(--r-card);
  background: var(--paper);
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink);
}
.pee-horizon {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.pee-horizon .pocket-row { padding-top: 8px; }

.scenario-kind {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.scenario-kind:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.scenario-kind__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.scenario-kind__head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
}
.scenario-kind__head span {
  font-size: .85rem;
  color: var(--ink-soft);
}
.scenario-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.scenario-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-card);
  background: var(--paper);
}
.scenario-step__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line);
  font-size: .8rem;
  font-weight: 650;
}
.scenario-step__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.scenario-step__body span {
  font-size: .82rem;
  color: var(--ink-soft);
}
.scenario-step__match {
  font-weight: 650;
  white-space: nowrap;
}
.scenario-skipped {
  margin: 4px 0 0;
  padding-left: 1.1rem;
  font-size: .82rem;
  color: var(--ink-soft);
}

.inv-rate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* ------------------------------------------------ Registre ---- */
.ledger-group + .ledger-group { margin-top: 14px; }

.ledger-date {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0 2px 6px;
  text-transform: capitalize;
}

.op {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 10px 8px;
  border-radius: var(--r-el);
  text-align: left;
  transition: background .12s;
}

.op:hover, .op:active { background: var(--paper); }

.ledger .op + .op { border-top: 1px solid var(--line-soft); border-radius: 0; }

.op__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.15rem;
  background: color-mix(in srgb, var(--cat, var(--green)) 14%, var(--mix-base));
}

.op__text {
  display: grid;
  min-width: 0;
}

.op__label,
.op__meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op__label { font-weight: 600; }

.op__meta {
  font-size: .78rem;
  color: var(--ink-faint);
}

.op__amount { font-weight: 700; white-space: nowrap; justify-self: end; }

.op__rec {
  font-size: .66rem;
  font-weight: 700;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 999px;
  padding: 1.5px 7px;
  margin-left: 6px;
  vertical-align: 2px;
}

.op__inv {
  font-size: .66rem;
  font-weight: 700;
  color: var(--brass);
  background: color-mix(in srgb, var(--brass) 18%, var(--mix-base));
  border-radius: 999px;
  padding: 1.5px 7px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* ------------------------------------------------ Chips & filtres ---- */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all .15s var(--ease);
}

.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.filters { display: grid; gap: 12px; min-width: 0; }

.filters__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

@media (max-width: 520px) {
  .filters__row { grid-template-columns: 1fr; }
}

.filters__row .field + .field { margin-top: 0; }

.filters__search { position: relative; display: block; }

.filters__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}

.filters .field input,
.filters .field select {
  height: 46px;
  background-color: var(--paper);
}

.filters .filters__search input { padding-left: 40px; }

/* Défilé de catégories dans les formulaires */
.cat-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}
.cat-scroll::-webkit-scrollbar { display: none; }

.cat-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: .84rem;
  font-weight: 600;
  transition: all .15s var(--ease);
}

.cat-chip.is-on {
  border-color: var(--cat, var(--green));
  background: color-mix(in srgb, var(--cat, var(--green)) 13%, var(--mix-base));
  color: var(--ink);
}

/* ------------------------------------------------ Segmenté ---- */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: 12px;
  background: var(--line-soft);
}

.segmented button {
  min-width: 0;
  padding: 9px 8px;
  border-radius: 9px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--ink-soft);
  transition: all .18s var(--ease);
}

.segmented button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.segmented--kind button { font-size: .82rem; }
.segmented--kind button.debit.is-active  { color: var(--debit);  background: var(--debit-bg); }
.segmented--kind button.credit.is-active { color: var(--credit); background: var(--credit-bg); }

/* ------------------------------------------------ Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .92rem;
  transition: transform .15s var(--ease), box-shadow .15s, background .15s;
}

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

.btn--primary {
  color: #fff;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: 0 4px 14px rgba(10, 66, 55, .25);
}

.btn--ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn--danger { background: var(--debit-bg); color: var(--danger); }

.btn--small { padding: 8px 13px; font-size: .84rem; border-radius: 10px; }

.btn--block { width: 100%; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background .15s, color .15s;
}

.icon-btn:hover { color: var(--ink); }

.load-more { margin: 14px auto 0; display: flex; }

/* ------------------------------------------------ Formulaires ---- */
.field { display: grid; gap: 6px; }

.field + .field, .field + .segmented, .segmented + .field,
.field + .cat-scroll, .cat-scroll + .field { margin-top: 14px; }

.field > span { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }

.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}

.field input::placeholder { color: var(--ink-faint); }

.field select {
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A968F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

html.theme-dark .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A7B5AE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.field select option { background: var(--surface); color: var(--ink); }

.field input[type="search"]::-webkit-search-decoration,
.field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.field input[type="month"],
.field input[type="date"] { color-scheme: inherit; }

.field input[type="month"]::-webkit-calendar-picker-indicator,
.field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .65;
}

.field-hint { font-size: .76rem; color: var(--ink-faint); margin-top: 4px; line-height: 1.4; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.check-row input {
  margin-top: 3px;
  accent-color: var(--green);
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
#rec-extra { margin-top: 10px; }

/* Saisie du montant : le champ devient l'événement */
.field--amount { text-align: center; }

.amount-input {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 2px;
}

.field .amount-input input {
  width: 100%;
  max-width: 150px;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.amount-input input::-webkit-outer-spin-button,
.amount-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field .amount-input input:focus { border: 0; box-shadow: none; }

.amount-input em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.form-actions .btn--primary { flex: 1; }

.form-error {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--r-el);
  background: var(--debit-bg);
  color: var(--danger);
  font-size: .85rem;
  font-weight: 600;
}

.confirm-text { color: var(--ink-soft); }

/* Grilles emoji / couleurs (formulaire catégorie) */
.emoji-grid, .color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.emoji {
  display: grid;
  place-items: center;
  height: 42px;
  font-size: 1.25rem;
  border-radius: var(--r-el);
  border: 1.5px solid transparent;
  transition: all .12s;
}

.emoji:hover { background: var(--paper); }
.emoji.is-on { border-color: var(--green); background: var(--green-soft); }

.swatch {
  height: 34px;
  border-radius: var(--r-el);
  border: 2px solid transparent;
  transition: transform .12s var(--ease);
}

.swatch.is-on { border-color: var(--ink); transform: scale(1.08); }

/* ------------------------------------------------ Interrupteur ---- */
.switch { display: inline-flex; align-items: center; }

.switch input { position: absolute; opacity: 0; }

.switch__track {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background .2s;
}

.switch__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(21, 36, 32, .25);
  transition: transform .2s var(--ease);
}

.switch input:checked + .switch__track { background: var(--credit); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--green); outline-offset: 2px; }

.op.is-paused .op__label, .op.is-paused .op__amount { opacity: .45; }

/* ------------------------------------------------ Budgets ---- */
.budget-list { display: grid; gap: 12px; }

.budget__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: .87rem;
  min-width: 0;
}

.budget__name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget__nums { color: var(--ink-soft); font-size: .8rem; flex-shrink: 0; white-space: nowrap; }
.budget__nums.is-over { color: var(--danger); font-weight: 700; }

.budget__bar {
  height: 7px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
  margin-top: 5px;
}

.budget__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--credit);
  transition: width .5s var(--ease);
}

.budget__fill.is-warn { background: var(--brass); }
.budget__fill.is-over { background: var(--danger); }

/* ------------------------------------------------ Graphiques ---- */
.spark { width: 100%; max-width: 100%; height: 100%; min-width: 0; overflow: visible; }

.spark-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: spark-draw 1s .15s var(--ease) forwards;
}

.spark-dot { opacity: 0; animation: fade-in .3s 1s forwards; }

@keyframes spark-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

.chart-line,
.chart-bars,
.chart-donut {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 0;
  overflow: hidden;
}

.chart-area { fill: color-mix(in srgb, var(--green) 18%, transparent); }

.chart-stroke {
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: spark-draw .9s .1s var(--ease) forwards;
}

.chart-stroke--proj { stroke-width: 2.6; }

.chart-line--proj,
.chart-cashflow { display: block; }

.chart-zero { stroke: var(--line); stroke-dasharray: 3 4; }
.chart-zero--strong { stroke: var(--ink-faint); stroke-dasharray: none; stroke-width: 1.2; opacity: .55; }

.chart-grid { stroke: var(--line-soft); stroke-width: 1; }

.chart-tick { font-size: 10px; fill: var(--ink-faint); text-transform: capitalize; }
.chart-y-tick { font-size: 9.5px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }

.chart-dot { fill: var(--green); }
.chart-dot.is-neg { fill: var(--danger); }
.chart-dot.is-last { stroke: var(--surface); stroke-width: 2; }

.chart-neg-mark { stroke: var(--debit); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .7; }
.chart-neg-label { font-size: 9px; font-weight: 700; fill: var(--debit); letter-spacing: .04em; text-transform: uppercase; }
.chart-peak { font-size: 10px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.chart-peak.is-min { fill: var(--debit); }

.chart-net-line {
  fill: none;
  pointer-events: none;
  stroke-linejoin: round;
  opacity: .95;
}
.chart-net-dot { fill: var(--brass); }
.chart-net-dot.is-neg { fill: var(--debit); }

.chart-frame {
  margin: 4px 0 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bar-credit { fill: var(--credit); opacity: .88; }
.bar-debit  { fill: var(--debit);  opacity: .82; }
.bar-brass  { fill: var(--brass);  opacity: .9; }
.bar-credit:hover,
.bar-debit:hover,
.bar-brass:hover { opacity: 1; }

.chart-caption {
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-faint);
  overflow-wrap: break-word;
}

.chart-caption .dot { vertical-align: middle; }

.chart-empty { color: var(--ink-faint); font-size: .88rem; padding: 18px 0; text-align: center; }

.dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dot--credit { background: var(--credit); }
.dot--debit  { background: var(--debit); margin-left: 10px; }
.dot--net,
.dot--loan   { background: var(--brass); margin-left: 10px; }
.dot--bal    { background: var(--green); margin-left: 10px; }

/* Donut */
.donut-wrap {
  display: grid;
  grid-template-columns: minmax(0, 128px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.chart-donut .pct {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
}

.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: .84rem;
  min-width: 0;
}

.donut-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; }

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

.donut-legend__val { font-weight: 700; font-size: .8rem; }

/* ------------------------------------------------ Projection ---- */
.proj-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.proj-kpi {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-el);
  padding: 12px 10px 10px;
  box-shadow: var(--shadow-card);
}

.proj-kpi small {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.proj-kpi strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(.82rem, 3.8vw, 1.12rem);
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.proj-kpi span {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  color: var(--ink-soft);
  text-transform: capitalize;
}

@media (max-width: 519.98px) {
  .proj-kpis { gap: 6px; }
  .proj-kpi { padding: 10px 8px 8px; }
  .proj-kpi strong { font-size: .95rem; }

  .donut-wrap {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .chart-donut {
    width: min(140px, 42vw);
    justify-self: center;
  }
}

.alert {
  padding: 12px 14px;
  border-radius: var(--r-el);
  border: 1px solid var(--alert-line);
  background: var(--alert-bg);
  color: var(--alert-ink);
  font-size: .87rem;
  font-weight: 600;
}

.proj-table { display: grid; font-size: .85rem; min-width: 0; }

.proj-row {
  display: grid;
  gap: 2px 10px;
  padding: 10px 4px;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
  min-width: 0;
}

/* Mobile : deux lignes — « Mois … Solde » puis « +Entrées −Sorties » */
@media (max-width: 719.98px) {
  .proj-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "m b"
      "i o";
  }
  .proj-row--head { display: none; }
  .proj-month  { grid-area: m; min-width: 0; }
  .proj-balance{ grid-area: b; text-align: right; min-width: 0; }
  .proj-row .amount-credit { grid-area: i; font-size: .78rem; }
  .proj-row .amount-debit  { grid-area: o; font-size: .78rem; text-align: right; }
  .proj-nw { display: block; }
}

@media (min-width: 720px) {
  .proj-row { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; font-size: .85rem; }
  .proj-row > span:not(:first-child) { text-align: right; }
}

.proj-row--head {
  border-top: 0;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.proj-month { font-weight: 600; text-transform: capitalize; }

.proj-balance { font-weight: 700; }

.proj-row.is-neg .proj-balance { color: var(--danger); }
.proj-row.is-neg { background: linear-gradient(90deg, transparent, var(--debit-bg)); }

/* ------------------------------------------------ Auth ---- */
.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background:
    radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--green) 16%, transparent) 0%, transparent 60%),
    var(--paper);
}

.auth__theme {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  z-index: 42;
}

.auth__card { width: 100%; max-width: 400px; }

.auth__brand {
  display: grid;
  justify-items: center;
  text-align: center;
  margin-bottom: 26px;
}

.auth__logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  margin-bottom: 14px;
  color: var(--brass);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: var(--shadow-float), inset 0 0 0 1.5px rgba(200, 150, 62, .5);
}

.auth__brand h1 { font-size: 1.9rem; }

.auth__tag {
  color: var(--ink-soft);
  font-size: .9rem;
  margin-top: 8px;
  max-width: 28ch;
}

.auth__form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 20px;
  box-shadow: var(--shadow-card);
}

.auth__form .btn--primary { margin-top: 18px; }

.auth .segmented { margin-bottom: 18px; }

/* ------------------------------------------------ Feuilles modales ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 36, 32, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .25s;
}

.sheet {
  position: absolute;
  inset: auto 0 0 0;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform .3s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}

.sheet-wrap.is-open .sheet-backdrop { opacity: 1; }
.sheet-wrap.is-open .sheet { transform: none; }

.sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 10px auto 0;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 8px;
}

.sheet__head h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }

.sheet__close { width: 34px; height: 34px; border: 0; background: var(--line-soft); }

.sheet__body { padding: 6px 18px 22px; overflow-y: auto; }

/* ------------------------------------------------ Toasts ---- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  z-index: 70;
  width: min(92vw, 380px);
  justify-items: center;
  pointer-events: none;
}

.toast {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .86rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(21, 36, 32, .3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s var(--ease);
  max-width: 100%;
}

.toast.is-in { opacity: 1; transform: none; }

.toast--success { background: var(--credit); }
.toast--error   { background: var(--danger); }

/* ------------------------------------------------ Divers ---- */
.empty {
  color: var(--ink-faint);
  font-size: .88rem;
  text-align: center;
  padding: 22px 10px;
}

.settings { display: grid; gap: 4px; }

.settings__user {
  padding: 12px 4px 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}

.settings__user strong { display: block; font-size: 1.05rem; }
.settings__user span { color: var(--ink-faint); font-size: .85rem; }

.settings__section {
  margin: 14px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.settings__hint {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1.45;
  padding: 0 4px 10px;
}

.settings .btn { margin-top: 6px; }
.settings .btn:disabled { opacity: .55; }

.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  border-radius: var(--r-el);
  font-weight: 600;
  text-align: left;
}

.settings__row:hover { background: var(--paper); }

/* Squelettes de chargement */
.skeleton {
  height: 84px;
  border-radius: var(--r-card);
  background: linear-gradient(100deg, var(--line-soft) 40%, var(--skeleton-mid) 50%, var(--line-soft) 60%);
  background-size: 220% 100%;
  animation: shimmer 1.1s linear infinite;
}

.skeleton--head { height: 168px; border-radius: var(--r-hero); }

.skeleton + .skeleton { margin-top: 14px; }

@keyframes shimmer { to { background-position: -120% 0; } }

/* ============================================================
   ≥ 720px — confort tablette : la feuille devient une boîte
   ============================================================ */
@media (min-width: 720px) {
  main#app { padding-top: 30px; }

  .panel-duo { grid-template-columns: 1fr 1fr; }

  .inv-grid { grid-template-columns: 1fr 1fr; }

  .sheet {
    inset: 0;
    margin: auto;
    width: min(94vw, 480px);
    height: fit-content;
    max-height: 86vh;
    border-radius: 20px;
    transform: translateY(14px);
    opacity: 0;
    transition: transform .25s var(--ease), opacity .25s;
  }

  .sheet-wrap.is-open .sheet { transform: none; opacity: 1; }

  .sheet__grip { display: none; }
}

/* ============================================================
   ≥ 1024px — desktop : sidebar fixe, plus de tabbar
   ============================================================ */
@media (min-width: 1024px) {
  body.is-authed { padding-left: 232px; }

  body.is-authed .sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    inset: 0 auto 0 0;
    width: 232px;
    padding: 22px 14px;
    background: linear-gradient(170deg, #11543F 0%, var(--green-deep) 100%);
    z-index: 30;
  }

  body.is-authed .tabbar, body.is-authed .nav-tools { display: none; }

  body.is-authed .fab {
    left: auto;
    right: 34px;
    bottom: 34px;
    transform: none;
    width: 60px;
    height: 60px;
  }

  .fab:active { transform: scale(.92); }

  body.is-authed main#app { max-width: 860px; padding-top: 30px; padding-bottom: 60px; }

  .toasts { bottom: 28px; }
}

/* ------------------------------------------------ Banque DSP2 ---- */
.bank-panel { display: grid; gap: 14px; }
.bank-import { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line, #E4E2D8); }
.bank-conn {
  padding: 12px 0;
  border-bottom: 1px solid var(--line, rgba(15, 40, 32, .08));
}
.bank-conn:last-of-type { border-bottom: none; }
.bank-conn__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 4px;
}
.bank-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(15, 92, 74, .12); color: var(--teal, #0F5C4A);
}
.bank-badge--needs_reauth, .bank-badge--error {
  background: rgba(178, 58, 42, .12); color: var(--debit, #B23A2A);
}
.bank-badge--pending { background: rgba(200, 150, 62, .18); color: #8a6a20; }
.bank-accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bank-accounts li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .9rem; padding: 6px 0;
}
.bank-pill {
  display: inline-block; margin-left: 8px;
  font-size: .68rem; font-weight: 700; vertical-align: middle;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(62, 107, 140, .15); color: #3E6B8C;
}
.bank-error { color: var(--debit, #B23A2A); }
.bank-tx-row { cursor: default; opacity: 1; }
.bank-tx-row:disabled { opacity: 1; pointer-events: none; }
.bank-panel .alert { margin-bottom: 4px; }

/* ------------------------------------------------ Import opérations Excel ---- */
.op-import-review {
  display: grid;
  gap: 18px;
  position: relative;
}

.op-import-review__intro {
  margin: 0;
  line-height: 1.45;
}

.op-import-progress {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
}
.op-import-progress__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.op-import-progress__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--green);
  transition: width .25s var(--ease);
}

.op-import-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-el);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.op-import-toolbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.op-import-toolbar__count {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.op-import-list {
  display: grid;
  gap: 0;
  max-height: min(62vh, 560px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.op-import-list__head,
.op-import-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(5.5rem, 7.5rem) minmax(0, 1fr) auto;
  gap: 12px 14px;
  align-items: center;
  padding: 11px 14px;
}

.op-import-list__head {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--surface) 88%, var(--green-soft));
  border-bottom: 1px solid var(--line);
}

.op-import-colfilter {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.op-import-colfilter--right {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.op-import-colfilter__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.op-import-colfilter__btn:hover,
.op-import-colfilter__btn.is-active {
  color: var(--green);
  background: var(--green-soft);
}
.op-import-colfilter__caret { font-size: .75rem; opacity: .8; }

.op-import-list__body { display: block; }
.op-import-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-faint);
  font-size: .9rem;
}

.op-import-filter-pop {
  position: absolute;
  z-index: 20;
  width: min(280px, calc(100% - 16px));
  max-height: min(52vh, 360px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-el);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  color: var(--ink);
}
.op-import-filter-pop[hidden] { display: none !important; }
.op-import-filter-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.op-import-filter-pop__head strong { font-size: .86rem; }
.op-import-filter-pop__search {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
}
.op-import-filter-pop__actions {
  display: flex;
  gap: 8px;
}
.op-import-filter-pop__list {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--paper);
  max-height: 220px;
}
.op-import-filter-pop__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  cursor: pointer;
  font-size: .86rem;
  border-bottom: 1px solid var(--line-soft);
}
.op-import-filter-pop__item:last-child { border-bottom: none; }
.op-import-filter-pop__item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.op-import-filter-pop__item input {
  accent-color: var(--green);
}
.op-import-filter-pop__foot {
  display: flex;
  justify-content: flex-end;
}

.op-import-row {
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  color: var(--ink);
  transition: background .15s var(--ease), opacity .15s var(--ease);
}
.op-import-row:last-child { border-bottom: none; }
.op-import-row:hover { background: color-mix(in srgb, var(--green-soft) 55%, transparent); }
.op-import-row.is-off {
  opacity: .55;
  background: color-mix(in srgb, var(--paper) 70%, var(--surface));
}
.op-import-row.is-off:hover { opacity: .7; }

.op-import-row input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--green);
  cursor: pointer;
}

.op-import-row__date {
  color: var(--ink-soft);
  font-size: .86rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.op-import-row__main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.op-import-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}

.op-import-row__kind {
  width: fit-content;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.op-import-row__kind--debit {
  color: var(--debit);
  background: var(--debit-bg);
}
.op-import-row__kind--credit {
  color: var(--credit);
  background: var(--credit-bg);
}

.op-import-row__amt {
  justify-self: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}

.op-import-actions {
  margin-top: 2px;
  padding: 12px 0 4px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--paper) 70%, transparent);
}

@media (max-width: 560px) {
  .op-import-list__head { display: none; }
  .op-import-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "check date amt"
      "check label amt";
    align-items: start;
  }
  .op-import-row input { grid-area: check; margin-top: 2px; }
  .op-import-row__date { grid-area: date; }
  .op-import-row__main { grid-area: label; }
  .op-import-row__label { white-space: normal; }
  .op-import-row__amt {
    grid-area: amt;
    align-self: center;
    justify-self: end;
  }
}

/* ------------------------------------------------ Accessibilité ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .spark-draw, .chart-stroke { stroke-dashoffset: 0; }
  .spark-dot { opacity: 1; }
}