/* CMO - 2021 CSS layout - navigation */

/* =============================================================================
   $Layout
   ========================================================================== */
.wrapper{width: 100%; /*min-height: 100vh;*/ z-index: 2; position: relative; text-align: left; padding: 25px 0;}
.constrain {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    min-height: 100%;
}
@media screen and (max-width: 1160px){
    .constrain {
        width: 100%;
    }
}
section{position: relative;}

.column{float: left;}
.columnMain{ width: calc(100% - 370px); margin: 0 50px 0 0; overflow: hidden;}
.columnAside{ width: 320px; overflow: hidden;}
.columnMain.medium{ width: calc(100% - 430px); margin: 0 50px 0 0; padding: 0 0 60px 0;  overflow: hidden;}
.columnAside.medium{ width: 380px; overflow: hidden;}

.layout_1c, 
.layout_1c_1, 
.layout_medias,
.layout_detail{position: relative;}

    .layout_detail .detail {
        display: grid;
        grid-template-columns: 1fr 230px;
        gap: 24px;
        align-items: start;
        position: relative;
    }

    .layout_detail .mainContentDetail {
        margin: 0 40px 0 0;
        max-width: 866px;
    }
.Equipe .layout_detail .mainContentDetail, .Dossier .layout_detail .mainContentDetail{ width: calc(100% - 340px);margin: 0 40px 0 0;}

@media screen and (min-width: 813px) {
    .layout_detail .asideContentDetail {
        position: sticky;
        top: 78px;
    }

        .layout_detail .asideContentDetail .scrollContent {
            position: sticky;
            top: 78px;
        }
}
.Equipe .layout_detail .asideContentDetail, .Dossier .layout_detail .asideContentDetail {width: 300px;}


.layout_medias{background: #ededf3;}

.layout_medias h1 { margin: 0 0 20px 0; text-align: center;}
.layout_medias h1 span { text-indent: -9999px}

.layout_medias h1::before {
    background: url(/files/fr/images/logoCMO_medias_bleu.png) no-repeat 50% 50%;
    content: '';
    display: block;
    height: 50px;
}

.BookmarkedContentListComponent h1, .ContentListComponent h1 { margin: 0 0 30px 0;}
@media screen and (max-width: 645px){
.BookmarkedContentListComponent .contentList article {flex-direction: column;}
.BookmarkedContentListComponent .contentList article.element .corps {width: auto;}
}
.BookmarkedContentListComponent .contentList article.element figure {float: none; width: auto;}

.PMT .layout_1c_1 { background: url(/files/fr/images/bg_pagePMT.png) no-repeat 100% 100%;}

@media screen and (max-width: 1024px) {
    .wrapper {padding: 10px;}
    .constrain {width: 100%;}



    .mobileScroll {
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media screen and (max-width: 812px) {
    .columnMain, .columnMain.medium, .columnAside, .columnAside.medium {
        width: 100%;
        float: none;
    }
    .layout_detail .mainContentDetail, .Equipe .layout_detail .mainContentDetail, .Dossier .layout_detail .mainContentDetail {
        width: 100%;
        margin: 0 40px 0 0;
    }
    .Equipe .layout_detail .asideContentDetail, .Dossier .layout_detail .asideContentDetail, .Equipe .layout_detail .asideContentDetail, .Dossier .layout_detail .asideContentDetail {
        width: 100% !important;
    }
    .layout_detail .detail {
        grid-template-columns: 1fr;
        display: block;
    }
    .layout_detail .asideContentDetail {
        width: 100%;
        position: relative;
        z-index: 10;
    }
}

/* =============================================================================
   $LayoutConnect / GXCO 
   ========================================================================== */
    body.connect {
        padding: 60px 0 0 0;
    }

    .layout_connect {
        background: #EFEFEF;
        padding: 30px 0;
    }

        .layout_connect h1 {
            text-align: center;
            font-size: 2rem;
            margin: 0 0 20px 0;
        }

        .layout_light .S_main {
            background: var(--color-background);
            padding: 20px;
        }

        .layout_light h1 {
            text-align: center;
            margin: 0 0 50px 0;
        }

    .GXCO_connectBox {
        width: 600px;
        margin: 0 auto;
        padding: 30px;
        border-radius: 10px;
        -webkit-box-shadow: -1px 4px 30px 0 rgba(0, 0, 0, .15);
        box-shadow: -1px 4px 30px 0 rgba(0, 0, 0, .15);
        background: var(--color-background);
    }

        .GXCO_connectBox .logo_connect{
            display: block;
            width: 288px;
            height: 35px;
            margin: 10px auto 30px auto;
        }

    #showPWD {
        position: absolute;
        right: 0;
        z-index: 2;
        cursor: pointer;
    }

    .GXCO_connectBox .listAction {
        font-size: 1.26rem;
        overflow: hidden;
        margin: 10px 0;
    }

        .GXCO_connectBox .listAction a {
            text-decoration: underline;
        }

    .GXCO_connectBox .goBack {
        font-size: 1.3rem;
        display: inline-block;
        margin: 10px 0 0 0;
    }

    .GXCO_logout {/*
        position: absolute;
        left: 50%;
        top: 50%;*/
        position: initial;
        /*transform: translate(-50%,-50%);*/
        max-width: 460px;
        min-width: 420px;
        margin: 0 auto;
        padding: 30px;
        border-radius: 10px;
        -webkit-box-shadow: -1px 4px 30px 0 rgba(0, 0, 0, .15);
        box-shadow: -1px 4px 30px 0 rgba(0, 0, 0, .15);
        background: var(--color-background);
    }

        .GXCO_logout .blocmsg {
            text-align: center;
        }

    .bottomConnect {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        font-size: 1.3rem;
        background: var(--color-background);
    }

        .bottomConnect a:hover {
            text-decoration: underline;
        }

    @media screen and (max-height: 500px) {
        .layout_connect {
            height: auto;
        }

        .GXCO_connectBox {
            position: relative;
            top: initial;
            left: initial;
            transform: none;
            max-height: 320px;
            overflow-y: scroll;
        }

        .bottomConnect {
            position: relative;
        }
    }

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

    .GXCO_connectBox {
        position: relative;
        top: initial;
        left: initial;
        transform: none;
        max-height: auto;
        overflow-y: scroll;
        width: 100%;
    }

}

/* =============================================================================
   $Header : Layout
   ========================================================================== */
#header{
    border-top: 4px solid #363636;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 3;
}

