/*
 * Habillage du showroom.
 *
 * Tout est peint avec des rôles sémantiques `--ds-*` : la page entière change
 * d'univers quand `showroom.js` réécrit ces variables (thème d'une app). Les
 * valeurs ci-dessous SONT le thème « générique » — le seul endroit où la
 * palette neutre est définie (`themes.js` ne la duplique pas).
 *
 * Les tokens `--text-fluid-*`, `--spacing-fluid-*`, `--font-*` viennent de
 * `preset.css` (miroir du preset partagé) : ce fichier les CONSOMME, il n'en
 * redéfinit aucun.
 */

/* ── Thème générique : clair ─────────────────────────────────────────────── */
:root {
  --ds-bg: #f6f7f9;
  --ds-bg-image: none;
  --ds-surface: #ffffff;
  --ds-surface-2: #eef0f4;
  --ds-text: #14181f;
  --ds-text-soft: #5b6472;
  --ds-border: #dde1e8;
  --ds-primary: #1f2937;
  --ds-primary-contrast: #ffffff;
  --ds-primary-soft: #e8eaee;
  --ds-accent: #4b5563;
  --ds-success: #15803d;
  --ds-warning: #b45309;
  --ds-danger: #b91c1c;
  --ds-info: #4b5563;

  --ds-font-display: var(--font-sans);
  --ds-radius: 0.75rem;
  --ds-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.06);
  --sr-code-bg: color-mix(in srgb, var(--ds-text) 6%, transparent);
  color-scheme: light;

  /*
   * Le CONTRAT de `components.css` : l'app branche ses propres couleurs sur les
   * variables `--dwc-*`, et les composants du paquet suivent. Ici on les mappe
   * sur les rôles du showroom — c'est pour cette raison que basculer de thème
   * rhabille aussi les composants, sans une ligne de CSS de plus.
   *
   * C'est exactement le bloc de 13 lignes qu'une app consommatrice écrit une
   * fois, en remplaçant `--ds-*` par ses propres tokens.
   */
  --dwc-surface: var(--ds-surface);
  --dwc-surface-2: var(--ds-surface-2);
  --dwc-text: var(--ds-text);
  --dwc-text-soft: var(--ds-text-soft);
  --dwc-border: var(--ds-border);
  /*
   * Le contour qui DÉSIGNE un contrôle demande 3:1 (WCAG 1.4.11), ce qu'un
   * filet de séparation ne tient pas. Aucun thème du showroom ne déclare de
   * `--ds-border-strong` : on retombe sur le texte secondaire, garanti lisible
   * sur les deux fonds, donc largement au-dessus de 3:1.
   */
  --dwc-border-strong: var(--ds-border-strong, var(--ds-text-soft));
  --dwc-primary: var(--ds-primary);
  --dwc-primary-contrast: var(--ds-primary-contrast);
  --dwc-primary-soft: var(--ds-primary-soft);
  --dwc-success: var(--ds-success);
  --dwc-warning: var(--ds-warning);
  --dwc-danger: var(--ds-danger);
  --dwc-info: var(--ds-info);
  --dwc-radius: var(--ds-radius);
  --dwc-shadow: var(--ds-shadow);
  --dwc-header-row-height: var(--ds-header-row-height, 3.25rem);
}

/* ── Thème générique : sombre ────────────────────────────────────────────── */
:root[data-theme='dark'] {
  --ds-bg: #0d1117;
  --ds-surface: #161b22;
  --ds-surface-2: #1f2630;
  --ds-text: #e6e9ef;
  --ds-text-soft: #9aa4b2;
  --ds-border: #2a323d;
  --ds-primary: #e6e9ef;
  --ds-primary-contrast: #0d1117;
  --ds-primary-soft: #232b36;
  --ds-accent: #b6bec9;
  --ds-success: #4ade80;
  --ds-warning: #fbbf24;
  --ds-danger: #fb7185;
  --ds-info: #b6bec9;

  --ds-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  --sr-code-bg: color-mix(in srgb, var(--ds-text) 10%, transparent);
  color-scheme: dark;
}

/* ── Socle ───────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--ds-bg);
  background-image: var(--ds-bg-image);
  background-attachment: fixed;
  color: var(--ds-text);
  font-size: var(--text-fluid-base);
  line-height: 1.55;
}

h1,
h2,
h3 {
  font-family: var(--ds-font-display);
  line-height: 1.2;
  text-wrap: balance;
}

a {
  color: inherit;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--sr-code-bg);
  border-radius: 0.35rem;
  padding: 0.1em 0.35em;
}

pre {
  margin: 0;
  overflow-x: auto;
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: var(--spacing-fluid-md);
  font-size: var(--text-fluid-xs);
}

pre code {
  background: none;
  padding: 0;
}

.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sr-skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  background: var(--ds-primary);
  color: var(--ds-primary-contrast);
  padding: 0.6rem 1rem;
  border-radius: var(--ds-radius);
  text-decoration: none;
  transition: top 0.15s ease;
}

.sr-skip:focus-visible {
  top: 0.5rem;
}

/* ── Barre supérieure ────────────────────────────────────────────────────── */
.sr-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ds-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ds-border);
  padding-top: max(env(safe-area-inset-top), 0px);
}

.sr-topbar-inner {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.4rem var(--spacing-fluid-md) 0.3rem;
}

.sr-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
}

.sr-brand-name {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sr-brand-pkg {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sr-progress {
  height: 2px;
  width: 100%;
  background: color-mix(in srgb, var(--ds-primary) 18%, transparent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.12s linear;
}

.sr-theme-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.7);
  color: var(--ds-text);
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sr-theme-open:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.sr-theme-picker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.sr-theme-picker-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--ds-primary);
  border-radius: calc(var(--ds-radius) * 0.7);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: var(--text-fluid-sm);
  font-weight: 600;
  cursor: pointer;
}

.sr-theme-picker-summary::-webkit-details-marker {
  display: none;
}

.sr-theme-picker[open] .sr-theme-picker-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sr-theme-picker-summary > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-theme-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.4rem;
  max-height: min(18rem, 50vh);
  overflow: auto;
  padding: 0.55rem;
  border: 1px solid var(--ds-primary);
  border-top: 0;
  border-radius: 0 0 calc(var(--ds-radius) * 0.7) calc(var(--ds-radius) * 0.7);
  background: var(--ds-surface);
  box-shadow: 0 0.45rem 1.2rem
    color-mix(in srgb, var(--ds-text) 12%, transparent);
}

.sr-theme-tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.6);
  background: var(--ds-bg);
  color: var(--ds-text);
  font: inherit;
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sr-theme-tile[aria-selected='true'] {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
}

.sr-theme-tile-swatches {
  display: flex;
  gap: 0.2rem;
}

.sr-theme-tile-swatches span {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ds-text) 18%, transparent);
}

.sr-theme-tile-swatches [data-role='surface'] {
  border-radius: 0.15rem;
}

.sr-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text);
  cursor: pointer;
}

.sr-section-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-primary-soft);
  color: var(--ds-text);
  font-size: var(--text-fluid-xs);
  font-weight: 600;
}

.sr-section-chip button {
  margin: 0;
  padding: 0.1rem 0.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

html[data-section-focus] .sr-section:not([data-section-pinned]) {
  display: none;
}

html[data-inspect='on'] {
  cursor: crosshair;
}

html[data-inspect='on'] .sr-inspect-hot {
  outline: 2px solid var(--ds-info, var(--ds-primary));
  outline-offset: 2px;
}

.sr-inspect-tip {
  position: fixed;
  z-index: 60;
  min-width: 11rem;
  max-width: 16rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ds-border);
  border-radius: 0.55rem;
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: var(--text-fluid-xs);
  box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--ds-text) 14%, transparent);
  pointer-events: none;
}

.sr-inspect-tip code {
  font-size: 0.85em;
}

.sr-inspect-tip .sr-inspect-hex {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  color: var(--ds-text-soft);
}

.sr-inspect-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ds-text) 20%, transparent);
}

.sr-dock {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 9;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem var(--spacing-fluid-md);
  padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ds-border);
  background: color-mix(in srgb, var(--ds-surface) 94%, transparent);
  backdrop-filter: blur(10px);
}

