diff --git a/src/App.vue b/src/App.vue
index 0108a96..e42face 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,40 +1,46 @@
 <template>
-  <v-app class="h-100 overflow-hidden">
-    <maintenance/>
-    <nav>
-      <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
-      <Navbar :drawer="drawer" @close="drawer = false"/>
-    </nav>
-    <v-main class="d-flex flex-column overflow-auto">
-      <div class="error-stack">
-        <v-alert
-          v-for="(error, index) in errorStack"
-          :key="index"
-          color="error"
-          icon="$error"
-          :title="error.message"
-          variant="flat"
-          border="start"
-          class="mb-2 custom-alert"
-          closable
-          @click:close="closeAlert(index)"
-        >
-          {{ error.description }}
-        </v-alert>
-      </div>
-      <div style="flex-grow: 10;">
-        <router-view v-slot="{ Component }">
-          <component
-            :is="Component"
-            @backendError="addError"
-            @backendSuccess="clearErrors"
-          />
-        </router-view>
-      </div>
-      <InfoAppBanner v-if="!authenticated"/>
-      <Footer style="flex-basis: 0;"/>
-    </v-main>
-  </v-app>
+    <v-app class="h-100 overflow-hidden">
+      <maintenance/>
+      <nav>
+        <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
+        <Navbar :drawer="drawer" @close="drawer = false" />
+      </nav>
+      <v-main class="d-flex flex-column overflow-auto">
+        <div class="notificationContainer">
+          <v-slide-y-transition group>
+            <v-alert
+              class="alertMessage"
+              v-for="notification in errorsNetworkList"
+              :key="notification[0]"
+            >
+              <p class="mb-4">{{ notification[1].message }}</p>
+              <p class="mb-4">{{ notification[1].description }}</p>
+              <div style="text-align: right"><v-btn @click="removeNotification(notification[0])" value="Fermer le message d'erreur">FERMER</v-btn></div>
+            </v-alert>
+            <v-alert
+              class="alertMessage"
+              v-for="notification in errorsList"
+              :key="notification[0]"
+            >
+              <p class="mb-4">{{ notification[1].message }}</p>
+              <p class="mb-4">{{ notification[1].description }}</p>
+              <div style="text-align: right"><v-btn @click="removeNotification(notification[0])" value="Fermer le message d'erreur">FERMER</v-btn></div>
+            </v-alert>
+          </v-slide-y-transition>
+        </div>
+        <div style="flex-grow: 10;">
+          <router-view v-slot="{ Component }">
+            <component
+              :is="Component"
+              @backendError="addError"
+              @backendSuccess="clearErrors"
+            />
+          </router-view>
+        </div>
+        <InfoAppBanner v-if="!authenticated" />
+        <Footer style="flex-basis: 0;" />
+      </v-main>
+    </v-app>
 </template>
 
 <script setup>
@@ -49,9 +55,16 @@ import { useAuthStore } from '@/store/authStore';
 import { useRoute } from 'vue-router';
 import Maintenance from '@/components/Structure/Maintenance.vue';
 
-const errorStack = ref([]);
 const drawer = ref(false);
 
