/**
 * FAJAR — Favoris
 *
 * Styles uniquement pour le bouton favori.
 * Ne modifie pas la structure ni les dimensions
 * des cartes existantes.
 */


/*
|--------------------------------------------------------------------------
| Bouton favori
|--------------------------------------------------------------------------
*/

.fajar-favorite-button {
	position: absolute;
	top: 12px;
	right: 12px;

	width: 42px;
	height: 42px;

	padding: 0;
	margin: 0;

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

	border: 0;
	border-radius: 50%;

	background: rgba(0, 0, 0, 0.62);

	color: #ffffff;

	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;

	cursor: pointer;

	z-index: 50;

	opacity: 1;
	visibility: visible;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}


/*
|--------------------------------------------------------------------------
| Icône
|--------------------------------------------------------------------------
*/

.fajar-favorite-button .fajar-favorite-icon {
	display: block;

	width: 100%;
	height: 100%;

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

	line-height: 1;

	pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Survol
|--------------------------------------------------------------------------
*/

.fajar-favorite-button:hover {
	background: rgba(0, 0, 0, 0.82);

	transform: scale(1.06);

	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}


/*
|--------------------------------------------------------------------------
| Clic
|--------------------------------------------------------------------------
*/

.fajar-favorite-button:active {
	transform: scale(0.94);
}


/*
|--------------------------------------------------------------------------
| Favori actif
|--------------------------------------------------------------------------
*/

.fajar-favorite-button.is-favorite {
	background: rgba(0, 0, 0, 0.72);
}


/*
|--------------------------------------------------------------------------
| Icône active
|--------------------------------------------------------------------------
*/

.fajar-favorite-button.is-favorite
.fajar-favorite-icon {
	font-size: 23px;
}


/*
|--------------------------------------------------------------------------
| Focus clavier
|--------------------------------------------------------------------------
*/

.fajar-favorite-button:focus {
	outline: none;
}


.fajar-favorite-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}


/*
|--------------------------------------------------------------------------
| État pendant la requête AJAX
|--------------------------------------------------------------------------
*/

.fajar-favorite-button.is-loading {
	pointer-events: none;

	cursor: wait;

	opacity: 0.65;

	transform: scale(0.96);
}


/*
|--------------------------------------------------------------------------
| Empêcher le clic du bouton de provoquer
| le clic du lien de la carte
|--------------------------------------------------------------------------
*/

.fajar-favorite-button {
	-webkit-tap-highlight-color: transparent;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.fajar-favorite-button {
		top: 10px;
		right: 10px;

		width: 38px;
		height: 38px;

		font-size: 22px;
	}

	.fajar-favorite-button.is-favorite
	.fajar-favorite-icon {
		font-size: 21px;
	}

}