/*--           --*/
/*-- FONT-FACE --*/
/*--           --*/


@font-face {
    font-family: 'FFDIN';
    src: url('polices/FFDIN.eot') format('eot'),
         url('polices/FFDIN.woff') format('woff'),
         url('polices/FFDIN.ttf') format('truetype'),
         url('polices/FFDIN.svg') format('svg'),
		 url('polices/FFDIN.otf') format('opentype');
}

@font-face {
    font-family: 'DINPro-CondBold';
    src: url('polices/DINPro-CondBold.eot') format('eot'),
         url('polices/DINPro-CondBold.woff') format('woff'),
         url('polices/DINPro-CondBold.ttf') format('truetype'),
         url('polices/DINPro-CondBold.svg') format('svg'),
		 url('polices/DINPro-CondBold.otf') format('opentype');
}

@font-face {
    font-family: 'DINPro-CondLight';
    src: url('polices/DINPro-CondLight.eot') format('eot'),
         url('polices/DINPro-CondLight.woff') format('woff'),
         url('polices/DINPro-CondLight.ttf') format('truetype'),
         url('polices/DINPro-CondLight.svg') format('svg'),
		 url('polices/DINPro-CondLight.otf') format('opentype');
}

@font-face {
    font-family: 'franklin_gothic_lt_extracond';
    src: url('polices/franklin_gothic_lt_extracond.eot') format('eot'),
         url('polices/franklin_gothic_lt_extracond.woff') format('woff'),
         url('polices/franklin_gothic_lt_extracond.ttf') format('truetype'),
         url('polices/franklin_gothic_lt_extracond.svg') format('svg'),
		 url('polices/franklin_gothic_lt_extracond.otf') format('opentype');
}

@font-face {
    font-family: 'DINPro-Regular';
    src: url('polices/DINPro-Regular.eot') format('eot'),
         url('polices/DINPro-Regular.woff') format('woff'),
         url('polices/DINPro-Regular.ttf') format('truetype'),
         url('polices/DINPro-Regular.svg') format('svg'),
		 url('polices/DINPro-Regular.otf') format('opentype');
}



/*--                     --*/
/*-- ELEMENTS PRINCIPAUX --*/
/*--                     --*/

body
{
	width: 100%;
	margin: 0;
	font-family: 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	background-color: #ffffff ;
	color: #000000;
	text-align: justify;
	font-size: 14px;
}

a
{
	text-decoration: none;
	color: #666666;
}

a:hover
{
	text-decoration: none;
	color: #999999;
}

h1
{
	font-family: 'franklin_gothic_lt_extracond', 'DInPro-CondBold', 'DINPro-Regular', 'Calibri', 'sans-serif';
	margin: 0;
	padding: 25px 0 15px 0;
	font-size: 26px;
	color: #999999;
	text-align: left;
	text-transform: uppercase;
	font-weight: normal;
}

h2
{
	font-family: 'franklin_gothic_lt_extracond', 'DInPro-CondBold', 'DINPro-Regular', 'Calibri', 'sans-serif';
	margin: 20px 0 2px 0;
	padding: 0;
	font-size: 23px;
	color: #000000;
	text-align: left;
	text-transform: uppercase;
	border-top: 20px solid black ;
	border-bottom: 3px solid black;
	border-left: 10px solid black;
	padding-left: 10px;
	font-weight: normal;
}


h3
{
	font-family: 'franklin_gothic_lt_extracond', 'DInPro-CondBold', 'DINPro-Regular', 'Calibri', 'sans-serif';
	margin: 0;
	padding: 0;
	font-size: 23px;
	color: #fffcf5;
	text-align: left;
	text-transform: uppercase;
	font-weight: normal;
}

h4
{
	font-family: 'franklin_gothic_lt_extracond', 'DInPro-CondBold', 'DINPro-Regular', 'Calibri', 'sans-serif';
	font-size: 18px;
	color: #000000;
	text-align: left;
	text-transform: uppercase;
	font-weight: normal;
	padding: 5px 5px 5px 0;
	margin :0;
}

