/* CSS Document - REDAC 2019 */

/* =============================================================================
   $Layouts
   ========================================================================== */

.section.S_top{
    border-bottom: 1px solid #e6e6e6;
    border-bottom: 1px solid var(--lightGrey);
}

@media screen and (min-width: 1000px) {
    body {
        padding-top: 150px;
    }
    .section{
        padding: 0 16px 0 17px;
    }
    .section.S_bottom{
        padding: 24px 0 0 0;
    }
}

.constrain{
    position: relative;
    width: 980px;
    margin: auto;
}

.constrain::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

.choiceEdition {    
    height: 100vh;
    background-color: #fff;
    color: #212121;
    color: var(--darkGrey);
    width: 100%;
    display: none;
    z-index: 98;
    overflow-y: auto;
}

@media screen and (min-width: 1000px) {
    .choiceEdition {
        overflow: auto;
        height: auto;
    }
}
    .choiceEdition .title {
        border-bottom: 1px solid #F4f4f4;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 4.9rem;
        color: #757575;
        color: var(--grey);
    }

    #closedChoiceEdition{
        position: absolute;
        top: 13px; 
        right: 14px;
        cursor: pointer;
    }

    #closedChoiceEdition,
    .modalClose.icon_close.after,
    .boxSearch .icon_close.after,
    #createAccount .icon_close.after,
    #validationDropdown .icon_close.after {
        display: block;
    }

    #closedChoiceEdition::after,
    .modalClose.icon_close.after::after,
    .boxSearch .icon_close.after::after,
    #navHorizontal .nav_niv2 .icon_close.after::after,
    #createAccount .icon_close.after::after,
    #validationDropdown .icon_close.after::after {
        margin: 0;
        position: relative;
        line-height: 26px;
        display: block;
        color: #000;
    }
    
    #closedChoiceEdition::before,
    .modalClose.icon_close.after::before,
    .boxSearch .icon_close.after::before,
    #navHorizontal .nav_niv2 .icon_close.after::before,
    #createAccount .icon_close.after::before,
    #validationDropdown .icon_close.after::before {
        content: "";
        top: 50%;
        left: 50%;
        background-color: transparent;
        width: 26px;
        height: 26px;
        display: block;
        position: absolute;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.15s ease-in-out;
    }
    
    #closedChoiceEdition:hover::before,
    .modalClose.icon_close.after:hover::before,
    .boxSearch .icon_close.after:hover::before,
    #navHorizontal .nav_niv2 .icon_close.after:hover::before,
    #createAccount .icon_close.after:hover::before,
    #validationDropdown .icon_close.after:hover::before {
        background-color: #eaeaea;
    }

@media screen and (max-width: 999px) {
    .choiceEdition .constrain{
        padding: 0 20px;
    }
}

/* ------------- A virer ----------------- */
#pub_p0 {
    display: none;
}
/* ------------- A virer ----------------- */

