/* ============================================================
   RESPONSIVE.CSS
   GRW Anhänger Center 2026
   ------------------------------------------------------------
   ⚠️ Chargé APRÈS main.css.
   ⚠️ Ne doit contenir QUE :
      - les media queries mobiles principales (drawer, dropdown mobile)
      - les ajustements responsive spécifiques (NON gérés par main.css)
      - le footer mobile centré
      - l'accessibilité et l'impression
   ⚠️ NE PAS redéfinir les règles déjà gérées par main.css :
      - .hero-fullscreen, .hero-bg, .hero-title-full, etc.
        (toutes ces règles sont dans main.css section 12)
      - .nav-link, .nav-item, .nav-list (main.css sections 7)
   ============================================================ */

/* ============================================================
   1. EXTRA LARGE DESKTOP (≥ 1400px)
   ============================================================ */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .products-grid,
    .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   2. TRÈS GRANDS ÉCRANS (≥ 1600px)
   ============================================================ */
@media (min-width: 1600px) {
    .container { max-width: 1440px; }
    .products-grid,
    .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   3. DESKTOP STANDARD (≤ 1199px)
   ============================================================ */
@media (max-width: 1199px) {
    .section-title { font-size: 1.9rem; }

    .products-grid,
    .product-grid { grid-template-columns: repeat(3, 1fr); }

    .main-nav .dropdown-menu-custom {
        width: 95vw;
        grid-template-columns: repeat(3, 1fr);
        padding: 16px 20px;
    }

    .product-main-image { border-radius: var(--radius); }

    .thumbnail {
        flex: 0 0 74px;
        height: 74px;
    }
}

/* ============================================================
   4. TABLETTE / MOBILE (≤ 991px)
   ------------------------------------------------------------
   Navigation → DRAWER latéral gauche
   ============================================================ */
@media (max-width: 991px) {

    /* ---------- Layout général ---------- */
    .section { padding: 40px 0; }
    .section-title { font-size: 1.7rem; }

    /* ---------- Header ---------- */
    .header-inner {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 10px 0;
        min-height: 64px;
    }

    .brand-logo {
        max-height: 52px;
        max-width: 180px;
    }

    .brand-name { font-size: 1.35rem; }

    .search-wrapper {
        grid-column: 1 / -1;
        order: 3;
        max-width: 100%;
        margin: 0;
        display: none;
    }

    .menu-toggle { display: inline-flex; }

    .cart-button span { display: none; }
    .cart-button { padding: 9px 12px; }

    /* ---------- DRAWER MOBILE ---------- */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--z-drawer);

        width: 320px;
        max-width: 85vw;

        padding: 24px 0;

        background: #fff;
        border-top: none;
        border-right: 1px solid var(--border);

        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);

        overflow-y: auto;
        box-shadow: var(--shadow-lg);

        height: 100vh;
        height: 100dvh;

        /* Neutralise le masquage desktop */
        max-height: none !important;
    }

    .main-nav.open { transform: translateX(0); }

    /* Même si nav-hidden est présent (au cas où), on garde le drawer */
    .main-nav.nav-hidden {
        max-height: none !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        border-top: none !important;
        border-bottom: none !important;
        transform: translateX(-100%);
    }

    .main-nav.nav-hidden.open {
        transform: translateX(0);
    }

    .main-nav::before {
        content: "Menü";
        display: block;
        padding: 0 24px 18px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border);
        color: var(--primary);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .main-nav .container {
        max-width: none;
        padding: 0;
    }

    .main-nav .nav-list {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 0 12px;
    }

    .main-nav .nav-item {
        width: 100%;
        display: block;
    }

    .main-nav .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 13px 16px;
        font-size: .95rem;
        border-radius: var(--radius-sm);
    }

    .main-nav .nav-link i { font-size: 1.1rem; }

    .main-nav .nav-link.active::after { display: none; }

    .main-nav .dropdown-chevron {
        margin-left: auto;
        font-size: .9rem !important;
    }

    /* ✅ Warenkorb visible dans le drawer mobile */
    .main-nav .nav-item.nav-item-mobile {
        display: block !important;
        width: 100% !important;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    /* ---------- Dropdown mobile : accordéon ---------- */
    .main-nav .nav-item-dropdown {
        position: static;
    }

    .main-nav .dropdown-menu-custom {
        position: static;
        transform: none;

        display: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: none;

        margin: 4px 0 8px;
        padding: 6px 0 6px 12px;

        background: var(--bg-light);
        border: none;
        border-left: 3px solid var(--accent);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        box-shadow: none;

        grid-template-columns: 1fr;
        opacity: 1;
        visibility: visible;
        overflow: visible;
    }

    .main-nav .nav-item-dropdown.open .dropdown-menu-custom {
        display: block;
    }

    .main-nav .nav-item-dropdown.open .dropdown-chevron {
        transform: rotate(180deg);
    }

    .main-nav .dropdown-menu-custom::before { display: none; }

    .main-nav .dropdown-menu-custom a {
        display: block;
        padding: 10px 14px;
        color: var(--text-dark);
        font-size: .9rem;
        font-weight: 500;
        text-decoration: none;
        white-space: normal;
        overflow-wrap: break-word;
        border-radius: var(--radius-sm);
    }

    .main-nav .dropdown-menu-custom a:hover {
        background: #fff;
        color: var(--accent);
    }

    .main-nav .dropdown-menu-custom a i {
        color: var(--accent);
        opacity: .85;
    }

    /* ---------- Top bar ---------- */
    .top-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .top-bar-info,
    .top-bar-links {
        width: 100%;
        gap: 12px;
    }

    /* ⚠️ HERO : les règles sont dans main.css section 12.
       NE PAS les redéfinir ici. */

    /* ---------- USP ---------- */
    .usp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* ---------- Grilles ---------- */
    .products-grid,
    .product-grid { grid-template-columns: repeat(2, 1fr); }

    .categories-grid,
    .category-grid { grid-template-columns: repeat(3, 1fr); }

    /* ---------- À propos ---------- */
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-image { order: -1; }

    /* ---------- Service ---------- */
    .service-grid { grid-template-columns: 1fr; gap: 40px; }

    /* ---------- FAQ ---------- */
    .faq-grid { grid-template-columns: 1fr; }

    /* ---------- Page produit ---------- */
    .product-gallery {
        position: static;
        top: auto;
        margin-bottom: 30px;
    }

    .product-info { padding-left: 0; }
    .product-price-block { padding: 18px 22px; }
    .product-specs-grid { grid-template-columns: 1fr; }
    .product-specs-grid > div:nth-child(odd) { border-right: none; }
    .product-specs-grid > div:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--border-light);
    }
    .product-specs-grid > div:last-child { border-bottom: none; }
    .product-shipping-info { grid-template-columns: 1fr; }
    .card-block { padding: 20px 22px; }
    .card-block h3 { font-size: 1.1rem; }
    .specs-table td {
        padding: 10px 14px;
        font-size: .85rem;
    }
    .product-breadcrumb .breadcrumb { padding: 10px 0; }
    #imageZoomModal img {
        max-width: 95vw;
        max-height: 90vh;
    }
}

