From dd6fc4665c9c832582d443dd1da7abdf9b73fdbf Mon Sep 17 00:00:00 2001
From: nyavokevin <nyavoevin@gmail.com>
Date: Tue, 24 Mar 2026 14:19:49 +0300
Subject: [PATCH] Feat: redesing form on new

---
 .../Repositories/InterventionRepository.php   |    5 +-
 .../Agenda/InterventionMultiStepModal.vue     |  749 ++++--
 .../Commande/NewCommandePresentation.vue      |   20 +-
 .../InterventionDetailContent.vue             |  137 +-
 .../Invoice/InvoiceDetailPresentation.vue     |   85 +-
 .../Quote/QuoteCreationPresentation.vue       |  102 +-
 .../Quote/QuoteDetailPresentation.vue         |   94 +-
 .../Stock/ProductDetailsPresentation.vue      | 1726 ++++---------
 .../components/atoms/Product/FieldDisplay.vue |   48 +
 .../components/atoms/Product/FieldInput.vue   |   92 +
 .../components/atoms/Product/ProductBadge.vue |   56 +
 .../atoms/Product/ProductStatCard.vue         |   63 +
 .../molecules/Commande/NewCommandeForm.vue    | 2077 ++++++++++------
 .../Interventions/InterventionForm.vue        |   30 +-
 .../Interventions/interventionsList.vue       |    6 +-
 .../Planning/PlanningCreationTypeSelector.vue |   19 +-
 .../molecules/Planning/PlanningKanban.vue     |  177 +-
 .../molecules/Planning/PlanningWeekGrid.vue   |  241 +-
 .../molecules/Product/ProductInfoSection.vue  |  138 ++
 .../Product/ProductMovementsSection.vue       |  131 +
 .../molecules/Product/ProductSidebar.vue      |  135 +
 .../molecules/Product/ProductStockSection.vue |  172 ++
 .../Product/ProductSupplierSection.vue        |  104 +
 .../molecules/Stock/NewReceptionForm.vue      | 2164 +++++++++++++----
 .../components/molecules/form/ContactForm.vue |  263 +-
 .../templates/Quote/CreateQuoteTemplate.vue   |   28 +-
 thanasoft-front/src/views/pages/Planning.vue  |   43 +-
 27 files changed, 5959 insertions(+), 2946 deletions(-)
 create mode 100644 thanasoft-front/src/components/atoms/Product/FieldDisplay.vue
 create mode 100644 thanasoft-front/src/components/atoms/Product/FieldInput.vue
 create mode 100644 thanasoft-front/src/components/atoms/Product/ProductBadge.vue
 create mode 100644 thanasoft-front/src/components/atoms/Product/ProductStatCard.vue
 create mode 100644 thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue
 create mode 100644 thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue
 create mode 100644 thanasoft-front/src/components/molecules/Product/ProductSidebar.vue
 create mode 100644 thanasoft-front/src/components/molecules/Product/ProductStockSection.vue
 create mode 100644 thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue

diff --git a/thanasoft-back/app/Repositories/InterventionRepository.php b/thanasoft-back/app/Repositories/InterventionRepository.php
index d153757..64094ff 100644
--- a/thanasoft-back/app/Repositories/InterventionRepository.php
+++ b/thanasoft-back/app/Repositories/InterventionRepository.php
@@ -82,7 +82,10 @@ class InterventionRepository implements InterventionRepositoryInterface
             'practitioners',
             'attachments',
             'notifications',
-            'quote'
+            'quote',
+            'quote.client',
+            'quote.lines',
+            'quote.history'
         ])->findOrFail($id);
     }
 
diff --git a/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue b/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue
index 2d0a4c7..1f5a411 100644
--- a/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue
+++ b/thanasoft-front/src/components/Organism/Agenda/InterventionMultiStepModal.vue
@@ -7,28 +7,41 @@
     aria-labelledby="interventionModalLabel"
     aria-hidden="true"
   >
-    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
+    <div
+      class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"
+    >
       <div class="modal-content intervention-modal">
-
         <!-- Header -->
         <div class="modal-header intervention-header">
           <div class="header-content">
             <div>
               <h5 id="interventionModalLabel" class="modal-title mb-0">
-                {{ isEditing ? "Modifier l'intervention" : "Nouvelle Intervention" }}
+                {{
+                  isEditing
+                    ? "Modifier l'intervention"
+                    : "Nouvelle Intervention"
+                }}
               </h5>
               <p class="header-subtitle mb-0">
-                {{ isEditing ? "Mettez à jour les informations ci-dessous" : "Renseignez les informations de la prise en charge" }}
+                {{
+                  isEditing
+                    ? "Mettez à jour les informations ci-dessous"
+                    : "Renseignez les informations de la prise en charge"
+                }}
               </p>
             </div>
           </div>
-          <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
+          <button
+            type="button"
+            class="btn-close-custom"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          >
             <i class="fas fa-times"></i>
           </button>
         </div>
 
         <div class="modal-body p-0">
-
           <!-- Global Errors -->
           <div v-if="globalErrors.length" class="error-banner">
             <i class="fas fa-exclamation-triangle me-2"></i>
@@ -37,7 +50,6 @@
 
           <form @submit.prevent="handleSubmit">
             <div class="form-sections">
-
               <!-- SECTION: Défunt & Client (two columns) -->
               <div class="form-section">
                 <div class="section-label">
@@ -52,15 +64,28 @@
                         <i class="fas fa-user-alt field-icon deceased-icon"></i>
                         Défunt <span class="required">*</span>
                       </label>
-                      <button type="button" class="toggle-btn" @click="toggleDeceasedMode">
-                        <i :class="deceasedForm.is_existing ? 'fas fa-plus' : 'fas fa-search'"></i>
+                      <button
+                        type="button"
+                        class="toggle-btn"
+                        @click="toggleDeceasedMode"
+                      >
+                        <i
+                          :class="
+                            deceasedForm.is_existing
+                              ? 'fas fa-plus'
+                              : 'fas fa-search'
+                          "
+                        ></i>
                         {{ deceasedForm.is_existing ? "Créer" : "Rechercher" }}
                       </button>
                     </div>
 
                     <!-- Search Deceased -->
                     <div v-if="deceasedForm.is_existing" class="search-wrapper">
-                      <div class="search-input-group" :class="{ 'has-error': hasError('deceased_id') }">
+                      <div
+                        class="search-input-group"
+                        :class="{ 'has-error': hasError('deceased_id') }"
+                      >
                         <i class="fas fa-search search-icon"></i>
                         <input
                           v-model="deceasedSearchQuery"
@@ -70,19 +95,45 @@
                           @input="handleDeceasedSearch"
                           @focus="showDeceasedResults = true"
                         />
-                        <button v-if="deceasedForm.id" class="clear-btn" type="button" @click="clearDeceasedSelection">
+                        <button
+                          v-if="deceasedForm.id"
+                          class="clear-btn"
+                          type="button"
+                          @click="clearDeceasedSelection"
+                        >
                           <i class="fas fa-times"></i>
                         </button>
                       </div>
-                      <span v-if="getFieldError('deceased_id')" class="field-error">
-                        <i class="fas fa-exclamation-circle"></i> {{ getFieldError("deceased_id") }}
+                      <span
+                        v-if="getFieldError('deceased_id')"
+                        class="field-error"
+                      >
+                        <i class="fas fa-exclamation-circle"></i>
+                        {{ getFieldError("deceased_id") }}
                       </span>
-                      <div v-if="showDeceasedResults && deceasedSearchResults.length" class="dropdown-results">
-                        <button v-for="d in deceasedSearchResults" :key="d.id" type="button" class="result-item" @click="selectDeceased(d)">
-                          <div class="result-avatar deceased-avatar">{{ (d.first_name || d.last_name || '?')[0] }}</div>
+                      <div
+                        v-if="
+                          showDeceasedResults && deceasedSearchResults.length
+                        "
+                        class="dropdown-results"
+                      >
+                        <button
+                          v-for="d in deceasedSearchResults"
+                          :key="d.id"
+                          type="button"
+                          class="result-item"
+                          @click="selectDeceased(d)"
+                        >
+                          <div class="result-avatar deceased-avatar">
+                            {{ (d.first_name || d.last_name || "?")[0] }}
+                          </div>
                           <div class="result-info">
-                            <span class="result-name">{{ d.first_name }} {{ d.last_name }}</span>
-                            <span class="result-meta">{{ d.birth_date }} – {{ d.death_date }}</span>
+                            <span class="result-name"
+                              >{{ d.first_name }} {{ d.last_name }}</span
+                            >
+                            <span class="result-meta"
+                              >{{ d.birth_date }} – {{ d.death_date }}</span
+                            >
                           </div>
                         </button>
                       </div>
@@ -92,24 +143,49 @@
                     <div v-else class="inline-form">
                       <div class="inline-grid-2">
                         <div class="mini-field">
-                          <label class="mini-label">Nom <span class="required">*</span></label>
-                          <input v-model="deceasedForm.last_name" class="mini-input" :class="{ 'is-invalid': hasError('deceased.last_name') }" placeholder="Dupont" />
+                          <label class="mini-label"
+                            >Nom <span class="required">*</span></label
+                          >
+                          <input
+                            v-model="deceasedForm.last_name"
+                            class="mini-input"
+                            :class="{
+                              'is-invalid': hasError('deceased.last_name'),
+                            }"
+                            placeholder="Dupont"
+                          />
                         </div>
                         <div class="mini-field">
                           <label class="mini-label">Prénom</label>
-                          <input v-model="deceasedForm.first_name" class="mini-input" placeholder="Jean" />
+                          <input
+                            v-model="deceasedForm.first_name"
+                            class="mini-input"
+                            placeholder="Jean"
+                          />
                         </div>
                         <div class="mini-field">
                           <label class="mini-label">Naissance</label>
-                          <input v-model="deceasedForm.birth_date" type="date" class="mini-input" />
+                          <input
+                            v-model="deceasedForm.birth_date"
+                            type="date"
+                            class="mini-input"
+                          />
                         </div>
                         <div class="mini-field">
                           <label class="mini-label">Décès</label>
-                          <input v-model="deceasedForm.death_date" type="date" class="mini-input" />
+                          <input
+                            v-model="deceasedForm.death_date"
+                            type="date"
+                            class="mini-input"
+                          />
                         </div>
                       </div>
-                      <span v-if="getFieldError('deceased.last_name')" class="field-error">
-                        <i class="fas fa-exclamation-circle"></i> {{ getFieldError("deceased.last_name") }}
+                      <span
+                        v-if="getFieldError('deceased.last_name')"
+                        class="field-error"
+                      >
+                        <i class="fas fa-exclamation-circle"></i>
+                        {{ getFieldError("deceased.last_name") }}
                       </span>
                     </div>
                   </div>
@@ -123,7 +199,10 @@
                       </label>
                     </div>
                     <div class="search-wrapper">
-                      <div class="search-input-group" :class="{ 'has-error': hasError('client') }">
+                      <div
+                        class="search-input-group"
+                        :class="{ 'has-error': hasError('client') }"
+                      >
                         <i class="fas fa-search search-icon"></i>
                         <input
                           v-model="clientSearchQuery"
@@ -133,22 +212,39 @@
                           @input="handleClientSearch"
                           @focus="handleClientFocus"
                         />
-                        <button v-if="selectedClient" class="clear-btn" type="button" @click="clearClientSelection">
+                        <button
+                          v-if="selectedClient"
+                          class="clear-btn"
+                          type="button"
+                          @click="clearClientSelection"
+                        >
                           <i class="fas fa-times"></i>
                         </button>
                       </div>
                       <span v-if="getFieldError('client')" class="field-error">
-                        <i class="fas fa-exclamation-circle"></i> {{ getFieldError("client") }}
+                        <i class="fas fa-exclamation-circle"></i>
+                        {{ getFieldError("client") }}
                       </span>
                       <div v-if="showClientResults" class="dropdown-results">
-                        <button v-for="c in clientSearchResults" :key="c.id" type="button" class="result-item" @click="selectClient(c)">
-                          <div class="result-avatar client-avatar">{{ (c.name || '?')[0] }}</div>
+                        <button
+                          v-for="c in clientSearchResults"
+                          :key="c.id"
+                          type="button"
+                          class="result-item"
+                          @click="selectClient(c)"
+                        >
+                          <div class="result-avatar client-avatar">
+                            {{ (c.name || "?")[0] }}
+                          </div>
                           <div class="result-info">
                             <span class="result-name">{{ c.name }}</span>
                             <span class="result-meta">{{ c.email }}</span>
                           </div>
                         </button>
-                        <div v-if="!clientSearchResults.length" class="dropdown-empty">
+                        <div
+                          v-if="!clientSearchResults.length"
+                          class="dropdown-empty"
+                        >
                           Aucun client trouvé
                         </div>
                         <div class="dropdown-helper">
@@ -182,8 +278,12 @@
                       :class="{ 'is-invalid': hasError('scheduled_at') }"
                       required
                     />
-                    <span v-if="getFieldError('scheduled_at')" class="field-error">
-                      <i class="fas fa-exclamation-circle"></i> {{ getFieldError("scheduled_at") }}
+                    <span
+                      v-if="getFieldError('scheduled_at')"
+                      class="field-error"
+                    >
+                      <i class="fas fa-exclamation-circle"></i>
+                      {{ getFieldError("scheduled_at") }}
                     </span>
                   </div>
 
@@ -194,7 +294,10 @@
                       Type de soin <span class="required">*</span>
                     </label>
                     <div class="search-wrapper">
-                      <div class="search-input-group" :class="{ 'has-error': hasError('product_id') }">
+                      <div
+                        class="search-input-group"
+                        :class="{ 'has-error': hasError('product_id') }"
+                      >
                         <i class="fas fa-search search-icon"></i>
                         <input
                           v-model="productSearchQuery"
@@ -204,18 +307,38 @@
                           @input="handleProductSearch"
                           @focus="handleProductFocus"
                         />
-                        <button v-if="productForm.product_id" class="clear-btn" type="button" @click="clearProductSelection">
+                        <button
+                          v-if="productForm.product_id"
+                          class="clear-btn"
+                          type="button"
+                          @click="clearProductSelection"
+                        >
                           <i class="fas fa-times"></i>
                         </button>
                       </div>
-                      <span v-if="getFieldError('product_id')" class="field-error">
-                        <i class="fas fa-exclamation-circle"></i> {{ getFieldError("product_id") }}
+                      <span
+                        v-if="getFieldError('product_id')"
+                        class="field-error"
+                      >
+                        <i class="fas fa-exclamation-circle"></i>
+                        {{ getFieldError("product_id") }}
                       </span>
-                      <div v-if="showProductResults && productSearchResults.length" class="dropdown-results">
-                        <button v-for="p in productSearchResults" :key="p.id" type="button" class="result-item" @click="selectProduct(p)">
+                      <div
+                        v-if="showProductResults && productSearchResults.length"
+                        class="dropdown-results"
+                      >
+                        <button
+                          v-for="p in productSearchResults"
+                          :key="p.id"
+                          type="button"
+                          class="result-item"
+                          @click="selectProduct(p)"
+                        >
                           <div class="result-info">
                             <span class="result-name">{{ p.nom }}</span>
-                            <span class="result-meta" v-if="p.price">{{ p.price }}€</span>
+                            <span v-if="p.price" class="result-meta"
+                              >{{ p.price }}€</span
+                            >
                           </div>
                         </button>
                       </div>
@@ -229,7 +352,10 @@
                       Statut
                     </label>
                     <div class="select-wrapper">
-                      <select v-model="interventionForm.status" class="styled-select">
+                      <select
+                        v-model="interventionForm.status"
+                        class="styled-select"
+                      >
                         <option value="demande">📋 Demande</option>
                         <option value="planifie">🗓 Planifiée</option>
                         <option value="en_cours">⚡ En cours</option>
@@ -246,29 +372,44 @@
                 <div class="two-col-grid mt-3">
                   <div class="field-group">
                     <label class="field-label">
-                      <i class="fas fa-user-md field-icon practitioner-icon"></i>
+                      <i
+                        class="fas fa-user-md field-icon practitioner-icon"
+                      ></i>
                       Thanatopracteur salarié <span class="required">*</span>
                     </label>
                     <div class="select-wrapper">
                       <select
                         v-model="interventionForm.assigned_practitioner_id"
                         class="styled-select"
-                        :class="{ 'is-invalid': hasError('assigned_practitioner_id') }"
+                        :class="{
+                          'is-invalid': hasError('assigned_practitioner_id'),
+                        }"
                       >
                         <option value="">Sélectionner...</option>
-                        <option v-for="practitioner in practitioners" :key="practitioner.id" :value="practitioner.id">
-                          {{ practitioner.employee?.first_name }} {{ practitioner.employee?.last_name }}
+                        <option
+                          v-for="practitioner in practitioners"
+                          :key="practitioner.id"
+                          :value="practitioner.id"
+                        >
+                          {{ practitioner.employee?.first_name }}
+                          {{ practitioner.employee?.last_name }}
                         </option>
                       </select>
                       <i class="fas fa-chevron-down select-chevron"></i>
                     </div>
-                    <span v-if="getFieldError('assigned_practitioner_id')" class="field-error">
-                      <i class="fas fa-exclamation-circle"></i> {{ getFieldError("assigned_practitioner_id") }}
+                    <span
+                      v-if="getFieldError('assigned_practitioner_id')"
+                      class="field-error"
+                    >
+                      <i class="fas fa-exclamation-circle"></i>
+                      {{ getFieldError("assigned_practitioner_id") }}
                     </span>
                   </div>
                   <div class="field-group">
                     <label class="field-label">
-                      <i class="fas fa-briefcase field-icon subcontract-icon"></i>
+                      <i
+                        class="fas fa-briefcase field-icon subcontract-icon"
+                      ></i>
                       Sous-traitant
                     </label>
                     <div class="select-wrapper disabled-wrapper">
@@ -286,7 +427,6 @@
               <!-- SECTION: Lieu & Prescription -->
               <div class="form-section">
                 <div class="section-label">
-        
                   <span>Lieu & Documents</span>
                 </div>
 
@@ -295,17 +435,37 @@
                   <div class="field-group">
                     <div class="field-header">
                       <label class="field-label">
-                        <i class="fas fa-map-marker-alt field-icon lieu-icon"></i>
+                        <i
+                          class="fas fa-map-marker-alt field-icon lieu-icon"
+                        ></i>
                         Lieu d'intervention
                       </label>
-                      <button type="button" class="toggle-btn" @click="toggleLocationMode">
-                        <i :class="locationForm.is_existing ? 'fas fa-plus' : 'fas fa-search'"></i>
-                        {{ locationForm.is_existing ? "Nouveau" : "Rechercher" }}
+                      <button
+                        type="button"
+                        class="toggle-btn"
+                        @click="toggleLocationMode"
+                      >
+                        <i
+                          :class="
+                            locationForm.is_existing
+                              ? 'fas fa-plus'
+                              : 'fas fa-search'
+                          "
+                        ></i>
+                        {{
+                          locationForm.is_existing ? "Nouveau" : "Rechercher"
+                        }}
                       </button>
                     </div>
 
                     <div v-if="locationForm.is_existing" class="search-wrapper">
-                      <div class="search-input-group" :class="{ 'has-error': hasError('location.name') && !locationForm.id }">
+                      <div
+                        class="search-input-group"
+                        :class="{
+                          'has-error':
+                            hasError('location.name') && !locationForm.id,
+                        }"
+                      >
                         <i class="fas fa-search search-icon"></i>
                         <input
                           v-model="locationSearchQuery"
@@ -315,15 +475,37 @@
                           @input="handleLocationSearch"
                           @focus="showLocationResults = true"
                         />
-                        <button v-if="locationForm.id" class="clear-btn" type="button" @click="clearLocationSelection">
+                        <button
+                          v-if="locationForm.id"
+                          class="clear-btn"
+                          type="button"
+                          @click="clearLocationSelection"
+                        >
                           <i class="fas fa-times"></i>
                         </button>
                       </div>
-                      <span v-if="getFieldError('location.name') && !locationForm.id" class="field-error">
-                        <i class="fas fa-exclamation-circle"></i> {{ getFieldError("location.name") }}
+                      <span
+                        v-if="
+                          getFieldError('location.name') && !locationForm.id
+                        "
+                        class="field-error"
+                      >
+                        <i class="fas fa-exclamation-circle"></i>
+                        {{ getFieldError("location.name") }}
                       </span>
-                      <div v-if="showLocationResults && locationSearchResults.length" class="dropdown-results">
-                        <button v-for="loc in locationSearchResults" :key="loc.id" type="button" class="result-item" @click="selectLocation(loc)">
+                      <div
+                        v-if="
+                          showLocationResults && locationSearchResults.length
+                        "
+                        class="dropdown-results"
+                      >
+                        <button
+                          v-for="loc in locationSearchResults"
+                          :key="loc.id"
+                          type="button"
+                          class="result-item"
+                          @click="selectLocation(loc)"
+                        >
                           <div class="result-info">
                             <span class="result-name">{{ loc.name }}</span>
                             <span class="result-meta">{{ loc.city }}</span>
@@ -335,16 +517,31 @@
                     <div v-else class="inline-form">
                       <div class="inline-grid-2">
                         <div class="mini-field">
-                          <label class="mini-label">Nom du lieu <span class="required">*</span></label>
-                          <input v-model="locationForm.name" class="mini-input" placeholder="Ex: Domicile" :class="{ 'is-invalid': hasError('location.name') }" />
+                          <label class="mini-label"
+                            >Nom du lieu <span class="required">*</span></label
+                          >
+                          <input
+                            v-model="locationForm.name"
+                            class="mini-input"
+                            placeholder="Ex: Domicile"
+                            :class="{ 'is-invalid': hasError('location.name') }"
+                          />
                         </div>
                         <div class="mini-field">
                           <label class="mini-label">Ville</label>
-                          <input v-model="locationForm.city" class="mini-input" placeholder="Ex: Paris" />
+                          <input
+                            v-model="locationForm.city"
+                            class="mini-input"
+                            placeholder="Ex: Paris"
+                          />
                         </div>
                       </div>
-                      <span v-if="getFieldError('location.name')" class="field-error">
-                        <i class="fas fa-exclamation-circle"></i> {{ getFieldError("location.name") }}
+                      <span
+                        v-if="getFieldError('location.name')"
+                        class="field-error"
+                      >
+                        <i class="fas fa-exclamation-circle"></i>
+                        {{ getFieldError("location.name") }}
                       </span>
                     </div>
                   </div>
@@ -362,12 +559,18 @@
                         class="styled-input"
                         placeholder="Ex: RX-2024-001"
                       />
-                      <button class="mic-btn" type="button" title="Saisie vocale" @click="toggleVoiceInput('medical_prescription_number')">
+                      <button
+                        class="mic-btn"
+                        type="button"
+                        title="Saisie vocale"
+                        @click="toggleVoiceInput('medical_prescription_number')"
+                      >
                         <i class="fas fa-microphone"></i>
                       </button>
                     </div>
                     <p class="hint-text">
-                      <i class="fas fa-info-circle me-1"></i>Optionnel – si fourni par la famille
+                      <i class="fas fa-info-circle me-1"></i>Optionnel – si
+                      fourni par la famille
                     </p>
                   </div>
                 </div>
@@ -378,7 +581,6 @@
               <!-- SECTION: Notes -->
               <div class="form-section">
                 <div class="section-label">
-          
                   <span>Observations</span>
                 </div>
                 <div class="field-group">
@@ -393,13 +595,17 @@
                       rows="4"
                       placeholder="Notes et observations sur l'intervention..."
                     ></textarea>
-                    <button class="mic-btn textarea-mic" type="button" title="Saisie vocale" @click="toggleVoiceInput('notes')">
+                    <button
+                      class="mic-btn textarea-mic"
+                      type="button"
+                      title="Saisie vocale"
+                      @click="toggleVoiceInput('notes')"
+                    >
                       <i class="fas fa-microphone"></i>
                     </button>
                   </div>
                 </div>
               </div>
-
             </div>
 
             <!-- Footer -->
@@ -432,13 +638,17 @@
                   :disabled="submitting"
                   class="mb-0 d-inline-flex align-items-center"
                 >
-                  <span v-if="submitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span
+                    v-if="submitting"
+                    class="spinner-border spinner-border-sm me-2"
+                    role="status"
+                    aria-hidden="true"
+                  ></span>
                   <i v-else class="fas fa-check me-2"></i>
                   {{ isEditing ? "Mettre à jour" : "Créer l'intervention" }}
                 </SoftButton>
               </div>
             </div>
-
           </form>
         </div>
       </div>
@@ -448,7 +658,12 @@
 
 <script setup>
 import {
-  ref, watch, defineProps, defineEmits, defineExpose, onMounted,
+  ref,
+  watch,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  onMounted,
 } from "vue";
 import { Modal } from "bootstrap";
 import DeceasedService from "@/services/deceased";
@@ -471,7 +686,14 @@ const submitting = ref(false);
 const globalErrors = ref([]);
 const errors = ref([]);
 
-const deceasedForm = ref({ id: null, is_existing: true, first_name: "", last_name: "", birth_date: "", death_date: "" });
+const deceasedForm = ref({
+  id: null,
+  is_existing: true,
+  first_name: "",
+  last_name: "",
+  birth_date: "",
+  death_date: "",
+});
 const deceasedSearchQuery = ref("");
 const deceasedSearchResults = ref([]);
 const showDeceasedResults = ref(false);
@@ -498,8 +720,13 @@ const showLocationResults = ref(false);
 let locationSearchTimeout;
 
 const interventionForm = ref({
-  scheduled_at: "", status: "planifie", assigned_practitioner_id: "",
-  notes: "", medical_prescription_number: "", order_giver: "", type: "thanatopraxie",
+  scheduled_at: "",
+  status: "planifie",
+  assigned_practitioner_id: "",
+  notes: "",
+  medical_prescription_number: "",
+  order_giver: "",
+  type: "thanatopraxie",
 });
 
 onMounted(async () => {
@@ -516,11 +743,20 @@ onMounted(async () => {
   }
   try {
     const pService = new ProductService();
-    const response = await pService.getAllProducts({ per_page: 100, is_intervention: true });
-    const products = Array.isArray(response?.data) ? response.data : Array.isArray(response?.data?.data) ? response.data.data : [];
+    const response = await pService.getAllProducts({
+      per_page: 100,
+      is_intervention: true,
+    });
+    const products = Array.isArray(response?.data)
+      ? response.data
+      : Array.isArray(response?.data?.data)
+      ? response.data.data
+      : [];
     allProducts.value = products;
     productSearchResults.value = products;
-  } catch (e) { console.error("Failed to load products", e); }
+  } catch (e) {
+    console.error("Failed to load products", e);
+  }
 });
 
 const show = () => modalInstance?.show();
@@ -529,14 +765,26 @@ const hide = () => modalInstance?.hide();
 const toggleDeceasedMode = () => {
   deceasedForm.value.is_existing = !deceasedForm.value.is_existing;
   if (!deceasedForm.value.is_existing) clearDeceasedSelection();
-  else { deceasedSearchQuery.value = ""; deceasedSearchResults.value = []; }
+  else {
+    deceasedSearchQuery.value = "";
+    deceasedSearchResults.value = [];
+  }
 };
 
 const handleDeceasedSearch = () => {
   if (deceasedSearchTimeout) clearTimeout(deceasedSearchTimeout);
-  if (deceasedSearchQuery.value.length < 2) { deceasedSearchResults.value = []; return; }
+  if (deceasedSearchQuery.value.length < 2) {
+    deceasedSearchResults.value = [];
+    return;
+  }
   deceasedSearchTimeout = setTimeout(async () => {
-    try { deceasedSearchResults.value = await DeceasedService.searchDeceased(deceasedSearchQuery.value); } catch (e) { console.error(e); }
+    try {
+      deceasedSearchResults.value = await DeceasedService.searchDeceased(
+        deceasedSearchQuery.value
+      );
+    } catch (e) {
+      console.error(e);
+    }
   }, 300);
 };
 
