/* ==========================================================
   LIGHTBOX - SALON VIOLET
   ========================================================== */


/* ===============================
   CONTENEUR PRINCIPAL
   =============================== */

.salon-overlay {

    position: fixed;
    inset: 0;

    background: rgba(0,0,0,.92);

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

    z-index:99999;

}


.salon-lightbox-content {

    width:100%;

    max-width:90vw;
    max-height:95vh;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    color:white;

}


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

.salon-lightbox-content img {

    display:block;

    max-width:90vw;

    max-height:75vh;

    object-fit:contain;

    margin:auto;

}



/* ===============================
   NAVIGATION + COMPTEUR
   =============================== */

.salon-navigation-compteur {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin-top:12px;

}


/* Flèches */

.salon-prev,
.salon-next {

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    outline:none;

    padding:0;

    margin:0;

    width:auto;

    height:auto;


    color:#ffffff;

    font-size:32px;

    line-height:1;

    cursor:pointer;

}


/* Effet survol */

.salon-prev:hover,
.salon-next:hover {

    color:#8e44ad;

}



/* Compteur */

.lightbox-compteur {

    margin:0;

    font-size:14px;

    color:#aaa;

}



/* ===============================
   LEGENDE
   =============================== */

.salon-legende {

    margin-top:15px;

}


.salon-legende h3 {

    margin:0 0 8px 0;

    font-size:24px;

    font-weight:600;

    color:#ffffff;

}


.lightbox-informations {

    margin:5px 0 10px 0;

    font-size:15px;

}


.lightbox-titre {

    font-style:italic;

    color:#ffffff;

}


.lightbox-technique {

    color:#d6d6d6;

}



/* ===============================
   LIEN FICHE ARTISTE
   =============================== */

.lightbox-fiche {

    margin-top:16px;

}


.lightbox-artiste {

    color:#ffffff;

    text-decoration:none;

}


.lightbox-artiste:hover {

    color:#8e44ad;

}


.etoile-societaire {

    color:#ffffff;

}



/* ===============================
   TABLETTE ET MOBILE
   =============================== */

@media (max-width:1024px){


    .salon-lightbox-content {

        width:100vw;

        max-width:100vw;

        padding:0 10px;

    }


    .salon-lightbox-content img {

        max-width:94vw;

        max-height:68vh;

    }


    .salon-navigation-compteur {

        gap:15px;

        margin-top:10px;

    }


    .salon-prev,
    .salon-next {

        font-size:26px;

    }


    .salon-legende h3 {

        font-size:20px;

    }


    .lightbox-informations {

        font-size:14px;

    }

}



/* ===============================
   PETITS SMARTPHONES
   =============================== */

@media (max-width:480px){


    .salon-lightbox-content img {

        max-height:60vh;

    }


    .salon-prev,
    .salon-next {

        font-size:24px;

    }


}

.salon-overlay {
    cursor:pointer;
}


.salon-lightbox-content {
    cursor:default;
}

/* Bouton fermeture lightbox */
.salon-close {

    position:fixed;

    top:20px;

    right:30px;

    background:none;

    border:none;

    padding:0;

    color:white;

    font-size:38px;

    line-height:1;

    cursor:pointer;

    z-index:100001;

}

@media (max-width:480px){

    .salon-close {

        top:10px;

        right:15px;

        font-size:32px;

    }

}