/* ## 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;
}
.bleu{
    color:#005EAD !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;
}
/* ## HEADER ############################################################# */
.sectionHeader {
	background:url(../images/deco/bg-header-desktop.jpg) no-repeat top right;
	padding:1em 0 1.5em 0;
    margin-bottom:2em;
}

.sectionHeader-title{
	max-width:350px;
	font-size:1em;
	font-weight:700;
	line-height:1;
	margin: 0 0 1.2em 0;
}

	.sectionHeader-title-label{
		display:block;
		font-size:2.5em;
		line-height:1.2;
	}
.sectionHeader-subtitle {
	max-width:320px;
	color:#747474;
	font-size:0.9em;
	font-weight:300;
	line-height:1.5em;
	padding:0 ;
	margin:1em 0 0 0;
}


/* ## MAIN # Commons ##################################################### */
/* ## Titres ## */
.sectionTitle{
    font-weight:700;
    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{
	color:#747474;
    font-size:0.9em;
    line-height:1.4;
    padding:0;
    margin:-0.3em 0 0.8em 0;
}

/* ## Bandeaux promo ## */
.sectionBanner,
.blkBanner{
	display:block;
    margin:2em auto;
}
.sectionBanner--withShadow,
.blkBanner--withShadow{
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.sectionTitle + .sectionBanner{
    margin-top:0;
}
.sectionBanner a:hover,
a.sectionBanner:hover{
    opacity:0.8;
}
	.sectionBanner img{
		display:block;
		margin:0 auto;
		max-width:100%;
	}
.blkBanner{
	display:flex;
	align-items: center;
	justify-content: flex-start;
	padding:1em 1em 1em 1.5em;
}		
	.blkBanner-picto{
		display:inline-block;
		width:1.25em;
		margin:0 1.25em 0 0;
	}	
	.blkBanner-label,
	.blkBanner-label:hover,
	.blkBanner-label:focus,
	.blkBanner-label:active{
		display:inline-block;
		flex-basis:75%;
		font-size:0.9em;
		font-weight:700;
		color:#353535;
		text-decoration:none;
	}	
	.blkBanner-fakeBtn{
		display:inline-block;
		white-space: nowrap;
		font-size:0.8em;
		font-weight:700;
		line-height:1;
		background-color:#353535;
		color:#FFF;
		border-radius: 3px;
		padding:0.75em 3.125em  0.7em 3.125em;
	}	
	.blkBanner-arrow{
		display:none;
	}


/* = Selection Produits, Categories .selectionList  */
.selectionList {
  --gap-r:24px;
  --gap-c:24px;
  --block-min-w:204px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--block-min-w), 1fr));
  gap:var(--gap-r) var(--gap-c);
  /*justify-content: center; 
  justify-items: center;*/
  padding:0;
  list-style-type: none;
  margin-left:auto;
  margin-right:auto;
}

	.blkSelection{
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		text-align:center;		
		padding:4px;
		margin:0;
	}
		.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;
			padding:0.4em 0.6em;
			margin:0;
		}
			.blkSelection-label.a,
			.blkSelection-label.a:hover,
			.blkSelection-label a,
			.blkSelection-label a:hover{
				display:block;
				color:inherit;
				text-decoration:none;
			}
			.blkSelection-label-category{
				display:block;
				color:#747474;
				font-size:0.7em;
				font-weight:400;
				font-style: normal;
				line-height:1.2;
				padding:0;
				margin:0;
			}
			.blkSelection-label-name{
				display:block;
				color:#353535;
				font-size:0.8em;
				font-weight:700;
				line-height:1.4;
				padding:0;
				margin:0;
			}



/* ############################################################################################ */
/* ==== 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:calc(100% - 32px);
		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{
			display:flex;
			align-items: center;
			max-width:unset;
			margin:0.5em auto;
		}	
			.sectionHeader-title-label{
				font-size:2.2em;
			}
		.sectionHeader-subtitle{
			max-width:unset;
		}
 /* ## MAIN ############################################# */ 
	/* ## */
	.sectionHeader{
		margin-bottom:1em;
	}
	.sectionHeader-title-label{
		font-size:1.8em;
		line-height: 1.2;
	}
	.sectionHeader-subtitle{
		font-size:0.8em;
		margin-top:0.5em;
	}
	/* ## */

}

@media (max-width: 480px){  /* ================================================================ */
	/* ## */
    .ftlHTML{
        padding:0 0 1.5em 0;
        font-size:15px;
    }
    .ftlHTML .btn {
        font-size: 0.6em;
    }
	/* ## */
	.sectionHeader-title-label{
		font-size:1.8em;
		line-height: 1.2;
	}
	.sectionHeader-subtitle{
		font-size:0.8em;
		margin-top:0.5em;
	}
	/* ## */
  .selectionList {
    --gap-r:16px;
    --gap-c:16px;
    --block-min-w:136px;
  }
	/* ## */
	.blkBanner{
		padding:1.5em 1.25em 1.5em 1.25em;
	}
	.blkBanner-label{
		flex-basis:90%;

	}
	.blkBanner-fakeBtn{
		display:none;
	}
	.blkBanner-arrow{
		display:inline-block;
		content:"";
		width:1.2em;
		height:1.2em;
		border:1px solid #005EAD;
		border-width:4px 4px 0 0;
		transform: rotate(45deg);
	}
	/* ## */

}

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