/*!
 * styleguide.css — mise en page du guide de style interne (styleguide.html, noindex).
 * À charger APRÈS styles.css (qui déclare l'ordre des couches). Documentation : docs/portfolio-design-system.md
 */
@layer pages {
  /* ---------- Guide de style ---------- */
  .sg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  @media (min-width: 64em) { .sg-layout { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-xl); align-items: start; } }
  .sg-toc { font-size: var(--step--1); }
  @media (min-width: 64em) { .sg-toc { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); } }
  .sg-toc ol { display: grid; gap: 0.1rem; padding-inline-start: 1.4em; color: var(--c-text-3); font-family: var(--font-mono); font-size: var(--text-label); }
  .sg-toc a { display: inline-flex; min-block-size: 1.9rem; align-items: center; font-family: var(--font-sans); font-size: 0.875rem; color: var(--c-text-2); text-decoration: none; }
  .sg-toc a:hover { color: var(--c-text); text-decoration: underline; }
  .sg-block { padding-block: var(--space-xl); border-block-start: 1px solid var(--c-line); }
  .sg-block:first-child { padding-block-start: 0; border-block-start: 0; }
  .sg-block > h2 { font-size: var(--step-3); margin-block-end: var(--space-m); }
  .sg-block > h3 { margin-block: var(--space-l) var(--space-s); font-size: var(--step-0); font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-2); }
  .sg-demo { position: relative; padding: var(--space-m); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-l); background: var(--c-bg); }
  .sg-demo--surface { background: var(--c-surface); }
  .sg-code { display: block; margin-block-start: 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--c-text-2); overflow-wrap: anywhere; }
  .swatches { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); list-style: none; padding: 0; }
  .swatch { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); font-size: var(--step--1); }
  .swatch__chip { block-size: 4.5rem; border-block-end: 1px solid var(--c-line); }
  .swatch__meta { display: grid; gap: 0.1rem; padding: 0.6rem 0.75rem; }
  .swatch__meta code { font-size: 0.75rem; color: var(--c-text-2); }
  .sw-bg { background: var(--c-bg); } .sw-surface { background: var(--c-surface); } .sw-raised { background: var(--c-raised); }
  .sw-text { background: var(--c-text); } .sw-text-2 { background: var(--c-text-2); } .sw-text-3 { background: var(--c-text-3); }
  .sw-accent { background: var(--c-accent); } .sw-accent-text { background: var(--c-accent-text); } .sw-led { background: var(--c-led); }
  .sw-led-text { background: var(--c-led-text); } .sw-night { background: var(--night-700); } .sw-danger { background: var(--c-danger); }
  .type-scale { display: grid; gap: 0.5rem; }
  .type-scale p { display: flex; align-items: baseline; gap: 1rem; line-height: 1.15; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .type-scale code { flex: none; inline-size: 5.5rem; font-size: 0.75rem; color: var(--c-text-3); }
  .ts-6 { font-size: var(--step-6); } .ts-5 { font-size: var(--step-5); } .ts-4 { font-size: var(--step-4); } .ts-3 { font-size: var(--step-3); }
  .ts-2 { font-size: var(--step-2); } .ts-1 { font-size: var(--step-1); } .ts-0 { font-size: var(--step-0); } .ts--1 { font-size: var(--step--1); } .ts--2 { font-size: var(--step--2); }
  .space-scale { display: grid; gap: 0.5rem; list-style: none; padding: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--c-text-2); }
  .space-scale li { display: flex; align-items: center; gap: 1rem; }
  .space-scale code { inline-size: 6rem; }
  .space-scale span { block-size: 0.75rem; background: var(--c-accent); border-radius: 2px; }
  .sp-3xs { inline-size: var(--space-3xs); } .sp-2xs { inline-size: var(--space-2xs); } .sp-xs { inline-size: var(--space-xs); } .sp-s { inline-size: var(--space-s); }
  .sp-m { inline-size: var(--space-m); } .sp-l { inline-size: var(--space-l); } .sp-xl { inline-size: var(--space-xl); } .sp-2xl { inline-size: var(--space-2xl); } .sp-3xl { inline-size: var(--space-3xl); }
  .icon-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); list-style: none; padding: 0; }
  .icon-grid li { display: grid; justify-items: center; gap: 0.5rem; padding: 0.9rem 0.5rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--c-text-2); }
  .icon-grid .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--c-text); }
  .sg-filter-list { display: grid; gap: 0.5rem; list-style: none; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
  .sg-filter-list li { padding: 0.8rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); font-size: var(--step--1); }
}
}