feat(codev): demo - tabs Carto/Annuaire + Solution+Alliance sans Surprise

pages/codev/demo.vue

@@ -7,6 +7,12 @@
       <p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
     </header>
 
+    <div class="codev-tabs">
+      <button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
+      <button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
+    </div>
+
+    <div v-if="tab === 'carto'">
       <ClientOnly>
         <CodevGraph
           :fiches="fiches"
@@ -27,7 +33,7 @@
         <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
       </div>
 
-    <!-- 3 boutons matching identiques a carto.vue -->
+      <!-- Boutons matching -->
       <div class="matching-controls">
         <button
           :class="{ active: mode === 'solution' }"
@@ -47,15 +53,6 @@
           Alliance
           <span class="hint">besoins partages</span>
         </button>
-      <button
-        :class="{ active: mode === 'surprise' }"
-        style="--mode-color: #3b82f6"
-        @click="setMode('surprise')"
-        type="button"
-      >
-        Surprise
-        <span class="hint">offres partagees</span>
-      </button>
         <button
           v-if="mode !== 'none'"
           class="reset"
@@ -65,6 +62,28 @@
           Effacer
         </button>
       </div>
+    </div>
+
+    <div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
+      <div class="annuaire-scroll">
+        <table class="annuaire-table">
+          <thead>
+            <tr>
+              <th class="col-nom">Prénom</th>
+              <th class="col-besoin">Besoin</th>
+              <th class="col-offre">Ce que j'offre</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="f in fiches" :key="f.id" class="annuaire-row">
+              <td class="col-nom">{{ f.nom }}</td>
+              <td class="col-besoin">{{ f.besoin }}</td>
+              <td class="col-offre">{{ f.offre }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
 
   </div>
 </template>
@@ -73,6 +92,8 @@
 import type { CodevFiche, CodevMatch } from '~/types/codev'
 import { computeMatches } from '~/utils/codev/matching'
 
+const tab = ref<'carto' | 'annuaire'>('carto')
+
 // 10 fiches sans hashtags — textes enrichis pour que scoreDirect discrimine bien les 3 modes :
 //
 // Solution (scoreDirect besoinA vs offreB) :