/* ===================================
   RESPONSIVE FIXES — v4 final
   La navbar est entièrement gérée dans style.css
   =================================== */


/* ===================================
   1. NAV-RIGHT — panier + hamburger groupés à droite
   =================================== */
.nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Sur toutes tailles < 1200px : panier toujours visible */
@media (max-width: 1200px) {
    .nav-actions {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    #cartButton,
    .cart-button {
        display: flex !important;
    }
}


/* ===================================
   2. COLLECTIONS — Noms visibles
   =================================== */
.category-card {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

.category-image {
    overflow: hidden !important;
    border-radius: 15px 15px 0 0 !important;
    flex-shrink: 0 !important;
}

.category-card h3 {
    padding: 1rem 1.25rem 0.3rem !important;
    font-size: 1.3rem !important;
    color: var(--dark) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.category-card p {
    padding: 0 1.25rem 0.5rem !important;
    font-size: 0.9rem !important;
    color: var(--text-light) !important;
    margin: 0 !important;
}

.category-link {
    display: block !important;
    padding: 0.75rem 1.25rem !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-top: auto !important;
}

@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .category-image {
        padding-top: 0 !important;
        height: 120px !important;
        position: relative !important;
    }

    .category-image img {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
    }

    .category-image > div {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
    }

    .category-card h3 {
        font-size: 0.88rem !important;
        padding: 0.6rem 0.7rem 0.15rem !important;
    }

    .category-card p {
        font-size: 0.76rem !important;
        padding: 0 0.7rem 0.35rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .category-link {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.76rem !important;
    }
}

@media (max-width: 400px) {
    .categories-grid { gap: 0.6rem !important; }
    .category-image { height: 95px !important; }
    .category-card h3 { font-size: 0.8rem !important; padding: 0.45rem 0.5rem 0.1rem !important; }
    .category-card p { display: none !important; }
    .category-link { padding: 0.35rem 0.5rem !important; font-size: 0.72rem !important; }
}


/* ===================================
   3. FIL D'ARIANE — wrap sur mobile
   =================================== */
@media (max-width: 768px) {
    .breadcrumb {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow-x: visible !important;
        max-width: 100% !important;
        font-size: 0.82rem !important;
        padding: 0.5rem 1rem !important;
        gap: 0.4rem !important;
        line-height: 1.6 !important;
    }
    .breadcrumb a, .breadcrumb span {
        white-space: normal !important;
        flex-shrink: 1 !important;
        text-align: center !important;
    }
}


/* ===================================
   4. FILTRES — texte visible + scroll horizontal
   =================================== */
.filter-btn span { display: inline !important; }

@media (max-width: 768px) {
    .boutique-controls { flex-direction: column !important; gap: 0.85rem !important; }
    .search-box { max-width: 100% !important; width: 100% !important; }

    .product-filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.4rem 0.2rem 0.6rem !important; /* top: espace au-dessus des boutons, bottom: ombre non coupée */
        margin-top: 0.25rem !important;           /* léger écart supplémentaire avec la recherche */
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .product-filters::-webkit-scrollbar { display: none !important; }

    .filter-btn {
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
        min-width: unset !important;
        padding: 0.55rem 1rem !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }
    .filter-btn span { display: inline !important; }

    .sort-options {
        width: 100% !important; margin-left: 0 !important;
        flex-direction: row !important; align-items: center !important; gap: 0.5rem !important;
    }
    .sort-options select { flex: 1 !important; padding: 0.6rem 2.5rem 0.6rem 1rem !important; }
}


/* ===================================
   5. GRILLE PRODUITS — 2 colonnes mobile
   =================================== */
@media (max-width: 768px) {
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
    .product-info { padding: 0.85rem !important; }
    .product-title { font-size: 0.9rem !important; margin-bottom: 0.25rem !important; }
    .product-description { font-size: 0.78rem !important; margin-bottom: 0.5rem !important; -webkit-line-clamp: 2 !important; }
    .product-price { font-size: 1.05rem !important; margin-bottom: 0.5rem !important; }
    .product-actions { flex-direction: column !important; gap: 0.35rem !important; }
    .product-actions .btn { padding: 0.45rem 0.6rem !important; font-size: 0.78rem !important; width: 100% !important; justify-content: center !important; }
    .fav-btn { top: 8px !important; right: 8px !important; width: 30px !important; height: 30px !important; font-size: 0.85rem !important; }
}
@media (max-width: 380px) {
    .products-grid { grid-template-columns: 1fr !important; }
}


/* ===================================
   6. PAGE PRODUIT — mobile
   =================================== */
@media (max-width: 768px) {
    .product-page-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .product-gallery { position: static !important; }
    .product-details-content h1 { font-size: 1.6rem !important; }
    .product-details-price { font-size: 1.5rem !important; }
    .add-to-cart-area { flex-direction: column !important; gap: 0.75rem !important; }
    .add-to-cart-area .btn { width: 100% !important; justify-content: center !important; }
    .product-thumbnails { grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; }
    .boutique-hero { padding: 100px 0 50px !important; }
    .boutique-hero-content h1 { font-size: 1.8rem !important; }
}


/* ===================================
   7. HERO — mobile
   =================================== */
@media (max-width: 768px) {
    .hero-content { padding: 1rem; margin-top: -8rem; }
    .hero-text h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
    .section-header { margin-bottom: 2rem; }
}
@media (max-width: 480px) {
    .hero-buttons .btn { padding: 0.8rem 1.25rem; font-size: 0.9rem; }
}


/* ===================================
   8. ABOUT / CONTACT
   =================================== */
@media (max-width: 768px) {
    .about-image img { height: 280px; }
    .about-badge { bottom: 15px; right: 15px; padding: 1rem; }
    .contact-form-wrapper { padding: 1.5rem; }
    
    .contact-form .form-group {
        display: flex;
        flex-direction: column;
    }
    
    .contact-form .form-group label {
        position: static;
        display: block;
        order: -1;
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text);
        background: none;
        padding: 0;
    }
    
    .contact-form .form-group input:focus + label,
    .contact-form .form-group input:not(:placeholder-shown) + label,
    .contact-form .form-group select:focus + label,
    .contact-form .form-group select:not([value=""]) + label,
    .contact-form .form-group textarea:focus + label,
    .contact-form .form-group textarea:not(:placeholder-shown) + label {
        color: var(--primary);
        font-size: 0.9rem;
        top: auto;
        left: auto;
    }
}


/* ===================================
   9. SERVICES
   =================================== */
@media (min-width: 601px) and (max-width: 900px) {
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr !important; }
}


/* ===================================
   10. FEATURED GRID
   =================================== */
@media (max-width: 900px) {
    .featured-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
}
@media (max-width: 480px) {
    .featured-grid { gap: 0.75rem !important; }
    .featured-cta { padding: 2rem 1rem; }
    .featured-cta h3 { font-size: 1.4rem; }
}


/* ===================================
   11. CTA
   =================================== */
@media (max-width: 768px) {
    .cta-content { flex-direction: column !important; text-align: center !important; gap: 1.5rem !important; }
    .cta-text h2 { font-size: 1.5rem; }
    .cta-buttons { flex-direction: column !important; width: 100% !important; gap: 0.75rem !important; }
    .cta-buttons .btn { width: 100% !important; justify-content: center !important; }
}


/* ===================================
   12. FOOTER
   =================================== */
@media (max-width: 768px) {
    .footer { padding: 3rem 0 1.5rem; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 0.75rem !important; }
    .footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 0.75rem !important; }
}


