/* ============================================================
   vision.html — storytelling éditorial « Notre vision »
   Ne référence que des tokens de styles.css (:root). 0 gradient,
   ombre unique = var(--shadow). Composants globaux réutilisés :
   .page-hero, .section-title, .label, .arch, .finale, .section-dark.
   ============================================================ */

/* ---------- 2 · Histoire fondatrice ---------- */
.founder {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--s-24);
	row-gap: var(--s-64);
	align-items: start;
	padding: var(--s-128) var(--gutter);
}
.founder__text {
	grid-column: 1 / span 6;
}
.founder__lede {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(26px, 2.7vw, 36px);
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin-top: var(--s-24);
	max-width: 30ch;
}
.founder__body {
	margin-top: var(--s-32);
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.62;
	max-width: 48ch;
}
.founder__body::first-letter {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 2.7em;
	line-height: 0.9;
	float: left;
	padding: 0.05em 0.12em 0 0;
	color: var(--miel-dark);
}
.founder__body cite {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
}
.founder__map {
	margin-top: var(--s-48);
	max-width: 320px;
	padding: var(--s-12);
	background-color: var(--surface-muted);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-soft);
}
.founder__map img {
	width: 100%;
	height: auto;
	border-radius: 2px;
}
.founder__map figcaption {
	margin-top: var(--s-12);
	font-size: 13px;
	font-style: italic;
	color: var(--green-soft);
}
.founder__portrait {
	grid-column: 8 / span 5;
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow);
}

/* ---------- 3 · Des espaces conçus autrement ---------- */
.spaces {
	background-color: var(--sage-panel);
	border-block: 1px solid var(--hairline);
	padding: var(--s-128) var(--gutter);
}
.spaces__head {
	max-width: 760px;
	margin-bottom: var(--s-64);
}
.spaces__title {
	margin-top: var(--s-16);
}
.spaces__title em {
	font-style: italic;
}
.spaces__body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--s-48);
	align-items: start;
}
.spaces__prose {
	grid-column: 1 / span 5;
}
.spaces__prose p {
	font-size: clamp(16px, 1.15vw, 18px);
	line-height: 1.62;
	color: var(--text-body);
	max-width: 44ch;
}
.spaces__prose p + p {
	margin-top: var(--s-24);
}
.spaces__diptych {
	grid-column: 7 / span 6;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--s-24);
	align-items: start;
}
.spaces__fig {
	aspect-ratio: 4 / 5;
}
.spaces__fig--tall {
	aspect-ratio: 3 / 4;
	margin-top: var(--s-64);
}

/* ---------- 4 · Fiches des deux maisons ---------- */
.maisons {
	padding: var(--s-128) var(--gutter);
}
.maisons__head {
	max-width: 760px;
	margin-bottom: var(--s-64);
}
.maisons__head .section-title {
	margin-top: var(--s-16);
}
.maison {
	display: grid;
	text-align: left;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--s-24);
	row-gap: var(--s-48);
	padding-top: var(--s-96);
	margin-top: var(--s-96);
	border-top: 1px solid var(--hairline);
}
.maison:first-of-type {
	margin-top: 0;
}
.maison__intro {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: var(--s-32);
	flex-wrap: wrap;
}
.maison__ordinal {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(46px, 5.5vw, 76px);
	line-height: 0.95;
	color: var(--green-soft);
	opacity: 0.45;
}
.maison__name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(27px, 2.6vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.03em;
}
.maison__arr {
	display: block;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green-soft);
	margin-top: var(--s-8);
}
.maison__spec {
	margin-top: var(--s-8);
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(18px, 1.6vw, 22px);
	color: var(--green-soft);
}
.maison__addr {
	margin-top: var(--s-8);
	font-size: 14px;
	color: var(--green-soft);
}
.maison__addr a {
	color: var(--green-soft);
	text-decoration: underline;
	text-decoration-color: var(--miel);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.maison__list {
	grid-column: 1 / span 4;
	align-self: start;
}
.maison__list li {
	position: relative;
	padding: var(--s-12) 0 var(--s-12) var(--s-24);
	border-bottom: 1px solid var(--hairline);
	font-size: 15px;
	line-height: 1.45;
}
.maison__list li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: var(--s-12);
	font-family: var(--font-display);
	color: var(--miel-dark);
}
.maison__gallery {
	grid-column: 6 / span 7;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-24);
	align-items: start;
}
.maison__fig {
	aspect-ratio: 3 / 2;
}
.maison__fig--tall {
	aspect-ratio: 3 / 4;
	grid-row: span 2;
}
.maison__gallery--sf .maison__fig {
	aspect-ratio: 4 / 5;
	grid-row: auto;
	margin-top: var(--s-48);
}
.maison__gallery--sf .maison__fig--tall {
	aspect-ratio: 3 / 4;
	margin-top: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.founder__text {
		grid-column: 1 / span 7;
	}
	.founder__portrait {
		grid-column: 9 / span 4;
	}
	.spaces__prose {
		grid-column: 1 / span 12;
		margin-bottom: var(--s-48);
	}
	.spaces__prose p {
		max-width: 60ch;
	}
	.spaces__diptych {
		grid-column: 1 / span 12;
	}
	.maison__list {
		grid-column: 1 / span 5;
	}
	.maison__gallery {
		grid-column: 7 / span 6;
	}
}

@media (max-width: 860px) {
	.founder,
	.spaces,
	.maisons {
		padding-block: var(--s-64);
	}
	.founder,
	.spaces__body,
	.maison {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.founder {
		row-gap: var(--s-48);
	}
	.founder__text {
		grid-column: 1 / -1;
	}
	.founder__portrait {
		grid-column: 1 / -1;
		max-width: 360px;
	}
	.founder__lede {
		max-width: 24ch;
	}
	.founder__map {
		max-width: min(100%, 360px);
	}
	.maison__intro {
		gap: var(--s-16);
	}
	.maison {
		padding-top: var(--s-64);
		margin-top: var(--s-64);
	}
	.maison__ordinal {
		font-size: clamp(48px, 18vw, 76px);
	}
	.maison__list,
	.maison__gallery {
		grid-column: 1 / -1;
	}
	.maison__gallery {
		gap: var(--s-16);
	}
	.spaces__fig--tall {
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.spaces__diptych {
		grid-template-columns: 1fr;
		gap: var(--s-16);
	}
	.maison__gallery,
	.maison__gallery--sf {
		grid-template-columns: 1fr;
	}
	.maison__fig,
	.maison__fig--tall {
		aspect-ratio: 3 / 2;
		grid-row: auto;
	}
	.maison__gallery--sf .maison__fig {
		aspect-ratio: 3 / 2;
		margin-top: 0;
	}
}