/* Sonectra — vue 3D en fenêtre + vidéo chargée au clic (fiches produits)
   Chargé par functions.php uniquement sur les fiches qui ont une 3D ou une vidéo. */

/* ---- Bouton « Voir en 3D » posé sur la photo du hero ---- */
.snx-hero-img{position:relative}
.snx-product .snx-3d-btn{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:980px;
  font-size:14px;font-weight:600;line-height:1;color:#fff;
  background:rgba(7,8,11,.62);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
  transition:border-color .25s,background .25s,transform .25s;
}
.snx-product .snx-3d-btn:hover{border-color:rgba(47,169,184,.7);background:rgba(7,8,11,.78);transform:translateY(-1px)}
.snx-product .snx-3d-btn:focus-visible{outline:2px solid #5fd0d8;outline-offset:3px}
.snx-3d-btn svg{width:18px;height:18px;flex:none;color:#5fd0d8}

/* ---- Fenêtre 3D ---- */
html.snx-lock,html.snx-lock body{overflow:hidden}
.snx-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center}
.snx-modal[hidden]{display:none}
.snx-modal-backdrop{position:absolute;inset:0;background:rgba(3,4,6,.8)}
.snx-modal-box{
  position:relative;width:min(1240px,calc(100% - 32px));height:min(820px,calc(100dvh - 32px));
  background:#07080b;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.snx-modal-body,.snx-modal-body iframe{width:100%;height:100%;border:0;display:block}
.snx-modal-body iframe{opacity:0;transition:opacity .25s}
.snx-modal-body.is-loaded iframe{opacity:1}
.snx-modal-loader{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid rgba(255,255,255,.14);border-top-color:#2fa9b8;border-radius:50%;animation:snx-spin .8s linear infinite}
.snx-modal-body.is-loaded .snx-modal-loader{display:none}
@keyframes snx-spin{to{transform:rotate(360deg)}}
.snx-modal-close{
  position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(7,8,11,.72);color:#fff;
  font-size:24px;line-height:38px;cursor:pointer;transition:border-color .25s;
}
.snx-modal-close:hover{border-color:rgba(47,169,184,.7)}
.snx-modal-close:focus-visible{outline:2px solid #5fd0d8;outline-offset:2px}
@media (max-width:700px){.snx-modal-box{width:100%;height:100dvh;border-radius:0;border:0}}

/* ---- Vidéo chargée au clic ---- */
.snx-video-intro{margin:-8px 0 22px;font-size:15.5px;color:rgba(255,255,255,.62);line-height:1.6;max-width:62ch}
.snx-video{
  position:relative;aspect-ratio:16/9;width:100%;max-width:980px;
  border-radius:18px;overflow:hidden;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,rgba(47,169,184,.12),rgba(255,255,255,.02) 70%),#0c0e12;
  border:1px solid rgba(255,255,255,.1);
}
.snx-video img,.snx-video iframe,.snx-video video{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;border:0;object-fit:cover;display:block;margin:0}
.snx-video video{object-fit:contain;background:#000}
.snx-video:not(.is-playing)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,11,0) 55%,rgba(7,8,11,.55));pointer-events:none}
.snx-video-play{
  position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
  width:76px;height:76px;padding:0;border-radius:50%;cursor:pointer;
  background:#2fa9b8;border:0;box-shadow:0 10px 34px -6px rgba(47,169,184,.55);
  transition:transform .25s,background .25s;
}
.snx-video-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-36%,-50%);border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.snx-video:hover .snx-video-play{transform:translate(-50%,-50%) scale(1.06);background:#36b9c9}
.snx-video-play:focus-visible{outline:2px solid #5fd0d8;outline-offset:4px}
.snx-video-duree{position:absolute;right:14px;bottom:14px;z-index:2;padding:4px 10px;border-radius:980px;background:rgba(7,8,11,.72);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:13px}

@media (prefers-reduced-motion:reduce){.snx-3d-btn,.snx-video-play,.snx-modal-body iframe{transition:none}}