/* ============================================================
   BB Galerie — Masonry Grid + Lightbox
   Version: 1.0.5
   ============================================================ */

/* ─── MASONRY GRID (JS-positioned) ─── */

.bb-galerie-grid {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Anti-scintillement : masquer jusqu'au premier rendu */
.bb-galerie-grid.bb-galerie-loading {
    visibility: hidden !important;
    min-height: 400px !important;
}

.bb-galerie-grid.bb-galerie-ready {
    visibility: visible !important;
    min-height: auto !important;
}

.bb-galerie-item {
    cursor: pointer !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    line-height: 0 !important;
}

.bb-galerie-item:hover {
    opacity: 0.85 !important;
    transition: opacity 0.2s ease !important;
}

.bb-galerie-thumb {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 6px !important;
}

/* ─── VIDEO THUMBNAIL ─── */

.bb-galerie-video-thumb {
    position: relative !important;
    background: #1a1a1a !important;
    min-height: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
}

.bb-galerie-video-thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 6px !important;
}

.bb-galerie-play-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.bb-galerie-play-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: #fff !important;
    margin-left: 3px !important;
}

/* ─── LIGHTBOX OVERLAY ─── */

.bb-galerie-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0;
    transition: opacity 0.25s ease !important;
}

/* Décaler si barre admin WP visible */
.admin-bar .bb-galerie-lightbox {
    top: 32px !important;
    height: calc(100% - 32px) !important;
}

@media (max-width: 782px) {
    .admin-bar .bb-galerie-lightbox {
        top: 46px !important;
        height: calc(100% - 46px) !important;
    }
}

.bb-galerie-lightbox.bb-galerie-visible {
    opacity: 1;
}

/* ─── LIGHTBOX HEADER (superposé sur le média) ─── */

.bb-galerie-lb-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    color: #fff !important;
    z-index: 20 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%) !important;
}

.bb-galerie-lb-counter-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.bb-galerie-lb-timer {
    width: 28px !important;
    height: 28px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    flex-shrink: 0 !important;
}

.bb-galerie-lb-timer.bb-galerie-timer-visible {
    opacity: 1 !important;
}

/* Pulsation pour les vidéos en lecture */
.bb-galerie-lb-timer.bb-galerie-timer-video .bb-galerie-lb-timer-ring {
    stroke-dashoffset: 0 !important;
    animation: bb-galerie-pulse 1.5s ease-in-out infinite !important;
}

@keyframes bb-galerie-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.bb-galerie-lb-counter {
    font-size: 14px !important;
    opacity: 0.8 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.bb-galerie-lb-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.bb-galerie-lb-btn {
    background: none !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.bb-galerie-lb-btn:hover {
    opacity: 1 !important;
}

.bb-galerie-lb-btn svg {
    width: 22px !important;
    height: 22px !important;
}

.bb-galerie-lb-btn.bb-galerie-playing {
    opacity: 1 !important;
    color: #ff0099 !important;
}

/* ─── SHARE OVERLAY ─── */

.bb-galerie-share-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.bb-galerie-share-overlay.bb-galerie-share-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.bb-galerie-share-panel {
    position: relative !important;
    text-align: center !important;
    padding: 40px !important;
}

.bb-galerie-share-close {
    position: absolute !important;
    top: -40px !important;
    right: -20px !important;
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    padding: 8px !important;
    transition: color 0.2s ease !important;
}

.bb-galerie-share-close:hover {
    color: #fff !important;
}

.bb-galerie-share-close svg {
    width: 24px !important;
    height: 24px !important;
}

.bb-galerie-share-title {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 30px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.bb-galerie-share-buttons {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
}

.bb-galerie-share-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    transition: transform 0.2s ease !important;
}

.bb-galerie-share-btn:hover {
    transform: translateY(-4px) !important;
}

.bb-galerie-share-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: box-shadow 0.2s ease !important;
}

.bb-galerie-share-icon svg {
    width: 26px !important;
    height: 26px !important;
}

.bb-galerie-share-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 11px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.bb-galerie-share-btn:hover .bb-galerie-share-label {
    color: #fff !important;
}

/* Button colors */
.bb-galerie-share-facebook {
    background: #1877f2 !important;
    color: #fff !important;
}
.bb-galerie-share-btn:hover .bb-galerie-share-facebook {
    box-shadow: 0 4px 20px rgba(24, 119, 242, 0.5) !important;
}

.bb-galerie-share-native {
    background: #34c759 !important;
    color: #fff !important;
}
.bb-galerie-share-btn:hover .bb-galerie-share-native {
    box-shadow: 0 4px 20px rgba(52, 199, 89, 0.5) !important;
}

.bb-galerie-share-copy {
    background: #6c63ff !important;
    color: #fff !important;
}
.bb-galerie-share-btn:hover .bb-galerie-share-copy {
    box-shadow: 0 4px 20px rgba(108, 99, 255, 0.5) !important;
}

.bb-galerie-share-download {
    background: #ff6b6b !important;
    color: #fff !important;
}
.bb-galerie-share-btn:hover .bb-galerie-share-download {
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.5) !important;
}

