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;
    grid-template-rows: 1fr 2fr repeat(4,1fr);
    grid-template-areas: 
                "header"
                "slide"
                "section1"
                "section2"
                "section3"
                "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;
}

@media screen and (min-width: 680px) and (max-width: 959px) {
    #grille {
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 1fr 2fr 4fr 1fr;
        grid-template-areas: 
                    "header header"
                    "slide slide"
                    "section1 section2 "
                    "footer footer";
    }
    .section3 {
        display: none;
    }
}

@media screen and (min-width:960px) {
    #grille {
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: 1fr 2fr 4fr 1fr;
        grid-template-areas: 
                    "header header header"
                    "slide slide slide"
                    "section1 section2 section3 "
                    "footer footer footer";
    }
}