diff --git a/pages/codev/demo.vue b/pages/codev/demo.vue
index 6cde6d6..5e28bfc 100644
--- a/pages/codev/demo.vue
+++ b/pages/codev/demo.vue
@@ -7,63 +7,82 @@
       <p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
     </header>
 
-    <ClientOnly>
-      <CodevGraph
-        :fiches="fiches"
-        :matches="matches"
-        :mode="mode"
-      />
-      <template #fallback>
-        <div class="graph-fallback">Chargement du graphe...</div>
-      </template>
-    </ClientOnly>
-
-    <!-- Bandeau info mode actif -->
-    <div v-if="mode !== 'none'" class="mode-banner">
-      <span>
-        Mode {{ MODE_LABELS[mode] }} actif -
-        {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
-      </span>
-      <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
+    <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>
 
-    <!-- 3 boutons matching identiques a carto.vue -->
-    <div class="matching-controls">
-      <button
-        :class="{ active: mode === 'solution' }"
-        style="--mode-color: #22c55e"
-        @click="setMode('solution')"
-        type="button"
-      >
-        Solution
-        <span class="hint">besoin - offre</span>
-      </button>
-      <button
-        :class="{ active: mode === 'alliance' }"
-        style="--mode-color: #f97316"
-        @click="setMode('alliance')"
-        type="button"
-      >
-        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"
-        @click="setMode('none')"
-        type="button"
-      >
-        Effacer
-      </button>
+    <div v-if="tab === 'carto'">
+      <ClientOnly>
+        <CodevGraph
+          :fiches="fiches"
+          :matches="matches"
+          :mode="mode"
+        />
+        <template #fallback>
+          <div class="graph-fallback">Chargement du graphe...</div>
+        </template>
+      </ClientOnly>
+
+      <!-- Bandeau info mode actif -->
+      <div v-if="mode !== 'none'" class="mode-banner">
+        <span>
+          Mode {{ MODE_LABELS[mode] }} actif -
+          {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
+        </span>
+        <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
+      </div>
+
+      <!-- Boutons matching -->
+      <div class="matching-controls">
+        <button
+          :class="{ active: mode === 'solution' }"
+          style="--mode-color: #22c55e"
+          @click="setMode('solution')"
+          type="button"
+        >
+          Solution
+          <span class="hint">besoin - offre</span>
+        </button>
+        <button
+          :class="{ active: mode === 'alliance' }"
+          style="--mode-color: #f97316"
+          @click="setMode('alliance')"
+          type="button"
+        >
+          Alliance
+          <span class="hint">besoins partages</span>
+        </button>
+        <button
+          v-if="mode !== 'none'"
+          class="reset"
+          @click="setMode('none')"
+          type="button"
+        >
+          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>
@@ -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) :