h5
{
	font-family: 'franklin_gothic_lt_extracond', 'DInPro-CondBold', 'DINPro-Regular', 'Calibri', 'sans-serif';
	font-size: 18px;
	color: #000000;
	text-align: center;
	text-transform: uppercase;
	font-weight: normal;
	padding: 5px 5px 5px 0;
	margin :0;
}

h6
{
	font-family: 'franklin_gothic_lt_extracond', 'DInPro-CondBold', 'DINPro-Regular', 'Calibri', 'sans-serif';
	font-size: 18px;
	color: #999999;
	text-align: center;
	text-transform: uppercase;
	font-weight: normal;
	padding: 0;
	margin :0;
}

article, aside
{
	display: inline-block;
	vertical-align: top;
}

article
{
	width: 60%;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
}

aside
{
	width: 25%;
	margin: 2%;
}

aside div
{
	margin-bottom: 20px;
}

fieldset
{
	margin-bottom: 15px;
	padding: 0, 20px, 20px, 0;
}

li
{
	list-style-image: url('images/puce.png');
}

li #list-none
{
	list-style-type: none;
}

#align
{
	display:inline-block;
}

/*--        --*/
/*-- HEADER --*/
/*--        --*/

header
{
	position: fixed;
	z-index: 100;
	background-color: #0A0A0A;
	width: 100%;
	height: 90px;
	color: #fffcf5;
	margin: 0;
	padding: 10px;
	text-align: left;
}

#marge-header
{
	height: 110px;
}

#logo
{
	height: 88px;
	width: 88px;
	padding: 0 30px 0 20px;
}

#cadre-logo, header section, #social-links
{
	display: inline-block;
	vertical-align: middle;
}

header section h1, header section h3
{
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	font-size: 23px;
}

#social-links
{
	position: absolute;
	right: 40px;
	top: 40px;
}

.social
{
	height: 18px;
	width: 27px;
	padding: 0 0 0 10px;
}

/*-- Menu principal --*/

NAV
{
	display: none;
	text-transform: uppercase;
	margin: 0 20px 0 10px;
	font-family: 'DINPro-CondBold', 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	padding-top: 0;
	font-size: 11px;
	font-weight: normal;
	margin-top: 10px;
}

NAV a
{
	color: #fffcf5;
}

menu
{
	text-transform: uppercase;
	padding: 0;
	font-family: 'DINPro-CondBold', 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	padding-top: 0;
	font-size: 16px;
	font-weight: normal;
	margin-top: 10px;
}

menu a
{
	color: #fffcf5;
}

.separator
{
	color: #999999;
	padding: 0 10px 0 10px;
}

/*--                --*/
/*-- MENU DEROULANT --*/
/*--                --*/

#paraph
{
	width:100%;
	position: relative;
	z-index: 1;
}

#paraph h2
{
	cursor: pointer;
}

#paraph div
{
	display: none;
	margin: 10px 50px 50px 50px;
	border-left: solid 2px rgb(221,221,221);
	padding: 0 10px 0 10px;
}

#paraph div div
{
	display: inline-block;
	vertical-align: top;
	width: 23%;
	border-left: none;
	padding: 1px;
	margin: 0;
	position: relative;
	z-index: 1;
}

#paraph div div div
{
	width: 100%;
	position: relative;
	z-index: 2;
}

#paraph div div div div
{
    position: absolute;
    bottom: 20px;
    left: 1px;
	width: 70%;
	z-index: 3;
    height: auto;
    padding: 10px;
    background-color: rgb(0,0,0); /* Pour les anciens navigateurs */
    background-color: rgba(0,0,0,0.7);
    font-family: 'franklin_gothic_lt_extracond', 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	text-transform: uppercase;
	color: #fffcf5;
	font-weight: normal;
    font-size: 15px;
}

#paraph div div div div a
{
	color: #fffcf5;
	font-weight: normal;
}

#paraph div div div div a:hover
{
	color: #999999;
}

