/* =====================================================
   MOVAWAY — LISTINGS (page Londres : filtres + grille + carte + types)
   ===================================================== */

/* Fil d'Ariane (partagé fiche logement + pages de listing ; déplacé depuis
   detail.css, qui n'est plus chargé sur les listings) */
/* ---- Fil d'Ariane (single logement) ---- */
.logement-breadcrumb {
  margin: 4px 0 8px;
  font-size: 13px;
}
.logement-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.logement-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
}
.logement-breadcrumb li:not(:last-child)::after {
  content: "›";
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1;
}
.logement-breadcrumb a {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.logement-breadcrumb a:hover { color: var(--primary); }
.logement-breadcrumb li[aria-current="page"] span {
  color: var(--ink);
  font-weight: 700;
}

/* Fil d'Ariane en tête de page de listing (marge spécifique) */
.logements-breadcrumb {
  margin: 0 0 18px;
}

/* =====================================================
   PAGE LOGEMENT — conversion fidèle de la page WordPress
   ===================================================== */
.page-content {
  padding: 60px 0 80px;
}
.page-content-col {
  width: 100%;
  max-width: 1100px;
}
.page-content h2 {
  margin: 40px 0 16px;
  font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem);
}
.page-content h2:first-child { margin-top: 0; }
.page-content h3 {
  margin: 30px 0 12px;
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.3rem);
}
.page-content p {
  margin-bottom: 14px;
  line-height: 1.7;
}
.page-content ul {
  list-style: disc;
  padding-left: 22px;
  margin: 10px 0 18px;
}
.page-content ul li {
  margin-bottom: 6px;
  line-height: 1.55;
}
.page-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-content a:hover { color: var(--primary-dark); }

/* Encadré gris (reproduction du data-bg-color="#EFF1F4" du source) */
.page-content .box {
  background-color: #EFF1F4;
  border-radius: var(--border-radius);
  padding: 50px;
  margin: 20px 0;
}
.page-content .box p:last-child { margin-bottom: 0; }

/* =====================================================
   SECTION LOGEMENTS (haut de page : filtres + grille + carte)
   ===================================================== */
.logements-section {
  padding: 30px 0 60px;
}

