*{
    padding: 0;
    margin: 0;
}
.img300{
    width: 50px;
    height: 50px;

}


body {
    /* background-color: lightgray; */
    background-color: black;
    color: white;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}
/* ************nav*************** */
a{
    text-decoration: none !important;
    color:white;
    margin: .3rem;
}
a:hover{
color: rgb(211, 199, 177);
}


nav{
    /* background-color: brown; */
    /* position: absolute; */
}

.nav1{
    /* display: flex; */
    /* justify-content: space-between; */
    margin: 1rem;
    /* background-color: yellow; */
    /* display: block; */
    /* justify-self: flex-start; */
    /* justify-items: center;/ */
    
    
    
}

.menu{
    /* background-color: blue; */
    display: flex;
    /* align-items: center/ */
    justify-content: center;
    /* position: absolute; */
    /* justify-self: center; */
    /* align-self: center; */
    /* align-items: center;
    justify-items: center; */
    /* background-color: rgb(146, 146, 197); */
    padding: 1rem;
    /* position: absolute; */
    
}
.menu a{ 
     margin: 1rem;
     transition: .2s all ease-in-out;
 } 
.menu a:hover{ 
    font-size:1.1rem; 
    margin: .1rem; 
    color: rgb(201, 194, 207);
  
 
 } 
.menuback{
    /* background-color: brown; */
    z-index: 10;
    display: flex;
    flex-direction: column;
    margin: 0;
    margin-right: 0;
}
.menu_burger{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    display: none;
    padding: 2rem;
    border-radius: 15px;
    border: solid 1px white;
    background-color: rgb(80, 74, 74);
    position: relative;
    margin-top:2rem ;
    z-index: 100;
    position: absolute;
    
    
    /* justify-self: flex-end; */
    /* justify-items: flex-end; */
}
.menu_burguer a:hover{
          font-size: 1rem;
}
.nav{
    display: flex;
    justify-content: end;
    /* flex-direction: column; */
    /* background-color: aqua; */
    justify-content: space-between;
}
.bdd{
    align-items: flex-end;
    display: flex;
    justify-content: end;
    /* background-color: blueviolet; */
    /* flex-direction: column; */
    justify-content: end;
    align-items: center;
    /* border: solid 3px black; */
    width: 20%;
    justify-self: end;
    align-self: flex-end;
    padding-right: 2rem;
}
.nameUser{
    /* border: solid 2px white; */
    margin: .5rem;
background-color: black;
display: flex;
flex-direction: column;
padding: 1rem;

justify-self: end;
align-items: center;
/* align-self: flex-end; */
justify-content: center;
width: 20%;
}

.connection{
    display: flex;
    /* position: absolute; */
    align-items: center;
    padding: 5px;
}
.deconnection{
    border: solid 1px white;
    padding: 5px;
    border-radius: 15px;
    margin-left: 2rem;
    /* width: 20%; */
    /* background-color: azure; */
}
.connection1:hover, .deconnection:hover, .connection2:hover{
    background-color: rgb(214, 74, 74);
    color: black;
    /* padding: 3px; */
    border: none;
    border-radius: 15px;
}
.clic{
    color: red;
}

.imgNav{
    margin-top: 2rem;
    width: 100%;
    height: 200px;
    /* background-color: gray; */
    background-image: url('../images/oeuvres/20220912183135-631f5ee7a8b92.jpg');
    background-position: center;
    background-attachment: fixed;
    box-shadow: inset 1px 1px 14px 12px black;
}





/* *****inscription/connection **************/

.bodyRegister{
    width: 100%;
    height: 100%;
    /* background-color: brown; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.connect h1{
    margin:3rem;
    text-align: center;
}
.connect2{
    background-color: rgb(94, 94, 121);
    padding: 3rem;
    /* width: 100%; */
    border-radius: 20px;
}
.connect3{
    margin:1rem 0 1rem 0;
    border-radius: 15px;
    /* background-color: green; */
    text-align: center;
    
}

.connect4{
    text-align: center;
    border-radius: 15px;
    background-color: blueviolet;
}

.connect5{
    background-color: rgb(77, 80, 238);
    margin-top: 2rem;
    text-align: center;
    box-shadow: 1px 1px 1px black;
}
.connect5:hover{
    background-color: rgb(238, 77, 77);
    border-radius: 15px;

}

#connexion{
    text-align: center;
    margin: 2rem;
}







