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

/* ## Elements récurents ################################################ */
.ftlHTML a{
    color:inherit;
}
.ftlHTML a:hover{
    text-decoration:none;
}



/* ## HEADER ############################################################# */
.sectionHeader{
    background: url(../images/deco/bg-header-desktop.jpg) no-repeat right 0;
    padding:1.5em 0 1em;
    margin:0 0 2em 0;
}
    .sectionHeader-title{
        display:block;
        max-width:500px;
        font-family:'CalvertMTStd-Bold', Georgia, Times, serif;   
        font-weight: normal; 
        font-size:2.5em;
        line-height:1.15;
        color:#000;
        margin:0;
    }
    .sectionHeader-main{
        max-width:575px;
        margin-top:1.25em;
    }
        .blkIntro{
            border:8px solid #005ead;
            padding:1.3em 1.5em 1.3em 10.5em;
            background:#FFF url(../images/pictos/picto-repris-echange.svg) no-repeat 1.5em center;
            background-size:7.25em 4.25em;
        }
            .blkIntro-label{
                font-size:0.9em ;
                line-height:1.4;
                margin:0;
            }

/* ## MAIN ############################################################### */
hr {
    display:block;
    width:auto;
    height:0;
    padding:0;
    border-color: #F1F1F1;    
    border-style:solid;
    border-width: 0 0 2px 0;
    margin:0;
}
.sectionTitle{
    font-family:'CalvertMTStd-Bold', Georgia, Times, serif;    
    font-weight:normal;
    font-size:1.8em;/*36px*/
    line-height:1.1;
    padding:0;
    margin:0.85em 0 0.3em 0;
}
.assistanceNumber{
    white-space: nowrap;
    font-weight: bold;
}


/* ##### section HOW TO (plié-deplié) ##### */

.sectionHowTo{
    margin-bottom:2.5em;
}
    .sectionHowTo-title{
        font-size:1em;
        padding:0.5em 1em;
        border:8px solid #e5eff8;
        margin:0 0 1em 0;
        position:relative;
    }
    .sectionHowTo-title:not(:first-child){
        margin-top:2em;
    }
        .sectionHowTo-title-label{
            font-family:'CalvertMTStd-Bold', Georgia, Times, serif;    
            font-weight:normal;
            font-size:1.4em;/*28px*/
            color:#005ead;            
        }
    .sectionHowTo-title.js-publiAccordionLight-toggle{
        position:relative;
    }
    .sectionHowTo-title.js-publiAccordionLight-toggle--open{
        background-color:#e5eff8;      
    }
    .sectionHowTo-title.js-publiAccordionLight-toggle:after{
        display:inline-block;
        width: 0.9em;
        height:0.9em;
        content:"";
        border-color:#ed1c27;
        border-style:solid;
        border-width:4px 4px 0 0;
        transition: transform 0.2s ease-in-out;
        transform: rotate(45deg);
        position:absolute;
        top:calc(50% - 0.40em);
        right:1em;
    }
    body:not(.hasTouch) .sectionHowTo-title.js-publiAccordionLight-toggle:hover:after{
        transition: transform 0.2s ease-in-out;
        transform: rotate(135deg);
    } 
    .sectionHowTo-title.js-publiAccordionLight-toggle--open:after{
        transition: transform 0.2s ease-in-out;
        transform: rotate(135deg);
    }
    body:not(.hasTouch)  .sectionHowTo-title.js-publiAccordionLight-toggle--open:hover:after{
        transition: transform 0.2s ease-in-out;
        transform: rotate(-45deg);
    } 
.sectionHowTo-titleN2{
    text-align:center;
    font-size:1.2em;
    font-weight: bold;
    margin:0 0 0.5em 0;
}

.steps{
    display:flex;
    justify-content: space-around;
    align-items: flex-start;
    list-style-type: none;
    padding:0;
    margin:0 0 1.5em 0;
    position:relative;
}    
.steps:last-child{
    margin-bottom:0;
}
.steps:before{
    display:block;
    content: "";
    position:absolute;
    left:0;
    right:0;
    top:1em;    
    height:0px;
    border-top:8px dotted #005ead;
    margin:0 auto;
}
.steps--2steps:before{
    width:50%;
}
.steps--3steps:before{
    width:75%;
} 
    .steps-item{
        min-width:260px;
        max-width:320px;
        padding:0 1em;
        text-align:center;
    }
        .steps-item-rank{
            display:block;
            width:6em;
            background-color: #FFF;
            margin:0 auto 1em auto;    
            position:relative;
        }
            .steps-item-rank-number{
                display:block;
                width:1.68em;
                height:1.68em;
                line-height:1.68em;
                text-align:center;
                border-radius: 50%;
                background-color: #005ead;
                font-family:'CalvertMTStd-Bold', Georgia, Times, serif;    
                font-weight:normal;
                font-size:1.4em;/*28px*/    
                font-style: normal;            
                color: #FFF;
                margin:0 auto;    
            }
        .steps-item-picto{
            height:4.4em;
        }
            .steps-item-picto img{
                display:block;
                max-height:100%;
                width:auto;
                margin-left:auto;
                margin-right:auto
            }
            .steps-item-picto img[src$=".svg"]{
                height:100%;
            }
        .steps-item-label{
            font-size:0.8em;
            line-height:1.4;
            margin:0.75em 0 0 0;
        }        
