/* ═══════════════════════════════════════════════════════════════
   mobile.css — Force Mobiles
   Chargé en dernier — priorité maximale sur toutes les tailles mobiles
═══════════════════════════════════════════════════════════════ */

/* ── Base — prevent horizontal scroll ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
img  { max-width: 100%; height: auto; }

/* Ensure every direct child of body can't overflow viewport */
@media (max-width: 900px) {
    body > * { max-width: 100vw; overflow-x: hidden; }
}

/* ═══════════════════════════════════════════════════════════════
   NAV MOBILE PANEL
═══════════════════════════════════════════════════════════════ */

/* Mobile header (logo + close btn) — hidden on desktop */
.nav-mobile-header { display: none; }

@media (max-width: 900px) {
    /* Neutralise toute propriété qui transformerait le header en bloc
       conteneur pour les descendants position:fixed (backdrop-filter,
       filter, transform). Sans ça, .nav { position:fixed } se positionne
       par rapport au header de 72px et le panneau reste invisible. */
    .header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transform: none !important;
        perspective: none !important;
        contain: none !important;
        overflow: visible !important;
    }
    .header-container { overflow: visible !important; }

    /* ── Panel full-screen ── */
    .nav {
        position: fixed !important;
        top: 72px !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        max-height: calc(100dvh - 72px) !important;
        display: none !important;
        flex-direction: column !important;
        background: rgba(3, 22, 52, 0.99) !important;
        z-index: 998 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: none !important;
        padding: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    .nav.active {
        display: flex !important;
        pointer-events: auto !important;
    }

    /* En-tête interne du panneau masqué : le header de la page (logo + bouton
       hamburger transformé en ×) sert déjà de barre supérieure du menu. */
    .nav-mobile-header { display: none !important; }

    .nav-close {
        background: rgba(255,255,255,0.1) !important;
        border: none !important;
        color: #fff !important;
        width: 36px !important; height: 36px !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* ── Nav links ── */
    .nav-links {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 6px 0 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    .nav-links > li {
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        width: 100% !important;
    }

    .nav-links > li:last-child { border-bottom: none !important; }

    .nav-links > li > a,
    .nav-links > li > .nav-dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 14px 20px !important;
        font-size: 0.97rem !important;
        width: 100% !important;
        text-align: left !important;
        color: rgba(255,255,255,0.88) !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    .nav-links > li > a:hover,
    .nav-links > li > .nav-dropdown-toggle:hover {
        background: rgba(255,255,255,0.06) !important;
        color: #fff !important;
    }

    .nav-links a::after { display: none !important; }

    /* ── Dropdown chevron ── */
    .nav-arrow {
        margin-left: auto !important;
        transition: transform 0.25s ease !important;
        font-size: 0.72rem !important;
        opacity: 0.55 !important;
    }

    .nav-dropdown.open > a .nav-arrow,
    .nav-dropdown.open > .nav-dropdown-toggle .nav-arrow {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }

    /* ── Submenu — accordion inline, NOT absolute ── */
    .nav-submenu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(0,0,0,0.25) !important;
        border-radius: 0 !important;
        min-width: unset !important;
        width: 100% !important;
        padding: 4px 0 8px !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        display: none !important;
        pointer-events: auto !important;
    }

    .nav-submenu::before { display: none !important; }

    .nav-dropdown.open .nav-submenu { display: block !important; }

    .nav-submenu li { border: none !important; }

    .nav-submenu li a {
        padding: 10px 20px 10px 44px !important;
        font-size: 0.88rem !important;
        color: rgba(255,255,255,0.68) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        transition: color 0.15s !important;
    }

    .nav-submenu li a:hover { color: #fff !important; background: rgba(255,255,255,0.05) !important; }

    /* ── Overlay ── */
    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        top: 72px;
        background: rgba(0,0,0,0.55);
        z-index: 996;
        cursor: pointer;
    }

    .nav-overlay.active { display: block; }

    /* ── Mobile footer (WhatsApp) ── coule juste après la dernière entrée ── */
    .nav-mobile-footer {
        padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        flex-shrink: 0 !important;
        margin-top: 4px !important;
    }

    .nav-whatsapp-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 13px 20px !important;
        background: #25D366 !important;
        color: #fff !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        text-decoration: none !important;
    }

    /* ── Hamburger visible, actions hidden ── */
    .hamburger { display: flex !important; }
    .header-actions .btn { display: none !important; }
}

@media (min-width: 901px) {
    .nav-mobile-header { display: none !important; }
    .nav-mobile-footer  { display: none !important; }
    .nav-overlay        { display: none !important; }
    .hamburger          { display: none !important; }
    .nav                { display: flex !important; pointer-events: auto !important; position: static !important; }
}


