cinqcinqdev-seo 0.1.31 → 0.1.32

package/dist/runtime/pages/admin/seo.vue

@@ -54,26 +54,26 @@ const getMeta = (page, key) => {
 
       <!-- Header -->
       <div class="mb-8">
-        <h1 class="text-2xl font-black text-mgray">SEO</h1>
-        <p class="text-sm text-mgray-400 mt-1">Aperçu de l'optimisation SEO de toutes vos pages.</p>
+        <h1 class="text-2xl font-black text-gray-900">SEO</h1>
+        <p class="text-sm text-gray-400 mt-1">Aperçu de l'optimisation SEO de toutes vos pages.</p>
       </div>
 
       <!-- Stats -->
       <div class="grid grid-cols-4 gap-4 mb-10">
-        <div class="bg-background rounded-2xl p-5 border border-mgray-100 shadow-sm">
-          <p class="text-[10px] font-black uppercase tracking-widest text-mgray-400 mb-2">Total pages</p>
-          <p class="text-3xl font-black text-mgray">{{ stats.total }}</p>
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Total pages</p>
+          <p class="text-3xl font-black text-gray-900">{{ stats.total }}</p>
         </div>
-        <div class="bg-background rounded-2xl p-5 border border-mgray-100 shadow-sm">
-          <p class="text-[10px] font-black uppercase tracking-widest text-mgray-400 mb-2">Optimisées</p>
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Optimisées</p>
           <p class="text-3xl font-black text-green-600">{{ stats.optimized }}</p>
         </div>
-        <div class="bg-background rounded-2xl p-5 border border-mgray-100 shadow-sm">
-          <p class="text-[10px] font-black uppercase tracking-widest text-mgray-400 mb-2">Partielles</p>
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Partielles</p>
           <p class="text-3xl font-black text-amber-500">{{ stats.partial }}</p>
         </div>
-        <div class="bg-background rounded-2xl p-5 border border-mgray-100 shadow-sm">
-          <p class="text-[10px] font-black uppercase tracking-widest text-mgray-400 mb-2">Sans SEO</p>
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Sans SEO</p>
           <p class="text-3xl font-black text-red-500">{{ stats.missing }}</p>
         </div>
       </div>
@@ -81,67 +81,67 @@ const getMeta = (page, key) => {
       <!-- Filters -->
       <div class="flex items-center gap-3 mb-5">
         <div class="flex-1 relative">
-          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-mgray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
           </svg>
           <input v-model="search" type="text" placeholder="Rechercher une page…"
-            class="w-full pl-9 pr-4 py-2 text-sm border border-mgray-200 rounded-xl outline-none focus:ring-2 focus:ring-primary transition bg-background" />
+            class="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-xl outline-none focus:ring-2 focus:ring-[#3d35ff] transition bg-white" />
         </div>
-        <select v-model="filterType" class="text-sm border border-mgray-200 rounded-xl px-3 py-2 outline-none focus:ring-2 focus:ring-primary bg-background">
+        <select v-model="filterType" class="text-sm border border-gray-200 rounded-xl px-3 py-2 outline-none focus:ring-2 focus:ring-[#3d35ff] bg-white">
           <option value="">Tous les types</option>
           <option v-for="t in pageTypes" :key="t.id" :value="t.id">{{ t.label }}</option>
         </select>
-        <div class="flex rounded-xl border border-mgray-200 overflow-hidden bg-background text-xs font-bold">
+        <div class="flex rounded-xl border border-gray-200 overflow-hidden bg-white text-xs font-bold">
           <button @click="filterSeo = 'all'"
-            :class="['px-3 py-2 transition', filterSeo === 'all' ? 'bg-primary text-white' : 'text-mgray-400 hover:text-mgray-700']">
+            :class="['px-3 py-2 transition', filterSeo === 'all' ? 'bg-[#3d35ff] text-white' : 'text-gray-400 hover:text-gray-700']">
             Tous
           </button>
           <button @click="filterSeo = 'optimized'"
-            :class="['px-3 py-2 transition border-l border-mgray-200', filterSeo === 'optimized' ? 'bg-green-500 text-white' : 'text-mgray-400 hover:text-mgray-700']">
+            :class="['px-3 py-2 transition border-l border-gray-200', filterSeo === 'optimized' ? 'bg-green-500 text-white' : 'text-gray-400 hover:text-gray-700']">
             Optimisés
           </button>
           <button @click="filterSeo = 'missing'"
-            :class="['px-3 py-2 transition border-l border-mgray-200', filterSeo === 'missing' ? 'bg-red-500 text-white' : 'text-mgray-400 hover:text-mgray-700']">
+            :class="['px-3 py-2 transition border-l border-gray-200', filterSeo === 'missing' ? 'bg-red-500 text-white' : 'text-gray-400 hover:text-gray-700']">
             Incomplets
           </button>
         </div>
       </div>
 
       <!-- Table -->
-      <div class="bg-background border border-mgray-100 rounded-2xl shadow-sm overflow-hidden">
+      <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">
         <div v-if="pending" class="py-24 text-center">
-          <p class="text-sm text-mgray-400">Chargement…</p>
+          <p class="text-sm text-gray-400">Chargement…</p>
         </div>
         <div v-else-if="!filteredPages.length" class="py-24 text-center">
-          <svg class="w-10 h-10 mx-auto text-mgray-200 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-10 h-10 mx-auto text-gray-200 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
           </svg>
-          <p class="text-sm font-semibold text-mgray-500">Aucune page trouvée</p>
+          <p class="text-sm font-semibold text-gray-500">Aucune page trouvée</p>
         </div>
         <table v-else class="w-full text-left">
           <thead>
-            <tr class="border-b border-mgray-100">
-              <th class="px-6 py-3.5 text-[10px] font-black text-mgray-400 uppercase tracking-widest">Page</th>
-              <th class="px-6 py-3.5 text-[10px] font-black text-mgray-400 uppercase tracking-widest">Type</th>
-              <th class="px-6 py-3.5 text-[10px] font-black text-mgray-400 uppercase tracking-widest">Meta titre</th>
-              <th class="px-6 py-3.5 text-[10px] font-black text-mgray-400 uppercase tracking-widest">Meta description</th>
-              <th class="px-6 py-3.5 text-[10px] font-black text-mgray-400 uppercase tracking-widest">Score</th>
-              <th class="px-6 py-3.5 text-[10px] font-black text-mgray-400 uppercase tracking-widest text-right">Action</th>
+            <tr class="border-b border-gray-100">
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">Page</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">Type</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">Meta titre</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">Meta description</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">Score</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest text-right">Action</th>
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-50">
-            <tr v-for="page in filteredPages" :key="page.id" class="group hover:bg-mgray-50/60 transition-colors">
+            <tr v-for="page in filteredPages" :key="page.id" class="group hover:bg-gray-50/60 transition-colors">
               <td class="px-6 py-4">
-                <div class="font-bold text-mgray text-sm">{{ page.title }}</div>
-                <div class="text-[11px] text-primary font-mono mt-0.5 opacity-70">/{{ page.slug }}</div>
+                <div class="font-bold text-gray-900 text-sm">{{ page.title }}</div>
+                <div class="text-[11px] text-[#3d35ff] font-mono mt-0.5 opacity-70">/{{ page.slug }}</div>
               </td>
               <td class="px-6 py-4">
-                <span class="text-[11px] font-semibold text-mgray-500 bg-mgray-100 px-2 py-0.5 rounded-md">
+                <span class="text-[11px] font-semibold text-gray-500 bg-gray-100 px-2 py-0.5 rounded-md">
                   {{ typeLabel(page.type) }}
                 </span>
               </td>
               <td class="px-6 py-4 max-w-[180px]">
-                <span v-if="getMeta(page, 'meta_title')" class="text-[11px] text-mgray-700 truncate block" :title="getMeta(page, 'meta_title')">
+                <span v-if="getMeta(page, 'meta_title')" class="text-[11px] text-gray-700 truncate block" :title="getMeta(page, 'meta_title')">
                   {{ getMeta(page, "meta_title") }}
                 </span>
                 <span v-else class="inline-flex items-center gap-1 text-[11px] font-semibold text-red-400">
@@ -149,7 +149,7 @@ const getMeta = (page, key) => {
                 </span>
               </td>
               <td class="px-6 py-4 max-w-[200px]">
-                <span v-if="getMeta(page, 'meta_description')" class="text-[11px] text-mgray-500 truncate block" :title="getMeta(page, 'meta_description')">
+                <span v-if="getMeta(page, 'meta_description')" class="text-[11px] text-gray-500 truncate block" :title="getMeta(page, 'meta_description')">
                   {{ getMeta(page, "meta_description") }}
                 </span>
                 <span v-else class="inline-flex items-center gap-1 text-[11px] font-semibold text-red-400">
@@ -172,7 +172,7 @@ const getMeta = (page, key) => {
               </td>
               <td class="px-6 py-4 text-right">
                 <NuxtLink :to="`${basePath}/editor/${page.id}`"
-                  class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-mgray-100 text-mgray-600 hover:bg-primary hover:text-white transition-all">
+                  class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-gray-100 text-gray-600 hover:bg-[#3d35ff] hover:text-white transition-all">
                   Éditer
                 </NuxtLink>
               </td>

package/dist/runtime/pages/admin/setup.vue

@@ -62,7 +62,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
       <div v-else class="space-y-6">
 
         <!-- ── AI Context ───────────────────────────────────────────────── -->
-        <div class="bg-background border border-slate-200 rounded-2xl p-8">
+        <div class="bg-white border border-slate-200 rounded-2xl p-8">
           <div class="flex items-center gap-3 mb-2">
             <span class="text-xl">✨</span>
             <h2 class="text-base font-bold text-slate-900">Contexte IA</h2>
@@ -80,7 +80,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
         </div>
 
         <!-- ── Component Defaults ──────────────────────────────────────── -->
-        <div class="bg-background border border-slate-200 rounded-2xl p-8">
+        <div class="bg-white border border-slate-200 rounded-2xl p-8">
           <div class="flex items-center gap-3 mb-2">
             <span class="text-xl">🎨</span>
             <h2 class="text-base font-bold text-slate-900">Préférences des Composants</h2>
@@ -114,7 +114,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
                       @click="setPreset(String(type), 'layout', opt.value)"
                       :class="[
   'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
-  getPreset(String(type), 'layout', conf.defaultProps?.layout) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-background text-slate-600 border-slate-200 hover:border-slate-400'
+  getPreset(String(type), 'layout', conf.defaultProps?.layout) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
 ]"
                     >
                       <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}
@@ -132,7 +132,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
                       @click="setPreset(String(type), 'animation', opt.value)"
                       :class="[
   'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
-  getPreset(String(type), 'animation', conf.defaultProps?.animation) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-background text-slate-600 border-slate-200 hover:border-slate-400'
+  getPreset(String(type), 'animation', conf.defaultProps?.animation) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
 ]"
                     >
                       <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}
@@ -151,7 +151,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
                         @click="setPreset(String(type), 'radius', opt.value)"
                         :class="[
   'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
-  getPreset(String(type), 'radius', conf.defaultProps?.radius) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-background text-slate-600 border-slate-200 hover:border-slate-400'
+  getPreset(String(type), 'radius', conf.defaultProps?.radius) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
 ]"
                       >
                         <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}
