/**
 * Modèles de fiche de bien : classique, immersive, magazine.
 *
 * Aucune couleur, aucune police, aucun arrondi n'est écrit en dur : tout passe
 * par les variables du thème, donc les quatre kits de design habillent ces trois
 * mises en page sans une ligne de plus.
 */

/* ==========================================================================
   Socle commun
   ========================================================================== */

.si-fiche {
	--si-fiche-voile: rgba(10, 15, 22, 0.55);
}

.si-fiche .si-single__title {
	margin-bottom: var(--si-space-3);
}

.si-fiche-tete__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--si-space-2);
	margin-bottom: var(--si-space-3);
}

/* Texte courant d'un descriptif : une mesure confortable et des paragraphes aérés. */
.si-fiche .si-prose {
	max-width: 68ch;
}
.si-fiche .si-prose > * + * {
	margin-top: var(--si-space-4);
}
.si-fiche .si-prose h2,
.si-fiche .si-prose h3 {
	font-size: var(--si-text-lg);
	margin-bottom: var(--si-space-2);
}
.si-fiche .si-prose ul,
.si-fiche .si-prose ol {
	padding-left: 1.2em;
}
.si-fiche .si-prose li + li {
	margin-top: var(--si-space-2);
}
.si-fiche .si-prose img {
	border-radius: var(--si-radius);
}

/* ==========================================================================
   Galerie — moteur commun aux trois modèles
   ========================================================================== */

.si-fiche-galerie {
	margin-bottom: var(--si-space-6);
}

.si-fiche-galerie__vue {
	position: relative;
	display: grid;
	gap: var(--si-space-2);
}

.si-fiche-galerie__scene,
.si-fiche-galerie__tuile {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--si-color-surface);
	border-radius: var(--si-radius);
	cursor: pointer;
}

.si-fiche-galerie__scene {
	border-radius: var(--si-radius-lg);
	cursor: zoom-in;
}

.si-fiche-galerie__scene img,
.si-fiche-galerie__tuile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity var(--si-transition);
}

.si-fiche-galerie__scene img {
	aspect-ratio: 3 / 2;
}

.si-fiche-galerie__scene:hover img,
.si-fiche-galerie__tuile:hover img {
	transform: scale(1.03);
}

.si-fiche-galerie__tuile:hover img {
	opacity: 0.92;
}

.si-fiche-galerie__tuile.is-active {
	outline: 2px solid var(--si-color-accent);
	outline-offset: -2px;
}

/* Le focus doit rester visible même posé sur une photo sombre. */
.si-fiche-galerie__scene:focus-visible,
.si-fiche-galerie__tuile:focus-visible,
.si-fiche-galerie__toutes:focus-visible {
	outline: 3px solid var(--si-color-accent);
	outline-offset: 2px;
}

.si-fiche-galerie__compte {
	position: absolute;
	left: var(--si-space-3);
	bottom: var(--si-space-3);
	padding: 0.35em 0.8em;
	border-radius: var(--si-radius-full);
	background: var(--si-fiche-voile);
	color: #fff;
	font-size: var(--si-text-xs);
	letter-spacing: var(--si-tracking-wide);
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

.si-fiche-galerie__reste {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--si-fiche-voile);
	color: #fff;
	font-family: var(--si-font-heading);
	font-size: var(--si-text-xl);
}

.si-fiche-galerie__toutes {
	display: inline-flex;
	align-items: center;
	gap: var(--si-space-2);
	justify-self: start;
	padding: 0.6em 1.1em;
	border-radius: var(--si-radius);
	border: var(--si-border);
	background: var(--si-color-base);
	color: var(--si-color-ink);
	font-size: var(--si-text-sm);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--si-shadow-sm);
	transition: background var(--si-transition), border-color var(--si-transition);
}

.si-fiche-galerie__toutes:hover {
	background: var(--si-color-surface);
	border-color: var(--si-color-primary);
	color: var(--si-color-ink);
}

/* Les photos en trop se dévoilent par une ancre : pas une ligne de script. */
.si-fiche-galerie__panneau {
	display: none;
	margin-top: var(--si-space-4);
	padding: var(--si-space-5);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	background: var(--si-color-surface);
}

.si-fiche-galerie__panneau:target {
	display: block;
}

.si-fiche-galerie__panneau-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--si-space-4);
	margin-bottom: var(--si-space-4);
}

.si-fiche-galerie__panneau-titre {
	margin: 0;
	font-size: var(--si-text-lg);
}

.si-fiche-galerie__fermer {
	font-size: var(--si-text-sm);
	font-weight: 600;
}

.si-fiche-galerie__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: var(--si-space-2);
}

.si-fiche-galerie__grille .si-fiche-galerie__tuile {
	aspect-ratio: 4 / 3;
}

/* Les flèches et le rang n'existent que pour le carrousel du téléphone.
   Leur cadre, lui, s'efface sur grand écran : la photo redevient une case de la
   mosaïque, posée directement dans la grille. */
.si-fiche-galerie__cadre { display: contents; }
.si-fiche-galerie__fleche,
.si-fiche-galerie__rang { display: none; }

/* Mobile : un carrousel, pas une mosaïque.
   Une grande photo qu'on fait défiler à la flèche, le rang en bas à droite, et
   toutes les miniatures dans une bande qui glisse au doigt. */
