/* ===================================
 General
==================================== */

body {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
        font-family:'Trebuchet MS',Helvetica, Arial, Verdana, sans-serif;
	color:#656565;}

@font-face {
	font-family: 'raleway_thin-webfont'; src: url("./fonts/raleway_thin-webfont.ttf");}

a:active {
	outline:0;}

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

.clear {
	clear:both;}

#container {
           width: 100%;}
.marge_brand {
       margin: 0% 0% 0% 0%; padding: 0% 20% 0% 20%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 20% 0% 20%; background-color: #ffffff; border-bottom: 5px solid #ededed;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 20% 0% 20%;}
.marge_footer {
       clear: both; margin: 0% 0% 0% 0%; padding: 0% 30% 0% 30%; background-color: #ededed}
/* ===================================
 Header
==================================== */
/* ------------------ Brand ----------------- */
#brand_box {
           margin: 15px 0px 10px 0px; padding: 0px 0px 0px 0px;}
#img_logo {
          border: none; vertical-align: bottom; margin: 0px 0px 0px 20px; padding: 0px 0px 0px 0px; }
#brand_box a {
           margin: 0% 0% 0% 2%; padding: 0px 0px 0px 0px; color: #444444; line-height: 2em; font-family: 'raleway_thin-webfont'; font-size: 1.6em; text-decoration: none;}
.brand_box_bold {
        font-weight: bold;}
.brand_box_letter {
        font-size: 1.4em; font-weight: bold;}
.brand_color {
       color: #ff8800; font-size: 0.76em; font-weight: bold;}
/* ---------------------end Brand---------------- */

/*----------------- Ligne--------------------------*/
#ligne_fond {
           margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; height: 10px;}
.ligne_box {
       margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}

#ligne1 {
       background-color: #0090ff; height: 10px; width: 7%; float: right;}

#ligne2 { 
       background-color: #4db1ff; height: 10px; width: 7%; float: right;}

#ligne3 {
       background-color: #80c8ff; height: 10px; width: 7%; float: right;}

#ligne4 {
       background-color: #b3deff; height: 10px; width: 7%; float: right;}

#ligne5 {
       background-color: #f3f3f3; height: 10px; width: 7%; float: right;}

#col_menu {
          float: left; width: 30%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#col_principal {
          float: left; width: 70%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#marge_int {
          margin: 0px 0px 0px 0px; padding: 10px 10px 10px 20px; border-left: 1px solid #d9d9d9;}

/* ===================================
 Menu
==================================== */
/*Style 'menu' label button and hide it by default*/
#menu {
       margin: 0;
       padding: 0;
}

.show-menu {
	margin: 5px 0px 0px 5px;
	padding: 0px 0px 0px 0px;
	display: none;
	width: 44px;
	height: 34px;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*-------------------Menu---------------------*/
ul#menu {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 0.74em; list-style-type: none; border-top: 1px solid #ffffff;}
ul#menu li {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 21px; }
ul#menu a {
	display: block; margin: 0px 0px 0px 0px; padding: 0px 22px 0px 0px;  text-decoration: none; text-align: right;}
ul#menu a:hover {
	color: #000000; background-color: #e4e4e4;}

/*------------------end Menu----------------*/
/*------------subtitle Menu----------------------*/
ul#menu ul {
	margin: 0px 0px 0px 0px; padding: 2px 0px 2px 0px; text-align: right; list-style-type: none;}
ul#menu ul li {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 18px;}
ul#menu ul a {
	display: block; margin: 0px 0px 0px 0px; padding: 2px 10px 2px 0px; color: #555555; text-decoration: none;}
ul#menu ul a:hover {
	color: #000000; font-weight: bold;}

