@charset "utf-8";

/* orange saveme #ff6600 rgba(255, 102, 0, 1) 

   bleu saveme #0166ff  rgba(1, 102, 255, 0.75) */

body  {/*bleu savemeOld #0161B5;*/

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */

	padding: 0;

	/* text-align: center; ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */

	color: #000000;

	background-color: #ff6600;	/*background-image: url(images/vueExpresso2.png);/*VUE%20ECLATER%20LL.jpg*/

}

.recrute{

	position:absolute;

	top:10px;

	right:5px;

	}

@media (max-width: 850px) {

.recrute{visibility: hidden;}}

.sapinBlink{

	position:absolute;

	top:10px;

	right:4%;

	}

@media (max-width: 850px) {

.sapinBlink{visibility: hidden;}}

.sapinNeige{

	position:absolute;

	top:10px;

	right:100px;

	}

@media (max-width: 850px) {

.sapinNeige{

	position:absolute;

	top:5px;

	right:10px;

	width:50px;

	height:50px;

	}

}

.roiLeon{

	position:absolute;

	top:5px;

	left:280px

	}

@media (max-width: 850px) {

.roiLeon{visibility: hidden;}

}

.feteBayonne{

	position:absolute;

	top:10px;

	right:20px;

	}

@media (max-width: 850px) {

.feteBayonne{	

	width:50px;

	height:50px

	}}

#header  {

	/*background-image:url(images/ciel.jpg); */

	width:90%;

	height:120px;

	/*border: 5px solid #ff6600;orange*/

	border-radius: 5px  ;

	/*box-shadow: 3px 3px 10px #656565;*/

	margin-left: auto;

    margin-right: auto;

	margin-top:4px;

	overflow: hidden;

	background:#FFF;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 5%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 5%);

	}

	#header2  {

	/*background-color:#0161B5;

	background-image:url(images/ciel.jpg); */

	width:98%;

	height:130px;

	border: 5px solid #ff6600;/*orange*/

	border-radius: 5px  ;

	box-shadow: 3px 3px 10px #656565;

	margin: 4px 4px ;

	overflow: hidden;

	}

	@media (max-width: 850px) {

	#header  {

	font-size: 9px;

	height:50px;

	} }

#logoTop {

	margin:0;

	position: fixed;

	z-index: 1001;

	}

#headerAdmin  {

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma ;

	font-size: 18px;

	font-style: normal;

	text-align: center;

	color: #0166ff;

	border-radius: 5px  ;

	font-variant: normal;

	width:99%;

	height:60px;

	box-shadow: 3px 3px 10px #656565;

	margin: 4px 4px ;

	overflow: hidden;

	background:#FFF;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 5%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 5%);

	}

.position-marker{

	width:30px;

	height:30px;

	margin:0 0 0 60%;

	position:absolute;

	z-index: 1001;

	}

	@media (max-width: 850px) {

		.position-marker{

				width:20px;

				height:20px;}}

.clock_icon{

	width:30px;

	height:30px;

	margin:0 0 0 50%;

	position:absolute;

	z-index: 1001;}

	@media (max-width: 850px) {

		.clock_icon{

	width:20px;

	height:20px;}}

.telIcone{

	width:30px;

	height:30px;

	margin:0 0 0 40%;

	position:absolute;

	z-index: 1001;}

@media (max-width: 850px) {

		.telIcone{

	width:20px;

	height:20px;}}

.iconeCle{

	width:30px;

	height:30px;

	margin:0 0 0 90%;

	position:absolute;

	z-index: 1001;}

@media (max-width: 850px) {

		.iconeCle{

	width:20px;

	height:20px;}}

a.infoP ,a.infoT , a.infoH , a.infoA{

	position: relative;

	text-decoration: none;

	display: block;

}

a.infoP span ,a.infoT span , a.infoH span , a.infoA span{

	display: none; /* on masque l'infobulle */

	color: black;

}

a.infoP:hover ,a.infoT:hover , a.infoH:hover , a.infoA:hover {

	background: none; /* correction d'un bug IE */

	z-index: 1001; /* on définit une valeur pour l'ordre d'affichage */

} 

a.infoT:hover span  {

	display: inline; /* on affiche l'infobulle */

	position: absolute;

	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

	top: 45px; /* on positionne notre infobulle */

	left: 40%;

	text-align: left;

	color:white;

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma, ;

	background: #666;

	padding: 3px;

	border: 1px solid #ff6600;

	border-radius: 5px  ;

	box-shadow: 3px 3px 10px #656565;

	z-index:1001

}

