:root{
  /* Crème officielle RE/MAX (guide sept. 2025, p. 8) — remplace le #F7F2EA maison. */
  --cream:#F7F5EE;
  --vellum:#FBF8F2;
  --hairline:#E8E2D7;
  --ink:#1A1B1D;
  --stone:#6F6F73;
  --mist:#A6A6A8;
  --teal:#2c4160;
  --navy:#13202E;
  --sand:#CDB89A;
  --bronze:#B58A4F;
  /* Aliases pour les pages de contenu (vendre / acheter / guides) */
  --ink-2:var(--stone);
  --blue:var(--teal);
  --blue-2:var(--sand);
  --blue-soft:#EFE9DF;
  --line:var(--hairline);
  --muted:var(--mist);
  --surface:var(--vellum);
  --ease:var(--ease-out);
  --ease-spring:var(--ease-back);
  --shadow:var(--shadow-card);
  --shadow-sm:
    0 1px 2px oklch(30% 0.05 258 / 0.05),
    0 4px 12px oklch(30% 0.05 258 / 0.07);
  --radius:14px;
  --radius-lg:22px;
  --shadow-card:
    0 1px 2px oklch(30% 0.05 258 / 0.06),
    0 8px 24px oklch(30% 0.05 258 / 0.08),
    0 24px 60px oklch(30% 0.05 258 / 0.05);
  --shadow-card-hover:
    0 1px 2px oklch(30% 0.05 258 / 0.08),
    0 12px 32px oklch(30% 0.05 258 / 0.10),
    0 32px 80px oklch(62% 0.08 70 / 0.06);
  --shadow-header:
    0 1px 0 oklch(90% 0.006 80 / 0.8),
    0 10px 30px oklch(30% 0.05 258 / 0.04);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --space-1: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-2: clamp(0.5rem, 1vw, 0.75rem);
  --space-3: clamp(0.75rem, 1.5vw, 1rem);
  --space-4: clamp(1rem, 2vw, 1.5rem);
  --space-6: clamp(1.5rem, 3vw, 2.5rem);
  --space-8: clamp(2rem, 4vw, 3.5rem);
  --space-12: clamp(3rem, 6vw, 5rem);
  --space-16: clamp(4rem, 8vw, 7rem);
  --gap: var(--space-6);
  --text-xs: 0.75rem;
  --text-sm: clamp(0.85rem, 0.95vw, 0.9rem);
  --text-base: clamp(1rem, 1.05vw, 1.0625rem);
  --text-lg: clamp(1.1rem, 1.3vw, 1.25rem);
  --text-h3: clamp(1.375rem, 2vw, 1.75rem);
  --text-h2: clamp(2rem, 3.5vw, 3.25rem);
  --text-h1: clamp(3rem, 6vw, 5.5rem);
  --text-display: clamp(2.5rem, 5vw, 4.5rem);
  --container: min(1400px, 92vw);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@supports (color: oklch(0% 0 0)){
  :root{
    --cream: oklch(96% 0.012 80);
    --vellum: oklch(98% 0.008 80);
    --hairline: oklch(90% 0.006 80);
    --ink: oklch(20% 0.005 250);
    --stone: oklch(48% 0.008 250);
    --mist: oklch(68% 0.006 250);
    --teal: oklch(37.3% 0.06 258);
    --navy: oklch(22% 0.04 240);
    --sand: oklch(78% 0.04 75);
    --bronze: oklch(62% 0.08 70);
  }
}

*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ -webkit-text-size-adjust: 100%; }
/* Smooth anchor scrolling only when Lenis isn't running (no-JS fallback) —
   native scroll-behavior:smooth fights Lenis and makes scrolling hang */
