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


/*///////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                             //
//  PAGE PRODUIT                                                                               //
//                                                                                             //
///////////////////////////////////////////////////////////////////////////////////////////////*/


/*-------------------------------------------------------------------------------+
+ Introduction au produit                                                        +
+-------------------------------------------------------------------------------*/

#chapo {
	background-color: #8bbc06;
	background-position: top center;
}

#chapo #intro-produit p, #chapo #intro-produit .bouton_nw {
	position: absolute;
}
	
#chapo #intro-produit p, #chapo #intro-produit p a {
	color: #000;
}
	
#chapo #intro-produit p {
    font-size: 1.5em;
}	

#chapo .debord {
	position: absolute;
	bottom: 0;
	height: 20px;
}

#chapo a.conditions {
   	position: absolute;
    left: 50%;
    font-size: 1.4em;
}
		
@media screen and (max-width: 767px) { /* Mobile */

	#chapo {
		background-image: url(../img/visuels/produits/cartes/carte-enseigne/carte-leroymerlin/vsl-chapo-M.png);
		padding-bottom: 30px;
		margin-bottom: 55px;
	}

	#chapo #intro-produit .conteneur {
   	 	height: 320px;
	}
	
	#chapo #intro-produit .bouton_nw {
		top: 340px;
		left: 50%;
		-ms-transform: translate(-50%,50%);
		-webkit-transform: translate(-50%,50%);
		transform: translate(-50%,50%);
		margin-right: -50%;
	}
	
	#chapo #intro-produit .bouton_nw.bt-filet {
		top: 395px;
		left: 50%;
		-ms-transform: translate(-50%,50%);
		-webkit-transform: translate(-50%,50%);
		transform: translate(-50%,50%);
		margin-right: -50%;
	}
	
	#chapo .debord {
		display: block;
    	background: url(../img/divers/debord-chapo.png) no-repeat center bottom;
    	width: 100%;
	}

	#chapo a.conditions {
		top: 470px;
	    margin-left: -78px;
	}
	
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	#chapo {
		padding-bottom: 90px;
	}

}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	#chapo #intro-produit .conteneur {
	    height: 290px;
	}
	
	#chapo {
		background-image: url(../img/visuels/produits/cartes/carte-enseigne/carte-leroymerlin/vsl-chapo-T.png);
 	}

	#chapo #intro-produit .bouton_nw {
	    top: 205px;
	    left: 50%;
	    margin-left: -280px;
	}
	
	#chapo #intro-produit .bouton_nw.bt-filet {
	    top: 205px;
	    left: 50%;
	    margin-left: -30px;
	}

	#chapo a.conditions {
	    top: 150px;
	    margin-left: 33px;
	}
	
}

@media screen and (min-width: 1221px) { /* Bureau */

	#chapo {
		background-image: url(../img/visuels/produits/cartes/carte-enseigne/carte-leroymerlin/vsl-chapo-D.png);
	}

	#chapo #intro-produit .conteneur {
	    height: 290px;
	}
	
	#chapo #intro-produit .bouton_nw {
		top: 113px;
    	left: 570px;
	}
	
	#chapo #intro-produit .bouton_nw.bt-filet {
		top: 184px;
    	left: 570px;	
	}

	#chapo a.conditions {
	    top: 184px;
	    margin-left: -223px;
	}
	
}



/*-------------------------------------------------------------------------------+
+ Avantages produit                                                              +
+-------------------------------------------------------------------------------*/

.avantages-produit article .liste-avantage .avantage .titre .picto {
	color: #8bbc06;
	border: 2px solid #8bbc06;
}

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

	.avantages-produit h1 {
	    padding: 106px 0 10px 0;
	    font-size: 2.4em;
	}

}



/*-------------------------------------------------------------------------------+
+ Exemples                                                                       +
+-------------------------------------------------------------------------------*/

.exemples .precision {
	font-size: 1.2em;
}

.exemples .exemple-simple p strong {
    color: #8bbc06;
}

@media screen and (max-width: 767px) { /* Mobile */
	
	.exemples .precision {
		margin-top: 10px;
	}

	.exemples .exemple-simple {
	   	margin: 0 auto 20px auto;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	.exemples .exemple-simple {
	   	margin: 0 auto 30px auto;
	}

	.exemples .carrousel {
		margin-bottom: 0;
	} 
		
}

@media screen and (min-width: 1221px) { /* Bureau */
	
	.exemples .exemple-simple {
	   	margin: 0 0 -515px 10px;
	}
	
	.exemples .exemple-simple h3 {
	   	padding: 45px 0 15px 0;
	}
	
	.exemples .carrousel-exemples {
		margin-bottom: 0;
		padding: 45px 0 15px 0;
	}

	.exemples .exemple-simple, .exemples .carrousel-exemples .exemple {
		min-height: 460px;
	}	
	
	.exemples .carrousel-exemples .exemple:first-child {
	   	margin-left: 570px;
	}
	
}



/*-------------------------------------------------------------------------------+
+ Bonnes raisons                                                                 +
+-------------------------------------------------------------------------------*/
	
@media screen and (max-width: 767px) { /* Mobile */

	.bonnes-raisons .liste-raisons .raison .titre .fond-picto .typo-varela {
	    font-size: 1.5em;
	}

}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	.bonnes-raisons .liste-raisons .raison .titre .fond-picto .typo-varela {
	    font-size: 2.5em;
	}
	
}



/*-------------------------------------------------------------------------------+
+ FAQ                                                                            +
+-------------------------------------------------------------------------------*/

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

	#zone-faq {
		margin: 40px auto;
	}
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	#zone-faq {
		margin: 90px auto;
	}
	
}



/*-------------------------------------------------------------------------------+
+ Rebonds                                                                        +
+-------------------------------------------------------------------------------*/

.rebonds {
	background-color: #ebebeb;
}



/*-------------------------------------------------------------------------------+
+ Mentions legales                                                               +
+-------------------------------------------------------------------------------*/

#mentions-legales {
	background-color: #ebebeb;
}