/*
 * SR – mobile et tablette (chargée après sr-site.css).
 *
 * 1. Menu à tiroir jusqu'à 1023 px (avant : 781 px). Entre 782 et ~945 px le menu horizontal
 *    ne tenait pas sur sa ligne (liens sur deux lignes, en-tête de 104 à 115 px au lieu de 78).
 * 2. Le flou d'arrière-plan (backdrop-filter) de .sr-header faisait de l'en-tête le bloc de référence
 *    du panneau « position: fixed » : le panneau s'accrochait à l'en-tête au lieu de la fenêtre et,
 *    rangé à droite, élargissait le document d'une largeur d'écran. Le fond et le flou passent sur
 *    un pseudo-élément : même aspect, mais le panneau est de nouveau ancré à la fenêtre.
 * 3. Panneau fermé : visibility: hidden (ni clic, ni tabulation, ni lecteur d'écran).
 * 4. Apparitions latérales (.sr-reveal-right) : décalage de départ ramené de 40 à 24 px, la marge
 *    latérale des sections, pour ne plus dépasser de 16 px à droite avant l'apparition.
 *
 * Au-dessus de 1023 px, seule la règle 4 s'applique (jusqu'à 1339 px) et elle ne touche que le
 * point de départ de l'animation, pas le rendu final.
 */

@media (max-width: 1023px) {

    header.xpro-theme-builder-header { z-index: 99999; }

    /* --- En-tête : fond et flou sur un pseudo-élément --- */
    :root:root:root:root .elementor .sr-header {
        z-index: 99999 !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    :root:root:root:root .elementor .sr-header::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: -1px !important;
        left: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: -1 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        border: 0 !important;
        background: rgba(245, 241, 232, 0.85) !important;
        -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
        backdrop-filter: saturate(140%) blur(10px) !important;
        transition: background var(--sr-duration) var(--sr-ease) !important;
    }
    :root:root:root:root .elementor .sr-header.is-scrolled::before { background: rgba(245, 241, 232, 0.96) !important; }

    /* --- Bouton hamburger --- */
    :root:root:root:root .elementor .sr-menu-toggle {
        display: block !important;
        position: relative !important;
        z-index: 100000 !important;
        flex: 0 0 auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    :root:root:root:root .elementor .sr-menu-toggle:focus-visible {
        outline: 2px solid var(--wp--preset--color--accent-dark, #2d2a26) !important;
        outline-offset: 2px !important;
    }

    /* --- Panneau : ancré à la fenêtre, hors d'atteinte quand il est fermé --- */
    :root:root:root:root .elementor .sr-nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        z-index: 99990 !important;
        background: #f5f1e8 !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;      /* repli */
        justify-content: safe center !important;     /* centré, mais défilable depuis le haut si ça déborde */
        align-items: center !important;
        padding: 5rem 2rem 2rem !important;
        gap: 1.5rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform 400ms var(--sr-ease), visibility 0s linear 400ms !important;
    }
    :root:root:root:root .elementor .sr-nav.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: transform 400ms var(--sr-ease), visibility 0s linear 0s !important;
    }
    /* Les éléments du menu gardent leur hauteur ; si l'écran est trop court, le panneau défile. */
    :root:root:root:root .elementor .sr-nav .sr-nav-link,
    :root:root:root:root .elementor .sr-nav .sr-btn { flex: 0 0 auto !important; }

    :root:root:root:root .elementor .sr-nav-link { font-size: 1.5rem !important; padding: 0.85rem 0 !important; color: #2d2a26 !important; }

    /* Zone tactile : sous Elementor le lien est à l'intérieur du bloc .sr-nav-link / .sr-btn.
       L'espacement passe du bloc au lien, pour que toute la hauteur soit cliquable (44 px au moins). */
    :root:root:root:root .elementor .sr-nav :not(a).sr-nav-link { padding: 0 !important; }
    :root:root:root:root .elementor .sr-nav :not(a).sr-nav-link > a { display: block !important; padding: 0.85rem 0.75rem !important; margin: 0 -0.75rem !important; min-height: 44px !important; box-sizing: border-box !important; }
    :root:root:root:root .elementor .sr-nav :not(a).sr-btn { padding: 0 !important; }
    :root:root:root:root .elementor .sr-nav :not(a).sr-btn > a { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0.6rem 1.25rem !important; min-height: 44px !important; box-sizing: border-box !important; }
    :root:root:root:root .elementor .sr-nav a.sr-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; box-sizing: border-box !important; }

    body:has(.sr-nav.is-open) .sr-hero,
    body:has(.sr-nav.is-open) .sr-hero__media { z-index: -10 !important; }
    body:has(.sr-nav.is-open) { overflow: hidden !important; }
}

@media (max-width: 1023px) and (max-height: 700px) {
    :root:root:root:root .elementor .sr-nav { gap: 0.5rem !important; padding-top: 4.5rem !important; }
    :root:root:root:root .elementor .sr-nav-link { font-size: 1.25rem !important; }
    :root:root:root:root .elementor .sr-nav a.sr-nav-link { padding: 0.6rem 0 !important; }
    :root:root:root:root .elementor .sr-nav :not(a).sr-nav-link > a { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
}

/* --- Apparitions latérales : ne pas dépasser la marge de la section --- */
@media (max-width: 1339px) and (prefers-reduced-motion: no-preference) {
    :root:root:root:root .elementor .sr-reveal-right:not(.is-visible) { transform: translateX(24px); }
}

/* --- Très petits écrans (moins de 360 px) : les grilles à colonnes de 280-300 px minimum dépassaient
   de la zone utile (272 px à 320 px de large). Une seule colonne, à la largeur disponible. --- */
@media (max-width: 359px) {
    :root:root:root:root .elementor .sr-equip-grid,
    :root:root:root:root .elementor .sr-testimonial-grid,
    :root:root:root:root .elementor .sr-activity-grid,
    :root:root:root:root:root:root:root .sr-le-gite-s21,
    .sr-blog-query .wp-block-post-template.wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; }
}