@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:#333;
    padding:0;
}

/*.zoneLink:hover{
    opacity:0.8;
}*/
.hasTouch.isSmallScreen .zoneLink:hover{
    opacity:1;
}
/* ## helpers ########################################################## */
.rouge{
    color:#ed1c27 !important;
}
.vert{
    color:#019443;
}
.block{
    display:block;
}

/* ## HEADER ############################################################# */
    .sectionHeader{
        background-color:#F6F5EF;
        display:flex;
        justify-content: space-between;
        padding:1.75em 0 2em ;
        margin-bottom:2.5em;
    }
    .sectionHeader-main{
        width:53.5%;
        padding-left:2.25em;
    }
        .sectionHeader-title{
            font-family:'CalvertMTStd', Georgia, Times, serif;    
            font-size:3em;
            line-height:1.15;
            padding:0;
            margin:0;
        }
        .sectionHeader-title .vert{
            white-space: nowrap;
        }
        .sectionHeader-intro{
            font-size:0.8em;
            line-height:1.4;
            margin:1em 0 0 0;
        }
    .sectionHeader-visuel{
        width:46.5%;    
    }
        .sectionHeader-picto{
            display:block;
            max-width:100%;
            margin:0 auto;
        }

/* ## MAIN ############################################################### */

.section{
    background-repeat:no-repeat;
    background-position:left top;
    background-size:100%;
}        
.section--1{
    background-image:url(../images/deco/bg-section-desktop-1.png);
    padding:0 47.25% 4% 6%;
}
.section--2{
    background-image:url(../images/deco/bg-section-desktop-2.png);
    padding:0 12% 4% 40% 
}
.section--3{
    background-image:url(../images/deco/bg-section-desktop-3.png);
    padding:2% 47.25% 8% 6%;
}
.section--4{
    background-image:url(../images/deco/bg-section-desktop-4.png);
    padding:0 1.8% 4% 51%;
}
.section--5{
    background-image:url(../images/deco/bg-section-desktop-5.png);
    padding:0 47.25% 2% 6%;
}
.pathMob{
    display:none;
}

.section-title{
    font-family:'CalvertMTStd', Georgia, Times, serif;    
    font-size:3em;
    line-height:1.15;
    padding:0;
    margin:0;    
    overflow:visible;
    position:relative;
}
    .section-title-num{
        display:block;
        color:#D7D0B3;
        float:left
    }
    .section-title-label{
        display:block;
        overflow:hidden;
    }
    .section-title-label .vert{
        white-space: nowrap;
    }
    .section--4 .section-title-label{
        padding-right:20%;
    }
.blkDescription{
    border: 8px solid #019443;
    background-color: rgba(255,255,255,0.9);
    padding:2em 1.75em 2em 2em;
    margin:1em 0 0 0;
}
    .blkDescription.zoneLink a::before {
        left: -8px;
        right: -8px;
        top: -8px;
        bottom: -8px;
    }
    .blkDescription.zoneLink:hover{
        border-color:#6FBE41;
    }
    .blkDescription-txt{
        font-size:0.9em;
        line-height:1.3;
        margin:0;
    }
    .blkDescription-accroche{
        color: #019443;
        font-size: 1.05em;
        font-weight: bold;
        line-height: 1.3;
        margin:0;
    }
    .blkDescription-txt,
    .blkDescription-accroche{
        max-width:670px;
    }
    .blkDescription-txt:not(:first-child),
    .blkDescription-accroche:not(:first-child){
        margin:20px 0 0 0;
    }
    .blkDescription-txt:first-child,
    .blkDescription-accroche:first-child{
        padding-right:2.5em;
    }

    .blkDescription-links{
        border-top: 2px dotted #6FBE41;
        background-image:url(../images/deco/paquetKdo.svg) , url(../images/deco/chevron.svg);
        background-repeat: no-repeat , no-repeat ;
        background-position:left 20px , right top 75%;
        background-size:2.333333em auto , 1em auto;
        color: #019443;
        font-size:0.9em;
        line-height: 1.3;
        padding:20px 1em 0 3.3em;
        margin:20px 0 0 0 ;
        overflow:visible;
    }
        .blkDescription-links-title{
            display:block;
            font-weight: bold;
            
        }
        .blkDescription-links-link{
            display:block;
            color: #019443;
            text-decoration: none;
        }
        .blkDescription-links-link:hover{
            color: #6FBE41;
            text-decoration: none;
        }       
    .blkDescription.zoneLink:hover .blkDescription-accroche,
    .blkDescription.zoneLink:hover .blkDescription-links,
    .blkDescription.zoneLink:hover .blkDescription-links-link{
        color: #6FBE41;
    }     
    .blkDescription:after{
        display:block;
        content:"";
        width:2.5em;
        height:4.1em;
        background:url(../images/deco/feuille.svg) no-repeat 0 0;
        background-size:100%;
        position:absolute;
    } 
    .section--1 .blkDescription:after ,
    .section--3 .blkDescription:after,
    .section--5 .blkDescription:after { 
        top:0;
        right:1.25em;
    }  
    .section--2 .blkDescription:after{
        top:3.8em;
        right:0;        
        transform: rotate(90deg);
        transform-origin: top right;
    }
    .section--4 .blkDescription:after{
        top:-8px;
        right:5.5em;        
        transform: rotate(180deg);
        transform-origin: top right;
    }

    .sectionFooter{
        padding:0 3em 1.5em 2.5em;
        border-bottom:1.5em solid #f6f5ef;
        margin:2.5em 0 0 0;
        position:relative;
    }
    .sectionFooter:after{
        display:block;
        content:"";
        width:2.5em;
        height:4.1em;
        background:url(../images/deco/feuille.svg) no-repeat 0 0;
        background-size:100%;
        position:absolute;
        bottom:-4.1em;
        right:3em;
        transform:rotate(180deg);
        transform-origin: top right;
    }
        .sectionFooter-title{
            font-family:'CalvertMTStd', Georgia, Times, serif;    
            font-size:1.6em;
            line-height:1.15;
            padding:0;
            margin:0;  
        }
        .sectionFooter-title .vert{
            white-space: nowrap;
        }
        .sectionFooter-main{
            color:#555;
            line-height:1.3;
            background-image:url(../images/deco/chevron.svg);
            background-repeat:no-repeat ;
            background-position:right 3em top 50%;
            background-size: 1em auto;
            padding-right:5em;
            margin-top:1.5em;
        }
        .sectionFooter-main-link{
            display:inline-block;
            color:#333;
            text-decoration:none;
            border-bottom:1px solid #999;
        }
        .sectionFooter-main.zoneLink:hover{
            color:#000;
        }
        .sectionFooter-main.zoneLink:hover .sectionFooter-main-link,
        .sectionFooter-main-link:hover{
            text-decoration:none;
            border-bottom-color: #000;
        }

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

