/* Composant "video-reveal" — blocs vidéo déclenchés au scroll.
   Utilisé par /chiffres et /solution. Markup attendu :
   <article class="vr-block">
     <div class="vr-frame"><video data-src="..." muted playsinline preload="none"></video></div>
     <div class="vr-caption">…</div>  (optionnel, petite source pixel)
     <p class="vr-text">…</p>         (optionnel, texte descriptif)
   </article>
   Charger assets/video-reveal.js en fin de page. */

.vr-block { margin-top:72px; opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.vr-block.visible { opacity:1; transform:none; }
.vr-frame { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0B0B0B; }
.vr-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vr-caption { margin-top:14px; text-align:center; font-family:'basis33',monospace; font-size:12px; color:rgba(255,255,255,.4); letter-spacing:.05em; }
.vr-text { margin:18px auto 0; max-width:640px; text-align:center; font-size:14px; color:rgba(255,255,255,.7); line-height:1.625; }

@media (min-width:640px){
  .vr-block { margin-top:96px; }
  .vr-text { font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
  .vr-block { opacity:1 !important; transform:none !important; transition:none !important; }
}