*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 100%;
    background-color: white;
    font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}
#banniere{
    max-width: 100%;
}

#citation{
    margin: 0.7vw;
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
}


    /*Début des "div"*/

#main-div{
    position: relative;
    margin: auto;
    margin-bottom: 1.7vw;
    height: 290vw;
    width: 75%;
}

    /*Début du "nav"*/
    
nav{
    margin-top: 2vw;
    width: 100%;
}
nav li{
    list-style-type: none;
    float: left;
    margin: 0 3vw 0 3vw;
}
nav a{
    display: inline-block;
    text-decoration: none;
    padding: 1.2vw 1.4vw;
    text-transform: uppercase;
    font-size: 2.5vw;
    color: black;
    font-weight: 200;
}
#div-nav{
    display: table;
    margin: 0 auto;
}
#nav-accueil:hover{color: #f50c81; background-color : #fdfdfd; border-radius: 5px}
#nav-decouvrir:hover{color: #f50c81; background-color : #fdfdfd; border-radius: 5px}

    /*Fin du "nav"*/

section{
    padding: 0 0 2vw 0;
    border-bottom: 0.7px solid black;
}

.photos-produits{
    height: 24vw;
    width: 48vw;
    margin: 3.5vw auto;
    display: block;
}.figcaption{
    font-size: 1.15vw;
    text-align: center;
}

#ancre{
    text-align: center;
    margin: 30px 0 0 0;
    font-size: 1.5vw;
}
#ancre a{
    text-decoration: none;
    color: black;
    padding: 7px;
    background-color: #bbb;
    border-radius: 5px;
}#ancre a:hover{background-color: #ddd;}


#div-reseaux h2{
    font-size: 1.4vw;
    margin: 1vw 0 0 3.2vw;
}

#div-reseaux{
    height: 13.5vw;
    width: 70%;
    bottom: 1vw;
    border-radius: 25px;
    position: absolute;
    margin-left: 15%;
    transition: height 1s ease;
} #div-reseaux:hover{height: 15vw}

.logos-reseaux{
    height: 5.5vw;
    width: 5.5vw;
    margin: 5% 0 0 16.7%;
}

footer{
    width: 100%;
    background-color: gray;
}
footer p{
    font-size: 20px;
    text-align: center;
    padding: 10px;
}
footer a{
    text-decoration: none;
}

    /*Fin des "div"*/


        /* VERSION TELEPHONE */

@media screen and (max-width: 500px){
    #main-div{height: 670vw; width: 90%}
    
    #citation{font-size: 3.5vw}
    
    #nav-accueil{font-size: 5vw; background-color: #fafafa}
    #nav-decouvrir{font-size: 5vw; background-color: #fafafa}
    
    h2{margin: 1vw 0 0 5vw; font-size: 4.3vw}
    
    nav a{padding: 2.2vw 1.6vw}
    
    .photos-produits{height: 40vw; width: 72vw; margin: 12vw auto}

    .figcaption{font-size: 3.5vw}

    #ancre{font-size: 2vw; margin: 30px 0 30px 0}
    
    #div-reseaux h2{font-size: 4vw}

    #div-reseaux{height: 40vw; width: 75%; margin-left: 10%; border-radius: 15px; bottom: 7vw;}
    #div-reseaux:hover{height: 40vw}
    
    .logos-reseaux{
        height: 11.5vw;
        width: 11.5vw;
        margin: 5% 0 0 22%;
    }#pinterest-tel{ margin: 5% 0 0 41.5%}

    footer p{
        font-size: 10px;
    }
}