/* ==========================================================================
   AkiliFin — Thème (design tokens + composants de base)
   À charger globalement (ex. base.html). Toutes les valeurs de marque sont
   des variables CSS : ne pas coder de couleurs en dur ailleurs.
   Règle d'or : USD = teal, FC = indigo, jamais additionnés ni convertis.
   Montants : USD 2 décimales, FC 0 décimale, chiffres tabulaires.
   ========================================================================== */

:root {
  /* Couleurs de marque / interface */
  --ft-ink:      #10232A;   /* texte principal, barres */
  --ft-teal:     #087B67;   /* primaire — USD */
  --ft-teal-d:   #0D5F51;   /* hover / dégradés */
  --ft-indigo:   #2F4B99;   /* FC */
  --ft-paper:    #F3F6F6;   /* fond application */
  --ft-surface:  #FFFFFF;   /* cartes */
  --ft-muted:    #64747A;   /* texte secondaire */
  --ft-line:     #E1E7E8;   /* bordures / séparateurs */

  /* Couleurs d'état — réservées aux statuts, jamais décoratives */
  --ft-amber:    #B66C10;   /* attention — budget >= 80 % */
  --ft-danger:   #C43D32;   /* dépassement / destructif */
  --ft-info:     #246BCE;   /* info / projection / liens */

  /* Alias de devise (mêmes valeurs, sémantique explicite) */
  --ft-usd:      var(--ft-teal);
  --ft-fc:       var(--ft-indigo);

  /* Teintes claires (fonds de badges / bandeaux) */
  --ft-usd-tint:    #E9F5F1;
  --ft-fc-tint:     #EAEDF8;
  --ft-amber-tint:  #FBEBD6;
  --ft-danger-tint: #FBE4E1;
  --ft-info-tint:   #E7EFFB;
  --ft-teal-ice:    #4FC0A8;   /* accent teal sur fond sombre (sidebar active, logo) */
  --ft-indigo-lt:   #6E86D6;   /* indigo éclairci sur fond sombre */
  --ft-ink-soft:    #1B3540;   /* fond de l'item actif dans la sidebar sombre */
  --ft-muted-dark:  #A9B8BD;   /* texte secondaire sur fond sombre (sidebar) */

  /* Typographie */
  --ft-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ft-fs-amount: 28px;   /* montant clé (24–32), 800, tabulaire */
  --ft-fs-display:28px;   /* titres d'écran, 800 */
  --ft-fs-h1:     22px;   /* 700 */
  --ft-fs-h2:     18px;   /* 700 */
  --ft-fs-h3:     15px;   /* 700 */
  --ft-fs-body:   14px;   /* 400/500 */
  --ft-fs-small:  12px;   /* 500 */
  --ft-fs-caption:11px;   /* 500 */

  /* Espacement (échelle 4 / 8 / 12 / 16 / 24 / 32) */
  --ft-s1: 4px;  --ft-s2: 8px;  --ft-s3: 12px;
  --ft-s4: 16px; --ft-s5: 24px; --ft-s6: 32px;

  /* Rayons & ombres */
  --ft-radius:      14px;   /* cartes 12–16 */
  --ft-radius-sm:   10px;
  --ft-radius-pill: 999px;  /* pilules / badges */
  --ft-shadow:      0 1px 2px rgba(16,35,42,.06), 0 6px 16px rgba(16,35,42,.06);

  /* Cibles tactiles */
  --ft-tap: 44px;
}

/* ------------------------------ Base ------------------------------------- */
body.ft {
  font-family: var(--ft-font);
  font-size: var(--ft-fs-body);
  color: var(--ft-ink);
  background: var(--ft-paper);
  line-height: 1.45;
}
.ft-h1 { font-size: var(--ft-fs-h1); font-weight: 700; color: var(--ft-ink); }
.ft-h2 { font-size: var(--ft-fs-h2); font-weight: 700; color: var(--ft-ink); }
.ft-h3 { font-size: var(--ft-fs-h3); font-weight: 700; color: var(--ft-ink); }
.ft-muted { color: var(--ft-muted); }

/* Montants : toujours en chiffres tabulaires pour aligner USD / FC */
.ft-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ft-amount { font-size: var(--ft-fs-amount); font-weight: 800; color: var(--ft-ink);
             font-variant-numeric: tabular-nums; }

/* --------------------------- Boutons ------------------------------------- */
.ft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ft-s2);
  min-height: var(--ft-tap); padding: 0 var(--ft-s4);
  border-radius: var(--ft-radius-pill); border: 1.5px solid transparent;
  font-family: var(--ft-font); font-size: var(--ft-fs-body); font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.ft-btn--primary   { background: var(--ft-teal); color: #fff; }
.ft-btn--primary:hover { background: var(--ft-teal-d); }
.ft-btn--secondary { background: #fff; color: var(--ft-teal); border-color: var(--ft-teal); }
.ft-btn--ghost     { background: var(--ft-paper); color: var(--ft-ink); }
.ft-btn--danger    { background: #fff; color: var(--ft-danger); border-color: #EBC7C3; }
.ft-btn[disabled]  { opacity: .5; cursor: not-allowed; }

/* --------------------------- Badges / pilules ---------------------------- */
.ft-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: var(--ft-radius-pill);
  font-size: var(--ft-fs-caption); font-weight: 800; line-height: 1.6;
}
.ft-badge--recu  { background: var(--ft-usd-tint);   color: var(--ft-teal); }   /* Reçu */
.ft-badge--prevu { background: var(--ft-fc-tint);    color: var(--ft-indigo); } /* Prévu */
.ft-badge--ok    { background: var(--ft-usd-tint);   color: var(--ft-teal-d); }
.ft-badge--warn  { background: var(--ft-amber-tint); color: var(--ft-amber); }  /* >= 80 % */
.ft-badge--over  { background: var(--ft-danger-tint);color: var(--ft-danger); } /* dépassé */
.ft-badge--info  { background: var(--ft-info-tint);   color: var(--ft-info); }  /* projection (Partie 3) */

/* --------------------------- Carte générique ----------------------------- */
.ft-card {
  background: var(--ft-surface); border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius); padding: var(--ft-s4); box-shadow: var(--ft-shadow);
}

/* ============ Carte KPI bi-devise — COMPOSANT SIGNATURE ==================
   Deux blocs jumeaux, jamais un total. L'accent de devise ne vit que sur
   l'étiquette et le filet supérieur ; l'état (ambre/rouge) ne vit que sur
   le badge et la barre de budget. Aucune conversion entre les deux.        */
.ft-kpi {
  background: var(--ft-surface); border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius); padding: var(--ft-s4);
  border-top: 3px solid var(--ft-line);       /* filet supérieur = accent devise */
}
.ft-kpi--usd { border-top-color: var(--ft-usd); }
.ft-kpi--fc  { border-top-color: var(--ft-fc); }
.ft-kpi__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ft-kpi__tag {                                  /* étiquette USD / FC */
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: var(--ft-fs-caption); font-weight: 800; color: #fff; letter-spacing: .5px;
}
.ft-kpi--usd .ft-kpi__tag { background: var(--ft-usd); }
.ft-kpi--fc  .ft-kpi__tag { background: var(--ft-fc); }
.ft-kpi__label { font-size: var(--ft-fs-caption); font-weight: 700; color: var(--ft-muted);
                 letter-spacing: .6px; text-transform: uppercase; }
