/*
Theme Name: Bosquet Patrimoine
Theme URI: https://bosquetpatrimoine.com
Author: SDI Solution
Description: Thème sur-mesure pour Bosquet Patrimoine.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: bosquet
*/

/* =========================================================================
   1. DESIGN TOKENS — source de vérité unique (brief §3)
   ========================================================================= */
:root {
	--navy:        #1D1D3D;   /* navy officiel de la charte Bosquet (Fiverr/tal_ni) — remplace l'ancien #1f2447 partout */
	--navy-deep:   #15152f;   /* teinte plus sombre du navy de marque (profondeur des dégradés/placeholders héros) */
	--navy-darker: #12122A;   /* footer un cran plus sombre que les boutons (#1D1D3D) → hiérarchie */
	--gold:        #d4b888;
	--gold-light:  #e6cfa3;
	--gold-deep:   #b8995f;
	/* Doré de TEXTE : --gold-deep ne mesure que 2,71:1 sur blanc, sous le 4,5:1
	   exigé pour du texte. Même famille, assombri jusqu'à 4,64:1. */
	--gold-text:   #8d7040;
	--white:       #ffffff;
	--line:        rgba(212, 184, 136, 0.28);
	--line-strong: rgba(212, 184, 136, 0.55);

	/* Neutres — base claire façon Elliman */
	--ink:        #232637;   /* texte principal (navy très sombre) */
	--muted:      #6b6f83;
	--hairline:   #e7e4dd;   /* filets fins gris chaud (séparateurs Elliman) — DÉCORATIF uniquement */
	/* Filet PORTEUR DE SENS (bord d'un champ de saisie) : --hairline ne mesure que
	   1,27:1 sur blanc, très loin du 3:1 exigé d'un élément d'interface. */
	--hairline-strong: #949084;
	--paper:      #ffffff;
	--paper-alt:  #f7f5f0;   /* bande crème très discrète */
	--cream:      #fbfbf9;   /* crème clair des sections (calé sur Elliman #fbfbf9) */

	/* Display : Jost (alternative libre proche d'Euclid Circular A). Un seul token à changer
	   si Euclid Circular A est licencié plus tard. UI/texte : Montserrat. */
	--font-display: "Euclid Circular A Trial", "Montserrat", -apple-system, sans-serif;
	--font-sans:    "Euclid Circular A Trial", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif:   "Sainte Colombe Trial", "Playfair Display", Georgia, serif;  /* accents éditoriaux + gros chiffres (façon Elliman) */

	--fs-eyebrow: 0.72rem;
	--fs-body:    1rem;
	--fs-h3:      1.5rem;
	--fs-h2:      clamp(1.9rem, 3.4vw, 3rem);
	--fs-h1:      clamp(2.4rem, 5.4vw, 4.4rem);

	--sp-1: 0.5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;
	--sp-4: 2.5rem;  --sp-5: 4rem;  --sp-6: 6rem;

	/* 1330 - 2x40 de padding = 1250px de contenu, marges laterales 95px : la mesure
	   exacte d'Elliman (cartes a x95, bord droit 1345, 3 x 406 + 2 x 16 de gap). */
	--wrap: 1330px;
	--radius: 0px;  /* Elliman : btn, form-control et badge sont tous a rad 0. */
	--header-h: 81px;   /* hauteur du header (= --offset-top d'Elliman) */
	--transition: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================================
   2. RESET / BASE — fond blanc partout
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* Garde-fou : les panneaux hors-écran (menu mobile, modale) ne créent jamais de scroll horizontal. */
body { overflow-x: clip; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font-family: inherit; cursor: pointer; }

/* =========================================================================
   3. TYPOGRAPHIE
   ========================================================================= */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 300;  /* Elliman = tous les titres mesurés en Light 300 */
	line-height: 1.14;
	margin: 0 0 var(--sp-2);
	letter-spacing: normal;
	color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

.eyebrow {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--gold-deep);
	display: inline-block;
}
.eyebrow--light { color: var(--gold-light); }

.rule { width: 44px; height: 1px; background: var(--gold); border: 0; margin: var(--sp-2) 0; }
.rule--center { margin-left: auto; margin-right: auto; }

/* =========================================================================
   4. LAYOUT
   ========================================================================= */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); }
.section { padding: var(--sp-6) 0; }
.section--alt { background: var(--paper-alt); }
.section__head { text-align: center; margin-bottom: var(--sp-5); }
/* Heading standard de section = title--lg d'Elliman (37.5px w300). */
.section__head h2 { font-family: var(--font-display); font-size: 2.344rem; font-weight: 300; line-height: 1.2; color: var(--navy); margin: 0; }
.section__head .eyebrow { margin-bottom: var(--sp-2); }
.section__head .rule { margin-top: var(--sp-2); }

/* Masqué à l'écran, restitué par les lecteurs d'écran (régions live, libellés
   de contexte). Surtout pas display:none, qui les rendrait muets aussi. */
.u-vh {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =========================================================================
   5. BOUTONS / LIENS
   ========================================================================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;  /* Elliman a.btn : gap 12px */
	padding: 10px 24px;
	font-family: var(--font-sans); font-weight: 300;
	font-size: 0.75rem; text-transform: uppercase; letter-spacing: normal;
	/* lh 1.4 = 16.8px comme Elliman : sans ca le 1.7 du body donne 20.4px et le bouton fait 42px au lieu de 39. */
	line-height: 1.4;
	white-space: nowrap;
	border: 1px solid transparent; border-radius: var(--radius);
	transition: all var(--transition);
}
/* Bouton primaire = .btn --dark-blue d'Elliman : navy, texte fin (300), balayage or
   var(--gold-deep) au survol (::before qui se déploie en scaleX, texte blanc au-dessus). */
.btn--primary { position: relative; overflow: hidden; z-index: 0; background: var(--navy); color: #fff; font-weight: 300; letter-spacing: normal; font-size: 0.75rem; }
.btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-deep); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1); }
.btn--primary:hover { background: var(--navy); }
.btn--primary:hover::before { transform: scaleX(1); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-light); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* Lien texte souligné-or (Elliman) */
.link-underline {
	font-size: 0.75rem; text-transform: uppercase; letter-spacing: normal; font-weight: 400;
	padding-bottom: 4px; border-bottom: 1px solid var(--gold);
}
.link-underline:hover { color: var(--gold-deep); }

/* « Lire la description complète » — MÊME format que .link-underline (« Demander la fiche détaillée ») :
   c'est un <button>, on réinitialise donc son chrome par défaut (fond/bordure). */
.readmore-link {
	display: inline-block; background: none; border: 0; cursor: pointer;
	font-family: var(--font-sans); font-size: 0.875rem; font-weight: 400;
	text-transform: none; letter-spacing: normal; color: var(--ink);
	padding: 0 0 4px; border-bottom: 1px solid var(--gold);
	transition: color 0.3s var(--transition), border-color 0.3s var(--transition);
}
.readmore-link:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
/* Dégradé blanc au-dessus de « Lire la description complète » quand le texte est tronqué (façon Elliman). */
.prose[data-readmore] { position: relative; }
.prose[data-readmore], .prose[data-readmore] p { font-size: 0.875rem; line-height: 1.4; }  /* corps description = 14/19.6 comme Elliman .rte */
.prose[data-readmore].is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }

/* =========================================================================
   6. HEADER / NAV — blanc, transparent au-dessus du hero, solide au scroll
   ========================================================================= */
.site-header {
	/* Comme Elliman : fixe en haut, transparent au-dessus du hero et solide blanc en défilant
	   (.is-scrolled), MAIS il se rétracte à la descente et revient à la remontée. */
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: #fff;
	border-bottom: 0;  /* pas de trait sous le header (= Elliman : border-bottom 0, sans ombre) */
	transition: transform 0.6s ease, background 0.6s ease, border-color var(--transition);
}
/* Elliman : html.--header-is-hidden #header { transform: translateY(-100%) } */
html.is-header-hidden .site-header { transform: translateY(-100%); }
/* Menu ouvert : le header doit rester visible quoi qu'il arrive. */
html.is-header-hidden body.menu-open .site-header { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.site-header { transition: background var(--transition), border-color var(--transition); }
	html.is-header-hidden .site-header { transform: none; }
}
.site-header__inner {
	display: flex; align-items: center;
	gap: var(--sp-3); height: var(--header-h);
	max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4);
}
/* Fondu des couleurs de texte lors du passage transparent ↔ blanc (survol méga-menu / scroll).
   On exclut .burger__box span pour ne pas casser l'animation hamburger ↔ ×. */
.site-header .brand, .site-header .brand__name, .site-header .brand__name small,
.site-header .nav a, .site-header .lang-switcher__current, .site-header .burger { transition: color var(--transition), border-color var(--transition); }
.nav-wrap { flex: 1; display: flex; justify-content: center; }
.brand { display: inline-flex; align-items: center; color: var(--navy); }  /* wordmark = navy de marque #1D1D3D sur fond clair */
/* Logo = wordmark « BOSQUET » + baseline « PATRIMOINE ». Polices de la CHARTE officielle
   (Fiverr/tal_ni) : Libre Baskerville 700 pour le wordmark, Nunito 400 pour la baseline. */
.brand__name { display: inline-block; font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; font-size: 1.75rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
/* Baseline « PATRIMOINE » : Nunito 400, MAJUSCULES espacées, alignée à DROITE sous le wordmark, dorée. */
.brand__name small { display: block; text-align: right; font-family: "Nunito", sans-serif; font-weight: 400; font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); line-height: 1; margin-top: 6px; }
.site-header .brand__name { font-size: 1.6rem; }
.site-header .brand__name small { font-size: 0.46rem; }

.nav { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; justify-content: center; }  /* 32px entre items = Elliman (était --sp-4 = 40) */
/* Chaque item occupe toute la hauteur du header : le dropdown (top:100%) se cale PILE au bas
   du header (plus de chevauchement) et la zone de survol couvre toute la hauteur (comme Elliman). */
.nav > li { display: flex; align-items: center; height: var(--header-h); }
.nav a {
	font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: normal;
	color: var(--ink); padding: 0.5em 0; position: relative;
}
.nav a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
	background: var(--gold); transition: right var(--transition);
}
.nav a:hover::after { right: 0; }
/* Chevron des entrées à sous-menu (façon Elliman) */
.nav__chev { display: inline-block; margin-left: 0.45em; vertical-align: middle; transition: transform var(--transition); }
.has-mega:hover .nav__chev, .has-mega.is-open .nav__chev, .has-dropdown:hover .nav__chev, .has-dropdown:focus-within .nav__chev { transform: rotate(180deg); }

.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
/* Sélecteur de langue Elliman (.lang-switcher) : seule la langue COURANTE est visible,
   suivie d'un chevron or 10x6 ; les autres langues sont dans une liste déroulante.
   12px/400/16.8 majuscules, écart texte-chevron 5px. */
.lang-switcher { position: relative; }
.lang-switcher__current { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 0.75rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.lang-switcher__current svg { flex: 0 0 auto; transition: transform var(--transition); }
.lang-switcher__current svg path { fill: var(--gold-deep); transition: fill var(--transition); }  /* chevron = or accent Bosquet (Elliman : teal accent) */
.lang-switcher[data-open] .lang-switcher__current svg { transform: rotate(180deg); }
.lang-switcher__body { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; margin: 0; padding: 8px; list-style: none; background: none; border: 1px solid var(--ink); }  /* boîte à CONTOUR transparent, 8px sous « FR » = Elliman .lang-switcher__body */
.lang-switcher[data-open] .lang-switcher__body { display: block; }
.lang-switcher__body a { display: block; padding: 4px 0; font-size: 0.75rem; line-height: 1.4; text-transform: uppercase; color: var(--ink); white-space: nowrap; text-align: center; }
.lang-switcher__body a:hover { color: var(--gold-deep); }
.header__search-ico { color: var(--ink); font-size: 1rem; }
.burger { display: none; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; z-index: 2; }
.burger__box { position: relative; display: block; width: 26px; height: 14px; }
.burger__box span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.42s cubic-bezier(0.19,1,0.22,1), top 0.42s cubic-bezier(0.19,1,0.22,1), opacity 0.25s ease; }
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; }
.burger__box span:nth-child(3) { top: 12px; }
.burger__label { font-size: 0.6rem; letter-spacing: normal; text-transform: uppercase; font-weight: 400; transition: opacity 0.25s ease; }
/* Ouverture : les trois barres se transforment en croix, l'étiquette « Menu » disparaît. */
body.menu-open .burger__box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.menu-open .burger__box span:nth-child(2) { opacity: 0; }
body.menu-open .burger__box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
body.menu-open .burger__label { opacity: 0; }

/* Variante transparente au-dessus d'un hero (page d'accueil, non scrollée) */
body.has-hero .site-header:not(.is-scrolled) {
	background: transparent; border-color: transparent;
}
body.has-hero .site-header:not(.is-scrolled) .brand,
body.has-hero .site-header:not(.is-scrolled) .brand__name,
body.has-hero .site-header:not(.is-scrolled) .nav a,
body.has-hero .site-header:not(.is-scrolled) .header__search-ico,
body.has-hero .site-header:not(.is-scrolled) .lang-switcher__current,
body.has-hero .site-header:not(.is-scrolled) .burger { color: #fff; }
/* Sur le hero, le chevron de langue passe BLANC comme le texte (mesuré sur Elliman). */
body.has-hero .site-header:not(.is-scrolled) .lang-switcher__current svg path { fill: #fff; }
/* Boîte de langue ouverte sur le hero : contour + « EN » blancs (contour transparent laisse voir le hero). */
body.has-hero .site-header:not(.is-scrolled) .lang-switcher__body { border-color: rgba(255,255,255,0.6); }
body.has-hero .site-header:not(.is-scrolled) .lang-switcher__body a { color: #fff; }
/* Bouton CTA sur header TRANSPARENT : Elliman le passe en blanc translucide
   (.btn-header : --btn-bg #fff3, bordure transparente, texte blanc), et en blanc PLEIN
   a texte navy au survol. Il restait navy chez Bosquet, identique a l'etat sur fond blanc. */
body.has-hero .site-header:not(.is-scrolled) .site-header__cta {
	background: rgba(255,255,255,0.2); border-color: transparent; color: #fff;
}
body.has-hero .site-header:not(.is-scrolled) .site-header__cta:hover {
	background: #fff; border-color: transparent; color: var(--navy);
}
/* Le balayage or de .btn--primary n'a pas lieu d'etre dans cet etat. */
body.has-hero .site-header:not(.is-scrolled) .site-header__cta::before { display: none; }
body.has-hero .site-header:not(.is-scrolled) .brand__name small { color: var(--gold-light); }  /* « PATRIMOINE » doré sur le header transparent (lisible sur hero sombre) */
/* Les panneaux déroulants (méga-menu / dropdown) restent des surfaces BLANCHES : leurs liens
   doivent rester sombres même quand le header est transparent au-dessus du hero (sinon blanc/blanc). */
body.has-hero .site-header:not(.is-scrolled) .mega a,
body.has-hero .site-header:not(.is-scrolled) .mega__col a,
body.has-hero .site-header:not(.is-scrolled) .dropdown a { color: var(--ink); }
body.has-hero .site-header:not(.is-scrolled) .mega a:hover,
body.has-hero .site-header:not(.is-scrolled) .mega__col a:hover,
body.has-hero .site-header:not(.is-scrolled) .dropdown a:hover { color: var(--gold-deep); }
/* Le bouton de la carte promo est BLANC PLEIN (texte navy) même quand le header est transparent. */
body.has-hero .site-header:not(.is-scrolled) .mega .mega__promo .btn { color: var(--navy); }
body.has-hero .site-header:not(.is-scrolled) .mega .mega__promo-top { color: #fff; }

/* Au survol d'un onglet à méga-menu / dropdown, le header transparent passe en BLANC solide
   (textes sombres) — le panneau déroulant blanc raccorde ainsi au header (façon Elliman). */
body.has-hero .site-header:not(.is-scrolled):has(.has-mega:hover, .has-mega:focus-within, .has-mega.is-open, .has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-open) {
	background: #fff; border-bottom-color: var(--hairline);
}
body.has-hero .site-header:not(.is-scrolled):has(.has-mega:hover, .has-mega:focus-within, .has-mega.is-open, .has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-open) :is(.brand, .brand__name, .nav a, .lang-switcher__current, .burger, .header__search-ico) {
	color: var(--ink);
}
/* Header redevenu solide (mega ouvert) : chevron de langue de nouveau en or, pas blanc. */
body.has-hero .site-header:not(.is-scrolled):has(.has-mega:hover, .has-mega:focus-within, .has-mega.is-open, .has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-open) .lang-switcher__current svg path {
	fill: var(--gold-deep);
}
/* … et la BOÎTE de langue ouverte doit aussi s'inverser (bordure + « EN » sombres), sinon blanc-sur-blanc invisible. */
body.has-hero .site-header:not(.is-scrolled):has(.has-mega:hover, .has-mega:focus-within, .has-mega.is-open, .has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-open) .lang-switcher__body { border-color: var(--ink); }
body.has-hero .site-header:not(.is-scrolled):has(.has-mega:hover, .has-mega:focus-within, .has-mega.is-open, .has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-open) .lang-switcher__body a { color: var(--ink); }
body.has-hero .site-header:not(.is-scrolled):has(.has-mega:hover, .has-mega:focus-within, .has-mega.is-open, .has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-open) .brand__name small {
	color: var(--gold-deep);  /* header redevenu blanc (mega ouvert) → « PATRIMOINE » en or foncé */
}

/* Menu mobile ouvert : le MÊME en-tête reste au-dessus du conteneur, en blanc (logo B + croix
   + langue lisibles), quel que soit l'état transparent/hero → aucun header différent. */
body.menu-open .site-header { position: fixed !important; top: 0; left: 0; right: 0; background: #fff !important; border-bottom-color: var(--hairline) !important; }
body.menu-open .site-header .brand,
body.menu-open .site-header .brand__name,
body.menu-open .site-header .burger,
body.menu-open .site-header .lang-switcher__current { color: var(--ink) !important; }
/* Menu mobile ouvert = header blanc : chevron de langue en or (jamais blanc, sinon invisible). */
body.menu-open .site-header .lang-switcher__current svg path { fill: var(--gold-deep) !important; }
/* Idem : la boîte de langue ouverte dans le menu mobile (header blanc) doit être sombre, pas blanc-sur-blanc. */
body.menu-open .site-header .lang-switcher__body { border-color: var(--ink) !important; }
body.menu-open .site-header .lang-switcher__body a { color: var(--ink) !important; }
body.menu-open .site-header .brand__name small { color: var(--gold-deep) !important; }

/* Décalage du contenu sous le header fixe (sauf pages à hero plein écran) */
body:not(.has-hero) .site-content { padding-top: calc(var(--header-h) + 41px); } /* contenu a 122px du haut, comme Elliman (/acheter/, fiches) */

/* =========================================================================
   7. HERO + MOTEUR DE RECHERCHE (brief §7.2)
   ========================================================================= */
.hero {
	position: relative; min-height: 100vh; min-height: 100dvh; /* hero plein écran, comme Elliman */
	display: flex; flex-direction: column; align-items: center;
	text-align: center; color: #fff; overflow: hidden;
	/* La carte de recherche ne colle pas au bas : une bande d'image reste visible dessous (comme Elliman). */
	/* 6.67vh = 60px a 900px de haut : la bande d'image visible sous la carte de recherche
	   chez Elliman (moteur bas a 840, hero 900). 8vh donnait 72px. */
	padding-bottom: clamp(2.5rem, 6.67vh, 6rem);
}
/* Le titre remplit et se centre dans l'espace au-dessus de la carte ; la carte se pose vers le bas. */
.hero__inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,16,36,0.35), rgba(13,16,36,0.55)); }
.hero__inner { position: relative; z-index: 2; padding: var(--header-h) var(--sp-3) 0; max-width: 1100px; }
.hero h1 { color: #fff; margin: 0.25em auto; max-width: 22ch; line-height: 1.2; font-weight: 300; font-size: clamp(2.25rem, 3.6vw, 2.637rem); }  /* max 42.19px = hero__title Elliman (etait 45) */
.hero p.hero__sub { max-width: 44ch; margin: var(--sp-2) auto 0; color: rgba(255,255,255,0.85); font-size: 1.05rem; }

/* Carte de recherche flottante — alignée sur le conteneur du header (même boîte que
   .site-header__inner) : le bloc blanc démarre au logo et finit au bouton contact. */
.search-card {
	position: relative; z-index: 2;
	width: 100%; max-width: var(--wrap); margin: var(--sp-4) auto 0; padding: 0 var(--sp-4);
	color: var(--ink);
}
/* Onglets sur le hero — valeurs exactes d'Elliman (.search-engine__tabs__trigger) :
   inactif = blanc 10 % + flou 2px + texte blanc ; actif = blanc opaque + texte sombre.
   Hauteur 42px (--action-height), 12px, 400, majuscules. */
.search-tabs { display: flex; }
.search-tabs button {
	flex: 1; position: relative; height: 42px; padding: 0 1em; border: 0; cursor: pointer;
	background: rgba(255,255,255,0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
	font-family: var(--font-sans); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: normal;
	color: #fff; transition: all 0.3s ease;
}
/* Séparateur vertical entre onglets (façon Elliman li::after). */
.search-tabs button + button::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: rgba(255,255,255,0.3); }
/* Onglet actif = blanc opaque (raccord avec le formulaire), sans flou ni séparateur adjacent. */
.search-tabs button[aria-selected="true"] { color: var(--navy); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.search-tabs button[aria-selected="true"]::before,
.search-tabs button[aria-selected="true"] + button::before { display: none; }
/* Desktop : onglets alignés à GAUCHE, largeur ~430px (ul.search-engine__tabs d'Elliman),
   et non pleine largeur — la partie droite laisse voir le hero, le formulaire blanc est dessous. */
@media (min-width: 901px) {
	.search-tabs { justify-content: flex-start; }
	/* Padding 48px = --space-md-alt d'Elliman → 3 onglets ≈ 430px alignés à gauche. */
	.search-tabs button { flex: 0 0 auto; padding: 0 48px; }
}
/* Panneau du formulaire (= .search-engine__forms d'Elliman) : fond blanc, padding 40px 60px
   (--space-md --space-lg), champs alignés en bas (les inputs et le bouton se calent ensemble). */
.search-fields { display: grid; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; gap: var(--sp-3); background: #fff; box-shadow: 0 30px 70px -30px rgba(13,16,36,0.5); padding: 40px 60px; }
.search-fields .field { position: relative; padding: 0; text-align: left; }
/* Filet vertical fin entre les champs (= .search-engine-form__field::after d'Elliman) :
   au milieu du gap, calé sur la hauteur de l'input (50px). Pas de filet après le dernier
   champ (juste avant le bouton). */
.search-fields .field:not(:last-of-type)::after {
	content: ""; position: absolute; right: calc(var(--sp-3) / -2); bottom: 0;
	width: 1px; height: 50px; background: var(--hairline);
}
.search-fields .field label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: normal; color: #000; margin-bottom: 8px; }
/* Champs = boîtes gris clair (#f7f7f7), hauteur 50px, angles droits, sans liseré (façon Elliman --input-*). */
.search-fields .field select,
.search-fields .field input {
	width: 100%; height: 42px; border: 1px solid transparent; background: #fbfbf9; border-radius: 0;  /* = form-control Elliman : 42px, fond 251,251,249 */
	padding: 0 16px; font-family: var(--font-sans); font-size: 0.75rem; color: #000;
	outline: none; transition: border-color var(--transition);
}
.search-fields .field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239f9da9' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.95em center; }
.search-fields .field select:focus, .search-fields .field input:focus { border-color: var(--gold); }
.search-fields .field input::placeholder { color: #9f9da9; }
/* Champ « Adresse de votre bien » (estimation / VENTE) : la boîte grise englobe l'épingle + la saisie. */
.field--address .field__with-icon { display: flex; align-items: center; gap: 0.55em; border: 1px solid transparent; background: #fbfbf9; border-radius: 0; height: 42px; padding: 0 16px; transition: border-color var(--transition); }
.field--address .field__with-icon:focus-within { border-color: var(--gold); }
.field--address .field__with-icon .ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gold-deep); }
.field--address .field__with-icon input { width: 100%; height: auto; border: 0; padding: 0; background: transparent; }
/* Panneau VENTE : champ adresse + bouton ESTIMER alignés en bas (façon Elliman form-vente__row :
   align-items: flex-end) — même sur mobile où le reste des formulaires s'empile/étire. */
[data-panel="vente"] .search-fields { align-items: end; }
[data-panel="vente"] .search-submit { width: auto; }
.search-fields .search-submit { height: 50px; border: 0; background: var(--navy); color: #fff; padding: 0 2.2em; font-size: 0.75rem; font-weight: 300; text-transform: uppercase; letter-spacing: normal; transition: background var(--transition); }
.search-fields .search-submit:hover { background: var(--navy-deep); }
.search-panel { display: none; }
.search-panel.is-active { display: block; }

/* =========================================================================
   8. CARROUSELS (destinations §7.3 + biens à la une §7.4)
   ========================================================================= */
.carousel { position: relative; }
.carousel__track {
	display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding-bottom: var(--sp-2); scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__nav { display: flex; gap: 0.5em; justify-content: center; margin-top: var(--sp-3); }
/* Flèches placées sous le titre, au-dessus de la piste (façon Elliman .push-biens / .swiper-arrows). */
.carousel__nav--top { margin-top: 0; margin-bottom: var(--sp-4); }
/* Elliman .swiper-arrows.--push : absolues en haut à droite, sur la ligne du titre.
   Mesuré sur elliman.fr : 44x44, gap 8px, bord droit aligné sur le wrap. */
.carousel__nav--corner {
	position: absolute; top: 0; right: 0; z-index: 2;
	margin-top: 0; gap: 8px;
}
/* La piste d'Elliman fait exactement la hauteur des cartes : pas de reserve de scrollbar
   (elle est deja masquee par scrollbar-width: none). */
.carousel--related .carousel__track { padding-bottom: 0; }
/* Flèches HOMOGÈNES partout (= .swiper-arrows d'Elliman) : carrées, bordure navy 1px, angles
   droits, fond transparent — même design que .edito__arrow (accompagnement / témoignages).
   TAILLE : 44px ici, ramenée à 38px sous 900px par la règle commune plus bas. C'est le palier
   d'Elliman, relevé au DOM sur leurs 3 composants aux deux largeurs (44 desktop / 38 mobile).
   ⚠️ Ce commentaire annonçait « carrées 38px » alors que la règle en écrivait 44 : le palier
   mobile manquait tout simplement. Corrigé le 2026-08-05, ne pas « rétablir » le 38 ici. */
.carousel__btn {
	width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--navy);
	background: transparent; color: var(--navy); font-size: 1rem; display: grid; place-items: center;
	cursor: pointer; transition: background var(--transition), color var(--transition);
}
.carousel__btn:hover { background: var(--navy); color: #fff; }
.carousel__btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Carte destination (image verticale, label serif italique) */
/* Carte destination — dimensions calées sur Elliman (.marquee__slot__item : 380×445, ratio 0.854). */
.card-destination {
	position: relative; flex: 0 0 auto; width: 380px; aspect-ratio: 380 / 445;
	scroll-snap-align: start; overflow: hidden;
}
.card-destination img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition); }
.card-destination:hover img { transform: scale(1.06); }
/* Dégradé transparent→noir vers le bas (Elliman : linear-gradient(180deg,#0000001a 30%,#000c)). */
.card-destination::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.8)); }
.card-destination__label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; color: #fff; padding: 0 24px 40px; }
.card-destination__label .name { font-family: var(--font-serif); font-style: italic; font-size: 24px; font-weight: 300; line-height: 1.2; }
.card-destination__label .count { margin-top: 0.5em; font-size: 0.62rem; text-transform: uppercase; letter-spacing: normal; color: rgba(255,255,255,0.85); }

/* =========================================================================
   9. CARTE BIEN (adaptative — brief §7.4) — claire
   ========================================================================= */
.tabs-inline { display: flex; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-4); }
.tabs-inline button {
	background: none; border: 0; font-family: var(--font-sans);
	font-size: 0.875rem; text-transform: none; letter-spacing: normal; color: var(--muted);
	padding-bottom: 0.5em; border-bottom: 1px solid transparent;
}
.tabs-inline button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold); }

