body {
    font-family: 'Aptos', sans-serif;
    background-color: #f4f7f9;
    font-weight: normal;
    font-size: 14px;
}

/* --- Header --- */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.top-bar {
    background-color: #f8f9fa;
    padding: 8px 0;
    font-size: 0.8rem;
    color: #6c757d;
}
.main-header { padding: 20px 0; }
.logo {
    font-size: 1.8rem;
    font-weight: normal;
    color: #0d6efd;
    text-decoration: none;
}
.search-form {
    position: relative;
}
.search-form input {
    border-radius: 50rem;
    padding: 10px 20px;
    border-color: #dee2e6;
}
.search-form button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    border: none;
    background-color: #0d6efd;
    color: white;
    width: 40px;
    border-radius: 50%;
}
.header-actions {
    display: flex;
    justify-content: flex-end;
}
.header-action-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #495057;
    margin-left: 20px;
}
.header-action-btn i { font-size: 1.5rem; }
.header-action-btn span { margin-left: 8px; font-weight: normal; }

.main-nav {
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}
.main-nav .nav-link {
    font-weight: normal;
    color: #343a40;
    padding: 15px;
}

/* --- WhatsApp FAB --- */
.whatsapp-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: transform 0.2s ease-in-out;
}
.whatsapp-fab:hover {
    transform: scale(1.1);
}

/* --- Style des Cartes Produits --- */
.product-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}
.product-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}
.product-image-link {
    position: relative;
    display: block;
}
.product-image {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Assure que l'image remplit l'espace sans se déformer */
}
.product-stock-status {
    position: absolute;
    top: 10px;
    left: 10px;
}
.product-name {
    font-size: 0.95rem;
    font-weight: normal;
    line-height: 1.4;
    min-height: 40px; /* Assure que les cartes ont une hauteur similaire */
}
.product-name a {
    text-decoration: none;
    color: #343a40;
}
.product-price {
    font-size: 1.25rem;
    font-weight: normal;
    color: #0d6efd;
    margin-bottom: 1rem;
}

/* --- Barre latérale de Filtres --- */
.filters-sidebar {
    top: 20px; /* Pour le sticky-top */
}
.filter-widget {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.widget-title {
    font-size: 1.1rem;
    font-weight: normal;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.filter-options { max-height: 250px; overflow-y: auto; }
.filter-options .form-check { margin-bottom: 10px; }
.form-check-label { display: flex; justify-content: space-between; width: 100%; cursor: pointer; }
.product-count { color: #6c757d; font-size: 0.9em; }

/* --- Fourchette de Prix (Range Slider) --- */
.price-range-slider {
    position: relative;
    height: 10px;
}
.price-range-slider input[type=range] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    background: none;
}
.price-range-slider input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
}
.price-range-display {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-weight: normal;
}

/* --- Grille de Produits et Loader --- */
#product-grid-container { min-height: 500px; }
.grid-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}
.grid-loader.active {
    opacity: 1;
    visibility: visible;
}
#product-grid.loading {
    filter: blur(4px);
}

/* --- Mega Menu --- */
.has-megamenu { position: static!important; }
.megamenu {
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px;
    margin-top: 0;
}
.megamenu .title {
    font-weight: normal;
    margin-bottom: 10px;
}

/* --- Mega Menu --- */
.has-megamenu { position: static!important; }
.megamenu {
    left: 0;
    right: 0;
    width: 100%;
    padding: 25px;
    margin-top: 0;
    border-top: 2px solid #0d6efd; /* Ligne bleue pour un look premium */
    border-radius: 0;
}

.col-megamenu {
    padding: 10px;
}

.megamenu-category-title {
    font-size: 1.1rem;
    font-weight: normal;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    display: block;
    color: #212529;
    text-decoration: none;
    transition: color 0.2s ease;
}
.megamenu-category-title:hover {
    color: #0d6efd;
}

.megamenu-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes par catégorie */
    gap: 15px;
}

.megamenu-product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #495057;
    transition: transform 0.2s ease;
}
.megamenu-product-item:hover {
    transform: translateY(-3px);
    color: #0d6efd;
}

