feat(ui) : replace div-inputs with plain text in entity detail pages read mode

frontend/app/pages/piece/[id].vue

@@ -50,27 +50,40 @@
                 <span class="label-text">Catégorie de pièce</span>
               </label>
               <template v-if="isEditMode">
-                <select
-                  v-model="selectedTypeId"
-                  class="select select-bordered select-sm md:select-md"
-                  disabled
-                >
-                  <option value="">Sélectionner une catégorie</option>
-                  <option
-                    v-for="type in pieceTypeList"
-                    :key="type.id"
-                    :value="type.id"
+                <div class="flex items-center gap-2">
+                  <select
+                    v-model="selectedTypeId"
+                    class="select select-bordered select-sm md:select-md flex-1"
+                    disabled
                   >
-                    {{ type.name }}
-                  </option>
-                </select>
+                    <option value="">Sélectionner une catégorie</option>
+                    <option
+                      v-for="type in pieceTypeList"
+                      :key="type.id"
+                      :value="type.id"
+                    >
+                      {{ type.name }}
+                    </option>
+                  </select>
+                  <NuxtLink
+                    v-if="selectedTypeId"
+                    :to="`/piece-category/${selectedTypeId}/edit`"
+                    class="btn btn-ghost btn-sm"
+                    title="Voir la catégorie"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                      <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                    </svg>
+                  </NuxtLink>
+                </div>
                 <p class="text-xs text-base-content/60 mt-1">
                   La catégorie d'origine ne peut pas être modifiée depuis cette page.
                 </p>
               </template>
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ selectedType?.name || '—' }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -89,9 +102,9 @@
                 placeholder="Nom affiché dans le catalogue"
                 required
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ piece.name }}
-              </div>
+              </p>
             </div>
           </div>
 
@@ -118,10 +131,10 @@
             <label class="label">
               <span class="label-text">Référence auto</span>
             </label>
-            <div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
+            <p class="text-sm font-medium text-base-content py-1 flex items-center gap-2">
               <span class="font-mono font-semibold">{{ piece.referenceAuto }}</span>
               <span class="badge badge-sm badge-ghost">auto</span>
-            </div>
+            </p>
           </div>
 
           <!-- Référence + Fournisseurs (if value or edit mode) -->
@@ -141,9 +154,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Référence interne ou fournisseur"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ piece.reference }}
-              </div>
+              </p>
             </div>
 
             <div v-if="isEditMode || constructeurLinks.length" class="form-control">
@@ -188,9 +201,9 @@
                 :disabled="!canEdit || saving"
                 placeholder="Valeur indicatrice"
               >
-              <div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
+              <p v-else class="text-sm font-medium text-base-content py-1">
                 {{ piece.prix }} €
-              </div>
+              </p>
             </div>
           </div>
 
@@ -246,7 +259,7 @@
                 <label class="label">
                   <span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': !productSelectionLabels[index] }">{{ entry.label }}</span>
                 </label>
-                <div class="input input-bordered input-sm md:input-md flex items-center" :class="productSelectionLabels[index] ? 'bg-base-200' : 'border-error bg-error/10 text-error font-semibold'">
+                <div class="text-sm font-medium py-1 px-2 rounded" :class="productSelectionLabels[index] ? 'text-base-content' : 'border border-error bg-error/10 text-error font-semibold'">
                   <template v-if="!productSelectionLabels[index]">{{ entry.label }} — manquant</template>
                   <template v-else>{{ productSelectionLabels[index] }}</template>
                 </div>
@@ -284,9 +297,9 @@
                   <label class="label">
                     <span class="label-text text-sm">{{ field.name }}</span>
                   </label>
-                  <div class="input input-bordered input-sm bg-base-200 flex items-center">
+                  <p class="text-sm font-medium text-base-content py-1">
                     {{ field.value }}
-                  </div>
+                  </p>
                 </div>
               </div>
             </template>