/* WOURI ESTATE — recherche de biens (biens.html, en/search.html) : barre d'outils, filtres, vue carte.
   Direction artistique « Cadastre & calcaire » : calcaire, encre, olive, rouille. Gloock + Schibsted Grotesk. */
@layer components {
  .badge--offer { background: repeating-linear-gradient(135deg, var(--calcaire-2) 0 5px, color-mix(in srgb, var(--calcaire-2) 80%, var(--encre)) 5px 6px); color: var(--encre); box-shadow: inset 0 0 0 1px var(--bordure-forte); }
  .seg--block { display: flex; inline-size: 100%; }
  .seg--block label { flex: 1; }
  .results--liste { grid-template-columns: 1fr; }
  /* ---------- Page de recherche ---------- */
  .search-head { padding-block: var(--space-m) var(--space-s); }
  .search-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-l); }
  .search-head h1 { font-size: var(--step-4); }
  .toolbar { position: sticky; inset-block-start: var(--header-total, 4.5rem); z-index: 40; background: color-mix(in srgb, var(--calcaire) 96%, transparent); backdrop-filter: blur(6px); border-block: 1px solid var(--bordure); padding-block: var(--space-xs); }
  .toolbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); }
  .toolbar__q { flex: 1 1 14rem; position: relative; max-inline-size: 22rem; }
  .toolbar__q input { padding-inline-start: 2.5rem; }
  .toolbar__q .icon { position: absolute; inset-inline-start: .8rem; inset-block-start: 50%; translate: 0 -50%; color: var(--gris); pointer-events: none; }
  .toolbar__count { font-weight: 700; margin: 0; min-inline-size: 11ch; }
  .toolbar__sort { display: flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 600; }
  .toolbar__sort select { inline-size: auto; min-block-size: 2.5rem; padding-block: .3rem; }
  .toolbar__spacer { flex: 1; }
  .switch { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--step--1); font-weight: 600; cursor: pointer; min-block-size: 2.5rem; }
  .switch input { appearance: none; inline-size: 2.6rem; block-size: 1.5rem; margin: 0; border-radius: 999px; background: var(--bordure-forte); position: relative; transition: background-color var(--dur-2) var(--ease-out); flex: none; }
  .switch input::before { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 1.125rem; block-size: 1.125rem; border-radius: 50%; background: #fff; transition: translate var(--dur-2) var(--ease-out); }
  .switch input:checked { background: var(--olive); }
  .switch input:checked::before { translate: 1.1rem 0; }
  .switch input:focus-visible { outline: 2px solid var(--rouille); outline-offset: 2px; }
  .vue-seg span { gap: .4rem; display: inline-flex; align-items: center; }
  .vue-seg .icon { inline-size: 1.1rem; block-size: 1.1rem; }
  @media (max-width: 39.99em) {
    .vue-seg span b { display: none; }
    .toolbar__devise { display: none; }
  }
  @media (min-width: 64em) {
    .btn-filtres { display: none; }
    .toolbar__devise { display: none; }
  }
  .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: var(--space-xs); min-block-size: 0; }
  .chips:empty { display: none; }
  .chip { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.25rem; padding: .15rem .35rem .15rem .75rem; border: 0; border-radius: var(--radius); background: var(--laterite-clair); color: var(--rouille-fonce); font-size: var(--step--1); font-weight: 600; }
  .chip:hover { background: color-mix(in srgb, var(--laterite-clair) 80%, var(--rouille)); }
  .chip .icon { inline-size: 1rem; block-size: 1rem; }
  .chip--clear { background: transparent; color: var(--encre-2); text-decoration: underline; padding-inline: .5rem; }
  .search-layout { display: grid; gap: var(--space-m); padding-block: var(--space-s) var(--space-xl); }
  @media (min-width: 64em) {
    .search-layout { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--space-l); align-items: start; }
  }
  .filters { background: var(--chaux); border: 1px solid var(--bordure); border-radius: var(--radius); }
  @media (min-width: 64em) {
    .filters { position: sticky; inset-block-start: calc(var(--header-total, 4.5rem) + 4.5rem); max-block-size: calc(100vh - var(--header-total, 4.5rem) - 5.5rem); overflow-y: auto; }
  }
  .filters__in { padding: var(--space-s); display: grid; gap: var(--space-s); }
  .fgroup { display: grid; gap: .5rem; padding-block-end: var(--space-s); border-block-end: 1px solid var(--bordure); }
  .fgroup:last-of-type { border-block-end: 0; padding-block-end: 0; }
  .fgroup > legend, .fgroup__title { font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); margin-block-end: .1rem; }
  .fgroup .check { align-items: center; min-block-size: 2rem; font-size: var(--step--1); font-weight: 500; }
  .fgroup .check span:last-child { color: var(--gris); margin-inline-start: auto; }
  .fgroup .check input:disabled + span { color: var(--gris); }
  .fgroup .check:has(input:disabled) { opacity: .6; cursor: not-allowed; }
  .fgroup--villes legend { font-weight: 700; font-size: .75rem; color: var(--olive); letter-spacing: .04em; margin-block: .25rem; }
  .fgroup .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .fgroup select { min-block-size: 2.5rem; font-size: var(--step--1); }
  .seg--ch { display: flex; }
  .seg--ch label { flex: 1; }
  .seg--ch span { min-inline-size: 0; padding-inline: .2rem; }
  #dlg-filtres { inline-size: min(100vw, 30rem); max-inline-size: 100vw; max-block-size: 100dvh; block-size: 100dvh; margin: 0; margin-inline-start: auto; border-radius: 0; display: none; }
  #dlg-filtres[open] { display: grid; grid-template-rows: auto 1fr auto; }
  #dlg-filtres .filters { border: 0; border-radius: 0; position: static; max-block-size: none; overflow: visible; }
  .dlg-filtres__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-s); border-block-end: 1px solid var(--bordure); position: sticky; inset-block-start: 0; background: var(--chaux); z-index: 2; }
  .dlg-filtres__head h2 { font-size: var(--step-2); }
  .dlg-filtres__foot { position: sticky; inset-block-end: 0; display: flex; gap: var(--space-xs); padding: var(--space-xs) var(--space-s); background: var(--chaux); border-block-start: 1px solid var(--bordure-forte); }
  .dlg-filtres__foot .btn { flex: 1; }
  .search-main { min-inline-size: 0; }
  .search-main[data-vue="carte"] .results { grid-template-columns: 1fr; }
  .search-main[data-vue="carte"] .map-col { display: block; }
  .map-col { display: none; }
  .map-col .skip-map { display: inline-block; margin-block-end: .5rem; font-size: var(--step--1); }
  .skip-map:not(:focus) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .search-split { display: grid; gap: var(--space-s); }
  @media (min-width: 80em) {
    .search-main[data-vue="carte"] .search-split { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--space-m); }
    .search-main[data-vue="carte"] .map-col { position: sticky; inset-block-start: calc(var(--header-total, 4.5rem) + 4.5rem); order: 2; }
    .search-main[data-vue="carte"] .results-col { order: 1; }
  }
  @media (max-width: 79.99em) {
    .search-main[data-vue="carte"] .map-col { order: -1; }
    .search-main[data-vue="carte"] .search-split { gap: var(--space-m); }
  }
  .results-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-l); padding-block-start: var(--space-m); border-block-start: 1px dashed var(--bordure-forte); }
  .results-note { font-size: var(--step--1); color: var(--encre-2); margin-block-start: var(--space-s); max-inline-size: 75ch; }
  .vide h2 { font-size: var(--step-2); }
  .vide__sugg { display: flex; flex-wrap: wrap; gap: .5rem; }
  .vide__sugg .btn { min-block-size: 2.5rem; }
  .carte__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; background: var(--chaux); border-block-end: 1px solid var(--bordure); }
  .carte__bar strong { font-size: var(--step--1); }
  .repere .icon { inline-size: .8rem; block-size: .8rem; fill: #fff; stroke: #fff; }
  .carte__apercu { position: absolute; z-index: 20; inline-size: 16.5rem; background: var(--chaux); border: 1px solid var(--bordure-forte); border-radius: var(--radius); box-shadow: var(--shadow-2); overflow: hidden; }
  .carte__apercu img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .carte__apercu-body { padding: .7rem .8rem .8rem; display: grid; gap: .3rem; }
  .carte__apercu .p { font-weight: 700; color: var(--rouille-fonce); margin: 0; }
  .carte__apercu h3 { font-family: var(--font-text); font-size: var(--step--1); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
  .carte__apercu .meta { margin: 0; font-size: .75rem; color: var(--encre-2); }
  .carte__apercu-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-start: .2rem; }
  .carte__apercu-close { position: absolute; inset-block-start: .4rem; inset-inline-start: .4rem; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: 50%; background: rgb(251 249 245 / .94); display: grid; place-items: center; }
  .carte__back { display: none; }
  .carte[data-vue="ville"] .carte__back { display: inline-flex; }
  .seg--tabs span { min-block-size: 2.75rem; padding-inline: 1.4rem; font-size: var(--step-0); }
  .repere__fav:empty { display: none; }
  .repere__fav { display: inline-flex; }
  @media (max-width: 63.99em) {
    .toolbar__spacer { display: none; }
  }
}
@layer pages {
  @media (max-width: 63.99em) {
    .search-layout > .filters { display: none; }
    .js .toolbar { position: static; }
  }
  @media (min-width: 48em) and (max-width: 63.99em) {
    .js .toolbar { position: sticky; }
  }
  .toolbar .devise { margin: 0; }
  .toolbar__count { white-space: nowrap; }
  .carte__stage .repere__fav .icon { inline-size: .75rem; block-size: .75rem; }
}
@layer utilities {
  @media (forced-colors: active) {
    .badge--offer { forced-color-adjust: none; background: Canvas; color: CanvasText; }
  }
}
/* l'aperçu d'un bien masque la mention du plan au lieu de la chevaucher */
@layer pages {
  .carte:has(.carte__apercu:not([hidden])) .carte__legal { visibility: hidden; }
}