/*
 * Moteur de recherche du listing des evenements.
 *
 * Les couleurs reprennent les variables du theme quand elles existent, avec un
 * repli explicite : une mise a jour de YOOtheme peut renommer une variable, et le
 * bandeau ne doit pas se retrouver sans contraste pour autant.
 */

.exo-filtres {
	position: relative;
	margin: 0 0 30px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #1f2427;
	background-size: cover;
	background-position: center;
}

/* Voile sombre : le bandeau porte du texte blanc et des curseurs, il lui faut un
   fond lisible quelle que soit l'image deposee. */
.exo-filtres--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 24, 26, 0.72), rgba(20, 24, 26, 0.88));
}

.exo-filtres__contenu {
	position: relative;
	padding: 26px 24px 20px;
	color: #fff;
}

.exo-filtres__titre {
	margin: 0 0 18px;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.exo-filtres__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 26px;
}

@media (max-width: 959px) {
	.exo-filtres__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.exo-filtres__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.exo-filtres__contenu {
		padding: 20px 16px 16px;
	}
}

.exo-filtres__bloc {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.exo-filtres__label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.72);
}

/*
 * Recherche avancee. Repliee, la barre tient sur une ligne - recherche, pays,
 * dates - ce qui suffit a la plupart des visites et permet de poser la barre
 * ailleurs que sur l'agenda sans manger la page. Deployee, elle occupe la
 * grille entiere, sur deux lignes de plus.
 *
 * Le bloc reprend la grille du parent plutot que d'en heriter : un conteneur
 * intermediaire romprait l'alignement des colonnes.
 */
.exo-filtres__avance {
	display: none;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 26px;
}

.exo-filtres--deployee .exo-filtres__avance {
	display: grid;
}

