/* portfolio-mosaic — port fidèle Portfolio VIP justified (sans CORS * ni hacks SIO) */ .lws-portfolio-mosaic { --phd-mobile-padding: clamp(10px, 3vw, 20px); position: relative; width: 100%; max-width: 100%; margin: 0; font-family: 'Montserrat', system-ui, -apple-system, sans-serif; background-color: #1a1a1a; padding: 0; box-sizing: border-box; line-height: 1.5; text-align: left; overflow: visible; min-height: 100vh; min-height: 100svh; } .lws-portfolio-mosaic .phd-root { position: relative; width: 100%; overflow: visible; } .lws-portfolio-mosaic .phd-grid { width: 100%; margin: 0; display: flex; flex-direction: column; min-height: 0; overflow: visible !important; overflow-x: hidden !important; } .lws-portfolio-mosaic .phd-row { display: flex; flex-wrap: nowrap; gap: 0; width: 100%; margin-bottom: 0; box-sizing: border-box; } .lws-portfolio-mosaic .phd-item { position: relative; overflow: hidden; cursor: pointer; flex-shrink: 0; background: #0f0f0f; opacity: 0; transform: translateY(15px); will-change: opacity, transform; box-sizing: border-box; margin: 0; padding: 0; } .lws-portfolio-mosaic .phd-item.loaded { animation: lwsPhdFadeIn 0.4s ease-out forwards; } @keyframes lwsPhdFadeIn { to { opacity: 1; transform: translateY(0); } } .lws-portfolio-mosaic .phd-item img, .lws-portfolio-mosaic .phd-item video { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease; transform: scale(1); } .lws-portfolio-mosaic .phd-item.phd-media-ready img, .lws-portfolio-mosaic .phd-item.phd-media-ready video { opacity: 1; } .lws-portfolio-mosaic .phd-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; z-index: 3; backdrop-filter: blur(3px); } .lws-portfolio-mosaic .phd-item:hover .phd-overlay, .lws-portfolio-mosaic .phd-item:focus-visible .phd-overlay, .lws-portfolio-mosaic .phd-item.touch-active .phd-overlay { opacity: 1; } .lws-portfolio-mosaic .phd-icon { width: clamp(40px, 8vw, 60px); height: clamp(40px, 8vw, 60px); border-radius: 50%; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; color: white; font-size: clamp(16px, 4vw, 24px); } .lws-portfolio-mosaic .phd-video-badge { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.6); color: white; padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; z-index: 4; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; gap: 6px; } .lws-portfolio-mosaic .phd-video-badge::before { content: ''; display: block; width: 8px; height: 8px; background-color: #ff4757; border-radius: 50%; box-shadow: 0 0 8px #ff4757; } /* Lightbox : sélecteurs hors parent mosaïque (peut être porté sur ) */ .lws-portfolio-mosaic .phd-lightbox, .phd-lightbox { display: none; position: fixed; inset: 0; width: 100%; height: 100svh; background: rgba(5, 5, 5, 0.98); /* Au-dessus du chrome header/floats (9000/9100) */ z-index: 10050; opacity: 0; transition: opacity 0.3s ease; overflow: hidden; } .lws-portfolio-mosaic .phd-lightbox.active, .phd-lightbox.active { display: flex; opacity: 1; } .lws-portfolio-mosaic .phd-lightbox[hidden], .phd-lightbox[hidden] { display: none !important; } .lws-portfolio-mosaic .phd-lightbox-content, .phd-lightbox .phd-lightbox-content { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: clamp(20px, 8vw, 60px); box-sizing: border-box; } .lws-portfolio-mosaic .phd-lightbox img, .lws-portfolio-mosaic .phd-lightbox video, .phd-lightbox img, .phd-lightbox video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .lws-portfolio-mosaic .phd-lb-btn, .phd-lightbox .phd-lb-btn { position: absolute; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: white; cursor: pointer; z-index: 10051; display: flex; align-items: center; justify-content: center; width: clamp(40px, 10vw, 55px); height: clamp(40px, 10vw, 55px); font-size: clamp(16px, 4vw, 22px); backdrop-filter: blur(15px); transition: all 0.2s ease; } .lws-portfolio-mosaic .phd-lb-btn:hover, .phd-lightbox .phd-lb-btn:hover { background: rgba(255, 255, 255, 0.2); } .lws-portfolio-mosaic .phd-close-btn, .phd-lightbox .phd-close-btn { top: 20px; right: 20px; border-radius: 50%; } .lws-portfolio-mosaic .phd-prev-btn, .phd-lightbox .phd-prev-btn { left: 15px; top: 50%; transform: translateY(-50%); border-radius: 50%; } .lws-portfolio-mosaic .phd-next-btn, .phd-lightbox .phd-next-btn { right: 15px; top: 50%; transform: translateY(-50%); border-radius: 50%; } .lws-portfolio-mosaic .phd-counter, .phd-lightbox .phd-counter { display: none; } .lws-portfolio-mosaic .phd-loader { display: flex; align-items: center; justify-content: center; min-height: 250px; width: 100%; } .lws-portfolio-mosaic .phd-loader[hidden] { display: none; } .lws-portfolio-mosaic .phd-loader::before { content: ''; width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.1); border-top-color: #fff; border-radius: 50%; animation: lwsPhdSpin 0.8s linear infinite; } @keyframes lwsPhdSpin { to { transform: rotate(360deg); } } .lws-portfolio-mosaic .phd-empty { color: #ccc; padding: 2rem; text-align: center; font-size: 0.95rem; } @media (max-width: 900px) { .lws-portfolio-mosaic .phd-item { min-width: 0; } .lws-portfolio-mosaic .phd-lightbox-content, .phd-lightbox .phd-lightbox-content { padding: 20px 5px; } .lws-portfolio-mosaic .phd-lightbox img, .lws-portfolio-mosaic .phd-lightbox video, .phd-lightbox img, .phd-lightbox video { max-width: 94%; max-height: 94svh; } .lws-portfolio-mosaic .phd-prev-btn, .phd-lightbox .phd-prev-btn { left: 10px; background: rgba(0,0,0,0.4); } .lws-portfolio-mosaic .phd-next-btn { right: 10px; background: rgba(0,0,0,0.4); } .lws-portfolio-mosaic .phd-close-btn { top: 12px; right: 12px; background: rgba(0,0,0,0.4); } } @media (min-width: 769px) and (max-width: 1200px) { .lws-portfolio-mosaic .phd-item { min-width: 150px; } } @media (min-width: 1201px) { .lws-portfolio-mosaic .phd-item { min-width: 200px; } } @media (prefers-reduced-motion: reduce) { .lws-portfolio-mosaic .phd-item.loaded { animation: none; opacity: 1; transform: none; } }