header, #header{
    width: 100%;
    color: #FFF;
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: 101;
}
.skin_red1 .wrapperHeader {
    background-color: #e3013a;
    background-color: var(--red1);
}
.skin_red2 .wrapperHeader {
    background-color: #e30613;
    background-color: var(--red2);
}
.skin_red .wrapperHeader {
    background-color: #e2000b;
    background-color: var(--red);
}
.skin_blue1 .wrapperHeader {
    background-color: #0069b4;
    background-color: var(--blue1);
}
.skin_blue2 .wrapperHeader {
    background-color: #0076c0;
    background-color: var(--blue2);
}
.skin_blue .wrapperHeader {
    background-color: #0068b1;
    background-color: var(--blue);
}
.skin_white .wrapperHeader {
    background-color: #ffffff;
    background-color: var(--white);
}
    .wrapperHeader {
        position: relative;
        height: 150px;
        transition: all 0.3s ease-in-out;
    }
    body:not(.layout_light) .wrapperHeader::before {
        content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        top: 80px;
        background-color: rgba(255, 255, 255, 0.25);
        opacity: 1; 
        transition: opacity 0.3s ease-in-out;
        overflow: hidden;
    }

    #header .headerTopLeft,
    #header .headerTopRight {
        position: relative;
        height: 50px;
        z-index: 16;
    }
    #header .headerTopLeft{
        padding-left: 16px;
        float: left;
        transition: height 0.3s ease-in-out;
    }

    #header .headerTopRight{
        /* display: block; */
        /* height: 80px; */
        max-width: 50%;
        opacity: 1;
        padding-right: 16px;
        float: right;
        text-align: right;
        transition: all 0.3s ease-in-out;
    }

    @media screen and (min-width: 1000px) {
        #header .headerTopRight {
            max-width: none;
            text-align: left;
        }
        
        #header .headerTopLeft,
        #header .headerTopRight {
            height: 80px;
        }
    }

    #header .headerTopLeft > * {
        vertical-align: top;
    }
    #header .headerTopRight a {
        vertical-align: middle;
    }
    #header .headerTopRight .bt_special {
        margin-top: 0;
        margin-bottom: 0;
    }
            
    #header .headerBottom{
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 70px;
        top: 80px;
        left: 0;
        transition: all 0.3s ease-in-out;
        z-index: 13;
        margin-left: 0;
        margin-right: 0;
    }
    
    #header .headerBottom .boxSearch .constrain {
        height: 70px;
        transition: all 0.3s ease-in-out;
    }

body:not(.layout_light).collapse header .wrapperHeader::before {
    opacity: 0;
}
    .collapse #header .headerTop{
        height: 70px;
        border-color: transparent;
    }
    .collapse #header .headerBottom{
        top: 0;
        z-index: 15;
        width: 100%;
    }

.layout_1c h1 {
    margin-top: 25px;
}

.layout_1c .section {
    margin-top: 32px;
}

.layout_1c .section.S_top, 
.layout_1c .section.S_bottom {
    margin-top: 0;
}

@media screen and (min-width: 1000px) and (max-width: 1320px) {    
    .collapse #header .headerTopRight {
        /* display: none; */
        opacity: 0;
        z-index: 0;
    }
    .collapse #header .headerBottom {
        right: 0;
        transform: translateX(0);
        height: 70px;
    }
    
    #header .headerBottom #navHorizontal > ul {
        overflow-x: auto;
        /*margin: 0;*/
    }
}


@media screen and (max-width: 999px) { 
    .constrain{
        width: 100%;
    }
    .wrapperHeader{
        height: 100px;
    }
    .collapse .wrapperHeader,
    .collapse  #header .headerTopLeft,
    .collapse  #header .headerTopRight{
        height: 50px;
    }
    body:not(.layout_light) .wrapperHeader::before{
        top: 50px;
    }
    #header .headerBottom{
        top: 50px;
        height: auto;
    }
    #header .headerBottom .boxSearch .constrain {
        height: 50px;
    }
}

@media screen and (max-width: 600px) { 
    #header .headerTopLeft {
        padding-left: 16px;
    }

    .layout_light #header .headerTopLeft {
        margin-top: 20px;
    }
}

.section{
    overflow: hidden;
    position: relative;
    padding: 0;
    border-bottom: 1px solid #e6e6e6;
    border-bottom: 1px solid var(--lightGrey);
}

    .layout_light .section {
        border-bottom: none;
    }

@media screen and (max-width: 999px) {
    .section{
        padding: 0 16px 0 17px;
    }
}

.section.media,
.section .media,
.darkSection {
    background-color: #212121;
    background-color: var(--darkGrey);
    padding: 20px 15px 20px 17px;
}

    .section.media .corps,
    .section .media .corps,
    .darkSection {
        color: #FFFFFF;
    }

