/* ==========================================================================
   Villef — feuille de style du thème
   ========================================================================== */

:root {
	--pierre: #f7f1e4;
	--pierre-sourde: #efe6d3;
	--blanc: #ffffff;
	--encre: #25211b;
	--encre-douce: #3d372e;
	--gris: #6d6455;
	--gris-clair: #8b8271;
	--vert: #3f6243;
	--vert-fonce: #314d35;
	--vert-pale: #e3ebe1;
	--terre: #8c5f3a;
	--terre-fonce: #6f4728;
	--terre-pale: #f6ede1;
	--trait: #e0d5bd;

	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gouttiere: 64px;
	--rayon: 10px;
	--transition: .25s cubic-bezier(.2, .7, .3, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--pierre);
	color: var(--encre);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--vert);
	text-decoration: none;
	transition: color .18s ease;
}

a:hover {
	color: var(--vert-fonce);
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
}

:focus-visible {
	outline: 2px solid var(--terre);
	outline-offset: 3px;
	border-radius: 3px;
}

::selection {
	background: var(--terre-pale);
	color: var(--terre-fonce);
}

/* L'en-tête est collant : sans cette marge, une ancre se glisse dessous. */
[id] {
	scroll-margin-top: 104px;
}

/* Les montants se lisent mieux alignés sur la même chasse. */
.carte__prix,
.encart__prix,
.encart__details dd,
.repere strong,
.repere-fiche strong {
	font-variant-numeric: tabular-nums;
}

.evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--encre);
	color: var(--pierre);
}

.evitement:focus {
	left: 12px;
	top: 12px;
	color: var(--pierre);
}

/* --- Structure ---------------------------------------------------------- */

.enveloppe {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: var(--gouttiere);
}

.enveloppe--etroite {
	max-width: 880px;
}

.section {
	padding-block: 88px;
}

.section--serree {
	padding-block: 0 88px;
}

.section--tete {
	padding-block: 56px 32px;
}

.section__entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}

.section__titre {
	font-size: clamp(28px, 3.2vw, 40px);
}

.section__sous-titre {
	margin: 12px 0 0;
	max-width: 56ch;
	font-size: 17px;
	color: var(--gris);
}

.section__aparte {
	margin: 0;
	max-width: 36ch;
	font-size: 15px;
	color: var(--gris);
}

.surtitre {
	margin: 0;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terre);
}

.grille-deux {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 32px;
}

.vide {
	padding: 40px;
	background: var(--blanc);
	border: 1px dashed var(--trait);
	border-radius: var(--rayon);
	text-align: center;
	color: var(--gris);
}

/* --- Boutons ------------------------------------------------------------ */

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 15.5px;
	font-weight: 600;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.bouton:active {
	transform: translateY(0) scale(.985);
	box-shadow: none;
}

.bouton svg {
	transition: transform var(--transition);
}

.bouton--vert {
	background: var(--vert);
	color: var(--blanc);
	border-radius: 999px;
}

.bouton--vert:hover {
	background: var(--vert-fonce);
	color: var(--blanc);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -14px rgba(49, 77, 53, .85);
}

.bouton--terre {
	background: var(--terre);
	color: var(--blanc);
}

.bouton--terre:hover {
	background: var(--terre-fonce);
	color: var(--blanc);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -14px rgba(111, 71, 40, .85);
}

.bouton--fantome {
	border-color: rgba(37, 33, 27, .28);
	color: var(--encre);
}

.bouton--fantome:hover {
	background: var(--encre);
	border-color: var(--encre);
	color: var(--pierre);
	transform: translateY(-2px);
}

.bouton--bloc {
	width: 100%;
	min-height: 52px;
	font-size: 16px;
}

.lien-souligne {
	position: relative;
	font-size: 14.5px;
	font-weight: 600;
}

.lien-souligne::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	background: var(--terre);
	transition: right var(--transition);
}

