/* ========================================================================== EVO-SPIRIT — Lightbox galerie produit Port de rideevolve_theme/re-components.css (.ev-lightbox, #1241) -> tokens evo Overlay sombre volontaire (UX photo) : texte/icones en clair. Monte au niveau -> PAS de prefixe #wrapwrap (memo #1009 R11). ========================================================================== */ .evo-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); display: none; align-items: center; justify-content: center; padding: 40px; user-select: none; } .evo-lightbox.open { display: flex; } .evo-lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); } .evo-lightbox__close, .evo-lightbox__prev, .evo-lightbox__next { position: absolute; background: rgba(20, 20, 20, 0.7); border: 1px solid var(--evo-border-light); color: var(--evo-white); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; display: flex; align-items: center; justify-content: center; } .evo-lightbox__close:hover, .evo-lightbox__prev:hover, .evo-lightbox__next:hover { background: var(--evo-primary); border-color: var(--evo-primary); } .evo-lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; } .evo-lightbox__prev, .evo-lightbox__next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; font-size: 28px; } .evo-lightbox__prev { left: 20px; } .evo-lightbox__next { right: 20px; } .evo-lightbox__counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--evo-white); font-size: 14px; font-family: var(--evo-font-body); background: rgba(20, 20, 20, 0.6); padding: 6px 14px; border-radius: 20px; } .evo-lightbox__external { position: absolute; bottom: 20px; right: 20px; background: var(--evo-primary); color: var(--evo-white) !important; text-decoration: none; padding: 10px 20px; border-radius: 24px; font-family: var(--evo-font-body); font-size: 14px; font-weight: 600; transition: background 0.2s ease; } .evo-lightbox__external:hover { background: var(--evo-primary-dark); color: var(--evo-white) !important; } @media (max-width: 768px) { .evo-lightbox { padding: 16px; } .evo-lightbox__prev, .evo-lightbox__next { width: 44px; height: 44px; } .evo-lightbox__prev { left: 8px; } .evo-lightbox__next { right: 8px; } .evo-lightbox__close { top: 12px; right: 12px; } .evo-lightbox__external { bottom: 12px; right: 12px; padding: 8px 14px; font-size: 13px; } .evo-lightbox__counter { bottom: 12px; left: 12px; transform: none; } }