/*
 * Composant « bandeau » — bande défilante.
 *
 * La piste contient deux séries identiques ; on la translate de la moitié de sa largeur,
 * donc la seconde série arrive exactement là où la première commençait : aucun saut.
 */

.lc47-bandeau {
	overflow: hidden;
	width: 100%;
	/* La bande sort des marges du conteneur : elle occupe toute la largeur de l'écran. */
	-webkit-mask-image: none;
}

.lc47-bandeau__piste {
	display: flex;
	width: max-content;
	animation: lc47-bandeau-defile var(--lc47-bandeau-duree, 30s) linear infinite;
}

.lc47-bandeau--droite .lc47-bandeau__piste {
	animation-direction: reverse;
}

.lc47-bandeau__serie {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}

.lc47-bandeau__entree {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: var(--lc47-bandeau-taille, 40px);
	font-weight: var(--lc47-bandeau-graisse, 700);
	line-height: 1.2;
	color: var(--lc47-bandeau-couleur, inherit);
}

.lc47-bandeau__lien {
	color: inherit;
	text-decoration: none;
}

.lc47-bandeau__lien:hover,
.lc47-bandeau__lien:focus-visible {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.lc47-bandeau__separateur {
	display: inline-block;
	margin: 0 var(--lc47-bandeau-ecart, 40px);
	width: var(--lc47-bandeau-separateur-taille, 24px);
	height: var(--lc47-bandeau-separateur-taille, 24px);
	flex: 0 0 auto;
}

/* Un séparateur texte n'a pas de dimensions imposées. */
span.lc47-bandeau__separateur {
	width: auto;
	height: auto;
}

@keyframes lc47-bandeau-defile {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/*
 * Mouvement réduit : la bande s'arrête. Elle reste lisible et défilable au doigt
 * plutôt que de disparaître.
 */
@media (prefers-reduced-motion: reduce) {
	.lc47-bandeau {
		overflow-x: auto;
	}

	.lc47-bandeau__piste {
		animation: none;
	}

	.lc47-bandeau__serie[aria-hidden="true"] {
		display: none;
	}
}
