/* ========================================================================== EXIGENCES GROUPE — DESIGN SYSTEM / TOKENS Source unique de vérité. Chaque valeur est mappable sur un réglage Elementor (Site Settings > Global Colors / Global Fonts). ========================================================================== */ :root { /* --------------------------------------------------------------- COULEURS — PRIMITIVES Identité conservée : le doré du logo. Exécution premium : on l'ancre sur un bleu-nuit profond plutôt que sur du noir pur, pour éviter l'effet "template sombre" et gagner en profondeur. --------------------------------------------------------------- */ /* Or — couleur de marque, issue du logo existant */ --eg-gold-50: #FDF8EC; --eg-gold-100: #FAEFCF; --eg-gold-200: #F4DE9F; --eg-gold-300: #EDCA6B; --eg-gold-400: #E4B443; --eg-gold-500: #C9992F; /* ancre : contraste AA sur fond sombre ET clair */ --eg-gold-600: #A87C22; --eg-gold-700: #82601C; --eg-gold-800: #5C4315; --eg-gold-900: #3D2C0E; /* Encre — bleu-nuit, socle corporate */ --eg-ink-50: #F5F7FA; --eg-ink-100: #E8ECF3; --eg-ink-200: #CDD5E3; --eg-ink-300: #A3B0C7; --eg-ink-400: #6F80A0; --eg-ink-500: #4A5B7C; --eg-ink-600: #33425F; --eg-ink-700: #232F47; --eg-ink-800: #162032; --eg-ink-900: #0D1523; --eg-ink-950: #070C15; /* Neutres */ --eg-white: #FFFFFF; --eg-black: #000000; /* --------------------------------------------------------------- COULEURS — SÉMANTIQUES (à mapper sur Global Colors Elementor) --------------------------------------------------------------- */ --color-primary: var(--eg-ink-900); --color-primary-hover: var(--eg-ink-800); --color-secondary: var(--eg-ink-600); --color-accent: var(--eg-gold-500); --color-accent-hover: var(--eg-gold-600); --color-accent-soft: var(--eg-gold-100); --color-bg: var(--eg-white); --color-bg-alt: var(--eg-ink-50); --color-bg-inverse: var(--eg-ink-950); --color-surface: var(--eg-white); --color-surface-alt: var(--eg-ink-50); --color-surface-inverse:#111A2B; --color-text: var(--eg-ink-900); --color-text-muted: var(--eg-ink-500); --color-text-inverse: var(--eg-white); --color-text-inverse-muted: var(--eg-ink-300); --color-border: var(--eg-ink-200); --color-border-strong: var(--eg-ink-300); --color-border-inverse: rgba(255, 255, 255, .14); --color-success: #197A4B; --color-warning: #9A6612; --color-error: #B3261E; --color-success-bg: #E8F5EE; --color-warning-bg: #FDF3E0; --color-error-bg: #FCEBEA; /* Version claire des états, pour les blocs posés sur fond sombre (pied de page, sections --dark) où les teintes ci-dessus ne passent pas AA. */ --color-error-inverse: #F2B8B5; --color-success-inverse: #7BD1A4; --color-focus: var(--eg-gold-400); /* --------------------------------------------------------------- TYPOGRAPHIE 2 familles seulement. - Titres : Bricolage Grotesque — caractère éditorial, pas générique. - Texte : Inter — lisibilité écran, excellente couverture FR. Les deux sont Google Fonts (donc disponibles nativement dans Elementor). --------------------------------------------------------------- */ --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Échelle typographique — fluide, clamp() (supporté par Elementor en custom CSS ou reproductible avec les breakpoints natifs) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); --text-3xl: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem); --text-4xl: clamp(2rem, 1.6rem + 2vw, 3rem); --text-5xl: clamp(2.5rem, 1.9rem + 3vw, 4rem); --text-6xl: clamp(2.875rem, 2rem + 4.4vw, 5.25rem); --leading-tight: 1.08; --leading-snug: 1.22; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-tighter:-0.035em; --tracking-wide: 0.02em; --tracking-widest: 0.16em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --------------------------------------------------------------- ESPACEMENT — échelle 4/8 (identique à celle de l'audit) --------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* Rythme vertical des sections — fluide */ --section-y: clamp(4rem, 3rem + 5vw, 8rem); --section-y-tight: clamp(3rem, 2.5rem + 3vw, 5rem); /* --------------------------------------------------------------- LAYOUT --------------------------------------------------------------- */ --container: 1240px; --container-wide: 1440px; --container-text: 68ch; --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); /* --------------------------------------------------------------- RADIUS — logique : plus l'élément est grand, plus le rayon est grand --------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* --------------------------------------------------------------- OMBRES — 3 niveaux seulement, teintées bleu-nuit (jamais du noir pur) --------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(13, 21, 35, .06), 0 1px 3px rgba(13, 21, 35, .04); --shadow-md: 0 4px 12px rgba(13, 21, 35, .07), 0 2px 4px rgba(13, 21, 35, .04); --shadow-lg: 0 18px 40px rgba(13, 21, 35, .10), 0 4px 12px rgba(13, 21, 35, .05); /* --------------------------------------------------------------- MOUVEMENT --------------------------------------------------------------- */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-inout: cubic-bezier(.65, .05, .36, 1); --ease-spring:cubic-bezier(.34, 1.4, .64, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-reveal:900ms; /* Z-index — échelle nommée, pas de valeurs arbitraires */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-menu: 300; --z-overlay: 400; --z-cursor: 9999; } /* Couleurs propres à chaque pôle — utilisées en accent ponctuel (filet, puce, icône), jamais en aplat de fond : l'identité reste dorée. */ :root { --pole-tech: #2C7BE5; --pole-job: #16A171; --pole-prod: #C9992F; --pole-school: #7A5AF8; }