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

.hasTouch.isSmallScreen .zoneLink:hover{
    opacity:1;
}
/* ## helpers ########################################################## */
.rouge{
    color:#ed1c27 !important;
}
.bleu{
    color:#005EE2;
}


/* ## Elements récurents ################################################ */
.ftlHTML a{
    color:inherit;  
}
.ftlHTML a:hover{
    text-decoration:none;
}
.ftlHTML .btn{
    display:inline-block;
    background-color:#ed1c27;
    color:#FFF;    
    font-family: 'Open Sans', Arial, sans-serif;
    font-size:0.85em;/*17px*/
    font-weight: 700;
    font-style:normal;
    line-height: 1;
    white-space: nowrap;
    border-radius: 3px;
    padding: 1em 1em 0.9em 1em;
    text-align: center;
    text-decoration: none;
}
.ftlHTML .btn:hover{
    background-color: #ca1821; 
}
.ftlHTML .btn--bleu{
	background-color: #005EE2;
}
.ftlHTML .btn--bleu:hover{
	background-color:#004d8b;
}
/*------------------------------------------NEW--------------------------------------------------*/
h2.titleBloc{
	color:#353535;
	font-size:20px;
	font-weight:bold;
	padding:0;
	margin:40px 0 32px 0;
}
.subjectContent h2.titleBloc{
	margin:40px 0 10px 0;
}
span.subtitleBloc{
	color:#353535;
	font-size:16px;
	font-weight:normal;
	display:block;
}
.boutonContact{
	padding:8px 32px;
	border-radius:3px;
	background-color:#fff;
	color:#005EE2;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	border:1px solid #005EE2;
	margin-top:30px;
	cursor:pointer;
}
button.boutonContact:hover{
	background-color:#005EE2;
	color:#fff;
}
.pageTop{
	width:100%;
	height:230px;
	padding-top:32px;
	background-image:url(../images/new/deco/visu-header.jpg);
	background-position:right;
	background-repeat:no-repeat;
}
.pageTop .pageTop-content{
	background-color:#005EE2;
	color:#fff;
	padding:20px;
	width:557px;
	height:166px;
	border-radius:3px;
}
.pageTop .pageTop-content .pageTop-nav{
	font-size:16px;
}
.pageTop .pageTop-content .pageTop-nav img{
	display:inline-block;
	margin-right:5px;
	vertical-align:top;
}
.pageTop .pageTop-content h1{
	font-size:24px;
	font-weight:bold;
	margin:25px 0 20px 0;
	padding:0;
}
.pageTop .pageTop-content p{
	font-size:16px;
	font-weight:normal;
	margin:0;
	padding:0;
}
.pageBottom{
	width:100%;
	height:328px;
	padding-top:32px;
	background-image:url(../images/new/deco/visu-bottom-desktop.jpg);
	background-position:right;
	background-repeat:no-repeat;
}
.pageBottom .pageBottom-content{
	background-color:#005EE2;
	color:#fff;
	padding:20px;
	width:557px;
	height:255px;
	border-radius:3px;
}
.pageBottom .pageBottom-content span{
	display:block;
	font-size:24px;
	font-weight:bold;
	margin:25px 0 20px 0;
	padding:0;
}
.pageBottom .pageBottom-content p{
	font-size:16px;
	font-weight:normal;
	margin:0;
	padding:0;
}
.pageContent{
	width:100%;
	padding:32px 20px;
	background-color:#f5f5f5;
}
.subjectList{
	list-style-type:none;
	padding:0;
	margin:0;
	display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
}
.subjectList > li,
.subjectList > div {
	background-color:#fff;
	color:#353535;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	padding:24px 8px;
	margin:0 14px 24px 0;
	border:2px solid #d8d8d8;
	border-radius:3px;
	box-shadow: 0 0 6px 0 rgba(69, 69, 69, 0.08);
	width:224px;
	transition:all 200ms ease-out;
}
.subjectList > li:nth-child(4n){
	margin:0 0 24px 0;
}
.subjectList > li:hover, 
.subjectList > li.subject-active, 
.subjectList > li.contactMode-active{
	color:#005EE2;
	border:2px solid #005EE2;
	cursor:pointer;
}
.subjectList li img,
.subjectList div img{
	display:block;
	margin:0 auto 20px auto;
}
.subjectList li a,
.subjectList div a{
	text-decoration:none;
}
.subjectContent{
	display:none;
}
.subjectContent.subjectContent-active{
	display:block;
}
.subjectContent ul.questions{
	list-style-type:none;
	padding:0;
	margin:0;
}
.blkMethodContent{
	padding:16px 10px 10px 10px;
	margin:0;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
	border-top-right-radius:3px;
	background-color:#fff;
	/*display:none;*/
}