html:not(.js){ scroll-behavior: smooth; }
body{
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  min-block-size: 100dvh;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before{
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
  mix-blend-mode: multiply;
}
img{ max-inline-size: 100%; display: block; }
a{ color: inherit; text-decoration: none; transition: color 240ms var(--ease-out); }
ul{ list-style: none; }
button{ font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
:focus-visible{ outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 2px; }

.skip-link{
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--ink); color: var(--cream);
  padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus{ inset-inline-start: 1rem; top: 1rem; }

/* Typography — Montserrat, la hiérarchie se joue au poids
   800 titres · 700 sous-titres · 600 étiquettes · 500 accents · 400 texte */
h1, h2, h3, h4{
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
  text-wrap: balance;
}
h1{ font-size: var(--text-h1); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
h2{ font-size: var(--text-h2); line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; }
h3{ font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
h4{ font-weight: 600; letter-spacing: -0.01em; }
/* Les titres tiennent sur un seul poids : le em ne sert plus qu'à marquer
   une ligne, sans changer ni la graisse ni la couleur. */
h1 em, h2 em{ font-style: normal; font-weight: inherit; color: inherit; }
p{ max-inline-size: 65ch; text-wrap: pretty; }
strong{ font-weight: 600; }
.eyebrow{
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--sand);
}
@media (min-width: 768px){ .eyebrow{ font-size: 13px; } }

/* Poids par rôle — ce que la serif portait par sa forme, Montserrat le porte par son poids.
   Chiffres et prix en 700, noms et titres de bloc en 600, libellés de nav en 600. */
.prop-card__price, .pcard .price, .stat .n, .city-stat__n,
.city-card__name, .hm-city__name, .guide-card__num,
.wordmark--footer .wordmark__name{ font-weight: 700; }
.wordmark--footer .wordmark__name{ font-weight: 800; letter-spacing: 0.02em; }
.team-bio__slash{ font-weight: 800; }
.mega__title, .mega__feature-title, .drawer__nav a, .drawer-group > summary,
.prop-card__addr, .pcard .addr, .broker-card__name, .site-footer__name,
.hm-marquee__track span, .hm-city__idx{ font-weight: 600; }
.prop-info__crumbs, .hm-index, .hm-hero__bar-meta, .hero__corner{ font-weight: 500; }
/* Chiffres alignés partout — obligatoire dès qu'une colonne de nombres se compare */
.prop-card__price, .pcard .price, .stat .n, .city-stat__n, .numbers__metric,
.prop-metric__n, .prop-price-band__val, .calc-out .k{ font-variant-numeric: tabular-nums; }

.container{ max-inline-size: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.band-vellum{ background: var(--vellum); }

/* Buttons */
.btn-primary, .btn-navy, .btn-ghost, .btn-cream{
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background-color 280ms var(--ease-out), color 280ms var(--ease-out), border-color 280ms var(--ease-out);
  min-block-size: 44px;
  white-space: nowrap;
}
.btn-primary{ background: var(--teal); color: var(--cream); }
.btn-primary:hover{ transform: scale(1.02); color: var(--cream); box-shadow: 0 6px 20px oklch(30% 0.05 258 / 0.18); }
.btn-primary:active{ transform: scale(0.98) translateY(1px); }
.btn-navy{ background: var(--navy); color: var(--cream); }
.btn-navy:hover{ transform: scale(1.02); color: var(--cream); box-shadow: 0 6px 20px oklch(22% 0.04 240 / 0.25); }
.btn-navy:active{ transform: scale(0.98) translateY(1px); }
.btn-ghost{ border: 1px solid oklch(20% 0.005 250 / 0.35); color: var(--ink); background: transparent; }
.btn-ghost:hover{ background: var(--vellum); border-color: oklch(20% 0.005 250 / 0.65); color: var(--ink); }
.btn-cream{ background: var(--cream); color: var(--ink); }
.btn-cream:hover{ transform: scale(1.02); color: var(--ink); box-shadow: 0 6px 20px oklch(20% 0.005 250 / 0.20); }
.btn-ghost--on-teal{ border-color: oklch(96% 0.012 80 / 0.5); color: var(--cream); }
.btn-ghost--on-teal:hover{ background: oklch(96% 0.012 80 / 0.1); border-color: var(--cream); color: var(--cream); }

/* Header */
:root{ --hdr-h: 5.5rem; }
.site-header{
  position: sticky; top: 0; z-index: 50;
  --hdr-bg: oklch(96% 0.012 80 / 0.82);
  --hdr-fg: var(--ink);
  --hdr-fg-soft: var(--stone);
  --hdr-border: var(--hairline);
  --hdr-blur: blur(12px) saturate(1.1);
  background: var(--hdr-bg);
  backdrop-filter: var(--hdr-blur);
  -webkit-backdrop-filter: var(--hdr-blur);
  border-block-end: 1px solid var(--hdr-border);
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.site-header.scrolled{
  --hdr-bg: oklch(96% 0.012 80 / 0.95);
  box-shadow: var(--shadow-header);
}

/* Overlay mode — header floats transparently over a dark hero, text in cream */
body.header-overlay .site-header{
  position: fixed; inset-inline: 0; top: 0;
  --hdr-bg: transparent;
  --hdr-fg: var(--cream);
  --hdr-fg-soft: oklch(96% 0.012 80 / 0.72);
  --hdr-border: transparent;
  --hdr-blur: none;
  box-shadow: none;
}
/* Soft scrim keeps cream text legible over bright video frames */
body.header-overlay .site-header::before{
  content: ""; position: absolute; inset-inline: 0; top: 0;
  block-size: 200%;
  background: linear-gradient(180deg, oklch(20% 0.005 250 / 0.42) 0%, oklch(20% 0.005 250 / 0) 100%);
  pointer-events: none; z-index: -1;
  opacity: 1; transition: opacity 320ms var(--ease-out);
}
body.header-overlay .site-header.scrolled::before,
body.header-overlay .site-header:has(.has-mega:hover)::before,
body.header-overlay .site-header:has(.has-mega:focus-within)::before{ opacity: 0; }
body.header-overlay .site-header:not(.scrolled) .wordmark__name,
body.header-overlay .site-header:not(.scrolled) .nav-item{ text-shadow: 0 1px 14px oklch(20% 0.005 250 / 0.35); }
body.header-overlay .site-header:has(.has-mega:hover) .wordmark__name,
body.header-overlay .site-header:has(.has-mega:hover) .nav-item{ text-shadow: none; }
/* …turns solid once scrolled or while a mega panel is open */
body.header-overlay .site-header.scrolled,
body.header-overlay .site-header:has(.has-mega:hover),
body.header-overlay .site-header:has(.has-mega:focus-within){
  --hdr-bg: oklch(96% 0.012 80 / 0.95);
  --hdr-fg: var(--ink);
  --hdr-fg-soft: var(--stone);
  --hdr-border: var(--hairline);
  --hdr-blur: blur(12px) saturate(1.1);
  box-shadow: var(--shadow-header);
}
.site-header__inner{
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
/* Logo de l'équipe + lockup RE/MAX côte à côte, au-dessus de la ligne des 400 px.
   Le guide (p. 4) exige un espace libre d'au moins la moitié de la hauteur du
   « X » de RE/MAX sur les quatre côtés : c'est le rôle du gap et du padding
   vertical de .site-header__inner. Aucune boîte ni cadre autour du logo. */
.site-header__brands{ display: inline-flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
.site-header__remax{
  block-size: clamp(24px, 2.5vw, 31px);
  inline-size: auto;
  display: block;
  flex-shrink: 0;
}
.wordmark{ display: inline-flex; align-items: center; line-height: 0; }
/* Sized by WIDTH — both logo files are 700px wide, so the J/R glyph renders
   at the same scale; the white version's extra vertical padding just centers. */
.wordmark__logo{ inline-size: clamp(46px, 4vw, 56px); block-size: auto; display: block; }
.wordmark__logo--light{ display: none; }
.wordmark__logo--dark{ display: block; }
/* Overlay (transparent) header → white logo */
body.header-overlay .wordmark__logo--light{ display: block; }
body.header-overlay .wordmark__logo--dark{ display: none; }
/* Overlay header turned solid (scrolled / mega open) → dark logo */
body.header-overlay .site-header.scrolled .wordmark__logo--light,
body.header-overlay .site-header:has(.has-mega:hover) .wordmark__logo--light,
body.header-overlay .site-header:has(.has-mega:focus-within) .wordmark__logo--light{ display: none; }
body.header-overlay .site-header.scrolled .wordmark__logo--dark,
body.header-overlay .site-header:has(.has-mega:hover) .wordmark__logo--dark,
body.header-overlay .site-header:has(.has-mega:focus-within) .wordmark__logo--dark{ display: block; }
.site-nav{ display: flex; justify-content: center; gap: 0.25rem; flex-wrap: wrap; }
.nav-item{
  position: relative;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: var(--hdr-fg, var(--ink));
  border-radius: 999px;
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.nav-item:hover, .nav-item:focus-visible,
.has-mega:hover > a, .has-sub:hover > a{ background: color-mix(in oklch, var(--hdr-fg, var(--ink)) 10%, transparent); color: var(--hdr-fg, var(--ink)); }
.nav-item .caret{ font-size: 0.8em; color: var(--hdr-fg-soft, var(--stone)); transition: transform 240ms var(--ease-out); }
.has-mega:hover > a .caret{ transform: rotate(180deg); }
/* Soulignement qui se déploie depuis la gauche — injecté par site.js */
.nav-underline{
  position: absolute;
  inset-inline: 0.85rem; inset-block-end: 0.3rem;
  block-size: 1.5px; border-radius: 2px;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
.nav-item:hover .nav-underline,
.nav-item:focus-visible .nav-underline,
.has-mega:hover > a .nav-underline,
.has-sub:hover > a .nav-underline{ transform: scaleX(1); }
.is-active > a .nav-underline, a.nav-item.is-active .nav-underline{ display: none; }
@media (prefers-reduced-motion: reduce){ .nav-underline{ transition: none; } }
/* Page active dans le menu */
.is-active > a, a.nav-item.is-active{ color: var(--hdr-fg, var(--ink)); font-weight: 500; }
.is-active > a::before, a.nav-item.is-active::before{
  content: ""; position: absolute;
  inset-inline: 0.85rem; inset-block-end: 0.28rem;
  block-size: 2px; border-radius: 2px;
  background: var(--bronze);
}
.has-sub{ position: relative; }
.has-sub > a{ padding-inline-end: 0.6rem; }
.sub{
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-block-start: 8px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.5rem;
  min-inline-size: 240px;
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms;
  z-index: 10;
}
.has-sub:hover > .sub, .has-sub:focus-within > .sub{ opacity: 1; visibility: visible; transform: translateY(0); }
.sub a{
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink);
}
.sub a:hover{ background: var(--vellum); color: var(--teal); }

/* Mega menu — full-width panel anchored under the header */
.has-mega{ position: static; }
/* Invisible bridge across the header's bottom padding so the panel stays
   open while the cursor travels from the trigger down to the panel. */
.has-mega > a{ position: relative; }
.has-mega > a::after{
  content: "";
  position: absolute;
  inset-inline: -0.75rem;
  top: 100%;
  block-size: 2rem;
}
.mega{
  position: absolute;
  top: 100%; inset-inline: 0;
  background: var(--cream);
  border-block-start: 1px solid var(--hairline);
  border-block-end: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 260ms;
  z-index: 5;
}
.has-mega:hover > .mega, .has-mega:focus-within > .mega{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mega__inner{
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1rem, 4vw, 2rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* Chaque menu suit la même composition : les colonnes de liens à gauche, une
   carte mise en avant à droite. C'est ce qui manquait à « Acheter », dont la
   colonne unique flottait dans une grille de deux, d'où le grand vide. */
.mega__inner--feature{ grid-template-columns: minmax(0, 1fr) minmax(270px, 350px); align-items: stretch; }
.mega__inner:not(.mega__inner--feature){ grid-template-columns: minmax(0, 1fr); }
/* auto-fit : une seule colonne occupe sa largeur, elle ne se fait pas étirer
   sur une grille figée à deux. */
.mega__cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-content: start;
}
.mega__col{ display: grid; gap: 0.1rem; align-content: start; }
.mega__title{
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--stone);
  padding-block-end: 0.7rem;
  margin-block-end: 0.7rem;
  border-block-end: 1px solid var(--hairline);
}
.mega__col a{
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.52rem 0.7rem;
  margin-inline: -0.7rem;
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--ink);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
/* Un trait court se déploie au survol : le déplacement du texte se voyait
   plus qu'il ne guidait. */
.mega__col a::before{
  content: "";
  flex: none;
  inline-size: 0; block-size: 1.5px;
  border-radius: 2px;
  background: var(--bronze);
  transition: inline-size 240ms var(--ease-out);
}
.mega__col a:hover{ background: var(--vellum); color: var(--teal); }
.mega__col a:hover::before{ inline-size: 14px; }
.mega__col a:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 2px; }
.mega__feature{
  display: grid; align-content: center; gap: 0.4rem;
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  border-radius: 16px;
  background: linear-gradient(155deg, var(--teal) 0%, oklch(29% 0.055 258) 100%);
  color: var(--cream);
  position: relative; overflow: hidden;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.mega__feature:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; }
.mega__feature::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 85% 0%, oklch(96% 0.012 80 / 0.12), transparent 60%);
  pointer-events: none;
}
.mega__feature:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); }
.mega__feature > *{ position: relative; z-index: 1; }
.mega__feature-eyebrow{
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.66rem; color: var(--sand);
}
.mega__feature-title{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.2rem; font-weight: 700; line-height: 1.22;
  letter-spacing: -0.015em;
  margin-block-start: 0.15rem;
}
.mega__feature-text{ font-size: 0.88rem; opacity: 0.82; line-height: 1.55; }
/* La flèche avance au survol : c'est le seul mouvement de la carte. */
.mega__feature-cta{
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-block-start: 0.7rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--sand);
}
.mega__feature-cta::after{
  content: "\2192";
  transition: transform 260ms var(--ease-out);
}
.mega__feature:hover .mega__feature-cta::after{ transform: translateX(5px); }

.site-header__cta{ justify-self: end; }
.site-header__burger{
  display: none;
  inline-size: 44px; block-size: 44px;
  border-radius: 999px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.site-header__burger span{
  display: block; inline-size: 22px; block-size: 1.5px;
  background: var(--hdr-fg, var(--ink));
  transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out), background-color 320ms var(--ease-out);
}
@media (max-width: 900px){
  .site-nav, .site-header__cta{ display: none; }
  .site-header__burger{ display: inline-flex; justify-self: end; }
  .site-header__inner{ grid-template-columns: auto 1fr; }
}

/* Drawer */
.drawer{
  position: fixed; inset: 0;
  background: oklch(20% 0.005 250 / 0);
  visibility: hidden; pointer-events: none;
  transition: background-color 320ms var(--ease-out), visibility 320ms;
  z-index: 60;
}
.drawer.open{ background: oklch(20% 0.005 250 / 0.35); visibility: visible; pointer-events: auto; }
.drawer__panel{
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: min(420px, 88vw);
  background: var(--vellum);
  padding: 5rem 2rem 2rem;
  transform: translateX(100%);
  transition: transform 360ms var(--ease-out);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer.open .drawer__panel{ transform: translateX(0); }
.drawer__close{
  position: absolute; top: 1rem; inset-inline-end: 1rem;
  inline-size: 44px; block-size: 44px; border-radius: 999px;
  font-size: 1.8rem; color: var(--ink);
  display: grid; place-items: center;
}
.drawer__close:hover{ background: var(--cream); }
.drawer__nav{ display: flex; flex-direction: column; gap: 0.25rem; }
.drawer__nav a, .drawer-group > summary{
  display: block;
  padding: 0.9rem 0.75rem;
  border-block-end: 1px solid var(--hairline);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.1rem;
  color: var(--ink);
}
.drawer-group{ border-block-end: 1px solid var(--hairline); }
.drawer-group > summary{ border-block-end: 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.drawer-group > summary::after{ content: "+"; color: var(--stone); }
.drawer-group[open] > summary::after{ content: "−"; }
.drawer-group a{ padding-inline-start: 1.5rem; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; color: var(--stone); border-block-end: 0; }
.drawer__cta{ margin-block-start: 1.5rem; justify-content: center; }

/* Hero */
.hero{
  position: relative;
  min-block-size: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  background: var(--ink);
}
.hero__video, .hero__poster{
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 15% 85%, oklch(20% 0.005 250 / 0.75) 0%, oklch(20% 0.005 250 / 0) 70%),
    linear-gradient(180deg, oklch(20% 0.005 250 / 0.05) 0%, oklch(20% 0.005 250 / 0.55) 100%);
  z-index: -1;
  pointer-events: none;
}
.hero__h1, .hero__sub, .hero__eyebrow{
  text-shadow: 0 1px 24px oklch(20% 0.005 250 / 0.45);
}
.hero__inner{
  align-self: end;
  padding: clamp(2rem, 8vh, 6rem) clamp(1.5rem, 8vw, 5rem);
  display: grid;
  gap: var(--space-4);
  max-inline-size: 1100px;
  color: var(--cream);
}
.hero__eyebrow{ color: var(--sand); }
.hero__h1{
  color: var(--cream);
  font-size: var(--text-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  max-inline-size: 18ch;
}
.hero__h1 .word{ display: inline-block; }
.inline-img-square, .inline-img-strip{
  display: inline-block;
  vertical-align: -0.15em;
  border-radius: 6px;
  object-fit: cover;
  margin-inline: 0.3em;
}
.inline-img-square{ aspect-ratio: 1 / 1; block-size: 0.85em; inline-size: 0.85em; }
.inline-img-strip{ aspect-ratio: 4 / 1; block-size: 0.7em; inline-size: 2.8em; }
@media (max-width: 768px){
  .inline-img-square, .inline-img-strip{ vertical-align: middle; block-size: 1.2em; }
  .inline-img-strip{ inline-size: 3.6em; }
}
.hero__sub{
  font-family: 'Montserrat', sans-serif;
  color: var(--cream);
  opacity: 0.85;
  font-size: var(--text-lg);
}
.hero__cta{ margin-block-start: var(--space-2); align-self: start; }
.hero__corner{
  position: absolute;
  inset-block-end: clamp(1.5rem, 4vh, 3rem);
  inset-inline-end: clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  color: oklch(96% 0.012 80 / 0.6);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.hero__corner::before{
  content: ""; display: block;
  inline-size: 1px; block-size: 24px;
  background: oklch(96% 0.012 80 / 0.5);
}

/* By the numbers strip */
.numbers{
  padding-block: var(--space-16);
  background: var(--cream);
}
.numbers__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.numbers__cell:nth-child(4){ margin-block-start: 24px; }
.numbers__metric{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: var(--text-display);
  font-weight: 700;
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-block-start: var(--space-2);
}
.numbers__label{
  color: var(--stone);
  font-size: var(--text-sm);
  margin-block-start: var(--space-2);
  max-inline-size: 22ch;
}
@media (max-width: 768px){ .numbers__grid{ grid-template-columns: 1fr 1fr; } .numbers__cell:nth-child(4){ margin-block-start: 0; } }

/* Section heading */
.section{ padding-block: var(--space-16); }
.section__head{
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--space-6); margin-block-end: var(--space-8);
  flex-wrap: wrap;
}
.section__head h2{ max-inline-size: 22ch; }
.section__head .eyebrow{ margin-block-end: var(--space-2); display: block; }

/* Property carousel */
.carousel{ position: relative; }
.carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 28%);
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block-end: var(--space-4);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar{ display: none; }
.carousel__track > *{ scroll-snap-align: start; }
@media (max-width: 900px){ .carousel__track{ grid-auto-columns: minmax(260px, 80%); } }
.carousel__controls{
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-block-start: var(--space-4);
}
.carousel__btn{
  inline-size: 44px; block-size: 44px;
  border-radius: 999px;
  border: 1px solid oklch(20% 0.005 250 / 0.35);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.carousel__btn:hover{ background: var(--vellum); border-color: oklch(20% 0.005 250 / 0.65); transform: scale(1.04); }
.carousel__dots{
  display: flex; gap: 6px; justify-content: center; margin-block-start: var(--space-3);
}
.carousel__dot{
  inline-size: 6px; block-size: 6px; border-radius: 999px;
  background: var(--sand); opacity: 0.4;
}
.carousel__dot.active{ opacity: 1; inline-size: 18px; transition: inline-size 240ms var(--ease-out); }

/* Property card — la photo occupe toute la carte, l'information vit dessus
   sur un dégradé bleu qui monte du bas. La photo reste intacte : le dégradé
   s'arrête aux deux tiers, il n'y a aucun voile sur le sujet. */
/* Le filtre pose l'attribut [hidden] sur les cartes. Sans cette règle, le
   display:flex ci-dessous l'emporte sur le display:none du navigateur et
   rien ne se cache : c'est pourquoi les filtres semblaient morts. */
.prop-card[hidden]{ display: none; }
.prop-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-card);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  color: var(--cream);
  isolation: isolate;
  display: flex; flex-direction: column;
}
.prop-card > a{ display: block; flex: 1; min-block-size: 0; color: inherit; }
.prop-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card-hover); color: var(--cream); }
/* aspect-ratio donne la hauteur naturelle ; block-size:100% laisse la carte
   s'étirer à la rangée quand la grille impose une hauteur commune */