@media (max-width: 850px) {a.infoT:hover span  {top: 20px;}}

a.infoH:hover span {

	display: inline; /* on affiche l'infobulle */

	position: absolute;

	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

	top: 45px; /* on positionne notre infobulle */

	left: 50%;

	text-align: left;

	color:white;

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma, ;

	background: #666;

	padding: 3px;

	border: 1px solid #ff6600;

	border-radius: 5px  ;

	box-shadow: 3px 3px 10px #656565;

	z-index:1001;

}

@media (max-width: 850px) {a.infoH:hover span  {top: 20px; }}

a.infoP:hover span {

	display: inline; /* on affiche l'infobulle */

	position: absolute;

	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

	top: 45px; /* on positionne notre infobulle */

	left: 60%;

	text-align: left;

	color:white;

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma ;

	background: #666;

	padding: 3px;

	border: 1px solid #ff6600;

	border-radius: 5px  ;

	box-shadow: 3px 3px 10px #656565;

	z-index:1001;

}

@media (max-width: 850px) {a.infoP:hover span  {top: 20px; }}

a.infoA:hover span {

	display: inline; /* on affiche l'infobulle */

	position: absolute;

	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

	top: 45px; /* on positionne notre infobulle */

	left: 85%;

	text-align: left;

	color:white;

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma ;

	background: #666;

	padding: 3px;

	border: 1px solid #ff6600;

	border-radius: 5px  ;

	box-shadow: 3px 3px 10px #656565;

	z-index:1001;

}

@media (max-width: 850px) {

	a.infoA:hover span  {

			top: 20px; /* on positionne notre infobulle */

			left: 80%;

					}}

.imgheader {

	padding:10px 1px ;

	float:left;

	width:250px;

	height:100px;}

	.imgheader2 {

	padding:10px 1px ;

	float:left;

	width:250px;

	height:100px;}

@media (max-width: 850px) {

	.imgheader {

	margin-left: 60px;

	padding: 2px 1px;

   /* margin-right: auto;

	float:none;*/

	width:auto;

	height:90%;}

}

.imgheaderAdmin {

	padding:10px 1px ;

	float:left;

	width:125px;

	height:50px;}

.imgheadergauche {

	padding:10px 10px ;

	float: right;

	height:100px;}

@media (max-width: 850px) {

	.imgheadergauche {

	padding:1px 0 ;

	float: right;

	height:50px;}

}

.texteheader {

	padding: 1px 10px;

	margin: 0 0 0 175px;

	height:100px;

	text-align: center;

	color: #0166ff;

	font-size: 18px;

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma ;

	font-style: normal;

	font-variant: normal;

	/*font-weight: bold;*/

	}

	.texteheader2 {

	padding: 1px 10px;

	margin: 0 0 0 175px;

	height:100px;

	text-align: center;

	color: #0166ff;

	font-size: 18px;

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma ;

	font-style: normal;

	font-variant: normal;

	/*font-weight: bold;*/

	}

@media (max-width: 850px) {.texteheader {font-size: 0px;}}

/* Texte défilant */

.messagedefilant {

  display: block;

  position:absolute;

   width: 90%;

  max-width: 100%;

  height: 20px;

  top:105px;

    font-size: 14px;

  color: #ff6600;/*orange*/

  	font-family: Arial, sans-serif,"Berlin Sans FB",Tahoma ;

	font-style: normal;

	font-variant: normal;

  white-space: nowrap;

  overflow-X: hidden; /*empeche le scroll horizontal*/

}

 

.messagedefilant div {

  position: absolute;

  min-width: 100%; /* au minimum la largeur du conteneur */

}

 

.messagedefilant div span, 

.messagedefilant div:after {

  position: relative;

  display: inline-block;



  top:0;

}

 

.messagedefilant div span {

  animation: defilement 30s infinite linear;

}

 

.messagedefilant div:after {

  position: absolute;

  top:0; left:0;

  content:attr(data-text);

  animation: defilement2 30s infinite linear;

}

 

@keyframes defilement {

  0% { margin-left: 0; }

  100% { margin-left: -100%; }

}

 

@keyframes defilement2 {

  0% { margin-left: 100%; }

  100% { margin-left: 0%; }

}

@media (max-width: 850px) {

.messagedefilant {

	top:40px;

}

}







