/* ==========================================================================
   BrahimGSM — Correctifs responsive (mobile · tablette · desktop)
   Chargé en dernier — overrides ciblés
   ========================================================================== */

/* --- Base : empêcher le scroll horizontal --- */
html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: clip;
    max-width: 100%;
    min-width: 0;
}

main,
.site-header,
.site-footer {
    max-width: 100%;
    min-width: 0;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

/* --- Hauteurs header réalistes (logo + recherche + nav) --- */
@media (max-width: 575.98px) {
    :root { --header-height: 118px; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    :root { --header-height: 108px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    :root { --header-height: 132px; }
}

@media (min-width: 1200px) {
    :root { --header-height: 168px; }
}

/* --- Conteneur : marges adaptées par breakpoint --- */
.container {
    width: 100%;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

@media (min-width: 576px) {
    .container {
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 768px) {
    .container {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 992px) {
    .container {
        padding-left: max(2rem, env(safe-area-inset-left, 0px));
        padding-right: max(2rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 1200px) {
    .container {
        padding-left: max(2.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(2.5rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 1400px) {
    .container {
        padding-left: max(3rem, env(safe-area-inset-left, 0px));
        padding-right: max(3rem, env(safe-area-inset-right, 0px));
    }
}

/* --- Header mobile / tablette --- */
@media (max-width: 991.98px) {
    .site-header .brand-logo {
        height: 38px;
    }

    .site-header .icon-btn {
        width: 40px;
        height: 40px;
    }

    .site-header .search-box .form-control,
    .site-header .search-box .btn {
        min-height: 42px;
    }

    .site-header .navbar-collapse.show,
    .site-header .navbar-collapse.collapsing {
        display: block !important;
        margin-top: var(--space-2);
        padding-bottom: var(--space-2);
        border-top: 1px solid var(--color-border);
    }

    body.page-home .site-header .navbar-collapse.show,
    body.page-home .site-header .navbar-collapse.collapsing {
        border-top-color: rgba(255, 255, 255, 0.18);
    }

    body.page-home .site-header.is-scrolled .navbar-collapse.show,
    body.page-home .site-header.is-scrolled .navbar-collapse.collapsing {
        border-top-color: var(--color-border);
    }
}

/* --- Hero accueil --- */
@media (max-width: 575.98px) {
    .mg-hero-static {
        min-height: clamp(300px, 72vh, 420px);
    }

    .mg-hero-static__inner {
        padding-top: calc(var(--header-height) + var(--space-4));
        padding-bottom: var(--space-6);
    }

    .mg-hero-static__title {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .mg-hero-static__subtitle {
        font-size: 0.95rem;
        margin-bottom: var(--space-4);
    }

    .mg-trust-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .mg-btn-hero-light.mg-btn-lg {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .mg-hero-static {
        min-height: clamp(340px, 55vh, 520px);
    }
}

/* --- En-têtes de section --- */
.section .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: var(--space-3);
}

.section .d-flex.justify-content-between > .mg-btn,
.section .d-flex.justify-content-between > a.mg-btn {
    flex-shrink: 0;
}

/* --- Grille produits --- */
.product-grid > [class*="col-"] {
    min-width: 0;
}

.mg-product-card__title,
.mg-product-card__title a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mg-product-card__footer {
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mg-product-card__pricing {
    min-width: 0;
    flex: 1 1 auto;
}

/* --- Catégories accueil --- */
@media (max-width: 575.98px) {
    .mg-categories-section {
        padding: var(--space-8) 0 var(--space-10);
    }

    .mg-categories-section__head {
        margin-bottom: var(--space-6);
    }

    .mg-cat-card {
        flex-direction: column;
        min-height: auto;
        padding: var(--space-4);
    }

    .mg-cat-card__content {
        flex: 1 1 auto;
        padding-right: 0;
    }

    .mg-cat-card__media {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        justify-content: center;
        padding-top: var(--space-2);
    }

    .mg-cat-card__media img {
        max-width: 160px;
        max-height: 120px;
        object-position: center;
    }
}

/* --- Features --- */
@media (max-width: 575.98px) {
    .mg-features,
    .mg-features--story {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .mg-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mg-features--story {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Catalogue : filtres repliables sur mobile, toujours visibles desktop --- */
@media (min-width: 992px) {
    #catalogFilters.collapse:not(.show) {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

@media (max-width: 991.98px) {
    .mg-catalog-filters-toggle {
        min-height: 44px;
        font-weight: 600;
    }
}

    .mg-catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mg-catalog-toolbar__sort {
        width: 100%;
    }

    .mg-catalog-toolbar__sort .form-select {
        width: 100%;
        min-width: 0;
    }

    .mg-catalog-filters {
        margin-bottom: var(--space-4);
    }
}

@media (max-width: 575.98px) {
    .mg-catalog-hero__title {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
    }

    .mg-catalog-pagination .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
}

/* --- Fiche produit --- */
@media (max-width: 991.98px) {
    .pdp-buy {
        position: static;
        top: auto;
    }

    .mg-pdp-breadcrumb {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .mg-pdp-breadcrumb__current {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    .pdp-gallery__thumb {
        width: 56px;
        height: 56px;
    }

    .pdp-meta {
        flex-direction: column;
        gap: var(--space-2);
    }

    .pdp-related__header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

.product-rich-desc,
.pdp-specs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.product-rich-desc table {
    min-width: 480px;
}

/* --- Panier / checkout --- */
@media (max-width: 767.98px) {
    .mg-order-summary {
        position: static;
        top: auto;
    }
}

/* --- Bloc confiance / contact --- */
@media (max-width: 575.98px) {
    .mg-trust-section__panel {
        padding: var(--space-5);
    }

    .mg-trust-section__cta .mg-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .mg-trust-pill {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    .mg-contact-map iframe {
        height: 280px !important;
    }
}

/* --- Footer --- */
@media (max-width: 575.98px) {
    .site-footer {
        text-align: center;
    }

    .site-footer .row > [class*="col-"] {
        text-align: center;
    }

    .site-footer .footer-social,
    .site-footer .mg-footer-social {
        justify-content: center;
    }

    .site-footer__divider {
        text-align: center;
    }
}

/* --- WhatsApp flottant --- */
@media (max-width: 575.98px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        font-size: 1.45rem;
        right: 14px;
        bottom: calc(var(--bottom-nav-height) + 10px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Mega-menu : ne jamais déborder l'écran --- */
.mg-mega {
    min-width: min(520px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

/* --- Compte / auth --- */
@media (max-width: 575.98px) {
    .mg-account-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mg-account-nav::-webkit-scrollbar {
        display: none;
    }
}