.subjectContent ul.questions li{
	font-size:16px;
	font-weight:normal;
	background-image:url(../images/new/deco/fleche-bleue.svg);
	background-position:98% 50%;
	background-repeat:no-repeat;
	border-bottom:1px solid #dedede;
	line-height: 2;
	padding:0 0 5px 0;
}
.subjectContent ul.questions li a{
	display:block;
	color:#353535;
	text-decoration:none;
	width: 100%;
}
.subjectContent ul.questions li a:hover{
	color:#005EE2;
}
.subjectContent ul.methodList{
	list-style-type:none;
	padding:0;
	margin:25px 0 0 0;
}
.subjectContent ul.methodList li{
	display:inline-block;
	list-style-type:none;
	margin:0;
	font-size:20px;
	font-weight:bold;
	color:#353535;
	background-color:#fbfbfb;
    padding:10px 25px 10px 25px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	vertical-align:bottom;
}
.subjectContent ul.methodList li:hover,
.subjectContent ul.methodList li.method-active{
	color:#005EE2;
	cursor:pointer;
	background-color:#fff;
	padding:10px 25px 15px 25px;
}
.contactModeContent{
	justify-content:space-between;
	padding:0 0 20px 0;
	display:none;
}
.contactModeContent.contactModeContent-active{
	display:flex;
}
.contactModeContent .contactModeContent-left{
	width:50%;
	padding:0 20px 0 20px;
}
.contactModeContent .contactModeContent-right{
	width:50%;
	border-left:1px solid #d8d8d8;
	text-align:center;
	padding:0 20px 0 20px;
}
.contactModeContent .contactModeContent-right img{
	margin:24px 0 0 0;
}
.contactModeContent p{
	color:#353535;
	padding:0;
	margin:0;
	font-weight:normal;
	font-size:16px;
}
.contactModeContent ul{
	padding: 10px 20px;
}
.contactModeContent ul li{
	color:#353535;
	padding:0;
	margin:0;
	font-weight:normal;
	font-size:16px;
}
.contactModeContent a{
	text-decoration:none;
}
.contactModeContent .numTel{
	text-decoration:none;
	color:#fff;
	background-color:#353535;
	border:none;
	padding:10px 15px 10px 30px;
	margin:10px 0;
	font-size:16px;
	font-weight:bold;
	display:block;
	background-image:url(../images/new/deco/deco-minitel-blanc.svg);
	background-position:10px 50%;
	background-repeat:no-repeat;
	width:fit-content;
}
.contactModeContent .boutonContact{
	margin-top:10px;
}
.contactModeContent .numTel span{
	font-size:12px;
	font-weight:normal;
}


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

@media (max-width: 767px){
    .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);
    }
    .withGuttersOnMobile{
        width:90.625vw;
        max-width:580px;
        margin-left:auto;
        margin-right:auto;
    }   
    #dcom_main_container > table{
        background-color:#FFF !important;
    }
    .ftlHTML img{
        max-width:100%;
    }
	h2.titleBloc {
		font-size: 20px;
		margin: 20px 0 20px 0;
	}
	.subjectContent h2.titleBloc {
		margin: 20px 0 10px 0;
	}
	span.subtitleBloc {
		font-size: 14px;
	}
	.pageTop{
		background-image:none;
		padding-top:0;
		height:auto;
	}
	.pageTop .pageTop-content{
		width:100%;
		height:auto;
		border-radius:0;
	}
  /**/
	.subjectList{
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-behavior: smooth;
		scroll-padding: 0 7px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
		.subjectList:after {
			content: '';
			min-width: 1px;
			margin-left: -1px;
		}   
	.subjectList > li,
	.subjectList > div{
		min-width:65vw;
		scroll-snap-align: start;
	}
		.subjectList > li:after,
		.subjectList > div:after {
			content: '';
		}
	.subjectList li:nth-child(4n){
		margin:0 14px 24px 0;
	}
	.subjectList li:last-child,
	.subjectList div:last-child{
		margin:0 0 24px 0;
	}
	.subjectContent ul.methodList li{
		font-size:14px;
		padding:10px 5px 10px 5px;
	}
	.subjectContent ul.methodList li:hover,
	.subjectContent ul.methodList li.method-active{
		padding:10px 5px 15px 5px;
	}
	.subjectContent ul.questions li {
		font-size: 14px;
		line-height: 1.5;
		padding: 0 24px 5px 0;
	}
	.pageBottom{
		height:auto;
		padding-top:20px;
		background-image:none;
	}
	.pageBottom .pageBottom-content{
		width:100%;
		height:auto;
		border-radius:0;
	}
	.pageBottom img{
		width:100%;
	}
	.contactModeContent .contactModeContent-right{
		display:none;
	}
	.contactModeContent .contactModeContent-left{
		width:100%;
	}
}

@media (max-width: 480px){
    .ftlHTML{
        padding:0 0 1.5em 0;
        font-size:16px;
    }
}