/* Réalisations G4.9 — page-local composition. */

.realisations-v1 {
	font-size: 1.125rem;
	line-height: 1.6;
}

.realisations-v1 h1,
.realisations-v1 h2,
.realisations-v1 h3 {
	color: var(--color-ink);
	font-weight: 500;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.realisations-v1 h1 {
	max-width: 51.875rem;
	font-size: clamp(2.75rem, 5vw, 4.25rem);
	line-height: 0.99;
}

.realisations-v1 h2 {
	max-width: 53.125rem;
	font-size: clamp(2.125rem, 3.4vw, 2.875rem);
	line-height: 1.08;
}

.realisations-v1 h3 {
	font-size: 1.5rem;
	line-height: 1.2;
}

.realisations-v1 p {
	margin: 0 0 1em;
	color: var(--color-ink-muted);
}

.realisations-hero {
	padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(5.125rem, 8.4vw, 7.375rem);
	border-bottom: 1px solid var(--color-line);
}

.realisations-hero-grid,
.case-heading,
.philippe-story,
.angele-story,
.realisations-break-grid,
.secondary-grid,
.realisations-contact-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.realisations-hero h1 {
	grid-column: 1 / span 8;
}

.realisations-hero-copy {
	grid-column: 3 / span 7;
	max-width: 42.5rem;
	margin-top: 3rem;
}

.realisations-hero-copy p:last-child,
.case-copy p:last-child,
.secondary-copy p:last-child,
.realisations-contact-copy p:last-of-type {
	margin-bottom: 0;
}

.major-case {
	padding: clamp(5.625rem, 8vw, 7.75rem) 0;
}

.case-philippe,
.case-angele {
	background: var(--color-paper);
}

.case-angele {
	border-top: 1px solid var(--color-line);
}

.case-heading {
	margin-bottom: 3.5rem;
}

.case-meta {
	grid-column: 1 / span 3;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
}

.case-meta span:last-child {
	color: var(--color-ink-muted);
	font-weight: 400;
}

.case-heading h2 {
	grid-column: 4 / span 8;
}

.case-copy,
.secondary-copy {
	font-size: 1rem;
	line-height: 1.62;
}

.case-media,
.secondary-media {
	margin: 0;
	border: 1px solid var(--color-line);
	background: #fff;
}

.case-media img,
.secondary-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Philippe: narration in two movements, on paper. */
.philippe-intro {
	grid-column: 1 / span 4;
	grid-row: 1;
}

.philippe-main {
	grid-column: 5 / -1;
	grid-row: 1;
}

.philippe-secondary {
	grid-column: 2 / span 5;
	grid-row: 2;
	margin-top: 3.75rem;
}

.philippe-result {
	grid-column: 8 / -1;
	grid-row: 2;
	margin-top: 5rem;
}

/* Angèle: same hierarchical weight, more visual amplitude. */
.angele-intro {
	grid-column: 2 / span 6;
	grid-row: 1;
	font-size: 1.0625rem;
}

.angele-main {
	grid-column: 1 / span 10;
	grid-row: 2;
	margin-top: 1.25rem;
}

.angele-secondary {
	grid-column: 6 / -1;
	grid-row: 3;
	margin-top: 2.25rem;
}

.angele-result {
	grid-column: 2 / span 6;
	grid-row: 4;
	margin-top: 2rem;
}

/* Editorial rupture before the three complementary cases. */
.realisations-break {
	padding: clamp(6.5rem, 8.5vw, 7rem) 0 clamp(4.5rem, 6vw, 5rem);
	border-top: 1px solid var(--color-line);
	background: var(--color-paper-soft);
}

.realisations-break h2 {
	grid-column: 2 / span 8;
	max-width: 48rem;
}

.secondary-case {
	background: var(--color-paper-soft);
}

.secondary-case + .secondary-case {
	border-top: 1px solid var(--color-line);
}

.secondary-meta h3 {
	margin-bottom: 0.5rem;
}

.secondary-meta p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Sandrine: strongest complementary proof. */
.case-sandrine {
	padding: clamp(5rem, 7vw, 6rem) 0;
}

.sandrine-grid {
	grid-template-rows: auto auto;
}

.sandrine-grid .secondary-meta {
	grid-column: 1 / span 3;
	grid-row: 1;
}

.sandrine-copy {
	grid-column: 2 / span 4;
	grid-row: 2;
	margin-top: 2.25rem;
}

.sandrine-media {
	grid-column: 6 / -1;
	grid-row: 1 / span 2;
}

/* Rennes: deliberately compressed. */
.case-rennes {
	padding: clamp(3.5rem, 4.5vw, 4rem) 0;
}

.rennes-grid .secondary-meta {
	grid-column: 1 / span 3;
}

.rennes-copy {
	grid-column: 4 / span 4;
}

.rennes-media {
	grid-column: 9 / span 3;
}

/* Sra: text-dominant, image as context only. */
.sra-media.sra-media-primary {
	width: 62%;
}

.sra-media-secondary {
	grid-column: 1 / span 4;
	grid-row: 3;
	width: 46%;
	margin: 1.5rem 0 0 18%;
}
.case-sra {
	padding: clamp(5.5rem, 7vw, 6rem) 0 clamp(6.5rem, 8vw, 7rem);
}

.sra-grid {
	grid-template-rows: auto auto;
}

.sra-meta {
	grid-column: 1 / span 3;
	grid-row: 1;
}

.sra-copy {
	grid-column: 5 / span 6;
	grid-row: 1 / span 2;
}

.sra-media {
	grid-column: 1 / span 4;
	grid-row: 2;
	margin-top: 2rem;
}

.realisations-contact {
	padding: clamp(4.5rem, 7vw, 6rem) 0;
	border-top: 1px solid var(--color-line);
	background: var(--color-paper);
}

.realisations-contact h2 {
	grid-column: 1 / span 5;
}

.realisations-contact-copy {
	grid-column: 7 / span 6;
}

.realisations-contact-copy .btn {
	margin-top: 1.125rem;
}

#philippe,
#les-voyages-dangele {
	scroll-margin-top: 6rem;
}

