diff --git a/src/App.vue b/src/App.vue
index 8bf5492..40fa0a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,9 +19,9 @@
 
 <script setup>
 import {onMounted, ref} from 'vue'
-import Header from '@/components/Header.vue'
-import Navbar from '@/components/Navbar.vue'
-import Footer from '@/components/Footer.vue'
+import Header from '@/components/Structure/Header.vue'
+import Navbar from '@/components/Structure/Navbar.vue'
+import Footer from '@/components/Structure/Footer.vue'
 import router from '@/router/index'
 import { HttpStatusCode } from 'axios';
 import DemandesService from '@/service/DemandesService'
diff --git a/src/components/DialogLancerTraitement.vue b/src/components/DialogLancerTraitement.vue
index 15d69f5..53ac46b 100644
--- a/src/components/DialogLancerTraitement.vue
+++ b/src/components/DialogLancerTraitement.vue
@@ -16,7 +16,7 @@
           <v-btn v-if="!isFinished" color="primary" @click="dialog = false" aria-label="Annuler">Annuler</v-btn>
           <v-spacer v-else></v-spacer>
           <v-btn v-if="!isFinished" color="primary" @click="confirm()" aria-label="Valider">Valider</v-btn>
-          <v-btn v-else color="primary" @click="router.push('exemplarisation-tableau')" aria-label="OK">OK</v-btn>
+          <v-btn v-else color="primary" @click="router.push(route)" aria-label="OK">OK</v-btn>
         </v-card-actions>
       </v-card>
     </v-skeleton-loader>
@@ -36,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  route: {
+    required: true,
+    type: String,
+  }
 })
 const title = ref('Lancement du traitement en production');
 const body = ref('Êtes-vous sûr de vouloir lancer le traitement en production ?<br/> Aucune annulation n\'est possible.');
diff --git a/src/components/DialogSuppression.vue b/src/components/DialogSuppression.vue
new file mode 100644
index 0000000..7dbcd48
--- /dev/null
+++ b/src/components/DialogSuppression.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-dialog v-model="dialog" width="500">
+    <v-skeleton-loader
+      :loading="isLoading"
+      class="mx-auto"
+      elevation="12"
+      width="500"
+      type="table-heading, list-item-two-line, table-tfoot"
+    >
+      <v-card>
+        <v-card-title>Suppression</v-card-title>
+        <v-divider></v-divider>
+        <v-card-text>Êtes-vous certain de vouloir supprimer définitivement cette demande ?</v-card-text>
+        <v-card-actions>
+
+          <v-container class="d-flex justify-space-between">
+            <v-btn @click="cancel()">Annuler</v-btn>
+            <v-btn @click="confirm()">Confirmer</v-btn>
+          </v-container>
+        </v-card-actions>
+      </v-card>
+    </v-skeleton-loader>
+  </v-dialog>
+</template>
+<script setup>
+import demandesService from '@/service/DemandesService';
+import router from '@/router';
+import { ref } from 'vue';
+
+const dialog = defineModel();
+const emits = defineEmits(['supp'])
+const props = defineProps({
+  returnToAccueil: {
+    required: false,
+    type: Boolean,
+  },
+  demande: {
+    required: true,
+    type: Object
+  }
+})
+const isLoading = ref(false);
+
+function confirm() {
+  isLoading.value = true;
+  demandesService.deleteDemande(props.demande.id, props.demande.type)
+    .then(()=>{
+      if(props.returnToAccueil){
+        router.push('/accueil');
+      }
+      emits('supp');
+    }).finally(() => {
+    isLoading.value = false;
+    dialog.value = false;
+  })
+}
+
+function cancel() {
+  dialog.value = false;
+}
+
+</script>
+
diff --git a/src/components/TypeExemp.vue b/src/components/Exemp/TypeExemp.vue
similarity index 64%
rename from src/components/TypeExemp.vue
rename to src/components/Exemp/TypeExemp.vue
index c96ffef..9fb6c50 100644
--- a/src/components/TypeExemp.vue
+++ b/src/components/Exemp/TypeExemp.vue
@@ -1,19 +1,20 @@
 <template>
-  <v-card elevation="1" :loading="isLoading">
+  <v-card flat :loading="isLoading">
     <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
       <span>Choix du type d'exemplarisation</span>
       <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
     </v-card-title>
     <v-card-text class="pa-0 ma-0">
-      <div class="btn-perso elevation-1 pa-8 d-flex justify-space-between" @click="onClick(exemp)"
-           v-for="exemp in listExemp" :key="exemp.numTypeExemp">
-        <v-row class="align-center">
-          <v-col cols="12" sm="3" class="d-flex justify-center">
-            <v-icon size="x-large" dark color="primary">{{ getIcon(exemp) }}</v-icon>
-          </v-col>
-          <v-col cols="12" sm="9" class="d-flex justify-start"><span class="group">{{ exemp.libelle }}</span></v-col>
-        </v-row>
-      </div>
+      <v-hover v-slot="{ isHovering, props }" v-for="exemp in listExemp" :key="exemp.numTypeExemp">
+        <div v-bind="props" :class="`btn-perso elevation-${isHovering ? 6 : 2} pa-5 ma-1 d-flex justify-space-between`" @click="onClick(exemp)">
+          <v-row class="align-center">
+            <v-col cols="12" sm="3" class="d-flex justify-center">
+              <v-icon size="x-large" dark color="primary">{{ getIcon(exemp) }}</v-icon>
+            </v-col>
+            <v-col cols="12" sm="9" class="d-flex justify-start"><span class="group">{{ exemp.libelle }}</span></v-col>
+          </v-row>
+        </div>
+      </v-hover>
     </v-card-text>
   </v-card>
 </template>
