/* === Layout grille pour la scène 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 à la taille du contenu, centre extensible */
	width: 100vw;
	height: max-content;
	/* 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: relative;
	width: 100%;
	height: 100%;
	min-width: 0;   /* indispensable pour que le canvas puisse s’étirer en grid */
	min-height: 0;
	display: grid;
	place-items: center;
}

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

@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0.3; }
	100% { opacity: 1; }
}

.warning-blink {
	animation: blink 1.2s infinite ease-in-out;
}

/* 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 latéraux sur petit écran */
	#left-portal, #right-portal { display: none; }

	#object_config {
		max-height: 500px; /* déjà présent dans votre CSS responsive, on garde l’intention */
	}
}