@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;}

html, body{
	font-family: '微软雅黑', Arial, Helvetica, sans-serif;
	color:#313131;}


.centrage{
	width:95%;
	margin-left:2.5%;
	height:auto;
	}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

HEADER

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


header{
	width:100%;
	height:128px;
	background-color:#FFF;}


.logo{
	width:300px;
	height:84px;
	position:relative;
	margin:auto;
	top:19px;}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

NAV

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

nav{
	background-color:#B3081D;
	height:66px;
	z-index: 9999;
	font-weight:100;}



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

SLIDE

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


#slideshow{
	width:100%;
	z-index:1;
	}

/*///////
RESPONSIVESLIDE.CSS
///////*/

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  height: auto;
  position:relative;
  margin:auto;
  text-align:center;
  width: 100%;
  border: 0;
  }
  
/*///////
DEMO.CSS
///////*/

.rslides {
  margin: 0 auto 40px;
  }

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }

.callbacks img {
  display: block;
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  border: 0;
  }


@media screen and (min-width: 660px) {
.callbacks .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
  }
  
.legende{
	width:100%;
	position:relative;
	margin:auto;}
}


@media screen and (max-width: 660px) {
.callbacks .caption{
	 display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;}

.legende{	display:inherit;}
}

.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("images/themes.gif") no-repeat left top;
  }

@media screen and (min-width: 660px) {
.callbacks_nav {
	top: 44%;
}
}

@media screen and (max-width: 660px) {
.callbacks_nav {
	top: 220px;
 margin-top: -15px;
}	
}

.callbacks_nav:active {
  opacity: 1.0;
  }

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

BLOC HOME

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.content-collections{
	width:100%;
	height:254px;
	background-color:#FFF;
	text-align:center;}


@media screen and (min-width: 760px) {	
.collec-home{
	width:33.33%;
	float:left;
	height:220px;}
}

@media screen and (max-width: 760px) {	
.collec-home{
	width:100%;
	float:left;
	height:220px;}
}
	
.home-bloc-blanc,
.home-bloc-gris{
	wifth:100%;
	height:auto; /*351px - 41 en haut et en bas*/
	background-color:#FFF;
	padding-top:41px;
	padding-bottom:41px;
	float:left;}	


