button[data-open-theme-dialog] {
        border: 0;
        padding: 0;
        display: inline-grid;
        place-content: center;
        inline-size: var(--theme-button-size, 2.5rem);
        block-size: var(--theme-button-size, 2.5rem);
        border-radius: 50%;
        color: var(--peels-text-body);
        background-color: var(--peels-surface-panel);
        cursor: pointer;

        &:is(:hover, :focus-visible) {
            filter: brightness(.95) saturate(140%);
        }

        & > .theme-button-icon {
            block-size: var(--theme-button-icon-size, 1.25em);
            inline-size: var(--theme-button-icon-size, 1.25em);
            fill: currentColor;
        }
    }
theme-dialog {
        & dialog {
            border: none;
            border-radius: 1rem;
            padding: 0;
            max-inline-size: min(28rem, 90vw);
            box-shadow: 0 8px 48px -8px color-mix(in oklab, black 40%, transparent);
            background: var(--peels-surface-panel);
            color: var(--peels-text-body);

            &::backdrop {
                background: color-mix(in oklab, black 45%, transparent);
                backdrop-filter: blur(2px);
            }

            & form {
                display: flex;
                flex-direction: column;
                gap: var(--space-s);
                padding: var(--space-m);
            }

            & header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--space-xs);

                & h2 {
                    margin: 0;
                    font-size: var(--size-step-1);
                    font-weight: var(--weight-bold);
                }

                & button[aria-label="Fermer"] {
                    background: none;
                    border: none;
                    cursor: pointer;
                    font-size: 1.1rem;
                    color: var(--peels-text-muted);
                    padding: 0.2rem 0.4rem;
                    border-radius: 0.4rem;
                    line-height: 1;

                    &:hover {
                        color: var(--peels-text-body);
                        background: color-mix(in oklab, currentColor 8%, transparent);
                    }
                }
            }

            & fieldset {
                border: 1px solid var(--peels-border-subtle);
                border-radius: 0.6rem;
                padding: var(--space-2xs) var(--space-s);
                margin: 0;

                & legend {
                    padding-inline: var(--space-3xs);
                    font-size: var(--peels-text-small);
                    font-weight: var(--weight-semibold);
                    color: var(--peels-text-muted);
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
            }

            & .radio-group {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-2xs);
                padding-block-start: var(--space-3xs);
            }

            & label {
                display: flex;
                align-items: center;
                gap: var(--space-3xs);
                padding: var(--space-3xs) var(--space-2xs);
                border: 1px solid var(--peels-border-subtle);
                border-radius: 0.5rem;
                cursor: pointer;
                font-size: var(--peels-text-small);
                transition: border-color 0.15s, background 0.15s;

                &:has(input:checked) {
                    border-color: var(--peels-brand);
                    background: color-mix(in oklab, var(--peels-brand) 10%, transparent);
                }

                &:hover {
                    border-color: var(--peels-border-strong);
                }

                & input[type="radio"] {
                    display: none;
                }
            }

            & .swatch {
                inline-size: 0.9rem;
                block-size: 0.9rem;
                border-radius: 50%;
                border: 1px solid color-mix(in oklab, currentColor 20%, transparent);
                flex-shrink: 0;

                &[data-color="peels"]  { background: oklch(0.599 0.107 3);  }
                &[data-color="warm"]   { background: oklch(0.58 0.18 50);   }
                &[data-color="forest"] { background: oklch(0.50 0.16 145);  }
            }
        }
    }
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);
            }
        }
    }