feat(media): rename /pensees-ecologiques → /media + corpus réel + 12 écoles FRACAS Bonpote

- Page pages/pensees-ecologiques.vue → pages/media.vue (titre "ATIS Média")
- Labels onglet/menu "Pensées" → "Média" (app.vue, agences, index, filters)
- auteurs-pensees.json reconciled avec 141 docs LightRAG (était 27)
  · 28 auteurs (était 18), 64 livres, slugs corrigés (ex: bookchin-ecologie-liberte)
  · 12 écoles: 8 familles FRACAS Bonpote + 4 extensions ATIS
  · Labels alignés Bonpote: Écologies libertaires (ex eco-anarchisme),
    Écologies anti-industrielles (ex technocritique)
  · Familles Bonpote ajoutées: Capitalisme vert + Écofascismes
    (corpus_status: non_ingere — fidélité carte, critique éditoriale assumée)

V2 Phase 2.3 — corpus réel reflété, alignement Bonpote initial

components/EchelleFilter.vue

@@ -1,38 +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
+  <div class="space-y-1">
+    <p class="filter-label">ÉCHELLE</p>
+    <div class="chips-row">
+      <span
         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>
+        class="chip"
+        :style="isSelected(option)
+          ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
+          : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
+        @click="toggle(option)"
+      >{{ option }}</span>
     </div>
   </div>
 </template>
@@ -61,3 +39,24 @@ function toggle(option: string) {
   }
 }
 </script>
+
+<style scoped>
+.filter-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--nav-text-muted);
+  display: block;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
+.chip {
+  cursor: pointer;
+  padding: 3px 10px;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  transition: all 0.15s;
+  user-select: none;
+}
+</style>