@media (max-width: 859px) {
	.si-fiche-galerie__cadre { display: block; position: relative; }

	.si-fiche-galerie__scene { aspect-ratio: 4 / 3; width: 100%; }
	.si-fiche-galerie__scene img { width: 100%; height: 100%; object-fit: cover; }

	/* Le compte total cède la place au rang de la photo affichée. */
	.si-fiche-galerie__compte { display: none; }

	.si-fiche-galerie__fleche {
		display: grid;
		place-items: center;
		position: absolute;
		top: calc(50% - 22px);
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background: rgb(255 255 255 / .92);
		color: var(--si-color-ink);
		font-size: 26px;
		line-height: 1;
		box-shadow: 0 6px 18px rgb(16 24 40 / .22);
		cursor: pointer;
		z-index: 2;
	}
	.si-fiche-galerie__fleche--avant { left: var(--si-space-3); }
	.si-fiche-galerie__fleche--apres { right: var(--si-space-3); }
	.si-fiche-galerie__fleche span { transform: translateY(-2px); }

	.si-fiche-galerie__rang {
		display: inline-block;
		position: absolute;
		right: var(--si-space-3);
		bottom: var(--si-space-3);
		padding: 6px 14px;
		border-radius: var(--si-radius-full);
		background: rgb(15 43 70 / .85);
		color: #fff;
		font-size: var(--si-text-sm);
		font-variant-numeric: tabular-nums;
		z-index: 2;
	}

	/* Le dépliant « voir les N photos » n'a plus de raison d'être : ses photos
	   sont passées dans la bande. */
	.si-fiche-galerie__panneau { display: none; }

	.si-fiche-galerie__tuiles {
		display: flex;
		gap: var(--si-space-2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--si-space-1);
	}

	.si-fiche-galerie__tuiles .si-fiche-galerie__tuile {
		flex: 0 0 76px;
		aspect-ratio: 1 / 1;
		scroll-snap-align: start;
		border-radius: 12px;
		overflow: hidden;
		border: 2px solid transparent;
		opacity: .72;
		transition: opacity .2s ease, border-color .2s ease;
	}
	.si-fiche-galerie__tuiles .si-fiche-galerie__tuile.is-active {
		border-color: var(--si-color-accent);
		opacity: 1;
	}
	.si-fiche-galerie__tuiles .si-fiche-galerie__tuile img {
		width: 100%; height: 100%; object-fit: cover;
	}

	.si-fiche-galerie__toutes {
		width: 100%;
		justify-content: center;
	}
}

/* Écran large : les miniatures deviennent des cases de la mosaïque. */
@media (min-width: 860px) {
	.si-fiche-galerie__vue {
		grid-template-columns: repeat(var(--si-fiche-colonnes, 3), minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.si-fiche-galerie__tuiles {
		display: contents;
	}

	.si-fiche-galerie__scene {
		grid-column: span 2;
		grid-row: span 2;
	}

	.si-fiche-galerie__tuile {
		height: 100%;
	}

	.si-fiche-galerie__scene img {
		height: 100%;
	}

	/* Une seule miniature : elle occupe toute la hauteur de sa colonne. */
	.si-fiche-galerie--tuiles-1 .si-fiche-galerie__tuile:last-child {
		grid-row: span 2;
	}

	/* Nombre impair : la dernière miniature comble la case restante. */
	.si-fiche-galerie--tuiles-3 .si-fiche-galerie__tuile:last-child,
	.si-fiche-galerie--tuiles-5 .si-fiche-galerie__tuile:last-child {
		grid-column: span 2;
	}

	.si-fiche-galerie--tuiles-0 .si-fiche-galerie__vue { --si-fiche-colonnes: 2; }
	.si-fiche-galerie--tuiles-1 .si-fiche-galerie__vue,
	.si-fiche-galerie--tuiles-2 .si-fiche-galerie__vue { --si-fiche-colonnes: 3; }
	.si-fiche-galerie--tuiles-3 .si-fiche-galerie__vue,
	.si-fiche-galerie--tuiles-4 .si-fiche-galerie__vue { --si-fiche-colonnes: 4; }
	.si-fiche-galerie--tuiles-5 .si-fiche-galerie__vue,
	.si-fiche-galerie--tuiles-6 .si-fiche-galerie__vue { --si-fiche-colonnes: 5; }

	.si-fiche-galerie__toutes {
		position: absolute;
		right: var(--si-space-4);
		bottom: var(--si-space-4);
		z-index: 2;
	}
}

/* Variantes d'habillage. */
.si-fiche-galerie--editorial .si-fiche-galerie__vue { gap: var(--si-space-3); }
.si-fiche-galerie--editorial .si-fiche-galerie__scene,
.si-fiche-galerie--editorial .si-fiche-galerie__tuile { border-radius: var(--si-radius-lg); }
.si-fiche-galerie--mosaique .si-fiche-galerie__scene { border-radius: var(--si-radius-lg); }

/* ==========================================================================
   Modèle 1 — Classique
   ========================================================================== */

.si-fiche--mosaique .si-fiche-tete {
	display: grid;
	gap: var(--si-space-4);
	align-items: end;
	padding-bottom: var(--si-space-5);
	margin-bottom: var(--si-space-5);
	border-bottom: var(--si-border);
}

@media (min-width: 760px) {
	.si-fiche--mosaique .si-fiche-tete {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--si-space-6);
	}
	.si-fiche--mosaique .si-fiche-tete__prix {
		text-align: right;
	}
}

.si-fiche--mosaique .si-single__title {
	font-size: var(--si-text-3xl);
}

.si-fiche-tete__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--si-space-2) var(--si-space-4);
	margin-bottom: var(--si-space-3);
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
}

