/* ============================================================================ * rpf-design.css — Direction visuelle ReseauProFrance (La Réunion 974) * -------------------------------------------------------------------------- * Source unique des tokens de marque : couleurs, typographies, helpers. * À inclure dans : * (importe aussi les polices Google — un seul lien suffit). * * Direction : * - Vert Forêt #0B3D2E → nav, hero, titres, CTA institutionnels * - Vert Pro #16a34a → prix, succès, CTA d'action (convention historique) * - Blanc Lagon #F6F8F5 → fond (sous-ton vert, pas de cream) * - Encre #0E1A14 → texte * - Or Fondateur #C8901E → accent premium / membre fondateur (à petite dose) * - Rouge #dc2626 → ancien prix barré (convention historique) * * Polices : * - Bricolage Grotesque → display (titres) — du caractère, gère les accents FR * - Inter → corps de texte * - Spline Sans Mono → prix, références, SIREN, quantités (ton « plateforme ») * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap'); :root { /* ── Couleurs de marque ───────────────────────────────────────────── */ --rpf-foret: #0B3D2E; --rpf-foret-dark: #072a1f; --rpf-vert: #16a34a; --rpf-vert-dark: #0f7a37; --rpf-vert-clair: #DCFCE7; --rpf-lagon: #F6F8F5; --rpf-lagon-2: #eef3ef; --rpf-encre: #0E1A14; --rpf-gris: #5a6b61; /* texte secondaire (≠ --rpf-muted des pages) */ --rpf-or: #C8901E; --rpf-or-dark: #a9760f; --rpf-or-clair: #FBF3DF; --rpf-ligne: #DEE7E0; --rpf-rouge: #dc2626; /* ── Typographies ─────────────────────────────────────────────────── */ --rpf-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; --rpf-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --rpf-font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace; } /* ── Helpers réutilisables ────────────────────────────────────────────── */ .rpf-display { font-family: var(--rpf-font-display); } .rpf-body { font-family: var(--rpf-font-body); } .rpf-mono { font-family: var(--rpf-font-mono); }