@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;
    background-color:#fff;
    padding:0 0 20px 0;
}
.zoneLink:hover{
    opacity:0.8;
}
.hasTouch.isSmallScreen .zoneLink:hover{
    opacity:1;
}
/* ## helpers ########################################################## */
.rouge{
    color:#ed1c27 !important;
}
.block{
    display:block;
}

/* ## Elements récurents ################################################ */
.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: 14px;
    font-weight: 700;
    font-style:normal;
    line-height: 1;
    white-space: nowrap;
    border-radius: 3px;
    padding: 13px 1.5em 10px 1.5em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}
.ftlHTML .btn:hover{
    background-color: #ca1821; 
}
/* ## HEADER ############################################################# */
.sectionHeader{
    padding-top:0;
}
    .sectionHeader-title{
        position:relative;
        width:100%;
        overflow:hidden;
        margin:0 auto;
    }
    .sectionHeader-title:after{
        display:block;
        content:" ";
        width:100%;
        height:0;
        padding-top:42%;/*=150/640*/
        background:url(../images/fin_op_mobilite.jpg) no-repeat 0 0;
        background-size:100%;
        position:relative;
    }             
        .sectionHeader-title-label{
            color:#FFF;
            font-size:0.5em;
            position:absolute;
            top:0;
            right:0;
        }
    .sectionHeader-main{
        width:1000px;
    }
    
    
/* ## CHRONO #################################################################### */
.section-chrono {
	background-color:transparent;
	color:#000000;
	padding:0;
	text-align:center;
}
.section-chrono-accroche {
    display:block;
    font-family:'CalvertMTStd-bold', Georgia, Times, serif;
	font-size: 1.75em;
    font-weight: normal;
    text-align:left;
    width:90%;
    max-width:780px;
    margin:0 auto 0.4em auto;
}
.section-chrono-timer {
	display: flex;
	justify-content: space-between;
    width:90%;
    max-width:780px;
    margin:0 auto;
}
.section-chrono-timer-bloc {
    flex-basis: 23%;

}
.section-chrono-timer-number {
    display:block;
	font-family:'CalvertMTStd-bold', Georgia, Times, serif;
    font-size:6em;
    font-weight:normal;
    line-height:1;
    background-color: #171719;
    background-image:url(../images/teasing/bg-flip-chrono.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    padding:10px 0 22px 0;
    color: #FFF;
    margin-bottom:10px;
    position:relative;
}
.section-chrono-timer-number:after{
    display:block;
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:url(../images/teasing/bg-flip-chrono-center.png) no-repeat center center;
    background-size:100%;
}
.section-chrono-timer-desc {
    display:block;
    font-family:'CalvertMTStd-bold', Georgia, Times, serif;
    font-size:1.25em;
    text-transform:uppercase;
}



/* ________ TITLE ________*/


.title-universe{
	width:100%;
	padding:0 25px 0;	
    font-family:'CalvertMTStd-bold', Georgia, Times, serif;
	background-color:#ffffff !important;
	font-size:1.5em;
	text-align:center;
	color:#000000;
}





/* ________ BLOC DESKTOP ________*/


.title-mobile{
	display:none;
}

.color-red{
	color:#ec1f2a;
}


.content-bloc{
	width:1000px;
	margin:0 auto;
	display:block;
	background: #ffffff!important;
}

.bloc-univers{
	text-align:center;
	width:329px;
	display:inline-block;
	/*background-color:#005ead;*/
}

.bloc-univers a, .bloc-univers-2 a, .bloc-code a, .title-universe a{
	text-decoration:none;	
}

.bloc-univers img, .bloc-univers-2 img{
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
}

.bloc-univers:hover img, .bloc-univers-2:hover img{
	transform: scale(1.05);
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-o-transform: scale(1.05);
	-moz-transform: scale(1.05);	
}

.text-univers{
	display:block;
	padding: 0 0 20px;
	text-align:center;
	font-size:1em;
	background-color:#ffffff;
	font-family:'CalvertMTStd', Arial, Helvetica, sans-serif;
	color:#000000;
}


/* ________ SEPARATEUR ________*/
#separateur{
	width:100%;
	height:10px;
	background-color:#ffffff;
	clear:both;	
}