.sr-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.55rem var(--spacing-fluid-md);
  border-bottom: 1px solid
    color-mix(in srgb, var(--ds-info) 35%, var(--ds-border));
  background: color-mix(in srgb, var(--ds-info) 10%, var(--ds-surface));
  font-size: var(--text-fluid-xs);
}

.sr-news[hidden] {
  display: none;
}

.sr-news-body {
  margin: 0;
  flex: 1 1 16rem;
}

.sr-news-body strong {
  margin-right: 0.35rem;
}

.sr-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: 100%;
}

.sr-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.85rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  cursor: pointer;
}

.sr-recent-chip[aria-pressed='true'] {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
}

.sr-recent-chip .sr-sw {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ds-text) 18%, transparent);
}

.sr-tour {
  position: sticky;
  bottom: 0.75rem;
  z-index: 12;
  max-width: 24rem;
  margin: 0 var(--spacing-fluid-md) 0.75rem auto;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ds-info) 40%, var(--ds-border));
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  box-shadow: 0 0.4rem 1.2rem
    color-mix(in srgb, var(--ds-text) 14%, transparent);
}

.sr-tour[hidden] {
  display: none;
}

.sr-tour-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.55rem;
  padding: 0;
  list-style: none;
}

.sr-tour-steps li {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  color: var(--ds-text-soft);
  font-size: 0.7rem;
  font-weight: 600;
}

.sr-tour-steps li[aria-current='step'] {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  color: var(--ds-text);
}

.sr-tour-steps li.done {
  color: var(--ds-success);
}

.sr-tour-title {
  margin: 0 0 0.35rem;
  font-size: var(--text-fluid-md);
}

.sr-tour-body {
  margin: 0 0 0.65rem;
  font-size: var(--text-fluid-sm);
  color: var(--ds-text-soft);
}

.sr-tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
}

.sr-campaign .sr-cell-ok {
  color: var(--ds-success);
  font-weight: 700;
}

.sr-campaign .sr-cell-ko {
  color: var(--ds-danger);
  font-weight: 700;
  background: color-mix(in srgb, var(--ds-danger) 10%, transparent);
}

.sr-export-canvas {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 640px;
  height: 280px;
}

/* ── Vague 4 : scènes, présentation, recettes, checklist, viewport ──────── */

.sr-present-bar {
  position: sticky;
  top: var(--sr-header, 0px);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 auto;
  max-width: 68rem;
  padding: 0.55rem var(--spacing-fluid-md);
  border-bottom: 1px solid var(--ds-border);
  background: color-mix(in srgb, var(--ds-surface) 94%, transparent);
  backdrop-filter: blur(8px);
}

.sr-present-bar[hidden] {
  display: none;
}

.sr-present-status {
  margin: 0;
  font-size: var(--text-fluid-sm);
  font-weight: 600;
}

.sr-present-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

html[data-present='on'] .sr-topbar-secondary,
html[data-present='on'] .sr-dock,
html[data-present='on'] .sr-news,
html[data-present='on'] .sr-tour,
html[data-present='on'] .sr-recipe,
html[data-present='on'] .sr-hero-actions {
  display: none !important;
}

html[data-present='on'] .sr-section:not([data-present-current]) {
  display: none;
}

html[data-present='on'] .sr-section[data-present-current] {
  min-height: calc(100vh - 8rem);
  padding-block: var(--spacing-fluid-xl);
}

.sr-scenes {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius, 0.75rem);
  background: var(--ds-surface);
  color: var(--ds-text);
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 0;
}

.sr-scenes::backdrop {
  background: color-mix(in srgb, var(--ds-bg) 55%, transparent);
}

.sr-scenes-inner {
  display: grid;
  gap: 0.75rem;
  padding: var(--spacing-fluid-md);
}

.sr-scenes-inner .sr-control {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.45rem;
}

.sr-scenes-inner input[type='text'] {
  flex: 1 1 12rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--ds-border);
  border-radius: 0.5rem;
  background: var(--ds-bg);
  color: var(--ds-text);
  font: inherit;
}

.sr-scene-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-scene-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ds-border);
  border-radius: 0.6rem;
  background: var(--ds-bg);
}

.sr-scene-list li[aria-current='true'] {
  border-color: var(--ds-primary);
}

.sr-scene-title {
  margin: 0;
  font-size: var(--text-fluid-sm);
  font-weight: 600;
}

.sr-scene-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.sr-scene-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--ds-surface-2);
  color: var(--ds-text-soft);
  font-size: var(--text-fluid-xs);
}

.sr-scene-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.sr-recipe {
  position: sticky;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 35;
  margin: 0 auto 0.75rem;
  max-width: min(36rem, calc(100% - 1.5rem));
  padding: 0.85rem 1rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius, 0.75rem);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.sr-recipe[hidden] {
  display: none;
}

.sr-recipe-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.sr-recipe-rail button {
  min-height: 2rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-bg);
  color: var(--ds-text-soft);
  font: inherit;
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  cursor: pointer;
}

.sr-recipe-rail button[aria-current='true'] {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  color: var(--ds-text);
}

.sr-recipe-meta {
  margin: 0 0 0.25rem;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-recipe-title {
  margin: 0 0 0.35rem;
  font-size: var(--text-fluid-md, 1.05rem);
}

.sr-recipe-body {
  margin: 0 0 0.65rem;
  font-size: var(--text-fluid-sm);
  color: var(--ds-text-soft);
}

.sr-recipe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
}

.sr-recipe-hot {
  outline: 2px solid color-mix(in srgb, var(--ds-primary) 55%, transparent);
  outline-offset: 4px;
  border-radius: 0.35rem;
}

.sr-checklist {
  margin-top: var(--spacing-fluid-md);
}

.sr-checklist-summary {
  margin: 0.35rem 0 0.55rem;
  font-size: var(--text-fluid-sm);
  font-weight: 600;
}

.sr-checklist-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-checklist-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ds-border);
  border-radius: 0.55rem;
  background: var(--ds-surface);
  font-size: var(--text-fluid-sm);
}

.sr-check-ok {
  color: var(--ds-success);
  font-size: var(--text-fluid-xs);
  font-weight: 700;
}

.sr-check-kept {
  color: var(--ds-warning);
  font-size: var(--text-fluid-xs);
  font-weight: 700;
}

.sr-check-ko {
  color: var(--ds-danger);
  font-size: var(--text-fluid-xs);
  font-weight: 700;
}

.sr-viewport-twin {
  margin: var(--spacing-fluid-md) 0;
}

.sr-viewport-grid {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.75rem;
}

@media (max-width: 40rem) {
  .sr-viewport-grid {
    grid-template-columns: 1fr;
  }
}

.sr-viewport-pane {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius, 0.75rem);
  background: var(--ds-surface);
  overflow: hidden;
}

.sr-viewport-label {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface-2);
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  color: var(--ds-text-soft);
}

.sr-viewport-scale {
  margin: 0;
  padding: 0.55rem 0.65rem;
  list-style: none;
}

.sr-viewport-scale li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--ds-border);
  font-size: var(--text-fluid-sm);
}

.sr-viewport-scale li:last-child {
  border-bottom: 0;
}

.sr-viewport-scale .sr-vp-sample {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: var(--ds-font-display, inherit);
}

.sr-viewport-scale .sr-vp-px {
  color: var(--ds-text-soft);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-fluid-xs);
}

.sr-dock-label {
  flex: 0 0 auto;
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  color: var(--ds-text-soft);
}

.sr-dock select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--ds-primary);
  border-radius: calc(var(--ds-radius) * 0.7);
  background: var(--ds-bg);
  color: var(--ds-text);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-fluid-sm);
}

.sr-cheatsheet {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  color: var(--ds-text);
  padding: 0;
  max-width: 22rem;
  width: calc(100% - 2rem);
  box-shadow: 0 0.5rem 1.5rem
    color-mix(in srgb, var(--ds-text) 16%, transparent);
}

.sr-cheatsheet::backdrop {
  background: color-mix(in srgb, var(--ds-text) 35%, transparent);
}

.sr-cheatsheet-inner {
  margin: 0;
  padding: 1rem 1.1rem;
}

.sr-cheatsheet-inner h2 {
  margin: 0 0 0.75rem;
  font-size: var(--text-fluid-md);
}

.sr-cheat-list {
  display: grid;
  gap: 0.45rem 0.75rem;
  margin: 0 0 0.85rem;
}

