/* =============================================================
   SUPAPUNK — vidéo explicative en overlay
   Bouton [data-video-open] (+ data-video-start en secondes),
   overlay plein écran : la vidéo carrée prend la plus grande
   taille possible, limitée par la largeur sur mobile et par la
   hauteur sur desktop.
   ============================================================= */

/* bouton : pastille lecture */
.vbtn .play {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-signal); display: inline-grid; place-items: center;
}
.vbtn .play::before {
  content: ""; margin-left: 2px;
  border-left: 7px solid #0A0A0A; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.btn--primary.vbtn .play { background: #0A0A0A; }
.btn--primary.vbtn .play::before { border-left-color: var(--c-signal); }
.sig .btn--primary.vbtn .play { background: var(--c-signal); }
.sig .btn--primary.vbtn .play::before { border-left-color: #0A0A0A; }
.vbtn .dur { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; opacity: .62; }
.vbtn:hover .play { transform: scale(1.08); }
.vbtn .play { transition: transform var(--fast); }

/* rangée de bouton seule, sous un titre de section */
.vcta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.6vw, 30px); }
.sec-head .vcta, .center .vcta, .vcta--center { justify-content: center; }

/* overlay */
.vmodal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px;
  background: rgba(10,10,10,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity var(--med);
}
.vmodal.open { display: flex; }
.vmodal.shown { opacity: 1; }

.vmodal-box {
  /* carré maximal : la place restante après la barre du haut et les chapitres */
  --vs: min(calc(100vw - 24px), calc(100vh - 132px));
  --vs: min(calc(100vw - 24px), calc(100dvh - 132px));
  width: var(--vs); max-width: 100%;
  transform: translateY(14px) scale(.985); transition: transform var(--med);
}
.vmodal.shown .vmodal-box { transform: none; }

.vmodal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; min-height: 38px;
}
.vmodal-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #A3A099;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vmodal-label b { color: var(--c-signal); font-weight: 500; }
.vmodal-label .short { display: none; }
.vmodal-close {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.08); border-radius: var(--r-pill); padding: 11px 16px; color: #D9D6CF;
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.vmodal-close:hover, .vmodal-close:focus-visible { color: #0A0A0A; background: var(--c-signal); }

.vmodal video {
  display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;
  background: #0A0A0A; border-radius: var(--r-sm);
}

.vmodal-chaps {
  display: flex; gap: 8px; margin-top: 10px; align-items: center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vmodal-chaps::-webkit-scrollbar { display: none; }
.vmodal-chap {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); color: #A3A099;
  transition: background var(--fast), color var(--fast);
}
.vmodal-chap:hover { color: #FFFFFF; background: rgba(255,255,255,.13); }
.vmodal-chap.is-on { background: var(--c-signal); color: #0A0A0A; }
.vmodal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vmodal-cta { padding: 11px 16px; font-size: 10px; }

@media (max-width: 640px) {
  .vcta .btn { width: 100%; }
  .vmodal { padding: 8px; }
  .vmodal-label .long { display: none; }
  .vmodal-label .short { display: inline; }
  .vmodal-box { --vs: min(calc(100vw - 16px), calc(100vh - 150px)); --vs: min(calc(100vw - 16px), calc(100dvh - 150px)); }
  .vmodal-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vmodal, .vmodal-box { transition: none; }
}