body {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
#grille {
    height: 100vh;                                  /* 100% de la hauteur de l'écran*/
    /* grille en mode grid*/
    display: grid;
    grid-gap: 5px;                                  /* gouttières lignes et colonnes de 5px*/
    grid-template-columns: repeat(3, 1fr);          /* 3 colonnes qui occupent toute la largeur*/
    grid-template-rows: 1fr 2fr 4fr 1fr;            /* 4 colonnes qui occupent toute la hauteur*/
    grid-template-areas:                            /* zones nommées*/
                "header header header"              /* placement explicite*/
                "slide slide slide"
                "section1 section2 section3"
                "footer footer footer";
}
header {
    background-color: #fa7559;
    grid-area: header;                              /* zone nommée*/
}
#slide {
    background-color: #47dee6;
    grid-area: slide;                               /* zone nommée*/
}
section {
    background-color: #b3b3b3;
}
/* nommer les zones avec des noms différents
3 zones section sont renommées*/
.section1 {
    grid-area: section1;
}
.section2 {
    grid-area: section2;
}
.section3 {
    grid-area: section3;
}
footer {
    background-color: #0c6222;
    grid-area: footer;                              /* zone nommée*/
}
.content {
    text-align: center;
    padding: 10px;
}