/* /page backoffice acceuil */
.index_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    /* margin-top:6rem; */
    /* width: 80%; */
    /* background-color: blue; */

}
.tableIndex{
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 3rem;
    width: 80%;
}
.table{
    background-color: rgb(71, 67, 67);
    margin-top: 5rem;
    width: 100%;
    text-align: center;
    padding: 1rem;
    border-radius: 20px;
    border: solid 1px white;
    color: white;
}
th{
    border: solid 1px hotpink;
    margin-bottom: 2rem;
    border-radius: 15px;
    background-color: black;
}
.new{
    background-color: blueviolet;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 3rem;
    width: 80%;
}
.new h1{
    margin: 3rem;
}
.new1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.img80{
    width: 50px;
    height: 50px;
}
.img300{
width: 20rem;
height: auto;
/* padding: 2rem; */
margin: 1rem;
}


/* page accuiel */

.imageHome{
    display: flex;
    /* flex-direction: column; */
    border: solid 2px green;
    flex-wrap: wrap;
    justify-content: center;
}
.imgHome{
    /* width: 80%; */
    height: 500px;
    background-color: aquamarine;
    /* margin: 10rem; */
   
}

.imgTitre{

    border: solid 2px red;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.imgTitre a{
    width: 100%;
    display: flex;
    justify-content: center;
}
.img{
    border: solid 2px rgb(226, 226, 12);
    width: 100%;
    display: flex;
    justify-content: center;
}


.container{
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    /* width: 100%; */
    margin: 5rem;
}
.container2{
    /* display: flex; */
    /* width: 100%; */
    
}
.container3{
    display: flex;
}
.container4{
    width: 100%;
    display: flex;
flex-wrap: wrap;    
/* background-color: aquamarine; */
flex-direction: column;
}
.travailRecent{
    width: 100%;
}

.oeuvre{
    /* margin: 2rem; */
    /* padding: 10rem; */
    /* background-color: bisque; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    /* width: 80%; */
    border: 1px solid black;
   


}
.image1{

    /* background-color: rgb(167, 60, 60); */
    padding: 1rem;
    /* z-index: 12; */
}
.image1:hover{
        background-color: rgb(114, 111, 111);
        transition-duration: 1s;
        /* padding: 0 */
        border-radius: 5px;
        
}



.img300:hover{
    width: 21rem;
    transition-duration: 1s;
    padding: 0;
    margin: 0;
    box-shadow: 3px -3px 3px 1px rgb(24 24 24);
    transition-duration: 1s;

    
  
}
.titre{
    border: solid 1px white;
    padding: .5rem;
    border-radius: 5px;
    text-align: center;
    margin-left: 20rem;
    margin-right: 20rem;
}

.apropo{
    margin-left: 15rem;
    margin-right: 15rem;
    margin-top: 2rem;
}


/* ************show************ */
.containerShow{
    display: flex;
    width: 70%;
    /* background-color: rgb(70, 66, 66); */
    margin: auto;
   flex-wrap: wrap;
    margin-top: 5rem;
    border: 1px solid white;
    border-radius: 15px;
    padding: 2rem;
    justify-content: space-around;
        
}
.contenantShow{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50%;
    

}
.paragraphe{
    /* width: 20%;/ */
    border: 1px solid white;
}
.contenantShow h3{
    color: rgb(243, 181, 101);
}
.imgShow{
    width:50%;
    /* margin-right: 5rem; */
}

.img400{

    width: 30rem;
    transition: 1s all ease-in-out;
    
}
.img400:hover{
    -ms-transform: scale(1.6); /* IE 9 */
    -webkit-transform: scale(1.6); /* Safari 3-8 */
    transform: scale(1.6); 
    /* margin-left: 10rem; */
    position: relative;
   
}

.panier{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: solid 1px rgb(211, 247, 12);

}

.quantity{
    margin: 1rem !important;
    border: solid 1px green;
}
.buton{
    padding: .4rem ;
    border-radius: 15px;
}
.buton:hover{
    background-color: rgb(36, 235, 126);
}
.buton a{
    color: black;
}

/* /***********edit************ */

.Edit{
    display: flex !important;
    border: solid 1px white;
    margin-left: 10rem;
    margin-right: 10rem;
    justify-content: space-around;
    flex-wrap: wrap;
}
.imageEdit{
    border: solid 1px white; 
    margin-left: 5rem;
}
#edit2{
    display: flex !important;
    /* flex-direction: column; */
}
.row{ 
    border: solid 1px wheat;
    margin: 3rem;
}
/************formulaire********** */
.contactF{
    margin: 5rem 30rem 5rem 30rem;
    
}
#submitForm{
    margin: 2rem 0 0 0;
}