/**
 * Composants — en-tête, cartes de bien, filtres, fiche bien, agent, pied de page.
 */

/* ---------- En-tête ---------- */
.si-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--si-color-base) 96%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid color-mix(in srgb, var(--si-color-line) 70%, transparent);
	transition: box-shadow .25s ease, background .25s ease;
}
.si-header::after {
	/* Un liseré d'accent sous l'en-tête : discret, mais le site a une signature. */
	content: "";
	position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: linear-gradient(90deg, var(--si-color-primary), var(--si-color-accent));
	opacity: 0; transition: opacity .3s ease;
	/* Peint après ses descendants, ce liseré interceptait le survol pile dans
	   l'espace que la souris traverse pour rejoindre un sous-menu. */
	pointer-events: none;
}
.si-header.is-scrolled { box-shadow: 0 6px 24px rgba(16, 24, 40, .07); }
.si-header.is-scrolled::after { opacity: .9; }

.si-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--si-space-5);
	min-height: var(--si-header-height);
}
.si-header__brand { display: flex; align-items: center; gap: var(--si-space-3); text-decoration: none; flex: none; }
.si-header__brand img { max-height: var(--si-logo-header, 54px); width: auto; transition: opacity .2s ease; }
.si-header__brand:hover img { opacity: .85; }
.si-header__name {
	font-family: var(--si-font-heading);
	font-size: var(--si-text-xl);
	color: var(--si-color-primary);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.si-header__actions { display: flex; align-items: center; gap: var(--si-space-4); flex: none; }
.si-header__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--si-space-2);
	font-weight: 600;
	font-size: var(--si-text-sm);
	text-decoration: none;
	white-space: nowrap;
	color: inherit;
	transition: color .2s ease;
}
.si-header__phone:hover { color: var(--si-color-primary); }

/* Barre fine de coordonnées, au-dessus de l'en-tête */
.si-topbar {
	background: var(--si-color-primary);
	color: #fff;
	font-size: var(--si-text-xs);
	letter-spacing: .01em;
}
.si-topbar__inner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--si-space-4);
	min-height: 34px; padding-block: 6px;
}
.si-topbar__lieu { opacity: .75; }
.si-topbar__contacts { display: flex; gap: var(--si-space-5); margin-left: auto; }
.si-topbar a { color: #fff; text-decoration: none; opacity: .9; transition: opacity .2s ease; }
.si-topbar a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* Navigation : le soulignement se dessine au survol plutôt que d'apparaître */
.si-nav ul { display: flex; align-items: center; gap: var(--si-space-5); list-style: none; margin: 0; padding: 0; }
/* Les pastilles d'outils sont des liens, mais pas des entrées de menu : cette
   règle est plus spécifique que « .si-outil » et lui reprenait son display, sa
   hauteur et ses marges. Le résultat se voyait surtout dans le tiroir mobile,
   où l'icône se collait au bord gauche d'un rectangle vide. */
/*
 * Les pastilles d'outils sont des liens, mais pas des entrées de menu : la
 * règle « .si-nav a » leur reprenait leur display, leur hauteur et leurs
 * marges, et dans le tiroir mobile l'icône se collait au bord gauche d'un
 * rectangle vide.
 *
 * On les reprend par une règle d'un cran plus spécifique — « a.si-outil » —
 * plutôt qu'en excluant quatre classes de la règle générale : une chaîne de
 * :not() vaut quatre classes de spécificité, et elle passait alors devant
 * « .si-header--fonce .si-nav a ». Résultat, un texte noir sur en-tête sombre.
 */
.si-nav a.si-outil,
.si-nav a.si-btn,
.si-nav a.si-wa {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	padding-block: 0;
}
.si-nav a.si-outil::after,
.si-nav a.si-btn::after,
.si-nav a.si-wa::after { display: none; }

.si-nav a {
	position: relative;
	display: inline-block;
	font-size: var(--si-text-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--si-color-ink);
	padding-block: var(--si-space-2);
	transition: color var(--si-transition);
}
.si-nav a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--si-color-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.si-nav a:hover::after,
.si-nav .current-menu-item > a::after,
.si-nav .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.si-nav a:hover,
.si-nav .current-menu-item > a { color: var(--si-color-primary); }
.si-nav .sub-menu {
	display: none;
	align-items: stretch;
	position: absolute;
	top: 100%;
	left: -14px;
	background: var(--si-color-base);
	border: var(--si-border);
	box-shadow: var(--si-shadow-md);
	padding: var(--si-space-3);
	flex-direction: column;
	gap: var(--si-space-1);
	min-width: 230px;
	border-radius: var(--si-radius-lg);
	animation: si-menu-in .18s ease;
}
@keyframes si-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.si-nav .sub-menu a { padding: var(--si-space-2) var(--si-space-3); border-radius: var(--si-radius); width: 100%; }
.si-nav .sub-menu a::after { display: none; }
.si-nav .sub-menu a:hover { background: var(--si-color-surface); }
.si-nav li { position: relative; }
.si-nav li:hover > .sub-menu,
.si-nav li:focus-within > .sub-menu,
.si-nav li.est-deplie > .sub-menu { display: flex; }

/* Bouton de menu mobile */
.si-burger {
	display: none;
	background: none;
	border: var(--si-border);
	border-radius: var(--si-radius);
	padding: 10px 12px;
	cursor: pointer;
	color: inherit;
	transition: border-color .2s ease, background .2s ease;
}
.si-burger:hover { border-color: var(--si-color-primary); background: var(--si-color-surface); }

@media (max-width: 900px) {
	.si-burger { display: block; }
	.si-topbar__lieu { display: none; }
	/* Ancré sous l'en-tête plutôt qu'à une hauteur devinée : le bandeau de
	   coordonnées et la pilule ne font pas la même hauteur. */
	.si-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--si-color-base);
		border-bottom: var(--si-border);
		box-shadow: var(--si-shadow-md);
		padding: var(--si-space-5) var(--si-space-5) var(--si-space-6);
		display: none;
		max-height: 80vh;
		overflow-y: auto;
	}
	.si-nav.is-open { display: block; animation: si-menu-in .2s ease; }
	.si-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.si-nav li + li { border-top: 1px solid color-mix(in srgb, var(--si-color-line) 60%, transparent); }
	/* Les entrées de menu deviennent des lignes pleine largeur — mais pas les
	   pastilles d'outils, qui sont aussi des liens : passées en « block », leur
	   icône se collait à gauche d'un rectangle vide, et « justify-content » ne
	   pouvait plus rien puisqu'il n'y avait plus de flex. */
	.si-nav a { display: block; padding: var(--si-space-4) 0; font-size: var(--si-text-base); }
	.si-nav a::after { display: none; }
	.si-nav .sub-menu {
		position: static; display: flex; border: none; box-shadow: none;
		padding: 0 0 var(--si-space-3) var(--si-space-4); animation: none;
	}
	.si-header__phone span:last-child { display: none; }
	.si-header__actions .si-btn { display: none; }

	/*
	 * Le tiroir du menu accueille ce qui ne tient pas dans la barre, et le range
	 * proprement : les pastilles — devise, langue, favoris, compte — se
	 * partagent une ligne à parts égales, quel qu'en soit le nombre ; les deux
	 * boutons d'action prennent chacun la leur.
	 */
	.si-nav__outils {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: var(--si-space-3);
		padding-top: var(--si-space-4);
		margin-top: var(--si-space-3);
		border-top: var(--si-border);
	}
	.si-nav__outils .si-header__separateur { display: none; }
	.si-nav__outils > .si-outil,
	.si-nav__outils > .si-devise-select,
	.si-nav__outils > .si-langue-select {
		/* Elles se partagent la ligne, mais aucune ne rogne son texte : « EUR € »
		   coupé en « EUI » vaut moins qu'une pastille un peu plus large. */
		flex: 1 1 auto;
		min-width: max-content;
		justify-content: center;
	}
	.si-nav__outils > .si-devise-select select,
	.si-nav__outils > .si-langue-select > * { width: 100%; justify-content: center; }
	/* Écrire sur WhatsApp est une action, pas une icône de plus : une ligne
	   entière, la même que le bouton d'estimation. */
	.si-nav__outils .si-wa {
		flex: 1 0 100%;
		width: 100%;
		height: 46px;
		border-radius: var(--si-radius-full);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.si-nav__outils .si-wa .si-wa__texte {
		position: static;
		width: auto; height: auto;
		clip: auto; clip-path: none;
		font-weight: 600;
		white-space: nowrap;
	}
	/* Téléphone et bouton prennent la ligne entière : côte à côte, l'un
	   passait sous l'autre. */
	.si-nav__outils .si-header__phone {
		flex: 1 0 100%;
		font-size: var(--si-text-base);
	}
	.si-nav__outils .si-header__phone span:last-child { display: inline; }
	.si-nav__outils .si-btn {
		display: inline-flex;
		flex: 1 0 100%;
		justify-content: center;
	}
}

/* Le bouton de dépliage n'existe que dans le tiroir mobile. La règle est
   bornée à l'écran large : posée sans borne, elle passait après le bloc mobile
   et l'annulait. */
@media (min-width: 901px) {
	.si-nav__deplier { display: none; }
}

/* Hors mobile, le tiroir reste vide : rien à afficher. */
.si-nav__outils:empty { display: none; }

/* ---------- Outils de l'en-tête ---------- */
.si-header__actions { gap: var(--si-space-2); }
.si-icone { width: 17px; height: 17px; }

/* Devise, langue, favoris, compte : une même pilule, une même hauteur. */
.si-outil,
.si-devise-select select,
.si-langue-select__actuel {
	display: inline-flex;
	align-items: center;
	gap: var(--si-space-2);
	height: 38px;
	padding: 0 12px;
	border: var(--si-border);
	border-radius: var(--si-radius-full);
	background: var(--si-color-base);
	color: var(--si-color-ink-soft);
	/* Le sélecteur de langue est un <button> : sans cette ligne il repartirait
	   sur la police du système au lieu de celle du site. */
	font-family: inherit;
	font-size: var(--si-text-xs);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}
.si-outil:hover,
.si-devise-select select:hover,
.si-langue-select__actuel:hover { border-color: color-mix(in srgb, var(--si-color-primary) 35%, var(--si-color-line)); color: var(--si-color-primary); }
.si-outil--icone { width: 38px; padding: 0; justify-content: center; position: relative; }
.si-outil__pastille {
	position: absolute; top: -3px; right: -3px;
	min-width: 20px; height: 20px; padding: 0 4px;
	border-radius: var(--si-radius-full);
	background: var(--si-color-accent); color: #20160a;
	/* Le compteur reste sur l'échelle du thème : en dessous de 12 px, le chiffre
	   n'est plus lisible pour un œil presbyte. Le rond suit. */
	font-size: var(--si-text-xs); font-weight: 700; line-height: 20px; text-align: center;
}
/* Le chevron est dessiné par le conteneur : le <select> lui réserve la place à
   droite, sinon la flèche se pose sur le symbole de la devise. */
.si-devise-select { position: relative; display: inline-flex; }
.si-devise-select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 30px;
	background-image: none;
}
.si-devise-select::after {
	content: "";
	position: absolute;
	right: 13px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: .5;
	pointer-events: none;
}

/* Au doigt, ces pastilles et le bouton de menu sont les seules portes d'entrée
   de l'en-tête : elles atteignent le seuil tactile de 44 px. */
@media (pointer: coarse) {
	.si-outil,
	.si-devise-select select,
	.si-langue-select__actuel { height: 44px; }
	.si-outil--icone { width: 44px; }
	.si-burger { padding: 14px 13px; }
}

/* Le libellé du bouton WhatsApp ne se montre que dans le tiroir mobile. */
.si-wa__texte {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bouton WhatsApp : rond, vert, le vrai logo. */
.si-wa {
	width: 42px; height: 42px; flex: none;
	display: grid; place-items: center;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(145deg, #57c47f, #2f9e5b);
	box-shadow: 0 0 0 6px rgba(37, 211, 102, .13), 0 8px 16px rgba(37, 211, 102, .3);
	transition: transform .18s ease, box-shadow .18s ease;
}
.si-wa:hover,
.si-wa:focus-visible {
	/* Le logo reste blanc : le lien du thème le teintait en doré au survol. */
	color: #fff;
	background: linear-gradient(145deg, #3fb56d, #24864a);
	box-shadow: 0 0 0 8px rgba(37, 211, 102, .16), 0 8px 18px rgba(37, 211, 102, .34);
}
.si-wa svg { fill: currentColor; }
.si-wa svg { width: 21px; height: 21px; }

/* ---------- En-tête rond ---------- */
/* La pilule tient toute la largeur : son contenu s'y répartit, sinon logo et
   menu se tassent à gauche et la moitié droite reste vide. Et le bouton rond de
   droite garde sa marge : collé à l'arrondi, il déborde à l'œil. */
.si-header--rond .si-header__pilule { justify-content: space-between; gap: var(--si-space-4); }
.si-header--rond .si-header__pilule > *:last-child { margin-left: auto; }
.si-header--rond .si-header__pilule { padding-right: var(--si-space-4); }
/* Un logo livré avec son propre fond ne doit pas faire un carré dans un rond. */
.si-header__pilule .si-brand img { border-radius: 12px; }
.si-header--rond { background: none; backdrop-filter: none; border: 0; padding-block: var(--si-space-3); }
.si-header--rond::after { display: none; }
.si-header__pilule {
	display: flex; align-items: center; gap: var(--si-space-5);
	padding: 9px 10px 9px 22px;
	border-radius: var(--si-radius-full);
	background: color-mix(in srgb, var(--si-color-base) 94%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
	border: 1px solid color-mix(in srgb, #fff 60%, transparent);
	min-height: 0;
}
.si-header--rond .si-nav { margin-inline: auto; }
.si-header--rond.is-scrolled { box-shadow: none; }
.si-header--rond.is-scrolled .si-header__pilule { background: var(--si-color-base); }
/* Sur l'accueil, la barre flotte au-dessus du bandeau : le fil d'Ariane n'a
   rien à faire entre les deux. Le décalage, lui, est porté plus bas par
   « body.si-entete-rond .si-header--rond », qui sort la barre du flux. */
.si-header--rond-flottant + .si-breadcrumb { display: none; }

/* ---------- Bandeau d'accueil ---------- */
.si-hero {
	position: relative;
	min-height: clamp(460px, 64vh, 720px);
	display: flex;
	align-items: flex-end;
	color: #fff;
	background: var(--si-color-primary);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	isolation: isolate;
}
.si-hero::after {
	/* Le voile monte du bas : le texte reste lisible sans assombrir la photo entière. */
	content: "";
	position: absolute;
	inset: 0;
	background: var(--si-voile);
	z-index: -1;
}
.si-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--si-space-8);
	width: 100%;
}
.si-hero h1,
.si-hero__title {
	color: #fff;
	max-width: 20ch;
	font-size: var(--si-text-4xl);
	margin-bottom: var(--si-space-4);
	text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}
.si-hero__lead {
	font-size: var(--si-text-lg);
	max-width: 54ch;
	opacity: .94;
	margin-bottom: var(--si-space-6);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.si-hero__actions { display: flex; flex-wrap: wrap; gap: var(--si-space-3); margin-top: var(--si-space-5); }

/* La barre de recherche s'avance sur le bandeau plutôt que de flotter dessous. */
.si-hero .si-searchbar { margin-bottom: calc( var(--si-space-6) * -1 ); }

/* ---------- Barre de recherche ---------- */
.si-searchbar {
	position: relative;
	background: var(--si-color-base);
	border-radius: var(--si-radius-lg);
	box-shadow: var(--si-shadow-lg);
	padding: var(--si-space-5) var(--si-space-5) var(--si-space-5);
	display: grid;
	gap: var(--si-space-4);
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	align-items: end;
	color: var(--si-color-ink);
}
.si-searchbar label {
	font-size: var(--si-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--si-tracking-wide);
	color: var(--si-color-muted);
	margin-bottom: var(--si-space-2);
}
.si-searchbar .si-btn { height: 46px; }
.si-searchbar input, .si-searchbar select { height: 46px; }

/* Un budget se lit avec sa devise : le symbole se pose dans le champ, à
   gauche du montant, et suit la devise choisie dans l'en-tête. */
.si-champ-devise { position: relative; display: block; }
.si-champ-devise__symbole {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
	pointer-events: none;
	line-height: 1;
}
/* La règle générale des champs pose un « padding » en raccourci, plus
   spécifique qu'une classe seule : la place réservée au symbole était reprise,
   et l'euro se posait sur le mot « de ». On qualifie donc par le conteneur. */
.si-champ-devise .si-champ-devise__saisie { width: 100%; padding-inline-start: 34px; }
/* « CHF », « AED » : trois lettres demandent plus de place qu'un €. */
.si-champ-devise[data-symbole="CHF"] .si-champ-devise__saisie,
.si-champ-devise[data-symbole="AED"] .si-champ-devise__saisie,
.si-champ-devise[data-symbole="MAD"] .si-champ-devise__saisie { padding-inline-start: 52px; }
.si-champ-devise[data-symbole="Rs"] .si-champ-devise__saisie,
.si-champ-devise[data-symbole="C$"] .si-champ-devise__saisie { padding-inline-start: 42px; }

@media (max-width: 640px) {
	.si-searchbar { padding: var(--si-space-4); gap: var(--si-space-3); }
}

/* ---------- Filtres du listing ---------- */
.si-filters {
	background: var(--si-color-surface);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-5);
	margin-bottom: var(--si-space-6);
}
.si-filters__grid {
	display: grid;
	gap: var(--si-space-4);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.si-filters__actions {
	display: flex;
	gap: var(--si-space-3);
	align-items: center;
	margin-top: var(--si-space-4);
	flex-wrap: wrap;
}
.si-filters__toggle { display: none; }
.si-filters__more { display: none; }
.si-filters.is-expanded .si-filters__more { display: grid; }

.si-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--si-space-2);
}
.si-checkgrid label {
	display: flex;
	align-items: center;
	gap: var(--si-space-2);
	font-weight: 400;
	font-size: var(--si-text-sm);
	margin: 0;
	cursor: pointer;
}
.si-checkgrid input { width: auto; }

/* Barre de résultats */
.si-results-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--si-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--si-space-5);
}
.si-results-bar__count { font-size: var(--si-text-sm); color: var(--si-color-muted); }
.si-results-bar__count strong { color: var(--si-color-ink); }