#container {

	font-family:  Arial, sans-serif,"Berlin Sans FB", Tahoma;

	font-size: 17px;

	font-style: normal;

	text-align: left;

	/*font-weight: bold;*/

	color: #0166ff;

	/*background-color: #CCC;*/

	width: 100%;

	margin-top: 3px;

}

a.bulle {

	font-size: 11px; /* On définit les propriétés de texte pour toutes les balises. */

   font-family:  Arial, sans-serif,"Berlin Sans FB", Tahoma;

	position: relative;

	text-decoration: none;

	display: block;

}



a.bulle span {

	display: none; /* on masque l'infobulle */

	color: black;

}

a.bulle:hover {

	background: none; /* correction d'un bug IE */

	z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}

a.bulle:hover span {

	display: inline; /* on affiche l'infobulle */

	position: absolute;



	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */



	top: 30px; /* on positionne notre infobulle */

	left: 20px;

	

	text-align: left;

	background: white;

	padding: 3px;

	border: 1px solid black;

}

#MenPaCarousel{

		width:90%;

	margin-left: auto;

    margin-right: auto;

	margin-top:4px;

	border-radius:5px;

	padding: 1px 1px 1px 5px;

	background-color:#fff;

	overflow: hidden;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 2%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 2%);

	}

#article	{

	margin: 0 0 0 175px;

	margin-left: auto;

    margin-right: auto;

	margin-top:4px;

	border-radius:5px;

	padding: 1px 1px 1px 5px;

	background-color:#fff;

	overflow: hidden;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 2%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 2%);

	}

@media (max-width: 850px) {

	#article	{

	margin: 0px 0px 0px 87px; 

	}

}

#articlePlus	{

	width:90%;

	margin-left: auto;

    margin-right: auto;

	margin-top:4px;

	border-radius:5px;

	padding: 1px 1px 1px 5px;

	background-color:#fff;

	overflow: hidden;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 2%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 2%);

	}

@media (max-width: 850px) {

	#articlePlus	{

	background-image:none;

	}

}

#marge	{

	margin: 5px 0px ;

	}

#aside {

	float: left;

	width: 170px;

	margin-top: 2px;

	}

@media (max-width: 850px) {

	#aside {

	width: 85px;

	}

}

.menu {

	padding:0;

	margin:0;

	list-style:none;

	width: 170px;

  }

 .menu li {

    border: solid 1px #03A6FF;

    background-color: #0166ff;

	border-radius: 5px  ;

	box-shadow: 3px 3px 5px #656565;

	margin-bottom: 3px;	/* float:left;

  margin-left:10px; */

 }

 .menu li.current a {

	border: solid 1px #03A6FF;

	background-color:#014D92;

	border-radius: 5px;

	box-shadow: 3px 3px 5px #656565;

	color:#A0A0A4;

 }

 .menu li a {

	display: block;

	height:40px;

	line-height:40px;

	color:#FFFBF0;

	text-decoration:none;

	font-family:arial, verdana, sans-serif;

	text-align:center;

	/* font-size:15px;

  padding:0 0 0 7px; */

  cursor:pointer;

	font-weight: bold;

 }

 .menu li a:hover, .menu li a:focus, .menu li a:active { 

 	border: solid 1px #E90707;

    background-color: #EB0B2D;

	border-radius: 5px  ;

	box-shadow: 3px 3px 5px #656565;

 }

@media (max-width: 850px) {

	.menu {

	padding:0;

	margin:0;

	list-style:none;

	width: 85px;

    }

	.menu li { background-size: 85px;

				margin-bottom: 6px;}

	.menu li.current a {background-size: 85px; }

	.menu li a {

	height:20px;

	line-height:20px;

	 font-size:9px;

	font-weight: inherit;

	 }

	.menu li a:hover, .menu li a:focus, .menu li a:active { background-size: 85px;}

}

.menuTarif {

	width: 170px;

	color: white;

	padding:5px;

	cursor:pointer;

  }

 .menuTarif li {

    border: solid 1px #03A6FF;

    background-color: #0166ff;

	border-radius: 5px  ;

	box-shadow: 3px 3px 5px #656565;

	margin-bottom: 3px;	/* float:left;

  margin-left:10px; */

 }

 .menuTarif li.current a {

	border: solid 1px #03A6FF;

	background-color:#014D92;

	border-radius: 5px;

	box-shadow: 3px 3px 5px #656565;

	color:#A0A0A4;

 }

 .menuTarif li a {

	display: block;

	height:120px;

	/*line-height:80px;*/

	color:#FFFBF0;

	text-decoration:none;

	font-family:arial, verdana, sans-serif;

	text-align:center;

	/* font-size:15px;

  padding:0 0 0 7px; */

  cursor:pointer;

	font-weight: bold;

 }

 .menuTarif li a:hover, .menuTarif li a:focus, .menuTarif li a:active { 

 	border: solid 1px #E90707;

    background-color: #EB0B2D;

	border-radius: 5px  ;

	box-shadow: 3px 3px 5px #656565;

 }