@media screen and  (max-width: 767px){
    .ftlHTML {
        font-size: calc( 14px + (20 - 14) * (100vw - 320px) / (1024 - 320) );
    }
    #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;
    }

    .sectionHeader-title,
    .section-title{
        font-size:2.1em;
    }
}


@media screen and (max-width: 640px){
    .sectionHeader{
        display:block;
        padding:1.5em 1.5em 0 1.5em;
    }
    .sectionHeader-main,
    .sectionHeader-visuel    {
        width:100%;
        padding:0
    }
    .sectionHeader-visuel{
        margin-top:1em;
    }

    .sectionMain{
        max-width:480px;
        margin:0 auto;
    }
    .section--1{
        background-image:none;
        padding:0 12.5% 0 5%;
    }
    .section--2{
        background-image:none;
        padding:0 5% 0 12.5%;
    }
    .section--3{
        background-image:none;
        padding:0 10.9375% 0 6.5625%;
    }
    .section--4{
        background-image:none;
        padding:0 6.25% 0 11.25%;
    }
    .section--5{
        background-image:none;
        padding:0 12.5% 0 5.3125%;
    }
    .pathMob{
        display:block;
        width:100%;
    }
    .pathMob--1{
        margin-bottom:-6.4em
    }
    .pathMob--2{
        margin-top:-9em
    }
    .pathMob--3{
        margin-bottom:-6.4em
    }
    .pathMob--4{
        margin-top:-8em;
        margin-bottom:-11em;
    }
    .blkDescription:after{
        width:2em;
        height:3.28em;
    } 
    .section--1 .blkDescription:after{ 
        top:-8px;
        right:2em;        
        transform: rotate(180deg);
        transform-origin: top right;
    }  
    .section--2 .blkDescription:after{
        top:0;
        right:1em;        
        transform:none;
    }
    .section--3 .blkDescription:after { 
        display:none;
    }      
    .section--4 .blkDescription:after{
        top:-8px;
        right:1.8em;        
        transform: rotate(180deg);
        transform-origin: top right;
    }
    .section--5 .blkDescription:after{
        width:1.5em;
        height:2.46em;
        top:-8px;
        right:2em;        
        transform: rotate(180deg);
        transform-origin: top right;
    }
    .blkDescription-txt:first-child,
    .blkDescription-accroche:first-child {
        padding-right:0;
    }

}

@media screen and (max-width: 480px){
    .sectionHeader {
        padding: 0;
    }
    .sectionHeader-title {
        padding: 0.5em;
        background-color:#FFF;
        text-align:center;
    }
    .sectionHeader-title .vert{
        font-size:1.5em;
    }
    .sectionHeader-intro{
        padding: 1.5em 1.5em 1em 1.5em;
        margin:0;
    }

    .section-title {
        font-size: 2.3em;
    }
    .blkDescription {
        padding: 1.5em 1.5em 1em 1.5em;
    }

    .sectionFooter {
        padding: 0 1em 1em 1em;
    } 
    .sectionFooter:after{
        display:none;
    }
        .sectionFooter-title{
            font-size:1.4em;
        }
        .sectionFooter-main{
            background-position:right 1em bottom;
            padding-right:4em;
            margin-top:0.5em;
        }

}
@media screen and (max-width: 360px){



}