/* ------------------------------------------------------------------
   Barre de tags des listings d'evenements
   ------------------------------------------------------------------
   Remplace les onglets a volets. Un seul jeu de fiches dans la page,
   filtre au clic ; plus de carrousel horizontal sur telephone, plus
   d'evenement ecrit deux fois.

   LA LIGNE UNIQUE EN PORTRAIT N'EST PAS UN VOEU, C'EST UNE MESURE

   Sur un ecran de 360 px il reste 328 px utiles. Avec le style des
   onglets du site - 15 px, majuscules, 2 px d'interlettrage - le texte
   seul des tags occupe 350 a 487 px selon la page : aucun remplissage,
   meme nul, ne le ferait tenir. Les memes libelles en 12 px, sans
   majuscules ni interlettrage, tombent a 160-194 px et laissent 17 a
   29 px de remplissage par pilule.

   D'ou la regle : les majuscules et l'interlettrage restent sur
   ordinateur, ou la place le permet, et disparaissent en dessous de
   768 px. Y renoncer sur telephone est le prix de la ligne unique.
   ------------------------------------------------------------------ */

.exo-tags {
	--exo-tags-accent: linear-gradient(135deg, #f56d52, #bb022e);
	--exo-tags-bord: rgba(255, 255, 255, 0.18);
	--exo-tags-texte: rgba(255, 255, 255, 0.72);

	margin: 0 0 1.5rem;
}

/*
 * La barre est rendue masquee et devoilee par le script, une fois les
 * tags sans fiche retires. Sans cela ils apparaitraient le temps d'une
 * image. visibility plutot que display : la hauteur reste reservee, la
 * page ne saute donc pas quand la barre apparait.
 */
.exo-tags--attente {
	visibility: hidden;
}

.exo-tags__ligne {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 8px;
}

.exo-tags__tag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;

	margin: 0;
	padding: 11px 20px;
	border: 1px solid var(--exo-tags-bord);
	border-radius: 999px;
	background: transparent;
	color: var(--exo-tags-texte);

	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;

	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.exo-tags__tag:hover,
.exo-tags__tag:focus-visible {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.exo-tags__tag[aria-pressed="true"] {
	background: var(--exo-tags-accent);
	border-color: transparent;
	color: #fff;
}

/* Le compteur dit d'avance ce qu'on va trouver - ce qu'un onglet ne
   faisait jamais. Il reste discret : c'est une indication, pas une
   donnee a lire. */
.exo-tags__n {
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.55;
}

.exo-tags__n:empty {
	display: none;
}

.exo-tags__pied {
	margin: 1rem 0 0;
	text-align: center;
}

.exo-tags__voir {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.exo-tags__voir:empty {
	display: none;
}

.exo-tags__vide {
	margin: 1.5rem 0 0;
	text-align: center;
	opacity: 0.7;
}

/* ----------------------------------------------------------- telephone */

@media (max-width: 767px) {

	.exo-tags__ligne {
		gap: 6px;

		/*
		 * Filet de securite, et rien de plus. La ligne tient par construction
		 * pour les jeux de tags du site ; ce debordement ne s'active donc
		 * jamais, mais il evite qu'une page plus fournie n'elargisse toute la
		 * mise en page.
		 *
		 * Pas d'accrochage au defilement ici, et overscroll-behavior pour que
		 * le geste ne se propage pas : c'est exactement le defaut des anciens
		 * onglets, ou un balayage horizontal sur les evenements entrainait la
		 * barre avec lui, sans qu'on sache plus quelle zone on commandait.
		 */
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-inline: 2px;
	}

	.exo-tags__ligne::-webkit-scrollbar {
		display: none;
	}

	.exo-tags__tag {
		padding: 9px 12px;
		font-size: 12px;
		letter-spacing: 0;
		text-transform: none;
	}

	/* Le compteur coute une dizaine de pixels par tag : c'est exactement
	   ce qui manque pour tenir sur une ligne. Il saute. */
	.exo-tags__n {
		display: none;
	}
}

/* Quand les tags tiennent, on les recentre : le defilement ci-dessus ne
   doit se declencher que s'il sert vraiment. */
@media (max-width: 767px) {

	.exo-tags__ligne {
		justify-content: safe center;
	}
}

/* ------------------------------------------------- animations reduites */

@media (prefers-reduced-motion: reduce) {

	.exo-tags__tag {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Presentation en carrousel
   ------------------------------------------------------------------
   En grille, trente fiches donnaient une section de 13 000 px sur la
   page d'accueil - la photo, en portrait, pese a elle seule 550 px des
   590 d'une fiche. En rang, la meme section tient sur une hauteur de
   fiche.

   Le defilement est celui du navigateur, sans bibliotheque : la liste
   est deja dans la page, il n'y a rien a initialiser ni a reinitialiser
   quand un tag change la selection.
   ------------------------------------------------------------------ */

.exo-carrousel {
	/*
	 * TROIS FICHES ENTIERES, UN FRAGMENT DE CHAQUE COTE
	 *
	 * Cinq elements sont alors visibles, donc quatre intervalles. La largeur
	 * d'une fiche se deduit : largeur du rang moins les intervalles, divisee
	 * par le nombre de fiches entieres augmente des deux fractions.
	 *
	 *     carte = (100% - (entieres + 1) x ecart) / (entieres + 2 x fraction)
	 *
	 * Changer le nombre de fiches visibles ne demande donc qu'a toucher
	 * --exo-carr-entieres : tout le reste suit, y compris le fondu.
	 */
	--exo-carr-entieres: 3;
	--exo-carr-fraction: 0.25;
	--exo-carr-ecart: 16px;

	--exo-carr-carte: calc(
		(100% - (var(--exo-carr-entieres) + 1) * var(--exo-carr-ecart))
		/ (var(--exo-carr-entieres) + 2 * var(--exo-carr-fraction))
	);

	--exo-carr-frange: calc(var(--exo-carr-carte) * var(--exo-carr-fraction));

	display: flex;
	flex-wrap: nowrap;
	gap: var(--exo-carr-ecart);

	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;

	/*
	 * L'accrochage doit poser la fiche apres la frange, pas contre le bord :
	 * sans ce retrait, la fiche entiere viendrait se coller a gauche et le
	 * fragment precedent disparaitrait.
	 */
	scroll-padding-inline: var(--exo-carr-frange);

	/*
	 * Le geste ne doit pas se propager a la page. C'etait le defaut des
	 * anciens onglets : un balayage horizontal sur les evenements
	 * entrainait la barre d'onglets avec lui, et le doigt ne savait plus
	 * quelle zone il commandait.
	 */
	overscroll-behavior-x: contain;
}

.exo-carrousel::-webkit-scrollbar {
	display: none;
}

/*
 * Le rang s'attrape a la souris. Le curseur l'annonce avant l'essai, et la
 * selection de texte est suspendue pendant le geste : sans cela, tirer sur le
 * rang surlignerait les titres au passage.
 */
@media (hover: hover) {

	.exo-carrousel {
		cursor: grab;
	}

	.exo-carrousel.is-glisse {
		cursor: grabbing;
		user-select: none;
		scroll-snap-type: none;
	}

	.exo-carrousel.is-glisse img {
		-webkit-user-drag: none;
		pointer-events: none;
	}
}

/*
 * Le listing rend une grille par mois. Plutot que de deplacer les fiches,
 * on rend les grilles transparentes a la mise en page : leurs fiches
 * deviennent les elements du meme rang, et le balisage reste intact.
 */
.exo-carrousel .exo-event-listing {
	display: contents;
}

.exo-carrousel .exo-event-cell {
	flex: 0 0 var(--exo-carr-carte);
	scroll-snap-align: start;
}

/* ------------------------------------------------------ fondu des bords */

/*
 * Le fragment s'efface progressivement vers l'exterieur, comme le faisait
 * l'ancien slider - c'est le geste que porte son fichier peek-fade.css. Le
 * fondu couvre exactement la largeur de la frange, donc il grandit avec les
 * fiches sans reglage supplementaire.
 */
.exo-carrousel {
	-webkit-mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--exo-carr-frange),
		#000 calc(100% - var(--exo-carr-frange)),
		transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--exo-carr-frange),
		#000 calc(100% - var(--exo-carr-frange)),
		transparent 100%);
}

/* En butee, il n'y a plus rien a decouvrir de ce cote : effacer le bord y
   ferait passer une fiche entiere pour un fragment. */
.exo-carrousel.is-debut {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--exo-carr-frange)), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--exo-carr-frange)), transparent 100%);
}

