/* Styles propres à la page de démo — ne pas réutiliser dans les projets */
.demo-layout { display: grid; gap: var(--s7); }
@media (min-width: 1100px) { .demo-layout { grid-template-columns: 170px 1fr; } }
@media (max-width: 1099px) { .demo-toc { display: none; } }
.demo-toc { align-self: start; margin-top: var(--s8); }
main { min-width: 0; }
.demo-sec { padding-block: var(--s8); border-top: 1px solid var(--line); }
.demo-sec > h2 { display: flex; gap: var(--s4); align-items: baseline; }
.demo { position: relative; padding: var(--s6) var(--s5) var(--s5); border: 1px solid var(--line); border-radius: var(--r-2); margin-top: var(--s5); background: color-mix(in srgb, var(--bg-2) 40%, transparent); }
.demo-codebtn { position: absolute; top: 6px; right: 6px; z-index: 5; }
.demo-code { margin-top: var(--s3); }
.demo-code[hidden] { display: none; }
.demo-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: var(--s5); }
.demo-swatch { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font: 500 11px var(--f-mono); }
.demo-swatch i { display: block; height: 56px; }
.demo-swatch span { display: block; padding: 6px 8px; color: var(--fg-2); }
.demo-fx p { font: 400 var(--t-2xl)/1.15 var(--f-display); margin: 0 0 var(--s4); }
.demo-fx .fx-type { font-size: var(--t-lg); }
.demo-bg { min-height: 140px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-2); font: 500 var(--t-xs) var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); overflow: hidden; }
@media (max-width: 640px) { .ui-nav .ui-segment, .ui-nav [data-cmd-open] .ui-kbd { display: none; } .ui-nav__brand span { display: none; } }