.prop-card__media{
  position: relative;
  aspect-ratio: 4 / 5;
  block-size: 100%;
  overflow: hidden;
  background: var(--navy);
}
@media (min-width: 900px){ .prop-card__media{ aspect-ratio: 3 / 4; } }
.prop-card__media img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.prop-card:hover .prop-card__media img{ transform: scale(1.06); }
/* Le dégradé bleu — transparent en haut, marine en bas */
.prop-card__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    oklch(22% 0.04 240 / 0.94) 0%,
    oklch(28% 0.055 248 / 0.72) 26%,
    oklch(37.3% 0.06 258 / 0.30) 52%,
    transparent 78%
  );
  pointer-events: none;
  transition: opacity 420ms var(--ease-out);
}
.prop-card:hover .prop-card__media::after{ opacity: 0.88; }
.prop-card__badge{
  position: absolute; top: 14px; inset-inline-start: 14px;
  background: var(--sand);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 3;
}
/* Bloc d'information posé sur la photo */
.prop-card__body{
  position: absolute; inset-inline: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-4) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.prop-card__price{
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
  line-height: 1.1;
}
.prop-card__addr{
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cream);
}
.prop-card__city{
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--sand);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.prop-card__meta{
  display: flex; gap: 0;
  color: oklch(96% 0.012 80 / 0.82);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-block-start: 0.7rem;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid oklch(96% 0.012 80 / 0.22);
  font-variant-numeric: tabular-nums;
}
.prop-card__meta span{ display: inline-flex; align-items: center; gap: 0.35rem; padding-inline: 0.8rem; }
.prop-card__meta span:first-child{ padding-inline-start: 0; }
.prop-card__meta span + span{ border-inline-start: 1px solid oklch(96% 0.012 80 / 0.22); }

/* Team editorial split 7:5 */
.team{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: center;
}
.team__media{ aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--hairline); }
.team__media img{ inline-size: 100%; block-size: 100%; object-fit: cover; }
.team__body{ display: flex; flex-direction: column; gap: var(--space-4); }
.team__body p{ color: var(--stone); }
@media (max-width: 900px){ .team{ grid-template-columns: 1fr; gap: var(--space-6); } }

/* Cities grid */
.cities-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 900px){ .cities-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .cities-grid{ grid-template-columns: 1fr; } }
.city-card{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--vellum);
  box-shadow: var(--shadow-card);
  display: block;
  color: var(--cream);
}
.city-card img{
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.city-card::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(20% 0.005 250 / 0) 40%, oklch(20% 0.005 250 / 0.65) 100%);
}
.city-card__overlay{
  position: absolute; inset: 0;
  background: oklch(30% 0.05 258 / 0);
  transition: background-color 320ms var(--ease-out);
  z-index: 1;
}
.city-card:hover img{ transform: scale(1.04); }
.city-card:hover .city-card__overlay{ background: oklch(30% 0.05 258 / 0.15); }
.city-card__body{
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-4);
  z-index: 2;
  color: var(--cream);
}
.city-card__name{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.5rem;
  color: var(--cream);
  margin-block-end: 4px;
}
.city-card__stat{ font-size: var(--text-sm); color: oklch(96% 0.012 80 / 0.8); }
.city-card--teaser{
  background: var(--teal);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: var(--space-6);
  color: var(--cream);
}
.city-card--teaser::after{ display: none; }
.city-card--teaser .eyebrow{ color: var(--sand); }
.city-card--teaser h3{ color: var(--cream); margin-block: var(--space-2); }

/* CTA band */
.cta-band{
  background: var(--teal);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem,4vw,3.5rem) clamp(1.75rem,4vw,3.5rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem,3vw,2.5rem);
  box-shadow: 0 1px 2px oklch(22% 0.04 258 / 0.10), 0 18px 50px oklch(22% 0.04 258 / 0.20);
}
.cta-band > *{ position: relative; z-index: 1; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(620px 320px at 88% -10%, oklch(96% 0.012 80 / 0.10), transparent 60%); pointer-events:none; }
.cta-band h2{ color: var(--cream); max-inline-size: 20ch; margin: 0; }
.cta-band .btn{
  background: var(--cream); color: var(--ink);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 0.95rem 1.6rem; border-radius: 999px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 6px 20px oklch(20% 0.005 250 / 0.18);
  transition: transform .3s var(--ease-out);
}
.cta-band .btn:hover{ transform: translateY(-2px); color: var(--ink); }
.cta-band__inner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.25rem,3vw,2.5rem); inline-size: 100%;
}
.cta-band__actions{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 640px){ .cta-band{ flex-direction: column; align-items: flex-start; } .cta-band .btn{ inline-size: 100%; justify-content: center; } }