.si-fiche-tete__meta > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: var(--si-space-3);
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

.si-fiche-tete__lieu {
	color: var(--si-color-ink);
	font-weight: 600;
}

.si-fiche-tete__accroche {
	font-size: var(--si-text-lg);
	color: var(--si-color-muted);
	margin-bottom: 0;
	max-width: 60ch;
}

.si-fiche-tete__prix {
	display: grid;
	gap: var(--si-space-1);
}

/* Caractéristiques en pastilles : la lecture d'un portail, en un coup d'œil.
   Un pictogramme et un chiffre — les six tiennent sur une ligne, là où les mots
   « Salles de bain » et « Stationnement » les renvoyaient à la ligne. */
/*
 * Une rangée qui ne se replie pas mesure, en largeur minimale, la somme de ses
 * pastilles. Dans une grille, un élément vaut au moins son contenu — sans ce
 * min-width, les six pastilles imposaient 565 pixels à toute la page et la
 * fiche débordait de l'écran d'un téléphone.
 */
.si-fiche-facts,
.si-single__main { min-width: 0; }

/*
 * Le débordement d'une rangée qui glisse doit s'arrêter à elle. Sans cette
 * coupe, il remonte jusqu'à la racine du document : la page se déclarait large
 * de 565 pixels sur un écran de 390, et l'en-tête — dont la largeur suit celle
 * du document — sortait de l'écran avec son bouton de menu.
 */
.si-fiche-facts { overflow-x: clip; }

.si-fiche-facts .si-keyfacts {
	display: flex;
	flex-wrap: nowrap;
	min-width: 0;
	max-width: 100%;
	gap: var(--si-space-3);
	padding: 0;
	margin-block: 0 var(--si-space-6);
	background: none;
	/* Un bien qui porte beaucoup de chiffres glisse plutôt qu'il ne se replie. */
	overflow-x: auto;
	scrollbar-width: none;
}
.si-fiche-facts .si-keyfacts::-webkit-scrollbar { display: none; }

.si-fiche-facts .si-keyfact {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding: var(--si-space-3) var(--si-space-4);
	border: var(--si-border);
	border-radius: var(--si-radius-full);
	background: var(--si-color-base);
	text-align: left;
	white-space: nowrap;
}

.si-fiche-facts .si-keyfact__icone {
	display: inline-flex;
	color: var(--si-color-muted);
}
.si-fiche-facts .si-keyfact__icone .si-icone { width: 19px; height: 19px; }

.si-fiche-facts .si-keyfact__value {
	font-size: var(--si-text-lg);
	display: inline;
}

.si-fiche--mosaique .si-sidebar {
	align-self: start;
}

.si-fiche-aside__prix {
	padding: var(--si-space-5);
	border: var(--si-border);
	border-top: 3px solid var(--si-color-accent);
	border-radius: var(--si-radius-lg);
	background: var(--si-color-base);
	box-shadow: var(--si-shadow-sm);
	display: grid;
	gap: var(--si-space-2);
}

.si-fiche-aside__montant {
	font-family: var(--si-font-heading);
	font-size: var(--si-text-2xl);
	font-weight: 600;
	color: var(--si-color-primary);
	font-variant-numeric: tabular-nums;
	line-height: var(--si-leading-tight);
}

.si-fiche-aside__mention {
	font-size: var(--si-text-xs);
	line-height: 1.45;
	color: color-mix(in srgb, var(--si-color-muted) 80%, transparent);
}

/* ==========================================================================
   Modèle 2 — Immersive
   ========================================================================== */

.si-fiche-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(78vh, 44rem);
	background: var(--si-color-primary);
	overflow: hidden;
	isolation: isolate;
}

.si-fiche-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.si-fiche-hero__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(8, 12, 18, 0.86) 0%, rgba(8, 12, 18, 0.55) 32%, rgba(8, 12, 18, 0.12) 62%),
		linear-gradient(to bottom, rgba(8, 12, 18, 0.42) 0%, rgba(8, 12, 18, 0) 30%);
}

