<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyTrafic - Accueil</title>
    
    <link rel="icon" type="image/png" href="./img/logo2.png">
    
    <meta property="og:title" content="MyTrafic - Info trafic ilévia en temps réel" />
    <meta property="og:description" content="🚇 Suivez le trafic des métros, bus et trams ilévia en direct • Perturbations • Horaires • Optimisez vos trajets dans la métropole lilloise" />
    <meta property="og:image" content="https://my-trafic.fr/img/banner.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="MyTrafic - Interface de suivi du trafic ilévia en temps réel" />
    <meta property="og:url" content="https://my-trafic.fr" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="MyTrafic" />
    <meta property="og:locale" content="fr_FR" />
    
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="MyTrafic - Trafic ilévia temps réel" />
    <meta name="twitter:description" content="🚇 Trafic métro, bus, tram ilévia • Perturbations en direct • Métropole lilloise" />
    <meta name="twitter:image" content="https://my-trafic.fr/img/banner.png" />
    <meta name="twitter:image:alt" content="Interface MyTrafic pour le suivi du réseau ilévia" />
    
    <meta name="theme-color" content="#5865F2" />
    <meta property="og:color" content="#5865F2" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="styles.css">
    
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
    
    <style>
        .fading-bg-animation {
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        #busLinesGrid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 12px;
            padding: 16px;
        }
        .bus-line-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 12px;
            min-height: 75px;
            position: relative;
        }
        
        /* Animation pour la popup */
        @keyframes zoom {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .animate-zoom {
            animation: zoom 0.3s ease-out forwards;
        }
                
        /* Styles pour les différents types de popup */
        .animate-zoom {
            animation: zoom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        
        @keyframes zoom {
            from { 
                transform: scale(0.98); 
                opacity: 0;
            }
            to { 
                transform: scale(1); 
                opacity: 1;
            }
        }
        
        /* Transition de fermeture */
        #dynamic-popup.hidden {
            transition: opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
        }
        
        /* Fond flou dynamique */
        .backdrop-blur-sm {
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            background-color: rgba(255, 255, 255, 0.3);
        }
    </style>
</head>

<body>
    <!-- Popup dynamique -->
    <div id="dynamic-popup" class="fixed inset-0 z-[100] hidden flex items-center justify-center p-4 backdrop-blur-sm">
        <div class="bg-white/95 rounded-xl max-w-md w-full mx-auto overflow-hidden shadow-2xl animate-zoom border border-white/20">
            <div class="relative">
                <button id="close-popup" class="absolute top-3 right-3 text-gray-500 hover:text-gray-700 transition">
                    <i class="fas fa-times text-xl"></i>
                </button>
                
                <div class="p-6 sm:p-8">
                    <div class="text-center mb-6" id="popup-content">
                        <!-- Contenu chargé dynamiquement -->
                        <div class="flex justify-center mb-4">
                            <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center">
                                <i class="fas fa-info-circle text-blue-600 text-xl"></i>
                            </div>
                        </div>
                        <h3 id="popup-title" class="text-2xl font-bold text-gray-800 mb-2">Chargement...</h3>
                        <p id="popup-message" class="text-gray-600">Récupération des informations en cours</p>
                    </div>
                    
                    <div class="space-y-4">
                        <a href="./lignes/" class="block bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white text-center py-3 px-4 rounded-lg font-medium transition shadow-md">
                            <i class="fas fa-exclamation-triangle mr-2"></i> Voir les perturbations
                        </a>
                        
                        <div class="flex items-center justify-center text-sm text-gray-500" id="popup-options">
                            <input type="checkbox" id="dont-show-again" class="mr-2 rounded">
                            <label for="dont-show-again">Ne plus afficher aujourd'hui</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="traffic-alert"></div>

    <header class="header text-white py-3 px-4 md:px-6 shadow-md sticky top-0 z-50 fading-bg-animation" 
            style="background: linear-gradient(-45deg, #0066b0, #008bd2, #0090db, #0077c0);">
        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center relative">
            <div class="flex items-center mb-4 md:mb-0 z-10">
                <img src="./img/logo.png" alt="MyTrafic logo" class="h-10 md:h-12 mr-4">
                <div class="text-3xl font-bold">
                    <span class="text-white">My<span class="text-yellow-300">Accueil</span></span>
                </div>
            </div>

            <nav class="hidden md:flex items-center space-x-6 z-10 mx-4">
                <a href="/" class="text-white hover:text-yellow-300 transition flex items-center font-medium">
                    <i class="fas fa-home mr-2"></i> Accueil
                </a>
                <a href="./horaires" class="text-white hover:text-yellow-300 transition flex items-center font-medium">
                    <i class="fas fa-clock mr-2"></i> Horaires
                </a>
                <a href="./trafic" class="text-white hover:text-yellow-300 transition flex items-center font-medium">
                    <i class="fas fa-exclamation-triangle mr-2"></i> Trafic
                </a>
            </nav>

            <div class="flex items-center space-x-2 md:space-x-4 z-10">
                <button class="md:hidden text-white" id="mobileMenuBtn" aria-label="Menu mobile">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>

        <div id="mobileNav" class="hidden md:hidden w-full mt-4 pb-3 z-20">
            <div class="flex flex-col space-y-3">
                <a href="./horaires" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center transition">
                    <i class="fas fa-clock w-6 mr-2"></i> Horaires
                </a>
                <a href="./trafic" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center transition">
                    <i class="fas fa-exclamation-triangle w-6 mr-2"></i> Trafic
                </a>
            </div>
        </div>
    </header>

    <section class="relative overflow-hidden mb-8 md:mb-16">
        <div class="hero-image-container w-full h-[60vh] md:h-[70vh] min-h-[400px] md:min-h-[500px] relative">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-900/85 via-blue-800/75 to-blue-600/60 z-10" aria-hidden="true"></div>
            
            <img src="./img/30.jpg" alt="Bus de transport en commun sur une route urbaine" 
                 class="w-full h-full object-cover object-center" loading="eager">
            
            <div class="absolute inset-0 z-20 flex items-center justify-center px-4 pt-8 md:pt-0">
                <div class="container mx-auto">
                    <div class="max-w-4xl mx-auto text-center">
                        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-3 md:mb-6 leading-tight mt-4 sm:mt-0">
                            Voyagez en toute <span class="text-yellow-400 block sm:inline">simplicité</span>
                        </h1>
                        
                        <p class="text-lg sm:text-xl md:text-2xl text-white/90 mb-4 md:mb-8 leading-relaxed max-w-2xl mx-auto px-2">
                            Nos services pour vous aider lors de vos déplacements.
                        </p>
                        
                        <div class="flex flex-wrap justify-center gap-3 sm:gap-6 md:gap-8 mb-4 md:mb-10 text-sm sm:text-base md:text-lg text-white/80">
                            <div class="flex items-center bg-white/15 backdrop-blur-sm px-3 sm:px-4 py-2 rounded-full border border-white/20">
                                <i class="fas fa-bus text-yellow-400 mr-2 sm:mr-3 text-lg sm:text-xl" aria-hidden="true"></i>
                                <span class="font-medium">92+ lignes</span>
                            </div>
                            <div class="flex items-center bg-white/15 backdrop-blur-sm px-3 sm:px-4 py-2 rounded-full border border-white/20">
                                <i class="fas fa-clock text-green-400 mr-2 sm:mr-3 text-lg sm:text-xl" aria-hidden="true"></i>
                                <span class="font-medium">6h - 22h</span>
                            </div>
                        </div>
                        
                        <div class="flex flex-col gap-2 sm:gap-4 max-w-sm sm:max-w-2xl mx-auto px-2">
            
                            <a href="./horaires/" class="group bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 active:from-yellow-700 active:to-yellow-800 text-white font-bold rounded-xl sm:rounded-2xl transition-all duration-200 transform active:scale-95 shadow-lg hover:shadow-xl">
                                <div class="flex items-center justify-center py-3 sm:py-5 px-6 sm:px-8">
                                    <i class="fas fa-clock mr-3 text-xl sm:text-2xl"></i>
                                    <div class="text-left">
                                        <div class="text-base sm:text-xl font-bold">Consulter les horaires</div>
                                        <div class="text-xs sm:text-sm opacity-90 hidden sm:block">Temps réel • Toutes les lignes</div>
                                    </div>
                                </div>
                            </a>
                            
                            <div class="flex flex-col sm:flex-row gap-2 sm:gap-4">

                                <a href="./infos/" class="group flex-1 border-2 border-white/60 hover:bg-white/15 hover:border-white active:bg-white/20 text-white font-semibold rounded-xl sm:rounded-2xl transition-all duration-200 backdrop-blur-sm">
                                    <div class="flex items-center justify-center py-2 sm:py-4 px-4 sm:px-6">
                                        <i class="fas fa-info-circle mr-2 sm:mr-3 text-base sm:text-xl group-hover:text-yellow-400 transition-colors"></i>
                                        <span class="text-sm sm:text-lg">Infos pratiques</span>
                                    </div>
                                </a>

                                <div class="relative flex-1">
                                    <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-2 py-1 rounded-md transform rotate-12 font-medium z-10 shadow-md">
                                        BIENTÔT
                                    </span>
                                    <button class="w-full bg-gray-600/60 text-white/60 font-semibold rounded-xl sm:rounded-2xl cursor-not-allowed backdrop-blur-sm" disabled>
                                        <div class="flex items-center justify-center py-2 sm:py-4 px-4 sm:px-6">
                                            <i class="fas fa-route mr-2 sm:mr-3 text-base sm:text-xl"></i>
                                            <span class="text-sm sm:text-lg">Planifier</span>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6 md:mt-12 animate-bounce">
                            <i class="fas fa-chevron-down text-white/50 text-xl md:text-2xl"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="messages-section" class="bg-gradient-to-r from-orange-50 to-red-50 py-8 relative">
        <div class="absolute top-0 right-0 w-32 h-32 bg-orange-200 opacity-30 rounded-full transform translate-x-1/2 -translate-y-1/2"></div>
        
        <div class="container mx-auto px-4 max-w-3xl relative z-10">
            <div class="text-center mb-6">
                <div class="inline-flex items-center px-3 py-1 bg-orange-200 rounded-full mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-700 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM4 19h10a2 2 0 002-2V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    <span class="text-orange-800 font-bold text-sm">MESSAGES DU JOUR</span>
                </div>
                <h2 class="text-2xl font-bold text-gray-800 mb-2">Actualités & Perturbations</h2>
                
                <button 
                    id="refresh-messages" 
                    class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:bg-gray-400"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    <span id="refresh-text">Actualiser</span>
                    <svg id="loading-spinner" class="hidden animate-spin ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </button>
            </div>
            
            <div class="bg-white rounded-lg shadow-md p-4">
                <div id="messages-container" class="space-y-3">
                </div>
    
                <div id="initial-loading" class="text-center py-6">
                    <div class="animate-pulse flex items-center space-x-3">
                        <div class="h-8 w-8 bg-orange-300 rounded-full"></div>
                        <div class="flex-1">
                            <div class="h-4 bg-orange-200 rounded w-3/4 mb-2"></div>
                            <div class="h-3 bg-orange-100 rounded w-1/2"></div>
                        </div>
                    </div>
                    <p class="text-gray-500 mt-3 text-sm">Chargement...</p>
                </div>
    
                <div id="error-message" class="hidden text-center py-6">
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <p class="text-red-700 text-sm"><span id="error-text"></span></p>
                    </div>
                </div>
    
                <div id="no-messages" class="hidden text-center py-6">
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <p class="text-green-700 text-sm">Aucune perturbation en cours</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


<section class="bg-gradient-to-r from-blue-50 to-indigo-50 py-8 md:py-12 relative">
    <!-- Éléments décoratifs -->
    <div class="absolute top-0 right-0 w-32 h-32 bg-blue-200 opacity-30 rounded-full transform translate-x-1/2 -translate-y-1/2"></div>
    <div class="absolute bottom-0 left-0 w-24 h-24 bg-indigo-200 opacity-20 rounded-full transform -translate-x-1/2 translate-y-1/2"></div>
    
    <div class="container mx-auto px-4 max-w-3xl relative z-10">
        <!-- En-tête -->
        <div class="text-center mb-6">
            <div class="inline-flex items-center px-3 py-1 bg-blue-200 rounded-full mb-3">
                <div class="h-2 w-2 bg-blue-700 rounded-full mr-2 animate-pulse"></div>
                <span class="text-blue-800 font-bold text-sm">TRAFIC TEMPS RÉEL</span>
            </div>
            
            <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">Information trafic</h2>
            <p class="text-gray-600 text-sm md:text-base mb-4">Consultez l'état du trafic en temps réel</p>
            
            <!-- Bouton principal -->
            <a href="https://my-trafic.fr/lignes/" 
               class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors shadow-sm hover:shadow-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                Consulter mes lignes
            </a>
        </div>
        
        <!-- Carte principale -->
        <div class="bg-white rounded-lg shadow-md p-4 md:p-6">
            
            <!-- Statut du service -->
            <div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="h-3 w-3 bg-green-500 rounded-full mr-3 animate-pulse"></div>
                    <span class="text-gray-700 font-medium">Service en fonctionnement</span>
                </div>
                <div class="text-sm text-gray-500">
                    <span id="current-time-display">12:34</span>
                </div>
            </div>
            
            <!-- Informations rapides -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                <div class="bg-blue-50 rounded-lg p-3">
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div>
                            <p class="text-sm font-medium text-gray-700">Dernière mise à jour</p>
                            <p class="text-xs text-gray-500">Il y a 2 minutes</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-green-50 rounded-lg p-3">
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div>
                            <p class="text-sm font-medium text-gray-700">État du réseau</p>
                            <p class="text-xs text-gray-500">Trafic fluide</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Message d'information -->
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                <div class="flex items-start">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <p class="text-sm font-medium text-yellow-800">Information</p>
                        <p class="text-sm text-yellow-700">Cliquez sur "Consulter mes lignes" pour accéder aux informations détaillées en temps réel.</p>
                    </div>
                </div>
            </div>
            
            <!-- Actions secondaires -->
            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
                <button class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    Actualiser
                </button>
                
                <button class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM4 19h10a2 2 0 002-2V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    Alertes
                </button>
                
                <a href="#" class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Infos
                </a>
            </div>
        </div>
        
        <!-- Footer info -->
        <div class="text-center mt-4">
            <p class="text-xs text-gray-500">
                Données mises à jour automatiquement • 
                <a href="#" class="text-blue-600 hover:text-blue-700">Signaler un problème</a>
            </p>
        </div>
    </div>
</section>



    <section class="bg-white py-10 sm:py-16">
        <div class="container mx-auto px-4 max-w-5xl">
            <div class="flex flex-col md:flex-row items-center md:items-start gap-8 md:gap-10">
                <div class="w-full md:w-2/5 relative">
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl overflow-hidden shadow-xl relative z-10 p-6 sm:p-8 h-full min-h-[300px] flex flex-col items-center justify-center">
                        <img src="./img/logo2.png" alt="Logo My Trafic" class="w-28 sm:w-32 h-auto mx-auto mb-5 sm:mb-6">
                        
                        <div class="bg-blue-600 text-white rounded-full px-4 py-1 mb-4 text-sm font-medium flex items-center shadow-md animate-pulse">
                            <span class="relative flex h-2 w-2 mr-2">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                            </span>
                            Données en temps réel
                        </div>
                        
                        <div class="text-center text-blue-800">
                            <p class="font-bold">À votre service</p>
                            <p class="text-sm">Depuis 2025</p>
                        </div>
                    </div>
                    
                    <div class="absolute -bottom-4 -right-4 w-20 sm:w-24 h-20 sm:h-24 bg-blue-100 rounded-2xl z-0"></div>
                    <div class="absolute -top-4 -left-4 w-24 sm:w-32 h-24 sm:h-32 bg-yellow-100 rounded-full z-0 opacity-70"></div>
                </div>
                
                <div class="w-full md:w-3/5">
                    <div class="inline-flex items-center justify-center px-4 py-1.5 bg-blue-100 rounded-full mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        <span class="text-blue-700 font-medium text-sm">Qui sommes-nous</span>
                    </div>
                    
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-4 sm:mb-6">À votre service sur le réseau</h2>
                    
                    <div class="bg-gray-50 border border-gray-200 rounded-xl p-4 sm:p-6 mb-6 sm:mb-8 relative">
                        <div class="absolute -left-3 top-6 w-6 h-10 bg-blue-600 rounded-r-lg hidden sm:block"></div>
                        <p class="text-gray-700 text-base sm:text-lg italic">
                            "Notre mission est de vous informer en temps réel et de rendre votre expérience de transport aussi fluide que possible."
                        </p>
                    </div>
                    
                    <div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-xl p-4 sm:p-5">
                        <h3 class="font-semibold text-blue-800 text-lg mb-2 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                            </svg>
                            Ce qui nous différencie
                        </h3>
                        <p class="text-gray-700">
                            Nous utilisons uniquement <strong>des horaires en temps réel</strong>, et non des horaires théoriques. C'est un choix volontaire de notre équipe pour vous fournir une information plus fiable et utile au quotidien.
                        </p>
                    </div>
                    
                    <div class="mt-4 sm:mt-6 bg-blue-50 border border-blue-200 rounded-xl p-4">
                        <div class="flex items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mt-0.5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <p class="text-gray-700 text-sm">
                                <span class="font-semibold">Important :</span> My Trafic est un service entièrement indépendant et n'a aucun lien officiel avec ilévia. Nous mettons notre expertise à votre service pour faciliter vos déplacements sur le réseau, mais nous ne sommes pas affiliés, partenaires ou mandatés par ilévia.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 md:px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div class="md:col-span-2">
                    <div class="flex items-center mb-6">
                        <img src="./img/logo.png" alt="MyTrafic logo" class="h-10 mr-3">
                        <span class="text-2xl font-bold">MyTrafic</span>
                    </div>
                    <p class="text-gray-400 mb-6 text-lg leading-relaxed max-w-md">
                        L'information trafic en temps réel pour la Métropole Européenne de Lille. 
                        Simplifiez vos déplacements avec des données fiables et actualisées.
                    </p>
                    <div class="flex space-x-4">
                        <a href="https://x.com/traficlillois" aria-label="Suivre sur X (Twitter)" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-blue-600 transition">
                            <i class="fab fa-x-twitter text-lg"></i>
                        </a>
                        <a href="mailto:contact@my-trafic.fr" aria-label="Nous contacter par email" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-blue-600 transition">
                            <i class="fas fa-envelope text-lg"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">Navigation</h3>
                    <ul class="space-y-3">
                        <li><a href="/" class="text-gray-400 hover:text-white transition">Accueil</a></li>
                        <li><a href="./horaires" class="text-gray-400 hover:text-white transition">Horaires</a></li>
                        <li><a href="./trafic" class="text-gray-400 hover:text-white transition">État du trafic</a></li>
                        <li><a href="./planificateur" class="text-gray-400 hover:text-white transition">Planificateur</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">Support</h3>
                    <ul class="space-y-3">
                        <li><a href="./aide" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li>
                        <li><a href="./contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
                        <li><a href="./status" class="text-gray-400 hover:text-white transition">Statut du service</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="pt-8 border-t border-gray-800">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <p class="text-gray-400">
                            © 2025 MyTrafic - Tous droits réservés - Créé par Rémi
                        </p>
                        <p class="text-gray-500 text-sm mt-1">
                            Service indépendant non affilié à ilévia
                        </p>
                    </div>
                    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 text-sm">
                        <a href="./mentions-legales" class="text-gray-400 hover:text-white transition">Mentions légales</a>
                        <a href="./confidentialite" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a>
                        <a href="./cgu" class="text-gray-400 hover:text-white transition">CGU</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 transform translate-y-10 hover:bg-blue-700" aria-label="Retour en haut de page">
        <i class="fas fa-chevron-up"></i>
    </button>

    <script>
        // Gestion de la popup dynamique
        document.addEventListener('DOMContentLoaded', async function() {
            const popup = document.getElementById('dynamic-popup');
            const closeBtn = document.getElementById('close-popup');
            const popupTitle = document.getElementById('popup-title');
            const popupMessage = document.getElementById('popup-message');
            const popupContent = document.getElementById('popup-content');
            const popupOptions = document.getElementById('popup-options');
        
            async function fetchPopupData() {
                try {
                    const response = await fetch('https://my-trafic.fr/api/popups_infos/');
                    if (!response.ok) throw new Error('Erreur réseau');
                    
                    const { success, data } = await response.json();
                    if (!success || !data?.length) return null;
                    
                    // Trouve la popup la plus prioritaire à afficher
                    const now = new Date();
                    return data
                        .filter(p => p.show_popup === 1)
                        .filter(p => new Date(p.start_date) <= now && new Date(p.end_date) >= now)
                        .sort((a, b) => b.priority - a.priority)[0];
                } catch (error) {
                    console.error('Erreur:', error);
                    return null;
                }
            }
        
            function applyPopupStyle(style) {
                const styles = {
                    warning: {
                        icon: 'exclamation-triangle',
                        iconColor: 'text-yellow-600',
                        bgColor: 'bg-yellow-100',
                        buttonGradient: 'from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700'
                    },
                    error: {
                        icon: 'times-circle',
                        iconColor: 'text-red-600',
                        bgColor: 'bg-red-100',
                        buttonGradient: 'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700'
                    },
                    info: {
                        icon: 'info-circle',
                        iconColor: 'text-blue-600',
                        bgColor: 'bg-blue-100',
                        buttonGradient: 'from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'
                    },
                    success: {
                        icon: 'check-circle',
                        iconColor: 'text-green-600',
                        bgColor: 'bg-green-100',
                        buttonGradient: 'from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
                    }
                };
        
                const selectedStyle = styles[style] || styles.info;
                
                // Mise à jour de l'icône
                const iconDiv = popupContent.querySelector('.rounded-full');
                iconDiv.className = `h-12 w-12 rounded-full ${selectedStyle.bgColor} flex items-center justify-center`;
                iconDiv.innerHTML = `<i class="fas ${selectedStyle.icon} ${selectedStyle.iconColor} text-xl"></i>`;
                
                // Mise à jour du bouton
                const button = document.querySelector('#popup-content + .space-y-4 > a');
                button.className = `block bg-gradient-to-r ${selectedStyle.buttonGradient} text-white text-center py-3 px-4 rounded-lg font-medium transition shadow-md`;
            }
        
            async function showPopup() {
                const popupData = await fetchPopupData();
                if (!popupData) return;
                
                // Vérifie si déjà vu (session ou localStorage)
                const popupKey = `popup_${popupData.id}_dismissed`;
                if (popupData.once_per_session && sessionStorage.getItem(popupKey)) return;
                if (!popupData.once_per_session && localStorage.getItem(popupKey)) return;
                
                // Applique le contenu
                popupTitle.textContent = popupData.title;
                popupMessage.textContent = popupData.message;
                applyPopupStyle(popupData.style);
                
                // Gestion des options
                popupOptions.style.display = popupData.dismissible ? 'flex' : 'none';
                
                // Affiche la popup
                popup.classList.remove('hidden');
                
                // Gestion de la fermeture
                closeBtn.addEventListener('click', () => {
                    popup.classList.add('hidden');
                    if (popupData.once_per_session) {
                        sessionStorage.setItem(popupKey, 'true');
                    } else {
                        localStorage.setItem(popupKey, 'true');
                    }
                });
                
                popup.addEventListener('click', (e) => {
                    if (e.target === popup && popupData.dismissible) {
                        popup.classList.add('hidden');
                        if (popupData.once_per_session) {
                            sessionStorage.setItem(popupKey, 'true');
                        } else {
                            localStorage.setItem(popupKey, 'true');
                        }
                    }
                });
            }
        
            // Affiche après 1.5s
            setTimeout(showPopup, 1500);
        });
    
        // Gestion de la popup d'accueil
        document.addEventListener('DOMContentLoaded', function() {
            const popup = document.getElementById('welcome-popup');
            const closeBtn = document.getElementById('close-popup');
            const dontShowAgain = document.getElementById('dont-show-again');
            
            // Vérifie si l'utilisateur a déjà choisi de ne pas voir la popup
            if(!localStorage.getItem('hideWelcomePopup')) {
                setTimeout(() => {
                    popup.classList.remove('hidden');
                }, 1000); // Délai d'apparition après 1 seconde
            }
            
            // Fermeture de la popup
            closeBtn.addEventListener('click', () => {
                popup.classList.add('hidden');
                
                // Si "Ne plus afficher" est coché
                if(dontShowAgain.checked) {
                    localStorage.setItem('hideWelcomePopup', 'true');
                }
            });
            
            // Fermer en cliquant en dehors
            popup.addEventListener('click', (e) => {
                if(e.target === popup) {
                    popup.classList.add('hidden');
                    
                    if(dontShowAgain.checked) {
                        localStorage.setItem('hideWelcomePopup', 'true');
                    }
                }
            });
        });
        
        function initMessagesduJour() {
            const API_URL = 'https://my-trafic.fr/api/messages_du_jour/';
            
            const elements = {
                container: document.getElementById('messages-container'),
                loading: document.getElementById('initial-loading'),
                error: document.getElementById('error-message'),
                errorText: document.getElementById('error-text'),
                noMessages: document.getElementById('no-messages'),
                refreshBtn: document.getElementById('refresh-messages'),
                refreshText: document.getElementById('refresh-text'),
                spinner: document.getElementById('loading-spinner')
            };
        
            const utils = {
                getIconClass: (icone, categorie) => {
                    const map = { 'info': 'bg-blue-500', 'warning': 'bg-yellow-500', 'error': 'bg-red-500', 'success': 'bg-green-500' };
                    return map[icone] || map[categorie] || 'bg-gray-500';
                },
                getIconSymbol: (icone) => {
                    const map = { 'info': 'ℹ', 'warning': '⚠', 'error': '✕', 'success': '✓' };
                    return map[icone] || 'ℹ';
                },
                formatDate: (dateString) => new Date(dateString).toLocaleDateString('fr-FR', {
                    year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'
                }),
                hideAll: () => {
                    elements.loading.classList.add('hidden');
                    elements.error.classList.add('hidden');
                    elements.noMessages.classList.add('hidden');
                    elements.container.innerHTML = '';
                },
                setLoading: (isLoading) => {
                    elements.refreshBtn.disabled = isLoading;
                    elements.refreshText.textContent = isLoading ? 'Chargement...' : 'Actualiser';
                    elements.spinner.classList.toggle('hidden', !isLoading);
                },
                showError: (message) => {
                    utils.hideAll();
                    elements.errorText.textContent = message;
                    elements.error.classList.remove('hidden');
                },
                createCard: (message) => {
                    const iconClass = utils.getIconClass(message.icone, message.categorie);
                    const iconSymbol = utils.getIconSymbol(message.icone);
                    return `
                        <div class="bg-white rounded-lg shadow-md p-6 mb-4 border-l-4 border-blue-500 hover:shadow-lg transition-shadow duration-200">
                            <div class="flex items-start space-x-4">
                                <div class="flex-shrink-0">
                                    <div class="${iconClass} w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">
                                        ${iconSymbol}
                                    </div>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-lg font-semibold text-gray-900 mb-2">${message.titre}</h3>
                                    <p class="text-gray-700 mb-3">${message.message}</p>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        ${utils.formatDate(message.date_message)}
                                        <span class="ml-4 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            ${message.categorie}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }
            };
        
            const loadMessages = async () => {
                try {
                    utils.setLoading(true);
                    const response = await fetch(API_URL);
                    
                    if (!response.ok) throw new Error(`Erreur HTTP: ${response.status}`);
                    
                    const data = await response.json();
                    if (!data.success) throw new Error('L\'API a retourné une erreur');
                    
                    utils.hideAll();
                    const activeMessages = data.data?.filter(m => m.actif === 1) || [];
                    
                    if (activeMessages.length === 0) {
                        elements.noMessages.classList.remove('hidden');
                    } else {
                        elements.container.innerHTML = activeMessages.map(utils.createCard).join('');
                    }
                    
                } catch (error) {
                    console.error('Erreur:', error);
                    utils.showError(`Impossible de charger les messages: ${error.message}`);
                } finally {
                    utils.setLoading(false);
                }
            };
        
            elements.refreshBtn?.addEventListener('click', loadMessages);
            loadMessages();
            setInterval(loadMessages, 5 * 60 * 1000); 
        }
        
        document.addEventListener('DOMContentLoaded', initMessagesduJour);
    
        async function displayTrafficAlerts() {
          const alertContainer = document.getElementById('traffic-alert');
          if (!alertContainer) return console.warn('Container #traffic-alert non trouvé');
        
          try {
            const res = await fetch('https://my-trafic.fr/api/slides_infos/');
            if (!res.ok) throw new Error(`Erreur HTTP: ${res.status}`);
        
            const { success, data } = await res.json();
            if (!success || !data?.length) return void (alertContainer.style.display = 'none');
        
            const activeAlerts = data.filter(a => a.active === 1);
            if (!activeAlerts.length) return void (alertContainer.style.display = 'none');
        
            const isMobile = window.innerWidth <= 768;
            const visibleAlerts = activeAlerts.filter(a =>
              (isMobile && a.mobile_visible === 1) || (!isMobile && a.desktop_visible === 1)
            );
            if (!visibleAlerts.length) return void (alertContainer.style.display = 'none');
        
            visibleAlerts.sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
        
            alertContainer.innerHTML = '';
            alertContainer.style.display = 'block';
        
            const createVisualElement = alert => {
              if (alert.image_url) return `<img src="${alert.image_url}" alt="${alert.title || 'Ligne'}" class="h-11 w-11 min-w-[2.75rem] object-contain rounded-full border-2 border-red-400/30 shadow-inner flex-shrink-0 bg-white/10 p-1">`;
              if (alert.icon_class) return `<i class="fas ${alert.icon_class} text-yellow-300 animate-pulse text-xl"></i>`;
              return `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-300 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
              </svg>`;
            };
        
            const createIconWrapper = (content, size = 'h-8 w-8', iconSize = 'text-sm') =>
              `<div class="${size} rounded-full bg-red-800/50 flex items-center justify-center border border-red-400/30">${content}</div>`;
        
            const carouselContainer = document.createElement('div');
            carouselContainer.className = "bg-gradient-to-r from-red-600 to-red-800 text-white py-3 sm:py-4 relative overflow-hidden shadow-xl rounded-lg border border-red-500";
            carouselContainer.innerHTML = `
              <div class="absolute right-0 top-0 opacity-5 transform translate-x-1/4 -translate-y-1/4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-52 w-52" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
              </div>
              <button aria-label="Fermer les alertes" onclick="this.closest('.bg-gradient-to-r').style.display='none'" class="absolute top-2 right-2 z-10 bg-red-800/50 hover:bg-red-900/80 p-1.5 rounded-full focus:outline-none focus:ring-2 focus:ring-red-400 transition-colors duration-200 backdrop-blur-sm border border-red-400/30">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                </svg>
              </button>
            `;
        
            const carousel = document.createElement('div');
            carousel.className = 'alerts-carousel relative';
        
            visibleAlerts.forEach((alert, i) => {
              const slide = document.createElement('div');
              slide.className = `alert-slide ${i === 0 ? 'active' : 'hidden'} transition-all duration-500 ease-in-out`;
              slide.dataset.index = i;
        
              if (alert.animation && alert.animation !== 'fade') {
                slide.style.animationDelay = `${alert.delay_seconds || 0}s`;
                slide.classList.add(`animate-${alert.animation}`);
              }
        
              const visualElement = createVisualElement(alert);
        
              const mobileIcon = alert.image_url
                ? `<img src="${alert.image_url}" alt="${alert.title}" class="h-8 w-8 rounded-full object-contain border border-red-400/30 bg-white/10 p-0.5">`
                : alert.icon_class
                  ? `<i class="fas ${alert.icon_class} text-yellow-300 text-sm"></i>`
                  : `<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>`;
        
              slide.innerHTML = `
                <div class="sm:hidden px-4">
                  <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0 mt-1">${createIconWrapper(mobileIcon, 'h-8 w-8')}</div>
                    <div class="flex-1 min-w-0">
                      <span class="bg-yellow-100 text-red-700 px-2 py-1 rounded-md font-bold text-xs uppercase shadow-sm flex-shrink-0 mb-2 inline-block">Info Trafic</span>
                      ${alert.title ? `<h3 class="text-base font-semibold mb-1">${alert.title}</h3>` : ''}
                      ${alert.subtitle ? `<p class="text-sm font-medium mb-1 opacity-90">${alert.subtitle}</p>` : ''}
                      <p class="text-sm leading-relaxed">${alert.message}</p>
                    </div>
                  </div>
                </div>
                <div class="hidden sm:block container mx-auto px-4">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                      <div class="hidden md:flex items-center justify-center bg-red-800/50 backdrop-blur-sm rounded-full h-11 w-11 min-w-[2.75rem] border border-red-400/30 shadow-inner flex-shrink-0">${visualElement}</div>
                      <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-4">
                        <span class="inline-flex items-center bg-yellow-100 text-red-700 px-2.5 py-1 rounded-md font-bold text-xs uppercase shadow-sm mb-1 sm:mb-0 flex-shrink-0">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                          </svg>
                          Info Trafic
                        </span>
                        <div class="space-y-1">
                          ${alert.title ? `<h3 class="text-lg font-semibold tracking-wide">${alert.title}</h3>` : ''}
                          ${alert.subtitle ? `<p class="text-base font-medium opacity-90">${alert.subtitle}</p>` : ''}
                          <p class="text-base md:text-lg font-medium tracking-wide">${alert.message}</p>
                        </div>
                      </div>
                    </div>
                    <div class="hidden md:block">
                      ${alert.button_text && alert.button_link
                        ? `<a href="${alert.button_link}" target="_blank" rel="noopener" class="text-sm text-white hover:text-yellow-200 inline-flex items-center font-medium transition-colors duration-200 bg-red-700/50 backdrop-blur-sm px-3 py-1.5 rounded-md hover:bg-red-700/70">
                            <span>${alert.button_text}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                            </svg>
                          </a>`
                        : `<a href="/perturbations" class="text-sm text-white hover:text-yellow-200 inline-flex items-center font-medium transition-colors duration-200 bg-red-700/50 backdrop-blur-sm px-3 py-1.5 rounded-md hover:bg-red-700/70">
                            <span>Détails</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                          </a>`}
                    </div>
                  </div>
                </div>
              `;
        
              carousel.appendChild(slide);
            });
        
            if (visibleAlerts.length > 1) {
              const navigation = document.createElement('div');
              navigation.className = 'flex justify-center items-center space-x-2 mt-4';
        
              let currentSlide = 0;
              const showSlide = index => {
                [...carousel.querySelectorAll('.alert-slide')].forEach((s, i) => {
                  s.classList.toggle('active', i === index);
                  s.classList.toggle('hidden', i !== index);
                });
                [...navigation.children].forEach((btn, i) => {
                  btn.classList.toggle('bg-yellow-300', i === index);
                  btn.classList.toggle('bg-white/30', i !== index);
                });
                currentSlide = index;
              };
        
              for (let i = 0; i < visibleAlerts.length; i++) {
                const dot = document.createElement('button');
                dot.className = i === 0 ? 'w-2 h-2 rounded-full bg-yellow-300 transition-all duration-300' : 'w-2 h-2 rounded-full bg-white/30 hover:bg-white/50 transition-all duration-300';
                dot.dataset.slide = i;
                dot.addEventListener('click', () => showSlide(i));
                navigation.appendChild(dot);
              }
              carousel.appendChild(navigation);
        
              setInterval(() => showSlide((currentSlide + 1) % visibleAlerts.length), 8000);
            }
        
            carouselContainer.appendChild(carousel);
            alertContainer.appendChild(carouselContainer);
        
          } catch (error) {
            console.error('Erreur lors du chargement des alertes trafic:', error);
            alertContainer.style.display = 'none';
          }
        }

        function showSlide(index) {
          const slides = document.querySelectorAll('.alert-slide');
          const dots = document.querySelectorAll('[data-slide]');
          
          slides.forEach((slide, i) => {
            if (i === index) {
              slide.classList.remove('hidden');
              slide.classList.add('active');
            } else {
              slide.classList.add('hidden');
              slide.classList.remove('active');
            }
          });
          
          dots.forEach((dot, i) => {
            if (i === index) {
              dot.className = 'w-2 h-2 rounded-full bg-yellow-300 transition-all duration-300';
            } else {
              dot.className = 'w-2 h-2 rounded-full bg-white/30 hover:bg-white/50 transition-all duration-300';
            }
          });
        }
        
        function addCustomAnimations() {
          if (document.getElementById('traffic-animations')) return;
          
          const style = document.createElement('style');
          style.id = 'traffic-animations';
          style.textContent = `
            @keyframes slide {
              from { transform: translateX(-100%); opacity: 0; }
              to { transform: translateX(0); opacity: 1; }
            }
            
            @keyframes bounce {
              0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
              40%, 43% { transform: translate3d(0,-30px,0); }
              70% { transform: translate3d(0,-15px,0); }
              90% { transform: translate3d(0,-4px,0); }
            }
            
            @keyframes zoom {
              from { transform: scale(0); opacity: 0; }
              to { transform: scale(1); opacity: 1; }
            }
            
            .animate-slide {
              animation: slide 0.6s ease-out forwards;
            }
            
            .animate-bounce {
              animation: bounce 1s ease-out forwards;
            }
            
            .animate-zoom {
              animation: zoom 0.5s ease-out forwards;
            }
            
            .alert-slide.hidden {
              opacity: 0;
              transform: translateY(10px);
            }
            
            .alert-slide.active {
              opacity: 1;
              transform: translateY(0);
            }
          `;
          
          document.head.appendChild(style);
        }
        
        document.addEventListener('DOMContentLoaded', () => {
          addCustomAnimations();
          displayTrafficAlerts();
        });
        
        setInterval(displayTrafficAlerts, 30000);
        
        let resizeTimeout;
        window.addEventListener('resize', () => {
          clearTimeout(resizeTimeout);
          resizeTimeout = setTimeout(displayTrafficAlerts, 250);
        });
    
        function updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}`;
        }
        
        updateCurrentTime();
        setInterval(updateCurrentTime, 60000);

        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible', 'translate-y-10');
                backToTopButton.classList.add('opacity-100', 'visible', 'translate-y-0');
            } else {
                backToTopButton.classList.remove('opacity-100', 'visible', 'translate-y-0');
                backToTopButton.classList.add('opacity-0', 'invisible', 'translate-y-10');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileNav = document.getElementById('mobileNav');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileNav.classList.toggle('hidden');
        });

        async function fetchBusLines() {
            try {
                const response = await fetch('https://my-trafic.fr/api/perturbations');
                const data = await response.json();
                return data.data;
            } catch (error) {
                console.error('Erreur lors de la récupération des données:', error);
                return [];
            }
        }
        
        async function createBusLinesGrid() {
            const busLinesGrid = document.getElementById('busLinesGrid');
            
            if (!busLinesGrid) {
                console.error('Élément busLinesGrid non trouvé');
                return;
            }
        
            // Ajout d'un indicateur de chargement
            busLinesGrid.innerHTML = `
                <div class="flex items-center justify-center py-12">
                    <div class="flex flex-col items-center space-y-4">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
                        <p class="text-gray-600 animate-pulse">Chargement des lignes...</p>
                    </div>
                </div>
            `;
        
            try {
                const busLinesData = await fetchBusLines();
                const busLines = new Set();
        
                busLinesData.forEach((perturbation) => {
                    if (perturbation?.cible && typeof perturbation.cible === 'string') {
                        const parts = perturbation.cible.split('::');
                        if (parts.length > 1) {
                            const lineNumber = parts[1]?.replace(':LOC', '').trim();
                            if (lineNumber) {
                                busLines.add(lineNumber);
                            }
                        }
                    }
                });
        
                busLinesGrid.innerHTML = '';
        
                const lineNumbers = Array.from(busLines).sort((a, b) => {
                    const aNum = parseInt(a);
                    const bNum = parseInt(b);
                    if (!isNaN(aNum) && !isNaN(bNum)) {
                        return aNum - bNum;
                    }
                    return a.localeCompare(b);
                });
                
                if (lineNumbers.length === 0) {
                    busLinesGrid.innerHTML = `
                        <div class="flex flex-col items-center justify-center py-16 px-6">
                            <div class="mb-6 p-4 bg-green-100 rounded-full">
                                <svg class="w-16 h-16 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Tout fonctionne parfaitement !</h3>
                            <p class="text-gray-600 text-center max-w-md">
                                Aucune perturbation n'est actuellement signalée sur le réseau de transport.
                            </p>
                            <div class="mt-6 text-xs text-gray-400">
                                Dernière mise à jour : ${new Date().toLocaleTimeString('fr-FR')}
                            </div>
                        </div>
                    `;
                    return;
                }
        
                // Conteneur avec titre
                const containerHTML = `
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                                <svg class="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                                Lignes perturbées
                            </h2>
                            <span class="bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">
                                ${lineNumbers.length} ligne${lineNumbers.length > 1 ? 's' : ''}
                            </span>
                        </div>
                        <div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-12 gap-4" id="linesContainer"></div>
                    </div>
                `;
                
                busLinesGrid.innerHTML = containerHTML;
                const linesContainer = document.getElementById('linesContainer');
        
                lineNumbers.forEach((lineNumber, index) => {
                    const lineElement = createBusLineCard(lineNumber, index);
                    linesContainer.appendChild(lineElement);
                });
        
                // Ajout d'informations supplémentaires
                const infoElement = document.createElement('div');
                infoElement.className = 'mt-6 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-400';
                infoElement.innerHTML = `
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                <strong>Cliquez sur une ligne</strong> pour voir les détails des perturbations. 
                                Informations mises à jour en temps réel.
                            </p>
                        </div>
                    </div>
                `;
                busLinesGrid.appendChild(infoElement);
        
            } catch (error) {
                console.error('Erreur:', error);
                busLinesGrid.innerHTML = `
                    <div class="flex flex-col items-center justify-center py-16 px-6">
                        <div class="mb-6 p-4 bg-red-100 rounded-full">
                            <svg class="w-16 h-16 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.732 15.5c-.77.833.192 2.5 1.732 2.5z"/>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Erreur de chargement</h3>
                        <p class="text-gray-600 text-center mb-6 max-w-md">
                            Impossible de charger les informations de perturbation. Vérifiez votre connexion internet.
                        </p>
                        <button onclick="createBusLinesGrid()" 
                                class="inline-flex items-center px-4 py-2 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            Réessayer
                        </button>
                    </div>
                `;
            }
        }
        
        function createBusLineCard(lineNumber, index = 0) {
            const lineElement = document.createElement('div');
            lineElement.className = 'group relative cursor-pointer transition-all duration-200 hover:scale-110 focus:scale-110 focus:outline-none';
            lineElement.setAttribute('tabindex', '0');
            lineElement.setAttribute('role', 'button');
            lineElement.setAttribute('aria-label', `Ligne ${lineNumber} - Voir les perturbations`);
            
            // Animation d'apparition échelonnée
            lineElement.style.animationDelay = `${index * 50}ms`;
            lineElement.classList.add('animate-fade-in');
            
            lineElement.innerHTML = `
                <div class="relative">
                    <img src="https://my-trafic.fr/img/idl/${lineNumber}.svg" 
                         alt="Ligne ${lineNumber}" 
                         class="w-20 h-20 rounded-xl shadow-lg group-hover:shadow-xl transition-shadow duration-200 border-2 border-white"
                         onerror="this.outerHTML='<div class=\\'w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 text-white flex items-center justify-center rounded-xl font-bold text-lg shadow-lg group-hover:shadow-xl transition-shadow duration-200 border-2 border-white\\'>${lineNumber}</div>'">
                    
                    <!-- Badge de perturbation amélioré -->
                    <div class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center shadow-lg border-2 border-white animate-pulse">
                        <span class="text-white text-xs font-bold">!</span>
                    </div>
                    
                    <!-- Effet de survol -->
                    <div class="absolute inset-0 bg-black bg-opacity-20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                        </svg>
                    </div>
                </div>
                
                <!-- Tooltip -->
                <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
                    Ligne ${lineNumber} - Cliquez pour plus d'infos
                    <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
                </div>
            `;
        
            // Gestionnaires d'événements améliorés
            const handleClick = (e) => {
                e.preventDefault();
                // Effet de clic
                lineElement.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    lineElement.style.transform = '';
                }, 150);
                
                window.open(`https://my-trafic.fr/lignes/?line=${encodeURIComponent(lineNumber)}`, '_blank');
            };
        
            lineElement.addEventListener('click', handleClick);
            lineElement.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    handleClick(e);
                }
            });
            
            return lineElement;
        }
        
        // Ajout des styles CSS pour l'animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fade-in {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .animate-fade-in {
                animation: fade-in 0.5s ease-out forwards;
            }
            
            @media (prefers-reduced-motion: reduce) {
                .animate-fade-in {
                    animation: none;
                }
            }
        `;
        document.head.appendChild(style);

        document.addEventListener('DOMContentLoaded', () => {
            createBusLinesGrid();
        });
    </script>
</body>
</html>