/* ============================================================
   MOBILE-FIXES.CSS — universel autogen sites
   Version 2, 2026-04-10 — mobile-first FULL BLEED
   Trafic mobile > desktop. Sur mobile : ZÉRO marge wrapper,
   le contenu prend toute la largeur, padding interne sur le
   texte uniquement (12px), médias et blocs en pleine largeur.
   Charge via mu-plugin mobile-fixes.php (priority 9999)
   ============================================================ */

/* === 1. Anti-overflow horizontal global (toujours) === */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}
img, video, iframe, embed, object, svg, picture {
    max-width: 100%;
    height: auto;
}

/* === 2. MOBILE (≤ 782px) — FULL BLEED === */
@media (max-width: 782px) {

    /* --- 2.1 Base lisibilité --- */
    html { font-size: 16px; }
    body {
        font-size: 16px !important;
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- 2.2 RESET TOTAL des wrappers (zéro padding/margin latéral)
            Spécificité maximale pour battre les CSS site-specific avec !important --- */
    html body.one-container .site-content,
    html body.separate-containers .site-content,
    html body.one-container .inside-article,
    html body.separate-containers .inside-article,
    html body.blog .site-main,
    html body.archive .site-main,
    html body .site-content,
    html body .inside-article,
    html body main.site-main,
    html body article,
    html body .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .site,
    #page,
    .site-content,
    #content,
    .content-area,
    main,
    #main,
    #primary,
    .site-main,
    article,
    .post,
    .page,
    .entry,
    .entry-content,
    .post-content,
    .container,
    .grid-container,
    .inside-article,
    .inside-page-header,
    .inside-content,
    .one-container,
    .ast-container,
    .ast-container-fluid,
    .wp-site-blocks,
    .wp-block-group,
    .elementor-section,
    .elementor-container,
    .elementor-row,
    .et_pb_section,
    .et_pb_row,
    .kadence-container,
    .site-content > *,
    #content > * {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* --- 2.3 Padding interne MINIMAL 8px sur le texte uniquement
            (juste pour que le texte ne touche pas pile le bord) --- */
    .entry-content > p,
    .entry-content > h1,
    .entry-content > h2,
    .entry-content > h3,
    .entry-content > h4,
    .entry-content > h5,
    .entry-content > h6,
    .entry-content > ul,
    .entry-content > ol,
    .entry-content > blockquote,
    .entry-content > dl,
    .entry-content > address,
    .entry-content > .wp-block-paragraph,
    .entry-content > .wp-block-heading,
    .entry-content > .wp-block-list,
    .entry-content > .wp-block-quote,
    .post-content > p,
    .post-content > h1,
    .post-content > h2,
    .post-content > h3,
    .post-content > h4,
    .post-content > h5,
    .post-content > ul,
    .post-content > ol,
    .post-content > blockquote {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Header de l'article : titre, meta, byline → léger padding */
    .entry-header,
    .page-header,
    .post-header,
    header.entry-header,
    .entry-meta,
    .post-meta {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* --- 2.4 Médias et blocs LARGES en full bleed (pleine largeur écran) --- */
    .entry-content > figure,
    .entry-content > img,
    .entry-content > picture,
    .entry-content > video,
    .entry-content > .wp-block-image,
    .entry-content > .wp-block-gallery,
    .entry-content > .wp-block-embed,
    .entry-content > .wp-block-video,
    .entry-content > .wp-block-cover,
    .entry-content > .wp-block-table,
    .entry-content > table,
    .entry-content > .wp-block-buttons,
    .entry-content > .wp-block-button,
    .entry-content > .wp-block-group,
    .entry-content > .wp-block-columns,
    .entry-content > [class*="site-"],
    .entry-content > [class*="-card"],
    .entry-content > [class*="-encart"],
    .entry-content > [class*="-summary"],
    .entry-content > [class*="-toc"],
    .entry-content > [class*="-faq"],
    .entry-content > [class*="-table"],
    .entry-content > [class*="-cta"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
    /* Image dans une figure : full width */
    .entry-content figure img,
    .entry-content figure picture,
    .entry-content .wp-block-image img {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0;
    }
    /* Figcaption : padding interne pour lisibilité */
    .entry-content figcaption {
        padding: 8px 14px !important;
        font-size: 14px;
        line-height: 1.45;
        text-align: center;
    }

    /* --- 2.5 Tableaux : scroll horizontal interne plutôt que casser layout --- */
    .entry-content table,
    article table {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
    }
    .entry-content table td,
    .entry-content table th {
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* --- 2.6 Code blocks --- */
    .entry-content pre,
    .entry-content code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: normal;
        white-space: pre;
        font-size: 13px;
    }

    /* --- 2.7 Hiérarchie titres --- */
    h1, .entry-title, .page-title {
        font-size: clamp(26px, 7vw, 32px) !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
    }
    h2 { font-size: clamp(22px, 5.8vw, 26px) !important; line-height: 1.25 !important; }
    h3 { font-size: clamp(19px, 4.8vw, 22px) !important; line-height: 1.3 !important; }
    h4 { font-size: clamp(17px, 4.2vw, 19px) !important; }

    /* --- 2.8 Touch targets ≥ 44px --- */
    button,
    .button,
    input[type="submit"],
    input[type="button"],
    .wp-block-button__link,
    .menu-toggle {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px !important;
        font-size: 16px !important;
        line-height: 1.4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    /* Liens menu (navigation) tap-friendly — sans display:flex qui casse les thèmes */
    nav a,
    .main-navigation a,
    .menu > li > a,
    .site-footer a {
        min-height: 44px;
        line-height: 1.4;
        padding: 8px 12px;
    }
    /* Liens INLINE dans paragraphes : pas de min-height (sinon casse le flow) */
    .entry-content p a,
    .entry-content li a,
    .entry-content h2 a,
    .entry-content h3 a {
        min-height: 0;
        padding: 0;
        display: inline;
    }
    /* Inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        min-height: 44px;
        padding: 10px 12px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- 2.9 Header --- */
    .site-header,
    header.site-header,
    #masthead {
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .site-branding,
    .site-logo {
        padding: 12px 14px !important;
        max-width: 100% !important;
    }

    /* --- 2.10 Footer --- */
    .site-footer,
    .footer-widgets,
    .site-info {
        max-width: 100vw !important;
        padding: 16px 14px !important;
    }

    /* --- 2.11 Forms (Contact Form 7) --- */
    .wpcf7,
    .wpcf7 form {
        padding: 0 14px !important;
    }
    .wpcf7 input,
    .wpcf7 textarea,
    .wpcf7 select {
        width: 100% !important;
        font-size: 16px !important;
    }
    .wpcf7-submit {
        width: 100% !important;
        padding: 14px !important;
    }

    /* --- 2.12 Listes --- */
    .entry-content ul,
    .entry-content ol {
        padding-left: 28px !important;
        padding-right: 14px !important;
    }

    /* --- 2.13 Word break sécurité --- */
    .entry-content,
    .entry-title,
    h1, h2, h3, h4 {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }

    /* --- 2.14 Burger button tappable ≥44px --- */
    .menu-toggle,
    .ast-menu-toggle,
    .menu-toggle-open,
    .drawer-toggle,
    button[class*="menu-toggle"],
    button.mobile-menu-button {
        min-width: 44px;
        min-height: 44px;
        padding: 10px !important;
    }

    /* --- 2.15 GeneratePress mobile menu : force vertical drawer ---
            Le CSS site-specific (00-*-specific.php, *-design.css) force souvent
            display:flex sur .main-nav avec !important pour le desktop, sans
            media query, ce qui casse le menu mobile. On override avec spec +1. --- */
    body.wp-theme-generatepress .main-navigation .main-nav,
    body.wp-theme-generatepress .main-navigation .main-nav > ul,
    body.wp-theme-generatepress .main-navigation .menu {
        display: block !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    body.wp-theme-generatepress .main-navigation .main-nav > ul > li,
    body.wp-theme-generatepress .main-navigation .menu > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }
    body.wp-theme-generatepress .main-navigation .main-nav > ul > li > a,
    body.wp-theme-generatepress .main-navigation .menu > li > a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        line-height: 1.4 !important;
        padding: 14px 16px !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    /* Cachée par défaut, visible si .toggled */
    body.wp-theme-generatepress .main-navigation:not(.toggled) .main-nav,
    body.wp-theme-generatepress .main-navigation:not(.toggled) .main-nav > ul,
    body.wp-theme-generatepress .main-navigation:not(.toggled) .menu {
        display: none !important;
    }
    body.wp-theme-generatepress .main-navigation.toggled .main-nav,
    body.wp-theme-generatepress .main-navigation.toggled .main-nav > ul,
    body.wp-theme-generatepress .main-navigation.toggled .menu {
        display: block !important;
    }
    /* Le menu-toggle (burger) reste TOUJOURS visible sur mobile */
    body.wp-theme-generatepress .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* --- 2.16 Astra mobile menu : assure le bouton visible et le drawer ---*/
    body.wp-theme-astra .ast-menu-toggle,
    body.wp-theme-astra .menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 44px;
        min-height: 44px;
    }
    body.wp-theme-astra #ast-mobile-header {
        display: block !important;
    }
    body.wp-theme-astra #ast-desktop-header {
        display: none !important;
    }
    /* Astra mobile menu drawer (toggled via .toggle-on) */
    body.wp-theme-astra .main-header-bar-navigation,
    body.wp-theme-astra .main-header-menu {
        display: block !important;
        width: 100% !important;
    }
    body.wp-theme-astra .main-header-menu li {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }
    body.wp-theme-astra .main-header-menu li a {
        display: block !important;
        padding: 14px 16px !important;
        line-height: 1.4 !important;
    }

    /* --- 2.17 OceanWP mobile menu --- */
    body.wp-theme-oceanwp #mobile-menu,
    body.wp-theme-oceanwp .mobile-menu-wrap {
        display: block !important;
        width: 100% !important;
    }
    body.wp-theme-oceanwp .mobile-menu li {
        display: block !important;
        width: 100% !important;
    }
    body.wp-theme-oceanwp .mobile-menu li a {
        display: block !important;
        padding: 14px 16px !important;
    }
}

/* === 3. Très petit mobile (≤ 380px) === */
@media (max-width: 380px) {
    h1, .entry-title { font-size: 24px !important; line-height: 1.18 !important; }
    h2 { font-size: 20px !important; }
    body { font-size: 15.5px !important; }
    .entry-content > p,
    .entry-content > h2,
    .entry-content > h3,
    .entry-content > ul,
    .entry-content > ol {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* === 4. HUBS / ARCHIVES en grille 2 colonnes (au lieu d'empilé) === */
@media (max-width: 782px) {
    .blog .site-main,
    .archive .site-main,
    .search-results .site-main,
    .home.blog .site-main,
    body.blog #main > .grid-container,
    body.archive #main > .grid-container,
    .latest-posts-grid,
    .posts-grid,
    .post-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        align-items: stretch;
    }
    .blog .site-main > article,
    .archive .site-main > article,
    .search-results .site-main > article,
    .post-grid > article,
    .posts-grid > article {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .blog .site-main > article .inside-article,
    .archive .site-main > article .inside-article {
        padding: 6px !important;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .blog .site-main > article .post-image,
    .blog .site-main > article .featured-image,
    .archive .site-main > article .post-image,
    .archive .site-main > article .featured-image {
        margin: 0 0 6px 0 !important;
        width: 100% !important;
    }
    .blog .site-main > article .post-image img,
    .archive .site-main > article .post-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/10;
        object-fit: cover;
    }
    .blog .site-main > article .entry-title,
    .archive .site-main > article .entry-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
        margin: 4px 0 !important;
    }
    .blog .site-main > article .entry-meta,
    .archive .site-main > article .entry-meta,
    .blog .site-main > article .entry-summary,
    .archive .site-main > article .entry-summary {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    /* Pagination, page header → pleine largeur (span 2 cols) */
    .blog .site-main > .page-header,
    .archive .site-main > .page-header,
    .blog .site-main > .nav-links,
    .archive .site-main > .nav-links,
    .blog .site-main > .pagination,
    .archive .site-main > .pagination,
    .blog .site-main > nav,
    .archive .site-main > nav {
        grid-column: 1 / -1 !important;
    }
}
/* Très petit mobile : 1 colonne (cards trop étroites en 2 cols) */
@media (max-width: 360px) {
    .blog .site-main,
    .archive .site-main,
    .search-results .site-main {
        grid-template-columns: 1fr !important;
    }
}

/* === 5. BLOCS COLLAPSIBLES sur mobile (économie de scroll) ===
   Le JS mobile-fixes.js wrap le contenu dans <details>.
   On style juste le résultat ici. */
@media (max-width: 782px) {
    .entry-content details.mf-collapse {
        margin: 16px 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(0,0,0,0.12);
        border-radius: 8px;
        background: rgba(0,0,0,0.02);
        overflow: hidden;
    }
    .entry-content details.mf-collapse summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 16px;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.3;
        background: rgba(0,0,0,0.04);
        position: relative;
        padding-right: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .entry-content details.mf-collapse summary::-webkit-details-marker { display: none; }
    .entry-content details.mf-collapse summary::after {
        content: "+";
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
        transition: transform 0.2s;
    }
    .entry-content details.mf-collapse[open] summary::after {
        content: "−";
    }
    .entry-content details.mf-collapse > *:not(summary) {
        padding: 14px 16px;
    }
}

/* === 6. KADENCE THEME — fixes complets ===
   Kadence utilise un système de containers/rows en grid qui casse sur mobile.
   Cible: visa-chinois.fr et tout site Kadence. */
@media (max-width: 782px) {
    /* 6.1 Containers Kadence : full width, 0 padding */
    body.wp-theme-kadence .site-container,
    body.wp-theme-kadence .site-header-inner-wrap,
    body.wp-theme-kadence .site-main-header-wrap,
    body.wp-theme-kadence .site-top-header-wrap,
    body.wp-theme-kadence .site-bottom-header-wrap,
    body.wp-theme-kadence .site-header-row-container,
    body.wp-theme-kadence .site-header-row-container-inner,
    body.wp-theme-kadence .site-main-header-inner-wrap,
    body.wp-theme-kadence .site-top-header-inner-wrap,
    body.wp-theme-kadence .site-footer-wrap,
    body.wp-theme-kadence .site-footer-row-container,
    body.wp-theme-kadence .site-footer-row-container-inner {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 6.2 Header rows : flex space-between au lieu de grid cassé */
    body.wp-theme-kadence .site-header-row,
    body.wp-theme-kadence .site-main-header-inner-wrap,
    body.wp-theme-kadence .site-top-header-inner-wrap {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 6.3 Header sections (left/center/right) */
    body.wp-theme-kadence .site-header-section,
    body.wp-theme-kadence .site-header-top-section-left,
    body.wp-theme-kadence .site-header-top-section-right,
    body.wp-theme-kadence .site-header-main-section-left,
    body.wp-theme-kadence .site-header-main-section-center,
    body.wp-theme-kadence .site-header-main-section-right {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Logo/branding peut prendre l'espace restant */
    body.wp-theme-kadence .site-header-main-section-center,
    body.wp-theme-kadence .site-branding {
        flex: 1 1 auto !important;
    }

    /* 6.4 Burger drawer-toggle visible et tappable */
    body.wp-theme-kadence .menu-toggle-open,
    body.wp-theme-kadence .drawer-toggle,
    body.wp-theme-kadence .menu-toggle-style-default,
    body.wp-theme-kadence button[class*="menu-toggle"] {
        position: static !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        z-index: 100 !important;
        flex: 0 0 auto !important;
    }

    /* 6.5 Footer Kadence : empile les sections en 1 colonne */
    body.wp-theme-kadence .site-footer-row {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px !important;
        margin: 0 !important;
    }
    body.wp-theme-kadence .site-footer-section {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    body.wp-theme-kadence .site-top-footer-wrap,
    body.wp-theme-kadence .site-middle-footer-wrap,
    body.wp-theme-kadence .site-bottom-footer-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 6.6 Kadence content area (entry-content / single content) */
    body.wp-theme-kadence .content-container,
    body.wp-theme-kadence .entry-content-wrap,
    body.wp-theme-kadence .entry-wrap,
    body.wp-theme-kadence article.post,
    body.wp-theme-kadence article.page {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* 6.7 Ne pas appliquer la règle hamburger générique sur Kadence
       (Kadence gère son drawer différemment, on aurait masqué le menu) */
    body.wp-theme-kadence .main-navigation .main-nav,
    body.wp-theme-kadence .main-navigation > ul,
    body.wp-theme-kadence .main-navigation .menu,
    body.wp-theme-kadence .main-navigation .sf-menu {
        display: revert !important;
    }
}

/* === 7. CARROUSELS pour grilles 3+ colonnes (cards trop étroites sur mobile) ===
   Cible les grids inline (style="grid-template-columns:repeat(3,1fr)" etc.)
   et les transforme en carrousel scrollable avec snap. */
@media (max-width: 782px) {
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns:repeat(3"],
    div[style*="grid-template-columns: repeat(4"],
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns: repeat(5"],
    div[style*="grid-template-columns:repeat(5"],
    .am-tools-grid,
    .tools-grid,
    .cards-grid-3,
    .cards-grid-4 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
        padding: 12px !important;
        margin: 16px -12px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    div[style*="grid-template-columns: repeat(3"]::-webkit-scrollbar,
    div[style*="grid-template-columns:repeat(3"]::-webkit-scrollbar,
    div[style*="grid-template-columns: repeat(4"]::-webkit-scrollbar,
    div[style*="grid-template-columns:repeat(4"]::-webkit-scrollbar,
    .am-tools-grid::-webkit-scrollbar,
    .tools-grid::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    /* Enfants : largeur fixe avec snap */
    div[style*="grid-template-columns: repeat(3"] > *,
    div[style*="grid-template-columns:repeat(3"] > *,
    div[style*="grid-template-columns: repeat(4"] > *,
    div[style*="grid-template-columns:repeat(4"] > *,
    div[style*="grid-template-columns: repeat(5"] > *,
    div[style*="grid-template-columns:repeat(5"] > *,
    .am-tools-grid > *,
    .tools-grid > * {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        min-width: 78% !important;
        scroll-snap-align: start !important;
        box-sizing: border-box !important;
    }
    /* Indicateur visuel "scroll →" via pseudo-element */
    div[style*="grid-template-columns: repeat(3"]::after,
    div[style*="grid-template-columns:repeat(3"]::after,
    .am-tools-grid::after,
    .tools-grid::after {
        content: "";
        flex: 0 0 12px;
    }
}

/* === 8. MOBILE DRAWER UNIVERSEL (mobile-fixes.js) ===
   Fallback drawer pour tous les thèmes, ne dépend d'aucun JS thème.
   Affiché quand body.mf-menu-open. */
#mf-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 340px;
    height: 100vh;
    background: #fff;
    z-index: 999999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
}
#mf-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    display: none;
}
@media (max-width: 782px) {
    #mf-mobile-drawer { display: block; }
    #mf-mobile-backdrop { display: block; }
}
body.mf-menu-open { overflow: hidden !important; }
body.mf-menu-open #mf-mobile-drawer { transform: translateX(0); }
body.mf-menu-open #mf-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
}
.mf-drawer-inner {
    padding: 60px 0 40px;
    min-height: 100vh;
    box-sizing: border-box;
}
.mf-drawer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mf-drawer-close:hover { background: rgba(0, 0, 0, 0.06); }
.mf-drawer-nav {
    width: 100%;
}
.mf-drawer-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}
.mf-drawer-menu li {
    list-style: none !important;
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    height: auto !important;
}
.mf-drawer-menu li a {
    display: block !important;
    padding: 16px 24px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
}
.mf-drawer-menu li a:hover,
.mf-drawer-menu li a:active {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #000 !important;
}
.mf-drawer-menu li ul {
    list-style: none !important;
    padding-left: 16px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.02);
}
.mf-drawer-menu li ul li a {
    padding: 12px 24px !important;
    font-size: 15px !important;
    min-height: 44px !important;
}

/* === 9. Fixes spécifiques (overflow culprits) === */

/* bricoworld.it : formes décoratives qui débordent */
@media (max-width: 782px) {
    .ly-dyn-hero-shape,
    [class*="ly-dyn-shape"] {
        display: none !important;
    }
}

/* hotel-arpege.fr : nav GP qui ne se replie pas (cible spécifique) */
@media (max-width: 782px) {
    body.hotel-arpege .main-navigation,
    .hotel-arpege-fix .main-navigation {
        max-width: 100vw !important;
    }
}

/* portes-store.fr : .ps-hero qui déborde */
/* veterinairebeaublanc.fr : .hero-visual qui déborde */
/* eloasweetashoney.com : .inside-header flex qui pousse nav hors viewport */
@media (max-width: 782px) {
    .ps-hero,
    .hero-visual,
    .iq-hero,
    .iq-hero-inner,
    [class*="-hero"],
    [class*="hero-shape"],
    [class*="-hero-bg"],
    .decorative-shape,
    .bg-shape,
    /* High-specificity overrides pour break-out hacks (calc(-50vw+50%) etc.) */
    body .ps-hero,
    body .hero-visual,
    body .iq-hero,
    .separate-containers .inside-article .iq-hero,
    .one-container .inside-article .iq-hero,
    .separate-containers .inside-article [class*="-hero"],
    .one-container .inside-article [class*="-hero"] {
        max-width: 100vw !important;
        width: 100% !important;
        overflow: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        transform: none !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: auto !important;
    }
    .hero-visual > *,
    .ps-hero > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* GeneratePress .inside-header : forcer flex contraint au viewport */
    .inside-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        max-width: 100vw !important;
        width: 100% !important;
        padding: 8px 12px !important;
        gap: 8px;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .inside-header > * {
        max-width: 100% !important;
        flex-shrink: 1 !important;
    }
    .inside-header .site-branding,
    .inside-header .site-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    .inside-header .main-navigation,
    .inside-header .inside-navigation {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        position: static !important;
        float: none !important;
    }
    /* GP nav-float-right body : reset float */
    .nav-float-right .inside-header > .main-navigation,
    .nav-float-right .main-navigation {
        float: none !important;
        position: static !important;
    }
    /* menu-toggle : pas de positionnement absolu */
    .menu-toggle {
        position: static !important;
        float: none !important;
        right: auto !important;
        left: auto !important;
    }
    /* Force tout élément absolu/fixed à respecter le viewport */
    .site *[style*="position: absolute"],
    .site *[style*="position:absolute"] {
        max-width: 100vw !important;
    }
}