/* ==========================================================================
   Egalicare : intérieurs 3D des étapes (assets/js/interieur3d.js).
   Ne s'applique qu'une fois la 3D montée (.scene.is-3d) : sans WebGL,
   la scène SVG garde son apparence d'origine.
   ========================================================================== */

.scene.is-3d {
	aspect-ratio: 16 / 10;
	min-height: 340px;
	isolation: isolate;
	background:
		radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--c3d, #a3a9ff) 22%, transparent), transparent 60%),
		radial-gradient(90% 60% at 70% 0%, rgba(255, 106, 61, .16), transparent 60%),
		linear-gradient(180deg, #0c1133 0%, #151a38 55%, #1d1b3c 100%);
	touch-action: pan-y pinch-zoom;
	-webkit-tap-highlight-color: transparent;
}
/* Le SVG reste dans le DOM (repli) mais n'est plus affiché ; relief.js n'incline plus la figure */
.scene.is-3d .scene__svg { display: none; }
.scene.is-3d.is-relief { transform: none !important; }

/* --- Canvas ----------------------------------------------------------------- */
.i3d__scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity .6s ease;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y pinch-zoom;
}
.scene.is-pret .i3d__scene { opacity: 1; }
.i3d__scene canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.scene.is-glisse .i3d__scene canvas { cursor: grabbing; }

/* --- Points : les boutons existants suivent les personnages ------------------- */
.scene.is-3d .hotspot {
	left: 0 !important;
	top: 0 !important;
	translate: none !important;
	transform: translate3d(-200px, -200px, 0);
	will-change: transform;
	transition: opacity .35s ease;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}
.scene.is-3d.is-intro .hotspot { opacity: 0; pointer-events: none; }
.scene.is-3d .hotspot.is-bord { opacity: .72; }
.scene.is-3d .hotspot.is-bord:focus-visible, .scene.is-3d .hotspot.is-bord.is-actif { opacity: 1; }
.scene.is-3d .hotspot__label { top: calc(100% - 2px); }
.scene.is-3d .hotspot.is-survol .hotspot__label { opacity: 1; }
.scene.is-3d .hotspot.is-survol .hotspot__dot { transform: scale(1.12); }
.scene.is-3d .hotspot.is-actif .hotspot__dot {
	box-shadow: 0 0 0 3px var(--jeu-fond, #0c1133), 0 0 0 6px var(--c3d, #a3a9ff), 0 0 24px 2px var(--c3d, #a3a9ff);
}
.scene.is-3d .hotspot:focus-visible { outline: none; }
.scene.is-3d .hotspot:focus-visible .hotspot__dot { box-shadow: 0 0 0 3px var(--jeu-fond, #0c1133), 0 0 0 6px #fff; }
/* Coche des points déjà explorés */
.scene.is-3d .hotspot.is-vu .hotspot__dot::after {
	content: "✓";
	position: absolute;
	right: -7px;
	top: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: 800 11px/1 var(--f-texte);
	color: var(--jeu-fond, #0c1133);
	background: var(--neon-lagon, #a3a9ff);
	box-shadow: 0 0 0 2px var(--jeu-fond, #0c1133);
}

/* --- Commandes de la vue -------------------------------------------------- */
.i3d__outils {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	gap: 6px;
}
.i3d__outil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 14px;
	border: 1px solid var(--jeu-ligne, rgba(255, 255, 255, .12));
	background: rgba(12, 17, 51, .74);
	color: var(--jeu-texte, #e8eef9);
	font: 700 .85rem var(--f-texte);
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color .2s, border-color .2s, color .2s;
}
.i3d__outil--texte { padding: 0 14px 0 12px; }
.i3d__outil:hover { border-color: var(--c3d, #a3a9ff); color: #fff; }
.i3d__outil:focus-visible { outline: 3px solid var(--neon-lagon, #a3a9ff); outline-offset: 2px; }
.i3d__ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Aide « glisse pour tourner », masquée après la première interaction */
.i3d__aide {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 3;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 24px);
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(12, 17, 51, .74);
	border: 1px solid var(--jeu-ligne, rgba(255, 255, 255, .12));
	color: var(--jeu-texte, #e8eef9);
	font: 600 .82rem/1.25 var(--f-texte);
	pointer-events: none;
	transition: opacity .4s ease;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.i3d__aide.is-cache { opacity: 0; }

/* Bulle des figurants (décorative) */
.i3d__bulle {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	max-width: 230px;
	padding: 8px 12px;
	border-radius: 14px 14px 14px 4px;
	background: rgba(255, 255, 255, .96);
	color: #0c1133;
	font: 600 .84rem/1.3 var(--f-texte);
	box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6), 0 0 0 2px var(--c3d, #a3a9ff);
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-400px, -400px, 0);
	transition: opacity .25s ease;
}
.i3d__bulle.is-on { opacity: 1; }

/* --- Mobile : cadrage plus haut, commandes compactes ---------------------- */
@media (max-width: 760px) {
	.scene.is-3d { aspect-ratio: 1 / 1; min-height: 320px; }
	.i3d__outils { right: 8px; bottom: 8px; gap: 4px; }
	.i3d__outil--texte span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.i3d__outil--texte { padding: 0; }
	.i3d__aide { left: 8px; top: 8px; max-width: calc(100% - 16px); }
	.i3d__bulle { max-width: 190px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.i3d__scene, .scene.is-3d .hotspot, .i3d__aide, .i3d__bulle { transition: none; }
}