#paraph span
{
	position:absolute;
	right:15px;
	top: 22px;
	font-weight:normal;
	font-size: 18px;
	font-family: 'franklin_gothic_lt_extracond', 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	color:#999999;
}

/*--          --*/
/*-- HOMEPAGE --*/
/*--          --*/

#intro-formation
{
	margin: 10px 50px 0 50px;
	border-left: solid 2px rgb(221,221,221);
	padding: 0 10px 0 10px;
}

#concours-infos
{
	display: none;
}

#img-intro
{
	display: inline-block;
	vertical-align: top;
	width: 30%;
 	padding: 2%;
	position: relative;
	z-index: 1;
}

#text-intro
{
	display: inline-block;
	vertical-align: top;
	width: 60%;
 	padding: 2%;
	position: relative;
	z-index: 1;
}

#formation-art
{
	display: none;
}

/*--        --*/
/*-- IMAGES --*/
/*--        --*/

#img-article
{
	width: 16%;
	vertical-align: top;
 	padding: 0;
	margin: 0;
}

#formation
{
	display: inline-block;
	vertical-align: top;
	width: 45%;
 	padding: 2%;
	position: relative;
	z-index: 1;
}

#banniere_image
{
	width: 100%;
	position: relative;
	z-index: 1;
}

#img-index
{
	width: 100%;
}

#banniere_description
{
    position: absolute;
    bottom: 20px;
    width: 70%;
	z-index: 2;
    height: auto;
    padding:6px;
    background-color: rgb(0,0,0); /* Pour les anciens navigateurs */
    background-color: rgba(0,0,0,0.7);
    font-family: 'franklin_gothic_lt_extracond', 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	text-transform: uppercase;
	color: #fffcf5;
	font-weight: normal;
    font-size: 15px;
}

#banniere_description a
{
	color: #fffcf5;
	font-weight: normal;
}

#banniere_description a:hover
{
	color: #999999;
}

#affiches-index
{
	width: 22%;
	height: auto;
	margin: 15px 1% 30px 1%;
}

#img-bravo
{
	width: 100%;
	position: relative;
	z-index: 1;
}

#description-bravo
{
    position: absolute;
    bottom: 20px;
    width: 70%;
	z-index: 2;
    padding: 15px 10px 15px 10px;
    background-color: rgb(0,0,0); /* Pour les anciens navigateurs */
    background-color: rgba(0,0,0,0.7);
    font-family: 'franklin_gothic_lt_extracond', 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	text-transform: uppercase;
	color: #fffcf5;
	font-weight: normal;
    font-size: 18px;
}

#photos-eleves
{
	width: 90%;
	padding: 10px 10px 10px 0;
}
	
/*--       --*/
/*-- ECOLE --*/
/*--       --*/

#article-profs
{
	text-align: left;
}

#display
{
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	margin-right: 15px;
}

/*--                 --*/
/*-- INFOS PRATIQUES --*/
/*--                 --*/

.contact-lienssociaux
{
	width: 25px;
	height: 25px;
}

.contact-lienssociaux, .contact-link
{
	display: inline-block;
	vertical-align: middle;
	padding-right: 10px;
}

/*--             --*/
/*-- PARTENAIRES --*/
/*--             --*/

#partenaires
{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	width: 20%;
	height: auto;
	padding: 10px;
}

	
#formationdupresent
{
	display:block;
}

/*--            --*/
/*-- SPECTACLES --*/
/*--            --*/

#spectacle
{
	position: relative;
	display: inline-block;
	vertical-align: top;
	text-align: left;
}

#spectacle img
{
	text-align: left;
	cursor: pointer;
	float: left;
}

#spectacle div
{
	display: none;
	margin: 10px 50px 50px 220px;
	border-left: solid 2px rgb(221,221,221);
	padding: 0 10px 0 10px;
}

#img-paraph
{
	width: 100%;
}

#facebook-event
{
	width: 30px;
	height: 30px;
	text-align: center;
}

#credits
{
	display:inline-block;
	vertical-align:middle;
	margin-right:5%;
	width: 45%;
}

