<style>
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap');
        
        :root { 
            --turquoise: #289DB9; 
            --violet: #B9289D; 
            --blue-gray: #405A66; 
        }

        body { 
            background: #050508; 
            color: #e0e0e0; 
            font-family: 'JetBrains Mono', monospace; 
            cursor: crosshair; 
            overflow-x: hidden; 
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 0;
        }

        /* --- STYLE DU LOADER --- */
        #loader { transition: opacity 0.8s ease-in-out; }
        .dot-animation::after {
            content: '';
            animation: dots 1.5s infinite;
        }
        @keyframes dots {
            0% { content: ''; }
            33% { content: '.'; }
            66% { content: '..'; }
            100% { content: '...'; }
        }

        /* Scanlines Effect - Corrigé pour libérer les clics sur mobile */
        .scanlines::before {
            content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
            z-index: -1; 
            background-size: 100% 4px, 3px 100%; 
            pointer-events: none;
        }

        /* Menu Mobile Transition */
        #mobile-menu {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(100%);
        }
        #mobile-menu.open {
            transform: translateX(0);
        }

        .cyber-button { clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0% 30%); }

        #back-to-top {
            position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px;
            background: rgba(0,0,0,0.8); border: 1px solid var(--turquoise); color: var(--turquoise);
            display: flex; align-items: center; justify-content: center; opacity: 0;
            visibility: hidden; transition: all 0.3s; z-index: 9999; cursor: pointer;
        }
        #back-to-top.show { opacity: 1; visibility: visible; }

        /* --- NAVIGATION --- */
        .nav-dropdown { position: relative; }
        .nav-dropdown-content {
            display: none; background-color: #000; min-width: 220px;
            border: 1px solid rgba(40, 157, 185, 0.3); z-index: 100;
        }
        
        @media (min-width: 768px) {
            .nav-dropdown-content { position: absolute; top: 100%; left: 0; }
            .nav-dropdown:hover .nav-dropdown-content { display: block; }
        }

        .logo-container {
            display: flex; align-items: center; justify-content: center;
            overflow: hidden; background: transparent;
        }
        .logo-clean { object-fit: contain; }

        main { position: relative; z-index: 10; }
		
				/* Animation de rotation lente pour le logo central */
		@keyframes spin-slow {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
		}

		.cyber-rotate {
			animation: spin-slow 40s linear infinite;
		}


			/* Animation de clignotement type néon/système */
			@keyframes cyber-pulse {
				0%, 100% { 
					opacity: 1; 
					filter: drop-shadow(0 0 15px rgba(40, 157, 185, 0.4));
				}
				50% { 
					opacity: 0.7; 
					filter: drop-shadow(0 0 5px rgba(40, 157, 185, 0.1));
				}
			}

			.cyber-blink {
				animation: cyber-pulse 2s ease-in-out infinite;
}


		/* Optionnel : un effet de lueur pulsante derrière l'image */
		.glow-effect {
			filter: drop-shadow(0 0 15px rgba(40, 157, 185, 0.3));
		}
    </style>