/* =====================================================
   MAISON LE DUC — MOBILE FIX v1.1
   Corrections visuelles version mobile
   ===================================================== */

@media (max-width: 1024px) {

    /* -----------------------------------------------
       FIX 1 — Zones blanches / conteneurs vides
       ATTENTION : on n'exclut PAS les sections avec <video>
       (la règle CSS ne doit pas masquer les heroes vidéo)
    ----------------------------------------------- */

    /* Masquer uniquement les sections vraiment vides (sans aucun enfant) */
    .ct-section:empty,
    .wp-block-cover:empty,
    [class*="hero"]:empty,
    [class*="slider"]:empty,
    [class*="banner"]:empty {
        display: none !important;
        min-height: 0 !important;
    }

    /* Réinitialiser les min-height excessifs */
    .ct-section,
    section {
        min-height: auto !important;
    }

    /* -----------------------------------------------
       FIX 6 — Vidéo autoplay accueil
       IMPORTANT : NE PAS masquer les <video> en CSS —
       le JS s'en charge après avoir appliqué muted+autoplay.
       L'ancienne règle "video:not([src])" était un bug :
       elle masquait les vidéos avec des <source> enfants.
    ----------------------------------------------- */

    /* S'assurer que les conteneurs vidéo restent visibles */
    [class*="hero"] video,
    [class*="banner"] video,
    section video,
    .ct-section video {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px;
        object-fit: cover;
    }


    /* -----------------------------------------------
       FIX 2 — Texte description débordant (overflow-x)
    ----------------------------------------------- */

    .woocommerce div.product .woocommerce-product-details__short-description,
    .woocommerce div.product .woocommerce-Tabs-panel,
    .woocommerce div.product .entry-summary,
    .woocommerce div.product .summary,
    .product-short-description,
    .ct-text-block,
    .entry-content,
    .entry-content p,
    .oxy-rich-text,
    .oxy-pro-text {
        overflow-x: hidden !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .woocommerce div.product .entry-summary *,
    .woocommerce-product-details__short-description *,
    .product-short-description * {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------
       FIX 3 — Logo qui chevauche les images produit
       Deux causes : z-index + absence de padding-top
       sous le header fixe/sticky
    ----------------------------------------------- */

    /* Réduire le z-index du header pour éviter l'overlap */
    .oxy-sticky-header,
    .ct-sticky-header,
    header.sticky,
    header[class*="sticky"],
    .ct-header[class*="sticky"],
    .site-header {
        z-index: 999 !important;
    }

    /* Galerie produit : passe sous le header */
    .woocommerce div.product div.images,
    .woocommerce-product-gallery,
    .woocommerce-product-gallery__wrapper,
    .ct-woo-product-gallery {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
    }

    /* Logo ne doit pas flotter au-dessus du contenu */
    header .logo,
    header .site-logo,
    header img[class*="logo"],
    .ct-header .logo,
    .oxy-header .logo {
        position: relative !important;
        z-index: auto !important;
    }

    .woocommerce.single-product header img,
    .single-product .ct-header img[class*="logo"] {
        position: static !important;
    }

    /* Compenser la hauteur du header fixe sur les pages produit
       afin que le contenu commence sous le header et non derrière */
    .single-product main,
    .single-product #main,
    .single-product .ct-main,
    .single-product .site-content,
    .single-product #content {
        padding-top: calc(var(--header-height, 70px) + 8px) !important;
    }

    /* Idem pour les pages blog/archive si le header est fixe */
    .blog .site-content,
    .archive .site-content,
    .blog main,
    .archive main {
        padding-top: calc(var(--header-height, 70px) + 8px) !important;
    }


    /* -----------------------------------------------
       FIX 4 — Prix WooCommerce manquant / "€" seul
    ----------------------------------------------- */

    .woocommerce-Price-amount,
    .woocommerce-Price-amount bdi,
    .price .amount,
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        display: inline-flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: inherit !important;
        font-size: inherit !important;
    }

    .woocommerce-Price-currencySymbol {
        display: inline !important;
        visibility: visible !important;
    }

    .woocommerce-Price-amount bdi * {
        display: inline !important;
        visibility: visible !important;
    }


    /* -----------------------------------------------
       FIX 5 — Barre CTA sticky coupée (PERSONNALISER / ACHETER)
    ----------------------------------------------- */

    .ct-woo-product-footer,
    .product-sticky-footer,
    .woocommerce-variation-add-to-cart,
    [class*="sticky-footer"],
    [class*="product-footer"],
    [class*="add-to-cart-bar"],
    .ct-buy-now-bar {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ct-woo-product-footer > *,
    .product-sticky-footer > *,
    [class*="sticky-footer"] > *,
    [class*="add-to-cart-bar"] > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 50% !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------
       FIX 7 — Badges parasites dans le menu mobile
       (DE, BE, FR… insérés par WPML / Polylang)
       Cibler précisément les composants WPML/Polylang
       pour ne pas masquer du contenu légitime
    ----------------------------------------------- */

    /* Sélecteurs spécifiques WPML */
    nav .wpml-ls,
    nav .wpml-ls-item,
    nav .wpml-ls-slot,
    nav .wpml-ls-legacy-list-horizontal,
    nav .icl-language-selector,
    nav [class*="wpml"],

    /* Sélecteurs spécifiques Polylang */
    nav [class*="polylang"],
    nav .lang-item:not([class*="menu-item"]),
    nav li.lang-item,

    /* Drapeaux et codes pays dans les liens */
    nav [class*="lang-flag"],
    nav .icl-ls-flag,
    nav .wpml-ls-flag,
    .ct-mobile-menu .lang-item,
    .mobile-menu .lang-item,

    /* Spans et éléments inline portant un code pays */
    nav li > a > .country-code,
    nav li > a > [class*="lang"],
    nav li > a > [class*="country"],
    nav li > a > [class*="flag"],
    nav li > a > .icl-ls-flag,

    /* Éléments dont le texte est uniquement un code de langue */
    nav li[class*="lang"],
    nav li[class*="language"] {
        display: none !important;
    }

}
/* Fin media query mobile */