/* ===================================
   13. REVIEWS
   =================================== */
@media (max-width: 480px) {
    .review-card { flex: 0 0 88vw !important; padding: 1.25rem !important; }
}


/* ===================================
   14. PAGINATION
   =================================== */
@media (max-width: 480px) {
    .pagination { flex-wrap: wrap; gap: 0.5rem; }
    .page-btn { padding: 0.6rem 0.9rem; font-size: 0.85rem; }
}


/* ===================================
   15. MODAL
   =================================== */
@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}


/* ===================================
   16. FEATURED GRID — 1 colonne sur mobile (page d'accueil)
   =================================== */
@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Réduire la hauteur de la photo produit en page d'accueil */
    .featured-grid .product-image,
    .featured-grid .product-img-wrapper {
        height: 200px !important;
        max-height: 200px !important;
    }

    .featured-grid .product-image img,
    .featured-grid .product-img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Collections : 1 par ligne, pleine largeur */
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .category-image {
        height: 180px !important;
    }

    .category-card h3 {
        font-size: 1rem !important;
        padding: 0.75rem 1rem 0.25rem !important;
    }

    .category-card p {
        font-size: 0.85rem !important;
        padding: 0 1rem 0.4rem !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .category-link {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }
}


/* ===================================
   BOUTIQUE — 1 colonne sur mobile
   =================================== */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Harmoniser la hauteur image en boutique */
    .products-grid .product-image,
    .products-grid .product-img-wrapper {
        height: 220px !important;
        max-height: 220px !important;
    }

    .products-grid .product-image img,
    .products-grid .product-img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}


