Add 2 files

index.html

@@ -42,11 +42,12 @@
             position: absolute;
             bottom: 0;
             width: 100%;
-            height: 40%;
+            height: 45%;
             background-size: cover;
             background-position: center;
             z-index: 5;
             pointer-events: none;
+            border-top: 2px solid rgba(255,255,255,0.1);
         }
         
         .dashboard {
@@ -55,12 +56,15 @@
             left: 0;
             width: 100%;
             height: 30%;
-            background: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(5px);
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
             z-index: 10;
             display: flex;
             flex-direction: column;
             padding: 15px;
+            border-top-left-radius: 20px;
+            border-top-right-radius: 20px;
+            box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
         }
         
         .speedometer-container {
@@ -72,8 +76,8 @@
         
         .speedometer {
             position: relative;
-            width: 120px;
-            height: 120px;
+            width: 140px;
+            height: 140px;
         }
         
         .speed-value {
@@ -81,29 +85,33 @@
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            font-size: 24px;
+            font-size: 28px;
             font-weight: bold;
+            text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
         }
         
         .needle {
             position: absolute;
             bottom: 50%;
             left: 50%;
-            width: 3px;
-            height: 50px;
+            width: 4px;
+            height: 60px;
             background: red;
             transform-origin: 50% 100%;
             transform: translateX(-50%) rotate(-90deg);
             transition: transform 0.1s;
+            border-radius: 2px;
+            box-shadow: 0 0 5px rgba(255,0,0,0.7);
         }
         
         .rpm-meter {
             width: 100%;
-            height: 20px;
+            height: 25px;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
+            border-radius: 12px;
             overflow: hidden;
             margin: 10px 0;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
         }
         
         .rpm-fill {
@@ -111,6 +119,7 @@
             background: linear-gradient(to right, #3b82f6, #ef4444);
             width: 0%;
             transition: width 0.1s;
+            border-radius: 12px;
         }
         
         .controls {
@@ -124,17 +133,23 @@
         }
         
         .control-btn {
-            width: 60px;
-            height: 60px;
+            width: 70px;
+            height: 70px;
             background: rgba(0, 0, 0, 0.7);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 24px;
+            font-size: 28px;
             cursor: pointer;
             user-select: none;
             backdrop-filter: blur(5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            transition: all 0.2s;
+        }
+        
+        .control-btn:active {
+            transform: scale(0.95);
         }
         
         .vehicle-selector {
@@ -142,38 +157,43 @@
             top: 20px;
             left: 20px;
             z-index: 20;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, 0.8);
             border-radius: 15px;
             padding: 15px;
-            backdrop-filter: blur(5px);
+            backdrop-filter: blur(10px);
             max-height: 80vh;
             overflow-y: auto;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
         }
         
         .vehicle-card {
-            width: 120px;
+            width: 140px;
             padding: 10px;
-            margin: 5px;
+            margin: 8px;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
+            border-radius: 12px;
             cursor: pointer;
             transition: all 0.3s;
+            border: 1px solid rgba(255,255,255,0.1);
         }
         
         .vehicle-card:hover {
             background: rgba(255, 255, 255, 0.2);
             transform: scale(1.05);
+            border-color: rgba(255,255,255,0.3);
         }
         
         .vehicle-card.selected {
             background: #3b82f6;
+            box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
         }
         
         .vehicle-img {
             width: 100%;
-            height: 60px;
+            height: 80px;
             object-fit: contain;
-            margin-bottom: 5px;
+            margin-bottom: 8px;
+            border-radius: 8px;
         }
         
         .environment-selector {
@@ -181,27 +201,31 @@
             top: 20px;
             right: 20px;
             z-index: 20;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, 0.8);
             border-radius: 15px;
             padding: 15px;
-            backdrop-filter: blur(5px);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
         }
         
         .environment-btn {
-            padding: 8px 12px;
-            margin: 5px;
+            padding: 10px 15px;
+            margin: 6px;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
+            border-radius: 10px;
             cursor: pointer;
             transition: all 0.3s;
+            border: 1px solid rgba(255,255,255,0.1);
         }
         
         .environment-btn:hover {
             background: rgba(255, 255, 255, 0.2);
+            border-color: rgba(255,255,255,0.3);
         }
         
         .environment-btn.selected {
             background: #3b82f6;
+            box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
         }
         
         .loading-screen {
@@ -216,79 +240,250 @@
             align-items: center;
             justify-content: center;
             z-index: 100;
+            transition: opacity 0.5s;
         }
         
         .progress-bar {
-            width: 300px;
-            height: 10px;
+            width: 350px;
+            height: 12px;
             background: rgba(255, 255, 255, 0.2);
-            border-radius: 5px;
-            margin-top: 20px;
+            border-radius: 6px;
+            margin-top: 25px;
             overflow: hidden;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
         }
         
         .progress {
             height: 100%;
-            background: #3b82f6;
+            background: linear-gradient(to right, #3b82f6, #6366f1);
             width: 0%;
             transition: width 0.3s;
+            border-radius: 6px;
         }
 
         .steering-wheel {
             position: absolute;
-            bottom: 100px;
+            bottom: 120px;
             left: 50%;
             transform: translateX(-50%);
-            width: 150px;
-            height: 150px;
+            width: 180px;
+            height: 180px;
             background-image: url('https://www.freeiconspng.com/uploads/steering-wheel-png-33.png');
             background-size: contain;
             background-repeat: no-repeat;
             z-index: 10;
             transition: transform 0.3s;
+            filter: drop-shadow(0 0 10px rgba(0,0,0,0.7));
         }
 
         .dashboard-indicators {
             display: flex;
             justify-content: space-between;
-            margin-top: 10px;
+            margin-top: 15px;
         }
 
         .indicator {
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding: 5px 10px;
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 5px;
+            padding: 8px 12px;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 8px;
+            min-width: 80px;
+            border: 1px solid rgba(255,255,255,0.1);
         }
 
         .indicator-value {
-            font-size: 18px;
+            font-size: 20px;
             font-weight: bold;
+            margin-bottom: 3px;
         }
 
         .indicator-label {
-            font-size: 12px;
+            font-size: 13px;
             color: #aaa;
         }
 
         .gear-display {
-            font-size: 24px;
+            font-size: 28px;
             font-weight: bold;
             text-align: center;
             margin: 10px 0;
-            background: rgba(0, 0, 0, 0.5);
-            border-radius: 5px;
-            padding: 5px 15px;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 10px;
+            padding: 8px 20px;
             display: inline-block;
+            min-width: 60px;
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: 0 0 10px rgba(0,0,0,0.3);
+        }
+        
+        .road-effects {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            pointer-events: none;
+        }
+        
+        .speed-lines {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
+            background-size: 100% 10px;
+            opacity: 0;
+        }
+        
+        .headlights {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 60%;
+            background: radial-gradient(ellipse at center, rgba(255,240,200,0.3) 0%, rgba(255,240,200,0) 70%);
+            opacity: 0;
+            z-index: 3;
+        }
+        
+        .windshield-drops {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url('https://www.transparenttextures.com/patterns/water-pattern.png');
+            opacity: 0;
+            z-index: 4;
+        }
+        
+        .mirror-left, .mirror-right {
+            position: absolute;
+            width: 15%;
+            height: 20%;
+            background: rgba(0,0,0,0.5);
+            border: 1px solid rgba(255,255,255,0.2);
+            z-index: 6;
+            overflow: hidden;
+        }
+        
+        .mirror-left {
+            top: 15%;
+            left: 2%;
+            border-radius: 5px 0 0 5px;
+        }
+        
+        .mirror-right {
+            top: 15%;
+            right: 2%;
+            border-radius: 0 5px 5px 0;
+        }
+        
+        .mirror-content {
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            transform: scaleX(-1);
+            filter: brightness(0.7);
+        }
+        
+        .pedals {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 30px;
+            z-index: 7;
+        }
+        
+        .pedal {
+            width: 50px;
+            height: 80px;
+            background: rgba(0,0,0,0.7);
+            border-radius: 5px;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            padding-bottom: 10px;
+            font-size: 12px;
+            color: #aaa;
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: 0 5px 10px rgba(0,0,0,0.3);
+        }
+        
+        .pedal.active {
+            background: rgba(255,0,0,0.5);
+            color: white;
+        }
+        
+        .rear-view-mirror {
+            position: absolute;
+            top: 10%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 20%;
+            height: 15%;
+            background: rgba(0,0,0,0.5);
+            border: 1px solid rgba(255,255,255,0.2);
+            z-index: 6;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        
+        .mirror-label {
+            position: absolute;
+            bottom: 5px;
+            left: 5px;
+            font-size: 10px;
+            color: rgba(255,255,255,0.5);
+        }
+        
+        .time-weather {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            padding: 8px 15px;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            z-index: 20;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+        }
+        
+        .weather-icon {
+            font-size: 20px;
+        }
+        
+        .time-display {
+            font-weight: bold;
+        }
+        
+        .damage-effects {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255,0,0,0);
+            z-index: 8;
+            pointer-events: none;
+            transition: background 0.3s;
         }
     </style>
 </head>
 <body>
     <div class="loading-screen">
-        <h1 class="text-3xl font-bold mb-4">CHARGEMENT DU SIMULATEUR</h1>
-        <p class="text-gray-400">Initialisation des modules physiques...</p>
+        <h1 class="text-4xl font-bold mb-6">SIMULATEUR DE CONDUITE RÉALISTE</h1>
+        <p class="text-gray-400 text-lg">Chargement des modules physiques...</p>
         <div class="progress-bar">
             <div class="progress" id="loading-progress"></div>
         </div>
@@ -298,20 +493,62 @@
         <!-- Vue de la route avec images réelles -->
         <div id="road-view"></div>
         
+        <!-- Effets visuels -->
+        <div class="road-effects">
+            <div class="speed-lines" id="speed-lines"></div>
+            <div class="headlights" id="headlights"></div>
+            <div class="windshield-drops" id="windshield-drops"></div>
+            <div class="damage-effects" id="damage-effects"></div>
+        </div>
+        
         <!-- Intérieur de voiture réaliste -->
         <div class="car-interior" id="car-interior"></div>
         
+        <!-- Rétroviseurs -->
+        <div class="mirror-left">
+            <div class="mirror-content" id="left-mirror"></div>
+            <div class="mirror-label">Rétroviseur gauche</div>
+        </div>
+        <div class="mirror-right">
+            <div class="mirror-content" id="right-mirror"></div>
+            <div class="mirror-label">Rétroviseur droit</div>
+        </div>
+        <div class="rear-view-mirror">
+            <div class="mirror-content" id="rear-mirror"></div>
+            <div class="mirror-label">Rétroviseur central</div>
+        </div>
+        
         <!-- Volant animé -->
         <div class="steering-wheel" id="steering-wheel"></div>
         
+        <!-- Pédales -->
+        <div class="pedals">
+            <div class="pedal" id="accelerator-pedal">
+                <div>Accélérateur</div>
+            </div>
+            <div class="pedal" id="brake-pedal">
+                <div>Frein</div>
+            </div>
+            <div class="pedal" id="clutch-pedal">
+                <div>Embrayage</div>
+            </div>
+        </div>
+        
         <!-- Tableau de bord complet -->
         <div class="dashboard">
+            <div class="time-weather">
+                <div class="weather-icon" id="weather-icon"><i class="fas fa-sun"></i></div>
+                <div class="time-display" id="real-time">14:30</div>
+            </div>
+            
             <div class="speedometer-container">
                 <div class="speedometer">
-                    <svg viewBox="0 0 100 100" width="120" height="120">
+                    <svg viewBox="0 0 100 100" width="140" height="140">
                         <circle cx="50" cy="50" r="45" fill="none" stroke="#333" stroke-width="8"/>
                         <circle cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="141.5" transform="rotate(-90 50 50)"/>
                         <text x="50" y="20" text-anchor="middle" fill="white" font-size="10">km/h</text>
+                        <text x="15" y="50" text-anchor="middle" fill="white" font-size="8">0</text>
+                        <text x="85" y="50" text-anchor="middle" fill="white" font-size="8">260</text>
                     </svg>
                     <div class="speed-value" id="speed-value">0</div>
                     <div class="needle" id="needle"></div>
@@ -322,6 +559,7 @@
                     <div class="rpm-meter">
                         <div class="rpm-fill" id="rpm-fill"></div>
                     </div>
+                    <div class="text-xs mt-1">RPM x1000</div>
                 </div>
             </div>
             
@@ -339,9 +577,13 @@
                     <div class="indicator-label">Temps</div>
                 </div>
                 <div class="indicator">
-                    <div class="indicator-value"><i class="fas fa-temperature-high" id="temp-icon"></i></div>
+                    <div class="indicator-value"><i class="fas fa-temperature-high" id="temp-icon"></i> <span id="temp-value">85</span>°C</div>
                     <div class="indicator-label">Moteur</div>
                 </div>
+                <div class="indicator">
+                    <div class="indicator-value" id="odometer">0</div>
+                    <div class="indicator-label">Total km</div>
+                </div>
             </div>
         </div>
         
@@ -356,57 +598,124 @@
             <div class="control-btn" id="horn-btn">
                 <i class="fas fa-bullhorn"></i>
             </div>
+            <div class="control-btn" id="wipers-btn">
+                <i class="fas fa-umbrella"></i>
+            </div>
         </div>
         
         <!-- Sélection du véhicule -->
         <div class="vehicle-selector">
-            <h2 class="text-xl font-bold mb-4">Sélection du véhicule</h2>
+            <h2 class="text-2xl font-bold mb-4">Sélection du véhicule</h2>
             
-            <h3 class="font-semibold mb-2 text-blue-400">Véhicules Réels</h3>
+            <h3 class="font-semibold mb-3 text-blue-400">Véhicules Réels</h3>
             <div class="flex flex-wrap">
-                <div class="vehicle-card" data-vehicle="peugeot-308">
+                <div class="vehicle-card selected" data-vehicle="peugeot-308">
                     <img src="https://www.largus.fr/images/images/peugeot-308-2021-1.jpg" class="vehicle-img">
-                    <div class="text-center text-sm">Peugeot 308</div>
+                    <div class="text-center text-sm font-medium">Peugeot 308</div>
                 </div>
                 <div class="vehicle-card" data-vehicle="bmw-serie3">
                     <img src="https://www.bmw.fr/content/dam/bmw/marketFR/bmw_fr/all-models/3-series/sedan/2021/overview/bmw-3-series-sedan-sp-desktop.jpg" class="vehicle-img">
-                    <div class="text-center text-sm">BMW Série 3</div>
+                    <div class="text-center text-sm font-medium">BMW Série 3</div>
                 </div>
                 <div class="vehicle-card" data-vehicle="audi-a4">
                     <img src="https://www.audi.fr/content/dam/nemo/models/a4/a4-sedan/my-2022/1920x1080-mtc-xxl/1920x1080-a4-sedan-2022_2.jpg" class="vehicle-img">
-                    <div class="text-center text-sm">Audi A4</div>
+                    <div class="text-center text-sm font-medium">Audi A4</div>
+                </div>
+                <div class="vehicle-card" data-vehicle="tesla-model3">
+                    <img src="https://www.tesla.com/sites/default/files/model3-new/social/model-3-hero-social.jpg" class="vehicle-img">
+                    <div class="text-center text-sm font-medium">Tesla Model 3</div>
+                </div>
+            </div>
+            
+            <div class="mt-6">
+                <h3 class="font-semibold mb-3 text-blue-400">Conditions météo</h3>
+                <div class="flex flex-wrap">
+                    <div class="environment-btn" data-weather="sunny">
+                        <i class="fas fa-sun mr-2"></i> Ensoleillé
+                    </div>
+                    <div class="environment-btn" data-weather="rainy">
+                        <i class="fas fa-cloud-rain mr-2"></i> Pluvieux
+                    </div>
+                    <div class="environment-btn" data-weather="night">
+                        <i class="fas fa-moon mr-2"></i> Nuit
+                    </div>
                 </div>
             </div>
             
-            <button id="start-btn" class="w-full mt-4 bg-green-600 hover:bg-green-700 py-2 rounded font-bold">
-                <i class="fas fa-play mr-2"></i> Démarrer
+            <button id="start-btn" class="w-full mt-6 bg-green-600 hover:bg-green-700 py-3 rounded-lg font-bold text-lg transition-all">
+                <i class="fas fa-play mr-2"></i> Démarrer la Conduite
             </button>
         </div>
         
         <!-- Sélection de l'environnement -->
         <div class="environment-selector">
-            <h2 class="text-xl font-bold mb-4">Environnement</h2>
-            <div class="environment-btn selected" data-env="paris">Paris</div>
-            <div class="environment-btn" data-env="autoroute">Autoroute A6</div>
-            <div class="environment-btn" data-env="provence">Provence</div>
-            <div class="environment-btn" data-env="alpes">Alpes</div>
+            <h2 class="text-2xl font-bold mb-4">Environnement</h2>
+            <div class="environment-btn selected" data-env="paris">
+                <i class="fas fa-city mr-2"></i> Paris
+            </div>
+            <div class="environment-btn" data-env="autoroute">
+                <i class="fas fa-road mr-2"></i> Autoroute A6
+            </div>
+            <div class="environment-btn" data-env="provence">
+                <i class="fas fa-tree mr-2"></i> Provence
+            </div>
+            <div class="environment-btn" data-env="alpes">
+                <i class="fas fa-mountain mr-2"></i> Alpes
+            </div>
         </div>
     </div>
 
+    <audio id="engine-sound" loop>
+        <source src="https://www.soundjay.com/mechanical/sounds/car-engine-1.mp3" type="audio/mpeg">
+    </audio>
+    
+    <audio id="horn-sound">
+        <source src="https://www.soundjay.com/mechanical/sounds/car-horn-1.mp3" type="audio/mpeg">
+    </audio>
+    
+    <audio id="rain-sound" loop>
+        <source src="https://www.soundjay.com/nature/sounds/rain-01.mp3" type="audio/mpeg">
+    </audio>
+    
+    <audio id="tire-sound" loop>
+        <source src="https://www.soundjay.com/mechanical/sounds/tire-skid-1.mp3" type="audio/mpeg">
+    </audio>
+
     <script>
         // Simulation des données de chargement
         setTimeout(() => {
             let progress = 0;
+            const loadingTexts = [
+                "Initialisation du moteur physique...",
+                "Chargement des textures HD...",
+                "Configuration des paramètres de conduite...",
+                "Optimisation des performances...",
+                "Préparation des effets sonores..."
+            ];
+            let currentText = 0;
+            const textElement = document.querySelector('.loading-screen p');
+            
             const interval = setInterval(() => {
-                progress += Math.random() * 10;
+                progress += Math.random() * 8;
                 if (progress >= 100) {
                     progress = 100;
                     clearInterval(interval);
                     document.querySelector('.loading-screen').style.opacity = '0';
                     setTimeout(() => {
                         document.querySelector('.loading-screen').style.display = 'none';
-                    }, 300);
+                        // Démarrer le son d'ambiance
+                        document.getElementById('engine-sound').volume = 0.3;
+                        document.getElementById('engine-sound').play();
+                    }, 500);
+                }
+                
+                if (progress > (currentText + 1) * 20) {
+                    currentText++;
+                    if (currentText < loadingTexts.length) {
+                        textElement.textContent = loadingTexts[currentText];
+                    }
                 }
+                
                 document.getElementById('loading-progress').style.width = progress + '%';
             }, 100);
         }, 500);
