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/js/viewer.js

@@ -672,6 +672,31 @@ export function renderFile(data) {
     safeHighlight(block);
   });
 
+  // Add copy buttons to code blocks
+  area.querySelectorAll("pre").forEach((pre) => {
+    if (pre.parentElement?.classList.contains("code-block-wrapper")) return;
+    const wrapper = el("div", { class: "code-block-wrapper" }, []);
+    wrapper.style.position = "relative";
+    pre.replaceWith(wrapper);
+    wrapper.appendChild(pre);
+
+    const btn = el("button", { class: "copy-code-btn", title: "Copier le code" }, [document.createTextNode("Copier")]);
+    btn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      const code = pre.querySelector("code")?.textContent || pre.textContent;
+      try {
+        await navigator.clipboard.writeText(code);
+        btn.textContent = "✓ Copié";
+        btn.classList.add("copied");
+        if (typeof showToast === "function") showToast("Code copié dans le presse-papiers", "success");
+        setTimeout(() => { btn.textContent = "Copier"; btn.classList.remove("copied"); }, 2000);
+      } catch {
+        if (typeof showToast === "function") showToast("Erreur lors de la copie", "error");
+      }
+    });
+    wrapper.appendChild(btn);
+  });
+
   // Render Mermaid diagrams
   renderMermaidBlocks(area);