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

    & h1 {
      margin-block-end: var(--space-xs);
    }

    & > p {
      color: var(--peels-text-muted);
      margin-block-end: var(--space-l);
    }
  }

  /* Cases : largeur mini = max(16 caractères, quart du conteneur) —
     le nombre de colonnes découle de l'espace dispo */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(16ch, 25%), 1fr));
    border-block-start: 1px solid var(--peels-border-subtle);
    border-inline-start: 1px solid var(--peels-border-subtle);

    & > * {
      border-block-end: 1px solid var(--peels-border-subtle);
      border-inline-end: 1px solid var(--peels-border-subtle);
      padding: clamp(var(--space-m), 2vw, var(--space-xl));
      margin: 0;
    }

    /* Titre de groupe : case non-lien, différenciée */
    & > h2 {
      font-family: var(--peels-font-mono);
      font-size: var(--peels-text-xsmall);
      font-weight: var(--peels-font-weight-ui);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--peels-text-accent);
      background: var(--peels-surface-panel);
      display: flex;
      align-items: end;
    }

    & > a {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: var(--space-2xs);
      min-inline-size: 0;
      text-decoration: none;
      color: var(--peels-text-body);
      background: var(--peels-surface-page);

      &:hover {
        background: var(--peels-surface-hover);
      }
    }
  }

  .cat-num {
    font-family: var(--peels-font-mono);
    font-size: var(--peels-text-xsmall);
    color: var(--peels-text-accent);
  }

  .cat-name {
    font-weight: var(--peels-font-weight-ui);
    font-size: clamp(var(--peels-text-small), 0.8rem + 0.5vw, var(--peels-text-base));
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .cat-count {
    font-size: var(--peels-text-xsmall);
    color: var(--peels-text-muted);
  }
/* ─── 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;
      }
    }
  }