/* ==================================================
   LIGHTBOX GLOBALE
================================================== */

.site-lightbox{
    position:fixed;
    inset:0;

    z-index:9999;

    display:none;

    background:#fffdef;
}


.site-lightbox.active{
    display:block;
}



/* ==================================================
   VIEWPORT
================================================== */

.site-lightbox-viewport{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    overflow:hidden;

    touch-action:none;
}



/* ==================================================
   IMAGE
================================================== */

.site-lightbox-image{
    display:block;

    width:auto;
    height:auto;

    max-width:90%;
    max-height:90vh;

    object-fit:contain;

    cursor:zoom-in;

    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;

    transform-origin:center center;

    will-change:transform;
}


.site-lightbox.is-zoomed
.site-lightbox-image{
    cursor:grab;
}


.site-lightbox.is-dragging
.site-lightbox-image{
    cursor:grabbing;
}



/* ==================================================
   BOUTONS
================================================== */

.site-lightbox button{
    position:absolute;

    z-index:10;

    padding:0;
    border:0;

    color:#772faf;
    background:none;

    font-family:'Tovari Sans', sans-serif;

    cursor:pointer;

    transition:
        transform .2s ease,
        color .2s ease;
}



/* ==================================================
   FERMER
================================================== */

.site-lightbox-close{
    top:20px;
    right:25px;

    font-size:50px;
}


.site-lightbox-close:hover{
    color:#36e983;

    transform:
        scale(1.2)
        rotate(3deg);
}



/* ==================================================
   PRÉCÉDENT
================================================== */

.site-lightbox-prev{
    left:20px;
    top:50%;

    font-size:50px;

    transform:
        translateY(-50%);
}


.site-lightbox-prev:hover{
    color:#36e983;

    transform:
        translateY(-50%)
        scale(1.2)
        rotate(-3deg);
}



/* ==================================================
   SUIVANT
================================================== */

.site-lightbox-next{
    right:20px;
    top:50%;

    font-size:50px;

    transform:
        translateY(-50%);
}


.site-lightbox-next:hover{
    color:#36e983;

    transform:
        translateY(-50%)
        scale(1.2)
        rotate(3deg);
}



/* ==================================================
   ANIMATIONS
================================================== */

.site-lightbox-image.lightbox-open{
    animation:
        lightboxOpen .3s cubic-bezier(.22,1,.36,1);
}


.site-lightbox-image.slide-next{
    animation:
        lightboxNext .3s cubic-bezier(.22,1,.36,1);
}


.site-lightbox-image.slide-prev{
    animation:
        lightboxPrev .3s cubic-bezier(.22,1,.36,1);
}


@keyframes lightboxOpen{

    from{
        opacity:0;
        transform:scale(.92);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}


@keyframes lightboxNext{

    from{
        opacity:0;
        transform:translateX(50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


@keyframes lightboxPrev{

    from{
        opacity:0;
        transform:translateX(-50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

.site-lightbox{
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext x='16' y='25' text-anchor='middle' font-family='Arial,sans-serif' font-size='32' font-weight='bold' fill='%23772faf'%3E%C3%97%3C/text%3E%3C/svg%3E")
        16 16,
        pointer;
}
.site-lightbox-image{
    cursor:zoom-in;
}

.site-lightbox.is-zoomed
.site-lightbox-image{
    cursor:grab;
}

.site-lightbox.is-dragging
.site-lightbox-image{
    cursor:grabbing;
}

.site-lightbox button{
    cursor:pointer;
}
/* Mobile : image quasi plein écran et commandes tactiles */
.site-lightbox button { -webkit-tap-highlight-color:transparent; }
.site-lightbox-image { touch-action:none; }
@media (max-width: 767px) {
  .site-lightbox-viewport { padding:8px; }
  .site-lightbox-image { max-width:100%; max-height:calc(100dvh - 16px); }
  .site-lightbox-prev, .site-lightbox-next { display:none !important; }
  .site-lightbox-close { top:max(8px, env(safe-area-inset-top)); right:12px; font-size:42px; }
}

/* Image précédente conservée pendant le chargement de la suivante */
.site-lightbox-previous {
    position:absolute;
    left:50%; top:50%;
    max-width:none; max-height:none;
    object-fit:contain;
    pointer-events:none;
    z-index:2;
    translate:-50% -50%;
}
.site-lightbox-loading {
    position:absolute;
    z-index:3;
    left:50%; bottom:24px;
    width:24px; height:24px;
    margin-left:-12px;
    border:3px solid rgba(119,47,175,.2);
    border-top-color:#772faf;
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s;
    animation:siteLightboxSpin .7s linear infinite;
}
.site-lightbox-loading.visible {opacity:1;}
@keyframes siteLightboxSpin {to {transform:rotate(360deg);}}