/* ==========================================================================
   YCEO Topbar — styles front-end
   ========================================================================== */

.yceo-topbar {
	--yceo-topbar-height: 40px;
	--yceo-topbar-font-size: 14px;
	--yceo-topbar-bg: #0b6e6e;
	--yceo-topbar-color: #ffffff;
	--yceo-topbar-weight: 400;
	--yceo-topbar-speed: 18s;

	position: relative;
	width: 100%;
	height: var(--yceo-topbar-height);
	background-color: var(--yceo-topbar-bg);
	color: var(--yceo-topbar-color);
	overflow: hidden;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	font-size: var(--yceo-topbar-font-size);
	font-weight: var(--yceo-topbar-weight);
	line-height: 1.3;
	z-index: 999999;
}

.yceo-topbar * {
	box-sizing: border-box;
}

.yceo-topbar a {
	color: inherit;
	text-decoration: underline;
	font-weight: inherit;
	margin: 0 0.35em;
}

.yceo-topbar a:hover,
.yceo-topbar a:focus {
	opacity: 0.8;
	color: inherit;
}

.yceo-topbar a.yceo-topbar__link {
	margin-left: 8px;
	white-space: nowrap;
}

/* ---- Fenêtre de défilement : 90% de la largeur, 5% de marge de chaque côté ---- */

.yceo-topbar__viewport {
	width: 90%;
	max-width: 90%;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
}

/* ---- Mode défilement (scroll / marquee) ---- */

.yceo-topbar--scroll .yceo-topbar__track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	width: max-content;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	animation: yceo-topbar-scroll var(--yceo-topbar-speed) linear infinite;
	will-change: transform;
}

.yceo-topbar--scroll .yceo-topbar__item {
	display: inline-flex;
	align-items: center;
	/* L'écart correspond à la largeur de la fenêtre visible (calculé en JS et
	   stocké dans --yceo-topbar-gap) : le message suivant entre par la droite
	   au moment où le précédent sort par la gauche. Repli en 100vw tant que
	   le script n'a pas encore mesuré la fenêtre réelle. */
	padding-right: var(--yceo-topbar-gap, 100vw);
	white-space: nowrap;
}

@keyframes yceo-topbar-scroll {
	from {
		transform: translateY(-50%) translateX(0);
	}
	to {
		transform: translateY(-50%) translateX(-50%);
	}
}

/* L'utilisateur préfère moins d'animation : on stoppe le défilement */
@media (prefers-reduced-motion: reduce) {
	.yceo-topbar--scroll .yceo-topbar__track {
		animation: none;
	}
}

/* Pause au survol / focus pour permettre la lecture et le clic sur le lien */
.yceo-topbar--scroll:hover .yceo-topbar__track,
.yceo-topbar--scroll:focus-within .yceo-topbar__track {
	animation-play-state: paused;
}

/* ---- Mode statique ---- */

.yceo-topbar--static .yceo-topbar__static {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	white-space: normal;
}

.yceo-topbar--static .yceo-topbar__item {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Responsive / mobile ---- */

@media (max-width: 782px) {
	.yceo-topbar {
		font-size: calc(var(--yceo-topbar-font-size) * 0.9);
	}

	.yceo-topbar--static .yceo-topbar__item {
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.yceo-topbar {
		font-size: calc(var(--yceo-topbar-font-size) * 0.82);
	}
}