@font-face {
    font-family: 'Heebo', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Heebo:wght@200;300;400;500;600;700;800;900&display=swap');
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
    /* car 16px = 1em */
    font-size: 1em;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    padding-bottom : 2em;
}


/* le vw pour les tailles largeur 
et le vh pour taille hauteur
le em pour les tailles police
le % pr images */


:root {
    /* pour cercle, rond background section 3 et .bleuVert et le font du bouton commander en ligne et le background du bouton nos engagements */
    /* SHOP: background au survol element nav*/
    --bleuVert: #39ffc9;
    /* pr cartes */
    --marronFonce: #2a2522;
    /* bouton nav  h2 section3, font du bouton nos engagements, texte lorem page 1, texte footer */
    /* SHOP: pour les background boutons au suvol et texte du bouton et prix et nomination de l'article  et texte footer et nav */
    --marronClair: #534741;
    /* pr font tout texte carte sauf celui en bleuVert et h3 section2 h3 section3  .traiClair */
    /* SHOP: pour background bouton et texte au survol et footer et "1 pièce"*/
    --beige: #d6cab3;
    /* background nav, texte bouton nav, h2 section1 et h2 section2 */
    --beigeClair: #fefbf3;
    /* background .fond  */
    /* SHOP: fond page */
    --preskBlanc: #fffbf6;
    /* SHOP: fond des carte articles */
    --white: #ffffff;
}

#barNav {
    background-color: var(--beigeClair);
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 12vh;
    /* overflow: hidden; */
    position: fixed;
    top: 0;
    /* z-index pour que la barre de navigation soit toujours au premier-plan */
    z-index: 900;

}

#lien-logo {
    width: 20%;
    height: 100%;
}

#logo {
    width: 100%;
    margin-left: 1.5vw;
    margin-top: -1.1vh;
}

#liens {
    width: 42%;
    transform: translateX(-7vw);
    display: flex;
    justify-content: space-evenly;

}

a {
    color: var(--marronClair);
    text-decoration: none;
    font-weight: 700;

}

.a_accueil:hover {
    color: var(--bleuVert);
}

#buttonNav {
    background-color: var(--marronClair);
    color: var(--beigeClair);
    border: none;
    border-radius: 2vh;
    line-height: 1.8em;
    font-weight: 400;
    margin-right: 2vw;
    width: 11em;

}

footer {
    background-color: var(--beige);
    color: var(--marronClair);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    height: 4.5vh;
    z-index: 990;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0
}

span {
    margin: 1.2vh 2vw;
    font-weight: 600;
    align-items: center;
    z-index: 990;
}


/* cursor: pointer; */
.a_accueil:hover,
#buttonNav {
    cursor: pointer;
}