html
{
	/*Ce style est le seul non responsive, sinon les points sur la carte ne seraient pas fixe*/
	width : 1366px;
	margin:auto;
	color:white;
	background-image:url(ressources/images/vieux-papier.jpg);
	background-size:cover;
	
}

section
{
	position : relative;
	/*Permet de placer les points précisemment*/
	
}

.punaise1,.punaise2,.punaise3,.punaise4
{
	position:absolute;
	
}

/*On place à un point précis chaque punaise*/
.punaise1, .punaise3
{
	left:150px;
	
}

.punaise2, .punaise4
{
	right:150px;
	
}

.punaise3,.punaise4
{
	bottom:50px;
	
}

.mappmonde
{
	margin-left : 100px;
	/*Centrage manuel*/
	z-index : 1;
	/*La carte est en arrière plan*/
	
}

@font-face
{
	/*police normale*/
	font-family: "Police_celtic";
	src: url('ressources/polices/Police_celtic.ttf');
	
}

@font-face
{
	/*police italique*/
	font-family: "Police_celtic";
	font-style: italic;
	src: url('ressources/polices/Police_celtic.ttf');
	
}

@font-face
{
	/*police grasse*/
	font-family: "Police_celtic";
	font-weight: bold;
	src: url('ressources/polices/Police_celtic.ttf');
	
}

.titre
{
	position : absolute;
	z-index : 2;
	font-family: "Police_celtic", Helvetica, Arial, sans-serif;
	font-size : 30px;
	margin-left : 303px;
	/* la photo est de 606 de largeur, le 303 fera guise de center */
	margin-top : 0px;
	
}

/* positionnement et paramétrage des 5 dagues */
.image2
{
	position : absolute ;
	z-index : 3  ;
	left :560px  ;
	top : 135px;
	color:white;
	
}

.image2 span
{
	visibility: hidden;
	
}

/*Le texte est caché*/
.image2 img:hover + span
{
	visibility: visible;
	
}

/*Le texte s'affiche*/
.image3
{
	position : absolute ;
	z-index : 2  ;
	left : 230px  ;
	top : 140px;
	color:white;
	
}

.image3 span
{
	visibility: hidden;
	
}

.image3 img:hover + span
{
	visibility: visible;
	
}

.image4
{
	position : absolute ;
	z-index : 2  ;
	left: 800px;
	top: 230px;
	color:white;
	
}

.image4 span
{
	visibility: hidden;
	
}

.image4 img:hover + span
{
	visibility: visible;
	
}

.image5
{
	position : absolute ;
	z-index : 2  ;
	left: 380px;
	top: 370px;
	color:white;
	
}

.image5 span
{
	visibility: hidden;
	
}

.image5 img:hover + span
{
	visibility: visible;
	
}

.image6
{
	position : absolute ;
	z-index : 2  ;
	left : 330px  ;
	top : 150px;
	color:white;
	
}

.image6 span
{
	visibility: hidden;
	
}

.image6 img:hover + span
{
	visibility: visible;
	
}