/* Footer */
.site-footer{
  background: var(--teal);
  color: var(--cream);
  padding-block: var(--space-12) var(--space-6);
  margin-block-start: var(--space-16);
}
.site-footer__grid{
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: var(--space-8);
}
.site-footer__col h4.eyebrow{ color: var(--sand); margin-block-end: var(--space-3); }
.site-footer__col ul{ display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__col a{ color: var(--cream); font-size: var(--text-sm); opacity: 0.85; }
.site-footer__col a:hover{ opacity: 1; color: var(--sand); }
.wordmark--footer{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.2; }
.wordmark--footer .wordmark__name{ color: var(--cream); font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.15rem; letter-spacing: 0.04em; }
.wordmark--footer .wordmark__sub{ color: var(--sand); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.site-footer__tag{ margin-block-start: var(--space-3); color: oklch(96% 0.012 80 / 0.8); max-inline-size: 30ch; }
/* Pas de lockup RE/MAX ici : le pied de page est sombre et le logotype officiel
   n'existe qu'en noir et crème (guide, p. 4). Le poser sur une plage crème
   reviendrait à l'enfermer dans une boîte, ce que le guide interdit. Les deux
   logos vivent dans l'en-tête, au-dessus de la ligne des 400 px — c'est là que
   la norme les exige. Le pied ne porte que les mentions écrites. */
.site-footer__addr{ margin-block-start: var(--space-3); color: oklch(96% 0.012 80 / 0.7); font-style: normal; font-size: var(--text-sm); line-height: 1.7; }
.site-footer__agency{ display: block; color: var(--cream); font-family: 'Montserrat', system-ui, sans-serif; }
.site-footer__agency-legal{ display: block; color: oklch(96% 0.012 80 / 0.88); }
.site-footer__addr a{ color: oklch(96% 0.012 80 / 0.7); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__addr a:hover{ color: var(--cream); }
.site-footer__role{ font-size: 0.76rem; color: oklch(96% 0.012 80 / 0.62); line-height: 1.5; }
.site-footer__contact{ gap: var(--space-3) !important; }
.site-footer__contact li{ display: flex; flex-direction: column; gap: 2px; }
.site-footer__name{ font-family: 'Montserrat', system-ui, sans-serif; color: var(--cream); font-size: 1rem; opacity: 1; }
.site-footer__social{ margin-block-start: var(--space-4); display: flex; gap: 0.5rem; align-items: center; }
.site-footer__bottom{
  max-inline-size: var(--container);
  margin: var(--space-8) auto 0;
  padding: var(--space-4) clamp(1rem, 4vw, 2rem) 0;
  border-block-start: 1px solid oklch(96% 0.012 80 / 0.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--text-xs); color: oklch(96% 0.012 80 / 0.7);
}
.site-footer__bottom a{ color: oklch(96% 0.012 80 / 0.85); }
@media (max-width: 900px){ .site-footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .site-footer__grid{ grid-template-columns: 1fr; } }

/* Reveal — visible by default. Motion is bonus, not essential. */
.reveal{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Legacy-page typography fallback so old sections still render readable until rebuilt */
.section-light, .section-dark, .section-blue{ padding-block: var(--space-12); }
.section-light{ background: var(--vellum); }
.section-dark{ background: var(--ink); color: var(--cream); }
.section-dark h2, .section-dark h3{ color: var(--cream); }
.section-blue{ background: var(--teal); color: var(--cream); }
.section-blue h2, .section-blue h3{ color: var(--cream); }
.sec-head{ display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--space-4); margin-block-end: var(--space-6); }
.sec-head .eye, .eye{ font-family: 'Montserrat', sans-serif; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--sand); font-weight: 500; margin-block-end: 0.5rem; }
.more{ font-size: var(--text-sm); color: var(--ink); border-block-end: 1px solid var(--ink); padding-block-end: 2px; }
.section-dark .more, .section-blue .more{ color: var(--cream); border-color: var(--cream); }
.stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.stat{ padding: var(--space-4); border-radius: 12px; background: oklch(96% 0.012 80 / 0.08); border: 1px solid oklch(96% 0.012 80 / 0.15); }
.stat .n{ font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--text-display); color: var(--bronze); line-height: 1; }
.stat .l{ color: var(--stone); margin-block-start: 0.5rem; font-size: var(--text-sm); }
.section-dark .stat .l, .section-blue .stat .l{ color: oklch(96% 0.012 80 / 0.7); }

/* Property grid / pcard legacy */
.prop-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); margin-block-end: var(--space-8); }

/* Grille des catégories de propriété */
.cat-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.cat-card{
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--space-6);
  background: var(--vellum);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: var(--ink);
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.cat-card:hover{ transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow-card); color: var(--ink); }
.cat-card__count{
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--sand);
}
.cat-card h3{ margin: 0; }
.cat-card p{ color: var(--stone); font-size: var(--text-sm); }
.cat-card__arrow{
  margin-block-start: auto; padding-block-start: var(--space-3);
  font-size: 1.4rem; color: var(--teal);
  transition: transform 280ms var(--ease-out);
}
.cat-card:hover .cat-card__arrow{ transform: translateX(6px); }

/* Courtiers hypothécaires partenaires */
.mb-intro{ color: var(--stone); margin-block-end: var(--space-6); max-inline-size: 70ch; }
.mb-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.mb-card{
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: var(--space-6);
  background: var(--vellum);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.mb-card__name{ font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.mb-card__firm{
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sand);
}
.mb-card__note{ color: var(--stone); font-size: var(--text-sm); margin-block-start: 0.4rem; }
.mb-card__links{
  display: flex; flex-direction: column; gap: 0.25rem;
  margin-block-start: auto; padding-block-start: var(--space-3);
  font-size: var(--text-sm); font-weight: 500;
}
.mb-card__links a{ color: var(--teal); }
.mb-card__links a:hover{ color: var(--ink); }
.mb-card__links:empty{ display: none; }
.mb-legal{
  margin-block-start: var(--space-4);
  font-size: var(--text-xs); line-height: 1.6;
  color: var(--mist); max-inline-size: 80ch;
}

/* Catégorie sans inscription active */
.empty-note{
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-8);
  background: var(--vellum);
  border: 1px dashed var(--hairline);
  border-radius: 16px;
}
.empty-note p{ color: var(--stone); margin: 0; }
.pcard{ background: var(--vellum); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); color: var(--ink); display: block; }
.pcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); color: var(--ink); }
.pcard .ph{ aspect-ratio: 3/2; overflow: hidden; position: relative; background: var(--hairline); }
.pcard .ph img{ inline-size: 100%; block-size: 100%; object-fit: cover; }
.pcard .body{ padding: var(--space-4); }
.pcard .badge{ position: absolute; top: 12px; inset-inline-start: 12px; background: var(--sand); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; z-index: 2; }
.pcard .loc{ color: var(--sand); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.pcard .addr{ font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.15rem; margin-block: 0.4rem 0.6rem; color: var(--ink); }
.pcard .price{ font-family: 'Montserrat', system-ui, sans-serif; color: var(--bronze); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pcard .meta{ margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--hairline); display: flex; gap: 1rem; color: var(--stone); font-size: var(--text-sm); }
.page-head{ padding-block: var(--space-12) var(--space-6); border-block-end: 1px solid var(--hairline); }
.page-head .eyebrow{ margin-block-end: var(--space-3); display: inline-block; }
.page-head .lead{ color: var(--stone); margin-block-start: var(--space-4); max-inline-size: 60ch; }
.filters{ display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block-end: var(--space-6); }
.filters button{ background: var(--vellum); border: 1px solid var(--hairline); padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 0.88rem; color: var(--ink); transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out); }
.filters button.active, .filters button:hover{ background: var(--teal); color: var(--cream); border-color: var(--teal); }
.filters__empty{ color: var(--stone); padding-block: var(--space-8); }
.filters__empty[hidden]{ display: none; }

/* ========= Property detail (split-view sticky) ========= */
:root{ --header-h: 88px; }
@media (max-width: 768px){ :root{ --header-h: 76px; } }
.prop-page{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--cream);
}
@media (max-width: 1024px){
  .prop-page{ grid-template-columns: minmax(0,1fr); }
}
.prop-media{
  position: sticky;
  top: calc(var(--header-h) + clamp(1.25rem, 2.5vw, 2rem));
  block-size: calc(100dvh - var(--header-h) - clamp(2.5rem, 5vw, 4rem));
  overflow: hidden;
  background: var(--vellum);
  border: 1px solid var(--hairline);
  border-radius: 18px;
}
@media (max-width: 1024px){
  .prop-media{
    position: relative;
    top: auto;
    block-size: auto;
    aspect-ratio: 4 / 3;
  }
}
.prop-media__overlay{
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline: 1.25rem;
  z-index: 4;
  display: flex; align-items: center; gap: 0.75rem;
  pointer-events: none;
}
.prop-media__overlay > *{ pointer-events: auto; }
.prop-media__icons{ display: flex; gap: 0.5rem; }
.icon-btn{
  inline-size: 40px; block-size: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: oklch(98% 0.008 80 / 0.9);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--hairline);
  color: var(--ink);
  cursor: pointer;
  transition: transform 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.icon-btn:hover{ transform: scale(1.06); background: var(--vellum); }
.icon-btn svg{ inline-size: 18px; block-size: 18px; }
.prop-toggle{
  position: relative;
  display: inline-flex;
  background: oklch(98% 0.008 80 / 0.92);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
  margin-inline: auto;
  isolation: isolate;
}
.prop-toggle__pill{
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 4px;
  inline-size: calc(50% - 4px);
  background: var(--navy);
  border-radius: 999px;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  box-shadow: 0 4px 12px oklch(22% 0.04 240 / 0.25);
}
.prop-toggle[data-mode="map"] .prop-toggle__pill{ transform: translateX(100%); }
.prop-toggle button{
  position: relative; z-index: 1;
  background: transparent; border: 0;
  padding: 0.55rem 1.2rem;
  font: 500 0.85rem 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: color 240ms var(--ease-out);
  letter-spacing: 0.02em;
}
.prop-toggle button[aria-pressed="true"]{ color: var(--cream); }
.prop-toggle button[aria-disabled="true"]{ opacity: 0.45; cursor: not-allowed; }
.prop-media__cta{
  margin-inline-start: auto;
  background: var(--navy);
  color: var(--cream);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font: 500 0.85rem 'Montserrat', system-ui, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px oklch(22% 0.04 240 / 0.25);
  transition: transform 240ms var(--ease-out);
}
.prop-media__cta:hover{ transform: translateY(-1px); color: var(--cream); }
.prop-media__pane{
  position: absolute; inset: 0;
  transition: opacity 280ms var(--ease-out);
}
.prop-media__pane[aria-hidden="true"]{ opacity: 0; pointer-events: none; }
.prop-mosaic{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "a a b"
    "a a c"
    "d d d";
  gap: 2px;
  background: var(--hairline);
}
.prop-mosaic__cell{ position: relative; overflow: hidden; background: var(--vellum); }
.prop-mosaic__cell--a{ grid-area: a; }
.prop-mosaic__cell--b{ grid-area: b; }
.prop-mosaic__cell--c{ grid-area: c; }
.prop-mosaic__cell--d{ grid-area: d; }
.prop-mosaic__cell img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
  cursor: zoom-in;
}
.prop-mosaic__cell:hover img{ transform: scale(1.03); }
.prop-mosaic__empty{
  display: flex; align-items: center; justify-content: center;
  inline-size: 100%; block-size: 100%;
  color: var(--stone);
  background: var(--vellum);
}
.prop-mosaic__more{
  position: absolute;
  inset-inline-end: 1.5rem;
  inset-block-end: 1.5rem;
  background: oklch(96% 0.012 80 / 0.92);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  font: 500 0.85rem 'Montserrat', system-ui, sans-serif;
  z-index: 3;
  cursor: pointer;
  transition: transform 240ms var(--ease-out);
}
.prop-mosaic__more:hover{ transform: translateY(-1px); }
#leaflet-map{ inline-size: 100%; block-size: 100%; }
.prop-pin{
  inline-size: 36px; block-size: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  filter: drop-shadow(0 4px 8px oklch(22% 0.04 240 / 0.4));
}