@@ -53,8 +54,6 @@ function deleted() {
 
 <style scoped>
 .btn-perso:hover {
-  background-color: lightgrey;
-  transition-duration: 0.3s;
   cursor: pointer;
 }
 
diff --git a/src/components/Modif/DownloadFile.vue b/src/components/Modif/DownloadFile.vue
new file mode 100644
index 0000000..c860328
--- /dev/null
+++ b/src/components/Modif/DownloadFile.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-card elevation="0">
+    <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
+      <span><slot></slot></span>
+      <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
+    </v-card-title>
+    <v-card-actions class="py-6">
+      <v-spacer></v-spacer>
+      <v-btn
+        rounded
+        x-large
+        variant="flat"
+        color="#295494"
+        ref="fileLinkBtn"
+        :href="fileLink"
+        :disabled="isDisabled"
+        @click="clicked()"
+        append-icon="mdi-cloud-download"
+        :download="fileName">Télécharger le fichier de correspondances PPN/EPN
+      </v-btn>
+      <v-spacer></v-spacer>
+    </v-card-actions>
+  </v-card>
+</template>
+<script setup>
+
+const emits = defineEmits(['deleted','clicked']);
+const props = defineProps({
+  fileName: {
+    required: true,
+    type: String
+  },
+  fileLink: {
+    required: true,
+    type: String
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+function clicked(){
+  emits('clicked');
+}
+
+function deleted() {
+  emits('deleted');
+}
+</script>
+<style scoped>
+v-btn{
+  color: red !important;
+}
+
+</style>
diff --git a/src/components/Modif/TypeTraitement.vue b/src/components/Modif/TypeTraitement.vue
new file mode 100644
index 0000000..83f815e
--- /dev/null
+++ b/src/components/Modif/TypeTraitement.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-card flat :loading="isLoading">
+    <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
+      <span>Choix du type de traitement</span>
+      <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
+    </v-card-title>
+
+    <v-card-text  class="pa-0 ma-0">
+      <v-hover v-slot="{ isHovering, props }" v-for="traitement in listTraitement" :key="traitement.id">
+        <div v-bind="props" :class="`btn-perso elevation-${isHovering ? 6 : 2} pa-5 ma-1 d-flex justify-space-between`" @click="onClick(traitement)">
+          <v-row class="align-center">
+            <v-col cols="12" sm="3" class="d-flex justify-center">
+              <v-icon size="xx-large" dark color="primary">{{ getIcon(traitement) }}</v-icon>
+            </v-col>
+            <v-col cols="12" sm="9" class="d-flex justify-start"><p class="group" >{{ traitement.libelle }}</p></v-col>
+          </v-row>
+        </div>
+      </v-hover>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import DemandesService from '@/service/DemandesService';
+
+const typeTraitement = defineModel();
+const emits = defineEmits(['clicked', 'deleted']);
+const props = defineProps({ isLoading: { type: Boolean } });
+const listTraitement = ref([]);
+
+onMounted(() => {
+  DemandesService.getTypeTraitement()
+    .then(response => {
+      listTraitement.value = response.data;
+    });
+});
+
+function getIcon(traitement) {
+  if (traitement.id === 1) return 'mdi-plus';
+  if (traitement.id === 2) return 'mdi-pencil';
+  if (traitement.id === 3) return 'mdi-redo';
+  if (traitement.id === 4) return 'mdi-close';
+  if (traitement.id === 5) return 'mdi-delete';
+  return 'mdi-nuke';
+}
+
+function onClick(traitement) {
+  typeTraitement.value = traitement;
+  emits('clicked');
+}
+
+function deleted() {
+  emits('deleted');
+}
+
+</script>
+
+<style scoped>
+.btn-perso:hover {
+  cursor: pointer;
+}
+
+.group {
+  font-size: x-large;
+}
+</style>
diff --git a/src/components/RecapDemande.vue b/src/components/RecapDemande.vue
index 8884c8c..496229d 100644
--- a/src/components/RecapDemande.vue
+++ b/src/components/RecapDemande.vue
@@ -16,16 +16,21 @@
           <v-row class="d-flex justify-center pa-1">RCR</v-row>
           <v-row class="d-flex justify-center pa-1">{{ demande.rcr }} - {{ demande.shortname }}</v-row>
         </v-col>
-        <v-col>
-          <v-row class="d-flex justify-center pa-1">Type d'exemplarisation</v-row>
+        <v-col v-if="demande.typeExemp">
+          <v-row class="d-flex justify-center pa-1">Type de document</v-row>
           <v-row class="d-flex justify-center pa-1">{{ demande.typeExemp }}</v-row>
         </v-col>
+        <v-col v-if="demande.traitement">
+          <v-row class="d-flex justify-center pa-1">Type de traitement</v-row>
+          <v-row class="d-flex justify-center pa-1">{{ demande.traitement }}</v-row>
+        </v-col>
       </v-row>
     </v-container>
   </div>
 </template>
 
 <script setup>
+
 const props = defineProps({
   demande: {type: Object, required: true}
 });
diff --git a/src/components/UploadFile.vue b/src/components/SelectFile.vue
similarity index 100%
rename from src/components/UploadFile.vue
rename to src/components/SelectFile.vue
diff --git a/src/components/Simulation.vue b/src/components/Simulation.vue
index 5a5318f..5e223a2 100644
--- a/src/components/Simulation.vue
+++ b/src/components/Simulation.vue
@@ -10,7 +10,7 @@
     ></v-progress-circular>
   </v-overlay>
   <!-- CONTENU SIMULATION -->
-  <v-card>
+  <v-card flat class="pb-2">
     <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
       <span>Ecran de simulation</span>
       <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
@@ -28,13 +28,9 @@
       <v-col cols="12" sm="12" md="5"> <!--Exemplaires existants-->
         <!--Carte activée si présence exemplaires pour cette notice-->
         <v-card class="pa-1" outlined tile>
-          <span>Exemplaire(s) existant(s)</span>
-          <v-container id="scroll-target" style="max-height: 400px" class="overflow-y-auto">
-            <pre style="text-align: left; padding-top: 1em">
-              <span class="inner-pre" style="text-align: left; padding-top: 1em; overflow-x:scroll;">
-                {{ noticeAvant }}
-              </span>
-            </pre>
+          <h5 class="d-flex justify-center">{{ labelBefore }}</h5>
+          <v-container id="scroll-target" style="max-height: 400px" class="overflow-auto">
+            <pre style="text-align: left" class="py-4">{{ noticeAvant }}</pre>
           </v-container>
         </v-card>
       </v-col>
@@ -43,10 +39,8 @@
       </v-col>
       <v-col cols="12" sm="12" md="5"> <!--Exemplaire à créer-->
         <v-card class="pa-1" outlined tile>
-          <span>Exemplaire à créer</span>
-          <pre style="text-align: left; padding-top: 1em; overflow-x:scroll;">
-            {{ noticeApres }}
-          </pre>
+          <h5 class="d-flex justify-center">{{ labelAfter }}</h5>
+          <pre style="text-align: left" class="py-4 overflow-auto">{{ noticeApres }}</pre>
         </v-card>
       </v-col>
     </v-row>
@@ -64,6 +58,14 @@ const props = defineProps({
   demande: {
     type: Object,
     required: true
+  },
+  labelBefore: {
+    type: String,
+    default: 'Avant'
+  },
+  labelAfter: {
+    type: String,
+    default: 'Après'
   }
 });
 const emits = defineEmits(['deleted'])
@@ -73,17 +75,17 @@ const nbNotice = ref({
   nbTotalNotice: 0
 });
 const numeroPPNNotice = ref();
-const noticeAvant = ref();
-const noticeApres = ref();
+const noticeAvant = ref("");
+const noticeApres = ref("");
 const isLoading = ref(true);
 
 onMounted(() => {
-  demandesService.getNbLigneFichier(props.demande.id, 'EXEMP')
+  demandesService.getNbLigneFichier(props.demande.id, props.demande.type)
     .then(response => {
       console.log(response.data);
       nbNotice.value.nbTotalNotice = response.data;
     });
-  demandesService.simulerLigne(props.demande.id, 0, 'EXEMP')
+  demandesService.simulerLigne(props.demande.id, 0, props.demande.type)
     .then(response => {
       numeroPPNNotice.value = response.data[0];
       noticeAvant.value = response.data[1];
@@ -96,7 +98,7 @@ onMounted(() => {
 
 function refresh() {
   isLoading.value = true;
-  demandesService.simulerLigne(props.demande.id, nbNotice.value.nbNoticeEnCours, 'EXEMP')
+  demandesService.simulerLigne(props.demande.id, nbNotice.value.nbNoticeEnCours, props.demande.type)
     .then(response => {
       numeroPPNNotice.value = response.data[0];
       noticeAvant.value = response.data[1];
@@ -119,7 +121,11 @@ h3 {
 }
 
 h4 {
-  font-size: large;
+  font-size: x-large;
+  font-weight: normal;
+}
+h5 {
+  font-size: x-large;
   font-weight: normal;
 }
 </style>
diff --git a/src/components/Footer.vue b/src/components/Structure/Footer.vue
similarity index 100%
rename from src/components/Footer.vue
rename to src/components/Structure/Footer.vue
diff --git a/src/components/Header.vue b/src/components/Structure/Header.vue
similarity index 88%
rename from src/components/Header.vue
rename to src/components/Structure/Header.vue
index 2fc5696..8ffe76b 100644
--- a/src/components/Header.vue
+++ b/src/components/Structure/Header.vue
@@ -7,7 +7,7 @@
 			<v-icon large>mdi-menu</v-icon>
 		</v-app-bar-nav-icon>
     <!--Icone et titre de l'application-->
-		<img alt="icone assistance" height="41px" v-on:click="$router.push({path: '/'})" src="../assets/item_logo.svg" target="_blank" width="41px" style="margin-left: 1em" />
+		<img alt="icone assistance" height="41px" v-on:click="$router.push({path: '/'})" src="../../assets/item_logo.svg" target="_blank" width="41px" style="margin-left: 1em" />
 		<v-toolbar-title class="item-margin-left-icon" v-on:click="$router.push({path: '/'})">Item</v-toolbar-title>
 		<!--Icones de la barre de menu à droite-->
 		<div class="flex-grow-1"></div>
@@ -19,7 +19,7 @@
 							alt="icone assistance"
 							height="41px"
 							href="https://stp.abes.fr/node/3?origine=sudocpro"
-							src="../assets/item_assistance.svg"
+							src="../../assets/item_assistance.svg"
 							target="_blank"
 							width="41px"
 							style="transform: translateY(-3px)" /></a
@@ -34,7 +34,7 @@
 							alt="icone documentation"
 							height="41px"
 							href="http://documentation.abes.fr/aideitem/index.html"
-							src="../assets/item_documentation.svg"
+							src="../../assets/item_documentation.svg"
 							target="_blank"
 							width="41px"
 							style="transform: translateY(-3px)" /></a
@@ -44,7 +44,7 @@
 		<div class="item-margin-around-single-icon">
 			<v-btn class="mx-2 item-margin-around-single-icon" fab dark small color="primary" v-if="authenticated">
 				<span @click="logout()" title="Déconnexion"
-					><a><img alt="icone déconnexion" height="41px" src="../assets/item_deconnexion.svg" width="41px" /></a
+					><a><img alt="icone déconnexion" height="41px" src="../../assets/item_deconnexion.svg" width="41px" /></a
 				></span>
 			</v-btn>
 		</div>
diff --git a/src/components/Navbar.vue b/src/components/Structure/Navbar.vue
similarity index 96%
rename from src/components/Navbar.vue
rename to src/components/Structure/Navbar.vue
index 3268f7b..2d6dbd3 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Structure/Navbar.vue
@@ -43,7 +43,7 @@
         <v-list-item-title class="text-h6">Recouvrement</v-list-item-title>
       </v-list-item>
 
-      <v-list-item @click="navigateTo('recouvrement-etape-1-selection-rcr')">
+      <v-list-item @click="navigateTo('recouvrement')">
         <template v-slot:prepend>
           <v-icon>mdi-percent</v-icon>
         </template>
@@ -66,7 +66,7 @@
         <v-list-item-title class="text-h6">Creations</v-list-item-title>
       </v-list-item>
 
-      <v-list-item @click="navigateTo('rcrEx')">
+      <v-list-item @click="navigateTo('exemplarisation')">
         <template v-slot:prepend>
           <v-icon>mdi-file-plus</v-icon>
         </template>
@@ -89,7 +89,7 @@
         <v-list-item-title class="text-h6">Modifications</v-list-item-title>
       </v-list-item>
 
-      <v-list-item @click="navigateTo('rcr')">
+      <v-list-item @click="navigateTo('modification')">
         <template v-slot:prepend>
           <v-icon>mdi-file-document-edit</v-icon>
         </template>
diff --git a/src/router/index.js b/src/router/index.js
index 211d911..d329048 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,33 +67,16 @@ const routes = [
     meta: {requiresAuth: true}
   },
   {
-    path: '/modification-etape-1-selection-rcr',
-    name: 'modification-etape-1-selection-rcr',
+    path: '/modification',
+    name: 'modification',
     component: ModifSteps,
     meta: {requiresAuth: true}
   },
   {
-    path: '/modification-etape-2-chargement-liste-ppn',
-    name: 'modification-etape-2-chargement-liste-ppn',
-    component: Accueil,
-    meta: {requiresAuth: true}
-  },
-  {
-    path: '/modification-etape-3-choix-de-traitement',
-    name: 'modification-etape-3-choix-de-traitement',
-    component: Accueil,
-    meta: {requiresAuth: true}
-  },
-  {
-    path: '/modification-etape-4-chargement-fichier-complete',
-    name: 'modification-etape-4-chargement-fichier-complete',
-    component: Accueil,
-    meta: {requiresAuth: true}
-  },
-  {
-    path: '/modification-etape-5-simulation-avant-envoi',
-    name: 'modification-etape-5-simulation-avant-envoi',
-    component: Accueil,
+    path: '/modification/:id',
+    name: 'modificationWithId',
+    component: ModifSteps,
+    props: true,
     meta: {requiresAuth: true}
   },
   {
diff --git a/src/service/DemandesService.js b/src/service/DemandesService.js
index a77915f..cf8094d 100644
--- a/src/service/DemandesService.js
+++ b/src/service/DemandesService.js
@@ -142,6 +142,10 @@ export class DemandesService {
     return this.client.patch(`demandes/EXEMP/${id}?typeExemp=${typeExemp}`);
   }
 
+  modifierTypeTraitementModifDemande(id, typeTraitement){
+    return this.client.patch(`demandes/MODIF/${id}?traitement=${typeTraitement}`);
+  }
+
   uploadDemande(id, file, typeDemande){
     const config = { headers: {
       'Content-Type': 'multipart/form-data',
@@ -180,6 +184,14 @@ export class DemandesService {
   deleteDemande(id, typeDemande) {
     return this.client.delete(`demandes/${typeDemande}/${id}`);
   }
+
+  getFilePreparer(id, typeDemande){
+    return this.client.get(`/files/${typeDemande}/${id}/fichier_prepare_${id}.csv`);
+  }
+
+  getTypeTraitement(){
+    return this.client.get('traitements');
+  }
 }
 
 export default new DemandesService()
diff --git a/src/views/Accueil.vue b/src/views/Accueil.vue
index d1ecff5..cd15e3f 100644
--- a/src/views/Accueil.vue
+++ b/src/views/Accueil.vue
@@ -24,7 +24,7 @@
           </BtnAccueil>
         </v-col>
         <v-col class="text-center" cols="12" md="6">
-          <BtnAccueil id="btn-modification" icon="mdi-pencil" route="modification-etape-1-selection-rcr">
+          <BtnAccueil id="btn-modification" icon="mdi-pencil" route="modification">
             Modifier des exemplaires
           </BtnAccueil>
         </v-col>
diff --git a/src/views/Exemplarisation/ExempSteps.vue b/src/views/Exemplarisation/ExempSteps.vue
index 50a0b7c..d52eebc 100644
--- a/src/views/Exemplarisation/ExempSteps.vue
+++ b/src/views/Exemplarisation/ExempSteps.vue
@@ -42,7 +42,6 @@
 
           <v-stepper-window>
             <v-stepper-window-item>
-              <v-btn class="position-absolute"> supprimer </v-btn>
               <rcr v-model="rcrSelected" :is-loading="isLoading"></rcr>
               <v-container class="d-flex justify-space-between">
                 <v-spacer></v-spacer>
@@ -63,7 +62,7 @@
               </v-container>
             </v-stepper-window-item>
             <v-stepper-window-item>
-              <upload-file v-model="fileSelected" :is-loading="isLoading" @deleted="deleteDemande()">Charger le fichier des exemplaires à traiter</upload-file>
+              <select-file v-model="fileSelected" :is-loading="isLoading" @deleted="deleteDemande()">Charger le fichier des exemplaires à traiter</select-file>
               <v-alert
                 v-if="alertMessage"
                 :type="alertType"
@@ -76,14 +75,14 @@
                 </v-btn>
                 <v-btn
                   :disabled="!fileSelected"
-                  @click="launchTraitement"
+                  @click="uploadFile"
                 >
                   Lancer le traitement en simulation
                 </v-btn>
               </v-container>
             </v-stepper-window-item>
             <v-stepper-window-item>
-              <simulation :demande="demande" @deleted="deleteDemande()"></simulation>
+              <simulation :demande="demande" label-before="Exemplaire(s) existant(s)" label-after="Exemplaire à créer" @deleted="deleteDemande()"></simulation>
               <v-container class="d-flex justify-space-between">
                 <v-btn @click="prev">
                   précédent
@@ -98,7 +97,8 @@
       </v-col>
     </v-row>
   </v-container>
-  <dialog-lancer-traitement v-model="dialog" :is-loading="isLoading" @launch="launchDemande()"></dialog-lancer-traitement>
+  <dialog-lancer-traitement v-model="dialog" :is-loading="isLoading" route="/exemplarisation-tableau" @launch="launchDemande()"></dialog-lancer-traitement>
+  <dialog-suppression  v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
 <script setup>
@@ -106,11 +106,12 @@
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from '@/router';
-import UploadFile from '@/components/UploadFile.vue';
+import SelectFile from '@/components/SelectFile.vue';
 import Rcr from '@/components/Rcr.vue';
-import TypeExemp from '@/components/TypeExemp.vue';
+import TypeExemp from '@/components/Exemp/TypeExemp.vue';
 import Simulation from "@/components/Simulation.vue";
 import DialogLancerTraitement from '@/components/DialogLancerTraitement.vue';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const emits = defineEmits(['backendError', 'backendSuccess', 'login-success'])
 const props = defineProps({id : {type: String}});
@@ -124,9 +125,9 @@ const alertMessage = ref();
 const alertType = ref();
 const isLoading = ref(false);
 const dialog = ref(false);
+const suppDialog = ref(false);
 
 onMounted(()=>{
-  console.log(props.id);
   if(props.id){
     DemandesService.getDemande(props.id, "EXEMP")
       .then(response => {
@@ -182,8 +183,7 @@ function createDemande() {
         next();
       }).catch(err => {
         emits('backendError',err);
-      })
-      .finally(() => {
+      }).finally(() => {
         isLoading.value = false;
       });
   }
@@ -208,7 +208,7 @@ function modifiTypeExemp() {
   }
 }
 
-function launchTraitement() {
+function uploadFile() {
   alertMessage.value = '';
   alertType.value = 'success';
   isLoading.value = true;
@@ -237,12 +237,7 @@ function launchDemande(){
 }
 
 function deleteDemande(){
-  DemandesService.deleteDemande(demande.value.id, 'EXEMP')
-    .then(()=>{
-      router.push('/accueil');
-    }).catch(err => {
-      emits('backendError', err);
-  })
+  suppDialog.value = true;
 }
 
 function next() {
diff --git a/src/views/Exemplarisation/ExempTable.vue b/src/views/Exemplarisation/ExempTable.vue
index 6649b84..650f8d5 100644
--- a/src/views/Exemplarisation/ExempTable.vue
+++ b/src/views/Exemplarisation/ExempTable.vue
@@ -33,7 +33,8 @@
   </v-container>
   <v-data-table :headers="headingsDemandes" :items="contentsDemandesFrontFiltered" :items-length="totalItemsFound"
                 :loading="!isDataLoaded" show-expand :sort-by="[{ key: 'dateModification', order: 'desc' }]"
-                item-key="id">
+                item-key="id"
+  >
     <template v-slot:body.prepend>
       <tr>
         <td></td>
@@ -71,22 +72,22 @@
     </template>
 
     <template v-slot:item="{ item, expand }">
-      <tr @click="onRowClick(item)" @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
+      <tr @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
           :class="{ 'highlighted-row': item.highlighted }" style="cursor: pointer;">
         <td>
           <v-btn icon="mdi-chevron-up" @click="item.expanded = !item.expanded" variant="text">
             <v-icon>{{ item.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </v-btn>
         </td>
-        <td class="text-right">{{ item.id }}</td>
-        <td class="text-right">{{ item.dateCreation }}</td>
-        <td class="text-right">{{ item.dateModification }}</td>
-        <td class="text-right">{{ item.iln }}</td>
-        <td class="text-right">{{ item.rcr }}</td>
-        <td class="text-right">{{ item.typeExemp }}</td>
-        <td class="text-right">{{ item.indexRecherche }}</td>
-        <td class="text-right">{{ item.etatDemande }}</td>
-        <td class="text-right">
+        <td @click="onRowClick(item)" class="text-right">{{ item.id }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateCreation }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateModification }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.iln }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.rcr }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.typeExemp }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.indexRecherche }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.etatDemande }}</td>
+        <td @click="onRowClick(item)" class="text-right">
           <v-progress-linear v-model="item.pourcentageProgressionTraitement" :height="18" :striped="false"
                              color="grey-lighten-1" style="border: 1px solid grey; font-weight: bolder">
             {{ item.pourcentageProgressionTraitement }} %
@@ -110,8 +111,9 @@
         </td>
         <td class="text-right">
           <!-- Colonne Action -->
-          <v-icon v-if="canArchive(item)" @click="archiverDemande(item)">mdi-archive</v-icon>
-          <v-icon v-else-if="canCancel(item)" @click="supprimerDemande(item)">mdi-delete</v-icon>
+          <v-btn v-if="canArchive(item)" variant="plain" icon="mdi-archive" @click="archiverDemande(item)"></v-btn>
+          <v-btn v-else-if="canCancel(item)" variant="plain" icon="mdi-delete" @click="supprimerDemande(item)"></v-btn>
+
         </td>
       </tr>
       <tr v-if="item.expanded">
@@ -122,12 +124,14 @@
       </tr>
     </template>
   </v-data-table>
+  <dialog-suppression v-model="suppDialog" :demande="suppDemande" @supp="loadItems('EXEMP', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from '@/router';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const service = DemandesService;
 
@@ -204,6 +208,8 @@ const headingsDemandes = ref([
 const contentsDemandesFromServer = ref([]);
 const contentsDemandesFrontFiltered = ref([]);
 const totalItemsFound = ref(0);
+const suppDialog = ref(false);
+const suppDemande = ref({});
 
 //Progress bar displayed while fetching data
 const isDataLoaded = ref(false);
@@ -298,16 +304,9 @@ function canCancel(item) {
 }
 
 //Suppression d'une demande
-async function supprimerDemande(item) {
-  try {
-    await service.supprimerDemande('EXEMP', item.id);
-    // Mettre à jour les données après la suppression réussie
-    await loadItems('EXEMP');
-    emit('backendSuccess');
-  } catch (error) {
-    console.error(error);
-    emit('backendError', error);
-  }
+function supprimerDemande(item) {
+  suppDialog.value = true;
+  suppDemande.value = item;
 }
 
 //Archivage d'une demande
diff --git a/src/views/Modification/ModifSteps.vue b/src/views/Modification/ModifSteps.vue
index 83f54e0..e4982fc 100644
--- a/src/views/Modification/ModifSteps.vue
+++ b/src/views/Modification/ModifSteps.vue
@@ -1,63 +1,364 @@
 <template>
-  <v-stepper v-model="currentStep" vertical>
-    <v-stepper-step :complete="currentStep > 1" step="1">
-      Step one
-      <template v-slot:subtitle>
-        Personal details
-      </template>
-    </v-stepper-step>
-
-    <v-stepper-content step="1">
-      <!-- Content for step 1 -->
-      <v-btn color="primary" @click="currentStep = 2">
-        Continue
-      </v-btn>
-    </v-stepper-content>
-
-    <v-stepper-step :complete="currentStep > 2" step="2">
-      Step two
-      <template v-slot:subtitle>
-        Additional information
-      </template>
-    </v-stepper-step>
-
-    <v-stepper-content step="2">
-      <!-- Content for step 2 -->
-      <v-btn color="primary" @click="currentStep = 3">
-        Continue
-      </v-btn>
-      <v-btn text @click="currentStep = 1">
-        Back
-      </v-btn>
-    </v-stepper-content>
-
-    <v-stepper-step :complete="currentStep > 3" step="3">
-      Step three
-      <template v-slot:subtitle>
-        Review and submit
-      </template>
-    </v-stepper-step>
-
-    <v-stepper-content step="3">
-      <!-- Content for step 3 -->
-      <v-btn color="primary" @click="onClickFinish">
-        Finish
-      </v-btn>
-      <v-btn text @click="currentStep = 2">
-        Back
-      </v-btn>
-    </v-stepper-content>
-  </v-stepper>
+  <v-container :class="(currentStep === 4) ? '' : 'fill-height'" fluid>
+    <v-row align="center" justify="center">
+      <v-col :md="(currentStep === 4) ? '' : '7'">
+        <v-stepper v-model="currentStep" @update:model-value="changeEtape()" alt-labels>
+          <v-stepper-header>
+            <v-stepper-item
+              :color="currentStep >= 0 ? '#295494' : ''"
+              :complete="currentStep > 0"
+              :editable="currentStep > 0"
+              icon="mdi-numeric-1"
+              title="Séléction du RCR"
+              :subtitle="demande ? 'Demande n°'+demande.id : 'Demande'"
+            >
+            </v-stepper-item>
+            <v-divider></v-divider>
+            <v-stepper-item
+              :color="currentStep >= 1 ? '#295494' : ''"
+              :complete="currentStep > 1"
+              :editable="currentStep > 1"
+              icon="mdi-numeric-2"
+              title="PPN/RCR/EPN"
+              subtitle="fichier à récupérer"
+            >
+            </v-stepper-item>
+            <v-divider></v-divider>
+            <v-stepper-item
+              :color="currentStep >= 2 ? '#295494' : ''"
+              :complete="currentStep > 2"
+              :editable="currentStep > 2"
+              icon="mdi-numeric-3"
+              title="Choix traitement"
+              :subtitle="typeTraitementSelected ? typeTraitementSelected.libelle : 'à effectuer'"
+            >
+            </v-stepper-item>
+            <v-divider></v-divider>
+            <v-stepper-item
+              :color="currentStep >= 3 ? '#295494' : ''"
+              :complete="currentStep > 3"
+              :editable="currentStep > 3"
+              icon="mdi-numeric-4"
+              title="Envoi"
+              subtitle="du fichier"
+            >
+            </v-stepper-item>
+            <v-divider></v-divider>
+            <v-stepper-item
+              :color="currentStep >= 4 ? '#295494' : ''"
+              icon="mdi-numeric-5"
+              title="Simulation"
+            >
+            </v-stepper-item>
+          </v-stepper-header>
+
+          <v-stepper-window>
+            <v-stepper-window-item>
+              <rcr v-model="rcrSelected" :is-loading="isLoading"></rcr>
+              <v-container class="d-flex justify-space-between">
+                <v-spacer></v-spacer>
+                <v-btn
+                  :disabled="!rcrSelected"
+                  @click="createDemande"
+                >
+                  Valider
+                </v-btn>
+              </v-container>
+            </v-stepper-window-item>
+            <v-stepper-window-item>
+              <select-file v-if="!isLoaded" v-model="fileInitSelected" :is-loading="isLoading"
+                           @deleted="deleteDemande()"></select-file>
+              <download-file v-else :file-link="fileLink" :file-name="fileName" @clicked="downloaded">Récupération du
+                fichier de correspondances PPN / EPN
+              </download-file>
+              <v-alert
+                v-if="alertMessage"
+                :type="alertType"
+
+              >
+                <span v-html="alertMessage"></span>
+              </v-alert>
+              <v-container class="d-flex justify-space-between">
+                <v-btn @click="prev">
+                  précédent
+                </v-btn>
+                <v-btn
+                  :disabled="!fileInitSelected"
+                  @click="uploadFileInit()"
+                  v-if="!isLoaded"
+                >
+                  Envoyé
+                </v-btn>
+                <v-btn
+                  v-else
+                  :disabled="!isDownloaded"
+                  @click="next()"
+                >
+                  Suivant
+                </v-btn>
+              </v-container>
+            </v-stepper-window-item>
+            <v-stepper-window-item>
+              <type-traitement v-model="typeTraitementSelected" :is-loading="isLoading"
+                               @clicked="modifierTypeTraitementModifDemande()"></type-traitement>
+              <v-container class="d-flex justify-space-between">
+                <v-btn @click="prev">
+                  précédent
+                </v-btn>
+              </v-container>
+            </v-stepper-window-item>
+            <v-stepper-window-item>
+              <select-file v-model="fileFinalSelected" :is-loading="isLoading" @deleted="deleteDemande()">Charger le
+                fichier des exemplaires à modifier
+              </select-file>
+              <v-alert
+                v-if="alertMessage"
+                :type="alertType"
+              >
+                <span v-html="alertMessage"></span>
+              </v-alert>
+              <v-container class="d-flex justify-space-between">
+                <v-btn @click="prev">
+                  précédent
+                </v-btn>
+                <v-btn
+                  :disabled="!fileFinalSelected"
+                  @click="uploadFileFinal()"
+                >
+                  Lancer le traitement en simulation
+                </v-btn>
+              </v-container>
+            </v-stepper-window-item>
+            <v-stepper-window-item>
+              <simulation :demande="demande" label-before="Avant traitement" label-after="Après traitement"
+                          @deleted="deleteDemande()"></simulation>
+              <v-container class="d-flex justify-space-between">
+                <v-btn @click="prev">
+                  précédent
+                </v-btn>
+                <v-btn large @click="dialog = true"
+                       aria-label="Lancer le traitement en production">Lancer le traitement en production
+                </v-btn>
+              </v-container>
+            </v-stepper-window-item>
+          </v-stepper-window>
+        </v-stepper>
+      </v-col>
+    </v-row>
+  </v-container>
+  <dialog-lancer-traitement v-model="dialog" :is-loading="isLoading" route="/modification-tableau" @launch="launchDemande()"></dialog-lancer-traitement>
+  <dialog-suppression v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {onMounted, ref} from 'vue';
+import router from '@/router';
+import demandesService from '@/service/DemandesService';
+import Rcr from '@/components/Rcr.vue';
+import SelectFile from '@/components/SelectFile.vue';
+import DownloadFile from '@/components/Modif/DownloadFile.vue';
+import TypeTraitement from '@/components/Modif/TypeTraitement.vue';
+import Simulation from "@/components/Simulation.vue";
+import DialogLancerTraitement from '@/components/DialogLancerTraitement.vue';
+import DialogSuppression from '@/components/DialogSuppression.vue';
+
+
+const currentStep = ref(0);
+const demande = ref();
+const rcrSelected = ref();
+const fileInitSelected = ref();
+const fileFinalSelected = ref();
+const alertMessage = ref();
+const alertType = ref();
+const isLoaded = ref(false);
+const isLoading = ref(false);
+const isDownloaded = ref(false);
+const dialog = ref(false);
+const suppDialog = ref(false);
+const fileLink = ref('');
+const fileName = ref('');
+const typeTraitementSelected = ref();
+
+const emits = defineEmits(['backendError']);
+const props = defineProps({id: {type: String}});
+
+
+onMounted(() => {
+  if (props.id) {
+    demandesService.getDemande(props.id, "MODIF")
+      .then(response => {
+        console.log(response.data);
+        demande.value = response.data;
+        switch (demande.value.etatDemande) {
+          case 'En préparation':
+            currentStep.value = 1;
+            rcrSelected.value = demande.value.rcr;
+            break;
+          case 'Préparée':
+            currentStep.value = 1;
+            rcrSelected.value = demande.value.rcr;
+            break;
+          case 'A compléter':
+            rcrSelected.value = demande.value.rcr;
+            if (demande.value.traitement) {
+              typeTraitementSelected.value = {
+                id: -1,
+                libelle: demande.value.traitement
+              };
+              currentStep.value = 3;
+            } else {
+              currentStep.value = 2;
+            }
+            break;
+          case 'En simulation':
+            currentStep.value = 4;
+            rcrSelected.value = demande.value.rcr;
+            typeTraitementSelected.value = {
+              id: -1,
+              libelle: demande.value.traitement
+            };
+            break;
+        }
+      }).catch(() => {
+      router.replace("/modification");
+    })
+  }
+})
+
+function createDemande() {
+  if (demande.value && (rcrSelected.value === demande.value.rcr)) {
+    next();
+  } else if (demande.value) {
+    isLoading.value = true;
+    demandesService.modifierRcrDemande(demande.value.id, rcrSelected.value, 'MODIF')
+      .then(response => {
+        demande.value = response.data;
+        next();
+      }).catch(err => {
+      emits('backendError', err);
+    }).finally(() => {
+      isLoading.value = false;
+    });
+  } else {
+    isLoading.value = true;
+    demandesService.creerDemande(rcrSelected.value, 'MODIF')
+      .then(response => {
+        demande.value = response.data;
+        next();
+      }).catch(err => {
+      emits('backendError', err);
+    }).finally(() => {
+      isLoading.value = false;
+    });
+  }
+}
+
+function uploadFileInit() {
+  alertMessage.value = '';
+  alertType.value = 'success';
+  isLoading.value = true;
+  demandesService.uploadDemande(demande.value.id, fileInitSelected.value, 'MODIF')
+    .then(() => {
+      alertMessage.value = "Fichier envoyé";
+      isLoaded.value = true;
+      demandesService.getFilePreparer(demande.value.id, 'MODIF')
+        .then(response => {
+          let blob = new Blob([response.data], {type: 'application/csv'});
+          fileLink.value = window.URL.createObjectURL(blob);
+          fileName.value = `fichier_demande_${demande.value.id}.csv`;
+        })
+    })
+    .catch(err => {
+      alertMessage.value = err.response.data.message;
+      alertType.value = 'error';
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
+}
+
+function uploadFileFinal() {
+  alertMessage.value = '';
+  alertType.value = 'success';
+  isLoading.value = true;
+  demandesService.uploadDemande(demande.value.id, fileFinalSelected.value, 'MODIF')
+    .then(() => {
+      alertMessage.value = "Fichier envoyé";
+      isLoaded.value = true;
+      next();
+    })
+    .catch(err => {
+      alertMessage.value = err.response.data.message;
+      alertType.value = 'error';
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
+}
+
+function modifierTypeTraitementModifDemande() {
+  isLoading.value = true;
+  demandesService.modifierTypeTraitementModifDemande(demande.value.id, typeTraitementSelected.value.id)
+    .then(response => {
+      demande.value = response.data;
+      next()
+    }).catch(err => {
+    emits('backendError', err);
+  }).finally(() => {
+    isLoading.value = false;
+  });
+}
+
+function launchDemande(){
+  isLoading.value = true;
+  demandesService.lancerDemande(demande.value.id,'MODIF')
+    .then(response => {
+      demande.value = response.data;
+    }).finally(() => {
+    isLoading.value = false;
+  })
+}
+
+function downloaded() {
+  isDownloaded.value = true;
+}
+
+function deleteDemande() {
+  suppDialog.value = true;
+}
+
+function next() {
+  currentStep.value++;
+  raz();
+}
+
+function prev() {
+  currentStep.value--;
+  raz();
+  changeEtape();
+}
+
+function changeEtape() {
+  if ((currentStep.value + 1) <= 2) { //Changement d'etat pour le chargement du fichier car le back est perdu sinon
+    demandesService.choixEtape(demande.value.id, 2, 'MODIF')
+      .then(response => {
+        demande.value = response.data;
+      });
+  }
+  if ((currentStep.value + 1) === 4) {
+    demandesService.choixEtape(demande.value.id, 4, 'MODIF')
+      .then(response => {
+        demande.value = response.data;
+      });
+  }
+}
 
-const currentStep = ref(1);
-const finished = ref(false);
+function raz() {
+  isLoaded.value = false;
+  isLoading.value = false;
+  isDownloaded.value = false;
+  alertMessage.value = '';
+  alertType.value = 'success';
+}
 
-const onClickFinish = () => {
-  finished.value = true;
-  alert('Finished');
-};
 </script>
diff --git a/src/views/Modification/ModifTable.vue b/src/views/Modification/ModifTable.vue
index 358165e..0a46444 100644
--- a/src/views/Modification/ModifTable.vue
+++ b/src/views/Modification/ModifTable.vue
@@ -70,22 +70,22 @@
     </template>
 
     <template v-slot:item="{ item, expand }">
-      <tr @click="onRowClick" @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
+      <tr @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
           :class="{ 'highlighted-row': item.highlighted }" style="cursor: pointer;">
         <td>
           <v-btn icon="mdi-chevron-up" @click="item.expanded = !item.expanded" variant="text">
             <v-icon>{{ item.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </v-btn>
         </td>
-        <td class="text-right">{{ item.id }}</td>
-        <td class="text-right">{{ item.dateCreation }}</td>
-        <td class="text-right">{{ item.dateModification }}</td>
-        <td class="text-right">{{ item.iln }}</td>
-        <td class="text-right">{{ item.rcr }}</td>
-        <td class="text-right">{{ item.zone }}</td>
-        <td class="text-right">{{ item.traitement }}</td>
-        <td class="text-right">{{ item.etatDemande }}</td>
-        <td class="text-right">
+        <td @click="onRowClick(item)" class="text-right">{{ item.id }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateCreation }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateModification }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.iln }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.rcr }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.zone }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.traitement }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.etatDemande }}</td>
+        <td @click="onRowClick(item)" class="text-right">
           <v-progress-linear v-model="item.pourcentageProgressionTraitement" :height="18" :striped="false"
                              color="grey-lighten-1" style="border: 1px solid grey; font-weight: bolder">
             {{ item.pourcentageProgressionTraitement }} %
@@ -123,8 +123,8 @@
         </td>
         <td class="text-right">
           <!-- Colonne Action -->
-          <v-icon v-if="canArchive(item)" @click="archiverDemande(item)">mdi-archive</v-icon>
-          <v-icon v-else-if="canCancel(item)" @click="supprimerDemande(item)">mdi-delete</v-icon>
+          <v-btn v-if="canArchive(item)" variant="plain" icon="mdi-archive" @click="archiverDemande(item)"></v-btn>
+          <v-btn v-else-if="canCancel(item)" variant="plain" icon="mdi-delete" @click="supprimerDemande(item)"></v-btn>
         </td>
       </tr>
       <tr v-if="item.expanded">
@@ -135,11 +135,14 @@
       </tr>
     </template>
   </v-data-table>
+  <dialog-suppression v-model="suppDialog" :demande="suppDemande" @supp="loadItems('MODIF', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
+import router from "@/router";
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const service = DemandesService;
 
@@ -216,6 +219,8 @@ const headingsDemandes = ref([
 const contentsDemandesFromServer = ref([]);
 const contentsDemandesFrontFiltered = ref([]);
 const totalItemsFound = ref(0);
+const suppDialog = ref(false);
+const suppDemande = ref({});
 
 //Progress bar displayed while fetching data
 const isDataLoaded = ref(false);
@@ -312,16 +317,9 @@ function canCancel(item) {
 }
 
 //Suppression d'une demande
-async function supprimerDemande(item) {
-  try {
-    await service.supprimerDemande('MODIF', item.id);
-    // Mettre à jour les données après la suppression réussie
-    await loadItems('MODIF');
-    emit('backendSuccess');
-  } catch (error) {
-    console.error(error);
-    emit('backendError', error);
-  }
+function supprimerDemande(item) {
+  suppDialog.value = true;
+  suppDemande.value = item;
 }
 
 //Archivage d'une demande
@@ -360,8 +358,12 @@ function onMouseLeaveRow(item) {
 }
 
 function onRowClick(item) {
-  console.log('Ligne cliquée avec la demande :', item.id);
+  console.log('Ligne cliquée avec la demande :', item);
   // Faites quelque chose lorsque la ligne est cliquée, par exemple naviguer vers une page de détails de la demande
+  if(item.etatDemande === 'En préparation' || item.etatDemande === 'Préparée' || item.etatDemande === 'A compléter' || item.etatDemande === 'En simulation' ){
+    router.push('/modification/'+item.id);
+  }
+
 }
 
 </script>
diff --git a/src/views/Recouvrement/RecouvSteps.vue b/src/views/Recouvrement/RecouvSteps.vue
index 54e1e98..d1ec8ff 100644
--- a/src/views/Recouvrement/RecouvSteps.vue
+++ b/src/views/Recouvrement/RecouvSteps.vue
@@ -38,7 +38,7 @@
               </v-container>
             </v-stepper-window-item>
             <v-stepper-window-item>
-              <upload-file v-model="fileSelected" :is-loading="isLoading" @deleted="deleteDemande()">Charger le fichier du taux de recouvrement</upload-file>
+              <select-file v-model="fileSelected" :is-loading="isLoading" @deleted="deleteDemande()">Charger le fichier du taux de recouvrement</select-file>
               <v-alert
                 v-if="alertMessage"
                 :type="alertType"
@@ -82,14 +82,16 @@
       </v-col>
     </v-row>
   </v-container>
+  <dialog-suppression v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
 <script setup>
 import Rcr from '@/components/Rcr.vue';
-import UploadFile from '@/components/UploadFile.vue';
+import SelectFile from '@/components/SelectFile.vue';
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from '@/router';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const props = defineProps({id : {type: String}});
 const emits = defineEmits(['backendError']);
@@ -101,6 +103,8 @@ const alertMessage = ref();
 const alertType = ref();
 const isLoading = ref(false);
 const dialog = ref(false);
+const suppDialog = ref(false);
+
 
 
 onMounted(() => {
@@ -159,12 +163,7 @@ function launchTraitement() {
 }
 
 function deleteDemande(){
-  DemandesService.deleteDemande(demande.value.id, 'RECOUV')
-    .then(()=>{
-      router.push('/accueil');
-    }).catch(err => {
-    emits('backendError', err);
-  })
+  suppDialog.value = true;
 }
 
 function next() {
diff --git a/src/views/Recouvrement/RecouvTable.vue b/src/views/Recouvrement/RecouvTable.vue
index 8394e71..89390d4 100644
--- a/src/views/Recouvrement/RecouvTable.vue
+++ b/src/views/Recouvrement/RecouvTable.vue
@@ -75,21 +75,21 @@
     </template>
 
     <template v-slot:item="{ item, expand }">
-      <tr @click="onRowClick(item)" @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
+      <tr @mouseover="onMouseOverRow(item)" @mouseleave="onMouseLeaveRow(item)"
           :class="{ 'highlighted-row': item.highlighted }" style="cursor: pointer;">
         <td>
           <v-btn icon="mdi-chevron-up" @click="item.expanded = !item.expanded" variant="text">
             <v-icon>{{ item.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
           </v-btn>
         </td>
-        <td class="text-right">{{ item.id }}</td>
-        <td class="text-right">{{ item.dateCreation }}</td>
-        <td class="text-right">{{ item.dateModification }}</td>
-        <td class="text-right">{{ item.iln }}</td>
-        <td class="text-right">{{ item.rcr }}</td>
-        <td class="text-right">{{ item.indexRecherche }}</td>
-        <td class="text-right">{{ item.etatDemande }}</td>
-        <td class="text-right">
+        <td @click="onRowClick(item)" class="text-right">{{ item.id }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateCreation }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.dateModification }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.iln }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.rcr }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.indexRecherche }}</td>
+        <td @click="onRowClick(item)" class="text-right">{{ item.etatDemande }}</td>
+        <td @click="onRowClick(item)" class="text-right">
           <v-progress-linear v-model="item.pourcentageProgressionTraitement" :height="18" :striped="false"
                              color="grey-lighten-1" style="border: 1px solid grey; font-weight: bolder">
             {{ item.pourcentageProgressionTraitement }} %
@@ -113,8 +113,8 @@
         </td>
         <td class="text-right">
           <!-- Colonne Action -->
-          <v-icon v-if="canArchive(item)" @click="archiverDemande(item)">mdi-archive</v-icon>
-          <v-icon v-else-if="canCancel(item)" @click="supprimerDemande(item)">mdi-delete</v-icon>
+          <v-btn v-if="canArchive(item)" variant="plain" icon="mdi-archive" @click="archiverDemande(item)"></v-btn>
+          <v-btn v-else-if="canCancel(item)" variant="plain" icon="mdi-delete" @click="supprimerDemande(item)"></v-btn>
         </td>
       </tr>
       <tr v-if="item.expanded">
@@ -134,12 +134,14 @@
       </tr>
     </template>
   </v-data-table>
+  <dialog-suppression v-model="suppDialog" :demande="suppDemande" @supp="loadItems('RECOUV', archiveFalseActiveTrue)"></dialog-suppression>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
 import DemandesService from '@/service/DemandesService';
 import router from '@/router';
+import DialogSuppression from '@/components/DialogSuppression.vue';
 
 const service = DemandesService;
 
@@ -211,6 +213,8 @@ const headingsDemandes = ref([
 const contentsDemandesFromServer = ref([]);
 const contentsDemandesFrontFiltered = ref([]);
 const totalItemsFound = ref(0);
+const suppDialog = ref(false);
+const suppDemande = ref({});
 
 //Progress bar displayed while fetching data
 const isDataLoaded = ref(false);
@@ -306,16 +310,9 @@ function canCancel(item) {
 }
 
 //Suppression d'une demande
-async function supprimerDemande(item) {
-  try {
-    await service.supprimerDemande('EXEMP', item.id);
-    // Mettre à jour les données après la suppression réussie
-    await loadItems('EXEMP');
-    emit('backendSuccess');
-  } catch (error) {
-    console.error(error);
-    emit('backendError', error);
-  }
+function supprimerDemande(item) {
+  suppDialog.value = true;
+  suppDemande.value = item;
 }
 
 //Archivage d'une demande