@media (max-width: 850px) {

	.menuTarif {

	padding:0;

	margin:0;

	list-style:none;

	width: 85px;

    }

	.menuTarif li { background-size: 85px;

				margin-bottom: 6px;}

	.menuTarif li.current a {background-size: 85px; }

	.menuTarif li a {

	height:50px;

	/*line-height:40px;*/

	 font-size:9px;

	font-weight: inherit;

	 }

	.menuTarif li a:hover, .menuTarif li a:focus, .menuTarif li a:active { background-size: 85px;}

}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#positionMenu{

	padding-left:280px;

	padding-top: 40px;

	width:65%;

	text-align:center;

	position:absolute;

	z-index:1000}

@media (max-width: 850px) {

	#positionMenu{

	display:none;

}}



#menuHeader, #menuHeader ul{

padding:0;

margin:0;

list-style:none;

text-align:center;

}

#menuHeader li{

display:inline-block;

position:relative;

border-radius:8px 8px 0 0;

margin-bottom: 3px;

}

#menuHeader ul li{

display:inherit;

border-radius:0;

}

#menuHeader ul li:hover{

border-radius:0;

}

#menuHeader ul li:last-child{

border-radius:0 0 8px 8px;

}

#menuHeader ul{

position:absolute;

z-index: 1000;

max-height:0;

left: 0;

right: 0;

overflow:hidden;

-moz-transition: .8s all .2s;

-webkit-transition: .8s all .2s;

transition: .8s all .2s;

}

/*Pour la hauteur des sous-menus augmente le max-height ici*/

#menuHeader li:hover ul{

max-height:15em;

}

/* background des liens menus :first-child*/

#menuHeader li{

	background-color: rgba(255, 102, 0, 0.5) ;

	background-image: -webkit-linear-gradient(top, rgba(255, 102, 0, 0.1) 30%, rgba(255, 102, 0, 0.5) 100%);

	background-image: linear-gradient(to bottom, rgba(255, 102, 0, 0.1)  30%, rgba(255, 102, 0, 0.5)  100%);

}

/*pour changer la couleur de chaque menu menu

#menuHeader li:nth-child(2){

background-color: #729EBF;

background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);

background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);

}

#menuHeader li:nth-child(3){

background-color: #F6AD1A;

background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);

background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);

}

#menuHeader li:last-child{

background-color: #CFFF6A;

background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);

background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);

}*/

/* background des liens sous menus first-child*/

#menuHeader li:li{

background:rgba(1, 102, 255, 0.5);

background-image: -webkit-linear-gradient(top, rgba(1, 102, 255, 0.1) 30%, rgba(1, 102, 255, 1) 100%);

background-image: linear-gradient(to bottom, rgba(1, 102, 255, 0.1)  30%, rgba(1, 102, 255, 1)  100%);

}

#menuHeader li:hover, #menuHeader li li:hover{

background:rgba(1, 102, 255, 0.5);

background-image: -webkit-linear-gradient(top, rgba(1, 102, 255, 0.1) 30%, rgba(1, 102, 255, 1) 100%);

background-image: linear-gradient(to bottom, rgba(1, 102, 255, 0.1)  30%, rgba(1, 102, 255, 1)  100%);

}

/*

#menuHeader li:nth-child(2):hover, #menuHeader li:nth-child(2) li:hover{

background:#729EBF;

}

#menuHeader li:nth-child(3):hover, #menuHeader li:nth-child(3) li:hover{

background:#F6AD1A;

}

#menuHeader li:last-child:hover, #menuHeader li:last-child li:hover{

background:#CFFF6A;

}*/

/* les a href 

la largeur des onglets est définie par le padding*/

#menuHeader a{

text-decoration:none;

display:block;

padding:8px 30px;

color:white;/*#0166ff;#ff6600;*/

font-family:Arial, sans-serif,"Berlin Sans FB", Tahoma ;



}

#menuHeader ul a{

padding:8px 0;

}

