@karbonjs/ui-svelte 0.2.2 → 0.2.4

package/src/editor/RichTextEditor.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte'
-  import type { MediaProvider } from '@karbonjs/ui-core'
+  import type { MediaProvider, MediaFile, EditorTheme } from '@karbonjs/ui-core'
 
   interface Props {
     value: string
     placeholder?: string
     media?: MediaProvider
+    theme?: EditorTheme
     class?: string
   }
 
@@ -13,6 +14,7 @@
     value = $bindable(''),
     placeholder = 'Rédigez votre contenu...',
     media,
+    theme = 'default',
     class: className = ''
   }: Props = $props()
 
@@ -89,13 +91,28 @@
   let elPropsTarget = $state<HTMLElement | null>(null)
 
   // ── Media explorer state ──
-  let mediaFiles = $state<any[]>([])
+  let mediaCurrentPath = $state('')
+  let mediaEntries = $state<MediaFile[]>([])
   let mediaLoading = $state(false)
-  let mediaSearch = $state('')
-  let mediaPage = $state(1)
-  let mediaTotal = $state(0)
-  let mediaSelected = $state<any>(null)
   let mediaUploading = $state(false)
+  let mediaSearch = $state('')
+  let mediaSelected = $state<MediaFile | null>(null)
+  let mediaViewMode = $state<'grid' | 'list'>('grid')
+  let mediaShowNewFolder = $state(false)
+  let mediaNewFolderName = $state('')
+  let mediaDragOver = $state(false)
+
+  const mediaBreadcrumbs = $derived.by(() => {
+    const parts = mediaCurrentPath.split('/').filter(Boolean)
+    return parts.map((part, i) => ({
+      label: part,
+      path: parts.slice(0, i + 1).join('/')
+    }))
+  })
+
+  const mediaFiltered = $derived(
+    mediaSearch ? mediaEntries.filter(e => e.name.toLowerCase().includes(mediaSearch.toLowerCase())) : mediaEntries
+  )
 
   const COLORS = [
     '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff',
@@ -107,10 +124,10 @@
   const FONT_SIZES = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px']
 
   const HTML_RULES: [RegExp, string][] = [
-    [/(&lt;!--[\s\S]*?--&gt;)/g, '<span class="text-gray-600 italic">$1</span>'],
-    [/(&lt;\/?)([\w-]+)/g, '<span class="text-gray-500">$1</span><span class="text-green-400">$2</span>'],
-    [/([\w-]+)(=)(&quot;[^&]*&quot;|&#39;[^&]*&#39;)/g, '<span class="text-blue-400">$1</span><span class="text-gray-500">$2</span><span class="text-sky-300">$3</span>'],
-    [/(&gt;)/g, '<span class="text-gray-500">$1</span>'],
+    [/(&lt;!--[\s\S]*?--&gt;)/g, '<span class="hl-comment">$1</span>'],
+    [/(&lt;\/?)([\w-]+)/g, '<span class="hl-bracket">$1</span><span class="hl-tag">$2</span>'],
+    [/([\w-]+)(=)(&quot;[^&]*&quot;|&#39;[^&]*&#39;)/g, '<span class="hl-attr">$1</span><span class="hl-eq">$2</span><span class="hl-val">$3</span>'],
+    [/(&gt;)/g, '<span class="hl-bracket">$1</span>'],
   ]
 
   /** Escape string for safe HTML attribute insertion */
@@ -118,6 +135,17 @@
     return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   }
 
+  function isImage(entry: MediaFile): boolean {
+    return entry.mime?.startsWith('image/') ?? false
+  }
+
+  function formatSize(bytes: number): string {
+    if (bytes === 0) return '—'
+    if (bytes < 1024) return `${bytes} o`
+    if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} Ko`
+    return `${(bytes / 1048576).toFixed(1)} Mo`
+  }
+
   onMount(() => {
     if (value) editor.innerHTML = value
     updateCounts()
@@ -269,7 +297,7 @@
     if (!files?.length || !media?.upload) return
     imageUploading = true
     try {
-      const result = await media.upload(files[0])
+      const result = await media.upload(files[0], mediaCurrentPath)
       imageUrl = result.url
       imageAlt = files[0].name.replace(/\.[^/.]+$/, '')
     } catch { /* */ } finally { imageUploading = false }
@@ -283,16 +311,31 @@
     value = editor.innerHTML
   }
 
-  function openMediaExplorerForImage() { mediaExplorerContext = 'imageModal'; showImageModal = false; showMediaExplorer = true; browseMedia() }
-  function openMediaExplorerInline() { saveSelection(); mediaExplorerContext = 'editor'; showMediaExplorer = true; browseMedia() }
+  function openMediaExplorerForImage() { mediaExplorerContext = 'imageModal'; showImageModal = false; showMediaExplorer = true; browseMedia(mediaCurrentPath) }
+  function openMediaExplorerInline() { saveSelection(); mediaExplorerContext = 'editor'; showMediaExplorer = true; browseMedia(mediaCurrentPath) }
 
-  async function browseMedia() {
+  // ── Media explorer ──
+  async function browseMedia(path: string) {
     if (!media?.browse) return
     mediaLoading = true
+    mediaSelected = null
     try {
-      const result = await media.browse(mediaPage, mediaSearch)
-      mediaFiles = result.files; mediaTotal = result.total
-    } catch { mediaFiles = [] } finally { mediaLoading = false }
+      const result = await media.browse(path, mediaSearch || undefined)
+      mediaCurrentPath = result.path ?? path
+      mediaEntries = result.entries ?? []
+    } catch { mediaEntries = [] } finally { mediaLoading = false }
+  }
+
+  function mediaNavigateTo(path: string) { mediaCurrentPath = path; browseMedia(path) }
+  function mediaGoUp() { const parts = mediaCurrentPath.split('/').filter(Boolean); parts.pop(); mediaNavigateTo(parts.join('/')) }
+
+  function handleMediaEntryClick(entry: MediaFile) {
+    if (entry.is_dir) mediaNavigateTo(entry.path)
+    else mediaSelected = mediaSelected?.path === entry.path ? null : entry
+  }
+
+  function handleMediaEntryDblClick(entry: MediaFile) {
+    if (!entry.is_dir && entry.url) handleMediaSelect(entry.url)
   }
 
   function handleMediaSelect(url: string) {
@@ -307,6 +350,27 @@
     }
   }
 
+  async function mediaHandleUpload(files: FileList | null) {
+    if (!files?.length || !media?.upload) return
+    mediaUploading = true
+    try {
+      for (const file of files) await media.upload(file, mediaCurrentPath)
+      await browseMedia(mediaCurrentPath)
+    } catch { } finally { mediaUploading = false; mediaDragOver = false }
+  }
+
+  function mediaHandleDrop(e: DragEvent) { e.preventDefault(); mediaDragOver = false; mediaHandleUpload(e.dataTransfer?.files ?? null) }
+
+  async function mediaCreateFolder() {
+    if (!mediaNewFolderName.trim() || !media?.createFolder) return
+    try {
+      const path = mediaCurrentPath ? `${mediaCurrentPath}/${mediaNewFolderName}` : mediaNewFolderName
+      await media.createFolder(path)
+      mediaShowNewFolder = false; mediaNewFolderName = ''
+      await browseMedia(mediaCurrentPath)
+    } catch { }
+  }
+
   // ── Table ──
   function openTableModal() { saveSelection(); tableRows = 3; tableCols = 3; showTableModal = true }
 
@@ -353,10 +417,10 @@
     if (!findText) return
     const sel = window.getSelection(); const range = document.createRange()
     const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT)
-    let node: Node | null; let found = false
+    let node: Node | null
     while ((node = walker.nextNode())) {
       const idx = (node.textContent ?? '').toLowerCase().indexOf(findText.toLowerCase())
-      if (idx >= 0) { range.setStart(node, idx); range.setEnd(node, idx + findText.length); sel?.removeAllRanges(); sel?.addRange(range); found = true; break }
+      if (idx >= 0) { range.setStart(node, idx); range.setEnd(node, idx + findText.length); sel?.removeAllRanges(); sel?.addRange(range); break }
     }
   }
 
@@ -420,124 +484,137 @@
   function handleSourceInput() { value = sourceCode; updateLineNumbers() }
   function handleSourceScroll() { if (lineNumbers && sourceEl) lineNumbers.scrollTop = sourceEl.scrollTop }
   function insertColor(color: string) { exec('foreColor', color); showColorPicker = false }
-  function isActive(cmd: string): string { return activeFormats.has(cmd) ? 'bg-violet-500/15 text-violet-400' : 'text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]' }
-
-  const btnClass = 'flex items-center justify-center min-w-[32px] h-8 rounded-md transition-all cursor-pointer border-none bg-transparent px-1'
-  const sepClass = 'w-px h-[22px] bg-[var(--karbon-border)] mx-0.5 shrink-0'
-  const modalOverlay = 'fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm'
-  const modalBox = 'w-full rounded-xl border border-[var(--karbon-border)] bg-[var(--karbon-bg-card)] p-6 shadow-2xl'
-  const modalInput = 'block w-full rounded-lg border border-[var(--karbon-border-input)] bg-[var(--karbon-bg-input)] text-[var(--karbon-text)] px-3 py-2 text-sm outline-none focus:border-[var(--karbon-border-input-focus)] transition-colors'
-  const modalLabel = 'block text-xs font-medium text-[var(--karbon-text-4)]'
-  const modalBtnCancel = 'rounded-lg border border-[var(--karbon-border)] px-3 py-1.5 text-xs text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)]'
-  const modalBtnPrimary = 'rounded-lg bg-violet-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-violet-700 disabled:opacity-40'
+  function isActive(cmd: string): string { return activeFormats.has(cmd) ? 'rte-btn rte-btn-active' : 'rte-btn' }
 </script>
-<div role="toolbar" aria-label="Éditeur de texte riche" class="rounded-xl border border-[var(--karbon-border)] bg-[var(--karbon-bg-card)] shadow-sm overflow-hidden {fullscreen ? 'fixed inset-0 z-40 rounded-none flex flex-col' : ''} {className}">
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div role="toolbar" aria-label="Éditeur de texte riche" class="rte-wrapper {fullscreen ? 'fixed inset-0 z-40 rounded-none flex flex-col' : ''} {className}">
 
   <!-- ═══ TOOLBAR ═══ -->
-  <div class="flex flex-wrap items-center gap-1 border-b border-[var(--karbon-border)] bg-[var(--karbon-bg-2)]/50 px-3 py-2 select-none">
-    <button type="button" onclick={() => exec('undo')} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Annuler (Ctrl+Z)" aria-label="Annuler">
+  <div class="rte-toolbar">
+    <button type="button" onclick={() => exec('undo')} class="rte-btn" title="Annuler (Ctrl+Z)" aria-label="Annuler">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>
     </button>
-    <button type="button" onclick={() => exec('redo')} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Rétablir" aria-label="Rétablir">
+    <button type="button" onclick={() => exec('redo')} class="rte-btn" title="Rétablir" aria-label="Rétablir">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/></svg>
     </button>
-    <span class={sepClass}></span>
+    <span class="rte-sep"></span>
 
-    <button type="button" onclick={() => exec('formatBlock', 'p')} class="{btnClass} {isActive('p')}" title="Paragraphe" aria-label="Paragraphe">
+    <button type="button" onclick={() => exec('formatBlock', 'p')} class={isActive('p')} title="Paragraphe" aria-label="Paragraphe">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 4v16"/><path d="M17 4v16"/><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13"/></svg>
     </button>
-    <button type="button" onclick={() => exec('formatBlock', 'h2')} class="{btnClass} text-xs font-bold {isActive('h2')}" title="Titre 2">H2</button>
-    <button type="button" onclick={() => exec('formatBlock', 'h3')} class="{btnClass} text-xs font-bold {isActive('h3')}" title="Titre 3">H3</button>
-    <button type="button" onclick={() => exec('formatBlock', 'h4')} class="{btnClass} text-xs font-bold {isActive('h4')}" title="Titre 4">H4</button>
-    <span class={sepClass}></span>
+    <button type="button" onclick={() => exec('formatBlock', 'h2')} class="{isActive('h2')} text-xs font-bold" title="Titre 2">H2</button>
+    <button type="button" onclick={() => exec('formatBlock', 'h3')} class="{isActive('h3')} text-xs font-bold" title="Titre 3">H3</button>
+    <button type="button" onclick={() => exec('formatBlock', 'h4')} class="{isActive('h4')} text-xs font-bold" title="Titre 4">H4</button>
+    <span class="rte-sep"></span>
 
-    <select onchange={(e) => setFontSize(e.currentTarget.value)} class="bg-[var(--karbon-bg-input)] border border-[var(--karbon-border-input)] text-[var(--karbon-text-3)] rounded-[5px] px-1 py-0.5 text-[0.6875rem] outline-none cursor-pointer" title="Taille">
+    <select onchange={(e) => setFontSize(e.currentTarget.value)} class="rte-select" title="Taille">
       <option value="">Taille</option>
       {#each FONT_SIZES as size}<option value={size}>{size}</option>{/each}
     </select>
-    <span class={sepClass}></span>
+    <span class="rte-sep"></span>
 
-    <button type="button" onclick={() => exec('bold')} class="{btnClass} {isActive('bold')}" title="Gras (Ctrl+B)" aria-label="Gras">
+    <button type="button" onclick={() => exec('bold')} class={isActive('bold')} title="Gras (Ctrl+B)" aria-label="Gras">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/></svg>
     </button>
-    <button type="button" onclick={() => exec('italic')} class="{btnClass} {isActive('italic')}" title="Italique (Ctrl+I)" aria-label="Italique">
+    <button type="button" onclick={() => exec('italic')} class={isActive('italic')} title="Italique (Ctrl+I)" aria-label="Italique">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
     </button>
-    <button type="button" onclick={() => exec('underline')} class="{btnClass} {isActive('underline')}" title="Souligné (Ctrl+U)" aria-label="Souligné">
+    <button type="button" onclick={() => exec('underline')} class={isActive('underline')} title="Souligné (Ctrl+U)" aria-label="Souligné">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
     </button>
-    <button type="button" onclick={() => exec('strikeThrough')} class="{btnClass} {isActive('strikeThrough')}" title="Barré" aria-label="Barré">
+    <button type="button" onclick={() => exec('strikeThrough')} class={isActive('strikeThrough')} title="Barré" aria-label="Barré">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
     </button>
-    <span class={sepClass}></span>
+    <button type="button" onclick={() => exec('subscript')} class={isActive('subscript')} title="Indice" aria-label="Indice">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 5 8 8"/><path d="m12 5-8 8"/><path d="M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07"/></svg>
+    </button>
+    <button type="button" onclick={() => exec('superscript')} class={isActive('superscript')} title="Exposant" aria-label="Exposant">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 19 8-8"/><path d="m12 19-8-8"/><path d="M20 9h-4c0-1.5.44-2 1.5-2.5S20 5.33 20 4c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07"/></svg>
+    </button>
+    <span class="rte-sep"></span>
 
+    <!-- Color -->
     <div class="relative">
-      <button type="button" onclick={() => showColorPicker = !showColorPicker} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Couleur" aria-label="Couleur du texte">
+      <button type="button" onclick={() => showColorPicker = !showColorPicker} class="rte-btn" title="Couleur" aria-label="Couleur du texte">
         <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z"/><path d="m5 2 5 5"/><path d="M2 13h15"/><path d="M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z"/></svg>
       </button>
       {#if showColorPicker}
-        <div class="absolute left-0 top-full z-20 mt-1 grid grid-cols-8 gap-1 rounded-lg border border-[var(--karbon-border)] bg-[var(--karbon-bg-card)] p-2 shadow-xl">
-          {#each COLORS as color}<button type="button" onclick={() => insertColor(color)} class="h-5 w-5 rounded border border-[var(--karbon-border)] hover:scale-125 transition-transform cursor-pointer" style="background-color: {color}" aria-label="Couleur {color}"></button>{/each}
+        <div class="rte-color-grid">
+          {#each COLORS as color}<button type="button" onclick={() => insertColor(color)} class="rte-color-swatch" style="background-color: {color}" aria-label="Couleur {color}"></button>{/each}
         </div>
       {/if}
     </div>
-    <button type="button" onclick={() => exec('removeFormat')} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Effacer formatage" aria-label="Effacer le formatage">
+    <button type="button" onclick={() => exec('removeFormat')} class="rte-btn" title="Effacer formatage" aria-label="Effacer le formatage">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 21a4.6 4.6 0 0 1 0-9h10a4.6 4.6 0 1 1 0 9H7Z"/><path d="m3 3 18 18"/></svg>
     </button>
-    <span class={sepClass}></span>
+    <span class="rte-sep"></span>
 
-    <button type="button" onclick={() => exec('justifyLeft')} class="{btnClass} {isActive('justifyLeft')}" title="Gauche" aria-label="Aligner à gauche">
+    <!-- Alignment -->
+    <button type="button" onclick={() => exec('justifyLeft')} class={isActive('justifyLeft')} title="Gauche" aria-label="Aligner à gauche">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
     </button>
-    <button type="button" onclick={() => exec('justifyCenter')} class="{btnClass} {isActive('justifyCenter')}" title="Centre" aria-label="Centrer">
+    <button type="button" onclick={() => exec('justifyCenter')} class={isActive('justifyCenter')} title="Centre" aria-label="Centrer">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="17" x2="7" y1="12" y2="12"/><line x1="19" x2="5" y1="18" y2="18"/></svg>
     </button>
-    <button type="button" onclick={() => exec('justifyRight')} class="{btnClass} {isActive('justifyRight')}" title="Droite" aria-label="Aligner à droite">
+    <button type="button" onclick={() => exec('justifyRight')} class={isActive('justifyRight')} title="Droite" aria-label="Aligner à droite">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="21" x2="9" y1="12" y2="12"/><line x1="21" x2="7" y1="18" y2="18"/></svg>
     </button>
-    <span class={sepClass}></span>
+    <button type="button" onclick={() => exec('justifyFull')} class={isActive('justifyFull')} title="Justifier" aria-label="Justifier">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="21" x2="3" y1="12" y2="12"/><line x1="21" x2="3" y1="18" y2="18"/></svg>
+    </button>
+    <span class="rte-sep"></span>
 
-    <button type="button" onclick={() => exec('insertUnorderedList')} class="{btnClass} {isActive('insertunorderedlist')}" title="Puces" aria-label="Liste à puces">
+    <!-- Lists & blocks -->
+    <button type="button" onclick={() => exec('insertUnorderedList')} class={isActive('insertunorderedlist')} title="Puces" aria-label="Liste à puces">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
     </button>
-    <button type="button" onclick={() => exec('insertOrderedList')} class="{btnClass} {isActive('insertorderedlist')}" title="Numéros" aria-label="Liste numérotée">
+    <button type="button" onclick={() => exec('insertOrderedList')} class={isActive('insertorderedlist')} title="Numéros" aria-label="Liste numérotée">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
     </button>
-    <button type="button" onclick={() => exec('formatBlock', 'blockquote')} class="{btnClass} {isActive('blockquote')}" title="Citation" aria-label="Citation">
+    <button type="button" onclick={() => exec('indent')} class="rte-btn" title="Indenter" aria-label="Indenter">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 8 7 12 3 16"/><line x1="21" x2="11" y1="12" y2="12"/><line x1="21" x2="11" y1="6" y2="6"/><line x1="21" x2="11" y1="18" y2="18"/></svg>
+    </button>
+    <button type="button" onclick={() => exec('outdent')} class="rte-btn" title="Désindenter" aria-label="Désindenter">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 8 3 12 7 16"/><line x1="21" x2="11" y1="12" y2="12"/><line x1="21" x2="11" y1="6" y2="6"/><line x1="21" x2="11" y1="18" y2="18"/></svg>
+    </button>
+    <button type="button" onclick={() => exec('formatBlock', 'blockquote')} class={isActive('blockquote')} title="Citation" aria-label="Citation">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z"/></svg>
     </button>
-    <button type="button" onclick={() => exec('insertHTML', '<hr />')} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Séparateur" aria-label="Séparateur">
+    <button type="button" onclick={() => exec('formatBlock', 'pre')} class="rte-btn" title="Bloc de code" aria-label="Bloc de code"><code class="text-[11px]">&lt;/&gt;</code></button>
+    <button type="button" onclick={() => exec('insertHTML', '<hr />')} class="rte-btn" title="Séparateur" aria-label="Séparateur">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
     </button>
-    <span class={sepClass}></span>
+    <span class="rte-sep"></span>
 
-    <button type="button" onclick={openLinkModal} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Lien (Ctrl+K)" aria-label="Insérer un lien">
+    <!-- Insert -->
+    <button type="button" onclick={openLinkModal} class="rte-btn" title="Lien (Ctrl+K)" aria-label="Insérer un lien">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
     </button>
-    <button type="button" onclick={openImageModal} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Image" aria-label="Insérer une image">
+    <button type="button" onclick={openImageModal} class="rte-btn" title="Image" aria-label="Insérer une image">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
     </button>
     {#if media}
-      <button type="button" onclick={openMediaExplorerInline} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Médias" aria-label="Explorer les médias">
+      <button type="button" onclick={openMediaExplorerInline} class="rte-btn" title="Médias" aria-label="Explorer les médias">
         <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>
       </button>
     {/if}
-    <button type="button" onclick={openTableModal} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Tableau" aria-label="Insérer un tableau">
+    <button type="button" onclick={openTableModal} class="rte-btn" title="Tableau" aria-label="Insérer un tableau">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
     </button>
-    <button type="button" onclick={openEmbedModal} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Vidéo / Embed" aria-label="Insérer une vidéo">
+    <button type="button" onclick={openEmbedModal} class="rte-btn" title="Vidéo / Embed" aria-label="Insérer une vidéo">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>
     </button>
 
     <div class="flex-1"></div>
 
-    <button type="button" onclick={() => showFindReplace = !showFindReplace} class="{btnClass} {showFindReplace ? 'bg-violet-500/15 text-violet-400' : 'text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]'}" title="Rechercher (Ctrl+H)" aria-label="Rechercher et remplacer">
+    <button type="button" onclick={() => showFindReplace = !showFindReplace} class="{showFindReplace ? 'rte-btn rte-btn-active' : 'rte-btn'}" title="Rechercher (Ctrl+H)" aria-label="Rechercher et remplacer">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
     </button>
-    <button type="button" onclick={toggleSource} class="{btnClass} {sourceMode ? 'bg-violet-500/15 text-violet-400' : 'text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]'}" title="Source" aria-label="Mode source HTML">
+    <button type="button" onclick={toggleSource} class="{sourceMode ? 'rte-btn rte-btn-active' : 'rte-btn'}" title="Source" aria-label="Mode source HTML">
       <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m10 13-2 2 2 2"/><path d="m14 17 2-2-2-2"/></svg>
     </button>
-    <button type="button" onclick={() => fullscreen = !fullscreen} class="{btnClass} text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" title="Plein écran" aria-label="Plein écran">
+    <button type="button" onclick={() => fullscreen = !fullscreen} class="rte-btn" title="Plein écran" aria-label="Plein écran">
       {#if fullscreen}
         <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></svg>
       {:else}
@@ -548,13 +625,13 @@
 
   <!-- ═══ FIND/REPLACE BAR ═══ -->
   {#if showFindReplace}
-    <div class="flex items-center gap-2 border-b border-[var(--karbon-border)] bg-[var(--karbon-bg-2)]/30 px-4 py-2">
-      <input type="text" bind:value={findText} placeholder="Rechercher..." class="{modalInput} w-40 !py-1 !px-2 !text-xs" onkeydown={(e) => { if (e.key === 'Enter') findNext() }} />
-      <input type="text" bind:value={replaceText} placeholder="Remplacer..." class="{modalInput} w-40 !py-1 !px-2 !text-xs" />
-      <button type="button" onclick={findNext} class="bg-[var(--karbon-bg-2)] border border-[var(--karbon-border)] text-[var(--karbon-text-3)] rounded-md px-2.5 py-1 text-[0.6875rem] cursor-pointer hover:bg-[var(--karbon-bg-card)] hover:text-[var(--karbon-text)] transition-all">Suivant</button>
-      <button type="button" onclick={replaceNext} class="bg-[var(--karbon-bg-2)] border border-[var(--karbon-border)] text-[var(--karbon-text-3)] rounded-md px-2.5 py-1 text-[0.6875rem] cursor-pointer hover:bg-[var(--karbon-bg-card)] hover:text-[var(--karbon-text)] transition-all">Remplacer</button>
-      <button type="button" onclick={replaceAll} class="bg-[var(--karbon-bg-2)] border border-[var(--karbon-border)] text-[var(--karbon-text-3)] rounded-md px-2.5 py-1 text-[0.6875rem] cursor-pointer hover:bg-[var(--karbon-bg-card)] hover:text-[var(--karbon-text)] transition-all">Tout</button>
-      <button type="button" onclick={() => showFindReplace = false} class="{btnClass} text-[var(--karbon-text-4)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)]" aria-label="Fermer">
+    <div class="rte-findbar">
+      <input type="text" bind:value={findText} placeholder="Rechercher..." class="rte-bar-input w-40" onkeydown={(e) => { if (e.key === 'Enter') findNext() }} />
+      <input type="text" bind:value={replaceText} placeholder="Remplacer..." class="rte-bar-input w-40" />
+      <button type="button" onclick={findNext} class="rte-bar-btn">Suivant</button>
+      <button type="button" onclick={replaceNext} class="rte-bar-btn">Remplacer</button>
+      <button type="button" onclick={replaceAll} class="rte-bar-btn">Tout</button>
+      <button type="button" onclick={() => showFindReplace = false} class="rte-btn" aria-label="Fermer">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
       </button>
     </div>
@@ -562,33 +639,18 @@
 
   <!-- ═══ EDITOR / SOURCE ═══ -->
   {#if sourceMode}
-    <div class="relative flex overflow-hidden bg-[#0d1117] {fullscreen ? 'flex-1' : 'h-[500px]'}">
-      <div bind:this={lineNumbers} class="shrink-0 w-12 py-4 text-right font-mono text-[0.8125rem] leading-[1.625] text-[#484f58] select-none overflow-hidden border-r border-[#21262d] [&>div]:pr-3"></div>
-      <div class="absolute top-0 left-12 right-0 bottom-0 p-4 font-mono text-[0.8125rem] leading-[1.625] whitespace-pre overflow-hidden pointer-events-none text-[#c9d1d9]">{@html highlightHtml(sourceCode)}</div>
-      <textarea bind:this={sourceEl} bind:value={sourceCode} oninput={handleSourceInput} onscroll={handleSourceScroll} class="absolute top-0 left-12 right-0 bottom-0 p-4 m-0 border-none outline-none resize-none font-mono text-[0.8125rem] leading-[1.625] text-transparent caret-[#c9d1d9] bg-transparent whitespace-pre overflow-auto [-webkit-text-fill-color:transparent]" spellcheck="false" wrap="off"></textarea>
+    <div class="rte-source-wrapper {fullscreen ? 'flex-1' : ''}" style="{fullscreen ? '' : 'height: 500px;'}">
+      <div bind:this={lineNumbers} class="rte-line-numbers"></div>
+      <div class="rte-highlight-layer" aria-hidden="true">{@html highlightHtml(sourceCode)}</div>
+      <textarea bind:this={sourceEl} bind:value={sourceCode} oninput={handleSourceInput} onscroll={handleSourceScroll} class="rte-source-textarea" spellcheck="false" wrap="off"></textarea>
     </div>
   {:else}
+    <!-- svelte-ignore a11y_interactive_supports_focus -->
     <div
       bind:this={editor} contenteditable="true"
-      class="outline-none px-5 py-5 text-[var(--karbon-text)] text-[0.9375rem] leading-relaxed
-        [&:empty:before]:content-[attr(data-placeholder)] [&:empty:before]:text-[var(--karbon-text-4)] [&:empty:before]:pointer-events-none
-        [&_h2]:text-[1.5em] [&_h2]:font-bold [&_h2]:mt-4 [&_h2]:mb-2
-        [&_h3]:text-[1.25em] [&_h3]:font-semibold [&_h3]:mt-3 [&_h3]:mb-1.5
-        [&_h4]:text-[1.1em] [&_h4]:font-semibold [&_h4]:mt-2.5 [&_h4]:mb-1
-        [&_p]:my-2 [&_a]:text-violet-500 [&_a]:underline
-        [&_blockquote]:border-l-[3px] [&_blockquote]:border-violet-500 [&_blockquote]:pl-4 [&_blockquote]:py-2 [&_blockquote]:my-4 [&_blockquote]:bg-violet-500/5 [&_blockquote]:rounded-r-lg [&_blockquote]:italic
-        [&_pre]:bg-[var(--karbon-bg-2)] [&_pre]:border [&_pre]:border-[var(--karbon-border)] [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-[0.875em] [&_pre]:overflow-x-auto [&_pre]:my-4
-        [&_code]:bg-[var(--karbon-bg-2)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em]
-        [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-4 [&_img]:cursor-pointer [&_img:hover]:outline [&_img:hover]:outline-2 [&_img:hover]:outline-violet-500/50 [&_img:hover]:outline-offset-2
-        [&_hr]:border-none [&_hr]:border-t [&_hr]:border-[var(--karbon-border)] [&_hr]:my-6
-        [&_ul]:pl-6 [&_ul]:my-2 [&_ol]:pl-6 [&_ol]:my-2 [&_li]:my-1
-        [&_table]:w-full [&_table]:border-collapse [&_table]:my-4
-        [&_th]:border [&_th]:border-[var(--karbon-border)] [&_th]:px-3 [&_th]:py-2 [&_th]:bg-[var(--karbon-bg-2)] [&_th]:font-semibold [&_th]:text-[0.875em]
-        [&_td]:border [&_td]:border-[var(--karbon-border)] [&_td]:px-3 [&_td]:py-2
-        [&_.embed-responsive]:relative [&_.embed-responsive]:pb-[56.25%] [&_.embed-responsive]:h-0 [&_.embed-responsive]:overflow-hidden [&_.embed-responsive]:my-4 [&_.embed-responsive]:rounded-lg
-        [&_.embed-responsive_iframe]:absolute [&_.embed-responsive_iframe]:inset-0 [&_.embed-responsive_iframe]:w-full [&_.embed-responsive_iframe]:h-full [&_.embed-responsive_iframe]:border-0
-        {fullscreen ? 'flex-1 overflow-y-auto' : 'min-h-[500px] max-h-[800px] overflow-y-auto'}"
-      data-placeholder={placeholder} role="textbox" tabindex="0" aria-multiline="true"
+      class="rte-content rte-{theme} outline-none {fullscreen ? 'flex-1 overflow-y-auto' : ''}"
+      style="{fullscreen ? '' : 'min-height: 500px; max-height: 800px; overflow-y: auto;'}"
+      data-placeholder={placeholder} role="textbox" aria-multiline="true"
       oninput={handleInput} onkeydown={handleKeydown} onkeyup={updateActiveFormats}
       onmouseup={updateActiveFormats} onpaste={handlePaste}
       oncontextmenu={handleContextMenu} ondblclick={handleDblClick}
@@ -596,7 +658,7 @@
   {/if}
 
   <!-- ═══ STATUS BAR ═══ -->
-  <div class="flex items-center gap-4 border-t border-[var(--karbon-border)] bg-[var(--karbon-bg-2)]/30 px-4 py-1.5 text-[11px] text-[var(--karbon-text-4)]">
+  <div class="rte-statusbar">
     <span>{wordCount} mot{wordCount !== 1 ? 's' : ''}</span>
     <span>{charCount} caractère{charCount !== 1 ? 's' : ''}</span>
     {#if sourceMode}<span class="text-violet-400">Mode source</span>{/if}
@@ -607,71 +669,72 @@
 
 <!-- ═══ CONTEXT MENU ═══ -->
 {#if showContextMenu}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="fixed inset-0 z-[60]" role="presentation" onclick={() => showContextMenu = false} onkeydown={(e) => { if (e.key === "Escape") showContextMenu = false }}></div>
-  <div class="fixed z-[61] w-56 rounded-xl border border-[var(--karbon-border)] bg-[var(--karbon-bg-card)] shadow-2xl shadow-black/30 backdrop-blur-xl overflow-hidden" style="left: {contextPos.x}px; top: {contextPos.y}px;">
-    <div class="px-3 py-2 border-b border-[var(--karbon-border)] bg-[var(--karbon-bg-2)]/50">
-      <span class="text-[11px] font-semibold uppercase tracking-wider text-[var(--karbon-text-4)]">
-        {contextType === 'image' ? 'Image' : contextType === 'link' ? 'Lien' : contextType === 'table' ? 'Tableau' : 'Élément'}
-      </span>
+  <div class="ctx-menu" style="left: {contextPos.x}px; top: {contextPos.y}px;">
+    <div class="ctx-header">
+      <span>{contextType === 'image' ? 'Image' : contextType === 'link' ? 'Lien' : contextType === 'table' ? 'Tableau' : 'Élément'}</span>
     </div>
     {#if contextType === 'image'}
       <div class="py-1">
-        <button type="button" onclick={() => { if (targetImage) openImageProps(targetImage) }} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">Propriétés de l'image</button>
+        <button type="button" onclick={() => { if (targetImage) openImageProps(targetImage) }} class="ctx-item">Propriétés de l'image</button>
+        <button type="button" onclick={() => { showContextMenu = false; if (targetImage) { saveSelection(); linkUrl = ''; linkText = ''; showLinkModal = true } }} class="ctx-item">Ajouter un lien</button>
       </div>
-      <div class="border-t border-[var(--karbon-border)] py-1">
-        <button type="button" onclick={deleteTargetImage} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-red-400 bg-transparent border-none cursor-pointer transition-all hover:bg-red-500/10 hover:text-red-500">Supprimer l'image</button>
+      <div class="ctx-divider">
+        <button type="button" onclick={deleteTargetImage} class="ctx-item ctx-danger">Supprimer l'image</button>
       </div>
     {:else if contextType === 'link'}
       <div class="py-1">
-        <button type="button" onclick={() => { const a = contextTarget?.closest('a'); if (a) openLinkModalFromElement(a) }} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">Modifier le lien</button>
+        <button type="button" onclick={() => { const a = contextTarget?.closest('a'); if (a) openLinkModalFromElement(a) }} class="ctx-item">Modifier le lien</button>
       </div>
-      <div class="border-t border-[var(--karbon-border)] py-1">
-        <button type="button" onclick={() => { showContextMenu = false; exec('unlink') }} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-red-400 bg-transparent border-none cursor-pointer transition-all hover:bg-red-500/10 hover:text-red-500">Supprimer le lien</button>
+      <div class="ctx-divider">
+        <button type="button" onclick={() => { showContextMenu = false; exec('unlink') }} class="ctx-item ctx-danger">Supprimer le lien</button>
       </div>
     {:else if contextType === 'table'}
       <div class="py-1">
-        <div class="px-3 py-1"><span class="text-[10px] font-semibold uppercase tracking-wider text-[var(--karbon-text-4)]">Lignes</span></div>
-        <button type="button" onclick={() => tableAction('addRowAbove')} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">↑ Insérer au-dessus</button>
-        <button type="button" onclick={() => tableAction('addRowBelow')} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">↓ Insérer en-dessous</button>
+        <div class="ctx-section-title">Lignes</div>
+        <button type="button" onclick={() => tableAction('addRowAbove')} class="ctx-item">↑ Insérer au-dessus</button>
+        <button type="button" onclick={() => tableAction('addRowBelow')} class="ctx-item">↓ Insérer en-dessous</button>
       </div>
-      <div class="border-t border-[var(--karbon-border)] py-1">
-        <div class="px-3 py-1"><span class="text-[10px] font-semibold uppercase tracking-wider text-[var(--karbon-text-4)]">Colonnes</span></div>
-        <button type="button" onclick={() => tableAction('addColLeft')} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">← Insérer à gauche</button>
-        <button type="button" onclick={() => tableAction('addColRight')} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">→ Insérer à droite</button>
+      <div class="ctx-divider">
+        <div class="ctx-section-title">Colonnes</div>
+        <button type="button" onclick={() => tableAction('addColLeft')} class="ctx-item">← Insérer à gauche</button>
+        <button type="button" onclick={() => tableAction('addColRight')} class="ctx-item">→ Insérer à droite</button>
       </div>
-      <div class="border-t border-[var(--karbon-border)] py-1">
-        <button type="button" onclick={() => tableAction('deleteRow')} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-amber-400 bg-transparent border-none cursor-pointer transition-all hover:bg-amber-500/10 hover:text-amber-500">Supprimer la ligne</button>
-        <button type="button" onclick={() => tableAction('deleteCol')} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-amber-400 bg-transparent border-none cursor-pointer transition-all hover:bg-amber-500/10 hover:text-amber-500">Supprimer la colonne</button>
-        <button type="button" onclick={() => tableAction('deleteTable')} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-red-400 bg-transparent border-none cursor-pointer transition-all hover:bg-red-500/10 hover:text-red-500">Supprimer le tableau</button>
+      <div class="ctx-divider">
+        <button type="button" onclick={() => tableAction('deleteRow')} class="ctx-item ctx-warn">Supprimer la ligne</button>
+        <button type="button" onclick={() => tableAction('deleteCol')} class="ctx-item ctx-warn">Supprimer la colonne</button>
+        <button type="button" onclick={() => tableAction('deleteTable')} class="ctx-item ctx-danger">Supprimer le tableau</button>
       </div>
     {/if}
-    <div class="border-t border-[var(--karbon-border)] py-1">
-      <button type="button" onclick={() => openElementProps()} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">Propriétés HTML</button>
-      <button type="button" onclick={() => { showContextMenu = false; exec('removeFormat') }} class="flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs text-[var(--karbon-text-2)] bg-transparent border-none cursor-pointer transition-all hover:bg-violet-500/8 hover:text-[var(--karbon-text)]">Effacer le formatage</button>
+    <div class="ctx-divider">
+      <button type="button" onclick={() => openElementProps()} class="ctx-item">Propriétés HTML</button>
+      <button type="button" onclick={() => { showContextMenu = false; exec('removeFormat') }} class="ctx-item">Effacer le formatage</button>
     </div>
   </div>
 {/if}
 
 <!-- ═══ LINK MODAL ═══ -->
 {#if showLinkModal}
-  <div class={modalOverlay} role="presentation" onclick={() => showLinkModal = false} onkeydown={(e) => { if (e.key === "Escape") showLinkModal = false }}>
-    <div class="{modalBox} max-w-md" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-sm font-semibold text-[var(--karbon-text)]">Insérer / Modifier un lien</h3>
-        <button type="button" onclick={() => showLinkModal = false} class="text-[var(--karbon-text-4)] hover:text-[var(--karbon-text)] cursor-pointer" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="rte-overlay" role="presentation" onclick={() => showLinkModal = false} onkeydown={(e) => { if (e.key === "Escape") showLinkModal = false }}>
+    <div class="rte-modal max-w-md" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+      <div class="rte-modal-header">
+        <h3>Insérer / Modifier un lien</h3>
+        <button type="button" onclick={() => showLinkModal = false} class="rte-modal-close" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
       </div>
       <div class="space-y-3">
-        <div class="space-y-1"><span class={modalLabel}>URL</span><input type="url" bind:value={linkUrl} placeholder="https://..." class={modalInput} /></div>
-        <div class="space-y-1"><span class={modalLabel}>Texte</span><input type="text" bind:value={linkText} placeholder="Texte affiché" class={modalInput} /></div>
-        <div class="space-y-1"><span class={modalLabel}>Title</span><input type="text" bind:value={linkTitle} placeholder="Info-bulle au survol" class={modalInput} /></div>
-        <div class="space-y-1"><span class={modalLabel}>Classes CSS</span><input type="text" bind:value={linkClass} placeholder="ex: btn btn-primary" class="{modalInput} font-mono text-xs" /></div>
-        <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" bind:checked={linkTarget} class="h-4 w-4 rounded" /><span class="text-sm text-[var(--karbon-text-2)]">Ouvrir dans un nouvel onglet</span></label>
+        <div class="space-y-1"><span class="rte-label">URL</span><input type="url" bind:value={linkUrl} placeholder="https://..." class="rte-input" /></div>
+        <div class="space-y-1"><span class="rte-label">Texte</span><input type="text" bind:value={linkText} placeholder="Texte affiché" class="rte-input" /></div>
+        <div class="space-y-1"><span class="rte-label">Title</span><input type="text" bind:value={linkTitle} placeholder="Info-bulle au survol" class="rte-input" /></div>
+        <div class="space-y-1"><span class="rte-label">Classes CSS</span><input type="text" bind:value={linkClass} placeholder="ex: btn btn-primary" class="rte-input font-mono text-xs" /></div>
+        <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" bind:checked={linkTarget} class="h-4 w-4 rounded" /><span class="rte-label-inline">Ouvrir dans un nouvel onglet</span></label>
       </div>
-      <div class="mt-5 flex items-center justify-between">
-        <button type="button" onclick={() => { showLinkModal = false; restoreSelection(); exec('unlink') }} class="text-xs text-red-400 hover:text-red-300 cursor-pointer">Supprimer</button>
+      <div class="rte-modal-footer justify-between">
+        <button type="button" onclick={() => { showLinkModal = false; restoreSelection(); exec('unlink') }} class="rte-btn-danger-text">Supprimer</button>
         <div class="flex gap-2">
-          <button type="button" onclick={() => showLinkModal = false} class="{modalBtnCancel} cursor-pointer">Annuler</button>
-          <button type="button" onclick={insertLink} class="{modalBtnPrimary} cursor-pointer">Appliquer</button>
+          <button type="button" onclick={() => showLinkModal = false} class="rte-btn-cancel">Annuler</button>
+          <button type="button" onclick={insertLink} class="rte-btn-primary">Appliquer</button>
         </div>
       </div>
     </div>
@@ -680,46 +743,47 @@
 
 <!-- ═══ IMAGE INSERT MODAL ═══ -->
 {#if showImageModal}
-  <div class={modalOverlay} role="presentation" onclick={() => showImageModal = false} onkeydown={(e) => { if (e.key === "Escape") showImageModal = false }}>
-    <div class="{modalBox} max-w-lg" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-sm font-semibold text-[var(--karbon-text)]">Insérer une image</h3>
-        <button type="button" onclick={() => showImageModal = false} class="text-[var(--karbon-text-4)] hover:text-[var(--karbon-text)] cursor-pointer" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="rte-overlay" role="presentation" onclick={() => showImageModal = false} onkeydown={(e) => { if (e.key === "Escape") showImageModal = false }}>
+    <div class="rte-modal max-w-lg" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+      <div class="rte-modal-header">
+        <h3>Insérer une image</h3>
+        <button type="button" onclick={() => showImageModal = false} class="rte-modal-close" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
       </div>
       <div class="space-y-4">
         <div class="grid grid-cols-2 gap-3">
           {#if media?.upload}
-            <div class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-[var(--karbon-border)] p-4 hover:border-[var(--karbon-border-input)] transition-colors">
+            <div class="rte-upload-zone">
               {#if imageUploading}
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin text-violet-400 mb-1"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
-                <p class="text-[11px] text-[var(--karbon-text-3)]">Upload...</p>
+                <p class="text-[11px] opacity-60">Upload...</p>
               {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--karbon-text-4)] mb-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-40 mb-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                 <label class="cursor-pointer text-xs font-medium text-violet-400 hover:text-violet-300">Uploader<input type="file" accept="image/*" class="hidden" onchange={(e) => handleImageUpload(e.currentTarget.files)} /></label>
               {/if}
             </div>
           {/if}
           {#if media}
-            <button type="button" onclick={openMediaExplorerForImage} class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-[var(--karbon-border)] p-4 hover:border-violet-500/40 hover:bg-violet-500/5 transition-colors cursor-pointer">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--karbon-text-4)] mb-1"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>
+            <button type="button" onclick={openMediaExplorerForImage} class="rte-upload-zone hover:border-violet-500/40 hover:bg-violet-500/5">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-40 mb-1"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>
               <span class="text-xs font-medium text-violet-400">Parcourir les médias</span>
             </button>
           {/if}
         </div>
-        <div class="space-y-1"><span class={modalLabel}>URL</span><input type="url" bind:value={imageUrl} placeholder="https://..." class={modalInput} /></div>
+        <div class="space-y-1"><span class="rte-label">URL</span><input type="url" bind:value={imageUrl} placeholder="https://..." class="rte-input" /></div>
         <div class="grid grid-cols-2 gap-3">
-          <div class="space-y-1"><span class={modalLabel}>Alt</span><input type="text" bind:value={imageAlt} class={modalInput} /></div>
-          <div class="space-y-1"><span class={modalLabel}>Title</span><input type="text" bind:value={imageTitle} class={modalInput} /></div>
+          <div class="space-y-1"><span class="rte-label">Alt</span><input type="text" bind:value={imageAlt} class="rte-input" /></div>
+          <div class="space-y-1"><span class="rte-label">Title</span><input type="text" bind:value={imageTitle} class="rte-input" /></div>
         </div>
         <div class="grid grid-cols-2 gap-3">
-          <div class="space-y-1"><span class={modalLabel}>Largeur</span><input type="text" bind:value={imageWidth} placeholder="auto" class={modalInput} /></div>
-          <div class="space-y-1"><span class={modalLabel}>Classes CSS</span><input type="text" bind:value={imageClass} placeholder="rounded shadow" class="{modalInput} font-mono text-xs" /></div>
+          <div class="space-y-1"><span class="rte-label">Largeur</span><input type="text" bind:value={imageWidth} placeholder="auto" class="rte-input" /></div>
+          <div class="space-y-1"><span class="rte-label">Classes CSS</span><input type="text" bind:value={imageClass} placeholder="rounded shadow" class="rte-input font-mono text-xs" /></div>
         </div>
-        {#if imageUrl}<div class="rounded-lg border border-[var(--karbon-border)] overflow-hidden"><img src={imageUrl} alt={imageAlt} class="w-full max-h-40 object-contain bg-[var(--karbon-bg-2)]" /></div>{/if}
+        {#if imageUrl}<div class="rte-preview-box"><img src={imageUrl} alt={imageAlt} class="w-full max-h-40 object-contain" /></div>{/if}
       </div>
-      <div class="mt-5 flex justify-end gap-2">
-        <button type="button" onclick={() => showImageModal = false} class="{modalBtnCancel} cursor-pointer">Annuler</button>
-        <button type="button" onclick={insertImage} disabled={!imageUrl} class="{modalBtnPrimary} cursor-pointer">Insérer</button>
+      <div class="rte-modal-footer justify-end">
+        <button type="button" onclick={() => showImageModal = false} class="rte-btn-cancel">Annuler</button>
+        <button type="button" onclick={insertImage} disabled={!imageUrl} class="rte-btn-primary">Insérer</button>
       </div>
     </div>
   </div>
@@ -727,36 +791,37 @@
 
 <!-- ═══ IMAGE PROPS MODAL ═══ -->
 {#if showImagePropsModal}
-  <div class={modalOverlay} role="presentation" onclick={() => showImagePropsModal = false} onkeydown={(e) => { if (e.key === "Escape") showImagePropsModal = false }}>
-    <div class="{modalBox} max-w-lg" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-sm font-semibold text-[var(--karbon-text)]">Propriétés de l'image</h3>
-        <button type="button" onclick={() => showImagePropsModal = false} class="text-[var(--karbon-text-4)] hover:text-[var(--karbon-text)] cursor-pointer" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="rte-overlay" role="presentation" onclick={() => showImagePropsModal = false} onkeydown={(e) => { if (e.key === "Escape") showImagePropsModal = false }}>
+    <div class="rte-modal max-w-lg" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+      <div class="rte-modal-header">
+        <h3>Propriétés de l'image</h3>
+        <button type="button" onclick={() => showImagePropsModal = false} class="rte-modal-close" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
       </div>
-      {#if imageUrl}<div class="mb-4 rounded-lg border border-[var(--karbon-border)] overflow-hidden bg-[var(--karbon-bg-2)]"><img src={imageUrl} alt="" class="mx-auto max-h-32 object-contain" /></div>{/if}
+      {#if imageUrl}<div class="rte-preview-box mb-4"><img src={imageUrl} alt="" class="mx-auto max-h-32 object-contain" /></div>{/if}
       <div class="space-y-3">
         <div class="grid grid-cols-2 gap-3">
-          <div class="space-y-1"><span class={modalLabel}>Largeur</span><input type="text" bind:value={imageWidth} placeholder="auto" class={modalInput} /></div>
-          <div class="space-y-1"><span class={modalLabel}>Hauteur</span><input type="text" bind:value={imageHeight} placeholder="auto" class={modalInput} /></div>
+          <div class="space-y-1"><span class="rte-label">Largeur</span><input type="text" bind:value={imageWidth} placeholder="auto" class="rte-input" /></div>
+          <div class="space-y-1"><span class="rte-label">Hauteur</span><input type="text" bind:value={imageHeight} placeholder="auto" class="rte-input" /></div>
         </div>
-        <div class="space-y-1"><span class={modalLabel}>Texte alternatif</span><input type="text" bind:value={imageAlt} class={modalInput} /></div>
-        <div class="space-y-1"><span class={modalLabel}>Title</span><input type="text" bind:value={imageTitle} class={modalInput} /></div>
+        <div class="space-y-1"><span class="rte-label">Texte alternatif</span><input type="text" bind:value={imageAlt} class="rte-input" /></div>
+        <div class="space-y-1"><span class="rte-label">Title</span><input type="text" bind:value={imageTitle} class="rte-input" /></div>
         <div class="space-y-1">
-          <span class={modalLabel}>Alignement</span>
+          <span class="rte-label">Alignement</span>
           <div class="flex gap-1">
             {#each [{ v: '', l: 'Aucun' }, { v: 'left', l: 'Gauche' }, { v: 'center', l: 'Centre' }, { v: 'right', l: 'Droite' }] as opt}
-              <button type="button" onclick={() => imageAlign = opt.v} class="rounded-md px-3 py-1.5 text-xs transition-colors cursor-pointer {imageAlign === opt.v ? 'bg-violet-500/15 text-violet-400 ring-1 ring-violet-500/30' : 'text-[var(--karbon-text-3)] hover:bg-[var(--karbon-bg-2)]'}">{opt.l}</button>
+              <button type="button" onclick={() => imageAlign = opt.v} class="rte-align-btn {imageAlign === opt.v ? 'rte-align-btn-active' : ''}">{opt.l}</button>
             {/each}
           </div>
         </div>
-        <div class="space-y-1"><span class={modalLabel}>Classes CSS</span><input type="text" bind:value={imageClass} placeholder="ex: rounded shadow-lg" class={modalInput} /></div>
-        <div class="space-y-1"><span class={modalLabel}>Style inline</span><input type="text" bind:value={imageStyle} placeholder="ex: border-radius: 8px" class="{modalInput} font-mono text-xs" /></div>
+        <div class="space-y-1"><span class="rte-label">Classes CSS</span><input type="text" bind:value={imageClass} placeholder="ex: rounded shadow-lg" class="rte-input" /></div>
+        <div class="space-y-1"><span class="rte-label">Style inline</span><input type="text" bind:value={imageStyle} placeholder="ex: border-radius: 8px" class="rte-input font-mono text-xs" /></div>
       </div>
-      <div class="mt-5 flex items-center justify-between">
-        <button type="button" onclick={deleteTargetImage} class="text-xs text-red-400 hover:text-red-300 cursor-pointer">Supprimer</button>
+      <div class="rte-modal-footer justify-between">
+        <button type="button" onclick={deleteTargetImage} class="rte-btn-danger-text">Supprimer</button>
         <div class="flex gap-2">
-          <button type="button" onclick={() => showImagePropsModal = false} class="{modalBtnCancel} cursor-pointer">Annuler</button>
-          <button type="button" onclick={applyImageProps} class="{modalBtnPrimary} cursor-pointer">Appliquer</button>
+          <button type="button" onclick={() => showImagePropsModal = false} class="rte-btn-cancel">Annuler</button>
+          <button type="button" onclick={applyImageProps} class="rte-btn-primary">Appliquer</button>
         </div>
       </div>
     </div>
@@ -765,20 +830,21 @@
 
 <!-- ═══ ELEMENT PROPS MODAL ═══ -->
 {#if showElementProps}
-  <div class={modalOverlay} role="presentation" onclick={() => showElementProps = false} onkeydown={(e) => { if (e.key === "Escape") showElementProps = false }}>
-    <div class="{modalBox} max-w-md" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-sm font-semibold text-[var(--karbon-text)]">Propriétés : <code class="text-violet-400">&lt;{elPropsTag}&gt;</code></h3>
-        <button type="button" onclick={() => showElementProps = false} class="text-[var(--karbon-text-4)] hover:text-[var(--karbon-text)] cursor-pointer" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="rte-overlay" role="presentation" onclick={() => showElementProps = false} onkeydown={(e) => { if (e.key === "Escape") showElementProps = false }}>
+    <div class="rte-modal max-w-md" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+      <div class="rte-modal-header">
+        <h3>Propriétés : <code class="text-violet-400">&lt;{elPropsTag}&gt;</code></h3>
+        <button type="button" onclick={() => showElementProps = false} class="rte-modal-close" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
       </div>
       <div class="space-y-3">
-        <div class="space-y-1"><span class={modalLabel}>ID</span><input type="text" bind:value={elPropsId} placeholder="identifiant" class="{modalInput} font-mono text-xs" /></div>
-        <div class="space-y-1"><span class={modalLabel}>Classes CSS</span><input type="text" bind:value={elPropsClass} placeholder="class1 class2" class="{modalInput} font-mono text-xs" /></div>
-        <div class="space-y-1"><span class={modalLabel}>Style inline</span><textarea bind:value={elPropsStyle} rows="3" placeholder="color: red; font-size: 16px;" class="{modalInput} font-mono text-xs"></textarea></div>
+        <div class="space-y-1"><span class="rte-label">ID</span><input type="text" bind:value={elPropsId} placeholder="identifiant" class="rte-input font-mono text-xs" /></div>
+        <div class="space-y-1"><span class="rte-label">Classes CSS</span><input type="text" bind:value={elPropsClass} placeholder="class1 class2" class="rte-input font-mono text-xs" /></div>
+        <div class="space-y-1"><span class="rte-label">Style inline</span><textarea bind:value={elPropsStyle} rows="3" placeholder="color: red; font-size: 16px;" class="rte-input font-mono text-xs"></textarea></div>
       </div>
-      <div class="mt-5 flex justify-end gap-2">
-        <button type="button" onclick={() => showElementProps = false} class="{modalBtnCancel} cursor-pointer">Annuler</button>
-        <button type="button" onclick={applyElementProps} class="{modalBtnPrimary} cursor-pointer">Appliquer</button>
+      <div class="rte-modal-footer justify-end">
+        <button type="button" onclick={() => showElementProps = false} class="rte-btn-cancel">Annuler</button>
+        <button type="button" onclick={applyElementProps} class="rte-btn-primary">Appliquer</button>
       </div>
     </div>
   </div>
@@ -786,19 +852,20 @@
 
 <!-- ═══ TABLE MODAL ═══ -->
 {#if showTableModal}
-  <div class={modalOverlay} role="presentation" onclick={() => showTableModal = false} onkeydown={(e) => { if (e.key === "Escape") showTableModal = false }}>
-    <div class="{modalBox} max-w-sm" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-sm font-semibold text-[var(--karbon-text)]">Insérer un tableau</h3>
-        <button type="button" onclick={() => showTableModal = false} class="text-[var(--karbon-text-4)] hover:text-[var(--karbon-text)] cursor-pointer" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="rte-overlay" role="presentation" onclick={() => showTableModal = false} onkeydown={(e) => { if (e.key === "Escape") showTableModal = false }}>
+    <div class="rte-modal max-w-sm" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+      <div class="rte-modal-header">
+        <h3>Insérer un tableau</h3>
+        <button type="button" onclick={() => showTableModal = false} class="rte-modal-close" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
       </div>
       <div class="grid grid-cols-2 gap-3">
-        <div class="space-y-1"><span class={modalLabel}>Lignes</span><input type="number" bind:value={tableRows} min="1" max="20" class={modalInput} /></div>
-        <div class="space-y-1"><span class={modalLabel}>Colonnes</span><input type="number" bind:value={tableCols} min="1" max="10" class={modalInput} /></div>
+        <div class="space-y-1"><span class="rte-label">Lignes</span><input type="number" bind:value={tableRows} min="1" max="20" class="rte-input" /></div>
+        <div class="space-y-1"><span class="rte-label">Colonnes</span><input type="number" bind:value={tableCols} min="1" max="10" class="rte-input" /></div>
       </div>
-      <div class="mt-5 flex justify-end gap-2">
-        <button type="button" onclick={() => showTableModal = false} class="{modalBtnCancel} cursor-pointer">Annuler</button>
-        <button type="button" onclick={insertTable} class="{modalBtnPrimary} cursor-pointer">Insérer</button>
+      <div class="rte-modal-footer justify-end">
+        <button type="button" onclick={() => showTableModal = false} class="rte-btn-cancel">Annuler</button>
+        <button type="button" onclick={insertTable} class="rte-btn-primary">Insérer</button>
       </div>
     </div>
   </div>
@@ -806,77 +873,733 @@
 
 <!-- ═══ EMBED MODAL ═══ -->
 {#if showEmbedModal}
-  <div class={modalOverlay} role="presentation" onclick={() => showEmbedModal = false} onkeydown={(e) => { if (e.key === "Escape") showEmbedModal = false }}>
-    <div class="{modalBox} max-w-md" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-sm font-semibold text-[var(--karbon-text)]">Embed vidéo</h3>
-        <button type="button" onclick={() => showEmbedModal = false} class="text-[var(--karbon-text-4)] hover:text-[var(--karbon-text)] cursor-pointer" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="rte-overlay" role="presentation" onclick={() => showEmbedModal = false} onkeydown={(e) => { if (e.key === "Escape") showEmbedModal = false }}>
+    <div class="rte-modal max-w-md" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+      <div class="rte-modal-header">
+        <h3>Embed vidéo</h3>
+        <button type="button" onclick={() => showEmbedModal = false} class="rte-modal-close" aria-label="Fermer"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
       </div>
-      <p class="text-xs text-[var(--karbon-text-3)] mb-3">Collez une URL YouTube, Vimeo ou un lien embed.</p>
-      <input type="url" bind:value={embedUrl} placeholder="https://www.youtube.com/watch?v=..." class={modalInput} onkeydown={(e) => { if (e.key === 'Enter') insertEmbed() }} />
-      <div class="mt-5 flex justify-end gap-2">
-        <button type="button" onclick={() => showEmbedModal = false} class="{modalBtnCancel} cursor-pointer">Annuler</button>
-        <button type="button" onclick={insertEmbed} disabled={!embedUrl} class="{modalBtnPrimary} cursor-pointer">Insérer</button>
+      <p class="text-xs opacity-50 mb-3">Collez une URL YouTube, Vimeo ou un lien embed.</p>
+      <input type="url" bind:value={embedUrl} placeholder="https://www.youtube.com/watch?v=..." class="rte-input" onkeydown={(e) => { if (e.key === 'Enter') insertEmbed() }} />
+      <div class="rte-modal-footer justify-end">
+        <button type="button" onclick={() => showEmbedModal = false} class="rte-btn-cancel">Annuler</button>
+        <button type="button" onclick={insertEmbed} disabled={!embedUrl} class="rte-btn-primary">Insérer</button>
       </div>
     </div>
   </div>
 {/if}
 
-<!-- ═══ MEDIA EXPLORER (simple) ═══ -->
+<!-- ═══ MEDIA EXPLORER ═══ -->
 {#if showMediaExplorer && media}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="presentation" onclick={() => showMediaExplorer = false} onkeydown={(e) => { if (e.key === "Escape") showMediaExplorer = false }}>
-    <div class="flex h-[70vh] w-[80vw] max-w-4xl flex-col rounded-2xl border border-[var(--karbon-border)] bg-[var(--karbon-bg-card)] shadow-2xl overflow-hidden" role="dialog" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-      <div class="flex items-center gap-3 border-b border-[var(--karbon-border)] px-5 py-3">
-        <h2 class="text-sm font-semibold text-[var(--karbon-text)]">Explorateur de médias</h2>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="rte-overlay" role="presentation" onclick={() => showMediaExplorer = false} onkeydown={(e) => { if (e.key === "Escape") showMediaExplorer = false }}>
+    <div class="rte-media-explorer" role="dialog" tabindex="-1"
+      onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}
+      ondragover={(e) => { e.preventDefault(); mediaDragOver = true }}
+      ondragleave={() => mediaDragOver = false}
+      ondrop={mediaHandleDrop}
+    >
+      <!-- Header -->
+      <div class="rte-media-header">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-violet-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
+        <h2 class="text-sm font-semibold">Explorateur de médias</h2>
         <div class="flex-1"></div>
-        <input type="text" bind:value={mediaSearch} placeholder="Rechercher..." class="{modalInput} w-48 !py-1.5 !text-xs" onkeydown={(e) => { if (e.key === 'Enter') browseMedia() }} />
-        <button type="button" onclick={() => showMediaExplorer = false} class="rounded-lg p-1.5 text-[var(--karbon-text-4)] hover:bg-[var(--karbon-bg-2)] hover:text-[var(--karbon-text)] cursor-pointer" aria-label="Fermer">
+        <div class="relative">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-40"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input type="text" bind:value={mediaSearch} placeholder="Filtrer..." class="rte-input w-48 !py-1.5 !pl-8 !text-xs" onkeydown={(e) => { if (e.key === 'Enter') browseMedia(mediaCurrentPath) }} />
+        </div>
+        <!-- View toggle -->
+        <div class="rte-media-view-toggle">
+          <button type="button" onclick={() => mediaViewMode = 'grid'} class="p-1.5 {mediaViewMode === 'grid' ? 'bg-violet-500/15 text-violet-400' : 'opacity-40 hover:opacity-70'}">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
+          </button>
+          <button type="button" onclick={() => mediaViewMode = 'list'} class="p-1.5 {mediaViewMode === 'list' ? 'bg-violet-500/15 text-violet-400' : 'opacity-40 hover:opacity-70'}">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
+          </button>
+        </div>
+        <button type="button" onclick={() => showMediaExplorer = false} class="rte-modal-close" aria-label="Fermer">
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
         </button>
       </div>
 
-      <div class="flex-1 overflow-y-auto p-4">
+      <!-- Toolbar (nav + breadcrumbs + actions) -->
+      <div class="rte-media-toolbar">
+        <button type="button" onclick={mediaGoUp} disabled={!mediaCurrentPath} class="rte-btn disabled:opacity-30" aria-label="Remonter">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+        </button>
+        <button type="button" onclick={() => mediaNavigateTo('')} class="rte-btn" aria-label="Racine">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+        </button>
+        <button type="button" onclick={() => browseMedia(mediaCurrentPath)} class="rte-btn" aria-label="Rafraîchir">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
+        </button>
+        <!-- Breadcrumb -->
+        <div class="rte-media-breadcrumb">
+          <button type="button" onclick={() => mediaNavigateTo('')} class="hover:text-violet-400 transition-colors">uploads</button>
+          {#each mediaBreadcrumbs as crumb}
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            <button type="button" onclick={() => mediaNavigateTo(crumb.path)} class="hover:text-violet-400 transition-colors">{crumb.label}</button>
+          {/each}
+        </div>
+        <div class="flex-1"></div>
+        {#if media.createFolder}
+          <button type="button" onclick={() => { mediaShowNewFolder = true; mediaNewFolderName = '' }} class="rte-media-action-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10v6"/><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
+            Nouveau dossier
+          </button>
+        {/if}
+        {#if media.upload}
+          <label class="rte-media-upload-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+            Uploader
+            <input type="file" accept="image/*" multiple class="hidden" onchange={(e) => mediaHandleUpload(e.currentTarget.files)} />
+          </label>
+        {/if}
+      </div>
+
+      <!-- New folder inline -->
+      {#if mediaShowNewFolder}
+        <div class="rte-media-newfolder">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-violet-400"><path d="M12 10v6"/><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
+          <input type="text" bind:value={mediaNewFolderName} placeholder="Nom du dossier..." class="rte-input flex-1 !py-1.5 !text-xs"
+            onkeydown={(e) => { if (e.key === 'Enter') mediaCreateFolder(); if (e.key === 'Escape') mediaShowNewFolder = false }} />
+          <button type="button" onclick={mediaCreateFolder} class="rte-btn-primary !py-1.5 !px-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+          </button>
+          <button type="button" onclick={() => mediaShowNewFolder = false} class="rte-modal-close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        </div>
+      {/if}
+
+      <!-- Content -->
+      <div class="rte-media-content {mediaDragOver ? 'ring-2 ring-inset ring-violet-500/50 bg-violet-500/5' : ''}">
+        {#if mediaUploading}
+          <div class="rte-media-overlay">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin text-violet-400"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+            <p class="text-sm opacity-60 mt-2">Upload en cours...</p>
+          </div>
+        {/if}
+
         {#if mediaLoading}
           <div class="flex items-center justify-center py-20">
             <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin text-violet-400"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
           </div>
-        {:else if mediaFiles.length === 0}
-          <div class="flex flex-col items-center justify-center py-20 text-[var(--karbon-text-4)]">
-            <p class="text-sm">Aucun média trouvé</p>
+        {:else if mediaFiltered.length === 0}
+          <div class="flex flex-col items-center justify-center py-20 opacity-40">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="mb-3 opacity-30"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
+            <p class="text-sm">Dossier vide</p>
+            <p class="mt-1 text-xs">Glissez des fichiers ici ou cliquez sur Uploader</p>
           </div>
-        {:else}
-          <div class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-3">
-            {#each mediaFiles as file}
-              <div
-                class="group flex flex-col items-center rounded-lg p-2 cursor-pointer transition-all {mediaSelected?.id === file.id ? 'bg-violet-500/15 ring-1 ring-violet-500/40' : 'hover:bg-[var(--karbon-bg-2)]'}"
-                role="option" tabindex="0" aria-selected={mediaSelected?.id === file.id} onclick={() => mediaSelected = mediaSelected?.id === file.id ? null : file} onkeydown={(e) => { if (e.key === "Enter") { mediaSelected = mediaSelected?.id === file.id ? null : file } }}
-                ondblclick={() => { if (file.url) handleMediaSelect(file.url) }}
+        {:else if mediaViewMode === 'grid'}
+          <div class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 gap-3">
+            {#each mediaFiltered as entry}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <div class="rte-media-item {mediaSelected?.path === entry.path ? 'rte-media-item-selected' : ''}"
+                onclick={() => handleMediaEntryClick(entry)}
+                ondblclick={() => handleMediaEntryDblClick(entry)}
               >
-                {#if file.type?.startsWith('image/')}
-                  <div class="h-16 w-16 overflow-hidden rounded-md bg-[var(--karbon-bg-2)]">
-                    <img src={file.url} alt={file.name} class="h-full w-full object-cover" loading="lazy" />
+                {#if entry.is_dir}
+                  <div class="flex h-16 w-16 items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-amber-400/80"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
                   </div>
+                {:else if isImage(entry) && entry.url}
+                  <div class="rte-media-thumb"><img src={entry.url} alt={entry.name} class="h-full w-full object-cover" loading="lazy" /></div>
                 {:else}
                   <div class="flex h-16 w-16 items-center justify-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--karbon-text-4)]"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-40"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
                   </div>
                 {/if}
-                <p class="mt-1.5 w-full truncate text-center text-[11px] text-[var(--karbon-text-2)]">{file.name}</p>
+                <p class="mt-1.5 w-full truncate text-center text-[11px]">{entry.name}</p>
+                <p class="text-[10px] opacity-40">{entry.is_dir ? 'Dossier' : formatSize(entry.size)}</p>
+              </div>
+            {/each}
+          </div>
+        {:else}
+          <div class="rte-media-list">
+            {#each mediaFiltered as entry, i}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <div class="rte-media-list-item {i > 0 ? 'rte-media-list-divider' : ''} {mediaSelected?.path === entry.path ? 'bg-violet-500/10' : ''}"
+                onclick={() => handleMediaEntryClick(entry)}
+                ondblclick={() => handleMediaEntryDblClick(entry)}
+              >
+                {#if entry.is_dir}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-amber-400/80"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
+                {:else if isImage(entry) && entry.url}
+                  <img src={entry.url} alt="" class="rte-media-list-thumb" loading="lazy" />
+                {:else}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 opacity-40"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
+                {/if}
+                <span class="flex-1 truncate text-xs">{entry.name}</span>
+                <span class="text-[11px] opacity-40">{entry.is_dir ? 'Dossier' : formatSize(entry.size)}</span>
+                {#if entry.modified}<span class="hidden sm:block text-[11px] opacity-40">{entry.modified}</span>{/if}
               </div>
             {/each}
           </div>
         {/if}
       </div>
 
-      <div class="flex items-center gap-3 border-t border-[var(--karbon-border)] bg-[var(--karbon-bg-2)]/50 px-5 py-3">
-        <p class="flex-1 text-xs text-[var(--karbon-text-4)]">{mediaFiles.length} fichier{mediaFiles.length !== 1 ? 's' : ''}</p>
-        <button type="button" onclick={() => showMediaExplorer = false} class="{modalBtnCancel} cursor-pointer">Annuler</button>
-        <button type="button" onclick={() => { if (mediaSelected?.url) handleMediaSelect(mediaSelected.url) }} disabled={!mediaSelected?.url} class="{modalBtnPrimary} cursor-pointer">Sélectionner</button>
+      <!-- Footer -->
+      <div class="rte-media-footer">
+        {#if mediaSelected}
+          <div class="flex items-center gap-3 flex-1 min-w-0">
+            {#if isImage(mediaSelected) && mediaSelected.url}
+              <img src={mediaSelected.url} alt="" class="h-10 w-10 rounded object-cover" />
+            {/if}
+            <div class="min-w-0">
+              <p class="truncate text-xs font-medium">{mediaSelected.name}</p>
+              <p class="text-[11px] opacity-40">{formatSize(mediaSelected.size)} · {mediaSelected.mime ?? 'Inconnu'}</p>
+            </div>
+          </div>
+        {:else}
+          <p class="flex-1 text-xs opacity-40">{mediaFiltered.length} élément{mediaFiltered.length !== 1 ? 's' : ''}</p>
+        {/if}
+        <button type="button" onclick={() => showMediaExplorer = false} class="rte-btn-cancel">Annuler</button>
+        <button type="button" onclick={() => { if (mediaSelected?.url) handleMediaSelect(mediaSelected.url) }} disabled={!mediaSelected?.url} class="rte-btn-primary">Sélectionner</button>
       </div>
     </div>
   </div>
 {/if}
 
+<!-- Color picker backdrop -->
 {#if showColorPicker}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="fixed inset-0 z-10" role="presentation" onclick={() => showColorPicker = false} onkeydown={(e) => { if (e.key === "Escape") showColorPicker = false }}></div>
 {/if}
+
+<style>
+  /* ═══════════════════════════════════════════════
+     WRAPPER
+     ═══════════════════════════════════════════════ */
+  .rte-wrapper {
+    @apply rounded-xl shadow-sm overflow-hidden;
+    border: 1px solid var(--karbon-border);
+    background: var(--karbon-bg-card);
+  }
+
+  /* ═══════════════════════════════════════════════
+     TOOLBAR
+     ═══════════════════════════════════════════════ */
+  .rte-toolbar {
+    @apply flex flex-wrap items-center gap-1 px-3 py-2 select-none;
+    border-bottom: 1px solid var(--karbon-border);
+    background: color-mix(in srgb, var(--karbon-bg-2) 50%, transparent);
+  }
+
+  .rte-btn {
+    @apply flex items-center justify-center rounded-md transition-all cursor-pointer border-none bg-transparent px-1;
+    min-width: 32px;
+    height: 32px;
+    color: var(--karbon-text-3);
+  }
+
+  .rte-btn:hover {
+    background: var(--karbon-bg-2);
+    color: var(--karbon-text);
+  }
+
+  .rte-btn-active {
+    @apply bg-violet-500/15 text-violet-400;
+  }
+
+  .rte-btn-active:hover {
+    @apply bg-violet-500/20 text-violet-400;
+  }
+
+  .rte-sep {
+    @apply mx-0.5 shrink-0;
+    width: 1px;
+    height: 22px;
+    background: var(--karbon-border);
+  }
+
+  .rte-select {
+    @apply rounded-[5px] px-1 py-0.5 text-[0.6875rem] outline-none cursor-pointer;
+    background: var(--karbon-bg-input);
+    border: 1px solid var(--karbon-border-input);
+    color: var(--karbon-text-3);
+  }
+
+  /* ═══════════════════════════════════════════════
+     FIND/REPLACE BAR
+     ═══════════════════════════════════════════════ */
+  .rte-findbar {
+    @apply flex items-center gap-2 px-4 py-2;
+    border-bottom: 1px solid var(--karbon-border);
+    background: color-mix(in srgb, var(--karbon-bg-2) 30%, transparent);
+  }
+
+  .rte-bar-input {
+    @apply rounded-md px-2 py-1 text-xs outline-none;
+    background: var(--karbon-bg-input);
+    border: 1px solid var(--karbon-border-input);
+    color: var(--karbon-text);
+  }
+
+  .rte-bar-input:focus {
+    border-color: var(--karbon-border-input-focus);
+  }
+
+  .rte-bar-btn {
+    @apply rounded-md px-2.5 py-1 text-[0.6875rem] cursor-pointer transition-all;
+    background: var(--karbon-bg-2);
+    border: 1px solid var(--karbon-border);
+    color: var(--karbon-text-3);
+  }
+
+  .rte-bar-btn:hover {
+    background: var(--karbon-bg-card);
+    color: var(--karbon-text);
+  }
+
+  /* ═══════════════════════════════════════════════
+     STATUS BAR
+     ═══════════════════════════════════════════════ */
+  .rte-statusbar {
+    @apply flex items-center gap-4 px-4 py-1.5 text-[11px];
+    border-top: 1px solid var(--karbon-border);
+    background: color-mix(in srgb, var(--karbon-bg-2) 30%, transparent);
+    color: var(--karbon-text-4);
+  }
+
+  /* ═══════════════════════════════════════════════
+     CONTENT AREA — Default theme
+     ═══════════════════════════════════════════════ */
+  .rte-content {
+    padding: 1.25rem 1.5rem;
+    color: var(--karbon-text);
+    font-size: 0.9375rem;
+    line-height: 1.75;
+  }
+
+  .rte-content:empty:before {
+    content: attr(data-placeholder);
+    color: var(--karbon-text-4);
+    pointer-events: none;
+  }
+
+  .rte-content :global(h2) { @apply text-2xl font-bold mt-4 mb-2; }
+  .rte-content :global(h3) { @apply text-xl font-semibold mt-3 mb-1.5; }
+  .rte-content :global(h4) { @apply text-lg font-semibold mt-2.5 mb-1; }
+  .rte-content :global(p) { @apply my-2; }
+  .rte-content :global(a) { @apply text-violet-500 underline; }
+  .rte-content :global(blockquote) {
+    @apply border-l-[3px] border-violet-500 pl-4 py-2 my-4 rounded-r-lg italic;
+    background: rgba(139, 92, 246, 0.05);
+  }
+  .rte-content :global(pre) {
+    @apply rounded-lg p-4 font-mono text-sm overflow-x-auto my-4;
+    background: var(--karbon-bg-2);
+    border: 1px solid var(--karbon-border);
+  }
+  .rte-content :global(code) {
+    @apply px-1.5 py-0.5 rounded text-sm;
+    background: var(--karbon-bg-2);
+  }
+  .rte-content :global(img) {
+    @apply max-w-full h-auto rounded-lg my-4 cursor-pointer;
+  }
+  .rte-content :global(img):hover {
+    @apply outline outline-2 outline-violet-500/50 outline-offset-2;
+  }
+  .rte-content :global(hr) {
+    @apply border-none my-6;
+    border-top: 1px solid var(--karbon-border);
+  }
+  .rte-content :global(ul), .rte-content :global(ol) { @apply pl-6 my-2; }
+  .rte-content :global(li) { @apply my-1; }
+  .rte-content :global(table) { @apply w-full border-collapse my-4; }
+  .rte-content :global(th) {
+    @apply px-3 py-2 font-semibold text-sm;
+    border: 1px solid var(--karbon-border);
+    background: var(--karbon-bg-2);
+  }
+  .rte-content :global(td) {
+    @apply px-3 py-2;
+    border: 1px solid var(--karbon-border);
+  }
+  .rte-content :global(.embed-responsive) {
+    @apply relative h-0 overflow-hidden my-4 rounded-lg;
+    padding-bottom: 56.25%;
+  }
+  .rte-content :global(.embed-responsive iframe) {
+    @apply absolute inset-0 w-full h-full border-0;
+  }
+
+  /* ═══════════════════════════════════════════════
+     CONTENT — Prose theme (article/blog)
+     ═══════════════════════════════════════════════ */
+  .rte-prose {
+    line-height: 1.9;
+    padding: 2rem 2.5rem;
+  }
+
+  .rte-prose :global(h2) { @apply text-3xl font-bold mt-8 mb-3; }
+  .rte-prose :global(h3) { @apply text-2xl font-semibold mt-6 mb-2; }
+  .rte-prose :global(h4) { @apply text-xl font-semibold mt-4 mb-1.5; }
+  .rte-prose :global(p) { @apply my-4; }
+  .rte-prose :global(blockquote) { @apply pl-6 py-3 my-6; }
+  .rte-prose :global(img) { @apply my-6; }
+  .rte-prose :global(hr) { @apply my-10; }
+
+  /* ═══════════════════════════════════════════════
+     CONTENT — Compact theme (admin/dashboard)
+     ═══════════════════════════════════════════════ */
+  .rte-compact {
+    padding: 0.75rem 1rem;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+
+  .rte-compact :global(h2) { @apply text-lg font-semibold mt-2 mb-1; }
+  .rte-compact :global(h3) { @apply text-base font-semibold mt-1.5 mb-0.5; }
+  .rte-compact :global(h4) { @apply text-sm font-semibold mt-1 mb-0.5; }
+  .rte-compact :global(p) { @apply my-1; }
+  .rte-compact :global(blockquote) { @apply pl-3 py-1 my-2; }
+  .rte-compact :global(img) { @apply my-2 rounded-md; }
+  .rte-compact :global(hr) { @apply my-3; }
+
+  /* ═══════════════════════════════════════════════
+     CONTENT — Minimal theme (neutral)
+     ═══════════════════════════════════════════════ */
+  .rte-minimal {
+    padding: 1rem 1.25rem;
+    font-size: 0.875rem;
+    line-height: 1.7;
+  }
+
+  .rte-minimal :global(h2) { @apply text-xl font-semibold mt-3 mb-1.5; }
+  .rte-minimal :global(h3) { @apply text-lg font-medium mt-2 mb-1; }
+  .rte-minimal :global(h4) { @apply text-base font-medium mt-1.5 mb-0.5; }
+  .rte-minimal :global(a) { @apply text-blue-500 underline; }
+  .rte-minimal :global(blockquote) {
+    @apply border-gray-400 bg-transparent;
+  }
+
+  /* ═══════════════════════════════════════════════
+     SOURCE MODE
+     ═══════════════════════════════════════════════ */
+  .rte-source-wrapper {
+    @apply relative flex overflow-hidden;
+    background: #0d1117;
+  }
+
+  .rte-line-numbers {
+    @apply shrink-0 py-4 text-right select-none overflow-hidden;
+    width: 48px;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.8125rem;
+    line-height: 1.625;
+    color: #484f58;
+    border-right: 1px solid #21262d;
+  }
+
+  .rte-line-numbers :global(div) { padding-right: 12px; }
+
+  .rte-highlight-layer {
+    @apply absolute top-0 right-0 bottom-0 p-4 whitespace-pre overflow-hidden pointer-events-none;
+    left: 48px;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.8125rem;
+    line-height: 1.625;
+    color: #c9d1d9;
+  }
+
+  .rte-source-textarea {
+    @apply absolute top-0 right-0 bottom-0 p-4 m-0 border-none outline-none resize-none whitespace-pre overflow-auto;
+    left: 48px;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.8125rem;
+    line-height: 1.625;
+    color: transparent;
+    caret-color: #c9d1d9;
+    background: transparent;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .rte-highlight-layer :global(.hl-tag) { color: #7ee787; }
+  .rte-highlight-layer :global(.hl-bracket) { color: #8b949e; }
+  .rte-highlight-layer :global(.hl-attr) { color: #79c0ff; }
+  .rte-highlight-layer :global(.hl-eq) { color: #8b949e; }
+  .rte-highlight-layer :global(.hl-val) { color: #a5d6ff; }
+  .rte-highlight-layer :global(.hl-comment) { color: #484f58; font-style: italic; }
+
+  /* ═══════════════════════════════════════════════
+     CONTEXT MENU
+     ═══════════════════════════════════════════════ */
+  .ctx-menu {
+    @apply fixed z-[61] w-56 rounded-xl shadow-2xl shadow-black/30 backdrop-blur-xl overflow-hidden;
+    border: 1px solid var(--karbon-border);
+    background: var(--karbon-bg-card);
+  }
+
+  .ctx-header {
+    @apply px-3 py-2 text-[11px] font-semibold uppercase tracking-wider;
+    border-bottom: 1px solid var(--karbon-border);
+    background: color-mix(in srgb, var(--karbon-bg-2) 50%, transparent);
+    color: var(--karbon-text-4);
+  }
+
+  .ctx-item {
+    @apply flex items-center gap-2 w-full text-left px-3 py-[7px] text-xs bg-transparent border-none cursor-pointer transition-all;
+    color: var(--karbon-text-2);
+  }
+
+  .ctx-item:hover {
+    background: rgba(139, 92, 246, 0.08);
+    color: var(--karbon-text);
+  }
+
+  .ctx-danger { @apply text-red-400; }
+  .ctx-danger:hover { @apply bg-red-500/10 text-red-500; }
+  .ctx-warn { @apply text-amber-400; }
+  .ctx-warn:hover { @apply bg-amber-500/10 text-amber-500; }
+
+  .ctx-divider {
+    @apply py-1;
+    border-top: 1px solid var(--karbon-border);
+  }
+
+  .ctx-section-title {
+    @apply px-3 py-1 text-[10px] font-semibold uppercase tracking-wider;
+    color: var(--karbon-text-4);
+  }
+
+  /* ═══════════════════════════════════════════════
+     MODALS
+     ═══════════════════════════════════════════════ */
+  .rte-overlay {
+    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm;
+  }
+
+  .rte-modal {
+    @apply w-full rounded-xl p-6 shadow-2xl;
+    border: 1px solid var(--karbon-border);
+    background: var(--karbon-bg-card);
+  }
+
+  .rte-modal-header {
+    @apply flex items-center justify-between mb-4;
+  }
+
+  .rte-modal-header h3 {
+    @apply text-sm font-semibold;
+    color: var(--karbon-text);
+  }
+
+  .rte-modal-close {
+    @apply cursor-pointer bg-transparent border-none;
+    color: var(--karbon-text-4);
+  }
+
+  .rte-modal-close:hover {
+    color: var(--karbon-text);
+  }
+
+  .rte-modal-footer {
+    @apply mt-5 flex items-center gap-2;
+  }
+
+  .rte-input {
+    @apply block w-full rounded-lg px-3 py-2 text-sm outline-none transition-colors;
+    border: 1px solid var(--karbon-border-input);
+    background: var(--karbon-bg-input);
+    color: var(--karbon-text);
+  }
+
+  .rte-input:focus {
+    border-color: var(--karbon-border-input-focus);
+  }
+
+  .rte-label {
+    @apply block text-xs font-medium;
+    color: var(--karbon-text-4);
+  }
+
+  .rte-label-inline {
+    @apply text-sm;
+    color: var(--karbon-text-2);
+  }
+
+  .rte-btn-primary {
+    @apply rounded-lg bg-violet-600 px-3 py-1.5 text-xs font-medium text-white cursor-pointer;
+  }
+
+  .rte-btn-primary:hover { @apply bg-violet-700; }
+  .rte-btn-primary:disabled { @apply opacity-40 cursor-not-allowed; }
+
+  .rte-btn-cancel {
+    @apply rounded-lg px-3 py-1.5 text-xs cursor-pointer;
+    border: 1px solid var(--karbon-border);
+    color: var(--karbon-text-3);
+  }
+
+  .rte-btn-cancel:hover {
+    background: var(--karbon-bg-2);
+  }
+
+  .rte-btn-danger-text {
+    @apply text-xs text-red-400 cursor-pointer bg-transparent border-none;
+  }
+
+  .rte-btn-danger-text:hover { @apply text-red-300; }
+
+  .rte-upload-zone {
+    @apply flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-4 transition-colors;
+    border-color: var(--karbon-border);
+  }
+
+  .rte-upload-zone:hover {
+    border-color: var(--karbon-border-input);
+  }
+
+  .rte-preview-box {
+    @apply rounded-lg overflow-hidden;
+    border: 1px solid var(--karbon-border);
+    background: var(--karbon-bg-2);
+  }
+
+  .rte-align-btn {
+    @apply rounded-md px-3 py-1.5 text-xs transition-colors cursor-pointer;
+    color: var(--karbon-text-3);
+  }
+
+  .rte-align-btn:hover {
+    background: var(--karbon-bg-2);
+  }
+
+  .rte-align-btn-active {
+    @apply bg-violet-500/15 text-violet-400 ring-1 ring-violet-500/30;
+  }
+
+  /* ═══════════════════════════════════════════════
+     COLOR PICKER
+     ═══════════════════════════════════════════════ */
+  .rte-color-grid {
+    @apply absolute left-0 top-full z-20 mt-1 grid grid-cols-8 gap-1 rounded-lg p-2 shadow-xl;
+    border: 1px solid var(--karbon-border);
+    background: var(--karbon-bg-card);
+  }
+
+  .rte-color-swatch {
+    @apply h-5 w-5 rounded cursor-pointer transition-transform;
+    border: 1px solid var(--karbon-border);
+  }
+
+  .rte-color-swatch:hover { @apply scale-125; }
+
+  /* ═══════════════════════════════════════════════
+     MEDIA EXPLORER
+     ═══════════════════════════════════════════════ */
+  .rte-media-explorer {
+    @apply flex flex-col rounded-2xl shadow-2xl overflow-hidden;
+    height: 85vh;
+    width: 90vw;
+    max-width: 64rem;
+    border: 1px solid var(--karbon-border);
+    background: var(--karbon-bg-card);
+  }
+
+  .rte-media-header {
+    @apply flex items-center gap-3 px-5 py-3;
+    border-bottom: 1px solid var(--karbon-border);
+    color: var(--karbon-text);
+  }
+
+  .rte-media-toolbar {
+    @apply flex items-center gap-2 px-5 py-2;
+    border-bottom: 1px solid var(--karbon-border);
+    background: color-mix(in srgb, var(--karbon-bg-2) 50%, transparent);
+  }
+
+  .rte-media-breadcrumb {
+    @apply flex items-center gap-1 text-xs ml-2;
+    color: var(--karbon-text-4);
+  }
+
+  .rte-media-action-btn {
+    @apply flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium cursor-pointer bg-transparent border-none transition-colors;
+    color: var(--karbon-text-3);
+  }
+
+  .rte-media-action-btn:hover {
+    background: var(--karbon-bg-2);
+  }
+
+  .rte-media-upload-btn {
+    @apply flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-violet-400 cursor-pointer transition-colors;
+    background: rgba(139, 92, 246, 0.1);
+  }
+
+  .rte-media-upload-btn:hover {
+    background: rgba(139, 92, 246, 0.2);
+  }
+
+  .rte-media-view-toggle {
+    @apply flex items-center rounded-lg overflow-hidden;
+    border: 1px solid var(--karbon-border-input);
+  }
+
+  .rte-media-newfolder {
+    @apply flex items-center gap-2 px-5 py-2;
+    border-bottom: 1px solid var(--karbon-border);
+    background: rgba(139, 92, 246, 0.05);
+  }
+
+  .rte-media-content {
+    @apply relative flex-1 overflow-y-auto p-4;
+  }
+
+  .rte-media-overlay {
+    @apply absolute inset-0 z-10 flex flex-col items-center justify-center backdrop-blur-sm;
+    background: color-mix(in srgb, var(--karbon-bg-card) 80%, transparent);
+  }
+
+  .rte-media-footer {
+    @apply flex items-center gap-3 px-5 py-3;
+    border-top: 1px solid var(--karbon-border);
+    background: color-mix(in srgb, var(--karbon-bg-2) 50%, transparent);
+  }
+
+  .rte-media-item {
+    @apply flex flex-col items-center rounded-lg p-2 cursor-pointer transition-all;
+  }
+
+  .rte-media-item:hover {
+    background: var(--karbon-bg-2);
+  }
+
+  .rte-media-item-selected {
+    @apply bg-violet-500/15 ring-1 ring-violet-500/40;
+  }
+
+  .rte-media-thumb {
+    @apply h-16 w-16 overflow-hidden rounded-md;
+    background: var(--karbon-bg-2);
+  }
+
+  .rte-media-list {
+    @apply rounded-lg overflow-hidden;
+    border: 1px solid var(--karbon-border);
+  }
+
+  .rte-media-list-item {
+    @apply flex items-center gap-3 px-4 py-2 cursor-pointer transition-colors;
+  }
+
+  .rte-media-list-item:hover {
+    background: var(--karbon-bg-2);
+  }
+
+  .rte-media-list-divider {
+    border-top: 1px solid var(--karbon-border);
+  }
+
+  .rte-media-list-thumb {
+    @apply h-8 w-8 shrink-0 rounded object-cover;
+    background: var(--karbon-bg-2);
+  }
+</style>