/* ========================================================================== CHARTE GRAPHIQUE NIMBA V37 ========================================================================== Source UNIQUE de verite pour tous les tokens visuels du projet. STRUCTURE : 1. Couleurs primaires (primary navy, action ambre terreux) 2. Couleurs semantiques etendues (success, danger, warn, info) 3. Couleurs neutres (palette beige/terre identitaire) 4. Couleurs utilitaires 5. Couleurs operateurs paiement (Orange Money, MTN Money) 6. Couleurs de marques tierces (Facebook, WhatsApp, Google) 7. Couleurs identite Guinee (drapeau) 8. Aliases legacy (compat - NE PAS supprimer) 9. Typographie 10. Espacements 11. Ombres 12. Rayons 13. Transitions 14. Layout 15. Z-index USAGE : modifier UNIQUEMENT ce fichier pour changer la charte. Toutes les pages se mettent automatiquement a jour. ========================================================================== */ :root { /* ====================================================================== 1. COULEURS PRIMAIRES (identite Nimba) ====================================================================== */ /* Primary : navy - confiance, header, liens, prix */ --c-primary: #14467C; --c-primary-dark: #0A2542; --c-primary-soft: #EAF0F7; --c-primary-pastel: #D6E2EE; --c-primary-mid: #1E5A9F; --c-primary-light: #4A7AB5; /* Action : ambre terreux - CTAs critiques (Publier, S'inscrire, Boutique) SEULE couleur d'action de marque. A utiliser avec parcimonie. */ --c-action: #B27038; --c-action-dark: #8C5A2D; --c-action-soft: #F4E4CC; /* ====================================================================== 2. COULEURS SEMANTIQUES (etendues) ---------------------------------------------------------------------- Convention : --c-X = couleur principale (badge, icone) --c-X-dark = variante sombre (texte sur fond pale) --c-X-soft = fond ultra-pale (alertes, badges) --c-X-border = bordure 1px --c-X-hover = etat hover (boutons danger) ====================================================================== */ /* SUCCES (vert profond identitaire) */ --c-success: #2D6A4F; --c-success-dark: #1B4332; --c-success-soft: #D8F3DC; --c-success-pale: #F0FDF4; /* alternative ultra-pale */ --c-success-border: #BBF7D0; --c-success-text: #166534; /* texte vert lisible sur fond pale */ --c-success-accent: #16A34A; /* vert vif (accents discrets) */ /* DANGER (rouge brique identitaire) */ --c-danger: #B83333; --c-danger-dark: #7F1D1D; --c-danger-hover: #991B1B; --c-danger-soft: #FEF2F2; --c-danger-soft-2: #FCEEEE; /* alternative chaude (5 templates) */ --c-danger-border: #FECACA; --c-danger-bg-hover: #FFF0F0; /* hover doux menus rouges */ --c-danger-accent: #DC2626; /* rouge vif (CTA destructif) */ /* AVERTISSEMENT (ambre/warn - distinct de --c-action) */ --c-warn: #C97324; --c-warn-dark: #92400E; --c-warn-soft: #FFFBEB; --c-warn-border: #FDE68A; --c-warn-accent: #F59E0B; /* ambre vif (badges featured) */ --c-warn-text: #B45309; /* texte warn sur fond pale */ --c-warn-amber: #D97706; /* nuance ambre vif (1 template) */ /* INFO (variantes pales du primary navy) */ --c-info: #14467C; /* = primary (texte info reste navy) */ --c-info-dark: #1E40AF; --c-info-soft: #EFF6FF; --c-info-border: #BFDBFE; --c-info-accent: #2563EB; /* bleu vif "lu" chat */ /* INDIGO (palette distincte de info bleu - statuts order_*) */ --c-indigo: #4338CA; --c-indigo-soft: #EEF2FF; --c-indigo-border: #C7D2FE; /* ====================================================================== 3. COULEURS NEUTRES (palette beige/terre identitaire) ====================================================================== */ --c-ink: #1A2333; --c-ink-2: #4A4F5C; --c-ink-3: #5A5F6C; --c-ink-4: #7A7565; --c-muted: #8B8579; --c-line: #E5DFD2; --c-line-light: #F0EBE0; --c-bg: #F7F3EA; --c-warm-deep: #E8DFC8; /* beige soutenu - zone reassurance */ --c-surface: #FFFFFF; /* ====================================================================== 4. COULEURS UTILITAIRES ====================================================================== */ /* Bouton de recherche - intentionnellement gris fonce */ --c-neutral-btn: #3D3D3D; --c-neutral-btn-h: #262626; /* Footer dark text (navy fonce) */ --c-footer-text: #8A9DB4; --c-footer-text-2: #B5C4D6; --c-footer-text-3: #6B7B91; /* ====================================================================== 5. COULEURS OPERATEURS PAIEMENT (Guinee) ====================================================================== */ /* Orange Money */ --c-orange-money: #F97316; --c-orange-money-dark: #EA580C; --c-orange-money-soft: #FFF4E6; /* MTN Money */ --c-mtn-money: #EAB308; --c-mtn-money-light: #FBBF24; --c-mtn-money-dark: #CA8A04; --c-mtn-money-soft: #FEF9C3; /* ====================================================================== 6. COULEURS DE MARQUES TIERCES (figees par les marques) ====================================================================== */ --c-brand-facebook: #1877F2; --c-brand-whatsapp: #25D366; --c-brand-whatsapp-dark: #1DA851; --c-brand-google-blue: #4285F4; --c-brand-google-red: #EA4335; --c-brand-google-yellow: #FBBC05; --c-brand-google-green: #34A853; /* ====================================================================== 7. COULEURS IDENTITE GUINEE (drapeau) ====================================================================== */ --c-guinea-red: #CE1126; --c-guinea-yellow: #FCD116; --c-guinea-green: #009460; /* ====================================================================== 8. ALIASES LEGACY (compat anciens templates - NE PAS SUPPRIMER) ====================================================================== */ --c-gold: var(--c-primary); --c-gold-dark: var(--c-primary-dark); --c-gold-light: var(--c-primary-pastel); --c-gold-soft: var(--c-primary-soft); --c-green: var(--c-success); --c-green-dark: var(--c-success-dark); --c-green-soft: var(--c-success-soft); --color-primary: var(--c-primary); --color-primary-dark: var(--c-primary-dark); --color-primary-light: var(--c-primary-soft); --color-accent: var(--c-action); --color-accent-light: var(--c-action-soft); --color-danger: var(--c-danger); --color-bg: var(--c-bg); --color-white: var(--c-surface); --color-gray-50: #F9FAFB; --color-gray-100: var(--c-line-light); --color-gray-200: var(--c-line); --color-gray-300: #D1D5DB; --color-gray-400: var(--c-muted); --color-gray-500: var(--c-ink-4); --color-gray-600: var(--c-ink-3); --color-gray-700: var(--c-ink-2); --color-gray-900: var(--c-ink); /* ====================================================================== 9. TYPOGRAPHIE ====================================================================== */ --f-body: 'DM Sans', system-ui, -apple-system, sans-serif; --f-display: 'Playfair Display', Georgia, serif; --font-body: var(--f-body); --font-display: var(--f-display); /* Echelle typographique consolidee (9 tailles) */ --fs-2xs: 0.6875rem; /* 11px - micro labels, badges petits */ --fs-xs: 0.75rem; /* 12px - metadonnees, timestamps */ --fs-sm: 0.8125rem; /* 13px - texte secondaire */ --fs-base: 0.875rem; /* 14px - body UI, nav, boutons */ --fs-md: 0.9375rem; /* 15px - titres de carte, body emph */ --fs-lg: 1.0625rem; /* 17px - prix, sous-titres section */ --fs-xl: 1.25rem; /* 20px - titres rangees */ --fs-2xl: 1.5rem; /* 24px - titres section */ --fs-3xl: 1.875rem; /* 30px - logo, hero */ /* ====================================================================== 10. ESPACEMENTS (echelle 4px) ====================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ====================================================================== 11. OMBRES ====================================================================== */ --sh-xs: 0 1px 2px rgba(20, 35, 60, 0.04); --sh-sm: 0 1px 6px rgba(20, 35, 60, 0.06); --sh-md: 0 4px 16px rgba(20, 35, 60, 0.08); --sh-lg: 0 8px 28px rgba(20, 35, 60, 0.10); --sh-xl: 0 18px 48px rgba(20, 35, 60, 0.14); --sh-action: 0 4px 18px rgba(178, 112, 56, 0.32), 0 1px 5px rgba(0, 0, 0, 0.06); --sh-action-h: 0 8px 24px rgba(178, 112, 56, 0.38), 0 2px 6px rgba(0, 0, 0, 0.08); /* Aliases legacy */ --shadow-sm: var(--sh-sm); --shadow-md: var(--sh-md); --shadow-lg: var(--sh-lg); /* ====================================================================== 12. RAYONS ====================================================================== */ --r-xs: 4px; --r-sm: 8px; --r: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* Aliases legacy */ --radius: var(--r); --radius-lg: var(--r-lg); /* ====================================================================== 13. TRANSITIONS ====================================================================== */ --t-fast: 0.15s ease; --t-base: 0.2s ease; --t-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* ====================================================================== 14. LAYOUT ====================================================================== */ --max-w: 1200px; --h-hdr: 64px; --h-mob-top: 54px; --h-mob-stick: 50px; --h-bnav: 62px; /* Alias legacy */ --max-width: var(--max-w); /* ====================================================================== 15. Z-INDEX ====================================================================== */ --z-base: 1; --z-sticky: 100; --z-dd: 200; --z-bnav: 250; --z-overlay: 299; --z-menu: 300; --z-fab: 400; --z-toast: 999; }