From f094ead1dfd68429f757cfb13253bcd1cd32db62 Mon Sep 17 00:00:00 2001
From: Paul Farault <diode-farault.consultant@dgfip.finances.gouv.fr>
Date: Fri, 5 Jun 2026 18:23:40 +0200
Subject: [PATCH] feat: normalize roadmap milestones statuses

---
 en/index.html             | 18 +++++++++---------
 en/roadmap/index.html     | 34 +++++++++++++++++-----------------
 index.html                | 18 +++++++++---------
 roadmap/index.html        | 34 +++++++++++++++++-----------------
 src/roadmap-template.html | 30 +++++++++++++++---------------
 5 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/en/index.html b/en/index.html
index 7d1bbea..bf981cb 100644
--- a/en/index.html
+++ b/en/index.html
@@ -499,16 +499,9 @@ <h2 class="text-4xl font-bold mb-4">Events</h2>
                         <p class="text-xl text-text-light max-w-3xl mx-auto">OKDP presentations, conferences, and community gatherings.</p>
                     </div>
             
-                    <!-- Upcoming Events -->
                     <div class="font-mono text-[11px] uppercase tracking-widest text-text-light mb-3 px-4">Upcoming</div>
                     <div class="rounded-lg border border-accent bg-white mb-8">
-                        <div class="flex flex-col gap-1 sm:grid sm:grid-cols-[10rem_1fr_auto] sm:gap-x-6 sm:gap-y-0 sm:items-baseline py-3 px-4 border-b border-accent/80 last:border-b-0">
-                            <span class="font-mono text-xs text-text-light tabular-nums tracking-tight whitespace-nowrap">2026-06-04</span>
-                            <div class="min-w-0">
-                                <div class="text-sm text-text font-medium leading-snug">TOSIT-Day</div>
-                            </div>
-                            <span class="text-xs text-text-light">Caisse des Dépôts et Consignations</span>
-                        </div>
+                        <div class="py-6 px-4 text-sm text-text-light italic">No upcoming events at the moment.</div>
                     </div>
             
                     <!-- Past Events (Collapsible) -->
@@ -517,13 +510,20 @@ <h2 class="text-4xl font-bold mb-4">Events</h2>
                             <svg class="w-4 h-4 transition-transform group-open:rotate-90" viewBox="0 0 20 20" fill="currentColor">
                                 <path d="M7 5l6 5-6 5V5z"/>
                             </svg>
-                            <span class="font-mono text-[11px] uppercase tracking-widest">Past Events (10)</span>
+                            <span class="font-mono text-[11px] uppercase tracking-widest">Past Events (11)</span>
                         </summary>
                         <div class="mt-4 rounded-lg border border-accent bg-white">
                             <div class="flex items-center gap-3 px-4 py-2 bg-background-alt border-b border-accent">
                                 <span class="font-mono text-[11px] uppercase tracking-widest text-text-light whitespace-nowrap">── 2026</span>
                                 <span class="flex-1 border-t border-dotted border-text-light/30"></span>
                             </div>
+                            <div class="flex flex-col gap-1 sm:grid sm:grid-cols-[10rem_1fr_auto] sm:gap-x-6 sm:gap-y-0 sm:items-baseline py-3 px-4 border-b border-accent/80 last:border-b-0 opacity-60">
+                                <span class="font-mono text-xs text-text-light tabular-nums tracking-tight whitespace-nowrap">2026-06-04</span>
+                                <div class="min-w-0">
+                                    <div class="text-sm text-text font-medium leading-snug">TOSIT-Day</div>
+                                </div>
+                                <span class="text-xs text-text-light">Caisse des Dépôts et Consignations</span>
+                            </div>
                             <div class="flex flex-col gap-1 sm:grid sm:grid-cols-[10rem_1fr_auto] sm:gap-x-6 sm:gap-y-0 sm:items-baseline py-3 px-4 border-b border-accent/80 last:border-b-0 opacity-60">
                                 <span class="font-mono text-xs text-text-light tabular-nums tracking-tight whitespace-nowrap">2026-05-07</span>
                                 <div class="min-w-0">
