/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX WIDTH XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxx MIN-WIDTH 3840px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (min-width: 3840px) {

}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MIN-WIDTH 2560px MAX-WIDTH 3839px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (min-width: 2560px) and (max-width: 3839px) {

}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 799px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-width: 815px) {
    
    /*GALLERY*/
    .slide__btn-prev, .slide__btn-next {top: 18%;}
    
    .square-sum-txt {
        text-shadow: 2px 2px 2px var(--text-color-1);
        opacity: 1;
        color: var(--text-color-2);
    }
    
    /*Désactive :hover*/
    .slide__square-summary:hover:before { opacity: 1; }
    .square-txt { font-size: clamp(14px, 1vw, 10000px); line-height: clamp(22px, 1.5vw, 10000px); }
    .opacity-effect { transform: translate(-50%, 190%); opacity: 1; }
    .prevNext-white {color: var(--text-color-2);}
    .prevNext-black {color: var(--text-color-1);}

    /*Désactive :hover*/
    .opacity-effect:hover { opacity: 1; }
    .bg-effect-2:hover { background-color: transparent; }
    .gap-effect:hover { gap: clamp(6px, 1.1vmin, 10000px); }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 500px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-width: 500px) {
    /*NAVBAR*/
    .header-main {align-items: center;}
    
    .nav-main__ul {
        position: fixed;
        padding: 10px 0;
        left: -105%;
        top: 59px;
        flex-direction: column;
        width: 100%;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        background-color: var(--color-2);
    }
    
    .nav-main__burger {display: block;}
    .nav-main__ul.active {left: 0;}
    .nav-main__li {margin: 10px 0;}
    .nav-main__li--span {display: none;}
    
    .nav-main__burger.active .nav-main__burger--bar:nth-child(2) {opacity: 0;}
    .nav-main__burger.active .nav-main__burger--bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
    .nav-main__burger.active .nav-main__burger--bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}

    /*HOME*/
    .section__p {font-size: 22px;}

    /*ABOUT*/
    .card-container {font-size: 12px; justify-content: center;}
    .card__content {margin-right: 0;}
    
    /*GALERIE*/
    .square-txt {font-weight: bold;}
    .slide__window-summary {margin-top: 15%;}
    
    /*CONTACT*/
    .form {margin: 0 auto;}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 400px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen  and (max-width: 400px) {
    /*ABOUT*/
    .card-container {font-size: 12.5px;}
    .card__content {width: 100%;}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 395px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen  and (max-width: 395px) {
    /*ABOUT*/
    .card-container {font-size: 12px;}
    /*GALERIE*/
    .slide__square {width: clamp(85px, 7.9vw, 10000px); height: clamp(85px, 7.9vw, 10000px);}
    .square-txt {
        font-size: clamp(13px, 1vw, 10000px);
        line-height: clamp(18px, 1.5vw, 10000px);
    }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 380px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen  and (max-width: 380px) {
    /*ABOUT*/
    .card-container {font-size: 11px;}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 375px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen  and (max-width: 375px) {
    /*HOME*/
    .section__p {font-size: 18px;}
    
    /*ABOUT*/
    .card__content--titles {top: -3.6em;}
    .card__h2 {font-size: 1.05em;}

    /*GALERIE*/
    .slide__square {width: clamp(70px, 7.9vw, 10000px); height: clamp(70px, 7.9vw, 10000px);}
    
    .square-txt {
        font-size: clamp(10px, 1vw, 10000px);
        line-height: clamp(18px, 1.5vw, 10000px);
    }

    /*CONTACT*/
    .container-avis__p {font-size: clamp(15px, 1.4vw, 10000px);}
    .form__input {width: clamp(250px, 35vw, 10000px);}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 350px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen  and (max-width: 350px) {
    /*ABOUT*/
    .card-container {font-size: 10px;}
    /*CONTACT*/

}

@media only screen and (min-width: 845px) and (max-width: 1280px) {
    /*GALLERY*/
    .slide__window-summary {max-width: 80%;}
}


/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX HEIGHT XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
*/
/*
Pour un smartphone de 396px/798px la hauteur en landscape est de :
Firefox/Chrome/Edge/Brave = ~280px
Opera = ~240px 
*/

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 450px MIN-HEIGHT: 600px MAX-HEIGHT: 730px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen  and (max-width: 650px) and (min-height: 600px) and (max-height: 730px) {
    /*ABOUT*/
    .card-container { font-size: 10px;}

    .card__content {padding: 0 0.2em;}

    /*GALLERY*/
    .slide__window-summary{margin-top: 16%;}

    .slide__square-summary {
        width: clamp(80px, 9vw, 10000px);
        height: clamp(80px, 9vw, 10000px);
    }

    .square-sum-txt {font-size: clamp(15px, 1.3vw, 10000px);}
    .long-title {font-size: clamp(12px, 1.3vw, 10000px);}

    .window-modal__img-verti {width: clamp(280px, 30vw, 10000px);}
    .window-modal__img-hori, .window-modal__img-square {width: clamp(290px, 58vw, 10000px);}
    .window-modal__img-spec {width: clamp(210px, 22vw, 10000px);}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-HEIGHT 580px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-height: 599px) and (max-width: 1280px) {
    /*ABOUT*/
    .card-container {font-size: 10px;}
    
    /*GALLERY*/
    .slide__window-summary{margin-top: 15%;}

    .slide__square-summary {width: clamp(80px, 5vmin, 10000px); height: clamp(80px, 5vmin, 10000px);}

    .long-title { font-size: clamp(12px, 1.3vmin, 10000px) !important; }
    .square-sum-txt {font-size: clamp(16px, 1.3vw, 10000px);}
    
    .slide__btn-prev, .slide__btn-next {font-size: clamp(13px, 1.3vw, 10000px);}

    .slide__square {width: clamp(68px, 5vmin, 10000px); height: clamp(68px, 5vmin, 10000px);}

    .opacity-effect {transform: translate(-50%, 175%); opacity: 1;}
    
    .square-txt {
        font-size: clamp(10px, 1vmin, 10000px);
        line-height: clamp(14px, 1.5vmin, 10000px);
    }

    .gap-effect:hover {gap: clamp(6px, 1.1vw, 10000px);}

    /*CONTACT*/
    #message {height: clamp(100px, 10vw, 10000px);}
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-HEIGHT 520px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-height: 520px) and (max-width: 1280px) {
    /*HOME*/
    .section__p {font-size: clamp(18px, 2.3vmin, 10000px);} 
    
    /*ABOUT*/
    .card-container {
        font-size: 9px;
        justify-content: flex-end;
        margin-right: calc(50px + 5vw);
    }
    
    .card__content--titles {top: -2.3em;}
    .card__content--img-p {margin-top: 0em;}

    /*CONTACT*/
    #message {height: clamp(75px, 10vw, 10000px);}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-HEIGHT 450px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-height: 450px) and (max-width: 1280px) {
    /*NAVBAR*/
    .header-main {padding: 3px clamp(10px, 2vw, 10000px) 3px clamp(20px, 4vw, 10000px);}
    .nav-main {padding: 0;}
    .header-main__logo {width: clamp(70px, 8.5vmin, 10000px);}
    .nav-main__burger--bar {margin: 3px auto;}
    .nav-main__burger.active .nav-main__burger--bar:nth-child(1) {transform: translateY(6px) rotate(45deg);}
    .nav-main__burger.active .nav-main__burger--bar:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}
    .nav-main__ul {top: 30px;}
    
    /*GALLERY*/
    .slide__square-gap, 
    .slide__window-summary, 
    .slide__container-square  {gap: clamp(6px, 1.1vmin, 10000px);}
    
    .slide__div--btn-gallery {
        font-size: clamp(12px, 1.5vmin, 10000px);
        top: 17%;
    }
    
    .slide__window { margin: 8% 0 0 -290px }
    .opacity-effect {transform: translate(55%, -50%); opacity: 1;}

    .gap-effect:hover {gap: clamp(6px, 1.1vmin, 10000px);}

    .slide__container-square {width: clamp(180px, 30vmin, 10000px);}
    
    .window-modal__img-verti {width: clamp(280px, 32vmin, 10000px);}
    .window-modal__img-hori {width: clamp(550px, 58vmin, 10000px);}
    .window-modal__img-square {width: clamp(390px, 58vmin, 10000px);}
    .window-modal__img-spec {width: clamp(200px, 22vmin, 10000px);}

    /*CONTACT*/
    #message {height: clamp(65px, 10vw, 10000px);}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-HEIGHT 430px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-height: 430px) and (max-width: 1280px) {
    /*GALLERY*/
    .slide__btn-prev,.slide__btn-next {top: 9%;}
    
    .slide__square {width: clamp(68px, 5vmin, 10000px); height: clamp(68px, 5vmin, 10000px);}

    .slide__window-summary{margin-top: 5%;}
    
    .window-modal__img-verti {width: clamp(230px, 32vmin, 10000px);}   
    .window-modal__img-hori {width: clamp(390px, 58vmin, 10000px);}   
    .window-modal__img-square {width: clamp(370px, 58vmin, 10000px);}   
    .window-modal__img-spec {width: clamp(155px, 22vmin, 10000px);}
    
    /*CONTACT*/
    .form {
        flex-direction: row;
        gap: 10px;
        padding: clamp(10px, 1.5vmin, 10000px);
    }
    
    .form__input {
        width: clamp(140px, 40vmin, 10000px);
        padding: clamp(3px, 0.4vmin, 10000px);
    }
    
    .form__submit {transform: translateX(-50%) translateY(120%);}
    
    #textarea {height: clamp(70px, 10vmin, 10000px);}
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-HEIGHT 335px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-height: 335px) and (max-width: 1280px) {
    /*ABOUT*/
    .card-container {font-size: 7px;}
    
    /*GALLERY*/
    .slide__square-summary { width: clamp(65px, 5vmin, 10000px); height: clamp(65px, 5vmin, 10000px); }

    .slide__square { width: clamp(55px, 5vmin, 10000px); height: clamp(55px, 5vmin, 10000px); }

    .long-title { font-size: clamp(10px, 1.3vmin, 10000px) !important; }
    .square-sum-txt { font-size: clamp(13px, 1.3vmin, 10000px); }
    
    .window-modal__img-verti { width: clamp(185px, 32vmin, 10000px); }
    .window-modal__img-hori { width: clamp(340px, 58vmin, 10000px); }
    .window-modal__img-square { width: clamp(300px, 58vmin, 10000px); }
    .window-modal__img-spec { width: clamp(125px, 22vmin, 10000px); }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-HEIGHT 270px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-height: 270px) and (max-width: 1280px) {
    /*ABOUT*/
    .card-container {font-size: 6px;}
    
    /*GALLERY*/
    /* .slide__square-summary { width: clamp(65px, 5vmin, 10000px); height: clamp(65px, 5vmin, 10000px); } */
    .square-sum-txt {font-size: clamp(13px, 1.3vmin, 10000px);}

    .slide__div--btn-gallery {top: 17%;}

    .opacity-effect {transform: translate(55%, -50%);}

    /*modal*/
    .window-modal__img-verti {width: clamp(160px, 32vmin, 10000px);}
    .window-modal__img-hori {width: clamp(300px, 58vmin, 10000px);}
    .window-modal__img-square {width: clamp(290px, 58vmin, 10000px);}
    .window-modal__img-spec {width: clamp(115px, 22vmin, 10000px);}
}

/*Pour le clavier numérique du smartphone*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxx MAX-WIDTH 419px MAX-HEIGHT 575px xxxxxxxxxxxxxxxxxxxxxxxxxx */
@media only screen and (max-width: 419px) and (max-height: 575px) {
    /*GALLERY*/
    .slide__square-summary { width: clamp(45px, 5vmin, 10000px); height: clamp(45px, 5vmin, 10000px); }
    .long-title { font-size: clamp(7px, 1.3vmin, 10000px) !important; }
    .square-sum-txt { font-size: clamp(10px, 1.3vmin, 10000px); }
}