.headerPage{
    margin: 12px 0 0 0;
    padding-bottom: 0;
    clear: both;
    border: none !important;
}

    .headerPage .constrain h1{
        line-height: 3.4rem;
        font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 2.8rem;
        margin: 0 0 10px 0;
        font-weight: 600;
    }

#navBurger {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11000;
}

#navBurger .burgerOverlay {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.navBurgerWrapper {
    display: block;
    position: relative;
    height: 100%;
    width: 360px;
    background-color: #fff;
    padding-top: 76px;
    margin-left: -100%;
    max-width: 999px;

}
@media screen and (max-width: 999px) {
    .navBurgerWrapper {
        width: calc(100% - 70px);
    }
}

.burgerList {
    height: calc(100vh - 76px - 48px);
    overflow-x: hidden;
    overflow-y: auto;
}

footer{
    background-color: #212121;
    background-color: var(--darkGrey);
    padding: 32px 0 32px 0;
}

    .layout_light footer {
        padding: 25px 64px;
        background-color: #F4F4F4;
        border-top: 1px solid #e6e6e6;
        border-top: 1px solid var(--lightGrey);
    }

    footer * {
        color: #FFF;
        font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 1.4rem;
        line-height: 2.2rem;
    }
    
        .layout_light footer * {
            line-height: 3rem;
            color: #757575;
            color: var(--grey);
        }

    .footerTop:not(:empty) {
        overflow: hidden;
        padding: 0 0 33px 0;
    }

    .HRonTop{
        border-top: 1px solid rgba(255,255,255,0.15);
    }    

    .layout_light .footerTop {
        padding-bottom: 0;
    }

        .layout_light .footerTop .nav_model06 {
            display: none;
        }
    
        .layout_light .footerTop::before, 
        .layout_light .footerBottom::after { 
            content: none;
        }

        .layout_light .footerBottom {
            border-top: none;
            text-align: left;
        }

    .footerBottom .nav_model04,
    .footerBottom .trustLogos {
        display: inline-block;
    }

    .footerBottom .trustLogos { 
        margin: 24px 0 0 0;
        font-size: 0;
        line-height: 0;
    }
    
    .footerBottom .trustLogos > *:not(:last-child) {
        margin-right: 16px;
    }

@media screen and (min-width: 600px) {
    .footerBottom .trustLogos {
        float: right;
    }
}

@media screen and (min-width: 1000px) {
    footer {
        padding: 65px 0 32px 0;
    }
    .footerTop::before {
        content: '';
        display: inline-block;
        float: left;
        min-height: 38px;
        max-height: 80px;
        min-width: 180px;
        max-width: 216px;
        margin: 0;
        background-repeat: no-repeat; 
        background-size: contain; 
        background-position: 50% 50%;
    }
    .ALS .footerTop::before{background-image: url(../images/logos/ALS@3x.png);}
    .DNA .footerTop::before{background-image: url(../images/logos/DNA@3x.png);}
    .JDE .footerTop::before{background-image: url(../images/logos/JDE.png);}
    .JSL .footerTop::before{background-image: url(../images/logos/JSL.png);}
    .LBP .footerTop::before{background-image: url(../images/logos/LBP.png);}
    .LDL .footerTop::before{background-image: url(../images/logos/LDL_v2.png);}
    .LER .footerTop::before{background-image: url(../images/logos/LER@3x.png);}
    .LPR .footerTop::before{background-image: url(../images/logos/LPR@3x.png);}
    .LRL .footerTop::before{background-image: url(../images/logos/LRL.png);}
    .LYP .footerTop::before{background-image: url(../images/logos/LYP.png);}
    .SCH .footerTop::before{background-image: url(../images/logos/SCH.png);}
    .VOM .footerTop::before{background-image: url(../images/logos/VOM@3x.png);}

    .collapse .wrapperHeader {
        height: 70px;
    }
}

