/* Mise en page propre à la vitrine du design system (pas au site) */
.sg { display: grid; grid-template-columns: 230px 1fr; gap: var(--s7); padding-top: var(--s6); }
.sg-nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; font-size: var(--fs-sm); }
.sg-nav h5 { font-family: var(--font-heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-deep); margin: var(--s5) 0 var(--s2); }
.sg-nav h5:first-child { margin-top: 0; }
.sg-nav a { display: block; padding: 5px 12px; border-left: 2px solid var(--border); color: var(--muted); text-decoration: none; }
.sg-nav a:hover, .sg-nav a.on { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.sg-sec { padding: var(--s7) 0; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 8px); }
.sg-sec:last-child { border: 0; }
.sg-id { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--sand-deep); letter-spacing: .12em; }
.sg-demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s5); margin-top: var(--s4); }
.sg-demo--cream { background: var(--bg-cream); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.sw { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; font-size: 13px; }
.sw i { display: block; height: 76px; border-bottom: 1px solid var(--border); }
.sw div { padding: 10px 12px; line-height: 1.35; }
.sw b { display: block; font-family: var(--font-heading); color: var(--heading); }
.sw code, code.sg-code { font-size: 12px; color: var(--faint); }
.sg-type { display: grid; gap: var(--s4); }
.sg-type > div { border-bottom: 1px dashed var(--border); padding-bottom: var(--s3); }
.sg-type small { color: var(--faint); font-size: 12px; display: block; margin-bottom: 4px; }
.sg-space { display: grid; gap: 8px; }
.sg-space div { display: flex; align-items: center; gap: var(--s4); font-size: 13px; color: var(--muted); }
.sg-space i { display: block; height: 14px; background: var(--brand); border-radius: 4px; }
.sg-radius { display: flex; flex-wrap: wrap; gap: var(--s4); }
.sg-radius div { width: 110px; height: 80px; background: var(--brand-soft); border: 1.5px solid var(--brand); display: grid; place-items: center; font-size: 12px; color: var(--brand-deep); font-weight: 700; }
@media (max-width: 900px) { .sg { grid-template-columns: 1fr; } .sg-nav { display: none; } }