(PAS le ). Le JS (custom.js) lui pose une hauteur viewport inline (style="max-height: …px; height: calc(100vh)"). On la neutralise pour revenir à une page qui grandit avec son contenu (sinon le footer recouvre la grille). */ .main-half-map-wrap { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } /* 2) .half-map-wrap est en position:absolute (main.css) ET en .d-flex (display:flex !important de Bootstrap). On le remet dans le flux normal : - position: static -> sinon le footer remonte (hors flux) - display: block !important -> sinon la grille reste un flex-item étiré à la hauteur figée par le JS, et déborde sous le footer. */ .main-half-map-wrap .half-map-wrap { position: static !important; display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } /* Conteneurs internes des résultats : aucune hauteur figée / scroll interne */ .main-half-map-wrap #half-map-listing-area, .main-half-map-wrap #houzez_ajax_container, .main-half-map-wrap .half-map-right-wrap .listing-view { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } /* On neutralise le split (carte calc(100% - 780px) / panneau fixe 780px) : carte et résultats occupent chacun toute la largeur (un seul visible à la fois). */ .main-half-map-wrap .half-map-left-wrap, .main-half-map-wrap .half-map-right-wrap { width: 100% !important; max-width: 100% !important; float: none; } /* Panneau résultats : flux de page normal (pas de scroll interne, pas de hauteur figée) */ .main-half-map-wrap .half-map-right-wrap { height: auto !important; overflow: visible !important; } /* Visibilité pilotée par la classe de vue sur le (mk-view-grid | mk-view-map), posée par PHP (défaut = grid) puis par notre JS au toggle. !important pour battre les display inline posés par les handlers natifs Houzez. */ /* Le panneau résultats (recherche + barre d'outils + bascule + grille) reste TOUJOURS visible — sinon on perdrait la bascule en vue carte. */ .main-half-map-wrap #half-map-listing-area { display: block !important; } /* Carte : masquée en vue Damier, visible en vue Carte (split : résultats à gauche + carte sticky à droite, voir le bloc "VUE CARTE" en bas du fichier). */ body.mk-view-grid .half-map-left-wrap { display: none !important; } body.mk-view-map .half-map-left-wrap { display: block !important; } /* Hauteur de la carte quand elle est affichée */ .main-half-map-wrap .half-map-left-wrap .map-wrap { height: auto; } .main-half-map-wrap #houzez-properties-map { width: 100%; height: 78vh; min-height: 480px; } /* On masque le switch mobile natif : remplacé par notre barre de toggles */ .main-half-map-wrap .mobile-map-switch { display: none !important; } /* ---- Barre de toggles "Listing / Damier / Carte" (injectée en JS) ---- */ .mk-view-toggle { display: inline-flex; gap: 4px; background: #f3f4f6; border-radius: 8px; padding: 4px; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; } .mk-view-toggle .mk-vt-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--mk-navy); font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 14px; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; } .mk-view-toggle .mk-vt-btn:hover { background: #e7e9ec; } .mk-view-toggle .mk-vt-btn.is-active { background: var(--mk-navy); color: #fff; } .mk-view-toggle .mk-vt-btn i { font-size: 15px; } @media (max-width: 575px) { .mk-view-toggle .mk-vt-btn span { display: none; } } /* ---- Contenu centré dans un container (barre d'outils + grille) ---- La barre d'outils (.page-title-wrap) est sortie du panneau résultats par le JS (sœur de la recherche et de l'intro) : elle reste donc PLEINE LARGEUR, contenu centré à 1200px, dans les deux modes. La grille (#houzez_ajax_container) reste, elle, dans le panneau. !important pour verrouiller la largeur. */ .main-half-map-wrap .page-title-wrap, .main-half-map-wrap .half-map-wrap #houzez_ajax_container, .main-half-map-wrap .half-map-wrap .mk-search-clone { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; float: none; } .main-half-map-wrap .page-title-wrap { padding: 24px 15px 14px; } .main-half-map-wrap .page-title-wrap .d-flex { flex-wrap: wrap; gap: 12px; align-items: center; } .main-half-map-wrap #houzez_ajax_container, .main-half-map-wrap .mk-search-clone { padding: 0 15px 56px; } /* Nombre de colonnes de la grille : on force le rendu via le width des enfants directs de .grid-view.row, ce qui override les classes row-cols-* de Houzez. S'applique aussi aux résultats AJAX (même conteneur). Responsive : 1 colonne (mobile) / 2 colonnes (tablette et desktop, maximum 2). */ .main-half-map-wrap .half-map-right-wrap .grid-view.row > * { flex: 0 0 auto; width: 100%; } @media (min-width: 768px) { .main-half-map-wrap .half-map-right-wrap .grid-view.row > * { width: 50%; } } /* On masque le switch grille/liste natif : remplacé par notre bascule */ .main-half-map-wrap .listing-switch-view { display: none !important; } /* ========================================================================= BARRE DE RECHERCHE — rendu type prod : [ Type · Ville · Surface · Budget ] + bouton crème "X biens" sur une seule ligne. Save/Effacer masqués. ========================================================================= */ .main-half-map-wrap .advanced-search-half-map { padding: 22px 0; background: #fff; } .main-half-map-wrap .advanced-search-half-map .container { max-width: 1200px; } /* Form sur une ligne : [ rangée de champs (flex:1) ] [ bouton ] */ .main-half-map-wrap .advanced-search-half-map form { display: flex; flex-wrap: wrap; align-items: center; /* bouton aligné verticalement avec les champs */ gap: 12px; } .main-half-map-wrap .advanced-search-half-map form > .row { flex: 1 1 auto; width: auto; margin: 0; --bs-gutter-x: 12px; --bs-gutter-y: 0; /* sinon le gutter vertical pousse les champs vers le bas */ row-gap: 0; align-items: center; } /* "other features" : inutilisé ici */ .main-half-map-wrap .advanced-search-half-map .half-map-features-list-wrap { display: none; } /* Groupe boutons à la fin de la ligne ; Save + Effacer masqués (comme prod) */ .main-half-map-wrap .advanced-search-half-map .half-map-buttons-wrap { flex: 0 0 auto; width: auto !important; margin: 0; flex-wrap: nowrap; } .main-half-map-wrap .advanced-search-half-map .save-search-form-wrap, .main-half-map-wrap .advanced-search-half-map .reset-search-btn-wrap { display: none !important; } /* Champs : hauteur / bordure / arrondi uniformes */ .main-half-map-wrap .advanced-search-half-map .form-group { margin: 0; } /* bootstrap-select recopie .form-control sur son wrapper -> on le neutralise (simple conteneur), seul le bouton .dropdown-toggle porte la "boîte" visible. */ .main-half-map-wrap .advanced-search-half-map .bootstrap-select { width: 100% !important; height: auto !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* La vraie boîte visible : inputs (hors wrapper bootstrap-select) + bouton du select */ .main-half-map-wrap .advanced-search-half-map .form-control:not(.bootstrap-select), .main-half-map-wrap .advanced-search-half-map .bootstrap-select > .dropdown-toggle { height: 52px !important; border: 1px solid #e3e6ea !important; border-radius: 6px !important; background-color: #fff !important; color: var(--mk-navy) !important; font-size: 15px; box-shadow: none !important; } .main-half-map-wrap .advanced-search-half-map .form-control:not(.bootstrap-select) { padding: 0 16px !important; } .main-half-map-wrap .advanced-search-half-map .bootstrap-select > .dropdown-toggle { padding: 0 36px 0 16px !important; /* place pour le chevron à droite */ } .main-half-map-wrap .advanced-search-half-map .form-control::placeholder { color: #9aa0a6; opacity: 1; } /* Suffixe d'unité collé à droite du champ (m² pour la surface, € pour le budget) */ .main-half-map-wrap .advanced-search-half-map .mk-field-suffix { position: relative; } .main-half-map-wrap .advanced-search-half-map .mk-field-suffix .form-control { padding-right: 40px !important; } .main-half-map-wrap .advanced-search-half-map .mk-field-suffix .mk-suffix { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--mk-muted); font-size: 14px; line-height: 1; pointer-events: none; } /* Centrage vertical du libellé : bootstrap-select pose .filter-option en position:absolute (texte calé en haut) -> on le passe en flex centré sur toute la hauteur du bouton. */ .main-half-map-wrap .advanced-search-half-map .bootstrap-select .dropdown-toggle .filter-option { display: flex; align-items: center; height: 100%; top: 0; } .main-half-map-wrap .advanced-search-half-map .bootstrap-select .filter-option-inner-inner { color: var(--mk-navy); font-size: 15px; } /* Bouton de recherche : crème, inline (compteur "X biens" posé en JS) */ .main-half-map-wrap .advanced-search-half-map .btn-search { width: auto !important; height: 52px; min-width: 130px; padding: 0 26px; background: var(--mk-cream) !important; color: var(--mk-navy) !important; border: 1px solid var(--mk-cream) !important; border-radius: 6px !important; text-transform: uppercase; font-weight: 600; letter-spacing: .4px; white-space: nowrap; transition: background .2s ease, color .2s ease; } .main-half-map-wrap .advanced-search-half-map .btn-search:hover { background: var(--mk-navy) !important; color: var(--mk-cream) !important; border-color: var(--mk-navy) !important; } /* Responsive : sous 992px, bouton pleine largeur sous les champs */ @media (max-width: 991.98px) { .main-half-map-wrap .advanced-search-half-map form > .row, .main-half-map-wrap .advanced-search-half-map .half-map-buttons-wrap { flex: 1 1 100%; } .main-half-map-wrap .advanced-search-half-map .btn-search { width: 100% !important; } } /* ---- Phrase d'intro en haut de la page (façon prod) ---- */ .main-half-map-wrap .mk-search-intro { max-width: 1200px; margin: 0 auto; padding: 6px 15px 4px; } .main-half-map-wrap .mk-search-intro p { margin: 0; color: var(--mk-navy); font-size: 16px; line-height: 1.6; } /* ---- Tri "Trier par ..." (barre d'outils) : dropdown stylé comme les champs ---- */ .main-half-map-wrap .sort-by > .d-flex { flex-wrap: nowrap; align-items: center; gap: 10px; } .main-half-map-wrap .sort-by .sort-by-title { color: var(--mk-navy); font-size: 15px; white-space: nowrap; padding: 0; } /* wrapper bootstrap-select neutralisé (cf. champs de recherche) */ .main-half-map-wrap .sort-by .bootstrap-select { width: auto !important; min-width: 210px; height: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .main-half-map-wrap .sort-by .bootstrap-select > .dropdown-toggle { height: 46px !important; border: 1px solid #e3e6ea !important; border-radius: 6px !important; background-color: #fff !important; color: var(--mk-navy) !important; font-size: 15px; box-shadow: none !important; padding: 0 36px 0 16px !important; } .main-half-map-wrap .sort-by .bootstrap-select .dropdown-toggle .filter-option { display: flex; align-items: center; height: 100%; top: 0; } .main-half-map-wrap .sort-by .bootstrap-select .filter-option-inner-inner { color: var(--mk-navy); font-size: 15px; } /* ---- Message "aucun résultat" : bandeau beige pleine largeur, façon prod ---- (le conteneur est un enfant direct de .grid-view.row -> il prendrait sinon une largeur de colonne ; on le force à 100%). */ .main-half-map-wrap .grid-view.row > .search-no-results-found-wrap, .main-half-map-wrap .grid-view.row > .search-no-results-found { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } .main-half-map-wrap .search-no-results-found { width: 100%; margin: 8px 0 !important; /* annule le mx-4 natif */ padding: 22px 24px; background: #d9caa2; color: var(--mk-navy); text-align: center; font-size: 16px; font-weight: 500; border-radius: 4px; } /* Lien « Contactez-nous » du bandeau : souligné par défaut, navy ; au survol navy éclairci (et pas le bleu clair hérité). */ .main-half-map-wrap .search-no-results-found a { color: var(--mk-navy); text-decoration: underline; } .main-half-map-wrap .search-no-results-found a:hover, .main-half-map-wrap .search-no-results-found a:focus { color: #3a5170; text-decoration: underline; } /* ---- Pagination : page active en navy (au lieu du bleu Bootstrap) ---- */ .main-half-map-wrap .pagination .page-item.active .page-link { background-color: var(--mk-navy) !important; border-color: var(--mk-navy) !important; color: #fff !important; } .main-half-map-wrap .pagination .page-link { color: var(--mk-navy); } .main-half-map-wrap .pagination .page-link:hover { background-color: #f3f4f6; border-color: #e3e6ea; color: var(--mk-navy); } .main-half-map-wrap .pagination .page-link:focus { box-shadow: none; } /* ========================================================================= VUE CARTE — résultats à gauche (grille, scroll du document) + carte sticky à droite (toujours visible). Aucun container/scroll interne : on suit le scroll principal de la page. Le sticky fonctionne car aucun ancêtre n'a d'overflow ≠ visible (cf. règles plus haut). ========================================================================= */ @media (min-width: 992px) { /* .half-map-wrap devient une rangée flex : [ résultats | carte ] */ body.mk-view-map .main-half-map-wrap .half-map-wrap { display: flex !important; align-items: flex-start; /* indispensable pour le sticky (pas d'étirement) */ gap: 24px; max-width: 1200px; /* aligné sur la barre de recherche + la grille */ margin: 0 auto; padding: 0 15px; } /* Résultats à gauche : flux de page normal, pas de scroll interne */ body.mk-view-map .main-half-map-wrap .half-map-right-wrap { flex: 1 1 58% !important; width: auto !important; max-width: none !important; min-width: 0; /* évite que la grille déborde du flex */ } /* La grille occupe toute la colonne (plus de centrage 1200px ici). La barre d'outils, elle, a été sortie du panneau (cf. JS) : elle garde son 1200px centré via la règle de base, donc on ne la cible plus ici. */ body.mk-view-map .main-half-map-wrap #houzez_ajax_container { max-width: none !important; padding-left: 0; padding-right: 0; } /* Carte à droite : sticky, reste visible pendant le scroll des résultats. --mk-sticky-top est calculé en JS d'après la hauteur du header (+ admin bar). */ body.mk-view-map .main-half-map-wrap .half-map-left-wrap { flex: 0 0 42% !important; width: 42% !important; max-width: 42% !important; position: sticky !important; top: var(--mk-sticky-top, 90px); align-self: flex-start; height: calc(100vh - var(--mk-sticky-top, 90px) - 20px); overflow: hidden; border-radius: 10px; } body.mk-view-map .main-half-map-wrap .half-map-left-wrap .map-wrap, body.mk-view-map .main-half-map-wrap #houzez-properties-map { height: 100% !important; min-height: 0 !important; } } /* Sous 992px : le split sticky n'a pas de sens -> grille au-dessus, carte en dessous (pleine largeur). */ @media (max-width: 991.98px) { body.mk-view-map .main-half-map-wrap #houzez-properties-map { height: 70vh; } } /* ========================================================================= CARTE — price-pins + clusters + popup (charte Melkeys) Nécessite Theme Options -> Maps -> markerPricePins = Yes pour les pins-prix. ========================================================================= */ /* ---- Price-pin : pilule navy + pointe vers le point ---- */ .main-half-map-wrap .osm-marker.map-marker-label { display: inline-block; position: relative; transform: translate(-50%, calc(-100% - 6px)); background: var(--mk-navy) !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 16px; padding: 5px 11px; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 3px 10px rgba(23, 39, 64, .3); cursor: pointer; transition: background .15s ease, transform .15s ease; } .main-half-map-wrap .osm-marker.map-marker-label::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--mk-navy); } .main-half-map-wrap .osm-marker.map-marker-label:hover { background: #0f1c30 !important; z-index: 1000; } /* ---- Cluster : pastille ronde navy ---- */ .main-half-map-wrap .houzez-osm-cluster { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mk-navy); color: #fff; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 700; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(23, 39, 64, .3); } /* ---- Popup : mini-carte propre ---- */ .main-half-map-wrap .leaflet-popup-content-wrapper { border-radius: 12px !important; padding: 0 !important; overflow: hidden; box-shadow: 0 12px 32px rgba(23, 39, 64, .22) !important; } .main-half-map-wrap .leaflet-popup-content { margin: 0 !important; width: 260px !important; } .main-half-map-wrap .property-info-window { font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; color: var(--mk-navy); width: 100% !important; max-width: 100%; box-sizing: border-box; overflow: hidden; } /* Tous les éléments internes de la popup respectent la largeur (border-box) pour éviter tout débordement à droite (contenu masqué). */ .main-half-map-wrap .property-info-window *, .main-half-map-wrap .leaflet-popup-content * { box-sizing: border-box; max-width: 100%; } .main-half-map-wrap .property-info-window .info-window-image { position: relative; line-height: 0; } .main-half-map-wrap .property-info-window .listing-thumbnail { width: 100%; height: 150px; object-fit: cover; display: block; } .main-half-map-wrap .property-info-window .info-window-label { position: absolute; top: 10px; left: 10px; background: var(--mk-navy); color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 4px 8px; border-radius: 4px; line-height: 1; } .main-half-map-wrap .property-info-window .info-content { padding: 12px 14px 14px !important; } .main-half-map-wrap .property-info-window .info-window-price { font-size: 18px; font-weight: 700; color: var(--mk-navy); margin-bottom: 6px; } .main-half-map-wrap .property-info-window .info-window-property-type { margin-top: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--mk-muted); } .main-half-map-wrap .property-info-window address, .main-half-map-wrap .property-info-window .item-address { margin: 4px 0 0; font-size: 13px; color: var(--mk-muted); } /* Bouton fermer : rond, dans le coin haut-droit de la popup */ .main-half-map-wrap #houzez-properties-map a.leaflet-popup-close-button { right: 8px !important; top: 8px !important; width: 24px; height: 24px; line-height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .92) !important; color: var(--mk-navy) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); } /* ---- Pagination « douce » : ancienne grille atténuée + petit spinner ---- */ #houzez_ajax_container.mk-paginating { position: relative; min-height: 120px; } /* Atténue la grille en cours pendant le chargement (mais on la garde visible). */ #houzez_ajax_container.mk-paginating > .listing-view { opacity: .45; transition: opacity .15s ease; pointer-events: none; } .mk-pagi-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding-top: 60px; background: rgba(255, 255, 255, .15); } .mk-pagi-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(23, 39, 64, .18); border-top-color: var(--mk-navy, #172740); animation: mk-pagi-spin .8s linear infinite; } @keyframes mk-pagi-spin { to { transform: rotate(360deg); } } /* ---- Recherche/filtre : clone figé de l'ancienne grille superposé ---- Le clone est attaché au PARENT de #houzez_ajax_container (que le natif vide), et calé par-dessus la zone du conteneur via top/left/width/height inline. */ /* Clone d'attente : reste dans le flux (occupe l'espace -> footer ne remonte pas). Contenu atténué + non interactif. */ .mk-search-clone .listing-view { opacity: .45; pointer-events: none; } .mk-search-clone .houzez_ajax_pagination { display: none; } .mk-search-clone .mk-pagi-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding-top: 60px; background: rgba(255, 255, 255, .15); } /* Conteneur original masqué pendant le chargement (le clone le remplace visuellement dans le flux). display:none suffit : le clone tient l'espace. */ #houzez_ajax_container.mk-search-hidden { display: none !important; } /* ========================================================================= Carte en plein écran (bouton fullscreen Leaflet -> .map-wrap.houzez-fullscreen-map) En vue « Carte » (mk-view-map), les colonnes ont position:sticky/overflow qui peuvent piéger le position:fixed du fullscreen -> la grille (58%) restait visible par-dessus. On neutralise ces contraintes et on masque les résultats. ========================================================================= */ /* Détache les ancêtres qui créent un containing block / rognent le fixed. Double ciblage : classe body posée en JS (universel) + :has() (fallback). */ body.mk-map-fullscreen .main-half-map-wrap .half-map-left-wrap, body.mk-view-map .main-half-map-wrap:has(.map-wrap.houzez-fullscreen-map) .half-map-left-wrap { position: static !important; overflow: visible !important; height: auto !important; max-width: none !important; flex-basis: auto !important; width: auto !important; } /* Le conteneur carte occupe réellement tout l'écran, au-dessus de tout. */ .map-wrap.houzez-fullscreen-map { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2147483000 !important; border-radius: 0 !important; margin: 0 !important; } .map-wrap.houzez-fullscreen-map #houzez-properties-map { width: 100% !important; height: 100% !important; } /* Masque la zone résultats/grille + tout overlay résiduel pendant le fullscreen. */ body.mk-map-fullscreen .main-half-map-wrap .half-map-right-wrap, body.mk-map-fullscreen .main-half-map-wrap .mk-search-clone, body.mk-map-fullscreen .main-half-map-wrap .mk-pagi-overlay, body.mk-view-map .main-half-map-wrap:has(.map-wrap.houzez-fullscreen-map) .half-map-right-wrap, body.mk-view-map .main-half-map-wrap:has(.map-wrap.houzez-fullscreen-map) .mk-search-clone, body.mk-view-map .main-half-map-wrap:has(.map-wrap.houzez-fullscreen-map) .mk-pagi-overlay { display: none !important; }