/* ─── NOTIFICATION ─── */

.bb-galerie-lb-notif {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    z-index: 1000000 !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

.bb-galerie-lb-notif-hide {
    opacity: 0 !important;
}

/* ─── LIGHTBOX CONTENT ─── */

.bb-galerie-lb-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.bb-galerie-lb-media {
    max-width: 90% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bb-galerie-lb-media img {
    max-width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    user-select: none !important;
}

.bb-galerie-lb-media video {
    max-width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 4px !important;
    background: #000 !important;
}

/* Ajuster si barre admin */
.admin-bar .bb-galerie-lb-media img {
    max-height: calc(100vh - 52px) !important;
}
.admin-bar .bb-galerie-lb-media video {
    max-height: calc(100vh - 52px) !important;
}

/* ─── LIGHTBOX NAV ARROWS (grosses) ─── */

.bb-galerie-lb-prev,
.bb-galerie-lb-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease, background 0.2s ease !important;
}

@media (hover: hover) {
    .bb-galerie-lb-prev:hover,
    .bb-galerie-lb-next:hover {
        opacity: 1 !important;
        background: rgba(255, 0, 153, 0.7) !important;
    }
}

.bb-galerie-lb-prev:active,
.bb-galerie-lb-next:active {
    opacity: 1 !important;
    background: rgba(255, 0, 153, 0.7) !important;
}

.bb-galerie-lb-prev {
    left: 16px !important;
}

.bb-galerie-lb-next {
    right: 16px !important;
}

.bb-galerie-lb-prev svg,
.bb-galerie-lb-next svg {
    width: 30px !important;
    height: 30px !important;
}

/* ─── RESPONSIVE ─── */
/* Colonnes et gaps gérés par layoutMasonry() en JS */

/* ─── LIGHTBOX MOBILE (portrait + paysage) ─── */

@media (pointer: coarse) {
    .bb-galerie-lb-media {
        max-width: 100% !important;
    }

    .bb-galerie-lb-prev,
    .bb-galerie-lb-next {
        width: 52px !important;
        height: 52px !important;
        opacity: 0.85 !important;
    }

    .bb-galerie-lb-prev svg,
    .bb-galerie-lb-next svg {
        width: 28px !important;
        height: 28px !important;
        stroke-width: 3.5 !important;
    }

    .bb-galerie-lb-prev {
        left: 6px !important;
    }

    .bb-galerie-lb-next {
        right: 6px !important;
    }

    .bb-galerie-share-panel {
        padding: 20px !important;
    }

    .bb-galerie-share-close {
        top: -10px !important;
        right: 0 !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bb-galerie-share-close svg {
        width: 20px !important;
        height: 20px !important;
    }

    .bb-galerie-share-buttons {
        gap: 12px !important;
    }

    .bb-galerie-share-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
    }

    .bb-galerie-share-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .bb-galerie-share-label {
        font-size: 10px !important;
    }
}

/* ─── ADMIN ─── */

.bb-galerie-admin-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

.bb-galerie-admin-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a1a;
}

.bb-galerie-admin-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-galerie-admin-item .bb-galerie-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(220, 0, 0, 0.8);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    display: none;
    padding: 0;
}

.bb-galerie-admin-item:hover .bb-galerie-remove {
    display: block;
}

.bb-galerie-admin-item .bb-galerie-video-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}