feat: overhaul TODO.md and enhance Kanban components

- Updated TODO.md to reflect the new project structure and phases, marking several tasks as completed.
- Enhanced Kanban components with a tech-inspired design, including new styles for columns and task cards.
- Removed the obsolete reminders service and task processor, streamlining the codebase for better maintainability.
- Introduced a modern API for task management, including CRUD operations and improved error handling.
- Updated global styles for a cohesive dark theme and added custom scrollbar styles.

components/kanban/TaskCard.tsx

@@ -27,83 +27,74 @@ export function TaskCard({ task }: TaskCardProps) {
   };
 
   return (
-    <div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4 hover:shadow-md transition-shadow cursor-pointer">
-      {/* En-tête avec emojis */}
-      {emojis.length > 0 && (
-        <div className="flex gap-1 mb-2">
-          {emojis.map((emoji, index) => (
-            <span key={index} className="text-lg">
-              {emoji}
-            </span>
-          ))}
-        </div>
-      )}
+    <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-lg p-3 hover:bg-slate-800/80 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group">
+      {/* Header tech avec titre et status */}
+      <div className="flex items-start gap-2 mb-2">
+        {emojis.length > 0 && (
+          <div className="flex gap-1 flex-shrink-0">
+            {emojis.slice(0, 2).map((emoji, index) => (
+              <span key={index} className="text-sm opacity-80">
+                {emoji}
+              </span>
+            ))}
+          </div>
+        )}
+        
+        <h4 className="font-mono text-sm font-medium text-slate-100 leading-tight line-clamp-2 flex-1">
+          {titleWithoutEmojis}
+        </h4>
+        
+        {/* Indicateur de priorité tech */}
+        <div className={`w-2 h-2 rounded-full flex-shrink-0 mt-1 animate-pulse ${
+          task.priority === 'high' ? 'bg-red-400 shadow-red-400/50 shadow-sm' :
+          task.priority === 'medium' ? 'bg-yellow-400 shadow-yellow-400/50 shadow-sm' : 
+          'bg-slate-500'
+        }`} />
+      </div>
 
-      {/* Titre */}
-      <h4 className="font-medium text-gray-900 dark:text-white mb-2 line-clamp-2">
-        {titleWithoutEmojis}
-      </h4>
-
-      {/* Description si présente */}
+      {/* Description tech */}
       {task.description && (
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
+        <p className="text-xs text-slate-400 mb-3 line-clamp-1 font-mono">
           {task.description}
         </p>
       )}
 
-      {/* Tags */}
-      <div className="flex flex-wrap gap-1 mb-3">
-        {/* Priorité */}
-        <span className={`px-2 py-1 rounded-full text-xs font-medium ${priorityColors[task.priority]}`}>
-          {task.priority}
-        </span>
-
-        {/* Source */}
-        <span className={`px-2 py-1 rounded-full text-xs font-medium ${sourceColors[task.source as keyof typeof sourceColors]}`}>
-          {task.source}
-        </span>
-
-        {/* Tags personnalisés */}
-        {task.tags && task.tags.length > 0 && (
-          task.tags.slice(0, 2).map((tag, index) => (
+      {/* Tags tech style */}
+      {task.tags && task.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1 mb-3">
+          {task.tags.slice(0, 3).map((tag, index) => (
             <span 
               key={index}
-              className="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+              className="px-2 py-1 rounded text-xs font-mono font-bold bg-cyan-950/50 text-cyan-300 border border-cyan-500/30 hover:bg-cyan-950/80 transition-colors"
             >
-              #{tag}
+              {tag}
             </span>
-          ))
-        )}
-      </div>
-
-      {/* Footer avec dates */}
-      <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-        <div>
-          {task.dueDate && (
-            <span className="flex items-center gap-1">
-              📅 {formatDistanceToNow(new Date(task.dueDate), { 
-                addSuffix: true, 
-                locale: fr 
-              })}
+          ))}
+          {task.tags.length > 3 && (
+            <span className="px-2 py-1 rounded text-xs font-mono text-slate-500 border border-slate-600">
+              +{task.tags.length - 3}
             </span>
           )}
         </div>
-        
-        <div>
-          {task.completedAt ? (
-            <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
-              ✅ {formatDistanceToNow(new Date(task.completedAt), { 
+      )}
+
+      {/* Footer tech avec séparateur néon */}
+      <div className="pt-2 border-t border-slate-700/50">
+        <div className="flex items-center justify-between text-xs">
+          {task.dueDate ? (
+            <span className="flex items-center gap-1 text-slate-400 font-mono">
+              <span className="text-cyan-400">⏰</span>
+              {formatDistanceToNow(new Date(task.dueDate), { 
                 addSuffix: true, 
                 locale: fr 
               })}
             </span>
           ) : (
-            <span>
-              Créé {formatDistanceToNow(new Date(task.createdAt), { 
-                addSuffix: true, 
-                locale: fr 
-              })}
-            </span>
+            <span className="text-slate-600 font-mono">--:--</span>
+          )}
+          
+          {task.completedAt && (
+            <span className="text-emerald-400 font-mono font-bold">✓ DONE</span>
           )}
         </div>
       </div>