body{
  
  }
  *{
	margin:0px;
	padding:0px;
}
.fin{
color:white;
font-weight:bold;
 background-color:#000000;}
.title{
background-color:black;}
  li{
  display:inline-block;}
  ul{
	list-style:none;
	display:inline-block;
	border-radius: 10px;
	font-size: 20px;
	margin-top:15px;
		padding:20px;
  }
  .picto{
	  float:left;
	vertical-align: middle;
	border-radius:5px;
	display:table-cell;
  }
  .page{
	position:absolute;

	margin-bottom:0px;
	background-image:url(../images/mine.jpg);
	background-size: 100% 100%;
	width:100%;
	height:1200px;  
	z-index: 1;
	}
  .page2{
	position:absolute;

	margin-bottom:0px;
	background-image:url(../images/pixel.jpg);
	background-size: 100% 100%;
	width:100%;
	height:1200px;  
	z-index: 1;
	}
  /*header*/
.banniere{
	padding-left:385px;
	width:950px;

	position:absolute;
	z-index:2;
	background-size: cover;
}
.boutonentete>a{
display:none;}
.boutonentete{
	border-radius:0px 0px 25px 25px;
	border-style:outset;
	text-align:center;
	margin: 0px 10px 0px 10px;
	padding:0px;
	width:150px;
	height:16px;
	display:inline-block;
	background:rgba(200,200,255,.6);
}
.boutonentete:hover>a{
transition: all 5.1s;
display: inline-block;
}
.boutonentete:hover{
font-size:20px;
display: inline-block;
	height:30px;
	background:rgba(255,255,255,.7);
	 transition: height .25s;
	 	cursor: pointer;
}
.bouton{
    background-color: #FFFFFF ;
margin:10px;
padding:10px;
border-radius:25px;
border-style: double;

}
.bouton:hover {

 transition-duration: .5s; 

background-color: orange;
}

/*header_end*/

/*stats*/

	
	.statut{
	margin-left:15px;
	padding:20px;
	margin-top:2px;			
	float: left;
	font-size:20px;
	text-align:center;
	border-radius: 10px;
	color:black;
    background-color: #FFFFFF ;
	height: auto;
	width: auto;	
	text-align: left;
	border:double;	
	line-height: 150%;
	background-image:url(../images/id.jpeg);
	background-size: cover;
	z-index:1;
	}
	
	/*stats_end*/
	.gauche{
	position:fixed;
float:left;
	z-index:2;
	margin-top:15px;
	
	float: left;
	}
	/*droite*/
	.droite{
margin-top:40px;
position:fixed;
margin-left:500px;
	float: right;

	z-index:10;
	}
	.entete{
		margin-top:-15px;
		padding:20px;
	background-color: #FFFFFF ;
	background-size: cover; 
	text-align:center;
	border-radius: 10px;
	font-size:20px;
	color: black;
	height: auto;
	width: 800px;	
	border: double;	

	}
	
.photo{
	margin-left:15px;
	padding:20px;
	margin-top:10px;			
	float: left;
	border-radius: 10px;
    background-image:url(../images/1.jpg);
	background-size:cover;
	height: 200PX;
	width: 200px;	
	border: double;	
	z-index:1;
}
	.choix{	

	padding:20px;
	margin-top:15px;
	text-align: center;
	border-radius: 10px;
	font-size: 20px;
	color: black;
	background-image:url(../images/fondquestion.jpg);
	background-size: contain;
	height: auto;
	width: 800px;
	border: double;	
	z-index:5;
}
	/*end droite*/
	
	
	
		


	a{
	
	text-decoration: none;
	color: inherit;

	}
	

	
.infobulle {
  position: relative;
  /* les .infobulle deviennent référents */
  cursor: help;
  float: left;
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
position: relative;
 top: 12px;
left: 8px;
font-size:20px;
margin-left:200px;
background-color: orange;
border-radius:25px;
border-style:double;
padding:10px 10px 10px 10px;
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
  transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne */
}
.separator{
	border-bottom: solid 4px #33CCCC;
	size=2px;
	border-radius:25px;
}

.mapinfo{ 
position:absolute;
width:150px;
height:150px;
margin-top:350px;
margin-left:700px;

z-index:2;
}
area {
  display: block;
  cursor: pointer;
}
th, td {
 border:1px solid white;
 width:20%;
 }