.sr-cheat-list > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.sr-cheat-list dt {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-cheat-list dd {
  margin: 0;
  font-size: var(--text-fluid-sm);
}

.sr-cheat-list kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--ds-border);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
  background: var(--ds-bg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.sr-diff-same {
  color: var(--ds-text-soft);
}

@media (max-width: 40rem) {
  .sr-dock {
    display: flex;
  }

  .sr-theme-open:not(.sr-dock .sr-theme-open) {
    display: none;
  }

  .sr-main {
    padding-bottom: 4.5rem;
  }
}

.sr-prefs-badge {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-surface);
}

.sr-toc-groups {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: max-content;
  padding: 0.15rem 0;
}

.sr-toc-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
}

.sr-toc-group-label {
  margin: 0;
  padding: 0 0.15rem;
  color: var(--ds-text-soft);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sr-rail .sr-toc-group .sr-toc {
  margin: 0;
  padding: 0;
}

.sr-theme-note {
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sr-theme-note:hover {
  border-left-color: var(--ds-primary);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--ds-primary) 22%, transparent);
}

.sr-theme-note-cta {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--ds-primary);
  font-size: var(--text-fluid-xs);
  font-weight: 600;
}

.sr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: var(--spacing-fluid-sm) 0 0;
}

.sr-pair-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: var(--spacing-fluid-sm) 0;
}

.sr-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-primary-soft);
  color: var(--ds-text);
  font-size: var(--text-fluid-xs);
  font-weight: 600;
}

.sr-view-chip button {
  margin: 0;
  padding: 0.1rem 0.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.sr-adoption-bar {
  display: block;
  width: 100%;
  min-width: 4.5rem;
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-text) 10%, transparent);
  overflow: hidden;
}

.sr-adoption-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-primary);
}

.sr-adoption-dups {
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--ds-warning) 45%, var(--ds-border));
  border-radius: var(--ds-radius);
  background: color-mix(in srgb, var(--ds-warning) 10%, var(--ds-surface));
}

.sr-focus-flash {
  animation: sr-focus-flash 1.6s ease;
}

@keyframes sr-focus-flash {
  0%,
  100% {
    box-shadow: none;
  }
  20%,
  60% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 55%, transparent);
  }
}

html[data-density='compact'] .sr-section {
  padding-block: calc(var(--spacing-fluid-md) * 0.72);
}

html[data-density='compact'] .sr-lede,
html[data-density='compact'] .sr-note,
html[data-density='compact'] .sr-section > p:not(.sr-lede) {
  max-width: 72ch;
}

html[data-density='compact'] .sr-section > p:not(.sr-lede):not(.sr-theme-note) {
  font-size: var(--text-fluid-sm);
}

html[data-density='compact'] .sr-hero-actions + *,
html[data-density='compact'] .sr-cat-controls {
  margin-top: 0.5rem;
}

.sr-apps-search-hint {
  color: var(--ds-text-soft);
  font-size: var(--text-fluid-xs);
}

.sr-apps-search-hint kbd {
  margin-inline: 0.1rem;
}

/* Contrôle primaire : endosser une app. */
.sr-theme-primary {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: min(16rem, 100%);
  flex: 1 1 14rem;
  max-width: 22rem;
}

.sr-theme-primary > label,
.sr-theme-primary > #theme-app-label {
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  color: var(--ds-text-soft);
}

.sr-theme-primary-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.sr-theme-primary select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  font: inherit;
  font-size: var(--text-fluid-sm);
  font-weight: 600;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-primary);
  border-radius: calc(var(--ds-radius) * 0.7);
  padding: 0.4rem 0.65rem;
  min-height: 2.5rem;
}

.sr-theme-swatches {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.2rem;
}

.sr-theme-swatches [data-swatch] {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ds-text) 18%, transparent);
  background: var(--ds-border);
}

.sr-theme-swatches [data-swatch='surface'] {
  border-radius: 0.2rem;
}

/* Liens parc : discrets — le job du showroom n'est pas la nav inter-sites. */
.sr-sites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.65rem;
}

.sr-sites a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.05rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ds-text-soft);
  font-size: var(--text-fluid-xs);
  font-weight: 500;
  text-decoration: none;
}

.sr-sites a:hover {
  color: var(--ds-text);
}

.sr-sites a[aria-current='page'] {
  border-bottom-color: var(--ds-primary);
  background: none;
  color: var(--ds-text);
  font-weight: 700;
}

.sr-topbar-secondary {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0 0 0.15rem;
  padding-inline: var(--spacing-fluid-md);
}

.sr-sommaire-toggle {
  display: none;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  cursor: pointer;
}

.sr-sommaire-toggle[aria-expanded='true'] {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

/* Préférences regroupées (schéma + langue). */
.sr-prefs {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.sr-prefs-summary {
  position: relative;
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.7);
  background: var(--ds-surface);
  color: var(--ds-text-soft);
  cursor: pointer;
}

.sr-prefs-summary::-webkit-details-marker {
  display: none;
}

.sr-prefs[open] .sr-prefs-summary {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.sr-prefs-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 12.5rem;
  padding: 0.75rem;
  border: 1px solid var(--ds-border);
  border-radius: 0.75rem;
  background: var(--ds-surface);
  box-shadow: 0 0.4rem 1.2rem
    color-mix(in srgb, var(--ds-text) 12%, transparent);
}

.sr-prefs-panel legend {
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  color: var(--ds-text-soft);
}

.sr-cmd {
  position: relative;
  display: block;
  flex: 1 1 12rem;
  max-width: 22rem;
  min-width: 10rem;
}

.sr-cmd input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.35rem 4.6rem 0.35rem 0.75rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-size: var(--text-fluid-sm, 0.9rem);
}

.sr-cmd input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.sr-cmd:focus-within input {
  padding-right: 0.75rem;
  border-color: var(--ds-primary);
  outline: none;
}

.sr-cmd-kbd {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 0.18rem;
  margin: 0;
  pointer-events: none;
}

.sr-cmd-kbd span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  padding: 0.05rem 0.32rem;
  border: 1px solid var(--ds-border);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
  background: var(--ds-bg);
  color: var(--ds-text-soft);
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-size: 0.68rem;
  line-height: 1.4;
}

.sr-cmd-kbd [data-mod='meta'] {
  display: none;
}

html[data-mod='meta'] .sr-cmd-kbd [data-mod='ctrl'] {
  display: none;
}

html[data-mod='meta'] .sr-cmd-kbd [data-mod='meta'] {
  display: inline-flex;
}

.sr-cmd:focus-within .sr-cmd-kbd {
  opacity: 0;
}

.sr-cmd-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 0.7rem;
}

.sr-cmd-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--ds-text);
  cursor: pointer;
}

.sr-cmd-list li[aria-selected='true'] {
  background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
}

.sr-cmd-kind {
  flex: 0 0 auto;
  color: var(--ds-text-soft);
  font-size: var(--text-fluid-xs);
}

.sr-cmd-empty {
  color: var(--ds-text-soft);
  cursor: default;
}

@media (max-width: 40rem) {
  .sr-topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
  }

  .sr-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .sr-prefs {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    justify-self: end;
  }

  .sr-theme-primary {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  .sr-cmd {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    max-width: none;
  }

  .sr-topbar-secondary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.5rem;
  }

  .sr-sites {
    grid-column: 1 / -1;
  }

  .sr-sommaire-toggle {
    display: inline-flex;
    grid-column: 1 / -1;
    justify-self: start;
  }

  .sr-rail {
    grid-column: 1 / -1;
  }

  .sr-topbar[data-sommaire='closed'] .sr-rail {
    display: none;
  }
}

@media (max-width: 23.5rem) {
  .sr-brand,
  .sr-prefs {
    grid-column: 1 / -1;
  }

  .sr-prefs {
    justify-self: start;
  }
}

.sr-hero h1 {
  margin: 0 0 0.65rem;
  font-family: var(--ds-font-display);
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sr-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-control select {
  font: inherit;
  font-size: var(--text-fluid-sm);
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.7);
  padding: 0.45rem 0.6rem;
  min-height: 2.75rem;
  max-width: 15rem;
}