@@ -551,28 +799,47 @@ const selectDeceased = (d) => {
 const clearDeceasedSelection = () => {
   deceasedForm.value.id = null;
   deceasedSearchQuery.value = "";
-  Object.assign(deceasedForm.value, { first_name: "", last_name: "", birth_date: "", death_date: "" });
+  Object.assign(deceasedForm.value, {
+    first_name: "",
+    last_name: "",
+    birth_date: "",
+    death_date: "",
+  });
   deceasedSearchResults.value = [];
-  errors.value = errors.value.filter((e) => e.field !== "deceased_id" && e.field !== "deceased.last_name");
+  errors.value = errors.value.filter(
+    (e) => e.field !== "deceased_id" && e.field !== "deceased.last_name"
+  );
 };
 
 const handleClientSearch = () => {
   showClientResults.value = true;
   if (clientSearchTimeout) clearTimeout(clientSearchTimeout);
-  if (clientSearchQuery.value.length < 2) { clientSearchResults.value = recentClients.value; return; }
+  if (clientSearchQuery.value.length < 2) {
+    clientSearchResults.value = recentClients.value;
+    return;
+  }
   clientSearchTimeout = setTimeout(async () => {
-    try { clientSearchResults.value = await ClientService.searchClients(clientSearchQuery.value); } catch (e) { console.error(e); }
+    try {
+      clientSearchResults.value = await ClientService.searchClients(
+        clientSearchQuery.value
+      );
+    } catch (e) {
+      console.error(e);
+    }
   }, 300);
 };
 
 const loadRecentClients = async () => {
   try {
-    const response = await ClientService.getAllClients({ page: 1, per_page: 5 });
+    const response = await ClientService.getAllClients({
+      page: 1,
+      per_page: 5,
+    });
     const clients = Array.isArray(response?.data)
       ? response.data
       : Array.isArray(response?.data?.data)
-        ? response.data.data
-        : [];
+      ? response.data.data
+      : [];
     recentClients.value = clients;
   } catch (e) {
     console.error("Failed to load recent clients", e);
@@ -611,10 +878,21 @@ const handleProductSearch = () => {
   productSearchTimeout = setTimeout(async () => {
     try {
       const pService = new ProductService();
-      const response = await pService.getAllProducts({ per_page: 100, is_intervention: true, search: productSearchQuery.value || undefined });
-      const products = Array.isArray(response?.data) ? response.data : Array.isArray(response?.data?.data) ? response.data.data : [];
+      const response = await pService.getAllProducts({
+        per_page: 100,
+        is_intervention: true,
+        search: productSearchQuery.value || undefined,
+      });
+      const products = Array.isArray(response?.data)
+        ? response.data
+        : Array.isArray(response?.data?.data)
+        ? response.data.data
+        : [];
       productSearchResults.value = products;
-    } catch (e) { console.error(e); productSearchResults.value = []; }
+    } catch (e) {
+      console.error(e);
+      productSearchResults.value = [];
+    }
   }, 250);
 };
 
@@ -629,7 +907,8 @@ const selectProduct = (p) => {
   productSearchQuery.value = p.nom;
   showProductResults.value = false;
   errors.value = errors.value.filter((e) => e.field !== "product_id");
-  if (!interventionForm.value.type) interventionForm.value.type = "thanatopraxie";
+  if (!interventionForm.value.type)
+    interventionForm.value.type = "thanatopraxie";
 };
 
 const clearProductSelection = () => {
@@ -642,18 +921,31 @@ const clearProductSelection = () => {
 const toggleLocationMode = () => {
   locationForm.value.is_existing = !locationForm.value.is_existing;
   if (!locationForm.value.is_existing) clearLocationSelection();
-  else { locationForm.value.name = ""; locationForm.value.city = ""; locationSearchQuery.value = ""; locationSearchResults.value = []; }
+  else {
+    locationForm.value.name = "";
+    locationForm.value.city = "";
+    locationSearchQuery.value = "";
+    locationSearchResults.value = [];
+  }
   errors.value = errors.value.filter((e) => e.field === "location.name");
 };
 
 const handleLocationSearch = () => {
   if (locationSearchTimeout) clearTimeout(locationSearchTimeout);
-  if (locationSearchQuery.value.length < 2) { locationSearchResults.value = []; return; }
+  if (locationSearchQuery.value.length < 2) {
+    locationSearchResults.value = [];
+    return;
+  }
   locationSearchTimeout = setTimeout(async () => {
     try {
-      const response = await ClientLocationService.getAllClientLocations({ search: locationSearchQuery.value, per_page: 10 });
+      const response = await ClientLocationService.getAllClientLocations({
+        search: locationSearchQuery.value,
+        per_page: 10,
+      });
       locationSearchResults.value = response.data;
-    } catch (e) { console.error(e); }
+    } catch (e) {
+      console.error(e);
+    }
   }, 300);
 };
 
@@ -675,27 +967,71 @@ const clearLocationSelection = () => {
   errors.value = errors.value.filter((e) => e.field !== "location.name");
 };
 
-const toggleVoiceInput = (field) => alert(`Saisie vocale pour ${field} – Fonctionnalité à implémenter`);
+const toggleVoiceInput = (field) =>
+  alert(`Saisie vocale pour ${field} – Fonctionnalité à implémenter`);
 
 const hasError = (field) => errors.value.some((e) => e.field === field);
-const getFieldError = (field) => errors.value.find((e) => e.field === field)?.message || "";
+const getFieldError = (field) =>
+  errors.value.find((e) => e.field === field)?.message || "";
 
 const validate = () => {
   errors.value = [];
   let isValid = true;
   if (deceasedForm.value.is_existing) {
-    if (!deceasedForm.value.id) { errors.value.push({ field: "deceased_id", message: "Veuillez sélectionner un défunt." }); isValid = false; }
+    if (!deceasedForm.value.id) {
+      errors.value.push({
+        field: "deceased_id",
+        message: "Veuillez sélectionner un défunt.",
+      });
+      isValid = false;
+    }
   } else {
-    if (!deceasedForm.value.last_name) { errors.value.push({ field: "deceased.last_name", message: "Le nom du défunt est requis." }); isValid = false; }
+    if (!deceasedForm.value.last_name) {
+      errors.value.push({
+        field: "deceased.last_name",
+        message: "Le nom du défunt est requis.",
+      });
+      isValid = false;
+    }
+  }
+  if (!selectedClient.value) {
+    errors.value.push({
+      field: "client",
+      message: "Veuillez sélectionner un client.",
+    });
+    isValid = false;
+  }
+  if (!interventionForm.value.scheduled_at) {
+    errors.value.push({ field: "scheduled_at", message: "Date obligatoire." });
+    isValid = false;
+  }
+  if (!productForm.value.product_id) {
+    errors.value.push({ field: "product_id", message: "Type de soin requis." });
+    isValid = false;
+  }
+  if (!interventionForm.value.assigned_practitioner_id) {
+    errors.value.push({
+      field: "assigned_practitioner_id",
+      message: "Intervenant requis.",
+    });
+    isValid = false;
   }
-  if (!selectedClient.value) { errors.value.push({ field: "client", message: "Veuillez sélectionner un client." }); isValid = false; }
-  if (!interventionForm.value.scheduled_at) { errors.value.push({ field: "scheduled_at", message: "Date obligatoire." }); isValid = false; }
-  if (!productForm.value.product_id) { errors.value.push({ field: "product_id", message: "Type de soin requis." }); isValid = false; }
-  if (!interventionForm.value.assigned_practitioner_id) { errors.value.push({ field: "assigned_practitioner_id", message: "Intervenant requis." }); isValid = false; }
   if (locationForm.value.is_existing) {
-    if (!locationForm.value.id) { errors.value.push({ field: "location.name", message: "Veuillez sélectionner un lieu." }); isValid = false; }
+    if (!locationForm.value.id) {
+      errors.value.push({
+        field: "location.name",
+        message: "Veuillez sélectionner un lieu.",
+      });
+      isValid = false;
+    }
   } else {
-    if (!locationForm.value.name) { errors.value.push({ field: "location.name", message: "Le nom du lieu est requis." }); isValid = false; }
+    if (!locationForm.value.name) {
+      errors.value.push({
+        field: "location.name",
+        message: "Le nom du lieu est requis.",
+      });
+      isValid = false;
+    }
   }
   return isValid;
 };
@@ -709,34 +1045,53 @@ const handleSubmit = async () => {
     if (deceasedForm.value.is_existing && deceasedForm.value.id) {
       formData.append("deceased_id", deceasedForm.value.id);
     } else {
-      formData.append("deceased[first_name]", deceasedForm.value.first_name || "");
-      formData.append("deceased[last_name]", deceasedForm.value.last_name || "");
-      if (deceasedForm.value.birth_date) formData.append("deceased[birth_date]", deceasedForm.value.birth_date);
-      if (deceasedForm.value.death_date) formData.append("deceased[death_date]", deceasedForm.value.death_date);
+      formData.append(
+        "deceased[first_name]",
+        deceasedForm.value.first_name || ""
+      );
+      formData.append(
+        "deceased[last_name]",
+        deceasedForm.value.last_name || ""
+      );
+      if (deceasedForm.value.birth_date)
+        formData.append("deceased[birth_date]", deceasedForm.value.birth_date);
+      if (deceasedForm.value.death_date)
+        formData.append("deceased[death_date]", deceasedForm.value.death_date);
     }
     if (selectedClient.value) {
       formData.append("client_id", selectedClient.value.id);
-      if (selectedClient.value.name) formData.append("client[name]", selectedClient.value.name);
-      if (selectedClient.value.email) formData.append("client[email]", selectedClient.value.email);
-      if (selectedClient.value.phone) formData.append("client[phone]", selectedClient.value.phone);
+      if (selectedClient.value.name)
+        formData.append("client[name]", selectedClient.value.name);
+      if (selectedClient.value.email)
+        formData.append("client[email]", selectedClient.value.email);
+      if (selectedClient.value.phone)
+        formData.append("client[phone]", selectedClient.value.phone);
       if (selectedClient.value.billing_address) {
         const ba = selectedClient.value.billing_address;
-        if (ba.line1) formData.append("client[billing_address_line1]", ba.line1);
-        if (ba.line2) formData.append("client[billing_address_line2]", ba.line2);
-        if (ba.postal_code) formData.append("client[billing_postal_code]", ba.postal_code);
+        if (ba.line1)
+          formData.append("client[billing_address_line1]", ba.line1);
+        if (ba.line2)
+          formData.append("client[billing_address_line2]", ba.line2);
+        if (ba.postal_code)
+          formData.append("client[billing_postal_code]", ba.postal_code);
         if (ba.city) formData.append("client[billing_city]", ba.city);
-        if (ba.country_code) formData.append("client[billing_country_code]", ba.country_code);
+        if (ba.country_code)
+          formData.append("client[billing_country_code]", ba.country_code);
       }
-      if (selectedClient.value.vat_number) formData.append("client[vat_number]", selectedClient.value.vat_number);
-      if (selectedClient.value.siret) formData.append("client[siret]", selectedClient.value.siret);
+      if (selectedClient.value.vat_number)
+        formData.append("client[vat_number]", selectedClient.value.vat_number);
+      if (selectedClient.value.siret)
+        formData.append("client[siret]", selectedClient.value.siret);
     }
     if (locationForm.value.is_existing && locationForm.value.id) {
       formData.append("location_id", locationForm.value.id);
     } else {
       formData.append("location[name]", locationForm.value.name || "");
-      if (locationForm.value.city) formData.append("location[city]", locationForm.value.city);
+      if (locationForm.value.city)
+        formData.append("location[city]", locationForm.value.city);
     }
-    if (productForm.value.product_id) formData.append("product_id", productForm.value.product_id);
+    if (productForm.value.product_id)
+      formData.append("product_id", productForm.value.product_id);
 
     if (interventionForm.value.assigned_practitioner_id) {
       formData.append(
@@ -768,12 +1123,22 @@ const handleSubmit = async () => {
   }
 };
 
-watch(() => locationForm.value.name, () => {
-  if (getFieldError("location.name")) errors.value = errors.value.filter((e) => e.field !== "location.name");
-});
-watch(() => interventionForm.value.assigned_practitioner_id, () => {
-  if (getFieldError("assigned_practitioner_id")) errors.value = errors.value.filter((e) => e.field !== "assigned_practitioner_id");
-});
+watch(
+  () => locationForm.value.name,
+  () => {
+    if (getFieldError("location.name"))
+      errors.value = errors.value.filter((e) => e.field !== "location.name");
+  }
+);
+watch(
+  () => interventionForm.value.assigned_practitioner_id,
+  () => {
+    if (getFieldError("assigned_practitioner_id"))
+      errors.value = errors.value.filter(
+        (e) => e.field !== "assigned_practitioner_id"
+      );
+  }
+);
 
 defineExpose({ show, hide });
 </script>
@@ -785,7 +1150,7 @@ defineExpose({ show, hide });
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
-  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
 }
 
 /* ─── Header ─── */
@@ -807,7 +1172,7 @@ defineExpose({ show, hide });
 .header-icon {
   width: 44px;
   height: 44px;
-  background: rgba(255,255,255,0.15);
+  background: rgba(255, 255, 255, 0.15);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -825,13 +1190,13 @@ defineExpose({ show, hide });
 }
 
 .header-subtitle {
-  color: rgba(255,255,255,0.6);
+  color: rgba(255, 255, 255, 0.6);
   font-size: 0.78rem;
   margin-top: 2px;
 }
 
 .btn-close-custom {
-  background: rgba(255,255,255,0.1);
+  background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 8px;
   width: 34px;
@@ -839,13 +1204,13 @@ defineExpose({ show, hide });
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
   transition: all 0.2s;
   flex-shrink: 0;
 }
 .btn-close-custom:hover {
-  background: rgba(255,255,255,0.2);
+  background: rgba(255, 255, 255, 0.2);
   color: #fff;
 }
 
@@ -914,7 +1279,8 @@ defineExpose({ show, hide });
 }
 
 @media (max-width: 768px) {
-  .two-col-grid, .three-col-grid {
+  .two-col-grid,
+  .three-col-grid {
     grid-template-columns: 1fr;
   }
 }
@@ -950,16 +1316,36 @@ defineExpose({ show, hide });
   opacity: 0.7;
 }
 
-.deceased-icon { color: #6b7280; }
-.client-icon { color: #3b82f6; }
-.date-icon { color: #f59e0b; }
-.soin-icon { color: #10b981; }
-.statut-icon { color: #8b5cf6; }
-.practitioner-icon { color: #2d4a6e; }
-.subcontract-icon { color: #9ca3af; }
-.lieu-icon { color: #ef4444; }
-.rx-icon { color: #ec4899; }
-.note-icon { color: #f59e0b; }
+.deceased-icon {
+  color: #6b7280;
+}
+.client-icon {
+  color: #3b82f6;
+}
+.date-icon {
+  color: #f59e0b;
+}
+.soin-icon {
+  color: #10b981;
+}
+.statut-icon {
+  color: #8b5cf6;
+}
+.practitioner-icon {
+  color: #2d4a6e;
+}
+.subcontract-icon {
+  color: #9ca3af;
+}
+.lieu-icon {
+  color: #ef4444;
+}
+.rx-icon {
+  color: #ec4899;
+}
+.note-icon {
+  color: #f59e0b;
+}
 
 .required {
   color: #ef4444;
@@ -1001,7 +1387,7 @@ defineExpose({ show, hide });
 }
 .search-input-group:focus-within {
   border-color: #2d4a6e;
-  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
+  box-shadow: 0 0 0 3px rgba(45, 74, 110, 0.08);
 }
 .search-input-group.has-error {
   border-color: #ef4444;
@@ -1024,7 +1410,9 @@ defineExpose({ show, hide });
   background: transparent;
   min-width: 0;
 }
-.search-input::placeholder { color: #9ca3af; }
+.search-input::placeholder {
+  color: #9ca3af;
+}
 
 .clear-btn {
   background: none;
@@ -1036,7 +1424,9 @@ defineExpose({ show, hide });
   flex-shrink: 0;
   transition: color 0.15s;
 }
-.clear-btn:hover { color: #374151; }
+.clear-btn:hover {
+  color: #374151;
+}
 
 /* ─── Dropdown Results ─── */
 .dropdown-results {
@@ -1047,7 +1437,7 @@ defineExpose({ show, hide });
   background: #fff;
   border: 1.5px solid #e5e7eb;
   border-radius: 10px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
   z-index: 1050;
   max-height: 200px;
   overflow-y: auto;
@@ -1067,8 +1457,12 @@ defineExpose({ show, hide });
   transition: background 0.15s;
   border-bottom: 1px solid #f9fafb;
 }
-.result-item:last-child { border-bottom: none; }
-.result-item:hover { background: #f5f8ff; }
+.result-item:last-child {
+  border-bottom: none;
+}
+.result-item:hover {
+  background: #f5f8ff;
+}
 
 .dropdown-empty {
   padding: 10px 14px;
@@ -1096,8 +1490,14 @@ defineExpose({ show, hide });
   text-transform: uppercase;
   flex-shrink: 0;
 }
-.deceased-avatar { background: #f3f4f6; color: #374151; }
-.client-avatar { background: #eff6ff; color: #2563eb; }
+.deceased-avatar {
+  background: #f3f4f6;
+  color: #374151;
+}
+.client-avatar {
+  background: #eff6ff;
+  color: #2563eb;
+}
 
 .result-info {
   display: flex;
@@ -1151,8 +1551,13 @@ defineExpose({ show, hide });
   background: #fff;
   transition: border-color 0.2s;
 }
-.mini-input:focus { border-color: #2d4a6e; box-shadow: 0 0 0 3px rgba(45,74,110,0.08); }
-.mini-input.is-invalid { border-color: #ef4444; }
+.mini-input:focus {
+  border-color: #2d4a6e;
+  box-shadow: 0 0 0 3px rgba(45, 74, 110, 0.08);
+}
+.mini-input.is-invalid {
+  border-color: #ef4444;
+}
 
 /* ─── Styled Input ─── */
 .styled-input {
@@ -1168,15 +1573,19 @@ defineExpose({ show, hide });
 }
 .styled-input:focus {
   border-color: #2d4a6e;
-  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
+  box-shadow: 0 0 0 3px rgba(45, 74, 110, 0.08);
+}
+.styled-input.is-invalid {
+  border-color: #ef4444;
 }
-.styled-input.is-invalid { border-color: #ef4444; }
 
 /* ─── Select ─── */
 .select-wrapper {
   position: relative;
 }
-.select-wrapper.disabled-wrapper { opacity: 0.5; }
+.select-wrapper.disabled-wrapper {
+  opacity: 0.5;
+}
 
 .styled-select {
   width: 100%;
@@ -1193,10 +1602,14 @@ defineExpose({ show, hide });
 }
 .styled-select:focus {
   border-color: #2d4a6e;
-  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
+  box-shadow: 0 0 0 3px rgba(45, 74, 110, 0.08);
+}
+.styled-select.is-invalid {
+  border-color: #ef4444;
+}
+.styled-select:disabled {
+  cursor: not-allowed;
 }
-.styled-select.is-invalid { border-color: #ef4444; }
-.styled-select:disabled { cursor: not-allowed; }
 
 .select-chevron {
   position: absolute;
@@ -1214,7 +1627,9 @@ defineExpose({ show, hide });
   align-items: center;
   gap: 8px;
 }
-.input-with-action .styled-input { flex: 1; }
+.input-with-action .styled-input {
+  flex: 1;
+}
 
 .mic-btn {
   width: 38px;
@@ -1231,7 +1646,11 @@ defineExpose({ show, hide });
   font-size: 0.85rem;
   transition: all 0.2s;
 }
-.mic-btn:hover { border-color: #2d4a6e; color: #2d4a6e; background: #f0f5ff; }
+.mic-btn:hover {
+  border-color: #2d4a6e;
+  color: #2d4a6e;
+  background: #f0f5ff;
+}
 
 /* ─── Textarea ─── */
 .textarea-wrapper {
@@ -1253,7 +1672,7 @@ defineExpose({ show, hide });
 }
 .styled-textarea:focus {
   border-color: #2d4a6e;
-  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
+  box-shadow: 0 0 0 3px rgba(45, 74, 110, 0.08);
 }
 .textarea-mic {
   position: absolute;
@@ -1298,5 +1717,7 @@ defineExpose({ show, hide });
   align-items: center;
 }
 
-.mt-3 { margin-top: 12px; }
+.mt-3 {
+  margin-top: 12px;
+}
 </style>
diff --git a/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue b/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue
index 9f832b7..52bebcc 100644
--- a/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue
+++ b/thanasoft-front/src/components/Organism/Commande/NewCommandePresentation.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="container-fluid py-4">
+  <div class="container-fluid py-4 new-commande-page">
     <div class="row">
-      <div class="col-lg-8 mx-auto">
+      <div class="col-12 col-xl-11 mx-auto">
         <div class="card">
           <div class="card-header pb-0 p-3">
             <div class="d-flex justify-content-between align-items-center">
@@ -17,7 +17,11 @@
             </div>
           </div>
           <div class="card-body p-3">
-            <new-commande-form @submit="handleSubmit" />
+            <new-commande-form
+              @submit="handleSubmit"
+              @created="handleCreated"
+              @cancel="goBack"
+            />
           </div>
         </div>
       </div>
@@ -37,6 +41,16 @@ const goBack = () => {
 };
 
 const handleSubmit = (formData) => {
+  return formData;
+};
+
+const handleCreated = () => {
   router.push("/fournisseurs/commandes");
 };
 </script>
+
+<style scoped>
+.new-commande-page {
+  background: #f8f9fe;
+}
+</style>
diff --git a/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailContent.vue b/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailContent.vue
index f777a92..07a095d 100644
--- a/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailContent.vue
+++ b/thanasoft-front/src/components/Organism/Interventions/intervention/InterventionDetailContent.vue
@@ -269,26 +269,55 @@
       <div v-if="activeTab === 'quote'" class="tab-pane fade show active">
         <div class="card">
           <div class="card-header pb-0">
-            <div class="d-flex align-items-center">
+            <div
+              class="d-flex align-items-center justify-content-between flex-wrap gap-2"
+            >
               <h6 class="mb-0">Détails du devis</h6>
+              <router-link
+                v-if="intervention.quote?.id"
+                :to="`/ventes/devis/${intervention.quote.id}`"
+                class="btn btn-sm btn-outline-success"
+              >
+                Ouvrir le devis
+              </router-link>
             </div>
           </div>
           <div class="card-body">
             <div v-if="intervention.quote" class="row mt-4">
               <div class="col-md-6 mb-3">
-                <InfoCard title="Informations" icon="fas fa-file-invoice text-info">
+                <InfoCard
+                  title="Informations"
+                  icon="fas fa-file-invoice text-info"
+                >
                   <ul class="list-group list-group-flush">
                     <li class="list-group-item mx-0 px-0">
                       <strong class="text-dark">Référence:</strong>
-                      <span class="ms-2">{{ intervention.quote.reference || '-' }}</span>
+                      <span class="ms-2">{{
+                        intervention.quote.reference || "-"
+                      }}</span>
                     </li>
                     <li class="list-group-item mx-0 px-0">
                       <strong class="text-dark">Date:</strong>
-                      <span class="ms-2">{{ intervention.quote.quote_date || '-' }}</span>
+                      <span class="ms-2">{{
+                        intervention.quote.quote_date || "-"
+                      }}</span>
+                    </li>
+                    <li class="list-group-item mx-0 px-0">
+                      <strong class="text-dark">Validité:</strong>
+                      <span class="ms-2">{{
+                        intervention.quote.valid_until || "-"
+                      }}</span>
                     </li>
                     <li class="list-group-item mx-0 px-0">
                       <strong class="text-dark">Statut:</strong>
-                      <span class="ms-2 badge badge-sm bg-gradient-success">{{ intervention.quote.status || '-' }}</span>
+                      <span
+                        class="ms-2 badge badge-sm"
+                        :class="`bg-gradient-${getQuoteStatusColor(
+                          intervention.quote.status
+                        )}`"
+                      >
+                        {{ getQuoteStatusLabel(intervention.quote.status) }}
+                      </span>
                     </li>
                   </ul>
                 </InfoCard>
@@ -296,25 +325,76 @@
               <div class="col-md-6 mb-3">
                 <InfoCard title="Montants" icon="fas fa-euro-sign text-success">
                   <ul class="list-group list-group-flush">
-                    <li class="list-group-item mx-0 px-0 d-flex justify-content-between">
+                    <li
+                      class="list-group-item mx-0 px-0 d-flex justify-content-between"
+                    >
                       <strong class="text-dark">Total HT:</strong>
-                      <span>{{ intervention.quote.total_ht || '0.00' }} €</span>
+                      <span>{{
+                        formatCurrency(intervention.quote.total_ht)
+                      }}</span>
                     </li>
-                    <li class="list-group-item mx-0 px-0 d-flex justify-content-between">
+                    <li
+                      class="list-group-item mx-0 px-0 d-flex justify-content-between"
+                    >
                       <strong class="text-dark">Total TVA:</strong>
-                      <span>{{ intervention.quote.total_tva || '0.00' }} €</span>
+                      <span>{{
+                        formatCurrency(intervention.quote.total_tva)
+                      }}</span>
                     </li>
-                    <li class="list-group-item mx-0 px-0 d-flex justify-content-between border-0">
+                    <li
+                      class="list-group-item mx-0 px-0 d-flex justify-content-between border-0"
+                    >
                       <strong class="text-dark">Total TTC:</strong>
-                      <span class="fw-bold">{{ intervention.quote.total_ttc || '0.00' }} €</span>
+                      <span class="fw-bold">{{
+                        formatCurrency(intervention.quote.total_ttc)
+                      }}</span>
                     </li>
                   </ul>
                 </InfoCard>
               </div>
+              <div class="col-12">
+                <InfoCard title="Lignes du devis" icon="fas fa-list text-dark">
+                  <div
+                    v-if="intervention.quote.lines?.length"
+                    class="table-responsive"
+                  >
+                    <table class="table table-sm align-middle mb-0">
+                      <thead>
+                        <tr>
+                          <th>Description</th>
+                          <th class="text-center">Qté</th>
+                          <th class="text-end">Prix unitaire</th>
+                          <th class="text-end">Total HT</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr
+                          v-for="line in intervention.quote.lines"
+                          :key="line.id"
+                        >
+                          <td>{{ line.description || "-" }}</td>
+                          <td class="text-center">{{ line.units_qty || 0 }}</td>
+                          <td class="text-end">
+                            {{ formatCurrency(line.unit_price) }}
+                          </td>
+                          <td class="text-end">
+                            {{ formatCurrency(line.total_ht) }}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <p v-else class="text-sm text-muted mb-0">
+                    Aucune ligne de devis disponible.
+                  </p>
+                </InfoCard>
+              </div>
             </div>
             <div v-else class="text-center py-5">
               <div class="avatar avatar-xl mb-3">
-                <div class="avatar-title bg-gradient-secondary text-white h5 mb-0">
+                <div
+                  class="avatar-title bg-gradient-secondary text-white h5 mb-0"
+                >
                   <i class="fas fa-file-invoice"></i>
                 </div>
               </div>
@@ -364,12 +444,45 @@
 </template>
 
 <script setup>
+import { RouterLink } from "vue-router";
 import InfoCard from "@/components/atoms/client/InfoCard.vue";
 import InterventionDetails from "@/components/molecules/Interventions/interventionDetails.vue";
 import DocumentManagement from "@/components/molecules/Interventions/DocumentManagement.vue";
 import { useDocumentAttachmentStore } from "@/stores/documentAttachmentStore";
 import { defineProps, defineEmits, computed, watch, onMounted } from "vue";
 
+const getQuoteStatusLabel = (status) => {
+  const statusLabels = {
+    brouillon: "Brouillon",
+    envoye: "Envoyé",
+    accepte: "Accepté",
+    refuse: "Refusé",
+    expire: "Expiré",
+  };
+
+  return statusLabels[status] || status || "Inconnu";
+};
+
+const getQuoteStatusColor = (status) => {
+  const statusColors = {
+    brouillon: "secondary",
+    envoye: "info",
+    accepte: "success",
+    refuse: "danger",
+    expire: "warning",
+  };
+
+  return statusColors[status] || "secondary";
+};
+
+const formatCurrency = (value) => {
+  return new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: "EUR",
+    minimumFractionDigits: 2,
+  }).format(Number(value || 0));
+};
+
 const props = defineProps({
   activeTab: {
     type: String,
diff --git a/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue b/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue
index cdfea4b..0c78fdb 100644
--- a/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Invoice/InvoiceDetailPresentation.vue
@@ -17,7 +17,9 @@
   <!-- Content -->
   <invoice-detail-template v-else-if="invoice">
     <template #header>
-      <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
+      <div
+        class="d-flex justify-content-between align-items-start flex-wrap gap-3"
+      >
         <div>
           <h6 class="mb-1">Détails Facture</h6>
           <p class="text-sm mb-0">
@@ -33,7 +35,10 @@
         </div>
 
         <div class="d-flex align-items-center flex-wrap gap-2">
-          <soft-badge :color="statusBadgeColor(invoice.status)" variant="gradient">
+          <soft-badge
+            :color="statusBadgeColor(invoice.status)"
+            variant="gradient"
+          >
             <i :class="statusIcon(invoice.status) + ' me-1'"></i>
             {{ getStatusLabel(invoice.status) }}
           </soft-badge>
@@ -50,9 +55,17 @@
           <i class="fas fa-file-invoice-dollar"></i>
         </div>
         <div>
-          <h6 class="text-lg mb-0 mt-1">{{ invoice.client?.name || "Client inconnu" }}</h6>
-          <p class="text-sm mb-3">{{ invoice.lines?.length || 0 }} ligne(s) dans cette facture.</p>
-          <soft-badge :color="statusBadgeColor(invoice.status)" variant="gradient" size="sm">
+          <h6 class="text-lg mb-0 mt-1">
+            {{ invoice.client?.name || "Client inconnu" }}
+          </h6>
+          <p class="text-sm mb-3">
+            {{ invoice.lines?.length || 0 }} ligne(s) dans cette facture.
+          </p>
+          <soft-badge
+            :color="statusBadgeColor(invoice.status)"
+            variant="gradient"
+            size="sm"
+          >
             {{ getStatusLabel(invoice.status) }}
           </soft-badge>
         </div>
@@ -91,20 +104,30 @@
 
       <h6 class="mb-3 mt-4">Informations Client</h6>
       <ul class="list-group">
-        <li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg">
+        <li
+          class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg"
+        >
           <div class="d-flex flex-column">
-            <h6 class="mb-3 text-sm">{{ invoice.client?.name || "Client inconnu" }}</h6>
+            <h6 class="mb-3 text-sm">
+              {{ invoice.client?.name || "Client inconnu" }}
+            </h6>
             <span class="mb-2 text-xs">
               Adresse email :
-              <span class="text-dark ms-2 font-weight-bold">{{ invoice.client?.email || "—" }}</span>
+              <span class="text-dark ms-2 font-weight-bold">{{
+                invoice.client?.email || "—"
+              }}</span>
             </span>
             <span class="mb-2 text-xs">
               Téléphone :
-              <span class="text-dark ms-2 font-weight-bold">{{ invoice.client?.phone || "—" }}</span>
+              <span class="text-dark ms-2 font-weight-bold">{{
+                invoice.client?.phone || "—"
+              }}</span>
             </span>
             <span class="text-xs">
               Référence facture :
-              <span class="text-dark ms-2 font-weight-bold">{{ invoice.invoice_number || "—" }}</span>
+              <span class="text-dark ms-2 font-weight-bold">{{
+                invoice.invoice_number || "—"
+              }}</span>
             </span>
           </div>
         </li>
@@ -115,15 +138,21 @@
       <h6 class="mb-3">Résumé Facture</h6>
       <div class="d-flex justify-content-between">
         <span class="mb-2 text-sm">Total HT :</span>
-        <span class="text-dark font-weight-bold ms-2">{{ formatCurrency(invoice.total_ht) }}</span>
+        <span class="text-dark font-weight-bold ms-2">{{
+          formatCurrency(invoice.total_ht)
+        }}</span>
       </div>
       <div class="d-flex justify-content-between">
         <span class="mb-2 text-sm">TVA :</span>
-        <span class="text-dark ms-2 font-weight-bold">{{ formatCurrency(invoice.total_tva) }}</span>
+        <span class="text-dark ms-2 font-weight-bold">{{
+          formatCurrency(invoice.total_tva)
+        }}</span>
       </div>
       <div class="d-flex justify-content-between mt-4">
         <span class="mb-2 text-lg">Total TTC :</span>
-        <span class="text-dark text-lg ms-2 font-weight-bold">{{ formatCurrency(invoice.total_ttc) }}</span>
+        <span class="text-dark text-lg ms-2 font-weight-bold">{{
+          formatCurrency(invoice.total_ttc)
+        }}</span>
       </div>
     </template>
   </invoice-detail-template>
@@ -266,7 +295,11 @@ const changeStatus = (id, newStatus) => {
     })
     .catch((e) => {
       console.error(e);
-      notificationStore.error("Erreur", "Impossible de mettre à jour le statut", 3000);
+      notificationStore.error(
+        "Erreur",
+        "Impossible de mettre à jour le statut",
+        3000
+      );
     })
     .finally(() => {
       updating.value = false;
@@ -283,8 +316,8 @@ const changeStatus = (id, newStatus) => {
   justify-content: center;
   min-height: 60vh;
   color: #8898aa;
-  font-size: .9rem;
-  gap: .6rem;
+  font-size: 0.9rem;
+  gap: 0.6rem;
 }
 
 .detail-state--error i {
@@ -298,24 +331,30 @@ const changeStatus = (id, newStatus) => {
   border: 3px solid #e9ecef;
   border-top-color: #5e72e4;
   border-radius: 50%;
-  animation: spin .8s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 .btn-retry {
-  margin-top: .25rem;
-  padding: .4rem 1.1rem;
+  margin-top: 0.25rem;
+  padding: 0.4rem 1.1rem;
   border-radius: 8px;
   border: 1.5px solid #f5365c;
   background: none;
   color: #f5365c;
-  font-size: .8rem;
+  font-size: 0.8rem;
   font-weight: 700;
   cursor: pointer;
-  transition: background .15s;
+  transition: background 0.15s;
+}
+.btn-retry:hover {
+  background: #fff0f3;
 }
-.btn-retry:hover { background: #fff0f3; }
 
 .inv-visual {
   width: 64px;
diff --git a/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue b/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue
index afdd466..5c8c40e 100644
--- a/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Quote/QuoteCreationPresentation.vue
@@ -2,10 +2,20 @@
   <create-quote-template>
     <!-- ── Actions ── -->
     <template #actions>
-      <soft-button color="secondary" variant="outline" class="me-2" @click="cancel">
+      <soft-button
+        color="secondary"
+        variant="outline"
+        class="me-2"
+        @click="cancel"
+      >
         <i class="fas fa-times me-1"></i> Annuler
       </soft-button>
-      <soft-button color="primary" variant="gradient" :disabled="loading" @click="saveQuote">
+      <soft-button
+        color="primary"
+        variant="gradient"
+        :disabled="loading"
+        @click="saveQuote"
+      >
         <i class="fas fa-save me-1"></i>
         {{ loading ? "Enregistrement..." : "Enregistrer le devis" }}
       </soft-button>
@@ -14,7 +24,9 @@
     <!-- ── Client Selection ── -->
     <template #client-selection>
       <div class="field-group">
-        <label class="field-label">Client <span class="text-danger">*</span></label>
+        <label class="field-label"
+          >Client <span class="text-danger">*</span></label
+        >
         <select v-model="form.client_id" class="form-select field-select">
           <option value="" disabled>— Sélectionner un client —</option>
           <option v-for="client in clients" :key="client.id" :value="client.id">
@@ -62,11 +74,7 @@
 
       <!-- Lines -->
       <transition-group name="line-fade" tag="div">
-        <div
-          v-for="(line, index) in form.lines"
-          :key="index"
-          class="line-row"
-        >
+        <div v-for="(line, index) in form.lines" :key="index" class="line-row">
           <product-line-item
             v-model="form.lines[index]"
             @remove="removeLine(index)"
@@ -82,7 +90,13 @@
 
       <!-- Add Line -->
       <div class="lines-footer">
-        <soft-button type="button" color="info" variant="outline" class="add-line-btn" @click="addLine">
+        <soft-button
+          type="button"
+          color="info"
+          variant="outline"
+          class="add-line-btn"
+          @click="addLine"
+        >
           <i class="fas fa-plus-circle me-2"></i>Ajouter une ligne
         </soft-button>
       </div>
@@ -101,7 +115,9 @@
         </div>
         <div class="totals-row totals-row--final">
           <span class="totals-label">Total TTC</span>
-          <span class="totals-value totals-value--final">{{ formatCurrency(totals.ttc) }}</span>
+          <span class="totals-value totals-value--final">{{
+            formatCurrency(totals.ttc)
+          }}</span>
         </div>
       </div>
     </template>
@@ -128,9 +144,24 @@ const loading = ref(false);
 const attempted = ref(false);
 
 const statuses = [
-  { value: "brouillon", label: "Brouillon", icon: "fas fa-pencil-alt", color: "warning" },
-  { value: "envoye", label: "Envoyé", icon: "fas fa-paper-plane", color: "info" },
-  { value: "accepte", label: "Accepté", icon: "fas fa-check", color: "success" },
+  {
+    value: "brouillon",
+    label: "Brouillon",
+    icon: "fas fa-pencil-alt",
+    color: "warning",
+  },
+  {
+    value: "envoye",
+    label: "Envoyé",
+    icon: "fas fa-paper-plane",
+    color: "info",
+  },
+  {
+    value: "accepte",
+    label: "Accepté",
+    icon: "fas fa-check",
+    color: "success",
+  },
 ];
 
 const defaultLine = () => ({
@@ -155,7 +186,8 @@ const totals = computed(() => {
   let ht = 0;
   let tva = 0;
   form.value.lines.forEach((line) => {
-    const afterDiscount = line.quantity * line.unit_price * (1 - (line.discount_pct || 0) / 100);
+    const afterDiscount =
+      line.quantity * line.unit_price * (1 - (line.discount_pct || 0) / 100);
     ht += afterDiscount;
     tva += afterDiscount * (line.tva / 100);
   });
@@ -166,7 +198,9 @@ const addLine = () => form.value.lines.push(defaultLine());
 const removeLine = (index) => form.value.lines.splice(index, 1);
 
 const formatCurrency = (value) =>
-  new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(value);
+  new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(
+    value
+  );
 
 const saveQuote = async () => {
   attempted.value = true;
@@ -186,7 +220,10 @@ const saveQuote = async () => {
       lines: form.value.lines.map((line) => ({
         ...line,
         discount_pct: line.discount_pct || 0,
-        total_ht: line.quantity * line.unit_price * (1 - (line.discount_pct || 0) / 100),
+        total_ht:
+          line.quantity *
+          line.unit_price *
+          (1 - (line.discount_pct || 0) / 100),
         description: line.product_name || "Produit sans nom",
       })),
     });
@@ -245,13 +282,32 @@ onMounted(() => clientStore.fetchClients());
   color: #adb5bd;
 }
 
-.line-col--product { flex: 3; }
-.line-col--qty     { flex: 1; text-align: center; }
-.line-col--price   { flex: 1.5; text-align: right; }
-.line-col--tva     { flex: 1; text-align: center; }
-.line-col--discount{ flex: 1; text-align: center; }
-.line-col--total   { flex: 1.5; text-align: right; }
-.line-col--action  { width: 36px; }
+.line-col--product {
+  flex: 3;
+}
+.line-col--qty {
+  flex: 1;
+  text-align: center;
+}
+.line-col--price {
+  flex: 1.5;
+  text-align: right;
+}
+.line-col--tva {
+  flex: 1;
+  text-align: center;
+}
+.line-col--discount {
+  flex: 1;
+  text-align: center;
+}
+.line-col--total {
+  flex: 1.5;
+  text-align: right;
+}
+.line-col--action {
+  width: 36px;
+}
 
 /* ── Line Row ── */
 .line-row {
diff --git a/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue b/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue
index 38babd1..e3a0bf6 100644
--- a/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Quote/QuoteDetailPresentation.vue
@@ -17,7 +17,9 @@
   <!-- Content -->
   <quote-detail-template v-else-if="quote">
     <template #header>
-      <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
+      <div
+        class="d-flex justify-content-between align-items-start flex-wrap gap-3"
+      >
         <div>
           <h6 class="mb-1">Quote Details</h6>
           <p class="text-sm mb-0">
@@ -33,7 +35,10 @@
         </div>
 
         <div class="d-flex align-items-center flex-wrap gap-2">
-          <soft-badge :color="statusBadgeColor(quote.status)" variant="gradient">
+          <soft-badge
+            :color="statusBadgeColor(quote.status)"
+            variant="gradient"
+          >
             <i :class="statusIcon(quote.status) + ' me-1'"></i>
             {{ getStatusLabel(quote.status) }}
           </soft-badge>
@@ -50,9 +55,17 @@
           <i class="fas fa-file-signature"></i>
         </div>
         <div>
-          <h6 class="text-lg mb-0 mt-1">{{ quote.client?.name || "Client inconnu" }}</h6>
-          <p class="text-sm mb-3">{{ quote.lines?.length || 0 }} ligne(s) dans ce devis.</p>
-          <soft-badge :color="statusBadgeColor(quote.status)" variant="gradient" size="sm">
+          <h6 class="text-lg mb-0 mt-1">
+            {{ quote.client?.name || "Client inconnu" }}
+          </h6>
+          <p class="text-sm mb-3">
+            {{ quote.lines?.length || 0 }} ligne(s) dans ce devis.
+          </p>
+          <soft-badge
+            :color="statusBadgeColor(quote.status)"
+            variant="gradient"
+            size="sm"
+          >
             {{ getStatusLabel(quote.status) }}
           </soft-badge>
         </div>
@@ -91,20 +104,30 @@
 
       <h6 class="mb-3 mt-4">Billing Information</h6>
       <ul class="list-group">
-        <li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg">
+        <li
+          class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg"
+        >
           <div class="d-flex flex-column">
-            <h6 class="mb-3 text-sm">{{ quote.client?.name || "Client inconnu" }}</h6>
+            <h6 class="mb-3 text-sm">
+              {{ quote.client?.name || "Client inconnu" }}
+            </h6>
             <span class="mb-2 text-xs">
               Email Address:
-              <span class="text-dark ms-2 font-weight-bold">{{ quote.client?.email || "—" }}</span>
+              <span class="text-dark ms-2 font-weight-bold">{{
+                quote.client?.email || "—"
+              }}</span>
             </span>
             <span class="mb-2 text-xs">
               Phone:
-              <span class="text-dark ms-2 font-weight-bold">{{ quote.client?.phone || "—" }}</span>
+              <span class="text-dark ms-2 font-weight-bold">{{
+                quote.client?.phone || "—"
+              }}</span>
             </span>
             <span class="text-xs">
               Quote Reference:
-              <span class="text-dark ms-2 font-weight-bold">{{ quote.reference || "—" }}</span>
+              <span class="text-dark ms-2 font-weight-bold">{{
+                quote.reference || "—"
+              }}</span>
             </span>
           </div>
         </li>
@@ -115,15 +138,21 @@
       <h6 class="mb-3">Quote Summary</h6>
       <div class="d-flex justify-content-between">
         <span class="mb-2 text-sm">Total HT:</span>
-        <span class="text-dark font-weight-bold ms-2">{{ formatCurrency(quote.total_ht) }}</span>
+        <span class="text-dark font-weight-bold ms-2">{{
+          formatCurrency(quote.total_ht)
+        }}</span>
       </div>
       <div class="d-flex justify-content-between">
         <span class="mb-2 text-sm">TVA:</span>
-        <span class="text-dark ms-2 font-weight-bold">{{ formatCurrency(quote.total_tva) }}</span>
+        <span class="text-dark ms-2 font-weight-bold">{{
+          formatCurrency(quote.total_tva)
+        }}</span>
       </div>
       <div class="d-flex justify-content-between mt-4">
         <span class="mb-2 text-lg">Total TTC:</span>
-        <span class="text-dark text-lg ms-2 font-weight-bold">{{ formatCurrency(quote.total_ttc) }}</span>
+        <span class="text-dark text-lg ms-2 font-weight-bold">{{
+          formatCurrency(quote.total_ttc)
+        }}</span>
       </div>
     </template>
   </quote-detail-template>
@@ -188,7 +217,14 @@ const formatCurrency = (value) => {
   }).format(amount);
 };
 
-const availableStatuses = ["brouillon", "envoye", "accepte", "refuse", "expire", "annule"];
+const availableStatuses = [
+  "brouillon",
+  "envoye",
+  "accepte",
+  "refuse",
+  "expire",
+  "annule",
+];
 
 const statusLabels = {
   brouillon: "Brouillon",
@@ -248,7 +284,11 @@ const changeStatus = (id, newStatus) => {
     })
     .catch((e) => {
       console.error(e);
-      notificationStore.error("Erreur", "Impossible de mettre à jour le statut", 3000);
+      notificationStore.error(
+        "Erreur",
+        "Impossible de mettre à jour le statut",
+        3000
+      );
     })
     .finally(() => {
       updating.value = false;
@@ -265,8 +305,8 @@ const changeStatus = (id, newStatus) => {
   justify-content: center;
   min-height: 60vh;
   color: #8898aa;
-  font-size: .9rem;
-  gap: .6rem;
+  font-size: 0.9rem;
+  gap: 0.6rem;
 }
 
 .detail-state--error i {
@@ -280,24 +320,30 @@ const changeStatus = (id, newStatus) => {
   border: 3px solid #e9ecef;
   border-top-color: #5e72e4;
   border-radius: 50%;
-  animation: spin .8s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 .btn-retry {
-  margin-top: .25rem;
-  padding: .4rem 1.1rem;
+  margin-top: 0.25rem;
+  padding: 0.4rem 1.1rem;
   border-radius: 8px;
   border: 1.5px solid #f5365c;
   background: none;
   color: #f5365c;
-  font-size: .8rem;
+  font-size: 0.8rem;
   font-weight: 700;
   cursor: pointer;
-  transition: background .15s;
+  transition: background 0.15s;
+}
+.btn-retry:hover {
+  background: #fff0f3;
 }
-.btn-retry:hover { background: #fff0f3; }
 
 .qd-visual {
   width: 64px;
diff --git a/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue b/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
index 2f1523f..a0afbab 100644
--- a/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
+++ b/thanasoft-front/src/components/Organism/Stock/ProductDetailsPresentation.vue
@@ -1,908 +1,376 @@
 <template>
-  <div class="py-4 container-fluid">
-    <!-- Header Section -->
-    <div class="row">
-      <div class="col-lg-6">
-        <h4>{{ isEditMode ? "Modifier le produit" : "Détails du produit" }}</h4>
-        <p>
-          {{
-            isEditMode
-              ? "Modifiez les informations du produit ci-dessous."
-              : "Informations détaillées du produit."
-          }}
-        </p>
-      </div>
-      <div
-        class="text-right col-lg-6 d-flex flex-column justify-content-center"
-      >
-        <div class="w-100 mt-lg-0">
-          <div v-if="!isEditMode" class="d-flex align-items-center gap-2 w-100">
-            <div class="flex-grow-1 d-flex justify-content-center">
-              <button
-                type="button"
-                class="btn btn-outline-secondary btn-sm"
-                @click="goBack"
-              >
-                <i class="fas fa-arrow-left me-2"></i>
-                Retour à la liste
-              </button>
-            </div>
+  <div class="pdp">
 
-            <div class="d-flex gap-2 ms-auto">
-              <button
-                type="button"
-                class="mt-2 mb-0 btn bg-gradient-info"
-                @click="toggleEditMode"
-              >
-                <i class="fas fa-edit me-2"></i>
-                Modifier
-              </button>
-              <button
-                type="button"
-                class="mt-2 mb-0 btn bg-gradient-danger"
-                :disabled="loading"
-                @click="deleteProduct"
-              >
-                <i class="fas fa-trash me-2"></i>
-                Supprimer
-              </button>
-            </div>
-          </div>
-          <div v-else class="d-flex gap-2">
-            <button
-              type="button"
-              class="mt-2 mb-0 btn bg-gradient-secondary"
-              @click="cancelEdit"
-            >
-              Annuler
-            </button>
-            <button
-              type="button"
-              class="mt-2 mb-0 btn bg-gradient-success"
-              :disabled="saving"
-              @click="saveProduct"
-            >
-              <i v-if="saving" class="fas fa-spinner fa-spin me-2"></i>
-              <i v-else class="fas fa-save me-2"></i>
-              Sauvegarder
-            </button>
+    <!-- ── Loading ── -->
+    <div v-if="loading" class="pdp__state">
+      <div class="pdp__spinner"></div>
+      <p>Chargement du produit…</p>
+    </div>
+
+    <!-- ── Error ── -->
+    <div v-else-if="error" class="pdp__state">
+      <svg class="pdp__state-icon pdp__state-icon--danger" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
+      <h5>Erreur de chargement</h5>
+      <p>{{ error }}</p>
+      <SoftButton color="primary" variant="outline" size="sm" @click="loadProduct">
+        Réessayer
+      </SoftButton>
+    </div>
+
+    <!-- ── Empty ── -->
+    <div v-else-if="!productData" class="pdp__state">
+      <svg class="pdp__state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M20 7H4a2 2 0 00-2 2v9a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zM16 3H8l-2 4h12l-2-4z"/></svg>
+      <h5>Produit introuvable</h5>
+      <p>Ce produit n'existe pas ou a été supprimé.</p>
+      <SoftButton color="primary" variant="outline" size="sm" @click="goBack">
+        Retour à la liste
+      </SoftButton>
+    </div>
+
+    <!-- ── Main Content ── -->
+    <template v-else>
+
+      <!-- Top bar -->
+      <div class="pdp__topbar">
+        <div class="pdp__topbar-left">
+          <SoftButton color="secondary" variant="outline" size="sm" @click="goBack">
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 3L5 8l5 5"/></svg>
+            Retour
+          </SoftButton>
+          <div class="pdp__breadcrumb">
+            <span>Stock</span>
+            <span class="pdp__breadcrumb-sep">/</span>
+            <span>Produits</span>
+            <span class="pdp__breadcrumb-sep">/</span>
+            <span class="pdp__breadcrumb-current">{{ productData.nom }}</span>
           </div>
         </div>
+        <div class="pdp__topbar-actions">
+          <template v-if="!isEditMode">
+            <SoftButton color="primary" variant="outline" size="sm" @click="toggleEditMode">
+              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z"/></svg>
+              Modifier
+            </SoftButton>
+            <SoftButton color="danger" variant="gradient" size="sm" :disabled="loading" @click="deleteProduct">
+              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h10M6 4V2h4v2M5 4v9a1 1 0 001 1h4a1 1 0 001-1V4"/></svg>
+              Supprimer
+            </SoftButton>
+          </template>
+          <template v-else>
+            <SoftButton color="secondary" variant="outline" size="sm" :disabled="saving" @click="cancelEdit">
+              Annuler
+            </SoftButton>
+            <SoftButton color="primary" variant="gradient" size="sm" :disabled="saving" @click="saveProduct">
+              <svg v-if="saving" class="pdp-btn__spin" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1v3M8 12v3M1 8h3M12 8h3"/></svg>
+              <svg v-else width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8l3 3 7-7"/></svg>
+              {{ saving ? "Sauvegarde…" : "Sauvegarder" }}
+            </SoftButton>
+          </template>
+        </div>
       </div>
-    </div>
 
-    <!-- Validation Errors Alert -->
-    <div
-      v-if="Object.keys(validationErrors).length > 0"
-      class="mt-4 alert alert-danger"
-      role="alert"
-    >
-      <h6>
-        <i class="fas fa-exclamation-triangle me-2"></i>Erreurs de validation
-      </h6>
-      <ul class="mb-0">
-        <li v-for="(errors, field) in validationErrors" :key="field">
-          <strong>{{ getFieldLabel(field) }}:</strong>
-          <span v-for="error in errors" :key="error">{{ error }}</span>
-        </li>
-      </ul>
-    </div>
-
-    <!-- Loading State -->
-    <div v-if="loading" class="loading-container">
-      <div class="loading-spinner">
-        <i class="fas fa-spinner fa-spin fa-2x"></i>
-        <p>Chargement des informations du produit...</p>
+      <!-- Validation errors -->
+      <div v-if="hasValidationErrors" class="pdp__errors" role="alert">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 5v3M8 10.5v.5"/></svg>
+        <div>
+          <strong>Erreurs de validation</strong>
+          <ul>
+            <li v-for="(errs, field) in validationErrors" :key="field">
+              <b>{{ getFieldLabel(field) }} :</b> {{ errs[0] }}
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
 
-    <!-- Error State -->
-    <div v-else-if="error" class="error-container">
-      <div class="error-message">
-        <i class="fas fa-exclamation-triangle fa-2x text-danger mb-3"></i>
-        <h5>Erreur de chargement</h5>
-        <p>{{ error }}</p>
-        <button
-          type="button"
-          class="btn btn-outline-primary btn-sm"
-          @click="loadProduct"
-        >
-          Réessayer
-        </button>
-      </div>
-    </div>
+      <!-- Body -->
+      <div class="pdp__body">
 
-    <!-- Product details/Edit form -->
-    <div v-else-if="productData" class="product-details-content mt-3">
-      <div class="row g-4">
-        <div class="col-xl-3 col-lg-4">
-          <div class="card product-side-nav-card">
-            <div class="card-body pb-2">
-              <div class="product-sidebar-profile">
-                <div class="product-sidebar-image">
+        <!-- Sidebar -->
+        <product-sidebar
+          v-model="activeTab"
+          :name="productData.nom"
+          :reference="productData.reference"
+          :image-url="productData.media?.photo_url"
+          :is-low-stock="productData.is_low_stock"
+          :is-expired="isExpired"
+          :is-expiring-soon="isExpiringSoon"
+          :tabs="tabs"
+        />
+
+        <!-- Panel -->
+        <div class="pdp__panel">
+
+          <!-- Edit mode banner -->
+          <transition name="pdp-fade">
+            <div v-if="isEditMode" class="pdp__edit-banner">
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z"/></svg>
+              Mode édition — modifiez les champs puis cliquez sur Sauvegarder
+            </div>
+          </transition>
+
+          <!-- Tab: Détails -->
+          <div v-show="activeTab === 'details'">
+            <!-- Hero -->
+            <div class="pdp-card pdp-card--hero">
+              <div class="pdp-hero">
+                <div class="pdp-hero__img">
                   <product-image
                     :image-url="productData.media?.photo_url"
                     :alt-text="`Image de ${productData.nom}`"
                   />
                 </div>
-                <h6 class="product-sidebar-title text-center mb-1">
-                  {{ productData.nom }}
-                </h6>
-                <p class="product-sidebar-reference text-center mb-0">
-                  {{ productData.reference || "Sans référence" }}
-                </p>
-                <div class="product-sidebar-badges mt-3">
-                  <span
-                    class="badge"
-                    :class="
-                      productData.is_low_stock
-                        ? 'bg-warning text-dark'
-                        : 'bg-success'
-                    "
-                  >
-                    {{ productData.is_low_stock ? "Stock faible" : "Stock OK" }}
-                  </span>
-                  <span v-if="isExpired" class="badge bg-danger">Expiré</span>
-                  <span
-                    v-else-if="isExpiringSoon"
-                    class="badge bg-info text-dark"
-                    >Expire bientôt</span
-                  >
-                </div>
-              </div>
-            </div>
-
-            <hr class="horizontal dark my-2 mx-3" />
-
-            <div class="card-body pt-2">
-              <ul class="nav nav-pills flex-column product-nav">
-                <li class="nav-item">
-                  <a
-                    class="nav-link"
-                    :class="{ active: activeTab === 'details' }"
-                    href="javascript:;"
-                    @click="activeTab = 'details'"
-                  >
-                    <i class="fas fa-info-circle me-2"></i>
-                    <span class="text-sm">Détails</span>
-                  </a>
-                </li>
-                <li class="nav-item pt-2">
-                  <a
-                    class="nav-link"
-                    :class="{ active: activeTab === 'stock' }"
-                    href="javascript:;"
-                    @click="activeTab = 'stock'"
-                  >
-                    <i class="fas fa-boxes me-2"></i>
-                    <span class="text-sm">Stock</span>
-                  </a>
-                </li>
-                <li class="nav-item pt-2">
-                  <a
-                    class="nav-link"
-                    :class="{ active: activeTab === 'movements' }"
-                    href="javascript:;"
-                    @click="activeTab = 'movements'"
-                  >
-                    <i class="fas fa-exchange-alt me-2"></i>
-                    <span class="text-sm">Mouvements de stock</span>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <div class="col-xl-9 col-lg-8">
-          <div v-show="activeTab === 'details'">
-            <!-- Product Header Card -->
-            <div class="card">
-              <div class="card-header bg-gradient-primary text-white">
-                <div class="row align-items-center">
-                  <div class="col-md-3">
-                    <div class="product-image-container">
-                      <product-image
-                        :image-url="productData.media?.photo_url"
-                        :alt-text="`Image de ${productData.nom}`"
-                      />
-                    </div>
-                  </div>
-                  <div class="col-md-9">
-                    <div class="product-title-area">
-                      <h2 class="mb-2">{{ productData.nom }}</h2>
-                      <p v-if="productData.reference" class="mb-3">
-                        {{ productData.reference }}
-                      </p>
-                      <div class="product-status-indicators">
-                        <div
-                          v-if="productData.is_low_stock"
-                          class="status-indicator low-stock me-2 mb-2"
-                        >
-                          <i class="fas fa-exclamation-triangle"></i>
-                          <span>Stock faible</span>
-                        </div>
-                        <div
-                          v-if="isExpired"
-                          class="status-indicator expired me-2 mb-2"
-                        >
-                          <i class="fas fa-times-circle"></i>
-                          <span>Expiré</span>
-                        </div>
-                        <div
-                          v-else-if="isExpiringSoon"
-                          class="status-indicator expiring me-2 mb-2"
-                        >
-                          <i class="fas fa-clock"></i>
-                          <span>Expire bientôt</span>
-                        </div>
-                      </div>
-                    </div>
+                <div class="pdp-hero__info">
+                  <h1 class="pdp-hero__name">{{ productData.nom }}</h1>
+                  <p v-if="productData.reference" class="pdp-hero__ref">{{ productData.reference }}</p>
+                  <div class="pdp-hero__badges">
+                    <product-badge :variant="productData.is_low_stock ? 'warning' : 'success'">
+                      {{ productData.is_low_stock ? "Stock faible" : "Stock OK" }}
+                    </product-badge>
+                    <product-badge v-if="isExpired" variant="danger">Expiré</product-badge>
+                    <product-badge v-else-if="isExpiringSoon" variant="info">Expire bientôt</product-badge>
                   </div>
                 </div>
               </div>
             </div>
 
-            <!-- General Information Card -->
-            <div class="mt-4 card">
-              <div class="card-body">
-                <h5 class="font-weight-bolder mb-4">Informations générales</h5>
-
-                <div class="row">
-                  <div class="col-md-6">
-                    <label>Nom du produit *</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.nom"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.nom }"
-                      type="text"
-                      placeholder="Nom du produit"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.nom }}
-                    </p>
-                    <div v-if="validationErrors.nom" class="invalid-feedback">
-                      {{ validationErrors.nom[0] }}
-                    </div>
-                  </div>
-                  <div class="col-md-6">
-                    <label>Référence *</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.reference"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.reference }"
-                      type="text"
-                      placeholder="Référence du produit"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.reference }}
-                    </p>
-                    <div
-                      v-if="validationErrors.reference"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.reference[0] }}
-                    </div>
-                  </div>
-                </div>
-
-                <div class="row mt-3">
-                  <div class="col-md-6">
-                    <label>Catégorie *</label>
-                    <select
-                      v-if="isEditMode"
-                      v-model="formData.categorie_id"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.categorie_id }"
-                    >
-                      <option value="">Sélectionner une catégorie</option>
-                      <option
-                        v-for="category in categories"
-                        :key="category.id"
-                        :value="category.id.toString()"
-                      >
-                        {{ category.name }}
-                      </option>
-                    </select>
-                    <p v-else class="form-control-static">
-                      {{ displayCategoryName }}
-                    </p>
-                    <div
-                      v-if="validationErrors.categorie_id"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.categorie_id[0] }}
-                    </div>
-                  </div>
-                  <div class="col-md-6">
-                    <label>Fabricant</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.fabricant"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.fabricant }"
-                      type="text"
-                      placeholder="Fabricant"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.fabricant || "Non renseigné" }}
-                    </p>
-                    <div
-                      v-if="validationErrors.fabricant"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.fabricant[0] }}
-                    </div>
-                  </div>
-                </div>
-
-                <div class="row mt-3">
-                  <div class="col-md-6">
-                    <label>Numéro de lot</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.numero_lot"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.numero_lot }"
-                      type="text"
-                      placeholder="Numéro de lot"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.numero_lot || "Non renseigné" }}
-                    </p>
-                    <div
-                      v-if="validationErrors.numero_lot"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.numero_lot[0] }}
-                    </div>
-                  </div>
-                  <div class="col-md-6">
-                    <label>Date d'expiration</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.date_expiration"
-                      class="form-control"
-                      :class="{
-                        'is-invalid': validationErrors.date_expiration,
-                      }"
-                      type="date"
-                      :min="new Date().toISOString().split('T')[0]"
-                    />
-                    <p
-                      v-else
-                      class="form-control-static"
-                      :class="expirationStatusClass"
-                    >
-                      {{ formattedExpiration }}
-                    </p>
-                    <div
-                      v-if="validationErrors.date_expiration"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.date_expiration[0] }}
-                    </div>
-                  </div>
-                </div>
-
-                <div class="row mt-3">
-                  <div class="col-md-6">
-                    <label>Unité *</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.unite"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.unite }"
-                      type="text"
-                      placeholder="Unité de mesure"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.unite }}
-                    </p>
-                    <div v-if="validationErrors.unite" class="invalid-feedback">
-                      {{ validationErrors.unite[0] }}
-                    </div>
-                  </div>
-                  <div class="col-md-6">
-                    <label>Description</label>
-                    <textarea
-                      v-if="isEditMode"
-                      v-model="formData.description"
-                      class="form-control"
-                      rows="3"
-                      placeholder="Description du produit"
-                    ></textarea>
-                    <p v-else class="form-control-static">
-                      {{ productData.description || "Aucune description" }}
-                    </p>
-                  </div>
-                </div>
+            <!-- Informations générales -->
+            <div class="pdp-card mt-3">
+              <div class="pdp-card__header">
+                <span class="pdp-card__title">Informations générales</span>
+              </div>
+              <div class="pdp-card__body">
+                <product-info-section
+                  :product="productData"
+                  :form="formData"
+                  :categories="categories"
+                  :errors="validationErrors"
+                  :edit-mode="isEditMode"
+                  :category-name="displayCategoryName"
+                  @update:form="formData = $event"
+                />
               </div>
             </div>
 
-            <!-- Conditioning Card -->
-            <div class="mt-4 card">
-              <div class="card-body">
-                <h5 class="font-weight-bolder mb-4">Conditionnement</h5>
-
-                <div class="row">
-                  <div class="col-md-4">
-                    <label>Stock actuel *</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.stock_actuel"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.stock_actuel }"
-                      type="number"
-                      min="0"
-                      step="1"
-                      placeholder="0"
-                    />
-                    <div v-else class="stock-display">
-                      <span class="stock-quantity">{{
-                        productData.stock_actuel || 0
-                      }}</span>
-                      <span class="stock-unit">{{ productData.unite }}</span>
-                      <span v-if="productData.stock_minimum" class="stock-min">
-                        (Min: {{ productData.stock_minimum }}
-                        {{ productData.unite }})
-                      </span>
-                    </div>
-                    <div
-                      v-if="validationErrors.stock_actuel"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.stock_actuel[0] }}
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <label>Stock minimum *</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.stock_minimum"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.stock_minimum }"
-                      type="number"
-                      min="0"
-                      step="1"
-                      placeholder="0"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.stock_minimum || 0 }}
-                    </p>
-                    <div
-                      v-if="validationErrors.stock_minimum"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.stock_minimum[0] }}
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <label>Prix unitaire *</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.prix_unitaire"
-                      class="form-control"
-                      :class="{ 'is-invalid': validationErrors.prix_unitaire }"
-                      type="number"
-                      min="0"
-                      step="0.01"
-                      placeholder="0.00"
-                    />
-                    <price-display
-                      v-else
-                      :price="productData.prix_unitaire"
-                      :currency="'€'"
-                      :unit="productData.unite"
-                    />
-                    <div
-                      v-if="validationErrors.prix_unitaire"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.prix_unitaire[0] }}
-                    </div>
-                  </div>
-                </div>
+            <!-- Fournisseur -->
+            <div class="pdp-card mt-3">
+              <div class="pdp-card__header">
+                <span class="pdp-card__title">Fournisseur</span>
+              </div>
+              <div class="pdp-card__body">
+                <product-supplier-section
+                  :supplier="productData.fournisseur"
+                  @view="handleViewSupplier"
+                />
               </div>
             </div>
 
-            <!-- Supplier Card -->
-            <div class="mt-4 card">
-              <div class="card-body">
-                <h5 class="font-weight-bolder mb-4">Fournisseur</h5>
-                <div v-if="productData.fournisseur" class="supplier-info">
-                  <div class="supplier-details">
-                    <div class="supplier-main">
-                      <span class="supplier-name">{{
-                        productData.fournisseur.name ||
-                        productData.fournisseur.nom
-                      }}</span>
-                      <span
-                        v-if="productData.fournisseur.email"
-                        class="supplier-email"
-                      >
-                        {{ productData.fournisseur.email }}
-                      </span>
-                    </div>
-                    <button
-                      class="supplier-action-btn"
-                      title="Voir le fournisseur"
-                      @click="handleViewSupplier(productData.fournisseur)"
-                    >
-                      <i class="fas fa-external-link-alt"></i>
-                    </button>
-                  </div>
-                </div>
-                <div v-else class="no-supplier">
-                  <span class="no-supplier-text"
-                    >Aucun fournisseur associé</span
-                  >
-                </div>
+            <!-- Documents -->
+            <div v-if="hasDocuments" class="pdp-card mt-3">
+              <div class="pdp-card__header">
+                <span class="pdp-card__title">Documents</span>
               </div>
-            </div>
-
-            <!-- Documents Card -->
-            <div v-if="hasDocuments" class="mt-4 card">
-              <div class="card-body">
-                <h5 class="font-weight-bolder mb-4">Documents</h5>
-                <div class="documents-list">
-                  <div
-                    v-if="productData.media?.fiche_technique_url"
-                    class="document-item"
-                  >
-                    <i class="fas fa-file-pdf document-icon"></i>
-                    <div class="document-details">
-                      <span class="document-name">Fiche technique</span>
-                      <a
-                        :href="productData.media.fiche_technique_url"
-                        target="_blank"
-                        class="document-link"
-                      >
-                        <i class="fas fa-download"></i>
-                        Télécharger
-                      </a>
-                    </div>
-                  </div>
-                </div>
+              <div class="pdp-card__body">
+                <a
+                  :href="productData.media.fiche_technique_url"
+                  target="_blank"
+                  class="pdp-doc"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/><path d="M14 2v6h6M12 18v-6M9 15l3 3 3-3"/></svg>
+                  <span class="pdp-doc__name">Fiche technique</span>
+                  <span class="pdp-doc__action">Télécharger</span>
+                </a>
               </div>
             </div>
           </div>
 
+          <!-- Tab: Stock -->
           <div v-show="activeTab === 'stock'">
-            <!-- Stock and Pricing Card -->
-            <div class="card">
-              <div class="card-body">
-                <h5 class="font-weight-bolder mb-4">Stock et tarification</h5>
-
-                <div class="row">
-                  <div class="col-md-6">
-                    <label>Nom du conditionnement</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.conditionnement_nom"
-                      class="form-control"
-                      :class="{
-                        'is-invalid': validationErrors.conditionnement_nom,
-                      }"
-                      type="text"
-                      placeholder="Nom du conditionnement"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.conditionnement?.nom || "Non spécifié" }}
-                    </p>
-                    <div
-                      v-if="validationErrors.conditionnement_nom"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.conditionnement_nom[0] }}
-                    </div>
-                  </div>
-                  <div class="col-md-6">
-                    <label>Quantité par conditionnement</label>
-                    <input
-                      v-if="isEditMode"
-                      v-model="formData.conditionnement_quantite"
-                      class="form-control"
-                      :class="{
-                        'is-invalid': validationErrors.conditionnement_quantite,
-                      }"
-                      type="number"
-                      min="0"
-                      step="1"
-                      placeholder="0"
-                    />
-                    <p v-else class="form-control-static">
-                      {{ productData.conditionnement?.quantite || "0" }}
-                      {{ productData.conditionnement?.unite || "" }}
-                    </p>
-                    <div
-                      v-if="validationErrors.conditionnement_quantite"
-                      class="invalid-feedback"
-                    >
-                      {{ validationErrors.conditionnement_quantite[0] }}
-                    </div>
-                  </div>
-                </div>
+            <div class="pdp-card">
+              <div class="pdp-card__header">
+                <span class="pdp-card__title">Stock & tarification</span>
               </div>
-            </div>
-
-            <div class="mt-4 card">
-              <div class="card-body">
-                <h6 class="mb-3">Indicateurs de stock</h6>
-                <div class="d-flex flex-wrap gap-2">
-                  <span
-                    class="badge"
-                    :class="
-                      productData.is_low_stock
-                        ? 'bg-warning text-dark'
-                        : 'bg-success'
-                    "
-                  >
-                    {{ productData.is_low_stock ? "Stock faible" : "Stock OK" }}
-                  </span>
-                  <span v-if="isExpired" class="badge bg-danger">Expiré</span>
-                  <span
-                    v-else-if="isExpiringSoon"
-                    class="badge bg-info text-dark"
-                    >Expire bientôt</span
-                  >
-                </div>
+              <div class="pdp-card__body">
+                <product-stock-section
+                  :product="productData"
+                  :form="formData"
+                  :errors="validationErrors"
+                  :edit-mode="isEditMode"
+                  :is-expired="isExpired"
+                  :is-expiring-soon="isExpiringSoon"
+                  @update:form="formData = $event"
+                />
               </div>
             </div>
           </div>
 
+          <!-- Tab: Mouvements -->
           <div v-show="activeTab === 'movements'">
-            <div class="card">
-              <div class="card-body">
-                <h5 class="font-weight-bolder mb-4">Mouvements de stock</h5>
-                <div v-if="stockMovements.length === 0" class="text-muted">
-                  Aucun mouvement de stock disponible.
-                </div>
-                <div v-else class="table-responsive">
-                  <table class="table align-items-center mb-0">
-                    <thead>
-                      <tr>
-                        <th
-                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
-                        >
-                          Date
-                        </th>
-                        <th
-                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
-                        >
-                          Type
-                        </th>
-                        <th
-                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
-                        >
-                          Quantité
-                        </th>
-                        <th
-                          class="text-uppercase text-secondary text-xxs font-weight-bolder"
-                        >
-                          Référence
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr v-for="movement in stockMovements" :key="movement.id">
-                        <td class="text-sm">
-                          {{ movement.date || movement.created_at || "-" }}
-                        </td>
-                        <td class="text-sm">{{ movement.type || "-" }}</td>
-                        <td class="text-sm">
-                          {{ movement.quantite ?? movement.quantity ?? "-" }}
-                        </td>
-                        <td class="text-sm">
-                          {{ movement.reference || movement.reason || "-" }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
+            <div class="pdp-card">
+              <div class="pdp-card__header">
+                <span class="pdp-card__title">Mouvements de stock</span>
+                <span class="pdp-card__count">{{ stockMovements.length }}</span>
+              </div>
+              <div class="pdp-card__body pdp-card__body--flush">
+                <product-movements-section :movements="stockMovements" />
               </div>
             </div>
           </div>
+
         </div>
       </div>
-    </div>
-
-    <!-- Empty State -->
-    <div v-else class="empty-container">
-      <div class="empty-message">
-        <i class="fas fa-box fa-3x text-muted mb-3"></i>
-        <h5>Produit non trouvé</h5>
-        <p>Le produit demandé n'existe pas ou a été supprimé.</p>
-        <button
-          type="button"
-          class="btn btn-outline-primary btn-sm"
-          @click="goBack"
-        >
-          Retour à la liste
-        </button>
-      </div>
-    </div>
+    </template>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed, defineProps, defineEmits } from "vue";
+import { ref, onMounted, computed, defineEmits, defineProps } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import ProductService from "@/services/product";
-import { useProductStore } from "@/stores/productStore";
+import ProductService           from "@/services/product";
+import { useProductStore }      from "@/stores/productStore";
 import { useProductCategoryStore } from "@/stores/productCategoryStore";
-import ProductImage from "@/components/atoms/Product/ProductImage.vue";
-import PriceDisplay from "@/components/atoms/Product/PriceDisplay.vue";
 
-const route = useRoute();
-const router = useRouter();
+/* atoms */
+import ProductImage    from "@/components/atoms/Product/ProductImage.vue";
+import ProductBadge    from "@/components/atoms/Product/ProductBadge.vue";
+import SoftButton      from "@/components/SoftButton.vue";
+/* molecules */
+import ProductSidebar         from "@/components/molecules/Product/ProductSidebar.vue";
+import ProductInfoSection     from "@/components/molecules/Product/ProductInfoSection.vue";
+import ProductStockSection    from "@/components/molecules/Product/ProductStockSection.vue";
+import ProductSupplierSection from "@/components/molecules/Product/ProductSupplierSection.vue";
+import ProductMovementsSection from "@/components/molecules/Product/ProductMovementsSection.vue";
+
+const route        = useRoute();
+const router       = useRouter();
 const productStore = useProductStore();
 const productCategoryStore = useProductCategoryStore();
+const emit = defineEmits(["view-supplier"]);
 
-const emit = defineEmits(["viewSupplier"]);
-
-const loading = ref(true);
-const saving = ref(false);
-const error = ref(null);
+/* ── state ──────────────────────────────────────────────── */
+const loading          = ref(true);
+const saving           = ref(false);
+const error            = ref(null);
 const validationErrors = ref({});
-const productData = ref(null);
-const isEditMode = ref(false);
-const originalData = ref(null);
-const categories = ref([]);
-const activeTab = ref("details");
-const stockMovements = ref([]);
+const productData      = ref(null);
+const isEditMode       = ref(false);
+const originalData     = ref(null);
+const categories       = ref([]);
+const activeTab        = ref("details");
+const stockMovements   = ref([]);
+
 const formData = ref({
-  nom: "",
-  reference: "",
-  categorie_id: "",
-  fabricant: "",
-  numero_lot: "",
-  date_expiration: "",
-  unite: "",
-  description: "",
-  stock_actuel: "",
-  stock_minimum: "",
-  prix_unitaire: "",
-  conditionnement_nom: "",
-  conditionnement_quantite: "",
+  nom: "", reference: "", categorie_id: "", fabricant: "",
+  numero_lot: "", date_expiration: "", unite: "", description: "",
+  stock_actuel: "", stock_minimum: "", prix_unitaire: "",
+  conditionnement_nom: "", conditionnement_quantite: "",
 });
 
-const productId = computed(() => {
-  return parseInt(route.params.id);
+/* ── tabs config ─────────────────────────────────────────── */
+// Using inline SVG render functions to keep it self-contained
+// Replace with your icon library's components as needed
+import { defineComponent, h } from "vue";
+const IconInfo = defineComponent({ render: () => h("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, [h("circle", { cx: "8", cy: "8", r: "6" }), h("path", { d: "M8 7v5M8 5.5v.5" })]) });
+const IconBox  = defineComponent({ render: () => h("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, [h("path", { d: "M2 5l6-3 6 3v6l-6 3-6-3V5z" }), h("path", { d: "M8 2v12M2 5l6 3 6-3" })]) });
+const IconMove = defineComponent({ render: () => h("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, [h("path", { d: "M3 8h10M9 4l4 4-4 4" })]) });
+
+const tabs = [
+  { id: "details",   label: "Détails",          icon: IconInfo },
+  { id: "stock",     label: "Stock",             icon: IconBox  },
+  { id: "movements", label: "Mouvements",        icon: IconMove },
+];
+
+/* ── computed ────────────────────────────────────────────── */
+const productId = computed(() => parseInt(route.params.id));
+
+const hasValidationErrors = computed(() => Object.keys(validationErrors.value).length > 0);
+
+const isExpired = computed(() => ProductService.isExpired(productData.value));
+const isExpiringSoon = computed(() => ProductService.isExpiringSoon(productData.value, 30));
+const hasDocuments = computed(() => !!productData.value?.media?.fiche_technique_url);
+
+const displayCategoryName = computed(() => {
+  if (productData.value?.category?.name) return productData.value.category.name;
+  const id = productData.value?.categorie_id;
+  if (!id) return "Non catégorisé";
+  return categories.value.find(c => c.id === Number(id))?.name || "Non catégorisé";
 });
 
+/* ── methods ─────────────────────────────────────────────── */
+const initializeFormData = (data) => {
+  formData.value = {
+    nom:                      data.nom || "",
+    reference:                data.reference || "",
+    categorie_id:             (data.categorie_id || data.category?.id)?.toString() || "",
+    fabricant:                data.fabricant || "",
+    numero_lot:               data.numero_lot || "",
+    date_expiration:          data.date_expiration || "",
+    unite:                    data.unite || "",
+    description:              data.description || "",
+    stock_actuel:             data.stock_actuel?.toString() || "",
+    stock_minimum:            data.stock_minimum?.toString() || "",
+    prix_unitaire:            data.prix_unitaire?.toString() || "",
+    conditionnement_nom:      data.conditionnement?.nom || "",
+    conditionnement_quantite: data.conditionnement?.quantite?.toString() || "",
+  };
+  validationErrors.value = {};
+};
+
 const loadProduct = async () => {
-  if (!productId.value) {
-    error.value = "ID de produit invalide";
-    loading.value = false;
-    return;
-  }
-
+  if (!productId.value) { error.value = "ID de produit invalide"; loading.value = false; return; }
   loading.value = true;
-  error.value = null;
+  error.value   = null;
   validationErrors.value = {};
-
   try {
-    const response = await productStore.fetchProduct(productId.value);
-    console.log("Product data loaded:", response);
-    productData.value = response;
-    stockMovements.value =
-      response.stock_moves || response.stockMovements || [];
-
-    // Initialize form data with current product data
-    initializeFormData(response);
-    originalData.value = { ...response };
+    const res = await productStore.fetchProduct(productId.value);
+    productData.value    = res;
+    stockMovements.value = res.stock_moves || res.stockMovements || [];
+    initializeFormData(res);
+    originalData.value   = { ...res };
   } catch (err) {
-    console.error("Error loading product:", err);
-    error.value =
-      err.response?.data?.message || "Erreur lors du chargement du produit";
+    error.value = err.response?.data?.message || "Erreur lors du chargement du produit";
   } finally {
     loading.value = false;
   }
 };
 
-const initializeFormData = (data) => {
-  console.log("Initializing form data:", data);
-  formData.value = {
-    nom: data.nom || "",
-    reference: data.reference || "",
-    categorie_id: (data.categorie_id || data.category?.id)?.toString() || "",
-    fabricant: data.fabricant || "",
-    numero_lot: data.numero_lot || "",
-    date_expiration: data.date_expiration || "",
-    unite: data.unite || "",
-    description: data.description || "",
-    stock_actuel: data.stock_actuel?.toString() || "",
-    stock_minimum: data.stock_minimum?.toString() || "",
-    prix_unitaire: data.prix_unitaire?.toString() || "",
-    conditionnement_nom: data.conditionnement?.nom || "",
-    conditionnement_quantite: data.conditionnement?.quantite?.toString() || "",
-  };
-  console.log("Form data initialized:", formData.value);
-  validationErrors.value = {};
-};
-
 const loadCategories = async () => {
   try {
-    const response = await productCategoryStore.fetchAllCategories();
-    categories.value = response?.data || [];
-  } catch (err) {
-    console.error("Error loading product categories:", err);
-    categories.value = [];
-  }
+    const res = await productCategoryStore.fetchAllCategories();
+    categories.value = res?.data || [];
+  } catch { categories.value = []; }
 };
 
-const goBack = () => {
-  router.push("/stock/produits");
-};
-
-const toggleEditMode = () => {
-  isEditMode.value = !isEditMode.value;
-  if (isEditMode.value) {
-    initializeFormData(productData.value);
-  }
-};
-
-const cancelEdit = () => {
-  if (originalData.value) {
-    initializeFormData(originalData.value);
-  }
-  isEditMode.value = false;
-};
+const goBack        = () => router.push("/stock/produits");
+const toggleEditMode = () => { isEditMode.value = true; initializeFormData(productData.value); };
+const cancelEdit    = () => { if (originalData.value) initializeFormData(originalData.value); isEditMode.value = false; };
 
 const saveProduct = async () => {
   saving.value = true;
   validationErrors.value = {};
-
   try {
-    // Prepare data for API
-    const productDataToSave = {
-      nom: formData.value.nom,
-      reference: formData.value.reference,
-      categorie_id:
-        parseInt(formData.value.categorie_id) ||
-        productData.value?.categorie_id ||
-        null,
-      fabricant: formData.value.fabricant,
-      numero_lot: formData.value.numero_lot,
-      date_expiration: formData.value.date_expiration || null,
-      unite: formData.value.unite,
-      description: formData.value.description,
-      stock_actuel: parseInt(formData.value.stock_actuel) || 0,
-      stock_minimum: parseInt(formData.value.stock_minimum) || 0,
-      prix_unitaire: parseFloat(formData.value.prix_unitaire) || 0,
-      conditionnement_nom: formData.value.conditionnement_nom || null,
-      conditionnement_quantite:
-        parseInt(formData.value.conditionnement_quantite) || null,
-      conditionnement_unite: formData.value.unite || null,
-    };
-
-    console.log("Saving product data:", productDataToSave);
-
-    await productStore.updateProduct(
-      parseInt(productId.value),
-      productDataToSave
-    );
-
-    // Refresh product data
+    await productStore.updateProduct(productId.value, {
+      nom:                      formData.value.nom,
+      reference:                formData.value.reference,
+      categorie_id:             parseInt(formData.value.categorie_id) || productData.value?.categorie_id || null,
+      fabricant:                formData.value.fabricant,
+      numero_lot:               formData.value.numero_lot,
+      date_expiration:          formData.value.date_expiration || null,
+      unite:                    formData.value.unite,
+      description:              formData.value.description,
+      stock_actuel:             parseInt(formData.value.stock_actuel) || 0,
+      stock_minimum:            parseInt(formData.value.stock_minimum) || 0,
+      prix_unitaire:            parseFloat(formData.value.prix_unitaire) || 0,
+      conditionnement_nom:      formData.value.conditionnement_nom || null,
+      conditionnement_quantite: parseInt(formData.value.conditionnement_quantite) || null,
+      conditionnement_unite:    formData.value.unite || null,
+    });
     await loadProduct();
     isEditMode.value = false;
-
-    // Show success message (you might want to add a toast notification here)
-    console.log("Product updated successfully");
   } catch (err) {
-    console.error("Error saving product:", err);
-
-    // Handle validation errors from Laravel
     if (err.response?.status === 422 && err.response?.data?.errors) {
-      console.log("Validation errors:", err.response.data.errors);
       validationErrors.value = err.response.data.errors;
     } else {
-      error.value =
-        err.response?.data?.message ||
-        "Erreur lors de la sauvegarde du produit";
+      error.value = err.response?.data?.message || "Erreur lors de la sauvegarde";
     }
   } finally {
     saving.value = false;
@@ -910,463 +378,271 @@ const saveProduct = async () => {
 };
 
 const deleteProduct = async () => {
-  if (!confirm("Êtes-vous sûr de vouloir supprimer ce produit ?")) {
-    return;
-  }
-
+  if (!confirm("Supprimer ce produit ? Cette action est irréversible.")) return;
   try {
     await ProductService.deleteProduct(productId.value);
-    // Show success message
     router.push("/stock/produits");
   } catch (err) {
-    console.error("Error deleting product:", err);
-    // Show error message
+    error.value = "Erreur lors de la suppression";
   }
 };
 
-const handleViewSupplier = (supplier) => {
-  emit("viewSupplier", supplier);
-};
+const handleViewSupplier = (supplier) => emit("view-supplier", supplier);
 
-const getFieldLabel = (field) => {
-  const labels = {
-    nom: "Nom du produit",
-    reference: "Référence",
-    categorie_id: "Catégorie",
-    fabricant: "Fabricant",
-    numero_lot: "Numéro de lot",
-    date_expiration: "Date d'expiration",
-    unite: "Unité",
-    stock_actuel: "Stock actuel",
-    stock_minimum: "Stock minimum",
-    prix_unitaire: "Prix unitaire",
-    conditionnement_nom: "Nom du conditionnement",
-    conditionnement_quantite: "Quantité du conditionnement",
-  };
-  return labels[field] || field;
-};
+const getFieldLabel = (field) => ({
+  nom: "Nom", reference: "Référence", categorie_id: "Catégorie",
+  fabricant: "Fabricant", numero_lot: "N° de lot",
+  date_expiration: "Date d'expiration", unite: "Unité",
+  stock_actuel: "Stock actuel", stock_minimum: "Stock minimum",
+  prix_unitaire: "Prix unitaire", conditionnement_nom: "Conditionnement",
+  conditionnement_quantite: "Qté conditionnement",
+})[field] || field;
 
-// Computed properties
-const isExpired = computed(() => {
-  return ProductService.isExpired(productData.value);
-});
-
-const isExpiringSoon = computed(() => {
-  return ProductService.isExpiringSoon(productData.value, 30);
-});
-
-const hasDocuments = computed(() => {
-  return productData.value?.media?.fiche_technique_url;
-});
-
-const hasConditioning = computed(() => {
-  return (
-    productData.value?.conditionnement?.nom ||
-    (productData.value?.conditionnement?.quantite &&
-      productData.value?.conditionnement?.unite)
-  );
-});
-
-const displayCategoryName = computed(() => {
-  if (productData.value?.category?.name) {
-    return productData.value.category.name;
-  }
-
-  const currentCategoryId = productData.value?.categorie_id;
-  if (!currentCategoryId) {
-    return "Non catégorisé";
-  }
-
-  const matchedCategory = categories.value.find(
-    (category) => category.id === Number(currentCategoryId)
-  );
-
-  return matchedCategory?.name || "Non catégorisé";
-});
-
-const formattedExpiration = computed(() => {
-  if (!productData.value?.date_expiration) return "Non renseignée";
-  return new Date(productData.value.date_expiration).toLocaleDateString(
-    "fr-FR"
-  );
-});
-
-const expirationStatusClass = computed(() => {
-  if (!productData.value?.date_expiration) return "";
-
-  const today = new Date();
-  const expiration = new Date(productData.value.date_expiration);
-  const daysDiff = Math.ceil((expiration - today) / (1000 * 60 * 60 * 24));
-
-  if (daysDiff < 0) return "expired";
-  if (daysDiff <= 30) return "expiring-soon";
-  return "";
-});
-
-onMounted(() => {
-  loadCategories();
-  loadProduct();
-});
+onMounted(() => { loadCategories(); loadProduct(); });
 </script>
 
 <style scoped>
-.loading-container,
-.error-container,
-.empty-container {
+/* ── layout ─────────────────────────────────────────────── */
+.pdp {
+  padding: 1.5rem 1.75rem;
+  min-height: 100vh;
+  color: #344767;
+}
+.pdp__body {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 1.25rem;
+  align-items: start;
+  margin-top: 1rem;
+}
+
+/* ── state screens ───────────────────────────────────────── */
+.pdp__state {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
-  min-height: 400px;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  margin: 2rem 0;
-}
-
-.loading-spinner,
-.error-message,
-.empty-message {
-  text-align: center;
-  padding: 2rem;
-}
-
-.loading-spinner i {
-  color: #3b82f6;
-  margin-bottom: 1rem;
-}
-
-.error-message i {
-  margin-bottom: 1rem;
-}
-
-.empty-message i {
-  color: #6b7280;
-  margin-bottom: 1rem;
-}
-
-.error-message h5,
-.empty-message h5 {
-  color: #1f2937;
-  margin-bottom: 0.5rem;
-}
-
-.error-message p,
-.empty-message p {
-  color: #6b7280;
-  margin-bottom: 1rem;
-}
-
-.alert-danger {
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-  color: #721c24;
-}
-
-.alert-danger ul {
-  list-style-type: none;
-  padding-left: 0;
-}
-
-.alert-danger li {
-  margin-bottom: 0.5rem;
-}
-
-.form-control.is-invalid {
-  border-color: #dc3545;
-}
-
-.invalid-feedback {
-  display: block;
-  width: 100%;
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
-  color: #dc3545;
-}
-
-.form-control-static {
-  padding: 0.375rem 0;
-  margin-bottom: 0;
-  border: none;
-  background-color: transparent;
-  color: #495057;
-}
-
-.card {
-  border: none;
-  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1);
-}
-
-.bg-gradient-primary {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.product-image-container {
-  width: 120px;
-  height: 120px;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-}
-
-.product-status-indicators {
-  display: flex;
+  justify-content: center;
   gap: 0.75rem;
+  min-height: 420px;
+  text-align: center;
+  color: #6b7280;
+}
+.pdp__state h5 { font-size: 16px; font-weight: 600; color: #111827; margin: 0; }
+.pdp__state p  { font-size: 14px; margin: 0; }
+.pdp__state-icon { width: 36px; height: 36px; color: #d1d5db; }
+.pdp__state-icon--danger { color: #fca5a5; }
+.pdp__spinner {
+  width: 24px; height: 24px;
+  border: 2px solid #e5e7eb;
+  border-top-color: #111827;
+  border-radius: 50%;
+  animation: pdp-spin 0.75s linear infinite;
+}
+@keyframes pdp-spin { to { transform: rotate(360deg); } }
+
+/* ── top bar ─────────────────────────────────────────────── */
+.pdp__topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
   flex-wrap: wrap;
 }
+.pdp__topbar-left  { display: flex; align-items: center; gap: 0.75rem; }
+.pdp__topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
 
-.status-indicator {
+.pdp__breadcrumb {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-radius: 25px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  gap: 5px;
+  font-size: 13px;
+  color: #9ca3af;
 }
+.pdp__breadcrumb-sep     { color: #d1d5db; }
+.pdp__breadcrumb-current { color: #374151; font-weight: 500; }
 
-.status-indicator.low-stock {
-  background: rgba(254, 243, 199, 0.9);
-  color: #92400e;
-}
-
-.status-indicator.expired {
-  background: rgba(254, 226, 226, 0.9);
+/* ── errors ──────────────────────────────────────────────── */
+.pdp__errors {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 1rem;
+  padding: 0.875rem 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  font-size: 13px;
   color: #991b1b;
 }
+.pdp__errors svg { flex-shrink: 0; margin-top: 1px; }
+.pdp__errors strong { display: block; font-weight: 600; margin-bottom: 4px; }
+.pdp__errors ul { margin: 0; padding-left: 1.25rem; }
+.pdp__errors li { margin-bottom: 2px; }
 
-.status-indicator.expiring {
-  background: rgba(219, 234, 254, 0.9);
-  color: #1e40af;
-}
-
-.stock-display {
+/* ── edit banner ─────────────────────────────────────────── */
+.pdp__edit-banner {
   display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #065f46;
+  font-weight: 500;
+  margin-bottom: 1rem;
 }
 
-.stock-quantity {
-  font-size: 1.5rem;
+/* ── cards ───────────────────────────────────────────────── */
+.pdp-card {
+  background: #fff;
+  border: 1px solid rgba(131, 146, 171, 0.25);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
+}
+.pdp-card--hero {
+  border: 1px solid rgba(94, 114, 228, 0.2);
+  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
+}
+
+.pdp-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1.25rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+.pdp-card__title {
+  font-size: 11px;
   font-weight: 700;
-  color: #059669;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #8392ab;
 }
-
-.stock-unit {
-  font-size: 0.875rem;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.stock-min {
-  font-size: 0.875rem;
-  color: #dc2626;
-  font-weight: 500;
-}
-
-.supplier-info {
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 1.5rem;
-}
-
-.supplier-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.supplier-main {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.supplier-name {
-  font-size: 1.125rem;
+.pdp-card__count {
+  font-size: 11px;
   font-weight: 600;
-  color: #1f2937;
-}
-
-.supplier-email {
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-
-.supplier-action-btn {
-  padding: 0.75rem;
-  background: #667eea;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 0.875rem;
-}
-
-.supplier-action-btn:hover {
-  background: #5a67d8;
-  transform: translateY(-1px);
-}
-
-.no-supplier {
-  text-align: center;
-  padding: 2rem;
-}
-
-.no-supplier-text {
-  color: #6b7280;
-  font-style: italic;
-}
-
-.documents-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.document-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-}
-
-.document-item:hover {
   background: #f3f4f6;
-  border-color: #d1d5db;
+  color: #6b7280;
+  padding: 2px 7px;
+  border-radius: 20px;
 }
+.pdp-card__body { padding: 1.25rem; }
+.pdp-card__body--flush { padding: 0; }
 
-.document-icon {
-  font-size: 1.5rem;
-  color: #dc2626;
-}
-
-.document-details {
+/* ── hero ────────────────────────────────────────────────── */
+.pdp-hero {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  flex: 1;
+  gap: 1.25rem;
+  padding: 1.25rem;
 }
-
-.document-name {
-  font-weight: 500;
-  color: #1f2937;
-}
-
-.product-side-nav-card {
-  position: sticky;
-  top: 1rem;
-  border: 0;
-  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
-}
-
-.product-sidebar-profile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.product-sidebar-image {
-  width: 96px;
-  height: 96px;
-  border-radius: 12px;
+.pdp-hero__img {
+  width: 80px;
+  height: 80px;
+  border-radius: 10px;
   overflow: hidden;
   border: 1px solid #e5e7eb;
-  margin-bottom: 0.75rem;
+  flex-shrink: 0;
+  background: #fff;
 }
-
-.product-sidebar-title {
-  font-size: 1rem;
+.pdp-hero__name {
+  font-size: 20px;
   font-weight: 700;
-  color: #1f2937;
+  color: #344767;
+  margin: 0 0 2px;
+  line-height: 1.2;
 }
+.pdp-hero__ref {
+  font-size: 12px;
+  color: #8392ab;
+  margin: 0 0 0.625rem;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+.pdp-hero__badges { display: flex; flex-wrap: wrap; gap: 5px; }
 
-.product-sidebar-reference {
+/* ── doc item ────────────────────────────────────────────── */
+.pdp-doc {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background 0.12s, border-color 0.12s;
+  color: #374151;
+}
+.pdp-doc:hover { background: #f3f4f6; border-color: #d1d5db; }
+.pdp-doc svg   { color: #dc2626; flex-shrink: 0; }
+.pdp-doc__name { font-size: 14px; font-weight: 500; }
+.pdp-doc__action {
+  font-size: 12px;
   color: #6b7280;
-  font-size: 0.85rem;
+  margin-left: auto;
 }
 
-.product-sidebar-badges {
-  display: flex;
-  flex-wrap: wrap;
+/* ── buttons ─────────────────────────────────────────────── */
+.pdp-btn {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.product-nav .nav-link {
-  border-radius: 0.5rem;
-  margin-bottom: 0.25rem;
-  color: #67748e;
-  background-color: transparent;
-  transition: all 0.2s ease-in-out;
-}
-
-.product-nav .nav-link:hover {
-  background-color: #f8f9fa;
-}
-
-.product-nav .nav-link.active {
-  background: linear-gradient(310deg, #7928ca, #ff0080);
-  color: #fff;
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09),
-    0 2px 3px -1px rgba(0, 0, 0, 0.07);
-}
-
-.product-nav .nav-link i {
-  width: 20px;
-}
-
-.document-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #3b82f6;
-  text-decoration: none;
-  font-size: 0.875rem;
+  gap: 6px;
+  font-size: 13px;
   font-weight: 500;
-  padding: 0.5rem 1rem;
-  background: #eff6ff;
-  border-radius: 6px;
-  transition: all 0.2s ease;
+  padding: 7px 14px;
+  border-radius: 7px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
+  white-space: nowrap;
+}
+.pdp-btn:active:not(:disabled) { transform: scale(0.97); }
+.pdp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.pdp-btn--dark    { background: #111827; color: #fff; border-color: #111827; }
+.pdp-btn--dark {
+  background: linear-gradient(310deg, #5e72e4 0%, #825ee4 100%);
+  color: #fff;
+  border-color: transparent;
+}
+.pdp-btn--dark:hover:not(:disabled) {
+  filter: brightness(0.97);
 }
 
-.document-link:hover {
-  background: #dbeafe;
-  color: #2563eb;
-  text-decoration: none;
+.pdp-btn--outline {
+  background: #fff;
+  color: #5e72e4;
+  border-color: rgba(94, 114, 228, 0.35);
+}
+.pdp-btn--outline:hover:not(:disabled) {
+  background: rgba(94, 114, 228, 0.08);
+  border-color: #5e72e4;
 }
 
-.info-value.expired {
-  background: #fef2f2;
-  color: #dc2626;
-  border-color: #fecaca;
-}
+.pdp-btn--ghost   { background: transparent; color: #6b7280; border-color: transparent; }
+.pdp-btn--ghost:hover:not(:disabled) { background: #f3f4f6; color: #344767; }
 
-.info-value.expiring-soon {
-  background: #fffbeb;
-  color: #d97706;
-  border-color: #fed7aa;
-}
+.pdp-btn--danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
+.pdp-btn--danger:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; }
 
+.pdp-btn--sm { padding: 5px 10px; font-size: 12px; }
+
+.pdp-btn__spin { animation: pdp-spin 0.75s linear infinite; }
+
+/* ── panel ───────────────────────────────────────────────── */
+.pdp__panel { min-width: 0; }
+
+/* ── transitions ─────────────────────────────────────────── */
+.pdp-fade-enter-active, .pdp-fade-leave-active { transition: opacity 0.2s, transform 0.2s; }
+.pdp-fade-enter-from, .pdp-fade-leave-to { opacity: 0; transform: translateY(-4px); }
+
+/* ── responsive ──────────────────────────────────────────── */
 @media (max-width: 768px) {
-  .container-fluid {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .col-md-4,
-  .col-md-6 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
+  .pdp__body { grid-template-columns: 1fr; }
+  .pdp { padding: 1rem; }
 }
 </style>
diff --git a/thanasoft-front/src/components/atoms/Product/FieldDisplay.vue b/thanasoft-front/src/components/atoms/Product/FieldDisplay.vue
new file mode 100644
index 0000000..17a6e64
--- /dev/null
+++ b/thanasoft-front/src/components/atoms/Product/FieldDisplay.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="field-row">
+    <span class="field-row__label">{{ label }}</span>
+    <div class="field-row__value" :class="valueClass">
+      <slot>{{ value || fallback }}</slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  label:      { type: String, required: true },
+  value:      { type: [String, Number], default: "" },
+  fallback:   { type: String, default: "—" },
+  valueClass: { type: String, default: "" },
+});
+</script>
+
+<style scoped>
+.field-row {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  align-items: start;
+  gap: 0.5rem;
+  padding: 10px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+.field-row:last-child { border-bottom: none; }
+
+.field-row__label {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: #9ca3af;
+  text-transform: uppercase;
+  padding-top: 1px;
+  user-select: none;
+}
+.field-row__value {
+  font-size: 14px;
+  color: #111827;
+  line-height: 1.5;
+}
+.field-row__value.expired      { color: #dc2626; font-weight: 500; }
+.field-row__value.expiring-soon { color: #d97706; font-weight: 500; }
+</style>
diff --git a/thanasoft-front/src/components/atoms/Product/FieldInput.vue b/thanasoft-front/src/components/atoms/Product/FieldInput.vue
new file mode 100644
index 0000000..259eb59
--- /dev/null
+++ b/thanasoft-front/src/components/atoms/Product/FieldInput.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="field-input-group">
+    <label class="field-input-group__label">
+      {{ label }}<span v-if="required" class="field-input-group__req">*</span>
+    </label>
+    <textarea
+      v-if="type === 'textarea'"
+      :value="modelValue"
+      class="field-input-group__ctrl"
+      :class="{ 'is-invalid': error }"
+      :placeholder="placeholder"
+      :rows="rows"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <select
+      v-else-if="type === 'select'"
+      :value="modelValue"
+      class="field-input-group__ctrl"
+      :class="{ 'is-invalid': error }"
+      @change="$emit('update:modelValue', $event.target.value)"
+    >
+      <slot />
+    </select>
+    <input
+      v-else
+      :value="modelValue"
+      :type="type"
+      class="field-input-group__ctrl"
+      :class="{ 'is-invalid': error }"
+      :placeholder="placeholder"
+      :min="min"
+      :step="step"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <span v-if="error" class="field-input-group__error">{{ error }}</span>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+  modelValue: { type: [String, Number], default: "" },
+  label:      { type: String, required: true },
+  type:       { type: String, default: "text" },
+  placeholder:{ type: String, default: "" },
+  required:   { type: Boolean, default: false },
+  error:      { type: String, default: "" },
+  rows:       { type: Number, default: 3 },
+  min:        { type: [String, Number], default: undefined },
+  step:       { type: [String, Number], default: undefined },
+});
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped>
+.field-input-group { display: flex; flex-direction: column; gap: 5px; }
+
+.field-input-group__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #6b7280;
+}
+.field-input-group__req { color: #dc2626; margin-left: 2px; }
+
+.field-input-group__ctrl {
+  font-size: 14px;
+  color: #111827;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 8px 11px;
+  width: 100%;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  appearance: none;
+}
+.field-input-group__ctrl:focus {
+  border-color: #5e72e4;
+  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.18);
+}
+.field-input-group__ctrl.is-invalid { border-color: #dc2626; }
+.field-input-group__ctrl.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.08); }
+
+.field-input-group__error {
+  font-size: 12px;
+  color: #dc2626;
+}
+</style>
diff --git a/thanasoft-front/src/components/atoms/Product/ProductBadge.vue b/thanasoft-front/src/components/atoms/Product/ProductBadge.vue
new file mode 100644
index 0000000..00c1588
--- /dev/null
+++ b/thanasoft-front/src/components/atoms/Product/ProductBadge.vue
@@ -0,0 +1,56 @@
+<template>
+  <span class="product-badge" :class="`product-badge--${variant}`">
+    <span class="product-badge__dot"></span>
+    <slot />
+  </span>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  variant: {
+    type: String,
+    default: "neutral",
+    validator: (v) =>
+      ["success", "warning", "danger", "info", "neutral"].includes(v),
+  },
+});
+</script>
+
+<style scoped>
+.product-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 4px 9px;
+  border-radius: 4px;
+  white-space: nowrap;
+  font-family: inherit;
+}
+.product-badge__dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.product-badge--success  { background: rgba(45, 206, 137, 0.16); color: #2dce89; }
+.product-badge--success .product-badge__dot { background: #2dce89; }
+
+.product-badge--warning  { background: rgba(251, 99, 64, 0.16); color: #fb6340; }
+.product-badge--warning .product-badge__dot { background: #fb6340; }
+
+.product-badge--danger   { background: rgba(245, 54, 92, 0.16); color: #f5365c; }
+.product-badge--danger .product-badge__dot  { background: #f5365c; }
+
+.product-badge--info     { background: rgba(17, 205, 239, 0.16); color: #11cdef; }
+.product-badge--info .product-badge__dot    { background: #11cdef; }
+
+.product-badge--neutral  { background: rgba(131, 146, 171, 0.16); color: #8392ab; }
+.product-badge--neutral .product-badge__dot { background: #8392ab; }
+</style>
diff --git a/thanasoft-front/src/components/atoms/Product/ProductStatCard.vue b/thanasoft-front/src/components/atoms/Product/ProductStatCard.vue
new file mode 100644
index 0000000..a989c1b
--- /dev/null
+++ b/thanasoft-front/src/components/atoms/Product/ProductStatCard.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="stat-card">
+    <span class="stat-card__label">{{ label }}</span>
+    <div class="stat-card__value" :class="valueClass">
+      <span class="stat-card__number">{{ value }}</span>
+      <span v-if="unit" class="stat-card__unit">{{ unit }}</span>
+    </div>
+    <span v-if="sub" class="stat-card__sub">{{ sub }}</span>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  label:      { type: String, required: true },
+  value:      { type: [String, Number], required: true },
+  unit:       { type: String, default: "" },
+  sub:        { type: String, default: "" },
+  valueClass: { type: String, default: "" },
+});
+</script>
+
+<style scoped>
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 1rem 1.125rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+.stat-card__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #9ca3af;
+}
+.stat-card__value {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+.stat-card__number {
+  font-size: 22px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.1;
+}
+.stat-card__number.low  { color: #dc2626; }
+.stat-card__number.ok   { color: #059669; }
+.stat-card__unit {
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+}
+.stat-card__sub {
+  font-size: 12px;
+  color: #9ca3af;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue b/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue
index 4df36e2..a14b9fc 100644
--- a/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue
+++ b/thanasoft-front/src/components/molecules/Commande/NewCommandeForm.vue
@@ -1,347 +1,660 @@
 <template>
-  <form class="purchase-form" @submit.prevent="submitForm">
-    <!-- Header Section -->
-    <div class="form-section">
-      <div class="section-title">
-        <i class="fas fa-file-invoice"></i>
-        Informations générales
+  <form class="commande-form" @submit.prevent="submitForm">
+    <div class="form-stepper">
+      <div class="stepper-line"></div>
+      <div
+        class="step"
+        :class="{ active: currentStep >= 1, done: currentStep > 1 }"
+      >
+        <div class="step-dot"><i class="fas fa-file-alt"></i></div>
+        <span class="step-label">Informations</span>
       </div>
-
-      <!-- Row 1: Fournisseur, Date -->
-      <div class="row g-3 mb-3">
-        <div class="col-md-6 position-relative supplier-search-container">
-          <label class="form-label"
-            >Fournisseur <span class="text-danger">*</span></label
-          >
-          <div class="search-input-wrapper">
-            <i class="fas fa-search search-icon"></i>
-            <soft-input
-              v-model="supplierSearchQuery"
-              type="text"
-              placeholder="Rechercher un fournisseur..."
-              required
-              class="search-input"
-              @input="handleSupplierSearch"
-              @focus="showSupplierResults = true"
-            />
-          </div>
-
-          <!-- Search Results Dropdown -->
-          <div
-            v-if="
-              showSupplierResults &&
-              (supplierSearchResults.length > 0 || isSearchingSuppliers)
-            "
-            class="search-dropdown"
-          >
-            <div v-if="isSearchingSuppliers" class="dropdown-loading">
-              <div
-                class="spinner-border spinner-border-sm text-primary"
-                role="status"
-              >
-                <span class="visually-hidden">Chargement...</span>
-              </div>
-            </div>
-            <template v-else>
-              <button
-                v-for="supplier in supplierSearchResults"
-                :key="supplier.id"
-                type="button"
-                class="dropdown-item"
-                @click="selectSupplier(supplier)"
-              >
-                <span class="item-name">{{ supplier.name }}</span>
-                <span class="item-details">
-                  {{ supplier.email || "Pas d'email" }} •
-                  {{ supplier.billing_address?.city || "Ville non spécifiée" }}
-                </span>
-              </button>
-            </template>
-          </div>
-        </div>
-
-        <div class="col-md-6">
-          <label class="form-label"
-            >Date commande <span class="text-danger">*</span></label
-          >
-          <soft-input v-model="formData.date" type="date" required />
-        </div>
+      <div
+        class="step"
+        :class="{ active: currentStep >= 2, done: currentStep > 2 }"
+      >
+        <div class="step-dot"><i class="fas fa-boxes"></i></div>
+        <span class="step-label">Articles</span>
       </div>
-
-      <!-- Row 2: Statut, Adresse livraison -->
-      <div class="row g-3 mb-3">
-        <div class="col-md-6">
-          <label class="form-label">Statut</label>
-          <div class="select-wrapper">
-            <select v-model="formData.status" class="form-select custom-select">
-              <option value="brouillon">📝 Brouillon</option>
-              <option value="confirmee">✅ Confirmée</option>
-              <option value="livree">🚚 Livrée</option>
-              <option value="facturee">💳 Facturée</option>
-              <option value="annulee">❌ Annulée</option>
-            </select>
-            <i class="fas fa-chevron-down select-arrow"></i>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <label class="form-label">Adresse livraison</label>
-          <div class="search-input-wrapper">
-            <i class="fas fa-map-marker-alt search-icon"></i>
-            <soft-input
-              v-model="formData.deliveryAddress"
-              type="text"
-              placeholder="Adresse de livraison"
-              class="search-input"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Notes -->
-      <div class="mb-0">
-        <label class="form-label">Notes de commande</label>
-        <textarea
-          v-model="formData.notes"
-          class="form-control notes-textarea"
-          placeholder="Notes importantes..."
-          rows="2"
-        ></textarea>
+      <div class="step" :class="{ active: currentStep >= 3 }">
+        <div class="step-dot"><i class="fas fa-check"></i></div>
+        <span class="step-label">Validation</span>
       </div>
     </div>
 
-    <!-- Articles Section -->
-    <div class="form-section">
-      <div class="section-header">
-        <div class="section-title">
-          <i class="fas fa-boxes"></i>
-          Articles
+    <div class="form-card" :class="{ collapsed: currentStep > 1 }">
+      <div class="card-header" @click="currentStep = 1">
+        <div class="card-header-left">
+          <div class="card-icon"><i class="fas fa-truck-loading"></i></div>
+          <div>
+            <h3 class="card-title">Informations générales</h3>
+            <p class="card-subtitle">Fournisseur, date, statut et notes</p>
+          </div>
+        </div>
+        <div class="card-header-right">
+          <SoftBadge
+            v-if="currentStep > 1"
+            color="success"
+            variant="gradient"
+            size="sm"
+            class="badge-complete-soft"
+          >
+            <i class="fas fa-check-circle"></i> Complété
+          </SoftBadge>
+          <i
+            class="fas fa-chevron-down card-toggle"
+            :class="{ rotated: currentStep === 1 }"
+          ></i>
         </div>
-        <soft-button
-          type="button"
-          color="primary"
-          size="sm"
-          class="add-btn"
-          @click="addLine"
-        >
-          <i class="fas fa-plus"></i> Ajouter ligne
-        </soft-button>
       </div>
 
-      <div class="lines-container">
-        <div
-          v-for="(line, index) in formData.lines"
-          :key="index"
-          class="line-item"
-        >
-          <div class="row g-2 align-items-end">
-            <div class="col-md-4 position-relative product-search-container">
-              <label class="form-label text-xs"
-                >Article <span class="text-danger">*</span></label
-              >
-              <div class="search-input-wrapper">
+      <transition name="slide-down">
+        <div v-show="currentStep === 1" class="card-body">
+          <div class="field-grid two-col">
+            <div
+              class="field-group supplier-search-container"
+              :class="{ 'has-error': errors.fournisseur_id }"
+            >
+              <label class="field-label">
+                <i class="fas fa-industry label-icon"></i>
+                Fournisseur
+                <span class="required-dot"></span>
+              </label>
+
+              <div class="search-wrapper">
                 <i class="fas fa-search search-icon"></i>
-                <soft-input
-                  v-model="line.searchQuery"
+                <SoftInput
+                  v-model="supplierSearchQuery"
                   type="text"
-                  placeholder="Rechercher un article..."
-                  required
-                  class="search-input"
-                  @input="handleProductSearch(index)"
-                  @focus="
-                    activeLineIndex = index;
-                    showProductResults = true;
-                  "
+                  class="field-input-soft"
+                  placeholder="Rechercher un fournisseur…"
+                  @input="handleSupplierSearch"
+                  @focus="showSupplierResults = true"
                 />
+                <button
+                  v-if="supplierSearchQuery && formData.fournisseur_id"
+                  type="button"
+                  class="clear-btn"
+                  @click="clearSupplier"
+                >
+                  <i class="fas fa-times"></i>
+                </button>
               </div>
 
-              <!-- Product Search Results Dropdown -->
               <div
-                v-show="showProductResults && activeLineIndex === index"
-                class="search-dropdown product-dropdown"
+                v-if="
+                  showSupplierResults &&
+                  (supplierSearchResults.length > 0 || isSearchingSuppliers)
+                "
+                class="results-dropdown"
               >
-                <div v-if="isSearchingProducts" class="dropdown-loading">
-                  <div
-                    class="spinner-border spinner-border-sm text-primary"
-                    role="status"
-                  >
-                    <span class="visually-hidden">Chargement...</span>
+                <div v-if="isSearchingSuppliers" class="dropdown-loading">
+                  <div class="loading-dots">
+                    <span></span><span></span><span></span>
                   </div>
-                </div>
-                <div
-                  v-else-if="productSearchResults.length === 0"
-                  class="dropdown-empty"
-                >
-                  Aucun produit trouvé
+                  <span>Recherche…</span>
                 </div>
                 <template v-else>
                   <button
-                    v-for="product in productSearchResults"
-                    :key="product.id"
+                    v-for="supplier in supplierSearchResults"
+                    :key="supplier.id"
                     type="button"
-                    class="dropdown-item"
-                    @mousedown.prevent="selectProduct(index, product)"
+                    class="result-item"
+                    @click="selectSupplier(supplier)"
                   >
-                    <span class="item-name">{{ product.nom }}</span>
-                    <span class="item-details">
-                      Réf: {{ product.reference }} • Stock:
-                      {{ product.stock_actuel }} {{ product.unite }} •
-                      {{ formatCurrency(product.prix_unitaire) }}
-                    </span>
+                    <div class="result-icon">
+                      <i class="fas fa-industry"></i>
+                    </div>
+                    <div class="result-info">
+                      <span class="result-name">{{ supplier.name }}</span>
+                      <span class="result-meta">
+                        {{ supplier.email || "Pas d'email" }} ·
+                        {{ supplier.billing_address?.city || "Ville inconnue" }}
+                      </span>
+                    </div>
                   </button>
                 </template>
               </div>
-            </div>
 
-            <div class="col-md-3">
-              <label class="form-label text-xs"
-                >Désignation <span class="text-danger">*</span></label
-              >
-              <soft-input
-                v-model="line.designation"
-                type="text"
-                placeholder="Nom article"
-                required
-              />
-            </div>
-
-            <div class="col-md-2">
-              <label class="form-label text-xs"
-                >Qté <span class="text-danger">*</span></label
-              >
-              <soft-input
-                v-model.number="line.quantity"
-                type="number"
-                placeholder="Qté"
-                :min="1"
-                required
-              />
-            </div>
-
-            <div class="col-md-2">
-              <label class="form-label text-xs"
-                >Prix HT <span class="text-danger">*</span></label
-              >
-              <soft-input
-                v-model.number="line.priceHt"
-                type="number"
-                placeholder="Prix"
-                step="0.01"
-                required
-              />
-            </div>
-
-            <div class="col-md-1 d-flex flex-column align-items-end gap-2">
-              <button
-                type="button"
-                class="btn-delete"
-                :disabled="formData.lines.length === 1"
-                title="Supprimer la ligne"
-                @click="removeLine(index)"
-              >
-                <i class="fas fa-trash-alt"></i>
-              </button>
-              <span class="line-total">
-                {{ formatCurrency(line.quantity * line.priceHt) }}
+              <span v-if="errors.fournisseur_id" class="field-error">
+                <i class="fas fa-exclamation-circle"></i>
+                {{ errors.fournisseur_id }}
               </span>
             </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                <i class="fas fa-calendar-day label-icon"></i>
+                Date de commande
+                <span class="required-dot"></span>
+              </label>
+              <SoftInput
+                v-model="formData.order_date"
+                type="date"
+                class="field-input-soft"
+                :is-required="true"
+              />
+            </div>
+          </div>
+
+          <div class="field-grid two-col">
+            <div class="field-group">
+              <label class="field-label">
+                <i class="fas fa-map-marker-alt label-icon"></i>
+                Adresse de livraison
+              </label>
+              <SoftInput
+                v-model="formData.delivery_address"
+                type="text"
+                class="field-input-soft"
+                placeholder="Adresse de livraison"
+              />
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                <i class="fas fa-tag label-icon"></i>
+                Statut
+              </label>
+              <div class="status-toggle">
+                <SoftButton
+                  type="button"
+                  color="secondary"
+                  size="sm"
+                  :variant="
+                    formData.status === 'brouillon' ? 'gradient' : 'outline'
+                  "
+                  :active="formData.status === 'brouillon'"
+                  @click="formData.status = 'brouillon'"
+                >
+                  Brouillon
+                </SoftButton>
+                <SoftButton
+                  type="button"
+                  color="success"
+                  size="sm"
+                  :variant="
+                    formData.status === 'confirmee' ? 'gradient' : 'outline'
+                  "
+                  :active="formData.status === 'confirmee'"
+                  @click="formData.status = 'confirmee'"
+                >
+                  Confirmée
+                </SoftButton>
+              </div>
+            </div>
+          </div>
+
+          <div class="field-group">
+            <label class="field-label">
+              <i class="fas fa-sticky-note label-icon"></i>
+              Notes
+            </label>
+            <textarea
+              v-model="formData.notes"
+              class="field-textarea"
+              rows="3"
+              placeholder="Notes importantes…"
+            ></textarea>
+          </div>
+
+          <div class="card-actions">
+            <SoftButton
+              type="button"
+              color="primary"
+              variant="gradient"
+              class="soft-action-btn"
+              @click="goToStep2"
+            >
+              Continuer vers les articles <i class="fas fa-arrow-right"></i>
+            </SoftButton>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <div class="form-card" :class="{ collapsed: currentStep < 2 }">
+      <div class="card-header" @click="currentStep >= 2 && (currentStep = 2)">
+        <div class="card-header-left">
+          <div class="card-icon card-icon--blue">
+            <i class="fas fa-box-open"></i>
+          </div>
+          <div>
+            <h3 class="card-title">Lignes de commande</h3>
+            <p class="card-subtitle">
+              {{ validLinesCount }} article{{ validLinesCount > 1 ? "s" : "" }}
+            </p>
+          </div>
+        </div>
+        <div class="card-header-right">
+          <SoftBadge
+            v-if="currentStep > 2"
+            color="success"
+            variant="gradient"
+            size="sm"
+            class="badge-complete-soft"
+          >
+            <i class="fas fa-check-circle"></i> Complété
+          </SoftBadge>
+          <i
+            v-if="currentStep >= 2"
+            class="fas fa-chevron-down card-toggle"
+            :class="{ rotated: currentStep === 2 }"
+          ></i>
+        </div>
+      </div>
+
+      <transition name="slide-down">
+        <div v-show="currentStep === 2" class="card-body">
+          <div class="lines-header">
+            <span class="col-product">Produit</span>
+            <span class="col-desc">Description</span>
+            <span class="col-qty">Qté</span>
+            <span class="col-price">Prix HT</span>
+            <span class="col-total">Total HT</span>
+            <span class="col-actions"></span>
+          </div>
+
+          <transition-group name="line-list" tag="div" class="lines-list">
+            <div
+              v-for="(line, index) in formData.lines"
+              :key="line._key"
+              class="line-row"
+            >
+              <div
+                class="cell cell-product product-search-container position-relative"
+              >
+                <div class="search-wrapper">
+                  <i class="fas fa-search search-icon-sm"></i>
+                  <SoftInput
+                    v-model="line.searchQuery"
+                    type="text"
+                    class="field-input-soft field-input-soft--sm"
+                    placeholder="Rechercher un produit…"
+                    @input="handleProductSearch(index)"
+                    @focus="
+                      activeLineIndex = index;
+                      showProductResults = true;
+                    "
+                  />
+                </div>
+
+                <div
+                  v-show="showProductResults && activeLineIndex === index"
+                  class="results-dropdown results-dropdown--sm"
+                >
+                  <div v-if="isSearchingProducts" class="dropdown-loading">
+                    <div class="loading-dots">
+                      <span></span><span></span><span></span>
+                    </div>
+                  </div>
+                  <div
+                    v-else-if="productSearchResults.length === 0"
+                    class="dropdown-empty"
+                  >
+                    Aucun produit trouvé
+                  </div>
+                  <template v-else>
+                    <button
+                      v-for="product in productSearchResults"
+                      :key="product.id"
+                      type="button"
+                      class="result-item result-item--sm"
+                      @mousedown.prevent="selectProduct(index, product)"
+                    >
+                      <div class="result-icon result-icon--sm">
+                        <i class="fas fa-cube"></i>
+                      </div>
+                      <div class="result-info">
+                        <span class="result-name">{{ product.nom }}</span>
+                        <span class="result-meta"
+                          >Réf: {{ product.reference }} · Stock:
+                          {{ product.stock_actuel }} {{ product.unite }}</span
+                        >
+                      </div>
+                    </button>
+                  </template>
+                </div>
+              </div>
+
+              <div class="cell cell-desc">
+                <SoftInput
+                  v-model="line.description"
+                  type="text"
+                  class="field-input-soft field-input-soft--sm"
+                  placeholder="Description"
+                />
+              </div>
+
+              <div class="cell cell-number">
+                <SoftInput
+                  v-model="line.quantity"
+                  type="number"
+                  class="field-input-soft field-input-soft--sm field-input--number"
+                  min="1"
+                  step="1"
+                />
+              </div>
+
+              <div class="cell cell-number">
+                <div class="price-input-wrapper">
+                  <span class="currency-symbol">€</span>
+                  <SoftInput
+                    v-model="line.unit_price"
+                    type="number"
+                    class="field-input-soft field-input-soft--sm field-input--price"
+                    min="0"
+                    step="0.01"
+                    placeholder="0.00"
+                  />
+                </div>
+              </div>
+
+              <div class="cell cell-total">
+                <span class="line-total">{{
+                  formatCurrency(lineTotal(line))
+                }}</span>
+              </div>
+
+              <div class="cell cell-actions">
+                <SoftButton
+                  type="button"
+                  color="danger"
+                  variant="outline"
+                  size="sm"
+                  class="line-delete-btn"
+                  :disabled="formData.lines.length === 1"
+                  @click="removeLine(index)"
+                >
+                  <i class="fas fa-trash"></i>
+                </SoftButton>
+              </div>
+            </div>
+          </transition-group>
+
+          <div class="lines-footer">
+            <SoftButton
+              type="button"
+              color="primary"
+              variant="outline"
+              size="sm"
+              class="btn-add-line-soft"
+              @click="addLine"
+            >
+              <i class="fas fa-plus-circle"></i>
+              Ajouter une ligne
+            </SoftButton>
+
+            <div class="lines-summary">
+              <div class="summary-item">
+                <span class="summary-label">Total lignes</span>
+                <span class="summary-value">{{ validLinesCount }}</span>
+              </div>
+              <div class="summary-item">
+                <span class="summary-label">Total unités</span>
+                <span class="summary-value">{{ totalUnits }}</span>
+              </div>
+              <div class="summary-item summary-item--total">
+                <span class="summary-label">Montant HT</span>
+                <span class="summary-value">{{ formatCurrency(totalHt) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card-actions card-actions--spread">
+            <SoftButton
+              type="button"
+              color="secondary"
+              variant="outline"
+              class="soft-action-btn"
+              @click="currentStep = 1"
+            >
+              <i class="fas fa-arrow-left"></i> Retour
+            </SoftButton>
+            <SoftButton
+              type="button"
+              color="primary"
+              variant="gradient"
+              class="soft-action-btn"
+              @click="goToStep3"
+            >
+              Vérifier et enregistrer <i class="fas fa-arrow-right"></i>
+            </SoftButton>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <div class="form-card" :class="{ collapsed: currentStep < 3 }">
+      <div class="card-header">
+        <div class="card-header-left">
+          <div class="card-icon card-icon--green">
+            <i class="fas fa-clipboard-check"></i>
+          </div>
+          <div>
+            <h3 class="card-title">Récapitulatif</h3>
+            <p class="card-subtitle">Vérifiez avant de créer la commande</p>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Totals Section - Clean Design -->
-    <div class="totals-section">
-      <div class="totals-content">
-        <div class="total-row">
-          <span class="total-label">Total HT</span>
-          <span class="total-value">{{
-            formatCurrency(calculateTotalHt())
-          }}</span>
-        </div>
-        <div class="total-row">
-          <span class="total-label">TVA (20%)</span>
-          <span class="total-value">{{
-            formatCurrency(calculateTotalTva())
-          }}</span>
-        </div>
-        <div class="total-row total-final">
-          <span class="total-label">Total TTC</span>
-          <span class="total-amount">{{
-            formatCurrency(calculateTotalTtc())
-          }}</span>
-        </div>
-      </div>
-    </div>
+      <transition name="slide-down">
+        <div v-show="currentStep === 3" class="card-body">
+          <div class="recap-grid">
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-industry"></i> Fournisseur</span
+              >
+              <span class="recap-value">{{
+                formData.supplier_name || "—"
+              }}</span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-calendar-day"></i> Date</span
+              >
+              <span class="recap-value">{{ formData.order_date || "—" }}</span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"><i class="fas fa-tag"></i> Statut</span>
+              <span class="recap-value">
+                <SoftBadge
+                  :color="
+                    formData.status === 'brouillon' ? 'secondary' : 'success'
+                  "
+                  variant="gradient"
+                  size="sm"
+                >
+                  {{
+                    formData.status === "brouillon" ? "Brouillon" : "Confirmée"
+                  }}
+                </SoftBadge>
+              </span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-boxes"></i> Articles</span
+              >
+              <span class="recap-value">{{ validLinesCount }} ligne(s)</span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-receipt"></i> Total HT</span
+              >
+              <span class="recap-value recap-total">{{
+                formatCurrency(totalHt)
+              }}</span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-coins"></i> Total TTC</span
+              >
+              <span class="recap-value recap-total">{{
+                formatCurrency(totalTtc)
+              }}</span>
+            </div>
+          </div>
 
-    <!-- Action Buttons -->
-    <div class="action-buttons">
-      <soft-button
-        type="button"
-        color="secondary"
-        variant="outline"
-        class="btn-cancel"
-        @click="cancelForm"
-      >
-        <i class="fas fa-times"></i> Annuler
-      </soft-button>
-      <soft-button type="submit" color="success" class="btn-submit">
-        <i class="fas fa-check"></i> Créer la commande
-      </soft-button>
+          <div class="card-actions card-actions--spread">
+            <SoftButton
+              type="button"
+              color="secondary"
+              variant="outline"
+              class="soft-action-btn"
+              @click="currentStep = 2"
+            >
+              <i class="fas fa-arrow-left"></i> Modifier
+            </SoftButton>
+            <div class="action-group">
+              <SoftButton
+                type="button"
+                color="danger"
+                variant="outline"
+                class="soft-action-btn"
+                @click="cancelForm"
+              >
+                <i class="fas fa-times"></i> Annuler
+              </SoftButton>
+              <SoftButton
+                type="submit"
+                color="primary"
+                variant="gradient"
+                class="soft-action-btn"
+                :disabled="isSubmitting || purchaseOrderStore.loading"
+              >
+                <span
+                  v-if="isSubmitting || purchaseOrderStore.loading"
+                  class="btn-spinner"
+                ></span>
+                <i v-else class="fas fa-check"></i>
+                {{
+                  isSubmitting || purchaseOrderStore.loading
+                    ? "Enregistrement…"
+                    : "Créer la commande"
+                }}
+              </SoftButton>
+            </div>
+          </div>
+        </div>
+      </transition>
     </div>
   </form>
 </template>
 
 <script setup>
-import { ref, defineEmits, onMounted, onUnmounted } from "vue";
-import SoftInput from "@/components/SoftInput.vue";
-import SoftButton from "@/components/SoftButton.vue";
-import { FournisseurService } from "@/services/fournisseur";
+import { computed, defineEmits, onMounted, onUnmounted, ref } from "vue";
+import { storeToRefs } from "pinia";
 import ProductService from "@/services/product";
-import { PurchaseOrderService } from "@/services/purchaseOrder";
+import SoftBadge from "@/components/SoftBadge.vue";
+import SoftButton from "@/components/SoftButton.vue";
+import SoftInput from "@/components/SoftInput.vue";
+import { useFournisseurStore } from "@/stores/fournisseurStore";
 import { useNotificationStore } from "@/stores/notification";
+import { usePurchaseOrderStore } from "@/stores/purchaseOrderStore";
 
-const productService = new ProductService();
+const emit = defineEmits(["submit", "cancel", "created"]);
+
+const fournisseurStore = useFournisseurStore();
+const purchaseOrderStore = usePurchaseOrderStore();
 const notificationStore = useNotificationStore();
 
-const emit = defineEmits(["submit"]);
+const { searchResults } = storeToRefs(fournisseurStore);
+
+const currentStep = ref(1);
+const isSubmitting = ref(false);
 
-// Supplier Search States
 const supplierSearchQuery = ref("");
 const supplierSearchResults = ref([]);
 const isSearchingSuppliers = ref(false);
 const showSupplierResults = ref(false);
-let searchTimeout = null;
+let supplierTimeout = null;
+
+const productSearchResults = ref([]);
+const isSearchingProducts = ref(false);
+const showProductResults = ref(false);
+const activeLineIndex = ref(null);
+let productTimeout = null;
+
+const errors = ref({});
+
+let lineKey = 0;
+const makeLine = () => ({
+  _key: ++lineKey,
+  product_id: null,
+  searchQuery: "",
+  description: "",
+  quantity: 1,
+  unit_price: 0,
+});
+
+const formData = ref({
+  po_number: `CMD-${Date.now()}`,
+  fournisseur_id: null,
+  supplier_name: "",
+  supplier_address: "",
+  order_date: new Date().toISOString().split("T")[0],
+  status: "brouillon",
+  delivery_address: "",
+  notes: "",
+  lines: [makeLine()],
+});
+
+const validLinesCount = computed(
+  () =>
+    formData.value.lines.filter(
+      (line) => line.product_id || line.description.trim().length
+    ).length
+);
+
+const totalUnits = computed(() =>
+  formData.value.lines.reduce(
+    (sum, line) => sum + (Number(line.quantity) || 0),
+    0
+  )
+);
+
+const totalHt = computed(() =>
+  formData.value.lines.reduce(
+    (sum, line) =>
+      sum + (Number(line.quantity) || 0) * (Number(line.unit_price) || 0),
+    0
+  )
+);
+
+const totalTtc = computed(() => totalHt.value * 1.2);
+
+const lineTotal = (line) =>
+  (Number(line.quantity) || 0) * (Number(line.unit_price) || 0);
+
+const formatCurrency = (value) =>
+  new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: "EUR",
+  }).format(Number(value || 0));
 
 const handleSupplierSearch = () => {
-  if (supplierSearchQuery.value.length < 3) {
+  const query = supplierSearchQuery.value?.trim();
+  if (!query || query.length < 2) {
     supplierSearchResults.value = [];
-    if (searchTimeout) clearTimeout(searchTimeout);
     isSearchingSuppliers.value = false;
     return;
   }
 
-  if (searchTimeout) clearTimeout(searchTimeout);
-
-  searchTimeout = setTimeout(async () => {
-    // Check if the query is still the same before starting
-    if (supplierSearchQuery.value.trim() === "") return;
-
+  if (supplierTimeout) clearTimeout(supplierTimeout);
+  supplierTimeout = setTimeout(async () => {
     isSearchingSuppliers.value = true;
     showSupplierResults.value = true;
     try {
-      const results = await FournisseurService.searchFournisseurs(
-        supplierSearchQuery.value
-      );
-      // Handle both direct array or paginated object with data property
-      let actualResults = [];
-      if (Array.isArray(results)) {
-        actualResults = results;
-      } else if (results && Array.isArray(results.data)) {
-        actualResults = results.data;
-      }
-      supplierSearchResults.value = actualResults.filter((s) => s && s.id);
+      await fournisseurStore.searchFournisseurs(query);
+      supplierSearchResults.value = Array.isArray(searchResults.value)
+        ? searchResults.value
+        : [];
     } catch (error) {
-      console.error("Error searching suppliers:", error);
+      supplierSearchResults.value = [];
+      notificationStore.error(
+        "Erreur",
+        "Impossible de rechercher les fournisseurs"
+      );
     } finally {
       isSearchingSuppliers.value = false;
     }
@@ -349,96 +662,168 @@ const handleSupplierSearch = () => {
 };
 
 const selectSupplier = (supplier) => {
-  if (!supplier || !supplier.id) return;
-  if (searchTimeout) clearTimeout(searchTimeout);
-
-  formData.value.supplierId = supplier.id;
-  formData.value.supplierName = supplier.name;
-  formData.value.supplierAddress = supplier.billing_address
+  if (!supplier?.id) return;
+  formData.value.fournisseur_id = supplier.id;
+  formData.value.supplier_name = supplier.name;
+  formData.value.supplier_address = supplier.billing_address
     ? `${supplier.billing_address.line1 || ""} ${
         supplier.billing_address.postal_code || ""
-      } ${supplier.billing_address.city || ""}`
-    : "À déterminer";
-
+      } ${supplier.billing_address.city || ""}`.trim()
+    : "";
   supplierSearchQuery.value = supplier.name;
   showSupplierResults.value = false;
 };
 
-// Product Search States
-const productSearchResults = ref([]);
-const isSearchingProducts = ref(false);
-const showProductResults = ref(false);
-const activeLineIndex = ref(null);
-let productSearchTimeout = null;
+const clearSupplier = () => {
+  supplierSearchQuery.value = "";
+  supplierSearchResults.value = [];
+  formData.value.fournisseur_id = null;
+  formData.value.supplier_name = "";
+  formData.value.supplier_address = "";
+};
 
 const handleProductSearch = (index) => {
   activeLineIndex.value = index;
-  const query = formData.value.lines[index].searchQuery;
-  console.log(query.length);
+  const query = (formData.value.lines[index]?.searchQuery || "").trim();
+
   if (query.length < 2) {
     productSearchResults.value = [];
-    if (productSearchTimeout) clearTimeout(productSearchTimeout);
     isSearchingProducts.value = false;
     return;
   }
 
-  if (productSearchTimeout) clearTimeout(productSearchTimeout);
-
-  productSearchTimeout = setTimeout(async () => {
-    // Check if the query is still the same before starting
-    if (formData.value.lines[index].searchQuery !== query) return;
-
+  if (productTimeout) clearTimeout(productTimeout);
+  productTimeout = setTimeout(async () => {
     isSearchingProducts.value = true;
     showProductResults.value = true;
     try {
-      const response = await productService.searchProducts(query);
-      // Double check if this is still the active line and query, and line still exists
-      if (
-        activeLineIndex.value === index &&
-        formData.value.lines[index] &&
-        formData.value.lines[index].searchQuery === query
-      ) {
-        // Handle paginated response: the array is in response.data.data
-        // Handle non-paginated: the array is in response.data
-        let results = [];
-        if (response && response.data) {
-          if (Array.isArray(response.data)) {
-            results = response.data;
-          } else if (response.data.data && Array.isArray(response.data.data)) {
-            results = response.data.data;
-          }
-        }
-
-        productSearchResults.value = results.filter((p) => p && p.id);
+      const response = await ProductService.searchProducts(query);
+      let products = [];
+      if (response?.data) {
+        products = Array.isArray(response.data)
+          ? response.data
+          : response.data.data || [];
       }
+      productSearchResults.value = products.filter((item) => item?.id);
     } catch (error) {
-      console.error("Error searching products:", error);
+      productSearchResults.value = [];
+      notificationStore.error(
+        "Erreur",
+        "Impossible de rechercher les produits"
+      );
     } finally {
-      // Only set to false if this was the last triggered search
-      if (activeLineIndex.value === index) {
-        isSearchingProducts.value = false;
-      }
+      isSearchingProducts.value = false;
     }
-  }, 300);
+  }, 250);
 };
 
 const selectProduct = (index, product) => {
-  if (!product || !product.id) return;
-  if (productSearchTimeout) clearTimeout(productSearchTimeout);
-
   const line = formData.value.lines[index];
-  if (!line) return;
-
-  line.productId = product.id;
+  if (!line || !product?.id) return;
+  line.product_id = product.id;
   line.searchQuery = product.nom;
-  line.designation = product.nom;
-  line.priceHt = product.prix_unitaire;
-
+  line.description = product.nom;
+  line.unit_price = Number(product.prix_unitaire || 0);
   showProductResults.value = false;
   activeLineIndex.value = null;
 };
 
-// Close dropdowns on click outside
+const addLine = () => {
+  formData.value.lines.push(makeLine());
+};
+
+const removeLine = (index) => {
+  if (formData.value.lines.length <= 1) return;
+  formData.value.lines.splice(index, 1);
+};
+
+const goToStep2 = () => {
+  errors.value = {};
+  if (!formData.value.fournisseur_id) {
+    errors.value.fournisseur_id = "Le fournisseur est requis.";
+  }
+  if (!formData.value.order_date) {
+    errors.value.order_date = "La date est requise.";
+  }
+  if (!Object.keys(errors.value).length) currentStep.value = 2;
+};
+
+const goToStep3 = () => {
+  if (!validLinesCount.value) {
+    notificationStore.warning(
+      "Validation",
+      "Ajoutez au moins une ligne valide"
+    );
+    return;
+  }
+  currentStep.value = 3;
+};
+
+const cancelForm = () => {
+  emit("cancel");
+};
+
+const submitForm = async () => {
+  errors.value = {};
+  if (!formData.value.fournisseur_id) {
+    errors.value.fournisseur_id = "Le fournisseur est requis.";
+  }
+  if (!formData.value.order_date) {
+    errors.value.order_date = "La date est requise.";
+  }
+
+  const lines = formData.value.lines
+    .map((line) => ({
+      product_id: line.product_id,
+      description: line.description,
+      quantity: Number(line.quantity) || 0,
+      unit_price: Number(line.unit_price) || 0,
+      tva_rate: 20,
+      discount_pct: 0,
+    }))
+    .filter((line) => line.product_id || line.description.trim().length);
+
+  if (!lines.length) {
+    notificationStore.warning(
+      "Validation",
+      "Ajoutez au moins une ligne valide"
+    );
+    currentStep.value = 2;
+    return;
+  }
+
+  if (Object.keys(errors.value).length) {
+    currentStep.value = 1;
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    const payload = {
+      fournisseur_id: Number(formData.value.fournisseur_id),
+      po_number: formData.value.po_number,
+      status: formData.value.status,
+      order_date: formData.value.order_date,
+      delivery_address: formData.value.delivery_address || null,
+      notes: formData.value.notes || null,
+      lines,
+    };
+
+    const created = await purchaseOrderStore.createPurchaseOrder(payload);
+    notificationStore.created("Commande fournisseur");
+    emit("submit", created);
+    emit("created", created);
+  } catch (error) {
+    const message =
+      error?.response?.data?.message ||
+      purchaseOrderStore.error ||
+      "Impossible de créer la commande";
+    notificationStore.error("Erreur", message);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
 const handleClickOutside = (event) => {
   const supplierContainer = document.querySelector(
     ".supplier-search-container"
@@ -447,19 +832,13 @@ const handleClickOutside = (event) => {
     showSupplierResults.value = false;
   }
 
-  const productContainers = document.querySelectorAll(
-    ".product-search-container"
-  );
-  let clickedInsideAnyProduct = false;
-  productContainers.forEach((container) => {
-    if (container.contains(event.target)) {
-      clickedInsideAnyProduct = true;
-    }
-  });
-
-  if (!clickedInsideAnyProduct) {
-    showProductResults.value = false;
-  }
+  let inProductContainer = false;
+  document
+    .querySelectorAll(".product-search-container")
+    .forEach((container) => {
+      if (container.contains(event.target)) inProductContainer = true;
+    });
+  if (!inProductContainer) showProductResults.value = false;
 };
 
 onMounted(() => {
@@ -469,458 +848,684 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener("click", handleClickOutside);
 });
-
-const formData = ref({
-  number: "CMD-" + Date.now(),
-  supplierId: "",
-  supplierName: "",
-  supplierAddress: "",
-  date: new Date().toISOString().split("T")[0],
-  status: "brouillon",
-  deliveryAddress: "",
-  notes: "",
-  lines: [
-    {
-      productId: "",
-      searchQuery: "",
-      designation: "",
-      quantity: 1,
-      priceHt: 0,
-    },
-  ],
-});
-
-const formatCurrency = (value) => {
-  return new Intl.NumberFormat("fr-FR", {
-    style: "currency",
-    currency: "EUR",
-  }).format(value || 0);
-};
-
-const calculateTotalHt = () => {
-  return formData.value.lines.reduce((sum, line) => {
-    return sum + (line.quantity || 0) * (line.priceHt || 0);
-  }, 0);
-};
-
-const calculateTotalTva = () => {
-  return calculateTotalHt() * 0.2;
-};
-
-const calculateTotalTtc = () => {
-  return calculateTotalHt() + calculateTotalTva();
-};
-
-const addLine = () => {
-  formData.value.lines.push({
-    productId: "",
-    searchQuery: "",
-    designation: "",
-    quantity: 1,
-    priceHt: 0,
-  });
-};
-
-const removeLine = (index) => {
-  if (formData.value.lines.length > 1) {
-    formData.value.lines.splice(index, 1);
-  }
-};
-
-const submitForm = async () => {
-  if (!formData.value.supplierId) {
-    notificationStore.error(
-      "Champ requis",
-      "Veuillez sélectionner un fournisseur."
-    );
-    return;
-  }
-
-  try {
-    const payload = {
-      fournisseur_id: formData.value.supplierId,
-      po_number: formData.value.number,
-      order_date: formData.value.date,
-      status: formData.value.status,
-      delivery_address: formData.value.deliveryAddress,
-      notes: formData.value.notes,
-      total_ht: calculateTotalHt(),
-      total_tva: calculateTotalTva(),
-      total_ttc: calculateTotalTtc(),
-      lines: formData.value.lines.map((line) => ({
-        product_id: line.productId || null,
-        description: line.designation,
-        quantity: line.quantity,
-        unit_price: line.priceHt,
-        tva_rate: 20, // Default 20%
-        total_ht: line.quantity * line.priceHt,
-      })),
-    };
-
-    console.log("Submitting purchase order:", payload);
-    const response = await PurchaseOrderService.createPurchaseOrder(payload);
-    console.log("Purchase order created:", response);
-
-    emit("submit", response.data);
-    notificationStore.success("Succès", "Commande créée avec succès !");
-  } catch (error) {
-    console.error("Error creating purchase order:", error);
-    const message =
-      error.response?.data?.message ||
-      "Une erreur est survenue lors de la création de la commande.";
-    notificationStore.error("Erreur", message);
-  }
-};
-
-const cancelForm = () => {
-  // Navigate back or close form
-};
 </script>
 
 <style scoped>
-.purchase-form {
-  max-width: 1200px;
-  margin: 0 auto;
+* {
+  box-sizing: border-box;
 }
 
-/* Form Sections */
-.form-section {
-  background: #fff;
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  border: 1px solid #e9ecef;
-}
-
-.section-header {
+.commande-form {
+  font-family: "DM Sans", sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0.25rem;
+
+  --clr-primary: #5e72e4;
+  --clr-primary-light: #eef1ff;
+  --clr-primary-dark: #4b61da;
+  --clr-success: #2dce89;
+  --clr-success-light: #e9fbf3;
+  --clr-danger: #f5365c;
+  --clr-danger-light: #fff2f5;
+  --clr-border: #e9ecef;
+  --clr-bg: #f8f9fe;
+  --clr-surface: #ffffff;
+  --clr-text: #344767;
+  --clr-text-muted: #8392ab;
+  --clr-text-subtle: #adb5bd;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.form-stepper {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: center;
+  padding: 1.5rem 2rem 0.5rem;
+  position: relative;
+}
+
+.stepper-line {
+  position: absolute;
+  top: calc(1.5rem + 18px);
+  left: calc(50% - 120px);
+  width: 240px;
+  height: 2px;
+  background: var(--clr-border);
+  z-index: 0;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  position: relative;
+  z-index: 1;
+}
+
+.step-dot {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: var(--clr-surface);
+  border: 2px solid var(--clr-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--clr-text-subtle);
+  font-size: 0.8rem;
+  transition: all var(--transition);
+}
+
+.step.active .step-dot {
+  background: var(--clr-primary);
+  border-color: var(--clr-primary);
+  color: #fff;
+  box-shadow: 0 0 0 4px var(--clr-primary-light);
+}
+
+.step.done .step-dot {
+  background: var(--clr-success);
+  border-color: var(--clr-success);
+  color: #fff;
+}
+
+.step-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--clr-text-subtle);
+}
+
+.form-card {
+  background: var(--clr-surface);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+.form-card:not(.collapsed) {
+  box-shadow: var(--shadow-md);
+  border-color: #d8ddff;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  cursor: pointer;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.card-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
+  background: var(--clr-primary-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--clr-primary);
+}
+
+.card-icon--blue {
+  background: #e7f0ff;
+  color: #2b5fd8;
+}
+
+.card-icon--green {
+  background: var(--clr-success-light);
+  color: var(--clr-success);
+}
+
+.card-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--clr-text);
+}
+
+.card-subtitle {
+  margin: 2px 0 0;
+  font-size: 0.78rem;
+  color: var(--clr-text-muted);
+}
+
+.badge-complete-soft {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.card-toggle {
+  color: var(--clr-text-muted);
+  transition: transform var(--transition);
+}
+
+.card-toggle.rotated {
+  transform: rotate(180deg);
+}
+
+.card-body {
+  padding: 1.25rem 1.5rem 1.5rem;
+  border-top: 1.5px solid var(--clr-border);
+  background: #fafbff;
+}
+
+.field-grid {
+  display: grid;
+  gap: 1rem;
   margin-bottom: 1rem;
 }
 
-.section-title {
-  font-size: 1rem;
+.two-col {
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (max-width: 720px) {
+  .two-col {
+    grid-template-columns: 1fr;
+  }
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-label {
+  font-size: 0.78rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: #4a5568;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 5px;
 }
 
-.section-title i {
-  color: #6c757d;
-  font-size: 0.9rem;
+.label-icon {
+  color: var(--clr-primary);
+  opacity: 0.8;
+  font-size: 0.74rem;
 }
 
-/* Form Labels */
-.form-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #495057;
-  margin-bottom: 0.5rem;
+.required-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--clr-danger);
 }
 
-.form-label.text-xs {
+.field-input-soft :deep(.form-control) {
+  height: 40px;
+  border-radius: var(--radius-md);
+  border: 1.5px solid var(--clr-border);
+  color: var(--clr-text);
+}
+
+.field-input-soft--sm :deep(.form-control) {
+  height: 36px;
   font-size: 0.8rem;
 }
 
-/* Search Input with Icon */
-.search-input-wrapper {
-  position: relative;
-  display: flex;
+.field-textarea {
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  background: var(--clr-surface);
+  color: var(--clr-text);
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.field-error {
+  font-size: 0.75rem;
+  color: var(--clr-danger);
+  display: inline-flex;
   align-items: center;
+  gap: 4px;
+}
+
+.status-toggle {
+  display: flex;
+  gap: 6px;
+  padding: 4px;
+  background: var(--clr-bg);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+}
+
+.status-toggle :deep(.btn) {
+  flex: 1;
+}
+
+.search-wrapper {
+  position: relative;
 }
 
 .search-icon {
   position: absolute;
-  left: 12px;
-  color: #6c757d;
-  font-size: 0.9rem;
-  z-index: 10;
-  pointer-events: none;
-}
-
-.search-input :deep(input) {
-  padding-left: 2.5rem !important;
-}
-
-/* Custom Select */
-.select-wrapper {
-  position: relative;
-}
-
-.custom-select {
-  appearance: none;
-  padding-right: 2.5rem;
-  cursor: pointer;
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  background: #fff;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.custom-select:focus {
-  border-color: #86b7fe;
-  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
-  outline: none;
-}
-
-.select-arrow {
-  position: absolute;
-  right: 12px;
+  left: 11px;
   top: 50%;
   transform: translateY(-50%);
-  color: #6c757d;
+  color: var(--clr-text-subtle);
   font-size: 0.75rem;
-  pointer-events: none;
+  z-index: 2;
 }
 
-/* Search Dropdown */
-.search-dropdown {
+.search-icon-sm {
   position: absolute;
-  top: 100%;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--clr-text-subtle);
+  font-size: 0.65rem;
+  z-index: 2;
+}
+
+.search-wrapper .field-input-soft :deep(.form-control) {
+  padding-left: 32px;
+}
+
+.search-wrapper .field-input-soft--sm :deep(.form-control) {
+  padding-left: 28px;
+}
+
+.clear-btn {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--clr-text-muted);
+}
+
+.results-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
   left: 0;
   right: 0;
-  background: #fff;
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  max-height: 250px;
+  background: var(--clr-surface);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  max-height: 260px;
   overflow-y: auto;
-  z-index: 9999;
-  margin-top: 4px;
+  z-index: 1000;
 }
 
-.product-dropdown {
-  z-index: 10000;
+.results-dropdown--sm {
+  max-height: 220px;
 }
 
-.dropdown-item {
+.result-item {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  padding: 0.75rem 1rem;
+  align-items: center;
+  gap: 10px;
+  border: none;
   border-bottom: 1px solid #f1f3f5;
   background: none;
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  width: 100%;
   text-align: left;
-  cursor: pointer;
-  transition: background-color 0.15s;
+  padding: 10px 12px;
 }
 
-.dropdown-item:last-child {
-  border-bottom: none;
+.result-item:hover {
+  background: var(--clr-primary-light);
 }
 
-.dropdown-item:hover {
-  background-color: #f8f9fa;
-}
-
-.item-name {
-  font-weight: 600;
-  color: #212529;
-  font-size: 0.9rem;
-}
-
-.item-details {
-  font-size: 0.75rem;
-  color: #6c757d;
-  margin-top: 2px;
-}
-
-.dropdown-loading {
-  padding: 1rem;
-  text-align: center;
-}
-
-.dropdown-empty {
-  padding: 1rem;
-  text-align: center;
-  color: #6c757d;
-  font-style: italic;
-  font-size: 0.875rem;
-}
-
-/* Notes Textarea */
-.notes-textarea {
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  resize: vertical;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.notes-textarea:focus {
-  border-color: #86b7fe;
-  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
-  outline: none;
-}
-
-/* Lines Container */
-.lines-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.line-item {
-  background: #f8f9fa;
-  border-radius: 10px;
-  padding: 1rem;
-  border: 1px solid #e9ecef;
-  transition: box-shadow 0.2s, border-color 0.2s;
-}
-
-.line-item:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  border-color: #dee2e6;
-}
-
-/* Delete Button */
-.btn-delete {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  border: none;
-  background: #dc3545;
-  color: #fff;
+.result-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-sm);
+  background: var(--clr-primary-light);
+  color: var(--clr-primary);
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  transition: background-color 0.2s, transform 0.1s;
 }
 
-.btn-delete:hover:not(:disabled) {
-  background: #c82333;
-  transform: scale(1.05);
+.result-icon--sm {
+  width: 26px;
+  height: 26px;
+  font-size: 0.7rem;
 }
 
-.btn-delete:disabled {
-  background: #e9ecef;
-  color: #adb5bd;
-  cursor: not-allowed;
+.result-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.result-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.result-meta {
+  font-size: 0.72rem;
+  color: var(--clr-text-muted);
+}
+
+.dropdown-loading,
+.dropdown-empty {
+  padding: 1rem;
+  color: var(--clr-text-muted);
+  text-align: center;
+}
+
+.loading-dots {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.loading-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--clr-primary);
+  animation: bounce 1s infinite;
+}
+
+.loading-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.loading-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.lines-header,
+.line-row {
+  display: grid;
+  grid-template-columns: 2.2fr 2fr 1fr 1fr 1fr 44px;
+  gap: 8px;
+}
+
+.lines-header {
+  padding: 0 12px 8px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--clr-text-muted);
+}
+
+.lines-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.line-row {
+  background: var(--clr-surface);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  align-items: center;
 }
 
 .line-total {
-  font-weight: 600;
-  color: #28a745;
-  font-size: 0.85rem;
-  white-space: nowrap;
-}
-
-/* Add Button */
-.add-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.4rem 0.875rem;
-  font-size: 0.85rem;
-}
-
-/* Totals Section - Clean Design */
-.totals-section {
-  background: #fff;
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  border: 1px solid #e9ecef;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.totals-content {
-  max-width: 350px;
-  margin-left: auto;
-}
-
-.total-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.total-row:last-child {
-  border-bottom: none;
-}
-
-.total-label {
-  font-size: 0.9rem;
-  color: #6c757d;
-}
-
-.total-value {
-  font-size: 0.95rem;
-  font-weight: 500;
-  color: #495057;
-}
-
-.total-final {
-  padding-top: 0.75rem;
-  margin-top: 0.5rem;
-}
-
-.total-final .total-label {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #212529;
-}
-
-.total-amount {
-  font-size: 1.35rem;
+  font-family: "DM Mono", monospace;
   font-weight: 700;
-  color: #212529;
+  color: var(--clr-primary);
 }
 
-/* Action Buttons */
-.action-buttons {
+.field-input--number :deep(.form-control),
+.field-input--price :deep(.form-control) {
+  text-align: right;
+  font-family: "DM Mono", monospace;
+}
+
+.price-input-wrapper {
+  position: relative;
+}
+
+.currency-symbol {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--clr-text-muted);
+  font-size: 0.78rem;
+  z-index: 2;
+}
+
+.field-input--price :deep(.form-control) {
+  padding-left: 24px;
+}
+
+.line-delete-btn {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lines-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1.5px dashed var(--clr-border);
+}
+
+.lines-summary {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.summary-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  color: var(--clr-text-muted);
+}
+
+.summary-value {
+  font-size: 0.9rem;
+  font-family: "DM Mono", monospace;
+  font-weight: 700;
+}
+
+.summary-item--total .summary-value {
+  color: var(--clr-primary);
+}
+
+.recap-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 900px) {
+  .recap-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lines-header,
+  .line-row {
+    grid-template-columns: 1.6fr 1.4fr 0.9fr 0.9fr 0.9fr 36px;
+  }
+}
+
+@media (max-width: 640px) {
+  .recap-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .lines-header {
+    display: none;
+  }
+
+  .line-row {
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  .cell-product,
+  .cell-desc,
+  .cell-total {
+    grid-column: 1 / -1;
+  }
+
+  .cell-actions {
+    justify-self: end;
+  }
+}
+
+.recap-item {
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  background: var(--clr-surface);
+  padding: 0.9rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.recap-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  color: var(--clr-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.recap-value {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--clr-text);
+}
+
+.recap-total {
+  color: var(--clr-primary);
+  font-family: "DM Mono", monospace;
+}
+
+.card-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 0.75rem;
-  padding-top: 0.5rem;
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1.5px solid var(--clr-border);
 }
 
-.btn-cancel,
-.btn-submit {
+.card-actions--spread {
+  justify-content: space-between;
+}
+
+.action-group {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.25rem;
-  font-size: 0.9rem;
+  gap: 0.75rem;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-  .form-section {
-    padding: 1rem;
-  }
+.soft-action-btn,
+.btn-add-line-soft {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
 
-  .section-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
+.btn-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
 
-  .totals-content {
-    max-width: 100%;
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
   }
+}
 
-  .action-buttons {
-    flex-direction: column-reverse;
-  }
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
 
-  .btn-cancel,
-  .btn-submit {
-    width: 100%;
-    justify-content: center;
-  }
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.slide-down-enter-to,
+.slide-down-leave-from {
+  max-height: 900px;
+}
+
+.line-list-enter-active {
+  transition: all 0.2s ease;
+}
+
+.line-list-leave-active {
+  transition: all 0.15s ease;
+}
+
+.line-list-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.line-list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
 }
 </style>
diff --git a/thanasoft-front/src/components/molecules/Interventions/InterventionForm.vue b/thanasoft-front/src/components/molecules/Interventions/InterventionForm.vue
index 90c6175..aeec95b 100644
--- a/thanasoft-front/src/components/molecules/Interventions/InterventionForm.vue
+++ b/thanasoft-front/src/components/molecules/Interventions/InterventionForm.vue
@@ -24,7 +24,10 @@
               selectedItem.email || "Pas d'email"
             }})
           </div>
-          <div v-if="fieldErrors.client_id" class="invalid-feedback small-error">
+          <div
+            v-if="fieldErrors.client_id"
+            class="invalid-feedback small-error"
+          >
             {{ fieldErrors.client_id }}
           </div>
         </div>
@@ -47,7 +50,10 @@
             Sélectionné: {{ selectedDeceased.last_name }}
             {{ selectedDeceased.first_name || "" }}
           </div>
-          <div v-if="fieldErrors.deceased_id" class="invalid-feedback small-error">
+          <div
+            v-if="fieldErrors.deceased_id"
+            class="invalid-feedback small-error"
+          >
             {{ fieldErrors.deceased_id }}
           </div>
         </div>
@@ -88,7 +94,10 @@
             :class="{ 'is-invalid': fieldErrors.scheduled_at }"
             type="date"
           />
-          <div v-if="fieldErrors.scheduled_at" class="invalid-feedback small-error">
+          <div
+            v-if="fieldErrors.scheduled_at"
+            class="invalid-feedback small-error"
+          >
             {{ fieldErrors.scheduled_at }}
           </div>
         </div>
@@ -100,7 +109,10 @@
             :class="{ 'is-invalid': fieldErrors.scheduled_at }"
             type="time"
           />
-          <div v-if="fieldErrors.scheduled_at" class="invalid-feedback small-error">
+          <div
+            v-if="fieldErrors.scheduled_at"
+            class="invalid-feedback small-error"
+          >
             {{ fieldErrors.scheduled_at }}
           </div>
         </div>
@@ -118,7 +130,10 @@
             min="1"
             placeholder="ex. 90"
           />
-          <div v-if="fieldErrors.duration_min" class="invalid-feedback small-error">
+          <div
+            v-if="fieldErrors.duration_min"
+            class="invalid-feedback small-error"
+          >
             {{ fieldErrors.duration_min }}
           </div>
         </div>
@@ -153,7 +168,10 @@
             type="text"
             placeholder="Nom du donneur d'ordre"
           />
-          <div v-if="fieldErrors.order_giver" class="invalid-feedback small-error">
+          <div
+            v-if="fieldErrors.order_giver"
+            class="invalid-feedback small-error"
+          >
             {{ fieldErrors.order_giver }}
           </div>
         </div>
diff --git a/thanasoft-front/src/components/molecules/Interventions/interventionsList.vue b/thanasoft-front/src/components/molecules/Interventions/interventionsList.vue
index 6d0831c..47379bb 100644
--- a/thanasoft-front/src/components/molecules/Interventions/interventionsList.vue
+++ b/thanasoft-front/src/components/molecules/Interventions/interventionsList.vue
@@ -40,11 +40,7 @@ const props = defineProps({
 
 // Use provided data if available, otherwise fall back to default
 const interventions = computed(() => {
-  return props.interventionData.length > 0
-    ? props.interventionData
-    : [
-       
-      ];
+  return props.interventionData.length > 0 ? props.interventionData : [];
 });
 </script>
 
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue b/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue
index 981d9ce..b871ed6 100644
--- a/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningCreationTypeSelector.vue
@@ -1,27 +1,14 @@
 <template>
   <div class="d-grid gap-2">
-    <soft-button
-      color="info"
-      @click="$emit('select-type', 'intervention')"
-    >
- 
+    <soft-button color="info" @click="$emit('select-type', 'intervention')">
       Créer une intervention
     </soft-button>
 
-    <soft-button
-      color="warning"
-
-      @click="$emit('select-type', 'leave')"
-    >
-
+    <soft-button color="warning" @click="$emit('select-type', 'leave')">
       Demande de congé employé
     </soft-button>
 
-    <soft-button
-      color="success"
-      @click="$emit('select-type', 'event')"
-    >
-
+    <soft-button color="success" @click="$emit('select-type', 'event')">
       Créer un événement
     </soft-button>
   </div>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue b/thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue
index b847b51..d1b4f78 100644
--- a/thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningKanban.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="planning-kanban-root">
-
     <!-- Toolbar -->
     <div class="kanban-toolbar">
       <div class="toolbar-left">
-        <div class="toolbar-stat" v-for="col in columnsConfig" :key="col.id">
+        <div v-for="col in columnsConfig" :key="col.id" class="toolbar-stat">
           <span class="stat-dot" :style="{ background: col.color }"></span>
           <span class="stat-label">{{ col.title }}</span>
           <span class="stat-count">{{ countByStatus(col.status) }}</span>
@@ -13,7 +12,9 @@
       <div class="toolbar-right">
         <span class="total-badge">
           <i class="fas fa-list-ul me-1"></i>
-          {{ interventions.length }} intervention{{ interventions.length > 1 ? 's' : '' }}
+          {{ interventions.length }} intervention{{
+            interventions.length > 1 ? "s" : ""
+          }}
         </span>
       </div>
     </div>
@@ -21,7 +22,6 @@
     <!-- Kanban Board -->
     <div class="kanban-scroll-area">
       <div class="kanban-columns">
-
         <div
           v-for="col in columnsConfig"
           :key="col.id"
@@ -74,7 +74,7 @@
                   <div class="card-top">
                     <span class="type-badge">
                       <i :class="getTypeIcon(item.type)" class="type-icon"></i>
-                      {{ item.type || 'Soin' }}
+                      {{ item.type || "Soin" }}
                     </span>
                     <span class="card-time">
                       <i class="far fa-clock time-icon"></i>
@@ -84,13 +84,13 @@
 
                   <!-- Deceased name -->
                   <div class="card-deceased">
-                    {{ item.deceased || 'Non spécifié' }}
+                    {{ item.deceased || "Non spécifié" }}
                   </div>
 
                   <!-- Client -->
                   <div class="card-client">
                     <i class="fas fa-user card-client-icon"></i>
-                    <span>{{ item.client || '–' }}</span>
+                    <span>{{ item.client || "–" }}</span>
                   </div>
 
                   <!-- Bottom row: date + collaborator -->
@@ -107,7 +107,11 @@
 
                 <!-- Hover action bar -->
                 <div class="card-hover-bar">
-                  <button class="hover-action" @click.stop="emit('edit', item)" title="Modifier">
+                  <button
+                    class="hover-action"
+                    title="Modifier"
+                    @click.stop="emit('edit', item)"
+                  >
                     <i class="fas fa-pen"></i>
                   </button>
                   <div class="hover-divider"></div>
@@ -117,13 +121,15 @@
             </transition-group>
 
             <!-- Empty state -->
-            <div v-if="itemsByStatus(col.status).length === 0" class="empty-column">
+            <div
+              v-if="itemsByStatus(col.status).length === 0"
+              class="empty-column"
+            >
               <i class="fas fa-inbox empty-icon"></i>
               <span>Aucune intervention</span>
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
@@ -135,8 +141,8 @@ import { ref, defineProps, defineEmits } from "vue";
 const props = defineProps({
   interventions: {
     type: Array,
-    default: () => []
-  }
+    default: () => [],
+  },
 });
 
 const emit = defineEmits(["edit", "update-status"]);
@@ -146,40 +152,85 @@ const draggingItem = ref(null);
 const dragOverCol = ref(null);
 
 const columnsConfig = [
-  { id: 'todo',        title: 'À planifier', status: 'En attente', color: '#f59e0b', icon: 'fas fa-hourglass-half' },
-  { id: 'planned',     title: 'Confirmé',    status: 'Confirmé',   color: '#3b82f6', icon: 'fas fa-calendar-check' },
-  { id: 'in-progress', title: 'En cours',    status: 'En cours',   color: '#8b5cf6', icon: 'fas fa-bolt' },
-  { id: 'done',        title: 'Terminé',     status: 'Terminé',    color: '#10b981', icon: 'fas fa-check-circle' },
+  {
+    id: "todo",
+    title: "À planifier",
+    status: "En attente",
+    color: "#f59e0b",
+    icon: "fas fa-hourglass-half",
+  },
+  {
+    id: "planned",
+    title: "Confirmé",
+    status: "Confirmé",
+    color: "#3b82f6",
+    icon: "fas fa-calendar-check",
+  },
+  {
+    id: "in-progress",
+    title: "En cours",
+    status: "En cours",
+    color: "#8b5cf6",
+    icon: "fas fa-bolt",
+  },
+  {
+    id: "done",
+    title: "Terminé",
+    status: "Terminé",
+    color: "#10b981",
+    icon: "fas fa-check-circle",
+  },
 ];
 
 const typeColors = {
-  'Soin':          '#3b82f6',
-  'Transport':     '#10b981',
-  'Mise en bière': '#f59e0b',
-  'Cérémonie':     '#8b5cf6',
+  Soin: "#3b82f6",
+  Transport: "#10b981",
+  "Mise en bière": "#f59e0b",
+  Cérémonie: "#8b5cf6",
 };
 
 const typeIcons = {
-  'Soin':          'fas fa-heartbeat',
-  'Transport':     'fas fa-car',
-  'Mise en bière': 'fas fa-box',
-  'Cérémonie':     'fas fa-dove',
+  Soin: "fas fa-heartbeat",
+  Transport: "fas fa-car",
+  "Mise en bière": "fas fa-box",
+  Cérémonie: "fas fa-dove",
 };
 
-const getTypeColor = (type) => typeColors[type] || '#6b7280';
-const getTypeIcon  = (type) => typeIcons[type]  || 'fas fa-briefcase-medical';
+const getTypeColor = (type) => typeColors[type] || "#6b7280";
+const getTypeIcon = (type) => typeIcons[type] || "fas fa-briefcase-medical";
 
 const formatTime = (d) => {
-  try { return new Date(d).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }); }
-  catch { return '--:--'; }
+  try {
+    return new Date(d).toLocaleTimeString("fr-FR", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return "--:--";
+  }
 };
 const formatDate = (d) => {
-  try { return new Date(d).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' }); }
-  catch { return '–'; }
+  try {
+    return new Date(d).toLocaleDateString("fr-FR", {
+      day: "numeric",
+      month: "short",
+    });
+  } catch {
+    return "–";
+  }
 };
-const getInitials = (n) => n ? n.split(' ').map(s => s[0]).join('').substring(0, 2).toUpperCase() : '?';
+const getInitials = (n) =>
+  n
+    ? n
+        .split(" ")
+        .map((s) => s[0])
+        .join("")
+        .substring(0, 2)
+        .toUpperCase()
+    : "?";
 
-const itemsByStatus = (status) => props.interventions.filter(i => i.status === status);
+const itemsByStatus = (status) =>
+  props.interventions.filter((i) => i.status === status);
 const countByStatus = (status) => itemsByStatus(status).length;
 const progressWidth = (status) => {
   if (!props.interventions.length) return 0;
@@ -190,39 +241,43 @@ const progressWidth = (status) => {
 const onDragStart = (e, item) => {
   draggingId.value = item.id.toString();
   draggingItem.value = item;
-  e.dataTransfer.effectAllowed = 'move';
-  e.dataTransfer.setData('text/plain', item.id.toString());
+  e.dataTransfer.effectAllowed = "move";
+  e.dataTransfer.setData("text/plain", item.id.toString());
 };
 
 const onDragEnd = () => {
   draggingId.value = null;
   draggingItem.value = null;
   dragOverCol.value = null;
-  document.querySelectorAll('.cards-zone').forEach(z => z.classList.remove('drag-over'));
+  document
+    .querySelectorAll(".cards-zone")
+    .forEach((z) => z.classList.remove("drag-over"));
 };
 
 const onDragOver = (e, colId) => {
   e.preventDefault();
-  e.dataTransfer.dropEffect = 'move';
+  e.dataTransfer.dropEffect = "move";
   if (dragOverCol.value !== colId) {
-    document.querySelectorAll('.cards-zone').forEach(z => z.classList.remove('drag-over'));
+    document
+      .querySelectorAll(".cards-zone")
+      .forEach((z) => z.classList.remove("drag-over"));
     dragOverCol.value = colId;
-    e.currentTarget.classList.add('drag-over');
+    e.currentTarget.classList.add("drag-over");
   }
 };
 
 const onDragLeave = (e) => {
   if (!e.currentTarget.contains(e.relatedTarget)) {
-    e.currentTarget.classList.remove('drag-over');
+    e.currentTarget.classList.remove("drag-over");
   }
 };
 
 const onDrop = (e, col) => {
   e.preventDefault();
-  e.currentTarget.classList.remove('drag-over');
-  const id = e.dataTransfer.getData('text/plain');
+  e.currentTarget.classList.remove("drag-over");
+  const id = e.dataTransfer.getData("text/plain");
   if (id && draggingItem.value) {
-    emit('update-status', { id, status: col.status });
+    emit("update-status", { id, status: col.status });
   }
   draggingId.value = null;
   draggingItem.value = null;
@@ -237,7 +292,6 @@ const onDrop = (e, col) => {
   flex-direction: column;
   height: calc(100vh - 180px);
   min-height: 500px;
-  
 }
 
 /* ─── Toolbar ─── */
@@ -304,10 +358,20 @@ const onDrop = (e, col) => {
   padding-bottom: 8px;
 }
 
-.kanban-scroll-area::-webkit-scrollbar { height: 5px; }
-.kanban-scroll-area::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
-.kanban-scroll-area::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
-.kanban-scroll-area::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+.kanban-scroll-area::-webkit-scrollbar {
+  height: 5px;
+}
+.kanban-scroll-area::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 10px;
+}
+.kanban-scroll-area::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 10px;
+}
+.kanban-scroll-area::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
 
 /* ─── Columns ─── */
 .kanban-columns {
@@ -407,9 +471,16 @@ const onDrop = (e, col) => {
   min-height: 100px;
 }
 
-.cards-zone::-webkit-scrollbar { width: 4px; }
-.cards-zone::-webkit-scrollbar-track { background: transparent; }
-.cards-zone::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
+.cards-zone::-webkit-scrollbar {
+  width: 4px;
+}
+.cards-zone::-webkit-scrollbar-track {
+  background: transparent;
+}
+.cards-zone::-webkit-scrollbar-thumb {
+  background: #e2e8f0;
+  border-radius: 4px;
+}
 
 .cards-zone.drag-over {
   background: color-mix(in srgb, #3b82f6 6%, #f8fafc);
@@ -427,12 +498,12 @@ const onDrop = (e, col) => {
   overflow: hidden;
   cursor: grab;
   transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
 .kanban-card:hover {
   transform: translateY(-3px);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   border-color: #dde3ea;
 }
 
@@ -650,4 +721,4 @@ const onDrop = (e, col) => {
 .card-list-move {
   transition: transform 0.28s ease;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue b/thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue
index bab5ab9..1c6a730 100644
--- a/thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue
+++ b/thanasoft-front/src/components/molecules/Planning/PlanningWeekGrid.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="calendar-root">
-
     <!-- Custom Header / Navigation -->
     <div class="calendar-header">
       <div class="header-left">
@@ -9,18 +8,26 @@
           <span class="week-range">{{ weekRangeLabel }}</span>
         </div>
         <div class="legend-row">
-          <span v-for="(color, type) in typeColors" :key="type" class="legend-item">
+          <span
+            v-for="(color, type) in typeColors"
+            :key="type"
+            class="legend-item"
+          >
             <span class="legend-dot" :style="{ background: color }"></span>
             {{ type }}
           </span>
         </div>
       </div>
       <div class="header-right">
-        <button class="nav-btn" @click="navigate(-1)" title="Semaine précédente">
+        <button
+          class="nav-btn"
+          title="Semaine précédente"
+          @click="navigate(-1)"
+        >
           <i class="fas fa-chevron-left"></i>
         </button>
         <button class="today-btn" @click="goToday">Aujourd'hui</button>
-        <button class="nav-btn" @click="navigate(1)" title="Semaine suivante">
+        <button class="nav-btn" title="Semaine suivante" @click="navigate(1)">
           <i class="fas fa-chevron-right"></i>
         </button>
       </div>
@@ -39,23 +46,48 @@
         :style="popoverStyle"
         @click.stop
       >
-        <div class="popover-strip" :style="{ background: activePopover.color }"></div>
+        <div
+          class="popover-strip"
+          :style="{ background: activePopover.color }"
+        ></div>
         <div class="popover-body">
           <div class="popover-top">
-            <span class="popover-type" :style="{ color: activePopover.color, background: activePopover.color + '18' }">
+            <span
+              class="popover-type"
+              :style="{
+                color: activePopover.color,
+                background: activePopover.color + '18',
+              }"
+            >
               <i :class="getTypeIcon(activePopover.type)" class="me-1"></i>
               {{ activePopover.type }}
             </span>
-            <button class="popover-close" @click="closePopover"><i class="fas fa-times"></i></button>
+            <button class="popover-close" @click="closePopover">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+          <div class="popover-deceased">
+            {{ activePopover.deceased || "Non spécifié" }}
           </div>
-          <div class="popover-deceased">{{ activePopover.deceased || 'Non spécifié' }}</div>
           <div class="popover-meta">
-            <span><i class="fas fa-user me-1"></i>{{ activePopover.client || '–' }}</span>
-            <span><i class="far fa-clock me-1"></i>{{ activePopover.timeLabel }}</span>
+            <span
+              ><i class="fas fa-user me-1"></i
+              >{{ activePopover.client || "–" }}</span
+            >
+            <span
+              ><i class="far fa-clock me-1"></i
+              >{{ activePopover.timeLabel }}</span
+            >
           </div>
           <div class="popover-status">
-            <span class="status-pill" :style="{ background: activePopover.color + '20', color: activePopover.color }">
-              {{ activePopover.status || 'Planifié' }}
+            <span
+              class="status-pill"
+              :style="{
+                background: activePopover.color + '20',
+                color: activePopover.color,
+              }"
+            >
+              {{ activePopover.status || "Planifié" }}
             </span>
           </div>
           <button class="popover-edit-btn" @click="editFromPopover">
@@ -64,13 +96,24 @@
         </div>
       </div>
     </transition>
-    <div v-if="activePopover" class="popover-backdrop" @click="closePopover"></div>
-
+    <div
+      v-if="activePopover"
+      class="popover-backdrop"
+      @click="closePopover"
+    ></div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, computed, defineProps, defineEmits } from "vue";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  watch,
+  computed,
+  defineProps,
+  defineEmits,
+} from "vue";
 import { Calendar } from "@fullcalendar/core";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
@@ -91,28 +134,29 @@ const popoverStyle = ref({});
 const currentDate = ref(props.startDate);
 
 const typeColors = {
-  'Soin':          '#3b82f6',
-  'Transport':     '#10b981',
-  'Mise en bière': '#f59e0b',
-  'Cérémonie':     '#8b5cf6',
+  Soin: "#3b82f6",
+  Transport: "#10b981",
+  "Mise en bière": "#f59e0b",
+  Cérémonie: "#8b5cf6",
 };
 
 const typeIcons = {
-  'Soin':          'fas fa-heartbeat',
-  'Transport':     'fas fa-car',
-  'Mise en bière': 'fas fa-box',
-  'Cérémonie':     'fas fa-dove',
+  Soin: "fas fa-heartbeat",
+  Transport: "fas fa-car",
+  "Mise en bière": "fas fa-box",
+  Cérémonie: "fas fa-dove",
 };
 
-const getTypeIcon = (type) => typeIcons[type] || 'fas fa-briefcase-medical';
+const getTypeIcon = (type) => typeIcons[type] || "fas fa-briefcase-medical";
 
 const parseInterventionDate = (value) => {
   if (!value) return null;
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (value instanceof Date)
+    return Number.isNaN(value.getTime()) ? null : value;
 
-  if (typeof value === 'string') {
+  if (typeof value === "string") {
     // Support backend format "YYYY-MM-DD HH:mm:ss" (without timezone)
-    const normalized = value.includes(' ') ? value.replace(' ', 'T') : value;
+    const normalized = value.includes(" ") ? value.replace(" ", "T") : value;
     const parsed = new Date(normalized);
     if (!Number.isNaN(parsed.getTime())) return parsed;
   }
@@ -122,41 +166,54 @@ const parseInterventionDate = (value) => {
 };
 
 const weekRangeLabel = computed(() => {
-  if (!calendar) return '';
+  if (!calendar) return "";
   try {
     const view = calendar.view;
     const start = view.currentStart;
     const end = new Date(view.currentEnd);
     end.setDate(end.getDate() - 1);
-    const fmt = (d) => d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+    const fmt = (d) =>
+      d.toLocaleDateString("fr-FR", { day: "numeric", month: "short" });
     return `${fmt(start)} – ${fmt(end)} ${start.getFullYear()}`;
-  } catch { return ''; }
+  } catch {
+    return "";
+  }
 });
 
-const mapEvents = (interventions) => interventions.map((i) => {
-  const color = typeColors[i.type] || '#6b7280';
-  const start = parseInterventionDate(i.date);
-  if (!start) return null;
+const mapEvents = (interventions) =>
+  interventions
+    .map((i) => {
+      const color = typeColors[i.type] || "#6b7280";
+      const start = parseInterventionDate(i.date);
+      if (!start) return null;
 
-  const parsedEnd = parseInterventionDate(i.end);
-  const end = parsedEnd || new Date(start.getTime() + 60 * 60 * 1000);
+      const parsedEnd = parseInterventionDate(i.end);
+      const end = parsedEnd || new Date(start.getTime() + 60 * 60 * 1000);
 
-  return {
-    id: String(i.id),
-    title: i.deceased || i.type || 'Intervention',
-    start, end,
-    backgroundColor: color + 'dd',
-    borderColor: color,
-    textColor: '#fff',
-    extendedProps: { originalData: i, color },
-  };
-}).filter(Boolean);
+      return {
+        id: String(i.id),
+        title: i.deceased || i.type || "Intervention",
+        start,
+        end,
+        backgroundColor: color + "dd",
+        borderColor: color,
+        textColor: "#fff",
+        extendedProps: { originalData: i, color },
+      };
+    })
+    .filter(Boolean);
 
 const showPopover = (jsEvent, originalData, color) => {
-  const rect = jsEvent.target.closest('.fc-event')?.getBoundingClientRect() || jsEvent.target.getBoundingClientRect();
+  const rect =
+    jsEvent.target.closest(".fc-event")?.getBoundingClientRect() ||
+    jsEvent.target.getBoundingClientRect();
   const rootRect = calendarEl.value.getBoundingClientRect();
 
-  const fmt = (d) => new Date(d).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  const fmt = (d) =>
+    new Date(d).toLocaleTimeString("fr-FR", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
 
   activePopover.value = {
     ...originalData,
@@ -177,14 +234,16 @@ const showPopover = (jsEvent, originalData, color) => {
   if (top + 200 > rootRect.height) top = rootRect.height - 210;
   if (top < 0) top = 8;
 
-  popoverStyle.value = { left: left + 'px', top: top + 'px' };
+  popoverStyle.value = { left: left + "px", top: top + "px" };
 };
 
-const closePopover = () => { activePopover.value = null; };
+const closePopover = () => {
+  activePopover.value = null;
+};
 
 const editFromPopover = () => {
   if (activePopover.value) {
-    emit('edit', activePopover.value);
+    emit("edit", activePopover.value);
     closePopover();
   }
 };
@@ -208,19 +267,19 @@ const initCalendar = () => {
 
   calendar = new Calendar(calendarEl.value, {
     plugins: [timeGridPlugin, interactionPlugin],
-    initialView: 'timeGridWeek',
-      locale: frLocale,
-      headerToolbar: false,
-      initialDate: props.startDate,
-      allDaySlot: false,
-      slotMinTime: '00:00:00',
-      slotMaxTime: '24:00:00',
-    height: 'auto',
+    initialView: "timeGridWeek",
+    locale: frLocale,
+    headerToolbar: false,
+    initialDate: props.startDate,
+    allDaySlot: false,
+    slotMinTime: "00:00:00",
+    slotMaxTime: "24:00:00",
+    height: "auto",
     expandRows: true,
     stickyHeaderDates: true,
     nowIndicator: true,
-    slotDuration: '00:30:00',
-    dayHeaderFormat: { weekday: 'short', day: 'numeric', month: 'short' },
+    slotDuration: "00:30:00",
+    dayHeaderFormat: { weekday: "short", day: "numeric", month: "short" },
     events: mapEvents(props.interventions),
 
     eventClick: (info) => {
@@ -232,14 +291,18 @@ const initCalendar = () => {
 
     dateClick: (info) => {
       closePopover();
-      emit('cell-click', { date: info.date });
+      emit("cell-click", { date: info.date });
     },
 
     eventContent: (arg) => {
       const data = arg.event.extendedProps.originalData;
       const color = arg.event.extendedProps.color;
-      const icon = typeIcons[data?.type] || 'fas fa-briefcase-medical';
-      const fmt = (d) => new Date(d).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+      const icon = typeIcons[data?.type] || "fas fa-briefcase-medical";
+      const fmt = (d) =>
+        new Date(d).toLocaleTimeString("fr-FR", {
+          hour: "2-digit",
+          minute: "2-digit",
+        });
       return {
         html: `
           <div class="fc-event-custom">
@@ -248,9 +311,9 @@ const initCalendar = () => {
               <span class="fce-time">${fmt(arg.event.start)}</span>
             </div>
             <div class="fce-title">${arg.event.title}</div>
-            ${data?.client ? `<div class="fce-sub">${data.client}</div>` : ''}
+            ${data?.client ? `<div class="fce-sub">${data.client}</div>` : ""}
           </div>
-        `
+        `,
       };
     },
 
@@ -264,15 +327,29 @@ const initCalendar = () => {
 };
 
 onMounted(() => initCalendar());
-onUnmounted(() => { if (calendar) calendar.destroy(); });
+onUnmounted(() => {
+  if (calendar) calendar.destroy();
+});
 
-watch(() => props.startDate, (d) => { if (calendar) { calendar.gotoDate(d); currentDate.value = d; } });
-watch(() => props.interventions, (v) => {
-  if (calendar) {
-    calendar.removeAllEvents();
-    calendar.addEventSource(mapEvents(v));
+watch(
+  () => props.startDate,
+  (d) => {
+    if (calendar) {
+      calendar.gotoDate(d);
+      currentDate.value = d;
+    }
   }
-}, { deep: true });
+);
+watch(
+  () => props.interventions,
+  (v) => {
+    if (calendar) {
+      calendar.removeAllEvents();
+      calendar.addEventSource(mapEvents(v));
+    }
+  },
+  { deep: true }
+);
 
 // Force label recompute when currentDate changes
 watch(currentDate, () => {}); // just triggers computed re-eval
@@ -287,7 +364,7 @@ watch(currentDate, () => {}); // just triggers computed re-eval
   background: #fff;
   border-radius: 16px;
   border: 1px solid #e5e7eb;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   overflow: hidden;
   min-height: 620px;
 }
@@ -407,7 +484,7 @@ watch(currentDate, () => {}); // just triggers computed re-eval
 
 /* ─── FullCalendar Overrides ─── */
 :deep(.fc) {
-  font-family: 'Segoe UI', system-ui, sans-serif;
+  font-family: "Segoe UI", system-ui, sans-serif;
 }
 
 :deep(.fc-scrollgrid) {
@@ -486,12 +563,12 @@ watch(currentDate, () => {}); // just triggers computed re-eval
   transition: transform 0.15s, box-shadow 0.15s !important;
   padding: 0 !important;
   margin: 1px 2px !important;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
 }
 
 :deep(.fc-event:hover) {
   transform: scale(1.02);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
   z-index: 10 !important;
 }
 
@@ -546,7 +623,7 @@ watch(currentDate, () => {}); // just triggers computed re-eval
   width: 260px;
   background: #fff;
   border-radius: 12px;
-  box-shadow: 0 16px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
   z-index: 200;
   overflow: hidden;
   border: 1px solid #e5e7eb;
@@ -595,7 +672,9 @@ watch(currentDate, () => {}); // just triggers computed re-eval
   border-radius: 5px;
   transition: color 0.15s;
 }
-.popover-close:hover { color: #374151; }
+.popover-close:hover {
+  color: #374151;
+}
 
 .popover-deceased {
   font-size: 0.9rem;
@@ -644,7 +723,9 @@ watch(currentDate, () => {}); // just triggers computed re-eval
   transition: background 0.15s;
   margin-top: 2px;
 }
-.popover-edit-btn:hover { background: #2d4a6e; }
+.popover-edit-btn:hover {
+  background: #2d4a6e;
+}
 
 /* ─── Popover animation ─── */
 .popover-fade-enter-active,
diff --git a/thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue b/thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue
new file mode 100644
index 0000000..dec501b
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Product/ProductInfoSection.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="info-section">
+    <!-- Read mode -->
+    <template v-if="!editMode">
+      <field-display label="Nom du produit"   :value="product.nom" />
+      <field-display label="Référence"         :value="product.reference" fallback="Sans référence" />
+      <field-display label="Catégorie"         :value="categoryName" />
+      <field-display label="Fabricant"         :value="product.fabricant" fallback="Non renseigné" />
+      <field-display label="Numéro de lot"     :value="product.numero_lot" fallback="Non renseigné" />
+      <field-display label="Unité"             :value="product.unite" />
+      <field-display
+        label="Date d'expiration"
+        :value="formattedExpiration"
+        :value-class="expirationClass"
+      />
+      <field-display label="Description">
+        <span style="white-space: pre-line">{{ product.description || "Aucune description" }}</span>
+      </field-display>
+    </template>
+
+    <!-- Edit mode -->
+    <template v-else>
+      <div class="info-section__grid">
+        <field-input
+          label="Nom du produit"
+          :model-value="form.nom"
+          required
+          :error="errors.nom?.[0]"
+          placeholder="Nom du produit"
+          @update:model-value="$emit('update:form', { ...form, nom: $event })"
+        />
+        <field-input
+          label="Référence"
+          :model-value="form.reference"
+          required
+          :error="errors.reference?.[0]"
+          placeholder="Référence produit"
+          @update:model-value="$emit('update:form', { ...form, reference: $event })"
+        />
+        <field-input
+          label="Catégorie"
+          type="select"
+          :model-value="form.categorie_id"
+          required
+          :error="errors.categorie_id?.[0]"
+          @update:model-value="$emit('update:form', { ...form, categorie_id: $event })"
+        >
+          <option value="">Sélectionner une catégorie</option>
+          <option v-for="cat in categories" :key="cat.id" :value="cat.id.toString()">
+            {{ cat.name }}
+          </option>
+        </field-input>
+        <field-input
+          label="Fabricant"
+          :model-value="form.fabricant"
+          :error="errors.fabricant?.[0]"
+          placeholder="Fabricant"
+          @update:model-value="$emit('update:form', { ...form, fabricant: $event })"
+        />
+        <field-input
+          label="Numéro de lot"
+          :model-value="form.numero_lot"
+          :error="errors.numero_lot?.[0]"
+          placeholder="Numéro de lot"
+          @update:model-value="$emit('update:form', { ...form, numero_lot: $event })"
+        />
+        <field-input
+          label="Date d'expiration"
+          type="date"
+          :model-value="form.date_expiration"
+          :error="errors.date_expiration?.[0]"
+          @update:model-value="$emit('update:form', { ...form, date_expiration: $event })"
+        />
+        <field-input
+          label="Unité"
+          :model-value="form.unite"
+          required
+          :error="errors.unite?.[0]"
+          placeholder="ex: boîte, flacon"
+          @update:model-value="$emit('update:form', { ...form, unite: $event })"
+        />
+        <field-input
+          label="Description"
+          type="textarea"
+          :model-value="form.description"
+          placeholder="Description du produit..."
+          style="grid-column: 1 / -1"
+          @update:model-value="$emit('update:form', { ...form, description: $event })"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from "vue";
+import FieldDisplay from "@/components/atoms/Product/FieldDisplay.vue";
+import FieldInput   from "@/components/atoms/Product/FieldInput.vue";
+
+const props = defineProps({
+  product:     { type: Object, required: true },
+  form:        { type: Object, required: true },
+  categories:  { type: Array,  default: () => [] },
+  errors:      { type: Object, default: () => ({}) },
+  editMode:    { type: Boolean, default: false },
+  categoryName:{ type: String, default: "" },
+});
+defineEmits(["update:form"]);
+
+const formattedExpiration = computed(() => {
+  if (!props.product?.date_expiration) return "Non renseignée";
+  return new Date(props.product.date_expiration).toLocaleDateString("fr-FR", {
+    day: "numeric", month: "long", year: "numeric",
+  });
+});
+
+const expirationClass = computed(() => {
+  if (!props.product?.date_expiration) return "";
+  const diff = Math.ceil(
+    (new Date(props.product.date_expiration) - new Date()) / 86400000
+  );
+  if (diff < 0) return "expired";
+  if (diff <= 30) return "expiring-soon";
+  return "";
+});
+</script>
+
+<style scoped>
+.info-section { display: flex; flex-direction: column; }
+.info-section__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+@media (max-width: 640px) {
+  .info-section__grid { grid-template-columns: 1fr; }
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue b/thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue
new file mode 100644
index 0000000..00577b8
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Product/ProductMovementsSection.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div v-if="!movements.length" class="movements-empty">
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M7 16l-4-4 4-4M17 8l4 4-4 4M14 4l-4 16"/></svg>
+      <p>Aucun mouvement de stock enregistré</p>
+    </div>
+    <div v-else class="movements-table-wrap">
+      <table class="movements-table">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Type</th>
+            <th>Quantité</th>
+            <th>Référence</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="m in movements" :key="m.id">
+            <td class="movements-table__date">{{ formatDate(m.date || m.created_at) }}</td>
+            <td>
+              <span class="movements-table__type" :class="typeClass(m.type)">
+                {{ m.type || "—" }}
+              </span>
+            </td>
+            <td class="movements-table__qty" :class="qtyClass(m)">
+              {{ formatQty(m) }}
+            </td>
+            <td class="movements-table__ref">{{ m.reference || m.reason || "—" }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  movements: { type: Array, default: () => [] },
+});
+
+const formatDate = (d) => {
+  if (!d) return "—";
+  return new Date(d).toLocaleDateString("fr-FR", {
+    day: "2-digit", month: "short", year: "numeric",
+  });
+};
+
+const formatQty = (m) => {
+  const q = m.quantite ?? m.quantity;
+  if (q === undefined || q === null) return "—";
+  const prefix = q > 0 ? "+" : "";
+  return `${prefix}${q}`;
+};
+
+const typeClass = (type) => {
+  if (!type) return "";
+  const t = type.toLowerCase();
+  if (t.includes("entree") || t.includes("entrée") || t.includes("achat")) return "type-in";
+  if (t.includes("sortie") || t.includes("utilisation")) return "type-out";
+  return "type-neutral";
+};
+
+const qtyClass = (m) => {
+  const q = m.quantite ?? m.quantity ?? 0;
+  return q > 0 ? "qty-positive" : q < 0 ? "qty-negative" : "";
+};
+</script>
+
+<style scoped>
+.movements-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 3rem 1rem;
+  color: #9ca3af;
+  text-align: center;
+}
+.movements-empty p { font-size: 14px; margin: 0; }
+
+.movements-table-wrap { overflow-x: auto; }
+
+.movements-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.movements-table thead tr {
+  border-bottom: 2px solid #f3f4f6;
+}
+.movements-table th {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #9ca3af;
+  padding: 0 0.75rem 0.625rem;
+  text-align: left;
+  white-space: nowrap;
+}
+.movements-table td {
+  padding: 10px 0.75rem;
+  color: #374151;
+  border-bottom: 1px solid #f9fafb;
+  vertical-align: middle;
+}
+.movements-table tr:last-child td { border-bottom: none; }
+.movements-table tr:hover td { background: #f9fafb; }
+
+.movements-table__date { color: #6b7280; font-variant-numeric: tabular-nums; }
+.movements-table__ref  { color: #9ca3af; font-size: 12px; }
+
+.movements-table__type {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.type-in      { background: #ecfdf5; color: #065f46; }
+.type-out     { background: #fef2f2; color: #991b1b; }
+.type-neutral { background: #f3f4f6; color: #374151; }
+
+.movements-table__qty { font-weight: 600; font-variant-numeric: tabular-nums; }
+.qty-positive { color: #059669; }
+.qty-negative { color: #dc2626; }
+</style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductSidebar.vue b/thanasoft-front/src/components/molecules/Product/ProductSidebar.vue
new file mode 100644
index 0000000..ce895a4
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Product/ProductSidebar.vue
@@ -0,0 +1,135 @@
+<template>
+  <aside class="product-sidebar">
+    <div class="product-sidebar__img-wrap">
+      <product-image
+        :image-url="imageUrl"
+        :alt-text="`Image de ${name}`"
+      />
+    </div>
+
+    <div class="product-sidebar__meta">
+      <h6 class="product-sidebar__name">{{ name }}</h6>
+      <p class="product-sidebar__ref">{{ reference || "Sans référence" }}</p>
+      <div class="product-sidebar__badges">
+        <product-badge :variant="isLowStock ? 'warning' : 'success'">
+          {{ isLowStock ? "Stock faible" : "Stock OK" }}
+        </product-badge>
+        <product-badge v-if="isExpired" variant="danger">Expiré</product-badge>
+        <product-badge v-else-if="isExpiringSoon" variant="info">Expire bientôt</product-badge>
+      </div>
+    </div>
+
+    <nav class="product-sidebar__nav">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        class="product-sidebar__nav-item"
+        :class="{ 'is-active': modelValue === tab.id }"
+        @click="$emit('update:modelValue', tab.id)"
+      >
+        <component :is="tab.icon" class="nav-icon" />
+        {{ tab.label }}
+      </button>
+    </nav>
+  </aside>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+import ProductImage from "@/components/atoms/Product/ProductImage.vue";
+import ProductBadge from "@/components/atoms/Product/ProductBadge.vue";
+
+defineProps({
+  modelValue:    { type: String, default: "details" },
+  name:          { type: String, default: "" },
+  reference:     { type: String, default: "" },
+  imageUrl:      { type: String, default: "" },
+  isLowStock:    { type: Boolean, default: false },
+  isExpired:     { type: Boolean, default: false },
+  isExpiringSoon:{ type: Boolean, default: false },
+  tabs:          { type: Array, default: () => [] },
+});
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped>
+.product-sidebar {
+  position: sticky;
+  top: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.product-sidebar__img-wrap {
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  margin: 1.25rem auto 0;
+  flex-shrink: 0;
+}
+
+.product-sidebar__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 0.75rem 1rem 1rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+.product-sidebar__name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #111827;
+  text-align: center;
+  margin: 0;
+}
+.product-sidebar__ref {
+  font-size: 12px;
+  color: #9ca3af;
+  margin: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+.product-sidebar__badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+  margin-top: 4px;
+}
+
+.product-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  gap: 2px;
+}
+.product-sidebar__nav-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 12px;
+  border-radius: 7px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+  font-family: inherit;
+  text-align: left;
+  transition: background 0.12s, color 0.12s;
+}
+.product-sidebar__nav-item:hover { background: #f9fafb; color: #111827; }
+.product-sidebar__nav-item.is-active {
+  background: #111827;
+  color: #fff;
+}
+.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
+</style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductStockSection.vue b/thanasoft-front/src/components/molecules/Product/ProductStockSection.vue
new file mode 100644
index 0000000..c5616a0
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Product/ProductStockSection.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div class="stock-stats">
+      <product-stat-card
+        label="Stock actuel"
+        :value="product.stock_actuel ?? 0"
+        :unit="product.unite"
+        :value-class="product.is_low_stock ? 'low' : 'ok'"
+      />
+      <product-stat-card
+        label="Stock minimum"
+        :value="product.stock_minimum ?? 0"
+        :unit="product.unite"
+      />
+      <product-stat-card
+        label="Prix unitaire"
+        :value="formattedPrice"
+        :sub="product.unite ? `par ${product.unite}` : ''"
+      />
+    </div>
+
+    <template v-if="editMode">
+      <div class="stock-grid mt-4">
+        <field-input
+          label="Stock actuel"
+          type="number"
+          :model-value="form.stock_actuel"
+          required
+          :error="errors.stock_actuel?.[0]"
+          min="0"
+          step="1"
+          placeholder="0"
+          @update:model-value="$emit('update:form', { ...form, stock_actuel: $event })"
+        />
+        <field-input
+          label="Stock minimum"
+          type="number"
+          :model-value="form.stock_minimum"
+          required
+          :error="errors.stock_minimum?.[0]"
+          min="0"
+          step="1"
+          placeholder="0"
+          @update:model-value="$emit('update:form', { ...form, stock_minimum: $event })"
+        />
+        <field-input
+          label="Prix unitaire (€)"
+          type="number"
+          :model-value="form.prix_unitaire"
+          required
+          :error="errors.prix_unitaire?.[0]"
+          min="0"
+          step="0.01"
+          placeholder="0.00"
+          @update:model-value="$emit('update:form', { ...form, prix_unitaire: $event })"
+        />
+        <field-input
+          label="Conditionnement"
+          :model-value="form.conditionnement_nom"
+          :error="errors.conditionnement_nom?.[0]"
+          placeholder="ex: Carton 12 unités"
+          @update:model-value="$emit('update:form', { ...form, conditionnement_nom: $event })"
+        />
+        <field-input
+          label="Qté par conditionnement"
+          type="number"
+          :model-value="form.conditionnement_quantite"
+          :error="errors.conditionnement_quantite?.[0]"
+          min="0"
+          step="1"
+          placeholder="0"
+          @update:model-value="$emit('update:form', { ...form, conditionnement_quantite: $event })"
+        />
+      </div>
+    </template>
+
+    <template v-else-if="hasConditioning">
+      <div class="cond-row mt-4">
+        <span class="cond-label">Conditionnement</span>
+        <span class="cond-value">
+          {{ product.conditionnement?.nom }}
+          <span v-if="product.conditionnement?.quantite">
+            · {{ product.conditionnement.quantite }} {{ product.conditionnement.unite }}
+          </span>
+        </span>
+      </div>
+    </template>
+
+    <div class="stock-indicators mt-4">
+      <soft-badge
+        :color="product.is_low_stock ? 'warning' : 'success'"
+        variant="gradient"
+        size="sm"
+      >
+        {{ product.is_low_stock ? "Stock faible" : "Stock OK" }}
+      </soft-badge>
+      <soft-badge v-if="isExpired" color="danger" variant="gradient" size="sm"
+        >Expiré</soft-badge
+      >
+      <soft-badge
+        v-else-if="isExpiringSoon"
+        color="info"
+        variant="gradient"
+        size="sm"
+        >Expire bientôt</soft-badge
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from "vue";
+import ProductStatCard from "@/components/atoms/Product/ProductStatCard.vue";
+import FieldInput      from "@/components/atoms/Product/FieldInput.vue";
+import SoftBadge from "@/components/SoftBadge.vue";
+
+const props = defineProps({
+  product:       { type: Object, required: true },
+  form:          { type: Object, required: true },
+  errors:        { type: Object, default: () => ({}) },
+  editMode:      { type: Boolean, default: false },
+  isExpired:     { type: Boolean, default: false },
+  isExpiringSoon:{ type: Boolean, default: false },
+});
+defineEmits(["update:form"]);
+
+const formattedPrice = computed(() => {
+  const p = props.product.prix_unitaire;
+  if (!p && p !== 0) return "—";
+  return new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(p);
+});
+
+const hasConditioning = computed(() =>
+  props.product.conditionnement?.nom || props.product.conditionnement?.quantite
+);
+</script>
+
+<style scoped>
+.stock-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+.stock-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+.stock-indicators { display: flex; flex-wrap: wrap; gap: 6px; }
+.cond-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 10px 12px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 7px;
+}
+.cond-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #9ca3af;
+  min-width: 120px;
+}
+.cond-value { font-size: 14px; color: #111827; }
+@media (max-width: 640px) {
+  .stock-stats { grid-template-columns: 1fr 1fr; }
+  .stock-grid  { grid-template-columns: 1fr; }
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue b/thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue
new file mode 100644
index 0000000..37f224d
--- /dev/null
+++ b/thanasoft-front/src/components/molecules/Product/ProductSupplierSection.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div v-if="supplier" class="supplier-card">
+      <div class="supplier-card__avatar">
+        {{ initials }}
+      </div>
+      <div class="supplier-card__body">
+        <p class="supplier-card__name">{{ supplier.name || supplier.nom }}</p>
+        <p v-if="supplier.email" class="supplier-card__email">{{ supplier.email }}</p>
+        <p v-if="supplier.phone" class="supplier-card__phone">{{ supplier.phone }}</p>
+      </div>
+      <button class="supplier-card__cta" @click="$emit('view', supplier)">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M3 13L13 3M13 3H7M13 3v6"/>
+        </svg>
+        Voir le fournisseur
+      </button>
+    </div>
+    <div v-else class="supplier-empty">
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="4" width="12" height="9" rx="1.5"/><path d="M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1"/></svg>
+      Aucun fournisseur associé
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+  supplier: { type: Object, default: null },
+});
+defineEmits(["view"]);
+
+const initials = computed(() => {
+  const name = props.supplier?.name || props.supplier?.nom || "";
+  return name.split(" ").map(w => w[0] || "").join("").slice(0, 2).toUpperCase();
+});
+</script>
+
+<style scoped>
+.supplier-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.125rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+}
+.supplier-card__avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: #111827;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.supplier-card__body { flex: 1; min-width: 0; }
+.supplier-card__name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+}
+.supplier-card__email,
+.supplier-card__phone {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 2px 0 0;
+}
+.supplier-card__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #111827;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 7px 12px;
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+  transition: background 0.12s, border-color 0.12s;
+  flex-shrink: 0;
+}
+.supplier-card__cta:hover { background: #f3f4f6; border-color: #9ca3af; }
+
+.supplier-empty {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #9ca3af;
+  padding: 1rem 0;
+  font-style: italic;
+}
+</style>
diff --git a/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue b/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue
index cdec001..ae143f4 100644
--- a/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue
+++ b/thanasoft-front/src/components/molecules/Stock/NewReceptionForm.vue
@@ -1,296 +1,619 @@
 <template>
   <form class="reception-form" @submit.prevent="submitForm">
-    <!-- Header Section -->
-    <div class="form-section">
-      <div class="section-title">
-        <i class="fas fa-file-invoice"></i>
-        Informations générales
+    <!-- Progress Stepper -->
+    <div class="form-stepper">
+      <div class="stepper-line"></div>
+      <div
+        class="step"
+        :class="{ active: currentStep >= 1, done: currentStep > 1 }"
+      >
+        <div class="step-dot"><i class="fas fa-file-alt"></i></div>
+        <span class="step-label">Informations</span>
       </div>
-
-      <!-- Row 1: Commande Fournisseur, Entrepôt -->
-      <div class="row g-3 mb-3">
-        <div class="col-md-6">
-          <label class="form-label"
-            >Commande Fournisseur <span class="text-danger">*</span></label
-          >
-          <select
-            v-model="formData.purchase_order_id"
-            class="form-select custom-select"
-            :class="{ 'is-invalid': errors.purchase_order_id }"
-          >
-            <option value="">Sélectionner une commande</option>
-            <option v-for="po in purchaseOrders" :key="po.id" :value="po.id">
-              {{ po.po_number }} -
-              {{ po.fournisseur?.nom || "Fournisseur " + po.fournisseur_id }}
-            </option>
-          </select>
-          <div v-if="errors.purchase_order_id" class="invalid-feedback">
-            {{ errors.purchase_order_id }}
-          </div>
-        </div>
-
-        <div class="col-md-6 position-relative warehouse-search-container">
-          <label class="form-label"
-            >Entrepôt de Destination <span class="text-danger">*</span></label
-          >
-          <div class="search-input-wrapper">
-            <i class="fas fa-search search-icon"></i>
-            <soft-input
-              v-model="warehouseSearchQuery"
-              type="text"
-              placeholder="Rechercher un entrepôt..."
-              required
-              class="search-input"
-              @input="handleWarehouseSearch"
-              @focus="showWarehouseResults = true"
-            />
-          </div>
-
-          <!-- Search Results Dropdown -->
-          <div
-            v-if="
-              showWarehouseResults &&
-              (warehouseSearchResults.length > 0 || isSearchingWarehouses)
-            "
-            class="search-dropdown"
-          >
-            <div v-if="isSearchingWarehouses" class="dropdown-loading">
-              <div
-                class="spinner-border spinner-border-sm text-primary"
-                role="status"
-              >
-                <span class="visually-hidden">Chargement...</span>
-              </div>
-            </div>
-            <template v-else>
-              <button
-                v-for="warehouse in warehouseSearchResults"
-                :key="warehouse.id"
-                type="button"
-                class="dropdown-item"
-                @click="selectWarehouse(warehouse)"
-              >
-                <span class="item-name">{{ warehouse.name }}</span>
-                <span class="item-details">
-                  {{ warehouse.city || "Ville non spécifiée" }} •
-                  {{ warehouse.country_code || "" }}
-                </span>
-              </button>
-            </template>
-          </div>
-          <div v-if="errors.warehouse_id" class="invalid-feedback">
-            {{ errors.warehouse_id }}
-          </div>
-        </div>
+      <div
+        class="step"
+        :class="{ active: currentStep >= 2, done: currentStep > 2 }"
+      >
+        <div class="step-dot"><i class="fas fa-boxes"></i></div>
+        <span class="step-label">Articles</span>
       </div>
-
-      <!-- Row 2: Numéro Réception, Date, Statut -->
-      <div class="row g-3 mb-3">
-        <div class="col-md-4">
-          <label class="form-label">Numéro de Réception</label>
-          <soft-input
-            v-model="formData.receipt_number"
-            type="text"
-            placeholder="Numéro auto-généré si laissé vide"
-          />
-        </div>
-        <div class="col-md-4">
-          <label class="form-label"
-            >Date de Réception <span class="text-danger">*</span></label
-          >
-          <soft-input v-model="formData.receipt_date" type="date" required />
-        </div>
-        <div class="col-md-4">
-          <label class="form-label">Statut</label>
-          <div class="select-wrapper">
-            <select v-model="formData.status" class="form-select custom-select">
-              <option value="draft">📝 Brouillon</option>
-              <option value="posted">✅ Validée</option>
-            </select>
-            <i class="fas fa-chevron-down select-arrow"></i>
-          </div>
-        </div>
-      </div>
-
-      <!-- Notes -->
-      <div class="mb-0">
-        <label class="form-label">Notes</label>
-        <textarea
-          v-model="formData.notes"
-          class="form-control notes-textarea"
-          placeholder="Notes facultatives..."
-          rows="2"
-        ></textarea>
+      <div class="step" :class="{ active: currentStep >= 3 }">
+        <div class="step-dot"><i class="fas fa-check"></i></div>
+        <span class="step-label">Validation</span>
       </div>
     </div>
 
-    <!-- Articles Section -->
-    <div class="form-section">
-      <div class="section-header">
-        <div class="section-title">
-          <i class="fas fa-boxes"></i>
-          Lignes de Réception
+    <!-- Section 1: Informations générales -->
+    <div class="form-card" :class="{ collapsed: currentStep > 1 }">
+      <div class="card-header" @click="currentStep = 1">
+        <div class="card-header-left">
+          <div class="card-icon"><i class="fas fa-file-invoice"></i></div>
+          <div>
+            <h3 class="card-title">Informations générales</h3>
+            <p class="card-subtitle">
+              Commande, entrepôt et détails de réception
+            </p>
+          </div>
+        </div>
+        <div class="card-header-right">
+          <SoftBadge
+            v-if="currentStep > 1"
+            color="success"
+            variant="gradient"
+            size="sm"
+            class="badge-complete-soft"
+          >
+            <i class="fas fa-check-circle"></i> Complété
+          </SoftBadge>
+          <i
+            class="fas fa-chevron-down card-toggle"
+            :class="{ rotated: currentStep === 1 }"
+          ></i>
         </div>
-        <soft-button
-          type="button"
-          color="primary"
-          size="sm"
-          class="add-btn"
-          @click="addLine"
-        >
-          <i class="fas fa-plus"></i> Ajouter ligne
-        </soft-button>
       </div>
 
-      <div class="lines-container">
-        <div
-          v-for="(line, index) in formData.lines"
-          :key="index"
-          class="line-item"
-        >
-          <div class="row g-2 align-items-end">
-            <div class="col-md-3 position-relative product-search-container">
-              <label class="form-label text-xs"
-                >Produit <span class="text-danger">*</span></label
-              >
-              <div class="search-input-wrapper">
+      <transition name="slide-down">
+        <div v-show="currentStep === 1" class="card-body">
+          <!-- Row 1: Commande + Entrepôt -->
+          <div class="field-grid two-col">
+            <div
+              class="field-group"
+              :class="{ 'has-error': errors.purchase_order_id }"
+            >
+              <label class="field-label">
+                <i class="fas fa-shopping-cart label-icon"></i>
+                Commande Fournisseur
+                <span class="required-dot"></span>
+              </label>
+              <div class="select-wrapper">
+                <select
+                  v-model="formData.purchase_order_id"
+                  class="field-select"
+                >
+                  <option value="">— Sélectionner une commande —</option>
+                  <option
+                    v-for="po in purchaseOrders"
+                    :key="po.id"
+                    :value="po.id"
+                  >
+                    {{ po.po_number }} ·
+                    {{
+                      po.fournisseur?.nom || "Fournisseur " + po.fournisseur_id
+                    }}
+                  </option>
+                </select>
+                <i class="fas fa-chevron-down select-chevron"></i>
+              </div>
+              <transition name="shake">
+                <span v-if="errors.purchase_order_id" class="field-error">
+                  <i class="fas fa-exclamation-circle"></i>
+                  {{ errors.purchase_order_id }}
+                </span>
+              </transition>
+            </div>
+
+            <div
+              class="field-group position-relative warehouse-search-container"
+              :class="{ 'has-error': errors.warehouse_id }"
+            >
+              <label class="field-label">
+                <i class="fas fa-warehouse label-icon"></i>
+                Entrepôt de Destination
+                <span class="required-dot"></span>
+              </label>
+              <div class="search-wrapper">
                 <i class="fas fa-search search-icon"></i>
-                <soft-input
-                  v-model="line.searchQuery"
+                <input
+                  v-model="warehouseSearchQuery"
                   type="text"
-                  placeholder="Rechercher un produit..."
-                  required
-                  class="search-input"
-                  @input="handleProductSearch(index)"
-                  @focus="
-                    activeLineIndex = index;
-                    showProductResults = true;
+                  class="field-input search-input"
+                  placeholder="Rechercher un entrepôt…"
+                  @input="handleWarehouseSearch"
+                  @focus="showWarehouseResults = true"
+                />
+                <transition name="fade">
+                  <button
+                    v-if="warehouseSearchQuery && formData.warehouse_id"
+                    type="button"
+                    class="clear-btn"
+                    @click="clearWarehouse"
+                  >
+                    <i class="fas fa-times"></i>
+                  </button>
+                </transition>
+              </div>
+
+              <transition name="dropdown">
+                <div
+                  v-if="
+                    showWarehouseResults &&
+                    (warehouseSearchResults.length > 0 || isSearchingWarehouses)
                   "
+                  class="results-dropdown"
+                >
+                  <div v-if="isSearchingWarehouses" class="dropdown-loading">
+                    <div class="loading-dots">
+                      <span></span><span></span><span></span>
+                    </div>
+                    <span>Recherche…</span>
+                  </div>
+                  <template v-else>
+                    <button
+                      v-for="warehouse in warehouseSearchResults"
+                      :key="warehouse.id"
+                      type="button"
+                      class="result-item"
+                      @click="selectWarehouse(warehouse)"
+                    >
+                      <div class="result-icon">
+                        <i class="fas fa-warehouse"></i>
+                      </div>
+                      <div class="result-info">
+                        <span class="result-name">{{ warehouse.name }}</span>
+                        <span class="result-meta"
+                          >{{ warehouse.city || "Ville non spécifiée" }} ·
+                          {{ warehouse.country_code || "" }}</span
+                        >
+                      </div>
+                    </button>
+                  </template>
+                </div>
+              </transition>
+
+              <transition name="shake">
+                <span v-if="errors.warehouse_id" class="field-error">
+                  <i class="fas fa-exclamation-circle"></i>
+                  {{ errors.warehouse_id }}
+                </span>
+              </transition>
+            </div>
+          </div>
+
+          <!-- Row 2: Numéro, Date, Statut -->
+          <div class="field-grid three-col">
+            <div class="field-group">
+              <label class="field-label">
+                <i class="fas fa-hashtag label-icon"></i>
+                Numéro de Réception
+              </label>
+              <input
+                v-model="formData.receipt_number"
+                type="text"
+                class="field-input"
+                placeholder="Auto-généré si vide"
+              />
+              <span class="field-hint"
+                >Laissez vide pour génération automatique</span
+              >
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                <i class="fas fa-calendar-day label-icon"></i>
+                Date de Réception
+                <span class="required-dot"></span>
+              </label>
+              <input
+                v-model="formData.receipt_date"
+                type="date"
+                class="field-input"
+                required
+              />
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                <i class="fas fa-tag label-icon"></i>
+                Statut
+              </label>
+              <div class="status-toggle">
+                <SoftButton
+                  type="button"
+                  color="warning"
+                size="sm"
+                  :variant="
+                    formData.status === 'draft' ? 'gradient' : 'outline'
+                  "
+                  :active="formData.status === 'draft'"
+                  @click="formData.status = 'draft'"
+                >
+                  Brouillon
+                </SoftButton>
+                <SoftButton
+                  type="button"
+                  color="success"
+                  size="sm"
+                  :variant="
+                    formData.status === 'posted' ? 'gradient' : 'outline'
+                  "
+                  :active="formData.status === 'posted'"
+                  @click="formData.status = 'posted'"
+                >
+                  <i class="fas fa-check-double"></i> Validée
+                </SoftButton>
+              </div>
+            </div>
+          </div>
+
+          <!-- Notes -->
+          <div class="field-group">
+            <label class="field-label">
+              <i class="fas fa-sticky-note label-icon"></i>
+              Notes internes
+            </label>
+            <textarea
+              v-model="formData.notes"
+              class="field-textarea"
+              placeholder="Informations complémentaires sur cette réception…"
+              rows="3"
+            ></textarea>
+          </div>
+
+          <div class="card-actions">
+            <SoftButton
+              type="button"
+              color="primary"
+              variant="gradient"
+              class="soft-action-btn"
+              @click="goToStep2"
+            >
+              Continuer vers les articles
+              <i class="fas fa-arrow-right"></i>
+            </SoftButton>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <!-- Section 2: Lignes de réception -->
+    <div class="form-card" :class="{ collapsed: currentStep < 2 }">
+      <div class="card-header" @click="currentStep >= 2 && (currentStep = 2)">
+        <div class="card-header-left">
+          <div class="card-icon card-icon--blue">
+            <i class="fas fa-boxes"></i>
+          </div>
+          <div>
+            <h3 class="card-title">Lignes de Réception</h3>
+            <p class="card-subtitle">
+              {{ formData.lines.length }} article{{
+                formData.lines.length > 1 ? "s" : ""
+              }}
+              ajouté{{ formData.lines.length > 1 ? "s" : "" }}
+            </p>
+          </div>
+        </div>
+        <div class="card-header-right">
+          <SoftBadge
+            v-if="currentStep > 2"
+            color="success"
+            variant="gradient"
+            size="sm"
+            class="badge-complete-soft"
+          >
+            <i class="fas fa-check-circle"></i> Complété
+          </SoftBadge>
+          <i
+            v-if="currentStep >= 2"
+            class="fas fa-chevron-down card-toggle"
+            :class="{ rotated: currentStep === 2 }"
+          ></i>
+        </div>
+      </div>
+
+      <transition name="slide-down">
+        <div v-show="currentStep === 2" class="card-body">
+          <!-- Lines Table Header -->
+          <div class="lines-header">
+            <span class="col-product">Produit</span>
+            <span class="col-pkg">Conditionnement</span>
+            <span class="col-colis">Colis Reçus</span>
+            <span class="col-units">Unités Reçues</span>
+            <span class="col-price">Prix Unitaire</span>
+            <span class="col-actions"></span>
+          </div>
+
+          <transition-group name="line-list" tag="div" class="lines-list">
+            <div
+              v-for="(line, index) in formData.lines"
+              :key="index"
+              class="line-row"
+            >
+              <!-- Product Search -->
+              <div
+                class="cell cell-product position-relative product-search-container"
+              >
+                <div class="search-wrapper">
+                  <i class="fas fa-cube search-icon-sm"></i>
+                  <input
+                    v-model="line.searchQuery"
+                    type="text"
+                    class="field-input field-input--sm"
+                    placeholder="Rechercher un produit…"
+                    @input="handleProductSearch(index)"
+                    @focus="
+                      activeLineIndex = index;
+                      showProductResults = true;
+                    "
+                  />
+                </div>
+                <transition name="dropdown">
+                  <div
+                    v-show="showProductResults && activeLineIndex === index"
+                    class="results-dropdown results-dropdown--sm"
+                  >
+                    <div v-if="isSearchingProducts" class="dropdown-loading">
+                      <div class="loading-dots">
+                        <span></span><span></span><span></span>
+                      </div>
+                    </div>
+                    <div
+                      v-else-if="productSearchResults.length === 0"
+                      class="dropdown-empty"
+                    >
+                      <i class="fas fa-search-minus"></i> Aucun produit trouvé
+                    </div>
+                    <template v-else>
+                      <button
+                        v-for="product in productSearchResults"
+                        :key="product.id"
+                        type="button"
+                        class="result-item result-item--sm"
+                        @mousedown.prevent="selectProduct(index, product)"
+                      >
+                        <div class="result-icon result-icon--sm">
+                          <i class="fas fa-cube"></i>
+                        </div>
+                        <div class="result-info">
+                          <span class="result-name">{{ product.nom }}</span>
+                          <span class="result-meta"
+                            >Réf: {{ product.reference }} · Stock:
+                            {{ product.stock_actuel }} {{ product.unite }}</span
+                          >
+                        </div>
+                      </button>
+                    </template>
+                  </div>
+                </transition>
+              </div>
+
+              <!-- Packaging -->
+              <div class="cell cell-pkg">
+                <div class="select-wrapper select-wrapper--sm">
+                  <select
+                    v-model="line.packaging_id"
+                    class="field-select field-select--sm"
+                  >
+                    <option :value="null">Unité</option>
+                    <option
+                      v-for="pkg in getPackagings(line.product_id)"
+                      :key="pkg.id"
+                      :value="pkg.id"
+                    >
+                      {{ pkg.name }} ({{ pkg.qty_base }})
+                    </option>
+                  </select>
+                  <i
+                    class="fas fa-chevron-down select-chevron select-chevron--sm"
+                  ></i>
+                </div>
+              </div>
+
+              <!-- Packages qty -->
+              <div class="cell cell-number">
+                <input
+                  v-model.number="line.packages_qty_received"
+                  type="number"
+                  class="field-input field-input--sm field-input--number"
+                  placeholder="0"
+                  min="0"
+                  step="0.001"
                 />
               </div>
 
-              <!-- Product Search Results Dropdown -->
-              <div
-                v-show="showProductResults && activeLineIndex === index"
-                class="search-dropdown product-dropdown"
-              >
-                <div v-if="isSearchingProducts" class="dropdown-loading">
-                  <div
-                    class="spinner-border spinner-border-sm text-primary"
-                    role="status"
-                  >
-                    <span class="visually-hidden">Chargement...</span>
-                  </div>
+              <!-- Units qty -->
+              <div class="cell cell-number">
+                <input
+                  v-model.number="line.units_qty_received"
+                  type="number"
+                  class="field-input field-input--sm field-input--number"
+                  placeholder="0"
+                  min="0"
+                  step="0.001"
+                />
+              </div>
+
+              <!-- Unit Price -->
+              <div class="cell cell-number">
+                <div class="price-input-wrapper">
+                  <span class="currency-symbol">€</span>
+                  <input
+                    v-model.number="line.unit_price"
+                    type="number"
+                    class="field-input field-input--sm field-input--price"
+                    placeholder="0.00"
+                    min="0"
+                    step="0.01"
+                  />
                 </div>
-                <div
-                  v-else-if="productSearchResults.length === 0"
-                  class="dropdown-empty"
+              </div>
+
+              <!-- Actions -->
+              <div class="cell cell-actions">
+                <SoftButton
+                  type="button"
+                  class="line-delete-btn"
+                  color="danger"
+                  variant="outline"
+                  size="sm"
+                  :disabled="formData.lines.length === 1"
+                  title="Supprimer"
+                  @click="removeLine(index)"
                 >
-                  Aucun produit trouvé
-                </div>
-                <template v-else>
-                  <button
-                    v-for="product in productSearchResults"
-                    :key="product.id"
-                    type="button"
-                    class="dropdown-item"
-                    @mousedown.prevent="selectProduct(index, product)"
-                  >
-                    <span class="item-name">{{ product.nom }}</span>
-                    <span class="item-details">
-                      Réf: {{ product.reference }} • Stock:
-                      {{ product.stock_actuel }} {{ product.unite }}
-                    </span>
-                  </button>
-                </template>
+                  <i class="fas fa-trash"></i>
+                </SoftButton>
               </div>
             </div>
+          </transition-group>
 
-            <div class="col-md-2">
-              <label class="form-label text-xs">Conditionnement</label>
-              <select
-                v-model="line.packaging_id"
-                class="form-select form-select-sm"
-              >
-                <option :value="null">Unité</option>
-                <option
-                  v-for="pkg in getPackagings(line.product_id)"
-                  :key="pkg.id"
-                  :value="pkg.id"
-                >
-                  {{ pkg.name }} ({{ pkg.qty_base }} unités)
-                </option>
-              </select>
+          <!-- Add Line + Totals -->
+          <div class="lines-footer">
+            <SoftButton
+              type="button"
+              color="primary"
+              variant="outline"
+              size="sm"
+              class="btn-add-line-soft"
+              @click="addLine"
+            >
+              <i class="fas fa-plus-circle"></i>
+              Ajouter une ligne
+            </SoftButton>
+            <div class="lines-summary">
+              <div class="summary-item">
+                <span class="summary-label">Total lignes</span>
+                <span class="summary-value">{{
+                  formData.lines.filter((l) => l.product_id).length
+                }}</span>
+              </div>
+              <div class="summary-item">
+                <span class="summary-label">Total unités</span>
+                <span class="summary-value">{{ totalUnits }}</span>
+              </div>
+              <div class="summary-item summary-item--total">
+                <span class="summary-label">Montant total</span>
+                <span class="summary-value">{{ totalAmount }} €</span>
+              </div>
             </div>
+          </div>
 
-            <div class="col-md-2">
-              <label class="form-label text-xs">Colis Reçus</label>
-              <soft-input
-                v-model.number="line.packages_qty_received"
-                type="number"
-                placeholder="0"
-                min="0"
-                step="0.001"
-              />
-            </div>
+          <div class="card-actions card-actions--spread">
+            <SoftButton
+              type="button"
+              color="secondary"
+              variant="outline"
+              class="soft-action-btn"
+              @click="currentStep = 1"
+            >
+              <i class="fas fa-arrow-left"></i> Retour
+            </SoftButton>
+            <SoftButton
+              type="button"
+              color="primary"
+              variant="gradient"
+              class="soft-action-btn"
+              @click="goToStep3"
+            >
+              Vérifier et enregistrer
+              <i class="fas fa-arrow-right"></i>
+            </SoftButton>
+          </div>
+        </div>
+      </transition>
+    </div>
 
-            <div class="col-md-2">
-              <label class="form-label text-xs">Unités Reçues</label>
-              <soft-input
-                v-model.number="line.units_qty_received"
-                type="number"
-                placeholder="0"
-                min="0"
-                step="0.001"
-              />
-            </div>
-
-            <div class="col-md-2">
-              <label class="form-label text-xs">Prix Unitaire</label>
-              <soft-input
-                v-model.number="line.unit_price"
-                type="number"
-                placeholder="0.00"
-                min="0"
-                step="0.01"
-              />
-            </div>
-
-            <div class="col-md-1 d-flex flex-column align-items-end gap-2">
-              <button
-                type="button"
-                class="btn-delete"
-                :disabled="formData.lines.length === 1"
-                title="Supprimer la ligne"
-                @click="removeLine(index)"
-              >
-                <i class="fas fa-trash-alt"></i>
-              </button>
-            </div>
+    <!-- Section 3: Récapitulatif & Validation -->
+    <div class="form-card" :class="{ collapsed: currentStep < 3 }">
+      <div class="card-header">
+        <div class="card-header-left">
+          <div class="card-icon card-icon--green">
+            <i class="fas fa-clipboard-check"></i>
+          </div>
+          <div>
+            <h3 class="card-title">Récapitulatif</h3>
+            <p class="card-subtitle">Vérifiez avant d'enregistrer</p>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Action Buttons -->
-    <div class="action-buttons">
-      <soft-button
-        type="button"
-        color="secondary"
-        variant="outline"
-        class="btn-cancel"
-        @click="cancelForm"
-      >
-        <i class="fas fa-times"></i> Annuler
-      </soft-button>
-      <soft-button
-        type="submit"
-        color="success"
-        class="btn-submit"
-        :loading="loading"
-      >
-        <i class="fas fa-check"></i> Enregistrer
-      </soft-button>
+      <transition name="slide-down">
+        <div v-show="currentStep === 3" class="card-body">
+          <div class="recap-grid">
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-shopping-cart"></i> Commande</span
+              >
+              <span class="recap-value">{{ selectedPOLabel }}</span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-warehouse"></i> Entrepôt</span
+              >
+              <span class="recap-value">{{ warehouseSearchQuery || "—" }}</span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-calendar-day"></i> Date</span
+              >
+              <span class="recap-value">{{ formData.receipt_date }}</span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"><i class="fas fa-tag"></i> Statut</span>
+              <span class="recap-value">
+                <SoftBadge
+                  :color="formData.status === 'draft' ? 'warning' : 'success'"
+                  variant="gradient"
+                  size="sm"
+                >
+                  {{ formData.status === "draft" ? "Brouillon" : "Validée" }}
+                </SoftBadge>
+              </span>
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-boxes"></i> Articles</span
+              >
+              <span class="recap-value"
+                >{{
+                  formData.lines.filter((l) => l.product_id).length
+                }}
+                produit(s)</span
+              >
+            </div>
+            <div class="recap-item">
+              <span class="recap-label"
+                ><i class="fas fa-coins"></i> Montant total</span
+              >
+              <span class="recap-value recap-total">{{ totalAmount }} €</span>
+            </div>
+          </div>
+
+          <div class="card-actions card-actions--spread">
+            <SoftButton
+              type="button"
+              color="secondary"
+              variant="outline"
+              class="soft-action-btn"
+              @click="currentStep = 2"
+            >
+              <i class="fas fa-arrow-left"></i> Modifier
+            </SoftButton>
+            <div class="action-group">
+              <SoftButton
+                type="button"
+                color="danger"
+                variant="outline"
+                class="soft-action-btn"
+                @click="cancelForm"
+              >
+                <i class="fas fa-times"></i> Annuler
+              </SoftButton>
+              <SoftButton
+                type="submit"
+                color="primary"
+                variant="gradient"
+                class="soft-action-btn"
+                :disabled="props.loading"
+              >
+                <span v-if="props.loading" class="btn-spinner"></span>
+                <i v-else class="fas fa-check"></i>
+                {{
+                  props.loading ? "Enregistrement…" : "Enregistrer la réception"
+                }}
+              </SoftButton>
+            </div>
+          </div>
+        </div>
+      </transition>
     </div>
   </form>
 </template>
@@ -299,34 +622,29 @@
 import {
   ref,
   watch,
+  computed,
   defineEmits,
   defineProps,
   onMounted,
   onUnmounted,
 } from "vue";
-import SoftInput from "@/components/SoftInput.vue";
-import SoftButton from "@/components/SoftButton.vue";
 import WarehouseService from "@/services/warehouse";
 import ProductService from "@/services/product";
 import { PurchaseOrderService } from "@/services/purchaseOrder";
-import { useNotificationStore } from "@/stores/notification";
+import SoftButton from "@/components/SoftButton.vue";
+import SoftBadge from "@/components/SoftBadge.vue";
 
 const props = defineProps({
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  purchaseOrders: {
-    type: Array,
-    default: () => [],
-  },
+  loading: { type: Boolean, default: false },
+  purchaseOrders: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits(["submit", "cancel"]);
 
-const notificationStore = useNotificationStore();
+// Step management
+const currentStep = ref(1);
 
-// Warehouse Search States
+// Warehouse Search
 const warehouseSearchQuery = ref("");
 const warehouseSearchResults = ref([]);
 const isSearchingWarehouses = ref(false);
@@ -340,12 +658,8 @@ const handleWarehouseSearch = () => {
     isSearchingWarehouses.value = false;
     return;
   }
-
   if (searchTimeout) clearTimeout(searchTimeout);
-
   searchTimeout = setTimeout(async () => {
-    if (warehouseSearchQuery.value.trim() === "") return;
-
     isSearchingWarehouses.value = true;
     showWarehouseResults.value = true;
     try {
@@ -353,8 +667,8 @@ const handleWarehouseSearch = () => {
         warehouseSearchQuery.value
       );
       warehouseSearchResults.value = results.filter((w) => w && w.id);
-    } catch (error) {
-      console.error("Error searching warehouses:", error);
+    } catch (e) {
+      console.error(e);
     } finally {
       isSearchingWarehouses.value = false;
     }
@@ -362,15 +676,20 @@ const handleWarehouseSearch = () => {
 };
 
 const selectWarehouse = (warehouse) => {
-  if (!warehouse || !warehouse.id) return;
+  if (!warehouse?.id) return;
   if (searchTimeout) clearTimeout(searchTimeout);
-
   formData.value.warehouse_id = warehouse.id;
   warehouseSearchQuery.value = warehouse.name;
   showWarehouseResults.value = false;
 };
 
-// Product Search States
+const clearWarehouse = () => {
+  formData.value.warehouse_id = "";
+  warehouseSearchQuery.value = "";
+  warehouseSearchResults.value = [];
+};
+
+// Product Search
 const productSearchResults = ref([]);
 const isSearchingProducts = ref(false);
 const showProductResults = ref(false);
@@ -384,58 +703,37 @@ const handleProductSearch = (index) => {
   if (query.length < 2) {
     productSearchResults.value = [];
     if (productSearchTimeout) clearTimeout(productSearchTimeout);
-    isSearchingProducts.value = false;
     return;
   }
-
   if (productSearchTimeout) clearTimeout(productSearchTimeout);
-
   productSearchTimeout = setTimeout(async () => {
-    if (formData.value.lines[index].searchQuery !== query) return;
-
     isSearchingProducts.value = true;
     showProductResults.value = true;
     try {
       const response = await ProductService.searchProducts(query);
-      if (
-        activeLineIndex.value === index &&
-        formData.value.lines[index] &&
-        formData.value.lines[index].searchQuery === query
-      ) {
-        let results = [];
-        if (response && response.data) {
-          if (Array.isArray(response.data)) {
-            results = response.data;
-          } else if (response.data.data && Array.isArray(response.data.data)) {
-            results = response.data.data;
-          }
-        }
-
-        productSearchResults.value = results.filter((p) => p && p.id);
+      let results = [];
+      if (response?.data) {
+        results = Array.isArray(response.data)
+          ? response.data
+          : response.data.data || [];
       }
-    } catch (error) {
-      console.error("Error searching products:", error);
+      productSearchResults.value = results.filter((p) => p && p.id);
+    } catch (e) {
+      console.error(e);
     } finally {
-      if (activeLineIndex.value === index) {
-        isSearchingProducts.value = false;
-      }
+      isSearchingProducts.value = false;
     }
   }, 300);
 };
 
 const selectProduct = (index, product) => {
-  if (!product || !product.id) return;
+  if (!product?.id) return;
   if (productSearchTimeout) clearTimeout(productSearchTimeout);
-
   const line = formData.value.lines[index];
   if (!line) return;
-
   line.product_id = product.id;
   line.searchQuery = product.nom;
-
-  // Load packagings for this product
   loadProductPackagings(product.id);
-
   showProductResults.value = false;
   activeLineIndex.value = null;
 };
@@ -443,8 +741,7 @@ const selectProduct = (index, product) => {
 const loadProductPackagings = async (productId) => {
   try {
     const response = await ProductService.getProduct(productId);
-    if (response && response.data) {
-      // Store packagings for this product
+    if (response?.data) {
       productPackagings.value[productId] = response.data.conditionnement
         ? [
             {
@@ -455,47 +752,33 @@ const loadProductPackagings = async (productId) => {
           ]
         : [];
     }
-  } catch (error) {
-    console.error("Error loading product packagings:", error);
+  } catch (e) {
+    console.error(e);
   }
 };
 
-const getPackagings = (productId) => {
-  return productPackagings.value[productId] || [];
-};
+const getPackagings = (productId) => productPackagings.value[productId] || [];
 
-// Close dropdowns on click outside
+// Click outside
 const handleClickOutside = (event) => {
-  const warehouseContainer = document.querySelector(
-    ".warehouse-search-container"
-  );
-  if (warehouseContainer && !warehouseContainer.contains(event.target)) {
+  if (
+    !document
+      .querySelector(".warehouse-search-container")
+      ?.contains(event.target)
+  ) {
     showWarehouseResults.value = false;
   }
-
-  const productContainers = document.querySelectorAll(
-    ".product-search-container"
-  );
-  let clickedInsideAnyProduct = false;
-  productContainers.forEach((container) => {
-    if (container.contains(event.target)) {
-      clickedInsideAnyProduct = true;
-    }
+  let insideProduct = false;
+  document.querySelectorAll(".product-search-container").forEach((c) => {
+    if (c.contains(event.target)) insideProduct = true;
   });
-
-  if (!clickedInsideAnyProduct) {
-    showProductResults.value = false;
-  }
+  if (!insideProduct) showProductResults.value = false;
 };
 
-onMounted(() => {
-  document.addEventListener("click", handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
+onMounted(() => document.addEventListener("click", handleClickOutside));
+onUnmounted(() => document.removeEventListener("click", handleClickOutside));
 
+// Form Data
 const formData = ref({
   purchase_order_id: "",
   warehouse_id: "",
@@ -517,11 +800,38 @@ const formData = ref({
 
 const errors = ref({});
 
-const hydrateLinesFromPurchaseOrder = async (purchaseOrderId) => {
-  if (!purchaseOrderId) {
-    return;
-  }
+// Computed
+const selectedPOLabel = computed(() => {
+  const po = props.purchaseOrders.find(
+    (p) => p.id == formData.value.purchase_order_id
+  );
+  return po
+    ? `${po.po_number} · ${
+        po.fournisseur?.nom || "Fournisseur " + po.fournisseur_id
+      }`
+    : "—";
+});
 
+const totalUnits = computed(() =>
+  formData.value.lines.reduce(
+    (s, l) => s + (Number(l.units_qty_received) || 0),
+    0
+  )
+);
+
+const totalAmount = computed(() =>
+  formData.value.lines
+    .reduce(
+      (s, l) =>
+        s + (Number(l.units_qty_received) || 0) * (Number(l.unit_price) || 0),
+      0
+    )
+    .toFixed(2)
+);
+
+// Hydrate from PO
+const hydrateLinesFromPurchaseOrder = async (purchaseOrderId) => {
+  if (!purchaseOrderId) return;
   try {
     const response = await PurchaseOrderService.getPurchaseOrder(
       parseInt(purchaseOrderId)
@@ -532,11 +842,7 @@ const hydrateLinesFromPurchaseOrder = async (purchaseOrderId) => {
       : Array.isArray(order?.lines?.data)
       ? order.lines.data
       : [];
-
-    if (orderLines.length === 0) {
-      return;
-    }
-
+    if (!orderLines.length) return;
     formData.value.lines = orderLines.map((line) => ({
       product_id: line.product_id || "",
       searchQuery: line.product?.nom || line.description || "",
@@ -545,15 +851,15 @@ const hydrateLinesFromPurchaseOrder = async (purchaseOrderId) => {
       units_qty_received: Number(line.quantity || 0) || null,
       unit_price: Number(line.unit_price || 0) || null,
     }));
-  } catch (error) {
-    console.error("Error hydrating receipt lines from purchase order:", error);
+  } catch (e) {
+    console.error(e);
   }
 };
 
 watch(
   () => formData.value.purchase_order_id,
-  async (newPurchaseOrderId) => {
-    if (!newPurchaseOrderId) {
+  async (newId) => {
+    if (!newId) {
       formData.value.lines = [
         {
           product_id: "",
@@ -566,11 +872,11 @@ watch(
       ];
       return;
     }
-
-    await hydrateLinesFromPurchaseOrder(newPurchaseOrderId);
+    await hydrateLinesFromPurchaseOrder(newId);
   }
 );
 
+// Line management
 const addLine = () => {
   formData.value.lines.push({
     product_id: "",
@@ -583,31 +889,37 @@ const addLine = () => {
 };
 
 const removeLine = (index) => {
-  if (formData.value.lines.length > 1) {
-    formData.value.lines.splice(index, 1);
-  }
+  if (formData.value.lines.length > 1) formData.value.lines.splice(index, 1);
 };
 
-const cancelForm = () => {
-  emit("cancel");
+// Navigation
+const goToStep2 = () => {
+  errors.value = {};
+  if (!formData.value.purchase_order_id)
+    errors.value.purchase_order_id = "La commande fournisseur est requise.";
+  if (!formData.value.warehouse_id)
+    errors.value.warehouse_id = "L'entrepôt est requis.";
+  if (!Object.keys(errors.value).length) currentStep.value = 2;
 };
 
+const goToStep3 = () => {
+  currentStep.value = 3;
+};
+
+const cancelForm = () => emit("cancel");
+
 const submitForm = () => {
   errors.value = {};
-
-  // Validation
-  if (!formData.value.purchase_order_id) {
+  if (!formData.value.purchase_order_id)
     errors.value.purchase_order_id = "La commande fournisseur est requise.";
-  }
-  if (!formData.value.warehouse_id) {
+  if (!formData.value.warehouse_id)
     errors.value.warehouse_id = "L'entrepôt est requis.";
-  }
-
-  if (Object.keys(errors.value).length > 0) {
+  if (Object.keys(errors.value).length) {
+    currentStep.value = 1;
     return;
   }
 
-  const payload = {
+  emit("submit", {
     purchase_order_id: parseInt(formData.value.purchase_order_id),
     warehouse_id: parseInt(formData.value.warehouse_id),
     receipt_number: formData.value.receipt_number || undefined,
@@ -623,202 +935,1052 @@ const submitForm = () => {
         unit_price: line.unit_price,
       }))
       .filter((line) => line.product_id),
-  };
-
-  emit("submit", payload);
+  });
 };
 </script>
 
 <style scoped>
+/* ─────────────────────────────────────────────
+   FONTS & TOKENS
+───────────────────────────────────────────── */
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
 .reception-form {
+  font-family: "DM Sans", sans-serif;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0.5rem;
+
+  --clr-primary: #5e72e4;
+  --clr-primary-light: #eef1ff;
+  --clr-primary-dark: #4b61da;
+  --clr-success: #12b886;
+  --clr-success-light: #e6f9f4;
+  --clr-danger: #f03e3e;
+  --clr-danger-light: #fff5f5;
+  --clr-warning: #f59f00;
+  --clr-border: #e8ecf0;
+  --clr-bg: #f7f8fc;
+  --clr-surface: #ffffff;
+  --clr-text: #212529;
+  --clr-text-muted: #868e96;
+  --clr-text-subtle: #adb5bd;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.form-section {
-  background: #f8f9fa;
-  border-radius: 0.75rem;
-  padding: 1.5rem;
+/* ─────────────────────────────────────────────
+   STEPPER
+───────────────────────────────────────────── */
+.form-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: 1.5rem 2rem 0.5rem;
+  position: relative;
 }
 
-.section-title {
+.stepper-line {
+  position: absolute;
+  top: calc(1.5rem + 18px);
+  left: calc(50% - 120px);
+  width: 240px;
+  height: 2px;
+  background: var(--clr-border);
+  z-index: 0;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  position: relative;
+  z-index: 1;
+}
+
+.step-dot {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: var(--clr-surface);
+  border: 2px solid var(--clr-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--clr-text-subtle);
+  font-size: 0.8rem;
+  transition: all var(--transition);
+}
+
+.step.active .step-dot {
+  background: var(--clr-primary);
+  border-color: var(--clr-primary);
+  color: #fff;
+  box-shadow: 0 0 0 4px var(--clr-primary-light);
+}
+
+.step.done .step-dot {
+  background: var(--clr-success);
+  border-color: var(--clr-success);
+  color: #fff;
+}
+
+.step-label {
+  font-size: 0.7rem;
   font-weight: 600;
-  color: #344767;
-  margin-bottom: 1rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--clr-text-subtle);
+  transition: color var(--transition);
+}
+
+.step.active .step-label {
+  color: var(--clr-primary);
+}
+.step.done .step-label {
+  color: var(--clr-success);
+}
+
+/* ─────────────────────────────────────────────
+   CARDS
+───────────────────────────────────────────── */
+.form-card {
+  background: var(--clr-surface);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+.form-card:not(.collapsed) {
+  box-shadow: var(--shadow-md);
+  border-color: #d0d8ff;
+}
+
+.card-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-}
-
-.section-title i {
-  color: #cb0c9f;
-}
-
-.section-header {
-  display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
+  padding: 1.25rem 1.5rem;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--transition);
 }
 
-.search-input-wrapper {
+.card-header:hover {
+  background: #fafbff;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
+  background: var(--clr-primary-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--clr-primary);
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.card-icon--blue {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+.card-icon--green {
+  background: var(--clr-success-light);
+  color: var(--clr-success);
+}
+
+.card-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--clr-text);
+}
+
+.card-subtitle {
+  margin: 2px 0 0;
+  font-size: 0.78rem;
+  color: var(--clr-text-muted);
+}
+
+.card-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.badge-complete {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--clr-success);
+  background: var(--clr-success-light);
+  border-radius: 99px;
+  padding: 0.25rem 0.6rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.badge-complete-soft {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.card-toggle {
+  color: var(--clr-text-muted);
+  transition: transform var(--transition);
+}
+
+.card-toggle.rotated {
+  transform: rotate(180deg);
+}
+
+.card-body {
+  padding: 1.25rem 1.5rem 1.5rem;
+  border-top: 1.5px solid var(--clr-border);
+  background: #fafbff;
+}
+
+/* ─────────────────────────────────────────────
+   FIELDS
+───────────────────────────────────────────── */
+.field-grid {
+  display: grid;
+  gap: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.two-col {
+  grid-template-columns: 1fr 1fr;
+}
+.three-col {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+@media (max-width: 640px) {
+  .two-col,
+  .three-col {
+    grid-template-columns: 1fr;
+  }
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.field-group.has-error .field-input,
+.field-group.has-error .field-select {
+  border-color: var(--clr-danger) !important;
+}
+
+.field-label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #4a5568;
+  letter-spacing: 0.02em;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.label-icon {
+  color: var(--clr-primary);
+  opacity: 0.7;
+  font-size: 0.7rem;
+}
+
+.required-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--clr-danger);
+  margin-left: 2px;
+  flex-shrink: 0;
+}
+
+.field-input,
+.field-select {
+  height: 40px;
+  padding: 0 12px;
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  background: var(--clr-surface);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.875rem;
+  color: var(--clr-text);
+  transition: border-color var(--transition), box-shadow var(--transition);
+  width: 100%;
+  outline: none;
+}
+
+.field-input:focus,
+.field-select:focus {
+  border-color: var(--clr-primary);
+  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12);
+}
+
+.field-input::placeholder {
+  color: var(--clr-text-subtle);
+}
+
+.field-input--sm {
+  height: 36px;
+  font-size: 0.8rem;
+  padding: 0 10px;
+}
+.field-input--number {
+  text-align: right;
+  font-family: "DM Mono", monospace;
+}
+.field-input--price {
+  padding-left: 28px;
+  text-align: right;
+  font-family: "DM Mono", monospace;
+}
+
+.field-select {
+  appearance: none;
+  cursor: pointer;
+}
+
+.field-textarea {
+  padding: 10px 12px;
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  background: var(--clr-surface);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.875rem;
+  color: var(--clr-text);
+  resize: vertical;
+  width: 100%;
+  outline: none;
+  transition: border-color var(--transition), box-shadow var(--transition);
+  line-height: 1.5;
+}
+
+.field-textarea:focus {
+  border-color: var(--clr-primary);
+  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12);
+}
+
+.field-textarea::placeholder {
+  color: var(--clr-text-subtle);
+}
+
+.field-hint {
+  font-size: 0.72rem;
+  color: var(--clr-text-muted);
+}
+
+.field-error {
+  font-size: 0.75rem;
+  color: var(--clr-danger);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ─────────────────────────────────────────────
+   SELECT WRAPPER
+───────────────────────────────────────────── */
+.select-wrapper {
+  position: relative;
+}
+.select-chevron {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--clr-text-muted);
+  pointer-events: none;
+  font-size: 0.65rem;
+}
+.select-wrapper--sm .field-select--sm {
+  height: 36px;
+  font-size: 0.8rem;
+  padding: 0 28px 0 8px;
+}
+.select-chevron--sm {
+  font-size: 0.6rem;
+  right: 8px;
+}
+
+/* ─────────────────────────────────────────────
+   SEARCH WRAPPER
+───────────────────────────────────────────── */
+.search-wrapper {
   position: relative;
 }
 
 .search-icon {
   position: absolute;
-  left: 12px;
+  left: 11px;
   top: 50%;
   transform: translateY(-50%);
-  color: #adb5bd;
+  color: var(--clr-text-subtle);
   pointer-events: none;
+  font-size: 0.75rem;
 }
 
-.search-input {
-  padding-left: 2.5rem !important;
+.search-wrapper .field-input {
+  padding-left: 34px;
 }
 
-.search-dropdown {
+.search-icon-sm {
+  font-size: 0.65rem;
+  left: 9px;
+}
+.search-wrapper .field-input--sm {
+  padding-left: 28px;
+}
+
+.clear-btn {
   position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: white;
-  border: 1px solid #dee2e6;
-  border-radius: 0.5rem;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 1000;
-  margin-top: 0.25rem;
-}
-
-.dropdown-item {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  text-align: left;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
   background: none;
   border: none;
   cursor: pointer;
+  color: var(--clr-text-muted);
+  font-size: 0.7rem;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--transition), color var(--transition);
+}
+.clear-btn:hover {
+  background: #eee;
+  color: var(--clr-text);
+}
+
+/* ─────────────────────────────────────────────
+   RESULTS DROPDOWN
+───────────────────────────────────────────── */
+.results-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--clr-surface);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  max-height: 280px;
+  overflow-y: auto;
+  z-index: 1000;
+  scrollbar-width: thin;
+}
+
+.results-dropdown--sm {
+  max-height: 220px;
+}
+
+.result-item {
+  width: 100%;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid #f1f3f5;
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--transition);
+}
+
+.result-item:last-child {
+  border-bottom: none;
+}
+.result-item:hover {
+  background: var(--clr-primary-light);
+}
+
+.result-item--sm {
+  padding: 8px 10px;
+}
+
+.result-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background: var(--clr-primary-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--clr-primary);
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.result-icon--sm {
+  width: 26px;
+  height: 26px;
+  font-size: 0.65rem;
+}
+
+.result-info {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  transition: background-color 0.2s;
+  gap: 2px;
+  overflow: hidden;
 }
 
-.dropdown-item:hover {
-  background-color: #f8f9fa;
-}
-
-.item-name {
+.result-name {
   font-weight: 600;
-  color: #344767;
+  font-size: 0.85rem;
+  color: var(--clr-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.item-details {
-  font-size: 0.875rem;
-  color: #6c757d;
+.result-meta {
+  font-size: 0.72rem;
+  color: var(--clr-text-muted);
+}
+
+.dropdown-loading {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--clr-text-muted);
+  font-size: 0.8rem;
 }
 
-.dropdown-loading,
 .dropdown-empty {
   padding: 1rem;
   text-align: center;
-  color: #6c757d;
+  color: var(--clr-text-muted);
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 }
 
-.select-wrapper {
+.loading-dots {
+  display: flex;
+  gap: 4px;
+}
+.loading-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--clr-primary);
+  animation: bounce 1s infinite;
+}
+.loading-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.loading-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* ─────────────────────────────────────────────
+   STATUS TOGGLE
+───────────────────────────────────────────── */
+.status-toggle {
+  display: flex;
+  gap: 6px;
+  padding: 4px;
+  background: var(--clr-bg);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+}
+
+.status-btn {
+  flex: 1;
+  height: 32px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--clr-text-muted);
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.status-btn.active {
+  background: var(--clr-surface);
+  color: var(--clr-primary);
+  font-weight: 600;
+  box-shadow: var(--shadow-sm);
+}
+
+.status-toggle :deep(.btn) {
+  flex: 1;
+}
+
+/* ─────────────────────────────────────────────
+   LINES TABLE
+───────────────────────────────────────────── */
+.lines-header {
+  display: grid;
+  grid-template-columns: 2.5fr 1.4fr 1fr 1fr 1fr 44px;
+  gap: 8px;
+  padding: 0 12px 8px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--clr-text-muted);
+}
+
+.lines-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.line-row {
+  display: grid;
+  grid-template-columns: 2.5fr 1.4fr 1fr 1fr 1fr 44px;
+  gap: 8px;
+  align-items: center;
+  background: var(--clr-surface);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+.line-row:hover {
+  box-shadow: var(--shadow-sm);
+  border-color: #d0d8ff;
+}
+
+.cell {
   position: relative;
 }
 
-.select-arrow {
+.price-input-wrapper {
+  position: relative;
+}
+.currency-symbol {
   position: absolute;
-  right: 12px;
+  left: 9px;
   top: 50%;
   transform: translateY(-50%);
-  color: #adb5bd;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--clr-text-muted);
+  font-family: "DM Mono", monospace;
   pointer-events: none;
 }
 
-.custom-select {
-  appearance: none;
-  padding-right: 2.5rem;
-}
-
-.notes-textarea {
-  border-radius: 0.5rem;
-  border: 1px solid #dee2e6;
-  resize: vertical;
-}
-
-.lines-container {
+.line-delete-btn {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  padding: 0;
+  border-radius: var(--radius-sm);
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  transition: all var(--transition);
 }
 
-.line-item {
-  background: white;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  border: 1px solid #dee2e6;
-}
-
-.btn-delete {
-  background: none;
-  border: none;
-  color: #f5365c;
-  cursor: pointer;
-  padding: 0.25rem;
-  transition: color 0.2s;
-}
-
-.btn-delete:hover:not(:disabled) {
-  color: #d63384;
-}
-
-.btn-delete:disabled {
-  color: #adb5bd;
+.line-delete-btn:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
-.action-buttons {
+/* ─────────────────────────────────────────────
+   LINES FOOTER
+───────────────────────────────────────────── */
+.lines-footer {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 0 0;
+  border-top: 1.5px dashed var(--clr-border);
+  margin-top: 0.75rem;
+  flex-wrap: wrap;
   gap: 0.75rem;
 }
 
-.btn-cancel {
-  min-width: 100px;
-}
-
-.btn-submit {
-  min-width: 120px;
-}
-
-.form-label {
+.btn-add-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border: 1.5px dashed var(--clr-primary);
+  background: var(--clr-primary-light);
+  color: var(--clr-primary);
+  border-radius: var(--radius-md);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.8rem;
   font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: #344767;
+  cursor: pointer;
+  transition: all var(--transition);
 }
 
-.text-xs {
-  font-size: 0.875rem;
+.btn-add-line:hover {
+  background: var(--clr-primary);
+  color: #fff;
+  border-style: solid;
 }
 
-.text-danger {
-  color: #f5365c;
+.lines-summary {
+  display: flex;
+  gap: 1.25rem;
+  align-items: center;
 }
 
-.invalid-feedback {
-  display: block;
-  color: #f5365c;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
 }
 
-.is-invalid {
-  border-color: #f5365c !important;
+.summary-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--clr-text-muted);
+}
+
+.summary-value {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--clr-text);
+  font-family: "DM Mono", monospace;
+}
+
+.summary-item--total .summary-value {
+  color: var(--clr-primary);
+  font-size: 1rem;
+}
+
+/* ─────────────────────────────────────────────
+   RECAP GRID
+───────────────────────────────────────────── */
+.recap-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .recap-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.recap-item {
+  background: var(--clr-surface);
+  border: 1.5px solid var(--clr-border);
+  border-radius: var(--radius-md);
+  padding: 0.9rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.recap-label {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--clr-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.recap-value {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--clr-text);
+}
+
+.recap-total {
+  font-size: 1.1rem;
+  color: var(--clr-primary);
+  font-family: "DM Mono", monospace;
+}
+
+.status-pill {
+  font-size: 0.72rem;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 99px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.status-pill.draft {
+  background: #fff3bf;
+  color: #946500;
+}
+
+.status-pill.posted {
+  background: var(--clr-success-light);
+  color: #0b7a5e;
+}
+
+/* ─────────────────────────────────────────────
+   BUTTONS
+───────────────────────────────────────────── */
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 1.25rem;
+  border-top: 1.5px solid var(--clr-border);
+  margin-top: 1.25rem;
+}
+
+.card-actions--spread {
+  justify-content: space-between;
+}
+
+.action-group {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.btn-primary,
+.btn-success {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 1.25rem;
+  border: none;
+  border-radius: var(--radius-md);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.btn-primary {
+  background: var(--clr-primary);
+  color: #fff;
+}
+.btn-primary:hover {
+  background: var(--clr-primary-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(59, 91, 219, 0.3);
+}
+
+.btn-success {
+  background: var(--clr-success);
+  color: #fff;
+}
+.btn-success:hover:not(:disabled) {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(18, 184, 134, 0.3);
+}
+.btn-success:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-ghost {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 1rem;
+  border: 1.5px solid var(--clr-border);
+  background: transparent;
+  border-radius: var(--radius-md);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--clr-text-muted);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-ghost:hover {
+  border-color: var(--clr-primary);
+  color: var(--clr-primary);
+  background: var(--clr-primary-light);
+}
+
+.btn-outline-danger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 1rem;
+  border: 1.5px solid #ffc9c9;
+  background: transparent;
+  border-radius: var(--radius-md);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--clr-danger);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-outline-danger:hover {
+  background: var(--clr-danger-light);
+  border-color: var(--clr-danger);
+}
+
+.btn-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+.soft-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-add-line-soft {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ─────────────────────────────────────────────
+   TRANSITIONS
+───────────────────────────────────────────── */
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.slide-down-enter-to,
+.slide-down-leave-from {
+  max-height: 800px;
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.16s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.shake-enter-active {
+  animation: shake 0.3s ease;
+}
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+.line-list-enter-active {
+  transition: all 0.2s ease;
+}
+.line-list-leave-active {
+  transition: all 0.15s ease;
+}
+.line-list-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+.line-list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+/* ─────────────────────────────────────────────
+   MISC
+───────────────────────────────────────────── */
+.position-relative {
+  position: relative;
 }
 </style>
diff --git a/thanasoft-front/src/components/molecules/form/ContactForm.vue b/thanasoft-front/src/components/molecules/form/ContactForm.vue
index c1e2b18..f6a665b 100644
--- a/thanasoft-front/src/components/molecules/form/ContactForm.vue
+++ b/thanasoft-front/src/components/molecules/form/ContactForm.vue
@@ -4,13 +4,24 @@
     <p class="mb-0 text-sm">Associez un contact à un client existant</p>
 
     <transition name="banner-fade">
-      <div v-if="props.success" class="alert alert-success text-white mt-3 mb-0 py-2" role="alert">
-        <span class="text-sm"><strong>Contact créé avec succès !</strong> Il est maintenant lié au client.</span>
+      <div
+        v-if="props.success"
+        class="alert alert-success text-white mt-3 mb-0 py-2"
+        role="alert"
+      >
+        <span class="text-sm"
+          ><strong>Contact créé avec succès !</strong> Il est maintenant lié au
+          client.</span
+        >
       </div>
     </transition>
 
     <transition name="banner-fade">
-      <div v-if="fieldErrors.general" class="alert alert-danger text-white mt-3 mb-0 py-2" role="alert">
+      <div
+        v-if="fieldErrors.general"
+        class="alert alert-danger text-white mt-3 mb-0 py-2"
+        role="alert"
+      >
         <span class="text-sm">{{ fieldErrors.general }}</span>
       </div>
     </transition>
@@ -18,10 +29,15 @@
     <div class="multisteps-form__content">
       <div class="row mt-3">
         <div class="col-12">
-          <label class="form-label">Client associé <span class="text-danger">*</span></label>
+          <label class="form-label"
+            >Client associé <span class="text-danger">*</span></label
+          >
 
           <div v-if="!selectedClient" class="position-relative">
-            <div class="search-wrap" :class="{ 'has-error': fieldErrors.client_id }">
+            <div
+              class="search-wrap"
+              :class="{ 'has-error': fieldErrors.client_id }"
+            >
               <i class="fas fa-search search-pfx"></i>
               <input
                 :value="searchQuery"
@@ -32,12 +48,21 @@
                 @blur="onInputBlur"
               />
               <span v-if="searchQuery" class="search-loader">
-                <i class="fas fa-circle-notch fa-spin text-secondary text-xs"></i>
+                <i
+                  class="fas fa-circle-notch fa-spin text-secondary text-xs"
+                ></i>
               </span>
             </div>
 
             <transition name="dropdown-pop">
-              <div v-if="showDropdown && props.searchResults && props.searchResults.length > 0" class="search-dropdown">
+              <div
+                v-if="
+                  showDropdown &&
+                  props.searchResults &&
+                  props.searchResults.length > 0
+                "
+                class="search-dropdown"
+              >
                 <button
                   v-for="client in props.searchResults"
                   :key="client.id"
@@ -48,11 +73,21 @@
                   <span class="dr-avatar">{{ (client.name || "?")[0] }}</span>
                   <span class="dr-info">
                     <span class="dr-name">{{ client.name }}</span>
-                    <span v-if="client.email" class="dr-meta">{{ client.email }}</span>
+                    <span v-if="client.email" class="dr-meta">{{
+                      client.email
+                    }}</span>
                   </span>
                 </button>
               </div>
-              <div v-else-if="showDropdown && searchQuery && props.searchResults && props.searchResults.length === 0" class="search-dropdown py-3 text-center text-sm text-secondary">
+              <div
+                v-else-if="
+                  showDropdown &&
+                  searchQuery &&
+                  props.searchResults &&
+                  props.searchResults.length === 0
+                "
+                class="search-dropdown py-3 text-center text-sm text-secondary"
+              >
                 Aucun résultat pour <strong>« {{ searchQuery }} »</strong>
               </div>
             </transition>
@@ -63,15 +98,27 @@
             <span class="sc-info">
               <span class="sc-label">Client sélectionné</span>
               <span class="sc-name">{{ selectedClient.name }}</span>
-              <span v-if="selectedClient.email" class="sc-meta">{{ selectedClient.email }}</span>
+              <span v-if="selectedClient.email" class="sc-meta">{{
+                selectedClient.email
+              }}</span>
             </span>
-            <soft-button type="button" color="secondary" variant="outline" size="sm" @click="clearSelection">
+            <soft-button
+              type="button"
+              color="secondary"
+              variant="outline"
+              size="sm"
+              @click="clearSelection"
+            >
               Changer
             </soft-button>
           </div>
 
-          <div v-if="fieldErrors.client_id" class="invalid-feedback d-block">{{ fieldErrors.client_id }}</div>
-          <p class="text-xs text-secondary mb-0 mt-1">Le contact sera rattaché à ce client</p>
+          <div v-if="fieldErrors.client_id" class="invalid-feedback d-block">
+            {{ fieldErrors.client_id }}
+          </div>
+          <p class="text-xs text-secondary mb-0 mt-1">
+            Le contact sera rattaché à ce client
+          </p>
         </div>
       </div>
 
@@ -85,7 +132,9 @@
             type="text"
             placeholder="Jean"
           />
-          <div v-if="fieldErrors.first_name" class="invalid-feedback d-block">{{ fieldErrors.first_name }}</div>
+          <div v-if="fieldErrors.first_name" class="invalid-feedback d-block">
+            {{ fieldErrors.first_name }}
+          </div>
         </div>
         <div class="col-12 col-sm-6 mt-3 mt-sm-0">
           <label class="form-label">Nom</label>
@@ -96,7 +145,9 @@
             type="text"
             placeholder="Dupont"
           />
-          <div v-if="fieldErrors.last_name" class="invalid-feedback d-block">{{ fieldErrors.last_name }}</div>
+          <div v-if="fieldErrors.last_name" class="invalid-feedback d-block">
+            {{ fieldErrors.last_name }}
+          </div>
         </div>
       </div>
 
@@ -110,7 +161,9 @@
             type="text"
             placeholder="ex. Directeur Commercial, Responsable RH..."
           />
-          <div v-if="fieldErrors.role" class="invalid-feedback d-block">{{ fieldErrors.role }}</div>
+          <div v-if="fieldErrors.role" class="invalid-feedback d-block">
+            {{ fieldErrors.role }}
+          </div>
         </div>
       </div>
 
@@ -124,7 +177,9 @@
             type="email"
             placeholder="jean.dupont@entreprise.com"
           />
-          <div v-if="fieldErrors.email" class="invalid-feedback d-block">{{ fieldErrors.email }}</div>
+          <div v-if="fieldErrors.email" class="invalid-feedback d-block">
+            {{ fieldErrors.email }}
+          </div>
         </div>
       </div>
 
@@ -138,7 +193,9 @@
             type="text"
             placeholder="+33 1 23 45 67 89"
           />
-          <div v-if="fieldErrors.phone" class="invalid-feedback d-block">{{ fieldErrors.phone }}</div>
+          <div v-if="fieldErrors.phone" class="invalid-feedback d-block">
+            {{ fieldErrors.phone }}
+          </div>
         </div>
         <div class="col-12 col-sm-6 mt-3 mt-sm-0">
           <label class="form-label">Mobile</label>
@@ -149,7 +206,9 @@
             type="text"
             placeholder="+33 6 12 34 56 78"
           />
-          <div v-if="fieldErrors.mobile" class="invalid-feedback d-block">{{ fieldErrors.mobile }}</div>
+          <div v-if="fieldErrors.mobile" class="invalid-feedback d-block">
+            {{ fieldErrors.mobile }}
+          </div>
         </div>
       </div>
 
@@ -164,18 +223,32 @@
             maxlength="1000"
             @input="form.notes = $event.target.value"
           ></textarea>
-          <div class="text-end text-xs text-secondary mt-1">{{ (form.notes || "").length }}/1000</div>
+          <div class="text-end text-xs text-secondary mt-1">
+            {{ (form.notes || "").length }}/1000
+          </div>
         </div>
       </div>
 
       <transition name="banner-fade">
-        <div v-if="showValidationWarning && form.client_id" class="alert alert-warning text-dark mt-3 py-2 mb-0" role="alert">
-          <span class="text-sm">Renseignez au moins un champ parmi : prénom, nom, email ou téléphone.</span>
+        <div
+          v-if="showValidationWarning && form.client_id"
+          class="alert alert-warning text-dark mt-3 py-2 mb-0"
+          role="alert"
+        >
+          <span class="text-sm"
+            >Renseignez au moins un champ parmi : prénom, nom, email ou
+            téléphone.</span
+          >
         </div>
       </transition>
 
       <div class="d-flex mt-4 justify-content-between gap-2 flex-wrap">
-        <soft-button type="button" color="secondary" variant="outline" @click="resetForm">
+        <soft-button
+          type="button"
+          color="secondary"
+          variant="outline"
+          @click="resetForm"
+        >
           Réinitialiser
         </soft-button>
         <soft-button
@@ -185,8 +258,14 @@
           :disabled="props.loading || !isFormValid"
           @click="submitForm"
         >
-          <span v-if="props.loading" class="spinner-border spinner-border-sm me-2" role="status"></span>
-          <span>{{ props.loading ? "Création en cours…" : "Créer le contact" }}</span>
+          <span
+            v-if="props.loading"
+            class="spinner-border spinner-border-sm me-2"
+            role="status"
+          ></span>
+          <span>{{
+            props.loading ? "Création en cours…" : "Créer le contact"
+          }}</span>
         </soft-button>
       </div>
     </div>
@@ -214,26 +293,50 @@ const showDropdown = ref(false);
 const searchTimeout = ref(null);
 
 const form = ref({
-  client_id: null, first_name: "", last_name: "",
-  email: "", phone: "", mobile: "", role: "", notes: "",
+  client_id: null,
+  first_name: "",
+  last_name: "",
+  email: "",
+  phone: "",
+  mobile: "",
+  role: "",
+  notes: "",
 });
 
-const showValidationWarning = computed(() =>
-  !form.value.first_name && !form.value.last_name &&
-  !form.value.email && !form.value.phone && !form.value.mobile
+const showValidationWarning = computed(
+  () =>
+    !form.value.first_name &&
+    !form.value.last_name &&
+    !form.value.email &&
+    !form.value.phone &&
+    !form.value.mobile
 );
 
-const isFormValid = computed(() =>
-  !!form.value.client_id && !showValidationWarning.value
+const isFormValid = computed(
+  () => !!form.value.client_id && !showValidationWarning.value
 );
 
-watch(() => props.validationErrors, (v) => { fieldErrors.value = { ...v }; }, { deep: true });
-watch(() => props.success, (v) => { if (v) resetForm(); });
+watch(
+  () => props.validationErrors,
+  (v) => {
+    fieldErrors.value = { ...v };
+  },
+  { deep: true }
+);
+watch(
+  () => props.success,
+  (v) => {
+    if (v) resetForm();
+  }
+);
 
 const handleSearchInput = (value) => {
   searchQuery.value = value;
   if (searchTimeout.value) clearTimeout(searchTimeout.value);
-  if (!value.trim()) { showDropdown.value = false; return; }
+  if (!value.trim()) {
+    showDropdown.value = false;
+    return;
+  }
   showDropdown.value = true;
   searchTimeout.value = setTimeout(() => emit("searchClient", value), 300);
 };
@@ -255,22 +358,31 @@ const clearSelection = () => {
   emit("clientSelected", null);
 };
 
-const onInputBlur = () => setTimeout(() => { showDropdown.value = false; }, 200);
+const onInputBlur = () =>
+  setTimeout(() => {
+    showDropdown.value = false;
+  }, 200);
 
 const isValidEmail = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 
 const validateForm = () => {
   const errs = {};
   if (!form.value.client_id) errs.client_id = "Le client est obligatoire.";
-  if (form.value.email && !isValidEmail(form.value.email)) errs.email = "Adresse email invalide.";
-  if (showValidationWarning.value) errs.general = "Au moins un champ (prénom, nom, email ou téléphone) doit être renseigné.";
+  if (form.value.email && !isValidEmail(form.value.email))
+    errs.email = "Adresse email invalide.";
+  if (showValidationWarning.value)
+    errs.general =
+      "Au moins un champ (prénom, nom, email ou téléphone) doit être renseigné.";
   return errs;
 };
 
 const submitForm = () => {
   fieldErrors.value = {};
   const localErrors = validateForm();
-  if (Object.keys(localErrors).length > 0) { fieldErrors.value = localErrors; return; }
+  if (Object.keys(localErrors).length > 0) {
+    fieldErrors.value = localErrors;
+    return;
+  }
   const cleaned = Object.fromEntries(
     Object.entries(form.value).map(([k, v]) => [k, v === "" ? null : v])
   );
@@ -278,7 +390,16 @@ const submitForm = () => {
 };
 
 const resetForm = () => {
-  form.value = { client_id: null, first_name: "", last_name: "", email: "", phone: "", mobile: "", role: "", notes: "" };
+  form.value = {
+    client_id: null,
+    first_name: "",
+    last_name: "",
+    email: "",
+    phone: "",
+    mobile: "",
+    role: "",
+    notes: "",
+  };
   selectedClient.value = null;
   searchQuery.value = "";
   showDropdown.value = false;
@@ -299,9 +420,11 @@ const resetForm = () => {
 }
 .search-wrap:focus-within {
   border-color: #8392ab;
-  box-shadow: 0 0 0 2px rgba(131,146,171,0.25);
+  box-shadow: 0 0 0 2px rgba(131, 146, 171, 0.25);
+}
+.search-wrap.has-error {
+  border-color: #fd5c70;
 }
-.search-wrap.has-error { border-color: #fd5c70; }
 
 .search-pfx {
   padding: 0 0.75rem;
@@ -317,9 +440,14 @@ const resetForm = () => {
   min-width: 0;
   outline: none;
 }
-.search-input:focus { box-shadow: none; }
+.search-input:focus {
+  box-shadow: none;
+}
 
-.search-loader { padding: 0 0.75rem; flex-shrink: 0; }
+.search-loader {
+  padding: 0 0.75rem;
+  flex-shrink: 0;
+}
 
 .search-dropdown {
   position: absolute;
@@ -329,15 +457,20 @@ const resetForm = () => {
   background: #fff;
   border: 1px solid #e9ecef;
   border-radius: 0.5rem;
-  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
   z-index: 1050;
   overflow: hidden;
   max-height: 260px;
   overflow-y: auto;
 }
 
-.search-dropdown::-webkit-scrollbar { width: 4px; }
-.search-dropdown::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
+.search-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+.search-dropdown::-webkit-scrollbar-thumb {
+  background: #e2e8f0;
+  border-radius: 4px;
+}
 
 .dropdown-row {
   width: 100%;
@@ -352,8 +485,12 @@ const resetForm = () => {
   border-bottom: 1px solid #f3f4f6;
   transition: background 0.15s;
 }
-.dropdown-row:last-child { border-bottom: none; }
-.dropdown-row:hover { background: #f5f8ff; }
+.dropdown-row:last-child {
+  border-bottom: none;
+}
+.dropdown-row:hover {
+  background: #f5f8ff;
+}
 
 .dr-avatar {
   width: 2rem;
@@ -452,12 +589,28 @@ const resetForm = () => {
 
 /* ─── Animations ─── */
 .banner-fade-enter-active,
-.banner-fade-leave-active { transition: opacity 0.22s ease, transform 0.22s ease; }
-.banner-fade-enter-from { opacity: 0; transform: translateY(-6px); }
-.banner-fade-leave-to { opacity: 0; transform: translateY(-4px); }
+.banner-fade-leave-active {
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+.banner-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+.banner-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
 
 .dropdown-pop-enter-active,
-.dropdown-pop-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
-.dropdown-pop-enter-from { opacity: 0; transform: translateY(-8px) scale(0.97); }
-.dropdown-pop-leave-to { opacity: 0; transform: translateY(-4px) scale(0.98); }
+.dropdown-pop-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.dropdown-pop-enter-from {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.97);
+}
+.dropdown-pop-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
 </style>
diff --git a/thanasoft-front/src/components/templates/Quote/CreateQuoteTemplate.vue b/thanasoft-front/src/components/templates/Quote/CreateQuoteTemplate.vue
index 19ebce0..1347657 100644
--- a/thanasoft-front/src/components/templates/Quote/CreateQuoteTemplate.vue
+++ b/thanasoft-front/src/components/templates/Quote/CreateQuoteTemplate.vue
@@ -4,14 +4,20 @@
       <div class="col-lg-10 mx-auto">
         <div class="card mb-4">
           <div class="card-header p-3 pb-0">
-            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
+            <div
+              class="d-flex flex-wrap align-items-center justify-content-between gap-3"
+            >
               <div class="d-flex align-items-center gap-3">
-                <div class="icon icon-shape icon-sm bg-gradient-primary shadow text-center border-radius-md">
+                <div
+                  class="icon icon-shape icon-sm bg-gradient-primary shadow text-center border-radius-md"
+                >
                   <i class="fas fa-file-invoice text-white text-sm"></i>
                 </div>
                 <div>
                   <h6 class="mb-0">Nouveau Devis</h6>
-                  <p class="text-sm text-muted mb-0">Créer un devis pour un client</p>
+                  <p class="text-sm text-muted mb-0">
+                    Créer un devis pour un client
+                  </p>
                 </div>
               </div>
               <div class="d-flex flex-wrap align-items-center gap-2">
@@ -25,7 +31,9 @@
 
             <div class="row g-3">
               <div class="col-lg-6 col-md-6 col-12">
-                <div class="card card-body border card-plain border-radius-lg h-100">
+                <div
+                  class="card card-body border card-plain border-radius-lg h-100"
+                >
                   <div class="d-flex align-items-center mb-3">
                     <i class="fas fa-user-circle me-2 text-primary"></i>
                     <h6 class="mb-0">Client</h6>
@@ -35,7 +43,9 @@
               </div>
 
               <div class="col-lg-6 col-md-6 col-12">
-                <div class="card card-body border card-plain border-radius-lg h-100">
+                <div
+                  class="card card-body border card-plain border-radius-lg h-100"
+                >
                   <div class="d-flex align-items-center mb-3">
                     <i class="fas fa-calendar-alt me-2 text-primary"></i>
                     <h6 class="mb-0">Informations</h6>
@@ -49,7 +59,9 @@
 
             <div class="row g-3">
               <div class="col-lg-8 col-12">
-                <div class="card card-body border card-plain border-radius-lg h-100">
+                <div
+                  class="card card-body border card-plain border-radius-lg h-100"
+                >
                   <div class="d-flex align-items-center mb-3">
                     <i class="fas fa-boxes me-2 text-primary"></i>
                     <h6 class="mb-0">Produits &amp; Services</h6>
@@ -59,7 +71,9 @@
               </div>
 
               <div class="col-lg-4 col-12">
-                <div class="card card-body border card-plain border-radius-lg h-100">
+                <div
+                  class="card card-body border card-plain border-radius-lg h-100"
+                >
                   <div class="d-flex align-items-center mb-3">
                     <i class="fas fa-calculator me-2 text-primary"></i>
                     <h6 class="mb-0">Récapitulatif</h6>
diff --git a/thanasoft-front/src/views/pages/Planning.vue b/thanasoft-front/src/views/pages/Planning.vue
index 39b172a..f2bc9be 100644
--- a/thanasoft-front/src/views/pages/Planning.vue
+++ b/thanasoft-front/src/views/pages/Planning.vue
@@ -93,7 +93,8 @@ const practitioners = computed(
 const collaborators = computed(() =>
   practitioners.value.map((p) => ({
     id: p.id,
-    name: `${p.employee?.first_name || ""} ${p.employee?.last_name || ""}`.trim() ||
+    name:
+      `${p.employee?.first_name || ""} ${p.employee?.last_name || ""}`.trim() ||
       `Collaborateur #${p.id}`,
   }))
 );
@@ -117,7 +118,9 @@ const uiToBackendStatus = {
 
 const mapInterventionToPlanning = (item) => {
   const practitioner =
-    item.principal_practitioner || item.assigned_practitioner || item.practitioners?.[0];
+    item.principal_practitioner ||
+    item.assigned_practitioner ||
+    item.practitioners?.[0];
   const collaborator = `${practitioner?.employee?.first_name || ""} ${
     practitioner?.employee?.last_name || ""
   }`.trim();
@@ -127,10 +130,16 @@ const mapInterventionToPlanning = (item) => {
     date: item.scheduled_at || item.date || item.created_at,
     end: item.estimated_end_at || item.end,
     type:
-      item.product?.nom || item.product_name || item.type_label || item.type || "Intervention",
+      item.product?.nom ||
+      item.product_name ||
+      item.type_label ||
+      item.type ||
+      "Intervention",
     deceased:
       item.deceased_name ||
-      `${item.deceased?.first_name || ""} ${item.deceased?.last_name || ""}`.trim() ||
+      `${item.deceased?.first_name || ""} ${
+        item.deceased?.last_name || ""
+      }`.trim() ||
       "Non spécifié",
     client: item.client_name || item.client?.name || "-",
     collaborator: collaborator || "-",
@@ -149,9 +158,7 @@ const weekRange = computed(() => {
 });
 
 const apiInterventions = computed(() =>
-  Object.values(monthBuckets.value)
-    .flat()
-    .map(mapInterventionToPlanning)
+  Object.values(monthBuckets.value).flat().map(mapInterventionToPlanning)
 );
 
 const interventions = computed(() => {
@@ -167,11 +174,15 @@ const interventions = computed(() => {
 
 // Lifecycle
 onMounted(async () => {
-  await Promise.all([fetchData(), thanatopractitionerStore.fetchThanatopractitioners()]);
+  await Promise.all([
+    fetchData(),
+    thanatopractitionerStore.fetchThanatopractitioners(),
+  ]);
 });
 
 // Methods
-const getMonthKey = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+const getMonthKey = (d) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
 
 const bumpMonthVersion = (key) => {
   monthVersions.value[key] = (monthVersions.value[key] || 0) + 1;
@@ -192,7 +203,10 @@ const fetchMonth = async (date, force = false) => {
 
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
-  const response = await interventionStore.fetchInterventionsByMonth(year, month);
+  const response = await interventionStore.fetchInterventionsByMonth(
+    year,
+    month
+  );
 
   // Guard against stale async responses overriding newer local/server updates
   if (monthRequestIds.value[key] !== requestId) return;
@@ -349,8 +363,13 @@ const handleUpdateStatus = async (payload) => {
   const status = uiToBackendStatus[payload.status] || payload.status;
 
   try {
-    const updated = await interventionStore.updateInterventionStatus(interventionId, status);
-    const monthKey = getMonthKey(new Date(updated.scheduled_at || updated.date || currentDate.value));
+    const updated = await interventionStore.updateInterventionStatus(
+      interventionId,
+      status
+    );
+    const monthKey = getMonthKey(
+      new Date(updated.scheduled_at || updated.date || currentDate.value)
+    );
     const monthItems = monthBuckets.value[monthKey] || [];
     const idx = monthItems.findIndex((i) => i.id === interventionId);
     if (idx !== -1) {