/* Webfont: DINCondensed-Bold */
@font-face {
    font-family: "DIN Bold";
    src: url("../img/fonts/DINCondensed-Bold.eot"); /* IE9 Compat Modes */
    src: url("../img/fonts/DINCondensed-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("../img/fonts/DINCondensed-Bold.woff") format("woff"), /* Modern Browsers */
         url("../img/fonts/DINCondensed-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
         url("../img/fonts/DINCondensed-Bold.svg#DINCondensed-Bold") format("svg"); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: DIN-RegularAlternate */
@font-face {
    font-family: "DIN Regular";
    src: url("../img/fonts/DIN-RegularAlternate.eot"); /* IE9 Compat Modes */
    src: url("../img/fonts/DIN-RegularAlternate.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("../img/fonts/DIN-RegularAlternate.woff") format("woff"), /* Modern Browsers */
         url("../img/fonts/DIN-RegularAlternate.ttf") format("truetype"), /* Safari, Android, iOS */
         url("../img/fonts/DIN-RegularAlternate.svg#DIN-RegularAlternate") format("svg"); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


@font-face {
    font-family: "OldPress";
    src: url("../img/fonts/OldPress.eot"); /* IE9 Compat Modes */
    src: url("../img/fonts/OldPress.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("../img/fonts/OldPress.woff") format("woff"), /* Modern Browsers */
         url("../img/fonts/OldPress.ttf") format("truetype"), /* Safari, Android, iOS */
         url("../img/fonts/OldPress.svg#OldPress") format("svg"); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'EthernalBold';
    src: url('../img/fonts/EthernalBold.eot'); /* IE9 Compat Modes */
    src: url('../img/fonts/EthernalBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../img/fonts/EthernalBold.woff') format('woff'), /* Modern Browsers */
         url('../img/fonts/EthernalBold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../img/fonts/EthernalBold.svg#EthernalBold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

*{
	-khtml-user-select : none !important;
	-webkit-user-select : none !important;
	-moz-user-select : -moz-none !important;
	-ms-user-select : none !important;
	user-select : none !important;
}

body{
	font-family: "DIN Regular" !important;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center bottom;
}

/* JEU 01 */
.jeu-01, #jeu-01{
	background-color:#92bf1f;
	font-family: "DIN Regular" !important;
}
#jeu-01 .pastille{
	fill: #00829a;
}
#jeu-01 .btn{
	background-color:#efad25;
	color:white;
}
#jeu-01 #infos h2{
	background-color:#00829a;
}


/* JEU 02 */
.jeu-02, #jeu-02{
	background-color:#be1a1a;
}
#jeu-02 .pastille{
	fill: #e95a0c;
}
#jeu-02 .btn{
	background-color:#dbda0d;
	color:white;
}
#jeu-02 #infos h2{
	background-color:#e95a0c;
}
/* JEU 03 */
.jeu-03, #jeu-03{
	background-color:#d4796b;
}
#jeu-03 .pastille{
	fill: #be1a1a;
}
#jeu-03 .btn{
	background-color:#aab100;
	color:white;
}
#jeu-03 #infos h2{
	background-color:#be1a1a;
}
/* JEU 04 */
.jeu-04, #jeu-04{
	background-color:#dfad38;
}
#jeu-04 .pastille{
	fill: #83b782;
}
#jeu-04 .btn{
	background-color:#d98932;
	color:white;
}
#jeu-04 #infos h2{
	background-color:#83b782;
}
/* JEU 05 */
.jeu-05, #jeu-05{
	background-color:#00839b;
}
#jeu-05 .pastille{
	fill: #ee7a6b !important;
}
#jeu-05 .btn{
	background-color:#aab100;
	color:white;
}
#jeu-05 #infos h2{
	background-color:#ee7a6b;
}
/* JEU 06 */
.jeu-06, #jeu-06{
	background-color:#cc5a1c;
}
#jeu-06 .pastille{
	fill: #dfad38;
}
#jeu-06 .btn{
	background-color:#aab100;
	color:white;
}
#jeu-06 #infos h2{
	background-color:#cc5a1c;
}
/* JEU 07 */
.jeu-07, #jeu-07{
	background-color:#83b782;
}
#jeu-07 .pastille{
	fill: #81b619;
}
#jeu-07 .btn{
	background-color:#81b619;
	color:white;
	
}
#jeu-07 #infos h2{
	background-color:#78cdf4;
}
 

