/* ══════════════════════════════════════════════════════════════════════════════
   MIKOUNT — Design System v1
   Inspiration  : fintech mobile (Revolut, N26, Lydia)
   Principe     : minimaliste · 1-2 infos clés par écran · zéro animation
   Mise en valeur des infos clés : taille · poids · couleur · espace blanc
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. RESET + VARIABLES
   ───────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* Couleurs de fond */
  --c-bg:      #F7F8FA;   /* fond de page — gris très clair */
  --c-surface: #FFFFFF;   /* cartes, formulaires */

  /* Typographie */
  --c-ink:   #111827;     /* texte principal */
  --c-ink-2: #6B7280;     /* texte secondaire */
  --c-ink-3: #9CA3AF;     /* labels, placeholders */

  /* Accent */
  --c-accent:       #4F56D3;
  --c-accent-vivid: #3528cf;
  --c-accent-light: #EEEFFE;

  /* Bordures */
  --c-border: #E5E7EB;

  /* Sémantique — vert */
  --c-green:      #059669;
  --c-green-0:    #D1FAE5;
  --c-green-1:    #A7F3D0;
  --c-green-2:    #6EE7B7;
  --c-green-text: #065F46;

  /* Sémantique — rouge */
  --c-red:      #E11D48;
  --c-red-0:    #FFE4E6;
  --c-red-1:    #FCA5A5;
  --c-red-2:    #F87171;
  --c-red-text: #9F1239;

  /* Autres */
  --c-orange: #EA580C;
  --c-yellow: #D97706;
  --c-gray:   #94A3B8;

  /* Espacement */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* Rayon */
  --r-s:  8px;
  --r-m:  12px;
  --r-l:  16px;
  --r-xl: 20px;

  /* Ombres */
  --sh-s: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-m: 0 4px 12px rgba(0,0,0,0.08);

  /* no dark mode */
  color-scheme: light only;
}

html, body {
  height: 100%;
  background: var(--c-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--c-ink);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   2. LAYOUT — SHELL SPA
   ───────────────────────────────────────────────────────────────────────────── */

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to right, #F8F6FD, #FAF8FF);;
  position: relative;
}

.main {
  flex: 1;
  padding: var(--s-4);
  padding-bottom: 96px; /* espace pour le FAB */
  overflow-y: auto;
}

/* Écran 4 : pas de padding horizontal sur main pour que la jauge soit centrée */
.main-s4 {
  padding-left: 0;
  padding-right: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. HEADER
   ───────────────────────────────────────────────────────────────────────────── */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  height: 56px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 50;
  /* Safe area iOS */
  padding-top: env(safe-area-inset-top);
}

.header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
  flex: 1;
  text-align: center;
}

.header-spacer {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-s);
  color: var(--c-ink-2);
  flex-shrink: 0;
}

.btn-back:active { background: var(--c-bg); }

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-s);
  color: var(--c-gray);
  flex-shrink: 0;
}

.btn-icon:active { background: var(--c-bg); }

/* ─────────────────────────────────────────────────────────────────────────────
   4. TYPOGRAPHIE
   ───────────────────────────────────────────────────────────────────────────── */

/* Tous les montants financiers : chiffres tabulaires pour l'alignement */
.budget-amount,
.depenses-total,
.dep-montant {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.text-red   { color: var(--c-red); }

/* ─────────────────────────────────────────────────────────────────────────────
   5. COMPOSANTS PARTAGÉS
   ───────────────────────────────────────────────────────────────────────────── */

/* Bouton primaire */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--c-accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-m);
  padding: 14px var(--s-4);
  border: none;
}

.btn-primary:active { opacity: 0.88; }
.btn-full { width: 100%; }

/* Badge / pill */
.period-badge {
  display: inline-block;
  background: var(--c-accent-light);
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-full, 100px);
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Tag récurrente */
.tag-recurrente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-light);
  color: var(--c-accent);
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: var(--s-1);
}

/* État vide */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  text-align: center;
  gap: var(--s-3);
  min-height: 300px;
}

.empty-emoji { font-size: 48px; }
.empty-title { font-size: 18px; font-weight: 600; color: var(--c-ink); }
.empty-sub   { font-size: 14px; color: var(--c-ink-3); max-width: 260px; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. FAB — Bouton action flottant (partagé S1 et S4)
   ───────────────────────────────────────────────────────────────────────────── */

.fab {
  position: fixed;
  /* Toujours au-dessus de la navbar (60px) + gap confortable */
  bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(79, 86, 211, 0.45);
  z-index: 100;
  cursor: pointer;
  transition: opacity .15s;
}

.fab:active { opacity: 0.88; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. SPLASH SCREEN
   ───────────────────────────────────────────────────────────────────────────── */

.splash {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: var(--c-surface);
}

.splash-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. ÉCRAN 1 — MES PLANS
   ───────────────────────────────────────────────────────────────────────────── */

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Card de plan */
.plan-card {
  background: var(--c-surface);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  cursor: pointer;
}

.plan-card:active { opacity: 0.96; }

/* En-tête de la card */
.plan-card-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.2;
}

.plan-card-period {
  font-size: 12px;
  color: var(--c-ink-3);
}

.progress-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 2px;
  max-width: 100%;
}

/* Bloc budget — deux colonnes */
.plan-card-budget {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.budget-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.budget-col-right { align-items: flex-start; }

.budget-divider {
  width: 1px;
  background: var(--c-border);
  align-self: stretch;
}

.budget-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-ink-3);
}

