article {
    .article-content {
        counter-reset: h2;
    }
}

.article-content,
article aside {
    a {
        color: var(--link-blue);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 1.5px;
        overflow-wrap: break-word;

        &:hover,
        &:focus {
            color: var(--accent-blue);
            outline: none;
        }

        &:focus-visible {
            outline: 2px solid var(--accent-blue);
            outline-offset: 3px;
        }
    }

    a.affiliated {
        color: var(--accent-purple-bright);
        /* or: gold */
        text-decoration: underline;
    }

    a.affiliated:hover,
    a.affiliated:focus {
        color: var(--accent-pink-bright);
    }

    a.external {
        color: var(--heading-pink);
        /* or: gold */
        text-decoration: underline;
    }

    a.external:hover,
    a.external:focus {
        color: var(--accent-rose-light);
    }

    a.active {
        color: var(--text-white) !important;
    }

    abbr {
        text-decoration: underline dotted;
        cursor: help;
    }

    address {
        display: block;
        margin: 2em;
        padding: 1em 1.5em;
        border-left: 4px solid var(--accent-blue);
        background-color: rgba(255, 255, 255, 0.03);
        font-size: 0.9em;
        color: var(--text-light);
        font-style: normal;
        border-radius: 0.5em;
        line-height: 1.6;
    }

    audio {
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 2em auto;
    }

    blockquote {
        margin: 2em 0;
        padding-left: 1.5em;
        border-left: 4px solid var(--accent-blue);
        color: var(--text-light);
        font-style: italic;
        font-size: 1.1em;
        line-height: 1.6;
        text-align: justify;

        cite {
            display: block;
            margin-top: 1em;
            font-style: normal;
            font-size: 0.9em;
            color: var(--text-muted2);
            text-align: right;
        }
    }

    dl {
        display: grid;
        grid-template-columns: 40% 60%;
        row-gap: 0;
        border: 1px solid var(--border-dark);
        border-radius: 4px;
        overflow: hidden;
        margin: 2em 0;
    }

    /* Base commune */
    dt,
    dd {
        padding: 0.6em 1em;
        border-bottom: 1px solid var(--border-dark);
    }

    /* Colonne de gauche */
    dt {
        font-weight: bold;
        color: var(--text-white);
        border-right: 1px solid var(--border-dark);
    }

    /* Colonne de droite */
    dd {
        color: var(--text-light);
        line-height: 1.6;
    }

    /* Effet zébré sur les paires dt/dd */
    dl dt:nth-of-type(odd),
    dl dd:nth-of-type(odd) {
        background-color: var(--surface-dark);
    }

    dl dt:nth-of-type(even),
    dl dd:nth-of-type(even) {
        background-color: var(--surface-overlay);
    }

    del {
        display: inline;
        text-decoration: line-through;
        color: var(--text-red);
        background-color: rgba(255, 0, 0, 0.1);
        padding: 0 0.2em;
        border-radius: 0.2em;
    }

    details {
        margin: 2em 0;
        border-radius: 0.5em;
        overflow: hidden;
        padding: 1rem;

        summary {
            cursor: pointer;
            padding: 0.5rem 1rem;
            font-weight: bold;
            user-select: none;
        }

        &.spoiler {
            border-left: 4px solid var(--border-muted);
            background-color: rgba(255, 255, 255, 0.03);

            summary {
                color: var(--text-muted);

                &::before {
                    content: "⚠️ ";
                    margin-right: 0.25em;
                }
            }

            &[open] summary {
                color: var(--text-white);
            }
        }

        &.update {
            border-left: 4px solid var(--accent-blue);
            background-color: rgba(100, 199, 255, 0.1);

            summary {
                color: var(--accent-blue);

                &::before {
                    content: "🛈 ";
                    margin-right: 0.25em;
                }
            }

            &[open] summary {
                color: var(--text-white);
            }
        }

        &.read-more {
            border: none;
            background: none;

            summary {
                font-weight: normal;
                color: var(--link-blue);
                text-decoration: underline dotted;

                &::before {
                    content: "➕ ";
                    margin-right: 0.25em;
                }

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

            summary~p {
                padding-left: 1.25em;
            }
        }
    }

    dfn {
        font-style: italic;
        font-weight: normal;
        border-bottom: 1px dashed var(--accent-blue);
        cursor: help;
        text-decoration: none;
    }

    figure {
        font-size: 0.9em;
        display: block;
        margin: 3em auto;
        padding: 1rem;
        border-radius: 1em;
        background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.7));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.05),
            0 0 10px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        max-width: 100%;
        text-align: center;

        p {
            text-align: center;
        }

        img,
        video,
        audio {
            display: block;
            max-width: 100%;
            max-height: 60vh;
            margin: 0 auto;
            border-radius: 0.5em;
        }

        figcaption {
            color: var(--text-muted);
            margin-top: 0.5em;
            line-height: 1.4;
            font-style: italic;
            padding: 0 1em;
            font-size: 1rem;

            em {
                color: var(--text-softest);
            }
        }
    }

    hr {
        all: unset;
        display: block;
        width: 100%;
        max-width: 30em;
        height: 1rem;
        margin: 4em auto;
        position: relative;
        background: radial-gradient(ellipse at center -20px,
                rgba(200, 240, 255, 0.18),
                transparent 80%);
    }

    input[type="checkbox"] {
        appearance: none;
        width: 1.1em;
        height: 1.1em;
        margin-right: 0.5em;
        vertical-align: text-bottom;
        /* ⬅ correction ici */
        border: 2px solid var(--border-muted);
        border-radius: 0.2em;
        background-color: transparent;
        position: relative;
        cursor: default;

        &:checked::after {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* ⬅ centrage parfait */
            color: var(--accent-blue);
            font-weight: bold;
            font-size: 0.85em;
            /* ⬅ très léger ajustement */
            line-height: 1;
        }

        &:disabled {
            opacity: 1;
        }
    }

    ins {
        display: inline;
        text-decoration: none;
        font-weight: bold;
        color: var(--text-green);
        background-color: rgba(0, 255, 0, 0.1);
        padding: 0 0.2em;
        border-radius: 0.2em;
    }

    kbd {
        display: inline-block;
        padding: 0.2em 0.6em;
        margin: 0 0.1em;
        font-family: inherit;
        font-size: 0.9em;
        line-height: 1.2;
        color: var(--text-muted);
        background-color: var(--bg-dark);
        border-radius: 0.3em;
        box-shadow:
            0 0 6px rgba(255, 255, 255, 0.25),
            0 0 12px rgba(255, 255, 255, 0.12),
            inset 0 0 1px rgba(255, 255, 255, 0.04);
        white-space: nowrap;
        vertical-align: middle;
    }

    pre {
        overflow: scroll;
        padding: 1em 0;
    }

    ul,
    ol {
        margin-block: 1em;
        padding-left: 1.5em;

        li {
            margin-block: 0.3em;
        }

        li>ul,
        li>ol {
            margin-top: 0.5em;
            margin-bottom: 0.5em;
        }
    }

    /* UL : puce unifiée */
    ul {
        list-style: none;
        padding-left: 1.5em;
        margin-block: 1em;

        li {
            position: relative;
            margin-block: 0.3em;
            padding-left: 1em;
            text-indent: 0;

            &::before {
                content: "•";
                color: var(--accent-blue);
                position: absolute;
                left: 0;
                top: 0.1em;
            }

            >ul,
            >ol {
                margin-top: 0.5em;
                margin-bottom: 0.5em;
            }
        }
    }

    /* OL : numérotation propre et lisible */
    ol {
        list-style: decimal;

        li::marker {
            color: var(--heading-green);
            font-variant-numeric: tabular-nums;
        }
    }

    p {
        text-align: justify;
        margin-block: .5em;
    }

    .highlight {
        font-size: .8rem;

        pre {
            padding: 1rem;
            overflow: auto;
            max-height: 50vh;
            border-radius: .5rem;
        }
    }

    q {
        quotes: "«\00a0" " »" "“" "”";
        font-style: italic;
        color: var(--text-muted);

        &::before {
            content: open-quote;
        }

        &::after {
            content: close-quote;
        }
    }

    samp {
        display: inline-block;
        padding: 0.3em 0.6em;
        margin: 0.2em 0.1em;
        font-family: 'Courier New', monospace;
        font-size: 0.9em;
        line-height: 1.4;
        color: var(--accent-green-bright);
        background-color: var(--bg-dark);
        border-radius: 0.3em;
        box-shadow:
            0 0 1px rgba(0, 255, 0, 0.2),
            inset 0 0 2px rgba(255, 255, 255, 0.05);
        white-space: pre-wrap;
    }

    pre samp {
        display: block;
        padding: 1em;
        margin: 2em auto;
        background-color: var(--bg-dark);
        color: var(--accent-green-bright);
        border-radius: 0.5em;
        box-shadow:
            0 0 10px rgba(0, 255, 100, 0.05),
            inset 0 0 3px rgba(0, 255, 100, 0.1);
        font-size: 0.8em;
        max-height: 50vh;
        overflow: auto;
    }

    strong {
        color: var(--text-white);
    }

    sub,
    sup {
        font-size: 0.75em;
        line-height: 1;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -0.4em;
    }

    sub {
        bottom: -0.2em;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 3em 0;
        font-size: 0.95em;
        line-height: 1.5;
        border: 1px solid var(--border-dark);
        background-color: rgba(255, 255, 255, 0.015);
        /* Suppression des coins arrondis */
        border-radius: 0;
    }

    thead {
        background-color: rgba(255, 255, 255, 0.04);
        color: var(--text-white);
        font-weight: bold;
    }

    thead th {
        padding: 0.75em 1em;
        border: 1px solid var(--border-dark);
        text-align: left;
        white-space: nowrap;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
    }

    tbody td {
        padding: 0.75em 1em;
        border: 1px solid var(--border-dark);
        vertical-align: top;
        text-align: left;
        color: var(--text-light);
        background-color: transparent;
        transition: background-color 0.2s;
    }

    /* Alternance des lignes */
    tbody tr:nth-child(even) td {
        background-color: rgba(255, 255, 255, 0.015);
    }

    /* Survol ligne */
    tbody tr:hover td {
        background-color: rgba(100, 199, 255, 0.05);
    }

    /* Survol cellule */
    tbody td:hover {
        background-color: rgba(100, 199, 255, 0.08);
    }

    /* Pied du tableau */
    tfoot td {
        padding: 0.75em 1em;
        font-style: italic;
        color: var(--text-muted);
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--border-dark);
    }
}