@@ -416,7 +725,8 @@
             physics: {
                 gravity: 9.81,
                 friction: 0.98,
-                drag: 0.99
+                drag: 0.99,
+                tireGrip: 0.9
             },
             vehicles: {
                 'peugeot-308': { 
@@ -424,21 +734,36 @@
                     acceleration: 0.05, 
                     deceleration: 0.1, 
                     mass: 1300,
-                    interiorImg: 'https://www.cars-data.com/pictures/peugeot/peugeot-308_3955_1.jpg'
+                    interiorImg: 'https://www.cars-data.com/pictures/peugeot/peugeot-308_3955_1.jpg',
+                    engineSound: 'https://www.soundjay.com/mechanical/sounds/car-engine-1.mp3',
+                    hornSound: 'https://www.soundjay.com/mechanical/sounds/car-horn-1.mp3'
                 },
                 'bmw-serie3': { 
                     maxSpeed: 250, 
                     acceleration: 0.07, 
                     deceleration: 0.12, 
                     mass: 1450,
-                    interiorImg: 'https://www.bmw.fr/content/dam/bmw/marketFR/bmw_fr/all-models/3-series/sedan/2021/interior-and-exterior/bmw-3-series-sedan-interior-design-sp-desktop.jpg'
+                    interiorImg: 'https://www.bmw.fr/content/dam/bmw/marketFR/bmw_fr/all-models/3-series/sedan/2021/interior-and-exterior/bmw-3-series-sedan-interior-design-sp-desktop.jpg',
+                    engineSound: 'https://www.soundjay.com/mechanical/sounds/car-engine-2.mp3',
+                    hornSound: 'https://www.soundjay.com/mechanical/sounds/car-horn-2.mp3'
                 },
                 'audi-a4': { 
                     maxSpeed: 240, 
                     acceleration: 0.06, 
                     deceleration: 0.11, 
                     mass: 1400,
-                    interiorImg: 'https://www.audi.fr/content/dam/nemo/models/a4/a4-sedan/my-2022/1920x1080-mtc-xxl/1920x1080-a4-sedan-2022_2.jpg'
+                    interiorImg: 'https://www.audi.fr/content/dam/nemo/models/a4/a4-sedan/my-2022/1920x1080-mtc-xxl/1920x1080-a4-sedan-2022_2.jpg',
+                    engineSound: 'https://www.soundjay.com/mechanical/sounds/car-engine-3.mp3',
+                    hornSound: 'https://www.soundjay.com/mechanical/sounds/car-horn-3.mp3'
+                },
+                'tesla-model3': { 
+                    maxSpeed: 260, 
+                    acceleration: 0.09, 
+                    deceleration: 0.15, 
+                    mass: 1600,
+                    interiorImg: 'https://www.tesla.com/sites/default/files/model3-new/social/model-3-hero-social.jpg',
+                    engineSound: 'https://www.soundjay.com/mechanical/sounds/electric-car-1.mp3',
+                    hornSound: 'https://www.soundjay.com/mechanical/sounds/car-horn-4.mp3'
                 }
             },
             environments: {
@@ -448,6 +773,10 @@
                         'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Paris_Rue_de_Rivoli.jpg/1200px-Paris_Rue_de_Rivoli.jpg',
                         'https://cdn.getyourguide.com/img/location/5c9f1b2e82550.jpeg/88.jpg',
                         'https://www.sortiraparis.com/images/80/83517/577341-visuel-paris-rue-de-sevigne.jpg'
+                    ],
+                    mirrorImages: [
+                        'https://www.parisinfo.com/var/otcp/sites/images/media/1.-photos/02.-ville-culture-loisirs/03.-paris-au-fil-de-l-eau/paris-rue-de-rivoli-630x405-c-thinkstock/1200x630-rue-de-rivoli-%7C-630x405-%7C-%C2%A9-thinkstock.jpg',
+                        'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Paris_Rue_de_Rivoli.jpg/1200px-Paris_Rue_de_Rivoli.jpg'
                     ]
                 },
                 'autoroute': { 
@@ -455,6 +784,9 @@
                         'https://www.leparisien.fr/resizer/9g2XZQ1JY6h4j3w7Q3Q6Q3Q6Q3Q=/1200x675/cloudfront-eu-central-1.images.arcpublishing.com/leparisien/5V3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Y.jpg',
                         'https://www.leparisien.fr/resizer/9g2XZQ1JY6h4j3w7Q3Q6Q3Q6Q3Q=/1200x675/cloudfront-eu-central-1.images.arcpublishing.com/leparisien/5V3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Y.jpg',
                         'https://www.leparisien.fr/resizer/9g2XZQ1JY6h4j3w7Q3Q6Q3Q6Q3Q=/1200x675/cloudfront-eu-central-1.images.arcpublishing.com/leparisien/5V3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Y.jpg'
+                    ],
+                    mirrorImages: [
+                        'https://www.leparisien.fr/resizer/9g2XZQ1JY6h4j3w7Q3Q6Q3Q6Q3Q=/1200x675/cloudfront-eu-central-1.images.arcpublishing.com/leparisien/5V3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Z3Y.jpg'
                     ]
                 },
                 'provence': { 
@@ -462,6 +794,10 @@
                         'https://www.provenceweb.fr/f/albums/route-provence.jpg',
                         'https://www.provenceweb.fr/f/albums/route-provence-2.jpg',
                         'https://www.provenceweb.fr/f/albums/route-provence-3.jpg'
+                    ],
+                    mirrorImages: [
+                        'https://www.provenceweb.fr/f/albums/route-provence.jpg',
+                        'https://www.provenceweb.fr/f/albums/route-provence-2.jpg'
                     ]
                 },
                 'alpes': { 
@@ -469,33 +805,61 @@
                         'https://www.alpes-maritimes-tourisme.com/sites/default/files/styles/header/public/2019-06/route-des-grandes-alpes.jpg',
                         'https://www.alpes-maritimes-tourisme.com/sites/default/files/styles/header/public/2019-06/route-des-grandes-alpes-2.jpg',
                         'https://www.alpes-maritimes-tourisme.com/sites/default/files/styles/header/public/2019-06/route-des-grandes-alpes-3.jpg'
+                    ],
+                    mirrorImages: [
+                        'https://www.alpes-maritimes-tourisme.com/sites/default/files/styles/header/public/2019-06/route-des-grandes-alpes.jpg',
+                        'https://www.alpes-maritimes-tourisme.com/sites/default/files/styles/header/public/2019-06/route-des-grandes-alpes-2.jpg'
                     ]
                 }
