body {
    margin: 0;
    padding:0;
}
#site {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas:
                "header header"
                "nav section"
                "nav article"
                "footer footer";
}
header {
    background-color: rgb(230, 24, 24);
    grid-area: header;
}
nav {
    background-color: rgb(19, 153, 243);
    grid-area: nav;
}
section {
    background-color: rgb(14, 240, 134);
    grid-area: section;
}
article {
    background-color: rgb(248, 17, 171);
    grid-area: article;
}
footer {
    background-color: rgb(184, 246, 12);
    grid-area: footer;
}

@media screen and (max-width: 800px){
    #site {
        grid-template-columns: 1fr;
        grid-template-areas:
                    "header"
                    "nav"
                    "article"
                    "footer";
    }
    section {
        display: none;      /* cache la section, et sorti du flux */
        /*visibility: hidden;  cache la section, mais présente dans le fux*/
    }   
}