/* ---------- Carte de bien ---------- */
.si-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	transition: transform var(--si-transition), box-shadow var(--si-transition);
}
.si-card:hover { transform: translateY(-3px); box-shadow: var(--si-shadow); }

.si-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--si-color-surface); overflow: hidden; }
.si-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.si-card:hover .si-card__media img { transform: scale(1.04); }
.si-card__link { position: absolute; inset: 0; z-index: 2; }
.si-card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

.si-card__badges { position: absolute; top: var(--si-space-3); left: var(--si-space-3); display: flex; gap: var(--si-space-2); flex-wrap: wrap; z-index: 3; }
.si-badge {
	display: inline-block;
	padding: 0.35em 0.7em;
	font-size: var(--si-text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: var(--si-radius);
	background: rgba(255, 255, 255, 0.94);
	color: var(--si-color-primary);
}
.si-badge--accent { background: var(--si-color-accent); color: var(--si-color-primary); }
.si-badge--sold { background: var(--si-color-danger); color: #fff; }
.si-badge--pending { background: #f0a202; color: #3a2600; }
.si-badge--exclu { background: var(--si-color-primary); color: #fff; }

.si-card__fav {
	position: absolute;
	top: var(--si-space-3);
	right: var(--si-space-3);
	z-index: 4;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: none; border-radius: var(--si-radius-full);
	background: rgba(255, 255, 255, 0.94);
	cursor: pointer;
	color: var(--si-color-primary);
	transition: background var(--si-transition), color var(--si-transition);
}
.si-card__fav:hover { background: #fff; color: #e0245e; }
/* Un bien retenu : le cœur se remplit de rose, quel que soit le modèle de
   vignette. Un cœur blanc sur fond blanc ne se voit pas. */
.si-card__fav.is-active,
.si-vignette__fav.is-active {
	background: #fff;
	color: #e0245e;
}
.si-card__fav.is-active svg,
.si-vignette__fav.is-active svg,
.si-card__fav.is-active .si-vignette__icone,
.si-vignette__fav.is-active .si-vignette__icone { fill: currentColor; stroke: currentColor; }

.si-card__body { padding: var(--si-space-4); display: flex; flex-direction: column; gap: var(--si-space-3); flex: 1; }
.si-card__eyebrow {
	font-size: var(--si-text-xs);
	letter-spacing: var(--si-tracking-wide);
	text-transform: uppercase;
	color: var(--si-color-muted);
}
.si-card__title {
	font-family: var(--si-font-heading);
	font-size: var(--si-text-lg);
	margin: 0;
	color: var(--si-color-primary);
}
.si-card__price {
	font-size: var(--si-text-xl);
	font-weight: 600;
	color: var(--si-color-ink);
	font-variant-numeric: tabular-nums;
}
.si-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--si-space-3);
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
	margin-top: auto;
	padding-top: var(--si-space-3);
	border-top: var(--si-border);
}
.si-card__meta span { display: inline-flex; align-items: center; gap: 0.35em; }
.si-card__dpe { display: flex; align-items: center; gap: var(--si-space-2); font-size: var(--si-text-xs); }

/* Vue liste */
.si-list .si-card { flex-direction: row; }
.si-list .si-card__media { width: 38%; aspect-ratio: auto; min-height: 220px; flex-shrink: 0; }
@media (max-width: 700px) {
	.si-list .si-card { flex-direction: column; }
	.si-list .si-card__media { width: 100%; aspect-ratio: 4 / 3; }
}

/* ---------- Étiquette DPE ---------- */
.si-dpe-tag {
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 3px;
	font-weight: 700;
	font-size: var(--si-text-xs);
	color: #16181d;
}
.si-dpe-tag--a { background: var(--si-dpe-a); color: #fff; }
.si-dpe-tag--b { background: var(--si-dpe-b); }
.si-dpe-tag--c { background: var(--si-dpe-c); }
.si-dpe-tag--d { background: var(--si-dpe-d); }
.si-dpe-tag--e { background: var(--si-dpe-e); }
.si-dpe-tag--f { background: var(--si-dpe-f); }
.si-dpe-tag--g { background: var(--si-dpe-g); color: #fff; }
/* « Non soumis » et « vierge » restent sur l'échelle du thème : le plancher de
   --si-text-xs est là pour que rien ne descende sous 12 px. */
.si-dpe-tag--ns, .si-dpe-tag--vi { background: var(--si-color-line); color: var(--si-color-muted); }

/* ---------- Réglette DPE / GES ---------- */
/* Sept segments d'un dégradé, la classe du bien en pastille pleine. */
.si-echelle {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}
.si-echelle__pas {
	flex: 1 1 0;
	height: 14px;
	border-radius: var(--si-radius-full);
	background: var(--si-echelle-teinte);
}
/* Le premier et le dernier segment ferment la réglette en pointe douce. */
.si-echelle__pas:first-child { border-start-start-radius: var(--si-radius-full); border-end-start-radius: var(--si-radius-full); }
.si-echelle__pas.is-active {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	min-width: 54px;
	height: 38px;
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
	font-size: var(--si-text-base);
	letter-spacing: .02em;
}
/* Sur les teintes claires du haut de l'échelle, l'encre blanche ne tient pas. */
.si-echelle--dpe .si-echelle__pas.is-active { color: color-mix(in srgb, var(--si-echelle-teinte) 22%, #10131a); }
.si-echelle--dpe .si-echelle__pas.is-active[aria-label$="F"],
.si-echelle--dpe .si-echelle__pas.is-active[aria-label$="G"],
.si-echelle--ges .si-echelle__pas.is-active { color: #fff; }
.si-echelle__valeur { margin: var(--si-space-3) 0 0; font-size: var(--si-text-sm); color: var(--si-color-muted); }

@media (max-width: 480px) {
	.si-echelle { gap: 3px; }
	.si-echelle__pas { height: 11px; }
	.si-echelle__pas.is-active { min-width: 44px; height: 32px; }
}

.si-passoire {
	display: inline-flex;
	align-items: center;
	gap: var(--si-space-2);
	background: #fff4e5;
	border: 1px solid #f0a202;
	color: #7a4a00;
	padding: var(--si-space-2) var(--si-space-3);
	border-radius: var(--si-radius);
	font-size: var(--si-text-xs);
}

/* ---------- Fiche bien ---------- */
.si-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--si-space-7);
	align-items: start;
	/* Un élément de grille a `min-width:auto` : sans ce zéro, un tableau large
	   pousse la colonne et fait déborder toute la page sur petit écran. */
	min-width: 0;
}
@media (max-width: 1000px) {
	.si-single__layout { grid-template-columns: minmax(0, 1fr); }
}
/* `minmax(0, …)` contraint la piste, pas l'élément posé dedans : sans ce zéro,
   un tableau à colonnes insécables élargit la page entière. */
.si-single__layout > *,
.si-single__main { min-width: 0; }

.si-single__header { margin-bottom: var(--si-space-5); }
.si-single__title { margin-bottom: var(--si-space-2); }
.si-single__location { color: var(--si-color-muted); display: flex; align-items: center; gap: var(--si-space-2); }
.si-single__price-row {
	display: flex;
	align-items: baseline;
	gap: var(--si-space-4);
	flex-wrap: wrap;
	margin-top: var(--si-space-4);
}
.si-single__price { font-size: var(--si-text-3xl); font-weight: 600; color: var(--si-color-primary); font-variant-numeric: tabular-nums; }
/* Mention obligatoire, mais discrète : elle informe sans peser sur le prix. */
.si-single__price-note {
	font-size: var(--si-text-xs);
	line-height: 1.4;
	color: color-mix(in srgb, var(--si-color-muted) 80%, transparent);
}

.si-gallery-main { position: relative; border-radius: var(--si-radius-lg); overflow: hidden; background: var(--si-color-surface); }
.si-gallery-main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.si-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--si-space-2);
	margin-top: var(--si-space-2);
}
.si-gallery-thumbs button {
	padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
	border-radius: var(--si-radius); overflow: hidden; aspect-ratio: 4 / 3;
}
.si-gallery-thumbs button.is-active { border-color: var(--si-color-accent); }
.si-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.si-gallery__count {
	position: absolute; bottom: var(--si-space-3); right: var(--si-space-3);
	background: rgba(0, 0, 0, 0.6); color: #fff;
	padding: 0.3em 0.7em; border-radius: var(--si-radius); font-size: var(--si-text-xs);
}

/* Lightbox */
.si-lightbox {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(10, 15, 22, 0.94);
	display: none; align-items: center; justify-content: center;
	padding: var(--si-space-5);
}
.si-lightbox.is-open { display: flex; }
.si-lightbox img { max-height: 88vh; max-width: 100%; object-fit: contain; }
.si-lightbox__close, .si-lightbox__prev, .si-lightbox__next {
	position: absolute; background: rgba(255, 255, 255, 0.14); color: #fff;
	border: none; width: 48px; height: 48px; border-radius: var(--si-radius-full);
	font-size: 1.4rem; cursor: pointer; display: grid; place-items: center;
}
.si-lightbox__close { top: var(--si-space-5); right: var(--si-space-5); }
.si-lightbox__prev { left: var(--si-space-5); }
.si-lightbox__next { right: var(--si-space-5); }

/* Caractéristiques clés */
.si-keyfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--si-space-4);
	padding: var(--si-space-5);
	background: var(--si-color-surface);
	border-radius: var(--si-radius-lg);
	margin-block: var(--si-space-6);
}
.si-keyfact { text-align: center; }
.si-keyfact__value { font-size: var(--si-text-2xl); font-weight: 600; color: var(--si-color-primary); display: block; line-height: 1.2; }
.si-keyfact__label { font-size: var(--si-text-xs); text-transform: uppercase; letter-spacing: var(--si-tracking-wide); color: var(--si-color-muted); }

/* Tableau de détails */
/* Caractéristiques : une carte par famille, deux colonnes sur grand écran.
   Une seule liste de trente lignes ne se lit pas — celle-ci se parcourt. */
.si-caras__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: var(--si-space-4);
	margin-top: var(--si-space-4);
}
.si-caras__groupe {
	background: var(--si-color-surface);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-5);
}
.si-caras__titre {
	margin: 0 0 var(--si-space-2);
	font-family: var(--si-font-body);
	font-size: var(--si-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--si-tracking-wide);
	color: var(--si-color-muted);
}
.si-caras__liste { margin: 0; display: grid; }
.si-caras__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--si-space-4);
	padding: 9px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--si-color-line) 70%, transparent);
	font-size: var(--si-text-sm);
}
.si-caras__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.si-caras__ligne dt { color: var(--si-color-muted); margin: 0; }
.si-caras__ligne dd { margin: 0; font-weight: 600; text-align: right; color: var(--si-color-ink); }

.si-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 var(--si-space-6); }
.si-specs__row {
	display: flex; justify-content: space-between; gap: var(--si-space-4);
	padding-block: var(--si-space-3);
	border-bottom: var(--si-border);
	font-size: var(--si-text-sm);
}
.si-specs__label { color: var(--si-color-muted); }
.si-specs__value { font-weight: 600; text-align: right; }

.si-caras__titre--large { margin-top: var(--si-space-6); font-size: var(--si-text-lg); }
.si-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--si-space-2); list-style: none; padding: 0; margin: 0; }
.si-features li { display: flex; align-items: center; gap: var(--si-space-2); font-size: var(--si-text-sm); }
.si-features li::before { content: "✓"; color: var(--si-color-accent); font-weight: 700; }

.si-block { margin-bottom: var(--si-space-7); }
.si-block__title {
	font-size: var(--si-text-xl);
	padding-bottom: var(--si-space-3);
	border-bottom: 2px solid var(--si-color-accent);
	display: inline-block;
}

