@import url("//hello.myfonts.net/count/38dbaf"); /* IMPORTANT ! = page view counter */

/* ## TYPOGRAPHY ############################################################# */
@font-face {
    font-family: 'CalvertMTStd-Light';
    src: url('../font/38DBAF_0_0.eot');
    src: url('../font/38DBAF_0_0.eot?#iefix') format('embedded-opentype'),
    url('../font/38DBAF_0_0.woff2') format('woff2'),
    url('../font/38DBAF_0_0.woff') format('woff'),
    url('../font/38DBAF_0_0.ttf') format('truetype');
}
@font-face {
    font-family: 'CalvertMTStd';
    src: url('../font/38DBAF_1_0.eot');
    src: url('../font/38DBAF_1_0.eot?#iefix') format('embedded-opentype'),
        url('../font/38DBAF_1_0.woff2') format('woff2'),
        url('../font/38DBAF_1_0.woff') format('woff'),
        url('../font/38DBAF_1_0.ttf') format('truetype');
}
@font-face {
    font-family: 'CalvertMTStd-Bold';
    src: url('../font/38DBAF_2_0.eot');
    src: url('../font/38DBAF_2_0.eot?#iefix') format('embedded-opentype'),
        url('../font/38DBAF_2_0.woff2') format('woff2'),
        url('../font/38DBAF_2_0.woff') format('woff'),
        url('../font/38DBAF_2_0.ttf') format('truetype');
}

/* ## STRUCTURE ########################################################## */
.ftlHTML {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#000;
    padding:0 0 20px 0;

}
/* ## HELPERS ########################################################## */
.rouge{
    color:#ed1c27 !important;
}
.vert{
    color:#009444 !important;
}
.gris{
	color:#747474;
}
.block{
    display:block;
}
/* ## ELEMENTS RECURENTS & Styles communs ################################## */
.norm{
	font-size:0.9em;
    line-height:1.4;
	list-style-type: none;
    padding:0;
    margin:0.8em 0;
}
.sectionTitle + .norm{
	margin-top:0;
}
.normLk{
	color:inherit;
	text-decoration: underline;
}
.normLk:hover{
	color:inherit;
	text-decoration: none;
}
.ftlHTML .btn {
    display:inline-block;
    background-color:#ed1c27;
    color:#FFF;    
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    font-style:normal;
    line-height: 1;
    white-space: nowrap;
    border-radius: 3px;
    padding: 1.15em 1.5em 1.1em 1.5em;
    text-align: center;
    text-decoration: none;
}
.ftlHTML .btn:hover{
    background-color: #ca1821; 
}
.ftlHTML .btn--blue{
	background-color: #005EAD;
}
.ftlHTML .btn--blue:hover{
	background-color:#004d8b;
}
.globalLink{
	text-align:center;
	margin:1.25em auto 2em auto;
}
.zoneLink:hover{
	opacity:0.8;
}
.wShadow,
.blkSelection{
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

/* ## HEADER ############################################################# */
.sectionHeader {
	background:url(../images/deco/bg-header-desktop.jpg) no-repeat top right;
	padding:0.5em 0 2.5em 0;
    margin-bottom:2em;
}

	.sectionHeader-title{
		max-width:360px;
		font-family:'CalvertMTStd-Bold', Georgia, Times, serif;
		font-size:1em;
		font-weight:normal;
		line-height:1;
		margin: 0;
	}
		.sectionHeader-title-label-part1{
			display: block;
			font-size:2.05em;
			line-height:1.3;
		}
		.sectionHeader-title-label-part2{
			display: block;
			font-size:1.5em;
			line-height:1.3;
			max-width:13em;
		}
		.sectionHeader-title-label-part2 img{
			height:calc( (36 / 30) * 1em);
			vertical-align: -0.25em;
		}
	.sectionHeader-subtitle {
		max-width:360px;
		color:#009444;
		font-size:0.9em;
		font-weight: 700;
		line-height:1.5em;
		margin:1em 0 0 0;
	}

/* ## MAIN # Commons ##################################################### */
/* ## Titres & text ## */
.sectionTitle{
    font-family:'CalvertMTStd-Bold', Georgia, Times, serif;    
    font-weight:normal;
    font-size:1.3em;
    line-height:1.1;
    padding:0;
    margin:2em 0 0.5em 0;
}
/*.sectionTitle:first-child{
	margin-top:0;
}*/
.sectionHeader + .sectionTitle{
    margin-top:1.5em;
}
.sectionTitle:first-child{
    margin-top:0;
}
.sectionSubtitle{
    font-size:0.9em;
	color:#747474;
    line-height:1.4;
    padding:0;
    margin: 0.65em 0 0.9em 0;
}
.blkTitle{
	text-align: center;
	font-size:1.1em;
	font-weight:700;
	margin:1em 1.5em ;
}

/* ## Bandeaux promo ## */
.sectionBanner{
	display:block;
    margin:1.75em auto;
}
.sectionHeader + .sectionBanner,
.sectionTitle + .sectionBanner{
    margin-top:0;
}
.sectionBanner a:hover,
a.sectionBanner:hover{
    opacity:0.8;
}
	.sectionBanner img{
		display:block;
		margin:0 auto;
		max-width:100%;
	}
.sectionBanner--withPic{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color:#000;
	font-size:0.9em;
	font-weight:700;
	line-height:1.1;
	text-decoration: none;
	padding:1em 0.2em ;
}
	.sectionBanner--withPic img{
		height:1.2em;
		width:auto;
		margin:0.25em;
	}
	.sectionBanner--withPic span{
		display: inline-block;
		white-space: nowrap;
		margin:0.25em;
	}

/* ##  Slider  ## */
/* = fleches du slider */
.slick-prev:before,
.slick-next:before{
    border-color:#000;
}
/* = pager du slider */
.slick-dots li button{
    background-color: #DDD;
}
.slick-dots li.slick-active button{
    background-color: #008391;
}
/* = Commons */
.sliderBase{
	overflow: hidden;
}
.partialSliderBase{
	display:flex;
	justify-content: flex-start;
	align-items: stretch;
	margin:-1.2em -1.2em 0 0;
}
	.partialSliderBase > div{
		margin:1.2em 1.2em 0 0;
	}	

/* ###  Blocks ### */
/* # */
.whatIsIt{
	display:flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top:1em;
}
	.whatIsIt-visuel{
		flex-basis: 42.4%;
		content:"";
		background:url(../images/deco/cap-ecowatt-desktop.jpg) no-repeat center center ;
		background-image: cover;
	}
	.whatIsIt-main{
		flex-basis:57.6%;
		padding-left:1.2em;
	}
		.whatIsIt-main p{
			font-size:0.9em;
			line-height:1.4;
			margin:1.1em 0 0 0;
		}
		.whatIsIt-main p:first-child{
			margin-top:0;
		}
/* # */
.checkList{
    text-align:left;
	list-style-type: none;
	padding:0;
	margin:1em 0 1.3em 0;
}
	.checkList-item{
		background:url(../images/pictos/picto-check.svg) no-repeat left center;
		background-size:calc( ( 17.5 / 16 ) * 1em);
		font-size:0.8em;
		font-weight:700;
		line-height:1.4;
		position: relative;
		padding:0 0 0 2em;
		margin:0;
	}
	.checkList-item:not(:first-child){
		margin:1em 0 0 0 ;
	}   

/* # */
.wrap2cols{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top:1em;
	margin-bottom:2em;
}
	.wrap2cols > div{
		flex-basis:calc( (100% - ( 2 * 1.2em) ) / 2);
	}
	.wrap2cols > div:not(:first-child){
		margin-left:1.2em;
	}


/* # */
.advicesDeco{
	width:100%;
	margin:0;
}
.advicesList{
	list-style-type: none;
	padding:0 0 2em 0;
	margin:0 auto;
}
	.advicesList-item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin:2em 0 0 0;
	}
	.advicesList-blkPicto{
		flex-basis:24% ;
		padding:0 5%;
	}
		.advicesList-picto{
			display:block;
			margin:0 auto;
			max-width:2.5em;
		}
	.advicesList-label{
		flex-basis:76% ;
		padding:0  8% 0 0;
		font-size: 0.8em;
		line-height: 1.4em;
		margin:0;
	}
