/* BLOC eb/machine-tour — viewer épinglé + étapes qui pilotent la caméra */
.wp-block-eb-machine-tour {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--60);
	counter-reset: eb-step;
}
.eb-tour__stage {
	position: sticky;
	top: calc(var(--eb-header-h) + 3vh);
	height: calc(100svh - var(--eb-header-h) - 8vh);
	align-self: start;
	display: flex; flex-direction: column; gap: 0.9rem;
}
.eb-tour__frame {
	position: relative; flex: 1;
	border-radius: var(--wp--custom--radius--medium);
	background:
		radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--eb-accent) 9%, transparent), transparent 75%),
		var(--wp--preset--color--graphite);
}
.eb-tour__viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; --progress-bar-color: transparent; }
.eb-tour__progress {
	position: absolute; left: 1.2rem; bottom: 1rem;
	font-family: var(--wp--preset--font-family--montserrat); font-size: 0.8rem; color: var(--eb-muted);
}
.eb-tour__progress span { color: var(--eb-ink-on-dark); }
.eb-tour__note { font-size: var(--wp--preset--font-size--x-small); color: var(--eb-muted); }

/* Hotspots (créés par JS dans model-viewer) */
.eb-hotspot {
	--size: 16px;
	width: var(--size); height: var(--size); padding: 0;
	border-radius: 50%; border: 0; cursor: pointer;
	background: var(--eb-accent);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--eb-accent) 28%, transparent);
	position: relative;
	opacity: 0.55;
	transition: opacity 0.3s, box-shadow 0.3s;
}
.eb-hotspot:not([data-visible]) { opacity: 0; pointer-events: none; } /* masqué quand le point est de l'autre côté du modèle */
.eb-hotspot.is-active { opacity: 1; box-shadow: 0 0 0 7px color-mix(in srgb, var(--eb-accent) 32%, transparent), 0 0 0 14px color-mix(in srgb, var(--eb-accent) 12%, transparent); }
.eb-hotspot__label {
	position: absolute; left: calc(100% + 18px); top: 50%; transform: translateY(-50%);
	white-space: nowrap;
	background: var(--wp--preset--color--blanc); color: var(--wp--preset--color--anthracite);
	font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: 0.9rem;
	padding: 0.45rem 0.8rem; border-radius: var(--wp--custom--radius--small);
	opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.eb-hotspot__label::before { /* trait de liaison */
	content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1px; background: var(--wp--preset--color--blanc);
}
.eb-hotspot.is-active .eb-hotspot__label { opacity: 1; }
.eb-hotspot.is-flip .eb-hotspot__label { left: auto; right: calc(100% + 18px); }
.eb-hotspot.is-flip .eb-hotspot__label::before { right: auto; left: 100%; }

/* Étapes */
.eb-tour__steps { list-style: none; margin: 0; padding: 0; }
.eb-tour__step {
	min-height: 72svh;
	display: flex; flex-direction: column; justify-content: center;
	max-width: 34ch;
	opacity: 0.3;
	transition: opacity 0.4s var(--eb-ease);
	counter-increment: eb-step;
}
.eb-tour__step:first-child { min-height: 60svh; justify-content: flex-start; padding-top: 6vh; }
.eb-tour__step:last-child { min-height: 62svh; }
.eb-tour__step.is-active { opacity: 1; }
.eb-tour__step::before {
	content: counter(eb-step, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--goldman); font-weight: 700;
	color: var(--eb-accent); font-size: 1rem; margin-bottom: 0.9rem;
}
.eb-tour__step h3 { font-size: var(--wp--preset--font-size--x-large); margin-bottom: 0.9rem; }
.eb-tour__step p { color: var(--eb-muted); font-size: var(--wp--preset--font-size--large); line-height: 1.45; }

@media (max-width: 900px) {
	.wp-block-eb-machine-tour { grid-template-columns: 1fr; gap: 0; }
	.eb-tour__stage {
		top: var(--eb-header-h); height: 44svh; z-index: 2;
		background: var(--wp--preset--color--anthracite);
		padding-bottom: 0.6rem;
	}
	.eb-tour__note { display: none; }
	.eb-tour__step, .eb-tour__step:first-child, .eb-tour__step:last-child { min-height: 52svh; padding-top: 0; justify-content: center; }
	.eb-hotspot__label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eb-tour__step { opacity: 1; } }

/* ---------- Intro : gros plan centré → position à gauche ---------- */
.wp-block-eb-machine-tour.has-intro .eb-tour__steps { padding-top: 75svh; opacity: var(--steps-o, 1); }
.wp-block-eb-machine-tour.has-intro .eb-tour__stage { will-change: transform; transform-origin: 50% 45%; position: sticky; z-index: 1; }
.wp-block-eb-machine-tour.has-intro .eb-tour__frame {
	background:
		radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--eb-accent) calc(var(--frame-o, 1) * 9%), transparent), transparent 75%),
		color-mix(in srgb, var(--wp--preset--color--graphite) calc(var(--frame-o, 1) * 100%), transparent);
}
.wp-block-eb-machine-tour.has-intro .eb-tour__frame::before,
.wp-block-eb-machine-tour.has-intro .eb-tour__frame::after,
.wp-block-eb-machine-tour.has-intro .eb-tour__progress,
.wp-block-eb-machine-tour.has-intro .eb-tour__note { opacity: var(--frame-o, 1); }
.wp-block-eb-machine-tour.is-intro .eb-hotspot { visibility: hidden; }