.ft-kpi__amount{ font-size: var(--ft-fs-amount); font-weight: 800; color: var(--ft-ink);
                 font-variant-numeric: tabular-nums; margin: 2px 0 8px; }
.ft-kpi__row { display: flex; justify-content: space-between;
               font-size: var(--ft-fs-small); color: var(--ft-muted); }

/* Barre de budget : couleur portée par l'ÉTAT, pas par la devise */
.ft-bar { height: 8px; border-radius: 6px; background: #E9EEED; overflow: hidden; margin: 8px 0 4px; }
.ft-bar__fill { display: block; height: 100%; border-radius: 6px; background: var(--ft-teal); }
.ft-bar__fill.is-warn { background: var(--ft-amber); }
.ft-bar__fill.is-over { background: var(--ft-danger); }

/* --------------- Sélecteur d'affichage des devises (segmenté) ------------ */
.ft-seg { display: inline-flex; background: var(--ft-paper); border-radius: var(--ft-radius-pill);
          padding: 4px; gap: 4px; }
.ft-seg__item { min-height: var(--ft-tap); display: inline-flex; align-items: center;
                padding: 0 16px; border-radius: var(--ft-radius-pill);
                font-size: var(--ft-fs-small); font-weight: 700; color: var(--ft-muted);
                background: transparent; border: 0; cursor: pointer; }
.ft-seg__item.is-active { background: var(--ft-ink); color: #fff; }

/* --------------------------- Champs de saisie ---------------------------- */
.ft-field { display: block; margin-bottom: var(--ft-s3); }
.ft-field__label { font-size: var(--ft-fs-small); font-weight: 600; color: var(--ft-muted);
                   display: block; margin-bottom: 4px; }
.ft-input { width: 100%; min-height: var(--ft-tap); padding: 0 12px;
            border: 1.5px solid var(--ft-line); border-radius: var(--ft-radius-sm);
            font-family: var(--ft-font); font-size: var(--ft-fs-body); background: #fff; }
.ft-input:focus { outline: none; border-color: var(--ft-teal); }
.ft-input.is-error { border-color: var(--ft-danger); }
.ft-input:disabled { background: var(--ft-paper); color: var(--ft-muted); cursor: not-allowed; }

/* Sélecteur de devise sur écran de saisie (USD / FC, choix explicite) */
.ft-cur { display: inline-flex; gap: 8px; }
.ft-cur__opt { min-height: var(--ft-tap); padding: 0 18px; border-radius: var(--ft-radius-sm);
               border: 1.5px solid var(--ft-line); background: #fff; font-weight: 700;
               color: var(--ft-muted); cursor: pointer; }
.ft-cur__opt.is-active--usd { border-color: var(--ft-usd); color: var(--ft-usd); background: var(--ft-usd-tint); }
.ft-cur__opt.is-active--fc  { border-color: var(--ft-fc);  color: var(--ft-fc);  background: var(--ft-fc-tint); }

/* .ft-cur__opt utilisé comme <label> enveloppant une vraie case radio
   (accessibilité + fonctionne sans JS) : la case est masquée visuellement,
   l'état actif est piloté en CSS pur via :has(:checked) — ajout Partie 2,
   même rendu final que .is-active--usd/--fc ci-dessus. */
.ft-cur__opt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ft-cur__radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.ft-cur__opt:has(.ft-cur__radio:checked).ft-cur__opt--usd { border-color: var(--ft-usd); color: var(--ft-usd); background: var(--ft-usd-tint); }
.ft-cur__opt:has(.ft-cur__radio:checked).ft-cur__opt--fc  { border-color: var(--ft-fc);  color: var(--ft-fc);  background: var(--ft-fc-tint); }
.ft-cur__opt:has(.ft-cur__radio:focus-visible) { outline: 2px solid var(--ft-ink); outline-offset: 2px; }
/* Coche visible uniquement sur l'option cochée (comme la maquette) */
.ft-cur__opt .ft-icon { display: none; }
.ft-cur__opt:has(.ft-cur__radio:checked) .ft-icon { display: block; }

/* --------------------------- Puce de catégorie --------------------------- */
.ft-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
           border-radius: var(--ft-radius-pill); border: 1.5px solid var(--ft-line);
           background: #fff; font-size: var(--ft-fs-small); font-weight: 700; color: var(--ft-ink);
           cursor: pointer; text-decoration: none; }
.ft-chip.is-active { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }

/* .ft-chip utilisé comme <label> + case radio masquée (choix dans un
   formulaire, sans JS) — ajout Partie 2, même principe que .ft-cur__opt. */
.ft-chip { position: relative; }
.ft-chip__radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.ft-chip:has(.ft-chip__radio:checked) { background: var(--ft-ink); color: #fff; border-color: var(--ft-ink); }
.ft-chip:has(.ft-chip__radio:focus-visible) { outline: 2px solid var(--ft-ink); outline-offset: 2px; }

/* ------------------- Interrupteur actif/inactif (rubriques) --------------
   Non fourni dans le thème d'origine — ajouté en Partie 2 pour .ft-rule,
   à partir des seuls tokens --ft-*. Case réelle masquée (accessible, sans
   JS), état visuel piloté via :has(:checked). */
.ft-toggle { display: inline-flex; align-items: center; gap: var(--ft-s2); cursor: pointer; }
.ft-toggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.ft-toggle__track { position: relative; flex-shrink: 0; width: 40px; height: 24px;
                     background: var(--ft-line); border-radius: var(--ft-radius-pill); }
.ft-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
                     background: #fff; border-radius: 50%; box-shadow: var(--ft-shadow); }
.ft-toggle:has(.ft-toggle__input:checked) .ft-toggle__track { background: var(--ft-teal); }
.ft-toggle:has(.ft-toggle__input:checked) .ft-toggle__thumb { transform: translateX(16px); }
.ft-toggle:has(.ft-toggle__input:focus-visible) .ft-toggle__track { outline: 2px solid var(--ft-ink); outline-offset: 2px; }
.ft-toggle__label { font-size: var(--ft-fs-small); font-weight: 600; color: var(--ft-muted); }

/* ------------------ Ligne de rubrique calculée (réglages) ---------------- */
.ft-rule { display: flex; align-items: center; gap: var(--ft-s3); padding: var(--ft-s3) 0;
           border-bottom: 1px solid var(--ft-line); }
.ft-rule__handle { color: var(--ft-muted); cursor: grab; }          /* poignée de glissement */
.ft-rule__name { font-weight: 700; }
.ft-rule__pct { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.ft-rule__scope { font-size: var(--ft-fs-caption); color: var(--ft-muted); }

/* --------------------------- Progression / objectifs --------------------- */
.ft-progress { height: 6px; border-radius: 4px; background: #E9EEED; overflow: hidden; }
.ft-progress__fill--usd { display: block; height: 100%; background: var(--ft-usd); }
.ft-progress__fill--fc  { display: block; height: 100%; background: var(--ft-fc); }

/* --------------------- Carte « Conseil du jour » (mise en avant) ---------
   Fond Encre + accent teal-ice : délibérément DISTINCT du Teal (USD) et de
   l'Indigo (FC), et des couleurs d'état ambre/rouge (jamais utilisées ici,
   rien à évaluer) — pour qu'un conseil ne soit jamais confondu avec un
   accent de devise ou une alerte. Contraste AA : texte blanc sur Encre. */
.ft-tip-spotlight {
  display: flex; align-items: flex-start; gap: var(--ft-s3);
  background: linear-gradient(135deg, var(--ft-ink) 0%, var(--ft-ink-soft) 100%);
  color: #fff; border-radius: var(--ft-radius); padding: var(--ft-s4);
  box-shadow: var(--ft-shadow);
}
.ft-tip-spotlight__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(79, 192, 168, 0.18); color: var(--ft-teal-ice);
}
.ft-tip-spotlight__body { flex: 1; min-width: 0; }
.ft-tip-spotlight__head { display: flex; align-items: center; gap: var(--ft-s2); flex-wrap: wrap; margin-bottom: 6px; }
.ft-tip-spotlight__eyebrow { font: 700 11px/1 Inter; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ft-teal-ice); }
.ft-tip-spotlight__badge { font: 600 11px/1 Inter; letter-spacing: 0.02em; color: #fff;
             background: rgba(255, 255, 255, 0.16); padding: 4px 10px; border-radius: 999px; }
.ft-tip-spotlight__text { margin: 0; font-size: var(--ft-fs-body); line-height: 1.6; color: #fff; }
.ft-tip-spotlight__dismiss-form { margin: -4px -4px 0 0; flex-shrink: 0; }
.ft-tip-spotlight__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ft-tap); height: var(--ft-tap); border-radius: var(--ft-radius-sm);
  border: 0; background: none; color: rgba(255, 255, 255, 0.75); cursor: pointer;
}
.ft-tip-spotlight__dismiss:hover, .ft-tip-spotlight__dismiss:focus-visible { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* --------------------------- Bandeaux & toasts --------------------------- */
.ft-banner { display: flex; align-items: center; gap: 8px; padding: 8px 14px;
             font-size: var(--ft-fs-small); font-weight: 700; }
/* [hidden] doit rester prioritaire sur display:flex, sinon un bandeau masque
   via banner.hidden = true (JS) reste visible malgre l'attribut HTML. */
.ft-banner[hidden] { display: none !important; }
.ft-banner--offline { background: var(--ft-ink);      color: #fff; }
.ft-banner--sync-ok { background: var(--ft-usd-tint); color: var(--ft-teal-d); }
.ft-banner--sync-late{background: var(--ft-amber-tint);color: var(--ft-amber); }

.ft-toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
            border-radius: var(--ft-radius); box-shadow: var(--ft-shadow);
            background: var(--ft-ink); color: #fff; font-size: var(--ft-fs-small); }
.ft-toast--offline { background: #223840; }
.ft-toast--error   { background: var(--ft-danger); }

.ft-toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--ft-tap) + var(--ft-s4));
                   width: calc(100% - 2 * var(--ft-s4)); max-width: 420px; display: flex; flex-direction: column;
                   gap: 8px; z-index: 60; pointer-events: none; }
.ft-toast-stack .ft-toast { pointer-events: auto; }
@media (min-width: 900px) { .ft-toast-stack { bottom: var(--ft-s4); } }

/* --------------------------- Navigation ---------------------------------- */
/* Mobile : barre d'onglets basse (5 entrées) */
.ft-tabbar { display: flex; justify-content: space-around; align-items: center;
             background: #fff; border-top: 1px solid var(--ft-line);
             position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
.ft-tabbar__item { flex: 1; min-height: var(--ft-tap); display: flex; flex-direction: column;
                   align-items: center; justify-content: center; gap: 2px;
                   font-size: 10px; color: var(--ft-muted); text-decoration: none; }
.ft-tabbar__item.is-active { color: var(--ft-teal); }

/* Desktop : barre latérale */
.ft-sidebar { width: 232px; background: var(--ft-ink); color: #fff; min-height: 100vh;
              padding: var(--ft-s4) var(--ft-s3); display: flex; flex-direction: column; gap: var(--ft-s1); }
.ft-sidebar__item { display: flex; align-items: center; gap: 12px; min-height: 44px;
                    padding: 0 12px; border-radius: var(--ft-radius-sm);
                    color: var(--ft-muted-dark); text-decoration: none; font-weight: 600; }
.ft-sidebar__item.is-active { background: var(--ft-ink-soft); color: #fff; }
.ft-sidebar__item.is-active svg { color: var(--ft-teal-ice); }

/* ------------- Disposition d'écran : sidebar desktop / tabbar mobile ------
   Non fournie dans le thème d'origine — ajoutée en Partie 3. .ft-tabbar est
   fixe en bas en mobile (masquée ≥ 900px) ; .ft-sidebar est masquée en
   mobile et redevient une colonne fixe ≥ 900px. .ft-app-main réserve la
   place de la tabbar fixe en mobile. */
.ft-app-shell { display: flex; min-height: 100vh; }
.ft-app-main { flex: 1; min-width: 0; padding-bottom: calc(var(--ft-tap) + var(--ft-s4)); }
.ft-sidebar { display: none; }
.ft-sidebar__brand { display: flex; align-items: center; gap: var(--ft-s2); padding: 0 8px var(--ft-s4);
                      font-weight: 800; font-size: var(--ft-fs-h2); color: #fff; text-decoration: none; }
.ft-sidebar__brand img { width: 21px; height: 26px; }

/* ------------- Mot-marque « AkiliFin » ------------------------------------
   Toujours un seul span (un seul item flex) dans un conteneur à gap, sinon
   le gap insère un espace entre le nœud texte « Akili » et le span « Fin »
   et affiche « Akili Fin ». Le gap du conteneur ne sépare donc plus que le
   logo (img) du mot-marque — jamais l'intérieur du mot. */
.ft-wordmark { white-space: nowrap; }
.ft-wordmark__accent { color: var(--ft-teal); }
.ft-sidebar__brand .ft-wordmark__accent,
.ft-auth-visual__brand .ft-wordmark__accent { color: var(--ft-teal-ice); }
.ft-sidebar__spacer { flex: 1; }
.ft-sidebar__sync { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px;
                    border: 1px solid var(--ft-ink-soft); border-radius: var(--ft-radius-sm);
                    color: var(--ft-muted-dark); font-size: var(--ft-fs-caption); }
.ft-sidebar__sync .ft-icon { color: var(--ft-teal-ice); }
@media (min-width: 900px) {
  .ft-sidebar { display: flex; }
  .ft-tabbar { display: none; }
  .ft-app-main { padding-bottom: 0; }
}

/* --------------------------- Squelettes de chargement -------------------- */
.ft-skeleton { background: linear-gradient(90deg,#eef2f1 25%,#e3eae9 37%,#eef2f1 63%);
               background-size: 400% 100%; animation: ft-shimmer 1.3s ease infinite;
               border-radius: 8px; }
@keyframes ft-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --------------------------- Utilitaires --------------------------------- */
.ft-stack > * + * { margin-top: var(--ft-s3); }
.ft-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ft-s4); }  /* USD | FC côte à côte */
/* Filtre d'affichage sur une seule devise (Partie 3) : la carte restante
   doit occuper toute la largeur, jamais une simple colonne avec un vide à
   côté. Non fournie dans le thème d'origine. */
.ft-grid-2--single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .ft-grid-2 { grid-template-columns: 1fr; } }          /* empilé en mobile */

/* Rangée à 3 panneaux (Mes rubriques · Top 3 dépenses · Fin de mois),
   colonne de rubriques légèrement plus large — empilée en mobile.
   Non fournie dans le thème d'origine — ajoutée en Partie 3. */
.ft-row-3 { display: grid; grid-template-columns: 1fr; gap: var(--ft-s4); align-items: start; }
@media (min-width: 900px) { .ft-row-3 { grid-template-columns: 1.15fr 1fr 1fr; gap: var(--ft-s5); } }

/* Rangée à 2 panneaux inégaux (Objectifs · Transferts) — écran Épargne.
   Non fournie dans le thème d'origine — ajoutée en Partie 3. */
.ft-row-2-wide { display: grid; grid-template-columns: 1fr; gap: var(--ft-s4); align-items: start; }
@media (min-width: 900px) { .ft-row-2-wide { grid-template-columns: 1.6fr 1fr; gap: var(--ft-s5); } }

/* ============ Bouton flottant « Donner mon avis » =========================
   Non fourni dans le thème d'origine (Partie 1) — ajouté ici, à partir des
   seuls tokens --ft-*, pour la Partie 2. La forme exacte (icône, position
   dans la modale) sera confirmée à la Partie 3 (écran Feedback) ; le socle
   ci-dessous (couleur, cible tactile, ombre, focus) ne devrait pas changer. */
.ft-fab {
  position: fixed; right: var(--ft-s4); bottom: var(--ft-s4); z-index: 40;
  display: inline-flex; align-items: center; gap: var(--ft-s2);
  min-height: var(--ft-tap); padding: 0 var(--ft-s4);
  background: var(--ft-teal); color: #fff; text-decoration: none;
  font-family: var(--ft-font); font-weight: 700; font-size: var(--ft-fs-small);
  border-radius: var(--ft-radius-pill); border: 0; box-shadow: var(--ft-shadow);
  cursor: pointer;
}
.ft-fab:hover { background: var(--ft-teal-d); }
.ft-fab:focus-visible { outline: 3px solid var(--ft-ink); outline-offset: 2px; }
@media (max-width: 560px) { .ft-fab { right: var(--ft-s3); bottom: var(--ft-s3); } }
@media print { .ft-fab { display: none !important; } }

/* ===================== Écran Dashboard (Partie 3) =========================
   Non fourni dans le thème d'origine — ajouté pour composer le premier
   écran. Barre supérieure desktop / en-tête mobile, navigation de mois,
   compte, en-têtes de panneau, variantes de bandeau supplémentaires pour
   les alertes (distinctes des bandeaux hors-ligne/synchro déjà fournis). */

.ft-topbar { display: none; }
@media (min-width: 900px) {
  .ft-topbar { display: flex; align-items: center; gap: var(--ft-s4); flex-wrap: wrap;
               padding: var(--ft-s4) var(--ft-s5); border-bottom: 1px solid var(--ft-line);
               background: #fff; }
}
.ft-topbar__title { font-size: var(--ft-fs-h1); font-weight: 800; color: var(--ft-ink); margin: 0 var(--ft-s4) 0 0; }
.ft-topbar__actions { display: flex; align-items: center; gap: var(--ft-s2); margin-left: auto; }

.ft-mobile-header { padding: var(--ft-s4) var(--ft-s4) 0; }
.ft-mobile-header__greeting { color: var(--ft-muted); font-size: var(--ft-fs-small); font-weight: 600; margin: 0; }
.ft-mobile-header__title { font-size: var(--ft-fs-display); font-weight: 800; color: var(--ft-ink); margin: 2px 0 var(--ft-s3); }
@media (min-width: 900px) { .ft-mobile-header { display: none; } }

/* Contenu réservé au desktop (≥900px) — ex. période dans l'étiquette KPI,
   3e indicateur « Épargne du mois », plus compacts sur mobile (maquette). */
.ft-desktop-inline, .ft-desktop-block { display: none; }
@media (min-width: 900px) {
  .ft-desktop-inline { display: inline; }
  .ft-desktop-block { display: block; }
}

/* Inverse : contenu réservé au mobile (< 900px) — ex. une info déjà reprise
   ailleurs dans l'en-tête desktop, pour ne jamais la répéter deux fois. */
.ft-mobile-inline, .ft-mobile-block { display: inline; }
.ft-mobile-block { display: block; }
@media (min-width: 900px) { .ft-mobile-inline, .ft-mobile-block { display: none; } }

.ft-month-nav { display: flex; align-items: center; gap: var(--ft-s2); }
.ft-month-nav__label { font-weight: 700; color: var(--ft-ink); min-width: 9em; text-align: center; }
.ft-month-nav__btn { display: inline-flex; align-items: center; justify-content: center;
                      width: var(--ft-tap); height: var(--ft-tap); border-radius: var(--ft-radius-sm);
                      border: 1px solid var(--ft-line); background: #fff; color: var(--ft-ink);
                      text-decoration: none; flex-shrink: 0; }
.ft-month-nav__btn:hover { border-color: var(--ft-ink); }

/* Bloc montant par devise avec filet gauche coloré — réutilisé pour les
   rubriques (Partie 3) et la prévision de fin de mois. La couleur ne porte
   ici que l'identité de devise, jamais un état. */
.ft-currency-block { border-left: 3px solid; padding-left: 12px; }
.ft-currency-block--usd { border-left-color: var(--ft-usd); }
.ft-currency-block--usd .ft-currency-block__label { color: var(--ft-usd); }
.ft-currency-block--fc { border-left-color: var(--ft-fc); }
.ft-currency-block--fc .ft-currency-block__label { color: var(--ft-fc); }
.ft-currency-block__label { font-size: var(--ft-fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ft-currency-block__amount { font-size: var(--ft-fs-h3); font-weight: 700; font-variant-numeric: tabular-nums; }

.ft-avatar { display: inline-flex; align-items: center; gap: var(--ft-s2); text-decoration: none;
             color: var(--ft-ink); padding-left: var(--ft-s3); border-left: 1px solid var(--ft-line); }
.ft-avatar__mark { display: inline-flex; align-items: center; justify-content: center;
                    width: 34px; height: 34px; border-radius: 50%; background: var(--ft-usd-tint);
                    color: var(--ft-teal-d); font-weight: 800; font-size: var(--ft-fs-caption); flex-shrink: 0; }
.ft-avatar__name { font-size: var(--ft-fs-small); font-weight: 700; }
@media (max-width: 899px) { .ft-avatar__name { display: none; } }

/* Menu avatar (Compte / Se déconnecter) — components/ft_account_menu.html.
   Le déclencheur reprend le rendu de .ft-avatar mais en <button>, cibles
   >= 44px pour le menu déroulant piloté en JS vanilla (voir son script). */
.ft-account-menu { position: relative; display: inline-flex; }
.ft-account-menu__trigger { display: inline-flex; align-items: center; gap: var(--ft-s2);
             background: none; border: 0; cursor: pointer; font: inherit; min-height: var(--ft-tap);
             color: var(--ft-ink); padding-left: var(--ft-s3); border-left: 1px solid var(--ft-line); }
.ft-account-menu__trigger:hover .ft-avatar__mark { background: var(--ft-teal-ice); }
.ft-account-menu__dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
             min-width: 200px; background: #fff; border: 1px solid var(--ft-line);
             border-radius: var(--ft-radius-sm); box-shadow: var(--shadow, 0 8px 28px rgba(16, 35, 42, 0.12));
             padding: 6px; display: flex; flex-direction: column; gap: 2px; }
/* [hidden] doit rester prioritaire sur display:flex, sinon le menu (comme le
   bandeau hors ligne, même cause) reste visible en permanence malgré
   dropdown.hidden = true côté JS. */
.ft-account-menu__dropdown[hidden] { display: none !important; }
.ft-account-menu__item { display: flex; align-items: center; min-height: var(--ft-tap); width: 100%;
             padding: 0 12px; border-radius: var(--ft-radius-sm); border: 0; background: none;
             font: 600 14px/1 Inter; color: var(--ft-ink); text-decoration: none; cursor: pointer; text-align: left; }
.ft-account-menu__item:hover, .ft-account-menu__item:focus-visible { background: var(--ft-paper); }
.ft-account-menu__item--danger { color: var(--ft-danger); }
.ft-account-menu__logout-form { margin: 0; }

/* Menu déroulant générique (ex. « Exporter » sur l'écran Rapports) — même
   patron que .ft-account-menu ci-dessus : le déclencheur reprend le rendu
   d'un bouton normal (.ft-btn), seul le panneau est spécifique. [hidden]
   doit rester prioritaire sur tout display défini par ailleurs. */
.ft-menu { position: relative; display: inline-flex; }
.ft-menu__dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
             min-width: 220px; background: #fff; border: 1px solid var(--ft-line);
             border-radius: var(--ft-radius-sm); box-shadow: var(--shadow, 0 8px 28px rgba(16, 35, 42, 0.12));
             padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ft-menu__dropdown[hidden] { display: none !important; }
.ft-menu__item { display: flex; align-items: center; min-height: var(--ft-tap); width: 100%;
             padding: 0 12px; border-radius: var(--ft-radius-sm); border: 0; background: none;
             font: 600 14px/1 Inter; color: var(--ft-ink); text-decoration: none; cursor: pointer; text-align: left; }
.ft-menu__item:hover, .ft-menu__item:focus-visible { background: var(--ft-paper); }

.ft-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ft-s2); margin-bottom: var(--ft-s3); }
.ft-panel-head h3 { margin: 0; font-size: var(--ft-fs-h3); color: var(--ft-ink); }
.ft-panel-head a { font-size: var(--ft-fs-small); font-weight: 700; color: var(--ft-teal); text-decoration: none; }

.ft-panel-group + .ft-panel-group { margin-top: var(--ft-s4); padding-top: var(--ft-s4); border-top: 1px solid var(--ft-line); }
.ft-panel-group__title { font-size: var(--ft-fs-caption); font-weight: 800; color: var(--ft-muted);
                          text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--ft-s2); }

/* Bandeaux d'alerte génériques (revenus prévus non reçus, budget ≥80 %/dépassé,
   rubriques > 100 %) — distincts des bandeaux hors-ligne/synchro ci-dessus,
   même logique de rôle de couleur : jamais sur l'accent de devise. */
.ft-banner--info   { background: var(--ft-info-tint);   color: #1d4f9e; }
.ft-banner--warn   { background: var(--ft-amber-tint);  color: var(--ft-amber); }
.ft-banner--danger { background: var(--ft-danger-tint); color: var(--ft-danger); }

/* Le bandeau hors-ligne est injecté en haut du contenu par page (Partie 3) :
   pleine largeur, pas de coins arrondis, pour se distinguer des bandeaux
   d'alerte métier ci-dessus qui restent, eux, dans le flux des cartes. */
.ft-banner--page { border-radius: 0; justify-content: center; }

/* Correction : le bouton flottant « Donner mon avis » (base.html, toutes les
   pages) chevauchait la tabbar mobile fixe (non prévu dans le thème
   d'origine — .ft-fab n'avait pas de dégagement pour la barre du bas). */
@media (max-width: 899px) {
  .ft-fab { bottom: calc(60px + var(--ft-s3)); }
}

/* ===================== Carte générique sans marge intérieure =============
   Variante de .ft-card pour les listes (le padding vit sur chaque ligne,
   pas sur la carte, pour que les séparateurs touchent les bords). */
.ft-card--flush { padding: 0; overflow: hidden; }

/* ===================== Écran Revenus (Partie 3) ===========================
   Non fourni dans le thème d'origine — ajouté pour composer l'écran Revenus
   à partir des seuls tokens --ft-* et des composants déjà en place
   (.ft-card, .ft-chip, .ft-badge, .ft-kpi, .ft-fab, .ft-skeleton). */

/* Barre d'outils : puces de filtre (statut, devise) + recherche */
.ft-toolbar { display: flex; align-items: center; gap: var(--ft-s2); flex-wrap: wrap; margin: var(--ft-s4) 0; }
.ft-toolbar__sep { display: none; width: 1px; height: 28px; background: var(--ft-line); margin: 0 4px; }
@media (min-width: 900px) { .ft-toolbar__sep { display: block; } }

/* Puces/formulaire réservés au desktop (filtre devise, recherche) — la
   maquette mobile ne les affiche pas (espace réduit). .ft-desktop-inline
   (display:inline) casserait leur mise en page flex : utilitaire dédié. */
.ft-desktop-chip { display: none; }
@media (min-width: 900px) { .ft-desktop-chip { display: inline-flex; } }

.ft-search { display: flex; align-items: center; gap: var(--ft-s2); min-height: var(--ft-tap);
             padding: 0 14px; background: #fff; border: 1px solid var(--ft-line);
             border-radius: var(--ft-radius-sm); color: var(--ft-muted); flex: 1 1 220px; min-width: 0; }
.ft-search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ft-ink);
                    flex: 1; min-width: 0; }
.ft-search input::placeholder { color: var(--ft-muted); }
@media (min-width: 900px) { .ft-search { max-width: 260px; margin-left: auto; flex: 0 0 auto; } }

/* Regroupement de lignes (Reçus / Prévus) */
.ft-list-group + .ft-list-group { margin-top: var(--ft-s5); }
.ft-list-group__label { font-size: var(--ft-fs-caption); font-weight: 700; letter-spacing: .08em;
                         color: var(--ft-muted); text-transform: uppercase; margin: 0 0 var(--ft-s2); }

.ft-list-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ft-s3);
               min-height: var(--ft-tap); padding: var(--ft-s3) var(--ft-s4); border-bottom: 1px solid var(--ft-line); }
