Add 2 files

index.html

@@ -167,35 +167,38 @@
             box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
         }
         
-        /* Style pour le menu déroulant des serveurs */
-        .server-dropdown {
-            display: none;
-            position: absolute;
-            bottom: 100%;
+        /* Style pour le lecteur vidéo */
+        .video-player {
+            position: fixed;
+            top: 0;
             left: 0;
-            background: rgba(26, 26, 26, 0.95);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
-            padding: 10px;
-            min-width: 200px;
-            z-index: 100;
-            backdrop-filter: blur(10px);
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.9);
+            z-index: 9999;
+            display: none;
+            justify-content: center;
+            align-items: center;
         }
         
-        .server-dropdown.show {
-            display: block;
-            animation: fadeIn 0.3s ease-out forwards;
+        .video-container {
+            width: 80%;
+            max-width: 1200px;
+            position: relative;
         }
         
-        .server-option {
-            padding: 8px 12px;
-            border-radius: 4px;
+        .close-player {
+            position: absolute;
+            top: -40px;
+            right: 0;
+            color: white;
+            font-size: 30px;
             cursor: pointer;
-            margin-bottom: 5px;
+            transition: all 0.3s ease;
         }
         
-        .server-option:hover {
-            background: rgba(0, 240, 255, 0.1);
+        .close-player:hover {
+            color: #ff00f0;
         }
         
         /* Badge VF */
@@ -372,221 +375,18 @@
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="films-grid">
                 <!-- Les films seront générés par JavaScript -->
             </div>
-            
-            <!-- Bouton pour charger plus de films -->
-            <div class="text-center mt-12">
-                <button id="load-more-btn" class="bg-gradient-to-r from-neon-purple to-neon-pink text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300 inline-flex items-center">
-                    <i class="fas fa-sync-alt mr-2"></i> Charger plus de films
-                </button>
-            </div>
-        </div>
-    </section>
-
-    <!-- Section Abonnement -->
-    <section id="abonnement" class="scroll-section min-h-screen py-20 bg-black relative overflow-hidden">
-        <div class="absolute inset-0 z-0">
-            <div class="absolute inset-0 bg-[url('https://image.tmdb.org/t/p/original/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg')] opacity-10 bg-cover bg-center"></div>
-            <div class="absolute inset-0 bg-gradient-to-b from-black via-black/70 to-black/30"></div>
-        </div>
-        
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-5xl font-bold mb-4 futuriste gradient-text">ABONNEMENT PREMIUM</h2>
-                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
-                    Accédez à tous les films en <span class="text-neon-green">qualité 4K</span> sans publicité et avec 
-                    <span class="text-neon-blue">serveurs prioritaires</span> pour un streaming ultra-fluide.
-                </p>
-            </div>
-            
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-                <!-- Forfait Standard -->
-                <div class="holographic rounded-2xl p-6 transform transition-all duration-500 hover:scale-105">
-                    <div class="text-center mb-6">
-                        <h3 class="text-2xl font-bold text-neon-blue mb-2">Standard</h3>
-                        <p class="text-gray-400">Parfait pour les cinéphiles occasionnels</p>
-                    </div>
-                    <div class="text-center mb-8">
-                        <span class="text-5xl font-bold">9,99€</span>
-                        <span class="text-gray-400">/mois</span>
-                    </div>
-                    <ul class="space-y-3 mb-8">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Accès à tous les films VF</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Qualité Full HD</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>2 appareils simultanés</span>
-                        </li>
-                        <li class="flex items-center text-gray-500">
-                            <i class="fas fa-times text-red-500 mr-2"></i>
-                            <span>Publicités occasionnelles</span>
-                        </li>
-                    </ul>
-                    <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
-                        Choisir ce forfait
-                    </button>
-                </div>
-                
-                <!-- Forfait Premium -->
-                <div class="holographic rounded-2xl p-6 border-2 border-neon-purple transform transition-all duration-500 hover:scale-105 relative">
-                    <div class="absolute top-0 right-0 bg-neon-purple text-black px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
-                        RECOMMANDÉ
-                    </div>
-                    <div class="text-center mb-6">
-                        <h3 class="text-2xl font-bold text-neon-purple mb-2">Premium</h3>
-                        <p class="text-gray-400">Pour les vrais passionnés de cinéma</p>
-                    </div>
-                    <div class="text-center mb-8">
-                        <span class="text-5xl font-bold">14,99€</span>
-                        <span class="text-gray-400">/mois</span>
-                    </div>
-                    <ul class="space-y-3 mb-8">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Tous les films en VF HD</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Qualité 4K HDR</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>4 appareils simultanés</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Serveurs prioritaires</span>
-                        </li>
-                    </ul>
-                    <button class="w-full bg-gradient-to-r from-neon-purple to-neon-blue text-black py-3 rounded-full font-bold hover:opacity-90 transition-all duration-300">
-                        Choisir ce forfait
-                    </button>
-                </div>
-                
-                <!-- Forfait Quantique -->
-                <div class="holographic rounded-2xl p-6 transform transition-all duration-500 hover:scale-105">
-                    <div class="text-center mb-6">
-                        <h3 class="text-2xl font-bold text-neon-pink mb-2">Ultimate</h3>
-                        <p class="text-gray-400">L'expérience ultime pour cinéphiles</p>
-                    </div>
-                    <div class="text-center mb-8">
-                        <span class="text-5xl font-bold">29,99€</span>
-                        <span class="text-gray-400">/mois</span>
-                    </div>
-                    <ul class="space-y-3 mb-8">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Tous les films en 4K HDR+</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Accès aux avant-premières</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Appareils illimités</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-neon-green mr-2"></i>
-                            <span>Serveurs exclusifs</span>
-                        </li>
-                    </ul>
-                    <button class="w-full bg-gray-800 text-white py-3 rounded-full font-medium hover:bg-gray-700 transition-all duration-300">
-                        Choisir ce forfait
-                    </button>
-                </div>
-            </div>
-            
-            <div class="text-center mt-16 max-w-3xl mx-auto">
-                <h3 class="text-2xl font-bold mb-4">Essai gratuit de 7 jours</h3>
-                <p class="text-gray-400 mb-6">
-                    Profitez d'un essai gratuit de 7 jours sans engagement. Annulez à tout moment. 
-                    Accès complet à toute notre bibliothèque en qualité Premium pendant la période d'essai.
-                </p>
-                <button class="bg-gradient-to-r from-neon-blue to-neon-green text-black px-8 py-3 rounded-full text-lg font-bold hover:opacity-90 transition-all duration-300">
-                    Commencer l'essai gratuit
-                </button>
-            </div>
         </div>
     </section>
 
-    <!-- Footer -->
-    <footer class="bg-gray-900 py-12 relative overflow-hidden">
-        <div class="absolute inset-0 z-0">
-            <div class="absolute inset-0 bg-[url('https://image.tmdb.org/t/p/original/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg')] opacity-10 bg-cover bg-center"></div>
-            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/30"></div>
-        </div>
-        
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <h3 class="text-xl font-bold mb-4 gradient-text futuriste">CINÉFUTUR</h3>
-                    <p class="text-gray-400">
-                        La plateforme cinématographique du futur. Tous les films en version française et haute qualité.
-                    </p>
-                    <div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">
-                            <i class="fab fa-facebook-f"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">
-                            <i class="fab fa-twitter"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-neon-purple transition-all duration-300">
-                            <i class="fab fa-instagram"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-neon-green transition-all duration-300">
-                            <i class="fab fa-tiktok"></i>
-                        </a>
-                    </div>
-                </div>
-                
-                <div>
-                    <h4 class="text-lg font-bold mb-4 text-white">Navigation</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#accueil" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Accueil</a></li>
-                        <li><a href="#nouveautes" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Nouveautés</a></li>
-                        <li><a href="#films" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Films 2025</a></li>
-                        <li><a href="#abonnement" class="text-gray-400 hover:text-neon-green transitionall duration-300">Abonnement</a></li>
-                    </ul>
-                </div>
-                
-                <div>
-                    <h4 class="text-lg font-bold mb-4 text-white">Informations</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">À propos</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Contact</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Presse</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition-all duration-300">Carrières</a></li>
-                    </ul>
-                </div>
-                
-                <div>
-                    <h4 class="text-lg font-bold mb-4 text-white">Légal</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-neon-blue transition-all duration-300">Conditions d'utilisation</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-neon-pink transition-all duration-300">Politique de confidentialité</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-neon-purple transition-all duration-300">Cookies</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition-all duration-300">Mentions légales</a></li>
-                    </ul>
-                </div>
-            </div>
-            
-            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-gray-500 text-sm mb-4 md:mb-0">
-                    © 2023 CinéFutur. Tous droits réservés.
-                </p>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-all duration-300">Paramètres des cookies</a>
-                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-all duration-300">Préférences de confidentialité</a>
-                </div>
-            </div>
+    <!-- Lecteur vidéo -->
+    <div class="video-player" id="video-player">
+        <div class="video-container">
+            <span class="close-player" id="close-player"><i class="fas fa-times"></i></span>
+            <video controls autoplay id="movie-player" class="w-full h-auto">
+                Votre navigateur ne supporte pas la lecture de vidéos.
+            </video>
         </div>
-    </footer>
+    </div>
 
     <script>
         // Menu mobile
@@ -610,11 +410,7 @@
                 image: "https://image.tmdb.org/t/p/w500/uxBHXaoOvAwy4NpPpP7nNx2rXYQ.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Premium", qualite: "4K HDR", url: "#" },
-                    { nom: "Serveur Mutant", qualite: "1080p", url: "#" },
-                    { nom: "Serveur Standard", qualite: "720p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Avatar 3",
@@ -627,11 +423,7 @@
                 image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Pandora", qualite: "4K HDR", url: "#" },
-                    { nom: "Serveur Premium", qualite: "1080p", url: "#" },
-                    { nom: "Serveur Standard", qualite: "720p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Mission: Impossible 8",
@@ -644,10 +436,7 @@
                 image: "https://image.tmdb.org/t/p/w500/NNxYkU70HPurnPCSiTMUULQXa.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Impossible", qualite: "4K", url: "#" },
-                    { nom: "Serveur Stunt", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Thunderbolts",
@@ -660,10 +449,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Marvel", qualite: "4K", url: "#" },
-                    { nom: "Serveur Villain", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Fantastic Four",
@@ -676,10 +462,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Marvel", qualite: "4K", url: "#" },
-                    { nom: "Serveur Cosmic", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Blade",
@@ -692,10 +475,7 @@
                 image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Marvel", qualite: "4K", url: "#" },
-                    { nom: "Serveur Vampire", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Superman: Legacy",
@@ -708,10 +488,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur DC", qualite: "4K", url: "#" },
-                    { nom: "Serveur Hero", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Captain America: Brave New World",
@@ -724,10 +501,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Marvel", qualite: "4K", url: "#" },
-                    { nom: "Serveur Patriot", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "The Batman Part II",
@@ -740,10 +514,7 @@
                 image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Gotham", qualite: "4K", url: "#" },
-                    { nom: "Serveur Dark", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Jurassic World 4",
@@ -756,10 +527,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Dino", qualite: "4K", url: "#" },
-                    { nom: "Serveur Premium", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Spider-Man: Beyond the Spider-Verse",
@@ -772,10 +540,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Animation", qualite: "4K", url: "#" },
-                    { nom: "Serveur Spider", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Wicked",
@@ -788,10 +553,7 @@
                 image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Musical", qualite: "4K", url: "#" },
-                    { nom: "Serveur Oz", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Kraven the Hunter",
@@ -804,10 +566,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1nuhua.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Hunter", qualite: "4K", url: "#" },
-                    { nom: "Serveur Action", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Transformers One",
@@ -820,10 +579,7 @@
                 image: "https://image.tmdb.org/t/p/w500/8YFL5QQVPy3AgrEQxNYVSgiPEbe.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Cybertron", qualite: "4K", url: "#" },
-                    { nom: "Serveur Premium", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             },
             {
                 titre: "Mufasa: The Lion King",
@@ -836,40 +592,39 @@
                 image: "https://image.tmdb.org/t/p/w500/5aUX5xqvOkGC3a4iW5WEMOVJwNP.jpg",
                 vf: true,
                 hd: true,
-                serveurs: [
-                    { nom: "Serveur Disney", qualite: "4K", url: "#" },
-                    { nom: "Serveur Savanna", qualite: "1080p", url: "#" }
-                ]
+                videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
             }
         ];
         
-        // Variables pour le chargement automatique
-        let filmsCharges = 0;
-        const batchSize = 8; // Nombre de films à charger à chaque fois
-        const filmsGrid = document.getElementById('films-grid');
-        const loadMoreBtn = document.getElementById('load-more-btn');
-        
-        // Fonction pour générer le menu des serveurs
-        function genererMenuServeurs(serveurs) {
-            let html = '<div class="server-dropdown rounded-lg shadow-lg p-3">';
-            html += '<div class="text-xs text-gray-400 mb-2">CHOISISSEZ UN SERVEUR:</div>';
-            
-            serveurs.forEach(serveur => {
-                html += `
-                    <div class="server-option flex items-center justify-between" data-url="${serveur.url}">
-                        <div>
-                            <span class="font-medium">${serveur.nom}</span>
-                            <span class="text-xs text-neon-blue ml-2">${serveur.qualite}</span>
-                        </div>
-                        <i class="fas fa-play text-neon-green"></i>
-                    </div>
-                `;
-            });
-            
-            html += '</div>';
-            return html;
+        // Variables pour le lecteur vidéo
+        const videoPlayer = document.getElementById('video-player');
+        const moviePlayer = document.getElementById('movie-player');
+        const closePlayer = document.getElementById('close-player');
+        
+        // Fonction pour ouvrir le lecteur vidéo
+        function openVideoPlayer(videoUrl) {
+            moviePlayer.src = videoUrl;
+            videoPlayer.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+            moviePlayer.play();
         }
         
+        // Fermer le lecteur vidéo
+        closePlayer.addEventListener('click', () => {
+            moviePlayer.pause();
+            videoPlayer.style.display = 'none';
+            document.body.style.overflow = 'auto';
+        });
+        
+        // Fermer le lecteur si on clique en dehors
+        videoPlayer.addEventListener('click', (e) => {
+            if (e.target === videoPlayer) {
+                moviePlayer.pause();
+                videoPlayer.style.display = 'none';
+                document.body.style.overflow = 'auto';
+            }
+        });
+        
         // Générer les films dans la grille
         function genererFilmsGrid(films, targetElement) {
             films.forEach(film => {
@@ -906,82 +661,28 @@
                             <span>${film.annee}</span>
                         </div>
                     </div>
-                    <div class="mt-2 relative">
-                        <button class="server-btn w-full bg-gradient-to-r from-neon-blue to-neon-purple text-black py-2 rounded-full text-sm font-bold hover:opacity-90 transition-all duration-300 flex items-center justify-center">
+                    <div class="mt-2">
+                        <button class="watch-btn w-full bg-gradient-to-r from-neon-blue to-neon-purple text-black py-2 rounded-full text-sm font-bold hover:opacity-90 transition-all duration-300 flex items-center justify-center" data-video="${film.videoUrl}">
                             <i class="fas fa-play mr-2"></i> Regarder
                         </button>
-                        ${genererMenuServeurs(film.serveurs)}
                     </div>
                 `;
                 targetElement.appendChild(filmElement);
             });
             
-            // Gestion des menus déroulants des serveurs
-            document.querySelectorAll('.server-btn').forEach(btn => {
-                btn.addEventListener('click', function(e) {
-                    e.stopPropagation();
-                    const dropdown = this.nextElementSibling;
-                    dropdown.classList.toggle('show');
-                });
-            });
-            
-            // Fermer les menus déroulants quand on clique ailleurs
-            document.addEventListener('click', function() {
-                document.querySelectorAll('.server-dropdown').forEach(dropdown => {
-                    dropdown.classList.remove('show');
-                });
-            });
-            
-            // Empêcher la fermeture quand on clique dans le menu
-            document.querySelectorAll('.server-dropdown').forEach(dropdown => {
-                dropdown.addEventListener('click', function(e) {
-                    e.stopPropagation();
+            // Ajouter les événements aux boutons "Regarder"
+            document.querySelectorAll('.watch-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const videoUrl = this.getAttribute('data-video');
+                    openVideoPlayer(videoUrl);
                 });
             });
-            
-            // Gestion du choix de serveur
-            document.querySelectorAll('.server-option').forEach(option => {
-                option.addEventListener('click', function() {
-                    const url = this.getAttribute('data-url');
-                    // Ici vous pourriez rediriger vers la page de lecture
-                    // ou ouvrir un lecteur vidéo avec l'URL du serveur
-                    alert(`Redirection vers le serveur: ${url}`);
-                });
-            });
-        }
-        
-        // Charger plus de films
-        function chargerPlusDeFilms() {
-            if (filmsCharges >= films2025.length) {
-                loadMoreBtn.textContent = "Tous les films chargés";
-                loadMoreBtn.disabled = true;
-                return;
-            }
-            
-            loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement...';
-            
-            // Simulation de chargement asynchrone
-            setTimeout(() => {
-                const nouveauxFilms = films2025.slice(filmsCharges, filmsCharges + batchSize);
-                genererFilmsGrid(nouveauxFilms, filmsGrid);
-                filmsCharges += batchSize;
-                
-                loadMoreBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Charger plus de films';
-                
-                // Si on a chargé tous les films, désactiver le bouton
-                if (filmsCharges >= films2025.length) {
-                    loadMoreBtn.textContent = "Tous les films chargés";
-                    loadMoreBtn.disabled = true;
-                }
-            }, 800);
         }
         
         // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
-            // Charger le premier lot de films
-            const premiersFilms = films2025.slice(0, batchSize);
-            genererFilmsGrid(premiersFilms, filmsGrid);
-            filmsCharges = batchSize;
+            // Charger tous les films
+            genererFilmsGrid(films2025, document.getElementById('films-grid'));
             
             // Animation au scroll
             const observerOptions = {
@@ -999,9 +700,6 @@
             document.querySelectorAll('.scroll-section').forEach(section => {
                 observer.observe(section);
             });
-            
-            // Gestion du bouton "Charger plus"
-            loadMoreBtn.addEventListener('click', chargerPlusDeFilms);
         });
     </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/cin-futur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -2,4 +2,5 @@ https://plateformecinema.com/:  je veux le site en francais et sile futuriste an
 AFFICHER LES VRAIS IMAGES DES SITE ET DES VRAIS FILMS JE VEUX PAS DE SITE D EXEMPLE  JE VEUX TOUT EN PILOTAGE AUTOMATIQUE
 activer charger plus de film en systeme robotisé automaique 
 afficher toutes les derniere film sortie ajouter des bouton a regarder et leurs serveur  je les feux les film en francais de haute qualitéé 
-afficher les affiches des derniere film sorte de 2025 avec leur vrais image  ,,charger plus de film et ajouter les bouton regarder avec leur serveur integré en automatique
+afficher les affiches des derniere film sorte de 2025 avec leur vrais image  ,,charger plus de film et ajouter les bouton regarder avec leur serveur integré en automatique
+afficher toutes les film en automatique avec toutes les images des film et leurs bouton a regarger en systeme autoplay directement quand on clicque sur regarder