/* Segmenté clair / sombre / système — reflète le contrat de `useTheme`. */
.sr-segmented {
  display: flex;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.7);
  overflow: hidden;
  background: var(--ds-surface);
}

.sr-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sr-segmented label {
  padding: 0.45rem 0.55rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  cursor: pointer;
  user-select: none;
}

/* Même boîte que les icônes du paquet (18 px, trait de 2). */
.sr-ico {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le code langue occupe la place d'une icône : un drapeau dirait autre chose
   que la langue, et un menu ne peut pas porter de dessin. */
.sr-ico-code {
  width: auto;
  min-width: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  stroke: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.sr-prefs-panel fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.sr-segmented input:checked + label {
  background: var(--ds-primary);
  color: var(--ds-primary-contrast);
}

.sr-segmented input:focus-visible + label {
  outline: 2px solid var(--ds-text);
  outline-offset: -2px;
}

.sr-segmented input:disabled + label {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sortie de mesure : sa place est près de la liste des points de rupture,
   pas dans la barre de navigation. */
.sr-bp-badge {
  display: inline-block;
  margin-bottom: var(--spacing-fluid-sm);
  font-family: var(--font-mono);
  font-size: var(--text-fluid-xs);
  border: 1px dashed var(--ds-border);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  color: var(--ds-text-soft);
  white-space: nowrap;
}

/* ── Mise en page ────────────────────────────────────────────────────────── */
.sr-main {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--spacing-fluid-lg) var(--spacing-fluid-md);
  padding-bottom: calc(
    var(--spacing-fluid-lg) + max(env(safe-area-inset-bottom), 0px)
  );
  display: flex;
  flex-direction: column;
  gap: var(--spacing-fluid-lg);
}

.sr-section {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  padding: var(--spacing-fluid-lg);
  scroll-margin-top: calc(var(--sr-header, 8.75rem) + 0.75rem);
}

.sr-section > h2 {
  margin: 0 0 0.35rem;
  font-size: var(--text-fluid-xl);
}

.sr-section > h2 + p {
  margin: 0 0 var(--spacing-fluid-md);
  color: var(--ds-text-soft);
  font-size: var(--text-fluid-sm);
  max-width: 60ch;
}

.sr-hero {
  background: var(--ds-primary-soft);
  border-color: color-mix(in srgb, var(--ds-primary) 30%, var(--ds-border));
}

.sr-lede {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-fluid-lg);
}

.sr-theme-note {
  margin: var(--spacing-fluid-md) 0 0;
  padding: var(--spacing-fluid-sm) var(--spacing-fluid-md);
  border-left: 3px solid var(--ds-primary);
  background: var(--ds-surface);
  border-radius: 0 var(--ds-radius) var(--ds-radius) 0;
  font-size: var(--text-fluid-sm);
}

.sr-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--spacing-fluid-md) 0 0;
  padding: 0;
  list-style: none;
}

.sr-toc a {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  font-size: var(--text-fluid-xs);
  text-decoration: none;
}

.sr-toc a:hover,
.sr-toc a[aria-current='location'] {
  border-color: var(--ds-primary);
}

.sr-toc a[aria-current='location'] {
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
  font-weight: 600;
}

/* Chips de sommaire : une rangée qui défile, pas un second mur. */
.sr-rail {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-x: auto;
  border-top: 0;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.sr-rail .sr-toc {
  flex-wrap: nowrap;
  width: max-content;
  margin: 0;
  padding: 0.2rem 0;
  gap: 0.35rem;
}

.sr-rail .sr-toc-groups {
  padding: 0.2rem 0;
}

.sr-rail .sr-toc a {
  min-height: 2rem;
  padding: 0.2rem 0.65rem;
}

.sr-subtitle {
  margin: var(--spacing-fluid-lg) 0 var(--spacing-fluid-sm);
  font-size: var(--text-fluid-lg);
}

.sr-subtitle:first-of-type {
  margin-top: 0;
}

.sr-note {
  margin: var(--spacing-fluid-sm) 0 0;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  max-width: 70ch;
}

.sr-adoption {
  margin: var(--spacing-fluid-md) 0 0;
  padding: var(--spacing-fluid-sm) 0 0;
  border-top: 1px solid var(--ds-border);
}

.sr-adoption h3 {
  margin: 0 0 0.35rem;
  font-size: var(--text-fluid-md);
}

.sr-adoption h4 {
  margin: var(--spacing-fluid-sm) 0 0.35rem;
  font-size: var(--text-fluid-sm);
}

.sr-adoption .sr-table-wrap {
  margin-top: 0.5rem;
  max-height: 22rem;
  overflow: auto;
}

/* ── Tableaux de tokens ──────────────────────────────────────────────────── */
.sr-table-wrap {
  overflow-x: auto;
}

.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-fluid-sm);
}

.sr-table th,
.sr-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--ds-border);
  vertical-align: middle;
}

.sr-table thead th {
  font-size: var(--text-fluid-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-soft);
  background: var(--ds-surface-2);
  white-space: nowrap;
}

.sr-table code {
  white-space: nowrap;
}

/* Une signature tient toute la largeur et revient à la ligne. Dans le tableau
   elle restait sur une seule ligne, et le séparateur allongeait la colonne
   au-delà de l'écran. */
.sr-hook-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.sr-hook {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius, 0.75rem) * 0.7);
  background: var(--ds-surface-2);
}

.sr-hook-name {
  margin: 0;
  font-size: var(--text-fluid-base);
}

.sr-hook-sig-label,
.sr-hook-dont-label {
  display: block;
  font-size: var(--text-fluid-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-soft);
}

.sr-hook-sig-label {
  margin-top: 0.55rem;
}

.sr-hook-sig {
  display: block;
  margin: 0.2rem 0 0.55rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--text-fluid-xs);
  line-height: 1.5;
}

.sr-hook p {
  margin: 0.3rem 0 0;
}

.sr-hook-dont-label {
  margin-top: 0.55rem;
}

.sr-computed {
  font-family: var(--font-mono);
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  white-space: nowrap;
}

.sr-sample {
  font-family: var(--ds-font-display);
  line-height: 1.15;
}

.sr-bar {
  display: block;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--ds-primary);
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */
.sr-bp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.sr-bp-list li {
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.8);
  padding: var(--spacing-fluid-sm);
  background: var(--ds-surface-2);
}

.sr-bp-list li[data-active='true'] {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
}

.sr-bp-list strong {
  display: block;
  font-family: var(--font-mono);
}

.sr-bp-list span {
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

/* ── Démos safe-area / cible tactile / focus ─────────────────────────────── */
.sr-safe-demo {
  border: 2px dashed var(--ds-primary);
  border-radius: var(--ds-radius);
  background: var(--ds-surface-2);
  min-height: 5rem;
}

.sr-safe-demo > div {
  background: var(--ds-primary-soft);
  border-radius: calc(var(--ds-radius) * 0.6);
  padding: var(--spacing-fluid-sm);
  font-size: var(--text-fluid-xs);
  height: 100%;
}

.sr-target-demo {
  display: flex;
  align-items: center;
  gap: var(--spacing-fluid-md);
  flex-wrap: wrap;
}

.sr-target-demo .sr-ghost {
  position: relative;
}

.sr-target-demo .sr-ghost::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2.75rem;
  height: 2.75rem;
  translate: -50% -50%;
  border: 1px dashed var(--ds-danger);
  border-radius: 0.25rem;
  pointer-events: none;
}

/* ── Palette ─────────────────────────────────────────────────────────────── */
.sr-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-fluid-sm);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.sr-swatch {
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.8);
  overflow: hidden;
  background: var(--ds-surface-2);
}

.sr-swatch-chip {
  height: 3.25rem;
  border-bottom: 1px solid var(--ds-border);
}

.sr-swatch-meta {
  padding: 0.5rem 0.6rem;
  display: grid;
  gap: 0.15rem;
}

.sr-swatch-meta strong {
  font-size: var(--text-fluid-xs);
}

.sr-swatch-meta code {
  font-size: 0.72rem;
  background: none;
  padding: 0;
  color: var(--ds-text-soft);
}

.sr-swatch-meta span {
  font-size: 0.72rem;
  color: var(--ds-text-soft);
}

/* ── Fiches de démonstration de composant ────────────────────────────────── */
.sr-demo {
  --sr-demo-split: 1fr 1fr;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  overflow: hidden;
  margin-bottom: var(--spacing-fluid-md);
}