.ft-list-row:last-child { border-bottom: 0; }
.ft-list-row__main { min-width: 0; }
.ft-list-row__title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.ft-list-row__meta { font-size: var(--ft-fs-caption); color: var(--ft-muted); margin-top: 2px; }
.ft-list-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ft-list-row__amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-list-row__amount.is-future { color: var(--ft-muted); }
.ft-list-row__link { width: var(--ft-tap); height: var(--ft-tap); display: flex; align-items: center;
                      justify-content: center; color: var(--ft-muted); text-decoration: none; flex-shrink: 0;
                      border-radius: var(--ft-radius-sm); }
.ft-list-row__link:hover { color: var(--ft-ink); background: var(--ft-paper); }
.ft-badge--muted { background: var(--ft-paper); border: 1px solid var(--ft-line); color: var(--ft-muted); }
.ft-badge--category { background: var(--ft-paper); border: 1px solid var(--ft-line); color: var(--ft-ink); }

/* Bouton flottant secondaire (Ajouter), au-dessus du bouton « Donner mon
   avis » sur mobile ; masqué en desktop (le bouton du bandeau suffit). */
.ft-fab--add { bottom: calc(60px + var(--ft-s3) + var(--ft-tap) + var(--ft-s2)); }
@media (min-width: 900px) { .ft-fab--add { display: none; } }