/* Section 3 — pas de padding vertical (annule .section), marge basse 120px (écart Elliman). */
.push-biens-section { padding: 0; margin-bottom: 120px; }
/* Section 3 — heading push-biens (Elliman) : titre à gauche ; onglets + flèches à droite. */
.push-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.push-head__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0; }
.push-head__controls { display: flex; align-items: center; gap: var(--sp-4); }
.push-head .tabs-inline { margin-bottom: 0; }
.push-nav { display: flex; gap: 0.5em; }
/* Le carrousel déborde jusqu'au bord droit du viewport (la carte suivante dépasse, façon Elliman). */
.push-biens-section .carousel { margin-right: calc((100% - 100vw) / 2); }
.push-biens-section .carousel__track { padding-right: var(--sp-4); }

/* Section 4 — image + carte blanche superposée (Elliman overlayed-content-image) :
   grande image (~2:1), carte blanche remontée (-124px), 2 colonnes (titre XL / descr + CTA). */
.overlay-sell { max-width: var(--wrap); margin: 0 auto 120px; padding: 0 var(--sp-4); }
.overlay-sell__image img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.overlay-sell__card { position: relative; z-index: 2; background: #fff; max-width: 87%; margin: -124px auto 0; padding: 70px 60px 0; display: flex; gap: var(--sp-5); }  /* Elliman : padding-bottom 0 */
.overlay-sell__col-title { flex: 0 0 41.6667%; }
.overlay-sell__title { font-family: var(--font-display); font-weight: 300; font-size: 2.93rem; line-height: 1.2; color: var(--navy); margin: 0; }
/* L'accent italique ne doit jamais se couper en deux lignes (« sur / mesure »). */
.overlay-sell__title .serif-italic { white-space: nowrap; }
.overlay-sell__col-descr { flex: 1; }
.overlay-sell__col-descr p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0 0 20px; }
/* Sorties du bloc : même idiome que .link-underline (souligné-or au repos) —
   elles étaient nues en desktop et ne se signalaient comme liens qu'au survol.
   text-decoration plutôt que border-bottom : sur mobile le lien devient un bloc
   plein largeur (cible 44px) et un border soulignerait toute la colonne. */
.overlay-sell__cta { display: inline-block; font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: normal; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.overlay-sell__cta:hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }

.grid-biens { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* La racine n'a NI fond NI bordure chez Elliman : c'est le __body qui porte le cadre,
   et sur TROIS COTES seulement (droite/bas/gauche, jamais sous la photo). */
.card-bien { display: flex; flex-direction: column; flex: 0 0 auto; border: 0; background: transparent; }
/* Pas de changement de bordure au survol : verifie sur elliman.fr, la carte n'a QUE
   le zoom image, l'apparition des fleches et le titre en or. La bordure du corps
   reste #dedede en permanence. (Regle .card-bien:hover border-color navy retiree.) */
.card-bien--carousel { width: 406px; scroll-snap-align: start; }
.card-bien__media { position: relative; aspect-ratio: 406 / 292; overflow: hidden; background: #f7f7f7; }
/* Cartes du carrousel (accueil « à la une ») : image au ratio d'Elliman (406×292 ≈ 1.389). */
.card-bien--carousel .card-bien__media { aspect-ratio: 406 / 292; }
.card-bien__media-link { display: block; height: 100%; }
/* Mini-carrousel photo (Elliman .slider-miniatures) : piste en translation, une vignette par vue. */
.card-bien__slider { display: flex; height: 100%; transition: transform 0.625s cubic-bezier(0.19, 1, 0.22, 1); }
.card-bien__slide { flex: 0 0 100%; width: 100%; height: 100%; }
/* Flèches Elliman : 32x32, à 20px des bords, centrées, opacité 0.4 au repos -> 1 au survol
   DE LA FLÈCHE (pas de la carte), 0.2 + inertes en butée. */
.card-bien__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 32px; height: 32px; display: grid; place-items: center;
	padding: 0; border: 1px solid #fff; border-radius: 0; background: #fff;
	color: var(--navy); cursor: pointer; opacity: 0.4;
	transition: opacity 0.625s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s var(--transition);
}
.card-bien__arrow:hover { opacity: 1; color: var(--gold-deep); }
.card-bien__arrow[disabled] { opacity: 0.2; pointer-events: none; }
.card-bien__arrow.--prev { left: 20px; }
.card-bien__arrow.--next { right: 20px; }
.card-bien__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition); }
/* Voile sombre d'Elliman (div.card-bien__overlay, rgba(0,0,0,.15)) : uniformise les photos.
   Sous le badge et la ville, qui sont en z-index 2. */
.card-bien__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.15); pointer-events: none; z-index: 1; }
.card-bien__badge { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 2; }
/* Elliman .card-bien__localisation : dans le CORPS, margin -40px auto 8px — la pastille remonte
   donc de 16px au-dessus de la limite image/corps et déborde de 16px dessous. min-width 150px,
   hauteur 32, padding 0 16. (Un positionnement absolu dans l'image ne peut pas déborder : le
   média est en overflow hidden.) */
.card-bien__city { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 150px; height: 32px; margin: -40px auto 8px; background: var(--cream); color: var(--navy); padding: 0 16px; font-size: 0.75rem; line-height: 1.4; font-weight: 500; letter-spacing: normal; text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Cadre Elliman : fond blanc + 1px #dedede a droite, en bas et a gauche. PAS de bordure
   haute — la photo se pose directement dessus. */
.card-bien__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 24px; font-size: 0.875rem; line-height: 1.4; text-align: center; position: relative; background: #fff; border: 1px solid #dedede; border-top: 0; transition: border-color 0.3s var(--transition); }
.card-bien__ref { display: block; text-align: right; font-size: 0.75rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: #9f9da9; margin-bottom: 0; }
.card-bien__title { font-family: var(--font-sans); font-weight: 500; font-size: 1rem; letter-spacing: normal; text-transform: uppercase; color: var(--ink); margin: 12px 0 0; line-height: 1.4; min-height: 2.7em; }
.card-bien__title a { color: inherit; transition: color 0.3s var(--transition); }
/* Effets de survol UNIQUEMENT sur les appareils a pointeur reel : sur tactile, sans ce
   garde, taper une fleche du carrousel laissait la photo zoomee/le titre colore (sticky hover). */
@media (hover: hover) {
	.card-bien:hover .card-bien__media img { transform: scale(1.04); }
	.card-bien__title a:hover { color: var(--gold-deep); }  /* or Bosquet (Elliman utilise son teal) */
}
.card-bien__price { font-family: var(--font-display); font-size: 1.172rem; line-height: 1.2; font-weight: 500; color: var(--ink); margin: auto 0 0; padding-top: 16px; }
.card-bien__price small { font-size: 0.8rem; color: var(--muted); font-family: var(--font-sans); font-weight: 400; }
.card-bien__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
/* minuscules = .badge --very-light-beige d'Elliman (rend « commerce », pas « Commerce »). */
.card-bien__chips li { border: 0; background: var(--cream); padding: 6px 16px; border-radius: 0; font-size: 0.75rem; line-height: 1.4; text-transform: lowercase; color: var(--ink); white-space: nowrap; }
.ico { flex: 0 0 auto; color: var(--gold-deep); }
.quick-specs .ico { margin-right: 0.1em; width: 28px; height: 19px; color: var(--navy); }

/* Elliman : le badge n'a NI bordure NI radius, quelle que soit sa variante (blanc sur les
   cartes presse, creme sur les puces de specs, navy sur la page article). Padding 6/16,
   interligne 1.4. La bordure or et le radius etaient des ajouts Bosquet. */
.badge {
	display: inline-block; padding: 6px 16px; font-size: 0.75rem; line-height: 1.4; font-weight: 400;
	text-transform: uppercase; letter-spacing: normal; background: #fff; color: var(--navy);
	border: 0; border-radius: 0;
}

/* =========================================================================
   10. ARCHIVE (résultats — brief §7.5) — fond blanc
   ========================================================================= */
.page-hero { padding: 60px var(--sp-3) 80px; text-align: center; }  /* = .intro-simple Elliman : fond blanc, 60/80 */

/* Page 404 — façon Elliman : « 404 » or 100px/700 centré, message, bouton retour accueil. */
.page-404 { text-align: center; padding: 80px var(--sp-3) 120px; }
.page-404__title { font-family: var(--font-display); font-size: 6.25rem; font-weight: 700; line-height: 1; letter-spacing: normal; color: var(--gold-deep); margin: 0; }
.page-404__content { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin: var(--sp-3) 0 var(--sp-4); }

/* Article isolé (single post) — colonne de lecture centrée, cohérent avec l'intro-simple. */
/* ------------------------------------------------------------------------
   ARTICLE ISOLE — calque sur elliman.fr/les-alpes-en-ete/
   Fil d'ariane 41px · en-tete creme 576 en deux colonnes de 720 (image a gauche,
   contenu centre verticalement a droite) · corps sur 823px centres.
   ------------------------------------------------------------------------ */
.article-crumb { padding: 12px var(--sp-4); font-size: 12px; line-height: 1.4; color: var(--muted); }
.article-crumb a { color: var(--muted); }
.article-crumb a:hover { color: var(--navy); }
.article-crumb .sep { margin: 0 0.4em; color: var(--muted); }
.article-crumb__current { color: var(--navy); }

.article-hero { background: var(--cream); margin-bottom: 60px; }
.article-hero__row { display: grid; grid-template-columns: 1fr 1fr; min-height: 576px; }
.article-hero__media { background: #f7f7f7; overflow: hidden; }
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* padding 0 95 0 80 chez Elliman : la colonne de texte fait alors 545px. */
.article-hero__col { display: flex; align-items: center; padding: 0 95px 0 80px; }
.article-hero__content { width: 100%; }
.article-hero__infos { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
/* Badge NAVY plein a texte blanc (et non le badge creme des cartes). */
.article-hero__badge { background: var(--navy); color: #fff; padding: 6px 16px; border-radius: 0; font-size: 0.75rem; line-height: 1.4; text-transform: none; letter-spacing: normal; }
.article-hero__date { font-size: 1rem; line-height: 1.4; color: #9f9da9; }
.article-hero__title { font-family: var(--font-display); font-size: 2.637rem; line-height: 1.2; font-weight: 300; color: var(--navy); text-align: left; margin: 0; }

.article-body { margin-bottom: 80px; }
/* 823px de texte, centres dans la page (Elliman : .col-lg-9 a 853 moins 2x15 de padding). */
/* 903 = 823 de texte + 2x40 de padding : .prose est plafonne a 680 par defaut, il faut
   donc le deplafonner ici pour retrouver la colonne de 823 d'Elliman. */
.article-body__col { max-width: 903px; margin: 0 auto; padding: 0 var(--sp-4); }
.article-body .prose { max-width: none; color: var(--ink); }
.article-body .prose p { font-size: 0.875rem; line-height: 1.4; margin: 0 0 24px; }
.article-body .prose h2 { font-family: var(--font-display); font-size: 1.758rem; line-height: 1.2; font-weight: 300; color: var(--navy); margin: 40px 0 16px; }
.article-body .prose h2:first-child { margin-top: 0; }
.article-body__back { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 0.75rem; text-transform: uppercase; letter-spacing: normal; }

@media (max-width: 900px) {
	/* Fil d'ariane article masque sur mobile : Elliman l'affiche en desktop (y75) mais le
	   cache sur mobile, comme sur les fiches bien (.breadcrumb display:none). */
	.article-crumb { display: none; }
	.article-hero__row { grid-template-columns: 1fr; min-height: 0; }
	.article-hero__media { aspect-ratio: 3 / 2; }
	/* Sur mobile, le TEXTE passe avant l'image (comme Elliman : titre en haut, image dessous),
	   alors qu'en desktop l'image est a gauche (1er enfant du DOM). */
	.article-hero__col { padding: var(--sp-4) var(--sp-3); order: -1; }
	.article-hero__title { font-size: 2.25rem; }  /* 36px = titre article mobile d'Elliman (etait 28px) */
	.article-hero { margin-bottom: 40px; }
	.article-body { margin-bottom: 60px; }
}
.page-hero h1 { font-size: clamp(2.25rem, 4vw, 2.637rem); font-weight: 300; line-height: 1.2; margin: 0; }
.page-hero p { max-width: 640px; margin: var(--sp-2) auto 0; color: var(--muted); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-5); }
.toolbar__count { font-size: 0.875rem; letter-spacing: normal; text-transform: none; color: #9f9da9; }
label.toolbar__count { font-size: 0.75rem; line-height: 1.4; text-transform: uppercase; color: var(--ink); }
/* Relevé elliman.fr/acheter 2026-08-31 : le libellé de tri s'écrit « TRI : » — en CAPITALES,
   suivi d'un deux-points, et en encre (le COMPTEUR, lui, reste gris 14px). Bosquet écrivait
   « Trier » en gris minuscule : deux écarts d'un coup, la casse et la couleur. */
.toolbar select { border: 0; height: 42px;  /* Elliman : select de tri sans bordure, fond blanc */ padding: 0 16px; font-family: var(--font-sans); font-size: 0.75rem; text-transform: none; letter-spacing: normal; color: #9f9da9; background: #fff; }

.pagination { display: flex; gap: 16px; justify-content: center; margin-top: var(--sp-5); }
/* Le <button> est necessaire pour une pagination cliquable au clavier : on neutralise
   les styles de bouton natifs pour qu'il se rende comme les <a> de pagination. */
.pagination .page-numbers { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0; background: none; font-family: inherit; cursor: pointer; border: 1px solid #dedede; font-size: 0.875rem; color: var(--navy); }
.pagination .page-numbers.current { background: transparent; color: var(--navy); border-color: var(--gold-deep); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--navy); color: var(--navy); }

/* =========================================================================
   11. FICHE BIEN (single — brief §7.6) — fond blanc
   ========================================================================= */
/* Galerie fiche (section) : UNE grande image (ratio 823/549 façon Elliman) + bouton texte « Voir les N photos ». */
.gallery-preview { margin: var(--sp-2) 0 0; aspect-ratio: 823 / 463; overflow: hidden; cursor: pointer; }
.gallery-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition); }
.gallery-preview:hover img { transform: scale(1.04); }
.gallery-more { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--sp-3); background: none; border: 0; padding: 0; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: normal; text-transform: uppercase; color: var(--navy); cursor: pointer; transition: color var(--transition); }
.gallery-more:hover { color: var(--gold-deep); }
.gallery-more svg { width: 20px; height: auto; flex: none; }
.single-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; height: 76vh; padding-top: var(--header-h); }
.single-gallery figure { margin: 0; overflow: hidden; position: relative; }
.single-gallery figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition); }
.single-gallery figure:hover img { transform: scale(1.04); }
.single-gallery figure:first-child { grid-row: span 2; grid-column: 1; }
.single-gallery__more { position: absolute; right: var(--sp-2); bottom: var(--sp-2); background: rgba(13,16,36,0.75); color: #fff; padding: 0.6em 1.2em; font-size: 0.7rem; letter-spacing: normal; text-transform: uppercase; }

.single-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-5) 0 var(--sp-3); border-bottom: 1px solid var(--hairline); }
.single-head .eyebrow { margin-bottom: 0.6em; }
.single-head__price { font-family: var(--font-display); font-size: 1.758rem; font-weight: 300; color: var(--navy); }
.single-head__price small { font-size: 1rem; color: var(--muted); font-family: var(--font-sans); }

.spec-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); }
.spec-row .spec dt { font-size: 0.64rem; letter-spacing: normal; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.4em; }
.spec-row .spec dd { margin: 0; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }

.single-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--sp-6); align-items: start; padding: var(--sp-5) 0; }
.prose { max-width: 680px; line-height: 1.9; color: #3a3d4f; font-size: 1.02rem; }
.prose p { margin: 0 0 1.2em; }
/* Rendu du contenu riche des pages génériques (Mentions légales, Honoraires, Cookies) dans .prose. */
.prose h2 { font-family: var(--font-display); font-size: 1.758rem; line-height: 1.2; font-weight: 300; color: var(--navy); margin: 44px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: normal; color: var(--navy); margin: 28px 0 10px; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose li { margin-bottom: 0.45em; }
.prose a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--navy); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 0.5em 0 1.6em; font-size: 0.95rem; line-height: 1.5; }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.prose thead th { border-bottom: 1px solid var(--ink); font-weight: 600; color: var(--navy); }
.prose .legal-lead { font-size: 1.1rem; color: var(--muted); margin-bottom: var(--sp-4); }
.prose .legal-note { display: block; margin: 0 0 var(--sp-4); padding: 16px 20px; background: var(--cream); border-left: 3px solid var(--gold); font-size: 0.9rem; line-height: 1.6; color: var(--ink); }
.prose .legal-todo, .expertise-todo .legal-todo { background: rgba(212,184,136,0.24); padding: 0.04em 0.35em; border-radius: 2px; font-style: normal; white-space: nowrap; }
/* Marqueur des données que l'agence doit encore fournir, sous le bloc services.
   ⚠️ `white-space: nowrap` hérité de .legal-todo élargissait la page de 120 à 165px
   sur mobile (les libellés d'expertise sont bien plus longs que ceux des pages
   légales, pour lesquels la règle a été écrite) : on le neutralise ici. */
