/* Harmonisation des icônes et boutons - Fix responsive final */

/* =============================================== */
/* STYLES UNIVERSELS - Tous les écrans */
/* =============================================== */

/* Harmonisation des icônes cart et search sur tous les écrans */
.search-bar button,
.header-cart .cart-icon-btn {
    /* Base commune */
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 50% !important;
    padding: 0 !important;
    position: relative !important;
}

/* =============================================== */
/* DESKTOP (769px+) */
/* =============================================== */
@media (min-width: 769px) {
    /* Conteneur icônes harmonisés */
    .search-bar button,
    .header-cart .cart-icon-btn {
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
    }
    
    /* Hover uniforme */
    .search-bar button:hover,
    .header-cart .cart-icon-btn:hover {
        background: rgba(0,0,0,0.06) !important;
        transform: scale(1.08) !important;
    }
    
    /* Pour le bouton search dans la barre */
    .search-bar button {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .search-bar button:hover {
        transform: translateY(-50%) scale(1.08) !important;
    }
    
    /* Style des SVG */
    .search-bar button svg,
    .header-cart .cart-icon-btn svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #666 !important;
        fill: none !important;
        stroke-width: 2 !important;
    }
    
    /* Container de recherche amélioré */
    .header-right .search-bar {
        background: #f8f9fa !important;
        border: 1px solid transparent !important;
        transition: all 0.2s ease !important;
    }
    
    .header-right .search-bar:focus-within {
        background: white !important;
        border-color: #dee2e6 !important;
        box-shadow: 0 0 0 3px rgba(44,85,48,0.08) !important;
    }
}

/* =============================================== */
/* TABLETTE (769px - 1024px) */
/* =============================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Ajustements spécifiques tablette */
    .search-bar button,
    .header-cart .cart-icon-btn {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* SVG tablette */
    .search-bar button svg,
    .header-cart .cart-icon-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Barre de recherche tablette */
    .header-right .search-bar {
        width: 200px !important;
        height: 36px !important;
    }
    
    /* Burger menu stylé tablette */
    .mobile-menu-toggle {
        transition: all 0.2s ease !important;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(0,0,0,0.06) !important;
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95) !important;
    }
}

/* =============================================== */
/* FIX SIDEBAR */
/* =============================================== */

/* Masquer TOUS les badges dans la sidebar */
.dashboard-sidebar .cart-count,
.sidebar-nav .cart-count,
.nav-item[data-section="panier"] .cart-count {
    display: none !important;
}

/* Style du lien panier dans la sidebar */
.sidebar-nav .nav-item[data-section="panier"] {
    padding-left: 20px !important;
}

.sidebar-nav .nav-item[data-section="panier"] i,
.sidebar-nav .nav-item[data-section="panier"] svg {
    margin-right: 10px !important;
}

/* =============================================== */
/* FIX RECHERCHE - Prévenir le rechargement */
/* =============================================== */

/* Marqueur visuel pour recherche active */
.search-bar input[data-search-active="true"] {
    background: #fff9e6 !important;
}

/* Produits pendant la recherche */
.product-card[data-search-match="false"] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.product-card[data-search-match="true"] {
    display: block !important;
    opacity: 1 !important;
}

/* Animation smooth pour les résultats */
@media (min-width: 769px) {
    .product-card {
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }
    
    .product-card[data-search-match="false"] {
        transform: scale(0.95) !important;
    }
}

/* =============================================== */
/* BADGE PANIER UNIFIÉ */
/* =============================================== */

/* Badge uniquement dans le header */
.header-cart .cart-count {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    background: #ff4444 !important;
    color: white !important;
    font-size: 11px !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    padding: 0 4px !important;
    z-index: 1 !important;
}

/* Desktop : bordure blanche */
@media (min-width: 769px) {
    .header-cart .cart-count {
        border: 2px solid white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
}

/* Mobile : bordure adaptée au fond vert */
@media (max-width: 768px) {
    .header-cart .cart-count {
        border: 1px solid #2c5530 !important;
        font-size: 10px !important;
        min-width: 14px !important;
        height: 14px !important;
    }
}

/* =============================================== */
/* ACCESSIBILITY & UX */
/* =============================================== */

/* Focus styles pour accessibilité */
.search-bar button:focus-visible,
.header-cart .cart-icon-btn:focus-visible,
.mobile-menu-toggle:focus-visible {
    outline: 2px solid #2c5530 !important;
    outline-offset: 2px !important;
}

/* Désactiver le tap highlight sur mobile */
@media (max-width: 768px) {
    button, a, .nav-item {
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* Curseur pointer sur tous les éléments cliquables */
button, [role="button"], .nav-item, .clickable {
    cursor: pointer !important;
}

/* =============================================== */
/* ANIMATIONS OPTIMISÉES */
/* =============================================== */

/* Utiliser transform pour les animations (GPU) */
@media (prefers-reduced-motion: no-preference) {
    .search-bar button,
    .header-cart .cart-icon-btn,
    .mobile-menu-toggle {
        will-change: transform;
    }
    
    .search-bar button:active,
    .header-cart .cart-icon-btn:active {
        transform: scale(0.95) !important;
    }
}

/* Désactiver les animations si demandé */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}