@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;
}
.block{
    display:block;
}
/* ## ELEMENTS RECURENTS ################################################ */
.ftlHTML .btn {
    display:inline-block;
    background-color:#ed1c27;
    border-bottom: 3px solid;
    border-color: #ca1821;  
    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: 1em 3em 0.85em 3em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}
.ftlHTML .btn:hover{
    background-color: #ca1821; 
}
/*.zoneLink:hover{
	opacity:0.8;
}*/
.addBasket{
	position:relative;
}
.addBasket:hover:after{
	display:block;
	content:"";
	width:2.4em;
	height:2.4em;
	background:url(../images/pictos/picto-addToBasket.png) no-repeat 0 0;
	background-size:100%;
	position:absolute;
	bottom:0.8em;
	right:0.8em;
}
/* ## HEADER ############################################################# */
.sectionHeader {
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding:0.5em 0 1em 0;
    margin-bottom:0;
}
	.sectionHeader-main{
	}
	.sectionHeader-aside{
		flex-basis:38%;
		max-width:380px;
	}
		.sectionHeader-title{
			font-size:1em;
			line-height:1;
			margin: 0 ;
		}
			.sectionHeader-title-label0{
				display:block;
				font-size:1em;
				font-weight:700;
				line-height:1.1;
				color:#13A0B2;
				margin-bottom:0.25em;
			}
			.sectionHeader-title-label{
				display:block;
				font-family:'CalvertMTStd-Bold', Georgia, Times, serif;
				font-weight:normal;
				font-size:3em;
				line-height:1.1;
			}
		.sectionHeader-subtitle {
			margin:0.6em 0 0 0;
		}
			.sectionHeader-subtitle strong,
			.sectionHeader-subtitle em{
				display:inline-block;
				font-size:0.9em;
				vertical-align:center;
				padding-top:0.1em;
				padding-bottom:0.2em;
			}
			.sectionHeader-subtitle strong{
				background-color: #ED1C27;
				color:#FFF;
				border-radius: 3px;
				font-weight: 700;
				padding-left:1em;
				padding-right:1em;
				margin:0 0 0.5em 0;
			}
			.sectionHeader-subtitle em{
				color:#747474;
				font-style: normal;
				padding:2px 5px 4px 5px;
			}

/* # Compte à rebours # */
#js-countdownContainer {
	display:flex;
	justify-content: flex-end;
	align-items: center;
	color:#747474
}
	#js-countdown ul {
		list-style-type:none;
		padding:0;
		margin:0;
	}
		#js-countdown li {
			display:inline-block;
			text-align:center;
			padding:0.5em 0.5em 1em 0.5em;
			border:2px solid #F1F1F1;
			border-radius: 5px;
			margin-right:5px;
			font-size:0.7em;
			font-weight:400;
			min-width:6.1em;
			background-color:#fff;
		}
		#js-countdown li:last-child {
			margin-right:0;
		}
			#js-countdown li span{
				display:block;
				font-size:3.5714em;
				font-weight:700;
				line-height: 1.2;
				margin-bottom:0.1em;
			}
			#js-countdown-secondes {
				color:#13A0B2 !important;
			}
@media (max-width: 480px) {
	#js-countdownContainer {
		font-size:14px;
		justify-content:center;
	}
}



/* ## MAIN # Commons ##################################################### */
/* ## Titres ## */
.sectionTitle{
    font-family:'CalvertMTStd-Bold', Georgia, Times, serif;    
    font-weight:normal;
    font-size:1.3em;
    line-height:1.1;
    padding:0;
    margin:1.5em 0 0.7em 0;
}
.sectionTitle:first-child{
	margin-top:0;
}
.sectionHeader + .sectionTitle{
    margin-top:1em;
}
.sectionSubtitle{
    font-size:0.9em;
    line-height:1.4;
    padding:0;
    margin:0 0 0.8em 0;
}

.blkHeader-intro{
	width:80%;
	color:#747474;
	font-size:0.7em;
	line-height:1.6;
	margin: 0 0 2em;
	text-align:left;
}
			
			

/* ## Bandeaux promo ## */
.sectionBanner{
	display:block;
    margin:1.5em auto;
}
.sectionTitle + .sectionBanner{
    margin-top:0;
}
.sectionBanner a:hover,
a.sectionBanner:hover{
    opacity:0.8;
}
	.sectionBanner img{
		display:block;
		margin:0 auto;
		max-width:100%;
	}



