* {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Space Grotesk', sans-serif;
            overflow-x: hidden;
            background-color: #061018;
            /* cursor: none; a été supprimé */
        }
        
        /* Les règles pour le curseur moderne (.cursor-dot, .cursor-outline) ont été supprimées */

        /* Hero Background - Animated Starfield */
        #home {
            background-color: #061018;
        }
        .stars {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%; height: 100%;
            display: block;
            background: #061018 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAQAAAAm93DmAAAAAXNSR0IArs4c6QAAAB5JREFUeNrtwQENAAAAwiD7p7bHBwwAAAAg7A0wUwA+o24g3QAAAABJRU5ErkJggg==) repeat top left;
            z-index: 0;
            animation: animateStars 50s linear infinite;
        }
        @keyframes animateStars {
           from { background-position: 0 0; }
           to { background-position: 0 -10000px; }
        }

        /* Ultra Modern Animations */
        @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-15px) rotate(2deg); } 66% { transform: translateY(15px) rotate(-2deg); } }
        @keyframes glow { from { box-shadow: 0 0 20px rgba(0, 102, 255, 0.3), 0 0 40px rgba(0, 102, 255, 0.2); } to { box-shadow: 0 0 30px rgba(0, 102, 255, 0.6), 0 0 60px rgba(0, 102, 255, 0.4); } }
        @keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes slideDown { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes fadeInUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.4); } 50% { box-shadow: 0 0 40px rgba(34, 211, 238, 0.8), 0 0 60px rgba(34, 211, 238, 0.4); } }
        @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }

        /* Glassmorphism ultra-moderne */
        .glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); transition: all 0.4s ease; }
        .glass-card:hover { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 102, 255, 0.3); transform: translateY(-10px); box-shadow: 0 35px 60px rgba(0, 102, 255, 0.2); }

        /* Navigation futuriste */
        .nav-glass { background: rgba(6, 16, 24, 0.85); backdrop-filter: blur(25px); border-bottom: 1px solid rgba(0, 102, 255, 0.2); }
        .shine-effect { position: relative; overflow: hidden; }
        .shine-effect::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.6s; }
        .shine-effect:hover::before { left: 100%; }

        /* Boutons néon */
        .neon-btn { background: linear-gradient(135deg, #0066FF, #00A8FF); box-shadow: 0 0 20px rgba(0, 102, 255, 0.4); border: 1px solid rgba(0, 102, 255, 0.5); transition: all 0.3s ease; }
        .neon-btn:hover { box-shadow: 0 0 30px rgba(0, 102, 255, 0.8), 0 0 50px rgba(0, 102, 255, 0.4); transform: translateY(-3px); }

        /* Timeline moderne */
        .timeline-line { background: linear-gradient(to bottom, #0066FF, #22D3EE, #0066FF); width: 4px; position: relative; }
        .timeline-line::before { content: ''; position: absolute; top: 0; left: 50%; width: 8px; height: 100%; background: linear-gradient(to bottom, rgba(0, 102, 255, 0.3), rgba(34, 211, 238, 0.3)); transform: translateX(-50%); filter: blur(4px); }
        
        /* Skills avec effet néon */
        .skill-card { background: rgba(0, 102, 255, 0.05); border: 1px solid rgba(0, 102, 255, 0.2); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        .skill-card:hover { background: rgba(0, 102, 255, 0.1); border: 1px solid rgba(0, 102, 255, 0.5); box-shadow: 0 20px 40px rgba(0, 102, 255, 0.2); transform: translateY(-8px) rotateX(5deg); }

        /* Typewriter avancé */
        .typewriter { overflow: hidden; border-right: 3px solid #22D3EE; white-space: nowrap; }
        .is-typing { animation: typing 1.5s steps(20, end), blink .75s step-end infinite; }
        @keyframes typing { from { width: 0 } to { width: 100% } }
        @keyframes blink { from, to { border-color: transparent } 50% { border-color: #22D3EE; } }

        /* Scroll indicator */
        .scroll-indicator { animation: bounce 2s infinite; }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } 60% { transform: translateY(-10px); } }

        /* Projects grid moderne */
        .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
        .project-card-modern { background: linear-gradient(135deg, rgba(0, 102, 255, 0.03) 0%, rgba(34, 211, 238, 0.03) 100%); border: 1px solid rgba(0, 102, 255, 0.15); backdrop-filter: blur(10px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
        .project-card-modern:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 30px 60px rgba(0, 102, 255, 0.25); border: 1px solid rgba(0, 102, 255, 0.4); }

        /* Loading bar */
        .loading-bar { background: linear-gradient(90deg, #0066FF, #22D3EE, #0066FF); background-size: 200% 100%; animation: loading 2s ease-in-out infinite; }
        @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        /* Menu hamburger futuriste */
        .hamburger { width: 30px; height: 20px; position: relative; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; }
        .hamburger span { display: block; position: absolute; height: 3px; width: 100%; background: #22D3EE; border-radius: 9px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
        .hamburger span:nth-child(1) { top: 0px; } .hamburger span:nth-child(2) { top: 8px; } .hamburger span:nth-child(3) { top: 16px; }
        .hamburger.active span:nth-child(1) { top: 8px; transform: rotate(135deg); }
        .hamburger.active span:nth-child(2) { opacity: 0; left: -60px; }
        .hamburger.active span:nth-child(3) { top: 8px; transform: rotate(-135deg); }

        /* Text gradient */
        .text-gradient { background: linear-gradient(135deg, #0066FF, #22D3EE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

        /* Intersection Observer animations */
        .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
        .animate-on-scroll.in-view { opacity: 1; transform: translateY(0); }