.lien-souligne:hover::after {
	right: 0;
}

/* --- En-tête ------------------------------------------------------------ */

.entete {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(247, 241, 228, .94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--trait);
	transition: box-shadow var(--transition), background var(--transition);
}

.entete.est-defile {
	background: rgba(247, 241, 228, .97);
	box-shadow: 0 10px 30px -22px rgba(37, 33, 27, .6);
}

.entete__interieur {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 84px;
}

.marque {
	display: flex;
	align-items: center;
	gap: 13px;
	flex-shrink: 0;
	max-width: 300px;
}

.marque__signe rect {
	transition: fill var(--transition), opacity var(--transition);
}

.signe__fond {
	fill: var(--vert);
}

.signe__ilot {
	fill: var(--pierre);
	opacity: .92;
}

.signe__place {
	fill: var(--terre);
}

.marque:hover .signe__fond {
	fill: var(--vert-fonce);
}

.marque:hover .signe__ilot {
	opacity: 1;
}

.marque__texte {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.marque__nom {
	font-family: var(--serif);
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 600;
	line-height: 1.08;
	color: var(--encre);
	/* Un titre de site long tient sur deux lignes sans écraser la navigation. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.marque__lieu {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris);
}

.custom-logo-link img {
	max-height: 52px;
	width: auto;
}

.entete__nav {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
}

.entete__liens {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: 28px;
}

.entete__liens a {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--encre);
	white-space: nowrap;
}

.entete__liens a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -6px;
	height: 2px;
	background: var(--terre);
	transition: right var(--transition);
}

.entete__liens a:hover::after,
.entete__liens .current-menu-item a::after {
	right: 0;
}

.entete__tel {
	flex-shrink: 0;
	min-height: 44px;
	padding: 0 20px;
	font-size: 14.5px;
}

.entete__bascule {
	display: none;
	width: 46px;
	height: 46px;
	margin-left: auto;
	border: 1px solid var(--trait);
	border-radius: 8px;
	background: var(--blanc);
	cursor: pointer;
}

.entete__barres,
.entete__barres::before,
.entete__barres::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--encre);
	transition: transform var(--transition), opacity .15s ease;
}

.entete__barres::before,
.entete__barres::after {
	content: "";
	position: relative;
}

.entete__barres::before {
	top: -6px;
}

.entete__barres::after {
	top: 4px;
}

.entete__bascule[aria-expanded="true"] .entete__barres {
	background: transparent;
}

.entete__bascule[aria-expanded="true"] .entete__barres::before {
	transform: translateY(6px) rotate(45deg);
}

.entete__bascule[aria-expanded="true"] .entete__barres::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Bannière ----------------------------------------------------------- */

.banniere {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.banniere--unie {
	background: var(--encre);
	min-height: 420px;
}

.banniere__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banniere__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(var(--voile-c, 24, 20, 14), calc(.88 * var(--voile-o, 1))) 0%, rgba(var(--voile-c, 24, 20, 14), calc(.74 * var(--voile-o, 1))) 42%, rgba(var(--voile-c, 24, 20, 14), calc(.2 * var(--voile-o, 1))) 100%);
}

.banniere__contenu {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-block: 64px;
}

.banniere__titre {
	max-width: 14ch;
	font-size: clamp(34px, 4.6vw, 58px);
	color: var(--blanc);
}

.banniere__texte {
	max-width: 48ch;
	margin: 0;
	font-size: 18px;
	color: #e6dcc7;
}

.banniere__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 4px 0 0;
}

.banniere .bouton--fantome {
	border-color: rgba(247, 241, 228, .55);
	color: var(--pierre);
}

.banniere .bouton--fantome:hover {
	background: var(--pierre);
	color: var(--encre);
}

.jeton {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid rgba(247, 241, 228, .4);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pierre);
}

.jeton__point {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #93bf92;
}

