/**************
GENERAL 
**************/
body{
	/*background-image:url("../img/fond.svg");*/
	color:white;

}
#jeu-02 #liens a{
	color:#e95a0c;
}
header{
	z-index:10000;
	height:50px;
}
/**************
AIDE 
**************/

#aide>div{
	margin:auto;
}



/**************
AIDE 
**************/
#infos{
	top:30px;
	
	z-index: 10000000000;
}
/**************
JEU 
**************/
#main{

}

#lejeu{

}

/**************
QUESTION 
**************/

#question{
	width:80%;
	margin: 0px auto 0px auto;
}

#reponses{
	margin:20px auto;
	width:50%;
	text-align:left;
}
#reponses label {
    font-size:32px;
    margin-bottom:15px;

}
#info-reponse{
	width:80%;
	margin:0px auto;
	display:none;
}

/**************
ANIMAUX 
**************/
#animaux{
	display:flex;
	position:absolute;
	bottom:0px;
	left:0px;
	align-items: flex-start;

}
#animaux .animal{
	cursor:pointer;
	border-top:6px solid rgba(204,90,28,0);
	transition: all 0.25s;
}
#animaux .animal h5{
	margin-top:8px;
}
#animaux .animal img{
	width:100%;
}
#animaux .animal.select{
	border-top:6px solid #b1b031;
	padding-bottom:15px;
	background-color:#b1b031;
	box-shadow:0px 10px 20px rgba(0,0,0,0.6);
	z-index:2000;
	transition: all 0.25s;
}

/**************
FENETRE
**************/

#fenetre_message{
	display:flex;
	width:100%;
	height:100vh;
	align-items: center;
	justify-content: center;
	background-color:rgba(0,0,0,0.4);
	position:fixed;
	z-index:10000000000;
	padding:100px;
	transform: scale(1.2);
	opacity: 0;
	transition: opacity 0.4s, transform 0.3s;
}


#fenetre_message img{
	width:450px;
	
}

#fenetre_message.montre{
	transform: scale(1);
	opacity:1;
	
}


#fenetre_message .contenu{
	-webkit-box-shadow: 0px 0px 160px 20px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 160px 20px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 160px 20px rgba(0,0,0,0.6);
	background-color: white;
	padding:50px;
	border-radius: 50px;
	display:flex;
	flex-direction: column;
	text-align:center;
	align-items: center;
	width:60%;
	color:#212529;
}

#fenetre_message .contenu h2{
	color:#aab100;
	font-family:DIN Bold;
	font-size:50px;

}
#fenetre_message .contenu h4{
	width:85%;
	margin:auto;
	margin-bottom:1em;
	font-size:1.75rem;

}

/**************
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;
	font-size: 2em;
	position:absolute;
	right:20px;
	top:20px;
	z-index:2000;
}
#fiche .fermer a{
	color:white;
}
#fiche .legende{
	background-color: rgba(255,255,255,0.6);
	color:black;
	width:max-content;
	font-size:0.7em;
	padding:5px 5px 0px 5px;
	bottom:0px !important;
	right:0px !important;
	left:unset;
}
.legende h5{
	padding:0px;
	margin:0;
}
#fiche .carousel{
	background-color:#b1b031;
}
#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:20px;
	margin-top:-40px;
}

#fiche table{
	margin-bottom: 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:0px;
	
	text-transform:uppercase;
	display:inline-block;
	padding:10px 10px 5px 10px;
	font-weight:900;
	color: white;
	letter-spacing: 0.3em;
	font-size:1.1em;
	margin-left:-20px;
	margin-bottom:30px;
	border-top-right-radius: 20px;
	background-color:#b1b031;
}
#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:#d9dde0;
	border-radius: 10px;
	padding:10px 10px 6px 10px;
	float:right;
	font-size:0.7em;
}

/* Masquer le bouton radio d'origine */
#reponses input[type="radio"]{
    display: none;
}

/* Affichage par défaut du bouton radio personnalisé */
/*#reponses input[type="radio"] + label:before {
    background: rgba(255,255,255,0.4);
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: 15px;
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 30px;
    height: 30px;
}*/
/* Affichage du bouton radio personnalisé quand il est sélectionné */
/*#reponses input[type="radio"]:checked + label:before {
    background: #fb8819;
    border-color: #fb8819;
    box-shadow: inset 0px 0px 0px 2px #fff;
}*/

/*label{
    cursor:pointer;
}
*/
#reponses .custom-control-input[disabled="disabled"] + label{
	color:rgba(255,255,255,0.6) !important;

}


#reponses .custom-control-input[disabled="disabled"][checked="checked"] + label{
	color:white !important;
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before{
	background-color:#dbda0d;
	opacity:1;
}




.custom-control-label::before{
	top: .2rem;
    	left: -2.5rem;
    	width: 2rem;
    	height: 2rem;
    	background-color: #dee2e6;
    	opacity:0.5;
}


.custom-control-label::after {
    position: absolute;
    top: .24rem;
    left: -2.5rem;
    display: block;
    width: 2rem;
    height: 2rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}