body {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
}
#grille {
    /* grille en mode grid*/
    display: grid;
    grid-template-columns: 1fr;                 /* 1 colonne */
    grid-template-rows: 1fr 1fr 4fr 1fr;        /* 4 lignes */
    grid-gap: 5px;                              /* gouttières */
    height: 100vh;
    grid-template-areas :                       /* zones nommées*/ 
                "header"                        /* placement explicite*/
                "nav"
                "section"
                "footer";
}
header {
    background-color: #fbd8bc;
    text-align: center;
    grid-area: header;                          /* zone nommée*/
}
nav {
    background-color: #b7dde8;
    text-align: center;
    grid-area: nav;                             /* zone nommée*/
}
section {
    background-color: #d8d8d8;
    text-align: center;
    padding: 10px;
    grid-area: section;                         /* zone nommée*/
}
/* une grid dans une grid*/
section {
    /* section en mode grid*/
    display: grid;
    grid-template-columns: 1fr;                 /* 1 colonne */
    grid-template-rows: 3fr repeat(3, 1fr);     /* 4 lignes */
    grid-template-areas:                        /* zones nommées*/
                "article"                       /* placement explicite*/
                "aside1"
                "aside2"
                "aside3";
    grid-gap: 5px;
}
article {
    background-color: #8db1e3;
    grid-area: article;                         /* zone nommée*/
}
aside {
    background-color: #d99690;
}
/* nommer les zones avec des noms différents
3 zones aside sont renommées*/
#aside1 {
    grid-area: aside1;
}
#aside2 {
    grid-area: aside2;
}
#aside3 {
    grid-area: aside3;
}
footer {
    background-color: #d3d4ac;
    text-align: center;
    grid-area: footer;                              /* zone nommée*/
}


@media screen and (min-width: 780px) and (max-width: 950px) {
    #grille {
        grid-template-columns: 1fr 4fr;             /* 2 colonnes */
        grid-template-rows: 1fr 4fr 1fr;            /* 3 lignes */
        grid-template-areas :                       /* zones nommées*/
                    "header header"                 /* placement explicite*/
                    "nav section"
                    "footer footer";
    }
    /* La grid de la section garde les propriétés par défaut*/
}

@media screen and (min-width: 951px) {
    #grille {
        grid-template-columns: 1fr 4fr;             /* 2 colonnes */
        grid-template-rows: 1fr 4fr 1fr;            /* 3 lignes */
        grid-template-areas :                       /* zones nommées*/
                    "header header"                 /* placement explicite*/
                    "nav section"
                    "footer footer";
    }
    section {             
        grid-template-columns: 3fr 1fr;             /* 2 colonnes */
        grid-template-rows: repeat(3, 1fr);         /* 3 lignes */
        grid-template-areas:                        /* zones nommées*/
                    "article aside1"                /* placement explicite*/
                    "article aside2"
                    "article aside3";
    }
}