<!-- DEBUG Artisan Serge:  --><!-- DEBUG Pays avec artisans: Array
(
    [0] => Array
        (
            [id_pays] => 27
            [nom_pays] => Afrique du Sud
            [drapeau] => assets/uploads/flags/flag_za_1768151426.png
            [code_pays] => ZA
            [artisans_count] => 0
        )

    [1] => Array
        (
            [id_pays] => 34
            [nom_pays] => Algérie
            [drapeau] => assets/uploads/flags/flag_dz_1768208306.png
            [code_pays] => DZ
            [artisans_count] => 0
        )

    [2] => Array
        (
            [id_pays] => 35
            [nom_pays] => Allemagne
            [drapeau] => assets/uploads/flags/flag_de_1768208864.png
            [code_pays] => DE
            [artisans_count] => 0
        )

    [3] => Array
        (
            [id_pays] => 8
            [nom_pays] => Belgique
            [drapeau] => assets/uploads/flags/flag_be_1763180851.png
            [code_pays] => BE
            [artisans_count] => 0
        )

    [4] => Array
        (
            [id_pays] => 5
            [nom_pays] => Bénin
            [drapeau] => assets/uploads/flags/flag_bj_1762441997.png
            [code_pays] => BJ
            [artisans_count] => 2
        )

    [5] => Array
        (
            [id_pays] => 13
            [nom_pays] => Burkina Faso
            [drapeau] => assets/uploads/flags/flag_bf_1768144815.png
            [code_pays] => BF
            [artisans_count] => 0
        )

    [6] => Array
        (
            [id_pays] => 24
            [nom_pays] => Burundi
            [drapeau] => assets/uploads/flags/flag_bi_1768148625.png
            [code_pays] => BI
            [artisans_count] => 0
        )

    [7] => Array
        (
            [id_pays] => 7
            [nom_pays] => Cameroun
            [drapeau] => assets/uploads/flags/flag_cm_1763180551.png
            [code_pays] => CM
            [artisans_count] => 4
        )

    [8] => Array
        (
            [id_pays] => 17
            [nom_pays] => Cap-Vert
            [drapeau] => assets/uploads/flags/flag_cpv_1768146789.png
            [code_pays] => CPV
            [artisans_count] => 0
        )

    [9] => Array
        (
            [id_pays] => 1
            [nom_pays] => Congo
            [drapeau] => assets/uploads/flags/flag_cg_1762442085.png
            [code_pays] => CG
            [artisans_count] => 12
        )

    [10] => Array
        (
            [id_pays] => 3
            [nom_pays] => Côte d'Ivoire
            [drapeau] => assets/uploads/flags/flag_ci_1762586056.png
            [code_pays] => CI
            [artisans_count] => 14
        )

    [11] => Array
        (
            [id_pays] => 9
            [nom_pays] => Espagne
            [drapeau] => assets/uploads/flags/flag_es_1763181111.png
            [code_pays] => ES
            [artisans_count] => 0
        )

    [12] => Array
        (
            [id_pays] => 4
            [nom_pays] => France
            [drapeau] => assets/uploads/flags/flag_fr_1762563332.png
            [code_pays] => FR
            [artisans_count] => 6
        )

    [13] => Array
        (
            [id_pays] => 6
            [nom_pays] => Gabon
            [drapeau] => assets/uploads/flags/flag_ga_1762562734.png
            [code_pays] => GA
            [artisans_count] => 0
        )

    [14] => Array
        (
            [id_pays] => 18
            [nom_pays] => Gambie
            [drapeau] => assets/uploads/flags/flag_gm_1768147002.png
            [code_pays] => GM
            [artisans_count] => 0
        )

    [15] => Array
        (
            [id_pays] => 19
            [nom_pays] => Ghana
            [drapeau] => assets/uploads/flags/flag_gh_1768147203.png
            [code_pays] => GH
            [artisans_count] => 0
        )

    [16] => Array
        (
            [id_pays] => 16
            [nom_pays] => Guinée
            [drapeau] => assets/uploads/flags/flag_gn_1768146115.png
            [code_pays] => GN
            [artisans_count] => 0
        )

    [17] => Array
        (
            [id_pays] => 20
            [nom_pays] => Guinée-Bissau
            [drapeau] => assets/uploads/flags/flag_gw_1768147777.png
            [code_pays] => GW
            [artisans_count] => 0
        )

    [18] => Array
        (
            [id_pays] => 30
            [nom_pays] => Ile Maurice
            [drapeau] => assets/uploads/flags/flag_mu_1768152140.png
            [code_pays] => MU
            [artisans_count] => 0
        )

    [19] => Array
        (
            [id_pays] => 10
            [nom_pays] => Italie
            [drapeau] => assets/uploads/flags/flag_it_1763180987.png
            [code_pays] => IT
            [artisans_count] => 0
        )

    [20] => Array
        (
            [id_pays] => 28
            [nom_pays] => Madagascar
            [drapeau] => assets/uploads/flags/flag_mg_1768151616.png
            [code_pays] => MG
            [artisans_count] => 0
        )

    [21] => Array
        (
            [id_pays] => 14
            [nom_pays] => Mali
            [drapeau] => assets/uploads/flags/flag_ml_1768145565.jpg
            [code_pays] => ML
            [artisans_count] => 0
        )

    [22] => Array
        (
            [id_pays] => 32
            [nom_pays] => Maroc
            [drapeau] => assets/uploads/flags/flag_ma_1768207328.png
            [code_pays] => MA
            [artisans_count] => 0
        )

    [23] => Array
        (
            [id_pays] => 21
            [nom_pays] => Mauritanie
            [drapeau] => assets/uploads/flags/flag_mr_1768147978.png
            [code_pays] => MR
            [artisans_count] => 0
        )

    [24] => Array
        (
            [id_pays] => 15
            [nom_pays] => Niger
            [drapeau] => assets/uploads/flags/flag_ne_1768145819.png
            [code_pays] => NE
            [artisans_count] => 0
        )

    [25] => Array
        (
            [id_pays] => 22
            [nom_pays] => Nigeria
            [drapeau] => assets/uploads/flags/flag_ng_1768148163.png
            [code_pays] => NG
            [artisans_count] => 0
        )

    [26] => Array
        (
            [id_pays] => 2
            [nom_pays] => RD Congo
            [drapeau] => assets/uploads/flags/flag_cd_1762562601.png
            [code_pays] => CD
            [artisans_count] => 5
        )

    [27] => Array
        (
            [id_pays] => 25
            [nom_pays] => République centrafricaine
            [drapeau] => assets/uploads/flags/flag_cf_1768148880.png
            [code_pays] => CF
            [artisans_count] => 0
        )

    [28] => Array
        (
            [id_pays] => 12
            [nom_pays] => Sénégal
            [drapeau] => assets/uploads/flags/flag_sn_1768143813.png
            [code_pays] => SN
            [artisans_count] => 0
        )

    [29] => Array
        (
            [id_pays] => 23
            [nom_pays] => Sierra Leone
            [drapeau] => assets/uploads/flags/flag_sl_1768148382.png
            [code_pays] => SL
            [artisans_count] => 0
        )

    [30] => Array
        (
            [id_pays] => 31
            [nom_pays] => Soudan
            [drapeau] => assets/uploads/flags/flag_sd_1768206618.png
            [code_pays] => SD
            [artisans_count] => 0
        )

    [31] => Array
        (
            [id_pays] => 36
            [nom_pays] => Suisse
            [drapeau] => assets/uploads/flags/flag_ch_1768211027.png
            [code_pays] => CH
            [artisans_count] => 0
        )

    [32] => Array
        (
            [id_pays] => 26
            [nom_pays] => Tchad
            [drapeau] => assets/uploads/flags/flag_td_1768149046.png
            [code_pays] => TD
            [artisans_count] => 0
        )

    [33] => Array
        (
            [id_pays] => 11
            [nom_pays] => Togo
            [drapeau] => assets/uploads/flags/flag_tg_1768142980.png
            [code_pays] => TG
            [artisans_count] => 0
        )

    [34] => Array
        (
            [id_pays] => 33
            [nom_pays] => Tunisie
            [drapeau] => assets/uploads/flags/flag_tn_1768207810.png
            [code_pays] => TN
            [artisans_count] => 0
        )

    [35] => Array
        (
            [id_pays] => 29
            [nom_pays] => Zimbabwe
            [drapeau] => assets/uploads/flags/flag_zw_1768151790.png
            [code_pays] => ZW
            [artisans_count] => 0
        )

)
 -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accueil - Natia Marketplace</title>
    <meta name="current-language" content="fr">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/artisans.css">
    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="NATIA" />
    <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="6b35f0d9-2dd9-404c-94d6-6f56f894151b" data-blockingmode="auto" type="text/javascript"></script>
    <link rel="manifest" href="site.webmanifest" />
    <!-- CSRF Token pour les requêtes AJAX -->
    <meta name="csrf-token" content="2cc196e7f8101809fdf40c2f14b1a55ee712b6140adf34383a796e2f0831bbfb">