.menu_1 {
        color: #ffffff; font-weight: bold; background: #199bff url(images/puce_square.png) no-repeat 96% 50%; border-bottom: 1px dashed #ffffff;}
.menu_2 {
        color: #ffffff; font-weight: bold; background: #66bcff url(images/puce_square.png) no-repeat 96% 50%; border-bottom: 1px dashed #ffffff;}
.menu_3 {
        color: #444444; font-weight: bold; background: #b3deff url(images/puce_square.png) no-repeat 96% 50%; border-bottom: 1px dashed #ffffff;}
.menu_4 {
        color: #444444; font-weight: bold; background: #e6f4ff url(images/puce_square.png) no-repeat 96% 50%; border-bottom: 1px dashed #ffffff;}
.menu_5 {
        color: #555555; font-weight: bold; background: #f0f0f0 url(images/puce_square.png) no-repeat 96% 50%; border-bottom: 1px dashed #ffffff;}

/*---------------end subtitle Menu-----------------------*/

/* ===================================
 Contenu principal
==================================== */

.orange {
	color: #ff8040; text-decoration: none;}
p#print {
	margin: 0px 0px 0px 0px; padding: 0px 10px 3px 0px; font-size: 0.6em; font-weight: bold; text-align: right;}
#title_content {
	margin: 20px 0px 20px 0px; padding: 0px 0px 0px 30px; color: #0090ff; background: url(images/icon_fleche_2.png) no-repeat 0% 50%;}
.title_content_index {
	margin: 20px 0px 20px 0px; padding: 0px 0px 0px 30px; color: #0090ff; background: url(images/icon_fleche_2.png) no-repeat 0% 50%;}
.sous_titre_orange {
	padding: 0px 0px 0px 35px; font-size: 0.9em; color: #ff8040; background: url(images/fleche4.gif) no-repeat 3% 30%;}
.sous_titre_blue {
	padding: 0px 0px 0px 0px; color: #5885bb;}
#slogan {
	color: #6699cc; font-style: italic; font-size: 0.8em; text-align: center;}
#fil {
	margin: 0px 0px 0px 0px; padding: 0px 0px 5px 10px; border-bottom: 1px dashed #c8c8c8;}
.fil_text {
	margin: 0px 0px 0px 0px; padding: 20px 0px 5px 10px; border-bottom: 1px dashed #c8c8c8;}
.lien_fil_bleu {
	color: #6699cc; font-size: 0.64em; text-decoration: none;}
.texte_normal {
	color: #666666; font-size: 0.76em; line-height: 14px;}
.gras_normal {
	color: #666666; font-weight: bold;}
.gras_normal_2 {
	color: #666666; font-weight: bold; font-size: 0.7em;}
.texte_orange {
	color: #ff8040; font-size: 0.7em;}
.texte_orange2 {
	color: #ff8040;}
.gras_orange {
	color: #ff8040; font-weight: bold;}
.gras_orange_2 {
	color: #ff8040; font-weight: bold; font-size: 0.70em;}
.gras_orange_3 {
	color: #ff8040; font-weight: bold; font-size: 0.74em;}
.gras_bleu {
	color: #6699cc; font-weight: bold; font-size: 0.7em;}
.sous_titre_bleu {
	padding: 0px 0px 0px 25px; color: #6699cc; font-weight: bold; font-size: 0.70em; background: url(images/fleche1.gif) no-repeat 0% 50%;}
.lien_orange {
	color: #ff8040; font-size: 0.74em;}
.lien_orange_2 {
	color: #ff8040; font-weight: bold; font-size: 0.78em;}
.ul_liste {
	font-size: 0.7em;}
.lien_bleu {
	color: #6699cc;}
.lien_bleu_underline {
	color: #6699cc; text-decoration: underline;}
.lien_orange_plan {
	margin: 0px 0px 0px 0px; padding: 10px 0px 10px 0px; color: #ff8040; font-size: 0.88em;}
.lien_bleu_plan {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 15px; color: #6699cc; font-size: 0.84em;}
.lien_bleu_a {
	color: #6699cc;}
.lien_noir_plan {
	margin: 0px 0px 0px 0px; padding: 10px 0px 10px 40px; color: #666666; font-size: 0.8em;}
.lien_noir_a {
	color: #666666;}
.ul_orange {
	font-size:0.68em;}
.ul_gras_orange {
	color: #ff8040; font-weight: bold;}
.ul_normal_lettre {
	font-size:0.7em; list-style-type: lower-alpha;}
.savoir_plus_bleu {
	color: #6699cc; font-weight: bold; font-size: 0.76em;}
.center {
	text-align: center;}
.box_download {
	margin: 0px 0px 10px 0px; padding: 0px 35px 0px 0px; float: left; text-align: center;}
.comble {
	height: 15em;}
.comble_1 {
	height: 12em;}
.comble_2 {
	height: 5em;}
.comble_3 {
	height: 2.5em;}
#return_top {
	 margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#clear {
	clear: both;}
/*---------------------------------------------------------------------------*/
.ligne {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-bottom: 1px solid #cccccc;}
.flottant {
           margin: 0px 0px 0px 10px; padding: 0px 0px 0px 0px; float: right; }
ul#index {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none;}
ul#index li {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 20px; background: url(images/puce_tiret.gif) no-repeat 1% 10%; color: #666666; font-size: 0.76em; line-height: 14px;}
.sub_list {
   margin: 0px 0px 0px 60px; padding: 0px 0px 0px 0px; color: #666666; font-size: 0.76em; list-style-type: none;}
.sub_list li {
   margin: 0px 0px 0px 0px; padding: 0px 0px 0px 20px; background: url(images/puce_tiret.gif) no-repeat 1% 10%;}

/* =============================
 Bottom navigation
============================= */

#centre {
	 clear: both; margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; background-color: #e0e0e0; text-align: center;}
	 
ul#barnav_bottom_2 {
	margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; ; color: #ffffff; list-style-type: none; font-size: 0.72em; line-height: 30px; border-top: 1px dashed #ffffff; clear: both;}
ul#barnav_bottom_2 li {
	display: inline; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; color: #ffffff;}
ul#barnav_bottom_2 li + li a {
	text-decoration: none; border-left: 1px solid #ffffff;}
ul#barnav_bottom_2 a:hover {
	color: #000000;}

.off {
     color: #707070; text-decoration: none; padding: 0px 5px 0px 5px;}
/*---------------------------------------------------------------------------*/
#footer_center {
        clear: both; margin: 0px auto 0px auto; padding: 20px 0px 1px 0px; width: 100%; background-color: #ededed;}
#footer {
        margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; width: 100%;}

#footer_raw1 {
        float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#footer_raw1_marge {
        margin: 0px 10px 0px 0px; padding: 0px 10px 10px 10px;}
#footer_raw2 {
        float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#footer_raw2_marge {
        margin: 0px 10px 0px 0px; padding: 0px 10px 10px 10px;}
#footer_raw3 {
        float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#footer_raw3_marge {
        margin: 0px 10px 0px 0px; padding: 0px 10px 10px 10px;}
/*---------------------------------------------------------------------------*/
.footer_menu {
	margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; font-size: 0.72em; font-weight: bold; list-style-type: none;}
.footer_menu li {
	margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; line-height: 12px; border-bottom: 1px dashed #a7a7a7;}
.footer_menu a {
	display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 180px; text-decoration: none; color: #4c4c4c;}
.footer_menu a:hover {
	color: #000000;}
	
.footer_submenu {
	margin: 5px 0px 5px 0px; padding: 0px 0px 0px 0px; font-size: 0.72em; list-style-type: none;}
.footer_submenu li {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 14px;}
.footer_submenu a {
	display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 220px; text-decoration: none; color: #707070;}
.footer_submenu a:hover {
	color: #000000;}

#footer_bottom {
        line-height: 1px; clear: both;}

.clearfix:after {
	content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/* =============================
 Images
============================= */

.img_right {
	float: right; border: 0px; margin: 5px 5px 5px 5px;}
.img_right_energy {
	float: right; width: 100px; height: 183px; border: 0px; margin: 5px 5px 5px 5px;}
.img_right_haut {
	 float: right; width: 20px; height: 18px; border: 0px; margin: 5px 5px 5px 5px;}
.img_right_index {
	float: right; border: 0px; margin: 5px 5px 5px 5px;}
.img_right_clear {
	float: right; clear: both; border: 0px; margin: 5px 5px 10px 10px;}
.img_left {
	float: left; border: 0px; margin: 5px 10px 5px 5px;}
.img_left_index {
	float: left; border: 0px; margin: 0px 10px 0px 5px;}
.img_left_clear {
	float: left; clear: both; border: 0px; margin: 5px 5px 5px 5px;}
a img {
	border: 0px;}
	
.box_img {
  display: flex; 
  flex-wrap: wrap;
  flex-flow: column wrap;
  justify-content: center; 
  align-items: center; 
  gap: 10px; }

.box_img div {
 margin: 0;
  width: 300px; }

.box_img img {
  margin: 20px 0px 10px 0px;
  max-width: 100%; 
  height: auto; }


/* =============================
 Media queries
============================= */

@media (max-width: 1920px) {

.marge_brand {
       margin: 0% 0% 0% 0%; padding: 0% 22% 0% 22%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 22% 0% 22%;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 22% 0% 22%;}
.marge_footer {
       clear: both; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 28%;}

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

.marge_brand {
       margin: 0% 0% 0% 0%; padding: 0% 18% 0% 18%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 18% 0% 18%;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 18% 0% 18%;}
.marge_footer {
       clear: both; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 23%;}

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

.marge_brand {
       margin: 0% 0% 0% 0%; padding: 0% 10% 0% 10%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 10% 0% 10%;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 10% 0% 10%;}
.marge_footer {
       clear: both; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 15%;}

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

.marge_brand {
       margin: 0% 0% 0% 0%; padding: 0% 5% 0% 5%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 5% 0% 5%;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 5% 0% 5%;}
.marge_footer {
       clear: both; margin: 0% 0% 0% 0%; padding: 0% 0% 0% 10%;}

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

.marge_brand {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 5%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}
.marge_footer {
       clear: both; margin: 0% 0% 0% 0%; padding: 0% 20% 0% 20%;}
#brand_box a {
       line-height: 1.9em; font-size: 1.5em;}

#footer_raw1 {
        float: none;}
#footer_raw2 {
        float: none;}
#footer_raw3 {
        float: none;}
}
/*------------------------------------*/

@media (max-width: 782px) {

.marge_brand {
       padding: 0% 0% 0% 5%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}
.marge_footer {
       padding: 0% 25% 0% 25%;}

#img_logo {
          width: 14%;}
#brand_box a {
           line-height: 1.8em; font-size: 1.4em;}

#footer_raw1 {
        float: none;}
#footer_raw2 {
        float: none;}
#footer_raw3 {
        float: none;}

}
/*------------------------------------*/
@media screen and (max-width: 767px) {

.marge_brand {
       padding: 0% 0% 0% 5%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 5% 0% 5%;}
.marge_footer {
       padding: 0% 20% 0% 20%;}

#img_logo {
          width: 14%;}
#brand_box a {
           line-height: 1.8em; font-size: 1.3em;}

#col_menu {
          float: none; width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#col_principal {
          float: none; width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#marge_int {
          border-left: 0px;}

/*Display 'menu' link*/
	.show-menu {
		display:block;
		text-align: center;

	}
	#menu {
       display: none;
       }

/*-------------------title left menu---------------------*/
ul#menu li {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 21px; }
ul#menu a {
	display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 22px; text-align: left;}

/*------------------end title left menu----------------*/
/*------------subtitle left menu----------------------*/
ul#menu ul {
	margin: 0px 0px 0px 0px; padding: 2px 0px 2px 0px; list-style-type: none;}
ul#menu ul li {
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 18px;}
ul#menu ul a {
	display: block; margin: 0px 0px 0px 0px; padding: 2px 10px 2px 15px; color: #555555; text-decoration: none;}
ul#menu ul a:hover {
	color: #000000; font-weight: bold;}

.menu_1 {
        color: #ffffff; font-weight: bold; background: #199bff url(images/puce_square.png) no-repeat 1.5% 50%; border-bottom: 1px dashed #ffffff;}
.menu_2 {
        color: #ffffff; font-weight: bold; background: #66bcff url(images/puce_square.png) no-repeat 1.5% 50%; border-bottom: 1px dashed #ffffff;}
.menu_3 {
        color: #444444; font-weight: bold; background: #b3deff url(images/puce_square.png) no-repeat 1.5% 50%; border-bottom: 1px dashed #ffffff;}
.menu_4 {
        color: #444444; font-weight: bold; background: #e6f4ff url(images/puce_square.png) no-repeat 1.5% 50%; border-bottom: 1px dashed #ffffff;}
.menu_5 {
        color: #555555; font-weight: bold; background: #ededed url(images/puce_square.png) no-repeat 1.5% 50%; border-bottom: 1px dashed #ffffff;}

/*---------------end subtitle left menu-----------------------*/
#footer_raw1 {
        float: none;}
#footer_raw2 {
        float: none;}
#footer_raw3 {
        float: none;}
}
/*------------------------------------*/
@media (max-width: 480px) {
.marge_brand {
       padding: 0% 0% 0% 5%;}
.marge_ligne {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; border-bottom: 5px solid #ededed;}
.marge_container_menu_principal {
       margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%;}
.marge_footer {
       padding: 0% 10% 0% 10%;}
#img_logo {
          width: 17%;}
#brand_box a {
           line-height: 1.8em; font-size: 1.2em;}
.img_right_index {
	 width: 50%;}

.footer_menu {
	 font-size: 0.7em;}
.footer_menu li {
	 line-height: 14px;}

.footer_submenu {
	 font-size: 0.7em;}
.footer_submenu li {
	 line-height: 20px;}
.footer_menu a {
	 width: 100%;}

#centre {
	margin: 0px auto 0px auto; padding: 0% 33% 0% 33%;}
ul#barnav_bottom_2 {
	font-size: 0.7em; line-height: 30px;  clear: both;}
ul#barnav_bottom_2 li {
	display: block; border-bottom: 1px dashed #ffffff;}
ul#barnav_bottom_2 li + li a {
        border-left: 0px solid #ffffff;}
.img_adapt {
	width: 100%;}
.img_right {
	 width: 50%;}
.img_right_clear {
	width: 100%;}
}
/*------------------------------------*/
@media (max-width: 360px) {

}