/* Démo en ligne : repères discrets, sans toucher à l'interface elle-même. */
#telbtn { display: none !important; }  /* « Ouvrir sur le téléphone » (Tailscale) n'a pas de sens ici */
.demo-pill { display: inline-block; margin-left: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px;
  vertical-align: 1px; text-decoration: none; }
a.demo-pill:hover { color: var(--ink); border-color: var(--muted); }
#demo-note { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); top: 84px; width: min(440px, calc(100% - 24px));
  padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-size: .875rem; }
#demo-note[hidden] { display: none; }
#demo-note p { margin: 0; flex: 1; }
#demo-note button { flex: none; min-height: 40px; }
@media (max-width: 760px) { #demo-note { top: calc(max(10px, env(safe-area-inset-top)) + 104px); } }
#menu a.demo-avis { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 12px;
  font-size: .875rem; color: var(--ink); text-decoration: none; border-radius: 10px; }
#menu a.demo-avis:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (pointer: coarse) { #menu a.demo-avis { min-height: 44px; } }