/* ---- Layout : head + listings sur la gauche, sidebar (map) sticky à droite ---- */
.logements-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  grid-template-areas:
    "head     sidebar"
    "listings sidebar";
  column-gap: 36px;
  row-gap: 0;
  align-items: start;
}
.logements-head     { grid-area: head;     min-width: 0; }
.logements-listings { grid-area: listings; min-width: 0; }
.logements-sidebar  { grid-area: sidebar;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

/* ---- Filtres ---- */
.logements-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.logements-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Icône de préfixe (type, dispo, prix) */
.logements-filter-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color .2s ease;
}
.logements-filter-icon svg { width: 100%; height: 100%; }
.logements-filter select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  /* Place pour : icône à gauche (40px) + texte + chevron à droite (38px) */
  padding: 11px 38px 11px 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  min-width: 210px;
  /* Chevron SVG en background-image (plus propre que le triangle CSS) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6378' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.logements-filter select:hover {
  border-color: var(--ink-mute);
}
.logements-filter select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41, 124, 255, 0.15);
}

/* État actif : un filtre est sélectionné (valeur différente du défaut) */
.logements-filter.is-active select {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.logements-filter.is-active .logements-filter-icon { color: var(--primary); }

/* ---- Filtre multi-sélection (Type, Prix) ---- */
.logements-filter-multi,
.logements-filter-date,
.logements-filter-range { position: relative; }
.logements-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 11px 16px 11px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  min-width: 210px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.logements-filter-toggle .logements-filter-icon {
  position: static;
  transform: none;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.logements-filter-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logements-filter-chevron {
  display: inline-flex;
  color: var(--ink-soft);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.logements-filter.is-open .logements-filter-chevron { transform: rotate(180deg); }
.logements-filter-toggle:hover { border-color: var(--ink-mute); }
.logements-filter.is-open .logements-filter-toggle {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41, 124, 255, 0.15);
}
/* État actif (filtre appliqué) */
.logements-filter.is-active .logements-filter-toggle {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.logements-filter.is-active .logements-filter-icon { color: var(--primary); }

/* Panneau déroulant */
.logements-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logements-filter-panel[hidden] { display: none; }
.logements-filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease;
}
.logements-filter-check:hover { background: var(--bg-soft); }
.logements-filter-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ===== Filtre DATE (disponible à partir du) ===== */
.logements-date-panel {
  width: 250px;
  max-width: 280px;
  gap: 8px;
  padding: 14px;
}
.logements-date-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.logements-dispo-date {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.logements-dispo-date:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41, 124, 255, 0.15);
  outline: none;
}
.logements-date-clear {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}
.logements-date-clear:hover { text-decoration: underline; }

/* ===== Filtre PRIX (réglette min/max) ===== */
.logements-range-panel {
  width: 280px;
  max-width: 300px;
  padding: 16px 18px 18px;
}
.logements-range-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}
.logements-range-min,
.logements-range-max {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.logements-range-sep { display: none; } /* chips gauche/droite : pas de séparateur central */

.logements-range-slider {
  position: relative;
  height: 24px;
}
/* Rail + remplissage (centrés verticalement sur 4px de haut) */
.logements-range-track,
.logements-range-fill {
  position: absolute;
  top: 10px;
  height: 4px;
  border-radius: 4px;
}
.logements-range-track { left: 0; right: 0; background: #e5e7eb; }
.logements-range-fill  { background: var(--primary); }

/* Deux <input range> superposés : transparents, seuls les pouces captent la souris. */
.logements-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.logements-range-input:focus { outline: none; }

/* WebKit / Blink */
.logements-range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background: transparent;
  border: 0;
}
.logements-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  margin-top: -7px; /* centre le pouce (18px) sur le rail (4px) */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 8, 56, 0.35);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.logements-range-input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.logements-range-input:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(41, 124, 255, 0.18); }

/* Firefox */
.logements-range-input::-moz-range-track { height: 4px; background: transparent; border: 0; }
.logements-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 8, 56, 0.35);
  cursor: pointer;
}

/* Bouton "Effacer les filtres" — apparaît seulement si un filtre est actif */
.logements-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dee2e8;
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.logements-filter-reset svg {
  width: 14px;
  height: 14px;
}
.logements-filter-reset:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-1px);
}
.logements-filter-reset[hidden] { display: none; }

/* ---- Compteur ---- */
.logements-count-ville {
  grid-column: 1;
  grid-row: 2;
  margin: 22px 0 22px 10px;
}
.logements-count-ville h1 {
  font-size: 26px !important;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 600px) {
  .logements-count-ville h1 { font-size: 21px !important; }
}
.logements-count-ville .count { color: var(--primary); }

/* ---- Grille de cards ----
   auto-fit + minmax : les cards remplissent TOUTE la largeur disponible (les colonnes
   vides sont collapsées et l'espace réparti sur les cards présentes). */
.logements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
  width: 100%;
}

/* ---- Card logement ---- */
.wpgmp_locations { display: block; }

