:root {
--bleu: #08345B;
--bleutresclair: #DFF0FF;
--bleuclair: #5088FF;
--bleumoyen: #005FA5;
--bleufonce: #111827;
--orange: #FAB928;
--vert: #00CEB9;
--vertclair: #D7F2F2;
--blanc: #fff;
--noir: #000;
--gris: #ccc;
--gris-clair: #9CA3AF;
--gris-moyen: #666;
--gris-fonce: #333;
--gris-fond: #F3F4F6;
--gris-texte: #5b6675;
}




/* HEADER -------------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------------------------------*/
#header-outer {
    box-shadow: none !important;
}
    #header-outer.small-nav #top .container .row { /*desktop */
        background-color: var(--blanc) !important;
        box-shadow: -4px 10px 15px 5px rgba(0,0,0,0.05);
        margin-left: 0;
        margin-top: 12px;
        padding-left: 20px;
        border-radius: 32px;
    }
    #header-outer.scrolled-down:not(.side-widget-open) #top .container { /* Mobile */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #header-outer.scrolled-down:not(.side-widget-open) #top .container .row { 
        background-color: var(--blanc) !important;
        box-shadow: -4px 10px 15px 5px rgba(0,0,0,0.05);
        border-radius: 32px;
        padding: 5px 20px;
    }
    .slide-out-widget-area-toggle.mobile-icon {
        margin-right: 14px;
    }





/* MENU ---------------------------------------------------------------------------------------------*/
/* 1er niveau */
header#top nav ul.sf-menu > li {
    margin: 0 4px;
}
    header#top nav ul.sf-menu > li > a {
        padding: 4px 12px;
    }
        header#top nav ul.sf-menu > li > a,
        header#top nav ul.sf-menu > li > a > span {
            font-weight: 400;
            opacity: 1 !important;
        }
#header-outer.transparent #top nav ul.sf-menu > li > a,
#header-outer.transparent #top nav ul.sf-menu > li > a > span {
    color: var(--blanc);
}
#header-outer.small-nav #top nav ul.sf-menu {
    margin-right: 28px;
}
#header-outer.small-nav #top nav ul.sf-menu > li > a,
#header-outer.small-nav #top nav ul.sf-menu > li > a > span {
    color: var(--bleu);
}
@media (min-width: 1200px) {
    header#top nav ul.sf-menu > li:not(.demo):not(.identification):not(.wpml-ls-item):hover > a {
        background-color: rgba(255, 255, 255, 0.18);
        border-radius: 16px;
    }
}
@media (min-width: 1000px) and (max-width: 1300px) {
    header#top .container {
        padding: 0px 10px 0 24px !important;
    }
    header#top nav ul.sf-menu > li > a,
    header#top nav ul.sf-menu > li > a > span {
        font-size: 15px;
    }
    header#top nav ul.sf-menu > li:not(.demo):not(.identification):not(.wpml-ls-item) > a {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}

/* Menu 1er niveau - Boutons */
/* Demo */
header#top li.demo {
    margin-left: 30px !important;
}
    header#top li.demo a {
        background-color: var(--bleuclair);
        border-radius: 16px;
        padding: 11px 20px 11px 50px !important;
        background-image: url('../img/computer.png');
        background-repeat: no-repeat;
        background-position: 12px center;
    }
    header#top li.demo a span {
        color: var(--blanc) !important;
    }
/* Identification */    
header#top li.identification {
    margin-left: 10px;
}
    header#top li.identification a {
        border: 1px solid var(--bleu);
        border-radius: 16px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        width: 48px;
        background-image: url('../img/person.png');
        background-repeat: no-repeat;
        background-position: 12px center;
    }
    header#top li.identification a span {
        display: block;
        text-indent: -9999px;
    }
    #header-outer.transparent header#top li.identification a {
        border-color: var(--blanc);
    }
    #header-outer.small-nav #top li.identification a {
        background-image: url('../img/person_dark.png');
    }
    header#top nav > ul > li:not(.megamenu):not(.megamenusynidia) ul a:hover {
        border-radius: 16px;
    }
       header#top nav > ul > li:not(.megamenu):not(.megamenusynidia) ul a:hover span {
            color: var(--bleu);
        }

