Upload 9 files

App.jsx

@@ -0,0 +1,1134 @@
+import { useState, useRef, useCallback } from "react";
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+  BarChart, Bar, ResponsiveContainer, AreaChart, Area
+} from "recharts";
+
+/* ══════════ DONNÉES KPI ══════════ */
+// Latence par endpoint (3 calls : search, competences, match)
+const kpiLatency = [
+  { t:"Lun", search:1.2, competences:1.8, match:2.9 },
+  { t:"Mar", search:1.4, competences:2.1, match:3.2 },
+  { t:"Mer", search:1.1, competences:1.6, match:2.6 },
+  { t:"Jeu", search:1.8, competences:2.4, match:3.7 },
+  { t:"Ven", search:1.3, competences:1.9, match:2.8 },
+  { t:"Sam", search:1.0, competences:1.5, match:2.3 },
+  { t:"Dim", search:0.9, competences:1.3, match:2.0 },
+];
+// Requêtes/jour par endpoint
+const kpiEndpoints = [
+  { t:"Lun", search:85, extract:42, competences:38, match:31 },
+  { t:"Mar", search:91, extract:48, competences:44, match:37 },
+  { t:"Mer", search:78, extract:38, competences:35, match:28 },
+  { t:"Jeu", search:105, extract:61, competences:57, match:49 },
+  { t:"Ven", search:96, extract:54, competences:50, match:42 },
+  { t:"Sam", search:45, extract:22, competences:19, match:14 },
+  { t:"Dim", search:38, extract:18, competences:15, match:10 },
+];
+// Tokens par type d'appel LLM (3 call types, coûts réels)
+const kpiLLM = [
+  { t:"00h", search:320, comp:0,    match:0,    cost:0.001 },
+  { t:"04h", search:110, comp:0,    match:0,    cost:0.000 },
+  { t:"08h", search:980, comp:760,  match:1240, cost:0.009 },
+  { t:"12h", search:1640,comp:1280, match:2080, cost:0.019 },
+  { t:"16h", search:1820,comp:1420, match:2310, cost:0.022 },
+  { t:"20h", search:1240,comp:970,  match:1580, cost:0.015 },
+  { t:"23h", search:480, comp:360,  match:580,  cost:0.006 },
+];
+// Usage hebdo par persona + adoption match
+const kpiUsage = [
+  { t:"S1", sophie:42, karim:18, match:18 },
+  { t:"S2", sophie:55, karim:27, match:29 },
+  { t:"S3", sophie:61, karim:35, match:38 },
+  { t:"S4", sophie:78, karim:44, match:51 },
+  { t:"S5", sophie:90, karim:52, match:64 },
+  { t:"S6", sophie:105,karim:63, match:79 },
+];
+// Taux d'adoption match (% users who use match after competences)
+const kpiMatchAdoption = [
+  { t:"S1", taux:30, retention:45 },
+  { t:"S2", taux:38, retention:52 },
+  { t:"S3", taux:47, retention:61 },
+  { t:"S4", taux:56, retention:69 },
+  { t:"S5", taux:64, retention:75 },
+  { t:"S6", taux:71, retention:82 },
+];
+// Scores match distribution hebdo
+const kpiMatchScores = [
+  { t:"S1", excellent:18, bon:31, partiel:35, faible:16, score_moy:62 },
+  { t:"S2", excellent:22, bon:35, partiel:31, faible:12, score_moy:66 },
+  { t:"S3", excellent:28, bon:38, partiel:26, faible:8,  score_moy:71 },
+  { t:"S4", excellent:33, bon:40, partiel:22, faible:5,  score_moy:75 },
+  { t:"S5", excellent:38, bon:42, partiel:16, faible:4,  score_moy:79 },
+  { t:"S6", excellent:44, bon:41, partiel:12, faible:3,  score_moy:83 },
+];
+// Métriques métier : précision, satisfaction, match_rate
+const kpiMetier = [
+  { t:"S1", precision:71, satisfaction:68, export:55, match_score:62 },
+  { t:"S2", precision:74, satisfaction:72, export:61, match_score:66 },
+  { t:"S3", precision:79, satisfaction:75, export:67, match_score:71 },
+  { t:"S4", precision:83, satisfaction:80, export:74, match_score:75 },
+  { t:"S5", precision:87, satisfaction:84, export:79, match_score:79 },
+  { t:"S6", precision:91, satisfaction:89, export:85, match_score:83 },
+];
+// Compétences détectées / validées / matchées
+const kpiCompetences = [
+  { t:"S1", detected:3.1, validated:2.4, matched:1.8 },
+  { t:"S2", detected:3.4, validated:2.8, matched:2.2 },
+  { t:"S3", detected:4.0, validated:3.3, matched:2.7 },
+  { t:"S4", detected:4.2, validated:3.6, matched:3.1 },
+  { t:"S5", detected:4.6, validated:4.0, matched:3.5 },
+  { t:"S6", detected:5.0, validated:4.4, matched:3.9 },
+];
+
+/* ══════════ PERSONAS ══════════ */
+const PERSONAS = {
+  sophie: {
+    id: "sophie", name: "Sophie", age: 38, icon: "👩‍💼",
+    role: "Conseillère France Travail — Caen",
+    color: "#059669", colorSoft: "#ECFDF5", colorMid: "#A7F3D0",
+    defaultMode: "keywords",
+    tagline: "Code ROME en 30 sec → PPAE sans ressaisie",
+    context: "Open-space bruyant. Écran 19\". PPAE + Emploi Store ouverts. 23 mails non lus. Demandeur en face. 35 min max par entretien.",
+    goal: "Identifier en 2 clics les codes ROME + NAF correspondant au profil oral du demandeur, pour orienter et remplir le PPAE sans friction.",
+    skills: ["Écoute active","Reformulation métier","Connaissance ROME","Orientation emploi","Saisie PPAE","Gestion du temps"],
+    pains: ["847 résultats non triés → signal noyé dans le bruit","Codes NAF hybrides (ex: BTP + logistique)","Temps de saisie > temps d'échange humain"],
+    success: "Elle tourne l'écran vers le demandeur, clique Copier, colle dans le PPAE. Zéro ressaisie.",
+    rgaa: ["Contraste AA minimum","Navigation clavier","Lecteur d'écran"],
+    quickActions: ["Copier ROME","Copier NAF","Envoyer PPAE"],
+    placeholder: "ex: agent logistique polyvalent, infirmière coordinatrice…",
+    tip: "💡 Dites simplement le métier décrit par le demandeur — le micro est activable",
+  },
+  karim: {
+    id: "karim", name: "Karim", age: 44, icon: "🎯",
+    role: "Chasseur de Tête indépendant — Paris/TGV",
+    color: "#2563EB", colorSoft: "#EFF6FF", colorMid: "#BFDBFE",
+    defaultMode: "annonce",
+    tagline: "Annonce brute → ROME + NAF + Compétences en 12 sec",
+    context: "MacBook en mobilité. ATS Bullhorn ouvert. Annonce client reçue à 18h avec fautes et acronymes. Brief client à 9h le lendemain.",
+    goal: "Extraire en 10 secondes les codes ROME + NAF d'une annonce brute pour lancer immédiatement le sourcing LinkedIn Recruiter.",
+    skills: ["Lecture annonce","Sourcing LinkedIn","Qualification profil","Connaissance secteurs","Négociation","Gestion mandats"],
+    pains: ["Annonce non normalisée → perte de temps de qualification","Secteur mentionné sans code NAF (ex: 'industrie métallurgique')","Plusieurs ROME possibles → hésitation sur le sourcing"],
+    success: "Il copie le code ROME, ouvre LinkedIn Recruiter, colle dans le filtre, lance la recherche. 12 secondes chrono.",
+    rgaa: ["Copier en 1 clic","Résultat lisible mobile","Export rapide"],
+    quickActions: ["Copier ROME","Copier NAF","Ouvrir LinkedIn","Exporter fiche"],
+    placeholder: "Collez l'annonce brute complète — même avec fautes et acronymes internes…",
+    tip: "💡 Collez l'annonce telle quelle, l'IA normalise et extrait ROME, NAF et compétences",
+  },
+};
+
+/* ══════════ SECTEURS ══════════ */
+const SECTORS = [
+  {id:"all",label:"Tous secteurs",icon:"🌐"},
+  {id:"IT",label:"IT & Digital",icon:"💻"},
+  {id:"Santé",label:"Santé & Social",icon:"🏥"},
+  {id:"BTP",label:"BTP & Industrie",icon:"🏗"},
+  {id:"Commerce",label:"Commerce & Vente",icon:"🛒"},
+  {id:"RH",label:"RH & Formation",icon:"👥"},
+  {id:"Finance",label:"Finance & Gestion",icon:"📊"},
+  {id:"Transport",label:"Transport & Logistique",icon:"🚛"},
+];
+
+const LEVELS = [
+  {id:"all",label:"Tous niveaux"},{id:"CAP",label:"CAP/BEP"},
+  {id:"BAC",label:"Bac"},{id:"BAC+2",label:"Bac+2"},
+  {id:"BAC+3",label:"Bac+3/4"},{id:"BAC+5",label:"Bac+5+"},
+];
+
+/* ══════════ ATOMS ══════════ */
+const Spinner = () => (
+  <div style={{width:16,height:16,border:"2px solid #E2E8F0",borderTop:"2px solid #2563EB",borderRadius:"50%",animation:"spin .7s linear infinite",flexShrink:0}}/>
+);
+const Skel = ({w="100%",h=14,r=6,mb=0}) => (
+  <div style={{width:w,height:h,borderRadius:r,marginBottom:mb,background:"linear-gradient(90deg,#F1F5F9 25%,#E2E8F0 50%,#F1F5F9 75%)",backgroundSize:"200% 100%",animation:"shimmer 1.4s infinite"}}/>
+);
+
+const BdgType = ({type}) => {
+  const m = {
+    exact:{bg:"#DCFCE7",c:"#15803D",br:"#86EFAC",l:"Exact"},
+    proche:{bg:"#DBEAFE",c:"#1D4ED8",br:"#93C5FD",l:"Proche"},
+    "associé":{bg:"#FEF3C7",c:"#B45309",br:"#FCD34D",l:"Associé"},
+    naf:{bg:"#EDE9FE",c:"#6D28D9",br:"#C4B5FD",l:"NAF"},
+    clé:{bg:"#DCFCE7",c:"#166534",br:"#86EFAC",l:"Clé métier"},
+    transverse:{bg:"#F3E8FF",c:"#7E22CE",br:"#D8B4FE",l:"Transverse"},
+  }[type]||{bg:"#F1F5F9",c:"#475569",br:"#CBD5E1",l:type};
+  return <span style={{display:"inline-flex",alignItems:"center",padding:"2px 8px",borderRadius:20,fontSize:10,fontWeight:800,letterSpacing:"0.07em",textTransform:"uppercase",background:m.bg,color:m.c,border:`1px solid ${m.br}`}}>{m.l}</span>;
+};
+
+function CopyBtn({text,label="Copier",onCopy,accent="#2563EB"}){
+  const[ok,setOk]=useState(false);
+  return <button onClick={()=>{navigator.clipboard.writeText(text);setOk(true);onCopy?.();setTimeout(()=>setOk(false),1800);}} style={{display:"inline-flex",alignItems:"center",gap:4,padding:"5px 12px",borderRadius:6,fontSize:11,fontWeight:600,border:`1px solid ${ok?"#A7F3D0":"#E2E8F0"}`,background:ok?"#ECFDF5":"#F8FAFC",color:ok?"#059669":"#6B7280",cursor:"pointer",transition:"all .2s",whiteSpace:"nowrap",flexShrink:0}}>
+    {ok?"✓":"⎘"} {ok?"Copié":label}
+  </button>;
+}
+
+function exportCSV(rows, filename="export") {
+  const csv = rows.map(r=>r.map(v=>`"${String(v).replace(/"/g,'""')}"`).join(";")).join("\n");
+  const a = document.createElement("a");
+  a.href = "data:text/csv;charset=utf-8,\uFEFF"+encodeURIComponent(csv);
+  a.download = `${filename}_${Date.now()}.csv`;
+  a.click();
+}
+
+/* ══════════ DOSSIER LIGHT ATOMS ══════════ */
+const DTag = ({label,color}) => (
+  <span style={{background:color+"18",color,border:`1px solid ${color}44`,padding:"2px 10px",borderRadius:20,fontSize:11,fontWeight:600}}>{label}</span>
+);
+const DCard = ({children,style={}}) => (
+  <div style={{background:"#FFFFFF",border:"1px solid #E2E8F0",borderRadius:12,padding:20,boxShadow:"0 1px 3px rgba(0,0,0,.05)",...style}}>{children}</div>
+);
+const DSec = ({title,children}) => (
+  <div style={{marginBottom:24}}>
+    <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:12}}>
+      <div style={{width:3,height:20,background:"#2563EB",borderRadius:2}}/>
+      <h3 style={{margin:0,fontSize:11,fontFamily:"Syne,sans-serif",color:"#2563EB",letterSpacing:"0.1em",textTransform:"uppercase"}}>{title}</h3>
+    </div>
+    {children}
+  </div>
+);
+const DStep = ({n,label,detail,tags}) => (
+  <div style={{display:"flex",gap:12,marginBottom:14}}>
+    <div style={{minWidth:26,height:26,borderRadius:"50%",background:"#2563EB",color:"#FFF",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:12,fontFamily:"Syne,sans-serif",flexShrink:0}}>{n}</div>
+    <div>
+      <div style={{color:"#0F172A",fontWeight:600,fontSize:13}}>{label}</div>
+      {detail&&<div style={{color:"#6B7280",fontSize:11,marginTop:3,lineHeight:1.6}}>{detail}</div>}
+      {tags&&<div style={{marginTop:6,display:"flex",flexWrap:"wrap",gap:5}}>{tags.map((t,i)=><DTag key={i} label={t.l} color={t.c}/>)}</div>}
+    </div>
+  </div>
+);
+const KPIBox = ({label,value,unit,delta,color}) => (
+  <div style={{background:color+"12",border:`1px solid ${color}33`,borderRadius:10,padding:"14px 18px",flex:1,minWidth:120,boxShadow:"0 1px 2px rgba(0,0,0,.04)"}}>
+    <div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.08em"}}>{label}</div>
+    <div style={{color,fontSize:24,fontWeight:800,fontFamily:"Syne,sans-serif",marginTop:4}}>{value}<span style={{fontSize:12,marginLeft:4}}>{unit}</span></div>
+    {delta!=null&&<div style={{color:delta>0?"#059669":"#E11D48",fontSize:11,marginTop:2}}>{delta>0?"▲":"▼"} {Math.abs(delta)}% vs S-1</div>}
+  </div>
+);
+const TT = {contentStyle:{background:"#FFFFFF",border:"1px solid #E2E8F0",color:"#0F172A",fontSize:11,borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,.1)"}};
+
+/* ══════════ MATCH ANNONCES PAR COMPÉTENCES ══════════ */
+function MatchAnnonces({competences, codes, persona}) {
+  const pc = PERSONAS[persona];
+  const[annonce,setAnnonce]=useState("");
+  const[loading,setLoading]=useState(false);
+  const[result,setResult]=useState(null);
+  const[error,setError]=useState("");
+  const[open,setOpen]=useState(false);
+  const fileRef=useRef();
+
+  const allCompetences = competences
+    ? Object.values(competences).flat()
+    : [];
+
+  const match = useCallback(async() => {
+    if(!annonce.trim()||!allCompetences.length) return;
+    setLoading(true); setResult(null); setError("");
+    try {
+      const res = await fetch("/api/claude", {
+        method:"POST", headers:{"Content-Type":"application/json"},
+        body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1200,
+          messages:[{role:"user",content:
+`Expert RH et référentiel ROME. 
+Compétences du profil : ${allCompetences.join(", ")}
+Codes ROME du profil : ${codes.join(", ")}
+
+Annonce d'emploi :
+${annonce.slice(0,3000)}
+
+Analyse le niveau de correspondance. Retourne UNIQUEMENT JSON valide sans markdown :
+{"score":85,"niveau":"Excellent|Bon|Partiel|Faible","titre_poste":"...","competences_matchees":["..."],"competences_manquantes":["..."],"competences_bonus":["compétences dans l'annonce non requises mais utiles"],"rome_annonce":"XXXXX","recommandation":"2-3 phrases d'analyse pour le recruteur/conseiller","points_forts":["2-3 atouts du profil pour ce poste"],"points_vigilance":["1-2 points à vérifier en entretien"]}`
+          }]})
+      });
+      const data = await res.json();
+      const raw = data.content?.[0]?.text||"";
+      setResult(JSON.parse(raw.replace(/```json|```/g,"").trim()));
+    } catch{ setError("Erreur d'analyse. Réessayez."); }
+    finally{ setLoading(false); }
+  },[annonce, allCompetences, codes]);
+
+  const scoreColor = (s) => s>=80?"#059669":s>=60?"#D97706":s>=40?"#EA580C":"#E11D48";
+  const scoreLabel = (s) => s>=80?"Excellent":s>=60?"Bon":s>=40?"Partiel":"Faible";
+  const scoreBg = (s) => s>=80?"#ECFDF5":s>=60?"#FFFBEB":s>=40?"#FFF7ED":"#FFF1F2";
+
+  if(!allCompetences.length) return null;
+
+  return (
+    <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginTop:12}}>
+      <button onClick={()=>setOpen(o=>!o)} style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 20px",background:"none",border:"none",cursor:"pointer",textAlign:"left",transition:"background .15s"}} onMouseEnter={e=>e.currentTarget.style.background="#F8FAFC"} onMouseLeave={e=>e.currentTarget.style.background="none"}>
+        <div style={{display:"flex",alignItems:"center",gap:10}}>
+          <div style={{width:32,height:32,borderRadius:9,background:"linear-gradient(135deg,#7C3AED20,#2563EB20)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,border:"1.5px solid #C7D2FE"}}>🎯</div>
+          <div>
+            <div style={{fontSize:14,fontWeight:700,color:"#0F172A"}}>Matcher une annonce</div>
+            <div style={{fontSize:11,color:"#9CA3AF"}}>Score de correspondance profil ↔ offre d'emploi · {allCompetences.length} compétences disponibles</div>
+          </div>
+        </div>
+        <span style={{fontSize:16,color:"#9CA3AF",transition:"transform .2s",transform:open?"rotate(180deg)":"none"}}>⌄</span>
+      </button>
+
+      {open&&(
+        <div style={{padding:"0 20px 20px",animation:"fadeIn .3s ease"}}>
+          <div style={{height:1,background:"#E2E8F0",marginBottom:16}}/>
+
+          {/* Compétences disponibles */}
+          <div style={{background:"#F8FAFC",borderRadius:10,padding:"12px 14px",marginBottom:14,border:"1px solid #E2E8F0"}}>
+            <div style={{fontSize:10.5,fontWeight:700,color:"#9CA3AF",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:8}}>Profil — {allCompetences.length} compétences à matcher</div>
+            <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
+              {allCompetences.slice(0,20).map((c,i)=>(
+                <span key={i} style={{padding:"3px 10px",borderRadius:20,fontSize:11,fontWeight:500,background:pc.colorSoft,color:pc.color,border:`1px solid ${pc.colorMid}`}}>{c}</span>
+              ))}
+              {allCompetences.length>20&&<span style={{padding:"3px 10px",borderRadius:20,fontSize:11,color:"#9CA3AF"}}>+{allCompetences.length-20} autres</span>}
+            </div>
+          </div>
+
+          {/* Input annonce */}
+          <div style={{marginBottom:12}}>
+            <textarea value={annonce} onChange={e=>setAnnonce(e.target.value)} rows={5}
+              placeholder="Collez ici l'offre d'emploi à évaluer pour ce profil…"
+              style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"12px 14px",fontSize:13,color:"#0F172A",outline:"none",resize:"vertical",lineHeight:1.7,transition:"all .2s"}}
+              onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}}
+              onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/>
+          </div>
+          <div style={{display:"flex",gap:9,marginBottom:16}}>
+            <button onClick={()=>fileRef.current?.click()} style={{display:"flex",alignItems:"center",gap:5,padding:"8px 14px",borderRadius:8,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:12,fontWeight:600,cursor:"pointer"}}>📎 Fichier</button>
+            <input ref={fileRef} type="file" accept=".txt,.doc,.docx,.pdf" style={{display:"none"}} onChange={e=>{const f=e.target.files?.[0];if(!f)return;const r=new FileReader();r.onload=ev=>setAnnonce(ev.target.result);r.readAsText(f)}}/>
+            <button onClick={match} disabled={loading||!annonce.trim()}
+              style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,padding:"10px",borderRadius:9,background:loading||!annonce.trim()?"#F1F5F9":"linear-gradient(135deg,#7C3AED,#2563EB)",border:"none",color:loading||!annonce.trim()?"#9CA3AF":"#FFF",fontWeight:700,fontSize:13,cursor:loading||!annonce.trim()?"not-allowed":"pointer",boxShadow:!loading&&annonce.trim()?"0 2px 10px rgba(124,58,237,.3)":"none"}}>
+              {loading?<><Spinner/>Calcul du score…</>:<>⚡ Calculer le score de match</>}
+            </button>
+          </div>
+
+          {error&&<div style={{padding:"12px 16px",background:"#FFF1F2",border:"1px solid #FECDD3",borderRadius:9,color:"#9F1239",fontSize:12,marginBottom:12}}>⚠ {error}</div>}
+
+          {loading&&(
+            <div style={{display:"flex",flexDirection:"column",gap:10}}>
+              <div style={{background:"#F8FAFC",borderRadius:12,padding:20,border:"1px solid #E2E8F0"}}>
+                <Skel w="40%" h={40} r={8} mb={14}/><Skel w="70%" h={13} mb={8}/><Skel w="55%" h={13}/>
+              </div>
+            </div>
+          )}
+
+          {result&&(
+            <div style={{animation:"fadeIn .4s ease",display:"flex",flexDirection:"column",gap:12}}>
+
+              {/* Score hero */}
+              <div style={{background:scoreBg(result.score),border:`2px solid ${scoreColor(result.score)}33`,borderRadius:14,padding:"20px 22px",display:"flex",alignItems:"center",gap:20}}>
+                <div style={{flexShrink:0,textAlign:"center"}}>
+                  <div style={{fontSize:52,fontWeight:900,color:scoreColor(result.score),lineHeight:1,fontFamily:"Syne,sans-serif"}}>{result.score}</div>
+                  <div style={{fontSize:11,fontWeight:700,color:scoreColor(result.score),marginTop:2}}>/100</div>
+                </div>
+                <div style={{flex:1}}>
+                  <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8,flexWrap:"wrap"}}>
+                    <span style={{background:scoreColor(result.score),color:"#FFF",fontSize:12,fontWeight:800,padding:"4px 14px",borderRadius:20}}>{scoreLabel(result.score)}</span>
+                    {result.titre_poste&&<span style={{fontSize:13,fontWeight:700,color:"#0F172A"}}>{result.titre_poste}</span>}
+                    {result.rome_annonce&&<span style={{fontFamily:"monospace",fontSize:12,fontWeight:700,color:"#2563EB",background:"#EFF6FF",padding:"2px 9px",borderRadius:6,border:"1px solid #BFDBFE"}}>{result.rome_annonce}</span>}
+                  </div>
+                  {/* Score bar */}
+                  <div style={{height:8,background:"rgba(0,0,0,.08)",borderRadius:4,overflow:"hidden",marginBottom:8}}>
+                    <div style={{height:"100%",width:`${result.score}%`,background:`linear-gradient(90deg,${scoreColor(result.score)},${scoreColor(result.score)}CC)`,borderRadius:4,transition:"width 1.2s cubic-bezier(.4,0,.2,1)"}}/>
+                  </div>
+                  <p style={{fontSize:13,color:"#374151",lineHeight:1.65,margin:0}}>{result.recommandation}</p>
+                </div>
+              </div>
+
+              {/* 3 colonnes : matchées / manquantes / bonus */}
+              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10}}>
+                <div style={{background:"#ECFDF5",borderRadius:12,padding:"14px 16px",border:"1.5px solid #A7F3D0"}}>
+                  <div style={{fontSize:10.5,fontWeight:800,color:"#059669",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>✓ Matchées ({result.competences_matchees?.length||0})</div>
+                  <div style={{display:"flex",flexDirection:"column",gap:5}}>
+                    {(result.competences_matchees||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#065F46"}}><span style={{color:"#059669",flexShrink:0}}>●</span>{c}</div>)}
+                  </div>
+                </div>
+                <div style={{background:"#FFF7ED",borderRadius:12,padding:"14px 16px",border:"1.5px solid #FED7AA"}}>
+                  <div style={{fontSize:10.5,fontWeight:800,color:"#EA580C",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>⚠ Manquantes ({result.competences_manquantes?.length||0})</div>
+                  <div style={{display:"flex",flexDirection:"column",gap:5}}>
+                    {(result.competences_manquantes||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#9A3412"}}><span style={{color:"#EA580C",flexShrink:0}}>○</span>{c}</div>)}
+                  </div>
+                </div>
+                <div style={{background:"#EFF6FF",borderRadius:12,padding:"14px 16px",border:"1.5px solid #BFDBFE"}}>
+                  <div style={{fontSize:10.5,fontWeight:800,color:"#2563EB",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>+ Bonus ({result.competences_bonus?.length||0})</div>
+                  <div style={{display:"flex",flexDirection:"column",gap:5}}>
+                    {(result.competences_bonus||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#1E40AF"}}><span style={{color:"#2563EB",flexShrink:0}}>+</span>{c}</div>)}
+                  </div>
+                </div>
+              </div>
+
+              {/* Points forts / vigilance */}
+              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
+                <div style={{background:"#F8FAFC",borderRadius:12,padding:"14px 16px",border:"1px solid #E2E8F0"}}>
+                  <div style={{fontSize:10.5,fontWeight:800,color:"#374151",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>💪 Points forts</div>
+                  {(result.points_forts||[]).map((p,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:6,alignItems:"flex-start"}}><span style={{color:"#059669",flexShrink:0,marginTop:1}}>✓</span><span style={{fontSize:12,color:"#374151"}}>{p}</span></div>)}
+                </div>
+                <div style={{background:"#FFFBEB",borderRadius:12,padding:"14px 16px",border:"1px solid #FDE68A"}}>
+                  <div style={{fontSize:10.5,fontWeight:800,color:"#92400E",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>🔍 Points de vigilance</div>
+                  {(result.points_vigilance||[]).map((p,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:6,alignItems:"flex-start"}}><span style={{color:"#D97706",flexShrink:0,marginTop:1}}>!</span><span style={{fontSize:12,color:"#92400E"}}>{p}</span></div>)}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ══════════ COMPETENCES SECTION ══════════ */
+function CompetencesBlock({codes, persona}) {
+  const[loading,setLoading]=useState(false);
+  const[competences,setCompetences]=useState(null);
+  const[open,setOpen]=useState(false);
+  const pc = PERSONAS[persona];
+
+  const fetchCompetences = useCallback(async() => {
+    if(!codes?.length) return;
+    setLoading(true); setOpen(true);
+    try {
+      const res = await fetch("/api/claude", {
+        method:"POST",
+        headers:{"Content-Type":"application/json"},
+        body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:800,messages:[{role:"user",content:
+          `Expert ROME France Travail. Pour les codes ROME suivants : ${codes.join(", ")}\nRetourne UNIQUEMENT JSON valide sans markdown :\n{"cles_metier":["..."],"transverses":["..."],"numeriques":["..."],"savoir_etre":["..."],"certifications":["..."]}\ncles_metier: 5-7 compétences techniques cœur de métier. transverses: 3-4 compétences transversales. numeriques: 2-3 outils/logiciels. savoir_etre: 3-4 compétences comportementales. certifications: 2-3 certifications ou habilitations utiles.`
+        }]})
+      });
+      const data = await res.json();
+      const raw = data.content?.[0]?.text||"";
+      setCompetences(JSON.parse(raw.replace(/```json|```/g,"").trim()));
+    } catch{ setCompetences(null); }
+    finally{ setLoading(false); }
+  },[codes]);
+
+  const categories = competences ? [
+    {key:"cles_metier",label:"Cœur de métier",color:pc.color,bg:pc.colorSoft,type:"clé"},
+    {key:"transverses",label:"Transversales",color:"#7C3AED",bg:"#F5F3FF",type:"transverse"},
+    {key:"numeriques",label:"Outils & digital",color:"#0891B2",bg:"#ECFEFF",type:"proche"},
+    {key:"savoir_etre",label:"Savoir-être",color:"#D97706",bg:"#FFFBEB",type:"associé"},
+    {key:"certifications",label:"Certifications",color:"#6B7280",bg:"#F1F5F9",type:"exact"},
+  ] : [];
+
+  return (
+    <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,.05)"}}>
+      <button onClick={()=>open?setOpen(false):fetchCompetences()} style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 20px",background:"none",border:"none",cursor:"pointer",textAlign:"left",transition:"background .15s"}} onMouseEnter={e=>e.currentTarget.style.background="#F8FAFC"} onMouseLeave={e=>e.currentTarget.style.background="none"}>
+        <div style={{display:"flex",alignItems:"center",gap:10}}>
+          <div style={{width:32,height:32,borderRadius:9,background:pc.colorSoft,display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,border:`1.5px solid ${pc.colorMid}`}}>🧩</div>
+          <div>
+            <div style={{fontSize:14,fontWeight:700,color:"#0F172A"}}>Compétences associées</div>
+            <div style={{fontSize:11,color:"#9CA3AF"}}>Référentiel ROME · cœur métier, transversales, certifications</div>
+          </div>
+        </div>
+        <div style={{display:"flex",alignItems:"center",gap:8}}>
+          {loading&&<Spinner/>}
+          <span style={{fontSize:16,color:"#9CA3AF",transition:"transform .2s",transform:open?"rotate(180deg)":"none"}}>⌄</span>
+        </div>
+      </button>
+      {open&&!loading&&competences&&(
+        <div style={{padding:"0 20px 20px",animation:"fadeIn .3s ease"}}>
+          <div style={{height:1,background:"#E2E8F0",marginBottom:16}}/>
+          <div style={{display:"flex",flexDirection:"column",gap:14}}>
+            {categories.map(cat=>(competences[cat.key]||[]).length>0&&(
+              <div key={cat.key}>
+                <div style={{fontSize:11,fontWeight:800,letterSpacing:"0.07em",textTransform:"uppercase",color:cat.color,marginBottom:8}}>{cat.label}</div>
+                <div style={{display:"flex",flexWrap:"wrap",gap:7}}>
+                  {(competences[cat.key]||[]).map((c,i)=>(
+                    <div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:20,background:cat.bg,border:`1.5px solid ${cat.color}33`,cursor:"pointer",transition:"all .15s"}} title="Cliquer pour copier" onClick={()=>navigator.clipboard.writeText(c)}>
+                      <span style={{fontSize:12,fontWeight:600,color:cat.color}}>{c}</span>
+                      <span style={{fontSize:10,color:cat.color,opacity:.6}}>⎘</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div style={{marginTop:14,display:"flex",gap:8}}>
+            <CopyBtn text={Object.values(competences).flat().join(", ")} label="Tout copier"/>
+            <button onClick={()=>exportCSV([["Catégorie","Compétence"],...Object.entries(competences).flatMap(([k,vs])=>vs.map(v=>[k,v]))],"competences")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 12px",borderRadius:6,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:11,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button>
+          </div>
+          {/* Match annonce sur base compétences */}
+          <MatchAnnonces competences={competences} codes={codes} persona={persona}/>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ══════════ TOOL MODULE ══════════ */
+function ToolModule({persona}) {
+  const pc = PERSONAS[persona];
+  const[mode,setMode]=useState(pc.defaultMode);
+  const[input,setInput]=useState("");
+  const[annonceText,setAnnonceText]=useState("");
+  const[sector,setSector]=useState("all");
+  const[level,setLevel]=useState("all");
+  const[typeFilter,setTypeFilter]=useState("all");
+  const[sortBy,setSortBy]=useState("pertinence");
+  const[loading,setLoading]=useState(false);
+  const[results,setResults]=useState(null);
+  const[compared,setCompared]=useState([]);
+  const[listening,setListening]=useState(false);
+  const[error,setError]=useState("");
+  const fileRef=useRef();
+
+  const hasContent = mode==="keywords" ? input.trim().length>1 : annonceText.trim().length>20;
+  const getQ = () => mode==="keywords" ? input.trim() : annonceText.trim();
+
+  const analyze = useCallback(async() => {
+    if(!hasContent) return;
+    setLoading(true); setResults(null); setError("");
+    const sh = sector!=="all"?`Secteur prioritaire : ${sector}. `:"";
+    const lh = level!=="all"?`Niveau de qualification cible : ${level}. `:"";
+    const prompt = mode==="keywords"
+      ? `Expert ROME France Travail. ${sh}${lh}Persona : ${pc.name} (${pc.role}).\nMots-clés : "${getQ()}"\nRetourne UNIQUEMENT JSON valide sans markdown :\n[{"code":"XXXXX","intitule":"titre officiel exact","type":"exact|proche|associé","description":"1-2 phrases","domaine":"secteur","grandDomaine":"lettre + libellé","niveauAcces":"ex: Bac+2"}]\n5 à 7 codes ROME pertinents triés.`
+      : `Expert RH ROME NAF. ${sh}Persona : ${pc.name} (${pc.role}).\nAnalyse cette offre. Retourne UNIQUEMENT JSON valide sans markdown :\n{"rome_principal":{"code":"XXXXX","intitule":"...","description":"...","domaine":"..."},"rome_alternatifs":[{"code":"XXXXX","intitule":"...","type":"proche|associé","domaine":"..."}],"naf":{"code":"XX.XXX","intitule":"...","secteur":"..."},"synthese":"2-3 phrases","mots_cles":["5-7 mots-clés"],"niveau":"junior|confirmé|senior|expert","contrat":"CDI|CDD|Stage|Alternance|Freelance|Non précisé","teletravail":"Oui|Partiel|Non|Non précisé","localisation":"ville si précisée ou vide"}\n\nOffre :\n${getQ().slice(0,4000)}`;
+    try {
+      const res = await fetch("/api/claude", {
+        method:"POST", headers:{"Content-Type":"application/json"},
+        body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1400,messages:[{role:"user",content:prompt}]})
+      });
+      const data = await res.json();
+      const raw = data.content?.[0]?.text||"";
+      setResults(JSON.parse(raw.replace(/```json|```/g,"").trim()));
+    } catch{ setError("Erreur d'analyse. Vérifiez votre connexion."); }
+    finally{ setLoading(false); }
+  },[mode,input,annonceText,sector,level,persona]);
+
+  const startListen = () => {
+    const SR = window.SpeechRecognition||window.webkitSpeechRecognition;
+    if(!SR) return;
+    const r = new SR(); r.lang="fr-FR";
+    r.onresult=e=>setInput(e.results[0][0].transcript);
+    r.onend=()=>setListening(false);
+    r.start(); setListening(true);
+  };
+
+  const filtered = (() => {
+    if(!results||!Array.isArray(results)) return results;
+    let r=[...results];
+    if(typeFilter!=="all") r=r.filter(x=>x.type===typeFilter);
+    if(sortBy==="alpha") r=[...r].sort((a,b)=>a.intitule.localeCompare(b.intitule));
+    if(sortBy==="type") r=[...r].sort((a,b)=>["exact","proche","associé"].indexOf(a.type)-["exact","proche","associé"].indexOf(b.type));
+    return r;
+  })();
+
+  const codesForCompetences = results
+    ? Array.isArray(results) ? results.map(r=>r.code) : [results.rome_principal?.code,...(results.rome_alternatifs||[]).map(r=>r.code)].filter(Boolean)
+    : [];
+
+  const lvlC={junior:{bg:"#EDE9FE",c:"#6D28D9"},confirmé:{bg:"#DBEAFE",c:"#1D4ED8"},senior:{bg:"#FEF3C7",c:"#B45309"},expert:{bg:"#FEE2E2",c:"#B91C1C"}};
+  const ctrC={CDI:{bg:"#DCFCE7",c:"#15803D"},CDD:{bg:"#FEF3C7",c:"#B45309"},Stage:{bg:"#EDE9FE",c:"#6D28D9"},Alternance:{bg:"#DBEAFE",c:"#1D4ED8"},Freelance:{bg:"#FEE2E2",c:"#B91C1C"}};
+
+  return (
+    <div>
+      {/* Persona context banner */}
+      <div style={{background:pc.colorSoft,border:`1.5px solid ${pc.colorMid}`,borderRadius:12,padding:"12px 18px",marginBottom:20,display:"flex",alignItems:"center",gap:14}}>
+        <span style={{fontSize:26}}>{pc.icon}</span>
+        <div style={{flex:1}}>
+          <div style={{fontWeight:800,fontSize:14,color:pc.color}}>{pc.name} — {pc.role}</div>
+          <div style={{fontSize:12,color:"#6B7280",marginTop:2}}>{pc.tagline}</div>
+        </div>
+        <div style={{fontSize:11,color:pc.color,background:"#FFF",border:`1px solid ${pc.colorMid}`,borderRadius:8,padding:"5px 12px",fontWeight:700}}>{pc.tip}</div>
+      </div>
+
+      {/* Mode toggle */}
+      <div style={{display:"flex",gap:8,marginBottom:16}}>
+        {[{id:"keywords",icon:"⌖",label:"Mots-clés → ROME"},{id:"annonce",icon:"⊡",label:"Annonce → ROME + NAF + Compétences"}].map(m=>(
+          <button key={m.id} onClick={()=>{setMode(m.id);setResults(null);setError("")}}
+            style={{flex:1,padding:"10px 14px",borderRadius:10,border:`1.5px solid ${mode===m.id?pc.color:"#E2E8F0"}`,background:mode===m.id?pc.colorSoft:"#FFF",color:mode===m.id?pc.color:"#6B7280",fontWeight:mode===m.id?700:500,fontSize:13,cursor:"pointer",transition:"all .2s",display:"flex",alignItems:"center",justifyContent:"center",gap:7,boxShadow:mode===m.id?`0 2px 8px ${pc.color}25`:"0 1px 2px rgba(0,0,0,.05)"}}>
+            <span style={{fontSize:16}}>{m.icon}</span>{m.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Filtres secteur */}
+      <div style={{marginBottom:12,overflowX:"auto",paddingBottom:4}}>
+        <div style={{display:"flex",gap:7,width:"max-content"}}>
+          {SECTORS.map(s=>(
+            <button key={s.id} onClick={()=>setSector(s.id)} style={{display:"inline-flex",alignItems:"center",gap:5,padding:"5px 13px",borderRadius:20,fontSize:12,fontWeight:sector===s.id?700:400,border:`1.5px solid ${sector===s.id?pc.color:"#E2E8F0"}`,background:sector===s.id?pc.colorSoft:"#FFF",color:sector===s.id?pc.color:"#6B7280",cursor:"pointer",whiteSpace:"nowrap",transition:"all .15s"}}>
+              <span>{s.icon}</span>{s.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Filtres niveau */}
+      <div style={{display:"flex",gap:7,flexWrap:"wrap",alignItems:"center",marginBottom:20}}>
+        <span style={{fontSize:11,color:"#9CA3AF",fontWeight:700,textTransform:"uppercase",letterSpacing:"0.06em"}}>Niveau :</span>
+        {LEVELS.map(l=>(
+          <button key={l.id} onClick={()=>setLevel(l.id)} style={{padding:"4px 11px",borderRadius:16,fontSize:11.5,fontWeight:level===l.id?700:400,border:`1px solid ${level===l.id?"#0891B2":"#E2E8F0"}`,background:level===l.id?"#ECFEFF":"#FFF",color:level===l.id?"#0891B2":"#9CA3AF",cursor:"pointer",transition:"all .15s"}}>
+            {l.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Search box */}
+      <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:16,padding:20,boxShadow:"0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05)",marginBottom:16}}>
+        {mode==="keywords" ? (
+          <div style={{display:"flex",gap:10}}>
+            <div style={{flex:1,position:"relative"}}>
+              <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",fontSize:17,opacity:.4,pointerEvents:"none"}}>🔍</span>
+              <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==="Enter"&&analyze()}
+                placeholder={pc.placeholder}
+                style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"12px 48px 12px 42px",fontSize:14,color:"#0F172A",outline:"none",transition:"all .2s"}}
+                onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}}
+                onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/>
+              <button onClick={startListen} style={{position:"absolute",right:13,top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",fontSize:17,color:listening?"#E11D48":"#9CA3AF",animation:listening?"pulse 1s infinite":"none"}}>🎤</button>
+            </div>
+            <button onClick={analyze} disabled={loading||!hasContent}
+              style={{display:"flex",alignItems:"center",gap:8,padding:"0 22px",borderRadius:10,background:loading||!hasContent?"#F1F5F9":`linear-gradient(135deg,${pc.color},#0891B2)`,border:"none",color:loading||!hasContent?"#9CA3AF":"#FFF",fontWeight:700,fontSize:14,cursor:loading||!hasContent?"not-allowed":"pointer",transition:"all .2s",boxShadow:!loading&&hasContent?`0 2px 10px ${pc.color}35`:"none",whiteSpace:"nowrap"}}>
+              {loading?<><Spinner/>Analyse…</>:<>→ Analyser</>}
+            </button>
+          </div>
+        ) : (
+          <>
+            <textarea value={annonceText} onChange={e=>setAnnonceText(e.target.value)} rows={7}
+              placeholder={pc.placeholder}
+              style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"13px 16px",fontSize:13.5,color:"#0F172A",outline:"none",resize:"vertical",lineHeight:1.7,marginBottom:12,transition:"all .2s"}}
+              onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}}
+              onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/>
+            <div style={{display:"flex",gap:10}}>
+              <button onClick={()=>fileRef.current?.click()} style={{display:"flex",alignItems:"center",gap:6,padding:"9px 16px",borderRadius:8,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:13,fontWeight:600,cursor:"pointer"}}>📎 Importer</button>
+              <input ref={fileRef} type="file" accept=".txt,.doc,.docx,.pdf" style={{display:"none"}} onChange={e=>{const f=e.target.files?.[0];if(!f)return;const r=new FileReader();r.onload=ev=>setAnnonceText(ev.target.result);r.readAsText(f)}}/>
+              <button onClick={analyze} disabled={loading||!hasContent}
+                style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,padding:"11px",borderRadius:10,background:loading||!hasContent?"#F1F5F9":`linear-gradient(135deg,${pc.color},#0891B2)`,border:"none",color:loading||!hasContent?"#9CA3AF":"#FFF",fontWeight:700,fontSize:14,cursor:loading||!hasContent?"not-allowed":"pointer",boxShadow:!loading&&hasContent?`0 2px 10px ${pc.color}35`:"none"}}>
+                {loading?<><Spinner/>Extraction…</>:<>⟶ Extraire ROME + NAF + Compétences</>}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Comparateur */}
+      {compared.length>0&&(
+        <div style={{background:"#EEF2FF",border:"1.5px solid #C7D2FE",borderRadius:14,padding:"14px 18px",marginBottom:16}}>
+          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}>
+            <span style={{fontSize:12,fontWeight:800,color:"#4F46E5",letterSpacing:"0.06em",textTransform:"uppercase"}}>⚖ Comparateur — {compared.length} code{compared.length>1?"s":""}</span>
+            <CopyBtn text={compared.map(c=>c.code).join(", ")} label="Tout copier"/>
+          </div>
+          <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
+            {compared.map((item,i)=>(
+              <div key={i} style={{display:"flex",alignItems:"center",gap:7,padding:"7px 12px",background:"#FFF",borderRadius:9,border:"1px solid #C7D2FE",boxShadow:"0 1px 2px rgba(0,0,0,.04)"}}>
+                <span style={{fontFamily:"monospace",fontWeight:800,color:"#4F46E5",fontSize:13}}>{item.code}</span>
+                <span style={{fontSize:12,color:"#374151",maxWidth:130,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.intitule}</span>
+                <BdgType type={item.type}/>
+                <button onClick={()=>setCompared(p=>p.filter((_,idx)=>idx!==i))} style={{background:"none",border:"none",cursor:"pointer",fontSize:13,color:"#9CA3AF",padding:0}}>×</button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {error&&<div style={{padding:"13px 18px",background:"#FFF1F2",border:"1px solid #FECDD3",borderRadius:10,color:"#9F1239",fontSize:13,fontWeight:500,marginBottom:16}}><span>⚠ {error}</span></div>}
+
+      {/* Skeletons */}
+      {loading&&<div style={{display:"flex",flexDirection:"column",gap:10}}>
+        {[1,2,3].map(i=><div key={i} style={{background:"#FFF",borderRadius:14,padding:20,border:"1.5px solid #E2E8F0"}}>
+          <div style={{display:"flex",gap:8,marginBottom:10}}><Skel w="70px" h={11} r={20}/><Skel w="100px" h={11} r={20}/></div>
+          <Skel w="50%" h={20} mb={8}/><Skel w="85%" h={12} mb={5}/><Skel w="65%" h={12}/>
+        </div>)}
+      </div>}
+
+      {/* Résultats Keywords */}
+      {!loading&&results&&Array.isArray(results)&&(
+        <div style={{animation:"fadeIn .35s ease"}}>
+          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:10}}>
+            <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"}}>
+              <span style={{background:pc.color,color:"#FFF",fontWeight:800,fontSize:13,padding:"3px 12px",borderRadius:20}}>{filtered?.length||0}</span>
+              <span style={{fontSize:13,color:"#6B7280"}}>code{(filtered?.length||0)>1?"s":""} ROME identifié{(filtered?.length||0)>1?"s":""}</span>
+              {["exact","proche","associé"].map(t=>{const n=results.filter(r=>r.type===t).length;return n>0&&<span key={t} style={{fontSize:11,fontWeight:700,padding:"2px 9px",borderRadius:20,background:t==="exact"?"#DCFCE7":t==="proche"?"#DBEAFE":"#FEF3C7",color:t==="exact"?"#15803D":t==="proche"?"#1D4ED8":"#B45309"}}>{n} {t}</span>})}
+            </div>
+            <div style={{display:"flex",gap:7,flexWrap:"wrap"}}>
+              <select value={typeFilter} onChange={e=>setTypeFilter(e.target.value)} style={{padding:"5px 10px",borderRadius:7,border:"1px solid #E2E8F0",background:"#FFF",fontSize:12,color:"#374151",outline:"none",cursor:"pointer"}}>
+                <option value="all">Tous types</option>
+                <option value="exact">Exact</option>
+                <option value="proche">Proche</option>
+                <option value="associé">Associé</option>
+              </select>
+              <select value={sortBy} onChange={e=>setSortBy(e.target.value)} style={{padding:"5px 10px",borderRadius:7,border:"1px solid #E2E8F0",background:"#FFF",fontSize:12,color:"#374151",outline:"none",cursor:"pointer"}}>
+                <option value="pertinence">Pertinence</option>
+                <option value="alpha">Alphabétique</option>
+                <option value="type">Par type</option>
+              </select>
+              <button onClick={()=>exportCSV([["Code ROME","Intitulé","Type","Domaine","Niveau",...(results.map(r=>r.code))],[...results.map(r=>[r.code,r.intitule,r.type||"",r.domaine||"",r.niveauAcces||""])].flat()],"rome_export")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 11px",borderRadius:7,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:12,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button>
+              <CopyBtn text={results.map(r=>r.code).join(", ")} label="Tout copier"/>
+            </div>
+          </div>
+          <div style={{display:"flex",flexDirection:"column",gap:10,marginBottom:16}}>
+            {(filtered||[]).map((r,i)=>(
+              <div key={r.code+i} style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",transition:"all .2s",animation:`fadeUp .3s ease ${i*.06}s both"`,display:"flex",alignItems:"flex-start",gap:14}}
+                onMouseEnter={e=>{e.currentTarget.style.borderColor=pc.color;e.currentTarget.style.boxShadow=`0 4px 20px ${pc.color}15`}}
+                onMouseLeave={e=>{e.currentTarget.style.borderColor="#E2E8F0";e.currentTarget.style.boxShadow="0 1px 2px rgba(0,0,0,.05)"}}>
+                <div style={{flexShrink:0,width:34,height:34,borderRadius:9,background:pc.colorSoft,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:900,fontSize:12,color:pc.color,fontFamily:"monospace",border:`1.5px solid ${pc.colorMid}`}}>{i+1}</div>
+                <div style={{flex:1,minWidth:0}}>
+                  <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:7,flexWrap:"wrap"}}>
+                    <span style={{fontFamily:"monospace",fontSize:15.5,fontWeight:700,color:pc.color,letterSpacing:"0.04em"}}>{r.code}</span>
+                    <BdgType type={r.type}/>
+                    {r.domaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 8px",background:"#F8FAFC",borderRadius:6,border:"1px solid #E2E8F0"}}>{r.domaine}</span>}
+                    {r.niveauAcces&&<span style={{fontSize:11,color:"#4F46E5",padding:"2px 8px",background:"#EEF2FF",borderRadius:6,border:"1px solid #C7D2FE"}}>{r.niveauAcces}</span>}
+                    {r.grandDomaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 8px",background:"#F8FAFC",borderRadius:6,border:"1px solid #E2E8F0"}}>{r.grandDomaine}</span>}
+                  </div>
+                  <div style={{fontSize:15,fontWeight:700,color:"#0F172A",marginBottom:4,lineHeight:1.3}}>{r.intitule}</div>
+                  <div style={{fontSize:13,color:"#6B7280",lineHeight:1.65}}>{r.description}</div>
+                </div>
+                <div style={{display:"flex",flexDirection:"column",gap:5,flexShrink:0}}>
+                  <CopyBtn text={r.code}/>
+                  <button onClick={()=>compared.find(c=>c.code===r.code)?setCompared(p=>p.filter(c=>c.code!==r.code)):(compared.length<4&&setCompared(p=>[...p,r]))} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 11px",borderRadius:6,fontSize:11,fontWeight:600,border:`1px solid ${compared.find(c=>c.code===r.code)?"#C7D2FE":"#E2E8F0"}`,background:compared.find(c=>c.code===r.code)?"#EEF2FF":"#F8FAFC",color:compared.find(c=>c.code===r.code)?"#4F46E5":"#6B7280",cursor:"pointer",opacity:(!compared.find(c=>c.code===r.code)&&compared.length>=4)?.4:1}}>
+                    {compared.find(c=>c.code===r.code)?"✓ Ajouté":"⚖ Comparer"}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+          {/* Compétences pour mots-clés */}
+          <CompetencesBlock codes={codesForCompetences} persona={persona}/>
+        </div>
+      )}
+
+      {/* Résultats Annonce */}
+      {!loading&&results&&!Array.isArray(results)&&(
+        <div style={{animation:"fadeIn .4s ease"}}>
+          {/* Hero ROME */}
+          <div style={{background:"#FFF",borderRadius:16,padding:"22px 24px",border:`2px solid ${pc.color}`,boxShadow:`0 4px 20px ${pc.color}12`,marginBottom:12}}>
+            <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",flexWrap:"wrap",gap:12,marginBottom:14}}>
+              <div style={{display:"flex",gap:7,flexWrap:"wrap"}}>
+                <span style={{background:pc.color,color:"#FFF",fontSize:10,fontWeight:800,padding:"3px 9px",borderRadius:20,letterSpacing:"0.08em",textTransform:"uppercase"}}>ROME Principal</span>
+                {results.niveau&&lvlC[results.niveau]&&<span style={{...lvlC[results.niveau],fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,textTransform:"capitalize",background:lvlC[results.niveau].bg,color:lvlC[results.niveau].c}}>{results.niveau}</span>}
+                {results.contrat&&results.contrat!=="Non précisé"&&ctrC[results.contrat]&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:ctrC[results.contrat].bg,color:ctrC[results.contrat].c}}>{results.contrat}</span>}
+                {results.teletravail&&results.teletravail!=="Non précisé"&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:"#ECFDF5",color:"#059669"}}>🏠 {results.teletravail}</span>}
+                {results.localisation&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:"#F8FAFC",color:"#6B7280",border:"1px solid #E2E8F0"}}>📍 {results.localisation}</span>}
+              </div>
+              <div style={{display:"flex",gap:7,flexWrap:"wrap"}}>
+                <CopyBtn text={results.rome_principal.code} label="Copier ROME" accent={pc.color}/>
+                <CopyBtn text={[results.rome_principal.code,...(results.rome_alternatifs||[]).map(r=>r.code)].join(", ")} label="Tous ROME"/>
+                <button onClick={()=>exportCSV([["Type","Code","Intitulé"],["Principal",results.rome_principal.code,results.rome_principal.intitule],...(results.rome_alternatifs||[]).map(r=>["Alternatif",r.code,r.intitule]),["NAF",results.naf.code,results.naf.intitule]],"extraction_annonce")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 11px",borderRadius:6,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:11,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button>
+              </div>
+            </div>
+            <div style={{display:"flex",alignItems:"flex-start",gap:16}}>
+              <span style={{fontFamily:"monospace",fontSize:26,fontWeight:700,color:pc.color,letterSpacing:"0.04em",flexShrink:0,lineHeight:1}}>{results.rome_principal.code}</span>
+              <div>
+                <div style={{fontWeight:800,fontSize:17,color:"#0F172A",marginBottom:5,lineHeight:1.3}}>{results.rome_principal.intitule}</div>
+                {results.rome_principal.description&&<div style={{fontSize:13,color:"#6B7280",lineHeight:1.65}}>{results.rome_principal.description}</div>}
+              </div>
+            </div>
+          </div>
+
+          {/* Alternatifs */}
+          {results.rome_alternatifs?.length>0&&(
+            <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginBottom:12}}>
+              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12,paddingBottom:8,borderBottom:"1px solid #E2E8F0"}}>ROME Alternatifs</div>
+              <div style={{display:"flex",flexDirection:"column",gap:8}}>
+                {results.rome_alternatifs.map((r,i)=>(
+                  <div key={i} style={{display:"flex",alignItems:"center",gap:12,padding:"9px 13px",background:"#F8FAFC",borderRadius:9,border:"1px solid #E2E8F0"}}>
+                    <span style={{fontFamily:"monospace",fontWeight:700,color:pc.color,fontSize:13,flexShrink:0}}>{r.code}</span>
+                    <span style={{fontSize:13.5,color:"#374151",flex:1}}>{r.intitule}</span>
+                    {r.domaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 7px",background:"#FFF",borderRadius:5,border:"1px solid #E2E8F0",flexShrink:0}}>{r.domaine}</span>}
+                    <BdgType type={r.type||"proche"}/>
+                    <CopyBtn text={r.code}/>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* NAF + Synthèse */}
+          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginBottom:12}}>
+            <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)"}}>
+              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12}}>Code NAF / APE</div>
+              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:10}}>
+                <div><span style={{fontFamily:"monospace",fontSize:20,fontWeight:700,color:"#7C3AED"}}>{results.naf.code}</span><div style={{fontSize:13,color:"#374151",marginTop:4}}>{results.naf.intitule}</div>{results.naf.secteur&&<div style={{fontSize:11,color:"#9CA3AF",marginTop:2}}>{results.naf.secteur}</div>}</div>
+                <CopyBtn text={results.naf.code}/>
+              </div>
+            </div>
+            <div style={{background:"#F8FAFC",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0"}}>
+              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:10}}>Synthèse</div>
+              <p style={{fontSize:13,color:"#374151",lineHeight:1.75,margin:0}}>{results.synthese}</p>
+            </div>
+          </div>
+
+          {/* Mots-clés */}
+          {results.mots_cles?.length>0&&(
+            <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginBottom:12}}>
+              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12}}>Mots-clés détectés</div>
+              <div style={{display:"flex",flexWrap:"wrap",gap:8}}>
+                {results.mots_cles.map((k,i)=><span key={i} style={{padding:"4px 12px",borderRadius:20,fontSize:12,fontWeight:600,background:pc.colorSoft,color:pc.color,border:`1px solid ${pc.colorMid}`}}>{k}</span>)}
+              </div>
+            </div>
+          )}
+
+          {/* Compétences enrichies */}
+          <CompetencesBlock codes={codesForCompetences} persona={persona}/>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ══════════ DOSSIER MODULE ══════════ */
+function DossierModule() {
+  const[dtab,setDtab]=useState(0);
+  const DNAV=["👤 Personas","🗺 Parcours UX","🏗 Architecture","📈 KPIs CEO"];
+
+  return (
+    <div style={{background:"#FFFFFF",borderRadius:16,overflow:"hidden",border:"1px solid #E2E8F0",boxShadow:"0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05)"}}>
+      {/* Dossier header — accent band */}
+      <div style={{background:"linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%)",padding:"20px 28px 0",borderBottom:"1px solid #E2E8F0"}}>
+        <div style={{display:"flex",alignItems:"baseline",gap:12,marginBottom:4}}>
+          <h2 style={{margin:0,fontFamily:"Syne,sans-serif",fontSize:18,color:"#FFFFFF",letterSpacing:"0.06em"}}>ROME·NAF MATCHER</h2>
+          <span style={{color:"#94A3B8",fontSize:11}}>— Dossier de conception UX · v2.0</span>
+        </div>
+        <p style={{margin:"0 0 16px",color:"#94A3B8",fontSize:12}}>Personas · Parcours UX · Architecture · KPIs CEO</p>
+        <div style={{display:"flex",gap:0}}>
+          {DNAV.map((n,i)=>(
+            <button key={i} onClick={()=>setDtab(i)} style={{background:"none",border:"none",cursor:"pointer",padding:"10px 18px",fontSize:12,fontFamily:"Syne,sans-serif",fontWeight:700,letterSpacing:"0.04em",color:dtab===i?"#FFFFFF":"#64748B",borderBottom:dtab===i?"2px solid #38BDF8":"2px solid transparent",transition:"all .2s"}}>
+              {n}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div style={{padding:"28px",background:"#F8FAFC",fontFamily:"DM Sans,sans-serif",color:"#0F172A"}}>
+
+        {/* ── PERSONAS ── */}
+        {dtab===0&&(
+          <div>
+            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,marginBottom:18}}>
+              {Object.values(PERSONAS).map(p=>(
+                <DCard key={p.id}>
+                  <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:16}}>
+                    <div style={{width:50,height:50,borderRadius:"50%",background:`linear-gradient(135deg,${p.color}66,${p.color})`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22}}>{p.icon}</div>
+                    <div>
+                      <div style={{fontFamily:"Syne,sans-serif",fontSize:16,fontWeight:700,color:p.color}}>{p.name}, {p.age} ans</div>
+                      <div style={{color:"#8B9BB4",fontSize:11}}>{p.role}</div>
+                    </div>
+                  </div>
+                  <DSec title="Contexte & environnement">
+                    <p style={{color:"#374151",fontSize:12,lineHeight:1.7,margin:0}}>{p.context}</p>
+                  </DSec>
+                  <DSec title="Objectif principal">
+                    <p style={{color:"#374151",fontSize:12,lineHeight:1.7,margin:0}}>{p.goal}</p>
+                  </DSec>
+                  <DSec title="Compétences mobilisées">
+                    <div style={{display:"flex",flexWrap:"wrap",gap:5}}>{p.skills.map(s=><DTag key={s} label={s} color={p.color}/>)}</div>
+                  </DSec>
+                  <DSec title="Frustrations clés">
+                    {p.pains.map((f,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:5,alignItems:"flex-start"}}><span style={{color:"#E11D48",marginTop:2,flexShrink:0}}>✕</span><span style={{color:"#374151",fontSize:12}}>{f}</span></div>)}
+                  </DSec>
+                  <div style={{background:p.color+"15",border:`1px solid ${p.color}30`,borderRadius:8,padding:10}}>
+                    <div style={{color:"#8B9BB4",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:4}}>Critère de succès</div>
+                    <em style={{color:p.color,fontSize:12}}>"{p.success}"</em>
+                  </div>
+                </DCard>
+              ))}
+            </div>
+            {/* Persona secondaire Mehdi */}
+            <DCard>
+              <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:14}}>
+                <div style={{width:40,height:40,borderRadius:"50%",background:"linear-gradient(135deg,#7B2D8B,#C77DFF)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18}}>🧍</div>
+                <div>
+                  <div style={{fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,color:"#C77DFF"}}>Mehdi, 29 ans <span style={{fontSize:11,color:"#8B9BB4",fontWeight:400}}>— Demandeur d'emploi (persona secondaire)</span></div>
+                  <div style={{color:"#8B9BB4",fontSize:11}}>Cuisine, laptop, 3 onglets Indeed. Ne maîtrise pas le vocabulaire ROME officiel.</div>
+                </div>
+              </div>
+              <div style={{display:"flex",gap:16,flexWrap:"wrap"}}>
+                <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Frustration</div><p style={{color:"#374151",fontSize:12,margin:0}}>Il dit "manutentionnaire" ou "cariste" — l'outil traduit en ROME sans jargon imposé.</p></div>
+                <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Compétences</div><div style={{display:"flex",flexWrap:"wrap",gap:5}}>{["Langage naturel","Saisie vocale","Autonomie numérique"].map(c=><DTag key={c} label={c} color="#7C3AED"/>)}</div></div>
+                <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Succès</div><p style={{color:"#374151",fontSize:12,margin:0}}>Screenshot du résultat, rappelle Sophie avec le code en main.</p></div>
+              </div>
+            </DCard>
+          </div>
+        )}
+
+        {/* ── PARCOURS UX ── */}
+        {dtab===1&&(
+          <div>
+            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,marginBottom:18}}>
+              <DCard><div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:8}}>LOI DE MILLER · 7±2</div><p style={{color:"#374151",fontSize:12,margin:0,lineHeight:1.7}}>Chaque écran affiche <strong style={{color:"#0F172A"}}>max 5 résultats ROME</strong> visibles sans scroll. Codes NAF : 3 maximum en premier plan. Pagination pour le reste.</p></DCard>
+              <DCard><div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:8}}>LOI DE HICK · Réduire les choix</div><p style={{color:"#374151",fontSize:12,margin:0,lineHeight:1.7}}>2 modules distincts dès l'accueil. Zéro configuration. Le résultat principal est mis en avant — les alternatifs sont secondaires.</p></DCard>
+            </div>
+            <DCard style={{marginBottom:18}}>
+              <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:14}}>UX HONEYCOMB (Morville) — Application au ROME·NAF Matcher</div>
+              <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8}}>
+                {[{dim:"Utile",desc:"Matching ROME/NAF réel, pertinent, opérationnel",c:"#059669"},{dim:"Utilisable",desc:"3 clics max pour un résultat. Interface épurée.",c:"#2563EB"},{dim:"Désirable",desc:"Design sobre et pro. Pas de surcharge visuelle.",c:"#D97706"},{dim:"Trouvable",desc:"Recherche vocale + texte + upload visibles au 1er regard",c:"#7C3AED"},{dim:"Accessible",desc:"RGAA AA : contraste, clavier, screen reader",c:"#EA580C"},{dim:"Crédible",desc:"Référentiel France Travail officiel. Source citée.",c:"#E11D48"},{dim:"Valeur",desc:"Gain de temps mesurable pour Sophie (PPAE) et Karim (sourcing)",c:"#059669"}].map(h=>(
+                  <div key={h.dim} style={{background:h.c+"10",border:`1px solid ${h.c}28`,borderRadius:8,padding:10}}>
+                    <div style={{color:h.c,fontFamily:"Syne,sans-serif",fontSize:11,fontWeight:700}}>{h.dim}</div>
+                    <div style={{color:"#6B7280",fontSize:10,marginTop:4,lineHeight:1.5}}>{h.desc}</div>
+                  </div>
+                ))}
+              </div>
+            </DCard>
+            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
+              <DCard>
+                <div style={{color:"#52B788",fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,marginBottom:14}}>👩‍💼 Parcours Sophie — Mots-clés → ROME + NAF</div>
+                <DStep n="1" label="Accueil — Choix du module" detail="Sophie voit 2 boutons. Elle clique sur 'Mots-clés → ROME'. 2 sec." tags={[{l:"Hick : 2 choix max",c:"#E9C46A"},{l:"< 2 sec",c:"#52B788"}]}/>
+                <DStep n="2" label="Saisie orale ou texte" detail="Microphone actif. Elle dit 'agent logistique polyvalent BTP'. Transcription temps réel." tags={[{l:"Web Speech API",c:"#2E86C1"},{l:"Feedback pulse",c:"#C77DFF"}]}/>
+                <DStep n="3" label="Validation & appel API" detail="Skeleton loader < 1.5s. Indicateur de progression visible." tags={[{l:"API /rome/search",c:"#E9C46A"},{l:"LLM Claude",c:"#F4A261"}]}/>
+                <DStep n="4" label="Résultats ROME principal" detail="1 grande carte : code + intitulé + badge 'Exact'. 3 ROME proches. 1 NAF suggéré." tags={[{l:"Miller : 5 résultats max",c:"#E9C46A"},{l:"Contraste RGAA AA",c:"#52B788"}]}/>
+                <DStep n="5" label="Copier → PPAE" detail="Bouton 'Copier le code' → clipboard. Toast 2 sec. Zéro ressaisie." tags={[{l:"1 action = 1 clic",c:"#52B788"},{l:"Toast non bloquant",c:"#2E86C1"}]}/>
+                <DStep n="6" label="Compétences associées" detail="Section dépliable : compétences ROME liées (ex: 'Conduite chariot', 'Gestion stocks')." tags={[{l:"Progressive disclosure",c:"#C77DFF"}]}/>
+              </DCard>
+              <DCard>
+                <div style={{color:"#2E86C1",fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,marginBottom:14}}>🎯 Parcours Karim — Annonce → ROME + NAF + Compétences</div>
+                <DStep n="1" label="Choix module 2" detail="Karim clique sur 'Annonce → ROME+NAF'. 3 tabs : Texte / Fichier / URL." tags={[{l:"3 modes d'input",c:"#2E86C1"}]}/>
+                <DStep n="2" label="Coller l'annonce brute" detail="Textarea large. Il paste 400 mots avec fautes et acronymes. Aucun reformatage requis." tags={[{l:"Tolérance au bruit",c:"#E9C46A"}]}/>
+                <DStep n="3" label="Extraction automatique" detail="Appel LLM. Résultat en < 2s. Skeleton pendant l'attente." tags={[{l:"API /rome/extract",c:"#F4A261"},{l:"Timeout 8s max",c:"#E63946"}]}/>
+                <DStep n="4" label="Résultats structurés" detail="Code ROME principal + 2 alternatifs + NAF + Synthèse + 5 mots-clés extraits." tags={[{l:"Miller : max 5 KW",c:"#E9C46A"},{l:"Hiérarchie claire",c:"#2E86C1"}]}/>
+                <DStep n="5" label="Compétences extraites" detail="Section générée : compétences métier, transversales, outils, savoir-être, certifications." tags={[{l:"Compétences clés",c:"#52B788"},{l:"Transverses",c:"#C77DFF"}]}/>
+                <DStep n="6" label="Export & action" detail="'Copier ROME', 'Copier NAF', 'Exporter CSV'. Karim copie ROME → LinkedIn Recruiter." tags={[{l:"Export 1 clic",c:"#52B788"},{l:"< 12 sec total",c:"#E9C46A"}]}/>
+              </DCard>
+            </div>
+          </div>
+        )}
+
+        {/* ── ARCHITECTURE ── */}
+        {dtab===2&&(
+          <div>
+            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,marginBottom:18}}>
+              <DCard>
+                <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:14}}>🔌 API ENDPOINTS</div>
+                {[
+                  {m:"GET",ep:"/rome/{code_name}",desc:"Recherche ROME par nom métier (mots-clés)"},
+                  {m:"GET",ep:"/rome/select/{code}_{id}",desc:"Récupère un code ROME précis par ID"},
+                  {m:"POST",ep:"/rome/extract",desc:"Annonce brute → ROME + NAF extraits par LLM"},
+                  {m:"GET",ep:"/naf/{code}",desc:"Détails d'un code NAF"},
+                  {m:"POST",ep:"/rome/competences",desc:"Compétences associées à un code ROME"},
+                  {m:"GET",ep:"/rome/nearby/{code}",desc:"Codes ROME proches (voisinage sémantique)"},
+                  {m:"GET",ep:"/analytics/kpi",desc:"Dashboard KPI infrastructure et métier"},
+                  {m:"POST",ep:"/rome/match",desc:"Score de match compétences ↔ annonce"},
+                ].map(api=>(
+                  <div key={api.ep} style={{display:"flex",gap:9,marginBottom:10,alignItems:"flex-start"}}>
+                    <span style={{background:api.m==="GET"?"#DCFCE7":"#DBEAFE",color:api.m==="GET"?"#15803D":"#1D4ED8",padding:"2px 7px",borderRadius:4,fontSize:10,fontWeight:700,fontFamily:"monospace",minWidth:38,textAlign:"center",flexShrink:0}}>{api.m}</span>
+                    <div><code style={{color:"#0F172A",fontSize:11}}>{api.ep}</code><div style={{color:"#6B7280",fontSize:10,marginTop:2}}>{api.desc}</div></div>
+                  </div>
+                ))}
+              </DCard>
+              <div style={{display:"flex",flexDirection:"column",gap:14}}>
+                <DCard>
+                  <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:12}}>🤖 STACK LLM</div>
+                  {[
+                    {label:"Modèle principal",val:"Claude Sonnet (Anthropic)",c:"#EA580C"},
+                    {label:"Fallback",val:"Mistral-7B-Instruct (local)",c:"#7C3AED"},
+                    {label:"Hébergement",val:"HuggingFace Spaces (prod)",c:"#2563EB"},
+                    {label:"Température",val:"0.1 (précision > créativité)",c:"#D97706"},
+                    {label:"Max tokens",val:"1400 tokens / requête",c:"#059669"},
+                    {label:"Prompt strategy",val:"System prompt strict JSON + few-shot",c:"#059669"},
+                  ].map(s=>(
+                    <div key={s.label} style={{display:"flex",justifyContent:"space-between",marginBottom:8,alignItems:"center"}}>
+                      <span style={{color:"#6B7280",fontSize:11}}>{s.label}</span>
+                      <span style={{color:s.c,fontSize:11,fontWeight:600,textAlign:"right",maxWidth:"55%"}}>{s.val}</span>
+                    </div>
+                  ))}
+                </DCard>
+                <DCard>
+                  <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:12}}>🐳 DOCKER COMPOSE</div>
+                  <div style={{fontFamily:"monospace",fontSize:10,color:"#374151",lineHeight:1.9,background:"#F1F5F9",padding:12,borderRadius:6,border:"1px solid #E2E8F0"}}>
+                    <span style={{color:"#059669"}}>services:</span><br/>
+                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>frontend:</span> react:18 · port 3000<br/>
+                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>api:</span> fastapi · port 8000<br/>
+                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>llm:</span> claude/mistral · port 11434<br/>
+                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>db:</span> postgres:15 · port 5432<br/>
+                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>cache:</span> redis:7 · port 6379<br/>
+                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>nginx:</span> reverse-proxy · port 80
+                  </div>
+                </DCard>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ── KPIs CEO ── */}
+        {dtab===3&&(
+          <div>
+
+            {/* ── KPI Infrastructure ── */}
+            <DSec title="📡 KPI Infrastructure">
+              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
+                <KPIBox label="Latence moy. search" value="1.3" unit="s" delta={-8} color="#059669"/>
+                <KPIBox label="Latence moy. match" value="2.8" unit="s" delta={-5} color="#2563EB"/>
+                <KPIBox label="Uptime" value="99.4" unit="%" delta={0.2} color="#0891B2"/>
+                <KPIBox label="Cache hit rate" value="67" unit="%" delta={8} color="#D97706"/>
+                <KPIBox label="Req. match/jour" value="211" unit="" delta={22} color="#7C3AED"/>
+              </div>
+              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>LATENCE PAR ENDPOINT (secondes)</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <AreaChart data={kpiLatency}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area type="monotone" dataKey="search" stroke="#059669" fill="#05996912" name="Search (s)" strokeWidth={2}/><Area type="monotone" dataKey="competences" stroke="#D97706" fill="#D9770612" name="Compétences (s)" strokeWidth={2}/><Area type="monotone" dataKey="match" stroke="#7C3AED" fill="#7C3AED12" name="Match (s)" strokeWidth={2}/></AreaChart>
+                  </ResponsiveContainer>
+                </DCard>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>REQUÊTES/JOUR PAR ENDPOINT</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <BarChart data={kpiEndpoints}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="search" fill="#059669" name="/rome/search" radius={[3,3,0,0]} stackId="a"/><Bar dataKey="extract" fill="#2563EB" name="/rome/extract" radius={[0,0,0,0]} stackId="a"/><Bar dataKey="competences" fill="#D97706" name="/rome/competences" radius={[0,0,0,0]} stackId="a"/><Bar dataKey="match" fill="#7C3AED" name="/rome/match" radius={[3,3,0,0]} stackId="a"/></BarChart>
+                  </ResponsiveContainer>
+                </DCard>
+              </div>
+            </DSec>
+
+            {/* ── KPI LLM ── */}
+            <DSec title="🤖 KPI Infrastructure LLM">
+              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
+                <KPIBox label="Tokens search moy." value="487" unit="tok" delta={-4} color="#059669"/>
+                <KPIBox label="Tokens compét. moy." value="812" unit="tok" delta={-2} color="#D97706"/>
+                <KPIBox label="Tokens match moy." value="1 320" unit="tok" delta={-6} color="#7C3AED"/>
+                <KPIBox label="Coût/jour estimé" value="0.22" unit="€" delta={12} color="#EA580C"/>
+                <KPIBox label="JSON parse OK" value="97.8" unit="%" delta={1.1} color="#2563EB"/>
+              </div>
+              <DCard>
+                <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>TOKENS PAR TYPE D'APPEL & COÛT ESTIMÉ / HEURE</div>
+                <ResponsiveContainer width="100%" height={170}>
+                  <AreaChart data={kpiLLM}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis yAxisId="left" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis yAxisId="right" orientation="right" tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area yAxisId="left" type="monotone" dataKey="search" stroke="#059669" fill="#05996912" name="Tokens search"/><Area yAxisId="left" type="monotone" dataKey="comp" stroke="#D97706" fill="#D9770612" name="Tokens compét."/><Area yAxisId="left" type="monotone" dataKey="match" stroke="#7C3AED" fill="#7C3AED12" name="Tokens match"/><Area yAxisId="right" type="monotone" dataKey="cost" stroke="#EA580C" fill="#EA580C12" name="Coût €" strokeDasharray="4 2"/></AreaChart>
+                </ResponsiveContainer>
+              </DCard>
+            </DSec>
+
+            {/* ── KPI Business ── */}
+            <DSec title="💼 KPI Business">
+              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
+                <KPIBox label="Utilisateurs actifs" value="168" unit="/sem" delta={18} color="#D97706"/>
+                <KPIBox label="Taux adoption match" value="71" unit="%" delta={11} color="#7C3AED"/>
+                <KPIBox label="Taux export CSV" value="74" unit="%" delta={9} color="#059669"/>
+                <KPIBox label="Taux retour semaine" value="63" unit="%" delta={7} color="#2563EB"/>
+                <KPIBox label="NPS estimé" value="+41" unit="" delta={5} color="#EA580C"/>
+              </div>
+              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>SESSIONS PAR PERSONA + USAGE MATCH</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <BarChart data={kpiUsage}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="sophie" fill="#059669" name="Sophie (Conseillère)" radius={[3,3,0,0]}/><Bar dataKey="karim" fill="#2563EB" name="Karim (Chasseur)" radius={[3,3,0,0]}/><Bar dataKey="match" fill="#7C3AED" name="Sessions avec Match" radius={[3,3,0,0]}/></BarChart>
+                  </ResponsiveContainer>
+                </DCard>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>TAUX ADOPTION MATCH & RÉTENTION (%)</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <LineChart data={kpiMatchAdoption}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[0,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Line type="monotone" dataKey="taux" stroke="#7C3AED" strokeWidth={2.5} dot={{r:3,fill:"#7C3AED"}} name="Taux adoption Match %"/><Line type="monotone" dataKey="retention" stroke="#2563EB" strokeWidth={2.5} dot={{r:3,fill:"#2563EB"}} name="Taux rétention %"/></LineChart>
+                  </ResponsiveContainer>
+                </DCard>
+              </div>
+            </DSec>
+
+            {/* ── KPI Match ── */}
+            <DSec title="⚡ KPI Matcher d'annonces">
+              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
+                <KPIBox label="Score match moyen" value="83" unit="/100" delta={4} color="#7C3AED"/>
+                <KPIBox label="Matches Excellent+Bon" value="85" unit="%" delta={7} color="#059669"/>
+                <KPIBox label="Compét. matchées moy." value="3.9" unit="/session" delta={12} color="#2563EB"/>
+                <KPIBox label="Compét. manquantes moy." value="1.4" unit="/session" delta={-18} color="#EA580C"/>
+                <KPIBox label="Durée analyse match" value="2.8" unit="s" delta={-9} color="#D97706"/>
+              </div>
+              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>DISTRIBUTION DES SCORES MATCH (%)</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <BarChart data={kpiMatchScores}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="excellent" fill="#059669" name="Excellent (≥80)" radius={[3,3,0,0]} stackId="s"/><Bar dataKey="bon" fill="#2563EB" name="Bon (60-79)" stackId="s"/><Bar dataKey="partiel" fill="#D97706" name="Partiel (40-59)" stackId="s"/><Bar dataKey="faible" fill="#E11D48" name="Faible (<40)" radius={[0,0,3,3]} stackId="s"/></BarChart>
+                  </ResponsiveContainer>
+                </DCard>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>ÉVOLUTION SCORE MATCH MOYEN /100</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <AreaChart data={kpiMatchScores}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[50,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Area type="monotone" dataKey="score_moy" stroke="#7C3AED" fill="#7C3AED18" strokeWidth={2.5} name="Score moyen /100" dot={{r:4,fill:"#7C3AED"}}/></AreaChart>
+                  </ResponsiveContainer>
+                </DCard>
+              </div>
+            </DSec>
+
+            {/* ── KPI Métier ── */}
+            <DSec title="🎯 KPI Métier">
+              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
+                <KPIBox label="Précision ROME" value="91" unit="%" delta={4} color="#059669"/>
+                <KPIBox label="Satisfaction globale" value="89" unit="%" delta={5} color="#D97706"/>
+                <KPIBox label="Taux copie code" value="85" unit="%" delta={6} color="#2563EB"/>
+                <KPIBox label="Temps moyen résultat" value="1.8" unit="s" delta={-15} color="#EA580C"/>
+              </div>
+              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>PRÉCISION ROME / SATISFACTION / EXPORT / SCORE MATCH (%)</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <LineChart data={kpiMetier}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[50,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Line type="monotone" dataKey="precision" stroke="#059669" strokeWidth={2} dot={false} name="Précision ROME %"/><Line type="monotone" dataKey="satisfaction" stroke="#D97706" strokeWidth={2} dot={false} name="Satisfaction %"/><Line type="monotone" dataKey="export" stroke="#2563EB" strokeWidth={2} dot={false} name="Taux export %"/><Line type="monotone" dataKey="match_score" stroke="#7C3AED" strokeWidth={2} dot={false} strokeDasharray="4 2" name="Score match moy."/></LineChart>
+                  </ResponsiveContainer>
+                </DCard>
+                <DCard>
+                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>COMPÉTENCES DÉTECTÉES / VALIDÉES / MATCHÉES / SESSION</div>
+                  <ResponsiveContainer width="100%" height={160}>
+                    <AreaChart data={kpiCompetences}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area type="monotone" dataKey="detected" stroke="#D97706" fill="#D9770610" strokeWidth={2} name="Détectées"/><Area type="monotone" dataKey="validated" stroke="#2563EB" fill="#2563EB10" strokeWidth={2} name="Validées"/><Area type="monotone" dataKey="matched" stroke="#7C3AED" fill="#7C3AED10" strokeWidth={2} name="Matchées"/></AreaChart>
+                  </ResponsiveContainer>
+                </DCard>
+              </div>
+            </DSec>
+
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ══════════ APP ROOT ══════════ */
+export default function App() {
+  const[persona,setPersona]=useState("sophie");
+  const[mainTab,setMainTab]=useState("tool"); // tool | dossier
+  const pc = PERSONAS[persona];
+
+  return (
+    <div style={{minHeight:"100vh",background:"#F4F6F9",fontFamily:"'Outfit','DM Sans',sans-serif",color:"#0F172A"}}>
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@600;700&family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap');
+        *{box-sizing:border-box;margin:0;padding:0}
+        @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+        @keyframes spin{to{transform:rotate(360deg)}}
+        @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
+        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
+        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+        input,textarea,button,select{font-family:inherit}
+        ::-webkit-scrollbar{width:5px;height:5px}
+        ::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:3px}
+      `}</style>
+
+      {/* ── HEADER ── */}
+      <header style={{background:"#FFF",borderBottom:"1.5px solid #E2E8F0",position:"sticky",top:0,zIndex:100,boxShadow:"0 1px 0 rgba(0,0,0,.04)"}}>
+        <div style={{maxWidth:960,margin:"0 auto",padding:"0 24px"}}>
+          <div style={{display:"flex",alignItems:"center",gap:14,paddingTop:14,paddingBottom:12,borderBottom:"1px solid #F8FAFC",flexWrap:"wrap",rowGap:8}}>
+            <div style={{width:40,height:40,borderRadius:11,background:"linear-gradient(135deg,#2563EB,#0891B2)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,boxShadow:"0 2px 8px rgba(37,99,235,.3)",flexShrink:0}}>🎯</div>
+            <div style={{flex:1,minWidth:140}}>
+              <div style={{fontWeight:900,fontSize:17,color:"#0F172A",letterSpacing:"-.01em",lineHeight:1.2}}>ROME NAF Pro</div>
+              <div style={{fontSize:11,color:"#9CA3AF"}}>Décodeur IA · Référentiel France Travail · v4.0</div>
+            </div>
+
+            {/* Persona switcher */}
+            <div style={{display:"flex",gap:1,background:"#F1F5F9",borderRadius:10,padding:3,border:"1px solid #E2E8F0"}}>
+              {Object.values(PERSONAS).map(p=>(
+                <button key={p.id} onClick={()=>setPersona(p.id)} style={{display:"flex",alignItems:"center",gap:7,padding:"7px 14px",borderRadius:8,border:"none",background:persona===p.id?"#FFF":"none",color:persona===p.id?p.color:"#9CA3AF",fontWeight:persona===p.id?800:500,fontSize:12.5,cursor:"pointer",transition:"all .2s",boxShadow:persona===p.id?"0 1px 3px rgba(0,0,0,.08)":"none",whiteSpace:"nowrap"}}>
+                  <span style={{fontSize:16}}>{p.icon}</span>
+                  <span>{p.name}</span>
+                  <span style={{fontSize:10,opacity:.7}}>— {p.id==="sophie"?"Conseillère":"Chasseur"}</span>
+                </button>
+              ))}
+            </div>
+
+            {/* Main tab switcher */}
+            <div style={{display:"flex",gap:6}}>
+              {[{id:"tool",label:"🔍 Outil",},{id:"dossier",label:"📋 Dossier UX"}].map(t=>(
+                <button key={t.id} onClick={()=>setMainTab(t.id)} style={{padding:"7px 16px",borderRadius:8,border:`1.5px solid ${mainTab===t.id?"#2563EB":"#E2E8F0"}`,background:mainTab===t.id?"#EFF6FF":"#FFF",color:mainTab===t.id?"#2563EB":"#6B7280",fontWeight:mainTab===t.id?700:500,fontSize:12,cursor:"pointer",transition:"all .2s"}}>
+                  {t.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          {/* Persona indicator */}
+          <div style={{padding:"8px 0",display:"flex",alignItems:"center",gap:10}}>
+            <span style={{fontSize:18}}>{pc.icon}</span>
+            <span style={{fontSize:12.5,fontWeight:600,color:pc.color}}>{pc.name}</span>
+            <span style={{fontSize:11,color:"#9CA3AF"}}>·</span>
+            <span style={{fontSize:11,color:"#9CA3AF"}}>{pc.role}</span>
+            <span style={{fontSize:11,color:"#9CA3AF"}}>·</span>
+            <span style={{fontSize:11,color:pc.color,fontWeight:600}}>{pc.tagline}</span>
+          </div>
+        </div>
+      </header>
+
+      {/* ── MAIN ── */}
+      <main style={{maxWidth:960,margin:"0 auto",padding:"24px 24px 80px"}}>
+        {mainTab==="tool"&&<ToolModule persona={persona}/>}
+        {mainTab==="dossier"&&<DossierModule/>}
+      </main>
+
+      <footer style={{borderTop:"1.5px solid #E2E8F0",background:"#FFF",padding:"14px 24px",textAlign:"center"}}>
+        <span style={{fontSize:11,color:"#CBD5E1"}}>ROME NAF Pro v4 · Claude (Anthropic) · Référentiel France Travail · <strong style={{color:"#9CA3AF"}}>RGAA AA</strong> · Données stockées localement</span>
+      </footer>
+    </div>
+  );
+}

Dockerfile

@@ -0,0 +1,20 @@
+# ── Étape 1 : Build du frontend React ──
+FROM node:20-slim AS frontend
+WORKDIR /app
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ .
+RUN npm run build
+
+# ── Étape 2 : Backend Python + fichiers statiques ──
+FROM python:3.11-slim
+WORKDIR /app
+
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend/ .
+COPY --from=frontend /app/dist ./static
+
+EXPOSE 7860
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,39 @@
 ---
-title: ROMENAFPro
-emoji: 😻
-colorFrom: purple
-colorTo: indigo
+title: ROME NAF Pro v4 Mistral
+emoji: 🎯
+colorFrom: blue
+colorTo: yellow
 sdk: docker
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ROME NAF Pro v4 — Mistral AI · Référentiel France Travail
+
+IA souveraine européenne · Mistral AI · Données stockées localement
+
+## Configuration — Secrets HF
+
+| Variable | Valeur |
+|---|---|
+| `MISTRAL_API_KEY` | Votre clé sur console.mistral.ai |
+| `MISTRAL_MODEL` | `mistral-small-latest` (défaut) |
+
+### Modèles disponibles
+
+| Modèle | Vitesse | Coût | Recommandé pour |
+|---|---|---|---|
+| `mistral-small-latest` | ⚡ Rapide | 💚 Frugal | Production, usage courant |
+| `mistral-medium-latest` | ◑ Moyen | 🟡 Modéré | Meilleure précision |
+| `mistral-large-latest` | 🐢 Lent | 🔴 Élevé | Cas complexes |
+
+## Stack
+
+- Frontend : React + Vite + Recharts
+- Backend : FastAPI + Python
+- LLM : **Mistral AI** (souveraineté européenne 🇪🇺)
+- Déploiement : Docker sur HF Spaces
+
+---
+
+*ROME NAF Pro v4 · Mistral AI · Référentiel France Travail · RGAA AA · #IAResponsable*

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ROME NAF Pro v4 · Décodeur IA · France Travail</title>
+    <meta name="description" content="Identifiez codes ROME et NAF en quelques secondes grâce à l'IA — pour conseillers France Travail et chasseurs de tête." />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

main.jsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

main.py

@@ -0,0 +1,69 @@
+import os
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from typing import List, Optional
+from mistralai import Mistral
+
+app = FastAPI(title="ROME NAF Pro API — Mistral")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+api_key = os.environ.get("MISTRAL_API_KEY", "")
+client = Mistral(api_key=api_key) if api_key else None
+
+# Modèle utilisé — changeable via variable d'env HF
+# Options : mistral-small-latest | mistral-medium-latest | mistral-large-latest
+MODEL = os.environ.get("MISTRAL_MODEL", "mistral-small-latest")
+
+
+class Message(BaseModel):
+    role: str
+    content: str
+
+
+class ClaudeRequest(BaseModel):
+    messages: List[Message]
+    max_tokens: Optional[int] = 1200
+
+
+@app.post("/api/claude")
+async def call_mistral(body: ClaudeRequest):
+    """
+    Endpoint conserve le nom /api/claude pour ne pas modifier le frontend.
+    Il appelle Mistral en coulisses.
+    """
+    if not client:
+        raise HTTPException(
+            status_code=500,
+            detail="MISTRAL_API_KEY manquante. Configurez-la dans les Secrets du Space HF."
+        )
+    try:
+        response = client.chat.complete(
+            model=MODEL,
+            max_tokens=body.max_tokens,
+            messages=[{"role": m.role, "content": m.content} for m in body.messages]
+        )
+        text = response.choices[0].message.content
+        return {"content": [{"text": text}]}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/health")
+async def health():
+    return {
+        "status": "ok",
+        "provider": "Mistral AI",
+        "model": MODEL,
+        "api_key_configured": bool(api_key)
+    }
+
+
+app.mount("/", StaticFiles(directory="static", html=True), name="static")

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "rome-naf-pro",
+  "private": true,
+  "version": "4.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.12.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.1"
+  }
+}

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.111.0
+uvicorn==0.30.1
+mistralai==1.2.5
+python-multipart==0.0.9

vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:7860'
+    }
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false
+  }
+})