/* ========================================
   SVPOP - Overlay-only player
   ======================================== */
.svpop-no-scroll { overflow: hidden; }

/* ---------- Bulle flottante ---------- */
.svpop-bubble {
  position: fixed; bottom: 24px; right: 24px;
  width: 80px; height: 80px;
  background:#000; color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 8px 16px rgba(0,0,0,.2); transition:all .3s ease; z-index:9999; user-select:none;
}
.svpop-bubble:hover { transform: scale(1.1); box-shadow:0 12px 24px rgba(0,0,0,.3); }
.svpop-shape-circle { border-radius:50%; }
.svpop-shape-rect { border-radius:12px; }
.svpop-position-left{ left:24px!important; right:auto!important; }
.svpop-position-right{ right:24px!important; left:auto!important; }
.svpop-position-center{ left:50%!important; right:auto!important; transform:translateX(-50%)!important; }
.svpop-play-icon{ width:24px; height:24px; fill:#ffcf00; transition:fill .3s ease; pointer-events:none; }
.svpop-bubble:hover .svpop-play-icon{ fill:#ff9800; }
.svpop-bubble-title{
  position:absolute; bottom:-32px; left:50%; transform:translateX(-50%);
  white-space:nowrap; background:rgba(0,0,0,.8); color:#fff; padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:600; opacity:0; transition:opacity .3s ease; pointer-events:none; backdrop-filter:blur(8px);
}
.svpop-bubble:hover .svpop-bubble-title{ opacity:1; }

/* ---------- Overlay ---------- */
/* Overlay plein écran */
.svpop-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.90);
  display:none; align-items:center; justify-content:center;
  z-index:2147483647; padding:20px;
}
.svpop-overlay.open{ display:flex; }

/* Cadre lecteur (taille fixée en JS) */
.svpop-viewer{
  position:relative;           /* important pour le <video> absolute */
  overflow:hidden;             /* on masque le surplus (cover)     */
  background:#000;
  border-radius:16px;
  max-width:92vw; max-height:90vh;
  width:  360px;               /* valeurs par défaut (portrait)    */
  height: 640px;
  display:flex; align-items:center; justify-content:center;
}

/* Look “mobile” en portrait */
.svpop-viewer--portrait{ max-width:420px; border-radius:24px; }

/* TON MODÈLE de <video> : cover + centré + absolute */
.svpop-video-cover{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  display:block;
  object-fit:cover !important;          /* remplit le cadre           */
  object-position:center center !important; /* évite la coupe en haut */
  border-radius:0;
}

.svpop-player video, .svpop-player iframe{
  max-width:100%!important; max-height:100%!important;
  width:auto!important; height:auto!important;
  object-fit:contain!important; display:block; background:#000;
}

/* ---------- CTA ---------- */
.svpop-cta-bar{
  padding:16px; text-align:center;
  background:linear-gradient(135deg,#000 0%,#111 100%);
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:12px; border-radius:12px;
}
.svpop-cta{
  background: linear-gradient(135deg,#ffcf00 0%, #ffa000 100%);
  color:#000; padding:12px 20px; border-radius:50px; font-weight:600; font-size:14px; text-decoration:none; display:inline-block;
  transition:all .3s ease; box-shadow:0 4px 12px rgba(255,207,0,.3); text-transform:uppercase; letter-spacing:.5px;
}
.svpop-cta:hover{ background:linear-gradient(135deg,#ffa000,#ff8f00); transform:translateY(-2px); box-shadow:0 6px 16px rgba(255,207,0,.4); }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .svpop-bubble{ width:70px; height:70px; bottom:20px; right:20px; }
  .svpop-position-left{ left:20px!important; }
  .svpop-bubble-title{ font-size:11px; padding:4px 8px; bottom:-28px; }
}
@media (max-width:480px){
  .svpop-bubble{ width:60px; height:60px; bottom:16px; right:16px; }
  .svpop-position-left{ left:16px!important; }
}

/* ---------- Accessibilité & préférences ---------- */
.svpop-bubble:focus{ outline:2px solid #ffcf00; outline-offset:2px; }
.svpop-cta:focus{ outline:2px solid #000; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .svpop-bubble, .svpop-play-icon, .svpop-bubble-title, .svpop-cta{ transition:none; }
  .svpop-bubble:hover{ transform:none; }
}
@media (prefers-color-scheme: dark){
  .svpop-bubble-title{ background:rgba(255,255,255,.1); backdrop-filter:blur(12px); }
  .svpop-cta-bar{ background:linear-gradient(135deg,#0a0a0a 0%, #1a1a1a 100%); border-top-color:rgba(255,255,255,.05); }
}