.si-fiche-hero__contenu {
	width: 100%;
	padding-block: var(--si-space-8) var(--si-space-7);
	color: #fff;
	animation: si-fiche-monte 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes si-fiche-monte {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.si-fiche-hero__lieu {
	margin-bottom: var(--si-space-2);
	font-size: var(--si-text-sm);
	letter-spacing: var(--si-tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.si-fiche-hero .si-single__title,
.si-fiche-hero .si-single__price {
	color: #fff;
}

.si-fiche-hero__titre {
	max-width: 20ch;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.si-fiche-hero__accroche {
	max-width: 52ch;
	font-size: var(--si-text-lg);
	color: rgba(255, 255, 255, 0.9);
}

.si-fiche-hero__prix {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--si-space-4);
	margin-top: var(--si-space-5);
	padding-top: var(--si-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.si-fiche-hero__ref,
.si-fiche-hero__mention {
	font-size: var(--si-text-xs);
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 0;
}

.si-fiche-hero__mention {
	margin-top: var(--si-space-2);
	max-width: 60ch;
}

.si-fiche-hero .si-single__programme {
	color: rgba(255, 255, 255, 0.85);
}

.si-fiche-hero .si-single__programme a {
	color: #fff;
}

/* Blocs 50/50 : une photo, un propos. */
.si-fiche-duo {
	padding-block: var(--si-space-7);
}

.si-fiche-duo__grille {
	display: grid;
	gap: var(--si-space-6);
	align-items: center;
}

@media (min-width: 900px) {
	.si-fiche-duo__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--si-space-8);
	}
	.si-fiche-duo__grille--seul {
		grid-template-columns: minmax(0, 1fr);
		max-width: 72ch;
	}
	/* Une fois sur deux, la photo passe à droite : le regard rebondit. */
	.si-fiche-duo--inverse .si-fiche-duo__image {
		order: 2;
	}
}

.si-fiche-duo__image {
	overflow: hidden;
	border-radius: var(--si-radius-lg);
	background: var(--si-color-surface);
}

.si-fiche-duo__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.si-fiche-duo__image:hover .si-fiche-duo__img {
	transform: scale(1.04);
}

.si-fiche-duo__texte .si-block__title {
	margin-bottom: var(--si-space-5);
}

.si-fiche-duo__lieu {
	font-size: var(--si-text-lg);
	font-weight: 600;
	color: var(--si-color-primary);
}

.si-fiche-duo__atouts {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--si-space-3);
}

/* Bandeau de chiffres clés, sur toute la largeur. */
.si-fiche-bandeau {
	background: var(--si-color-primary);
	color: #fff;
	padding-block: var(--si-space-6);
	margin-block: var(--si-space-6);
}

.si-fiche-bandeau__grille {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--si-space-5);
}

.si-fiche-bandeau .si-keyfacts {
	flex: 1 1 30rem;
	background: none;
	padding: 0;
	margin-block: 0;
	gap: var(--si-space-5);
}

.si-fiche-bandeau .si-keyfact__value {
	color: #fff;
	font-family: var(--si-font-heading);
}

.si-fiche-bandeau .si-keyfact__label {
	color: rgba(255, 255, 255, 0.72);
}

.si-fiche-bandeau__dpe {
	display: flex;
	gap: var(--si-space-5);
}

.si-fiche-bandeau__etiquette {
	display: grid;
	justify-items: center;
	gap: var(--si-space-2);
	margin: 0;
}

.si-fiche-bandeau__etiquette .si-keyfact__label {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--si-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--si-tracking-wide);
}

.si-fiche--plein .si-map {
	height: 460px;
}

/* Grand bandeau de contact. */
.si-fiche-contact {
	background: var(--si-color-surface);
	border-top: var(--si-border);
	padding-block: var(--si-space-8);
}

.si-fiche-contact__grille {
	display: grid;
	gap: var(--si-space-7);
}

@media (min-width: 900px) {
	.si-fiche-contact__grille {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		gap: var(--si-space-8);
		align-items: start;
	}
}

.si-fiche-contact__titre {
	font-size: var(--si-text-2xl);
	margin-bottom: var(--si-space-3);
}

.si-fiche-contact__intro {
	max-width: 46ch;
	color: var(--si-color-muted);
}

.si-fiche-agent {
	display: flex;
	align-items: center;
	gap: var(--si-space-4);
	margin-block: var(--si-space-5);
}

.si-fiche-agent__portrait {
	width: 76px;
	height: 76px;
	border-radius: var(--si-radius-full);
	object-fit: cover;
	border: 2px solid var(--si-color-base);
	box-shadow: var(--si-shadow-sm);
}

.si-fiche-agent__nom {
	font-family: var(--si-font-heading);
	font-size: var(--si-text-lg);
	color: var(--si-color-primary);
	margin: 0;
}

.si-fiche-agent__role {
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
	margin: 0;
}

.si-fiche-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--si-space-3);
	margin-bottom: var(--si-space-5);
}

.si-fiche-contact__formulaire {
	padding: var(--si-space-5);
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	box-shadow: var(--si-shadow-sm);
}

/* ==========================================================================
   Modèle 3 — Magazine
   ========================================================================== */

.si-fiche-mag {
	display: grid;
	grid-template-columns:
		minmax(var(--si-space-5), 1fr)
		[large-debut] minmax(0, 15rem)
		[texte-debut] min(66ch, calc(100% - 2 * var(--si-space-5))) [texte-fin]
		minmax(0, 15rem) [large-fin]
		minmax(var(--si-space-5), 1fr);
	row-gap: var(--si-space-6);
	padding-bottom: var(--si-space-8);
}

.si-fiche-mag > * {
	grid-column: texte-debut / texte-fin;
	min-width: 0;
}

.si-fiche-mag > .si-fiche-mag__large {
	grid-column: large-debut / large-fin;
}

.si-fiche-mag__tete {
	text-align: center;
	padding-top: var(--si-space-6);
}

.si-fiche-mag__tete .si-fiche-tete__badges {
	justify-content: center;
}

.si-fiche-mag__titre {
	font-size: var(--si-text-4xl);
	letter-spacing: -0.015em;
	margin-bottom: var(--si-space-4);
}

