/* ==========================================================================
Épargnia — Tokens de design
--------------------------------------------------------------------------
Ce fichier COMPLÈTE styles/global.css : il n'écrase aucune variable
existante, il ajoute les échelles qui manquaient (espacement, typo,
bordures douces, états). À charger APRÈS global.css.
Règle simple pour la suite : plus aucune valeur en dur dans le CSS.
Si une valeur n'existe pas ici, on l'ajoute ici d'abord.
========================================================================== */
:root {
/* ---- Espacement -------------------------------------------------------
Une seule échelle. C'est elle qui fait la différence entre « propre »
et « fait maison » : plus de 7px ici et 13px là. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
/* ---- Rayons -----------------------------------------------------------
--radius (20px) et --radius-sm (12px) viennent déjà de global.css. */
--radius-xs: 8px;
--radius-md: 18px;
--radius-lg: 22px;
--radius-full: 999px;
/* ---- Typographie ------------------------------------------------------ */
--text-xs: 11.5px; /* méta, dates */
--text-sm: 12.5px; /* labels secondaires */
--text-base: 14px; /* corps */
--text-md: 15px; /* titres de carte */
--text-lg: 19px; /* titre d'écran */
--text-xl: 24px;
--text-2xl: 38px; /* solde */
/* ---- Couleurs complémentaires ----------------------------------------
Les couleurs de marque restent celles de global.css. */
--border-soft: #F5E7CC; /* bordure de carte (plus douce que --border) */
--border-strong: #F2E3C4; /* bordure de bouton secondaire */
--surface-warm: #FEF3D6; /* fond d'icône, piste de barre de progression */
--muted-2: #9A8460; /* texte tertiaire */
--muted-3: #B5A484; /* icône de navigation inactive */
/* ---- Ombres ----------------------------------------------------------- */
--shadow-raised: 0 10px 28px rgba(255, 107, 44, 0.28);
/* ---- Dégradé de marque ------------------------------------------------ */
--gradient-brand: linear-gradient(135deg, #FF6B2C 0%, #FF8C00 100%);
/* ---- Ergonomie -------------------------------------------------------- */
--tap: 44px; /* hauteur minimale d'une cible tactile */
}
/* --------------------------------------------------------------------------
Icônes
Le sprite est injecté par scripts/icons.js.
Usage :
La taille suit celle du texte du parent (1.25em) ; forcez-la avec
.ic--sm / .ic--lg ou une règle locale si besoin.
-------------------------------------------------------------------------- */
.ic {
width: 1.25em;
height: 1.25em;
flex-shrink: 0;
vertical-align: -0.18em; /* alignement sur la ligne de base en usage inline */
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.ic--sm { width: 1em; height: 1em; }
.ic--lg { width: 1.5em; height: 1.5em; }
.ic--bold { stroke-width: 2.3; }
/* --------------------------------------------------------------------------
Compatibilité avec l'existant
Les conteneurs d'icônes de app.css étaient dimensionnés pour des émojis,
c'est-à-dire en font-size. On fixe donc une taille explicite pour les SVG
qui les remplacent, sinon ils héritent d'un 1.25em calculé sur 28 ou 52px.
Ce bloc disparaîtra quand app.css sera entièrement migré.
-------------------------------------------------------------------------- */
.nav-icon .ic { width: 22px; height: 22px; }
.tab-icon .ic { width: 17px; height: 17px; }
.cc-icon .ic { width: 26px; height: 26px; }
.recap-empty-icon .ic { width: 44px; height: 44px; stroke-width: 1.5; }
.solde-toggle-icon .ic { width: 16px; height: 16px; }
.modal-close-btn .ic { width: 14px; height: 14px; stroke-width: 2.3; }
.form-icon .ic { width: 44px; height: 44px; stroke-width: 1.6; }
.faq-cat-icon .ic { width: 20px; height: 20px; stroke-width: 2.1; }
.section-title .ic,
.chart-title .ic,
.recap-section-title .ic { width: 18px; height: 18px; }
/* Les conteneurs qui n'affichaient qu'un émoji doivent maintenant centrer
un élément de type inline-block. */
.cc-icon,
.nav-icon,
.tab-icon,
.solde-toggle-icon { display: inline-flex; align-items: center; justify-content: center; }
.recap-empty-icon { display: flex; justify-content: center; }
/* --------------------------------------------------------------------------
Pastille d'icône colorée
Composant partagé : cartes fonctionnalités (index.html), réassurance,
catégories FAQ. Un badge carré arrondi teinté + icône SVG assortie.
Usage :