/**
 * Mobile Lightbox Bypass - Styles
 * Lightbox simple et rapide pour mobile
 */

/* Lightbox mobile uniquement */
@media (max-width: 640px) {
    #mobile-lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        display: none;
    }

    #mobile-lightbox * {
        box-sizing: border-box;
    }

    /* Overlay sombre */
    .mobile-lightbox-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        -webkit-animation: fadeIn 0.3s ease;
                animation: fadeIn 0.3s ease;
    }

    @-webkit-keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Contenu */
    .mobile-lightbox-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 60px 20px 80px 20px;
    }

    /* Bouton fermer */
    .mobile-lightbox-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        font-size: 40px;
        line-height: 1;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-lightbox-close:active {
        background: rgba(255, 255, 255, 0.4);
    }

    /* Flèches de navigation */
    .mobile-lightbox-prev,
    .mobile-lightbox-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.4);
        border: none;
        color: white;
        font-size: 50px;
        line-height: 1;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s ease, opacity 0.3s ease;
        -webkit-tap-highlight-color: transparent;
        font-family: Arial, sans-serif;
        font-weight: 100;
    }

    .mobile-lightbox-prev {
        left: 10px;
    }

    .mobile-lightbox-next {
        right: 10px;
    }

    .mobile-lightbox-prev:active,
    .mobile-lightbox-next:active {
        background: rgba(0, 0, 0, 0.7);
    }

    /* Container de l'image */
    .mobile-lightbox-image-container {
        width: 100%;
        max-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* Loader pendant le chargement */
    .mobile-lightbox-image-container.loading::before {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        border: 5px solid rgba(255, 255, 255, 0.2);
        border-top-color: white;
        border-radius: 50%;
        -webkit-animation: spinner 0.8s linear infinite;
                animation: spinner 0.8s linear infinite;
        z-index: 10;
    }

    @-webkit-keyframes spinner {
        to { transform: rotate(360deg); }
    }

    @keyframes spinner {
        to { transform: rotate(360deg); }
    }

    /* Image */
    #mobile-lightbox-img {
        max-width: 100%;
        max-height: 70vh;
        width: auto;
        height: auto;
        -o-object-fit: contain;
           object-fit: contain;
        border-radius: 4px;
        transition: opacity 0.2s ease;
    }

    @-webkit-keyframes zoomIn {
        from { 
            opacity: 0;
            transform: scale(0.9);
        }
        to { 
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes zoomIn {
        from { 
            opacity: 0;
            transform: scale(0.9);
        }
        to { 
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Compteur */
    .mobile-lightbox-counter {
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        background: rgba(0, 0, 0, 0.6);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        z-index: 99;
        display: none;
    }

    /* Titre */
    .mobile-lightbox-title {
        color: white;
        padding: 15px 20px;
        text-align: center;
        font-size: 15px;
        line-height: 1.4;
        margin-top: 15px;
        max-width: 100%;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        min-height: 20px;
    }

    .mobile-lightbox-title:empty {
        display: none;
    }
}

/* Sur desktop : cacher complètement */
@media (min-width: 641px) {
    #mobile-lightbox {
        display: none !important;
    }
}