@media (max-width: 65.625rem) {
	.case-heading h2 {
		grid-column: 4 / -1;
	}

	.philippe-intro {
		grid-column: 1 / span 5;
	}

	.philippe-main {
		grid-column: 6 / -1;
	}

	.philippe-secondary {
		grid-column: 1 / span 6;
	}

	.philippe-result {
		grid-column: 7 / -1;
	}

	.angele-main {
		grid-column: 1 / span 11;
	}

	.angele-secondary {
		grid-column: 6 / -1;
	}

	.angele-result {
		grid-column: 2 / span 7;
	}

	.sandrine-copy {
		grid-column: 2 / span 4;
	}

	.sandrine-media {
		grid-column: 6 / -1;
	}

	.rennes-copy {
		grid-column: 4 / span 4;
	}

	.rennes-media {
		grid-column: 9 / span 3;
	}
}

@media (max-width: 53.75rem) {
	.realisations-hero-grid,
	.case-heading,
	.philippe-story,
	.angele-story,
	.realisations-break-grid,
	.secondary-grid,
	.realisations-contact-grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.realisations-hero h1 {
		grid-column: 1 / span 7;
	}

	.realisations-hero-copy {
		grid-column: 1 / span 6;
		margin-top: 2.125rem;
	}

	.case-heading .case-meta {
		grid-column: 1 / span 2;
	}

	.case-heading h2 {
		grid-column: 3 / -1;
	}

	.philippe-intro {
		grid-column: 1 / span 7;
		grid-row: 1;
	}

	.philippe-main {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 0.5rem;
	}

	.philippe-secondary {
		grid-column: 1 / span 5;
		grid-row: 3;
		margin-top: 2.25rem;
	}

	.philippe-result {
		grid-column: 3 / -1;
		grid-row: 3;
		margin-top: 3.25rem;
	}

	.angele-intro {
		grid-column: 1 / span 7;
	}

	.angele-main {
		grid-column: 1 / -1;
	}

	.angele-secondary {
		grid-column: 3 / -1;
	}

	.angele-result {
		grid-column: 1 / span 6;
	}

	.realisations-break h2 {
		grid-column: 1 / span 7;
	}

	.sandrine-grid,
	.rennes-grid,
	.sra-grid {
		display: block;
	}

	.sandrine-copy,
	.rennes-copy,
	.sra-copy {
		max-width: 82%;
		margin: 1.75rem 0 0 10%;
	}

	.sandrine-media {
		width: 78%;
		margin: 2rem 0 0 auto;
	}

	.rennes-media {
		width: 64%;
		margin: 1.75rem 0 0 auto;
	}

	.sra-media {
		width: 70%;
		margin: 2rem 0 0;
	}

	.realisations-contact h2 {
		grid-column: 1 / span 7;
	}

	.realisations-contact-copy {
		grid-column: 3 / span 6;
		margin-top: 1.75rem;
	}
}

@media (max-width: 40rem) {
	.realisations-v1 {
		font-size: 1.0625rem;
	}

	.realisations-v1 h1 {
		font-size: 2.625rem;
		line-height: 1.02;
	}

	.realisations-v1 h2 {
		font-size: 1.9375rem;
		line-height: 1.1;
	}

	.realisations-v1 h3 {
		font-size: 1.375rem;
	}

	.realisations-hero {
		padding: 3.625rem 0 4.375rem;
	}

	.realisations-hero-grid,
	.case-heading,
	.philippe-story,
	.angele-story,
	.realisations-break-grid,
	.realisations-contact-grid {
		display: block;
	}

	.realisations-hero-copy {
		margin-top: 1.75rem;
	}

	.major-case {
		padding: 4.375rem 0 4.875rem;
	}

	.case-heading {
		margin-bottom: 2.125rem;
	}

	.case-meta {
		margin-bottom: 1.25rem;
	}

	.philippe-main {
		width: 100%;
		margin-top: 1.875rem;
	}

	.philippe-secondary {
		width: 78%;
		margin: 1.5rem 0 0;
	}

	.philippe-result {
		margin-top: 1.875rem;
	}

	.angele-main {
		width: 100%;
		margin-top: 1.75rem;
	}

	.angele-secondary {
		width: 88%;
		margin: 1.5rem 0 0 auto;
	}

	.angele-result {
		margin-top: 1.875rem;
	}

	.realisations-break {
		padding: 5.5rem 0 4.75rem;
	}

	.case-sandrine {
		padding: 4.75rem 0;
	}

	.sandrine-copy,
	.rennes-copy,
	.sra-copy {
		max-width: 100%;
		margin: 1.5rem 0 0;
	}

	.sandrine-media {
		width: 92%;
		margin: 1.75rem 0 0 auto;
	}

	.case-rennes {
		padding: 3.5rem 0;
	}

	.rennes-media {
		width: 76%;
		margin: 1.5rem 0 0 auto;
	}

	.case-sra {
		padding: 4.75rem 0 5.5rem;
	}

	.sra-media {
		width: 88%;
		margin: 1.75rem 0 0;
	}

	.realisations-contact {
		padding: 4.125rem 0;
	}

	.realisations-contact-copy {
		margin-top: 1.75rem;
	}
}