+            },
+            weather: {
+                'sunny': {
+                    lightColor: 'rgba(255,240,200,0.3)',
+                    roadWetness: 0,
+                    visibility: 1
+                },
+                'rainy': {
+                    lightColor: 'rgba(150,180,255,0.2)',
+                    roadWetness: 1,
+                    visibility: 0.7
+                },
+                'night': {
+                    lightColor: 'rgba(100,120,255,0.4)',
+                    roadWetness: 0.3,
+                    visibility: 0.5
+                }
             }
         };
 
         // État du jeu
         const gameState = {
             active: false,
-            vehicle: null,
+            vehicle: 'peugeot-308',
             environment: 'paris',
+            weather: 'sunny',
             speed: 0,
             rpm: 0,
             gear: 'N',
             steering: 0,
             acceleration: 0,
             braking: 0,
+            clutch: 0,
             handbrake: false,
             lights: false,
             horn: false,
+            wipers: false,
             fuel: 100,
             distance: 0,
+            odometer: 0,
             startTime: null,
             lastUpdate: null,
             keys: {},
             currentRoadIndex: 0,
             engineTemp: 80,
-            vibrationIntensity: 0
+            vibrationIntensity: 0,
+            damage: 0,
+            timeOfDay: 14.5, // 14:30
+            weatherChanged: false
         };
 
         // Fonction pour changer l'image de la route