.megamenu-product-image {
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Images en cercle pour un look très stylé */
    overflow: hidden;
    margin-bottom: 8px;
    border: 2px solid #f0f0f0;
}
.megamenu-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.megamenu-product-name {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ... (styles existants) ... */

/* ========================================================== */
/* --- DESIGN DE LA PAGE D'ACCUEIL "PORTAIL DYNAMIQUE" --- */
/* ========================================================== */

/* Barre latérale des catégories sur la page d'accueil */
.category-sidebar {
    top: 20px; /* Pour l'effet sticky */
}
.list-group-header {
    font-size: 1.2rem;
    font-weight: normal;
    padding: 1rem 1.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    color: #0d6efd;
}
.category-sidebar .list-group-item {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-top: none;
    border-bottom: 1px solid #f0f0f0;
    font-weight: normal;
}
.category-sidebar .list-group-item:last-child {
    border-bottom: 1px solid #dee2e6;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.category-sidebar .list-group-item:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
    transform: translateX(5px);
    transition: transform 0.2s ease;
}

/* Section Héros / Slider */
.carousel-item img {
    height: 350px;
    object-fit: cover;
}

/* Titres de section */
.section-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #0d6efd;
    border-radius: 2px;
}

/* Nous nous assurons que les grilles de produits ont le même style que sur la page catégorie */
/* (Ce code est déjà dans style.css via product_card.php, c'est juste une confirmation) */
#product-grid {
    /* ... */
}

/* ========================================================== */
/* --- DESIGN DE LA PAGE DÉTAIL PRODUIT --- */
/* ========================================================== */

/* Galerie d'images */
.product-gallery .main-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    background-color: #fff;
    cursor: pointer;
}

/* Panneau de détails à droite */
.product-details-panel .breadcrumb {
    font-size: 0.9rem;
}
.product-title {
    font-size: 2.5rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
}
.product-meta {
    font-size: 0.9rem;
    color: #6c757d;
}
.product-price-main {
    font-size: 2.8rem;
    font-weight: normal;
    color: #0d6efd;
}
.product-stock-info .badge {
    font-size: 1rem;
    padding: 0.5em 0.8em;
}

/* Boîte d'action */
.product-action-box {
    border-radius: 0.5rem;
}
#quantity-input {
    font-weight: normal;
}
/* Empêcher les flèches sur l'input de type nombre */
#quantity-input::-webkit-outer-spin-button,
#quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#quantity-input[type=number] {
  -moz-appearance: textfield;
}

.add-to-cart-btn-main {
    font-size: 1.2rem;
    font-weight: normal;
    padding: 0.75rem;
}

/* Onglets d'information */
.product-info-tabs .nav-tabs {
    border-bottom: none;
}
.product-info-tabs .nav-link {
    font-weight: normal;
    color: #6c757d;
    border: none;
    border-bottom: 3px solid transparent;
}
.product-info-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom: 3px solid #0d6efd;
    background: none;
}
.product-info-tabs .tab-content {
    border-top: none;
    border-top-left-radius: 0;
}

.header-action-btn .badge {
    border-radius: 50rem;
    padding: 0.3em 0.6em;
    position: relative;
    top: -10px;
    left: -5px;
}

.product-card {
    /* Hérite déjà du style .card, on ajoute juste la transition */
    transition: all 0.3s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
}

/* Le bouton "Ajouter au Panier" héritera du style .btn arrondi */
.product-card .add-to-cart-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem; /* Un peu plus petit pour la carte */
}
/* --- RAFFINEMENT GLOBAL DU DESIGN --- */
:root {
    --primary-color: #0d6efd;
    --primary-color-rgb: 13, 110, 253;
    --text-color-dark: #2c3e50; /* Un gris-bleu foncé, plus doux que le noir */
    --text-color-light: #7f8c8d; /* Un gris moyen pour les textes secondaires */
    --background-color: #f8f9fa; /* Notre gris clair de base */
    --card-border-color: #e9ecef;
    --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --border-radius: 0.5rem; /* 8px - Notre rayon d'arrondi de base */
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color-dark);
}

/* --- Boutons Arrondis & Élégants --- */
.btn {
    border-radius: 50rem !important; /* L'effet "pilule" complet */
    padding: 0.6rem 1.5rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    border-width: 2px;
    transition: all 0.2s ease-in-out;
}
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.2);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(var(--primary-color-rgb), 0.3);
}

/* --- Cartes Aérées --- */
.card {
    border-radius: var(--border-radius);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
}

