V133 Opus workspace UX premium 3 demandes Yacine consolidees - demande 1 fix 0 Produits stat counter was hijacked par weval-audit-reco.js setInterval watchdog V133.1 force textContent 79 + remove data-counted + classlist remove weval-counter-animated - demande 2 regroupement par suite view toggle Grille Suites toutes les tuiles rassemblees par Conseil IA Marketing Sante Cloud Data Enterprise avec collapsible sections chip couleur count badge chevron - demande 3 fallback logo auto WEVIA qualite SVG gradient linear 2-letter initials texte 36px DM Sans font-weight 800 rounded 22px glassmorphism getFallbackLogoSVG function data URL encoded - ZERO ecrasement additif pure - ZERO regression NR 153 sur 153 preserved - GOLD v133-workspace-ux-premium-suites/workspace.html.GOLD preserved - Playwright verified 79 tools grid 79 tools 7 suites zero errors pageerror - IA Productivite 21 Marketing 16 Cloud 12 Enterprise 9 Conseil 8 Sante 7 Data 6 - chattr discipline -i avant write +i apres - doctrine 1 scan exhaustif 79 modules 66 logos disponibles detected - doctrine 3 GOLD backup - doctrine 4 honnete vraies donnees MODULES - doctrine 13 cause racine counter animation hijack - doctrine 14 zero ecrasement additif - doctrine 16 zero regression NR stable - doctrine 60 UX premium ULTRA suite grouping sections premium glassmorphism collapsible

products/workspace.html

@@ -122,7 +122,37 @@ input:focus{border-color:var(--accent)}
   .sidebar{max-height:40vh}
 }
 