.wpgmp_listing_container .logement-card, .logement-card {
  background: transparent;
  border: 0 !important;          /* neutralise la bordure ajoutée par le plugin carte */
  border-radius: var(--border-radius);
  overflow: visible;
  box-shadow: none !important;
  margin-bottom: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Neutralise aussi tout cadre/fond hérité du plugin sur le conteneur d'item */
.logements-grid .wpgmp_locations,
.wpgmp_listing_container .wpgmp_locations {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Filet de sécurité : sur les cards de LISTING, le bloc "vérifié par" est
   remplacé par le badge de disponibilité (cf. partial). Si un ancien build
   l'affiche encore (grosse photo), on le masque ici. Scopé à .logements-grid
   pour NE PAS toucher les cards "logements similaires" de la page single. */
.logements-grid .logement-card-header,
.logements-grid .logement-verified {
  display: none !important;
}
.logement-card {
  /* Nécessaire pour que .logement-verified (position:absolute) s'ancre sur la card */
  position: relative;
}

/* Header avec badge "VÉRIFIÉ PAR" en haut à droite de l'image */
.logement-card-header { /* wrapper inerte — le badge se positionne lui-même */ }
.wpgmp_listing_container .logement-verified, .logement-verified {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px) !important;
  padding: 3px 8px 3px 4px !important;
  border-radius: var(--radius-pill, 999px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 8, 56, 0.12);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.verifie-photo-inline {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  background: #fff;
}

/* Image */
.wpgmp_listing_container .logement-card-image, .logement-card-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
  border-radius: var(--border-radius);
}
.logement-card-image a,
.logement-card-image .fc-feature-img { display: block; width: 100%; height: 100%; }

/* Badge "nombre de photos" en bas à droite de l'image */
.logement-card-photos {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(0, 8, 56, 0.62);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.logement-card-photos svg { display: block; }

/* Disponibilité affichée SUR la photo (en haut à gauche) */
.logement-card-dispo {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(0, 8, 56, 0.18);
  pointer-events: none;
}
.logement-card-dispo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c5cdd9; /* gris par défaut */
  flex-shrink: 0;
}
.logement-card-dispo.logement-dispo-Disponible { color: #047857; }
.logement-card-dispo.logement-dispo-Disponible::before { background: #2ecc71; }
.logement-card-dispo.logement-dispo-Bientôt { color: #b45309; }
.logement-card-dispo.logement-dispo-Bientôt::before { background: #f59e0b; }

/* IMPORTANT : neutralise la règle du plugin WP Google Map
   `.wpgmp_locations img { width:200px !important; float:left; border:1px solid #ddd; padding:5px; margin... }`
   qui s'applique à NOS images de card (elles sont dans .wpgmp_locations) et casse le rendu.
   On reprend la main avec une spécificité supérieure + !important. */
.wpgmp_listing_container .logement-card-image img,
.logement-card .logement-card-image img,
.similar-grid .logement-card-image img,
.logements-grid .logement-card-image img,
.logement-card-image img,
.wpgmp_featured_image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* Contenu — pleine largeur, aligné avec les bords de l'image */
.logement-card-content {
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* Ville de l'annonce (page de résultats de recherche) : pilule alignée en bas
   de la carte, à la place des badges caution/charges. */
.logement-card-ville {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 13px 6px 10px;
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
}
.logement-card-ville svg { color: var(--primary); flex: none; }
.logement-card-ville span { line-height: 1; }

/* Statut "Disponible maintenant" / "Bientôt disponible" */
.logement-card-meta { margin: 0; }
.logement-disponibilite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 0 3px !important;
  border-radius: 20px;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  margin: 7px 0 5px !important;
  color: var(--ink-mute);
}
.logement-disponibilite::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c5cdd9; /* gris par défaut */
  display: inline-block;
  flex-shrink: 0;
}
.logement-dispo-Disponible {
  color: #065f46;
}
.logement-dispo-Disponible::before {
  background: #2ecc71; /* vert quand disponible */
}
.logement-dispo-Bientôt.disponible, .logement-dispo-Bientôt {
  /* background-color: #f3f4f6; */
  color: #6b7280;
}

/* Titre — stretched link : tout le card est cliquable mais 1 seul <a> dans le DOM */
.logement-card-title { line-height: 1.2; }
.logement-card-title a {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  transition: color .2s ease;
  display: block;
}
.logement-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.logement-card:hover .logement-card-title a { color: var(--primary); }
/* Le badge "vérifié" reste cliquable au-dessus (visuel uniquement, pas un lien ici) */
.logement-verified { pointer-events: none; }

/* Prix — montant lisible en navy (PAS bleu : éviter de dupliquer le hover bleu du titre).
   Le bleu marque est réservé à l'icône "étiquette" en accent → la hiérarchie se fait
   par la taille + l'icône. Suffixe /mois discret. */
.logement-card-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 5px 11px;
  background: var(--primary-soft, #e8f4ff);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.logement-card-price::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.logement-card-price .price-amount {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.logement-card-price .price-period {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* Extrait sous le prix */
.logement-card-excerpt {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badges (caution, charges) */
.logement-card-badge {
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
}
.wpgmp_listing_container .logement-card-badge {
  padding: 2px 10px;
  margin-bottom: 3px;
  border-radius: var(--border-radius);
  font-size: var(--font-small) !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logement-card-badge .badge-text {
  text-transform: uppercase;
  color: var(--ink);
}
.wpgmp_listing_container .logement-card-badge span,
.logement-card-badge span {
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 0.1px;
}
.wpgmp_listing_container .logement-card-charges {
  background: var(--color-5) url(https://movaway.fr/wp-content/themes/salient-child/img/logement-card-charge.svg) no-repeat 12px center;
  background-size: 14px 14px;
  padding-left: 36px;
}
.wpgmp_listing_container .logement-card-caution {
  background: var(--color-5) url(https://movaway.fr/wp-content/themes/salient-child/img/logement-card-caution.svg) no-repeat 12px center;
  background-size: 14px 14px;
  padding-left: 36px;
}

/* ---- Pagination ---- */
.logements-pagination {
  display: flex;
  flex-direction: row;   /* défensif : jamais en colonne même si un parent impose column */
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 40px 0 10px;
  flex-wrap: wrap;
  width: 100%;
  grid-column: 1 / -1;   /* si jamais le parent est une grille, occupe toute la largeur */
}
.logements-pagination .page-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0b1a3d;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.logements-pagination .page-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.logements-pagination .page-btn.is-current {
  background: var(--primary-cta);
  cursor: default;
  transform: none;
}
.logements-pagination .page-btn.is-current:hover { background: var(--primary-cta); }

/* ---- Carte sticky (Leaflet container) ---- */
.logements-map-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
#logements-map {
  width: 100%;
  height: 560px;
  background: var(--bg-soft);
}

@media (max-width: 1280px) {
  .logements-layout { grid-template-columns: minmax(0, 1fr) 400px; }
  #logements-map { height: 500px; }
}
@media (max-width: 1100px) {
  .logements-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 999px) {
  .page-content-col { width: 100%; }
  .page-content .box { padding: 30px; }
  .logements-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "sidebar"
      "listings";
    row-gap: 24px;
  }
  .logements-sidebar { position: static; }
  #logements-map { height: 320px; }
}
@media (max-width: 540px) {
  .page-content { padding: 30px 0 50px; }
  .logements-section .container { padding: 0 16px; }
  .logements-grid { grid-template-columns: 1fr; }
  .logements-filter select { min-width: 100%; }
  .logements-filter { width: 100%; }
}

/* =====================================================
   TYPES DE LOGEMENTS — présentation en cards visuelles
   ===================================================== */
.types-section {
  padding: 50px 0 55px;
  background: var(--bg-soft);
}
.types-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 30px;
}
.types-head h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: 8px;
}
.types-head p {
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
  font-size: 14px;
}
.types-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.types-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer; /* curseur main sur toute la card grâce au stretched link */
}
.types-card::before {
  /* léger accent en haut qui apparaît au hover */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  z-index: 2;
}
.types-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.types-card:hover::before {
  transform: scaleX(1);
}
/* Focus visible quand on tabule jusqu'au lien (accessibilité clavier) */
.types-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41, 124, 255, 0.18);
  outline: none;
}
.types-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.types-card-icon svg {
  width: 22px;
  height: 22px;
}
.types-card:hover .types-card-icon {
  background: var(--primary);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}

/* Titre : seul vrai lien (SEO + accessibilité) */
.types-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
  line-height: 1.25;
}
.types-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
  /* Outline retiré ici car la card prend le focus-within visible */
}
.types-card-title a:focus { outline: none; }
.types-card:hover .types-card-title a { color: var(--primary); }
/* Stretched link : zone cliquable étendue à toute la card */
.types-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (max-width: 999px) {
  .types-grid { grid-template-columns: 1fr 1fr; }
  .types-section { padding: 60px 0; }
}
@media (max-width: 540px) {
  .types-grid { grid-template-columns: 1fr; gap: 16px; }
  .types-card { padding: 24px 22px; }
}

