/* Panel démo : bandeau permanent et page d'entrée (choix du niveau d'accès). */
/* Hauteur FIXE (une ligne) : le reste de la page en tient compte (menus déroulants, mobile). */
:root { --demo-h: 26px; }
.demo-banner { flex: 0 0 var(--demo-h); height: var(--demo-h); line-height: var(--demo-h); padding: 0 16px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 13px; color: #1a1300;
  background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.demo-banner a { color: inherit; font-weight: 600; text-decoration: underline; }
/* Menus du haut (Staff : long) : jamais plus hauts que l'écran restant sous le bandeau et la barre. */
.topbar .menu-pop { max-height: calc(100vh - var(--demo-h) - 70px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .demo-banner .demo-more { display: none; }
  .menu-pop { top: calc(56px + var(--demo-h)); max-height: calc(100vh - 70px - var(--demo-h)); }
}

body.demo-login { min-height: 100vh; height: auto; overflow: auto; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 50%), var(--bg); }
.demo-box { width: 100%; max-width: 760px; padding: 32px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.demo-box h1 { margin: 0 0 12px; font-size: 28px; }
.demo-box h2 { margin: 24px 0 12px; font-size: 16px; color: var(--fg-2); }
.demo-tag { padding: 2px 10px; border-radius: 999px; font-size: 14px; vertical-align: middle; color: #1a1300; background: #fbbf24; }
.demo-lead { color: var(--fg-2); font-size: 15px; }
.demo-note { color: var(--muted); }
.demo-error { color: #f87171; }
.demo-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.demo-level { display: flex; flex-direction: column; gap: 6px; padding: 16px; text-align: left; border-radius: 14px; cursor: pointer;
  color: var(--fg); border: 1px solid var(--line); background: var(--panel-2); font: inherit; transition: .2s; }
.demo-level:hover, .demo-level:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.demo-level span { color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { .demo-box { padding: 20px; } }