.expertise-todo { margin: var(--sp-4) 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--muted); }
.expertise-todo .legal-todo { white-space: normal; }
.prose .legal-updated { display: block; margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); font-size: 0.8rem; color: var(--muted); }

.contact-card { position: sticky; top: var(--sp-2); border: 1px solid var(--hairline); padding: var(--sp-4); background: var(--paper-alt); }
.contact-card h3 { margin-top: 0.3em; }
.contact-card form { display: grid; gap: 0.7em; margin-top: var(--sp-2); }
.contact-card input, .contact-card textarea { padding: 0.9em; border: 1px solid var(--hairline); border-radius: var(--radius); font-family: var(--font-sans); font-size: 0.9rem; background: #fff; }
.contact-card input:focus, .contact-card textarea:focus { outline: none; border-color: var(--gold); }

/* Formulaire style éditorial (champs soulignés, labels capitales, en-têtes serif) */
.lead-form__title { font-family: var(--font-serif); font-style: italic; font-size: 1.45rem; color: var(--ink); margin: var(--sp-4) 0 var(--sp-2); }
.lead-form__title:first-child { margin-top: 0; }
.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.lead-form__field { display: flex; flex-direction: column; }
.lead-form__field--full { grid-column: 1 / -1; }
.lead-form .lbl { font-size: 0.75rem; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.lead-form .lbl .req { color: #b23b3b; margin-left: 0.15em; }
/* Champs Elliman : boite PLEINE creme, sans bordure, 50px de haut, texte 12px
   (et non un champ souligne transparent). Mesure : input.large h50 fs12, fond #fbfbf9. */
.lead-form input:not([type="checkbox"]):not([type="radio"]), .lead-form textarea, .lead-form select { border: 0; background: var(--cream); padding: 0 16px; height: 50px; font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.4; color: var(--ink); border-radius: 0; }
.lead-form textarea { height: auto; min-height: 120px; padding: 16px; resize: vertical; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--muted); }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline: none; border-bottom-color: var(--gold-deep); }
.lead-form textarea { resize: vertical; min-height: 4em; }
.lead-form__checks { display: flex; flex-wrap: wrap; gap: 1em 1.6em; align-items: center; margin-top: 0.6em; }
.lead-form__checks label, .lead-form__consent label { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.875rem; line-height: 1.4; color: var(--ink); }
.lead-form__consent { display: grid; gap: 0.5em; margin-top: var(--sp-3); }
.lead-form__consent label { font-size: 0.82rem; color: var(--muted); }
/* Choix inline Elliman : 14px, interligne 1.4 (le 1.7 du body donnait 21.2px). */
/* Contrôles natifs : sans `accent-color` ils sortent en bleu système (rgb(0,117,255))
   au milieu d'un formulaire navy/or. Même règle que .facet__opts. */
.lead-form input[type="radio"], .lead-form input[type="checkbox"] { accent-color: var(--navy); }
.lead-form__pref { font-size: 0.875rem; line-height: 1.4; color: var(--muted); margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; align-items: center; }
/* Champ « Joindre un fichier » (CV) : input masqué + bouton bordé + nom du fichier. */
.lead-form__file { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; flex-wrap: wrap; }
.lead-form__file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.lead-form__file-btn { display: inline-flex; align-items: center; border: 1px solid var(--ink); padding: 10px 24px; font-size: 0.75rem; letter-spacing: normal; text-transform: uppercase; color: var(--ink); transition: color var(--transition), border-color var(--transition); white-space: nowrap; }
.lead-form__file:hover .lead-form__file-btn { color: var(--gold-deep); border-color: var(--gold-deep); }
.lead-form__file-name { font-size: 0.82rem; color: var(--muted); }
.lead-form__file-hint { display: block; margin-top: 0.6em; font-size: 0.72rem; color: var(--muted); }
/* Bouton d'envoi = .btn --dark-blue d'Elliman : navy PLEIN, texte blanc 12px/300 majuscules,
   39px de haut. C'etait un lien souligne, incoherent avec les champs en boites pleines. */
/* Bouton d'envoi = style texte + soulignement facon Elliman (.link --dark-blue : texte navy,
   fond transparent, uppercase, souligne, aligne a gauche), pas un bouton plein. L'underline
   est en OR (accent Bosquet, comme ses autres liens .link-underline). Desktop ET mobile. */
.lead-form__submit { display: inline-flex; align-items: center; align-self: flex-start; background: none; border: 0; border-bottom: 1px solid var(--gold); padding: 0 0 4px; margin-top: var(--sp-4); font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--navy); border-radius: 0; cursor: pointer; transition: color var(--transition); }
.lead-form__submit:hover { color: var(--gold-deep); }
@media (max-width: 600px) { .lead-form__grid { grid-template-columns: 1fr; } }

.attr-list { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.attr-list li { font-size: 0.78rem; color: var(--ink); border: 1px solid var(--hairline); padding: 0.5em 1em; border-radius: var(--radius); }

/* =========================================================================
   12. FOOTER — SOMBRE (navy), multi-colonnes (comme Elliman)
   ========================================================================= */
/* Pied de page CENTRÉ, calqué Elliman (vérifié sur elliman.fr, vw1280) :
   newsletter blanche centrée (960, cx640) → logo centré → 2 colonnes centrées
   (Nos métiers cx492 / Le groupe cx802, bloc centré) → filet → réseaux centrés → légal centré. */
/* padding-bas 0 en desktop : Elliman termine sur la barre legale. Le padding-bas mobile est
   CONSERVE : il degage le bouton flottant .filters-fab des listings. */
.site-footer { background: var(--navy-darker); color: rgba(255,255,255,0.66); padding: 80px 0; font-size: 0.86rem; text-align: center; }  /* 80px bas = respiration Elliman sous la rangée légale (footer__bottom pad-bottom 80) */
.site-footer a { color: #878593; }
.site-footer a:hover { color: var(--gold); }
/* Carte newsletter blanche CENTRÉE (= Elliman .newsletter, 960 large, cx640). Interieur en 2 colonnes (titre / formulaire), aligné à gauche. */
.footer-news { background: #fff; color: var(--navy); max-width: 960px; margin: 0 auto 80px; padding: 60px 40px; display: grid; grid-template-columns: 230px 1fr; gap: var(--sp-5); text-align: left; align-items: center; }
.footer-news__title h2 { font-family: var(--font-display); font-weight: 300; font-size: 1.758rem; line-height: 1.2; color: var(--navy); margin: 0; }
.footer-news__form p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0 0 0.5rem; }  /* 8px = Elliman (était 16) */
.footer-news .newsletter input { font-size: 0.75rem; }  /* 12px = Elliman (surcharge le .newsletter input global 0.9rem) */
.footer-news .newsletter { margin: 0; max-width: none; border-bottom-color: #9f9da9; }
.footer-news .newsletter button { color: var(--navy); }
/* Consentement newsletter = ligne texte + lien souligné (= Elliman « En m'inscrivant, j'accepte la … »), PAS de case à cocher. */
/* Spécificité (0,2,1) pour battre .footer-news__form p (0,1,1) qui l'écrasait → 12px + gris muted comme Elliman (rgb 159,157,169), lien inclus. */
.footer-news__form p.footer-news__rgpd { display: block; margin: 0.75em 0 0; font-size: 0.75rem; line-height: 1.4; color: #9f9da9; }
.footer-news__rgpd a { color: #9f9da9; text-decoration: underline; text-underline-offset: 2px; }
.footer-news__rgpd a:hover { color: var(--gold-deep); }
/* Logo CENTRÉ sous la newsletter (= logo Douglas Elliman centré). */
.footer-brand { justify-content: center; margin-bottom: 70px; }  /* = gap logo->colonnes Elliman (était 64) */
.footer-brand .brand__name { color: #fff; }
/* « PATRIMOINE » en or CLAIR sous le footer sombre : le `--gold-deep` hérité (#b8995f)
   donne 6:1 sur le navy foncé, le clair monte à ~11:1 — à 8px, ça change tout. */
.footer-brand .brand__name small { color: var(--gold-light); }
/* Deux colonnes CENTRÉES (bloc centré, intitulés blancs, liens gris). */
.footer-cols { display: flex; justify-content: center; gap: clamp(2.5rem, 14vw, 11rem); text-align: left; margin: 0 auto var(--sp-5); }  /* gouttière ~176px = écart mesuré chez Elliman (177) */
.footer-cols h4 { color: #fff; font-size: 1rem; line-height: 1.4; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: normal; font-weight: 400; margin-bottom: 16px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 8px; font-size: 0.875rem; line-height: 20px; }  /* lh 20 (stop fuite body 1.7) + mb 8 = pas de ligne 28 comme Elliman */
/* Réseaux CENTRÉS après un filet pleine largeur (= Elliman footer__bottom) :
   glyphes SVG NUS (blancs, sans cercle ni bordure), 21px de haut, or au survol. */
.footer-social { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); }  /* gap 16px = Elliman (centre-à-centre ~35) */
.footer-social a { display: inline-flex; color: #fff; transition: color 0.3s var(--transition); }
.footer-social a svg { width: auto; height: 21px; fill: currentColor; display: block; }
.footer-social a:hover { color: var(--gold); }
/* Liens légaux CENTRÉS, copyright sur sa propre ligne. */
.footer-legal { margin-top: 2rem; font-size: 0.875rem; color: #878593; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }  /* 14px, gris #878593, gap 32px = Elliman */
.footer-legal a { color: #878593; }
@media (max-width: 900px) {
	/* Carte newsletter empilée, padding 24px (Elliman mobile). */
	.footer-news { grid-template-columns: 1fr; padding: 24px; gap: var(--sp-3); margin-bottom: 70px; }
	.site-footer { padding: 70px 0; }
}

/* Modale « Demande de rappel » : panneau qui glisse depuis la droite (façon Elliman ui-modal --panel-right). */
.contact-modal { position: fixed; inset: 0; z-index: 400; visibility: hidden; }
.contact-modal.is-open { visibility: visible; }
.contact-modal__overlay { position: absolute; inset: 0; background: rgba(16,11,40,0.42); opacity: 0; transition: opacity 0.42s ease; }
.contact-modal.is-open .contact-modal__overlay { opacity: 1; }
.contact-modal__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(520px, 100%); background: #fff; box-shadow: -24px 0 70px -30px rgba(13,16,36,0.55); padding: var(--sp-5) var(--sp-4) var(--sp-4); overflow-y: auto; transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.4,0,0.1,1); }
.contact-modal.is-open .contact-modal__panel { transform: translateX(0); }
.contact-modal__close { position: absolute; top: var(--sp-3); right: var(--sp-4); display: inline-flex; align-items: center; gap: 0.6em; background: none; border: 0; cursor: pointer; font-size: 0.72rem; letter-spacing: normal; text-transform: uppercase; color: var(--ink); }
.contact-modal__title { font-size: 1.8rem; font-weight: 300; margin: 0 0 var(--sp-4); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* Sur petit écran, Prénom/Nom passent en pleine largeur (empilés), façon Elliman. */
@media (max-width: 560px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__field { margin-bottom: var(--sp-3); }
.contact-form__field label { display: block; font-size: 0.7rem; letter-spacing: normal; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5em; }
.contact-form__field label span { color: var(--gold-deep); }
.contact-form__field input, .contact-form__field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--hairline); padding: 0.5em 0; font-family: inherit; font-size: 0.95rem; color: var(--ink); background: transparent; }
.contact-form__field input:focus, .contact-form__field textarea:focus { outline: 0; border-bottom-color: var(--gold-deep); }
.contact-form__field input[readonly] { color: var(--muted); }
.contact-form__pref { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em var(--sp-3); font-size: 0.82rem; color: var(--muted); margin-bottom: var(--sp-3); }
.contact-form__pref label { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ink); }
.contact-form__check { display: flex; align-items: flex-start; gap: 0.5em; font-size: 0.72rem; color: var(--muted); margin-bottom: var(--sp-2); }
.contact-form__submit { width: 100%; justify-content: center; margin-top: var(--sp-3); }
.contact-form__feedback { margin-top: var(--sp-2); font-size: 0.84rem; min-height: 1.2em; }
.contact-form__feedback.is-ok { color: #1a7f4b; }
.contact-form__feedback.is-err { color: #b3261e; }

/* Formulaire newsletter (désormais dans la carte blanche du footer) */
.newsletter { display: flex; max-width: 460px; margin: var(--sp-3) auto 0; border-bottom: 1px solid var(--ink); padding-bottom: 0.5em; }
.newsletter input { flex: 1; border: 0; background: none; font-family: var(--font-sans); font-size: 0.9rem; outline: none; color: var(--ink); }
.newsletter button { background: none; border: 0; color: var(--gold-deep); text-transform: uppercase; letter-spacing: normal; font-size: 0.75rem; font-weight: 400; }

/* =========================================================================
   13. DRAWER MOBILE — drill-down (brief §7.1)
   ========================================================================= */
/* Conteneur plein écran sous le MÊME en-tête : se déploie vers la droite (translateX).
   Démarre sous le header (padding-top) et passe SOUS le header en z-index → header homogène. */
/* Ouverture en FONDU (opacity 0.725s, courbe expo) comme le menu mobile d'Elliman — pas de glissement. */
.header-overlay { position: fixed; inset: 0; z-index: 95; background: #fff; opacity: 0; visibility: hidden; transition: opacity 0.725s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.725s cubic-bezier(0.19, 1, 0.22, 1); display: flex; flex-direction: column; padding-top: var(--header-h); }
body.menu-open .header-overlay { opacity: 1; visibility: visible; }
.header-overlay__viewport { flex: 1; position: relative; overflow: hidden; }
/* Padding lateral 20px : aligne les items du menu sur le burger du header (x20) et
   resserre facon Elliman (etait 40px = --sp-4, trop rentre). */
.drawer__nav { list-style: none; margin: 0; padding: var(--sp-2) 20px var(--sp-5); position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.drawer__nav li { display: flex; align-items: center; justify-content: space-between; }
/* Taille des onglets nav mobile alignée sur Elliman (18px). */
.drawer__nav li a { flex: 1; padding: 0.7em 0; font-family: var(--font-sans); font-size: 1.125rem; font-weight: 400; text-transform: uppercase; letter-spacing: normal; }
.drawer__nav li button[data-drill] { background: none; border: 0; font-size: 1.5rem; color: var(--gold-deep); padding: 0.3em 0.5em; }
/* padding-bottom généreux : sans lui, la dernière entrée reste collée au bord bas et
   ne peut pas défiler au-dessus (mesuré : 1px de course seulement à 8 entrées). */
.drawer__sub { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--sp-2) 20px var(--sp-5); background: #fff; transform: translateX(100%); transition: transform var(--transition); }
.drawer__sub.is-active { transform: translateX(0); }
.drawer__back { background: none; border: 0; color: var(--gold-deep); font-size: 0.74rem; letter-spacing: normal; text-transform: uppercase; padding: 0.6em 0; }
.drawer__sub-title { font-size: 1.9rem; margin: 0.2em 0 var(--sp-2); }
.drawer__group { border-bottom: 1px solid var(--hairline); }
.drawer__group summary { list-style: none; cursor: pointer; padding: 0.95em 0; font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: normal; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep); transform: rotate(45deg); transition: transform var(--transition); }
.drawer__group[open] summary::after { transform: rotate(-135deg); }
.drawer__group ul, .drawer__flat { list-style: none; margin: 0; padding: 0 0 0.8em; }
.drawer__group li a { display: block; padding: 0.45em 0; color: var(--muted); }
.drawer__flat li a { display: block; padding: 0.9em 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-display); font-size: 1.2rem; }

/* Tuile promo dans les sous-panneaux mobiles (image absente sur mobile avant) */
.drawer__promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; margin-top: var(--sp-3); aspect-ratio: 16 / 10; background-size: cover; background-position: center; padding: var(--sp-3); overflow: hidden; color: #fff; }
.drawer__promo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(13,16,36,0.85), rgba(13,16,36,0.2)); }
.drawer__promo-top { position: relative; z-index: 2; color: #fff; font-size: 0.72rem; letter-spacing: normal; text-transform: uppercase; margin-bottom: var(--sp-2); }
.drawer__promo .btn { position: relative; z-index: 2; align-self: stretch; justify-content: center; color: #fff; border-color: rgba(255,255,255,0.7); background: transparent; }
.drawer__promo .btn:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.header-overlay__foot { padding: var(--sp-3) 20px; border-top: 1px solid var(--hairline); }
.header-overlay__foot .btn { width: 100%; justify-content: center; }

/* Mega-menu desktop */
.has-mega { position: static; }
/* Panneau mega : blanc pleine largeur, fondu 1s (courbe expo Elliman), sans bordure ni ombre. */
/* ⚠️ `pointer-events` est INDISPENSABLE ici, ne pas le retirer. `visibility` etant
   animee sur 1s, elle ne bascule qu'a la FIN de la transition : pendant toute cette
   seconde le panneau reste `visible` et, sans cette regle, il continue de capter la
   souris. Comme il est `fixed` et couvre 1440x496 en haut de page, le curseur qui
   descend vers le contenu retombait dedans, `:hover` redevenait vrai et le menu se
   ROUVRAIT tout seul — la page devenait inutilisable pendant une seconde. */
.mega { position: fixed; left: 0; right: 0; top: var(--header-h); background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), visibility 1s cubic-bezier(0.19, 1, 0.22, 1); z-index: 90; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; }
/* Voile sombre sur la page quand un mega/dropdown est ouvert (= .header-overlay d'Elliman : #0008, fade 0.3s). */
.site-header::before { content: ""; position: fixed; left: 0; right: 0; top: var(--header-h); height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 80; }
.site-header:has(.has-mega:hover, .has-mega:focus-within, .has-mega.is-open, .has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-open)::before { opacity: 1; }
/* Structure Elliman (.header__nav__submenu__row) : le menu occupe TOUTE la largeur.
   Colonne gauche 380 en fond CREME collee au bord gauche (padding 40), colonne droite 1060
   (padding 60/40). Bosquet contraignait tout dans le .wrap, sans panneau creme. */
.mega__inner { display: grid; grid-template-columns: 380px 1fr; gap: 0; padding: 0; }
.mega__aside { background: var(--cream); padding: 40px; }
.mega__body { padding: 60px 40px 34px; }  /* bas rogné : la carte promo pilote la hauteur (comme Elliman), plus le corps */
/* Sous 900px la navigation passe par le drawer : le mega-menu ne doit pas exister du tout.
   Sans ca sa grille a colonne fixe de 380px deborderait s'il venait a s'afficher. */
@media (max-width: 900px) {
	.mega { display: none; }
}
/* Tuile promo : scopée sous .mega pour BATTRE la spécificité de .nav a / .nav a::after
   (sinon le texte passait en navy et l'overlay dégradé était remplacé par le trait doré). */
/* Image promo : s'étire à la hauteur de la colonne de liens (façon Elliman : Acheter ~487, Louer ~378),
   au lieu d'un aspect-ratio figé qui la faisait toujours dépasser sur Louer. Plancher 378px. */
.mega .mega__promo { position: relative; min-height: 416px; align-self: stretch; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); color: #fff; overflow: hidden; }  /* pad 24×40 + gap 8 = carte Elliman */  /* 416 = carte promo Elliman Acheter (était 487, mega 71px trop haut) */
.mega .mega__promo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(13,16,36,0.9) 0%, rgba(13,16,36,0.5) 48%, rgba(13,16,36,0.15) 100%); }
/* CTA de la carte : lien texte blanc 12px + bouton BLANC PLEIN (texte navy), comme Elliman .card-menu__links. */
.mega .mega__promo-top { position: relative; z-index: 2; color: #fff; font-size: 12px; letter-spacing: normal; text-transform: uppercase; text-shadow: 0 1px 8px rgba(13,16,36,0.6); }
.mega .mega__promo .btn { position: relative; z-index: 2; align-self: stretch; text-align: center; background: #fff; border: 1px solid #fff; color: var(--navy); padding: 10px 24px; font-size: 12px; font-weight: 300; }  /* pleine largeur carte, texte centré = Elliman */
.mega .mega__promo .btn:hover { background: rgba(255,255,255,0.9); border-color: #fff; color: var(--navy); }
.mega__title { font-size: 2.344rem; line-height: 1.2; font-weight: 300; color: var(--navy); margin: 0 0 40px; }
.mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mega__col h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 300; letter-spacing: normal; text-transform: uppercase; color: var(--navy); margin: 0 0 16px; }
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col li { margin-bottom: 0.5em; }
.mega__col a { font-size: 0.875rem; color: var(--ink); text-transform: none; letter-spacing: normal; }
.mega__col a:hover { color: var(--gold-deep); }

/* Dropdown compact (menu « L'agence », façon liste Elliman « ELLIMAN ») */
.has-dropdown { position: relative; }
.dropdown { position: absolute; top: 100%; left: calc(var(--sp-3) * -1); transform: translateY(-8px); background: #fff; border: 0; box-shadow: none; min-width: 220px; padding: 10px 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 90; }  /* blanc SANS bordure ni ombre = Elliman ; calé à GAUCHE (-24px = padding) pour aligner les liens sous le texte de l'item */
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dropdown ul { list-style: none; margin: 0; padding: 0; }
.dropdown a { display: block; padding: 0.2em var(--sp-3); line-height: 1.5; font-size: 0.875rem; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; border: 0; }  /* lh 1.5 (stop fuite 1.7) + pad réduit = row-step ~27 comme Elliman */
.dropdown a::after { display: none; }
.dropdown a:hover { color: var(--gold-deep); background: var(--paper-alt); }

/* =========================================================================
   14. RESPONSIVE (brief §3 : ≤480, ≤900, >900)
   ========================================================================= */
@media (max-width: 900px) {
	.nav-wrap { display: none; }
	.header__actions .btn { display: none; }
	/* En-tête mobile en 3 colonnes égales : Menu · logo (centré) · langue — même espace entre
	   les 3 blocs quel que soit leur largeur (façon Elliman header__container). */
	.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
	/* Marges latérales mobiles resserrées : Elliman est à 15px, Bosquet était à 40px (--sp-4)
	   partout — header trop rentré. On aligne header + contenu principal à 20px. */
	.site-header__inner { padding: 0 20px; }
	/* prefixe body : ces wrappers redefinissent leur padding plus loin dans la feuille (cat-body,
	   loc-body...) et gagneraient par ordre source ; body monte la specificite pour que le 20px tienne. */
	body .wrap, body .cat-body, body .loc-body, body .overlay-sell, body .article-body__col { padding-left: 20px; padding-right: 20px; }
	.burger { display: flex; justify-self: start; }
	.brand { justify-self: center; }
	.header__actions { justify-self: end; }
	/* ⚠️ `.brand__name` seul ne suffit PAS pour l'en-tête : `.site-header .brand__name`
	   (1,6rem) est plus spécifique et gagnait, si bien que le logo du header restait à sa
	   taille desktop en mobile pendant que celui du footer, lui, rétrécissait à 1,2rem.
	   D'où un header trop gros ET un footer trop discret. On pilote les deux séparément. */
	.brand__name { font-size: 1.2rem; }
	.site-header .brand__name { font-size: 1.25rem; }
	.site-header .brand__name small { font-size: 0.4rem; letter-spacing: 0.24em; }
	/* Le logo du footer est la signature de marque : il doit peser PLUS que celui de
	   l'en-tête, pas moins. */
	.footer-brand .brand__name { font-size: 1.55rem; }
	.footer-brand .brand__name small { font-size: 0.5rem; }
	/* Sous-titres des heros masqués sur mobile (façon Elliman : titre seul). */
	.sell-band__sub, .hero__sub { display: none; }
	/* Géométrie du hero mobile calquée sur Elliman : image de 74dvh, titre calé à ~23dvh du haut
	   (écart titre→onglets ≈ 214px), et SEULS les onglets (42px) chevauchent le bas de l'image —
	   le formulaire continue sur fond de page sous la ligne de flottaison. */
	.hero { min-height: 0; padding-bottom: 0; }
	.hero__bg { inset: 0 0 auto 0; height: 74dvh; }
	.hero__inner { flex: 0 0 auto; min-height: 74dvh; justify-content: flex-start; padding: 23dvh var(--sp-3) 0; }
	/* Pleine largeur sur mobile ; les onglets (42px) remontent sur l'image (façon Elliman). */
	.search-card { width: 100%; max-width: none; margin-top: -42px; padding: 0; }
	/* Formulaire empilé, padding 24px 40px (= --space-md --space-lg mobile d'Elliman). */
	.search-fields { grid-template-columns: 1fr; align-items: stretch; padding: 24px 40px; gap: var(--sp-3); }
	.search-fields .search-submit { width: 100%; }
	/* Moteur empilé en une colonne : pas de filet vertical entre les champs. */
	.search-fields .field:not(:last-of-type)::after { display: none; }
	.single-gallery { grid-template-columns: 1fr; height: auto; }
	.single-gallery figure:first-child { grid-row: auto; }
	.single-gallery figure:not(:first-child):nth-child(n+3) { display: none; }
	.single-body { grid-template-columns: 1fr; }
	.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.wrap { padding: 0 var(--sp-3); }
	.grid-biens { grid-template-columns: 1fr; }
	.card-bien--carousel { width: 82vw; }
	/* Cartes destination : 380px comme Elliman même en mobile (la marquee clippe le débordement). */
	.footer-top { grid-template-columns: 1fr; }
	.hero h1, .sell-band__inner h1 { font-size: clamp(2.1rem, 9.5vw, 3.2rem); max-width: 100%; }
	.hero__inner, .sell-band__inner { padding-left: var(--sp-3); padding-right: var(--sp-3); }
	.stats { grid-template-columns: 1fr; }
}

/* =========================================================================
   15. SECTIONS ÉDITORIALES HOME (structure Elliman)
   ========================================================================= */
/* Intro 2 colonnes (texte + image) */
.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-6); }
.intro__media { aspect-ratio: 4 / 5; overflow: hidden; }
.intro__media img { width: 100%; height: 100%; object-fit: cover; }
.intro__body .rule { margin: var(--sp-2) 0 var(--sp-3); }
.intro__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* Section 2 — bloc texte centré, calqué sur Elliman .wysiwyg --has-bg --centered :
   fond crème, colonne centrée (~66% = 853px), titre Euclid 300 (37.5px/45px) + accent
   serif italique, paragraphe 14px/1.4. Padding 80px + 80px de marge basse (desktop). */
.intro-centered { background: var(--cream); text-align: center; padding: 80px 0; margin-bottom: 80px; }
/* `.edito` est crème lui aussi : la marge laissait voir 80px de blanc du body entre
   deux aplats identiques. On soude les deux, l'espacement reste interne. */
.intro-centered:has(+ .edito) { margin-bottom: 0; }
.intro-centered__inner { max-width: 871px; margin: 0 auto; padding: 0 var(--sp-3); }

/* Nous rejoindre — « Nos offres à pourvoir » = composant .edito (À L'IDENTIQUE Elliman /recrutement/) :
   onglets horizontaux centrés + image (villa navy) à gauche + contenu de l'offre à droite.
   Ici seulement les surcharges spécifiques aux offres (méta contrat/lieu, description, contenu élargi). */
/* 120px lateraux = colonne de contenu a 385px comme Elliman (.bloc-tab__content dans 625). */
.jobs-edito .edito__content { padding: 56px 120px; }
.jobs-meta { font-size: 12px; text-transform: uppercase; letter-spacing: normal; color: var(--gold-deep); margin: 0 0 18px; }
.jobs-descr { font-size: 0.875rem; line-height: 1.5; color: var(--navy); }
.jobs-descr p { margin: 0 0 1em; }
.jobs-descr p:last-child { margin: 0; }
.jobs-edito .edito__ctas { margin-top: 24px; }
@media (max-width: 900px) {
	.jobs-edito .edito__content { padding: var(--sp-4) var(--sp-3); }
	/* Offres : l'image (villa) est la même partout → on GARDE les onglets visibles (défilables)
	   pour changer de poste sur mobile, contrairement au edito accueil (swipe d'images). */
	.jobs-edito .edito__tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-top: 32px; -webkit-overflow-scrolling: touch; }
	.jobs-edito .edito__tab { white-space: nowrap; padding: 0 16px 16px; flex: 0 0 auto; }
}
.intro-centered__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0; }
.intro-centered__descr { margin-top: 32px; }
.intro-centered__descr p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0; }
.intro-centered__descr p + p { margin-top: 24px; }
/* Deux boutons centrés sous le paragraphe (façon Elliman .wysiwyg__cta). */
.intro-centered__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Bande vendre (image plein cadre + overlay + CTA) */
.sell-band { position: relative; min-height: 460px; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
.sell-band__bg { position: absolute; inset: 0; }
.sell-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.sell-band__bg::after { content: ""; position: absolute; inset: 0; background: rgba(13,16,36,0.5); }
.sell-band__inner { position: relative; z-index: 2; max-width: 900px; padding: var(--sp-4); }
.sell-band__inner h1, .sell-band__inner h2 { color: #fff; max-width: 20ch; margin-inline: auto; }

/* Grille zones : tuiles h 406, gap 16, gradient rgba(0,0,0,.1) 30% → .8, label 24px.
   ⚠️ NE PAS « corriger » le motif mosaïque 1-2/2-1 ci-dessous. Il ne vient PAS d'Elliman
   (mesuré sur son /contact/ : cartes .card-page toutes en 406×406 sur 3 colonnes régulières),
   c'est un ÉCART ASSUMÉ, décidé par l'utilisateur le 2026-07-20 : Bosquet n'a que 4 zones,
   et la grille régulière laissait une carte seule sur la 2ᵉ rangée avec un grand vide.
   La mosaïque remplit proprement à 4. Utilisé par /contact/ et /nous-rejoindre/. */
.push-pages { margin-bottom: 80px; }
.push-pages .section__head { text-align: left; margin-bottom: 40px; }
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dest-tile { position: relative; height: 406px; overflow: hidden; }
.dest-tile:nth-child(4n+2), .dest-tile:nth-child(4n+3) { grid-column: span 2; }
.dest-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition); }
.dest-tile:hover img { transform: scale(1.06); }
.dest-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.8)); }
.dest-tile__label { position: absolute; left: 32px; bottom: 32px; z-index: 2; color: #fff; }
.dest-tile__label .name { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; font-weight: 400; line-height: 1.2; }
.dest-tile__label .count { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: normal; color: var(--gold-light); }

/* Grille services */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.service { text-align: left; }
.service__num { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-deep); }
.service .rule { margin: var(--sp-2) 0; }
.service h3 { font-size: 1.35rem; }
.service p { color: var(--muted); font-size: 0.92rem; }

/* Équipe — cartes portrait + encart nom (façon Elliman « équipe de direction ») */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.team__card { display: flex; flex-direction: column; }
.team__photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--navy-deep); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-size: 3.4rem; color: var(--gold); }
.team__label { background: #fff; padding: var(--sp-3) var(--sp-2); text-align: center; margin: -34px var(--sp-2) 0; position: relative; z-index: 2; box-shadow: 0 20px 40px -28px rgba(13,16,36,0.5); }
.team__name { font-size: 0.8rem; letter-spacing: normal; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.team__role { font-size: 0.82rem; color: var(--muted); margin-top: 0.4em; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .team { grid-template-columns: 1fr; } }

/* Témoignages */
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); max-width: 980px; margin: 0 auto; }
.testimonial { border: 1px solid var(--hairline); padding: var(--sp-4); background: #fff; }
.testimonial__quote { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; line-height: 1.5; color: var(--ink); }
.testimonial__author { margin-top: var(--sp-2); font-size: 0.74rem; text-transform: uppercase; letter-spacing: normal; color: var(--gold-deep); }

/* Stats — cartes à chiffres serif (façon Elliman « chiffres clés ») */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.stat { background: #fff; padding: var(--sp-5) var(--sp-3); text-align: center; }
.stat__num { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.6rem, 5vw, 4rem); color: var(--navy); line-height: 1; letter-spacing: normal; }
.stat__num sup { font-size: 0.45em; font-weight: 500; }
.stat__label { font-size: 0.92rem; color: var(--muted); margin-top: var(--sp-2); line-height: 1.4; }

/* Étapes process (page vendre) */
.steps { max-width: 760px; margin: 0 auto; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); }
.step__num { font-family: var(--font-display); font-size: 2rem; color: var(--gold-deep); line-height: 1; }
.step h3 { font-size: 1.3rem; margin-bottom: 0.3em; }
.step p { color: var(--muted); margin: 0; }

