/* ============================================================ SYRA AFRICA — Design Tokens centralisés (SPA statique) Chartre : BLEU (primaire) / ORANGE (secondaire) + neutres Aucun dégradé. Couleurs plates uniquement. ============================================================ */ :root { /* Palette — BLEU / ORANGE */ --color-primary: #2563eb; /* bleu CTA, liens, actif */ --color-primary-dark: #1d4ed8; /* hover bleu */ --color-primary-tint: #eff6ff; /* fond bleu très clair */ --color-secondary: #f97316; /* orange accent */ --color-secondary-dark: #ea580c; /* hover orange */ --color-secondary-tint: #fff7ed; /* fond orange très clair */ /* Neutres (blancs cassés / gris / noirs cassés) */ --color-surface: #fafaf9; /* fond page (jamais #fff pur) */ --color-card: #fafaf9; /* surface cartes */ --color-card-solid: #ffffff; /* cartes sur fond coloré (blanc peut servir de neutre cassé) */ --color-ink: #0a0a0a; /* texte principal / noir cassé */ --color-ink-soft: #111111; /* noir légèrement adouci (boutons store) */ --color-muted: #57534e; /* UN SEUL gris pour texte secondaire */ --color-faint: #a8a29e; /* gris très clair (icônes passives) */ --color-border: #e7e5e4; /* bordure fine 1px */ --color-border-strong: #d6d3d1; /* Typographie — 2 familles maximum */ --font-display: 'Archivo', 'Public Sans', system-ui, sans-serif; --font-body: 'Public Sans', 'Archivo', system-ui, sans-serif; /* Rayons */ --radius-sm: 8px; /* boutons */ --radius-md: 12px; /* inputs, petits composants */ --radius-lg: 20px; /* cartes */ --radius-xl: 32px; /* grands blocs / sections */ /* Ombres — UNIQUEMENT éléments flottants (modals, dropdowns) */ --shadow-float: 0 1px 2px rgba(10, 10, 10, 0.06), 0 8px 24px rgba(10, 10, 10, 0.10), 0 24px 64px rgba(10, 10, 10, 0.14); --shadow-modal: 0 2px 8px rgba(10, 10, 10, 0.08), 0 16px 48px rgba(10, 10, 10, 0.20); /* Échelle d'espacement stricte : 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; } /* ── Mode nuit "Océan de Minuit" — variables de marque ────── Activé par la classe .dark sur (darkMode:'class'). Les composants qui utilisent var(--color-*) basculent ici. */ html.dark { --color-primary: #60a5fa; /* bleu clair lumineux (CTA en sombre) */ --color-primary-dark: #8cb4ff; --color-primary-tint: rgba(30, 64, 140, 0.28); --color-secondary: #fb923c; /* orange lumineux */ --color-secondary-dark: #ffb37c; --color-secondary-tint: rgba(170, 74, 10, 0.22); --color-surface: #070d1a; /* fond page abysse */ --color-card: #0d182c; /* surface cartes minuit */ --color-card-solid: #101c31; --color-ink: #e9f0fc; /* texte principal blanc cassé bleuté */ --color-ink-soft: #e9f0fc; --color-muted: #aebfd9; /* texte secondaire */ --color-faint: #6c82a6; /* icônes passives */ --color-border: #1d2f51; /* bordure fine */ --color-border-strong: #294067; } /* Neutralisation Tailwind adaptée au mode sombre */ html.dark :where(.bg-white) { background-color: var(--color-card); } html.dark :where(.bg-black) { background-color: #02040a; } html.dark :where(.text-black) { color: var(--color-ink); } html.dark :where(.text-white) { color: var(--color-ink); } html.dark :where(.bg-gray-50, .bg-slate-50) { background-color: #14213d; } /* ── Base document ─────────────────────────────────────────── */ html { font-family: var(--font-body); } html.dark body { background-color: var(--color-surface) !important; color: var(--color-ink) !important; } body { margin: 0; background-color: var(--color-surface) !important; color: var(--color-ink) !important; font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Titres : police display + letter-spacing négatif léger, jamais sur le corps */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; } h1 { letter-spacing: -0.03em; } h2 { letter-spacing: -0.02em; } h3 { letter-spacing: -0.01em; } p, li, span, a, blockquote, td, th { letter-spacing: 0; } /* ── Neutralisation des couleurs hors charte ───────────────── Mappe toutes les teintes Tailwind par défaut vers bleu/orange ou neutres, sans toucher au markup. */ :where(.bg-white) { background-color: var(--color-card); } :where(.bg-black) { background-color: var(--color-ink-soft); } :where(.text-black) { color: var(--color-ink-soft); } :where(.bg-gray-50, .bg-slate-50) { background-color: #f5f5f4; } /* Gris texte unifié — UN SEUL niveau secondaire */ :where(.text-gray-400, .text-slate-400, .text-gray-500, .text-slate-500, .text-gray-600, .text-slate-600) { color: var(--color-muted); } /* Éteindre tout dégradé résiduel */ :where([class*='gradient'], [class*='from-'], [class*='via-'], [class*='to-']) { background-image: none !important; } /* ── Icônes Font Awesome : alignement précis avec le texte ── */ .fa-icon, i[class*='fa-'] { line-height: 1; vertical-align: -0.125em; display: inline-block; font-size: inherit; } /* ── Ombres : bannir les ombres copiées-collées sur les cartes ── Seuls les éléments flottants gardent une ombre (modals, dropdowns, menus déroulants). */ :where(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: none !important; } /* Ombres autorisées (flottants) — classes dédiées */ .shadow-float { box-shadow: var(--shadow-float) !important; } .shadow-modal { box-shadow: var(--shadow-modal) !important; } /* ── Animations : désactivation des effets de scroll génériques ── */ :where([class*='animate-in'], [class*='slide-in-from'], .fade-in, .zoom-in) { animation: none !important; opacity: 1 !important; transform: none !important; } /* Réduire les animations décoratives pures */ :where(.animate-pulse, .animate-bounce, .animate-spin) { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* Exception : spinner de chargement */ .animate-spin.keep-spin { animation-duration: 1s !important; animation-iteration-count: infinite !important; } /* ── Boutons : radius uniforme ─────────────────────────────── */ button, [role='button'], .btn { border-radius: var(--radius-sm) !important; } /* ── Soulignement arrondi (surlignage type marqueur) ──────── */ .underline-rounded { position: relative; white-space: nowrap; } .underline-rounded::after { content: ''; position: absolute; left: -0.05em; right: -0.05em; bottom: 0.08em; height: 0.32em; background-color: color-mix(in srgb, var(--color-secondary) 28%, transparent); border-radius: 9999px; z-index: -1; pointer-events: none; } html.dark .underline-rounded::after { background-color: color-mix(in srgb, var(--color-secondary) 38%, transparent); } /* ── Accessibilité / responsive utilitaires ───────────────── */ img, video, svg { max-width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (max-width: 640px) { h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); } h2 { font-size: clamp(1.5rem, 6.5vw, 1.875rem); } h3 { font-size: clamp(1.25rem, 5vw, 1.5rem); } } @media (min-width: 641px) and (max-width: 1024px) { h1 { font-size: clamp(2.25rem, 5vw, 3rem); } } @media (min-width: 1280px) { h1 { font-size: clamp(2.75rem, 4vw, 3.5rem); } }