/*===== Polices de caractères =====*/

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

/*H2 cadre titre header*/
@font-face {
    font-family: 'Palitoon';
	src: url('../02_Polices/Palitoon/palitoon.eot');
    src: url('../02_Polices/Palitoon/palitoon.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Palitoon/palitoon.woff') format('woff'),
         url('../02_Polices/Palitoon/palitoon.ttf') format('truetype'),
         url('../02_Polices/Palitoon/palitoon.svg#Palitoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

/*H2 main section*/
@font-face {
    font-family: 'Cantarell';
	src: url('../02_Polices/Cantarell/cantarell-oblique.eot');
    src: url('../02_Polices/Cantarell/Cantarell-oblique.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Cantarell/Cantarell-oblique.woff') format('woff'),
         url('../02_Polices/Cantarell/Cantarell-oblique.ttf') format('truetype'),
         url('../02_Polices/Cantarell/Cantarell-oblique.svg#Cantarell') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*p main section*/
@font-face {
    font-family: 'Alegreya-Regular';
	src: url('../02_Polices/Alegreya/alegreya-regular-webfont.eot');
    src: url('../02_Polices/Alegreya/alegreya-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.woff') format('woff'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.ttf') format('truetype'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*===== Balises standards HTML =====*/
html {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
    line-height: 100%;
	color: #FFFFFF;
	background-color: #000000;
	background: url('../01_Fond/Elio_black.jpg') no-repeat left top, #000000;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
}

div#General_Page_content {
	margin: 0 5% 0 auto;
	padding: 0px;
	width: 70%;
	min-width: 800px;
	/*background: #FFFFFF;*/
}

/*===== Balises et classes générales =====*/

/*Tailles et polices*/
h1, hg {
	font-size: 2.5em;
	line-height: 1.3em;
	font-family: 'CaviarDreams',sans-serif;
}
h1.centre {text-align: center;}

h2, ha {
	font-size: 1.5em;
	line-height: 1.5em;
	font-family: 'Cantarell',sans-serif;
}

p, li, td, th, input, textarea, select, button {
	font-family: 'Alegreya-Regular',sans-serif;
	font-size: 1em;
	line-height: 1.5em;
}

/*Paragraphes*/
p {padding: 0 3% 0 3%; text-align: justify;}
em {font-style: italic; font-weight: normal;}
strong { font-weight: bold;}

/*Liens*/
a {color:#4363ff;}
a:link, a:visited {text-decoration: underline;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

/*Tableaux*/
table {
	position: relative;
	margin: 1em auto 1em auto;
	border-collapse: collapse;
	border: 1px solid #4363ff;	
}
table.tb95 { width: 95%;}
.tb10 {width: 10%;}
.tb15 {width: 15%;}
.tblFF {border: none;}

td,th {
	text-align: center;
	padding-top: 1%;
	padding-bottom: 1%;
	border: 1px solid #4363ff;	
}
/*Images*/
img.centre {margin-left: auto; margin-right: auto;}
img.img35 {display: block; width: 35%;}
img.img45 {display: block; width: 45%;}
img.img50 {display: block; width: 50%;}

/*videos*/
video {border: 1px solid #4363ff; width: 50%;}

/*Fromulaires*/
input.bouton { margin: 5px 0 0 5px;	background: none; border: 1px solid #000000; font-weight: normal; color: #000000; cursor: pointer;}

input.search_ind {width: 100%; padding: 5px;}

/*Communication JS*/
#incjs {display: block; position: absolute; min-width: 100%; top: 6em;  padding: 0; z-index: 5; /*background-color: #FFFFFF; border: 1px solid #000000;*/}
#closeincjs {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	width: 2em;
	
	font-weight: bold; 
	font-size: 1.2em;
	line-height: 1.2em;
	text-align: center;
	color: #FFFFFF;
	
	background-color: #D2B48C;
	border-radius: 1.5em;
	cursor: pointer;
}
#closeincjs:hover { color: #000000;	background-color: #FF0000;}
article.popup{display: block; position: relative; margin: 0 auto 0 auto; border: 5px solid #D2B48C; background-color: #FFFFFF; box-shadow: 0.25em 0.25em 0.5em #000000;}
article.popup { padding: 0.25em 3.5% 0.25em 3.5%; font-size: 1.1em;}

/*===== HEADER SPECIFIQUE =====*/

	/*Etiquettes menu*/
	#menuGen {display:block; position: relative; width: 100%; margin: 1em 0 0 0;}
	#menuGen a {display: inline-block; padding: 0.5em; margin: 0 0 0 2%; color: #FFFFFF; border: 1px solid #f6490f; text-decoration: none; }
	#menuGen a:hover {color: #f6490f; border: 1px solid #FFFFFF;}
	#menuGen a.actif {color: #f6490f; background: #E0E0DE; }

	/*Cadre titre*/
	header {position: relative; display: block; width: 100%; padding: 0; margin: 0; border-bottom: 2px solid #4363ff;}
	#cadre_titre {display: block; position: relative; width: 95%; padding-left: 5%; margin: 1.5em 0 0 0;}
	#cadre_titre a{text-decoration:none;}
	#cadre_titre h1 {font-size: 3.5em; color: #FFFFFF; font-family: 'Aaargh',"Comic Sans MS",cursive; text-shadow: 3px 3px 0 #4363ff; margin: 0; padding: 0;}
	#soustitre {margin: -1.5em 0 0 0; /*background-color: #E60977;*/}
	#soustitre h2, span {display: block; font-size: 3em; line-height: 1.5em; color: #FFFFFF; font-family: 'Palitoon',"Comic Sans MS",cursive; text-align: center; margin: 0;}

/*===== CORPS DE PAGE =====*/
	section.main_content { position: relative; display: block; width: 100%; min-height: 650px; margin: 0; padding: 0;}
	section.main_content_flex {	
		position: relative;
		display: -webkit-flex; /* Safari */
		-webkit-flex-direction: row; /* Safari 6.1+ */
		
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		
		top: 0px;
		width: 100%;
		min-height: 650px;
		margin: 0;
		padding: 0;	
	}
	section.flex, div.flex{
		position: relative;
		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+ */
	}
	div.flexReverse {flex-direction: row-reverse;}

/*===== ARTICLES CONTENUS =====*/
	div.artcolonne {
		width: 100%;
		margin: 1em 0 1em 0;
		padding: 0;
		justify-content: space-around;
		-webkit-justify-content: space-around;
		align-items: center;
		-webkit-align-items: center;
		/*background-color: #E427F5;*/
	}
	article.generic {
		position: relative;
		display: block;
		padding: 0.5em 2% 0.5em 2%;
		margin: 1em 0 1em 0;
		width: 45%;
		background-size: 27%;
		background-repeat: no-repeat;
		background-position: top left;
		background-color: rgba(184,179,156,0.25);
		border-radius: 2em 1em;
	}
	article.generic h2 {border-bottom: 2px solid #f6490f;}

/*===== IMAGES ACCUEIL =====*/
	.rotate15trigo {rotate : -15deg;}
	img.rond {border-radius: 50%;}

/*===== FOOTER =====*/
	footer { display: block; position: relative; width: 100%; margin: 2em 0 0 0; padding: 0 0 1em 0; border-top: 2px solid #f6490f; z-index: 3;}
	div.titrefooter {text-align: center;}
	footer a {padding: 0; margin: 0;}
	footer a:link, footer a:visited{ color: #FFFFFF; text-decoration: underline; }
	footer a:hover, footer a:active { color: #FFFFFF; text-decoration: none; }

/*===== OPTION : Entete reduite pour scroll =====*/
	header.fixe { position: fixed; top: 0; width: 70%; min-height: 40px; padding: 0 15% 0 15%; margin: 0; background-color: rgb(184,179,156); z-index: 10;}
	header.fixe #cadre_titre { 
		display: -webkit-flex; /* Safari */
		-webkit-flex-direction: row; /* Safari 6.1+ */
		display: flex;
		flex-direction: row;
		min-height: 0px;
		background: none;
	}
	header.fixe hg.titre_gen { font-size: 2.5em; margin: 0;}
	header.fixe hg.ss_titre_gen {font-size: 1.2em; color: #0000CD; margin: -15px 0 0 0px;}
	header.fixe #zone1_header {width: 30%; padding: 0; margin: 0;}
	header.fixe #zone2_header {width: 70%; padding: 0; margin: 0;}

/*===== MISE EN FORME MOBILE =====*/
	@media screen and (max-width: 992px)
	{
		/*Font*/
		html {width: 100%; height: 100%; background: none; background-color: #000000;}
		body {width: 100%; height: 100%; font-size: 1.10em;}
		
		/*Header*/
		header { display: block; position: relative; min-height: 6em; margin:0; padding: 0; background: url('../01_Fond/Hybrid_pt_H.jpg') no-repeat left -2em;  background-size: 250%; border-top: 1px solid #FFFFFF; }
		#cadre_titre {width: 97%; padding: 0 0 0 3%; margin: 2.5em 0 2.5em 0;}
		#cadre_titre h1{width: 100%; text-align: left; margin:0; padding: 0; line-height: 1em;}
		#soustitre {display: none; width: 100%; text-align: right; padding: 0;}
		#soustitre h2 {display: inline-block; text-align: right;line-height: 1.2em;  margin:0; padding: 0 2% 0 2%; background-color: rgb(21,21,21); border-radius: 50% 0 0 0;}
		
		/*Etiquettes Menu*/
		#menuGen {display:block; position: relative; width: 100%; margin: 1em 0 0 0;}
		#menuGen a {display: inline-block; padding: 0.5em; margin: 0 0 0 2%; color: #f6490f; border: 1px solid #f6490f; text-decoration: none; background-color: #E0E0DE; }
		#menuGen a:hover {color: #f6490f; border: 1px solid #FFFFFF;}
		#menuGen a.actif {color: #FFFFFF; background: #f6490f; }
		
		/*Content*/
		div#General_Page_content { margin: 0; padding: 0; width: 100%; min-width: 100%;}
		section.main_content_flex {	flex-direction: column;}
		article.generic {width: 90%; margin: 1em auto 1em auto;}
		div.artcolonne { flex-direction: column; margin : 0; }
		
		/*Images accueil*/
		img.img35 {display: block; width: 55%;}
		img.img45 {display: block; width: 65%;}
		.rotate15trigo {rotate : 0deg;}
		
		/*Communication JS (videos)*/
		article.popup {width: 90%;}
		#closeincjs {top: -0.5em; right: -0.5em;}
		video {display: block; position: relative; width: 100%;}
	}