@media (min-width: 48rem) {
  .sr-demo {
    display: grid;
    grid-template-columns: var(--sr-demo-split);
    grid-template-rows: auto 1fr;
  }

  .sr-demo-head {
    grid-column: 1 / -1;
  }

  .sr-demo-split-body {
    display: contents;
  }

  .sr-demo .sr-demo-docs {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid var(--ds-border);
    min-width: 0;
  }

  .sr-demo .sr-demo-stage {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    align-self: stretch;
  }

  .sr-demo .sr-demo-gutter {
    display: none;
  }

  .sr-demo details {
    border-top: 0;
  }

  .sr-demo details[open] {
    height: 100%;
  }
}

.sr-demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: var(--spacing-fluid-sm) var(--spacing-fluid-md);
  background: var(--ds-surface-2);
  border-bottom: 1px solid var(--ds-border);
}

.sr-demo-head h4 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--text-fluid-base);
}

.sr-demo-head p {
  margin: 0;
  flex: 1 1 18rem;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-demo-stage {
  padding: var(--spacing-fluid-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-fluid-sm);
  /* Les blocs (bannières, état vide, grille famille) occupent la largeur ;
     les éléments en ligne (badges) sont regroupés dans un `.sr-row`. */
  align-items: stretch;
}

.sr-demo details {
  border-top: 1px solid var(--ds-border);
  font-size: var(--text-fluid-xs);
}

.sr-demo summary {
  padding: 0.6rem var(--spacing-fluid-md);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ds-text-soft);
}

.sr-demo details > div {
  padding: 0 var(--spacing-fluid-md) var(--spacing-fluid-md);
}

.sr-selectors {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
}

/* ── Boutons / champs de référence (illustratifs, hors preset) ───────────── */
.sr-btn {
  font: inherit;
  font-size: var(--text-fluid-sm);
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: calc(var(--ds-radius) * 0.7);
  border: 1px solid transparent;
  background: var(--ds-primary);
  color: var(--ds-primary-contrast);
  cursor: pointer;
}

.sr-btn:hover {
  filter: brightness(1.08);
}

.sr-btn:disabled {
  opacity: 0.45;
  filter: none;
  cursor: not-allowed;
}

.sr-btn--ghost {
  background: transparent;
  color: var(--ds-text);
  border-color: var(--ds-border);
}

.sr-btn--soft {
  background: var(--ds-primary-soft);
  color: var(--ds-text);
}

.sr-btn--danger {
  background: var(--ds-danger);
  color: #ffffff;
}

.sr-field {
  display: grid;
  gap: 0.3rem;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  min-width: 14rem;
}

.sr-field input,
.sr-field select {
  font: inherit;
  font-size: var(--text-fluid-sm);
  color: var(--ds-text);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.7);
  padding: 0.5rem 0.6rem;
  min-height: 2.75rem;
}

.sr-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-fluid-sm);
  align-items: flex-end;
}

.sr-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface-2);
  padding: var(--spacing-fluid-md);
  max-width: 22rem;
}

.sr-card h4 {
  margin: 0 0 0.25rem;
  font-family: var(--ds-font-display);
}

.sr-card p {
  margin: 0 0 var(--spacing-fluid-sm);
  font-size: var(--text-fluid-sm);
  color: var(--ds-text-soft);
}

/* ── Copie au presse-papier ──────────────────────────────────────────────── */
.sr-copy {
  font: inherit;
  font-size: 0.8em;
  line-height: 1;
  margin-left: 0.4rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--ds-text-soft);
  cursor: pointer;
  /* Reste discret jusqu'au survol ou au focus : quatorze boutons visibles en
     permanence encombreraient plus qu'ils n'aideraient. */
  opacity: 0;
  transition: opacity 0.12s ease;
}

:is(td, th, p, div, li):hover > .sr-copy,
.sr-copy:focus-visible,
.sr-copy[data-state] {
  opacity: 1;
}

.sr-copy:hover {
  border-color: var(--ds-border);
  color: var(--ds-text);
}

.sr-copy[data-state='ok'] {
  color: var(--ds-success);
}

.sr-copy[data-state='ko'] {
  color: var(--ds-danger);
}

/* Sur écran tactile il n'y a pas de survol : les boutons restent visibles. */
@media (hover: none) {
  .sr-copy {
    opacity: 1;
  }
}

/* ── Extraits d'usage ────────────────────────────────────────────────────── */
[data-snippet] {
  margin: var(--spacing-fluid-sm) 0;
}

.sr-snippet-head {
  margin: 0 0 0.35rem;
  font-size: var(--text-fluid-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-soft);
}

/* ── Contrôles a11y : pastilles et lignes localisables ───────────────────── */
.sr-inline-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.3rem;
  vertical-align: -1px;
  border-radius: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--ds-text) 25%, transparent);
}

.sr-fix {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--ds-text-soft);
}

.sr-row-locatable {
  cursor: pointer;
}

.sr-row-locatable:hover,
.sr-row-locatable:focus-visible {
  background: var(--ds-surface-2);
}

/* Mise en évidence temporaire de l'élément mesuré. */
[data-sr-highlight] {
  outline: 3px dashed var(--ds-danger);
  outline-offset: 3px;
}

/* ── Comparaison clair / sombre ──────────────────────────────────────────── */
.sr-compare {
  display: grid;
  gap: var(--spacing-fluid-sm);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.sr-compare-panel {
  padding: var(--spacing-fluid-md);
  border: 1px solid var(--dwc-border);
  border-radius: var(--ds-radius);
  /* Peint avec la palette du schéma opposé, posée en style inline par le JS :
     les deux colonnes montrent donc de vraies couleurs, pas une simulation. */
  background: var(--dwc-surface);
  color: var(--dwc-text);
}

.sr-compare-title {
  margin: 0 0 0.5rem;
  font-family: var(--ds-font-display);
  font-size: var(--text-fluid-sm);
  font-weight: 700;
}

.sr-compare-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  font-size: var(--text-fluid-xs);
}

.sr-compare-line code {
  background: none;
  padding: 0;
  color: inherit;
}

.sr-compare-line .sr-computed {
  margin-left: auto;
  color: var(--dwc-text-soft);
}

/* ── Pièges et note d'accessibilité ──────────────────────────────────────── *
 * Volontairement discrets : ils vivent SOUS l'extrait d'usage, pas à la place.
 * Un encadré rouge par composant transformerait la page en mur d'alertes, et
 * on cesserait de les lire au troisième.
 * ────────────────────────────────────────────────────────────────────────── */
.sr-pitfalls {
  margin-top: var(--spacing-fluid-sm);
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--ds-warning);
  border-radius: 0 calc(var(--ds-radius) * 0.5) calc(var(--ds-radius) * 0.5) 0;
  background: color-mix(in srgb, var(--ds-warning) 8%, transparent);
}

.sr-pitfalls-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: var(--text-fluid-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sr-pitfalls ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
  font-size: var(--text-fluid-sm);
}

.sr-a11y-note {
  margin: 0.5rem 0 0;
  font-size: var(--text-fluid-sm);
  color: var(--ds-text-soft);
}

.sr-a11y-note strong {
  color: var(--ds-text);
}

/* ── Arbres de décision ──────────────────────────────────────────────────── */
.sr-tree + .sr-tree {
  margin-top: var(--spacing-fluid-lg);
}

.sr-tree-q {
  margin-bottom: var(--spacing-fluid-sm);
}

.sr-tree-branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-fluid-sm);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.sr-branch {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--spacing-fluid-sm);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  min-width: 0;
}

.sr-branch-when {
  margin: 0;
  font-size: var(--text-fluid-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-soft);
}

/* La recommandation EST le lien : « lequel » et « comment » ne doivent pas
   demander de chercher ailleurs dans la page.

   L'encre n'est PAS la primaire brute. Mesuré sur les 28 combinaisons
   thème × schéma, la primaire posée en texte tombait sous 4,5:1 dans cinq
   d'entre elles (qowa 3,10 — footcoach 3,30 — supaboss 3,49 — doc 3,74).
   Ailleurs dans la page une couleur de marque qui échoue est un CONSTAT sur
   l'app ; ici c'est du chrome de showroom, et il doit rester lisible. On
   mélange donc la primaire à la couleur de texte : la teinte survit, le
   contraste devient tenable — exactement ce que `components.css` fait pour
   l'encre des pastilles. */
