/* supprime les marges par défaut du corps de la page*/
html, body, ul, p, #cadre{
margin: 0px;
padding: 0px;
}

#image_fond{
	position: relative;
	height: 600px;
	width: 1200px;
	z-index: 1;
}

#cadre{
	height: 600px;
	width: 1200px;

	text-align: center;
    margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.bouton{
	position: absolute;
	z-index: 2;
	opacity: 0.5;
	transition: 0.8s;
}

.bouton:hover{
	opacity: 1;
	transition: 0.8s;
}

#inondation{
	top: 75px;
	left: 336px;
}

#pollutions{
	top: 41px;
	left: 589px;
}

#energies{
	top: 174px;
	left: 769px;
}

#acteurs{
	top: 285px;
	left: 543px;
}

#culture{
	top: 325px;
	left: 362px;
	opacity: 0.7;
}

#culture:hover{
	opacity: 1;
}


#materiaux{
	top: 163px;
	left: 119px; 
}

.logo{
z-index: 3;
position: absolute;
height: 55px;
}

.logo:hover{
	opacity: 0.5;
}

#A1_episy{
	top: 91px;
	left: 621px; 
}

#A2_batir_resilience{
	top: 188px;
	left: 432px; 
}

#A3_adapter_lexistant{
	top: 191px;
	left: 360px; 
}

#A4_bassee{
	top: 180px;
	left: 522px; 
}

#A5_ceinture_verte{
	top: 172px;
	left: 620px; 
}

#B1_franchissement{
	top: 314px;
	left: 794px; 
}

#B2_cycletic{
	top: 460px;
	left: 580px; 
}

#B3_promenade{
	top: 446px;
	left: 797px; 
}

#B4_reamenagement{
	top: 452px;
	left: 688px; 
}

#B5_recyclage{
	top: 335px;
	left: 680px; 
}

#C1_castorII{
	top: 296px;
	left: 148px; 
}

#C2_bourgeois{
	top: 212px;
	left: 157px; 
}

#C3_poiriers{
	top: 195px;
	left: 261px; 
}

#C4_ecocentre{
	top: 322px;
	left: 290px; 
}

#D1_meandre{
	top: 100px;
	left: 712px; 
}

#D2_gravieres{
	top: 105px;
	left: 796px; 
}

#D3_grande_paroisse{
	top: 110px;
	left: 888px; 
}

#E1_piscine{
	top: 186px;
	left: 803px; 
}

#E2_zac{
	top: 190px;
	left: 893px; 
}

#F1_quovadis{
	top: 481px;
	left: 485px; 
}

#F2_studio{
	top: 438px;
	left: 412px; 
}


#F3_atelier{
	top: 344px;
	left: 424px; 
}


#F4_programmemixte{
	top: 347px;
	left: 567px; 
}