#menuHeader li:hover li a{

color:white;/*#0166ff;#ff6600;*/

text-transform:inherit;

}

#menuHeader li:hover a, #menuHeader li li:hover a{

color:white;/*#ff6600;#000;*/

}

#menuHeader #PageActuel {

	background:rgba(1, 102, 255, 0.5);

	background-image: -webkit-linear-gradient(top, rgba(1, 102, 255, 0.1) 30%, rgba(1, 102, 255, 0.5) 100%);

	background-image: linear-gradient(to bottom, rgba(1, 102, 255, 0.1)  30%, rgba(1, 102, 255, 0.5)  100%);

}

#MenuMobile , #MenuMobileClose{ display:none}

@media (max-width: 850px) {

#MenuMobile, #MenuMobileClose{

	top:1px;

	display:block;

	margin:0;

	padding:5px 0 0 0;

	position:absolute;

	z-index:900;

	width:50px;

	height:50px;

	}	

#menuHeaderMobile, #menuHeaderMobile ul{

padding:0;

margin:0;

list-style:none;/*on enleve les puces*/

text-align:center;

}

#menuHeaderMobile li{

display:inline-block;

position:relative;

border-radius:5px 5px 0 0;

}

#menuHeaderMobile ul li{

display:inherit;

}

#menuHeaderMobile ul li:first-child{

border-radius:0 5px 0 0;

}

/*#menuHeaderMobile ul li:hover{

border-radius:0 5px 0 0;

}*/

#menuHeaderMobile ul li:last-child{

border-radius:0 0 5px 5px;

}

#menuHeaderMobile ul{

position:absolute;

z-index: 1000;

max-height:0;

left: 0;

right: 0;

overflow:hidden;

-moz-transition: .8s all .2s;

-webkit-transition: .8s all .2s;

transition: .8s all .2s;

}

#MenuMobileClose ul:hover:target #MenuMobile ul {

	position:absolute;

z-index: 1000;

max-height:0;

left: 0;

right: 0;

overflow:hidden;

-moz-transition: .8s all .2s;

-webkit-transition: .8s all .2s;

transition: .8s all .2s;}

/*Pour la hauteur des sous-menus augmente le max-height ici*/

#menuHeaderMobile li:hover ul{

max-height:40em;

}

/* background des liens menus :first-child*/

#menuHeaderMobile li ul{

	/*background-color: rgba(160,160,164,0.75);gris*/

	background:rgba(255, 102, 1, 0.75);/*orange*/

	width: 30em;

}

#menuHeaderMobile li ul:first-child{

border-radius:0 5px 0 0;

}

#menuHeaderMobile li ul:last-child{

border-radius:0 0 5px 5px;

}

/* background des liens sous menus first-child*/

#menuHeaderMobile li:li{

background:rgba(255, 102, 1, 0.75);/*orange*/

}

/* background des liens menus et sous menus au survol #menuHeader li:first-child:hover, #menuHeader li:first-child li:hover*/

#menuHeaderMobile li:hover{

background:rgba(255, 102, 1, 0.75);/*orange*/

}

#menuHeaderMobile li li:hover{

background:rgba(255, 102, 1, 1);/*orange*/

}

/* les a href 

la largeur des onglets est définie par le padding*/

#menuHeaderMobile a{

text-decoration:none;

display:block;

padding:8px 32px;

color:white;/*#0166ff;*/

font-family:Arial, sans-serif,"Berlin Sans FB", Tahoma, ;

font-size:20px;

}

#menuHeaderMobile ul a{

padding:8px 0;

}

#menuHeaderMobile li:hover li a{

color:white;/*#0166ff;*/

text-transform:inherit;

}

#menuHeaderMobile li:hover a, #menuHeaderMobile li li:hover a{

color:#000;/*#000;*/

}

#menuHeaderMobile #PageActuel {

	background:rgba(255, 102, 1, 1);/*orange*/

}

}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

 #bandeau{

	margin-left: auto;

    margin-right: auto;

	margin-top:4px;

	font-family: "Berlin Sans FB", Tahoma, Arial, sans-serif;

	/*background-color: #FFFFFF;#FFF000jaune

	border: 5px solid #ff6600;/*orange   #0166ff;bleu

	box-shadow: 3px 3px 10px #656565;*/

	border-radius: 5px;

	text-align: center;

	width: 90%;

	padding: 1px 3px;

	font-size:20px;

	background-color:#fff;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 5%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 5%);

	 }

	  #bandeauAdmin{

	margin: 0 0 0 175px;

    margin-right: auto;

	margin-top:4px;

	font-family: "Berlin Sans FB", Tahoma, Arial, sans-serif;

	border-radius: 5px;

	text-align: center;

	padding: 1px 3px;

	font-size:20px;

	background-color:#fff;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 5%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 5%);

	 }

 #bandeau2{

	background-color: #FFFFFF;

	border: 5px solid #0166ff;

	border-radius: 5px;

	text-align: center;

	width: 95%;

	padding: 1px 3px;

	box-shadow: 3px 3px 10px #656565;

	 }

