/* Compte et navigation : bouton de compte de la barre supérieure, barre latérale fixe,
   onglets « Mon compte » et boutons secondaire / sensible. Chargé après account-display.css. */

/* Boutons secondaires et actions sensibles. :root élève la spécificité au-dessus des
   palettes sombre/contrastée d'account-display.css, sans !important. */
:root :is(button, .button).secondary { background:var(--surface); color:var(--text); border:1px solid var(--border); }
:root :is(button, .button).secondary:hover { background:var(--soft); color:var(--text); }
:root :is(button, .button).danger { background:var(--surface); color:var(--error-text); border:1px solid currentColor; }
:root :is(button, .button).danger:hover { background:var(--error-bg); color:var(--error-text); }

/* Barre latérale : reste visible pendant le défilement sur ordinateur. */
@media (min-width:768px) {
  .sidebar { position:sticky; top:0; height:100vh; overflow-y:auto; overscroll-behavior:contain; }
}
@media print { .sidebar { position:static; height:auto; } }

/* Barre supérieure : espace à gauche, compte à droite. */
.topline { align-items:center; gap:16px; }
.topline-label { min-width:0; }
.topline .topline-space { margin-left:6px; }

.account-switch { position:relative; font-size:13px; letter-spacing:normal; color:var(--text); }
.account-switch > summary {
  display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 10px 4px 4px;
  list-style:none; cursor:pointer; border:1px solid var(--border); border-radius:8px; background:var(--surface);
}
.account-switch > summary::-webkit-details-marker { display:none; }
.account-switch > summary:hover, .account-switch[open] > summary { background:var(--soft); }
.account-switch > summary .menu-icon { width:16px; height:16px; color:var(--muted); transition:transform .15s ease-out; }
.account-switch[open] > summary .menu-icon { transform:rotate(180deg); }
.account-avatar {
  display:inline-grid; place-items:center; flex:none; width:34px; height:34px; border-radius:6px;
  background:var(--soft); color:var(--primary); font-weight:700; font-size:15px;
}
.account-switch[open] .account-avatar, .account-switch > summary:hover .account-avatar { background:var(--surface); }
.account-identity { display:flex; flex-direction:column; min-width:0; line-height:1.3; text-align:left; }
.account-email { font-weight:600; color:var(--text); max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-role { font-size:11px; letter-spacing:.02em; color:var(--muted); }

.account-switch-panel {
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; width:max-content; min-width:270px; max-width:calc(100vw - 24px);
  padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px #0002;
}
.account-switch-head { display:none; margin:0; padding:10px 12px 12px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.account-switch-head strong { display:block; color:var(--text); }
.account-switch-head span { color:var(--muted); font-size:13px; }
/* Liste verticale à toutes les largeurs : app.css passe les <nav> en ligne défilante sous 620 px. */
.account-switch-links { margin:0; gap:2px; flex-direction:column; overflow:visible; white-space:normal; }
.account-switch-panel a {
  display:flex; align-items:center; gap:10px; min-height:44px; padding:9px 12px; border-radius:6px;
  color:var(--secondary); font-size:calc(15px * var(--font-factor)); text-decoration:none;
}
.account-switch-panel a:hover { background:var(--soft); color:var(--text); }
.account-switch-panel a[aria-current=page] { background:var(--selected-bg); color:var(--text); font-weight:600; }
.account-switch-panel .account-switch-logout { margin-top:6px; border-top:1px solid var(--border); border-radius:0 0 6px 6px; }

/* La fenêtre est rendue dans .topline (11 px, lettres espacées) : elle reprend la taille du texte courant. */
[data-logout-dialog] { font-size:calc(16px * var(--font-factor)); letter-spacing:normal; text-align:left; }
[data-logout-dialog] h2 { margin-top:0; }
.dialog-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
.dialog-actions button, .dialog-actions form { margin:0; }

@media (max-width:767px) {
  .topline { padding-bottom:10px; margin-bottom:16px; justify-content:flex-end; }
  .topline-label { display:none; }
  .shell:has(.sidebar-heading > .account-switch) .topline { display:contents; }
  .sidebar-heading:has(> .account-switch) { gap:8px; }
  .sidebar-heading > .navigation-toggle { margin-inline-start:auto; }
  .sidebar-heading > .account-switch { flex:none; }
  .sidebar-heading .account-switch-panel { min-width:min(270px, calc(100vw - 32px)); max-width:calc(100vw - 32px); }

  .account-identity { display:none; }
  .account-switch-head { display:block; }
  .account-switch-panel { min-width:min(300px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion:reduce) { .account-switch > summary .menu-icon { transition:none; } }
@media print { .account-switch { display:none; } }

/* Carte des pages de connexion : retour à l'application et déconnexion. */
.auth-session-links { display:flex; flex-wrap:wrap; gap:4px 16px; margin:12px 0 0; }
.auth-session-links a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.auth-card .dialog-actions .button, .auth-card .dialog-actions form button { margin:0; }

/* Espace « Mon compte » : un titre, des onglets, puis le contenu de l'onglet. */
.account-hub-page > h1 { margin-bottom:4px; }
.account-tabs { margin:12px 0 0; }
.account-subtabs { display:flex; flex-wrap:wrap; gap:4px; margin:16px 0 0; }
.account-subtabs a {
  display:inline-flex; align-items:center; min-height:36px; padding:6px 12px; border-radius:6px;
  color:var(--secondary); text-decoration:none; font-size:14px; font-weight:550;
}
.account-subtabs a:hover { background:var(--soft); color:var(--text); }
.account-subtabs a[aria-current=page] { background:var(--selected-bg); color:var(--text); box-shadow:inset 0 -2px 0 var(--primary); }
.account-hub-page > h2 { margin:28px 0 8px; }
.account-hub-page > .lead { margin:20px 0 16px; }

.account-facts { max-width:960px; background:var(--surface); border:1px solid var(--border); border-radius:10px; border-collapse:separate; border-spacing:0; overflow:hidden; }
.account-facts th { width:13rem; color:var(--table-heading); font-weight:600; background:var(--soft); }
.account-facts td { font-size:14px; color:var(--text); }
.account-facts td:last-child { text-align:right; white-space:nowrap; }
.account-facts tr:last-child > * { border-bottom:0; }
.account-role-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.account-role-list .hint { display:block; }

.account-security-page .card { max-width:760px; }
.account-security-page .card h2 { margin-bottom:8px; }

@media (max-width:767px) {
  .account-facts, .account-facts tbody, .account-facts tr, .account-facts th, .account-facts td { display:block; width:auto; max-width:none; }
  .account-facts td:last-child { text-align:left; white-space:normal; }
  .account-facts td:empty { display:none; }
  .account-subtabs a { min-height:44px; }
}

/* Administration : même structure que « Mon compte » (titre, onglets, sous-titre). */
.account-management > h1 { margin-bottom:4px; }
.administration-tabs { margin:12px 0 0; }
.administration-title { margin:24px 0 8px; }
.administration-breadcrumb { margin:16px 0 0; font-size:14px; color:var(--muted); }
.administration-breadcrumb a { display:inline-flex; align-items:center; min-height:24px; }
.account-rights-table th[scope=row] a { font-weight:600; }
/* En-têtes et états sur deux lignes au besoin : le tableau tient dans la largeur utile à 1366 px. */
.account-management .account-rights-table thead th { white-space:normal; overflow-wrap:normal; word-break:normal; hyphens:manual; vertical-align:bottom; line-height:1.25; }
.account-management .account-rights-table td:not(.role-check) { white-space:normal; min-width:6ch; }
.account-management table.account-rights-table :is(th,td) { padding-inline:.35rem; }
@media (max-width:767px) { .administration-breadcrumb a { min-height:44px; } }