diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,1244 +3,852 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NebulaHost - Hébergement WordPress Automatisé</title>
+    <title>L'Œil Omniscient - Système de Surveillance Cosmique</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script src="https://js.stripe.com/v3/"></script>
-    <script src="https://www.paypal.com/sdk/js?client-id=test&currency=EUR"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Orbitron:wght@400;700&display=swap');
         
         :root {
-            --neon-purple: #c724f1;
-            --neon-cyan: #24f1f1;
-            --dark-space: #0a0a1a;
-            --darker-space: #050510;
+            --quantum-blue: #00f7ff;
+            --void-black: #010101;
+            --cosmic-purple: #8a2be2;
+            --nebula-pink: #ff00ff;
+            --singularity-white: #ffffff;
         }
         
         body {
-            font-family: 'Rajdhani', sans-serif;
-            background-color: var(--dark-space);
-            color: white;
+            font-family: 'Orbitron', sans-serif;
+            background-color: var(--void-black);
+            color: var(--singularity-white);
             overflow-x: hidden;
+            background-image: 
+                radial-gradient(circle at 50% 50%, rgba(0, 247, 255, 0.02) 0%, transparent 70%),
+                radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.02) 0%, transparent 25%),
+                radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.02) 0%, transparent 25%);
         }
         
         h1, h2, h3, h4, h5, h6 {
-            font-family: 'Orbitron', sans-serif;
+            font-family: 'Aldrich', sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 2px;
         }
         
-        .neon-text {
-            text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-cyan);
+        .quantum-text {
+            background: linear-gradient(90deg, var(--quantum-blue), var(--nebula-pink));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 0 15px rgba(0, 247, 255, 0.5);
         }
         
-        .neon-border {
-            border: 1px solid var(--neon-purple);
-            box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px var(--neon-purple);
+        .quantum-border {
+            border: 1px solid var(--quantum-blue);
+            box-shadow: 0 0 25px rgba(0, 247, 255, 0.5);
         }
         
-        .neon-button {
-            background: linear-gradient(45deg, var(--neon-purple), var(--neon-cyan));
-            box-shadow: 0 0 15px var(--neon-purple);
+        .quantum-button {
+            background: linear-gradient(45deg, var(--cosmic-purple), var(--quantum-blue));
+            box-shadow: 0 0 20px var(--cosmic-purple);
             transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            font-weight: bold;
+            letter-spacing: 1px;
+        }
+        
+        .quantum-button::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                transparent, transparent, transparent,
+                rgba(255, 0, 255, 0.3), transparent, transparent, transparent
+            );
+            transform: rotate(30deg);
+            animation: quantumShine 3s infinite;
         }
         