/* Right column */
.prop-info{
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  padding-inline: clamp(1.5rem, 4vw, 3.5rem);
  max-inline-size: 720px;
  color: var(--ink);
}
.prop-info__crumbs{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  color: var(--stone);
  display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap;
  margin-block-end: 1.5rem;
}
.prop-info__crumbs a{ color: var(--stone); }
.prop-info__crumbs a:hover{ color: var(--ink); }
.prop-info__crumbs span.sep{ color: var(--hairline); }
.prop-info__h1{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  max-inline-size: 18ch;
  margin-block-end: 1.25rem;
}
.prop-info__loc{
  display: flex; align-items: center; gap: 0.5rem;
  font: 400 16px 'Montserrat', system-ui, sans-serif;
  color: var(--stone);
  margin-block-end: 2rem;
}
.prop-info__loc svg{ inline-size: 18px; block-size: 18px; flex-shrink: 0; }
.prop-info__desc{
  font: 400 var(--text-base) 'Montserrat', system-ui, sans-serif;
  line-height: 1.7;
  color: var(--ink);
  max-inline-size: 65ch;
  margin-block-end: 2rem;
}
.desc-wrap{ position: relative; }
.desc-wrap[data-collapsible] .desc-wrap__body{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.desc-wrap.expanded .desc-wrap__body{
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.desc-wrap__toggle{
  margin-block-start: 0.75rem;
  background: transparent; border: 0;
  font: 400 14px 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
  border-block-end: 1px solid var(--ink);
  padding: 0 0 2px;
  cursor: pointer;
}
.prop-info__metrics{
  display: flex; gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  align-items: center;
  margin-block-end: 2rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--hairline);
}
.prop-metric{ display: flex; flex-direction: column; gap: 0.35rem; }
.prop-metric__n{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.5rem);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prop-metric__l{
  font: 500 12px 'Montserrat', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone);
}
.prop-metric__sep{
  inline-size: 1px; block-size: 1.5rem;
  background: var(--hairline);
}
.prop-price-band{
  background: var(--vellum);
  border-radius: 14px;
  padding: 1.5rem 2rem;
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
  margin-block-end: 2.5rem;
  box-shadow:
    0 1px 2px oklch(30% 0.05 258 / 0.06),
    0 4px 14px oklch(30% 0.05 258 / 0.08),
    0 16px 40px oklch(30% 0.05 258 / 0.06);
}
.prop-price-band__main{ display: flex; flex-direction: column; gap: 0.35rem; }
.prop-price-band__eye{
  font: 500 11px 'Montserrat', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sand);
}
.prop-price-band__val{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--bronze);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prop-price-band__cta{
  margin-inline-start: auto;
  background: var(--navy);
  color: var(--cream);
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font: 500 0.95rem 'Montserrat', system-ui, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px oklch(22% 0.04 240 / 0.25);
  transition: transform 240ms var(--ease-out);
}
.prop-price-band__cta:hover{ transform: translateY(-1px); color: var(--cream); }
.prop-section{ margin-block-end: 2.5rem; }
.prop-section__eye{
  font: 500 11px 'Montserrat', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sand);
  margin-block-end: 1rem;
  display: block;
}
.amenities{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.amenities[data-more] > .amenity--extra{ display: none; }
.amenities[data-more][open] > .amenity--extra{ display: flex; }
.amenity{
  display: flex; align-items: center; gap: 0.65rem;
  padding-block: 0.4rem;
  font: 400 14px 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
}
.amenity svg{ inline-size: 22px; block-size: 22px; flex-shrink: 0; color: var(--ink); }
.amenities-more-btn{
  margin-block-start: 1rem;
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font: 500 0.85rem 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 240ms var(--ease-out);
}
.amenities-more-btn:hover{ background: var(--vellum); }
.room-table{
  inline-size: 100%;
  border-collapse: collapse;
  font: 400 14px 'Montserrat', system-ui, sans-serif;
}
.room-table thead th{
  text-align: start;
  font: 500 11px 'Montserrat', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stone);
  padding: 0.65rem 0.5rem;
  border-block-end: 1px solid var(--hairline);
}
.room-table tbody td{
  padding: 0.8rem 0.5rem;
  border-block-end: 1px solid var(--hairline);
  color: var(--ink);
}
.room-table tbody tr{ transition: background-color 160ms var(--ease-out); }
.room-table tbody tr:hover{ background: var(--cream); }
@media (max-width: 640px){
  .room-table thead{ display: none; }
  .room-table, .room-table tbody, .room-table tr, .room-table td{ display: block; inline-size: 100%; }
  .room-table tr{ padding-block: 0.75rem; border-block-end: 1px solid var(--hairline); }
  .room-table td{ padding: 0.25rem 0; border: 0; }
  .room-table td::before{
    content: attr(data-l);
    display: inline-block;
    inline-size: 7rem;
    font-weight: 500;
    color: var(--stone);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
}
.broker-card{
  background: var(--vellum);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  box-shadow:
    0 1px 2px oklch(30% 0.05 258 / 0.06),
    0 4px 14px oklch(30% 0.05 258 / 0.08);
}
.broker-card__avatars{ display: flex; align-items: center; }
.broker-card__avatars img{
  inline-size: 56px; block-size: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--vellum);
  box-shadow: 0 2px 8px oklch(30% 0.05 258 / 0.18);
}
.broker-card__avatars img + img{ margin-inline-start: -22px; }
.broker-card__body{ display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
.broker-card__name{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 20px;
  color: var(--ink);
}
.broker-card__sub{
  font: 400 13px 'Montserrat', system-ui, sans-serif;
  color: var(--stone);
}
.broker-card__team{
  font: 500 13px 'Montserrat', system-ui, sans-serif;
  color: var(--stone);
}
.broker-card__cta{
  background: var(--navy);
  color: var(--cream);
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font: 500 0.9rem 'Montserrat', system-ui, sans-serif;
  justify-self: end;
  white-space: nowrap;
  transition: transform 240ms var(--ease-out);
}
.broker-card__cta:hover{ transform: translateY(-1px); color: var(--cream); }
@media (max-width: 560px){
  .broker-card{ grid-template-columns: auto 1fr; }
  .broker-card__cta{ grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
/* --- Formulaires (global) --- */
.contact-form{display:grid;gap:1rem}
.f-fields{display:grid;gap:1.4rem}
.contact-form label{display:grid;gap:.5rem;font-size:.85rem;font-weight:500;color:var(--ink-2);letter-spacing:.01em}
.contact-form input,.contact-form textarea,.contact-form select{font-family:inherit;font-size:1rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);transition:border-color .3s var(--ease),background .3s var(--ease);font-weight:400}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:0;border-color:var(--blue);background:#fff}
.contact-form textarea{resize:vertical;min-height:120px;font-family:inherit}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
@media(max-width:520px){.f-row{grid-template-columns:1fr}}
.f-submit{margin-top:.4rem;justify-self:start;background:var(--ink);color:#fff;padding:1.1rem 1.8rem;border:0;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease)}
.f-submit:hover{background:var(--blue);transform:translateY(-2px)}
.f-note{font-size:.78rem;color:var(--muted);margin:0;line-height:1.5}
.f-ok{text-align:center;padding:2rem 1rem}
.f-ok-icon{width:64px;height:64px;border-radius:999px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:1.8rem;margin:0 auto 1.2rem}
.f-ok h3{font-size:1.4rem;margin-bottom:.6rem}
.f-ok p{color:var(--ink-2)}
.prop-similar-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 560px){ .prop-similar-grid{ grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox{
  position: fixed; inset: 0;
  background: oklch(20% 0.005 250 / 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.lightbox[aria-hidden="false"]{ display: flex; }
.lightbox__stage{
  position: relative;
  inline-size: 90vw; block-size: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__img{
  max-inline-size: 100%; max-block-size: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px oklch(0% 0 0 / 0.5);
}
.lightbox__count{
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline: 0;
  text-align: center;
  font: 500 14px 'Montserrat', system-ui, sans-serif;
  color: var(--cream);
  letter-spacing: 0.06em;
}
.lightbox__close{
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  inline-size: 44px; block-size: 44px;
  border-radius: 999px;
  background: oklch(98% 0.008 80 / 0.1);
  color: var(--cream);
  border: 1px solid oklch(98% 0.008 80 / 0.2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 240ms var(--ease-out);
}
.lightbox__close:hover{ background: oklch(98% 0.008 80 / 0.2); }
.lightbox__nav{
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 56px; block-size: 56px;
  border-radius: 999px;
  background: oklch(98% 0.008 80 / 0.1);
  border: 1px solid oklch(98% 0.008 80 / 0.2);
  color: var(--cream);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 240ms var(--ease-out);
}
.lightbox__nav:hover{ background: oklch(98% 0.008 80 / 0.2); }
.lightbox__nav--prev{ inset-inline-start: 1.25rem; }
.lightbox__nav--next{ inset-inline-end: 1.25rem; }

/* Bottom mobile bar */
.bottom-bar{
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 40;
  background: oklch(98% 0.008 80 / 0.95);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-block-start: 1px solid var(--hairline);
  padding: 1rem 1.25rem;
  padding-block-end: max(1rem, env(safe-area-inset-bottom));
  gap: 0.75rem;
  align-items: center;
}
.bottom-bar__btn{
  flex: 1 1 auto;
  text-align: center;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  font: 500 0.9rem 'Montserrat', system-ui, sans-serif;
  cursor: pointer;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
}
.bottom-bar__btn--primary{
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.bottom-bar__btn--primary:hover{ color: var(--cream); }
@media (max-width: 1024px){
  .prop-page[data-prop-page] ~ .bottom-bar, .bottom-bar[data-prop-bar]{ display: flex; }
  main:has(.prop-page) + .site-footer{ padding-block-end: calc(var(--space-12) + 80px); }
}

/* Map modal (mobile) */
.map-modal{
  position: fixed; inset: 0;
  background: var(--cream);
  z-index: 9998;
  display: none;
  flex-direction: column;
}
.map-modal[aria-hidden="false"]{ display: flex; }
.map-modal__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--hairline);
}
.map-modal__close{
  inline-size: 40px; block-size: 40px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--vellum);
  cursor: pointer;
}
#leaflet-map-modal{ flex: 1; }

/* ================= HOMEPAGE 2026 — éditorial cinématique ================= */
.hm-index{
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.08em; color: var(--mist);
}
.hm-index::after{ content: ""; inline-size: 48px; block-size: 1px; background: var(--sand); opacity: 0.6; }

/* Hero — plaque vidéo plein écran, titre masqué ligne par ligne */
.hm-hero{
  position: relative;
  /* L'en-tête n'est plus transparent sur l'accueil (conformité RE/MAX : fond
     neutre derrière le logotype), il occupe donc sa propre hauteur au-dessus
     du hero. On la retranche pour que le premier écran reste plein. */
  min-block-size: calc(100dvh - var(--hdr-h));
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink);
}
.hm-hero__media{ position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hm-hero__video{
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}
.hm-hero::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 18% 80%, oklch(20% 0.005 250 / 0.7) 0%, oklch(20% 0.005 250 / 0) 70%),
    linear-gradient(180deg, oklch(20% 0.005 250 / 0.12) 0%, oklch(20% 0.005 250 / 0.55) 100%);
}
.hm-hero__inner{
  align-self: end;
  max-inline-size: var(--container);
  inline-size: 100%;
  margin-inline: auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vh, 3rem);
  display: grid;
  gap: var(--space-4);
  color: var(--cream);
}
.hm-hero__eyebrow{ color: var(--sand); text-shadow: 0 1px 24px oklch(20% 0.005 250 / 0.45); }
.hm-hero__h1{
  color: var(--cream);
  font-size: clamp(1.76rem, 6.4vw, 5.55rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-shadow: 0 1px 24px oklch(20% 0.005 250 / 0.45);
}
.hm-hero__h1 em{ font-style: normal; }
.hm-line{ display: block; overflow: hidden; padding-block-end: 0.1em; margin-block-end: -0.1em; }
.hm-line__in{ display: inline-block; will-change: transform; }
.hm-hero__bar{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-6);
  padding: clamp(0.9rem, 2.5vh, 1.4rem) clamp(1rem, 4vw, 2rem);
  border-block-start: 1px solid oklch(96% 0.012 80 / 0.22);
  color: var(--cream);
}
.hm-hero__bar-names{ font-size: var(--text-sm); opacity: 0.92; }
.hm-hero__bar-meta{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--sand);
}
@media (max-width: 760px){
  .hm-hero__bar{ grid-template-columns: 1fr; gap: var(--space-3); justify-items: start; }
  .hm-hero__bar-meta{ display: none; }
  .hm-hero__cta{ inline-size: 100%; justify-content: center; }
}

/* Bandeau des mentions RE/MAX — nom et titre au permis de chaque courtier,
   agence, mention « Agence immobilière », adresse civique, téléphone principal
   et mention de franchisé. Guide des normes, sept. 2025, p. 27. */
.hm-legal{
  background: var(--vellum);
  border-block-end: 1px solid var(--hairline);
  padding-block: clamp(1.4rem, 3.5vh, 2.2rem);
}
.hm-legal__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: start;
}
.hm-legal__brokers{ list-style: none; display: grid; gap: 0.4rem; }
.hm-legal__brokers li{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.05rem 0.5rem; }
.hm-legal__name{ font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.hm-legal__role{ color: var(--stone); font-size: 0.8rem; }
.hm-legal__agency{
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--stone);
}
.hm-legal__agency-name{ display: block; font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.hm-legal__agency-legal{ display: block; color: var(--ink); }
.hm-legal__agency a{ color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.hm-legal__agency a:hover{ color: var(--ink); }
.hm-legal__franchise{
  grid-column: 1 / -1;
  margin-block-start: 0.2rem;
  padding-block-start: clamp(0.8rem, 2vh, 1.1rem);
  border-block-start: 1px solid var(--hairline);
  font-size: 0.78rem;
  color: var(--stone);
}
.hm-legal__franchise a{ color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.hm-legal__franchise a:hover{ color: var(--ink); }
@media (max-width: 760px){
  .hm-legal__inner{ grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Les chiffres — compteurs bronze, colonnes hairline */
.hm-territory{ padding-block: var(--space-12); }
.hm-territory__inner{
  background: var(--teal);
  color: var(--cream);
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4.75rem);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  box-shadow:
    0 1px 2px oklch(22% 0.04 258 / 0.10),
    0 12px 40px oklch(22% 0.04 258 / 0.18);
}
.hm-territory__eye{ color: var(--sand); }
.hm-territory__title{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.hm-territory__body p{
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.72;
  color: oklch(96% 0.012 80 / 0.84);
  max-inline-size: 62ch;
}
.hm-territory__body strong{ color: var(--cream); font-weight: 500; }
@media (max-width: 860px){
  .hm-territory__inner{ grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Propriétés — galerie horizontale épinglée (desktop), défilement natif (mobile) */
.hm-props{ position: relative; overflow: hidden; padding-block: var(--space-12); }
.hm-props__head{
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--space-6); flex-wrap: wrap;
  margin-block-end: var(--space-8);
}
.hm-props__head .hm-index{ margin-block-end: var(--space-3); }
.hm-props__head .eyebrow{ display: block; margin-block-end: var(--space-2); }
.hm-props__head h2{ max-inline-size: 22ch; }
.hm-props__viewport{ inline-size: 100%; }
.hm-props__track{
  display: flex;
  gap: var(--space-6);
  align-items: stretch;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.hm-props__track .prop-card{ flex: 0 0 clamp(280px, 78vw, 420px); }
/* Défilement horizontal natif à toutes les tailles. La page continue de
   descendre normalement : c'est le rail qui glisse, jamais la page. */
.hm-props__track{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block-end: var(--space-4);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.hm-props__track::-webkit-scrollbar{ display: none; }
.hm-props__track > *{ scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce){ .hm-props__track{ scroll-behavior: auto; } }
@media (min-width: 1024px){
  .hm-props__track .prop-card{ flex: 0 0 clamp(360px, 30vw, 460px); }
}

/* Les deux flèches qui font glisser le rail — le seul moyen d'aller à droite */
.hm-props__nav{
  display: flex; gap: var(--space-2); align-items: center;
  margin-block-start: var(--space-4);
}
.hm-props__arrow{
  inline-size: 48px; block-size: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out),
              border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.hm-props__arrow:hover:not(:disabled){ background: var(--teal); border-color: var(--teal); color: var(--cream); transform: translateY(-2px); }
.hm-props__arrow:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; }
.hm-props__arrow:disabled{ opacity: .35; cursor: default; }
.hm-props__hint{ font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-inline-start: var(--space-2); }
.hm-endcard{
  flex: 0 0 clamp(240px, 60vw, 320px);
  border-radius: 14px;
  background: var(--teal);
  color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.hm-endcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); color: var(--cream); }
.hm-endcard h3{ color: var(--cream); }
.hm-endcard__arrow{ font-size: 2rem; line-height: 1; color: var(--sand); transition: transform 280ms var(--ease-out); }
.hm-endcard:hover .hm-endcard__arrow{ transform: translateX(6px); }
@media (min-width: 1024px){ .hm-endcard{ flex-basis: clamp(280px, 24vw, 340px); } }

/* L'équipe — une vignette par personne, la rangée s'allonge quand l'équipe grandit */
.hm-team{ padding-block: var(--space-16); }
.hm-team__head{ max-inline-size: 62ch; margin-block-end: var(--space-8); }
.hm-team__head .eyebrow{ display: block; margin-block-end: var(--space-2); }
.hm-team__head p{ color: var(--stone); margin-block-start: var(--space-4); }
.hm-team__cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}
.hm-member{
  display: flex; flex-direction: column; gap: 0.35rem;
  color: var(--ink);
}
.hm-member__photo{
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-card);
  margin-block-end: var(--space-3);
}
.hm-member__photo img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 18%;
  transition: transform 900ms var(--ease-out);
}
.hm-member:hover .hm-member__photo img{ transform: scale(1.05); }
/* Même dégradé bleu que les fiches : l'ensemble se lit comme une seule famille */
.hm-member__photo::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, oklch(22% 0.04 240 / 0.5) 0%, transparent 40%);
}
.hm-member__photo--empty{
  display: grid; place-items: center;
  box-shadow: none;
  border: 1px dashed var(--hairline);
  background:
    repeating-linear-gradient(135deg, oklch(90% 0.006 80 / 0.5) 0 12px, transparent 12px 24px),
    var(--cream);
}
.hm-member__photo--empty::after{ content: none; }
.hm-member__photo--empty > span{ font-size: 2.6rem; font-weight: 300; color: var(--mist); line-height: 1; }
.hm-member__name{ font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; }
.hm-member__role{ font-size: var(--text-xs); font-weight: 500; color: var(--stone); line-height: 1.45; }
.hm-member--soon .hm-member__name{ color: var(--mist); }
.hm-team__foot{ margin-block-start: var(--space-8); }

/* Territoire — liste interactive, aperçu image qui suit le curseur */
.hm-cities{ position: relative; padding-block: var(--space-16); background: var(--vellum); }
.hm-cities__head .hm-index{ margin-block-end: var(--space-3); }
.hm-cities__head .eyebrow{ display: block; margin-block-end: var(--space-2); }
.hm-cities__list{ margin-block-start: var(--space-8); border-block-start: 1px solid var(--hairline); }
.hm-city{
  display: grid;
  grid-template-columns: 3ch 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-block-end: 1px solid var(--hairline);
}
.hm-city__idx{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--mist);
}
.hm-city__main{ display: flex; flex-direction: column; gap: 0.35rem; min-inline-size: 0; }
.hm-city__name{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(1.6rem, 4vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  transition: color 280ms var(--ease-out), transform 420ms var(--ease-out);
}
.hm-city:hover .hm-city__name{ color: var(--teal); transform: translateX(10px); }
.hm-city__stat{ color: var(--stone); font-size: var(--text-sm); }
.hm-city__arrow{
  font-size: 1.4rem; color: var(--sand);
  opacity: 0.5; transform: translateX(-6px);
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.hm-city:hover .hm-city__arrow{ opacity: 1; transform: translateX(0); }
.hm-city--teaser .hm-city__name{ color: var(--teal); font-style: italic; }

/* CTA — photo pleine largeur derrière un dégradé bleu, marquise en contour par-dessus */
.hm-cta{
  position: relative;
  isolation: isolate;
  background: var(--teal);
  color: var(--cream);
  padding-block: var(--space-8) var(--space-12);
  overflow: hidden;
}
.hm-cta__bg{
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  /* Ken burns très lent : la photo respire sans jamais attirer l'œil */
  animation: hm-kenburns 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hm-kenburns{ from{ transform: scale(1.04); } to{ transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@media (prefers-reduced-motion: reduce){ .hm-cta__bg{ animation: none; transform: scale(1.04); } }
/* Le même dégradé bleu que les fiches, en plein écran cette fois */
.hm-cta::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, oklch(22% 0.04 240 / 0.72) 0%, oklch(22% 0.04 240 / 0.4) 55%, oklch(22% 0.04 240 / 0.2) 100%),
    linear-gradient(to top, oklch(22% 0.04 240 / 0.85) 0%, oklch(30% 0.055 250 / 0.55) 45%, oklch(37.3% 0.06 258 / 0.32) 100%);
}
.hm-marquee{ inline-size: 100%; overflow: hidden; margin-block-end: var(--space-8); }
.hm-marquee__track{
  display: flex;
  white-space: nowrap;
  inline-size: max-content;
  animation: hm-marquee 36s linear infinite;
  will-change: transform;
}
.hm-marquee__track span{
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(3.25rem, 9vw, 7.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px oklch(96% 0.012 80 / 0.32);
}
@keyframes hm-marquee{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .hm-marquee__track{ animation: none; } }
.hm-cta__inner{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-6);
}
.hm-cta h2{ color: var(--cream); max-inline-size: 18ch; }
.hm-cta__actions{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 768px){ .hm-cta__inner{ grid-template-columns: 1fr; } }
/* Homepage only — CTA band flows directly into the (same-teal) footer */
body.header-overlay .site-footer{ margin-block-start: 0; border-block-start: 1px solid oklch(96% 0.012 80 / 0.15); }

/* ===== Pages de contenu (vendre / acheter / guides) ===== */
.two-col{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
@media(max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.two-col aside{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
@media(max-width:900px){ .two-col aside{ position:static; } }
.prose{ max-inline-size:68ch; font-size:1.05rem; line-height:1.78; color:var(--stone); }
.prose h2{ font-family:'Montserrat', system-ui, sans-serif; font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.15; letter-spacing:-0.015em; color:var(--ink); margin-block:2.6rem 0.9rem; }
.prose h2:first-child, .prose > p:first-child{ margin-block-start:0; }
.prose h3{ font-family:'Montserrat', system-ui, sans-serif; font-weight:600; font-size:clamp(1.2rem,1.8vw,1.45rem); color:var(--ink); margin-block:1.8rem 0.5rem; }
.prose p{ margin-block-end:1rem; }
.prose ul{ padding-inline-start:1.3rem; list-style:disc; margin-block-end:1.1rem; }
.prose ul li::marker{ color:var(--bronze); }
.prose li{ margin-block-end:0.5rem; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ol{ padding-inline-start:1.3rem; list-style:decimal; margin-block-end:1.1rem; }
.prose ol li::marker{ color:var(--bronze); font-weight:600; }
/* Tableaux d'article : les chiffres s'alignent, la ligne déborde en scroll
   sur mobile plutôt que d'élargir la page. */
.prose .tbl{ overflow-x:auto; margin-block:1.4rem 1.6rem; }
.prose table{ inline-size:100%; border-collapse:collapse; font-size:.94rem; }
.prose caption{ caption-side:bottom; padding-block-start:.7rem; font-size:.82rem; color:var(--mist); text-align:start; }
.prose th, .prose td{ padding:.65rem .8rem; border-block-end:1px solid var(--hairline); text-align:start; }
.prose thead th{
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  color:var(--stone); border-block-end:1px solid var(--sand); white-space:nowrap;
}
.prose td.num, .prose th.num{ text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.prose tbody tr:last-child td{ border-block-end:0; }
.prose .note{
  margin-block:1.6rem; padding:1.1rem 1.3rem;
  background:var(--vellum); border:1px solid var(--hairline);
  border-radius:var(--radius); font-size:.95rem;
}
.prose .note p:last-child{ margin-block-end:0; }
.prose a{ color:var(--bronze); text-decoration:underline; text-underline-offset:3px; }
.blue-block{ background:var(--teal); color:var(--cream); border-radius:var(--radius-lg); padding:clamp(1.75rem,3vw,2.5rem); }
.blue-block.soft{ background:var(--blue-soft); color:var(--ink); }
.blue-block h2, .blue-block h3{ color:inherit; }
.blue-block .eye{ font:500 11px 'Montserrat', system-ui, sans-serif; text-transform:uppercase; letter-spacing:0.18em; }
/* Bannière image (pages de contenu) */
/* Bannière de page — la photo déborde légèrement pour permettre la parallaxe */
.content-hero{ margin:0 0 clamp(1.5rem,3vw,2.5rem); border-radius:var(--radius-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-card); block-size:clamp(220px,34vw,560px); }
.content-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, oklch(22% 0.04 240 / 0.55) 0%, oklch(37.3% 0.06 258 / 0.18) 45%, transparent 75%);
}
.content-hero img{ display:block; inline-size:100%; block-size:108%; object-fit:cover; will-change:transform; }
@media (prefers-reduced-motion: reduce){ .content-hero img{ block-size:100%; } }
/* Pages de ville — titre plus mesuré + bande de stats éditoriale */
.page-head--city h1{ font-size:clamp(1.9rem,4.2vw,3.1rem); letter-spacing:-0.02em; max-inline-size:16ch; }
.page-head--city .lead{ font-size:1.05rem; }
.city-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,3vw,2.75rem); padding-block:clamp(1.5rem,3vw,2.25rem); border-block:1px solid var(--hairline); }
@media(max-width:720px){ .city-stats{ grid-template-columns:1fr 1fr; gap:1.6rem 1.25rem; } }
.city-stat{ display:flex; flex-direction:column; gap:.4rem; }
.city-stat__n{ font-family:'Montserrat', system-ui, sans-serif; font-size:clamp(1.7rem,3vw,2.5rem); color:var(--bronze); line-height:1; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.city-stat__l{ font:500 11px 'Montserrat', system-ui, sans-serif; text-transform:uppercase; letter-spacing:.13em; color:var(--stone); }
/* Statistiques de marché Centris — chiffres réels, source et période visibles */
.mstats{
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  background:var(--vellum);
  padding:clamp(1.4rem,3vw,2.2rem);
  margin-block-end:clamp(2rem,4vw,3rem);
}
.mstats__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap;
  padding-block-end:1.1rem; margin-block-end:1.4rem;
  border-block-end:1px solid var(--hairline);
}
.mstats__period{ font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--stone); }
.mstats__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:clamp(1rem,2.5vw,2rem); }
.mstat{ display:flex; flex-direction:column; gap:.25rem; }
.mstat__n{
  font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:700;
  letter-spacing:-0.03em; line-height:1.05;
  color:var(--teal); font-variant-numeric:tabular-nums;
}
.mstat__l{ font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.11em; color:var(--stone); line-height:1.4; }
.mstat__var{ font-size:var(--text-sm); font-weight:600; font-variant-numeric:tabular-nums; }
.mstat__var--up{ color:oklch(52% 0.11 150); }
.mstat__var--down{ color:oklch(55% 0.15 28); }
.mstat__var--flat{ color:var(--mist); }
.mstat__u{ font-size:.55em; font-weight:600; color:var(--stone); letter-spacing:0; }
.mstats__source{ margin-block-start:1.4rem; font-size:var(--text-xs); line-height:1.6; color:var(--mist); max-inline-size:none; }
.mstats__source a{ color:var(--stone); text-decoration:underline; text-underline-offset:2px; }
.mstats__source a:hover{ color:var(--teal); }
.faq-source{ font-size:var(--text-xs); color:var(--mist); }
.faq-source a{ text-decoration:underline; text-underline-offset:2px; }

/* Tableau détaillé des statistiques Centris */
.mkt-tbl{ inline-size:100%; border-collapse:separate; border-spacing:0; margin-block:1rem 2rem; font-size:.92rem; background:var(--vellum); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.mkt-tbl th, .mkt-tbl td{ padding:.75rem .95rem; text-align:start; border-block-end:1px solid var(--hairline); }
.mkt-tbl thead th{ background:var(--navy); color:var(--cream); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.mkt-tbl td.num, .mkt-tbl th.num{ text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mkt-tbl tbody tr:last-child td{ border-block-end:0; }
.mkt-var{ font-size:.82em; font-weight:600; margin-inline-start:.35rem; }
.mkt-var--up{ color:oklch(52% 0.11 150); }
.mkt-var--down{ color:oklch(55% 0.15 28); }
.mkt-var--flat{ color:var(--mist); }
@media(max-width:560px){ .mkt-tbl{ font-size:.84rem; } .mkt-tbl th, .mkt-tbl td{ padding:.6rem .55rem; } }

/* Page Équipe — une carte par personne, la même quel que soit le nombre de membres */

/* Bande territoire pleine largeur, photo derrière le dégradé bleu */
.team-band{
  position:relative; isolation:isolate; overflow:hidden;
  margin-block:clamp(2rem,5vw,3.5rem);
  padding-block:clamp(3rem,8vw,6rem);
  color:var(--cream);
  background:var(--teal);
}
.team-band__bg{
  position:absolute; inset:0; z-index:-2;
  inline-size:100%; block-size:100%; object-fit:cover;
  animation:hm-kenburns 34s ease-in-out infinite alternate;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .team-band__bg{ animation:none; transform:scale(1.04); } }
/* Deux couches : un dégradé vertical pour l'ambiance, un voile latéral pour
   garantir le contraste du texte quelle que soit la photo derrière. */
.team-band::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to right, oklch(22% 0.04 240 / 0.8) 0%, oklch(22% 0.04 240 / 0.45) 45%, transparent 75%),
    linear-gradient(to top, oklch(22% 0.04 240 / 0.82) 0%, oklch(30% 0.055 250 / 0.5) 55%, oklch(37.3% 0.06 258 / 0.3) 100%);
}
.team-band__inner{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.team-band__inner h2{ color:var(--cream); max-inline-size:20ch; }
.team-band__inner p{ color:oklch(96% 0.012 80 / 0.86); max-inline-size:56ch; }
.team-band__inner .eyebrow{ color:var(--sand); }

/* Rangée de cartes qui se redistribuent : la carte ouverte prend la place,
   les autres se resserrent. On anime flex-grow, jamais width — pas de reflow.
   Sans JS, toutes les bios restent lisibles (html.js pilote le repli). */
.team-grid{
  display:flex;
  flex-wrap:wrap;
  /* flex-start, sinon les cartes fermées s'étirent à la hauteur de l'ouverte
     et laissent de longues colonnes vides */
  align-items:flex-start;
  gap:clamp(1rem,2vw,1.4rem);
  margin-block-end:clamp(2.5rem,5vw,4rem);
}
.team-card{
  flex:1 1 240px;
  min-inline-size:0;
  display:flex; flex-direction:column;
  background:var(--vellum);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:flex-grow 520ms var(--ease-out), box-shadow 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
@media(min-width:900px){
  .team-grid{ flex-wrap:nowrap; }
  /* flex-basis:0 — sans ça, la base de 240px absorbe la largeur et flex-grow
     ne redistribue que les miettes : l'écart ouvert/fermé reste invisible. */
  .team-card{ flex:1 1 0; }
  .team-card.is-open{ flex-grow:2.2; }
  .team-grid:has(.is-open) .team-card:not(.is-open){ flex-grow:1; }

  /* Ouverte, la photo devient un bandeau court : à hauteur égale, un portrait
     étiré sur toute la largeur se transforme en gros plan du visage. */
  .team-card.is-open .team-card__photo{
    aspect-ratio:auto;
    block-size:clamp(150px,13vw,190px);
    max-block-size:none;
  }
  .team-card.is-open .team-card__photo img{ object-position:center 22%; }

  /* La largeur gagnée sert à raccourcir la bio, pas à allonger les lignes.
     Pas de break-inside:avoid : le texte doit passer d'une colonne à l'autre
     ligne par ligne, sinon un paragraphe entier saute d'un coup et les deux
     colonnes se retrouvent de hauteurs très inégales. */
  .team-card.is-open .team-card__bio > div{ columns:2; column-gap:1.8rem; column-fill:balance; }
  .team-card.is-open .team-card__bio p{ max-inline-size:none; }
  .team-card.is-open .team-card__bio p:first-child{ margin-block-start:0; }
}
}
.team-card.is-open{ border-color:var(--teal); box-shadow:var(--shadow-card); }
@media (prefers-reduced-motion: reduce){ .team-card{ transition:none; } }

/* Photo — moitié de la hauteur précédente, le visage reste cadré */
.team-card__photo{
  position:relative; margin:0;
  aspect-ratio:1/1;
  max-block-size:clamp(180px,22vw,260px);
  overflow:hidden; background:var(--navy);
}
.team-card__photo img{
  inline-size:100%; block-size:100%;
  object-fit:cover; object-position:center 15%;
  transition:transform 900ms var(--ease-out);
}
.team-card:hover .team-card__photo img,
.team-card.is-open .team-card__photo img{ transform:scale(1.04); }
/* Le même dégradé bleu que les fiches de propriété : la famille visuelle tient */
.team-card__photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, oklch(22% 0.04 240 / 0.55) 0%, transparent 42%);
}
.team-card__photo--empty{
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, oklch(90% 0.006 80 / 0.5) 0 12px, transparent 12px 24px),
    var(--cream);
}
.team-card__photo--empty::after{ content:none; }
.team-card__photo--empty span{ font-size:clamp(2.2rem,4vw,3rem); font-weight:300; color:var(--mist); line-height:1; }

.team-card__body{ display:flex; flex-direction:column; gap:.4rem; padding:clamp(1.1rem,2vw,1.5rem); flex:1; }
.team-card__role{ font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--sand); line-height:1.4; }
.team-card__name{ font-size:clamp(1.15rem,1.6vw,1.45rem); font-weight:700; letter-spacing:-0.025em; line-height:1.1; margin:0; color:var(--ink); }

/* Le déclencheur d'accordéon */
.team-card__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  inline-size:100%; margin-block-start:.7rem; padding-block:.6rem;
  border-block-start:1px solid var(--hairline);
  font-size:.85rem; font-weight:600; color:var(--teal);
  text-align:start;
  transition:color 240ms var(--ease-out);
}
.team-card__toggle:hover{ color:var(--ink); }
.team-card__toggle-icon{
  flex:none; inline-size:18px; block-size:18px;
  position:relative;
}
.team-card__toggle-icon::before,
.team-card__toggle-icon::after{
  content:""; position:absolute; inset-inline:0; inset-block-start:50%;
  block-size:1.5px; background:currentColor; border-radius:2px;
  transition:transform 320ms var(--ease-out);
}
.team-card__toggle-icon::after{ transform:rotate(90deg); }
.team-card.is-open .team-card__toggle-icon::after{ transform:rotate(0deg); }