/**************
AIDE 
**************/

h1{
	font-family: "OldPress";
	font-size:4rem;
	text-transform:uppercase;
}
#aide{
	 background-color: #82a926;
	 padding:100px;
	 color:white;
	 width:100vw;
	 height:100vh;
	 position:fixed;
	 z-index:1000000000;
	 top:-100vh;
	 transition: top 0.3s;
	 overflow:auto;
	 justify-content: center;
	 text-align: center;
}
#aide.lirelaide{
	top:0px;
	transition: top 0.5s;
}
#aide h4{
	margin-bottom:45px;
	font-size:65px;
	font-family: "EthernalBold";
}
#aide h6{
	margin-bottom:16px;
	font-size:25px;
	font-weight: bold
}
#aide{
	font-size:20px;
	line-height: 1.5em;
	margin-bottom:23px;
}
#aide a{
	color:white;
	text-decoration: underline;
}
#aide #quitter{
	background-color:#e95a0c !important;
}
.page-jeu #aide{
	text-align:center;
}


/****************
LIENS
*****************/

.home-jeu #liens, .page-jeu #liens{
	position:absolute;
	top:0;
	right:0;
	
}
#liens{
	padding:30px 50px 0px 50px;
	z-index:1000010000;
}

#liens .aide{
	padding-right:0;
}

/**************
ENTETE 
**************/

.quitter {
  
}
.nav-link{
	color:#94d4f5;
}
.nav-link:hover{
	color:#0074bc;
}

#jeu-01 .nav-link{
	color:#0074bc;
}
#jeu-01 .nav-link:hover{
	color: #02509D !important
}


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

.home-jeu #presentation{
	color:white;
	font-family: "DIN Regular" !important;
	height:100VH;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.home-jeu .titre_jeu{
	width:100%;
	align-self:flex-end;
	position:relative;
	margin-bottom:100px;
}
.home-jeu .titre_jeu .pastille{
	position:absolute;
	top:-80px;
	left:-80px;
	z-index:-20;
}
.home-jeu .titre_jeu h1{
	font-size:70px;
	margin-left:50px;
	
	position: relative;
	top:-10px;
	line-height:0.9em;
}
.home-jeu .titre_jeu .lead{
	font-size:52px;
	font-family:EthernalBold;
	margin-bottom:0px;

}
.home-jeu .visuel_et_textes{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	align-self:flex-start;
}
.home-jeu #visuel{
	text-align:right;
	max-height:100%;
}
.home-jeu #textes{
	padding: 20px;
	width:480px;
}
#textes h3{
	font-family: "EthernalBold";
	font-size: 38px;
}

.chiffre_police{
	font-family: "OldPress" !important;
	font-size:1em;

}
#textes .chiffre_police{
	font-family: "OldPress" !important;
	font-size:50px;

}
.titre_jeu .chiffre_police{
	font-family: "OldPress" !important;
	font-size:70px;

}

#textes p{
	
	font-size: 25px;
}
.dropdown-item:active{
	background-color:#ccc !important;
	color:#212529;
}
.btn{
	font-family: "EthernalBold";
	font-size: 36px;
	border-radius:20px;
	border: none;
	padding-left : 60px;
	padding-right: 60px;
}



/****************
INFOS DU JEU
*****************/

.page-jeu #main{
	text-align:center;
	font-family: "DIN Regular" !important;
	height:100VH;
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	justify-content: center;
}
.page-jeu #infos{
	color:white;
	position:absolute;
	bottom:0px;
	padding:0px 30px 30px 50px;
	width:auto;
}

