body {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
}
#grille {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 4fr 1fr;
    grid-gap: 5px;
    height: 100vh;
    grid-template-areas :
                "header"
                "nav"
                "section"
                "footer";
}
header {
    background-color: #fbd8bc;
    text-align: center;
    grid-area: header;
}
nav {
    background-color: #b7dde8;
    text-align: center;
    grid-area: nav;
}
section {
    background-color: #d8d8d8;
    text-align: center;
    grid-area: section;
}
footer {
    background-color: #d3d4ac;
    text-align: center;
    grid-area: footer;
}


@media screen and (min-width: 780px) and (max-width: 950px) {
    #grille {
        grid-template-columns: 1fr 4fr;
        grid-template-rows: 1fr 4fr 1fr;
        grid-template-areas :
                    "header header"
                    "nav section"
                    "footer footer";
    }
}