/* Méthode — progression éditoriale continue, sans représentation graphique du process. */

.methode-v1 {
	background: var(--color-paper);
	color: var(--color-ink);
}

.methode-hero {
        padding: clamp(5.75rem, 7vw, 6.25rem) 0;
        border-bottom: 1px solid var(--color-line);
}

.methode-hero-grid,
.methode-movement-grid,
.methode-contact-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 1.5rem;
	align-items: start;
}

.methode-hero h1 {
        grid-column: 1 / 9;
        grid-row: 1;
        max-width: 48rem;
}

.methode-hero-copy {
        grid-column: 4 / 10;
        grid-row: 2;
        max-width: 42.5rem;
        margin-top: clamp(2rem, 4vw, 3.5rem);
        margin-left: 0;
}

.methode-hero-copy p,
.methode-copy p,
.methode-contact-copy p {
	margin: 0 0 1rem;
}

.methode-hero-copy p:first-child {
	color: var(--color-ink-muted);
	font-size: 1.25rem;
	line-height: 1.5;
}

.methode-movement {
	padding: clamp(5.5rem, 7.25vw, 6rem) 0;
}

.methode-movement-grid {
        row-gap: 1rem;
}

.methode-kicker {
        grid-column: 1 / 3;
        grid-row: 1;
        margin: 0.45rem 0 0;
        color: var(--color-ink-muted);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.045em;
        line-height: 1.3;
        text-transform: uppercase;
}

.methode-movement h2 {
        grid-column: 3 / 9;
        grid-row: 2;
        max-width: 28rem;
}

.methode-copy {
        grid-column: 8 / 13;
        grid-row: 2;
        max-width: 35rem;
}

.methode-movement--start {
	padding-top: clamp(5.5rem, 7.5vw, 6rem);
}

.methode-movement--materials {
	padding-top: clamp(4.75rem, 6.5vw, 5.5rem);
	padding-bottom: clamp(4.75rem, 6.5vw, 5.5rem);
}

.methode-movement--materials h2 {
        grid-column: 3 / 10;
}

.methode-movement--materials .methode-copy {
        grid-column: 4 / 10;
        grid-row: 3;
        max-width: 35rem;
        margin-top: 0.75rem;
}

.methode-movement--structure {
	padding: clamp(5rem, 7vw, 5.625rem) 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	background: var(--color-paper-soft);
}

.methode-movement--structure h2 {
        grid-column: 2 / 9;
}

.methode-movement--structure .methode-copy {
        grid-column: 6 / 12;
        grid-row: 2;
}

.methode-movement--review {
	padding: clamp(6.25rem, 8.5vw, 6.875rem) 0;
}

.methode-movement--review h2 {
        grid-column: 2 / 10;
        max-width: 32rem;
}

.methode-movement--review .methode-copy {
        grid-column: 7 / 13;
        grid-row: 2;
        max-width: 30rem;
}

.methode-movement--launch {
	padding: clamp(5rem, 6.75vw, 5.5rem) 0;
}

.methode-movement--launch h2 {
        grid-column: 3 / 10;
}

.methode-movement--launch .methode-copy {
        grid-column: 5 / 11;
        grid-row: 3;
        max-width: 31rem;
        margin-top: 0.75rem;
}

.methode-contact {
        padding: clamp(4.75rem, 6.5vw, 6rem) 0;
        border-top: 1px solid var(--color-line);
}

.methode-contact h2 {
        grid-column: 2 / 9;
        max-width: 34rem;
}

.methode-contact-copy {
        grid-column: 6 / 12;
        max-width: 34rem;
        margin-top: 2rem;
}

.methode-contact-copy .btn {
	margin-top: 1rem;
}

@media (max-width: 53.75rem) {
	.methode-hero,
	.methode-movement,
	.methode-contact {
		padding-right: 0;
		padding-left: 0;
	}

	.methode-hero-grid,
	.methode-movement-grid,
	.methode-contact-grid {
		display: block;
	}

	.methode-hero h1 {
		max-width: 34rem;
	}

	.methode-hero-copy {
		max-width: 35rem;
		margin: 2rem 0 0;
	}

	.methode-kicker {
		margin: 0 0 0.875rem;
	}

	.methode-movement h2,
	.methode-contact h2 {
		max-width: 36rem;
	}

	.methode-copy,
	.methode-movement--materials .methode-copy,
	.methode-movement--structure .methode-copy,
	.methode-movement--review .methode-copy,
	.methode-movement--launch .methode-copy,
	.methode-contact-copy {
		max-width: 35rem;
		margin: 1.5rem 0 0;
	}
}

@media (max-width: 40rem) {
	.methode-hero {
		padding-top: 4.25rem;
		padding-bottom: 4.25rem;
	}

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

	.methode-hero-copy p:first-child {
		font-size: 1.1875rem;
	}

	.methode-movement,
	.methode-movement--materials,
	.methode-movement--structure,
	.methode-movement--launch {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.methode-movement--review {
		padding-top: 4.5rem;
		padding-bottom: 4.5rem;
	}

	.methode-contact {
		padding-top: 4.25rem;
		padding-bottom: 4.75rem;
	}
}