/* ============================================================
   COMPOSANT VSL PARTAGÉ — index.html + merci.html
   Lecture automatique en sourdine, puis clic pour activer le son
   et repartir du début.

   N'utilise que des variables définies dans les DEUX pages :
   --accent, --accent-light, --dur, --ease.
   ============================================================ */

[data-vsl]{position:relative}

[data-vsl] video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;background:#000;display:block;
}

/* La superposition n'apparaît que si le script est actif : sans JS,
   le lecteur natif reste utilisable avec ses propres contrôles. */
.vsl-overlay{display:none}

[data-vsl].vsl-ready .vsl-overlay{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  position:absolute;inset:0;width:100%;height:100%;
  padding:20px;text-align:center;
  background:linear-gradient(180deg,rgba(10,7,17,.14),rgba(10,7,17,.52));
  border:0;cursor:pointer;
  font:inherit;color:#fff;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur) var(--ease);
}
[data-vsl].vsl-ready .vsl-overlay:hover{background:linear-gradient(180deg,rgba(10,7,17,.08),rgba(10,7,17,.46))}

/* Une fois le son activé, on rend la main au lecteur natif */
[data-vsl].is-unlocked .vsl-overlay{display:none}

/* Bouton circulaire */
.vsl-ov-btn{
  position:relative;
  width:72px;height:72px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  box-shadow:0 12px 34px rgba(132,87,255,.45);
  transition:transform var(--dur) var(--ease);
}
.vsl-overlay:hover .vsl-ov-btn{transform:scale(1.07)}
.vsl-overlay:active .vsl-ov-btn{transform:scale(1)}
.vsl-ov-btn svg{width:27px;height:27px;display:block}

/* Anneau pulsé — discret, et désactivé si l'utilisateur préfère
   réduire les animations */
@media (prefers-reduced-motion:no-preference){
  .vsl-ov-btn::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    border:2px solid var(--accent-light);
    opacity:.55;pointer-events:none;
    animation:vsl-pulse 2.6s var(--ease) infinite;
  }
  @keyframes vsl-pulse{
    0%   {transform:scale(1);opacity:.55}
    70%  {transform:scale(1.28);opacity:0}
    100% {transform:scale(1.28);opacity:0}
  }
}

/* Libellés */
.vsl-ov-label{
  font-size:15.5px;font-weight:800;letter-spacing:.01em;line-height:1.35;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.vsl-ov-sub{
  font-size:12.5px;font-weight:600;line-height:1.4;
  color:rgba(255,255,255,.76);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* Deux variantes : « activer le son » (lecture auto en cours)
   ou « lancer la vidéo » (lecture auto bloquée par le navigateur) */
[data-vsl] .vsl-when-playing{display:block}
[data-vsl] .vsl-when-blocked{display:none}
[data-vsl].autoplay-blocked .vsl-when-playing{display:none}
[data-vsl].autoplay-blocked .vsl-when-blocked{display:block}

[data-vsl] .vsl-ico-sound{display:block}
[data-vsl] .vsl-ico-play{display:none}
[data-vsl].autoplay-blocked .vsl-ico-sound{display:none}
[data-vsl].autoplay-blocked .vsl-ico-play{display:block}

/* Codec illisible / fichier manquant : on retire l'invitation au clic
   pour ne pas promettre une lecture impossible. */
[data-vsl].vsl-error .vsl-overlay{cursor:default;background:rgba(10,7,17,.72)}
[data-vsl].vsl-error .vsl-ov-btn{display:none}

@media (max-width:480px){
  .vsl-ov-btn{width:62px;height:62px}
  .vsl-ov-btn svg{width:23px;height:23px}
  .vsl-ov-label{font-size:14px}
  .vsl-ov-sub{font-size:11.5px}
}