Spaces:

Mousco
/

anycoder-b62e8a1e

Running

App Files Files Community

Mousco commited on 26 days ago

Commit

b476f3b

verified ·

1 Parent(s): 6e9a7a9

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +852 -19

index.html CHANGED Viewed

@@ -1,19 +1,852 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CineStream - Streaming Gratuit</title>
+    <!-- Importation d'une police moderne -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <!-- Importation des icônes (Phosphor Icons via CDN) -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <style>
+        /* --- VARIABLES CSS & RESET --- */
+        :root {
+            --primary-color: #e50914; /* Rouge style Netflix */
+            --background-dark: #141414;
+            --background-light: #1f1f1f;
+            --text-white: #ffffff;
+            --text-gray: #b3b3b3;
+            --transition-speed: 0.3s;
+            --header-height: 70px;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--background-dark);
+            color: var(--text-white);
+            overflow-x: hidden;
+        }
+        a { text-decoration: none; color: inherit; }
+        ul { list-style: none; }
+        button { cursor: pointer; border: none; outline: none; font-family: inherit; }
+        /* --- HEADER --- */
+        header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            height: var(--header-height);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 4%;
+            background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
+            z-index: 1000;
+            transition: background-color var(--transition-speed);
+        }
+        header.scrolled {
+            background-color: var(--background-dark);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
+        }
+        .logo {
+            font-size: 1.8rem;
+            font-weight: 800;
+            color: var(--primary-color);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .nav-links {
+            display: flex;
+            gap: 20px;
+        }
+        .nav-links li a {
+            color: var(--text-white);
+            font-size: 0.9rem;
+            transition: color var(--transition-speed);
+        }
+        .nav-links li a:hover {
+            color: var(--text-gray);
+        }
+        .right-section {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        /* Barre de recherche */
+        .search-box {
+            background: rgba(0,0,0,0.75);
+            border: 1px solid var(--text-white);
+            display: flex;
+            align-items: center;
+            padding: 5px 10px;
+            border-radius: 4px;
+            transition: width 0.3s;
+        }
+        .search-box input {
+            background: transparent;
+            border: none;
+            color: white;
+            padding: 5px;
+            width: 0; /* Caché par défaut */
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+        .search-box.active input {
+            width: 200px;
+            opacity: 1;
+            padding-left: 10px;
+        }
+        .search-box i {
+            font-size: 1.2rem;
+            cursor: pointer;
+        }
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 4px;
+            background-color: #333;
+            background-image: url('https://picsum.photos/seed/user/200/200');
+            background-size: cover;
+        }
+        /* --- HERO SECTION --- */
+        .hero {
+            position: relative;
+            height: 80vh;
+            width: 100%;
+            background-size: cover;
+            background-position: center;
+            display: flex;
+            align-items: center;
+            padding-left: 4%;
+        }
+        .hero::after {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: linear-gradient(to top, var(--background-dark) 0%, transparent 60%, rgba(0,0,0,0.4) 100%);
+        }
+        .hero-content {
+            position: relative;
+            z-index: 10;
+            max-width: 500px;
+            margin-top: 50px;
+        }
+        .hero-title {
+            font-size: 3.5rem;
+            font-weight: 800;
+            margin-bottom: 15px;
+            line-height: 1.1;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+        }
+        .hero-desc {
+            font-size: 1.1rem;
+            margin-bottom: 25px;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+        }
+        .hero-buttons {
+            display: flex;
+            gap: 15px;
+        }
+        .btn {
+            padding: 10px 24px;
+            border-radius: 4px;
+            font-weight: 600;
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: transform 0.2s, background-color 0.2s;
+        }
+        .btn:hover {
+            transform: scale(1.05);
+        }
+        .btn-play {
+            background-color: var(--text-white);
+            color: black;
+        }
+        .btn-info {
+            background-color: rgba(109, 109, 110, 0.7);
+            color: var(--text-white);
+        }
+        /* --- MAIN CONTENT --- */
+        main {
+            padding: 20px 4%;
+            position: relative;
+            z-index: 20;
+            margin-top: -50px; /* Chevauchement sur le hero */
+        }
+        .category-section {
+            margin-bottom: 40px;
+        }
+        .category-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #e5e5e5;
+        }
+        /* Carrousel horizontal */
+        .movies-row {
+            display: flex;
+            gap: 10px;
+            overflow-x: auto;
+            padding-bottom: 20px;
+            scroll-behavior: smooth;
+        }
+        .movies-row::-webkit-scrollbar {
+            height: 8px;
+        }
+        .movies-row::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .movies-row::-webkit-scrollbar-thumb {
+            background: #333;
+            border-radius: 4px;
+        }
+        .movies-row::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        .movie-card {
+            min-width: 200px;
+            height: 300px;
+            border-radius: 4px;
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: transform 0.3s ease, z-index 0.3s;
+            background-color: #222;
+        }
+        .movie-card:hover {
+            transform: scale(1.1);
+            z-index: 100;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+        }
+        .movie-card img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .card-info {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 10px;
+            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .movie-card:hover .card-info {
+            opacity: 1;
+        }
+        .card-title {
+            font-size: 0.9rem;
+            font-weight: 600;
+        }
+        .card-meta {
+            font-size: 0.7rem;
+            color: #46d369; /* Vert pour le score */
+            margin-top: 5px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        /* --- FOOTER --- */
+        footer {
+            margin-top: 50px;
+            padding: 50px 4%;
+            color: var(--text-gray);
+            font-size: 0.8rem;
+            text-align: center;
+            border-top: 1px solid #333;
+        }
+        .anycoder-link {
+            color: var(--primary-color);
+            font-weight: bold;
+            margin-top: 10px;
+            display: inline-block;
+        }
+        /* --- MODAL (PLAYER & DETAILS) --- */
+        .modal-overlay {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .modal-overlay.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal-content {
+            background: #181818;
+            width: 90%;
+            max-width: 800px;
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            transform: translateY(50px);
+            transition: transform 0.3s;
+        }
+        .modal-overlay.active .modal-content {
+            transform: translateY(0);
+        }
+        .close-modal {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: rgba(0,0,0,0.5);
+            color: white;
+            border-radius: 50%;
+            width: 35px;
+            height: 35px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .video-placeholder {
+            width: 100%;
+            aspect-ratio: 16/9;
+            background: black;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+        }
+        .play-btn-large {
+            font-size: 4rem;
+            color: var(--primary-color);
+            opacity: 0.8;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .play-btn-large:hover {
+            transform: scale(1.1);
+            opacity: 1;
+        }
+        .modal-details {
+            padding: 20px;
+        }
+        .modal-title {
+            font-size: 1.5rem;
+            margin-bottom: 10px;
+        }
+        .modal-meta {
+            display: flex;
+            gap: 15px;
+            color: var(--text-gray);
+            font-size: 0.9rem;
+            margin-bottom: 15px;
+        }
+        .match-score { color: #46d369; font-weight: bold; }
+        .modal-desc {
+            line-height: 1.5;
+            color: #fff;
+        }
+        /* --- RESPONSIVE --- */
+        @media (max-width: 768px) {
+            .hero-title { font-size: 2rem; }
+            .nav-links { display: none; } /* Menu caché sur mobile pour simplifier */
+            .search-box.active input { width: 150px; }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header id="main-header">
+        <div class="logo">CineStream</div>
+        <ul class="nav-links">
+            <li><a href="#" class="active">Accueil</a></li>
+            <li><a href="#">Séries</a></li>
+            <li><a href="#">Films</a></li>
+            <li><a href="#">Nouveautés</a></li>
+            <li><a href="#">Ma liste</a></li>
+        </ul>
+        <div class="right-section">
+            <div class="search-box" id="search-box">
+                <i class="ph ph-magnifying-glass" id="search-icon"></i>
+                <input type="text" id="search-input" placeholder="Titres, personnages, genres...">
+            </div>
+            <div class="user-avatar"></div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero" id="hero-section">
+        <div class="hero-content">
+            <h1 class="hero-title" id="hero-title">Chargement...</h1>
+            <p class="hero-desc" id="hero-desc">...</p>
+            <div class="hero-buttons">
+                <button class="btn btn-play" onclick="playHeroMovie()">
+                    <i class="ph ph-play-fill"></i> Lecture
+                </button>
+                <button class="btn btn-info" onclick="showHeroDetails()">
+                    <i class="ph ph-info"></i> Plus d'infos
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Main Content -->
+    <main id="main-content">
+        <!-- Les catégories seront injectées ici par JS -->
+    </main>
+    <!-- Modal Player -->
+    <div class="modal-overlay" id="movie-modal">
+        <div class="modal-content">
+            <div class="close-modal" onclick="closeModal()">
+                <i class="ph ph-x"></i>
+            </div>
+            <div class="video-placeholder" id="modal-video-area">
+                <!-- Simulation du lecteur -->
+                <img src="" id="modal-bg-img" style="position:absolute; width:100%; height:100%; object-fit:cover; opacity:0.3;">
+                <i class="ph ph-play-circle play-btn-large" onclick="startFakePlayback()"></i>
+                <div id="video-status" style="position:absolute; bottom:20px; color:white; display:none;">Chargement du flux...</div>
+            </div>
+            <div class="modal-details">
+                <h2 class="modal-title" id="modal-title">Titre du film</h2>
+                <div class="modal-meta">
+                    <span class="match-score">98% pour vous</span>
+                    <span id="modal-year">2023</span>
+                    <span style="border:1px solid #666; padding:0 4px; font-size:0.7rem;">HD</span>
+                </div>
+                <p class="modal-desc" id="modal-desc">Description du film...</p>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer>
+        <p>© 2023 CineStream. Tous droits réservés. Ceci est une démo technique.</p>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            Built with anycoder
+        </a>
+    </footer>
+    <script>
+        // --- DONNÉES SIMULÉES (Base de données locale) ---
+        // J'utilise des images de placeholder avec du texte pour garantir qu'elles fonctionnent toujours.
+        const database = [
+            {
+                id: 1,
+                title: "Naruto Shippuden",
+                category: "Anime",
+                year: 2007,
+                rating: "4.8",
+                desc: "Naruto Uzumaki veut devenir le meilleur Hokage de tous les temps. Un anime d'action et d'aventure épique.",
+                image: "https://placehold.co/300x450/FF4500/white?text=Naruto",
+                hero: true
+            },
+            {
+                id: 2,
+                title: "One Piece",
+                category: "Anime",
+                year: 1999,
+                rating: "4.9",
+                desc: "Luffy et son équipage naviguent sur la Grand Line à la recherche du légendaire trésor One Piece.",
+                image: "https://placehold.co/300x450/1e90ff/white?text=One+Piece",
+                hero: false
+            },
+            {
+                id: 3,
+                title: "Stranger Things",
+                category: "Séries TV",
+                year: 2016,
+                rating: "4.7",
+                desc: "Quand un jeune garçon disparaît, une petite ville découvre une affaire mystérieuse, des expériences secrètes et des forces surnaturelles.",
+                image: "https://placehold.co/300x450/8b0000/white?text=Stranger+Things",
+                hero: false
+            },
+            {
+                id: 4,
+                title: "Spider-Man: No Way Home",
+                category: "Films",
+                year: 2021,
+                rating: "4.8",
+                desc: "Avec l'identité de Spider-Man désormais révélée, Peter Parker demande de l'aide au Docteur Strange.",
+                image: "https://placehold.co/300x450/daa520/white?text=Spiderman",
+                hero: false
+            },
+            {
+                id: 5,
+                title: "Attack on Titan",
+                category: "Anime",
+                year: 2013,
+                rating: "4.9",
+                desc: "L'humanité vit à l'intérieur de villes entourées de murs géants qui les protègent des Titans mangeurs d'hommes.",
+                image: "https://placehold.co/300x450/708090/white?text=AOT",
+                hero: false
+            },
+            {
+                id: 6,
+                title: "Breaking Bad",
+                category: "Séries TV",
+                year: 2008,
+                rating: "5.0",
+                desc: "Un professeur de chimie de lycée atteint d'un cancer se tourne vers la fabrication de méthamphétamine.",
+                image: "https://placehold.co/300x450/228b22/white?text=Breaking+Bad",
+                hero: false
+            },
+            {
+                id: 7,
+                title: "The Witcher",
+                category: "Séries TV",
+                year: 2019,
+                rating: "4.5",
+                desc: "Le sorceleur Geralt, un chasseur de monstres mutant, se bat pour trouver sa place dans un monde.",
+                image: "https://placehold.co/300x450/556b2f/white?text=The+Witcher",
+                hero: false
+            },
+            {
+                id: 8,
+                title: "Demon Slayer",
+                category: "Anime",
+                year: 2019,
+                rating: "4.8",
+                desc: "Tanjiro Kamado devient un chasseur de démons après que sa famille a été massacrée.",
+                image: "https://placehold.co/300x450/800080/white?text=Demon+Slayer",
+                hero: false
+            },
+            {
+                id: 9,
+                title: "Inception",
+                category: "Films",
+                year: 2010,
+                rating: "4.9",
+                desc: "Un voleur qui vole les secrets d'entreprise grâce à l'utilisation de la technologie de partage de rêves.",
+                image: "https://placehold.co/300x450/000000/white?text=Inception",
+                hero: false
+            },
+            {
+                id: 10,
+                title: "Arcane",
+                category: "Séries TV",
+                year: 2021,
+                rating: "4.9",
+                desc: "Sœurs jumelles Vi et Jinx se retrouvent dans les deux côtés opposés d'une guerre entre technologies magiques.",
+                image: "https://placehold.co/300x450/00ced1/white?text=Arcane",
+                hero: false
+            },
+            {
+                id: 11,
+                title: "Jujutsu Kaisen",
+                category: "Anime",
+                year: 2020,
+                rating: "4.7",
+                desc: "Yuji Itadori rejoint une organisation secrète de Sorciers pour tuer un Puissant Sorcier nommé Ryomen Sukuna.",
+                image: "https://placehold.co/300x450/9932cc/white?text=JJK",
+                hero: false
+            },
+            {
+                id: 12,
+                title: "Avatar 2",
+                category: "Films",
+                year: 2022,
+                rating: "4.6",
+                desc: "Jake Sully vit avec sa nouvelle famille sur la planète Pandora. Une menace familière revient pour finir ce qu'il a commencé.",
+                image: "https://placehold.co/300x450/4682b4/white?text=Avatar+2",
+                hero: false
+            }
+        ];
+        // --- DOM ELEMENTS ---
+        const heroSection = document.getElementById('hero-section');
+        const heroTitle = document.getElementById('hero-title');
+        const heroDesc = document.getElementById('hero-desc');
+        const mainContent = document.getElementById('main-content');
+        const searchInput = document.getElementById('search-input');
+        const searchBox = document.getElementById('search-box');
+        const searchIcon = document.getElementById('search-icon');
+        const header = document.getElementById('main-header');
+        // Modal elements
+        const modal = document.getElementById('movie-modal');
+        const modalTitle = document.getElementById('modal-title');
+        const modalDesc = document.getElementById('modal-desc');
+        const modalYear = document.getElementById('modal-year');
+        const modalBgImg = document.getElementById('modal-bg-img');
+        const videoStatus = document.getElementById('video-status');
+        // --- INITIALISATION ---
+        // 1. Configurer le Hero (Film mis en avant)
+        function initHero() {
+            const heroMovie = database.find(m => m.hero) || database[0];
+            // On utilise l'image du film mais en mode sombre pour le fond
+            heroSection.style.backgroundImage = `url('https://placehold.co/1920x1080/222/white?text=${encodeURIComponent(heroMovie.title)}')`;
+            heroTitle.innerText = heroMovie.title;
+            heroDesc.innerText = heroMovie.desc;
+            // Stocker l'ID du hero pour les boutons
+            heroSection.dataset.id = heroMovie.id;
+        }
+        // 2. Afficher les catégories
+        function initCategories() {
+            // Extraire les catégories uniques
+            const categories = [...new Set(database.map(item => item.category))];
+            mainContent.innerHTML = ''; // Reset
+            categories.forEach(cat => {
+                const section = document.createElement('div');
+                section.className = 'category-section';
+                const title = document.createElement('h3');
+                title.className = 'category-title';
+                title.innerText = cat;
+                const row = document.createElement('div');
+                row.className = 'movies-row';
+                // Filtrer les films de cette catégorie
+                const movies = database.filter(m => m.category === cat);
+                movies.forEach(movie => {
+                    const card = createMovieCard(movie);
+                    row.appendChild(card);
+                });
+                section.appendChild(title);
+                section.appendChild(row);
+                mainContent.appendChild(section);
+            });
+        }
+        // Créer une carte HTML pour un film
+        function createMovieCard(movie) {
+            const card = document.createElement('div');
+            card.className = 'movie-card';
+            card.onclick = () => openModal(movie);
+            const img = document.createElement('img');
+            img.src = movie.image;
+            img.alt = movie.title;
+            img.loading = "lazy";
+            const info = document.createElement('div');
+            info.className = 'card-info';
+            const title = document.createElement('div');
+            title.className = 'card-title';
+            title.innerText = movie.title;
+            const meta = document.createElement('div');
+            meta.className = 'card-meta';
+            meta.innerHTML = `<span>98% Match</span> <span>${movie.year}</span>`;
+            info.appendChild(title);
+            info.appendChild(meta);
+            card.appendChild(img);
+            card.appendChild(info);
+            return card;
+        }
+        // --- RECHERCHE ---
+        // Activer la barre de recherche
+        searchIcon.addEventListener('click', () => {
+            searchBox.classList.toggle('active');
+            if(searchBox.classList.contains('active')) {
+                searchInput.focus();
+            }
+        });
+        // Logique de recherche
+        searchInput.addEventListener('input', (e) => {
+            const query = e.target.value.toLowerCase();
+            if (query.length > 0) {
+                displaySearchResults(query);
+            } else {
+                initCategories(); // Retour à l'accueil si vide
+                heroSection.style.display = 'flex'; // Réafficher le hero
+            }
+        });
+        function displaySearchResults(query) {
+            // Cacher le hero pour une meilleure lisibilité
+            heroSection.style.display = 'none';
+            mainContent.innerHTML = '';
+            const results = database.filter(movie =>
+                movie.title.toLowerCase().includes(query)
+            );
+            if (results.length === 0) {
+                mainContent.innerHTML = '<h3 style="color:#666; margin-top:50px;">Aucun résultat trouvé.</h3>';
+                return;
+            }
+            const section = document.createElement('div');
+            section.className = 'category-section';
+            const title = document.createElement('h3');
+            title.className = 'category-title';
+            title.innerText = `Résultats pour "${query}"`;
+            const row = document.createElement('div');
+            row.className = 'movies-row';
+            results.forEach(movie => {
+                row.appendChild(createMovieCard(movie));
+            });
+            section.appendChild(title);
+            section.appendChild(row);
+            mainContent.appendChild(section);
+        }
+        // --- MODAL & PLAYER ---
+        function openModal(movie) {
+            modalTitle.innerText = movie.title;
+            modalDesc.innerText = movie.desc;
+            modalYear.innerText = movie.year;
+            modalBgImg.src = movie.image;
+            // Reset player state
+            videoStatus.style.display = 'none';
+            modal.classList.add('active');
+        }
+        function closeModal() {
+            modal.classList.remove('active');
+            // Arrêter la vidéo si elle était en lecture (simulation)
+            videoStatus.innerText = "";
+            videoStatus.style.display = 'none';
+        }
+        // Fermer la modale si on clique en dehors
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeModal();
+            }
+        });
+        // Gestion des boutons Hero
+        function playHeroMovie() {
+            const id = parseInt(heroSection.dataset.id);
+            const movie = database.find(m => m.id === id);
+            if(movie) openModal(movie);
+        }
+        function showHeroDetails() {
+            playHeroMovie(); // Pour simplifier, les deux font la même chose ici
+        }
+        // Simulation de lecture
+        function startFakePlayback() {
+            const status = document.getElementById('video-status');
+            const btn = document.querySelector('.play-btn-large');
+            btn.style.display = 'none';
+            status.style.display = 'block';
+            status.innerText = "Chargement du serveur...";
+            setTimeout(() => {
+                status.innerText = "Buffering...";
+            }, 1000);
+            setTimeout(() => {
+                status.innerText = "⚠ Ceci est une démo UI. Aucun flux vidéo réel n'est disponible.";
+                status.style.color = "#e50914";
+                status.style.fontWeight = "bold";
+                // Simuler l'interface de lecture
+                document.getElementById('modal-video-area').style.backgroundColor = "#000";
+                document.getElementById('modal-bg-img').style.opacity = "0";
+            }, 2500);
+        }
+        // --- EFFET SCROLL HEADER ---
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 50) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+        // Lancer l'app
+        initHero();
+        initCategories();
+    </script>
+</body>
+</html>