/* ASM Agenda et résultats, version 1.2.0 */

/* Grille des deux diaporamas : l'un sous l'autre sur téléphone, côte à côte à partir de 768 px */

.asm-semaine {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0 0 30px;
}

@media (min-width: 768px) {
	.asm-semaine {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}

	/* Un seul diaporama rempli : il garde la largeur d'une colonne, centré */
	.asm-semaine.asm-semaine--seul {
		grid-template-columns: minmax(0, calc((100% - 30px) / 2));
		justify-content: center;
	}
}

/* Panneau d'un diaporama */

.asm-diapo {
	--asm-fond-panneau: #f4f4f4;
	--asm-rouge: #ba1828;
	/* Points inactifs : contraste de 3,4:1 sur le blanc, le minimum demandé pour un bouton */
	--asm-point: #8c8c8c;
	--asm-point-survol: #5c5c5c;
	--asm-fond-fleche: rgba(255, 255, 255, .92);
	--asm-marge-panneau: 14px;
	--asm-fleche: 40px;
	--asm-retrait-fleche: 10px;

	position: relative;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: var(--asm-marge-panneau);
	background: var(--asm-fond-panneau);
	font-family: inherit;
}

.asm-diapo *,
.asm-diapo *::before,
.asm-diapo *::after {
	box-sizing: border-box;
}

/* Bandeau titre */

.asm-diapo .asm-diapo__titre {
	margin: 0 0 12px;
	padding: 14px 12px;
	background: var(--asm-rouge);
	/* Le thème impose avec !important la couleur rouge des titres h2, et leur taille jusqu'à 768 px de large */
	color: #fff !important;
	font-family: inherit;
	font-size: 20px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25 !important;
	letter-spacing: .02em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: none;
	border: 0;
}

.asm-diapo .asm-diapo__titre-fort {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .08em;
}

.asm-diapo .asm-diapo__titre-suite {
	display: block;
}

/* Carte blanche : images, flèches sur les côtés, points en dessous */

.asm-diapo .asm-diapo__carte {
	padding: 4px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* Le cadre sert de repère aux flèches, qui se dimensionnent d'après sa largeur */

.asm-diapo .asm-diapo__cadre {
	position: relative;
	container-type: inline-size;
}

.asm-diapo .asm-diapo__piste {
	position: relative;
	display: flex;
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: 3px;
}

.asm-diapo .asm-diapo__piste::-webkit-scrollbar {
	display: none;
}

.asm-diapo .asm-diapo__piste:focus {
	outline: none;
}

/* Le focus arrive ici depuis une flèche qui se masque : contour garanti, même si le thème les supprime */
.asm-diapo .asm-diapo__piste:focus-visible {
	outline: 2px solid var(--asm-rouge) !important;
	outline-offset: 2px;
}

.asm-diapo .asm-diapo__diapo {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: var(--asm-proportion, 4 / 5);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background: #fff;
}

.asm-diapo .asm-diapo__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	user-select: none;
}

/*
 * Boutons : remise à zéro complète. Le thème habille tous les boutons (bordure, majuscules,
 * marges) et force avec !important un fond transparent et l'absence de contour au focus.
 */

