feat(pratiques): types, API statique, composants filtres + cartes Europe/outremer

components/PaysFilter.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <!-- Groupe Europe -->
+    <span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">PAYS — EUROPE</span>
+    <div class="flex flex-wrap gap-1 mb-2">
+      <button
+        v-for="code in EUROPE_CODES"
+        :key="code"
+        type="button"
+        class="px-2 py-0.5 rounded-full text-xs transition-all"
+        :style="modelValue.includes(code)
+          ? '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(code)"
+      >
+        {{ PAYS_LABELS[code] ?? code }}
+        <span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
+      </button>
+    </div>
+
+    <!-- Groupe Outre-mer -->
+    <span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">OUTRE-MER</span>
+    <div class="flex flex-wrap gap-1">
+      <button
+        v-for="code in OUTREMER_CODES"
+        :key="code"
+        type="button"
+        class="px-2 py-0.5 rounded-full text-xs transition-all"
+        :style="modelValue.includes(code)
+          ? '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(code)"
+      >
+        {{ PAYS_LABELS[code] ?? code }}
+        <span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EUROPE_CODES, OUTREMER_CODES, PAYS_LABELS } from '~/types/pratique'
+
+const props = defineProps<{
+  modelValue: string[]
+  counts?: Record<string, number>
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+function toggle(code: string) {
+  if (props.modelValue.includes(code)) {
+    emit('update:modelValue', props.modelValue.filter(v => v !== code))
+  } else {
+    emit('update:modelValue', [...props.modelValue, code])
+  }
+}
+</script>