/* --- Champs de Saisie --- */
.form-control, .form-select {
    border-radius: var(--border-radius);
    border-color: var(--card-border-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* ========================================================== */
/* --- AJUSTEMENTS RESPONSIVES POUR LA GRILLE À 4 COLONNES --- */
/* ========================================================== */

@media (min-width: 1200px) { /* Cible les écrans XL et plus */
    .product-card .product-name {
        font-size: 0.9rem; /* On réduit légèrement la taille de la police du nom */
        min-height: 45px;  /* On ajuste la hauteur minimale pour l'alignement */
    }

    .product-card .product-price {
        font-size: 1.15rem; /* On réduit aussi un peu la taille du prix */
    }
}

/* ========================================================== */
/* --- MEGA MENU "GLASSMORPHISM" --- */
/* ========================================================== */

.has-megamenu { 
    position: static!important; 
}

.megamenu {
    left: 0;
    right: 0;
    width: 100%;
    padding: 30px;
    margin-top: 0;

    /* --- La Magie du Glassmorphism --- */
    background-color: rgba(255, 255, 255, 0.7); /* Fond blanc semi-transparent */
    -webkit-backdrop-filter: blur(10px); /* Flou de l'arrière-plan pour Safari */
    backdrop-filter: blur(10px); /* Flou de l'arrière-plan pour les autres navigateurs */
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 1rem 1rem; /* Coins arrondis en bas */

    /* Animation d'apparition subtile */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* Le menu apparaît quand la classe 'show' est ajoutée par Bootstrap */
.dropdown:hover .megamenu, .megamenu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Nous nous assurons que la barre de navigation reste au-dessus du menu */
.main-nav {
    position: relative;
    z-index: 1021; /* z-index standard de Bootstrap pour les navbars */
}

/* ... (les autres styles du mega menu : .megamenu-category-title, etc. restent les mêmes) ... */
.col-megamenu {
    padding: 10px;
}
.megamenu-category-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Bordure plus subtile */
    display: block;
    color: #2c3e50; /* Texte plus sombre pour la lisibilité */
    text-decoration: none;
    transition: color 0.2s ease;
}
.megamenu-category-title:hover {
    color: #0d6efd;
}
/* ... (les autres styles restent inchangés) ... */

@media (min-width: 992px) { /* Appliquer seulement sur les écrans LG et plus */
    .navbar .has-megamenu:hover > .megamenu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ========================================================== */
/* --- DESIGN DE L'ESPACE CLIENT "MON HUB GESCOM" --- */
/* ========================================================== */

/* Application de la police et de la taille de base */
body {
    font-family: 'Aptos', 'Poppins', sans-serif; /* Aptos en priorité */
    font-size: 14px; /* Taille de base */
}

/* Menu de navigation du compte */
.account-nav .card-title {
    font-weight: 600;
}
.account-nav .list-group-item {
    border: none;
    padding: 12px 15px;
    font-weight: 500;
    color: var(--text-color-dark);
    border-radius: var(--border-radius);
    margin-bottom: 5px;
}
.account-nav .list-group-item i {
    color: var(--text-color-light);
    transition: color 0.2s ease;
}
.account-nav .list-group-item:hover, .account-nav .list-group-item.active {
    background-color: var(--primary-color);
    color: white;
}
.account-nav .list-group-item:hover i, .account-nav .list-group-item.active i {
    color: white;
}

/* Contenu principal du compte */
.account-content {
    min-height: 500px;
}
.account-content-title {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

/* Cartes de commande */
.order-list .order-card {
    margin-bottom: 1.5rem;
}
.order-card .card-header {
    background-color: #f8f9fa;
}
.order-status-progress .progress {
    font-size: 0.8rem;
    font-weight: 600;
}
.order-product-thumbnails .thumbnail {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    margin-right: 10px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ========================================================== */
/* --- DESIGN RESPONSIVE & MOBILE-FIRST --- */
/* ========================================================== */

/* En-tête "Sticky" */
.site-header.sticky-top {
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

/* On ajuste l'en-tête principal pour le mobile */
.main-header {
    padding: 15px 0;
}
.main-header .btn {
    color: var(--text-color-dark);
}
.main-header .logo span { /* Cacher le nom du site sur très petits écrans */
    display: none;
}
@media (min-width: 576px) {
    .main-header .logo span {
        display: inline;
    }
}
.header-actions .header-action-btn { /* Réduire la marge sur mobile */
    margin-left: 15px;
}
.header-action-btn .badge {
   /* position: absolute;  Positionner le badge par-dessus l'icône */
    top: -5px;
    right: -10px;
    font-size: 0.7em;
    padding: 0.3em 0.5em;
}

/* Off-Canvas de Navigation Mobile */
.mobile-nav-list .mobile-nav-link {
    display: block;
    padding: 12px 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--card-border-color);
}
.mobile-nav-list .mobile-nav-link:hover {
    color: var(--primary-color);
}
.mobile-nav-list li:last-child .mobile-nav-link {
    border-bottom: none;
}

/* Off-Canvas de Recherche Mobile */
#mobileSearchOffcanvas .offcanvas-body {
    background-color: var(--background-color);
}
.search-form-mobile {
    position: relative;
}
.search-form-mobile input {
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    border: 2px solid #dee2e6;
}
.search-form-mobile button {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #6c757d;
    font-size: 1.2rem;
}

/* Nous masquons le bouton WhatsApp sur les écrans très larges pour ne pas gêner */
@media (min-width: 1400px) {
    .whatsapp-fab {
        /* On pourrait le cacher ou simplement réduire son opacité */
        /* display: none; */
    }
}

/* --- PAGINATION AVANCÉE ET INTERACTIVE --- */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permet de passer à la ligne sur mobile si besoin */
}

/* Nous changeons le style des boutons pour être circulaires */
.pagination .page-item .page-link {
    border-radius: 50% !important; /* Force la forme circulaire */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    border: 1px solid #dee2e6;
    color: var(--text-color-dark);
    font-weight: 500;
}

.pagination .page-item.active .page-link {
    background-color: var(--text-color-dark); /* Un actif sobre et élégant */
    color: white;
    border-color: var(--text-color-dark);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.pagination .page-item:not(.active) .page-link:hover {
    background-color: #f1f3f5;
    border-color: #ced4da;
}

.pagination .page-item.disabled .page-link {
    background-color: transparent;
    color: #adb5bd;
}

.pagination .page-item.dots .page-link {
    border: none;
    background-color: transparent;
}

/* Formulaire "Aller à la page" */
.pagination-goto-form {
    align-items: center;
}
.pagination-goto-form .form-label {
    white-space: nowrap; /* Empêche le retour à la ligne */
    color: var(--text-color-light);
}
.pagination-goto-form .form-control {
    width: 80px; /* Largeur fixe pour le champ */
    text-align: center;
    border-radius: var(--border-radius);
}
.pagination-goto-form .btn {
    border-radius: var(--border-radius); /* Bouton rectangulaire arrondi, pas une pilule */
    padding: 0.5rem 1rem;
    font-weight: 500;
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) { /* Sur les écrans plus petits que MD (tablettes) */
    .pagination-container {
        justify-content: center; /* On centre la pagination sur mobile */
    }
    /* Le formulaire "Aller à la page" est caché par la classe d-none d-md-flex */
}

/* ========================================================== */
/* --- DESIGN "BLUFFANT" POUR LE SPOTLIGHT GESCOM --- */
/* ========================================================== */

/* Le faux champ de recherche dans la navbar */
.global-search-bar {
    background-color: #e9ecef;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 280px;
    transition: all 0.2s ease-in-out;
}
.global-search-bar:hover {
    background-color: #dee2e6;
}
.global-search-bar .placeholder-text { color: #6c757d; }
.global-search-bar .keyboard-shortcut {
    margin-left: auto;
    font-size: 0.8em;
    padding: 0.2em 0.6em;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.5);
    color: #495057;
}

/* La modale elle-même - Effet "Glassmorphism" */
#globalSearchModal .modal-dialog {
    max-width: 700px;
    margin-top: 5vh;
}
#globalSearchModal .modal-content {
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}
#globalSearchModal .search-input-container {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6;
}
#globalSearchModal #global-search-input {
    height: 60px;
    font-size: 1.5rem;
    font-weight: 500;
}
#globalSearchModal .search-input-container .search-icon { left: 1.5rem; }
#globalSearchModal #search-spinner { right: 1.5rem; }

