.themes-doc {
    padding: var(--space-xl) var(--space-l);

    & > .themes-hero {
      margin-block-end: var(--space-xl);

      & h1 { margin-block-end: var(--space-xs); }
      & p { color: var(--peels-text-muted); max-inline-size: 60ch; }
    }
  }

  .theme-section {
    padding-block: var(--space-l);
    border-block-start: 1px solid var(--peels-border-subtle);

    & > h2 { margin-block: 0 var(--space-2xs); }
    & > p { color: var(--peels-text-muted); margin-block-end: var(--space-m); }
  }

  .axes-grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));

    & article {
      padding: var(--space-m);
      border: 1px solid var(--peels-border-subtle);
      border-radius: var(--radius-m);

      & h3 { margin-block-start: 0; font-size: var(--peels-text-base); }
      & p { color: var(--peels-text-muted); font-size: var(--peels-text-small); }
      & pre { font-size: var(--peels-text-xsmall); overflow-x: auto; margin-block-end: 0; }
    }
  }

  /* Nuanciers (repris de la page Palette) */
  .palettes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);

    & .palette {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-s);

      @media (width >= 40rem) {
        grid-template-columns: 1fr 1fr;

        & > h3, & > .case { grid-column: 1 / -1; }
      }

      & > h3 { margin: 0; color: var(--peels-headings-color); }
      & > .case { margin: 0; color: var(--peels-text-muted); font-size: var(--peels-text-xsmall); }
    }
  }

  .scheme {
    padding: var(--space-m);
    border: 1px solid var(--peels-border-subtle);
    border-radius: var(--radius-m);
    background: var(--peels-surface-page);
    color: var(--peels-text-body);

    & h4 { margin: 0 0 var(--space-s); font-size: var(--peels-text-small); }
  }

  .swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .swatch {
    margin: 0;
    aspect-ratio: 1.6;
    display: grid;
    align-content: end;
    padding: var(--space-s);
    border-radius: var(--radius-s);

    & strong { font-weight: var(--weight-semibold); font-size: var(--peels-text-xsmall); }
    & figcaption { color: inherit; }
    & code {
      font-family: var(--font-mono);
      font-size: calc(var(--peels-text-xsmall) * 0.9);
      color: inherit;
      opacity: 0.85;
      background: transparent;
      border: none;
      overflow-wrap: anywhere;
    }
  }
/* ─── Container — body[data-layout="doc"] est le container du sidebar ─── */
  body[data-layout="doc"] {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* ─── Burger — fixe, visible uniquement sur mobile ─── */
  .doc-menu-toggle {
    position: fixed;
    inset-block-start: var(--header-height, 0);
    inset-inline-end: var(--space-m);
    z-index: var(--peels-z-above);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    background: var(--peels-surface-page);
    border: 1px solid var(--peels-border-subtle);
    border-radius: var(--peels-component-radius);
    color: var(--peels-text-body);
    cursor: pointer;

    & svg {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
  }

  /* ─── Titres de groupes dans la nav latérale ─── */
  [data-layout="sidebar"] nav > h2 {
    font-size: var(--peels-text-xsmall);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--peels-text-accent);
    padding-inline: var(--space-m);
    padding-block-start: var(
      --peels-headings-margin-block-start,
      var(--space-m)
    );
    margin-block-start: 0;
    display: flex;
    align-items: center;

    &:not(:first-of-type) {
      border-top: 1px solid var(--peels-border-subtle);
    }
  }

  /* ─── Sidebar layout — grid mobile-first, 2 colonnes en desktop ─── */
  [data-layout="sidebar"] {
    --peels-sidebar-offset: var(--header-height, 0);
    --peels-sidebar-footer-offset: var(--footer-height, 0);
    --peels-sidenav-link-bg-current: var(--peels-surface-page);
    --peels-sidenav-link-size: var(--peels-text-xsmall);
    --peels-surface-hover: var(--neutral-bg-elevated);
    --peels-surface-active: var(--neutral-bg);

    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    min-block-size: calc(
      100dvb - var(--header-height, 0) - var(--footer-height, 0)
    );

    & > aside {
      background: var(--neutral-bg-sunken);
      border-block-end: 1px solid var(--peels-border-subtle);

      /* Commun mobile/desktop — inoffensif sur l'aside collapsé */
      position: sticky;
      top: var(--peels-sidebar-offset, 0);
      max-block-size: calc(100dvh - var(--peels-sidebar-offset, 0));
      overscroll-behavior: contain;

      /* Mobile : scroll + z-index quand ouvert */
      &[data-open] {
        overflow-y: auto;
        z-index: var(--peels-z-sticky);
      }

      & nav {
        display: flex;
        flex-direction: column;
        min-block-size: 100%;

        & a:hover,
        & a:focus-visible {
          text-decoration: none;
        }

        & :where(menu, ul) a {
          padding-inline-start: var(--space-l);
        }

        & .nav-home {
          display: block;
          padding: var(--space-s) var(--space-m);
          font-size: var(--peels-text-small);
          text-decoration: none;
          color: var(--peels-text-muted);
          border-block-end: 1px solid var(--peels-border-subtle);

          &:hover {
            color: var(--peels-text-body);
          }
        }

        & .nav-demo {
          display: block;
          padding: var(--space-s) var(--space-m);
          font-size: var(--peels-text-small);
          font-weight: var(--peels-font-weight-ui);
          text-decoration: none;
          color: var(--peels-text-accent);
          border-block-start: 1px solid var(--peels-border-subtle);
          margin-block-start: auto;

          &:hover {
            color: var(--peels-text-body);
          }
        }
      }
    }

    & > main {
      min-inline-size: 0;
      min-block-size: 100%;
    }
  }

  /* ─── Desktop : 2 colonnes, sidebar sticky, burger caché ─── */
  @container sidebar (width >= 60rem) {
    .doc-menu-toggle {
      display: none;
    }

    [data-layout="sidebar"] {
      grid-template-columns:
        minmax(
          var(--peels-sidebar-min, 16rem),
          var(--peels-sidebar-max, clamp(18rem, 24vw, 22rem))
        )
        minmax(0, 1fr);
    }

    [data-layout="sidebar"] > aside[data-push-down] {
      display: flex;
      flex-direction: column;
      height: auto;
      bottom: 0;
      min-block-size: calc(
        100dvb - var(--header-height, 0) - var(--footer-height, 0)
      );
      overflow-y: auto;
      border-block-end: none;
      border-inline-end: 1px solid var(--peels-border-subtle);
      scrollbar-width: none;
      height: 100%;

      & > nav {
        flex: 1;
      }
    }
  }