/* INFO CLÉ S1 : Budget/jour recalculé — chiffre héros de la card */
.budget-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.1;
}

.budget-amount .per-day {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-3);
}

/* S3 — Budget restant global */
.budget-amount-global {
  font-size: 28px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* S3 — Box autour du budget du jour */
.budget-jour-box {
  display: inline-flex;
  align-items: center;
  background: var(--c-accent-light);
  border-radius: var(--r-m);
  padding: 4px 10px;
  margin: 4px 0;
}

/* S3 — Montant budget du jour (mis en avant) */
.budget-amount-jour {
  font-size: 32px;
  font-weight: 800;
  color: var(--c-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.budget-amount-jour .per-day {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent);
}

.budget-sub {
  font-size: 12px;
  color: var(--c-ink-3);
}

.status-ok   { color: var(--c-green); }
.status-warn { color: var(--c-red); }

/* ─────────────────────────────────────────────────────────────────────────────
   9. ÉCRAN 2 — AJOUTER UNE DÉPENSE
   ───────────────────────────────────────────────────────────────────────────── */

/* Grille de catégories */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}

.cat-chip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px var(--s-3);
  border-radius: var(--r-m);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink-2);
  cursor: pointer;
  text-align: left;
}

/* INFO CLÉ S2 : catégorie sélectionnée — accent fort */
.cat-chip-active {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
  color: var(--c-accent);
  font-weight: 600;
}

.cat-chip:active { opacity: 0.85; }
.cat-emoji { font-size: 18px; line-height: 1; }
.cat-label { font-size: 13px; }

/* Hint sous un champ */
.form-hint {
  font-size: 12px;
  color: var(--c-ink-3);
  margin-top: var(--s-2);
  line-height: 1.5;
}

/* ── Section dépense spéciale ─────────────────────────────────────────────── */

.impact-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--c-accent-light);
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
  text-align: center;
  line-height: 1.5;
  width: 100%;
  justify-content: center;
}

.impact-badge.is-empty {
  background: var(--c-bg);
  color: var(--c-ink-3);
  font-weight: 400;
}

/* Tag ★ dépense spéciale (dans les lignes de dépense) */
.tag-speciale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FEF3C7;
  color: #D97706;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: var(--s-1);
}

/* Sélecteur jour de la semaine (récurrence hebdomadaire) */
.jour-semaine-row {
  display: flex;
  gap: 6px;
}

.jour-chip {
  flex: 1;
  padding: 10px 4px;
  border-radius: var(--r-s);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-3);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  text-align: center;
}

.jour-chip-active {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.jour-chip:active { opacity: 0.8; }

/* ─────────────────────────────────────────────────────────────────────────────
   10. ÉCRAN 3 — DÉTAIL DU PLAN
   ───────────────────────────────────────────────────────────────────────────── */

/* Card synthèse globale en haut */
.plan-header-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-s);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  border: 2px dashed var(--c-accent);
}

.plan-meta {
  font-size: 12px;
  color: var(--c-ink-3);
  margin-bottom: var(--s-3);
  display: flex;
  flex-direction: row;
  gap: var(--s-1);
  justify-content: flex-start;
  align-items: center;
}

.plan-budget-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
}

/* ── S3 : en-tête du plan — s'adapte à TOUTES les largeurs ────────────────────────────────
 * Causes du défaut (« $ » à la ligne, dès ~375px) :
 *   1. montants à 28px / 32px FIXES et sans nowrap : l'espace avant « $ » est un point de coupure ;
 *   2. deux colonnes qui ne peuvent pas rétrécir (min-width: auto) et un gap fixe de 24px.
 * Correction (même logique que la carte haplat) : la carte d'en-tête est un conteneur ; tailles et
 * espacements sont en cqw (% de SA largeur), PLAFONNÉS aux tailles d'origine.
 * --em-g / --em-j (posés par S3 via largeurEm) = largeur estimée de chaque montant, en em : la taille est la
 * plus grande qui tient dans la colonne. Sans eux, valeurs par défaut sûres pour un montant de 10 caractères.
 * Hiérarchie garantie : le budget du jour (32px max) reste toujours plus grand que le restant (28px max).
 * Tout est scopé sous .plan-header-card (S3 uniquement).
 */
.plan-header-card {
  container-type: inline-size;
  --gap-b: clamp(10px, 7.8cqw, 24px);                          /* espace entre colonnes (24px d'origine) */
  --col-b: calc((100cqw - 2 * var(--gap-b) - 1px) / 2);        /* largeur d'une colonne : 2 gaps + séparateur */
}
.plan-header-card .plan-meta            { font-size: clamp(9.5px, 3.9cqw, 12px); white-space: nowrap; flex-wrap: wrap; row-gap: 4px; }
.plan-header-card .plan-budget-row {
  gap: var(--gap-b);
  /* Budget du jour : la plus grande taille qui tient dans sa colonne (32px max). --em-j / --em-g sont posés
   * sur cette ligne par S3 (largeur estimée de chaque montant, en em) ; valeurs par défaut sûres sans JS. */
  --f-jour: min(32px, max(11px, calc(var(--col-b) / var(--em-j, 3.9))));
}
.plan-header-card .budget-col           { min-width: 0; }
.plan-header-card .budget-label         { font-size: clamp(7.5px, 3.55cqw, 11px); white-space: nowrap; }
.plan-header-card .budget-amount-jour   { font-size: var(--f-jour); white-space: nowrap; }
.plan-header-card .budget-amount-global {
  /* Restant : 28px max et jamais plus de 87,5 % (= 28/32) du budget du jour → le budget du jour, mis en avant,
   * reste TOUJOURS le plus grand, même quand il doit rétrécir (montant long, solde négatif…). */
  font-size: min(28px, max(10px, calc(var(--col-b) / var(--em-g, 5))), calc(var(--f-jour) * 0.875));
  white-space: nowrap;
}
.plan-header-card .budget-sub           { font-size: clamp(9.5px, 3.9cqw, 12px); white-space: nowrap; }