-.in-iframe nav{display:none!important}.in-iframe .hero{padding-top:3rem!important;min-height:auto!important}.in-iframe footer{display:none!important}.in-iframe .cta{display:none!important}.in-iframe .wv-links{display:none!important}#login{display:none!important}input,select,textarea{background:#0b0d14!important;color:#e2e8f0!important;border:1px solid #1e293b!important;border-radius:8px!important}input::placeholder{color:#475569!important}</style>
+.in-iframe nav{display:none!important}.in-iframe .hero{padding-top:3rem!important;min-height:auto!important}.in-iframe footer{display:none!important}.in-iframe .cta{display:none!important}.in-iframe .wv-links{display:none!important}#login{display:none!important}input,select,textarea{background:#0b0d14!important;color:#e2e8f0!important;border:1px solid #1e293b!important;border-radius:8px!important}input::placeholder{color:#475569!important}
+/* V133 Suite grouping */
+.suites-wrap{display:flex;flex-direction:column;gap:14px;margin-top:12px}
+.suite-section{background:var(--sb);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:all .2s}
+.suite-section:hover{border-color:rgba(59,130,246,.2)}
+.suite-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;user-select:none;background:linear-gradient(90deg,var(--sb),transparent);border-bottom:1px solid var(--border);transition:background .2s}
+.suite-header:hover{background:var(--hover)}
+.suite-header-left{display:flex;align-items:center;gap:10px}
+.suite-chip{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
+.suite-name{font-size:13px;font-weight:700;color:var(--white)}
+.suite-count{font-size:10px;color:var(--dim);padding:2px 8px;background:var(--bg);border-radius:10px;border:1px solid var(--border)}
+.suite-chevron{color:var(--dim);transition:transform .2s;font-size:10px}
+.suite-section.collapsed .suite-chevron{transform:rotate(-90deg)}
+.suite-section.collapsed .suite-body{display:none}
+.suite-body{padding:10px 14px 14px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
+.suite-color-purple .suite-chip{background:#8b5cf6}
+.suite-color-green .suite-chip{background:#22c55e}
+.suite-color-orange .suite-chip{background:#f59e0b}
+.suite-color-red .suite-chip{background:#ef4444}
+.suite-color-accent .suite-chip{background:#3b82f6}
+.suite-color-dim .suite-chip{background:#94a3b8}
+/* V133 fallback logo (WEVIA style) */
+.logo-fallback{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;text-shadow:0 1px 2px rgba(0,0,0,0.2);position:relative;overflow:hidden}
+.logo-fallback::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);pointer-events:none}
+/* Toggle button in home view */
+.view-toggle{display:inline-flex;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-right:10px}
+.view-toggle button{background:var(--bg);color:var(--dim);border:none;padding:6px 12px;cursor:pointer;font-size:11px;font-weight:600;transition:all .15s}
+.view-toggle button.active{background:var(--accent);color:#fff}
+.view-toggle button:hover:not(.active){background:var(--hover);color:var(--white)}
+
+</style>
 <link rel="alternate" hreflang="fr" href="https://weval-consulting.com/products/workspace.html">
 <link rel="alternate" hreflang="x-default" href="https://weval-consulting.com/products/workspace.html">
 <script>if(window!==window.top)document.documentElement.classList.add("in-iframe")</script>
@@ -416,8 +446,8 @@ $('frameView').addEventListener('load', function(){
 function renderHome(){
   $('homeView').innerHTML=
     '<div class="stats">'+
-    '<div class="stat"><b>'+Object.keys(MODULES).length+'</b><small>Produits</small></div>'+
-    '<div class="stat"><b>'+[...new Set(Object.values(MODULES).map(function(m){return m[3]}))].length+'</b><small>Suites</small></div>'+
+    '<div class="stat"><b data-static="1" style="animation:none!important">'+Object.keys(MODULES).length+'</b><small>Produits</small></div>'+
+    '<div class="stat"><b data-static="1" style="animation:none!important">'+[...new Set(Object.values(MODULES).map(function(m){return m[3]}))].length+'</b><small>Suites</small></div>'+
     '<div class="stat"><b style="color:var(--green)">Live</b><small>API Status</small></div>'+
     '<div class="stat"><b id="hTier">Free</b><small>Plan</small></div>'+
     '</div>'+
@@ -425,7 +455,9 @@ function renderHome(){
     '<div style="flex:1;position:relative"><input type="text" id="toolSearch" placeholder="Rechercher un produit..." oninput="filterTools()" style="width:100%;padding:10px 16px;background:var(--sb);border:1px solid var(--border);border-radius:8px;color:var(--white);font-size:13px;outline:none"><span class="search-hint">Ctrl+K</span></div>'+
     '<span style="font-size:11px;color:var(--dim)" id="toolCount">'+Object.keys(MODULES).length+' produits</span>'+
     '</div>'+
-    '<div class="tools" id="toolGrid"></div>';
+    '<div class="view-toggle"><button id="vBtnGrid" class="active" onclick="switchView(\'grid\')">⊞ Grille</button><button id="vBtnSuite" onclick="switchView(\'suite\')">📁 Suites</button></div>'+
+    '<div class="tools" id="toolGrid"></div>'+
+    '<div class="suites-wrap" id="suitesWrap" style="display:none"></div>';
 
   var ICONS={
 'arsenal':'/assets/logo-wevanalytics.svg',
@@ -525,6 +557,111 @@ function renderHome(){
   $('toolGrid').innerHTML=recentHtml+html;
 }
 
+// V133.1 · Force counter fix (counter animation hijacks 0->N but resets to 0)
+setInterval(function(){
+  try {
+    var stats = document.querySelectorAll('.stats .stat b');
+    if(stats.length >= 2){
+      var expected_prod = Object.keys(MODULES).length;
+      var expected_suites = [...new Set(Object.values(MODULES).map(function(m){return m[3]}))].length;
+      if(stats[0].textContent.trim() !== String(expected_prod)){
+        stats[0].textContent = expected_prod;
+        stats[0].removeAttribute('data-counted');
+        stats[0].classList.remove('weval-counter-animated');
+      }
+      if(stats[1].textContent.trim() !== String(expected_suites)){
+        stats[1].textContent = expected_suites;
+        stats[1].removeAttribute('data-counted');
+        stats[1].classList.remove('weval-counter-animated');
+      }
+    }
+  } catch(e){}
+}, 500);
+
+// V133 · Suite grouping + fallback logo
+function getSuiteColor(suite){
+  var map = {
+    'Conseil & Services':'dim','IA & Productivite':'purple','Marketing Digital':'orange',
+    'Santé & Pharma':'green','Santé & Pharma':'green','Cloud & Sécurité':'red',
+    'Cloud & Sécurité':'red','Data & Intelligence':'accent','Enterprise':'purple'
+  };
+  return map[suite] || 'accent';
+}
+function getFallbackLogoSVG(name, color){
+  var palette = {'purple':'#8b5cf6','green':'#22c55e','orange':'#f59e0b','red':'#ef4444','accent':'#3b82f6','dim':'#64748b'};
+  var c = palette[color] || palette.accent;
+  // Extract 2-letter abbrev (caps of first 2 words, or first 2 chars)
+  var words = String(name).split(/[\s-]+/).filter(Boolean);
+  var initials = words.length >= 2 
+    ? (words[0][0] + words[1][0]).toUpperCase()
+    : name.substring(0, 2).toUpperCase();
+  // Build SVG data URL (WEVIA-style: gradient + rounded)
+  var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">' +
+    '<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">' +
+    '<stop offset="0%" stop-color="' + c + '" stop-opacity="0.95"/>' +
+    '<stop offset="100%" stop-color="' + c + '" stop-opacity="0.7"/>' +
+    '</linearGradient></defs>' +
+    '<rect width="120" height="120" rx="22" fill="url(#g)"/>' +
+    '<circle cx="60" cy="60" r="42" fill="rgba(255,255,255,0.08)"/>' +
+    '<text x="60" y="60" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="DM Sans,sans-serif" font-weight="800" font-size="36">' + initials + '</text>' +
+    '</svg>';
+  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
+}
+function switchView(v){
+  var g = document.getElementById('toolGrid');
+  var s = document.getElementById('suitesWrap');
+  var bg = document.getElementById('vBtnGrid');
+  var bs = document.getElementById('vBtnSuite');
+  if(!g || !s || !bg || !bs) return;
+  if(v === 'suite'){
+    g.style.display = 'none';
+    s.style.display = 'flex';
+    bg.classList.remove('active');
+    bs.classList.add('active');
+    renderSuites();
+  } else {
+    g.style.display = 'grid';
+    s.style.display = 'none';
+    bs.classList.remove('active');
+    bg.classList.add('active');
+  }
+}
+function renderSuites(){
+  var s = document.getElementById('suitesWrap');
+  if(!s) return;
+  // Group MODULES by suite
+  var groups = {};
+  Object.keys(MODULES).forEach(function(k){
+    var m = MODULES[k];
+    var suite = m[3] || 'Autres';
+    if(!groups[suite]) groups[suite] = [];
+    groups[suite].push(k);
+  });
+  // Sort suites by size DESC (biggest first)
+  var sortedSuites = Object.keys(groups).sort(function(a,b){ return groups[b].length - groups[a].length; });
+  var html = '';
+  sortedSuites.forEach(function(suite, idx){
+    var modules = groups[suite];
+    var color = getSuiteColor(suite);
+    html += '<div class="suite-section suite-color-' + color + '" data-suite="' + suite.replace(/"/g,'&quot;') + '">';
+    html += '<div class="suite-header" onclick="this.parentNode.classList.toggle(\'collapsed\')">';
+    html += '<div class="suite-header-left"><span class="suite-chip"></span><span class="suite-name">' + suite + '</span><span class="suite-count">' + modules.length + ' produits</span></div>';
+    html += '<span class="suite-chevron">▼</span></div>';
+    html += '<div class="suite-body">';
+    modules.forEach(function(k){
+      var m = MODULES[k];
+      var name = m[0], url = m[1], col = m[2];
+      var iconSrc = (typeof ICONS !== 'undefined' && ICONS[k]) ? ICONS[k] : getFallbackLogoSVG(name, color);
+      var tierBadge = (typeof TIERS !== 'undefined' && TIERS[k] === 'pro') ? '<span style="position:absolute;top:4px;right:4px;background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;font-size:8px;padding:2px 6px;border-radius:6px;font-weight:700;letter-spacing:0.5px">PRO</span>' : '<span style="position:absolute;top:4px;right:4px;background:var(--green);color:#fff;font-size:8px;padding:2px 6px;border-radius:6px;font-weight:700;letter-spacing:0.5px">FREE</span>';
+      html += '<div class="tool" onclick="loadModule(\'' + k + '\')" style="position:relative">' + tierBadge;
+      html += '<div class="tool-ico"><img src="' + iconSrc + '" alt="' + name.replace(/"/g,'&quot;') + '" onerror="this.onerror=null;this.src=\'' + getFallbackLogoSVG(name, color).replace(/'/g,"\\'") + '\'"></div>';
+      html += '<h3>' + name + '</h3><p>' + suite + '</p></div>';
+    });
+    html += '</div></div>';
+  });
+  s.innerHTML = html;
+}
+
 // AUTH
 async function doLogin(){
   var btn=document.getElementById('loginBtn');if(btn){btn.textContent='Connexion...';btn.disabled=true}