/*
 * Barre d'inscription fixe en bas d'ecran, sur les fiches d'evenement.
 * plg_system_exostickycta
 *
 * ---------------------------------------------------------------------------
 * POINT DE BASCULE : la barre n'existe que sous 768 px. Pour le deplacer, il
 * suffit de changer les deux "max-width: 767px" ci-dessous - c'est le seul
 * endroit ou cette valeur est ecrite, le script ne la connait pas.
 * ---------------------------------------------------------------------------
 *
 * Le bouton reprend uk-button uk-button-primary du theme : couleur, graisse,
 * arrondi et etats de survol viennent de la, rien n'est redefini ici. On ne
 * regle que ce que le contexte impose - hauteur tactile et largeur minimale.
 */

.exo-sticky-cta {
	display: none;
}

@media (max-width: 767px) {

	.exo-sticky-cta {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 980;

		display: flex;
		align-items: center;
		gap: 12px;

		box-sizing: border-box;

		/*
		 * Le bouton WhatsApp flotte a 20 px du bord gauche et mesure 65 px : il
		 * recouvrirait la date et le prix. Plutot que de le deplacer - il est a
		 * cet endroit sur tout le site - on lui laisse son coin, et les
		 * informations viennent se ranger contre le bouton d'inscription.
		 */
		padding: 10px 14px 10px 95px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));

		/* Le noir de la barre superieure du site, pas un noir de plus. */
		background: #141110;
		box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.28);

		transform: translateY(0);
		transition: transform 240ms ease;

		/*
		 * REGLAGE : de combien le libelle des boutons descend sous leur milieu
		 * geometrique. Augmenter pour le descendre, 0 pour le centrer exactement.
		 * Un seul endroit, valable pour le bouton comme pour l'etiquette d'un
		 * evenement complet - sans quoi les deux etats ne s'aligneraient plus
		 * entre eux.
		 *
		 * Valeur choisie en grossissant la barre trois fois et en tracant le
		 * milieu exact du bouton : a 4 px l'encre passait entierement sous le
		 * trait, a 0 elle l'enjambait. Pour memoire, les autres boutons du site
		 * portent leur libelle 1,5 px au-dessus de leur milieu.
		 */
		--exo-cta-descente: 1px;
	}

	/* Repliee : le bouton principal de la fiche est encore a l'ecran, ou le
	   script n'a pas encore rendu la main. */
	.exo-sticky-cta.is-tucked {
		transform: translateY(100%);
	}

	/* --------------------------------------------------------------- infos */

	.exo-sticky-cta__info {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.25;
		text-align: right;
	}

	.exo-sticky-cta__info p {
		margin: 0;
	}

	.exo-sticky-cta__when {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.86);

		/* Un lieu long ne doit ni pousser le bouton ni provoquer de defilement
		   horizontal : il se coupe proprement. */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.exo-sticky-cta__sep {
		margin: 0 4px;
		opacity: 0.45;
	}

	.exo-sticky-cta__price,
	.exo-sticky-cta__left {
		font-size: 15px;
		font-weight: 700;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.exo-sticky-cta__from {
		font-size: 12px;
		font-weight: 400;
		text-transform: lowercase;
		opacity: 0.7;
	}

	/* Rarete : l'orange du site, seule couleur de la barre. */
	.exo-sticky-cta__left {
		color: #f56d52;
	}

	/* -------------------------------------------------------------- bouton */

	/*
	 * Les regles du bouton sont prefixees par la barre - deux classes - et non
	 * ecrites seules.
	 *
	 * Le bouton porte aussi uk-button, dont le theme fixe la marge et la hauteur
	 * de ligne avec une seule classe, donc a specificite egale. Or la feuille de
	 * ce plugin est chargee en septieme position sur les quatre-vingt-seize de la
	 * page, bien avant theme.css : a egalite, c'est le dernier arrive qui gagne,
	 * et le theme effacait ces reglages. Deux classes mettent la question hors de
	 * portee de l'ordre de chargement, qui n'est pas garanti.
	 */

	/*
	 * Centrage vertical du libelle.
	 *
	 * Josefin Sans place ses capitales haut dans le cadran : mesure faite sur les
	 * pixels reellement dessines, l'encre de "INSCRIPTION" monte a 9,17 px
	 * au-dessus de la ligne de base et n'en descend que de 0,17. Son milieu optique
	 * se trouve donc 3 px au-dessus du milieu du bouton, et un centrage geometrique
	 * - par la hauteur de ligne ou par flex - laisse le libelle visiblement remonte.
	 *
	 * On centre par flex, puis on rattrape avec une marge haute : celle-ci reduit
	 * la zone de contenu tout en la decalant, si bien que la ligne descend de la
	 * moitie de la marge. Il faut 0,75 em pour annuler le decalage de la police -
	 * mesure faite, cela met l'encre exactement au milieu - puis deux fois la
	 * descente voulue par-dessus.
	 *
	 * Les 0,75 em sont en em parce qu'ils compensent la police et suivent donc son
	 * corps ; la descente est en pixels parce qu'elle repond a l'oeil et non au
	 * calcul. Une capitale sans jambage parait toujours haute lorsqu'elle est
	 * exactement centree, l'oeil attendant sous elle la place d'un jambage qui ne
	 * vient pas.
	 */
	.exo-sticky-cta .exo-sticky-cta__button {
		flex: 0 0 auto;

		display: inline-flex;
		align-items: center;
		justify-content: center;

		/* 44 px : le minimum d'une cible tactile, pas moins. */
		min-height: 44px;
		line-height: 1;
		padding: calc(0.75em + var(--exo-cta-descente) * 2) 22px 0;
		white-space: nowrap;
	}

	/* Complet ou ferme : une etiquette, pas un bouton. Rien a cliquer, donc
	   rien qui ressemble a un bouton. */
	.exo-sticky-cta .exo-sticky-cta__state {
		flex: 0 0 auto;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		/* Meme compensation que le bouton : meme police. */
		padding: calc(0.75em + var(--exo-cta-descente) * 2) 18px 0;

		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.65);
		border: 1px solid rgba(255, 255, 255, 0.25);
		border-radius: 4px;
	}

	/* ------------------------------------------------- place laissee libre */

	/*
	 * La barre est fixe : sans cette reserve, elle recouvrirait la fin de la
	 * page - dernier paragraphe, lien, pied de page. La valeur suit la hauteur
	 * reelle mesuree par le script, et retombe sur une estimation sure.
	 */
	body:has(.exo-sticky-cta),
	body.has-exo-sticky-cta {
		padding-bottom: var(--exo-sticky-cta-height, 82px);
	}

	/* Ecrans tres etroits : on resserre, le bouton reste intouche. */
	@media (max-width: 360px) {

		/*
		 * A 320 px il ne reste que 320 - 88 de reserve - le bouton : chaque
		 * pixel compte. On les prend sur les espacements et sur le bouton, jamais
		 * sur la reserve du bouton WhatsApp, dont la taille ne depend pas de
		 * l'ecran, ni sur la hauteur tactile.
		 */
		.exo-sticky-cta {
			gap: 6px;
			padding-right: 8px;
			padding-left: 88px;
		}

		.exo-sticky-cta__when {
			font-size: 11px;
		}

		.exo-sticky-cta__price,
		.exo-sticky-cta__left {
			font-size: 14px;
		}

		.exo-sticky-cta .exo-sticky-cta__button,
		.exo-sticky-cta .exo-sticky-cta__state {
			padding-left: 12px;
			padding-right: 12px;
		}

		.exo-sticky-cta .exo-sticky-cta__button {
			min-width: 0;
		}
	}

	/*
	 * Paysage sur telephone : la hauteur utile est faible, la barre se fait
	 * plus discrete pour ne pas manger le contenu.
	 */
	@media (orientation: landscape) and (max-height: 460px) {

		.exo-sticky-cta {
			padding-top: 6px;
			padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
		}

		.exo-sticky-cta .exo-sticky-cta__button,
		.exo-sticky-cta .exo-sticky-cta__state {
			min-height: 44px;
		}
	}
}

/* Reglage systeme "reduire les animations" : la barre apparait sans glisser. */
@media (prefers-reduced-motion: reduce) {

	.exo-sticky-cta {
		transition: none;
	}
}