
body{
    margin : auto;
    max-width : 1500px;
}
header, footer, article {
    border : 2px solid red;
}

.flex{
    display: flex;
}

.flex-justify-between {
    justify-content: space-between;
}
.flex-justify-around {
    justify-content: space-around;
}

.flex-50 > * {
    width: 50%;
}

h2, h4 {
    text-align : center;
    text-transform : uppercase;
}

.grid{
    display: grid;
}
.toolbar{
    /*justify-content : ;*/
}

.troiscolonnes {
	gap: 2em;
	grid-template-areas: 
	"img1 img2 img3"
	"img4 img4 img3";
}

.troiscolonnes > img {
    width: 100%;
    height: 100%;
    min-width: 200px;
    min-height: 200px;
}

.troiscolonnes > img:nth-child(1) {
    grid-area: img1;
}
.troiscolonnes > img:nth-child(2) {
    grid-area: img2;
}
.troiscolonnes > img:nth-child(3) {
    grid-area: img3;
}
.troiscolonnes > img:nth-child(4) {
    grid-area: img4;
}

img{
    width : 200px;
    height : 200px;
    background-color : green;
}

.marques {
    padding : 1em;
	grid-template : repeat(2, auto) / repeat(6, auto);
	align-items: center;
	gap: 1em;
}

.marques > img {
    width: 100%;
    height: 100%;
    min-width: 100px;
    min-height: 100px;
}

.imgText img {
    width: 100%;
    height: 100%;
    min-width: 400px;
    min-height: 200px;
}


.footer > div:nth-child(1) {
    grid-area: lien1;
}
.footer > div:nth-child(2) {
    grid-area: lien2;
}
.footer > div:nth-child(3) {
    grid-area: lien3;
}
.footer > div:nth-child(4) {
    grid-area: lien4;
}
.footer > div:nth-child(5) {
    grid-area: lien5;
}
.footer {
	gap: 0.2em;
	grid-template-areas: 
	"lien1 lien2"
	"lien3 lien3"
	"lien4 lien5 ";
}
.footer > div{
    border : 1px solid blue;
}
footer > div{
    width: 25%;
    height : 22em;
    border : 1px solid #333;
    margin : 10px;
}
footer > div > p {
    margin : 10px;

}