/*OBLIGATOIRE */
html{font-family: Helvetica;color: #1B1C1E;}
body.index{margin: 0px;padding: 0px;background-color: #fafafa;height: 100%; width: 100%;}

/*en-tete blanc navbarprincipal--------------------------------------------------------------------*/
.NavBarprincipalCLASS{background-color: #cacaca;padding: 0.1px;}
nav ul.NavBarprincipalLISTE{list-style-type:none; display: flex;justify-content: space-between;padding-left: 25px;padding-right: 25px; height: 55px;margin: 0px;align-items: center;}

/*en-tete noir----------------------------------------------------------------------------------------*/
nav ul.fondnoir{list-style-type:none;display: flex;justify-content: space-around;padding-left: 0px;margin: 10px;}
.top-head{background-color: #000;padding: 0.1px;}


















    


































/*en-tete noir LOGO-----------------------------------------------------------------------------------*/
.enteteLOGOclass{background-color: rgb(0, 0, 0);padding: 0px;position: sticky;top: 0px;z-index: 5;}
nav ul.enteteLOGOliste{list-style-type:none;display: flex;justify-content: space-around;padding-left: 0px;margin: 0px; height: 70px; align-items: center;}




/*pied de page---------------------------------------------------------------------------------------*/
@media(max-width: 696px){.piedpage{flex-direction: column;align-items: center;}}
nav ul.piedpage{list-style-type:none;justify-content: space-around; display: flex;padding-left: 0px;}
.pieddepage{background-color: #000;padding: 1px;}
.pieddepage a{color:white;text-decoration: none;font-size: 1.3rem;}


.droitreserve{font-size: 1.3rem;text-align: center; margin: 0px; padding: 10px; background-color: rgb(10, 10, 10);color: rgb(65, 65, 65);}
.CGTDP{color: rgb(1, 125, 163);}
/*fin pied de page---------------------------------------------------------------------------------------*/

/*bouton pour centrer navbar---------------------------------------------------------------------------------------*/
.boutonmod {width: 232px;background-color: black;border: none;}
.boutonmod2 {width: 140px;background-color: black;border: none;}



/*TITRE ------------------------------------------------------------------------------------------------*/
.titre{background-color: rgba(0, 0, 0, 0.445);color: #ffffff;text-align: center;margin: 0px;padding: 11px;font-size: 1.5rem;letter-spacing: .05rem;font-weight: 550;}
@media(max-width: 410px){.titre{display: none;}}





/*brouillon parti 2  A REPETER AU CENTRE*/
.iiEparti {
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fafafa ;
    background-size: cover;

    width: auto;
    padding: 1px;
    color: rgb(0, 0, 0);
    font-size: 2.5rem;
    text-align: center;
    margin: auto;
    
    
}

.textepart2 {
    margin-top: 15px;
}


/*prestation menu *****************************************************************************************************************************************************/


.cartes{background-color: #fafafa;padding-top:1%;padding-bottom: 1%;padding-left: 1%;padding-right:1%;
    display: flex;
    justify-content: space-around  ;
    align-items: center;
    flex-wrap: wrap;
    }
    
    .carte{ margin-top: 15px;  margin-bottom: 15px; margin-left: 1%;margin-right: 1%;
      
       text-align: center;
       
    }
    
    
    .carteX {
        width:400px;;
    }
    @media(max-width: 1612px){.carteX {width:350px;;}}
    @media(max-width: 1410px){.carteX {width:300px;;}}
    @media(max-width: 1210px){.carteX {width:250px;;}}
    @media(max-width: 1010px){.carteX {width:225px;;}}
    @media(max-width: 910px){.carteX {width:200px;;}}
    @media(max-width: 810px){.carteX {width:300px;;}}
    @media(max-width: 766px){.carteX {width:250px;;}}
    @media(max-width: 640px){.carteX {width:225px;;}}
    @media(max-width: 574px){.carteX {width:200px;;}}
    @media(max-width: 512px){.carteX {width:175px;;}}
    @media(max-width: 450px){.carteX {width:150px;;}}
    @media(max-width: 385px){.carteX {width:125px;;}}
    @media(max-width: 320px){.carteX {width:200px;;}}
 
    
    
    @media(max-width: 574px){.cartes {font-size: 0.9rem;;}}
    @media(max-width: 450px){.cartes {font-size: 0.8rem;;}}
    @media(max-width: 385px){.cartes {font-size: 0.7rem;;}}
    @media(max-width: 275px){.cartes {font-size: 1rem;;}}
    
    
    
    
    
    .cartexte{margin-top: 13px; margin-bottom: 0px;}
    @media(max-width: 810px){.cartexte{margin-top: 10px;}}
    @media(max-width: 450px){.cartexte{margin-top: 7px;}}
    
    @media(max-width: 810px){.cartes {padding-top:5%;padding-bottom: 5%;;}
    .carte{margin-left: 2%;margin-right: 2%;}
    }
    
    
    @media(max-width: 1210px){.carte {margin-top: 2.5%;  margin-bottom: 2.5%;;}}
    
    /*prestation menu ******************************************************************************************************************************************************/







/*INDEX *****************************************************************************************************************************************************/


.brandnew {background-image: url('img/bck1.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}


.boutton{color: white;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;
      border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;
      margin-left: 65%;
  }
  
.boutton{padding: 60px;font-size: 2.5rem;            }
@media(max-width: 1900px){.boutton {padding: 40px;font-size: 2rem;                             ;}}
@media(max-width: 1500px){.boutton {padding: 30px;font-size: 1.7rem;                             ;}}
@media(max-width: 1200px){.boutton {padding: 20px;font-size: 1.3rem;                             ;}}
@media(max-width: 900px){.boutton {padding: 15px;font-size: 1rem;                               ;}}
@media(max-width: 700px){.boutton {padding: 10px;font-size: 0.7rem;                            ;}}
@media(max-width: 500px){.boutton {padding: 7px;font-size: 0.5 rem;                            ;}}

.boutton{
 
    margin-top: 45vh;
    margin-bottom: 45vh;
    margin-top: 22.5%;
    margin-bottom: 12.5%;
}










.brandnew5 {background-image: url('img/bcktech.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}





.brandnew2 {background-image: url('img/bckX.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}


.boutton2{color: rgba(255, 255, 255, 0);letter-spacing: .025rem;font-weight: 550;background-color: #ffffff00; margin-left: 0;
      border: 1px solid rgba(255, 255, 255, 0);text-shadow:0px 0px 1px rgba(255, 255, 255, 0); border-radius: 3%;
  }
  
.boutton2{padding: 60px;font-size: 2.5rem;            }
@media(max-width: 1900px){.boutton2 {padding: 40px;font-size: 2rem;                             ;}}
@media(max-width: 1500px){.boutton2 {padding: 30px;font-size: 1.7rem;                             ;}}
@media(max-width: 1200px){.boutton2 {padding: 20px;font-size: 1.3rem;                             ;}}
@media(max-width: 900px){.boutton2 {padding: 15px;font-size: 1rem;                               ;}}
@media(max-width: 700px){.boutton2 {padding: 10px;font-size: 0.7rem;                            ;}}
@media(max-width: 500px){.boutton2 {padding: 7px;font-size: 0.5 rem;                            ;}}

.boutton2{
 
    margin-top: 45vh;
    margin-bottom: 45vh;
    margin-top: 24%;
    margin-bottom: 13%;
}

















/*PRESTATION----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



.brandnew10 {background-image: url('img/bckgainable.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}


.boutton10{color: rgba(255, 255, 255, 0);letter-spacing: .025rem;font-weight: 550;background-color: #ffffff00; margin-left: 0;
      border: 1px solid rgba(255, 255, 255, 0);text-shadow:0px 0px 1px rgba(255, 255, 255, 0); border-radius: 3%;
  }
  
.boutton10{padding: 60px;font-size: 2.5rem;            }
@media(max-width: 1900px){.boutton10 {padding: 40px;font-size: 2rem;                             ;}}
@media(max-width: 1500px){.boutton10 {padding: 30px;font-size: 1.7rem;                             ;}}
@media(max-width: 1200px){.boutton10 {padding: 20px;font-size: 1.3rem;                             ;}}
@media(max-width: 900px){.boutton10 {padding: 15px;font-size: 1rem;                               ;}}
@media(max-width: 700px){.boutton10 {padding: 10px;font-size: 0.7rem;                            ;}}
@media(max-width: 500px){.boutton10 {padding: 7px;font-size: 0.5 rem;                            ;}}

.boutton10{
 
    margin-top: 45vh;
    margin-bottom: 45vh;
    margin-top: 30%;
    margin-bottom: 20%;
}




.brandnew11 {background-image: url('img/bckclim.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}


.boutton11{color: rgba(255, 255, 255, 0);letter-spacing: .025rem;font-weight: 550;background-color: #ffffff00; margin-left: 0;
      border: 1px solid rgba(255, 255, 255, 0);text-shadow:0px 0px 1px rgba(255, 255, 255, 0); border-radius: 3%;
  }
  
.boutton11{padding: 60px;font-size: 2.5rem;            }
@media(max-width: 1900px){.boutton11 {padding: 40px;font-size: 2rem;                             ;}}
@media(max-width: 1500px){.boutton11 {padding: 30px;font-size: 1.7rem;                             ;}}
@media(max-width: 1200px){.boutton11 {padding: 20px;font-size: 1.3rem;                             ;}}
@media(max-width: 900px){.boutton11 {padding: 15px;font-size: 1rem;                               ;}}
@media(max-width: 700px){.boutton11 {padding: 10px;font-size: 0.7rem;                            ;}}
@media(max-width: 500px){.boutton11 {padding: 7px;font-size: 0.5 rem;                            ;}}

.boutton11{
 
    margin-top: 45vh;
    margin-bottom: 45vh;
    margin-top: 30%;
    margin-bottom: 20%;
}





.brandnew12 {background-image: url('img/bckpac.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}


.boutton12{color: rgba(255, 255, 255, 0);letter-spacing: .025rem;font-weight: 550;background-color: #ffffff00; margin-left: 0;
      border: 1px solid rgba(255, 255, 255, 0);text-shadow:0px 0px 1px rgba(255, 255, 255, 0); border-radius: 3%;
  }
  
.boutton12{padding: 60px;font-size: 2.5rem;            }
@media(max-width: 1900px){.boutton12 {padding: 40px;font-size: 2rem;                             ;}}
@media(max-width: 1500px){.boutton12 {padding: 30px;font-size: 1.7rem;                             ;}}
@media(max-width: 1200px){.boutton12 {padding: 20px;font-size: 1.3rem;                             ;}}
@media(max-width: 900px){.boutton12 {padding: 15px;font-size: 1rem;                               ;}}
@media(max-width: 700px){.boutton12 {padding: 10px;font-size: 0.7rem;                            ;}}
@media(max-width: 500px){.boutton12 {padding: 7px;font-size: 0.5 rem;                            ;}}

.boutton12{
 
    margin-top: 45vh;
    margin-bottom: 45vh;
    margin-top: 30%;
    margin-bottom: 20%;
}





.brandnew13 {background-image: url('img/bckecs.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}


.boutton13{color: rgba(255, 255, 255, 0);letter-spacing: .025rem;font-weight: 550;background-color: #ffffff00; margin-left: 0;
      border: 1px solid rgba(255, 255, 255, 0);text-shadow:0px 0px 1px rgba(255, 255, 255, 0); border-radius: 3%;
  }
  
.boutton13{padding: 60px;font-size: 2.5rem;            }
@media(max-width: 1900px){.boutton13 {padding: 40px;font-size: 2rem;                             ;}}
@media(max-width: 1500px){.boutton13 {padding: 30px;font-size: 1.7rem;                             ;}}
@media(max-width: 1200px){.boutton13 {padding: 20px;font-size: 1.3rem;                             ;}}
@media(max-width: 900px){.boutton13 {padding: 15px;font-size: 1rem;                               ;}}
@media(max-width: 700px){.boutton13 {padding: 10px;font-size: 0.7rem;                            ;}}
@media(max-width: 500px){.boutton13 {padding: 7px;font-size: 0.5 rem;                            ;}}

.boutton13{
 
    margin-top: 45vh;
    margin-bottom: 45vh;
    margin-top: 30%;
    margin-bottom: 20%;
}





.brandnew14 {background-image: url('img/bckecs2.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}

.brandnew15 {background-image: url('img/bckpresta.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}

.brandnew16 {background-image: url('img/bckdpe1.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}

.brandnew17 {background-image: url('img/bckdpe2.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}

/* FIN PRESTATION----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/






































.brandnew3 {background-image: url('img/bckDPE.png');background-size: contain; background-repeat: no-repeat;background-position: center; width: 100%;height: 0%;
}


.boutton3{color: white;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6; margin-left: 0;
      border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;
  }
  
.boutton3{padding: 60px;font-size: 2.5rem;            }
@media(max-width: 1900px){.boutton3 {padding: 40px;font-size: 2rem;                             ;}}
@media(max-width: 1500px){.boutton3 {padding: 30px;font-size: 1.7rem;                             ;}}
@media(max-width: 1200px){.boutton3 {padding: 20px;font-size: 1.3rem;                             ;}}
@media(max-width: 900px){.boutton3 {padding: 15px;font-size: 1rem;                               ;}}
@media(max-width: 700px){.boutton3 {padding: 10px;font-size: 0.7rem;                            ;}}
@media(max-width: 500px){.boutton3 {padding: 7px;font-size: 0.5 rem;                            ;}}

.boutton3{
 
    margin-top: 45vh;
    margin-bottom: 45vh;
    margin-top: 30%;
    margin-bottom: 6%;
    margin-left: 40%;
}






/* PORTFOLIO  **********************************************************************/



.photo{
 
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(500px,500px));
    column-gap: 10px;
    row-gap: 10px;
    margin-bottom: 20px;
}


.image{
    width: 500px;
    height: 500px;
    object-fit: cover;
    object-position: center;

}




@media(max-width: 1100px){.photo{
 
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,300px));
    column-gap: 10px;
    row-gap: 10px;
    margin-bottom: 20px;
}


.image{
    width: 300px;
    height: 300px;
    object-fit: cover;
    object-position: center;

}}



.titrephoto{
    width: auto;
    padding: 1px;
    text-align: center;
    margin: auto;
    color: texte-contact-first#000000;font-size: 2rem;letter-spacing: .010rem;font-weight: 750;text-shadow:0px 0px 1px rgb(172, 237, 255); 
    padding-top: 2vh;

}




/*CGUCGV*****************************************************************************************************************************************************/
.CGUCGV{background-color: rgb(235, 235, 235);padding-bottom: 50px;}
.CGUtitle{font-size: 3.8rem;margin-left: 8%;margin-top: 0px;padding-top: 30px;}
.CGUp{font-size:1.8rem;margin-left: 3%;}



.retouracceuil{
    background-color: rgb(112, 112, 112);
    width: auto;
    padding: 1px;
    text-align: center;
    margin: auto;
}
.bouttonCG{padding: 30px;color: white;font-size: 1.5rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;margin-top: 5vh;margin-bottom: 5vh;}







































































































































/*MENU BURGER------------------------------------------------------------------------------------*/
.menux{display: none;background-color: transparent;border-color: transparent;cursor: pointer;}
@media(max-width: 500px){
.top-head {display: none;}
.menux{display: block;}
.top-head.responsive{display: block;}
.fondnoir{flex-direction: column;align-items: center;}}

/*bouton pour centrer navbar---------------------------------------------------------------------------------------*/
.boutonmod {width: 232px;background-color: black;border: none;}
.boutonmod2 {width: 140px;background-color: black;border: none;}




/*brouillon parti 4 */
.iiiiEparti {
    background-position: center;
    background-repeat: no-repeat;
    background-image:url("img2/MLB.jpg") ;
    height: 785px;
    width: auto;
    padding: 1px;
    color: white;
    font-size: 2.5rem;
    text-align: center;
    margin: auto;
}
.boutton4{
    padding: 15px;
    color: #1B1C1E;
    font-size: 1rem;
    letter-spacing: .025rem;
    font-weight: 550;
    margin-top: 15vh;
}
.textemple2{ 
    color: white;
    font-size: 1.2rem;
    text-align: center;
    margin: auto;
}
    













/*FIN INDEX *****************************************************************************************************************************************************/




/*INFO *****************************************************************************************************************************************************/
.titre-info-first{font-size: 3.8rem;margin-left: 8%;margin-top: 0px;padding-top: 30px;}
.titre-info-second{font-size: 2.5rem;margin-left: 3%;margin-top: 0px;padding-top: 30px;}
.p-info-first{font-size:1.8rem;margin-left: 3%;}
.texte-info-first{background-color: aqua; padding-bottom: 50px;}




@media(max-width: 450px){.p-info-first{font-size:1.2rem;}}
@media(max-width: 450px){.titre-info-first{font-size:2rem;}}

/*FIN INFO *****************************************************************************************************************************************************/











/*CONTACT*****************************************************************************************************************************************************/
.texte-contact-first{background-color: #fafafa;padding-bottom: 50px;}
.titre-contact-first{font-size: 3.8rem;margin:0px; margin-left: 8%;padding-top: 70px;padding-bottom: 30px;}
.p-contact-first{font-size:1.8rem;padding-left: 10%;}
.titre-contact-second{font-size: 2.5rem;margin: 0px;margin-left: 3%;padding-top: 30px;padding-bottom: 50px;}







.p-reseau-first{font-size:1.5rem;display: flex;font-weight: 550;margin-bottom: 0px}
@media(min-width: 405px){.p-reseau-first{font-size:1.5rem;}}
@media(min-width: 650px){.p-reseau-first{font-size:1.8rem;}}
@media(min-width: 1100px){.p-reseau-first{font-size:2rem;}}
@media(min-width: 1400px){.p-reseau-first{font-size:2.2rem;}}
@media(min-width: 1800px){.p-reseau-first{font-size:2.6rem;}}











.nodeco{text-decoration: none;color: #1B1C1E;}
nav ul.reseaucontact{justify-content: space-around;list-style-type: none;}
.imgreseau{padding-right: 15px;padding-left: 15px;}




.snapchatt{background-color: rgb(41, 48, 0); height: 350px; width: 300px;text-align: center;font-size: 1.6rem;color: white;}
.snapchattt{background-color: rgb(41, 48, 0); height: 550px; width: 500px;margin-left: 8%; margin-top: 50px; text-align: center;font-size: 2rem;color: white;}
.snapcodeg{margin-top: 50px;margin-left: 50px;margin-right: 50px;margin-bottom: 25px;}
.snapcodep{margin-top: 25px;margin-left: 25px;margin-right: 25px;margin-bottom: 10px;}



@media(max-width: 400px){.snapchatt{background-color: rgb(41, 48, 0); height: 260px; width: 200px;text-align: center;font-size: 1.6rem;color: white;}}
@media(max-width: 400px){.snapcodep{height: 150px;}}



@media(max-width: 1000px){nav ul.reseaucontact{padding-left: 7%;}}
@media(min-width: 1000px){
nav ul.reseaucontact{display: flex; padding-left: 0px;}
.snapchatt{margin-top: 100px; margin-left: 0%;}
}

@media(max-width: 1200px){.imgreseau{padding-right: 10px;padding-left: 10px;}}



@media(max-width: 405px){.p-contact-first{font-size:1.3rem;}}
@media(max-width: 405px){.titre-contact-second{font-size:1.7rem;padding-top: 30px;padding-bottom: 30px;}}
@media(max-width: 481px){.titre-contact-first{font-size:3.2rem;padding-top: 50px;padding-bottom: 0px;}}
@media(max-width: 405px){.titre-contact-first{font-size:2.2rem;}}



/*MENU BURGER------------------------------------------------------------------------------------*/

.xsnap{cursor: pointer;}
@media(max-width: 1000px){.xsnapc{display: none;}
.snapchatt {display: none;}
.snapchattt {display: none;}
.snapchatt.responsivee{display: block;}}

.xsnapc{cursor: pointer;}
@media(min-width: 1000px){.xsnap{display: none;}
.snapchatt {display: none;}
.snapchattt {display: none;}
.snapchattt.responsivee{display: block;}}




.texte-contact-first2{background-color: orange;padding-bottom: 25px;}


/*FIN CONTACT *****************************************************************************************************************************************************/



    
/*tel responsive----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media(max-width: 550px){.brandnew10 {   background-image: url('img/bckgainabletel.png')      ;}}
@media(max-width: 550px){.brandnew11 {   background-image: url('img/bckclimtel.png')                ;}}
@media(max-width: 550px){.brandnew12 {   background-image: url('img/bckpactel.png')                ;}}
@media(max-width: 550px){.brandnew13 {   background-image: url('img/bckthermotel.png')                ;}}
@media(max-width: 550px){.brandnew14 {   width: 0px;        ;}}
@media(max-width: 550px){.brandnew15 {   background-image: url('img/bckprestatel.png')                ;}}
@media(max-width: 550px){.brandnew16 {   background-image: url('img/bckdpetel.png')                ;}}
@media(max-width: 550px){.brandnew17 {   width: 0px;      ;}}

@media(max-width: 550px){.boutton10 {     margin-top: 45vh; margin-bottom: 45vh;margin-top: 80%;margin-bottom: 80%;}}
@media(max-width: 550px){.boutton11 {     margin-top: 45vh; margin-bottom: 45vh;margin-top: 80%;margin-bottom: 80%;}}
@media(max-width: 550px){.boutton12 {     margin-top: 45vh; margin-bottom: 45vh;margin-top: 80%;margin-bottom: 80%;}}
@media(max-width: 550px){.boutton13 {     margin-top: 45vh; margin-bottom: 45vh;margin-top: 80%;margin-bottom: 80%;}}



@media(max-width: 550px){.brandnew2 {   background-image: url('img/bckxtel.png')      ;}}
@media(max-width: 550px){.brandnew5 {   background-image: url('img/bcktechtel.png')      ;}}
@media(max-width: 550px){.brandnew3 {   background-image: url('img/bckdpeptel.png')      ;}}

@media(max-width: 550px){.boutton2 {     margin-top: 45vh; margin-bottom: 45vh;margin-top: 80%;margin-bottom: 80%;}}
@media(max-width: 550px){.boutton3 {     margin-top: 45vh; margin-bottom: 45vh;margin-top: 130%;margin-bottom: 10%;}}



@media(max-width: 550px){.boutton3 {margin-left: 0px  ; padding: 30px;font-size: 1.5rem;            }}
@media(max-width: 400px){.boutton3 {padding: 15px;font-size: 1rem;                               ;}}

/*fin tel responsive----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

















/*PAGE COMPTE *************************************************************************************************************************************************/
.connexion{
    padding-bottom: 50px;
    color: rgb(255, 255, 255);
    background-color: #474747;  
    padding-top: 50px;
}
.connexionbox{
    box-shadow: 3px 3px 15px 1px #2b2b2b;
    z-index: 3;
    background-color: #080808;
    width: 50%;
    margin-left: 50%;
    transform: translate(-50%);
    text-align: center;
    padding-top: 30px;
    padding-bottom: 70px;
  }
/*text*/
.compteee{font-size: 2.4rem;letter-spacing: .025rem;}
.mdpoublier{color: rgb(204, 255, 255);}
.connexionP{font-size: 1.5rem;}

/*responsive*/
@media screen and (max-width:800px){.connexionbox{width: 80%;}}
@media screen and (max-width:500px){.connexionbox{width: 100%;}}






@media screen and (max-width:400px){.username1{font-size: 0.8rem;width: 210px;}}
@media screen and (min-width:400px){.username1{font-size: 1rem;width: 240px;}}
@media screen and (max-width:400px){.connexionP{font-size: 1rem;}}
@media screen and (max-width:400px){.compteee{font-size: 2rem;}}


/*design*/
.username1{padding: 10px;color: white;letter-spacing: .025rem;background-color: #141414f6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;}
.loginbtn{ margin-top: 20px;width:150px; padding: 10px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}
.mdpoublier{margin-top: 20px;}
.signbtn{width:150px; padding: 10px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}
.trait{width:70%;margin-top: 50px;}



/*FIN PAGE COMPTE *************************************************************************************************************************************************/










/*VETEMENT PAGE *************************************************************************************************************************************************/


.pagevente{background-color: rgb(153, 67, 67);padding: 10%; padding-top:6%;}

.imgdivente{width: 50%;}
.imgvente{width:100%;}

.generalvente{width: 50%;}
.txtvente1{padding-left: 12%; font-size: 3rem; margin:0px; margin-top:15px; margin-bottom:15px; }
.txtvente2{padding-left: 12%; font-size: 3rem; margin:0px; margin-top:15px; margin-bottom:15px; }
.descrvente{padding-left: 12%; font-size: 1.5rem; margin:0px; margin-top:15px; margin-bottom:15px; }




/*VETEMENT PAGE FR++++++++++++++++++++++++++++++*/
.imgfrventes{ margin:0px; margin-top:30px; margin-bottom:15px;display: flex; justify-content: space-between; }
.imgfrvente{width: 49%;}
@media screen and (min-width:700px){.imgfrventes{padding-left: 12%;}}
/*FIN VETEMENT PAGE FR ++++++++++++++++++++++*/






@media screen and (min-width:700px){.pagevente{display: flex;}}



@media screen and (max-width:1000px){.txtvente1{font-size: 2.8rem;}.txtvente2{font-size: 2.8rem;}}
@media screen and (max-width:900px){.txtvente1{font-size: 2.5rem;}.txtvente2{font-size: 2.5rem;}}
@media screen and (max-width:800px){.txtvente1{font-size: 2.3rem;}.txtvente2{font-size: 2.3rem;}}
@media screen and (max-width:900px){.pagevente{padding: 5%;}}





.panierbtn{ padding: 10px;color: white;letter-spacing: .025rem;background-color: #141414f6;border: 1px solid white;
    text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;font-size: 1.2rem;width: 350px;margin-left: 12%;margin-top: 15px;margin-bottom: 15px;}


.selectiondetaille{ padding: 10px;color: white;letter-spacing: .025rem;background-color: #141414f6;border: 1px solid white;
    text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;font-size: 1.2rem;width: 350px;margin-left: 12%;margin-top: 15px;margin-bottom: 15px;}


    @media screen and (max-width:950px){.selectiondetaille{width: 300px;font-size: 1rem;}
.panierbtn{width: 300px;font-size: 1rem;}
}






@media screen and (max-width:700px){.generalvente{text-align: center;}
.imgdivente{width: 100%;}
.generalvente{width: 100%;}
.txtvente1{padding: 0%;}
.txtvente2{padding: 0%;}
.selectiondetaille{ margin-left: 0%;text-align: center;font-size: 1.3rem;width: 350px;}
.panierbtn{ margin-left: 0%;font-size: 1.3rem;width: 350px;}
.descrvente{padding: 0%;}
}


@media screen and (max-width:400px){
.selectiondetaille{font-size: 1.1rem;width: 300px;}
.panierbtn{ font-size: 1.1rem;width: 300px;}
}

@media screen and (max-width:325px){
    .selectiondetaille{font-size: 0.9rem;width: 250px;}
    .panierbtn{ font-size: 0.9rem;width: 250px;}
    }
    


    @media screen and (max-width:1200px){.descrvente{font-size: 1.2rem;}}
    @media screen and (max-width:1020px){.descrvente{font-size: 1.1rem;}}
    @media screen and (max-width:835px){.descrvente{font-size: 1rem;}}
    @media screen and (max-width:770px){.descrvente{font-size: 0.9rem;}}
    @media screen and (max-width:700px){.descrvente{font-size: 1.3rem;}}
    @media screen and (max-width:500px){.descrvente{font-size: 1.1rem;}}
    @media screen and (max-width:400px){.descrvente{font-size: 0.9rem;}}









/*TEST-------------------------------------------------------*/






#slider {
    margin: 0 auto;
    width: 50%;
    max-width: 100%;
    text-align: center;
    height: auto
 }
 #slider input[type=radio] {
    display: none;
 }
 #slider label {
    cursor:pointer;
    text-decoration: none;
 }
 #slides {
 
    border: 3px solid #ccc;
    background: #fff;
    position: relative;
    z-index: 1;
 }
 #overflow {
    width: 100%;
    overflow: hidden;
 }
 #slide1:checked ~ #slides .inner {
    margin-left: 0;
 }
 #slide2:checked ~ #slides .inner {
    margin-left: -100%;
 }
 #slide3:checked ~ #slides .inner {
    margin-left: -200%;
 }
 #slide4:checked ~ #slides .inner {
    margin-left: -300%;
 }
 #slides .inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 400%;
    line-height: 0;
 
 }
 #slides .slide {
    width: 25%;
    float:left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
 }
 
 #controls {
    margin: -180px 0 0 0;
    width: 100%;
    height: 50px;
    z-index: 3;
    position: relative;
 }
 #controls label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 60px;
    height: 60px;
    opacity: .4;
 }

 @media screen and (min-width:1200px){#controls label{margin-top: -50%;}}
 @media screen and (max-width:1200px){#controls label{margin-top: -40%;}}
 @media screen and (max-width:400px){#controls label{margin-top: -25%;}}




 #controls label:hover {
    opacity: 1;
 }
 #slide1:checked ~ #controls label:nth-child(2),
 #slide2:checked ~ #controls label:nth-child(3),
 #slide3:checked ~ #controls label:nth-child(4),
 #slide4:checked ~ #controls label:nth-child(1) {
    background: url(img/fleched.png) no-repeat;
    height: 60px;
    float:right;

    margin-right: 3px;

    display: block;
    z-index: 5;
 }





#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2){
    background: url(img/flecheg.png) no-repeat;
    height: 60px;
    float: left; 
    margin-left: 3px;
    display: block;
}

 
 #bullets {
    margin: 150px 0 0;
    text-align: center;
 }
 #bullets label {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius:100%;
    background: #ccc;
    margin: 0 10px;
 }
 #slide1:checked ~ #bullets label:nth-child(1),
 #slide2:checked ~ #bullets label:nth-child(2),
 #slide3:checked ~ #bullets label:nth-child(3),
 #slide4:checked ~ #bullets label:nth-child(4) {
    background: #444;
 }
 
 
 .imageclasik{width:100%}
 









 @media screen and (max-width:700px){
 #slider{width: 100%;}
 }


 @media screen and (max-width:1000px){
 #bullets label {width: 15px;
    height: 15px;}}


