/* =============================== */
/* - - - - DESKTOP FIRST - - - - */
/* =============================== */

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


body#index{
	background: #FFF url(gx/bg.gif) repeat-x center top;
	margin: 0;
	padding: 0;
	text-align:center;
}
body#main{
	background: #cacaca ;
	margin: 0;
	padding: 0;
	text-align:center;
	/**/
}
html>/**/body#main {overflow:scroll;} 
html{
	color: #fff;
	font-size: 11px;
	font-family: Arial, Verdana, Tahoma; 
}
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, img{border:0; margin:0; padding:0;}


/* TEXTES ET HYPERLIENS GLOBAUX
--------------------------------------------------------------------------------------- */
a, a:link, a:visited, a:hover{outline:none;color:#fff;}

h1{color: #fff; font-size:15px;}
h1 a, h1 a:link, h1 a:visited{color:#C21527;}

h2{color: #fff; font-size:12px;}
h2 a, h2 a:link, h2 a:visited{color:#fff;text-decoration:underline;}

p{font-size: 11px; line-height: 150%; color: #fff;}
p.textePetit{font-size:10px;}
p a, p a:link, p a:visited, ul li a, ul li a:visited, ol li a, ol li a:visited{color:#fff; text-decoration:underline;}
p a:hover, p a:visited:hover, ul li a:hover, ul li a:visited:hover, ol li a:hover, ol li a:visited:hover{
	color:#fff; text-decoration:underline;
}

ul li{color:#1F1F1F; font-size:11px; line-height:150%; list-style:square; margin-left:16px;}
ol li{color:#1F1F1F; font-size:11px; line-height:150%; margin-left:16px;}

/* 
p:first-letter{color:green; font-size:200%; text-transform:uppercase;}
sup{position:relative; bottom:0.3em; vertical-align:baseline;}
sub{position:relative; bottom:-0.2em; vertical-align:baseline;}
*/

img { max-width:100%; max-height: auto; }

/* CONTENEURS ET CLASSES GÉNÉRALES
--------------------------------------------------------------------------------------- */
#conteneurWrapper{
	background: #fff url(gx/bg.gif) repeat-x  scroll center top;
}
#conteneur{
	display: block;
	margin: 0 auto 0 auto;
	text-align:left;
	max-width:940px;
	background: url(gx/menu-bg.gif) repeat-x  scroll center top;
	width: 100%;
}

.both{clear:both;}


#contenu{
	background-color:#131512;
	display: block;
	position: relative;
	max-width:940px;
	width: 100%;
	min-height: 620px;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}
@media only screen and (max-width: 940px) {
	#contenu {margin: 0 15px; width: auto; }
}
@media only screen and (max-width: 767px) {
	#contenu { background-color: transparent; margin: 70px 0 0 0; min-height: 120px; }
}

#colonne-gauche{
	margin-top:171px;
	width:235px;
	padding:10px;
	float: left;
	left: 0;
	top: 0;

	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}
#colonne-gauche-accueil{
	margin-top:364px;
	width:235px;
	padding:10px;
	float: left;
	left: 0;
	top: 0;

	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

#colonne-droite{
	display: inline-block;
	max-width:705px;
	width: auto;
	margin-left: 0;
	padding:10px;
	vertical-align: top;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

/** html #colonne-droite{padding:10px 0 0 5px ;}*/

@media only screen and (max-width: 970px) {
	#colonne-gauche, #colonne-gauche-accueil{ float: none; position: absolute; left: 0; top: 171px; margin: 0px; }
	#colonne-droite{ display: inline-block; margin-left: 235px; vertical-align: top; width: auto;}
	#colonne-droite img { width: 100%; max-width: 576px; }
}
@media only screen and (max-width: 767px) {
	#colonne-gauche-accueil, #colonne-gauche{ 
		background-color:#131512; 
		float: none;
		display: block;
		margin: 5px 15px 15px 15px; 
		position: relative;
		top: 0px;
		width: auto;
	}
	#colonne-droite { background-color:#131512; margin-left: 0; padding:15px 15px; max-width:770px; width: 100%; }
}


#footer-contenu{clear:both;}
@media only screen and (max-width: 767px) {
	#footer-contenu{display:none;}
}

#logo{
	position:absolute;
	top:0;
	background:  url(gx/M/bg-logo.gif) repeat-x  scroll center top;
	text-align:center;
	width:235px;
	height:230px;
}
#logo-accueil{
	position:absolute;
	top:0;
	background:  url(gx/M/bg-logo.gif) repeat-x  scroll center top;
	text-align:center;
	width:235px;
	height:423px;
}
#logo-accueil img.mobile, #logo img.mobile { display: none; }

@media only screen and (max-width: 940px) {
	#logo-accueil, #logo{ left:15px; }
}
@media only screen and (max-width: 767px) {
	#logo-accueil img.bureau, #logo img.bureau, #logo-accueil #intro-recherche { display: none; }
	#logo-accueil img.mobile, #logo img.mobile { display: inline-block; }

	#logo-accueil, #logo{ background: transparent; height: 99px; left: 0; width: 100%; }

}

#footerWrapper{
	background: #cacaca url(gx/M/bg-footer.gif) repeat-x  scroll center top;
	width:100%;
	text-align:left;
	padding-top:20px;
}


.fleche_lien{background: url(gx/fleche_lien.gif) no-repeat  scroll left 1px;padding-left:18px;}
.fleche_retour{background: url(gx/fleche_retour.gif) no-repeat  scroll left 1px;padding-left:18px;}
@media only screen and (max-width: 767px) {
	.fleche_lien.bureau, .fleche_retour.bureau { display: none;}
}

.Font12, .Font12 p{font-size:12px;}

.Numpages{text-align:center;color:#666;}
.Numpages a{text-decoration:none; margin: 0 3px;}
.Numpages a:hover{text-decoration:underline;}

/* MENUS
--------------------------------------------------------------------------------------- */
#menuBureau{
	float:right;
	height:49px; 
	margin:0 3px 8px 0; 
	padding:0;
}
#menuBureau ul{margin:0; padding:0;}
#menuBureau ul li{padding:0; margin:0; display:block; list-style-type:none;float:left;}
#menuBureau .mobile { display: none; }
#menuBureau ul li a, #menuBureau ul li a:link, #menuBureau ul li a:visited{
	border-left: 1px solid #bababa;
	color: #fff;
	text-transform:uppercase;
	font-size: 11px;
	font-weight: bold;
	padding: 16px 40px;
	text-decoration: none;
	display:block;
}
#menuBureau ul li a:hover, #menuBureau ul li a:visited:hover{background: url(gx/menu-bg-over.gif) repeat-x  scroll center top;}
#menuBureau ul li a.actif, #menuBureau ul li a.actif:visited{background: url(gx/menu-bg-on.gif) repeat-x  scroll center top;}

