@charset "iso-8859-1";
/* CSS Document */


/* ============================================================
   LIGHTBOX - CONFIGURATION GENERALE
   ============================================================ */

#galerie_lightbox_structure {

    /*
     * Espaces TOTAUX reserves aux controles.
     *
     * Horizontal : 120px = 60px de chaque cote.
     * Vertical   : 50px  = 25px en haut et en bas.
     */

    --galerie-lightbox-espace-horizontal: 120px;
    --galerie-lightbox-espace-vertical: 50px;

    /*
     * Largeur maximale des lecteurs video.
     * Le JavaScript adapte cette valeur
     * aux dimensions reelles des fichiers MP4.
     */

    --galerie-lightbox-video-largeur-native: 3840px;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    display: none;
    opacity: 0;

    z-index: 21;

    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}


/* ============================================================
   FOND
   ============================================================ */

#galerie_lightbox_fond {

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #000000;
    opacity: 0.7;
}


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

#galerie_lightbox_conteneur {

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    /*
     * Marges gerees par les variables CSS.
     */

    padding:
        calc(var(--galerie-lightbox-espace-vertical) / 2)
        calc(var(--galerie-lightbox-espace-horizontal) / 2);

    /*
     * Centrage horizontal et vertical.
     */

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

    text-align: center;

    /*
     * Ignore les anciennes marges JavaScript.
     */

    margin: 0 !important;
}


/* ============================================================
   CONTENU DE LA LIGHTBOX
   ============================================================ */

#galerie_lightbox_contenu {

    position: relative;

    display: inline-block;

    flex: 0 1 auto;

    box-sizing: border-box;

    width: auto;
    height: auto;

    min-width: 0;

    max-width: 100%;
    max-height: 100%;

    margin: 0 !important;

    line-height: 0;

    opacity: 0;

    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}


/* ============================================================
   PHOTO
   ============================================================ */

#galerie_lightbox_photo {

    position: relative;

    display: none;

    /*
     * Dimensions naturelles.
     * L'image n'est pas agrandie artificiellement.
     */

    width: auto;
    height: auto;

    max-width: 100%;

    max-height: calc(
        100vh - var(--galerie-lightbox-espace-vertical)
    );

    max-height: calc(
        100dvh - var(--galerie-lightbox-espace-vertical)
    );

    object-fit: contain;

    vertical-align: top;

    margin: 0 !important;
}


/* ============================================================
   VIDEO - CONTENEUR RESPONSIVE
   ============================================================ */

#galerie_lightbox_video_format {

    position: relative;

    display: none;

    box-sizing: border-box;

    vertical-align: top;

    overflow: hidden;

    flex: none;

    /*
     * Ratio par defaut pour YouTube,
     * Vimeo et Dailymotion.
     *
     * Pour les fichiers MP4, le JavaScript
     * utilise les dimensions natives.
     */

    aspect-ratio: 16 / 9;

    /*
     * Largeur optimale selon :
     * - la largeur de l'ecran
     * - la hauteur disponible
     * - la resolution maximale autorisee
     */

    width: min(
        calc(
            100vw - var(--galerie-lightbox-espace-horizontal)
        ),
        calc(
            (100vh - var(--galerie-lightbox-espace-vertical)) * 16 / 9
        ),
        var(--galerie-lightbox-video-largeur-native)
    ) !important;

    width: min(
        calc(
            100vw - var(--galerie-lightbox-espace-horizontal)
        ),
        calc(
            (100dvh - var(--galerie-lightbox-espace-vertical)) * 16 / 9
        ),
        var(--galerie-lightbox-video-largeur-native)
    ) !important;

    height: auto !important;

    max-width: 100% !important;

    max-height: calc(
        100vh - var(--galerie-lightbox-espace-vertical)
    ) !important;

    max-height: calc(
        100dvh - var(--galerie-lightbox-espace-vertical)
    ) !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* ============================================================
   VIDEO - LECTEUR HTML5 OU IFRAME
   ============================================================ */

#galerie_lightbox_video {

    /*
     * IMPORTANT :
     * Le lecteur est maintenant un enfant direct
     * de #galerie_lightbox_video_format.
     */

    position: absolute;

    top: 0;
    left: 0;

    display: none;

    box-sizing: border-box;

    width: 100% !important;
    height: 100% !important;

    border: 0;
    padding: 0;

    margin: 0 !important;
}


/* ============================================================
   POPUP
   ============================================================ */

#galerie_lightbox_popup {

    position: relative;

    display: none;

    box-sizing: border-box;

    max-width: 100%;

    max-height: calc(100vh - 78px);
    max-height: calc(100dvh - 78px);

    margin-top: 0 !important;
    margin-bottom: 30px;

    overflow-x: hidden;
    overflow-y: auto;

    text-align: left;

    line-height: normal;
}


/* ============================================================
   MODE POPUP
   ============================================================ */

#galerie_lightbox_structure.popup #galerie_lightbox_conteneur {

    width: 100%;
    height: 100%;

    padding:
        calc(var(--galerie-lightbox-espace-vertical) / 2)
        calc(var(--galerie-lightbox-espace-horizontal) / 2);
}


#galerie_lightbox_structure.popup #galerie_lightbox_contenu {

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    line-height: normal;
}


.galerie_lightbox_popup {

    display: none;

    width: 100%;

    overflow: hidden;
}


#galerie_lightbox_popup_repere {

    display: none;
}


#galerie_lightbox_popup .galerie_lightbox_popup {

    display: inline-block !important;
}