#affiche-fiche
{
	display:inline-block;
	vertical-align:top;
	width:40%;
	margin-left:5%;
	margin-top: 25px;
}

#fiche-affiche
{
	width:100%;
	margin:0;
}

/*--        --*/
/*-- FOOTER --*/
/*--        --*/

footer
{
	position: absolute;
	background-color: #000000;
	width: 100%;
	color: #fffcf5;
	margin: 20px 0 0 0;
	padding: 0;
	text-align: center;
	font-size: 11px;
}

footer a
{
	color: #fffcf5;
}

footer menu, footer div
{
	display: inline-block;
	vertical-align: middle;
	padding: 0;
}

footer menu
{
	width: 60%;
}

footer div
{
	text-align: left;
	text-transform: uppercase;
	font-family: 'DINPro-Regular', 'FFDIN', 'calibri', 'sans-serif';
	font-style: normal;
	width: 18%;
}

footer img
{
	width: 80px;
	height: 80px;
	margin: 0;
	padding: 0;
}

#geolocal, #adresse
{
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

#coordonnees p
{
	padding: 0 0 5px 0;
	margin: 0;
}


/*--               --*/
/*-- MEDIA QUERIES --*/
/*--               --*/


/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 1024px)
{
	.instagram, .google, .linkedin
	{
		display: none;
	}
	
	#social-links
	{
		position: absolute;
		right: 30px;
	}

	.social
	{
		height: 20px;
		width: 30px;
		padding: 0 0 0 8px;
	}
	
	menu
	{
		font-size: 14px;
	}
	
	aside h4
	{
		font-size: 13px;
	}
	
	#img-intro
	{
		display: none;
	}
	
	#text-intro
	{
		width: 97%;
	}
	
	footer img
	{
		width: 60px;
		height: 60px;
	}	
}

/* Nouvelles règles si la fenêtre fait au plus 800px de large */
@media screen and (max-width: 800px)
{
	#social-links
	{
		position: absolute;
		right: 25px;
		top: 25px;
	}

	.social
	{
		height: 18px;
		width: 27px;
		padding: 0 0 0 4px;
	}
	
	menu
	{
		font-size: 13px;
	}

	aside, article, #banniere_description
	{
		font-size: 11px;
	}
	
	h2
	{
		font-size: 18px;
		border-top: 12px solid black ;
		border-bottom: 2px solid black;
		border-left: 7px solid black;
	}
	
	h1
	{
		font-size: 20px;
	}

	aside img
	{
		width: 20px;
		height: auto;
	}
	
	#paraph span
	{
		right:3px;
		top: 13px;
	}
	
	#paraph div div
	{
		display: inline-block;
		width: 44%;
	}
		
	#accroche
	{
		display: none;
	}
	
	#paraph div, #intro-formation
	{
		margin: 15px;
	}
	
	/*-- HEADER --*/

	header
	{
		height: 70px;
	}

	#marge-header
	{
		height: 90px;
	}

	#logo
	{
		padding: 0 15px 0 10px;
		width: 60px;
		height: 60px;
	}
	
	header section
	{
		width: 70%;
	}

	header section h1, header section h3
	{
		font-size: 18px;
	}

	#fleche-titre
	{
		width: 2%;
	}
	
	
	/*-- FOOTER --*/	
	footer
	{
		font-size: 9px;
	}

	footer img
	{
		width: 50px;
		height: 50px;
	}	

}

/* Nouvelles règles si la fenêtre fait au plus 700px de large */
@media screen and (max-width: 700px)
{
	article
	{
		display: block;
		width: auto;
	}

	aside
	{
		display: none;
	}
	
	.social
	{
		display: block;
		margin: 0 10px 10px 0;
	}
	
	#concours-infos
	{
		display: block;
	}
	
	#accroche
	{
		display: block;
	}

	/*-- HEADER --*/

	header section h1, header section h3
	{
		font-size: 16px;
	}

}

