fix(codev): boundaries D3 + matching rebuildLinks + couleurs + bulles toggle + FAB +

pages/codev/carto.vue

@@ -11,11 +11,22 @@
       </p>
     </header>
 
+    <div class="show-labels-bar">
+      <button
+        type="button"
+        :class="{ active: showLabels }"
+        @click="showLabels = !showLabels"
+      >
+        {{ showLabels ? 'Masquer besoins/offres' : 'Montrer besoins/offres' }}
+      </button>
+    </div>
+
     <ClientOnly>
       <CodevGraph
         :fiches="fiches"
         :matches="matches"
         :mode="mode"
+        :show-labels="showLabels"
         @select-fiche="onSelectFiche"
       />
       <template #fallback>
@@ -71,6 +82,11 @@
       </button>
     </div>
 
+    <!-- FAB ajouter une fiche -->
+    <NuxtLink to="/codev/fiche" class="fab-add" title="Ajouter ma fiche" aria-label="Ajouter une fiche">
+      +
+    </NuxtLink>
+
   </div>
 </template>
 
@@ -85,6 +101,7 @@ const fiches = computed(() => data.value?.list ?? [])
 
 const matches = ref<CodevMatch[]>([])
 const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
+const showLabels = ref(false)
 
 const MODE_LABELS: Record<string, string> = {
   solution: 'Solution',
@@ -256,6 +273,59 @@ function onSelectFiche(id: number) {
   }
 }
 
+/* ── Toggle besoins/offres ── */
+
+.show-labels-bar {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.show-labels-bar button {
+  border: 1px solid #d0d4dc;
+  border-radius: 8px;
+  padding: 8px 16px;
+  background: white;
+  font-size: 13px;
+  cursor: pointer;
+  color: #374151;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.show-labels-bar button.active {
+  background: #1B4436;
+  color: white;
+  border-color: transparent;
+}
+
+/* ── FAB ajouter ── */
+
+.fab-add {
+  position: fixed;
+  bottom: 80px;
+  right: 16px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #1B4436;
+  color: white;
+  font-size: 28px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+  z-index: 100;
+  transition: transform 0.15s, opacity 0.15s;
+  line-height: 1;
+}
+
+.fab-add:hover {
+  transform: scale(1.08);
+  opacity: 0.92;
+}
+
 /* ── Mobile ── */
 
 @media (max-width: 600px) {