.animated-image-stack {
	position: relative;
	min-height: 600px; /* Hauteur minimale pour accueillir toutes les images */
	width: 100%;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	margin: 20px 0;
	background: #fff;
	padding: 30px;
	box-sizing: border-box;
	border-radius: 12px; /* Optionnel */
	overflow: hidden; /* Pour masquer ce qui dépasse */
	border: 4px solid #fff; /* Bordure blanche visible si le fond autour n'est pas blanc */
	/* Pour tester, tu peux mettre une couleur temporaire : */
	/* border: 4px solid #ccc; */
}

.animated-image-stack.no-bg {
	background: transparent;
	border: none;
}

.animated-image-stack.no-bg::before {
	content: "";
	display: none;
}

.animated-image-stack.visible {
	opacity: 1;
	transform: translateY(0);
}

.stack-image {
	position: absolute;
	transition: all 0.8s ease;
	opacity: 0;
	transform: translateY(30px) scale(0.9);
	/* 
	 * Les positions (top, right, bottom, left) et 
	 * dimensions (width, height) sont définies inline via ACF
	 */
}

.stack-image.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.stack-image img,
.stack-image svg {
	max-width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

/* 
 * Supprimer les positionnements par défaut qui pourraient interférer
 * avec les valeurs définies dans ACF
 */

.animated-image-stack::before {
	content: "";
	position: absolute;
	z-index: 20;
	pointer-events: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Crée un cadre blanc de 30px qui "mange" les bords */
	border: 30px solid #fff;
	box-sizing: border-box;
}