/* Style général + VS Code-like pour les blocs de code */
body {
    font-family: Helvetica, Arial, 'Segoe UI', 'Fira Mono', 'Menlo', 'Consolas', monospace;
    margin: 0;
    padding: 0;
    background: #1e1e1e;
    color: #d4d4d4;
    transition: background 0.3s, color 0.3s;
}
@media (prefers-color-scheme: light) {
    body:not(.dark):not(.light) {
        background: #f7f7f7;
        color: #23272e;
    }
    header, footer, section {
        background: #fff;
        color: #23272e;
        box-shadow: 0 2px 8px #0001;
    }
    .theme-btn {
        background: #23272e;
        color: #fff;
    }
    .theme-btn:hover {
        background: #007acc;
    }
    .code-block {
        background: #f3f3f3;
        color: #23272e;
    }
}
body.light {
    background: #f7f7f7;
    color: #23272e;
}
body.light header, body.light footer {
    background: #fff;
    color: #23272e;
    box-shadow: 0 2px 8px #0001;
}
body.light section {
    background: #fff;
    color: #23272e;
    box-shadow: 0 2px 8px #0001;
}
body.light .theme-btn {
    background: #23272e;
    color: #fff;
}
body.light .theme-btn:hover {
    background: #007acc;
}
header, footer {
    background: #222;
    color: #fff;
    padding: 1em 2em;
    transition: background 0.3s, color 0.3s;
}
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1em;
}
nav a {
    color: inherit;
    text-decoration: none;
}
main {
    padding: 2em;
    max-width: 900px;
    margin: auto;
}
section {
    margin-bottom: 2.5em;
    background: #23272e;
    border-radius: 12px;
    padding: 2em 2em 1.5em 2em;
    box-shadow: 0 2px 8px #0002;
    transition: background 0.3s, color 0.3s;
}
.theme-btn {
    background: #007acc;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.8em 1.7em;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 1em;
    margin-bottom: 0.5em;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 1px 4px #0002;
}
.theme-btn:hover {
    background: #005a9e;
    transform: translateY(-2px) scale(1.05);
}
/* Code block style (toujours VS Code) */
.code-block {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 6px;
    padding: 1.2em;
    font-family: 'Fira Mono', 'Consolas', monospace;
    font-size: 1em;
    overflow-x: auto;
    box-shadow: 0 1px 4px #0004;
    margin: 1em 0;
}
body.light .code-block {
    background: #f3f3f3;
    color: #23272e;
}
/* Coloration syntaxique style VS Code (simplifiée) */
.code-block .token.comment, .code-block .token.prolog, .code-block .token.doctype, .code-block .token.cdata {
    color: #6a9955;
}
.code-block .token.punctuation {
    color: #d4d4d4;
}
.code-block .token.property, .code-block .token.tag, .code-block .token.constant, .code-block .token.symbol, .code-block .token.deleted {
    color: #569cd6;
}
.code-block .token.boolean, .code-block .token.number {
    color: #b5cea8;
}
.code-block .token.selector, .code-block .token.attr-name, .code-block .token.string, .code-block .token.char, .code-block .token.builtin, .code-block .token.inserted {
    color: #ce9178;
}
.code-block .token.operator, .code-block .token.entity, .code-block .token.url, .code-block .token.variable {
    color: #d4d4d4;
}
.code-block .token.keyword {
    color: #c586c0;
}
.code-block .token.function {
    color: #dcdcaa;
}
.code-block .token.class-name {
    color: #4ec9b0;
}
.code-block .token.regex, .code-block .token.important {
    color: #d16969;
}