/* ===== Page Vendre (calquée sur elliman.fr/vendre/) ===== */
/* Hero : titre fin façon Elliman (uniquement sur la page vendre) */
/* Hero /vendre/ aligné sur Elliman (.hero.--md : 74dvh) + header transparent (has-hero) → padding pour le header. */
.sell-band--hero { min-height: 74vh; min-height: 74dvh; }
.sell-band--hero .sell-band__inner { padding-top: calc(var(--header-h) + var(--sp-2)); }
.sell-band--hero .sell-band__inner h1 { font-size: clamp(2rem, 3.4vw, 2.8125rem); font-weight: 300; line-height: 1.2; max-width: 26ch; }
.sell-band__sub { color: rgba(255,255,255,0.85); max-width: 54ch; margin: var(--sp-2) auto 0; line-height: 1.6; }

/* Section générique à marge basse Elliman (les sections de /vendre/ n'ont pas de padding). */
.vsec { margin-bottom: 80px; }

/* Méthode (= Elliman edito-sub-sections-images) : heading centré (titre 37.5 + descr, mb 60),
   étapes numérotées TOUTES développées (numéro serif 98.44px normal + titre 16 up + descr 14),
   image carrée à droite posée sur un cadre crème étendu jusqu'au bord droit du viewport.
   Comportement : cliquer une étape change l'image (data-accomp). */
.vmethod-head { text-align: center; margin-bottom: 60px; }
.vmethod-head__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0; }
.vmethod-head__descr { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 24px 0 0; }
/* Deux colonnes égales ; la colonne image s'étire sur toute la hauteur des étapes
   (align-items:stretch) pour que le panneau crème soit aussi haut qu'Elliman. */
.vmethod { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 24px 0; }
/* Bloc étapes borné à 505px (comme content__inner d'Elliman = num 50 + gap 16 + texte 439),
   ce qui laisse un vide à droite avant le crème : le texte ne touche jamais l'image. */
.vmethod__steps { display: flex; flex-direction: column; gap: 16px; padding: 0; max-width: 505px; }
/* Étape « accordéon » : une seule active (opacité 1), les autres estompées à 0.4
   comme Elliman (.sub-section --active / opacity .4, transition .3s). */
.vstep { display: flex; gap: 16px; align-items: center; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; opacity: 0.4; transition: opacity 0.3s ease; }
.vstep[aria-selected="true"] { opacity: 1; }
/* Le numéro porte le trait vertical gris (border-right 1px #9f9da9) qui sépare chiffre et texte. */
/* Réplique exacte d'Elliman (.sub-section__number) : boîte 50px flex centrée + overflow
   hidden ; le chiffre, décalé à droite par un margin-right négatif, déborde puis est
   CLIPPÉ pile sur le trait #9f9da9 → il remplit jusqu'au trait et se termine dessus
   (« à l'intérieur du trait »), sans écart ni débordement à droite. */
.vstep__num { flex: 0 0 50px; width: 50px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-right: 1px solid #9f9da9; font-family: var(--font-serif); font-weight: 300; font-size: 6.152rem; line-height: 1.4; color: var(--navy); }
.vstep__num > span { display: block; margin-right: -37.5px; }
.vstep__body { flex: 1; min-width: 0; }
.vstep__title { display: block; font-family: var(--font-sans); font-size: 1rem; line-height: 1.4; text-transform: uppercase; color: var(--navy); }
.vstep__descr { display: block; font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin-top: 8px; }
/* Panneau crème pleine hauteur, étendu jusqu'au bord droit du viewport (::before, z-index derrière),
   image carrée centrée dessus avec 80px de marge — reproduction du .edito-sub-sections-images__image d'Elliman. */
.vmethod__frame { position: relative; display: flex; align-items: center; justify-content: center; padding: 80px; }
.vmethod__frame::before { content: ""; position: absolute; inset: 0; right: calc(-1 * max(var(--sp-4), (100vw - var(--wrap)) / 2 + var(--sp-4))); background: var(--cream); z-index: 0; }
.vmethod__media { position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.vmethod__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.vmethod__media img.is-active { opacity: 1; }

/* Témoignages : marque Google + image | avis | image + navigation */
.testimonies__head { text-align: center; margin-bottom: var(--sp-5); }
.google-mark { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.9rem; color: var(--ink); margin-bottom: var(--sp-2); }
.google-mark .stars { color: var(--gold); letter-spacing: normal; }
/* Carrousel de témoignages (façon Elliman .swiper-testimonies) : cartes verticales défilantes,
   plusieurs visibles, scroll-snap fluide (piloté par les flèches via [data-carousel]). */
.testimonies__carousel { position: relative; }
.testimonies__track { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px; }
.testimonies__track::-webkit-scrollbar { display: none; }
.testimony { flex: 0 0 min(440px, 82vw); scroll-snap-align: start; }
.testimony__image { aspect-ratio: 430 / 286; overflow: hidden; margin-bottom: var(--sp-3); }
.testimony__image img { width: 100%; height: 100%; object-fit: cover; }
.testimony__stars { color: var(--navy); letter-spacing: normal; font-size: 1.05rem; }
.testimony__author { font-size: 0.8rem; letter-spacing: normal; text-transform: uppercase; color: var(--gold-deep); margin: var(--sp-2) 0 0.5em; }
.testimony__title { font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; color: var(--ink); margin-bottom: var(--sp-2); }
.testimony__descr { font-size: 0.98rem; color: var(--ink); line-height: 1.6; }
.testimony__descr p { margin: 0; }
.testimonies__nav { display: flex; justify-content: flex-start; gap: 0.5em; margin-top: var(--sp-4); }

.vendre-intro p { color: var(--muted); margin: 0 0 1.2em; }
.vendre-form { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-6); align-items: start; }
/* Colonne edito des formulaires en sticky (façon .edito-form__content__inner) — tous les formulaires du site. */
.vendre-form__edito, .form-edito { position: sticky; top: var(--sp-4); align-self: start; }
.vendre-form__edito h2 { margin-bottom: var(--sp-2); }

@media (max-width: 900px) {
	.vsec { margin-bottom: 70px; }
	/* Méthode mobile (Elliman) : étapes empilées puis image carrée dessous, posée sur un
	   panneau crème carré (= largeur du conteneur, PAS de full-bleed), image 262px centrée,
	   numéros 65.6px, heading mb 40, écart colonnes 24px. */
	.vmethod-head { margin-bottom: 40px; }
	.vmethod-head__title { font-size: 1.75rem; }
	.vmethod, .vendre-form { grid-template-columns: 1fr; }
	.vmethod__steps { padding: 0; }
	.vstep__num { font-size: 4.102rem; }
	.vmethod__frame { padding: 40px; }
	.vmethod__frame::before { right: 0; }
	.testimony, .testimony--single, .testimony--center { grid-template-columns: 1fr; }
	.testimony__img { display: none; }
	.testimony__img:first-child { display: block; aspect-ratio: 16 / 10; }
}

/* =========================================================================
   16. RÉSULTATS avec sidebar de facettes (brief §7.5, §8)
   ========================================================================= */
.results-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-5); align-items: start; }
.facets { position: sticky; top: var(--sp-2); border: 1px solid var(--hairline); }
.facets__head { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hairline); font-size: 0.72rem; text-transform: uppercase; letter-spacing: normal; color: var(--ink); }
.facet { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hairline); }
.facet:last-child { border-bottom: 0; }
.facet > label { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: normal; color: var(--gold-deep); margin-bottom: 0.5em; }
.facet select, .facet input { width: 100%; border: 1px solid var(--hairline); padding: 0.6em; font-family: var(--font-sans); font-size: 0.85rem; background: #fff; }
.facet .range { display: flex; gap: 0.5em; }
.facet__note { padding: var(--sp-2) var(--sp-3); font-size: 0.68rem; color: var(--muted); font-style: italic; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }

/* Bloc éditorial SEO repliable en bas d'archive */
/* 837px : largeur du h2.seo__title et du .seo__descr d'Elliman (dans un conteneur de 1040). */
/* Elliman .seo__container : bloc de 1040 CENTRE (donc a x200 dans les 1250 de contenu)
   avec 15px de padding, colonnes de texte a 837 -> le texte demarre a x215.
   AUCUNE bordure haute ni padding haut : le trait etait un ajout Bosquet. */
.seo-block { margin-top: 140px; padding: 0 15px; border-top: 0; color: var(--muted); font-size: 0.875rem; max-width: 1040px; margin-left: auto; margin-right: auto; }  /* Elliman : 140px entre le listing (padding-bottom 60 + margin 80) et le bloc SEO */
.seo-block h2, .seo-block__descr, .seo-block__more { max-width: 837px; }
.seo-block h2 { font-size: 1.6rem; color: var(--ink); }
.seo-block__more { color: var(--gold-deep); cursor: pointer; font-size: 0.875rem; line-height: 1.4; text-transform: none; letter-spacing: normal; }

@media (max-width: 900px) {
	.intro { grid-template-columns: 1fr; gap: var(--sp-3); }
	/* Section 2 centrée — mobile (Elliman) : padding 70px, titre 28px, colonne pleine largeur. */
	.intro-centered { padding: 70px 0; margin-bottom: 70px; }
	/* 20px = la gouttière mobile du site (cf. `body .wrap` plus haut), pas 24. */
	.intro-centered__inner { max-width: none; padding: 0 20px; }
	.intro-centered__title { font-size: 1.75rem; }
	/* Elliman repasse le chapeau à 24px du titre en mobile (32 en desktop). */
	.intro-centered__descr { margin-top: var(--sp-3); }
	/* Section 3 push-biens — mobile : heading empilé et centré (titre puis onglets) ; flèches masquées (swipe). */
	.push-head { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
	.push-head__title { font-size: 1.75rem; }
	.push-head__controls { justify-content: center; }
	.push-head .tabs-inline { justify-content: center; }
	.push-nav { display: none; }
	/* Section 4 overlay-sell — mobile : colonnes empilées, carte remontée de -70px, titre 31px. */
	.overlay-sell { padding: 0 var(--sp-3); margin-bottom: 85px; }
	.overlay-sell__card { flex-direction: column; max-width: none; margin: -70px var(--sp-2) 0; padding: 24px; gap: var(--sp-2); }
	.overlay-sell__col-title { flex: none; }
	/* min() : « Accompagnement » ne se coupe pas — sur les petits écrans le corps
	   se réduit plutôt que de déborder de la carte. */
	.overlay-sell__title { font-size: min(1.95rem, 7.4vw); }
	/* Mosaïque zones — mobile Elliman : 2 colonnes carrées gap 8, plus de tuiles larges, label 18px à 24/24. */
	.push-pages { margin-bottom: 70px; }
	.push-pages .section__head { margin-bottom: 24px; }
	.push-pages .section__head h2 { font-size: 1.75rem; }
	.dest-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.dest-tile { height: auto; aspect-ratio: 1 / 1; }
	.dest-tile:nth-child(4n+2), .dest-tile:nth-child(4n+3) { grid-column: auto; }
	.dest-tile__label { left: 24px; bottom: 24px; }
	.dest-tile__label .name { font-size: 1.125rem; }
	/* Intro simple — mobile Elliman : 40/40, titre 36. */
	.page-hero { padding: 40px var(--sp-3); }
	.services { grid-template-columns: 1fr 1fr; }
	.testimonials, .stats { grid-template-columns: 1fr; }
	.results-layout { grid-template-columns: 1fr; }
	.facets { position: static; }
	.results-grid { grid-template-columns: 1fr; }
	/* Corps de card resserre a 16px sur mobile (mesure sur elliman.fr : .card-bien__body
	   passe de 24px desktop a 16px mobile). Les chips, la pastille ville, le cadre 3 cotes
	   et le texte centre matchent deja Elliman. */
	.card-bien__body { padding: 16px; }
}
@media (max-width: 480px) {
	.services { grid-template-columns: 1fr; }
}

/* =========================================================================
   17. ACCOMPAGNEMENT — onglets interactifs, l'image change au clic (comme Elliman)
   ========================================================================= */
.accomp { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-5); align-items: stretch; }
.accomp__list { display: flex; flex-direction: column; justify-content: center; }
.accomp__item { text-align: left; background: none; border: 0; border-top: 1px solid var(--hairline); padding: var(--sp-3) 0; cursor: pointer; }
.accomp__item:last-child { border-bottom: 1px solid var(--hairline); }
.accomp__item h3 { font-size: 1.5rem; margin: 0; color: var(--muted); transition: color var(--transition); display: flex; align-items: center; gap: 0.6em; }
.accomp__item h3::before { content: ""; width: 0; height: 1px; background: var(--gold); transition: width var(--transition); }
.accomp__item[aria-selected="true"] h3 { color: var(--ink); }
.accomp__item[aria-selected="true"] h3::before { width: 28px; }
.accomp__item p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; color: var(--muted); font-size: 0.92rem; transition: all var(--transition); }
.accomp__item[aria-selected="true"] p { max-height: 140px; opacity: 1; margin-top: 0.6em; }
.accomp__item .accomp__cta { display: inline-block; margin-top: 0.8em; }
.accomp__media { position: relative; overflow: hidden; min-height: 460px; background: var(--paper-alt); }
.accomp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--transition); }
.accomp__media img.is-active { opacity: 1; }