aside {

    h2::before,
    h3::before,
    h4::before,
    h5::before,
    h6::before {
        content: none;
    }
}

.numbered-headings {
    h2 {
        counter-reset: h3;
        counter-increment: h2;
        margin: 2.2em 0 1em;
        font-size: 1.8em;
        color: var(--accent-blue);
        scroll-margin-top: 4rem;

        &::before {
            content: counter(h2) ". ";
        }
    }

    h3 {
        counter-reset: h4;
        counter-increment: h3;
        margin: 2em 0 0.8em;
        font-size: 1.5em;
        color: var(--heading-green);
        scroll-margin-top: 4rem;

        &::before {
            content: counter(h2) "." counter(h3) ". ";
        }
    }

    h4 {
        counter-reset: h5;
        counter-increment: h4;
        margin: 1.8em 0 0.7em;
        font-size: 1.3em;
        color: var(--heading-yellow);
        scroll-margin-top: 4rem;

        &::before {
            content: counter(h2) "." counter(h3) "." counter(h4) ". ";
        }
    }

    h5 {
        counter-reset: h6;
        counter-increment: h5;
        margin: 1.6em 0 0.6em;
        font-size: 1.1em;
        color: var(--heading-purple);
        scroll-margin-top: 4rem;

        &::before {
            content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
        }
    }

    h6 {
        counter-increment: h6;
        margin: 1.4em 0 0.5em;
        font-size: 1em;
        color: var(--heading-pink);
        scroll-margin-top: 4rem;

        &::before {
            content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
        }
    }
}