fix: readonly component style + TabList + required component (#61)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #61
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/tab/tabList.vue

@@ -36,6 +36,36 @@
         <template #details><p class="p-4">Détails avancés</p></template>
       </MalioTabList>
     </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-1 text-xl font-bold">Beaucoup d'onglets (fenêtré)</h2>
+      <p class="mb-4 text-sm text-m-muted">
+        7 onglets avec <code>:max-visible-tabs="5"</code> — flèches gauche/droite pour faire défiler
+        (1 par 1). L'onglet actif reste sélectionné même hors fenêtre.
+      </p>
+      <MalioTabList v-model="manyValue" :tabs="manyTabs" :max-visible-tabs="5">
+        <template #infos><p class="p-4">Contenu Informations</p></template>
+        <template #adresses><p class="p-4">Contenu Adresses</p></template>
+        <template #contacts><p class="p-4">Contenu Contacts</p></template>
+        <template #compta><p class="p-4">Contenu Comptabilité</p></template>
+        <template #documents><p class="p-4">Contenu Documents</p></template>
+        <template #historique><p class="p-4">Contenu Historique</p></template>
+        <template #parametres><p class="p-4">Contenu Paramètres</p></template>
+      </MalioTabList>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-1 text-xl font-bold">Peu d'onglets avec maxVisibleTabs</h2>
+      <p class="mb-4 text-sm text-m-muted">
+        3 onglets avec <code>:max-visible-tabs="5"</code> — le fenêtrage ne s'active pas
+        (onglets ≤ max), donc pas de flèches, affichage normal centré.
+      </p>
+      <MalioTabList v-model="fewValue" :tabs="fewTabs" :max-visible-tabs="5">
+        <template #general><p class="p-4">Contenu Général</p></template>
+        <template #adresses><p class="p-4">Contenu Adresses</p></template>
+        <template #contacts><p class="p-4">Contenu Contacts</p></template>
+      </MalioTabList>
+    </div>
   </div>
 </template>
 
@@ -60,7 +90,25 @@ const tabsTwo = [
   { key: 'details', label: 'Détails', icon: 'mdi:cog-outline' },
 ]
 
+const manyTabs = [
+  { key: 'infos', label: 'Informations', icon: 'mdi:information-outline' },
+  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
+  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
+  { key: 'compta', label: 'Comptabilité', icon: 'mdi:web' },
+  { key: 'documents', label: 'Documents', icon: 'mdi:file-document-outline' },
+  { key: 'historique', label: 'Historique', icon: 'mdi:history' },
+  { key: 'parametres', label: 'Paramètres', icon: 'mdi:cog-outline' },
+]
+
 const simpleValue = ref('qualimat')
 const noIconValue = ref('tab1')
 const twoTabValue = ref('general')
+const manyValue = ref('infos')
+
+const fewTabs = [
+  { key: 'general', label: 'Général', icon: 'mdi:information-outline' },
+  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
+  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
+]
+const fewValue = ref('general')
 </script>