</head>
<body>
    <!-- Navigation -->
    
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top custom-navbar">
    <div class="container">
        <!-- Logo -->
        <a class="navbar-brand" href="index.php">
            <img src="assets/images/logo-natia.png" height="60" alt="Natia" class="logo-img">
        </a>

        <!-- Menu desktop -->
        <div class="navbar-desktop d-none d-lg-flex">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="index.php">
                        Accueil                    </a>
                </li>
                
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        Circuits <i class="fas fa-chevron-down ms-1"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="circuits.php">Tous les circuits</a></li>
                        <li><a class="dropdown-item" href="circuits.php?category=popular">Circuits populaires</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link " href="artisans.php">
                        Artisans                    </a>
                </li>
                
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        produits <i class="fas fa-chevron-down ms-1"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="products.php">Tous les produits</a></li>
                        <li><a class="dropdown-item" href="categories.php">Par catégorie</a></li>
                    </ul>
                </li>
            </ul>

            <!-- Actions droite desktop -->
            <div class="navbar-actions">
                <!-- Language Selector -->
                <div class="dropdown me-3">
                    <a class="nav-link dropdown-toggle language-selector" href="#" id="languageDropdown" 
                       role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-globe me-1"></i>
                        FR                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
                        <li><a class="dropdown-item language-simple" href="#" data-lang="fr">🇫🇷 Français</a></li>
                        <li><a class="dropdown-item language-simple" href="#" data-lang="en">🇬🇧 English</a></li>
                        <li><a class="dropdown-item language-simple" href="#" data-lang="es">🇪🇸 Español</a></li>
                        <li><a class="dropdown-item language-simple" href="#" data-lang="it">🇮🇹 Italiano</a></li>
                        <li><a class="dropdown-item language-simple" href="#" data-lang="de">🇩🇪 Deutsch</a></li>
                    </ul>
                </div>

                <!-- Panier -->
                <a href="cart.php" class="nav-link position-relative cart-link me-3">
                    <i class="fas fa-shopping-cart"></i>
                                    </a>

                                    <!-- Menu visiteur -->
                    <div class="d-flex gap-2">
                        <a href="#" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#loginModal">
                            <i class="fas fa-sign-in-alt me-1"></i>Connexion                        </a>
                        <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#registerModal">
                            <i class="fas fa-user-plus me-1"></i>S'inscrire                        </a>
                    </div>
                            </div>
        </div>

        <!-- Bouton hamburger mobile -->
        <button class="navbar-toggler mobile-menu-toggle d-lg-none" type="button" 
                aria-label="Toggle menu" id="mobileMenuToggle">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <!-- Menu mobile -->
    <div class="navbar-mobile d-lg-none" id="navbarMobile">
        <div class="mobile-menu-header">
            <div class="mobile-logo">
                <img src="assets/images/logo-natia.png" height="40" alt="Natia">
            </div>
            <button class="mobile-close-btn" id="mobileCloseBtn" aria-label="Close menu">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="mobile-menu-content">
            <ul class="mobile-nav-menu">
                <li>
                    <a class="mobile-nav-link active" href="index.php">
                        <i class="fas fa-home me-3"></i>Accueil                    </a>
                </li>
                
                <li class="mobile-nav-dropdown">
                    <a class="mobile-nav-link" href="circuits.php">
                        <i class="fas fa-route me-3"></i>Circuits                    </a>
                    <ul class="mobile-dropdown-menu">
                        <li><a href="circuits.php">Tous les circuits</a></li>
                        <li><a href="circuits.php?category=popular">Circuits populaires</a></li>
                    </ul>
                </li>
                
                <li>
                    <a class="mobile-nav-link " href="artisans.php">
                        <i class="fas fa-users me-3"></i>Artisans                    </a>
                </li>
                
                <li class="mobile-nav-dropdown">
                    <a class="mobile-nav-link" href="products.php">
                        <i class="fas fa-box me-3"></i>produits                    </a>
                    <ul class="mobile-dropdown-menu">
                        <li><a href="products.php">Tous les produits</a></li>
                        <li><a href="categories.php">Par catégorie</a></li>
                    </ul>
                </li>

                <!-- Panier mobile -->
                <li>
                    <a class="mobile-nav-link" href="cart.php">
                        <i class="fas fa-shopping-cart me-3"></i>Panier                                            </a>
                </li>
            </ul>

            <!-- Section utilisateur mobile -->
            <div class="mobile-user-section">
                                    <div class="mobile-auth-buttons">
                        <a href="#" class="btn btn-outline-primary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#loginModal">
                            <i class="fas fa-sign-in-alt me-2"></i>Connexion                        </a>
                        <a href="#" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#registerModal">
                            <i class="fas fa-user-plus me-2"></i>S'inscrire                        </a>
                    </div>
                            </div>

            <!-- Language Selector mobile -->
            <div class="mobile-language-section">
                <h6 class="mobile-section-title">Langue</h6>
                <div class="mobile-language-buttons">
                    <a class="mobile-language-btn language-simple active" 
                       href="#" data-lang="fr">🇫🇷 Français</a>
                    <a class="mobile-language-btn language-simple " 
                       href="#" data-lang="en">🇬🇧 English</a>
                    <a class="mobile-language-btn language-simple " 
                       href="#" data-lang="es">🇪🇸 Español</a>
                    <a class="mobile-language-btn language-simple " 
                       href="#" data-lang="it">🇮🇹 Italiano</a>
                    <a class="mobile-language-btn language-simple " 
                       href="#" data-lang="de">🇩🇪 Deutsch</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Overlay mobile -->
    <div class="mobile-overlay" id="mobileOverlay"></div>
</nav>

<style>
/* Styles pour le menu Natia inspiré de CO2FRET */
.custom-navbar {
    background: #fff !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.logo-img {
    height: 60px;
    transition: height 0.3s ease;
}