/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hero-text { width: 100% !important; }

    .hero-reassurance {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

@media (max-width: 600px) {
    .hero-title { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; }
    .hero-subtitle { font-size: 0.9rem !important; line-height: 1.55 !important; }

    .hero-label {
        font-size: 0.68rem !important;
        padding: 6px 12px 6px 10px !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .hero-reassurance span { font-size: 0.78rem !important; }
    .hero-reassurance .hero-trust-sep { display: none !important; }

    /* Cert chips overlap the image on small phones */
    .hero-cert-chip { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID — 2 columns on phones
═══════════════════════════════════════════════════════════════ */

/* Prevent any section from causing horizontal scroll */
.products, .shop-grid {
    overflow-x: hidden !important;
}

@media (min-width: 360px) and (max-width: 639px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        overflow: hidden !important;
    }

    /* Card — tight layout */
    .product-card {
        overflow: hidden !important;
        min-width: 0 !important;
    }

    /* Smaller image padding */
    .product-image {
        padding: 10px !important;
    }

    /* Compact info area */
    .product-info {
        padding: 10px !important;
    }

    .pc-title {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin-bottom: 3px !important;
        word-break: break-word !important;
    }

    /* Hide subtitle & feature list — not enough room */
    .pc-subtitle,
    .product-features { display: none !important; }

    /* Price */
    .pc-price-current,
    .pc-price {
        font-size: 1rem !important;
        white-space: nowrap !important;
    }

    .price-original { font-size: 0.72rem !important; }
    .promo-badge    { font-size: 0.62rem !important; padding: 2px 6px !important; }

    /* Stock line — smaller */
    .stock-line,
    .product-stock-line { font-size: 0.72rem !important; }

    /* Category badge */
    .product-badge {
        font-size: 0.58rem !important;
        padding: 3px 7px !important;
        top: 8px !important;
        right: 8px !important;
    }

    /* Promo badge */
    .badge-promo {
        font-size: 0.58rem !important;
        padding: 3px 8px !important;
    }

    /* Action buttons — STACK vertically, full width, smaller */
    .product-card-actions {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin-top: 8px !important;
    }

    .product-card-actions .btn,
    .product-card .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 7px 6px !important;
        font-size: 0.72rem !important;
        gap: 4px !important;
    }

    .product-card .btn i { font-size: 0.72rem !important; }
}

@media (max-width: 359px) {
    .product-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════
   CATEGORIES GRID
═══════════════════════════════════════════════════════════════ */

@media (max-width: 500px) {
    .categories-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .category-card {
        padding: 18px 12px !important;
    }

    .category-card h3 { font-size: 0.88rem !important; }
    .category-card p  { font-size: 0.75rem !important; }
    .category-icon    { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .stats-bar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-bar-item {
        padding: 14px 10px !important;
        text-align: center !important;
    }

    .stat-bar-item .stat-value { font-size: 1.4rem !important; }
    .stat-bar-item .stat-label { font-size: 0.72rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   BRANDS GRID
═══════════════════════════════════════════════════════════════ */

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

    .brand-logo-badge img {
        width: 48px !important;
        height: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 20px !important;
    }

    .footer-brand {
        grid-column: 1 / -1 !important;
    }

    .footer-seo-block { display: none !important; }
}

@media (max-width: 480px) {
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer-brand { grid-column: unset !important; }

    .footer-bottom p { font-size: 0.8rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL SPACING & TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section-title {
        font-size: clamp(1.3rem, 6vw, 1.9rem) !important;
        line-height: 1.2 !important;
    }

    .section-subtitle { font-size: 0.9rem !important; }

    .btn-large {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    /* Prevent tables from overflowing */
    .specs-table {
        font-size: 0.82rem !important;
    }
    .specs-key, .specs-val {
        padding: 9px 10px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   BOUTIQUE / CATEGORY PAGE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .shop-hero { padding: 30px 0 !important; }
    .shop-hero h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }

    .shop-search { max-width: 100% !important; }
    .shop-search input { font-size: 0.9rem !important; }

    .filter-tabs { gap: 8px !important; }
    .filter-tab  { font-size: 0.82rem !important; padding: 7px 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .product-thumbs-row {
        gap: 6px !important;
    }

    .product-thumb {
        min-width: 58px !important;
        width: 58px !important;
        height: 58px !important;
    }

    .sticky-order-bar {
        padding: 10px 16px !important;
    }

    .color-swatches {
        gap: 8px !important;
    }

    .color-swatch {
        width: 32px !important;
        height: 32px !important;
    }

    .scarcity-tag {
        font-size: 0.75rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   BLOG / ARTICLE PAGES
═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .article-hero-banner  { min-height: 260px !important; }
    .article-intro        { padding: 16px !important; font-size: 0.95rem !important; }
    .article-cta-actions  { flex-direction: column !important; }
    .article-cta-actions .btn { width: 100% !important; justify-content: center !important; }
    .breadcrumb-hero      { font-size: 0.78rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   QUIZ SECTION
═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .quiz-options { grid-template-columns: 1fr !important; }
    .quiz-card    { padding: 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   WHATSAPP FLOAT
═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .whatsapp-float {
        bottom: 18px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO SIZE on small phones
═══════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
    .logo-img-link img {
        height: 48px !important;
    }
}