*{
    box-sizing: border-box;/*pour garder la meme taille*/
}
body{
    font-family: Arial, Helvetica, sans-serif;/*j'applique directement sur le body la police d'écriture*/
    color:#2f2f2f;
    background-color: #1c1c1c;
}
p{
    font-size:13px;
}
header{
    background-color: #f9f9f9;
    box-shadow: -7px -5px 7px 15px #000;
}
.header-background{
    width:1080px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 30px;
}
.compte{
    display: flex;
    align-items: center;
}
.top-nav li{
    list-style-type: none;
}
.top-nav a{
    text-decoration: none;
    color:#2f2f2f;
    font-size: 13px;
}
.user{
    background-color: #f9f9f9;
    padding:1px;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
}
.user a{
    text-decoration: none;
    color:#2f2f2f;
}
.user-bc{
    background: linear-gradient(to right, #060606, #bababa, #2f2f2f);
    padding: 1px;
}
.compte, .panier{
    display: flex;
    align-items: center;
}
.hello{
    text-align: right;
    margin-top:10px;
    margin-right:10px;    
}
.hello p{
    font-size: 16px;
}
.top-nav ul{
    margin-top:20px;
    display: flex;
    justify-content: space-between;
    margin-right: 45px;
}
.top-nav li{
    border-right: 1px;
    border-style: solid;
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),  #ccc) 1 100%;
    padding: 14px 20px;
}
.top-nav li:first-child{
    border-left: 1px;
    border-style: solid;
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),  #ccc) 1 100%;
}
.logo h3{
    font-weight: 100;
}
.logo span{
    color:#ea9f05;
}
.compte p{
    margin-left: 10px;
}
.header-top-left{
    border-left: 4px;
    border-style: solid;
    border-image: linear-gradient(to bottom, #fff,  #f7c667) 1 100%;
    padding:40px 0px 15px 30px;
}
main{
    width:1080px;
    margin:0 auto;
    -webkit-box-shadow: -2px 0px 10px 0px #000000; 
    box-shadow: -2px 0px 10px 0px #000000;
    margin-top: 30px;
}
.slider img{
    width:100%;
    -webkit-box-shadow: -7px -5px 7px 15px #1c1c1c; 
    box-shadow: -7px -5px 7px 15px #1c1c1c;
}
.produits{
    background-color: #f3f3f3;
}
.row, .row2{
    width:900px;
    margin:0 auto;
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
}
.imgboxe1{
    position: relative;
}
.legende{
    text-transform: uppercase;
    font-weight: bold;
    position: absolute;
    bottom: 20px;
    left: calc(20%);
    font-size: 13px;
}
.reduction{
    width: 63px;
    background-color: #3c3c3c;
    color: #ea9f05;
    padding: 10px 7px;
    border-radius: 5px;
    text-align: center;
    box-shadow: inset 2px 2px 2px 1px rgba(40, 40, 40, .8);
    border: 2px solid #292929;
    position: absolute;
    bottom: 327px;
    left: 319px;
}
.reduction p{
    font-size:16px;
    font-weight: bold;
}
.bloc-1{
    position: relative;    
}
.bloc-1 img{
    -webkit-box-shadow: -2px 0px 10px 0px #000000; 
    box-shadow: -2px 0px 10px 0px #000000;
}
.prix{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 366px;
    padding: 10px;
}
.vente{
    background: linear-gradient(to bottom,#363636,  #1f1f1f);
    color:#fff;
    padding: 6px 50px;
}
.tarif span:first-child{
    font-weight: bold;
    text-decoration: line-through;
    font-size: 16px;
    margin-right: 20px;
    position: relative;
    bottom: 8px;
}
.tarif span:last-child{
    color: #ea9f05;
    font-weight: bold;
    font-size: 30px;
}
.vente a{
    font-size: 16px;
    text-decoration: none;
    color:#fff;
}
.tarif{
    border-bottom: 1px;
    border-style: solid;
    border-image: linear-gradient(to right, #f3f3f3, #464646) 1;
}
.trait{
    height: 20px;
    background-color: #373737;
    position: relative;
    bottom: 45px;
    z-index:1;
}
.row2{
    padding-bottom: 130px;
}
footer{
    background-color: #373737;
}
.bottom-nav{
    background-color: #f9f9f9;
    width: 567px;
    margin: 0 auto;
    padding:25px 20px 20px 20px;
    border-radius: 0 0 10px 10px;
    box-shadow:inset -2px 12px 7px 0px rgba(40, 40, 40, .4), -2px 0px 10px 0px rgba(0,0,0,0.62);
    position: relative;
    bottom: 52px;
}
.bottom-nav a{
    text-decoration: none;
    font-size:13px;
    color:#686868;
}
.bottom-nav ul{
    display: flex;
    list-style-type: none;
    justify-content: space-evenly;
}
.bottom-nav ul li p{
    color:#d1d1d1;
}
.icon{
    width:800px;
    margin:0 auto;
    display:flex;
    color:#fff;
    text-align:center;
}
.icon img{
    margin-bottom:10px;
}
hr{
    width: 450px;
    margin: 0 auto;
    background-color: #5b5b5b;
    height: 1px;
    border-bottom: 1px solid #000;
    margin-top: 30px;
    margin-bottom:30px;
}
.social{
    width: 260px ;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.copyright{
    margin-top: 30px;
    color:#fff;
    text-align: center;
    padding-bottom:20px;
}