.home-bloc-blanc{
	background-color:#FFF;}	


.home-bloc-gris{
	background-color:#EFEFEF;}


.home-bloc-blanc img,
.home-bloc-blanc .contenu-home,
.home-bloc-gris img,
.home-bloc-gris .contenu-home{
	display:inline-block;
	vertical-align:top;}


@media screen and (min-width: 660px) {		
.home-bloc-blanc img,
.home-bloc-gris img{
	width:40%;}
	
.home-bloc-blanc img:nth-of-type(2){
	float:right;}
	
.home-bloc-blanc img:nth-of-type(1),
.home-bloc-gris  img:nth-of-type(2){display:none;}

	
.contenu-home{
	width:55%;
	height:auto;
	margin-top:19px;
	}
	
.home-bloc-blanc .contenu-home{float:left;}


.home-bloc-gris .contenu-home{float:right;}
}

@media screen and (max-width: 660px) {		
.home-bloc-blanc img,
.home-bloc-gris img{
	width:100%;}
	
.home-bloc-blanc img:nth-of-type(2){
	float:right;}
	
.home-bloc-blanc img:nth-of-type(1),
.home-bloc-gris  img:nth-of-type(2){display:none;}

	
.contenu-home{
	width:100%;
	height:auto;
	margin-top:19px;
	color:orange;
	}
	
.home-bloc-blanc .contenu-home,
.home-bloc-gris .contenu-home{float:left;}

}

.contenu-home h1,
.contenu-home h2,
.contenu-home h3{
	font-size:25px;
	color:#313131;
	margin-bottom:25px;}
	
.contenu-home p{
	font-size:19px;
	color:#313131;
	}

.contenu-home a{
	color:#B2071C;
	height:auto;
	font-size:19px;
	margin-bottom:30px;
	margin-top:30px;
	float:left;}

.contenu-home a:hover{color:#930000;}
/*//////
FOND GRIS
//////*/
.hbb{
	}

.contenu-home{}

/*//////
FOND BLANC
//////*/


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

PAGES

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.titre{
	padding-top:30px;
	padding-bottom:30px;}
	

.page-bloc-blanc,
.page-bloc-gris{
	width:100%;
	background-color:#FFF;
	padding-top:21px;
	padding-bottom:21px;}	


.page-bloc-blanc{
	background-color:#FFF;}	


.page-bloc-gris{
	background-color:#EFEFEF;}

.bloc-70, .bloc-30,
.bloc-80, .bloc-20{
	display:inline-block;
	vertical-align:top;
	}


@media screen and (min-width: 660px) {		

.bloc-70{
	width:66%;
	min-height:20px;
	box-sizing:border-box;
	padding-left:30px;}
	
.bloc-30{
	width:33%;
	min-height:20px;}
	
.bloc-70 img, .bloc-30 img{
	width:100%;
	}
	
.bloc-20{
	width:24%;
	min-height:20px;}


.bloc-80{
	width:75%;
	min-height:20px;
	box-sizing:border-box;
	/*padding-left:30px;*/}


.bloc-80 img{
	width:49.5%;
	display:inline-block;}	
	
.en-ligne img:nth-of-type(2){
	float:right;}
.en-ligne img{
	width:45%;
	vertical-align:top;
	display:inline-block;}
}


@media screen and (max-width: 660px) {		

.bloc-70,
.bloc-30,
.bloc-20,
.bloc-80{
	width:100%;
	min-height:20px;
	box-sizing:border-box;
	}
	
.bloc-70 img, .bloc-30 img{
	width:100%;
	margin-bottom:10px;
	margin-top:10px;

	}
	
.bloc-70{}

.bloc-30{}

.bloc-20{}

.bloc-80{}

.en-ligne img,
.bloc-80 img{
	width:100%;
	display:block;}	

.bloc-80 img:nth-of-type(1) {
	margin-bottom:18px;}	
}


	
	
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

PAGES : TXT TITRE DECO

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.titre h1{
	font-size:22px;
	color:#313131;}
	
.page-bloc-blanc h2, .page-bloc-blanc h3, .page-bloc-blanc h4, .page-bloc-blanc h5,
.page-bloc-gris h2, .page-bloc-gris h3, .page-bloc-gris h4, .page-bloc-gris h5{
	color:#313131;
	font-size:20px;
/*	margin-top:20px;*/
	margin-bottom:20px;}
	
.page-bloc-blanc p,
.page-bloc-gris p{
	font-size:16px;
	color:#313131;}
	
.date:before{
	content:'•';
	margin-left:10px;
	margin-right:4px;}
	

/*//////
histoire valeurs logo
//////*/
@media screen and (min-width: 660px) {	
.logo-fermob-hv{
	float:left;
	margin-top:100px;}
}

@media screen and (max-width: 660px) {	
.logo-fermob-hv{
	display:none;}
}


.bloc-100 {
	width:100%;
	display:inline-block;}


@media screen and (min-width: 660px) {	
.bloc-100 img{
	float:left;
	width:62%;
	display:inline-block;
	margin-right:8%;
	}
	
.bloc-100 h2, .bloc-100 p{
	display:block;
	}

.bloc-100 h2{
	margin-top:100px;}
}


@media screen and (max-width: 660px) {	
.bloc-100 img{
	float:left;
	width:100%;
	display:block;
	margin-right:8%;
	}
	
.bloc-100 h2, .bloc-100 p{
	display:block;
	text-align:center;
	float:left;
	width:100%;
	}

.bloc-100 h2{
	padding-top:20px;}
}



.content-map h3, .content-map h4, .content-map h5{color:#313131;
	font-size:20px;
/*	margin-top:20px;*/
	margin-bottom:10px;}	


.marge{
	margin-top:100px;}

.content-map{
	width:100%;
	min-height:324px;
	background-color:#FFF;
	text-align:center;
	padding-top:20px;}
	
.content-map img{
	margin-bottom:20px;}


.collec-map{
	width:100%;
	float:left;
	min-height:220px;}
	

@media screen and (min-width: 760px) {	
.collec-map p, .collec-map h3, .collec-map h4, .collec-map h5{
	text-align:left;
display:block;
	vertical-align:top;}

.collec-map h3, .collec-map h4, .collec-map h5{
	margin:20px;}

.collec-map img{
	float:left;
	margin-right:8%;
	display:inline-block;}

.collec-map p{
	margin-bottom:30px;}}

@media screen and (max-width: 760px) {	

.collec-map p, .collec-map h3, .collec-map h4, .collec-map h5{
	text-align:center;
	vertical-align:top;
	float:left;
	width:100%;}

.collec-map h3, .collec-map h4, .collec-map h5{
	margin-top:10px;
	background-color:red;}

.collec-map img{
	text-align:center;}

.collec-map p{
	margin-bottom:40px;}}


@media screen and (min-width: 860px) {
.designer{
	width:20%;
	float:left;
	text-align:center;
	margin-top:50px;}
}


@media screen and (min-width: 660px) and (max-width: 860px) {
.designer{
	width:40%;
	text-align:center;
	margin-top:50px;}
	
.designer:nth-of-type(1n+1){
	float:left;}
	
.designer:nth-of-type(2n+2){
	float:right;}
}

@media screen and (max-width: 660px) {
.designer{
	width:20%;
	float:left;
	text-align:center;
	margin-top:50px;}
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

COLLECTIONS

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 660px) {
.collection{
	width:33.33%;
	min-height:100px;
	float:left;
	text-align:center;
	}
}

@media screen and (max-width: 660px) {
.collection{
	width:50%;
	min-height:100px;
	float:left;
	text-align:center;
	}
}
.collection p{
	vertical-align:top;}
	

hr{
	background-color:transparent;
	width:100%;
	height:10px;
	border:none;}

h1, h2, h3, h4, h5, h6{
	font-weight:100;}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

PREFOOTER

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.pre-footer{
	width:100%;
	height:181px;
	background-color:#EFEFEF;
	padding-top:26px;
	box-sizing:border-box;
	float:left;}
	
address{
	margin-top:20px;
	margin-bottom:20px;
	font-size:15px;
	font-style:normal;}


@media screen and (min-width: 660px) {		
.social{
	display:inline-block;
	margin-right:54px;}
}

@media screen and (max-width: 660px) {		
.social{
	display:inline-block;
	width:50%;
	float:left;
	text-align:center;}
}

.social img{
	margin-left:5%;
	margin-right:5%;
	top:8px;
	position:relative;}

.social a{
	color:#000;}
	
.social a:hover{
	color:#313131;}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

FOOTER

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

footer{
	background-color:#B3081D;
color:#FFF;
	width:100%;
	height:83px;
	text-align:center;
	float:left;}

footer p{
	position:relative;
	top:27px;
	color:#FFF;}
	
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

AJOUT APRES MISE EN LIGNE

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/	

.separate{
	width:100%;
	height:20px;}
	
.bloc-33-p,
.bloc-33{
	display:inline-block;
	vertical-align:top;
	}


@media screen and (min-width: 660px) {		
.bloc-33-p,
.bloc-33{
	width:32.5%;
	min-height:20px;
	margin-top:20px;}
}

@media screen and (max-width: 660px) {		
.bloc-33-p{
	width:100%;
	min-height:20px;
	margin-top:20px;
	margin-bottom:20px;}
}

@media screen and (min-width: 480px) and (max-width: 660px) {	
.bloc-33{
	width:49.5%;
	min-height:20px;}
}

@media screen and (max-width: 480px){	
.bloc-33{
	width:100%;
	min-height:20px;}
}
	
.bloc-33-p img,
.bloc-33 img{
	width:100%;
	height:auto;
	text-align:center;
	margin-bottom:20px;
	}
.bloc-33-p p,
.bloc-33 p{
	text-align:left;
	}