/* ========================================================================== THEME TOKENS - Morais Cleaning Source de vérité: palette des pages services (services.css) Objectif: unifier les couleurs sur toutes les pages sans casser l'existant. ========================================================================== */ :root { --primary: #1a365d; --secondary: #b91c1c; --accent: #2563eb; --light: #f8fafc; --white: #ffffff; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); /* Aliases pour anciens fichiers (mc-colors.css / composants) */ --mc-red-primary: var(--secondary); --mc-red-dark: color-mix(in srgb, var(--secondary) 85%, black); --mc-red-light: color-mix(in srgb, var(--secondary) 75%, white); --mc-blue-primary: var(--primary); --mc-blue-dark: color-mix(in srgb, var(--primary) 85%, black); --mc-blue-light: color-mix(in srgb, var(--primary) 75%, white); --mc-accent: var(--accent); --mc-white: var(--white); --mc-light: var(--light); --mc-gray-100: var(--gray-100); --mc-gray-200: var(--gray-200); --mc-gray-300: var(--gray-300); --mc-gray-400: var(--gray-400); --mc-gray-500: var(--gray-500); --mc-gray-600: var(--gray-600); --mc-gray-700: var(--gray-700); --mc-gray-800: var(--gray-800); --mc-gray-900: var(--gray-900); } /* Helpers globaux (ne casse pas le style, mais évite les incohérences) */ a { color: inherit; } /* === Thèmes clair / sombre === Utilisation : - par défaut le mode clair (variables dans :root ci‑dessous) - sur navigateurs récents : prefers-color-scheme auto - possibilité de forcer en ajoutant la classe `.dark` sur (classe `.light` existe aussi si vous souhaitez l'utiliser explicitement) Les couleurs sont choisies pour conserver le bleu/rouge de la marque, garantir un contraste WCAG AA minimum et fournir une ambiance propre, premium et non-agressive. */ :root { /* backgrounds & surfaces */ --bg-page: var(--light); --bg-section: #ffffff; --bg-card: #ffffff; /* text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-700); --text-on-accent: #ffffff; /* links */ --link: var(--accent); --link-hover: color-mix(in srgb, var(--accent) 80%, var(--gray-900)); /* buttons */ --btn-primary-bg: var(--secondary); --btn-primary-text: #ffffff; --btn-primary-hover: color-mix(in srgb, var(--secondary) 85%, black); --btn-secondary-bg: var(--primary); --btn-secondary-text: #ffffff; --btn-secondary-hover: color-mix(in srgb, var(--primary) 85%, black); /* shadows */ --shadow-light: 0 2px 6px rgba(0, 0, 0, 0.08); } /* dark theme variables activated by preference or .dark class */ @media (prefers-color-scheme: dark) { :root { --bg-page: #12141a; --bg-section: #1e2028; --bg-card: #232530; --text-primary: #e4e6eb; --text-secondary: #b0b3b8; --text-on-accent: #000000; --link: var(--accent); --link-hover: color-mix(in srgb, var(--accent) 70%, #e4e6eb); --btn-primary-bg: var(--secondary); --btn-primary-text: #ffffff; --btn-primary-hover: color-mix(in srgb, var(--secondary) 75%, #000000); --btn-secondary-bg: var(--primary); --btn-secondary-text: #ffffff; --btn-secondary-hover: color-mix(in srgb, var(--primary) 75%, #000000); --shadow-light: 0 2px 6px rgba(0, 0, 0, 0.25); } /* dark-mode section-white override */ .section-white { background-color: #000 !important; color: #fff !important; } } html.dark { /* same values as media query, for JS toggles */ --bg-page: #12141a; --bg-section: #1e2028; --bg-card: #232530; --text-primary: #e4e6eb; --text-secondary: #b0b3b8; --text-on-accent: #000000; --link: var(--accent); --link-hover: color-mix(in srgb, var(--accent) 70%, #e4e6eb); --btn-primary-bg: var(--secondary); --btn-primary-text: #ffffff; --btn-primary-hover: color-mix(in srgb, var(--secondary) 75%, #000000); --btn-secondary-bg: var(--primary); --btn-secondary-text: #ffffff; --btn-secondary-hover: color-mix(in srgb, var(--primary) 75%, #000000); --shadow-light: 0 2px 6px rgba(0, 0, 0, 0.25); } html.light { /* same as default light so forcing has no effect */ } /* ------------------------------------------------------------------ global overrides for service pages force theme colours even when inline styles are present ------------------------------------------------------------------ */ .section-title { color: var(--primary) !important; } .cert-item div, .section-white .client-tag, .section-white .client-icon i { color: var(--text-primary) !important; } /* neutralise any remaining brown (#713f12) and blue (#1a365d) inline rules */ [style*="#713f12"], [style*="#1a365d"] { color: var(--primary) !important; }