nav-category {
    --nav-cat-size: 3.25rem;

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

    & > .nav-cat {
      text-decoration: none;
      color: var(--peels-text-body);
      font-size: var(--peels-text-xsmall);
      font-weight: var(--peels-font-weight-ui);
      padding-block: var(--space-2xs);
      padding-inline: var(--space-m);
      height: var(--nav-cat-size);
      display: flex;
      align-items: center;

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

    &[aria-current="page"] > .nav-cat {
      color: var(--peels-text-accent);
      background: var(--peels-surface-page);
    }

    & > details {
      --peels-details-border: none;
      --peels-details-radius: 0;
      --peels-details-padding: 0;
      --peels-details-stack-offset: 0;
      --peels-details-open-gap: 0;
      --peels-details-marker: "\25B6";
      --peels-details-marker-size: 0.65em;
      --peels-details-marker-rotate: 90deg;
      --peels-details-marker-margin-start: 0; /* Annuler le margin auto par défaut pour centrer avec flex */
      --peels-details-summary-display: flex;
      --peels-details-summary-padding: 0;
      --peels-details-summary-position: static; /* Le summary gère son propre positionnement */

      position: relative;

      & > summary {
        cursor: pointer;
        color: var(--peels-text-muted);
        font-size: 0.7em;
        justify-content: center;
        height: var(--nav-cat-size);
        width: var(--nav-cat-size);
        aspect-ratio: 1;
        
        border-inline-start: 1px solid var(--peels-border-subtle);

        position: absolute;
        top: calc(var(--nav-cat-size) * -1);
        right: 0;
      }

      border-block-start: 1px solid transparent;
      transition: border-color 0s 0.35s;

      &[open] {
        border-block-start-color: var(--peels-border-subtle);
        transition: border-color 0s;
      }

      & > menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s ease;

        & > * { overflow: hidden; }
      }

      &[open] > menu {
        grid-template-rows: 1fr;
      }

      @supports (interpolate-size: allow-keywords) {
        & {
          interpolate-size: allow-keywords;
        }

        & > menu {
          display: revert;
          grid-template-rows: revert;
          transition: none;

          & > * { overflow: revert; }
        }

        &[open] > menu {
          grid-template-rows: revert;
        }

        &::details-content {
          height: 0;
          overflow-y: clip;
          transition: height 0.35s ease,
                      content-visibility 0.35s ease allow-discrete;
        }

        &[open]::details-content {
          height: auto;
        }
      }
    }
  }
footer {
    background: var(--peels-surface-panel);
    border-block-start: var(--peels-border-width) solid
      var(--peels-border-subtle);
    padding: var(--space-xl) var(--space-m);

    & > section {
      display: grid;
      gap: var(--space-m) var(--space-l);
      max-width: 1200px;
      margin-inline: auto;

      @media (width >= 48rem) {
        grid-template-columns: 1fr auto;
        align-items: start;
      }

      /* Marque + pitch */
      & > div:first-of-type {
        & > strong {
          display: flex;
          align-items: center;
          gap: var(--space-2xs);
          font-size: clamp(1.75rem, 4vw, 3rem);
          font-weight: var(--peels-font-weight-heading);
          line-height: 1;
          letter-spacing: -0.03em;
          margin-block-end: var(--space-xs);

          & > svg {
            inline-size: 1em;
            block-size: 1em;
            color: var(--peels-text-accent);
          }
        }

        & > p {
          font-size: var(--peels-text-small);
          color: var(--peels-text-muted);
          line-height: var(--peels-leading);
          max-width: 34ch;
          margin: 0;
        }

        & > small {
          display: block;
          margin-block-start: var(--space-s);
          font-size: var(--peels-text-xsmall);
          color: var(--peels-text-muted);
          opacity: 0.8;
        }
      }

      /* Liens */
      & > nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-s) var(--space-m);

        @media (width >= 48rem) {
          justify-self: end;
        }

        & > a {
          font-size: var(--peels-text-small);
          font-weight: var(--peels-font-weight-ui);
          color: var(--peels-text-muted);
          text-decoration: none;

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

      /* Chaîne @layer — cachet visuel, une ligne */
      & > div:last-of-type {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2xs);
        font-family: var(--peels-font-mono);
        font-size: var(--peels-text-xsmall);

        & > span {
          color: var(--peels-text-accent);
        }

        & > ol {
          display: flex;
          flex-wrap: nowrap;
          list-style: none;
          margin: 0;
          padding: 0;

          & > li {
            color: var(--peels-text-muted);

            &:not(:last-child)::after {
              content: "→";
              margin-inline: 0.45em;
              opacity: 0.65;
            }
          }
        }
      }

      & > small {
        font-family: var(--peels-font-mono);
        font-size: var(--peels-text-xsmall);
        color: var(--peels-text-muted);

        @media (width >= 48rem) {
          justify-self: end;
          align-self: end;
        }
      }
    }
  }