.jeton__point--gris {
	background: var(--gris-clair);
}

/* --- Bandeau de repères ------------------------------------------------- */

.reperes {
	background: var(--encre);
}

.reperes__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	padding-block: 26px;
}

.repere {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
}

.repere strong {
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 500;
	color: var(--blanc);
}

.repere span {
	font-size: 14px;
	color: #aba18d;
}

/* --- Cartes ------------------------------------------------------------- */

.cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 32px;
}

.carte {
	position: relative;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.carte:hover {
	transform: translateY(-6px);
	border-color: rgba(63, 98, 67, .35);
	box-shadow: 0 18px 40px -18px rgba(37, 33, 27, .38);
}

/* Le lien couvre toute la carte : le contour de focus doit la suivre. */
.carte:focus-within {
	border-color: var(--terre);
	box-shadow: 0 0 0 3px var(--terre-pale);
}

.carte__lien {
	display: block;
	color: inherit;
}

.carte__lien:focus-visible {
	outline: none;
}

.carte__media {
	position: relative;
	aspect-ratio: 45 / 29;
	overflow: hidden;
}

.carte__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.carte__image--vide {
	display: block;
	background:
		repeating-linear-gradient(
			-45deg,
			var(--pierre-sourde) 0 12px,
			#e5dac2 12px 24px
		);
}

.carte__sans-photo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--gris);
}

.carte:hover .carte__image {
	transform: scale(1.05);
}

.carte__compteur {
	position: absolute;
	right: 16px;
	top: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(37, 33, 27, .78);
	color: var(--blanc);
	font-size: 12.5px;
	font-weight: 600;
}

.carte__corps {
	padding: 26px 28px 28px;
}

.carte__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.carte__titre {
	font-size: 26px;
}

.carte__prix {
	margin: 0;
	white-space: nowrap;
	font-size: 13px;
	color: var(--gris);
}

.carte__prix strong {
	font-size: 20px;
	font-weight: 700;
	color: var(--terre);
}

.carte__prix--absent {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--trait);
	border-radius: 999px;
	background: var(--pierre);
	font-size: 12.5px;
	font-weight: 600;
	font-style: normal;
	color: var(--gris);
	white-space: nowrap;
}

.carte__texte {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--encre-douce);
	/* Les cartes gardent la même allure quelle que soit la longueur du texte. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.carte__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--pierre-sourde);
	font-size: 13.5px;
	color: var(--gris);
}

.carte__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--vert);
}

.carte__action svg {
	transition: transform var(--transition);
}

.carte:hover .carte__action svg {
	transform: translateX(5px);
}

/* --- Badges et étiquettes ---------------------------------------------- */

.badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--blanc);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--encre);
	box-shadow: 0 6px 16px -10px rgba(37, 33, 27, .9);
}

.badge--pose {
	position: static;
	margin: 0 0 16px;
	box-shadow: none;
}

.badge__point {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--vert);
}

/* Halo discret sur le point « disponible », au survol seulement. */
.badge__point::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 999px;
	border: 1px solid currentColor;
	color: var(--vert);
	opacity: 0;
	transition: opacity var(--transition);
}

.carte:hover .badge__point::after {
	opacity: .45;
}

.badge--terre .badge__point {
	background: var(--terre);
}

.badge--gris .badge__point {
	background: var(--gris-clair);
}

.etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
}

.etiquette {
	padding: 6px 12px;
	border: 1px solid var(--trait);
	border-radius: 5px;
	font-size: 13px;
	color: var(--encre-douce);
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.etiquettes--pleines .etiquette {
	border-color: transparent;
	background: var(--pierre-sourde);
	padding: 9px 15px;
	font-size: 14.5px;
}

.etiquettes--pleines .etiquette:hover {
	background: var(--vert-pale);
	color: var(--vert-fonce);
}

.etiquette--verte {
	border-color: #ccdcc8;
	font-weight: 600;
	color: var(--vert-fonce);
}

/* --- Bloc « loués » et appel -------------------------------------------- */

.loues {
	padding: 30px 32px;
	border: 1px dashed #d8cdb4;
	border-radius: var(--rayon);
	background: rgba(255, 255, 255, .45);
}

.loues__titre {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gris);
}