/* Filtres mois — scroll horizontal */
.filtre-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--s-4));
  padding: 0 var(--s-4);
  scrollbar-width: none;
}

.filtre-scroll::-webkit-scrollbar { display: none; }

.filtre-tabs {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  white-space: nowrap;
}

.filtre-tab {
  padding: 6px 14px;
  border-radius: var(--r-full, 100px);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  white-space: nowrap;
}

.filtre-tab-active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  font-weight: 700;
  /* Double bordure : fond blanc entre le pill et le ring extérieur */
  box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent);
}

/* Grille de mini-cards — encadrée dans une card blanche */
.grille-section {
  margin-top: var(--s-4);
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: clamp(12px, 4.4vw, var(--s-4));   /* 16px dès 364px de large, un peu moins en dessous */
}

.grille-titre {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-3);
  margin-bottom: var(--s-3);
}

/* Cause du débordement : « 1fr » = minmax(auto, 1fr) → une colonne ne descendait jamais sous la largeur
 * minimale de sa case (40px, imposée par min-height + aspect-ratio). minmax(0, 1fr) laisse les colonnes
 * rétrécir : les cases restent carrées et tiennent toujours dans leur carte. */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: clamp(3px, 1.6vw, 6px);
}

.mini-grid-mois {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Mini-card individuelle — bords plus arrondis */
.mini-card {
  aspect-ratio: 1;
  border-radius: var(--r-m);   /* ← plus arrondi qu'avant (r-s) */
  border: none;
  font-size: clamp(12px, 3.9vw, 14px);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  /* plus de min-height: 40px : combiné à aspect-ratio il forçait une largeur de 40px et faisait sortir la grille */
}

.mini-card:active { opacity: 0.8; }

/* Statuts */
.mini-card-futur  { background: #F1F5F9; color: var(--c-gray); }
.mini-card-neutre { background: #F1F5F9; color: var(--c-ink-3); }

/* Vert — 3 niveaux d'intensité, avec un halo « néon » qui croît avec l'intensité (0 : aucun)
   Le z-index fait passer le halo AU-DESSUS des cartes voisines : sans lui, un box-shadow est peint sous les cartes
   suivantes dans le DOM et disparaît à droite et en dessous. */
.mini-card-positif.intensity-0 { background: var(--c-green-0); color: var(--c-green-text); }
.mini-card-positif.intensity-1 { background: var(--c-green-1); color: var(--c-green-text);
                                 position: relative; z-index: 1; box-shadow: 0 0 8px rgba(46, 240, 160, 0.4); }
.mini-card-positif.intensity-2 { background: var(--c-green-2); color: var(--c-green-text);
                                 position: relative; z-index: 2; box-shadow: 0 0 8px rgba(46, 240, 160, 0.75); }

/* Rouge — 3 niveaux d'intensité */
.mini-card-negatif.intensity-0 { background: var(--c-red-0); color: var(--c-red-text); }
.mini-card-negatif.intensity-1 { background: var(--c-red-1); color: var(--c-red-text); }
.mini-card-negatif.intensity-2 { background: var(--c-red-2); color: var(--c-red-text); }

/* Jour actuel : ring double accent (même pattern que le filtre actif) */
.mini-card-actuel {
  background: var(--c-surface);
  color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent);
}

/* ─── PROGRESS BAR — plan-header-card ────────────────────────────────────── */

.s3-progress-wrap {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}

.s3-progress-labels {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 6px;
}

.s3-progress-pct {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-ink-2);
}

.s3-progress-track {
  height: 12px;
  background: var(--c-bg);
  border-radius: 100px;
  overflow: hidden;
}

.s3-progress-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 100px;
  transition: width 0.5s ease;
}

/* ─── CHIFFRES CLÉS — card blanche ───────────────────────────────────────── */

.chiffres-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: var(--s-4);
  margin-top: var(--s-6);
}

.rythme-icon { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. ÉCRAN 4 — DÉTAIL DU JOUR
   ───────────────────────────────────────────────────────────────────────────── */

.s4-position {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-ink-3);
}

/* Section jauge — cœur de l'écran 4 */
.gauge-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.gauge-wrapper {
  width: min(72vw, 260px);
  aspect-ratio: 1;
}

.gauge-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Textes SVG de la jauge */
.gauge-label {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  fill: var(--c-ink-3);
}

/* INFO CLÉ S4 : solde restant — le chiffre central est le héros absolu */
.gauge-amount {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* font-size défini inline dans gaugeHTML() pour s'adapter à la longueur */
}

.gauge-sub {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 12px;
  fill: var(--c-ink-3);
}

/* Indicateur critique : pct > 110% — pas d'animation, distinction visuelle */
.gauge-pulse .gauge-wrapper {
  background: var(--c-red-0);
  border-radius: 50%;
}

.gauge-context {
  margin-top: var(--s-2);
  font-size: 13px;
  color: var(--c-ink-3);
}

/* Section dépenses du jour */
.depenses-section {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.depenses-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.depenses-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-ink-3);
}

.depenses-total {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
}