/* Indicateur de chargement en ligne (icône « spinner ») */
.ft-spinner { width: 14px; height: 14px; border: 2px solid var(--ft-line); border-top-color: var(--ft-muted);
              border-radius: 999px; display: inline-block; flex-shrink: 0; animation: ft-spin .7s linear infinite; }
@keyframes ft-spin { to { transform: rotate(360deg); } }

/* État d'erreur pleine page (données indisponibles) */
.ft-error-state { text-align: center; padding: var(--ft-s6) var(--ft-s4); }
.ft-error-state__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--ft-danger-tint);
                         color: var(--ft-danger); display: flex; align-items: center; justify-content: center;
                         margin: 0 auto var(--ft-s3); }
.ft-error-state__title { font-weight: 700; font-size: var(--ft-fs-h3); margin-bottom: 6px; }
.ft-error-state__text { color: var(--ft-muted); font-size: var(--ft-fs-small); max-width: 340px; margin: 0 auto var(--ft-s4); }
.ft-error-state__actions { display: flex; flex-direction: column; gap: var(--ft-s2); max-width: 280px; margin: 0 auto; }

/* --------------------------- Formulaire de saisie ------------------------
   Champ « montant » héros (chiffre large + symbole de devise) et sélecteur
   de statut (Reçu/Prévu), utilisés par le formulaire Revenus/Dépenses. */