#bandeaugauche{

	float: left;

	width:auto;}

	.bandeauGauche {

    display: block;

	float: left;

    margin-top: auto;

	margin-bottom:inherit;}

	@media (max-width: 850px) {

		.bandeauGauche{visibility: hidden;

		display: none;}

		}

		.texteGauche {

    display: block;

	float: left;

	width:33%;

    margin-top: auto;

	margin-bottom:inherit;}

	.texteOrange{

		color:#ff6600;

	}

#bandeaudroit{

	float:right;

	width:auto;}

		.bandeauDroit {

    display: block;

	float: right;

    margin-top: auto;

	margin-bottom:inherit;}

	@media (max-width: 850px) {

		.bandeauDroit{visibility: hidden;

		display: none;}

		}

			.texteDroit {

    display: block;

	float: right;

	width:33%;

    margin-top: auto;

	margin-bottom:inherit;}

#bandeaucentre{

	margin: 8px auto;/*  la marge droite peut être indiquée en ems ou en pixels. Elle crée l'espace dans la partie inférieure du côté droit de la page. */

	padding: 0 2px; /* ce remplissage permet de créer un espace vide à l'intérieur du cadre. */

	}

.clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */

	clear:right;

    height:0;

    font-size: 1px;

    line-height: 0px;

}

#texteGauche {text-align: left;}

#textecentre {text-align: center;}

#pied{

	margin-left: auto;

    margin-right: auto;

	margin-top:4px;

	font-family: "Berlin Sans FB", Tahoma, Arial, sans-serif;

	/*background-color: #FFFFFF;#FFF000jaune

	border: 5px solid #ff6600;/*orange   #0166ff;bleu

	box-shadow: 3px 3px 10px #656565;*/

	border-radius: 5px;

	text-align: center;

	width: 90%;

	padding: 1px 3px;

	font-size:20px;

	background-color:#fff;

	background-image: -webkit-linear-gradient(top, #FEC39C 0%, #FFF 5%);

	background-image: linear-gradient(to bottom, #FEC39C 0%, #FFF 5%);

	 }

@media (max-width: 850px) {#pied{display:none}}

.lienneutre{

	color:black;

	font-size: 12px;

	font-family: Arial, Helvetica, sans-serif;

	text-decoration: none;

}

.lienneutre a{

	text-decoration:none;

	color: #B8B8B8;

} 

.lienneutre a:hover{

	color: #B8B8B8;

}

.lienblanc{

	font-size: 12px;

	font-family: Arial, Helvetica, sans-serif;

	text-decoration: none;

}

.lienblanc a{

	text-decoration:none;

	color: #FFF;

} 

.lienblanc a:hover{

	color: #FFF;

}

.infotech{

	color:black;

	font-size: 12px;

	font-family: Arial, Helvetica, sans-serif;

	text-decoration: none;

}

/*@media (max-width: 850px) {.infotech{font-size: 8px;}}*/

.infotech a{ 

text-decoration:none; 

color:black; 

} 

.infotech a:hover{ 

color:black; 

} 

.defilant {

	font-family: Tahoma, Geneva, sans-serif,"Berlin Sans FB" ;

	text-align: center; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */

	color: #F00;

	font-size: 14px;

	/*font-weight: bold;*/

} 



.tahomableu {

	font-family: "Berlin Sans FB", Tahoma, Arial, sans-serif;

	width: 90%;

	margin: 0 auto;

	text-align: center; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */

	color: #00F;

	font-weight: bold;

	font-size: 18px;

} 

@media (max-width: 850px) {.tahomableu {font-size: 12px;}}

.tahomajaunetitre {

	padding: 0 10px;

	color: #FF0;

	/*font-weight: bold;*/

}

.gris {

	color: white;

	font-size: 9px;

}

.texteBarre {text-decoration: line-through;}

.twoColLiqLtHdr #header h1 {

	margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */

	padding: 10px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */

}

.twoColLiqLtHdr #sidebar1 {

	color: #00F;

}

