feat(select) : tags SelectCheckbox restylés + props maxTags et color (MUI-49) (#89)

## MUI-49 — Revoir le style des tags dans le multi-select

### Style des tags
- Fond `m-bg`, **sans bordure**, padding `2px / 8px`
- Texte **18px / weight 500 / line-height normal**
- Correction du rognage des jambages (`g` de « Belgique ») sans agrandir le tag

### Nouvelles props
- `maxTags` (`number`, défaut `0`) : limite le nombre de tags affichés ; au-delà un tag **`+N`** résume le surplus. `0` = tous les tags.
- Champ `color?` par option : couleur de fond du tag (sinon `m-bg`).

### Divers
- 5 nouveaux tests (maxTags, badge +N, color, fallback m-bg)
- Playground : exemples « max tags (3) » et « couleurs »
- `COMPONENTS.md` et `CHANGELOG.md` mis à jour

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #89
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/select/selectCheckbox.vue

@@ -17,6 +17,27 @@
         empty-option-label=" "
       />
       </div>
+      <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag + max tags (3)</h2>
+      <MalioSelectCheckbox
+        v-model="maxTagsValue"
+        :options="options"
+        :display-tag="true"
+        :max-tags="3"
+        label="Pays"
+        empty-option-label=" "
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec tag + couleurs</h2>
+      <MalioSelectCheckbox
+        v-model="colorValue"
+        :options="colorOptions"
+        :display-tag="true"
+        label="Pays"
+        empty-option-label=" "
+      />
+    </div>
       <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec tag + label</h2>
       <MalioSelectCheckbox
@@ -185,6 +206,15 @@ const options = [
   {label: 'Portugal', value: 'pt'},
 ]
 
+const colorOptions = [
+  {label: 'France', value: 'fr', color: '#fde2e2'},
+  {label: 'Belgique', value: 'be', color: '#fff3cd'},
+  {label: 'Suisse', value: 'ch', color: '#d1e7dd'},
+  {label: 'Canada', value: 'ca', color: '#cfe2ff'},
+  {label: 'Allemagne', value: 'de'},
+  {label: 'Espagne', value: 'es', color: '#e2d9f3'},
+]
+
 const longOptions = [
   ...options,
   {label: 'Pays-Bas', value: 'nl'},
@@ -203,6 +233,8 @@ const longOptions = [
 const basicValue = ref<Array<string | number>>([])
 const labelValue = ref<Array<string | number>>([])
 const labelValue1 = ref<Array<string | number>>([])
+const maxTagsValue = ref<Array<string | number>>(['fr', 'be', 'ch', 'ca', 'de'])
+const colorValue = ref<Array<string | number>>(['fr', 'be', 'de'])
 const selectedValue = ref<Array<string | number>>(['fr'])
 const hintValue = ref<Array<string | number>>([])
 const errorValue = ref<Array<string | number>>([])