@@ -506,25 +870,86 @@
             const roadImages = env.roadImages;
             
             // Changer d'image selon la vitesse
-            if (Math.abs(gameState.speed) > 50) {
-                gameState.currentRoadIndex = (gameState.currentRoadIndex + 1) % roadImages.length;
-                document.getElementById('road-view').style.backgroundImage = `url(${roadImages[gameState.currentRoadIndex]})`;
+            if (Math.abs(gameState.speed) > 20) {
+                const changeInterval = Math.max(100, 500 - (Math.abs(gameState.speed) * 2));
+                
+                if (Date.now() - gameState.lastRoadChange > changeInterval) {
+                    gameState.currentRoadIndex = (gameState.currentRoadIndex + 1) % roadImages.length;
+                    document.getElementById('road-view').style.backgroundImage = `url(${roadImages[gameState.currentRoadIndex]})`;
+                    
+                    // Mettre à jour les rétroviseurs avec un léger délai
+                    setTimeout(() => {
+                        const mirrorImg = env.mirrorImages[gameState.currentRoadIndex % env.mirrorImages.length];
+                        document.getElementById('left-mirror').style.backgroundImage = `url(${mirrorImg})`;
+                        document.getElementById('right-mirror').style.backgroundImage = `url(${mirrorImg})`;
+                        document.getElementById('rear-mirror').style.backgroundImage = `url(${mirrorImg})`;
+                    }, 100);
+                    
+                    gameState.lastRoadChange = Date.now();
+                }
             }
         }
 
         // Animation du jeu
         function animate() {
             if (gameState.active) {
+                updateTimeAndWeather();
                 updatePhysics();
                 updateVehicle();
                 updateRoadView();
                 updateUI();
                 updateVibration();
+                updateSound();
+                updateEffects();
             }
             
             requestAnimationFrame(animate);
         }
 