.ft-amount-field { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 var(--ft-s4);
                    background: #fff; border: 1.5px solid var(--ft-line); border-radius: var(--ft-radius-sm); }
.ft-amount-field:focus-within { border-color: var(--ft-teal); }
.ft-amount-field__symbol { font-weight: 700; font-size: 20px; color: var(--ft-muted); flex-shrink: 0; }
.ft-amount-field__input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
                           font-family: var(--ft-font); font-weight: 800; font-size: 26px;
                           font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ft-ink); }

.ft-status-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
                 min-height: var(--ft-tap); border: 1.5px solid var(--ft-line); border-radius: var(--ft-radius-sm);
                 font-weight: 700; font-size: var(--ft-fs-body); color: var(--ft-muted); cursor: pointer; }
.ft-status-opt__radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.ft-status-opt__dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.ft-status-opt:has(.ft-status-opt__radio:checked) { border-color: var(--ft-ink); color: var(--ft-ink); }
.ft-status-opt:has(.ft-status-opt__radio:focus-visible) { outline: 2px solid var(--ft-ink); outline-offset: 2px; }

.ft-checkbox-row { display: flex; align-items: center; gap: var(--ft-s3); min-height: var(--ft-tap);
                    padding: 4px var(--ft-s4); background: #fff; border: 1px solid var(--ft-line);
                    border-radius: var(--ft-radius-sm); }
