#gallery {
    background-color: var(--color-2);
}

.gallery__main-content {
    width: 100%;
}

.gallery__slideshow-container {
    position: relative;
    overflow: hidden;
    min-height: 100svh;
}

.gallery__slideshow {
    position: absolute;
    height: 100%;
    display: flex;
    background-color: rgb(0, 0, 0);
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX BUTTONS PREV/NEXT/RETURN SUMMARY XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.slide__btn-prev,
.slide__btn-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    font-size: clamp(15px, 1.3vw, 10000px);
    padding: calc(10px + 0.5vw);
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.prevNext-white { color: rgba(255, 255, 255, 0.6);}
.prevNext-black {color: rgba(0, 0, 0, 0.6);}
.prevNext-white:hover {color: var(--text-color-2);}
.prevNext-black:hover {color: var(--text-color-1);}

.slide__btn-prev {left: 0;}
.slide__btn-next {right: 0;}
.slide__btn-prev:hover {padding-left: calc(15px + 0.5vw);}
.slide__btn-next:hover {padding-right: calc(15px + 0.5vw);}

/* btn retour sommaire Galerie */
.slide__div--btn-gallery {
    position: absolute;
    text-align: center;
    top: 19%;
    font-family: var(--font-3);
    font-size: clamp(15px, 1.5vw, 10000px);
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    padding: clamp(9px, 1.1vw, 50px) clamp(5px, 0.5vw, 25px) clamp(1px, 0.2vw, 25px);
}

.btn-gallery-white { color: var(--text-color-2);}
.btn-gallery-black { color: var(--text-color-1);}

.slide__div--btn-gallery:hover {opacity: 0.4;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX TOUS LES SLIDES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.slide {
    position: relative;
    /*empêche qu'ils rétrécissent*/
    flex-shrink: 0;
    width: 100vw;
    height: 100%;
    justify-content: center;
}

.slide__square-gap, 
.slide__window-summary, 
.slide__container-square  {gap: clamp(6px, 1.1vw, 10000px);}

/* ----------- PREMIER SLIDE (LE SOMMAIRE) ----------- */
.slide__window-summary {
    max-width: 100%;
    margin-top: 5%;
}

.slide__square-summary {
    position: relative;
    color: var(--text-color-1);
    width: clamp(100px, 9vw, 10000px);
    height: clamp(100px, 9vw, 10000px);
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}

.square-sum-txt,
.opacity-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 101%;
    height: 101%;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

.square-sum-txt {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;
}

.square-sum-txt {font-size: clamp(19px, 1.3vw, 10000px);}

.long-title {font-size: clamp(15px, 1.2vw, 10000px);}

.slide__square-summary:hover:before {opacity: 0.3;}
.square-sum-txt:hover {opacity: 1;}

.slide__square-summary{background-color: #f2f2f2;}

/* Images des carrés du sommaire et des slides*/
.square-img-2:before {background-image: url('../images/CarreDivision.webp');}
.square-img-3:before {background-image: url('../images/CarrePassage.webp');}
.square-img-4:before {background-image: url('../images/CarreElfe.webp');}
.square-img-5:before {background-image: url('../images/CarreVolition.webp');}
.square-img-6:before {background-image: url('../images/CarreEnsemble.webp');}
.square-img-7:before {background-image: url('../images/CarreNephelee.webp');}
.square-img-8:before {background-image: url('../images/CarrePeriode.webp');}
.square-img-9:before {background-image: url('../images/CarreEvolution.webp');}
.square-img-10:before {background-image: url('../images/CarreReunion.webp');}
.square-img-11:before {background-image: url('../images/CarreGecko.webp');}
.square-img-12:before {background-image: url('../images/CarrePhotosynthese.webp');}
.square-img-13:before {background-image: url('../images/CarreMorphose.webp');}
.square-img-14:before {background-image: url('../images/CarreVague.webp');}
.square-img-15:before {background-image: url('../images/CarreCheminement-1.webp');}
.square-img-16:before {background-image: url('../images/CarreGyrus.webp');}
.square-img-17:before {background-image: url('../images/CarreLappeldesirius.webp');}

/* ----------- SLIDES DES TABLEAUX ----------- */
.slide__window {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}

.slide__container-square {
    width: clamp(180px, 30vw, 10000px);
}

.slide__square {
    position: relative;
    width: clamp(90px, 7.9vw, 10000px);
    height: clamp(90px, 7.9vw, 10000px);
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}

/* Animation deuxième ligne slides (sauf slide Galerie)*/
/* Mouvement des 4 carrés */
.gap-effect {
    position: relative;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.gap-effect:hover {gap: 0;}

/* Texte qui apparaît avec background-color du slide */
.opacity-effect {
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;
}

.opacity-effect:hover {opacity: 1;}

.square-txt {
    line-height: clamp(12px, 1.5vw, 10000px);
    text-align: center;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.square-txt {
    font-size: clamp(9px, 1vw, 10000px);
}

.slide__square:before, 
.slide__square-summary:before {
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
    background-size: contain;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;
    z-index: 1;
}

.btn-openModal {
    margin: 0;
    padding: 10px 80px;
}

/* Background des slides et de l'hover*/
.s1 {background-color: var(--color-2);}
.s2, .bg-effect-2:hover {background-color: var(--color-16);}
.s3, .bg-effect-3:hover {background-color: var(--color-9);}
.s4, .bg-effect-4:hover {background-color: var(--color-15);}
.s5, .bg-effect-5:hover {background-color: var(--color-5);}
.s6, .bg-effect-6:hover {background-color: var(--color-14);}
.s7, .bg-effect-7:hover {background-color: var(--color-8);}
.s8, .bg-effect-8:hover {background-color: var(--color-12);}
.s9, .bg-effect-9:hover {background-color: var(--color-11);}
.s10, .bg-effect-10:hover {background-color: var(--color-13);}
.s11, .bg-effect-11:hover {background-color: var(--color-10);}
.s12, .bg-effect-12:hover {background-color: var(--color-6);}
.s13, .bg-effect-13:hover {background-color: var(--color-7);}
.s14, .bg-effect-14:hover {background-color: var(--color-17);}
.s15, .bg-effect-15:hover {background-color: var(--color-18);}
.s16, .bg-effect-16:hover {background-color: var(--color-19);}
.s17, .bg-effect-17:hover {background-color: var(--color-20);}

.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s9, .s10, .s11, .s13, .s15, .s16, .s17 {
    color: var(--text-color-2);
}

.s12, .s14, .s8 {
    color: var(--text-color-1);
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX MODALS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.slide__modal {
    position: absolute;
    top: 0;
    background-color: var(--color-2);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100svh;
    -webkit-transition: visibility 0.2s ease-out, opacity 0.2s ease-out;
    -moz-transition: visibility 0.2s ease-out, opacity 0.2s ease-out;
    -o-transition: visibility 0.2s ease-out, opacity 0.2s ease-out;
    transition: visibility 0.2s ease-out, opacity 0.2s ease-out;
    visibility: hidden;
    opacity: 0;
    color: var(--text-color-1);
    padding: 10px;
    box-shadow: inset 0 0 20px 1px var(--color-1);
    z-index: 5;
}

.slide__modal.active {
    visibility: visible;
    opacity: 1;
}

.slide__window-modal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: calc(10px + 1vw);
    flex-wrap: wrap;
    align-items: flex-start;
}

.window-modal__text {
    font-size: clamp(15px, 1vw, 10000px);
    padding: 5px;
    margin-top: 10px;
}

.window-modal__text--span {
    font-family: var(--font-2);
    font-size: clamp(17px, 1.4vw, 10000px);
}

.window-modal__img {
    display: block;
    max-width: 90%;
    height: auto;
}

.slide__div--img a {
    display: block;
}

.window-modal__img-verti {
    width: clamp(340px, 30vw, 10000px);
    height: auto;
}

.window-modal__img-hori {
    width: clamp(360px, 58vw, 10000px);
    height: auto;
}

.window-modal__img-square {
    width: clamp(380px, 45vw, 10000px);
    height: auto;
}

.window-modal__img-spec {
    width: clamp(270px, 22vw, 10000px);
    height: auto;
}


/*Button close modal*/
.slide__button--close {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 3%;
    right: 5%;
    font-size: clamp(20px, 1.7vw, 10000px);
    padding: 0 clamp(6px, 0.5vw, 10000px);
    background-color: var(--color-3);
    color: var(--text-color-2);
    border: 1px solid var(--color-3);
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.slide__button--close:hover {
    background-color: #d2d2d2;
}

/* FADING ANIMATION */
.fade {
    -webkit-animation: fade 1s;
    -moz-animation: fade 1s;
    -o-animation: fade 1s;
    animation: fade 1s;
}

@-webkit-keyframes fade {
    from {
        opacity: .1
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .1
    }

    to {
        opacity: 1
    }
}