/* ---------- Colonne contact (agent) ---------- */
.si-sidebar { position: sticky; top: calc(var(--si-header-height) + var(--si-space-4)); display: grid; gap: var(--si-space-5); }

.si-agent-card {
	background: #fff;
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-5);
	box-shadow: var(--si-shadow-sm);
}
.si-agent-card__head { display: flex; align-items: center; gap: var(--si-space-4); margin-bottom: var(--si-space-4); }
.si-agent-card__photo {
	width: 72px; height: 72px; border-radius: var(--si-radius-full);
	object-fit: cover; flex-shrink: 0; background: var(--si-color-surface);
}
.si-agent-card__name { font-family: var(--si-font-heading); font-size: var(--si-text-lg); margin: 0; color: var(--si-color-primary); }
.si-agent-card__role { font-size: var(--si-text-sm); color: var(--si-color-muted); }
.si-agent-card__actions { display: grid; gap: var(--si-space-2); margin-bottom: var(--si-space-4); }
.si-agent-card__legal { font-size: var(--si-text-xs); color: var(--si-color-muted); margin-top: var(--si-space-4); }

.si-ref-line {
	display: flex; justify-content: space-between;
	font-size: var(--si-text-xs); color: var(--si-color-muted);
	padding-top: var(--si-space-3); border-top: var(--si-border);
}

/* ---------- Carte ---------- */
/* `z-index: 0` enferme la carte dans son propre contexte d'empilement : Leaflet
   place ses calques jusqu'à 1000, et ils passaient par-dessus l'en-tête. */
.si-map, .si-listing-carte__panneau {
	position: relative;
	z-index: 0;
	isolation: isolate;
}
.si-map { height: 380px; border-radius: var(--si-radius-lg); overflow: hidden; border: var(--si-border); }
.si-map--archive { height: 520px; }

/* ---------- Pagination ---------- */
.si-pagination { display: flex; justify-content: center; gap: var(--si-space-2); margin-top: var(--si-space-7); flex-wrap: wrap; }
.si-pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 42px; height: 42px; padding-inline: var(--si-space-3);
	border: var(--si-border); border-radius: var(--si-radius);
	text-decoration: none; font-size: var(--si-text-sm);
}
.si-pagination .current { background: var(--si-color-primary); color: #fff; border-color: var(--si-color-primary); }

/* ---------- Fil d'Ariane ---------- */
.si-breadcrumb { font-size: var(--si-text-xs); color: var(--si-color-muted); }
.si-breadcrumb ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
	list-style: none; margin: 0; padding: 0;
}
.si-breadcrumb li { display: flex; align-items: center; gap: 4px 8px; }
.si-breadcrumb li + li::before { content: "/"; opacity: .45; }
.si-breadcrumb a { color: inherit; text-decoration: none; }
.si-breadcrumb a:hover { color: var(--si-color-primary); text-decoration: underline; text-underline-offset: 2px; }
.si-breadcrumb [aria-current="page"] { color: var(--si-color-ink); }

/* ---------- Agents ----------
   Une page d'équipe sert à choisir à qui l'on parle : le portrait porte le
   regard, le nom et la fonction disent qui c'est, et les deux boutons sont là
   pour être touchés au pouce. */

.si-equipe-hero {
	background: var(--si-color-surface);
	border-bottom: var(--si-border);
	padding-block: var(--si-space-6) var(--si-space-7);
}
.si-equipe-hero__inner { display: grid; justify-items: start; gap: var(--si-space-2); }
.si-equipe-hero__inner .si-breadcrumb { width: 100%; }
.si-equipe-hero__inner .si-breadcrumb .si-container { padding: 0; max-width: none; }
.si-equipe-hero__titre { margin: 0; font-size: clamp(30px, 3.6vw, 46px); }
.si-equipe-hero__intro {
	margin: var(--si-space-2) 0 0;
	color: var(--si-color-muted);
	max-width: 68ch;
	font-size: var(--si-text-lg);
	line-height: 1.6;
}

.si-equipe {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--si-space-5);
}

.si-agent-tile {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-3);
	padding: var(--si-space-4);
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	box-shadow: var(--si-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.si-agent-tile:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--si-color-primary) 35%, transparent);
	box-shadow: 0 12px 28px rgba(16, 24, 40, .10);
}
.si-agent-tile__lien {
	display: flex;
	flex-direction: column;
	gap: var(--si-space-3);
	color: inherit;
	text-decoration: none;
}
.si-agent-tile__photo {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--si-radius-md, 12px);
	background: var(--si-color-surface);
	aspect-ratio: 4 / 5;
}
.si-agent-tile__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.si-agent-tile:hover .si-agent-tile__photo img { transform: scale(1.04); }
.si-agent-tile__initiale {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-family: var(--si-font-heading);
	font-size: 64px;
	color: color-mix(in srgb, var(--si-color-primary) 40%, transparent);
}
.si-agent-tile__identite { display: grid; gap: 2px; }
.si-agent-tile__name {
	font-family: var(--si-font-heading);
	font-size: var(--si-text-lg);
	font-weight: 600;
	color: var(--si-color-ink);
	line-height: 1.25;
}
.si-agent-tile__role { color: var(--si-color-accent); font-size: var(--si-text-sm); }
.si-agent-tile__secteurs {
	margin: 0;
	color: var(--si-color-muted);
	font-size: var(--si-text-sm);
	line-height: 1.45;
}
.si-agent-tile__actions {
	display: flex; flex-wrap: wrap; gap: var(--si-space-2);
	margin-top: auto;
	padding-top: var(--si-space-1);
}
.si-agent-tile__actions .si-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.si-btn--icone { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.si-btn--icone svg { width: 16px; height: 16px; flex: none; }
.si-btn--icone .si-btn__texte { white-space: nowrap; }

/* La fiche d'un agent : le portrait à gauche, l'identité et les gestes utiles
   à droite ; sur mobile, tout se remet dans l'axe. */
.si-agent-hero__inner { display: grid; gap: var(--si-space-5); }
.si-agent-hero__inner .si-breadcrumb .si-container { padding: 0; max-width: none; }
.si-agent-hero__duo { display: grid; gap: var(--si-space-5); align-items: center; }
.si-agent-hero__photo {
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	background: var(--si-color-base);
	aspect-ratio: 4 / 5;
	box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
}
.si-agent-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-agent-hero__texte { display: grid; justify-items: start; gap: var(--si-space-2); }
.si-agent-hero__actions {
	display: flex; flex-wrap: wrap; gap: var(--si-space-2);
	margin-top: var(--si-space-3);
}
.si-agent-hero__actions .si-btn { display: inline-flex; align-items: center; gap: 8px; }
.si-agent-hero__actions .si-btn svg { width: 17px; height: 17px; flex: none; }
.si-agent-hero__reseaux {
	display: flex; flex-wrap: wrap; gap: var(--si-space-3);
	list-style: none; margin: var(--si-space-3) 0 0; padding: 0;
	font-size: var(--si-text-sm);
}
.si-agent-hero__reseaux a { color: var(--si-color-muted); text-decoration: none; }
.si-agent-hero__reseaux a:hover { color: var(--si-color-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 820px) {
	.si-agent-hero__duo { grid-template-columns: 280px minmax(0, 1fr); gap: var(--si-space-7); }
}

/* La fiche d'un agent : bandeau commun, puis les blocs alignés sur le reste. */
.si-agent-infos { margin-top: var(--si-space-5); }
.si-agent-biens { margin-top: var(--si-space-7); }
.si-agent-biens__lien { margin-top: var(--si-space-4); }

@media (max-width: 640px) {
	.si-equipe { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--si-space-4); }
	.si-agent-tile { padding: var(--si-space-3); }
	.si-agent-tile__actions .si-btn { padding-inline: var(--si-space-2); }
}

/* ---------- Avis Google ----------
   Deux mises en page, pas trois : des cartes côte à côte, ou un bandeau qui
   met la note globale en avant. Les étoiles sont dessinées, jamais des
   caractères : « ★ » change de forme d'une police à l'autre, et disparaît
   quand elle manque. */

.si-etoiles { display: inline-flex; gap: 2px; }
.si-etoile {
	width: 1em; height: 1em;
	background-color: color-mix(in srgb, var(--si-color-muted) 35%, transparent);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/></svg>") center / contain no-repeat;
}
.si-etoile.is-pleine { background-color: #f5a623; }

.si-avis {
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--si-space-3);
	box-shadow: var(--si-shadow-sm, 0 1px 2px rgba(16, 24, 40, .04));
}
.si-avis__texte {
	margin: 0;
	color: var(--si-color-ink);
	/* Un avis très long ne doit pas déséquilibrer la grille. */
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.si-avis__tete {
	display: flex;
	align-items: center;
	gap: var(--si-space-3);
}
.si-avis__pied {
	display: flex;
	align-items: center;
	gap: var(--si-space-3);
	margin-top: auto;
	padding-top: var(--si-space-3);
	border-top: var(--si-border);
}
.si-avis__initiale {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--si-color-primary) 12%, transparent);
	color: var(--si-color-primary);
	font-weight: 600;
	font-size: var(--si-text-base);
}
.si-avis__auteur { display: grid; gap: 3px; line-height: 1.3; min-width: 0; }
.si-avis__auteur strong { font-size: var(--si-text-sm); }
.si-avis__date { margin: auto 0 0; color: var(--si-color-muted); font-size: var(--si-text-xs); }
.si-avis__source { margin-left: auto; display: inline-flex; opacity: .85; }
.si-avis__source:hover { opacity: 1; }

/* Le bloc : titre, note globale, puis les avis. */
.si-avis-bloc__tete {
	display: grid;
	justify-items: center;
	gap: var(--si-space-2);
	text-align: center;
	margin-bottom: var(--si-space-6);
}
.si-avis-bloc__titre { margin: 0; }
.si-avis-bloc__note {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--si-space-2);
	margin: 0;
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
}
.si-avis-bloc__note .si-etoiles { font-size: 1.1rem; }
.si-avis-bloc__note strong { color: var(--si-color-ink); font-size: var(--si-text-base); }
.si-avis-bloc__pied { text-align: center; margin: var(--si-space-6) 0 0; }
.si-avis-bloc__pied .si-btn { gap: var(--si-space-2); }
.si-avis-bloc--slider .si-avis-bloc__tete { position: relative; }
.si-avis-bloc--slider .si-piste__nav { margin-top: var(--si-space-2); }

/* Carrousel d'avis */
.si-avis-slider .si-defile { grid-auto-columns: calc(33.333% - var(--si-space-4)); }
@media (max-width: 900px) { .si-avis-slider .si-defile { grid-auto-columns: calc(50% - var(--si-space-3)); } }
@media (max-width: 620px) { .si-avis-slider .si-defile { grid-auto-columns: 88%; } }

/* Mur d'avis : des colonnes qui défilent lentement, et un fondu haut et bas —
   le mur du site de l'agence. */
.si-avis-mur {
	display: grid;
	grid-template-columns: repeat(var(--si-avis-colonnes, 3), minmax(0, 1fr));
	gap: var(--si-space-4);
	align-items: start;
}
.si-avis-mur--anime {
	max-height: 620px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 82%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 10%, #000 82%, transparent);
}
.si-avis-mur__colonne { min-width: 0; }
.si-avis-mur__piste { display: grid; gap: var(--si-space-4); }
.si-avis-mur--anime .si-avis-mur__piste {
	animation: si-avis-defile var(--si-avis-duree, 48s) linear infinite;
	will-change: transform;
}
/* Une colonne sur deux remonte : le mur respire au lieu de glisser en bloc. */
.si-avis-mur--anime .si-avis-mur__colonne:nth-child(even) .si-avis-mur__piste { animation-direction: reverse; }
.si-avis-mur--anime:hover .si-avis-mur__piste { animation-play-state: paused; }
.si-avis-mur__doublon { display: grid; gap: var(--si-space-4); }
.si-avis-mur .si-avis { break-inside: avoid; }
.si-avis-mur .si-avis__texte { -webkit-line-clamp: 10; }
.si-avis-mur .si-avis__pied { margin-top: var(--si-space-3); }

/* Le défilement parcourt exactement la moitié de la piste — le second jeu de
   cartes — puis reprend au même endroit, sans saut visible. */
