/* ==========================================================================
   Armorik Parallax Bottle — module Divi (parallaxe désynchronisé)

   La section défile normalement avec la page. La profondeur vient des
   vitesses différentes appliquées par le JS :
     - .apbx-band          : le fond, à la vitesse de la page ;
     - .apbx-band-content  : texte + tampon, en retard sur le fond ;
     - .apbx-bottle        : plus rapide que la page, elle passe devant ;
     - .apbx-reflect       : suit la bouteille à mi-vitesse + la souris.
   ========================================================================== */

.apbx-section {
	position: relative;
	min-height: var(--apbx-band-h, 62vh);
	display: flex;
	align-items: center;
	justify-content: center;
	/* La bouteille dépasse de la bande en haut et en bas */
	overflow: visible;
}

/* --------------------------------------------------------------------------
   Couche 1 — bande d'arrière-plan (solidaire de la page)
   -------------------------------------------------------------------------- */

.apbx-band {
	position: relative;
	width: 100%;
	height: var(--apbx-band-h, 62vh);
	background-color: var(--apbx-band-color, #9a3b1e);
	background-image: var(--apbx-band-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	/* Le contenu désynchronisé peut glisser hors de la bande sans
	   apparaître au-dessus des sections voisines */
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Couche 2 — texte + tampon, déplacés ensemble par le JS
   -------------------------------------------------------------------------- */

.apbx-band-content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
}

.apbx-text {
	position: relative;
	z-index: 2;
	max-width: 72%;
	margin: 0 auto;
	text-align: center;
	font-style: italic;
	color: var(--apbx-text-color, #e07a4d);
}

.apbx-text p {
	margin: 0;
	padding: 0;
	color: inherit;
}

.apbx-stamp {
	position: absolute;
	left: var(--apbx-stamp-x, 78%);
	top: var(--apbx-stamp-y, 30%);
	width: min(var(--apbx-stamp-w, 270px), 40vw);
	transform: translate(-50%, -50%);
	z-index: 2;
	pointer-events: none;
	line-height: 0;
}

.apbx-stamp img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.apbx-stamp {
		width: min(calc(var(--apbx-stamp-w, 270px) * 0.6), 34vw);
	}
}

/* --------------------------------------------------------------------------
   Couches 3 & 4 — reflet et bouteille (déplacées par le JS)
   -------------------------------------------------------------------------- */

.apbx-layer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	will-change: transform;
	line-height: 0;
}

.apbx-layer img {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
}

/* Reflet : derrière la bouteille, devant la bande */
.apbx-reflect {
	z-index: 3;
	left: var(--apbx-reflect-x, 50%);
	height: var(--apbx-bottle-h, 80vh);
	opacity: var(--apbx-reflect-opacity, 0.9);
	mix-blend-mode: screen; /* fond la flamme/le halo dans le décor */
}

/* Bouteille : au premier plan, elle passe devant la scène */
.apbx-bottle {
	z-index: 4;
	height: var(--apbx-bottle-h, 80vh);
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.22));
}

/* --------------------------------------------------------------------------
   Accessibilité — mouvement réduit : aucune animation, tout est posé
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.apbx-band-content,
	.apbx-layer {
		transform: translate(0, 0);
	}

	.apbx-layer {
		transform: translate(-50%, -50%);
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.apbx-text {
		max-width: 88%;
	}
}