/**
 * Le P'tit Franc — barre du haut : messages regroupés au centre, affichés un par un en fondu.
 * Gabarit : template-parts/header/top-bar.php · Script : js/ltf-top-bar.js
 * Durée d'affichage : selon la longueur du message (≈ 9 s pour 90 caractères), au moins data-ltf-delai (ms),
 * identique sur tous les écrans (js/ltf-top-bar.js).
 */

.top-bar:has(.ltf-messages) {
	justify-content: center;
}

/* Ancre vide réservée à The7 (voir top-bar.php) : ne prend aucune place */
.top-bar .ltf-ancre-zone {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Tous les messages occupent la même case : la hauteur s'adapte au plus long.
   Hors des blocs « mini-widgets » de The7 : on reprend explicitement le texte de la barre du haut
   (blanc, et police/taille/graisse des options The7). */
.top-bar .ltf-messages {
	position: relative; /* devant le fond .top-bar-bg, positionné en absolu par The7 */
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* jamais plus large que la barre, même pour le plus long message */
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 1100px;
	overflow-wrap: break-word;
	margin: 0 auto;
	padding: 4px 12px;
	color: #fff;
	font-family: var(--the7-top-bar-font-family, Montserrat, sans-serif);
	font-size: var(--the7-top-bar-font-size, 14px);
	font-weight: var(--the7-top-bar-font-weight, 500);
	text-transform: var(--the7-top-bar-text-transform, none);
	line-height: 1.4;
	text-align: center;
}
.top-bar .ltf-messages a {
	color: inherit;
	text-decoration: underline;
}

.ltf-message {
	grid-area: 1 / 1;
	align-self: center;
	min-width: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
}
.ltf-message.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease, visibility 0s;
}

/* Visiteurs qui ont demandé moins d'animations : changement sans fondu */
@media (prefers-reduced-motion: reduce) {
	.ltf-message,
	.ltf-message.is-active {
		transition: none;
	}
}