.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {

	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */

	margin-right: 10px;

	border-color: #CCC;

	background-color: #CCC;

}

.twoColLiqLtHdr #mainContent {

	margin: 0 20px 0 26%; /* la marge droite peut être indiquée en pourcentage ou en pixels. Elle crée l'espace dans la partie inférieure du côté droit de la page. */

	color: #000;

} 

.twoColLiqLtHdr #footer {

	padding: 0 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */

	background:#DDDDDD;

	background-color: transparent;

} 

.twoColLiqLtHdr #footer p {

	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */

	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */

	background-color: transparent;

}

.fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */

	float: right;

	margin-left: 8px;

}

.fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */

	color: #00F;

}

#panier {

	font-family: Arial, sans-serif,"Berlin Sans FB", Tahoma ;

	font-size: 9px;

	font-style: normal;

	text-align: left;

	color: #0166ff;

	/*font-weight: bold;*/

	background-color: #CCC;

}

.titre {

	font-size: 26px;

	text-align: center;

}

.soustitre {

	font-size: 20px;

	text-align: center;

	color: #0166ff;

	font-weight: bold;

}

#piedpage {

	font-family:  Arial, Helvetica, sans-serif, Tahoma,"Berlin Sans FB";

	font-size: small;

	font-style: normal;

	color: #00F;

	text-align: center;

}

@media (max-width: 850px) {

	#piedpage {visibility: hidden;}

}

.piedpagepetit {

	font-size: x-small;

}

.lien {

	color: #00F;

	text-decoration: none;

}

.liencadre {

	color: white;

	text-decoration: none;

	padding: 5px 32px;

	margin: 5px 5px 15px 5px;

	white-space: nowrap;/* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

	line-height: 35px;/*espace entre les ligne*/

	background-color: rgba(1, 102, 255, 0.5) ;

	background-image: -webkit-linear-gradient(top, rgba(1, 102, 255, 0.1) 30%, rgba(1, 102, 255, 0.5) 100%);

	background-image: linear-gradient(to bottom, rgba(1, 102, 255, 0.1)  30%, rgba(1, 102, 255, 0.5)  100%);

	border-radius: 5px  ;

	box-shadow: 3px 3px 5px #656565;

}

.comicbleutitre {

		font-family: "Berlin Sans FB", Tahoma, Arial, sans-serif;

	font-size: 20px;

	/*font-weight: bold;*/

	color: #0166ff;

}

@media (max-width: 850px) {.comicbleutitre {font-size: 13px;}}

.comicbleutitreFondGris {

	font-family: "Berlin Sans FB", "Comic Sans MS", cursive;

	font-size: 20px;

	/*font-weight: bold;*/

	color: #0166ff;

	/*background-color:#bbb;*/

}

@media (max-width: 850px) {.comicbleutitreFondGris {font-size: 13px;}}

.tahomarouge {

	font-family:" Berlin Sans FB", Tahoma, Arial, sans-serif;

	font-size: 18px;

	/*font-weight: bold;*/

	color: #F00;

	text-align: center;

	/*background-color: #BBB;*/

}

@media (max-width: 850px) {.tahomarouge{font-size: 12px;}}

.tahomarougeSSfond {

	font-family: "Berlin Sans FB", Tahoma, Arial, sans-serif;

	font-size: 18px;

	/*font-weight: bold;*/

	color: #ff6600;

}

@media (max-width: 850px) {.tahomarougeSSfond{font-size: 12px;}}

#FONDVUEECLATER {

	background-image: url(images/VUE%20ECLATER%20LL.jpg);

	font-weight: normal;

	text-align: left;

	padding: 1px 15px;

}

.tahonanoir {

	font-family: "Berlin Sans FB", Tahoma, Geneva, sans-serif;

	font-size: 18px;

	color: #000;

	text-align: left;

	/*font-weight: bold;*/

}

.tahomanoirgros {

	font-family: "Berlin Sans FB", Tahoma, Geneva, sans-serif;

	font-size: 16px;

	color: #000;

}

@media (max-width: 850px) {

	.tahonanoir {

	font-size: 11px;

}

.tahomanoirgros {

	font-size: 10px;

}}

	.fondsaveme{

		/*background-color:#FF0;*/

		border:5px solid #0166ff;

		border-radius: 5px;

	box-shadow: 3px 3px 10px #656565;

}

	#spin {

		margin: 4em 50%;

}