.sr-branch-use {
  font-family: var(--font-mono);
  font-size: var(--text-fluid-sm);
  font-weight: 600;
  color: color-mix(in srgb, var(--ds-primary) 55%, var(--ds-text));
  text-decoration: none;
  overflow-wrap: anywhere;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.sr-branch-use:hover,
.sr-branch-use:focus-visible {
  text-decoration: underline;
}

.sr-branch-why {
  margin: 0;
  font-size: var(--text-fluid-sm);
  color: var(--ds-text-soft);
}

/* ── Index cherchable ────────────────────────────────────────────────────── */
.sr-cat-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-fluid-sm);
  margin-bottom: var(--spacing-fluid-sm);
}

.sr-cat-controls .sr-control {
  margin: 0;
}

.sr-cat-controls input[type='search'] {
  font: inherit;
  /* 16 px minimum : en dessous, iOS zoome au focus. */
  font-size: max(1rem, var(--text-fluid-sm));
  min-height: 2.75rem;
  padding: 0.4rem 0.7rem;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.6);
}

.sr-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sr-cat-filter {
  font: inherit;
  font-size: var(--text-fluid-xs);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-text);
  cursor: pointer;
}

.sr-cat-filter[aria-pressed='true'] {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  font-weight: 600;
}

.sr-cat-count {
  margin: 0 0 var(--spacing-fluid-sm);
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-cat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.sr-cat-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ds-border);
  border-left-width: 3px;
  border-radius: calc(var(--ds-radius) * 0.6);
  background: var(--ds-surface);
  color: inherit;
  text-decoration: none;
}

.sr-cat-card:hover,
.sr-cat-card:focus-visible {
  border-color: var(--ds-primary);
}

/* La catégorie est déjà écrite sous le nom : la couleur du liseré ne fait que
   la doubler, elle ne la remplace pas. */
.sr-cat-card[data-cat='primitive'] {
  border-left-color: var(--ds-primary);
}
.sr-cat-card[data-cat='feedback'] {
  border-left-color: var(--ds-warning);
}
.sr-cat-card[data-cat='pwa'] {
  border-left-color: var(--ds-info);
}
.sr-cat-card[data-cat='shell'] {
  border-left-color: var(--ds-text-soft);
}
.sr-cat-card[data-cat='hook'] {
  border-left-color: var(--ds-success);
}

.sr-cat-name {
  font-family: var(--font-mono);
  font-size: var(--text-fluid-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sr-cat-meta {
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

/* ── Vitrine des dépôts ──────────────────────────────────────────────────── *
 * Trois axes de filtrage, chacun son groupe nommé : sans le nom, une pastille
 * « Stable » et une pastille « Local-first » se ressemblent trop pour qu'on
 * devine ce qu'elles filtrent.
 * ────────────────────────────────────────────────────────────────────────── */
.sr-facets {
  display: grid;
  gap: 0.5rem;
  margin-bottom: var(--spacing-fluid-sm);
}

.sr-facet-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.sr-facet-label {
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  color: var(--ds-text-soft);
  min-width: 6.5rem;
}

.sr-app-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.sr-app {
  display: flex;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.7);
  background: var(--ds-surface);
}

/*
 * Pastille peinte avec la primaire RÉELLE de l'app quand elle est relevée
 * (`themes.js`), sinon celle du thème courant. Pas d'icône distante : la page
 * ne fait aucune requête réseau, et la promesse vaut aussi pour la vitrine.
 */
.sr-app-mono {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  font-weight: 700;
  font-size: var(--text-fluid-sm);
  letter-spacing: 0.02em;
  background: var(--sr-app-accent, var(--ds-primary));
  color: var(--sr-app-ink, var(--ds-primary-contrast));
}

/* Vignette d'une vraie capture : même gabarit que le monogramme, cadrée en
   haut — c'est l'en-tête de l'écran qui identifie une app, pas son pied. */
.sr-app-shot {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-2);
}

.sr-app-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  flex: 1 1 auto;
}

.sr-app-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--text-fluid-sm);
  font-weight: 600;
}

.sr-app-desc {
  margin: 0;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.sr-app-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  color: var(--ds-text-soft);
}

/* La persistance est l'axe technique de la vitrine : elle mérite d'être lue
   avant le domaine, qui n'est qu'éditorial. */
.sr-app-tag[data-facet='backend'] {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

/* Poussée en bas de la carte : sur une ligne de la grille, les descriptions
   n'ont pas la même longueur, et des commandes à des hauteurs différentes se
   cherchent à la souris comme au clavier. */
.sr-app-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: auto 0 0;
  padding-top: 0.15rem;
}

.sr-app-link {
  font: inherit;
  font-size: var(--text-fluid-xs);
  display: inline-flex;
  align-items: center;
  /* Cible tactile : trois commandes côte à côte dans une carte, c'est
     exactement là qu'une taille `sm` locale passerait sous le seuil. */
  min-height: 2.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.5);
  background: var(--ds-surface-2);
  color: var(--ds-text);
  text-decoration: none;
  cursor: pointer;
}

.sr-app-link:hover,
.sr-app-link:focus-visible {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.sr-app-link[aria-pressed='true'] {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  color: var(--ds-primary);
  font-weight: 600;
}

.sr-view-toggle {
  display: flex;
  gap: 0.35rem;
}

.sr-apps-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--spacing-fluid-sm);
}

.sr-apps-status .sr-cat-count {
  margin: 0;
}

/* Ancre par carte : discrète au repos, visible dès qu'on survole ou qu'on
   l'atteint au clavier — jamais absente du parcours de tabulation. */
.sr-app-anchor {
  font-family: var(--font-mono);
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  text-decoration: none;
  opacity: 0;
}

.sr-app:hover .sr-app-anchor,
.sr-app-anchor:focus-visible {
  opacity: 1;
}

/* Cible d'une ancre : on souligne la carte atteinte, sinon rien ne dit
   laquelle des seize on vient d'ouvrir. */
.sr-app:target {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px var(--ds-primary-soft);
}

/* Mesures relevées : discrètes, mais l'état « archivé » doit sauter aux yeux. */
.sr-app-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  font-variant-numeric: tabular-nums;
}

.sr-app-metrics [data-metric='version'] {
  font-family: var(--font-mono);
  color: var(--ds-text);
}

.sr-app-metrics [data-metric='archived'] {
  color: var(--ds-warning);
  font-weight: 600;
}

.sr-metrics-date {
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-app-configs {
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

.sr-app-configs summary {
  cursor: pointer;
  min-height: 1.8rem;
  display: flex;
  align-items: center;
}

.sr-app-configs ul {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.sr-app-configs code {
  font-size: 0.72rem;
}

.sr-app-nodep {
  margin: 0;
  font-size: var(--text-fluid-xs);
  font-style: italic;
  color: var(--ds-text-soft);
}

.sr-app-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: var(--spacing-fluid-sm);
  border: 1px dashed var(--ds-border);
  border-radius: calc(var(--ds-radius) * 0.7);
  font-size: var(--text-fluid-sm);
  color: var(--ds-text-soft);
}

/* ── Bac à sable ─────────────────────────────────────────────────────────── */
.sr-playground {
  display: grid;
  gap: var(--spacing-fluid-sm);
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  align-items: start;
}

/*
 * Un enfant de grille vaut `min-width: auto` : sa piste se dimensionne sur son
 * contenu le plus large. Le `<pre>` de l'extrait avait beau porter
 * `overflow-x: auto`, il n'atteignait jamais sa limite — c'est la COLONNE qui
 * s'élargissait, et la page débordait de 63 px en 375 px de large.
 */
.sr-playground > * {
  min-width: 0;
}

/* Sous `sm`, trois colonnes de 5 rem ne servent personne : on empile. */
@media (max-width: 47.99rem) {
  .sr-playground {
    grid-template-columns: 1fr;
  }
}

.sr-pg-controls {
  display: grid;
  gap: 0.5rem;
  padding: var(--spacing-fluid-sm);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface-2);
}

.sr-pg-controls .sr-control {
  margin: 0;
}

.sr-pg-controls .sr-control--bool {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sr-pg-controls .sr-control--bool label {
  font-family: var(--font-mono);
  font-size: var(--text-fluid-xs);
}

.sr-pg-controls input[type='checkbox'] {
  /* La case elle-même reste petite ; c'est la LIGNE qui doit être tapable. */
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--ds-primary);
}

.sr-pg-controls .sr-control--bool {
  min-height: 2.75rem;
}

.sr-pg-preview {
  grid-column: 2;
  padding: var(--spacing-fluid-md);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}

.sr-pg-code {
  grid-column: 2;
}

@media (max-width: 47.99rem) {
  .sr-pg-preview,
  .sr-pg-code {
    grid-column: 1;
  }
}

.sr-pg-head {
  margin: 0 0 0.6rem;
  font-size: var(--text-fluid-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-soft);
}

/* Le bloc doit garder sa hauteur quand on coche `block` ou `lg` : sinon la
   page saute sous le curseur à chaque réglage. */
.sr-pg-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  min-height: 5rem;
}

