/* Apparence des hotspots (studio + viewer public). Taille = --s, opacité = --o. */
.hs { position: relative; width: var(--s); height: var(--s); opacity: var(--o, 1); cursor: pointer; transition: transform .16s ease; }
.hs-disc {
  position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16, 18, 22, .52); backdrop-filter: blur(3px);
  border: max(2px, calc(var(--s) * .06)) solid #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.hs-disc svg { width: 52%; height: 52%; fill: #fff; }
.hs-pulse {
  position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .85);
  animation: hs-pulse 2.6s ease-out infinite;
}
@keyframes hs-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
.psv-marker:hover .hs { transform: scale(1.08); }
.psv-marker.hs-sel .hs-disc { border-color: #e8b44a; box-shadow: 0 0 0 4px rgba(232, 180, 74, .4), 0 2px 14px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .hs-pulse { animation: none; opacity: 0; } .hs { transition: none; } }
/* Transition « glissement flou » (common.js → goToScene). */
.psv-container .psv-canvas-container { transition: filter var(--pt-blur-ms, 400ms) ease; }
.psv-container.pt-blur .psv-canvas-container { filter: blur(7px) brightness(1.06); }