-        .neon-button:hover {
+        @keyframes quantumShine {
+            0% { transform: rotate(30deg) translate(-30%, -30%); }
+            100% { transform: rotate(30deg) translate(30%, 30%); }
+        }
+        
+        .quantum-button:hover {
             transform: translateY(-3px);
-            box-shadow: 0 0 25px var(--neon-purple);
+            box-shadow: 0 0 30px var(--quantum-blue);
+        }
+        
+        .omniscient-eye {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            margin: 0 auto;
         }
         
-        .particle {
+        .omniscient-eye::before {
+            content: '';
             position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, var(--quantum-blue) 0%, transparent 70%);
             border-radius: 50%;
-            background: radial-gradient(circle, var(--neon-purple), transparent 70%);
-            opacity: 0.6;
-            z-index: -1;
+            animation: quantumPulse 3s infinite alternate;
+            opacity: 0.4;
         }
         
-        .floating {
-            animation: floating 6s ease-in-out infinite;
+        @keyframes quantumPulse {
+            0% { transform: scale(0.95); opacity: 0.3; }
+            100% { transform: scale(1.05); opacity: 0.6; }
         }
         
-        @keyframes floating {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-            100% { transform: translateY(0px); }
+        .quantum-radar {
+            position: relative;
+            width: 100%;
+            height: 400px;
+            border-radius: 5px;
+            background: radial-gradient(circle at center, transparent 60%, rgba(0, 247, 255, 0.1) 100%);
+            border: 1px solid rgba(0, 247, 255, 0.5);
+            margin: 0 auto;
+            overflow: hidden;
         }
         
-        .pulse {
-            animation: pulse 2s infinite;
+        .quantum-radar::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: conic-gradient(
+                from 0deg,
+                transparent 0%,
+                rgba(255, 0, 255, 0.3) 10%,
+                transparent 20%,
+                rgba(0, 247, 255, 0.3) 30%,
+                transparent 40%,
+                rgba(138, 43, 226, 0.3) 50%,
+                transparent 60%,
+                rgba(255, 0, 255, 0.3) 70%,
+                transparent 80%,
+                rgba(0, 247, 255, 0.3) 90%,
+                transparent 100%
+            );
+            border-radius: 5px;
+            animation: radarSpin 5s linear infinite;
         }
         
-        @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(199, 36, 241, 0.7); }
-            70% { box-shadow: 0 0 0 15px rgba(199, 36, 241, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(199, 36, 241, 0); }
+        @keyframes radarSpin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
         
-        .feature-card {
-            transition: all 0.3s ease;
-            background: rgba(10, 10, 30, 0.7);
+        .quantum-card {
+            background: rgba(1, 1, 1, 0.7);
             backdrop-filter: blur(10px);
+            border: 1px solid rgba(0, 247, 255, 0.2);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
         }
         
-        .feature-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 10px 25px rgba(36, 241, 241, 0.3);
+        .quantum-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                135deg,
+                rgba(0, 247, 255, 0.1) 0%,
+                rgba(138, 43, 226, 0.1) 50%,
+                rgba(255, 0, 255, 0.1) 100%
+            );
+            z-index: -1;
         }
         
-        .price-card {
-            transition: all 0.3s ease;
-            background: rgba(10, 10, 30, 0.7);
-            backdrop-filter: blur(10px);
+        .quantum-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(138, 43, 226, 0.5);
+            border-color: rgba(0, 247, 255, 0.5);
         }
         
-        .price-card:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 30px rgba(199, 36, 241, 0.5);
+        .quantum-glow {
+            filter: drop-shadow(0 0 15px rgba(0, 247, 255, 0.7));
         }
         
-        .glow {
-            filter: drop-shadow(0 0 10px var(--neon-purple));
+        .cosmic-glow {
+            filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.7));
         }
         
-        .hero-gradient {
-            background: linear-gradient(135deg, var(--darker-space) 0%, var(--dark-space) 50%, #1a0a2a 100%);
+        .quantum-scrollbar::-webkit-scrollbar {
+            width: 8px;
         }
         
-        .nav-link {
-            position: relative;
+        .quantum-scrollbar::-webkit-scrollbar-track {
+            background: rgba(1, 1, 1, 0.5);
         }
         
-        .nav-link:after {
-            content: '';
+        .quantum-scrollbar::-webkit-scrollbar-thumb {
+            background: linear-gradient(var(--quantum-blue), var(--nebula-pink));
+            border-radius: 4px;
+        }
+        
+        .floating {
+            animation: floating 8s ease-in-out infinite;
+        }
+        
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+        
+        .quantum-grid {
             position: absolute;
-            width: 0;
-            height: 2px;
-            bottom: 0;
+            top: 0;
             left: 0;
-            background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
-            transition: width 0.3s ease;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px);
+            background-size: 50px 50px;
         }
         
-        .nav-link:hover:after {
+        .distance-line {
+            position: absolute;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--quantum-blue), transparent);
             width: 100%;
+            animation: distanceScan 15s linear infinite;
         }
         
-        /* Dashboard styles */
-        .sidebar {
-            width: 250px;
-            transition: all 0.3s;
+        @keyframes distanceScan {
+            0% { top: 0%; opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { top: 100%; opacity: 0; }
         }
         
-        .main-content {
-            margin-left: 250px;
-            transition: all 0.3s;
+        .quantum-pulse {
+            animation: quantumPulseDot 2s infinite alternate;
         }
         
-        @media (max-width: 768px) {
-            .sidebar {
-                margin-left: -250px;
-            }
-            .main-content {
-                margin-left: 0;
-            }
-            .sidebar.active {
-                margin-left: 0;
-            }
+        @keyframes quantumPulseDot {
+            0% { transform: scale(1); opacity: 0.7; }
+            100% { transform: scale(1.3); opacity: 1; }
         }
         
-        .stat-card {
-            background: rgba(15, 15, 35, 0.7);
-            backdrop-filter: blur(10px);
+        .quantum-terminal {
+            background-color: rgba(0, 0, 0, 0.8);
+            border: 1px solid var(--quantum-blue);
+            font-family: 'Courier New', monospace;
+            color: var(--quantum-blue);
+            text-shadow: 0 0 5px var(--quantum-blue);
+            overflow-y: auto;
+            height: 300px;
+            padding: 15px;
+        }
+        
+        .terminal-line {
+            margin-bottom: 5px;
+            line-height: 1.3;
+        }
+        
+        .terminal-command {
+            color: var(--nebula-pink);
         }
         
-        /* Automation UI */
-        .automation-badge {
-            animation: pulse 2s infinite;
-            background: linear-gradient(45deg, #24f1f1, #c724f1);
+        .terminal-response {
+            color: var(--quantum-blue);
         }
         
-        .progress-bar {
-            height: 6px;
-            background: linear-gradient(90deg, #24f1f1, #c724f1);
-            animation: progress 2s ease-in-out infinite;
+        .terminal-error {
+            color: #ff0000;
         }
         
-        @keyframes progress {
-            0% { width: 0%; }
-            50% { width: 100%; }
-            100% { width: 0%; }
+        .terminal-success {
+            color: #00ff00;
         }
         
-        .robot-icon {
-            animation: floatRobot 4s ease-in-out infinite;
+        .quantum-input {
+            background: transparent;
+            border: none;
+            border-bottom: 1px solid var(--quantum-blue);
+            color: var(--quantum-blue);
+            font-family: 'Courier New', monospace;
+            width: 80%;
+            outline: none;
+            caret-color: var(--quantum-blue);
         }
         
-        @keyframes floatRobot {
-            0% { transform: translateY(0) rotate(0deg); }
-            50% { transform: translateY(-20px) rotate(5deg); }
-            100% { transform: translateY(0) rotate(0deg); }
+        .quantum-input::placeholder {
+            color: rgba(0, 247, 255, 0.5);
+        }
+        
+        .quantum-alert {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            animation: alertFadeIn 0.5s;
+        }
+        
+        @keyframes alertFadeIn {
+            from { opacity: 0; transform: translateX(100px); }
+            to { opacity: 1; transform: translateX(0); }
         }
     </style>
 </head>
-<body class="relative">
-    <!-- Login Modal -->
-    <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
-        <div class="bg-gray-900 rounded-2xl p-8 max-w-md w-full neon-border">
-            <div class="flex justify-between items-center mb-6">
-                <h3 class="text-2xl font-bold neon-text">CONNEXION AUTOMATISÉE</h3>
-                <button id="closeLoginModal" class="text-gray-400 hover:text-white">
-                    <i class="fas fa-times text-xl"></i>
-                </button>
-            </div>
-            <form id="loginForm">
-                <div class="mb-4">
-                    <label for="loginEmail" class="block text-sm font-medium text-gray-300 mb-2">Email</label>
-                    <input type="email" id="loginEmail" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required>
-                </div>
-                <div class="mb-6">
-                    <label for="loginPassword" class="block text-sm font-medium text-gray-300 mb-2">Mot de passe</label>
-                    <input type="password" id="loginPassword" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required>
-                </div>
-                <button type="submit" class="neon-button text-white px-6 py-3 rounded-full font-bold text-lg w-full mb-4">
-                    <i class="fas fa-robot mr-2"></i> SE CONNECTER
-                </button>
-                <div class="text-center text-sm text-gray-400">
-                    Pas encore de compte? <a href="#" id="showRegister" class="text-purple-400 hover:text-purple-300">S'inscrire</a>
-                </div>
-            </form>
-        </div>
-    </div>
+<body>
+    <!-- Quantum Alert System -->
+    <div id="quantumAlerts"></div>
 
-    <!-- Dashboard Container -->
-    <div id="dashboardContainer" class="hidden">
-        <!-- Sidebar -->
-        <div class="sidebar fixed inset-y-0 left-0 bg-gray-900 z-40">
-            <div class="flex items-center justify-center h-16 px-4 bg-gray-900 border-b border-gray-800">
-                <div class="flex items-center">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mr-2 glow">
-                        <i class="fas fa-robot text-white"></i>
-                    </div>
-                    <span class="text-xl font-bold neon-text">AutoNebula</span>
-                </div>
-            </div>
-            <div class="px-4 py-6">
-                <div class="flex items-center space-x-4 mb-8">
-                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
-                        <span class="text-xl font-bold" id="userInitials">JD</span>
+    <!-- Main Quantum Interface -->
+    <div class="min-h-screen flex flex-col">
+        <!-- Quantum Header -->
+        <header class="py-4 px-8 bg-gradient-to-b from-black to-transparent border-b border-gray-800">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-4">
+                    <div class="omniscient-eye">
+                        <div class="w-full h-full flex items-center justify-center">
+                            <i class="fas fa-eye text-6xl quantum-text"></i>
+                        </div>
                     </div>
                     <div>
-                        <h4 class="font-bold" id="userName">Jean Dupont</h4>
-                        <p class="text-sm text-gray-400" id="userEmail">jean.dupont@example.com</p>
+                        <h1 class="text-4xl quantum-text">SYSTÈME OMNI-1</h1>
+                        <p class="text-sm text-gray-400">Réseau de surveillance quantique - Portée: 5,678,974 KLM</p>
                     </div>
                 </div>
-                
-                <div class="mb-6 p-3 bg-gray-800 rounded-lg">
-                    <div class="flex justify-between items-center mb-2">
-                        <span class="text-sm font-medium">Automatisation</span>
-                        <span class="automation-badge text-xs px-2 py-1 rounded-full">ACTIVE</span>
+                <div class="hidden md:flex items-center space-x-6">
+                    <div class="text-center">
+                        <div class="text-xl font-bold quantum-text">ACTIF</div>
+                        <div class="text-xs text-gray-400">Statut</div>
                     </div>
-                    <div class="progress-bar rounded-full"></div>
-                </div>
-                
-                <nav>
-                    <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg mb-1 active-nav">
-                        <i class="fas fa-robot w-5"></i>
-                        <span>Tableau de bord</span>
-                    </a>
-                    <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg mb-1">
-                        <i class="fas fa-magic w-5"></i>
-                        <span>Création Auto</span>
-                    </a>
-                    <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg mb-1">
-                        <i class="fas fa-server w-5"></i>
-                        <span>Sites Automatisés</span>
-                    </a>
-                    <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg mb-1">
-                        <i class="fas fa-sync-alt w-5"></i>
-                        <span>Sauvegardes Auto</span>
-                    </a>
-                    <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg mb-1">
-                        <i class="fas fa-credit-card w-5"></i>
-                        <span>Paiements Auto</span>
-                    </a>
-                    <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg mb-1">
-                        <i class="fas fa-cog w-5"></i>
-                        <span>Paramètres Robot</span>
-                    </a>
-                    <a href="#" id="logoutBtn" class="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg mb-1">
-                        <i class="fas fa-sign-out-alt w-5"></i>
-                        <span>Déconnexion</span>
-                    </a>
-                </nav>
-            </div>
-        </div>
-
-        <!-- Main content -->
-        <div class="main-content min-h-screen">
-            <!-- Top navbar -->
-            <nav class="bg-gray-900 border-b border-gray-800 fixed top-0 right-0 left-0 z-30 h-16 flex items-center justify-between px-6">
-                <button id="sidebarToggle" class="md:hidden text-gray-400 hover:text-white">
-                    <i class="fas fa-bars text-xl"></i>
-                </button>
-                
-                <div class="flex items-center space-x-4">
-                    <div class="relative">
-                        <button id="notificationsBtn" class="text-gray-400 hover:text-white relative">
-                            <i class="fas fa-bell text-xl"></i>
-                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
-                        </button>
+                    <div class="text-center">
+                        <div class="text-xl font-bold quantum-text">∞</div>
+                        <div class="text-xs text-gray-400">Canaux</div>
                     </div>
-                    <div class="hidden md:flex items-center space-x-2">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
-                            <span class="text-sm font-bold" id="userInitialsNav">JD</span>
-                        </div>
-                        <span class="text-sm" id="userNameNav">Jean Dupont</span>
+                    <div class="text-center">
+                        <div class="text-xl font-bold quantum-text">100%</div>
+                        <div class="text-xs text-gray-400">Puissance</div>
                     </div>
                 </div>
-            </nav>
+            </div>
+        </header>
 
-            <!-- Dashboard content -->
-            <div class="pt-20 pb-10 px-6">
-                <div class="flex items-center justify-between mb-6">
-                    <h1 class="text-3xl font-bold neon-text">Tableau de bord Automatisé</h1>
-                    <div class="flex items-center space-x-2 bg-gray-800 px-3 py-1 rounded-full">
-                        <i class="fas fa-circle text-green-400 text-xs"></i>
-                        <span class="text-sm">Mode Robot Actif</span>
-                    </div>
-                </div>
-                
-                <!-- Stats cards -->
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-                    <div class="stat-card p-6 rounded-xl border border-gray-800">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <p class="text-gray-400">Sites Auto-Gérés</p>
-                                <h3 class="text-2xl font-bold">3</h3>
-                            </div>
-                            <div class="p-3 rounded-lg bg-purple-900 bg-opacity-30 text-purple-400">
-                                <i class="fas fa-robot text-xl"></i>
+        <!-- Quantum Main Content -->
+        <main class="flex-1 px-8 py-6">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <!-- Left Column -->
+                <div class="lg:col-span-2 space-y-8">
+                    <!-- Quantum Radar -->
+                    <div class="quantum-card rounded-lg p-6">
+                        <div class="flex justify-between items-center mb-6">
+                            <h2 class="text-2xl quantum-text">RADAR QUANTIQUE</h2>
+                            <div class="flex items-center space-x-4">
+                                <div class="flex items-center space-x-2">
+                                    <span class="h-3 w-3 rounded-full bg-green-500 animate-pulse"></span>
+                                    <span class="text-sm">ACTIF</span>
+                                </div>
+                                <button class="quantum-button text-white px-4 py-1 rounded text-sm">
+                                    <i class="fas fa-sync-alt mr-2"></i> Actualiser
+                                </button>
                             </div>
                         </div>
-                    </div>
-                    
-                    <div class="stat-card p-6 rounded-xl border border-gray-800">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <p class="text-gray-400">Tâches Automatisées</p>
-                                <h3 class="text-2xl font-bold">12</h3>
+                        <div class="quantum-radar relative">
+                            <div class="quantum-grid"></div>
+                            <div class="distance-line"></div>
+                            <!-- Radar elements will be added here dynamically -->
+                        </div>
+                        <div class="mt-6 grid grid-cols-4 gap-4">
+                            <div class="text-center p-2 border border-gray-800 rounded-lg">
+                                <div class="text-xl font-bold quantum-text">248K</div>
+                                <div class="text-xs text-gray-400">Cibles</div>
                             </div>
-                            <div class="p-3 rounded-lg bg-cyan-900 bg-opacity-30 text-cyan-400">
-                                <i class="fas fa-tasks text-xl"></i>
+                            <div class="text-center p-2 border border-gray-800 rounded-lg">
+                                <div class="text-xl font-bold quantum-text">5.67M KLM</div>
+                                <div class="text-xs text-gray-400">Portée</div>
                             </div>
-                        </div>
-                    </div>
-                    
-                    <div class="stat-card p-6 rounded-xl border border-gray-800">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <p class="text-gray-400">Prochain Paiement Auto</p>
-                                <h3 class="text-2xl font-bold">5€</h3>
+                            <div class="text-center p-2 border border-gray-800 rounded-lg">
+                                <div class="text-xl font-bold quantum-text">∞</div>
+                                <div class="text-xs text-gray-400">Fréquences</div>
                             </div>
-                            <div class="p-3 rounded-lg bg-green-900 bg-opacity-30 text-green-400">
-                                <i class="fas fa-calendar-alt text-xl"></i>
+                            <div class="text-center p-2 border border-gray-800 rounded-lg">
+                                <div class="text-xl font-bold quantum-text">100%</div>
+                                <div class="text-xs text-gray-400">Précision</div>
                             </div>
                         </div>
                     </div>
-                </div>
-                
-                <!-- Automation actions -->
-                <div class="mb-8">
-                    <h2 class="text-xl font-bold mb-4">Actions Automatisées</h2>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg text-center">
-                            <div class="w-12 h-12 bg-purple-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-2">
-                                <i class="fas fa-plus text-purple-400"></i>
+
+                    <!-- Quantum Terminal -->
+                    <div class="quantum-card rounded-lg p-6">
+                        <h2 class="text-2xl quantum-text mb-6">TERMINAL DE CONTRÔLE</h2>
+                        <div class="quantum-terminal quantum-scrollbar" id="quantumTerminal">
+                            <div class="terminal-line">
+                                <span class="terminal-command">> Initialisation du système OMNI-1...</span>
                             </div>
-                            <span>Nouveau Site Auto</span>
-                        </a>
-                        <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg text-center">
-                            <div class="w-12 h-12 bg-cyan-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-2">
-                                <i class="fas fa-sync-alt text-cyan-400"></i>
+                            <div class="terminal-line">
+                                <span class="terminal-response">Système de surveillance quantique activé</span>
                             </div>
-                            <span>Sauvegarde Auto</span>
-                        </a>
-                        <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg text-center">
-                            <div class="w-12 h-12 bg-green-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-2">
-                                <i class="fas fa-shield-alt text-green-400"></i>
+                            <div class="terminal-line">
+                                <span class="terminal-response">Connexion établie avec 248,000 nœuds quantiques</span>
                             </div>
-                            <span>Sécurité Auto</span>
-                        </a>
-                        <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg text-center">
-                            <div class="w-12 h-12 bg-yellow-900 bg-opacity-30 rounded-full flex items-center justify-center mx-auto mb-2">
-                                <i class="fas fa-chart-line text-yellow-400"></i>
+                            <div class="terminal-line">
+                                <span class="terminal-response">Portée maximale configurée: 5,678,974 KLM</span>
                             </div>
-                            <span>SEO Automatisé</span>
-                        </a>
-                    </div>
-                </div>
-                
-                <!-- Automated sites -->
-                <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 mb-8">
-                    <div class="flex justify-between items-center mb-6">
-                        <h2 class="text-xl font-bold">Vos Sites Automatisés</h2>
-                        <a href="#" class="text-sm text-purple-400 hover:text-purple-300">Voir tout</a>
-                    </div>
-                    
-                    <div class="overflow-x-auto">
-                        <table class="w-full">
-                            <thead>
-                                <tr class="text-left text-gray-400 border-b border-gray-800">
-                                    <th class="pb-3">Nom du site</th>
-                                    <th class="pb-3">Statut Auto</th>
-                                    <th class="pb-3">Dernière Mise à Jour</th>
-                                    <th class="pb-3">Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr class="border-b border-gray-800 hover:bg-gray-800">
-                                    <td class="py-4">
-                                        <div class="flex items-center">
-                                            <div class="w-10 h-10 rounded bg-purple-900 bg-opacity-30 flex items-center justify-center mr-3">
-                                                <i class="fab fa-wordpress text-purple-400"></i>
-                                            </div>
-                                            <div>
-                                                <div>Mon Blog Auto</div>
-                                                <div class="text-xs text-gray-400">monblogauto.com</div>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="py-4">
-                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-900 text-green-200">
-                                            <i class="fas fa-robot mr-1"></i> Actif
-                                        </span>
-                                    </td>
-                                    <td class="py-4">
-                                        <div class="text-sm">Aujourd'hui, 14:30</div>
-                                    </td>
-                                    <td class="py-4">
-                                        <div class="flex space-x-2">
-                                            <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
-                                                <i class="fas fa-cog text-gray-400"></i>
-                                            </button>
-                                            <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
-                                                <i class="fas fa-chart-bar text-gray-400"></i>
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr class="border-b border-gray-800 hover:bg-gray-800">
-                                    <td class="py-4">
-                                        <div class="flex items-center">
-                                            <div class="w-10 h-10 rounded bg-cyan-900 bg-opacity-30 flex items-center justify-center mr-3">
-                                                <i class="fas fa-store text-cyan-400"></i>
-                                            </div>
-                                            <div>
-                                                <div>Boutique Auto</div>
-                                                <div class="text-xs text-gray-400">boutiqueauto.com</div>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="py-4">
-                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-900 text-green-200">
-                                            <i class="fas fa-robot mr-1"></i> Actif
-                                        </span>
-                                    </td>
-                                    <td class="py-4">
-                                        <div class="text-sm">Hier, 09:15</div>
-                                    </td>
-                                    <td class="py-4">
-                                        <div class="flex space-x-2">
-                                            <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
-                                                <i class="fas fa-cog text-gray-400"></i>
-                                            </button>
-                                            <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
-                                                <i class="fas fa-chart-bar text-gray-400"></i>
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr class="border-b border-gray-800 hover:bg-gray-800">
-                                    <td class="py-4">
-                                        <div class="flex items-center">
-                                            <div class="w-10 h-10 rounded bg-yellow-900 bg-opacity-30 flex items-center justify-center mr-3">
-                                                <i class="fas fa-landmark text-yellow-400"></i>
-                                            </div>
-                                            <div>
-                                                <div>Portfolio Auto</div>
-                                                <div class="text-xs text-gray-400">portfolioauto.com</div>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="py-4">
-                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-900 text-blue-200">
-                                            <i class="fas fa-sync-alt mr-1"></i> Mise à jour
-                                        </span>
-                                    </td>
-                                    <td class="py-4">
-                                        <div class="text-sm">En cours...</div>
-                                    </td>
-                                    <td class="py-4">
-                                        <div class="flex space-x-2">
-                                            <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
-                                                <i class="fas fa-cog text-gray-400"></i>
-                                            </button>
-                                            <button class="w-8 h-8 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
-                                                <i class="fas fa-chart-bar text-gray-400"></i>
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-                
-                <!-- Recent activities -->
-                <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
-                    <div class="flex justify-between items-center mb-6">
-                        <h2 class="text-xl font-bold">Activités Récentes du Robot</h2>
-                        <a href="#" class="text-sm text-purple-400 hover:text-purple-300">Voir tout</a>
-                    </div>
-                    
-                    <div class="space-y-4">
-                        <div class="flex items-start">
-                            <div class="w-10 h-10 rounded-full bg-purple-900 bg-opacity-30 flex items-center justify-center mr-4 mt-1">
-                                <i class="fas fa-robot text-purple-400"></i>
+                            <div class="terminal-line">
+                                <span class="terminal-response">Système prêt. Entrez une commande...</span>
                             </div>
-                            <div class="flex-1">
-                                <div class="flex justify-between items-center">
-                                    <h4 class="font-medium">Mise à jour de sécurité automatique</h4>
-                                    <span class="text-xs text-gray-400">Il y a 2 heures</span>
-                                </div>
-                                <p class="text-sm text-gray-400">Le robot a appliqué 3 mises à jour de sécurité sur monblogauto.com</p>
+                            <div class="terminal-line">
+                                <span class="terminal-command">> scan --full --range=5.678974M</span>
                             </div>
-                        </div>
-                        
-                        <div class="flex items-start">
-                            <div class="w-10 h-10 rounded-full bg-green-900 bg-opacity-30 flex items-center justify-center mr-4 mt-1">
-                                <i class="fas fa-shield-alt text-green-400"></i>
+                            <div class="terminal-line">
+                                <span class="terminal-response">Lancement du scan complet à 5.678974M KLM...</span>
                             </div>
-                            <div class="flex-1">
-                                <div class="flex justify-between items-center">
-                                    <h4 class="font-medium">Sauvegarde automatique</h4>
-                                    <span class="text-xs text-gray-400">Aujourd'hui, 08:45</span>
-                                </div>
-                                <p class="text-sm text-gray-400">Sauvegarde complète de boutiqueauto.com effectuée avec succès</p>
+                            <div class="terminal-line">
+                                <span class="terminal-response">Scan en cours. 37% complété...</span>
                             </div>
                         </div>
-                        
-                        <div class="flex items-start">
-                            <div class="w-10 h-10 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center mr-4 mt-1">
-                                <i class="fas fa-sync-alt text-blue-400"></i>
-                            </div>
-                            <div class="flex-1">
-                                <div class="flex justify-between items-center">
-                                    <h4 class="font-medium">Optimisation SEO automatique</h4>
-                                    <span class="text-xs text-gray-400">Hier, 23:30</span>
-                                </div>
-                                <p class="text-sm text-gray-400">Le robot a optimisé 12 pages pour le SEO sur portfolioauto.com</p>
-                            </div>
+                        <div class="mt-4 flex items-center">
+                            <span class="text-quantum-blue mr-2">></span>
+                            <input type="text" class="quantum-input" id="terminalInput" placeholder="Entrez une commande..." autocomplete="off">
+                            <button class="quantum-button text-white px-4 py-1 rounded ml-2" onclick="executeCommand()">
+                                <i class="fas fa-play"></i>
+                            </button>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    </div>
 
-    <!-- Public Website (shown by default) -->
-    <div id="publicWebsite">
-        <!-- Navigation -->
-        <nav class="fixed w-full z-50 bg-black bg-opacity-70 backdrop-filter backdrop-blur-lg">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-between h-20 items-center">
-                    <div class="flex-shrink-0 flex items-center">
-                        <div class="flex items-center">
-                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mr-2 glow">
-                                <i class="fas fa-robot text-white"></i>
-                            </div>
-                            <span class="text-xl font-bold neon-text">AutoNebula</span>
-                        </div>
-                    </div>
-                    <div class="hidden md:block">
-                        <div class="ml-10 flex items-baseline space-x-8">
-                            <a href="#accueil" class="nav-link text-white px-3 py-2 text-sm font-medium">Accueil</a>
-                            <a href="#features" class="nav-link text-white px-3 py-2 text-sm font-medium">Fonctionnalités</a>
-                            <a href="#pricing" class="nav-link text-white px-3 py-2 text-sm font-medium">Tarifs</a>
-                            <a href="#contact" class="nav-link text-white px-3 py-2 text-sm font-medium">Contact</a>
-                        </div>
-                    </div>
-                    <div class="hidden md:block">
-                        <button id="loginBtn" class="neon-button text-white px-6 py-2 rounded-full font-bold text-sm">
-                            <i class="fas fa-robot mr-2"></i> CONNEXION AUTO
-                        </button>
-                    </div>
-                    <div class="md:hidden">
-                        <button id="mobile-menu-button" class="text-white focus:outline-none">
-                            <i class="fas fa-bars text-2xl"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Menu mobile -->
-            <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg">
-                <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-                    <a href="#accueil" class="block px-3 py-2 text-base font-medium text-white">Accueil</a>
-                    <a href="#features" class="block px-3 py-2 text-base font-medium text-white">Fonctionnalités</a>
-                    <a href="#pricing" class="block px-3 py-2 text-base font-medium text-white">Tarifs</a>
-                    <a href="#contact" class="block px-3 py-2 text-base font-medium text-white">Contact</a>
-                    <button id="loginBtnMobile" class="block neon-button text-white px-6 py-2 rounded-full font-bold text-sm w-max mx-auto mt-2">
-                        <i class="fas fa-robot mr-2"></i> CONNEXION
-                    </button>
-                </div>
-            </div>
-        </nav>
-        
-        <!-- Hero Section -->
-        <section id="accueil" class="hero-gradient pt-32 pb-20 relative overflow-hidden">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
-                    <div class="mb-12 lg:mb-0">
-                        <h1 class="text-4xl md:text-6xl font-extrabold mb-6 neon-text">
-                            <span class="block">Hébergement WordPress</span>
-                            <span class="block text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">100% Automatisé</span>
-                        </h1>
-                        <p class="text-lg md:text-xl text-gray-300 mb-8">
-                            Notre système robotisé gère tout pour vous : mises à jour, sécurité, sauvegardes et optimisations. Concentrez-vous sur votre contenu, nous gérons le reste.
-                        </p>
-                        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                            <button id="heroCtaBtn" class="neon-button text-white px-8 py-4 rounded-full font-bold text-lg text-center pulse">
-                                <i class="fas fa-robot mr-2"></i> ESSAYER GRATUITEMENT
-                            </button>
-                            <a href="#features" class="border border-purple-500 text-white px-8 py-4 rounded-full font-bold text-lg text-center hover:bg-purple-900 hover:bg-opacity-30 transition-all duration-300">
-                                VOIR LA DÉMO
-                            </a>
-                        </div>
-                    </div>
-                    <div class="relative">
-                        <div class="absolute -top-20 -left-20 w-64 h-64 rounded-full bg-purple-900 opacity-20 filter blur-3xl"></div>
-                        <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-cyan-900 opacity-20 filter blur-3xl"></div>
-                        <div class="relative floating">
-                            <div class="bg-gradient-to-br from-purple-900 to-cyan-900 p-1 rounded-2xl inline-block">
-                                <div class="bg-gray-900 rounded-2xl p-6">
-                                    <div class="flex justify-between items-center mb-4">
-                                        <div class="flex items-center">
-                                            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
-                                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
-                                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                                        </div>
-                                        <div class="text-sm text-gray-400">robot.autonebula.com</div>
-                                    </div>
-                                    <div class="bg-black rounded-lg p-4 mb-4">
-                                        <div class="text-green-400 font-mono text-sm">
-                                            <span class="text-purple-300">$</span> <span class="text-cyan-300">auto</span> scan security<br>
-                                            <span class="text-purple-300">$</span> <span class="text-cyan-300">auto</span> update all<br>
-                                            <span class="text-purple-300">$</span> <span class="text-cyan-300">auto</span> optimize seo<br>
-                                            <span class="text-purple-300">$</span> <span class="text-cyan-300">auto</span> backup now<br>
-                                            <span class="text-purple-300">$</span> <span class="text-white">Tâches automatisées complètes!</span>
-                                        </div>
-                                    </div>
-                                    <div class="bg-gradient-to-r from-purple-900 to-cyan-900 p-4 rounded-lg">
-                                        <div class="flex justify-between items-center">
-                                            <div>
-                                                <div class="text-xs text-gray-300">VOTRE SITE WORDPRESS</div>
-                                                <div class="text-white font-bold">100% Automatisé</div>
-                                            </div>
-                                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center robot-icon">
-                                                <i class="fas fa-robot text-purple-900"></i>
-                                            </div>
-                                        </div>
-                                    </div>
+                <!-- Right Column -->
+                <div class="space-y-8">
+                    <!-- Quantum Control -->
+                    <div class="quantum-card rounded-lg p-6">
+                        <h2 class="text-2xl quantum-text mb-6">CONTRÔLE OMNI</h2>
+                        <div class="space-y-4">
+                            <div class="p-4 bg-gray-900 rounded-lg border border-gray-800">
+                                <div class="flex justify-between items-center mb-2">
+                                    <h3 class="font-bold">SURVEILLANCE GLOBALE</h3>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" checked class="sr-only peer">
+                                        <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-quantum-blue"></div>
+                                    </label>
                                 </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        
-        <!-- Features Section -->
-        <section id="features" class="py-20 relative overflow-hidden">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="text-center mb-20">
-                    <h2 class="text-3xl md:text-5xl font-bold mb-4 neon-text">AUTOMATISATION INTELLIGENTE</h2>
-                    <p class="text-xl text-gray-300 max-w-3xl mx-auto">
-                        Notre système robotisé avancé prend en charge toutes les tâches techniques pour vous
-                    </p>
-                </div>
-                
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                    <!-- Feature 1 -->
-                    <div class="feature-card p-8 rounded-2xl neon-border">
-                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mb-6 glow">
-                            <i class="fas fa-robot text-2xl text-white"></i>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3">Installation Automatique</h3>
-                        <p class="text-gray-300">
-                            Notre robot installe et configure WordPress en moins d'une minute avec les paramètres optimisés pour votre niche.
-                        </p>
-                    </div>
-                    
-                    <!-- Feature 2 -->
-                    <div class="feature-card p-8 rounded-2xl neon-border">
-                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mb-6 glow">
-                            <i class="fas fa-shield-alt text-2xl text-white"></i>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3">Sécurité Automatisée</h3>
-                        <p class="text-gray-300">
-                            Protection 24/7 contre les attaques avec mise à jour automatique des pare-feux et détection des intrusions.
-                        </p>
-                    </div>
-                    
-                    <!-- Feature 3 -->
-                    <div class="feature-card p-8 rounded-2xl neon-border">
-                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mb-6 glow">
-                            <i class="fas fa-sync-alt text-2xl text-white"></i>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3">Mises à Jour Auto</h3>
-                        <p class="text-gray-300">
-                            Tous les plugins, thèmes et WordPress lui-même sont mis à jour automatiquement après tests de compatibilité.
-                        </p>
-                    </div>
-                    
-                    <!-- Feature 4 -->
-                    <div class="feature-card p-8 rounded-2xl neon-border">
-                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mb-6 glow">
-                            <i class="fas fa-database text-2xl text-white"></i>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3">Sauvegardes Intelligentes</h3>
-                        <p class="text-gray-300">
-                            Sauvegardes quotidiennes incrémentielles avec stockage hors site et restauration en un clic.
-                        </p>
-                    </div>
-                    
-                    <!-- Feature 5 -->
-                    <div class="feature-card p-8 rounded-2xl neon-border">
-                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mb-6 glow">
-                            <i class="fas fa-chart-line text-2xl text-white"></i>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3">SEO Automatisé</h3>
-                        <p class="text-gray-300">
-                            Optimisation continue pour les moteurs de recherche avec analyse et suggestions automatiques.
-                        </p>
-                    </div>
-                    
-                    <!-- Feature 6 -->
-                    <div class="feature-card p-8 rounded-2xl neon-border">
-                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mb-6 glow">
-                            <i class="fas fa-bolt text-2xl text-white"></i>
-                        </div>
-                        <h3 class="text-xl font-bold mb-3">Performance Auto</h3>
-                        <p class="text-gray-300">
-                            Cache, compression et optimisation des images gérés automatiquement pour des temps de chargement ultra-rapides.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </section>
-        
-        <!-- Demo Section -->
-        <section class="py-20 bg-gradient-to-r from-purple-900 to-cyan-900 relative overflow-hidden">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
-                    <div class="mb-12 lg:mb-0">
-                        <h2 class="text-3xl md:text-5xl font-bold mb-6">Voir le Robot en Action</h2>
-                        <p class="text-xl mb-8">
-                            Notre système automatisé peut créer et configurer un site WordPress complet en moins de 2 minutes, sans intervention humaine.
-                        </p>
-                        <button class="neon-button text-white px-8 py-4 rounded-full font-bold text-lg">
-                            <i class="fas fa-play mr-2"></i> VOIR LA DÉMONSTRATION
-                        </button>
-                    </div>
-                    <div class="relative">
-                        <div class="bg-gray-900 rounded-2xl overflow-hidden neon-border">
-                            <div class="p-4 bg-gray-800 flex items-center">
-                                <div class="flex space-x-2 mr-4">
-                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                                <p class="text-sm text-gray-400 mb-3">Active la surveillance sur tous les canaux quantiques</p>
+                                <div class="w-full bg-gray-800 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-quantum-blue to-nebula-pink h-2 rounded-full" style="width: 100%"></div>
                                 </div>
-                                <div class="text-sm text-gray-400">robot.autonebula.com/demo</div>
                             </div>
-                            <div class="p-6">
-                                <div class="bg-black rounded-lg p-4 mb-4">
-                                    <div class="text-green-400 font-mono text-sm">
-                                        <span class="text-purple-300">$</span> <span class="text-cyan-300">auto</span> create site<br>
-                                        <span class="text-purple-300">></span> <span class="text-white">Analyse des besoins...</span><br>
-                                        <span class="text-purple-300">></span> <span class="text-white">Installation de WordPress...</span><br>
-                                        <span class="text-purple-300">></span> <span class="text-white">Configuration des plugins...</span><br>
-                                        <span class="text-purple-300">></span> <span class="text-white">Optimisation des performances...</span><br>
-                                        <span class="text-purple-300">></span> <span class="text-cyan-300">Site prêt en 1m28s!</span>
-                                    </div>
+                            
+                            <div class="p-4 bg-gray-900 rounded-lg border border-gray-800">
+                                <div class="flex justify-between items-center mb-2">
+                                    <h3 class="font-bold">PORTÉE MAXIMALE</h3>
+                                    <span class="text-quantum-blue font-mono">5.678974M KLM</span>
                                 </div>
-                                <div class="flex justify-between items-center">
-                                    <div class="text-sm text-gray-400">Tâches automatisées en cours</div>
-                                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center robot-icon">
-                                        <i class="fas fa-robot text-white text-sm"></i>
-                                    </div>
+                                <p class="text-sm text-gray-400 mb-3">Définit la distance maximale de surveillance</p>
+                                <input type="range" min="1" max="10" value="10" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="rangeSlider">
+                                <div class="flex justify-between text-xs text-gray-400 mt-1">
+                                    <span>1M KLM</span>
+                                    <span>10M KLM</span>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        
-        <!-- Pricing Section -->
-        <section id="pricing" class="py-20 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="text-center mb-20">
-                    <h2 class="text-3xl md:text-5xl font-bold mb-4 neon-text">TARIFS AUTOMATISÉS</h2>
-                    <p class="text-xl text-gray-300 max-w-3xl mx-auto">
-                        Tous nos plans incluent l'automatisation complète de votre hébergement WordPress.
-                    </p>
-                </div>
-                
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
-                    <!-- Basic Plan -->
-                    <div class="price-card p-8 rounded-2xl neon-border">
-                        <div class="text-center mb-6">
-                            <h3 class="text-2xl font-bold mb-2">AUTO BASIC</h3>
-                            <div class="flex justify-center items-baseline">
-                                <span class="text-4xl font-bold">2€</span>
-                                <span class="text-gray-400 ml-1">/mois</span>
-                            </div>
-                            <div class="text-sm text-gray-400 mt-2">Facturé annuellement</div>
-                        </div>
-                        <ul class="space-y-3 mb-8">
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>1 site automatisé</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Automatisation de base</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Sauvegardes hebdomadaires</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Mises à jour automatiques</span>
-                            </li>
-                        </ul>
-                        <button class="select-plan neon-button text-white px-6 py-3 rounded-full font-bold text-lg w-full" data-plan="auto-basic" data-price="2">
-                            <i class="fas fa-bolt mr-2"></i> CHOISIR CE PLAN
-                        </button>
-                    </div>
-                    
-                    <!-- Pro Plan (Recommended) -->
-                    <div class="price-card p-8 rounded-2xl neon-border transform scale-105 relative">
-                        <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-purple-500 to-cyan-500 text-white px-4 py-1 rounded-full text-xs font-bold">
-                            RECOMMANDÉ
-                        </div>
-                        <div class="text-center mb-6">
-                            <h3 class="text-2xl font-bold mb-2">AUTO PRO</h3>
-                            <div class="flex justify-center items-baseline">
-                                <span class="text-4xl font-bold">5€</span>
-                                <span class="text-gray-400 ml-1">/mois</span>
-                            </div>
-                            <div class="text-sm text-gray-400 mt-2">Facturé annuellement</div>
-                        </div>
-                        <ul class="space-y-3 mb-8">
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>5 sites automatisés</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Automatisation avancée</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Sauvegardes quotidiennes</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>SEO automatique</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Optimisation performance</span>
-                            </li>
-                        </ul>
-                        <button class="select-plan neon-button text-white px-6 py-3 rounded-full font-bold text-lg w-full" data-plan="auto-pro" data-price="5">
-                            <i class="fas fa-bolt mr-2"></i> CHOISIR CE PLAN
-                        </button>
-                    </div>
-                    
-                    <!-- Business Plan -->
-                    <div class="price-card p-8 rounded-2xl neon-border">
-                        <div class="text-center mb-6">
-                            <h3 class="text-2xl font-bold mb-2">AUTO BUSINESS</h3>
-                            <div class="flex justify-center items-baseline">
-                                <span class="text-4xl font-bold">10€</span>
-                                <span class="text-gray-400 ml-1">/mois</span>
-                            </div>
-                            <div class="text-sm text-gray-400 mt-2">Facturé annuellement</div>
-                        </div>
-                        <ul class="space-y-3 mb-8">
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Sites illimités</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Automatisation complète</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Sauvegardes en temps réel</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>SEO avancé</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Performance maximale</span>
-                            </li>
-                            <li class="flex items-center">
-                                <i class="fas fa-robot text-green-400 mr-2"></i>
-                                <span>Support prioritaire</span>
-                            </li>
-                        </ul>
-                        <button class="select-plan neon-button text-white px-6 py-3 rounded-full font-bold text-lg w-full" data-plan="auto-business" data-price="10">
-                            <i class="fas fa-bolt mr-2"></i> CHOISIR CE PLAN
-                        </button>
-                    </div>
-                </div>
-                
-                <div class="text-center mt-12">
-                    <p class="text-gray-400 mb-4">Vous avez besoin d'une solution personnalisée?</p>
-                    <a href="#contact" class="inline-block border border-purple-500 text-white px-6 py-3 rounded-full font-bold hover:bg-purple-900 hover:bg-opacity-30 transition-all duration-300">
-                        CONTACTEZ NOTRE ROBOT
-                    </a>
-                </div>
-            </div>
-        </section>
-        
-        <!-- Testimonials Section -->
-        <section class="py-20 bg-gray-900 relative overflow-hidden">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="text-center mb-20">
-                    <h2 class="text-3xl md:text-5xl font-bold mb-4 neon-text">ILS NOUS FONT CONFIANCE</h2>
-                    <p class="text-xl text-gray-300 max-w-3xl mx-auto">
-                        Découvrez ce que nos clients disent de notre système d'automatisation.
-                    </p>
-                </div>
-                
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div class="bg-gray-800 p-6 rounded-2xl neon-border">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-purple-900 bg-opacity-30 flex items-center justify-center mr-4">
-                                <i class="fas fa-user text-purple-400"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Marie L.</h4>
-                                <div class="flex text-yellow-400 text-sm">
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
+                            
+                            <div class="p-4 bg-gray-900 rounded-lg border border-gray-800">
+                                <div class="flex justify-between items-center mb-2">
+                                    <h3 class="font-bold">PUISSANCE DU SYSTÈME</h3>
+                                    <span class="text-quantum-blue font-mono">100%</span>
                                 </div>
-                            </div>
-                        </div>
-                        <p class="text-gray-300">
-                            "Depuis que j'utilise AutoNebula, je n'ai plus à m'inquiéter des mises à jour ou des sauvegardes. Le robot fait tout pour moi et je peux me concentrer sur mon contenu."
-                        </p>
-                    </div>
-                    
-                    <div class="bg-gray-800 p-6 rounded-2xl neon-border">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-cyan-900 bg-opacity-30 flex items-center justify-center mr-4">
-                                <i class="fas fa-user text-cyan-400"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Pierre D.</h4>
-                                <div class="flex text-yellow-400 text-sm">
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
-                                    <i class="fas fa-star"></i>
+                                <p class="text-sm text-gray-400 mb-3">Niveau d'énergie alloué au système</p>
+                                <div class="w-full bg-gray-800 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-green-500 to-quantum-blue h-2 rounded-full" style="width: 100%"></div>
                                 </div>
                             </div>
-                        </div>
-                        <p class="text-gray-300">
-                            "La fonction d'optimisation SEO automatique a boosté mon trafic de 40% en 3 mois. Je ne pourrais plus m'en passer!"
-                        </p>
-                    </div>
-                    
-                    <div class="bg-gray-800 p-6 rounded-2xl neon-border">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-green-900 bg-opacity-30 flex items-center justify-center mr-4">
-                                <i class="fas fa-user text-green-400"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-bold">Sophie T.</h4>
-                            <div class="flex text-yellow-400 text-sm">
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star"></i>
-                                <i class="fas fa-star"></i>
-                            </div>
+                            
+                            <button class="quantum-button text-white px-4 py-3 rounded-lg font-bold w-full mt-2">
+                                <i class="fas fa-bolt mr-2"></i> ACTIVER TOUS LES SYSTÈMES
+                            </button>
                         </div>
                     </div>
-                    <p class="text-gray-300">
-                        "J'ai 5 sites WordPress et AutoNebula les gère tous parfaitement. Les sauvegardes automatiques m'ont déjà sauvé la vie plusieurs fois!"
-                    </p>
-                </div>
-            </div>
-        </section>
-        
-        <!-- CTA Section -->
-        <section class="py-20 bg-gradient-to-r from-purple-900 to-cyan-900 relative overflow-hidden">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-                <h2 class="text-3xl md:text-5xl font-bold mb-6">Prêt à automatiser votre WordPress?</h2>
-                <p class="text-xl mb-8 max-w-3xl mx-auto">
-                    Essayez notre système robotisé pendant 30 jours sans engagement. Annulation à tout moment.
-                </p>
-                <button id="ctaBtn" class="inline-block bg-white text-purple-900 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300">
-                    <i class="fas fa-robot mr-2"></i> ESSAYER GRATUITEMENT
-                </button>
-            </div>
-        </section>
-        
-        <!-- Contact Section -->
-        <section id="contact" class="py-20 relative overflow-hidden">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
-                    <div class="mb-12 lg:mb-0">
-                        <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text">CONTACTEZ NOTRE ROBOT</h2>
-                        <p class="text-lg text-gray-300 mb-8">
-                            Notre équipe et notre système automatisé sont disponibles 24/7 pour répondre à toutes vos questions.
-                        </p>
-                        
-                        <div class="space-y-6">
-                            <div class="flex items-start">
-                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mr-4 glow">
-                                    <i class="fas fa-robot text-white"></i>
+
+                    <!-- Quantum Targets -->
+                    <div class="quantum-card rounded-lg p-6">
+                        <h2 class="text-2xl quantum-text mb-6">CIBLES ACTIVES</h2>
+                        <div class="space-y-4 max-h-96 overflow-y-auto quantum-scrollbar pr-2">
+                            <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all">
+                                <div class="w-8 h-8 rounded-full bg-purple-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3">
+                                    <i class="fas fa-satellite-dish text-xs text-purple-400"></i>
                                 </div>
-                                <div>
-                                    <h4 class="font-bold text-lg">Chat Automatique</h4>
-                                    <p class="text-gray-300">Disponible 24/7 sur votre espace client</p>
+                                <div class="flex-1">
+                                    <div class="flex justify-between items-center">
+                                        <h4 class="font-medium">STATION ALPHA-7</h4>
+                                        <span class="text-xs text-quantum-blue">3.456M KLM</span>
+                                    </div>
+                                    <p class="text-xs text-gray-400">Surveillance complète - 100% des canaux</p>
+                                    <div class="flex justify-between text-xs text-gray-400 mt-1">
+                                        <span>Actif depuis 7h 42m</span>
+                                        <span>Signal: <span class="text-green-500">Fort</span></span>
+                                    </div>
                                 </div>
                             </div>
                             
-                            <div class="flex items-start">
-                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mr-4 glow">
-                                    <i class="fas fa-envelope text-white"></i>
+                            <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all">
+                                <div class="w-8 h-8 rounded-full bg-blue-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3">
+                                    <i class="fas fa-user-secret text-xs text-blue-400"></i>
                                 </div>
-                                <div>
-                                    <h4 class="font-bold text-lg">Email</h4>
-                                    <p class="text-gray-300">support@autonebula.com</p>
+                                <div class="flex-1">
+                                    <div class="flex justify-between items-center">
+                                        <h4 class="font-medium">CIBLE #X-248</h4>
+                                        <span class="text-xs text-quantum-blue">1.234M KLM</span>
+                                    </div>
+                                    <p class="text-xs text-gray-400">Surveillance audio/vidéo - 87% des canaux</p>
+                                    <div class="flex justify-between text-xs text-gray-400 mt-1">
+                                        <span>Actif depuis 2h 15m</span>
+                                        <span>Signal: <span class="text-yellow-500">Moyen</span></span>
+                                    </div>
                                 </div>
                             </div>
                             
-                            <div class="flex items-start">
-                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mr-4 glow">
-                                    <i class="fas fa-phone-alt text-white"></i>
+                            <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all">
+                                <div class="w-8 h-8 rounded-full bg-red-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3">
+                                    <i class="fas fa-building text-xs text-red-400"></i>
                                 </div>
-                                <div>
-                                    <h4 class="font-bold text-lg">Téléphone</h4>
-                                    <p class="text-gray-300">+33 1 23 45 67 89</p>
+                                <div class="flex-1">
+                                    <div class="flex justify-between items-center">
+                                        <h4 class="font-medium">COMPLEXE OMÉGA</h4>
+                                        <span class="text-xs text-quantum-blue">4.567M KLM</span>
+                                    </div>
+                                    <p class="text-xs text-gray-400">Surveillance réseau - 64% des canaux</p>
+                                    <div class="flex justify-between text-xs text-gray-400 mt-1">
+                                        <span>Actif depuis 5h 03m</span>
+                                        <span>Signal: <span class="text-red-500">Faible</span></span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                    
-                    <div>
-                        <form id="contactForm" class="bg-gray-900 bg-opacity-50 p-8 rounded-2xl neon-border">
-                            <div class="mb-6">
-                                <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Votre nom</label>
-                                <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required>
-                            </div>
                             
-                            <div class="mb-6">
-                                <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Votre email</label>
-                                <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required>
-                            </div>
-                            
-                            <div class="mb-6">
-                                <label for="subject" class="block text-sm font-medium text-gray-300 mb-2">Sujet</label>
-                                <select id="subject" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required>
-                                    <option value="">Sélectionnez un sujet</option>
-                                    <option value="support">Support technique</option>
-                                    <option value="sales">Questions commerciales</option>
-                                    <option value="billing">Facturation</option>
-                                    <option value="other">Autre</option>
-                                </select>
-                            </div>
-                            
-                            <div class="mb-6">
-                                <label for="message" class="block text-sm font-medium text-gray-300 mb-2">Votre message</label>
-                                <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required></textarea>
+                            <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all">
+                                <div class="w-8 h-8 rounded-full bg-green-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3">
+                                    <i class="fas fa-mobile-alt text-xs text-green-400"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="flex justify-between items-center">
+                                        <h4 class="font-medium">RÉSEAU MOBILE #7</h4>
+                                        <span class="text-xs text-quantum-blue">0.789M KLM</span>
+                                    </div>
+                                    <p class="text-xs text-gray-400">Surveillance totale - 100% des canaux</p>
+                                    <div class="flex justify-between text-xs text-gray-400 mt-1">
+                                        <span>Actif depuis 12h 38m</span>
+                                        <span>Signal: <span class="text-green-500">Fort</span></span>
+                                    </div>
+                                </div>
                             </div>
-                            
-                            <button type="submit" class="neon-button text-white px-6 py-3 rounded-full font-bold text-lg w-full">
-                                <i class="fas fa-paper-plane mr-2"></i> ENVOYER LE MESSAGE
-                            </button>
-                        </form>
+                        </div>
+                        <button class="quantum-button text-white px-4 py-2 rounded-lg font-medium w-full mt-4">
+                            <i class="fas fa-plus mr-2"></i> AJOUTER UNE CIBLE
+                        </button>
                     </div>
                 </div>
             </div>
-        </section>
-        
-        <!-- Footer -->
-        <footer class="bg-black py-12">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                    <div>
-                        <div class="flex items-center mb-4">
-                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center mr-2 glow">
-                                <i class="fas fa-robot text-white"></i>
-                            </div>
-                            <span class="text-xl font-bold neon-text">AutoNebula</span>
-                        </div>
-                        <p class="text-gray-400">
-                            L'hébergement WordPress automatisé le plus avancé du marché.
-                        </p>
-                    </div>
-                    
-                    <div>
-                        <h4 class="text-lg font-bold mb-4">Navigation</h4>
-                        <ul class="space-y-2">
-                            <li><a href="#accueil" class="text-gray-400 hover:text-white transition">Accueil</a></li>
-                            <li><a href="#features" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
-                            <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Tarifs</a></li>
-                            <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
-                        </ul>
-                    </div>
-                    
-                    <div>
-                        <h4 class="text-lg font-bold mb-4">Légal</h4>
-                        <ul class="space-y-2">
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions générales</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
-                            <li><a href="#" class="text-gray-400 hover:text-white transition">CGV</a></li>
-                        </ul>
-                    </div>
-                    
-                    <div>
-                        <h4 class="text-lg font-bold mb-4">Réseaux sociaux</h4>
-                        <div class="flex space-x-4">
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-purple-600 transition">
-                                <i class="fab fa-facebook-f"></i>
-                            </a>
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-cyan-500 transition">
-                                <i class="fab fa-twitter"></i>
-                            </a>
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-pink-600 transition">
-                                <i class="fab fa-instagram"></i>
-                            </a>
-                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-blue-400 transition">
-                                <i class="fab fa-linkedin-in"></i>
-                            </a>
-                        </div>
-                        
-                        <div class="mt-6">
-                            <h5 class="text-sm font-bold mb-2">NEWSLETTER</h5>
-                            <div class="flex">
-                                <input type="email" placeholder="Votre email" class="px-4 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none w-full">
-                                <button class="bg-gradient-to-br from-purple-500 to-cyan-500 px-4 py-2 rounded-r-lg text-white">
-                                    <i class="fas fa-paper-plane"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+        </main>
+
+        <!-- Quantum Footer -->
+        <footer class="py-4 px-8 border-t border-gray-800 bg-gradient-to-t from-black to-transparent">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                    <i class="fas fa-circle-notch fa-spin text-quantum-blue"></i>
+                    <span class="text-sm">SYSTÈME OMNI-1 ACTIF - PORTÉE: 5,678,974 KLM</span>
                 </div>
-                
-                <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
-                    <p>© 2023 AutoNebula. Tous droits réservés.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-shield-alt"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-cog"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-user-secret"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-power-off"></i></a>
+                </div>
+                <div class="text-xs text-gray-500 mt-4 md:mt-0">
+                    SYSTÈME DE SURVEILLANCE QUANTIQUE © 2023 - TOUS DROITS RÉSERVÉS
                 </div>
             </div>
         </footer>
     </div>
 
     <script>
-        // Configuration des comptes pré-enregistrés
-        const preRegisteredAccounts = [
-            {
-                email: "doctorblog.fr@gmail.com",
-                password: "Admin270574@",
-                name: "Doctor Blog",
-                plan: "auto-pro",
-                sites: [
-                    {
-                        name: "Mon Blog Auto",
-                        url: "monblogauto.com",
-                        status: "active",
-                        lastUpdate: "Aujourd'hui, 14:30"
-                    }
-                ],
-                activities: [
-                    {
-                        title: "Mise à jour de sécurité automatique",
-                        description: "Le robot a appliqué 3 mises à jour de sécurité sur monblogauto.com",
-                        time: "Il y a 2 heures"
-                    },
-                    {
-                        title: "Optimisation SEO automatique",
-                        description: "Le robot a optimisé 8 pages pour le SEO sur monblogauto.com",
-                        time: "Hier, 23:15"
-                    },
-                    {
-                        title: "Sauvegarde automatique",
-                        description: "Sauvegarde complète de monblogauto.com effectuée avec succès",
-                        time: "Hier, 08:30"
-                    }
-                ]
-            },
-            {
-                email: "jean.eric.formateur@gmail.com",
-                password: "Admin270574@",
-                name: "Jean Eric",
-                plan: "auto-business",
-                sites: [
-                    {
-                        name: "Boutique Auto",
-                        url: "boutiqueauto.com",
-                        status: "active",
-                        lastUpdate: "Hier, 09:15"
-                    },
-                    {
-                        name: "Portfolio Auto",
-                        url: "portfolioauto.com",
-                        status: "updating",
-                        lastUpdate: "En cours..."
-                    }
-                ],
-                activities: [
-                    {
-                        title: "Mise à jour des plugins",
-                        description: "5 plugins mis à jour sur boutiqueauto.com",
-                        time: "Aujourd'hui, 10:45"
-                    },
-                    {
-                        title: "Optimisation des images",
-                        description: "23 images optimisées sur portfolioauto.com",
-                        time: "Hier, 22:10"
-                    },
-                    {
-                        title: "Analyse de sécurité",
-                        description: "Scan complet effectué sur tous les sites",
-                        time: "Hier, 15:20"
-                    }
-                ]
+        // Quantum System Initialization
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize quantum radar
+            initQuantumRadar();
+            
+            // Initialize terminal
+            initQuantumTerminal();
+            
+            // Simulate system activity
+            simulateSystemActivity();
+            
+            // Add event listeners
+            document.getElementById('rangeSlider').addEventListener('input', function() {
+                const value = this.value;
+                const rangeText = value + 'M KLM';
+                document.querySelector('#rangeSlider + div span:last-child').textContent = rangeText;
+                
+                // Show alert
+                showQuantumAlert('Portée maximale ajustée à ' + rangeText, 'info');
+            });
+        });
+        
+        // Quantum Radar System
+        function initQuantumRadar() {
+            const radar = document.querySelector('.quantum-radar');
+            
+            // Add random signals
+            setInterval(() => {
+                const colors = ['#00f7ff', '#ff00ff', '#8a2be2', '#ffffff'];
+                const types = ['satellite', 'device', 'person', 'network', 'vehicle'];
+                
+                for (let i = 0; i < 3; i++) {
+                    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                    const randomType = types[Math.floor(Math.random() * types.length)];
+                    const randomX = Math.random() * 90 + 5;
+                    const randomY = Math.random() * 90 + 5;
+                    
+                    const signal = document.createElement('div');
+                    signal.className = 'absolute w-4 h-4 rounded-full quantum-pulse';
+                    signal.style.backgroundColor = randomColor;
+                    signal.style.top = `${randomY}%`;
+                    signal.style.left = `${randomX}%`;
+                    signal.style.filter = `drop-shadow(0 0 10px ${randomColor})`;
+                    
+                    // Add icon based on type
+                    const icon = document.createElement('i');
+                    icon.className = `fas fa-${randomType} text-xs absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`;
+                    icon.style.color = '#010101';
+                    signal.appendChild(icon);
+                    
+                    radar.appendChild(signal);
+                    
+                    // Remove after animation
+                    setTimeout(() => {
+                        if (signal.parentNode) {
+                            signal.remove();
+                        }
+                    }, 2000);
+                }
+            }, 1000);
+            
+            // Add some permanent signals
+            const importantTargets = [
+                { x: 20, y: 30, color: '#ff00ff', type: 'satellite-dish', size: 6 },
+                { x: 70, y: 60, color: '#00f7ff', type: 'building', size: 6 },
+                { x: 50, y: 20, color: '#ffffff', type: 'users', size: 5 }
+            ];
+            
+            importantTargets.forEach(target => {
+                const signal = document.createElement('div');
+                signal.className = 'absolute rounded-full quantum-pulse';
+                signal.style.backgroundColor = target.color;
+                signal.style.width = `${target.size}px`;
+                signal.style.height = `${target.size}px`;
+                signal.style.top = `${target.y}%`;
+                signal.style.left = `${target.x}%`;
+                signal.style.filter = `drop-shadow(0 0 15px ${target.color})`;
+                
+                const icon = document.createElement('i');
+                icon.className = `fas fa-${target.type} text-xs absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`;
+                icon.style.color = '#010101';
+                signal.appendChild(icon);
+                
+                radar.appendChild(signal);
+            });
+        }
+        
+        // Quantum Terminal System
+        function initQuantumTerminal() {
+            const terminal = document.getElementById('quantumTerminal');
+            const terminalInput = document.getElementById('terminalInput');
+            
+            // Add sample terminal activity
+            setInterval(() => {
+                const commands = [
+                    'scan --target=ALPHA-7 --deep',
+                    'analyze --frequencies=all',
+                    'monitor --activate --all',
+                    'intercept --channel=encrypted',
+                    'decrypt --algorithm=quantum',
+                    'track --coordinates=3.456M,4.567M'
+                ];
+                
+                const responses = [
+                    'Scan profond en cours... 42% complété',
+                    'Analyse des fréquences terminée. 248 canaux détectés',
+                    'Surveillance activée sur tous les canaux',
+                    'Interception du canal chiffré établie',
+                    'Déchiffrement réussi. Accès aux données accordé',
+                    'Cible suivie avec succès. Coordonnées mises à jour'
+                ];
+                
+                const randomCmd = Math.floor(Math.random() * commands.length);
+                
+                const cmdLine = document.createElement('div');
+                cmdLine.className = 'terminal-line';
+                cmdLine.innerHTML = `<span class="terminal-command">> ${commands[randomCmd]}</span>`;
+                
+                const resLine = document.createElement('div');
+                resLine.className = 'terminal-line';
+                resLine.innerHTML = `<span class="terminal-response">${responses[randomCmd]}</span>`;
+                
+                terminal.appendChild(cmdLine);
+                terminal.appendChild(resLine);
+                
+                // Scroll to bottom
+                terminal.scrollTop = terminal.scrollHeight;
+                
+                // Random error
+                if (Math.random() > 0.8) {
+                    const errLine = document.createElement('div');
+                    errLine.className = 'terminal-line';
+                    errLine.innerHTML = `<span class="terminal-error">ERREUR: Signal perdu sur le canal ${Math.floor(Math.random()*100)}. Reconnexion...</span>`;
+                    terminal.appendChild(errLine);
+                    terminal.scrollTop = terminal.scrollHeight;
+                }
+                
+            }, 5000);
+            
+            // Handle enter key in terminal
+            terminalInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    executeCommand();
+                }
+            });
+        }
+        
+        function executeCommand() {
+            const terminal = document.getElementById('quantumTerminal');
+            const terminalInput = document.getElementById('terminalInput');
+            const command = terminalInput.value.trim();
+            
+            if (command) {
+                // Add command to terminal
+                const cmdLine = document.createElement('div');
+                cmdLine.className = 'terminal-line';
+                cmdLine.innerHTML = `<span class="terminal-command">> ${command}</span>`;
+                terminal.appendChild(cmdLine);
+                
+                // Process command
+                let response = '';
+                if (command.startsWith('scan')) {
+                    response = `Lancement du scan... Portée: 5.678974M KLM. ${Math.floor(Math.random()*100)}% des cibles détectées`;
+                } else if (command.startsWith('analyze')) {
+                    response = 'Analyse terminée. 248,000 points de données traités';
+                } else if (command.startsWith('monitor')) {
+                    response = 'Surveillance activée. 100% des canaux opérationnels';
+                } else if (command.startsWith('intercept')) {
+                    response = 'Interception quantique établie. Flux de données en cours';
+                } else if (command.startsWith('decrypt')) {
+                    response = 'Déchiffrement réussi. Accès aux données sensibles accordé';
+                } else if (command.startsWith('track')) {
+                    response = 'Cible suivie avec succès. Coordonnées mises à jour en temps réel';
+                } else if (command === 'clear') {
+                    terminal.innerHTML = '';
+                    terminalInput.value = '';
+                    return;
+                } else if (command === 'help') {
+                    response = 'Commandes disponibles: scan, analyze, monitor, intercept, decrypt, track, clear, help';
+                } else {
+                    response = `ERREUR: Commande "${command}" non reconnue. Tapez "help" pour la liste des commandes`;
+                }
+                
+                // Add response to terminal
+                const resLine = document.createElement('div');
+                resLine.className = 'terminal-line';
+                
+                if (response.startsWith('ERREUR')) {
+                    resLine.innerHTML = `<span class="terminal-error">${response}</span>`;
+                } else {
+                    resLine.innerHTML = `<span class="terminal-response">${response}</span>`;
+                }
+                
+                terminal.appendChild(resLine);
+                terminal.scrollTop = terminal.scrollHeight;
+                terminalInput.value = '';
+                
+                // Show alert for important commands
+                if (command.startsWith('scan') || command.startsWith('intercept') || command.startsWith('decrypt')) {
+                    showQuantumAlert(`Commande exécutée: ${command}`, 'success');
+                }
             }
-        ];
-
-        // Variables d'état
-        let currentUser = null;
-        let selectedPlan = null;
-        let selectedPrice = null;
+        }
+        
+        // Simulate system activity
+        function simulateSystemActivity() {
+            // Show random alerts
+            setInterval(() => {
+                const alerts = [
+                    { message: 'Nouvelle cible détectée à 3.456M KLM', type: 'info' },
+                    { message: 'Signal perdu sur le canal quantique #248', type: 'error' },
+                    { message: 'Analyse complète terminée. 100% des données traitées', type: 'success' },
+                    { message: 'Attention: Tentative d\'intrusion détectée', type: 'warning' },
+                    { message: 'Mise à jour du système en cours...', type: 'info' }
+                ];
+                
+                const randomAlert = alerts[Math.floor(Math.random() * alerts.length)];
+                showQuantumAlert(randomAlert.message, randomAlert.type);
+            }, 10000);
+            
+            // Update distance line
+            setInterval(() => {
+                const distanceLine = document.querySelector('.distance-line');
+                distanceLine.style.animation = 'none';
+                distanceLine.offsetHeight; // Trigger reflow
+                distanceLine.style.animation = 'distanceScan 15s linear infinite';
+            }, 15000);
+        }
         
-        // Initialisation Stripe
-        const stripe = Stripe('pk_test_51NfZ2QKv6q4Xw6J3Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6Z6
+        // Show quantum alert
+        function showQuantumAlert(message, type) {
+            const alertContainer = document.getElementById('quantumAlerts');
+            const alert = document.createElement('div');
+            
+            let alertClass = 'bg-gray-900 border-quantum-blue text-quantum-blue';
+            let icon = 'fa-info-circle';
+            
+            if (type === 'error') {
+                alertClass = 'bg-red-900 border-red-500 text-red-100';
+                icon = 'fa-exclamation-triangle';
+            } else if (type === 'success') {
+                alertClass = 'bg-green-900 border-green-500 text-green-100';
+                icon = 'fa-check-circle';
+            } else if (type === 'warning') {
+                alertClass = 'bg-yellow-900 border-yellow-500 text-yellow-100';
+                icon = 'fa-exclamation-circle';
+            }
+            
+            alert.className = `quantum-alert p-4 mb-2 rounded-lg border ${alertClass} flex items-start`;
+            alert.innerHTML = `
+                <i class="fas ${icon} mr-3 mt-1"></i>
+                <div>
+                    <div class="font-bold">SYSTÈME OMNI-1</div>
+                    <div>${message}</div>
+                </div>
+                <button class="ml-4" onclick="this.parentElement.remove()">
+                    <i class="fas fa-times"></i>
+                </button>
+            `;
+            
+            alertContainer.appendChild(alert);
+            
+            // Remove after 5 seconds
+            setTimeout(() => {
+                if (alert.parentNode) {
+                    alert.remove();
+                }
+            }, 5000);
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/nebulahost" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>
\ No newline at end of file