.mentions-legales {
    /*font-size: 0.6em;*/
    font-size: 0.8em;
    color: #4b4b4b;
    /*background-color: #222;*/
    margin:1em 0 2em 0;
}
.js-publiAccordionLight-toggle {
    cursor: pointer;
    text-decoration:underline;
}
.js-publiAccordionLight-toggle:hover{
    text-decoration:none;    
} 
.js-publiAccordionLight-content {
    display: none;
    padding-top:1em;
}




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

@media (max-width: 767px){
    .ftlHTML{
        font-size:18px;
    }
    #dcom_main_container .site .ftlHTML{ /* template Darty menu Mobile */
        width: 100vw;
    }
    #dcom_main_container > table .ftlHTML{ /* template Darty header XXL */
        width:93.75vw;
        margin-left:auto;
        margin-right:auto;
    }
    #dcom_main_container > table{
        background-color:#fff !important;
    }
    .ftlHTML img{
        max-width:100%;
    }
    /* ## HEADER */
    .sectionHeader-main{
        width:auto;
    }
    /* ## CHRONO */
    .section-chrono{
        font-size:0.7em;
    }
    .section-chrono-accroche{
        font-size:2.5em;
    }
    .section-chrono-timer-number{
        font-size:5em;
        padding:5px 0 7px 0;
        background-size:1px 6px;
    }
    .section-chrono-timer-number:after{
        display:none;
    }    
  

    .mentions-legales {
        padding: 1em 2em;
        font-size: 0.8em;
    }
	
	
	
/* ________ BLOC MOBILE	________*/
.content-bloc{
	width:100%;
}

.bloc-univers{
	display:inline-block;
	width:49%;
}

.title-universe{
	width:100%;
	padding:20px 25px 0;	
    font-family:'CalvertMTStd-bold', Georgia, Times, serif;
	background-color:#ffffff !important;
	font-size:1.3em;
	text-align:center;
	color:#000000;
}


.bloc-univers img{
	transition: inherit;
	-moz-transition: inherit;
	-webkit-transition: inherit;
	-o-transition: inherit;
}

.bloc-univers:hover img, .bloc-univers-2:hover img{
	transform: inherit;
	-ms-transform: inherit;
	-webkit-transform: inherit;
	-o-transform: inherit;
	-moz-transform: inherit;	
}
.text-univers{
	display:block;
	padding: 0 0 20px;
	text-align:center;
	font-size:0.8em;
	background-color:#ffffff;
	font-family:'open_sansregular', Arial, Helvetica, sans-serif;
	color:#000000;
}

}


@media (max-width: 480px){
    #dcom_main_container > table .ftlHTML{ /* template Darty header XXL */
        width:auto;
    }    
    .ftlHTML{
        padding:0 0 1.5em 0;
        font-size:16px;
    }
    .withGuttersOnMobile{
        width:93.75vw;
        margin-left:auto;
        margin-right:auto;
    }  
    /* ## CHRONO */
    .section-chrono{
        font-size:0.5em;
    }     
    /*.wrapper-slider{
        width:96.875vw;
        margin-left:3.125vw;
    }*/
    .wrapper-slider{
        width:100vw;
    }

	.sectionHeader-title{
        width:100%;/*=600/640*/
    }
	
	.sectionHeader-title:after{
       padding-top:120%;
        background:url(../images/fin_op_mobilite_mob.jpg) no-repeat 0 0;
        background-size:100%;
    }       
	
    hr {
        border-width: 0 0 4px 0;
    }
    .sectionSubtitle{
        display:none;
    }
    .sectionBanner--withBorders,
    .sectionHeader + .sectionBanner--withBorders{
       border:8px solid #353535 ;
    }
    
    .sectionTitle {
        font-size: 1.6em;
        margin-top:1.25em;
    }
    .sectionTitle-subtitle{
        display:block;
    }  
    .sectionTitle .discount{
        display:block;
    }
    /*.wrapper-slider {
        padding-bottom: 1em;
    }   */
 
    .blkCategory-label{
        font-size:1em;
    }
    .blkCategory-label-name{
        height:3.3em;
    }
    .sectionMore-links a{
        text-align: center;
        padding:0.7em 20%;
    }
    .sectionMore-links i{
        display:none;
    }  
    .sectionConseils .sliderConseils{
        display:block;
    }

    /**/

}
@media (max-width: 360px){
    .ftlHTML{
        font-size:14px;
    } 

}