:root {
    --ksup-logo-size: 64px;
}

.light {
    @media (prefers-color-scheme: light) {
        --bg: hsl(220, 60%, 95%);
        --color-scheme: light;
        --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%);
        --copy-button-filter: invert(45.49%);
        --fg: hsl(0, 0%, 0%);
        --icons-hover: black;
        --icons: hsl(220, 60%, 40%);
        --inline-code-color: #301900;
        --links: hsl(220, 60%, 37%);
        --quote-bg: hsl(197, 37%, 96%);
        --quote-border: hsl(197, 37%, 91%);
        --scrollbar: hsl(220, 60%, 40%);
        --search-mark-bg: #a2cff5;
        --searchbar-bg: #fafafa;
        --searchbar-border-color: #aaa;
        --searchbar-fg: hsl(220, 60%, 40%);
        --searchbar-shadow-color: #aaa;
        --searchresults-border-color: hsl(220, 60%, 40%);
        --searchresults-header-fg: hsl(220, 60%, 40%);
        --searchresults-li-bg: #e4f2fe;
        --sidebar-active: hsl(220, 60%, 20%);
        --sidebar-bg: hsl(220, 60%, 90%);
        --sidebar-fg: hsl(220, 60%, 40%);
        --sidebar-non-existant: hsl(220, 10%, 40%);
        --sidebar-spacer: #f4f4f4;
        --table-alternate-bg: hsl(0, 0%, 97%);
        --table-border-color: transparent;
        --table-header-bg: hsl(220, 40%, 80%);
        --theme-hover: hsl(220, 60%, 75%);
        --theme-popup-bg: var(--sidebar-bg);
        --theme-popup-border: #cccccc;
        --title-fg: hsl(220, 60%, 40%);
        --warning-border: #ff8e00;
    }
    @media (prefers-color-scheme: dark) {
        --bg: hsl(220, 40%, 10%);
        --color-scheme: dark;
        --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%);
        --copy-button-filter: invert(45.49%);
        --fg: white;
        --icons-hover: white;
        --icons: hsl(220, 60%, 60%);
        --inline-code-color: #301900;
        --links: hsl(220, 60%, 63%);
        --quote-bg: hsl(197, 37%, 96%);
        --quote-border: hsl(197, 37%, 91%);
        --scrollbar: hsl(220, 60%, 60%);
        --search-mark-bg: #a2cff5;
        --searchbar-bg: #fafafa;
        --searchbar-border-color: #aaa;
        --searchbar-fg: hsl(220, 60%, 60%);
        --searchbar-shadow-color: #aaa;
        --searchresults-border-color: hsl(220, 60%, 60%);
        --searchresults-header-fg: hsl(220, 60%, 60%);
        --searchresults-li-bg: #e4f2fe;
        --sidebar-active: hsl(220, 60%, 80%);
        --sidebar-bg: hsl(220, 60%, 5%);
        --sidebar-fg: hsl(220, 60%, 60%);
        --sidebar-non-existant: hsl(220, 40%, 60%);
        --sidebar-spacer: #f4f4f4;
        --table-alternate-bg: hsl(0, 0%, 3%);
        --table-border-color: transparent;
        --table-header-bg: hsl(220, 60%, 20%);
        --theme-hover: hsl(220, 40%, 35%);
        --theme-popup-bg: var(--sidebar-bg);
        --theme-popup-border: #cccccc;
        --title-fg: hsl(220, 60%, 60%);
        --warning-border: #ff8e00;
    }
}

.menu-title::before {
    content: "";
    display: inline-block;
    background-image: url("../ksup.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--ksup-logo-size);
    margin-right: 8px;
    width: var(--ksup-logo-size);
}

/* Optionnel: lien vers la home depuis le titre */
.menu-title {
    align-items: center;
    color: var(--title-fg);
    display: inline-flex;
    gap: 8px;
}

/* Ajustements mineurs de lisibilité */
.menu-title, .menu-title a {
    text-decoration: none;
}

.left-buttons {
    align-items: center;
}

@media screen and (max-width: 768px) {
    .menu-bar {
        flex-direction: column;
    }

    .right-buttons {
        align-self: flex-end;
        position: absolute;
    }
}

.chapter li.affix {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 3rem;
}

.chapter li.affix::before {
    content: "";
    display: inline-block;
    background-image: url("../ksup.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 3rem;
    margin-right: 8px;
    width: 3rem;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content h1 .header:link,
#content h1 .header:visited,
#content h2 .header:link,
#content h2 .header:visited,
#content h3 .header:link,
#content h3 .header:visited,
#content h4 .header:link,
#content h4 .header:visited,
#content h5 .header:link,
#content h5 .header:visited,
#content h6 .header:link,
#content h6 .header:visited  {
    color: var(--title-fg);
}

.theme-popup .theme:hover {
    background-color: var(--sidebar-fg);
    color: var(--sidebar-bg);
}