/* *****************************************************************
 SECTION
***************************************************************** */

h2,
h3 {
    margin: 0;
}
section header,
section footer,
section nav, sectionaside{
    padding: 1em;
}
body{
    max-width:100vw;
    height:100vh;
}
/* *****************************************************************
 GRID
***************************************************************** */
.grid{
    display:grid;
    grid-template-columns:17%,auto,17%;
    grid-template-areas:"header header header "
                        "menu  article aside"
                        "footer footer footer";
    }


.grid header{
    
    grid-area:header;
    background-color:#ddd;
}

.grid-menu{
    grid-area:menu;
    
}

.grid article{
    
    grid-area:article;
}
.grid aside{
    grid-area:aside;
   background-color:  #fa3;
}

.grid footer{
    grid-area:footer;
    
}



.grid-menu{
    background-color:#fc3;;
}
.grid-article{
    background-color: #fff;
}
.grid-footer{
    background-color: #bbb;
}
 /* *****************************************************************
      OU alternative en GRID TEMPLATE AREA  
***************************************************************** */
/*
.grid{
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    grid-template-areas:
        "bloc-header bloc-header bloc-header"
        "bloc-article1 bloc-article2 bloc-article3"
        "bloc-article1 bloc-article4 bloc-article4"
        "bloc-footer bloc-footer bloc-footer";
}

.bloc-header{
    padding-left: 2%;
    background-color: #ddd;
    grid-area: bloc-header;
}

.bloc-article-1{
    background-color: #fff;
    grid-area: bloc-article1;
}

.bloc-article-2{
    background-color: #fc3;
    grid-area: bloc-article2;
}

.bloc-article-3{
    background-color: #fa3;
    grid-area: bloc-article3;
}

.bloc-article-4{
    background-color: #f83;
    grid-area: bloc-article4;
}

.bloc-footer{
    padding-left: 2%;
    background-color: #bbb;
    grid-area: bloc-footer;
}