/* Section 6 — onglets éditoriaux (calqué Elliman edito-tabs) : heading centré (titre + onglets),
   puis image à gauche (swap par onglet) + bloc texte à droite (swap). */
/* Section 6 — fond crème #fbfbf9 + padding 80px + marge basse 80px (écart vers section 7), comme Elliman. */
.edito { background: var(--cream); padding: 80px 0; margin-bottom: 80px; }
/* La section 7 (témoignages) qui suit ne double pas le padding-top : l'écart vient de la marge de .edito. */
.edito + .section { padding-top: 0; }
.edito__head { text-align: center; margin-bottom: var(--sp-5); }
.edito__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0; }
.edito__tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 60px; }
/* Barre pleine largeur sous les onglets (= .ui-tabs__tabs::before d'Elliman : 1px #dedede). */
.edito__tabs::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #dedede; }
.edito__tab { position: relative; background: none; border: 0; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.4; text-transform: none; letter-spacing: normal; color: var(--navy); padding: 0 24px 20px; cursor: pointer; }  /* Mesuré chez Elliman (edito-tabs ET push-biens, accueil + /nos-metiers/) :
   14px, SANS majuscules, graisse 400, letter-spacing normal. */
/* Soulignement actif = barre 2px or var(--gold-deep) qui grandit en scaleX (transition), comme Elliman .ui-tabs__tab::before. */
.edito__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
.edito__tab[aria-selected="true"]::after { transform: scaleX(1); }
/* Colonnes 50/50 sans gap, étirées à la même hauteur : image (moitié gauche) + panneau BLANC
   du texte (moitié droite), comme Elliman (bloc-tab-image #f7f7f7 | bloc-tab__inner #fff). */
.edito__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.edito__media { position: relative; aspect-ratio: 625 / 719; overflow: hidden; background: #f7f7f7; }
/* Images empilées qui glissent horizontalement (façon swiper Elliman) : translateX piloté en JS. */
.edito__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); will-change: transform; }
/* Colonne texte : la barre de flèches (rangée 1) puis les blocs empilés (rangée 2) qui se
   fondent l'un dans l'autre (opacity), façon Elliman — pas de saut de hauteur, pas de swap sec. */
/* Panneau BLANC du texte : plein demi-bloc droit, contenu (385px) centré, padding 60×120 (Elliman). */
.edito__content { display: grid; grid-template-columns: 1fr; align-content: center; background: #fff; padding: 60px 120px; }
/* `visibility` en plus de `opacity` : sans elle les 4 panneaux masqués gardaient
   leurs liens dans la tabulation. Le delai de --transition est retiré : il décalait
   le fondu du texte de 400ms derrière le glissement de l'image (0,6s). */
.edito__bloc { grid-column: 1; grid-row: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.19,1,0.22,1), visibility 0s linear 0.5s; }
.edito__bloc.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s, 0s; }
.edito__bloc-title { font-family: var(--font-display); font-weight: 300; font-size: 1.758rem; line-height: 1.2; color: var(--navy); margin: 0 0 var(--sp-2); }
.edito__bloc p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0 0 20px; }
.edito__cta { display: inline-block; font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: normal; color: var(--navy); }
.edito__cta:hover { color: var(--gold-deep); text-decoration: underline; }
/* 2e CTA = bouton navy plein (= .btn --dark-blue d'Elliman) ; le 1er reste un lien texte. */
.edito__cta--solid { background: var(--navy); color: #fff; border: 1px solid var(--navy); padding: 10px 24px; font-weight: 300; }
.edito__cta--solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; text-decoration: none; }
/* Overlay léger sur l'image (radial sombre, façon Elliman .bloc-tab-image__overlay). */
.edito__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.15)); pointer-events: none; }
/* Flèches de navigation dans le bloc contenu (44px, bordure navy, carrées, façon .swiper-arrows). */
.edito__nav { display: flex; gap: 0.5em; margin-bottom: var(--sp-3); }
/* Pendant desktop du `.edito__tabs { display: none }` mobile : à 1440 Elliman ne
   montre que les onglets. Deux commandes de carrousel côte à côte n'ont pas de sens,
   et la barre de flèches décentrait le texte de 34px dans son panneau. */
/* ⚠️ CORRECTION 2026-08-11 — j'avais masqué ces flèches en desktop lors de l'audit, en
   concluant qu'Elliman n'affichait que les onglets. C'était FAUX : relevé sur elliman.fr
   à 1440, les flèches sont bien présentes AU-DESSUS du titre du panneau, 44×44, alignées
   sur le même axe gauche que le titre, à 24px au-dessus (= notre --sp-3, déjà en place).
   Ne pas remasquer sans avoir remesuré chez eux. */
.edito__arrow { width: 44px; height: 44px; border: 1px solid var(--navy); background: transparent; color: var(--navy); font-size: 1rem; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background var(--transition), color var(--transition); }
.edito__arrow:hover { background: var(--navy); color: #fff; }
/* Flèche désactivée aux extrémités (pas de boucle, façon Elliman swiper-button-disabled). */
.edito__arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
/* Deux CTA sous le paragraphe. */
.edito__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 40px; margin-top: var(--sp-4); }

/* Section 5 — ruban marquee sans titre : pas de padding vertical, marge basse 80px (écart Elliman). */
.section-marquee { padding: 0; margin-bottom: 80px; }

/* Section 4 — deux CTA sous le paragraphe de la carte vendre. */
.overlay-sell__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); }  /* Elliman cta : margin 40px 0 0 */
/* Section 6 edito — mobile : titre 28px, onglets défilables horizontalement, image puis texte empilés.
   (placé après les règles de base pour que l'override s'applique bien.) */
@media (max-width: 900px) {
	.edito__title { font-size: 1.75rem; }
	/* Le saut de ligne forcé du titre est calibré pour le desktop ; en dessous il crée
	   une ligne orpheline (« l'ensemble » seul). On le neutralise pour laisser le texte
	   se répartir naturellement. ⚠️ Un espace a été ajouté AVANT le <br> dans
	   front-page.php : sans lui, masquer le <br> soude les mots (« l'ensemblede »). */
	.edito__title br { display: none; }
	.edito__bloc-title { font-size: 1.375rem; }
	/* Mobile façon Elliman : la barre d'onglets est MASQUÉE (.ui-tabs display:none) ;
	   on navigue au swipe sur l'image ou avec les flèches ‹ › (38px). */
	.edito__tabs { display: none; }
	.edito__row { grid-template-columns: 1fr; gap: 0; }
	/* Panneau blanc du texte : padding 24px en mobile (Elliman). */
	.edito__content { padding: 24px; }
	/* Padding 70px (au lieu de 80) — image reste en portrait 0.87 (comme Elliman en mobile). */
	.edito { padding: 70px 0; }
}

/* =========================================================================
   18. RECOMMANDATIONS — témoignages type Elliman (image + note + citation + nav)
   ========================================================================= */
/* Section 7 — témoignages calqués Elliman .testimonies :
   heading centré (badge Google : logo G + note 12px + barre d'étoiles) puis SWIPER horizontal —
   cartes côte à côte (contenu 800px, pas de 1040px), la suivante dépasse à droite, glissement 0.8s. */
.reco-section { padding: 0; margin-bottom: 80px; }
.reco__head { text-align: center; margin-bottom: 60px; }
.google-badge { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.google-badge__note { font-size: 12px; color: var(--navy); }
/* Dans le badge du heading, la barre d'étoiles est petite (70×12, comme Elliman). */
.google-badge .gmark { width: 70px; height: 12px; }
.reco__heading { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0; }
/* Barre d'étoiles (130×20) : masque SVG 5 étoiles ARRONDIES (dessin maison, géométrie calée sur
   le stars.svg d'Elliman : 140×21, pas de 29.5) sur un fond navy — base à 40 % (étoiles vides)
   + ::before plein rempli à var(--rating), comme le .mark d'Elliman. */
.gmark { display: inline-block; position: relative; width: 130px; height: 20px; background: rgba(31,36,71,0.4);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 21'%3E%3Cdefs%3E%3Cpolygon id='s' points='10.75,2.2 12.87,7.88 18.93,8.14 14.18,11.92 15.81,17.76 10.75,14.41 5.69,17.76 7.32,11.92 2.57,8.14 8.63,7.88' fill='%23000' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/defs%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='29.5'/%3E%3Cuse href='%23s' x='59'/%3E%3Cuse href='%23s' x='88.5'/%3E%3Cuse href='%23s' x='118'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 21'%3E%3Cdefs%3E%3Cpolygon id='s' points='10.75,2.2 12.87,7.88 18.93,8.14 14.18,11.92 15.81,17.76 10.75,14.41 5.69,17.76 7.32,11.92 2.57,8.14 8.63,7.88' fill='%23000' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/defs%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='29.5'/%3E%3Cuse href='%23s' x='59'/%3E%3Cuse href='%23s' x='88.5'/%3E%3Cuse href='%23s' x='118'/%3E%3C/svg%3E") no-repeat 0 0 / contain; }
.gmark::before { content: ""; position: absolute; inset: 0; width: var(--rating, 100%); background: var(--navy); }
/* Piste : la carte active s'aligne sur le conteneur, la suivante dépasse au bord droit. */
.reco-viewport { overflow: hidden; }
.reco-track { display: flex; gap: 240px; padding-left: calc(max((100vw - 1320px) / 2, 0px) + 40px); transition: transform 0.8s ease; will-change: transform; }
.reco-slide { flex: 0 0 auto; width: 800px; display: flex; gap: 32px; align-items: stretch; }
.reco__media { flex: 0 0 430px; aspect-ratio: 430 / 495; overflow: hidden; }
.reco__media img { width: 100%; height: 100%; object-fit: cover; }
/* Corps : étoiles en haut, puis bloc nom/titre/texte poussé vers le bas (margin-top auto),
   flèches JUSTE sous le texte (32px) — pas d'écart flottant, comme Elliman. */
.reco__body { width: 338px; display: flex; flex-direction: column; }
.reco__content { margin-top: auto; }
/* Nom en OR Bosquet (Elliman utilise son teal .testimony__author__name), titre du projet en SERIF (Sainte Colombe). */
.reco__author { font-size: 0.875rem; line-height: 1.2; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 24px; }
.reco__project-title { font-family: var(--font-serif); font-style: normal; font-weight: 300; font-size: 1.758rem; line-height: 1.2; color: var(--navy); margin: 0; }
.reco__text { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 20px 0 0; }
.reco__nav { display: flex; gap: 0.5em; margin-top: 32px; }
@media (max-width: 900px) {
	/* Mobile : cartes empilées verticalement (image pleine largeur 0.87 puis corps), pas de 100vw-48. */
	.reco__head { margin-bottom: 40px; }
	.reco__heading { font-size: 1.75rem; }
	.reco-track { gap: 30px; padding-left: var(--sp-3); }
	.reco-slide { width: calc(100vw - 48px); flex-direction: column; gap: var(--sp-3); }
	.reco__media { flex: none; width: 100%; aspect-ratio: 360 / 414; }
	.reco__body { width: 100%; }
	/* Étoiles → nom : 24px (mesuré chez Elliman mobile), au lieu du bloc collé aux étoiles. */
	.reco__content { margin: 24px 0 var(--sp-3); }
}

@media (max-width: 900px) {
	.accomp { grid-template-columns: 1fr; }
	.accomp__media { min-height: 300px; order: -1; }
	.reco__slide.is-active { grid-template-columns: 1fr; }
	.reco__media { order: -1; }
}

/* =========================================================================
   19. FICHE BIEN — structure façon Elliman
   ========================================================================= */

/* Hauteur du hero single-bien alignée sur Elliman (.hero-slider : 600px). */
.listing-hero { position: relative; height: 600px; overflow: hidden; background: var(--navy-deep); }
@media (max-width: 900px) { .listing-hero { height: 56vh; min-height: 320px; } }
.listing-hero img { width: 100%; height: 100%; object-fit: cover; }
/* Slider hero : piste qui glisse d'une photo à l'autre. */
.listing-hero__track { display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.19,1,0.22,1); }
.listing-hero__slide { flex: 0 0 100%; height: 100%; position: relative; }
.listing-hero__slide img { display: block; }
/* Dernière slide « Envie d'en voir plus » : dernière image floutée + voile navy + contenu centré (façon Elliman). */
.listing-hero__last-bg { position: absolute; inset: 0; }
.listing-hero__last-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background: rgba(16,11,40,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.listing-hero__last-content { max-width: 460px; padding: 0 clamp(56px, 12vw, 68px); }
.listing-hero__last-title { font-family: var(--font-display); font-size: clamp(1.25rem, 5vw, 1.6rem); margin-bottom: var(--sp-2); }
.listing-hero__last-descr { color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: var(--sp-3); }
.listing-hero__last .listing-hero__btn { position: static; left: auto; right: auto; bottom: auto; transform: none; margin: 0 auto; }
/* Sur la dernière slide, le bouton d'angle est masqué (seul le CTA centré de la slide reste). */
.listing-hero.is-last .listing-hero__btn--corner { opacity: 0; pointer-events: none; }
/* Carte : Leaflet + tuiles claires Carto Positron (rendu épuré façon Elliman). */
/* Elliman .leaflet-container : aucune bordure autour de la carte. */
.listing-map { display: block; height: 380px; margin-top: var(--sp-2); border: 0; background: #eae6df; z-index: 0; }
.listing-map .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,0.7); }
/* Bouton galerie = Elliman .btn.--dark-blue.--gallery : navy #100b28, icône 22px blanche, hover or var(--gold-deep). */
/* Elliman span.btn.--dark-blue.--gallery : 197x39, padding 10/24, poids 300, gap icone/texte 12px. */
/* Aligné sur la colonne de contenu (x95 à 1440), pas collé au bord : Elliman
   div.hero-slider__cta = left 95px / bottom 24px. Même calcul que .banner-quote__card. */
.listing-hero__btn { position: absolute; left: max(var(--sp-4), calc((100vw - var(--wrap)) / 2 + var(--sp-4))); bottom: 24px; z-index: 3; display: inline-flex; align-items: center; white-space: nowrap; gap: 12px; background: #100b28; color: #fff; padding: 10px 24px; font-size: 12px; font-weight: 300; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; border: 1px solid #100b28; cursor: pointer; transition: background var(--transition); }
.listing-hero__btn:hover { background: var(--gold-deep); }
.listing-hero__btn .ico { color: #fff; width: 21px; height: 14px; }
.listing-hero__arrows { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.listing-hero__arrows button { pointer-events: auto; margin: 0; padding: 0; width: 44px; height: 44px; border-radius: 0; border: 1px solid #fff; background: #fff; color: #100b28; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; transition: color var(--transition); }
.listing-hero__arrows button:hover { color: #b8995f; }

/* Elliman : contenu 823 + gouttière 30 + carte 397 = les 1250 de la colonne. */
.listing-wrap { display: grid; grid-template-columns: 1fr 397px; gap: 30px; align-items: start; position: relative; z-index: 5; }
.listing-main { min-width: 0; }
/* Carte sticky : PAS de margin négative dessus (sinon le haut passe sous le header au scroll). */
/* Carte : la colonne remonte SUR le hero (façon Elliman .single-col-card, margin négatif + z-index),
   et les onglets sont dans la colonne de gauche → la ville n'est plus jamais masquée. */
/* Carte prix : chevauche le bas du hero de 120px (verifie sur elliman.fr : .single-card a
   y602 alors que le hero finit a 722). C'est le rendu Elliman, pas un label ville. */
.listing-card { position: sticky; top: var(--sp-3); font-size: 0.875rem; line-height: 1.4; margin-top: -120px; z-index: 2; border: 0; padding: 24px; text-align: center; background: var(--cream); }
.listing-section h1 { font-size: 1.465rem; line-height: 1.2; margin-bottom: 0; }
/* Interlignes explicites : sans eux le 1.7 du body gonflait la carte de 88px
   (ville 39.8 au lieu de 28.1, prix 47.8 au lieu de 33.75, nom 27.2 au lieu de 22.4). */
.listing-card__type { font-size: 0.75rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--navy); }
.listing-card__city { font-family: var(--font-display); font-size: 1.465rem; line-height: 1.2; font-weight: 300; margin: 8px 0 0; }
.listing-card__price { font-family: var(--font-display); font-size: 1.758rem; line-height: 1.2; font-weight: 300; color: var(--navy); margin-top: 8px; }
.listing-card__price small { font-size: 0.85rem; color: var(--muted); font-family: var(--font-sans); }
.listing-card__fees { font-size: 0.75rem; line-height: 1.4; color: #9f9da9; margin-top: 8px; }
.listing-card__ask { display: inline-block; line-height: 1.4; padding-bottom: 8px; margin: 20px 0 0; }
/* Bouton à la largeur de son contenu et centré (Elliman span.btn 161x39), pas pleine largeur. */
.listing-card .btn { width: auto; justify-content: center; margin-top: 0; border-radius: 0; }
.listing-card__agent { border-top: 1px solid var(--hairline); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.listing-card__avatar { width: 155px; height: 155px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; overflow: hidden; border: 0; background: var(--navy); color: var(--gold); font-family: var(--font-display); font-size: 3rem; }
.listing-card__agent .name { font-size: 1rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }

/* Onglets sticky */
/* Barre d'ancres Elliman (#section-anchors.ui-tabs) : onglets de LARGEUR EGALE remplissant la
   barre (206px chacun sur 823), texte 12px MAJUSCULES centre, padding 20/24, rangee a 57px.
   Le soulignement actif est un ::before de 2px or sur TOUTE la largeur de l'onglet. */
.listing-tabs { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--hairline); display: flex; gap: 0; }
.listing-tabs a { position: relative; flex: 1 1 0; padding: 20px 24px; font-size: 0.875rem; line-height: 1.4; letter-spacing: normal; text-transform: none; text-align: center; color: var(--navy); border-bottom: 0; }  /* Elliman .ui-tabs a : 14px, casse normale (pas capitales) */
.listing-tabs a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--gold-deep); opacity: 0; transition: opacity var(--transition); }
.listing-tabs a.is-active::before, .listing-tabs a:hover::before { opacity: 1; }

/* Sections : séparateur #dedede + padding, façon Elliman .single-section. */
.listing-section { padding: 60px 0; border-bottom: 1px solid #dedede; scroll-margin-top: 64px; }
/* 60px sous les onglets : chez Elliman ils viennent du padding du conteneur div.single-sections
   (60/60), que Bosquet n'a pas. Ne PAS remettre a 0 en lisant le padding 0/60 de #section-intro :
   c'est le conteneur qui porte l'espace, pas la section. */
.listing-section:first-of-type { padding-top: 60px; }
/* Caractéristiques : pas de padding propre, les collapsibles portent leur 60/60 (comme Elliman). */
#caracteristiques.listing-section { padding: 0; border-bottom: 0; }
/* Elliman #section-localisation est en 60/0, mais les 60px sous la carte viennent du
   padding-bottom du conteneur .single-sections. Bosquet n'ayant pas ce conteneur, la section
   doit les porter elle-meme, sinon le bloc agence est colle a la carte. */
#localisation.listing-section { padding-bottom: 60px; }
/* Elliman .push-biens : 120px de respiration de part et d'autre (margin du conteneur),
   titre puis piste séparés de 60px. Mesuré : section 620px de haut. */
.section--related { padding: 120px 0; }
.section__head--related { text-align: left; margin-bottom: 60px; }
/* ⚠️ En mobile, `.carousel__nav--corner` (absolue en haut à droite) tombait SUR le titre :
   calibrée pour un titre desktop sur une ligne, elle se superpose dès qu'il en occupe
   plusieurs et prend toute la largeur. Relevé chez Elliman en mobile : titre CENTRÉ, puis
   flèches CENTRÉES en dessous, dans le flux. On reprend ce comportement. */
/* Valeurs RELEVÉES chez Elliman en 390px (elliman.fr/propriete/…, mesure au DOM) :
   titre 28px/33,6 centré · boutons 38×38 bordure 1px · écart titre→flèches 24px ·
   écart flèches→piste 24px · gap 8px. Le 70px de section est notre `space-xl` mobile. */
@media (max-width: 900px) {
	.section--related { padding: 70px 0; }
	.section__head--related { text-align: center; margin-bottom: 0; }
	.section__head--related h2 { font-size: 1.75rem; }
	.carousel--related .carousel__nav--corner {
		position: static; justify-content: center; gap: 8px; margin: 24px 0;
	}
}
/* Elliman réduit TOUTES ses flèches à 38×38 en mobile (44×44 en desktop) — vérifié sur
   leurs trois composants : fiche bien, accueil et /a-propos/nos-metiers/, aux deux largeurs.
   Une seule règle pour nos deux familles de flèches, plutôt qu'un correctif par carrousel.
   (`.push-nav` est masquée en mobile, elle n'est pas concernée.) */
@media (max-width: 900px) {
	.carousel__btn, .edito__arrow { width: 38px; height: 38px; }
}
.listing-section:last-child { border-bottom: 0; }
/* « Réf. » en tête de l'intro (façon .section-intro__ref : 12px gris). */
.listing-intro__ref { font-size: 12px; line-height: 1.4; color: #9f9da9; margin-bottom: 8px; }
.listing-intro__title { font-weight: 300; }
.listing-section h2 { font-size: 1.172rem; font-weight: 300; margin-bottom: 24px; }
.quick-specs { display: flex; flex-wrap: wrap; gap: 60px; margin: 40px 0 var(--sp-3); }
.quick-specs span { font-size: 12px; letter-spacing: normal; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 0.6em; }
.quick-specs .n { font-family: var(--font-display); font-size: 12px; color: var(--navy); }

/* Accordéon caractéristiques */
.acc details { border-bottom: 1px solid #dedede; padding: 60px 0; }
.acc details[open] > summary { margin-bottom: var(--sp-2); }
/* line-height 1.2 : sans ça la line-height du body (1.7) porte le summary à 38px
   au lieu des 23px d'Elliman (.single-section__heading), et gonfle chaque bloc de 15px. */
.acc summary { list-style: none; cursor: pointer; padding: 0; font-family: var(--font-display); font-size: 1.172rem; line-height: 1.2; display: flex; justify-content: space-between; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--gold-deep); font-size: 1.4rem; line-height: 1; }
.acc details[open] summary::after { content: "–"; }
.acc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em var(--sp-4); padding: 0 0 var(--sp-3); }
.acc__grid div { font-size: 0.9rem; color: var(--muted); border-bottom: 1px dotted var(--hairline); padding: 0.5em 0; }
.acc__grid b { color: var(--ink); font-weight: 500; }

/* Prestations & proximités — pictogramme + libellé sur 2 colonnes.
   Pas de puce ni de pastille : le picto EST la puce (cf. inc/amenities.php). */
.amenities { padding: 0 0 var(--sp-3); }
.amenities__group { margin: var(--sp-3) 0 var(--sp-2); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); line-height: 1.4; }
.amenities__group:first-child { margin-top: var(--sp-2); }
.amenities__list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--sp-4); list-style: none; margin: 0; padding: 0; }
.amenity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.amenity__ico { flex: 0 0 auto; color: var(--navy); opacity: 0.85; }
.amenity__label { font-size: 0.94rem; line-height: 1.35; color: var(--ink); }

/* Conseiller + agence (façon Elliman section-agent + section-agence), en bas de l'annonce.
   Mobile : centré, empilé. Desktop : conseiller centré, agence en ligne (photo + texte). */
.section-agent { text-align: center; padding: var(--sp-5) var(--sp-3); }
.section-agent__photo { width: 155px; height: 155px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--sp-3); display: block; }
.section-agent__photo--ph { display: grid; place-items: center; background: var(--navy); color: var(--gold); font-family: var(--font-display); font-size: 3rem; }
.section-agent__name { font-size: 1.35rem; letter-spacing: normal; text-transform: uppercase; color: var(--ink); }
.section-agent__role { font-size: 0.8rem; color: var(--muted); margin-top: 0.3em; }
.section-agent__cta { margin-top: var(--sp-3); }

.section-agence { background: #fbfbf9; border-top: 1px solid #f3f3f4; text-align: center; padding: var(--sp-5) var(--sp-3); }
/* Corps en colonne : « En savoir plus » AU-DESSUS de « Contacter l'agence » (empilés). */
.section-agence__body { display: flex; flex-direction: column; align-items: center; }
.section-agence__photo { width: 145px; height: 145px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--sp-3); display: block; }
.section-agence__name { font-size: 1rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--ink); }
.section-agence__addr { font-size: 0.86rem; color: var(--muted); line-height: 1.5; margin-top: 0.4em; }
/* Écart mesuré chez Elliman entre « En savoir plus » et « Contacter l'agence » : 24px. */
.section-agence__actions { display: flex; align-items: center; gap: 24px; margin-top: var(--sp-3); flex-wrap: wrap; }
.section-agence__more { display: inline-block; margin: 0; font-size: 0.75rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; border-bottom: 0; padding-bottom: 0; }
.section-agence__cta { display: inline-flex; margin-top: 0; }
@media (min-width: 901px) {
	/* Desktop : l'agence passe en ligne (photo 145px + texte aligné à gauche), façon Elliman --image-col. */
	/* Desktop : le conseiller reste dans la carte prix → on masque le bloc du bas. */
	.section-agent { display: none; }
	.section-agence { display: flex; align-items: center; gap: var(--sp-4); text-align: left; padding: 40px; }
	/* Desktop : « En savoir plus » et « Contacter l'agence » redeviennent côte à côte (empilés = mobile). */
	.section-agence__body { display: block; }
	.section-agence__photo { width: 145px; height: 145px; margin: 0; flex: 0 0 auto; }
	/* Plus de margin-top : c'est .section-agence__actions qui gère l'espacement, et un margin
	   ici décalait le centrage vertical de 8px face au bouton « Contacter l'agence ». */
	.section-agence__more { margin-top: 0; }
}