/* = Selection Produits, Categories .selectionList  */		
 .partialSliderBase--selection .blkSelection{
	flex-basis:calc( ( 100% - ( 3 * 1.2em ) ) / 3);
 }
	.blkSelection{
		/*flex-basis:calc( ( 100% - ( 4 * 1.2em ) ) / 4);*/
		border-radius:3px;
		text-align:center;		
		padding:4px;
	}
	.blkSelection--category {
		background-color: #FFF;
	}
		.blkSelection--category .blkSelection-visuel{
			background-color: #F1F1F1;
			border-radius:3px;
			padding:0  ;
		}
			.blkSelection-visuel img{
				display:block;
				max-width:100%;
				margin:0 auto;
			}
		.blkSelection-label{
			display:block;
			background-color: #FFF;
			border-radius:3px;
			padding:0.8em 0.2em 0.7em 0.2em;
			margin:0;
		}
			a.blkSelection-label,
			a:hover.blkSelection-label,
			.blkSelection-label a,
			.blkSelection-label a:hover{
				display:block;
				color:inherit;
				text-decoration:none;
			}
			.blkSelection-label-category{
				display:block;
				color:#353535;
				font-size:0.8em;
				font-weight:700;
				font-style: normal;
				line-height:1.2;
				padding:0;
				margin:0 0 0.3em 0;
			}
			.blkSelection-label-product{
				display:block;
				padding:0;
				margin:0;
			}
				.blkSelection-label-product-family{
					display:block;
					color:#747474;
					font-size:0.7em;
					margin:0 0 0.3em 0;
				}
				.blkSelection-label-product-name{
					display:block;
					min-height: 2.3em;
					color:#353535;
					font-size:0.8em;
					font-weight: 700;
					text-transform: uppercase;
					margin:0;
				}
			.blkSelection-label-price{
				display:block;
				color:#000;
				font-size:1.3em;
				font-weight:700;
				margin:0.3em 0 0 0;
			}	