diff --git a/en/roadmap/index.html b/en/roadmap/index.html
index bf44066..eab03ec 100644
--- a/en/roadmap/index.html
+++ b/en/roadmap/index.html
@@ -122,15 +122,15 @@ <h1 class="text-gradient mb-3">OKDP Roadmap</h1>
                         <p class="text-text-light mb-6">Track the content, priorities and progress by version.</p>
                         <div class="flex flex-wrap justify-center gap-5 text-xs text-text-light">
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-green-500"></span>
+                                <span class="w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                 Complete — delivered, tested and usable
                             </div>
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-blue-500"></span>
+                                <span class="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                 In progress — active development or integration
                             </div>
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-gray-300"></span>
+                                <span class="w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                 To do — identified, but not started for this version
                             </div>
                         </div>
@@ -157,7 +157,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Lakehouse &amp; Analytics</h
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Apache Spark</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -181,7 +181,7 @@ <h5 class="font-semibold text-sm">Apache Spark</h5>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Trino</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -205,7 +205,7 @@ <h5 class="font-semibold text-sm">Trino</h5>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Polaris Catalog (Apache Iceberg)</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -244,7 +244,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Visualization &amp; BI</h4>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Apache Superset</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -263,7 +263,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Orchestration &amp; Governan
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Apache Airflow</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -282,7 +282,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Data Science</h4>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">JupyterHub / JupyterLab</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -315,7 +315,7 @@ <h3 class="text-2xl font-bold mb-2">Control Plane / Platform</h3>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Admin Console</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -339,7 +339,7 @@ <h4 class="font-semibold text-sm">Admin Console</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Project Console</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -375,7 +375,7 @@ <h4 class="font-semibold text-sm">Project Console</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Sandbox</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -403,7 +403,7 @@ <h4 class="font-semibold text-sm">Sandbox</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Installation &amp; Guides</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -448,7 +448,7 @@ <h3 class="text-2xl font-bold mb-6">Data &amp; AI Modules</h3>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">AI &amp; MLOps</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -468,7 +468,7 @@ <h4 class="font-semibold text-sm">AI &amp; MLOps</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Ingestion, Streaming &amp; Governance</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -500,7 +500,7 @@ <h3 class="text-2xl font-bold mb-6">Control Plane / Platform</h3>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Platform</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -524,7 +524,7 @@ <h4 class="font-semibold text-sm">Platform</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Observability &amp; Deployment</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
diff --git a/index.html b/index.html
index 1b714d3..fb71b86 100644
--- a/index.html
+++ b/index.html
@@ -499,16 +499,9 @@ <h2 class="text-4xl font-bold mb-4">Événements</h2>
                         <p class="text-xl text-text-light max-w-3xl mx-auto">Présentations OKDP, conférences et rassemblements communautaires.</p>
                     </div>
             
-                    <!-- Upcoming Events -->
                     <div class="font-mono text-[11px] uppercase tracking-widest text-text-light mb-3 px-4">À venir</div>
                     <div class="rounded-lg border border-accent bg-white mb-8">
-                        <div class="flex flex-col gap-1 sm:grid sm:grid-cols-[10rem_1fr_auto] sm:gap-x-6 sm:gap-y-0 sm:items-baseline py-3 px-4 border-b border-accent/80 last:border-b-0">
-                            <span class="font-mono text-xs text-text-light tabular-nums tracking-tight whitespace-nowrap">2026-06-04</span>
-                            <div class="min-w-0">
-                                <div class="text-sm text-text font-medium leading-snug">TOSIT-Day</div>
-                            </div>
-                            <span class="text-xs text-text-light">Caisse des Dépôts et Consignations</span>
-                        </div>
+                        <div class="py-6 px-4 text-sm text-text-light italic">Aucun événement à venir pour le moment.</div>
                     </div>
             
                     <!-- Past Events (Collapsible) -->
