/* Styles pour le contenu Markdown */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    font-weight: bold;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.markdown-content h1 { font-size: 1.875rem; }
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.25rem; }

.markdown-content p {
    margin-bottom: 1em;
    line-height: 1.7;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

.markdown-content ul {
    list-style-type: disc;
}

.markdown-content ol {
    list-style-type: decimal;
}

.markdown-content li {
    margin-bottom: 0.1em;
}

.markdown-content a {
    color: #3b82f6;
    text-decoration: underline;
}

.markdown-content a:hover {
    color: #2563eb;
}

.markdown-content code {
    background-color: rgba(0,0,0,0.1);
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
    font-size: 0.9em;
    font-family: monospace;
}

.markdown-content pre {
    background-color: rgba(0,0,0,0.05);
    padding: 1em;
    border-radius: 0.5em;
    overflow-x: auto;
    margin-bottom: 1em;
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

.markdown-content blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1em;
    margin: 1em 0;
    font-style: italic;
    color: #64748b;
}

.markdown-content strong {
    font-weight: bold;
}

.markdown-content em {
    font-style: italic;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2em 0;
}

/* Dark mode */
.dark .markdown-content code {
    background-color: rgba(255,255,255,0.1);
}

.dark .markdown-content pre {
    background-color: rgba(255,255,255,0.05);
}

.dark .markdown-content blockquote {
    color: #94a3b8;
}

.dark .markdown-content hr {
    border-top-color: #334155;
}


/* =====================================================
   STYLES PREVIEW MARKDOWN - MODE CLAIR ET DARK
   ===================================================== */

/* Container de prévisualisation SimpleMDE */
.editor-preview,
.editor-preview-active,
.editor-preview-side {
    padding: 1rem;
}

/* Titres dans la prévisualisation (mode clair) */
.editor-preview h1,
.editor-preview-active h1,
.editor-preview h2,
.editor-preview-active h2,
.editor-preview h3,
.editor-preview-active h3,
.editor-preview-side h1,
.editor-preview-side h2,
.editor-preview-side h3 {
    font-weight: bold;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}

.editor-preview h1,
.editor-preview-active h1,
.editor-preview-side h1 { 
    font-size: 1.875rem; 
}

.editor-preview h2,
.editor-preview-active h2,
.editor-preview-side h2 { 
    font-size: 1.5rem; 
}

.editor-preview h3,
.editor-preview-active h3,
.editor-preview-side h3 { 
    font-size: 1.25rem; 
}

.editor-preview p,
.editor-preview-active p,
.editor-preview-side p {
    margin-bottom: 1em;
    line-height: 1.7;
}

/* =====================================================
   MODE DARK
   ===================================================== */

/* Container de prévisualisation SimpleMDE - Dark */
.dark .editor-preview,
.dark .editor-preview-active,
.dark .editor-preview-side {
    background-color: rgb(51, 65, 85); /* slate-700 */
    color: rgb(226, 232, 240); /* slate-200 */
    border-color: rgb(71, 85, 105); /* slate-600 */
}

/* Titres dans la prévisualisation - Dark */
.dark .editor-preview h1,
.dark .editor-preview-active h1,
.dark .editor-preview h2,
.dark .editor-preview-active h2,
.dark .editor-preview h3,
.dark .editor-preview-active h3,
.dark .editor-preview h4,
.dark .editor-preview h5,
.dark .editor-preview h6,
.dark .editor-preview-side h1,
.dark .editor-preview-side h2,
.dark .editor-preview-side h3,
.dark .editor-preview-side h4,
.dark .editor-preview-side h5,
.dark .editor-preview-side h6 {
    color: rgb(248, 250, 252); /* slate-50 */
    border-bottom-color: rgb(71, 85, 105); /* slate-600 */
}

/* Liens dans la prévisualisation */
.dark .editor-preview a,
.dark .editor-preview-side a {
    color: rgb(96, 165, 250); /* blue-400 */
}

.dark .editor-preview a:hover,
.dark .editor-preview-side a:hover {
    color: rgb(147, 197, 253); /* blue-300 */
}

/* Code inline */
.dark .editor-preview code,
.dark .editor-preview-side code {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(248, 250, 252);
    border-color: rgb(71, 85, 105);
}

/* Blocs de code */
.dark .editor-preview pre,
.dark .editor-preview-side pre {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgb(71, 85, 105);
}

.dark .editor-preview pre code,
.dark .editor-preview-side pre code {
    background: none;
    color: rgb(226, 232, 240);
}

/* Citations */
.dark .editor-preview blockquote,
.dark .editor-preview-side blockquote {
    border-left-color: rgb(96, 165, 250); /* blue-400 */
    color: rgb(148, 163, 184); /* slate-400 */
}

/* Tables */
.dark .editor-preview table,
.dark .editor-preview-side table {
    border-color: rgb(71, 85, 105);
}

.dark .editor-preview table thead,
.dark .editor-preview-side table thead {
    background-color: rgba(0, 0, 0, 0.2);
}

.dark .editor-preview table th,
.dark .editor-preview table td,
.dark .editor-preview-side table th,
.dark .editor-preview-side table td {
    border-color: rgb(71, 85, 105);
}

/* Séparateurs horizontaux */
.dark .editor-preview hr,
.dark .editor-preview-side hr {
    border-color: rgb(71, 85, 105);
}

/* Listes */
.dark .editor-preview ul,
.dark .editor-preview ol,
.dark .editor-preview-side ul,
.dark .editor-preview-side ol {
    color: rgb(226, 232, 240);
}

/* Strong et em */
.dark .editor-preview strong,
.dark .editor-preview-side strong {
    color: rgb(248, 250, 252);
}

.dark .editor-preview em,
.dark .editor-preview-side em {
    color: rgb(203, 213, 225); /* slate-300 */
}

/* Images */
.dark .editor-preview img,
.dark .editor-preview-side img {
    border-color: rgb(71, 85, 105);
    background-color: rgba(255, 255, 255, 0.05);
}