/* GFC 05/10/2026 — vue produit 360° de Jimmy dans le carrousel d'une fiche (script js/autoload/92-gfc-360-20261006.js).
   La 2e partie reprend la feuille de style de sa page (index.html), limitée à notre bloc. */
div.gfc-360 {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	background: #fff;
	line-height: 0;
}
/* hors fiche ou sans script : le lien de la description reste un simple aperçu cliquable */
a.gfc-360 { display: inline-block; max-width: 300px; }
a.gfc-360 img { display: block; width: 100%; height: auto; }

/* la vignette du carrousel */
#thumbs_list_frame li.gfc-360-vignette a { display: block; position: relative; }
#thumbs_list_frame li.gfc-360-vignette img { display: block; width: 100%; height: auto; }

/* ---------- la vue (style de Jimmy) ---------- */
div.gfc-360 .gfc-360-vue,
div.gfc-360 .gfc-360-vue * { box-sizing: border-box; }
div.gfc-360 .gfc-360-vue canvas {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	display: block;
	background: #fff;
	box-shadow: none;
	filter: none;
	touch-action: pan-y;
	cursor: grab;
}
div.gfc-360 .gfc-360-vue canvas.dragging { cursor: grabbing; }
div.gfc-360 .gfc-360-vue .controls {
	display: flex;
	justify-content: center;
	padding: 0 0 12px;
	margin-top: -56px;
	position: relative;
}
div.gfc-360 .gfc-360-vue button {
	color: #000;
	background: none;
	border: 0;
	padding: 8px;
	margin: 0;
	cursor: pointer;
	border-radius: 50%;
	line-height: 0;
	box-shadow: none;
	min-width: 0;
	width: auto;
	height: auto;
}
div.gfc-360 .gfc-360-vue button:focus-visible,
div.gfc-360 .gfc-360-vue canvas:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
div.gfc-360 .gfc-360-vue button svg { width: 58px; height: 44px; }
div.gfc-360 .gfc-360-vue button[aria-pressed="true"] { background: #f4f4f4; }

/* 06/10/2026 — version 10 de Jimmy : image d'attente par-dessus le canvas, bouton grisé pendant le chargement */
div.gfc-360 .gfc-360-vue main.gfc-360-main { position: relative; display: block; max-width: none; margin: 0; }
div.gfc-360 .gfc-360-vue .poster { position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; }
div.gfc-360 .gfc-360-vue .poster[hidden] { display: none; }
div.gfc-360 .gfc-360-vue main:not(.ready) canvas { cursor: progress; }
div.gfc-360 .gfc-360-vue button:disabled { opacity: .35; cursor: progress; }