feat(ui) : refonte cartes dépliantes structure machine + DataTable parc machines + fix activity-log

- Parc Machines transformé en DataTable avec filtres (site, date création, recherche)
- Vue d'ensemble : ajout filtre par plage de dates de création
- Activity-log : correction des liens entités (routes singulier sans /edit, ajout machine/document/model_type)
- ComponentItem & PieceItem : refonte complète des cartes dépliantes (design industriel raffiné)
  - Header compact avec tags colorés contrastés (référence, réf. auto, prix, produit, champs machine)
  - Panneau déplié structuré en sections avec mini-headers
  - Bordure gauche primary pour hiérarchie visuelle
- Ajout referenceAuto dans header et infos pour composants et pièces
- Suppression double encadrement ComponentHierarchy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/app/components/ComponentHierarchy.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="space-y-4">
+  <div class="space-y-3">
     <!-- Root Components -->
-    <div v-for="component in components" :key="component.id" class="border border-gray-200 rounded-lg p-4">
+    <div v-for="component in components" :key="component.id">
       <ComponentItem
         :component="component"
         :is-edit-mode="isEditMode"

frontend/app/components/ComponentItem.vue

@@ -13,29 +13,42 @@
       @updated="handleDocumentUpdated"
     />
 
-    <!-- Component Header -->
+    <!-- ═══ HEADER BAR ═══ -->
     <div
-      class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-shadow"
+      class="group/header flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer select-none transition-all duration-200"
       :class="[
-        component.pendingEntity ? 'bg-error/10 border border-error' : 'bg-base-200',
-        !isCollapsed ? 'sticky top-16 z-10 shadow-sm' : '',
+        component.pendingEntity
+          ? 'bg-error/10 border border-error/40 hover:border-error/60'
+          : 'bg-base-200/70 border border-base-300/30 hover:border-base-300/60 hover:bg-base-200',
+        !isCollapsed ? 'sticky top-16 z-10 shadow-md ring-1 ring-base-300/20' : 'shadow-sm',
       ]"
       @click="toggleCollapse"
     >
-      <IconLucideChevronRight
-        class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
-        :class="{ 'rotate-90': !isCollapsed }"
-        aria-hidden="true"
-      />
-      <div class="flex-1 min-w-0">
+      <!-- Chevron -->
+      <div
+        class="w-6 h-6 rounded-md grid place-items-center shrink-0 transition-all duration-200"
+        :class="isCollapsed ? 'bg-base-300/40' : 'bg-primary/15'"
+      >
+        <IconLucideChevronRight
+          class="w-3.5 h-3.5 transition-transform duration-200"
+          :class="[
+            isCollapsed ? 'text-base-content/40' : 'rotate-90 text-primary',
+          ]"
+          aria-hidden="true"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0 space-y-1.5">
+        <!-- Row 1: Name + identifiers -->
         <div class="flex items-center gap-2 flex-wrap">
-          <h3 class="text-sm font-semibold truncate" :class="component.pendingEntity ? 'text-error' : 'text-base-content'">
+          <h3 class="text-sm font-bold tracking-tight truncate" :class="component.pendingEntity ? 'text-error' : 'text-base-content'">
             <NuxtLink
               v-if="!isEditMode && !component.pendingEntity && component.composantId"
               :to="machineId
                 ? { path: `/component/${component.composantId}`, query: { from: 'machine', machineId } }
                 : `/component/${component.composantId}`"
-              class="hover:underline hover:text-primary transition-colors"
+              class="hover:text-primary transition-colors"
               @click.stop
             >
               {{ component.name }}
@@ -51,232 +64,282 @@
           >
             À remplir
           </button>
-          <span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
-          <span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
+          <span v-if="component.reference" class="text-[0.65rem] font-mono text-base-content/70 bg-base-300/50 px-1.5 py-0.5 rounded border border-base-300/40">{{ component.reference }}</span>
+          <span v-if="component.referenceAuto" class="text-[0.65rem] font-mono font-semibold text-secondary bg-secondary/20 px-1.5 py-0.5 rounded border border-secondary/30" title="Référence auto">{{ component.referenceAuto }}</span>
+          <span v-if="component.prix" class="text-[0.65rem] font-bold text-primary bg-primary/20 px-1.5 py-0.5 rounded border border-primary/30">{{ component.prix }}€</span>
         </div>
-        <div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
+
+        <!-- Row 2: Metadata tags -->
+        <div
+          v-if="componentConstructeursDisplay.length || displayProductName || (!isEditMode && visibleContextFieldTags.length)"
+          class="flex flex-wrap items-center gap-1.5"
+        >
           <span
             v-for="constructeur in componentConstructeursDisplay"
             :key="constructeur.id"
-            class="text-xs text-base-content/50"
+            class="text-[0.65rem] text-base-content/45"
           >
             {{ constructeur.name }}
-            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-70">({{ supplierReferenceMap.get(constructeur.id) }})</span>
+            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-60">({{ supplierReferenceMap.get(constructeur.id) }})</span>
           </span>
-          <span v-if="displayProductName" class="badge badge-info badge-xs">
+          <span v-if="displayProductName" class="text-[0.65rem] font-semibold text-info bg-info/20 px-1.5 py-0.5 rounded border border-info/30">
             {{ displayProductName }}
           </span>
+          <!-- Context field tags (consultation only) -->
+          <template v-if="!isEditMode">
+            <span
+              v-for="field in visibleContextFieldTags"
+              :key="field.name"
+              class="text-[0.65rem] font-semibold px-1.5 py-0.5 rounded"
+              :class="contextFieldBadgeClass(field)"
+            >
+              {{ field.name }} : {{ field.value }}
+            </span>
+          </template>
         </div>
       </div>
