body {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
#grille {
    /* grille en mode grid*/
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;                 /* 3 colonnes occupent 100% de la largeur*/
    grid-template-rows: repeat(3, 1fr) 4fr 1fr;         /* 5 lignes occupent 100% de la hauteur */
    grid-template-areas:                                /* zones nommées*/
                "header header header"                  /* placement explicite*/
                "nav nav nav"
                "infos navSecondaire aside"
                "infos main aside"
                "footer footer footer";
}
header {
    background-color: #0c65a7;
    grid-area: header;                                  /* zone nommée*/
}
nav {
    background-color: #124b78;
    grid-area: nav;                                     /* zone nommée*/
}
#infos {
    background-color: #bdddf7;
    grid-area: infos;                                   /* zone nommée*/
}
#navSecondaire {
    background-color: #ccccfc;
    grid-area: navSecondaire;                           /* zone nommée*/
}
#main {
    background-color: #16a2c5;
    grid-area: main;                                    /* zone nommée*/
}
aside {
    background-color: #5275ad;
    grid-area: aside;                                   /* zone nommée*/
}
footer {
    background-color: #7ccce3;
    grid-area: footer;                                  /* zone nommée*/
}
.content {
    text-align: center;
    padding: 10px;
}
@media screen and (min-width: 690px) and (max-width: 950px) {
    #grille { 
        grid-template-columns: 1fr 4fr;                     /* 2 colonnes occupent 100% de la largeur*/
        grid-template-rows: repeat(3, 1fr) 3fr 1fr 1fr;     /* 6 lignes occupent 100% de la hauteur */
        grid-template-areas:                                /* zones nommées*/
                    "header header"                         /* placement explicite*/
                    "nav nav"
                    "infos navSecondaire"
                    "infos main"
                    "aside aside"
                    "footer footer";
    }
}
@media screen and (max-width: 689px) {
    #grille { 
        grid-template-columns: 1fr;                         /* 1 colonne occupe 100% de la largeur*/
        grid-template-rows: repeat(3, 1fr) 3fr 1fr 1fr;     /* 6 lignes occupent 100% de la hauteur */
        grid-template-areas:                                /* zones nommées*/
                    "header"                                /* placement explicite*/
                    "nav"
                    "navSecondaire"
                    "main"
                    "aside"
                    "footer";
    }
    #infos {
        display: none;                                      /* la zone info n'est plus sur l'écran */
    }
}