.ft-checkbox-row input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--ft-ink); }
.ft-checkbox-row__title { font-weight: 600; font-size: var(--ft-fs-small); }
.ft-checkbox-row__hint { font-size: var(--ft-fs-caption); color: var(--ft-muted); }

.ft-form-shell { background: #fff; }
@media (min-width: 900px) {
  .ft-form-shell { max-width: 480px; margin: var(--ft-s5) auto 0; border: 1px solid var(--ft-line);
                    border-radius: var(--ft-radius); overflow: hidden; box-shadow: var(--ft-shadow); }
}
.ft-form-header { display: flex; align-items: center; gap: var(--ft-s3); padding: var(--ft-s4);
                   background: #fff; border-bottom: 1px solid var(--ft-line); }
.ft-form-header__close { width: var(--ft-tap); height: var(--ft-tap); display: flex; align-items: center;
                          justify-content: center; border: 1px solid var(--ft-line); border-radius: var(--ft-radius-sm);
                          background: #fff; color: var(--ft-ink); text-decoration: none; flex-shrink: 0; }
.ft-form-header__title { font-weight: 800; font-size: var(--ft-fs-h2); }
.ft-form-body { padding: var(--ft-s4); display: flex; flex-direction: column; gap: var(--ft-s4); }
.ft-form-footer { padding: var(--ft-s4); border-top: 1px solid var(--ft-line);
                   display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--ft-s2); }

/* Liste déroulante stylée comme .ft-input, avec chevron superposé (ex.
   choix d'objectif dans le formulaire de transfert général). */
.ft-select-wrap { position: relative; }
.ft-select { width: 100%; min-height: var(--ft-tap); padding: 0 40px 0 12px;
             border: 1.5px solid var(--ft-line); border-radius: var(--ft-radius-sm);
             font-family: var(--ft-font); font-size: var(--ft-fs-body); background: #fff;
             color: var(--ft-ink); appearance: none; -webkit-appearance: none; }
.ft-select:focus { outline: none; border-color: var(--ft-teal); }
.ft-select-wrap .ft-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
                            color: var(--ft-muted); pointer-events: none; }

/* ===================== Écran Épargne / Objectifs (Partie 3) ===============
   Non fourni dans le thème d'origine — ajouté pour composer l'écran Épargne
   à partir des seuls tokens --ft-* et des composants déjà en place
   (.ft-card, .ft-kpi, .ft-progress, .ft-chip, .ft-badge, .ft-status-opt). */

.ft-goal-card { background: #fff; border: 1px solid var(--ft-line); border-top: 3px solid var(--ft-line);
                border-radius: var(--ft-radius); padding: var(--ft-s4); }
.ft-goal-card--usd { border-top-color: var(--ft-usd); }
.ft-goal-card--fc  { border-top-color: var(--ft-fc); }
.ft-goal-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ft-s3); }
.ft-goal-card__name { font-weight: 700; font-size: var(--ft-fs-h3); }
.ft-goal-card__due { font-size: var(--ft-fs-caption); color: var(--ft-muted); margin-top: 2px; }
.ft-goal-card__amounts { display: flex; align-items: baseline; gap: 8px; margin: var(--ft-s3) 0 10px; }
.ft-goal-card__saved { font-size: var(--ft-fs-amount); font-weight: 800; color: var(--ft-ink); font-variant-numeric: tabular-nums; }
.ft-goal-card__target { font-size: var(--ft-fs-small); color: var(--ft-muted); font-variant-numeric: tabular-nums; }
.ft-goal-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ft-s3); margin-top: 10px; }
.ft-goal-card__pct { font-weight: 700; font-size: var(--ft-fs-small); font-variant-numeric: tabular-nums; }
.ft-goal-card__actions { display: flex; gap: 8px; margin-top: var(--ft-s4); }
.ft-goal-card__contribute { margin-top: var(--ft-s4); padding-top: var(--ft-s4); border-top: 1px solid var(--ft-line);
                             display: flex; flex-direction: column; gap: var(--ft-s3); }

