.doc-category {
    --category-header-height: 4rem;
    padding: var(--space-l);

    & > header {
      position: sticky;
      top: var(--header-height, 0);
      z-index: 1;
      background: var(--peels-surface-page);
      container-type: scroll-state;
      container-name: sticky-heading;
      margin-inline: calc(-1 * var(--space-l));
      padding-inline: var(--space-l);

      & h1 {
        padding-block-end: var(--space-xs);
        margin-inline: calc(-1 * var(--space-l));
        padding-inline: var(--space-l);
      }
    }
  }

  @container sticky-heading scroll-state(stuck: top) {
    h1 {
      border-block-end: 1px solid var(--peels-border-subtle);
    }
  }

  .doc-element {
    --doc-element-min-col: min(40rem, 50vw);

    scroll-margin-top: calc(var(--header-height, 0) + var(--category-header-height, 0));
    padding-block: var(--space-l);
    border-block-end: 1px solid var(--peels-border-subtle);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--doc-element-min-col), 1fr));
    gap: var(--space-m);

    & > header {
      grid-column: 1 / span 1;

      & h2 {
        margin-block-end: var(--space-2xs);
        position: relative;

        & .anchor-link {
          --anchor-link-block-size: .625em;
          position: absolute;
          inset-block-start: calc(50% - 0.5ex);
          inset-inline-end: calc(100% + var(--space-2xs));
          display: inline-flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 1;
          block-size: var(--anchor-link-block-size);
          font-size: 1em;
          font-weight: var(--peels-font-weight-ui);
          text-decoration: none;
          color: var(--peels-text-muted);
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.25s;

          &:focus-visible {
            opacity: 1;
          }
        }

        &:hover .anchor-link {
          opacity: 1;
        }
      }

      & p {
        color: var(--peels-text-muted);
        font-size: var(--peels-text-small);
        margin: 0;
      }
    }

    & > .doc-pair {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--doc-element-min-col), 1fr));
      gap: var(--space-m);
      padding-block-end: var(--space-m);

      &:last-child {
        border-block-end: none;
        padding-block-end: 0;
      }

      & > .code-demo {
        grid-column: 1 / span 1;
        border: 1px solid var(--peels-border-subtle);
        border-radius: var(--radius-m);
        padding: 0;
        background-color: var(--peels-surface-panel-soft);
      }

      & > .code-bloc {
        grid-column: span 1 / -1;

        & > pre {
          padding-block: var(--space-xs);

          & > code {
            padding-block: var(--space-2xs);
          }
        }
      }
    }
  }
/* ─── 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;
      }
    }
  }