main {
	padding: 2rem;
	display: flex;
}

header  {
	padding: 2rem;
	background-color: silver;
	font-size: 2rem;
	color: black;
	font-weight: bold;
	text-transform: uppercase;
}
footer{
    padding: 2rem;
	background-color: silver;
	font-size: 2rem;
}
.grid {
    display: grid;
    gap : 1em; /* pour lespacement*/
}

.bloc-header{
    background-color: #ddd;
    grid-areas : "header" ;
    grid-row : 1 / 2;
    grid-column : 1 / 6
    
}
.bloc-article-1{
    background-color: #fff;
    grid-areas: "article-1";
    grid-row : 2 / 4;
    grid-column : 1 / 4
    
}
.bloc-article-2{
    background-color: #fc3;
    grid-areas: "article-2";
    grid-row : 2 / 3;
    grid-column : 4 / 5
}
.bloc-article-3{
    background-color: #fa3;
    grid-areas: "article-3";
    grid-row : 2 / 3;
    grid-column : 5 / 6
}
.bloc-article-4{
    background-color: #f83;
    grid-areas: "article-4";
    grid-row : 3 / 4;
    grid-column : 4 / 6
}
.bloc-footer{
    background-color: #bbb;
    grid-areas : "footer" ;
    grid-row : 4 / 5;
    grid-column : 1 / 6
}