#infos h2{
	border-radius: 35px;
    	padding: 5px 20px;
}
#infos h2 > span:not(:last-child):after{
	display:inline;
	content:" • ";
	opacity:0.3;
	font-weight:100;
	font-family: Verdana;
}

#liens{
	width:auto;
	margin-right: 0px;
}
#liens .nav{
	border-radius:25px;
	padding:3px 0px 0px 0px;
	background-color:white;
}


/* ICONES */
a.fermer, .fermer a, .btn_fiche:hover{
	text-decoration: none;
}

/*******************
Scroll bar
*********************/
.custom-scrollbar {
 
  overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color:rgba(217,221,224,0.5);
  /*border-radius: 10px;*/
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color:#b1b031;

}





/****************
RESPONSIVE
*****************/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

	.multicolonnes{
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
	    	-moz-column-count: 2;
		column-count: 2;
	}

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px)  and (max-width: 1400px){ 


	.multicolonnes{
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
	    	-moz-column-count: 3;
		column-count: 3;
	}

	#jeu-01 .visuel_et_textes, #jeu-02 .visuel_et_textes{
		flex-wrap: wrap;
	}



/* Page d'accueil */

	#home #aide, .home-jeu #aide{
		padding:50px;
	}
	#home #aide p, #aide li{
		font-size:18px;
		line-height:1.2em;
		text-align:left;
	}
	#home #aide h4, .home-jeu #aide h4{
		font-size: 44px;
		margin-bottom: 20px;

	}
	#home #aide h6, .home-jeu #aide h6{
		font-size: 20px;
		margin-bottom:5px;
		text-align:left;
	}
	.home-jeu #aide p{
		font-size:20px;
		line-height:1.2em;
		text-align:left;
	}

	.home-jeu .lead{
		line-height: 1em !important;
	}
	.home-jeu .titre_jeu h1{
		margin-top: 0.3em;
	}

	.home-jeu #textes{
		padding: 0px 0px 0px 20px;
    		width: 65% !important;
	}
	.home-jeu #textes p{
		font-size:20px;
		line-height:1.2em;
	}
	.home-jeu .titre_jeu{
		margin-bottom:0px !important;
	}

	.home-jeu .dropdown-menu{
		min-width: 16rem;
		font-size: 1.4rem;

	}
	.home-jeu .dropdown-item:not(:last-child){
		border-bottom: 1px solid #ccc;
	}

/* Pages d'accueil des jeux */

	#jeu-03.home-jeu #visuel, #jeu-04.home-jeu #visuel, #jeu-05.home-jeu #visuel, #jeu-07.home-jeu #visuel{
		width:40%;
	}
	#jeu-03.home-jeu #textes, #jeu-04.home-jeu #textes, #jeu-05.home-jeu #textes, #jeu-07.home-jeu #textes{
		width:60% !important;
	}
	
	#jeu-06.home-jeu #textes{
		width:40% !important;
		padding-right:20px;
		padding-left:0px;
	}
	#jeu-06.home-jeu #textes p{
		
		margin-bottom:0px;
	}
	#jeu-06.home-jeu #visuel a:not(.challenge){
		margin-bottom:0px !important;
		font-size:22px !important;
	}
	#jeu-06.home-jeu #visuel a:nth-child(even){
		margin-right: 0px;
	}
	#jeu-06.home-jeu .titrelong{
		margin-top: 22px;
	}
	#jeu-06.home-jeu .pbouton{
		margin-top: 20px;
	}
	
	#jeu-07.home-jeu .help h3{
		padding:20px 0px;
	}


/* Jeu 1 */
	#jeu-01.page-jeu .planche .carte[data-type="texte"] h5{
		font-weight: bold;
		padding-bottom: 0px;
	}
	#jeu-01.page-jeu .planche .carte[data-type="texte"] p{
		margin-bottom: 0px;
	}
	
	#jeu-01.page-jeu .planche .carte[data-type="texte"] .bas{
		padding-top: 4px !important;
		
	}
	#jeu-01.page-jeu .planche .carte[data-type="texte"] .bas p{
		line-height:1.4em;
		
	}