.noStepLabel {
    text-align:center;
    font-size:0.8em;
    line-height:1.4;
    margin:0;
}

.blkRemarques {
    background-color:#f6f6f6;
    padding:1em;
} 
    .blkRemarques-title{
        font-size:0.8em;
        line-height:1.4;
        margin:0;
    }
        .blkRemarques-label{
            font-size:0.8em;
            line-height:1.4;
            margin:0;
        }




/* ##### Bandeau promo  */
.sectionBanner{
    margin:2em auto;
}
.sectionHeader + .sectionBanner,
.sectionSubtitle + .sectionBanner{
    margin-top:1em;
}
.sectionTitle + .sectionBanner{
    margin-top:0;
}
.sectionBanner--withBorders{
    border:1px solid #f2f2f2;
    border-width:2px 0 ;
}
.sectionBanner a{
    display:block;
}
.sectionBanner a:hover{
    opacity:0.8;
}
.sectionBanner img{
    display:block;
    margin:0 auto;
    max-width:100%;
}
.sectionBanner--two{
    display:flex;
    justify-content: space-between;
}
.sectionBanner--two a{
    flex-basis: calc(( 100% - 1em ) / 2 );
}



/* #### à Savoir #### */
.sectionSavoir{
    margin:0 0 2.5em 0;
}
    .sectionSavoir-img{
        float:left;
        margin-right:1.5em; 
    }
    .sectionSavoir-main{
        overflow:hidden;
    }
        .sectionSavoir-title{
            font-family:'CalvertMTStd-Bold', Georgia, Times, serif;    
            font-weight:normal;
            font-size:1.5em;
            margin:0 0 0.5em 0;
            padding:0.6333em 0 0.25em 2.6667em;
            background:url(../images/pictos/picto-idees.svg) no-repeat 0 0;
            background-size:2em 2em;
        }    
.blkSavoir{
   margin:0;
   padding:0; 
}
    .blkSavoir-title,
    .blkSavoir-def{
        font-size:0.8em;
        line-height:1.4;
        margin:0;
        padding:0;
    }
    .blkSavoir-title{
        font-weight:bold;
    }
    .blkSavoir-def + .blkSavoir-title{
        margin-top:2em;
    }
        .blkSavoir-def ul,
        .blkSavoir-def li {
            list-style-position: inside;
            margin:0;
            padding:0;
        }
            .blkSavoir-def li + li {
                margin-top:1.5em;
            }

/* #### Push Services #### */
.sectionPushServices{
    display:flex;
    justify-content: space-between;
}
    .blkPushService{
        flex-basis: 49%;
        border: 8px solid #000;
        padding:1em 1.25em;
    }
    .blkPushService--call{
        border-color:#ffde17;
    }
    .blkPushService--remb{
        border-color:#005ead;
    }
        .blkPushService-img{
            display:block;
            height:auto;
            float:left;
            margin-right:1.25em;
        }
        .blkPushService--call .blkPushService-img{
            width:3.75em;
        }
        .blkPushService--remb .blkPushService-img{
            width:2.75em;
        }
        .blkPushService-main{
            overflow:hidden;
        }
            .blkPushService-title{
                font-family:'CalvertMTStd-Bold', Georgia, Times, serif;    
                font-weight:normal;
                font-size:1.5em;
                margin:0;
            }
            .blkPushService--call p{
                font-size:0.8em; 
                line-height:1.4;
                margin:0.4em 0 0 0;   
            }
            .blkPushService--remb a{
                font-size:1em; 
                line-height:1.4;
                color:#000;
            }

/* ### Bandeau retours prolongés */
.pushRetours {
  display: flex;
  align-items: center;
  font-size:1em;
  padding:0.8em;
  background-color: #f2f2f2;
  margin:0 auto 1.5em auto;
}
  .pushRetours-icon{
    width:2em;
    height:2em;
    margin:0 3% 0 0;
  }
  .pushRetours-main{
    flex-basis:calc(100% - 2em);
    margin:0;
  }
    .pushRetours-title {
      font-size: 0.9em;
      font-weight: 700;
      margin:0 0 0.5em 0;
    }
    .pushRetours-desc {
      font-size: 0.8em;
      font-weight: 400;
      line-height: 1.3;
      margin:0;
    }
      .pushRetours-desc-mention {
        display: block;
        font-style: normal;
        font-size: 13px;
        color:#757575;
      }            

