/* ==========================================================
   VIEWER 360° — pour toute série d'images d'un véhicule prises
   sous plusieurs angles (turntable). Générique : utilisable en
   fond de hero (.v360 en position absolute, cf. hero-cinema.css)
   ou en carte produit (.v360.v360-inline).
   ========================================================== */

.v360{ position:absolute; inset:0; cursor:grab; touch-action:pan-y; }
.v360.v360-dragging{ cursor:grabbing; }
.v360.v360-inline{ position:relative; inset:auto; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:#111; }

.v360-frame{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; pointer-events:none; user-select:none;
}
.v360-frame.active{ opacity:1; }

.v360-hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:rgba(0,0,0,.45); color:#fff; font-size:12px; letter-spacing:.02em;
  backdrop-filter:blur(4px); pointer-events:none; z-index:11;
  opacity:0; animation:v360HintIn .5s ease .4s forwards;
  transition:opacity .4s ease;
}
.v360.v360-touched .v360-hint{ opacity:0 !important; }
@keyframes v360HintIn{ from{ opacity:0; transform:translateX(-50%) translateY(6px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }

@media(prefers-reduced-motion: reduce){
  .v360-hint{ animation:none; opacity:1; }
}