/* SOCLE — variables de couleur, base de page, typographie
 *
 * Tranche 01 de public/styles.css, decoupe le 2026-08-24. Les fichiers sont
 * NUMEROTES parce que l'ordre de chargement compte : une regle plus bas l'emporte sur une
 * regle de meme portee plus haut. Ne pas reordonner les <link> de index.html.
 */
:root {
  color-scheme: dark;
  /* Identite de marque posee le 2026-08-30 (Bloc 8) : --bg/--text viennent directement des
     couleurs donnees par Nicolas ; les autres gris sont derives de l'echelle Tailwind slate,
     sur laquelle #1E293B (800) et #E2E8F0 (200) tombent deja pile — voir
     docs/superpowers/specs/2026-08-30-bloc8-palette-identite-design.md. */
  --bg: #1E293B;
  --bg-inset: #17212F;
  --bg-hover: #29394D;
  --card: #263449;
  --card-inner: #1B2636;
  --border: #37485F;
  --border-strong: #4B5F78;
  --text: #E2E8F0;
  --text-strong: #F8FAFC;
  --muted: #94A3B8;
  /* --accent porte les indicateurs et textes "positifs" (liens, onglet actif, courbes de
     gain) — --green a disparu, fusionne ici (Bloc 8). Revu le 2026-08-30 : le bouton
     principal (.btn.primary) est passe au dore (voir --btn-primary-*), --accent ne colore
     donc plus QUE ce qui est reellement positif/epargne — un nouveau style .btn.positive
     (--accent-btn-*) sert aux boutons qui font grandir l'epargne. Cuivre brosse en sombre,
     vert en clair — pas la meme teinte dans les deux themes, deliberement (metal chaud sur
     fond nuit, plante sur fond clair). Nicolas a garde le cuivre tel quel le 2026-08-30. */
  --accent: #D97757;
  --accent-strong: #B46751;
  --accent-text: #DF8B70;
  --accent-soft: rgba(217, 119, 87, 0.14);
  /* Ton dedie au FOND des boutons .btn.positive : plus profond que --accent pour que le texte
     blanc y reste lisible (calcule : blanc sur #D97757 seul ne fait que 3,12:1). Degrade a 3
     tons comme .btn.primary (retour Nicolas 2026-08-30, "meme degrade brillant que le dore") —
     --accent-btn-bright est le reflet, franchement plus clair que le cuivre lui-meme. */
  --accent-btn-bright: #E89473;
  --accent-btn-from: #C97050;
  --accent-btn-to: #B85F3F;
  --orange: #C9925F;
  --orange-text: #E0B084;
  --purple: #A78BC2;
  --purple-soft: rgba(167, 139, 194, 0.14);
  --red: #f0554c;
  --red-text: #ff8079;
  /* Avertissement (cours périmé, synchro partielle, position non cotée) — ce rôle MANQUAIT :
     ses quatre usages tombaient tous sur un repli en dur (#d98324), donc
     identique dans les deux thèmes. Sur le fond clair, ce repli ne faisait que 2,67:1, sous
     la norme de lisibilité (4,5:1). Les deux valeurs ci-dessous sont choisies pour le
     contraste : 6,37:1 sur la page sombre, 5,40:1 sur la page claire. */
  --warn: #D9A05F;
  --pink: #D98BA0;
  --cat-vie: #D97757;
  --cat-vie-text: #DF8B70;
  --header-bg: rgba(30, 41, 59, 0.92);
  --overlay: rgba(3, 5, 8, 0.78);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.34);
  --shadow-card-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.26);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-btn-hover: 0 4px 14px rgba(0, 0, 0, 0.32);
  /* QUATRE arrondis, et rien d'autre (2026-08-27). Avant ce jour, trois variables
     coexistaient avec 65 arrondis ecrits en dur dans les feuilles : baisser une variable
     rendait les cartes plus carrees pendant que chaque boite interieure gardait le sien.
     Tout est desormais ramene ici. L'echelle descend d'un cran a chaque niveau. */
  --radius-card: 10px;  /* cartes, modales, grands panneaux */
  --radius-input: 6px;  /* champs de saisie et petites boites */
  --radius-btn: 6px;    /* boutons */
  --radius-xs: 4px;     /* champs serres en tableau, pastilles carrees */
  /* Bouton principal repasse au dore le 2026-08-30 (retour Nicolas : "la majorite des boutons
     doivent etre dores"). Degrade a 3 tons pour un effet "brillant" plutot qu'un aplat mat —
     --gold-btn-bright/--gold-btn sont theme-invariants comme --gold. */
  --gold-btn-bright: #E8C888;
  --gold-btn: #B8863E;
  --btn-primary-from: var(--gold-btn-bright);
  --btn-primary-to: var(--gold-btn);
  --btn-primary-border: var(--gold-btn);
  --btn-primary-text: #ffffff;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --sidebar-width: 15rem;
  /* UNE SEULE police (2026-08-26). `--font-serif` (Playfair Display) a ete supprimee : elle
     habillait les titres de page, le logo, le nom du produit, l annee des cartes d evenement
     et les gros chiffres, ce qui faisait cohabiter deux dessins de lettres a l ecran. */
  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --gold: #C5A059;
  --gold-strong: #D3B378;
  --gold-soft: rgba(197, 160, 89, 0.16);
  font-family: var(--font-sans);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F5F7;
  --bg-inset: #EFF1F4;
  --bg-hover: #E7EAEE;
  --card: #ffffff;
  --card-inner: #F7F8FA;
  --border: #E2E6EB;
  --border-strong: #CBD2DB;
  --text: #1E293B;
  --text-strong: #0F172A;
  --muted: #64748B;
  /* Vert revu le 2026-08-30 (retour Nicolas : l'original etait terne, degrade "en noir"). Ce
     ton sert aussi de fond aux boutons .btn.positive (texte blanc a 4,47:1 — calcule, pas
     suppose) : pas besoin d'un ton distinct pour le bouton, celui-ci fait les deux jobs. */
  --accent: #4B8268;
  --accent-strong: #3B6C55;
  --accent-text: #3B6C55;
  --accent-soft: rgba(75, 130, 104, 0.10);
  /* Pas de reflet distinct ici : Nicolas a dit "le vert on laisse tel quel" (2026-08-30), le
     degrade a 3 tons n'est demande que pour le cuivre. --accent-btn-bright reprend la valeur
     du haut du degrade existant, donc la 3e etape ne change rien au rendu. */
  --accent-btn-bright: #5B9478;
  --accent-btn-from: #5B9478;
  --accent-btn-to: #4B8268;
  --orange: #A97A45;
  --orange-text: #7C5A32;
  --purple: #7C6296;
  --purple-soft: rgba(124, 98, 150, 0.12);
  --red: #d13a32;
  --red-text: #b52a22;
  --warn: #8A5A1E;
  --pink: #B4677E;
  --cat-vie: #4B8268;
  --cat-vie-text: #3B6C55;
  --header-bg: rgba(244, 245, 247, 0.88);
  --overlay: rgba(15, 18, 26, 0.45);
  --shadow-card: 0 1px 2px rgba(20, 24, 32, 0.04), 0 10px 28px rgba(20, 24, 32, 0.07);
  --shadow-card-sm: 0 1px 2px rgba(20, 24, 32, 0.04), 0 4px 14px rgba(20, 24, 32, 0.05);
  --shadow-btn: 0 1px 2px rgba(20, 24, 32, 0.07);
  --shadow-btn-hover: 0 4px 14px rgba(20, 24, 32, 0.1);
  --gold: #C5A059;
  --gold-strong: #AD8846;
  --gold-soft: rgba(197, 160, 89, 0.12);
  --gold-btn-bright: #E8C888;
  --gold-btn: #B8863E;
  --btn-primary-from: var(--gold-btn-bright);
  --btn-primary-to: var(--gold-btn);
  --btn-primary-border: var(--gold-btn);
  --btn-primary-text: #ffffff;
}
* { box-sizing: border-box; }

/* Chantier 2 (animations, 2026-08-30) : quiconque a demande moins de mouvement au systeme
   n'a pas a re-decouvrir chaque effet un par un. Coupe tout ce qui est purement decoratif
   (reflet, apparition, coche qui "pop", chiffre qui compte, trait qui glisse) ; garde les
   transitions fonctionnelles courtes (hover, focus) qui aident a suivre l'etat, pas a plaire. */
@media (prefers-reduced-motion: reduce) {
  .btn.primary::before, .btn.positive::before { transition: none; display: none; }
  .panel.active .card { animation: none; }
  input[type="checkbox"]:checked::after { animation: none; }
  .subtab-indicateur { transition: opacity 0.15s ease; }
}

/* Inter dessine ses chiffres a largeur VARIABLE par defaut : dans une colonne de montants,
   « 1 111 » est bien plus etroit que « 8 888 » et la colonne ondule d une ligne a l autre.
   Les tableaux et les valeurs mises en avant passent donc en chiffres a largeur fixe. Les
   grands chiffres isoles (.hero-metric, .timeline-year, .chart-headline) le demandaient deja
   chacun de leur cote. */
table, .kpi .value { font-variant-numeric: tabular-nums; }