diff --git a/wevia.html b/wevia.html
index 7b3690af1..c5ea63254 100644
--- a/wevia.html
+++ b/wevia.html
@@ -3400,5 +3400,99 @@ function addSmartThinkSteps(query) {
 <script src="/api/a11y-auto-enhancer.js" defer></script>
 <!-- nav dock --><script src="/wtp-unified-dock.js" defer></script>
 <script src="/opus-antioverlap-doctrine.js?v=1776776094" defer></script>
+
+<!-- Opus v17 · Claude Pattern SSE (auto-injected) -->
+<style id="opus-pattern-style">
+#opus-pattern-badge{position:fixed;bottom:20px;right:20px;z-index:99990;
+  background:linear-gradient(135deg,#06b6d4,#8b5cf6);color:#fff;
+  padding:10px 16px;border-radius:20px;font:700 0.78rem -apple-system,sans-serif;
+  cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.35);transition:all 0.2s;
+  display:flex;align-items:center;gap:6px}
+#opus-pattern-badge:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(6,182,212,0.4)}
+#opus-pattern-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);
+  z-index:99991;align-items:center;justify-content:center;padding:20px}
+#opus-pattern-modal.show{display:flex}
+#opus-pattern-box{background:#0b0d15;color:#e2e8f0;border:1px solid rgba(6,182,212,0.3);
+  border-radius:14px;padding:22px;max-width:820px;width:100%;max-height:85vh;overflow:auto;
+  font:-apple-system,sans-serif}
+#opus-pattern-box h3{font:800 1.2rem;margin-bottom:12px;
+  background:linear-gradient(135deg,#06b6d4,#ec4899);
+  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
+#opus-pattern-input{width:100%;background:#1a1f3a;color:#fff;border:1px solid rgba(100,116,139,0.3);
+  border-radius:8px;padding:10px;margin-bottom:10px;font:0.9rem -apple-system}
+#opus-pattern-run{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border:0;
+  padding:10px 20px;border-radius:8px;font:700 0.85rem;cursor:pointer;margin-bottom:14px}
+.phase-card{background:rgba(15,23,42,0.8);border:1px solid rgba(100,116,139,0.2);
+  border-left:3px solid #06b6d4;border-radius:8px;padding:10px 14px;margin-bottom:8px;
+  font-size:0.82rem}
+.phase-card.done{border-left-color:#22c55e}
+.phase-card.active{border-left-color:#f59e0b;animation:pulse 1.2s ease infinite}
+.phase-name{font-weight:800;color:#06b6d4;margin-bottom:4px;font-size:0.78rem;text-transform:uppercase;letter-spacing:1px}
+.phase-data{font-size:0.72rem;color:#94a3b8;font-family:ui-monospace,monospace}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
+#opus-pattern-close{position:absolute;top:14px;right:20px;background:0;border:0;color:#94a3b8;
+  font-size:1.6rem;cursor:pointer}
+</style>
+<div id="opus-pattern-badge" onclick="window.__opusPatternOpen()">
+  <span>🧠</span><span>Claude Pattern</span>
+</div>
+<div id="opus-pattern-modal" onclick="if(event.target.id==='opus-pattern-modal')window.__opusPatternClose()">
+  <div id="opus-pattern-box">
+    <button id="opus-pattern-close" onclick="window.__opusPatternClose()">×</button>
+    <h3>🧠 Claude Pattern · 7 phases REAL (SSE live)</h3>
+    <p style="font-size:0.82rem;color:#94a3b8;margin-bottom:12px">Backend: <b id="opus-pattern-bot">wevia</b> · anti-hallucination · langue naturelle</p>
+    <input id="opus-pattern-input" placeholder="Posez une question (FR ou EN)..." value="bonjour quel est le statut" />
+    <button id="opus-pattern-run" onclick="window.__opusPatternRun()">▶ Lancer (SSE stream)</button>
+    <div id="opus-pattern-output"></div>
+  </div>
+</div>
+<script>
+(function(){
+  const BOT = 'wevia';
+  window.__opusPatternOpen = () => document.getElementById('opus-pattern-modal').classList.add('show');
+  window.__opusPatternClose = () => document.getElementById('opus-pattern-modal').classList.remove('show');
+  window.__opusPatternRun = () => {
+    const msg = document.getElementById('opus-pattern-input').value.trim();
+    if (!msg) return;
+    const out = document.getElementById('opus-pattern-output');
+    out.innerHTML = '';
+    const url = '/api/claude-pattern-sse.php?message=' + encodeURIComponent(msg) + '&chatbot=' + encodeURIComponent(BOT);
+    const es = new EventSource(url);
+    const phases = {};
+    const order = ['thinking','plan','rag','execute','tests','response','critique','done'];
+    order.forEach(p => {
+      const card = document.createElement('div');
+      card.className = 'phase-card';
+      card.id = 'phase-' + p;
+      card.innerHTML = '<div class="phase-name">' + p.toUpperCase() + '</div><div class="phase-data">⏳ waiting...</div>';
+      out.appendChild(card);
+    });
+    order.forEach(evName => {
+      es.addEventListener(evName, (e) => {
+        const data = JSON.parse(e.data);
+        const card = document.getElementById('phase-' + evName);
+        if (card) {
+          card.classList.add('done');
+          card.classList.remove('active');
+          let txt;
+          if (evName === 'response' && data.text) {
+            txt = '<div style="background:rgba(6,182,212,0.1);padding:10px;border-radius:6px;margin-top:6px;color:#e2e8f0;font-size:0.82rem">' + (data.text.substring(0, 600)) + (data.text.length > 600 ? '...' : '') + '</div>';
+          } else if (evName === 'tests') {
+            txt = '<div>' + data.passed + '/' + data.total + ' tests ✓</div>';
+          } else if (evName === 'critique') {
+            txt = '<div>Quality: <b style="color:' + (data.quality === 'EXCELLENT' ? '#22c55e' : (data.quality === 'OK' ? '#f59e0b' : '#ef4444')) + '">' + data.quality + '</b> (' + (data.quality_score * 5).toFixed(0) + '/5)</div>';
+          } else {
+            txt = JSON.stringify(data).substring(0, 300);
+          }
+          card.querySelector('.phase-data').innerHTML = txt;
+        }
+        if (evName === 'done') es.close();
+      });
+    });
+    es.addEventListener('error', () => es.close());
+  };
+})();
+</script>
+
 </body>
 </html>