From 4b1340f1606d40c20ddaef978fa6f1367cbc9a5e Mon Sep 17 00:00:00 2001
From: Jules <transformationsresilientes@gmail.com>
Date: Fri, 25 Sep 2026 12:03:16 +0200
Subject: [PATCH] =?UTF-8?q?feat(b3):=20M1=20=E2=80=94=20Chip.vue=20par=20d?=
 =?UTF-8?q?imension=20(=C3=A9chelle=20outline,=20fonction=20pleine,=20post?=
 =?UTF-8?q?ure=20safran)=20+=20filtres=20/=20et=20/agences?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- components/Chip.vue (nouveau) : label/variant(echelle|fonction|posture)/
  active/count/as(button|span)/removable, emits toggle+remove, aria-pressed
  natif sur as=button, croix "Retirer {label}" accessible. Styles 100% tokens
  DS (--primary/--on-primary/--bg-alt/--accent/--on-accent/--focus-ring/
  --dur-fast), hover translateY, focus-visible outline var(--focus-ring),
  transition coupée sous prefers-reduced-motion. Taille compacte 32px de haut
  mesurée (tap ok).
- components/ChipGroup.vue (nouveau) : role="group" + aria-label + flex-wrap
  gap — garantit le wrap propre exigé (jamais une ligne à virgules).
- EchelleFilter.vue, FonctionFilter.vue : rendu remplacé par Chip/ChipGroup,
  props modelValue/counts et événement update:modelValue strictement
  inchangés (NavSidebar.vue n'a rien à changer côté logique). FonctionFilter
  passe le rang de sélection (comme avant) via le prop count de Chip.
- HashtagFilter.vue : seule la liste HASHTAGS (togglable, grammaire fonction)
  passe en Chip/ChipGroup. Les chips FAMILLES gardent leur rendu et leurs
  couleurs propres par famille (hors grammaire échelle/fonction/posture,
  hors périmètre B3 — les changer aurait été une refonte, pas un branchement).
- pages/agences.vue : hashtags par structure (liste sidebar) en
  Chip as="span" variant="fonction" (non cliquables avant, le restent).
- pages/index.vue : la sheet mobile ne passe PAS par NavSidebar/EchelleFilter/
  FonctionFilter — elle a son propre bloc de chips dupliqué (découvert en
  testant le mobile, absent du périmètre écrit du brief). Direction du parti
  design ("chips codées par dimension", mobile-first explicite) : convertie
  en Chip/ChipGroup elle aussi, mêmes handlers toggleEchelle/toggleFonction
  inchangés. Effet de bord positif : le nombre par fonction (déjà calculé,
  jamais affiché sur mobile) apparaît désormais aussi en mobile, à parité
  avec le desktop.
- components/TagBadge.vue supprimé : son seul consommateur, OrgCard.vue,
  n'est importé nulle part dans l'app (grep vérifié) — code mort. OrgCard.vue
  supprimé avec lui plutôt que laissé avec une référence à un composant
  disparu.
- components/TypeBadge.vue : conservé tel quel — ce n'est pas un filtre, et
  sa grammaire couleur par type (7 couleurs Tailwind fixes) est orthogonale
  à échelle/fonction/posture ; le convertir en Chip aurait perdu l'info de
  type ou inventé une 4e variante non validée.

Vérifié : npm run build OK. Chips wrap avec gap en clair/sombre/mobile
(390px, hauteur mesurée 32px). Dark mode : contraste texte/fond conforme
(safran = texte sombre, jamais blanc).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 components/Chip.vue           | 170 ++++++++++++++++++++++++++++++++++
 components/ChipGroup.vue      |  19 ++++
 components/EchelleFilter.vue  |  39 ++------
 components/FonctionFilter.vue |  33 ++-----
 components/HashtagFilter.vue  |  20 ++--
 components/OrgCard.vue        |  45 ---------
 components/TagBadge.vue       |  11 ---
 pages/agences.vue             |  13 +--
 pages/index.vue               |  40 ++++----
 9 files changed, 242 insertions(+), 148 deletions(-)
 create mode 100644 components/Chip.vue
 create mode 100644 components/ChipGroup.vue
 delete mode 100644 components/OrgCard.vue
 delete mode 100644 components/TagBadge.vue

diff --git a/components/Chip.vue b/components/Chip.vue
new file mode 100644
index 0000000..8fec213
--- /dev/null
+++ b/components/Chip.vue
@@ -0,0 +1,170 @@
+<template>
+  <component
+    :is="as"
+    :type="as === 'button' ? 'button' : undefined"
+    class="chip"
+    :class="[`chip--${variant}`, { 'chip--active': active }]"
+    :aria-pressed="as === 'button' ? active : undefined"
+    @click="as === 'button' && emit('toggle')"
+  >
+    <span class="chip__label">{{ label }}</span>
+    <span v-if="count !== undefined" class="chip__count">{{ count }}</span>
+    <button
+      v-if="removable"
+      type="button"
+      class="chip__remove"
+      :aria-label="`Retirer ${label}`"
+      @click.stop="emit('remove')"
+    >
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  </component>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string
+    variant?: 'echelle' | 'fonction' | 'posture'
+    active?: boolean
+    count?: number
+    as?: 'button' | 'span'
+    removable?: boolean
+  }>(),
+  {
+    variant: 'fonction',
+    active: false,
+    count: undefined,
+    as: 'button',
+    removable: false,
+  }
+)
+
+const emit = defineEmits<{
+  toggle: []
+  remove: []
+}>()
+</script>
+
+<style scoped>
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: var(--space-2xs) var(--space-sm);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-xs);
+  line-height: var(--lh-tight);
+  font-weight: var(--fw-medium);
+  border: 1.5px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+  background: none;
+  transition: background-color var(--dur-fast) var(--ease-out),
+              color var(--dur-fast) var(--ease-out),
+              border-color var(--dur-fast) var(--ease-out),
+              transform var(--dur-fast) var(--ease-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chip {
+    transition: none;
+  }
+}
+
+.chip:hover {
+  transform: translateY(-1px);
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Échelle : outline bleu, fond transparent, actif = plein ────────────── */
+.chip--echelle {
+  border-color: var(--primary);
+  color: var(--text);
+  background: transparent;
+}
+.chip--echelle:hover {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+  color: var(--on-primary);
+}
+.chip--echelle.chip--active {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: var(--on-primary);
+}
+.chip--echelle.chip--active:hover {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+/* ── Fonction/hashtag : pleine bleu, inactif = bg-alt ────────────────────── */
+.chip--fonction {
+  border-color: transparent;
+  background: var(--bg-alt);
+  color: var(--text);
+}
+.chip--fonction:hover {
+  background: var(--primary-hover);
+  color: var(--on-primary);
+}
+.chip--fonction.chip--active {
+  background: var(--primary);
+  color: var(--on-primary);
+}
+.chip--fonction.chip--active:hover {
+  background: var(--primary-hover);
+}
+
+/* ── Posture (préparée pour plus tard) : outline safran ──────────────────── */
+.chip--posture {
+  border-color: var(--accent);
+  color: var(--text);
+  background: transparent;
+}
+.chip--posture:hover {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.chip--posture.chip--active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+
+.chip__count {
+  font-size: 0.85em;
+  opacity: 0.75;
+}
+
+.chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+  border-radius: var(--radius-full);
+}
+.chip__remove:hover {
+  opacity: 1;
+}
+.chip__remove:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+</style>
diff --git a/components/ChipGroup.vue b/components/ChipGroup.vue
new file mode 100644
index 0000000..4c076a6
--- /dev/null
+++ b/components/ChipGroup.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="chip-group" role="group" :aria-label="ariaLabel">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  ariaLabel: string
+}>()
+</script>
+
+<style scoped>
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs) var(--space-xs);
+}
+</style>
diff --git a/components/EchelleFilter.vue b/components/EchelleFilter.vue
index 9f09556..2fc8d16 100644
--- a/components/EchelleFilter.vue
+++ b/components/EchelleFilter.vue
@@ -1,39 +1,16 @@
 <template>
   <div class="space-y-1.5">
     <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Échelle</p>