#menuMobile ul li{ color:#FFF; font-size:22px; line-height:100%; list-style:none; margin-left:0; text-align: left; text-transform: uppercase; }
#menuMobile ul li { font-weight: bold; }
#menuMobile ul li.sec { font-size:18px; text-transform: none; }

#menuMobile ul li a.resoSociaux { display: inline-block; background: none; border: 0px; }

@media only screen and (max-width: 940px) {
	#menuBureau ul { display: none; }
}

#liste-categorie .mobile { display: none; }
#liste-categorie ul li{list-style-type:none;padding:0;margin:0;}
#liste-categorie h2{
	border-bottom:1px solid #737373;
	width:220px;
	padding:7px 0;
	background: url(gx/liste-categorie.gif) no-repeat  scroll right center;
	display:block;
}
#liste-categorie ul li a{
	display:block;
	text-decoration:none;
	width:220px;
	padding:5px 0;
	border-bottom:1px solid #737373;
}
#liste-categorie ul li a:hover{background-color:#333532;}

#formCategorie { margin-top: 10px; width: 100%; }
#formCategorie select { padding: 5px; width: 100%; }


@media only screen and (max-width: 970px) {
	#liste-categorie .bureau, p.bureau { display: none; }
	#liste-categorie.listeAcc { display: block; margin-top:191px; }
	#liste-categorie.listeAcc .bureau { display: block; }
	#liste-categorie .mobile { display: block; }
	#liste-categorie h2, #liste-categorie ul li a { width: 100%; }
}

@media only screen and (max-width: 767px) {
	#liste-categorie.listeAcc { display: block; margin-top:0; }
	#liste-categorie.listeAcc .bureau { display: none; }
}

/* PAGE ACCUEIL
--------------------------------------------------------------------------------------- */
#intro-recherche{
	height:197px;
	width:235px;
	text-align:left;
	background: #131512;
	color: #FFF;
}

#intro-recherche h1{color:#fff; padding: 5px 5px 0px 5px;}
#intro-recherche p{color:#fff; padding: 5px 5px 0px 5px;} 

#intro-recherche form{
	margin-top:20px;
	text-align:center;
	height:28px;
	background: url(gx/search-bg.gif) no-repeat  scroll left center;
	padding:0 0 0 1px;
	font-size:12px;
}

