/*
 * Org3DViewer — styles côté visiteur.
 * Personnalisables depuis le thème (variables CSS, toutes facultatives) :
 *   --org3d-accent (boutons), --org3d-accent-text, --org3d-bg (fond de la zone),
 *   --org3d-radius (arrondi), --org3d-focus (contour de focus).
 */
.org3d { margin: 0 0 1.5rem; }

.org3d__stage {
	position: relative;
	display: grid;
	place-items: center;
	height: var(--org3d-h, 480px);
	max-height: 80vh;
	overflow: hidden;
	border-radius: var(--org3d-radius, 12px);
	background: var(--org3d-bg, #eef1f5);
}

/* Tout ce qui se trouve dans la zone occupe la même cellule (le bouton se pose sur l'image). */
.org3d__stage > * { grid-area: 1 / 1; }

.org3d__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.org3d__placeholder {
	margin-bottom: 8rem; /* remonte le pictogramme : le bouton d'activation se place dessous, sans le recouvrir */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	color: #44566c;
}
.org3d__placeholder-text { font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }

.org3d__mv {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	--poster-color: transparent;
}
.org3d__mv--kbd {
	outline: 3px solid var(--org3d-focus, #1a1a1a);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 2px #fff;
}

.is-ready .org3d__poster,
.is-ready .org3d__placeholder { visibility: hidden; }

/* Bouton d'activation : posé sur l'image d'attente. */
.org3d__activate,
.org3d__btn {
	min-height: 44px;
	padding: .6em 1.3em;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.org3d__activate {
	position: relative;
	z-index: 2;
	border: 2px solid transparent;
	background: var(--org3d-accent, #12315e);
	color: var(--org3d-accent-text, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.org3d__activate[hidden] { display: none; }
.org3d__btn {
	border: 2px solid var(--org3d-accent, #12315e);
	background: transparent;
	color: var(--org3d-accent, #12315e);
}
.org3d__btn:hover { background: var(--org3d-accent, #12315e); color: var(--org3d-accent-text, #fff); }
.org3d__activate:focus-visible,
.org3d__btn:focus-visible {
	outline: 3px solid var(--org3d-focus, #1a1a1a);
	outline-offset: 3px;
	box-shadow: 0 0 0 2px #fff;
}

/* Message d'état : lu par les lecteurs d'écran ; visible seulement pendant le chargement ou en cas d'erreur. */
.org3d__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.is-loading .org3d__status,
.is-error .org3d__status {
	inset: auto 12px 12px 12px;
	z-index: 3;
	width: auto;
	height: auto;
	margin: 0;
	padding: .5em .9em;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	border-radius: 8px;
	background: rgba(0, 0, 0, .78);
	color: #fff;
	font-size: .875rem;
	text-align: center;
}
.is-error .org3d__status a { color: #fff; text-decoration: underline; }

.org3d__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.org3d__controls[hidden],
.org3d__help[hidden] { display: none; }
.org3d__help { margin: .5rem 0 0; color: #50575e; font-size: .875em; }

.org3d__caption { margin-top: .6rem; font-size: .9em; }
.org3d__details { margin-top: .6rem; }
.org3d__details summary { cursor: pointer; font-weight: 600; }

.org3d__nojs,
.org3d__error { margin: .6rem 0 0; font-size: .9em; }
.org3d__error { padding: .6em .9em; border-left: 4px solid #b32d2e; background: #fcf0f1; color: #1d2327; }

@media (prefers-reduced-motion: reduce) {
	.org3d * { transition: none !important; animation: none !important; }
}

/*
 * Images de présentation (rendus Blender) : un seul ensemble avec la zone 3D.
 * Grand écran : la colonne d'images a EXACTEMENT la hauteur de la zone 3D, chaque image se partage la place à égalité.
 * Petit écran : la zone 3D, puis les images en dessous (2 colonnes).
 */
.org3d-with-views { container-type: inline-size; margin: 0 0 1.5rem; }
.org3d-with-views .org3d { margin: 0; }
.org3d-views-grid { display: grid; gap: .75rem; }
/* Sélecteurs volontairement plus spécifiques : un thème qui met en forme ses listes (retrait, marge entre éléments) ne doit pas décaler la galerie. */
.org3d-with-views .org3d__views {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.org3d-with-views .org3d__views > .org3d__view { min-width: 0; margin: 0; padding: 0; list-style: none; }
.org3d__view figure { position: relative; margin: 0; }
.org3d__view-link {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3; /* sur le lien, pas sur l'image : WordPress ajoute width/height à <img> qui ignoreraient le CSS */
	overflow: hidden;
	border-radius: var(--org3d-radius, 12px);
	background: var(--org3d-bg, #eef1f5);
	cursor: zoom-in;
}
.org3d__view-link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.org3d__view-link:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.org3d__view-link img { transition: none; }
	.org3d__view-link:hover img { transform: none; }
}
/* Pictogramme « agrandir » : visible au survol et au clavier, toujours présent sur écran tactile. */
.org3d__view-icon {
	position: absolute;
	top: .6rem;
	right: .6rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: #1a1a1a;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
	opacity: 0;
	transition: opacity .2s;
}
.org3d__view-link:hover .org3d__view-icon,
.org3d__view-link:focus-visible .org3d__view-icon { opacity: 1; }
@media (hover: none) { .org3d__view-icon { opacity: .9; } }
.org3d__view-link:focus-visible {
	outline: 3px solid var(--org3d-focus, #1a1a1a);
	outline-offset: 3px;
	box-shadow: 0 0 0 2px #fff;
}
/* Légende : posée sur le bas de l'image, sur un dégradé sombre (texte blanc lisible). */
.org3d__view figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.6rem .8rem .6rem;
	border-radius: 0 0 var(--org3d-radius, 12px) var(--org3d-radius, 12px);
	background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
	color: #fff;
	font-size: .85rem;
	line-height: 1.3;
	pointer-events: none;
}
@container (min-width: 760px) {
	.org3d-views-grid { grid-template-columns: minmax(0, 1fr) minmax(11rem, 27%); align-items: start; }
	.org3d-with-views .org3d__views {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(0, 1fr);
		height: min(var(--org3d-h, 480px), 80vh); /* = hauteur de la zone 3D (voir .org3d__stage) */
	}
	.org3d__view figure { height: 100%; }
	.org3d__view-link { height: 100%; aspect-ratio: auto; }
}

.org3d__lightbox {
	max-width: min(96vw, 1400px);
	padding: .75rem;
	border: 0;
	border-radius: var(--org3d-radius, 12px);
	background: #fff;
	text-align: center;
}
.org3d__lightbox::backdrop { background: rgba(0, 0, 0, .75); }
.org3d__lightbox img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto .75rem; }