-    <!-- Inline sur 1 ligne — même pattern que FonctionFilter -->
-    <div class="flex flex-wrap gap-x-4 gap-y-1.5">
-      <label
+    <ChipGroup aria-label="Filtrer par échelle">
+      <Chip
         v-for="option in ECHELLES"
         :key="option"
-        class="flex items-center gap-1.5 cursor-pointer select-none transition-opacity"
-      >
-        <!-- Case carrée -->
-        <span
-          class="flex items-center justify-center shrink-0 transition-all"
-          style="width: 18px; height: 18px; border: 1.5px solid; border-radius: 3px;"
-          :style="isSelected(option)
-            ? 'background: var(--nav-primary); border-color: var(--nav-primary); color: #ffffff;'
-            : 'background: var(--nav-bg-alt); border-color: rgba(26,34,56,0.25); color: transparent;'"
-        >
-          <svg v-if="isSelected(option)" width="11" height="11" viewBox="0 0 12 12" fill="none">
-            <polyline points="2,6 5,9 10,3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </span>
-        <!-- Label -->
-        <span
-          class="text-sm leading-tight"
-          :style="isSelected(option) ? 'color: var(--nav-text); font-weight: 600;' : 'color: var(--nav-text);'"
-        >{{ option }}</span>
-        <!-- Input réel (masqué) -->
-        <input
-          type="checkbox"
-          class="sr-only"
-          :checked="isSelected(option)"
-          @change="toggle(option)"
-        />
-      </label>
-    </div>
+        :label="option"
+        variant="echelle"
+        :active="isSelected(option)"
+        @toggle="toggle(option)"
+      />
+    </ChipGroup>
   </div>
 </template>
 
