feat(codev): tabs Besoins/Competences + retour fiche + panel mobile bottom sheet

pages/codev/carto.vue

@@ -11,6 +11,13 @@
       </p>
     </header>
 
+    <div class="codev-tabs">
+      <button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
+      <button :class="{ active: tab === 'besoins' }" @click="tab = 'besoins'" type="button">Besoins</button>
+      <button :class="{ active: tab === 'competences' }" @click="tab = 'competences'" type="button">Compétences</button>
+    </div>
+
+    <div v-if="tab === 'carto'">
       <div class="show-labels-bar">
         <button
           type="button"
@@ -45,15 +52,6 @@
 
       <!-- 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"
@@ -81,12 +79,53 @@
           Effacer
         </button>
       </div>
+    </div>
+
+    <div v-else-if="tab === 'besoins'" class="list-view">
+      <div v-for="f in fiches" :key="f.id" class="list-card">
+        <div class="list-card-name">{{ f.nom }}</div>
+        <p class="list-card-text">{{ f.besoin }}</p>
+        <NuxtLink :to="`/codev/fiche?id=${f.id}`" class="list-card-link">Modifier</NuxtLink>
+      </div>
+      <div v-if="fiches.length === 0" class="list-empty">Aucune fiche. <NuxtLink to="/codev/fiche">Ajouter la mienne</NuxtLink></div>
+    </div>
+
+    <div v-else-if="tab === 'competences'" class="list-view">
+      <div v-for="f in fiches" :key="f.id" class="list-card">
+        <div class="list-card-name">{{ f.nom }}</div>
+        <p class="list-card-text">{{ f.offre }}</p>
+        <NuxtLink :to="`/codev/fiche?id=${f.id}`" class="list-card-link">Modifier</NuxtLink>
+      </div>
+      <div v-if="fiches.length === 0" class="list-empty">Aucune fiche. <NuxtLink to="/codev/fiche">Ajouter la mienne</NuxtLink></div>
+    </div>
 
     <!-- FAB ajouter une fiche -->
     <NuxtLink to="/codev/fiche" class="fab-add" title="Ajouter ma fiche" aria-label="Ajouter une fiche">
       +
     </NuxtLink>
 
+    <Transition name="sheet">
+      <div v-if="selectedFiche" class="bottom-sheet" @click.self="selectedFiche = null">
+        <div class="sheet-content">
+          <div class="sheet-handle"></div>
+          <div class="sheet-name">{{ selectedFiche.nom }}</div>
+          <div class="sheet-section">
+            <span class="sheet-label">Besoin</span>
+            <p class="sheet-text">{{ selectedFiche.besoin }}</p>
+          </div>
+          <div class="sheet-section">
+            <span class="sheet-label">Ce que j'apporte</span>
+            <p class="sheet-text">{{ selectedFiche.offre }}</p>
+          </div>
+          <div class="sheet-tags" v-if="selectedFiche.hashtags.length">
+            <span v-for="t in selectedFiche.hashtags" :key="t" class="sheet-tag">#{{ t }}</span>
+          </div>
+          <NuxtLink :to="`/codev/fiche?id=${selectedFiche.id}`" class="sheet-edit-btn">Modifier cette fiche</NuxtLink>
+          <button class="sheet-close" @click="selectedFiche = null" type="button">Fermer</button>
+        </div>
+      </div>
+    </Transition>
+
   </div>
 </template>
 
@@ -102,6 +141,9 @@ const fiches = computed(() => data.value?.list ?? [])
 const matches = ref<CodevMatch[]>([])
 const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
 const showLabels = ref(false)
+const tab = ref<'carto' | 'besoins' | 'competences'>('carto')
+const selectedFiche = ref<CodevFiche | null>(null)
+const isMobileView = typeof window !== 'undefined' ? window.innerWidth < 600 : false
 
 const MODE_LABELS: Record<string, string> = {
   solution: 'Solution',
@@ -119,8 +161,12 @@ function setMode(newMode: 'none' | 'solution' | 'alliance' | 'surprise') {
 }
 
 function onSelectFiche(id: number) {
+  if (isMobileView) {
+    selectedFiche.value = fiches.value.find(f => f.id === id) ?? null
+  } else {
     navigateTo(`/codev/fiche?id=${id}`)
   }
+}
 </script>
 
 <style scoped>
@@ -326,6 +372,37 @@ function onSelectFiche(id: number) {
   opacity: 0.92;
 }
 
+/* ── Tabs ── */
+
+.codev-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
+.codev-tabs button { flex: 1; padding: 8px 4px; border: none; border-radius: 7px; background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: #6b7280; transition: all 0.15s; }
+.codev-tabs button.active { background: white; color: #1a1a2e; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+
+/* ── List view ── */
+
+.list-view { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
+.list-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
+.list-card-name { font-weight: 700; font-size: 0.95rem; color: #1a1a2e; }
+.list-card-text { font-size: 0.875rem; color: #4b5563; margin: 0; line-height: 1.5; }
+.list-card-link { font-size: 0.8rem; color: #1B4436; text-decoration: none; align-self: flex-end; }
+.list-empty { text-align: center; color: #6b7280; font-size: 0.9rem; }
+
+/* ── Bottom sheet ── */
+
+.bottom-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: flex-end; }
+.sheet-content { background: white; border-radius: 16px 16px 0 0; padding: 16px 20px 32px; width: 100%; display: flex; flex-direction: column; gap: 12px; max-height: 80vh; overflow-y: auto; }
+.sheet-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; align-self: center; margin-bottom: 4px; }
+.sheet-name { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
+.sheet-section { display: flex; flex-direction: column; gap: 4px; }
+.sheet-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
+.sheet-text { font-size: 0.9rem; color: #374151; margin: 0; line-height: 1.5; }
+.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.sheet-tag { font-size: 0.75rem; background: #f3f4f6; color: #374151; padding: 2px 8px; border-radius: 12px; }
+.sheet-edit-btn { display: block; text-align: center; background: #1B4436; color: white; border-radius: 8px; padding: 12px; text-decoration: none; font-weight: 600; }
+.sheet-close { background: transparent; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; color: #6b7280; cursor: pointer; font-size: 0.875rem; }
+.sheet-enter-active, .sheet-leave-active { transition: opacity 0.2s; }
+.sheet-enter-from, .sheet-leave-to { opacity: 0; }
+
 /* ── Mobile ── */
 
 @media (max-width: 600px) {

pages/codev/fiche.vue

@@ -4,6 +4,7 @@
 
       <!-- En-tête -->
       <div class="fiche-header">
+        <NuxtLink to="/codev/carto" class="back-link">← Retour à la carte</NuxtLink>
         <h1>{{ isEdit ? 'Modifier ma fiche' : 'Ma fiche' }}</h1>
         <p class="fiche-lead">3 lignes pour te présenter. Le reste se passe entre nous.</p>
       </div>
@@ -193,6 +194,18 @@ async function submit() {
 
 /* ── En-tête ── */
 
+.back-link {
+  display: inline-block;
+  font-size: 0.875rem;
+  color: var(--nav-text-muted, #6b7280);
+  text-decoration: none;
+  margin-bottom: 0.75rem;
+}
+
+.back-link:hover {
+  color: var(--nav-primary-solid, #1B4436);
+}
+
 .fiche-header h1 {
   font-size: 1.5rem;
   font-weight: 700;