:root { /* ============================================ PALETTE COULEURS — ELECTRIC BLUE #00AEEF ============================================ */ /* Primary — Electric Blue */ --color-blue-50: #e6f7fd; --color-blue-100: #b3e5f9; --color-blue-200: #80d4f5; --color-blue-300: #4dc2f1; --color-blue-400: #26b5ee; --color-blue-500: #00AEEF; /* PRIMARY */ --color-blue-600: #0096cc; --color-blue-700: #007ea8; /* Accent — Deep Blue (remplace violet) */ --color-accent-50: #e0f2ff; --color-accent-100: #b3deff; --color-accent-400: #3babf5; --color-accent-500: #0077B6; /* ACCENT — Deep Electric Blue */ --color-accent-600: #005f94; --color-accent-700: #004e7a; /* Teal — Complément du bleu électrique */ --color-teal-50: #e0f7f7; --color-teal-100: #b3ecec; --color-teal-500: #00B4D8; --color-teal-600: #0096b5; /* Green / Success */ --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-400: #4ade80; --color-green-500: #22c55e; /* SUCCESS, WhatsApp */ --color-green-600: #16a34a; /* Orange / Warning */ --color-orange-50: #fff7ed; --color-orange-100: #ffedd5; --color-orange-400: #fb923c; --color-orange-500: #f59e0b; /* WARNING, étoiles */ --color-orange-600: #d97706; /* Red / Error */ --color-red-50: #fef2f2; --color-red-500: #ef4444; /* Rose/Pink */ --color-pink-50: #fdf2f8; --color-pink-500: #ec4899; /* Indigo */ --color-indigo-50: #eef2ff; --color-indigo-500: #6366f1; /* Neutrals (Slate) */ --color-slate-50: #f8fafc; /* Fond sections alternées */ --color-slate-100: #f1f5f9; /* Fond badges, inputs */ --color-slate-200: #e2e8f0; /* Borders */ --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; /* Texte secondaire léger */ --color-slate-500: #64748b; /* Texte body/descriptions */ --color-slate-600: #475569; /* Texte medium */ --color-slate-700: #334155; --color-slate-800: #1e293b; /* Fond sombre (méthode, footer) */ --color-slate-900: #0f172a; /* Fond très sombre */ --color-slate-950: #020617; --color-white: #ffffff; --color-black: #000000; /* ============================================ COULEURS SÉMANTIQUES ============================================ */ --color-primary: var(--color-blue-500); /* #00AEEF */ --color-primary-hover: var(--color-blue-600); /* #0096cc */ --color-primary-light: var(--color-blue-50); --color-accent: var(--color-accent-500); /* #0077B6 — Deep Blue */ --color-success: var(--color-green-500); --color-warning: var(--color-orange-500); --color-error: var(--color-red-500); --color-text: var(--color-slate-800); --color-text-secondary:var(--color-slate-500); --color-text-light: var(--color-slate-400); --color-border: var(--color-slate-200); --color-bg: var(--color-white); --color-bg-alt: var(--color-slate-50); --color-bg-dark: var(--color-slate-800); --color-bg-footer: var(--color-slate-900); /* ============================================ TYPOGRAPHIE ============================================ */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: clamp(2rem, 4vw, 3.2rem); /* H1 — Légèrement réduit vs clamp(2.5,5vw,4rem) */ --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; /* ============================================ ESPACEMENTS ============================================ */ --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 */ --section-padding: var(--space-20) 0; --container-max: 1200px; --container-padding: var(--space-6); /* ============================================ BORDER RADIUS ============================================ */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 999px; /* ============================================ OMBRES LAYERED (Finition premium) ============================================ */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05); --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.18); /* Layered brand shadows */ --shadow-blue: 0 4px 6px -1px rgba(0,174,239,0.15), 0 10px 20px -5px rgba(0,174,239,0.20), 0 20px 40px -10px rgba(0,174,239,0.10); --shadow-blue-hover: 0 6px 12px -1px rgba(0,174,239,0.25), 0 20px 40px -5px rgba(0,174,239,0.30), 0 30px 60px -10px rgba(0,174,239,0.15); --shadow-accent: 0 8px 24px rgba(0,119,182,0.20); --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.10); --shadow-glass: 0 8px 32px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6); --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.15); /* ============================================ GLASSMORPHISM ============================================ */ --glass-bg: rgba(255,255,255,0.08); --glass-bg-light: rgba(255,255,255,0.60); --glass-border: rgba(255,255,255,0.15); --glass-border-blue: rgba(0,174,239,0.25); --glass-blur: blur(20px); --glass-blur-light: blur(12px); /* ============================================ TRANSITIONS cubic-bezier premium ============================================ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; --transition-base: all var(--duration-normal) var(--ease-out); --transition-spring: all var(--duration-slow) var(--ease-spring); --transition-slow: all var(--duration-slow) var(--ease-out); } /* ============================================ DARK MODE — Overrides ============================================ */ [data-theme="dark"] { --color-bg: #0f172a; --color-bg-alt: #1e293b; --color-text: #e2e8f0; --color-text-secondary:#94a3b8; --color-border: rgba(148, 163, 184, 0.12); --color-bg-footer: #020617; --glass-bg: rgba(255,255,255,0.04); --glass-bg-light: rgba(255,255,255,0.06); --glass-border: rgba(255,255,255,0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.35); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.40); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.45); --shadow-card-hover:0 20px 40px rgba(0,0,0,0.40); --shadow-glass: 0 8px 32px 0 rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05); }