.si-fiche-mag__chapeau {
	font-family: var(--si-font-heading);
	font-style: italic;
	font-size: var(--si-text-xl);
	line-height: 1.45;
	color: var(--si-color-muted);
	max-width: 46ch;
	margin-inline: auto;
}

.si-fiche-mag__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--si-space-4);
	margin-top: var(--si-space-5);
	padding-top: var(--si-space-5);
	border-top: var(--si-border);
}

.si-fiche-mag__ref {
	font-size: var(--si-text-xs);
	letter-spacing: var(--si-tracking-wide);
	text-transform: uppercase;
	color: var(--si-color-muted);
}

.si-fiche-mag__tete .si-single__price-note {
	display: block;
	margin-top: var(--si-space-3);
	font-size: var(--si-text-xs);
	color: var(--si-color-muted);
}

.si-fiche-mag > .si-keyfacts {
	background: none;
	border-block: var(--si-border);
	border-radius: 0;
	padding-block: var(--si-space-5);
	margin-block: 0;
}

.si-fiche-mag > .si-actions {
	justify-content: center;
}

.si-fiche-mag .si-block {
	margin-bottom: 0;
}

.si-fiche-mag .si-block__title {
	display: block;
	border-bottom: 0;
	padding-bottom: 0;
	font-size: var(--si-text-2xl);
	margin-bottom: var(--si-space-4);
}

.si-fiche-mag .si-block__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-top: var(--si-space-3);
	background: var(--si-color-accent);
}

.si-fiche-mag .si-prose {
	max-width: none;
	font-size: var(--si-text-lg);
	line-height: 1.75;
}

.si-fiche-mag .si-prose > p:first-of-type::first-letter {
	float: left;
	font-family: var(--si-font-heading);
	font-size: 3.4em;
	line-height: 0.82;
	padding: 0.06em 0.12em 0 0;
	color: var(--si-color-primary);
}

/* Fiche technique : des lignes qui se lisent comme un sommaire. */
.si-fiche-mag .si-specs {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.si-fiche-mag .si-specs__row {
	align-items: baseline;
	gap: var(--si-space-3);
	padding-block: var(--si-space-3);
}

.si-fiche-mag .si-specs__label {
	font-size: var(--si-text-sm);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.si-fiche-mag .si-specs__section {
	font-family: var(--si-font-heading);
	color: var(--si-color-primary);
}

.si-fiche-mag .si-features {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--si-space-3);
}

.si-fiche-mag .si-map {
	height: 420px;
}

/* Le négociateur, mis en avant comme la signature d'un article. */
.si-fiche-signature {
	display: grid;
	gap: var(--si-space-6);
	padding: var(--si-space-7);
	background: var(--si-color-surface);
	border-radius: var(--si-radius-lg);
}

@media (min-width: 860px) {
	.si-fiche-signature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		gap: var(--si-space-8);
		align-items: start;
	}
}

.si-fiche-signature .si-fiche-agent__portrait {
	width: 104px;
	height: 104px;
	margin-bottom: var(--si-space-4);
}

.si-fiche-signature__nom {
	font-family: var(--si-font-heading);
	font-size: var(--si-text-2xl);
	color: var(--si-color-primary);
	margin: 0;
}

.si-fiche-signature__role {
	color: var(--si-color-muted);
	font-size: var(--si-text-sm);
	margin-bottom: var(--si-space-4);
}

.si-fiche-signature__mot {
	margin: 0 0 var(--si-space-4);
	padding-left: var(--si-space-4);
	border-left: 2px solid var(--si-color-accent);
	font-family: var(--si-font-heading);
	font-style: italic;
	font-size: var(--si-text-lg);
	color: var(--si-color-ink);
	max-width: 44ch;
}

.si-fiche-signature__langues {
	font-size: var(--si-text-sm);
	color: var(--si-color-muted);
}

.si-fiche-signature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--si-space-3);
	margin-bottom: var(--si-space-5);
}

.si-fiche-signature__formulaire {
	padding: var(--si-space-5);
	background: var(--si-color-base);
	border: var(--si-border);
	border-radius: var(--si-radius-lg);
	box-shadow: var(--si-shadow-sm);
}

/* ==========================================================================
   Mouvement, impression
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.si-fiche-hero__contenu {
		animation: none;
	}

	.si-fiche-galerie__scene img,
	.si-fiche-galerie__tuile img,
	.si-fiche-duo__img {
		transition: none;
	}

	.si-fiche-galerie__scene:hover img,
	.si-fiche-galerie__tuile:hover img,
	.si-fiche-duo__image:hover .si-fiche-duo__img {
		transform: none;
	}
}

@media print {
	.si-fiche-galerie__tuiles,
	.si-fiche-galerie__toutes,
	.si-fiche-galerie__panneau,
	.si-fiche-galerie__compte,
	.si-fiche-hero__voile,
	.si-fiche-contact__actions,
	.si-fiche-contact__formulaire,
	.si-fiche-signature__actions,
	.si-fiche-signature__formulaire {
		display: none !important;
	}

	.si-fiche-galerie__vue {
		display: block;
	}

	.si-fiche-galerie__scene img {
		max-height: 90mm;
	}

	.si-fiche-hero {
		display: block;
		min-height: 0;
		background: none;
		color: #000;
	}

	.si-fiche-hero__image {
		position: static;
		height: auto;
		max-height: 90mm;
	}

	.si-fiche-hero__contenu {
		padding-block: var(--si-space-4);
		color: #000;
		animation: none;
	}

	.si-fiche-hero__lieu,
	.si-fiche-hero__accroche,
	.si-fiche-hero__ref,
	.si-fiche-hero__mention,
	.si-fiche-hero .si-single__title,
	.si-fiche-hero .si-single__price {
		color: #000;
	}

	.si-fiche-bandeau,
	.si-fiche-contact,
	.si-fiche-signature {
		background: none;
		color: #000;
		padding-block: 0;
	}

	.si-fiche-bandeau .si-keyfact__value,
	.si-fiche-bandeau .si-keyfact__label,
	.si-fiche-bandeau__etiquette .si-keyfact__label {
		color: #000;
	}

	.si-fiche-duo,
	.si-fiche-signature,
	.si-fiche-galerie {
		break-inside: avoid;
	}

	.si-fiche-mag {
		display: block;
	}
}

/* Les biens similaires ferment la fiche sur toute la largeur. */
.si-similaires {
	margin-top: var(--si-space-8);
	padding-block: var(--si-space-7);
	background: var(--si-color-surface);
}
.si-similaires .si-block__title { margin-bottom: var(--si-space-5); }