.loues__aide {
	margin: 10px 0 20px;
	font-size: 14.5px;
	color: var(--gris);
}

.loues__liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.loues__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 16px;
	background: var(--pierre-sourde);
	border-radius: 7px;
}

.loues__nom {
	font-size: 15px;
	font-weight: 500;
	color: var(--encre-douce);
}

.loues__detail {
	font-weight: 400;
	color: var(--gris);
}

.loues__etat {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* Sur fond clair, --gris-clair passe sous le seuil de lisibilité. */
	color: var(--gris);
}

.alerte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 32px;
	background: var(--vert);
	border-radius: var(--rayon);
	color: var(--blanc);
}

.alerte__titre {
	font-size: 26px;
	color: var(--blanc);
}

.alerte__texte {
	margin: 10px 0 20px;
	font-size: 14.5px;
	color: #cddcc9;
}

.alerte__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.alerte .bouton--fantome {
	border-color: rgba(247, 241, 228, .5);
	color: var(--pierre);
}

.alerte .bouton--fantome:hover {
	background: var(--pierre);
	color: var(--vert-fonce);
}

.appel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 30px 36px;
	background: var(--vert);
	border-radius: 12px;
	color: var(--blanc);
}

.appel__titre {
	margin-bottom: 6px;
	font-size: 27px;
	color: var(--blanc);
}

.appel p {
	margin: 0;
	color: #cddcc9;
}

.appel__actions {
	display: flex;
	flex-shrink: 0;
	gap: 12px;
}

.appel .bouton--fantome {
	border-color: rgba(247, 241, 228, .5);
	color: var(--pierre);
}

.appel .bouton--fantome:hover {
	background: var(--pierre);
	color: var(--vert-fonce);
}

/* --- Étapes et quartier ------------------------------------------------- */

.etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 36px;
}

.etape {
	padding: 28px;
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.etape:hover {
	border-color: var(--vert);
	background: var(--blanc);
	transform: translateY(-4px);
	box-shadow: 0 16px 34px -22px rgba(37, 33, 27, .5);
}

.etape__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--pierre-sourde);
	font-family: var(--serif);
	font-size: 18px;
	color: var(--vert);
	transition: background var(--transition), color var(--transition);
}

.etape:hover .etape__numero {
	background: var(--vert);
	color: var(--blanc);
}

.etape__titre {
	margin: 18px 0 8px;
	font-family: var(--sans);
	font-size: 19px;
	font-weight: 600;
}

.etape p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--encre-douce);
}

.quartier {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 48px;
	align-items: center;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: 12px;
	overflow: hidden;
}

.quartier__image img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

.quartier__texte {
	padding: 40px 48px 40px 0;
}

.quartier__texte .section__titre {
	margin: 12px 0 16px;
}

.quartier__texte p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--encre-douce);
}

/* --- Fiche logement ----------------------------------------------------- */

.bandeau-fictif {
	background: #7a2d10;
	color: #ffe9dd;
	padding-block: 12px;
	font-size: 14.5px;
	line-height: 1.5;
}

.bandeau-fictif .enveloppe {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.bandeau-fictif svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.ruban-fictif {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 9px 16px;
	background: #7a2d10;
	color: #ffe9dd;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
}

.bandeau-loue {
	background: var(--pierre-sourde);
	border-bottom: 1px solid var(--trait);
	padding-block: 14px;
	font-size: 14.5px;
	color: var(--encre-douce);
}

.fil {
	padding-block: 18px;
	font-size: 13.5px;
	color: var(--gris);
}

.fil a {
	color: var(--gris);
}

.fil .enveloppe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.galerie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 218px;
	gap: 10px;
	border-radius: 12px;
	overflow: hidden;
}

