/* ============================================================================= EUP — DESIGN TOKENS (source unique de vérité) Écoles Privées L'Union — palette dérivée des couleurs EXACTES du logo (échantillonnage pixel de web/img/logo.png). Fichier additif : l'inclure ne modifie rien tant qu'il n'est pas référencé. Aucune valeur de marque en dur ailleurs : tout pointe vers ces variables. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. COULEURS DE MARQUE — échelles tonales --------------------------------------------------------------------------- */ /* Navy — couleur primaire (wordmark "L'UNION"), ancrée sur #242E5F */ --c-navy-50: #eef0f6; --c-navy-100: #d5dae9; --c-navy-200: #abb4d0; --c-navy-300: #7e8bb4; --c-navy-400: #51629a; --c-navy-500: #364784; --c-navy-600: #242e5f; /* ◀ couleur de marque */ --c-navy-700: #1e2750; --c-navy-800: #161c3b; --c-navy-900: #0e1226; /* Couleurs de l'emblème "union" (5 personnages) — base / clair / soutenu */ --c-red: #e8344b; --c-red-soft: #fbe1e5; --c-red-strong: #c01f34; --c-orange: #f18537; --c-orange-soft: #fde7d6; --c-orange-strong: #cf6a1f; --c-yellow: #fbc92b; --c-yellow-soft: #fef3cf; --c-yellow-strong: #d9a700; --c-green: #8dc36b; --c-green-soft: #e7f2dc; --c-green-strong: #5f9a3e; --c-sky: #91d4f1; --c-sky-soft: #e2f4fb; --c-sky-strong: #4aa8cf; /* Neutres — du blanc au quasi-noir */ --c-white: #ffffff; --c-n-50: #f7f8fa; --c-n-100: #eef0f4; --c-n-200: #dce0e8; --c-n-300: #c2c8d4; --c-n-400: #9aa3b5; --c-n-500: #717c92; --c-n-600: #545e72; --c-n-700: #3d4658; --c-n-800: #272e3c; --c-n-900: #141821; /* --------------------------------------------------------------------------- 2. TOKENS SÉMANTIQUES (à utiliser dans les composants, pas les couleurs brutes) --------------------------------------------------------------------------- */ --color-primary: var(--c-navy-600); --color-primary-hover: var(--c-navy-700); --color-primary-active: var(--c-navy-800); --color-on-primary: var(--c-white); --color-accent: var(--c-red); /* CTA secondaire / accent vif */ --color-accent-hover: var(--c-red-strong); --color-on-accent: var(--c-white); --color-surface: var(--c-white); --color-surface-muted: var(--c-n-50); --color-surface-sunken: var(--c-n-100); --color-text: var(--c-n-900); --color-text-secondary: var(--c-n-600); --color-text-muted: var(--c-n-500); --color-on-dark: var(--c-white); --color-border: var(--c-n-200); --color-border-strong: var(--c-n-300); --color-success: var(--c-green-strong); --color-success-bg: var(--c-green-soft); --color-warning: var(--c-yellow-strong); --color-warning-bg: var(--c-yellow-soft); --color-error: var(--c-red); --color-error-bg: var(--c-red-soft); --color-info: var(--c-sky-strong); --color-info-bg: var(--c-sky-soft); --color-focus-ring: var(--c-sky-strong); /* --------------------------------------------------------------------------- 3. TYPOGRAPHIE (Poppins = titres, Inter = corps — déjà chargées dans ) --------------------------------------------------------------------------- */ --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* Échelle modulaire (ratio ~1.2 "minor third"), base 16px */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.333rem; /* ~21 */ --text-xl: 1.602rem; /* ~26 */ --text-2xl: 1.953rem; /* ~31 */ --text-3xl: 2.441rem; /* ~39 */ --text-4xl: 3.052rem; /* ~49 */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; --measure: 68ch; /* longueur de ligne lisible ~60-75 caractères */ /* --------------------------------------------------------------------------- 4. ESPACEMENTS (échelle 4/8) --------------------------------------------------------------------------- */ --space-0: 0; --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 */ --container-max: 1200px; --container-pad: var(--space-5); /* --------------------------------------------------------------------------- 5. RAYONS, OMBRES, BORDURES --------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(20, 24, 33, 0.06); --shadow-sm: 0 2px 6px rgba(20, 24, 33, 0.08); --shadow-md: 0 8px 24px rgba(20, 24, 33, 0.10); --shadow-lg: 0 18px 48px rgba(20, 24, 33, 0.14); --border-width: 1px; /* --------------------------------------------------------------------------- 6. Z-INDEX (échelle nommée) --------------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* --------------------------------------------------------------------------- 7. MOTION (durées + courbes — sobre = premium) --------------------------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* --------------------------------------------------------------------------- 8. BREAKPOINTS (valeurs de référence — pour @custom-media / JS) Réels : ~360 / 768 / 1024 / 1280 --------------------------------------------------------------------------- */ --bp-sm: 360px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* --------------------------------------------------------------------------- 9. ÉTATS PARTAGÉS — focus accessible & mouvement réduit Utilisables tels quels sans casser l'existant. --------------------------------------------------------------------------- */ .eup-focusable:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } /* Garde anti-débordement horizontal global (marges négatives Bootstrap legacy). `clip` n'affecte ni le header fixe ni le défilement vertical. */ .main { overflow-x: hidden; overflow-x: clip; } /* Lien d'évitement (skip link) — visible uniquement au focus clavier */ .el-skip { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: var(--weight-semibold); text-decoration: none; box-shadow: var(--shadow-md); transition: top var(--dur-base) var(--ease-standard); } .el-skip:focus { top: var(--space-4); } #contenu:focus { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }