/* Hero : les deux captures flottent de part et d'autre du champ d'audit.

   Le mouvement est volontairement lent et de faible amplitude — il doit se remarquer
   sans capter l'attention, puisque le seul point d'action de l'écran reste le champ
   de recherche. Les deux côtés ont des durées et des déphasages différents : synchronisés,
   ils donneraient l'impression d'un bloc qui monte et descend, pas de deux objets posés.

   La rotation est portée par le conteneur et répétée dans chaque étape des keyframes :
   une animation sur `transform` écrase la valeur statique, elle ne s'y ajoute pas. */

/* Les captures débordent volontairement du cadre de lecture : sans cette règle,
   ce dépassement ouvre une barre de défilement horizontale sur toute la page. */
html, body { overflow-x: hidden; }

.vl-hero {
	/* Un plein écran, hauteur d'en-tête déduite, pour que le hero tienne en une vue. */
	min-height: calc(100vh - 88px);
	/* Sur mobile, svh évite le saut dû à la barre d'adresse qui se rétracte. */
	min-height: calc(100svh - 88px);
}

.vl-float {
	will-change: transform;
}

.vl-float .elementor-widget-image img {
	border-radius: 12px;
	box-shadow: 0 22px 55px rgba(51, 51, 51, 0.18);
	display: block;
}

.vl-float--avant {
	transform: rotate(-7deg);
	animation: vl-flotte-avant 7s ease-in-out infinite;
}

.vl-float--apres {
	transform: rotate(6deg);
	animation: vl-flotte-apres 8.5s ease-in-out infinite;
	animation-delay: -2.5s;
}

@keyframes vl-flotte-avant {
	0%, 100% { transform: rotate(-7deg) translateY(0); }
	50%      { transform: rotate(-7deg) translateY(-16px); }
}

@keyframes vl-flotte-apres {
	0%, 100% { transform: rotate(6deg) translateY(0); }
	50%      { transform: rotate(6deg) translateY(-20px); }
}

/* L'étiquette suit l'inclinaison de sa capture : posée droite, elle trahirait le trucage. */
.vl-float .elementor-widget-heading {
	margin-bottom: 6px;
}

/* --- Grand écran : les captures sortent du flux ---------------------------

   En flux, les trois colonnes se partagent la largeur du cadre de lecture et le
   contenu central se retrouve à l'étroit entre les deux captures. En absolu, les
   captures s'ancrent sur les bords de la fenêtre, débordent légèrement, et laissent
   au champ d'audit toute la largeur du centre.

   Le conteneur boîté d'Elementor est `position: relative` par défaut : on le repasse
   en `static` pour que l'ancrage se fasse sur la section pleine largeur, pas sur les
   1180 px du cadre de lecture. */
@media (min-width: 1025px) {
	.vl-hero {
		position: relative;
	}

	.vl-hero > .e-con-inner {
		position: static;
	}

	.vl-hero .vl-float {
		position: absolute;
		/* Centrage vertical sans transform : la propriété est déjà prise par le flottement. */
		top: 0;
		bottom: 0;
		height: -moz-fit-content;
		height: fit-content;
		margin-top: auto;
		margin-bottom: auto;
	}

	.vl-hero .vl-float--avant { left: -120px; }
	.vl-hero .vl-float--apres { right: -120px; }
}

/* Au-delà de 1600 px, la fenêtre est assez large : les captures rentrent dans le cadre
   plutôt que de se faire rogner davantage. */
@media (min-width: 1600px) {
	.vl-hero .vl-float--avant { left: -40px; }
	.vl-hero .vl-float--apres { right: -40px; }
}

@media (max-width: 1024px) {
	.vl-hero { min-height: 0; }

	.vl-float--avant { transform: rotate(-4deg); animation-name: vl-flotte-avant-mobile; }
	.vl-float--apres { transform: rotate(4deg); animation-name: vl-flotte-apres-mobile; }

	.vl-float .elementor-widget-image img { box-shadow: 0 12px 30px rgba(51, 51, 51, 0.14); }

	@keyframes vl-flotte-avant-mobile {
		0%, 100% { transform: rotate(-4deg) translateY(0); }
		50%      { transform: rotate(-4deg) translateY(-8px); }
	}

	@keyframes vl-flotte-apres-mobile {
		0%, 100% { transform: rotate(4deg) translateY(0); }
		50%      { transform: rotate(4deg) translateY(-10px); }
	}
}

/* Un visiteur qui a demandé moins d'animation garde l'inclinaison, mais plus le mouvement. */
@media (prefers-reduced-motion: reduce) {
	.vl-float--avant,
	.vl-float--apres {
		animation: none;
	}
}