/**********************************************
 *  FIX LOGIN / LOGOUT ALIGNMENT (HELIX)
 **********************************************/

/* Neutralise les floats imposés par le template */
.mod-login {
    float: none !important;
    display: flex !important;
    justify-content: flex-end !important; /* place login ET logout à droite */
    align-items: center;
    width: 100%;
}

/**********************************************
 *  LOGIN (non connecté)
 **********************************************/
.mod-login .yt-loginform .yt-login {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

/**********************************************
 *  LOGOUT (connecté)
 **********************************************/

/* Force le formulaire logout à prendre toute la largeur */
.mod-login form.mod-login-logout {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end;  
    align-items: center;
    gap: 15px;
}

/* Le greeting reste à gauche, pousse le reste vers la droite */
.mod-login-logout__login-greeting {
    margin-right: auto !important;
}

/* Lien "Afficher le profil" */
.mod-login-logout__options {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* Bouton logout bien plaqué à droite */
.mod-login-logout__button {
    margin-left: 10px;
}

/**********************************************
 *  RESPONSIVE
 **********************************************/
@media (max-width: 768px) {

    .mod-login {
        justify-content: flex-end !important;
        padding: 5px 0;
    }

    .mod-login form.mod-login-logout {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }

    .mod-login-logout__login-greeting {
        width: 100%;
        margin-right: 0 !important;
        text-align: left;
    }

    .mod-login-logout__options {
        width: auto;
    }
}

.offcanvas-menu .menu-toggler {
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* au-dessus du lien */
}

.offcanvas-menu .menu-parent > a {
    padding-right: 50px !important; /* laisse la place pour l’icône */
    position: relative;
    z-index: 1;
}

.offcanvas-menu .menu-toggler {
    pointer-events: auto !important;
}

.offcanvas-menu .menu-parent > a {
    pointer-events: auto;
}

/* ---- Sous-menu animé ---- */
.offcanvas-menu ul ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* ---- Sous-menu ouvert ---- */
.offcanvas-menu li.menu-parent-open > ul {
    max-height: 600px; /* assez grand pour tous les sous-menus */
}

/* ---- Icône toggler + / - ---- */
.offcanvas-menu .menu-toggler::before {
    content: "+";
    font-weight: bold;
    font-size: 20px;
}

.offcanvas-menu li.menu-parent-open > .menu-toggler::before {
    content: "–"; /* tiret long pour un plus beau rendu */
}

/* Cache le chevron ajouté par le template */
.offcanvas-menu .menu-toggler i,
.offcanvas-menu .menu-toggler span,
.offcanvas-menu .menu-toggler::after {
    display: none !important;
}
/* Mise en page verticale pour le bloc logout */
.mod-login form.mod-login-logout {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* tout à droite */
    width: 100%;
    gap: 5px;
}

/* Greeting + lien profil bien alignés à droite */
.mod-login-logout__login-greeting,
.mod-login-logout__options {
    text-align: right !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Bouton déconnexion toujours à droite */
.mod-login-logout__button {
    align-self: flex-end !important;
}

.mod-login-logout__separator {
    width: 100%;
    height: 1px; /* Hauteur du séparateur */
    background-image: linear-gradient(to left, #000000, #d3d3d3); /* Dégradé du noir au gris clair */
    margin: 10px 0 12px;
}