/* ==========================================================================
   Fiche « Deux colonnes » : les photos dans la colonne de gauche
   ========================================================================== */

.si-single__layout--7030 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
@media (max-width: 1000px) { .si-single__layout--7030 { grid-template-columns: minmax(0, 1fr); } }

.si-fiche-colonnes__tete { margin-bottom: var(--si-space-5); }
.si-fiche--colonnes .si-fiche-galerie { margin-bottom: var(--si-space-5); }
.si-fiche--colonnes .si-fiche-aside { position: sticky; top: calc(var(--si-header-height) + var(--si-space-4)); }

/* Dans la colonne de 70 %, le titre doit rester lisible sans manger l'écran. */
.si-fiche--colonnes .si-single__title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.si-fiche--colonnes .si-fiche-tete__meta { margin-top: var(--si-space-2); }

/* ---------- Fiche « photo pleine largeur » : la maquette validée ---------- */
/* Le bandeau fait défiler les photos, le titre et le prix se posent dessus. */
.si-fiche--plein .si-fiche-hero { position: relative; min-height: clamp(360px, 52vw, 560px); display: flex; align-items: flex-end; }
.si-fiche-hero__piste {
	position: absolute; inset: 0;
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.si-fiche-hero__piste::-webkit-scrollbar { display: none; }
.si-fiche-hero__piste img {
	/* Ces images portent la classe du fond de bandeau, qui les met en absolu :
	   dans une piste, elles se retrouveraient empilées et à leur taille
	   naturelle — donc bien plus larges que l'écran. */
	position: relative;
	inset: auto;
	flex: 0 0 100%; width: 100%; height: 100%;
	object-fit: cover; scroll-snap-align: start;
}
.si-fiche-hero__fleche {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .9); color: var(--si-color-primary);
	display: grid; place-items: center; font-size: 20px; line-height: 1; cursor: pointer;
	transition: background .18s ease;
}
.si-fiche-hero__fleche:hover { background: #fff; }
.si-fiche-hero__fleche--prev { left: var(--si-space-5); }
.si-fiche-hero__fleche--next { right: var(--si-space-5); }
.si-fiche-hero__compteur {
	position: absolute; z-index: 2; right: var(--si-space-5); top: var(--si-space-5);
	background: rgba(8, 20, 34, .6); color: #fff; font-size: var(--si-text-xs);
	padding: 6px 12px; border-radius: var(--si-radius-full); text-decoration: none;
}
.si-fiche-hero__ligne {
	display: flex; flex-wrap: wrap; gap: var(--si-space-4) var(--si-space-5);
	align-items: flex-end; justify-content: space-between;
}
.si-fiche--plein .si-fiche-hero__titre { max-width: 22ch; color: #fff; margin: 0; }
.si-fiche--plein .si-fiche-hero__lieu {
	display: flex; align-items: center; gap: 6px;
	margin: var(--si-space-2) 0 0; color: rgba(255, 255, 255, .85);
}
.si-fiche--plein .si-fiche-hero__lieu svg { width: 16px; height: 16px; }
.si-fiche--plein .si-fiche-hero__prix { display: grid; gap: 2px; text-align: right; }
.si-fiche--plein .si-single__price { color: #fff; font-size: clamp(26px, 3vw, 36px); }
.si-fiche--plein .si-fiche-hero__mention { color: rgba(255, 255, 255, .75); font-size: var(--si-text-xs); }

/* La bande de chiffres se glisse sous la photo, sans marge haute. */
.si-fiche-plein__chiffres { margin-top: 0; }
.si-fiche-plein__chiffres .si-keyfacts { margin-top: 0; border-radius: 0 0 var(--si-radius-lg) var(--si-radius-lg); }

.si-single__layout--plein {
	display: grid; grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--si-space-7); align-items: start;
}
@media (max-width: 980px) {
	/* `1fr` vaut `minmax(auto, 1fr)` : la colonne refuse alors de descendre sous
	   la largeur de son contenu, et un tableau large fait déborder la page. */
	.si-single__layout--plein { grid-template-columns: minmax(0, 1fr); }
	.si-fiche-hero__fleche { width: 38px; height: 38px; }
	.si-fiche--plein .si-fiche-hero__prix { text-align: left; }
}

/* Encart d'appel de la colonne latérale. */
.si-encart {
	border: var(--si-border); border-radius: var(--si-radius-lg);
	padding: var(--si-space-5); background: var(--si-color-base);
}
.si-encart--accent { background: var(--si-color-accent-soft); border-color: transparent; }
.si-encart__titre { font-size: var(--si-text-lg); margin: 0 0 var(--si-space-2); }
.si-encart p { margin: 0 0 var(--si-space-4); color: var(--si-color-ink-soft); font-size: var(--si-text-sm); }

/* Rangée « En images » : des miniatures, la visionneuse au clic. */
.si-rangee-photos {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--si-space-2);
}
.si-rangee-photos__item {
	position: relative; padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: var(--si-radius); overflow: hidden; aspect-ratio: 4 / 3;
}
.si-rangee-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.si-rangee-photos__item:hover img { transform: scale(1.04); }
.si-rangee-photos__reste {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(8, 20, 34, .55); color: #fff; font-size: var(--si-text-sm); font-weight: 600;
}

/* ---------- Lots d'un programme neuf ---------- */
.si-lots__filtres { display: flex; flex-wrap: wrap; gap: var(--si-space-2); margin-bottom: var(--si-space-4); }
.si-lots__filtre {
	padding: 7px 16px; border: var(--si-border); border-radius: var(--si-radius-full);
	background: var(--si-color-base); color: var(--si-color-ink-soft);
	font-size: var(--si-text-sm); cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.si-lots__filtre:hover { border-color: var(--si-color-primary); color: var(--si-color-primary); }
.si-lots__filtre.is-active { background: var(--si-color-primary); border-color: var(--si-color-primary); color: #fff; }
/* Sur un petit écran le tableau défile, il ne se replie pas en bouillie. */
.si-lots__cadre { overflow-x: auto; max-width: 100%; border: var(--si-border); border-radius: var(--si-radius-lg); }
.si-lots__table { width: 100%; border-collapse: collapse; font-size: var(--si-text-sm); }
.si-lots__table th,
.si-lots__table td { padding: var(--si-space-3) var(--si-space-4); text-align: left; white-space: nowrap; }
.si-lots__table thead th {
	background: var(--si-color-surface); color: var(--si-color-muted);
	font-size: var(--si-text-xs); text-transform: uppercase; letter-spacing: var(--si-tracking-wide);
	font-weight: 600;
}
.si-lots__table tbody tr { border-top: var(--si-border); }
.si-lots__table tbody tr:hover { background: var(--si-color-surface); }
.si-lots__table tbody th { font-weight: 600; color: var(--si-color-primary); }
.si-lots__prix { font-weight: 600; }
.si-lots__table tr.is-vendu { color: var(--si-color-muted); }
.si-lots__table tr.is-vendu .si-lots__prix { text-decoration: line-through; }
.si-lots__statut {
	display: inline-block; padding: 3px 10px; border-radius: var(--si-radius-full);
	font-size: var(--si-text-xs); background: var(--si-color-surface); color: var(--si-color-ink-soft);
}
.si-lots__statut--disponible { background: color-mix(in srgb, #1f8a5b 14%, transparent); color: #146642; }
.si-lots__statut--vendu,
.si-lots__statut--retire { background: color-mix(in srgb, var(--si-color-muted) 18%, transparent); }
.si-lots__lien a { font-weight: 600; }
.si-lots__mention { margin-top: var(--si-space-3); font-size: var(--si-text-xs); color: var(--si-color-muted); }

/* Les colonnes des fiches ne débordent jamais : `min-width:auto` par défaut sur
   un élément de grille laisse un tableau ou une galerie pousser la page. */
.si-single__main,
.si-single__layout > *,
.si-single__layout--plein > *,
.si-single__layout--7030 > * { min-width: 0; }

/* Sur un téléphone, le titre d'une fiche pleine largeur ne doit pas manger
   l'écran : cinq lignes de titre chassent le prix hors du premier coup d'œil. */
@media (max-width: 620px) {
	.si-fiche--plein .si-fiche-hero { min-height: 420px; }
	.si-fiche--plein .si-fiche-hero__titre { max-width: none; }
}

/* Le voile passe au-dessus des photos qui défilent — sous l'ancien modèle,
   l'image était en fond de section, ici c'est une piste positionnée. */
.si-fiche--plein .si-fiche-hero__piste { z-index: 0; }
.si-fiche--plein .si-fiche-hero__voile {
	z-index: 1;
	/* Une cuisine blanche en plein soleil réduit à néant un voile timide : le
	   dégradé monte haut et reste dense là où se posent le titre et le prix. */
	background:
		linear-gradient(to top, rgba(8, 12, 18, .92) 0%, rgba(8, 12, 18, .74) 26%, rgba(8, 12, 18, .34) 52%, rgba(8, 12, 18, .04) 78%),
		linear-gradient(to bottom, rgba(8, 12, 18, .58) 0%, rgba(8, 12, 18, .28) 12%, rgba(8, 12, 18, 0) 30%);
}
.si-fiche--plein .si-fiche-hero__contenu { position: relative; z-index: 2; }
/* Les flèches remontent : à mi-hauteur elles tombaient sur les badges. */
.si-fiche-hero__fleche { top: 42%; z-index: 3; }
.si-fiche-hero__compteur { z-index: 3; }

/* Le fil et les badges se posent haut dans l'image, là où le voile est léger :
   une ombre de texte les tient lisibles sur une photo claire. */
.si-fiche--plein .si-breadcrumb { text-shadow: 0 1px 3px rgba(8, 12, 18, .75); }
.si-fiche--plein .si-fiche-hero__contenu > .si-container { position: relative; }
.si-fiche--plein .si-fiche-hero__contenu > .si-container::before {
	content: "";
	position: absolute;
	inset: -28px -40px -20px -40px;
	background: radial-gradient(120% 140% at 20% 80%, rgba(8, 12, 18, .55), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

/* Les flèches occupent les deux gouttières : le texte s'arrête avant elles,
   sinon le titre passe sous le chevron. */
@media (min-width: 900px) {
	.si-fiche--plein .si-fiche-hero__contenu > .si-container {
		padding-inline: 76px;
	}
}
/* Le prix reste à droite du titre tant que la place existe ; il ne repasse
   dessous qu'en dessous de 900 px, où la ligne se replie franchement. */
.si-fiche-hero__titrage { flex: 1 1 24rem; min-width: 0; }
.si-fiche--plein .si-fiche-hero__prix { flex: 0 0 auto; }

/* ---------- Bandeau de fiche : la photo d'abord ---------- */
/* Le fil d'Ariane monte en haut à gauche, hors du bloc titre. */
.si-fiche--plein .si-fiche-hero__fil {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	padding-top: var(--si-space-4);
}
.si-fiche--plein .si-fiche-hero__fil .si-breadcrumb { margin: 0; }

/* Titre et prix se posent au ras du bas, plus modestes : le visiteur vient
   d'abord voir le bien, pas lire une affiche. */
.si-fiche--plein .si-fiche-hero__contenu { padding-bottom: var(--si-space-5); }
.si-fiche--plein .si-fiche-hero__titre {
	font-size: clamp(21px, 2.1vw, 30px);
	line-height: 1.18;
	max-width: 26ch;
}
.si-fiche--plein .si-single__price { font-size: clamp(19px, 1.7vw, 25px); }
.si-fiche--plein .si-fiche-hero__ligne { align-items: flex-end; }
.si-fiche--plein .si-fiche-tete__badges { margin-bottom: var(--si-space-2); }

/* Un bandeau moins haut : la photo tient dans l'écran avec le début du contenu. */
.si-fiche--plein .si-fiche-hero { min-height: clamp(340px, 44vw, 480px); }

@media (max-width: 620px) {
	.si-fiche--plein .si-fiche-hero__titre { font-size: clamp(19px, 5.4vw, 25px); }
	.si-fiche--plein .si-single__price { font-size: 20px; }
}

@media (max-width: 720px) {
	/* Sur un téléphone, un fil complet fait deux lignes et vient buter dans le
	   titre : on ne garde que la marche précédente et la page courante. */
	.si-fiche--plein .si-fiche-hero__fil .si-breadcrumb li:not(:last-child):not(:nth-last-child(2)) { display: none; }
	.si-fiche--plein .si-fiche-hero__fil .si-breadcrumb li:nth-last-child(2)::before { content: none; }
	.si-fiche--plein .si-fiche-hero__contenu { padding-top: var(--si-space-8); }
	/* Le compteur retrouve le haut : en bas il tombait sur la mention d'honoraires. */
	.si-fiche-hero__compteur { top: var(--si-space-4); bottom: auto; right: var(--si-space-4); }
}

/* Avec l'en-tête rond, la pilule flotte au-dessus du bandeau : le fil d'Ariane
   doit commencer en dessous, sinon elle le recouvre. */
body.si-entete-rond .si-fiche--plein .si-fiche-hero__fil {
	padding-top: calc(var(--si-entete-rond-hauteur, 92px) + var(--si-space-2));
}
body.si-entete-rond .si-fiche--plein .si-fiche-hero {
	min-height: calc(clamp(340px, 44vw, 480px) + var(--si-entete-rond-hauteur, 92px));
}

/* Dans la piste, les photos sont des éléments de flux : posées en absolu comme
   le fond de l'ancien bandeau, elles s'empilaient et rien ne défilait. */
.si-fiche-hero__piste .si-fiche-hero__image {
	position: relative;
	inset: auto;
	z-index: auto;
	flex: 0 0 100%;
	scroll-snap-align: start;
}

/* Un bandeau plus haut : la photo est l'argument de vente, pas une frise. */
.si-fiche--plein .si-fiche-hero { min-height: clamp(440px, 56vw, 660px); }
body.si-entete-rond .si-fiche--plein .si-fiche-hero {
	min-height: calc(clamp(440px, 56vw, 660px) + var(--si-entete-rond-hauteur, 92px));
}
@media (max-width: 620px) {
	.si-fiche--plein .si-fiche-hero { min-height: 460px; }
}

/* Les intitulés des deux échelles se lisent comme des étiquettes de formulaire,
   pas comme des titres de chapitre : c'est une fiche technique. */
.si-fiche-energie__titre {
	font-family: var(--si-font-body);
	font-size: var(--si-text-base);
	font-weight: 600;
	color: var(--si-color-ink);
	margin: 0 0 var(--si-space-4);
}