/* Conteneur et résultats */
#global-search-results {
    max-height: 60vh;
    overflow-y: auto;
}
.search-results-header {
    padding: 10px 15px 5px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}
.search-result-item {
    padding: 10px 15px;
}
/* Ajout d'une classe pour les résultats "actifs" lors de la navigation au clavier */
.search-result-item.active {
    background-color: #0d6efd;
    color: white;
}
.search-result-item.active .result-subtitle, .search-result-item.active .result-title {
    color: white;
}
.result-icon {
    width: 40px;
    height: 40px;
    background-color: #e9ecef;
    font-size: 1.2rem;
}
.search-result-item.active .result-icon {
    background-color: rgba(255,255,255,0.2);
    color: white;
}

/* NOUVEAU: Image du produit dans les résultats */
.result-product-image {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
    margin-right: 1rem;
    flex-shrink: 0;
}

/* =================================================================== */
/* --- DESIGN "ALIBABA RAFFINÉ" POUR LE SPOTLIGHT MARKETPLACE --- */
/* =================================================================== */

/* --- Le Déclencheur dans la Navbar --- */
.global-search-bar {
    background-color: #f8f9fa; /* Fond très clair */
    border: 1px solid #e9ecef;
    border-radius: 50rem; /* Entièrement arrondi */
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 300px;
    transition: all 0.3s ease;
}
.global-search-bar:hover {
    border-color: #ced4da;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.global-search-bar .placeholder-text {
    color: #6c757d;
}
.global-search-bar .keyboard-shortcut {
    margin-left: auto;
    font-size: 0.75em;
    padding: 0.2em 0.6em;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #495057;
}

