/* ==========================================================================
   Hero Video Lock — Feuille de style v4.7
   Auteur : Comm'On — https://agencecommon.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Structure principale — scroll track + sticky
   -------------------------------------------------------------------------- */

.hpw-hero-wrapper {
	position: relative;
	width: 100%;
}

.hpw-scroll-track {
	height: 250vh; /* Valeur par défaut, remplacée par Elementor */
	position: relative;
}

.hpw-hero-sticky {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh; /* Valeur par défaut, remplacée par Elementor */
	overflow: hidden;
	/* Contexte d'empilement local : l'overlay reste dans le fond vidéo. */
	isolation: isolate;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   2. Fond vidéo — cover plein écran
   -------------------------------------------------------------------------- */

.hpw-video-bg {
	position: absolute;
	inset: 0;
	z-index: 0 !important;
	overflow: hidden;
	background: #000;
	isolation: isolate;
}

.hpw-player-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Les dimensions sont calculées en JS */
}

.hpw-player-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	pointer-events: none;
}

.hpw-player-wrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	pointer-events: none;
}

.hpw-video-shield {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: transparent;
}

.hpw-overlay {
	position: absolute;
	inset: 0;
	/* La superposition est au-dessus de la vidéo, jamais du contenu. */
	z-index: 2 !important;
	background-color: rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Phase 1 — Titre initial (visible au départ)
   -------------------------------------------------------------------------- */

.hpw-phase-1-wrap {
	position: absolute;
	inset: 0;
	z-index: 10 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.hpw-phase-1-wrap.hpw-hidden {
	opacity: 0;
	pointer-events: none;
}

.hpw-phase-1-inner {
	pointer-events: auto;
	width: 100%;
	max-width: 900px;
	padding: 0 40px;
	box-sizing: border-box;
}

.hpw-title-p1 {
	margin: 0 0 20px;
	padding: 0;
	color: #fff;
	line-height: 1.1;
}

.hpw-subtitle-p1 {
	margin: 0 0 28px;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. SVG — ancré en bas, invisible au départ, zoom au scroll
   -------------------------------------------------------------------------- */

.hpw-svg-wrap {
	position: absolute;
	bottom: 0;
	left: 50%;
	/*
	 * Stratégie anti-pixelisation :
	 * Le conteneur est rendu à une GRANDE taille fixe (100vw) pour que le SVG
	 * soit rasterisé à haute résolution par le navigateur.
	 * Le JS applique ensuite un scale(tès petit) pour le faire partir de la
	 * taille souhaitée — ainsi le zoom agrandit un SVG déjà net.
	 */
	width: 100vw !important; /* Grande taille de base pour rendu haute rés */
	transform: translateX(-50%) scale(0);
	transform-origin: bottom center;
	z-index: 15 !important;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.hpw-svg-wrap svg {
	display: block;
	width: 100%;
	height: auto;
	shape-rendering: geometricPrecision;
	text-rendering: geometricPrecision;
	image-rendering: optimizeQuality;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
}

/* --------------------------------------------------------------------------
   5. Phase 2 — Contenu après scroll (invisible au départ)
   -------------------------------------------------------------------------- */

.hpw-phase-2-wrap {
	position: absolute;
	inset: 0;
	z-index: 10 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.hpw-phase-2-wrap.hpw-visible {
	opacity: 1;
	pointer-events: auto;
}

.hpw-phase-2-inner {
	pointer-events: auto;
	width: 100%;
	max-width: 900px;
	padding: 0 40px;
	box-sizing: border-box;
}

.hpw-title-p2 {
	margin: 0 0 20px;
	padding: 0;
	color: #fff;
	line-height: 1.1;
}

.hpw-subtitle-p2 {
	margin: 0 0 28px;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.hpw-btn {
	display: inline-block;
	padding: 14px 36px;
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
	box-sizing: border-box;
}

.hpw-btn:hover,
.hpw-btn:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}

.hpw-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. Loader A — Barre de progression horizontale
   -------------------------------------------------------------------------- */

.hpw-loader-bar {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 20;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.8s ease;
}

.hpw-loader-bar--top    { top: 0; }
.hpw-loader-bar--bottom { bottom: 0; }

.hpw-loader-bar__track {
	width: 100%;
	height: var(--hpw-bar-h, 2px);
	background: var(--hpw-bar-bg, rgba(255,255,255,0.15));
	overflow: hidden;
}

.hpw-loader-bar__fill {
	height: 100%;
	width: 0%;
	background: var(--hpw-bar-color, #fff);
	transition: width 0.1s linear;
	transform-origin: left center;
}

.hpw-loader-bar.hpw-loader-hidden {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   7b. Loader D — Barre de progression sous le titre (dans la phase 1)
   -------------------------------------------------------------------------- */

.hpw-loader-title-bar {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.8s ease;
	width: 100%;
	max-width: var(--hpw-tbar-width, 320px);
	padding: 0 24px;
	box-sizing: border-box;
}

/* Position : juste sous le contenu de la phase 1, centré */
.hpw-phase-1-inner .hpw-loader-title-bar {
	position: relative;
	left: auto;
	transform: none;
	margin: 0 auto;
	width: 100%;
	max-width: var(--hpw-tbar-width, 320px);
}

.hpw-loader-title-bar__track {
	width: 100%;
	height: var(--hpw-tbar-h, 2px);
	background: var(--hpw-tbar-bg, rgba(255,255,255,0.2));
	overflow: hidden;
	border-radius: 999px;
}

.hpw-loader-title-bar__fill {
	height: 100%;
	width: 0%;
	background: var(--hpw-tbar-color, #fff);
	border-radius: 999px;
	transition: width 0.1s linear;
}

.hpw-loader-title-bar__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 8px;
}

.hpw-loader-title-bar__label {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--hpw-tbar-text-color, rgba(255,255,255,0.7));
	line-height: 1;
	flex: 1;
}

.hpw-loader-title-bar__pct {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--hpw-tbar-text-color, rgba(255,255,255,0.7));
	line-height: 1;
	white-space: nowrap;
}

.hpw-loader-title-bar.hpw-loader-hidden {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   8. Loader B — Texte animé avec compte à rebours
   -------------------------------------------------------------------------- */

.hpw-loader-text {
	position: absolute;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.8s ease;
}

.hpw-loader-text--bottom-left   { bottom: 28px; left: 28px; }
.hpw-loader-text--bottom-center { bottom: 28px; left: 50%; transform: translateX(-50%); }
.hpw-loader-text--bottom-right  { bottom: 28px; right: 28px; }

.hpw-loader-text__label {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hpw-text-color, #fff);
	line-height: 1;
}

.hpw-loader-text__counter {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--hpw-text-color, #fff);
	opacity: 0.55;
	line-height: 1;
}

.hpw-loader-text__dots {
	display: flex;
	align-items: center;
	gap: 3px;
}

.hpw-loader-text__dots span {
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--hpw-text-color, #fff);
	opacity: 0;
	animation: hpw-text-dot 1.4s ease-in-out infinite;
}

.hpw-loader-text__dots span:nth-child(1) { animation-delay: 0s; }
.hpw-loader-text__dots span:nth-child(2) { animation-delay: 0.2s; }
.hpw-loader-text__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes hpw-text-dot {
	0%, 80%, 100% { opacity: 0; transform: scale(0.6); }
	40%           { opacity: 1; transform: scale(1); }
}

.hpw-loader-text.hpw-loader-hidden {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   9. Loader C — Points de suspension rebondissants
   -------------------------------------------------------------------------- */

.hpw-loader-dots {
	position: absolute;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: calc(var(--hpw-dots-size, 8px) * 0.7);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.8s ease;
}

.hpw-loader-dots--bottom-left   { bottom: 28px; left: 28px; }
.hpw-loader-dots--bottom-center { bottom: 28px; left: 50%; transform: translateX(-50%); }
.hpw-loader-dots--bottom-right  { bottom: 28px; right: 28px; }

.hpw-loader-dots span {
	display: block;
	width: var(--hpw-dots-size, 8px);
	height: var(--hpw-dots-size, 8px);
	border-radius: 50%;
	background: var(--hpw-dots-color, #fff);
	animation: hpw-dot-bounce 1.2s ease-in-out infinite;
}

.hpw-loader-dots span:nth-child(1) { animation-delay: 0s; }
.hpw-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.hpw-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes hpw-dot-bounce {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	30% {
		transform: translateY(calc(var(--hpw-dots-size, 8px) * -1.2));
		opacity: 1;
	}
}

.hpw-loader-dots.hpw-loader-hidden {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   10. Blocage du scroll — classe sur <body>
   -------------------------------------------------------------------------- */

body.hpw-scroll-locked {
	overflow: hidden;
	padding-right: var(--hpw-scrollbar-width, 0px);
}

/* --------------------------------------------------------------------------
   11. Aperçu dans l'éditeur Elementor
   -------------------------------------------------------------------------- */

.elementor-editor-active .hpw-scroll-track {
	height: 100vh !important;
}

.elementor-editor-active .hpw-player-wrap {
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	transform: none !important;
}

.elementor-editor-active .hpw-svg-wrap {
	opacity: 0.4 !important;
	transform: translateX(-50%) scale(0.5) !important;
}

.elementor-editor-active .hpw-phase-2-wrap {
	opacity: 0.4 !important;
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.hpw-phase-1-inner,
	.hpw-phase-2-inner { padding: 0 32px; }
}

@media (max-width: 768px) {
	.hpw-phase-1-inner,
	.hpw-phase-2-inner { padding: 0 24px; }

	.hpw-loader-text--bottom-left,
	.hpw-loader-dots--bottom-left  { bottom: 20px; left: 20px; }

	.hpw-loader-text--bottom-center,
	.hpw-loader-dots--bottom-center { bottom: 20px; }

	.hpw-loader-text--bottom-right,
	.hpw-loader-dots--bottom-right  { bottom: 20px; right: 20px; }

	.hpw-svg-wrap { width: 40vw; }
}

@media (max-width: 480px) {
	.hpw-phase-1-inner,
	.hpw-phase-2-inner { padding: 0 16px; }

	.hpw-svg-wrap { width: 55vw; }
}

/* --------------------------------------------------------------------------
   13. Accessibilité — préférence de mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hpw-loader-text__dots span,
	.hpw-loader-dots span {
		animation: none;
		opacity: 1;
	}

	.hpw-loader-bar__fill,
	.hpw-loader-bar,
	.hpw-loader-text,
	.hpw-loader-dots,
	.hpw-phase-1-wrap,
	.hpw-phase-2-wrap,
	.hpw-btn {
		transition: none;
	}

	.hpw-svg-wrap {
		transition: none;
	}
}