/* =========================================================
   MCC FONCIERE
   MENU MOBILE UNIQUEMENT
   Ne modifie pas le logo ni le hero
   ========================================================= */

.mcc-menu-toggle {
    display: none;
}

@media (max-width: 700px) {

    /*
     * On conserve totalement le logo existant.
     * Seule la navigation desktop est remplacée.
     */

    header {
        position: relative;
    }


    /* -----------------------------------------------------
       BOUTON MENU
       ----------------------------------------------------- */

    .mcc-menu-toggle {
        display: flex !important;

        width: calc(100% - 44px);
        height: 48px;

        margin: 4px 22px 12px 22px !important;
        padding: 0 4px !important;

        align-items: center;
        justify-content: space-between;

        background: transparent !important;
        border: 0 !important;
        border-top: 1px solid #e4e7ea !important;
        border-bottom: 1px solid #e4e7ea !important;
        border-radius: 0 !important;

        color: #173d70 !important;

        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;

        cursor: pointer;
        box-sizing: border-box;
    }


    .mcc-menu-icon {
        display: block;
        position: relative;

        width: 24px;
        height: 2px;

        background: #173d70;

        transition: background .2s ease;
    }


    .mcc-menu-icon::before,
    .mcc-menu-icon::after {
        content: "";

        position: absolute;
        left: 0;

        width: 24px;
        height: 2px;

        background: #173d70;

        transition:
            transform .22s ease,
            top .22s ease;
    }


    .mcc-menu-icon::before {
        top: -7px;
    }


    .mcc-menu-icon::after {
        top: 7px;
    }


    /* Croix lorsque le menu est ouvert */

    header.mcc-menu-open .mcc-menu-icon {
        background: transparent;
    }

    header.mcc-menu-open .mcc-menu-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    header.mcc-menu-open .mcc-menu-icon::after {
        top: 0;
        transform: rotate(-45deg);
    }


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    header nav {
        display: none !important;

        width: calc(100% - 44px) !important;

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

        background: #ffffff !important;

        box-shadow: none !important;

        overflow: visible !important;
        box-sizing: border-box;
    }


    header.mcc-menu-open nav {
        display: block !important;
    }


    header nav ul {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

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

        gap: 0 !important;

        overflow: visible !important;
    }


    header nav li {
        display: block !important;

        width: 100% !important;

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


    header nav a {
        display: flex !important;

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

        align-items: center;

        padding: 13px 4px !important;
        margin: 0 !important;

        color: #19202c !important;

        font-size: 15px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;

        white-space: normal !important;

        background: transparent !important;

        border: 0 !important;
        border-bottom: 1px solid #e6e8eb !important;
        border-radius: 0 !important;

        box-sizing: border-box;
    }


    /*
     * Dernier lien = bouton Nous contacter
     */

    header nav li:last-child a {
        min-height: 52px !important;

        margin-top: 14px !important;
        padding: 14px 18px !important;

        justify-content: center !important;

        background: #3181eb !important;
        color: #ffffff !important;

        border: 0 !important;
        border-radius: 7px !important;

        text-align: center !important;
    }

}


/* Petits smartphones */

@media (max-width: 390px) {

    .mcc-menu-toggle,
    header nav {
        width: calc(100% - 32px) !important;

        margin-left: 16px !important;
        margin-right: 16px !important;
    }

}