.headerTop {

    height: 56px;
    color: var(--color-invariant_white);
    background: linear-gradient(90deg, var(--gradient-main));
}

header .logo {
    position: absolute;
    height: 50px;
    padding: 5px 0 0 10px;
    display: block;
}

@media screen and (max-width: 320px) {
    header .logo img{
        width: 90%
    }
}

.collapse header .logo{margin: 0 0 0 50px;}

.showMenu {
    display: none;
    height: 50px;
    text-align: center;
    z-index: 20;
    background: transparent;
    margin: 0 0 0 10px;
    cursor: pointer;
}

.collapse .showMenu {
    display: inline-block;
    position: absolute;
}

.showMenu em {
    font-size: 1.1rem;
    text-transform: uppercase;
    font-style: normal;
}

.showMenu.open em {color: var(--color-invariant_white);}

.showMenu span {
    width: 30px;
    height: 3px;
    background-color: var(--color-background);
    display: block;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .showMenu span.l1 {
        width: 20px;
        height: 3px;
        margin: 5px 0;
    }

.showMenu.open .line:nth-of-type(2) {
    opacity: 0;
}

.showMenu.open .line:nth-of-type(1) {
    background-color: var(--color-background);
    -webkit-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
}

.showMenu.open .line:nth-of-type(3) {
    background-color: var(--color-background);
    width: 30px;
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
}

header .logo.media {
    background-image: url(/files/fr/images/logoCMO_medias.png);
}

.headerRight {
    position: absolute;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
}

    @media screen and (max-width: 1024px) {
        .headerTop {
            background: var(--navyBlueColor) !important;
            -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.16);
            box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.16);
        }
        
    }

    @media screen and (max-width: 812px) {
        .barNavH{display: none;}
        .headerRight {
            display: none;
        }
    }

    /* search */
    .search-box {
        z-index: 4;
    }


.search-txt {
    border: 1px solid #737373;
    background: var(--color-background);
    padding: 3px 5px;
    font-size: 14px;
    transition: 0.4s;
    line-height: 32px;
    border-radius: 4px 0 0 4px;
    vertical-align: bottom;
}

        .search-txt::placeholder {
            padding-left: 10px;
            font-style: italic;
            color: #5E5E5E;
        }

