<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyTrafic - Articles</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
    <link rel="icon" type="image/png" href="../img/logo2.png">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
        
        :root {
            --ilevia-blue: #0066b0;
            --ilevia-yellow: #FFDD00;
            --ilevia-light-blue: #008bd2;
            --ilevia-red: #E30613;
        }

        .popup-enter {
            animation: popupEnter 0.4s forwards;
        }

        @keyframes popupEnter {
            from {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes pulse {  
            0%, 100% { 
                transform: scale(1);
                opacity: 1;
            }
            50% { 
                transform: scale(1.05);
                opacity: 0.9;
            }
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f6fe;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .header {
            background: linear-gradient(90deg, var(--ilevia-blue) 0%, var(--ilevia-light-blue) 100%);
            box-shadow: 0 4px 15px rgba(0, 102, 176, 0.2);
        }
        
        .metro { background-color: var(--ilevia-yellow); color: #000; }
        .tram { background-color: var(--ilevia-red); color: #fff; }
        .bus { background-color: var(--ilevia-blue); color: #fff; }
        
        .fading-bg-animation {
            background-size: 400% 400%;
            animation: gradientAnimation 15s ease infinite;
        }
        
        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .line-icon {
            width: 36px;
            height: auto;
            transition: transform 0.2s;
        }
        
        .line-icon:hover {
            transform: scale(1.1);
        }
        
        .line-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            color: white;
            font-weight: bold;
            transition: transform 0.2s;
        }
        
        .line-badge:hover {
            transform: scale(1.1);
        }
        
        .tram-r { background-color: #28a745; }
        .tram-t { background-color: #427dbd; }

        @media (max-width: 768px) {
            .line-icon, .line-badge {
                width: 30px;
                height: 30px;
            }
        }

        .float-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .slide-in-left {
            animation: slideInLeft 0.8s forwards;
            opacity: 0;
            transform: translateX(-50px);
        }
        
        @keyframes slideInLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .slide-in-right {
            animation: slideInRight 0.8s forwards;
            opacity: 0;
            transform: translateX(50px);
        }
        
        @keyframes slideInRight {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .slide-in-up {
            animation: slideInUp 0.8s forwards;
            opacity: 0;
            transform: translateY(50px);
        }
        
        @keyframes slideInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .scale-in {
            animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            transform: scale(0.8);
            opacity: 0;
        }
        
        @keyframes scaleIn {
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .delayed-1 { animation-delay: 0.2s; }
        .delayed-2 { animation-delay: 0.4s; }
        .delayed-3 { animation-delay: 0.6s; }
        .delayed-4 { animation-delay: 0.8s; }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }
        
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            animation: moveParticle 15s linear infinite;
        }
        
        @keyframes moveParticle {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-500px) translateX(100px); opacity: 0; }
        }
        
        .feature-card {
            transition: all 0.3s ease;
            background-color: white;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 102, 176, 0.2);
        }
        
        .feature-card:hover .card-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        .card-icon {
            transition: all 0.5s ease;
        }
        
        /* Article Cards */
        .article-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 102, 176, 0.15);
        }
        
        .article-card:hover .article-image {
            transform: scale(1.05);
        }
        
        .article-image {
            transition: transform 0.5s ease;
        }
        
        .article-tag {
            transition: all 0.2s ease;
        }
        
        .article-card:hover .article-tag {
            transform: translateY(-2px);
        }
        
        .tag-metro { background-color: var(--ilevia-yellow); color: #000; }
        .tag-tram { background-color: var(--ilevia-red); color: #fff; }
        .tag-bus { background-color: var(--ilevia-blue); color: #fff; }
        .tag-vlille { background-color: #28a745; color: #fff; }
        .tag-travaux { background-color: #ff9800; color: #fff; }
        .tag-evenement { background-color: #9c27b0; color: #fff; }
    </style>
</head>
<body> 
    <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="particles">
                <div class="particle" style="left: 10%; animation-duration: 12s;"></div>
                <div class="particle" style="left: 25%; animation-duration: 15s; animation-delay: 2s;"></div>
                <div class="particle" style="left: 40%; animation-duration: 18s; animation-delay: 4s;"></div>
                <div class="particle" style="left: 65%; animation-duration: 14s; animation-delay: 1s;"></div>
                <div class="particle" style="left: 80%; animation-duration: 16s; animation-delay: 3s;"></div>
            </div>
            
            <div class="flex items-center mb-4 md:mb-0 z-10">
                <img src="../img/logo.png" alt="traficlillois logo" class="h-10 md:h-12 mr-4">
                <div class="text-3xl font-bold">
                    <span class="text-white">art<span class="text-yellow-300">icles</span></span>
                </div>
                <div class="ml-4 border-l border-white pl-4">
                    <h1 class="text-sm md:text-lg font-semibold">Actualités & informations</h1>
                    <p class="text-xs md:text-sm opacity-80">sur la Métropole Lilloise</p>
                </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">
                    <i class="fas fa-home mr-1"></i>
                    <span>Accueil</span>
                </a>
                <a href="../horaires" class="text-white hover:text-yellow-300 transition flex items-center">
                    <i class="fas fa-clock mr-1"></i>
                    <span>Horaires</span>
                </a>
                <a href="../vlille" class="text-white hover:text-yellow-300 transition flex items-center">
                    <i class="fas fa-bicycle mr-1"></i>
                    <span>V'Lille</span>
                </a>
                <a href="../perturbations" class="text-white hover:text-yellow-300 transition flex items-center relative">
                    <i class="fas fa-exclamation-triangle mr-1"></i>
                    <span>Perturbations</span>
                    <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 bg-red-500 text-white text-xs font-bold rounded-full h-4 w-4 flex items-center justify-center">3</span>
                </a>
                <a href="" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center">
                    <i class="fas fa-newspaper w-6"></i>
                    <span>Articles</span>
                </a>
            </nav>
            
            <div class="flex items-center space-x-2 md:space-x-4 z-10">
                <button class="md:hidden text-white" id="mobileMenuBtn">
                    <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="index.html" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center">
                    <i class="fas fa-home w-6"></i>
                    <span>Accueil</span>
                </a>
                <a href="horaires.html" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center">
                    <i class="fas fa-clock w-6"></i>
                    <span>Horaires</span>
                </a>
                <a href="velos.html" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center">
                    <i class="fas fa-bicycle w-6"></i>
                    <span>V'Lille</span>
                </a>
                <a href="perturbations.html" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center relative">
                    <i class="fas fa-exclamation-triangle w-6"></i>
                    <span>Perturbations</span>
                </a>
                <a href="articles.html" class="text-white hover:bg-white hover:bg-opacity-20 py-2 px-4 rounded flex items-center">
                    <i class="fas fa-newspaper w-6"></i>
                    <span>Articles</span>
                </a>
            </div>
        </div>
    </header>

    <section class="relative overflow-hidden">
        <div class="hero-image-container w-full h-[300px] md:h-[400px]">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-blue-600/60 z-10"></div>
            <img src="../img/val2.png" 
                 alt="Actualités transport" class="w-full h-full object-cover hero-image">
            <div class="wave"></div>
            
            <div class="absolute inset-0 z-20 flex items-center justify-start">
                <div class="container mx-auto px-4 md:px-6">
                    <div class="max-w-2xl slide-in-left">
                        <h1 class="text-4xl md:text-5xl font-bold text-white mb-4 leading-tight">Actualités & Articles</h1>
                        <p class="text-lg md:text-xl text-white/90 mb-6">Découvrez les dernières informations sur les transports de la métropole lilloise</p>
                        <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm rounded-full py-2 px-4 w-fit">
                            <i class="fas fa-search text-white"></i>
                            <input type="text" placeholder="Rechercher un article..." class="bg-transparent text-white placeholder-white/70 border-none focus:outline-none focus:ring-0 w-full">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-16 bg-gray-50" id="articles-container">
        <div class="container mx-auto px-4 md:px-6">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-8">Derniers articles</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8" id="articles-grid">
            </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>
                    <img src="../img/logo.png" alt="MyTrafic logo" class="h-10 mb-4">
                    <p class="text-gray-400 mb-4">L'application qui simplifie vos déplacements dans la métropole lilloise.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Navigation</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Horaires</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">V'Lille</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Perturbations</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Articles</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Légal</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Contact</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt mt-1 mr-2 text-gray-400"></i>
                            <span class="text-gray-400">1 Rue de Paris, 59000 Lille</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-phone-alt mr-2 text-gray-400"></i>
                            <span class="text-gray-400">03 20 00 00 00</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope mr-2 text-gray-400"></i>
                            <span class="text-gray-400">contact@mytrafic.fr</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 MyTrafic. Tous droits réservés.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition">Accessibilité</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition">Plan du site</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition opacity-0 invisible hover:bg-blue-700">
        <i class="fas fa-arrow-up"></i>
    </button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', async () => {
        try {
            const response = await fetch('/articles/list.yml');
            const { articles } = jsyaml.load(await response.text());
            const grid = document.getElementById('articles-grid');

            // Chargement parallèle amélioré
            await Promise.all(articles.map(async ({ id }) => {
                const article = await loadArticleData(id);
                if (article) {
                    grid.appendChild(createArticleCard(article));
                }
            }));

        } catch (error) {
            console.error("Erreur de chargement:", error);
            displayError();
        }
    });

    async function loadArticleData(id) {
        try {
            const basePath = `/articles/${id}/`;
            const [metaRes, contentRes] = await Promise.all([
                fetch(`${basePath}meta.yml`),
                fetch(`${basePath}content.md`)
            ]);

            const meta = jsyaml.load(await metaRes.text());
            const content = await contentRes.text();

            return {
                ...meta,
                id,
                contenu: content,
                // Utilisation de imgArticle si disponible, sinon image_principale
                previewImage: meta.imgArticle || meta.image_principale || `${basePath}default-preview.jpg`,
                fullImage: meta.image_principale || meta.imgArticle || `${basePath}default-cover.jpg`
            };

        } catch (error) {
            console.error(`Erreur article ${id}:`, error);
            return null;
        }
    }

    function createArticleCard(article) {
        const card = document.createElement('div');
        card.className = 'article-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1';
        
        const cleanExcerpt = article.contenu
            .replace(/[#*\[\]`!]/g, '')
            .substring(0, 120) + '...';

        // Modification ici - changer le lien href
        card.innerHTML = `
            <div class="h-48 overflow-hidden relative">
                <img src="${article.previewImage}" 
                     alt="Aperçu: ${article.titre}"
                     class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
                     loading="lazy">
                
                <span class="absolute top-3 left-3 ${getCategoryClass(article.categorie)} 
                            px-2 py-1 rounded-full text-xs font-bold text-white shadow-sm">
                    ${article.categorie}
                </span>
            </div>
            
            <div class="p-6">
                <div class="flex justify-between items-start mb-2">
                    <span class="text-gray-500 text-sm">${article.date}</span>
                    <span class="text-sm text-gray-500 flex items-center">
                        <i class="far fa-clock mr-1"></i>
                        ${article.lecture_estimee}
                    </span>
                </div>
                
                <h3 class="text-xl font-bold text-gray-800 mb-3 line-clamp-2">
                    ${article.titre}
                </h3>
                
                <p class="text-gray-600 mb-4 line-clamp-3">${cleanExcerpt}</p>
                
                <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                    <div class="flex items-center">
                        <img src="${article.auteur.photo}" 
                             alt="${article.auteur.nom}"
                             class="w-8 h-8 rounded-full mr-2 object-cover border border-gray-200">
                        <span class="text-sm text-gray-700">${article.auteur.nom}</span>
                    </div>
                    <!-- Modification du lien ici -->
                    <a href="/news/preview/article.html?id=${article.id}" 
                       class="text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1 transition-colors">
                        Lire plus
                        <i class="fas fa-chevron-right text-xs mt-0.5"></i>
                    </a>
                </div>
            </div>
        `;
        
        return card;
    }

    function getCategoryClass(category) {
        const classes = {
            'Technologie': 'bg-blue-600',
            'Métro': 'bg-yellow-500',
            'Tram': 'bg-red-500',
            'Bus': 'bg-blue-500',
            'Événement': 'bg-purple-500'
        };
        return classes[category] || 'bg-gray-600';
    }

            async function loadTrafficUpdates() {
                try {
                    const response = await fetch('https://my-trafic.fr/panne/lists.yml');
                    const text = await response.text();
                    
                    if (typeof jsyaml === 'undefined') {
                        throw new Error('La bibliothèque jsyaml n\'est pas chargée.');
                    }
                    
                    const updates = jsyaml.load(text);
                    
                    if (!Array.isArray(updates) || updates.length === 0) {
                        console.warn('Les données reçues ne sont pas un tableau ou sont vides:', updates);
                        return;
                    }

                    const alertContainer = document.getElementById('traffic-alert');
                    if (!alertContainer) {
                        throw new Error('L\'élément #traffic-alert n\'existe pas dans le DOM');
                    }
                    
                    alertContainer.innerHTML = '';

                    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';
                    
                    updates.forEach((update, index) => {
                        if (!update || !update.message) {
                            console.warn('Mise à jour de trafic invalide:', update);
                            return;
                        }
                        
                        const slide = document.createElement('div');
                        slide.className = `alert-slide ${index === 0 ? 'active' : 'hidden'} transition-opacity duration-500`;
                        slide.dataset.index = index;
                        
                        // Préparer l'élément visuel (image ou icône)
                        const getVisualElement = (update) => {
                            if (update.image) {
                                // Si une image est spécifiée, l'utiliser
                                return `
                                    <img src="${update.image}" alt="Illustration" 
                                        class="h-11 w-11 min-w-[2.75rem] object-cover rounded-full border-2 border-red-400/30 shadow-inner flex-shrink-0">
                                `;
                            } else {
                                // Sinon utiliser l'icône d'attention par défaut
                                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 visualElement = getVisualElement(update);
                        
                        // Version mobile avec support d'image
                        const mobileContent = document.createElement('div');
                        mobileContent.className = "sm:hidden px-4";
                        mobileContent.innerHTML = `
                            <div class="flex items-center">
                                <div class="flex-shrink-0 mr-3">
                                    ${update.image ? 
                                        `<img src="${update.image}" alt="Illustration" class="h-8 w-8 rounded-full object-cover border border-red-400/30">` :
                                        `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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>`
                                    }
                                </div>
                                <div>
                                    <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-1 inline-block">Info Trafic</span>
                                    <p class="text-base font-medium">${update.message}</p>
                                </div>
                            </div>
                        `;
                        
                        const desktopContent = document.createElement('div');
                        desktopContent.className = "hidden sm:block container mx-auto px-4";
                        desktopContent.innerHTML = `
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <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-3">
                                        <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>
                                        <span class="text-base md:text-lg font-medium tracking-wide">${update.message}</span>
                                    </div>
                                </div>
                                <div class="hidden md:block">
                                    <a href="${update.link || '/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>
                        `;

                        slide.appendChild(mobileContent);
                        slide.appendChild(desktopContent);
                        carousel.appendChild(slide);
                    });
                    
                    if (updates.length > 1) {
                        const pagination = document.createElement('div');
                        pagination.className = "flex justify-center mt-2 space-x-2";
                        
                        updates.forEach((_, index) => {
                            const dot = document.createElement('button');
                            dot.className = `h-2 w-2 rounded-full transition-colors duration-300 focus:outline-none ${index === 0 ? 'bg-white' : 'bg-white/40 hover:bg-white/60'}`;
                            dot.dataset.slideTo = index;
                            dot.setAttribute('aria-label', `Voir l'alerte ${index + 1}`);
                            dot.onclick = () => showSlide(index);
                            pagination.appendChild(dot);
                        });
                        
                        carousel.appendChild(pagination);
                    }
                    
                    carouselContainer.appendChild(carousel);
                    alertContainer.appendChild(carouselContainer);
                
                    if (updates.length > 1) {
                        let currentSlide = 0;
                        const totalSlides = updates.length;
                        
                        function showSlide(index) {
                            const slides = carousel.querySelectorAll('.alert-slide');
                            const dots = carousel.querySelectorAll('.rounded-full');
                            
                            slides.forEach(slide => {
                                slide.classList.add('hidden');
                                slide.classList.remove('active');
                            });
                            
                            dots.forEach(dot => {
                                dot.classList.remove('bg-white');
                                dot.classList.add('bg-white/40');
                            });
                            
                            slides[index].classList.remove('hidden');
                            slides[index].classList.add('active');
                            dots[index]?.classList.add('bg-white');
                            dots[index]?.classList.remove('bg-white/40');
                            
                            currentSlide = index;
                        }
                        
                        function nextSlide() {
                            showSlide((currentSlide + 1) % totalSlides);
                        }
                        
                        window.showSlide = showSlide;
                        
                        const interval = setInterval(nextSlide, 4500);
                       
                    }
                    
                } catch (error) {
                    console.error('Erreur lors du chargement des mises à jour de trafic:', error);
                }
            }

            const style = document.createElement('style');
            style.textContent = `
                .alert-slide {
                    opacity: 1;
                    transition: opacity 0.5s ease-in-out;
                }
                
                .alert-slide.hidden {
                    display: none;
                    opacity: 0;
                }
                
                .alert-slide.active {
                    display: block;
                    opacity: 1;
                }
            `;

            document.head.appendChild(style);

    loadTrafficUpdates();

    function displayError() {
        const grid = document.getElementById('articles-grid');
        if (grid) {
            grid.innerHTML = `
                <div class="col-span-full text-center py-12">
                    <div class="inline-flex items-center bg-red-50 text-red-600 px-4 py-2 rounded-lg">
                        <i class="fas fa-exclamation-circle mr-2"></i>
                        Impossible de charger les articles. Veuillez réessayer plus tard.
                    </div>
                </div>
            `;
        }
    }
</script>
</body>
</html>