/* Menu utilisateur de la barre d'application (déclencheur, panneau, apparence). */
.user-menu { position: relative; min-width: 0; }
.user-trigger { display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 40px; font: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 3px 8px 3px 4px; cursor: pointer; text-align: left; }
.user-trigger:hover, .user-trigger[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-bright); }
.user-trigger .av, .user-card .av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-strong); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.user-id { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.25; }
.user-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-id small { color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-trigger .chev { flex: none; color: var(--text-3); transition: transform .15s; }
.user-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

.user-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 300px; max-width: calc(100vw - 28px); background: var(--bg-2); border: 1px solid var(--border-bright); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.user-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.user-card .av.lg { width: 42px; height: 42px; font-size: 14px; }
.user-card > div { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.user-card small { color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
.user-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.user-section .lab { margin-bottom: 8px; }
.seg { display: flex; border: 1px solid var(--border-bright); border-radius: 9px; overflow: hidden; }
.user-section .seg button { flex: 1; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); background: transparent; border: 0; border-right: 1px solid var(--border-bright); padding: 9px 6px; cursor: pointer; }
.user-section .seg button:last-child { border-right: 0; }
.user-section .seg button[aria-pressed="true"] { background: var(--accent-strong); color: var(--on-accent); font-weight: 600; }
.user-section .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.user-link { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); }
.user-link:hover { background: var(--surface-2); }
.user-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 640px) {
    .user-id, .user-trigger .chev { display: none; }
    .user-trigger { padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .user-trigger .chev { transition: none; }
}
@media (max-width: 1180px) {
    .user-id small { display: none; }
    .user-name { max-width: 160px; }
}
.user-logout { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.user-logout:hover { background: var(--surface-2); color: var(--accent-strong); }
.user-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }