/* ==========================================================
   JOOMLA / CASSIOPEIA
   MENU DESKTOP + BURGER MOBILE
   ========================================================== */


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 992px) {

    /* Base */
    .metismenu.mod-menu .metismenu-item {
        position: relative;
    }

    /* Premier sous-menu */
    .metismenu.mod-menu > .metismenu-item > ul,
    .metismenu.mod-menu > .metismenu-item > .mm-collapse {
        display: none;
        position: absolute;

        top: 100%;
        left: 0;

        min-width: 220px;

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

        background: #ffffff !important;

        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

        z-index: 2000;
    }

    /* Sous-menu niveau 2+ */
    .metismenu.mod-menu ul > .metismenu-item {
        position: relative !important;
    }

    .metismenu.mod-menu ul > .metismenu-item > ul,
    .metismenu.mod-menu ul > .metismenu-item > .mm-collapse {
        display: none;
        position: absolute !important;

        top: 0 !important;
        left: 100% !important;

        min-width: 220px;

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

        transform: none !important;

        background: #ffffff !important;

        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

        z-index: 3000;
    }

    /* Ouverture au survol */
    .metismenu.mod-menu .metismenu-item:hover > ul,
    .metismenu.mod-menu .metismenu-item:hover > .mm-collapse {
        display: block !important;

        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Fond blanc */
    .metismenu.mod-menu ul,
    .metismenu.mod-menu .mm-collapse,
    .metismenu.mod-menu ul .metismenu-item {
        background: #ffffff !important;
    }

    /* Liens */
    .metismenu.mod-menu ul .metismenu-item > a,
    .metismenu.mod-menu ul .metismenu-item > button {
        display: block;

        width: 100%;

        padding: 10px 15px;

        box-sizing: border-box;
        white-space: nowrap;

        transition: background-color 0.2s ease;
    }

    /* Survol gris 25 % */
    .metismenu.mod-menu ul .metismenu-item:hover {
        background: rgba(128, 128, 128, 0.25) !important;
    }

    /* Flèche Joomla par défaut */
    .metismenu.mod-menu .mm-toggler::after {
        display: none !important;
    }

    /* Flèche bas : niveau principal */
    .metismenu.mod-menu > .metismenu-item.parent > a::after,
    .metismenu.mod-menu > .metismenu-item.parent > button::after {
        content: "⌄";

        display: inline-block;

        margin-left: 8px;

        font-size: 0.85em;
        line-height: 1;
    }

    /* Flèche droite : sous-menus */
    .metismenu.mod-menu ul .metismenu-item.parent > a::after,
    .metismenu.mod-menu ul .metismenu-item.parent > button::after {
        content: "›";

        display: inline-block;

        margin-left: 10px;

        font-size: 1.1em;
        line-height: 1;
    }
}


/* ==========================================================
   MOBILE / TABLETTE
   Cassiopeia Collapsible Dropdown
   ========================================================== */

@media (max-width: 991.98px) {

    /* ------------------------------------------------------
       BOUTON BURGER
       ------------------------------------------------------ */

    .container-header .navbar-toggler {
        display: flex !important;

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

        width: 46px;
        height: 42px;

        margin-left: auto;

        padding: 6px 10px;

        background: transparent !important;

        border: 1px solid rgba(255,255,255,0.6);
        border-radius: 5px;

        color: #ffffff !important;
    }


    /* Icône burger */
    .container-header .navbar-toggler-icon {
        display: block !important;

        width: 24px;
        height: 2px;

        position: relative;

        background: #ffffff !important;
    }

    .container-header .navbar-toggler-icon::before,
    .container-header .navbar-toggler-icon::after {
        content: "";

        position: absolute;
        left: 0;

        width: 24px;
        height: 2px;

        background: #ffffff;
    }

    .container-header .navbar-toggler-icon::before {
        top: -7px;
    }

    .container-header .navbar-toggler-icon::after {
        top: 7px;
    }


    /* ------------------------------------------------------
       CONTENEUR DU MENU MOBILE
       ------------------------------------------------------ */

    .container-header .navbar-collapse {
        width: 100%;

        background: #ffffff;

        margin-top: 8px;

        border-radius: 4px;

        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }


    /* IMPORTANT :
       on laisse Bootstrap/Joomla gérer display:none / display:block
       de .collapse et .show
       ------------------------------------------------------ */

    .container-header .navbar-collapse.show {
        display: block !important;
    }


    /* ------------------------------------------------------
       MENU VERTICAL
       ------------------------------------------------------ */

    .container-header .metismenu.mod-menu {
        display: flex !important;

        flex-direction: column;

        width: 100%;

        margin: 0;
        padding: 0;

        background: #ffffff;
    }


    .container-header .metismenu.mod-menu .metismenu-item {
        width: 100%;

        position: relative;

        background: #ffffff;
    }


    /* ------------------------------------------------------
       LIENS
       ------------------------------------------------------ */

    .container-header .metismenu.mod-menu .metismenu-item > a,
    .container-header .metismenu.mod-menu .metismenu-item > button {
        display: flex;

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

        width: 100%;

        padding: 12px 15px;

        box-sizing: border-box;

        background: #ffffff;

        color: #333333;

        text-align: left;

        border: 0;
    }


    /* ------------------------------------------------------
       SOUS-MENUS MOBILE
       ------------------------------------------------------ */

    .container-header .metismenu.mod-menu ul,
    .container-header .metismenu.mod-menu .mm-collapse {
        position: static !important;

        width: 100%;

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

        background: #ffffff !important;

        box-shadow: none !important;

        transform: none !important;
    }


    /* Niveau 2 */
    .container-header .metismenu.mod-menu ul
    .metismenu-item > a,

    .container-header .metismenu.mod-menu ul
    .metismenu-item > button {

        padding-left: 30px;
    }


    /* Niveau 3 */
    .container-header .metismenu.mod-menu ul ul
    .metismenu-item > a,

    .container-header .metismenu.mod-menu ul ul
    .metismenu-item > button {

        padding-left: 45px;
    }


    /* ------------------------------------------------------
       SURVOL / TOUCH
       ------------------------------------------------------ */

    .container-header .metismenu.mod-menu
    .metismenu-item > a:hover,

    .container-header .metismenu.mod-menu
    .metismenu-item > button:hover {

        background: rgba(128,128,128,0.25) !important;
    }


    /* ------------------------------------------------------
       FLECHES MOBILE
       ------------------------------------------------------ */

    .container-header .metismenu.mod-menu
    .metismenu-item.parent > a::after,

    .container-header .metismenu.mod-menu
    .metismenu-item.parent > button::after {

        content: "⌄";

        margin-left: 10px;

        font-size: 1em;
    }

}
/* ==========================================================
   ALIGNER LE MODULE CONNEXION AVEC LE MENU PRINCIPAL
   ========================================================== */

@media (min-width: 992px) {

    .container-header .grid-child {
        align-items: center;
    }

    /* Menu principal */
    .container-header .mod-menu {
        align-items: center;
    }

    /* Module connexion */
    .container-header .mod-login,
    .container-header .login {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        display: flex;
        align-items: center;
    }
}