/* Filtre catégories — scroll horizontal */
.cat-filtre-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--s-4));
  padding: 0 var(--s-4);
  scrollbar-width: none;
}

.cat-filtre-scroll::-webkit-scrollbar { display: none; }

.cat-filtre-row {
  display: flex;
  gap: var(--s-2);
  padding-bottom: 2px;
  white-space: nowrap;
}

.cat-filtre-btn {
  padding: 6px 12px;
  border-radius: var(--r-full, 100px);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  white-space: nowrap;
}

.cat-filtre-btn:active { opacity: 0.8; }

.cat-filtre-active {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
  font-weight: 600;
}

/* Liste des dépenses */
.depenses-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--c-border);
  border-radius: var(--r-m);
  overflow: hidden;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to right, #F8F6FD, #FAF8FF);
}

/* Ligne individuelle de dépense */
.depense-ligne {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  cursor: pointer;
  min-height: 52px;
}

.depense-ligne:active { background: var(--c-bg); }

.dep-emoji {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.dep-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

.dep-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dep-montant {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-delete-dep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-s);
  color: var(--c-ink-3);
  flex-shrink: 0;
}

.btn-delete-dep:active { background: var(--c-red-0); color: var(--c-red); }

.depenses-filtre-vide {
  font-size: 14px;
  color: var(--c-ink-3);
  text-align: center;
  padding: var(--s-5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. FORMULAIRES (S1-form + S2-depense)
   ───────────────────────────────────────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input {
  width: 100%;
  padding: 13px var(--s-4);
  border-radius: var(--r-m);
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  font-size: 16px; /* 16px minimum pour éviter le zoom iOS */
  color: var(--c-ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus {
  border-color: var(--c-accent);
}

/* Message d'erreur formulaire */
.form-error {
  background: var(--c-red-0);
  color: var(--c-red);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. ERREUR SYSTÈME
   ───────────────────────────────────────────────────────────────────────────── */

.error-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--s-8) var(--s-6);
  text-align: center;
  gap: var(--s-4);
  background: var(--c-surface);
}

.error-emoji { font-size: 48px; }
.error-title { font-size: 20px; font-weight: 700; color: var(--c-ink); }
.error-msg   { font-size: 14px; color: var(--c-ink-3); line-height: 1.6; max-width: 300px; }

/* ─────────────────────────────────────────────────────────────────────────────
   14. UTILITAIRES
   ───────────────────────────────────────────────────────────────────────────── */

.hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   15. ÉCRAN LOGIN
   ───────────────────────────────────────────────────────────────────────────── */

.login-screen {
  min-height: 100dvh;
  background: var(--c-bg);
}

.login-main {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-6);
  gap: clamp(32px, 6vh, 52px);
}

.login-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.login-title {
  font-size: clamp(48px, 10vw, 52px);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-accent);
  line-height: 1;
}

.login-slogan {
  font-size: 16px;
  color: var(--c-ink-3);
  font-weight: 400;
  max-width: 280px;
  line-height: 1.65;
  margin: 0 auto;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--c-surface);
  border-radius: 24px;
  box-shadow: var(--sh-m);
  padding: 40px 32px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.input-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-password { padding-right: 48px; }

.btn-toggle-pwd {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--c-ink-3);
  border-radius: var(--r-s);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-toggle-pwd:active { color: var(--c-accent); }

.login-error {
  font-size: 13px;
  color: var(--c-red);
  font-weight: 500;
  text-align: center;
  padding: 0;
  margin: 0;
}

.login-btn {
  margin-top: var(--s-4);
  min-height: 58px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. GREETING + LOGOUT (Écran 1)
   ───────────────────────────────────────────────────────────────────────────── */

.btn-logout {
  color: var(--c-ink-3);
}

.btn-logout:active {
  background: var(--c-red-0);
  color: var(--c-red);
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. CHIFFRES CLÉS — Section S3 (vue mensuelle)
   ───────────────────────────────────────────────────────────────────────────── */

.chiffres-cles {
  background: var(--c-surface);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  padding: var(--s-4);
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.chiffres-titre {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-3);
}

/* Bloc total dépensé */
.chiffres-total-bloc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.chiffres-periode-label {
  font-size: 14px;
  color: var(--c-ink-3);
  align-self: flex-end;
}

/* INFO CLÉ : montant total dépensé — traitement héros */
.chiffres-total-montant {
  font-size: 28px;
  font-weight: 800;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  align-self: flex-end;
}

.chiffres-total-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-accent);
  align-self: flex-end;
  text-transform: uppercase;
}

/* Liste des catégories */
.chiffres-cat-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.chiffres-cat-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.chiffres-cat-emoji {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.chiffres-cat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-2);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barre de proportion */
.chiffres-cat-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--c-border);
  border-radius: 2px;
  overflow: hidden;
}

.chiffres-cat-montant {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 70px;
  text-align: right;
  letter-spacing: 0.03em;
}

.chiffres-vide {
  font-size: 14px;
  color: var(--c-ink-3);
  text-align: center;
  padding: var(--s-4) 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. CONVERSION DE DEVISES — Écran 2
   ───────────────────────────────────────────────────────────────────────────── */

/* Chips de sélection de devise */
.devise-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.devise-chip {
  padding: 7px 14px;
  border-radius: var(--r-full, 100px);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-2);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  cursor: pointer;
  white-space: nowrap;
}

.devise-chip:active { opacity: 0.8; }

.devise-chip-active {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Badge de conversion temps réel */
.conversion-badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent-light);
  border-radius: var(--r-m);
}

