feat: add copy-to-clipboard button on code blocks in viewer + popout

- CSS: .code-block-wrapper with relative positioning
- CSS: .copy-code-btn with hover opacity transition (hidden until hover)
- CSS: .copied state (green accent) after successful copy
- viewer.js: wraps each <pre> in .code-block-wrapper + appends copy button
- popout.html: same logic with vanilla JS (ES5 compatible)
- Button: 'Copier' → '✓ Copié' on click, reverts after 2s
- Toast: showToast('Code copié dans le presse-papiers') via navigator.clipboard

frontend/popout.html

@@ -893,24 +893,47 @@ const RightSidebarManager = {
         OutlineManager.init(); RightSidebarManager.init();
 
         // Mermaid + code highlighting handled below FIRST (before highlight.js)
+        function highlightCode() {
+          document.querySelectorAll('pre code:not(.language-mermaid)').forEach((el) => {
+            if (typeof hljs !== 'undefined') hljs.highlightElement(el);
+          });
+        }
+        function addCopyButtons() {
+          document.querySelectorAll('pre').forEach((pre) => {
+            if (pre.parentElement && pre.parentElement.classList.contains('code-block-wrapper')) return;
+            var wrapper = document.createElement('div');
+            wrapper.className = 'code-block-wrapper';
+            wrapper.style.position = 'relative';
+            pre.replaceWith(wrapper);
+            wrapper.appendChild(pre);
+            var btn = document.createElement('button');
+            btn.className = 'copy-code-btn';
+            btn.title = 'Copier le code';
+            btn.textContent = 'Copier';
+            btn.addEventListener('click', function(e) {
+              e.stopPropagation();
+              var code = (pre.querySelector('code') || pre).textContent;
+              navigator.clipboard.writeText(code).then(function() {
+                btn.textContent = '✓ Copié';
+                btn.classList.add('copied');
+                setTimeout(function() { btn.textContent = 'Copier'; btn.classList.remove('copied'); }, 2000);
+              }).catch(function() {});
+            });
+            wrapper.appendChild(btn);
+          });
+        }
         if (typeof mermaid !== 'undefined') {
           mermaid.initialize({ startOnLoad: false, theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' });
           mermaid.run({ querySelector: '.language-mermaid' }).then(() => {
-            // After Mermaid renders, highlight remaining code blocks (skip mermaid SVGs)
-            document.querySelectorAll('pre code:not(.language-mermaid)').forEach((el) => {
-              if (typeof hljs !== 'undefined') hljs.highlightElement(el);
-            });
+            highlightCode();
+            addCopyButtons();
           }).catch(() => {
-            // Mermaid failed — highlight everything else anyway
-            document.querySelectorAll('pre code:not(.language-mermaid)').forEach((el) => {
-              if (typeof hljs !== 'undefined') hljs.highlightElement(el);
-            });
+            highlightCode();
+            addCopyButtons();
           });
         } else {
-          // No mermaid — just highlight code
-          document.querySelectorAll('pre code').forEach((el) => {
-            if (typeof hljs !== 'undefined') hljs.highlightElement(el);
-          });
+          highlightCode();
+          addCopyButtons();
         }
 
         // Hide loading