/*
 * Fil d'Ariane — composant autonome (inc/fil-ariane.php).
 * Discret et éditorial : Manrope uppercase, séparateurs fins, étape courante
 * en couleur d'entité. Une ligne, défilement doux si trop long en mobile.
 */

.cnep-ariane {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 16px 0;
}
@media (min-width: 981px) {
	.cnep-ariane {
		padding: 18px 40px 0;
	}
}

.cnep-ariane__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none; /* défilement possible mais invisible (mobile) */
}
.cnep-ariane__liste::-webkit-scrollbar {
	display: none;
}

.cnep-ariane__etape {
	font-family: "Manrope", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cnep-ui-ink-soft);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Séparateur fin entre les étapes (jamais après la dernière). */
.cnep-ariane__etape:not(:last-child)::after {
	content: "›";
	font-family: "Noto Serif", Georgia, serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--cnep-ui-border);
	opacity: 0.9;
	transform: translateY(-1px);
}

.cnep-ariane__etape a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.cnep-ariane__etape a:hover,
.cnep-ariane__etape a:focus-visible {
	color: var(--entity-primary);
}

.cnep-ariane__etape--courante {
	color: var(--entity-primary);
}