/* ## Block Produit & Slider ## */
/*.wrapper-slider{
    padding-bottom:0;
    position:relative;
    overflow:hidden;
}*/
/* = 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: #005EAD;
}
.slick-list{
	padding: 0 0 4px 0;
}
/**/

/*body:not(.isSmallScreen) .sectionSelection .sliderSelection{
	display:flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap:	wrap ;
	margin:0 -1.2em 0 0;
}*/
.sectionSelection{
	margin-top:1em;
}
.blkProduct,
.blkGeneriqueFrame{
	border: 1px solid #d8d8d8;
	border-radius:3px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.blkProduct{
	/*flex-basis:calc( ( 100% - ( 4 * 1.2em ) ) / 4);*/
	padding:4px 4px 0 4px;
	/*border:1px solid #EFEFEF;*/
	/*margin:1.2em 1.2em 0 0;*/
}
	.blkProduct-visuel{
		background-color:#FFF;
		padding:0;
	}
		.blkProduct-visuel img{
			display:block;
			max-width:100%;
			margin:0 auto;
		}
	.blkProduct-label{
		/*height:5.5em;*/
		background-color: #FFF;
		border-radius: 3px;
		padding:0.5em 0.8em;
	}
		.blkProduct-label-title{
			font-size:1em;
			line-height:1.3;
			padding:0;
			margin: 0 0 3px 0
		}
			.blkProduct-label-title a,
			.blkProduct-label-title a:hover{
				text-decoration: none;
				color:inherit;
			}
				.blkProduct-label-title-cat{
					display:block;
					font-size: 0.7em;
					font-weight:400;
					color:#747474;
					margin-bottom:0.5em;
				}
				.blkProduct-label-title-name{
					display:block;  
					height:2.5em;
					font-size: 0.8em;
					color:#000;
					text-transform: uppercase;
				}
			.blkProduct-label-pricer{
				padding:0;
				margin:5px 0 0 0;
			}
			.blkProduct-label-pricer del{
				display:inline-block;
				text-decoration-line: line-through;
				text-decoration: line-through;
				font-size:0.6em;
				line-height:0.9;
			}
			.blkProduct-label-pricer strong{
				display:block;
				color:#ED1C27;
				font-size:1.3em;
				line-height: 1.4;
			}
.blkProduct--pushService{
	display:flex;
	align-items: center;
}
	.blkPushService{
		display:block;
		padding:1.5em;
		text-decoration:none;
		text-align:center;
		color:#353535;
	}		
		.blkPushService-picto{
			display:block;
			max-width:38.5%;
			margin:0 auto;
		}
		.blkPushService-label{
			display:block;
			font-size:0.8em;
			font-weight:700;
			line-height:1.5;
			margin:0.5em;
		}			
/* ## Sections thematiques ##################################################### */
/* ## Bloc générique (Article édito, Conseils D&V..) */
.blkGeneriqueFrame{
    background-color:#FFF;
	padding:1.2em;
}
	.blkGenerique{
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
		align-items: flex-start;
		justify-content:center;

	}
	.blkGenerique--landscape{
		align-items: stretch;
		justify-content: space-between;
		border-radius:3px;
	}
	.blkGenerique.zoneLink:hover{
		opacity:0.8;
	}
		.blkGenerique-visuel{
			flex-basis: 100%;
		}
		.blkGenerique--landscape .blkGenerique-visuel{
			flex-basis: 48.74%;
		}
			.blkGenerique-visuel img{
				display:block;
				max-width:100%;
				margin:0 auto;
			}
		.blkGenerique-label{
			flex-basis: 100%;
			display:flex;
			flex-wrap:wrap;
			flex-direction:row;
			justify-content: flex-start;
			align-items: center;
			align-content:space-between;
			text-align:center;
			color:#353535;
			padding:1.2em 0.8em 0 0.8em;
		} 
		.blkGenerique--landscape .blkGenerique-label{
			flex-basis: 50%;			
		}
			.blkGenerique-label-title{
				flex-basis:100%;
				font-weight:bold;
				font-size:0.6em;
				text-transform:uppercase;
				letter-spacing: 3px;
				line-height:1.1;
				color:#13A0B2;
				margin:0;
			} 
			.blkGenerique--landscape .blkGenerique-label-title{
				margin-bottom:1em;
			}
      		.blkGenerique-label-subtitle{
				flex-basis:100%;
				max-width:400px;
				font-weight:700;
				font-size:0.8em;
				line-height:1.5;
				margin:1em auto 0 auto;
				color:#353535;
			}
				.blkGenerique-label-title a,
				.blkGenerique-label-subtitle a{
					color:inherit;
					text-decoration:none;    
				} 
			.blkGenerique-label-intro{
				flex-basis:100%;
				color:#747474;
				font-size:0.7em;
				line-height:1.6;
				margin:0.4em 0 0 0;
			}
			.blkGenerique-label-readme, .blkGenerique-label-readme-off{
				flex-basis:100%;
				font-size:0.8em;
				font-weight: 700;
				text-decoration:none;
				color:#005EAD;
				text-align:right;
				margin:1em 0 0 0;
			}
			

			.js-publiAccordionLight-toggle .blkGenerique-label-readme{
				
				text-align:center;
			}
			.js-publiAccordionLight-toggle .blkGenerique-label-readme:after{
				display:inline-block;
				width: 1.2em;
				height:1.2em;
				content:"";
				border-color:#005EAD;
				border-style:solid;
				border-width:4px 4px 0 0;
				transition: transform 0.2s ease-in-out;
				transform: rotate(135deg);
			}
			.js-publiAccordionLight-toggle--open .blkGenerique-label-readme:after{
				transform: rotate(-45deg);
			}

	.blkGeneriquePart2{
		display:flex;
		justify-content: space-between;
		align-items: center;
		background-color: #F1F1F1;
		margin:1.2em 0 0 0;
	}
		.sectionIntroVideo{
			flex-basis: 53.6%;
			line-height:1.5;
			padding:1.2em;
		}
			.sectionIntroVideo dt{
				color:#353535;
				font-size:0.9em;
				padding:0;
				margin:0 0 1em 0;
			}
			.sectionIntroVideo dd{
				color:#747474;
				font-size:0.8em;
				padding:0;
			}
		.sectionVideo{
			flex-basis:46.4%;
		}
			.blkVideo{
				height:0;
				width:100%;
				padding-top:56.25%;
				position:relative;
			}
				.blkVideo iframe{
					position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
				}

/* ## Section conseils ## */
body:not(.isSmallScreen) .sectionConseils .sliderConseils{
    display:flex;
    justify-content: space-between;
}
body:not(.isSmallScreen) .sectionConseils .sliderConseils > div{
    flex-basis: 48.8%;
}
.sectionConseils .zoneLink:hover{
	opacity:0.8;
}


/* ## 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 {
		display:block;
		padding-top:0;
	}
		.sectionHeader-title{
			margin:0.5em 0 0.75em 0;
		}
			.sectionHeader-title-label0{
				font-size:0.85em;
			}
			.sectionHeader-title-label{
				font-size:1.9em;
			}
		.sectionHeader-subtitle{
			font-size:0.8em;
		}
	#js-countdownContainer {
		justify-content: flex-start;
		font-size:0.85em;
		margin-top:1em;
	}
 /* ## MAIN ############################################# */ 
	/* ## */
	.sectionTitle {
		font-size: 1.15em;
		margin-bottom:0.6em;
	}
	.sectionSubtitle {
		font-size: 0.8em;
	}
	/* ## */
		
	.blkGenerique,
	.blkGenerique--landscape,
	.blkGeneriquePart2{
		display:block;
	}

	.blkProduct {
		flex-basis: calc( ( 100% - ( 3 * 1.2em ) ) / 3);
	}
	.blkProduct-label {
		font-size: 0.9em;
	}

	/* ## */
	.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;
    }
	/* ## */

	.selectionList{
		margin-right:0;
	}

	.sliderSelection .slick-list,
	.sliderConseils .slick-list{
		/*width:95.3125vw;*/
		width:100vw;
		margin-right:0;
		/*margin-left:auto;*/
		margin-left:0;
	}

	.sliderSelection  .slick-track{ /* si slidesToShow: 2.4 => position de depart decalee */
		left:1em;
	}
	.sliderConseils  .slick-track{ /* si slidesToShow: 1.4 => position de depart decalee */
		left:1em;
	}

	.blkProduct,
	.blkGeneriqueFrame{
		border: 1px solid #d8d8d8;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	}
}

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