/* ==========================================================
   CALORYTHME BRAND / NAVIGATION V8
   FICHIER PROPRE
   ========================================================== */

:root {
    --cal-green: #78bf2c;
    --cal-green-dark: #57961d;
    --cal-green-soft: #eff8e7;

    --cal-text: #20272d;
    --cal-muted: #69736d;
    --cal-border: #e4e9e5;
    --cal-bg: #f7f9f7;

    --cal-sidebar-width: 300px;
}


/* ==========================================================
   BASE
   ========================================================== */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--cal-bg);
    color: var(--cal-text);
}


/* ==========================================================
   ON NE VEUT PLUS DE L'ANCIENNE TOPBAR
   ========================================================== */

#appPage > .topbar,
header.topbar {
    display: none !important;
}


/* ==========================================================
   LAYOUT
   ========================================================== */

#appPage .layout {
    display: flex !important;

    width: 100% !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

#appPage #sidebar.sidebar {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 var(--cal-sidebar-width) !important;

    width: var(--cal-sidebar-width) !important;
    min-width: var(--cal-sidebar-width) !important;
    max-width: var(--cal-sidebar-width) !important;

    min-height: 100vh !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        0 18px
        24px 18px !important;

    background: #ffffff !important;

    border: 0 !important;
    border-right:
        1px solid var(--cal-border) !important;

    box-shadow:
        5px 0 25px rgba(20, 35, 25, .04) !important;

    overflow: hidden !important;

    transform: none !important;

    transition:
        width .22s ease,
        min-width .22s ease,
        max-width .22s ease,
        flex-basis .22s ease,
        padding .22s ease !important;
}


/* ==========================================================
   LOGO
   ========================================================== */

#appPage #sidebar .cal-brand {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: 145px !important;

    margin:
        0 -18px
        22px -18px !important;

    padding: 18px 22px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border-bottom:
        1px solid #eef1ef !important;

    text-decoration: none !important;

    cursor: pointer !important;
}


#appPage #sidebar .cal-brand img {
    display: block !important;

    width: 225px !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: 110px !important;

    object-fit: contain !important;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

#appPage #sidebar .nav {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    min-height: 52px !important;

    box-sizing: border-box !important;

    margin: 5px 0 !important;

    padding:
        14px 17px !important;

    border: 0 !important;

    border-radius: 13px !important;

    background:
        transparent !important;

    color:
        #58635d !important;

    font-size:
        15px !important;

    font-weight:
        600 !important;

    line-height:
        1.3 !important;

    text-align:
        left !important;

    cursor:
        pointer !important;

    transition:
        background .15s ease,
        color .15s ease !important;
}


#appPage #sidebar .nav:hover {
    background:
        #f3f6f3 !important;

    color:
        var(--cal-text) !important;
}


#appPage #sidebar .nav.active {
    background:
        var(--cal-green-soft) !important;

    color:
        var(--cal-green-dark) !important;
}


#appPage #sidebar .nav.active::before {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 0;

    width: 4px;

    border-radius: 10px;

    background:
        var(--cal-green);
}


#appPage #sidebar hr {
    margin:
        18px 5px !important;

    border:
        0 !important;

    border-top:
        1px solid var(--cal-border) !important;
}


/* ==========================================================
   CONTENU
   ========================================================== */

#appPage .layout > .content {
    position: relative !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    max-width: none !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        34px 42px
        55px 42px !important;
}


#appPage .content > section {
    width: 100% !important;

    max-width: 1450px !important;

    margin: 0 !important;
}


/* ==========================================================
   NOUVEAU BOUTON MENU V8
   ========================================================== */

body #calMenuToggleV8 {
    position: fixed !important;

    top: 24px !important;

    /*
     * Sidebar 300px + 18px d'espace.
     * Le bouton n'est absolument PAS dans la sidebar.
     */
    left: 318px !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 2147483647 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
        1px solid #dce3de !important;

    border-radius:
        15px !important;

    background:
        #ffffff !important;

    color:
        var(--cal-text) !important;

    box-shadow:
        0 8px 26px
        rgba(20, 35, 25, .16) !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    overflow:
        visible !important;

    clip:
        auto !important;

    clip-path:
        none !important;

    transform:
        none !important;

    appearance:
        none !important;

    cursor:
        pointer !important;

    transition:
        left .22s ease,
        background .15s ease,
        color .15s ease !important;
}


body #calMenuToggleV8:hover {
    background:
        var(--cal-green) !important;

    border-color:
        var(--cal-green) !important;

    color:
        #ffffff !important;
}


body #calMenuToggleV8 .cal-menu-lines {
    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 5px !important;

    width: 23px !important;
    height: 20px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
}


body #calMenuToggleV8 .cal-menu-lines i {
    display: block !important;

    width: 23px !important;
    height: 3px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 10px !important;

    background:
        currentColor !important;
}


/* ==========================================================
   MENU FERME
   ========================================================== */

#appPage
.layout.cal-menu-v8-closed
> #sidebar.sidebar {
    flex:
        0 0 0 !important;

    width:
        0 !important;

    min-width:
        0 !important;

    max-width:
        0 !important;

    padding-left:
        0 !important;

    padding-right:
        0 !important;

    border-right:
        0 !important;
}


#appPage
.layout.cal-menu-v8-closed
> #sidebar.sidebar > * {
    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;
}


body #calMenuToggleV8.is-closed {
    left:
        20px !important;

    background:
        var(--cal-green-soft) !important;

    color:
        var(--cal-green-dark) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 800px) {

    #appPage .layout {
        display:
            block !important;
    }


    #appPage #sidebar.sidebar {
        position:
            fixed !important;

        top:
            0 !important;

        left:
            0 !important;

        bottom:
            0 !important;

        z-index:
            100000 !important;

        width:
            min(300px, 88vw) !important;

        min-width:
            min(300px, 88vw) !important;

        max-width:
            min(300px, 88vw) !important;

        height:
            100vh !important;

        transform:
            translateX(-105%) !important;

        transition:
            transform .22s ease !important;

        box-shadow:
            10px 0 35px
            rgba(0, 0, 0, .16) !important;
    }


    #appPage #sidebar.sidebar.open {
        transform:
            translateX(0) !important;
    }


    #appPage .layout > .content {
        width:
            100% !important;

        padding:
            82px 14px
            40px 14px !important;
    }


    body #calMenuToggleV8 {
        top:
            16px !important;

        left:
            16px !important;

        width:
            50px !important;

        min-width:
            50px !important;

        max-width:
            50px !important;

        height:
            50px !important;

        min-height:
            50px !important;

        max-height:
            50px !important;
    }

}