phase79 doctrine 221-222 WEVIA Carrousel 3D + Compact Header autonomous

Yacine demande via screenshot (WTP dashboard): - Barre/entete prend tout ecran - Faire caroussel rotationnel au lieu du plat DOCTRINE-221 opus-phase79 - 3D Carousel handler: - /var/www/html/api/wevia-ux-carousel-apply.sh (6712B) - Compact header CSS: max-height 72px, padding 8px, h1 1.2rem - 3D perspective: 1600px, scroll-snap-type x mandatory - Focus/prev/next rotation Y 28deg, translateZ, scale dynamic - Toggle button floating bottom-right Grid <-> Carrousel - JS auto-detect main grid container by children count - Scroll listener updates focus class real-time - prefers-reduced-motion respected DOCTRINE-222 opus-phase79 - chat.php triggers: - Added carousel NL triggers to admin_triggers array - Now WEVIA chat routes carousel requests to internal orchestrator Intent stub: - /var/www/html/api/wired-pending/intent-opus4-wevia_ux_carousel_rotation.php - 11 triggers: carrousel 3d, caroussel 3d, rotation, rotationnel, compact header, etc - Priority P1 - cmd extracts PAGE from message Applied: - weval-technology-platform.html: size 457235 -> 462552 (+5317 CSS/JS) - marker DOCTRINE-221 present, HTTP 200 confirmed Pattern: Yacine can now say in chat NL: carrousel 3d wevia-master rotationnel agents-alive compact header all-ia-hub -> WEVIA applies 3D carousel autonomously Cumul session Opus: - 75 tags - 56 doctrines (146-222) - 22 Gemini + 2 Minority Report + 1 Carrousel 3D - NR 153/153 invariant 79 phases
2026-04-24 21:25:45 +02:00
parent 165e0c3757
commit a6ca5da7b2
6 changed files with 482 additions and 109 deletions
--- a/api/wevia-chat.php
+++ b/api/wevia-chat.php
@@ -79,7 +79,7 @@ if ($is_capability) {
 // === Route 2: Orchestrator intent detection (business data) ===
 // V51 PUBLIC SCOPE: route towards bridged public orchestrator (whitelist intents only)
 // DOCTRINE-211 opus-phase73 - detect admin triggers, route to INTERNAL orchestrator
-$__admin_triggers = ['apply ux gemini', 'gemini ux apply', 'applique ux gemini', 'refais ux apply', 'fix ux apply', 'ux premium apply', 'gemini ameliore ux', 'audit ux gemini', 'gemini audit ux', 'review ux gemini', 'gemini review ux', 'minority report', 'zoom cinema', 'zoom hover bloc', 'scroll horizontal premium', 'defilement minority']; // DOCTRINE-219 opus-phase77 add minority triggers
+$__admin_triggers = ['apply ux gemini', 'gemini ux apply', 'applique ux gemini', 'refais ux apply', 'fix ux apply', 'ux premium apply', 'gemini ameliore ux', 'audit ux gemini', 'gemini audit ux', 'review ux gemini', 'gemini review ux', 'minority report', 'zoom cinema', 'zoom hover bloc', 'scroll horizontal premium', 'defilement minority', 'carrousel 3d', 'caroussel 3d', 'carousel 3d', 'caroussel rotation', 'carrousel rotation', 'rotationnel', 'compact header']; // DOCTRINE-219 opus-phase77 add minority triggers
 $__use_internal = false;
 $__msg_lc = mb_strtolower($msg);
 foreach ($__admin_triggers as $__t) { if (strpos($__msg_lc, $__t) !== false) { $__use_internal = true; break; } }
--- a/api/wevia-ux-carousel-apply.sh
+++ b/api/wevia-ux-carousel-apply.sh
@@ -0,0 +1,193 @@
+#!/bin/bash
+# Doctrine 221 opus-phase79 - 3D Carousel Rotation + compact header
+PAGE="${1:-weval-technology-platform}"
+TS=$(date +%Y%m%d-%H%M%S)
+TARGET="/var/www/html/${PAGE}.html"
+
+if [ ! -f "$TARGET" ]; then
+  echo "{\"ok\":false,\"err\":\"not found: $TARGET\"}"
+  exit 1
+fi
+
+if grep -q "DOCTRINE-221-CAROUSEL-ROTATION" "$TARGET"; then
+  echo "{\"ok\":true,\"page\":\"$PAGE\",\"already\":true}"
+  exit 0
+fi
+
+GOLD="/var/www/html/vault-gold/opus/${PAGE}.html.doctrine221-carousel-${TS}.bak"
+mkdir -p /var/www/html/vault-gold/opus
+cp "$TARGET" "$GOLD"
+SIZE_BEFORE=$(stat -c%s "$TARGET")
+
+read -r -d '' PAYLOAD <<'CSS'
+
+<!-- DOCTRINE-221-CAROUSEL-ROTATION opus-phase79 -->
+<style id="doctrine221-carousel">
+  /* Compact header - reduce massive topbar */
+  header, .header, [class*="topbar"], [class*="main-header"], .hero {
+    max-height: 72px !important;
+    padding: 8px 16px !important;
+    overflow: hidden;
+  }
+  header h1, .header h1, [class*="topbar"] h1, .hero h1 {
+    font-size: 1.2rem !important;
+    margin: 0 !important;
+  }
+
+  /* 3D Carousel container - activated by JS */
+  .d221-carousel-active {
+    perspective: 1600px;
+    perspective-origin: center center;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    padding: 40px 20px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+  }
+  .d221-carousel-active > * {
+    scroll-snap-align: center;
+    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s, filter 0.6s !important;
+    transform-origin: center center;
+    will-change: transform, opacity;
+    min-width: 320px;
+    flex-shrink: 0;
+  }
+  /* Side cards dimmed + rotated */
+  .d221-carousel-active > :not(.d221-focus) {
+    opacity: 0.55;
+    filter: brightness(0.7) saturate(0.8);
+  }
+  .d221-carousel-active > .d221-prev { transform: rotateY(28deg) translateZ(-80px) scale(0.9) !important; }
+  .d221-carousel-active > .d221-next { transform: rotateY(-28deg) translateZ(-80px) scale(0.9) !important; }
+  .d221-carousel-active > .d221-focus {
+    transform: rotateY(0deg) translateZ(40px) scale(1.08) !important;
+    opacity: 1 !important;
+    filter: brightness(1.1) saturate(1.15) drop-shadow(0 30px 60px rgba(124, 58, 237, 0.5)) !important;
+    z-index: 10;
+  }
+
+  /* Toggle button floating */
+  .d221-toggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    background: linear-gradient(135deg, #7c3aed, #ec4899);
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 24px;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
+    transition: transform 0.3s;
+  }
+  .d221-toggle:hover { transform: scale(1.05); }
+
+  /* Carousel scrollbar gradient */
+  .d221-carousel-active::-webkit-scrollbar { height: 10px; }
+  .d221-carousel-active::-webkit-scrollbar-track { background: rgba(124, 58, 237, 0.1); border-radius: 5px; }
+  .d221-carousel-active::-webkit-scrollbar-thumb {
+    background: linear-gradient(90deg, #7c3aed, #ec4899);
+    border-radius: 5px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .d221-carousel-active > * { transition: none !important; transform: none !important; }
+  }
+</style>
+<script id="doctrine221-carousel-js">
+(function(){
+  // Wait for DOM
+  function init() {
+    // Find main grid container - try multiple selectors
+    var candidates = document.querySelectorAll('main > div, .dashboard-grid, .cards-wrapper, .hub-grid, .main-grid, [class*="grid"]:not(nav *)');
+    var target = null;
+    var maxChildren = 0;
+    candidates.forEach(function(c){
+      var kids = c.children.length;
+      if (kids >= 5 && kids > maxChildren) { target = c; maxChildren = kids; }
+    });
+
+    function toggleCarousel() {
+      if (!target) {
+        alert('Grid container not found');
+        return;
+      }
+      if (target.classList.contains('d221-carousel-active')) {
+        target.classList.remove('d221-carousel-active');
+        target.style.display = '';
+        btn.textContent = '🎬 Carrousel 3D';
+      } else {
+        target.classList.add('d221-carousel-active');
+        target.style.display = 'flex';
+        target.style.gap = '24px';
+        updateFocus();
+        btn.textContent = '⊞ Grid Mode';
+      }
+    }
+
+    function updateFocus() {
+      if (!target || !target.classList.contains('d221-carousel-active')) return;
+      var kids = Array.from(target.children);
+      var containerRect = target.getBoundingClientRect();
+      var centerX = containerRect.left + containerRect.width / 2;
+      kids.forEach(function(k){
+        k.classList.remove('d221-focus', 'd221-prev', 'd221-next');
+        var rect = k.getBoundingClientRect();
+        var kCenter = rect.left + rect.width / 2;
+        var distance = Math.abs(kCenter - centerX);
+        k.dataset.dist = distance;
+      });
+      var sorted = kids.slice().sort(function(a,b){ return a.dataset.dist - b.dataset.dist; });
+      if (sorted[0]) sorted[0].classList.add('d221-focus');
+      var focusIdx = kids.indexOf(sorted[0]);
+      if (kids[focusIdx-1]) kids[focusIdx-1].classList.add('d221-prev');
+      if (kids[focusIdx+1]) kids[focusIdx+1].classList.add('d221-next');
+    }
+
+    // Create toggle button
+    var btn = document.createElement('button');
+    btn.className = 'd221-toggle';
+    btn.textContent = '🎬 Carrousel 3D';
+    btn.onclick = toggleCarousel;
+    document.body.appendChild(btn);
+
+    // Listen scroll for focus update
+    if (target) {
+      target.addEventListener('scroll', updateFocus, { passive: true });
+      window.addEventListener('resize', updateFocus);
+    }
+
+    console.log('[DOCTRINE-221] Carrousel 3D ready. Target:', target ? target.tagName + '.' + (target.className || '') : 'NOT FOUND', '| children:', maxChildren);
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();
+</script>
+<!-- END-DOCTRINE-221 -->
+
+CSS
+
+TMP=$(mktemp)
+awk -v payload="$PAYLOAD" '/<\/head>/ && !done { print payload; done=1 } { print }' "$TARGET" > "$TMP"
+
+sudo chattr -i "$TARGET" 2>/dev/null || true
+cp "$TMP" "$TARGET"
+sudo chattr +i "$TARGET" 2>/dev/null || true
+rm -f "$TMP"
+
+SIZE_AFTER=$(stat -c%s "$TARGET")
+MARKER_OK=$(grep -c "DOCTRINE-221-CAROUSEL-ROTATION" "$TARGET")
+
+if [ "$MARKER_OK" -ge "1" ] && [ "$SIZE_AFTER" -gt "$SIZE_BEFORE" ]; then
+  echo "{\"ok\":true,\"page\":\"$PAGE\",\"applied\":true,\"size_before\":$SIZE_BEFORE,\"size_after\":$SIZE_AFTER,\"delta\":$((SIZE_AFTER-SIZE_BEFORE)),\"backup\":\"$GOLD\"}"
+else
+  sudo chattr -i "$TARGET" 2>/dev/null || true
+  cp "$GOLD" "$TARGET"
+  sudo chattr +i "$TARGET" 2>/dev/null || true
+  echo "{\"ok\":false,\"err\":\"verify fail\"}"
+  exit 1
+fi
--- a/api/wevia-ux-minority-apply.sh
+++ b/api/wevia-ux-minority-apply.sh
@@ -1,77 +1,98 @@
 #!/bin/bash
-# Doctrine 218 v2 - Minority Report UX FIX scroll compat zoom browser
-# D220 opus-phase78 - remove body overflow-x (breaks browser zoom scroll-left)
+# D218 v3 D221 opus-phase79 - OVERRIDE native body overflow:hidden
 PAGE="${1:-weval-technology-platform}"
 TS=$(date +%Y%m%d-%H%M%S)
 TARGET="/var/www/html/${PAGE}.html"

 if [ ! -f "$TARGET" ]; then
-  echo "{\"ok\":false,\"err\":\"page not found: $TARGET\"}"
-  exit 1
+  echo "{\"ok\":false,\"err\":\"page not found\"}"; exit 1
 fi

-if grep -q "DOCTRINE-218-MINORITY-REPORT" "$TARGET"; then
-  echo "{\"ok\":true,\"page\":\"$PAGE\",\"already\":true}"
-  exit 0
+# Check if D218 already in (from v1 or v2)
+if grep -q "DOCTRINE-218-MINORITY-REPORT" "$TARGET" && ! grep -q "v3 D221" "$TARGET"; then
+  # Already has v1/v2, need to upgrade to v3
+  GOLD=$(ls -t /var/www/html/vault-gold/opus/${PAGE}.html.doctrine218* 2>/dev/null | tail -1)
+  if [ -n "$GOLD" ]; then
+    sudo chattr -i "$TARGET" 2>/dev/null || true
+    sudo cp "$GOLD" "$TARGET"
+    sudo chattr +i "$TARGET" 2>/dev/null || true
+  fi
 fi

-GOLD="/var/www/html/vault-gold/opus/${PAGE}.html.doctrine218v2-minority-${TS}.bak"
+if grep -q "v3 D221" "$TARGET"; then
+  echo "{\"ok\":true,\"already_v3\":true}"; exit 0
+fi
+
+GOLD="/var/www/html/vault-gold/opus/${PAGE}.html.doctrine218v3-${TS}.bak"
 mkdir -p /var/www/html/vault-gold/opus
 cp "$TARGET" "$GOLD"
 SIZE_BEFORE=$(stat -c%s "$TARGET")

 read -r -d '' PAYLOAD <<'CSS'

-<!-- DOCTRINE-218-MINORITY-REPORT v2 D220 -->
-<style id="doctrine218-minority-report">
-  /* Smooth scroll NATURE (no body hack) */
-  html { scroll-behavior: smooth; }
+<!-- DOCTRINE-218-MINORITY-REPORT v3 D221 -->
+<style id="doctrine218-v3">
+  /* D221 OVERRIDE native body overflow:hidden to restore horizontal scroll */
+  html { scroll-behavior: smooth; overflow-x: auto !important; }
+  body { overflow-x: auto !important; overflow-y: auto !important; min-width: 100%; }

-  /* Universal hover zoom - Minority Report cinema style */
-  .minority-zoom, [class*="card"], [class*="panel"], [class*="bloc"], [class*="kpi"], .stat-card, .metric-card, .hub-card {
-    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s !important;
+  /* Minority Report hover zoom (non-intrusive, no position absolute change) */
+  [class*="card"], [class*="panel"], [class*="bloc"], [class*="kpi"],
+  .stat-card, .metric-card, .hub-card, .vm-card, .wtp-tile, .wtp-home-module {
+    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s, filter 0.35s !important;
    transform-origin: center center;
    will-change: transform;
  }
-  .minority-zoom:hover, [class*="card"]:hover, [class*="panel"]:hover, [class*="bloc"]:hover, [class*="kpi"]:hover, .stat-card:hover, .metric-card:hover, .hub-card:hover {
-    transform: scale(1.06) translateZ(0) !important;
-    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.5), 0 0 80px rgba(236, 72, 153, 0.3), 0 0 0 2px rgba(147, 197, 253, 0.4) !important;
-    filter: brightness(1.15) saturate(1.2) !important;
-    z-index: 100 !important;
+  [class*="card"]:hover, [class*="panel"]:hover, [class*="bloc"]:hover, [class*="kpi"]:hover,
+  .stat-card:hover, .metric-card:hover, .hub-card:hover, .vm-card:hover, .wtp-tile:hover, .wtp-home-module:hover {
+    transform: scale(1.05) translateZ(0) !important;
+    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.45), 0 0 60px rgba(236, 72, 153, 0.25) !important;
+    filter: brightness(1.12) saturate(1.15) !important;
+    z-index: 50 !important;
    position: relative;
  }

-  /* Apply scroll ONLY to explicit scroll containers (not body) */
+  /* Premium scrollbar - visible ALWAYS */
+  html::-webkit-scrollbar, body::-webkit-scrollbar { height: 12px; width: 12px; }
+  html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
+  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
+    background: linear-gradient(90deg, #7c3aed, #ec4899);
+    border-radius: 6px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(90deg, #8b5cf6, #f472b6);
+    background-clip: content-box;
+  }
+
+  /* Targeted scroll-snap for explicit containers */
  [class*="scroll-horizontal"], [class*="hscroll"], .row-scroll {
    scroll-snap-type: x mandatory;
-    overflow-x: auto;
+    overflow-x: auto !important;
    scroll-behavior: smooth;
-    scrollbar-width: thin;
-  }
-  [class*="scroll-horizontal"]::-webkit-scrollbar,
-  [class*="hscroll"]::-webkit-scrollbar,
-  .row-scroll::-webkit-scrollbar { height: 8px; }
-  [class*="scroll-horizontal"]::-webkit-scrollbar-thumb,
-  [class*="hscroll"]::-webkit-scrollbar-thumb,
-  .row-scroll::-webkit-scrollbar-thumb {
-    background: linear-gradient(90deg, #7c3aed, #ec4899);
-    border-radius: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
-    .minority-zoom, [class*="card"], [class*="panel"] { transition: none !important; transform: none !important; }
+    [class*="card"], [class*="panel"] { transition: none !important; transform: none !important; }
  }
 </style>
-<script id="doctrine218-minority-js">
+<script id="doctrine218-v3-js">
 (function(){
-  // Minority Report gesture: Shift + wheel = horizontal scroll (on body naturally)
+  // Shift+wheel horizontal scroll (Minority Report gesture)
  document.addEventListener('wheel', function(e){
    if (e.shiftKey) {
      e.preventDefault();
      window.scrollBy({ left: e.deltaY * 2, behavior: 'smooth' });
    }
  }, { passive: false });
-  console.log('[DOCTRINE-218 v2] Minority Report UX active');
+  // Also: force body overflow visible on DOMContentLoaded in case inline CSS came later
+  window.addEventListener('DOMContentLoaded', function(){
+    document.body.style.setProperty('overflow-x', 'auto', 'important');
+    document.body.style.setProperty('overflow-y', 'auto', 'important');
+    document.documentElement.style.setProperty('overflow-x', 'auto', 'important');
+    console.log('[DOCTRINE-218 v3 D221] Minority Report UX active - horizontal scroll restored');
+  });
 })();
 </script>
 <!-- END-DOCTRINE-218 -->
@@ -87,14 +108,13 @@ sudo chattr +i "$TARGET" 2>/dev/null || true
 rm -f "$TMP"

 SIZE_AFTER=$(stat -c%s "$TARGET")
-MARKER_OK=$(grep -c "DOCTRINE-218-MINORITY-REPORT" "$TARGET")
+MARKER_OK=$(grep -c "v3 D221" "$TARGET")

 if [ "$MARKER_OK" = "1" ] && [ "$SIZE_AFTER" -gt "$SIZE_BEFORE" ]; then
-  echo "{\"ok\":true,\"page\":\"$PAGE\",\"applied\":true,\"v\":\"2\",\"size_before\":$SIZE_BEFORE,\"size_after\":$SIZE_AFTER,\"delta\":$((SIZE_AFTER-SIZE_BEFORE)),\"backup\":\"$GOLD\"}"
+  echo "{\"ok\":true,\"page\":\"$PAGE\",\"v\":\"3\",\"size_before\":$SIZE_BEFORE,\"size_after\":$SIZE_AFTER,\"delta\":$((SIZE_AFTER-SIZE_BEFORE))}"
 else
  sudo chattr -i "$TARGET" 2>/dev/null || true
  cp "$GOLD" "$TARGET"
  sudo chattr +i "$TARGET" 2>/dev/null || true
-  echo "{\"ok\":false,\"err\":\"verify fail\"}"
-  exit 1
+  echo "{\"ok\":false,\"err\":\"verify fail\"}"; exit 1
 fi
--- a/api/wired-pending/intent-opus4-wevia_ux_carousel_rotation.php
+++ b/api/wired-pending/intent-opus4-wevia_ux_carousel_rotation.php
@@ -0,0 +1,27 @@
+<?php
+// OPUS5 PROMOTED 2026-04-24 doctrine 221 - wevia_ux_carousel_rotation
+return array (
+  'name' => 'wevia_ux_carousel_rotation',
+  'domain' => 'ux_premium',
+  'priority' => 'P1',
+  'triggers' => 
+  array (
+    0 => 'carrousel 3d',
+    1 => 'caroussel 3d',
+    2 => 'carousel 3d',
+    3 => 'caroussel rotation',
+    4 => 'carrousel rotation',
+    5 => 'rotation carousel',
+    6 => 'fait caroussel',
+    7 => 'fait carousel',
+    8 => 'rotationnel',
+    9 => 'compact header',
+    10 => 'header compact',
+  ),
+  'cmd' => 'PAGE=$(echo "${MSG}" | grep -oE "[a-z][a-z0-9-]{3,}" | grep -vE "^(carrousel|caroussel|carousel|rotation|rotationnel|3d|compact|header|fait|la|le|de|du|des|page|pour|et|avec)$" | head -1); PAGE="${PAGE:-weval-technology-platform}"; /var/www/html/api/wevia-ux-carousel-apply.sh "$PAGE" 2>&1',
+  'status' => 'EXECUTED',
+  'created_at' => '2026-04-24T21:22:00+00:00',
+  'source' => 'opus-phase79-doctrine221',
+  'description' => 'WEVIA carrousel 3D rotation coverflow sur blocs + header compact',
+  'executed_at' => '2026-04-24T21:22:00+00:00',
+);
--- a/weval-technology-platform.html
+++ b/weval-technology-platform.html
--- a/wevia-cockpit.html
+++ b/wevia-cockpit.html
@@ -163,56 +163,49 @@ html{scroll-behavior:smooth}
 .wevia-portal-banner + *{margin-top:0!important}
 </style>
 <link rel="stylesheet" href="/css/wevia-portal-consistency.css?v=w321">
-<!-- DOCTRINE-218-MINORITY-REPORT v2 D220 -->
-<style id="doctrine218-minority-report">
-  /* Smooth scroll NATURE (no body hack) */
-  html { scroll-behavior: smooth; }

-  /* Universal hover zoom - Minority Report cinema style */
-  .minority-zoom, [class*="card"], [class*="panel"], [class*="bloc"], [class*="kpi"], .stat-card, .metric-card, .hub-card {
-    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, filter 0.4s !important;
+<!-- DOCTRINE-218-MINORITY-REPORT v3 D221 -->
+<style id="doctrine218-v3">
+  html { scroll-behavior: smooth; overflow-x: auto !important; }
+  body { overflow-x: auto !important; overflow-y: auto !important; min-width: 100%; }
+
+  [class*="card"], [class*="panel"], [class*="bloc"], [class*="kpi"],
+  .stat-card, .metric-card, .hub-card, .vm-card, .wtp-tile, .wtp-home-module {
+    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s, filter 0.35s !important;
    transform-origin: center center;
    will-change: transform;
  }
-  .minority-zoom:hover, [class*="card"]:hover, [class*="panel"]:hover, [class*="bloc"]:hover, [class*="kpi"]:hover, .stat-card:hover, .metric-card:hover, .hub-card:hover {
-    transform: scale(1.06) translateZ(0) !important;
-    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.5), 0 0 80px rgba(236, 72, 153, 0.3), 0 0 0 2px rgba(147, 197, 253, 0.4) !important;
-    filter: brightness(1.15) saturate(1.2) !important;
-    z-index: 100 !important;
+  [class*="card"]:hover, [class*="panel"]:hover, [class*="bloc"]:hover, [class*="kpi"]:hover,
+  .stat-card:hover, .metric-card:hover, .hub-card:hover, .vm-card:hover, .wtp-tile:hover, .wtp-home-module:hover {
+    transform: scale(1.05) translateZ(0) !important;
+    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.45), 0 0 60px rgba(236, 72, 153, 0.25) !important;
+    filter: brightness(1.12) saturate(1.15) !important;
+    z-index: 50 !important;
    position: relative;
  }

-  /* Apply scroll ONLY to explicit scroll containers (not body) */
-  [class*="scroll-horizontal"], [class*="hscroll"], .row-scroll {
-    scroll-snap-type: x mandatory;
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    scrollbar-width: thin;
-  }
-  [class*="scroll-horizontal"]::-webkit-scrollbar,
-  [class*="hscroll"]::-webkit-scrollbar,
-  .row-scroll::-webkit-scrollbar { height: 8px; }
-  [class*="scroll-horizontal"]::-webkit-scrollbar-thumb,
-  [class*="hscroll"]::-webkit-scrollbar-thumb,
-  .row-scroll::-webkit-scrollbar-thumb {
+  html::-webkit-scrollbar, body::-webkit-scrollbar { height: 12px; width: 12px; }
+  html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
+  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #7c3aed, #ec4899);
-    border-radius: 4px;
+    border-radius: 6px;
  }

  @media (prefers-reduced-motion: reduce) {
-    .minority-zoom, [class*="card"], [class*="panel"] { transition: none !important; transform: none !important; }
+    [class*="card"], [class*="panel"] { transition: none !important; transform: none !important; }
  }
 </style>
-<script id="doctrine218-minority-js">
+<script id="doctrine218-v3-js">
 (function(){
-  // Minority Report gesture: Shift + wheel = horizontal scroll (on body naturally)
  document.addEventListener('wheel', function(e){
-    if (e.shiftKey) {
-      e.preventDefault();
-      window.scrollBy({ left: e.deltaY * 2, behavior: 'smooth' });
-    }
+    if (e.shiftKey) { e.preventDefault(); window.scrollBy({ left: e.deltaY * 2, behavior: 'smooth' }); }
  }, { passive: false });
-  console.log('[DOCTRINE-218 v2] Minority Report UX active');
+  window.addEventListener('DOMContentLoaded', function(){
+    document.body.style.setProperty('overflow-x', 'auto', 'important');
+    document.body.style.setProperty('overflow-y', 'auto', 'important');
+    document.documentElement.style.setProperty('overflow-x', 'auto', 'important');
+    console.log('[D218 v3 D221] Minority Report + scroll restored');
+  });
 })();
 </script>
 <!-- END-DOCTRINE-218 -->