/* Zoom des pochettes (partagé) : aperçu au survol sur l'accueil, lightbox sur les pages de chanson. Voir zoom.js. */
.zprev { display: none; }
@media (hover: hover) and (pointer: fine) {
  .zprev { display: block; position: fixed; z-index: 40; margin: 0; pointer-events: none; visibility: hidden; opacity: 0;
    border-radius: 10px; overflow: hidden; background: #08070c;
    box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(214,168,94,.28);
    transition: opacity .15s ease, visibility 0s .15s; }
  .zprev.on { visibility: visible; opacity: 1; transition: opacity .15s ease; }
  .zprev img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid #d6a85e; outline-offset: 3px; }
.zlb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; box-sizing: border-box; padding: 5vh 5vw;
  background: rgba(8,7,12,.92); cursor: zoom-out; opacity: 0; transition: opacity .2s ease; -webkit-tap-highlight-color: transparent; }
.zlb[hidden] { display: none; }
.zlb.on { opacity: 1; }
.zlb img { display: block; max-width: 90vw; max-height: 90vh; max-height: 90dvh; width: auto; height: auto; border-radius: 10px;
  box-shadow: 0 20px 70px rgba(0,0,0,.7); }
.zlb-x { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(236,228,214,.3); background: rgba(236,228,214,.08); color: #ece4d6; font: 300 28px/1 system-ui, sans-serif; }
.zlb-x:hover { background: rgba(236,228,214,.16); }
.zlb-x:focus-visible { outline: 2px solid #d6a85e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .zprev, .zprev.on, .zlb { transition: none; }
}