/* =========================================================
   Whale — Feuille de style
   ========================================================= */
:root {
  --navy: #0A1F3D;
  --navy-2: #12335F;
  --ocean: #1B6CA8;
  --teal: #14B8A6;
  --sand: #F5A524;
  --coral: #EF5B57;
  --amber: #C98A12;
  --green: #1FA971;
  --violet: #7C5CFC;

  --bg: #F4F1EC;
  --card: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #0B1B2E;
  --ink-2: #34475E;
  --muted: #556579;
  --line: #E6E1D8;
  --track: #ECE8E1;
  --soft: #FAF8F4;

  --needs: #2F6FED;
  --wants: #14B8A6;
  --savings: #F5A524;

  /* Teintes douces des pastilles, etiquettes et survols : une seule
     source, redefinie pour le mode sombre. */
  --tint-blue: #E8F1FA;
  --tint-teal: #E3F6F2;
  --tint-gold: #FFF1D6;
  --tint-coral: #FDEBEA;
  --tint-violet: #EFEAFF;

  /* ---------- Systeme de couleurs semantiques (refonte accentuation,
     02/10/2026) : seule source de verite pour tout statut colore de
     l'application (badges, alertes, barres de progression, liserés de
     carte, ecarts). Chaque paire -bg/-text respecte le contraste WCAG
     AA (4,5:1 minimum pour le texte). ---------- */
  --color-accent: var(--navy);         /* action principale : un seul bouton fort par ecran */
  --color-accent-hover: var(--navy-2);

  --color-success: #12724D;
  --color-success-bg: #E9F8F1;
  --color-success-border: #BFE9D5;

  --color-warning: #7A4F04;
  --color-warning-bg: #FFF6E3;
  --color-warning-border: #F4DDA6;

  --color-danger: #A32D2A;
  --color-danger-bg: #FDEEED;
  --color-danger-border: #F4C6C4;

  --color-info: #1B4A8C;
  --color-info-bg: #EEF4FF;
  --color-info-border: #CFE0FF;

  /* Categories : une couleur fixe par categorie, identique partout
     (ecrans, graphiques). Objectifs prend le violet de marque. */
  --category-charges: var(--needs);
  --category-loisirs: var(--wants);
  --category-epargne: var(--savings);
  --category-objectifs: var(--violet);

  --radius: 20px;
  --shadow: 0 1px 2px rgba(10, 31, 61, .05), 0 8px 24px rgba(10, 31, 61, .07);
  --shadow-lg: 0 2px 4px rgba(10, 31, 61, .06), 0 18px 40px rgba(10, 31, 61, .12);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Mode sombre (choix de l'utilisateur, memorise ; suit le
   systeme par defaut). Seules les valeurs changent : aucun composant
   n'est duplique. ---------- */
:root[data-theme="dark"] {
  --bg: #08111F;
  --card: #101E33;
  --surface: #13233B;
  --ink: #EAF1FA;
  --ink-2: #B9C8DC;
  --muted: #93A5BF;
  --line: #1F3050;
  --track: #1A2A42;
  --soft: #0D1A2E;
  --ocean: #7DB2FF;
  --tint-blue: #10284F;
  --tint-teal: #0A3A3A;
  --tint-gold: #3B2A08;
  --tint-coral: #401716;
  --tint-violet: #241A55;
  --color-success: #7BE0B4;
  --color-success-bg: #0F3A2B;
  --color-success-border: #1B5B44;
  --color-warning: #F6C766;
  --color-warning-bg: #35260A;
  --color-warning-border: #5C430F;
  --color-danger: #FF9B98;
  --color-danger-bg: #401716;
  --color-danger-border: #6B2A28;
  --color-info: #9DBBFF;
  --color-info-bg: #10284F;
  --color-info-border: #1E3B6E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--ocean); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.txt-bad { color: var(--color-danger); }
.txt-good { color: var(--color-success); }
.txt-warn { color: var(--color-warning); }
.ic { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Layout ---------- */
.shell { min-height: 100vh; }
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 256px; overflow-y: auto; z-index: 30;
  background: linear-gradient(180deg, var(--navy) 0%, #0A1F3B 100%);
  color: #C9DAEE; padding: 22px 14px; display: flex; flex-direction: column; gap: 6px;
}
/* .sidebar-top et .nav-panel n'existent que pour donner au menu
   mobile une vraie structure (barre du haut / panneau glissant) sans
   toucher a la mise en page desktop : en display:contents, ils sont
   transparents a la disposition, brand/nav/sidebar-foot restent des
   enfants directs de .sidebar exactement comme avant (regle mobile
   dediee plus bas). */
.sidebar-top, .nav-panel { display: contents; }
.nav-backdrop { display: none; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 22px; padding: 0 8px 18px; letter-spacing: -.02em; }
.nav-toggle, .nav-toggle-label { display: none; }
.brand svg { color: #7FD3F7; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7D93B2; padding: 14px 12px 6px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
  color: #BCD0E8; text-decoration: none; font-weight: 500; font-size: 14px; line-height: 1.25;
}
/* Libelles longs (anglais) : retour a la ligne plutot que coupure, icone et pastille jamais ecrasees. */
.nav a > svg, .nav a > .ic, .nav a > .step { flex: none; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.active { background: rgba(43, 179, 163, .18); color: #fff; box-shadow: inset 3px 0 0 var(--teal); }
.nav .step {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .22); color: #9FB6D3;
}
.nav .step.done { background: var(--teal); border-color: var(--teal); color: #fff; }
.sidebar-foot { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 10px; }
.sidebar-foot select.input { width: 100%; font-size: 13px; padding: 7px 9px; color: var(--ink); background: var(--surface); }
.me { display: flex; gap: 10px; align-items: center; min-width: 0; }
.me strong { display: block; color: #fff; font-size: 14px; }
.me small { display: block; color: #8FA6C4; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.btn-link { background: none; border: 0; color: #9FB6D3; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; font-size: 13px; }
.btn-link:hover { color: #fff; }

.main { padding: 32px clamp(16px, 4vw, 44px) 72px; max-width: 1180px; width: 100%; margin-left: 256px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 800; }
.page-head p { color: var(--muted); margin-top: 6px; max-width: 680px; }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 6px; }

.stack { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; border: 1px solid var(--line); min-width: 0; }
.card h2 { font-size: 18px; font-weight: 700; }
.card h3 { font-size: 16px; font-weight: 700; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head p { color: var(--muted); font-size: 13px; margin-top: 4px; }

.kpi .kpi-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.kpi .kpi-value { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .kpi-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* ---------- Buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, border-color .15s, transform .05s;
  max-width: 100%; text-align: center; box-sizing: border-box;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-secondary { background: var(--navy-2); color: #fff; border-color: transparent; }
.btn-secondary:hover { background: #1B3C6B; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #239b8d; }
.btn-ghost { background: var(--surface); color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: #C4D0DE; background: var(--soft); }
.btn-danger { background: var(--surface); color: var(--coral); border-color: #F1C9C8; }
.btn-danger:hover { background: var(--tint-coral); }
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: 13px; border-radius: 6px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { background: none; border: 0; padding: 6px; border-radius: 8px; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--soft); color: var(--ink); }

.input {
  width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  outline: none; transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box;
  font-size: 14px; line-height: 1.4;
}
.input:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(27, 108, 168, .15); }

/* Focus clavier visible partout (refonte accentuation, 02/10/2026,
   WCAG AA) : jamais supprime, seulement redessine la ou le navigateur
   propose deja un style par defaut different (boutons, liens, chips). */
.btn:focus-visible, a:focus-visible, .chip:focus-visible, .field-checkbox:focus-within {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.input.num { text-align: right; font-variant-numeric: tabular-nums; }
.input-sm { min-height: 32px; padding: 5px 9px; font-size: 13px; }
input[type=number]::-webkit-inner-spin-button { opacity: .4; }

[hidden] { display: none !important; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.field-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.field-checkbox input { width: auto; margin: 0; }
.remember-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.remember-row .fineprint { margin: 0; text-align: right; }
.label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.form-row { margin-bottom: 14px; }

/* Groupes de champs et actions de formulaires */
.input-group {
  display: flex; align-items: stretch; gap: 8px; width: 100%;
}
.input-group > .input { flex: 1; min-width: 0; }
.input-group > .btn { flex: none; white-space: nowrap; }

.form-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.form-field > label, .form-field > .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form-field > .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.form-field > .field-error { margin-top: 2px; }

.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.form-actions.end { justify-content: flex-end; }
.form-actions.spread { justify-content: space-between; }

.money { position: relative; display: flex; align-items: center; }
.money .input { padding-right: 52px; }
.money > span { position: absolute; right: 12px; font-size: 12px; color: var(--muted); pointer-events: none; }
.money.lg .input { font-size: 26px; font-weight: 800; padding: 14px 80px 14px 16px; letter-spacing: -.02em; min-height: 56px; }
.money.lg > span { font-size: 15px; font-weight: 600; right: 16px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.form-grid-top { align-items: start; }
.form-grid-top > .form-actions { align-self: end; }
.form-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: normal; overflow-wrap: normal; }
/* Un tableau trop large defile dans sa carte au lieu de deborder de la page. */
.card:has(> table.table) { overflow-x: auto; }
.table th.num { text-align: right; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--line); }
.table tr.row-over td { background: var(--tint-coral); }
.table td.actions { white-space: nowrap; text-align: right; width: 1%; }
.table .money { min-width: 140px; }

/* Tableaux éditables */
table.table-editable { table-layout: fixed; width: 100%; border-collapse: collapse; }
table.table-editable th { padding: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--line); }
table.table-editable td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.table-editable .col-poste { width: 28%; }
table.table-editable .col-budget { width: 30%; }
table.table-editable .col-freq { width: 32%; }
table.table-editable .col-actions { width: 10%; text-align: right; }
table.table-editable .cell-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
table.table-editable .cell-hint { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 6px; text-align: left; }
table.table-editable .freq-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
table.table-editable .freq-fields select,
table.table-editable .freq-fields input { min-height: 36px; padding: 6px 10px; font-size: 13px; }
table.table-editable td.actions { vertical-align: middle; text-align: right; }
table.table-editable td.actions .btn-lock {
  padding: 6px 10px; font-size: 12px; border-radius: 6px; white-space: nowrap; min-height: 32px;
}

.item-ic { display: inline-block; width: 22px; text-align: center; }
.tag { font-size: 11px; font-weight: 700; background: var(--tint-blue); color: var(--ocean); padding: 2px 7px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }
.ecart { font-weight: 700; font-variant-numeric: tabular-nums; }
.ecart.bad { color: var(--coral); }
.ecart.good { color: var(--green); }

/* ---------- Badges, alerts, progress ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge .ic { width: 13px; height: 13px; }
.badge-good { background: var(--color-success-bg); color: var(--color-success); }
.badge-warn { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-bad { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }

.alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid; }
.alert strong { display: block; font-size: 15px; }
.alert p { font-size: 14px; margin-top: 2px; }
.alert .ic { margin-top: 2px; }
.alert-good { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert-warn { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.alert-bad { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.alert-info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }
.alert.big { padding: 20px 22px; }
.alert.big strong { font-size: 17px; }

/* Barre de progression a seuils (refonte accentuation, 02/10/2026) :
   normal (vert/turquoise) en dessous du seuil d'attention, ambre au
   dela, rouge au dela du seuil de depassement. Le pourcentage reste
   toujours affiche en texte a cote (.progress-label) : jamais la
   couleur seule pour porter l'information (accessibilite daltonisme). */
.progress { height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--teal); }
.progress.warn > i { background: var(--color-warning); }
.progress.over > i { background: var(--color-danger); }
.progress-row { display: flex; align-items: center; gap: 10px; }
.progress-row .progress { flex: 1; }
.progress-label { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.progress-label.warn { color: var(--color-warning); }
.progress-label.over { color: var(--color-danger); }

.splitbar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--track); gap: 2px; }
.splitbar > i { display: block; height: 100%; }

/* Liseré colore a gauche d'une carte, selon categorie ou etat (refonte
   accentuation, 02/10/2026) : jamais une teinte de fond pleine, qui
   alourdirait une liste entiere de cartes au meme titre. */
.card--accent { border-left: 4px solid var(--line); }
.card--accent-charges { border-left-color: var(--category-charges); }
.card--accent-loisirs { border-left-color: var(--category-loisirs); }
.card--accent-epargne { border-left-color: var(--category-epargne); }
.card--accent-objectifs { border-left-color: var(--category-objectifs); }
.card--accent-good { border-left-color: var(--color-success); }
.card--accent-warn { border-left-color: var(--color-warning); }
.card--accent-bad { border-left-color: var(--color-danger); }
.card--accent-info { border-left-color: var(--color-info); }

/* Chiffre cle (solde, reste a affecter, ecart) : plus grand, plus
   gras, couleur selon l'etat ; libelle secondaire en gris discret. */
.key-figure { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.key-figure.good { color: var(--color-success); }
.key-figure.warn { color: var(--color-warning); }
.key-figure.bad { color: var(--color-danger); }
.key-figure-label { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Ecart positif/negatif (toujours signe + couleur, jamais la couleur
   seule : le signe porte l'information pour un lecteur daltonien). */
.delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.positive { color: var(--color-success); }
.delta.negative { color: var(--color-danger); }
.delta.positive::before { content: "+"; }

/* Etat vide (liste/ecran sans donnee) : message + action proposee,
   jamais une carte silencieuse sans suite possible pour l'utilisateur. */
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state p { margin-bottom: 14px; }

.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.list li .ic { margin-top: 2px; color: var(--teal); }
.bullets { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.bullets li { margin: 3px 0; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero {
  background: radial-gradient(1200px 600px at 10% 110%, rgba(43, 179, 163, .35), transparent 60%),
              radial-gradient(900px 500px at 100% -10%, rgba(127, 211, 247, .25), transparent 60%),
              linear-gradient(160deg, #0B2545, #0A1A33);
  color: #D7E6F6; padding: clamp(28px, 6vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
}
.auth-hero .brand { padding: 0; font-size: 26px; }
.auth-hero h1 { font-size: clamp(30px, 4vw, 46px); color: #fff; font-weight: 800; letter-spacing: -.03em; max-width: 560px; }
.auth-hero p.lead { font-size: 17px; margin-top: 16px; max-width: 520px; color: #BFD3EA; }
.formula { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.formula span { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); padding: 6px 12px; border-radius: 99px; font-size: 13px; color: #E3EEF9; }
.hero-whale { position: absolute; right: -60px; bottom: -30px; width: 380px; opacity: .08; color: #fff; pointer-events: none; }
.auth-panel { position: relative; display: grid; place-items: center; padding: 32px 16px; }

/* Bascule EN|FR des ecrans publics (correctif positionnement,
   02/10/2026) : ancree en haut a droite de .auth-panel (jamais dans
   le flux), taille de contenu plutot que la pleine largeur heritee
   de .tabs. Composant reutilise a l'identique (locale_switch.php) ;
   seul ce conteneur change son contexte, jamais le gabarit partage
   avec la barre laterale du tableau de bord. */
.lang-switch--public { position: absolute; top: 20px; right: 24px; z-index: 2; }
.lang-switch--public .tabs { display: inline-flex; width: auto; margin: 0; padding: 3px; }
.lang-switch--public .tabs button { padding: 7px 10px; font-size: 12px; min-width: 34px; }
.auth-card { width: 100%; max-width: 440px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--track); border-radius: 12px; padding: 4px; margin-bottom: 22px; }
.tabs button, .tabs a { display: block; text-align: center; text-decoration: none; border: 0; background: none; padding: 9px; border-radius: 9px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs button.on, .tabs a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.auth-card form { display: grid; gap: 14px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fineprint { font-size: 12px; color: var(--muted); margin-top: 16px; text-align: center; }

/* ---------- Dashboard ---------- */
.hero-card { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: linear-gradient(135deg, var(--surface) 55%, var(--tint-teal)); }
.hero-card svg { color: var(--ocean); }
.hero-card h2 { font-size: 24px; margin-bottom: 8px; }
.journey { columns: 2; column-gap: 28px; padding-left: 20px; margin: 16px 0 22px; font-size: 14px; color: var(--ink-2); }
.journey li { margin: 4px 0; break-inside: avoid; }

.score-ring { position: relative; width: 150px; height: 150px; flex: none; }
.score-ring svg { width: 100%; height: 100%; }
.score-ring .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-ring .val b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.score-ring .val small { color: var(--muted); font-size: 12px; }
.score-ring.lg { width: 210px; height: 210px; }
.score-ring.lg .val b { font-size: 56px; }

.donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; flex: 1; min-width: 160px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend li b { margin-left: auto; font-variant-numeric: tabular-nums; }

.bars { display: grid; gap: 16px; }
.bar-group .bar-title { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; gap: 8px; }
.bar-line { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin: 3px 0; }
.bar-line .track { height: 10px; background: var(--track); border-radius: 99px; overflow: hidden; }
.bar-line .track i { display: block; height: 100%; border-radius: 99px; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.checklist a:hover { background: var(--soft); }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; color: #fff; }
.checklist .done .tick { background: var(--teal); border-color: var(--teal); }

/* ---------- Rules ---------- */
.rule-card { display: flex; flex-direction: column; gap: 14px; }
.rule-card.chosen { border: 2px solid var(--teal); }
.rule-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rule-card .parts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.rule-card .parts li { display: flex; gap: 8px; align-items: baseline; }
.rule-card .parts .dot { transform: translateY(1px); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pros-cons h4, .rule-card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.example { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.example div { display: flex; justify-content: space-between; gap: 8px; }
.rule-card footer { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.custom-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* ---------- Category pages ---------- */
.envelope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.envelope .big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.envelope .envelope-bar { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 99px;
  padding: 7px 13px; cursor: pointer; font-size: 14px; transition: all .15s;
}
.chip:hover { border-color: #B9C7D8; }
.chip.on { background: var(--tint-teal); border-color: var(--teal); color: #146B61; font-weight: 600; }
.scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.scenario { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.scenario h3 { font-size: 15px; }
.scenario .changes { font-size: 13px; display: grid; gap: 4px; }
.scenario .changes div { display: flex; justify-content: space-between; gap: 8px; }
.scenario .changes s { color: var(--muted); }
.scenario footer { margin-top: auto; }

/* ---------- Goals ---------- */
.goal header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.goal-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.goal-nums label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.goal-nums .input { padding: 7px 9px; font-size: 13px; }
.goal-answer { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.goal-answer.done { background: var(--color-success-bg); color: var(--color-success); }
.goal-answer.warn { background: var(--color-warning-bg); color: var(--color-warning); }
.horizon-title { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 12px; }
.horizon-title h2 { font-size: 18px; }

/* ---------- What-if ---------- */
.preset-list { display: grid; gap: 8px; }
.preset { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--navy); }
.preset:hover { border-color: var(--teal); background: var(--tint-teal); }
.delta-up { color: var(--green); }
.delta-down { color: var(--coral); }

/* ---------- Score ---------- */
.score-parts { display: grid; gap: 16px; }
.score-part .spread { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.score-part p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- Abonnement ---------- */
.plan-card { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: center; padding-top: 30px; }
.plan-card.plan-best { border: 2px solid var(--sand); }
.plan-card.plan-active { border: 2px solid var(--teal); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--sand); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 99px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); white-space: nowrap; }
.plan-price { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.plan-price span { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.plan-card footer { margin-top: 8px; }
.premium-badge { color: var(--sand); display: inline-flex; vertical-align: middle; }
.promo-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; background: linear-gradient(135deg, var(--surface) 55%, var(--tint-gold)); border-color: var(--color-warning-border); }
.promo-card > svg:first-child { color: var(--sand); flex: none; }
.promo-card > svg:last-child { color: var(--muted); flex: none; margin-left: auto; }
.promo-card strong { font-size: 15px; }

/* ---------- Plan (document) ---------- */
.doc { max-width: 900px; }
.doc section { margin-bottom: 26px; }
.doc h2 { font-size: 18px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--track); }
.doc .doc-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.doc .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.doc .kv div { background: var(--soft); border-radius: 10px; padding: 10px 12px; }
.doc .kv small { display: block; color: var(--muted); font-size: 12px; }
.doc .kv b { font-size: 15px; }
.card.doc .header-box { display: none; }
.card.doc footer.pdf-footer { display: none; }
.path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.path span { background: var(--tint-blue); color: var(--ocean); padding: 4px 10px; border-radius: 99px; font-weight: 600; }

.next { display: flex; justify-content: flex-end; margin-top: 28px; gap: 10px; flex-wrap: wrap; }

/* ---------- Bandeau d'avertissement de session (correctif session, 02/10/2026) ---------- */
.session-warning-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 110; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; background: var(--color-warning-bg); border-bottom: 1px solid var(--color-warning-border); color: var(--color-warning); font-size: 14px; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; bottom: 20px; right: 20px; left: 20px; display: grid; justify-items: end; gap: 8px; z-index: 100; pointer-events: none; }
.toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); font-size: 14px; max-width: 420px; animation: toastIn .2s ease-out; transition: opacity .3s, transform .3s; }
.toast-bad { background: var(--color-danger); }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* Barre du haut, fixe : logo + bouton hamburger. Le panneau
     (nav + pied) s'ouvre en pur CSS via la case a cocher #nav-toggle
     et le selecteur :has(), sans JavaScript (ARCHITECTURE.md section
     12 : tout parcours critique fonctionne sans JS) : une vraie
     superposition plein ecran par dessus la page (fond assombri,
     defilement propre au panneau, page bloquee derriere), pas un
     simple deploiement dans le flux qui repoussait le contenu. */
  .sidebar {
    position: sticky; top: 0; left: auto; right: auto; bottom: auto; width: auto; height: auto;
    z-index: 30; padding: 0; gap: 0; overflow: visible; min-width: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  }
  .sidebar-top {
    display: flex; align-items: center; height: 60px; padding: 0 14px;
    background: linear-gradient(180deg, var(--navy) 0%, #0A1F3B 100%);
    position: relative; z-index: 26;
  }
  .main { margin-left: 0; padding-top: 22px; }
  .brand { padding: 4px 0; font-size: 18px; flex: none; }
  .brand svg { width: 28px; height: 28px; }

  .nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .nav-toggle-label {
    display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto;
    border-radius: 10px; color: #fff; cursor: pointer; flex: none;
  }
  .nav-toggle-label:hover { background: rgba(255, 255, 255, .08); }
  .nav-toggle-label .icon-close { display: none; }
  .nav-toggle:checked ~ .nav-toggle-label .icon-menu { display: none; }
  .nav-toggle:checked ~ .nav-toggle-label .icon-close { display: block; }
  .nav-toggle:focus-visible ~ .nav-toggle-label { outline: 2px solid var(--teal); outline-offset: 2px; }

  /* Fond assombri derriere le panneau ; cliquer dessus le referme
     (meme case a cocher, via son attribut for). */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(6, 16, 32, .55);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 24;
  }
  .sidebar:has(.nav-toggle:checked) .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Le panneau : glisse depuis la droite, plein ecran sous la barre,
     avec son propre defilement independant de la page. */
  .nav-panel {
    display: flex; flex-direction: column;
    position: fixed; top: 60px; right: 0; bottom: 0; width: min(320px, 86vw);
    background: linear-gradient(180deg, var(--navy) 0%, #0A1F3B 100%);
    z-index: 25; padding: 14px 10px 16px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
  }
  .sidebar:has(.nav-toggle:checked) .nav-panel { transform: translateX(0); }

  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav a.active { box-shadow: inset 3px 0 0 var(--teal); }
  .sidebar-foot {
    margin: 14px 0 0; padding: 14px 8px 4px; border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .auth { grid-template-columns: 1fr; }
  .hero-whale { display: none; }

  /* .auth-panel n'a alors plus 100vh de hauteur disponible (hero et
     panel empiles) : sans cette marge, la bascule EN|FR en position
     absolue chevaucherait le haut de .auth-card. */
  .auth-panel { padding-top: 64px; }
}

/* Bloque le defilement de la page pendant que le panneau mobile est
   ouvert, en pur CSS (:has, aucun JavaScript). */
body:has(.nav-toggle:checked) { overflow: hidden; }
@media (max-width: 768px) {
  table.table-editable,
  table.table-editable thead,
  table.table-editable tbody,
  table.table-editable tr,
  table.table-editable td {
    display: block;
    width: 100% !important;
  }
  table.table-editable thead {
    display: none;
  }
  table.table-editable tr {
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--surface);
  }
  table.table-editable td {
    border-bottom: none;
    padding: 8px 0;
    text-align: left !important;
  }
  table.table-editable td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 4px;
  }
  table.table-editable td.actions {
    border-top: 1px dashed var(--line);
    padding-top: 10px;
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
  }
  table.table-editable tfoot,
  table.table-editable tfoot tr {
    display: block;
    width: 100% !important;
  }
  table.table-editable tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 0;
  }
  table.table-editable tfoot td {
    padding: 0;
    width: auto !important;
    border: none;
  }
  table.table-editable tfoot td:empty {
    display: none;
  }
  table.table-editable tfoot td::before {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .envelope { grid-template-columns: 1fr; }
  .hero-card { grid-template-columns: 1fr; }
  .journey { columns: 1; }
  .pros-cons { grid-template-columns: 1fr; }
  .goal-nums { grid-template-columns: 1fr; }
  .custom-inputs { grid-template-columns: 1fr; }
  .card { padding: 18px; }
}

@media (max-width: 480px) {
  table.table-editable .freq-fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- Impression / export PDF ---------- */
@media print {
  body { background: #fff; font-size: 12px; }
  .sidebar, .no-print, #toasts { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; margin-left: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .doc section { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Ajouts module M1 (comptes et authentification) : styles absents de la
   maquette d'origine, necessaires aux gabarits serveur (rendu sans JS
   pour les messages d'erreur, l'indicateur de robustesse, la liste des
   sessions actives). BEM, coherent avec le reste du fichier. */
.field-error { color: #E5484D; font-size: 13px; margin: 4px 0 0; }
.password-strength { font-size: 13px; color: #8FA6C4; margin: 4px 0 0; }
.session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.session-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Ajouts securite (2FA, verification email, oeil sur le mot de passe) */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; padding-right: 76px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--ocean); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 6px 8px;
}
.password-toggle:hover { text-decoration: underline; }
.badge-warn { background: var(--tint-gold); color: var(--amber); }
.otp-input { font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Budget vs réalité : lecture claire, statuts colorés ---------- */
.cmp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.cmp-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 14px; border-radius: 99px; background: var(--color-info-bg); border: 1px solid var(--color-info-border); font-size: 13px; }
.cmp-cta { margin: 14px 0 0; }
.cmp-card { border-left: 4px solid var(--wants); }
.cmp-form .form-actions { align-self: end; }
.cmp-table-wrap { overflow-x: auto; margin-top: 6px; }
.cmp-table thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmp-table tbody tr:not(.cmp-impact):hover { background: var(--color-info-bg); }
.cmp-table .cmp-impact td { padding: 0 12px 16px; line-height: 1.55; border-top: 0; }
.cmp-var { font-weight: 700; }
.cmp-var-over, .cmp-var-slight_over { color: var(--color-danger); }
.cmp-var-under { color: var(--color-info); }
.cmp-var-on_track { color: var(--color-success); }
.cmp-diag { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmp-diag li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-info-border); background: var(--color-info-bg); }
.cmp-diag li.diag-watch { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.cmp-diag li.diag-alert { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.cmp-diag-text { flex: 1; line-height: 1.55; }
.cmp-kpis { margin: 20px 0; }
.cmp-progress { min-width: 150px; }
@media (max-width: 800px) { .cmp-kpis { grid-template-columns: 1fr; } }

/* ---------- Et si ? : même mise en page que la maquette ---------- */
.sim-head h1 { margin: 0 0 6px; }
.sim-head p { color: var(--muted); max-width: 720px; }
.sim-grid { align-items: start; margin-top: 20px; }
.sim-status { width: fit-content; padding: 8px 14px; border-radius: 99px; align-items: center; margin: 0 0 16px; }
.sim-table td:first-child { color: var(--ink-2); }
.sim-messages { margin-top: 16px; }
@media (max-width: 900px) { .sim-grid { grid-template-columns: 1fr; } }

/* ---------- Page /plan : lecture confortable (le PDF garde sa feuille) ---------- */
section.card.doc { font-size: 14px; line-height: 1.55; }
section.card.doc table.data-table { font-size: 14px; }
section.card.doc table.data-table th { font-size: 12px; text-transform: none; letter-spacing: 0; }
section.card.doc table.data-table td { padding: 8px 10px; }
section.card.doc .kv-label { font-size: 12px; text-transform: none; letter-spacing: 0; }
section.card.doc .kv-value { font-size: 14px; }
section.card.doc .section-head { font-size: 14px; text-transform: none; }
section.card.doc .title-banner h1 { font-size: 20px; }
section.card.doc .title-banner p, section.card.doc .doc-meta { font-size: 13px; }
section.card.doc .score-pill, section.card.doc .rule-tag, section.card.doc .badge { font-size: 12px; text-transform: none; }

/* Jauge d'epargne unique (SavingsGauge) : objectifs puis epargne libre, repere = cible du mois.
   Jamais rouge : depasser la cible d'epargne est une bonne nouvelle. */
.sgauge { display: grid; gap: 6px; }
.sgauge-track { position: relative; display: flex; height: 12px; background: var(--track); border-radius: 99px; overflow: visible; }
.sgauge-track > i { display: block; height: 100%; }
.sgauge-track > i:first-child { border-radius: 99px 0 0 99px; }
.sgauge-track > i:last-of-type { border-radius: 0 99px 99px 0; }
.sgauge-track > i:only-of-type { border-radius: 99px; }
.sg-target { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: var(--navy); border-radius: 2px; }
.sgauge-text { margin: 0; }
.sgauge-alert { padding: 10px 14px; margin: 0; }
.sgauge-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.sg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sg-dot.sg-mark { background: var(--navy); width: 3px; height: 12px; border-radius: 2px; }
.sgauge-compact { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.sgauge-short { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sgauge-empty .sgauge-short { color: var(--color-warning); }

/* Deux jauges d'epargne (DualSavingsGauge) : Objectifs puis Epargne libre. */
.sgd { display: grid; gap: 14px; }
.sgd-row { display: grid; gap: 4px; }
.sgd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sgd-title { font-weight: 700; font-size: 14px; }
.sgd-text, .sgd-extra, .sgd-total { margin: 0; }
.sgd-none .sgd-title { color: var(--muted); }
.sgd-compact { display: grid; gap: 6px; }
.sgd-compact .sgauge-compact { grid-template-columns: 88px 1fr auto; }
.sgd-mini-label { font-size: 12px; color: var(--muted); }

/* =========================================================
   Refonte visuelle 2026 : meme structure, meme balisage, memes
   classes. Ce bloc ne retire ni ne renomme rien : il redessine les
   composants existants (relief, couleur, typographie, mouvement) et
   ajoute les nouveaux (heros du tableau de bord, barre mobile, bascule
   de theme, celebrations). Mouvement desactive si l'utilisateur le demande.
   ========================================================= */
body { background: var(--bg); background-image: radial-gradient(900px 420px at 85% -120px, rgba(20, 184, 166, .09), transparent 70%); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; }
:root[data-theme="dark"] body { background-image: radial-gradient(900px 420px at 85% -120px, rgba(20, 184, 166, .14), transparent 70%); }
a { color: var(--ocean); }
::selection { background: rgba(20, 184, 166, .28); }

/* ----- Menu lateral ----- */
.sidebar { background: linear-gradient(180deg, #0A1F3D 0%, #07162B 100%); overflow-x: hidden; }
.sidebar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(380px 260px at -10% -4%, rgba(20, 184, 166, .26), transparent 70%), radial-gradient(300px 240px at 120% 100%, rgba(47, 111, 237, .18), transparent 70%); pointer-events: none; z-index: -1; }
.brand { letter-spacing: -.03em; gap: 12px; }
.brand svg { filter: drop-shadow(0 6px 14px rgba(20, 184, 166, .45)); }
.nav a { border-radius: 14px; padding: 10px 12px; font-weight: 600; transition: background .18s, color .18s, transform .18s; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: translateX(2px); }
.nav a.active { background: linear-gradient(90deg, rgba(20, 184, 166, .30), rgba(20, 184, 166, .06)); box-shadow: inset 3px 0 0 var(--teal); }
.nav a > svg { opacity: .9; }
.nav .step { border-color: rgba(255, 255, 255, .24); }
.nav .step.done { background: linear-gradient(135deg, #2DD4BF, #0E9F90); border-color: transparent; color: #04312b; box-shadow: 0 4px 10px rgba(20, 184, 166, .35); }
.nav-section { letter-spacing: .14em; font-weight: 700; color: #6F8BB0; }
.sidebar-foot { border-top-color: rgba(255, 255, 255, .1); }
.avatar { background: linear-gradient(135deg, var(--sand), var(--coral)); box-shadow: 0 6px 14px rgba(239, 91, 87, .3); }
.me { padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #D7E6F6; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; justify-content: center; transition: background .18s; }
.theme-toggle:hover { background: rgba(255, 255, 255, .12); }
.theme-toggle .ic { width: 16px; height: 16px; }
.theme-toggle .when-light { display: none; }
:root[data-theme="dark"] .theme-toggle .when-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .when-light { display: inline-flex; }
.theme-toggle--auth { position: fixed; top: 20px; right: 126px; z-index: 5; width: auto; background: var(--surface); border-color: var(--line); color: var(--ink); }
.theme-toggle--auth:hover { background: var(--soft); }

/* ----- Typographie et en-tetes ----- */
.main { max-width: 1240px; width: calc(100% - 256px); }
@media (max-width: 900px) { .main { width: 100%; } }
.page-head h1, .card-head h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.card-head h1 { font-size: clamp(24px, 3vw, 30px); }
.page-head p, .card-head p { color: var(--muted); }
.eyebrow { color: var(--teal); letter-spacing: .14em; font-size: 11.5px; }
:root[data-theme="dark"] .eyebrow { color: #4FE3D3; }
h2 { letter-spacing: -.02em; }

/* ----- Cartes ----- */
.card { box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s; }
a.card:hover, .rule-card:hover, .plan-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.kpi .kpi-label { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; }
.kpi .kpi-value { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.035em; line-height: 1.1; }
.kpi .kpi-sub { color: var(--muted); }
.dot { border-radius: 4px; }
.key-figure { font-weight: 800; letter-spacing: -.035em; }
.envelope .big { font-size: 26px; letter-spacing: -.035em; }

/* ----- Boutons ----- */
.btn { border-radius: 14px; min-height: 44px; padding: 10px 20px; font-weight: 700; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--navy-2), var(--navy)); box-shadow: 0 8px 20px rgba(10, 31, 61, .26); }
.btn-primary:hover { background: linear-gradient(135deg, #1A4378, var(--navy-2)); box-shadow: 0 12px 26px rgba(10, 31, 61, .32); }
.btn-teal { background: linear-gradient(135deg, #19CDB9, #0E9F90); color: #04312b; box-shadow: 0 8px 20px rgba(20, 184, 166, .32); }
.btn-teal:hover { background: linear-gradient(135deg, #2BDDC9, #12AE9F); }
.btn-secondary { border-radius: 14px; }
.btn-ghost { color: var(--ink); background: var(--surface); }
.btn-ghost:hover { background: var(--soft); border-color: #C9C2B6; }
.btn-danger { background: var(--surface); }
.btn-sm { border-radius: 11px; min-height: 34px; }
:root[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #1B4A8C, #12335F); }
:root[data-theme="dark"] .btn-ghost:hover { border-color: #33497B; }
.icon-btn { border-radius: 11px; }

/* ----- Formulaires ----- */
.input { border-radius: 14px; border-width: 1.5px; min-height: 44px; padding: 10px 14px; background: var(--surface); color: var(--ink); }
.input:hover { border-color: #CFC7B9; }
.input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20, 184, 166, .16); }
:root[data-theme="dark"] .input:hover { border-color: #2D4468; }
.input::placeholder { color: #8A97A8; }
select.input { cursor: pointer; }
.money.lg .input { font-size: 30px; border-radius: 18px; }
.field, .form-field > label { color: var(--ink-2); }
.btn:focus-visible, a:focus-visible, .chip:focus-visible, .field-checkbox:focus-within { outline-color: var(--teal); outline-width: 3px; }
input[type=checkbox], input[type=radio] { accent-color: var(--teal); width: 18px; height: 18px; }
input[type=range] { accent-color: var(--teal); }
.otp-input { border-radius: 16px; letter-spacing: .4em; }

/* ----- Pastilles, puces, alertes ----- */
.badge { padding: 4px 11px; letter-spacing: .01em; }
.chip { border-radius: 99px; background: var(--surface); transition: all .18s; }
.chip:hover { border-color: var(--teal); transform: translateY(-1px); }
.chip.on { background: var(--tint-teal); color: #0E8F81; border-color: var(--teal); }
:root[data-theme="dark"] .chip.on { color: #5FE9DA; }
.tag { background: var(--tint-blue); }
.alert { border-radius: 18px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(10, 31, 61, .03); }
.alert-good { border-left: 4px solid var(--green); }
.alert-warn { border-left: 4px solid var(--sand); }
.alert-bad { border-left: 4px solid var(--coral); }
.alert-info { border-left: 4px solid var(--ocean); }

/* ----- Tableaux ----- */
.table th { font-size: 11px; letter-spacing: .1em; padding: 12px; }
.table td { padding: 14px 12px; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--soft); }
.table tfoot td { border-top-color: var(--line); }
.cmp-table tbody tr:not(.cmp-impact):hover { background: var(--soft); }
.cmp-chip { background: var(--tint-blue); border-color: transparent; }
.cmp-diag li { border-radius: 16px; }

/* ----- Barres de progression : relief et mouvement ----- */
.progress { height: 10px; background: var(--track); }
.progress > i { background: linear-gradient(90deg, #4DDCCB, var(--teal)); transform-origin: left center; animation: barGrow 1s cubic-bezier(.2, .8, .2, 1) both; }
.progress.warn > i { background: linear-gradient(90deg, #FFC862, var(--sand)); }
.progress.over > i { background: linear-gradient(90deg, #FF8B87, var(--coral)); }
.bar-line .track, .splitbar { background: var(--track); }
.bar-line .track i { animation: barGrow 1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center; }
.splitbar { height: 14px; gap: 3px; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sgauge-track { height: 14px; }
.sg-goals { background: linear-gradient(90deg, #A18BFF, var(--violet)); transform-origin: left center; animation: barGrow 1s cubic-bezier(.2, .8, .2, 1) both; }
.sg-free { background: linear-gradient(90deg, #FFC862, var(--sand)); transform-origin: left center; animation: barGrow 1s .1s cubic-bezier(.2, .8, .2, 1) both; }
.sg-target { background: var(--ink); }
.sg-dot.sg-mark { background: var(--ink); }
.sgd-title { font-weight: 800; }

/* ----- Auth ----- */
.auth-hero { background: radial-gradient(900px 520px at 8% 112%, rgba(20, 184, 166, .42), transparent 62%), radial-gradient(760px 460px at 108% -8%, rgba(47, 111, 237, .38), transparent 62%), linear-gradient(160deg, #0A1F3D, #07162B); }
.auth-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; }
.formula span { backdrop-filter: blur(6px); }
.auth-panel { background: var(--bg); }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 30px; box-shadow: var(--shadow-lg); max-width: 460px; }
.tabs { border-radius: 14px; background: var(--track); }
.tabs button.on, .tabs a.on { border-radius: 11px; }
.hero-whale { opacity: .1; }

/* ----- Page tableau de bord : heros ----- */
.dash-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: stretch; background: linear-gradient(135deg, #0A1F3D 0%, #12335F 58%, #0E6B75 125%); color: #fff; border: 0; box-shadow: var(--shadow-lg); overflow: hidden; position: relative; padding: clamp(22px, 3vw, 34px); }
.dash-hero::before { content: ""; position: absolute; right: -90px; top: -110px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 184, 166, .45), transparent 65%); }
.dash-hero::after { content: ""; position: absolute; left: 25%; bottom: -170px; width: 460px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 111, 237, .32), transparent 70%); }
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero .eyebrow { color: #8FB0D6; margin: 0; }
.dash-hero-figure { font-size: clamp(42px, 6vw, 62px); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }
.dash-hero-figure small { font-size: 20px; font-weight: 700; opacity: .7; margin-left: 8px; letter-spacing: 0; }
.dash-hero-figure.over { color: #FFB1AE; }
.dash-hero-pace { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; max-width: 100%; }
.dash-hero-bar { position: relative; margin-top: 22px; }
.dash-hero-bar .progress { height: 14px; background: rgba(255, 255, 255, .16); }
.dash-hero-bar .progress > i { background: linear-gradient(90deg, #4DDCCB, #5B93FF); }
.dash-hero-bar .progress.over > i { background: linear-gradient(90deg, #FF8B87, var(--coral)); }
.pace-mark { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px rgba(10, 31, 61, .35); transform: translateX(-1px); }
.dash-hero-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #B7CCE6; margin-top: 8px; flex-wrap: wrap; }
.dash-hero-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.dash-hero-mini div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.dash-hero-mini small { display: block; color: #9BB6D8; font-size: 12px; }
.dash-hero-mini b { font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-hero-chart { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; padding: 16px 16px 8px; display: flex; flex-direction: column; min-width: 0; }
.dash-hero-chart h2 { font-size: 15px; color: #fff; }
.dash-hero-chart p { font-size: 12.5px; color: #9BB6D8; margin: 2px 0 6px; }
.pace-svg { width: 100%; height: auto; display: block; }
.pace-svg .grid-l { stroke: rgba(255, 255, 255, .12); stroke-dasharray: 3 5; }
.pace-svg .tick { fill: #8FB0D6; font-size: 10px; }
.pace-svg .ideal { stroke: rgba(255, 255, 255, .5); stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.pace-svg .real { stroke: #5EE6D4; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawLine 1.6s .2s ease forwards; }
.pace-svg .area { fill: url(#paceGrad); opacity: 0; animation: fadeIn .8s 1s ease forwards; }
.pace-svg .now { fill: #5EE6D4; stroke: #0A1F3D; stroke-width: 2.5; }
.pace-svg .now-halo { fill: rgba(94, 230, 212, .25); }
.pace-svg .now-label { fill: #fff; font-size: 12px; font-weight: 800; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
.dash-hero-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #9BB6D8; padding: 0 4px 8px; }
.dash-hero-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.streak-badge { background: linear-gradient(135deg, #FFE3A6, #FFC24D); color: #6B4400; box-shadow: 0 6px 16px rgba(245, 165, 36, .35); font-weight: 800; }
.streak-badge::before { content: "\1F525"; margin-right: 6px; }
.donut { filter: drop-shadow(0 6px 14px rgba(10, 31, 61, .12)); }

/* ----- Barre de navigation mobile (ajout : le menu hamburger reste) ----- */
.tabbar { display: none; }
@media (max-width: 900px) {
  .dash-hero { grid-template-columns: 1fr; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; padding: 8px; border-radius: 24px; background: rgba(10, 31, 61, .94); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 17px; color: #9FB6D3; font-size: 10.5px; font-weight: 700; text-decoration: none; min-width: 0; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a.active { background: rgba(20, 184, 166, .26); color: #fff; }
  .tabbar a .ic { width: 21px; height: 21px; }
  .main { padding-bottom: 110px; }
  #toasts { bottom: 96px; }
}
@media (max-width: 640px) {
  .dash-hero-mini { gap: 8px; }
  .dash-hero-mini div { padding: 10px; border-radius: 14px; }
  .dash-hero-mini b { font-size: 13.5px; }
  .auth-card { padding: 22px; border-radius: 22px; }
}

/* ----- Toasts et celebrations ----- */
.toast { border-radius: 16px; background: linear-gradient(135deg, var(--navy-2), var(--navy)); box-shadow: var(--shadow-lg); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: confettiFall 2.4s ease-in forwards; }
@keyframes confettiFall { to { transform: translateY(105vh) rotate(560deg); opacity: .9; } }
.celebrate-banner { animation: popIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes popIn { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ----- Entree douce des pages ----- */
.main > *, .stack > * { animation: riseIn .5s ease both; }
.stack > *:nth-child(2) { animation-delay: .05s; }
.stack > *:nth-child(3) { animation-delay: .1s; }
.stack > *:nth-child(4) { animation-delay: .15s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pace-svg .real { stroke-dashoffset: 0; }
  .pace-svg .area { opacity: 1; }
  .confetti { display: none; }
}

/* ----- Sombre : retouches des composants a couleur fixe ----- */
:root[data-theme="dark"] .preset, :root[data-theme="dark"] .btn-ghost, :root[data-theme="dark"] .chip { color: var(--ink); }
:root[data-theme="dark"] .scenario, :root[data-theme="dark"] .tabs button.on, :root[data-theme="dark"] .tabs a.on { color: var(--ink); }
:root[data-theme="dark"] .field-error { color: #FF9B98; }
:root[data-theme="dark"] .sg-target, :root[data-theme="dark"] .sg-dot.sg-mark { background: #EAF1FA; }
:root[data-theme="dark"] .session-warning-banner { color: var(--color-warning); }

@media print {
  .tabbar, .theme-toggle { display: none !important; }
  .dash-hero { background: #fff; color: #000; box-shadow: none; }
}

/* Menu mobile ouvert : la barre du bas et la bulle du chat s'effacent pour ne rien masquer du menu. */
body:has(.nav-toggle:checked) .tabbar,
body:has(.nav-toggle:checked) .advisor { display: none; }

/* Charges / Loisirs : le reel du mois est une valeur calculee (journal des depenses), pas un champ de saisie. */
.real-value { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.add-expense-link:hover, .add-expense-link:focus-visible { text-decoration: underline; }
#charges-table th, #charges-table td { padding-left: 8px; padding-right: 8px; }
#charges-table tfoot td, #charges-table tfoot .muted { white-space: normal; }
#charges-table tfoot td.num { text-align: right; }

#charges-table tbody td { vertical-align: middle; }
#charges-table td.real-cell { text-align: right; }
.real-readout { display: block; padding: 0; text-align: right; cursor: default; font-weight: 700; }
.real-value.is-empty { font-weight: 400; font-size: 12px; color: var(--muted, #8a97a8); }
.add-expense-link { display: block; margin-top: 4px; text-align: right; font-size: 12px; font-weight: 700; color: var(--teal, #14b8a6); text-decoration: none; }
.reco-line { margin-top: 4px; font-size: 11.5px; color: var(--muted, #8a97a8); text-align: right; }
.reco-line b { color: var(--ocean); }
.table-note { margin: 12px 4px 0; }
.expense-item { font-weight: 700; color: var(--ink); }