/* Barre de navigation des maquettes — démo uniquement */
.vv-demo {
  position: fixed; left: 16px; bottom: 16px; z-index: 9000;
  display: flex; align-items: center; gap: 4px; padding: 4px;
  max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none;
  background: rgba(20, 20, 22, .88); color: #f4f4f5;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
}
.vv-demo::-webkit-scrollbar { display: none; }
.vv-demo__btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; flex: none;
  color: inherit; background: none; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.vv-demo__btn:hover { background: rgba(255, 255, 255, .1); }
.vv-demo__btn:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 1px; }
.vv-demo__btn--icon { width: 38px; padding: 0; justify-content: center; color: rgba(255, 255, 255, .7); }
.vv-demo__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vv-demo__seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.vv-demo__seg .vv-demo__btn { height: 34px; color: rgba(255, 255, 255, .7); }
.vv-demo__seg [aria-current="page"] { background: #f4f4f5; color: #141416; }
.vv-demo__btn[aria-expanded="true"] { background: #f4f4f5; color: #141416; }
.vv-demo__btn--vote { background: #3DBE7A; color: #0b2416; }
.vv-demo__btn--vote:hover { background: #4fd18c; }
.demo-off .vv-demo, .menu-open .vv-demo, .chat-open .vv-demo, .sheet-open .vv-demo { display: none; }
@media (max-width: 760px) {
  .vv-demo { left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); font-size: 12.5px; transition: bottom .5s cubic-bezier(.2, .9, .1, 1); }
  .mbar-on .vv-demo { bottom: calc(80px + env(safe-area-inset-bottom)); } /* maquette A : au-dessus de sa barre d'action */
  .vv-demo__btn { padding: 0 12px; }
  .vv-demo__long { display: none; }
  .vv-demo__seg .vv-demo__btn { min-width: 40px; justify-content: center; }
}
@media print { .vv-demo { display: none !important; } }