@media screen and (max-width: 999px) {
    .footerBottom {
        text-align: center;
        margin: 0 16px;
    }
    .footerBottom::after{
        content: '';
        display: block;
        min-height: 56px;
        max-height: 64px;
        min-width: 140px;
        max-width: 216px;
        margin: 33px auto;
        background-repeat: no-repeat; 
        background-size: contain; 
        background-position: 50% 50%; 
    }


    .ALS .footerBottom::after{background-image: url(../images/logos/ALS@3x.png);}
    .DNA .footerBottom::after{background-image: url(../images/logos/DNA@3x.png);}
    .JDE .footerBottom::after{background-image: url(../images/logos/JDE.png);}
    .JSL .footerBottom::after{background-image: url(../images/logos/JSL.png);}
    .LBP .footerBottom::after{background-image: url(../images/logos/LBP.png);}
    .LDL .footerBottom::after{background-image: url(../images/logos/LDL_v2.png);}
    .LER .footerBottom::after{background-image: url(../images/logos/LER@3x.png);}
    .LPR .footerBottom::after{background-image: url(../images/logos/LPR@3x.png);}
    .LRL .footerBottom::after{background-image: url(../images/logos/LRL.png);}
    .LYP .footerBottom::after{background-image: url(../images/logos/LYP.png);}
    .SCH .footerBottom::after{background-image: url(../images/logos/SCH.png);}
    .VOM .footerBottom::after{background-image: url(../images/logos/VOM@3x.png);}

    /* iframe {
        height: auto;
    } */
}

/*  =============================================================================
    Habillage
    ========================================================================== */

#ad_portal {
    background-position: center 150px !important;
    position: relative;
    transition: background-position 0.3s ease-in-out;
}

.ad_portal_overlay {
    content: "";
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
}

/* .ContentDetailComponent #ad_portal::before {
    content: "";
    display: block;
    width: 100%;
    max-width: 1020px;
    background-color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 200px;
    bottom: 0;
    z-index: 0;
} */

.layout_light #ad_portal{
    padding-top: 50px;
}

.collapse #ad_portal {
    background-position: center 70px !important;
}


/*  =============================================================================
    $Grid
    ========================================================================== */
  
.grid {
    display: block;
    position: relative;
}
.grid::after {
    content: "";
    display: block;
    clear: both;
}

[class*="col_"] {
    display: inline-block;
    position: relative;
    float: left;
}

.col_20 {
    width: 20%;
}
.col_25 {
    width: 25%;
}
.col_33 {
    width: 33.333%;
}
.col_40 {
    width: 40%;
}
.col_50 {
    width: 50%;
}
.col_60 {
    width: 60%;
}
.col_66 {
    width: 66.666%;
}
.col_75 {
    width: 75%;
}
.col_80 {
    width: 80%;
}
.col_100 {
    width: 100%;
}

.col_sticky {
    width: 300px;
}

.col_sticky > :not(:first-child) {
    margin-top: 30px;
}

/*.col_sticky .mod:last-of-type {
    margin-bottom: 0;
}*/

@media screen and (max-width: 999px) {
    .col_sticky {
        width: 100%;
    }

    .col_sticky .mod:last-of-type {
        margin-bottom: 45px;
    }
}

.col_main {
    width: 100%;
    padding-bottom: 32px;
}

.col_main > :not(.contentList) {
    clear: both;
}

@media screen and (min-width: 1000px) {
    .col_main {
        width: calc(100% - 337px);
        margin-right: 37px;
        padding: 0 0 32px 0;
    }

    .col_main.brandContent  {
        width: 100%;
        margin-right: 0;
    }
}

.push_20 {
    margin-left: 20%;
}
.push_25 {
    margin-left: 25%;
}
.push_33 {
    margin-left: 33.333%;
}
.push_40 {
    margin-left: 40%;
}
.push_50 {
    margin-left: 50%;
}
.push_60 {
    margin-left: 60%;
}
.push_66 {
    margin-left: 66.666%;
}
.push_75 {
    margin-left: 75%;
}
.push_80 {
    margin-left: 80%;
}