/* =============================================================
   Socle · Styles de la documentation
   La doc est un consommateur du système : elle n'utilise que
   des tokens sémantiques, comme n'importe quel produit.
   ============================================================= */

.docs {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  /* La barre du haut coiffe les deux colonnes ; sous elle, la latérale et
     le contenu se partagent ce qui reste et défilent chacun de leur côté. */
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
}

/* ---------------------------------------------------------
   Barre du haut
   --------------------------------------------------------- */

.docs-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--gap-xl);
  padding-inline: var(--padding-l);
  padding-block: var(--padding-s);
  background: var(--color-bg-surface);
  border-block-end: var(--border-1) solid var(--color-border);
}

.docs-modes {
  display: flex;
  gap: var(--gap-2xs);
}

/* Les actions se poussent au bord opposé de la marque. */
.docs-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-inline-start: auto;
}

/* ---------------------------------------------------------
   Barre latérale
   --------------------------------------------------------- */

.docs-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-bg-surface);
  border-inline-end: var(--border-1) solid var(--color-border);
}

/* .sidebar-header et .sidebar-footer ont disparu avec la barre du haut,
   qui a repris la marque, le thème et l'export. La recherche prend donc
   la respiration que l'en-tête posait avant elle. */
.sidebar-search {
  padding-block-start: var(--padding-l);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-control);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-24);
  height: var(--space-24);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
}

.brand-name {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.brand-version {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-regular);
}

.sidebar-search {
  padding: var(--padding-s) var(--padding-l);
}

.sidebar-search input {
  width: 100%;
  height: var(--control-height-s);
  padding-inline: var(--padding-m);
  background: var(--color-bg-page);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: var(--text-body-s-size);
  transition: border-color var(--motion-fast), background-color var(--motion-fast);
}

.sidebar-search input::placeholder {
  color: var(--color-text-muted);
}

.sidebar-search input:hover {
  border-color: var(--color-border-strong);
}

.docs-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--padding-s) var(--padding-m) var(--padding-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
}

.nav-title {
  /* Le traitement du sur-titre (chasse fixe, capitales espacées)
     vient de sc-overline, posé dans le balisage. Ici, seulement
     ce qui place l'intitulé dans la barre latérale. */
  padding: var(--padding-xs) var(--padding-s);
}

.nav-subtitle {
  padding: var(--padding-xs) var(--padding-s);
  padding-block-end: var(--padding-2xs);
  margin-block-start: var(--padding-xs);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.nav-item {
  display: block;
  padding: var(--padding-xs) var(--padding-s);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  font-size: var(--text-label-size);
  text-decoration: none;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}

.nav-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}

.nav-item.is-active {
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-weight: var(--font-weight-medium);
}

.nav-item.is-hidden,
.nav-title.is-hidden,
.nav-subtitle.is-hidden,
.nav-section.is-hidden {
  display: none;
}

/* ---------------------------------------------------------
   Contenu
   --------------------------------------------------------- */

.docs-main {
  overflow-y: auto;
  min-width: 0;
  outline: none;
}

/* La coquille de la documentation respire plus qu'une page de produit,
   et ses marges sont donc écrites ici plutôt que prises dans l'échelle
   du système. Celle-ci est calibrée sur la densité d'une console, où
   chaque pixel gagné sert à montrer une donnée de plus ; une page qui
   se lit n'a pas cette contrainte, et à 24 le texte venait toucher le
   filet de la barre latérale. */
.page {
  max-width: 56rem;
  margin-inline: auto;
  padding: 3rem 2.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
}

/* ---- Page de gabarit ----
   Un gabarit se regarde avant de se lire : la page perd sa borne de
   largeur pour que la planche prenne toute la place, et seuls les blocs
   de texte gardent la colonne de lecture. */

.page--wide {
  max-width: none;
  padding-inline: 2.5rem;
  padding-block-start: 3rem;
}

/* Bornés en largeur mais calés à gauche, sur le bord de la planche.
   Centrés, ils flotteraient au milieu d'une zone bien plus large et
   ne s'aligneraient plus sur rien. */
.page--wide > :not(.example--planche) {
  max-width: 56rem;
  width: 100%;
}

/* La planche colle au bord de la zone et laisse le cadre du gabarit
   dessiner sa propre bordure : deux cadres emboîtés font un liseré
   double que rien ne justifie. */
.example--planche .example-preview {
  padding: 0;
}

.example--planche .example-card {
  background: transparent;
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.page-kicker {
  /* Sur-titre de page : sc-overline dans le balisage fait la
     typographie, seule la couleur d'accent est propre à la doc. */
  color: var(--color-accent-text);
}

.page-lede {
  font-size: var(--text-h4-size);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 44rem;
}

.section-title {
  font-size: var(--text-h3-size);
}

/* Bon usage */

.page-usage {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.page-usage ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding: var(--padding-l) var(--padding-xl);
  margin: 0;
  list-style: none;
  background: var(--color-bg-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-surface);
}

.page-usage li {
  position: relative;
  padding-inline-start: var(--padding-xl);
  color: var(--color-text-secondary);
  font-size: var(--text-body-s-size);
  line-height: var(--leading-relaxed);
}

.page-usage li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--space-8);
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* Exemples */

.example {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.example-desc {
  color: var(--color-text-secondary);
  font-size: var(--text-body-s-size);
  max-width: 44rem;
}

.example-card {
  background: var(--color-bg-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-surface);
  overflow: hidden;
}

.example-preview {
  padding: var(--padding-2xl);
  overflow-x: auto;
}

.example-code {
  border-block-start: var(--border-1) solid var(--color-border);
}

.example-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-xs) var(--padding-m);
  background: var(--color-bg-subtle);
}

.example-code__bar .sc-btn {
  color: var(--color-text-secondary);
}

.example-code pre {
  margin: 0;
  padding: var(--padding-l) var(--padding-xl);
  overflow-x: auto;
  background: var(--color-bg-subtle);
  border-block-start: var(--border-1) solid var(--color-border);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Prose libre (pages intro / export) */

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
  max-width: 44rem;
}

.prose p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.prose strong {
  color: var(--color-text);
}

.prose code {
  padding: var(--space-2) var(--padding-2xs);
  background: var(--color-bg-subtle);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-control-s);
  color: var(--color-text);
}

.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding-inline-start: var(--padding-xl);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   Aides de mise en page des démos
   --------------------------------------------------------- */

.demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-l);
}

.demo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-m);
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--gap-l);
}

/* Repos, Survol, Focus, Actif : ce sont des en-têtes de colonnes, le
   rôle exact que la charte envoie en chasse fixe capitales. Les six
   déclarations de .sc-overline sont recopiées plutôt qu'empruntées :
   css/base.css tient la liste des composants du système, et une classe
   de la documentation n'a rien à y faire. */
.demo-label {
  color: var(--color-text-muted);
  font-family: var(--font-overline);
  font-size: var(--text-caption-size);
  font-weight: var(--text-strong-weight);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.demo-frame {
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-surface);
  overflow: hidden;
  background: var(--color-bg-page);
}

/* Cellule état : empile un libellé au-dessus d'un exemple */
.demo-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-s);
}