/* Desktop styles */
.navbar-desktop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-desktop .navbar-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-desktop .nav-link {
    color: #333;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.navbar-desktop .nav-link:hover,
.navbar-desktop .nav-link.active {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-selector {
    cursor: pointer;
}

.cart-link {
    font-size: 1.2rem;
    color: #333;
    transition: color 0.3s ease;
}

.cart-link:hover {
    color: #0d6efd;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: #333;
}

.user-menu-trigger:hover {
    background: rgba(13, 110, 253, 0.1);
}

/* Mobile styles */
.mobile-menu-toggle {
    border: none;
    background: none;
    padding: 0.5rem;
    font-size: 1.5rem;
}

.navbar-mobile {
    position: fixed;
    top: 0;
    left: -100%;
    width: 320px;
    height: 100vh;
    background: white;
    z-index: 1002;
    transition: left 0.3s ease;
    box-shadow: 2px 0 20px rgba(0,0,0,0.1);
    overflow-y: auto;
}

.navbar-mobile.active {
    left: 0;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.mobile-close-btn {
    border: none;
    background: none;
    font-size: 1.5rem;
    color: #666;
    padding: 0.5rem;
}

.mobile-menu-content {
    padding: 1rem 0;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.3s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: #f8f9fa;
    color: #0d6efd;
}

.mobile-nav-dropdown .mobile-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    display: none;
}

.mobile-nav-dropdown.active .mobile-dropdown-menu {
    display: block;
}

.mobile-dropdown-menu li a {
    display: block;
    padding: 0.75rem 1.5rem 0.75rem 3.5rem;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.mobile-dropdown-menu li a:hover {
    background: #e9ecef;
    color: #0d6efd;
}

.mobile-cart-badge {
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-left: auto;
}

/* Section utilisateur mobile */
.mobile-user-section {
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.mobile-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-avatar {
    font-size: 2.5rem;
    color: #0d6efd;
}

.user-details .user-name {
    font-weight: 600;
    color: #333;
}

.mobile-user-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-user-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #333;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.mobile-user-link:hover {
    background: #f8f9fa;
    color: #0d6efd;
}

.mobile-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Section langue mobile */
.mobile-language-section {
    padding: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.mobile-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.mobile-language-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-language-btn {
    display: block;
    padding: 0.75rem 1rem;
    color: #333;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.mobile-language-btn:hover,
.mobile-language-btn.active {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* Overlay mobile */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Responsive */
@media (max-width: 991.98px) {
    .logo-img {
        height: 50px;
    }
}

@media (max-width: 576px) {
    .logo-img {
        height: 40px;
    }
    
    .navbar-mobile {
        width: 280px;
    }
}

/* Empêcher le scroll quand le menu est ouvert */
body.menu-open {
    overflow: hidden;
}
</style>

<script>
// Mettre à jour le compteur de panier
document.addEventListener('DOMContentLoaded', function() {
    
    // Gestion du menu mobile
    const mobileMenuToggle = document.getElementById('mobileMenuToggle');
    const mobileCloseBtn = document.getElementById('mobileCloseBtn');
    const navbarMobile = document.getElementById('navbarMobile');
    const mobileOverlay = document.getElementById('mobileOverlay');
    const body = document.body;

    function openMobileMenu() {
        navbarMobile.classList.add('active');
        mobileOverlay.classList.add('active');
        body.classList.add('menu-open');
    }

    function closeMobileMenu() {
        navbarMobile.classList.remove('active');
        mobileOverlay.classList.remove('active');
        body.classList.remove('menu-open');
    }

    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', openMobileMenu);
    }

    if (mobileCloseBtn) {
        mobileCloseBtn.addEventListener('click', closeMobileMenu);
    }

    if (mobileOverlay) {
        mobileOverlay.addEventListener('click', closeMobileMenu);
    }

    // Gestion des dropdowns mobiles
    const mobileDropdowns = document.querySelectorAll('.mobile-nav-dropdown > .mobile-nav-link');
    mobileDropdowns.forEach(dropdown => {
        dropdown.addEventListener('click', function(e) {
            e.preventDefault();
            const parent = this.parentElement;
            parent.classList.toggle('active');
        });
    });

    // Fermer le menu en cliquant sur un lien
    const mobileLinks = document.querySelectorAll('.mobile-nav-link, .mobile-user-link, .mobile-language-btn');
    mobileLinks.forEach(link => {
        link.addEventListener('click', function() {
            if (!this.classList.contains('language-simple')) {
                closeMobileMenu();
            }
        });
    });

    // Gestion du changement de langue
    const languageButtons = document.querySelectorAll('.language-simple');
    languageButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const lang = this.getAttribute('data-lang');
            // Ici vous pouvez ajouter la logique pour changer la langue
            console.log('Changer la langue vers:', lang);
            // Exemple: window.location.href = '?lang=' + lang;
        });
    });

    // Fermer le menu avec la touche Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && navbarMobile.classList.contains('active')) {
            closeMobileMenu();
        }
    });
});
</script>
    <!-- Section Pays avec artisans -->
    <section id="countries" class="countries-section py-4 bg-white">
        <div class="container">
            <div class="text-center mb-4">
                <h2 class="section-title h3">Découvrez par pays</h2>
                <p class="section-subtitle text-muted">Explorez les artisans par pays</p>
            </div>
            
            <div class="row g-3">
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Afrique+du+Sud" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_za_1768151426.png" 
                                             alt="Afrique du Sud" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Afrique du Sud</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Alg%C3%A9rie" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_dz_1768208306.png" 
                                             alt="Algérie" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Algérie</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Allemagne" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_de_1768208864.png" 
                                             alt="Allemagne" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Allemagne</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Belgique" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_be_1763180851.png" 
                                             alt="Belgique" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Belgique</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=B%C3%A9nin" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_bj_1762441997.png" 
                                             alt="Bénin" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Bénin</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        2 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Burkina+Faso" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_bf_1768144815.png" 
                                             alt="Burkina Faso" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Burkina Faso</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Burundi" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_bi_1768148625.png" 
                                             alt="Burundi" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Burundi</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Cameroun" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_cm_1763180551.png" 
                                             alt="Cameroun" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Cameroun</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        4 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Cap-Vert" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_cpv_1768146789.png" 
                                             alt="Cap-Vert" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Cap-Vert</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Congo" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_cg_1762442085.png" 
                                             alt="Congo" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Congo</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        12 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=C%C3%B4te+d%27Ivoire" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_ci_1762586056.png" 
                                             alt="Côte d&#039;Ivoire" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Côte d&#039;Ivoire</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        14 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Espagne" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_es_1763181111.png" 
                                             alt="Espagne" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Espagne</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=France" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_fr_1762563332.png" 
                                             alt="France" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">France</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        6 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Gabon" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_ga_1762562734.png" 
                                             alt="Gabon" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Gabon</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Gambie" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_gm_1768147002.png" 
                                             alt="Gambie" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Gambie</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Ghana" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_gh_1768147203.png" 
                                             alt="Ghana" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Ghana</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Guin%C3%A9e" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_gn_1768146115.png" 
                                             alt="Guinée" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Guinée</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Guin%C3%A9e-Bissau" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_gw_1768147777.png" 
                                             alt="Guinée-Bissau" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Guinée-Bissau</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Ile+Maurice" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_mu_1768152140.png" 
                                             alt="Ile Maurice" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Ile Maurice</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Italie" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_it_1763180987.png" 
                                             alt="Italie" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Italie</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Madagascar" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_mg_1768151616.png" 
                                             alt="Madagascar" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Madagascar</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Mali" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_ml_1768145565.jpg" 
                                             alt="Mali" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Mali</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Maroc" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_ma_1768207328.png" 
                                             alt="Maroc" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Maroc</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Mauritanie" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_mr_1768147978.png" 
                                             alt="Mauritanie" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Mauritanie</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Niger" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_ne_1768145819.png" 
                                             alt="Niger" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Niger</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Nigeria" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_ng_1768148163.png" 
                                             alt="Nigeria" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Nigeria</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=RD+Congo" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_cd_1762562601.png" 
                                             alt="RD Congo" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">RD Congo</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        5 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=R%C3%A9publique+centrafricaine" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_cf_1768148880.png" 
                                             alt="République centrafricaine" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">République centrafricaine</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=S%C3%A9n%C3%A9gal" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_sn_1768143813.png" 
                                             alt="Sénégal" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Sénégal</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Sierra+Leone" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_sl_1768148382.png" 
                                             alt="Sierra Leone" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Sierra Leone</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Soudan" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_sd_1768206618.png" 
                                             alt="Soudan" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Soudan</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Suisse" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_ch_1768211027.png" 
                                             alt="Suisse" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Suisse</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Tchad" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_td_1768149046.png" 
                                             alt="Tchad" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Tchad</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Togo" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_tg_1768142980.png" 
                                             alt="Togo" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Togo</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Tunisie" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_tn_1768207810.png" 
                                             alt="Tunisie" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Tunisie</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="products.php?country=Zimbabwe" class="country-card text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="card-body text-center p-3">
                                <div class="country-flag mb-2">
                                                                            <img src="assets/uploads/flags/flag_zw_1768151790.png" 
                                             alt="Zimbabwe" 
                                             class="flag-img rounded">
                                                                    </div>
                                <h6 class="country-name mb-1">Zimbabwe</h6>
                                <div class="artisans-count">
                                    <small class="text-muted">
                                        <i class="fas fa-users me-1"></i>
                                        0 artisans                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                            </div>
            
            <!-- Supprimé car tous les pays sont affichés -->
        </div>
    </section>

    <!-- Hero Section -->
    <section id="home" class="hero-section">
        <div class="container">
            <div class="row align-items-center min-vh-100">
                <div class="col-lg-6">
                    <h1 class="hero-title">Découvrez l'Artisanat Authentique d'<span class="text-primary">Europe</span> et d'<span class="text-warning">Afrique</span></h1>
                    <p class="hero-subtitle">Plateforme multilingue connectant artisans et amateurs d'artisanat du monde entier. Une expérience d'achat sécurisée avec gestion logistique intégrée.</p>
                    
                    <div class="hero-buttons">
                        <a href="#products" class="btn btn-primary btn-lg me-3">
                            <i class="fas fa-search me-2"></i>Explorer les Produits                        </a>
                        <a href="#" class="btn btn-outline-light btn-lg" data-bs-toggle="modal" data-bs-target="#registerModal">
                            <i class="fas fa-store me-2"></i>Devenir Artisan                        </a>
                    </div>

                    <div class="hero-stats mt-5">
                        <div class="row">
                            <div class="col-4">
                                <h3 class="stat-number">63+</h3>
                                <p class="stat-label">Artisans</p>
                            </div>
                            <div class="col-4">
                                <h3 class="stat-number">11+</h3>
                                <p class="stat-label">Nb produits</p>
                            </div>
                            <div class="col-4">
                                <h3 class="stat-number">36+</h3>
                                <p class="stat-label">Pays</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <!-- Slider des derniers articles -->
                    <div class="hero-slider-container">
                        <div class="slider-header">
                            <h3 class="slider-title">
                                <i class="fas fa-fire me-2"></i>Nouveautés                            </h3>
                            <div class="slider-controls">
                                <button class="slider-btn prev-btn">
                                    <i class="fas fa-chevron-left"></i>
                                </button>
                                <button class="slider-btn next-btn">
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="products-slider">
                            <div class="slider-track" id="sliderTrack">
                                                                <div class="product-slide active" data-slide="0">
                                    <span class="product-badge">Nouveau</span>
                                    <div class="product-image">
                                                                                    <img src="uploads/products/Capture_d_____cran_2026-02-05_125415_20260226201250_d7984cff.jpg" alt="Tapis Rond Harmonie" class="img-fluid">
                                                                            </div>
                                    <div class="product-info">
                                        <h4>Tapis Rond Harmonie</h4>
                                        <p class="product-artisan">Par Axelle D_sign • Côte d'Ivoire</p>
                                        <div class="rating mb-2">
                                            <i class="fas fa-star"></i> 4.8                                            <span class="text-muted ms-2">Decoration</span>
                                        </div>
                                        <div class="product-price">155,00€</div>
                                        <div class="product-actions">
                                            <a href="product-details.php?id=12" class="btn btn-primary btn-sm w-100">
                                                <i class="fas fa-eye me-1"></i>Voir                                            </a>
                                        </div>
                                    </div>
                                </div>
                                                                <div class="product-slide " data-slide="1">
                                    <span class="product-badge">Nouveau</span>
                                    <div class="product-image">
                                                                                    <img src="uploads/products/1000003823_20260128100310_9f694c18.jpg" alt="Combatix " class="img-fluid">
                                                                            </div>
                                    <div class="product-info">
                                        <h4>Combatix </h4>
                                        <p class="product-artisan">Par LENVOL DE L&#039;AIGLE • Bénin</p>
                                        <div class="rating mb-2">
                                            <i class="fas fa-star"></i> 4.8                                            <span class="text-muted ms-2">Autres</span>
                                        </div>
                                        <div class="product-price">4,00€</div>
                                        <div class="product-actions">
                                            <a href="product-details.php?id=11" class="btn btn-primary btn-sm w-100">
                                                <i class="fas fa-eye me-1"></i>Voir                                            </a>
                                        </div>
                                    </div>
                                </div>
                                                                <div class="product-slide " data-slide="2">
                                    <span class="product-badge">Nouveau</span>
                                    <div class="product-image">
                                                                                    <img src="uploads/products/1000155180_20260121170053_94f78c54.jpg" alt="Bôl union" class="img-fluid">
                                                                            </div>
                                    <div class="product-info">
                                        <h4>Bôl union</h4>
                                        <p class="product-artisan">Par cocotier 3 • Côte d'Ivoire</p>
                                        <div class="rating mb-2">
                                            <i class="fas fa-star"></i> 4.8                                            <span class="text-muted ms-2">Art</span>
                                        </div>
                                        <div class="product-price">20,00€</div>
                                        <div class="product-actions">
                                            <a href="product-details.php?id=10" class="btn btn-primary btn-sm w-100">
                                                <i class="fas fa-eye me-1"></i>Voir                                            </a>
                                        </div>
                                    </div>
                                </div>
                                                                <div class="product-slide " data-slide="3">
                                    <span class="product-badge">Nouveau</span>
                                    <div class="product-image">
                                                                                    <img src="uploads/products/WhatsApp_Image_2026-01-21_at_14_06_34__1__20260121164331_33fb94fb.jpeg" alt="Caraphe " class="img-fluid">
                                                                            </div>
                                    <div class="product-info">
                                        <h4>Caraphe </h4>
                                        <p class="product-artisan">Par CHEZ KONAN • Côte d'Ivoire</p>
                                        <div class="rating mb-2">
                                            <i class="fas fa-star"></i> 4.8                                            <span class="text-muted ms-2">Decoration</span>
                                        </div>
                                        <div class="product-price">25,00€</div>
                                        <div class="product-actions">
                                            <a href="product-details.php?id=9" class="btn btn-primary btn-sm w-100">
                                                <i class="fas fa-eye me-1"></i>Voir                                            </a>
                                        </div>
                                    </div>
                                </div>
                                                                <div class="product-slide " data-slide="4">
                                    <span class="product-badge">Nouveau</span>
                                    <div class="product-image">
                                                                                    <img src="uploads/products/1000155160_20260121133546_311d28db.jpg" alt="Porte stylo en carte de côte d'ivoire " class="img-fluid">
                                                                            </div>
                                    <div class="product-info">
                                        <h4>Porte stylo en carte de côte d'ivoire </h4>
                                        <p class="product-artisan">Par cocotier 3 • Côte d'Ivoire</p>
                                        <div class="rating mb-2">
                                            <i class="fas fa-star"></i> 4.8                                            <span class="text-muted ms-2">Art</span>
                                        </div>
                                        <div class="product-price">20,00€</div>
                                        <div class="product-actions">
                                            <a href="product-details.php?id=7" class="btn btn-primary btn-sm w-100">
                                                <i class="fas fa-eye me-1"></i>Voir                                            </a>
                                        </div>
                                    </div>
                                </div>
                                                            </div>
                        </div>
                        
                        <div class="slider-indicators" id="sliderIndicators">
                                                            <button class="slider-indicator active" 
                                        data-slide="0" 
                                        onclick="goToSlide(0)"></button>
                                                            <button class="slider-indicator " 
                                        data-slide="1" 
                                        onclick="goToSlide(1)"></button>
                                                            <button class="slider-indicator " 
                                        data-slide="2" 
                                        onclick="goToSlide(2)"></button>
                                                            <button class="slider-indicator " 
                                        data-slide="3" 
                                        onclick="goToSlide(3)"></button>
                                                            <button class="slider-indicator " 
                                        data-slide="4" 
                                        onclick="goToSlide(4)"></button>
                                                    </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Catégories -->
    <section id="categories" class="categories-section py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title">Catégories d'Artisanat</h2>
                <p class="section-subtitle">Découvrez nos principales catégories d'artisanat</p>
            </div>
            
            <div class="row g-4">
                                <div class="col-md-4 col-6">
                    <div class="category-card text-center">
                        <div class="category-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <h5>Autre</h5>
                        <p>Autre</p>
                        <small class="text-muted">4 produits</small>
                    </div>
                </div>
                                <div class="col-md-4 col-6">
                    <div class="category-card text-center">
                        <div class="category-icon">
                            <i class="fas fa-home"></i>
                        </div>
                        <h5>Décoration</h5>
                        <p>Pour votre intérieur</p>
                        <small class="text-muted">3 produits</small>
                    </div>
                </div>
                                <div class="col-md-4 col-6">
                    <div class="category-card text-center">
                        <div class="category-icon">
                            <i class="fas fa-gem"></i>
                        </div>
                        <h5>Bijoux</h5>
                        <p>Créations uniques</p>
                        <small class="text-muted">2 produits</small>
                    </div>
                </div>
                                <div class="col-md-4 col-6">
                    <div class="category-card text-center">
                        <div class="category-icon">
                            <i class="fas fa-mask"></i>
                        </div>
                        <h5>Art</h5>
                        <p>Sculptures & Masques</p>
                        <small class="text-muted">2 produits</small>
                    </div>
                </div>
                            </div>
        </div>
    </section>

    <!-- Produits Populaires -->
    <section id="products" class="products-section py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title">Produits Populaires</h2>
                <p class="section-subtitle">Découvrez nos créations les plus appréciées</p>
            </div>
            
            <div class="row g-4">
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/Capture_d_____cran_2026-02-05_125415_20260226201250_d7984cff.jpg" alt="Tapis Rond Harmonie" class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="12">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>Tapis Rond Harmonie</h5>
                            <p class="product-artisan">Par Axelle D_sign</p>
                            <div class="product-meta">
                                <span class="product-price">155,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=12" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/1000003823_20260128100310_9f694c18.jpg" alt="Combatix " class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="11">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>Combatix </h5>
                            <p class="product-artisan">Par LENVOL DE L&#039;AIGLE</p>
                            <div class="product-meta">
                                <span class="product-price">4,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=11" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/1000155180_20260121170053_94f78c54.jpg" alt="Bôl union" class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="10">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>Bôl union</h5>
                            <p class="product-artisan">Par cocotier 3</p>
                            <div class="product-meta">
                                <span class="product-price">20,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=10" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/WhatsApp_Image_2026-01-21_at_14_06_34__1__20260121164331_33fb94fb.jpeg" alt="Caraphe " class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="9">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>Caraphe </h5>
                            <p class="product-artisan">Par CHEZ KONAN</p>
                            <div class="product-meta">
                                <span class="product-price">25,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=9" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/1000155160_20260121133546_311d28db.jpg" alt="Porte stylo en carte de côte d'ivoire " class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="7">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>Porte stylo en carte de côte d'ivoire </h5>
                            <p class="product-artisan">Par cocotier 3</p>
                            <div class="product-meta">
                                <span class="product-price">20,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=7" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/WhatsApp_Image_2026-01-17_at_12_20_27__1__20260117132114_f7c6fd97.jpeg" alt="pierre de volcan " class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="6">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>pierre de volcan </h5>
                            <p class="product-artisan">Par Gasi-ci</p>
                            <div class="product-meta">
                                <span class="product-price">25,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=6" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/WhatsApp_Image_2026-01-17_at_12_11_24__1__20260117131658_23dfcc23.jpeg" alt="oeil de tigre" class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="5">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>oeil de tigre</h5>
                            <p class="product-artisan">Par Gasi-ci</p>
                            <div class="product-meta">
                                <span class="product-price">18,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=5" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="product-card">
                        <div class="product-image">
                                                            <img src="uploads/products/il_1588xN_5144380811_2r4h_20260117083617_07885fd0.jpg" alt="Tableau kongo" class="img-fluid">
                                                        <div class="product-actions">
                                <button class="btn-wishlist" data-product-id="4">
                                    <i class="far fa-heart"></i>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h5>Tableau kongo</h5>
                            <p class="product-artisan">Par ETS ROSS</p>
                            <div class="product-meta">
                                <span class="product-price">200,00€</span>
                                <div class="rating">
                                    <i class="fas fa-star"></i> 4.8                                </div>
                            </div>
                            <div class="product-actions-buttons">
                                <a href="product-details.php?id=4" class="btn btn-outline-primary btn-sm">Voir détails</a>
                                                            </div>
                        </div>
                    </div>
                </div>
                            </div>
            
            <div class="text-center mt-5">
                <a href="products.php" class="btn btn-outline-primary">Voir tous les produits</a>
            </div>
        </div>
    </section>

    <!-- Artisans en Vedette -->
    <section id="artisans" class="artisans-section py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title">Artisans en Vedette</h2>
                <p class="section-subtitle">Rencontrez nos artisans talentueux</p>
            </div>
            
            <div class="row g-4">
                                <div class="col-lg-3 col-md-6">
                    <div class="artisan-card">
                        <div class="artisan-image">
                                                            <div class="artisan-image-placeholder">
                                    <i class="fas fa-user-circle"></i>
                                </div>
                                                    </div>
                        <div class="artisan-info">
                            <span class="artisan-country">Congo</span>
                            <h5>Atelier Mbemba</h5>
                            <p class="text-muted">Brazzaville</p>
                            <p><strong></strong></p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="artisan-rating">
                                    <i class="fas fa-star"></i> 0.0                                </div>
                                <small class="text-muted">0 produits</small>
                            </div>
                            <a href="artisan-profile.php?id=1" class="btn btn-outline-primary btn-sm w-100 mt-3">
                                Voir le profil                            </a>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="artisan-card">
                        <div class="artisan-image">
                                                            <div class="artisan-image-placeholder">
                                    <i class="fas fa-user-circle"></i>
                                </div>
                                                    </div>
                        <div class="artisan-info">
                            <span class="artisan-country">Congo</span>
                            <h5>Créations Loutete</h5>
                            <p class="text-muted">Pointe-Noire</p>
                            <p><strong></strong></p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="artisan-rating">
                                    <i class="fas fa-star"></i> 0.0                                </div>
                                <small class="text-muted">0 produits</small>
                            </div>
                            <a href="artisan-profile.php?id=2" class="btn btn-outline-primary btn-sm w-100 mt-3">
                                Voir le profil                            </a>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="artisan-card">
                        <div class="artisan-image">
                                                            <div class="artisan-image-placeholder">
                                    <i class="fas fa-user-circle"></i>
                                </div>
                                                    </div>
                        <div class="artisan-info">
                            <span class="artisan-country">France</span>
                            <h5>Bijoux Lefebvre</h5>
                            <p class="text-muted">Marseille</p>
                            <p><strong></strong></p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="artisan-rating">
                                    <i class="fas fa-star"></i> 0.0                                </div>
                                <small class="text-muted">0 produits</small>
                            </div>
                            <a href="artisan-profile.php?id=17" class="btn btn-outline-primary btn-sm w-100 mt-3">
                                Voir le profil                            </a>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="artisan-card">
                        <div class="artisan-image">
                                                            <div class="artisan-image-placeholder">
                                    <i class="fas fa-user-circle"></i>
                                </div>
                                                    </div>
                        <div class="artisan-info">
                            <span class="artisan-country">Cameroun</span>
                            <h5>Textiles Ngo</h5>
                            <p class="text-muted">Douala</p>
                            <p><strong></strong></p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="artisan-rating">
                                    <i class="fas fa-star"></i> 0.0                                </div>
                                <small class="text-muted">0 produits</small>
                            </div>
                            <a href="artisan-profile.php?id=24" class="btn btn-outline-primary btn-sm w-100 mt-3">
                                Voir le profil                            </a>
                        </div>
                    </div>
                </div>
                            </div>
        </div>
    </section>

    <!-- Comment ça marche -->
    <section class="how-it-works py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title">Comment ça marche</h2>
                <p class="section-subtitle">3 étapes simples pour acheter en toute confiance</p>
            </div>
            
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="step-card text-center">
                        <div class="step-number">1</div>
                        <i class="fas fa-search step-icon"></i>
                        <h4>Découvrez</h4>
                        <p>Parcourez les produits d'artisans vérifiés en Europe et Afrique</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="step-card text-center">
                        <div class="step-number">2</div>
                        <i class="fas fa-truck step-icon"></i>
                        <h4>Logistique</h4>
                        <p>Recevez des devis de logisticiens locaux pour l'expédition</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="step-card text-center">
                        <div class="step-number">3</div>
                        <i class="fas fa-box step-icon"></i>
                        <h4>Recevez</h4>
                        <p>Suivez votre commande et recevez des produits authentiques</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <!-- Footer -->