/* ============================================================
   5. MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

    body { font-size: 14px; }
    .container { padding: 0 16px; }

    .section { padding: 32px 0; }
    .section-sm { padding: 24px 0; }

    /* ---------- Header / brand ---------- */
    .brand-name { font-size: 1.2rem; }
    .brand-tagline { font-size: .6rem; }
    .brand-logo { max-height: 44px; max-width: 150px; }

    .header-inner { padding: 10px 0; min-height: 58px; }

    .search-wrapper { display: none; }

    /* ⚠️ HERO : les règles sont dans main.css section 12.
       NE PAS les redéfinir ici. */

    /* ---------- USP ---------- */
    .usp-grid { grid-template-columns: 1fr; gap: 16px; }
    .usp-item { margin-bottom: 0; }
    .usp-icon { width: 42px; height: 42px; font-size: 1.15rem; }

    /* ---------- Grilles ---------- */
    .products-grid,
    .product-grid { grid-template-columns: 1fr; gap: 14px; }

    .categories-grid,
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .category-card { padding: 20px 12px; }
    .category-icon { width: 48px; height: 48px; font-size: 1.3rem; }

    /* ---------- Produits (cards) ---------- */
    .product-actions { flex-direction: column; }
    .product-actions .btn { width: 100%; }
    .btn-cart-icon { width: 100%; }

    /* ---------- Page produit ---------- */
    .product-detail { padding: 24px 0; }
    .product-description { padding: 28px 0; }
    .similar-products { padding: 28px 0; }

    .product-info h1 { font-size: 1.4rem; }
    .product-info .price { font-size: 1.7rem; }

    .product-main-image img { border-radius: var(--radius-sm); }

    .product-zoom-hint {
        bottom: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .product-thumbnails { gap: 8px; }
    .thumbnail { flex: 0 0 66px; height: 66px; }

    .product-specs-grid { grid-template-columns: 1fr; }

    .product-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .quantity-selector {
        width: 100%;
        justify-content: space-between;
    }

    .quantity-selector button { flex: 1; }

    .product-actions-row .btn {
        width: 100%;
        min-width: 0 !important;
    }

    .product-shipping-info {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 8px;
    }

    .product-trust-badges { gap: 8px; }

    .product-trust-badges span {
        padding: 5px 12px;
        font-size: 0.72rem;
    }

    .product-description .card-block {
        padding: 18px;
        border-radius: var(--radius);
    }

    .product-description h3 { font-size: 1.05rem; margin-bottom: 12px; }
    .product-description .desc-body { font-size: 0.9rem; }

    .specs-table td {
        padding: 10px 12px;
        font-size: 0.82rem;
    }
    .specs-table td:first-child { width: 45%; }

    .why-choose-list li {
        padding: 9px 0;
        gap: 10px;
    }
    .why-choose-list span { font-size: 0.85rem; }

    .similar-products h3 { font-size: 1.2rem; margin-bottom: 20px; }

    .product-breadcrumb .breadcrumb {
        font-size: 0.78rem;
        padding: 8px 0;
    }

    /* ---------- Pagination ---------- */
    .pagination { gap: 4px; margin: 26px 0; }

    .page-link {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        font-size: 0.82rem;
    }

    /* ---------- FAQ ---------- */
    .faq-item summary {
        padding: 14px 16px;
        font-size: .9rem;
    }
    .faq-item p { padding: 0 16px 14px; font-size: .85rem; }

    /* ---------- Service ---------- */
    .service-block { padding: 50px 0; }
    .service-card { padding: 24px 20px; }

    /* ---------- Cookie / notifications ---------- */
    .cookie-banner,
    .notification {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 14px;
    }
    .cookie-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1; }

    /* ---------- Drawer ---------- */
    .main-nav { width: 290px; }

    .section-title-left { text-align: center; }

    /* ---------- Zoom modal ---------- */
    #imageZoomModal { padding: 10px; }
    #imageZoomModal img {
        max-width: 96vw;
        max-height: 88vh;
        border-radius: var(--radius-sm);
    }
    .zoom-close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
    }
}

