/** * Vue « Carte » du catalogue /logements/ (inc/map-search.php + assets/js/map-search.js). * Identité de marque : framboise #EE3D6F, or #D0861E, crème #FDF9F3, verre dépoli. * Préfixé .li-mapx / #li-mapx-* ; l'essentiel ne s'applique qu'en mode carte * (body.li-mapx-on) pour ne rien perturber en vue liste. * * Structure réelle HivePress (cf. map-search.js) : * .hp-page > .hp-row.li-mapx-row > ( aside.hp-page__sidebar , .hp-page__content , .li-mapx-pane ) * Colonnes = largeurs % (hp-col-sm-*), pas de grille CSS → on surcharge en %. */ :root{ /* Alias sur les vraies variables de marque du site (style.css) quand elles existent, avec un repli si jamais ce fichier tournait seul. */ --li-mapx-brand:var(--rasp, #EE3D6F); --li-mapx-brand-d:var(--rasp-deep, #c72d66); --li-mapx-gold:var(--gold, #D0861E); --li-mapx-ink:var(--ink, #241726); --li-mapx-line:rgba(43,43,51,.12); --li-mapx-shadow:0 12px 38px rgba(43,43,51,.18); --li-mapx-top:116px; /* décalage sous l'en-tête fixe pour la carte collante */ } /* ============================================================= */ /* 0. Correctif catalogue : la barre de filtres ne s'étire pas. */ /* ============================================================= */ /* Par défaut le flex ÉTIRE les deux colonnes à la hauteur de la plus grande. Avec peu d'annonces, la barre de filtres (haute) et une colonne résultats étirée créaient un grand vide, et sous Safari (bug connu `flex:1 1 0%` + étirement vertical) la barre pouvait déborder sur le footer. On aligne les colonnes EN HAUT → chacune prend sa hauteur naturelle, la ligne fait la hauteur de la plus grande, et le footer reste TOUJOURS en dessous. Chargé uniquement sur le catalogue (map-search.css n'est enqueue que là). */ .hp-page > .hp-row{ align-items:flex-start; } .hp-page__sidebar{ align-self:flex-start; } /* ============================================================= */ /* 1. Barre d'outils : bascule Liste / Carte */ /* ============================================================= */ .li-mapx-toolbar{ position:relative; /* ancre l'infobulle promo (.li-mapx-promo, absolue) */ display:flex; align-items:center; justify-content:center; gap:12px; /* La bascule vit TOUJOURS dans la barre de tri, y compris à zéro résultat (barre synthétique, cf. ensureTopbar() dans map-search.js) : plus de position autonome, donc plus de marge propre. */ margin:0; } /* Zéro résultat : barre synthétique (cf. ensureTopbar() dans map-search.js). Elle porte son compteur « 0 annonce », donc rien de spécifique à faire — un pseudo-élément remplace juste le tri absent pour que la bascule reste centrée, comme le fait la vue Carte. */ .li-mapx-topbar--synth{ display:flex; align-items:center; } /* Rythme du bandeau, calé sur le cas nominal (desktop) : le filet passe à 16px sous la bascule — exactement ce que produit la rangée « Par ligne / Par page » avec des résultats (border-top + padding-top:16px, cf. inc/display-menu.php) — puis 16px avant les résultats. `!important` car la règle `.hp-page__topbar:has(.li-disp)` remet ces valeurs à zéro : la rangée existe toujours dans le DOM ici, simplement vide et masquée. Sous 768px, le filet est déjà posé par le ::after de la rangée compacte (Filtrer + bascule, cf. inc/filter-reset.php) : on n'en ajoute pas un second. */ @media (min-width:768px){ .hp-page__topbar.li-mapx-topbar--synth{ padding-bottom:16px !important; border-bottom:1px solid var(--border,#EEE0D2) !important; margin-bottom:16px !important; } } /* Desktop seulement : sous 900px la rangée compacte (bouton Filtrer + bascule sur la 1re ligne) n'a pas de place pour un flanc vide. */ @media (min-width:900px){ .li-mapx-topbar--synth::before{ content:""; flex:1 1 0; min-width:0; order:1; } } /* Intégrée à la barre de tri du catalogue, ENTRE « Trier par » (order:1, cf. inc/select-ui.php) et « X annonces » (repoussé en order:3 ici) — plutôt qu'en bandeau flottant séparé au-dessus. */ .hp-page__topbar .li-mapx-toolbar{ order:2; margin:0; } .hp-page__topbar:has(.li-mapx-toolbar) .hp-result-count{ order:3; } /* Vue Carte : pas de « Trier par » (demande du 27/07). Le tri n'a pas de sens sur une carte — les annonces y sont placées par position, pas par rang. Le formulaire reste dans le DOM (display:none) : ses champs cachés portent la recherche en cours, que le filtrage dynamique relit. Un pseudo-élément reprend sa place en début de rangée pour que la bascule Liste/Carte reste centrée comme en vue Liste. */ body.li-mapx-on .hp-page__topbar .hp-form--listing-sort{ display:none; } @media (min-width:900px){ body.li-mapx-on .hp-page__topbar:has(.li-mapx-toolbar)::before{ content:""; flex:1 1 0; min-width:0; order:1; } } .li-mapx-seg{ display:inline-flex; padding:4px; gap:2px; background:rgba(255,255,255,.72); border:1px solid var(--li-mapx-line); border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 16px rgba(43,43,51,.08); } .li-mapx-seg__btn{ appearance:none; border:0; background:transparent; cursor:pointer; font:600 14px/1 inherit; color:var(--li-mapx-ink); padding:9px 18px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; transition:background .18s ease,color .18s ease,box-shadow .18s ease; } .li-mapx-seg__btn svg{width:17px;height:17px;flex:0 0 auto} .li-mapx-seg__btn:hover{color:var(--li-mapx-brand)} .li-mapx-seg__btn[aria-pressed="true"]{ background:linear-gradient(135deg,var(--li-mapx-brand),#f0559a); color:#fff; box-shadow:0 6px 16px rgba(238,61,111,.32); } /* ============================================================= */ /* 2. Mise en page scindée (mode carte) */ /* ============================================================= */ .li-mapx-pane{ display:none; } body.li-mapx-on .li-mapx-row{ display:flex !important; flex-wrap:nowrap !important; align-items:flex-start !important; gap:24px; } /* Barre de filtres masquée en mode carte (champs conservés dans le DOM → le live-filter continue de fonctionner). */ body.li-mapx-on .hp-page__sidebar{ display:none !important; } /* Colonne liste : largeur maîtrisée, défilement normal de la page. */ body.li-mapx-on .li-mapx-row > .hp-page__content{ flex:0 0 clamp(360px, 40%, 520px) !important; max-width:520px !important; width:auto !important; min-width:0 !important; } /* DESKTOP seulement : on colle la colonne liste à la carte (padding retiré). Sur mobile (carte empilée), on GARDE le padding naturel du thème pour que les cartes-résultats aient le MÊME espacement qu'en mode liste. */ @media (min-width:901px){ body.li-mapx-on .li-mapx-row > .hp-page__content{ padding:0 !important; } } /* Cartes forcées en UNE colonne (le système hp-col-sm-6 vaut 50 %). */ body.li-mapx-on .li-mapx-row > .hp-page__content .hp-grid__item{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; } /* « Par ligne 3 / 4 » n'a aucun sens en mode carte (liste sur 1 colonne) → masqué. Le réglage reste disponible en vue liste. La pagination, elle, reste à gauche. */ body.li-mapx-on .li-lpr{ display:none !important; } body.li-mapx-on .li-mapx-row > .hp-page__content .hp-listing__title, body.li-mapx-on .li-mapx-row > .hp-page__content .hp-listing *{ min-width:0; } /* Volet carte : collant, pleine hauteur sous l'en-tête. */ body.li-mapx-on .li-mapx-pane{ display:block; flex:1 1 auto; align-self:stretch; position:sticky; top:var(--li-mapx-top); height:calc(100vh - var(--li-mapx-top) - 20px); min-height:460px; border-radius:22px; overflow:hidden; border:1px solid var(--li-mapx-line); box-shadow:var(--li-mapx-shadow); background:#eef1f4; } #li-mapx-map{ width:100%; height:100%; } /* État vide + chargement. */ .li-mapx-empty{ position:absolute; inset:0; z-index:700; display:none; align-items:center; justify-content:center; text-align:center; padding:24px; font-size:15px; color:var(--li-mapx-ink); background:rgba(238,241,244,.86); backdrop-filter:blur(2px); } .li-mapx-pane.is-empty .li-mapx-empty{ display:flex; } .li-mapx-spin{ position:absolute; inset:0; z-index:750; display:none; align-items:center; justify-content:center; background:rgba(255,255,255,.4); } .li-mapx-pane.is-busy .li-mapx-spin{ display:flex; } .li-mapx-spin .li-loader__svg{ width:52px; height:52px; } /* ============================================================= */ /* 3. Pastilles de prix */ /* ============================================================= */ .li-mapx-pin{ position:absolute; left:0; top:0; transform:translate(-50%,-100%); cursor:pointer; will-change:transform; transition:transform .12s ease; } .li-mapx-pin__body{ position:relative; display:inline-flex; align-items:center; gap:4px; padding:6px 11px; font:700 13.5px/1 inherit; color:var(--li-mapx-brand-d); background:#fff; border:1.5px solid #fff; border-radius:999px; box-shadow:0 3px 10px rgba(43,43,51,.28); white-space:nowrap; } .li-mapx-pin__body::after{ content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:inherit; border-right:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:translateX(-50%) rotate(45deg); box-shadow:2px 2px 4px rgba(43,43,51,.12); } .li-mapx-pin--noprice .li-mapx-pin__body{ color:var(--li-mapx-ink); } .li-mapx-pin:hover{ transform:translate(-50%,-100%) scale(1.06); z-index:650 !important; } .li-mapx-pin:hover .li-mapx-pin__body, .li-mapx-pin.is-active .li-mapx-pin__body{ color:#fff; background:linear-gradient(135deg,var(--li-mapx-brand),#f0559a); border-color:#fff; box-shadow:0 6px 16px rgba(238,61,111,.45); } .li-mapx-pin.is-active{ z-index:660 !important; } /* Bulle de grappe. */ .li-mapx-cluster{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:54px; height:54px; padding:4px 9px; color:#fff; background:linear-gradient(135deg,var(--li-mapx-brand),var(--li-mapx-brand-d)); border:2px solid #fff; border-radius:16px; box-shadow:0 6px 18px rgba(238,61,111,.42); transition:transform .12s ease; } .li-mapx-cluster:hover,.li-mapx-cluster.is-active{ transform:translate(-50%,-50%) scale(1.08); } .li-mapx-cluster b{ font-size:16px; line-height:1; font-weight:800; } .li-mapx-cluster span{ font-size:10px; line-height:1.1; opacity:.94; margin-top:1px; white-space:nowrap; } /* ============================================================= */ /* 4. Mini-fiche flottante (popup Leaflet) */ /* ============================================================= */ .li-mapx-pop .leaflet-popup-content-wrapper{ padding:0; border-radius:var(--r-lg, 22px); overflow:hidden; box-shadow:0 10px 30px rgba(36,23,38,.16); border:1px solid var(--border, rgba(43,43,51,.08)); } .li-mapx-pop .leaflet-popup-content{ margin:0; width:250px !important; line-height:1.3; } /* Mobile : la mini-fiche s'affiche aussi (27/07) — on la borne à la largeur d'écran pour qu'elle ne déborde jamais sur les petits téléphones. */ @media (max-width:900px){ .li-mapx-pop .leaflet-popup-content{ width:min(250px, calc(100vw - 72px)) !important; } } .li-mapx-pop .leaflet-popup-tip{ box-shadow:0 10px 30px rgba(36,23,38,.16); } .li-mapx-pop a.leaflet-popup-close-button{ width:28px; height:28px; top:10px; right:10px; z-index:3; display:flex !important; align-items:center; justify-content:center; color:var(--li-mapx-ink); font:400 19px/1 Tahoma, sans-serif; text-indent:0; padding:0; background:rgba(255,255,255,.94); border-radius:999px; box-shadow:0 2px 10px rgba(36,23,38,.22); transition:background .15s ease, color .15s ease; } .li-mapx-pop a.leaflet-popup-close-button:hover{ background:#fff; color:var(--li-mapx-brand); } .li-mapx-card{ display:block; color:inherit; text-decoration:none; } .li-mapx-card__media{ position:relative; display:block; height:118px; background:#e9ecef center/cover no-repeat; } /* Léger dégradé haut pour lisibilité du badge ville quelle que soit la photo. */ .li-mapx-card__media::before{ content:""; position:absolute; inset:0 0 auto 0; height:52px; background:linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,0)); pointer-events:none; } .li-mapx-card__media--empty{ background:linear-gradient(135deg,#f3e6ee,#f7eede); } .li-mapx-card__media--empty::before{ display:none; } /* Mini-carrousel photos : slides en fondu + chevrons alignés sur le système unifié du site (cartes catalogue, hivepress.css) — bouton rond blanc + chevron en SVG de fond (un ::after bordure ne se peint pas sur Safari), visibles en continu, hovers derrière (hover:hover) and (pointer:fine). Format compact 28px (média popup ~118px de haut). */ .li-mapx-card__slide{ position:absolute; inset:0; background:center/cover no-repeat; opacity:0; transition:opacity .35s ease; z-index:0; } .li-mapx-card__slide.is-current{ opacity:1; z-index:1; } .li-mapx-card__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:28px; height:28px; padding:0; border:none; border-radius:50%; background-color:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:pointer; font-size:0; display:flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:center; background-size:10px 10px; opacity:.92; transition:opacity .2s, background-color .2s, transform .2s; } .li-mapx-card__media:hover .li-mapx-card__nav{ opacity:1; } .li-mapx-card__prev{ left:8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241726' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); } .li-mapx-card__next{ right:8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241726' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); } @media (hover:hover) and (pointer:fine){ .li-mapx-card__nav:hover{ background-color:#fff; transform:translateY(-50%) scale(1.08); } .li-mapx-card__prev:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); } .li-mapx-card__next:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE3D6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); } } /* --- Panneau mini-fiche (mobile) ------------------------------------- Ancrée au marqueur, la fiche sortait par le haut d'une carte de 56vh et se faisait rogner (chevrons du carrousel écrasés). Posée en bas du volet, elle a toujours sa place. */ .li-mapx-sheet{ position:absolute; left:10px; right:10px; bottom:10px; z-index:1000; display:none; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(36,23,38,.28); } .li-mapx-sheet.is-on{ display:block; animation:li-mapx-pop-in .22s ease; } .li-mapx-sheet .li-mapx-card__media{ height:140px; } .li-mapx-sheet__close{ position:absolute; top:8px; right:8px; z-index:4; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241726' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px 12px no-repeat; box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer; } /* Au doigt : chevrons plus grands (28px se ratait) et toujours visibles — il n'y a pas de survol pour les révéler. */ @media (hover:none){ .li-mapx-card__nav{ width:34px; height:34px; background-size:12px 12px; opacity:1; } .li-mapx-card__prev{ left:10px; } .li-mapx-card__next{ right:10px; } } .li-mapx-card__dots{ position:absolute; left:0; right:0; bottom:7px; z-index:3; display:flex; justify-content:center; gap:5px; pointer-events:none; } .li-mapx-card__dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.65); transition:width .2s, background .2s; } .li-mapx-card__dot.is-current{ width:16px; border-radius:4px; background:#fff; } .li-mapx-card__badge{ position:absolute; left:10px; top:10px; z-index:1; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-size:11px; font-weight:700; color:#fff; letter-spacing:.01em; background:rgba(43,43,51,.52); border-radius:999px; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); } /* Prix : pastille sur la photo (même traitement que les pastilles de la carte), plutôt qu'un pied de fiche séparé avec bouton — fiche plus dense, et toute la fiche reste cliquable (pas besoin d'un second CTA redondant). */ .li-mapx-card__price{ position:absolute; right:10px; bottom:10px; z-index:1; font-family:var(--sans); font-weight:800; font-size:13.5px; color:#fff; white-space:nowrap; letter-spacing:-.01em; padding:6px 11px; border-radius:999px; background:linear-gradient(120deg,var(--rasp-br,#f0559a),var(--li-mapx-brand) 60%,var(--li-mapx-brand-d)); box-shadow:0 4px 14px rgba(238,61,111,.36); } .li-mapx-card__price small{ font-weight:600; font-size:10.5px; opacity:.88; margin-left:2px; } .li-mapx-card__body{ display:block; padding:16px 24px 18px; } .li-mapx-card__title{ font:600 15px/1.3 var(--serif, Georgia, serif); color:var(--li-mapx-ink); margin:0 0 5px; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .li-mapx-card__meta{ font-family:var(--sans); font-size:12px; color:var(--ink-2, #7a7a83); display:flex; gap:5px; flex-wrap:wrap; align-items:center; } /* Carte de la liste correspondant à la pastille active : anneau framboise qui ÉPOUSE la carte (box-shadow → suit le border-radius de .hp-listing, contrairement à outline posé sur le .hp-grid__item paddé). */ body.li-mapx-on .hp-page__content .li-mapx-hit{ position:relative; z-index:2; box-shadow:0 0 0 3px var(--li-mapx-brand), 0 14px 34px rgba(238,61,111,.22) !important; transition:box-shadow .2s ease; } /* Leaflet : icônes sans fond blanc + police héritée. */ .leaflet-div-icon{ background:transparent; border:0; } .li-mapx-pane .leaflet-container{ background:#eef1f4; font:inherit; } /* ============================================================= */ /* 4ter. Infobulle « Nouveau : recherchez sur la carte ! » */ /* ============================================================= */ .li-mapx-promo{ position:absolute; bottom:calc(100% + 12px); /* AU-DESSUS de la bascule Liste/Carte */ right:6px; z-index:20; display:flex; align-items:center; gap:9px; max-width:none; white-space:nowrap; /* infobulle sur UNE seule ligne */ padding:11px 12px 11px 14px; color:#fff; font-size:13.5px; font-weight:600; line-height:1.3; background:linear-gradient(135deg,var(--li-mapx-brand),#f0559a); border-radius:14px; box-shadow:0 10px 26px rgba(238,61,111,.4); animation:li-mapx-pop-in .28s ease; transition:opacity .2s ease, transform .2s ease; } .li-mapx-promo.is-closing{ opacity:0; transform:translateY(6px); } /* flèche (sous l'infobulle) pointant vers le bas, vers le bouton « Carte ». */ .li-mapx-promo::before{ content:""; position:absolute; bottom:-6px; right:44px; width:12px; height:12px; background:#f0559a; transform:rotate(45deg); border-radius:2px; } .li-mapx-promo__dot{ width:8px; height:8px; border-radius:999px; background:#fff; flex:0 0 auto; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:li-mapx-pulse 1.8s infinite; } .li-mapx-promo__txt{ flex:1 1 auto; } .li-mapx-promo__x{ appearance:none; border:0; cursor:pointer; flex:0 0 auto; width:24px; height:24px; border-radius:999px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.24); color:#fff; transition:background .15s ease; } .li-mapx-promo__x svg{ width:12px; height:12px; display:block; } .li-mapx-promo__x:hover{ background:rgba(255,255,255,.42); } @keyframes li-mapx-pop-in{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } } @keyframes li-mapx-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.7); } 70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } } /* ============================================================= */ /* 4quater. Calques « Afficher sur la carte » (POI OSM) */ /* ============================================================= */ .li-mapx-layers{ position:absolute; top:14px; left:52px; z-index:610; font-size:13px; color:var(--li-mapx-ink); } .li-mapx-layers__toggle{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; font:600 13px/1 inherit; color:var(--li-mapx-ink); background:rgba(255,255,255,.95); border:1px solid var(--li-mapx-line); border-radius:999px; box-shadow:0 4px 14px rgba(43,43,51,.14); } .li-mapx-layers__toggle svg{ width:16px; height:16px; color:var(--li-mapx-brand); } .li-mapx-layers.is-open .li-mapx-layers__toggle{ background:#fff; box-shadow:0 6px 18px rgba(43,43,51,.18); } .li-mapx-layers__panel{ margin-top:8px; padding:8px; background:rgba(255,255,255,.97); border:1px solid var(--li-mapx-line); border-radius:14px; box-shadow:0 10px 28px rgba(43,43,51,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); min-width:190px; } .li-mapx-layers__row{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:10px; cursor:pointer; user-select:none; transition:background .12s ease; } .li-mapx-layers__row:hover{ background:rgba(238,61,111,.07); } .li-mapx-layers__row input{ accent-color:var(--li-mapx-brand); width:16px; height:16px; cursor:pointer; flex:0 0 auto; } .li-mapx-layers__name{ flex:1 1 auto; } /* Spinner de chargement (retour immédiat pendant la requête Overpass). */ .li-mapx-layers__spin{ flex:0 0 auto; width:15px; height:15px; opacity:0; transition:opacity .15s ease; border:2px solid rgba(238,61,111,.25); border-top-color:var(--li-mapx-brand); border-radius:999px; } .li-mapx-layers__row.is-loading .li-mapx-layers__spin{ opacity:1; animation:li-mapx-spin .7s linear infinite; } @keyframes li-mapx-spin{ to{ transform:rotate(360deg); } } /* Info-bulle des arrêts de transport. */ .li-mapx-poi-tip.leaflet-tooltip{ background:#2b2b33; color:#fff; border:0; border-radius:7px; font-size:11.5px; font-weight:600; padding:3px 8px; box-shadow:0 4px 12px rgba(0,0,0,.25); } .li-mapx-poi-tip.leaflet-tooltip::before{ border-top-color:#2b2b33; } .li-mapx-layers__ico{ width:26px; height:26px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; border-radius:999px; background:#f3f0ee; box-shadow:inset 0 0 0 1px rgba(43,43,51,.06); } .li-mapx-layers__hint{ margin:6px 6px 2px; padding:7px 9px; font-size:11.5px; line-height:1.3; color:#8a6d1f; background:rgba(208,134,30,.14); border-radius:9px; } /* Marqueurs POI (petites pastilles rondes colorées par catégorie). */ .li-mapx-poi{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; cursor:pointer; background:#fff; border:2px solid #fff; box-shadow:0 2px 8px rgba(43,43,51,.3); } .li-mapx-poi--transport{ background:#e8f5ee; box-shadow:0 2px 8px rgba(34,153,102,.35); } .li-mapx-poi--gares{ background:#e7eefc; box-shadow:0 2px 8px rgba(45,102,204,.35); } .li-mapx-poi--culture{ background:#f6e8f2; box-shadow:0 2px 8px rgba(181,23,158,.32); } .li-mapx-poi--parking{ background:#eceef0; box-shadow:0 2px 8px rgba(80,80,90,.32); } .li-mapx-poi-pop .leaflet-popup-content-wrapper{ border-radius:12px; box-shadow:0 8px 22px rgba(43,43,51,.2); } .li-mapx-poi-pop .leaflet-popup-content{ margin:9px 12px; font-size:13px; } .li-mapx-poi-cat{ color:#6b6b74; font-size:11.5px; } /* ============================================================= */ /* 5. Responsive : carte au-dessus de la liste (mobile) */ /* ============================================================= */ @media (max-width:900px){ body.li-mapx-on .li-mapx-row{ flex-direction:column !important; gap:0; } body.li-mapx-on .li-mapx-row > .hp-page__content{ flex:1 1 auto !important; max-width:none !important; width:100% !important; order:2; } /* Carte NON collante sur mobile : le position:sticky + une carte Leaflet (qui capte le tactile) créait des conflits de défilement sur iOS. Bloc normal de hauteur fixe → on fait défiler la liste dessous, on panote la carte dessus, sans conflit. Marge HAUTE : espace avec le bouton « Filtrer » au-dessus. Petites marges GAUCHE/DROITE (pas pleine largeur) : laissent une fine bande hors carte où le doigt fait défiler la PAGE au lieu d'être capté par le pan tactile de Leaflet — sans ça, un swipe qui commence sur la carte ne fait jamais défiler sous la carte. */ body.li-mapx-on .li-mapx-pane{ order:1; position:relative !important; top:auto !important; width:auto; height:56vh; min-height:300px; margin:14px 10px 16px; border-radius:18px; } /* Barre de tri étroite (demande user 2026-07-10) : ligne 1 = « Trier par » à gauche + bascule Liste/Carte poussée à DROITE ; ligne 2 = « X annonces » seul, en dessous. Surcharge le passage en colonne de hivepress.css (@media 680px, :has(.hp-form--listing-sort)) uniquement quand notre bascule est présente. */ .hp-page__topbar:has(.li-mapx-toolbar){ flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important; } /* Bloc « Trier par » : PLAFONNÉ et rétractable. Après un live-filter, le Select2 « inline » d'HivePress se réinitialise parfois mal → le