<footer class="footer bg-dark text-light py-5 mt-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-4">
                <h5><i class="fas fa-hands-helping me-2"></i>NATIA MARKETPLACE</h5>
                <p class="mt-3">Plateforme multilingue connectant artisans et amateurs d'artisanat du monde entier. Une expérience d'achat sécurisée avec gestion logistique intégrée.</p>
                <div class="social-links mt-3">
                    <a href="#" class="text-light me-3" title="Facebook">
                        <i class="fab fa-facebook fa-lg"></i>
                    </a>
                    <a href="#" class="text-light me-3" title="Instagram">
                        <i class="fab fa-instagram fa-lg"></i>
                    </a>
                    <a href="#" class="text-light me-3" title="Twitter">
                        <i class="fab fa-twitter fa-lg"></i>
                    </a>
                    <a href="#" class="text-light" title="LinkedIn">
                        <i class="fab fa-linkedin fa-lg"></i>
                    </a>
                </div>
            </div>
            
            <div class="col-lg-2 mb-4">
                <h6>Navigation</h6>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <a href="index.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>Accueil                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="artisans.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>Artisans                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="products.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>produits                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="categories.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>Catégories                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="col-lg-3 mb-4">
                <h6>À propos</h6>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <a href="about.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>Notre histoire                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="how-it-works.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>Comment ça marche                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="faq.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>FAQ                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="terms.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>CGU                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="privacy.php" class="text-light text-decoration-none">
                            <i class="fas fa-chevron-right me-1 small"></i>Confidentialité                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="col-lg-3 mb-4">
                <h6>Contacter le support</h6>
                <div class="contact-info">
                    <p class="mb-2">
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:contact@natia.com" class="text-light text-decoration-none">
                            contact@natia.com
                        </a>
                    </p>
                    <p class="mb-2">
                        <i class="fas fa-phone me-2"></i>
                        <a href="tel:+33123456789" class="text-light text-decoration-none">
                            +33 1 23 45 67 89
                        </a>
                    </p>
                    <p class="mb-3">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        <span class="text-light">123 Rue de l'Artisanat, 75001 Paris, France</span>
                    </p>
                </div>
                
                <div class="newsletter mt-4">
                    <h6>Newsletter</h6>
                    <p class="small text-muted">Recevez nos dernières nouveautés</p>
                    <form class="newsletter-form">
                        <div class="input-group">
                            <input type="email" class="form-control form-control-sm" placeholder="Votre email" required>
                            <button class="btn btn-primary btn-sm" type="submit">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <hr class="bg-light my-4">
        
        <div class="row align-items-center">
            <div class="col-md-6">
                <p class="mb-0">&copy; 2026 Natia Marketplace. Tous droits réservés</p>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="payment-methods">
                    <span class="text-muted me-2 small">Paiements sécurisés :</span>
                    <i class="fab fa-cc-visa me-2 text-light" title="Visa"></i>
                    <i class="fab fa-cc-mastercard me-2 text-light" title="Mastercard"></i>
                    <i class="fab fa-cc-paypal me-2 text-light" title="PayPal"></i>
                    <i class="fas fa-mobile-alt me-2 text-light" title="Mobile Money"></i>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<!-- Scripts personnalisés -->
<script src="http://natiamarket.com/assets/js/main.js"></script>


<!-- Initialisation des tooltips -->
<script>
    // Initialiser les tooltips Bootstrap
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
    
    // Gestion des messages flash
    </script>
</body>
</html>
    <!-- Modals d'Authentification -->
    <style>
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #8b5cf6;
    --secondary: #f59e0b;
    --success: #10b981;
    --info: #06b6d4;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark: #1f2937;
    --light: #f8fafc;
    --gray: #6b7280;
    --border-radius: 12px;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-secondary: linear-gradient(135deg, #f59e0b, #f97316);
}

.modal-header {
    background: var(--gradient-primary);
    color: white;
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    padding: 1.5rem;
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.modal-body {
    padding: 2rem;
}

.form-label {
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.input-group {
    border-radius: 8px;
    overflow: hidden;
}

.input-group-text {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border: 1px solid #e2e8f0;
    border-right: none;
    color: var(--primary);
    font-weight: 500;
}

.form-control {
    border: 1px solid #e2e8f0;
    border-left: none;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.1);
}

.btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: var(--gradient-primary);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}

