/* ==========================================================================
   Listing restaurant : UX carte / split (scopé .kl-linsting-cpt--progressive)
   + barre filtres « integrated » pour TOUTES les routes listing (sous-pages
   région / spécificité, pages ES/DE/EN/IT, etc.) — chargé via themeStyleScript.
   ========================================================================== */

.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more {
    text-align: center;
    padding: 8px 0 16px;
}

/* --------------------------------------------------------------------------
   Left column wrapper. In grid mode this is a transparent block that just
   holds the cards grid + load-more zone. In map mode it becomes the 35%
   flex item that previously was the swiper view itself, so the load-more
   zone is no longer trapped inside the (overflow-leaky) swiper container.
   -------------------------------------------------------------------------- */
.kl-linsting-cpt--progressive .kl-linsting-cpt__listing--col-left {
    width: 100%;
}

@media (min-width: 992px) {
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="map"] .kl-linsting-cpt__listing--col-left {
        width: 35%;
        flex: 0 0 35%;
        display: flex;
        flex-direction: column;
    }
    /* main.min.css applies width:35% on --view--grid for map mode; inside
       the new column wrapper it must take the full column width instead. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="map"] .kl-linsting-cpt__listing--col-left .kl-linsting-cpt__listing--view--grid {
        width: 100% !important;
    }
}

/* Même écart liste / carte qu’en split progressif (~40px, réf. Airbnb PJ2) :
   le thème impose `gap: 80px` sur `.kl-linsting-cpt__listing[data-mode=map]`. */
@media (min-width: 992px) {
    .kl-linsting-cpt__listing[data-mode="map"] {
        gap: 40px !important;
    }
}

/* In map view, the load-more zone sits below the swiper column. It is
   no longer inside the swiper container, so no z-index hack is needed
   to escape the slide stacking; we just give it some breathing room. */
.kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="map"] .kl-linsting-cpt--load-more {
    margin-top: 24px;
    padding-top: 16px;
}

/* The load-more skeleton is irrelevant in map view (the visible swiper
   slot is one card tall and we never show "ghost" cards there). */
.kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="map"] .kl-linsting-cpt--load-more__skeleton {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Marker tooltip preview overflow guard. By default the .marker-content
   popup sits ABOVE the marker (bottom: 20px). For markers near the top
   of the map this clips the popup; JS toggles .marker-content--below to
   flip it under the marker instead, anchored from the top of the marker.
   -------------------------------------------------------------------------- */
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content.marker-content--below {
    bottom: auto !important;
    top: 100% !important;
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Pin highlight separation.
   The compiled main.min.css makes .marker-content opacity:1 as soon as the
   marker has .highlight-marker. That conflates two distinct UX states:
     - "this card is being hovered → just light up the pin"   (no popup)
     - "this card is the active one → show the rich preview"  (popup)
   We split the two by gating the rich preview behind an extra .is-active
   modifier (added by syncActiveCardFromEl / marker click). Hover-driven
   highlights only add .highlight-marker → pin lit, popup hidden.
   -------------------------------------------------------------------------- */
.kl-linsting-cpt--progressive .kl-map-cart .marker.highlight-marker:not(.is-active) [data-tooltip] > .marker-content {
    opacity: 0 !important;
    pointer-events: none;
}

/* Quand la preview est ouverte, réactiver les clics (lien fiche, croix). */
.kl-linsting-cpt--progressive #js-map .marker.is-active [data-tooltip] > .marker-content,
.kl-linsting-cpt--progressive .kl-map-cart .marker.is-active [data-tooltip] > .marker-content {
    pointer-events: auto !important;
}

/*
 * Preview pin (mini-map) : dans le DOM le <a.kl-mini-card--link> est AVANT la vignette
 * et le texte, qui se retrouvent au-dessus en peinture → les clics n’atteignaient pas
 * le lien. On laisse passer les événements à travers tout sauf le lien (et la croix,
 * hors mini-card).
 */
.kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__mini-map > *:not(.kl-mini-card--link),
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__mini-map > *:not(.kl-mini-card--link) {
    pointer-events: none;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__mini-map .kl-mini-card--link,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__mini-map .kl-mini-card--link {
    pointer-events: auto;
}

/* Mobile : sans preview active, le bloc .marker-content reste transparent aux
   clics (sinon le handler ignorait l’ouverture — la surface couvre souvent le pin). */
@media (max-width: 991.98px) {
    .kl-linsting-cpt--progressive #js-map .marker:not(.is-active) [data-tooltip] > .marker-content,
    .kl-linsting-cpt--progressive .kl-map-cart#js-map .marker:not(.is-active) [data-tooltip] > .marker-content {
        pointer-events: none !important;
    }

    /*
     * main.min.css (listing legacy) : sous lg, `.kl-map-cart .marker … .marker-content`
     * est en `display: none !important` — prévu quand la preview passait par `.kl-info_windows_box`
     * (masquée ici sur mobile). Pour le hub progressif, la preview est sur le pin : dès que
     * JS ajoute `.is-active`, il faut rétablir l’affichage sinon le pin rougit mais la carte
     * reste invisible.
     */
    .kl-linsting-cpt--progressive #js-map .marker.is-active [data-tooltip] > .marker-content,
    .kl-linsting-cpt--progressive .kl-map-cart#js-map .marker.is-active [data-tooltip] > .marker-content {
        display: block !important;
        white-space: normal !important;
        opacity: 1 !important;
    }

    /*
     * main.min.css : `.marker-content` en min-width 320px + typo 16px (listing legacy).
     * Sur mobile hub, la preview recouvre trop la carte : format compact, desktop inchangé.
     */
    .kl-linsting-cpt--progressive #js-map .marker .marker-content,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content {
        min-width: 0 !important;
        width: min(252px, calc(100vw - 40px)) !important;
        max-width: min(252px, calc(100vw - 40px)) !important;
        max-height: min(200px, 32svh) !important;
        border-radius: 10px;
        padding-bottom: 4px;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--thumb,
    .kl-linsting-cpt--progressive #js-map .marker .marker-content img,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--thumb,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content img {
        max-height: 72px !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__other-fiche,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__other-fiche,
    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__mini-map,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__mini-map {
        padding: 6px 8px 6px !important;
        gap: 0.25rem !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--title,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--title {
        font-size: 0.8125rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.15rem !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--item_icon,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--item_icon,
    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--item_text,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--item_text {
        font-size: 0.6875rem !important;
        line-height: 1.3 !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--item_icon i,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--item_icon i {
        font-size: 0.75rem !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content__close,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close {
        width: 28px;
        height: 28px;
        top: 4px;
        right: 4px;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--action .btn,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--action .btn {
        min-height: 32px;
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }
}

/* Bouton fermer + carte preview : dimensions bornées, scroll interne */
.kl-linsting-cpt--progressive #js-map .marker .marker-content,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content {
    position: relative;
    max-width: min(300px, calc(100vw - 40px));
    max-height: min(360px, 46vh);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    border-radius: 12px;
    padding-bottom: 10px;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--thumb,
.kl-linsting-cpt--progressive #js-map .marker .marker-content img,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--thumb,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content img {
    max-height: 120px !important;
    object-fit: cover;
    width: 100%;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__other-fiche,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__other-fiche {
    padding: 10px 12px 12px !important;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 8;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #292c3d;
    box-shadow: 0 2px 12px rgba(41, 44, 61, 0.16), 0 0 0 1px rgba(41, 44, 61, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.88);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.kl-linsting-cpt--progressive #js-map .marker.is-active .marker-content__close,
.kl-linsting-cpt--progressive .kl-map-cart .marker.is-active .marker-content__close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close:hover,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close:hover {
    background: #fff;
    box-shadow: 0 4px 18px rgba(41, 44, 61, 0.22), 0 0 0 1px rgba(41, 44, 61, 0.08);
    transform: scale(1.05);
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close:focus-visible,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close:focus-visible {
    outline: 2px solid var(--kl-color_primary, #e2001a);
    outline-offset: 2px;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close-x,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close-x {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close-x::before,
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close-x::after,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close-x::before,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close-x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform-origin: center;
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close-x::before,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.kl-linsting-cpt--progressive #js-map .marker .marker-content__close-x::after,
.kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile : les règles « globales » ci-dessus viennent après le premier bloc
   @media max-width — sans ce rappel, vignette 120px + bouton fermer 34px
   restaient appliqués sur téléphone. */
@media (max-width: 991.98px) {
    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card--thumb,
    .kl-linsting-cpt--progressive #js-map .marker .marker-content img,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card--thumb,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content img {
        max-height: 72px !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content__close,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content__close {
        width: 28px !important;
        height: 28px !important;
        top: 4px !important;
        right: 4px !important;
        z-index: 24 !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__other-fiche,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__other-fiche {
        padding: 6px 8px 6px !important;
    }

    /*
     * main.min : `.kl-mini-card--thumb` ≈197px + fond gris. On garde le modèle
     * du thème (image en absolute qui remplit la vignette) pour ne pas la masquer
     * sous `.kl-mini-card--link::before` (z-index 11) : boîte fixe 72px + thumb au-dessus.
     */
    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__mini-map .kl-mini-card--thumb,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__mini-map .kl-mini-card--thumb {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
        margin-bottom: 4px !important;
        background-color: transparent !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 12 !important;
    }

    .kl-linsting-cpt--progressive #js-map .marker .marker-content .kl-mini-card__mini-map .kl-mini-card--thumb img,
    .kl-linsting-cpt--progressive .kl-map-cart .marker .marker-content .kl-mini-card__mini-map .kl-mini-card--thumb img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }
}

/* Hover-only pin lighting: re-uses the .highlight-marker visual treatment
   for the pin (color, scale) without the rich preview. */
/* Pin survolé depuis la liste : doit toujours apparaître AU-DESSUS de tous
   les autres marqueurs (Google Maps applique son propre z-index inline sur
   les .marker selon leur lat/lng → on l'écrase avec un z-index extrême). La
   règle s'applique aussi côté .kl-map-cart#js-map (host alterné). */
.kl-linsting-cpt--progressive #js-map .marker.pin-hover,
.kl-linsting-cpt--progressive .kl-map-cart#js-map .marker.pin-hover,
.kl-linsting-cpt--progressive #js-map > div > .marker.pin-hover {
    z-index: 99999 !important;
}
.kl-linsting-cpt--progressive #js-map .marker.pin-hover .marker-pin,
.kl-linsting-cpt--progressive .kl-map-cart#js-map .marker.pin-hover .marker-pin {
    background: var(--kl-color_primary, #e2001a) !important;
    color: #fff !important;
    /* IMPORTANT : le .marker-pin est positionné absolument par main.css
       (bottom:10px; left:50%; transform:translateX(-50%)). Surcharger avec
       position:relative casserait l'ancrage et déplaçait visuellement le pin
       en haut-gauche de son .marker (effet « pin déplacé »). On garde donc
       la position absolute d'origine, et on combine la translateX(-50%) avec
       le scale via une seule transform. */
    transform: translateX(-50%) scale(1.18);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 20px rgba(41, 44, 61, 0.45);
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Desktop split view (Airbnb-style): liste à gauche, carte fixée au viewport
   à droite (position + dimensions pilotées par JS via --kl-split-map-*).
   La colonne gauche reçoit un margin-right pour ne pas passer sous la carte.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--col-left {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        max-width: none;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--view--map {
        display: block !important;
        position: fixed !important;
        left: var(--kl-split-map-left, auto);
        top: var(--kl-split-map-top, 120px);
        width: var(--kl-split-map-width, 42vw);
        height: var(--kl-split-map-height, calc(100vh - 160px));
        max-width: min(var(--kl-split-map-width, 50vw), calc(100vw - var(--kl-split-map-left, 0px) - 8px));
        /* Double plafond : la hauteur JS + jamais plus bas que le bas du viewport depuis --top */
        max-height: min(
            var(--kl-split-map-height, 85vh),
            calc(100vh - var(--kl-split-map-top, 0px) - 12px)
        ) !important;
        flex: 0 0 0 !important;
        min-width: 0 !important;
        z-index: 40;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 28px rgba(41, 44, 61, 0.12);
        box-sizing: border-box;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-map-cart#js-map {
        width: 100%;
        height: 100% !important;
        min-height: 0;
        max-height: none !important;
        isolation: isolate;
    }
    /* Liste scrollée au-delà du wrapper : hauteur carte ~0 — éviter un carré
       vide cliquable et laisser Google Maps se mettre en pause visuelle. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--view--map.kl-split-map-host--clipped {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease;
    }
}

/* Spacer mobile hub : inutile en desktop (barre non fixed). */
@media (min-width: 992px) {
    .kl-progressive-mobile-filter-bar-spacer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .kl-filters-active-count {
        display: none !important;
    }
}

/* Moins d’air entre la grille de cards et la zone load-more (PJ3). */
@media (min-width: 992px) {
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt--load-more {
        margin-top: 0.75rem !important;
    }
}

/* --------------------------------------------------------------------------
   Barre filtres / recherche : sticky desktop (réf. Airbnb PJ3).
   - `top` explicite sous le header sticky (`--header--h-stick`) pour que la
     barre reste accessible à tout scroll (listing principal + split carte).
   - Sous-pages (`listing-filters`) : barre dans `.container` sans classe
     `--progressive` → même comportement via `body.single-sous-page`.
   - `body.kl-scroll-down` (main.js) continue de forcer `top: 0` quand le
     header est masqué sur le listing progressif.
   Sur <992px le thème force .kl-linsting-cpt__search en position:fixed,
   drawer « Filtres » : correctif mobile inchangé ci-dessous.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Barre filtres : fixed plein écran sur desktop pour qu'elle reste
     * accessible quel que soit le niveau de scroll (au-delà du listing
     * lui-même). Un placeholder JS (.kl-listing-filters-spacer) ajouté juste
     * avant la barre conserve la place dans le flux pour éviter que les
     * cards remontent sous la barre. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search,
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters,
    .kl-section-listing-filters .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt__search.kl-linsting-cpt__search--filters,
    .kl-section-listing-cpt .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt__search:not(.kl-open-search) {
        position: fixed;
        top: var(--header--h-stick, 88px);
        left: 0;
        right: 0;
        z-index: 60;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 1px 0 rgba(41, 44, 61, 0.06);
        border-bottom: none;
        transition: top 0.2s ease, transform 0.25s ease;
    }

    /* Mode "fin du listing" : la barre coulisse hors écran pour ne pas
     * recouvrir le footer / les sections qui suivent (Pourquoi réserver,
     * avis, footer). Classe ajoutée par JS via IntersectionObserver. */
    body.kl-listing-bar--past .kl-linsting-cpt--progressive .kl-linsting-cpt__search,
    body.kl-listing-bar--past .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters,
    body.kl-listing-bar--past .kl-section-listing-filters .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt__search.kl-linsting-cpt__search--filters,
    body.kl-listing-bar--past .kl-section-listing-cpt .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt__search:not(.kl-open-search) {
        transform: translateY(-110%);
        pointer-events: none;
    }

    /* Compense la barre fixed dans le flux pour ne pas masquer le contenu. */
    .kl-listing-filters-spacer {
        width: 100%;
        flex-shrink: 0;
    }

    /* Retirer filet / ombre sous le formulaire (listing resto + hôtel). */
    .kl-linsting-cpt .kl-linsting-cpt__search .kl-search-establishment {
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
}

/* ------------------------------------------------------------------------
   Hub mobile (/les-restaurants/ progressif) : les filtres doivent rester un
   tiroir plein écran (comme sous-pages listing), fermés au chargement.
   Ancienne règle (sticky opacity:1 ci-dessous) plaçait tout le bloc dans le
   flux → il prenait 60 % du viewport et empêchait la carte + bottom sheet Airbnb.
   On ré-applique le schéma .kl-open-search du _listing.scss. */
@media (max-width: 991.98px) {
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters:not(.kl-open-search) {
        /* display:none : évite tout empilement avec la hero (z-index:-1 pouvait
           laisser des artefacts selon le stacking context) et aucune place dans le flux. */
        display: none !important;
        position: fixed !important;
        top: var(--header--h-stick, 56px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--vh-no-head, calc(100dvh - 56px)) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
        background-color: #fdfcfc !important;
        overflow: hidden;
    }

    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters.kl-open-search {
        /* État OUVERT : doit rester fixed plein viewport — sans cela les règles
           fermées (...:not(.kl-open-search) seulement) disparaissaient au clic
           et le formulaire repassait sous la hero avec un z-index thème trop bas */
        display: block !important;
        position: fixed !important;
        top: var(--header--h-stick, 56px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 12000 !important; /* au-dessus header ~1111, hero, bar sticky (14), stacking isolés */
        background-color: #fdfcfc !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.admin-bar .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters.kl-open-search {
        top: calc(var(--header--h-stick, 56px) + var(--wp-admin--admin-bar--height, 0px)) !important;
    }

    /* En-tête tiroir (Filtres / Réinitialiser) : réduire l’écart avant les champs */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search--filters.kl-open-search .kl-linsting-cpt__search--head {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters.kl-open-search > .kl-border-separator--full:first-of-type {
        display: none !important;
    }

    /* Markup progressif : pas de .container en enfant direct de __search —
       on force la même logique « tiroir » que sous `.kl-open-search>.container`. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters.kl-open-search > .row {
        margin-left: 0;
        margin-right: 0;
        min-height: 100%;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters.kl-open-search > .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - var(--header--h-stick, 56px) - env(safe-area-inset-bottom, 0px));
        min-height: calc(100vh - var(--header--h-stick, 56px) - env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters.kl-open-search .container.kl-max-w-xl-site-lg {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Tiroir ouvert : masquer entièrement la hero. Sinon elle peut rester
       visible au-dessus des champs (fixed du tiroir confiné par transform /
       stacking sur un ancêtre du listing, section sœur hors de ce contexte). */
    body:has(.kl-linsting-cpt--progressive .kl-linsting-cpt__search--filters.kl-open-search) .kl-section-hero-titre-page,
    body:has(.kl-linsting-cpt--progressive .kl-linsting-cpt__search--filters.kl-open-search) .kl-section-wrapper.kl-section-hero-titre-page,
    body:has(.kl-linsting-cpt--progressive .kl-linsting-cpt__search--filters.kl-open-search) section.kl-section:has(.kl-hero-titre-page):not(:has(.kl-linsting-cpt--progressive)) {
        display: none !important;
    }
}

.kl-linsting-cpt .kl-linsting-cpt__search--row {
    width: 100%;
}

/* align-items: center évite qu’un Tom Select / menu trop haut n’étire toute la ligne (align-items: stretch). */
.kl-linsting-cpt .kl-linsting-cpt__search--row--integrated {
    gap: 0 !important;
    align-items: center;
    background-color: #f2f3f5;
    border-radius: 6px;
    padding: 2px 4px;
    overflow: visible;
}
.kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-linsting-cpt__search--form {
    flex: 1 1 auto;
    min-width: 0;
    background: #f2f3f5;
    overflow: visible;
}
.kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible;
}
.kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment__form {
    background: transparent !important;
    gap: 6px;
    overflow: visible;
    align-items: center;
}
@media (min-width: 992px) {
    .kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment__item:not(.kl-search-establishment__item--submit) {
        display: flex;
        align-items: center;
        min-height: 0;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .ts-wrapper {
        max-width: 100%;
    }
    /* Compacter les contrôles à la même hauteur cible (~44px) que la barre des
       sous-pages déjà validée, pour aligner /les-restaurants/ avec PJ2. */
    .kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment__item--field,
    .kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment__item--field[type="number"] {
        min-height: 44px !important;
        height: 44px !important;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .ts-wrapper.multi .ts-control {
        min-height: 44px !important;
        max-height: 44px;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        overflow-y: auto;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .dropdown .dropdown-toggle {
        min-height: 44px !important;
        height: 44px !important;
        display: flex;
        align-items: center;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment__item--submit button {
        min-height: 44px !important;
        height: 44px !important;
        padding-top: 0;
        padding-bottom: 0;
    }
}
.kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment__item--submit {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    flex: 0 0 auto !important;
    align-self: center;
}
.kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-search-establishment__item--submit button {
    margin: 0;
    border-radius: 0;
}
.kl-linsting-cpt .kl-linsting-cpt__search--row--integrated .kl-linsting-cpt__search--viewmode {
    flex-shrink: 0;
    padding-left: 0;
    margin-left: 0;
    border-left: 1px solid #dce0e8;
    background-color: #f2f3f5;
    align-self: stretch;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    .kl-linsting-cpt .kl-linsting-cpt__search--viewmode {
        flex: 0 0 auto;
        align-self: stretch;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--viewmode .kl-view-mode-post {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        border: none;
        border-radius: 0;
        background: #f2f3f5;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--viewmode .kl-view-mode-post__btn {
        background: transparent;
        border: none;
        color: #292c3d;
        padding: 8px 10px;
        border-radius: 4px;
        font-size: 18px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--viewmode .kl-view-mode-post__btn.kl-active {
        background: #292c3d;
        color: #fff;
    }
    .kl-linsting-cpt .kl-linsting-cpt__search--viewmode .kl-view-mode-post__btn:hover:not(.kl-active) {
        background: #f3f3f5;
    }
}

/* --------------------------------------------------------------------------
   Cards 2-cols + grille (réf. Airbnb PJ1) : gouttières X/Y identiques,
   hiérarchie typo (titre > méta grise > tarif > CTA).
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* ~20px entre cartes horizontalement et verticalement (Airbnb ~16–24px). */
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid.row.kl-gy-sp-4 {
        --bs-gutter-y: 1.25rem;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid.row.kl-mb-sp-5 {
        margin-bottom: 1rem !important;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid {
        --bs-gutter-x: 1.25rem;
        row-gap: 1.25rem;
    }

    /* Sous-pages listing-filters : grille kl-gy-sp-3 — gouttières homogènes */
    .kl-section-listing-filters .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt--grid {
        --bs-gutter-x: 1.25rem;
        row-gap: 1.25rem;
    }

    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card.kl-mini-card__other-fiche {
        padding: 0 2px 10px;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--thumb {
        aspect-ratio: 16 / 10;
        padding-top: 0;
        height: auto;
        margin-bottom: 10px;
        border-radius: 12px;
        overflow: hidden;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--title {
        font-size: 0.9375rem;
        line-height: 1.3;
        margin-bottom: 6px;
        font-weight: 600;
        color: #222;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--item_icon {
        font-size: 0.8125rem;
        line-height: 1.35;
        color: #717171;
        margin-bottom: 4px;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--item_text {
        font-size: 0.875rem;
        line-height: 1.35;
        font-weight: 600;
        color: #222;
        margin-bottom: 4px;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--badge {
        font-size: 0.8125rem;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--btn {
        font-size: 0.8125rem;
    }

    /* Même hiérarchie typo sur les sous-pages (bloc listing-filters, non progressif). */
    .kl-section-listing-filters .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--thumb {
        margin-bottom: 10px;
        border-radius: 12px;
    }
    .kl-section-listing-filters .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--title {
        font-size: 0.9375rem;
        line-height: 1.3;
        margin-bottom: 6px;
        font-weight: 600;
        color: #222;
    }
    .kl-section-listing-filters .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--item_icon {
        font-size: 0.8125rem;
        line-height: 1.35;
        color: #717171;
        margin-bottom: 4px;
    }
    .kl-section-listing-filters .kl-linsting-cpt:not(.kl-linsting-cpt--progressive) .kl-linsting-cpt--grid .kl-mini-card__other-fiche .kl-mini-card--item_text {
        font-size: 0.875rem;
        line-height: 1.35;
        font-weight: 600;
        color: #222;
        margin-bottom: 4px;
    }
}

/* --------------------------------------------------------------------------
   Mobile floating "Carte" / "Liste" toggle, à la Airbnb.
   Always anchored at the bottom-center of the viewport on mobile, switches
   between map fullscreen and the cards list with a single tap.
   -------------------------------------------------------------------------- */
.kl-linsting-cpt__view-mode-fab {
    position: fixed;
    z-index: 1100;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #292c3d;
    color: #fff;
    border: none;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}
.kl-linsting-cpt__view-mode-fab:hover,
.kl-linsting-cpt__view-mode-fab:focus-visible {
    transform: translateX(-50%) translateY(-2px);
}
.kl-linsting-cpt__view-mode-fab__icon {
    font-size: 1.1em;
    line-height: 1;
}
.kl-linsting-cpt__view-mode-fab__label--list,
.kl-linsting-cpt__view-mode-fab__icon--list {
    display: none;
}
body.js-open-map .kl-linsting-cpt__view-mode-fab__label--map,
body.js-open-map .kl-linsting-cpt__view-mode-fab__icon--map {
    display: none;
}
body.js-open-map .kl-linsting-cpt__view-mode-fab__label--list,
body.js-open-map .kl-linsting-cpt__view-mode-fab__icon--list {
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   Header auto-hide on scroll.
   When the user scrolls down past the threshold, JS sets
   body.kl-scroll-down. The header (and the optional top bar) translate
   off-screen via CSS while the listing's already-sticky search bar gets
   pinned to top:0 so it stays glued to the viewport top regardless of
   the header's transform.
   -------------------------------------------------------------------------- */
.kl-site-header,
.kl-site-topheader {
    transition: transform .25s ease;
    will-change: transform;
}
body.kl-scroll-down .kl-site-topheader,
body.kl-scroll-down .kl-site-header {
    transform: translateY(-110%);
}
body.kl-scroll-down .kl-linsting-cpt--progressive .kl-linsting-cpt__search,
body.kl-scroll-down .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters {
    top: 0 !important;
}
/* Account for the WordPress admin bar so the search bar doesn't slide
   under it when scrolled-down. */
body.admin-bar.kl-scroll-down .kl-linsting-cpt--progressive .kl-linsting-cpt__search,
body.admin-bar.kl-scroll-down .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters {
    top: var(--wp-admin--admin-bar--height, 32px) !important;
}

.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__action[hidden] {
    display: none;
}

.kl-linsting-cpt--progressive .kl-btn--load-more {
    min-width: 220px;
    border: 1px solid var(--kl-color_dark, #292c3d);
    background: transparent;
    color: var(--kl-color_dark, #292c3d);
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    transition: background-color .25s ease, color .25s ease, transform .15s ease;
}

.kl-linsting-cpt--progressive .kl-btn--load-more:hover,
.kl-linsting-cpt--progressive .kl-btn--load-more:focus-visible {
    background: var(--kl-color_dark, #292c3d);
    color: #fff;
    transform: translateY(-1px);
}

.kl-linsting-cpt--progressive .kl-btn--load-more:active {
    transform: translateY(0);
}

.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__counter {
    font-size: 14px;
    color: #757a80;
    margin: 8px 0 0;
}

/* In-map counter overlay: shows the number of restaurants on the map even
   when the user is in map view (the load-more zone is below the map). */
.kl-linsting-cpt--progressive .kl-map-cart-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: #292c3d;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kl-linsting-cpt--progressive .kl-map-cart-counter::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kl-color_primary, #e2001a);
    flex-shrink: 0;
}

/* Le compteur .kl-map-cart-counter est en position:absolute ; un ancêtre en position:fixed
   suffit comme bloc d’ancrage — pas de position:relative ici (sinon conflit de cascade). */

.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__end {
    font-size: 14px;
    color: #757a80;
    margin: 16px 0;
}

/* --------------------------------------------------------------------------
   Skeleton cards — shown while a batch is loading.
   -------------------------------------------------------------------------- */
.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__skeleton {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    padding: 0 12px;
}

.kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__skeleton.is-visible {
    display: grid;
}

@media (max-width: 991.98px) {
    .kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__skeleton.is-visible {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .kl-linsting-cpt--progressive .kl-linsting-cpt--load-more__skeleton.is-visible {
        grid-template-columns: 1fr;
    }
}

.kl-skeleton-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ececec;
}

.kl-skeleton-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(90deg, #ececec 0%, #f6f6f6 50%, #ececec 100%);
    background-size: 200% 100%;
    animation: kl-skeleton-shimmer 1.4s ease-in-out infinite;
}

.kl-skeleton-card__lines {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kl-skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ececec 0%, #f6f6f6 50%, #ececec 100%);
    background-size: 200% 100%;
    animation: kl-skeleton-shimmer 1.4s ease-in-out infinite;
}

.kl-skeleton-line--lg { width: 80%; }
.kl-skeleton-line--md { width: 60%; }
.kl-skeleton-line--sm { width: 40%; }

@keyframes kl-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   Marker variants on the frozen Europe map: keep the active one visually
   distinct without affecting the rest. Reuses the existing .highlight-marker
   that listing.js already toggles.
   -------------------------------------------------------------------------- */
.kl-linsting-cpt--progressive #js-map .marker.highlight-marker {
    z-index: 800;
}
.kl-linsting-cpt--progressive #js-map .marker.highlight-marker.is-active {
    z-index: 920;
}

.kl-linsting-cpt--progressive #js-map .marker.highlight-marker .marker-pin {
    background: var(--kl-color_primary, #e2001a);
    color: #fff;
    transform: scale(1.08);
    transition: transform .2s ease;
}

/*
 * La carte en split (desktop) est en position fixed avec z-index:40 et peut
 * recouvrir le contenu Gutenberg placé sous le listing (ex. « Pourquoi réserver »).
 * Remonter ce bloc pour rétablir les clics. Le header reste au-dessus (z-index ~1111).
 */
section.kl-section-pourquoi-reserver {
    position: relative;
    z-index: 50;
    isolation: isolate;
}

/* ==========================================================================
   MOBILE BOTTOM-SHEET (<992px) — réf. Airbnb mobile (PJ4) :
   carte sticky en haut + cards en feuille modale qui s’élève au scroll.

   Layout cible une fois passée la hero :
       ┌──────────────────────────┐
       │  Header (sticky, thème)  │
       ├──────────────────────────┤
       │  Barre recherche/filtres │  ← fixed sous le header (toujours visible)
       ├──────────────────────────┤
       │                          │
       │        MAP (~58vh)       │  ← sticky sous la barre
       │                          │
       ├──────────────────────────┤  ← bord arrondi de la sheet
       │  ───  (drag handle)      │
       │  X restaurants           │
       │  ┌────────────────────┐  │
       │  │  card              │  │
       │  └────────────────────┘  │
       │  ...                     │
       └──────────────────────────┘

   Au scroll, la sheet remonte au-dessus de la carte (z-index 2 vs 1) en
   gardant la carte fixée → effet Airbnb. Aucun JS dédié, tout en CSS.
   Scope : `.kl-linsting-cpt--progressive` uniquement (page hub principale,
   pas les sous-pages listing-filters qui ont leur propre FAB Carte/Liste).
   ========================================================================== */
@media (max-width: 991.98px) {

    /* ---- 1. Libérer le sticky : `.kl-linsting-cpt--wrapper` est en
              `overflow:hidden` global → on l'écrase ici sinon la carte
              ne peut pas se "détacher" du wrapper en sticky. -------- */
    .kl-linsting-cpt--progressive .kl-linsting-cpt--wrapper {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    /* Réserve de flux pour la barre fixed (évite que la carte remonte sous la pilule). */
    .kl-progressive-mobile-filter-bar-spacer {
        width: 100%;
        flex-shrink: 0;
        height: var(--kl-progressive-mobile-filterbar-h, 64px);
        pointer-events: none;
    }

    /* ---- 2. Barre filtres compacte : pilule « Filtrer » en fixed sous le header,
              toujours accessible au scroll. Le bouton ouvre le drawer fullscreen. */
    .kl-linsting-cpt--progressive > .container > .kl-pt-sp-1.kl-pt--lg-sp-3 {
        position: fixed !important;
        left: 0;
        right: 0;
        width: 100%;
        top: var(--header--h-stick, 56px);
        z-index: 16;
        background: #fff;
        margin: 0;
        padding: 6px max(12px, env(safe-area-inset-left, 0px)) 6px max(12px, env(safe-area-inset-right, 0px)) !important;
        box-shadow: 0 1px 0 rgba(41, 44, 61, 0.06);
        box-sizing: border-box;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions {
        padding: 0 !important;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions > .row {
        margin: 0;
        align-items: center;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions > .row > .col-auto {
        padding: 0;
        flex: 1 1 auto;
        max-width: 100%;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions__openfilter {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions__openfilter--btn {
        display: flex !important;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 11px 18px !important;
        background: #fff !important;
        border: 1px solid rgba(41, 44, 61, 0.18) !important;
        border-radius: 999px !important;
        box-shadow: 0 2px 6px rgba(41, 44, 61, 0.08);
        color: #292c3d !important;
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 1.2;
        min-height: 46px;
        transition: box-shadow .15s ease, border-color .15s ease;
        position: relative;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions__openfilter--btn:hover,
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions__openfilter--btn:focus-visible {
        border-color: rgba(41, 44, 61, 0.3) !important;
        box-shadow: 0 4px 12px rgba(41, 44, 61, 0.12);
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions__openfilter--btn svg {
        flex-shrink: 0;
        color: #292c3d;
        margin-left: auto; /* repousse l'icône filtres à droite,
                              loupe à gauche via ::before */
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions__openfilter--btn span {
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        color: #4a4d59 !important; /* tonalité "placeholder" Airbnb */
    }
    /* Loupe à gauche : mêmes proportions que la pilule recherche Airbnb. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt--actions__openfilter--btn::before {
        content: "";
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292c3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* Pastille « N filtres actifs » (mobile hub progressif, resto + hôtel). */
    .kl-linsting-cpt--progressive .kl-filters-active-count:not([hidden]) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        margin-right: 2px;
        border-radius: 999px;
        background: var(--kl-color_primary, #e2001a);
        color: #fff !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }

    /* Compteur déjà dans la hero (« N restaurants ») : masquer la ligne
       « Résultats : N » sous les filtres pour gagner de la hauteur sur mobile. */
    .kl-linsting-cpt--progressive .kl-total-post--mobile {
        display: none !important;
    }

    /* Badges détaillés : masqués sur mobile (compteur dans la pilule Filtrer). */
    .kl-linsting-cpt--progressive .kl-linsting-cpt--selected-filter {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* ---- 3. Conteneur listing : flex-column, carte d'abord (order: -1)
              puis bottom-sheet (col-left). Annule les paddings qui
              "trichent" sur le visuel sheet. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] {
        display: flex !important;
        flex-direction: column !important;
        position: relative;
        isolation: isolate; /* stacking explicite : sheet au-dessus de la carte */
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ---- 4. Map view : forcée visible (la règle desktop la masque en
              mode grid), sticky sous la barre filtres. ~58vh (Airbnb)
              pour que ~30vh de cards "peek" depuis la bottom-sheet. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--view--map {
        display: block !important;
        order: -1;
        position: sticky;
        /* Top = header sticky + hauteur barre pilule (variable mesurée en JS). */
        top: calc(var(--header--h-stick, 56px) + var(--kl-progressive-mobile-filterbar-h, 64px));
        width: 100%;
        /* ~58svh : laisse ~42% de viewport pour la sheet qui peek dessous. */
        height: 58vh;
        height: 58svh;
        max-height: calc(100vh - var(--header--h-stick, 56px) - var(--kl-progressive-mobile-filterbar-h, 64px));
        max-height: calc(100svh - var(--header--h-stick, 56px) - var(--kl-progressive-mobile-filterbar-h, 64px));
        margin: 0;
        padding: 0;
        z-index: 1;
        background: #e8eaef;
        overflow: hidden;
        border-radius: 0;
        box-shadow: none;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-map-cart#js-map {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        background: #f3f4f7;
    }

    /* L'en-tête mobile interne (close + "Vue carte" + Filtrer) n'a plus
       de raison d'être quand la carte est inline en sticky. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--view--map .kl-linsting-cpt__listing--view--map--head {
        display: none !important;
    }
    /* Le swiper bas-de-carte (ancien mobile fullscreen map) ne sert plus :
       les cards sont maintenant dans la bottom-sheet juste au-dessous. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--view--map .kl-info_windows_box {
        display: none !important;
    }

    /* ---- 5. Bottom sheet : la colonne cards passe au-dessus de la
              carte (z-index 12 sous la sticky bar filtres z:14 mais devant pins).
              Au scroll dans la page la feuille remonte et recouvre progressivement la map (PJ4–PJ5). */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--col-left {
        order: 0;
        position: relative;
        z-index: 12;
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -16px 40px rgba(41, 44, 61, 0.16);
        margin-top: -36px;
        padding: 8px 14px calc(28px + env(safe-area-inset-bottom, 0px));
        /* Hauteur min = quasi un viewport pour pouvoir défiler jusqu’à couvrir toute la map. */
        min-height: calc(100vh - var(--header--h-stick, 56px) - var(--kl-progressive-mobile-filterbar-h, 64px) + 52px);
        min-height: calc(100svh - var(--header--h-stick, 56px) - var(--kl-progressive-mobile-filterbar-h, 64px) + 52px);
        /* Laisser les clics atteindre la carte là où la feuille ne couvre pas encore les cards. */
        pointer-events: none;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--col-left .kl-linsting-cpt__listing--view--grid,
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--col-left .kl-linsting-cpt--load-more {
        pointer-events: auto;
    }

    /* Titre façon Airbnb dans la feuille (le compteur mobile scroll hors vue). */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--col-left > .kl-linsting-cpt__listing--view--grid {
        scroll-margin-top: 8px;
    }

    /* Drag handle visuel + label "X restaurants/hôtels" affiché en haut
       de la sheet (lu via le `kl-total-post` invisible). */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--col-left::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: #d3d6de;
        margin: 6px auto 12px;
    }

    /* ---- 6. Grille interne : 1 colonne, plus serrée (la fenêtre est
              réduite par la carte au-dessus). */
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid.row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 16px;
        margin-left: 0;
        margin-right: 0;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card.kl-mini-card__other-fiche .kl-mini-card--thumb {
        aspect-ratio: 16 / 10;
        padding-top: 0;
        height: auto;
        margin-bottom: 10px;
        border-radius: 12px;
        overflow: hidden;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card.kl-mini-card__other-fiche .kl-mini-card--title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #222;
        margin-bottom: 6px;
        line-height: 1.3;
    }
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card.kl-mini-card__other-fiche .kl-mini-card--item_icon {
        font-size: 0.8125rem;
        line-height: 1.35;
        color: #717171;
        margin-bottom: 4px;
    }

    /* La zone load-more reste bien dans le flux de la sheet, centrée. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt--load-more {
        margin-top: 16px;
        padding-top: 8px;
    }

    /* ---- 7. Sécurité : les sections sous le listing (Pourquoi réserver,
              destinations, etc.) doivent rester au-dessus de la carte
              sticky quand on scrolle au-delà du listing. La carte étant
              sticky avec z-index:1, elle se "détache" naturellement quand
              `--view--map` sort du flux du parent — mais on garantit qu'un
              ancêtre block plus bas ne reçoit pas la sticky derrière lui. */
    .kl-linsting-cpt--progressive + .wp-block-group,
    .kl-linsting-cpt--progressive ~ section.kl-section-pourquoi-reserver,
    .kl-linsting-cpt--progressive ~ section[class*="kl-section-"] {
        position: relative;
        z-index: 3;
        background: #fff;
    }

    /* ---- 8. Header masqué au scroll-down (body.kl-scroll-down) :
              la barre pilule fixed remonte à top:0 quand le header a glissé
              hors écran (sinon elle laisse un trou de ~56px). */
    body.kl-scroll-down .kl-linsting-cpt--progressive > .container > .kl-pt-sp-1.kl-pt--lg-sp-3 {
        top: 0;
    }
    /* La carte garde sa hauteur (58svh) — on remonte juste son ancrage
       sticky en cohérence avec la barre filtres qui colle à top:0. */
    body.kl-scroll-down .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--view--map {
        top: var(--kl-progressive-mobile-filterbar-h, 64px);
    }
    body.admin-bar.kl-scroll-down .kl-linsting-cpt--progressive > .container > .kl-pt-sp-1.kl-pt--lg-sp-3 {
        top: var(--wp-admin--admin-bar--height, 32px);
    }
    body.admin-bar.kl-scroll-down .kl-linsting-cpt--progressive .kl-linsting-cpt__listing[data-mode="grid"] .kl-linsting-cpt__listing--view--map {
        top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--kl-progressive-mobile-filterbar-h, 64px));
    }

    /* ---- 9. Dans la sheet, désactiver les hover lourds (UX tactile) :
              pas d'animation transform agressive sur les cards. */
    .kl-linsting-cpt--progressive .kl-linsting-cpt--grid .kl-mini-card.kl-mini-card__other-fiche:hover .kl-mini-card--thumb {
        transform: none;
    }
}

/* ==========================================================================
   Hero "titre page" : sur mobile pour la page hub progressive uniquement,
   on resserre les paddings et on neutralise les value props (déjà répétées
   dans la section "Pourquoi réserver" plus bas) afin de libérer l'espace
   above-the-fold pour la barre filtres + carte.
   La hero reste visible au chargement (titre + breadcrumb + compteur) ;
   lorsque le tiroir filtres est ouvert, elle est masquée (voir règles
   `body:has(...kl-open-search)` plus haut dans ce fichier).
   ========================================================================== */
@media (max-width: 991.98px) {
    body:has(.kl-linsting-cpt--progressive) .kl-section-hero-titre-page,
    body:has(.kl-linsting-cpt--progressive) .kl-section-wrapper.kl-section-hero-titre-page {
        padding-top: 0.45rem !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body:has(.kl-linsting-cpt--progressive) .kl-section-hero-titre-page .kl-hero-titre-page__surface,
    body:has(.kl-linsting-cpt--progressive) .kl-section-wrapper.kl-section-hero-titre-page .kl-hero-titre-page__surface {
        padding: 0.6rem 0.95rem 0.5rem !important;
    }

    body:has(.kl-linsting-cpt--progressive) .kl-hero-titre-page__topbar {
        padding-bottom: 0.45rem !important;
        margin-bottom: 0.35rem !important;
    }

    body:has(.kl-linsting-cpt--progressive) .kl-hero-titre-page {
        margin-bottom: 0 !important;
    }

    /* Marge trop grande entre bloc hero et bloc listing (sections Gutenberg). */
    body:has(.kl-linsting-cpt--progressive) section:has(.kl-hero-titre-page) + section:has(.kl-linsting-cpt--progressive),
    body:has(.kl-linsting-cpt--progressive) .kl-section-wrapper.kl-section-hero-titre-page + .kl-section-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Même si un wrapper intermédiaire casse le sélecteur adjacent (+). */
    body:has(.kl-linsting-cpt--progressive) .kl-section-listing-cpt,
    body:has(.kl-linsting-cpt--progressive) section:has(.kl-linsting-cpt--progressive) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body:has(.kl-linsting-cpt--progressive) .kl-section-hero-titre-page + .kl-section-listing-cpt,
    body:has(.kl-linsting-cpt--progressive)
        .kl-section-wrapper.kl-section-hero-titre-page
        + .kl-section-wrapper.kl-section-listing-cpt {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body:has(.kl-linsting-cpt--progressive) .kl-linsting-cpt--progressive {
        margin-top: 0 !important;
    }

    body:has(.kl-linsting-cpt--progressive) .kl-linsting-cpt--progressive > .container {
        padding-top: 0 !important;
    }

    body:has(.kl-linsting-cpt--progressive) .kl-section-hero-titre-page .kl-hero-titre-page__title {
        font-size: clamp(1.15rem, 4.4vw, 1.55rem);
        line-height: 1.22;
    }
    body:has(.kl-linsting-cpt--progressive) .kl-section-hero-titre-page .kl-hero-titre-page__props {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Barre recherche / filtres : alignement avec le header (même gouttière
   Bootstrap que le .container du site). Avant : .px-lg-0 sur le container
   interne + padding 0 sur .kl-section-listing-filters .kl-search-establishment
   (main.min.css) → formulaire plus large que le logo / ombre et filet coupés.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .kl-section-listing-filters .kl-search-establishment {
        padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5) !important;
        padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5) !important;
    }
}

/* Séparateur « full » : le parent .kl-linsting-cpt__search est déjà pleine
 * largeur en position fixed — éviter width:100vw + translate (-50vw) qui
 * décalent le filet dès qu’une scrollbar verticale est présente. */
@media (min-width: 992px) {
    .kl-linsting-cpt__search.kl-linsting-cpt__search--filters > .kl-border-separator--full:first-of-type,
    .kl-linsting-cpt--progressive .kl-linsting-cpt__search.kl-linsting-cpt__search--filters > .kl-border-separator--full:first-of-type {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        transform: none;
    }
}