/* Catalogue /offres/ : liste à gauche, carte collante à droite (≥ 1024 px), bascule liste / carte en dessous.
   Tout est conditionné par html.js-carte : sans JavaScript la page reste la liste seule, filtres et pagination inclus. */
.ui-catalogue__carte, .ui-catalogue__bascule { display: none; }
.ui-catalogue__carte { min-width: 0; }
.ui-catalogue__carte-cadre { position: relative; }
.ui-catalogue__carte-map { width: 100%; height: calc(100vh - 240px); min-height: 320px; max-height: 720px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-2); overflow: hidden; }
.ui-catalogue__carte-map .ui-map__attente { margin: 16px; color: var(--c-text-2); }
.ui-catalogue__zone { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500; max-width: calc(100% - 24px); box-shadow: 0 2px 10px rgba(15, 23, 42, .3); }
.ui-catalogue__zone[hidden] { display: none; }
.ui-catalogue__carte .ui-source { margin-top: 8px; }

@media (max-width: 1023.98px) {
    .js-carte .ui-catalogue__bascule { display: inline-flex; }
    .js-carte .ui-catalogue__grid[data-vue="carte"] .ui-catalogue__carte { display: block; }
    .js-carte .ui-catalogue__grid[data-vue="carte"] .ui-catalogue__results { display: none; }
}
@media (min-width: 1024px) {
    .js-carte .ui-catalogue__grid { grid-template-columns: 248px minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; }
    .js-carte .ui-catalogue__carte { display: block; position: sticky; top: 96px; align-self: start; }
    .js-carte .ui-catalogue__carte-map { height: calc(100vh - 150px); }
    /* la liste est étroite : une colonne de cartes (la grille à 2 ou 3 colonnes est prévue pour la pleine largeur) */
    .js-carte .ui-catalogue .ui-offer-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 1280px) {
    .js-carte .ui-catalogue__grid { grid-template-columns: 288px minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; }
}

/* Marqueurs : pastille prix / surface, grappes, état survolé (liste et carte se répondent) */
.ofr-pin { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%, -100%); min-width: 44px; min-height: 28px; padding: 2px 8px;
    background: #fff; color: var(--c-text); border: 2px solid var(--c-brand); border-radius: 14px; font: 700 12px/1.15 inherit; white-space: nowrap; box-shadow: 0 1px 4px rgba(15, 23, 42, .35); cursor: pointer; }
