/*style en desktop first*/

header,
main {
    

}

header {
    width: 100%;
    background-color: yellow;
    text-align: center;
}

main {
    width: 100%;
    background-color: red;
    display: flex;
    /*padding : 2%;*/
    /*flex-wrap:wrap;*/
}

section {
    width: 70%;
}

aside {
    width: 30%;
    background-color: green;

}

h1 {
    color: purple;
}

nav {
    text-align: left;
}
h2{
    padding:2%;
}

/* Fin de la version desktop*/

/*début version tablette*/

@media screen and (max-width:980px) {
    header {
        width: 100%;

    }
    section {
        width: 50%;
    }
    aside {
        width: 50%;
    }
    article{
        width:20%;
        background-color:orange;
    }
    h1 {
        color: blue;
    }
    nav {
        text-align: right;
    }
}

/*début version mobile */

@media screen and (max-width:500px) {

    header {
        width: 100%;
    }
    main {
        width: 100%;
        flex-wrap: wrap;

    }
    aside {
        width: 100%;
    }
    h1 {
        color: red;
    }
    nav {
        text-align: center;
    }
}

/*fin version mobile*/