/**
 * Rendu du contenu d'article (Markdown converti en HTML) — partagé à l'identique
 * entre le site public (.doc-article) et l'aperçu en direct de l'admin
 * (.editor-preview), pour garantir un rendu WYSIWYG exact.
 * Couleurs en dur (pas de variables CSS) pour fonctionner dans les deux contextes.
 */

.doc-article, .editor-preview {
    font-family: 'Inter', system-ui, sans-serif;
    color: #e6e6ec;
}

.doc-article > *, .editor-preview > * { margin: 0 0 1.2rem; }
.doc-article > *:last-child, .editor-preview > *:last-child { margin-bottom: 0; }

.doc-article h1, .editor-preview h1 { font-size: 1.9rem; font-weight: 800; }
.doc-article > h1:first-child, .editor-preview > h1:first-child {
    background: linear-gradient(135deg, #c4a0ff 0%, #9a5bff 50%, #7c3fe8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.doc-article h2, .editor-preview h2 { font-size: 1.4rem; font-weight: 800; padding-left: .7rem; border-left: 3px solid #9a5bff; }
.doc-article h3, .editor-preview h3 { font-size: 1.15rem; font-weight: 800; }
.doc-article pre, .editor-preview pre {
    background: rgba(154,91,255,.06); padding: 1rem 1.2rem; border-radius: 6px; overflow-x: auto;
    border-left: 3px solid #9a5bff; font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    margin: 0;
}
.code-block-wrap { position: relative; margin: 0 0 1.2rem; }
.code-block-wrap:last-child { margin-bottom: 0; }
.code-copy-btn {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #c4a0ff;
    border-radius: 5px; padding: .35rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: .7; transition: opacity .15s, background .15s;
}
.code-copy-btn:hover { opacity: 1; background: rgba(154,91,255,.18); }
.code-copy-btn.copied { color: #1fd89a; opacity: 1; }
.doc-article code, .editor-preview code {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    background: #1a1a22; padding: .1rem .35rem; border-radius: 4px; color: #c4a0ff;
}
.doc-article pre code, .editor-preview pre code { background: none; padding: 0; color: #c4a0ff; }
.doc-article blockquote, .editor-preview blockquote { border-left: 3px solid #9a5bff; padding: .3rem 1rem; color: #9a9aa8; margin: 0 0 1.2rem; }
.doc-article img, .editor-preview img { max-width: 100%; border-radius: 8px; }
.doc-article table.md-table, .editor-preview table.md-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.doc-article table.md-table th, .doc-article table.md-table td,
.editor-preview table.md-table th, .editor-preview table.md-table td {
    border: 1px solid rgba(255,255,255,0.09); padding: .55rem .8rem; text-align: left;
}
.doc-article table.md-table th, .editor-preview table.md-table th { background: #15151b; font-weight: 700; }
.doc-article del, .editor-preview del { color: #9a9aa8; }
.doc-article ul.nested-list, .doc-article ol.nested-list,
.editor-preview ul.nested-list, .editor-preview ol.nested-list { margin: .4rem 0 0; padding-left: 1.3rem; }
.doc-article hr, .editor-preview hr { border: none; border-top: 1px solid rgba(255,255,255,0.09); }
.md-spacer { height: 1.2rem; margin: 0 !important; }

.doc-article a, .editor-preview a { color: #c4a0ff; }

/* Encadrés :::info / :::tip / :::warning / :::danger / etc. (couleur en ligne par type) */
.admonition { border-radius: 8px; border: 1px solid rgba(255,255,255,0.09); overflow: hidden; margin: 0 0 1.2rem; }
.admonition-heading { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .82rem; letter-spacing: .04em; padding: .6rem 1rem; }
.admonition-content { padding: .2rem 1rem 1rem; }
.admonition-content p:first-child { margin-top: 0; }
.admonition-content > *:last-child { margin-bottom: 0; }

.article-tags { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tag-badge { background: #15151b; border: 1px solid rgba(255,255,255,0.09); color: #9a9aa8; font-size: .78rem; padding: .15rem .6rem; border-radius: 999px; }