/* ## Mentions légales ## */
.mentions-legales {
    padding:1.8em 1.8em;
    font-size: 0.6em;
    color: #989898;
    background-color: #F2F2F2;
    margin:2.5em 0;
}
    .mentions-legales dl,
	.mentions-legales dt,
	.mentions-legales dd{
		padding:0;
        margin:0;
    }
	.mentions-legales dt{
		font-weight:500;
	}
    .mentions-legales p{
        margin:1em 0 0 0;
    }

/* ## fonctionnement plié-deplié ## */
.js-publiAccordionLight-toggle{
    cursor: pointer;
}
.js-publiAccordionLight-content{
    display: none;
}
.js-publiAccordionLight-content.js-publiAccordionLight-content--default {
    display: block;
}

/* ############################################################################################ */
/* ==== RESPONSIVE behaviour ================================================================== */
/* ############################################################################################ */

@media (max-width: 767px){ /* ================================================================ */
	/* ## STRUCTURE ##################################### */
	.ftlHTML{
		font-size:18px;
		max-width:640px;
		margin:0 auto
	}
	#dcom_main_container .site .ftlHTML{ /* template Darty menu Mobile */
		width: 100vw;
	}
	#dcom_main_container > table .ftlHTML{ /* template Darty header XXL */
		width:calc(100vw - 20px);
	}
	#dcom_main_container > table{
		background-color:#FFF !important;
	}
	.withGuttersOnMobile{
		width:90.625vw;
		max-width:580px;
		margin-left:auto;
		margin-right:auto;
	}   
	.ftlHTML img{
		max-width:100%;
	}

 /* ## HEADER ########################################### */
	.sectionHeader {
		background:url(../images/deco/bg-header-mobile.jpg) no-repeat top center;
		background-size:100%;
		padding-top:39.0625%;
		padding-bottom:0;
	}
		.sectionHeader-title{
			max-width:unset;
			margin:0.5em auto;
		}
		.sectionHeader-subtitle{
			max-width:unset;
		}
 /* ## MAIN ############################################# */ 
	/* ## */
	.sectionTitle {
		font-size: 1.15em;
		margin-bottom:0.6em;
	}
	.sectionSubtitle {
		font-size: 0.8em;
	}

	/* ## */
	.partialSliderBase{
		flex-wrap:wrap;
	}
	/**/
	/* ## */
	.whatIsIt{
		display:block;
	}
		.whatIsIt-visuel{
			height:0;
			padding-top:33%;
			background:url(../images/deco/cap-ecowatt-mobile.jpg) no-repeat center center ;
			background-size: 100%;
			margin-bottom:1.5em;
		}
		.whatIsIt-main{
			padding-left:0;
		}
	/* ## */
	.wrap2cols{
		display:block;
	}
	.wrap2cols > div:not(:first-child){
		margin-top:1.2em;
		margin-left:0;
	}	
	/* ## */
	.mentions-legales {
		padding: 1em 2em;
		font-size: 0.8em;
	}
}

@media (max-width: 480px){  /* ================================================================ */
	/* ## */
    .ftlHTML{
        padding:0 0 1.5em 0;
        font-size:15px;
    }
    /*.ftlHTML .btn {
        font-size: 0.6em;
    }*/
	/* ## */
	.sectionHeader-title-label-part1{
		font-size:2.5em;
	}
	/* ## */
	.sliderBase,
	.partialSliderBase{
		flex-wrap:nowrap;
		width:100vw;
		margin:0 -1em 0 0;
	}
	.sliderBase > div,
	.partialSliderBase > div{
		margin:0 1em 0 0;
	}
		.sliderBase .slick-list,
		.partialSliderBase .slick-list{
			width:100vw;		
			padding-top:2px !important;
			padding-bottom:6px !important;
			margin-right:0;
			margin-left:0;
		}
			.sliderBase .slick-track,
			.partialSliderBase .slick-track{ /* si slidesToShow: x.4 => position de depart decalee */
				left:1em;
			}
				.sliderBase .slick-track > div:last-child,
				.sliderBase .slick-track > li:last-child,
				.partialSliderBase .slick-track > div:last-child,
				.partialSliderBase .slick-track > li:last-child{
					margin-right:2em ; /* permet de laisser un espace à droite apres la derniere slide */
				}
	.slick-dots {
		width: calc(100% - 1em);
	}			

}

@media (max-width: 360px){  /* ================================================================ */
	/* ## */
    .ftlHTML{
		font-size:13px;
	}
}