/* --- Conteneur Global & Scope des Variables --- */
.altech-portal {
    --at-gradient-top: #7fbce0;
    --at-gradient-bottom: #4a90d9;
    --at-text-color: #000000;
    --at-border-color: #000000;
    --at-border-radius: 12px;
    --at-font-weight: bold;
    --at-font-size: 16px;
    --at-transition: 0.2s ease;
    --at-hover-logout-bg: rgba(255, 0, 0, 0.15);
    --at-hover-logout-text: #cc0000;

    display: inline-flex;
    align-items: center;
    font-family: Arial, sans-serif;
}

/* --- Style de base du Bouton --- */
.altech-portal .altech-portal-button {
    background: linear-gradient(to bottom, var(--at-gradient-top) 0%, var(--at-gradient-bottom) 100%);
    border: 2px solid var(--at-border-color);
    border-radius: var(--at-border-radius);
    color: var(--at-text-color);
    font-weight: var(--at-font-weight);
    font-size: var(--at-font-size);
    text-decoration: none;
    padding: 2px 35px;
    margin: 5px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: filter var(--at-transition), transform 0.1s ease;
}

.altech-portal .altech-portal-button:hover {
    filter: brightness(1.08);
}

/* --- État Connecté (Structure Scindée) --- */
.altech-portal .portal-logged-in {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(to bottom, var(--at-gradient-top) 0%, var(--at-gradient-bottom) 100%);
    border: 2px solid var(--at-border-color);
    border-radius: var(--at-border-radius);
    margin: 5px;
    overflow: hidden;
    transition: filter var(--at-transition);
}

/* Reset du bouton interne dans l'état connecté */
.altech-portal .portal-logged-in .altech-portal-button {
    border: none;
    margin: 0;
    padding: 2px 15px 2px 25px;
    background: transparent;
}

/* Séparateur et bouton de déconnexion */
.altech-portal .logout-trigger {
    padding: 0 15px;
    color: var(--at-text-color);
    text-decoration: none;
    font-weight: var(--at-font-weight);
    font-size: var(--at-font-size);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    align-self: stretch;
    display: flex;
    align-items: center;
    transition: background var(--at-transition), color var(--at-transition);
}

.altech-portal .logout-trigger:hover {
    background: var(--at-hover-logout-bg);
    color: var(--at-hover-logout-text);
}

/* --- Adaptabilité Mobile --- */
@media screen and (max-width: 768px) {
    .altech-portal {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 10px 0;
    }

    .altech-portal .altech-portal-button {
        padding: 10px 25px;
        font-size: 12px;
    }
}