/* ========================================================================== 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. ========================================================================== */ /* ========================================================================== POLICES AUTO-HEBERGEES (self-hosted) - woff2, latin-ext, font-display swap Fichiers dans static/fonts/. Chemins relatifs -> compatibles WhiteNoise ManifestStaticFilesStorage (cache busting via hash au collectstatic). ========================================================================== */ /* DM Sans - corps de texte */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-v17-latin-ext-regular.61c9be5fdeb3.woff2") format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-v17-latin-ext-500.4e54c2e55094.woff2") format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/dm-sans-v17-latin-ext-600.84b98f4506bc.woff2") format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-v17-latin-ext-700.620bf56d57ff.woff2") format('woff2'); } /* Playfair Display - titres */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/playfair-display-v40-latin-ext-700.3b6af9133f0b.woff2") format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/playfair-display-v40-latin-ext-800.b2f53de7090f.woff2") format('woff2'); } :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) */ /* PROMOTION (rouge-orange vif) RESERVE AUX PRIX SOLDES, NULLE PART AILLEURS. La promotion n'avait pas de couleur a elle : elle empruntait --c-action, qui est la SEULE couleur d'action de marque (Publier, Enregistrer, Boutique). Resultat, elle ne signalait plus rien - et --c-action se diluait. Assez loin du brique --c-danger pour ne pas dire « Supprimer », assez loin du cuivre --c-action pour se remarquer. */ --c-promo: #D64520; --c-promo-dark: #A8320F; --c-promo-soft: #FDEDE7; /* Certification Nimba - le bleu vif de la pastille « Verifie ». Volontairement DISTINCT de --c-primary (navy de la marque) : la pastille doit se lire comme un code universel, pas comme un element de charte. Aucun autre badge du site n'utilise une coche bleue. */ --c-verif: #1D9BF0; --c-verif-dark: #0F6FB3; --c-verif-soft: #E8F4FD; /* 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.75rem; /* 12px - micro labels, badges petits. Etait 11px : plancher de lisibilite mobile (audit du 13/09/2026), ne pas redescendre sous 12px pour du texte */ --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; } /* ==================================================================== PASTILLE « VERIFIE PAR NIMBA » ==================================================================== Composant partage, place ICI et non dans main.css : il s'affiche sur six surfaces dont les feuilles sont dispersees (main.css pour la page d'annonce, CSS en ligne pour home.html, shop_list.html, shop_public.html, dashboard.html, profile_public.html). charte.css est la seule feuille chargee partout - l'ecrire six fois reproduirait exactement la divergence qu'on vient de corriger sur le badge « Pro ». La pastille se colle au NOM qu'elle qualifie : taille relative a la police courante, donc elle suit le titre d'une vitrine comme le nom d'une carte, sans aucune regle par surface. ELLE RESTE PETITE, ET C'EST VOLONTAIRE. Une pastille de verification n'a pas besoin de taille pour signifier : sa FORME est reconnue, pas son encombrement. Grossie, elle vole la vedette au nom qu'elle est censee qualifier - c'est le nom qu'on lit, la pastille ne fait que le confirmer. Le clamp la tient entre 11 et 14 px sur TOUTES les surfaces : 11 sur une carte de boutique, 14 sur le titre d'une vitrine. Sans ce plafond, elle montait a 19 px sur un grand titre - deux fois trop. ==================================================================== */ .badge-verifie { display: inline-flex; align-items: center; justify-content: center; width: clamp(11px, 0.7em, 14px); height: clamp(11px, 0.7em, 14px); flex: 0 0 auto; margin-left: 0.25em; /* A 0.7em, le haut de la pastille arrive a la hauteur des capitales quand son bas repose sur la ligne de base : elle se centre donc optiquement sur le mot, sans reglage par surface. Le leger retrait corrige l'impression de flottement propre aux formes rondes. */ vertical-align: -0.06em; color: var(--c-verif); line-height: 1; } .badge-verifie svg { width: 100%; height: 100%; display: block; }