.search-btn {
    background-color: #CCC;
    width: 40px;
    height: 40px;
    border-radius: 0 4px 4px 0 !important;
}
    /* .search-btn:focus, .search-btn:hover {
        outline: 2px solid #212121;
    } */

    .search-btn img {
        vertical-align: middle;
    }
  
        .barNavBurger .search-burger {
            background-color: #002976;
            height: 60px;
            padding: 10px 20px;
            position: relative;
            color: var(--color-invariant_white);
        }

    .barNavBurger .search-burger .ico_search.before::before {
        color: var(--color-invariant_white);
    }
    .barNavBurger .search-txt-burger {
        width: calc(100% - 46px);
        color: #707070;
        border: none;
        background: rgba(255,255,255,1);
        padding: 2px 40px 0 20px;
        font-size: 14px;
        transition: 0.4s;
        line-height: 36px;
        border-radius: 4px;
        font-style: italic;
        border: 1px solid #898989;
    }

        .barNavBurger .search-txt-burger::placeholder {
            color: #707070;
        }

    .barNavBurger .search-btn-burger {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: 0.4s;
        position: absolute;
        right: 20px;
        top: 10px;
        border-radius: 0 4px 4px 0;
        background-color: var(--color-background);
        color: var(--navyBlueColor);
        margin: 1px;
    }

    /* bookmark */
    .GRDC_bookmark {
        display: block;
        float: left;
        position: relative;
    }

        .GRDC_bookmark .ico_bookmark {
            height: 56px;
            width: 50px;
            text-align: center;
            line-height: 52px;
            display: block;
            font-size: 0;
        }

            .GRDC_bookmark .ico_bookmark:before {
                color: var(--color-invariant_white);
                display: block;
                line-height: 56px;
                font-size: 2.8rem !important;
                content: '\e91e';
            }

        .GRDC_bookmark:hover {
            background-color: rgba(255,255,255,0.40);
        }
        .GRDC_bookmark:hover a{
            text-decoration: none;
        }


    /* Account */
    .GPRF_Account {
        display: block;
        float: left;
    }

        .GPRF_Account .ico_user {
            height: 56px;
            width: 50px;
            text-align: center;
            line-height: 56px;
            display: block;
        }

            .GPRF_Account .ico_user:before,
            .GPRF_Account .ico_user:after {
                color: var(--color-invariant_white);
                display: block;
                line-height: 56px;
            }

        .GPRF_Account .nickName {
            display: none;
        }

        .GPRF_Account:hover {
            background-color: rgba(255,255,255,0.40);
        }

    .GPRF_updateProfile, .GXCO_changePassword, .GXCO_ClientAreaDevice, .GSOC_concoursParticipation {
        border: 1px solid #EEE;
        padding: 20px;
        border-radius: 10px;
        float: left;
        width: 100%;
    }

    .GSOC_concoursParticipation {
        float: none;
    }

    #submitUpdateProfile, #updatePassword, #concoursParticipation {
        position: relative;
    }

    .bloctxt {
        font-size: 1.4rem;
    }

    .infoAvatar {
        font-size: 1rem;
    }

    .blocButton {
        text-align: center;
    }

    .GPRF_updateProfile .formRow.uploadAvatar {
        text-align: center;
        padding: 20px;
    }

    .labelField {
        margin-bottom: 10px;
    }

    #deleteAvatar {
        display: block;
        cursor: pointer;
        font-size: 1.4rem;
    }

        #deleteAvatar:hover {
            text-decoration: underline;
        }

        #deleteAvatar::before {
            content: "\e91c";
            font-family: var(--font-icon);
            padding: 0 5px 0 0;
        }

    #imageAvatar {
        border-radius: 10px;
    }

.headerRight .GPRF_profilCard {
    display: none;
}

    .barNavBurger .GPRF_Account {
        float: none;
        background-color: #303982;
        color: var(--color-invariant_white);
        padding: 0 45px;
    }

        .barNavBurger .GPRF_Account .ico_user {
            width: auto;
            color: var(--color-invariant_white);
            text-align: left;
        }

            .barNavBurger .GPRF_Account .ico_user:before, .barNavBurger .GPRF_Account .ico_user:after {
                display: inline-block;
                padding: 0 15px 0 0;
            }

        .barNavBurger .GPRF_Account .nickName {
            display: inline-block;
            font-size: 1.3rem;
        }



    /* =============================================================================
   $Footer : Layout
   ========================================================================== */
#footer {
    background-color: var(--bgDark);
    color: var(--color-invariant_white);
    overflow: hidden;
    font-size: 1.3rem;
}

        #footer .footerContent {
            overflow: hidden;
            margin: 20px 0;
        }

            #footer .footerContent .logoCMO {
                width: 240px;
            }

            #footer .footerContent p.link {
                margin: 10px 0;
            }

            #footer .footerContent a {
                color: var(--color-invariant_white);
                display: inline-block;
                padding: 0 8px;
            }

            #footer .footerContent .btModel02 {
                margin: 0 0 0 20px;
            }

                #footer .footerContent a:hover, #footer .footerContent a:focus {
                    color: rgba(255,255,255,0.8);
                    text-decoration: underline;
                }
            #footer .footerContent .nlBlock p::after{
                content: '';
                background: url(../images/line_plus.svg) no-repeat 0 50%;
                height: 10px;
                width: 100%;
                display: inline-block;
                margin: 20px 0 5px 0;
            }
            #footer .link {
                display: flex;
            }

