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);
            }
        }
    }