@charset "utf-8";
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

body {
	font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin:0;
	background-image: url(/images/fond.gif); background-repeat:repeat-x; 
}

#entete 			{ width: 1200px; height: 110px; margin:15px auto 0 auto }  
#rubriques  		{ float: right; margin-top: 50px; margin-right: 70px; text-align: right; font-size: 13px; letter-spacing: 2px; text-transform: uppercase }
#rubriques  a 		{ color: #31353F; margin-right: 30px } 
#rubriques  a.choix { color:#9FA7B5; font-weight: bold } 
#rubriques  a:hover { color:#9FA7B5; font-weight: normal } 

@media (max-width: 700px){
body 				{ background-image: none }
#entete 			{ width: 100%; margin: 0; padding: 5% } 
#rubriques 			{ margin: 0 } 
#rubriques a 		{ display: block; margin: auto; padding: 5% 0 } 
}

#page 				{ width: 1200px; margin: 0 auto 70px }
#contenu 			{ width: 1160px; padding: 0 20px; min-height: 500px }

@media (max-width: 1200px){
#entete, #page, #contenu 	{ width: 100% }
}
@media (max-width: 560px){
#page 				{ display: block; width: 100% }
#contenu 			{ display: block; width: 100%; min-height: 300px }
}

#navigation { text-align: center;
	width: 100%;
	margin: 20px;
	height: 20px
	}
#navigation ul {
	margin: 0;
	padding: 0; line-height: 1.5em
	}
#navigation li {
	display: inline-block;
	list-style: none;
	}
#navigation a {
	color: #999;
	text-transform: uppercase;
	margin: 0 10px;
	font-size: 11px;
	letter-spacing: 2px;
	}
#navigation a:hover {color: #666; font-weight:normal}
#navigation a.choix {color: #000;}

@media (max-width: 560px){
#navigation ul 	{ padding: 5% }
}

.realisation-intro 					{ display: block; width: 100%; max-width: 950px; margin: 2% auto 0; border: 1px solid #CCC }
.realisation-intro .photo 			{ display: inline-block; vertical-align: top; width: 32%; overflow: hidden }
.realisation-intro .photo .slideshow, .realisation-intro .photo .slideshow2, .realisation-intro .photo .slideshow3 { width: 300px; height: 200px }
.realisation-intro .photo img 		{ width: 100%; height: auto }
.realisation-intro .texte-intro 	{ display: inline-block; vertical-align: top; width: 67%; padding: 2% 3% 2% 7%; color:#524943; line-height: 17px }
.realisation-intro .texte-intro h1 	{ font-size: 18px; line-height: 20px; font-weight: normal }
.realisation-intro .texte-intro .infos    		{ margin-top: 10px }
.realisation-intro .texte-intro .infos a  		{ font-size: 12px; color: #FFF!important; width: 102px; height: 19px; background-color: #7D7465; text-align: right; padding: 5px; text-transform: uppercase; letter-spacing: 2px; font-weight: normal  }
.realisation-intro .texte-intro .infos a:hover 	{ background-color: #ACBEB5; color: #524943; font-weight: normal }

@media (max-width: 560px){
.realisation-intro 					{ margin-top: 5% }
.realisation-intro .photo 			{ display: block; width: 100%; max-width: 300px; margin: 2% auto 0 }
.realisation-intro .texte-intro 	{ display: block; width: 100%; padding: 2% 2% 4% }
.realisation-intro .texte-intro .infos    		{ text-align: center }
}

#realisations {	width: 90%;	margin: 0 auto 5%; padding: 0 20px;	min-height: 475px; text-align: center }
#realisations .visuel 		{ display: inline-block; margin: 0.6% 3%; border: 1px solid #CCC; padding: 2%; overflow: hidden  }
#realisations .visuel img  	{ display: block; width: auto; height: 350px }

@media (max-width: 1200px){ 
	#realisations  { width: 100%   }
}

@media (max-width: 600px){ 
	#realisations  			{ margin: 0; padding: 5% 0; min-height: inherit }
	#realisations .visuel  	{ display: block; width: 80%; margin: 5% auto   }
#realisations .visuel img  	{ width: 100%; height: auto }
}

#formation-intro {	width: 950px;	padding : 4px;	margin-top:20px}

#formation-intro .photo {
	width: 225px;
	height: 125px;
	overflow:hidden
}

#formation-intro #texte-intro {
	width: 750px;
	min-height: 185px;
	margin: auto;
	padding: 20px;
	line-height: 16px
}
#formation-intro #texte-intro .titre {
	width: 150px;
	padding-right:50px;
	font-family: "Century Gothic", "Arial Narrow", Arial;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	color:#CC0000;
}
#formation-intro #texte-intro .infos    { margin-top: 50px; }
#formation-intro #texte-intro .infos a  { font-size: 12px; color: #FFF; width: 102px; height: 19px; background-color: #7D7465; text-align: right; padding: 5px }
#formation-intro #texte-intro .infos a:hover { background-color: #ACBEB5; color: #524943; font-weight:normal }

@media (max-width: 950px){ 
#formation-intro 				{ width: 100% }
#formation-intro #texte-intro 	{ width: 100% }
}

#contenu #texte 	{
	width: 800px;
	padding: 25px 25px 25px 50px;
	margin: auto;
	font-size: 11px;
	line-height:180%
}