/* La mise en page suit le nombre de photos : une seule ne doit pas laisser
   trois cases vides, quatre doivent remplir un carré régulier. */

.galerie[data-nb="1"] {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: clamp(260px, 34vw, 480px);
}

.galerie[data-nb="1"] .galerie__case--grande {
	grid-column: span 1;
	grid-row: span 1;
}

.galerie[data-nb="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 340px;
}

.galerie[data-nb="2"] .galerie__case--grande {
	grid-column: span 1;
	grid-row: span 1;
}

.galerie[data-nb="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 172px;
}

.galerie[data-nb="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 240px;
}

.galerie[data-nb="4"] .galerie__case--grande {
	grid-column: span 1;
	grid-row: span 1;
}

.galerie__case {
	position: relative;
	overflow: hidden;
	background: var(--pierre-sourde);
	cursor: zoom-in;
}

.galerie__case--grande {
	grid-column: span 2;
	grid-row: span 2;
}

.galerie__case img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.galerie__case:hover img {
	transform: scale(1.06);
}

.galerie__case::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(37, 33, 27, 0);
	transition: background var(--transition);
}

.galerie__case:hover::after {
	background: rgba(37, 33, 27, .12);
}

.galerie__plus {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(37, 33, 27, .55);
	color: var(--blanc);
	font-size: 16px;
	font-weight: 600;
	transition: background var(--transition);
}

.galerie__case:hover .galerie__plus {
	background: rgba(37, 33, 27, .68);
}

.galerie__loupe {
	position: absolute;
	z-index: 1;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--encre);
	opacity: 0;
	transform: translateY(6px) scale(.9);
	transition: opacity var(--transition), transform var(--transition);
}

.galerie__case:hover .galerie__loupe,
.galerie__case:focus-visible .galerie__loupe {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.galerie__mention {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--gris);
}

.galerie__mention svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.galerie__mention a {
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.fiche {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	padding-block: 44px 88px;
}

/* Le loyer et le bouton d'appel restent visibles pendant la lecture. */
.fiche__cote {
	position: sticky;
	top: 104px;
}

.fiche__titre {
	margin: 16px 0 10px;
	font-size: clamp(30px, 3.8vw, 46px);
}

.fiche__lieu {
	margin: 0 0 32px;
	font-size: 16px;
	color: var(--gris);
}

.fiche__section {
	margin: 36px 0 16px;
	font-size: 28px;
}

.fiche__texte p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--encre-douce);
}

.fiche__texte h2,
.fiche__texte h3 {
	margin: 32px 0 12px;
	font-size: 24px;
}

.fiche__texte ul {
	list-style: disc;
	padding-left: 22px;
	margin: 0 0 1em;
}

.fiche__texte li {
	margin-bottom: 6px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--encre-douce);
}

.fiche__texte iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: var(--rayon);
}

.reperes-fiche {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 40px;
}

.repere-fiche {
	padding: 18px;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: 9px;
	transition: border-color var(--transition), transform var(--transition);
}

.repere-fiche:hover {
	border-color: var(--vert);
	transform: translateY(-3px);
}

.repere-fiche strong {
	display: block;
	font-size: 19px;
	font-weight: 600;
}

.repere-fiche span {
	font-size: 13px;
	color: var(--gris);
}

.pieces {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 12px;
}

.piece {
	display: flex;
	gap: 12px;
	padding: 16px 18px;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: 9px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--encre-douce);
}

.piece svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--terre);
}

.plan {
	display: block;
	padding: 16px;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
}

.encart {
	padding: 28px;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: 12px;
	box-shadow: 0 14px 34px -22px rgba(37, 33, 27, .4);
}

.encart + .encart {
	margin-top: 20px;
}

