/**
 * Barre d'étapes du tunnel d'inscription — partagée landing/paiement/confirmation.
 * Palette : #30698C primaire · #183546 foncé · #EAF0F4 clair · #767D80 gris texte.
 */

.l4-tunnel-steps {
	background: #fff;
	border-bottom: 1px solid #EFEFEF;
	padding: 10px 16px;
}
.l4-tunnel-steps ol {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 700px;
}
.l4-tunnel-step {
	display: flex;
	align-items: center;
	gap: 7px;
	font: 500 13px/1 Poppins, system-ui, sans-serif;
	color: #767D80;
	white-space: nowrap;
}
.l4-tunnel-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #EAF0F4;
	color: #5c7381;
	font-size: 11px;
}
.l4-tunnel-step.is-active { color: #183546; font-weight: 600; }
.l4-tunnel-step.is-active .l4-tunnel-step__num { background: #30698C; color: #fff; }
.l4-tunnel-step.is-done { color: #30698C; }
.l4-tunnel-step.is-done .l4-tunnel-step__num { background: #30698C; color: #fff; }

/* Page de confirmation : la dernière étape est à la fois courante et franchie.
   Elle reprend le bleu des étapes franchies (la graisse suffit à marquer
   qu'on y est) — en bleu nuit « en cours » elle se lisait comme non atteinte,
   seule sombre au milieu de trois étapes bleues. Règle explicite plutôt que
   de compter sur l'ordre des déclarations is-active / is-done. */
.l4-tunnel-step.is-active.is-done { color: #30698C; font-weight: 600; }
.l4-tunnel-step.is-active.is-done .l4-tunnel-step__num { background: #30698C; color: #fff; }

@media (max-width: 600px) {
	.l4-tunnel-step__label { display: none; }
	.l4-tunnel-steps ol { gap: 16px; }
}

/* Landing : mini barre insérée par landing-tunnel.js dans la popup Amelia
   ouverte, juste sous son titre — fait partie du popup plutôt que de flotter
   par-dessus le navigateur. */
.l4-tunnel-inline {
	padding: 8px 24px 14px;
	border-bottom: 1px solid rgba(26, 44, 55, .08);
	margin-bottom: 4px;
}
.l4-tunnel-inline ol {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.l4-tunnel-inline .l4-tunnel-step {
	font-size: 12px;
	gap: 5px;
}
.l4-tunnel-inline .l4-tunnel-step__num { width: 17px; height: 17px; font-size: 10px; }

@media (max-width: 480px) {
	.l4-tunnel-inline .l4-tunnel-step__label { display: none; }
	.l4-tunnel-inline ol { gap: 10px; }
}