switcher-lightdark {
        & button {
            inline-size: 2rem;
            block-size: 2rem;
            display: inline-grid;
            place-content: center;
            background: color-mix(in oklab, currentColor 8%, transparent);
            border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
            border-radius: 0.6rem;
            cursor: pointer;
            padding: 0;
            color: inherit;

            &:hover {
                background: color-mix(in oklab, currentColor 14%, transparent);
            }

            & .sun-and-moon {
                block-size: var(--switcher-icon-size, 1em);
                inline-size: var(--switcher-icon-size, 1em);
                fill: currentColor;
                stroke: currentColor;

                & > :is(.sun, .sun-beams, .moon circle) {
                    transform-origin: center center;
                }

                & > .sun {
                    transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25);
                }

                & > .sun-beams {
                    transition:
                        transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25),
                        opacity   0.5s cubic-bezier(0.25, 0, 0.3, 1);
                }

                & .moon circle {
                    transform-box: view-box;
                    transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
                }
            }
        }

        /* ── État sombre ── */
        &:has(button[data-scheme="dark"]) {
            & .sun {
                transform: scale(1.75);
                transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
                transition-duration: 0.25s;
            }

            & .sun-beams {
                opacity: 0;
                transform: rotateZ(-25deg);
                transition-duration: 0.15s;
            }

            & .moon circle {
                transform: translateX(-30%);
                transition-delay: 0.25s;
                transition-duration: 0.5s;
            }
        }

    }
:root {
        --header-height: 6rem;
    }

    /* Layout fourni par peels-header (burger + nav[popover] < 48rem) ;
       ici : identité, sticky et les éléments propres au doc-header. */
    [data-role="doc-header"] {
        --peels-header-padding-inline: var(--space-s);

        position: sticky;
        top: 0;
        z-index: var(--peels-z-sticky);
        border-block-end: 1px solid var(--peels-border-subtle);
        background: var(--peels-surface-page);
        color: var(--peels-text-body);
        font-family: var(--peels-font-ui);
        color-scheme: inherit;

        & > a {
            display: flex;
            align-items: center;
            gap: var(--space-2xs);
            font-weight: var(--peels-font-weight-heading);
            font-size: var(--size-step-0);
            color: var(--peels-brand);
            margin-inline-end: auto;

            & > svg {
                block-size: 2.625rem;
            }
        }
    }

    /* Panneau plein écran : la formule de peels-header plafonne la largeur
       à min(knob, 80vw) — la surcharge directe passe outre.
       Le bouton X prend exactement la place du burger (mêmes offsets que
       les paddings du header) : une seule icône visible qui morphe. */
    @media (width < 48rem) {
        [data-role="doc-header"] nav[popover] {
            inline-size: 100%;

            & > [popovertargetaction="hide"] {
                inset-block-start: var(--peels-header-padding-block, var(--space-xs));
                inset-inline-end: var(--peels-header-padding-inline, var(--space-s));
            }
        }
    }

    @media (width >= 48rem) {
        [data-role="doc-header"] {
            min-height: var(--header-height);
        }
    }

    [data-role="doc-nav"] {
        /* Close icon = same burger SVG as the toggle, same size, same morph
           animation : burger state at rest → X state when the panel opens.
           Fade coupé : sinon le morph passe sous le fade + la glisse du
           panneau et reste imperceptible. */
        & > [popovertargetaction="hide"] {
            opacity: 1;
            transition: none;
        }

        & > [popovertargetaction="hide"] svg {
            inline-size: var(--peels-header-toggle-size, 2.5rem);
            block-size: var(--peels-header-toggle-size, 2.5rem);
        }

        & > [popovertargetaction="hide"] svg > path {
            transition: stroke-dasharray var(--peels-transition-duration-base) var(--peels-transition-easing),
                        stroke-dashoffset var(--peels-transition-duration-base) var(--peels-transition-easing);

            &:nth-child(1) { stroke-dasharray: 28 99; }
            &:nth-child(2) { stroke-dasharray: 28 28; }
            &:nth-child(3) { stroke-dasharray: 28 99; }
        }

        &:popover-open > [popovertargetaction="hide"] svg > path {
            &:nth-child(1) { stroke-dasharray: 42 99; stroke-dashoffset: -64; }
            &:nth-child(2) { stroke-dasharray: 0 28; stroke-dashoffset: -14; }
            &:nth-child(3) { stroke-dasharray: 42 99; stroke-dashoffset: -64; }
        }

        @starting-style {
            &:popover-open > [popovertargetaction="hide"] svg > path {
                &:nth-child(1) { stroke-dasharray: 28 99; stroke-dashoffset: 0; }
                &:nth-child(2) { stroke-dasharray: 28 28; stroke-dashoffset: 0; }
                &:nth-child(3) { stroke-dasharray: 28 99; stroke-dashoffset: 0; }
            }
        }

        & a {
            text-decoration: none;
            color: var(--peels-text-muted);
            font-size: var(--peels-text-small);

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

    .lang-switcher {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-3xs);

        & a {
            font-size: var(--peels-text-small);
            font-weight: var(--peels-font-weight-ui);
            text-decoration: none;
            padding: var(--space-3xs) var(--space-2xs);
            border-radius: var(--radius-s);
            color: var(--peels-text-muted);

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

            &[aria-current="true"] {
                color: var(--peels-text-accent);
                background: var(--peels-surface-active);
            }
        }
    }