body{
	background-color: #24195E;
}

#conteneur{
	width: 1400px;
	height: 700px;
	margin: 25px auto;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	/*grid-gap: 5px;*/
}

article{
	border: 1px solid black;
}

#premier{
	grid-column: 1/3;
	grid-row: 1/2;
	background-image: url(../image_taf/pp1.jpg);
}

#premier:hover{
	background-image: url(../image_taf/case1.gif);
}

#deuxieme{
	grid-column: 1/2;
	grid-row: 2/4;
	background-image: url(../image_taf/pp2.jpg);
}

#deuxieme:hover{
	background-image: url(../image_taf/case2.gif);
}

#troisieme{
	grid-column: 2/3;
	grid-row: 2/4;
	background-image: url(../image_taf/pp3.jpg);
}

#troisieme:hover{
	background-image: url(../image_taf/case3.gif);
}

#quatrieme{
	grid-column: 3/4;
	grid-row: 1/3;
	background-image: url(../image_taf/pp4.jpg);
}

#quatrieme:hover{
	background-image: url(../image_taf/case4.gif);
}

#cinquiete{
	grid-column: 3/5;
	grid-row: 3/4;
	background-image: url(../image_taf/pp5.jpg);
}

#cinquiete:hover{
	background-image: url(../image_taf/case5.gif);
}

#sixieme{
	grid-column: 4/6;
	grid-row: 1/2;
	background-image: url(../image_taf/pp6.jpg);
}

#sixieme:hover{
	background-image: url(../image_taf/case6.gif);
}

#septieme{
	grid-column: 4/5;
	grid-row: 2/3;
	background-image: url(../image_taf/pp7.jpg);

}

#septieme:hover{
	background-image: url(../image_taf/case7.gif);
}

#huitieme{
	grid-column: 5/6;
	grid-row: 2/4;
	background-color: hotpink;
	background-image: url(../image_taf/pp8.jpg);
}

#huitieme:hover{
	background-image: url(../image_taf/case8.gif);
}