.asm-diapo .asm-diapo__fleche,
.asm-diapo .asm-diapo__point {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none;
	vertical-align: middle;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

/* Le thème pose aussi un calque coloré en ::before sur tous les boutons */

.asm-diapo .asm-diapo__fleche::before,
.asm-diapo .asm-diapo__fleche::after,
.asm-diapo .asm-diapo__point::before,
.asm-diapo .asm-diapo__point::after {
	content: none;
}

.asm-diapo .asm-diapo__fleche {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: var(--asm-fleche);
	height: var(--asm-fleche);
	margin-top: calc(var(--asm-fleche) / -2);
	background-color: var(--asm-fond-fleche) !important;
	color: #1d1d1d;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	transition: background-color .2s ease, color .2s ease, opacity .2s ease, visibility .2s;
}

.asm-diapo .asm-diapo__fleche--prec {
	left: var(--asm-retrait-fleche);
}

.asm-diapo .asm-diapo__fleche--suiv {
	right: var(--asm-retrait-fleche);
}

.asm-diapo .asm-diapo__fleche svg {
	display: block;
	width: 22px;
	height: 22px;
}

/*
 * Flèches proportionnées à l'image : elles tiennent dans le dixième de largeur que les visuels laissent
 * libre sur chaque bord, sans masquer d'heure ni de score. Les navigateurs anciens gardent la taille fixe.
 */

@supports (width: 1cqi) {
	.asm-diapo .asm-diapo__fleche {
		--asm-fleche: clamp(28px, 7.5cqi, 40px);
		--asm-retrait-fleche: clamp(4px, 1.9cqi, 10px);
	}

	.asm-diapo .asm-diapo__fleche svg {
		width: clamp(16px, 4.2cqi, 22px);
		height: clamp(16px, 4.2cqi, 22px);
	}
}

.asm-diapo .asm-diapo__fleche:hover,
.asm-diapo .asm-diapo__fleche:focus-visible {
	background-color: #fff !important;
	color: var(--asm-rouge);
}

/* Flèche qui ne mène nulle part (première ou dernière image) : masquée, elle laisse voir le visuel */

.asm-diapo .asm-diapo__fleche[aria-disabled="true"] {
	visibility: hidden;
	opacity: 0;
	cursor: default;
}

.asm-diapo .asm-diapo__points {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding-top: 4px;
}

.asm-diapo .asm-diapo__point {
	position: relative;
	width: 24px;
	height: 24px;
}

.asm-diapo .asm-diapo__rond {
	display: block;
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--asm-point);
	transition: background-color .2s ease, width .2s ease, height .2s ease;
}

.asm-diapo .asm-diapo__point:hover .asm-diapo__rond {
	background: var(--asm-point-survol);
}

/* Point de l'image affichée : rouge et plus grand, repérable même sans distinguer les couleurs */
.asm-diapo .asm-diapo__point[aria-current="true"] .asm-diapo__rond {
	width: 14px;
	height: 14px;
	background: var(--asm-rouge);
}

/* Contour au clavier seulement : un clic de souris n'en laisse pas, quel que soit le thème */

.asm-diapo .asm-diapo__fleche:focus:not(:focus-visible),
.asm-diapo .asm-diapo__point:focus:not(:focus-visible) {
	outline: 0;
}

.asm-diapo .asm-diapo__fleche:focus-visible,
.asm-diapo .asm-diapo__point:focus-visible {
	outline: 2px solid var(--asm-rouge) !important;
	outline-offset: 2px;
}

/* Tant que le script n'a pas pris la main, les commandes restent invisibles sans décaler la mise en page */

.asm-diapo:not(.is-pret) .asm-diapo__fleche,
.asm-diapo:not(.is-pret) .asm-diapo__points {
	visibility: hidden;
}

/* Annonce pour les lecteurs d'écran, invisible à l'écran */

.asm-diapo .asm-diapo__etat {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Message dans l'éditeur WPBakery quand aucune image n'est choisie */

.asm-semaine-vide {
	padding: 20px;
	background: #f4f4f4;
	border: 1px dashed #ba1828;
	color: #333;
	text-align: center;
}

/* Colonnes plus étroites (tablettes) puis téléphones */

@media (max-width: 991px) {
	.asm-diapo {
		--asm-fleche: 36px;
		--asm-retrait-fleche: 8px;
	}
}

@media (max-width: 767px) {
	.asm-diapo {
		--asm-marge-panneau: 12px;
		--asm-retrait-fleche: 6px;
	}

	.asm-diapo .asm-diapo__titre {
		padding: 12px 10px;
		font-size: 18px !important;
	}

	.asm-diapo .asm-diapo__titre-fort {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asm-diapo .asm-diapo__fleche,
	.asm-diapo .asm-diapo__point,
	.asm-diapo .asm-diapo__rond {
		transition: none;
	}
}