.account-type-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.account-type-card .card {
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.account-type-card:hover .card {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
}

.account-type-card.selected .card {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
}

.account-type-card.selected .account-icon {
    color: var(--primary) !important;
}

.account-icon {
    transition: all 0.3s ease;
}

.is-valid {
    border-color: var(--success) !important;
}

.is-invalid {
    border-color: var(--danger) !important;
}

.email-available {
    color: var(--success);
    font-weight: 500;
}

.email-taken {
    color: var(--danger);
    font-weight: 500;
}

.btn-loading {
    position: relative;
    color: transparent;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.form-label.required:after {
    content: " *";
    color: var(--danger);
}

.service-countries-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
}
</style>

<!-- Modal de Connexion -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLabel">
                    <i class="fas fa-sign-in-alt me-2"></i>Connexion                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="loginForm" method="POST">
                    <input type="hidden" name="csrf_token" value="2cc196e7f8101809fdf40c2f14b1a55ee712b6140adf34383a796e2f0831bbfb">
                    
                    <div class="mb-3">
                        <label for="loginEmail" class="form-label">Email</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-envelope"></i>
                            </span>
                            <input type="email" class="form-control" id="loginEmail" name="email" required 
                                   placeholder="votre@email.com">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="loginPassword" class="form-label">Mot de passe</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" class="form-control" id="loginPassword" name="password" required 
                                   placeholder="Votre mot de passe">
                            <button type="button" class="btn btn-outline-secondary toggle-password" 
                                    data-target="loginPassword">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="rememberMe" name="remember_me">
                        <label class="form-check-label" for="rememberMe">Se souvenir de moi</label>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-sign-in-alt me-2"></i>Connexion                        </button>
                    </div>
                    
                    <div class="text-center mt-3">
                        <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#forgotPasswordModal">
                            Mot de passe oublié ?                        </a>
                    </div>
                </form>
                
                <div class="divider my-4">
                    <span class="divider-text">Ou connectez-vous avec</span>
                </div>
                
                <div class="row g-2">
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-danger w-100" onclick="loginWithGoogle()">
                            <i class="fab fa-google me-2"></i>Google
                        </button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-primary w-100" onclick="loginWithFacebook()">
                            <i class="fab fa-facebook me-2"></i>Facebook
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <span class="text-muted">Nouveau sur Natia ?</span>
                <a href="#" class="text-decoration-none ms-1" data-bs-toggle="modal" data-bs-target="#registerModal">
                    Créer un compte                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modal d'Inscription -->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="registerModalLabel">
                    <i class="fas fa-user-plus me-2"></i>Créer un compte                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="registerForm" method="POST">
                    <input type="hidden" name="csrf_token" value="2cc196e7f8101809fdf40c2f14b1a55ee712b6140adf34383a796e2f0831bbfb">
                    <input type="hidden" name="id_pays" id="id_pays" value="">
                    <input type="hidden" name="id_ville" id="id_ville" value="">
                    
                    <!-- Étape 1 : Type de compte -->
                    <div id="registerStep1">
                        <div class="text-center mb-4">
                            <h6>Choisissez votre type de compte</h6>
                            <p class="text-muted">Sélectionnez le type de compte qui correspond à vos besoins</p>
                        </div>
                        
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="account-type-card selected" data-account-type="client">
                                    <div class="card text-center h-100 border-primary">
                                        <div class="card-body">
                                            <div class="account-icon mb-3 text-primary">
                                                <i class="fas fa-shopping-bag fa-2x"></i>
                                            </div>
                                            <h6 class="card-title">Client</h6>
                                            <p class="card-text small text-muted">
                                                Achetez des produits artisanaux du monde entier                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="account-type-card" data-account-type="artisan">
                                    <div class="card text-center h-100">
                                        <div class="card-body">
                                            <div class="account-icon mb-3 text-warning">
                                                <i class="fas fa-hands fa-2x"></i>
                                            </div>
                                            <h6 class="card-title">Artisan</h6>
                                            <p class="card-text small text-muted">
                                                Vendez vos créations à une audience internationale                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="account-type-card" data-account-type="logisticien">
                                    <div class="card text-center h-100">
                                        <div class="card-body">
                                            <div class="account-icon mb-3 text-info">
                                                <i class="fas fa-truck fa-2x"></i>
                                            </div>
                                            <h6 class="card-title">Logisticien</h6>
                                            <p class="card-text small text-muted">
                                                Proposez vos services d'expédition aux artisans                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="account-type-card" data-account-type="assureur">
                                    <div class="card text-center h-100">
                                        <div class="card-body">
                                            <div class="account-icon mb-3 text-success">
                                                <i class="fas fa-shield-alt fa-2x"></i>
                                            </div>
                                            <h6 class="card-title">Assureur</h6>
                                            <p class="card-text small text-muted">
                                                Proposez des services d'assurance pour les produits artisanaux                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <input type="hidden" name="user_type" id="userType" value="client" required>
                        
                        <div class="d-grid mt-4">
                            <button type="button" class="btn btn-primary" id="nextStep1">
                                Suivant <i class="fas fa-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Étape 2 : Informations de base -->
                    <div id="registerStep2" style="display: none;">
                        <div class="text-center mb-4">
                            <h6>Informations personnelles</h6>
                            <p class="text-muted">Renseignez vos informations de base</p>
                        </div>
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="fullName" class="form-label">Nom complet *</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-user"></i>
                                    </span>
                                    <input type="text" class="form-control" id="fullName" name="full_name" required 
                                           placeholder="Votre nom complet">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="registerEmail" class="form-label">Email *</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                    <input type="email" class="form-control" id="registerEmail" name="email" required 
                                           placeholder="votre@email.com">
                                </div>
                                <div class="form-text email-availability"></div>
                            </div>
                            <div class="col-md-6">
                                <label for="registerPassword" class="form-label">Mot de passe *</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" id="registerPassword" name="password" required 
                                           placeholder="Minimum 6 caractères">
                                    <button type="button" class="btn btn-outline-secondary toggle-password" 
                                            data-target="registerPassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="form-text">Le mot de passe doit contenir au moins 8 caractères avec des lettres majuscules, minuscules et des chiffres</div>
                            </div>
                            <div class="col-md-6">
                                <label for="confirmPassword" class="form-label">Confirmer le mot de passe *</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" id="confirmPassword" name="confirm_password" required 
                                           placeholder="Confirmez votre mot de passe">
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between mt-4">
                            <button type="button" class="btn btn-outline-secondary" id="prevStep2">
                                <i class="fas fa-arrow-left me-2"></i>Retour                            </button>
                            <button type="button" class="btn btn-primary" id="nextStep2">
                                Suivant <i class="fas fa-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Étape 3 : Informations spécifiques -->
                    <div id="registerStep3" style="display: none;">
                        <div class="text-center mb-4">
                            <h6 id="step3Title">Informations complémentaires</h6>
                            <p class="text-muted" id="step3Description">Complétez votre profil pour une meilleure expérience</p>
                        </div>
                        
                        <!-- Informations pour les artisans -->
                        <div id="artisanFields" style="display: none;">
    <div class="row g-3">
        <div class="col-md-6">
            <label for="businessName" class="form-label">Nom de l'entreprise/atelier *</label>
            <input type="text" class="form-control" id="businessName" name="business_name" 
                   placeholder="Nom de votre entreprise">
        </div>
        <div class="col-md-6">
            <label for="artisanCategory" class="form-label">Catégorie principale *</label>
            <select class="form-select" id="artisanCategory" name="category">
                <option value="">Choisir une catégorie</option>
                <option value="1">Bijoux</option>
                <option value="2">Textile</option>
                <option value="3">Art & Sculpture</option>
                <option value="4">Décoration</option>
                <option value="5">Poterie</option>
                <option value="6">Autre</option>
            </select>
        </div>
        <div class="col-md-6">
            <label for="yearsExperience" class="form-label">Années d'expérience</label>
            <input type="number" class="form-control" id="yearsExperience" name="years_experience" 
                   min="0" max="50" placeholder="0">
        </div>
		<!-- Dans la section des champs artisans - après years_experience -->
<div class="col-md-6">
    <label for="numeroCarte" class="form-label">Numéro de carte professionnelle</label>
    <input type="text" class="form-control" id="numeroCarte" name="numero_carte" 
           placeholder="Numéro de carte">
</div>

<div class="col-md-6">
    <label for="num_compte" class="form-label">N° de compte ou mobile money</label>
    <input type="text" class="form-control" id="num_compte" name="num_compte">
</div>
<div class="col-md-6">
    <label for="dateExpirationCarte" class="form-label">Date d'expiration</label>
    <input type="date" class="form-control" id="dateExpirationCarte" name="date_expiration_carte">
</div>


    </div>
</div>
                        
                        <!-- Dans la section des champs logisticiens - LIGNE ~270 -->
<!-- Dans la section des champs logisticiens - Remplacer cette section -->
<div id="logisticianFields" style="display: none;">
    <div class="row g-3">
        <div class="col-md-6">
            <label for="companyNameLogistician" class="form-label required">Nom de l'entreprise *</label>
            <input type="text" class="form-control" id="companyNameLogistician" name="company_name" required
                   placeholder="Nom de votre entreprise de logistique">
        </div>
        <div class="col-md-6">
            <label for="serviceCountries" class="form-label required">Pays desservis *</label>
            <select class="form-select" id="serviceCountries" name="service_countries[]" multiple required>
                <!-- Rempli dynamiquement par JavaScript -->
            </select>
            <div class="form-text">Maintenez Ctrl (ou Cmd) pour sélectionner plusieurs pays</div>
        </div>
    </div>
</div>

<!-- Dans la section des champs assureurs - LIGNE ~285 -->
<div id="assureurFields" style="display: none;">
    <div class="row g-3">
        <div class="col-md-6">
            <label for="companyNameAssureur" class="form-label">Nom de l'entreprise *</label>
            <input type="text" class="form-control" id="companyNameAssureur" name="company_name" 
                   placeholder="Nom de votre entreprise de logistique" >
        </div>
        <div class="col-md-6">
            <label for="licenseNumber" class="form-label">Numéro d'agrément *</label>
            <input type="text" class="form-control" id="licenseNumber" name="license_number" 
                   placeholder="Entrez votre numéro d'agrément" required>
        </div>
        <div class="col-md-6">
            <label for="insuranceTypes" class="form-label">Types d'assurance *</label>
            <select class="form-select" id="insuranceTypes" name="insurance_types[]" multiple required>
                <option value="transport">Assurance transport</option>
                <option value="responsabilite_civile">Responsabilité civile</option>
                <option value="tous_risques">Tous risques</option>
                <option value="autre">Autre type d'assurance</option>
            </select>
            <div class="form-text">Maintenez Ctrl (ou Cmd) pour sélectionner plusieurs pays</div>
        </div>
    </div>
</div>
                        
                        <!-- Informations communes -->
                        <div class="row g-3 mt-2">
                            <div class="col-md-6">
                                <label for="country" class="form-label">Pays *</label>
                                <select class="form-select" id="country" name="country" required>
                                    <option value="">Choisir un pays</option>
                                    <!-- Rempli dynamiquement par JavaScript -->
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="city" class="form-label">Ville *</label>
                                <select class="form-select" id="city" name="city" required>
                                    <option value="">Choisir une ville</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label for="address" class="form-label">Adresse</label>
                                <textarea class="form-control" id="address" name="address" rows="2" 
                                          placeholder="Votre adresse complète"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="phone" class="form-label">Téléphone *</label>
                                <div class="input-group">
                                    <span class="input-group-text" id="phonePrefix">+33</span>
                                    <input type="tel" class="form-control" id="phone" name="phone" required 
                                           placeholder="Votre numéro de téléphone"
                                           pattern="[0-9]{9,15}">
                                </div>
                                <div class="form-text" id="phoneHelp">Aide format numéro</div>
                            </div>
                        </div>
                        
                        <div class="form-check mt-3">
                            <input type="checkbox" class="form-check-input" id="acceptTerms" name="accept_terms" required>
                            <label class="form-check-label" for="acceptTerms">
                                J'accepte les <a href="terms.php" target="_blank">conditions d'utilisation</a> et la <a href="privacy.php" target="_blank">politique de confidentialité</a>                            </label>
                        </div>
                        
                        <div class="d-flex justify-content-between mt-4">
                            <button type="button" class="btn btn-outline-secondary" id="prevStep3">
                                <i class="fas fa-arrow-left me-2"></i>Retour                            </button>
                            <button type="submit" class="btn btn-success" id="submitRegister">
                                <i class="fas fa-check me-2"></i>Créer mon compte                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Mot de passe oublié -->
<div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="forgotPasswordModalLabel">
                    <i class="fas fa-key me-2"></i>Mot de passe oublié ?                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div id="forgotPasswordSuccess" class="alert alert-success d-none" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    <span id="forgotPasswordSuccessText"></span>
                </div>
                
                <div id="forgotPasswordError" class="alert alert-danger d-none" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <span id="forgotPasswordErrorText"></span>
                </div>
                
                <p class="text-muted mb-4">
                    Entrez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe.                </p>
                
                <form id="forgotPasswordForm">
                    <input type="hidden" name="csrf_token" id="forgotPasswordCsrfToken" value="2cc196e7f8101809fdf40c2f14b1a55ee712b6140adf34383a796e2f0831bbfb">
                    
                    <div class="mb-3">
                        <label for="forgotEmail" class="form-label">Email</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-envelope"></i>
                            </span>
                            <input type="email" class="form-control" id="forgotEmail" name="email" required 
                                   placeholder="votre@email.com">
                        </div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary" id="forgotPasswordSubmit">
                            <i class="fas fa-paper-plane me-2"></i>Envoyer le lien                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
// Variables globales pour stocker les données
let countriesData = {};
let citiesData = {};

// Charger les données des pays et villes
function loadCountriesCities() {
    fetch('api/auth.php?action=get_countries_cities')
        .then(response => {
            if (!response.ok) {
                throw new Error('Erreur réseau: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                countriesData = data.data.pays || {};
                citiesData = data.data.villes || {};
                populateCountriesSelect();
                populateServiceCountries();
                console.log('Données pays/villes chargées avec succès');
            } else {
                console.error('Erreur chargement données:', data.error);
                showError('Erreur lors du chargement des données');
            }
        })
        .catch(error => {
            console.error('Erreur réseau:', error);
            showError('Erreur de connexion au serveur');
        });
}

// Remplir le sélecteur de pays
function populateCountriesSelect() {
    const countrySelect = document.getElementById('country');
    if (!countrySelect) return;
    
    countrySelect.innerHTML = '<option value="">Choisir un pays</option>';
    
    if (Object.keys(countriesData).length === 0) {
        console.warn('Aucune donnée pays disponible');
        return;
    }
    
    Object.values(countriesData).forEach(country => {
        if (country && country.id_pays && country.nom_pays) {
            const option = document.createElement('option');
            option.value = country.id_pays;
            option.textContent = country.nom_pays;
            option.dataset.prefix = country.indicatif_telephone || '+33';
            countrySelect.appendChild(option);
        }
    });
}

// Remplir le sélecteur de pays desservis (pour logisticiens)
function populateServiceCountries() {
    const serviceCountriesSelect = document.getElementById('serviceCountries');
    if (!serviceCountriesSelect) return;
    
    serviceCountriesSelect.innerHTML = '';
    
    Object.values(countriesData).forEach(country => {
        if (country && country.id_pays && country.nom_pays) {
            const option = document.createElement('option');
            option.value = country.id_pays;
            option.textContent = country.nom_pays;
            serviceCountriesSelect.appendChild(option);
        }
    });
}

// Mettre à jour les villes en fonction du pays sélectionné
function updateCities(countryId) {
    const citySelect = document.getElementById('city');
    if (!citySelect) return;
    
    citySelect.innerHTML = '<option value="">Choisir une ville</option>';
    citySelect.disabled = true;
    
    if (countryId && citiesData[countryId]) {
        citiesData[countryId].forEach(city => {
            if (city && city.id_ville && city.nom_ville) {
                const option = document.createElement('option');
                option.value = city.id_ville;
                option.textContent = city.nom_ville;
                citySelect.appendChild(option);
            }
        });
        citySelect.disabled = false;
    }
    
    // Réinitialiser les IDs cachés
    document.getElementById('id_ville').value = '';
}

// Fonction pour fermer proprement tous les modals
function closeAllModals() {
    try {
        const modals = document.querySelectorAll('.modal');
        modals.forEach(modal => {
            if (modal.classList.contains('show')) {
                const modalInstance = bootstrap.Modal.getInstance(modal);
                if (modalInstance) {
                    modalInstance.hide();
                }
            }
        });
        
        console.log('Tous les modals fermés avec succès');
    } catch (error) {
        console.error('Erreur lors de la fermeture des modals:', error);
    }
}

// Fonction utilitaire pour afficher les erreurs
function showError(message) {
    console.error('Erreur:', message);
    if (typeof Swal !== 'undefined') {
        Swal.fire('Erreur', message, 'error');
    } else {
        alert('Erreur: ' + message);
    }
}

// Fonction utilitaire pour afficher les succès
function showSuccess(message) {
    if (typeof Swal !== 'undefined') {
        return Swal.fire('Succès', message, 'success');
    } else {
        alert('Succès: ' + message);
        return Promise.resolve();
    }
}

// Initialisation
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initialisation des modals d\'authentification...');
    
    // Charger les données des pays et villes
    loadCountriesCities();
    
    // Initialiser les composants
    initAccountTypeSelection();
    initRegistrationSteps();
    initPasswordToggle();
    initFormSubmissions();
    initModalReset();
    initCountryCitySystem();
    initEmailValidation();
});

