/* --- Global --- */
body {
	margin: 0;
	padding: 0;
	background-image: url(../import/fond.gif);
	display: flex;
	align-items: center;    
	justify-content: center;
}

#conteneur {
	width: 1200px;
	height: 800px;
	margin: 100px auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 8px;
}

/* --- Cases --- */
#premier {
	grid-column: 1/3;
	grid-row: 1/2;
	background-image: url(../import/case1.png);
	background-size: cover;
	background-position: center;
}

#premier:hover {
	background-image: url(../import/Case1.gif);
	background-size: cover;
	background-position: center;
}


#deuxieme {
	grid-column: 3/5;
	grid-row: 1/3;
	background-image: url(../import/case2.png);
	background-size: cover;
	background-position: center;
}

#deuxieme:hover {
	background-image: url(../import/Case2.gif);
	background-size: cover;
	background-position: center;
}

#troisieme {
	grid-column: 5/6;
	grid-row: 1/3;
	background-image: url(../import/case3.png);
	background-size: cover;
	background-position: center;
}

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

#quatrieme {
	grid-column: 1/3;
	grid-row: 2/5;
	background-image: url(../import/case4.png);
	background-size: cover;
	background-position: center;
}

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


#cinquieme {
	grid-column: 3/6;
	grid-row: 3/4;
    background-image: url(../import/case5.png);
	background-size: cover;
	background-position: center;
}

#cinquieme:hover {
	background-image: url(../import/Case5.gif);
}

#sixieme {
	grid-column: 3/4;
	grid-row: 4/5;
	background-image: url(../import/case6.png);
	background-size: cover;
	background-position: center;
}

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

#septieme {
	grid-column: 4/5;
	grid-row: 4/5;
	background-image: url(../import/case7.png);
	background-size: cover;
	background-position: center;
}

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

#huitieme {
	grid-column: 5/6;
	grid-row: 4/5;
	background-image: url(../import/case8.png);
	background-size: cover;
	background-position: center;
}

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