/*
            #footer .footerContent .nlBlock {
                
                background-color: #F9F90B;
                padding: 20px;
                color: #212121;
                
            }

                #footer .footerContent .nlBlock p {
                    margin: 0;
                    text-align: center;
                    font-size: 1.5rem;
                }

                #footer .footerContent .nlBlock a {
                    padding: 0 30px;
                    background-color: var(--favorite);
                }
*/

        #footer .goToAnchor {
            display: block;
            position: fixed;
            bottom: 60px;
            right: 20px;
            background-color: rgba(0,0,0,0.42);
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: var(--color-invariant_white);
            cursor: pointer;
            z-index: 20;
            border-radius: 50%;
            font-size: 0;
            transition: all .2s ease-in-out;
        }

            #footer .goToAnchor:hover, #footer .goToAnchor:focus {
                background-color: rgba(0,0,0,1);
            }



    .footerLight {
        text-align: center;
        font-size: 1.2rem;
        margin: 20px;
    }

        .footerLight a:hover {
            text-decoration: underline;
        }


    @media screen and (max-width: 812px) {
        #footer .footerContent {
            padding: 0 10px;
        }

            #footer .footerContent .logoCMO {
                background-size: 100%;
                width: 100%
            }

            #footer .footerContent p {
                margin: 20px 10px;
            }

        #footer .goToAnchor {
            display: none;
        }
    }

    @media screen and (max-width: 480px) {
        #footer .footerContent .logoCMO {
            background-size: initial;
            width: initial
        }
    }

    /* =============================================================================
   $Navigation : Layout / module
   ========================================================================== */
    .barNavH {
        height: 50px;
        background-color: #F7F7F7;
    }
   