+        function updateTimeAndWeather() {
+            // Avancer le temps (1 minute de jeu = 1 seconde réelle)
+            gameState.timeOfDay += (1/60) * 0.1;
+            if (gameState.timeOfDay >= 24) gameState.timeOfDay = 0;
+            
+            // Mettre à jour l'affichage de l'heure
+            const hours = Math.floor(gameState.timeOfDay);
+            const minutes = Math.floor((gameState.timeOfDay % 1) * 60);
+            document.getElementById('real-time').textContent = 
+                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+            
+            // Changer la luminosité selon l'heure
+            let lightIntensity = 0;
+            if (gameState.timeOfDay > 5 && gameState.timeOfDay < 19) {
+                // Journée
+                lightIntensity = 1 - Math.abs(12 - gameState.timeOfDay) / 7;
+            } else {
+                // Nuit
+                lightIntensity = 0.2;
+            }
+            
+            // Mettre à jour l'icône météo
+            const weatherIcon = document.getElementById('weather-icon');
+            if (gameState.weather === 'rainy') {
+                weatherIcon.innerHTML = '<i class="fas fa-cloud-rain"></i>';
+            } else if (gameState.timeOfDay > 6 && gameState.timeOfDay < 20) {
+                weatherIcon.innerHTML = '<i class="fas fa-sun"></i>';
+            } else {
+                weatherIcon.innerHTML = '<i class="fas fa-moon"></i>';
+            }
+            
+            // Changement aléatoire de météo
+            if (Math.random() < 0.0005 && !gameState.weatherChanged) {
+                const weatherTypes = Object.keys(config.weather);
+                gameState.weather = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
+                gameState.weatherChanged = true;
+                
+                // Arrêter le changement pendant un moment
+                setTimeout(() => {
+                    gameState.weatherChanged = false;
+                }, 30000);
+            }
+        }
+
         function updatePhysics() {
             const now = new Date();
             const deltaTime = (now - gameState.lastUpdate) / 1000; // en secondes
@@ -532,30 +957,54 @@
             
             if (deltaTime > 0.1) return; // Éviter les sauts de temps trop grands
             
+            // Effets de la météo sur la conduite
+            const weatherEffects = config.weather[gameState.weather];
+            const wetnessFactor = 1 - (weatherEffects.roadWetness * 0.2);
+            
             // Mise à jour de la position et de la vitesse
             if (gameState.gear !== 'N') {
                 // Accélération
                 if (gameState.acceleration > 0) {
                     if (gameState.gear === 'R') {
-                        gameState.speed -= config.vehicles[gameState.vehicle].acceleration * deltaTime * 0.5;
+                        gameState.speed -= config.vehicles[gameState.vehicle].acceleration * deltaTime * 0.5 * wetnessFactor;
                     } else {
-                        gameState.speed += config.vehicles[gameState.vehicle].acceleration * deltaTime;
+                        gameState.speed += config.vehicles[gameState.vehicle].acceleration * deltaTime * wetnessFactor;
                     }
                 }
                 
                 // Freinage
                 if (gameState.braking > 0) {
-                    gameState.speed -= config.vehicles[gameState.vehicle].deceleration * deltaTime;
+                    gameState.speed -= config.vehicles[gameState.vehicle].deceleration * deltaTime * (1 + weatherEffects.roadWetness * 0.5);
                 }
                 
                 // Frein à main
                 if (gameState.handbrake) {
-                    gameState.speed *= 0.95;
+                    gameState.speed *= 0.92;
+                    if (Math.abs(gameState.speed) > 10) {
+                        // Créer des effets de dérapage
+                        gameState.damage += 0.001;
+                        document.getElementById('tire-sound').volume = Math.min(0.5, Math.abs(gameState.speed) / 100);
+                        document.getElementById('tire-sound').play();
+                    }
                 }
                 
                 // Décélération naturelle
                 if (gameState.acceleration === 0 && gameState.braking === 0 && !gameState.handbrake) {
-                    gameState.speed *= config.physics.friction;
+                    gameState.speed *= config.physics.friction * wetnessFactor;
+                }
+                
+                // Effet de direction
+                if (gameState.steering !== 0) {
+                    const turnFactor = gameState.steering * (Math.abs(gameState.speed) / 100) * deltaTime * 10;
+                    document.getElementById('road-view').style.transform = `translate(0, 0) rotate(${turnFactor}deg)`;
+                    
+                    // Perte d'adhérence si on tourne trop vite
+                    if (Math.abs(turnFactor) > 1 && Math.abs(gameState.speed) > 50) {
+                        gameState.speed *= 0.98;
+                        gameState.damage += 0.0005;
+                    }
+                } else {
+                    document.getElementById('road-view').style.transform = 'translate(0, 0) rotate(0)';
                 }
                 
                 // Limite de vitesse selon la marche
@@ -580,29 +1029,48 @@
                 gameState.engineTemp += (gameState.rpm - 2) * deltaTime * 2;
                 gameState.engineTemp = Math.max(60, Math.min(gameState.engineTemp, 120));
                 
+                // Surchauffe si RPM trop haut
+                if (gameState.rpm > 7) {
+                    gameState.engineTemp += deltaTime * 5;
+                    gameState.damage += deltaTime * 0.001;
+                }
+                
                 // Consommation de carburant
                 gameState.fuel -= (gameState.rpm / 100) * deltaTime;
                 gameState.fuel = Math.max(0, gameState.fuel);
                 
                 if (gameState.fuel <= 0) {
                     gameState.speed *= 0.98; // Ralentir si plus de carburant
+                    gameState.rpm = 0;
                 }
             } else { // Point mort
                 gameState.rpm = 0.5;
-                gameState.speed *= 0.95; // Ralentir plus vite en point mort
+                gameState.speed *= 0.92; // Ralentir plus vite en point mort
                 gameState.engineTemp = Math.max(60, gameState.engineTemp - deltaTime * 5);
             }
             
             // Mise à jour de la distance parcourue
-            gameState.distance += (Math.abs(gameState.speed) * deltaTime) / 3600; // en km
+            const distanceDelta = (Math.abs(gameState.speed) * deltaTime) / 3600; // en km
+            gameState.distance += distanceDelta;
+            gameState.odometer += distanceDelta;
             
             // Intensité des vibrations
-            gameState.vibrationIntensity = Math.min(Math.abs(gameState.speed) / 100, 0.1);
+            gameState.vibrationIntensity = Math.min(Math.abs(gameState.speed) / 150, 0.15);
+            
+            // Effets de dommage
+            if (gameState.damage > 0.5) {
+                document.getElementById('damage-effects').style.background = `rgba(255,0,0,${(gameState.damage - 0.5) * 0.4})`;
+            }
         }
         
         function updateVehicle() {
             // Rotation du volant
             document.getElementById('steering-wheel').style.transform = `translateX(-50%) rotate(${gameState.steering * 180}deg)`;
+            
+            // Animation des pédales
+            document.getElementById('accelerator-pedal').classList.toggle('active', gameState.acceleration > 0);
+            document.getElementById('brake-pedal').classList.toggle('active', gameState.braking > 0);
+            document.getElementById('clutch-pedal').classList.toggle('active', gameState.clutch > 0);
         }
         
         function updateVibration() {
@@ -610,11 +1078,61 @@
             if (gameState.vibrationIntensity > 0.01) {
                 const shakeX = Math.sin(Date.now() * 0.01) * gameState.vibrationIntensity;
                 const shakeY = Math.sin(Date.now() * 0.007) * gameState.vibrationIntensity * 0.5;
-                document.getElementById('road-view').style.transform = `translate(${shakeX}px, ${shakeY}px)`;
+                document.getElementById('road-view').style.transform = `translate(${shakeX}px, ${shakeY}px) rotate(0)`;
                 document.getElementById('car-interior').style.transform = `translate(${shakeX * 0.5}px, ${shakeY * 0.5}px)`;
+                
+                // Effet de lignes de vitesse
+                document.getElementById('speed-lines').style.opacity = Math.min(0.5, gameState.vibrationIntensity * 5);
+                document.getElementById('speed-lines').style.backgroundSize = `100% ${Math.max(5, 30 - (gameState.speed / 10))}px`;
             } else {
-                document.getElementById('road-view').style.transform = 'translate(0, 0)';
+                document.getElementById('road-view').style.transform = 'translate(0, 0) rotate(0)';
                 document.getElementById('car-interior').style.transform = 'translate(0, 0)';
+                document.getElementById('speed-lines').style.opacity = '0';
+            }
+        }
+        
+        function updateSound() {
+            // Moteur
+            const engineSound = document.getElementById('engine-sound');
+            if (gameState.active) {
+                engineSound.volume = Math.min(0.5, 0.1 + (gameState.rpm / 15));
+                engineSound.playbackRate = 0.8 + (gameState.rpm / 10);
+            }
+            
+            // Klaxon
+            if (gameState.horn) {
+                document.getElementById('horn-sound').play();
+                gameState.horn = false;
+            }
+            
+            // Essuie-glaces
+            if (gameState.wipers && gameState.weather === 'rainy') {
+                document.getElementById('rain-sound').volume = 0.3;
+                document.getElementById('rain-sound').play();
+            }
+        }
+        
+        function updateEffects() {
+            // Phares
+            if (gameState.lights || gameState.timeOfDay < 6 || gameState.timeOfDay > 18) {
+                const weatherEffects = config.weather[gameState.weather];
+                document.getElementById('headlights').style.opacity = weatherEffects.visibility;
+                document.getElementById('headlights').style.background = 
+                    `radial-gradient(ellipse at center, ${weatherEffects.lightColor} 0%, rgba(255,240,200,0) 70%)`;
+            } else {
+                document.getElementById('headlights').style.opacity = '0';
+            }
+            
+            // Pluie sur le pare-brise
+            if (gameState.weather === 'rainy') {
+                document.getElementById('windshield-drops').style.opacity = '0.6';
+                if (gameState.wipers) {
+                    // Effet d'essuie-glace
+                    document.getElementById('windshield-drops').style.backgroundPosition = 
+                        `${(Date.now() / 100) % 100}px ${(Date.now() / 200) % 100}px`;
+                }
+            } else {
+                document.getElementById('windshield-drops').style.opacity = '0';
             }
         }
         
