/**
 * Elementor Scroll Section — Styles de base
 *
 * Architecture 3 couches :
 *   .ess-wrapper        → réserve l'espace de scroll (height = frame + overflow)
 *   .ess-sticky-frame   → cadre visible, épinglé en sticky
 *   .ess-scroll-content → contenu animé via translateY
 */

/* =========================================
   1. Couche wrapper — réserve l'espace
   ========================================= */

.ess-wrapper {
	position: relative;
	width: 100%;
	/* La hauteur est calculée et injectée par JS */
}

/* =========================================
   2. Couche sticky-frame — cadre épinglé
   ========================================= */

.ess-sticky-frame {
	--ess-frame-height: 100vh;

	position: relative;
	width: 100%;
	height: var( --ess-frame-height );
	overflow: hidden;
}

/* =========================================
   3. Couche scroll-content — contenu animé
   ========================================= */

.ess-scroll-content {
	position: relative;
	width: 100%;
	/* translateY injecté par JS */
}

/* Wrapper par section — créé pour chaque item du repeater */
.ess-section-item {
	width: 100%;
}

/* =========================================
   4. Mode normal — même lock que slide, translateY continu
   ========================================= */

/* =========================================
   5. État désactivé (.ess-disabled)
      Comportement conteneur normal
   ========================================= */

.ess-wrapper.ess-disabled {
	height: auto !important; /* override la hauteur JS */
}

.ess-wrapper.ess-disabled .ess-sticky-frame {
	position: relative;
	top: auto;
	height: auto;
	overflow: visible;
}

.ess-wrapper.ess-disabled .ess-scroll-content {
	transform: none !important; /* override le transform JS */
	will-change: auto;
}

/* =========================================
   5. Mode éditeur Elementor (.ess-editor-mode)
      Scrollbar native dans l'iframe éditeur
   ========================================= */

.ess-wrapper.ess-editor-mode .ess-sticky-frame {
	position: relative;
	top: auto;
	overflow-y: auto;
	height: var( --ess-frame-height );
}

.ess-wrapper.ess-editor-mode .ess-scroll-content {
	transform: none !important;
	will-change: auto;
}

/* =========================================
   6. Indicateur de scroll (gradient fade bas)
   ========================================= */

.ess-scroll-indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient( to top, var( --ess-indicator-color, rgba( 0, 0, 0, 0.3 ) ) 0%, transparent 100% );
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.3s ease;
	z-index: 2;
}

.ess-scroll-indicator.ess-indicator-hidden {
	opacity: 0;
}

/* =========================================
   7. Badge éditeur
   ========================================= */

.ess-editor-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba( 0, 120, 230, 0.85 );
	color: #fff;
	font-size: 11px;
	font-family: sans-serif;
	font-weight: 600;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 3px;
	pointer-events: none;
	z-index: 10;
	user-select: none;
}

/* =========================================
   8. Placeholder drag & drop éditeur
   ========================================= */

.ess-editor-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	border: 2px dashed rgba( 0, 0, 0, 0.2 );
	border-radius: 4px;
	color: rgba( 0, 0, 0, 0.4 );
	font-size: 14px;
	font-family: sans-serif;
	pointer-events: none;
}

/* =========================================
   7. Accessibilité — prefers-reduced-motion
      Le JS désactive aussi le widget, mais
      CSS comme filet de sécurité.
   ========================================= */

@media ( prefers-reduced-motion: reduce ) {
	.ess-wrapper {
		height: auto !important;
	}

	.ess-sticky-frame {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
	}

	.ess-scroll-content {
		transform: none !important;
		will-change: auto;
	}
}