/* ============================================================
   BOUTON FERMER - COULEUR
   ============================================================ */

#galerie_lightbox_close .open_color.x .navicon::before,
#galerie_lightbox_close .open_color.x .navicon::after {

    background-color: #FFFFFF !important;
}


/* ============================================================
   BOUTON FERMER - POSITION
   ============================================================ */

#galerie_lightbox_close {

    position: absolute;

    top: 0;
    right: -44px;

    z-index: 10;

    margin: 0 !important;
}


/* ============================================================
   NAVIGATION - FLECHES
   ============================================================ */

#galerie_lightbox_prev,
#galerie_lightbox_next {

    position: fixed;

    top: 50%;

    z-index: 5;

    width: 30px;
    height: 60px;

    margin: 0 !important;

    background-color: #FFFFFF;

    background-position: center;
    background-repeat: no-repeat;

    -webkit-background-size: contain;
    background-size: contain;

    /*
     * Centre les fleches verticalement
     * par rapport a l'ecran.
     */

    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);

    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;

    cursor: pointer;
}


/* ============================================================
   FLECHE PRECEDENTE
   ============================================================ */

#galerie_lightbox_prev {

    left: 16px;
    right: auto;

    -webkit-mask:
        url(../../images/prev.svg) no-repeat 50% 50%;

    mask:
        url(../../images/prev.svg) no-repeat 50% 50%;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* ============================================================
   FLECHE SUIVANTE
   ============================================================ */

#galerie_lightbox_next {

    right: 16px;
    left: auto;

    -webkit-mask:
        url(../../images/next.svg) no-repeat 50% 50%;

    mask:
        url(../../images/next.svg) no-repeat 50% 50%;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* ============================================================
   SURVOL DES FLECHES
   ============================================================ */

#galerie_lightbox_prev:hover,
#galerie_lightbox_next:hover {

    opacity: 0.5;
}


/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 600px) {

    #galerie_lightbox_structure {

        /*
         * Reduction des marges sur mobile.
         *
         * 64px = 32px de chaque cote.
         */

        --galerie-lightbox-espace-horizontal: 80px;
        --galerie-lightbox-espace-vertical: 50px;
    }


    #galerie_lightbox_prev,
    #galerie_lightbox_next {

        width: 20px;
        height: 40px;
    }


    #galerie_lightbox_prev {

        left: 6px;
    }


    #galerie_lightbox_next {

        right: 6px;
    }


    #galerie_lightbox_close {

        right: -40px;

        -webkit-transform-origin: top left;
        transform-origin: top left;

        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}


/* ============================================================
   RESPONSIVE - PETITS MOBILES
   ============================================================ */

@media (max-width: 450px) {

    .box_defilante {

        width: 190px;

        margin: auto;
    }
}


/* ============================================================
   COMPATIBILITE ANCIEN EDGE
   ============================================================ */

@supports (-ms-ime-align: auto) {

    #galerie_lightbox_prev {

        background-color: transparent;
        background-image: url(../../images/prev.svg);
    }

    #galerie_lightbox_next {

        background-color: transparent;
        background-image: url(../../images/next.svg);
    }

    #galerie_lightbox_prev:hover {

        background-color: transparent !important;
        background-image: url(../../images/prev_couleur1.svg);
    }

    #galerie_lightbox_next:hover {

        background-color: transparent !important;
        background-image: url(../../images/next_couleur1.svg);
    }
}


/* ============================================================
   COMPATIBILITE EDGE V13
   ============================================================ */

@supports (-ms-accelerator: true) {

    #galerie_lightbox_prev {

        background-color: transparent;
        background-image: url(../../images/prev.svg);
    }

    #galerie_lightbox_next {

        background-color: transparent;
        background-image: url(../../images/next.svg);
    }

    #galerie_lightbox_prev:hover {

        background-color: transparent !important;
        background-image: url(../../images/prev_couleur1.svg);
    }

    #galerie_lightbox_next:hover {

        background-color: transparent !important;
        background-image: url(../../images/next_couleur1.svg);
    }
}


/* ============================================================
   COMPATIBILITE INTERNET EXPLORER 10 ET 11
   ============================================================ */

@media all and (-ms-high-contrast: none),
       (-ms-high-contrast: active) {

    #galerie_lightbox_prev {

        background-color: transparent;
        background-image: url(../../images/prev.svg);
    }

    #galerie_lightbox_next {

        background-color: transparent;
        background-image: url(../../images/next.svg);
    }

    #galerie_lightbox_prev:hover {

        background-color: transparent !important;
        background-image: url(../../images/prev_couleur1.svg);
    }

    #galerie_lightbox_next:hover {

        background-color: transparent !important;
        background-image: url(../../images/next_couleur1.svg);
    }
}



/* ============================================================
   LIGHTBOX - CORRECTION DEFINITIVE DU LECTEUR VIDEO
   ============================================================ */

#galerie_lightbox_structure #galerie_lightbox_video {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    /*
     * Force le lecteur a occuper 100%
     * de son conteneur.
     */
    width: 100% !important;
    height: 100% !important;

    /*
     * IMPORTANT :
     * Neutralise les limitations eventuellement
     * imposees par les styles generaux du site.
     */
    max-width: none !important;
    max-height: none !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    /*
     * Evite toute reduction ou deformation
     * provoquee par un transform externe.
     */
    transform: none !important;

    object-fit: contain;
    box-sizing: border-box;
}