/* =========================================================================
   Kara skin v3 — STYLEGUIDE (mise en page de la page de démo uniquement).
   Ne contient AUCUNE valeur de marque : seulement la grille de présentation.
   ========================================================================= */

/* Le panneau mobile off-canvas (position:fixed, hors écran à droite) ne doit
   pas créer de défilement horizontal du document. */
html:has(body.kara-sg-page), body.kara-sg-page { overflow-x: hidden; }

.kara-sg .sg-hero {
  background: var(--ks-forest);
  color: var(--ks-on-dark);
  padding-block: var(--ks-space-9) var(--ks-space-8);
}
.kara-sg .sg-hero .ks-display { color: #fff; }
.kara-sg .sg-hero p { color: var(--ks-on-dark-soft); max-width: 60ch; }

/* Repères de section */
.kara-sg .sg-block { padding-block: var(--ks-space-8); border-top: 1px solid var(--ks-line); }
.kara-sg .sg-block:first-of-type { border-top: 0; }
.kara-sg .sg-block__head { margin-bottom: var(--ks-space-6); }
.kara-sg .sg-block__head h2 { margin-bottom: var(--ks-space-2); }
.kara-sg .sg-block__head p { color: var(--ks-muted); margin: 0; }

/* Nuancier */
.kara-sg .sg-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ks-space-4); }
.kara-sg .sg-swatch { border: 1px solid var(--ks-line); border-radius: var(--ks-radius-md); overflow: hidden; background: var(--ks-paper); }
.kara-sg .sg-swatch__chip { height: 84px; display: flex; align-items: flex-end; padding: var(--ks-space-3); }
.kara-sg .sg-swatch__chip small { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.85); color: var(--ks-ink); }
.kara-sg .sg-swatch__meta { padding: var(--ks-space-3); font-size: var(--ks-fs-xs); }
.kara-sg .sg-swatch__meta b { display: block; font-family: var(--ks-font-body); color: var(--ks-ink); margin-bottom: 2px; }
.kara-sg .sg-swatch__meta span { color: var(--ks-muted); font-variant-numeric: tabular-nums; }
.kara-sg .sg-swatch__meta code { font-size: 11px; }

/* Specimen typo */
.kara-sg .sg-type-row { display: grid; gap: var(--ks-space-1); padding-block: var(--ks-space-4); border-bottom: 1px solid var(--ks-line); }
.kara-sg .sg-type-row:last-child { border-bottom: 0; }
.kara-sg .sg-type-row .sg-meta { font-size: var(--ks-fs-xs); color: var(--ks-muted); font-variant-numeric: tabular-nums; }

/* Tableau de specimens / démos génériques */
.kara-sg .sg-demo { display: flex; flex-wrap: wrap; gap: var(--ks-space-4); align-items: center; }
.kara-sg .sg-demo--col { flex-direction: column; align-items: stretch; }
.kara-sg .sg-note { font-size: var(--ks-fs-xs); color: var(--ks-muted); margin-top: var(--ks-space-2); }

/* Carte de specimen sur fond sombre (pour prouver les contrastes) */
.kara-sg .sg-on-dark { background: var(--ks-forest); border-radius: var(--ks-radius-lg); padding: var(--ks-space-6); }

.kara-sg .sg-contrast { display: grid; gap: var(--ks-space-2); font-size: var(--ks-fs-sm); }
.kara-sg .sg-contrast div { display: flex; justify-content: space-between; gap: var(--ks-space-4); padding: var(--ks-space-2) 0; border-bottom: 1px solid var(--ks-line); }
.kara-sg .sg-contrast .pass { color: var(--ks-emerald-700); font-weight: 600; }

@media (min-width: 768px) {
  .kara-sg .sg-swatches { grid-template-columns: repeat(4, 1fr); }
}