.conv-result {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.conv-taux {
  font-size: 11px;
  color: var(--c-ink-3);
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21. DÉPENSES MOYENNES — Slider horizontal 5 cards (Chiffres clés S3)
   ───────────────────────────────────────────────────────────────────────────── */

.chiffres-priorites {
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   22. SWIPE TO DELETE — Lignes de dépenses (S4)
   ───────────────────────────────────────────────────────────────────────────── */

/* Conteneur de chaque ligne — clip le débordement du slide */
.depense-swipe-row {
  position: relative;
  overflow: hidden;
}

/* Zone rouge révélée par le swipe */
.depense-delete-reveal {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 0;           /* animée par JS */
  overflow: hidden;
  background: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pas de transition ici — gérée par JS pour être synchro avec le doigt */
}

/* Bouton poubelle dans la zone rouge */
.depense-delete-btn {
  flex-shrink: 0;
  width: 80px;
  height: 100%;
  background: none;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.depense-delete-btn:active {
  background: rgba(0, 0, 0, 0.12);
}

/* La ligne de dépense glisse vers la gauche via JS (transform) */
.depense-ligne {
  will-change: transform;
  /* Les autres styles sont déjà définis plus haut */
}

/* fin app.css */

/* ─────────────────────────────────────────────────────────────────────────────
   24. GRILLE CALENDRIER 7 COLONNES — S3 chiffres clés
   ───────────────────────────────────────────────────────────────────────────── */

/* En-têtes L M M J V S D — même largeur de colonnes que la grille */
.mini-grid-headers {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(2px, 1.1vw, var(--s-1));
  margin-bottom: var(--s-1);
  padding: 0 1px; /* aligne avec les bords de .mini-grid */
}

.mini-grid-header {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 0;
}

/* Case de remplissage (avant le 1er et hors période du plan) */
.mini-day-pad {
  aspect-ratio: 1;
  border-radius: var(--r-s);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Jours hors période du plan : visibles mais neutres, non cliquables */
.mini-day-out {
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 400;
  color: var(--c-border);
  pointer-events: none;
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. INDICATEURS DE PROJECTION — Bêta (S3 chiffres clés)
   ───────────────────────────────────────────────────────────────────────────── */

.chiffres-projection-beta {
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* En-tête avec badge β */
.proj-beta-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.proj-beta-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-accent);
  background: var(--c-accent-light);
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

/* Label fenêtre glissante */
.proj-fenetre-label {
  font-size: 11px;
  color: var(--c-ink-3);
  font-weight: 400;
  margin-top: calc(var(--s-1) * -1);
}

/* Grille des 3 scénarios */
.proj-scenarios {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Carte scénario individuelle */
.proj-scenario {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  border-radius: var(--r-m);
  border: 1.5px solid var(--c-border);
}

.proj-scenario-top {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.proj-scenario-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

.proj-scenario-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.proj-scenario-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
}

.proj-scenario-desc {
  font-size: 11px;
  color: var(--c-ink-3);
  font-weight: 400;
}

/* Valeurs : taux journalier + marge */
.proj-scenario-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-1);
  border-top: 1px solid var(--c-border);
}

.proj-rate {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.proj-marge {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Couleurs par statut */
.proj-ok   { border-color: rgba(5, 150, 105, 0.25); }
.proj-tight { border-color: rgba(245, 158, 11, 0.3); }
.proj-risk  { border-color: rgba(225, 29, 72, 0.25); }

.proj-ok   .proj-marge { color: var(--c-green); }
.proj-tight .proj-marge { color: #B45309; }
.proj-risk  .proj-marge { color: var(--c-red); }

/* ─────────────────────────────────────────────────────────────────────────────
   26. COACH IA — Analyse prédictive S4
   ───────────────────────────────────────────────────────────────────────────── */

.coach-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-accent);
}

/* Message */
.coach-message {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-ink-2);
  margin: 0;
}

.coach-message strong {
  color: var(--c-green-text);
  font-weight: 700;
}

/* ── Variantes ────────────────────────────────────────────────────────── */

/* En attente de données */
.coach-section--pending {
  background: var(--c-bg);
  border-style: dashed;
  border-color: var(--c-border);
}

/* Bonne marge */
.coach-section--positive {
  border-color: rgba(5, 150, 105, 0.28);
  background:   rgba(5, 150, 105, 0.04);
}
.coach-section--positive .coach-label { color: var(--c-green); }

/* Budget serré */
.coach-section--tight {
  border-color: rgba(245, 158, 11, 0.35);
  background:   rgba(245, 158, 11, 0.04);
}
.coach-section--tight .coach-label { color: #B45309; }

/* Dérive détectée */
.coach-section--risk {
  border-color: rgba(225, 29, 72, 0.28);
  background:   rgba(225, 29, 72, 0.04);
}
.coach-section--risk .coach-label { color: var(--c-red); }

/* Coach — accroche : l'information clé en premier (date de retour envisagée, ou « +Nj »).
   Taille fluide (plafonnée à 30px) : « 03/03/2027 » reste sur une ligne jusqu'aux plus petits écrans. */
.s4-coach-content .coach-headline {
  margin: 0;
  font-size: clamp(22px, 8.2vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-green-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.s4-coach-content .coach-headline + .coach-message { margin-top: 2px; }
.coach-section--tight .coach-headline,
.coach-section--tight .coach-message strong { color: #B45309; }
.coach-section--risk  .coach-headline,
.coach-section--risk  .coach-message strong { color: var(--c-red); }

/* ─────────────────────────────────────────────────────────────────────────────
   27. SIMULATEUR D'IMPACT — S2
   ─────────────────────────────────────────────────────────────────────────────
   Le toggle Ajouter/Simuler réutilise .type-toggle / .type-btn (section 9).
   ───────────────────────────────────────────────────────────────────────────── */

/* Vue simulation */
.simu-view { display: flex; flex-direction: column; gap: var(--s-4); }
.simu-intro { font-size: 14px; color: var(--c-ink-2); line-height: 1.6; }

/* Résultats */
.simu-results { display: flex; flex-direction: column; gap: var(--s-3); }

/* Message simple (ok / pending / err) */
.simu-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-l);
  font-size: 14px;
  line-height: 1.6;
}
.simu-msg-icon { font-size: 18px; flex-shrink: 0; }
.simu-msg-ok      { background: rgba(5,150,105,.06); border: 1.5px solid rgba(5,150,105,.25); }
.simu-msg-pending { background: var(--c-bg);         border: 1.5px dashed var(--c-border); }
.simu-msg-err     { background: rgba(225,29,72,.05); border: 1.5px solid rgba(225,29,72,.2); }

/* Cards options A / B */
.simu-option {
  border-radius: var(--r-l);
  border: 1.5px solid var(--c-border);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.simu-option-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.simu-option-icon  { font-size: 18px; flex-shrink: 0; }
.simu-option-titre { font-size: 13px; font-weight: 700; color: var(--c-ink); }

/* Chiffre héros — la réduction par jour */
.simu-chiffre {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: var(--s-1) 0 0;
}

.simu-chiffre-unit {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Durée — discrète sous le chiffre */
.simu-duree {
  font-size: 12px;
  color: var(--c-ink-3);
  font-weight: 500;
}

/* Accent couleur par option */
.simu-option-a { border-color: rgba(79,86,211,.3); }
.simu-option-a .simu-chiffre { color: var(--c-accent); }

.simu-option-b { border-color: rgba(5,150,105,.3); }
.simu-option-b .simu-chiffre { color: var(--c-green); }

/* Contexte simulation (ce qui s'est passé) */
.simu-contexte {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent-light);
  border-radius: var(--r-m);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-accent);
}
.simu-contexte-icon { font-size: 16px; flex-shrink: 0; }
.simu-contexte strong { font-weight: 800; }

/* Sprint désactivé ou contraint */
.simu-option-disabled {
  opacity: 0.6;
  border-color: var(--c-border);
}

.simu-duree-warn {
  color: var(--c-orange);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   28. SLIDER SPRINT DÉTOX — Simulateur S2
   ───────────────────────────────────────────────────────────────────────────── */

.simu-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s-2);
}

.simu-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Track + thumb — green accent pour le Sprint */
.simu-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 100px;
  background: linear-gradient(
    to right,
    var(--c-green) 0%,
    var(--c-green) var(--simu-pct, 100%),
    var(--c-border) var(--simu-pct, 100%),
    var(--c-border) 100%
  );
  outline: none;
  cursor: pointer;
}

.simu-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2.5px solid var(--c-green);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
  cursor: grab;
  transition: box-shadow .1s;
}

.simu-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 2px 16px rgba(5, 150, 105, 0.4);
}

.simu-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2.5px solid var(--c-green);
  cursor: grab;
}

/* ─────────────────────────────────────────────────────────────────────────────
   29. S3 REDESIGN — Dépenses moyennes + Projection budget
   ───────────────────────────────────────────────────────────────────────────── */

/* Suppression du background du budget-jour-box */
.budget-jour-box { background: none; padding: 0; }

/* Titres de sections : 16px / 700 / pas de bordure autour */
.chiffres-section-titre {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink-3);
  margin: var(--s-5) 0 var(--s-3) 0;
  text-transform: uppercase;
}

/* Suppression de toutes les bordures entre sections S3 */
.chiffres-priorites,
.chiffres-projection-beta,
.chiffres-cles {
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 0;
}

/* ── DÉPENSES MOYENNES — grille horizontale scrollable ─────────────────────── */

.moy-grid {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.moy-grid::-webkit-scrollbar { display: none; }

/* Card individuelle : fond blanc, ombre droite + bas */
.moy-card {
  flex-shrink: 0;
  min-width: 160px;
  min-height: 145px;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.04);
  align-items: center;
}

/* Mini-card icône : fond clair coloré */
.moy-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: center;
}

