/*Polices*/

@font-face {
    font-family: 'Aaargh';
	src: url('../Polices/Aaargh/aaargh.eot');
    src: url('../Polices/Aaargh/aaargh.eot?#iefix') format('embedded-opentype'),
         url('../Polices/Aaargh/aaargh.woff') format('woff'),
         url('../Polices/Aaargh/aaargh.ttf') format('truetype'),
         url('../Polices/Aaargh/aaargh.svg#Aaargh') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CaviarDreams';
	src: url('../Polices/CaviarDreams/caviardreams_italic.eot');
    src: url('../Polices/CaviarDreams/caviardreams_italic.eot?#iefix') format('embedded-opentype'),
         url('../Polices/CaviarDreams/caviardreams_italic.woff') format('woff'),
         url('../Polices/CaviarDreams/caviardreams_italic.ttf') format('truetype'),
         url('../Polices/CaviarDreams/caviardreams_italic.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Allura';
	src: url('../Polices/CaviarDreams/allura-regular.otf');
    src: url('../Polices/CaviarDreams/allura-regular.woff') format('woff'),
         url('../Polices/CaviarDreams/allura-regular.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}



body, button, input, a {cursor: url(../Images/Gant_blanc.png),pointer;}


/*Cadre du site*/
html {
	top: 0px;
	font-size: 100%;
    line-height: 100%;
    margin: 0px;
	padding: 0px;
	/*background-color: var(--FondColor);*/
	border-bottom: 8px dotted #FFFFFF;
	
	/*jeu de couleur*/
	--refColor: #7d403f;
	--refPastel: #fcfc02;
	--FondColor: var(--refPastel);
	
	
}

body {
	display: block;
	position: relative;
	top: 0px;
	width: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0 auto 0 auto;
	
	font-family: georgia, sans-serif;
	font-size: 1em;
	overflow: y-scroll;
}

.bckPage{
	background: url(../../Custom/FondPage/Fond_courant.png) repeat-y center top;
	background-size: 100%;
    opacity: 1;
    content: "";
    z-index: -1;
}


/*Communication JS*/
#incjs {display: block; position: absolute; min-width: 100%; height: 100%; top:0;  padding: 0; z-index: 25; /*background-color: #FFFFFF; border: 1px solid #000000;*/}
#incjs.blackBackground {background-color: #000000; }
#closeincjs {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	width: 3em;
	
	font-weight: bold; 
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	color: #FFFFFF;
	
	background-color: var(--refColor);
	border: 5px solid #FFFFFF;
	border-radius: 1.5em;
	/*cursor: pointer;*/
	/*z-index: 7;*/
	z-index: auto;
}
#closeincjs:hover {
	color: #000000;	
	background-color: #FF0000;
}
#ResultMessArea {}
article.popup{display: block; position: relative; width: 55%; margin: 1em auto 0 auto; border: 5px solid #FFFFFF; background-color: #FFFFFF; box-shadow: 0.25em 0.25em 0.5em #000000;}
article.popuplarge{display: block; position: relative; width: 80%; margin: auto; border: 5px solid #FFFFFF; background-color: #FFFFFF; box-shadow: 0.25em 0.25em 0.5em #000000;}
article.popup p.resmes { padding: 0.25em 3.5% 0.25em 3.5%; font-size: 1.4em;}
article.popup img, article.popup video, article.popup iframe {display: block; position: relative; width: 100%; margin: 0; border: none; /*z-index: 6;*/ z-index: auto;}
article.popup h2 {display:block; font-family: CaviarDreams; text-align: center; line-height: 100%; margin: 0; padding: 0.45em; background-color: var(--refPastel);}
article.popup p {margin: 1em 0 1em 0; padding: 0 3% 0 3%;}
article.popup select, article.popup input {margin: 0.5em 2% 0.5em 2%; border-radius: 0.5em; padding: 0.25em;}
article.popup button {margin-bottom: 1.5em;}
article.popuplarge{display: block; position: relative; width: 85%; margin: 1em auto 0 auto; border: 5px solid #FFFFFF; background-color: #FFFFFF; box-shadow: 0.25em 0.25em 0.5em #000000;}
article.popuplarge img, article.popuplarge video, article.popuplarge iframe {display: block; position: relative; width: 100%; margin: 0; border: none; /*z-index: 6;*/ z-index: auto;}

/************ Tailles globales***************/

/* ---- Texte ---- */
p, a, li, tr, section, article, div, form, input, select, button, table { color: #000000; font-size: 1em; font-family: bellefairregular,sans-serif; }
p, li, tr { font-size: 1.3em; line-height: 1.35em; padding: 0; margin: 0 0 0.8em 0; }
p {text-align: justify;}
em {font-style: normal; font-weight: bold;}
strong {color: #800000; font-weight: normal;}

button {border:0; margin:0; padding: 0; background-color: transparent; /*cursor: pointer;*/}

/*Cadres de mise en page*/

/*==== CADRE DE TITRE ====*/
div.fondPage {position: absolute; display: block; width: 100%;}
div.fondPage img {position: relative; display: block; width: 100%; max-height: 100%; opacity: 0.5;}
header {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	/*background-color: #354ac0;*/
	z-index:5;
}

div.cadreTitre {
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0 0 2em 0;
	padding: 0;
	box-shadow: 0.5em 0.5em 0.5em #000000;
	background-color: var(--refColor);
}

div.cadreChampReponse {
	display: block;
	position: relative;
	width: 80%;
	margin: auto;
	text-align: center;
}


h1.titre_gen {
	display: block; 
	position: relative; 
	width: 80%;
	margin: 0 0 0 10%;	
	padding: 0.3em 0 0.3em 0; 
	text-align: center; 
	font-style: italic; 
	font-family: CaviarDreams; 
	font-size: 3.5em;
	line-height: 100%;
	color: #fcfc02; 
	text-shadow: 2px 2px 0 #000000;
	overflow-wrap: normal;
}

h1.titre_gen span.lowH1 {font-size: 0.5em;}

button.imgEntete {display: block; position: absolute; height: 100%; max-width: 20%; top: 0; left: 0; border-radius: 40/50%; z-index:2; }
button.imgEntete img {display: block; position: relative; height: 95%; margin: 3px 0 0 3px; }
button.btParam {display: block; position: absolute; top: 1.5em; right: 1.5em; background-color: #FFFFFF; border: 1px solid #000000; border-radius: 1em; opacity: 0.15;}
button.btParam:hover {opacity: 1;}
/*==== Conteneurs ====*/

section.main_content {
	position: relative;
	width: 96%;
	padding: 0 2% 0 2%;
	margin: 0;
	min-height: 1000px;
}
section.flex, div.flex, article.flex{
	position: relative;
	display: flex;
    display: -webkit-flex; /* Safari */
	justify-content: center;
    -webkit-justify-content: center;
	align-items: flex-start;
    -webkit-align-items: flex-start; /* Safari 7.0+ */
	flex-wrap: wrap;
}
/*affichage contenus*/
div#dynaPictures {position: relative; width: 100%; display: block;}
div#dynaPictures.secondaire{margin-top: 4em}
div.flex100 {position: relative; width: 100%;
	display: flex;
    display: -webkit-flex; /* Safari */
	justify-content: space-between;
    -webkit-justify-content: space-between;
	align-items: flex-start;
    -webkit-align-items: flex-start; /* Safari 7.0+ */
	flex-wrap: wrap;}

input#chReponse {
	display: inline-block;
	position: relative;
	width: 40%;
	font-size: 1.5em;
	padding: 0.5em;
	margin: auto;
	border: 2px solid #000000;
	border-radius: 2em 0 0 2em;
	
}

button#btCheckReponse {
	background-color: #000000;
	border: 2px solid #000000;
	border-radius: 0 2em 2em 0;
	color: #FFFFFF;
	font-size: 1.5em;
	padding: 0.5em;
}




div#grilleEnigme {
	position: relative;
	width: 80%;
	/*background-color: #000000;*/
}



button.btEnigme {
	position: relative;
	display: block;
	width: 20%;
	margin: 2%;
	padding: 1em 2% 1em 2%;
	font-size: 2.3em;
	text-align: center;
	border: 5px solid var(--refColor);
	background-color: #FFFFFF;
	border-radius: 2em;
	overflow: hidden;
}

button.btEnigme img {display: block; position: relative; width: 50%; margin: auto;}

button.questionGrisee {
	opacity: 0.5;
}

button.question {
	
	border: 5px solid var(--refColor);
	

}
button.reponse {

	border: 5px solid var(--refColor);
	background-color: var(--refPastel);
	border-radius: 2em;
}

button div.CadreBtReponse {margin-top: 0.7em;}
button div.CadreBtReponse p {font-size: 0.65em; }
button div.CadreBtReponse p span {font-size: 1.15em; color: #f404fc; font-style: italic; font-weight: bold; }
button div.CadreBtReponse p.consigne {font-size: 0.6em; color: #000000; font-style: normal; font-weight: normal; text-align: left; }


button#btDisplayIndice{
	display: none;
}

div#zoneIndices{
	display: block;
	position: relative;
	width: 20%;

	border-top: 4px solid #fcfc02;
	z-index: 6;
}

div#zoneIndices p{
	text-align: center;
	background-color: #FFFFFF;
	border-radius: 2em;
	padding: 0.5em 0 0.5em 0;
	border: 2px solid #000000;
	
}

button.btamie {display: block; position: relative; background: none; margin: -4em auto 1em auto; text-align: center; z-index: 7;}

#zoneIndices img.amie {
	display: block;
	position: relative;
	width: 35%;
	margin: auto;
	border: 4px solid #fcfc02;
	border-radius: 50%;
	box-shadow: 0.5em 0.5em 0.5em #000000;
}

#zoneIndices img.IndiceImg {
	display: block;
	position: relative;
	width: 75%;
	margin: auto;
}

article#artIndice div {
	display: block;
	position: relative;
	min-height: 12em;
	padding-left: 25%;
	padding-bottom: 4em;
}