// Système pays/ville
function initCountryCitySystem() {
    const countrySelect = document.getElementById('country');
    const citySelect = document.getElementById('city');
    
    if (!countrySelect || !citySelect) {
        console.warn('Éléments pays/ville non trouvés');
        return;
    }
    
    countrySelect.addEventListener('change', function() {
        const selectedCountryId = this.value;
        const selectedOption = this.options[this.selectedIndex];
        
        // Mettre à jour les IDs cachés
        document.getElementById('id_pays').value = selectedCountryId;
        
        // Mettre à jour le préfixe téléphonique
        const phonePrefix = document.getElementById('phonePrefix');
        if (phonePrefix && selectedOption && selectedOption.dataset.prefix) {
            phonePrefix.textContent = selectedOption.dataset.prefix;
        }
        
        if (selectedCountryId) {
            updateCities(selectedCountryId);
        } else {
            citySelect.innerHTML = '<option value="">Choisir une ville</option>';
            citySelect.disabled = true;
        }
    });

    citySelect.addEventListener('change', function() {
        const selectedCityId = this.value;
        document.getElementById('id_ville').value = selectedCityId;
    });
}

function validatePhoneNumber(phone, countryId, showAlert = false) {
    const phoneInput = document.getElementById('phone');
    if (!phoneInput) return false;
    
    const cleanPhone = phone.replace(/[\s\-\(\)\.]/g, '');
    
    // Validation basique
    if (cleanPhone && !/^[0-9]{9,15}$/.test(cleanPhone)) {
        phoneInput.classList.add('is-invalid');
        phoneInput.classList.remove('is-valid');
        
        if (showAlert) {
            showError('Le numéro doit contenir entre 9 et 15 chiffres.');
        }
        return false;
    } else if (cleanPhone) {
        phoneInput.classList.remove('is-invalid');
        phoneInput.classList.add('is-valid');
        return true;
    } else {
        phoneInput.classList.remove('is-invalid', 'is-valid');
        return false;
    }
}

function initAccountTypeSelection() {
    const userTypeCards = document.querySelectorAll('.account-type-card');
    const userTypeInput = document.getElementById('userType');
    
    if (userTypeCards.length === 0 || !userTypeInput) {
        console.warn('Éléments de sélection de type de compte non trouvés');
        return;
    }
    
    userTypeCards.forEach(card => {
        card.addEventListener('click', function() {
            userTypeCards.forEach(c => {
                c.classList.remove('selected');
                const cardElement = c.querySelector('.card');
                if (cardElement) {
                    cardElement.classList.remove('border-primary');
                }
            });
            
            this.classList.add('selected');
            const selectedCard = this.querySelector('.card');
            if (selectedCard) {
                selectedCard.classList.add('border-primary');
            }
            userTypeInput.value = this.dataset.accountType;
        });
    });
}

function initRegistrationSteps() {
    const nextStep1 = document.getElementById('nextStep1');
    const nextStep2 = document.getElementById('nextStep2');
    const prevStep2 = document.getElementById('prevStep2');
    const prevStep3 = document.getElementById('prevStep3');
    
    if (!nextStep1 || !nextStep2 || !prevStep2 || !prevStep3) {
        console.warn('Boutons de navigation des étapes non trouvés');
        return;
    }
    
    // Étape 1 -> Étape 2
    nextStep1.addEventListener('click', function(e) {
        e.preventDefault();
        const userTypeInput = document.getElementById('userType');
        
        if (!userTypeInput || !userTypeInput.value) {
            showError('Veuillez sélectionner un type de compte');
            return;
        }
        
        document.getElementById('registerStep1').style.display = 'none';
        document.getElementById('registerStep2').style.display = 'block';
    });
    
    // Étape 2 -> Étape 3
    nextStep2.addEventListener('click', function(e) {
        e.preventDefault();
        
        if (!validateStep2()) return;
        
        document.getElementById('registerStep2').style.display = 'none';
        document.getElementById('registerStep3').style.display = 'block';
        updateStep3Content();
    });
    
    // Navigation arrière
    prevStep2.addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('registerStep2').style.display = 'none';
        document.getElementById('registerStep1').style.display = 'block';
    });
    
    prevStep3.addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('registerStep3').style.display = 'none';
        document.getElementById('registerStep2').style.display = 'block';
    });
}