/* ============================================================
   6. PETITS MOBILES (≤ 575px)
   ============================================================ */
@media (max-width: 575px) {
    .brand-name { font-size: 1.1rem; }
    .brand-tagline { display: none; }

    .section-title { font-size: 1.35rem; }

    /* ⚠️ HERO : les règles sont dans main.css section 12.
       NE PAS les redéfinir ici. */

    .categories-grid,
    .category-grid { grid-template-columns: 1fr; }

    .products-grid,
    .product-grid { grid-template-columns: 1fr; }

    .product-price { font-size: 1.15rem; }
    .product-specs { flex-direction: column; gap: 3px; }

    .breadcrumb { font-size: .78rem; padding: 10px 0; }

    .scroll-to-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }

    /* ---------- Zoom modal ---------- */
    .zoom-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* ---------- Page produit ---------- */
    .product-info h1 { font-size: 1.25rem; }
    .product-info .price { font-size: 1.5rem; }

    .product-short-desc {
        padding: 12px 14px;
        font-size: 0.88rem;
    }

    .product-specs-preview h4 { font-size: 0.95rem; }

    .product-specs-grid {
        padding: 10px 12px;
        gap: 6px;
    }

    .product-specs-grid .spec-key,
    .product-specs-grid .spec-value { font-size: 0.78rem; }

    .product-price-block { padding: 16px 18px; }
    .product-price-block::before { left: 18px; right: 18px; }

    .product-description .card-block { padding: 16px; }
    .product-description h3 { font-size: 1rem; }

    .specs-table td { padding: 8px 10px; font-size: 0.78rem; }

    .product-trust-badges span { padding: 4px 10px; font-size: 0.7rem; }

    .similar-products .product-card { border-radius: 14px; }
}

/* ============================================================
   7. LANDSCAPE MOBILE
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    /* ⚠️ HERO : ne pas redéfinir ici non plus */
    .main-nav {
        max-height: 100vh;
        overflow-y: auto;
    }
    .main-nav .nav-list { padding-bottom: 40px; }
}

/* ============================================================
   8. ACCESSIBILITÉ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-slide { transform: none !important; }
    .product-card,
    .category-card,
    .product-image img {
        transition: none !important;
        transform: none !important;
    }
    .main-header { transition: none !important; }
    .main-nav { transition: none !important; }
}

/* ============================================================
   9. IMPRESSION
   ============================================================ */
