html, body {
   height: 100%;
   background:url(images/bg.jpg) top center no-repeat #282828;
   border: 0px solid transparent;
   font-size: 1em; /* Ideal: 16px */
   margin: 0px 0px 0px 0px;
   min-height: 100%;
   padding: 0px 0px 0px 0px;
   width: 100%;
}
.bodypages {
 
   background:url(images/bg-pages.jpg) top center no-repeat;
   
}
.img-haut { text-align:center;}
.rouge {
	color: #FF0000
}
.margin-bottom {margin-bottom:20px;}

a img {
border:0;
outline:none;
}
.maj {text-transform:capitalize}

.titre {
	font-size: 22px;
		font-family: 'Lato', sans-serif;
		font-weight:bold;
}


.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
       -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
.right {
	float: right !important;
	margin-right: 0% !important;
	margin-left: 1%;
}
.left {
	float: left !important;
	
}

.pic {

	overflow:hidden;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}



h1 {	font-family: 'Lato', sans-serif;
font-weight:300;
font-size:20px;
color:#000}


h2 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #fff;
	background: #999;
	padding: 5px;
}


.titre-produit {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 20px;
	color: #F00;
	border-bottom: dotted 1px #000;
	padding: 5px;
}




   #apDiv1 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: auto;
	z-index: 1;
	margin: 0 auto;
}
   #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: -63px;
	top: -26px;
	width: 100%;
	height: 300px;
}
.accroches {
	height:509px;
	width:995px;
	margin:0 auto}
	.accroches img{
	float: right;
	width: auto;
	height: auto;
	margin-left: 100%;
}

.vignettes {
	margin-right: 3%;
	float: left;
	width: 30%;
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
}
.vignettes img{
	max-width: 100%;
	height: auto;
	width: auto;
	margin-bottom: 10px;
}
.remplissage {padding:8px;}

.col-100 {
	float: left;
	width: 100%;
	color: #000;	
}


.col-20 {
	float: left;
	width: 20%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}

.col-35 {
	float: left;
	width: 45%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}
.col-30 {
	float: left;
	width: 25%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}
.col-tiers {
	float: left;
	width: 31.9%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 1%;
}
.img-red {
	border-top: solid 3px #f00;
}
.col-60 {
	float: left;
	width: 71%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}

.col-50 {
	float: left;
	width: 61%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}


.col-intermediaire {
	float: left;
	width: 65%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}
.page-haute {
	height: 1100px !important;
}
.col-40 {
	float: left;
	width: 51%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 8px;
}
.pictos {
	float: left;
	margin: 0px;
	font-size: inherit;
	font-size: 11px;
	text-align: center;
	width: 19.8%;
	margin-top: 5px;
	background: #333;
	color: #FFF;
	border-right: solid 1px #333;
}


.champ {height:30px !important;}
.pictos img {
	padding: 6%;
	border-bottom: solid 2px #f00;
}




img, object, embed, canvas, video, audio, picture {
   max-width: 100%;
   height: auto;
}

.layout-main {
	height: 180px;
	margin: 0px auto 0px auto;
	min-height: 100%;
	width: 100%; /* Ideal: 1024px -> 1024 / 1280 */
}
.header {
	width: 1200px;
	margin: 0 auto;
}

.main {
 /*  height: 50%;*/
  /* min-height: 100%;*/
}

.layout-menu, .layout-adv {
   display: inline-block;
}
.center {text-align:center !important}
.logoresponsive {width:100%;
text-align:center;
display:none}
.logo {
	float: left;
	padding-top: 0px;
	display: inline-block;
}
.baseline {
	width: 524px;
	display: inline-block;
}
.layout-menu {
	color: #FFFFFF;
	width: 100%; /* Ideal: 214px -> 214 / 1024 */
	margin: 0 auto;
	text-align: center;
	font-family: 'Lato', sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	padding-top: 40px;
	padding-left: 20px;
	margin-bottom:40px;
}

  .menunormal {
	   display:none;
	
}

  .menunormal ul {
	   display:none;
	
}





.menu1 ul {
	float: left;
	width: 380px;
	padding-left:60px;
	padding-top:25px;
}

.menu1 li {
   list-style: none;
   font-weight:300;
}


     .menu1 li {
	float: left;
	display: inline-block;
	margin-right: 8%; /* Ideal: 25px -> 25 / 960 */			
			
   
   }


