/**************
GENERAL 
**************/
body{
	/*background-image:url("../img/fond.svg");*/
}
#jeu-05 #liens a{
	color:#d4796b;
}
/**************
AIDE 
**************/

#aide{
	justify-content:center;
}

#liens{
	
	
}

#infos{
	z-index: 5000000000;
	right: 20px;
}
/**************
ENTETE 
**************/

#entete{

}


/**************
PRESENTATION 
**************/

#presentation{
	
}


#visuel{
	
}


/**************
ILES / ESPECES 
**************/

#lejeu{
	padding:20px;	
}
#iles, #especes{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    	align-items: center;
    	align-content:stretch;
}
#iles{
	margin-bottom:40px;
}
.ile, .espece{
	
	padding:10px 10px 0px 10px;
	background-color: #fff;
	margin:10px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: default;
	/*width:calc(100% / 10);
	min-width:100px;
	max-width:150px;*/
	width: 170px;
	height: 252px;
	border: 4px solid white;
    	border-radius: 25px;
	color:white;
	
	    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.ile img, .espece img{
	max-width:100%;

}
.ile{
	/*background-color: #0071BC;*/
	background-color:#4ec7e4;
	transition: box-shadow  1s, transform 0.2s;
	justify-content: center;
	
	flex-direction: column;
	display:none;

}
.ile img{
	width: 80%;
	max-width: 80%;
	margin: 10px auto;

}
.espece{
	background-color: #fcbc4b;
	/*background-color: #47a69d;*/
	transition: box-shadow  1s, transform 0.2s;
	justify-content: center;
	display: flex;
	flex-direction: column;
}
.espece img{
	width: 100%;
	max-width: 100%;
	max-height: 180px;
	border: 3px solid white;
	margin-bottom:10px;
}
.espece h6{
	
	font-weight: bold;
	color:black;
}
.ile h6{
	font-weight: bold;
	color:black;
	
}

.souleve{
	box-shadow: 3px 3px 25px rgba(0,0,0,0.8);
	transform: scale(1.1);
	transition:box-shadow, transform 0.1s;
}

.range{
	box-shadow: 2px 2px 20px rgba(0,0,0,0.7);
	/*transform: scale(0.5);*/
	transition:box-shadow, transform 0.1s;
}


.btn_fiche{
	position: absolute;
    	top: 12px;
    	right: 15px;
    	/*color:#d7de59;*/
    	color:white;
    	font-size:1.8em;
}
.btn_fiche:hover{
	color:white;
}
/**************
FICHE 
**************/
#fiche{
	position:absolute;
	top:0px;
	left:0px;
	width:600px;
	height: 100vh;
	background-color: #ffffff;
	color:black;
	overflow-y:scroll;
	z-index:20000000000;
	box-shadow: rgba(0,0,0,0.3) 10px 0px 10px;
	
	text-align:left;
	transition: left 0.6s, box-shadow 0.6s;
	
}
#fiche.cache{
	left:-600px;
	transition: left 0.6s, box-shadow 0.6s;
	box-shadow: rgba(0,0,0,0) 0px 0px 0px;
}
#fiche .fermer{
	text-align:right;
	position:absolute;
	top:20px;
	right:20px;
	z-index:2000;
	font-size:2em;
}
#fiche .fermer a{
	color:white;
}
#fiche img{
	width:100%;
	
}
#fiche .infos1{
	background-color:#d9dde0;
	width:100%;
	padding:20px;
	font-size:1.3em;
}
#fiche .infos2{
	width:100%;
	padding:0px 20px;
	font-size:1.2em;
	
}
#fiche table{
	margin:20px;
}
#fiche table tr{
	border-bottom:1 px solid rgba(255,255,255,0.3);
	padding: 10px 0px;
}
#fiche table tr {
	border-bottom:1px solid rgba(255,255,255,0.06);
}
#fiche table tr:first-child, #fiche table tr:last-child{
	border:0px !important;
}
#fiche table tr > td:first-child{
	font-weight: bold;
	vertical-align:top;
	padding-right:15px;
}

#fiche table td{
	padding: 10px 0px;
}
#fiche h3{
	margin-top:10px;
}
#fiche h4{
	margin-top:30px;
}
#fiche .illustration{
	position:relative;
}
#fiche .legende{
	position:absolute;
	bottom:10px;
	right:20px;
	font-size:14px;
	color:white;
	background-color:rgba(0,0,0,0.4); 
	padding: 0px 4px;
	
}

#fiche .nom{
	text-transform:uppercase;
	font-weight:bolder;
	font-size:2em;
	margin-top:0px;
	margin-bottom:0px;
	padding:25px 20px 20px 20px;
	background-color:#b1b031;
	color:white;
}
#fiche .latin{
	font-style: italic;
}
#fiche .intitule{
	background-color:#b1b031;
	border-radius: 10px;
	padding:10px 10px 6px 10px;
	float:right;
	font-size:0.7em;
	color:white;
}