/* WOURI ESTATE — cartes de biens et plans schématiques (accueil, recherche, fiche, sélection, quartiers).
   Direction artistique « Cadastre & calcaire » : calcaire, encre, olive, rouille. Gloock + Schibsted Grotesk. */
@layer components {
  .cartouche { position: relative; display: inline-block; padding: .2em .65em .2em 1.05em; font: 600 .75rem/1.35 var(--font-text); letter-spacing: .04em; color: var(--encre-2); background: var(--chaux); clip-path: polygon(.7rem 0, 100% 0, 100% 100%, 0 100%, 0 .7rem); box-shadow: inset 0 0 0 1px var(--bordure-forte); white-space: nowrap; }
  .cartouche::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: .7rem; block-size: .7rem; background: linear-gradient(to bottom right, transparent calc(50% - .6px), var(--bordure-forte) calc(50% - .6px), var(--bordure-forte) calc(50% + .6px), transparent calc(50% + .6px)); }
  /* ---------- Badges ---------- */
  .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 2px; font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .03em; white-space: nowrap; }
  .badge--achat { background: var(--encre); color: var(--calcaire); }
  .badge--location { background: var(--olive); color: var(--chaux); }
  .badge--new { background: var(--laterite-clair); color: var(--rouille-fonce); }
  .tf { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 2px; font-size: var(--step--1); font-weight: 600; line-height: 1.35; }
  .tf .icon { inline-size: 1rem; block-size: 1rem; }
  .tf--verifie { background: var(--olive-clair); color: var(--olive-fonce); }
  .tf--copro { box-shadow: inset 0 0 0 1.5px var(--olive); color: var(--olive); background: var(--chaux); }
  .tf--mandat { box-shadow: inset 0 0 0 1.5px var(--encre-2); color: var(--encre-2); background: var(--chaux); }
  .tf--encours { background: var(--ocre-fond); color: var(--ocre-texte); }
  .tf small { font-weight: 500; opacity: .9; }
  .table .best { display: inline-block; margin-inline-start: .4rem; padding: .05rem .4rem; border-radius: 2px; background: var(--olive-clair); color: var(--olive-fonce); font-size: .6875rem; font-weight: 700; white-space: nowrap; }
  /* ---------- Dialogues ---------- */
  dialog { color: var(--encre); background: var(--chaux); border: 1px solid var(--bordure-forte); border-radius: var(--radius); padding: 0; max-inline-size: min(40rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2rem); box-shadow: var(--shadow-2); overflow: auto; }
  dialog::backdrop { background: rgb(29 26 19 / .55); }
  .dlg { padding: var(--space-m); display: grid; gap: var(--space-s); }
  .dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-s); }
  .dlg__head h2 { font-size: var(--step-2); }
  .dlg__foot { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: flex-end; margin-block-start: var(--space-xs); }
  @media (prefers-reduced-motion: no-preference) {
    dialog[open] { animation: dlg-in var(--dur-3) var(--ease-out); }
    dialog[open]::backdrop { animation: fade-in var(--dur-3) var(--ease-out); }
  }
  /* ---------- Carte de bien (composant partagé) ---------- */
  .results { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); list-style: none; padding: 0; }
  .bien { container: bien / inline-size; position: relative; background: var(--chaux); border: 1px solid var(--bordure); border-radius: var(--radius); transition: box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
  .bien:hover, .bien.is-hover { box-shadow: var(--shadow-1); border-color: var(--bordure-forte); }
  .bien.is-hover { outline: 2px solid var(--rouille); outline-offset: 2px; }
  .bien.is-flash { animation: flash 1.2s var(--ease-out); }
  .bien__in { display: grid; align-content: start; block-size: 100%; }
  .bien__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--calcaire-2); border-radius: 3px 3px 0 0; }
  .bien__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-5) var(--ease-out); }
  .bien:hover .bien__media img { scale: 1.035; }
  .bien__badges { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; max-inline-size: calc(100% - 4rem); }
  .bien__fav { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; z-index: 3; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 0; border-radius: 50%; background: rgb(251 249 245 / .94); color: var(--encre); box-shadow: 0 1px 4px rgb(29 26 19 / .25); transition: scale var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
  .bien__fav:hover { background: #fff; }
  .bien__fav[aria-pressed="true"] { color: var(--rouille); }
  .bien__fav[aria-pressed="true"] .icon, [data-fav][aria-pressed="true"] .icon { fill: var(--rouille); stroke: var(--rouille); }
  .bien__body { display: grid; gap: .5rem; align-content: start; padding: var(--space-s); }
  .bien__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font-weight: 700; font-size: var(--step-1); line-height: 1.2; color: var(--rouille-fonce); margin: 0; }
  .bien__prix .alt { flex-basis: 100%; font-size: var(--step--1); font-weight: 500; color: var(--encre-2); }
  .bien__titre { font-size: var(--step-1); line-height: 1.2; }
  .bien__titre a { color: var(--encre); text-decoration: none; }
  .bien__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .bien__titre a:hover { color: var(--rouille-fonce); text-decoration: underline; text-decoration-thickness: 1px; }
  .bien__lieu { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0; font-size: var(--step--1); color: var(--encre-2); }
  .bien__carac { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--encre); }
  .bien__carac li { display: inline-flex; align-items: center; gap: .35rem; }
  .bien__carac .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--olive); }
  .bien__pied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem var(--space-s); border-block-start: 1px dashed var(--bordure); }
  .bien__cmp { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.5rem; padding: .25rem .7rem; border: 1px solid var(--bordure-forte); border-radius: var(--radius); background: transparent; font-size: var(--step--1); font-weight: 600; color: var(--encre); transition: background-color var(--dur-2) var(--ease-out); }
  .bien__cmp:hover { background: var(--calcaire-2); }
  .bien__cmp[aria-pressed="true"] { background: var(--encre); color: var(--calcaire); border-color: var(--encre); }
  .bien__pied .cartouche { background: transparent; }
  .bien[data-statut="sous-offre"] .bien__media img { filter: saturate(.7); }
  .vide { display: grid; gap: var(--space-s); justify-items: start; padding: var(--space-l); background: var(--chaux); border: 1px dashed var(--bordure-forte); border-radius: var(--radius); }
  .vide svg { inline-size: min(12rem, 60%); block-size: auto; color: var(--encre-2); }
  /* ---------- Carte schématique ---------- */
  .carte { position: relative; background: var(--calcaire); border: 1px solid var(--bordure-forte); border-radius: var(--radius); overflow: hidden; container: carte / inline-size; }
  .carte__stage { position: relative; aspect-ratio: 10 / 7; background: var(--calcaire); }
  .carte__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
  .carte__svg .terre { fill: var(--calcaire-2); stroke: var(--calcaire-2); stroke-width: 1.5; stroke-linejoin: round; transition: fill var(--dur-3) var(--ease-out); }
  .carte__svg .terre.is-actif { fill: var(--olive-clair); stroke: var(--olive); stroke-width: 2; }
  .carte__svg .eau { fill: var(--eau); }
  .carte__svg .eau-2 { fill: var(--eau-2); opacity: .5; }
  .carte__svg .route { fill: none; stroke: #D8CFBE; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
  .carte__svg .route--fine { stroke-width: 5; }
  .carte__svg .route-trait { fill: none; stroke: var(--bordure-forte); stroke-width: 1.2; stroke-dasharray: 5 6; stroke-linecap: round; }
  .carte__svg .pont { fill: none; stroke: var(--encre-2); stroke-width: 3; stroke-linecap: round; }
  .carte__reperes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  .carte__reperes li { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); translate: -50% calc(-100% - 6px); }
  .repere { position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: .28rem .55rem; border: 0; border-radius: 4px; background: var(--rouille); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 1px 3px rgb(29 26 19 / .35); transition: scale var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  .repere::before { content: ""; position: absolute; inset: -10px -6px; }
  .repere::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 100%; translate: -50% -1px; border: 6px solid transparent; border-block-start-color: var(--rouille); border-block-end: 0; transition: border-color var(--dur-2); }
  .repere:hover { background: var(--rouille-fonce); }
  .repere:hover::after { border-block-start-color: var(--rouille-fonce); }
  .repere.is-active { background: var(--encre); scale: 1.12; z-index: 5; }
  .repere.is-active::after { border-block-start-color: var(--encre); }
  .repere.is-hover { box-shadow: 0 0 0 2px var(--calcaire), 0 6px 16px rgb(29 26 19 / .45); scale: 1.08; z-index: 4; }
  .repere.is-offer { background: var(--olive-fonce); }
  .repere.is-offer::after { border-block-start-color: var(--olive-fonce); }
  .carte__reperes li:has(.is-active) { z-index: 6; }
  @media (prefers-reduced-motion: no-preference) {
    .repere.is-new { animation: poser var(--dur-2) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
  }
  .bulle { position: relative; display: grid; gap: .1rem; justify-items: center; text-align: center; padding: .5rem .8rem; border: 1.5px solid var(--encre); border-radius: var(--radius); background: var(--chaux); color: var(--encre); font-size: .8125rem; line-height: 1.25; box-shadow: var(--shadow-1); transition: background-color var(--dur-2), color var(--dur-2), scale var(--dur-2) var(--ease-out); text-decoration: none; }
  .bulle b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
  .bulle:hover { background: var(--encre); color: var(--calcaire); scale: 1.05; }
  .bulle[aria-disabled="true"] { opacity: .65; }
  .carte__legal { position: absolute; inset-inline-end: .5rem; inset-block-end: .35rem; margin: 0; font-size: .6875rem; font-weight: 600; color: var(--gris); background: color-mix(in srgb, var(--calcaire) 85%, transparent); padding: .1rem .4rem; border-radius: 2px; pointer-events: none; max-inline-size: 70%; text-align: end; line-height: 1.3; }
  @media (prefers-reduced-motion: no-preference) {
    .carte__stage { view-transition-name: carte; }
  }
  .mini-carte { position: relative; max-inline-size: 36rem; border: 1px dashed var(--bordure-forte); padding: 6px; background: var(--calcaire); }
  .mini-carte .carte__stage { aspect-ratio: 10 / 7; }
  .carte__svg .terre--pays { fill: var(--calcaire-2); stroke: none; }
  .carte__svg .terre--vert { fill: color-mix(in srgb, var(--olive-clair) 75%, var(--calcaire-2)); }
}
@layer pages {
  /* Quartiers, agence, contact, légal */
  .quartier { display: grid; gap: var(--space-m); padding-block: var(--space-l); border-block-start: 1px solid var(--bordure-forte); }
  @media (min-width: 64em) {
    .quartier { grid-template-columns: 5fr 7fr; gap: var(--space-xl); }
  }
  .quartier h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
  .quartier h2 small { font-family: var(--font-text); font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--olive); }
  .quartier dl { display: grid; gap: var(--space-s); margin: 0; }
  .quartier dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--olive); margin-block-end: .15rem; }
  .quartier dd { margin: 0; max-inline-size: 60ch; }
  .quartier .vigil { padding: .7rem .9rem; background: var(--ocre-fond); color: var(--ocre-texte); border-radius: var(--radius); }
}
@layer components {
  /* plan schématique : étiquettes en HTML (lisibles à toutes les tailles), formes en SVG */
  .carte__svg .terre { fill: var(--calcaire-2); stroke: none; }
  .carte__svg .terre.is-actif { fill: var(--olive-clair); }
  .carte__svg .riviere { fill: none; stroke: var(--eau); stroke-width: 9; stroke-linecap: round; }
  .carte__svg .riviere--l { stroke-width: 12; }
  .carte__svg .dot { fill: var(--encre); stroke: var(--calcaire); stroke-width: 2; }
  .carte__svg .dot--ville { fill: var(--rouille); stroke-width: 3; }
  .carte__svg .picto { fill: var(--encre-2); }
  .carte__svg .terre--pays { fill: var(--calcaire-2); }
  .carte__labels { position: absolute; inset: 0; pointer-events: none; }
  .lbl { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); translate: -50% -50%; rotate: var(--r, 0deg); font: 600 .6875rem/1.1 var(--font-text); color: var(--encre-2); white-space: nowrap; text-shadow: 0 0 2px var(--calcaire-2), 0 0 2px var(--calcaire-2), 0 0 4px var(--calcaire-2); }
  .lbl.is-actif, .lbl--on { color: var(--olive-fonce); }
  .lbl--eau { text-transform: uppercase; letter-spacing: .14em; font-size: .625rem; color: var(--encre-2); text-shadow: none; }
  .lbl--note, .lbl--pont { font-weight: 500; font-size: .625rem; color: var(--encre-2); text-shadow: 0 0 3px var(--calcaire-2), 0 0 3px var(--calcaire-2); }
  .carte__reperes li:has(> .bulle) { translate: -50% -50%; }
  .results.is-vt .bien { view-transition-name: var(--vt); }
}
@layer pages {
  @media (min-width: 64em) {
    .u-end-md { text-align: end; }
  }
  /* quartiers */
  .quartier__map .mini-carte { max-inline-size: none; }
  .quartier__body .guide-count { margin-block: var(--space-s) .4rem; }
  .table--mini { font-size: var(--step--1); }
  .table--mini th, .table--mini td { padding: .45rem .1rem; background: none; }
  .table--mini th { width: 9rem; font-weight: 700; color: var(--encre-2); }
  .quartier .vigil { font-weight: 500; }
  /* sélection / comparateur / alertes */
  .sel-layout { display: grid; gap: var(--space-xl); padding-block: var(--space-m) var(--space-2xl); }
  .sel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-s); margin-block-end: var(--space-xs); }
  .sel-head h2 { font-size: var(--step-3); }
  .sel-sec { scroll-margin-block-start: 8rem; }
  .table--cmp { min-inline-size: 44rem; }
  .table--cmp thead th, .table--cmp thead td { vertical-align: top; background: var(--chaux); border-block-start: 0; }
  .table--cmp thead th { min-inline-size: 13rem; white-space: normal; }
  .cmp-head { display: grid; gap: .4rem; justify-items: start; max-inline-size: 15rem; }
  .table--cmp thead img { inline-size: 100%; max-inline-size: 15rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
  .table--cmp thead a { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; color: var(--encre); text-decoration: none; }
  .table--cmp tbody th { position: sticky; inset-inline-start: 0; background: var(--chaux); z-index: 1; min-inline-size: 9.5rem; max-inline-size: 11rem; box-shadow: 1px 0 0 var(--bordure); }
  .table--cmp td { min-inline-size: 11rem; }
  .table--cmp td.num { text-align: start; }
  .table--cmp .tf { white-space: normal; }
}
@layer utilities {
  @media (forced-colors: active) {
    .repere.is-active { outline: 3px solid Highlight; }
  }
}