@keyframes si-avis-defile {
	from { transform: translateY(0); }
	to { transform: translateY(calc(-50% - var(--si-space-4) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
	.si-avis-mur--anime .si-avis-mur__piste { animation: none; }
	.si-avis-mur--anime { max-height: none; -webkit-mask-image: none; mask-image: none; }
	.si-avis-mur__doublon { display: none; }
}

@media (max-width: 1000px) { .si-avis-mur { grid-template-columns: repeat(min(2, var(--si-avis-colonnes, 2)), minmax(0, 1fr)); } }
@media (max-width: 620px) {
	.si-avis-mur { grid-template-columns: minmax(0, 1fr); }
	.si-avis-mur--anime { max-height: 520px; }
}

/* ---------- Pied de page ---------- */
.si-footer {
	position: relative;
	background: var(--si-color-primary);
	color: color-mix(in srgb, #fff 78%, transparent);
	padding-block: var(--si-space-8) var(--si-space-5);
	margin-top: var(--si-space-9);
	font-size: var(--si-text-sm);
}
.si-footer::before {
	/* Un dégradé très sombre au pied : le bas de page se pose au lieu de flotter. */
	content: "";
	position: absolute; inset: auto 0 0 0; height: 55%;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .22));
	pointer-events: none;
}
.si-footer > * { position: relative; }
.si-footer a { color: color-mix(in srgb, #fff 78%, transparent); text-decoration: none; transition: color .2s ease; }
.si-footer a:hover { color: #fff; }
.si-footer h3 {
	color: #fff;
	font-size: var(--si-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--si-tracking-wide);
	margin: 0 0 var(--si-space-4);
	opacity: .72;
}
.si-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--si-space-2); }

/* L'enseigne : logo, nom et accroche, en tête des colonnes */
.si-footer__logo { max-height: var(--si-logo-footer, 52px); width: auto; }
.si-footer__nom { font-family: var(--si-font-heading); font-size: var(--si-text-xl); color: #fff; }
.si-footer__accroche { margin: var(--si-space-3) 0 0; max-width: 46ch; line-height: 1.65; opacity: .78; }

/* Colonnes : marque, deux colonnes de liens, coordonnées. */
.si-footer__colonnes {
	display: grid;
	/* La marque, puis autant de colonnes que l'agence en a rempli. `auto-fit`
	   est interdit à côté d'une piste flexible : le nombre vient du gabarit. */
	grid-template-columns: 1.5fr repeat(var(--si-footer-colonnes, 3), minmax(0, 1fr));
	gap: var(--si-space-7);
	padding-bottom: var(--si-space-6);
}
@media (max-width: 1000px) { .si-footer__colonnes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .si-footer__colonnes { grid-template-columns: minmax(0, 1fr); } }
.si-footer__marque .si-footer__accroche { margin-bottom: var(--si-space-4); }

.si-footer__address { font-style: normal; display: grid; gap: var(--si-space-3); }
.si-footer__ligne { display: flex; gap: var(--si-space-3); align-items: flex-start; line-height: 1.5; }
.si-footer__ligne .si-icone { width: 16px; height: 16px; flex: none; margin-top: 2px; opacity: .7; }

/* Les réseaux tiennent sur une ligne, toujours. La règle générale du pied de
   page — .si-footer ul { display: grid } — est plus spécifique que la classe
   seule et l'emportait : les icônes s'empilaient les unes sous les autres. */
.si-footer .si-footer__socials {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--si-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.si-footer__socials a {
	width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid rgba(255, 255, 255, .22);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.si-footer__socials a:hover { background: #fff; color: var(--si-color-primary); border-color: #fff; }
.si-footer__socials svg { width: 16px; height: 16px; }

/* La barre légale : une ligne de liens, la signature à droite. */
.si-footer__legal {
	display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
	/* La bulle du chatbot se pose en bas à droite : la signature lui laisse la place. */
	padding-right: clamp(0px, 6vw, 76px);
	gap: var(--si-space-2) var(--si-space-5);
	padding-top: var(--si-space-4);
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: var(--si-text-xs);
}
/* Une seule ligne : le copyright et les pages obligatoires à gauche, la
   signature à droite. Elle ne se casse qu'en dessous de 780 px. */
.si-footer__legal-liens { flex: 1 1 auto; min-width: 0; }
@media (max-width: 780px) {
	.si-footer__legal { flex-wrap: wrap; }
}
.si-footer__legal-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.si-footer__legal-sep { opacity: .35; }
/* Les liens du pied se soulignent au survol — sauf notre signature, qui est un
   bouton : un bouton souligné a l'air cassé. */
.si-footer__legal a:not(.si-signature):hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- Barre d'action mobile ---------- */
.si-sticky-cta {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
	background: #fff; border-top: var(--si-border);
	padding: var(--si-space-3) var(--si-space-4);
	display: none; gap: var(--si-space-3);
	box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
}
.si-sticky-cta .si-btn { flex: 1; }
@media (max-width: 1000px) {
	.si-sticky-cta { display: flex; }
	body.single-bien,
	body.single-programme { padding-bottom: 76px; }

	/* La barre d'appel occupe le bas de l'écran : la bulle du chatbot, elle
	   aussi fixée en bas, doit monter d'autant sous peine de la recouvrir. */
	body.single-bien .sic-widget-root,
	body.single-programme .sic-widget-root { bottom: 88px; }
}

/* ---------- États vides ---------- */
.si-empty {
	text-align: center; padding: var(--si-space-8) var(--si-space-5);
	background: var(--si-color-surface); border-radius: var(--si-radius-lg);
}
.si-empty h3 { margin-bottom: var(--si-space-2); }

/* ---------- Visuel de remplacement ---------- */
.si-card__placeholder,
.si-gallery-main--empty {
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: linear-gradient(155deg,
		color-mix(in srgb, var(--si-color-line) 55%, var(--si-color-surface)),
		var(--si-color-surface) 70%);
	display: grid;
	place-items: center;
	position: relative;
}
/* Un pictogramme dessiné, pas un emoji : la police du visiteur ne décide de rien. */
.si-card__placeholder::after,
.si-gallery-main--empty::after {
	content: "";
	width: 48px;
	height: 48px;
	opacity: 0.3;
	background-color: var(--si-color-muted);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.6V21h14V9.6'/><path d='M9.5 21v-6.2h5V21'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.6V21h14V9.6'/><path d='M9.5 21v-6.2h5V21'/></svg>") center / contain no-repeat;
}

/* ---------- Vidéos, plans, documents ---------- */
.si-media-block__subtitle {
	font-size: var(--si-text-base);
	margin: var(--si-space-6) 0 var(--si-space-3);
	color: var(--si-color-primary);
}

/* La piste se replie sous 360 px : sinon elle impose sa largeur à toute la
   colonne de la fiche, et le téléphone se met à défiler latéralement. */
.si-videos { display: grid; gap: var(--si-space-4); grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.si-video { margin: 0; }
.si-video video,
.si-video__embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	background: #0a0d12;
	display: block;
}
.si-video__embed { position: relative; cursor: pointer; border: 0; padding: 0; }
.si-video__embed img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.si-video__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.si-video__play {
	position: absolute; inset: 0; margin: auto;
	width: 66px; height: 66px;
	display: grid; place-items: center;
	border: 0; border-radius: var(--si-radius-full);
	background: rgba(255, 255, 255, 0.92);
	color: var(--si-color-primary);
	font-size: 1.4rem; cursor: pointer;
	transition: transform var(--si-transition), background var(--si-transition);
}
.si-video__embed:hover .si-video__play { transform: scale(1.08); background: #fff; }
.si-video figcaption { font-size: var(--si-text-sm); color: var(--si-color-muted); margin-top: var(--si-space-2); }

.si-plans { display: grid; gap: var(--si-space-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.si-plan {
	display: flex; flex-direction: column; gap: var(--si-space-2);
	border: var(--si-border); border-radius: var(--si-radius-lg);
	padding: var(--si-space-3); text-decoration: none;
	transition: border-color var(--si-transition), box-shadow var(--si-transition);
}
.si-plan:hover { border-color: var(--si-color-accent); box-shadow: var(--si-shadow-sm); }
.si-plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--si-color-surface); border-radius: var(--si-radius); }
.si-plan__icon { font-size: 2rem; text-align: center; }
.si-plan__label { font-size: var(--si-text-sm); font-weight: 600; display: grid; }
.si-plan__label small { font-weight: 400; color: var(--si-color-muted); }

.si-documents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--si-space-2); }
.si-documents a {
	display: flex; align-items: center; gap: var(--si-space-3);
	padding: var(--si-space-3) var(--si-space-4);
	border: var(--si-border); border-radius: var(--si-radius);
	text-decoration: none; font-size: var(--si-text-sm); font-weight: 600;
	transition: border-color var(--si-transition), background var(--si-transition);
}
.si-documents a:hover { border-color: var(--si-color-accent); background: var(--si-color-surface); }
.si-documents small { margin-left: auto; font-weight: 400; color: var(--si-color-muted); }

/* Sous-titres des sections de caractéristiques */
.si-specs__section {
	font-size: var(--si-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--si-tracking-wide);
	color: var(--si-color-accent-texte);
	margin: var(--si-space-5) 0 var(--si-space-2);
	font-family: var(--si-font-body);
	font-weight: 600;
}
.si-specs__section:first-of-type { margin-top: var(--si-space-3); }

/* Bloc diagnostics et risques */
.si-risques { display: grid; gap: var(--si-space-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.si-risques li {
	display: flex; align-items: center; gap: var(--si-space-2);
	font-size: var(--si-text-sm);
	padding: var(--si-space-2) var(--si-space-3);
	background: var(--si-color-surface); border-radius: var(--si-radius);
}
.si-risques li.is-alert { background: #fff4e5; color: #7a4a00; }
.si-diag-list { display: flex; flex-wrap: wrap; gap: var(--si-space-2); list-style: none; padding: 0; margin: 0; }
.si-diag-list li {
	font-size: var(--si-text-xs); padding: 0.3em 0.7em;
	border: var(--si-border); border-radius: var(--si-radius-full);
	color: var(--si-color-muted);
}

.si-card__ref {
	display: block;
	font-size: var(--si-text-xs);
	font-weight: 400;
	color: var(--si-color-muted);
	letter-spacing: 0.04em;
}

/* ---------- Actions de fiche ---------- */
.si-actions {
	display: flex; flex-wrap: wrap; gap: var(--si-space-2);
	margin-bottom: var(--si-space-4);
}
.si-action {
	display: inline-flex; align-items: center; gap: 0.4em;
	padding: 0.5em 0.9em;
	font-size: var(--si-text-xs); font-weight: 600;
	color: var(--si-color-muted);
	background: none; border: var(--si-border); border-radius: var(--si-radius-full);
	cursor: pointer; text-decoration: none;
	transition: border-color var(--si-transition), color var(--si-transition);
}
.si-action:hover { border-color: var(--si-color-primary); color: var(--si-color-primary); }
.si-action.is-active { border-color: var(--si-color-primary); color: var(--si-color-primary); background: var(--si-color-surface); }

.si-single__programme {
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
	margin-top: var(--si-space-2);
}
.si-single__programme a { font-weight: 600; }

/* Actions empilées sur la vignette (favori, comparaison) */
.si-card__actions {
	position: absolute;
	top: var(--si-space-3);
	right: var(--si-space-3);
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: var(--si-space-2);
}
.si-card__actions .si-card__fav { position: static; }
.si-card__compare {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: none; border-radius: var(--si-radius-full);
	background: rgba(255, 255, 255, 0.94);
	color: var(--si-color-primary);
	cursor: pointer; font-size: var(--si-text-sm);
	transition: background var(--si-transition), color var(--si-transition);
}
.si-card__compare:hover { background: #fff; }
.si-card__compare.is-active { background: var(--si-color-primary); color: #fff; }

/* Ces deux boutons sont posés dans l'angle d'une photo entièrement cliquable :
   au doigt, quelques pixels de moins et c'est la vignette qui s'ouvre. */
@media (pointer: coarse) {
	.si-card__fav,
	.si-card__compare { width: 44px; height: 44px; }
}

/* ---------- Bandeau d'un secteur ---------- */
.si-secteur-hero {
	position: relative;
	min-height: 280px;
	display: flex;
	align-items: flex-end;
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	margin-bottom: var(--si-space-6);
	padding: var(--si-space-5);
}
.si-secteur-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 30, 49, 0.1) 40%, rgba(10, 30, 49, 0.75) 100%);
}
.si-secteur-hero__titre {
	position: relative;
	z-index: 1;
	color: #fff;
	margin: 0;
	font-size: var(--si-text-3xl);
}

/* Programme neuf dans un listing */
.si-badge--neuf { background: var(--si-color-primary); color: #fff; }
.si-card--programme .si-card__price { font-size: var(--si-text-lg); }

/* ---------- Méga-menu : le panneau suit le menu du site ----------
   Les sélecteurs sont volontairement aussi précis que ceux de la navigation :
   sans cela, `.si-nav li` et `.si-nav a` gagnent, et le panneau se cale sur la
   largeur d'une entrée au lieu de celle de l'écran. */
.si-header--mega { position: sticky; }
.si-nav--mega > ul,
.si-nav--mega > div > ul { position: static; }
.si-nav .si-mega__entree { position: static; }
.si-mega__chevron {
	display: inline-block; width: 7px; height: 7px; margin-left: 7px;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px); opacity: .55;
	transition: transform .2s ease;
}
.si-nav .si-mega__panel {
	position: absolute; left: 0; right: 0; top: 100%;
	display: none;
	background: var(--si-color-base);
	border-top: var(--si-border);
	box-shadow: 0 30px 50px -20px rgba(15, 43, 70, .22);
	padding-block: var(--si-space-6);
	z-index: 90;
	/* Le panneau traverse l'écran : le rayon d'arrondi du site n'a rien à y
	   faire, il y dessine des coins flottants au milieu de nulle part. */
	border-radius: 0;
}
.si-nav .si-mega__entree:hover > .si-mega__panel,
.si-nav .si-mega__entree:focus-within > .si-mega__panel,
.si-nav .si-mega__entree.est-ouvert > .si-mega__panel { display: block; animation: si-mega-in .18s ease; }
/* La souris traverse un vide entre le lien et le panneau : on le comble. */
.si-nav .si-mega__entree--panneau > a { position: relative; }
.si-nav .si-mega__entree--panneau > a::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 22px;
}
.si-nav .si-mega__panel::before {
	content: "";
	position: absolute;
	inset: -22px 0 auto 0;
	height: 22px;
}
.si-mega__grille {
	display: grid;
	/*
	 * Des cartes, pas une liste : quatre par ligne sur un écran large, et la
	 * grille se recompose seule quand le menu en compte plus ou moins.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--si-space-4);
	align-items: stretch;
}
.si-nav .si-mega__carte {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	/* Un rayon fixe, indépendant du réglage global : les cartes du panneau
	   doivent rester régulières quelle que soit la rondeur du site. */
	border-radius: 16px;
	background: var(--si-color-surface);
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}
.si-nav .si-mega__carte::after { display: none; }
.si-mega__photo { position: absolute; inset: 0; display: block; }
.si-mega__photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.si-nav .si-mega__carte:hover .si-mega__photo img,
.si-nav .si-mega__carte:focus-visible .si-mega__photo img { transform: scale(1.06); }
/* Le voile ne monte qu'aux deux tiers : la photo reste lisible, le nom aussi. */
.si-mega__photo::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgb(9 20 34 / .9) 0%, rgb(9 20 34 / .55) 42%, rgb(9 20 34 / 0) 78%);
}
/* Sans photo — un type sans bien au catalogue — la carte garde un aplat de
   marque plutôt qu'un trou blanc, et porte l'initiale. */
.si-mega__carte--sans-photo .si-mega__photo {
	background: linear-gradient(150deg, var(--si-color-primary), var(--si-color-primary-dark));
}
.si-mega__initiale {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-family: var(--si-font-heading);
	font-size: 44px; color: rgb(255 255 255 / .28);
}
.si-mega__texte {
	position: absolute; inset: auto 0 0 0;
	display: grid; gap: 6px;
	padding: var(--si-space-4);
	z-index: 1;
}
.si-mega__nom {
	font-size: var(--si-text-lg);
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 12px rgb(9 20 34 / .5);
}
/* Le trait sous le nom : le repère de la maquette, et il sépare le nom de sa
   précision sans ajouter de ligne de texte. */
.si-mega__nom::after {
	content: "";
	display: block;
	width: 30px; height: 3px;
	margin-top: 8px;
	border-radius: 2px;
	background: var(--si-color-accent, #c8a86b);
	transition: width .28s ease;
}
.si-nav .si-mega__carte:hover .si-mega__nom::after { width: 52px; }
.si-mega__note {
	font-size: var(--si-text-sm);
	color: rgb(255 255 255 / .84);
	text-shadow: 0 1px 10px rgb(9 20 34 / .55);
}

@media (max-width: 900px) {
	.si-nav .si-mega__panel {
		position: static;
		display: none;
		box-shadow: none;
		border: 0;
		padding-block: var(--si-space-2);
		animation: none;
	}
	/* Dans le tiroir, un panneau s'ouvre au doigt, pas au survol. */
	.si-nav .si-mega__entree:hover > .si-mega__panel,
	.si-nav .si-mega__entree:focus-within > .si-mega__panel { display: none; }
	.si-nav .si-mega__entree.est-ouvert > .si-mega__panel { display: block; }
	.si-nav .si-mega__panel .si-container { padding-inline: 0; max-width: none; }
	/* Dans le tiroir, la carte est trop petite pour porter son nom en
	   surimpression : le texte passe sous la photo, sur fond de page. */
	.si-mega__grille { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--si-space-4) var(--si-space-3); }
	.si-nav .si-mega__carte { aspect-ratio: auto; border-radius: 12px; overflow: visible; color: var(--si-color-ink); }
	.si-mega__photo { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
	.si-mega__photo::after { content: none; }
	.si-mega__texte { position: static; padding: 10px 2px 0; gap: 4px; }
	.si-mega__nom { color: var(--si-color-primary); text-shadow: none; font-size: var(--si-text-base); }
	.si-mega__nom::after { display: none; }
	.si-mega__note { color: var(--si-color-muted); text-shadow: none; font-size: var(--si-text-xs); }
	.si-mega__entree.est-ouvert > a .si-mega__chevron { transform: rotate(-135deg) translate(-1px, -1px); }
}

/* ---------- Modèles d'en-tête ---------- */
.si-burger__bars { display: grid; gap: 4px; }
.si-burger__bars i { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.si-burger[aria-expanded="true"] .si-burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.si-burger[aria-expanded="true"] .si-burger__bars i:nth-child(2) { opacity: 0; }
.si-burger[aria-expanded="true"] .si-burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Méga-menu : la barre. Le panneau est plus haut, avec le walker.
   Au-dessus de 900 px seulement : sous cette largeur, la navigation est un
   tiroir qui doit pouvoir rester fermé. */
@media (min-width: 901px) {
	.si-nav--mega { display: flex; align-items: center; gap: var(--si-space-5); }
}

@keyframes si-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Modèles de pied de page ---------- */
.si-footer__col ul { font-size: var(--si-text-sm); }

/* ---------- Page introuvable ---------- */
/* ---------- Merci ----------
   L'écran d'après-envoi : une coche, une phrase, et la suite du parcours. */

.si-merci-hero {
	background: var(--si-color-surface);
	border-bottom: var(--si-border);
	padding-block: var(--si-space-8);
	text-align: center;
}
.si-merci-hero__inner { display: grid; justify-items: center; gap: var(--si-space-3); }
.si-merci-hero__coche {
	display: grid; place-items: center;
	width: 72px; height: 72px;
	border-radius: 999px;
	color: #fff;
	background: var(--si-color-primary);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--si-color-primary) 35%, transparent);
}
.si-merci-hero__coche svg { width: 34px; height: 34px; }
.si-merci-hero__titre { margin: 0; font-size: clamp(28px, 3.4vw, 44px); }
.si-merci-hero__chapeau {
	margin: 0;
	max-width: 62ch;
	color: var(--si-color-muted);
	font-size: var(--si-text-lg);
	line-height: 1.6;
}
.si-merci-hero__contacts { margin: var(--si-space-2) 0 0; color: var(--si-color-muted); font-size: var(--si-text-sm); }
.si-merci-hero__contacts a { color: var(--si-color-primary); text-decoration: none; font-weight: 600; }
.si-merci-hero__contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }

.si-merci-suite__titre { margin: 0 0 var(--si-space-6); text-align: center; font-size: clamp(24px, 2.8vw, 34px); }
.si-merci-etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--si-space-5);
	list-style: none;
	margin: 0; padding: 0;
	counter-reset: none;
}
.si-merci-etapes li {
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-5);
	display: grid;
	gap: var(--si-space-2);
	align-content: start;
}
.si-merci-etapes__num {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 999px;
	font-family: var(--si-font-heading);
	font-weight: 700;
	color: var(--si-color-primary);
	background: color-mix(in srgb, var(--si-color-primary) 12%, transparent);
}
.si-merci-etapes h3 { margin: 0; font-size: var(--si-text-lg); }
.si-merci-etapes p { margin: 0; color: var(--si-color-muted); line-height: 1.6; }
.si-merci-texte { margin: var(--si-space-7) auto 0; }
.si-merci-actions { display: flex; flex-wrap: wrap; gap: var(--si-space-3); justify-content: center; margin-top: var(--si-space-6); }

.si-404 { text-align: center; }
.si-404__code {
	font-family: var(--si-font-heading); font-size: clamp(4rem, 12vw, 8rem);
	line-height: 1; margin: 0; color: var(--si-color-accent); opacity: .3;
}
.si-404 h1 { margin: 0 0 var(--si-space-3); }
.si-404__recherche { max-width: 860px; margin: var(--si-space-6) auto 0; }
.si-404__actions { display: flex; flex-wrap: wrap; gap: var(--si-space-3); justify-content: center; margin-top: var(--si-space-5); }

/* ---------- Styles de blocs ---------- */

/* Conteneur de section libre */
.si-container--large { max-width: 1440px; }
.si-section--blanc { background: var(--si-color-base); }
.si-section--sombre { background: #101418; color: #eef1f5; }
.si-section--sombre h1, .si-section--sombre h2, .si-section--sombre h3 { color: #fff; }
.si-section--accent { background: var(--si-color-accent-soft); }
.si-section--espace-serre { padding-block: var(--si-space-5); }
.si-section--espace-normal { padding-block: var(--si-space-7); }
.si-section--espace-aere { padding-block: var(--si-space-9); }
.si-section-head__intro { margin: var(--si-space-2) 0 0; color: var(--si-color-muted); max-width: 68ch; }
.si-section-foot { margin-top: var(--si-space-6); text-align: center; }

/* Liste détaillée : la photo à gauche, les informations à droite */
.si-liste-biens { display: grid; gap: var(--si-space-4); }
.si-liste-biens .si-card { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; }
.si-liste-biens .si-card__media { height: 100%; }
.si-liste-biens .si-card__media img { height: 100%; object-fit: cover; }
@media (max-width: 640px) { .si-liste-biens .si-card { grid-template-columns: minmax(0, 1fr); } }

/* Secteurs */
/* Trois colonnes : six secteurs — le réglage par défaut — remplissent deux
   lignes pleines, sans tuile orpheline en bout de ligne. */
.si-secteurs--cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--si-space-4); }
@media (max-width: 900px) { .si-secteurs--cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .si-secteurs--cartes { grid-template-columns: minmax(0, 1fr); } }
.si-secteur {
	position: relative; display: block; border-radius: var(--si-radius-lg); overflow: hidden;
	text-decoration: none; color: #fff; min-height: 230px; background: var(--si-color-primary);
}
.si-secteur img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; display: block; transition: transform .5s ease; }
.si-secteur:hover img { transform: scale(1.06); }
/* Un dégradé par le bas plutôt qu'une photo assombrie en entier : le nom reste
   lisible et l'image garde ses couleurs. */
