/*
 * Je Travel Communauté 1.6.0 : bandeau « En flash ».
 * Masqué tant que le script ne l'a pas placé sous l'en-tête du thème (pas de saut de page).
 * Tout est confiné dans .jtc-ticker.
 */

.jtc-ticker {
	display: none;
	width: 100%;
	background: var(--jtc-white, #fff);
	border-bottom: 1px solid var(--jtc-border, #DCE2EA);
	position: relative;
	z-index: 5;
}

.jtc-ticker.is-ready {
	display: block;
}

.jtc-ticker__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 8px 16px;
}

.jtc-ticker__label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 8px;
	background: var(--jtc-yellow, #F8B400);
	color: var(--jtc-navy, #0B2545);
	font-family: var(--jtc-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.jtc-ticker__label .jtc-icon {
	flex: 0 0 auto;
}

.jtc-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/* Fondu sur les bords : les informations apparaissent et disparaissent sans coupure nette. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.jtc-ticker__lane {
	display: flex;
	width: max-content;
	animation: jtc-ticker-run var(--jtc-ticker-duration, 40s) linear infinite;
	will-change: transform;
}

.jtc-ticker__set,
.jtc-ticker__group {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jtc-ticker__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.jtc-ticker__link {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 0;
	color: var(--jtc-navy, #0B2545);
	font-family: var(--jtc-font-body);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

/* Séparateur entre deux informations. */
.jtc-ticker__link::before {
	content: '\203A';
	margin: 0 14px 0 28px;
	color: var(--jtc-muted, #5B6675);
	font-weight: 600;
}

.jtc-ticker__kind {
	color: var(--jtc-teal-dark, #147A74);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Couleur du mot selon le type (communications saisies et événements). */
.jtc-ticker__kind--pub {
	color: var(--jtc-muted, #5B6675);
}

.jtc-ticker__kind--promo,
.jtc-ticker__kind--bon_plan {
	color: #B45309;
}

.jtc-ticker__kind--urgent {
	color: var(--jtc-red, #E63946);
}

.jtc-ticker__kind--event,
.jtc-ticker__kind--nouveaute {
	color: var(--jtc-accent, #1276A8);
}

.jtc-ticker__kind--replay {
	color: #7C3AED;
}

.jtc-ticker__link:hover .jtc-ticker__text,
.jtc-ticker__link:focus-visible .jtc-ticker__text {
	text-decoration: underline;
	color: var(--jtc-accent, #1276A8);
}

.jtc-ticker__link:focus-visible,
.jtc-ticker__toggle:focus-visible {
	outline: none;
	box-shadow: var(--jtc-focus, 0 0 0 3px rgba(28, 163, 221, .22));
	border-radius: 4px;
}

.jtc-ticker__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jtc-gray-light, #F5F7FA);
	color: var(--jtc-navy, #0B2545);
	cursor: pointer;
}

.jtc-ticker__toggle:hover {
	background: var(--jtc-blue-pale, #E3F6FD);
}

.jtc-ticker__ic-play,
.jtc-ticker.is-paused .jtc-ticker__ic-pause {
	display: none;
}

.jtc-ticker.is-paused .jtc-ticker__ic-play {
	display: inline-flex;
}

/* Pause : bouton, survol, clavier. */
.jtc-ticker.is-paused .jtc-ticker__lane,
.jtc-ticker__viewport:hover .jtc-ticker__lane,
.jtc-ticker__viewport:focus-within .jtc-ticker__lane {
	animation-play-state: paused;
}

@keyframes jtc-ticker-run {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--jtc-ticker-shift, 50%))); }
}

/* Sans animation (réglage du système) : la ligne se fait défiler à la main, le bouton n'a plus d'objet. */
@media (prefers-reduced-motion: reduce) {
	.jtc-ticker__lane {
		animation: none;
	}

	.jtc-ticker__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.jtc-ticker__toggle {
		display: none;
	}
}

@media (max-width: 640px) {
	.jtc-ticker__inner {
		gap: 8px;
		padding: 6px 10px;
	}

	/* Téléphone : l'icône seule ; le titre reste lu par les lecteurs d'écran (et par aria-label de la région). */
	.jtc-ticker__label {
		padding: 9px;
	}

	.jtc-ticker__label-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.jtc-ticker__toggle {
		width: 32px;
		height: 32px;
	}

	.jtc-ticker__link::before {
		margin: 0 10px 0 20px;
	}
}

@media print {
	.jtc-ticker {
		display: none !important;
	}
}
