/*
 * Couche d'animation du site.
 *
 * Deux principes : rien ne bouge tant que ce n'est pas visible à l'écran, et
 * tout se fige si la personne a désactivé les animations dans son système.
 */

/*
 * Apparition au défilement — esprit « flux d'air ».
 *
 * Le bloc arrive de côté en glissant, légèrement flou, et se pose. La dérive
 * change de sens d'une section à l'autre (`--qv-sens`), pour donner un
 * mouvement de courant plutôt qu'un défilé uniforme. Courbe très amortie :
 * élan franc au départ, arrivée douce, comme un souffle qui retombe.
 */
.qv-anim {
	opacity: 0;
	transform: translate3d(calc(var(--qv-sens, 1) * 26px), 10px, 0);
	filter: blur(3px);
	transition:
		opacity .62s cubic-bezier(.16, 1, .3, 1),
		transform .68s cubic-bezier(.16, 1, .3, 1),
		filter .5s ease-out;
	transition-delay: var(--qv-delai, 0ms);
	will-change: opacity, transform;
}

.qv-anim.est-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	filter: blur(0);
}

/*
 * Sur petit écran la dérive latérale est plus courte — la place manque — et le
 * flou saute : il coûte cher à composer sur mobile pour un gain invisible.
 */
@media (max-width: 767px) {
	.qv-anim {
		transform: translate3d(calc(var(--qv-sens, 1) * 14px), 12px, 0);
		filter: none;
		transition:
			opacity .5s cubic-bezier(.16, 1, .3, 1),
			transform .56s cubic-bezier(.16, 1, .3, 1);
	}

	.qv-anim.est-visible {
		filter: none;
	}
}

/* Une fois l'apparition jouée, on rend la couche au navigateur. */
.qv-anim.est-posee {
	will-change: auto;
}

/* Les cartes montent d'un cran au survol. */
.qv-carte-formation,
.qv-membre,
.qv-ressource,
.qv-comite__fiche {
	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background-color .18s ease,
		border-color .18s ease;
}

.qv-carte-formation:hover,
.qv-membre:hover,
.qv-ressource:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(13, 31, 53, .09);
}

.qv-comite__fiche:hover {
	background: #16294a;
}

/* La photo d'une session respire légèrement au survol de la ligne. */
.qv-session__image img {
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.qv-session:hover .qv-session__image img {
	transform: scale(1.04);
}

/* Les flèches avancent. */
.qv-ressource__bouton span,
.qv-evenement__bouton span {
	display: inline-block;
	transition: transform .18s ease;
}

.qv-ressource__bouton:hover span,
.qv-evenement__bouton:hover span {
	transform: translateX(4px);
}

.elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

.elementor-button-icon {
	transition: transform .18s ease;
}

/*
 * En-tête figé.
 *
 * Elementor épingle le conteneur en `position: fixed` avec la largeur qu'il a
 * mesurée. Sur un conteneur en mode « boîte », l'en-tête cesse alors de couvrir
 * toute la largeur : il se détache en rectangle flottant, avec la page visible
 * de part et d'autre. On lui rend la pleine largeur.
 */
.elementor-location-header > .e-con.e-parent.elementor-sticky--active {
	right: 0;
	left: 0;
	width: 100% !important;
	max-width: 100% !important;
}

/* L'ombre n'apparaît qu'une fois la page défilée. */
.qv-entete-defilee {
	box-shadow: 0 1px 12px rgba(13, 31, 53, .08);
	transition: box-shadow .25s ease;
}

/* Compteurs de la section mission. */
.qv-compteur {
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.qv-anim,
	.qv-anim.est-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.qv-carte-formation,
	.qv-membre,
	.qv-ressource,
	.qv-session__image img,
	.elementor-button-icon {
		transition: none;
	}

	.qv-carte-formation:hover,
	.qv-membre:hover,
	.qv-ressource:hover,
	.qv-session:hover .qv-session__image img {
		transform: none;
	}
}

/* États de focus et confort tactile sur tous les éléments cliquables maison. */

.qv-carte-formation,
.qv-ressource__bouton,
.qv-ressource__telecharger,
.qv-membre__situer,
.qv-evenement__bouton,
.qv-session__titre a,
.qv-annuaire__type {
	touch-action: manipulation;
}

.qv-carte-formation:focus-visible,
.qv-ressource__bouton:focus-visible,
.qv-ressource__telecharger:focus-visible,
.qv-membre__situer:focus-visible,
.qv-evenement__bouton:focus-visible,
.qv-session__titre a:focus-visible,
.qv-comite__fiche a:focus-visible {
	outline: 2px solid #1976b8;
	outline-offset: 2px;
}

.qv-evenement__bouton:focus-visible {
	outline-color: #fff;
}

/* Bouton « Situer sur la carte » des fiches membres. */
.qv-membre__situer {
	align-self: flex-start;
	margin-top: 4px;
	padding: 8px 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #1976b8;
	cursor: pointer;
	background: none;
	border: 0;
	transition: color .15s ease;
}

.qv-membre__situer:hover,
.qv-membre__situer:focus-visible {
	color: #1565a0;
	background: none;
}