/* =========================================================================
   20. LIGHTBOX GALERIE (bouton « Voir les N photos »)
   ========================================================================= */
/* Galerie plein écran = modale claire façon Elliman .ui-modal__overlay : voile blanc,
   image centrée, flèches carrées blanches sur les bords, miniatures en bas, croix en haut à droite. */
/* Lightbox galerie — reproduction de la modale Elliman (.ui-modal / swiper-gallery) :
   overlay NOIR 0.9, image qui remplit l'espace au-dessus d'une bande de miniatures,
   fleches transparentes aux bords, miniatures inactives dimuees. Mesures prises sur
   elliman.fr/propriete/villa-veronica/ en desktop 1280 ET mobile 375. z-index tres
   haut pour passer au-dessus de tout (header inclus). */
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.9); display: none; flex-direction: column; align-items: center; padding: 60px 15px 16px; }
.lightbox.is-open { display: flex; }
/* Close : croix FINE blanche = Elliman .ui-modal__close — deux barres 28x1.5px croisees a
   ±45deg (pseudo-elements), pas un glyphe × epais. */
.lightbox__close { position: absolute; top: 20px; right: 15px; z-index: 3; width: 28px; height: 28px; background: none; border: 0; padding: 0; font-size: 0; cursor: pointer; opacity: 0.9; transition: opacity var(--transition); }
.lightbox__close:hover { opacity: 1; }
.lightbox__close::before, .lightbox__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 1.5px; background: #fff; }
.lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* Zone image : pleine largeur, occupe toute la hauteur au-dessus des miniatures. */
.lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; flex: 1 1 auto; min-height: 0; }
.lightbox__viewport { overflow: hidden; width: 100%; max-width: 1180px; height: 100%; margin: 0 auto; }
.lightbox__track { display: flex; height: 100%; will-change: transform; transition: transform 0.5s cubic-bezier(0.19,1,0.22,1); }
.lightbox__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; }
/* width/height 100% + contain : l'image occupe toute la zone (comme Elliman), en gardant
   son ratio. Sur les vraies photos haute-def elle remplit net ; sur le demo basse-def (680px)
   elle est simplement mise a l'echelle. */
.lightbox__slide img, .lightbox__img { width: 100%; height: 100%; object-fit: contain; }
/* Fleches : rectangles TRANSPARENTS 44x72 aux bords de l'ecran, chevron blanc (Elliman
   .swiper-arrow --left/--right) — plus de boutons blancs a ombre. */
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 72px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.85; transition: opacity var(--transition); }
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav[data-lb-prev] { left: 15px; }
.lightbox__nav[data-lb-next] { right: 15px; }
/* Bande de miniatures : 100x56, inactives a 0.4, active/hover a 1 (Elliman .swiper-gallery-thumbs). */
.lightbox__thumbs { display: flex; gap: 8px; margin-top: 16px; max-width: 100%; overflow-x: auto; padding-bottom: 4px; flex: 0 0 auto; }
.lightbox__thumbs img { width: 100px; height: 56px; object-fit: cover; opacity: 0.4; cursor: pointer; flex: 0 0 auto; transition: opacity 0.2s; }
.lightbox__thumbs img.is-active, .lightbox__thumbs img:hover { opacity: 1; }
.lightbox__counter { display: none; }

@media (max-width: 900px) {
	.listing-wrap { grid-template-columns: 1fr; row-gap: 0; }
	/* Mobile (façon Elliman) : la carte remonte juste sous le hero, avant le contenu. */
	.breadcrumb { display: none; }
	/* Carte prix = bande pleine largeur (bord à bord), sans encadré ni ombre.
	   Padding resserré (24px, façon Elliman single-card ~203px de haut, pas 306px). */
	.listing-card { position: static; order: -1; margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4); border: 0; border-bottom: 1px solid var(--hairline); box-shadow: none; }
	.listing-card__city { margin: 0.1em 0; }
	.listing-card__ask { margin: var(--sp-2) 0 0; }
	/* Le contenu démarre juste sous la carte (pas de grand vide, façon Elliman). */
	#introduction { padding-top: var(--sp-3); }
	/* Sections plus denses sur mobile (64px → 40px de padding, façon Elliman). */
	.listing-section { padding: var(--sp-4) 0; }
	/* Mobile : le conseiller n'est PAS dans la carte (il est en bas dans .section-agent). */
	.listing-card__agent { display: none; }
	/* Typo carte = single-card__heading d'Elliman à l'identique (Euclid, base 14px,
	   titre title--sm 20px, prix title--md 24px poids normal, indication 14px). */
	.listing-card__type { font-size: 13px; letter-spacing: normal; }
	.listing-card__city { font-size: 20px; }
	.listing-card__price { font-size: 24px; font-weight: 400; }
	.listing-card__price small { font-size: 0.7em; }
	.listing-card__fees { font-size: 14px; }
	.listing-card__ask { font-size: 13px; }
	/* Onglets et sur-titre (eyebrow) masqués sur mobile (façon Elliman single mobile). */
	.listing-tabs { display: none; }
	.listing-section .eyebrow { display: none; }
	/* Conseiller + agence : bandes pleine largeur, même fond crème. */
	.section-agent, .section-agence { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); }
	.section-agent { background: #fbfbf9; }
	/* Bouton photos = pastille centrée en bas du hero (façon Elliman .hero-slider__cta mobile). */
	.listing-hero__btn { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--sp-3); width: auto; justify-content: center; padding: 15px 30px; }
	.acc__grid { grid-template-columns: 1fr; }
	/* Une seule colonne : les libellés longs (« Terrain de pétanque… ») ne doivent pas se casser. */
	.amenities__list { grid-template-columns: 1fr; gap: 18px; }
	.amenity { gap: 14px; }
	/* Titre du bien = 20px sur mobile (façon Elliman .section-intro__title.title--sm). */
	.listing-section h1.listing-intro__title { font-size: 20px; }
	/* Lightbox mobile : image contenue, flèches plus petites, moins de padding. */
	.lightbox { padding: var(--sp-4) var(--sp-2) var(--sp-2); }
	.lightbox__nav { width: 40px; height: 52px; font-size: 1.1rem; }
	.lightbox__img, .lightbox__slide img { max-height: 62vh; }
	/* Flèches du slider hero un peu plus compactes sur mobile. */
	.listing-hero__arrows button { width: 44px; height: 52px; }
}

/* =========================================================================
   21. DESTINATIONS — carrousel en boucle automatique (marquee infini, façon Elliman)
   ========================================================================= */
.dest-marquee { position: relative; overflow: hidden; padding: var(--sp-2) 0; }
/* 80s : le ruban défile de -50 % (2 jeux) par cycle → même vitesse px/s qu'Elliman (40s/-100 %, 1 jeu). */
.dest-marquee__track { display: flex; gap: 16px; width: max-content; padding: 0 16px; animation: dest-scroll 80s linear infinite; }
.dest-marquee:hover .dest-marquee__track { animation-play-state: paused; }
@keyframes dest-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.dest-marquee__track { animation: none; overflow-x: auto; }
}

/* =========================================================================
   22. TUILE PROMO (illustration au trait + titre + bouton) — grille Actualités
   ========================================================================= */
.promo-tile { position: relative; min-height: 420px; background: var(--navy-deep); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-4); }
.promo-tile__bg { position: absolute; inset: 0; z-index: 0; }
.promo-tile__bg img { width: 100%; height: 100%; object-fit: cover; object-position: bottom center; }
.promo-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, var(--navy-deep) 8%, rgba(22,26,53,0.35) 55%, transparent 80%); }
.promo-tile > * { position: relative; z-index: 2; }
.promo-tile h3 { color: #fff; font-size: 1.9rem; line-height: 1.15; margin: 0; max-width: 12ch; }
.promo-tile .btn { align-self: flex-start; }

/* =========================================================================
   23. FACETTES (moteur maison, type FacetWP) — compteurs + multi-sélection
   ========================================================================= */
.facet__label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: normal; color: var(--gold-deep); margin-bottom: 0.7em; }
.facet__opts { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow: auto; }
.facet__opts li { margin-bottom: 0.35em; }
.facet__opts li.child { padding-left: 1.3em; }
.facet__opts label { display: flex; align-items: center; gap: 0.5em; font-size: 0.86rem; cursor: pointer; color: var(--ink); }
.facet__opts label input { accent-color: var(--navy); }
.facet__opts label em { margin-left: auto; font-style: normal; font-size: 0.72rem; color: var(--muted); }
.facet__opts label.is-checked span { color: var(--gold-deep); font-weight: 500; }
/* Les règles `.facet-chips` / `.facet-chip` ont été supprimées le 2026-08-31 en même temps
   que le balisage (cf. archive-bien.php) : les pastilles de filtres actifs faisaient doublon
   avec la barre de filtres. Ne pas les réintroduire sans retirer l'affichage des valeurs
   actives dans les champs, sous peine de dire deux fois la même chose. */
.facet-reset { display: inline-block; padding: 0.6em var(--sp-3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: normal; color: var(--gold-deep); }
.facet .range { display: flex; gap: 0.5em; margin-top: 0.2em; }
.facet .range input { width: 100%; border: 1px solid var(--hairline); padding: 0.55em; font-family: var(--font-sans); font-size: 0.85rem; background: #fff; }

/* =========================================================================
   Filtres façon Elliman : barre horizontale (desktop) / overlay (mobile)
   ========================================================================= */
/* Carte de recherche = même langage visuel que la .search-card de l'accueil (calqué Elliman
   search-engine-form) : fond blanc + ombre portée, contrôles en boîtes gris clair (#f7f7f7)
   de 50px, filets verticaux entre champs, bouton navy. */
.filters { background: transparent; margin-bottom: 0; }
.filters__ovhead { display: none; }

/* Elliman .search-layer : bloc de 147px de haut PUIS 60px de marge avant le listing.
   Bosquet faisait 190 parce que ses 40px de padding bas servaient d'espacement — d'où une
   barre trop haute ET une respiration trop courte. On sépare les deux rôles. */
.filterbar { padding: 40px 0 0; margin-bottom: 60px; }
.filterbar__row { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
/* Colonnes de largeur FIXE 218px (= form-control Elliman), et non plus etirees.
   Sans ca, une page ville (3 champs au lieu de 4) repartissait les 1250px en champs
   de 283px : /louer/ affichait 218, /louer/paris/ affichait 283 pour le meme composant.
   En fixe : /louer/ = 5x218 + 4x40 = 1250 pile ; les pages ville laissent le blanc a droite. */
.filterbar__field { position: relative; display: flex; flex-direction: column; flex: 0 0 218px; min-width: 0; }
.filterbar__field > label { font-size: 0.75rem; line-height: 1.4; text-transform: uppercase; letter-spacing: normal; color: #000; margin-bottom: 8px; }
/* lh 1.4 = 16.8px -> label h17 comme Elliman (.form-control-label). Sans ca le 1.7 du body
   donne h20 et decale toute la barre de 3px (champs a 431 au lieu de 428, barre 150 au lieu de 147). */
/* Filet vertical fin entre les champs de la ligne principale (= .search-fields .field::after). */
.filterbar__row > .filterbar__field:not(:last-of-type)::after { content: ""; position: absolute; right: calc(var(--sp-4) / -2); top: 0; bottom: 0; width: 1px; background: #dedede; }
/* Contrôles = boîtes gris clair 50px, angles droits, chevron custom (façon Elliman --input-*). */
.filterbar select,
.filterbar__range input,
.filterbar__field > input[type="text"] { width: 100%; height: 42px; border: 1px solid transparent; background: var(--cream); border-radius: 0; padding: 0 16px; font-family: var(--font-sans); font-size: 0.75rem; color: #000; outline: none; transition: border-color var(--transition); }
.filterbar select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239f9da9' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.95em center; }
.filterbar select:focus, .filterbar__range input:focus, .filterbar__field > input[type="text"]:focus { border-color: var(--gold); }
.filterbar input::placeholder { color: #9f9da9; }
.filterbar__range { display: flex; gap: 12px; }
/* En flex, flex-basis:0 + min-width:0 laisse les deux champs partager la largeur (budget, surfaces). */
.filterbar__range input { flex: 1 1 0; min-width: 0; }
.stepper { width: 100%; }
.stepper input { min-width: 0; }
.filterbar, .filterbar__row, .filterbar__adv { min-width: 0; }
.filterbar__submit { flex: 0 0 218px; min-width: 0; justify-content: flex-end; }  /* meme colonne fixe 218px que les champs, bouton pleine largeur */
.filterbar__submit .btn { width: 100%; justify-content: center; white-space: nowrap; height: auto; padding: 10px 24px; line-height: 1.4; text-transform: uppercase; letter-spacing: normal; font-size: 0.75rem; }

/* Stepper − N + */
.stepper { display: flex; align-items: center; height: 42px; background: var(--cream); }
.stepper button { width: 39px; height: 42px; border: 0; background: transparent; color: var(--gold-deep); font-size: 0.875rem; line-height: 1.4; padding: 0 16px; cursor: pointer; }  /* Elliman .qty__action : 39x42, 14px/19.6, padding 0 16px */
.stepper button:hover { color: var(--ink); }
.stepper input { flex: 1; align-self: stretch; text-align: center; border: 0; background: transparent; font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.4; color: var(--ink); -moz-appearance: textfield; padding: 0; }  /* Elliman .qty__input : 12px/16.8 en sans, pas en serif */
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Recherche avancée */
.filterbar__adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.filterbar__adv[hidden] { display: none; }
/* Relevé sur elliman.fr/acheter le 2026-08-31 : « Recherche avancée » se place SOUS le bouton
   Rechercher, alignée sur son bord GAUCHE (et non à droite du conteneur), à 12px sous lui.
   Bosquet l'affichait alignée à droite et 25px plus bas. On reproduit la colonne du bouton
   (218px, cf. .filterbar__submit) pour que l'alignement suive automatiquement si la largeur
   de colonne change. */
.filterbar__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: 12px; }
.filterbar__foot .filterbar__adv-toggle { flex: 0 0 218px; text-align: left; }
/* `padding: 0` et non `padding-bottom: 0` : les <button> portent un padding horizontal par
   défaut (1px 6px) qui décalait le libellé de 6px vers la droite du bord du bouton Rechercher. */
.filterbar__adv-toggle { background: none; border: 0; cursor: pointer; font-size: 0.75rem; letter-spacing: normal; text-transform: none; color: #878593; padding: 0; }
.filterbar__adv-toggle:hover { color: var(--ink); border-bottom-color: var(--ink); }
.filterbar__submit-mobile { display: none; }

.toolbar__right { display: flex; align-items: center; gap: var(--sp-3); }
.filters-fab { display: none; }

@media (max-width: 900px) {
	/* La barre devient un overlay plein écran déclenché par le bouton « Filtres ». */
	/* Drawer ~88% (pas plein ecran) qui glisse depuis la gauche, comme Elliman .search-layer :
	   le reste de l'ecran laisse voir la page sous un scrim sombre. */
	.filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(88%, 420px); z-index: 200; margin: 0; border: 0; background: #fff; overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform 0.35s var(--transition); visibility: hidden; }
	.filters.is-open { transform: translateX(0); visibility: visible; }
	/* Scrim sombre derriere le drawer (= .search-layer__overlay d'Elliman, rgba(0,0,0,.7)).
	   Tap dessus = fermeture (gere en JS via clic hors panneau). */
	body.filters-locked::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 190; }
	.filters__ovhead { display: flex; align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: #fff; z-index: 2; }
	.filters__close { background: none; border: 0; cursor: pointer; font-size: 0.74rem; letter-spacing: normal; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 0.5em; }
	.filters__close span { color: var(--gold-deep); font-size: 1.2rem; }

	.filterbar { padding: var(--sp-3) var(--sp-3); }
	.filters__ovhead { padding: var(--sp-3); }
	.filterbar__row { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
	/* En colonne, un flex-basis de 218px figerait la HAUTEUR du champ : on repasse en auto pleine largeur. */
	.filterbar__field { flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; }
	.filterbar__adv { grid-template-columns: 1fr; }
	.filterbar__submit { display: none; }
	.filterbar__foot { flex-direction: column-reverse; align-items: stretch; }
	.filterbar__submit-mobile { display: inline-flex; justify-content: center; width: 100%; }
	.filterbar__adv-toggle { align-self: center; margin-top: var(--sp-2); }

	.filters-fab { display: inline-flex; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 150; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 0; padding: 1.05em 2.6em; font-size: 0.74rem; letter-spacing: normal; text-transform: uppercase; box-shadow: 0 12px 30px -10px rgba(13,16,36,0.5); cursor: pointer; }
	/* Le FAB Filtres (z-150) passait par-dessus le menu mobile ouvert (z-95) et chevauchait
	   le bouton Contactez-nous : on le masque quand le menu est ouvert. */
	body.menu-open .filters-fab { display: none; }
}
body.filters-locked { overflow: hidden; }

/* ===== Pages de localisation (ville / région) — hero dynamique + barre de filtres ===== */
.loc-hero { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; }
.loc-hero__bg { position: absolute; inset: 0; z-index: 0; }
.loc-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,16,36,0.42), rgba(13,16,36,0.55)); }
.loc-hero__inner { position: relative; z-index: 2; padding: calc(var(--header-h) + var(--sp-4)) var(--sp-3) var(--sp-6); max-width: 1100px; }
.loc-hero__crumb { font-size: 0.72rem; letter-spacing: normal; color: rgba(255,255,255,0.85); margin-bottom: var(--sp-3); }
.loc-hero__crumb a { color: rgba(255,255,255,0.85); }
.loc-hero__crumb a:hover { color: #fff; }
.loc-hero h1 { color: #fff; font-weight: 300; line-height: 1.2; font-size: clamp(2.25rem, 3.6vw, 2.637rem); margin: 0; }
/* Bloc SEO bas de page (villes/régions + /louer/) = .seo d'Elliman : titre title--lg,
   texte clampé à ~6 lignes avec dégradé blanc + « Lire le texte complet ». */
.seo-block h2 { font-family: var(--font-display); font-size: 2.344rem; font-weight: 300; line-height: 1.2; color: var(--navy); margin: 0; }
.seo-block__descr { position: relative; max-height: 118px; overflow: hidden; margin-top: 40px; }
.seo-block__descr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 82px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.8)); pointer-events: none; }
.seo-block.is-open .seo-block__descr { max-height: none; }
.seo-block.is-open .seo-block__descr::after, .seo-block.no-clamp .seo-block__descr::after { display: none; }
.seo-block.is-open .seo-block__more, .seo-block.no-clamp .seo-block__more { display: none; }
.seo-block__more { display: inline-block; background: none; border: 0; cursor: pointer; margin-top: 24px; padding: 0 0 2px;  /* Elliman .seo__descr__link : margin 24px 0 0 */ font-family: var(--font-sans); font-size: 0.875rem; color: var(--navy); border-bottom: 1px solid var(--navy); }
.seo-block p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0; }
/* Grille de liens villes (= .seo__links Elliman : margin 40 0 0, 3 colonnes, liens 14px/19.6). */
.seo-block__links { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 0; margin-top: 40px; max-width: 837px; }
.seo-block__link { display: block; padding: 2px 0; font-size: 0.875rem; line-height: 1.4; color: var(--navy); text-decoration: none; }
.seo-block__link:hover { text-decoration: underline; }
@media (max-width: 700px) { .seo-block__links { grid-template-columns: repeat(2, 1fr); } }

/* Même piège que .cat-body : .section (padding: var(--sp-6) 0) écrase le padding horizontal
   de .wrap. Sans padding latéral explicite, le contenu s'étalait sur 1330px à x=55 et les
   cartes faisaient 432 au lieu de 406. Bas à 60px comme section.listing d'Elliman (0/60). */
.loc-body { padding: 0 var(--sp-4) 80px; }  /* Elliman : 80px entre le bloc SEO et le footer */
/* La barre de filtres remonte sur le bas du hero (façon Elliman /acheter/paris/) */
.loc-filters { position: relative; z-index: 5; margin-top: 0; margin-bottom: 0; }
.toolbar--loc { align-items: center; padding: 0; border-bottom: 0; margin-bottom: 40px; }
/* = .listing__heading d'Elliman : h42, padding 0, AUCUNE bordure, margin 0 0 40px, align center.
   Avec padding 24px 0 + marge 64 le bloc faisait 92+64 et poussait la grille a y726 au lieu de 652. */
.loc-results-title { font-size: 1.758rem; font-weight: 300; line-height: 1.2; margin: 0; }

/* Pages catégorie /acheter/ & /louer/ : hero clair (crème), titre centré fin (façon Elliman). */
/* Fond CREME. ⚠️ NE PAS repasser en blanc : mesure sur elliman.fr/louer/, son
   section.intro-simple a bg rgb(251,251,249) et padding 60/0/80. C'est /actualites/ qui a
   un intro-simple TRANSPARENT — meme classe chez lui, fond different selon la page.
   J'ai deja fait l'erreur de generaliser la reference actualites aux listings. */
.cat-hero { background: var(--cream); text-align: center; padding: 60px var(--sp-3) 80px; }
/* Fil d'ariane des listings : hors du bandeau creme, aligne a GAUCHE, rangee de 41px
   (Elliman #breadcrumb : y81 h41, padding 12/12, texte 12px, aligne au bord du contenu). */
.cat-crumb { padding: 12px var(--sp-4); }
/* Chez Elliman le contenu demarre a la hauteur du header (81) et c'est le fil d'ariane qui
   occupe la bande 81->122. Le padding-top de 122 du theme incluait deja cette bande : sur les
   pages qui portent desormais un vrai fil d'ariane, on le ramene a la hauteur du header. */
body:not(.has-hero) .site-content:has(> .cat-crumb) { padding-top: var(--header-h); }
.cat-hero__crumb { font-size: 0.75rem; line-height: 1.4; letter-spacing: normal; color: var(--muted); text-align: left; margin-bottom: 0; }
.cat-hero__crumb a { color: var(--muted); }
.cat-hero__crumb a:hover { color: var(--ink); }
/* Relevé Elliman : la page COURANTE du fil d'ariane est mise en accent (chez eux
   rgb(0,156,189), leur teal) tandis que les liens parents restent neutres. Bosquet rendait
   toute la ligne en gris : on reprend le PRINCIPE, pas la couleur — l'accent de la maison
   est l'or, le teal appartient à la charte Elliman. */
.cat-hero__crumb [aria-current="page"] { color: var(--gold-deep); font-weight: inherit; }
.cat-hero h1 { font-weight: 300; line-height: 1.2; font-size: clamp(2.25rem, 4vw, 2.637rem); max-width: 22ch; margin: 0 auto; color: var(--ink); }
/* .section (padding: var(--sp-6) 0) ecrase le padding horizontal de .wrap quand les deux
   classes coexistent : les cartes s'etalaient sur 1320px au lieu de 1250px (429 au lieu
   de 406 de large). On redonne le padding lateral et on cale le bas sur les 60px
   d'Elliman (section.listing : padding 0/60). */
.cat-body { padding: 0 var(--sp-4) 80px; } /* hero -> champs = 40px (padding du filterbar), comme Elliman */

@media (max-width: 900px) {
	.cat-hero { padding: 40px var(--sp-3); }
	.loc-results-title { font-size: 1.375rem; }
	.loc-filters { margin-top: var(--sp-3); }
	.toolbar--loc { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* =========================================================================
   19. PAGE ACTUALITÉS (façon Elliman /actualites/ : intro-simple + listing)
   ========================================================================= */
/* Intro centrée (titre + description) */
.news-intro { padding: 60px var(--sp-3) 80px; text-align: center; }  /* fond blanc = intro-simple Elliman (pas crème) */
.news-intro__title { font-weight: 300; line-height: 1.2; font-size: clamp(2.25rem, 4vw, 2.637rem); color: var(--ink); margin: 0; }
.news-intro__descr { max-width: 720px; margin: var(--sp-3) auto 0; }
.news-intro__descr p { color: var(--ink); font-size: 0.875rem; line-height: 1.4; margin: 0; }

/* Onglets pleine largeur (façon .ui-tabs--full) : filet bas continu + soulignement or actif */
.news-tabs { display: flex; border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-5); }
/* Elliman .ui-tabs__tab : 12px MAJUSCULES, rangee de 57px (20px + 16.8 de ligne + 20px). */
.news-tab { flex: 1; background: none; border: 0; padding: 20px 0.5em; font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--muted); cursor: pointer; position: relative; transition: color var(--transition); white-space: nowrap; }
.news-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-deep); transform: scaleX(0); transition: transform var(--transition); }
.news-tab:hover { color: var(--ink); }
.news-tab.is-active { color: var(--ink); }
.news-tab.is-active::after { transform: scaleX(1); }

/* Elliman section.listing : padding 0/60 + margin-bottom 80 avant le footer.
   Sans ca, le padding generique de .section (96px haut ET bas) decolle les filtres de l'intro. */
.news-listing { padding: 0 0 60px; margin-bottom: 80px; }
.news-listing__title { font-family: var(--font-display); font-weight: 300; font-size: 1.758rem; line-height: 1.2; color: var(--navy); margin: 0 0 var(--sp-4); }

/* Grille 3 colonnes (2 en md, 1 en mobile) */
/* Gouttiere 16px comme Elliman (colonnes 422 avec 8px de padding) : sur 1250 de contenu
   cela redonne des cartes de 406 aux x 95 / 517 / 939. */
/* align-items: start — Elliman laisse chaque carte à sa hauteur naturelle (mesurées :
   475, 492, 492, 497, 475, 481). Le « stretch » alignait tout sur la plus haute. */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.listing__col { min-width: 0; }

/* Carte presse : image + badge + titre + « Lire l'article » */
.card-press { display: flex; flex-direction: column; height: 100%; }
.card-press__media { position: relative; display: block; aspect-ratio: 406 / 304; overflow: hidden; background: var(--paper-alt); }
.card-press__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--transition); }
.card-press:hover .card-press__media img { transform: scale(1.04); }
/* Voile UNIFORME comme Elliman, pas un degrade partiel. */
.card-press__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.15); }
.card-press__badge { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 2; }
/* Meme cadre que .card-bien__body, verifie sur .card-press__body ET .card-article__body
   d'Elliman : fond blanc + 1px #dedede a DROITE, EN BAS et a GAUCHE, jamais sous la photo.
   J'avais applique ce motif a la carte bien sans verifier qu'il valait aussi ici. */
