From ed42a24afea2b93f73e84986046292d338405090 Mon Sep 17 00:00:00 2001
From: sebvtl <sebvtl@noreply.localhost>
Date: Fri, 12 Jun 2026 04:52:10 +0000
Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9verser=20les=20fichiers=20vers=20?=
 =?UTF-8?q?"/"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html  | 120 ++++++++++++++++++++++++++--------------------------
 prompt.html |  58 ++++++++++++-------------
 2 files changed, 89 insertions(+), 89 deletions(-)

diff --git a/index.html b/index.html
index 323082c..9ed0f4a 100644
--- a/index.html
+++ b/index.html
@@ -5,41 +5,41 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>IA & Gestion de projet — Cours interactif 1h</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Lato:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
 :root{
-  --paper:#faf6ef;
-  --paper-2:#f3ecdf;
-  --paper-3:#ece3d2;
-  --card:#fffdf8;
-  --ink:#1c1914;
-  --ink-2:#4a443a;
-  --ink-3:#8a8273;
-  --line:#e3d9c6;
-  --line-2:#d4c8b0;
-  --amber:#d97706;
-  --amber-dark:#92400e;
-  --amber-bg:#fdf3e3;
-  --amber-line:#f0d9b0;
-  --green:#15803d;
-  --green-bg:#ecf7ec;
-  --green-line:#c9e6c9;
-  --red:#b91c1c;
-  --red-bg:#fdeeee;
-  --red-line:#f3cfcf;
-  --blue:#1d4ed8;
-  --blue-bg:#edf2fd;
-  --blue-line:#cdd9f5;
-  --violet:#6d28d9;
-  --violet-bg:#f3eefc;
-  --violet-line:#ddd0f2;
-  --serif:'Source Serif 4', Georgia, serif;
-  --sans:'Lato', sans-serif;
+  --paper:#F4F4FB;
+  --paper-2:#F0F0F8;
+  --paper-3:#E8E8F4;
+  --card:#FFFFFF;
+  --ink:#1E1E2E;
+  --ink-2:#4B5563;
+  --ink-3:#9CA3AF;
+  --line:#E0E0EF;
+  --line-2:#D1D5DB;
+  --amber:#5B4FE8;
+  --amber-dark:#3730A3;
+  --amber-bg:#EEF0FB;
+  --amber-line:#C7C9F0;
+  --green:#65A30D;
+  --green-bg:#F0F9E8;
+  --green-line:#CCEAAA;
+  --red:#B91C1C;
+  --red-bg:#FEE2E2;
+  --red-line:#FECACA;
+  --blue:#6366F1;
+  --blue-bg:#EEF2FF;
+  --blue-line:#C7D2FE;
+  --violet:#60A5FA;
+  --violet-bg:#EFF6FF;
+  --violet-line:#BFDBFE;
+  --serif:'Plus Jakarta Sans', 'Inter', sans-serif;
+  --sans:'Inter', 'Plus Jakarta Sans', sans-serif;
   --mono:'IBM Plex Mono', monospace;
   --r-sm:6px; --r-md:12px; --r-lg:18px;
-  --sh-sm:0 1px 2px rgba(28,25,20,.06);
-  --sh-md:0 4px 14px rgba(28,25,20,.08);
-  --sh-lg:0 16px 40px rgba(28,25,20,.12);
+  --sh-sm:0 1px 2px rgba(30,30,46,.05);
+  --sh-md:0 4px 14px rgba(30,30,46,.07);
+  --sh-lg:0 16px 40px rgba(30,30,46,.10);
 }
 *{box-sizing:border-box;margin:0;padding:0}
 html{scroll-behavior:smooth}
