@font-face{
    font-family:"Grold";
    src: url('font/Grold/Grold-Medium.ttf');
}

@font-face{
    font-family:"Grold";
    font-style: extra-black;
    src:url('font/Grold/Grold-ExtraBlack.ttf')
}

@font-face{
    font-family:"Grold";
    font-style: thin;
    src:url('font/Grold/Grold-ExtraLightItalic.ttf')
}

@font-face{
    font-family:"Grold";
    font-style: thin italic;
    src:url('font/Grold/Grold-SemiLightItalic.ttf')
}

@font-face{
    font-family:"Grold";
    font-style: light;
    src:url('font/Grold/Grold-Light.ttf')
}

@font-face{
    font-family:"Grold";
    font-style: bold;
    src:url('font/Grold/Grold-Bold.ttf')
}



body{
    width:100%;
}

header img{
    width:100%;
}

.nav{
    width:100%;
    font-family: Grold-ExtraLightItalic;
    font-size:20px;
    text-transform: uppercase;
    box-shadow: 0 7px 10px -2px #F3F3F3;
    white-space: nowrap;

}

.nav ul{
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    padding-left: 30px;
    padding-right:30px;
    max-width: 1200px;
    margin:0 auto;
}

.nav li{
    padding: 15px 0px 10px 0px; 
}

.nav a{
    text-decoration: none;
    color:#000000;
}

.rechercher a{
    font-family: Grold-SemiLightItalic;
}



.item33{
    width:33%;
}

.item50{
    width:50%;
}

.item66{
    width:66%;
}

.item75{
    width:75%
}


.container{
    padding-top:50px;
    width:80%;
    max-width: 1200px;
    margin:0 auto;
}

.presentation{
    display:flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 80px;
}

.barre{
    margin-top:30px;
    height:3px;
    border-radius: 20px;
    width: 35%;
    background-color:#394F50;
    margin-bottom:30px;
}

.item33 img{
    width:100%;
    margin:0 auto;
    max-width: 300px;
}

h2{
    font-family: Grold-ExtraBlack;
    text-transform: uppercase;
    font-size: 32px;
}

p{
    font-family:Grold-Light;
    font-size: 16px;
    margin-top:20px;
}

h4{
    margin-top:30px;
    font-family: Grold-Bold;
    font-size:20px;
    text-transform: uppercase;
    color:#394F50;
}

.exemple img{
    width:100%;
}

.presentation .item33{
    padding-right:60px;
}

.gout{
    display:flex;
    flex-direction: row;
    align-items: center;
}

.gout .item33{
    padding-left:50px;
}


h3{
    font-family: Grold-ExtraBlack;
    font-size:25px;
    text-transform: uppercase;
    text-align:center;
    margin-top:70px;
    margin-bottom: 20px;
}

.produits{
    display:flex;
    flex-direction: row;
    margin:0 auto;
}

.produits img{
    width:90%;
    margin:0 auto;
}

h5{
    font-family: Grold-Bold;
    font-size:17px;
    text-align:center;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 15px;
}

.produits-phares button{
    display:flex;
    margin:0 auto;
}

.add-to-cart{
    padding:10px 20px 8px;
    border-radius:20px;
    background-color:#394F50;
    color: #ffffff;
    font-family: Grold-Bold;
    text-transform:uppercase;
    border:none;
}



footer{
    margin-top:100px;
    background-color:#A7B1B1;
}

footer .content{
    width:95%;
    margin:0 auto;
    display:flex;
    flex-direction: row;
    padding-bottom:30px;
    padding-top:20px;
}

footer h4{
    color:#ffffff;
    text-align: center;
    padding-top:30px;
}

footer p{
    color:#ffffff;
}

.item25{
    margin-right:30px;
}

.reseaux{
    display:flex;
    flex-direction:row;
    width:90%;
    align-items: center;
    margin:0 auto;
    padding-top:15px;
}

.reseaux .item33{
    padding:10px;
}