@@ -517,13 +510,20 @@ <h2 class="text-4xl font-bold mb-4">Événements</h2>
                             <svg class="w-4 h-4 transition-transform group-open:rotate-90" viewBox="0 0 20 20" fill="currentColor">
                                 <path d="M7 5l6 5-6 5V5z"/>
                             </svg>
-                            <span class="font-mono text-[11px] uppercase tracking-widest">Événements passés (10)</span>
+                            <span class="font-mono text-[11px] uppercase tracking-widest">Événements passés (11)</span>
                         </summary>
                         <div class="mt-4 rounded-lg border border-accent bg-white">
                             <div class="flex items-center gap-3 px-4 py-2 bg-background-alt border-b border-accent">
                                 <span class="font-mono text-[11px] uppercase tracking-widest text-text-light whitespace-nowrap">── 2026</span>
                                 <span class="flex-1 border-t border-dotted border-text-light/30"></span>
                             </div>
+                            <div class="flex flex-col gap-1 sm:grid sm:grid-cols-[10rem_1fr_auto] sm:gap-x-6 sm:gap-y-0 sm:items-baseline py-3 px-4 border-b border-accent/80 last:border-b-0 opacity-60">
+                                <span class="font-mono text-xs text-text-light tabular-nums tracking-tight whitespace-nowrap">2026-06-04</span>
+                                <div class="min-w-0">
+                                    <div class="text-sm text-text font-medium leading-snug">TOSIT-Day</div>
+                                </div>
+                                <span class="text-xs text-text-light">Caisse des Dépôts et Consignations</span>
+                            </div>
                             <div class="flex flex-col gap-1 sm:grid sm:grid-cols-[10rem_1fr_auto] sm:gap-x-6 sm:gap-y-0 sm:items-baseline py-3 px-4 border-b border-accent/80 last:border-b-0 opacity-60">
                                 <span class="font-mono text-xs text-text-light tabular-nums tracking-tight whitespace-nowrap">2026-05-07</span>
                                 <div class="min-w-0">
diff --git a/roadmap/index.html b/roadmap/index.html
index d6817ed..253efe5 100644
--- a/roadmap/index.html
+++ b/roadmap/index.html
@@ -122,15 +122,15 @@ <h1 class="text-gradient mb-3">Roadmap OKDP</h1>
                         <p class="text-text-light mb-6">Suivi du contenu, des priorités et de l&#x27;avancement par version.</p>
                         <div class="flex flex-wrap justify-center gap-5 text-xs text-text-light">
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-green-500"></span>
+                                <span class="w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                 Complet — livré, testé et utilisable
                             </div>
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-blue-500"></span>
+                                <span class="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                 En cours — développement ou intégration active
                             </div>
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-gray-300"></span>
+                                <span class="w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                 À faire — identifié, mais non démarré pour cette version
                             </div>
                         </div>
@@ -157,7 +157,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Lakehouse &amp; Analytics</h
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Apache Spark</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -181,7 +181,7 @@ <h5 class="font-semibold text-sm">Apache Spark</h5>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Trino</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -205,7 +205,7 @@ <h5 class="font-semibold text-sm">Trino</h5>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Polaris Catalog (Apache Iceberg)</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -244,7 +244,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Visualisation &amp; BI</h4>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Apache Superset</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -263,7 +263,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Orchestration &amp; Gouverna
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">Apache Airflow</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -282,7 +282,7 @@ <h4 class="text-lg font-semibold mb-3 text-primary">Data Science</h4>
                                 <div class="mb-4 bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">JupyterHub / JupyterLab</h5>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -315,7 +315,7 @@ <h3 class="text-2xl font-bold mb-2">Control Plane / Plateforme</h3>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Admin Console</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -339,7 +339,7 @@ <h4 class="font-semibold text-sm">Admin Console</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Project Console</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -375,7 +375,7 @@ <h4 class="font-semibold text-sm">Project Console</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Sandbox</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -403,7 +403,7 @@ <h4 class="font-semibold text-sm">Sandbox</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Installation &amp; Guides</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -448,7 +448,7 @@ <h3 class="text-2xl font-bold mb-6">Modules Data &amp; IA</h3>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">IA &amp; MLOps</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -468,7 +468,7 @@ <h4 class="font-semibold text-sm">IA &amp; MLOps</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Ingestion, Streaming &amp; Gouvernance</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -500,7 +500,7 @@ <h3 class="text-2xl font-bold mb-6">Control Plane / Plateforme</h3>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Plateforme</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