@media print {
    .main-header,
    .top-bar,
    .main-nav,
    .main-footer,
    .cookie-banner,
    .notification,
    .btn,
    .search-wrapper,
    .scroll-to-top,
    .menu-toggle,
    .hero-dots,
    .product-zoom-hint,
    #imageZoomModal,
    .product-thumbnails,
    .product-actions-row,
    .product-trust-badges {
        display: none !important;
    }

    body { background: #fff; color: #000; }

    a { color: #000; text-decoration: underline; }

    .product-card,
    .category-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .product-detail,
    .product-description,
    .similar-products { page-break-inside: avoid; }
}

/* ============================================================
   10. SAFE AREA IPHONE
   ============================================================ */
@supports (padding: max(0px)) {
    .cookie-banner {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .main-nav {
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}

/* ============================================================
   11. FOOTER MOBILE — Centrage forcé
   ============================================================ */
@media (max-width: 991px) {

    footer.main-footer,
    .main-footer {
        text-align: center !important;
        padding: 40px 0 20px !important;
    }

    .main-footer .container { text-align: center !important; }

    .main-footer .footer-top {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
        padding-bottom: 28px !important;
        text-align: center !important;
    }

    .main-footer .footer-top > .footer-col-brand {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-footer .footer-brand {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto 14px !important;
        width: 100% !important;
    }

    .main-footer .footer-about {
        max-width: 520px !important;
        margin: 0 auto 18px !important;
        text-align: center !important;
        padding: 0 12px !important;
    }

    .main-footer .footer-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    .main-footer .footer-contact p {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto 10px !important;
        width: auto !important;
    }

    .main-footer .footer-contact p i {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .main-footer .footer-col {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .main-footer .footer-title {
        text-align: center !important;
        margin: 0 auto 14px !important;
        width: 100% !important;
    }

    .main-footer .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-footer .footer-links li {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    .main-footer .footer-links a::before {
        display: none !important;
        content: none !important;
    }

    .main-footer .footer-links a:hover { padding-left: 0 !important; }

    .main-footer .payment-icons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .main-footer .shipping-info {
        text-align: center !important;
        width: 100% !important;
    }

    .main-footer .shipping-info p {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto 8px !important;
        width: auto !important;
    }

    .main-footer .footer-vat {
        text-align: center !important;
        margin: 16px auto 0 !important;
        padding: 12px 0 0 !important;
    }

    .main-footer .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 16px !important;
        padding-top: 20px !important;
    }

    .main-footer .footer-copyright {
        text-align: center !important;
        margin: 0 auto !important;
        font-size: .8rem !important;
    }

    .main-footer .social-icons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        gap: 10px !important;
    }
}

/* ---------- MOBILE STRICT (≤ 575px) ---------- */
@media (max-width: 575px) {
    footer.main-footer,
    .main-footer {
        padding: 32px 0 18px !important;
    }

    .main-footer .footer-top {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding-bottom: 22px !important;
    }

    .main-footer .footer-title {
        font-size: .82rem !important;
        margin-bottom: 12px !important;
    }

    .main-footer .footer-links a {
        font-size: .82rem !important;
    }

    .main-footer .footer-contact p {
        font-size: .82rem !important;
    }

    .main-footer .footer-about {
        font-size: .82rem !important;
        line-height: 1.6 !important;
    }

    .main-footer .footer-brand .brand-name {
        font-size: 1.15rem !important;
    }

    .main-footer .payment-method {
        font-size: .72rem !important;
        padding: 5px 10px !important;
    }

    .main-footer .footer-copyright {
        font-size: .75rem !important;
        padding: 0 12px !important;
    }

    .main-footer .social-icons a {
        width: 34px !important;
        height: 34px !important;
        font-size: .9rem !important;
    }
}

/* ============================================================
   12. FILTRES CATÉGORIE — Non-sticky sur mobile
   ============================================================ */
@media (max-width: 991px) {
    .category-filters {
        position: static !important;
        top: auto !important;
        padding: 10px 0 !important;
        background: #fff !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: none !important;
    }

    .category-filters .container form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .category-filters .container form > div:first-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .category-filters label { display: none !important; }

    .category-filters select {
        width: 100% !important;
        padding: 8px 10px !important;
        font-size: .85rem !important;
        border-radius: 8px !important;
    }

    .category-filters .container form > div:last-child {
        text-align: center !important;
        font-size: .82rem !important;
    }
}

/* ============================================================
   FIN RESPONSIVE.CSS
   ============================================================ */