<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║                          RAFTELSHOP - INDEX.HTML                             ║
║                     Plateforme E-commerce Algérienne                         ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ VERSION ACTUELLE : 1.3 - Footer Réorganisé + Badges avec Bordures           ║
║ DATE : Octobre 2025                                                          ║
║ DERNIÈRE MAJ : 01/10/2025 - Copyright vertical centralisé avec badges       ║
║ STATUT : Prêt pour séparation navbar/footer et intégration API              ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ STRUCTURE :                                                                  ║
║  ✓ NAVBAR DESKTOP : Logo + Menu Catégories + Produits + Recherche + Actions ║
║  ✓ NAVBAR MOBILE : Logo R.S + Hamburger + Recherche + Produits + 4 icônes   ║
║  ✓ Lightning Deals : Scroll auto 15 produits avec badges flash              ║
║  ✓ Zone 1 : Carousel 4x2 - 5 pages (40 produits premium)                    ║
║  ✓ Zone 2 : Grille 5 colonnes (50 produits meilleurs vendeurs)              ║
║  ✓ Zone 3 : Grille 5 colonnes (50+ produits variés)                         ║
║  ✓ FOOTER : À propos + Liens + Support + Contact + Réseaux sociaux          ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ FONCTIONNALITÉS DESKTOP :                                                    ║
║  ✓ Menu catégories (9 catégories + 42 sous-catégories) - Clic               ║
║  ✓ Menu recherche (recherches populaires + catégories rapides) - Focus      ║
║  ✓ Badges promo avec effet brillance (flash horizontal)                     ║
║  ✓ Boutons panier avec effet brillance (flash diagonal)                     ║
║  ✓ Décalage animations : Badge (délai 1.5s) vs Panier (délai 0s)            ║
║  ✓ Icônes animées : Couronne (sparkle), Store (rotate), Bag (swing)         ║
║  ✓ Boutons navbar avec hover bleu marine                                    ║
║  ✓ Icônes action : Suivi colis + Favoris + Panier + Login                   ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ FONCTIONNALITÉS MOBILE (< 768px) :                                          ║
║  ✓ Logo SVG agrandi (45px) + Texte "R.S" (1.4rem)                           ║
║  ✓ Sous-titre masqué pour gagner de l'espace                                ║
║  ✓ Menu Hamburger (38px) - Ouvre catégories en plein écran                  ║
║  ✓ Bouton Loupe (38px) - Affiche barre de recherche + suggestions           ║
║  ✓ Bouton Produits (38px) - Icône seule sans texte                          ║
║  ✓ 4 Icônes d'action (36px) : Suivi, Favoris, Panier, Login                 ║
║  ✓ Disposition : [🍔 🔍 📦] ←→ [Logo R.S] ←→ [📦 ❤️ 🛒 👤]                   ║
║  ✓ Gap équilibré : 12px entre zones, 6px entre icônes                       ║
║  ✓ Menu catégories : 1 colonne, padding compact, scroll vertical            ║
║  ✓ Container recherche mobile : position fixe sous navbar                   ║
║  ✓ Fermeture auto des menus au clic extérieur                               ║
║  ✓ Lightning Deals : margin-top ajusté (65px)                               ║
║  ✓ Footer responsive : Adapté portrait/paysage avec fond sur liens mobile  ║
║  ✓ Bordures dorées sous titres footer, réseaux sociaux agrandis            ║
║  ✓ Copyright vertical : Logos → Infos → Badges (3 sections centralisées)   ║
║  ✓ Badges avec bordures colorées : Paiement (doré), Livraison (bleu)       ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ RESPONSIVE BREAKPOINTS + ORIENTATIONS :                                     ║
║  • Desktop (> 1024px) : Interface complète 6 colonnes footer                ║
║  • Tablette Paysage (769-1024px landscape) : 3 colonnes footer              ║
║  • Tablette Portrait (481-768px portrait) : 2 colonnes footer + produits    ║
║  • Mobile (≤ 768px) : Navbar compacte optimisée                             ║
║  • Mobile Portrait (≤ 768px portrait) : Footer 2 colonnes, layout vertical  ║
║  • Mobile Paysage (≤ 1024px landscape) : Footer 3 colonnes, navbar compacte ║
║  • Smartphone (≤ 480px) : Footer 1 colonne, boutons élargis avec fond       ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ JAVASCRIPT MOBILE :                                                          ║
║  • toggleCategoryMenu() - Ouvre/ferme menu hamburger                        ║
║  • toggleMobileSearch() - Ouvre/ferme recherche mobile                      ║
║  • showMobileSearchMenu() - Affiche suggestions de recherche                ║
║  • Gestion clics extérieurs pour fermer les menus automatiquement           ║
║  • Focus automatique sur input de recherche mobile                          ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ À FAIRE (PROCHAINES ÉTAPES) :                                               ║
║  ☐ Séparer NAVBAR et FOOTER en composants (components/navbar.html)          ║
║  ☐ Créer API REST PHP (products.php, trending.php, vendors.php)             ║
║  ☐ Créer base de données MySQL via phpMyAdmin                               ║
║  ☐ Connecter frontend → API pour données dynamiques                         ║
║  ☐ Implémenter recherches populaires réelles (calcul SQL)                   ║
║  ☐ Déployer sur VPS via cPanel                                              ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ FICHIERS LIÉS :                                                              ║
║  • assets/js/raftelshop-main.js (vide - pour futur JS externe)              ║
║  • scripts/move-buttons.js (gestionnaire position boutons)                   ║
║  • caddy raftelshop.svg (logo)                                               ║
║  • GUIDE_NAVBAR_MOBILE.txt (Documentation complète interface mobile)        ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ SAUVEGARDES IMPORTANTES :                                                    ║
║  • index_AVANT_API.html (Version complète avant migration API)              ║
║  • index.html.backup_* (Sauvegardes horodatées de chaque étape)             ║
╚══════════════════════════════════════════════════════════════════════════════╝
-->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAFTELSHOP - Plateforme E-commerce Algérienne</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Script Principal -->
    <script src="assets/js/raftelshop-main.js" defer></script>
    
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #f5f5f5; }
        
        /* Cartes carrées style Temu */
        .temu-card {
            background: white;
            border-radius: 0 !important;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .temu-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(30,58,138,0.2); }
        .temu-card img { width: 100%; height: 100%; object-fit: cover; }
        .temu-card .price { color: #1e3a8a; font-weight: 700; font-size: 1.1rem; }
        .temu-card .discount-badge {
            position: absolute; 
            top: 8px; 
            left: 8px; 
            background: rgba(239, 68, 68, 0.92); 
            color: white;
            padding: 4px 8px; 
            font-size: 0.75rem; 
            font-weight: 700; 
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
        }
        
        /* Effet de brillance qui passe sur le badge */
        .temu-card .discount-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            animation: shine 3s infinite;
            animation-delay: 1.5s; /* Décalage de 1.5s par rapport au panier */
        }
        
        @keyframes shine {
            0% {
                left: -100%;
            }
            20% {
                left: 100%;
            }
            100% {
                left: 100%;
            }
        }
        .temu-card .sales { color: #666; font-size: 0.85rem; }
        
        /* Lightning Deals */
        .lightning-deals { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 8px 0; border-bottom: 1px solid #e5e5e5; margin-top: 80px; }
        .lightning-deals-title { 
            display: block; 
            color: #1f2937; 
            font-weight: 800; 
            font-size: 1.2rem; 
            padding: 6px 16px; 
        }
        .deals-scroll { display: flex; overflow-x: auto; gap: 8px; padding: 8px 15px; scroll-behavior: smooth; }
        .deals-scroll::-webkit-scrollbar { display: none; } /* Masquer la scrollbar */
        .deals-scroll { -ms-overflow-style: none; scrollbar-width: none; } /* Pour Firefox et IE */
        .deal-card { min-width: 140px; max-width: 140px; flex-shrink: 0; }
        /* Gabarit fixe des cartes pour homogénéité */
        .deal-card .temu-card { width: 140px; height: 220px; display: flex; flex-direction: column; }
        .deal-card .img-wrapper { width: 140px; height: 140px; position: relative; background: #f8f8f8; flex-shrink: 0; }
        .deal-card .info { padding: 5px; flex: 1; display: flex; flex-direction: column; }
        .deal-card .temu-card .title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        
        /* Boutons panier et coeur - Sur l'image */
        .card-actions {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            flex-direction: column;
                gap: 8px;
            z-index: 5;
        }
        
        /* Boutons panier et coeur - Dans le contenu (Zone 1) */
        .inline-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 6px 0;
        }
        .inline-actions .action-icon {
            position: relative;
            width: 100%;
            max-width: 120px;
            height: 36px;
            border-radius: 8px;
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            border: none;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 600;
            font-size: 0.85rem;
            color: white;
        }
        .inline-actions .action-icon:hover {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
        }
        .inline-actions .action-icon:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }
        .inline-actions .action-icon i {
            font-size: 1rem;
        }
        .action-icon {
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(8px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
            border: 2px solid rgba(255,255,255,0.4);
        }
        .action-icon:hover {
            transform: scale(1.15) rotate(5deg);
            background: rgba(255,255,255,0.95);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.1);
        }
        .action-icon i {
            font-size: 1rem;
            transition: all 0.3s;
        }
        .action-icon.heart i { 
            color: #ef4444; 
        }
        .action-icon.heart:hover {
            background: rgba(239,68,68,0.1);
            border-color: rgba(239,68,68,0.3);
        }
        .action-icon.heart:hover i {
            transform: scale(1.2);
        }
        .action-icon.cart { 
                position: relative;
            overflow: hidden;
        }
        .action-icon.cart i { 
            color: #3b82f6; 
        }
        .action-icon.cart:hover {
            background: rgba(59,130,246,0.2);
            border-color: rgba(59,130,246,0.5);
            box-shadow: 0 0 20px rgba(59,130,246,0.4);
            animation: pulse 0.6s ease;
        }
        .action-icon.cart:hover i {
            transform: scale(1.2);
            animation: cartBounce 0.6s ease;
        }
        /* Effet de brillance sur le panier */
        .action-icon.cart::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.7), transparent);
            animation: shineCart 4s infinite;
        }
        
        @keyframes shineCart {
            0% {
                transform: translateX(-100%) translateY(-100%) rotate(45deg);
            }
            15% {
                transform: translateX(100%) translateY(100%) rotate(45deg);
            }
            100% {
                transform: translateX(100%) translateY(100%) rotate(45deg);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }
        
        @keyframes cartBounce {
            0%, 100% {
                transform: scale(1.2) translateY(0);
            }
            25% {
                transform: scale(1.2) translateY(-5px);
            }
            75% {
                transform: scale(1.2) translateY(-2px);
            }
        }
        .action-icon.heart.active {
            background: rgba(239,68,68,0.15);
            border-color: rgba(239,68,68,0.5);
        }
        .action-icon.heart.active i {
            color: #ef4444;
        }
        
        /* Étoiles de notation */
        .rating {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 4px 0;
            flex-wrap: wrap;
        }
        .stars {
            display: flex;
            color: #fbbf24;
            font-size: 0.7rem;
        }
        .rating-count {
            font-size: 0.7rem;
            color: #666;
            white-space: nowrap;
        }
        
        /* Badge vendeur */
        .vendor-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.65rem;
            font-weight: 700;
        }
        .vendor-badge.new {
            background: #10b981;
            color: white;
        }
        .vendor-badge.brand {
            background: #f1f5f9;
            color: #1e3a8a;
        }
        
        .temu-card .title {
            margin-bottom: 4px;
            line-height: 1.3;
        }
        .temu-card .price {
            margin-bottom: 4px;
        }
        .temu-card .sales {
            margin-bottom: 4px;
        }
        
        /* Lightning Deals - Tailles réduites */
        .deal-card .temu-card .title {
            font-size: 0.75rem;
            margin-bottom: 2px;
            line-height: 1.2;
        }
        .deal-card .temu-card .price {
            font-size: 0.9rem;
            margin-bottom: 2px;
        }
        .deal-card .temu-card .rating {
            margin: 2px 0;
        }
        .deal-card .temu-card .stars {
            font-size: 0.6rem;
        }
        .deal-card .temu-card .rating-count {
            font-size: 0.6rem;
        }
        .deal-card .temu-card .sales {
            font-size: 0.7rem;
            margin-bottom: 2px;
        }
        .deal-card .action-icon {
            width: 28px;
            height: 28px;
        }
        .deal-card .action-icon i {
            font-size: 0.8rem;
        }
        .deal-card .card-actions {
            gap: 5px;
            top: 6px;
            right: 6px;
        }
        .deal-card .discount-badge {
            padding: 3px 6px;
            font-size: 0.65rem;
            top: 6px;
            left: 6px;
        }
        /* Masquer les infos vendeur dans Lightning Deals pour gagner de la place */
        .deal-card .temu-card .info > div:last-child {
            display: none;
        }
        /* Masquer le bouton cœur dans Lightning Deals */
        .deal-card .card-actions .heart {
            display: none;
        }
        
        /* Zone 1 - Carousel 4x2 */
        .zone1-section { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1e40af 100%); padding: 25px 0; margin-top: 8px; }
        .zone1-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
        .zone1-title { 
            text-align: center; 
            color: white; 
            font-size: 2rem; 
            font-weight: 800; 
            margin-bottom: 25px; 
            font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            letter-spacing: 0.5px;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        .zone1-title i {
            font-size: 1.8rem;
            animation: sparkle 2s ease-in-out infinite;
        }
        
        @keyframes sparkle {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.7;
                transform: scale(1.15);
            }
        }
        .carousel-wrapper { position: relative; overflow: hidden; border-radius: 0; }
        .carousel-track { display: flex; transition: transform 1s ease-in-out; } /* Transition plus fluide de 1 seconde */
        .carousel-page { min-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 350px); gap: 12px; padding: 0 10px; }
        .carousel-page .temu-card .img-wrapper { height: 200px; }
        .carousel-page .temu-card .info { padding: 8px; }
        .carousel-page .temu-card .title { font-size: 0.85rem; margin-bottom: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; height: 3.3em; }
        .carousel-page .temu-card .price { font-size: 1rem; margin-bottom: 4px; }
        .carousel-page .temu-card .sales { font-size: 0.75rem; }
        .carousel-page .temu-card .rating { margin: 4px 0; }
        .carousel-page .temu-card .stars { font-size: 0.7rem; }
        .carousel-page .temu-card .rating-count { font-size: 0.68rem; }
        .carousel-page .inline-actions { display: none; } /* Masquer les boutons inline dans Zone 1 */
        .carousel-page .action-icon { width: 36px; height: 36px; }
        .carousel-page .action-icon i { font-size: 1rem; }
        .carousel-btn { 
            position: absolute; 
            top: 50%; 
            transform: translateY(-50%); 
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255,255,255,0.25);
            width: 50px; 
            height: 50px; 
            border-radius: 50%; 
            cursor: pointer; 
            font-size: 1.7rem; 
            color: rgba(255,255,255,0.9); 
            z-index: 1000; 
            box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
        }
        .carousel-btn:hover { 
            background: rgba(255,255,255,0.3);
            transform: translateY(-50%) scale(1.15);
            box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 6px 20px rgba(0,0,0,0.15);
            border-color: rgba(255,255,255,0.4);
            color: white;
        }
        .carousel-btn:active {
            transform: translateY(-50%) scale(1.05);
            background: rgba(255,255,255,0.4);
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }
        .carousel-btn.prev { left: 15px; }
        .carousel-btn.next { right: 15px; }
        .carousel-indicators { display: flex; justify-content: center; gap: 8px; margin-top: 15px; z-index: 10; }
        .indicator { 
            width: 28px; 
            height: 4px; 
            background: rgba(255,255,255,0.3); 
            border-radius: 3px; 
            cursor: pointer; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .indicator:hover {
            background: rgba(255,255,255,0.5);
            transform: scaleY(1.2);
        }
        .indicator.active { 
            background: white; 
            width: 40px;
            box-shadow: 0 3px 12px rgba(255,255,255,0.3);
        }
        
        /* Zone 2 - Grille */
        .zone2-section { background: white; padding: 40px 0; }
        .zone2-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
        .zone2-title { 
            font-size: 2rem; 
            font-weight: 800; 
            color: #1e3a8a; 
            margin-bottom: 25px;
            font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .zone2-title i {
            font-size: 1.8rem;
            color: #667eea;
            animation: rotate360 3s linear infinite;
        }
        
        @keyframes rotate360 {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .products-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
        .grid-card { height: 350px; }
        .grid-card .img-wrapper { height: 200px; position: relative; background: #f8f8f8; }
        .grid-card .info { padding: 8px; }
        .grid-card .title { font-size: 0.85rem; color: #333; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        
        /* Zone 3 */
        .zone3-section { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 40px 0; }
        .zone3-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
        .zone3-title { 
            font-size: 2rem; 
            font-weight: 800; 
            color: #1e3a8a; 
            margin-bottom: 25px;
            font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .zone3-title i {
            font-size: 1.8rem;
            color: #764ba2;
            animation: swing 2s ease-in-out infinite;
        }
        
        @keyframes swing {
            0%, 100% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(-15deg);
            }
            75% {
                transform: rotate(15deg);
            }
        }
        
        /* Animations */
        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.3); }
            50% { transform: scale(1.1); }
            75% { transform: scale(1.25); }
        }
        
        @keyframes cartShake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-10deg); }
            50% { transform: rotate(10deg); }
            75% { transform: rotate(-10deg); }
        }
        
        @keyframes slideInRight {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }
        
        /* Footer responsive */
        .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .carousel-page { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 350px); gap: 10px; }
            .products-grid { grid-template-columns: repeat(4, 1fr); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .zone1-title { font-size: 1.7rem; margin-bottom: 20px; }
            .zone1-title i { font-size: 1.6rem; }
            .zone2-title { font-size: 1.7rem; margin-bottom: 20px; }
            .zone2-title i { font-size: 1.6rem; }
            .zone3-title { font-size: 1.7rem; margin-bottom: 20px; }
            .zone3-title i { font-size: 1.6rem; }
            .carousel-btn { width: 45px; height: 45px; font-size: 1.5rem; }
        }
        @media (max-width: 768px) {
            .carousel-page { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 350px); gap: 8px; padding: 0 5px; }
            .carousel-page .temu-card .img-wrapper { height: 200px; }
            .products-grid { grid-template-columns: repeat(3, 1fr); }
            .deal-card { min-width: 120px; max-width: 120px; }
            .deal-card .img-wrapper { width: 120px; height: 120px; }
            .carousel-btn {
                width: 40px; 
                height: 40px; 
                font-size: 1.3rem;
                left: 10px;
            }
            .carousel-btn.next { right: 10px; }
            .footer-grid { grid-template-columns: 1fr; gap: 30px; }
            .zone1-title { font-size: 1.5rem; margin-bottom: 18px; }
            .zone1-title i { font-size: 1.4rem; }
            .zone1-section { padding: 20px 0; }
            .zone2-title { font-size: 1.5rem; margin-bottom: 18px; }
            .zone2-title i { font-size: 1.4rem; }
            .zone3-title { font-size: 1.5rem; margin-bottom: 18px; }
            .zone3-title i { font-size: 1.4rem; }
        }
        @media (max-width: 480px) {
            .products-grid { grid-template-columns: repeat(2, 1fr); }
            .deal-card { min-width: 110px; max-width: 110px; }
            .deal-card .img-wrapper { width: 110px; height: 110px; }
            .carousel-page { grid-template-rows: repeat(4, 320px); }
            .carousel-page .temu-card .img-wrapper { height: 180px; }
            .carousel-btn { 
                width: 38px; 
                height: 38px; 
                font-size: 1.2rem;
                left: 5px;
            }
            .carousel-btn.next { right: 5px; }
            .zone1-title { font-size: 1.2rem; }
            .zone1-title i { font-size: 1.1rem; }
            .zone2-title { font-size: 1.2rem; }
            .zone2-title i { font-size: 1.1rem; }
            .zone3-title { font-size: 1.2rem; }
            .zone3-title i { font-size: 1.1rem; }
        }
        
        /* ========== MODE MOBILE NAVBAR ========== */
        /* Menu hamburger pour mobile */
        .mobile-menu-btn {
            display: none;
            width: 40px;
            height: 40px;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .mobile-menu-btn i {
            color: #1e3a8a;
            font-size: 1.1rem;
        }
        .mobile-menu-btn:hover {
            background: #1e3a8a;
            border-color: #1e3a8a;
        }
        .mobile-menu-btn:hover i {
            color: white;
        }
        
        /* Icône loupe pour mobile */
        .mobile-search-btn {
            display: none;
            width: 40px;
            height: 40px;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .mobile-search-btn i {
            color: #1e3a8a;
            font-size: 1.1rem;
        }
        .mobile-search-btn:hover {
            background: #1e3a8a;
            border-color: #1e3a8a;
        }
        .mobile-search-btn:hover i {
            color: white;
        }
        
        /* Container de recherche mobile */
        .mobile-search-container {
            display: none;
            position: fixed;
            top: 80px;
            left: 0;
            right: 0;
            background: white;
            padding: 15px 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 999;
        }
        .mobile-search-container.active {
            display: block;
        }
        
        @media (max-width: 768px) {
            /* Afficher les boutons mobiles */
            .mobile-menu-btn,
            .mobile-search-btn {
                display: flex;
            }
            
            /* Masquer le texte du bouton catégories, garder que l'icône hamburger */
            #categoryBtn {
                display: none !important;
            }
            
            /* Masquer "Devenir Vendeur" texte, garder que l'icône */
            .desktop-vendor-btn {
                display: none !important;
            }
            
            /* Masquer la barre de recherche desktop */
            .desktop-search-wrapper {
                display: none !important;
            }
            
            /* Ajuster le header mobile - bien équilibré */
            header {
                padding: 10px 0 !important;
            }
            header > div {
                gap: 12px !important;
                padding: 0 10px !important;
                justify-content: space-between !important;
            }
            
            /* Espace entre logo et nav */
            header > div > a {
                gap: 6px !important;
                flex-shrink: 0 !important;
            }
            
            /* Logo et texte agrandis pour mobile */
            .logo-img {
                height: 45px !important;
            }
            .logo-text {
                font-size: 1.4rem !important;
                line-height: 1 !important;
                font-weight: 800 !important;
            }
            .logo-text::before {
                content: 'R.S';
            }
            .logo-text-full {
                display: none !important;
            }
            .logo-subtitle {
                display: none !important;
            }
            
            /* Container de navigation (hamburger, recherche, produits) */
            header > div > div:first-of-type {
                display: flex !important;
                gap: 6px !important;
                flex-shrink: 0 !important;
            }
            
            /* Icônes d'action - rapprochées */
            .navbar-actions {
                margin-left: 0 !important;
                flex-shrink: 0 !important;
            }
            
            /* Ajuster le bouton Produits - même taille que hamburger */
            .products-btn {
                width: 38px !important;
                height: 38px !important;
                min-width: 38px !important;
                padding: 0 !important;
                justify-content: center !important;
                gap: 0 !important;
            }
            .products-btn span {
                display: none !important;
            }
            .products-btn i {
                font-size: 1.05rem !important;
                margin: 0 !important;
            }
            
            /* Icônes d'action - taille moyenne */
            .navbar-actions {
                gap: 6px !important;
            }
            .navbar-actions .action-icon {
                width: 36px !important;
                height: 36px !important;
                border-width: 1.5px !important;
            }
            .navbar-actions .action-icon i {
                font-size: 0.95rem !important;
            }
            
            /* Uniformiser tous les boutons de navigation */
            .mobile-menu-btn,
            .mobile-search-btn {
                width: 38px !important;
                height: 38px !important;
                min-width: 38px !important;
            }
            .mobile-menu-btn i,
            .mobile-search-btn i {
                font-size: 1.05rem !important;
            }
            
            /* Lightning Deals ajusté pour mobile */
            .lightning-deals {
                margin-top: 65px !important;
            }
            
            /* Menu catégories en plein écran sur mobile - Plus compact */
            #categoryMenu {
                position: fixed !important;
                top: 65px !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                max-height: calc(100vh - 65px) !important;
                margin-top: 0 !important;
                border-radius: 0 !important;
                overflow-y: auto !important;
                padding: 12px !important;
            }
            
            #categoryMenu > div {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }
            
            /* Réduire les titres de catégories */
            #categoryMenu div[style*="font-weight: 700"] {
                font-size: 0.85rem !important;
                margin-bottom: 6px !important;
                padding: 6px 0 !important;
            }
            
            /* Réduire les liens de catégories */
            #categoryMenu a {
                padding: 5px 12px 5px 24px !important;
                font-size: 0.78rem !important;
            }
            
            /* Container de recherche mobile ajusté */
            .mobile-search-container {
                top: 65px !important;
                padding: 12px 10px !important;
            }
            
            /* Menu de recherche mobile full width */
            #searchMenu {
                width: 100% !important;
            }
        }
        
        /* Mode mobile très petit (smartphones) */
        @media (max-width: 480px) {
            header {
                padding: 8px 0 !important;
            }
            
            header > div {
                gap: 8px !important;
                padding: 0 8px !important;
            }
            
            .logo-img {
                height: 42px !important;
            }
            
            .logo-text {
                font-size: 1.3rem !important;
            }
            
            /* Boutons navigation bien espacés */
            .mobile-menu-btn,
            .mobile-search-btn,
            .products-btn {
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
            }
            
            /* Icônes d'action */
            .navbar-actions {
                gap: 5px !important;
            }
            
            .navbar-actions .action-icon {
                width: 34px !important;
                height: 34px !important;
            }
            .navbar-actions .action-icon i {
                font-size: 0.9rem !important;
            }
            
            /* Lightning Deals */
            .lightning-deals {
                margin-top: 62px !important;
            }
            
            /* Menus mobiles */
            #categoryMenu {
                top: 62px !important;
                max-height: calc(100vh - 62px) !important;
            }
            
            .mobile-search-container {
                top: 62px !important;
            }
        }
        
        /* ========== ORIENTATION PORTRAIT (Mobile) ========== */
        @media (max-width: 768px) and (orientation: portrait) {
            /* Footer optimisé portrait */
            .footer-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 20px !important;
            }
            
            footer {
                padding: 30px 0 15px 0 !important;
            }
            
            /* Titres footer plus petits */
            .footer-grid h3 {
                font-size: 0.85rem !important;
                margin-bottom: 8px !important;
            }
            
            /* Liens footer ajustés */
            .footer-grid li {
                margin-bottom: 6px !important;
            }
            
            .footer-grid a {
                font-size: 0.75rem !important;
            }
            
            /* Copyright section optimisée pour portrait */
            .footer-badges-container,
            .footer-trust-badges {
                gap: 6px !important;
            }
            
            /* Réseaux sociaux en ligne */
            .footer-grid > div:last-child > div {
                flex-wrap: wrap !important;
                justify-content: center !important;
            }
        }
        
        /* ========== ORIENTATION PAYSAGE (Mobile/Tablette) ========== */
        @media (max-width: 1024px) and (orientation: landscape) {
            /* Footer optimisé paysage */
            .footer-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 15px !important;
            }
            
            footer {
                padding: 20px 0 10px 0 !important;
            }
            
            /* Navbar ajustée en paysage */
            header {
                padding: 8px 0 !important;
            }
            
            .lightning-deals {
                margin-top: 58px !important;
            }
            
            /* Zones produits plus compactes en paysage */
            .zone1-section {
                padding: 20px 0 !important;
            }
            
            /* Copyright compact en paysage */
            .footer-copyright {
                padding-top: 12px !important;
            }
            
            .footer-badges-container > div,
            .footer-trust-badges > div {
                font-size: 0.68rem !important;
                padding: 5px 10px !important;
            }
        }
        
        /* ========== FOOTER MOBILE OPTIMISÉ ========== */
        @media (max-width: 480px) {
            /* Footer ultra-compact sur petit mobile */
            .footer-grid {
                grid-template-columns: 1fr !important;
                gap: 25px !important;
            }
            
            footer {
                padding: 25px 0 15px 0 !important;
            }
            
            .footer-grid h3 {
                font-size: 0.9rem !important;
                margin-bottom: 10px !important;
                padding-bottom: 8px !important;
                border-bottom: 1px solid rgba(251, 191, 36, 0.2) !important;
            }
            
            .footer-grid li {
                margin-bottom: 8px !important;
            }
            
            .footer-grid a {
                font-size: 0.8rem !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 8px !important;
                background: rgba(255,255,255,0.03) !important;
                border-radius: 8px !important;
                transition: all 0.3s !important;
            }
            
            .footer-grid a:hover {
                background: rgba(251, 191, 36, 0.1) !important;
            }
            
            /* Réseaux sociaux plus gros sur mobile */
            .footer-grid > div:last-child a {
                font-size: 1.5rem !important;
                padding: 12px !important;
            }
            
            /* Copyright section responsive */
            .footer-copyright {
                padding-top: 12px !important;
            }
            
            .footer-badges-container,
            .footer-trust-badges {
                gap: 6px !important;
            }
            
            .footer-badges-container > div,
            .footer-trust-badges > div {
                font-size: 0.65rem !important;
                padding: 5px 10px !important;
            }
            
            .footer-info p {
                font-size: 0.75rem !important;
            }
            
            .footer-info p:first-child {
                font-size: 0.8rem !important;
            }
        }
        
        /* ========== TABLETTE PORTRAIT ========== */
        @media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
            .footer-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 20px !important;
            }
            
            /* Zones produits 2 colonnes */
            .products-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
            
            .carousel-page {
                grid-template-columns: repeat(2, 1fr) !important;
                grid-template-rows: repeat(4, 320px) !important;
            }
        }
        
        /* ========== TABLETTE PAYSAGE ========== */
        @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
            .footer-grid {
                grid-template-columns: repeat(3, 1fr) !important;
            }
            
            .products-grid {
                grid-template-columns: repeat(3, 1fr) !important;
            }
            
            .carousel-page {
                grid-template-columns: repeat(3, 1fr) !important;
                grid-template-rows: repeat(3, 300px) !important;
            }
        }
    </style>