@@ -524,7 +524,7 @@ <h4 class="font-semibold text-sm">Plateforme</h4>
                                 <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">Observabilité &amp; Déploiement</h4>
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
                                         <li class="flex items-start gap-2.5 text-sm">
diff --git a/src/roadmap-template.html b/src/roadmap-template.html
index b13e427..889b677 100644
--- a/src/roadmap-template.html
+++ b/src/roadmap-template.html
@@ -28,15 +28,15 @@ <h1 class="text-gradient mb-3">{{ roadmapPage.title }}</h1>
                         <p class="text-text-light mb-6">{{ roadmapPage.subtitle }}</p>
                         <div class="flex flex-wrap justify-center gap-5 text-xs text-text-light">
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-green-500"></span>
+                                <span class="w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                 {{ roadmapPage.legend.complete }}
                             </div>
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-blue-500"></span>
+                                <span class="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                 {{ roadmapPage.legend.inProgress }}
                             </div>
                             <div class="flex items-center gap-1.5">
-                                <span class="inline-block w-2.5 h-2.5 rounded-full bg-gray-300"></span>
+                                <span class="w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                 {{ roadmapPage.legend.todo }}
                             </div>
                         </div>
@@ -66,13 +66,13 @@ <h4 class="text-lg font-semibold mb-3 text-primary">{{ title }}</h4>
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h5 class="font-semibold text-sm">{{ name }}</h5>
                                         {{#if (eq status 'complete')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                         {{/if}}
                                         {{#if (eq status 'inProgress')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                         {{/if}}
                                         {{#if (eq status 'todo')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                         {{/if}}
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
@@ -108,13 +108,13 @@ <h3 class="text-2xl font-bold mb-2">{{ roadmapPage.v1.controlPlaneTitle }}</h3>
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">{{ title }}</h4>
                                         {{#if (eq (computeStatus features) 'complete')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                         {{/if}}
                                         {{#if (eq (computeStatus features) 'inProgress')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                         {{/if}}
                                         {{#if (eq (computeStatus features) 'todo')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                         {{/if}}
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
@@ -161,13 +161,13 @@ <h3 class="text-2xl font-bold mb-6">{{ roadmapPage.v1.modulesTitle }}</h3>
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">{{ title }}</h4>
                                         {{#if (eq (computeStatus features) 'complete')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                         {{/if}}
                                         {{#if (eq (computeStatus features) 'inProgress')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                         {{/if}}
                                         {{#if (eq (computeStatus features) 'todo')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                         {{/if}}
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">
@@ -201,13 +201,13 @@ <h3 class="text-2xl font-bold mb-6">{{ roadmapPage.future.controlPlaneTitle }}</
                                     <div class="flex items-center gap-3 px-5 py-3 bg-gray-50 border-b border-gray-200">
                                         <h4 class="font-semibold text-sm">{{ title }}</h4>
                                         {{#if (eq (computeStatus features) 'complete')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-green-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-[10px] mt-0.5">&#10003;</span>
                                         {{/if}}
                                         {{#if (eq (computeStatus features) 'inProgress')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-blue-500"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] mt-0.5">&#8635;</span>
                                         {{/if}}
                                         {{#if (eq (computeStatus features) 'todo')}}
-                                        <span class="ml-auto w-3 h-3 rounded-full bg-gray-300"></span>
+                                        <span class="ml-auto w-4 h-4 rounded-full bg-gray-100 text-gray-400 flex items-center justify-center text-[10px] mt-0.5">&#9675;</span>
                                         {{/if}}
                                     </div>
                                     <ul class="px-5 py-3 space-y-1.5">