/* Bandeau de projection (estimation linéaire d'atteinte d'objectif) — couleur
   « info », jamais l'accent de devise ni un état ambre/rouge (un objectif
   n'est jamais en alerte). */
.ft-projection-note { display: flex; align-items: center; gap: 8px; margin-top: var(--ft-s3);
                       padding: 10px 12px; background: var(--ft-info-tint); border-radius: var(--ft-radius-sm);
                       font-size: var(--ft-fs-caption); color: var(--ft-muted); }

/* Devise fixée par l'objectif (formulaire de transfert) : affichage seul,
   jamais modifiable — la teinte porte l'identité de devise, jamais un état. */
.ft-fixed-currency { display: flex; align-items: center; gap: 10px; min-height: var(--ft-tap);
                      padding: 0 var(--ft-s4); border-radius: var(--ft-radius-sm); font-size: var(--ft-fs-small); }
.ft-goal-card--usd .ft-fixed-currency, .ft-fixed-currency--usd { background: var(--ft-usd-tint); color: var(--ft-teal-d); }
.ft-goal-card--fc .ft-fixed-currency, .ft-fixed-currency--fc { background: var(--ft-fc-tint); color: var(--ft-indigo); }

.ft-empty { text-align: center; color: var(--ft-muted); font-size: var(--ft-fs-small); padding: var(--ft-s4) 0; }

/* ===================== Écran Rapports (Partie 3) ==========================
   Non fourni dans le thème d'origine — ajouté pour composer l'écran Rapports
   à partir des seuls tokens --ft-* (.ft-card, .ft-chip, .ft-kpi__tag). La
   couleur de devise porte les barres ; les teintes dégradées (rang 2, 3, 4+)
   viennent d'une opacité sur ce même token, jamais d'une couleur inventée. */

/* Évolution des dépenses par mois — barres verticales */
.ft-bars { display: flex; align-items: flex-end; gap: 14px; }
.ft-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ft-bars__track { width: 100%; height: 116px; display: flex; align-items: flex-end; }
.ft-bars__fill { width: 100%; border-radius: 6px 6px 0 0; background: var(--ft-line); }
.ft-bars__fill--usd { background: var(--ft-usd); }
.ft-bars__fill--fc  { background: var(--ft-fc); }
.ft-bars__col.is-muted .ft-bars__fill--usd,
.ft-bars__col.is-muted .ft-bars__fill--fc { opacity: .45; }
.ft-bars__amount { font-size: var(--ft-fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-bars__col.is-last .ft-bars__amount { font-weight: 700; }
.ft-bars__label { font-size: var(--ft-fs-caption); color: var(--ft-muted); }
.ft-bars__col.is-last .ft-bars__label { font-weight: 600; color: var(--ft-ink); }

/* Mini version (vue annuelle, 12 mois) */
.ft-bars--mini { gap: 4px; }
.ft-bars--mini .ft-bars__track { height: 62px; }
.ft-bars--mini .ft-bars__fill { border-radius: 4px 4px 0 0; }
.ft-bars--mini .ft-bars__label { font-size: 9px; }

/* Répartition par catégorie — lignes label/montant + fine barre */
.ft-category-row + .ft-category-row { margin-top: var(--ft-s3); }
.ft-category-row__head { display: flex; justify-content: space-between; font-size: var(--ft-fs-small); }
.ft-category-row__amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-category-row__track { height: 6px; background: var(--ft-line); border-radius: var(--ft-radius-pill); margin-top: 4px; overflow: hidden; }
.ft-category-row__fill { display: block; height: 100%; border-radius: var(--ft-radius-pill); }
.ft-category-row__fill--usd { background: var(--ft-usd); }
.ft-category-row__fill--fc  { background: var(--ft-fc); }
.ft-cat-rank-2 .ft-category-row__fill { opacity: .8; }
.ft-cat-rank-3 .ft-category-row__fill { opacity: .6; }
.ft-cat-rank-4-plus .ft-category-row__fill { opacity: .4; }

/* Tableau « Revenus contre dépenses » */
.ft-report-table { width: 100%; border-collapse: collapse; }
.ft-report-table th { text-align: right; font-size: var(--ft-fs-caption); font-weight: 600; letter-spacing: .08em;
                       color: var(--ft-muted); text-transform: uppercase; padding: var(--ft-s3) var(--ft-s3); }
.ft-report-table th:first-child, .ft-report-table td:first-child { text-align: left; }
.ft-report-table td { text-align: right; font-size: var(--ft-fs-small); font-variant-numeric: tabular-nums;
                       padding: var(--ft-s3); border-top: 1px solid var(--ft-line); }
.ft-report-table td.is-muted, .ft-report-table td.is-muted span { color: var(--ft-muted); }

/* ===================== Écran Historique (Partie 3) ========================
   Non fourni dans le thème d'origine. Liste de navigation des mois (colonne
   fixe en desktop via .ft-history-layout, liste pleine largeur en mobile) —
   réutilise .ft-badge pour le badge budgétaire et .ft-kpi (via ft_kpi_card)
   pour les soldes du mois ouvert, sans dupliquer ces composants. */
.ft-history-layout { display: flex; flex-direction: column; gap: var(--ft-s4); }
@media (min-width: 900px) {
  .ft-history-layout { flex-direction: row; align-items: flex-start; }
  .ft-history-layout__nav { width: 320px; flex-shrink: 0; }
}
.ft-history-nav__year { padding: var(--ft-s3) var(--ft-s3) var(--ft-s2); font-size: var(--ft-fs-caption);
                         font-weight: 700; letter-spacing: .08em; color: var(--ft-muted); text-transform: uppercase; }
.ft-history-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                        min-height: var(--ft-tap); padding: 12px 14px; border-radius: var(--ft-radius-sm);
                        color: inherit; text-decoration: none; }
.ft-history-nav__row:hover { background: var(--ft-paper); }
.ft-history-nav__row.is-open { background: var(--ft-ink); color: #fff; }
.ft-history-nav__row.is-open .ft-history-nav__meta { color: var(--ft-muted-dark); }
.ft-history-nav__title { font-weight: 600; font-size: var(--ft-fs-small); }
.ft-history-nav__row.is-open .ft-history-nav__title { font-weight: 700; }
.ft-history-nav__meta { font-size: var(--ft-fs-caption); color: var(--ft-muted); margin-top: 2px; }

/* ===================== Écran Onboarding (Partie 3) ========================
   Non fourni dans le thème d'origine. Panneau de marque (desktop, fond
   --ft-ink) + colonne de formulaire (--ft-paper) ; empilé en mobile
   (panneau de marque masqué, remplacé par un en-tête compact). */
.ft-auth-shell { min-height: 100vh; display: flex; background: var(--ft-paper); }
.ft-auth-visual { display: none; width: 480px; flex-shrink: 0; background: var(--ft-ink); color: #fff;
                   padding: 48px; flex-direction: column; }
@media (min-width: 900px) {
  .ft-auth-visual { display: flex; }
}
.ft-auth-visual__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; font: 800 18px/1 Inter; letter-spacing: -0.02em; }
.ft-auth-visual__brand img { height: 26px; }
.ft-auth-visual h1 { margin: 0 0 14px; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; max-width: 380px; }
.ft-auth-visual p { margin: 0 0 32px; color: var(--ft-muted-dark); font-size: 14px; line-height: 1.7; max-width: 380px; }
.ft-auth-visual__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 380px; margin-bottom: 32px; }
.ft-auth-visual__card { background: var(--ft-ink-soft); border-top: 3px solid var(--ft-teal-ice); border-radius: var(--ft-radius); padding: 16px 18px; }
.ft-auth-visual__card--fc { border-top-color: var(--ft-indigo-lt); }
.ft-auth-visual__amount { font: 800 22px/1 Inter; letter-spacing: -0.02em; margin-top: 10px; }
.ft-auth-visual__bullets { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.ft-auth-visual__bullet { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ft-muted-dark); }
.ft-auth-panel { flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--ft-s5) var(--ft-s4); }
.ft-auth-panel__inner { width: 100%; max-width: 420px; }
.ft-auth-panel__brand { display: flex; align-items: center; gap: 9px; margin-bottom: var(--ft-s4); font: 800 20px/1 Inter; color: var(--ft-ink); letter-spacing: -0.02em; }
.ft-auth-panel__brand img { height: 30px; }
.ft-auth-steps { display: flex; align-items: center; gap: 6px; margin-bottom: var(--ft-s3); }
.ft-auth-steps__dot { flex: 1; height: 4px; border-radius: var(--ft-radius-pill); background: var(--ft-line); }
.ft-auth-steps__dot.is-done { background: var(--ft-teal); }
.ft-auth-field { margin-bottom: var(--ft-s4); }
.ft-auth-field__label { display: block; font: 600 12px/1 Inter; color: var(--ft-muted); margin-bottom: 8px; }
.ft-auth-hint { font: 500 11px/1.5 Inter; color: var(--ft-muted); margin-top: 8px; }

