/* BlueKey Control — mise en page. Les jetons et composants viennent de
   l'application, et la coquille est la même : barre latérale blanche fixe,
   ligne de marque à la hauteur de l'en-tête, liens pleine largeur, bloc
   utilisateur + Déconnexion en bas, en-tête collant sur la plaque grise. */
.ctrl-shell { --rail-pad: 1rem; --rail-slot: 2.8rem; min-height: 100vh; }
.ctrl-side {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--paper); border-right: 1px solid var(--border);
}
.ctrl-side-brand {
  height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center;
  padding: 0 var(--rail-pad); border-bottom: 1px solid var(--border);
}
.ctrl-brand-link { display: flex; align-items: center; gap: 0.8rem; color: inherit; min-width: 0; }
.ctrl-brand-link:hover { text-decoration: none; }
.ctrl-slot { width: var(--rail-slot); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ctrl-brand-link .ctrl-slot { width: auto; }
.ctrl-brand { font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.015em; color: var(--logo-word); white-space: nowrap; }
.ctrl-brand-blue { color: var(--logo-blue); }
.ctrl-brand > span:not(.ctrl-brand-blue) { font-weight: 500; font-size: 0.95rem; color: var(--text-muted); letter-spacing: 0; }
.ctrl-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.2rem 0; }
.ctrl-link {
  display: flex; align-items: center; width: 100%; min-height: 2.6rem;
  padding: 0.667rem var(--rail-pad); border: 0; border-radius: 0; background: none;
  font: 500 0.95rem/1.3 var(--sans); letter-spacing: 0.02em; color: var(--text-muted);
  text-align: left; cursor: pointer;
}
.ctrl-link .ctrl-slot { margin-right: 0.4rem; }
.ctrl-link:hover { background: var(--paper-deep); color: var(--text); text-decoration: none; }
.ctrl-link.is-active { background: var(--blue-tint); color: var(--blue-ink); font-weight: 600; }
.ctrl-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ctrl-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem 0; border-top: 1px solid var(--border); }
.ctrl-user { display: flex; align-items: center; padding: 0.6rem var(--rail-pad); min-width: 0; }
.ctrl-user .ctrl-slot { margin-right: 0.4rem; }
.ctrl-avatar {
  width: 32px; height: 32px; border-radius: var(--pill); display: inline-grid; place-items: center;
  background: var(--blue-tint); color: var(--blue-ink); font: 600 0.78rem/1 var(--sans);
}
.ctrl-user-name { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrl-wrap { margin-left: var(--sidebar-w); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.ctrl-topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 0.933rem; padding: 0 2.133rem;
  background: var(--paper); border-bottom: 1px solid var(--border);
}
.ctrl-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--text); }
.ctrl-main { padding: 1.867rem 2rem 3rem; display: flex; flex-direction: column; gap: var(--pile); min-width: 0; }
/* L'en-tête porte le titre de la section : le h1 reste pour les lecteurs d'écran. */
.page-head.is-section h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ctrl-auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 16px; }
.ctrl-auth-box { width: min(26rem, 100%); display: flex; flex-direction: column; gap: 1.25rem; }
.ctrl-auth-brand { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.ctrl-auth > .alert { width: min(26rem, 100%); }
.ctrl-qr { width: 200px; max-width: 100%; margin: 0 auto; background: #FFFFFF; padding: 8px; border-radius: var(--radius); }
.ctrl-invite { word-break: break-all; }
@media (max-width: 760px) {
  .ctrl-side { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); }
  .ctrl-side-brand { height: 56px; border-bottom: 0; padding: 0 12px; flex: 1; }
  .ctrl-brand { font-size: 1.2rem; }
  .ctrl-nav { order: 3; flex: 1 0 100%; flex-direction: row; padding: 0; gap: 0; border-top: 1px solid var(--border); }
  .ctrl-nav .ctrl-link { justify-content: center; min-height: 44px; }
  .ctrl-nav .ctrl-slot { width: auto; }
  .ctrl-foot { flex-direction: row; align-items: center; padding: 0 12px 0 0; border-top: 0; gap: 0; }
  .ctrl-side-brand { min-width: 0; }
  .ctrl-user { display: none; }
  /* Déconnexion en icône seule sur la ligne de marque ; le libellé reste lu. */
  .ctrl-foot .ctrl-link { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; }
  .ctrl-foot .ctrl-link .ctrl-slot { width: auto; margin: 0; }
  .ctrl-wrap { margin-left: 0; min-height: 0; }
  .ctrl-topbar { position: static; height: 56px; padding: 0 12px; }
  .ctrl-title { font-size: 1.2rem; }
  .ctrl-main { padding: 14px 12px 3rem; }
}
.narrow { max-width: 40rem; }
.cell-actions { text-align: right; white-space: nowrap; }