.exo-carrousel.is-fin {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--exo-carr-frange));
	mask-image: linear-gradient(to right, transparent 0, #000 var(--exo-carr-frange));
}

.exo-carrousel.is-debut.is-fin {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Un sejour occupait la ligne entiere en grille ; dans un rang il reprend
   la largeur des autres, sans quoi il mangerait tout l'ecran. */
.exo-carrousel .exo-event-cell--sejour {
	grid-column: auto;
}

/*
 * Et il reprend aussi le format portrait des autres fiches. Sa banniere 21:9,
 * pensee pour une ligne entiere, donnait ici une image de 152 px de haut dans
 * une carte de 488 : un bandeau puis un trou. Le script retire de son cote la
 * source large du <picture>, pour que l'image servie soit bien la miniature
 * portrait et non une banniere rognee a l'extreme.
 */
.exo-carrousel .exo-event-cell--sejour .eb-event-thumb {
	aspect-ratio: 384 / 485;
	object-fit: cover;
}

/* ------------------------------------------------- separateurs de mois */

/*
 * Le separateur passe a la verticale : un filet horizontal traversant,
 * avec son libelle centre, n'a plus de sens dans un rang. Il devient un
 * jalon que l'on croise en faisant defiler.
 */
.exo-carrousel .eb-month-separator {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0 4px;
	align-items: center;
	border-left: 1px solid rgba(245, 109, 82, 0.45);
	scroll-snap-align: start;
}

/* Les deux filets extensibles du separateur horizontal. */
.exo-carrousel .eb-month-separator::before,
.exo-carrousel .eb-month-separator::after {
	display: none;
}

.exo-carrousel .eb-month-separator span {
	padding: 0;
	white-space: nowrap;
	writing-mode: vertical-rl;

	/* Sans cette rotation le mois se lirait de haut en bas ; on le veut
	   dans l'autre sens, comme sur une tranche de livre. */
	transform: rotate(180deg);
}

/* ------------------------------------------------------------ fleches */

.exo-carrousel__fleches {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}

.exo-carrousel__fleche {
	width: 38px;
	height: 38px;
	border: 1px solid var(--exo-tags-bord, rgba(255, 255, 255, 0.18));
	border-radius: 999px;
	background: transparent;
	color: var(--exo-tags-texte, rgba(255, 255, 255, 0.72));
	font: 400 18px/1 inherit;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.exo-carrousel__fleche:hover:not(:disabled),
.exo-carrousel__fleche:focus-visible:not(:disabled) {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.exo-carrousel__fleche:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Sur un ecran tactile, le balayage suffit : deux boutons de plus ne
   feraient qu'occuper la place. */
@media (hover: none) {

	.exo-carrousel__fleches {
		display: none;
	}
}

@media (max-width: 767px) {

	/* Une seule fiche entiere, un fragment de chaque cote. */
	.exo-carrousel {
		--exo-carr-entieres: 1;
		--exo-carr-fraction: 0.16;
		--exo-carr-ecart: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.exo-carrousel__fleche {
		transition: none;
	}
}