#open-mega-menu {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100000;
}

#open-mega-menu.btn-mega-menu-position-gauche {
    left:0;
    right: unset;
}

#open-mega-menu::before {
    content: "☰";
    padding-right: 5px;
}

#close-mega-menu {
    float: right;
}

#open-mega-menu:hover,
#open-mega-menu:focus,
#close-mega-menu:hover,
#close-mega-menu:focus {
    filter: brightness(1.08);
}

.mega-menu-container {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    /* on doit mettre cette valeur 'extreme' pour pouvoir cacher le floatmenu (meteo, geolocalisation, contact) qui a un zindex de 99999*/
    z-index: 100000;
    display: none;
    justify-content: end;
    align-items: flex-start;
    max-height: 100%;
    padding: 50px;
    background: #ffffffbd;
}

.mega-menu-container.mega-menu-visible {
    display: flex;
}

.mega-menu {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    flex: 1;
    line-height: normal;
}

.mega-menu #top-menu {
    display: grid;
    /*
       La taille de la police des éléments du menu peut être défini par l'utilisateur dans une option.
       On définit la largeur minimale des colonnes de la grilles en em, ce qui nous permet d'avoir
       des tailles harmonieuses: plus la taille de la police sera grande, moins on aura de colonnes.
       Le nombre de colonnes par ligne est variable grace au repeat + autofit.
       L'ensemble nous permet d'éviter d'avoir un visuel détérioré et illisible si l'utilisateur
       choisit une trop grande police.
    */
    grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
    column-gap: 20px;
    row-gap: 1.5em;
    padding: 15px 30px;
    max-width: calc(100% - 2*30px);
    min-width: min-content;
}

.mega-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu #top-menu > li {
    padding-right: 10px;
    padding-left: 10px;
}

.mega-menu a {
    display: block;
}

.mega-menu .sub-menu li + li {
    margin-top: 0.5em;
}


.mega-menu #top-menu > li > a {
    font-size: 1.3em;
    font-weight: bold;
}

.mega-menu #top-menu > li > ul.sub-menu {
    margin-top: 1em;
}

.mega-menu ul .icon-angle-down {
    display: none;
}

.mega-menu .sub-menu .sub-menu {
    padding: 10px !important;
    border-left: 1px solid currentColor;
}

.mega-menu .smi-demarches-button.menu-item {
    align-self: baseline;
    grid-row: 1;
    grid-column: -1 / -2;
    display: block !important;
    border-radius: 10px;
}

.mega-menu .smi-demarches-button.menu-item a {
    padding: 0.5em 1em;
    display: block;
}

/*******************
    Media query
*******************/
@media (max-width: 450px) {
    .mega-menu-container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .mega-menu #top-menu {
        padding: 15px;
        max-width: calc(100% - 2*15px);
    }
}