/*
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main , body {
    background-color:#f0ece2;
}

/*-------------------le header et le footer------------------ */

header {
    padding: 0 0px 0 0px;
    margin: 0px;
    max-width: 100vw;
/* pos relative permet de définir la place des éléments enfants absolute du header */
    position:relative;
    align-items: center;
    box-sizing: border-box;
    top: 0;
    }

footer {
    padding: 0 0px 0 0px;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* appliquer des style sur la nav*/

nav {
    background-color: #5f0612fc;
    text-align: center;

}

/* créer un menu horizontal */

nav ul li {
    display: inline;
}

/* appliquer des styles pour les liens */

nav ul li a {
    display: inline-block;
    padding: 10px 5px 10px 5px;
    color: #fff;
    text-decoration: none;
}

/* changer la couleur du lien lors du survol */

nav ul li a:hover {
    background-color: #555;
}

/* ------------------------les media queries-------------------------- */
/*-------------------------------------------------------------------- */

/* marges extérieures sur le body selon la taille de l'écran */

@media screen and (width <=800px) {
body {
    margin: 0 40px 0 40px;
}
.gauche, .droite{
    width: 100%;
}
}

@media screen and (width<= 426px) {
body {
    margin: 0 20px 0 20px;
}

}

@media screen and (width>=801px) {
nav ul li a {
    padding: 20px 10px 20px 10px;

}
}
@media screen and (width >=1400px) {
body {
    margin: 0 70px 0 70px;
}

}

/* ---------------taille des polices pour les tel portables -------- */

@media screen and (width <= 520px){
    a {
        font-size: 0.8em;
    }
}