🐳 26/06 - 15:28 - e va ajouté mistral en holograme qui predit et qui gere le systeme cognitive

components/mistral-hologram.js

@@ -0,0 +1,1207 @@
+class MistralHologram extends HTMLElement {
+  constructor() {
+    super();
+    this.isActive = true;
+    this.cognitiveLoad = 72;
+    this.predictionQueue = [];
+    this.neuralPulseActive = true;
+    this.hologramPhase = 0;
+    this.orbitAngle = 0;
+    this.particles = [];
+    this.predictionHistory = [];
+    this.cognitiveNodes = [
+      { id: 'N1', label: 'Perception', load: 68, active: true },
+      { id: 'N2', label: 'Analyse', load: 85, active: true },
+      { id: 'N3', label: 'Prédiction', load: 91, active: true },
+      { id: 'N4', label: 'Décision', load: 54, active: true },
+      { id: 'N5', label: 'Apprentissage', load: 77, active: true },
+      { id: 'N6', label: 'Mémoire', load: 63, active: true }
+    ];
+    this.currentPrediction = null;
+    this.speechLines = [];
+    this.speechIndex = 0;
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.startAnimations();
+    this.generatePrediction();
+    this.startCognitiveCycle();
+  }
+
+  disconnectedCallback() {
+    this.isActive = false;
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap');
+
+        :host {
+          display: block;
+          width: 100%;
+          --mistral-primary: #ff6b00;
+          --mistral-secondary: #ff9500;
+          --mistral-accent: #ffb800;
+          --mistral-glow: rgba(255, 107, 0, 0.4);
+          --mistral-dim: rgba(255, 149, 0, 0.15);
+          --holo-blue: #00d4ff;
+          --holo-purple: #a855f7;
+          --holo-green: #10b981;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        .hologram-container {
+          position: relative;
+          background: rgba(15, 23, 42, 0.85);
+          backdrop-filter: blur(25px);
+          border: 1px solid rgba(255, 107, 0, 0.25);
+          border-radius: 1rem;
+          overflow: hidden;
+          font-family: 'Inter', sans-serif;
+          color: #e2e8f0;
+        }
+
+        .hologram-container::before {
+          content: '';
+          position: absolute;
+          top: 0; left: 0; right: 0;
+          height: 2px;
+          background: linear-gradient(90deg, transparent, var(--mistral-primary), var(--mistral-accent), var(--mistral-primary), transparent);
+          animation: topScan 3s linear infinite;
+        }
+
+        @keyframes topScan {
+          0% { opacity: 0.3; }
+          50% { opacity: 1; }
+          100% { opacity: 0.3; }
+        }
+
+        .header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 1rem 1.25rem;
+          border-bottom: 1px solid rgba(255, 107, 0, 0.15);
+          background: rgba(255, 107, 0, 0.05);
+        }
+
+        .header-left {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+        }
+
+        .mistral-badge {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.35rem 0.85rem;
+          background: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,149,0,0.1));
+          border: 1px solid rgba(255, 107, 0, 0.4);
+          border-radius: 2rem;
+          font-family: 'Orbitron', monospace;
+          font-size: 0.7rem;
+          font-weight: 700;
+          color: var(--mistral-accent);
+          letter-spacing: 0.1em;
+          text-transform: uppercase;
+        }
+
+        .mistral-badge .dot {
+          width: 6px; height: 6px;
+          background: var(--mistral-primary);
+          border-radius: 50%;
+          animation: dotPulse 1.5s infinite;
+        }
+
+        @keyframes dotPulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.4; transform: scale(1.3); }
+        }
+
+        .header-title {
+          font-family: 'Orbitron', monospace;
+          font-size: 0.85rem;
+          font-weight: 600;
+          color: var(--mistral-accent);
+          letter-spacing: 0.05em;
+        }
+
+        .cognitive-status {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.7rem;
+          color: #94a3b8;
+        }
+
+        .cognitive-status .pulse {
+          width: 8px; height: 8px;
+          background: var(--holo-green);
+          border-radius: 50%;
+          animation: dotPulse 2s infinite;
+        }
+
+        /* Main Layout */
+        .main-grid {
+          display: grid;
+          grid-template-columns: 280px 1fr 280px;
+          gap: 0;
+          min-height: 520px;
+        }
+
+        @media (max-width: 1024px) {
+          .main-grid {
+            grid-template-columns: 1fr;
+          }
+          .hologram-core { min-height: 350px; }
+        }
+
+        /* Left Panel - Cognitive Nodes */
+        .cognitive-panel {
+          padding: 1rem;
+          border-right: 1px solid rgba(255, 107, 0, 0.1);
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+          overflow-y: auto;
+        }
+
+        .panel-title {
+          font-family: 'Orbitron', monospace;
+          font-size: 0.65rem;
+          font-weight: 600;
+          color: var(--mistral-secondary);
+          letter-spacing: 0.15em;
+          text-transform: uppercase;
+          margin-bottom: 0.25rem;
+        }
+
+        .cognitive-node {
+          background: rgba(30, 41, 59, 0.6);
+          border: 1px solid rgba(255, 107, 0, 0.12);
+          border-radius: 0.5rem;
+          padding: 0.65rem 0.75rem;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+        }
+
+        .cognitive-node::before {
+          content: '';
+          position: absolute;
+          top: 0; left: 0;
+          width: 3px; height: 100%;
+          background: var(--mistral-primary);
+          opacity: 0.5;
+          transition: opacity 0.3s;
+        }
+
+        .cognitive-node:hover {
+          border-color: rgba(255, 107, 0, 0.3);
+          background: rgba(30, 41, 59, 0.8);
+        }
+
+        .cognitive-node:hover::before { opacity: 1; }
+
+        .node-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 0.4rem;
+        }
+
+        .node-label {
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #e2e8f0;
+        }
+
+        .node-id {
+          font-family: 'Orbitron', monospace;
+          font-size: 0.6rem;
+          color: var(--mistral-secondary);
+        }
+
+        .node-load-bar {
+          height: 4px;
+          background: rgba(255, 107, 0, 0.1);
+          border-radius: 2px;
+          overflow: hidden;
+          margin-bottom: 0.3rem;
+        }
+
+        .node-load-fill {
+          height: 100%;
+          border-radius: 2px;
+          transition: width 1s ease;
+        }
+
+        .node-load-text {
+          font-size: 0.6rem;
+          color: #64748b;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .node-status {
+          font-size: 0.6rem;
+          display: flex;
+          align-items: center;
+          gap: 0.3rem;
+        }
+
+        .node-status .indicator {
+          width: 5px; height: 5px;
+          border-radius: 50%;
+        }
+
+        .indicator-active { background: var(--holo-green); }
+        .indicator-warning { background: #f59e0b; }
+        .indicator-critical { background: #ef4444; }
+
+        /* Center - Hologram Core */
+        .hologram-core {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background: radial-gradient(ellipse at center, rgba(255,107,0,0.06) 0%, transparent 70%);
+          overflow: hidden;
+          padding: 1.5rem;
+        }
+
+        /* Scanline effect */
+        .hologram-core::after {
+          content: '';
+          position: absolute;
+          top: 0; left: 0; right: 0; bottom: 0;
+          background: repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(255, 107, 0, 0.015) 2px,
+            rgba(255, 107, 0, 0.015) 4px
+          );
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        .holo-scanner {
+          position: absolute;
+          top: 0; left: 0; right: 0;
+          height: 100%;
+          background: linear-gradient(180deg, transparent 0%, rgba(255,107,0,0.05) 50%, transparent 100%);
+          animation: scanMove 4s ease-in-out infinite;
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        @keyframes scanMove {
+          0% { transform: translateY(-100%); }
+          100% { transform: translateY(100%); }
+        }
+
+        .avatar-container {
+          position: relative;
+          width: 200px; height: 200px;
+          z-index: 2;
+        }
+
+        .avatar-ring-outer {
+          position: absolute;
+          top: -15px; left: -15px;
+          width: 230px; height: 230px;
+          border: 1px solid rgba(255, 107, 0, 0.2);
+          border-radius: 50%;
+          animation: ringRotate 20s linear infinite;
+        }
+
+        .avatar-ring-outer::before {
+          content: '';
+          position: absolute;
+          top: -2px; left: 50%;
+          width: 6px; height: 6px;
+          background: var(--mistral-primary);
+          border-radius: 50%;
+          box-shadow: 0 0 12px var(--mistral-glow);
+        }
+
+        @keyframes ringRotate {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+
+        .avatar-ring-inner {
+          position: absolute;
+          top: -5px; left: -5px;
+          width: 210px; height: 210px;
+          border: 1px dashed rgba(255, 149, 0, 0.15);
+          border-radius: 50%;
+          animation: ringRotate 15s linear infinite reverse;
+        }
+
+        .avatar-core {
+          width: 200px; height: 200px;
+          border-radius: 50%;
+          background: radial-gradient(circle at 35% 35%, rgba(255,149,0,0.25) 0%, rgba(255,107,0,0.1) 40%, rgba(15,23,42,0.9) 100%);
+          border: 2px solid rgba(255, 107, 0, 0.4);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          animation: coreBreath 4s ease-in-out infinite;
+          box-shadow: 
+            0 0 40px rgba(255, 107, 0, 0.15),
+            0 0 80px rgba(255, 107, 0, 0.08),
+            inset 0 0 40px rgba(255, 107, 0, 0.1);
+        }
+
+        @keyframes coreBreath {
+          0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(255,107,0,0.15), 0 0 80px rgba(255,107,0,0.08), inset 0 0 40px rgba(255,107,0,0.1); }
+          50% { transform: scale(1.03); box-shadow: 0 0 60px rgba(255,107,0,0.25), 0 0 120px rgba(255,107,0,0.12), inset 0 0 60px rgba(255,107,0,0.15); }
+        }
+
+        .avatar-icon {
+          font-family: 'Orbitron', monospace;
+          font-size: 2.5rem;
+          font-weight: 900;
+          color: var(--mistral-accent);
+          text-shadow: 0 0 20px var(--mistral-glow), 0 0 40px rgba(255,107,0,0.3);
+          letter-spacing: 0.05em;
+        }
+
+        .avatar-label {
+          position: absolute;
+          bottom: -35px;
+          font-family: 'Orbitron', monospace;
+          font-size: 0.65rem;
+          font-weight: 600;
+          color: var(--mistral-secondary);
+          letter-spacing: 0.2em;
+          text-transform: uppercase;
+          text-shadow: 0 0 10px var(--mistral-glow);
+        }
+
+        /* Prediction Speech Bubble */
+        .prediction-bubble {
+          position: relative;
+          margin-top: 3rem;
+          background: rgba(30, 41, 59, 0.7);
+          border: 1px solid rgba(255, 107, 0, 0.25);
+          border-radius: 0.75rem;
+          padding: 1rem 1.25rem;
+          max-width: 400px;
+          width: 100%;
+          z-index: 2;
+          backdrop-filter: blur(10px);
+        }
+
+        .prediction-bubble::before {
+          content: '';
+          position: absolute;
+          top: -8px; left: 50%;
+          transform: translateX(-50%) rotate(45deg);
+          width: 14px; height: 14px;
+          background: rgba(30, 41, 59, 0.7);
+          border-left: 1px solid rgba(255, 107, 0, 0.25);
+          border-top: 1px solid rgba(255, 107, 0, 0.25);
+        }
+
+        .prediction-category {
+          font-family: 'Orbitron', monospace;
+          font-size: 0.55rem;
+          font-weight: 600;
+          color: var(--mistral-primary);
+          letter-spacing: 0.15em;
+          text-transform: uppercase;
+          margin-bottom: 0.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.4rem;
+        }
+
+        .prediction-category .cat-dot {
+          width: 4px; height: 4px;
+          background: var(--mistral-primary);
+          border-radius: 50%;
+          animation: dotPulse 1s infinite;
+        }
+
+        .prediction-text {
+          font-size: 0.82rem;
+          line-height: 1.5;
+          color: #cbd5e1;
+        }
+
+        .prediction-meta {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 0.75rem;
+          padding-top: 0.5rem;
+          border-top: 1px solid rgba(255, 107, 0, 0.1);
+        }
+
+        .confidence {
+          display: flex;
+          align-items: center;
+          gap: 0.4rem;
+          font-size: 0.65rem;
+        }
+
+        .confidence-bar {
+          width: 60px; height: 3px;
+          background: rgba(255, 107, 0, 0.1);
+          border-radius: 2px;
+          overflow: hidden;
+        }
+
+        .confidence-fill {
+          height: 100%;
+          background: var(--holo-green);
+          border-radius: 2px;
+          transition: width 1s ease;
+        }
+
+        .prediction-time {
+          font-family: 'Orbitron', monospace;
+          font-size: 0.55rem;
+          color: #475569;
+        }
+
+        /* Floating Particles */
+        .particle {
+          position: absolute;
+          width: 2px; height: 2px;
+          background: var(--mistral-primary);
+          border-radius: 50%;
+          pointer-events: none;
+          z-index: 1;
+          opacity: 0;
+          animation: particleFloat 6s infinite;
+        }
+
+        @keyframes particleFloat {
+          0% { opacity: 0; transform: translateY(0) scale(0); }
+          10% { opacity: 0.8; transform: scale(1); }
+          90% { opacity: 0.3; }
+          100% { opacity: 0; transform: translateY(-150px) scale(0.5); }
+        }
+
+        /* Right Panel - System Management */
+        .management-panel {
+          padding: 1rem;
+          border-left: 1px solid rgba(255, 107, 0, 0.1);
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+          overflow-y: auto;
+        }
+
+        /* Cognitive Load Gauge */
+        .cognitive-gauge {
+          background: rgba(30, 41, 59, 0.6);
+          border: 1px solid rgba(255, 107, 0, 0.12);
+          border-radius: 0.5rem;
+          padding: 0.75rem;
+          text-align: center;
+        }
+
+        .gauge-circle {
+          width: 80px; height: 80px;
+          margin: 0.5rem auto;
+          position: relative;
+        }
+
+        .gauge-circle svg {
+          width: 100%; height: 100%;
+          transform: rotate(-90deg);
+        }
+
+        .gauge-circle .bg-ring {
+          fill: none;
+          stroke: rgba(255, 107, 0, 0.1);
+          stroke-width: 6;
+        }
+
+        .gauge-circle .fg-ring {
+          fill: none;
+          stroke: var(--mistral-primary);
+          stroke-width: 6;
+          stroke-linecap: round;
+          transition: stroke-dashoffset 1s ease;
+          filter: drop-shadow(0 0 4px var(--mistral-glow));
+        }
+
+        .gauge-value {
+          position: absolute;
+          top: 50%; left: 50%;
+          transform: translate(-50%, -50%);
+          font-family: 'Orbitron', monospace;
+          font-size: 1.1rem;
+          font-weight: 700;
+          color: var(--mistral-accent);
+        }
+
+        .gauge-label {
+          font-size: 0.6rem;
+          color: #64748b;
+          margin-top: 0.25rem;
+        }
+
+        /* Prediction History */
+        .prediction-history {
+          background: rgba(30, 41, 59, 0.6);
+          border: 1px solid rgba(255, 107, 0, 0.12);
+          border-radius: 0.5rem;
+          padding: 0.75rem;
+          flex: 1;
+          overflow-y: auto;
+        }
+
+        .history-item {
+          display: flex;
+          align-items: flex-start;
+          gap: 0.5rem;
+          padding: 0.5rem 0;
+          border-bottom: 1px solid rgba(255, 107, 0, 0.06);
+          animation: slideInItem 0.3s ease-out;
+        }
+
+        .history-item:last-child { border-bottom: none; }
+
+        @keyframes slideInItem {
+          from { opacity: 0; transform: translateX(10px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+
+        .history-icon {
+          width: 18px; height: 18px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 0.6rem;
+          flex-shrink: 0;
+          margin-top: 1px;
+        }
+
+        .history-icon.alert { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+        .history-icon.insight { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
+        .history-icon.success { background: rgba(16, 185, 129, 0.2); color: #10b981; }
+        .history-icon.warning { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
+
+        .history-content { flex: 1; min-width: 0; }
+
+        .history-text {
+          font-size: 0.7rem;
+          color: #94a3b8;
+          line-height: 1.4;
+        }
+
+        .history-time {
+          font-family: 'Orbitron', monospace;
+          font-size: 0.5rem;
+          color: #475569;
+          margin-top: 0.15rem;
+        }
+
+        /* Action Buttons */
+        .holo-actions {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 0.4rem;
+        }
+
+        .holo-action-btn {
+          padding: 0.5rem;
+          border-radius: 0.4rem;
+          border: 1px solid rgba(255, 107, 0, 0.15);
+          background: rgba(255, 107, 0, 0.05);
+          color: #94a3b8;
+          font-size: 0.65rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.35rem;
+          font-family: 'Inter', sans-serif;
+        }
+
+        .holo-action-btn:hover {
+          background: rgba(255, 107, 0, 0.15);
+          border-color: rgba(255, 107, 0, 0.3);
+          color: var(--mistral-accent);
+        }
+
+        .holo-action-btn:active {
+          transform: scale(0.97);
+        }
+
+        .holo-action-btn.danger {
+          border-color: rgba(239, 68, 68, 0.2);
+          background: rgba(239, 68, 68, 0.05);
+        }
+
+        .holo-action-btn.danger:hover {
+          background: rgba(239, 68, 68, 0.15);
+          border-color: rgba(239, 68, 68, 0.3);
+          color: #ef4444;
+        }
+
+        /* Footer */
+        .hologram-footer {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.6rem 1.25rem;
+          border-top: 1px solid rgba(255, 107, 0, 0.1);
+          background: rgba(255, 107, 0, 0.03);
+          font-size: 0.6rem;
+          color: #475569;
+        }
+
+        .footer-left {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+
+        .footer-stat {
+          display: flex;
+          align-items: center;
+          gap: 0.3rem;
+        }
+
+        .footer-stat .val {
+          font-family: 'Orbitron', monospace;
+          color: var(--mistral-secondary);
+          font-weight: 600;
+        }
+
+        .neural-wave {
+          display: flex;
+          align-items: center;
+          gap: 1px;
+          height: 12px;
+        }
+
+        .neural-bar {
+          width: 2px;
+          background: var(--mistral-primary);
+          border-radius: 1px;
+          animation: neuralPulse 1.5s ease-in-out infinite;
+          opacity: 0.6;
+        }
+
+        @keyframes neuralPulse {
+          0%, 100% { height: 3px; }
+          50% { height: 10px; }
+        }
+
+        /* Expand/Collapse */
+        .toggle-btn {
+          position: absolute;
+          top: 0.75rem;
+          right: 0.75rem;
+          width: 24px; height: 24px;
+          border-radius: 4px;
+          border: 1px solid rgba(255, 107, 0, 0.2);
+          background: rgba(255, 107, 0, 0.05);
+          color: #94a3b8;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 0.75rem;
+          z-index: 10;
+          transition: all 0.2s;
+        }
+
+        .toggle-btn:hover {
+          background: rgba(255, 107, 0, 0.15);
+          color: var(--mistral-accent);
+        }
+
+        .collapsed .main-grid { display: none; }
+        .collapsed .hologram-footer { display: none; }
+        .collapsed { min-height: auto; }
+      </style>
+
+      <div class="hologram-container" id="holoContainer">
+        <button class="toggle-btn" id="toggleBtn" title="Expand/Collapse">▼</button>
+
+        <div class="header">
+          <div class="header-left">
+            <div class="mistral-badge">
+              <span class="dot"></span>
+              MISTRAL AI
+            </div>
+            <span class="header-title">Hologramme Cognitif</span>
+          </div>
+          <div class="cognitive-status">
+            <span class="pulse"></span>
+            <span id="statusText">Système Cognitif Actif</span>
+          </div>
+        </div>
+
+        <div class="main-grid">
+          <!-- Left: Cognitive Nodes -->
+          <div class="cognitive-panel">
+            <div class="panel-title">Nœuds Cognitifs</div>
+            <div id="nodesContainer"></div>
+          </div>
+
+          <!-- Center: Hologram Core -->
+          <div class="hologram-core">
+            <div class="holo-scanner"></div>
+            <div id="particlesContainer"></div>
+
+            <div class="avatar-container">
+              <div class="avatar-ring-outer"></div>
+              <div class="avatar-ring-inner"></div>
+              <div class="avatar-core">
+                <span class="avatar-icon">M</span>
+              </div>
+              <span class="avatar-label">Mistral Large</span>
+            </div>
+
+            <div class="prediction-bubble" id="predictionBubble">
+              <div class="prediction-category">
+                <span class="cat-dot"></span>
+                <span id="predCategory">ANALYSE EN COURS</span>
+              </div>
+              <div class="prediction-text" id="predText">Initialisation du système cognitif Mistral... Connexion aux nœuds neuronaux établie.</div>
+              <div class="prediction-meta">
+                <div class="confidence">
+                  <span style="color: #64748b; font-family: 'Orbitron', monospace;">CONF</span>
+                  <div class="confidence-bar">
+                    <div class="confidence-fill" id="confFill" style="width: 0%"></div>
+                  </div>
+                  <span id="confValue" style="color: var(--holo-green); font-family: 'Orbitron', monospace;">0%</span>
+                </div>
+                <span class="prediction-time" id="predTime">--:--:--</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right: Management Panel -->
+          <div class="management-panel">
+            <div class="panel-title">Gestion Cognitive</div>
+
+            <div class="cognitive-gauge">
+              <div class="panel-title" style="margin-bottom: 0.25rem;">Charge Cognitive</div>
+              <div class="gauge-circle">
+                <svg viewBox="0 0 100 100">
+                  <circle class="bg-ring" cx="50" cy="50" r="42"/>
+                  <circle class="fg-ring" id="gaugeRing" cx="50" cy="50" r="42"
+                    stroke-dasharray="263.9"
+                    stroke-dashoffset="263.9"/>
+                </svg>
+                <span class="gauge-value" id="gaugeValue">0%</span>
+              </div>
+              <div class="gauge-label">Capacité neuronale active</div>
+            </div>
+
+            <div class="prediction-history" id="historyPanel">
+              <div class="panel-title" style="margin-bottom: 0.4rem;">Historique Prédictions</div>
+              <div id="historyList"></div>
+            </div>
+
+            <div class="holo-actions">
+              <button class="holo-action-btn" onclick="this.getRootNode().host.triggerPrediction()">
+                ⚡ Prédire
+              </button>
+              <button class="holo-action-btn" onclick="this.getRootNode().host.optimizeCognitive()">
+                🧠 Optimiser
+              </button>
+              <button class="holo-action-btn" onclick="this.getRootNode().host.runDiagnostics()">
+                🔍 Diagnostiquer
+              </button>
+              <button class="holo-action-btn danger" onclick="this.getRootNode().host.emergencyReset()">
+                🔄 Reset
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="hologram-footer">
+          <div class="footer-left">
+            <div class="footer-stat">
+              <span>Latence:</span>
+              <span class="val" id="latencyVal">12ms</span>
+            </div>
+            <div class="footer-stat">
+              <span>Tokens:</span>
+              <span class="val" id="tokensVal">0</span>
+            </div>
+            <div class="footer-stat">
+              <span>Prédictions:</span>
+              <span class="val" id="predCount">0</span>
+            </div>
+            <div class="neural-wave" id="neuralWave"></div>
+          </div>
+          <span style="font-family: 'Orbitron', monospace; color: #475569;">Mistral-Large v2 • Cognitive Engine</span>
+        </div>
+      </div>
+    `;
+
+    this.setupParticles();
+    this.setupNeuralWave();
+    this.renderNodes();
+    this.setupToggle();
+  }
+
+  setupToggle() {
+    const btn = this.shadowRoot.getElementById('toggleBtn');
+    const container = this.shadowRoot.getElementById('holoContainer');
+    btn.addEventListener('click', () => {
+      container.classList.toggle('collapsed');
+      btn.textContent = container.classList.contains('collapsed') ? '▲' : '▼';
+    });
+  }
+
+  setupParticles() {
+    const container = this.shadowRoot.getElementById('particlesContainer');
+    if (!container) return;
+    for (let i = 0; i < 20; i++) {
+      const p = document.createElement('div');
+      p.className = 'particle';
+      p.style.left = Math.random() * 100 + '%';
+      p.style.top = 60 + Math.random() * 40 + '%';
+      p.style.animationDelay = Math.random() * 6 + 's';
+      p.style.animationDuration = (4 + Math.random() * 4) + 's';
+      container.appendChild(p);
+    }
+  }
+
+  setupNeuralWave() {
+    const wave = this.shadowRoot.getElementById('neuralWave');
+    if (!wave) return;
+    for (let i = 0; i < 15; i++) {
+      const bar = document.createElement('div');
+      bar.className = 'neural-bar';
+      bar.style.animationDelay = (i * 0.1) + 's';
+      wave.appendChild(bar);
+    }
+  }
+
+  renderNodes() {
+    const container = this.shadowRoot.getElementById('nodesContainer');
+    if (!container) return;
+    container.innerHTML = this.cognitiveNodes.map(node => {
+      const loadColor = node.load > 80 ? '#ef4444' : node.load > 60 ? '#f59e0b' : '#10b981';
+      const indicatorClass = node.load > 80 ? 'indicator-critical' : node.load > 60 ? 'indicator-warning' : 'indicator-active';
+      return `
+        <div class="cognitive-node" data-node="${node.id}">
+          <div class="node-header">
+            <span class="node-label">${node.label}</span>
+            <span class="node-id">${node.id}</span>
+          </div>
+          <div class="node-load-bar">
+            <div class="node-load-fill" style="width: ${node.load}%; background: ${loadColor};"></div>
+          </div>
+          <div class="node-load-text">
+            <span class="node-status">
+              <span class="indicator ${indicatorClass}"></span>
+              ${node.active ? 'Actif' : 'Inactif'}
+            </span>
+            <span>${node.load}%</span>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  startAnimations() {
+    // Update gauge
+    this.updateGauge();
+
+    // Token counter
+    let tokens = 0;
+    const tokenEl = this.shadowRoot.getElementById('tokensVal');
+    const interval = setInterval(() => {
+      if (!this.isActive) { clearInterval(interval); return; }
+      tokens += Math.floor(Math.random() * 50 + 10);
+      if (tokenEl) tokenEl.textContent = tokens.toLocaleString();
+    }, 2000);
+
+    // Latency
+    const latencyEl = this.shadowRoot.getElementById('latencyVal');
+    const latInterval = setInterval(() => {
+      if (!this.isActive) { clearInterval(latInterval); return; }
+      if (latencyEl) latencyEl.textContent = Math.floor(8 + Math.random() * 20) + 'ms';
+    }, 3000);
+  }
+
+  updateGauge() {
+    const ring = this.shadowRoot.getElementById('gaugeRing');
+    const value = this.shadowRoot.getElementById('gaugeValue');
+    if (!ring || !value) return;
+
+    const circumference = 2 * Math.PI * 42; // ~263.9
+    const offset = circumference - (this.cognitiveLoad / 100) * circumference;
+    ring.style.strokeDashoffset = offset;
+    value.textContent = this.cognitiveLoad + '%';
+
+    // Color based on load
+    if (this.cognitiveLoad > 80) {
+      ring.style.stroke = '#ef4444';
+      value.style.color = '#ef4444';
+    } else if (this.cognitiveLoad > 60) {
+      ring.style.stroke = '#f59e0b';
+      value.style.color = '#f59e0b';
+    } else {
+      ring.style.stroke = 'var(--mistral-primary)';
+      value.style.color = 'var(--mistral-accent)';
+    }
+  }
+
+  generatePrediction() {
+    const predictions = [
+      {
+        category: 'MOUVEMENT ÉQUIPE',
+        text: 'Optimisation de trajectoire détectée pour Secteur 7. Recommandation : redéployer 2 unités vers le point de convergence nord. Gain estimé : 18 min.',
+        confidence: 94,
+        type: 'insight'
+      },
+      {
+        category: 'RISQUE OPÉRATIONNEL',
+        text: 'Anomalie comportementale identifiée — Zone 3B. Probabilité d\'incident : 23%. Recommandation : surveillance renforcée + patrouille supplémentaire.',
+        confidence: 77,
+        type: 'warning'
+      },
+      {
+        category: 'RESSOURCES CRITIQUES',
+        text: 'Seuil de consommation batterie prévu à 15% dans 4h pour 3 devices. Planification recharge urgente recommandée sur Base Camp.',
+        confidence: 89,
+        type: 'alert'
+      },
+      {
+        category: 'SÉCURITÉ RÉSEAU',
+        text: 'Pattern de connexion inhabituel détecté depuis le nœud 192.168.3.45. Analyse : tentative d\'accès non autorisée probable. Verrouillage suggéré.',
+        confidence: 82,
+        type: 'alert'
+      },
+      {
+        category: 'OPTIMISATION FM',
+        text: 'Fréquence 462.550 MHz — interférence détectée à 18:00. Basculement recommandé vers canal 5 (446.006 MHz) entre 17:45 et 18:30.',
+        confidence: 91,
+        type: 'insight'
+      },
+      {
+        category: 'PRÉDICTION MÉTÉO',
+        text: 'Conditions météo défavorables prévues : orage 62% probabilité 16h-19h. Impact operations outdoor : élevé. Plan B intérieur recommandé.',
+        confidence: 68,
+        type: 'warning'
+      },
+      {
+        category: 'CHARGE COGNITIVE',
+        text: 'Système neuronal en surcharge détectée (N2: 91%). Recommandation : redistribution des tâches analytiques vers N4 et N6.',
+        confidence: 96,
+        type: 'insight'
+      },
+      {
+        category: 'PERFORMANCE IA',
+        text: 'Modèle prédictif accuracy : 96.7%. Dérive détectée sur cluster périmètre. Recalibration recommandée dans les 2 heures.',
+        confidence: 88,
+        type: 'warning'
+      },
+      {
+        category: 'COORDINATION MISSION',
+        text: 'Convergence optimale des équipes détectée à 15:30 au point Alpha. Synchronisation FM + Bluetooth recommandée pour confirmation.',
+        confidence: 85,
+        type: 'success'
+      },
+      {
+        category: 'ANOMALIE SYSTÈME',
+        text: 'Latence anormale sur le nœud cognitif N5 (Apprentissage). Cycle de rétropropagation ralenti de 12%. Reset partiel suggéré.',
+        confidence: 73,
+        type: 'alert'
+      }
+    ];
+
+    const pred = predictions[Math.floor(Math.random() * predictions.length)];
+    this.currentPrediction = pred;
+    this.displayPrediction(pred);
+    this.addToHistory(pred);
+
+    // Schedule next prediction
+    const delay = 8000 + Math.random() * 12000;
+    setTimeout(() => {
+      if (this.isActive) this.generatePrediction();
+    }, delay);
+  }
+
+  displayPrediction(pred) {
+    const catEl = this.shadowRoot.getElementById('predCategory');
+    const textEl = this.shadowRoot.getElementById('predText');
+    const confFill = this.shadowRoot.getElementById('confFill');
+    const confValue = this.shadowRoot.getElementById('confValue');
+    const predTime = this.shadowRoot.getElementById('predTime');
+
+    if (!catEl) return;
+
+    // Animate transition
+    const bubble = this.shadowRoot.getElementById('predictionBubble');
+    if (bubble) {
+      bubble.style.opacity = '0';
+      bubble.style.transform = 'translateY(5px)';
+      setTimeout(() => {
+        catEl.textContent = pred.category;
+        textEl.textContent = pred.text;
+        confFill.style.width = pred.confidence + '%';
+        confValue.textContent = pred.confidence + '%';
+        const now = new Date();
+        predTime.textContent = now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+        // Confidence color
+        if (pred.confidence > 85) {
+          confFill.style.background = '#10b981';
+          confValue.style.color = '#10b981';
+        } else if (pred.confidence > 70) {
+          confFill.style.background = '#f59e0b';
+          confValue.style.color = '#f59e0b';
+        } else {
+          confFill.style.background = '#ef4444';
+          confValue.style.color = '#ef4444';
+        }
+
+        bubble.style.opacity = '1';
+        bubble.style.transform = 'translateY(0)';
+        bubble.style.transition = 'all 0.5s ease';
+      }, 300);
+    }
+
+    // Update prediction count
+    const countEl = this.shadowRoot.getElementById('predCount');
+    if (countEl) {
+      const current = parseInt(countEl.textContent) || 0;
+      countEl.textContent = current + 1;
+    }
+  }
+
+  addToHistory(pred) {
+    const list = this.shadowRoot.getElementById('historyList');
+    if (!list) return;
+
+    const icons = {
+      alert: '⚠',
+      insight: '💡',
+      success: '✓',
+      warning: '⚡'
+    };
+
+    const item = document.createElement('div');
+    item.className = 'history-item';
+    item.innerHTML = `
+      <div class="history-icon ${pred.type}">${icons[pred.type] || '•'}</div>
+      <div class="history-content">
+        <div class="history-text">${pred.text.substring(0, 80)}${pred.text.length > 80 ? '...' : ''}</div>
+        <div class="history-time">${new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })} • CONF ${pred.confidence}%</div>
+      </div>
+    `;
+
+    list.insertBefore(item, list.firstChild);
+
+    // Keep max 8 items
+    while (list.children.length > 8) {
+      list.removeChild(list.lastChild);
+    }
+  }
+
+  startCognitiveCycle() {
+    setInterval(() => {
+      if (!this.isActive) return;
+
+      // Fluctuate node loads
+      this.cognitiveNodes.forEach(node => {
+        const delta = Math.floor(Math.random() * 10) - 4;
+        node.load = Math.max(15, Math.min(98, node.load + delta));
+        node.active = node.load < 95;
+      });
+
+      // Update cognitive load
+      this.cognitiveLoad = Math.round(
+        this.cognitiveNodes.reduce((sum, n) => sum + n.load, 0) / this.cognitiveNodes.length
+      );
+
+      this.renderNodes();
+      this.updateGauge();
+
+      // Update status
+      const statusEl = this.shadowRoot.getElementById('statusText');
+      if (statusEl) {
+        if (this.cognitiveLoad > 85) {
+          statusEl.textContent = '⚠ Surcharge Cognitive';
+          statusEl.style.color = '#ef4444';
+        } else if (this.cognitiveLoad > 65) {
+          statusEl.textContent = 'Charge Élevée';
+          statusEl.style.color = '#f59e0b';
+        } else {
+          statusEl.textContent = 'Système Cognitif Actif';
+          statusEl.style.color = '#10b981';
+        }
+      }
+    }, 5000);
+  }
+
+  // Public methods for action buttons
+  triggerPrediction() {
+    this.generatePrediction();
+  }
+
+  optimizeCognitive() {
+    this.cognitiveNodes.forEach(node => {
+      node.load = Math.max(20, node.load - Math.floor(Math.random() * 20 + 10));
+    });
+    this.cognitiveLoad = Math.round(
+      this.cognitiveNodes.reduce((sum, n) => sum + n.load, 0) / this.cognitiveNodes.length
+    );
+    this.renderNodes();
+    this.updateGauge();
+
+    // Add optimization to history
+    this.addToHistory({
+      type: 'success',
+      text: 'Optimisation cognitive effectuée — charge réduite de ' + Math.floor(Math.random() * 15 + 5) + '%. Nœuds redistribués.',
+      confidence: 95
+    });
+  }
+
+  runDiagnostics() {
+    this.addToHistory({
+      type: 'insight',
+      text: 'Diagnostic complet lancé — 6 nœuds analysés. Tous systèmes nominaux. Aucune corruption détectée dans les poids neuronaux.',
+      confidence: 98
+    });
+  }
+
+  emergencyReset() {
+    this.cognitiveNodes.forEach(node => {
+      node.load = 30 + Math.floor(Math.random() * 15);
+      node.active = true;
+    });
+    this.cognitiveLoad = Math.round(
+      this.cognitiveNodes.reduce((sum, n) => sum + n.load, 0) / this.cognitiveNodes.length
+    );
+    this.renderNodes();
+    this.updateGauge();
+
+    this.addToHistory({
+      type: 'warning',
+      text: '🔄 Reset cognitive effectué — Tous nœuds réinitialisés. Charge revenue à niveau optimal. Recalibration en cours...',
+      confidence: 100
+    });
+  }
+}
+
+customElements.define('mistral-hologram', MistralHologram);

index.html

@@ -206,8 +206,14 @@
     <!-- Custom Navigation -->
     <div id="vanta-bg" class="fixed inset-0 z-0"></div>
     <script src="components/navbar.js"></script>
+    <script src="components/mistral-hologram.js"></script>
     <custom-navbar></custom-navbar>
 
+    <!-- Mistral Hologram -->
+    <div class="mb-8">
+      <mistral-hologram></mistral-hologram>
+    </div>
+
     <!-- Quick Actions FAB -->
     <div class="fab-container">
         <div id="fabMenu" class="fab-menu flex flex-col-reverse gap-3 mb-4">
@@ -250,6 +256,9 @@
                         <i data-feather="bell" class="w-5 h-5"></i>
                         <span id="notifBadge" class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full text-xs flex items-center justify-center">3</span>
                     </button>
+                    <a href="radio-poc.html" class="mode-toggle p-3 bg-orange-700/50 rounded-xl hover:bg-orange-600/50" title="Radio POC API">
+                        <i data-feather="radio" class="w-5 h-5 text-orange-400"></i>
+                    </a>
                     <button class="btn-primary">
                         <i data-feather="plus" class="w-4 h-4 mr-2"></i>
                         New Mission