/*
 * blocks/steps-row-timeline.css — étapes horizontales + ligne de progression.
 * Complète guest.css, ne redéfinit aucune primitive existante.
 */

.steps-section { background: #fff; padding-block: var(--s24); }
.steps-row { display: flex; justify-content: space-between; position: relative; max-width: 1100px; margin-inline: auto; }
.steps-row__line { position: absolute; top: 24px; left: 12.5%; right: 12.5%; height: 2px; border-top: 2px dashed #cbd5e1; }
.steps-row__line-fill { position: absolute; top: 23px; left: 12.5%; width: 0; height: 2px; background: var(--teal); transition: width 1.2s ease; }
.steps-row.in-view .steps-row__line-fill { width: 75%; }
.steps-row__step { width: 22%; text-align: center; position: relative; z-index: 2; }
.steps-row__circle {
	width: 48px; height: 48px; border-radius: 50%;
	border: 2px solid var(--teal); background: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.25rem; font-weight: 700; color: var(--teal);
	margin-inline: auto;
}
.steps-row__step h3 { font-size: 1.1rem; font-weight: 600; margin-top: var(--s4); }
.steps-row__step p { font-size: .9rem; color: #64748b; margin-top: var(--s2); }

@media (max-width: 768px) {
	.steps-row { flex-direction: column; align-items: flex-start; gap: var(--s8); }
	.steps-row__line, .steps-row__line-fill { top: 0; left: 24px; right: auto; width: 2px; height: 100%; }
	.steps-row__line-fill { height: 0; }
	.steps-row.in-view .steps-row__line-fill { width: 2px; height: 75%; }
	.steps-row__step { width: auto; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s4); align-items: start; text-align: left; }
	.steps-row__circle { flex-shrink: 0; grid-column: 1; grid-row: 1 / 3; }
	.steps-row__step h3 { grid-column: 2; grid-row: 1; margin-top: 0; }
	.steps-row__step p { grid-column: 2; grid-row: 2; margin-top: var(--s2); }
}