.menu1 li a {
   color: #FFFFFF;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}

/*.menu li a:before {
   content: no;
}*/

.menu1 li a:hover {
   color: #ccc;
}



.menu ul {
	float: left;
	width: 450px;
	padding-top: 20px;
}


     .menu li {
	float: left;
	display: inline-block;
	margin-right: 8%; /* Ideal: 25px -> 25 / 960 */			
			
   
   }
   
   .img-libre {
	float: left;
	margin-right: 5px;
}
.logo-partenaires {
	margin: 1.5% !important;
	padding-left: 2%;
	width: 180px;
		}
		.logo-partenaires img{
	max-width: 120px !important;
	width: auto;
		}

   .img-libre img{
	max-width: inherit;
	width: inherit;
}
   
   
.sep-hor-fine {
	border-bottom: dashed 1px #999;
	width: 100%;
	margin: 10px;
}



.layout-content {
	color: #fff;
	width: 1100px; /* Ideal: 596px -> 596 / 1024 */
	margin: 0 auto;
	background: #fff;
	height: 850px;
}

.layout-adv {
   color: #fff;
   background-color: #000;
   width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
}

.menu, .content, .adv {
   padding: 5px 5px 5px 5px;
}

.menu h1 {
   font-size: 1.5em; /* Ideal: 24px */
}

.menu li {
   list-style: none;
   font-weight:300;
}

.menu li a {
   color: #FFFFFF;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}

/*.menu li a:before {
   content: no;
}*/

.menu li a:hover {
   color: #ccc;
}

.content .content-item {
	border-top: 1px solid #36393D;
	clear: both;
	margin: 0px auto 0px auto;
	padding: 15px 0px 5px 0px;
	text-align: center;
	width: 95%; /* Ideal: 542px -> 542 / 596 */
}

.content .content-item:first-child {
   border: 0px solid transparent;
}

.content .content-item h1 {
   font-size: 1.5em; /* Ideal: 24px */
}

.content .content-item p.description {
   font-size: 0.850em; /* Ideal: 12px */
   font-style: normal;
   font-family: 'Lato', sans-serif;
}
.texte-normal {
	font-size: 14px; /* Ideal: 12px */
	font-style: inherit;
	font-family: 'Lato', sans-serif;
	text-align: left;
	font-weight: normal;
	color: #000;
}

.content .content-item div.article {
   text-align: justify;
}

.content .content-item img.article-image {
   float: left;
   padding: 0px 25px 25px 0px;
   width: 16.107382550335570469798657718121%; /* Ideal: 96px -> 96 / 596 */
}

.adv .adv-item {
   border-top: 1px solid #36393D;
   margin: 0px auto 0px auto;
   padding: 15px 0px 15px 0px;
   text-align: center;
   width: 85.046728971962616822429906542056%; /* Ideal: 182px -> 182 / 214 */
}

.adv .adv-item:first-child {
   border: 0px solid transparent;
}

.adv .adv-item a {
   color: #000000;
   font-style: italic;
}


.sep-hor {
	border-bottom: solid 5px #999;
	width: 100%;
	float: left;
}
.adresse-footer {
	color: #000;
	float: left;
	width: 38%;
	margin: 1%;
}
.liens-footer {
	width: 59%;
	float: left;
	color: #000;
	text-align: right;
	padding-top: 20px;
	font-family: 'Lato', sans-serif;
}
.liens-footer a{
	color: #666 !important;
	text-decoration: none !important;
	padding: 5px;
	border-left: solid 1px #f30;
}
.liens-footer a:hover{
	color: #000 !important;
	text-decoration: none !important;

}
.marge-en-plus {
	margin-right: 5%;
}




@media screen and (min-width: 421px) {
   .menu select {
      display: none;
   }
}

@media screen and (max-width: 1024px) {
  .bodypages {
   background:#FFF;
  
}
html, body {
   
   background:none;
 
}
   
   .layout-main {
      width: 95%;
   }
     .layout-menu {
      display: block;
  margin:0 auto;
      width: 100%;
	  text-align:center;
	  padding-top:0px;;
	
   }
   
    .layout-content {
      width: 100%;
	  margin-top:20px;
	  height:2000px;
   }
   .menunormal {display:inherit;
   padding-top:35px;}
   
   .menunormal ul {
	   display:inherit;
	float: left;
	width: 100%;
	padding-left:60px;
	padding-top:25px;
}

.menunormal li {
   list-style: none;
   font-weight:300;
   float: left;
	display: inline-block;
	margin-right: 4%;
}

.menunormal li a {
   color: #000;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}
.menunormal li a:hover {
   color: #ccc;
}
   
   
   
   
   
   .menu1 ul {
	display:none;
}

.logo {display:none}
.logoresponsive {
	padding-top:75px;
	
	width:100%;
text-align:center;
display:inherit}

   
   
   
   
   
   
   
   
   
  .menu ul {
	display:none;
}


   
   
   
   
   
      .header { width:100%; margin:0 auto;}
   .logo {width:100%;
   height:auto;
   text-align:center;
 
   margin:0 auto;

/*   padding-left:300px;*/}

     #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 0;
	max-width: 100%;
	height: 300px;	


}
.col-20 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-30 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-60 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-40 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}


}

@media screen and (max-width: 960px) {
	
	
	  .bodypages {
   background:#FFF;
  
}

.col-intermediaire {
	float: left;
	width: 95%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}
html, body {
   
   background:none;
 
}
	.col-20 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-30 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-60 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-40 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
	
  
     #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 0;
	max-width: 100%;
	height: 300px;	


}
.accroches {
	max-height:509px;
	width:100%;
	height:auto;
	margin:0 auto}
	.accroches img{
	 float: right;
    height: auto;
    margin-left: 100%;
    max-width: 30%;
}
  
  
  
   .layout-menu {
      display: block;
  margin:0 auto;
      width: 100%;
	  text-align:left;
	  font-size:12px;
	
   }
   
   .layout-content {
      width: 100%;
	  margin-top:20px;
	  height:1000 px;
   }
   .header { width:100%; margin:0 auto;}
   .logo {width:100%;
   height:auto;
   text-align:center;
 
   margin:0 auto;

/*   padding-left:300px;*/}
   
  .menunormal {display:inherit;
   padding-top:35px;}
   
   .menunormal ul {
	   display:inherit;
	float: left;
	width: 100%;
	
	padding-top:25px;
}

.menunormal li {
   list-style: none;
   font-weight:300;
   float: left;
	display: inline-block;
	margin-right: 5%;
}

.menunormal li a {
   color: #000;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}
.menunormal li a:hover {
   color: #ccc;
}
.logoresponsive {width:100%;
text-align:center;
display:inherit}
   
}

@media screen and (max-width: 760px) {
	  .bodypages {
   background:#FFF;
  
}
html, body {
   
   background:none;
 
}
.pictos {
	float: left;
	margin: 0px;
	font-size: inherit;
	font-size: 11px;
	text-align: center;
	width: 98%;
	margin-top: 5px;
	background: #333;
	color: #FFF;
	border-right: solid 1px #333;
}

.liens-footer {
	width: 100%;
	float: left;
	color: #000;
	text-align: right;
	padding-top: 20px;
	font-family: 'Lato', sans-serif;
}
.adresse-footer {
	color: #000;
	float: left;
	width: 95%;
	margin: 1%;
}

.col-tiers {
	float: left;
	width: 95%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 1%;
}

.col-intermediaire {
	float: left;
	width: 95%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}
	.col-20 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-30 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-60 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-40 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}

   .img-libre img{
	max-width: 90%;
	height:auto

}
	
	
	
   .menu {padding-top:32px;}
      .menu select {
      display: inherit;
      width: 96%;
   }
  
    .menunormal {display:none;
   padding-top:35px;}
  
   .layout-main {
      margin: 0px 0px 0px 0px;
      width: 100%;
   }
     .header { width:100%; margin:0 auto;}
	 .logo {width:100%;
   height:auto;
   text-align:center;
 
   margin:0 auto;
   
   
/*   padding-left:300px;*/}

        #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 0;
	max-width: 100%;
	height: 300px;	


}
.logoresponsive {width:100%;
text-align:center;
display:inherit}

}

