/** * Lightbox mutualisée. * Overlay injecté au niveau par assets/scripts/lightbox.js. * Voile et z-index alignés sur les modales du thème. */ /* Curseur zoom sur les images agrandissables */ .js-lightbox { cursor: zoom-in; } .m-lightbox { position: fixed; inset: 0; z-index: 1055; display: none; align-items: center; justify-content: center; padding: 2rem; background: rgba(32, 37, 49, 0.9); } .m-lightbox.is-open { display: flex; } .m-lightbox__inner { position: relative; max-width: 90vw; max-height: 90vh; height: 75%; width: auto; } .m-lightbox__image { display: block; max-width: 90vw; max-height: 90vh; width: auto; height: 100%; } .m-lightbox__close { position: absolute; top: -2rem; right: -2rem; width: 2.25rem; height: 2.25rem; padding: 0; font-size: 1.75rem; line-height: 1; color: #fff; background: transparent; border: none; cursor: pointer; transition: opacity 0.2s ease; } .m-lightbox__close:hover, .m-lightbox__close:focus-visible { opacity: 0.7; } /* Empêche le défilement de la page quand la lightbox est ouverte */ body.m-lightbox-open { overflow: hidden; } @media (max-width: 1024px) { .m-lightbox { padding: 1rem; } .m-lightbox__inner { width: 100%; height: auto; } .m-lightbox__close { top: -2.5rem; right: -0.75rem; } }