/* Pico : demonstration de la saisie, raccourci et notice, par-dessus vialet.css. */
.notice { max-width: var(--col); margin: 0 auto; padding: 72px var(--gutter) 0; display: grid; gap: 64px; }
.demo { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 24px 26px 22px; }
.demo-ligne { display: flex; gap: 12px; align-items: baseline; font-family: var(--mono); font-size: 19px; min-height: 30px; }
.demo-plus { color: var(--accent-bg); font-weight: 500; }
.demo-saisie { min-width: 0; word-break: break-word; }
.demo-curseur { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: var(--ink); vertical-align: -.15em; animation: cligne 1s steps(2, start) infinite; }
.demo-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; min-height: 30px; }
.demo-pastilles span {
  font-size: 14px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-s);
  background: var(--accent-bg); color: var(--accent-deep);
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.demo-pastilles span.on { opacity: 1; transform: none; }
.demo-note { margin: 18px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.notice-table > p { color: var(--ink-soft); font-size: 18px; max-width: 58ch; margin: 14px 0 24px; }
.notice table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.notice th { text-align: left; font-weight: 600; color: var(--ink-faint); padding: 0 0 10px; font-size: 14px; }
.notice td { padding: 10px 16px 10px 0; vertical-align: top; }
.notice tbody tr + tr td { border-top: 1px solid var(--panel-line); }
.notice td:first-child { white-space: nowrap; color: var(--ink-soft); width: 11em; }
.notice td code { margin: 2px 6px 2px 0; display: inline-block; }
.notice-exemple { margin-top: 18px; font-size: 15.5px; }
.notice-exemple code { white-space: normal; }
@keyframes cligne { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo-curseur { animation: none; } .demo-pastilles span { transition: none; } }
@media (max-width: 767px) {
  .notice { padding-top: 56px; gap: 48px; }
  .demo-ligne { font-size: 16px; }
  .notice td:first-child { width: auto; white-space: normal; }
}