feat(b3): M4 — favicon maillage, Manifeste dans le header, hashtags repliés, DESIGN-SYSTEM.md

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

components/FichesPanel.vue

@@ -18,13 +18,20 @@
 
       <ChipGroup v-if="hashtags.length" aria-label="Filtrer les fiches" class="fiches-panel__chips">
         <Chip
-          v-for="tag in hashtags"
+          v-for="tag in visibleHashtags"
           :key="tag"
           :label="tag"
           variant="fonction"
           :active="selected.includes(tag)"
           @toggle="toggle(tag)"
         />
+        <Chip
+          v-if="isCollapsible"
+          :label="expanded ? 'Réduire' : `Voir les ${hiddenCount} autres`"
+          variant="echelle"
+          :active="expanded"
+          @toggle="expanded = !expanded"
+        />
       </ChipGroup>
     </div>
 
@@ -61,6 +68,28 @@ const emit = defineEmits<{
   open: [fiche: MiniFiche]
 }>()
 
+// Hashtags repliés (B3-M4) — au-delà de COLLAPSE_THRESHOLD chips, n'affiche
+// que les premières + un Chip-bouton « voir les N autres ». Les chips déjà
+// actives restent toujours visibles même repliées. `/` (10 fonctions) ne
+// dépasse jamais le seuil ; `/agences` (~60 hashtags) se replie. État
+// déplié non persistant (ref locale, reset à chaque montage du composant).
+const COLLAPSE_THRESHOLD = 14
+const expanded = ref(false)
+
+const isCollapsible = computed(() => props.hashtags.length > COLLAPSE_THRESHOLD)
+
+const visibleHashtags = computed(() => {
+  if (expanded.value || !isCollapsible.value) return props.hashtags
+  const head = props.hashtags.slice(0, COLLAPSE_THRESHOLD)
+  const headSet = new Set(head)
+  const activeOutsideHead = props.hashtags.filter(
+    (tag) => props.selected.includes(tag) && !headSet.has(tag)
+  )
+  return [...head, ...activeOutsideHead]
+})
+
+const hiddenCount = computed(() => props.hashtags.length - visibleHashtags.value.length)
+
 function toggle(tag: string) {
   if (props.selected.includes(tag)) {
     emit('update:selected', props.selected.filter((t) => t !== tag))