/* ##### Mentions légales ##### */
.legalWarning{
    font-style: normal;
    font-size:0.75em;
    white-space: nowrap;
}
.mentions-legales {
    padding:1em 2em;
    font-size: 0.6em;
    color: #414141;
    background-color: #F2F2F2;
    margin:2.5em 0;
}
    .mentions-legales p:not(:last-child){
        margin:0 0 1em 0;
    }
    .mentions-legales p:last-child{
        margin:0;
    }
    /* (plié-deplié) */
.js-publiAccordionLight-toggle {
    cursor: pointer;
    margin:0;
}
.js-publiAccordionLight-content {
    display: none;
    padding-top:1em;
}
.js-publiAccordionLight-content.js-publiAccordionLight-content--default {
    display: block;
}
/* ============================================================================================*/
/* ==== RESPONSIVE behaviour ==================================================================*/
/* ============================================================================================*/

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

    /* ## HEADER ############################################################### */
    .sectionHeader{
        background: none;
        min-height:unset;
        padding:0.5em 0 0 0;
        margin-bottom:1.5em;
    }
      .sectionHeader-main{
        max-width:unset;
        background:url(../images/deco/bg-header-mobile.jpg) no-repeat 0 0;
        background-size: 100%;
        padding-top:44%;
        margin-top:1em;
      }
        .sectionHeader-title{
            max-width:unset;
            font-size:2em;
        }
        .blkIntro{
            padding:1em 1em 1em 5em;
            background:#FFF url(../images/pictos/picto-repris-echange.svg) no-repeat 1em center;
            background-size:3em 3em;}

    /* ## MAIN ############################################################### */
    .sectionHowTo-title{
        border-bottom-width:8px;
        transition: border-bottom  0.2s;
        padding-right:2em;
    }
    .sectionHowTo-title:not(:first-child) {
        margin-top: 1.5em;
    }    
    .sectionHowTo-title.js-publiAccordionLight-toggle--open{
        background:none;    
        border-bottom-width:0;  
    }
    .sectionHowTo .js-publiAccordionLight-content{
        border:8px solid #e5eff8;
        border-width:0 8px 8px 8px ;
        position:relative;
    }
    .sectionHowTo .js-publiAccordionLight-content:before{
        content:"";
        display:block;
        height:0;
        border-top:1px solid #005ead;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
    .sectionHowTo-titleN2{
        text-align:left;
        padding:0 4%;
        margin-bottom:1em;
    }
    .steps{
        display:block;
        padding:0 4%;
    }  
    .steps-item{
        display:flex;
        align-items: center;
        min-width:unset;
        max-width:400px;
        padding:0;
        text-align:left;
        margin-bottom:1.5em;
        position:relative;
    }
    .steps-item-content{
        margin-left:1em;
        flex-basis:85%;
    }
    .steps-item-rank{
        display:inline-block;
        width:auto;
        margin:0;
        border-top: 4px solid #fff;
        border-bottom: 4px solid #FFF;
        position:relative;
    }
    .steps-item-picto{
        height:3em;
    }
    .steps-item-picto img{
        margin-left:0;
    }
    .steps-item-label{
        margin-top:0.25em;
        font-size:0.9em;
    }
    .noStepLabel{
        font-size:0.9em;
        padding:0 4% 4% 4%;
    }
    /* #### */
    .sectionSavoir-img{
        float:none;
        margin:0 auto 1em auto;
    }
    .sectionSavoir .ftlShowDesk{
        display:none !important;
    }
    .sectionSavoir .ftlShowMob{
        display:block !important;
    }
    .blkSavoir-title,
    .blkSavoir-def{
        font-size:0.9em;
    }
    /* #### */
    .sectionPushServices{
        display:block;
    }
    .blkPushService:not(:first-child){
        margin-top:1em;
    }
    /* #### */
    .mentions-legales {
        padding: 1em 2em;
        font-size: 0.8em;
    }
}


@media (max-width: 480px){
    .ftlHTML{
        padding:0 0 1.5em 0;
        font-size:16px;
    }
    .pushRetours {
      width:93.75%;
    }
    .steps{
        padding:0 0.8em;
    }
    .steps:before{
        left:0;
        right:0;
        top:0; 
        bottom:0;   
        width:0;
        height:100%;
        border-top-width:0;
        border-left:8px dotted #005ead;
        margin:0 0 0 1.75em;
    }
    .steps-item:first-child:before,
    .steps-item:last-child:before
    {
        display:block;
        content:"";
        background:#FFF;
        position:absolute;
        left:0;
        height:50%;
        width:2.4em;
    }
    .steps-item:first-child:before{
        top:0;
    }
    .steps-item:last-child:before{
        bottom:0;
    }
	
	 .sectionBanner--withBorders{
       border-width:8px ;
    }
    .sectionBanner--two{
        display:block;
    }
    .sectionBanner--two a:not(:first-child) {
        margin-top:1em;
    }
}
@media (max-width: 360px){
    .ftlHTML{
        font-size:14px;
    } 

}