
/* --- WRAPPER DE BASE --- */
.hsp-wrap {
	display: inline-block;
	position: relative;
	overflow: hidden;
	line-height: 0;
	vertical-align: top;
	border-radius: var(--hsp-radius, 14px);
	transform: translateZ(0); /* Hardware Acceleration */
}

/* Image principale */
.hsp-wrap img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hsp-radius, 14px);
	transition: transform var(--hsp-speed, 0.5s) ease, filter var(--hsp-speed, 0.5s) ease;
}

/* --- PSEUDO-ELEMENT (IMAGE DE SURVOL) --- */
.hsp-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hsp-hover-url, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--hsp-radius, 14px);
	
	/* État initial : Invisible */
	opacity: 0;
	
	/* Transition dynamique */
	transition: all var(--hsp-speed, 0.5s) ease-in-out;
	
	pointer-events: none;
	z-index: 2;
}

/* --- ANIMATION 1: ZOOM & FADE --- */
.hsp-anim-zoom:hover img, .hsp-anim-zoom.hsp-active img {
	transform: scale(1.1);
}
.hsp-anim-zoom:hover::after, .hsp-anim-zoom.hsp-active::after {
	opacity: 1;
}

/* --- ANIMATION 2: SIMPLE FADE --- */
.hsp-anim-fade:hover::after, .hsp-anim-fade.hsp-active::after {
	opacity: 1;
}

/* --- ANIMATION 3: SLIDE UP --- */
.hsp-anim-slide-up::after {
	opacity: 1; /* Toujours visible mais caché en bas */
	transform: translateY(100%);
}
.hsp-anim-slide-up:hover::after, .hsp-anim-slide-up.hsp-active::after {
	transform: translateY(0);
}

/* --- ANIMATION 4: SLIDE LEFT --- */
.hsp-anim-slide-left::after {
	opacity: 1;
	transform: translateX(100%);
}
.hsp-anim-slide-left:hover::after, .hsp-anim-slide-left.hsp-active::after {
	transform: translateX(0);
}

/* --- ANIMATION 5: BLUR REVEAL --- */
.hsp-anim-blur img {
	/* Image du dessus floute l'image du dessous */
}
.hsp-anim-blur:hover img, .hsp-anim-blur.hsp-active img {
	filter: blur(5px);
	opacity: 0.8;
}
.hsp-anim-blur:hover::after, .hsp-anim-blur.hsp-active::after {
	opacity: 1;
}

/* Fix Elementor */
.hsp-elementor-container img { max-width: 100%; }