.moy-icon { font-size: 22px; line-height: 1; }

.moy-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-ink-3);
  line-height: 1.2;
}

.moy-montant {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* ─── MES VICTOIRES — séries de jours verts (S3, sous « Dépenses moyennes ») ───────────────────────────
   Même enveloppe que « Dépenses moyennes » (.chiffres-priorites + .chiffres-section-titre).
   RÈGLE DE CONCEPTION : aucune couleur rouge dans cette section — on célèbre, on ne sanctionne jamais. */
.victoires { margin-top: var(--s-5); margin-bottom: var(--s-8); }     /* dernier bloc de l'écran : dégage le texte du bouton « + » flottant */

.victoires-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));      /* minmax(0,…) : une carte ne force jamais la grille à déborder */
  gap: var(--s-3);
}

.victoire-card {
  min-width: 0;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: var(--s-4) clamp(8px, 3vw, var(--s-4));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.04);       /* identique aux cartes « Dépenses moyennes » */
}

.victoire-card--hero {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #ECFDF5 0%, var(--c-surface) 75%);
  padding-block: var(--s-5);
}

.victoire-icon { font-size: 22px; line-height: 1; }
.victoire-card--hero .victoire-icon { font-size: 28px; }

.victoire-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-ink-3);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.victoire-valeur {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.3em;
  color: var(--c-green-text);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.victoire-nombre { font-size: clamp(22px, 7vw, 28px); }
.victoire-card--hero .victoire-nombre { font-size: clamp(34px, 11vw, 44px); }
.victoire-unite { font-size: 14px; font-weight: 600; color: var(--c-ink-2); }

.victoire-sous { margin: 0; font-size: 13px; color: var(--c-ink-2); line-height: 1.3; overflow-wrap: anywhere; }
.victoire-portee { margin: 0; font-size: 12px; color: var(--c-ink-3); line-height: 1.3; overflow-wrap: anywhere; }
.victoire-encouragement { margin: 0; font-size: 16px; font-weight: 700; color: var(--c-green-text); line-height: 1.3; }

/* Barre des carrés verts : remplissage VERT sur piste neutre (jamais de part rouge) ; halo néon comme le calendrier */
.victoire-barre { width: 100%; height: 8px; border-radius: 999px; background: #F1F5F9; margin-top: 2px; }
.victoire-barre-remplie { height: 100%; border-radius: inherit; background: var(--c-green-2); box-shadow: 0 0 8px rgba(46, 240, 160, 0.4); }

.victoires-note { margin: var(--s-3) 0 0; font-size: 12px; color: var(--c-ink-3); text-align: center; }

/* Très petits écrans : « PLUS LONGUE SÉRIE » passe sur 2 lignes → on réserve 2 lignes aux deux étiquettes du bas pour que
   les chiffres des deux cartes restent alignés. */
@media (max-width: 359px) {
  .victoire-card:not(.victoire-card--hero) .victoire-label {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   30. DATE RANGE PICKER — barre nav + édition ciblée
   ───────────────────────────────────────────────────────────────────────────── */

/* Barre navigation mois / année */
.drp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}

.drp-nav-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-accent);
  border-radius: var(--r-s);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.drp-nav-btn:active { background: var(--c-accent-light); }

.drp-nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--c-accent);
}