.encart--sourd {
	background: var(--pierre-sourde);
	border-color: transparent;
	box-shadow: none;
}

.encart__prix {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.encart__prix strong {
	font-family: var(--serif);
	font-size: 40px;
	font-weight: 600;
}

.encart__prix span {
	font-size: 15px;
	color: var(--gris);
}

.encart__mention {
	margin: 6px 0 22px;
	font-size: 14px;
	color: var(--gris);
}

.encart__titre {
	margin-bottom: 12px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
}

.encart__details {
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.encart__details div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.encart__details dt {
	font-size: 14.5px;
	color: var(--gris);
}

.encart__details dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
}

.encart__note {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--gris);
}

.postes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.poste {
	position: relative;
	padding-left: 18px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--encre-douce);
}

.poste::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--vert);
}

.encart__atout {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(37, 33, 27, .08);
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--vert-fonce);
}

.encart__atout svg {
	flex-shrink: 0;
	margin-top: 2px;
}

/* --- Pages de texte ----------------------------------------------------- */

.prose {
	padding-bottom: 32px;
}

.prose h2 {
	margin: 40px 0 14px;
	font-size: 28px;
}

.prose h3 {
	margin: 28px 0 10px;
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
}

/* Les titres de l'ancien site sont écrits en capitales : autant les assumer
   comme intertitres, plutôt que de les laisser crier au milieu du texte. */
.prose h4 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 36px 0 12px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--terre-fonce);
}

.prose h4::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--trait);
}

.prose p,
.prose li {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--encre-douce);
}

.prose ul {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
}

.prose ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
}

.prose ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--terre);
}

.prose ol {
	list-style: decimal;
	padding-left: 24px;
	margin: 0 0 1.4em;
}

.prose ol li {
	margin-bottom: 10px;
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.liste-simple__item {
	padding: 20px 0;
	border-bottom: 1px solid var(--trait);
}

.liste-simple__item a {
	font-family: var(--serif);
	font-size: 22px;
}

/* --- Pagination --------------------------------------------------------- */

.pagination {
	margin-top: 40px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--trait);
	border-radius: 6px;
	background: var(--blanc);
	font-size: 14.5px;
}

.pagination .page-numbers.current {
	background: var(--vert);
	border-color: var(--vert);
	color: var(--blanc);
}

/* --- Pied de page ------------------------------------------------------- */

.pied {
	background: var(--encre);
	padding-block: 52px 32px;
	color: #aba18d;
}

.pied a {
	color: var(--pierre);
}

.pied a:hover {
	color: var(--blanc);
}

.pied__haut {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	padding-bottom: 36px;
	border-bottom: 1px solid #3b3529;
}

.pied .signe__fond {
	fill: var(--pierre);
}

.pied .signe__ilot {
	fill: var(--encre);
	opacity: 1;
}

.pied .marque:hover .signe__fond {
	fill: var(--blanc);
}

.pied .marque__nom {
	color: var(--blanc);
}

.pied .marque__lieu {
	color: var(--gris-clair);
}

.pied__phrase {
	max-width: 40ch;
	margin: 16px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
}

.pied__titre {
	margin-bottom: 14px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--gris-clair);
}

.pied__colonne a,
.pied__liens a {
	display: inline-block;
	position: relative;
	margin-bottom: 8px;
	font-size: 15px;
}

.pied__colonne a::after,
.pied__liens a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--terre);
	transition: right var(--transition);
}

.pied__colonne a:hover::after,
.pied__liens a:hover::after {
	right: 0;
}

.pied__colonne li,
.pied__liens li {
	line-height: 1.3;
}

.pied .marque__nom {
	-webkit-line-clamp: 3;
}

.pied__bas {
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--gris-clair);
}

/* --- Visionneuse -------------------------------------------------------- */

.visionneuse {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(24, 20, 14, .94);
}

.visionneuse[hidden] {
	display: none;
}