.sr-pg-stage > * {
  max-width: 100%;
}

.sr-pg-note {
  margin: 0.4rem 0 0;
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
  border-left: 2px solid var(--ds-primary);
  padding-left: 0.6rem;
}

/* ── Contraste forcé ─────────────────────────────────────────────────────── *
 * Émulation, pas simulation approximative : chaque règle ci-dessous reproduit
 * une chose PRÉCISE que fait le navigateur en contraste forcé. La palette est
 * celle du thème « Aquatique » de Windows — y compris son `GrayText` vert vif,
 * qui surprend et qui est pourtant la vraie valeur.
 *
 * Le panneau `data-fix='on'` recopie le bloc `@media (forced-colors: active)`
 * de `components.css`. Cette duplication est délibérée (on ne peut pas activer
 * le mode depuis la page) et TENUE par `test/showroom.test.mjs`, qui exige que
 * les deux listes de composants restent identiques.
 * ────────────────────────────────────────────────────────────────────────── */
.sr-fc-state {
  margin: 0 0 var(--spacing-fluid-sm);
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--ds-radius) * 0.7);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-2);
  font-size: var(--text-fluid-xs);
}

.sr-fc-state[data-active='yes'] {
  border-color: var(--ds-success);
}

.sr-fc-pair {
  display: grid;
  gap: var(--spacing-fluid-sm);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.sr-fc-panel {
  --sr-fc-canvas: #000000;
  --sr-fc-text: #ffffff;
  --sr-fc-gray: #3ff23f;
  --sr-fc-highlight: #1aebff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  overflow: hidden;
}

.sr-fc-head {
  margin: 0;
  padding: 0.45rem 0.75rem;
  font-size: var(--text-fluid-xs);
  font-weight: 700;
  background: var(--ds-surface-2);
  border-bottom: 1px solid var(--ds-border);
}

.sr-fc-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: var(--spacing-fluid-sm);
  background: var(--sr-fc-canvas);
  color: var(--sr-fc-text);
}

/* 1 — ce que le navigateur REMPLACE. */
.sr-fc-demo [data-dwc] {
  background-color: var(--sr-fc-canvas);
  color: var(--sr-fc-text);
  border-color: var(--sr-fc-text);
  box-shadow: none;
}

.sr-fc-demo [data-dwc='sync-status']::before {
  background: var(--sr-fc-canvas);
}

/* 2 — ce qu'il NE remplace pas : `transparent` traverse le forçage intact.
   C'est toute la démonstration — le bouton primaire perd son aplat et garde
   un contour invisible. */
.sr-fc-demo [data-dwc='button'],
.sr-fc-demo [data-dwc='badge'],
.sr-fc-demo [data-dwc='theme-toggle'] {
  border-color: transparent;
}

/* 3 — le panneau modal n'a jamais eu de bordure : il ne tenait que par son
   ombre, que le forçage supprime. Même chose pour la boîte de confirmation, la
   notification et le tiroir de navigation. */
.sr-fc-demo [data-dwc='sheet-panel'],
.sr-fc-demo [data-dwc='confirm-panel'],
.sr-fc-demo [data-dwc='toast'] {
  position: static;
  max-height: none;
  border-radius: calc(var(--ds-radius) * 0.7);
  animation: none;
}

/* 4 — l'onglet courant. Sa distinction tient à `--dwc-primary` face à
   `--dwc-text-soft` : le forçage ramène les deux à la MÊME encre système, et le
   trait réservé est transparent, donc épargné. L'onglet actif devient
   indiscernable — c'est le défaut mesuré dans quatre apps sur sept. */
.sr-fc-demo [data-dwc='bottom-nav'] {
  width: 100%;
}

.sr-fc-demo [data-dwc='bottom-nav-item'] {
  border-block-start-color: transparent;
}

/* ── Les correctifs livrés, rejoués à l'identique ─────────────────────────── */
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='button'],
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='badge'],
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='theme-toggle'] {
  border-color: currentColor;
}

.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='button']:disabled {
  opacity: 1;
  color: var(--sr-fc-gray);
  border-color: var(--sr-fc-gray);
}

.sr-fc-panel[data-fix='on']
  .sr-fc-demo
  [data-dwc='update-banner-update'][aria-busy='true'] {
  opacity: 1;
  color: var(--sr-fc-gray);
  border-color: var(--sr-fc-gray);
}

.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='sheet-panel'] {
  outline: 1px solid var(--sr-fc-text);
  outline-offset: -1px;
}

.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='skeleton'] {
  outline: 1px solid var(--sr-fc-gray);
  outline-offset: -1px;
}

.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='sync-status']::before {
  background: var(--sr-fc-text);
}

.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='confirm-panel'],
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='toast'],
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='bottom-nav-drawer'],
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='update-banner'],
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='offline-ready'] {
  outline: 1px solid var(--sr-fc-text);
  outline-offset: -1px;
}

.sr-fc-panel[data-fix='on']
  .sr-fc-demo
  [data-dwc='bottom-nav-item'][data-current],
.sr-fc-panel[data-fix='on']
  .sr-fc-demo
  [data-dwc='bottom-nav-more'][data-current] {
  border-block-start-color: var(--sr-fc-highlight);
}

/* Barres et jauge n'existaient que par leurs aplats, comme le squelette :
   encre système sur le remplissage, contour sur le rail. */
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='bars-bar'],
.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='gauge-fill'] {
  background: var(--sr-fc-text);
}

.sr-fc-panel[data-fix='on'] .sr-fc-demo [data-dwc='gauge'] {
  outline: 1px solid var(--sr-fc-gray);
  outline-offset: -1px;
}

/* ── Tableaux en cartes sous `sm` ────────────────────────────────────────── *
 * Sept tableaux sur onze débordaient horizontalement en 375 px. Les tableaux
 * de RÉFÉRENCE deviennent des cartes ; les MATRICES restent des tableaux —
 * les aplatir détruirait le croisement variantes × tailles, qui EST
 * l'information.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 39.99rem) {
  .sr-table:not(.sr-table--matrix) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .sr-table:not(.sr-table--matrix) tr {
    display: block;
    margin-bottom: 0.6rem;
    border: 1px solid var(--ds-border);
    border-radius: calc(var(--ds-radius) * 0.8);
    background: var(--ds-surface-2);
    padding: 0.4rem 0.6rem;
  }

  /* Étiquette AU-DESSUS de la valeur, pas à côté : plusieurs de ces cellules
     contiennent une phrase entière, qu'une mise en regard ferait déborder. */
  .sr-table:not(.sr-table--matrix) :is(td, th) {
    display: block;
    border: 0;
    padding: 0.2rem 0;
    text-align: left;
  }

  /* L'en-tête de colonne devient l'étiquette de la ligne. */
  .sr-table:not(.sr-table--matrix) :is(td, th)[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-fluid-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-soft);
  }

  /* Un `clamp(…)` ou un sélecteur long ne doit pas élargir la carte. */
  .sr-table:not(.sr-table--matrix) code {
    overflow-wrap: anywhere;
  }

  /* Sous `sm`, un libellé de facette en regard ne laisse plus la place aux
     pastilles : il passe au-dessus de son groupe. */
  .sr-facet-label {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* ── Galerie de démo par application ─────────────────────────────────────── */

/* La galerie est l'index visuel ; cette ligne dit seulement lequel des
   aperçus en grand est affiché. Pas de second menu. */
.sr-demo-current {
  margin: 0 0 var(--spacing-fluid-md);
  font-size: var(--text-fluid-sm);
  color: var(--ds-text-soft);
}

.sr-demo-stage-app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 * Toutes les palettes en même temps. Chaque tuile porte les variables du
 * contrat en propre (`paintPalette`) : le fond, le bouton et les pastilles
 * sont ceux de l’application, pas ceux de la page.
 */
.sr-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 0.6rem;
  margin-bottom: var(--spacing-fluid-md);
}