/* --- La Modale --- */
/* Nous utilisons un sélecteur plus spécifique pour ne pas impacter les autres modales */
#globalSearchModal .modal-dialog {
    max-width: 700px;
    margin: 4vh auto; /* Un peu plus bas pour un effet plus doux */
    transform: translateY(-20px);
    transition: transform 0.3s ease-out;
}
#globalSearchModal.show .modal-dialog {
    transform: translateY(0);
}
#globalSearchModal .modal-content {
    background-color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}

/* --- Le Champ de Saisie dans la Modale --- */
#globalSearchModal .search-input-container {
    padding: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}
#globalSearchModal #global-search-input {
    height: 55px;
    font-size: 1.25rem;
    font-weight: 500;
    border: none;
    box-shadow: none !important;
    padding-left: 3rem;
}
#globalSearchModal #global-search-input::placeholder {
    color: #adb5bd;
}
#globalSearchModal .search-input-container .search-icon {
    font-size: 1.25rem;
    top: 50%;
    left: 1.75rem;
    transform: translateY(-50%);
    color: #adb5bd;
}
#globalSearchModal #search-spinner {
    right: 1.75rem;
}

/* --- Les Résultats --- */
#global-search-results {
    max-height: 65vh;
    overflow-y: auto;
}
#global-search-results .initial-state, 
#global-search-results .no-results-state {
    padding: 4rem 2rem;
    color: #adb5bd;
}
#global-search-results .initial-state i,
#global-search-results .no-results-state i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.search-results-category {
    padding: 1rem 0.5rem;
}
.search-results-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    padding: 0 1rem;
}
.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px; /* Rayon de base */
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.search-result-item:hover, .search-result-item.active {
    background-color: #f8f9fa;
    transform: translateX(5px);
}
.search-result-item.active {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

.result-icon, .result-product-image {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Rayon de base */
}
.result-icon {
    display: none;
    background-color: #f1f3f5;
    color: #495057;
    font-size: 1.2rem;
}
.result-product-image {
    object-fit: cover;
    border: 1px solid #f0f0f0;
}

.result-details {
    overflow: hidden;
}
.result-title {
    font-weight: 600;
    color: var(--text-color-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-subtitle {
    font-size: 0.85rem;
    color: var(--text-color-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- MEGA MENU PANORAMIQUE INTERACTIF --- */
.has-megamenu { position: static!important; }

.megamenu-panoramic {
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    border: none;
    padding: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow: hidden; /* Important pour les coins arrondis */

    /* Animation d'apparition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

@media (min-width: 992px) {
    .navbar .has-megamenu:hover > .megamenu-panoramic {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.megamenu-inner {
    display: flex;
    min-height: 400px;
}

/* Colonne de navigation à gauche */
.megamenu-nav-col {
    width: 280px;
    flex-shrink: 0;
    background-color: rgba(248, 249, 250, 0.8);
    border-right: 1px solid rgba(0,0,0,0.05);
    padding: 20px 0;
}
.megamenu-nav-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    font-weight: 500;
    color: var(--text-color-dark);
    text-decoration: none;
    transition: all 0.2s ease;
}
.megamenu-nav-item:hover a, .megamenu-nav-item.active a {
    background-color: #fff;
    color: var(--primary-color);
}

/* Zone de contenu à droite */
.megamenu-content-col {
    flex-grow: 1;
    position: relative;
    padding: 30px;
}
.megamenu-content {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
}
.megamenu-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.megamenu-content h5 {
    font-weight: 600;
    margin-bottom: 15px;
}

/* Grille des produits dans le menu */
.megamenu-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.megamenu-product-item { /* ... style déjà existant, on peut le garder ... */ }

/* Bannière de catégorie */
.megamenu-banner {
    display: block;
    height: 100%;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.megamenu-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: white;
    text-align: center;
}
.megamenu-banner-overlay span {
    display: block;
    font-size: 0.9rem;
}
.megamenu-banner-overlay strong {
    font-size: 1.1rem;
}

/* --- BOUTON DE CONTACT WHATSAPP SUR LA PAGE PRODUIT --- */
.whatsapp-contact-btn {
    border-radius: 50rem !important; /* Style pilule cohérent */
    font-weight: 500;
    padding: 0.5rem 1rem;
    background-color: #25d366; /* Couleur officielle de WhatsApp */
    border-color: #25d366;
    color: white;
    text-transform: none; /* Garder une casse normale */
    letter-spacing: 0;
}

.whatsapp-contact-btn:hover {
    background-color: #128c7e; /* Couleur plus foncée au survol */
    border-color: #128c7e;
    color: white;
    transform: scale(1.05);
}

/* ========================================================== */
/* --- DESIGN AMÉLIORÉ DE LA ZONE D'ACTION PRODUIT --- */
/* ========================================================== */

.product-action-box {
    /* Hérite déjà du style .card, mais on peut le renforcer */
    border-color: var(--card-border-color);
}

/* Sélecteur de quantité stylisé */
.quantity-selector .form-control {
    border-left: none;
    border-right: none;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 0.5rem; /* Réduire le padding vertical */
    height: 48px; /* Hauteur fixe pour l'alignement */
}
.quantity-selector .btn {
    width: 48px;
    height: 48px;
    border-color: #ced4da;
    background-color: #fff;
    z-index: 1; /* Pour que les bordures s'affichent correctement */
}
.quantity-selector .btn:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
}

/* Bouton principal "Ajouter au Panier" */
.add-to-cart-btn-main {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    height: 48px; /* Même hauteur que le sélecteur de quantité */
    /* Le style arrondi est déjà géré par la règle globale .btn */
}

/* NOUVEAU: Style pour les boutons d'action secondaires (icône seule) */
.action-icon-btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0; /* Empêche les boutons de se rétrécir */
    padding: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nous nous assurons que tous les boutons dans la zone d'action ont le bon style */
.product-action-box .btn {
    border-radius: var(--border-radius) !important; /* On choisit un arrondi carré pour cette section, plus "pro" */
}
.product-action-box .btn-success.action-icon-btn {
     background-color: #25d366;
     border-color: #25d366;
     color: white;
}
.product-action-box .btn-success.action-icon-btn:hover {
    background-color: #128c7e;
    border-color: #128c7e;
}

/* ========================================================== */
/* --- STYLE DU BOUTON D'AJOUT AU PANIER INTELLIGENT --- */
/* ========================================================== */

/* Style pour le bouton "Ajouté !" */
.btn.btn-in-cart {
    background-color: #198754; /* Vert succès de Bootstrap */
    border-color: #198754;
    cursor: default !important; /* Le curseur indique qu'on ne peut plus cliquer */
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.2);
}
.btn.btn-in-cart:hover {
    background-color: #157347; /* Un peu plus foncé au survol */
    border-color: #146c43;
    transform: none; /* Pas d'effet de soulèvement */
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.2);
}

/* Nous nous assurons que les styles s'appliquent bien partout */
.product-card .add-to-cart-btn.btn-in-cart,
.add-to-cart-btn-main.btn-in-cart {
    /* Les styles ci-dessus sont suffisants grâce à la spécificité */
}

/* Animation subtile pour l'icône lors du changement d'état */
.btn i {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Style du Slider "Élégance Immersive" --- */
.hero-slider-immersive {
    height: 60vh; /* Hauteur relative à la fenêtre */
    min-height: 400px;
    max-height: 550px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.hero-slider-immersive .carousel-item {
    height: 100%;
    background-size: cover;
    background-position: center;
}
.hero-slider-immersive .carousel-item::before { /* Superposition sombre */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.carousel-caption-custom {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    text-align: left;
    color: #fff;
}
.carousel-caption-custom .caption-content {
    max-width: 50%;
}
.carousel-caption-custom h1 { font-weight: 700; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); }
.carousel-caption-custom p { font-size: 1.2rem; }

/* Contrôles stylisés */
.hero-slider-immersive .carousel-control-icon {
    width: 50px; height: 50px; background-color: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.hero-slider-immersive .carousel-control-prev, .hero-slider-immersive .carousel-control-next { opacity: 0.8; }
.hero-slider-immersive .carousel-indicators button { width: 12px; height: 12px; border-radius: 50%; }

/* Animation du texte */
.carousel-item .animated-text {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.carousel-item.active .animated-text {
    opacity: 1;
    transform: translateY(0);
}
/* Délai d'animation pour chaque élément */
.carousel-item.active p { transition-delay: 0.2s; }
.carousel-item.active .btn { transition-delay: 0.4s; }

/* --- Style du Slider "Catalogue Dynamique" --- */
.hero-slider-dynamic {
    min-height: 450px;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.hero-slider-dynamic .carousel-item {
    height: 450px;
}
.caption-content-dynamic {
    /* Animations similaires au slider 1 peuvent être ajoutées ici */
}
.product-image-dynamic {
    max-height: 500px;
    position: absolute;
    bottom: 0;
    right: 5%;
    /* Effet de "flottement" */
    -webkit-filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.3));
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.3));
}

/* ========================================================== */
/* --- DESIGN DES CONTRÔLES DU SLIDER "CATALOGUE DYNAMIQUE" --- */
/* ========================================================== */

/* --- Style des Indicateurs (les petits points/barres en bas) --- */
.hero-slider-dynamic .carousel-indicators {
    margin-bottom: 1rem; /* Les remonter un peu */
}
.hero-slider-dynamic .carousel-indicators [data-bs-target] {
    width: 30px; /* On fait des petites barres plutôt que des points */
    height: 4px;
    background-color: #ffffff;
    opacity: 0.5;
    transition: opacity 0.6s ease;
    border: none;
    margin: 0 5px;
}
.hero-slider-dynamic .carousel-indicators .active {
    opacity: 1;
}

/* --- Style des Flèches de Contrôle (Précédent/Suivant) --- */
.hero-slider-dynamic .carousel-control-prev,
.hero-slider-dynamic .carousel-control-next {
    width: 5%; /* Zone de clic plus large */
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.hero-slider-dynamic .carousel-control-prev:hover,
.hero-slider-dynamic .carousel-control-next:hover {
    opacity: 1;
}

/* Le conteneur de l'icône de flèche */
.hero-slider-dynamic .carousel-control-icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3); /* Fond semi-transparent */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
}

.hero-slider-dynamic .carousel-control-prev:hover .carousel-control-icon-wrapper,
.hero-slider-dynamic .carousel-control-next:hover .carousel-control-icon-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Nous nous assurons que les contrôles sont au-dessus de l'image du produit qui "dépasse" */
.hero-slider-dynamic .carousel-control-prev,
.hero-slider-dynamic .carousel-control-next,
.hero-slider-dynamic .carousel-indicators {
    z-index: 5;
}

/* ========================================================== */
/* --- DESIGN MARKETING POUR LA FICHE PRODUIT --- */
/* ========================================================== */

/* Conteneur pour les badges */
.product-badges .badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4em 0.8em;
}

/* Prix barré pour les promotions */
.product-price-main .old-price {
    font-size: 1.5rem; /* Plus petit que le prix principal */
    font-weight: 400;
    text-decoration: line-through; /* Le style barré */
    margin-left: 15px;
}

/* --- Style "Marketing" des Cartes Produits --- */

.product-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    background-color: #fff;
    display: flex; /* Permet au footer de la carte de s'aligner */
    flex-direction: column;
}
.product-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transform: translateY(-8px);
}