#contenu #texte H2 {
	/*font-family: "Century Gothic", Verdana;*/
	font-size: 18px;
	line-height: 22px;
	font-weight: normal;
	letter-spacing: 0.9px;
	color: #196898;
	font-family: Arial;
}

#contenu #texte H3 { font-size: 14px;	font-weight: normal;	letter-spacing: 0.9px;	color: #196898 }

#contenu #texte #points {
	position: absolute;
	width:255px;
	margin-top: 50px;
	margin-left: 550px;
}
#contenu #texte #points H3 { font-size: 18px;	font-weight: normal;	color:#509BD5; }
#contenu #texte #points .titre { font-size: 14px;	font-weight: normal;	color:#196898; }
#contenu #texte #point0 {	border-top: 1px #DDD solid;	border-bottom: 1px #DDD solid; padding: 5px}
#contenu #texte #point {	border-bottom: 1px #DDD solid;	padding: 5px }

@media (max-width: 1200px){ 
#contenu #texte 	{ width: 100%  }
}

#contenu .titre		{ padding-top: 0px; font-family: "Century Gothic", Verdana; font-size: 11px; line-height: 180%  }
#contenu .contact		{	font-family: "Century Gothic", Verdana;	font-size: 13px;	line-height: 20px }
#contenu .titre2		{	font-family: "Century Gothic", Verdana;	font-size: 15px;	color: #21395E }
#contenu .titre3		{	font-family: "Century Gothic", Verdana;	font-size: 15px;	color: #21395E; font-weight:bold }
#contenu a		 	{ color: #000000 }
#contenu a:hover 	{ color: #7D7465; font-weight:bold }



#mosaique    		{
	width: 730px;
	min-height: 450px
}
#mosaique    TD 	{ width: 160px; border: solid 1px #A2A9BE }
#mosaique    A 		{ color:#A2A9BE; font-weight:bold }
#mosaique    A:hover 		{ color:#1B213B }

#contact-mail {  font-family: "Century Gothic", Verdana; font-size:14px; text-transform:uppercase; margin-top: 10px }
#contact-mail .myButtonLink 		{  display: block; background:url(images/enveloppes.png) no-repeat bottom; width: 50px; height: 44px }
#contact-mail .myButtonLink:hover {  font-weight: normal; font-style:italic; background-position: 0 0 }

.legal .infos					{ display: block; width: 100%; margin-top: 2%; line-height: 1.5em }
.legal .infos .infosdetail		{ display: inline-block; width: 20%; vertical-align: top; border: 1px solid #000; margin-left: 6%; padding: 0 2% 2%; font-size: 0.9em; text-align: right  }
.legal .infos .infosdetail h5	{ border-bottom: 1px solid #CCC; padding-bottom: 5px; margin: 20px 0 0; font-size: 16px  }
.legal .infos .infosdetail i	{ text-transform: uppercase; font-size: 11px; letter-spacing: 2px  }
.legal .infos .infostexte		{ display: inline-block; width: 48%; vertical-align: top; padding: 0 3% 2% 3%; text-align: justify }
.legal .infos .infostexte h3	{ text-align: left; font-size: 16px }
.legal .infos .photo			{ display: inline-block; width: 25%; height: auto; vertical-align: middle; text-align: center; overflow: hidden }
.legal .infos .photo img		{ width: 90%; max-width: 200px; height: auto; margin-top: 10%  }

@media (max-width: 768px){
.legal section .container		{ width: 100% }
.legal .infos .infosdetail		{ display: block; width: 90%; margin: 5% auto; font-size: 16px  }
.legal .infos .infostexte		{ display: block; width: 100%  }
.legal .infos .photo			{ display: block; width: 100%  }
.legal .infos .photo img		{ width: 100% }
}

#pied-fd {
	min-height: 100px;
	background-color:#171F30;
	width: 100%;
	margin: auto;
}
#pied {
	width: 1200px;
	margin:auto; padding: 0 10%
}
#pied img 			{ position: absolute; margin-top: -55px; width: 274px;  height: auto }
#pied    A 			{ color:#FFF }
#pied    A:hover 	{ color:#E4E8F0 }

#pied #copyright {
	font-family: "Century Gothic", "Arial Narrow", Arial;
	font-size: 10px;
	text-transform:uppercase;
	letter-spacing:2px;
	word-spacing:2px;
	color:#FFF;
}

#pied .societe {
	padding-top: 3%;
	font-family: "Century Gothic", "Arial Narrow", Arial;
	font-size: 11px;
	text-transform:uppercase;
	letter-spacing:2px;
	word-spacing:2px;
	color:#E4E8F0
}
#pied .legal 		{ text-align: right; letter-spacing: 2px }
@media (max-width: 1200px){
#pied 				{ width: 100% }
}
@media (max-width: 560px){
#pied .societe 		{ text-align: center; padding-top: 6% }
#pied .legal 		{ text-align: center; padding-top: 2% }
}