/* Articles du blog : code coloré (Prism), figures, listes, diagrammes.
   Chargé après theme.css sur chaque page de blog/. */

/* Listes : puces visibles (Tailwind les retire) */
article ul { list-style: disc; }
article ol { list-style: decimal; }
article li::marker { color: var(--accent); }
article li.ico { list-style: none; margin-left: -1.5rem; }
article li.ico > i:first-child { color: var(--accent); width: 1.5rem; }

/* Figures : cartes et diagrammes */
article figure { margin: 2.5rem 0; }
article figure img { margin: 0; width: 100%; height: auto; border: 1px solid var(--line); }
article figcaption {
    margin-top: 0.75rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--muted);
}
article figcaption i { color: var(--accent); margin-right: 0.4rem; }
.diagram {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem;
    overflow-x: auto;
}
/* ponytail: largeur mini + défilement horizontal sur mobile plutôt qu'un 2e diagramme vertical */
.diagram svg { display: block; width: 100%; min-width: 560px; height: auto; }

/* Blocs de code */
article pre[class*="language-"] {
    background: #0d0d0d;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 0.5rem;
    padding: 2.75rem 1.25rem 1.25rem;
    margin: 0;
    overflow-x: auto;
}
article pre code[class*="language-"] {
    background: none;
    padding: 0;
    border-radius: 0;
    color: #e0e0e0;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.7;
    white-space: pre;
    tab-size: 4;
}
div.code-toolbar { position: relative; margin: 1.5rem 0; }
div.code-toolbar > .toolbar {
    position: absolute;
    top: 0.6rem;
    left: 1.25rem;
    right: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.code-toolbar > .toolbar .toolbar-item > span,
div.code-toolbar > .toolbar .toolbar-item > button {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
div.code-toolbar > .toolbar .toolbar-item > button {
    border: 1px solid var(--line);
    background: var(--surface-2);
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
div.code-toolbar > .toolbar .toolbar-item > button:hover,
div.code-toolbar > .toolbar .toolbar-item > button:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}

/* Couleurs de la coloration syntaxique */
.token.comment, .token.prolog { color: #6b6b6b; font-style: italic; }
.token.keyword, .token.important, .token.decorator, .token.atrule { color: #d4ff3f; }
.token.function { color: #7dd3fc; }
.token.string, .token.char, .token.attr-value { color: #fcd34d; }
.token.number, .token.boolean, .token.constant { color: #fb923c; }
.token.builtin, .token.class-name { color: #c4b5fd; }
.token.variable, .token.property { color: #f9a8d4; }
.token.operator, .token.punctuation { color: #a3a3a3; }