/* Nouvelles règles si la fenêtre fait au plus 480px de large */
@media screen and (max-width: 480px)
{
	
	/*-- CORPS DE TEXTE --*/
	article, #formation, #affiches-index
	{
		display: block;
		font-size: 12px;
		width: auto;
		margin: 2%;
	}
	#banniere-index
	{
		display: none;
	}
		
	#formation-art
	{
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
		position: relative;
		z-index: 1;
	}
	
	#img-formation
	{
		width: 100%;
		margin: 0;
		padding: 0 0 10px 0;
	}
		
	h1
	{
		font-size: 22px;
	}
	
	#affiches-index
	{
		width: 44%;
		display: inline-block;
	}
	
	#banniere_description
	{
		font-size: 13px;
	}
	
	#paraph div, #intro-formation
	{
		margin: 10px;
	}
	
	#paraph div div
	{
		display: block;
		width: 100%;
	}
			
	#credits
	{
		display:block;
		margin:2%;
		width: 98%;
	}
	
	#affiche-fiche
	{
		display:block;
		width:98%;
		margin:2%;
	}
		
	#partenaires
	{
		display: inline-block;
		margin: 2%;
		width: 44%;
		height: auto;
		padding: 0;
	}
	
	/*-- HEADER --*/
	header
	{
		height: 100px;
	}

	#marge-header
	{
		height: 120px;
	}

	#logo
	{
		padding: 0 15px 0 10px;
		width: 60px;
		height: 60px;
	}
	
	header section
	{
		width: 45%;
	}
	
	.social
	{
		height: 14px;
		width: 20px;
		padding: 0;
	}

	header section h1, header section h3
	{
		font-size: 15px;
	}

	menu
	{
		display: none;
	}

	NAV
	{
		display: block;
	}

	.separator
	{
		padding: 0 5px 0 5px;
	}
	
	/*-- FOOTER --*/

	footer menu, footer div
	{
		display: block;
		width: auto;
		text-align: center;
	}

	footer img
	{
		width: 60px;
		height: 60px;
	}
}

/* Nouvelles règles pour les mobiles */
@media all and (max-device-width: 480px)
{
	
	/*-- CORPS DE TEXTE --*/
	#banniere-index
	{
		display: none;
	}
	
	#formation-art
	{
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
		position: relative;
		z-index: 1;
	}
	
	#img-formation
	{
		width: 100%;
		margin: 0;
		padding: 0 0 10px 0;
	}

	article, #formation, #affiches-index
	{
		display: block;
		font-size: 12px;
		width: auto;
		margin: 2%;
	}
	
	h1
	{
		font-size: 22px;
	}
	
	#affiches-index
	{
		width: 44%;
		display: inline-block;
	}
	
	#banniere_description
	{
		font-size: 13px;
		text-align: left;
	}
	
	#paraph div, #intro-formation
	{
		margin: 10px;
	}
	
	#paraph div div
	{
		display: block;
		width: 100%;
	}
			
	#credits
	{
		display:block;
		margin:2%;
		width: 98%;
	}
	
	#affiche-fiche
	{
		display:block;
		width:98%;
		margin:2%;
	}
		
	#partenaires
	{
		display: inline-block;
		margin: 2%;
		width: 44%;
		height: auto;
		padding: 0;
	}
	
	/*-- HEADER --*/
	header
	{
		height: 110px;
	}

	#marge-header
	{
		height: 130px;
	}

	#logo
	{
		padding: 0 15px 0 10px;
		width: 60px;
		height: 60px;
	}
	
	header section
	{
		width: 47%;
	}
	
	.social
	{
		height: 14px;
		width: 20px;
		padding-bottom: 5px;
	}

	header section h1, header section h3
	{
		font-size: 14px;
	}

	menu
	{
		display: none;
	}

	NAV
	{
		display: block;
	}

	.separator
	{
		padding: 0 5px 0 5px;
	}
	
	/*-- FOOTER --*/

	footer menu, footer div
	{
		display: block;
		width: auto;
		text-align: center;
	}

	footer img
	{
		width: 60px;
		height: 60px;
	}
}