/* Langues */
header#top li.wpml-ls-item > a {
    border: 1px solid var(--bleu);
    border-radius: 16px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 10px !important;
}
    #header-outer.transparent header#top li.wpml-ls-item > a {
        border-color: var(--blanc);
    }


/* MENU - 2e et 3e niveaux */
#header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenusynidia):not(.megamenu) ul li:hover > a,
#header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenusynidia):not(.megamenu) ul li.sfHover > a {
    background: var(--bleutresclair) !important;
    color: inherit !important;
}
#header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenusynidia):not(.megamenu) ul .current-menu-item > a {
    background: var(--bleutresclair) !important;
    border-radius: 16px;
}
#header-outer:not([data-format="left-header"]) #top nav ul li.current-menu-item > a .nectar-menu-icon,
#header-outer:not([data-format="left-header"]) #top nav ul li.current-menu-parent > a .nectar-menu-icon,
#header-outer:not([data-format="left-header"]) #top nav ul li.current-menu-ancestor > a .nectar-menu-icon {
    color: var(--gris-texte) !important;
}
header#top .sf-menu li ul {
    border-radius: 16px !important;;
}
header#top .sub-menu li li a {
    border-radius: 16px;
}
header#top .sub-menu li li:hover a span,
header#top .sub-menu li li:hover a small {
    color: var(--bleu) !important;
}
header#top .sub-menu li a,
header#top .sub-menu li a span {
    color: var(--bleu);
    font-weight: 600;
}
header#top .sub-menu li a small.item_desc {
    color: var(--gris-moyen) !important;
    font-weight: 400;
    padding-bottom: 10px;
}
header#top li.menu_large ul.sub-menu {
    width: 460px;
}
header#top nav > ul > li:not(.megamenusynidia):not(.megamenu) .sub-menu li.menu-item-has-icon a {
    gap: 10px;
} 



/* Megamenu */
/*
header#top li.megamenu > ul > li > a {
    margin-bottom: 24px;
}
    header#top li.megamenu > ul > li > a > span {
        font-family: 'Chillax-Medium';
        font-weight: 700;
        font-size: 22px;
        color: var(--gris-texte);
        cursor: not-allowed;
    }
    header#top li.megamenu > ul.sub-menu {
        background-color: var(--blanc) !important;
    }
    header#top li.megamenu .menu_masque a.sf-with-ul {
        display: none;
    }
*/

