/* ============================================================ DESIGN SYSTEM — Solaire en Location Petitjean Multiservices × Pôle Habitat Ardennes ============================================================ Système de tokens centralisés. Toute valeur utilisée dans base.css et components.css doit venir d'ici. ============================================================ */ :root { /* ========================================================== 1. COULEURS DE MARQUE ========================================================== */ /* Orange — action, énergie, CTA */ --color-orange: #FF6B1A; --color-orange-dark: #E54E00; --color-orange-darker: #C23D00; --color-orange-light: #FFEDD5; /* backgrounds doux, badges */ --color-orange-lighter: #FFF4E6; /* hover states clairs */ /* Jaune — highlights éditoriaux, soleil */ --color-yellow: #FFC93C; --color-yellow-dark: #E5B22E; --color-yellow-light: #FFF3CC; /* Bleu nuit — structure, autorité, tête/pied de page */ --color-navy: #0A2540; --color-navy-dark: #051527; /* contraste extrême */ --color-navy-soft: #1B3A5C; /* hover sur navy */ /* Vert mint — succès, garanties, checkmarks */ --color-mint: #00D97E; --color-mint-dark: #00B368; --color-mint-light: #D1FAE5; /* Neutres */ --color-cream: #FFF8F0; /* fond général */ --color-cream-dark: #FAEEDB; /* sections alternées */ --color-white: #FFFFFF; /* cartes */ --color-gray: #6B7785; /* texte secondaire */ --color-gray-light: #E5E9EF; /* bordures */ --color-gray-lighter: #F3F5F8; /* fonds input, disabled */ --color-gray-dark: #3D4852; /* texte légèrement atténué */ /* ========================================================== 2. COULEURS SÉMANTIQUES (alias) ========================================================== */ --color-primary: var(--color-orange); --color-primary-hover: var(--color-orange-dark); --color-primary-active: var(--color-orange-darker); --color-accent: var(--color-yellow); --color-success: var(--color-mint); --color-danger: #DC2626; --color-warning: #F59E0B; --color-info: #2563EB; --color-bg: var(--color-cream); --color-bg-alt: var(--color-cream-dark); --color-bg-dark: var(--color-navy); --color-bg-darker: var(--color-navy-dark); --color-bg-card: var(--color-white); --color-text: var(--color-navy); --color-text-soft: var(--color-gray); --color-text-muted: var(--color-gray-dark); --color-text-on-dark: rgba(255, 255, 255, 0.92); --color-text-on-dark-soft:rgba(255, 255, 255, 0.72); --color-text-on-primary: var(--color-white); --color-border: var(--color-gray-light); --color-border-strong: #CBD0D9; --color-link: var(--color-orange-dark); --color-link-hover: var(--color-orange-darker); --color-focus-ring: var(--color-orange); /* ========================================================== 3. GRADIENTS ========================================================== */ --gradient-primary: linear-gradient(135deg, #FF6B1A 0%, #E54E00 100%); --gradient-primary-soft: linear-gradient(135deg, #FFEDD5 0%, #FFF4E6 100%); --gradient-warm: linear-gradient(135deg, #FF6B1A 0%, #FFC93C 100%); --gradient-navy: linear-gradient(135deg, #0A2540 0%, #1B3A5C 100%); --gradient-navy-deep: linear-gradient(135deg, #051527 0%, #0A2540 100%); --gradient-hero: linear-gradient(135deg, #0A2540 0%, #051527 100%); --gradient-mint: linear-gradient(135deg, #00D97E 0%, #00B368 100%); /* Halo / glow decoratifs (utiliser en ::before / ::after) */ --glow-orange: radial-gradient(circle, rgba(255, 107, 26, 0.25) 0%, transparent 70%); --glow-yellow: radial-gradient(circle, rgba(255, 201, 60, 0.22) 0%, transparent 70%); --glow-mint: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%); /* ========================================================== 4. TYPOGRAPHIE ========================================================== */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; /* Échelle modulaire — ratio 1.25 (major third) */ --fs-xs: 0.75rem; /* 12px — micro-labels, disclaimers */ --fs-sm: 0.875rem; /* 14px — meta, captions */ --fs-base: 1rem; /* 16px — corps */ --fs-md: 1.125rem; /* 18px — lead */ --fs-lg: 1.25rem; /* 20px — sub-headings */ --fs-xl: 1.5rem; /* 24px — H4 */ --fs-2xl: 1.875rem; /* 30px — H3 */ --fs-3xl: 2.25rem; /* 36px — H2 mobile */ --fs-4xl: 3rem; /* 48px — H2 desktop, H1 mobile */ --fs-5xl: 3.75rem; /* 60px — H1 desktop */ --fs-6xl: 4.5rem; /* 72px — stats XXL */ --fs-display: clamp(3rem, 7vw, 5.25rem); /* H1 responsive */ --fs-stat: clamp(2.5rem, 6vw, 4.5rem); /* Chiffres XXL */ /* Line height */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.625; --lh-loose: 1.8; /* Letter spacing */ --ls-tighter: -0.04em; --ls-tight: -0.025em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.14em; /* Font weight */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* ========================================================== 5. ESPACEMENTS (échelle 4px-base) ========================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Espacements verticaux de sections (responsive) */ --section-py: clamp(3.5rem, 8vw, 6rem); --section-py-sm: clamp(2.5rem, 6vw, 4rem); --section-py-lg: clamp(5rem, 10vw, 8rem); /* ========================================================== 6. LAYOUT & CONTAINERS ========================================================== */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; --container-padding: clamp(1rem, 4vw, 2rem); /* Breakpoints (pour référence JS — les media queries restent écrites) */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ========================================================== 7. RADIUS ========================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ========================================================== 8. SHADOWS ========================================================== */ --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.05); --shadow-sm: 0 2px 4px rgba(10, 37, 64, 0.06), 0 1px 2px rgba(10, 37, 64, 0.04); --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 2px 4px rgba(10, 37, 64, 0.04); --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12), 0 4px 8px rgba(10, 37, 64, 0.06); --shadow-xl: 0 24px 48px rgba(10, 37, 64, 0.16), 0 8px 16px rgba(10, 37, 64, 0.08); --shadow-2xl: 0 32px 64px rgba(10, 37, 64, 0.20); /* Shadows colorées pour CTA */ --shadow-orange: 0 8px 24px rgba(255, 107, 26, 0.32); --shadow-orange-hover: 0 12px 32px rgba(255, 107, 26, 0.42); --shadow-navy: 0 8px 24px rgba(10, 37, 64, 0.28); --shadow-mint: 0 8px 24px rgba(0, 217, 126, 0.28); /* Inner shadow (inputs) */ --shadow-inner: inset 0 1px 2px rgba(10, 37, 64, 0.06); /* ========================================================== 9. BORDURES ========================================================== */ --border-width: 1px; --border-width-thick: 2px; --border-width-heavy: 3px; /* ========================================================== 10. TRANSITIONS & ANIMATIONS ========================================================== */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --transition-base: all var(--duration-base) var(--ease-in-out); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-colors: color var(--duration-base) var(--ease-in-out), background-color var(--duration-base) var(--ease-in-out), border-color var(--duration-base) var(--ease-in-out); --transition-transform: transform var(--duration-base) var(--ease-out); /* ========================================================== 11. Z-INDEX (échelle cohérente) ========================================================== */ --z-base: 0; --z-docked: 10; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; /* ========================================================== 12. FOCUS & ACCESSIBILITÉ ========================================================== */ --focus-ring-width: 2px; --focus-ring-offset: 3px; --focus-ring-color: var(--color-orange); /* Min touch target size (WCAG 2.5.5) */ --touch-target: 44px; } /* ========================================================== 13. DARK MODE — structure prête (à activer si besoin) ========================================================== */ @media (prefers-color-scheme: dark) { /* Actuellement inactif. Pour activer : remplacer les alias sémantiques ici. Commenté volontairement pour garder le site en light. */ } /* ========================================================== 14. PREFERS-REDUCED-MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }