/* Conteneur principal */
.arospen-user-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.arospen-user-dropdown {
    position: relative;
    display: inline-block;
}

/* On cache totalement la case à cocher pour l'astuce du tactile */
.arospen-hidden-toggle {
    display: none !important;
}

/* Le bouton principal (Nom) */
.arospen-dropbtn {
    background-color: transparent;
    color: #c389ce;
    padding: 10px 15px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    margin: 0;
}

/* Petite flèche */
.arospen-dropbtn .arrow {
    font-size: 10px;
}

/* Le conteneur du menu caché */
.arospen-dropdown-content {
    display: none; /* Caché par défaut */
    position: absolute;
    right: 0; /* Aligne le menu à droite sous le bouton */
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 999;
    border-radius: 6px;
    overflow: hidden;
}

/* Les liens à l'intérieur du menu */
.arospen-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Au survol d'un lien dans le menu */
.arospen-dropdown-content a:hover {
    background-color: #f8f9fa;
    color: #c389ce;
}

/* L'action ! Affiche le menu au survol (PC) OU quand la case est cochée (Tactile) */
.arospen-user-dropdown:hover .arospen-dropdown-content,
.arospen-hidden-toggle:checked ~ .arospen-dropdown-content {
    display: block;
}