.ofr-pin small { font-weight: 500; font-size: 11px; color: var(--c-text-2); }
.ofr-pin.is-hover, .ofr-pin:focus-visible { background: var(--c-brand); color: #fff; border-color: var(--c-nuit); z-index: 1000 !important; transform: translate(-50%, -100%) scale(1.12); }
.ofr-pin.is-hover small, .ofr-pin:focus-visible small { color: #fff; }
.leaflet-marker-icon.ofr-div { background: transparent; border: 0; }
.ui-offer-card.is-hover { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(166,63,22,.35); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: var(--c-brand); color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ofr-pin { transition: none; } }
.marker-cluster.is-hover div { background-color: var(--c-nuit); outline: 3px solid #fff; }
/* 320 px : la barre « recherche + Filtres + Carte » ne tient pas avec les trois libellés ; le bouton Carte / Liste garde son pictogramme et son nom accessible */
@media (max-width: 479px) {
    .ui-catalogue__bascule { padding-left: 12px; padding-right: 12px; }
    .ui-catalogue__bascule > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Diaporama des cartes d'offre : défilement tactile natif, flèches et miniatures au-dessus du lien de la carte */
.ui-offer-card__media > .ui-offer-card__badges { z-index: 4; pointer-events: none; }
.ui-offer-card__media .sel-btn { z-index: 4; }
.ofr-badge-nouveau { background: var(--c-brand); color: #fff; box-shadow: var(--sh-1); }
.ofr-slides { position: absolute; inset: 0; z-index: 2; }
.ofr-slides__piste { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.ofr-slides__piste::-webkit-scrollbar { display: none; }
.ofr-slides__piste:focus-visible { outline: 3px solid var(--c-brand); outline-offset: -3px; }
.ofr-slides__vue { flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; }
.ofr-slides__vue > a { display: block; height: 100%; }
.ui-offer-card__media .ofr-slides__vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ofr-slides__fl { position: absolute; top: 50%; z-index: 3; width: 36px; height: 36px; margin-top: -18px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--c-text); box-shadow: var(--sh-1); cursor: pointer; opacity: 0; transition: opacity .15s; }
.ofr-slides__fl--prec { left: 8px; } .ofr-slides__fl--suiv { right: 8px; }
.ofr-slides__fl[hidden], .ofr-slides__mini[hidden] { display: none; }
.ui-offer-card:hover .ofr-slides__fl, .ofr-slides__fl:focus-visible, .ofr-slides:focus-within .ofr-slides__fl { opacity: 1; }
@media (hover: none) { .ofr-slides__fl { opacity: 1; } }
.ofr-slides__mini { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; gap: 3px; margin: 0; padding: 3px; list-style: none; background: rgba(255, 255, 255, .92); border-radius: 6px; box-shadow: var(--sh-1); }
.ofr-slides__mini button { display: block; width: 32px; height: 20px; padding: 0; border: 2px solid transparent; border-radius: 3px; background: none; overflow: hidden; cursor: pointer; }
.ofr-slides__mini button img { position: static; width: 100%; height: 100%; object-fit: cover; display: block; }
.ofr-slides__mini button[aria-current="true"] { border-color: var(--c-brand); }
.ofr-slides__mini button:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; }
/* l'infobulle du mini-plan (bas gauche) et les miniatures (bas droite) se partagent le bas de la photo */
.ui-offer-card__media .vo-mini { z-index: 3; }

/* Filtres rapides, « Charger plus » et compteur */
.ofr-rapides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.ofr-rapides .ui-input { min-width: 0; }
@media (max-width: 479px) { .ofr-rapides { grid-template-columns: minmax(0, 1fr); } }
.ofr-plus { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0; }
.ofr-plus__compte { margin: 0; color: var(--c-text-2); font-size: 14px; }
.ofr-plus__btn[hidden] { display: none; }
.js-catalogue .ui-pagination { display: none; }   /* avec JavaScript, « Charger plus » remplace la pagination (la pagination reste dans le HTML pour les robots et sans JS) */

/* Squelettes de chargement : un halo qui glisse ; fixes si l'on a demandé de réduire les animations */
.ofr-skel { display: none; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.is-loading .ofr-skel { display: grid; }
.is-loading:not(.is-plus) .ui-offer-grid, .is-loading:not(.is-plus) .ofr-plus { display: none; }
.ofr-skel__carte { border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.ofr-skel__img { aspect-ratio: 16 / 10; }
.ofr-skel__ligne { height: 14px; margin: 14px 16px; border-radius: 7px; }
.ofr-skel__ligne--court { width: 40%; }
.ofr-skel__img, .ofr-skel__ligne { background: linear-gradient(90deg, var(--c-bg-2) 25%, #e8edf4 50%, var(--c-bg-2) 75%); background-size: 200% 100%; animation: ofr-skel 1.2s linear infinite; }
@keyframes ofr-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ofr-skel__img, .ofr-skel__ligne { animation: none; background: var(--c-bg-2); } }
@media (min-width: 640px) { .ofr-skel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .js-carte .ofr-skel { grid-template-columns: minmax(0, 1fr); } }
/* pastille longue (« À moins de 45 min en voiture de … ») : à 320 px elle passe à la ligne au lieu de déborder */
.ui-active-filters li { min-width: 0; max-width: 100%; }
.ui-active-filters .ui-pill { max-width: 100%; height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; white-space: normal; text-align: left; }
.ui-active-filters .ui-pill > span { min-width: 0; overflow-wrap: anywhere; }
/* miniatures en haut à droite (le bas porte le mini-plan et le bouton « garder ») ; masquées sous 480 px : flèches et glissement restent */
.ofr-slides__mini { bottom: auto; top: 8px; }
@media (max-width: 479px) { .ofr-slides__mini { display: none; } }
.ofr-rapides { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
.ofr-rapides select.ui-input { padding-left: 10px; padding-right: 26px; font-size: 14px; text-overflow: ellipsis; }
@media (max-width: 479px) { .ofr-rapides { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .ofr-rapides select.ui-input { font-size: 16px; } }