function validateStep2() {
    const email = document.getElementById('registerEmail')?.value;
    const password = document.getElementById('registerPassword')?.value;
    const confirmPassword = document.getElementById('confirmPassword')?.value;
    const fullName = document.getElementById('fullName')?.value;
    
    if (!fullName || fullName.trim().length < 2) {
        showError('Veuillez entrer un nom complet valide (au moins 2 caractères)');
        return false;
    }
    
    if (!email || !isValidEmail(email)) {
        showError('Veuillez entrer une adresse email valide');
        return false;
    }
    
    if (!password || password.length < 6) {
        showError('Le mot de passe doit contenir au moins 6 caractères');
        return false;
    }
    
    if (password !== confirmPassword) {
        showError('Les mots de passe ne correspondent pas');
        return false;
    }
    
    // Vérifier si l'email est disponible (validation visuelle)
    const emailInput = document.getElementById('registerEmail');
    if (emailInput && emailInput.classList.contains('is-invalid')) {
        showError('Cet email est déjà utilisé');
        return false;
    }
    
    return true;
}

function updateStep3Content() {
    const userType = document.getElementById('userType')?.value;
    if (!userType) return;
    
    // Masquer tous les champs spécifiques et réinitialiser les requis
    const specificFields = ['artisanFields', 'logisticianFields', 'assureurFields'];
    specificFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.style.display = 'none';
            // Retirer l'attribut required de tous les champs
            const inputs = field.querySelectorAll('input, select');
            inputs.forEach(input => {
                input.removeAttribute('required');
                input.classList.remove('is-invalid');
            });
        }
    });
    
    // Afficher les champs spécifiques et ajouter required si nécessaire
    if (userType === 'artisan') {
        const artisanFields = document.getElementById('artisanFields');
        if (artisanFields) {
            artisanFields.style.display = 'block';
            const businessName = document.getElementById('businessName');
            const artisanCategory = document.getElementById('artisanCategory');
            if (businessName) businessName.setAttribute('required', 'required');
            if (artisanCategory) artisanCategory.setAttribute('required', 'required');
        }
    } else if (userType === 'logisticien') {
        const logisticianFields = document.getElementById('logisticianFields');
        if (logisticianFields) {
            logisticianFields.style.display = 'block';
            const companyName = document.getElementById('companyNameLogistician');
            const serviceCountries = document.getElementById('serviceCountries');
            if (companyName) companyName.setAttribute('required', 'required');
            if (serviceCountries) serviceCountries.setAttribute('required', 'required');
        }
    } else if (userType === 'assureur') {
        const assureurFields = document.getElementById('assureurFields');
        if (assureurFields) {
            assureurFields.style.display = 'block';
            const companyNameAssureur = document.getElementById('companyNameAssureur');
            const licenseNumber = document.getElementById('licenseNumber');
            const insuranceTypes = document.getElementById('insuranceTypes');
            if (companyNameAssureur) companyNameAssureur.setAttribute('required', 'required');
            if (licenseNumber) licenseNumber.setAttribute('required', 'required');
            if (insuranceTypes) insuranceTypes.setAttribute('required', 'required');
        }
    }
}

function initPasswordToggle() {
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.dataset.target;
            const input = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (!input || !icon) return;
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
}

function initFormSubmissions() {
    // Formulaire de connexion
    const loginForm = document.getElementById('loginForm');
    if (loginForm) {
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            submitLoginForm();
        });
    }
    
    // Formulaire d'inscription
    const registerForm = document.getElementById('registerForm');
    if (registerForm) {
        registerForm.addEventListener('submit', function(e) {
            e.preventDefault();
            submitRegisterForm();
        });
    }
    
    // Formulaire mot de passe oublié
    const forgotPasswordForm = document.getElementById('forgotPasswordForm');
    if (forgotPasswordForm) {
        forgotPasswordForm.addEventListener('submit', function(e) {
            e.preventDefault();
            submitForgotPasswordForm();
        });
    }
}

function initModalReset() {
    const registerModal = document.getElementById('registerModal');
    if (!registerModal) return;
    
    registerModal.addEventListener('hidden.bs.modal', function() {
        console.log('Modal inscription fermé - réinitialisation');
        resetRegistrationForm();
    });
    
    registerModal.addEventListener('show.bs.modal', function() {
        console.log('Modal inscription ouvert - initialisation');
        resetRegistrationForm();
    });
}

function resetRegistrationForm() {
    // Réinitialiser à l'étape 1
    const step1 = document.getElementById('registerStep1');
    const step2 = document.getElementById('registerStep2');
    const step3 = document.getElementById('registerStep3');
    
    if (step1) step1.style.display = 'block';
    if (step2) step2.style.display = 'none';
    if (step3) step3.style.display = 'none';
    
    // Réinitialiser la sélection du type de compte
    const userTypeCards = document.querySelectorAll('.account-type-card');
    userTypeCards.forEach(card => {
        card.classList.remove('selected');
        const cardElement = card.querySelector('.card');
        if (cardElement) {
            cardElement.classList.remove('border-primary');
        }
    });
    
    const defaultCard = document.querySelector('.account-type-card[data-account-type="client"]');
    if (defaultCard) {
        defaultCard.classList.add('selected');
        const defaultCardElement = defaultCard.querySelector('.card');
        if (defaultCardElement) {
            defaultCardElement.classList.add('border-primary');
        }
        const userTypeInput = document.getElementById('userType');
        if (userTypeInput) {
            userTypeInput.value = 'client';
        }
    }
    
    // Réinitialiser le formulaire
    const registerForm = document.getElementById('registerForm');
    if (registerForm) {
        registerForm.reset();
    }
    
    // Réinitialiser les IDs cachés
    document.getElementById('id_pays').value = '';
    document.getElementById('id_ville').value = '';
    
    // Réinitialiser les sélecteurs
    const countrySelect = document.getElementById('country');
    const citySelect = document.getElementById('city');
    
    if (countrySelect) countrySelect.value = '';
    if (citySelect) {
        citySelect.innerHTML = '<option value="">Choisir une ville</option>';
        citySelect.disabled = true;
    }
    
    const phonePrefix = document.getElementById('phonePrefix');
    if (phonePrefix) phonePrefix.textContent = '+33';
    
    // Réinitialiser la validation email
    const emailInput = document.getElementById('registerEmail');
    if (emailInput) {
        emailInput.classList.remove('is-valid', 'is-invalid');
    }
    const availabilityText = document.querySelector('.email-availability');
    if (availabilityText) {
        availabilityText.textContent = '';
        availabilityText.className = 'email-availability';
    }
    
    // Réinitialiser les champs spécifiques
    const specificFields = ['artisanFields', 'logisticianFields', 'assureurFields'];
    specificFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.style.display = 'none';
            const inputs = field.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.value = '';
                if (input.type === 'checkbox' || input.type === 'radio') {
                    input.checked = false;
                }
                input.classList.remove('is-invalid', 'is-valid');
            });
        }
    });
}

function initEmailValidation() {
    const emailInput = document.getElementById('registerEmail');
    const availabilityText = document.querySelector('.email-availability');
    
    if (!emailInput || !availabilityText) return;
    
    let emailTimeout;
    
    emailInput.addEventListener('input', function() {
        clearTimeout(emailTimeout);
        const email = this.value.trim();
        
        if (!email || !isValidEmail(email)) {
            this.classList.remove('is-valid', 'is-invalid');
            availabilityText.textContent = '';
            availabilityText.className = 'email-availability';
            return;
        }

        emailTimeout = setTimeout(() => {
            checkEmailAvailability(email, availabilityText);
        }, 800);
    });
}

function checkEmailAvailability(email, availabilityElement) {
    const formData = new FormData();
    formData.append('email', email);
    
    fetch('api/auth.php?action=check_email', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Erreur réseau: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        const emailInput = document.getElementById('registerEmail');
        if (!emailInput) return;
        
        if (data.available) {
            emailInput.classList.remove('is-invalid');
            emailInput.classList.add('is-valid');
            availabilityElement.textContent = '✓ Email disponible';
            availabilityElement.className = 'email-availability email-available';
        } else {
            emailInput.classList.remove('is-valid');
            emailInput.classList.add('is-invalid');
            availabilityElement.textContent = '✗ Email déjà utilisé';
            availabilityElement.className = 'email-availability email-taken';
        }
    })
    .catch(error => {
        console.error('Erreur vérification email:', error);
    });
}

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

function submitLoginForm() {
    const form = document.getElementById('loginForm');
    if (!form) return;
    
    const formData = new FormData(form);
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn?.innerHTML;
    
    // Afficher le chargement
    if (submitBtn) {
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Connexion...';
        submitBtn.disabled = true;
    }
    
    fetch('api/auth.php?action=login', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Erreur réseau: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showSuccess(data.message || 'Connexion réussie').then(() => {
                closeAllModals();
                window.location.reload();
            });
        } else {
            showError(data.error || 'Erreur de connexion');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showError('Une erreur est survenue lors de la connexion');
    })
    .finally(() => {
        if (submitBtn) {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    });
}

function submitRegisterForm() {
    const form = document.getElementById('registerForm');
    if (!form) return;
    
    const submitBtn = document.getElementById('submitRegister');
    const originalText = submitBtn?.innerHTML;
    
    // Récupérer toutes les données du formulaire
    const formData = new FormData(form);
    
    // Récupérer les valeurs importantes
    const userType = document.getElementById('userType')?.value;
    const idPays = document.getElementById('id_pays')?.value;
    const idVille = document.getElementById('id_ville')?.value;
    const phone = document.getElementById('phone')?.value;
    const phonePrefix = document.getElementById('phonePrefix')?.textContent || '+33';
    const acceptTerms = document.getElementById('acceptTerms')?.checked;
    
    // Validation des champs obligatoires généraux
    if (!userType) {
        showError('Veuillez sélectionner un type de compte');
        return;
    }
    
    if (!idPays || !idVille) {
        showError('Veuillez sélectionner un pays et une ville');
        return;
    }
    
    if (!phone) {
        showError('Veuillez saisir un numéro de téléphone');
        return;
    }
    
    if (!acceptTerms) {
        showError('Veuillez accepter les conditions d\'utilisation');
        return;
    }
    
    // Validation spécifique selon le type d'utilisateur
    if (userType === 'artisan') {
        const businessName = document.getElementById('businessName')?.value?.trim();
        const category = document.getElementById('artisanCategory')?.value;
        
        if (!businessName) {
            showError('Veuillez saisir le nom de votre entreprise');
            document.getElementById('businessName')?.focus();
            return;
        }
        if (!category) {
            showError('Veuillez sélectionner une catégorie');
            document.getElementById('artisanCategory')?.focus();
            return;
        }
        
    } else if (userType === 'logisticien') {
        const companyName = document.getElementById('companyNameLogistician')?.value?.trim();
        const serviceCountries = document.getElementById('serviceCountries');
        
        console.log('🔍 Validation logisticien:', {
            companyName: companyName,
            companyNameElement: document.getElementById('companyNameLogistician'),
            serviceCountries: serviceCountries?.selectedOptions?.length,
            userType: userType
        });
        
        if (!companyName) {
            showError('Veuillez saisir le nom de votre entreprise');
            document.getElementById('companyNameLogistician')?.focus();
            return;
        }
        if (!serviceCountries || serviceCountries.selectedOptions.length === 0) {
            showError('Veuillez sélectionner au moins un pays desservi');
            document.getElementById('serviceCountries')?.focus();
            return;
        }
        
        // FORCER l'ajout du company_name au FormData
        formData.set('company_name', companyName);
        
    } else if (userType === 'assureur') {
        const companyName = document.getElementById('companyNameAssureur')?.value?.trim();
        const licenseNumber = document.getElementById('licenseNumber')?.value?.trim();
        const insuranceTypes = document.getElementById('insuranceTypes');
        
        if (!companyName) {
            showError('Veuillez saisir le nom de votre compagnie');
            return;
        }
        if (!licenseNumber) {
            showError('Veuillez saisir votre numéro d\'agrément');
            return;
        }
        if (!insuranceTypes || insuranceTypes.selectedOptions.length === 0) {
            showError('Veuillez sélectionner au moins un type d\'assurance');
            return;
        }
    }
    
    // Ajouter le numéro de téléphone complet avec l'indicatif
    formData.set('phone', phonePrefix + phone);
    
    // DEBUG: Afficher toutes les données du formulaire
    console.log('=== DONNÉES DU FORMULAIRE LOGISTICIEN ===');
    console.log('Type utilisateur:', userType);
    console.log('ID Pays:', idPays);
    console.log('ID Ville:', idVille);
    console.log('Téléphone:', phonePrefix + phone);
    
    for (let [key, value] of formData.entries()) {
        console.log(key + ': ' + value);
    }
    console.log('=== FIN DONNÉES ===');
    
    // Afficher le chargement
    if (submitBtn) {
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Inscription en cours...';
        submitBtn.disabled = true;
    }

    // Envoyer la requête
    fetch('api/register.php', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Erreur réseau: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        console.log('Réponse inscription:', data);
        
        if (data.success) {
            showSuccess(data.message || 'Inscription réussie').then(() => {
                closeAllModals();
                
                if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else {
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }
            });
        } else {
            let errorMessage = 'Une erreur est survenue lors de l\'inscription';
            if (data.errors && data.errors.length > 0) {
                errorMessage = data.errors.join('<br>');
            } else if (data.error) {
                errorMessage = data.error;
            }
            
            showError(errorMessage);
        }
    })
    .catch(error => {
        console.error('Erreur réseau:', error);
        showError('Impossible de contacter le serveur');
    })
    .finally(() => {
        if (submitBtn) {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    });
}