@@ -635,6 +1153,7 @@
             
             // Distance
             document.getElementById('distance-display').textContent = gameState.distance.toFixed(1);
+            document.getElementById('odometer').textContent = Math.round(gameState.odometer);
             
             // Temps
             if (gameState.startTime) {
@@ -645,13 +1164,15 @@
             }
             
             // Température moteur
-            const tempIcon = document.getElementById('temp-icon');
+            const tempValue = document.getElementById('temp-value');
+            tempValue.textContent = Math.round(gameState.engineTemp);
+            
             if (gameState.engineTemp > 100) {
-                tempIcon.style.color = '#ef4444';
+                tempValue.style.color = '#ef4444';
             } else if (gameState.engineTemp > 90) {
-                tempIcon.style.color = '#f59e0b';
+                tempValue.style.color = '#f59e0b';
             } else {
-                tempIcon.style.color = '#3b82f6';
+                tempValue.style.color = 'white';
             }
         }
         
@@ -664,18 +1185,34 @@
                 
                 // Mettre à jour l'intérieur du véhicule
                 document.getElementById('car-interior').style.backgroundImage = `url(${config.vehicles[gameState.vehicle].interiorImg})`;
+                
+                // Changer le son du moteur
+                const engineSound = document.getElementById('engine-sound');
+                engineSound.pause();
+                engineSound.src = config.vehicles[gameState.vehicle].engineSound;
+                if (gameState.active) engineSound.play();
+                
+                // Changer le son du klaxon
+                document.getElementById('horn-sound').src = config.vehicles[gameState.vehicle].hornSound;
             });
         });
         
         document.querySelectorAll('.environment-btn').forEach(btn => {
             btn.addEventListener('click', () => {
-                document.querySelectorAll('.environment-btn').forEach(b => b.classList.remove('selected'));
-                btn.classList.add('selected');
-                gameState.environment = btn.dataset.env;
-                
-                // Mettre à jour la vue de la route
-                const env = config.environments[gameState.environment];
-                document.getElementById('road-view').style.backgroundImage = `url(${env.roadImages[0]})`;
+                if (btn.dataset.env) {
+                    document.querySelectorAll('.environment-btn').forEach(b => b.classList.remove('selected'));
+                    btn.classList.add('selected');
+                    gameState.environment = btn.dataset.env;
+                    
+                    // Mettre à jour la vue de la route
+                    const env = config.environments[gameState.environment];
+                    document.getElementById('road-view').style.backgroundImage = `url(${env.roadImages[0]})`;
+                    gameState.currentRoadIndex = 0;
+                } else if (btn.dataset.weather) {
+                    gameState.weather = btn.dataset.weather;
+                    document.querySelectorAll('[data-weather]').forEach(b => b.classList.remove('selected'));
+                    btn.classList.add('selected');
+                }
             });
         });
         
