/* ACTUARUS — structure : barre latérale, barre supérieure, zone principale, grilles de page. */

.mark-dark { display: none; }
:root[data-theme="dark"] .mark-light { display: none; }
:root[data-theme="dark"] .mark-dark { display: block; }

.app { min-height: 100vh; }
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Barre latérale ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: var(--z-sidebar);
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4);
  background: var(--bg-surface); border-right: 1px solid var(--border-2); overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; }
.brand:hover { text-decoration: none; }
.wordmark { font-weight: 600; font-size: 15px; letter-spacing: 0.22em; color: var(--wordmark); }
.sidebar-close { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: var(--space-3); min-height: 38px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--fg-2); font-weight: 500;
}
.nav-link:hover { background: var(--bg-surface-2); color: var(--fg-1); text-decoration: none; }
.nav-link[aria-current="page"] { background: var(--navy-50); color: var(--navy-600); }
:root[data-theme="dark"] .nav-link[aria-current="page"] { color: var(--navy-700); }
.nav-link .nav-label { flex: 1; }
.nav-section { border-top: 1px solid var(--border-2); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.nav-section-title { padding: 0 var(--space-3); }
.user-card {
  margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--bg-surface-2); color: var(--fg-1);
}
.user-card:hover { text-decoration: none; background: var(--bg-surface-3); }
.user-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-card-name { font-weight: 600; font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-sub { font-size: var(--text-sm); color: var(--fg-3); }
.app-version { margin: calc(-1 * var(--space-2)) 0 0; padding: 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }

/* ---------- Barre supérieure ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar); height: var(--topbar-height);
  display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-2);
}
.nav-toggle { display: none; }
.topbar-search { flex: 1; max-width: 460px; display: flex; }
.topbar-search .input-group > .icon { position: absolute; left: 12px; color: var(--fg-3); pointer-events: none; }
.topbar-search .input { min-height: 38px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); }
.topbar-bell { position: relative; }
.avatar-button { border: 0; background: none; padding: 2px; border-radius: 50%; }
.avatar-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.menu-head { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-2); margin-bottom: var(--space-1); min-width: 0; }
.menu-head span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Zone principale ---------- */
.main { flex: 1; min-width: 0; width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); padding: var(--space-8) var(--gutter) var(--space-12); }
.main:focus { outline: none; }
.main.is-narrow { max-width: calc(var(--content-narrow) + 2 * var(--gutter)); margin: 0 auto; }
.page { display: flex; flex-direction: column; gap: var(--space-6); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-header-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.page-subtitle { font-size: var(--text-md); }
.page-header-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* Détail : contenu + colonne latérale */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.detail-aside { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: calc(var(--topbar-height) + var(--space-6)); }
.detail-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* Pages centrées (assistant, dépôt, invitation) */
.centered { width: 100%; max-width: var(--content-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.standalone { min-height: calc(100vh - var(--topbar-height) - 2 * var(--space-8)); display: grid; place-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
}
@media (max-width: 1024px) {
  .app-main { margin-left: 0; }
  .nav-toggle, .sidebar-close { display: inline-flex; }
  .sidebar { transform: translateX(-100%); transition: transform var(--dur-3) var(--ease-out); box-shadow: var(--shadow-3); width: min(300px, 86vw); }
  body.nav-open .sidebar { transform: none; }
  .nav-scrim { position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); background: var(--bg-overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur-2); }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .main { padding-top: var(--space-6); }
  .topbar { gap: var(--space-2); }
  .topbar-search .input { font-size: 16px; }
  .page-header { align-items: stretch; }
  .page-header-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .topbar-search { display: none; }
}

/* Choix de la langue (barre du haut). */
.lang-button { gap: var(--space-1); font-weight: 600; letter-spacing: .04em; }
.lang-list { min-width: 200px; max-height: min(70vh, 460px); overflow-y: auto; }
.menu-icon-spacer { display: inline-block; width: 16px; }
@media (max-width: 520px) { .lang-code { display: none; } }