/* Bloc « Voir en 3D » dans la colonne galerie de la fiche produit.
   Les variables --sv-* viennent du CSS additionnel de la page produit ; les
   valeurs de repli permettent au plugin de rester présentable si ce CSS est un
   jour retiré ou renommé. */

.sv3d {
	margin: 16px 0 0;
}

.sv3d[hidden] {
	display: none;
}

.sv3d__toggle {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* 52 px : une cible confortable pour une main qui tremble un peu, sur une
	   boutique dont c'est la clientèle. */
	min-height: 52px;
	padding: 12px 20px;
	border: 2px solid var(--sv-accent, #ef3f5c);
	border-radius: 999px;
	background: var(--sv-surface, #fff);
	color: var(--sv-accent, #ef3f5c);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sv3d__toggle:hover,
.sv3d__toggle:focus-visible {
	background: var(--sv-accent, #ef3f5c);
	color: #fff;
}

.sv3d__toggle:focus-visible {
	outline: 3px solid var(--sv-ink, #20184f);
	outline-offset: 2px;
}

.sv3d__icon {
	display: inline-flex;
	flex: none;
}

.sv3d__stage {
	position: relative;
	margin-top: 14px;
}

.sv3d__stage[hidden] {
	display: none;
}

/* Le nom d'élément est répété devant la classe pour hausser la spécificité :
   model-viewer se donne lui-même une taille par défaut de 300 × 150 px, et
   toute règle du thème qui la laisserait passer donnerait la « petite fenêtre »
   qu'on cherche justement à éviter. */
model-viewer.sv3d__viewer,
.sv3d__viewer {
	display: block;
	width: 100%;
	/* Hauteur explicite plutôt qu'un rapport de forme : le résultat ne dépend
	   alors plus de la largeur de la colonne, qui varie avec le thème et n'est
	   pas garantie. Plancher pour que le cadre reste utilisable sur un petit
	   écran, plafond pour que la colonne galerie — en position sticky — ne
	   dépasse jamais la fenêtre, sans quoi elle cesserait de coller. */
	height: clamp(360px, 72vh, 760px);
	border-radius: var(--sv-radius, 18px);
	background: var(--sv-surface-2, #f8f7ff);
	/* L'affiche par défaut de model-viewer est un aplat gris : on laisse
	   passer notre propre fond. */
	--poster-color: transparent;
	--progress-bar-color: var(--sv-accent, #ef3f5c);
}

.sv3d__zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid rgba(32, 24, 79, .15);
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--sv-ink, #20184f);
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}

.sv3d__zoom:hover,
.sv3d__zoom:focus-visible {
	background: #fff;
	border-color: var(--sv-accent, #ef3f5c);
	color: var(--sv-accent, #ef3f5c);
}

/* Mode agrandi : un recouvrement en CSS, et NON l'API Fullscreen. Safari sur
   iPhone ne sait pas passer en plein écran un élément qui n'est pas une vidéo :
   s'appuyer dessus aurait privé une bonne part de la clientèle mobile du seul
   bouton qui répond au reproche « c'est trop petit ». Un seul chemin de code,
   le même résultat partout. */
.sv3d__stage.is-zoomed {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 16px;
	background: var(--sv-surface, #fff);
}

.sv3d__stage.is-zoomed model-viewer.sv3d__viewer,
.sv3d__stage.is-zoomed .sv3d__viewer {
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	border-radius: 12px;
}

.sv3d__stage.is-zoomed .sv3d__note {
	flex: none;
}

body.sv3d-zoom-lock {
	overflow: hidden;
}

/* Commandes masquées par défaut, révélées aux seuls postes à souris. Au doigt,
   ces boutons prendraient de la place pour redire ce que le geste fait déjà
   mieux. Le « display: none » les retire aussi du parcours au clavier, ce qu'un
   simple masquage visuel n'aurait pas fait. */
.sv3d__controls {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.sv3d__controls {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 12px;
	}
}

.sv3d__control {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	/* 40 px de haut : ces boutons visent une main qui n'est plus toujours
	   assurée, comme le reste de la boutique. */
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--sv-line, #e6e2f2);
	border-radius: 999px;
	background: var(--sv-surface, #fff);
	color: var(--sv-ink, #20184f);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.sv3d__control:hover,
.sv3d__control:focus-visible {
	border-color: var(--sv-accent, #ef3f5c);
	color: var(--sv-accent, #ef3f5c);
}

.sv3d__control:focus-visible {
	outline: 3px solid var(--sv-ink, #20184f);
	outline-offset: 2px;
}

.sv3d__control svg {
	flex: none;
}

.sv3d__stage.is-zoomed .sv3d__controls {
	flex: none;
	justify-content: center;
}

.sv3d__note {
	margin: 10px 0 0;
	color: var(--sv-ink-soft, #5f5a7a);
	font-size: .95rem;
	line-height: 1.45;
	text-align: center;
}

.sv3d__note--error {
	padding: 10px 14px;
	border-radius: 12px;
	background: #fdecee;
	color: #a3222f;
}

/* Modèle ouvert : la zone photo cède la place, les vignettes restent. Cliquer
   une vignette referme la 3D et ramène la photo — c'est le retour attendu. */
.woocommerce-product-gallery.sv3d-is-open .flex-viewport,
.woocommerce-product-gallery.sv3d-is-open > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery.sv3d-is-open .woocommerce-product-gallery__trigger {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.sv3d__toggle {
		transition: none;
	}
}