@@ -688,6 +1225,7 @@
             gameState.active = true;
             gameState.startTime = new Date();
             gameState.lastUpdate = new Date();
+            gameState.lastRoadChange = Date.now();
             gameState.speed = 0;
             gameState.rpm = 0;
             gameState.gear = 'N';
@@ -695,13 +1233,24 @@
             gameState.distance = 0;
             gameState.currentRoadIndex = 0;
             gameState.engineTemp = 80;
+            gameState.damage = 0;
+            gameState.timeOfDay = 14.5; // 14:30
             
             // Masquer le sélecteur de véhicule
             document.querySelector('.vehicle-selector').style.display = 'none';
+            document.querySelector('.environment-selector').style.display = 'none';
             
             // Initialiser la vue de la route
             const env = config.environments[gameState.environment];
             document.getElementById('road-view').style.backgroundImage = `url(${env.roadImages[0]})`;
+            
+            // Initialiser les rétroviseurs
+            document.getElementById('left-mirror').style.backgroundImage = `url(${env.mirrorImages[0]})`;
+            document.getElementById('right-mirror').style.backgroundImage = `url(${env.mirrorImages[0]})`;
+            document.getElementById('rear-mirror').style.backgroundImage = `url(${env.mirrorImages[0]})`;
+            
+            // Démarrer le son du moteur
+            document.getElementById('engine-sound').play();
         });
         
         document.getElementById('handbrake-btn').addEventListener('click', () => {
@@ -712,17 +1261,19 @@
         document.getElementById('lights-btn').addEventListener('click', () => {
             gameState.lights = !gameState.lights;
             document.getElementById('lights-btn').classList.toggle('bg-yellow-500');
-            // Ici vous pourriez changer la luminosité de la vue
         });
         
         document.getElementById('horn-btn').addEventListener('click', () => {
             gameState.horn = true;
             document.getElementById('horn-btn').classList.add('bg-yellow-500');
-            // Jouer un son de klaxon
             setTimeout(() => {
-                gameState.horn = false;
                 document.getElementById('horn-btn').classList.remove('bg-yellow-500');
-            }, 1000);
+            }, 300);
+        });
+        
+        document.getElementById('wipers-btn').addEventListener('click', () => {
+            gameState.wipers = !gameState.wipers;
+            document.getElementById('wipers-btn').classList.toggle('bg-blue-500');
         });
         
         // Contrôles clavier