/* Bloc en cours d'édition — surligné avec fond accent-light */
.drp-sel-editing {
  background: var(--c-accent-light);
  border-radius: var(--r-s);
  padding: 2px 6px;
  border: 1.5px solid var(--c-accent);
  cursor: pointer;
}

/* Blocs cliquables — curseur pointeur */
.drp-sel-block { cursor: pointer; }

/* ─────────────────────────────────────────────────────────────────────────────
   S4 REDESIGN — Jauge card · Coach link · Lignes dépenses
   ───────────────────────────────────────────────────────────────────────────── */

/* Fond dégradé gauche → droite */
#screen-4 {
  background: linear-gradient(to right, #F8F6FD, #FAF8FF);
  min-height: 100dvh;
}

/* Card de la jauge */
.s4-gauge-card {
  margin: 0 var(--s-4) var(--s-3);
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Lien "Voir les prévisions de fin de séjour" dans la card coach */
.coach-simu-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(0, 108, 73, 0.15);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-green);
  text-decoration: none;
  opacity: 0.85;
}

.coach-simu-link:hover { opacity: 1; }

/* ── Lignes de dépenses S4 ────────────────────────────────────────────────── */

.s4-dep-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
}

/* Icône catégorie dans une mini-card #EAEDFF */
.s4-dep-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #EAEDFF;
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

/* Corps : label + badge + heure */
.s4-dep-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s4-dep-label-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.s4-dep-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
}

/* Heure sous le label — format HH:mm */
.s4-dep-time {
  font-size: 12px;
  color: var(--c-ink-3);
  font-weight: 400;
}

/* Badges spéciale / récurrente */
.s4-dep-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
}

.s4-dep-badge--spec {
  background: #FEF9C3;
  color: #92400E;
}

.s4-dep-badge--rec {
  background: var(--c-accent-light);
  color: var(--c-accent);
}

/* Montant à droite */
.s4-dep-right {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s4-dep-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.s4-dep-amount-sub {
  font-size: 11px;
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   S4 REDESIGN — Header · Date hero · Coach green · Lignes dépenses · FAB
   ───────────────────────────────────────────────────────────────────────────── */

#screen-4 {
  background: linear-gradient(to right, #F8F6FD, #FAF8FF);
  min-height: 100dvh;
}

/* ── Header S4 : pas de bandeau blanc ─────────────────────────────────────── */

.s4-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-4)) var(--s-4) var(--s-2);
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(to right, #F8F6FD, #FAF8FF);;
}

/* Cercle avion */
.s4-plan-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E9E5FC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s4-plan-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-ink);
}

/* Date en grand sur le fond */
.s4-date-hero {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  padding: 0 var(--s-4) 2px;
  line-height: 1.2;
}

.s4-position {
  font-size: 13px;
  color: var(--c-ink-3);
  padding: 0 var(--s-4) var(--s-3);
}

/* ── Card de la jauge ─────────────────────────────────────────────────────── */

