feat(ui) : add dark mode toggle and remove inline dark: classes

- Add dark mode toggle button in top nav
- Add darkMode store with localStorage persistence
- Enable Tailwind class-based dark mode
- Import dark.css global overrides
- Remove inline dark: Tailwind classes (handled by global CSS)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/components/task/TaskCard.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md dark:border-dark-border dark:bg-dark-card"
+        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md"
         draggable="true"
         @dragstart="onDragStart"
         @dragend="onDragEnd"
@@ -27,7 +27,7 @@
                         :title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })"
                     />
                 </div>
-                <h4 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">{{ task.title }}</h4>
+                <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
             </div>
             <button
                 class="shrink-0 transition-colors"
@@ -85,7 +85,7 @@
             />
             <span
                 v-else
-                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400 dark:bg-dark-hover dark:text-neutral-400"
+                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
             >
                 <Icon name="mdi:account-outline" size="14" />
             </span>

frontend/components/task/TaskListItem.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex cursor-pointer items-stretch gap-3 rounded-[10px] bg-white px-3 py-2.5 transition-colors hover:shadow-sm sm:px-4 dark:bg-dark-card"
+        class="flex cursor-pointer items-stretch gap-3 rounded-[10px] bg-white px-3 py-2.5 transition-colors hover:shadow-sm sm:px-4"
         :class="selected ? 'ring-2 ring-primary-500' : ''"
         @click="emit('click')"
     >
@@ -30,7 +30,7 @@
                 />
             </div>
             <!-- Row 2: title -->
-            <h4 class="mt-1 text-sm font-semibold text-neutral-900 dark:text-neutral-100">{{ task.title }}</h4>
+            <h4 class="mt-1 text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
             <!-- Row 3: tags + status + deadline/calendar/recurrence -->
             <div class="mt-2 flex flex-wrap items-center gap-1.5">
                 <span
@@ -92,7 +92,7 @@
             />
             <span
                 v-else
-                class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400 dark:bg-dark-hover"
+                class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
             >
                 <Icon name="mdi:account-outline" size="14" />
             </span>

frontend/components/ui/AppTopNav.vue

@@ -19,6 +19,14 @@
         </button>
       </div>
       <div class="ml-auto flex items-center gap-4 text-xl text-white sm:gap-8">
+        <button
+          type="button"
+          class="rounded-md p-1.5 text-white/70 transition-colors hover:bg-primary-600 hover:text-white"
+          :title="ui.darkMode ? 'Mode clair' : 'Mode sombre'"
+          @click="ui.toggleDarkMode()"
+        >
+          <Icon :name="ui.darkMode ? 'mdi:weather-sunny' : 'mdi:weather-night'" size="22" />
+        </button>
         <NotificationBell />
         <div class="group relative flex gap-2 sm:gap-4">
           <UserAvatar v-if="user" :user="user" size="md" class="cursor-pointer" />