diff --git a/components/FonctionFilter.vue b/components/FonctionFilter.vue
index fda7c11..f2d240d 100644
--- a/components/FonctionFilter.vue
+++ b/components/FonctionFilter.vue
@@ -1,32 +1,17 @@
 <template>
   <div class="space-y-1.5">
     <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">Fonction</p>
-    <div class="space-y-1">
-      <button
+    <ChipGroup aria-label="Filtrer par fonction">
+      <Chip
         v-for="fn in FONCTIONS"
         :key="fn"
-        @click="toggle(fn)"
-        :aria-pressed="modelValue.includes(fn)"
-        class="flex items-center gap-2.5 w-full rounded px-1 py-0.5 transition-all text-left hover:opacity-80"
-        :style="modelValue.includes(fn) ? 'background: rgba(26,34,56,0.06);' : ''"
-      >
-        <!-- Case : affiche le rang de priorité si actif, sinon le nombre d'orgs -->
-        <span
-          class="flex items-center justify-center shrink-0 text-xs font-bold transition-all"
-          style="width: 24px; height: 24px; border: 1.5px solid; border-radius: 4px;"
-          :style="modelValue.includes(fn)
-            ? 'background: var(--nav-primary); border-color: var(--nav-primary); color: var(--nav-text-on-primary);'
-            : 'background: var(--nav-bg-alt); border-color: var(--nav-bg-alt); color: var(--nav-text-muted);'"
-        >
-          {{ modelValue.includes(fn) ? (modelValue.indexOf(fn) + 1) : (counts[fn] ?? 0) }}
-        </span>
-        <!-- Label -->
-        <span
-          class="text-sm leading-tight"
-          :style="modelValue.includes(fn) ? 'color: var(--nav-text); font-weight: 600;' : 'color: var(--nav-text);'"
-        >{{ fn }}</span>
-      </button>
-    </div>
+        :label="fn"
+        variant="fonction"
+        :active="modelValue.includes(fn)"
+        :count="modelValue.includes(fn) ? (modelValue.indexOf(fn) + 1) : (counts[fn] ?? 0)"
+        @toggle="toggle(fn)"
+      />
+    </ChipGroup>
     <p v-if="modelValue.length" class="text-xs pt-0.5" style="color: var(--nav-text-muted);">
       {{ modelValue.length }} actif{{ modelValue.length > 1 ? 's' : '' }}
       <button @click="emit('update:modelValue', [])" class="ml-2 underline hover:opacity-70">Effacer</button>
diff --git a/components/HashtagFilter.vue b/components/HashtagFilter.vue
index 467d29b..2d4a430 100644
--- a/components/HashtagFilter.vue
+++ b/components/HashtagFilter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="hashtag-filter" style="padding: 8px 12px; background: var(--nav-surface);">
-    <!-- Filtres famille -->
+    <!-- Filtres famille — couleurs propres par famille (hors grammaire dimension Chip, non touché B3-M1) -->
     <div style="margin-bottom: 6px;">
       <span class="filter-label">FAMILLES</span>
       <div class="chips-row">
@@ -25,17 +25,16 @@
           style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
         >{{ hashtagsVisible ? 'Replier' : 'Afficher (' + props.allHashtags.length + ')' }}</button>
       </div>
-      <div v-if="hashtagsVisible" class="chips-row">
-        <span
+      <ChipGroup v-if="hashtagsVisible" aria-label="Filtrer par hashtag">
+        <Chip
           v-for="tag in props.allHashtags"
           :key="tag"
-          class="chip chip-small"
-          :style="selectedHashtags.includes(tag)
-            ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
-            : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
-          @click="toggleHashtag(tag)"
-        >{{ tag }}</span>
-      </div>
+          :label="tag"
+          variant="fonction"
+          :active="selectedHashtags.includes(tag)"
+          @toggle="toggleHashtag(tag)"
+        />
+      </ChipGroup>
     </div>
   </div>
 </template>
@@ -93,5 +92,4 @@ function toggleHashtag(tag: string) {
   transition: all 0.15s;
   user-select: none;
 }
-.chip-small { font-size: 0.7rem; padding: 2px 8px; }
 </style>
