/*
 * La Loge Conciergerie — Showpiece 1 : séquence pilotée par le défilement
 * Cible : #sequence, #sequence-stage, #sequence-visual-col, #sequence-text-col,
 *         .sequence-visual, .sequence-step, .sequence-media
 * États posés par sequence.js sur #sequence : .seq-enhanced ou .seq-static
 * Sans JavaScript : équivalent de .seq-static (tout est visible).
 */

#sequence { position: relative; }

/* Visuel : vidéo entière au format 16:9 (rien n'est recadré), liseré doré décalé
   identique à celui des photos des fondateurs (.founder-photo, site.css). */
#sequence-visual-col { position: relative; }
.sequence-visual-widget { position: relative; z-index: 1; width: 100%; }
.sequence-visual {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-photo, 10px);
	background: var(--color-noir-2);
}
#sequence-text-col { position: relative; z-index: 1; }

.sequence-video, .sequence-layer, .sequence-layer > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	min-height: 0;
}
.sequence-layer { opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.sequence-layer.is-active { opacity: 1; transform: scale(1); }
.seq-has-video .sequence-layer { display: none; }

.sequence-progress {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: flex;
}
.sequence-progress span {
	display: block;
	width: 34px;
	height: 2px;
	margin: 0 4px;
	background: color-mix(in srgb, var(--color-on-noir) 30%, transparent);
	transition: background-color .4s var(--ease);
}
.sequence-progress span.is-done { background: var(--color-gold); }

/* Texte d'une scène */
.sequence-step h3 { font-family: var(--font-title); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; color: var(--color-on-noir); margin: 0 0 14px; }
.sequence-step p { font-size: 17.5px; line-height: 1.7; color: var(--color-on-noir-soft); margin: 0; max-width: 30em; }
.sequence-step .step-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 14px; }

/* ---------- Version fixe (mobile, animations réduites, erreur, sans JS) */
#sequence-visual-col { min-height: 0; }
#sequence:not(.seq-enhanced) #sequence-visual-col { display: none; }
#sequence:not(.seq-enhanced) .sequence-media { margin: 36px 0 22px; }
#sequence:not(.seq-enhanced) .sequence-media { position: relative; padding: 0 var(--frame-offset, 16px) var(--frame-offset, 16px) 0; }
#sequence:not(.seq-enhanced) .sequence-media::before {
	content: ""; position: absolute; top: var(--frame-offset, 16px); left: var(--frame-offset, 16px); right: 0; bottom: 0;
	border: 1px solid var(--color-gold); border-radius: var(--radius-photo, 10px); pointer-events: none;
}
#sequence:not(.seq-enhanced) .sequence-media .media-placeholder,
#sequence:not(.seq-enhanced) .sequence-media img {
	position: relative; z-index: 1; display: block;
	width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-photo, 10px);
}

/* ---------- Version pilotée par le défilement (ordinateur) */
@media (min-width: 1025px) {
	#sequence.seq-enhanced { height: calc(100vh + var(--seq-steps, 4) * 60vh); }
	#sequence.seq-enhanced #sequence-stage {
		position: sticky;
		top: var(--header-h);
		height: calc(100vh - var(--header-h));
		min-height: 560px;
		align-items: center;
	}
	#sequence.seq-enhanced #sequence-visual-col {
		display: block; align-self: center; margin: 0; min-height: 0 !important;
		padding: 0 var(--frame-offset, 16px) var(--frame-offset, 16px) 0;
	}
	#sequence.seq-enhanced #sequence-visual-col::before {
		content: ""; position: absolute; top: var(--frame-offset, 16px); left: var(--frame-offset, 16px); right: 0; bottom: 0;
		width: auto; height: auto; opacity: 1; background: none; mix-blend-mode: normal; z-index: 0; /* remplace le calque d'arrière-plan d'Elementor */
		border: 1px solid var(--color-gold); border-radius: var(--radius-photo, 10px); pointer-events: none;
	}
	#sequence.seq-enhanced .sequence-media { display: none; }
	#sequence.seq-enhanced .sequence-step { min-height: 13em; }
	#sequence.seq-enhanced .sequence-step.is-inactive {
		position: absolute !important;
		width: 1px; height: 1px; min-height: 0;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
		white-space: nowrap;
	}
	#sequence.seq-enhanced .sequence-step.is-active { animation: seqIn .6s var(--ease) both; }
}
@keyframes seqIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.sequence-layer, .sequence-step.is-active { transition: none !important; animation: none !important; }
}

/* ---------- Variante « vidéo en fond » (activée par .sequence-visual--bg, page Nos services)
   La vidéo couvre toute la section ; les textes sont dans un encadré lisible à gauche,
   sans voile sur la vidéo. Mobile, tablette et animations réduites : version fixe inchangée. */
@media (min-width: 1025px) {
	#sequence.seq-enhanced:has(.sequence-visual--bg) #sequence-stage { overflow: hidden; }
	#sequence.seq-enhanced:has(.sequence-visual--bg) #sequence-visual-col {
		position: absolute; inset: 0; z-index: 0;
		width: 100% !important; height: 100% !important; max-width: none; margin: 0; padding: 0 !important;
	}
	#sequence.seq-enhanced:has(.sequence-visual--bg) #sequence-visual-col::before { content: none; display: none; }
	#sequence.seq-enhanced:has(.sequence-visual--bg) .sequence-visual-widget,
	#sequence.seq-enhanced:has(.sequence-visual--bg) .sequence-visual--bg {
		height: 100%; aspect-ratio: auto; border-radius: 0;
	}
	#sequence.seq-enhanced:has(.sequence-visual--bg) .sequence-progress { bottom: 32px; }
	#sequence.seq-enhanced:has(.sequence-visual--bg) #sequence-text-col {
		width: 440px !important; max-width: 40%;
		padding: 40px 44px !important;
		background: color-mix(in srgb, var(--color-noir) 84%, transparent);
		-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
		border: 1px solid color-mix(in srgb, var(--color-gold) 45%, transparent);
		border-radius: var(--radius-photo, 10px);
		box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
	}
	#sequence.seq-enhanced:has(.sequence-visual--bg) #sequence-text-col .section-title .elementor-heading-title { font-size: clamp(32px, 2.6vw, 42px); }
	#sequence.seq-enhanced:has(.sequence-visual--bg) .sequence-step h3 { font-size: clamp(26px, 2vw, 32px); }
	#sequence.seq-enhanced:has(.sequence-visual--bg) .sequence-step { min-height: 12em; }
}