function submitForgotPasswordForm() {
    const form = document.getElementById('forgotPasswordForm');
    if (!form) return;
    
    const submitBtn = document.getElementById('forgotPasswordSubmit');
    const email = document.getElementById('forgotEmail')?.value.trim();
    
    if (!email || !isValidEmail(email)) {
        showForgotPasswordError('Veuillez entrer une adresse email valide');
        return;
    }
    
    // Masquer les messages précédents
    document.getElementById('forgotPasswordSuccess')?.classList.add('d-none');
    document.getElementById('forgotPasswordError')?.classList.add('d-none');
    
    // Afficher le chargement
    const originalText = submitBtn?.innerHTML;
    if (submitBtn) {
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Envoi en cours...';
        submitBtn.disabled = true;
    }

    const formData = new FormData(form);
    
    fetch('api/auth.php?action=forgot_password', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Erreur réseau: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showForgotPasswordSuccess(data.message || 'Email de réinitialisation envoyé');
            form.reset();
            
            setTimeout(() => {
                closeAllModals();
            }, 3000);
            
        } else {
            showForgotPasswordError(data.error || 'Une erreur est survenue');
        }
    })
    .catch(error => {
        console.error('Erreur réseau:', error);
        showForgotPasswordError('Erreur de connexion au serveur');
    })
    .finally(() => {
        if (submitBtn) {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    });
}

function showForgotPasswordSuccess(message) {
    const successDiv = document.getElementById('forgotPasswordSuccess');
    const errorDiv = document.getElementById('forgotPasswordError');
    
    if (successDiv) {
        const successText = document.getElementById('forgotPasswordSuccessText');
        if (successText) successText.textContent = message;
        successDiv.classList.remove('d-none');
    }
    
    if (errorDiv) {
        errorDiv.classList.add('d-none');
    }
}

function showForgotPasswordError(message) {
    const successDiv = document.getElementById('forgotPasswordSuccess');
    const errorDiv = document.getElementById('forgotPasswordError');
    
    if (errorDiv) {
        const errorText = document.getElementById('forgotPasswordErrorText');
        if (errorText) errorText.textContent = message;
        errorDiv.classList.remove('d-none');
    }
    
    if (successDiv) {
        successDiv.classList.add('d-none');
    }
}

function loginWithGoogle() {
    showError('Connexion Google en cours de développement');
}

function loginWithFacebook() {
    showError('Connexion Facebook en cours de développement');
}

// Export des fonctions pour une utilisation externe si nécessaire
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        closeAllModals,
        isValidEmail,
        validatePhoneNumber,
        loadCountriesCities
    };
}
</script>
    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="assets/js/main.js"></script>
    <script src="js/language-switcher.js"></script>
    <script src="assets/js/registration.js"></script>

    <script>
    // Debug automatique
    setTimeout(() => {
        console.log('=== 🔍 AUTO-DEBUG ===');
        if (typeof debugLanguage === 'function') {
            debugLanguage();
        }
    }, 1000);

    // Gestion du slider
    let currentSlide = 0;
    const slides = document.querySelectorAll('.product-slide');
    const totalSlides = slides.length;
    let slideInterval;

    function goToSlide(slideIndex) {
        if (slideIndex < 0) slideIndex = totalSlides - 1;
        if (slideIndex >= totalSlides) slideIndex = 0;
        
        currentSlide = slideIndex;
        const sliderTrack = document.getElementById('sliderTrack');
        sliderTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
        
        // Mettre à jour les indicateurs
        document.querySelectorAll('.slider-indicator').forEach((indicator, index) => {
            indicator.classList.toggle('active', index === currentSlide);
        });
        
        // Mettre à jour les classes actives
        slides.forEach((slide, index) => {
            slide.classList.toggle('active', index === currentSlide);
        });
        
        updateSliderControls();
    }

    function nextSlide() {
        goToSlide(currentSlide + 1);
    }

    function prevSlide() {
        goToSlide(currentSlide - 1);
    }

    function updateSliderControls() {
        // Désactiver les boutons si nécessaire
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');
        
        // Pour un slider infini, on ne désactive jamais les boutons
        // Mais on pourrait ajouter des animations de désactivation si besoin
    }

    function startAutoSlide() {
        slideInterval = setInterval(() => {
            nextSlide();
        }, 5000); // Change toutes les 5 secondes
    }

    function stopAutoSlide() {
        clearInterval(slideInterval);
    }

    // Initialisation
    document.addEventListener('DOMContentLoaded', function() {
        // Événements pour les boutons du slider
        document.querySelector('.next-btn').addEventListener('click', nextSlide);
        document.querySelector('.prev-btn').addEventListener('click', prevSlide);
        
        // Pause au survol
        const slider = document.querySelector('.products-slider');
        slider.addEventListener('mouseenter', stopAutoSlide);
        slider.addEventListener('mouseleave', startAutoSlide);
        
        // Démarrer le slider automatique
        startAutoSlide();
        
        // Gestion de l'ajout au panier
        document.querySelectorAll('.add-to-cart').forEach(button => {
            button.addEventListener('click', function() {
                const productId = this.dataset.productId;
                addToCart(productId);
            });
        });
        
        // Gestion des favoris
        document.querySelectorAll('.btn-wishlist').forEach(button => {
            button.addEventListener('click', function() {
                const productId = this.dataset.productId;
                toggleWishlist(productId, this);
            });
        });
    });

    function addToCart(productId) {
        fetch('api/cart.php?action=add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                product_id: productId,
                quantity: 1,
                csrf_token: document.querySelector('meta[name="csrf-token"]').content
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    title: 'Succès',
                    text: 'Produit ajouté au panier',
                    icon: 'success',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000
                });
                // Mettre à jour le compteur du panier
                updateCartCount();
            } else {
                Swal.fire({
                    title: 'Erreur',
                    text: data.error || 'Erreur serveur',
                    icon: 'error'
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                title: 'Erreur',
                text: 'Erreur serveur',
                icon: 'error'
            });
        });
    }

    function toggleWishlist(productId, button) {
        const icon = button.querySelector('i');
        const isInWishlist = icon.classList.contains('fas');
        
        fetch('api/wishlist.php?action=' + (isInWishlist ? 'remove' : 'add'), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                product_id: productId,
                csrf_token: document.querySelector('meta[name="csrf-token"]').content
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (isInWishlist) {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                } else {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                }
                
                Swal.fire({
                    title: 'Succès',
                    text: data.message,
                    icon: 'success',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 2000
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    function updateCartCount() {
        // Cette fonction serait implémentée dans main.js
        // Pour l'instant, on simule la mise à jour
        const cartCount = document.getElementById('cart-count');
        if (cartCount) {
            const currentCount = parseInt(cartCount.textContent) || 0;
            cartCount.textContent = currentCount + 1;
        }
    }
    
    // Fonction pour mettre à jour le compteur du panier dans la navbar
    function updateNavbarCartCount() {
        fetch('api/cart.php?action=count')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const cartCount = data.cart_count;
                    const cartBadge = document.getElementById('navbar-cart-count');
                    const cartCountDropdown = document.getElementById('cart-count');
                    
                    // Mettre à jour le badge de la navbar
                    if (cartBadge) {
                        if (cartCount > 0) {
                            cartBadge.textContent = cartCount;
                            cartBadge.style.display = 'block';
                        } else {
                            cartBadge.style.display = 'none';
                        }
                    }
                    
                    // Mettre à jour le compteur dans le dropdown utilisateur
                    if (cartCountDropdown) {
                        cartCountDropdown.textContent = cartCount;
                        if (cartCount > 0) {
                            cartCountDropdown.style.display = 'inline-block';
                        } else {
                            cartCountDropdown.style.display = 'none';
                        }
                    }
                    
                    // Mettre à jour la session pour la persistance
                    if (typeof updateSessionCartCount === 'function') {
                        updateSessionCartCount(cartCount);
                    }
                }
            })
            .catch(error => {
                console.error('Erreur mise à jour compteur panier:', error);
            });
    }

    // Fonction pour mettre à jour la session (optionnel)
    function updateSessionCartCount(count) {
        // Vous pouvez stocker en sessionStorage pour une persistance côté client
        sessionStorage.setItem('cartCount', count);
    }

    // Fonction pour récupérer le compteur depuis la session
    function getSessionCartCount() {
        return parseInt(sessionStorage.getItem('cartCount')) || 0;
    }

    // Initialiser le compteur au chargement de la page
    document.addEventListener('DOMContentLoaded', function() {
        // Récupérer le compteur depuis la session au chargement
        const savedCount = getSessionCartCount();
        if (savedCount > 0) {
            const cartBadge = document.getElementById('navbar-cart-count');
            if (cartBadge) {
                cartBadge.textContent = savedCount;
                cartBadge.style.display = 'block';
            }
        }
        
        // Actualiser avec les données du serveur
        updateNavbarCartCount();
    });
    </script>
</body>
</html>