diff --git a/components/OrgCard.vue b/components/OrgCard.vue
deleted file mode 100644
index 4d3c160..0000000
--- a/components/OrgCard.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <NuxtLink
-    :to="`/fiche/${org.Id}`"
-    class="block bg-white rounded-xl shadow-sm border border-warm-200 hover:shadow-md hover:border-sage-300 transition-all duration-200 p-5"
-  >
-    <div class="flex items-start justify-between gap-3 mb-2">
-      <h2 class="font-semibold text-gray-900 text-base leading-snug">{{ org.nom }}</h2>
-      <TypeBadge v-if="org.type_org" :type="org.type_org" class="shrink-0 mt-0.5" />
-    </div>
-
-    <p class="text-gray-600 text-sm leading-relaxed mb-3 line-clamp-2">
-      {{ org.description }}
-    </p>
-
-    <div v-if="tags.length" class="flex flex-wrap gap-1.5">
-      <TagBadge
-        v-for="tag in tags"
-        :key="tag"
-        :tag="tag"
-        @click="$emit('filter-tag', tag)"
-      />
-    </div>
-  </NuxtLink>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  org: {
-    Id: number
-    nom: string
-    type_org?: string
-    description?: string
-    tags?: string
-    lien?: string
-  }
-}>()
-
-defineEmits<{ 'filter-tag': [tag: string] }>()
-
-const tags = computed(() =>
-  props.org.tags
-    ? props.org.tags.split(',').map((t) => t.trim()).filter(Boolean)
-    : []
-)
-</script>
diff --git a/components/TagBadge.vue b/components/TagBadge.vue
deleted file mode 100644
index 59bb305..0000000
--- a/components/TagBadge.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <span
-    class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-sage-100 text-sage-700 border border-sage-200 cursor-pointer hover:bg-sage-200 transition-colors"
-    @click.prevent="$emit('click', tag)"
-  >{{ tag }}</span>
-</template>
-
-<script setup lang="ts">
-defineProps<{ tag: string }>()
-defineEmits<{ click: [tag: string] }>()
-</script>
diff --git a/pages/agences.vue b/pages/agences.vue
index c2f1dfb..e4728e0 100644
--- a/pages/agences.vue
+++ b/pages/agences.vue
@@ -87,14 +87,15 @@
             />
           </div>
           <div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} - {{ structure.ville }}</div>
-          <div v-if="structure.hashtags.length" class="mt-1 flex flex-wrap gap-1">
-            <span
+          <ChipGroup v-if="structure.hashtags.length" class="mt-1" :aria-label="`Hashtags de ${structure.nom}`">
+            <Chip
               v-for="tag in structure.hashtags.slice(0, 2)"
               :key="tag"
-              class="text-xs"
-              style="color: var(--nav-text-muted);"
-            >{{ tag }}</span>
-          </div>
+              as="span"
+              variant="fonction"
+              :label="tag"
+            />
+          </ChipGroup>
         </div>
       </div>
 
diff --git a/pages/index.vue b/pages/index.vue
index 93a8767..be813e5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -185,36 +185,36 @@
                 </button>
               </label>
 
-              <!-- Filtres ÉCHELLE — chips style FONCTION -->
+              <!-- Filtres ÉCHELLE — Chip variant echelle (B3-M1 : alignées sur EchelleFilter.vue,
+                   dupliquées ici car la sheet mobile ne passe pas par NavSidebar) -->
               <div class="mt-2">
                 <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">ÉCHELLE</span>
-                <div class="flex flex-wrap gap-1">
-                  <span
+                <ChipGroup aria-label="Filtrer par échelle">
+                  <Chip
                     v-for="opt in ECHELLES"
                     :key="opt"
-                    class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
-                    :style="echelle.includes(opt)
-                      ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
-                      : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
-                    @click="toggleEchelle(opt)"
-                  >{{ opt }}</span>
-                </div>
+                    :label="opt"
+                    variant="echelle"
+                    :active="echelle.includes(opt)"
+                    @toggle="toggleEchelle(opt)"
+                  />
+                </ChipGroup>
               </div>
 
-              <!-- Filtres FONCTION — chips flex-wrap -->
+              <!-- Filtres FONCTION — Chip variant fonction (B3-M1, idem) -->
               <div class="mt-2">
                 <span class="text-xs font-bold uppercase tracking-wide block mb-1" style="color: var(--nav-text-muted);">FONCTION</span>
-                <div class="flex flex-wrap gap-1">
-                  <span
+                <ChipGroup aria-label="Filtrer par fonction">
+                  <Chip
                     v-for="fn in FONCTIONS"
                     :key="fn"
-                    class="cursor-pointer px-2 py-0.5 rounded-full text-xs transition-all"
-                    :style="fonctions.includes(fn)
-                      ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
-                      : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
-                    @click="toggleFonction(fn)"
-                  >{{ fn }}</span>
-                </div>
+                    :label="fn"
+                    variant="fonction"
+                    :active="fonctions.includes(fn)"
+                    :count="fonctions.includes(fn) ? (fonctions.indexOf(fn) + 1) : (fonctionCount[fn] ?? 0)"
+                    @toggle="toggleFonction(fn)"
+                  />
+                </ChipGroup>
               </div>
 
               <button