.product-image-link {
    position: relative; /* Contexte pour les badges */
    display: block;
}

/* Conteneur des badges en superposition */
.product-badges-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column; /* Pour empiler les badges */
    gap: 5px; /* Espace entre les badges */
}
.product-badges-overlay .badge {
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3em 0.6em;
}
.badge-promo {
    background-color: #dc3545; /* Rouge Promo */
    color: #fff;
}
.badge-featured {
    background-color: #ffc107; /* Jaune "Sélection" */
    color: #000;
}
.badge-outofstock {
    background-color: #6c757d; /* Gris "Rupture" */
    color: #fff;
}

/* Le corps de la carte, pour que le bouton soit toujours en bas */
.product-card .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fait en sorte que le corps prenne toute la hauteur disponible */
}

/* Conteneur de prix pour l'alignement */
.product-price-container {
    display: flex;
    align-items: baseline; /* Aligne les prix sur leur ligne de base */
    gap: 8px; /* Espace entre les prix */
    margin-bottom: 1rem;
}
.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}
.product-old-price {
    font-size: 0.9rem;
    color: var(--text-color-light);
    text-decoration: line-through;
}

.product-actions {
    border-top: 1px solid #f0f0f0;
}

/* ========================================================== */
/* --- DESIGN DE LA NAVIGATION CONTEXTUELLE PRODUIT --- */
/* ========================================================== */