@media (max-width: 959px) {
	.exo-filtres__avance {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.exo-filtres__avance {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

.exo-filtres__bascule {
	/* Centre comme la ligne de criteres qu'il prolonge. */
	display: block;
	margin: 14px auto 0;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.78rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.exo-filtres__bascule:hover {
	color: #fff;
}

.exo-filtres__bascule::after {
	content: " ▾";
	text-decoration: none;
	display: inline-block;
}

.exo-filtres--deployee .exo-filtres__bascule::after {
	content: " ▴";
}

/* Icone d'explication des niveaux, la meme que sur les fiches d'evenement : elle
   ouvre la meme fenetre, declenchee par sa classe. */
.exo-filtres__aide {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	opacity: 0.8;
	transition: opacity 0.15s, transform 0.15s;
}

.exo-filtres__aide:hover {
	opacity: 1;
	transform: scale(1.15);
}

.exo-filtres__aide img {
	display: block;
}

/* ------------------------------------------------------------------ dates */

.exo-filtres__dates {
	display: flex;
	gap: 10px;
}

/* "Du" et "Au" a hauteur du champ plutot qu'au-dessus : la ligne des dates
   s'aligne alors sur les autres criteres, dont aucun n'a de second niveau de
   libelle. */
.exo-filtres__dates label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.72);
}

.exo-filtres__dates label > span {
	flex: 0 0 auto;
}

.exo-filtres__dates input {
	width: 100%;
	min-width: 0;
	padding: 7px 9px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.2;
	/* Le selecteur natif de Chrome dessine son icone en sombre : elle
	   disparaitrait sur ce fond. */
	color-scheme: dark;
}

/* ---------------------------------------------------------- texte libre */

.exo-filtres__texte {
	width: 100%;
	max-width: 15rem;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.2;
}

.exo-filtres__texte::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.exo-filtres__texte:focus {
	outline: none;
	border-color: var(--exo-filtres-actif, #d02144);
	background: rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------------ puces */

.exo-filtres__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exo-puce {
	position: relative;
	cursor: pointer;
}

.exo-puce input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.exo-puce span {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	font-size: 0.82rem;
	line-height: 1.2;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.exo-puce input:checked + span {
	background: var(--exo-filtres-actif, #d02144);
	border-color: var(--exo-filtres-actif, #d02144);
	color: #fff;
	font-weight: 600;
}

.exo-puce input:focus-visible + span {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ------------------------------------------------------- barres graduees */

.exo-plage {
	position: relative;
	padding-top: 22px;
}

.exo-plage__valeur {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0.85rem;
	font-weight: 600;
}

.exo-plage__piste {
	position: relative;
	height: 4px;
	margin: 8px 0 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.25);
}

.exo-plage__actif {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 2px;
	background: var(--exo-filtres-actif, #d02144);
}

/*
 * Deux <input type="range"> superposes sur la meme piste. Chacun garde sa
 * mecanique native - clavier, pas, accessibilite - et seule la poignee reste
 * cliquable : sans cela, le curseur du dessus intercepterait tous les clics
 * destines a l'autre.
 */
.exo-plage__curseur {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.exo-plage__curseur::-webkit-slider-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border: 3px solid var(--exo-filtres-actif, #d02144);
	border-radius: 50%;
	background: #fff;
	cursor: grab;
	appearance: none;
	-webkit-appearance: none;
}

.exo-plage__curseur::-moz-range-thumb {
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border: 3px solid var(--exo-filtres-actif, #d02144);
	border-radius: 50%;
	background: #fff;
	cursor: grab;
}

.exo-plage__curseur::-webkit-slider-runnable-track {
	background: none;
	border: 0;
}

.exo-plage__curseur::-moz-range-track {
	background: none;
	border: 0;
}

.exo-plage__curseur:focus-visible::-webkit-slider-thumb {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- pied */

.exo-filtres__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.exo-filtres__compteur {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.exo-filtres__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Bouton du pied de barre, page agenda : sobre, il n'est pas l'action
   principale de la page. */
.exo-filtres__pied .exo-filtres__reset {
	padding: 7px 15px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: none;
	color: #fff;
	font-size: 0.8rem;
	cursor: pointer;
	transition: background-color 0.15s;
}

.exo-filtres__pied .exo-filtres__reset:hover {
	background: rgba(255, 255, 255, 0.14);
}

/*
 * Les deux boutons reprennent le style du site - carres, en majuscules, degrade
 * primaire - via les classes du theme. On ne fixe ici que leur taille, un bouton
 * de barre de recherche n'ayant pas a peser autant qu'un appel a l'action de
 * page.
 */
.exo-filtres__actions .uk-button {
	padding: 0 18px;
	font-size: 0.72rem;
	line-height: 34px;
}

.exo-filtres__voir[hidden],
.exo-filtres__compteur[hidden] {
	display: none;
}

/* ------------------------------------------------------- aucun resultat */

.exo-filtres__vide {
	margin: 24px 0 30px;
	padding: 28px 22px;
	border: 1px dashed rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	text-align: center;
}

.exo-filtres__vide[hidden] {
	display: none;
}

.exo-filtres__vide-titre {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
}

/* Le bouton de l'etat vide reprend lui aussi le style du site : on ne lui garde
   qu'un peu d'air au-dessus. */
.exo-filtres__vide .uk-button {
	margin-top: 12px;
}

/* Un mois dont toutes les fiches sont masquees perd son separateur : garder un
   titre de mois seul au-dessus du vide donnerait une page a trous. */
.eb-month-separator[hidden],
.exo-event-cell[hidden] {
	display: none !important;
}


/* ==========================================================================
   Barre compacte
   --------------------------------------------------------------------------
   Variante du module, pensee pour etre posee dans une page - l'accueil
   aujourd'hui. Une seule ligne centree, fond transparent pour laisser voir
   celui du site, et un lien qui renvoie vers l'agenda pour la recherche
   complete. La page agenda, elle, garde la presentation d'origine.
   ========================================================================== */

.exo-filtres--compacte {
	background: none;
	border-radius: 0;
	margin: 0;
}

.exo-filtres--compacte.exo-filtres--image::before {
	content: none;
}

.exo-filtres--compacte .exo-filtres__grille {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 26px;
}

/* Libelle a gauche de son champ : la barre tient sur une ligne. */
.exo-filtres--compacte .exo-filtres__bloc {
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * Libelles de la barre compacte : la typographie de la ligne d'avis du header
 * ("Qualifies d'EXCELLENTS 5 sur 5..."), soit Josefin Sans en italique gras,
 * 12 px, interlettrage 2 px. Les deux vivent sur la meme page d'accueil.
 */
.exo-filtres--compacte .exo-filtres__label,
.exo-filtres--compacte .exo-filtres__dates label > span {
	font-family: "Josefin Sans", sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.exo-filtres--compacte .exo-filtres__label {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.exo-filtres--compacte .exo-filtres__bloc > *:not(.exo-filtres__label) {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Menu deroulant des pays. Deux etats a habiller separement : le controle
 * ferme, qui vit sur le fond sombre du site, et la liste ouverte, que le
 * systeme dessine sur fond blanc - d'ou du texte sombre dans les options, sans
 * quoi elles etaient blanches sur blanc.
 */
.exo-filtres__pays {
	min-width: 9rem;
	padding: 7px 9px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.2;
	color-scheme: dark;
}

.exo-filtres__pays option {
	color: #1f2427;
	background-color: #fff;
}

/* Boutons : action principale au style du site, reinitialisation en second
   plan - contour et texte blancs. */
.exo-filtres--compacte .exo-filtres__actions .uk-button {
	padding: 0 18px;
	font-size: 0.72rem;
	line-height: 34px;
}

.exo-filtres__reset--contour {
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: none;
	color: #fff;
	text-transform: uppercase;
	transition: background-color 0.15s, border-color 0.15s;
}

.exo-filtres__reset--contour:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.exo-filtres--compacte .exo-filtres__bascule {
	/* Rapproche de la ligne de criteres qu'il prolonge. */
	margin-top: 6px;
	text-decoration: underline;
}

/* Ce lien mene ailleurs : pas de chevron de depliage. */
.exo-filtres__avancee-lien::after {
	content: none;
}

/* Le filet separait le pied du reste : sans bouton ni compteur a isoler, il ne
   restait qu'un trait blanc en travers de la barre. */
.exo-filtres--compacte .exo-filtres__pied {
	justify-content: center;
	margin-top: 6px;
	padding-top: 0;
	border-top: 0;
}