article#artIndice div.textPopIndice {background: url(../../Custom/Images/AmieIndice.png) no-repeat left top; background-size: 20%;}
article#artIndice div.textPopIndiceFin {background: url(../../Custom/Images/AmieIndice.png) no-repeat left top; background-size: 20%;}
article#artIndice div.textPopReponseOK {background: url(../../Custom/Images/MascotteJoie.png) no-repeat left top; background-size: 20%;}
article#artIndice div.textPopReponseFaux {background: url(../../Custom/Images/MascotteTriste.png) no-repeat left top; background-size: 20%;}

article#artIndice div p.formatIndicePopup {
	font-size: 2.5em;
	font-weight: bold;
	font-style: italic;
	color: #f404fc;
}

article#artSupport div {
	display: block;
	position: relative;
	padding: 0;
}

article#artSupport img.support_enigme {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
}


article.level4 {padding-top: 2.5em; background: url(../Images/icons8-clip-à-papier-50.png) no-repeat center -25px, #fcf172;}
article.level4-1 { transform: rotate(5deg);}
article.level4-2 { transform: rotate(-5deg);}
article.level4-3 { transform: rotate(10deg);}
article.level4-4 { transform: rotate(-10deg);}
article.level4-5 { transform: rotate(15deg);}
article.level4-6 { transform: rotate(-15deg);}





div.menuBottomBox {position: relative; display: flex; justify-content: space-between;}
div.menuBottomBox button {display: block; position: relative; width: 20%; opacity: 0.25;}
div.menuBottomBox button:hover {opacity: 1;}
div.menuBottomBox img {display: block; position: relative; width: 100%;}

footer {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 7% 0 3em 0;
	background-color: var(--refColor);
	border-top: 5px solid #FFFFFF;
}

footer img {
	display: block;
	position: absolute;
	top: -5em;
	left: 45%;
	width: 10%;
	margin: auto;
	padding: 0;
	border-radius: 50%;
	border: 5px solid #FFFFFF;
	z-index:2;
}

footer p {
	display: block;
	position: relative;
	width: 50%;
	margin: 1em auto 1em auto;
	text-align: center;
	background-color: #FFFFFF;
	border-radius: 2em;
	padding: 0.5em 0 0.5em 0;
	border: 2px solid #000000;
}

footer p.pClef {
	width: 30%;
	padding: 0.8em 0 0.8em 0;
	background-color: #AEF2B9;
}




/*============ INTERFACE RESPONSIVE ============*/
@media screen and (max-width: 80rem) {
	
	html {

	font-size: 150%;
	}
	
	#incjs {background-color: var(--refColor); }
	
	div.cadreTitre {
		display: flex;
		position: relative;
		
		flex-wrap: wrap;
		
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;
		box-shadow: none;
		background-color: var(--refColor);
	}
	
	h1.titre_gen { display: block; position: relative; /*font-size: 4em;*/ text-align: center; width: 70%; margin: 0; line-height: 1.2em;}
	
	button.imgEntete {display: block; position: relative; width: 20%; top: 0; left: 0; }
	
	img#imgTitle {display: block; position: relative; width: 100%;}
	
	div#cadrePerso {display: block; position: relative; width: 100%; text-align: center; font-weight: bold; font-size: 3.5em; margin: 0; padding: 0; background: #FFFFFF; line-height: 100%;}
	
	div.cadreChampReponse {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		margin: 2em auto 4em auto;
	}
	
	div#ValideBarFrame {
		display: block;
		position: relative;
		width: 75%;
		text-align: left;
	}
	
	input#chReponse {
		width: 75%;
		/*font-size: 2.5em;*/
		padding: 0.35em;
		border-radius: 1.5em 0 0 1.5em;		
	}

	button#btCheckReponse {
		border-radius: 0 1.5em 1.5em 0;
		/*font-size: 2.5em;*/
		padding: 0.35em;
	}
	
	div#grilleEnigme {

		width: 70%;
		/*background-color: #000000;*/
	}

	button.btEnigme {
		width: 86%;
		margin: 5%;
		padding: 1em 2% 1em 2%;
		/*font-size: 3em;*/
		text-align: center;
		border: 5px solid var(--refColor);
		background-color: #FFFFFF;
		border-radius: 2em;
		overflow: hidden;
	}
	
	article#artIndice div p.formatIndicePopup {
		/*font-size: 1.5em;*/
		font-weight: bold;
		font-style: italic;
		color: #f404fc;
	}
	
	button#btDisplayIndice{
		display: block;
		position: relative;
		width: 15%;
		color: #FFFFFF;
		/*font-size: 3em;*/
		border-radius: 1em;
		overflow: hidden;
		
	}
	
	button#btDisplayIndice img {
		display: block;
		position: relative;
		width: 100%;
	}
	
	div#zoneIndices {
		display: none;
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		background-color: var(--refColor);
	}
	
	div#zoneIndices p{

		border-radius: 0.5em;
		padding: 0.5em 0 0.5em 0;
		border: 2px solid #000000;
		
	}
	
	div#zoneIndices.indiceOn { display: block;}
	div#zoneIndices.indiceOff { display: none;}
	
	article.popup{display: block; position: relative; width: 90%; margin: 3em auto 0 auto; border: 5px solid #FFFFFF; background-color: #FFFFFF; box-shadow: 0.25em 0.25em 0.5em #000000;}

	
	#closeincjs {
		top: -0.4em;
		right:-0.45em;
		
		width: 2.2em;
		
		font-weight: bold; 
		/*font-size: 1.5em;	*/	
	}
	
	footer {
		padding-top: 1em;
	}
	
	footer img#imgFooter {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		width: 30%;
		margin: auto;
		padding: 0;
		border-radius: 50%;
		border: 5px solid #FFFFFF;
		z-index:2;
	}
	
	footer p {
		width: 90%;
	}

	footer p.pClef {
		width: 50%;
		
	}
	
}