+const alertType = ref(null)
+
+const errorsList = ref(new Map())
+
+const errorsNetworkList = ref(new Map())
+
+let isErrorNetwork = false
+
 const authStore = useAuthStore();
 
 const authenticated = computed(() => {
@@ -68,24 +81,28 @@ watch(
         message: 'Erreur réseau',
         description: 'Service indisponible : merci de réessayer ultérieurement.'
       };
-      errorStack.value.push(newError);
+      const notificationId = self.crypto.randomUUID()
+      errorsList.value.set(notificationId, newError)
     }
   },
   { immediate: true } // Option pour exécuter le watcher dès le montage du composant
 );
 
 function addError(error) {
+  const notificationId = self.crypto.randomUUID()
+  alertType.value = "error"
   let newError = {
     message: 'Erreur',
     description: ''
-  };
-  if (!error.response) {
-    newError.message = 'Erreur réseau : ' + error.code;
-    newError.description = 'Service indisponible : merci de réessayer ultérieurement.';
-  } else {
-    if (error.response.status === HttpStatusCode.NotFound) {
-      newError.message = 'Impossible de récupérer les données';
-      newError.description = 'Vérifiez que vos urls d\'appel au serveur sont correctes ainsi que vos clés d\'autorisation ' + '(' + error.config.url + ')';
+  }
+  if(!error.response){
+    isErrorNetwork = true
+    newError.message = 'Erreur réseau : ' + error.code
+    newError.description = 'Service indisponible : merci de réessayer ultérieurement.'
+  }else{
+    if (error.response.status === HttpStatusCode.NotFound){
+      newError.message = 'Impossible de récupérer les données'
+      newError.description = 'Vérifiez que vos urls d\'appel au serveur sont correctes ainsi que vos clés d\'autorisation ' + '(' + error.config.url + ')'
     }
     if (error.response.status === HttpStatusCode.Forbidden) {
       newError.message = 'Accès rejeté';
@@ -99,8 +116,7 @@ function addError(error) {
       newError.message = 'Accès rejeté';
       newError.description = 'Mauvaise requête : contrôlez les paramètres de votre requête et observez les logs du serveur pour plus d\'informations ' + '(' + error.config.url + ')';
     }
-    if (error.response.status.toString()
-      .startsWith('5')) {
+    if (error.response.status.toString().startsWith('5')) {
       newError.message = 'Problème de disponibilité du serveur';
       newError.description = 'Retentez plus tard. Vérifiez la disponibilité de la base de donnée (Etat des serveurs) en cliquant en bas à gauche sur l\'icone de paramètres. Si le problème perdure, contactez l\'assistance';
     }
@@ -114,15 +130,7 @@ function addError(error) {
   if (error.request.url) {
     newError.description = 'Problème de disponibilité du fichier demandé';
   }
-  errorStack.value.push(newError);
-}
-
-function clearErrors() {
-  errorStack.value = [];
-}
-
-function closeAlert(index) {
-  errorStack.value.splice(index, 1);
+  addNotification(notificationId, newError)
 }
 
 function onLogout() {
@@ -132,33 +140,53 @@ function onLogout() {
 function toggleDrawer() {
   drawer.value = !drawer.value;
 }
+
+function addNotification(notificationId, message) {
+  if (isErrorNetwork) {
+    errorsNetworkList.value.set(notificationId, message)
+    setTimeout(() => removeNotification(notificationId), 9000) // impose un timeout au v-alert pour que les alertes de type ERR_NETWORK ne surchargent pas la Map errorsList
+    isErrorNetwork = false;
+  } else {
+    errorsList.value.set(notificationId, message)
+  }
+}
+
+function removeNotification(notificationId) {
+  if (notificationId != null) {
+    errorsList.value.delete(notificationId)
+    errorsNetworkList.value.delete(notificationId)
+  }
+}
+
+function clearErrors() {
+  errorsNetworkList.value.clear();
+}
+
 </script>
 
 <style>
 /*Declaré en global*/
 
-
+/* Style des card contenant les choix proposés aux utilisateurs et utilisatrices */
 .custom-card-title {
   background-color: v-bind('$vuetify.theme.current.colors.primary');
   color: v-bind('$vuetify.theme.current.colors.textColor');
 }
 
-.error-stack {
+/* Style du container comprenant les messages d'erreur */
+.notificationContainer {
   position: fixed;
-  top: 64px; /* Ajustez cette valeur en fonction de la hauteur de votre barre de navigation */
-  left: 0;
-  right: 0;
-  z-index: 100;
-  padding: 10px;
+  top: 80px;
+  right: 10px;
+  display: grid;
+  grid-gap: 0.5em;
+  z-index: 99;
 }
 
-.custom-alert {
-  background-color: #FFEBEE !important; /* Fond rouge clair */
-  color: #B71C1C !important; /* Texte rouge foncé */
-  opacity: 1 !important; /* Assurez-vous que l'alerte est complètement opaque */
+/* Permet d'avoir le bon formatage du message d'erreur sur la page de connexion */
+.alertMessage {
+  background-color: rgb(var(--v-theme-error));
+  color: white;
 }
 
-.custom-alert :deep(.v-alert__close) {
-  color: #B71C1C !important; /* Assure que le bouton de fermeture est de la même couleur que le texte */
-}
 </style>
diff --git a/src/components/MenuDownloadFile.vue b/src/components/MenuDownloadFile.vue
index 17a7d3f..ee0ae7e 100644
--- a/src/components/MenuDownloadFile.vue
+++ b/src/components/MenuDownloadFile.vue
@@ -101,8 +101,8 @@ const isEnrichiAvailable = computed(() =>
   (idEtatCurrentDemande.value >= 4 && props.demande.type === 'MODIF') ||
   (idEtatCurrentDemande.value >= 5 && props.demande.type === 'SUPP')
 )
-const isResultatAvailable = computed(() => idEtatCurrentDemande.value >= 7 && idEtatCurrentDemande.value !== 8)
-const isSauvegardeAvailable = computed(() => idEtatCurrentDemande.value >= 7)
+const isResultatAvailable = computed(() => idEtatCurrentDemande.value >= 7 && idEtatCurrentDemande.value !== 8 && props.demande.pourcentageProgressionTraitement > 0)
+const isSauvegardeAvailable = computed(() => idEtatCurrentDemande.value >= 7  && props.demande.pourcentageProgressionTraitement > 0)
 
 onMounted(() => {
   itemService.getEtatsDemande()
diff --git a/src/components/Supp/BtnStop.vue b/src/components/Supp/BtnStop.vue
new file mode 100644
index 0000000..6d866ff
--- /dev/null
+++ b/src/components/Supp/BtnStop.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-btn icon="mdi-stop"  variant="plain" @click="click">
+  </v-btn>
+  <dialog-confirmation-stop v-model="dialog" :id="id" @stop="emits('stop')">
+  </dialog-confirmation-stop>
+</template>
+<script setup>
+import DialogConfirmationStop from "@/components/Supp/DialogConfirmationStop.vue";
+import {ref} from "vue";
+
+const emits = defineEmits(['stop'])
+const props = defineProps({
+  id:{
+    required:true,
+    type:Number
+  }
+})
+const dialog = ref(false);
+
+function click() {
+  dialog.value = true
+}
+
+
+</script>
diff --git a/src/components/Supp/DialogConfirmationStop.vue b/src/components/Supp/DialogConfirmationStop.vue
new file mode 100644
index 0000000..0f8c046
--- /dev/null
+++ b/src/components/Supp/DialogConfirmationStop.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-dialog v-model="dialog" width="500">
+    <v-card>
+      <v-card-title>Confirmation</v-card-title>
+      <v-card-text>
+        Voulez vous vraiment stopper le traitement sur la demande N°{{id}} ?
+      </v-card-text>
+      <v-card-actions>
+        <v-btn @click="dialog=false">Refuser</v-btn>
+        <v-btn @click="stopDemande">Confirmer</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script setup>
+import itemService from "@/service/ItemService";
+
+const emits = defineEmits(['stop'])
+const dialog = defineModel();
+const props = defineProps({
+  id:{
+    required:true,
+    type:Number
+  }
+})
+
+function stopDemande(){
+  itemService.stopDemande(props.id).finally(() => {
+    dialog.value = false;
+    emits('stop');
+  });
+}
+</script>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 5d0ef04..fffd9cf 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -44,7 +44,8 @@ const itemLightTheme = {
     disabled: '#808080',
     archived: '#795548',
     saisised: '#333333',
-    waited: '#EC6839'
+    waited: '#FFC400',
+    stopped: '#EC6839'
   },
   variables: {
     'border-color': '#000000',
@@ -86,7 +87,8 @@ const itemDarkTheme = {
     disabled: '#808080',
     archived: '#795548',
     saisised: '#333333',
-    waited: '#EC6839'
+    waited: '#FFC400',
+    stopped: '#EC6839'
   },
   variables: {
     'border-color': '#FFFFFF',
@@ -129,6 +131,7 @@ const itemRngTheme = {
     archived: generateRandomHexColor(),
     saisised: generateRandomHexColor(),
     waited: generateRandomHexColor(),
+    stopped: generateRandomHexColor()
   }
 }
 
diff --git a/src/service/ItemService.js b/src/service/ItemService.js
index 511018d..4635ebd 100644
--- a/src/service/ItemService.js
+++ b/src/service/ItemService.js
@@ -23,7 +23,6 @@ export class ItemService {
   }
 
   login(login, password) {
-    const url = import.meta.env.VITE_API_URL + `signin`;
     //console.info('appel:' + url);
 
     return this.client.post(`signin`, {username: login, password: password})
@@ -167,6 +166,10 @@ export class ItemService {
       return response.data
     })
   }
+
+  stopDemande(id) {
+    return this.client.patch('stopDemandeSupp/' + id);
+  }
 }
 
 export default new ItemService()
diff --git a/src/views/Recouvrement/RecouvSteps.vue b/src/views/Recouvrement/RecouvSteps.vue
index 8eecac5..5cb5392 100644
--- a/src/views/Recouvrement/RecouvSteps.vue
+++ b/src/views/Recouvrement/RecouvSteps.vue
@@ -63,28 +63,17 @@
               </v-stepper-window-item>
             </v-stepper-window>
           </v-stepper>
-          <v-dialog
-            v-model="dialog"
-            width="500"
-          >
-            <v-card>
-              <v-card-title class="headline" primary-title>Traitement validé</v-card-title>
-              <v-card-text>Votre demande est en cours de traitement.<br/>Un mail vous sera envoyé quand celui-ci sera
-                terminé.
-                <br>Vous pouvez retrouver l'ensemble de vos demandes sur votre tableau de bord ITEM. Rubrique "Gérer mes
-                taux de recouvrement".
-              </v-card-text>
-              <v-divider></v-divider>
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="primary" @click="router.push('recouvrement-tableau')" aria-label="OK">OK</v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
         </v-col>
       </v-row>
     </v-col>
   </v-container>
+  <dialog-lancer-traitement v-model="dialog"
+                            :is-loading="isLoading"
+                            rubrique="Gérer mes recouvrements"
+                            route="recouvrement-tableau"
+                            body="Voulez-vous démarrer le traitement de votre demande de recouvrement ?"
+                            @launch="isLoading = false">
+  </dialog-lancer-traitement>
   <dialog-suppression v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
@@ -96,6 +85,7 @@ import itemService from '@/service/ItemService';
 import router from '@/router';
 import DialogSuppression from '@/components/Dialog/DialogSuppression.vue';
 import RecapDemande from '@/components/RecapDemande.vue';
+import DialogLancerTraitement from '@/components/Dialog/DialogLancerTraitement.vue'
 
 const props = defineProps({id : {type: String}});
 const emits = defineEmits(['backendError']);
diff --git a/src/views/Suppression/SuppSteps.vue b/src/views/Suppression/SuppSteps.vue
index a8275f8..d4e236a 100644
--- a/src/views/Suppression/SuppSteps.vue
+++ b/src/views/Suppression/SuppSteps.vue
@@ -140,7 +140,12 @@
       </v-row>
     </v-col>
   </v-container>
-  <dialog-lancer-traitement v-model="dialog" :is-loading="isLoading" rubrique="Gérer mes suppressions" route="suppression-tableau" body="Le traitement de suppression  des exemplaires en base de production est irréversible." @launch="launchDemande()"></dialog-lancer-traitement>
+  <dialog-lancer-traitement v-model="dialog"
+                            :is-loading="isLoading"
+                            rubrique="Gérer mes suppressions"
+                            route="suppression-tableau"
+                            body="Le traitement de suppression  des exemplaires en base de production est irréversible."
+                            @launch="launchDemande()"></dialog-lancer-traitement>
   <dialog-suppression v-model="suppDialog" :demande="demande" return-to-accueil></dialog-suppression>
 </template>
 
diff --git a/src/views/Suppression/SuppTable.vue b/src/views/Suppression/SuppTable.vue
index 13e6f8b..e67b014 100644
--- a/src/views/Suppression/SuppTable.vue
+++ b/src/views/Suppression/SuppTable.vue
@@ -91,6 +91,7 @@
           <v-chip color="success" variant="flat" v-else-if="item.etatDemande === 'Terminé'">Terminé</v-chip>
           <v-chip color="archived" variant="flat" v-else-if="item.etatDemande === 'Archivé'">Archivé</v-chip>
           <v-chip color="error" variant="flat" v-else-if="item.etatDemande === 'En erreur'">En erreur</v-chip>
+          <v-chip color="stopped" variant="flat" v-else-if="item.etatDemande === 'Annulé'">Annulé</v-chip>
           <v-chip color="info" variant="flat" v-else>{{ item.etatDemande }}</v-chip>
           <!-- Cas : ne correspont à aucun cas -->
         </td>
@@ -106,6 +107,7 @@
         </td>
         <td class="text-center">
           <!-- Colonne Action -->
+          <btn-stop v-if="canStop(item)" :id="item.id" @stop="loadItems('SUPP', isArchiveDemandesDisplayed)"></btn-stop>
           <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>
@@ -125,6 +127,7 @@ import DialogCommentaire from '@/components/Dialog/DialogCommentaire.vue';
 import MenuDownloadFile from '@/components/MenuDownloadFile.vue';
 import moment from 'moment/moment';
 import {useAuthStore} from "@/store/authStore";
+import BtnStop from "@/components/Supp/BtnStop.vue";
 
 //Emit
 const emit = defineEmits(['backendError', 'backendSuccess']);
@@ -230,7 +233,8 @@ const listStatut = [
   'En attente',
   'En cours de traitement',
   'Terminé',
-  'En erreur'
+  'En erreur',
+  'Annulé'
 ];
 const listTypeTraitement = ref([]);
 const contentsDemandesFromServer = ref([]);
@@ -345,11 +349,15 @@ function isAvailableFile(demandeNumber, filename) {
 
 //Action d'archivage ou suppression selon état de la demande dans le TDB
 function canArchive(item) {
-  return item.etatDemande === 'Terminé';
+  return item.etatDemande === 'Terminé' || item.etatDemande === 'Annulé';
 }
 
 function canCancel(item) {
-  return item.etatDemande !== 'Terminé' && item.etatDemande !== 'En cours de traitement' && item.etatDemande !== 'En attente';
+  return item.etatDemande !== 'Terminé' && item.etatDemande !== 'En cours de traitement' && item.etatDemande !== 'En attente' && item.etatDemande !== 'Annulé';
+}
+
+function canStop(item) {
+  return item.etatDemande === 'En cours de traitement' || item.etatDemande === 'En attente'
 }
 
 //Suppression d'une demande
@@ -389,12 +397,12 @@ function throwError(error) {
 }
 
 function colorProgressBar(item) {
-  if (item.pourcentageProgressionTraitement === 100) {
-    if (item.etatDemande === 'Terminé') {
-      return 'success';
-    } else if (item.etatDemande === 'En erreur') {
-      return 'error';
-    }
+  if (item.etatDemande === 'Terminé') {
+    return 'success';
+  } else if (item.etatDemande === 'En erreur') {
+    return 'error';
+  } else if (item.etatDemande === 'Annulé') {
+    return 'stopped';
   }
   return 'grey-lighten-1';
 }