.hp {

    display: none;

}

.logo{

	max-width:125px;

	max-height:40px;

	}



label {

	color:black;

	font-size: 12px;

	font-family: Arial, Helvetica, sans-serif;

	text-decoration: none;

	margin-top:10px;

	display:block;

 }

@media (max-width: 850px) {label {margin-top:8px;}}

 input[type=submit] {

	width: 100px;

	margin-left: 5px;

	background-color: #F4FFFF;

	border-radius: 5px;

	box-shadow: 3px 3px 10px #656565;

	cursor: pointer;

 }

 input[type=submit]:hover {

	background-color: #DDE8FF;

 }

input[type=submit]:active {

	background-color: #F4FFFF;

	box-shadow: 3px 3px 10px #656565 inset;

}

 input, textarea, select {

	padding: 3px;

	background-color: #F4FFFF;

	border: solid 1px #03A6FF;

	border-radius: 5px;

	width: 500px;

	box-shadow: 3px 3px 10px #656565;

 }

  input[type=radio] {

	padding: 3px;

	background-color: #F4FFFF;

	border: solid 1px #03A6FF;

	width: 13px;

	box-shadow: 3px 3px 10px #656565;

 }

 input[type=image] {

	width: 170px;

	padding: 1px;

	background-color: transparent;

	border: none;

	border-radius: none;

	box-shadow: none;

 }

    input[type=checkbox] {

	padding: 3px;

	background-color: #F4FFFF;

	width: 15px;

	box-shadow: 3px 3px 10px #656565;

	outline: solid 1px #03A6FF;

 }

    input[type=button] {

	margin-left: 5px;

	background-color: #F4FFFF;

	border-radius: 5px;

	box-shadow: 3px 3px 10px #656565;

	cursor: pointer;

	width: 80px;

	height:30px;

 }

  input.court, textarea.court, select.court {

	padding: 3px;

	width: 21%;

	background-color: #F4FFFF;

	border: solid 1px #03A6FF;

	border-radius: 5px;

	box-shadow: 3px 3px 10px #656565;

 }

   input.Trescourt, textarea.Trescourt, select.Trescourt {

	padding: 3px;

	width: 30px;

	background-color: #F4FFFF;

	border: solid 1px #03A6FF;

	border-radius: 5px;

	box-shadow: 3px 3px 10px #656565;

 }

   input.long, textarea.long, select.long {

	padding: 3px;

	width: 95%;

	background-color: #F4FFFF;

	border: solid 1px #03A6FF;

	border-radius: 5px;

	box-shadow: 3px 3px 10px #656565;

 }

 input:focus, textarea:focus {

 background-color:white;

 }

 @media (max-device-width:768px) and (orientation: landscape) {

	 input, textarea, select {width:300px;}

  input[type=image] {width: 100px;} 

  }

 @media (max-width: 850px) { 

 input, textarea, select {width:200px;}

  input[type=image] {width: 65px;}

  }

 legend {font-size: 20px;

	text-align: center;

	color: #0166ff;

	font-weight: bold; }

 @media (max-width: 850px) {

	 legend {font-size: 13px;}}



 fieldset {

	text-align: center;

	padding:0 20px 20px 20px;

	margin-bottom:10px;

	border:1px solid #0166ff;

 }

  .calG{

	display: block;

	float: left;

	width:40%;

    margin-top: 20px;

	margin-bottom:inherit;

	}

	@media (max-width: 850px) {

		 .calG{

				float: left;

				width:100%;

				margin-bottom:0;

				}				}

.calD{

	display: block;

	float: right;

	width:60%;

    margin-top: 20px;

	margin-bottom:inherit;

	}

	@media (max-width: 850px) {

		.calD{

				float: left;

				width:100%;

				margin-top: 3px;

	}}

  .secteurG{

	display: block;

	float: left;

	width:20%;

	height:600px;

    margin-top: 20px;

	margin-bottom:inherit;

	}

/*	@media (max-width: 850px) {

		 .secteurG{

				float: left;

				width:100%;

				margin-bottom:0;

				}				}*/

.secteurD{

	display: block;

	float: right;

	width:80%;

	height:600px;

    margin-top: 20px;

	margin-bottom:inherit;

	}

/*	@media (max-width: 850px) {

		.secteurD{

				float: left;

				width:100%;

				margin-top: 3px;

	}}*/