.s4-gauge-card {
  margin: 0 var(--s-4) var(--s-3);
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* ── Card Analyse IA — fond vert clair, icône vert foncé ─────────────────── */

.s4-coach-card {
  background: #E6F9F6 !important;
  border-color: rgba(0, 108, 73, 0.2) !important;
  padding: var(--s-3) var(--s-4) !important;
  border: 2px dashed;
}

.s4-coach-card .coach-label { color: #006C49 !important; }

.s4-coach-icon-wrap {
  width: 34px;
  height: 34px;
  background: #006C49;
  border-radius: var(--r-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Lignes de dépenses S4 ────────────────────────────────────────────────── */

.s4-dep-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  cursor: pointer;
}

.s4-dep-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #EAEDFF;
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.s4-dep-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s4-dep-label-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.s4-dep-label { font-size: 15px; font-weight: 600; color: var(--c-ink); }
.s4-dep-time  { font-size: 12px; color: var(--c-ink-3); font-weight: 400; }

.s4-dep-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
}

.s4-dep-badge--spec { background: #FEF9C3; color: #92400E; }
.s4-dep-badge--rec  { background: var(--c-accent-light); color: var(--c-accent); }

.s4-dep-right {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s4-dep-amount     { font-size: 15px; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.s4-dep-amount-sub { font-size: 11px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────────────
   S4 v2 — Header ⋮ · Coach layout fidèle au design
   ───────────────────────────────────────────────────────────────────────────── */

/* Header : icône | titre (flex-1) | ⋮ */
.s4-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-4)) var(--s-4) var(--s-2);
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(to right, #F8F6FD, #FAF8FF);;
}

.s4-plan-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E9E5FC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s4-plan-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-ink);
}

/* ── Card Analyse IA — layout vertical fidèle au design ─────────────────── */

.s4-coach-card {
  background: #E6F9F6;
  border-radius: var(--r-xl);
  margin: 0 var(--s-4) var(--s-3);
  padding: var(--s-3) var(--s-4);
  overflow: hidden;
}

/* Ligne du haut : icon | (label + message) */
.s4-coach-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.s4-coach-icon-wrap {
  width: 34px;
  height: 34px;
  background: #006C49;
  border-radius: var(--r-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.s4-coach-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.s4-coach-content .coach-label  { color: #006C49; }
.s4-coach-content .coach-message { margin: 0; }
.s4-coach-arrow { font-size: 16px; flex-shrink: 0; }
/* ─── Card correction rythme (delta < 0) ─────────────────────────────────── */
.rythme-correction-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: #E6F9F6;
  border: 2px dashed rgba(0, 108, 73, 0.2);
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
}

.rythme-correction-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  background: var(--c-green-1);
  border-radius: var(--r-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--sh-s);
}

.rythme-correction-msg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink-2);
  margin: 0;
}

.rythme-correction-msg strong { color: #006C49; font-weight: 700; }

#screen-3 .main-with-nav {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* ─── Barres catégories bicolores S3 ────────────────────────────────────── */

.chiffres-cat-bar-track {
  height: 8px;
  border-radius: 100px;
  background: var(--c-bg);
  overflow: hidden;
  display: flex;
}

.chiffres-bar-effectue {
  height: 100%;
  background: var(--c-accent);
  border-radius: 100px 0 0 100px;
  flex-shrink: 0;
}

.chiffres-bar-avenir {
  height: 100%;
  background: var(--c-green-1);
  flex-shrink: 0;
}

/* ─── Légende ────────────────────────────────────────────────────────────── */

.chiffres-legende {
  display: flex;
  gap: var(--s-4);
  justify-content: flex-start;
  margin-top: var(--s-2);
  padding: 0 var(--s-1);
}

.chiffres-legende-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chiffres-legende-swatch {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chiffres-legende-swatch--effectue { background: var(--c-accent); }

.chiffres-legende-swatch--avenir {
  background: var(--c-green-1);
}

.chiffres-legende-txt {
  font-size: 11px;
  color: var(--c-ink-3);
}


/* ─────────────────────────────────────────────────────────────────────────────
   ÉCRAN 1 — Cartes de métriques (restant / budget du jour), adaptatives
   ─────────────────────────────────────────────────────────────────────────────
   Causes du défaut (« $ » à la ligne dès ~380px) :
     1. .metric-value fixé à 22px et sans nowrap : l'espace avant « $ » est un point de coupure ;
     2. grille « 1fr 1fr » = minmax(auto, 1fr) : une colonne ne peut pas rétrécir sous son contenu ;
     3. padding et polices fixes.
   Correction (même logique que la carte haplat) : la grille est un conteneur ; padding et polices sont
   en cqw, PLAFONNÉS aux tailles d'origine (22px / 14px) ; les libellés ne changent pas. S1 pose --em-v / --em-s
   (largeur estimée du montant et du sous-texte, en em) : la taille est la plus grande qui tient.
   Les deux cartes partagent la même taille (le maximum des deux textes) : pas d'effet « escalier ».
   Scopé sous .plan-card (carte du plan actif de S1) : aucun autre écran n'est touché.
   (Ces règles peuvent être déplacées dans s1-plans.css : leur double sélecteur reste prioritaire.) */
.plan-card .plan-metrics-grid {
  container-type: inline-size;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.plan-card .metric-card {
  --mc-pad: clamp(8px, 4.1cqw, 12px);                                       /* 12px d'origine */
  --mc-content: calc((100cqw - var(--s-2)) / 2 - 2 * var(--mc-pad));        /* largeur utile d'une carte */
  padding: var(--mc-pad);
  min-width: 0;
}
.plan-card .metric-value {
  font-size: min(22px, max(10px, calc(var(--mc-content) / var(--em-v, 5))));
  white-space: nowrap;
}
.plan-card .metric-sub {
  font-size: min(14px, max(8.5px, calc(var(--mc-content) / var(--em-s, 7))));
  white-space: nowrap;
}