#intro-recherche #inputSearch{
	background:none;
	border:none;
	width:194px;
	float:left;
	padding:5px 0 6px 5px;
}
#intro-recherche #btn_go_search{
	margin-top:1px;
	float:right;
	background: url(gx/btn-search.gif) no-repeat scroll left center;
	width:30px;
	height:26px;
	border:none;
}

/* Search dans le menu mobile */
#intro-recherche.mobile { height: 30px; padding: 10px; width: auto;}
#intro-recherche.mobile form { background: none; border: 1px solid #a9a9a9; background-color: #fff; margin: 0; }
#intro-recherche.mobile #inputSearch { display: inline-block; }
#intro-recherche #btn_go_search { margin-right: 1px; }

#listeImage{
   display:block;
}
#listeImage div{
	text-align: center;
	display:none;
}
#listeImage div.Actif{
  display:block;
}
#listeImage div img{
  width: 100%; max-width: 100%;
}

.sectionPhoto { width: 100%; }
.sectionPhoto h2 { margin-bottom: 5px; }
.lstPhoto { 
	display: inline-block;
	padding:0 5px 10px 0;
	text-align: left;
	width: 33%; 
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

.appercuCatVedette{
	text-decoration:none;
}
.appercuCatVedette img{
	border:1px solid #3d3e3c;
	padding:3px;
	margin-bottom: 5px;
	width: 100%;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}
.appercuCatVedette:hover img{
	border:1px solid #fff;
}
@media only screen and (max-width: 884px) {
	.lstPhoto { width: 49.5%; }
}
@media only screen and (max-width: 767px) {
	.lstPhoto { width: 33%; }
}
@media only screen and (max-width: 640px) {
	.lstPhoto { width: 49.5%; }
}
@media only screen and (max-width: 360px) {
	.lstPhoto { width: 100%; }
}

/* texte intro pour mobile*/
#texteAcc {
	display: none;
	color: #000;
	margin: 15px 0;
	width: auto;
}
#texteAcc h1 { color: #fff; font-size: 22px; margin-bottom: 20px; }
#texteAcc p { color: #fff; font-size: 12px; }
#texteAcc #footer-resoSociaux { margin-top: 10px; }

@media only screen and (max-width: 767px) {
	#texteAcc { display: inline-block; }
	#texteAcc a { color: #fff; }
}

