/**
 * ss4y/process — étapes numérotées.
 *
 * La ligne qui traverse les pastilles est une jauge : un rail neutre sur toute
 * la largeur, et par-dessus un trait pétrole qui se remplit de gauche à droite
 * au défilement. L'animation est pilotée par `animation-timeline: view()`, donc
 * sans JavaScript. Là où ce n'est pas supporté, la jauge s'affiche pleine.
 */

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

.ss4y-process {
	--ss4y-process-cols: 3;
	--ss4y-process-dot: 3.25rem;

	padding-block: var(--wp--preset--spacing--section);
	scroll-margin-top: var(--wp--custom--header--height);
}

.ss4y-process--bg-surface {
	background: var(--wp--preset--color--surface);
}

.ss4y-process--bg-white {
	background: var(--wp--preset--color--white);
}

.ss4y-process__inner {
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--custom--section--padding-inline);
}

/* ─── En-tête ────────────────────────────────────────────────────────────── */
.ss4y-process__header {
	margin-block-end: var(--wp--preset--spacing--xl);
	text-align: center;
}

.ss4y-process__eyebrow {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ss4y-process__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--title-l);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
}

.ss4y-process__intro {
	margin: var(--wp--preset--spacing--sm) auto 0;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}

/* ─── Jauge de progression ───────────────────────────────────────────────── */
.ss4y-process__timeline {
	position: relative;

	/*
	 * C'est la frise qui sert de repère de défilement, pas la jauge : à
	 * scaleX(0) celle-ci n'a plus d'aire, et sa propre timeline resterait
	 * bloquée à zéro.
	 */
	view-timeline-name: --ss4y-process;
}

.ss4y-process__track {
	position: absolute;
	z-index: 0;
	inset-inline: 0;

	/* Centrée sur les pastilles, dont la hauteur est connue. */
	inset-block-start: calc(var(--ss4y-process-dot) / 2);
	height: 1px;
	transform: translateY(-50%);
	background: var(--wp--preset--color--border);
}

.ss4y-process__progress {
	position: absolute;
	inset: -1px 0 auto;
	display: block;
	height: 3px;
	background: var(--wp--preset--color--primary);
	transform-origin: left center;
}

@keyframes ss4y-process-fill {

	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/*
 * Calage sur la phase `cover` et non `entry` : `entry` dure la hauteur de la
 * frise (~150 px de défilement), tout serait fini avant qu'on la regarde.
 * `cover` dure une hauteur d'écran, et la plage retenue place le remplissage
 * entre le tiers bas et le milieu de l'écran — pile quand la section est lue.
 */
@supports (animation-timeline: view()) {

	.ss4y-process__progress {
		animation: ss4y-process-fill linear both;
		animation-timeline: --ss4y-process;
		animation-range: cover 20% cover 55%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ss4y-process__progress {
		animation: none;
		transform: none;
	}
}

/* ─── Étapes ─────────────────────────────────────────────────────────────── */
.ss4y-process__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(var(--ss4y-process-cols), minmax(0, 1fr));
}

.ss4y-process__step {
	text-align: center;
}

/* ─── Pastille et ligne ──────────────────────────────────────────────────── */
.ss4y-process__marker {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ss4y-process-dot);
	margin-block-end: var(--wp--preset--spacing--md);
}

.ss4y-process__number {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ss4y-process-dot);
	height: var(--ss4y-process-dot);
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 50%;

	/* Masque la ligne qui passe derrière. */
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1;
}

.ss4y-process--bg-surface .ss4y-process__number {
	background: var(--wp--preset--color--surface);
}

/* ─── Textes ─────────────────────────────────────────────────────────────── */
.ss4y-process__step-title {
	margin: 0;
	padding-inline: var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
}

.ss4y-process__step-text {
	margin: 0.6rem auto 0;
	max-width: 24ch;
	padding-inline: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 782px) {

	.ss4y-process__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--lg);
	}

	/* En pile, la jauge horizontale n'a plus de sens : les pastilles suffisent. */
	.ss4y-process__track {
		display: none;
	}

	.ss4y-process__marker {
		margin-block-end: var(--wp--preset--spacing--sm);
	}
}