.card-press__body { padding: var(--sp-3); background: #fff; border: 1px solid #dedede; border-top: 0; }
.card-press__meta { display: block; font-size: 0.72rem; letter-spacing: normal; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7em; }
.card-press__title { font-family: var(--font-sans); font-weight: 500; font-size: 1.02rem; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; margin: 0 0 16.8px; }
.card-press__title a { color: var(--ink); }
.card-press__title a:hover { color: var(--gold-deep); }
.card-press__cta { display: inline-flex; align-items: center; gap: 0.5em; padding-top: var(--sp-3); }
.card-press__cta .ico { width: 15px; height: 15px; }

/* Badge blanc (presse) — sans liseré doré, léger relief */
.badge--white { background: #fff; border-color: transparent; color: var(--navy); }

/* Tuile promo sombre (card-a-push) : occupe toute la hauteur de la cellule */
/* 492px : la tuile promo d'Elliman DÉPASSE les cartes presse (492 contre 475). Le
   `height: 100%` la faisait dépendre de l'étirement de la grille — devenu sans effet
   depuis le passage en align-items: start. */
/* `--push-bg` : la teinte de fond de la variante, réutilisée par le voile du bloc
   image. Sans elle le dégradé serait codé en dur et faux sur la variante grise. */
.card-a-push { --push-bg: #1d1d3d; --push-bg-0: rgba(29,29,61,0); position: relative; display: flex; min-height: 492px; background: var(--navy); overflow: hidden; color: #fff; }
/* ⚠️ L'illustration livrée est un dessin au trait PORTRAIT (920×1235) sur fond navy.
   En `cover` centrée elle tombait pile derrière le titre ET le bouton : la façade
   dessinée passait dans le texte. Elle est donc ancrée EN BAS À DROITE, en `contain`
   (aucun rognage du dessin), sur les 62 % droits de la tuile — la colonne de texte
   garde un aplat net à gauche. */
.card-a-push__bg { position: absolute; inset: 0 0 0 auto; width: 78%; }
/* Opacité PLEINE, comme Elliman (mesuré : img opacity 1). `cover` et non `contain` :
   le dessin file de haut en bas sur toute la hauteur de la tuile.
   ⚠️ Les fichiers d'illustration ONT ÉTÉ RECADRÉS SUR LEUR ENCRE : le canevas d'origine
   portait 23 % de vide en haut (32 % pour la variante grise), si bien que `cover`
   remplissait la boîte mais que le DESSIN, lui, ne touchait aucun bord. Ne pas
   réintroduire de marge dans ces fichiers. */
.card-a-push__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
/* Voile en DEUX temps : horizontal (tient la colonne de texte sur un aplat net, il
   doit être opaque plus loin maintenant que le dessin monte jusqu'en haut), puis le
   voile vertical léger d'origine qui assoit le bouton. */
.card-a-push__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--push-bg) 0%, var(--push-bg) 42%, var(--push-bg-0) 92%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%); }
/* Variante GRISE (« biens à la vente ») : fond gris-bleu = repli tant que l'illustration
   n'est pas là, et raccord avec le fond propre de l'image. Même traitement d'opacité/voile. */
.card-a-push--grey { --push-bg: #2e3442; --push-bg-0: rgba(46,52,66,0); background: #2e3442; }
/* Le texte est borné pour ne jamais courir sous le dessin, même en titre long. */
.card-a-push__content { position: relative; z-index: 2; padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); width: 100%; max-width: 62%; }
/* Base en SANS : chez Elliman seul le span.title-decoration passe en serif italique.
   Tout le titre en serif effacait le contraste voulu entre les deux polices. */
.card-a-push__title { font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.6rem, 2.7vw, 2.344rem); line-height: 1.2; color: #fff; margin: 0; }
.card-a-push__title .serif-italic { font-weight: 400; }
/* Elliman .btn.--white-transparent : APLAT translucide, pas un contour blanc.
   Regle scopee : .btn--ghost-light sert aussi 3 fois dans le mega-menu du header. */
.card-a-push .btn { align-self: flex-start; background: rgba(255,255,255,0.2); border-color: transparent; color: #fff; }
.card-a-push .btn:hover { background: rgba(255,255,255,0.35); border-color: transparent; color: #fff; }
/* En dessous de 901px la grille passe à une colonne : la tuile est large et le partage
   gauche/droite n'a plus de sens. Le dessin repasse en pleine largeur, ancré en bas,
   et le voile redevient VERTICAL pour dégager le titre en haut. */
@media (max-width: 900px) {
	.card-a-push__bg { inset: 0; width: 100%; }
	.card-a-push__bg img { object-position: center; }
	.card-a-push__overlay { background: linear-gradient(180deg, var(--push-bg) 0%, var(--push-bg) 20%, var(--push-bg-0) 52%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%); }
	.card-a-push__content { max-width: 100%; }
}

.pagination--num { justify-content: center; gap: 0.5em; margin-top: var(--sp-5); }
.pagination--num .page-numbers.current { background: transparent; color: var(--ink); border-color: var(--gold-deep); }

@media (max-width: 900px) {
	.news-grid { grid-template-columns: 1fr 1fr; }
	.news-tabs { overflow-x: auto; scrollbar-width: none; }
	.news-tabs::-webkit-scrollbar { display: none; }
	.news-tab { flex: 0 0 auto; padding: 1em 1.3em; }
}
@media (max-width: 560px) {
	.news-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   20. PAGE À PROPOS — reproduction section par section d'elliman.fr/a-propos/
   ========================================================================= */
/* 1. Hero 74dvh, titre centré 42.19px (= .hero --md + title--lg-alt), marge basse 80. */
.apropos-hero { position: relative; min-height: 74vh; min-height: 74dvh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; margin-bottom: 80px; }
/* Variante « collée » : pas de marge basse quand le bloc suivant a un fond (ex. /vendre/). */
.apropos-hero--flush { margin-bottom: 0; }
.apropos-hero__bg { position: absolute; inset: 0; z-index: 0; }
.apropos-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Voile à 4 arrêts : le dégradé à 2 arrêts descendait à 1,89:1 sous le fil d'ariane
   (haut du cadre) et laissait 4,8 % des pixels du sous-titre sous 4,5:1. */
.apropos-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,16,36,0.62) 0%, rgba(13,16,36,0.34) 26%, rgba(13,16,36,0.44) 62%, rgba(13,16,36,0.60) 100%); }
.apropos-hero__inner { position: relative; z-index: 2; padding: var(--header-h) var(--sp-3) 0; max-width: 1100px; }
.apropos-hero__title { color: #fff; font-weight: 300; font-size: 2.637rem; line-height: 1.2; margin: 0; }
/* Sous-titre du hero (= p sous le titre chez Elliman) : 14px, blanc, centre, largeur limitee. */
.apropos-hero__subtitle { color: #fff; font-size: 0.875rem; line-height: 1.4; font-weight: 400; max-width: 620px; margin: 24px auto 0; }
/* ---------------------------------------------------------------------------
   FIL D'ARIANE — toutes les déclarations de `.breadcrumb` sont regroupées ICI.
   Elles étaient auparavant éclatées en trois endroits, dont la règle de base
   rangée sous « 19. FICHE BIEN » alors qu'elle pilotait surtout les pages hero.
   1. état par défaut = superposé au hero (pages Vendre / À propos / Expertises)
   2. variante `body.single-bien` juste dessous = bande blanche dans le flux
--------------------------------------------------------------------------- */
/* 12px, padding 24/12 comme le #breadcrumb d'Elliman, posé sur l'image. */
.breadcrumb { position: absolute; top: var(--header-h); left: 0; right: 0; z-index: 3; max-width: var(--wrap); margin: 0 auto; padding: 24px var(--sp-4) 12px; font-size: 12px; line-height: 1.4; letter-spacing: normal; color: var(--muted); text-align: left; }
.breadcrumb a { color: rgba(255,255,255,0.9); }
.breadcrumb a:hover { color: var(--gold-deep); }
.breadcrumb span { color: rgba(255,255,255,0.75); }
/* Séparateur = chevron, comme Elliman (leur #breadcrumb utilise un SVG 5×17,
   marges 14px avant / 10px après). Dessiné en CSS plutôt que repris de leur
   asset : deux bords de 1px tournés à 45°, donc net à toute densité et sans
   dépendre du dessin du glyphe « › » dans la police. Le mélange précédent
   (barre oblique ici, chevron sur la fiche bien) est supprimé. */
.breadcrumb a::after,
.breadcrumb .sep {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	margin: 0 10px 0 14px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
	/* `middle` cale le centre du chevron sur le centre d'x du texte : contrairement
	   à un décalage en px depuis la ligne de base, ça reste juste quel que soit le
	   contexte (le `font-size:0` ci-dessous déplaçait la ligne de base et posait
	   le chevron 5px trop bas sur la fiche bien — mesuré). */
	vertical-align: middle;
	opacity: 0.55;
	font-size: 0;              /* neutralise le « › » présent dans le markup de la fiche bien */
}

/* Fiche bien : fil d'ariane sur bande BLANCHE au-dessus du hero (façon Elliman single),
   texte navy, « Retour au listing » à flèche or — PAS l'overlay blanc de /vendre//a-propos/.
   Contenu à header-h seul (81) : la bande fil d'ariane (~41px) amène le hero à 122 comme Elliman. */
body.single-bien .site-content { padding-top: var(--header-h); }
/* Variante EN FLUX pour les pages sans hero (mentions legales, cookies, pages
   generiques). Relevee sur elliman.fr/mentions-legales/ a 1440 : 12px, aligne a
   95px comme le titre, « Accueil » en encre, page courante en couleur d'accent.
   Le chevron 5x17 (marges 14/10) est herite de la regle commune ci-dessus.
   ⚠️ Elliman colore l'element courant avec SON bleu de marque (rgb(0,156,189)).
   On utilise l'or Bosquet : reprendre leur teinte importerait leur identite. */
/* ⚠️ NE PAS remettre `position: static` ici. La regle de base `.breadcrumb` place
   deja le fil a top:var(--header-h) + 24px de padding, soit un texte a 105px du haut
   et a 95px du bord gauche — exactement la position qu'il occupe sur TOUTES les pages
   a hero (/vendre/, /a-propos/, les 3 expertises). Le sortir du flux absolu le faisait
   tomber a 182px, desaligne du reste du site. On ne surcharge donc QUE les couleurs. */
.breadcrumb--flow { color: var(--ink); }
.breadcrumb--flow a { color: var(--ink); }
.breadcrumb--flow a:hover { color: var(--gold-deep); }
.breadcrumb--flow span { color: var(--gold-text); }
.breadcrumb--flow a::after { border-color: var(--ink); }

body.single-bien .breadcrumb { position: static; z-index: auto; display: flex; align-items: center; gap: var(--sp-4); padding: 12px var(--sp-4); color: var(--ink); text-align: left; }
body.single-bien .breadcrumb a { color: var(--ink); }
body.single-bien .breadcrumb a:hover { color: var(--gold-deep); }
/* Fiche bien : « Retour au listing » est un lien de retour, pas un maillon du fil
   — il ne prend donc pas de chevron. Seul `.sep` en porte un. */
body.single-bien .breadcrumb a::after { content: none; border: 0; width: 0; height: 0; margin: 0; }
body.single-bien .breadcrumb span { color: var(--ink); }
body.single-bien .breadcrumb .sep { color: var(--muted); }
body.single-bien .breadcrumb__back { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; text-transform: uppercase; }
body.single-bien .breadcrumb .breadcrumb__current { color: #b8995f; }
body.single-bien .breadcrumb__back svg { flex: none; }
/* Mobile : Elliman masque le fil d'ariane sur la fiche (hero directement sous le header). */
@media (max-width: 900px) { body.single-bien .breadcrumb { display: none; } }

/* 2. Variante « sans fond » du bloc centré (= .wysiwyg --centered nu, marge basse 120). */
.intro-centered--plain { background: none; padding: 0; margin-bottom: 120px; }
/* Elliman /recrutement/ : S2 en margin-bottom 80 (et non 120) avant le bloc creme des offres. */
.jobs-intro.intro-centered--plain { margin-top: 80px; margin-bottom: 80px; }
/* Chapeau S2 : 14px / interligne 1.4 (le <p> n'est pas dans .intro-centered__descr, il héritait
   donc du 16px et du 1.7 du body). margin 0 : les 80px au-dessus viennent du margin-top ci-dessus,
   pas d'une marge de paragraphe qui remontait par collapsing. */
.jobs-intro p { font-size: 0.875rem; line-height: 1.4; margin: 0; }

/* 3. Chiffres clés (= .figures) : heading centré (titre 37.5 + descr 14, mb 48),
   nombres SERIF ITALIQUES 60px + libellé 18.75 (300), cartes 319px centrées. */
.key-figures { margin-bottom: 80px; }
.key-figures__head { text-align: center; margin-bottom: 48px; }
.key-figures__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0; }
.key-figures__descr { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 16px 0 0; }
.key-figures__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }
/* Carrés CRÈME 295×295 centrés (= .figure d'Elliman : fond #fbfbf9, flex center). */
.kfig { width: 295px; aspect-ratio: 1 / 1; padding: 24px; font-size: 0.875rem; line-height: 1.4; background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kfig__num { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 60px; line-height: 1; color: var(--navy); }
.kfig__label { font-family: var(--font-display); font-weight: 300; font-size: 1.172rem; line-height: 1.2; color: var(--navy); margin-top: 24px; }

/* 4. Édito image droite à CADRE crème (= .edito --image-right --has-frame) :
   texte à gauche (padding 40 120 40 0), image à droite posée sur un carré crème (padding 80). */
.edito-frame { margin-bottom: 80px; }
.edito-frame__row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.edito-frame__content { align-self: center; padding: 40px 120px 40px 0; }
.edito-frame__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0 0 var(--sp-3); }
.edito-frame__content p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0 0 var(--sp-3); }
.edito-frame__cta { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: normal; color: var(--navy); }
.edito-frame__cta:hover { color: var(--gold-deep); text-decoration: underline; }
.edito-frame__image { position: relative; padding: 80px; }
.edito-frame__image::before { content: ""; position: absolute; inset: 0; background: var(--cream); }
.edito-frame__image img { position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* 5. Bannière citation (= .banner) : image pleine largeur (ratio ~2.13) + carte BLANCHE 920px
   (padding 60) posée à gauche du conteneur, titre 46.9px + signature. */
.banner-quote { position: relative; margin-bottom: 80px; }
.banner-quote__media img { width: 100%; aspect-ratio: 1440 / 675; object-fit: cover; display: block; }
.banner-quote__card { position: absolute; top: 50%; transform: translateY(-50%); left: max(var(--sp-4), calc((100vw - var(--wrap)) / 2 + var(--sp-4))); width: 920px; max-width: calc(100vw - 2 * var(--sp-4)); background: #fff; padding: 60px; }
.banner-quote__title { font-family: var(--font-display); font-weight: 300; font-size: 2.93rem; line-height: 1.2; color: var(--navy); margin: 0 0 var(--sp-3); }
/* Césure automatique : « accompagnement » fait 274px à 31,2px alors que la carte n'en
   offre que 230 en mobile — le mot débordait sur TOUTES les largeurs d'iPhone, jusqu'à
   430px. La page est en lang="fr-FR", `hyphens: auto` applique donc les règles de coupure
   françaises et pose un vrai trait d'union. `overflow-wrap` n'est qu'un filet de sécurité
   pour les moteurs sans dictionnaire français : il coupe sans trait d'union, ce qui est
   moins bon, mais vaut mieux qu'un débordement. */
.banner-quote__title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.banner-quote__descr p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0; }

/* 6. Équipe (= .team) : titre 37.5 À GAUCHE (mb 48), cartes 4 colonnes (gap 56/16),
   photo portrait 0.752, nom 16 uppercase, rôle 12 (mt 12). */
/* Bandeau crème pleine largeur (= section .team d'Elliman : bg #fbfbf9, padding 80 0). */
.team-grid { background: var(--cream); padding: 80px 0; margin-bottom: 80px; }
.team-grid__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0 0 48px; }
.team-grid__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 16px; }
.card-member__media { aspect-ratio: 301 / 400; overflow: hidden; background: var(--paper-alt); display: grid; place-items: center; }
.card-member__media img { width: 100%; height: 100%; object-fit: cover; }
.card-member__mono { font-family: var(--font-serif); font-size: 3rem; color: var(--gold-deep); }
/* Corps de carte = panneau BLANC centré qui remonte de 40px sur la photo (marges 24, padding 20×24). */
.card-member__body { position: relative; background: #fff; margin: -40px 24px 0; padding: 20px 24px; text-align: center; }
.card-member__name { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--navy); margin: 0; }
.card-member__role { font-size: 0.75rem; line-height: 1.4; color: var(--navy); margin-top: 12px; }

