/**
 * Source Chromatis•me https://www.chromatis.me/le-blog-chromatisme/2026/03/08/reset-css-autonome-universel-et-modernise.html
 * licence Creative Commons CC BY-NC-SA 4.0
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 * Attribution, partage dans les mêmes conditions, pas d'utilisation commerciale
 */

/* Sélecteurs globaux — isolés hors :root (non nestables sans effet de portée) */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    :root {
        @media print {
            * {
            print-color-adjust: economy;
            }
        }

        @media (any-hover: none) {
            html {
                -webkit-tap-highlight-color: transparent;
            }

            a[href],
            area[href],
            input:not([disabled]):not([type="hidden"]),
            summary,
            select:not([disabled]),
            textarea:not([disabled]),
            [role="button"],
            button:not([disabled]),
            [tabindex="0"],
            [contenteditable] {
                touch-action: manipulation;
            }
        }

        & :is(ul, ol, menu) {
            list-style: none;
        }

        & li::marker {
            content: none;
        }

        & picture {
            display: block;
        }

        & :is(audio, canvas, progress, video, del, ins) {
            display: inline-block;
        }

        & a {
            color: #000;

            &:visited {
                color: #000;
            }

            &:hover,
            &:focus {
                text-decoration: none;
            }
        }

        & :is(button,
            input,
            select,
            textarea,
            optgroup,
            option) {
            font: inherit;
            color: inherit;
            letter-spacing: inherit;
            word-spacing: inherit;
            background: none;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        & :is(img,
            iframe,
            fieldset) {
            border: none;
        }

        & fieldset {
            min-width: 0;
            min-inline-size: unset;
        }

        & img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        & table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        & td {
            empty-cells: show;
        }

        & svg:not(:root) {
            overflow: hidden;
        }

        & :is(sub, sup) {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }

        & sup {
            top: -.25em;
        }

        & sub {
            bottom: -.25em;
        }

        & del {
            position: relative;
            text-decoration: none;
            color: color-mix(in srgb, currentColor 70%, transparent);

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 105%;
                height: 0.0625em; /* proportionnel au texte courant */
                background: var(--basic-color, black); /* pour texte noir */
                transform: translate(-2%, -50%);
            }
        }

        & dialog {
            margin: 0;
            padding: 0;
            border: none;

            &::backdrop {
                background: none;
            }
        }

        & details > summary {
            display: block;
            cursor: pointer;
            list-style: none;
            /* Supprime le marqueur webkit */
            &::-webkit-details-marker {
            display: none;
            }
        }

        & :is(pre, code, samp, kbd) {
            font-family: monospace, monospace;
            font-size: 1em;
        }

        & blockquote {
            margin: 0;
            padding: 0;
        }

        & hr {
            border: none;
            border-top: 2px solid;
            height: 0;
            overflow: visible;
        }

        & abbr[title] {
            text-decoration: underline dotted;
            cursor: help;
        }

        & :is(h1, h2, h3, h4, h5, h6,
            p,
            figure,
            pre,
            dl, dd,
            address) {
            margin-block: 0;
        }

        & dd {
            padding-inline-start: 0;
        }

        & h1 {
            font-size: 2em;
        }

        & :focus-visible {
            outline: 2px solid;
            outline-offset: 2px;
            box-shadow: 0 0 0 4px Canvas; /* ou white, ou la couleur de fond */
        }

        & body {
            min-height: 100vh;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
    }
}