Files
html/wevia-em-linkedin-carousel.html
opus d5edaa769c
Some checks failed
WEVAL NonReg / nonreg (push) Has been cancelled
auto-sync via WEVIA git_sync_all intent 2026-04-21T14:56:43+02:00
2026-04-21 14:56:43 +02:00

281 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1080,initial-scale=1">
<title>WEVIA Enterprise Model - LinkedIn Video</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#eceef8;--w:#fff;--tx:#1a1a2e;--t2:#555;--t3:#888;--ac:#5b4ce0;--cy:#22c997;--pk:#e84393;--or:#f59e0b;--rd:#ef4444;--bl:#3b82f6;--pu:#8b5cf6;--gr:#10b981;--gls:rgba(255,255,255,.72);--bd:rgba(100,100,150,.12);--sh:0 8px 32px rgba(91,76,224,.08)}
html,body{width:1080px;height:1080px;overflow:hidden;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--tx)}
.deck{position:relative;width:1080px;height:1080px;overflow:hidden}
.sl{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s ease;display:flex;flex-direction:column}
.sl.on{opacity:1;pointer-events:all}
.glass{background:var(--gls);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--sh)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:40px;font-size:13px;font-weight:600}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:12px;background:var(--gls);border:1px solid var(--bd);font-weight:700;font-size:15px}
/* TOPBAR */
.top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:14px;z-index:10}
.top .pill{background:var(--gls);border:1px solid var(--bd)}
.top .dot{width:8px;height:8px;border-radius:50%;background:var(--cy);animation:pulse 2s infinite}
.page{position:absolute;top:16px;right:20px;font-size:14px;color:var(--t3);font-weight:500;z-index:10}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* NAV */
.nav{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(30,30,50,.85);backdrop-filter:blur(12px);border-radius:100px;padding:6px 14px;z-index:50}
.nav .nd{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;border:none;transition:.3s}
.nav .nd.on{background:var(--cy);box-shadow:0 0 8px rgba(34,201,151,.5)}
.nav .ab{background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.4);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px}
/* ===== SLIDE 1 ===== */
.s1{align-items:center;justify-content:flex-start;padding-top:50px;text-align:center;background:linear-gradient(170deg,#e8ecf8 0%,#ede6f6 40%,#e5eef8 100%)}
.s1 .hero-card{width:300px;height:300px;border-radius:20px;overflow:hidden;margin-top:10px;display:flex;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;box-shadow:0 12px 40px rgba(102,126,234,.25)}
.s1 .hero-card .left{flex:1;display:flex;align-items:center;justify-content:center;font-size:80px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}
.s1 .hero-card .right{width:100px;background:rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px}
.s1 .hero-card .right h3{color:#fff;font-size:18px;font-weight:800;line-height:1.1}
.s1 .hero-card .tag{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);padding:10px;text-align:center}
.s1 .hero-card .tag b{color:#fff;font-size:14px}
.s1 .hero-card .tag small{color:rgba(255,255,255,.7);font-size:11px;display:block}
.s1 .brain{font-size:40px;margin:14px 0 6px;filter:drop-shadow(0 4px 8px rgba(91,76,224,.2));padding:8px 28px;background:linear-gradient(135deg,rgba(34,201,151,.15),rgba(91,76,224,.1));border-radius:30px}
.s1 h1{font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.s1 h1 em{font-style:italic;color:var(--ac)}
.s1 .desc{font-size:15px;color:var(--t2);line-height:1.5;max-width:820px;margin:8px auto 0;padding:0 30px}
.s1 .desc b{color:var(--ac)}
.s1 .desc .em{color:var(--cy);font-weight:700}
.s1 .stats{display:flex;gap:14px;margin-top:14px}
.s1 .stats .badge span{font-size:22px;color:var(--ac);margin-right:4px}
.s1 .stats .badge small{color:var(--t2);font-size:12px}
/* ===== SLIDE 2 ===== */
.s2{padding:50px 40px 60px;background:linear-gradient(170deg,#eaecf8,#f0e8f6)}
.s2 h2{text-align:center;font-size:26px;color:var(--t2);margin-bottom:4px;font-weight:500}
.s2 .sub{text-align:center;font-size:14px;color:var(--t3);margin-bottom:20px}
.tier{display:flex;align-items:stretch;gap:12px;margin-bottom:12px;animation:fadeUp .6s ease both}
.tier .label{width:70px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:700;font-size:13px;color:#fff;text-align:center;padding:6px 4px;line-height:1.2}
.tier .content{flex:1;border-radius:14px;padding:14px 18px;background:var(--gls);border:1px solid var(--bd)}
.tier .content h3{font-size:16px;font-weight:700;margin-bottom:2px}
.tier .content .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tier .content .tags span{background:rgba(91,76,224,.06);border:1px solid rgba(91,76,224,.1);border-radius:20px;padding:3px 10px;font-size:12px;display:flex;align-items:center;gap:4px}
.tier .count{width:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:26px;font-weight:800;line-height:1}
.tier .count small{font-size:10px;color:var(--t3);font-weight:500}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.tier:nth-child(3){animation-delay:.1s}.tier:nth-child(4){animation-delay:.2s}.tier:nth-child(5){animation-delay:.3s}.tier:nth-child(6){animation-delay:.4s}
/* ===== SLIDE 3 ===== */
.s3{padding:44px 30px 60px;background:linear-gradient(170deg,#e8f0f8,#eae6f6)}
.s3 .hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.s3 .hdr .br{font-size:22px}
.s3 .hdr b{font-size:17px}
.s3 .hdr small{color:var(--t3);font-size:12px;display:block}
.s3 .live{background:var(--cy);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;animation:pulse 2s infinite}
.s3 .meta{font-size:13px;color:var(--t3);margin-left:auto}
.s3 .meta em{font-style:normal;font-weight:700;color:var(--tx)}
.grid3{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dept{border-radius:12px;padding:12px 14px;border-left:3px solid;background:var(--gls);border-top:1px solid var(--bd);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.dept h4{font-size:13px;font-weight:700;display:flex;align-items:center;gap:5px}
.dept .pipe{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.dept .pipe span{font-size:10px;background:rgba(0,0,0,.04);border-radius:8px;padding:2px 7px;color:var(--t2)}
.dept .pipe span::after{content:'→';margin-left:4px;color:var(--t3);font-size:9px}
.dept .pipe span:last-child::after{content:''}
/* ===== SLIDE 4 ===== */
.s4{padding:50px 40px 60px;background:linear-gradient(170deg,#eceef8,#e8f0f8);align-items:center;text-align:center}
.s4 .tag-deploy{background:linear-gradient(90deg,var(--ac),var(--pu));color:#fff;font-size:14px;font-weight:700;padding:8px 22px;border-radius:30px;margin-bottom:18px}
.s4 h2{font-size:28px;font-weight:700;margin-bottom:6px}
.s4 h2 em{color:var(--cy);font-style:normal}
.s4 .sub4{color:var(--t2);font-size:14px;margin-bottom:20px}
.cards4{display:flex;gap:14px;margin-bottom:20px;width:100%}
.c4{flex:1;border-radius:16px;padding:20px 16px;background:var(--gls);border:1px solid var(--bd);text-align:left}
.c4 .ic4{font-size:36px;margin-bottom:8px}
.c4 h3{font-size:16px;font-weight:700;margin-bottom:4px}
.c4 p{font-size:12px;color:var(--t2);line-height:1.4}
.quote{max-width:860px;border-radius:16px;padding:18px 24px;background:var(--gls);border:1px solid var(--bd);font-size:14px;line-height:1.5;color:var(--t2);margin-bottom:16px}
.quote b{color:var(--tx)}
.s4 .foot{font-size:12px;color:var(--t3)}
.ak-root,.ak-flow-wrapper,[class*="ak-"]{display:none!important}button:last-of-type{visibility:hidden!important}</style>
</head>
<body>
<div class="deck">
<!-- TOPBAR -->
<div class="top"><div class="pill"><span class="dot"></span> LIVE &nbsp;L'IA qui empower vos équipes · Tous secteurs · Tous process</div></div>
<!-- ===== SLIDE 1 ===== -->
<div class="sl s1 on" data-i="0">
<div class="page">1 / 4</div>
<div class="hero-card">
<div class="left">🧑‍⚕️</div>
<div class="right"><h3>WEVIA<br>EM</h3></div>
<div class="tag"><b>Sparring Partner</b><small> Agent IA Pharma </small></div>
</div>
<div class="brain">🧠</div>
<h1>WEVIA <em>Enterprise Model</em></h1>
<div class="desc">
L'IA qui <b>empower vos équipes</b>.<br>
Une plateforme unique qui couvre <b>l'intégralité de vos process métier</b>
Finance, RH, Marketing, Commerce, Supply Chain, Achats, Production,
Qualité, Systèmes d'Information, Cybersécurité.<br>
<span class="em">Empowered by AI</span> : vos équipes se consacrent à l'essentiel — innover, décider, créer de la valeur.
</div>
<div class="stats">
<div class="badge"><span>930</span><small>Agents IA</small></div>
<div class="badge"><span>15</span><small>Départements</small></div>
<div class="badge"><span>153</span><small>Crons 24/7</small></div>
</div>
</div>
<!-- ===== SLIDE 2 ===== -->
<div class="sl s2" data-i="1">
<div class="page">2 / 4</div>
<h2>Architecture WEVIA — 4 Niveaux</h2>
<p class="sub">Du comex à l'infrastructure, WEVIA Master orchestre <b>chaque département</b>, <b>chaque process</b>.</p>
<div class="tier">
<div class="label" style="background:linear-gradient(135deg,#ef4444,#f97316)">N1</div>
<div class="content"><h3>Stratégique — Le Comex décide</h3><div class="tags"><span>👔 CEO</span><span>💰 Finance</span><span>⚖️ Juridique</span><span>📊 Data</span></div></div>
<div class="count" style="color:var(--rd)">52<small>agents</small></div>
</div>
<div class="tier">
<div class="label" style="background:linear-gradient(135deg,#f59e0b,#eab308)">N2</div>
<div class="content"><h3>Tactique — Les métiers pilotent</h3><div class="tags"><span>📢 Marketing</span><span>🛒 Commerce</span><span>👤 RH</span><span>📦 Achats</span><span>🔗 Intégration</span></div></div>
<div class="count" style="color:var(--or)">60<small>agents</small></div>
</div>
<div class="tier">
<div class="label" style="background:linear-gradient(135deg,#10b981,#22c997)">N3</div>
<div class="content"><h3>Opérationnel — La production tourne</h3><div class="tags"><span>🏭 Production</span><span>📦 Supply Chain</span><span>📊 Data &amp; Analytics</span><span>🔍 QA</span><span>🛡️ Cyber</span></div></div>
<div class="count" style="color:var(--gr)">176<small>agents</small></div>
</div>
<div class="tier">
<div class="label" style="background:linear-gradient(135deg,#5b4ce0,#8b5cf6)">N4</div>
<div class="content"><h3>Infrastructure — Le socle opère 24/7</h3><div class="tags"><span>🖥️ Serveurs</span><span>🐳 Docker</span><span>📧 4×MTA</span><span>🧠 IA Engine</span><span>⏰ 153 Crons</span><span>🗄️ 7 KB Qdrant</span></div></div>
<div class="count" style="color:var(--pu)">642<small>agents</small></div>
</div>
<div style="text-align:center;margin-top:6px;font-size:13px;color:var(--t3)">Total : <b style="color:var(--ac);font-size:20px">930</b> agents · <b style="color:var(--ac)">2 484</b> skills · <b style="color:var(--ac)">412</b> tools · <b style="color:var(--cy)">12 LLMs souverains 0€</b></div>
</div>
<!-- ===== SLIDE 3 ===== -->
<div class="sl s3" data-i="2">
<div class="page">3 / 4</div>
<div class="hdr">
<span class="br">🧠</span>
<div><b>WEVIA EM</b><small>VALUE STREAM MAPPING</small></div>
<span class="live">● LIVE</span>
<div class="meta"><em>930</em> agents · <em>15</em> depts · <em>153</em>/153 NonReg</div>
</div>
<div class="grid3">
<div class="dept" style="border-left-color:#ef4444"><h4>👔 Direction</h4><div class="pipe"><span>Décision</span><span>Budget</span><span>Stratégie</span><span>Hiring</span></div></div>
<div class="dept" style="border-left-color:#3b82f6"><h4>💰 Finance</h4><div class="pipe"><span>P&L</span><span>Forecast</span><span>Invoice</span><span>Audit</span></div></div>
<div class="dept" style="border-left-color:#f59e0b"><h4>📢 Marketing</h4><div class="pipe"><span>Ciblage</span><span>Contenu</span><span>Campagne</span><span>Analytics</span></div></div>
<div class="dept" style="border-left-color:#10b981"><h4>🛒 Commerce</h4><div class="pipe"><span>Lead</span><span>CRM</span><span>Devis</span><span>Closing</span></div></div>
<div class="dept" style="border-left-color:#e84393"><h4>👤 RH</h4><div class="pipe"><span>Recruit</span><span>Onboard</span><span>Formation</span><span>Paie</span></div></div>
<div class="dept" style="border-left-color:#8b5cf6"><h4>📦 Supply Chain</h4><div class="pipe"><span>Prévision</span><span>Appro</span><span>Stock</span><span>Livraison</span></div></div>
<div class="dept" style="border-left-color:#22c997"><h4>🏭 Production</h4><div class="pipe"><span>Planif</span><span>Exécution</span><span>Qualité</span><span>MES</span></div></div>
<div class="dept" style="border-left-color:#3b82f6"><h4>💻 SI & Data</h4><div class="pipe"><span>Infra</span><span>ETL</span><span>BI</span><span>Monitoring</span></div></div>
<div class="dept" style="border-left-color:#ef4444"><h4>🛡️ QA & Cyber</h4><div class="pipe"><span>Tests</span><span>NonReg</span><span>Pentest</span><span>SIEM</span></div></div>
<div class="dept" style="border-left-color:#f59e0b"><h4>🏥 Ethica Pharma</h4><div class="pipe"><span>141 661 HCPs</span><span>Consent</span><span>Email</span><span>CRM</span></div></div>
</div>
</div>
<!-- ===== SLIDE 4 ===== -->
<div class="sl s4" data-i="3">
<div class="page">4 / 4</div>
<div class="tag-deploy">📈 Déploiement complet en 3 mois</div>
<h2>Démarrez par un <em>POC gratuit</em></h2>
<p class="sub4">Choisissez un process métier. Nos agents IA s'y déploient et vous voyez les résultats en temps réel.</p>
<div class="cards4">
<div class="c4"><div class="ic4">🎯</div><h3>1. POC sur le process de votre choix</h3><p>Finance, RH, SI, Supply Chain, Commerce… Résultats en 2 semaines.</p></div>
<div class="c4"><div class="ic4">🚀</div><h3>2. Premier MVP — 1 mois</h3><p>Extension à vos process critiques. Brain Center connecté à votre SI, pilotage centralisé.</p></div>
<div class="c4"><div class="ic4">🏢</div><h3>3. Full Enterprise — 3 mois</h3><p>15 depts, 930 agents orchestrés par WEVIA Master. 100% empowered.</p></div>
</div>
<div class="quote">
<p>🧠 <b>Tous vos process, empowered</b> — L'IA empower chaque métier. Finance, RH, SI, Supply Chain, Commerce, Production, QA, Cyber — <b>tous couverts</b>.</p>
<p style="margin-top:8px">🔒 <b>Ce qui nous distingue</b> — Une IA souveraine déployée in-house. Un Brain Center piloté par votre comex. <b>12 LLMs, 0€ de lock-in</b>. La data reste chez vous.</p>
</div>
<div class="foot">WEVAL Consulting · Casablanca · weval-consulting.com</div>
</div>
<!-- NAV -->
<div class="nav">
<button class="ab" onclick="go(-1)"></button>
<button class="nd on" onclick="show(0)"></button>
<button class="nd" onclick="show(1)"></button>
<button class="nd" onclick="show(2)"></button>
<button class="nd" onclick="show(3)"></button>
<button class="ab" onclick="go(1)"></button>
</div>
</div>
<script>
let c=0;const T=4;
function show(i){c=i;document.querySelectorAll('.sl').forEach((s,j)=>s.classList.toggle('on',j===i));document.querySelectorAll('.nd').forEach((d,j)=>d.classList.toggle('on',j===i))}
function go(d){show((c+d+T)%T)}
document.addEventListener('keydown',e=>{if(e.key==='ArrowRight')go(1);if(e.key==='ArrowLeft')go(-1)});
let sx=0;document.addEventListener('touchstart',e=>{sx=e.touches[0].clientX});
document.addEventListener('touchend',e=>{const d=e.changedTouches[0].clientX-sx;if(Math.abs(d)>50)d<0?go(1):go(-1)});
</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/archi-meta-badge.js" defer></script>
<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>
</body>
</html>