.product-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--text-color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
    text-decoration: none;
    opacity: 0; /* Caché par défaut */
    transition: all 0.3s ease;
}

/* Afficher les boutons au survol de la galerie */
.product-gallery:hover .product-nav-btn {
    opacity: 1;
}

/* Améliorer l'effet de survol sur les boutons eux-mêmes */
.product-nav-btn:not(.disabled):hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-50%) scale(1.1); /* Effet de grossissement */
}

/* Positionnement des boutons */
.product-nav-btn.prev {
    left: 20px;
}
.product-nav-btn.next {
    right: 20px;
}

/* Style du bouton désactivé */
.product-nav-btn.disabled {
    background-color: rgba(233, 236, 239, 0.7);
    color: #adb5bd;
    cursor: not-allowed;
    box-shadow: none;
}

/* =================================================================== */
/* --- DESIGN "LUXE & AÉRÉ" POUR LA TOP BAR --- */
/* =================================================================== */

.top-bar {
    background-color: #d7dcee; /* Un fond blanc pur pour plus de contraste */
    padding: 6px 0; /* Un peu moins de hauteur pour plus de finesse */
    font-size: 0.85rem;
    color: #121313;
    border-bottom: 1px solid var(--card-border-color); /* Ligne de séparation subtile */
    font-weight: bold;
}

