canvas {
	display: block;
}

#control_object {
	width: 350px;
	height: 100vh;
	overflow-y: auto;
	min-width: 250px;
}

@media (max-width:769px) {

	/* html,
	body,
	#root {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	} */

	#control_object {
		width: fit-content;
		height: fit-content;
		order: -1;
	}

	#control_object .formulaire_spip,
	#control_object {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.grcontnr {
		grid-template-columns: 1fr;
		/* Une seule colonne */
		grid-template-rows: auto auto;
		height: auto;
	}

	#object_config {
		max-height: none;
	}

}

/* === Layout grille pour la scene 3D + formulaire dockable === */
.grcontnr {
	display: grid;
	grid-template-areas:
		"top    top    top"
		"left   center right"
		"bottom bottom bottom";
	grid-template-columns: auto 1fr auto;
	/* left et right s'ajustent au formulaire, le centre prend le reste */
	grid-template-rows: auto 1fr auto;
	/* top/bottom a la taille du contenu, centre extensible */
	width: 100vw;
	height: auto;
	min-height: 100vh;
	/* overflow: hidden; */
}

#top-portal {
	grid-area: top;
}

#bottom-portal {
	grid-area: bottom;
}

#left-portal {
	grid-area: left;
	max-width: 30vw;
}

#right-portal {
	grid-area: right;
	max-width: 30vw;
}

#object_config {
	grid-area: center;
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--object-config-height, auto);
	min-width: 0;
	/* indispensable pour que le canvas puisse s'etirer en grid */
	min-height: var(--object-config-min-height, 500px);
	aspect-ratio: var(--object-aspect-ratio, 16 / 9);
	display: grid;
	place-items: center;
}

.grcontnr.is-bottom-portal #object_config {
	position: static;
}

/* S'assurer que le canvas occupe tout l'espace disponible */
#object_config canvas {
	width: 100% !important;
	height: 100% !important;
}

/* Mobile: simplifier la grille en pile verticale */
@media (max-width: 769px) {
	.grcontnr {
		grid-template-areas:
			"top"
			"center"
			"bottom";
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
		height: auto;
		/* garde un comportement plus naturel sur mobile */
	}

	/* on masque les docks lateraux sur petit ecran */
	#left-portal,
	#right-portal {
		display: none;
	}

	#object_config {
		max-height: none;
	}
}

.map-click-field {
	width: 100%;
}

.map-click-field .map-click-button {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: calc(1.5em + 0.75rem - 7px);
	padding: 0 1.25rem;
	margin-top: 0;
	border-radius: 0;
	font-weight: 600;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.map-click-field .map-click-icon {
	font-size: 2.2rem;
}

.map-click-field .map-click-button-text {
	font-size: 14px;
	display: inline-block;
	text-align: center;
}

#content div.ajax-form-container[aria-busy="true"] #jsctdvwmlmd {
	display: block;
}