.si-secteur::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(8, 16, 32, .82), rgba(8, 16, 32, .25) 52%, rgba(8, 16, 32, 0) 78%);
}
.si-secteur__vide { display: block; height: 100%; min-height: 230px; background: linear-gradient(150deg, var(--si-color-primary), color-mix(in srgb, var(--si-color-primary) 60%, #000)); }
.si-secteur__nom { position: absolute; z-index: 1; left: var(--si-space-4); right: var(--si-space-4); bottom: var(--si-space-5); font-size: var(--si-text-lg); font-weight: 600; color: #fff; }
.si-secteur__compte { position: absolute; z-index: 1; left: var(--si-space-4); bottom: var(--si-space-3); font-size: var(--si-text-xs); opacity: .85; color: #fff; }
.si-secteurs--etiquettes { display: flex; flex-wrap: wrap; gap: var(--si-space-2); }
.si-secteurs--etiquettes .si-chip span { color: var(--si-color-muted); font-size: var(--si-text-xs); }
.si-secteurs--colonnes {
	columns: 3 220px; column-gap: var(--si-space-6); list-style: none; margin: 0; padding: 0;
}
.si-secteurs--colonnes li { break-inside: avoid; padding: var(--si-space-2) 0; border-bottom: var(--si-border); }
.si-secteurs--colonnes a { text-decoration: none; color: var(--si-color-ink); font-weight: 500; }
.si-secteurs--colonnes span { float: right; color: var(--si-color-muted); font-size: var(--si-text-xs); }

/* Chiffres clés */
.si-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--si-space-5); text-align: center; }
.si-chiffres--bandeau { border-block: var(--si-border); padding-block: var(--si-space-6); }
.si-chiffres--cartes .si-chiffre { background: var(--si-color-surface); border-radius: var(--si-radius-lg); padding: var(--si-space-5); }
.si-chiffre strong { display: block; font-family: var(--si-font-heading); font-size: var(--si-text-3xl); line-height: 1; color: var(--si-color-primary); }
.si-chiffre span { display: block; margin-top: var(--si-space-2); color: var(--si-color-muted); font-size: var(--si-text-sm); }

/* Appel à l'action */
.si-cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--si-space-5); padding: var(--si-space-6) var(--si-space-7); border-radius: var(--si-radius-lg);
}
.si-cta h2 { margin: 0 0 var(--si-space-2); }
.si-cta p { margin: 0; opacity: .9; max-width: 62ch; }
.si-cta__texte { flex: 1 1 34ch; }
.si-cta--bandeau { background: var(--si-color-primary); color: #fff; }
.si-cta--bandeau h2 { color: #fff; }
.si-cta--encadre { border: var(--si-border); background: var(--si-color-base); }
.si-cta--image { background-size: cover; background-position: center; color: #fff; position: relative; min-height: 280px; }
.si-cta--image::before { content: ""; position: absolute; inset: 0; background: rgba(10, 20, 32, .55); border-radius: inherit; }
.si-cta--image > * { position: relative; z-index: 1; }
.si-cta--image h2 { color: #fff; }

/* Bandeau d'accueil : variantes */
.si-hero--split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; color: var(--si-color-ink); min-height: 0; }
.si-hero--split .si-hero__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.si-hero--split .si-hero__inner { background: none; padding-block: var(--si-space-8); }
.si-hero--split .si-hero__title { color: var(--si-color-ink); }
@media (max-width: 900px) { .si-hero--split { grid-template-columns: minmax(0, 1fr); } }
.si-hero--sobre { background: var(--si-color-surface); color: var(--si-color-ink); min-height: 0; }
.si-hero--sobre .si-hero__inner { background: none; padding-block: var(--si-space-8); }
.si-hero--sobre .si-hero__title { color: var(--si-color-ink); }

/* Recherche encadrée */
.si-recherche-encadre {
	background: var(--si-color-base); border: var(--si-border); border-radius: var(--si-radius-lg);
	padding: var(--si-space-6);
}

/* Équipe en liste, grande citation */
.si-equipe-liste { display: grid; gap: var(--si-space-4); }

/* Aperçu de la section libre dans l'éditeur */
.si-editeur-section { padding: 24px; border: 1px dashed #c9ccd2; border-radius: 8px; }
.si-editeur-section--surface { background: #f7f7f5; }
.si-editeur-section--sombre { background: #101418; color: #eef1f5; }
.si-editeur-section--accent { background: #f0e6d2; }

/* ---------- Carte des résultats ---------- */
.si-map-resultats {
	display: none; height: 62vh; min-height: 420px; width: 100%;
	border-radius: var(--si-radius-lg); overflow: hidden; margin-bottom: var(--si-space-5);
	background: var(--si-color-surface);
}
body.si-vue-carte .si-map-resultats { display: block; }
body.si-vue-carte .si-grid--biens,
body.si-vue-carte .si-liste-biens,
body.si-vue-carte .si-pagination { display: none; }

.si-popup { display: grid; gap: 4px; min-width: 190px; }
.si-popup img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--si-radius); }
.si-popup strong { font-size: var(--si-text-sm); line-height: 1.3; }
.si-popup span { color: var(--si-color-primary); font-weight: 600; font-size: var(--si-text-sm); }
.si-popup__lieu { color: var(--si-color-muted) !important; font-weight: 400 !important; font-size: var(--si-text-xs) !important; }
.si-popup a { font-size: var(--si-text-xs); }
.leaflet-popup-content { margin: 10px 12px; }

/* ---------- Sélecteur de devise ----------
   La pastille elle-même est décrite avec les autres outils de l'en-tête : rien
   ne la redéfinit ici, sous peine de reprendre le padding réservé au chevron. */
.si-devise-origine { font-size: .7em; color: var(--si-color-muted); vertical-align: super; margin-left: 2px; }

/* ---------- Sélecteur de langue ---------- */
.si-langue-select { position: relative; }
.si-langue-select__liste {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
	list-style: none; margin: 0; padding: 4px; min-width: 160px;
	background: #fff; border: var(--si-border); border-radius: var(--si-radius); box-shadow: var(--si-shadow-md);
}
.si-langue-select__liste[hidden] { display: none; }
.si-langue-select__liste a {
	display: flex; align-items: center; gap: var(--si-space-2);
	padding: 8px 10px; border-radius: var(--si-radius);
	text-decoration: none; color: var(--si-color-ink); font-size: var(--si-text-sm);
}
.si-langue-select__liste a:hover { background: var(--si-color-surface); }

/* ==========================================================================
   En-tête rond : il se pose sur le contenu, jamais dans un bloc à part
   ========================================================================== */

/* La barre sort du flux et se pose sur la photo : sans cela, une bande blanche
   traîne au-dessus d'elle et le bandeau ne commence pas en haut de l'écran. */
body.si-entete-rond .si-header--rond {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0;
	padding-block: 14px;
}
body.admin-bar.si-entete-rond .si-header--rond { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar.si-entete-rond .si-header--rond { top: 46px; }
}

/*
 * La barre flotte au-dessus de la page : un seul élément descend pour lui faire
 * place, celui que le script désigne — le premier bloc qui peint quelque chose.
 * Poser la réserve sur une enveloppe transparente laissait une bande blanche
 * au-dessus de la photo, et l'empiler sur le bandeau la doublait.
 */
body.si-entete-rond .si-rond-reserve {
	padding-top: calc(var(--si-entete-rond-hauteur, 96px) + var(--si-space-4));
}

/* Tant que le script n'a pas choisi — ou s'il ne tourne pas — le premier bloc
   de la page prend la réserve : mieux vaut une bande blanche qu'un titre caché. */
body.si-entete-rond:not(.si-rond-pret) #si-content > *:first-child,
body.si-entete-rond:not(.si-rond-pret) > .si-breadcrumb {
	padding-top: calc(var(--si-entete-rond-hauteur, 96px) + var(--si-space-4));
}

/* Un bandeau de fiche pose son fil d'Ariane en absolu, tout en haut : il doit
   descendre lui aussi, sinon il se lit derrière la barre. */
body.si-entete-rond .si-fiche-hero__fil {
	padding-top: calc(var(--si-entete-rond-hauteur, 96px) + var(--si-space-3));
}

/* Le hero d'accueil respire un peu plus : c'est la première image du site. */
body.si-entete-rond .si-hero.si-rond-reserve {
	padding-top: calc(var(--si-entete-rond-hauteur, 96px) + var(--si-space-6));
}


/* ==========================================================================
   Barre de recherche : trois modèles, un même panneau de critères
   ========================================================================== */

.si-recherche { width: 100%; }
.si-recherche .si-searchbar {
	display: block;
	background: var(--si-color-base);
	border-radius: var(--si-radius-lg);
	box-shadow: 0 20px 50px rgba(15, 43, 70, .18);
	padding: var(--si-space-4);
}
.si-searchbar__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--si-space-3);
	align-items: end;
}
.si-searchbar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--si-space-3);
	margin-top: var(--si-space-3);
}
/* Le bouton d'envoi tient dans la ligne des critères, pas en dessous. */
.si-searchbar__envoi { align-self: end; height: 44px; }
.si-searchbar__grille { grid-auto-flow: row; }
.si-recherche--champ .si-searchbar__actions .si-btn { margin-left: auto; }
.si-recherche__plus {
	display: inline-flex; align-items: center; gap: var(--si-space-2);
	background: none; border: 0; cursor: pointer;
	font: inherit; font-size: var(--si-text-sm); font-weight: 600;
	color: var(--si-color-primary); padding: 6px 2px;
}
.si-recherche__chevron {
	width: 8px; height: 8px;
	border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .2s ease;
}
.si-recherche.is-ouvert .si-recherche__chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* Le panneau encaisse n'importe quel nombre de critères. */
.si-recherche__avance {
	border-top: var(--si-border);
	margin-top: var(--si-space-4);
	padding-top: var(--si-space-4);
	max-height: min(60vh, 520px);
	overflow-y: auto;
}
.si-searchbar__grille--avance {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	/* Les champs se calent en haut de leur ligne : alignés en bas, un groupe de
	   cases haut de dix lignes tirait tous ses voisins vers le fond du panneau. */
	align-items: start;
	row-gap: var(--si-space-4);
}
/* Un groupe de cases ne tient pas dans une colonne de formulaire : il prend la
   largeur et range ses cases lui-même. */
.si-filter-field--full { grid-column: 1 / -1; }
.si-filter-field--full .si-filter-field__label { margin-bottom: var(--si-space-2); display: block; }
.si-filter-field--full .si-checkgrid {
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	align-items: start;
}
/* Une ligne de séparation avant le groupe : on change de nature de critère. */
.si-searchbar__grille--avance > .si-filter-field--full {
	border-top: var(--si-border);
	padding-top: var(--si-space-4);
	margin-top: var(--si-space-1);
}
.si-recherche__pied {
	display: flex; flex-wrap: wrap; gap: var(--si-space-3);
	align-items: center; justify-content: space-between;
	margin-top: var(--si-space-4);
	/* La bulle du chatbot occupe le coin : le bouton de validation lui laisse
	   la place, sinon on ne peut simplement plus lancer la recherche. */
	padding-right: clamp(0px, 5vw, 64px);
}

/* Onglets de transaction */
.si-recherche__onglets { display: flex; gap: 4px; }
.si-recherche__onglet {
	background: rgba(255, 255, 255, .18);
	color: #fff;
	border-radius: var(--si-radius) var(--si-radius) 0 0;
	padding: 11px 22px;
	font-size: var(--si-text-sm);
	font-weight: 600;
	text-decoration: none;
}
.si-recherche__onglet.is-active { background: var(--si-color-base); color: var(--si-color-primary); }
/*
 * Les onglets sont dessinés pour un bandeau photo, où le blanc ressort. Sur un
 * bandeau épuré — fond clair — ils devenaient blancs sur blanc : seul l'onglet
 * actif se voyait.
 */
.si-listing-hero--epure .si-recherche__onglet {
	background: color-mix(in srgb, var(--si-color-primary) 8%, transparent);
	color: var(--si-color-ink-soft, var(--si-color-ink));
}
.si-listing-hero--epure .si-recherche__onglet:hover {
	background: color-mix(in srgb, var(--si-color-primary) 14%, transparent);
	color: var(--si-color-primary);
}
.si-listing-hero--epure .si-recherche__onglet.is-active {
	background: var(--si-color-primary);
	color: #fff;
}
.si-recherche--onglets .si-searchbar { border-top-left-radius: 0; }

/* Champ unique */
.si-recherche--champ .si-searchbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--si-space-3);
	border-radius: var(--si-radius-full);
	padding: 8px 8px 8px 20px;
}
.si-recherche--champ.is-ouvert .si-searchbar { border-radius: var(--si-radius-lg); padding: var(--si-space-4); }
.si-recherche__champ { flex: 1 1 260px; display: flex; align-items: center; gap: var(--si-space-3); }
.si-recherche__champ svg { width: 20px; height: 20px; color: var(--si-color-muted); flex: none; }
.si-recherche__champ input {
	flex: 1; border: 0; background: none;
	font-size: var(--si-text-base); color: var(--si-color-ink); min-width: 0;
}
/* Le champ n'a pas de bordure : le repère de focus habituel du thème, un
   changement de couleur de bordure, n'aurait rien à colorer. */
