#menu-principal {
    //height: 40px;
    background-color: var(--main-color-grey1); // TODO : why ?
    /* background: linear-gradient(-380deg, #d5d5d5 -50%, #606775 100%); */
    background: var(--main-color-full);

    max-width: 100%;
    ul {
        margin-bottom: 0px;
        align-items: stretch;

        li {
            min-height: 3.333rem; // 40px
            min-width: 60px;

            text-align:center;

            white-space: nowrap;

            // TODO: move those to the <a>
            padding-top: 4px;
            border-bottom: 4px solid transparent;
            transition: border-color 0.25s;

            &.active {
                text-decoration: none;
                font-weight: bold;
                background-color: var(--main-color-full);
                border-color: var(--main-color-client1) !important;
            }

            a {
                color: var(--color-text-light);
                display: flex;
                width: 100%; height: 100%;
                align-items: center;
                padding: 0 15px;
                font-size: var(--fs-14);
                justify-content: center;
            }

            &:hover {
                border-color: #717886; // TODO
            }
        }
    }

    .icon-home {
        height: 1.429em;
        width: auto;
    }
}