@@ -51,8 +51,8 @@ body{
   line-height:1.55;
   min-height:100vh;
   background-image:
-    radial-gradient(at 8% -10%, rgba(217,119,6,.07) 0, transparent 45%),
-    radial-gradient(at 95% 110%, rgba(109,40,217,.05) 0, transparent 40%);
+    radial-gradient(at 8% -10%, rgba(91,79,232,.07) 0, transparent 45%),
+    radial-gradient(at 95% 110%, rgba(55,48,163,.05) 0, transparent 40%);
   background-attachment:fixed;
 }
 body::before{
@@ -93,7 +93,7 @@ body::before{
 .xp-pill.bump{transform:scale(1.15)}
 .xp-pill .coin{
   width:22px;height:22px;border-radius:50%;
-  background:radial-gradient(circle at 35% 30%, #fbbf24, var(--amber) 70%);
+  background:radial-gradient(circle at 35% 30%, #A5B4FC, var(--amber) 70%);
   display:grid;place-items:center;font-size:11px;color:#fff;font-weight:900;
   box-shadow:0 1px 3px rgba(0,0,0,.3);
 }
@@ -123,7 +123,7 @@ body::before{
 
 /* progress rail */
 .rail{height:4px;background:var(--paper-3)}
-.rail-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#f59e0b);transition:width .5s ease;border-radius:0 3px 3px 0}
+.rail-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#818CF8);transition:width .5s ease;border-radius:0 3px 3px 0}
 
 /* ============ LAYOUT ============ */
 .stage{max-width:1060px;margin:0 auto;padding:28px 24px 120px;position:relative;z-index:1}
@@ -213,7 +213,7 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
 }
 .toast.show{transform:none}
 .toast .t-ico{font-size:20px}
-.toast small{display:block;font-weight:400;font-size:12px;color:#cfc8ba}
+.toast small{display:block;font-weight:400;font-size:12px;color:#BBBBD4}
 
 /* ============ SLIDE 0 : COVER ============ */
 .cover{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:62vh}
@@ -224,7 +224,7 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
 .cstat span{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:1px;font-weight:700}
 .agenda{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
 .agenda-head{background:var(--ink);color:var(--paper);padding:14px 20px;font-family:var(--serif);font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
-.agenda-head span{font-family:var(--mono);font-size:12px;color:#cfc8ba;font-weight:400}
+.agenda-head span{font-family:var(--mono);font-size:12px;color:#BBBBD4;font-weight:400}
 .agenda-row{
   display:flex;align-items:center;gap:12px;padding:11px 20px;
   border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;
@@ -315,29 +315,29 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
 .brick.sel-T{background:var(--green-bg);border-color:var(--green);color:var(--green);transform:scale(1.03)}
 .brick.sel-F{background:var(--violet-bg);border-color:var(--violet);color:var(--violet);transform:scale(1.03)}
 .prompt-paper{
-  background:#211d16;color:#efe9dc;border-radius:var(--r-lg);
+  background:#1A1A2E;color:#E8E6F0;border-radius:var(--r-lg);
   padding:22px;font-family:var(--mono);font-size:13.5px;line-height:1.8;
   box-shadow:var(--sh-lg);min-height:280px;position:sticky;top:84px;
 }
 .prompt-paper .pp-head{
   display:flex;align-items:center;gap:8px;margin-bottom:16px;
-  padding-bottom:12px;border-bottom:1px solid #3a342a;
+  padding-bottom:12px;border-bottom:1px solid #2A2A42;
 }
 .pp-dot{width:10px;height:10px;border-radius:50%}
-.prompt-paper .pp-title{font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#a89e8c;margin-left:6px}
+.prompt-paper .pp-title{font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#8B8BAA;margin-left:6px}
 .pp-line{display:block;margin-bottom:10px;opacity:0;transform:translateX(-8px);transition:all .4s}
 .pp-line.in{opacity:1;transform:none}
 .pp-line .pl{font-weight:600;padding:1px 7px;border-radius:5px;margin-right:8px;font-size:11px}
-.pl-R{background:rgba(217,119,6,.25);color:#fbbf24}
-.pl-C{background:rgba(29,78,216,.3);color:#93b4f5}
-.pl-T{background:rgba(21,128,61,.3);color:#86dba2}
-.pl-F{background:rgba(109,40,217,.3);color:#c4a8f0}
-.pp-placeholder{color:#6b6457;font-style:italic}
-.power-meter{margin-top:18px;padding-top:14px;border-top:1px solid #3a342a}
-.power-meter .pm-label{font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#a89e8c;display:flex;justify-content:space-between;margin-bottom:8px}
-.pm-bar{height:9px;background:#3a342a;border-radius:5px;overflow:hidden}
-.pm-fill{height:100%;width:5%;border-radius:5px;background:linear-gradient(90deg,#b91c1c,#d97706,#15803d);transition:width .6s cubic-bezier(.22,1,.36,1)}
-.pm-verdict{font-family:var(--sans);font-size:13px;font-weight:700;margin-top:8px;color:#cfc8ba;min-height:20px}
+.pl-R{background:rgba(91,79,232,.3);color:#A5B4FC}
+.pl-C{background:rgba(99,102,241,.3);color:#C7D2FE}
+.pl-T{background:rgba(101,163,13,.3);color:#CCEAAA}
+.pl-F{background:rgba(96,165,250,.3);color:#BFDBFE}
+.pp-placeholder{color:#555575;font-style:italic}
+.power-meter{margin-top:18px;padding-top:14px;border-top:1px solid #2A2A42}
+.power-meter .pm-label{font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#8B8BAA;display:flex;justify-content:space-between;margin-bottom:8px}
+.pm-bar{height:9px;background:#2A2A42;border-radius:5px;overflow:hidden}
+.pm-fill{height:100%;width:5%;border-radius:5px;background:linear-gradient(90deg,#B91C1C,#5B4FE8,#65A30D);transition:width .6s cubic-bezier(.22,1,.36,1)}
+.pm-verdict{font-family:var(--sans);font-size:13px;font-weight:700;margin-top:8px;color:#BBBBD4;min-height:20px}
 
 /* ============ KANBAN ============ */
 .kb-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@@ -362,13 +362,13 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
 @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
 @keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
 .ai-console{
-  margin-top:18px;background:#211d16;border-radius:var(--r-md);padding:18px 20px;
-  font-family:var(--mono);font-size:13px;color:#efe9dc;line-height:1.75;
+  margin-top:18px;background:#1A1A2E;border-radius:var(--r-md);padding:18px 20px;
+  font-family:var(--mono);font-size:13px;color:#E8E6F0;line-height:1.75;
   min-height:96px;box-shadow:var(--sh-md);
 }
-.ai-console .scan{color:#a89e8c}
-.ai-console .found{color:#fbbf24}
-.ai-console .reco{color:#86dba2}
+.ai-console .scan{color:#8B8BAA}
+.ai-console .found{color:#F59E0B}
+.ai-console .reco{color:#CCEAAA}
 .cursor-blink{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;animation:pulse .9s infinite}
 
 /* ============ CR TRANSFORMER ============ */
@@ -466,9 +466,9 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
 .final-badge.show{display:block}
 .medal{
   width:120px;height:120px;border-radius:50%;margin:0 auto 16px;
-  background:radial-gradient(circle at 35% 30%,#fbbf24,var(--amber) 65%,var(--amber-dark));
+  background:radial-gradient(circle at 35% 30%,#A5B4FC,var(--amber) 65%,var(--amber-dark));
   display:grid;place-items:center;font-size:52px;
-  box-shadow:0 10px 30px rgba(217,119,6,.4),inset 0 2px 6px rgba(255,255,255,.5);
+  box-shadow:0 10px 30px rgba(91,79,232,.35),inset 0 2px 6px rgba(255,255,255,.5);
   animation:medalSpin 1s cubic-bezier(.34,1.56,.64,1);
 }
 @keyframes medalSpin{from{transform:rotateY(180deg) scale(.3)}to{transform:none}}
@@ -799,7 +799,7 @@ body.formateur .formateur-flag{display:block}
 
   <div style="text-align:center;margin-top:18px">
     <button class="btn btn-primary" id="crRun">⚡ Transformer les notes</button>
-    <a class="btn btn-ghost" href="generateur-prompt-cr.html" target="_blank" style="text-decoration:none">🛠️ Ouvrir le générateur de prompt CR</a>
+    <a class="btn btn-ghost" href="prompt.html" target="_blank" style="text-decoration:none">🛠️ Ouvrir le générateur de prompt CR</a>
   </div>
 
   <div class="callout amber"><span class="ci">⏱️</span><div><b>Faites le calcul :</b> un CR manuel = 25 à 40 min. Avec l'IA = 30 s de génération + 4 min de relecture. Sur 3 réunions par semaine, c'est <b>~1h30 récupérée chaque semaine</b> — soit plus d'une semaine de travail par an.</div></div>
@@ -924,7 +924,7 @@ body.formateur .formateur-flag{display:block}
   </div>
 
   <div style="text-align:center;margin-top:26px">
-    <a class="btn btn-amber" href="generateur-prompt-cr.html" target="_blank" style="text-decoration:none">🛠️ Récupérer mon générateur de prompts CR →</a>
+    <a class="btn btn-amber" href="prompt.html" target="_blank" style="text-decoration:none">🛠️ Récupérer mon générateur de prompts CR →</a>
   </div>
 
   <div class="fnotes">
@@ -1252,7 +1252,7 @@ function celebrate(){
     const c=document.createElement('div');
     c.className='cf';
     c.style.left=Math.random()*100+'vw';
-    c.style.background=['#d97706','#15803d','#1d4ed8','#6d28d9','#fbbf24'][i%5];
+    c.style.background=['#5B4FE8','#65A30D','#6366F1','#60A5FA','#A5B4FC'][i%5];
     c.style.animationDuration=(2.2+Math.random()*2)+'s';
     c.style.animationDelay=(Math.random()*.8)+'s';
     c.style.transform=`rotate(${Math.random()*360}deg)`;
diff --git a/prompt.html b/prompt.html
index ab78786..4d1d5b2 100644
--- a/prompt.html
+++ b/prompt.html
@@ -5,22 +5,22 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Générateur de prompt CR — IA-PRO Gestion de projet</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Lato:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
 :root{
-  --paper:#faf6ef; --paper-2:#f3ecdf; --paper-3:#ece3d2; --card:#fffdf8;
-  --ink:#1c1914; --ink-2:#4a443a; --ink-3:#8a8273;
-  --line:#e3d9c6; --line-2:#d4c8b0;
-  --amber:#d97706; --amber-dark:#92400e; --amber-bg:#fdf3e3; --amber-line:#f0d9b0;
-  --green:#15803d; --green-bg:#ecf7ec;
-  --blue:#1d4ed8; --violet:#6d28d9;
-  --serif:'Source Serif 4',Georgia,serif; --sans:'Lato',sans-serif; --mono:'IBM Plex Mono',monospace;
-  --sh-sm:0 1px 2px rgba(28,25,20,.06); --sh-md:0 4px 14px rgba(28,25,20,.08); --sh-lg:0 16px 40px rgba(28,25,20,.14);
+  --paper:#F4F4FB; --paper-2:#F0F0F8; --paper-3:#E8E8F4; --card:#FFFFFF;
+  --ink:#1E1E2E; --ink-2:#4B5563; --ink-3:#9CA3AF;
+  --line:#E0E0EF; --line-2:#D1D5DB;
+  --amber:#5B4FE8; --amber-dark:#3730A3; --amber-bg:#EEF0FB; --amber-line:#C7C9F0;
+  --green:#65A30D; --green-bg:#F0F9E8;
+  --blue:#6366F1; --violet:#60A5FA;
+  --serif:'Plus Jakarta Sans','Inter',sans-serif; --sans:'Inter','Plus Jakarta Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
+  --sh-sm:0 1px 2px rgba(30,30,46,.05); --sh-md:0 4px 14px rgba(30,30,46,.07); --sh-lg:0 16px 40px rgba(30,30,46,.10);
 }
 *{box-sizing:border-box;margin:0;padding:0}
 body{
   background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
-  background-image:radial-gradient(at 5% -5%,rgba(217,119,6,.06) 0,transparent 40%),radial-gradient(at 100% 105%,rgba(29,78,216,.04) 0,transparent 40%);
+  background-image:radial-gradient(at 5% -5%,rgba(91,79,232,.06) 0,transparent 40%),radial-gradient(at 100% 105%,rgba(55,48,163,.04) 0,transparent 40%);
   background-attachment:fixed;min-height:100vh;
 }
 .wrap{max-width:1180px;margin:0 auto;padding:30px 24px 60px}
@@ -87,24 +87,24 @@ textarea{font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical;
 /* output side */
 .out-sticky{position:sticky;top:24px}
 .prompt-paper{
-  background:#211d16;color:#efe9dc;border-radius:16px;box-shadow:var(--sh-lg);
+  background:#1A1A2E;color:#E8E6F0;border-radius:16px;box-shadow:var(--sh-lg);
   font-family:var(--mono);font-size:12.8px;line-height:1.75;overflow:hidden;
 }
-.pp-head{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid #3a342a}
+.pp-head{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid #2A2A42}
 .pp-dot{width:10px;height:10px;border-radius:50%}
-.pp-title{font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#a89e8c;margin-left:6px}
-.pp-count{margin-left:auto;font-size:11px;color:#6b6457}
+.pp-title{font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#8B8BAA;margin-left:6px}
+.pp-count{margin-left:auto;font-size:11px;color:#555575}
 .pp-body{padding:18px 20px;max-height:430px;overflow:auto}
 .pp-body::-webkit-scrollbar{width:8px}
-.pp-body::-webkit-scrollbar-thumb{background:#3a342a;border-radius:4px}
-.seg-R{color:#fbbf24}.seg-C{color:#93b4f5}.seg-T{color:#86dba2}.seg-F{color:#c4a8f0}
+.pp-body::-webkit-scrollbar-thumb{background:#2A2A42;border-radius:4px}
+.seg-R{color:#A5B4FC}.seg-C{color:#C7D2FE}.seg-T{color:#CCEAAA}.seg-F{color:#BFDBFE}
 .pl{font-weight:600;padding:1px 7px;border-radius:5px;font-size:10px;font-family:var(--sans);letter-spacing:1px;margin-right:6px}
-.pl-R{background:rgba(217,119,6,.25);color:#fbbf24}
-.pl-C{background:rgba(29,78,216,.3);color:#93b4f5}
-.pl-T{background:rgba(21,128,61,.3);color:#86dba2}
-.pl-F{background:rgba(109,40,217,.3);color:#c4a8f0}
-.pp-notes{color:#a89e8c;font-style:italic}
-.pp-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #3a342a;flex-wrap:wrap}
+.pl-R{background:rgba(91,79,232,.3);color:#A5B4FC}
+.pl-C{background:rgba(99,102,241,.3);color:#C7D2FE}
+.pl-T{background:rgba(101,163,13,.3);color:#CCEAAA}
+.pl-F{background:rgba(96,165,250,.3);color:#BFDBFE}
+.pp-notes{color:#8B8BAA;font-style:italic}
+.pp-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #2A2A42;flex-wrap:wrap}
 .btn{
   font-family:var(--sans);font-weight:900;font-size:13.5px;border:none;cursor:pointer;
   border-radius:10px;padding:10px 18px;display:inline-flex;align-items:center;gap:8px;
@@ -113,8 +113,8 @@ textarea{font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical;
 .btn:active{transform:scale(.97)}
 .btn-amber{background:var(--amber);color:#fff}
 .btn-amber:hover{background:#c2670a}
-.btn-dark-ghost{background:transparent;color:#cfc8ba;border:1px solid #4a4336}
-.btn-dark-ghost:hover{background:#2c2820}
+.btn-dark-ghost{background:transparent;color:#BBBBD4;border:1px solid #2E2E50}
+.btn-dark-ghost:hover{background:#22223A}
 
 .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
 .legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-3)}
@@ -235,15 +235,15 @@ footer{margin-top:36px;text-align:center;font-size:12px;color:var(--ink-3)}
       <div class="pp-body" id="ppBody"></div>
       <div class="pp-actions">
         <button class="btn btn-amber" id="btnCopy">📋 Copier le prompt</button>
-        <a class="btn btn-dark-ghost" id="btnClaude" href="https://claude.ai/new" target="_blank" style="text-decoration:none">↗ Ouvrir Claude</a>
+        <a class="btn btn-dark-ghost" id="btnClaude" href="https://claude.ai/new" target="_blank" style="text-decoration:none">↗ Ouvrir une IA</a>
         <button class="btn btn-dark-ghost" id="btnRaw">{ } Version brute</button>
       </div>
     </div>
     <div class="legend">
-      <span><i style="background:#d97706"></i> Rôle</span>
-      <span><i style="background:#1d4ed8"></i> Contexte</span>
-      <span><i style="background:#15803d"></i> Tâche</span>
-      <span><i style="background:#6d28d9"></i> Format</span>
+      <span><i style="background:#5B4FE8"></i> Rôle</span>
+      <span><i style="background:#6366F1"></i> Contexte</span>
+      <span><i style="background:#65A30D"></i> Tâche</span>
+      <span><i style="background:#60A5FA"></i> Format</span>
     </div>
     <div class="tip">💡<div><b>Astuce formation :</b> pas encore de notes ? Copiez le prompt tel quel — il demande à l'IA de créer un exemple fictif réaliste, idéal pour voir le rendu avant de l'utiliser en production.</div></div>
   </div>