/* ============================================================ Finances H2O — Design Tokens Charte graphique — Finances H2O ============================================================ */ :root { /* --- Palette « Fjord » --- Le Saguenay est un fjord : son eau est vert-noir, pas bleue. Trois couleurs et une regle. Le fjord pour l'encre et la structure ; le laiton pour l'action, et rien d'autre ; la sauge pour un chiffre positif. Tout le reste en gris chaud, sur du papier. */ --color-primary-900: #0f2a2e; /* bleu très foncé — texte, contrastes forts */ --color-primary-800: #17383d; /* bleu foncé — sections sombres */ --color-primary-700: #1f4a50; /* bleu médium foncé */ --color-primary-500: #2f6f74; /* bleu principal — liens, boutons secondaires */ --color-primary-100: #d9e4e2; /* bleu très clair — arrière-plans subtils */ --color-primary-50: #eaf0ee; /* bleu presque blanc — fond de page alternatif */ --color-accent-700: #6f5320; /* terracotta foncé — survol des boutons pleins. 6,40 avec du blanc (WCAG AA) */ --color-accent-600: #8a6a2c; /* terracotta — boutons CTA. 5,26 avec du blanc dessus (WCAG AA) */ --color-accent-500: #a8853f; /* orangé clair — DÉCOR SEULEMENT (3,39 sur blanc : jamais du texte ni un fond de bouton sur clair. Sur bleu nuit, il passe.) */ --color-accent-100: #e6d8b6; /* fond très clair pour accents */ /* Bordure de champ de formulaire. neutral-200 donnait 1,23 sur blanc — sous le 3:1 exige par WCAG 1.4.11 pour la limite d'un controle. */ --color-border-input: #77827e; /* 3,29 sur blanc */ /* Bordure d'un element INTERACTIF (carte cliquable, controle). WCAG 1.4.11 demande 3:1 pour la limite d'un composant : neutral-200 ne donnait que 1,32 sur le papier — le contour etait invisible, et c'est une des raisons pour lesquelles les cartes paraissaient fades. Les separateurs de texte, eux, restent en neutral-200 : la norme ne les vise pas et un filet trop marque hacherait la page. */ --color-border-actif: #8a8173; /* 3,38 sur papier · 3,65 sur carte */ --color-neutral-900: #1b1f1e; /* presque noir — texte principal */ --color-neutral-700: #474e4c; /* gris foncé — texte secondaire */ --color-neutral-500: #58615e; /* gris moyen — metadata. 5,57 sur blanc, 5,32 sur carte (WCAG AA) */ --color-neutral-200: #d8d2c6; /* gris clair — bordures, séparateurs */ --color-neutral-100: #ece7dd; /* gris très clair — fond de carte */ --color-neutral-50: #fbf9f4; --color-page: #f4f0e8; /* papier — le fond de page, plus chaud que les cartes */ /* blanc pur — fond principal */ --color-success: #3a6b4e; /* vert — confirmations. 5,32 sur blanc (WCAG AA) */ --color-warning: #7a5a10; /* ambre — avertissements. 5,54 sur blanc (WCAG AA) */ --color-error: #8e3b2f; /* rouge — erreurs de formulaire. 5,47 sur blanc (WCAG AA) */ /* --- Blocs de couleur pour le mode accessible --- Mode accessible: contraste plus fort, couleurs plus saturées, textures/sépareurs visuels, typographie légèrement plus grande */ --color-accessible-primary: #0f2a2e; --color-accessible-bg: #fbf9f4; --color-accessible-text: #1b1f1e; --color-accessible-text-alt:#474e4c; /* --- Blocs pour le mode approfondi --- Mode approfondi: plus de détail, sections plus denses, colorisation plus nuancée, typographie technique */ --color-deep-primary: #0a1c1f; --color-deep-bg: #f4f0e8; --color-deep-text: #0f2a2e; --color-deep-accent: #2f6f74; /* --- Typographie --- Instrument Sans (variable 400-700) + Instrument Serif (400 + vraie italique) + JetBrains Mono. Les trois sont embarquees en data: URI dans styles/polices.css : le site garde sa typographie meme ouvert depuis une cle USB en rencontre client. ⚠ Instrument Serif n'existe qu'en 400. Ne jamais lui demander un gras : le navigateur en fabriquerait un faux, et ca se voit. */ --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ --font-size-3xl: 2.5rem; /* 40px */ --font-size-4xl: 3.5rem; /* 56px — hero */ --font-size-5xl: 4.5rem; /* 72px — hero très large */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --line-height-loose: 1.8; /* --- Espacement (base 4px) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 8rem; /* 128px */ /* --- Bordures, coins, ombres */ /* Des rayons serres. Le coin tres arrondi lit "application grand public" ; un cabinet-conseil se lit a 4-8 px. */ --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.375rem; --radius-xl: 0.5rem; --radius-full: 9999px; /* Presque plus d'ombre : la hierarchie vient du filet et du blanc, pas du relief. */ --shadow-xs: none; --shadow-sm: 0 1px 2px rgba(10,25,47,0.05); --shadow-md: 0 1px 2px rgba(10,25,47,0.06); --shadow-lg: 0 2px 6px rgba(10,25,47,0.07); --shadow-xl: 0 6px 20px -8px rgba(10,25,47,0.16); /* --- Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Layout */ --container-max: 1200px; --container-padding: var(--space-6); --header-height: 72px; --footer-height: auto; /* --- Couleurs des boutons étapes de vie --- Chaque étape a sa propre identité avec une couleur d'arrière-plan et un texte contrasté. Hover: légèrement plus foncé/saturé. */ --step-1-bg: var(--color-primary-500); --step-1-text: #fbf9f4; /* Clarifier */ --step-2-bg: var(--color-primary-500); --step-2-text: #fbf9f4; /* Protéger */ --step-3-bg: var(--color-primary-500); --step-3-text: #fbf9f4; /* Optimiser fiscalité */ --step-4-bg: var(--color-primary-500); --step-4-text: #fbf9f4; /* Épargner */ --step-5-bg: var(--color-primary-500); --step-5-text: #fbf9f4; /* Patrimoine */ --step-6-bg: var(--color-primary-500); --step-6-text: #fbf9f4; /* Futur */ }