/* PAGE 02_100
--------------------------------------------------------------------------------------- */
.appercuCat{
	margin:10px 20px;
	text-decoration:none;
	display: inline-block;
	text-align: left;
	max-width: 160px;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

.appercuCat img{
	border:1px solid #3d3e3c;
	padding:3px;
	margin-bottom: 5px;
	width: 100%;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}
.appercuCat:hover img{
	border:1px solid #fff;
}

@media only screen and (max-width: 940px) {
	.sectionPhotoMiddle { text-align: center; width: 100%; }
}

/* PAGE 02_200
--------------------------------------------------------------------------------------- */

.appercuPhoto{
	margin:10px 16px;
	text-decoration:none;
	display: inline-block;
	text-align: left;
	max-width: 136px;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	vertical-align: top;
}

.appercuPhoto a{text-decoration:none;display:block;width:140px;}
.appercuPhoto a span{display:block;}

.appercuPhoto img{
	border:1px solid #3d3e3c;
	padding:3px;
	margin-bottom: 5px;
}

.appercuPhoto:hover img{
	border:1px solid #fff;
}

@media only screen and (max-width: 940px) {
	.appercuPhoto { margin:10px 10px; }
}
@media only screen and (max-width: 480px) {
	.appercuPhoto { margin:10px 5px; width: 48%; }
}

/* Outils d'info-bulles en javascript onMouseover="ddrivetip('')"
------------------------------------------------------------------------------------*/
#dhtmltooltip{position:absolute; left:-300px; width:150px; padding:10px; visibility:hidden; z-index:100; text-align:left;}
#dhtmlpointer {position:absolute; left: -300px; z-index: 101; visibility: hidden; }
#dhtmltooltip {border: 1px solid #a1a9ae; background: #FFF; color:#000; }

/* PAGE 03_100
--------------------------------------------------------------------------------------- */
.lstEvent { position: relative; margin: 20px auto; min-height: 150px; width: auto; }
.lstEvent h2 { margin-bottom: 5px;}
.lstEvent .img { position: absolute; left:18px; top:0; margin-right: 20px;}
.lstEvent .img img { border:1px solid #3d3e3c; padding:3px; }
.lstEvent .img img:hover { border:1px solid #fff; }
.lstEvent .txt { display: inline-block; margin: 0 20px 0 208px; }

@media only screen and (max-width: 480px) {
	.lstEvent .img { position: relative; display: block; left:0; margin-right: 0; text-align: center; width: 100%;}
	.lstEvent .txt { display: inline-block; margin: 20px 20px 0 0; }
}

/* PAGE CONTACT
--------------------------------------------------------------------------------------- */


/* ICONES GÉNÉRALES
--------------------------------------------------------------------------------------- */
.lienRSS{background: url(Gx/icone_RSS.gif) no-repeat left;padding:5px 0 5px 20px;}
/* .lienPDF{background: url(Gx/icone_PDF.gif) no-repeat left;padding:5px 0 5px 20px;} */

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before {
	content: "\f099";
}
.icon-facebook:before {
	content: "\f09a";
}
.icon-google-plus:before {
	content: "\f0d5";
}
.icon-instagram:before {
	content: "\f16d";
}

/* PIED CONTENEUR
--------------------------------------------------------------------------------------- */
#footer-conteneur{text-align:right;color:#555; font-size:11px; height:30px; padding:0; max-width:940px; margin: 0 auto 0 auto;}
#footer-conteneur a{color:#595959;}

#footer-resoSociaux { float: left; }
#footer-resoSociaux a { text-decoration: none; font-size:16px; margin-right: 10px; }

@media only screen and (max-width: 970px) {
	#footer-conteneur {padding: 0 15px;}
}
@media only screen and (max-width: 640px) {
	#footer-conteneur {display: none;}
	#conteneur {margin-bottom: -20px;}
}

/* PIED DE PAGE
--------------------------------------------------------------------------------------- */
#piedPage{color:#555; font-size:10px; height:50px; padding:0; margin: 0 auto 0 auto; max-width:940px;}
#piedPage a{color:#555;text-decoration:none; }
#piedPage a:hover{color: #222;text-decoration:underline;}
#piedPage #copyrights{float:left; margin:0; text-align:left;}
#piedPage #copyrights a{font-weight:bold;}
#piedPage #copyrights #lienCopyrights{font-weight:normal; text-decoration:none; color:#555;}
#piedPage #copyrights #lienCopyrights:hover{font-weight:normal; color: #222;text-decoration:underline;}
#piedPage #menuBas{float:right;text-align:right;color:#555; }

@media only screen and (max-width: 970px) {
	#piedPage {padding: 0 15px;}
}
@media only screen and (max-width: 640px) {
	#piedPage #copyrights{ float:none; text-align: center;}
	#piedPage #menuBas{ display: none; }
}


/* FORMULAIRES
--------------------------------------------------------------------------------------- */
fieldset{ font-size: 11px; margin:10px 0;}
fieldset legend{ color:#fff; font-size:14px; font-weight:bold; }
fieldset label{font-size:12px; color:#fff; margin:5px 0;}

/* Formulaire contact */
.champTexte{
	background: #EEF3F7;
	border: 1px solid #C9D0D6;
	color: #444;
	font-size: 11px;
	margin:2px 0 2px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.listeDeroulante{
	background: #EEF3F7;	
	border: 1px solid #C9D0D6;
	color: #4E677A;
	font-size: 11px;
	margin:2px 0 2px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.boiteTexte{
	background: #EEF3F7;
	border: 1px solid #C9D0D6;
	color: #4E677A;
	font-family: "Trebuchet MS";
	font-size: 11px;
	margin:2px 0 2px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.bouton{
	background-color: #333532;
	color: #fff;
	font-family: "Trebuchet MS";
	font-size: 13px;
	border:none;
}
.bouton:hover{background-color:#fff; color:#131512;}

.champCache{display:none; visibility:hidden;} /* Utilisé pour l'anti-spam */

.erreur{color:#FF0000;}

#formulaireQuestion{margin-left:15px; }
#formulaireQuestion fieldset label{float:left;width:150px;}
#formulaireQuestion .champTexte{float:left; max-width:300px; width: 100%; }
#formulaireQuestion .listeDeroulante{float:left; max-width:300px; width: 100%;}
#formulaireQuestion .boiteTexte{float:left;height:70px; max-width:300px; width: 100%;}

@media only screen and (max-width: 500px) {
	#formulaireQuestion{margin-left:0;}
	#formulaireQuestion fieldset label{float:none; display: inline-block; width:100%;}
	#formulaireQuestion .champTexte,
	#formulaireQuestion .listeDeroulante,
	#formulaireQuestion .boiteTexte{ float: none; max-width:500px; margin:0; width: 100%; }
}