.sr-gallery-tile {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius, 0.75rem);
  background-color: var(--ds-bg);
  background-image: var(--ds-bg-image, none);
  color: var(--ds-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.sr-gallery-tile:hover,
.sr-gallery-tile:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

.sr-gallery-tile[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--ds-primary);
}

.sr-gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
}

.sr-gallery-name {
  font-family: var(--ds-font-display, inherit);
  font-size: var(--text-fluid-xs);
  font-weight: 600;
  line-height: 1.3;
}

.sr-gallery-flag {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
}

.sr-gallery-dots {
  display: flex;
  gap: 0.3rem;
}

.sr-gallery-dots span {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ds-text) 22%, transparent);
}

.sr-gallery-surface {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--ds-border);
  border-radius: calc(var(--ds-radius, 0.75rem) * 0.6);
  background: var(--ds-surface);
}

.sr-gallery-ink {
  font-weight: 700;
}

.sr-gallery-ink-soft {
  color: var(--ds-text-soft);
  font-size: var(--text-fluid-xs);
}

.sr-gallery-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.sr-gallery-sample [data-dwc='button'] {
  pointer-events: none;
}

/* Cadre de téléphone : donne l'échelle réelle des composants, qui sont conçus
   pour du mobile avant tout. */
.sr-phone {
  width: 17rem;
  aspect-ratio: 9 / 17;
  padding: 0.5rem;
  border: 2px solid var(--ds-border);
  border-radius: 2rem;
  background: var(--ds-surface-2);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

.sr-phone-screen {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border-radius: 1.6rem;
  background: var(--ds-bg);
  background-image: var(--ds-bg-image);
}

.sr-phone-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.6rem;
}

.sr-phone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--ds-font-display);
  font-size: var(--text-fluid-sm);
}

.sr-phone-row,
.sr-phone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Les « boutons » de l'aperçu sont des <span> : décoratifs, non focusables —
   une maquette ne doit pas ajouter de pièges au parcours clavier. */
.sr-phone-actions [data-dwc='button'] {
  flex: 1 1 auto;
  pointer-events: none;
}

.sr-phone-input {
  display: flex;
  align-items: center;
  color: var(--ds-text-soft);
}

/* ── Surcharges d'app (démonstration du contrat) ─────────────────────────── *
 * Les composants ci-dessous sont habillés par `components.css`, servi TEL QUEL
 * depuis le paquet. Ce bloc ne rajoute que ce qu'une app ferait par-dessus : la
 * police de titrage, que le paquet ne peut pas connaître. Il prouve au passage
 * que la couche `components` ne verrouille rien — du CSS non « layered »
 * l'emporte toujours.
 * ────────────────────────────────────────────────────────────────────────── */

[data-dwc='empty-state-title'],
[data-dwc='pwa-install-title'],
[data-dwc='error-boundary-title'],
[data-dwc='family-apps-title'],
span[data-dwc='family-app-icon'] {
  font-family: var(--ds-font-display);
}

/* ── Pied de page du showroom ────────────────────────────────────────────── */
.sr-footer {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--spacing-fluid-lg) var(--spacing-fluid-md);
  padding-bottom: calc(
    var(--spacing-fluid-lg) + max(env(safe-area-inset-bottom), 0px)
  );
  border-top: 1px solid var(--ds-border);
  font-size: var(--text-fluid-xs);
  color: var(--ds-text-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Impression ──────────────────────────────────────────────────────────── *
 * Une doc de design system finit sur papier — en revue, en atelier, punaisée.
 * Deux choses la rendaient inutilisable :
 *
 *   1. En thème sombre, les navigateurs SUPPRIMENT les fonds mais gardent la
 *      couleur du texte. Un texte clair sur un fond noir devenu blanc : page
 *      vierge. On repasse donc les NEUTRES en clair — et seulement eux, pour
 *      que les couleurs de marque restent celles du thème choisi.
 *   2. Les commandes (barre, réglages, boutons de copie, menus) occupaient le
 *      papier sans rien y apporter.
 *
 * `!important` est nécessaire et non négociable : `applyTheme` pose la palette
 * en style INLINE sur `<html>`, ce qu'aucun sélecteur ne peut surclasser.
 * ────────────────────────────────────────────────────────────────────────── */
@media print {
  @page {
    margin: 1.5cm;
  }

  :root {
    color-scheme: light !important;
    --ds-bg: #ffffff !important;
    --ds-surface: #ffffff !important;
    --ds-surface-2: #f4f4f5 !important;
    --ds-text: #101418 !important;
    --ds-text-soft: #45505f !important;
    --ds-border: #b4bac2 !important;
    --ds-bg-image: none !important;
  }

  /* Ce qui ne sert qu'à piloter la page. */
  .sr-skip,
  .sr-prefs,
  .sr-cmd,
  .sr-theme-swatches,
  .sr-theme-open,
  .sr-theme-picker,
  .sr-sommaire-toggle,
  .sr-progress,
  .sr-view-chip,
  .sr-section-chip,
  .sr-pair-controls,
  .sr-dock,
  .sr-news,
  .sr-recent,
  .sr-tour,
  .sr-present-bar,
  .sr-recipe,
  .sr-scenes,
  .sr-inspect-tip,
  .sr-cheatsheet,
  .sr-copy,
  .sr-pg-controls,
  .sr-cat-controls,
  .sr-facets,
  .sr-app-actions button,
  .sr-view-toggle,
  .sr-hero-actions {
    display: none !important;
  }

  .sr-rail .sr-toc-groups {
    flex-wrap: wrap;
    width: auto;
  }

  /* Le sommaire, lui, s'imprime : c'est la table des matières. Il se replie
     sur plusieurs lignes, le rail ne défile plus. */
  .sr-topbar {
    position: static;
    background: none;
    border: 0;
    padding: 0;
    backdrop-filter: none;
  }

  .sr-topbar[data-sommaire='closed'] .sr-rail,
  .sr-rail {
    display: block !important;
    overflow: visible;
    border: 0;
    max-width: none;
  }

  .sr-rail .sr-toc {
    flex-wrap: wrap;
    width: auto;
    padding-inline: 0;
  }

  /* Même défaut que la pastille du composant `FamilyApps` : le monogramme est
     du texte clair sur un aplat que l'impression supprime. Sans cela, seize
     carrés blancs. */
  .sr-app-mono {
    color: CanvasText;
    border: 1px solid CanvasText;
  }

  /* L'index reste sur papier — c'est une table des matières. Il imprime ce
     qui est à l'écran, filtre compris : imprimer autre chose que ce qu'on
     voit surprendrait davantage que ça n'aiderait. */
  .sr-branch,
  .sr-pitfalls {
    break-inside: avoid;
  }

  .sr-main,
  .sr-footer {
    max-width: none;
    padding-inline: 0;
  }

  .sr-section {
    padding-block: 0.6cm;
  }

  /* Un titre seul en bas de page, et son contenu à la suivante. */
  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  tr,
  pre,
  .sr-swatch,
  .sr-card,
  .sr-app,
  .sr-fc-panel,
  .sr-compare-panel,
  .sr-phone,
  .sr-gallery-tile,
  .sr-pg-preview {
    break-inside: avoid;
  }

  /* Un lien imprimé sans son URL ne mène nulle part. Les ancres internes,
     elles, n'ont pas d'URL utile — d'où le filtre sur le protocole. */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: var(--ds-text-soft);
    word-break: break-all;
  }

  /* Deux exceptions au « pas de fond à l'impression », parce qu'ici la
     couleur EST le contenu : le nuancier, et l'émulation de contraste forcé
     qui ne démontre rien en blanc sur blanc. */
  .sr-swatch-chip,
  .sr-fc-demo,
  .sr-fc-demo * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}