/* ============================================================ LEOPAR — tokens.css Source de vérité UNIQUE pour les couleurs, dégradés, rayons et typographie. À charger AVANT style.css et app.css. Structure : 1. Palette brute (--leo-*) → ne jamais utiliser dans les composants 2. Dégradés signature → linear-gradient prêts à l'emploi 3. Couleurs utilitaires (3p) → iOS, drapeau FR, marques externes 4. Variables sémantiques FRONT → utilisées par style.css 5. Variables sémantiques APP → utilisées par app.css 6. Overrides mode light ============================================================ */ /* ----------------------------------------------------------- 1. PALETTE BRUTE — ne jamais utiliser directement dans les composants. Toujours passer par les variables sémantiques plus bas (--bg, --accent, --app-bg, etc.). ----------------------------------------------------------- */ :root { /* ——— Dominante dorée (accent principal Leopar) ——— */ --leo-corail: #FDB60F; /* doré saturé : couleur d'accent principale */ --leo-corail-soft: #FFE9B0; /* doré pâle : fonds très clairs, halos */ --leo-corail-deep: #E09A00; /* doré foncé : hover boutons, accents marqués */ --leo-corail-text: #A66800; /* doré caramel foncé : texte sur fond clair */ /* ——— Neutres chauds (mode light) ——— */ --leo-creme: #ffea41; /* fond page beige chaud (mode light) */ --leo-creme-light: #FFF8F2; /* texte clair sur fond sombre (mode dark) */ --leo-encre: #1F1B2E; --leo-encre-soft: #4A4560; /* ——— Neutres sombres (mode dark) ——— */ --leo-noir: #14111E; --leo-noir-1: #1C1828; --leo-noir-2: #252134; --leo-noir-3: #2F2A40; --leo-noir-4: #383349; /* ——— Gris neutres (utilitaires : iOS, mockups, placeholders) ——— */ --leo-gris-50: #F8F8F8; --leo-gris-100: #F5F5F5; --leo-gris-150: #F4F4F6; --leo-gris-200: #F0F0F0; --leo-gris-220: #EFEFEF; --leo-gris-250: #EDEDED; --leo-gris-300: #E5E5E5; --leo-gris-350: #E0E0E0; --leo-gris-400: #ECECEF; --leo-gris-500: #C8C8CC; --leo-gris-600: #B0B0B4; --leo-gris-650: #A0A0A4; --leo-gris-700: #999999; --leo-gris-750: #777777; --leo-gris-800: #6A6A6E; --leo-gris-850: #555555; --leo-gris-900: #1A1A1A; --leo-gris-950: #0D0D0D; --leo-gris-980: #0A0A0A; --leo-gris-bulle: #E9E9EB; /* bulle iMessage reçue */ --leo-gris-form: #F3F3F5; /* formulaire iMessage */ --leo-gris-attach: #F0F0F3; /* bouton trombone iMessage */ /* ——— États système ——— */ --leo-success: #4ADE80; --leo-success-dark: #16A34A; --leo-success-darker:#047857; --leo-success-light: #A7F3D0; --leo-success-pale: #ECFDF5; --leo-success-text: #2E7D32; --leo-success-bg: #F4F9F4; --leo-success-border:#D6EBD6; --leo-success-mid: #4CAF50; /* vert iOS "online" */ --leo-warning: #FB923C; --leo-warning-amber: #F5A623; --leo-warning-text: #B45309; --leo-warning-gold: #B8860B; --leo-warning-pale: #FFFBEB; --leo-warning-light: #FDE68A; --leo-warning-soft: rgba(251,146,60,0.15); --leo-error: #F87171; --leo-error-deep: #EF4444; --leo-error-dark: #B91C1C; --leo-error-blood: #D32F2F; --leo-error-pale: #FEF2F2; --leo-error-light: #FECACA; --leo-error-soft: rgba(248,113,113,0.12); --leo-info: #60A5FA; --leo-info-deep: #1D4ED8; --leo-info-light: #BFDBFE; --leo-info-pale: #EFF6FF; --leo-info-mid: #7FAAFF; /* ——— Variantes "fond + bordure" pour badges & feedbacks ——— */ /* Accent doré */ --leo-corail-bg-15: rgba(253,182,15,0.15); /* Vert succès (#4ADE80) — fond/bordure */ --leo-success-bg-12: rgba(74,222,128,0.12); --leo-success-bg-20: rgba(74,222,128,0.20); --leo-success-bg-22: rgba(74,222,128,0.22); --leo-success-bg-25: rgba(74,222,128,0.25); --leo-success-bg-30: rgba(74,222,128,0.30); /* Vert succès deep (#22C55E) */ --leo-success-deep-bg-30: rgba(34,197,94,0.30); /* Rouge erreur (#F87171) — fond/bordure */ --leo-error-bg-12: rgba(248,113,113,0.12); --leo-error-bg-20: rgba(248,113,113,0.20); --leo-error-bg-25: rgba(248,113,113,0.25); /* Rouge alerte (#EF4444) — fond/bordure (countdown promo) */ --leo-alert-bg-12: rgba(239,68,68,0.12); --leo-alert-bg-35: rgba(239,68,68,0.35); /* Bleu info froid (cornflower #6495ED) — feedbacks login */ --leo-cornflower-bg-12: rgba(100,149,237,0.12); --leo-cornflower-bg-22: rgba(100,149,237,0.22); /* Bleu info clair (#60A5FA) */ --leo-info-bg-12: rgba(96,165,250,0.12); --leo-info-bg-25: rgba(96,165,250,0.25); /* Orange chaud (#F28207) — auth_hero glow */ --leo-orange-bg-20: rgba(242,130,7,0.20); /* Lavande (#B5A8FF) — feat-icon, ba-card */ --leo-lavande-bg-05: rgba(181,168,255,0.05); --leo-lavande-bg-15: rgba(181,168,255,0.15); /* Teal (#2DD4BF) — feat-icon */ --leo-teal-bg-12: rgba(45,212,191,0.12); /* Rouge sombre (style "is-error" sur input form) */ --leo-error-blood-bg-12: rgba(211,47,47,0.12); /* Erreur saturée (style "error" générique app) */ --leo-red-bg-08: rgba(255,0,0,0.08); --leo-red-bg-15: rgba(255,0,0,0.15); --leo-red-bg-25: rgba(255,0,0,0.25); --leo-red-bg-30: rgba(255,0,0,0.30); --leo-red-deep-85: rgba(180,0,0,0.85); /* ——— Voiles transparents — fonds & bordures neutres ——— */ /* Sur fond clair (mode dark) — blanc avec alpha */ --leo-white-a-03: rgba(255,255,255,0.03); --leo-white-a-04: rgba(255,255,255,0.04); --leo-white-a-05: rgba(255,255,255,0.05); --leo-white-a-06: rgba(255,255,255,0.06); --leo-white-a-08: rgba(255,255,255,0.08); --leo-white-a-10: rgba(255,255,255,0.10); --leo-white-a-15: rgba(255,255,255,0.15); --leo-white-a-20: rgba(255,255,255,0.20); --leo-white-a-92: rgba(255,255,255,0.92); --leo-white-a-95: rgba(255,255,255,0.95); --leo-white-a-96: rgba(255,255,255,0.96); --leo-white-a-100: rgba(255,255,255,1); /* Sur fond sombre (mode light) — noir avec alpha */ --leo-black-a-03: rgba(0,0,0,0.03); --leo-black-a-04: rgba(0,0,0,0.04); --leo-black-a-05: rgba(0,0,0,0.05); --leo-black-a-06: rgba(0,0,0,0.06); --leo-black-a-08: rgba(0,0,0,0.08); --leo-black-a-10: rgba(0,0,0,0.10); --leo-black-a-12: rgba(0,0,0,0.12); --leo-black-a-15: rgba(0,0,0,0.15); --leo-black-a-20: rgba(0,0,0,0.20); --leo-black-a-25: rgba(0,0,0,0.25); --leo-black-a-30: rgba(0,0,0,0.30); --leo-black-a-35: rgba(0,0,0,0.35); --leo-black-a-38: rgba(0,0,0,0.38); --leo-black-a-40: rgba(0,0,0,0.40); --leo-black-a-45: rgba(0,0,0,0.45); --leo-black-a-50: rgba(0,0,0,0.50); --leo-black-a-55: rgba(0,0,0,0.55); --leo-black-a-60: rgba(0,0,0,0.60); --leo-black-a-65: rgba(0,0,0,0.65); --leo-black-a-70: rgba(0,0,0,0.70); --leo-black-a-75: rgba(0,0,0,0.75); --leo-black-a-85: rgba(8,8,8,0.85); /* Texte cassé (creme avec alpha) — mode dark */ --leo-creme-a-32: rgba(255,248,242,0.32); --leo-creme-a-38: rgba(255,248,242,0.38); --leo-creme-a-42: rgba(255,248,242,0.42); --leo-creme-a-62: rgba(255,248,242,0.62); --leo-creme-a-65: rgba(255,248,242,0.65); --leo-creme-a-70: rgba(255,248,242,0.70); /* Texte cassé (encre avec alpha) — mode light */ --leo-encre-a-06: rgba(31,27,46,0.06); --leo-encre-a-08: rgba(31,27,46,0.08); --leo-encre-a-10: rgba(31,27,46,0.10); --leo-encre-a-12: rgba(31,27,46,0.12); --leo-encre-a-15: rgba(31,27,46,0.15); --leo-encre-a-32: rgba(31,27,46,0.32); --leo-encre-a-35: rgba(31,27,46,0.35); --leo-encre-a-45: rgba(31,27,46,0.45); /* ——— Couleurs purement utilitaires ——— */ --leo-white: #FFFFFF; --leo-black: #000000; /* ----------------------------------------------------------- 2. DÉGRADÉS SIGNATURE — toujours passer par ces tokens, ne jamais redéclarer linear-gradient(...) dans les composants. ----------------------------------------------------------- */ /* Dégradé Leopar principal — doré "sunlight soft" : du clair au saturé */ --leo-gradient: linear-gradient(135deg, #FFCB52 0%, #FDB60F 100%); /* Dégradé Leopar foncé — pour textes d'accent sur fond clair (mode light) */ /* Du doré pur vers l'orange chaud, dialogue avec le jaune du fond sans virer brun */ --leo-gradient-deep: linear-gradient(135deg, #FFC520 0%, #D87B00 100%); /* Dégradé chaud doré → orange (icônes succès, onboarding app) */ --leo-gradient-warm: linear-gradient(135deg, rgba(253,182,15,.15) 0%, rgba(242,130,7,.15) 100%); /* Dégradé succès (boutons "domaine disponible") */ --leo-gradient-success: linear-gradient(135deg, #22C55E 0%, #16A34A 100%); /* Voiles (overlays) sur images (.site-action-tile--has-preview) */ --leo-gradient-veil-soft: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%); --leo-gradient-veil: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%); /* ----------------------------------------------------------- 3. COULEURS TIERCES (3p) — réservées aux contextes qui imitent une marque/plateforme externe. Ne PAS utiliser ailleurs dans l'UI Leopar. ----------------------------------------------------------- */ /* iOS / iMessage (mockup .sms-phone) */ --leo-ios-blue: #007AFF; --leo-ios-blue-deep: #0064D1; /* Drapeau FR — bleu et rouge officiels */ --leo-fr-blue: #002395; --leo-fr-red: #ED2939; /* ----------------------------------------------------------- 4. RAYONS, EASING, TYPOGRAPHIE ----------------------------------------------------------- */ --leo-radius-sm: 10px; --leo-radius: 16px; --leo-radius-lg: 22px; --leo-radius-xl: 32px; --leo-easing: cubic-bezier(0.4, 0, 0.2, 1); --leo-font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================================ 5. FRONT (marketing / landing) — variables NEUTRES Utilisées par style.css. Mode dark par défaut. ============================================================ */ :root { --bg: var(--leo-noir); --bg-1: var(--leo-noir-1); --bg-2: var(--leo-noir-2); --bg-3: var(--leo-noir-3); --border: var(--leo-white-a-08); --border-md: rgba(255,255,255,0.14); --text: var(--leo-creme-light); --text-2: var(--leo-creme-a-62); --text-3: var(--leo-creme-a-32); --accent: var(--leo-corail); --accent-dim: var(--leo-corail-bg-15); --green: var(--leo-success); --green-dim: var(--leo-success-bg-12); --red: var(--leo-error); --red-dim: var(--leo-error-bg-12); --radius-sm: var(--leo-radius-sm); --radius: var(--leo-radius); --radius-lg: var(--leo-radius-lg); --radius-xl: var(--leo-radius-xl); --easing: var(--leo-easing); --font: var(--leo-font); } /* Front — mode light Par DÉFAUT : fond blanc franc (pages d'information, FAQ, comparatifs, blog…). EXCEPTION : les pages "vitrine" (home + landing affiliation) utilisent le crème chaud — voir le sélecteur html.light body.is-vitrine plus bas. */ html.light { --bg: var(--leo-white); /* fond page : blanc franc par défaut */ --bg-1: var(--leo-white); /* cartes / sections : blanc franc */ --bg-2: #FAFAF7; /* surfaces secondaires : blanc cassé léger */ --bg-3: #F2F2EE; /* hover / surfaces tertiaires : gris très clair */ --border: var(--leo-encre-a-08); --border-md: var(--leo-encre-a-15); --text: var(--leo-encre); --text-2: var(--leo-encre-soft); --text-3: var(--leo-encre-a-32); /* En mode light, le doré pur sur blanc/beige manque de contraste pour le texte fin. */ /* On bascule sur la variante caramel foncé pour les liens, kickers, eyebrows, etc. */ --accent: var(--leo-corail-text); } /* Pages vitrine en mode light — fond crème chaud signature. Activé via la classe .is-vitrine ajoutée au par modules/header.php uniquement sur la home et la landing /affiliation-program. */ html.light body.is-vitrine { --bg: var(--leo-creme); } /* ============================================================ 6. APP (espace connecté) — variables PRÉFIXÉES --app- Utilisées par app.css. Mode dark par défaut. ============================================================ */ :root { --app-bg: var(--leo-noir); --app-bg-1: var(--leo-noir-1); --app-bg-2: var(--leo-noir-2); --app-bg-3: var(--leo-noir-3); --app-bg-4: var(--leo-noir-4); --app-surface: var(--leo-noir-1); --app-border: rgba(255,255,255,0.09); --app-border-md: var(--leo-white-a-15); --app-text: var(--leo-creme-light); --app-text-2: var(--leo-creme-a-62); --app-text-3: var(--leo-creme-a-38); --app-accent: var(--leo-corail); --app-input-bg: var(--leo-white-a-05); --app-input-border: rgba(255,255,255,0.14); --app-input-placeholder:rgba(255,255,255,0.3); --app-shadow: 0 10px 30px var(--leo-black-a-40); --app-shadow-lg: 0 24px 60px var(--leo-black-a-50); --app-stat-bg: var(--leo-noir-1); --app-stat-border: rgba(255,255,255,0.09); --app-meta-bg: var(--leo-noir-2); --app-meta-border: var(--leo-white-a-08); --app-empty-bg: var(--leo-white-a-03); --app-empty-border: rgba(255,255,255,0.12); --app-badge-neutral-bg: var(--leo-white-a-08); --app-badge-neutral-color: var(--leo-creme-a-70); --app-badge-neutral-border: rgba(255,255,255,0.12); --app-notice-bg: var(--leo-noir-2); --app-notice-border: var(--leo-white-a-10); --app-notice-color: var(--leo-creme-a-65); --app-range-bg: var(--leo-noir-2); --app-range-border: var(--leo-white-a-10); --app-pending-bg: var(--leo-warning-soft); --app-pending-border: rgba(251,146,60,0.25); --app-pending-color: var(--leo-warning); --app-failed-bg: var(--leo-error-soft); --app-failed-border: rgba(248,113,113,0.25); --app-failed-color: var(--leo-error); --progress-track: #333333; --primary-color: var(--app-accent); } /* App — mode light Espace connecté : fond blanc franc, sans crème. Les surfaces secondaires utilisent des nuances de gris très clair pour préserver la hiérarchie visuelle entre fond / cartes / sous-cartes. */ html.light { --app-bg: var(--leo-white); /* fond page : blanc franc */ --app-bg-1: var(--leo-white); /* cartes principales : blanc franc */ --app-bg-2: #FAFAF7; /* surfaces secondaires : blanc cassé */ --app-bg-3: #F2F2EE; /* hover / surfaces tertiaires */ --app-bg-4: #EAEAE5; /* niveau le plus profond */ --app-surface: var(--leo-white); --progress-track: #ddd; --app-border: var(--leo-encre-a-08); --app-border-md: var(--leo-encre-a-15); --app-text: var(--leo-encre); --app-text-2: var(--leo-encre-soft); --app-text-3: var(--leo-encre-a-45); /* Doré pur peu lisible en texte sur fond clair → on bascule sur la variante caramel foncé */ --app-accent: var(--leo-corail-text); --app-input-bg: var(--leo-white); --app-input-border: var(--leo-encre-a-15); --app-input-placeholder:var(--leo-encre-a-35); --app-shadow: 0 10px 30px rgba(31,27,46,0.06); --app-shadow-lg: 0 24px 60px rgba(31,27,46,0.12); --app-stat-bg: var(--leo-white); --app-stat-border: var(--leo-encre-a-08); --app-meta-bg: #FAFAF7; --app-meta-border: var(--leo-encre-a-06); --app-empty-bg: #FAFAF7; --app-empty-border: var(--leo-encre-a-12); --app-badge-neutral-bg: var(--leo-encre-a-06); --app-badge-neutral-color: var(--leo-encre-soft); --app-badge-neutral-border: var(--leo-encre-a-10); --app-notice-bg: #FAFAF7; --app-notice-border: var(--leo-encre-a-08); --app-notice-color: var(--leo-encre-soft); --app-range-bg: #FAFAF7; --app-range-border: var(--leo-encre-a-06); --app-pending-bg: #FFF1E0; --app-pending-border: #FFD9B0; --app-pending-color: var(--leo-warning-text); --app-failed-bg: #FDECEC; --app-failed-border: #F8C7C7; --app-failed-color: var(--leo-error-dark); } /* ============================================================ LANG SWITCHER — Variables par thème ============================================================ */ html.light .lang-switcher { --ls-bg-hover: rgba(0, 0, 0, 0.04); --ls-bg-active: rgba(0, 0, 0, 0.04); --ls-bg-item-hover: rgba(0, 0, 0, 0.05); --ls-menu-bg: #ffffff; --ls-menu-border: rgba(0, 0, 0, 0.08); --ls-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); --ls-text: inherit; --ls-caret-opacity: 0.6; } html.dark .lang-switcher { --ls-bg-hover: rgba(255, 255, 255, 0.06); --ls-bg-active: rgba(255, 255, 255, 0.06); --ls-bg-item-hover: rgba(255, 255, 255, 0.08); --ls-menu-bg: #1c1c1e; --ls-menu-border: rgba(255, 255, 255, 0.08); --ls-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --ls-text: inherit; --ls-caret-opacity: 0.7; }