/**
 * Fil d'Ariane.
 *
 * Discret par construction : il sert à se repérer, pas à être lu. Posé sous le
 * bandeau, il reprend la gouttière du site pour s'aligner sur tout le reste.
 *
 * Le séparateur est en ::before sur les maillons suivants plutôt qu'en
 * caractère dans le balisage : un lecteur d'écran n'a que faire d'entendre
 * « barre oblique » entre deux niveaux.
 *
 * Emplacement : assets/css/components/fil.css
 */

.fil {
	padding-block: var(--space-5) 0;
}

.fil__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding-inline: var(--gutter);
	list-style: none;
	font-size: var(--fs-caption);
}

.fil__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
}

.fil__item + .fil__item::before {
	content: '›';
	color: var(--e4y-gold);
	font-size: 1.15em;
	line-height: 1;
}

.fil__lien {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}

.fil__lien:hover,
.fil__lien:focus-visible {
	color: var(--e4y-green);
	text-decoration: underline;
}

.fil__ici {
	color: var(--e4y-green);
	font-weight: var(--fw-bold);
}


@media (max-width: 767px) {

	.fil {
		padding-block-start: var(--space-4);
	}

	/* Sur un écran étroit, le fil peut occuper trois lignes et pousser le
	   contenu. Seul le dernier maillon compte vraiment pour se situer. */
	.fil__liste {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.fil__liste::-webkit-scrollbar {
		display: none;
	}

	.fil__item {
		white-space: nowrap;
	}

}