@media screen and (max-width: 640px) {   
   .bodypages {
   background:#FFF;
  
}
html, body {
   
   background:none;
 
}

.pictos {
	float: left;
	margin: 0px;
	font-size: inherit;
	font-size: 11px;
	text-align: center;
	width: 98%;
	margin-top: 5px;
	background: #fff;
	color: #000;
	border-right: solid 1px #333;
}
.col-tiers {
	float: left;
	width: 95%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 1%;
}

.liens-footer {
	width: 100%;
	float: left;
	color: #000;
	text-align: right;
	padding-top: 20px;
	font-family: 'Lato', sans-serif;
}

.adresse-footer {
	color: #000;
	float: left;
	width: 95%;
	margin: 1%;
}

.col-intermediaire {
	float: left;
	width: 65%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}
.col-20 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-30 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-60 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-40 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}



   
     .menunormal {display:none;
   padding-top:35px;}
   .layout-content {
      display: block;
      height: auto;
      min-height: auto;
      width: 100%;
   }
    .menu {padding-top:32px;}
   .layout-adv {
      display: block;
      height: auto;
      min-height: auto;
      vertical-align: top;
      width: 100%;
   }
   
     .menu select {
      display: inherit;
      width: 96%;
   }
   
   .adv {
      text-align: center;
   }
   
   .adv .adv-item {
      display: inline-block;
   }
   
   .logoresponsive {width:100%;
text-align:center;
display:inherit}
}

