/* ======================================== EASYMDE - ÉDITEUR MARKDOWN PERSONNALISÉ Flatboard 5 - Support complet mode clair/sombre Version 2.21.3 - Optimisé avec variables dynamiques ======================================== *//* ======================================== 1. VARIABLES CSS LOCALES ======================================== */:root { /* Dimensions et espacements */ --easymde-container-margin: 1.5rem; --easymde-editor-min-height: 400px; --easymde-toolbar-height: 50px; /* Ombres - Mode clair */ --easymde-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08); --easymde-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12); --easymde-shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1); --easymde-shadow-button-active: 0 1px 2px rgba(0, 0, 0, 0.1); /* Gradients et effets */ --easymde-toolbar-gradient: linear-gradient(to bottom, var(--bg-secondary), var(--bg-tertiary)); --easymde-button-hover-transform: translateY(-1px); /* Transitions */ --easymde-transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --easymde-transition-fast: all 0.15s ease;}/* Variables mode sombre */[data-bs-theme="dark"],[data-theme="dark"] { --easymde-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3); --easymde-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4); --easymde-toolbar-gradient: linear-gradient(to bottom, var(--dark-bg-secondary, #121212), var(--dark-bg-tertiary, #2a2a2a));}/* ======================================== 2. CONTENEUR PRINCIPAL ======================================== */.EasyMDEContainer { margin-top: var(--easymde-container-margin); margin-bottom: var(--easymde-container-margin); border-radius: var(--border-radius, 0.5rem); overflow: visible; box-shadow: var(--easymde-shadow-light); transition: var(--easymde-transition-smooth); background-color: var(--bg-primary, #ffffff); animation: easymde-fade-in 0.3s ease-out;}.EasyMDEContainer:hover { box-shadow: var(--easymde-shadow-hover);}/* Mode sombre - Conteneur */[data-theme="dark"] .EasyMDEContainer,[data-bs-theme="dark"] .EasyMDEContainer { background-color: var(--dark-bg-primary, #1a1a1a);}/* ======================================== 3. ÉDITEUR CODEMIRROR ======================================== */.EasyMDEContainer .CodeMirror { box-sizing: border-box; height: auto; min-height: var(--easymde-editor-min-height); border: 1px solid var(--border-color, #dee2e6); border-top: none; border-bottom-left-radius: var(--border-radius, 0.5rem); border-bottom-right-radius: var(--border-radius, 0.5rem); padding: var(--spacing-lg, 1rem); background-color: var(--bg-primary, #ffffff); color: var(--text-primary, #212529); font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Source Code Pro', monospace; font-size: 14px; line-height: 1.6; transition: border-color var(--easymde-transition-fast), background-color var(--easymde-transition-fast); z-index: 0;}.EasyMDEContainer .CodeMirror-scroll { min-height: var(--easymde-editor-min-height); cursor: text;}.EasyMDEContainer .CodeMirror-focused { border-color: var(--primary-color, #007bff); outline: 0; box-shadow: 0 0 0 0.125rem rgba(var(--primary-rgb, 0, 123, 255), 0.15);}.EasyMDEContainer .CodeMirror-cursor { border-left: 2px solid var(--primary-color, #007bff);}/* Mode sombre - CodeMirror */[data-theme="dark"] .EasyMDEContainer .CodeMirror,[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror { background-color: var(--dark-bg-primary, #1a1a1a); color: var(--dark-text-primary, #e0e0e0); border-color: var(--border-color-dark, #333333);}/* ======================================== 4. LIGNES ET NUMÉROS ======================================== */.EasyMDEContainer .CodeMirror-line { padding: 0 0.75rem;}.EasyMDEContainer .CodeMirror-lines { padding: 1rem 0;}.EasyMDEContainer .CodeMirror-linenumber { color: var(--text-secondary, #6c757d); opacity: 0.5; padding: 0 0.5rem;}.EasyMDEContainer .CodeMirror-placeholder { opacity: 0.5; color: var(--text-muted, #868e96);}/* Mode sombre - Lignes */[data-theme="dark"] .CodeMirror-linenumber,[data-bs-theme="dark"] .CodeMirror-linenumber { color: var(--dark-text-muted, #606060);}/* ======================================== 5. SÉLECTION DE TEXTE ======================================== */.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: rgba(var(--primary-rgb, 0, 123, 255), 0.2);}[data-theme="dark"] .CodeMirror-selected,[data-bs-theme="dark"] .CodeMirror-selected { background: rgba(90, 139, 192, 0.5);}[data-theme="dark"] .CodeMirror-focused .CodeMirror-selected,[data-bs-theme="dark"] .CodeMirror-focused .CodeMirror-selected { background: rgba(90, 139, 192, 0.6);}/* ======================================== 6. BARRE D'OUTILS ======================================== */.EasyMDEContainer .editor-toolbar { position: relative; user-select: none; background: var(--easymde-toolbar-gradient); border: 1px solid var(--border-color, #dee2e6); border-bottom: none; border-radius: var(--border-radius, 0.5rem) var(--border-radius, 0.5rem) 0 0; padding: 0.75rem; transition: var(--easymde-transition-smooth); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; width: 100%; overflow: visible; z-index: 10; visibility: visible; opacity: 1;}.EasyMDEContainer .editor-toolbar::before,.EasyMDEContainer .editor-toolbar::after { display: none;}/* Mode sombre - Toolbar */[data-theme="dark"] .editor-toolbar,[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar { background: var(--easymde-toolbar-gradient); border-color: var(--border-color-dark, #333333);}/* ======================================== 6b. ICÔNES FONT AWESOME DANS LA TOOLBAR ======================================== */.EasyMDEContainer .editor-toolbar button i,.EasyMDEContainer .editor-toolbar a i,.editor-toolbar button i,.editor-toolbar a i { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position: relative; z-index: 1;}/* Assurer que les icônes FA sont visibles */.EasyMDEContainer .editor-toolbar .fa,.EasyMDEContainer .editor-toolbar .fas,.EasyMDEContainer .editor-toolbar .fab,.EasyMDEContainer .editor-toolbar .far { display: inline-block !important; font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; font-weight: 900 !important; visibility: visible !important; opacity: 1 !important;}/* ======================================== 7. BOUTONS DE LA TOOLBAR ======================================== */.EasyMDEContainer .editor-toolbar button,.EasyMDEContainer .editor-toolbar a { border: none; background: transparent; color: var(--text-secondary, #6c757d); padding: 0.5rem 0.625rem; margin: 0; border-radius: 0.375rem; height: 2rem; min-height: 2rem; min-width: 2rem; transition: var(--easymde-transition-smooth); font-size: 0.875rem; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; line-height: 1; visibility: visible !important; opacity: 1 !important; position: relative; z-index: 1;}.EasyMDEContainer .editor-toolbar button:hover,.EasyMDEContainer .editor-toolbar a:hover { background-color: var(--bg-tertiary, #e9ecef); color: var(--primary-color, #007bff); transform: var(--easymde-button-hover-transform); box-shadow: var(--easymde-shadow-button);}.EasyMDEContainer .editor-toolbar button:active,.EasyMDEContainer .editor-toolbar a:active { transform: translateY(0); box-shadow: var(--easymde-shadow-button-active);}.EasyMDEContainer .editor-toolbar button.active,.EasyMDEContainer .editor-toolbar a.active { background-color: var(--primary-color, #007bff); color: var(--text-white, #ffffff); box-shadow: 0 2px 6px rgba(var(--primary-rgb, 0, 123, 255), 0.3);}.EasyMDEContainer .editor-toolbar button:focus,.EasyMDEContainer .editor-toolbar a:focus { outline: 1px solid var(--primary-color, #007bff); outline-offset: 1px;}/* Mode sombre - Boutons */[data-theme="dark"] .editor-toolbar button,[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button,[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar a { color: var(--dark-text-secondary, #b0b0b0);}[data-theme="dark"] .editor-toolbar button:hover,[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button:hover,[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar a:hover { background-color: var(--dark-bg-tertiary, #2a2a2a); color: var(--dark-text-primary, #e0e0e0);}[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button.active,[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar a.active { background-color: var(--primary-color, #5A8BC0); color: var(--dark-text-white, #ffffff);}/* ======================================== 8. SÉPARATEURS ======================================== */.EasyMDEContainer .editor-toolbar i.separator { display: inline-block; width: 1px; height: 1.5rem; background-color: var(--border-color, #dee2e6); color: transparent; text-indent: 0; margin: 0 0.5rem; vertical-align: middle;}/* ======================================== 9. BOUTONS SPÉCIAUX (Table, YouTube, TikTok, Emoji) ======================================== */.editor-toolbar button[title*="Table"],.editor-toolbar button[title*="table"],.editor-toolbar button.table,.editor-toolbar button[title*="YouTube"],.editor-toolbar button.youtube,.editor-toolbar button[title*="TikTok"],.editor-toolbar button.tiktok,.editor-toolbar button.easymde-custom-button { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: auto !important; float: none !important; position: relative !important; z-index: 1 !important;}/* Masquer les boutons undefined (remplacés par JS) */.editor-toolbar button.undefined { display: none !important; visibility: hidden !important; opacity: 0 !important;}/* ======================================== 10. BARRE DE STATUT ======================================== */.EasyMDEContainer .editor-statusbar { padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--text-secondary, #6c757d); text-align: right; background-color: var(--bg-tertiary, #e9ecef); border: 1px solid var(--border-color, #dee2e6); border-top: none; border-radius: 0 0 var(--border-radius, 0.5rem) var(--border-radius, 0.5rem); transition: background-color var(--easymde-transition-fast);}.editor-statusbar span { display: inline-block; min-width: 4em; margin-left: 1em;}/* Mode sombre - Statusbar */[data-theme="dark"] .editor-statusbar,[data-bs-theme="dark"] .EasyMDEContainer .editor-statusbar { background-color: var(--dark-bg-tertiary, #2a2a2a); color: var(--dark-text-secondary, #b0b0b0); border-color: var(--border-color-dark, #333333);}/* ======================================== 11. MODE PLEIN ÉCRAN - VRAI 100% AVEC TOOLBAR VISIBLE ======================================== */body.editor-fullscreen-active { overflow: hidden !important;}.EasyMDEContainer.fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 9999 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;}/* Toolbar TOUJOURS visible en haut */.editor-toolbar.fullscreen { width: 100vw !important; height: var(--easymde-toolbar-height) !important; padding: 1rem !important; background: var(--bg-primary, #ffffff); border: 0; border-bottom: 1px solid var(--border-color, #dee2e6); position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 10001 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); margin: 0 !important; border-radius: 0 !important; pointer-events: auto !important;}/* CodeMirror commence SOUS la toolbar et prend le reste de l'écran */.EasyMDEContainer .CodeMirror-fullscreen,.EasyMDEContainer.fullscreen .CodeMirror { background: var(--bg-primary, #ffffff); position: fixed !important; top: var(--easymde-toolbar-height) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: calc(100vh - var(--easymde-toolbar-height)) !important; z-index: 10000 !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: var(--spacing-lg, 1rem) !important; min-height: calc(100vh - var(--easymde-toolbar-height)) !important;}/* Mode côte à côte (side-by-side) en plein écran */.EasyMDEContainer.fullscreen.sided .CodeMirror { width: 50vw !important; position: fixed !important; top: var(--easymde-toolbar-height) !important; left: 0 !important; bottom: 0 !important; height: calc(100vh - var(--easymde-toolbar-height)) !important; border-right: 1px solid var(--border-color, #dee2e6) !important; border-bottom-right-radius: 0 !important; z-index: 10000 !important;}.EasyMDEContainer.fullscreen.sided .editor-preview-side { display: block !important; position: fixed !important; top: var(--easymde-toolbar-height) !important; right: 0 !important; bottom: 0 !important; left: 50vw !important; width: 50vw !important; height: calc(100vh - var(--easymde-toolbar-height)) !important; z-index: 10000 !important; overflow-y: auto !important; overflow-x: hidden !important;}/* Mode sombre - Fullscreen */[data-theme="dark"] .editor-toolbar.fullscreen,[data-bs-theme="dark"] .editor-toolbar.fullscreen { background: var(--dark-bg-primary, #1a1a1a); border-bottom-color: var(--border-color-dark, #333333); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);}[data-theme="dark"] .EasyMDEContainer .CodeMirror-fullscreen,[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-fullscreen,[data-theme="dark"] .EasyMDEContainer.fullscreen .CodeMirror,[data-bs-theme="dark"] .EasyMDEContainer.fullscreen .CodeMirror { background: var(--dark-bg-primary, #1a1a1a); color: var(--dark-text-primary, #e0e0e0);}/* ======================================== 12. APERÇU (PREVIEW) ======================================== */.EasyMDEContainer .editor-preview { border: 1px solid var(--border-color, #dee2e6); border-radius: var(--border-radius, 0.5rem); padding: 1.5rem; background: var(--bg-secondary, #f8f9fa); color: var(--text-primary, #212529); line-height: 1.8; transition: background-color var(--easymde-transition-fast), color var(--easymde-transition-fast);}.EasyMDEContainer .editor-preview-side { position: fixed; bottom: 0; width: 50%; top: var(--easymde-toolbar-height); right: 0; z-index: 9999; overflow: auto; display: none; background: var(--bg-secondary, #f8f9fa); color: var(--text-primary, #212529); border-left: 1px solid var(--border-color, #dee2e6); padding: var(--spacing-xl, 1.5rem); transition: background-color var(--easymde-transition-fast);}.editor-preview-active-side { display: block !important;}.EasyMDEContainer.sided .editor-preview-side { display: block !important; position: fixed !important; top: var(--easymde-toolbar-height) !important; right: 0 !important; bottom: 0 !important; width: 50% !important;}.EasyMDEContainer.sided .CodeMirror { width: 50% !important; border-right: none !important; border-bottom-right-radius: 0 !important;}.editor-preview-full { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 7; overflow: auto; display: none; box-sizing: border-box; background: var(--bg-secondary, #f8f9fa); color: var(--text-primary, #212529);}.editor-preview-active { display: block !important;}.EasyMDEContainer .CodeMirror-sided { width: 50% !important; border-right: none !important; border-bottom-right-radius: 0 !important; position: relative; z-index: 8;}.EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side { flex: 1 1 auto; height: auto; position: static;}/* Mode sombre - Preview */[data-theme="dark"] .editor-preview,[data-theme="dark"] .editor-preview-side,[data-bs-theme="dark"] .EasyMDEContainer .editor-preview,[data-bs-theme="dark"] .EasyMDEContainer .editor-preview-side { background-color: var(--dark-bg-secondary, #121212); color: var(--dark-text-primary, #e0e0e0); border-color: var(--border-color-dark, #333333);}[data-theme="dark"] .editor-preview-full,[data-bs-theme="dark"] .editor-preview-full { background-color: var(--dark-bg-secondary, #121212); color: var(--dark-text-primary, #e0e0e0);}/* ======================================== 13. FORMATAGE MARKDOWN DANS L'APERÇU ======================================== *//* Titres */.editor-preview h1, .editor-preview h2, .editor-preview h3,.editor-preview h4, .editor-preview h5, .editor-preview h6,.message-content h1, .message-content h2, .message-content h3,.message-content h4, .message-content h5, .message-content h6 { color: var(--text-primary, #212529); font-weight: var(--font-weight-semibold, 600); margin-top: var(--spacing-xl, 1.5rem); margin-bottom: var(--spacing-md, 1rem); line-height: 1.3;}/* Paragraphes */.editor-preview > p { margin-top: 0; line-height: 1.8;}/* Liens */.editor-preview a,.message-content a { color: var(--primary-color, #007bff); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--easymde-transition-fast);}.editor-preview a:hover,.message-content a:hover { color: var(--primary-dark, #0056b3);}/* ======================================== 14. BLOCS DE CODE ======================================== */.code-block-wrapper { position: relative; margin-bottom: var(--spacing-lg, 1rem); background-color: var(--bg-tertiary, #e9ecef); border: 1px solid var(--border-color, #dee2e6); border-radius: var(--border-radius, 0.5rem); overflow: hidden;}.editor-preview pre,.message-content pre,pre.code-block { background: var(--bg-tertiary, #e9ecef); border: 1px solid var(--border-color, #dee2e6); border-radius: var(--border-radius, 0.5rem); padding: var(--spacing-lg, 1rem); margin-bottom: var(--spacing-lg, 1rem); overflow-x: auto; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; font-size: 14px; line-height: 1.6; color: var(--text-primary, #212529); white-space: pre !important; word-wrap: normal !important; word-break: normal !important;}.editor-preview pre code,.message-content pre code,pre.code-block code { background: none; padding: 0; border: none; color: inherit; display: block; white-space: pre !important; font-family: inherit; font-size: inherit; line-height: inherit;}/* Code inline */.editor-preview code,.message-content code:not(pre code) { background-color: var(--bg-tertiary, #e9ecef); color: var(--primary-color, #007bff); padding: 0.2em 0.4em; border-radius: var(--border-radius-sm, 0.25rem); font-size: 85%; font-family: 'SF Mono', Monaco, Consolas, monospace;}/* Mode sombre - Blocs de code */[data-theme="dark"] .code-block-wrapper,[data-bs-theme="dark"] .code-block-wrapper { background-color: #1e1e1e !important; border-color: #333 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);}[data-theme="dark"] .editor-preview pre,[data-theme="dark"] .message-content pre,[data-theme="dark"] pre.code-block,[data-bs-theme="dark"] .editor-preview pre,[data-bs-theme="dark"] .message-content pre,[data-bs-theme="dark"] pre.code-block { background-color: #1e1e1e !important; border-color: #333 !important; color: #d4d4d4 !important;}[data-theme="dark"] .editor-preview pre code,[data-theme="dark"] .message-content pre code,[data-theme="dark"] pre.code-block code,[data-bs-theme="dark"] .editor-preview pre code,[data-bs-theme="dark"] .message-content pre code,[data-bs-theme="dark"] pre.code-block code { background: none !important; color: #d4d4d4 !important;}[data-theme="dark"] .editor-preview code,[data-theme="dark"] .message-content code:not(pre code),[data-bs-theme="dark"] .editor-preview code,[data-bs-theme="dark"] .message-content code:not(pre code) { background-color: var(--dark-bg-tertiary, #2a2a2a); color: var(--primary-color, #4D698E);}/* Mode sombre - Code content et accordéon code */[data-theme="dark"] .code-content,[data-theme="dark"] .code-content pre,[data-theme="dark"] .accordion-body pre,[data-bs-theme="dark"] .code-content,[data-bs-theme="dark"] .code-content pre,[data-bs-theme="dark"] .accordion-body pre { background-color: #1e1e1e !important; color: #d4d4d4 !important;}[data-theme="dark"] .code-content pre code,[data-theme="dark"] .accordion-body pre code,[data-bs-theme="dark"] .code-content pre code,[data-bs-theme="dark"] .accordion-body pre code { background: none !important; color: #d4d4d4 !important;}/* ======================================== 15. BOUTON COPIER CODE ======================================== */.code-block-wrapper .copy-code-btn,.copy-button,.btn-copy-code-block { position: absolute; top: 8px; right: 8px; background: var(--bg-secondary, #f8f9fa); border: 1px solid var(--border-color, #dee2e6); color: var(--text-secondary, #6c757d); padding: 0.5rem 0.75rem; border-radius: var(--border-radius-sm, 0.25rem); font-size: 0.875rem; cursor: pointer; opacity: 0; transition: all var(--easymde-transition-fast); z-index: 10;}.code-block-wrapper:hover .copy-code-btn,.code-block-wrapper:hover .copy-button { opacity: 1;}.code-block-wrapper .copy-code-btn:hover,.copy-button:hover,.btn-copy-code-block:hover { background: var(--primary-color, #007bff); color: var(--text-white, #ffffff); border-color: var(--primary-color, #007bff); transform: translateY(-1px);}.code-block-wrapper .copy-code-btn.copied { background: var(--success-color, #28a745); color: white; border-color: var(--success-color, #28a745);}.code-block-wrapper .copy-code-btn.copy-error { background: var(--warning-color, #ffc107); color: #000; border-color: var(--warning-color, #ffc107);}.copy-icon { width: 16px; height: 16px; margin-right: 0.5rem; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}/* Mode sombre - Bouton copier */[data-theme="dark"] .copy-button,[data-bs-theme="dark"] .copy-button { background: #2a2a2a; border-color: #444; color: #b0b0b0;}[data-theme="dark"] .copy-button:hover,[data-bs-theme="dark"] .copy-button:hover { background: #4a9eff; border-color: #4a9eff; color: #ffffff; box-shadow: 0 4px 8px rgba(74, 158, 255, 0.3);}[data-theme="dark"] .copy-icon,[data-bs-theme="dark"] .copy-icon { stroke: currentColor;}/* ======================================== 16. CITATIONS (BLOCKQUOTE) ======================================== */.editor-preview blockquote,.message-content blockquote { background-color: var(--bg-secondary, #f8f9fa); border-left: 4px solid var(--primary-color, #007bff); padding: var(--spacing-lg, 1rem); margin: var(--spacing-lg, 1rem) 0; border-radius: var(--border-radius-sm, 0.25rem); font-style: italic; color: var(--text-secondary, #6c757d);}[data-theme="dark"] .editor-preview blockquote,[data-theme="dark"] .message-content blockquote,[data-bs-theme="dark"] .editor-preview blockquote,[data-bs-theme="dark"] .message-content blockquote { background-color: var(--dark-bg-tertiary, #2a2a2a); border-left-color: var(--primary-color, #4D698E); color: var(--dark-text-secondary, #b0b0b0);}/* ======================================== 17. TABLEAUX ======================================== */.editor-preview table,.message-content table { border-collapse: collapse; width: 100%; margin: var(--spacing-lg, 1rem) 0;}.editor-preview table td,.editor-preview table th,.message-content table td,.message-content table th { border: 1px solid var(--border-color, #dee2e6); padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem); text-align: left;}.editor-preview table th,.message-content table th { background-color: var(--bg-tertiary, #e9ecef); font-weight: var(--font-weight-semibold, 600);}.editor-preview table tr:nth-child(even),.message-content table tr:nth-child(even) { background-color: var(--bg-secondary, #f8f9fa);}/* Mode sombre - Tableaux */[data-theme="dark"] .editor-preview table th,[data-theme="dark"] .message-content table th,[data-bs-theme="dark"] .editor-preview table th,[data-bs-theme="dark"] .message-content table th { background-color: var(--dark-bg-tertiary, #2a2a2a);}[data-theme="dark"] .editor-preview table tr:nth-child(even),[data-theme="dark"] .message-content table tr:nth-child(even),[data-bs-theme="dark"] .editor-preview table tr:nth-child(even),[data-bs-theme="dark"] .message-content table tr:nth-child(even) { background-color: var(--dark-bg-tertiary, #2a2a2a);}/* ======================================== 18. COLORATION SYNTAXIQUE CODEMIRROR ======================================== */.cm-s-easymde .cm-header-1 { font-size: 2rem; color: var(--text-primary, #212529); font-weight: var(--font-weight-bold, 700);}.cm-s-easymde .cm-header-2 { font-size: 1.75rem; color: var(--text-primary, #212529); font-weight: var(--font-weight-bold, 700);}.cm-s-easymde .cm-header-3 { font-size: 1.5rem; color: var(--text-primary, #212529); font-weight: var(--font-weight-semibold, 600);}.cm-s-easymde .cm-header-4,.cm-s-easymde .cm-header-5,.cm-s-easymde .cm-header-6 { color: var(--text-primary, #212529); font-weight: var(--font-weight-semibold, 600);}.cm-s-easymde .cm-comment { background: var(--bg-tertiary, #e9ecef); border-radius: var(--border-radius-sm, 0.25rem); color: var(--text-secondary, #6c757d); padding: 2px 4px;}.cm-s-easymde .cm-string { color: var(--primary-color, #007bff);}.cm-s-easymde .cm-link { color: var(--primary-color, #007bff); text-decoration: underline;}.cm-s-easymde .cm-url { color: var(--text-secondary, #6c757d);}.cm-s-easymde .cm-quote { color: var(--text-secondary, #6c757d); font-style: italic; border-left: 3px solid var(--primary-color, #007bff); padding-left: var(--spacing-sm, 0.5rem); margin-left: var(--spacing-xs, 0.25rem);}/* ======================================== 19. MENTIONS @USERNAME ======================================== */.user-mention { font-weight: var(--font-weight-semibold, 600); background-color: var(--secondary-color, #6c757d); color: var(--primary-color, #007bff); padding: 2px 4px; border-radius: var(--border-radius-sm, 0.25rem); cursor: pointer; transition: all var(--easymde-transition-fast); text-decoration: none;}.user-mention:hover { background-color: var(--primary-color, #007bff); color: var(--text-white, #ffffff); transform: translateY(-1px);}.user-mention-resolved { background-color: transparent; color: var(--primary-color, #007bff); text-decoration: none; border-bottom: 1px solid currentColor; padding: 2px 4px; border-radius: var(--border-radius-sm, 0.25rem); transition: all var(--easymde-transition-fast);}.user-mention-resolved:hover { background-color: var(--secondary-color, #6c757d); color: var(--primary-dark, #0056b3);}.user-mention-not-found { background-color: rgba(220, 53, 69, 0.2); text-decoration: line-through; cursor: not-allowed; color: var(--danger-color, #dc3545);}.user-mention-error { background-color: rgba(255, 193, 7, 0.3); border: 1px dashed var(--warning-color, #ffc107); color: var(--text-primary, #212529);}/* ======================================== 20. SÉLECTEUR D'EMOJIS ======================================== */.easymde-emoji-picker { background-color: var(--bg-secondary, #ffffff); border: 1px solid var(--border-color, #dee2e6); border-radius: var(--border-radius, 0.375rem); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 0.5rem; max-width: 320px; max-height: 300px; overflow-y: auto; z-index: 10000 !important; display: block !important; position: fixed !important; visibility: visible !important; opacity: 1 !important;}.easymde-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem;}.easymde-emoji-item { background: transparent; border: 1px solid transparent; border-radius: var(--border-radius, 0.25rem); padding: 0.5rem; font-size: 1.25rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem;}.easymde-emoji-item:hover { background-color: var(--bg-tertiary, #f8f9fa); border-color: var(--border-color, #dee2e6); transform: scale(1.1);}.easymde-emoji-item:active { transform: scale(0.95);}/* Mode sombre - Emoji picker */[data-theme="dark"] .easymde-emoji-picker,[data-bs-theme="dark"] .easymde-emoji-picker { background-color: var(--dark-bg-secondary, #2d2d2d); border-color: var(--border-color-dark, #495057); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);}[data-theme="dark"] .easymde-emoji-item:hover,[data-bs-theme="dark"] .easymde-emoji-item:hover { background-color: var(--dark-bg-tertiary, #3d3d3d); border-color: var(--border-color-dark, #6c757d);}/* ======================================== 21. DROPDOWN MENUS ======================================== */.editor-toolbar .easymde-dropdown { position: relative; background: var(--bg-primary, #ffffff); border-radius: var(--border-radius-sm, 0.25rem); border: 1px solid var(--border-color, #dee2e6); transition: all var(--easymde-transition-fast);}.editor-toolbar .easymde-dropdown:hover { background: var(--bg-secondary, #f8f9fa); border-color: var(--primary-color, #007bff);}.easymde-dropdown-content { display: block; visibility: hidden; position: absolute; background-color: var(--bg-primary, #ffffff); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: var(--spacing-sm, 0.5rem); z-index: 1050; top: 30px; border: 1px solid var(--border-color, #dee2e6); border-radius: var(--border-radius, 0.375rem);}.easymde-dropdown:focus-within .easymde-dropdown-content { visibility: visible;}.easymde-dropdown-content button { display: block; width: 100%; text-align: left; padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 1rem); color: var(--text-primary, #212529);}.easymde-dropdown-content button:hover { background-color: var(--bg-tertiary, #e9ecef);}/* ======================================== 22. SCROLLBARS PERSONNALISÉES ======================================== */.editor-preview pre::-webkit-scrollbar,.editor-preview-side::-webkit-scrollbar,.CodeMirror-scroll::-webkit-scrollbar,.message-content pre::-webkit-scrollbar,.code-block-wrapper pre::-webkit-scrollbar { width: 8px; height: 8px;}.editor-preview pre::-webkit-scrollbar-track,.editor-preview-side::-webkit-scrollbar-track,.CodeMirror-scroll::-webkit-scrollbar-track,.message-content pre::-webkit-scrollbar-track,.code-block-wrapper pre::-webkit-scrollbar-track { background: var(--bg-secondary, #f8f9fa); border-radius: 4px;}.editor-preview pre::-webkit-scrollbar-thumb,.editor-preview-side::-webkit-scrollbar-thumb,.CodeMirror-scroll::-webkit-scrollbar-thumb,.message-content pre::-webkit-scrollbar-thumb,.code-block-wrapper pre::-webkit-scrollbar-thumb { background: var(--text-muted, #868e96); border-radius: 4px;}.editor-preview pre::-webkit-scrollbar-thumb:hover,.editor-preview-side::-webkit-scrollbar-thumb:hover,.CodeMirror-scroll::-webkit-scrollbar-thumb:hover,.message-content pre::-webkit-scrollbar-thumb:hover,.code-block-wrapper pre::-webkit-scrollbar-thumb:hover { background: var(--text-secondary, #6c757d);}/* Mode sombre - Scrollbars */[data-theme="dark"] .code-block-wrapper pre::-webkit-scrollbar-track,[data-bs-theme="dark"] .code-block-wrapper pre::-webkit-scrollbar-track { background: #252525;}[data-theme="dark"] .code-block-wrapper pre::-webkit-scrollbar-thumb,[data-bs-theme="dark"] .code-block-wrapper pre::-webkit-scrollbar-thumb { background: #4a4a4a;}[data-theme="dark"] .code-block-wrapper pre::-webkit-scrollbar-thumb:hover,[data-bs-theme="dark"] .code-block-wrapper pre::-webkit-scrollbar-thumb:hover { background: #5a5a5a;}/* ======================================== 23. VÉRIFICATEUR ORTHOGRAPHIQUE ======================================== */.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { background: rgba(255, 0, 0, 0.15); border-bottom: 2px dotted rgba(255, 0, 0, 0.5);}[data-theme="dark"] .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word),[data-bs-theme="dark"] .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { background: rgba(255, 100, 100, 0.2); border-bottom-color: rgba(255, 100, 100, 0.6);}/* ======================================== 24. ANIMATIONS ======================================== */@keyframes easymde-fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }}@keyframes flashHighlight { 0%, 100% { background-color: transparent; } 50% { background-color: var(--secondary-color, #6c757d); }}.highlight-flash { animation: flashHighlight 2s ease-in-out;}/* ======================================== 25. RESPONSIVE - MOBILE ======================================== */@media only screen and (max-width: 767.98px) { .EasyMDEContainer .editor-toolbar { padding: 0.5rem; gap: 0.125rem; } .EasyMDEContainer .editor-toolbar button, .EasyMDEContainer .editor-toolbar a { padding: 0.375rem 0.5rem; min-width: 1.75rem; height: 1.75rem; font-size: 0.75rem; } .editor-toolbar i.no-mobile { display: none; } .EasyMDEContainer .CodeMirror { padding: var(--spacing-md, 0.75rem); font-size: 13px; min-height: 300px; } .EasyMDEContainer .CodeMirror-scroll { min-height: 300px; } .editor-preview, .editor-preview-side { padding: var(--spacing-lg, 1rem); } .editor-preview pre, .message-content pre { padding: var(--spacing-md, 0.75rem); font-size: 13px; }}/* ======================================== 26. COMPATIBILITÉ CONTENEURS PARENTS ======================================== */.reply-form-flatboard,.card,.card-body { position: relative; overflow: visible;}body.editor-fullscreen-active .container,body.editor-fullscreen-active .container-fluid,body.editor-fullscreen-active .row,body.editor-fullscreen-active .col,body.editor-fullscreen-active [class*="col-"],body.editor-fullscreen-active main,body.editor-fullscreen-active .card,body.editor-fullscreen-active .card-body { overflow: visible !important; position: static !important;}body.editor-fullscreen-active .EasyMDEContainer.fullscreen { display: block !important; visibility: visible !important; opacity: 1 !important;}.reply-form-flatboard .EasyMDEContainer.fullscreen,.reply-form-flatboard .CodeMirror-fullscreen,.card .EasyMDEContainer.fullscreen,.card .CodeMirror-fullscreen { position: fixed !important; z-index: 9999 !important; top: 50px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; border-radius: 0 !important;}.reply-form-flatboard .editor-toolbar.fullscreen,.card .editor-toolbar.fullscreen { position: fixed !important; z-index: 10000 !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important;}/* ======================================== 27. COLORATION SYNTAXIQUE HIGHLIGHT.JS (MODE SOMBRE) ======================================== */[data-theme="dark"] .hljs-string,[data-bs-theme="dark"] .hljs-string { color: #ce9178;}[data-theme="dark"] .hljs-number,[data-bs-theme="dark"] .hljs-number { color: #b5cea8;}[data-theme="dark"] .hljs-literal,[data-bs-theme="dark"] .hljs-literal { color: #569cd6;}[data-theme="dark"] .hljs-attr,[data-bs-theme="dark"] .hljs-attr { color: #9cdcfe;}/* ======================================== 28. GUTTERS CODEMIRROR ======================================== */[data-theme="dark"] .CodeMirror-gutters,[data-bs-theme="dark"] .CodeMirror-gutters { background-color: var(--dark-bg-tertiary, #2a2a2a); border-right-color: var(--border-color-dark, #333333);}[data-theme="dark"] .CodeMirror-activeline-background,[data-bs-theme="dark"] .CodeMirror-activeline-background { background: var(--dark-bg-tertiary, #2a2a2a);}/* ======================================== 29. HEADER DES BLOCS DE CODE (LANGAGE) ======================================== */.code-block-header { background: linear-gradient(to bottom, var(--bg-secondary, #f8f9fa), var(--bg-tertiary, #e9ecef)); border-bottom: 1px solid var(--border-color, #dee2e6); padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between;}.language-icon { background: linear-gradient(135deg, var(--primary-color, #007bff), var(--primary-dark, #0056b3)); color: var(--text-white, #ffffff); font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 2px 4px rgba(var(--primary-rgb, 0, 123, 255), 0.3);}.code-content { background-color: var(--bg-tertiary, #e9ecef); padding: 0; margin: 0;}/* Mode sombre - Header blocs de code */[data-theme="dark"] .code-block-header,[data-bs-theme="dark"] .code-block-header { background: linear-gradient(to bottom, #2a2a2a, #252525); border-bottom-color: #333;}[data-theme="dark"] .language-icon,[data-bs-theme="dark"] .language-icon { background: linear-gradient(135deg, #4a9eff, #0070f3); color: #ffffff; box-shadow: 0 2px 4px rgba(74, 158, 255, 0.3);}[data-theme="dark"] .code-content,[data-bs-theme="dark"] .code-content { background-color: #1e1e1e;}/* ======================================== 30. ACCORDÉON BOOTSTRAP (BLOCS DE CODE) ======================================== */.accordion { background-color: transparent; border-radius: var(--border-radius, 0.5rem); overflow: hidden;}.accordion-item { background-color: var(--bg-primary, #ffffff); border: none; border-radius: 0;}.accordion-button { background-color: var(--bg-secondary, #f8f9fa); color: var(--text-primary, #212529); border: none; padding: 1rem; font-weight: 500; transition: all 0.2s ease;}.accordion-button:not(.collapsed) { background-color: var(--bg-tertiary, #e9ecef); color: var(--primary-color, #007bff); box-shadow: none;}.accordion-button:hover { background-color: var(--bg-tertiary, #e9ecef); color: var(--primary-color, #007bff);}.accordion-button::after { filter: brightness(0.8);}.accordion-body { background-color: var(--bg-primary, #ffffff); padding: 0; border-top: 1px solid var(--border-color, #dee2e6);}.accordion-body.code-content { background-color: var(--bg-tertiary, #e9ecef);}/* Mode sombre - Accordéon */[data-theme="dark"] .accordion,[data-bs-theme="dark"] .accordion { background-color: transparent;}[data-theme="dark"] .accordion-item,[data-bs-theme="dark"] .accordion-item { background-color: #1e1e1e;}[data-theme="dark"] .accordion-button,[data-bs-theme="dark"] .accordion-button { background-color: #252525; color: #b0b0b0;}[data-theme="dark"] .accordion-button:not(.collapsed),[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: #2a2a2a; color: #4a9eff;}[data-theme="dark"] .accordion-button:hover,[data-bs-theme="dark"] .accordion-button:hover { background-color: #2a2a2a; color: #4a9eff;}[data-theme="dark"] .accordion-button::after,[data-bs-theme="dark"] .accordion-button::after { filter: brightness(0.7);}[data-theme="dark"] .accordion-body,[data-bs-theme="dark"] .accordion-body { background-color: #1e1e1e; border-top-color: #333;}/* ======================================== 31. FORCE ABSOLUE - WHITE-SPACE PRE ======================================== */.code-block-wrapper pre,.code-block-wrapper pre code,.code-content pre,.code-content pre code,.accordion-body pre,.accordion-body pre code,.hljs,.hljs code,code.hljs { white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-x: auto !important; display: block !important;}/* Force pour mode sombre */body[data-theme="dark"] .code-block-wrapper pre,body[data-bs-theme="dark"] .code-block-wrapper pre,body[data-theme="dark"] .code-content pre,body[data-bs-theme="dark"] .code-content pre { white-space: pre !important; background-color: #1e1e1e !important; color: #d4d4d4 !important;}.editor-toolbar button.upload-image i.fa-image::before { content: "\f0ee"; /* Font Awesome cloud-upload-alt */}