/* ===================================
   FOOTER TABLETTE — 769px → 1024px
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .footer {
        padding: 3.5rem 0 2rem !important;
    }

    /* Colonne logo sur toute la largeur, centrée */
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 2rem !important;
    }

    .footer-col:first-child {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding-bottom: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .footer-col:first-child p {
        max-width: 480px !important;
    }

    .footer-social {
        justify-content: center !important;
    }

    /* Les 3 colonnes de liens centrées */
    .footer-col:not(:first-child) {
        text-align: center !important;
    }

    .footer-col:not(:first-child) ul li a:hover {
        padding-left: 0 !important;
    }

    /* Barre du bas */
    .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }

    .footer-links {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1.25rem !important;
    }
}


/* ===================================
   FOOTER DESKTOP PETITS ÉCRANS — 1025px → 1280px
   =================================== */
@media (min-width: 1025px) and (max-width: 1280px) {
    .footer .container {
        padding: 0 2.5rem !important;
    }

    .footer-grid {
        gap: 2rem !important;
    }
}


/* ===================================
   17. BOUTON QUANTITÉ — alignement mobile
   =================================== */
@media (max-width: 768px) {
    .add-to-cart-area {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .quantity-input-group {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        border-radius: 50px !important;
        padding: 0.25rem 0.5rem !important;
    }

    .quantity-btn {
        flex-shrink: 0 !important;
        width: 44px !important;
        height: 44px !important;
    }

    .quantity-input {
        flex: 1 !important;
        text-align: center !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .add-to-cart-area .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ===================================
   18. NAVBAR — prénom (user-menu-trigger) mobile
   =================================== */
@media (max-width: 1200px) {
    /* Le trigger dans le tiroir mobile doit ressembler aux autres liens */
    .user-menu-nav-item .user-menu-trigger {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        padding: 0.9rem 0 !important;
        border-bottom: 1px solid var(--border) !important;
        width: 100% !important;
        color: var(--text) !important;
        background: transparent !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        justify-content: flex-start !important;
    }

    /* Chevron poussé à droite */
    .user-menu-trigger .fa-chevron-down {
        margin-left: auto !important;
    }

    /* S'assurer que le nom s'affiche bien */
    .user-menu-trigger #userName,
    .user-menu-trigger span {
        display: inline !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 150px !important;
    }
}


/* ===================================
   19. NAVBAR TABLETTE — 769px → 1200px
   =================================== */
@media (min-width: 769px) and (max-width: 1200px) {
    /* Le tiroir est déjà géré par le media ≤1200px dans style.css.
       On s'assure juste que le nav-container ne déborde pas. */
    .nav-container {
        padding: 0 1.5rem !important;
    }

    /* Le logo ne se compresse pas */
    .logo {
        flex-shrink: 0 !important;
    }

    /* nav-right visible et compact */
    .nav-right {
        gap: 0.5rem !important;
    }
}


/* ===================================
   20. NAVBAR DESKTOP PETITS ÉCRANS — 1200px → 1350px
   =================================== */
@media (min-width: 1200px) and (max-width: 1350px) {
    /* Réduire l'espace entre les liens */
    .nav-menu {
        gap: 1.25rem !important;
    }

    .nav-link {
        font-size: 0.88rem !important;
    }

    /* Réduire le bouton call */
    .btn-call {
        padding: 0.65rem 1.1rem !important;
        font-size: 0.82rem !important;
    }

    .nav-container {
        padding: 0 1.5rem !important;
    }
}