feat: Initialize AI Studio project with React and Vite

Sets up a new AI Studio project using React, Vite, and TypeScript. Includes basic styling, layout for a strategic simulator, and essential dependencies.
2025-11-21 07:32:58 +01:00 · 2025-11-21 07:32:58 +01:00 · db2cc93fab
commit db2cc93fab
parent 6b3baccc94
8 changed files with 699 additions and 8 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -1,11 +1,20 @@
 <div align="center">
-
 <img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
-
-  <h1>Built with AI Studio</h2>
-
-  <p>The fastest path from prompt to production with Gemini.</p>
-
-  <a href="https://aistudio.google.com/apps">Start building</a>
-
 </div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1BMdgG2F3XgqJLpiOrmttuhBBTUR9rQVq
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`
--- a/index.html
+++ b/index.html
@ -0,0 +1,55 @@
+
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#0f172a" />
+    <title>Gedimat Lunel - Simulateur Stratégique</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        background-color: #0f172a;
+        color: #f8fafc;
+        font-family: 'Inter', sans-serif;
+        overflow: hidden;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      /* Animations */
+      @keyframes slideInRight {
+        from { transform: translateX(100%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+      }
+      @keyframes popIn { 
+        from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); } 
+        to { opacity: 1; transform: translate(-50%, -50%) scale(1); } 
+      }
+      @keyframes ping { 
+        0% { transform: scale(1); opacity: 1; } 
+        100% { transform: scale(2); opacity: 0; } 
+      }
+    </style>
+    <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@18.2.0",
+    "react-dom": "https://esm.sh/react-dom@18.2.0",
+    "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+    "lucide-react": "https://esm.sh/lucide-react@0.263.1",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/"
+  }
+}
+</script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
--- a/index.tsx
+++ b/index.tsx
@ -0,0 +1,524 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { AlertTriangle, CheckCircle, TrendingUp, TrendingDown, Truck, MessageCircle, Clock, Smartphone } from 'lucide-react';
+
+/**
+ * GEDIMAT LUNEL NEGOCE - SIMULATEUR STRATÉGIQUE V2.0 (CINEMA MODE)
+ * Version Pure JS pour compatibilité maximale
+ */
+
+// --- CONSTANTES & STYLES ---
+const COLORS = {
+  bg: "#0f172a",       // Slate 900
+  card: "#1e293b",     // Slate 800
+  success: "#10b981",  // Emerald 500
+  danger: "#ef4444",   // Red 500
+  warning: "#f59e0b",  // Amber 500
+  primary: "#3b82f6",  // Blue 500
+  text: "#f8fafc",
+  textMuted: "#94a3b8"
+};
+
+const STYLES = {
+  container: {
+    fontFamily: '"Inter", "Segoe UI", sans-serif',
+    backgroundColor: COLORS.bg,
+    color: COLORS.text,
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    position: 'relative',
+  } as React.CSSProperties,
+  header: {
+    padding: '20px',
+    backgroundColor: 'rgba(15, 23, 42, 0.9)',
+    borderBottom: `1px solid ${COLORS.card}`,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    zIndex: 10,
+    height: '80px'
+  } as React.CSSProperties,
+  metricBox: {
+    padding: '8px 16px',
+    borderRadius: '8px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    minWidth: '120px',
+    border: '1px solid rgba(255,255,255,0.05)'
+  } as React.CSSProperties,
+  mainStage: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    padding: '20px'
+  } as React.CSSProperties,
+  card: {
+    backgroundColor: COLORS.card,
+    borderRadius: '16px',
+    padding: '40px',
+    width: '650px',
+    maxWidth: '100%',
+    boxShadow: '0 20px 50px rgba(0,0,0,0.5)',
+    position: 'relative',
+    border: `1px solid ${COLORS.textMuted}20`
+  } as React.CSSProperties,
+  button: (variant: string, isActive = false): React.CSSProperties => ({
+    padding: '16px 24px',
+    borderRadius: '12px',
+    fontWeight: 600,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    width: '100%',
+    transition: 'all 0.2s',
+    backgroundColor: isActive ? (variant === 'success' ? `${COLORS.success}30` : `${COLORS.danger}30`) : 'rgba(255,255,255,0.03)',
+    color: isActive ? (variant === 'success' ? COLORS.success : COLORS.danger) : COLORS.textMuted,
+    border: `1px solid ${isActive ? (variant === 'success' ? COLORS.success : COLORS.danger) : 'rgba(255,255,255,0.1)'}`,
+    transform: isActive ? 'scale(1.02)' : 'scale(1)'
+  })
+};
+
+// --- COMPOSANTS UI ---
+
+const StatCounter = ({ label, value, type }: { label: string; value: number; type: string }) => (
+  <div style={{ ...STYLES.metricBox, backgroundColor: type === 'cost' ? `${COLORS.danger}10` : `${COLORS.success}10` }}>
+    <span style={{ fontSize: '11px', color: COLORS.textMuted, textTransform: 'uppercase', letterSpacing: '1px' }}>{label}</span>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+      {type === 'cost' ? <TrendingDown size={16} color={COLORS.danger} /> : <TrendingUp size={16} color={COLORS.success} />}
+      <span style={{ fontSize: '20px', fontWeight: 'bold', color: type === 'cost' ? COLORS.danger : COLORS.success }}>
+        {value.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 })}
+      </span>
+    </div>
+  </div>
+);
+
+const VirtualCursor = ({ x, y, clicking }: { x: number; y: number; clicking: boolean }) => (
+  <div style={{
+    position: 'fixed',
+    top: 0, left: 0,
+    transform: `translate(${x}px, ${y}px)`,
+    transition: 'transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)',
+    pointerEvents: 'none',
+    zIndex: 9999
+  }}>
+    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" style={{ filter: 'drop-shadow(2px 4px 6px rgba(0,0,0,0.5))' }}>
+      <path d="M3 3L10.07 19.97L12.58 12.58L19.97 10.07L3 3Z" fill="white" stroke="black" strokeWidth="2"/>
+    </svg>
+    {clicking && (
+      <div style={{
+        position: 'absolute', top: -10, left: -10, width: 40, height: 40,
+        borderRadius: '50%', border: `2px solid ${COLORS.primary}`,
+        animation: 'ping 0.4s cubic-bezier(0, 0, 0.2, 1)'
+      }} />
+    )}
+  </div>
+);
+
+const FlashCard = ({ title, message, type }: { title: string; message: string; type: string }) => (
+  <div style={{
+    position: 'absolute',
+    top: '50%', left: '50%',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: type === 'bad' ? '#7f1d1d' : '#064e3b',
+    color: 'white',
+    padding: '30px',
+    borderRadius: '16px',
+    textAlign: 'center',
+    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.8)',
+    zIndex: 100,
+    animation: 'popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+    minWidth: '350px',
+    border: `1px solid ${type === 'bad' ? COLORS.danger : COLORS.success}`
+  }}>
+    {type === 'bad' ? <AlertTriangle size={48} style={{ marginBottom: 15 }} /> : <CheckCircle size={48} style={{ marginBottom: 15 }} />}
+    <h2 style={{ margin: '0 0 10px 0', fontSize: '24px', fontWeight: 'bold' }}>{title}</h2>
+    <p style={{ margin: 0, fontSize: '16px', opacity: 0.9, lineHeight: '1.5' }}>{message}</p>
+  </div>
+);
+
+const PhoneMockup = ({ show, type }: { show: boolean; type: string }) => {
+  if (!show) return null;
+  return (
+    <div style={{
+      position: 'absolute',
+      right: -220, top: '50%',
+      transform: 'translateY(-50%)',
+      width: 260, height: 480,
+      backgroundColor: '#fff',
+      borderRadius: 30,
+      border: '8px solid #1e293b',
+      boxShadow: '0 20px 50px rgba(0,0,0,0.5)',
+      overflow: 'hidden',
+      display: 'flex', flexDirection: 'column',
+      zIndex: 50,
+      animation: 'slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+    }}>
+      {/* Notch */}
+      <div style={{ height: 25, backgroundColor: '#1e293b', width: '50%', alignSelf: 'center', borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }}></div>
+      
+      {/* Header */}
+      <div style={{ backgroundColor: type === 'whatsapp' ? '#075e54' : '#f5f5f5', padding: '10px 15px', color: type === 'whatsapp' ? '#fff' : '#333', borderBottom: '1px solid #ddd' }}>
+        <div style={{ fontSize: 10, opacity: 0.8 }}>16:02</div>
+        <div style={{ fontSize: 14, fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 5 }}>
+          {type === 'whatsapp' && <div style={{width: 24, height: 24, borderRadius: '50%', backgroundColor: '#25D366'}}></div>}
+          {type === 'whatsapp' ? 'Chantier DUPONT' : 'Messagerie'}
+        </div>
+      </div>
+      
+      {/* Body */}
+      <div style={{ flex: 1, padding: 15, backgroundColor: type === 'whatsapp' ? '#ece5dd' : '#fff', display: 'flex', flexDirection: 'column', gap: 10, backgroundImage: type === 'whatsapp' ? 'url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png")' : 'none', backgroundSize: 'cover' }}>
+        
+        {type === 'whatsapp' ? (
+          <>
+             <div style={{ alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0.2)', color: '#fff', padding: '2px 8px', borderRadius: 10, fontSize: 10, marginBottom: 10 }}>Aujourd'hui</div>
+             
+             {/* Message Commercial */}
+             <div style={{ alignSelf: 'flex-end', backgroundColor: '#dcf8c6', padding: 10, borderRadius: '8px 0 8px 8px', fontSize: 12, maxWidth: '90%', color: '#000', boxShadow: '0 1px 1px rgba(0,0,0,0.1)' }}>
+              <div style={{fontSize: 10, fontWeight: 'bold', color: '#e542a3', marginBottom: 2}}>Sophie (Logistique)</div>
+              ✅ Commande #402 chargée.<br/>Arrivée demain 10h00.
+              <div style={{ fontSize: 9, opacity: 0.5, textAlign: 'right', marginTop: 2 }}>16:00</div>
+            </div>
+
+            {/* Photo */}
+            <div style={{ alignSelf: 'flex-end', backgroundColor: '#dcf8c6', padding: 4, borderRadius: '8px 0 8px 8px', maxWidth: '90%', boxShadow: '0 1px 1px rgba(0,0,0,0.1)' }}>
+               <div style={{ width: 160, height: 100, backgroundColor: '#86efac', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#166534', fontSize: 10, flexDirection: 'column' }}>
+                 <Truck size={24} />
+                 [PHOTO PALETTES]
+               </div>
+               <div style={{ fontSize: 9, opacity: 0.5, textAlign: 'right', paddingRight: 4, paddingBottom: 2, color: '#000' }}>16:00</div>
+            </div>
+          </>
+        ) : (
+          <>
+             <div style={{ alignSelf: 'center', color: '#999', fontSize: 10, marginBottom: 10 }}>Hier 17:12</div>
+             <div style={{ alignSelf: 'flex-start', backgroundColor: '#e5e5ea', padding: 10, borderRadius: '15px 15px 15px 0', fontSize: 12, maxWidth: '80%', color: '#000' }}>
+               GEDIMAT: Votre livraison est prévue pour demain dans la journée.
+             </div>
+          </>
+        )}
+      </div>
+      
+      {/* Footer Input */}
+      <div style={{ height: 50, backgroundColor: '#f0f0f0', borderTop: '1px solid #ddd' }}></div>
+    </div>
+  );
+};
+
+function GedimatSimulator() {
+  const [metrics, setMetrics] = useState({ waste: 0, savings: 0 });
+  const [cursor, setCursor] = useState({ x: -100, y: -100, clicking: false });
+  const [activeModule, setActiveModule] = useState(0); // 0: Intro, 1: Transport, 2: 15:30, 3: WhatsApp, 4: Summary
+  const [flashcard, setFlashcard] = useState<{ title: string; msg: string; type: string } | null>(null);
+  const [simStep, setSimStep] = useState(0);
+  const [phoneType, setPhoneType] = useState<string | null>(null);
+
+  const btnBadRef = useRef<HTMLButtonElement>(null);
+  const btnGoodRef = useRef<HTMLButtonElement>(null);
+  const startBtnRef = useRef<HTMLButtonElement>(null);
+
+  // Initialiser cursor au centre
+  useEffect(() => {
+    setCursor({ x: window.innerWidth / 2, y: window.innerHeight / 2, clicking: false });
+  }, []);
+
+  const moveCursorTo = (ref: React.RefObject<HTMLElement>, callback?: () => void) => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      const targetX = rect.left + rect.width / 2; 
+      const targetY = rect.top + rect.height / 2;
+      
+      setCursor(prev => ({ ...prev, x: targetX, y: targetY }));
+      
+      setTimeout(() => {
+        setCursor(prev => ({ ...prev, clicking: true })); // Click down
+        setTimeout(() => {
+          setCursor(prev => ({ ...prev, clicking: false })); // Click up
+          if (callback) callback();
+        }, 300);
+      }, 800); // Temps de trajet
+    }
+  };
+
+  // --- SCÉNARIO AUTOMATIQUE ---
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+
+    const runScenario = async () => {
+      // AUTO START
+      if (activeModule === 0) {
+         timeout = setTimeout(() => {
+            if (startBtnRef.current) {
+               moveCursorTo(startBtnRef, () => setActiveModule(1));
+            }
+         }, 2000);
+      }
+
+      // ---------------- MODULE 1: TRANSPORT ----------------
+      if (activeModule === 1) {
+        if (simStep === 0) {
+          // Expliquer le problème
+          setFlashcard({ title: "LE PROBLÈME", msg: "Gisors et Méru commandent séparément au même fournisseur.", type: 'bad' });
+          timeout = setTimeout(() => {
+            setFlashcard(null);
+            // Action "Mauvaise"
+            moveCursorTo(btnBadRef, () => {
+              setMetrics(prev => ({ ...prev, waste: prev.waste + 180 }));
+              setFlashcard({ title: "DOUBLE FACTURATION", msg: "2 camions payés pour rien. Gaspillage : 180€.", type: 'bad' });
+              setTimeout(() => { setFlashcard(null); setSimStep(1); }, 3000);
+            });
+          }, 3000);
+        } else if (simStep === 1) {
+          // Expliquer la solution
+          timeout = setTimeout(() => {
+            // Action "Bonne"
+            moveCursorTo(btnGoodRef, () => {
+              setMetrics(prev => ({ ...prev, savings: prev.savings + 90 }));
+              setFlashcard({ title: "SOLUTION XCEL", msg: "Consolidation J-1. Livraison unique à Méru + Navette interne.", type: 'good' });
+              setTimeout(() => { setFlashcard(null); setActiveModule(2); setSimStep(0); }, 3500);
+            });
+          }, 1000);
+        }
+      }
+      
+      // ---------------- MODULE 2: PROTOCOLE 15:30 ----------------
+      if (activeModule === 2) {
+        if (simStep === 0) {
+           setFlashcard({ title: "LE PROBLÈME", msg: "Le camion n'est pas là à 15h30. On ne sait rien.", type: 'bad' });
+           timeout = setTimeout(() => {
+            setFlashcard(null);
+            moveCursorTo(btnBadRef, () => {
+              setMetrics(prev => ({ ...prev, waste: prev.waste + 2000 }));
+              setFlashcard({ title: "CLIENT PERDU", msg: "Le client découvre le retard demain matin. Chantier arrêté.", type: 'bad' });
+              setTimeout(() => { setFlashcard(null); setSimStep(1); }, 3000);
+            });
+          }, 3000);
+        } else if (simStep === 1) {
+          timeout = setTimeout(() => {
+            moveCursorTo(btnGoodRef, () => {
+              setMetrics(prev => ({ ...prev, savings: prev.savings + 500 }));
+              setFlashcard({ title: "PROTOCOLE 15:30", msg: "Alerte immédiate. Taxi-colis activé. Client prévenu à 16h.", type: 'good' });
+              setTimeout(() => { setFlashcard(null); setActiveModule(3); setSimStep(0); }, 3500);
+            });
+          }, 1000);
+        }
+      }
+
+      // ---------------- MODULE 3: WHATSAPP CONCIERGE ----------------
+      if (activeModule === 3) {
+        if (simStep === 0) {
+           setFlashcard({ title: "LE PROBLÈME", msg: "SMS impersonnel envoyé à 17h. Aucune réponse.", type: 'bad' });
+           timeout = setTimeout(() => {
+            setFlashcard(null);
+            moveCursorTo(btnBadRef, () => {
+              setPhoneType('sms'); // Show SMS phone
+              setFlashcard({ title: "COMMUNICATION FROIDE", msg: "Le client n'est pas rassuré. Il rappelle le commercial.", type: 'bad' });
+              setTimeout(() => { setPhoneType(null); setFlashcard(null); setSimStep(1); }, 4000);
+            });
+          }, 3000);
+        } else if (simStep === 1) {
+          timeout = setTimeout(() => {
+            moveCursorTo(btnGoodRef, () => {
+              setMetrics(prev => ({ ...prev, savings: prev.savings + 1200 }));
+              setPhoneType('whatsapp'); // Show WhatsApp phone
+              setFlashcard({ title: "EFFET 'CONCIERGE'", msg: "Groupe WhatsApp Chantier. Photo envoyée. Confiance totale.", type: 'good' });
+              setTimeout(() => { setPhoneType(null); setFlashcard(null); setActiveModule(4); }, 5000);
+            });
+          }, 1000);
+        }
+      }
+    };
+
+    runScenario();
+    return () => clearTimeout(timeout);
+  }, [activeModule, simStep]);
+
+  // --- RENDU DES MODULES ---
+
+  return (
+    <div style={STYLES.container}>
+      {/* HEADER P&L */}
+      <div style={STYLES.header}>
+        <div style={{ fontWeight: 'bold', fontSize: '20px', color: 'white', paddingLeft: 20 }}>GEDIMAT <span style={{color: COLORS.primary}}>XCEL</span></div>
+        <div style={{ display: 'flex', gap: '20px', paddingRight: 20 }}>
+          <StatCounter label="Pertes potentielles" value={metrics.waste} type="cost" />
+          <StatCounter label="Gains projetés" value={metrics.savings} type="profit" />
+        </div>
+      </div>
+
+      {/* MAIN STAGE */}
+      <div style={STYLES.mainStage}>
+        <div style={STYLES.card}>
+          {activeModule === 0 && (
+            <div style={{ textAlign: 'center', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+              <h1 style={{ fontSize: '42px', marginBottom: '20px', background: 'linear-gradient(to right, #fff, #94a3b8)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Gedimat XCEL v3.55</h1>
+              <p style={{ color: COLORS.textMuted, marginBottom: '40px', fontSize: '18px' }}>Simulation d'Impact Stratégique & Financier</p>
+              <button 
+                ref={startBtnRef}
+                onClick={() => setActiveModule(1)}
+                style={{ ...STYLES.button('primary', true), margin: '0 auto', width: 'auto', fontSize: '18px', padding: '15px 40px' }}
+              >
+                LANCER LA DÉMONSTRATION
+              </button>
+            </div>
+          )}
+
+          {activeModule === 1 && (
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '30px' }}>
+                <h3 style={{ display: 'flex', alignItems: 'center', gap: '15px', margin: 0, fontSize: '24px' }}>
+                  <Truck color={COLORS.primary} size={32} /> Consolidation Gisors-Méru
+                </h3>
+                <span style={{ backgroundColor: '#334155', padding: '4px 12px', borderRadius: '20px', fontSize: '14px', display: 'flex', alignItems: 'center' }}>MODULE 1/3</span>
+              </div>
+              
+              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '30px' }}>
+                <p style={{ color: COLORS.textMuted, fontSize: '18px', textAlign: 'center', maxWidth: '80%' }}>
+                  Gisors commande des tuiles à Beauvais. Méru commande du ciment à Beauvais.<br/>
+                  Que fait-on ?
+                </p>
+              </div>
+
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px' }}>
+                <button ref={btnBadRef} style={STYLES.button('danger', simStep === 0 && flashcard?.type === 'bad')} disabled={simStep !== 0}>
+                  <div>
+                    <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '5px' }}>MODE CLASSIQUE</div>
+                    <div style={{ fontSize: '14px', opacity: 0.7 }}>2 commandes séparées</div>
+                  </div>
+                  <AlertTriangle size={24} />
+                </button>
+                <button ref={btnGoodRef} style={STYLES.button('success', simStep === 1 && flashcard?.type === 'good')} disabled={simStep !== 1}>
+                  <div>
+                      <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '5px' }}>MODE XCEL (HUB)</div>
+                      <div style={{ fontSize: '14px', opacity: 0.7 }}>Check J-1 & Groupage</div>
+                  </div>
+                  <CheckCircle size={24} />
+                </button>
+              </div>
+            </div>
+          )}
+
+          {activeModule === 2 && (
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '30px' }}>
+                <h3 style={{ display: 'flex', alignItems: 'center', gap: '15px', margin: 0, fontSize: '24px' }}>
+                  <Clock color={COLORS.warning} size={32} /> Protocole 15:30
+                </h3>
+                <span style={{ backgroundColor: '#334155', padding: '4px 12px', borderRadius: '20px', fontSize: '14px', display: 'flex', alignItems: 'center' }}>MODULE 2/3</span>
+              </div>
+
+              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '30px', flexDirection: 'column' }}>
+                <div style={{ fontSize: '48px', fontWeight: 'bold', color: COLORS.warning, marginBottom: '20px', fontFamily: 'monospace' }}>15:30</div>
+                <p style={{ color: COLORS.textMuted, fontSize: '18px', textAlign: 'center', maxWidth: '80%' }}>
+                  Pas de nouvelles de Médiafret pour la livraison de demain.
+                </p>
+              </div>
+
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px' }}>
+                <button ref={btnBadRef} style={STYLES.button('danger', simStep === 0 && flashcard?.type === 'bad')} disabled={simStep !== 0}>
+                  <div>
+                    <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '5px' }}>ATTENDRE</div>
+                    <div style={{ fontSize: '14px', opacity: 0.7 }}>Espérer qu'il arrive...</div>
+                  </div>
+                  <AlertTriangle size={24} />
+                </button>
+                <button ref={btnGoodRef} style={STYLES.button('success', simStep === 1 && flashcard?.type === 'good')} disabled={simStep !== 1}>
+                  <div>
+                      <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '5px' }}>ACTIVER PLAN B</div>
+                      <div style={{ fontSize: '14px', opacity: 0.7 }}>Taxi-Colis & Alerte</div>
+                  </div>
+                  <CheckCircle size={24} />
+                </button>
+              </div>
+            </div>
+          )}
+
+          {activeModule === 3 && (
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '30px' }}>
+                <h3 style={{ display: 'flex', alignItems: 'center', gap: '15px', margin: 0, fontSize: '24px' }}>
+                  <Smartphone color={COLORS.success} size={32} /> Interface Client
+                </h3>
+                <span style={{ backgroundColor: '#334155', padding: '4px 12px', borderRadius: '20px', fontSize: '14px', display: 'flex', alignItems: 'center' }}>MODULE 3/3</span>
+              </div>
+
+              <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '30px' }}>
+                <p style={{ color: COLORS.textMuted, fontSize: '18px', textAlign: 'center', maxWidth: '80%' }}>
+                  Le client s'inquiète pour sa livraison de demain.<br/>Comment communiquer ?
+                </p>
+              </div>
+
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px' }}>
+                <button ref={btnBadRef} style={STYLES.button('danger', simStep === 0 && flashcard?.type === 'bad')} disabled={simStep !== 0}>
+                   <div>
+                    <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '5px' }}>SMS STANDARD</div>
+                    <div style={{ fontSize: '14px', opacity: 0.7 }}>Texte froid, 17h00</div>
+                  </div>
+                  <MessageCircle size={24} />
+                </button>
+                <button ref={btnGoodRef} style={STYLES.button('success', simStep === 1 && flashcard?.type === 'good')} disabled={simStep !== 1}>
+                   <div>
+                     <div style={{ fontWeight: 'bold', fontSize: '16px', marginBottom: '5px' }}>WHATSAPP VIP</div>
+                     <div style={{ fontSize: '14px', opacity: 0.7 }}>Photo + Humain</div>
+                  </div>
+                  <Smartphone size={24} />
+                </button>
+              </div>
+
+              <PhoneMockup show={phoneType !== null} type={phoneType || 'whatsapp'} />
+            </div>
+          )}
+
+          {activeModule === 4 && (
+            <div style={{ textAlign: 'center', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+              <h2 style={{ fontSize: '36px', marginBottom: '40px', color: COLORS.success }}>DÉMONSTRATION TERMINÉE</h2>
+              <div style={{ display: 'flex', justifyContent: 'center', gap: '60px', marginBottom: '60px' }}>
+                <div style={{ padding: 30, backgroundColor: 'rgba(239, 68, 68, 0.1)', borderRadius: 16, border: `1px solid ${COLORS.danger}` }}>
+                  <div style={{ fontSize: '48px', fontWeight: 'bold', color: COLORS.danger, marginBottom: 10 }}>
+                    {metrics.waste.toLocaleString()} €
+                  </div>
+                  <div style={{ color: COLORS.textMuted, fontSize: '16px' }}>Pertes Identifiées</div>
+                </div>
+                <div style={{ padding: 30, backgroundColor: 'rgba(16, 185, 129, 0.1)', borderRadius: 16, border: `1px solid ${COLORS.success}` }}>
+                  <div style={{ fontSize: '48px', fontWeight: 'bold', color: COLORS.success, marginBottom: 10 }}>
+                    {metrics.savings.toLocaleString()} €
+                  </div>
+                  <div style={{ color: COLORS.textMuted, fontSize: '16px' }}>Gains Stratégiques</div>
+                </div>
+              </div>
+              <button 
+                onClick={() => { setMetrics({ waste: 0, savings: 0 }); setActiveModule(1); setSimStep(0); }}
+                style={{ ...STYLES.button('ghost'), margin: '0 auto', width: 'auto', fontSize: '16px' }}
+              >
+                REJOUER LA SÉQUENCE
+              </button>
+            </div>
+          )}
+
+          {/* Overlay Flashcard */}
+          {flashcard && <FlashCard title={flashcard.title} message={flashcard.msg} type={flashcard.type} />}
+        </div>
+      </div>
+
+      {/* CURSOR LAYER */}
+      <VirtualCursor x={cursor.x} y={cursor.y} clicking={cursor.clicking} />
+      
+      {/* FOOTER LABEL */}
+      <div style={{ 
+        position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', 
+        color: COLORS.textMuted, fontSize: '12px', opacity: 0.5 
+      }}>
+        Démonstration Automatique — Algorithme v3.55
+      </div>
+    </div>
+  );
+}
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<GedimatSimulator />);
--- a/metadata.json
+++ b/metadata.json
@ -0,0 +1,5 @@
+{
+  "description": "Generated by Gemini.",
+  "requestFramePermissions": [],
+  "name": "App"
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,22 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "lucide-react": "0.263.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});