/* Repli animé : grid-template-rows 0fr → 1fr anime une hauteur automatique */
.team-card__bio{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows 480ms var(--ease-out);
}
html.js .team-card__bio{ grid-template-rows:0fr; }
html.js .team-card.is-open .team-card__bio{ grid-template-rows:1fr; }
.team-card__bio > div{ overflow:hidden; min-block-size:0; }
.team-card__bio p{ color:var(--stone); font-size:var(--text-sm); line-height:1.75; max-inline-size:60ch; }
.team-card__bio p:first-child{ margin-block-start:.5rem; }
.team-card__bio p + p{ margin-block-start:.8rem; }
@media (prefers-reduced-motion: reduce){ .team-card__bio{ transition:none; } }

.team-card__contact{
  display:flex; flex-direction:column; gap:.15rem;
  margin-block-start:auto; padding-block-start:.9rem;
  border-block-start:1px solid var(--hairline);
  font-size:var(--text-sm); font-weight:500;
}
.team-card__contact a{ color:var(--teal); overflow-wrap:anywhere; }
.team-card__contact a:hover{ color:var(--ink); }
.team-card__cta{
  display:inline-flex; align-items:center; gap:.4rem;
  padding-block-start:.8rem;
  font-size:.88rem; font-weight:600; color:var(--ink);
  transition:gap .25s var(--ease-out);
}
.team-card__cta:hover{ gap:.75rem; color:var(--teal); }
.team-card--soon{ border-style:dashed; }
.team-card--soon:hover{ box-shadow:none; border-color:var(--hairline); }
/* Pas de bouton sur la carte « prochainement » : son texte reste déplié */
html.js .team-card--soon .team-card__bio{ grid-template-rows:1fr; }
.team-card--soon:hover{ transform:none; box-shadow:none; border-color:var(--hairline); }

