/**
 * Barre d'annonce : rotation des messages.
 *
 * Les messages sont empilés dans une seule cellule de grille. La largeur du
 * bandeau se cale donc sur le message le plus long et ne bouge plus d'une
 * rotation à l'autre : aucun saut de mise en page toutes les cinq secondes.
 *
 * Le style du bandeau lui-même (fond, couleur, hauteur, lettrage) appartient au
 * modèle d'en-tête Elementor. Cette feuille ne traite que le défilement.
 */

.merym-annonce {
	display: inline-grid;
	vertical-align: bottom;
	text-align: center;
}

.merym-annonce__msg {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.merym-annonce__msg.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease, visibility 0s linear 0s;
}

/* Sans script, tous les messages resteraient invisibles : on rétablit le premier. */
.no-js .merym-annonce__msg:first-child,
.merym-annonce__msg:first-child:last-child {
	opacity: 1;
	visibility: visible;
}

@media ( prefers-reduced-motion: reduce ) {

	.merym-annonce__msg,
	.merym-annonce__msg.is-on {
		transition: none;
	}
}