+
+      <!-- Delete button -->
       <button
         v-if="showDelete"
         type="button"
-        class="btn btn-ghost btn-xs text-error shrink-0"
+        class="btn btn-ghost btn-xs btn-circle text-error opacity-0 group-hover/header:opacity-100 transition-opacity shrink-0"
         title="Supprimer ce composant"
         @click.stop="$emit('delete')"
       >
-        Supprimer
+        <IconLucideTrash2 class="w-3.5 h-3.5" aria-hidden="true" />
       </button>
     </div>
 
-    <!-- Expanded content -->
-    <div v-show="!isCollapsed && !component.pendingEntity" class="mt-3 space-y-4 pl-7">
-      <!-- Info fields -->
-      <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
-          <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+    <!-- ═══ EXPANDED PANEL ═══ -->
+    <div v-show="!isCollapsed && !component.pendingEntity" class="ml-[1.125rem] border-l-2 border-primary/30 pl-5 pt-3 pb-1 space-y-3">
+
+      <!-- ── Section: Informations ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Informations</p>
         </div>
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
-          <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+        <div class="p-4">
+          <!-- Edit mode -->
+          <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Nom</span></label>
+              <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Référence</span></label>
+              <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Prix</span></label>
+              <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Fournisseur</span></label>
+              <ConstructeurSelect
+                class="w-full"
+                :model-value="componentConstructeurIds"
+                :initial-options="componentConstructeursDisplay"
+                @update:model-value="handleConstructeurChange"
+              />
+            </div>
+          </div>
+          <!-- Read-only mode -->
+          <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Nom</p>
+              <p class="text-sm text-base-content font-medium">{{ component.name }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Référence</p>
+              <p class="text-sm text-base-content" :class="component.reference ? 'font-mono' : 'text-base-content/30'">{{ component.reference || '—' }}</p>
+            </div>
+            <div v-if="component.referenceAuto">
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Réf. auto</p>
+              <p class="text-sm text-base-content font-mono">{{ component.referenceAuto }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Prix</p>
+              <p class="text-sm" :class="component.prix ? 'text-base-content font-semibold' : 'text-base-content/30'">{{ component.prix ? `${component.prix} €` : '—' }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Fournisseur</p>
+              <div v-if="componentConstructeursDisplay.length" class="space-y-1">
+                <p
+                  v-for="constructeur in componentConstructeursDisplay"
+                  :key="constructeur.id"
+                  class="text-sm text-base-content"
+                >
+                  {{ constructeur.name }}
+                  <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs text-base-content/50">
+                    — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+                  </span>
+                  <span v-if="formatConstructeurContact(constructeur)" class="text-[0.65rem] text-base-content/40 block">
+                    {{ formatConstructeurContact(constructeur) }}
+                  </span>
+                </p>
+              </div>
+              <p v-else class="text-sm text-base-content/30">—</p>
+            </div>
+          </div>
         </div>
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
-          <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
+      </div>
+
+      <!-- ── Section: Produit catalogue ── -->
+      <div v-if="displayProduct" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-info/10 border-b border-info/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-info">Produit catalogue</p>
         </div>
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
-          <ConstructeurSelect
-            class="w-full"
-            :model-value="componentConstructeurIds"
-            :initial-options="componentConstructeursDisplay"
-            @update:model-value="handleConstructeurChange"
+        <div class="p-4">
+          <div class="flex items-start justify-between gap-3">
+            <div class="space-y-1.5">
+              <p class="text-sm font-bold text-base-content">{{ displayProductName }}</p>
+              <div class="flex flex-wrap gap-x-4 gap-y-1">
+                <p
+                  v-for="info in productInfoRows"
+                  :key="info.label"
+                  class="text-xs text-base-content/55"
+                >
+                  <span class="font-semibold">{{ info.label }}</span> : {{ info.value }}
+                </p>
+              </div>
+            </div>
+            <NuxtLink
+              v-if="component.product?.id"
+              :to="`/product/${component.product.id}`"
+              class="btn btn-ghost btn-xs shrink-0 gap-1"
+            >
+              <IconLucideExternalLink class="w-3 h-3" aria-hidden="true" />
+              Voir
+            </NuxtLink>
+          </div>
+          <!-- Product documents -->
+          <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200/50 space-y-2">
+            <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/35">Documents du produit</p>
+            <div
+              v-for="document in productDocuments"
+              :key="document.id || document.path || document.name"
+              class="flex items-center justify-between gap-3 text-xs"
+            >
+              <div class="flex items-center gap-2 min-w-0">
+                <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
+                  <img
+                    v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+                    :src="document.fileUrl || document.path"
+                    class="h-full w-full object-cover"
+                    :alt="`Aperçu de ${document.name}`"
+                  >
+                  <iframe
+                    v-else-if="shouldInlinePdf(document)"
+                    :src="documentPreviewSrc(document)"
+                    class="h-full w-full border-0 bg-white"
+                    title="Aperçu PDF"
+                  />
+                  <component
+                    v-else
+                    :is="documentIcon(document).component"
+                    class="h-4 w-4"
+                    :class="documentIcon(document).colorClass"
+                    aria-hidden="true"
+                  />
+                </div>
+                <span class="truncate text-base-content">{{ document.name }}</span>
+              </div>
+              <div class="flex items-center gap-1 shrink-0">
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs"
+                  :disabled="!canPreviewDocument(document)"
+                  @click="openPreview(document)"
+                >
+                  Consulter
+                </button>
+                <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                  Télécharger
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── Section: Champs personnalisés ── -->
+      <div v-if="displayedCustomFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Champs personnalisés item</p>
+        </div>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="displayedCustomFields"
+            :is-edit-mode="isEditMode"
+            :columns="2"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="false"
+            @field-blur="updateComponentCustomField"
           />
         </div>
       </div>
 
-      <!-- Read-only info -->
-      <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Nom</p>
-          <p class="text-base-content">{{ component.name }}</p>
+      <div v-if="mergedContextFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-secondary/10 border-b border-secondary/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-secondary">Champs personnalisés machine</p>
         </div>
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Référence</p>
-          <p class="text-base-content">{{ component.reference || '—' }}</p>
-        </div>
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Prix</p>
-          <p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
-        </div>
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
-          <div v-if="componentConstructeursDisplay.length">
-            <p
-              v-for="constructeur in componentConstructeursDisplay"
-              :key="constructeur.id"
-              class="text-base-content"
-            >
-              {{ constructeur.name }}
-              <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm text-base-content/60">
-                — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
-              </span>
-              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
-                {{ formatConstructeurContact(constructeur) }}
-              </span>
-            </p>
-          </div>
-          <p v-else class="text-base-content">—</p>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="mergedContextFields"
+            :is-edit-mode="isEditMode"
+            :columns="2"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="true"
+            :emit-blur="false"
+            @field-input="queueContextCustomFieldUpdate"
+          />
         </div>
       </div>
 
-      <!-- Product -->
-      <div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
-        <div class="flex items-start justify-between gap-3">
-          <div class="space-y-1">
-            <p class="text-xs text-base-content/40">Produit catalogue</p>
-            <p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
-            <p
-              v-for="info in productInfoRows"
-              :key="info.label"
-              class="text-xs text-base-content/60"
-            >
-              {{ info.label }} : {{ info.value }}
-            </p>
-          </div>
-          <NuxtLink
-            v-if="component.product?.id"
-            :to="`/product/${component.product.id}`"
-            class="btn btn-ghost btn-xs shrink-0"
-          >
-            Voir le produit
-          </NuxtLink>
-        </div>
-        <!-- Product documents -->
-        <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
-          <p class="text-xs font-medium text-base-content/50">Documents du produit</p>
-          <div
-            v-for="document in productDocuments"
-            :key="document.id || document.path || document.name"
-            class="flex items-center justify-between gap-3 text-xs"
-          >
-            <div class="flex items-center gap-2 min-w-0">
-              <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
-                <img
-                  v-if="isImageDocument(document) && (document.fileUrl || document.path)"
-                  :src="document.fileUrl || document.path"
-                  class="h-full w-full object-cover"
-                  :alt="`Aperçu de ${document.name}`"
-                >
-                <iframe
-                  v-else-if="shouldInlinePdf(document)"
-                  :src="documentPreviewSrc(document)"
-                  class="h-full w-full border-0 bg-white"
-                  title="Aperçu PDF"
-                />
-                <component
-                  v-else
-                  :is="documentIcon(document).component"
-                  class="h-4 w-4"
-                  :class="documentIcon(document).colorClass"
-                  aria-hidden="true"
-                />
-              </div>
-              <span class="truncate text-base-content">{{ document.name }}</span>
-            </div>
-            <div class="flex items-center gap-1 shrink-0">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs"
-                :disabled="!canPreviewDocument(document)"
-                @click="openPreview(document)"
-              >
-                Consulter
-              </button>
-              <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                Télécharger
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Custom Fields -->
-      <CustomFieldDisplay
-        :fields="displayedCustomFields"
-        :is-edit-mode="isEditMode"
-        :columns="2"
-        title="Champs personnalisés item"
-        :editable="false"
-        @field-blur="updateComponentCustomField"
-      />
-
-      <template v-if="mergedContextFields.length">
-        <div class="divider my-4 text-xs text-base-content/50">
-          Champs personnalisés machine
-        </div>
-        <CustomFieldDisplay
-          :fields="mergedContextFields"
-          :is-edit-mode="isEditMode"
-          :columns="2"
-          :show-header="false"
-          :with-top-border="false"
-          :editable="true"
-          :emit-blur="false"
-          @field-input="queueContextCustomFieldUpdate"
-        />
-      </template>
-
-      <!-- Documents -->
-      <div class="space-y-2">
-        <div class="flex items-center justify-between">
-          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
+      <!-- ── Section: Documents ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50 flex items-center justify-between">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Documents</p>
           <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
             {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
           </span>
         </div>
+        <div class="p-4 space-y-3">
+          <p v-if="loadingDocuments" class="text-xs text-base-content/50">Chargement...</p>
 
-        <p v-if="loadingDocuments" class="text-xs text-base-content/50">
-          Chargement...
-        </p>
+          <DocumentUpload
+            v-if="isEditMode"
+            v-model="selectedFiles"
+            title="Déposer des fichiers pour ce composant"
+            subtitle="Formats acceptés : PDF, images, documents..."
+            @files-added="handleFilesAdded"
+          />
 
-        <DocumentUpload
-          v-if="isEditMode"
-          v-model="selectedFiles"
-          title="Déposer des fichiers pour ce composant"
-          subtitle="Formats acceptés : PDF, images, documents..."
-          @files-added="handleFilesAdded"
-        />
-
-        <DocumentListInline
-          :documents="componentDocuments"
-          :can-delete="isEditMode"
-          :can-edit="isEditMode"
-          :delete-disabled="uploadingDocuments"
-          empty-text="Aucun document lié à ce composant."
-          @preview="openPreview"
-          @edit="openEditModal"
-          @delete="removeDocument"
-        />
+          <DocumentListInline
+            :documents="componentDocuments"
+            :can-delete="isEditMode"
+            :can-edit="isEditMode"
+            :delete-disabled="uploadingDocuments"
+            empty-text="Aucun document lié à ce composant."
+            @preview="openPreview"
+            @edit="openEditModal"
+            @delete="removeDocument"
+          />
+        </div>
       </div>
 
-      <!-- Component Pieces (real MachinePieceLinks) -->
-      <div v-if="linkedPieces.length > 0" class="space-y-2">
-        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
-          Pièces du composant
-        </p>
-        <div class="space-y-2">
+      <!-- ── Section: Pièces du composant ── -->
+      <div v-if="linkedPieces.length > 0" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">
+            Pièces du composant
+            <span class="ml-1 text-base-content/25">({{ linkedPieces.length }})</span>
+          </p>
+        </div>
+        <div class="p-3 space-y-2">
           <PieceItem
             v-for="piece in linkedPieces"
             :key="piece.id"
@@ -290,12 +353,15 @@
         </div>
       </div>
 
-      <!-- Structure pieces (read-only, from composant definition) -->
-      <div v-if="structurePieces.length > 0" class="space-y-2">
-        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
-          Pièces incluses par défaut
-        </p>
-        <div class="space-y-2">
+      <!-- ── Section: Pièces structure ── -->
+      <div v-if="structurePieces.length > 0" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">
+            Pièces incluses par défaut
+            <span class="ml-1 text-base-content/25">({{ structurePieces.length }})</span>
+          </p>
+        </div>
+        <div class="p-3 space-y-2">
           <PieceItem
             v-for="piece in structurePieces"
             :key="piece.id"
@@ -305,12 +371,15 @@
         </div>
       </div>
 
-      <!-- Sub Components -->
-      <div v-if="childComponents.length > 0" class="space-y-2">
-        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
-          Sous-composants
-        </p>
-        <div class="space-y-2 pl-4 border-l-2 border-base-200">
+      <!-- ── Section: Sous-composants ── -->
+      <div v-if="childComponents.length > 0" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">
+            Sous-composants
+            <span class="ml-1 text-base-content/25">({{ childComponents.length }})</span>
+          </p>
+        </div>
+        <div class="p-3 space-y-2">
           <ComponentItem
             v-for="subComponent in childComponents"
             :key="subComponent.id"
@@ -336,6 +405,8 @@ import DocumentUpload from './DocumentUpload.vue'
 import ConstructeurSelect from './ConstructeurSelect.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+import IconLucideExternalLink from '~icons/lucide/external-link'
 import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import {
@@ -461,6 +532,24 @@ const mergedContextFields = computed(() => {
   return mergeDefinitionsWithValues(definitions, values)
 })
 
+// Context fields shown as tags on the header (consultation mode)
+const visibleContextFieldTags = computed(() =>
+  mergedContextFields.value.filter(f => f.value !== null && f.value !== undefined && String(f.value).trim() !== ''),
+)
+
+const CONTEXT_FIELD_COLORS = [
+  'bg-secondary/25 text-secondary border border-secondary/35',
+  'bg-accent/25 text-accent border border-accent/35',
+  'bg-info/25 text-info border border-info/35',
+  'bg-success/25 text-success border border-success/35',
+  'bg-warning/25 text-warning border border-warning/35',
+]
+
+const contextFieldBadgeClass = (field: any) => {
+  const idx = visibleContextFieldTags.value.indexOf(field)
+  return CONTEXT_FIELD_COLORS[idx % CONTEXT_FIELD_COLORS.length]
+}
+
 const queueContextCustomFieldUpdate = (field, value) => {
   const linkId = props.component?.linkId
   if (!linkId || !field) return

frontend/app/components/PieceItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -13,303 +13,333 @@
       @updated="handleDocumentUpdated"
     />
 
-    <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
-    <div class="flex items-start justify-between p-4 rounded-lg" :class="piece._emptySlot || piece.pendingEntity ? 'bg-error/10 border border-error' : 'bg-base-200'">
-      <div class="flex items-start gap-3 flex-1 min-w-0">
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
-          :class="{ 'rotate-90': !isCollapsed }"
-          :aria-expanded="!isCollapsed"
-          :title="isCollapsed ? 'Déplier les détails de la pièce' : 'Replier les détails de la pièce'"
-          @click="toggleCollapse"
-        >
-          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
-          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
-        </button>
-        <div class="flex-1 min-w-0">
-          <h3 class="text-lg font-semibold" :class="{ 'text-error': piece._emptySlot || piece.pendingEntity }">
+    <!-- ═══ HEADER BAR ═══ -->
+    <div
+      class="group/header flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer select-none transition-all duration-200"
+      :class="[
+        piece._emptySlot || piece.pendingEntity
+          ? 'bg-error/10 border border-error/40 hover:border-error/60'
+          : 'bg-base-200/70 border border-base-300/30 hover:border-base-300/60 hover:bg-base-200',
+        !isCollapsed ? 'shadow-md ring-1 ring-base-300/20' : 'shadow-sm',
+      ]"
+      @click="toggleCollapse"
+    >
+      <!-- Chevron -->
+      <div
+        class="w-6 h-6 rounded-md grid place-items-center shrink-0 transition-all duration-200"
+        :class="isCollapsed ? 'bg-base-300/40' : 'bg-primary/15'"
+      >
+        <IconLucideChevronRight
+          class="w-3.5 h-3.5 transition-transform duration-200"
+          :class="[
+            isCollapsed ? 'text-base-content/40' : 'rotate-90 text-primary',
+          ]"
+          aria-hidden="true"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0 space-y-1.5">
+        <!-- Row 1: Name + identifiers -->
+        <div class="flex items-center gap-2 flex-wrap">
+          <h3 class="text-sm font-bold tracking-tight truncate" :class="{ 'text-error': piece._emptySlot || piece.pendingEntity }">
             <NuxtLink
               v-if="!isEditMode && !piece.pendingEntity && !piece._emptySlot && piece.pieceId"
               :to="machineId
                 ? { path: `/piece/${piece.pieceId}`, query: { from: 'machine', machineId } }
                 : `/piece/${piece.pieceId}`"
-              class="hover:underline hover:text-primary transition-colors"
+              class="hover:text-primary transition-colors"
               @click.stop
             >
               {{ pieceData.name }}
             </NuxtLink>
             <template v-else>{{ pieceData.name }}</template>
-            <span v-if="piece._emptySlot" class="text-sm font-semibold text-error ml-1">— manquant</span>
-            <button
-              v-if="piece.pendingEntity"
-              type="button"
-              class="badge badge-error badge-sm cursor-pointer hover:badge-outline transition-colors ml-1"
-              title="Cliquer pour associer un item"
-              @click.stop="$emit('fill-entity', piece.linkId, piece.modelTypeId)"
-            >
-              À remplir
-            </button>
-            <span
-              v-if="displayQuantity > 1"
-              class="text-sm font-normal text-base-content/60 ml-1"
-            >
-              ×{{ displayQuantity }}
-            </span>
           </h3>
-          <div class="flex flex-wrap gap-2 mt-2">
-            <span v-if="piece.parentComponentName" class="badge badge-ghost badge-sm">
-              Rattachée à {{ piece.parentComponentName }}
-            </span>
-            <span v-if="pieceData.reference" class="badge badge-outline badge-sm">{{ pieceData.reference }}</span>
-            <span v-if="pieceData.referenceAuto" class="badge badge-secondary badge-sm" title="Référence auto">{{ pieceData.referenceAuto }}</span>
-            <template v-if="pieceConstructeursDisplay.length">
-              <span
-                v-for="constructeur in pieceConstructeursDisplay"
-                :key="constructeur.id"
-                class="badge badge-outline badge-sm"
-              >
-                {{ constructeur.name }}
-                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs opacity-60 ml-0.5">
-                  ({{ supplierReferenceMap.get(constructeur.id) }})
-                </span>
-              </span>
-            </template>
-            <span v-if="pieceData.prix" class="badge badge-primary badge-sm">{{ pieceData.prix }}€</span>
+          <span v-if="piece._emptySlot" class="text-[0.65rem] font-bold text-error bg-error/10 px-1.5 py-0.5 rounded">manquant</span>
+          <button
+            v-if="piece.pendingEntity"
+            type="button"
+            class="badge badge-error badge-sm cursor-pointer hover:badge-outline transition-colors"
+            title="Cliquer pour associer un item"
+            @click.stop="$emit('fill-entity', piece.linkId, piece.modelTypeId)"
+          >
+            À remplir
+          </button>
+          <span v-if="displayQuantity > 1" class="text-[0.65rem] font-bold text-base-content/70 bg-base-300/50 px-1.5 py-0.5 rounded border border-base-300/40">×{{ displayQuantity }}</span>
+          <span v-if="pieceData.reference" class="text-[0.65rem] font-mono text-base-content/70 bg-base-300/50 px-1.5 py-0.5 rounded border border-base-300/40">{{ pieceData.reference }}</span>
+          <span v-if="pieceData.referenceAuto" class="text-[0.65rem] font-mono font-semibold text-secondary bg-secondary/20 px-1.5 py-0.5 rounded border border-secondary/30" title="Référence auto">{{ pieceData.referenceAuto }}</span>
+          <span v-if="pieceData.prix" class="text-[0.65rem] font-bold text-primary bg-primary/20 px-1.5 py-0.5 rounded border border-primary/30">{{ pieceData.prix }}€</span>
+        </div>
+
+        <!-- Row 2: Metadata tags -->
+        <div
+          v-if="piece.parentComponentName || pieceConstructeursDisplay.length || displayProductName || (!isEditMode && visibleContextFieldTags.length)"
+          class="flex flex-wrap items-center gap-1.5"
+        >
+          <span v-if="piece.parentComponentName" class="text-[0.65rem] text-base-content/40 bg-base-300/20 px-1.5 py-0.5 rounded">
+            {{ piece.parentComponentName }}
+          </span>
+          <span
+            v-for="constructeur in pieceConstructeursDisplay"
+            :key="constructeur.id"
+            class="text-[0.65rem] text-base-content/45"
+          >
+            {{ constructeur.name }}
+            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-60">({{ supplierReferenceMap.get(constructeur.id) }})</span>
+          </span>
+          <span v-if="displayProductName" class="text-[0.65rem] font-semibold text-info bg-info/20 px-1.5 py-0.5 rounded border border-info/30">
+            {{ displayProductName }}
+          </span>
+          <!-- Context field tags (consultation only) -->
+          <template v-if="!isEditMode">
             <span
-              v-if="displayProductName"
-              class="badge badge-info badge-sm"
+              v-for="field in visibleContextFieldTags"
+              :key="field.name"
+              class="text-[0.65rem] font-semibold px-1.5 py-0.5 rounded"
+              :class="contextFieldBadgeClass(field)"
             >
-              Produit&nbsp;: {{ displayProductName }}
+              {{ field.name }} : {{ field.value }}
             </span>
-          </div>
+          </template>
         </div>
       </div>
+
+      <!-- Delete button -->
       <button
         v-if="showDelete"
         type="button"
-        class="btn btn-ghost btn-xs text-error shrink-0"
+        class="btn btn-ghost btn-xs btn-circle text-error opacity-0 group-hover/header:opacity-100 transition-opacity shrink-0"
         title="Supprimer cette pièce"
-        @click="$emit('delete')"
+        @click.stop="$emit('delete')"
       >
-        Supprimer
+        <IconLucideTrash2 class="w-3.5 h-3.5" aria-hidden="true" />
       </button>
     </div>
 
-    <div v-show="!isCollapsed && !piece.pendingEntity" class="space-y-4">
-      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
-        <div class="space-y-2 text-sm">
-      <div v-if="isEditMode" class="form-control">
-        <label class="label">
-          <span class="label-text text-sm">Quantité</span>
-        </label>
-        <input
-          v-model.number="pieceData.quantity"
-          type="number"
-          min="1"
-          step="1"
-          class="input input-bordered input-sm md:input-md w-24"
-          @blur="updatePiece"
-        />
-      </div>
-      <div v-else-if="displayQuantity > 1">
-        <span class="font-medium">Quantité:</span>
-        <span class="ml-2">{{ displayQuantity }}</span>
-      </div>
-      <div>
-        <span class="font-medium">Référence:</span>
-        <input
-          v-if="isEditMode"
-          :id="`piece-reference-${piece.id}`"
-          v-model="pieceData.reference"
-          type="text"
-          class="input input-sm input-bordered ml-2"
-          @blur="updatePiece"
-        />
-        <span v-else class="ml-2">{{
-          pieceData.reference || "Non définie"
-        }}</span>
-      </div>
-      <div v-if="pieceData.referenceAuto">
-        <span class="font-medium">Référence auto:</span>
-        <span class="ml-2">{{ pieceData.referenceAuto }}</span>
-      </div>
-      <div>
-        <span class="font-medium">Fournisseur:</span>
-        <div v-if="!isEditMode" class="ml-2">
-          <div v-if="pieceConstructeursDisplay.length" class="space-y-1">
-            <div
-              v-for="constructeur in pieceConstructeursDisplay"
-              :key="constructeur.id"
-              class="flex flex-col"
-            >
-              <span class="font-medium">
-                {{ constructeur.name }}
-                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm font-normal text-base-content/60">
-                  — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
-                </span>
-              </span>
-              <span
-                v-if="formatConstructeurContact(constructeur)"
-                class="text-xs text-base-content/50"
-              >
-                {{ formatConstructeurContact(constructeur) }}
-              </span>
+    <!-- ═══ EXPANDED PANEL ═══ -->
+    <div v-show="!isCollapsed && !piece.pendingEntity" class="ml-[1.125rem] border-l-2 border-primary/30 pl-5 pt-3 pb-1 space-y-3">
+
+      <!-- ── Section: Informations ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Informations</p>
+        </div>
+        <div class="p-4">
+          <!-- Edit mode -->
+          <div v-if="isEditMode" class="space-y-3">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <div class="form-control">
+                <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Quantité</span></label>
+                <input
+                  v-model.number="pieceData.quantity"
+                  type="number"
+                  min="1"
+                  step="1"
+                  class="input input-bordered input-sm w-full"
+                  @blur="updatePiece"
+                />
+              </div>
+              <div class="form-control">
+                <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Référence</span></label>
+                <input
+                  :id="`piece-reference-${piece.id}`"
+                  v-model="pieceData.reference"
+                  type="text"
+                  class="input input-bordered input-sm w-full"
+                  @blur="updatePiece"
+                />
+              </div>
+              <div class="form-control">
+                <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Prix</span></label>
+                <input
+                  :id="`piece-prix-${piece.id}`"
+                  v-model="pieceData.prix"
+                  type="number"
+                  step="0.01"
+                  class="input input-bordered input-sm w-full"
+                  @blur="updatePiece"
+                />
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Fournisseur</span></label>
+              <ConstructeurSelect
+                class="w-full"
+                :model-value="pieceConstructeurIds"
+                :initial-options="pieceConstructeursDisplay"
+                placeholder="Sélectionner un ou plusieurs fournisseurs..."
+                @update:model-value="handleConstructeurChange"
+              />
             </div>
           </div>
-          <span v-else class="font-medium">
-            Non défini
-          </span>
-        </div>
-        <ConstructeurSelect
-          v-else
-          class="w-full"
-          :model-value="pieceConstructeurIds"
-          :initial-options="pieceConstructeursDisplay"
-          placeholder="Sélectionner un ou plusieurs fournisseurs..."
-          @update:model-value="handleConstructeurChange"
-        />
-      </div>
-      <div>
-        <span class="font-medium">Prix:</span>
-        <input
-          v-if="isEditMode"
-          :id="`piece-prix-${piece.id}`"
-          v-model="pieceData.prix"
-          type="number"
-          step="0.01"
-          class="input input-sm input-bordered ml-2"
-          @blur="updatePiece"
-        />
-        <span v-else class="ml-2">{{
-          pieceData.prix ? `${pieceData.prix}€` : "Non défini"
-        }}</span>
-      </div>
-      <div>
-        <span class="font-medium">Produit catalogue:</span>
-        <div v-if="isEditMode" class="mt-2 space-y-2">
-          <ProductSelect
-            :model-value="pieceData.productId"
-            placeholder="Associer un produit…"
-            helper-text="Optionnel : reliez cette pièce à un produit catalogue."
-            @update:modelValue="handleProductChange"
-          />
-          <div
-            v-if="selectedProduct"
-            class="rounded-md border border-base-200 bg-base-100 p-3 text-xs space-y-1"
-          >
-            <p class="text-sm font-semibold text-base-content">
-              {{ selectedProduct.name }}
-            </p>
-            <p
-              v-for="info in productInfoRows"
-              :key="info.label"
-              class="flex flex-wrap gap-1"
-            >
-              <span class="font-semibold">{{ info.label }} :</span>
-              <span>{{ info.value }}</span>
-            </p>
-            <NuxtLink
-              v-if="selectedProduct.id"
-              :to="`/product/${selectedProduct.id}`"
-              class="link link-primary text-xs"
-            >
-              Ouvrir la fiche produit
-            </NuxtLink>
+          <!-- Read-only mode -->
+          <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
+            <div v-if="displayQuantity > 1">
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Quantité</p>
+              <p class="text-sm text-base-content font-medium">{{ displayQuantity }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Référence</p>
+              <p class="text-sm" :class="pieceData.reference ? 'text-base-content font-mono' : 'text-base-content/30'">{{ pieceData.reference || '—' }}</p>
+            </div>
+            <div v-if="pieceData.referenceAuto">
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Réf. auto</p>
+              <p class="text-sm text-base-content font-mono">{{ pieceData.referenceAuto }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Prix</p>
+              <p class="text-sm" :class="pieceData.prix ? 'text-base-content font-semibold' : 'text-base-content/30'">{{ pieceData.prix ? `${pieceData.prix} €` : '—' }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Fournisseur</p>
+              <div v-if="pieceConstructeursDisplay.length" class="space-y-1">
+                <p
+                  v-for="constructeur in pieceConstructeursDisplay"
+                  :key="constructeur.id"
+                  class="text-sm text-base-content"
+                >
+                  {{ constructeur.name }}
+                  <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs text-base-content/50">
+                    — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+                  </span>
+                  <span v-if="formatConstructeurContact(constructeur)" class="text-[0.65rem] text-base-content/40 block">
+                    {{ formatConstructeurContact(constructeur) }}
+                  </span>
+                </p>
+              </div>
+              <p v-else class="text-sm text-base-content/30">—</p>
+            </div>
           </div>
-          <p v-else class="text-xs text-base-content/60">
-            Aucun produit associé.
-          </p>
         </div>
-        <div class="ml-2">
-          <div v-if="displayProduct" class="space-y-1">
-            <p class="font-medium text-base-content">
-              {{ displayProductName || 'Produit catalogue' }}
-            </p>
-            <p
-              v-for="info in productInfoRows"
-              :key="info.label"
-              class="text-xs text-base-content/70"
+      </div>
+
+      <!-- ── Section: Produit catalogue ── -->
+      <div v-if="isEditMode || displayProduct" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-info/10 border-b border-info/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-info">Produit catalogue</p>
+        </div>
+        <div class="p-4">
+          <!-- Edit mode -->
+          <div v-if="isEditMode" class="space-y-3">
+            <ProductSelect
+              :model-value="pieceData.productId"
+              placeholder="Associer un produit…"
+              helper-text="Optionnel : reliez cette pièce à un produit catalogue."
+              @update:modelValue="handleProductChange"
+            />
+            <div
+              v-if="selectedProduct"
+              class="rounded-lg border border-base-200/60 bg-base-200/20 p-3 space-y-1.5"
             >
-              <span class="font-semibold">{{ info.label }} :</span>
-              <span class="ml-1">{{ info.value }}</span>
-            </p>
+              <p class="text-sm font-bold text-base-content">{{ selectedProduct.name }}</p>
+              <div class="flex flex-wrap gap-x-4 gap-y-1">
+                <p v-for="info in productInfoRows" :key="info.label" class="text-xs text-base-content/55">
+                  <span class="font-semibold">{{ info.label }}</span> : {{ info.value }}
+                </p>
+              </div>
+              <NuxtLink v-if="selectedProduct.id" :to="`/product/${selectedProduct.id}`" class="link link-primary text-xs">
+                Ouvrir la fiche produit
+              </NuxtLink>
+            </div>
+          </div>
+          <!-- Read-only mode -->
+          <div v-else-if="displayProduct">
+            <div class="flex items-start justify-between gap-3">
+              <div class="space-y-1.5">
+                <p class="text-sm font-bold text-base-content">{{ displayProductName }}</p>
+                <div class="flex flex-wrap gap-x-4 gap-y-1">
+                  <p v-for="info in productInfoRows" :key="info.label" class="text-xs text-base-content/55">
+                    <span class="font-semibold">{{ info.label }}</span> : {{ info.value }}
+                  </p>
+                </div>
+              </div>
+              <NuxtLink
+                v-if="piece.product?.id || piece.productId"
+                :to="`/product/${piece.product?.id || piece.productId}`"
+                class="btn btn-ghost btn-xs shrink-0 gap-1"
+              >
+                <IconLucideExternalLink class="w-3 h-3" aria-hidden="true" />
+                Voir
+              </NuxtLink>
+            </div>
             <ProductDocumentsInline
+              v-if="productDocuments.length"
+              class="mt-3 pt-3 border-t border-base-200/50"
               :documents="productDocuments"
               @preview="openPreview"
             />
           </div>
-          <span v-else class="font-medium">
-            Non défini
-          </span>
         </div>
       </div>
-    </div>
+
+      <!-- ── Section: Champs personnalisés item ── -->
+      <div v-if="displayedCustomFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Champs personnalisés item</p>
+        </div>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="displayedCustomFields"
+            :is-edit-mode="isEditMode"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="false"
+            @field-input="handleCustomFieldInput"
+            @field-blur="handleCustomFieldBlur"
+          />
+        </div>
       </div>
 
-    <!-- Champs personnalisés de la pièce -->
-    <CustomFieldDisplay
-      :fields="displayedCustomFields"
-      :is-edit-mode="isEditMode"
-      title="Champs personnalisés item"
-      :editable="false"
-      @field-input="handleCustomFieldInput"
-      @field-blur="handleCustomFieldBlur"
-    />
-
-    <template v-if="mergedContextFields.length">
-      <div class="divider my-4 text-xs text-base-content/50">
-        Champs personnalisés machine
-      </div>
-      <CustomFieldDisplay
-        :fields="mergedContextFields"
-        :is-edit-mode="isEditMode"
-        :columns="2"
-        :show-header="false"
-        :with-top-border="false"
-        :editable="true"
-        :emit-blur="false"
-        @field-input="queueContextCustomFieldUpdate"
-      />
-    </template>
-
-    <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
-      <div class="flex items-center justify-between">
-        <h5 class="text-sm font-medium text-base-content/80">Documents</h5>
-        <span
-          v-if="isEditMode && selectedFiles.length"
-          class="badge badge-outline"
-        >
-          {{ selectedFiles.length }} fichier{{
-            selectedFiles.length > 1 ? "s" : ""
-          }}
-          sélectionné{{ selectedFiles.length > 1 ? "s" : "" }}
-        </span>
+      <!-- ── Section: Champs personnalisés machine ── -->
+      <div v-if="mergedContextFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-secondary/10 border-b border-secondary/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-secondary">Champs personnalisés machine</p>
+        </div>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="mergedContextFields"
+            :is-edit-mode="isEditMode"
+            :columns="2"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="true"
+            :emit-blur="false"
+            @field-input="queueContextCustomFieldUpdate"
+          />
+        </div>
       </div>
 
-      <p v-if="loadingDocuments" class="text-xs text-base-content/50">
-        Chargement des documents...
-      </p>
+      <!-- ── Section: Documents ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50 flex items-center justify-between">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Documents</p>
+          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
+            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
+          </span>
+        </div>
+        <div class="p-4 space-y-3">
+          <p v-if="loadingDocuments" class="text-xs text-base-content/50">Chargement des documents...</p>
 
-      <DocumentUpload
-        v-if="isEditMode"
-        v-model="selectedFiles"
-        title="Déposer des fichiers pour cette pièce"
-        subtitle="Formats acceptés : PDF, images, documents..."
-        @files-added="handleFilesAdded"
-      />
+          <DocumentUpload
+            v-if="isEditMode"
+            v-model="selectedFiles"
+            title="Déposer des fichiers pour cette pièce"
+            subtitle="Formats acceptés : PDF, images, documents..."
+            @files-added="handleFilesAdded"
+          />
 
-      <DocumentListInline
-        :documents="pieceDocuments"
-        :can-delete="isEditMode"
-        :can-edit="isEditMode"
-        :delete-disabled="uploadingDocuments"
-        empty-text="Aucun document lié à cette pièce."
-        @preview="openPreview"
-        @edit="openEditModal"
-        @delete="removeDocument"
-      />
-    </div>
+          <DocumentListInline
+            :documents="pieceDocuments"
+            :can-delete="isEditMode"
+            :can-edit="isEditMode"
+            :delete-disabled="uploadingDocuments"
+            empty-text="Aucun document lié à cette pièce."
+            @preview="openPreview"
+            @edit="openEditModal"
+            @delete="removeDocument"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -321,6 +351,8 @@ import ProductSelect from '~/components/ProductSelect.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+import IconLucideExternalLink from '~icons/lucide/external-link'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import { useProducts } from '~/composables/useProducts'
 import {
@@ -468,6 +500,24 @@ const mergedContextFields = computed(() => {
   return mergeDefinitionsWithValues(definitions, values)
 })
 
+// Context fields shown as tags on the header (consultation mode)
+const visibleContextFieldTags = computed(() =>
+  mergedContextFields.value.filter(f => f.value !== null && f.value !== undefined && String(f.value).trim() !== ''),
+)
+
+const CONTEXT_FIELD_COLORS = [
+  'bg-secondary/25 text-secondary border border-secondary/35',
+  'bg-accent/25 text-accent border border-accent/35',
+  'bg-info/25 text-info border border-info/35',
+  'bg-success/25 text-success border border-success/35',
+  'bg-warning/25 text-warning border border-warning/35',
+]
+
+const contextFieldBadgeClass = (field) => {
+  const idx = visibleContextFieldTags.value.indexOf(field)
+  return CONTEXT_FIELD_COLORS[idx % CONTEXT_FIELD_COLORS.length]
+}
+
 const queueContextCustomFieldUpdate = (field, value) => {
   const linkId = props.piece?.linkId
   if (!linkId || !field) return