@@ -168,7 +168,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
                         @click="setPreset(String(type), 'spacing', opt.value)"
                         :class="[
   'px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all',
-  getPreset(String(type), 'spacing', conf.defaultProps?.spacing) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-background text-slate-600 border-slate-200 hover:border-slate-400'
+  getPreset(String(type), 'spacing', conf.defaultProps?.spacing) === opt.value ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'
 ]"
                       >
                         <span v-if="opt.icon" class="mr-1">{{ opt.icon }}</span>{{ opt.label }}

package/dist/runtime/pages/admin/strategies/[id].vue

@@ -86,7 +86,7 @@ const contentStatusClass = {
 
       <div v-else-if="strategy">
         <!-- Header -->
-        <div class="bg-background rounded-3xl p-8 border border-slate-200 shadow-sm mb-6">
+        <div class="bg-white rounded-3xl p-8 border border-slate-200 shadow-sm mb-6">
           <div class="flex items-start justify-between">
             <div class="flex-1">
               <div class="flex items-center gap-3 mb-2">
@@ -116,7 +116,7 @@ const contentStatusClass = {
         </div>
 
         <!-- Edit Form -->
-        <div v-if="editMode" class="bg-background rounded-3xl p-8 border border-slate-200 shadow-sm mb-6">
+        <div v-if="editMode" class="bg-white rounded-3xl p-8 border border-slate-200 shadow-sm mb-6">
           <div class="grid grid-cols-2 gap-6 mb-6">
             <div>
               <label class="block text-xs font-black uppercase text-slate-500 mb-2">Nom</label>
@@ -148,7 +148,7 @@ const contentStatusClass = {
         </div>
 
         <!-- Tabs -->
-        <div class="flex gap-2 bg-background p-2 rounded-2xl border border-slate-200 shadow-sm mb-6 inline-flex">
+        <div class="flex gap-2 bg-white p-2 rounded-2xl border border-slate-200 shadow-sm mb-6 inline-flex">
           <button v-for="tab in [{ v: 'overview', l: 'Apercu' }, { v: 'contents', l: 'Contenus' }, { v: 'personas', l: 'Personas' }]" :key="tab.v"
                   @click="activeTab = tab.v"
                   :class="[activeTab === tab.v ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-600 hover:bg-slate-50']"
@@ -157,11 +157,11 @@ const contentStatusClass = {
 
         <!-- Overview Tab -->
         <div v-if="activeTab === 'overview'" class="grid grid-cols-2 gap-6">
-          <div class="bg-background rounded-2xl p-6 border border-slate-200 shadow-sm">
+          <div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
             <h3 class="font-black text-slate-900 mb-4 flex items-center gap-2"><Icon name="mdi:target" class="text-blue-600" /> Objectif</h3>
             <p class="text-slate-600 leading-relaxed">{{ strategy.objective || "Non defini." }}</p>
           </div>
-          <div class="bg-background rounded-2xl p-6 border border-slate-200 shadow-sm">
+          <div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
             <h3 class="font-black text-slate-900 mb-4">Statistiques</h3>
             <div class="space-y-3">
               <div class="flex justify-between items-center">
@@ -182,7 +182,7 @@ const contentStatusClass = {
 
         <!-- Contents Tab -->
         <div v-if="activeTab === 'contents'" class="space-y-4">
-          <div class="bg-background rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+          <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
             <div class="p-6 border-b border-slate-100">
               <h3 class="font-black text-slate-900">Contenus de la Strategie</h3>
             </div>
@@ -206,7 +206,7 @@ const contentStatusClass = {
 
         <!-- Personas Tab -->
         <div v-if="activeTab === 'personas'" class="space-y-4">
-          <div class="bg-background rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+          <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
             <div class="p-6 border-b border-slate-100">
               <h3 class="font-black text-slate-900">Personas Cibles</h3>
             </div>

package/dist/runtime/pages/admin/strategies/index.vue

@@ -105,7 +105,7 @@ const handleDelete = async () => {
       </div>
 
       <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
-        <div v-for="stat in stats" :key="stat.label" class="bg-background p-6 rounded-[2rem] border border-slate-100 shadow-sm">
+        <div v-for="stat in stats" :key="stat.label" class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
           <div :class="[stat.bg, 'w-10 h-10 rounded-xl flex items-center justify-center mb-4']">
             <Icon :name="stat.icon" :class="[stat.color, 'text-xl']" />
           </div>
@@ -115,7 +115,7 @@ const handleDelete = async () => {
       </div>
 
       <div class="space-y-6">
-        <div v-for="strategy in strategies" :key="strategy.id" class="bg-background rounded-[2rem] border border-slate-200 shadow-sm overflow-hidden hover:shadow-xl transition-all">
+        <div v-for="strategy in strategies" :key="strategy.id" class="bg-white rounded-[2rem] border border-slate-200 shadow-sm overflow-hidden hover:shadow-xl transition-all">
           <div class="p-6 border-b border-slate-100">
             <div class="flex items-start justify-between mb-4">
               <div class="flex-1">
@@ -145,18 +145,18 @@ const handleDelete = async () => {
             </div>
           </div>
           <div class="grid grid-cols-2 gap-px bg-slate-100">
-            <div class="bg-background p-4 text-center">
+            <div class="bg-white p-4 text-center">
               <p class="text-lg font-bold text-blue-600">{{ strategyContents[strategy.id]?.length || 0 }}</p>
               <p class="text-xs font-medium text-slate-400">Contenus</p>
             </div>
-            <div class="bg-background p-4 text-center">
+            <div class="bg-white p-4 text-center">
               <p class="text-lg font-bold text-blue-600">{{ strategyPersonas[strategy.id]?.length || 0 }}</p>
               <p class="text-xs font-medium text-slate-400">Personas</p>
             </div>
           </div>
         </div>
 
-        <div v-if="!loading && strategies.length === 0" class="text-center py-20 bg-background rounded-3xl border border-slate-200">
+        <div v-if="!loading && strategies.length === 0" class="text-center py-20 bg-white rounded-3xl border border-slate-200">
           <Icon name="mdi:strategy" class="text-6xl text-slate-200 mb-4" />
           <p class="text-slate-400 font-medium mb-4">Aucune strategie. Creez-en une pour commencer!</p>
           <button @click="openCreate" class="px-6 py-3 bg-blue-600 text-white rounded-xl font-bold">Creer ma premiere strategie</button>
@@ -166,10 +166,10 @@ const handleDelete = async () => {
 
     <Teleport to="body">
       <div v-if="showModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-md z-50 flex items-center justify-center p-6" @click.self="closeModal">
-        <div class="bg-background rounded-[3rem] max-w-3xl w-full max-h-[90vh] overflow-hidden shadow-2xl">
+        <div class="bg-white rounded-[3rem] max-w-3xl w-full max-h-[90vh] overflow-hidden shadow-2xl">
           <div class="bg-blue-600 p-8 text-white flex justify-between items-center">
             <h2 class="text-2xl font-bold">{{ editingStrategy ? "Modifier Strategie" : "Nouvelle Strategie" }}</h2>
-            <button @click="closeModal" class="w-12 h-12 bg-background/10 hover:bg-background/20 rounded-2xl flex items-center justify-center">
+            <button @click="closeModal" class="w-12 h-12 bg-white/10 hover:bg-white/20 rounded-2xl flex items-center justify-center">
               <Icon name="mdi:close" class="text-2xl" />
             </button>
           </div>

package/dist/runtime/pages/admin/todos.vue

@@ -66,8 +66,8 @@ const formatDueDate = (d) => {
 };
 const getPriorityBorder = (priority, overdue) => {
   if (overdue) return "border-l-red-600 bg-red-50";
-  if (priority === "Haute") return "border-l-red-500 bg-background";
-  if (priority === "Moyenne") return "border-l-amber-500 bg-background";
+  if (priority === "Haute") return "border-l-red-500 bg-white";
+  if (priority === "Moyenne") return "border-l-amber-500 bg-white";
   return "border-l-slate-400 bg-slate-50";
 };
 const getLabelColor = (label) => {
@@ -143,7 +143,7 @@ const handleDelete = async (todo) => {
       </div>
 
       <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
-        <div v-for="stat in stats" :key="stat.label" class="bg-background rounded-2xl p-6 border border-slate-100 shadow-sm">
+        <div v-for="stat in stats" :key="stat.label" class="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm">
           <div :class="[stat.bg, 'w-10 h-10 rounded-xl flex items-center justify-center mb-4']">
             <Icon :name="stat.icon" :class="[stat.color, 'text-xl']" />
           </div>
@@ -167,7 +167,7 @@ const handleDelete = async (todo) => {
             <div v-for="todo in group" :key="todo.id"
                  :class="['rounded-xl p-3 shadow-sm hover:shadow-md transition-all group border-l-4', getPriorityBorder(todo.priority, isOverdue(todo))]">
               <div class="flex items-center gap-3">
-                <button @click="toggleTodo(todo)" :class="['w-5 h-5 rounded-lg border-2 transition-all flex-shrink-0', todo.completed ? 'bg-emerald-500 border-emerald-500' : 'bg-background border-slate-200']">
+                <button @click="toggleTodo(todo)" :class="['w-5 h-5 rounded-lg border-2 transition-all flex-shrink-0', todo.completed ? 'bg-emerald-500 border-emerald-500' : 'bg-white border-slate-200']">
                   <Icon v-if="todo.completed" name="mdi:check-bold" class="text-white text-xs m-auto" />
                 </button>
                 <div class="flex-1 min-w-0">
@@ -197,7 +197,7 @@ const handleDelete = async (todo) => {
           <div class="space-y-2">
             <div v-for="todo in todosWithoutDate" :key="todo.id" class="bg-slate-50 rounded-xl p-3 shadow-sm hover:shadow-md transition-all group border-l-4 border-l-slate-300">
               <div class="flex items-center gap-3">
-                <button @click="toggleTodo(todo)" :class="['w-5 h-5 rounded-lg border-2 transition-all flex-shrink-0', todo.completed ? 'bg-emerald-500 border-emerald-500' : 'bg-background border-slate-200']">
+                <button @click="toggleTodo(todo)" :class="['w-5 h-5 rounded-lg border-2 transition-all flex-shrink-0', todo.completed ? 'bg-emerald-500 border-emerald-500' : 'bg-white border-slate-200']">
                   <Icon v-if="todo.completed" name="mdi:check-bold" class="text-white text-xs m-auto" />
                 </button>
                 <div class="flex-1 min-w-0">
@@ -213,7 +213,7 @@ const handleDelete = async (todo) => {
           </div>
         </div>
 
-        <div v-if="todos.length === 0" class="text-center py-20 bg-background rounded-3xl border-2 border-dashed border-slate-200">
+        <div v-if="todos.length === 0" class="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-slate-200">
           <Icon name="mdi:clipboard-text-outline" class="text-6xl text-slate-200 mb-4" />
           <p class="text-xl font-bold text-slate-800">Aucun todo pour le moment</p>
           <button @click="openCreate" class="text-blue-600 font-black hover:underline mt-2">+ Creer votre premiere tache</button>
@@ -223,7 +223,7 @@ const handleDelete = async (todo) => {
 
     <Teleport to="body">
       <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-md">
-        <div class="bg-background rounded-[2rem] w-full max-w-lg overflow-hidden shadow-2xl">
+        <div class="bg-white rounded-[2rem] w-full max-w-lg overflow-hidden shadow-2xl">
           <div class="p-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
             <h2 class="text-xl font-black text-slate-900">{{ editingTodo ? "Modifier" : "Nouveau Todo" }}</h2>
             <button @click="closeModal" class="text-slate-400 hover:text-slate-600"><Icon name="mdi:close" class="text-xl" /></button>
@@ -237,7 +237,7 @@ const handleDelete = async (todo) => {
             </div>
             <div class="grid grid-cols-3 gap-1.5 p-1 bg-slate-100 rounded-xl">
               <button v-for="p in ['Basse', 'Moyenne', 'Haute']" :key="p" @click="formData.priority = p"
-                      :class="formData.priority === p ? 'bg-background shadow-sm text-slate-900' : 'text-slate-400'"
+                      :class="formData.priority === p ? 'bg-white shadow-sm text-slate-900' : 'text-slate-400'"
                       class="py-2 rounded-lg font-black text-[10px] uppercase transition-all">{{ p }}</button>
             </div>
             <button @click="saveTodo" :disabled="saving" class="w-full bg-slate-900 text-white font-black py-3 rounded-xl hover:bg-slate-800 transition-all text-sm">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",