.collapse .barNavH {
    display: none;
} /*
.collapse .barNavH .constrain{
    margin: 0;
}

    @media screen and (max-width: 1366px) {
        
        .collapse #header .constrain {
            width: calc(100% - 30px);
            margin: 0 15px;
        }

        .collapse .barNavH {
            left: 339px;
        }

        .collapse .barNavH ul{
            display: inline-block;
        }


        .barNavH .constrain {
            width: auto;
            display: inline-block;
        }
    }

    @media screen and (max-width: 1400px) {
        .barNavH {
            display: none;
        }
    }
*/
    /* model01 : navigation horizontale */
    .nav_model01 ul li {
        display: none;
        position: relative;
        margin: 0 8px 0 0;
        font-family: var(--font-main);
        font-weight: 500;
        font-size: 1.36rem;
    }

        .nav_model01 ul li.active {
            display: inline-block;
        }

        .nav_model01 ul li a::before {
            background-color: rgba(255,255,255,0.9);
            content: "";
            width: 100%;
            height: 5px;
            display: block;
            -webkit-transition: height .3s ease-in;
            -moz-transition: height .3s ease-in;
            -o-transition: height .3s ease-in;
            transition: height .3s ease-in;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .nav_model01 ul li a::after {
            background-color: #333;
            content: "";
            width: 100%;
            height: 5px;
            display: block;
            transition: height .3s ease-in;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .nav_model01 ul li:hover a::before, .nav_model01 ul li.selected a::before, .nav_model01 ul li a:focus::before {
            height: 50px;
            animation-duration: 3s;
            z-index: -1;
            text-decoration: underline;
        }

        .nav_model01 ul li.lightBlueColor a::after {
            background-color: #1286C8;
            background-color: var(--defaultColor);
        }

        .nav_model01 ul li.pinkColor a::after {
            background-color: rgba(255,21,99,1);
            background-color: var(--pinkColor);
        }

        .nav_model01 ul li.navyBlueColor a::after {
            background-color: rgb(0,51,148);
            background-color: var(--navyBlueColor);
        }

        .nav_model01 ul li.purpleColor a::after {
            background-color: var(--purpleColor);
        }

        .nav_model01 ul li a {
            display: inline-block;
            padding: 0 18px;
            line-height: 50px;
            z-index: 2;
            position: relative;
            color: #212121;
        }

        .nav_model01 ul li.pmt {
            display: inline-block;
            float: right;
            width: 303px;
        }

            .nav_model01 ul li.pmt a {
                width: 100%;
                text-align: center;
                font-size: 0;
            }

            .nav_model01 ul li.pmt:after {
                content: "";
                width: 100%;
                height: 50px;
                top: 0;
                display: block;
                position: absolute;
                background-image: url(/files/fr/images/PMT/logo-pmt-menu.png);
                background-position: center;
                pointer-events: none;
                background-repeat: no-repeat;
                z-index: 9;
            }

            .nav_model01 ul li.pmt.selected:after,
            .nav_model01 ul li.pmt:hover:after,
            .nav_model01 ul li.pmt:has(a:focus):after  {
                background-image: url(/files/fr/images/PMT/logo-pmt-menu-actif.png);
            }
                .nav_model01 ul li.pmt a::after {
                    background: linear-gradient(90deg, var(--gradient-main));
                }

body:not(.collapse) .nav_model01 ul li.pmt a::before {
    background: linear-gradient(90deg, var(--gradient-main));
}

    .collapse .nav_model01 ul li a {
        color: var(--color-invariant_white);
    }

    .collapse .layout_medias .nav_model01 ul li a {
        color: #212121;
    }

    .nav_model01 ul li.selected a, .nav_model01 ul li:hover a, .nav_model01 ul li a:focus {
        color: #212121;
        text-decoration: underline;
    }

    body:not(.collapse) .nav_model01 ul li.selected a, body:not(.collapse) .nav_model01 ul li:hover a, body:not(.collapse) .nav_model01 ul li a:focus {
        color: var(--color-invariant_white);
        text-decoration: underline;
    }

    body:not(.collapse) .nav_model01 ul li a::before {
        background-color: #333;
    }

    body:not(.collapse) .nav_model01 ul li.lightBlueColor a::before {
        background-color: #1286C8;
        background-color: var(--defaultColor);
    }

    body:not(.collapse) .nav_model01 ul li.pinkColor a::before {
        background-color: rgba(255,21,99,1);
        background-color: var(--pinkColor);
    }

    body:not(.collapse) .nav_model01 ul li.navyBlueColor a::before {
        background-color: rgb(0,51,148);
        background-color: var(--navyBlueColor);
    }

    body:not(.collapse) .nav_model01 ul li.purpleColor a::before {
        background-color: var(--purpleColor);
    }

    /* model01 : variante instant medias */

    .layout_medias .nav_model01 ul {
        text-align: center;
        padding: 4px 0;
        margin: 20px 0 30px;
    }

        .layout_medias .nav_model01 ul::before,
        .layout_medias .nav_model01 ul::after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            width: 80%;
            height: 3px;
            background-color: var(--color-background);
        }

@media screen and (max-width: 812px) {
    .layout_medias .nav_model01 ul::before,
    .layout_medias .nav_model01 ul::after {
        width: 100%;
    }
}

    .layout_medias .nav_model01 ul li a::after {
        display: none;
    }

    .layout_medias .nav_model01 ul::before {
        top: 3px;
    }

    .layout_medias .nav_model01 ul::after {
        bottom: 3px;
    }

    .layout_medias .nav_model01 ul li {
        display: inline-block;
        margin-right: 16px;
        text-transform: uppercase;
        font-weight: bold;
    }

        .layout_medias .nav_model01 ul li a {
            position: initial;
            padding: 0 18px 0 52px;
            color: #333;
        }

            .layout_medias .nav_model01 ul li a::before {
                height: 0;
                background-color: var(--color-background) !important;
                z-index: -1;
            }

            .layout_medias .nav_model01 ul li a:hover::before,
            .layout_medias .nav_model01 ul li a:focus::before {
                height: 100%;
                color: var(--defaultColor);
            }

        .layout_medias .nav_model01 ul li::before {
            display: block;
            width: auto;
            height: auto;
            background-color: transparent;
            position: absolute;
            bottom: auto;
            left: 12px;
            top: 5px;
            font-family: var(--font-icon);
            font-weight: 400;
            color: #1286C8;
            font-size: 2.6rem;
            pointer-events: none;
            color: #333;
        }

        .layout_medias .nav_model01 ul li.jt::before {
            content: '\e955';
        }

        .layout_medias .nav_model01 ul li.videos::before {
            content: '\e92e';
        }

        .layout_medias .nav_model01 ul li.galeries::before {
            content: '\e947';
        }

        .layout_medias .nav_model01 ul li.dossiers::before {
            content: '\e930';
        }

        .layout_medias .nav_model01 ul li.outils::before {
            content: '\e95c';
            font-size: 2.2rem;
            margin-top: 2px;
        }

        .layout_medias .nav_model01 ul li.selected a,
        .layout_medias .nav_model01 ul li:hover a,
        .layout_medias .nav_model01 ul li:hover::before,
        .layout_medias .nav_model01 ul li a:focus,
        .layout_medias .nav_model01 ul li:focus::before {
            color: #0E70A8 !important;
        }

    @media screen and (max-width: 768px) {
        .layout_medias .nav_model01 ul li {
            font-size: 1.2rem;
            margin-right: 12px;
        }

            .layout_medias .nav_model01 ul li::before {
                font-size: 2rem;
                top: 8px;
                left: 10px;
            }

            .layout_medias .nav_model01 ul li a {
                padding: 0 8px 0 34px
            }

            .layout_medias .nav_model01 ul li.outils::before {
                font-size: 1.7rem;
            }
    }

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

        .layout_medias .nav_model01 ul li {
            font-size: 1.1rem;
            margin-right: 16px;
        }

            .layout_medias .nav_model01 ul li::before {
                font-size: 1.6rem;
                top: 5px;
            }

            .layout_medias .nav_model01 ul li.outils::before {
                font-size: 1.2rem;
            }

            .layout_medias .nav_model01 ul li a {
                line-height: 36px;
            }
    }

    /* model02 : navigation profil */
    .nav_model02 {
        overflow: hidden;
    }

        .nav_model02 ul {
            display: grid;
            grid-template-columns: repeat(auto-fit , minmax(280px, 1fr));
            grid-row-gap: 20px;
            grid-column-gap: 20px;
        }

        .nav_model02 li {
            text-transform: uppercase;
            font-family: var(--font-main);
            font-weight: 500;
            text-align: left;
            border-radius: 4px;
            display: inline-block;
            line-height: 36px;
            font-size: 1.3rem;
            padding: 10px;
            position: relative;
        }

            .nav_model02 li a::after {
                transition: width 0.5s ease-in-out;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 0;
                content: '';
                position: absolute;
                border-radius: 4px;
            }

            .nav_model02 li a:hover::after {
                transition: width 0.5s ease-in-out;
                width: 100%;
                height: 100%;
                background-color: rgba(33,33,33,0.3);
            }


            .nav_model02 li a {
                display: block;
                color: var(--color-invariant_white);
            }

            .nav_model02 li.selected:after {
                content: "";
                height: 5px;
                display: block;
                width: 100%;
                position: absolute;
                background-color: var(--navyBlueColor);
                bottom: 0;
                left: 0;
                border-radius: 0 0 4px 3px;
            }

        .nav_model02 li {
            background-color: #EEE;
        }

            .nav_model02 li a {
                color: #000;
            }

            .nav_model02 li.selected a {
                text-decoration: underline;
            }

            .nav_model02 li a::before {
                color: #000;
            }


    /* @media screen and (max-width: 1024px) {
        .nav_model02 {
            display: none;
        }
    } */

    /* model03 : navigation burger */
    .nav_model03 {
        padding: 0 20px 0 40px;
    }

    .nav_model03 li.itemLevel1 {
        display: none;
        margin: 2px 0;
    }

    .nav_model03 li.active {
        display: block;
    }

    .slideNav {
        position: fixed;
        top: 56px;
        bottom: 0;
        left: 0;
        width: 0;
        overflow-y: auto;
        z-index: 21;
        font-family: var(--font-main);
        font-weight: 500;
        background: #EEE;
        font-size: 1.36rem;
        display: flex;
        flex-direction: column;
        transition: transform 0.5s ease-in-out;
        transform: translate(-340px);
        color: #212121;
        display: none;
    }

        .slideNav.active {
            transform: translateX(0);
            width: 340px;
            display: block;
        }

    .nav_model03 h1.segment {
        margin: 20px 0 16px -20px;
        font-size: 1.8rem;
        color: #212121;
    }

        .nav_model03 h1.segment.actu::before {
            content: '\e905';
            width: 24px;
            height: 24px;
            font-family: var(--font-icon);
            padding: 0 10px 0 0;
            font-size: 2.4rem;
            color: #212121;
        }

        .nav_model03 h1.segment.profil::before {
            content: '\e90e';
            width: 24px;
            height: 24px;
            font-family: var(--font-icon);
            padding: 0 10px 0 0;
            font-size: 2.4rem;
            color: #212121;
        }

    .nav_model03 .icoProfil a::before {
        content: '';
        display: none;
    }

    .nav_model03 .nav_niv2 li {
        padding: 0 15px;
    }

    .nav_model03 .itemLevel1 a, .nav_model03 .itemLevel1 span {
        line-height: 30px;
        display: block;
        padding: 0 0 0 10px;
    }

    .nav_model03 a:hover {
        text-decoration: underline;
    }

    .nav_model03 .itemLevel1 .lightBlueColor {
        border-left: 2px solid var(--defaultColor);
    }

    .nav_model03 .itemLevel1 .navyBlueColor {
        border-left: 2px solid var(--greenColor);
    }

    .nav_model03 .itemLevel1 .pinkColor {
        border-left: 2px solid var(--pinkColor);
    }

    .nav_model03 .itemLevel1 .purpleColor {
        border-left: 2px solid var(--purpleColor);
    }

    .nav_model03 .itemLevel1 .greenColor {
        border-left: 2px solid var(--greenColor);
    }

    .nav_model03 .itemLevel1 .pmt {
        border-left: 2px solid #212121;
        position: relative;
    }

        .nav_model03 .itemLevel1 .pmt:before {
            content: "";
            left: -2px;
            top: 0;
            position: absolute;
            height: 100%;
            width: 2px;
            display: block;
            background: linear-gradient(0deg, rgba(0, 51, 148, 1) 20%, rgba(198, 0, 67, 1) 70%);
        }

    .nav_model03 a.favoriteLink:before {
        content: "\e91e";
        font-family: var(--font-icon);
        color: #ed1b4c;
        padding: 0 15px 0 0;
        margin: 0 0 0 -25px;
    }


    .nav_model03 .separate {
        border-top: 1px solid rgb(0,51,148);
        padding: 20px !important;
    }

    .nav_model01 li.hide,
    .nav_model02 li.hide,
    .nav_model03 li.hide {
        display: none;
    }

    /* =============================================================================
   Breadcrumb (GFWK) - fil d'ariane
   ========================================================================== */
    .GFWK_breadcrumb {
        overflow: hidden;
        font-size: 1.3rem;
        margin: 0 0 10px 0;
    }

        .GFWK_breadcrumb li {
            display: inline-block;
            padding: 0 5px 0 0;
        }

            .GFWK_breadcrumb li:before {
                content: '/';
                padding: 0 5px 0 0;
            }

            .GFWK_breadcrumb li:first-child:before {
                content: '';
            }

        .GFWK_breadcrumb a:hover {
            text-decoration: underline
        }

    /* =============================================================================
   Pager
   ========================================================================== */

    .pager {
        text-align: center;
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        nav {
            ol {
                display: flex;
                li {
                    &:first-child a {
                    border-radius: 4px 0 0 4px;
                    }
                    &:last-child a {
                        border-radius: 0 4px 4px 0;
                    }

                    a {
                        display: inline-block;
                        padding: 5px 10px;
                        cursor: pointer;
                        font-size: 1.36rem;
                        border: 1px solid var(--color-invariant_white);
                    }
                }
            }
        }
        .icon_arrow {
            display: inline-block;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 1.36rem;
            border: 1px solid var(--color-invariant_white);

        }
    }

    .ie .pager {
        display: block;
        clear: both;
    }

    .pager a.selected {
        background-color: #4c4c4c;
        color: var(--color-invariant_white);
    }

    .pager a:hover, .pager > a:focus {
        background-color: #DDD;
        border: 1px solid #212121;
        color: #212121;
    }
    /* =============================================================================
   StaticPage
   ========================================================================== */
    #euConsentManager {
        margin: 20px 0;
        border: 1px dashed var(--defaultColor);
        padding: 20px
    }

    .StaticPage h1 {
        margin: 0 0 30px 0;
        text-align: center;
    }

    .StaticPage h2 {
        margin: 0 0 20px 0;
        color: var(--defaultColor);
        text-transform: uppercase;
    }

    .StaticPage h3 {
        margin: 0 0 10px 0;
    }

    .StaticPage a {
        color: var(--defaultColor);
    }

        .StaticPage a:hover {
            text-decoration: underline;
        }

    .StaticPage p {
        margin: 0 0 20px 0;
        font-size: 1.4rem;
    }

    .StaticPage ul {
        list-style: outside;
        margin: 0 0 20px 20px;
        font-size: 1.4rem;
    }

    .StaticPage li {
        margin: 0 0 0 20px;
    }

    .StaticPage .box {
        border: 1px solid #1286C8;
        padding: 20px;
        margin: 0 10px;
    }

    .StaticPage table {
        width: 80%;
        margin: 20px auto;
    }

        .StaticPage table caption {
            text-align: left;
            color: var(--defaultColor);
        }

        .StaticPage table th {
            background: #1286C8;
            color: var(--color-invariant_white);
            vertical-align: middle;
            padding: 0 20px;
        }

        .StaticPage table td {
            font-size: 1.4rem;
        }

            .StaticPage table td.c {
                text-align: center;
            }

            .StaticPage table td.h {
                vertical-align: middle;
            }



    @media (max-width: 812px) {
        .StaticPage table {
            width: 100%;
        }
    }

    /* =============================================================================
   GPRF : Layout 
   ========================================================================== */
    .layout_profil h1 {
        text-align: center;
        padding: 15px 0px;
        clear: both;
    }

    .layout_profil .S_main {
        overflow: hidden;
            width: 100%;
    }

    .profil-top a.icon_arrow {
        font-size: 1.2rem;
        margin-bottom: 20px;
        display: block;
    }

    .profil-top a.icon_arrow::before {
        padding: 0 0 0 10px;
    }

    .layout_profil .gridContent {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-row: 300px;
        grid-row-gap: 30px;
        grid-column-gap: 30px;
        margin: 20px 0;
        clear: both;
        max-width: 1024px;
    }

    .layout_profil .GPRF_Account {
        display: none;
    }

    .layout_profil .block {
        border: 1px solid #EEE;
        padding: 20px;
        border-radius: 10px;
        font-size: 1.3rem;
        position: relative;
    }


    @media (max-width: 812px) {

        .layout_profil .gridContent {
            display: block;
            overflow: hidden;
        }

        .layout_profil .block {
            float: left;
            width: 100%;
            margin: 0 0 5px 0;
        }
    }

    @media (max-width: 459px) {
        .headerProfil .nav_niv1 {
            grid-template-columns: 1fr 1fr;
        }

        .GSOC_newsletterSubscribe .news {
            float: none;
            width: calc(100% - 20px);
        }
    }

    @media (max-width: 635px) {
        .layout_profil .gridContent {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 1250px) {
        #filter.column {
            float: none;
            margin-left: 0;
        }

        #filter {
            max-width: none;
        }
    }
    /* =============================================================================
   Print 
   ========================================================================== */
    @media print {
        body {
            overflow: visible;
            background-color: var(--color-background);
            font-size: 0.8cm;
            line-height: 1.1;
            margin-top: 1.1cm;
            margin-right: 1.1cm;
            margin-bottom: 1.1cm;
            margin-left: 1.1cm;
            font-family: serif;
            text-align: left !important;
            font-family: Arial;
        }

        .noprint, .noprint * {
            display: none !important;
        }

        *,
        *:before,
        *:after,
        *:first-letter,
        p:first-line,
        div:first-line,
        blockquote:first-line,
        li:first-line {
            background: transparent !important;
            color: #212121 !important;
            box-shadow: none !important;
            text-shadow: none !important;
            text-align: left !important;
        }
        /*a:after {content: "("attr(href)")"; font-size: 0.4cm; color: #999;}*/
        iframe {
            display: none;
        }

        h1 {
            font-size: 0.7cm;
        }

        h2 {
            font-size: 0.6cm;
            margin: 0 0 0.5cm 0;
        }

        h4 {
            font-size: 0.4cm;
            margin: 0 0 0.5cm 0;
        }

        figcaption, .caption {
            text-align: center;
            font-size: 0.3cm;
            margin: 0 0 0.2cm 0;
        }

        p {
            orphans: 3;
            widows: 3;
            font-size: 0.4cm;
            margin: 0.2cm 0 0.2cm 0;
        }

        .bottomContent {
            margin: 0.3cm 0 0 0;
            color: #999;
            font-size: 0.3cm;
        }

        .detail {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 auto !important;
        }

            .detail h1 {
                font-size: 0.9cm;
            }

                .detail h1 span {
                    display: block;
                    color: #696969;
                    font-size: 0.6cm;
                }

        .galerieContent {
            overflow: hidden;
        }

        .question, .rel {
            font-weight: bold;
        }

        .rel {
            font-style: italic;
        }

        .insetComponent {
            border: 1px solid #555;
        }

        .textComponent figure {
            width: 40%;
        }

            .textComponent figure img {
                width: 100%;
            }

            .textComponent figure.left {
                float: left;
                margin: 0 20px 10px 0;
            }

            .textComponent figure.right {
                float: right;
                margin: 0 0 10px 20px;
            }

        .pdfComponent, .videoComponent {
            display: none;
        }

        .titreresultat {
            font-weight: bold;
            font-size: 0.4cm;
        }

        .pararesultat {
            font-size: 0.4cm;
            padding: 0.2cm;
            border: 1px solid #888;
        }

        .citation {
            border-left: 3px solid #888;
            padding: 0 0 0 0.5cm;
        }

        .mainImage {
            text-align: center
        }

            .mainImage img {
                max-width: 50%;
            }

        .tab-sticky {
            display: none
        }

        .displayOnSmartphone {
            display: none !important;
        }
    }