.si-recherche__champ input:focus-visible {
	outline: 2px solid var(--si-color-primary);
	outline-offset: 2px;
}
.si-recherche--champ .si-searchbar__actions { margin-top: 0; }
.si-recherche--champ .si-recherche__avance { flex: 1 1 100%; }

@media (max-width: 640px) {
	.si-searchbar__grille { grid-template-columns: minmax(0, 1fr); }
	.si-searchbar__actions .si-btn { margin-left: 0; width: 100%; }
	.si-recherche__onglet { padding: 10px 14px; font-size: var(--si-text-xs); }
	.si-recherche--champ .si-searchbar { border-radius: var(--si-radius-lg); padding: var(--si-space-4); }
}

/* Un prix se cherche « de X à Y » : les deux bornes se suivent. */
.si-filter-field--prix_min, .si-filter-field--prix_max,
.si-filter-field--surface_min, .si-filter-field--surface_max { min-width: 0; }

/* ==========================================================================
   Modules courts : carrousel de vignettes, et « un bien à la fois »
   ========================================================================== */

.si-section-head { display: flex; flex-wrap: wrap; gap: var(--si-space-4); align-items: flex-end; justify-content: space-between; }
.si-piste__nav { display: flex; gap: var(--si-space-2); }
.si-piste__fleche {
	width: 40px; height: 40px; flex: none;
	display: grid; place-items: center;
	border: var(--si-border); border-radius: 50%;
	background: var(--si-color-base); color: var(--si-color-primary);
	font-size: 17px; line-height: 1; cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.si-piste__fleche:hover { background: var(--si-color-primary); color: #fff; border-color: var(--si-color-primary); }

/* Carrousel de vignettes */
.si-defile {
	display: grid;
	grid-auto-flow: column;
	/* Trois vignettes visibles, comme en grille : à quatre, les photos
	   deviennent des timbres. */
	/* Pas de `minmax(0, …)` ici : il laisserait les pistes se tasser pour tenir
	   dans la largeur, et un carrousel qui ne déborde pas ne défile pas. */
	grid-auto-columns: calc(33.333% - var(--si-gap-vignettes-x) * 2 / 3);
	gap: var(--si-space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: var(--si-space-2);
}
.si-defile::-webkit-scrollbar { display: none; }
.si-defile > * { scroll-snap-align: start; }
@media (max-width: 1100px) { .si-defile { grid-auto-columns: calc(50% - var(--si-space-4)); } }
@media (max-width: 820px) { .si-defile { grid-auto-columns: calc(50% - var(--si-space-3)); } }
@media (max-width: 560px) { .si-defile { grid-auto-columns: 86%; } }

/* Un bien à la fois */
.si-une-piste {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.si-une-piste::-webkit-scrollbar { display: none; }
.si-une__bien {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	scroll-snap-align: start;
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	overflow: hidden;
	background: var(--si-color-base);
}
.si-une__photo {
	position: relative; min-height: 380px;
	background-size: cover; background-position: center;
	background-color: var(--si-color-surface);
}
.si-une__photo .si-card__badges { position: absolute; top: var(--si-space-4); left: var(--si-space-4); }
.si-une__prix {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
	padding: var(--si-space-6) var(--si-space-5) var(--si-space-4);
	font-family: var(--si-font-heading); font-size: var(--si-text-2xl); color: #fff;
	background: linear-gradient(180deg, rgba(8, 20, 34, 0), rgba(8, 20, 34, .82));
}
.si-une__corps { padding: var(--si-space-7); display: flex; flex-direction: column; justify-content: center; gap: var(--si-space-3); }
.si-une__titre { font-size: var(--si-text-2xl); margin: 0; }
.si-une__titre a { text-decoration: none; color: var(--si-color-primary); }
.si-une__accroche { font-family: var(--si-font-heading); font-style: italic; color: var(--si-color-ink-soft); margin: 0; }
.si-une__trait { display: block; width: 46px; height: 2px; background: var(--si-color-accent); }
.si-une__texte { margin: 0; color: var(--si-color-ink-soft); line-height: 1.65; }
.si-une__chiffres { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--si-border); border-radius: var(--si-radius); overflow: hidden; }
.si-une__chiffres div { padding: var(--si-space-3); text-align: center; border-left: var(--si-border); }
.si-une__chiffres div:first-child { border-left: 0; }
.si-une__chiffres strong { font-family: var(--si-font-heading); font-size: var(--si-text-base); }
.si-une__actions { display: flex; flex-wrap: wrap; gap: var(--si-space-3); }
.si-btn--wa { background: #25d366; color: #0a3b1e; }
.si-btn--wa:hover { background: #1fbb59; color: #0a3b1e; }
.si-btn--wa svg { width: 17px; height: 17px; }
.si-une__pied { display: flex; align-items: center; justify-content: center; gap: var(--si-space-4); margin-top: var(--si-space-4); }
.si-piste__points { display: flex; gap: 6px; align-items: center; }
.si-piste__points i { width: 7px; height: 7px; border-radius: 999px; background: var(--si-color-line); transition: width .2s ease, background .2s ease; }
.si-piste__points i.is-active { width: 22px; background: var(--si-color-primary); }
.si-piste__compteur { font-size: var(--si-text-sm); color: var(--si-color-muted); }
@media (max-width: 900px) {
	.si-une__bien { grid-template-columns: minmax(0, 1fr); }
	.si-une__photo { min-height: 240px; }
	.si-une__corps { padding: var(--si-space-5); }
}

/* Le cœur des favoris : contour tant que rien n'est retenu, plein et rose ensuite. */
.si-outil.est-rempli { color: #e0245e; border-color: color-mix(in srgb, #e0245e 35%, var(--si-color-line)); }
.si-outil.est-rempli .si-icone { fill: currentColor; stroke: currentColor; }
.si-outil.est-rempli:hover { color: #c01e50; }

/* Le fil d'Ariane posé dans un bandeau photo : clair, discret, sans fond. */
.si-listing-hero .si-breadcrumb,
.si-fiche-hero .si-breadcrumb {
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: var(--si-space-3);
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
	letter-spacing: .02em;
}
/* Le fil porte son propre conteneur : dans un bandeau il en hérite déjà un,
   et se retrouvait décalé du titre. */
.si-listing-hero .si-breadcrumb .si-container,
.si-fiche-hero .si-breadcrumb .si-container {
	padding: 0;
	max-width: none;
}
.si-listing-hero .si-breadcrumb ol,
.si-fiche-hero .si-breadcrumb ol { gap: 6px 8px; }
.si-listing-hero .si-breadcrumb a,
.si-fiche-hero .si-breadcrumb a { color: rgba(255, 255, 255, .78); }
.si-listing-hero .si-breadcrumb a:hover,
.si-fiche-hero .si-breadcrumb a:hover { color: #fff; }
.si-listing-hero .si-breadcrumb [aria-current],
.si-fiche-hero .si-breadcrumb [aria-current] { color: #fff; }

/* Un budget, une surface : deux bornes dans un même champ. */
.si-filter-field__label {
	display: block;
	font-size: var(--si-text-xs);
	letter-spacing: var(--si-tracking-wide);
	text-transform: uppercase;
	color: var(--si-color-muted);
	margin-bottom: 6px;
}
.si-filter-paire { display: flex; gap: var(--si-space-2); }
.si-filter-paire > .si-filter-field { flex: 1; min-width: 0; }

/* ==========================================================================
   Sous-menus : deux comportements, un par en-tête
   ========================================================================== */

/* Le chevron d'une entrée qui cache un sous-menu. */
.si-nav__chevron {
	display: inline-block;
	width: 7px; height: 7px;
	margin-left: 7px;
	vertical-align: 1px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .2s ease;
}
.si-nav li:hover > a .si-nav__chevron,
.si-nav li:focus-within > a .si-nav__chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* --- En-tête sobre : une barre pleine largeur sous l'en-tête ---
   Les sous-entrées s'alignent en une ligne centrée : le visiteur voit d'un
   coup tout ce que la rubrique contient, sans lire une colonne. */
.si-header--sobre .si-nav li { position: static; }
.si-header--sobre .si-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--si-space-2) var(--si-space-7);
	min-width: 0;
	padding: var(--si-space-4) var(--si-space-5);
	/*
	 * Aucun filet : le ruban prolonge l'en-tête, il ne s'en détache pas. Sur un
	 * bandeau bleu nuit, les deux traits de séparation ressortaient en blanc et
	 * découpaient l'en-tête en tranches.
	 */
	border: 0;
	border-radius: 0;
	box-shadow: 0 22px 30px -26px rgba(16, 24, 40, .55);
}
/* Le trait sous la barre disparaît lui aussi tant qu'un sous-menu est ouvert :
   il passerait entre les liens et leur ruban. */
.si-header--sobre:has(.si-nav .menu-item-has-children:hover) ,
.si-header--sobre:has(.si-nav .menu-item-has-children.est-deplie) { border-bottom-color: transparent; }
/* Le ruban se pose sous l'en-tête entier, pas sous le lien : entre les deux il
   reste une vingtaine de pixels que la souris traverse. Sans ce pont, le
   sous-menu se ferme avant d'être atteint et ses entrées sont incliquables. */
.si-header--sobre .si-nav .sub-menu::before {
	content: "";
	position: absolute;
	inset: -26px 0 auto 0;
	height: 26px;
}
.si-header--sobre .si-nav li:hover > a::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 26px;
}
.si-header--sobre .si-nav li > a { position: relative; }
/* Le ruban prend le fond de l'en-tête : ses liens en prennent l'encre. Un gris
   d'encre claire posé sur un bandeau bleu nuit ne se lit pas. */
.si-header--sobre .si-nav .sub-menu a {
	width: auto;
	padding: var(--si-space-2) var(--si-space-1);
	color: var(--si-header-ink, var(--si-color-ink-soft));
	font-size: var(--si-text-sm);
	border-radius: 0;
}
.si-header--sobre .si-nav .sub-menu a:hover {
	background: none;
	color: var(--si-header-ink, var(--si-color-primary));
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Sur un bandeau sombre, l'encre est claire : le survol se marque par un fond
   discret plutôt que par une couleur qui n'existe pas. */
.si-header--sobre.si-header--fonce .si-nav .sub-menu a { color: #fff; opacity: .82; }
.si-header--sobre.si-header--fonce .si-nav .sub-menu a:hover { opacity: 1; }

/* --- En-tête rond : un panneau flottant, comme la barre elle-même --- */
.si-header--rond .si-nav .sub-menu {
	top: calc(100% + 4px);
	left: -18px;
	min-width: 250px;
	padding: var(--si-space-4) var(--si-space-3);
	border: 0;
	border-radius: var(--si-radius-lg);
	box-shadow: 0 26px 50px -20px rgba(16, 24, 40, .32);
	gap: 2px;
}
/* Un pont invisible garde le panneau ouvert quand la souris descend. */
.si-header--rond .si-nav .sub-menu::before {
	content: "";
	position: absolute;
	inset: -14px 0 auto 0;
	height: 14px;
}
.si-header--rond .si-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: var(--si-space-3);
	padding: 9px var(--si-space-4);
	border-radius: var(--si-radius);
	font-size: var(--si-text-sm);
}
.si-header--rond .si-nav .sub-menu a::before {
	content: "";
	flex: none;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .3;
	transition: opacity var(--si-transition);
}
.si-header--rond .si-nav .sub-menu a:hover::before { opacity: 1; }

/* Sur un tiroir mobile, les deux en-têtes retrouvent la même liste dépliée. */
@media (max-width: 900px) {
	.si-header--sobre .si-nav li { position: relative; }
	.si-header--sobre .si-nav .sub-menu,
	.si-header--rond .si-nav .sub-menu {
		position: static;
		flex-direction: column;
		justify-content: flex-start;
		border: 0;
		box-shadow: none;
		padding: 0 0 var(--si-space-3) var(--si-space-4);
		gap: 0;
	}
	.si-header--sobre .si-nav .sub-menu a,
	.si-header--rond .si-nav .sub-menu a { padding-block: var(--si-space-3); }
}

/* Joindre le conseiller : appeler et écrire côte à côte, chacun son logo. */
.si-agent-card__joindre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--si-space-2); }
.si-btn--icone { padding-inline: var(--si-space-3); gap: 8px; min-width: 0; }
.si-btn--icone svg { width: 18px; height: 18px; flex: none; }
.si-btn--icone .si-btn__texte { white-space: nowrap; font-size: var(--si-text-sm); }
/* Seul le conseiller a un numéro à montrer en entier : la colonne y suffit. */
@media (max-width: 420px) {
	.si-agent-card__joindre { grid-template-columns: minmax(0, 1fr); }
}


/* Carte : des contrôles discrets, une attribution qui ne crie pas. */
.si-map .leaflet-control-zoom { border: 0; box-shadow: var(--si-shadow-sm); border-radius: var(--si-radius); overflow: hidden; }
.si-map .leaflet-control-zoom a {
	width: 32px; height: 32px; line-height: 32px;
	color: var(--si-color-primary);
	background: var(--si-color-base);
	border-bottom-color: var(--si-color-line);
}
.si-map .leaflet-control-zoom a:hover { background: var(--si-color-surface); }
.si-map .leaflet-control-attribution {
	background: rgba(255, 255, 255, .82);
	font-size: 10px;
	color: var(--si-color-muted);
	padding: 2px 6px;
}
.si-map .leaflet-control-attribution a { color: var(--si-color-muted); }
/* Le fond OpenStreetMap est chargé en couleurs : on l'apaise pour qu'il reste
   un décor derrière le bien, sans dépendre d'un fournisseur de tuiles payant. */
.si-map .leaflet-tile-pane { filter: saturate(.62) contrast(.94) brightness(1.03); }

/* Le dernier bloc d'une page touche le pied : un ruban blanc entre les deux
   donne l'impression d'une page inachevée. */
#si-content > *:last-child,
#si-content > .si-section:last-child,
#si-content > article > *:last-child { margin-bottom: 0; }
#si-content { padding-bottom: 0; }
.si-footer { margin-top: 0; }

/* ==========================================================================
   Page de contact
   ========================================================================== */
/* Bandeau de la page contact : le texte à gauche, les trois façons de nous
   joindre à droite — un visiteur qui veut appeler ne doit pas descendre. */
.si-contact-hero {
	background: var(--si-color-surface);
	border-bottom: var(--si-border);
	padding-block: var(--si-space-6) var(--si-space-7);
}
.si-contact-hero__inner { display: grid; gap: var(--si-space-6); align-items: end; }
@media (min-width: 900px) { .si-contact-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); } }
.si-contact-hero__texte { display: grid; justify-items: start; gap: var(--si-space-2); min-width: 0; }
.si-contact-hero__texte .si-breadcrumb { width: 100%; }
.si-contact-hero__texte .si-breadcrumb .si-container { padding: 0; max-width: none; }
.si-contact-hero__titre { margin: 0; font-size: clamp(30px, 3.6vw, 44px); }
.si-contact-hero__intro { margin: var(--si-space-2) 0 0; color: var(--si-color-muted); max-width: 60ch; }

.si-contact-hero__raccourcis { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--si-space-3); }
.si-contact-hero__raccourcis a {
	display: flex; align-items: center; gap: var(--si-space-3);
	padding: var(--si-space-3) var(--si-space-4);
	border-radius: var(--si-radius-lg);
	background: var(--si-color-base);
	border: var(--si-border);
	color: var(--si-color-ink);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
.si-contact-hero__raccourcis a:hover {
	border-color: color-mix(in srgb, var(--si-color-primary) 34%, var(--si-color-line));
	transform: translateY(-1px);
	color: var(--si-color-primary);
}
.si-contact-hero__raccourcis .si-icone { flex: none; width: 20px; height: 20px; color: var(--si-color-accent); }
.si-contact-hero__raccourcis span { display: grid; gap: 2px; min-width: 0; }
.si-contact-hero__raccourcis strong { font-size: var(--si-text-sm); font-weight: 600; overflow-wrap: anywhere; }
.si-contact-hero__raccourcis em { font-style: normal; font-size: var(--si-text-xs); color: var(--si-color-muted); }

/* Le formulaire d'abord, les coordonnées à côté : on écrit plus souvent qu'on
   ne cherche l'adresse. */
.si-contact { display: grid; gap: var(--si-space-7); align-items: start; }
@media (min-width: 900px) {
	.si-contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.si-contact__formulaire {
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-6);
	box-shadow: var(--si-shadow-sm);
}
.si-contact__cotes { display: grid; gap: var(--si-space-5); min-width: 0; }
.si-contact__mot { color: var(--si-color-ink-soft); }
.si-contact__bloc {
	background: var(--si-color-surface);
	border-radius: var(--si-radius-lg);
	padding: var(--si-space-5);
}
.si-contact__bloc h2 {
	font-family: var(--si-font-body);
	font-size: var(--si-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--si-tracking-wide);
	color: var(--si-color-muted);
	margin: 0 0 var(--si-space-3);
}
.si-contact__valeur { margin: 0; line-height: 1.65; color: var(--si-color-ink); }
.si-contact__lien { display: inline-block; margin-top: var(--si-space-3); font-weight: 600; font-size: var(--si-text-sm); }
.si-contact__moyens { display: grid; gap: var(--si-space-2); }
.si-contact__moyen {
	display: flex; align-items: center; gap: var(--si-space-3);
	padding: var(--si-space-3) var(--si-space-4);
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius);
	text-decoration: none;
	color: var(--si-color-ink);
	transition: border-color .18s ease, background .18s ease;
}
.si-contact__moyen:hover { border-color: color-mix(in srgb, var(--si-color-primary) 34%, var(--si-color-line)); background: var(--si-color-surface); color: var(--si-color-ink); }
.si-contact__moyen svg { width: 18px; height: 18px; flex: none; color: var(--si-color-muted); }
.si-contact__moyen--wa svg { color: #25d366; }

/* Le fil vit dans le bloc de tête des pages de service : il porte déjà son
   conteneur, il ne doit pas rentrer une seconde fois. */
.si-page-tete .si-breadcrumb,
.si-espace .si-breadcrumb,
.si-comparer .si-breadcrumb,
.si-section-head .si-breadcrumb { margin-bottom: var(--si-space-3); }
.si-page-tete .si-breadcrumb .si-container,
.si-espace .si-breadcrumb .si-container,
.si-comparer .si-breadcrumb .si-container,
.si-section-head .si-breadcrumb .si-container { padding: 0; max-width: none; }

/* Suggestions du champ unique de recherche. */
.si-recherche__champ { position: relative; }
.si-suggestions {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px);
	z-index: 30; margin: 0; padding: 6px; list-style: none;
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	box-shadow: 0 24px 44px -24px rgba(16, 24, 40, .38);
	max-height: 320px; overflow-y: auto;
	text-align: left;
}
.si-suggestions li { margin: 0; }
.si-suggestions__item {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--si-space-4);
	padding: 10px 12px; border-radius: var(--si-radius);
	text-decoration: none; color: var(--si-color-ink); font-size: var(--si-text-sm);
}
.si-suggestions__item:hover { background: var(--si-color-surface); color: var(--si-color-primary); }
.si-suggestions__item span {
	flex: none; font-size: var(--si-text-xs); color: var(--si-color-muted);
	text-transform: uppercase; letter-spacing: var(--si-tracking-wide);
}

/* ---------- Fond d'en-tête choisi dans les réglages ----------
   Sans réglage, les variables n'existent pas et l'en-tête garde son fond
   d'origine : rien ne change pour les sites déjà installés. */
.si-header { background: var(--si-header-bg, color-mix(in srgb, var(--si-color-base) 96%, transparent)); }
/* Le modèle rond n'a pas de barre : sa couleur, c'est celle de la pilule. */
.si-header--rond { background: none; }
/* La barre de coordonnées garde sa couleur de marque et son texte blanc : elle
   n'est pas la barre de navigation. */
.si-header { color: var(--si-header-ink, inherit); }
.si-header .si-topbar,
.si-header .si-topbar a { color: #fff; }
/*
 * Seuls les liens posés SUR la barre suivent sa couleur. Les sous-menus, le
 * panneau du méga-menu et le tiroir mobile ont leur propre fond clair : y
 * écrire en blanc les rendrait illisibles.
 */
@media (min-width: 901px) {
	.si-header .si-nav > ul > li > a,
	.si-header .si-nav > div > ul > li > a { color: var(--si-header-ink, inherit); }
}
.si-header .si-brand,
.si-header .si-brand a,
.si-header__phone a { color: var(--si-header-ink, inherit); }
/*
 * Les panneaux appartiennent à la barre : ils en prennent le fond et l'encre.
 * Un ruban blanc sous une barre bleu nuit se lit comme une autre interface.
 */
.si-header .sub-menu,
.si-header .si-mega__panel,
.si-header .si-langue-select__liste {
	background: var(--si-header-bg, var(--si-color-base));
	border-color: var(--si-header-line, var(--si-color-line));
}
.si-header .sub-menu a,
.si-header .si-langue-select__liste a,
.si-header .si-mega__panel > .si-container > * > a { color: var(--si-header-ink, var(--si-color-ink)); }
.si-header--fonce .sub-menu a:hover,
.si-header--fonce .si-langue-select__liste a:hover { background: rgb(255 255 255 / .12); color: #fff; }
/* En tiroir, la navigation elle-même est un panneau. */
@media (max-width: 900px) {
	.si-header .si-nav { background: var(--si-header-bg, var(--si-color-base)); }
	.si-header .si-nav a { color: var(--si-header-ink, var(--si-color-ink)); }
	.si-header--fonce .si-nav li + li { border-top-color: rgb(255 255 255 / .16); }
	.si-header--fonce .si-mega__nom { color: var(--si-header-ink, #fff); }
	.si-header--fonce .si-mega__note { color: rgb(255 255 255 / .7); }
}
.si-header { border-bottom-color: var(--si-header-line, color-mix(in srgb, var(--si-color-line) 70%, transparent)); }
/* Les outils ronds — devise, langue, favoris, compte — suivent le fond : sur
   une barre sombre, un pavé blanc avec une icône blanche est un trou. */
.si-header .si-outil,
.si-header .si-devise-select select,
.si-header .si-langue-select__actuel,
.si-header .si-burger {
	border-color: var(--si-header-line, var(--si-color-line));
	color: var(--si-header-ink, inherit);
}
.si-header--fonce .si-outil,
.si-header--fonce .si-devise-select select,
.si-header--fonce .si-langue-select__actuel { background: rgb(255 255 255 / .10); }

/* Sauf le cœur : dès qu'un bien est retenu il passe au rose et se remplit, sur
   fond clair comme sur fond sombre. La règle des outils, plus tardive, le
   repeignait à la couleur de la barre. */
.si-header .si-outil.est-rempli { color: var(--si-color-favori, #e0245e); }
.si-header .si-outil.est-rempli .si-icone { fill: currentColor; stroke: currentColor; }
.si-header--fonce .si-outil.est-rempli { background: rgb(224 36 94 / .16); }
.si-header--fonce .si-outil:hover,
.si-header--fonce .si-devise-select select:hover,
.si-header--fonce .si-langue-select__actuel:hover { background: rgb(255 255 255 / .18); }
/* Le bouton de menu suit la même règle. Il gardait le survol clair du thème —
   un fond blanc sous une icône blanche : le bouton disparaissait au moment
   précis où on le touchait. */
.si-header--fonce .si-burger:hover,
.si-header--fonce .si-burger:focus-visible,
.si-header--fonce .si-burger[aria-expanded="true"] {
	background: rgb(255 255 255 / .18);
	border-color: rgb(255 255 255 / .38);
	color: inherit;
}
.si-header--fonce .si-outil__pastille { border-color: transparent; }
/* Le bouton principal est bleu nuit : sur une barre bleu nuit, il disparaît.
   Sur fond sombre, il passe en blanc. */
.si-header--fonce .si-btn:not(.si-btn--accent):not(.si-wa) {
	background: #fff;
	color: var(--si-color-primary);
	border-color: transparent;
}
.si-header--fonce .si-btn:not(.si-btn--accent):not(.si-wa):hover { background: rgb(255 255 255 / .88); color: var(--si-color-primary); }
.si-header .si-header__separateur { background: var(--si-header-line, var(--si-color-line)); }
.si-header .si-header__phone span:first-child { color: var(--si-header-doux, var(--si-color-muted)); }

/* La pilule du modèle rond prend la même couleur, et garde son flou : c'est ce
   flou qui la détache du contenu qui défile dessous. */
.si-header--rond .si-header__pilule {
	background: color-mix(in srgb, var(--si-header-bg, var(--si-color-base)) 88%, transparent);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-color: var(--si-header-line, color-mix(in srgb, #fff 60%, transparent));
}
/* Le panneau du méga-menu, lui, reste sur le fond des pages : il porte du
   contenu, pas la barre. */
.si-nav .si-mega__panel { color: var(--si-color-ink); }

/* ---------- Messages du site ----------
   Le pendant des alertes du navigateur, aux couleurs du site : ils s'empilent
   en bas à gauche, laissent la bulle de discussion tranquille à droite, et
   partent seuls au bout de quelques secondes. */
.si-messages {
	position: fixed;
	left: var(--si-space-5);
	bottom: calc(var(--si-space-5) + var(--si-compare-bar-hauteur, 0px));
	z-index: 200;
	display: grid;
	gap: var(--si-space-3);
	max-width: min(420px, calc(100vw - var(--si-space-5) * 2));
}
.si-message {
	position: relative;
	display: block;
	padding: 14px 44px 14px 18px;
	border-radius: var(--si-radius-lg);
	background: var(--si-color-primary);
	color: #fff;
	font-size: var(--si-text-sm);
	line-height: 1.45;
	box-shadow: 0 20px 40px -22px rgb(9 20 34 / .75);
	animation: si-message-in .25s ease;
}
.si-message--attention { background: var(--si-color-accent); color: var(--si-color-primary); }
.si-message--erreur { background: #a3232f; }
.si-message.est-parti { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.si-message__fermer {
	position: absolute; top: 6px; right: 8px;
	width: 30px; height: 30px;
	border: 0; border-radius: 50%;
	background: none; color: inherit;
	font-size: 20px; line-height: 1; cursor: pointer; opacity: .7;
}
.si-message__fermer:hover { opacity: 1; }
@keyframes si-message-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Sur téléphone, la bulle du chatbot et le bouton flottant de la carte se posent
   dans le coin bas : un bandeau de recherche qui finit par son bouton d'action
   se retrouvait recouvert. On lui laisse la place. */
@media (max-width: 780px) {
	.si-listing-hero,
	.si-hero { padding-bottom: calc(var(--si-space-6) + 76px); }
}

/* Un fil d'Ariane rangé dans le bandeau par le script prend la mise en page du
   bandeau : pas de conteneur dans le conteneur, pas de marge en double. */
.si-breadcrumb--range .si-container { padding: 0; max-width: none; }
.si-breadcrumb--range { margin-bottom: var(--si-space-3); }

/* Les raccourcis du bandeau contact portent des pictogrammes du thème et le
   logo de WhatsApp, qui n'a pas de taille propre : sans cette contrainte, il
   remplit toute la carte. */
.si-contact-hero__raccourcis svg {
	width: 22px; height: 22px;
	flex: none;
}

/* Les façons de joindre l'agence se rangent à côté du formulaire : c'est là
   qu'on cherche un numéro, pas au pied de la page. Une carte par ligne, dans la
   colonne, et deux de front dès que la colonne s'élargit. */
.si-contact-moyens__liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--si-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.si-contact__bloc--moyens { padding-bottom: var(--si-space-2); }
@media (min-width: 700px) and (max-width: 1000px) {
	.si-contact-moyens__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Pages obligatoires ----------
   Mentions, confidentialité, barème : des pages qu'on lit rarement mais qui
   doivent inspirer confiance quand on les ouvre. Des sections nettes, des
   couples intitulé/valeur alignés, rien de décoratif. */
.si-legal { max-width: 78ch; }
.si-legal__section + .si-legal__section { margin-top: var(--si-space-7); }
.si-legal__section h2 {
	margin: 0 0 var(--si-space-4);
	font-size: clamp(19px, 2vw, 24px);
	color: var(--si-color-primary);
}
.si-legal__section p { margin: 0 0 var(--si-space-3); line-height: 1.7; color: var(--si-color-ink-soft); }
.si-legal__liste { margin: 0; display: grid; gap: 0; }
.si-legal__ligne {
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: var(--si-space-4);
	padding: var(--si-space-3) 0;
	border-bottom: var(--si-border);
}
.si-legal__ligne:first-child { border-top: var(--si-border); }
.si-legal__ligne dt { margin: 0; color: var(--si-color-muted); font-size: var(--si-text-sm); }
.si-legal__ligne dd { margin: 0; color: var(--si-color-ink); }
.si-legal__maj {
	margin-top: var(--si-space-7);
	padding-top: var(--si-space-4);
	border-top: var(--si-border);
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
}
@media (max-width: 640px) {
	.si-legal__ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Le fil d'Ariane de premier niveau respire : collé sous la barre, il donnait
   l'impression d'un bandeau raté plutôt que d'un repère. Il prend sa place, sur
   le fond de la page, et se sépare de ce qui suit par un filet discret. */
body > .si-breadcrumb {
	padding-block: var(--si-space-4);
	background: var(--si-color-base);
	border-bottom: var(--si-border);
	font-size: var(--si-text-sm);
}
body > .si-breadcrumb + * { margin-top: 0; }

/* Rangé dans un bandeau, il garde sa discrétion : ni fond, ni filet. */
.si-breadcrumb--range { padding-block: 0; background: none; border: 0; }

/* ==========================================================================
   Mobile : quatre corrections tenues par ce qu'on voit sur un téléphone
   ========================================================================== */

@media (max-width: 900px) {

	/* --- Le tiroir de l'en-tête rond est une carte, pas un bloc collé ---
	   La barre est une pilule posée sur la photo ; son menu doit lui répondre :
	   même retrait, un vrai écart en dessous, des angles arrondis, et une
	   hauteur qui laisse toujours voir le bouton du bas. */
	.si-header--rond .si-nav {
		top: calc(100% + 10px);
		border: 1px solid color-mix(in srgb, #fff 55%, transparent);
		border-radius: 24px;
		box-shadow: 0 18px 44px rgba(16, 24, 40, .22);
		padding: var(--si-space-3) var(--si-space-5) var(--si-space-5);
		max-height: min(70vh, calc(100dvh - 190px));
		overscroll-behavior: contain;
	}

	/* --- Un sous-menu se déplie, il ne s'étale pas ---
	   Trois types de biens dépliés d'office poussaient le bouton d'estimation
	   hors de l'écran. Le chevron ouvre, le reste tient dans un pouce. */
	.si-header--sobre .si-nav .menu-item-has-children > .sub-menu,
	.si-header--rond .si-nav .menu-item-has-children > .sub-menu {
		display: none;
	}
	.si-header--sobre .si-nav .menu-item-has-children.est-deplie > .sub-menu,
	.si-header--rond .si-nav .menu-item-has-children.est-deplie > .sub-menu {
		display: flex;
	}
	.si-nav .menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--si-space-3);
		padding-right: 56px;
	}
	/*
	 * En tiroir, c'est un bouton qui déplie — atteignable au doigt comme au
	 * clavier. Le chevron dessiné dans le lien s'efface : il ferait doublon.
	 */
	.si-nav .menu-item-has-children { position: relative; }
	.si-nav .menu-item-has-children > a > .si-nav__chevron { display: none; }
	.si-nav__deplier {
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 52px;
		display: grid;
		place-items: center;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}
	.si-nav__deplier .si-nav__chevron { transition: transform .2s ease; }
	.si-nav .menu-item-has-children.est-deplie > .si-nav__deplier .si-nav__chevron {
		transform: rotate(180deg);
	}
	.si-nav__deplier:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 8px; }

	/* --- Fil d'Ariane : une ligne, jamais trois ---
	   Le titre complet d'un bien repliait le fil sur trois lignes et repoussait
	   la photo sous le pli. Il glisse à l'horizontale, comme un fil doit. */
	.si-breadcrumb ol {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.si-breadcrumb ol::-webkit-scrollbar { display: none; }
	.si-breadcrumb li { flex: none; white-space: nowrap; }
	.si-breadcrumb li:last-child {
		max-width: 55vw;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}

	/* --- Fiche de bien : la photo avant le texte ---
	   On arrive d'une liste de photos ; c'est la photo qu'on cherche à
	   retrouver, pas trois badges et une accroche. */
	.si-fiche .si-single__main { display: flex; flex-direction: column; }
	.si-fiche .si-single__main > .si-fiche-galerie { order: -1; margin-bottom: var(--si-space-5); }
}

/* --- En-tête rond, allure « barre » ---
   Même en-tête, angles doux au lieu d'une pilule : la barre s'allonge et le
   logo respire à gauche, comme sur une carte posée sur la photo. */
.si-header--pilule-carree .si-header__pilule {
	border-radius: 18px;
	padding-inline: var(--si-space-5);
}

/* --- Allure « barre » : le carré se propage ---
   Choisir la barre à angles doux, c'est choisir un parti pris : les panneaux
   qu'elle ouvre — sous-menus de bureau, méga-menu, tiroir mobile, pastilles
   d'outils — suivent la même géométrie, sinon la barre est carrée et tout ce
   qu'elle déplie est rond. */
.si-header--pilule-carree .si-nav .sub-menu,
.si-header--pilule-carree .si-langue-select__liste { border-radius: 14px; }
.si-header--pilule-carree .si-nav .sub-menu a,
.si-header--pilule-carree .si-langue-select__liste a { border-radius: 8px; }
.si-header--pilule-carree .si-outil,
.si-header--pilule-carree .si-devise-select select,
.si-header--pilule-carree .si-langue-select__actuel,
.si-header--pilule-carree .si-burger,
.si-header--pilule-carree .si-header__actions .si-btn { border-radius: 10px; }
/* Le rond de WhatsApp devient un carré aux angles adoucis, comme le reste. */
.si-header--pilule-carree .si-wa { border-radius: 10px; }
.si-header--pilule-carree .si-header__pilule .si-brand img { border-radius: 6px; }

@media (max-width: 900px) {
	.si-header--pilule-carree .si-nav { border-radius: 18px; }
	.si-header--pilule-carree .si-nav__outils .si-wa { border-radius: 10px; }
	.si-header--pilule-carree .si-nav__outils .si-btn { border-radius: 10px; }
}

/* ---------- Message flottant ----------
   Ce bloc vit ici et non dans modules.css : cette dernière n'est mise en file
   que sur les pages qui utilisent une brique, et le message d'alerte, lui,
   peut tomber n'importe où — sans style, il redevenait un bloc dans le flux,
   c'est-à-dire la bande blanche qu'il s'agissait de supprimer.
   Confirmation d'alerte, de désinscription : une information de passage. Elle
   se pose au-dessus de la page, le temps d'être lue, sans jamais déplacer
   l'en-tête ni le bandeau d'accueil. */
.si-flash {
	position: fixed;
	z-index: 1200;
	top: calc(var(--si-header-height, 84px) + var(--si-space-3));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--si-space-3);
	width: min(560px, calc(100vw - 2 * var(--si-space-4)));
	padding: var(--si-space-3) var(--si-space-4);
	border-radius: var(--si-radius-lg);
	box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
	background: #e9f6ec;
	color: #17612f;
	animation: si-flash-in .25s ease;
}
.si-flash--ko { background: #fdecec; color: #8a1c1c; }
.si-flash__texte { margin: 0; font-size: var(--si-text-sm); line-height: 1.45; }
.si-flash__fermer {
	margin-left: auto;
	flex: none;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	font-size: 20px; line-height: 1;
	border: 0; border-radius: 50%;
	background: rgb(255 255 255 / .5);
	color: inherit;
	cursor: pointer;
}
.si-flash__fermer:hover { background: rgb(255 255 255 / .85); }
.si-flash.est-parti { opacity: 0; transform: translateX(-50%) translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
@keyframes si-flash-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.admin-bar .si-flash { top: calc(var(--si-header-height, 84px) + 32px + var(--si-space-3)); }
@media (max-width: 782px) {
	.admin-bar .si-flash { top: calc(var(--si-header-height, 84px) + 46px + var(--si-space-3)); }
}

/* ---------- Maillage des croisements ----------
   Le bloc « à voir aussi » du bas des listes : des liens vers les croisements
   voisins, sur un fond qui les détache du catalogue sans crier. */
.si-maillage {
	padding-block: var(--si-space-7);
	background: var(--si-color-surface);
	border-top: var(--si-border);
}
.si-maillage__titre {
	font-size: var(--si-text-lg);
	margin-bottom: var(--si-space-4);
}
.si-maillage__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--si-space-2) var(--si-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.si-maillage__liste a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--si-space-3);
	padding: var(--si-space-2) 0;
	color: var(--si-color-ink);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--si-color-line) 55%, transparent);
}
.si-maillage__liste a:hover .si-maillage__lien {
	color: var(--si-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.si-maillage__compte {
	flex: none;
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
	font-variant-numeric: tabular-nums;
}

/* Le logo du réseau, dans la barre légale : présent sans se faire remarquer —
   un mandataire l'affiche par obligation contractuelle, pas pour le mettre en
   avant devant le sien. */
/* Le logo du réseau dans un cadre : posé nu sur un fond bleu nuit, un logo
   pensé pour du blanc devient illisible. Un bloc clair lui rend son contraste,
   et le distingue de notre signature — deux marques côte à côte doivent se
   lire comme deux objets, pas comme une bouillie. */
.si-footer__reseau {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-end: var(--si-space-3);
	padding: 6px 12px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgb(16 24 40 / .12);
}
.si-footer__reseau img { width: auto; height: 20px; display: block; }

/* Une page de document — mentions légales, confidentialité, barème — se lit.
   Elle héritait de la typographie d'accueil : un titre à soixante-dix pixels
   sur un texte juridique. On lui rend une échelle de lecture. */
.si-page-document .si-prose { max-width: 68ch; }
.si-page-document h1 {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	line-height: 1.2;
	margin-bottom: var(--si-space-2);
}
.si-page-document .si-prose h2 {
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
	line-height: 1.35;
	margin-top: var(--si-space-6);
	margin-bottom: var(--si-space-2);
	padding-bottom: var(--si-space-2);
	border-bottom: var(--si-border);
}
.si-page-document .si-prose h3 {
	font-size: 1rem;
	margin-top: var(--si-space-4);
	margin-bottom: var(--si-space-1);
}
.si-page-document .si-prose p,
.si-page-document .si-prose li { font-size: var(--si-text-sm); line-height: 1.75; }
.si-page-document .si-prose ul { margin: 0 0 var(--si-space-3); padding-inline-start: 1.15rem; }
.si-page-document .si-prose li + li { margin-top: var(--si-space-1); }

/* ---------- Notre signature ----------
   Un bouton Skyward, mais discret : c'est une signature en bas de page, pas un
   appel à l'action. Il porte son propre fond, donc il tient sur un pied clair
   comme sur un bleu nuit — sans quoi il aurait fallu deux versions du logo et
   deviner laquelle servir. */
.si-signature {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 4px 4px 10px;
	border-radius: 999px;
	background: #1E3AFF;
	box-shadow: 0 0 0 3px rgba(30, 58, 255, .18);
	color: #fff;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, box-shadow .15s ease;
}
/* Aucun soulignement ni surlignage au survol : la règle générale du pied de
   page souligne ses liens, et cela barrait le texte de la pastille. */
.si-signature:hover,
.si-signature:focus-visible {
	color: #fff;
	background: #0234D3;
	box-shadow: 0 0 0 4px rgba(30, 58, 255, .26);
	text-decoration: none;
}
.si-footer__legal .si-signature:hover,
.si-footer__legal .si-signature:focus-visible { text-decoration: none; }
.si-signature__marque { width: auto; height: 12px; display: block; flex: none; }
.si-signature__texte { opacity: .92; }
.si-signature__texte strong { font-weight: 700; opacity: 1; }
/* La flèche vit dans une pastille blanche, comme sur nos boutons. */
.si-signature__fleche {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	color: #1E3AFF;
}
.si-signature__fleche svg { width: 11px; height: 11px; display: block; }

@media (max-width: 620px) {
	.si-signature { font-size: 11px; padding: 4px 4px 4px 9px; gap: 6px; }
	.si-signature__fleche { width: 18px; height: 18px; }
}
.si-media-block__lien { margin-top: var(--si-space-4); }