/* CTA band sur les pages de contenu */
.cta-band--content{ padding:clamp(2.25rem,4vw,3.5rem) clamp(1.75rem,4vw,3.5rem); border-radius:var(--radius-lg); box-shadow:0 1px 2px oklch(22% 0.04 258 / 0.10), 0 18px 50px oklch(22% 0.04 258 / 0.20); }
.cta-band--content{ isolation:isolate; }
/* Photo pleine largeur derrière le dégradé bleu, comme sur la bande d'accueil */
.cta-band__bg{
  position:absolute; inset:0; z-index:-2;
  inline-size:100%; block-size:100%;
  object-fit:cover;
  animation:hm-kenburns 34s ease-in-out infinite alternate;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .cta-band__bg{ animation:none; transform:scale(1.04); } }
.cta-band--content::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to right, oklch(22% 0.04 240 / 0.82) 0%, oklch(22% 0.04 240 / 0.5) 50%, oklch(22% 0.04 240 / 0.25) 100%),
    linear-gradient(to top, oklch(22% 0.04 240 / 0.8) 0%, oklch(30% 0.055 250 / 0.5) 55%, oklch(37.3% 0.06 258 / 0.3) 100%);
}
.cta-band--content .cta-band__inner{ position:relative; z-index:1; }
.cta-band__eye{ color:var(--sand); display:block; margin-block-end:var(--space-3); }
.cta-band__sub{ color:oklch(96% 0.012 80 / 0.82); max-inline-size:46ch; margin-block-start:var(--space-3); line-height:1.6; }
.cta-band--content .cta-band__actions{ flex-direction:column; align-items:stretch; }
.cta-band--content .cta-band__actions a{ text-align:center; white-space:nowrap; }
@media (max-width:768px){ .cta-band--content .cta-band__actions{ flex-direction:row; flex-wrap:wrap; } }