@@ -743,6 +1294,9 @@
             // Freinage
             gameState.braking = gameState.keys['s'] || gameState.keys['arrowdown'] ? 1 : 0;
             
+            // Embrayage
+            gameState.clutch = gameState.keys['c'] ? 1 : 0;
+            
             // Direction
             if (gameState.keys['a'] || gameState.keys['arrowleft']) {
                 gameState.steering = -1;
@@ -784,9 +1338,6 @@
             if (gameState.keys['h']) {
                 gameState.horn = true;
                 document.getElementById('horn-btn').classList.add('bg-yellow-500');
-            } else {
-                gameState.horn = false;
-                document.getElementById('horn-btn').classList.remove('bg-yellow-500');
             }
             
             // Phares
@@ -794,11 +1345,29 @@
                 gameState.lights = !gameState.lights;
                 document.getElementById('lights-btn').classList.toggle('bg-yellow-500');
             }
+            
+            // Essuie-glaces
+            if (gameState.keys['e']) {
+                gameState.wipers = true;
+                document.getElementById('wipers-btn').classList.add('bg-blue-500');
+            } else {
+                gameState.wipers = false;
+                document.getElementById('wipers-btn').classList.remove('bg-blue-500');
+            }
         }
         
         function changeGear(newGear) {
-            gameState.gear = newGear;
-            document.getElementById('gear-display').textContent = newGear;
+            // Vérifier que l'embrayage est enfoncé pour changer de vitesse
+            if (gameState.clutch || gameState.vehicle === 'tesla-model3') {
+                gameState.gear = newGear;
+                document.getElementById('gear-display').textContent = newGear;
+                
+                // Petit effet de vibration lors du changement
+                gameState.vibrationIntensity = 0.1;
+                setTimeout(() => {
+                    gameState.vibrationIntensity = 0;
+                }, 200);
+            }
         }
         
         // Initialisation
@@ -806,6 +1375,15 @@
             animate();
             document.querySelector('.vehicle-card[data-vehicle="peugeot-308"]').click();
             document.querySelector('.environment-btn[data-env="paris"]').click();
+            document.querySelector('[data-weather="sunny"]').click();
+            
+            // Mettre à jour l'heure réelle
+            setInterval(() => {
+                const now = new Date();
+                const hours = now.getHours().toString().padStart(2, '0');
+                const minutes = now.getMinutes().toString().padStart(2, '0');
+                document.getElementById('real-time').textContent = `${hours}:${minutes}`;
+            }, 1000);
         }, 1500);
     </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/ultimate-driving-simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -3,4 +3,5 @@ JE VEUX DES JEUX REEL EN 3D   COMME SI ON SE SENT RELLE DEDANT
 je veux du  visuel reel avec des paysage des personne toute  du reel 
 je veux du vrai paysage avec  a linterrieur d'une vrai voiture relle  quifibre vraiment avec le simulateur en temp réél 
 met vision normal pas de vision 3D  met toute en relle 
-je veux voir la vue reel  et a l'interrieur de la voiture reel comme si on etait avec toute les vibrasionn  avec le volant réelle toute en relle , enleveD POUR ETRE PLUS EN NORMAL VISION NORMAN AVEC TOUTE LE TABLEAU DE BORD COMPLETr de mode 3
+je veux voir la vue reel  et a l'interrieur de la voiture reel comme si on etait avec toute les vibrasionn  avec le volant réelle toute en relle , enleveD POUR ETRE PLUS EN NORMAL VISION NORMAN AVEC TOUTE LE TABLEAU DE BORD COMPLETr de mode 3
+JE VEUX MODE REEL  CONDUITE MODE REEL