/* Jeu 2 */
	#jeu-02.page-jeu #question{
		width: 95%;
	}
	#jeu-02.page-jeu #question h1.question{
		font-size:3.6rem;
		line-height: 1em;
	}
	#jeu-02.page-jeu #reponses label{
		font-size:30px !important;
		margin-bottom: 10px;
	}

	#jeu-02.page-jeu #animaux .animal h5{
		font-size: 0.85em;
	}

	#jeu-02.page-jeu #fenetre_message .contenu{
		width:100%;
	}

/* Jeu 3 et 4 */
	#jeu-03.page-jeu #types, #jeu-04.page-jeu #types{
		width:240px;
	}
	#jeu-03.page-jeu #types h2, #jeu-04.page-jeu #types h2{
		font-size: 30px;
	}

	#jeu-03.page-jeu #types .sstype li, #jeu-04.page-jeu #types .sstype li{
		    padding: 10px 0px 10px 0px;
		    font-size: 17px;
	}

	#jeu-03.page-jeu #liste, #jeu-04.page-jeu #liste{
		padding: 10px 5px 10px 0px;
	}
	#jeu-03.page-jeu #liste .media img, #jeu-04.page-jeu #liste .media img{
		margin-right: 5px!important;

	}
	#jeu-03.page-jeu #liste .media .media-body, #jeu-04.page-jeu #liste .media .media-body{
		font-size: 14px;
	}
	#jeu-03.page-jeu #liste .media h5, #jeu-04.page-jeu #liste .media h5{
		font-size: 16px;
	}
	#jeu-03.page-jeu #liste .media-bod, #jeu-04.page-jeu #liste .media-body{
		line-height:1em;
	}

	#jeu-03.page-jeu #espece, #jeu-04.page-jeu #espece{
		padding:0px;
	}

	#jeu-03.page-jeu #espece .titre_espece, #jeu-04.page-jeu #espece .titre_espece{
		flex-direction: column;
		padding-top:20px;
		padding-bottom:0px;
	}
	#jeu-03.page-jeu #espece .titre_espece .nom, #jeu-04.page-jeu #espece .titre_espece .nom{
		font-size:3.8em;
	}
	#jeu-03.page-jeu #espece .titre_espece .fermer, #jeu-04.page-jeu #espece .titre_espece .fermer{
		display:block;
		position:absolute;
		top:20px;
		right:20px;
		z-index:1000;
	}
	#jeu-03.page-jeu #espece #photos_especes, #jeu-04.page-jeu #espece #photos_especes{
		width:100%;
	}
/* JEU 05 */

	#jeu-05.page-jeu .ile h6, #jeu-05.page-jeu .espece h6{
		font-size: 0.8em;
	}
	#jeu-05.page-jeu .ile, #jeu-05.page-jeu .espece{
		
		width:11.6%;
		height:auto;
		padding:0;
		overflow: hidden;
		margin:4px;


	}
	#jeu-05.page-jeu .ile img, #jeu-05.page-jeu .espece img{
		border:none;
		
	}
	#jeu-05.page-jeu .ile h6{
		margin-bottom:0px;
		margin-top: 8px;
	}
	#jeu-05.page-jeu #iles{
		margin-bottom:0px;
	}

/* JEU 06 */
	#jeu-06.page-jeu #fenetre_message {
		padding:50px;
	}
	#jeu-06.page-jeu #fenetre_message .contenu{
		width:100%;
		padding:20px;
	}





}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 1024px) and (max-width: 1199px){
	
	.multicolonnes{
		-webkit-column-count: 4; /* Chrome, Safari, Opera */
	    	-moz-column-count: 4;
		column-count: 4;
	}
	#jeu-01 .visuel_et_textes, #jeu-02 .visuel_et_textes{
		flex-wrap: nowrap;
	}


}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.multicolonnes{
		-webkit-column-count: 5; /* Chrome, Safari, Opera */
	    	-moz-column-count: 5;
		column-count: 5;
	}
	#jeu-01 .visuel_et_textes, #jeu-02 .visuel_et_textes{
		flex-wrap: nowrap;
	}

}