@media screen and (max-width:700px){
#bullets label {width: 20px;
    height: 20px;}}


@media screen and (max-width:450px){
#bullets label {width: 15px;
    height: 15px;}}
           

/*FIN VETEMENT PAGE *************************************************************************************************************************************************/













/*PAGE NOUVEAU *************************************************************************************************************************************************/
.nouveau{background-color: #a5a5a5;height: 100%;padding-bottom: 25px;}
.firstnew{padding-top: 25px;padding-left: 4%;padding-right: 4%;}


.firstnewprmtitle{margin: 0px;font-size: 3rem;}
.firstnewprmtxt{margin: 0px;font-size:1.8rem;}

@media screen and (max-width:700px){.firstnewprmtitle{font-size: 2.5rem;}}
@media screen and (max-width:700px){.firstnewprmtxt{font-size:1.5rem;}}
@media screen and (max-width:450px){.firstnewprmtitle{font-size: 2.1rem;}}
@media screen and (max-width:450px){.firstnewprmtxt{font-size:1.2rem;}}
@media screen and (max-width:330px){.firstnewprmtitle{font-size: 1.8rem;}}
@media screen and (max-width:330px){.firstnewprmtxt{font-size:1rem;}}











@media screen and (min-width:1000px){.firstnewprm{width: 60%;}}
@media screen and (min-width:1000px){.firstnewscd{width: 40%;}}
.firstnewimg{width: 100%;}

.firstnewthd{text-align: center;padding-top: 25px;}
.newboutoncentre{text-align: center;}

.firstnewbtn{padding: 20px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}
.firstnewbtnflex{padding: 20px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}


.firstnewimg2{width: 40%;}
.firstnewimg3{width: 40%;}
@media screen and (min-width:1200px){.firstnewimg2{width: 30%;}}
@media screen and (min-width:1200px){.firstnewimg3{width: 30%;}}
@media screen and (max-width:700px){.firstnewimg2{width: 45%;}}
@media screen and (max-width:700px){.firstnewimg3{width: 45%;}}
















@media screen and (min-width:1100px){.firstnewthd{display: none;}}
@media screen and (max-width:1100px){.firstnewbtn{display: none;}}





@media screen and (min-width:1000px){.firstnew{display: flex;}}







.firstnewimgslides{padding-top: 30px; padding-left: 4%;padding-right: 4%;text-align: center;display: flex ;justify-content: space-around;}
.firstnewimgslide{width: 19.5%;}
@media screen and (max-width:1000px){.firstnewimgslides{display: none;}}


.firstnewimgslidesresp{padding-top: 30px; padding-left: 4%;padding-right: 4%;text-align: center;display: flex ;justify-content: space-around;}
.firstnewimgslideresp{width: 33%;}
@media screen and (min-width:1000px){.firstnewimgslidesresp{display: none;}}
@media screen and (max-width:450px){.firstnewimgslidesresp{display: none;}}






/*2eme div------------*/



.nouveau2{background-color: #fae100;height: 100%;padding-bottom: 25px;}
.secondnew{padding-top: 25px;padding-left: 4%;padding-right: 4%;}



.scdnewprm{text-align: center;}

.scdnewprmtitle{margin: 0px;font-size: 3rem;}
.scdnewprmtxt{margin: 0px;font-size:1.8rem;}


.secondimages{padding-top: 40px; }
.secondimage{width: 100%;}
@media screen and (min-width:600px){.secondimage{width: 40%;}}
@media screen and (min-width:600px){.secondimages{justify-content: space-around;display: flex;}}


.scdnewthd{text-align: center;padding-top: 40px;}
.scdnewbtn{padding: 20px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}

@media screen and (max-width:700px){.scdnewprmtitle{font-size: 2.5rem;}}
@media screen and (max-width:700px){.scdnewprmtxt{font-size:1.5rem;}}
@media screen and (max-width:450px){.scdnewprmtitle{font-size: 2.1rem;}}
@media screen and (max-width:450px){.scdnewprmtxt{font-size:1.2rem;}}
@media screen and (max-width:330px){.scdnewprmtitle{font-size: 1.8rem;}}
@media screen and (max-width:330px){.scdnewprmtxt{font-size:1rem;}}






/*3eme div------------*/



.nouveau3{background-color: #0081fa;height: 100%;padding-bottom: 25px;}
.thirdnew{padding-top: 25px;padding-left: 4%;padding-right: 4%;}

.thdnewprm{text-align: center;}

.thdnewprmtitle{margin: 0px;font-size: 3rem;}
.thdnewprmtxt{margin: 0px;font-size:1.8rem;}


.thirdimages{padding-top: 40px; }
.thirdimage{width: 100%;}
@media screen and (min-width:600px){.thirdimage{width: 40%;}}
@media screen and (min-width:600px){.thirdimages{justify-content: space-around;display: flex;}}


.thdnewthd{text-align: center;padding-top: 40px;}
.thdnewbtn{padding: 20px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}

@media screen and (max-width:700px){.thdnewprmtitle{font-size: 2.5rem;}}
@media screen and (max-width:700px){.thdnewprmtxt{font-size:1.5rem;}}
@media screen and (max-width:450px){.thdnewprmtitle{font-size: 2.1rem;}}
@media screen and (max-width:450px){.thdnewprmtxt{font-size:1.2rem;}}
@media screen and (max-width:330px){.thdnewprmtitle{font-size: 1.8rem;}}
@media screen and (max-width:330px){.thdnewprmtxt{font-size:1rem;}}



/*FIN PAGE NOUVEAU *************************************************************************************************************************************************/










/*PAGE INSCRIPTION *************************************************************************************************************************************************/
.inscription{
    
    color: rgb(255, 255, 255);
    background-color: #474747;  
    padding-top: 50px;
    padding-bottom: 50px;
}
.inscriptionbox{
    box-shadow: 3px 3px 15px 1px #2b2b2b;
    z-index: 3;
    background-color: #0808089f;
    width: 50%;

    margin-left: 50%;
    transform: translate(-50%);
    text-align: center;
    padding-top: 30px;
    padding-bottom: 70px;
  }






/*text*/




.inscriptionP{font-size: 1.5rem;}
.compteeh{font-size:2rem;}
.inscriptiontitle{font-size: 2.4rem;letter-spacing: .025rem;}

/*RESPONSIVE******/

/*cadre noir*/
@media screen and (max-width:1320px){.inscriptionbox{width: 60%;}}
@media screen and (max-width:1200px){.inscriptionbox{width: 65%;}}
@media screen and (max-width:1100px){.inscriptionbox{width: 70%;}}
@media screen and (max-width:1000px){.inscriptionbox{width: 75%;}}
@media screen and (max-width:900px){.inscriptionbox{width: 80%;}}
@media screen and (max-width:850px){.inscriptionbox{width: 85%;}}
@media screen and (max-width:800px){.inscriptionbox{width: 90%;}}
@media screen and (max-width:750px){.inscriptionbox{width: 95%;}}
@media screen and (max-width:700px){.inscriptionbox{width: 100%;}}

/*champs aligné horizontalement*/
@media screen and (min-width:650px){.inputmdpinscription{display:inline-flex ; align-items: center;height: 65px;margin-right: 3%;}}
@media screen and (min-width:650px){.inputeinscription{display:inline-flex ; align-items: center;height: 65px;margin-right: 3%;}}
@media screen and (min-width:650px){.inputpassinscription{display:inline-flex ; align-items: center;height: 65px;margin-right: 3%;}}
@media screen and (min-width:650px){.inscriptionP{width:295px; text-align: right;margin-right: 8px;}}
/*champs aligné verticalement*/
@media screen and (max-width:650px){.inscriptionP{margin-bottom: 0px;}}
/*reduction police ecriture*/
@media screen and (max-width:363px){.inscrpitionchamps1{font-size: 0.8rem;width: 210px;}}
@media screen and (min-width:363px){.inscrpitionchamps1{font-size: 1rem;width: 260px;}}

@media screen and (max-width:363px){.inscrpitionchamps2{font-size: 0.8rem;width: 232px;}}
@media screen and (min-width:363px){.inscrpitionchamps2{font-size: 1rem;width: 282px;}}


@media screen and (max-width:363px){.inscriptionP{font-size: 1rem;}}
@media screen and (max-width:363px){.inscriptiontitle{font-size: 2rem;}}
@media screen and (max-width:450px){.compteeh{font-size: 1.7rem;}}



/*design*/
.inscrpitionchamps2{ padding: 10px;color: white;letter-spacing: .025rem;background-color: #141414f6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;}
.inscrpitionchamps1{ padding: 10px;color: white;letter-spacing: .025rem;background-color: #141414f6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;}
.conectbtn{ margin-top: 20px;width:150px; padding: 10px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}
.bouttonbackconct{width:170px; padding: 10px;color: white;font-size: 1.3rem;letter-spacing: .025rem;font-weight: 550;background-color: #1b1c1ef6;border: 1px solid white;text-shadow:0px 0px 1px rgb(172, 237, 255); border-radius: 3%;cursor: pointer;}
.traitt{width:70%;margin-top: 50px;}
/*FIN PAGE INSCRIPTION *************************************************************************************************************************************************/