/* Bandeau d'informations sous l'en-tête : étiquette en biais à gauche (comme le rouge des résultats),
   messages en défilement, fondu, clignotant ou fixes (voir bandeau.js).
   Couleurs et police reprises du thème AS Brecey quand il est actif (valeurs de secours sinon). */

.asbb {
	--asbb-rouge: var(--wp--preset--color--rouge, #DD0106);
	--asbb-rouge-vif: var(--wp--preset--color--rouge-vif, #FF3B3F);
	--asbb-noir: var(--wp--preset--color--noir, #000);
	--asbb-brume: var(--wp--preset--color--brume, #EEF0F2);
	--asbb-pad-x: clamp(1rem, 3vw, 2rem);
	--asbb-hauteur: 3rem;
	--asbb-biais: 0.9rem;
	--asbb-pulse: 1.7s;
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--asbb-fond);
	color: var(--asbb-texte);
	font-family: var(--wp--preset--font-family--archivo, Archivo, "Arial Narrow", Arial, sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	font-stretch: 82%;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.asbb[hidden],
.asbb__jeu[hidden],
.asbb__el[hidden] {
	display: none;
}

/* Collé à l'en-tête et au bloc suivant (pas d'espace blanc entre deux bandes de couleur) */
.wp-site-blocks > .asbb,
.wp-site-blocks > .asbb + * {
	margin-block-start: 0;
}

/* … y compris le programme du week-end, qui vient après le titre caché de l'accueil
   et reçoit sinon l'espacement des blocs du thème (bande blanche) */
.wp-site-blocks > .asbb + * > .asbm-we {
	margin-block-start: 0;
}

/* ---------- Couleurs ---------- */
.asbb--rouge {
	--asbb-fond: var(--asbb-rouge);
	--asbb-texte: #fff;
	--asbb-etiquette-fond: var(--asbb-noir);
	--asbb-etiquette-texte: #fff;
	--asbb-point: var(--asbb-rouge-vif);
	--asbb-sep: rgba(0, 0, 0, 0.45);
	--asbb-souligne: #fff;
}

.asbb--noir {
	--asbb-fond: var(--asbb-noir);
	--asbb-texte: #fff;
	--asbb-etiquette-fond: var(--asbb-rouge);
	--asbb-etiquette-texte: #fff;
	--asbb-point: #fff;
	--asbb-sep: var(--asbb-rouge-vif);
	--asbb-souligne: var(--asbb-rouge-vif);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.asbb--clair {
	--asbb-fond: var(--asbb-brume);
	--asbb-texte: var(--asbb-noir);
	--asbb-etiquette-fond: var(--asbb-rouge);
	--asbb-etiquette-texte: #fff;
	--asbb-point: #fff;
	--asbb-sep: var(--asbb-rouge);
	--asbb-souligne: var(--asbb-rouge);
}

/* ---------- Encart aéré : une carte alignée sur l'en-tête, posée sur une bande d'air ---------- */
.asbb--fond-noir {
	--asbb-bande: var(--asbb-noir);
}

.asbb--fond-blanc {
	--asbb-bande: #fff;
}

.asbb--encart {
	--asbb-hauteur: 2.75rem;
	padding: clamp(0.75rem, 1.8vw, 1.25rem) var(--asbb-pad-x);
	background: var(--asbb-bande);
	border-bottom: 0;
}

.asbb--encart .asbb__inner {
	padding: 0 0.45rem 0 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--asbb-fond);
}

/* Noir sur fond noir : la carte se détache comme les rencontres du programme */
.asbb--encart.asbb--fond-noir.asbb--noir .asbb__inner {
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Rouge : l'étiquette noire se confondrait avec la bande noire, elle passe en rouge foncé */
.asbb--encart.asbb--rouge {
	--asbb-etiquette-fond: var(--wp--preset--color--rouge-fonce, #A30004);
	--asbb-point: #fff;
}

.asbb--encart.asbb--fond-blanc.asbb--clair .asbb__inner {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.asbb--encart .asbb__etiquette {
	padding-left: 0.95rem;
}

.asbb--encart .asbb__etiquette::before {
	display: none;
}

/* ---------- Mise en page ---------- */
.asbb__inner {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	max-width: var(--wp--style--global--wide-size, 1240px);
	min-height: var(--asbb-hauteur);
	margin: 0 auto;
	padding: 0 var(--asbb-pad-x);
}

.asbb__jeu {
	flex: 1;
	display: flex;
	align-items: stretch;
	min-width: 0;
}

/* Étiquette : le fond part du bord de l'écran et se termine en biais */
.asbb__etiquette {
	position: relative;
	z-index: 1;
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin-right: calc(var(--asbb-biais) + 0.9rem);
	padding-right: 0.35rem;
	background: var(--asbb-etiquette-fond);
	color: var(--asbb-etiquette-texte);
	font-weight: 900;
	font-stretch: 70%;
	font-size: 1.0625rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.asbb__etiquette::before,
.asbb__etiquette::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	background: inherit;
}

.asbb__etiquette::before {
	right: 100%;
	width: 100vw;
}

.asbb__etiquette::after {
	left: 100%;
	width: var(--asbb-biais);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Point « en direct » */
.asbb__point {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--asbb-point);
}

.asbb__fenetre {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.asbb__fenetre::-webkit-scrollbar {
	display: none;
}

.asbb__liste {
	display: flex;
	align-items: center;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.asbb__el {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Séparateur : petite barre en biais, comme les bandes du maillot */
.asbb__el::after {
	content: "";
	flex: none;
	width: 0.4em;
	height: 1.05em;
	margin: 0 1.1em;
	background: var(--asbb-sep);
	transform: skewX(-18deg);
}

.asbb__el:last-child::after,
.asbb__el.est-dernier::after {
	display: none;
}

.asbb a {
	color: inherit;
	text-decoration: none;
}

.asbb a:hover,
.asbb a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--asbb-souligne);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.asbb a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------- Bouton pause (ajouté par bandeau.js pour les bandeaux animés) ---------- */
.asbb__pause {
	flex: none;
	align-self: center;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	margin: 0 0 0 0.75rem;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.6875rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
}

.asbb__pause:hover,
.asbb__pause:focus-visible {
	opacity: 1;
}

.asbb__pause:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------- Animations (seulement une fois bandeau.js prêt, et si l'appareil les accepte) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.asbb--pret .asbb__point {
		animation: asbb-direct 1.6s ease-in-out infinite;
	}

	/* Défilement : la liste est doublée par bandeau.js, elle glisse d'une moitié puis recommence */
	.asbb--pret.asbb--defilement .asbb__fenetre {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 2.5rem), transparent);
	}

	.asbb--pret.asbb--defilement .asbb__el:last-child::after {
		display: block;
	}

	/* Message libre : pas de séparateur en bout de passage */
	.asbb--pret.asbb--defilement .asbb__jeu--passage .asbb__el:last-child::after,
	.asbb--pret.asbb--defilement .asbb__jeu--passage .asbb__el.est-dernier::after {
		display: none;
	}

	.asbb--pret.asbb--defilement .asbb__liste[data-distance] {
		animation: asbb-defile var(--asbb-duree, 30s) linear infinite;
	}

	.asbb--pret.asbb--defilement:hover .asbb__liste,
	.asbb--pret.asbb--defilement:focus-within .asbb__liste,
	.asbb--pret.est-en-pause .asbb__liste {
		animation-play-state: paused;
	}

	/* Fondu et clignotant : un message à la fois, empilés au même endroit */
	.asbb--pret.asbb--fondu .asbb__fenetre,
	.asbb--pret.asbb--clignotant .asbb__fenetre {
		overflow: hidden;
	}

	.asbb--pret.asbb--fondu .asbb__liste,
	.asbb--pret.asbb--clignotant .asbb__liste {
		position: relative;
		flex: 1;
		align-self: stretch;
		min-width: 0;
	}

	.asbb--pret.asbb--fondu .asbb__el,
	.asbb--pret.asbb--clignotant .asbb__el {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.9em);
		transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
	}

	.asbb--pret.asbb--fondu .asbb__el::after,
	.asbb--pret.asbb--clignotant .asbb__el::after {
		display: none;
	}

	.asbb--pret.asbb--fondu .asbb__el > *,
	.asbb--pret.asbb--clignotant .asbb__el > * {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.asbb--pret.asbb--fondu .asbb__el.est-actif,
	.asbb--pret.asbb--clignotant .asbb__el.est-actif {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
	}

	.asbb--pret.asbb--fondu .asbb__el.est-sortant {
		transform: translateY(-0.9em);
	}

	.asbb--pret.asbb--clignotant .asbb__el.est-actif > * {
		animation: asbb-clignote var(--asbb-pulse) ease-in-out infinite;
	}

	.asbb--pret.asbb--clignotant:hover .asbb__el > *,
	.asbb--pret.asbb--clignotant:focus-within .asbb__el > *,
	.asbb--pret.asbb--clignotant.est-en-pause .asbb__el > * {
		animation-play-state: paused;
	}
}

@keyframes asbb-defile {
	from { transform: translateX(var(--asbb-depart, 0px)); }
	to { transform: translateX(calc(-1 * var(--asbb-distance, 50%))); }
}

@keyframes asbb-clignote {
	0%, 50% { opacity: 1; }
	65%, 85% { opacity: 0.12; }
	100% { opacity: 1; }
}

@keyframes asbb-direct {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.7); }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.asbb {
		--asbb-hauteur: 2.6rem;
		--asbb-biais: 0.7rem;
		font-size: 0.875rem;
	}

	.asbb__etiquette {
		font-size: 0.9375rem;
		margin-right: calc(var(--asbb-biais) + 0.6rem);
	}
}