/* ============ EMPTY STATE FILTRES (0 résultat) ============ */
.logements-empty {
  text-align: center;
  padding: 60px 30px;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  max-width: 560px;
  margin: 0 auto;
}
.logements-empty[hidden] { display: none; }
.logements-empty-icon {
  width: 56px;
  height: 56px;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.logements-empty h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ink);
}
.logements-empty p {
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.logements-empty-reset {
  background: var(--primary-cta);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.logements-empty-reset:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* ============ PAGE DE RÉSULTATS : RECHERCHE LOGEMENT ============ */
.mvw-lsearch-hero {
  background:
    radial-gradient(1100px 320px at 12% -30%, var(--primary-soft) 0%, transparent 72%),
    linear-gradient(180deg, var(--primary-soft) 0%, #fff 80%);
  border-bottom: 1px solid var(--border);
  padding: 34px 0 42px;
}
.mvw-lsearch-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.mvw-lsearch-crumb a { color: var(--ink-soft); text-decoration: none; transition: color .15s ease; }
.mvw-lsearch-crumb a:hover { color: var(--primary); }
.mvw-lsearch-crumb .is-current { color: var(--ink); font-weight: 600; }
.mvw-lsearch-crumb span[aria-hidden] { color: var(--ink-mute); }

.mvw-lsearch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
}
.mvw-lsearch-eyebrow svg { flex: none; }

.mvw-lsearch-title {
  font-family: var(--font-family-title);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  margin: 16px 0 26px;
  max-width: 24ch;
}
.mvw-lsearch-title .count { color: var(--primary); }

/* Barre de recherche, version hero (plus grande). Le composant .mvw-searchbar
   est défini dans header.css (chargé globalement). */
.mvw-searchbar--hero { max-width: 720px; box-shadow: var(--shadow-lg); }
.mvw-searchbar--hero .mvw-sb-field,
.mvw-searchbar--hero .mvw-sb-submit { height: 54px; }

.mvw-lsearch-grid { margin-top: 4px; }

/* Pagination de la page de résultats (mêmes codes visuels que le blog) */
.mvw-lsearch-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 46px;
}
.mvw-lsearch-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: all .2s ease;
}
.mvw-lsearch-pagination a.page-numbers:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.mvw-lsearch-pagination .page-numbers.current {
  background: var(--primary-cta);
  border-color: var(--primary-cta);
  color: #fff;
  cursor: default;
}
.mvw-lsearch-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}
.mvw-lsearch-pagination .page-numbers svg { display: block; }

/* État vide */
.mvw-lsearch-empty {
  max-width: 560px;
  margin: 24px auto 30px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 48px 34px;
}
.mvw-lsearch-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 20px;
}
.mvw-lsearch-empty h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.mvw-lsearch-empty p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 22px;
}

@media (max-width: 600px) {
  .mvw-lsearch-hero { padding: 24px 0 30px; }
  .mvw-searchbar--hero { box-shadow: var(--shadow-md); }
  .mvw-lsearch-empty { padding: 36px 22px; }
}