/* Slide « Live Tracking » en tête du carrousel d'accueil.
   Le balisage réutilise .news-item / .news-card du thème : on ne styles ici
   que ce qui est propre au live. */

.rifl-live-item .news-image {
	position: relative;
}

.rifl-live-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 2px;
	background: #1537de;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Pastille clignotante, uniquement quand le live est réellement ouvert. */
.rifl-live-item.is-live .rifl-live-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: rifl-live-pulse 1.6s ease-in-out infinite;
}

@keyframes rifl-live-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
	.rifl-live-item.is-live .rifl-live-badge::before {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   Bouton d'accès au live, rendu hors du carrousel, sous le titre de la page.
   Il se pose sur la photo du héros : tout doit rester lisible sur un fond
   dont on ne maîtrise ni les contrastes ni les zones claires.
   ------------------------------------------------------------------------- */

.rifl-live-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 1.5rem;
}

.rifl-live-cta .rifl-live-link,
.rifl-live-cta .rifl-live-soon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: 25px;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, transform .15s ease;
}

.rifl-live-cta .rifl-live-link {
	background: #0024b3;
	color: #fff;
	cursor: pointer;
}

.rifl-live-cta .rifl-live-link::after {
	/* Chevron en bordures : aucune dépendance aux polices du thème. */
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.rifl-live-cta .rifl-live-link:hover,
.rifl-live-cta .rifl-live-link:focus-visible {
	background: #fff;
	color: #0024b3;
	text-decoration: none;
	transform: translateY(-1px);
}

.rifl-live-cta .rifl-live-link:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

.rifl-live-cta .rifl-live-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.rifl-live-cta .rifl-live-link:active {
	transform: translateY(0);
}

/* En attente : même gabarit, visiblement inerte, et lisible sur fond clair
   comme sur fond sombre — d'où le fond noir translucide plutôt que blanc. */
.rifl-live-cta .rifl-live-soon {
	background: rgba(0, 0, 0, .45);
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	cursor: default;
	pointer-events: none;
}

/* Mobile : le bouton reste sous le titre, comme sur desktop — la mise en page
   du héros a été reprise côté thème pour lui en laisser la place. On resserre
   simplement l'échelle. */
@media (max-width: 767.98px) {
	.rifl-live-cta {
		gap: 8px 10px;
		margin-top: 1rem;
	}

	.rifl-live-cta .rifl-live-link,
	.rifl-live-cta .rifl-live-soon {
		padding: 10px 20px;
		font-size: .8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rifl-live-cta .rifl-live-link,
	.rifl-live-cta .rifl-live-link::after { transition: none; }
	.rifl-live-cta .rifl-live-link:hover { transform: none; }
}