/* Nous utilisons Flexbox sur le container pour un contrôle total */
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Le bloc d'actions à droite (Sociaux + Contact) */
.top-bar-actions {
    display: flex;
    align-items: center;
}

/* Les liens sociaux */
.social-links {
    display: flex; /* Aligner les icônes horizontalement */
    align-items: center;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 30px;  /* Taille légèrement réduite pour un look "bijou" */
    height: 30px;
    
    /* Nous enlevons le fond par défaut pour un look plus minimaliste */
    background-color: transparent;
    border-radius: 50%;
    
    color: var(--text-color-light);
    text-decoration: none;

    /* LA CORRECTION CLÉ : Augmenter l'espacement */
    margin: 0 8px; /* 8px de marge de chaque côté de chaque icône */
    
    font-size: 1.1rem; /* Icône légèrement plus grande dans un conteneur plus petit */
    
    transition: all 0.3s ease;
}

/* L'effet de survol est maintenant plus subtil */
.social-links a:hover {
    color: #fff;
    transform: translateY(-2px); /* Un soulèvement plus discret */
    /* L'ombre et la couleur de fond n'apparaissent qu'au survol */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Les couleurs de marque au survol restent */
.social-links a[title*="Facebook"]:hover { background-color: #1877F2; }
.social-links a[title*="TikTok"]:hover { background-color: #000000; }
/* etc. */

/* Le séparateur vertical */
.top-bar .separator {
    color: #dee2e6;
    margin: 0 15px; /* Plus d'espace autour du séparateur */
    font-size: 1.2rem;
    align-self: center;
}

/* Le lien Contact */
.top-bar .top-bar-link {
    font-weight: 500;
    color: var(--text-color-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}
.top-bar .top-bar-link:hover {
    color: var(--primary-color);
}

/* ... (styles existants pour .social-links a:hover) ... */

/* Les couleurs de marque au survol restent */
.social-links a[title*="Facebook"]:hover { background-color: #1877F2; }
.social-links a[title*="TikTok"]:hover { background-color: #000000; }
/* NOUVELLE LIGNE */
.social-links a[title*="WhatsApp"]:hover { background-color: #25D366; } /* Vert WhatsApp */