/* 7. Édito + formulaire (= .edito-form) : contenu 1/3 (titre 37.5 + p) · formulaire 2/3, padding 70 0. */
.edito-form { margin-bottom: 80px; }
.edito-form--tight { margin-bottom: 48px; }  /* /contact/ : space-md-alt Elliman */
/* /nous-rejoindre/ : Elliman met sa S5 en space-0, le footer colle au formulaire.
   Spécificité 0,2,0 volontaire : doit aussi l'emporter sur le .edito-form du palier mobile. */
.edito-form.edito-form--flush { margin-bottom: 0; }
/* Elliman : colonne texte 377 + gouttière 60 + formulaire 813 (son 4/12–8/12 est calculé sur une
   rangée de 1310 avec marges négatives, puis 30px de padding retirés de chaque côté ; le ratio
   377:813 sur 1190 redonne exactement ses mesures). Le 1fr/2fr donnait 390/780 avec 80 de gouttière. */
.edito-form__row { display: grid; grid-template-columns: 377fr 813fr; gap: 0 60px; }
/* Colonne contenu : PANNEAU BEIGE (crème) qui s'étend jusqu'au bord gauche du viewport
   (= .edito-form__content::before d'Elliman), texte sticky au défilement (top 24px). */
.edito-form__content { position: relative; padding: 70px 70px 70px 0; }
.edito-form__content::before { content: ""; position: absolute; inset: 0; left: calc(-1 * max(var(--sp-4), (100vw - var(--wrap)) / 2 + var(--sp-4))); background: var(--cream); }
.edito-form__content-inner { position: relative; position: sticky; top: 24px; }
/* 70px vertical : mesuré sur .edito-form__form d'Elliman (/contact/ ET /recrutement/).
   ⚠️ Ne pas comparer ce bloc à sa COLONNE (.col-lg-7, padding 0 30px) — j'ai fait l'erreur
   le 2026-07-20 et mis ce padding à 0, ce qui remontait le formulaire de 70px. */
.edito-form__form { padding: 70px 0; }
.edito-form__title { font-family: var(--font-display); font-weight: 300; font-size: 2.344rem; line-height: 1.2; color: var(--navy); margin: 0 0 var(--sp-3); }
.edito-form__content p { font-size: 0.875rem; line-height: 1.4; color: var(--navy); margin: 0; }
/* Intitulés de groupes du formulaire : SERIF ITALIQUE 23.44px weight 300 (= « Votre projet » /
   « Vos coordonnées » / « Votre message » d'Elliman, Sainte Colombe italic). */
.edito-form .lead-form__title { font-family: var(--font-serif); font-style: italic; font-size: 1.465rem; font-weight: 300; letter-spacing: normal; text-transform: none; color: var(--navy); }

@media (max-width: 900px) {
	/* Rythme mobile Elliman : `space-xl` vaut 80px en desktop mais 70px en mobile.
	   Ces quatre blocs restaient à 80 — mesuré chez Elliman : 70 partout. */
	.edito, .section-marquee, .banner-quote,
	.apropos-hero:not(.apropos-hero--flush),
	.key-figures, .edito-frame, .team-grid, .reco-section, .news-listing { margin-bottom: 70px; }
	/* Hero : titre 36px (Elliman mobile). */
	.apropos-hero__title { font-size: 2.25rem; }
	.breadcrumb { padding-inline: var(--sp-3); }
	.intro-centered--plain { margin-bottom: 85px; }
	/* 40px en mobile : le hero passe lui aussi de 80 à 40 de padding bas à ce palier. */
	.jobs-intro.intro-centered--plain { margin-top: 40px; }
	/* Figures : 2 par rangée, nombres 36px, libellés 14. */
	.key-figures__title { font-size: 1.75rem; }
	.key-figures__row { gap: 8px; }
	.kfig { width: calc(50% - 4px); padding: 24px; }
	.kfig__num { font-size: 36px; }
	.kfig__label { font-size: 0.875rem; margin-top: 16px; }
	/* Édito : IMAGE D'ABORD (ordre Elliman mobile), padding cadre 40, titre 28. */
	.edito-frame__row { grid-template-columns: 1fr; }
	.edito-frame__image { order: -1; padding: 40px; }
	.edito-frame__content { padding: var(--sp-4) 0 0; }
	.edito-frame__title { font-size: 1.75rem; }
	/* Bannière : image haute (plein écran Elliman mobile), carte pad 40, titre 31.25. */
	.banner-quote__media img { aspect-ratio: 390 / 844; }
	.banner-quote__card { padding: 40px; }
	.banner-quote__title { font-size: 1.95rem; }
	/* Équipe : 2 colonnes, titre 28. */
	.team-grid { padding: 70px 0; }
	.team-grid__title { font-size: 1.75rem; }
	.team-grid__row { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
	/* Panneau blanc plus large sur mobile : marges latérales 8px, padding 16×8 (Elliman). */
	.card-member__body { margin: -40px 8px 0; padding: 16px 8px; }
	/* Panneau blanc plus LARGE sur mobile (Elliman : marges latérales 8px, padding 16×8). */
	.card-member__body { margin: -40px 8px 0; padding: 16px 8px; }
	/* Édito-form : empilé ; panneau beige pleine largeur, pas de sticky. */
	.edito-form__row { grid-template-columns: 1fr; }
	.edito-form { margin-bottom: 70px; }
	.edito-form--tight { margin-bottom: 28px; }
	/* le retrait droit de 45px bornait le chapeau à 305 quand les champs font 350 ;
	   et 45 n'appartient pas au système Elliman (70 en mobile). */
	.edito-form__content { padding: 70px 0; }
	.edito-form__content::before { left: calc(-1 * var(--sp-3)); right: calc(-1 * var(--sp-3)); }
	/* Reste POSITIONNÉ (relative) pour peindre AU-DESSUS du panneau beige ::before —
	   en static le texte passait derrière et la section semblait vide sur mobile. */
	.edito-form__content-inner { position: relative; top: 0; }
	.edito-form__form { padding: var(--sp-4) 0 0; }
	.edito-form__title { font-size: 1.75rem; }
}

/* Badge des cartes presse : Elliman .badge --white = 12px SANS majuscules. */
.card-press .badge { text-transform: none; letter-spacing: normal; }


/* ---------------------------------------------------------------------------
   SIMULATEUR DE CRÉDIT — colonne droite de la carte « overlay-sell ».
   Registre éditorial : pas d'encadré (la carte blanche fait conteneur), champs
   groupés par filets, valeurs ferrées à droite contre leur unité, résultat
   traité comme un moment (grand nombre). Pas de numérotation d'étapes : tout
   est recalculé en direct, un séquençage 01/02/03 serait mensonger.
--------------------------------------------------------------------------- */
.overlay-sell__eyebrow { margin: 0 0 14px; color: var(--gold-text); font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.4; }
/* Accroche sous le titre : remplit la colonne gauche (sinon un grand vide sous
   le titre) et porte le message de valorisation. */
.overlay-sell__lead { margin: 22px 0 0; max-width: 36ch; font-size: 0.95rem; line-height: 1.7; color: var(--muted); }

.sim { margin: 0; }
.sim__group { padding: 18px 0; }
.sim__group:first-child { padding-top: 4px; }
.sim__group + .sim__group { border-top: 1px solid var(--hairline); }

.sim__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
/* Durée + taux + assurance. auto-fit : 3 colonnes tant qu'elles font ≥ 84px,
   sinon repli (l'assurance passe dessous) — évite les colonnes de 41px sous 340px. */
.sim__row--3 { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 18px; }
/* `.sim__field` est un <label> : toute la ligne (libellé + valeur + unité) donne
   le focus au champ. Libellé extensible pour aligner les saisies même s'il passe
   sur 2 lignes. */
.sim__field { display: flex; flex-direction: column; height: 100%; cursor: text; }
.sim__name { flex: 1 0 auto; margin-bottom: 8px; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
/* Filet à 3:1 : seul indice qu'un champ est saisissable (1.4.11). */
.sim__input { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 7px; }
.sim__input:focus-within { border-bottom-color: var(--navy); box-shadow: 0 1px 0 0 var(--navy); }
/* Valeur calée à GAUCHE sous son libellé, unité collée juste après (« 500 000 € »
   d'un bloc). La largeur du champ suit son contenu (JS fitWidth) pour que l'unité
   ne flotte pas à l'autre bout du filet ; le filet, lui, reste pleine largeur.
   Toute la colonne (saisies + résultat) partage ainsi la même arête gauche. */
.sim__input input { flex: 0 0 auto; width: auto; min-width: 1.4ch; max-width: 100%; border: 0; background: none; padding: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; color: var(--navy); text-align: left; outline: none; -moz-appearance: textfield; }
.sim__input input::-webkit-outer-spin-button, .sim__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sim__input input:focus-visible { outline: none; }
.sim__unit { flex: 0 0 auto; font-family: var(--font-display); font-size: 1rem; color: var(--muted); }

/* Résultat : le nombre est le moment de la page — grand, en font-display.
   Mensualité à gauche, ventilation à droite. */
.sim__result { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 32px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--navy); }
.sim__result-label { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); line-height: 1.4; }
.sim__result-value { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--navy); white-space: nowrap; letter-spacing: -0.01em; }
/* Devise réduite dans le grand nombre : le chiffre porte, le « € » accompagne. */
.sim__result-value .sim__cur { font-size: 0.72em; }
/* « assurance comprise · 113 €/mois » sous la mensualité — masqué si assurance nulle. */
.sim__res-sub { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); line-height: 1.4; }
.sim__res-sub b { font-weight: 500; color: var(--ink); }
.sim__res-sub[hidden] { display: none; }
.sim__result-side { flex: 0 1 auto; min-width: 200px; padding-bottom: 4px; }
.sim__res-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }
.sim__res-row + .sim__res-row { margin-top: 7px; }
.sim__res-row span { color: var(--muted); }
.sim__res-row strong { font-family: var(--font-display); font-weight: 400; white-space: nowrap; }
/* Sélecteur qualifié : `.overlay-sell__col-descr p` (0,1,1) l'emporterait sinon. */
.overlay-sell__col-descr p.sim__note { margin: 16px 0 0; font-size: 0.7rem; line-height: 1.5; color: var(--muted); }

/* ---------------------------------------------------------------------------
   « ILS NOUS ONT FAIT CONFIANCE » — bandeau références au-dessus du footer.
   Déposer assets/img/refs/{slug}.svg|png pour remplacer le nom par le logo.
--------------------------------------------------------------------------- */
.trusted { background: #fbfbf9; padding: 80px 0; border-top: 1px solid var(--hairline); }
.trusted__title { margin: 0 0 34px; text-align: center; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text); line-height: 1.4; }
/* Ruban en boucle — même mécanique que .dest-marquee (destinations) : piste en
   width:max-content, défilement de -50 %, pause au survol. Durée calée sur la
   vitesse mesurée du ruban destinations (39,7 px/s) : 3466 px par cycle → 87s. */
.trusted__marquee { position: relative; overflow: hidden; }
.trusted__track { display: flex; align-items: center; gap: 54px; width: max-content; padding: 0 27px; list-style: none; margin: 0; animation: trusted-scroll 87s linear infinite; }
.trusted__marquee:hover .trusted__track { animation-play-state: paused; }
@keyframes trusted-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.trusted__track { animation: none; overflow-x: auto; }
}
.trusted__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 40px; }
/* Les fichiers sont DÉJÀ normalisés en monochrome navy (pas de filtre grayscale :
   il donnait des gris de densités inégales, et virait les aplats en pavés gris).
   La taille vient des attributs width/height, calibrés optiquement dans footer.php. */
/* ⚠️ Ne PAS déclarer `width` ici : les attributs width/height du HTML ne sont que
   des indications de présentation (spécificité 0), donc un `width:auto` en CSS les
   écrase — les SVG (sans dimensions intrinsèques) tombaient alors à 0px et les PNG
   s'affichaient à leur taille brute. La largeur vient de l'attribut, la hauteur suit. */
.trusted__item img { display: block; flex: 0 0 auto; height: auto; opacity: 0.55; transition: opacity var(--transition); }
.trusted__item img:hover { opacity: 1; }
.trusted__name { white-space: nowrap; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.04em; color: var(--navy); opacity: 0.55; line-height: 1.3; transition: opacity var(--transition); }
.trusted__item:hover .trusted__name { opacity: 1; }
@media (max-width: 900px) {
	.trusted { padding: 70px 0; }
	/* Piste plus courte sur mobile (gaps resserrés) → durée réduite pour garder la même vitesse perçue. */
	.trusted__track { gap: 32px; padding: 0 16px; animation-duration: 76s; }
	.trusted__name { font-size: 0.94rem; }
}

/* Palier intermédiaire : la carte reste sur 2 colonnes mais la colonne de droite
   porte désormais un module dense — on lui rend de la largeur au détriment du titre. */
@media (min-width: 901px) and (max-width: 1150px) {
	.overlay-sell__card { padding: 48px 36px 0; gap: var(--sp-4); }
	/* « Accompagnement » est insécable et mesure ~8,8× la taille de police : on
	   indexe le corps sur la largeur de fenêtre pour qu'il tienne dans sa colonne. */
	.overlay-sell__title { font-size: calc(4vw - 8px); }
	.sim__result-side { min-width: 180px; }
	.sim__result-value { font-size: 2.1rem; }
}

/* Simulateur — mobile : la carte overlay-sell passe en colonne, on resserre. */
@media (max-width: 900px) {
	.overlay-sell__eyebrow { margin-bottom: 10px; font-size: 0.7rem; }
	.overlay-sell__lead { margin-top: 16px; font-size: 0.9rem; max-width: none; }
	.sim__group { padding: 15px 0; }
	.sim__row { gap: 16px 18px; }
	.sim__row--3 { gap: 14px; }
	.sim__result-side { min-width: 100%; }
	/* Toute la ligne est cliquable : on lui donne la hauteur d'une vraie cible. */
	.sim__input { padding-top: 9px; padding-bottom: 9px; }
	/* CTA en pile : le padding donne la cible 44px ; le souligné-or vient du style de base. */
	.overlay-sell__ctas { flex-direction: column; gap: 0; margin-top: var(--sp-3); }
	.overlay-sell__cta { padding: 12px 0; }
}

/* =========================================================================
   FOCUS CLAVIER — global, volontairement placé en FIN de feuille.
   Le thème annulait l'anneau de focus à 7 endroits (`outline: none` sur les
   champs de recherche, .contact-card, .lead-form, .contact-form__field,
   .newsletter, .filterbar, .sim__input) sans jamais le remplacer : la
   navigation au clavier était donc invisible sur tous les formulaires.
   Ces règles ont la même spécificité (0,1,1) que les `outline: none` qu'elles
   doivent battre — d'où la position en dernier, l'ordre du code tranche.
   :focus-visible ne s'active qu'au clavier : rien ne change à la souris.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}
/* Sur fond sombre (hero, footer), le navy serait invisible. */
.site-header--transparent a:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible {
	outline-color: var(--gold-light);
}

/* Onglet de navigation vers un site EXTERNE (JK House) : le glyphe sortant reste
   discret et suit la couleur du lien (blanc sur hero, navy sur fond clair). */
.nav-wrap .nav-external > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-wrap .nav-external .ico { width: 11px; height: 11px; opacity: .6; flex: 0 0 auto; }
.nav-wrap .nav-external > a:hover .ico { opacity: 1; }
.drawer__nav .nav-external .ico { width: 12px; height: 12px; opacity: .55; margin-left: 6px; vertical-align: -1px; }

/* ---------------------------------------------------------------------------
   GRILLE DE PRESTATIONS (page Gestion locative) — alternative aux étapes
   numérotées : ici les prestations sont menées EN PARALLÈLE, pas en séquence,
   donc pas de parcours illustré mais une grille sobre.
--------------------------------------------------------------------------- */
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5) var(--sp-4); list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.exp-grid__item { border-top: 1px solid var(--hairline); padding-top: var(--sp-3); }
.exp-grid__num { display: block; margin-bottom: 12px; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--gold-text); line-height: 1.4; }
.exp-grid__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.3; color: var(--navy); }
.exp-grid__descr { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
@media (max-width: 900px) {
	.exp-grid { grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
}
@media (min-width: 901px) and (max-width: 1150px) {
	.exp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* « Suivez nos actualités » — calé sur la section `.photos` d'Elliman (mesurée) :
   titre 37,5px centré / 28px en mobile, handle 14px à 24px sous le titre dans la
   couleur du texte courant, en-tête à 48px du ruban (28px en mobile), tuiles
   carrées de 295px (168px en mobile) séparées de 24px. Le ruban est le
   `.carousel` existant, les tuiles sont les seuls sélecteurs propres à la section. */
.photos-feed { padding: 0; margin-bottom: 80px; }   /* rythme Elliman : section sans marge interne, 80px avant la suivante */
.photos-feed .section__head { margin-bottom: 48px; }
.photos-feed__handle { margin: 24px 0 0; font-size: 0.875rem; line-height: 1.4; color: var(--navy); }
.photos-feed__handle a { color: inherit; }
.photos-feed__handle a:hover { color: var(--gold-deep); }
.photos-feed .carousel__track { gap: var(--sp-3); }
.photos-feed__tile { flex: 0 0 calc((100% - 3 * var(--sp-3)) / 4); display: block; overflow: hidden; scroll-snap-align: start; }
.photos-feed__tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.19,1,0.22,1); }
.photos-feed__tile:hover img { transform: scale(1.05); }
@media (max-width: 900px) {
	.photos-feed { margin-bottom: 70px; }
	.photos-feed .section__head { margin-bottom: 28px; }
	.photos-feed .section__head h2 { font-size: 1.75rem; }
	.photos-feed__tile { flex-basis: 168px; }
}

/* ---------------------------------------------------------------------------
   B. Ruban « Suivez nos actualités » : UNE TUILE SUR DEUX EST DESCENDUE.
   J'avais pris les 60px de hauteur en trop des diapositives d'Elliman pour une
   scorie de leur Swiper — c'est le dessin. Relevé sur /a-propos/nos-metiers/ :
   les diapositives paires ont `padding: 0 12px`, les impaires `padding: 60px 12px 0`
   (40px en mobile), et la piste fait donc 355px de haut pour des images de 295.
   --------------------------------------------------------------------------- */
.photos-feed__tile:nth-child(even) { padding-top: 60px; }
/* la piste générique réserve 16px sous les cartes pour l'ascenseur ; le ruban
   d'Elliman n'en a pas — sa hauteur vaut exactement image + décalage. */
.photos-feed .carousel__track { padding-bottom: 0; }

/* ---------------------------------------------------------------------------
   C. Variante `quotes` d'Elliman (/private-office/) — MÊME MARKUP que
   `.banner-quote`, seul l'habillage change. Le composant de base reproduit leur
   `banner` (/a-propos/ : image pleine largeur + carte blanche, titre sans 46,9px)
   et reste intact ; cette variante reproduit leur `quotes`, qui est un AUTRE
   composant : portrait à gauche débordant sa colonne, carte crème débordant à
   droite, citation en serif.
   Relevé à 1440 : rangée 1250 (col 521 + 729) · image 568 à x48 (−47 hors colonne)
   ratio 568/654 · carte 839 à x506 (−110), fond #FBFBF9, padding 60, centrée
   verticalement · citation Sainte Colombe 32,8/39,4 poids 300 · signature 16px
   capitales à 32px. Mobile : image 414 de haut, carte remontée de 70px, encart
   de 24px, citation 22/26,4, signature à 24px.
   --------------------------------------------------------------------------- */
.banner-quote--split { display: grid; grid-template-columns: 521px 729px; justify-content: center; align-items: center; }
.banner-quote--split .banner-quote__media { width: 568px; margin-left: -47px; }
.banner-quote--split .banner-quote__media img { width: 100%; aspect-ratio: 568 / 654; object-fit: cover; display: block; }
/* on annule le positionnement absolu de la carte du composant de base */
.banner-quote--split .banner-quote__card { position: relative; z-index: 1; top: auto; left: auto; transform: none; width: 839px; max-width: none; margin-left: -110px; background: #fbfbf9; padding: 60px; }
.banner-quote--split .banner-quote__title { font-family: var(--font-serif); font-size: 2.051rem; line-height: 1.2; font-weight: 300; margin: 0; }
/* chez Elliman la citation de `quotes` est d'un seul tenant : pas d'italique de rappel. */
.banner-quote--split .banner-quote__title .serif-italic { font-family: inherit; font-style: inherit; font-weight: inherit; }
.banner-quote--split .banner-quote__descr { margin-top: 32px; }
.banner-quote--split .banner-quote__descr p { font-size: 1rem; line-height: 1.4; text-transform: uppercase; }

@media (max-width: 900px) {
	.photos-feed__tile:nth-child(even) { padding-top: 40px; }

	.banner-quote--split { display: block; }
	.banner-quote--split .banner-quote__media { width: auto; margin-left: 0; padding: 0 20px; }
	.banner-quote--split .banner-quote__media img { aspect-ratio: 342 / 414; }
	.banner-quote--split .banner-quote__card { width: auto; margin: -70px 44px 0; padding: var(--sp-3); }
	.banner-quote--split .banner-quote__title { font-size: 1.375rem; }
	.banner-quote--split .banner-quote__descr { margin-top: var(--sp-3); }
}