@media screen and (max-width: 610px) {
	  .bodypages {
   background:#FFF;
  
}
html, body {
   
   background:none;
 
}
.pictos {
	float: left;
	margin: 0px;
	font-size: inherit;
	font-size: 11px;
	text-align: center;
	width: 98%;
	margin-top: 5px;
	background: #333;
	color: #FFF;
	border-right: solid 1px #333;
}

.col-tiers {
	float: left;
	width: 95%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 1%;
}

.liens-footer {
    color: #000;
    float: left;
    font-family: "Lato",sans-serif;
    padding-top: 20px;
    text-align: left;
    width: 100%;
}
.liens-footer a {
    border-left: 1px solid #f30;
    color: #666 !important;
    float: left;
    padding: 5px;
    text-decoration: none !important;
    width: 100% !important;
}
.adresse-footer {
	color: #000;
	float: left;
	width: 95%;
	margin: 1%;
}
.col-intermediaire {
	float: left;
	width: 95%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}
	
	.col-20 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-30 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-60 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-40 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
	
	
  
       .menunormal {display:none;
   padding-top:35px;}
   .menu ul {
      display: none;
   }
   .menu {padding-top:32px;}
   .menu select {
      display: inherit;
      width: 96%;
   }
   
   .layout-adv {
      display: none;
   }
   
        #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 0;
	max-width: 100%;
height:300px;


}

.vignettes {
	float:none;
	text-align:center;

width:100%;
margin:0 auto;
padding-top:10px;
}
.vignettes img{
	max-width:90%;
height:auto;
width:100%;
}

.logoresponsive {width:100%;
text-align:center;
display:inherit}



}

@media screen and (max-width: 320px) {
	  .bodypages {
   background:#FFF;
  
}

.pictos {
	float: left;
	margin: 0px;
	font-size: inherit;
	font-size: 11px;
	text-align: center;
	width: 98%;
	margin-top: 5px;
	background: #333;
	color: #FFF;
	border-right: solid 1px #333;
}
.adresse-footer {
	color: #000;
	float: left;
	width: 95%;
	margin: 1%;
}

.col-tiers {
	float: left;
	width: 95%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	margin-right: 1%;
}

.liens-footer {
    color: #000;
    float: left;
    font-family: "Lato",sans-serif;
    padding-top: 20px;
    text-align: left;
    width: 100%;
}
.liens-footer a {
    border-left: 1px solid #f30;
    color: #666 !important;
    float: left;
    padding: 5px;
    text-decoration: none !important;
    width: 100% !important;
}
.col-intermediaire {
	float: left;
	width: 65%;
	text-align: left;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
	margin-right: 15px;
}

html, body {
   
   background:none;
 
}
	.col-20 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-30 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-60 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
.col-40 {
	float: left;
	width: 95%;
	color: #000000;
	margin:0 auto;
}
	
   .content .content-item img.article-image {
      display: none;
	  
	  
   }
   
     .menunormal {
	   display:none;
	
}
}