Files
html/claude-monitor.html
Opus 0478ed2d00
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled
phase44 doctrine 182 inject 17 pages PRIO2 dashboards+monitors - 92 pages UX total
17 pages injectees via inject-d60-direct.py:
- acquired-dashboard brain-center-tenant claude-monitor
- command-center contacts-segmentation-dashboard crm-dashboard-live
- crons-monitor dashboards-index database-dashboard-live
- dg-command-center director-center e2e-dashboard em-dashboard
- ethica-dashboard-live ethica-monitor infra-dashboard-live
- lean6sigma-dashboard

Total session cumul: 92 pages UX doctrine 60 (75 + 17)
Tags Opus: 30
Doctrines vault: 27 (146-182)

ZERO regression. Train multi-Claude sync:
- autre Claude opus_disaster_recovery (187 intents)
- autre Claude opus_cyber_profile_manager
- NR 153/153 invariant
2026-04-24 14:19:03 +02:00

292 lines
23 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Claude Sync Monitor</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#0a0e1a;--sf:#111827;--sf2:#1a2234;--bd:rgba(255,255,255,0.06);--t1:#e2e8f0;--t2:#94a3b8;--t3:#64748b;--accent:#6d5acd;--green:#22c55e;--amber:#f59e0b;--red:#ef4444;--blue:#3b82f6;--cyan:#06b6d4;--opus1:#6d5acd;--opus2:#3b82f6;--opus3:#06b6d4}
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--t1);font-family:'DM Sans',sans-serif;min-height:100vh}
.header{padding:20px 30px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.header h1{font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:10px}.header h1 .logo{width:32px;height:32px;background:linear-gradient(135deg,var(--opus1),var(--opus2));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff}
.header .meta{font-size:.75rem;color:var(--t3);font-family:'JetBrains Mono',monospace}
.btn{padding:6px 14px;border-radius:6px;border:1px solid var(--bd);background:var(--sf);color:var(--t2);font-size:.75rem;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}.btn:hover{background:var(--sf2);color:var(--t1)}.btn-accent{background:var(--accent);color:#fff;border-color:transparent}.btn-accent:hover{opacity:.85}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 30px}@media(max-width:900px){.grid{grid-template-columns:1fr}}
.account-card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:20px;position:relative;overflow:hidden}
.account-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.account-card.opus-1::before{background:var(--opus1)}.account-card.opus-2::before{background:var(--opus2)}.account-card.opus-3::before{background:var(--opus3)}
.ac-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}.ac-name{font-weight:700;font-size:1rem}
.ac-badge{padding:2px 8px;border-radius:10px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ac-badge.active{background:rgba(34,197,94,0.12);color:var(--green)}.ac-badge.idle{background:rgba(245,158,11,0.12);color:var(--amber)}.ac-badge.offline{background:rgba(239,68,68,0.12);color:var(--red)}
.ac-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.ac-stat{background:var(--bg);padding:10px;border-radius:8px}
.ac-stat-value{font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700}.ac-stat-label{font-size:.65rem;color:var(--t3);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.ac-last-sync{font-size:.7rem;color:var(--t3);font-family:'JetBrains Mono',monospace;margin-top:8px;padding-top:10px;border-top:1px solid var(--bd)}
.ac-transcript{font-size:.7rem;color:var(--t2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section{padding:0 30px 20px}.section-title{font-size:.85rem;font-weight:700;color:var(--t2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.totals{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0 30px 20px}@media(max-width:900px){.totals{grid-template-columns:repeat(2,1fr)}}
.total-card{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:16px;text-align:center}
.total-val{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:700}.total-label{font-size:.7rem;color:var(--t3);margin-top:4px}
.total-card.purple .total-val{color:var(--opus1)}.total-card.blue .total-val{color:var(--blue)}.total-card.green .total-val{color:var(--green)}.total-card.amber .total-val{color:var(--amber)}.total-card.cyan .total-val{color:var(--cyan)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 30px 20px}@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.panel{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:16px}.panel h3{font-size:.85rem;font-weight:700;margin-bottom:10px;color:var(--t2)}
.type-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bd);font-size:.78rem}.type-row:last-child{border:none}
.src-bar{height:6px;border-radius:3px;margin-top:6px;display:flex;overflow:hidden;gap:1px}.src-bar div{height:100%;border-radius:2px}
table{width:100%;border-collapse:collapse;font-size:.78rem}th{text-align:left;padding:8px 12px;color:var(--t3);font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bd)}
td{padding:7px 12px;border-bottom:1px solid var(--bd);color:var(--t2)}tr:hover td{background:rgba(255,255,255,0.02)}
.tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:.6rem;font-weight:600}
.tag.opus-1{background:rgba(109,90,205,0.15);color:var(--opus1)}.tag.opus-2{background:rgba(59,130,246,0.15);color:var(--opus2)}.tag.opus-3{background:rgba(6,182,212,0.15);color:var(--opus3)}
.tag.transcript{background:rgba(34,197,94,0.12);color:var(--green)}.tag.output{background:rgba(245,158,11,0.12);color:var(--amber)}.tag.desktop{background:rgba(59,130,246,0.12);color:var(--blue)}
#loading{text-align:center;padding:60px;color:var(--t3)}.pulse{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* === WEVIA Gemini Rolling v2 VISIBLE Enrichment (wave 306 batch) === */
.kpi,[class*="card"],[class*="panel"],[class*="room"],.stat-card,.metric-card,.hub-card,.widget,.stat,.box{position:relative!important}
.kpi,[class*="card"],.stat-card,.metric-card,.hub-card{animation:geV2Entrance .8s cubic-bezier(.34,1.56,.64,1) backwards}
.kpi:nth-child(1),[class*="card"]:nth-child(1){animation-delay:0s}
.kpi:nth-child(2),[class*="card"]:nth-child(2){animation-delay:.09s}
.kpi:nth-child(3),[class*="card"]:nth-child(3){animation-delay:.18s}
.kpi:nth-child(4),[class*="card"]:nth-child(4){animation-delay:.27s}
.kpi:nth-child(5),[class*="card"]:nth-child(5){animation-delay:.36s}
.kpi:nth-child(6),[class*="card"]:nth-child(6){animation-delay:.45s}
@keyframes geV2Entrance{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.kpi,[class*="card"],.stat-card,.metric-card,.hub-card,.widget{border:1px solid transparent!important;box-shadow:0 0 0 1px rgba(236,72,153,.15),0 4px 16px rgba(0,0,0,.25)!important;transition:box-shadow .4s,transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s!important}
.kpi:hover,[class*="card"]:hover,.stat-card:hover,.metric-card:hover,.hub-card:hover{transform:translateY(-6px) scale(1.03)!important;filter:brightness(1.2)!important;box-shadow:0 0 0 2px rgba(236,72,153,.6),0 12px 32px rgba(236,72,153,.25),0 0 24px rgba(78,205,196,.2)!important}
.kpi::before,[class*="card"]::before,.stat-card::before,.metric-card::before,.hub-card::before{content:"";position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#2ed573,#1a9a4e);box-shadow:0 0 12px #2ed573,0 0 24px rgba(46,213,115,.5);animation:geV2Pulse 1.6s ease-out infinite;z-index:100;pointer-events:none}
@keyframes geV2Pulse{0%{transform:scale(1);box-shadow:0 0 12px #2ed573,0 0 24px rgba(46,213,115,.5)}50%{transform:scale(1.4);box-shadow:0 0 20px #2ed573,0 0 40px rgba(46,213,115,.8)}100%{transform:scale(1);box-shadow:0 0 12px #2ed573,0 0 24px rgba(46,213,115,.5)}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 30%,transparent 40%,rgba(236,72,153,.06) 100%),radial-gradient(ellipse at 30% 70%,transparent 40%,rgba(78,205,196,.04) 100%);animation:geV2Ambient 10s ease-in-out infinite;z-index:0}
@keyframes geV2Ambient{0%,100%{opacity:.5}50%{opacity:1}}
h1,.header-title,.main-title,.hub-title,.page-title{background-image:linear-gradient(90deg,currentColor 0%,currentColor 40%,rgba(236,72,153,1) 50%,currentColor 60%,currentColor 100%)!important;background-size:200% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:geV2Shimmer 5s linear infinite!important}
@keyframes geV2Shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
/* Doctrine zero chevauchement - hide common offenders */
.opus-x-btn,.toggle-top-right-btn,.fab-corner{display:none!important}
/* === end WEVIA Gemini Rolling v2 batch === */
</style>
<!-- DOCTRINE-60-UX-ENRICH direct-inject-20260424-141837 -->
<style id="doctrine60-ux-direct">
/* DOCTRINE-60-UX-ENRICH injected-direct */
body::before {
content: '';
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background: radial-gradient(circle at 50% 50%, rgba(100,180,255,0.08), transparent 60%);
pointer-events: none;
z-index: -1;
}
.card, .kpi, .panel, .btn {
transition: all 0.3s cubic-bezier(0.2,0,0.1,1);
}
.card:hover, .kpi:hover, .panel:hover {
box-shadow: 0 4px 20px rgba(100,180,255,0.2);
border-color: rgba(100,180,255,0.5);
}
@keyframes pulseD60 {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
.pulse, .live-indicator, .active, .online {
animation: pulseD60 3s ease-in-out infinite;
}
.modal, .chat, .speech, .overlay {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.enter-stagger {
animation: enterStagD60 0.5s cubic-bezier(0.2,0,0.1,1) forwards;
}
@keyframes enterStagD60 {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="header">
<h1><div class="logo">C</div> Claude Sync Monitor</h1>
<div class="meta" id="last-update"></div>
<div><button class="btn btn-accent" onclick="loadData()">Rafraichir</button></div>
</div>
<div id="loading" class="pulse">Chargement...</div>
<div id="content" style="display:none">
<div class="totals" id="totals"></div>
<div class="grid" id="accounts"></div>
<div class="two-col">
<div class="panel"><h3>Sources de Documents</h3><div id="sources-panel"></div></div>
<div class="panel"><h3>Types de Fichiers</h3><div id="types-panel"></div></div>
</div>
<div class="section">
<div class="section-title">Derniers Documents Claude</div>
<table><thead><tr><th>Fichier</th><th>Type</th><th>Compte</th><th>Source</th><th>Taille</th><th>Synced</th></tr></thead><tbody id="recent-table"></tbody></table>
</div>
</div>
<script>
const API='/products/wevialife-api.php';
const TI={'txt':'📄','md':'📝','pdf':'📕','docx':'📘','xlsx':'📊','pptx':'📙','csv':'📋','json':'⚙️','log':'🗒️'};
const SC={'desktop_sync':'#3b82f6','claude_transcript':'#22c55e','claude_output':'#f59e0b','system':'#64748b','upload':'#06b6d4'};
const SL={'desktop_sync':'Razer Blade','claude_transcript':'Transcripts','claude_output':'Outputs Claude','system':'Systeme','upload':'Upload'};
function fmt(b){if(b>1048576)return(b/1048576).toFixed(1)+' MB';if(b>1024)return(b/1024).toFixed(0)+' KB';return b+' B'}
async function loadData(){
try{
const d=await fetch(API+'?action=claude_sync').then(r=>r.text().then(t=>{/* HTML_GUARD_V2_BATCH */var q=(t||"").trim();if(q.startsWith("<!DOCTYPE")||q.startsWith("<html")){return{error:"[HTTP "+r.status+"]",isHtmlError:true}}try{return JSON.parse(q)}catch(e){return{error:"JSON "+e.message}}}));
document.getElementById('loading').style.display='none';
document.getElementById('content').style.display='block';
document.getElementById('last-update').textContent=new Date().toLocaleTimeString('fr-FR');
const accs=d.accounts||[],allSrc=d.all_sources||[],bySrc=d.by_source||[];
const tAll=allSrc.reduce((s,x)=>s+(+x.cnt),0),sAll=allSrc.reduce((s,x)=>s+(+x.sz),0);
document.getElementById('totals').innerHTML=`
<div class="total-card purple"><div class="total-val">${accs.length}</div><div class="total-label">Comptes Claude</div></div>
<div class="total-card green"><div class="total-val">${accs.filter(a=>a.last_sync).length}</div><div class="total-label">Actifs</div></div>
<div class="total-card blue"><div class="total-val">${d.total_docs||0}</div><div class="total-label">Claude Docs</div></div>
<div class="total-card cyan"><div class="total-val">${tAll}</div><div class="total-label">Total Tous Docs</div></div>
<div class="total-card amber"><div class="total-val">${fmt(sAll)}</div><div class="total-label">Volume Total</div></div>`;
document.getElementById('accounts').innerHTML=accs.map(a=>{
const bg=a.last_sync?'active':'offline';
return`<div class="account-card ${a.account_id}"><div class="ac-header"><div class="ac-name">${a.account_name||a.account_id}</div><div class="ac-badge ${bg}">${bg}</div></div>
<div class="ac-stats"><div class="ac-stat"><div class="ac-stat-value">${a.total_transcripts||0}</div><div class="ac-stat-label">Documents</div></div><div class="ac-stat"><div class="ac-stat-value">${fmt(a.total_size_bytes||0)}</div><div class="ac-stat-label">Volume</div></div></div>
<div class="ac-last-sync">Sync: ${a.last_sync?new Date(a.last_sync).toLocaleString('fr-FR'):'Jamais'}</div>
<div class="ac-transcript">${a.last_transcript||'—'}</div></div>`}).join('');
document.getElementById('sources-panel').innerHTML=allSrc.map(s=>`<div class="type-row"><span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${SC[s.source]||'#666'};margin-right:6px"></span>${SL[s.source]||s.source}</span><span style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${s.cnt} · ${fmt(+s.sz)}</span></div>`).join('')+
`<div class="src-bar">${allSrc.map(s=>`<div style="width:${Math.max(2,(+s.cnt/tAll*100))}%;background:${SC[s.source]||'#666'}"></div>`).join('')}</div>`;
const tm={};bySrc.forEach(b=>{tm[b.filetype]=(tm[b.filetype]||0)+(+b.cnt)});
document.getElementById('types-panel').innerHTML=Object.entries(tm).sort((a,b)=>b[1]-a[1]).map(([t,c])=>`<div class="type-row"><span>${TI[t]||'📄'} .${t}</span><span style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${c}</span></div>`).join('');
const stag=s=>s==='claude_output'?'output':s==='claude_transcript'?'transcript':'desktop';
document.getElementById('recent-table').innerHTML=(d.recent||[]).map(r=>`<tr>
<td style="font-family:'JetBrains Mono',monospace;font-size:.68rem;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${r.filename}">${r.filename}</td>
<td>${TI[r.filetype]||'📄'} .${r.filetype||'?'}</td>
<td><span class="tag ${r.claude_account||''}">${r.claude_account||'—'}</span></td>
<td><span class="tag ${stag(r.source)}">${SL[r.source]||r.source}</span></td>
<td style="font-family:'JetBrains Mono',monospace;font-size:.75rem">${fmt(r.filesize||0)}</td>
<td style="font-size:.7rem;color:var(--t3)">${r.indexed_at?new Date(r.indexed_at).toLocaleString('fr-FR'):'—'}</td></tr>`).join('');
}catch(e){document.getElementById('loading').innerHTML='Erreur: '+e.message}
}
loadData();setInterval(loadData,60000);
</script>
<!-- WAVE 162 — Unified Pipeline Overlay -->
<div id="unifiedLiveOverlay" style="position:fixed;bottom:12px;right:12px;width:280px;max-height:calc(100vh - 120px);overflow-y:auto;background:linear-gradient(135deg,rgba(10,14,26,0.94),rgba(30,30,60,0.92));border:1px solid rgba(6,182,212,0.4);border-radius:10px;padding:10px;backdrop-filter:blur(14px);z-index:9999;font:600 9px Nunito,system-ui;color:#e2e8f0;box-shadow:0 4px 30px rgba(0,0,0,0.5)">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid rgba(100,116,139,0.3)">
<div style="font:900 10px Orbitron,system-ui;color:#06b6d4">🔴 <b id=closeLive style=cursor:pointer;margin-right:6px;color:gray onclick=unifiedLiveOverlay.remove()>x</b>UNIFIED LIVE</div>
<div id="ulo-ts" style="font-size:8px;color:#64748b"></div>
</div>
<div id="ulo-body">Loading...</div>
</div>
<script>
(function(){
const U='/api/weval-unified-pipeline.php';
async function tick(){
try{
const r=await fetch(U,{cache:'no-cache'});
if(!r.ok) return;
/* HTML_GUARD_V2_BATCH */ const _t_d=await r.text(); let d=null; {var _q=(_t_d||"").trim();if(_q.startsWith("<!DOCTYPE")||_q.startsWith("<html")){d={error:"[HTTP "+(r.status||"?")+"] Backend indisponible",isHtmlError:true};}else{try{d=JSON.parse(_q)}catch(e){d={error:"[JSON] "+e.message}}}}
const body=document.getElementById('ulo-body');
const ts=document.getElementById('ulo-ts');
if(!body) return;
const h=d.l99.health||'?';
const hc={GREEN:'#10b981',YELLOW:'#f59e0b',RED:'#ef4444'}[h]||'#64748b';
let html='<div style="background:'+hc+'15;border-left:3px solid '+hc+';padding:5px;margin-bottom:5px;border-radius:3px"><b style="color:'+hc+'">● '+h+'</b> L99 <b>'+d.l99.pass+'/'+d.l99.total+'</b><br><span style="color:#94a3b8">Disk '+d.system.disk_pct+'% Docker '+d.system.docker_count+' Crons '+d.system.cron_count+'</span></div>';
html+='<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:5px"><div style="background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.3);border-radius:4px;padding:4px"><div style="font:800 8px Orbitron;color:#06b6d4">SOVEREIGN</div><b>'+d.providers.count+'</b> providers<br><b>'+d.ollama.models+'</b> Ollama<br><b>'+d.qdrant.collections.length+'</b> Qdrant</div><div style="background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.3);border-radius:4px;padding:4px"><div style="font:800 8px Orbitron;color:#8b5cf6">PAPERCLIP</div><b>'+d.goals.length+'</b> goals<br><b>'+d.projects.length+'</b> projects<br><b>'+d.routines.length+'</b> routines</div></div>';
html+='<div style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:4px;padding:4px;margin-bottom:5px"><div style="font:800 8px Orbitron;color:#f59e0b">ETHICA</div><b>'+(d.ethica.hcps_validated/1000).toFixed(0)+'K</b> HCPs '+d.ethica.coverage.join(' ')+'</div>';
const rpa=d.routines_per_agent||{};
const top=Object.entries(rpa).sort((a,b)=>b[1]-a[1]).slice(0,5);
if(top.length){
html+='<div style="font:800 8px Orbitron;color:#10b981;margin:4px 0">TOP AGENTS</div>';
top.forEach(([n,c])=>{html+='<div style="display:flex;justify-content:space-between;padding:1px 3px;background:rgba(16,185,129,0.05);border-radius:2px;margin-bottom:1px"><span>'+n+'</span><b style="color:#10b981">'+c+'</b></div>';});
}
html+='<div style="margin-top:5px;padding-top:4px;border-top:1px solid rgba(100,116,139,0.3);font-size:8px;color:#64748b;text-align:center"><a href="/wevia-master.html" style="color:#06b6d4">Master</a> · <a href="/agents-archi.html" style="color:#06b6d4">Archi</a> · <a href="/wevia-meeting-rooms.html" style="color:#06b6d4">Rooms</a> · <a href="https://paperclip.weval-consulting.com" style="color:#06b6d4" target="_blank">Paperclip</a></div>';
body.innerHTML=html;
if(ts) ts.textContent=new Date().toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
}catch(e){}
}
setTimeout(tick,1500);setInterval(tick,30000);
})();
</script>
<!-- === OPUS UNIVERSAL DRILL-DOWN v1 19avr — append-only, doctrine #14 === -->
<script>
(function(){
if (window.__opusUniversalDrill) return; window.__opusUniversalDrill = true;
var d = document;
var m = d.createElement('div');
m.id = 'opus-udrill';
m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:99995;padding:20px;cursor:pointer';
var inner = d.createElement('div');
inner.id = 'opus-udrill-in';
inner.style.cssText = 'max-width:900px;width:100%;max-height:90vh;overflow:auto;background:#0b0d15;border:1px solid rgba(99,102,241,0.35);border-radius:14px;padding:28px;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,0.6);color:#e2e8f0;font:14px/1.55 Inter,system-ui,sans-serif';
inner.addEventListener('click', function(e){ e.stopPropagation(); });
m.appendChild(inner);
m.addEventListener('click', function(){ m.style.display='none'; });
d.addEventListener('keydown', function(e){ if(e.key==='Escape') m.style.display='none'; });
(d.body || d.documentElement).appendChild(m);
function openCard(card) {
// Clone card content + show close btn + increase font-size
var html = '<div style="display:flex;justify-content:flex-end;margin-bottom:14px"><button id="opus-udrill-close" style="padding:6px 14px;background:#171b2a;border:1px solid rgba(99,102,241,0.25);color:#e2e8f0;border-radius:8px;cursor:pointer;font-size:12px">✕ Fermer (Esc)</button></div>';
html += '<div style="transform-origin:top left;font-size:1.05em">' + card.outerHTML + '</div>';
inner.innerHTML = html;
d.getElementById('opus-udrill-close').onclick = function(){ m.style.display='none'; };
m.style.display = 'flex';
}
function wire(root) {
var sels = '.card,[class*="card"],.kpi,[class*="kpi"],.stat,[class*="stat"],.tile,[class*="tile"],.metric,[class*="metric"],.widget,[class*="widget"]';
var cards = root.querySelectorAll(sels);
for (var i = 0; i < cards.length; i++) {
var c = cards[i];
if (c.__opusWired) continue;
if (c.closest('button, a, input, select, textarea, #opus-udrill')) continue;
var r = c.getBoundingClientRect();
if (r.width < 60 || r.height < 40) continue;
c.__opusWired = true;
c.style.cursor = 'pointer';
c.setAttribute('role','button');
c.setAttribute('tabindex','0');
c.addEventListener('click', function(ev){
// If a more-specific drill is already active (e.g. pp-card custom), let it handle
if (ev.target.closest('[data-pp-id]') && window.__opusDrillInit) return;
if (ev.target.closest('a,button,input,select')) return;
ev.preventDefault(); ev.stopPropagation();
openCard(this);
});
c.addEventListener('keydown', function(ev){ if(ev.key==='Enter'||ev.key===' '){ev.preventDefault();openCard(this);} });
}
}
// Initial + mutation observer
var initRun = function(){ wire(d.body || d.documentElement); };
if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', initRun);
else initRun();
var mo = new MutationObserver(function(muts){
var newCard = false;
for (var i=0;i<muts.length;i++) if (muts[i].addedNodes.length) { newCard = true; break; }
if (newCard) initRun();
});
mo.observe(d.body || d.documentElement, {childList:true, subtree:true});
})();
</script>
<!-- === OPUS UNIVERSAL DRILL-DOWN END === -->
<script src="/api/a11y-auto-enhancer.js" defer></script>
<!-- WTP_UDOCK_V1 (Opus 21-avr t33b6) --><script src="/wtp-unified-dock.js" defer></script>
<script src="/opus-antioverlap-doctrine.js?v=1776776094" defer></script>
<!-- DOCTRINE-60-UX-JS --><script id="doctrine60-ux-js-direct">
// DOCTRINE-60-UX-JS staggered entrance
(function(){
if (!('IntersectionObserver' in window)) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((e, i) => {
if (e.isIntersecting) {
setTimeout(() => e.target.classList.add('enter-stagger'), i * 80);
obs.unobserve(e.target);
}
});
});
document.querySelectorAll('.card, .kpi, .panel').forEach(el => obs.observe(el));
})();
</script>
</body>
</html>