/* ========================================================================== Variables & Reset ========================================================================== */ :root { --primary: #1B2A4A; --secondary: #FF7A59; --accent: #35D0A6; --dark: #10131C; --light: #F6F7FB; --text: #2A2E3A; --text-light: #6B7280; --white: #FFFFFF; --gradient: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); --shadow: 0 10px 30px rgba(16, 19, 28, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } /* FIX #4 : "scroll-behavior: smooth" sur entre en conflit avec le scroll à la molette (le navigateur essaie d'appliquer un easing à CHAQUE micro-scroll de la molette, ce qui donne l'impression que le scroll "bloque" par moments). Le scroll fluide vers les ancres est déjà géré en JS (window.scrollTo({behavior:"smooth"})), donc on retire la règle CSS globale. */ html { scroll-behavior: auto; } body { font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); background-color: var(--white); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .section { padding: 100px 0; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 50px; font-weight: 600; font-size: 16px; transition: var(--transition); position: relative; overflow: hidden; border: none; cursor: pointer; gap: 10px; } .btn-primary { background: var(--gradient); color: var(--white); } .btn-secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-secondary:hover { background: var(--primary); color: var(--white); } .btn-text { position: relative; z-index: 2; } .btn-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .magnetic { position: relative; } /* ========================================================================== Animated Background Elements ========================================================================== */ .bg-elements { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .circle { position: absolute; border-radius: 50%; opacity: 0.1; background: var(--gradient); animation: float 15s infinite ease-in-out; } .circle-1 { width: 300px; height: 300px; top: -150px; left: -150px; animation-delay: 0s; } .circle-2 { width: 200px; height: 200px; bottom: 50px; right: 100px; animation-delay: 5s; } .circle-3 { width: 150px; height: 150px; top: 50%; left: 80%; animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-20px) translateX(10px); } 50% { transform: translateY(10px) translateX(-20px); } 75% { transform: translateY(-10px) translateX(20px); } } /* ========================================================================== Header & Navigation ========================================================================== */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 20px 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: var(--transition); } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo h1 { font-size: 24px; margin-bottom: 5px; } .logo h1 span { color: var(--accent); } .tagline { font-size: 12px; color: var(--text-light); letter-spacing: 1px; text-transform: uppercase; } /* FIX #2 : le bouton de langue est maintenant un enfant direct de