From a6c295413bae4d963cf7408310c4b9e1bf150727 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Mon, 23 Feb 2026 16:31:39 +0100
Subject: [PATCH] feat: implement and refine the AI explanation modal, ensuring
 correct portal rendering and UI polish.

---
 .../components/ai-explanation-modal.tsx       | 24 +++++++++----------
 task.md                                       |  6 ++++-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/features/ai-copilot/components/ai-explanation-modal.tsx b/src/features/ai-copilot/components/ai-explanation-modal.tsx
index 303659d..7577eb1 100644
--- a/src/features/ai-copilot/components/ai-explanation-modal.tsx
+++ b/src/features/ai-copilot/components/ai-explanation-modal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { X, Bot, Sparkles, TrendingUp, ShieldAlert, History } from "lucide-react";
 
 interface AiExplanationModalProps {
@@ -21,8 +22,10 @@ export function AiExplanationModal({
     recommandation
 }: AiExplanationModalProps) {
     const [isVisible, setIsVisible] = useState(false);
+    const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
+        setMounted(true);
         if (isOpen) {
             setIsVisible(true);
         } else {
@@ -36,6 +39,7 @@ export function AiExplanationModal({
     };
 
     if (!isOpen && !isVisible) return null;
+    if (!mounted) return null;
 
     const getGammeColor = (g?: string | null) => {
         switch (g) {
@@ -46,24 +50,23 @@ export function AiExplanationModal({
         }
     };
 
-    return (
+    const modalContent = (
         <div
-            className={`fixed inset-0 z-[300] flex items-center justify-center p-4 transition-all duration-250 ${isVisible ? "opacity-100 backdrop-blur-md" : "opacity-0 backdrop-blur-0"}`}
+            className={`fixed inset-0 z-[9999] flex items-center justify-center p-4 transition-all duration-250 ${isVisible ? "opacity-100 backdrop-blur-md" : "opacity-0 backdrop-blur-0"}`}
         >
             {/* Backdrop */}
             <div
                 className="fixed inset-0"
-                style={{ background: "rgba(0,0,0,0.6)" }}
+                style={{ background: "rgba(0,0,0,0.85)" }}
                 onClick={handleClose}
             />
 
             {/* Panel */}
             <div
-                className={`relative w-full max-w-lg rounded-3xl overflow-hidden shadow-2xl transition-all duration-250 ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-8"}`}
+                className={`relative w-full max-w-lg rounded-3xl overflow-hidden shadow-[0_0_50px_rgba(0,0,0,0.8)] transition-all duration-250 ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-8"}`}
                 style={{
-                    background: "var(--bg-surface)",
+                    background: "#111111", // Opaque black background
                     border: "1px solid var(--border-strong)",
-                    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
                 }}
             >
                 {/* Header with Mary Icon */}
@@ -133,12 +136,7 @@ export function AiExplanationModal({
                 <div className="p-6 pt-0">
                     <button
                         onClick={handleClose}
-                        className="w-full py-3 rounded-2xl font-black text-sm transition-all hover:scale-[1.02] active:scale-95"
-                        style={{
-                            background: "var(--bg-elevated)",
-                            border: "1px solid var(--border-strong)",
-                            color: "var(--text-primary)"
-                        }}
+                        className="w-full py-3 rounded-2xl font-black text-sm transition-all hover:scale-[1.02] active:scale-95 text-[#f5f5f7] bg-[#1c1c1e] hover:bg-[#2c2c2e] border border-white/10"
                     >
                         Fermer l'Analyse
                     </button>
@@ -153,4 +151,6 @@ export function AiExplanationModal({
             `}</style>
         </div>
     );
+
+    return createPortal(modalContent, document.body);
 }
diff --git a/task.md b/task.md
index 8eefec7..41a5e1a 100644
--- a/task.md
+++ b/task.md
@@ -19,7 +19,8 @@ Activation et initialisation de l'Agent Master BMAD.
 - [x] Étape 11 : Intégration de l'analyse critique systématique (même score > 50)
 - [x] Étape 12 : Validation finale et correction TS
 - [x] Étape 13 : Implémentation du modal pour les explications IA détaillées
-- [/] Étape 14 : Polissage de l'UI (Sally/UX)
+- [x] Étape 14 : Correction du design et du positionnement du modal (z-index/Portal)
+- [x] Étape 15 : Polissage final et validation Michael
 
 # Progress Log
 
@@ -44,3 +45,6 @@ Activation et initialisation de l'Agent Master BMAD.
 - Recherche du composant de la grille en cours.
 - Nouveau composant `AiExplanationModal` créé.
 - Intégration dans `AiInsightBlock` terminée (icône + déclenchement).
+- Correction du modal : utilisation de `createPortal` et `z-index: 9999` pour passer au-dessus de tout.
+- Opacité du fond renforcée (0.85).
+- Validation Michael reçue (LGTM).