/* ===================== Écran Réglages — onglets (7E) ======================
   Barre d'onglets utilisable à toutes les largeurs (mobile : rangée
   horizontale défilable ; desktop : colonne latérale collante). Une seule
   section (.ft-settings-section) reste visible à la fois ; le masquage des
   sections inactives est piloté par JS (classe --hidden), jamais par une
   règle CSS inconditionnelle, pour que tout reste visible sans JS. */
.ft-settings-layout { display: flex; flex-direction: column; gap: var(--ft-s4); }
.ft-settings-layout__nav { display: flex; flex-direction: row; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 900px) {
  .ft-settings-layout { flex-direction: row; align-items: flex-start; }
  .ft-settings-layout__nav { width: 220px; flex-shrink: 0; position: sticky; top: var(--ft-s4); flex-direction: column; gap: 2px; overflow-x: visible; }
  .ft-settings-layout__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ft-s4); }
}
.ft-settings-layout__nav .ft-settings-tab {
  display: inline-flex; align-items: center; min-height: var(--ft-tap);
  padding: 10px 14px; border-radius: var(--ft-radius-sm); font: 500 14px/1 Inter;
  color: var(--ft-muted); background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.ft-settings-layout__nav .ft-settings-tab:hover { background: var(--ft-paper); color: var(--ft-ink); }
.ft-settings-layout__nav .ft-settings-tab.is-active { background: var(--ft-paper); color: var(--ft-ink); font-weight: 700; }
.ft-settings-layout__nav .ft-settings-tab.is-danger { color: var(--ft-danger); }
.ft-settings-layout__nav .ft-settings-tab.is-danger.is-active { background: var(--ft-danger-tint); }
.ft-settings-section--hidden { display: none; }
.ft-rule--error { background: var(--ft-danger-tint); border-radius: var(--ft-radius-sm); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }

/* ===================== Suppression de compte — feuille modale (7D) ========
   Page dédiée (jamais une vraie modale JS, pour rester accessible et
   fonctionnelle sans JavaScript) habillée pour reprendre le rendu
   « feuille du bas + fond estompé » de la maquette. */
.ft-modal-scrim { position: fixed; inset: 0; background: rgba(16, 35, 42, .45);
                   display: flex; align-items: flex-end; justify-content: center;
                   padding: var(--ft-s4); z-index: 50; }
@media (min-width: 900px) { .ft-modal-scrim { align-items: center; } }
.ft-modal-sheet { width: 100%; max-width: 440px; background: var(--ft-surface);
                   border-radius: var(--ft-radius) var(--ft-radius) 0 0; padding: var(--ft-s4);
                   box-shadow: 0 -8px 32px rgba(16, 35, 42, .18); max-height: 90vh; overflow-y: auto; }
@media (min-width: 900px) { .ft-modal-sheet { border-radius: var(--ft-radius); } }
.ft-modal-sheet--wide { max-width: 440px; }
@media (min-width: 900px) { .ft-modal-sheet--wide { max-width: 620px; } }

/* ===================== Écran Feedback (Tour 9) ============================
   Note 1-5 en vraies cases radio (rendu :has(:checked), sans JS pour l'état
   visuel) ; puces de sujet réutilisant .ft-chip. */
.ft-rating { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ft-rating__opt { position: relative; }
.ft-rating__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ft-rating__box { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
                   gap: 3px; background: var(--ft-surface); border: 1px solid #D5DDDD; border-radius: var(--ft-radius-sm);
                   font: 700 17px/1 Inter; font-variant-numeric: tabular-nums; color: var(--ft-ink); cursor: pointer; }
.ft-rating__box span { font: 500 9px/1 Inter; color: var(--ft-muted); }
.ft-rating__opt:has(.ft-rating__input:checked) .ft-rating__box { background: var(--ft-ink); border-color: var(--ft-ink); color: #fff; }
.ft-rating__opt:has(.ft-rating__input:checked) .ft-rating__box span { color: var(--ft-muted-dark); }
.ft-rating__opt:has(.ft-rating__input:focus-visible) .ft-rating__box { outline: 2px solid var(--ft-ink); outline-offset: 2px; }
.ft-feedback-form:not(:has(.ft-rating__input:checked)) .ft-feedback-submit { opacity: .55; pointer-events: none; }