@media only screen and (min-width: 1000px) {
    .megamenusynidia {
        position: static !important;
    }
    .megamenusynidia > .sub-menu {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        position: absolute !important;
        top: calc(100% + 15px) !important;
        left: 50% !important;
        width: min(1100px, calc(100vw - 40px)) !important;
        min-height: 380px;
        padding: 66px 40px 50px 40px;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 49, 81, .20);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 0) !important;
        transition: opacity .2s ease, visibility .2s ease;
        overflow: visible;
        z-index: 9999;
    }
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia > ul.sub-menu > li.menu-mega-actif > a,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia > ul.sub-menu > li.current-menu-ancestor.menu-mega-actif > a,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia > ul.sub-menu > li.current-menu-parent.menu-mega-actif > a {
        background-color: var(--bleutresclair) !important;
    }
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia > ul.sub-menu > li.current-menu-ancestor:not(.menu-mega-actif) > a,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia > ul.sub-menu > li.current-menu-parent:not(.menu-mega-actif) > a {
        background-color: transparent !important;
    }
    #header-outer .megamenusynidia.sfHover:not(.menu-mega-ouvert) > .sub-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .megamenusynidia.menu-mega-ouvert > .sub-menu,
    .megamenusynidia.menu-mega-ouvert:hover > .sub-menu,
    .megamenusynidia.menu-mega-ouvert.sfHover > .sub-menu {
        display: grid;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0) !important;
    }
    .megamenusynidia > .sub-menu::before {
        position: absolute;
        top: 32px;
        left: 40px;
        display: block;
        margin: 0;
        color: var(--bleu);
        font-size: 20px;
        font-weight: 600;
    }
    html[lang^="fr"] .megamenusynidia > .sub-menu::before {
        content: "Nos solutions";
    }
    html[lang^="en"] .megamenusynidia > .sub-menu::before {
        content: "Our solutions";
    }
    #header-outer .megamenusynidia > .sub-menu > li {
        position: static !important;
        grid-column: 1;
        display: block;
        width: 100% !important;
        margin: 0 0 5px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .megamenusynidia > .sub-menu > li > a {
        position: relative;
        display: block !important;
        padding: 20px 32px 20px 16px !important;
        border-radius: 16px;
        transition: background-color .2s ease;
    }
    .megamenusynidia > .sub-menu > li > a .menu-title-text {
        display: block;
        color: var(--bleu);
        font-size: 16px;
        line-height: 18px;
        font-weight: 700;
    }
    .megamenusynidia > .sub-menu > li > a .item_desc {
        display: block;
        padding-bottom: 0 !important;
        font-size: 13px !important;
        line-height: 15px !important;
    }
    .megamenusynidia > .sub-menu > li.menu-mega-actif > a {
        background: var(--bleutresclair) !important;
    }
    .megamenusynidia .niveau2 .sf-sub-indicator {
        position: absolute;
        top: 50%;
        right: 14px;
        line-height: 0;
        transform: translateY(-50%);
    }
    .megamenusynidia .niveau2 .sf-sub-indicator i::before {
        color: var(--vert);
    }
    /* Niveau 3 */
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li > a:hover,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li.menu-mega-hover > a {
        background: var(--bleutresclair) !important;
        color: var(--bleu) !important;
    }
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li.current-menu-item > a,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li.current-menu-parent > a,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li.current-menu-ancestor > a {
        background: transparent !important;
    }
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li.current-menu-item > a:hover,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li.current-menu-parent > a:hover,
    #header-outer:not([data-format="left-header"]) #top nav > ul > li.megamenusynidia .mega-colonne-niveau3 > ul.sub-menu > li.current-menu-ancestor > a:hover {
        background: var(--bleutresclair) !important;
    }
    #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 {
        position: absolute;
        top: 66px;
        left: 280px;
        width: 410px;
        margin: 0;
        padding: 0;
    }
    #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 > .sub-menu {
        display: none !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 {
        z-index: 10;
        pointer-events: auto !important;
    }
        #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 > .sub-menu,
        #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 > .sub-menu > li,
        #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 > .sub-menu > li > a {
            pointer-events: auto !important;
        }
        #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 > .sub-menu > li > a {
            position: relative;
            z-index: 11;
            cursor: pointer;
        }
    #header-outer .megamenusynidia > .sub-menu > .mega-colonne-niveau3 > .sub-menu.menu-mega-panneau-actif {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 14px;
    }
    #header-outer .megamenusynidia .mega-colonne-niveau3 > .sub-menu > li {
        position: static !important;
        display: block !important;
        flex: 0 0 auto;
        width: 100% !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .megamenusynidia .mega-colonne-niveau3 > .sub-menu > li > a {
        display: flex !important;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100% !important;
        gap: 10px;
        padding: 10px !important;
        border-radius: 9px;
        color: var(--bleu) !important;
        transition: background-color .2s ease;
    }
    .megamenusynidia .mega-colonne-niveau3 > .sub-menu > li > a:hover {
        background: #f3f8fb !important;
    }
    .megamenusynidia .mega-colonne-niveau3 > .sub-menu > li > a .menu-title-text {
        flex: 0 0 100%;
        color: var(--bleu);
        font-size: 16px;
        line-height: 18px;
        font-weight: 700;
    }
    .megamenusynidia .mega-colonne-niveau3 > .sub-menu > li > a .item_desc {
        flex: 0 0 100%;
        display: block;
        padding-bottom: 0 !important;
        font-size: 13px !important;
        line-height: 15px !important;
    }
    .megamenusynidia .nectar-menu-icon,
    .nectar-menu-icon {
        flex: 0 0 30px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: 0 !important;
        border-radius: 7px;
        background: var(--bleu);
        color: #fff;
        font-size: 14px !important;
    }
    .megamenusynidia .nectar-menu-icon-text {
        display: block;
        min-width: 0;
    }


}


