/* 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. */
  /* Fond assombri le 2026-10-06 (demande de Nicolas) : l'ardoise de la marque (#1E293B) reste
     la couleur des cartes les plus claires, la page passe dessous pour que les cartes
     ressortent encore. */
  --bg: #121A28;
  --bg-inset: #0E1521;
  --bg-hover: #243247;
  --card: #1E2A3D;
  --card-inner: #151E2D;
  --border: #2F4058;
  --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).
     Vert repris de la landing page le 2026-09-22 (meme teinte/saturation que #2E6B4F,
     seule la luminosite change par variable pour rester lisible sur chaque fond — calcule :
     4,8:1 sur --bg, contre 5,3:1 avant ; ecart juge acceptable par Nicolas). */
  --accent: #4AAB7E;
  --accent-strong: #3A8864;
  --accent-text: #70C29C;
  --accent-soft: rgba(74, 171, 126, 0.14);
  /* Bout vert du degrade mixte or->vert de `.btn.primary` (04-formulaires.css) — le style
     `.btn.positive`, tout dore ou tout vert selon le bouton, a ete retire le 2026-09-22
     (retour Nicolas : ses deux seuls usages, "Enregistrer" et "Enregistrer l'ordre", n'avaient
     rien de plus "positif" que n'importe quel autre bouton "Enregistrer"). --accent-btn-to est
     le vert EXACT de la landing (#2E6B4F, calcule : blanc dessus fait 6,3:1) ;
     --accent-btn-bright est le reflet, plus clair que le vert lui-meme. */
  --accent-btn-bright: #54B589;
  --accent-btn-from: #3A8864;
  --accent-btn-to: #2E6B4F;
  --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: #4AAB7E;
  --cat-vie-text: #70C29C;
  --header-bg: rgba(18, 26, 40, 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 est l'or EXACT de la landing page (#C08A2E, 2026-09-22) : blanc dessus fait
     3,0:1, proche du 3,2:1 d'avant — le degrade (--gold-btn-bright plus clair) porte le texte
     sur sa moitie superieure, plus contrastee. */
  --gold-btn-bright: #E5C794;
  --gold-btn: #C08A2E;
  --btn-primary-from: var(--gold-btn-bright);
  --btn-primary-to: var(--gold-btn);
  --btn-primary-border: var(--gold-btn);
  --btn-primary-text: #ffffff;
  /* Degrade mixte de `.btn.primary` (04-formulaires.css), troisieme reglage le 2026-09-22 :
     Nicolas voulait le motif fonce-clair-fonce de l'origine (pas un simple degrade lineaire
     dore->vert) mais avec le plateau clair atteint plus vite ET plus de largeur laissee au
     dore avant que le vert ne domine. --gold-btn-dark et --gold-btn-plateau sont theme-
     invariants comme --gold-btn-bright/--gold-btn ci-dessus (meme raison : ce sont les tons
     exacts choisis a l'oeil sur les maquettes, pas des roles qui suivent le theme). */
  --gold-btn-dark: #A47728;
  --gold-btn-plateau: #DBB26B;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  /* L'écart entre deux blocs d'une page (cartes, rangées, colonnes), dans les deux sens. Le
     CONTENEUR le porte par son `gap` ; un bloc n'y ajoute jamais sa propre marge, sans quoi
     les deux s'additionnent (38 à 42 px mesurés là où trois rangées en portaient une). */
  --ecart-blocs: var(--space-4);
  --sidebar-width: 15rem;
  /* UNE SEULE police pour tout ce qui doit se lire vite (2026-08-26) : Inter reste seul sur les
     chiffres, tableaux, boutons et libelles denses. `--font-serif` (Playfair Display) avait ete
     supprimee car elle habillait aussi les gros chiffres et le nom du produit, ce qui melangeait
     deux dessins de lettres partout a l'ecran.
     Reintroduite le 2026-09-22, identite reprise de la landing page : Newsreader habille
     UNIQUEMENT le nom du produit (`.sidebar-title`, degrade or/vert comme sur la landing) et
     le titre de la page active, affiche une seule fois dans la topbar (`.topbar-titre`, lu
     depuis `.page-head h1` — voir 03 — qui reste dans le DOM mais invisible pour ne pas le
     repeter) — jamais les chiffres, tableaux, formulaires ou boutons, qui restent en Inter pour
     rester lisibles vite. Verifie sur une comparaison cote a cote avant d'etre valide par
     Nicolas : Newsreader sur un gros montant ou une date de tableau le rend moins scannable. */
  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Newsreader', serif;
  /* --gold reste le ton decoratif (soulignage de titre de page, mises en avant) : meme
     teinte/saturation que l'or de la landing, luminosite choisie pour retomber sur le meme
     contraste qu'avant (2026-09-22, calcule : 6,0:1 sur --bg contre 5,95:1 avant). */
  --gold: #D29C42;
  --gold-strong: #DAAE63;
  --gold-soft: rgba(210, 156, 66, 0.16);
  /* Le rôle « réservé à une offre » : l'étoile premium et son invitation. Un alias et non une
     teinte, pour suivre --gold-strong dans les deux thèmes. */
  --premium: var(--gold-strong);
  /* Un événement en attente de confirmation : le dégradé or-vert du bouton principal, très
     transparent. Construit sur --gold-btn et --accent, il suit les deux thèmes. */
  --en-attente-fond: linear-gradient(90deg,
    color-mix(in srgb, var(--gold-btn) 16%, transparent),
    color-mix(in srgb, var(--accent) 10%, transparent));
  /* Teintes des familles du graphique patrimoine : couleurs de DONNÉES, identiques dans les
     deux thèmes (une couche qui change de teinte au changement de thème brouillerait les
     repères). Chaque couche d'une famille en prend une nuance (`socle/nuance.js`). */
  --famille-immobilier: #A9744F;
  --famille-placements: #34795A;
  --famille-disponible: #9CC3AE;
  --famille-entreprises: #C99A3E;
  --famille-autres: #B5A68C;
  --famille-emprunts: #7A8796;
  --barre-laterale-fond: var(--bg);
  /* La carte qu'on montre (captures, page d'accueil) : un fond à peine relevé dans ce thème. */
  --carte-vitrine-fond: linear-gradient(180deg, #223047 0%, #1A2536 100%);
  font-family: var(--font-sans);
}
:root[data-theme="light"] {
  color-scheme: light;
  /* La carte qu'on montre : un crème léger, la couleur de la marque. */
  --carte-vitrine-fond: linear-gradient(180deg, #FFFDF8 0%, #F6EFE2 100%);
  /* Fonds et bordures chauds, crème et sable (2026-10-13) : le gris bleuté d'avant n'était pas
     la couleur de la marque, que portent déjà le logo, l'or et le vert. */
  --bg: #F4F1EB;
  --bg-inset: #EEE9E0;
  --bg-hover: #E8E1D5;
  --barre-laterale-fond: #FBF7EF;
  --card: #ffffff;
  --card-inner: #FAF7F1;
  --border: #E8DFD0;
  --border-strong: #D3C7B3;
  --text: #1E293B;
  --text-strong: #0F172A;
  --muted: #64748B;
  /* Vert repris de la landing page le 2026-09-22 (meme teinte/saturation que #2E6B4F). Ce
     ton porte aussi le bout vert du degrade mixte or->vert de `.btn.primary` (texte blanc a
     5,2:1 — calcule, contre 4,47:1 avant) : pas besoin d'un ton distinct, celui-ci fait les
     deux jobs. */
  --accent: #34795A;
  --accent-strong: #285D44;
  --accent-text: #285D44;
  --accent-soft: rgba(52, 121, 90, 0.10);
  /* Pas de reflet distinct ici (regle inchangee du 2026-08-30) : le degrade a 3 tons n'est
     demande que pour le dore. --accent-btn-bright reprend la valeur du haut du degrade
     existant, donc la 3e etape ne change rien au rendu. */
  --accent-btn-bright: #3A8864;
  --accent-btn-from: #3A8864;
  --accent-btn-to: #34795A;
  --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: #34795A;
  --cat-vie-text: #285D44;
  --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);
  /* Meme or que le theme sombre (2026-09-22, identite de la landing) : teinte/saturation
     identiques, luminosite choisie pour retomber sur le meme contraste qu'avant (calcule :
     2,1:1 sur --bg contre 2,25:1 avant — usage decoratif uniquement, jamais pour du texte). */
  --gold: #D29C42;
  --gold-strong: #A57627;
  --gold-soft: rgba(210, 156, 66, 0.12);
  --gold-btn-bright: #E5C794;
  --gold-btn: #C08A2E;
  --btn-primary-from: var(--gold-btn-bright);
  --btn-primary-to: var(--gold-btn);
  --btn-primary-border: var(--gold-btn);
  --btn-primary-text: #ffffff;
  --gold-btn-dark: #A47728;
  --gold-btn-plateau: #DBB26B;
}
* { 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 { 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; }