</head>
<body>
    <!-- ========== NAVBAR START ========== -->
    <header style="position: fixed; top: 0; left: 0; right: 0; background: white; padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000;">
        <div style="max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 30px;">
            <!-- Logo + Nom -->
            <a href="index.html" style="display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;">
                <img src="caddy raftelshop.svg" alt="RAFTELSHOP Logo" class="logo-img" style="height: 50px; width: auto;">
                <div style="display: flex; flex-direction: column; gap: 2px;">
                    <div class="logo-text" style="font-size: 1.4rem; font-weight: 700; background: linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; font-family: Arial, sans-serif;">
                        <span class="logo-text-full">RAFTELSHOP</span>
                    </div>
                    <div class="logo-subtitle" style="font-size: 0.75rem; font-weight: 500; color: #000; letter-spacing: 0.3px; font-family: Arial, sans-serif;">Centre commercial e-DZ</div>
                        </div>
                    </a>

            <!-- Navigation à gauche -->
            <div style="display: flex; gap: 8px; align-items: center;">
                <!-- Bouton Hamburger Mobile -->
                <div class="mobile-menu-btn" onclick="toggleCategoryMenu()">
                    <i class="fas fa-bars"></i>
                </div>
                
                <!-- Bouton Catégories avec menu déroulant (Desktop) -->
                <div style="position: relative;">
                    <button id="categoryBtn" onclick="toggleCategoryMenu()" style="padding: 8px 16px; background: #f8fafc; color: #1e3a8a; border: 2px solid #e2e8f0; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0.3px;" onmouseenter="this.style.background='#1e3a8a'; this.style.color='white'; this.style.borderColor='#1e3a8a'" onmouseleave="this.style.background='#f8fafc'; this.style.color='#1e3a8a'; this.style.borderColor='#e2e8f0'">
                        <i class="fas fa-bars" style="margin-right: 8px; font-size: 0.9rem;"></i>Catégories
                        <i class="fas fa-chevron-down" id="categoryChevron" style="margin-left: 8px; font-size: 0.7rem; transition: transform 0.3s;"></i>
                            </button>
                    <!-- Menu déroulant -->
                    <div id="categoryMenu" style="display: none; position: absolute; top: 100%; left: 0; margin-top: 10px; background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05); width: 650px; padding: 20px; z-index: 2000; backdrop-filter: blur(10px); max-height: 500px; overflow-y: auto;">
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                            <!-- Colonne 1 -->
                            <div>
                                <!-- Électronique -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-laptop" style="color: #667eea; font-size: 1rem;"></i>Électronique
                                </div>
                                    <a href="category.html?cat=smartphones" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Smartphones & Mobiles</a>
                                    <a href="category.html?cat=ordinateurs" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Ordinateurs & Laptops</a>
                                    <a href="category.html?cat=tablettes" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Tablettes & E-readers</a>
                                    <a href="category.html?cat=accessoires-tech" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Accessoires Tech</a>
                                    <a href="category.html?cat=audio-video" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Audio & Vidéo</a>
                                    <a href="category.html?cat=gaming" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Gaming & Consoles</a>
                    </div>
                    
                                <!-- Maison & Jardin -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-home" style="color: #667eea; font-size: 1rem;"></i>Maison & Jardin
                         </div>
                                    <a href="category.html?cat=electromenager" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Électroménager</a>
                                    <a href="category.html?cat=cuisine" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Cuisine & Vaisselle</a>
                                    <a href="category.html?cat=decoration" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Décoration Intérieure</a>
                                    <a href="category.html?cat=meubles" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Meubles</a>
                                    <a href="category.html?cat=jardin" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Jardin & Extérieur</a>
                                    <a href="category.html?cat=bricolage" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Bricolage & Outils</a>
                    </div>
                    
                                <!-- Mode Femme -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-female" style="color: #667eea; font-size: 1rem;"></i>Mode Femme
                         </div>
                                    <a href="category.html?cat=vetements-femme" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Vêtements Femme</a>
                                    <a href="category.html?cat=chaussures-femme" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Chaussures Femme</a>
                                    <a href="category.html?cat=sacs-femme" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Sacs & Maroquinerie</a>
                                    <a href="category.html?cat=bijoux" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Bijoux & Montres</a>
                                    <a href="category.html?cat=lingerie" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Lingerie & Sous-vêtements</a>
                    </div>
                    
                                <!-- Mode Homme -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-male" style="color: #667eea; font-size: 1rem;"></i>Mode Homme
                         </div>
                                    <a href="category.html?cat=vetements-homme" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Vêtements Homme</a>
                                    <a href="category.html?cat=chaussures-homme" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Chaussures Homme</a>
                                    <a href="category.html?cat=accessoires-homme" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Accessoires Homme</a>
                                    <a href="category.html?cat=montres-homme" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Montres</a>
                        </div>
                    </div>
                    
                            <!-- Colonne 2 -->
                            <div>
                                <!-- Beauté & Santé -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-heart" style="color: #667eea; font-size: 1rem;"></i>Beauté & Santé
                                </div>
                                    <a href="category.html?cat=maquillage" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Maquillage</a>
                                    <a href="category.html?cat=soins-visage" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Soins Visage & Corps</a>
                                    <a href="category.html?cat=parfums" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Parfums</a>
                                    <a href="category.html?cat=cheveux" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Soins Cheveux</a>
                                    <a href="category.html?cat=hygiene" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Hygiène & Bien-être</a>
                    </div>
                
                                <!-- Sports & Loisirs -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-dumbbell" style="color: #667eea; font-size: 1rem;"></i>Sports & Loisirs
                         </div>
                                    <a href="category.html?cat=fitness" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Fitness & Musculation</a>
                                    <a href="category.html?cat=vetements-sport" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Vêtements de Sport</a>
                                    <a href="category.html?cat=outdoor" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Camping & Outdoor</a>
                                    <a href="category.html?cat=velo" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Vélo & Trottinettes</a>
                    </div>
                    
                                <!-- Bébé & Enfant -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-baby" style="color: #667eea; font-size: 1rem;"></i>Bébé & Enfant
                         </div>
                                    <a href="category.html?cat=puericulture" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Puériculture</a>
                                    <a href="category.html?cat=jouets" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Jouets & Jeux</a>
                                    <a href="category.html?cat=vetements-enfant" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Vêtements Enfant</a>
                                    <a href="category.html?cat=chaussures-enfant" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Chaussures Enfant</a>
                    </div>
                    
                                <!-- Automobile -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-car" style="color: #667eea; font-size: 1rem;"></i>Automobile
                         </div>
                                    <a href="category.html?cat=accessoires-auto" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Accessoires Auto</a>
                                    <a href="category.html?cat=pieces-auto" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Pièces Détachées</a>
                                    <a href="category.html?cat=entretien-auto" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Entretien & Nettoyage</a>
                                    <a href="category.html?cat=moto" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Moto & Scooter</a>
                </div>
                        
                                <!-- Animaux -->
                                <div style="margin-bottom: 16px;">
                                    <div style="font-weight: 700; color: #667eea; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px;">
                                        <i class="fas fa-paw" style="color: #667eea; font-size: 1rem;"></i>Animaux
                         </div>
                                    <a href="category.html?cat=chiens" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Chiens</a>
                                    <a href="category.html?cat=chats" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Chats</a>
                                    <a href="category.html?cat=oiseaux" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Oiseaux & Rongeurs</a>
                                    <a href="category.html?cat=aquarium" style="display: block; padding: 6px 12px 6px 30px; color: #555; text-decoration: none; font-size: 0.8rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; margin: 2px 0;" onmouseover="this.style.color='#667eea'; this.style.background='rgba(102, 126, 234, 0.08)'; this.style.paddingLeft='35px'" onmouseout="this.style.color='#555'; this.style.background='transparent'; this.style.paddingLeft='30px'">Aquarium</a>
                                </div>
                            </div>
                                    </div>
            </div>
        </div>
                    
                <!-- Bouton Loupe Mobile -->
                <div class="mobile-search-btn" onclick="toggleMobileSearch()">
                    <i class="fas fa-search"></i>
                </div>
                
                <!-- Bouton Produits -->
                <a href="products.html" class="products-btn" style="padding: 8px 16px; background: #f8fafc; color: #1e3a8a; border: 2px solid #e2e8f0; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0.3px;" onmouseenter="this.style.background='#1e3a8a'; this.style.color='white'; this.style.borderColor='#1e3a8a'" onmouseleave="this.style.background='#f8fafc'; this.style.color='#1e3a8a'; this.style.borderColor='#e2e8f0'">
                    <i class="fas fa-box-open" style="font-size: 0.9rem;"></i><span>Produits</span>
                </a>
                
                <!-- Barre de recherche Desktop -->
                <div class="desktop-search-wrapper" style="position: relative; display: flex; align-items: center;">
                    <i class="fas fa-search" style="position: absolute; left: 14px; color: #94a3b8; font-size: 0.9rem; pointer-events: none; z-index: 10;"></i>
                    <input type="text" id="searchInput" placeholder="Rechercher des produits..." style="padding: 8px 16px 8px 40px; background: #f8fafc; color: #1e3a8a; border: 2px solid #e2e8f0; border-radius: 8px; font-weight: 500; font-size: 0.9rem; width: 320px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; outline: none;" onfocus="showSearchMenu(); this.style.background='white'; this.style.borderColor='#1e3a8a'; this.style.boxShadow='0 0 0 3px rgba(30, 58, 138, 0.1)'" onblur="setTimeout(hideSearchMenu, 200); this.style.background='#f8fafc'; this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'">
                    
                    <!-- Menu de suggestions de recherche -->
                    <!-- 
                        ╔════════════════════════════════════════════════════════════════════╗
                        ║ NOTE IMPORTANTE - RECHERCHES POPULAIRES                            ║
                        ╠════════════════════════════════════════════════════════════════════╣
                        ║ ACTUELLEMENT : Exemples statiques codés en dur                    ║
                        ║                                                                    ║
                        ║ FUTUR AVEC API :                                                   ║
                        ║ - Table SQL : search_logs (search_term, user_id, date, clicked)   ║
                        ║ - API : GET /api/trending.php                                      ║
                        ║ - Calcul : COUNT(*) des recherches des 7 derniers jours           ║
                        ║ - Ordre : Par popularité DESC, LIMIT 5                            ║
                        ║ - Mise à jour : Cache rafraîchi toutes les heures                 ║
                        ║                                                                    ║
                        ║ ALGORITHME AVANCÉ :                                                ║
                        ║ - Poids temporel : Récent = Plus de points                        ║
                        ║ - CTR : Taux de clics sur les résultats                           ║
                        ║ - Personnalisation : Basé sur l'historique utilisateur            ║
                        ╚════════════════════════════════════════════════════════════════════╝
                    -->
                    <div id="searchMenu" style="display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05); padding: 16px; z-index: 2000; width: 320px;">
                        <!-- Recherches populaires (STATIQUE pour l'instant - Sera dynamique avec API) -->
                        <div style="margin-bottom: 12px;">
                            <div style="font-weight: 700; color: #1e3a8a; font-size: 0.85rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                                <i class="fas fa-fire" style="color: #f59e0b; font-size: 0.9rem;"></i>Recherches populaires
                         </div>
                            <a href="search.html?q=iphone" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; gap: 8px;" onmouseover="this.style.color='#1e3a8a'; this.style.background='rgba(30, 58, 138, 0.05)'" onmouseout="this.style.color='#555'; this.style.background='transparent'">
                                <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>iPhone 15 Pro Max
                            </a>
                            <a href="search.html?q=samsung" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; gap: 8px;" onmouseover="this.style.color='#1e3a8a'; this.style.background='rgba(30, 58, 138, 0.05)'" onmouseout="this.style.color='#555'; this.style.background='transparent'">
                                <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>Samsung Galaxy S24
                            </a>
                            <a href="search.html?q=airpods" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; gap: 8px;" onmouseover="this.style.color='#1e3a8a'; this.style.background='rgba(30, 58, 138, 0.05)'" onmouseout="this.style.color='#555'; this.style.background='transparent'">
                                <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>AirPods Pro
                            </a>
                            <a href="search.html?q=laptop" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; gap: 8px;" onmouseover="this.style.color='#1e3a8a'; this.style.background='rgba(30, 58, 138, 0.05)'" onmouseout="this.style.color='#555'; this.style.background='transparent'">
                                <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>Laptop Dell XPS
                            </a>
                    </div>
                    
                        <div style="height: 1px; background: linear-gradient(90deg, transparent, #e5e5e5, transparent); margin: 12px 0;"></div>
                        
                        <!-- Catégories rapides -->
                            <div>
                            <div style="font-weight: 700; color: #1e3a8a; font-size: 0.85rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                                <i class="fas fa-layer-group" style="color: #667eea; font-size: 0.9rem;"></i>Catégories rapides
                                </div>
                            <div style="display: flex; flex-wrap: wrap; gap: 6px;">
                                <a href="category.html?cat=smartphones" style="padding: 6px 12px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.75rem; border-radius: 6px; transition: all 0.25s; font-weight: 500;" onmouseover="this.style.background='#1e3a8a'; this.style.color='white'" onmouseout="this.style.background='#f1f5f9'; this.style.color='#1e3a8a'">Smartphones</a>
                                <a href="category.html?cat=ordinateurs" style="padding: 6px 12px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.75rem; border-radius: 6px; transition: all 0.25s; font-weight: 500;" onmouseover="this.style.background='#1e3a8a'; this.style.color='white'" onmouseout="this.style.background='#f1f5f9'; this.style.color='#1e3a8a'">Ordinateurs</a>
                                <a href="category.html?cat=audio-video" style="padding: 6px 12px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.75rem; border-radius: 6px; transition: all 0.25s; font-weight: 500;" onmouseover="this.style.background='#1e3a8a'; this.style.color='white'" onmouseout="this.style.background='#f1f5f9'; this.style.color='#1e3a8a'">Audio</a>
                                <a href="category.html?cat=gaming" style="padding: 6px 12px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.75rem; border-radius: 6px; transition: all 0.25s; font-weight: 500;" onmouseover="this.style.background='#1e3a8a'; this.style.color='white'" onmouseout="this.style.background='#f1f5f9'; this.style.color='#1e3a8a'">Gaming</a>
                                <a href="category.html?cat=vetements" style="padding: 6px 12px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.75rem; border-radius: 6px; transition: all 0.25s; font-weight: 500;" onmouseover="this.style.background='#1e3a8a'; this.style.color='white'" onmouseout="this.style.background='#f1f5f9'; this.style.color='#1e3a8a'">Mode</a>
                                <a href="category.html?cat=maison" style="padding: 6px 12px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.75rem; border-radius: 6px; transition: all 0.25s; font-weight: 500;" onmouseover="this.style.background='#1e3a8a'; this.style.color='white'" onmouseout="this.style.background='#f1f5f9'; this.style.color='#1e3a8a'">Maison</a>
                            </div>
                                    </div>
                        </div>
                    </div>
                    
                <!-- Bouton Devenir Vendeur -->
                <a href="vendor/register.html" class="desktop-vendor-btn" style="padding: 8px 16px; background: #f8fafc; color: #1e3a8a; border: 2px solid #e2e8f0; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0.3px;" onmouseenter="this.style.background='#10b981'; this.style.color='white'; this.style.borderColor='#10b981'" onmouseleave="this.style.background='#f8fafc'; this.style.color='#1e3a8a'; this.style.borderColor='#e2e8f0'">
                    <i class="fas fa-store-alt" style="font-size: 0.9rem;"></i>Devenir Vendeur
                </a>
                    </div>
                    
            <!-- Icônes à droite -->
            <div class="navbar-actions" style="display: flex; gap: 12px; align-items: center; margin-left: auto;">
                <!-- Suivi de colis -->
                <div class="action-icon" onclick="window.location.href='tracking.html'" style="cursor: pointer; border-color: rgba(245, 158, 11, 0.3);">
                    <i class="fas fa-shipping-fast" style="color: #f59e0b;"></i>
                         </div>
                <!-- Favoris / Wishlist -->
                <div class="action-icon heart" onclick="window.location.href='wishlist.html'" style="cursor: pointer;">
                    <i class="far fa-heart"></i>
                                </div>
                <!-- Panier -->
                <div class="action-icon cart" onclick="window.location.href='cart.html'" style="cursor: pointer;">
                    <i class="fas fa-shopping-cart"></i>
                            </div>
                <!-- Login -->
                <div class="action-icon" onclick="window.location.href='login.html'" style="cursor: pointer; border-color: rgba(30, 58, 138, 0.3);">
                    <i class="fas fa-user" style="color: #1e3a8a;"></i>
                                    </div>
                                </div>
                            </div>
    </header>
    <!-- ========== NAVBAR END ========== -->
    
    <!-- ========== CONTAINER RECHERCHE MOBILE ========== -->
    <div id="mobileSearchContainer" class="mobile-search-container">
        <div style="position: relative; display: flex; align-items: center; margin-bottom: 15px;">
            <i class="fas fa-search" style="position: absolute; left: 14px; color: #94a3b8; font-size: 0.9rem; pointer-events: none; z-index: 10;"></i>
            <input type="text" id="mobileSearchInput" placeholder="Rechercher des produits..." style="padding: 10px 16px 10px 40px; background: #f8fafc; color: #1e3a8a; border: 2px solid #e2e8f0; border-radius: 8px; font-weight: 500; font-size: 0.9rem; width: 100%; transition: all 0.3s; font-family: 'Inter', sans-serif; outline: none;" onfocus="showMobileSearchMenu(); this.style.background='white'; this.style.borderColor='#1e3a8a'" onblur="this.style.background='#f8fafc'; this.style.borderColor='#e2e8f0'">
        </div>
        
        <!-- Menu de suggestions mobile -->
        <div id="mobileSearchMenu" style="display: none;">
            <!-- Recherches populaires -->
            <div style="margin-bottom: 12px;">
                <div style="font-weight: 700; color: #1e3a8a; font-size: 0.85rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-fire" style="color: #f59e0b; font-size: 0.9rem;"></i>Recherches populaires
                </div>
                <a href="search.html?q=iphone" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s; border-radius: 8px; gap: 8px; background: #f8fafc; margin-bottom: 4px;">
                    <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>iPhone 15 Pro Max
                </a>
                <a href="search.html?q=samsung" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s; border-radius: 8px; gap: 8px; background: #f8fafc; margin-bottom: 4px;">
                    <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>Samsung Galaxy S24
                </a>
                <a href="search.html?q=airpods" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s; border-radius: 8px; gap: 8px; background: #f8fafc; margin-bottom: 4px;">
                    <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>AirPods Pro
                </a>
                <a href="search.html?q=laptop" style="display: flex; align-items: center; padding: 8px 12px; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.25s; border-radius: 8px; gap: 8px; background: #f8fafc; margin-bottom: 4px;">
                    <i class="fas fa-search" style="font-size: 0.75rem; color: #94a3b8;"></i>Laptop Dell XPS
                </a>
            </div>
            
            <div style="height: 1px; background: linear-gradient(90deg, transparent, #e5e5e5, transparent); margin: 12px 0;"></div>
            
            <!-- Catégories rapides -->
            <div>
                <div style="font-weight: 700; color: #1e3a8a; font-size: 0.85rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-layer-group" style="color: #667eea; font-size: 0.9rem;"></i>Catégories rapides
                </div>
                <div style="display: flex; flex-wrap: wrap; gap: 6px;">
                    <a href="category.html?cat=smartphones" style="padding: 8px 14px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.8rem; border-radius: 8px; font-weight: 500;">Smartphones</a>
                    <a href="category.html?cat=ordinateurs" style="padding: 8px 14px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.8rem; border-radius: 8px; font-weight: 500;">Ordinateurs</a>
                    <a href="category.html?cat=audio-video" style="padding: 8px 14px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.8rem; border-radius: 8px; font-weight: 500;">Audio</a>
                    <a href="category.html?cat=gaming" style="padding: 8px 14px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.8rem; border-radius: 8px; font-weight: 500;">Gaming</a>
                    <a href="category.html?cat=vetements" style="padding: 8px 14px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.8rem; border-radius: 8px; font-weight: 500;">Mode</a>
                    <a href="category.html?cat=maison" style="padding: 8px 14px; background: #f1f5f9; color: #1e3a8a; text-decoration: none; font-size: 0.8rem; border-radius: 8px; font-weight: 500;">Maison</a>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== FIN CONTAINER RECHERCHE MOBILE ========== -->

    <section class="lightning-deals">
        <h2 class="lightning-deals-title">⚡ Offres Flash</h2>
        <div class="deals-scroll" id="dealsScroll"></div>
    </section>

    <section class="zone1-section">
        <div class="zone1-container">
            <h2 class="zone1-title">
                <i class="fas fa-crown"></i>
                Sélection Premium
            </h2>
            <div class="carousel-wrapper">
                <div class="carousel-track" id="zone1Carousel"></div>
                <button class="carousel-btn prev" onclick="moveCarousel(-1)">‹</button>
                <button class="carousel-btn next" onclick="moveCarousel(1)">›</button>
                         </div>
            <div class="carousel-indicators" id="indicators"></div>
        </div>
    </section>

    <section class="zone2-section">
        <div class="zone2-container">
            <h2 class="zone2-title">
                <i class="fas fa-store"></i>
                Nos Meilleurs Vendeurs
            </h2>
            <div class="products-grid" id="zone2Grid"></div>
        </div>
    </section>

    <section class="zone3-section">
        <div class="zone3-container">
            <h2 class="zone3-title">
                <i class="fas fa-shopping-bag"></i>
                Plus de Produits
            </h2>
            <div class="products-grid" id="zone3Grid"></div>
        </div>
    </section>

    <!-- ========== FOOTER START ========== -->
    <footer style="background: #1a1a1a; color: white; padding: 20px 0 10px 0; margin-top: 40px; border-top: 3px solid #fbbf24;">
        <div style="max-width: 1400px; margin: 0 auto; padding: 0 20px;">
            <div class="footer-grid" style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 12px; justify-content: center; max-width: 1200px; margin-left: auto; margin-right: auto;">
                <!-- Shopping -->
                <div style="text-align: center;">
                    <h3 style="font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: #fbbf24;">🛒 Shopping</h3>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 4px; text-align: center;"><a href="index.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-home" style="margin-right: 6px; font-size: 0.7rem;"></i>Accueil</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="products.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-box-open" style="margin-right: 6px; font-size: 0.7rem;"></i>Tous les produits</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="categories.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-th-large" style="margin-right: 6px; font-size: 0.7rem;"></i>Catégories</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="cart.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-shopping-cart" style="margin-right: 6px; font-size: 0.7rem;"></i>Panier</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="wishlist.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-heart" style="margin-right: 6px; font-size: 0.7rem;"></i>Liste de souhaits</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="tracking.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-shipping-fast" style="margin-right: 6px; font-size: 0.7rem;"></i>Suivi de colis</a></li>
                    </ul>
                </div>
                
                <!-- Mon Compte -->
                <div style="text-align: center;">
                    <h3 style="font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: #fbbf24;">👤 Mon Compte</h3>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 4px; text-align: center;"><a href="login.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-sign-in-alt" style="margin-right: 6px; font-size: 0.7rem;"></i>Connexion</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="register.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-user-plus" style="margin-right: 6px; font-size: 0.7rem;"></i>Créer un compte</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="orders.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-receipt" style="margin-right: 6px; font-size: 0.7rem;"></i>Mes commandes</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="payment.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-credit-card" style="margin-right: 6px; font-size: 0.7rem;"></i>Paiement</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="payment-instructions.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-money-check-alt" style="margin-right: 6px; font-size: 0.7rem;"></i>Modes de paiement</a></li>
                    </ul>
                </div>
                
                <!-- Vendeur -->
                <div style="text-align: center;">
                    <h3 style="font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: #fbbf24;">🏪 Espace Vendeur</h3>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 4px; text-align: center;"><a href="vendor/register.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-store-alt" style="margin-right: 6px; font-size: 0.7rem;"></i>Devenir vendeur</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="tarif.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-tags" style="margin-right: 6px; font-size: 0.7rem;"></i>Tarifs & Formules</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="vendor/help.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-question-circle" style="margin-right: 6px; font-size: 0.7rem;"></i>Aide vendeur</a></li>
                    </ul>
                </div>
                
                <!-- Informations -->
                <div style="text-align: center;">
                    <h3 style="font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: #fbbf24;">ℹ️ Informations</h3>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 4px; text-align: center;"><a href="about.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-info-circle" style="margin-right: 6px; font-size: 0.7rem;"></i>À propos</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="contact.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-envelope" style="margin-right: 6px; font-size: 0.7rem;"></i>Contact</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="blog.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-blog" style="margin-right: 6px; font-size: 0.7rem;"></i>Blog</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="faq.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-question" style="margin-right: 6px; font-size: 0.7rem;"></i>FAQ</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="support.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-headset" style="margin-right: 6px; font-size: 0.7rem;"></i>Support</a></li>
                    </ul>
                </div>
                
                <!-- Légal -->
                <div style="text-align: center;">
                    <h3 style="font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: #fbbf24;">⚖️ Légal</h3>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 4px; text-align: center;"><a href="terms.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-file-contract" style="margin-right: 6px; font-size: 0.7rem;"></i>CGU</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="privacy.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-user-shield" style="margin-right: 6px; font-size: 0.7rem;"></i>Confidentialité</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="cookies.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-cookie-bite" style="margin-right: 6px; font-size: 0.7rem;"></i>Cookies</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="security.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-shield-alt" style="margin-right: 6px; font-size: 0.7rem;"></i>Sécurité</a></li>
                        <li style="margin-bottom: 4px; text-align: center;"><a href="report-fraud.html" style="color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.75rem; transition: color 0.3s;" onmouseover="this.style.color='#fbbf24'" onmouseout="this.style.color='rgba(255,255,255,0.75)'"><i class="fas fa-exclamation-triangle" style="margin-right: 6px; font-size: 0.7rem;"></i>Signaler une fraude</a></li>
                    </ul>
                </div>
                
                <!-- Réseaux Sociaux -->
                <div style="text-align: center;">
                    <h3 style="font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: #fbbf24;">📱 Suivez-nous</h3>
                    <div style="display: flex; gap: 10px; align-items: center; margin-top: 8px; justify-content: center;">
                        <a href="https://facebook.com/raftelshop" target="_blank" style="color: #888; font-size: 1.2rem; transition: all 0.3s; display: inline-block;" onmouseover="this.style.color='#fbbf24'; this.style.transform='scale(1.15)'" onmouseout="this.style.color='#888'; this.style.transform='scale(1)'">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <a href="https://instagram.com/raftelshop" target="_blank" style="color: #888; font-size: 1.2rem; transition: all 0.3s; display: inline-block;" onmouseover="this.style.color='#fbbf24'; this.style.transform='scale(1.15)'" onmouseout="this.style.color='#888'; this.style.transform='scale(1)'">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="https://x.com/raftelshop" target="_blank" style="color: #888; font-size: 1.2rem; transition: all 0.3s; display: inline-block;" onmouseover="this.style.color='#fbbf24'; this.style.transform='scale(1.15)'" onmouseout="this.style.color='#888'; this.style.transform='scale(1)'">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://tiktok.com/@raftelshop" target="_blank" style="color: #888; font-size: 1.2rem; transition: all 0.3s; display: inline-block;" onmouseover="this.style.color='#fbbf24'; this.style.transform='scale(1.15)'" onmouseout="this.style.color='#888'; this.style.transform='scale(1)'">
                            <i class="fab fa-tiktok"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Copyright avec logos partenaires -->
            <div class="footer-copyright" style="border-top: 1px solid #333; padding-top: 15px; margin-top: 12px;">
                <!-- Logos Paiement & Livraison (Groupés) -->
                <div class="footer-badges-container" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 15px;">
                    <!-- Paiement -->
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(251, 191, 36, 0.2);">
                        <i class="fas fa-credit-card" style="color: #fbbf24; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">EDAHABIA</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(251, 191, 36, 0.2);">
                        <i class="fas fa-mobile-alt" style="color: #fbbf24; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">BaridiMob</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(251, 191, 36, 0.2);">
                        <i class="fas fa-university" style="color: #fbbf24; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">CIB</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(16, 185, 129, 0.3);">
                        <i class="fas fa-shield-alt" style="color: #10b981; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">Paiement Sécurisé</span>
                    </div>
                    <!-- Livraison -->
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(59, 130, 246, 0.3);">
                        <i class="fas fa-shipping-fast" style="color: #3b82f6; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">Yalidine</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(59, 130, 246, 0.3);">
                        <i class="fas fa-truck" style="color: #3b82f6; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">Kazitour</span>
                    </div>
                </div>
                
                <!-- Info Centrale RAFTELSHOP -->
                <div class="footer-info" style="text-align: center; margin-bottom: 12px;">
                    <p style="color: rgba(255,255,255,0.95); font-size: 0.85rem; margin-bottom: 6px; font-weight: 700;">
                        <strong style="color: #fbbf24;">RAFTELSHOP</strong> - Centre commercial e-DZ
                    </p>
                    <p style="color: rgba(255,255,255,0.75); font-size: 0.75rem; margin-bottom: 4px;">
                        Développé et hébergé par <strong style="color: #fbbf24;">CH.M</strong> Fondateur <a href="https://i-cmshop.com" target="_blank" style="color: #fbbf24; text-decoration: none; font-weight: 600; transition: color 0.3s;" onmouseover="this.style.color='#fde68a'" onmouseout="this.style.color='#fbbf24'">i-cmshop.com</a>
                    </p>
                    <p style="color: rgba(255,255,255,0.7); font-size: 0.75rem; margin-bottom: 8px;">
                        <i class="fas fa-envelope" style="margin-right: 5px; color: #fbbf24;"></i>
                        <a href="mailto:contact@raftelshop.com" style="color: #fbbf24; text-decoration: none; transition: color 0.3s;" onmouseover="this.style.color='#fde68a'" onmouseout="this.style.color='#fbbf24'">contact@raftelshop.com</a>
                    </p>
                    <p style="color: rgba(255,255,255,0.5); font-size: 0.7rem; margin: 0;">
                        © 2023-2025 RAFTELSHOP. Tous droits réservés.
                    </p>
                </div>
                
                <!-- Badges Sécurité & Confiance (Groupés) -->
                <div class="footer-trust-badges" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;">
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(16, 185, 129, 0.3);">
                        <i class="fas fa-lock" style="color: #10b981; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">SSL</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(66, 133, 244, 0.3);">
                        <i class="fab fa-google" style="color: #4285F4; font-size: 0.9rem;"></i>
                        <span style="font-weight: 600;">SEO</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; color: rgba(255,255,255,0.7); border: 1px solid rgba(251, 191, 36, 0.2);">
                        <div style="display: flex; gap: 2px;">
                            <i class="fas fa-star" style="color: #fbbf24; font-size: 0.7rem;"></i>
                            <i class="fas fa-star" style="color: #fbbf24; font-size: 0.7rem;"></i>
                            <i class="fas fa-star" style="color: #fbbf24; font-size: 0.7rem;"></i>
                            <i class="fas fa-star" style="color: #fbbf24; font-size: 0.7rem;"></i>
                            <i class="fas fa-star-half-alt" style="color: #fbbf24; font-size: 0.7rem;"></i>
                        </div>
                        <span style="font-weight: 600;">4.5/5</span>
                    </div>
                    <!-- Compteur de visiteurs (chargé dynamiquement par visitor-counter.js) -->
                    <div id="visitorCounter"></div>
                </div>
            </div>
        </div>
    </footer>
    <!-- ========== FOOTER END ========== -->

    <script>
        // Fonction pour ouvrir/fermer le menu catégories
        function toggleCategoryMenu() {
            const menu = document.getElementById('categoryMenu');
            const chevron = document.getElementById('categoryChevron');
            
            if (menu.style.display === 'none' || menu.style.display === '') {
                menu.style.display = 'block';
                chevron.style.transform = 'rotate(180deg)';
                } else {
                menu.style.display = 'none';
                chevron.style.transform = 'rotate(0deg)';
            }
        }
        
        // Fonction pour afficher le menu de recherche
        function showSearchMenu() {
            document.getElementById('searchMenu').style.display = 'block';
        }
        
        // Fonction pour masquer le menu de recherche
        function hideSearchMenu() {
            document.getElementById('searchMenu').style.display = 'none';
        }
        
        // Fonction pour ouvrir/fermer la recherche mobile
        function toggleMobileSearch() {
            const container = document.getElementById('mobileSearchContainer');
            const categoryMenu = document.getElementById('categoryMenu');
            
            // Fermer le menu catégories s'il est ouvert
            if (categoryMenu.style.display === 'block') {
                categoryMenu.style.display = 'none';
                const chevron = document.getElementById('categoryChevron');
                if (chevron) chevron.style.transform = 'rotate(0deg)';
            }
            
            // Toggle le container de recherche
            if (container.classList.contains('active')) {
                container.classList.remove('active');
            } else {
                container.classList.add('active');
                // Focus sur l'input après un court délai
                setTimeout(() => {
                    document.getElementById('mobileSearchInput').focus();
                }, 100);
            }
        }
        
        // Fonction pour afficher le menu de recherche mobile
        function showMobileSearchMenu() {
            document.getElementById('mobileSearchMenu').style.display = 'block';
        }
        
        // Fonction pour masquer le menu de recherche mobile
        function hideMobileSearchMenu() {
            document.getElementById('mobileSearchMenu').style.display = 'none';
        }
        
        // Fermer les menus quand on clique en dehors
        document.addEventListener('click', function(event) {
            const categoryMenu = document.getElementById('categoryMenu');
            const categoryButton = event.target.closest('button[onclick="toggleCategoryMenu()"]');
            const mobileMenuBtn = event.target.closest('.mobile-menu-btn');
            const categoryMenuElement = event.target.closest('#categoryMenu');
            
            if (!categoryButton && !mobileMenuBtn && !categoryMenuElement && categoryMenu && categoryMenu.style.display === 'block') {
                categoryMenu.style.display = 'none';
                const chevron = document.getElementById('categoryChevron');
                if (chevron) chevron.style.transform = 'rotate(0deg)';
            }
            
            const searchMenu = document.getElementById('searchMenu');
            const searchInput = event.target.closest('#searchInput');
            const searchMenuElement = event.target.closest('#searchMenu');
            
            if (!searchInput && !searchMenuElement && searchMenu && searchMenu.style.display === 'block') {
                searchMenu.style.display = 'none';
            }
            
            // Fermer la recherche mobile si on clique en dehors
            const mobileSearchContainer = document.getElementById('mobileSearchContainer');
            const mobileSearchBtn = event.target.closest('.mobile-search-btn');
            const mobileSearchElement = event.target.closest('#mobileSearchContainer');
            
            if (!mobileSearchBtn && !mobileSearchElement && mobileSearchContainer && mobileSearchContainer.classList.contains('active')) {
                mobileSearchContainer.classList.remove('active');
            }
        });
        
        const v1=['TechStore Pro','ElectroShop DZ','MegaStore','PremiumTech','SmartDevices','TopElectronics','BestBuy DZ','GadgetWorld','TechHub','ProShop'];
        const v2=['StandardShop','LocalStore','EasyBuy','QuickShop','DailyDeals','ValueStore','SmartChoice','BestPrice','ShopMart','TrendStore'];
        const v3=['BasicStore','SimpleShop','EcoStore','BudgetBuy','StartShop','NewStore','FreshMarket','EverydayShop','CityStore','QuickMart'];
        
        const brands=['Apple','Samsung','Sony','Dell','Logitech','JBL','Bose','Dyson','Philips','Garmin','Canon','HP','Asus','Xiaomi','Huawei'];
        
        const products=[
            {id:1,name:'MacBook Pro M3 16" avec Écran Retina XDR',img:'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400',badge:'Nouveau',badgeColor:'#10b981',brand:'Apple'},
            {id:2,name:'iPhone 15 Pro Max 256GB Titanium Bleu',img:'https://images.unsplash.com/photo-1591337676887-a217a6970a8a?w=400',badge:'-25%',badgeColor:'#ef4444',brand:'Apple'},
            {id:3,name:'Samsung Galaxy S24 Ultra 512GB Phantom Black',img:'https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?w=400',badge:'Hot',badgeColor:'#f59e0b',brand:'Samsung'},
            {id:4,name:'iPad Air 11" M2 WiFi 256GB Space Gray',img:'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=400',badge:'-30%',badgeColor:'#ef4444',brand:'Apple'},
            {id:5,name:'AirPods Pro 2ème Génération avec Boîtier MagSafe',img:'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?w=400',badge:'Promo',badgeColor:'#8b5cf6',brand:'Apple'},
            {id:6,name:'Sony WH-1000XM5 Casque sans Fil Réduction Bruit',img:'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=400',badge:'-15%',badgeColor:'#ef4444',brand:'Sony'},
            {id:7,name:'Dell XPS 15 9530 Intel Core i7 32GB RAM 1TB SSD',img:'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=400',badge:'Nouveau',badgeColor:'#10b981',brand:'Dell'},
            {id:8,name:'Nintendo Switch OLED Modèle Blanc avec Joy-Con',img:'https://images.unsplash.com/photo-1578303512597-81e6cc155b3e?w=400',badge:'Hot',badgeColor:'#f59e0b',brand:'Nintendo'},
            {id:9,name:'PS5',img:'https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?w=400',badge:'-20%',badgeColor:'#ef4444'},
            {id:10,name:'Xbox Series X',img:'https://images.unsplash.com/photo-1621259182978-fbf93132d53d?w=400',badge:'Promo',badgeColor:'#8b5cf6'},
            {id:11,name:'Apple Watch Ultra',img:'https://images.unsplash.com/photo-1434494878577-86c23bcb06b9?w=400',badge:'Nouveau',badgeColor:'#10b981'},
            {id:12,name:'GoPro Hero 12',img:'https://images.unsplash.com/photo-1519638399535-1b036603ac77?w=400',badge:'-35%',badgeColor:'#ef4444'},
            {id:13,name:'DJI Mini 4 Pro',img:'https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=400',badge:'Hot',badgeColor:'#f59e0b'},
            {id:14,name:'Canon EOS R6',img:'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=400',badge:'-18%',badgeColor:'#ef4444'},
            {id:15,name:'Surface Pro 9',img:'https://images.unsplash.com/photo-1587614382346-4ec70e388b28?w=400',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Bose QuietComfort',img:'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400',badge:'-22%',badgeColor:'#ef4444'},
            {name:'JBL Flip 6',img:'https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=400',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Kindle Paperwhite',img:'https://images.unsplash.com/photo-1592514785324-e588f9c6b4b2?w=400',badge:'-28%',badgeColor:'#ef4444'},
            {name:'Fitbit Charge 6',img:'https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6?w=400',badge:'Hot',badgeColor:'#f59e0b'},
            {name:'Ring Doorbell',img:'https://images.unsplash.com/photo-1558002038-1055907df827?w=400',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Dyson V15',img:'https://images.unsplash.com/photo-1558317374-067fb5f30001?w=400',badge:'-40%',badgeColor:'#ef4444'},
            {name:'Nespresso Vertuo',img:'https://images.unsplash.com/photo-1517668808822-9ebb02f2a0e6?w=400',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Air Fryer Ninja',img:'https://images.unsplash.com/photo-1585515320310-259814833e62?w=400',badge:'-33%',badgeColor:'#ef4444'},
            {name:'Instant Pot',img:'https://images.unsplash.com/photo-1585659722983-3a675dabf23d?w=400',badge:'Hot',badgeColor:'#f59e0b'},
            {name:'Robot Aspirateur',img:'assets/images/products/product_1558317374-067fb5f30001.jpg',badge:'-26%',badgeColor:'#ef4444'},
            {name:'Smart TV 55"',img:'assets/images/products/product_1593359677879-a4bb92f829d1.jpg',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Soundbar Samsung',img:'assets/images/products/product_1545454675-3531b543be5d.jpg',badge:'-19%',badgeColor:'#ef4444'},
            {name:'Webcam Logitech',img:'assets/images/products/product_1519389950473-47ba0277781c.jpg',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Clavier Mécanique',img:'assets/images/products/product_1587829741301-dc798b83add3.jpg',badge:'-24%',badgeColor:'#ef4444'},
            {name:'Souris Gamer',img:'assets/images/products/product_1527864550417-7fd91fc51a46.jpg',badge:'Hot',badgeColor:'#f59e0b'},
            {name:'Écouteurs Galaxy Buds',img:'assets/images/products/product_1590658268037-6bf12165a8df.jpg',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Tablette Samsung',img:'assets/images/products/product_1561154464-82e9adf32764.jpg',badge:'-31%',badgeColor:'#ef4444'},
            {name:'Montre Garmin',img:'assets/images/products/product_1508685096489-7aacd43bd3b1.jpg',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Caméra Nest',img:'assets/images/products/product_1557324232-b8917d3c3dcb.jpg',badge:'-27%',badgeColor:'#ef4444'},
            {name:'Thermostat Nest',img:'assets/images/products/product_1545259741-2ea3ebf61fa3.jpg',badge:'Hot',badgeColor:'#f59e0b'},
            {name:'Lampe Philips Hue',img:'assets/images/products/product_1513506003901-1e6a229e2d15.jpg',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Enceinte Google Nest',img:'assets/images/products/product_1608043152269-423dbba4e7e1.jpg',badge:'-23%',badgeColor:'#ef4444'},
            {name:'Chromecast',img:'assets/images/products/product_1593784991095-a205069470b6.jpg',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Fire TV Stick',img:'assets/images/products/product_1593784991095-a205069470b6.jpg',badge:'-29%',badgeColor:'#ef4444'},
            {name:'Roku Streaming',img:'assets/images/products/product_1593784991095-a205069470b6.jpg',badge:'Hot',badgeColor:'#f59e0b'},
            {name:'Chargeur Anker',img:'assets/images/products/product_1591290619762-d1ba7702e8f4.jpg',badge:'-15%',badgeColor:'#ef4444'},
            {name:'Power Bank',img:'assets/images/products/product_1609091839311-d5365f9ff1c5.jpg',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Câble USB-C',img:'assets/images/products/product_1625948515291-69613efd103f.jpg',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Coque iPhone',img:'assets/images/products/product_1601784551446-20c9e07cdbdb.jpg',badge:'-35%',badgeColor:'#ef4444'},
            {name:'Protection Écran',img:'assets/images/products/product_1601784551446-20c9e07cdbdb.jpg',badge:'Hot',badgeColor:'#f59e0b'},
            {name:'Support Téléphone',img:'assets/images/products/product_1606041011872-596597976b25.jpg',badge:'-18%',badgeColor:'#ef4444'},
            {name:'Trépied Camera',img:'assets/images/products/product_1502920917128-1aa500764cbd.jpg',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Micro USB',img:'assets/images/products/product_1590602847861-f357a9332bbc.jpg',badge:'-22%',badgeColor:'#ef4444'},
            {name:'Hub USB',img:'assets/images/products/product_1625948515291-69613efd103f.jpg',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Adaptateur HDMI',img:'assets/images/products/product_1625948515291-69613efd103f.jpg',badge:'-26%',badgeColor:'#ef4444'},
            {name:'Disque Dur SSD',img:'assets/images/products/product_1597872200969-2b65d56bd16b.jpg',badge:'Hot',badgeColor:'#f59e0b'},
            {name:'Clé USB 128GB',img:'assets/images/products/product_1588508065123-287b28e013da.jpg',badge:'Nouveau',badgeColor:'#10b981'},
            {name:'Carte SD',img:'assets/images/products/product_1563968743333-044cef800494.jpg',badge:'-30%',badgeColor:'#ef4444'},
            {name:'Routeur WiFi',img:'assets/images/products/product_1606904825846-647eb07f5be2.jpg',badge:'Promo',badgeColor:'#8b5cf6'},
            {name:'Répéteur WiFi',img:'assets/images/products/product_1606904825846-647eb07f5be2.jpg',badge:'-21%',badgeColor:'#ef4444'}
        ];
        
        function rP(){return Math.floor(Math.random()*150000)+5000;}
        function rS(){return Math.floor(Math.random()*100000)+100;}
        function fN(n){return n>=1000?(n/1000).toFixed(1)+'K+':n;}
        function rRating(){return (Math.random()*2+3).toFixed(1);} // Entre 3.0 et 5.0
        function rReviews(){return Math.floor(Math.random()*500)+10;}
        function rVendorAge(){return Math.floor(Math.random()*24)+1;} // 1 à 24 mois
        function isNewVendor(months){return months<=6;}
        
        function getStars(rating){
            const full=Math.floor(rating);
            const half=rating%1>=0.5?1:0;
            const empty=5-full-half;
            let stars='';
            for(let i=0;i<full;i++)stars+='<i class="fas fa-star"></i>';
            if(half)stars+='<i class="fas fa-star-half-alt"></i>';
            for(let i=0;i<empty;i++)stars+='<i class="far fa-star"></i>';
            return stars;
        }
        
        function cCard(prod,v,showBadge=true,isZone1=false){
            const price=rP(),sales=rS(),rating=rRating(),reviews=rReviews();
            const vendorRating=rRating(),vendorSales=rS();
            const vendorAge=rVendorAge();
            const isNew=isNewVendor(vendorAge);
            const brandToShow=prod.brand || brands[Math.floor(Math.random()*brands.length)];
            const productId = Math.random().toString(36).substr(2, 9);
            
            return `<div class="temu-card" onclick="window.location.href='product-detail.html?id=${productId}&name=${encodeURIComponent(prod.name)}&img=${encodeURIComponent(prod.img)}'" style="cursor: pointer;">
                <div class="img-wrapper" style="position:relative;background:#f0f0f0;">
                    ${showBadge?`<div class="discount-badge" style="background:${prod.badgeColor}">${prod.badge}</div>`:''}
                    ${!isZone1?`<div class="card-actions">
                        <div class="action-icon heart" onclick="event.stopPropagation(); toggleWishlist(this);">
                            <i class="far fa-heart"></i>
                        </div>
                        <div class="action-icon cart" onclick="event.stopPropagation(); addToCart();">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>`:''}
                    <img src="${prod.img}" alt="${prod.name}">
                </div>
                <div class="info">
                    <div class="title">${prod.name}</div>
                    ${isZone1?`<div class="inline-actions">
                        <button class="action-icon cart" onclick="event.stopPropagation(); addToCart();">
                            <i class="fas fa-shopping-cart"></i>
                            <span>Ajouter</span>
                        </button>
                    </div>`:''}
                    <div class="price">${price.toLocaleString('fr-DZ')} DA</div>
                    <div class="rating">
                        <div class="stars">${getStars(rating)}</div>
                        <span class="rating-count">(${reviews}) • ${fN(sales)} vendus</span>
                    </div>
                    <div style="font-size:0.72rem;color:#666;border-top:1px solid #eee;padding-top:4px;margin-top:4px;">
                        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;">
                            <span style="font-weight:600;color:#333;font-size:0.75rem;">${v}</span>
                            ${isNew?'<span style="background:#10b981;color:white;padding:2px 6px;border-radius:4px;font-size:0.65rem;font-weight:700;">Nouveau</span>':'<span style="background:#f1f5f9;color:#1e3a8a;padding:2px 6px;border-radius:4px;font-size:0.65rem;font-weight:700;">'+brandToShow+'</span>'}
                        </div>
                        <div style="display:flex;align-items:center;gap:3px;">
                            <div class="stars" style="font-size:0.6rem;">${getStars(vendorRating)}</div>
                            <span style="font-size:0.65rem;">${fN(vendorSales)} ventes</span>
                        </div>
                    </div>
                </div>
            </div>`;
        }
        
        function toggleWishlist(el){
            const icon=el.querySelector('i');
            if(icon.classList.contains('far')){
                icon.classList.remove('far');
                icon.classList.add('fas');
                el.classList.add('active');
                // Animation de battement de cœur
                el.style.animation='heartBeat 0.5s ease';
                setTimeout(()=>el.style.animation='',500);
            }else{
                icon.classList.remove('fas');
                icon.classList.add('far');
                el.classList.remove('active');
            }
        }
        
        function addToCart(){
            // Petit effet visuel
            event.target.closest('.action-icon').style.animation='cartShake 0.5s ease';
            setTimeout(()=>event.target.closest('.action-icon').style.animation='',500);
            
            // Message de confirmation stylisé
            const notification=document.createElement('div');
            notification.innerHTML='<i class="fas fa-check-circle"></i> Ajouté au panier !';
            notification.style.cssText=`
                position:fixed;
                top:20px;
                right:20px;
                background:linear-gradient(135deg,#10b981,#059669);
                color:white;
                padding:15px 25px;
                border-radius:10px;
                box-shadow:0 10px 30px rgba(16,185,129,0.3);
                z-index:10000;
                font-weight:600;
                display:flex;
                align-items:center;
                gap:10px;
                animation:slideInRight 0.3s ease;
            `;
            document.body.appendChild(notification);
            setTimeout(()=>{
                notification.style.animation='slideOutRight 0.3s ease';
                setTimeout(()=>notification.remove(),300);
            },2000);
        }
        
        // Liste blanche pour Lightning Deals (rubrique payante)
        window.RAFTELSHOP = window.RAFTELSHOP || {};
        RAFTELSHOP.lightningWhitelist = RAFTELSHOP.lightningWhitelist || [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

        let h='';
        const whitelist = new Set(RAFTELSHOP.lightningWhitelist.map(String));
        const deals = products.filter(p=>whitelist.has(String(p.id))).slice(0,15);
        deals.forEach((p,idx)=>{ h+=`<div class="deal-card">${cCard(p,v1[idx%v1.length],true,false)}</div>`; });
        document.getElementById('dealsScroll').innerHTML=h;
        
        let sp=0;
        setInterval(()=>{
            const ds=document.getElementById('dealsScroll');
            sp+=1;
            if(sp>=ds.scrollWidth-ds.clientWidth)sp=0;
            ds.scrollTo({left:sp,behavior:'smooth'});
        },50);
        
        h='';
        let ih='';
        for(let pg=0;pg<5;pg++){
            h+='<div class="carousel-page">';
            for(let i=0;i<8;i++){
                const idx=pg*8+i;
                h+=cCard(products[idx%products.length],v1[idx%v1.length],true,false); // Boutons sur l'image
            }
            h+='</div>';
            ih+=`<div class="indicator ${pg===0?'active':''}" onclick="goToPage(${pg})"></div>`;
        }
        document.getElementById('zone1Carousel').innerHTML=h;
        document.getElementById('indicators').innerHTML=ih;
        
        let cp=0;
        function moveCarousel(d){
            cp+=d;
            if(cp<0)cp=4;
            if(cp>=5)cp=0;
            document.getElementById('zone1Carousel').style.transform=`translateX(-${cp*100}%)`;
            document.querySelectorAll('.indicator').forEach((ind,i)=>ind.classList.toggle('active',i===cp));
        }
        function goToPage(pg){
            cp=pg;
            document.getElementById('zone1Carousel').style.transform=`translateX(-${cp*100}%)`;
            document.querySelectorAll('.indicator').forEach((ind,i)=>ind.classList.toggle('active',i===cp));
        }
        setInterval(()=>moveCarousel(1),8000); // Défilement automatique toutes les 8 secondes
        
        h='';
        // Zone 2: v2 prioritaires (30) puis v1 (20) - SANS DOUBLONS avec Zone 1
        for(let i=0;i<30;i++)h+=`<div class="grid-card">${cCard(products[(i+40)%products.length],v2[i%v2.length],false,false)}</div>`;
        for(let i=0;i<20;i++)h+=`<div class="grid-card">${cCard(products[(i+15)%products.length],v1[i%v1.length],false,false)}</div>`;
        document.getElementById('zone2Grid').innerHTML=h;
        
        h='';
        // Zone 3: v3 prioritaires (20) puis v2 (15) puis v1 (15) - Indices uniques
        for(let i=0;i<20;i++)h+=`<div class="grid-card">${cCard(products[(i+70)%products.length],v3[i%v3.length],false,false)}</div>`;
        for(let i=0;i<15;i++)h+=`<div class="grid-card">${cCard(products[(i+90)%products.length],v2[i%v2.length],false,false)}</div>`;
        for(let i=0;i<15;i++)h+=`<div class="grid-card">${cCard(products[(i+35)%products.length],v1[i%v1.length],false,false)}</div>`;
        document.getElementById('zone3Grid').innerHTML=h;
    </script>
    
    <!-- Script de coloration des icônes du footer -->
    <script src="assets/js/footer-icons-color.js"></script>
    
    <!-- Script de compteur de visiteurs en temps réel -->
    <script src="assets/js/visitor-counter.js"></script>
</body>
</html>