/* Menu mobile */
@media only screen and (max-width: 999px) {
    #slide-out-widget-area .off-canvas-menu-container.mobile-only{
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
    }
        #slide-out-widget-area .off-canvas-menu-container.mobile-only ul li {
            border-bottom: 1px solid var(--gris-moyen);
        }
        #slide-out-widget-area .off-canvas-menu-container.mobile-only ul li a {
            font-size: 28px !important;
            text-decoration: none;
        }
        #slide-out-widget-area .off-canvas-menu-container .menu > li > a .wrap .nav_desc,
        #slide-out-widget-area .off-canvas-menu-container .menu li a .wrap .item_desc {
            max-width: 100% !important;
            margin: 0 !important;
            text-align: left !important;
        }
        #slide-out-widget-area .off-canvas-menu-container .menu li a span:after {
            display: none;
        }
}


/* Menu Global-sections */
.mega-colonne-droite {
    display: none;
}
@media only screen and (min-width:1000px) {
    .mega-colonne-droite {
        position: absolute;
        border-radius: 16px;
        top: 60px;
        right: 40px;
        width: 240px;
        bottom: 22px;
        padding: 16px !important;
        background: transparent url('/wp-content/uploads/2026/06/banniere-defaut-01.jpg') center center / cover no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
        .mega-colonne-droite:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.74);
            pointer-events: none;
            z-index: 10;
            border-radius: 16px
        }
        .mega-colonne-droite > .menu-title-text {
            display: block;
            width: 100%;
            height: 100%;
            z-index: 11;
        }
        .mega-colonne-droite .menu-cta {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: 100%;
        }
        .mega-colonne-droite .menu_demo,
        .mega-colonne-droite .menu_expert {
            position: relative;
            margin: 0 0 16px 0;
            padding: 34px 0 0;
        }
            .mega-colonne-droite .menu_demo:before,
            .mega-colonne-droite .menu_expert:before {
                content: "";
                position: absolute;
                top: 0;
                left: 5px;
                width: 24px;
                height: 24px;
                border-radius: 8px;
                padding: 4px 10px;
                background-size: 24px;
            }
                .mega-colonne-droite .menu_demo:before {
                    background: var(--orange) url('../img/computer.png') no-repeat center;
                }
                .mega-colonne-droite .menu_expert:before {
                    background: var(--bleuclair) url('../img/people.png') no-repeat center;
                }
            .mega-colonne-droite a {
                display: block;
                color:var(--blanc) !important;
                text-decoration: none;
                padding-bottom: 12px;
            }
                .mega-colonne-droite strong {
                    display: block;
                    margin-bottom: 8px;
                    color: var(--blanc);
                    font-size: 16px;
                    line-height: 16px;
                    font-weight: 600;
                }
                .mega-colonne-droite span {
                    display: block;
                    color: rgba(255,255,255,.9);
                    font-size: 13px;
                    line-height: 15px;
                }

    .mega-colonne-droite a:hover strong,
    .mega-colonne-droite a:hover span{
        color: var(--bleutresclair);
    }

}