@charset "utf-8";

/* -------------------------------------------------------------
======	PREALABLE
------------------------------------------------------------- */

img {border: 0;}
.clear {clear:both;}
.clearfix {height:1%}
.clearfix:after {content:"."; height:0; line-height:0; display:block; visibility:hidden; clear:both;}
.hidden {display: none;}
.left {float: left;}
.right {float: right;}
.justify {text-align: justify;}
.spip_documents {margin: 0 0 20px 0;}
.verticallittlespace {margin: 7px 0;}

/* -------------------------------------------------------------
======	TYPO (plus encore de typos dans typo.css)
------------------------------------------------------------- */

/* Titraille / Intertitres
-------------------------------------------------*/

h1,h2,h3,h4,h5,h6{font-weight: normal; font-family: "trajan_pro"; text-transform: capitalize; text-align: left;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {background: none;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {color:#333; text-decoration: none; background: none;}

/* h1 - spécificités */
h1 {margin:0 0 8px 0; font-size: 20px; color: #da5220; line-height: 0.9;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {color:#333; text-decoration: none; background: none;}
h1.marge {margin:0 0 17px 0;}
h1.marge a{ color: #da5220;}
h1 a {color:#333; text-decoration: none;}

/* h2 - spécificités */
h2 {margin:0 0 7px 0; font-size: 18px; color: #da5220; line-height: 0.9;}
h2.marge {margin:0 0 14px 0;}
h2 a{color: #da5220;}

/* h3 - spécificités */
h3 {margin:0 0 8px 0; font-size: 16px; color: #111; line-height: 0.9;}
h3.spip {margin: 25px 0 8px 0; color: #111; line-height: 0.9;}

/* h4 - spécificités */
h4 {margin:0 0 8px 0; font-size: 0.9em; color: #da5220; line-height: 0.9;}
h4 a.on{color: #333;}

/* h5 - spécificités */
h5 {margin:0 0 8px 0; font-size: 0.9em; color: #343434; line-height: 0.9; font-weight: bold; margin: 0; color: #343434; font-family: "Times New Roman", times, serif;}

/* h6 - spécificités */
h6 {margin:0 0 8px 0; font-size: 1em; line-height: 0.9; margin-bottom: 2px; font-weight: 700;}

hr {height: 1em; height: 1px; margin: 0 0 20px 0; padding: 0; background-color: #656564; border: 0;}

/* Paragraphes
-------------------------------------------------*/
p, .p, dl, dd, blockquote, address, pre, table, fieldset {margin-bottom: 1.5em;}

/* Liens
-------------------------------------------------*/
a:link, a:visited {color: #cc3333; text-decoration: none;}
a:hover, a:active {color: #cc6666;}

a[hreflang]:after {content: "\0000a0(" attr(hreflang) ")";}
@media print {
  a, a:visited {color: #222222; text-decoration: underline;}
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: "";} /* Cacher les liens pour les images, ou les liens javascript/internes */
}

/* Listes
-------------------------------------------------*/
ul, ol, li, dl, dt, dd {}
ul ul, ol ol, ul ol, ol ul {margin-top: 0; margin-bottom: 0;}

li {list-style-type:none;}

dl dt {font-weight: bold;}
dl dd {}

tfoot {font-style: italic;}

/* -------------------------------------------------------------
======  FORMATAGE DES TABLEAUX 
-------------------------------------------------------------*/

table {}
table.spip {border: 1px solid #666; margin: 0; padding: 0; text-align: center; border-collapse:collapse; width: 100%;}
caption {background: #F0F;}
th {font-weight: bold;}
thead th {background: #DDD;}
th,td,caption {padding: 7px 0;}
td {border: 1px solid #666; margin: 0; padding: 2px; vertical-align:middle;}
td:first-child {text-align:left; padding: 0 0 0 5px;}
tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td,
tbody tr.even th,
tbody tr.even td {background: #f2f3f4;}

/* -------------------------------------------------------------
======  iFRAME
-------------------------------------------------------------*/

iframe {margin: 0 0 22px 0; max-width: 100%;}

/* -------------------------------------------------------------
======	BASE & STRUCTURE
------------------------------------------------------------- */

html, body {font-size: 100%; height: 100%;}
body {background: #ffeed9 url(../images/background.png) top repeat-x; margin: 0; padding: 0; text-align: center;}

#page {margin: 5px auto 0em auto; min-height: 100%; display: block; box-shadow: 1px 0 9px 0 #555; max-width: 900px; min-width: 576px; background-color: #fff; padding: 0 0;}
#container {max-width: 900px; padding-bottom: 70px;}
#container #navigation a:link, #container #navigation a:visited, #container #navigation a:hover, #container #navigation a:active {background: none;}
#container #content_website a:link, #container #content_website a:visited, #container #content_website a:hover, #container #content_website a:active {background: none;}
.maincontent img{max-width: 100%;}

/* -------------------------------------------------------------
======	HEADER (LOGO + BANDEAU)
------------------------------------------------------------- */

#header {height: 117px; width: 100%; overflow: hidden;}
.entete {text-align: right; height: 117px; overflow: hidden; max-width: 100%;}
.fond-logo {position: absolute; z-index: 10; min-height: 117px; overflow: hidden; max-width: 100%;}
.logo-top {position: absolute; z-index: 100; min-height: 117px; overflow: hidden;}
#header img{overflow: hidden; height: 117px;}

@media (max-width: 360px) {
	#page {margin: 0 0 5px 0;}
	#header {background-color: #473c2c; margin-bottom: 12px;}
	.entete {background-color: #473c2c;}
	.fond-logo {background-color: #473c2c;}
	.fond-logo img {display: none;}
	.logo-top {margin-left: 50px;}
}
/* -------------------------------------------------------------
======	NAVIGATION code /inclure/navigation.html
------------------------------------------------------------- */
/* Pour Navresponsive - essai raté */
@media (min-width:40em) {
	.nav-collapse ul {margin: 10px 0 5px 0 !important;}
	.nav-collapse li {width: auto !important; display: inline-block !important;}
}
/* Fin de l'essai */
#navigation {margin: 0; background: #fff; font-family: "trajan_pro_bold"; max-width: 900px; padding: 0 10px; margin: 19px 0 0 0;}
.menu {text-align: justify; width: 100%; border: none; margin: 0; padding: 0;}
.menu:before {content: ''; display: block; width: 100%; margin-bottom: -1.2em;} /* Permet de coller à gauche */
.menu:after {content: ""; width: 100%; display: -moz-inline-box; display: inline-block; } /* Permet de coller à droite */
.menu a {color: #da501f; text-decoration:none; font-size: 15px;}  
.menu a:hover {background: none; color: #696969;}
.menu ul {border-radius: 0 0 5px 5px; position: absolute; top: 1.7em; left:0; max-height:0em; margin:3px 0 0 0; padding:0; overflow:hidden; transition: 0.8s 0.2s;}  

.menu > li {display: -moz-inline-box; display: inline-block; background: none; position: relative; 	/* IE fix. */*display: inline; zoom: 1;}
.menu > li a{padding: 4px 10px; line-height: 30px; margin: 0;}
.menu > li:hover ul {max-height:30em;}  /* on pose une limite de taille pour les sous-menus déroulants  */ 
.menu > li a.on {color: #777; font-weight: normal;} /* géré par #EXPOSE */


.menu > li li {background: #fff; position: relative; width: 200px; z-index: 100;}   
.menu > li li a {display: block; font-size: 0.8em; margin: 0; line-height: 18px; padding: 7px 15px; color: #da501f;} 
.menu > li li:hover, #menu > li li:active {background:#da501f; color: #fff;}
.menu > li li a:hover, #menu > li li a:active {color: #da501f; color: #fff;}
ul li li.allonge {width: 250px;} /* special pour les rubriques ayant le menu "Large submenu" enclenché */

.menu > li:last-child:hover ul {left: -92px;}
@media (max-width:360px) {
	#navigation {margin: 29px 0 12px 0;}
	.menu > li {display: block;}
	.menu > li li {background: #da501f;}   
	.menu > li li a {color: #fff;} 
	.menu > li li:hover, #menu > li li:active {background:#fff; color: #da501f;}
	.menu > li li a:hover, #menu > li li a:active {color: #fff; color: #da501f;}
	.menu > li:last-child:hover ul {left: 0px;}
}
/* -------------------------------------------------------------
======	SLIDER voir /modeles/rubrique_nivoslider.html
------------------------------------------------------------- */
#slider {height: 275px; }
.nivoSlider {height: 275px; max-width:100%;}
@media (max-width: 360px) {
	#demo .owl-slide img {width: 200%; overflow: hidden;}
}
/* -------------------------------------------------------------
======	TITLE + SLOGAN
------------------------------------------------------------- */

#barre-description {background: #003301; font-family: "trajan_pro"; color: #cdfe98; margin: 0; min-height: 47px; text-align: left; padding: 12px 0 0 0px;}

.barre-description-left {display: -moz-inline-box; display: inline-block; width: 554px;}
.titre_principal {font-size: 30px; text-transform: capitalize; display: -moz-inline-box; display: inline-block; margin: 0 7px 0 20px;}
.secondaire {font-size: 16px; display: -moz-inline-box; display: inline-block;}

.barre-description-right {display: -moz-inline-box; display: inline-block; width: 300px; right: 0; margin: 0 10px 0 20px; text-align: right; border-left: 1px solid #99fe98;}
.slogan {color: #99fe98; font-size: 15px; display: -moz-inline-box; display: inline-block;}


/* -------------------------------------------------------------
======	CONTENT
------------------------------------------------------------- */

#content_website {width: 100%; text-align: justify; color: #656666; min-height: 100%; line-height: 1.2em; padding: 30px 0 35px 0; margin: 0;}
.background_homepage {background: url(../images/fond-maincontent.jpg) no-repeat; background-position: right top;}
.content_website a, .content_website a:link, .content_website a:visited, .content_website a:active {background: none;}
.content_website li {list-style-image: url(puce.png);}
.aside-left, .maincontent {display: -moz-inline-box; display: inline-block;}
#content_website li {list-style-type:none; list-style-image: url(puce.png);}
#content_website  a{background: none;}
/* Left side */
.aside-left {display: -moz-inline-box; display: inline-block; vertical-align: top; padding: 0 20px 20px 20px; border-color: #fff; width: 275px;}
.aside-left .wrapper_subsections {text-align: left;}

/* center */
.maincontent {display: -moz-inline-box; display: inline-block; padding: 0 20px 20px 20px; border-color: #fff; width: 530px; vertical-align: top;}
.maincontent-fulllarge {padding: 0 20px 20px 20px;}
.seemore {font-size: 12px;}

/* Right side */
.aside-right {display: -moz-inline-box; display: inline-block; vertical-align: top; margin: 0 20px 20px 10px; border-color: #fff; width: 275px;}
.aside-right img{margin: 0 0 15px 0;}
.wrapper_subsections {text-align: left;}
.hidden_rubrique {height: 150px; overflow: hidden; margin: 0 0 35px 0;}

/* Special Home-page */
.ss_titre_homepage {text-align: left; font-weight: bold; margin: 15px 0 10px 0;}
.testimonial_names {color: #da5220;}
.box_articles {min-width: 800px;} /* Cela permet de mettre une marge entre les box articles de 20 */
.box_2articles {display: -moz-inline-box; display: inline-block; width: 253px; vertical-align: top;}
@media (max-width: 360px) {
	.box_2articles {display: block;}
}
.articles_impair {margin: 0 20px 20px 0;}
.articles_pair {margin: 0 0 20px 0;}
.read_more {text-transform: uppercase; color: #da501f;}

/* Special 2 articles dans une rubrique */
.articles-2-box {margin: 0 0 20px 0; vertical-align: top;}
.articles-2-texte {display: -moz-inline-box; display: inline-block; width: 310px; vertical-align: top;}
.articles-2-docs {display: -moz-inline-box; display: inline-block; width: 215px; text-align: right; vertical-align: top;}
.articles-autres {display: -moz-inline-box; display: inline-block; width: 255px; margin: 0 0 20px 0; vertical-align: top;}
.a_pair {margin: 0 15px 20px 0;}

.paragraphe {}
.testimonial_name {font-size: 15px; color: #da5220;}
.2images-1 img{margin: 0 0 20px 0;}

.autresbox {width: 550px;}
.articles_par2 {display: -moz-inline-box; display: inline-block; width: 250px; margin: 0 20px 15px 0; vertical-align: top;}

/* Special images */
.spip_documents_left {margin-right: 15px;}
.spip_documents_right {margin-left: 15px;}

/* Special contact us */
.google_map {min-height: 400px; width: 100% ;background: url(../css/img/background_google_map.png) repeat;}

/* -------------------------------------------------------------
======	PORTFOLIO
------------------------------------------------------------- */

.galerie {margin: 0 0 0 20px; text-align: justify;}
.portfolio {display: -moz-inline-box; display: inline-block; padding: 0;}
.portfolio:before {content: ''; display: block; width: 100%;} /* Permet de coller à gauche */
.portfolio:after {content: ""; width: 100%; display: -moz-inline-box; display: inline-block; } /* Permet de coller à droite */

/* -------------------------------------------------------------
======	FOOTER
------------------------------------------------------------- */
.footer {bottom: 0px; margin-top: -68px; min-width: 100%; background: url(../images/background.png) top repeat-x; ; font-size: 14px; color: #999; text-align: center; font-family: "trajan_pro";}
.footer-frame {text-align: justify; max-width: 900px; margin: 0em auto; background: #473c2c; min-height: 7	0px; padding: 15px 0 12px 0; box-shadow: 1px 5px 9px 0 #000;}

.footer-left {display: -moz-inline-box; display: inline-block; width: 300px; text-align: left; margin: 0 0 0 20px;}
.footer a:link, .footer a:visited {font-size: 14px; color: #6699cc; text-decoration: none; text-align: justify; text-justify: newspaper; background: none;}
.footer a:hover , .footer a:active {font-size: 14px; color: #fff; text-decoration: none; text-align: justify; text-justify: newspaper; background: none;}

.footer-right {display: -moz-inline-box; display: inline-block; width: 570px; margin: 0em auto; text-align: right;}
.link_text {color:#cdfe98; display: -moz-inline-box; display: inline-block; border: 1px #fff solid; height: 20px; vertical-align: middle; padding: 5px 8px; margin-bottom: 22px; background: #003401; font-size: 1em; font-family: "trajan_pro";}
.link_text a {display: -moz-inline-box; display: inline-block;}

/* RESPONSIVE */
@media (min-width:320px) and (max-width:600px) {
	#page {max-width: 100%; min-width: 320px;}
	.aside-left {display: block; width: 90%;}
	.maincontent {display: block; width: 90%;}
	.wrapper_subsections {max-width: 90%;}
	.box_2articles {display: block; width: 90%; max-width: 290px;}
}
@media (min-width:600px) and (max-width:890px) {
	#page {max-width: 100%; min-width: 600px;}
	.aside-left {display: block; width: 90%;}
	.maincontent {display: block; width: 90%;}
	.wrapper_subsections {max-width: 90%;}
}