.visionneuse__image {
	max-width: min(1200px, 92vw);
	max-height: 86vh;
	object-fit: contain;
	border-radius: 6px;
}

.visionneuse__bouton {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(247, 241, 228, .3);
	border-radius: 999px;
	background: rgba(37, 33, 27, .7);
	color: var(--pierre);
	cursor: pointer;
	transition: background var(--transition);
}

.visionneuse__bouton:hover {
	background: var(--terre);
}

.visionneuse__bouton--fermer {
	top: 24px;
	right: 24px;
}

.visionneuse__bouton--precedent {
	left: 24px;
}

.visionneuse__bouton--suivant {
	right: 24px;
}

.visionneuse__compteur {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 14px;
	color: #cec6b5;
}

/* --- Apparition au défilement ------------------------------------------- */

/* Posée par le script seulement : sans JavaScript, rien n'est masqué. */
.apparait {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}

.apparait.est-visible {
	opacity: 1;
	transform: none;
}

/* --- Adaptations -------------------------------------------------------- */

@media (max-width: 1080px) {
	:root {
		--gouttiere: 32px;
	}

	.fiche {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.fiche__cote {
		position: static;
	}

	.grille-deux {
		grid-template-columns: minmax(0, 1fr);
	}

	.quartier__texte {
		padding: 0 32px 40px;
	}

	.reperes__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pied__haut {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

@media (max-width: 860px) {
	:root {
		--gouttiere: 20px;
	}

	.section {
		padding-block: 56px;
	}

	.section--serree {
		padding-block: 0 56px;
	}

	.section__entete {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.entete__bascule {
		display: block;
	}

	.entete__interieur {
		gap: 16px;
		min-height: 66px;
	}

	.entete__nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px var(--gouttiere) 20px;
		background: var(--pierre);
		border-bottom: 1px solid var(--trait);
	}

	.entete__nav[hidden] {
		display: none;
	}

	.entete__liens {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.entete__liens li {
		border-bottom: 1px solid var(--trait);
	}

	.entete__liens a {
		display: block;
		padding: 14px 0;
		font-size: 17px;
	}

	.entete__liens a::after {
		display: none;
	}

	.entete__tel {
		margin-top: 16px;
		width: 100%;
	}

	.banniere {
		min-height: 440px;
	}

	.banniere__voile {
		background: linear-gradient(180deg, rgba(var(--voile-c, 24, 20, 14), calc(.5 * var(--voile-o, 1))) 0%, rgba(var(--voile-c, 24, 20, 14), calc(.9 * var(--voile-o, 1))) 100%);
	}

	.banniere__contenu {
		padding-block: 40px;
	}

	.galerie,
	.galerie[data-nb="2"],
	.galerie[data-nb="3"],
	.galerie[data-nb="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 150px;
	}

	.galerie[data-nb="1"] {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: clamp(200px, 56vw, 300px);
	}

	.galerie__case--grande,
	.galerie[data-nb="3"] .galerie__case--grande {
		grid-column: span 2;
		grid-row: span 1;
		aspect-ratio: auto;
	}

	.galerie[data-nb="2"] .galerie__case--grande,
	.galerie[data-nb="4"] .galerie__case--grande {
		grid-column: span 1;
	}

	.appel {
		flex-direction: column;
		align-items: flex-start;
	}

	.carte__corps {
		padding: 20px 22px 24px;
	}

	.visionneuse__bouton--precedent {
		left: 12px;
	}

	.visionneuse__bouton--suivant {
		right: 12px;
	}
}

@media (max-width: 520px) {
	.reperes__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.cartes {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.carte__tete {
		flex-direction: column;
		gap: 6px;
	}

	.loues,
	.alerte,
	.encart {
		padding: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.apparait {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.entete,
	.pied,
	.banniere,
	.appel,
	.alerte,
	.visionneuse {
		display: none !important;
	}

	body {
		background: #fff;
	}
}