/* ===================================================== INTERACTIVE SHOWCASE : BOUTON LIGHTBOX ===================================================== */ .showcase-lightbox-btn{ position: absolute; bottom: 20px; right: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; background: rgba(0,0,0,0.55); border: 1.5px solid rgba(230,214,158,0.45); backdrop-filter: blur(10px); color: var(--gold); transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease; } .showcase-lightbox-btn:hover{ transform: scale(1.12); background: rgba(255,224,150,0.22); border-color: var(--gold); box-shadow: 0 0 12px rgba(230,214,158,0.45), 0 0 22px rgba(230,214,158,0.25); } @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))){ .showcase-lightbox-btn{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } } .showcase-lightbox-btn:active{ transform: scale(0.98); } .interactive-showcase.reverse .showcase-lightbox-btn{ left: 20px; right: auto; } /* ===================================================== RESPONSIVE : bouton + icône plus petits sur mobile ===================================================== */ @media (max-width: 640px){ .showcase-lightbox-btn{ width: 44px; height: 44px; bottom: 14px; right: 14px; border-width: 1.2px; background: rgba(0,0,0,0.52); } .showcase-lightbox-btn .lightbox-icon{ width: 20px; height: 20px; } .interactive-showcase.reverse .showcase-lightbox-btn{ left: 14px; right: auto; } } @media (max-width: 420px){ .showcase-lightbox-btn{ width: 40px; height: 40px; bottom: 12px; right: 12px; } .showcase-lightbox-btn .lightbox-icon{ width: 18px; height: 18px; } .interactive-showcase.reverse .showcase-lightbox-btn{ left: 12px; } } /* petits écrans en hauteur (téléphones) */ @media (max-height: 720px){ .showcase-lightbox-btn{ width: 46px; height: 46px; } } /* ===================================================== LIGHTBOX : INTERDIRE LE SCROLL + RADIUS IMAGE (le JS doit ajouter la classe .lightbox-open sur ou ) ===================================================== */ /* lock scroll page */ html.lightbox-open, body.lightbox-open{ overflow: hidden; height: 100%; touch-action: none; } /* iOS: bloque vraiment le scroll (évite le “rubber band”) */ body.lightbox-open{ position: fixed; width: 100%; } /* overlay : pas de scroll interne non plus */ .lightbox-overlay, .showcase-lightbox-overlay, #lightboxOverlay{ position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; overscroll-behavior: contain; touch-action: none; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: rgba(0,0,0,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* conteneur */ .lightbox-content, .showcase-lightbox-content, #lightboxContent{ width: min(1100px, 92vw); max-height: min(82vh, 82svh); overflow: hidden; border-radius: 26px; border: 1px solid rgba(230,214,158,0.22); box-shadow: 0 28px 90px rgba(0,0,0,0.55); background: radial-gradient(900px 520px at 40% 18%, rgba(230,214,158,0.10), rgba(230,214,158,0.00) 62%), linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.54)); padding: 14px; } /* zone média : radius + clip */ .lightbox-media, .showcase-lightbox-media, #lightboxMedia{ border-radius: 18px; overflow: hidden; } /* image : radius visible + pas de scroll */ .lightbox-content img, .showcase-lightbox-content img, #lightboxContent img{ display: block; width: 100%; height: auto; max-height: min(74vh, 74svh); object-fit: contain; border-radius: 18px; } /* mobile : rayon un peu réduit */ @media (max-width: 640px){ .lightbox-content, .showcase-lightbox-content, #lightboxContent{ width: min(520px, 94vw); border-radius: 22px; padding: 12px; } .lightbox-media, .showcase-lightbox-media, #lightboxMedia{ border-radius: 16px; } .lightbox-content img, .showcase-lightbox-content img, #lightboxContent img{ border-radius: 16px; max-height: min(70vh, 70svh); } } /* =========================================================== ✨ LIGHTBOX FULLSCREEN MINIMALISTE — LUNANOVA (FLUID) =========================================================== */ .showcase-lightbox{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 14, 10, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 9999; overflow: hidden; touch-action: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .20s ease, visibility 0s linear .20s; } .showcase-lightbox.active{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .20s ease; } /* BACKDROP */ .slb-backdrop{ position: absolute; inset: 0; } /* =========================================================== CONTENU FULLSCREEN — ZONE DE SÉCURITÉ AUTOUR DE LA PHOTO =========================================================== */ .slb-content{ position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 90px 120px; box-sizing: border-box; } /* =========================================================== SLIDER =========================================================== */ .slb-slider{ flex: 1; width: 100%; height: 100%; display: flex; overflow: hidden; align-items: center; justify-content: center; touch-action: pan-y; position: relative; } .slb-track-wrapper{ width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; } .slb-track{ display: flex; height: 100%; width: 100%; will-change: transform; transform: translate3d(0,0,0); } .slb-slide{ min-width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /* =========================================================== IMAGE — jamais recouverte grâce à la zone padding =========================================================== */ .showcase-lightbox .slb-slide img{ display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; clip-path: inset(0 round 12px); background: rgba(0,0,0,0.18); box-shadow: 0 12px 38px rgba(0,0,0,0.45); user-select: none; -webkit-user-drag: none; pointer-events: auto; } /* =========================================================== DOTS — jamais sur l’image =========================================================== */ .slb-dots{ display: flex; gap: 12px; padding: 36px 0; z-index: 40; } .slb-dot{ width: 11px; height: 11px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.32); border: 1px solid rgba(230,214,158,0.45); transition: background .25s ease, transform .25s ease; } .slb-dot.active{ background: #e6d69e; transform: scale(1.35); } /* =========================================================== MOBILE =========================================================== */ @media (max-width: 820px){ .slb-content{ padding: 70px 30px; } .showcase-lightbox .slb-slide img{ max-width: 100%; max-height: 80vh; } }