/**
 * Optimisation de tournées — page marketing dédiée (plan-optimisation-tournees P6).
 * Chargé conditionnellement (functions.php) sur templates/template-optimisation-tournees.php.
 * Réutilise les tokens DA (style.css :root) et les briques partagées sfc-section/-features/-faq/-cta.
 */

/* ---- Hero ---- */
.sfc-tournees-hero { text-align: center; }
.sfc-tournees-hero .sfc-container { max-width: 820px; }
.sfc-tournees-hero__actions {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	justify-content: center; margin-top: var(--space-5);
}

/* ---- « Comment ça marche » : 3 étapes numérotées ---- */
.sfc-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
	counter-reset: sfc-step;
}
.sfc-steps__item {
	position: relative;
	display: flex; flex-direction: column; gap: var(--space-2);
	padding: var(--space-5);
	background: var(--color-surface-1);
	border: 1px solid var(--color-rule);
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius-md);
}
.sfc-steps__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	background: var(--color-primary); color: var(--color-white);
	font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
	line-height: 1;
}
.sfc-steps__title { font-weight: 700; color: var(--color-ink); margin: 0; }
.sfc-steps__text { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ink-soft); margin: 0; }

@media (max-width: 800px) {
	.sfc-steps { grid-template-columns: 1fr; }
}