/* GFC 05/10/2026 — vue produit 360° de Jimmy dans une fenêtre ouverte par un bouton « œil » (script js/autoload/92-gfc-360-20261007b.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; }

/* 07/10/2026 (Raph) — bouton « œil » en bas de la photo (fiche et tuiles) */
.gfc-360-cont { position: relative; }
button.gfc-360-oeil {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 14;
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0; padding: 6px 12px 6px 10px; width: auto; height: auto; min-width: 0;
	border: 1px solid #d9d4cd; border-radius: 18px; background: rgba(255,255,255,.94); color: #1d1d1d;
	font: 700 13px/1 Lato, Arial, sans-serif; letter-spacing: .02em; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
button.gfc-360-oeil:hover { border-color: #EA8914; color: #EA8914; }
button.gfc-360-oeil:focus-visible { outline: 2px solid #EA8914; outline-offset: 2px; }
button.gfc-360-oeil svg { display: block; flex: none; }

/* la fenêtre */
html.gfc-360-ouvert { overflow: hidden; }
.gfc-360-pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.62); }
.gfc-360-pop[hidden] { display: none; }
.gfc-360-pop-boite { position: relative; width: min(92vw, 82vh, 720px); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.gfc-360-pop-boite div.gfc-360 { max-width: none; }
button.gfc-360-pop-fermer {
	position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; margin: 0; padding: 0; min-width: 0;
	border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #1d1d1d; font: 400 26px/34px Arial, sans-serif; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.2);
}
button.gfc-360-pop-fermer:hover { color: #EA8914; }
.gfc-360-pop-erreur { margin: 0; padding: 60px 20px; text-align: center; font: 15px/1.4 Lato, Arial, sans-serif; color: #555; }

/* ---------- 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; }