From 37c05b0f9b62c4372dba2c785cae608182749512 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 22 Dec 2025 11:16:08 +0100
Subject: [PATCH 1/6] feat: migrate toasts to vue-sonner

---
 app.vue                                       |   9 +-
 .../AdminCommunityResourcesTable.vue          |   3 +-
 .../AdminContactPointsTable.vue               |   3 +-
 .../AdminUpdateDataserviceDatasetsPage.vue    |   3 +-
 .../AdminUpdateDataservicePage.vue            |   7 +-
 components/Dataservices/SearchPage.vue        |   3 +-
 .../Datasets/AdminDatasetResourcesPage.vue    |   3 +-
 .../Datasets/AdminUpdateDatasetPage.vue       |   8 +-
 components/Datasets/DescribeResource.vue      |   4 +-
 components/Datasets/SearchPage.vue            |   3 +-
 components/Organization/Search.vue            |   3 +-
 components/Pages/SiteEditoPage.vue            |   2 +-
 .../AdminUpdateReuseDataservicesPage.vue      |   3 +-
 .../Reuses/AdminUpdateReuseDatasetsPage.vue   |   3 +-
 components/Reuses/AdminUpdateReusePage.vue    |   3 +-
 components/SiteHeader/SiteHeader.vue          |   4 +-
 components/Support/Choices.vue                |   4 +-
 components/Toaster/Toaster.client.vue         | 329 ------------------
 components/Toaster/api.ts                     |  53 ---
 components/Toaster/defaults/positions.ts      |  30 --
 components/Toaster/helpers/event-bus.ts       |   5 -
 components/Toaster/helpers/mount-component.ts |  27 --
 components/Toaster/helpers/remove-element.ts  |  12 -
 components/Toaster/helpers/timer.ts           |  30 --
 components/TransferBanner.vue                 |   3 +-
 components/User/AdminUserProfilePage.vue      |   3 +-
 components/User/ChangeEmailModal.vue          |   3 +-
 components/User/ChangePasswordModal.vue       |   3 +-
 components/User/DeleteUserModal.vue           |   3 +-
 composables/useToast.client.ts                |  10 -
 datagouv-components/package.json              |   1 +
 .../src/components/CopyButton.vue             |  14 +-
 datagouv-components/src/main.ts               |   2 +
 package.json                                  |   1 -
 pages/admin/harvesters/[id].vue               |   3 +-
 pages/admin/harvesters/[id]/configuration.vue |   3 +-
 .../organizations/[oid]/profile/index.vue     |   3 +-
 pages/admin/posts/[id]/content.vue            |   2 +-
 pages/admin/posts/[id]/index.vue              |   3 +-
 pages/admin/topics/[id]/index.vue             |   3 +-
 pages/login.vue                               |   3 +-
 pages/organizations/[oid]/information.vue     |   3 +-
 pages/register.vue                            |   3 +-
 pages/reset/[token].vue                       |   3 +-
 plugins/api.ts                                |   3 +-
 pnpm-lock.yaml                                |  35 +-
 46 files changed, 86 insertions(+), 578 deletions(-)
 delete mode 100644 components/Toaster/Toaster.client.vue
 delete mode 100644 components/Toaster/api.ts
 delete mode 100644 components/Toaster/defaults/positions.ts
 delete mode 100644 components/Toaster/helpers/event-bus.ts
 delete mode 100644 components/Toaster/helpers/mount-component.ts
 delete mode 100644 components/Toaster/helpers/remove-element.ts
 delete mode 100644 components/Toaster/helpers/timer.ts
 delete mode 100644 composables/useToast.client.ts

diff --git a/app.vue b/app.vue
index 28a0a3e56..ae899a568 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,12 @@
 <template>
   <NuxtLoadingIndicator color="var(--blue-cumulus-main-526)" />
   <NuxtRouteAnnouncer />
+  <Toaster
+    position="bottom-right"
+    :duration="4000"
+    rich-colors
+    close-button
+  />
   <div
     id="tooltips"
     class="h-0"
@@ -11,7 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { datagouv } from '@datagouv/components-next'
+import 'vue-sonner/style.css'
+import { Toaster, datagouv } from '@datagouv/components-next'
 import type { UseFetchFunction } from '@datagouv/components-next'
 import CdataLink from './components/CdataLink.vue'
 import { ClientOnly, TextClamp } from '#components'
diff --git a/components/AdminTable/AdminCommunityResourcesTable/AdminCommunityResourcesTable.vue b/components/AdminTable/AdminCommunityResourcesTable/AdminCommunityResourcesTable.vue
index e189cdfda..81a4101f4 100644
--- a/components/AdminTable/AdminCommunityResourcesTable/AdminCommunityResourcesTable.vue
+++ b/components/AdminTable/AdminCommunityResourcesTable/AdminCommunityResourcesTable.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script setup lang="ts">
-import { useFormatDate, type CommunityResource, type Resource, type SchemaResponseData } from '@datagouv/components-next'
+import { useFormatDate, type CommunityResource, type Resource, type SchemaResponseData, toast } from '@datagouv/components-next'
 import AdminBadge from '../../../components/AdminBadge/AdminBadge.vue'
 import AdminTable from '../../../components/AdminTable/Table/AdminTable.vue'
 import AdminTableTh from '../../../components/AdminTable/Table/AdminTableTh.vue'
@@ -112,7 +112,6 @@ const emit = defineEmits<{
 
 const { t } = useTranslation()
 const { formatDate } = useFormatDate()
-const { toast } = useToast()
 
 const { data: schemas } = await useAPI<SchemaResponseData>('/api/1/datasets/schemas/')
 
diff --git a/components/AdminTable/AdminContactPointsTable/AdminContactPointsTable.vue b/components/AdminTable/AdminContactPointsTable/AdminContactPointsTable.vue
index cc12be4dc..ed51914c7 100644
--- a/components/AdminTable/AdminContactPointsTable/AdminContactPointsTable.vue
+++ b/components/AdminTable/AdminContactPointsTable/AdminContactPointsTable.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton } from '@datagouv/components-next'
+import { BrandedButton, toast } from '@datagouv/components-next'
 import type { ContactPoint, ContactPointRole, Organization } from '@datagouv/components-next'
 import { RiPencilLine } from '@remixicon/vue'
 import AdminBadge from '~/components/AdminBadge/AdminBadge.vue'
@@ -143,7 +143,6 @@ const emit = defineEmits<{
 const { $api } = useNuxtApp()
 
 const { t } = useTranslation()
-const { toast } = useToast()
 
 const { form: newContactForm, getFirstError, touch, validate } = useForm({
   ...defaultContactForm,
diff --git a/components/Dataservices/AdminUpdateDataserviceDatasetsPage.vue b/components/Dataservices/AdminUpdateDataserviceDatasetsPage.vue
index d07e79426..dd16f9675 100644
--- a/components/Dataservices/AdminUpdateDataserviceDatasetsPage.vue
+++ b/components/Dataservices/AdminUpdateDataserviceDatasetsPage.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, toast } from '@datagouv/components-next'
 import type { Dataservice, DatasetV2 } from '@datagouv/components-next'
 import type { DatasetSuggest } from '~/types/types'
 
@@ -48,7 +48,6 @@ const config = useRuntimeConfig()
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/dataservices/${route.params.id}`)
diff --git a/components/Dataservices/AdminUpdateDataservicePage.vue b/components/Dataservices/AdminUpdateDataservicePage.vue
index e29591daf..9f214515d 100644
--- a/components/Dataservices/AdminUpdateDataservicePage.vue
+++ b/components/Dataservices/AdminUpdateDataservicePage.vue
@@ -139,15 +139,14 @@
 </template>
 
 <script setup lang="ts">
+import { BannerAction, BrandedButton, LoadingBlock, TranslationT, toast } from '@datagouv/components-next'
 import type { Dataservice } from '@datagouv/components-next'
 import { RiArchiveLine, RiArrowGoBackLine, RiDeleteBin6Line } from '@remixicon/vue'
-import { BannerAction, BrandedButton, LoadingBlock, TranslationT } from '@datagouv/components-next'
 import DescribeDataservice from '~/components/Dataservices/DescribeDataservice.vue'
 import type { DataserviceForm } from '~/types/types'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const { start, finish, isLoading } = useLoadingIndicator()
@@ -225,10 +224,10 @@ async function switchDataservicePrivate() {
     })
     await refresh()
     if (dataservice.value?.private) {
-      toast.success(t('API publiée !'))
+      toast.success(t('API passée en brouillon !'))
     }
     else {
-      toast.success(t('API passée en brouillon !'))
+      toast.success(t('API publiée !'))
     }
   }
   finally {
diff --git a/components/Dataservices/SearchPage.vue b/components/Dataservices/SearchPage.vue
index 528aff4ae..92d1e94c6 100644
--- a/components/Dataservices/SearchPage.vue
+++ b/components/Dataservices/SearchPage.vue
@@ -160,7 +160,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, LoadingBlock, Pagination, getLink } from '@datagouv/components-next'
+import { BrandedButton, LoadingBlock, Pagination, getLink, toast } from '@datagouv/components-next'
 import type { Dataservice, Organization, OrganizationOrSuggest, OrganizationSuggest } from '@datagouv/components-next'
 import { RiCloseCircleLine } from '@remixicon/vue'
 import { computedAsync, debouncedRef, useUrlSearchParams } from '@vueuse/core'
@@ -181,7 +181,6 @@ type Facets = {
 const route = useRoute()
 const { t } = useTranslation()
 const config = useRuntimeConfig()
-const { toast } = useToast()
 const { $api } = useNuxtApp()
 
 async function suggestOrganizations(q: string) {
diff --git a/components/Datasets/AdminDatasetResourcesPage.vue b/components/Datasets/AdminDatasetResourcesPage.vue
index a80b5e125..df9df9b25 100644
--- a/components/Datasets/AdminDatasetResourcesPage.vue
+++ b/components/Datasets/AdminDatasetResourcesPage.vue
@@ -198,7 +198,7 @@
 </template>
 
 <script setup lang="ts">
-import { getResourceLabel, BrandedButton, LoadingBlock, Pagination, Tooltip, useFormatDate, type DatasetV2, type Resource, type SchemaResponseData } from '@datagouv/components-next'
+import { getResourceLabel, BrandedButton, LoadingBlock, Pagination, Tooltip, useFormatDate, type DatasetV2, type Resource, type SchemaResponseData, toast } from '@datagouv/components-next'
 import { RiArrowDownLine, RiArrowUpLine, RiCheckLine, RiDraggable } from '@remixicon/vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
 import { useTemplateRef } from 'vue'
@@ -210,7 +210,6 @@ import FileEditModalFromQueryStringClient from './FileEditModalFromQueryString.c
 import type { AdminBadgeType, CommunityResourceForm, PaginatedArray, ResourceForm } from '~/types/types'
 
 const route = useRoute()
-const { toast } = useToast()
 const { $api } = useNuxtApp()
 const { formatDate } = useFormatDate()
 
diff --git a/components/Datasets/AdminUpdateDatasetPage.vue b/components/Datasets/AdminUpdateDatasetPage.vue
index 2fa2e7bdf..f6df1ef13 100644
--- a/components/Datasets/AdminUpdateDatasetPage.vue
+++ b/components/Datasets/AdminUpdateDatasetPage.vue
@@ -132,8 +132,8 @@
 </template>
 
 <script setup lang="ts">
+import { BannerAction, BrandedButton, LoadingBlock, TranslationT, toast } from '@datagouv/components-next'
 import type { DatasetV2WithFullObject } from '@datagouv/components-next'
-import { BannerAction, BrandedButton, LoadingBlock, TranslationT } from '@datagouv/components-next'
 import { RiArchiveLine, RiArrowGoBackLine, RiDeleteBin6Line } from '@remixicon/vue'
 import DescribeDataset from '~/components/Datasets/DescribeDataset.vue'
 import type { DatasetForm } from '~/types/types'
@@ -144,8 +144,6 @@ const { $api } = useNuxtApp()
 const route = useRoute()
 const { start, finish, isLoading } = useLoadingIndicator()
 
-const { toast } = useToast()
-
 const url = computed(() => `/api/2/datasets/${route.params.id}/`)
 const { data: dataset, status, refresh } = await useAPI<DatasetV2WithFullObject>(url, {
   headers: {
@@ -218,10 +216,10 @@ async function switchDatasetPrivate() {
     })
     await refresh()
     if (datasetForm.value.private) {
-      toast.success(t('Jeu de données publié !'))
+      toast.success(t('Jeu de données passé en brouillon !'))
     }
     else {
-      toast.success(t('Jeu de données passé en brouillon !'))
+      toast.success(t('Jeu de données publié !'))
     }
   }
   finally {
diff --git a/components/Datasets/DescribeResource.vue b/components/Datasets/DescribeResource.vue
index d93bebae0..dfe5e8200 100644
--- a/components/Datasets/DescribeResource.vue
+++ b/components/Datasets/DescribeResource.vue
@@ -394,7 +394,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, getResourceLabel, LoadingBlock, RESOURCE_TYPE, SimpleBanner, TranslationT } from '@datagouv/components-next'
+import { BrandedButton, getResourceLabel, LoadingBlock, RESOURCE_TYPE, SimpleBanner, TranslationT, toast } from '@datagouv/components-next'
 import type { DatasetV2, SchemaResponseData } from '@datagouv/components-next'
 import { RiAddLine } from '@remixicon/vue'
 import SelectGroup from '../Form/SelectGroup/SelectGroup.vue'
@@ -454,8 +454,6 @@ const setFiles = (files: Array<File>) => {
 const { data: extensions, status } = await useAPI<Array<string>>('/api/1/datasets/extensions/', { lazy: true })
 const { data: schemasData, status: schemaStatus } = await useAPI<SchemaResponseData>('/api/1/datasets/schemas/', { lazy: true })
 
-const { toast } = useToast()
-
 watch(newFile, (file) => {
   // console.log('[DescribeResource] newFile changed:', file ? file.name : 'null')
   if (file && form.value.filetype === 'file') {
diff --git a/components/Datasets/SearchPage.vue b/components/Datasets/SearchPage.vue
index a41ab5007..ebd8d8c55 100644
--- a/components/Datasets/SearchPage.vue
+++ b/components/Datasets/SearchPage.vue
@@ -281,7 +281,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, getLink, getOrganizationTypes, LoadingBlock, Pagination, OTHER, USER } from '@datagouv/components-next'
+import { BrandedButton, getLink, getOrganizationTypes, LoadingBlock, Pagination, OTHER, USER, toast } from '@datagouv/components-next'
 import type { DatasetV2, License, Organization, OrganizationTypes, RegisteredSchema, TranslatedBadge, OrganizationOrSuggest } from '@datagouv/components-next'
 import { ref, computed, type Component } from 'vue'
 import { RiCloseCircleLine, RiDownloadLine } from '@remixicon/vue'
@@ -309,7 +309,6 @@ type Facets = {
 const { $api } = useNuxtApp()
 const { t } = useTranslation()
 const config = useRuntimeConfig()
-const { toast } = useToast()
 
 const route = useRoute()
 const params = useUrlSearchParams<DatasetSearchParams>('history', {
diff --git a/components/Organization/Search.vue b/components/Organization/Search.vue
index ddd7e24ea..c4380efb9 100644
--- a/components/Organization/Search.vue
+++ b/components/Organization/Search.vue
@@ -60,13 +60,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { OrganizationLogo, type Organization } from '@datagouv/components-next'
+import { OrganizationLogo, type Organization, toast } from '@datagouv/components-next'
 import { watchDebounced } from '@vueuse/core'
 import { RiSearch2Line } from '@remixicon/vue'
 import { Combobox, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptions } from '@headlessui/vue'
 
 const { t } = useTranslation()
-const { toast } = useToast()
 const config = useRuntimeConfig()
 const q = ref('')
 const { $api } = useNuxtApp()
diff --git a/components/Pages/SiteEditoPage.vue b/components/Pages/SiteEditoPage.vue
index 6b04d141a..36efe5d56 100644
--- a/components/Pages/SiteEditoPage.vue
+++ b/components/Pages/SiteEditoPage.vue
@@ -29,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+import { toast } from '@datagouv/components-next'
 import type { Site } from '@datagouv/components-next'
 import AdminBreadcrumb from '~/components/Breadcrumbs/AdminBreadcrumb.vue'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
@@ -46,7 +47,6 @@ definePageMeta({
 })
 
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 const { t } = useTranslation()
 
 const loading = ref(false)
diff --git a/components/Reuses/AdminUpdateReuseDataservicesPage.vue b/components/Reuses/AdminUpdateReuseDataservicesPage.vue
index b3779dd0f..4920fff8b 100644
--- a/components/Reuses/AdminUpdateReuseDataservicesPage.vue
+++ b/components/Reuses/AdminUpdateReuseDataservicesPage.vue
@@ -16,13 +16,12 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton } from '@datagouv/components-next'
+import { BrandedButton, toast } from '@datagouv/components-next'
 import type { Dataservice, Reuse } from '@datagouv/components-next'
 import DataservicesSelect from '../DataservicesSelect.vue'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/reuses/${route.params.id}`)
diff --git a/components/Reuses/AdminUpdateReuseDatasetsPage.vue b/components/Reuses/AdminUpdateReuseDatasetsPage.vue
index faa6a6732..b939f265f 100644
--- a/components/Reuses/AdminUpdateReuseDatasetsPage.vue
+++ b/components/Reuses/AdminUpdateReuseDatasetsPage.vue
@@ -17,13 +17,12 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton } from '@datagouv/components-next'
+import { BrandedButton, toast } from '@datagouv/components-next'
 import type { Dataset, DatasetV2, Reuse } from '@datagouv/components-next'
 import type { DatasetSuggest } from '~/types/types'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/reuses/${route.params.id}`)
diff --git a/components/Reuses/AdminUpdateReusePage.vue b/components/Reuses/AdminUpdateReusePage.vue
index 3264a942a..8b5109316 100644
--- a/components/Reuses/AdminUpdateReusePage.vue
+++ b/components/Reuses/AdminUpdateReusePage.vue
@@ -140,7 +140,7 @@
 </template>
 
 <script setup lang="ts">
-import { BannerAction, BrandedButton, LoadingBlock, TranslationT } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, LoadingBlock, TranslationT, toast } from '@datagouv/components-next'
 import type { Reuse, ReuseTopic, ReuseType } from '@datagouv/components-next'
 import { RiArchiveLine, RiArrowGoBackLine, RiDeleteBin6Line } from '@remixicon/vue'
 import DescribeReuse from '~/components/Reuses/DescribeReuse.vue'
@@ -148,7 +148,6 @@ import type { ReuseForm } from '~/types/types'
 
 const { t } = useTranslation()
 const { $api, $fileApi } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const { start, finish, isLoading } = useLoadingIndicator()
diff --git a/components/SiteHeader/SiteHeader.vue b/components/SiteHeader/SiteHeader.vue
index 6f81c3aff..b1084cab2 100644
--- a/components/SiteHeader/SiteHeader.vue
+++ b/components/SiteHeader/SiteHeader.vue
@@ -503,7 +503,7 @@
 
 <script setup lang="ts">
 import { NuxtImg } from '#components'
-import { AnimatedLoader, BrandedButton, Toggletip, useGetUserAvatar } from '@datagouv/components-next'
+import { AnimatedLoader, BrandedButton, Toggletip, useGetUserAvatar, toast } from '@datagouv/components-next'
 import { RiAccountCircleLine, RiAddLine, RiDatabase2Line, RiInbox2Line, RiLockLine, RiMenuLine, RiSearchLine, RiRobot2Line, RiLineChartLine, RiServerLine, RiArticleLine, RiSettings3Line, RiLogoutBoxRLine, RiBuilding2Line, RiCloseLine } from '@remixicon/vue'
 import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems, Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import CdataLink from '../CdataLink.vue'
@@ -568,8 +568,6 @@ const logout = async () => {
   toast.success(t('Vous avez été déconnecté.'))
 }
 
-const { toast } = useToast()
-
 onMounted(() => {
   // TODO: remove this logic when we don't rely on udata flash messages
   // following https://github.com/opendatateam/udata/pull/3348
diff --git a/components/Support/Choices.vue b/components/Support/Choices.vue
index 79d95d626..b38679a9b 100644
--- a/components/Support/Choices.vue
+++ b/components/Support/Choices.vue
@@ -99,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { useActiveDescendant, BrandedButton, MarkdownViewer, SimpleBanner } from '@datagouv/components-next'
+import { useActiveDescendant, BrandedButton, MarkdownViewer, SimpleBanner, toast } from '@datagouv/components-next'
 import type { Question, QuestionWithSegment } from '~/types/support'
 
 const emit = defineEmits<{
@@ -115,8 +115,6 @@ const answerResponse = ref('')
 const loading = ref(false)
 const messageSent = ref(false)
 
-const { toast } = useToast()
-
 const { isActive, active, focusOut, handleKeyPressForActiveDescendant } = useActiveDescendant('choices' in props.question ? props.question.choices : [], 'horizontal')
 
 const { form, touch, getFirstError, validate } = useForm({
diff --git a/components/Toaster/Toaster.client.vue b/components/Toaster/Toaster.client.vue
deleted file mode 100644
index 7d0415cdf..000000000
--- a/components/Toaster/Toaster.client.vue
+++ /dev/null
@@ -1,329 +0,0 @@
-<template>
-  <transition
-    ref="el"
-    :enter-active-class="transition.enter"
-    :leave-active-class="transition.leave"
-  >
-    <component
-      :is="tag"
-      v-show="isActive"
-      class="flex items-center duration-150 mx-2 my-0 rounded-lg pointer-events-auto text-white min-h-12 cursor-pointer py-2 px-4 break-words"
-      :class="[`c-toast--${type}`, `c-toast--${position}`]"
-      role="alert"
-      @mouseover="toggleTimer(true)"
-      @mouseleave="toggleTimer(false)"
-      @click="click"
-    >
-      {{ message }}
-      <RiCloseLine class="pl-2 size-7" />
-    </component>
-  </transition>
-</template>
-
-<script setup lang="ts">
-import { RiCloseLine } from '@remixicon/vue'
-import { ref, computed, onBeforeMount, onBeforeUnmount, onMounted } from 'vue'
-import Positions, { definePosition } from '~/components/Toaster/defaults/positions'
-import type { Position } from '~/components/Toaster/defaults/positions'
-import emitter from '~/components/Toaster/helpers/event-bus'
-import { removeElement } from '~/components/Toaster/helpers/remove-element'
-import Timer from '~/components/Toaster/helpers/timer'
-
-export interface Props {
-  message: string
-  type?: string
-  position?: Position
-  maxToasts?: number | false
-  duration?: number | false
-  dismissible?: boolean
-  queue?: boolean
-  props?: boolean
-  useDefaultCss?: boolean
-  onClose?: () => void
-  onClick?: () => void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'default',
-  position: Positions.BOTTOM_RIGHT,
-  maxToasts: false,
-  duration: 4000,
-  dismissible: true,
-  queue: false,
-  props: true,
-  useDefaultCss: true,
-  onClose: () => { },
-  onClick: () => { },
-})
-let parentTop: Element | null = null
-let parentBottom: Element | null = null
-let timer: Timer | null = null
-let queueTimer: number | undefined
-const el = ref<HTMLElement | null>(null)
-const isActive = ref(false)
-
-onBeforeMount(() => {
-  createParents()
-  setupContainer()
-})
-
-onMounted(() => {
-  showNotice()
-  emitter.on('toast-clear', close)
-})
-
-function createParents() {
-  parentTop = document.querySelector('.c-toast-container--top')
-  parentBottom = document.querySelector('.c-toast-container--bottom')
-  if (parentTop && parentBottom) return
-
-  if (!parentTop) {
-    parentTop = document.createElement('div')
-    parentTop.className = 'c-toast-container c-toast-container--top'
-  }
-
-  if (!parentBottom) {
-    parentBottom = document.createElement('div')
-    parentBottom.className = 'c-toast-container c-toast-container--bottom'
-  }
-}
-
-function setupContainer() {
-  const container = document.body
-  if (parentTop) {
-    container.appendChild(parentTop)
-  }
-  if (parentBottom) {
-    container.appendChild(parentBottom)
-  }
-}
-
-function shouldQueue() {
-  if (!props.queue && props.maxToasts === false) {
-    return false
-  }
-  let parentTopChildElementCount = 0
-  if (parentTop) {
-    parentTopChildElementCount = parentTop.childElementCount
-  }
-  let parentBottomChildElementCount = 0
-  if (parentBottom) {
-    parentBottomChildElementCount = parentBottom.childElementCount
-  }
-  if (props.maxToasts !== false) {
-    return (
-      props.maxToasts
-      <= parentTopChildElementCount + parentBottomChildElementCount
-    )
-  }
-  return (
-    parentTopChildElementCount > 0
-    || parentBottomChildElementCount > 0
-  )
-}
-
-function showNotice() {
-  if (shouldQueue()) {
-    queueTimer = window.setTimeout(showNotice, 250)
-    return
-  }
-  const parent = correctParent()
-  if (parent && el.value) {
-    parent.insertAdjacentElement('afterbegin', el.value)
-    isActive.value = true
-    timer = props.duration !== false ? new Timer(close, props.duration) : null
-  }
-}
-
-function click() {
-  props.onClick()
-  if (props.dismissible) {
-    close()
-  }
-}
-
-function toggleTimer(newVal: boolean) {
-  if (timer) {
-    if (newVal) {
-      timer.pause()
-    }
-    else {
-      timer.resume()
-    }
-  }
-}
-
-function stopTimer() {
-  if (timer) {
-    timer.stop()
-  }
-  clearTimeout(queueTimer)
-}
-
-function close() {
-  stopTimer()
-  isActive.value = false
-  setTimeout(() => {
-    props.onClose()
-    if (el.value) {
-      removeElement(el.value)
-    }
-  }, 150)
-}
-
-function correctParent() {
-  if (!parentTop || !parentBottom) {
-    return null
-  }
-  return definePosition(props.position, parentTop, parentBottom)
-}
-
-const transition = computed<{ enter: string, leave: string }>(() => {
-  return definePosition(
-    props.position,
-    {
-      enter: 'fadeInDown',
-      leave: 'fadeOut',
-    },
-    {
-      enter: 'fadeInUp',
-      leave: 'fadeOut',
-    },
-  )
-})
-
-const tag = computed(() => props.dismissible ? 'button' : 'div')
-
-onBeforeUnmount(() => {
-  emitter.off('toast-clear', close)
-})
-</script>
-
-<style>
-.c-toast--success {
-  background-color: var(--background-action-high-success);
-  --hover-tint: var(--background-action-high-success-hover);
-}
-
-.c-toast--info {
-  background-color: var(--background-action-high-info);
-  --hover-tint: var(--background-action-high-info-hover);
-}
-
-.c-toast--warning {
-  background-color: var(--background-action-high-warning);
-  --hover-tint: var(--background-action-high-warning-hover);
-}
-
-.c-toast--error {
-  background-color: var(--background-action-high-error);
-  --hover-tint: var(--background-action-high-error-hover);
-}
-
-.c-toast--default {
-  background-color: #343a40;
-  --hover-tint: #343a40;
-}
-
-.c-toast--top, .c-toast--bottom {
-  align-self: center;
-}
-
-.c-toast--top-right, .c-toast--bottom-right {
-  align-self: flex-end;
-}
-
-.c-toast--top-left, .c-toast--bottom-left {
-  align-self: flex-start;
-}
-
-.c-toast-container {
-  position: fixed;
-  display: flex;
-  gap: 0.5rem;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 2em;
-  overflow: hidden;
-  z-index: 9999;
-  pointer-events: none;
-}
-
-.c-toast-container--top {
-  flex-direction: column;
-}
-.c-toast-container--bottom {
-  flex-direction: column-reverse;
-}
-
-@media screen and (max-width: 768px) {
-  .c-toast-container {
-    padding: 0;
-    position: fixed !important;
-  }
-}
-
-/*
-Animations are taken from animate.css
-https://daneden.github.io/animate.css
-*/
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-.fadeOut {
-  animation-name: fadeOut;
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-.fadeInDown {
-  animation-name: fadeInDown;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-.fadeInUp {
-  animation-name: fadeInUp;
-}
-
-/* VUE */
-
-.fade-enter-active {
-  transition: opacity 300ms ease-in;
-}
-.fade-leave-active {
-  transition: opacity 150ms ease-out;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/components/Toaster/api.ts b/components/Toaster/api.ts
deleted file mode 100644
index eede806b2..000000000
--- a/components/Toaster/api.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { Position } from '~/components/Toaster/defaults/positions'
-import mount from '~/components/Toaster/helpers/mount-component'
-import emitter from '~/components/Toaster/helpers/event-bus'
-import Toaster from '~/components/Toaster/Toaster.client.vue'
-
-export type Type = 'default' | 'success' | 'info' | 'warning' | 'error'
-
-export type Options = {
-  message?: string
-  type?: Type
-  position?: Position
-  duration?: number | false
-  dismissible?: boolean
-  onClick?: CallableFunction
-  onClose?: CallableFunction
-  queue?: boolean
-  maxToasts?: number | false
-  pauseOnHover?: boolean
-  useDefaultCss?: boolean
-}
-
-function api(globalOptions: Options = {}) {
-  return {
-    show(message: string, options: Options = {}) {
-      const localOptions = { message, ...options }
-      const c = mount(Toaster, {
-        props: { ...globalOptions, ...localOptions },
-      })
-      return c
-    },
-    clear() {
-      emitter.emit('toast-clear')
-    },
-    success(message: string, options: Options = {}) {
-      options.type = 'success'
-      return this.show(message, options)
-    },
-    error(message: string, options: Options = {}) {
-      options.type = 'error'
-      return this.show(message, options)
-    },
-    info(message: string, options: Options = {}) {
-      options.type = 'info'
-      return this.show(message, options)
-    },
-    warning(message: string, options: Options = {}) {
-      options.type = 'warning'
-      return this.show(message, options)
-    },
-  }
-}
-
-export default api
diff --git a/components/Toaster/defaults/positions.ts b/components/Toaster/defaults/positions.ts
deleted file mode 100644
index f68266c78..000000000
--- a/components/Toaster/defaults/positions.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export type Position = 'top' | 'bottom' | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
-
-const POSITIONS: Readonly<Record<string, Position>> = {
-  TOP_RIGHT: 'top-right',
-  TOP: 'top',
-  TOP_LEFT: 'top-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  BOTTOM: 'bottom',
-  BOTTOM_LEFT: 'bottom-left',
-}
-
-export default POSITIONS
-
-export function definePosition<T>(position: Position, top: T, bottom: T): T {
-  let result = top
-  switch (position) {
-    case POSITIONS.TOP:
-    case POSITIONS.TOP_RIGHT:
-    case POSITIONS.TOP_LEFT:
-      result = top
-      break
-
-    case POSITIONS.BOTTOM:
-    case POSITIONS.BOTTOM_RIGHT:
-    case POSITIONS.BOTTOM_LEFT:
-      result = bottom
-      break
-  }
-  return result
-}
diff --git a/components/Toaster/helpers/event-bus.ts b/components/Toaster/helpers/event-bus.ts
deleted file mode 100644
index 674e1dc0d..000000000
--- a/components/Toaster/helpers/event-bus.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import mitt from 'mitt'
-
-const emitter = mitt()
-
-export default emitter
diff --git a/components/Toaster/helpers/mount-component.ts b/components/Toaster/helpers/mount-component.ts
deleted file mode 100644
index c69e51917..000000000
--- a/components/Toaster/helpers/mount-component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { render, h } from 'vue'
-import type { Component, VNode } from 'vue'
-
-const createElement = () =>
-  typeof document !== 'undefined' ? document.createElement('div') : null
-
-function mount(component: Component, { props }: { props?: object } = {}) {
-  let el: Element | null = createElement()
-
-  let vNode: VNode | null = h(component, props)
-
-  if (el) {
-    render(vNode, el)
-  }
-
-  const destroy = () => {
-    if (el) {
-      render(null, el)
-    }
-    el = null
-    vNode = null
-  }
-
-  return { vNode, destroy, el }
-}
-
-export default mount
diff --git a/components/Toaster/helpers/remove-element.ts b/components/Toaster/helpers/remove-element.ts
deleted file mode 100644
index bc39a9c4c..000000000
--- a/components/Toaster/helpers/remove-element.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-const removeElement = (el: Element) => {
-  if (typeof el.remove !== 'undefined') {
-    el.remove()
-  }
-  else {
-    if (el.parentNode) {
-      el.parentNode.removeChild(el)
-    }
-  }
-}
-
-export { removeElement }
diff --git a/components/Toaster/helpers/timer.ts b/components/Toaster/helpers/timer.ts
deleted file mode 100644
index d98798a78..000000000
--- a/components/Toaster/helpers/timer.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// https://stackoverflow.com/a/3969760
-
-export default class Timer {
-  private startedAt: number
-  private callback: CallableFunction
-  private delay: number
-  private timer: number
-
-  constructor(callback: CallableFunction, delay: number) {
-    this.startedAt = Date.now()
-    this.callback = callback
-    this.delay = delay
-    this.timer = setTimeout(callback, delay)
-  }
-
-  pause() {
-    this.stop()
-    this.delay -= Date.now() - this.startedAt
-  }
-
-  resume() {
-    this.stop()
-    this.startedAt = Date.now()
-    this.timer = setTimeout(this.callback, this.delay)
-  }
-
-  stop() {
-    clearTimeout(this.timer)
-  }
-}
diff --git a/components/TransferBanner.vue b/components/TransferBanner.vue
index 7216301ab..bf1114c99 100644
--- a/components/TransferBanner.vue
+++ b/components/TransferBanner.vue
@@ -87,9 +87,9 @@
 </template>
 
 <script setup lang="ts">
+import { AnimatedLoader, BannerAction, BrandedButton, useFormatDate, toast } from '@datagouv/components-next'
 import type { Dataservice, DatasetV2, DatasetV2WithFullObject, Owned, Reuse } from '@datagouv/components-next'
 import { RiSendPlaneLine } from '@remixicon/vue'
-import { AnimatedLoader, BannerAction, BrandedButton, useFormatDate } from '@datagouv/components-next'
 import type { TransferRequest } from '~/types/types'
 
 const props = defineProps<{
@@ -99,7 +99,6 @@ const props = defineProps<{
 }>()
 
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 const { t } = useTranslation()
 const { formatDate } = useFormatDate()
 
diff --git a/components/User/AdminUserProfilePage.vue b/components/User/AdminUserProfilePage.vue
index 7342ef06f..7f88408d3 100644
--- a/components/User/AdminUserProfilePage.vue
+++ b/components/User/AdminUserProfilePage.vue
@@ -233,7 +233,7 @@
 </template>
 
 <script setup lang="ts">
-import { BannerAction, BrandedButton, CopyButton, PaddedContainer } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, CopyButton, PaddedContainer, toast } from '@datagouv/components-next'
 import type { User } from '@datagouv/components-next'
 import { RiDeleteBin6Line, RiEditLine, RiRecycleLine, RiSaveLine } from '@remixicon/vue'
 import DeleteUserModal from './DeleteUserModal.vue'
@@ -252,7 +252,6 @@ const emits = defineEmits<{
 
 const me = useMe()
 const config = useNuxtApp().$config
-const { toast } = useToast()
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
 
diff --git a/components/User/ChangeEmailModal.vue b/components/User/ChangeEmailModal.vue
index 6311a1ced..a1843f2fd 100644
--- a/components/User/ChangeEmailModal.vue
+++ b/components/User/ChangeEmailModal.vue
@@ -72,11 +72,10 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, toast } from '@datagouv/components-next'
 import { RiEditLine } from '@remixicon/vue'
 import type { FieldsErrors } from '~/types/form'
 
-const { toast } = useToast()
 const { t } = useTranslation()
 const config = useRuntimeConfig()
 
diff --git a/components/User/ChangePasswordModal.vue b/components/User/ChangePasswordModal.vue
index 2f7f60b42..e50abe777 100644
--- a/components/User/ChangePasswordModal.vue
+++ b/components/User/ChangePasswordModal.vue
@@ -80,11 +80,10 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, toast } from '@datagouv/components-next'
 import { RiEditLine } from '@remixicon/vue'
 import type { FieldsErrors } from '~/types/form'
 
-const { toast } = useToast()
 const { t } = useTranslation()
 
 const loading = ref(false)
diff --git a/components/User/DeleteUserModal.vue b/components/User/DeleteUserModal.vue
index b2122bd21..7606f0af1 100644
--- a/components/User/DeleteUserModal.vue
+++ b/components/User/DeleteUserModal.vue
@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import { RiDeleteBin6Line } from '@remixicon/vue'
-import { BrandedButton, type User } from '@datagouv/components-next'
+import { BrandedButton, type User, toast } from '@datagouv/components-next'
 import { useLogout } from '~/utils/auth'
 
 const props = defineProps<{
@@ -65,7 +65,6 @@ const props = defineProps<{
 const me = useMe()
 const { $api } = useNuxtApp()
 const config = useRuntimeConfig()
-const { toast } = useToast()
 const { t } = useTranslation()
 
 const loading = ref(false)
diff --git a/composables/useToast.client.ts b/composables/useToast.client.ts
deleted file mode 100644
index 637e4e82a..000000000
--- a/composables/useToast.client.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import createToaster from '~/components/Toaster/api'
-
-export function useToast() {
-  const toast = createToaster({
-    duration: false,
-    dismissible: true,
-  })
-
-  return { toast }
-}
diff --git a/datagouv-components/package.json b/datagouv-components/package.json
index 812ea8c8b..f3f1bae06 100644
--- a/datagouv-components/package.json
+++ b/datagouv-components/package.json
@@ -68,6 +68,7 @@
     "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
     "vue-router": "^4.5.0",
+    "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
     "vue3-xml-viewer": "^0.0.14"
diff --git a/datagouv-components/src/components/CopyButton.vue b/datagouv-components/src/components/CopyButton.vue
index d3bfec44a..9f7687b1d 100644
--- a/datagouv-components/src/components/CopyButton.vue
+++ b/datagouv-components/src/components/CopyButton.vue
@@ -37,6 +37,7 @@
 <script setup lang="ts">
 import { RiCheckLine, RiClipboardLine, RiFileCopyLine } from '@remixicon/vue'
 import { ref } from 'vue'
+import { toast } from 'vue-sonner'
 
 const props = withDefaults(defineProps<{
   text: string
@@ -51,10 +52,15 @@ const props = withDefaults(defineProps<{
 
 const copied = ref(false)
 
-const copy = () => {
-  void navigator.clipboard.writeText(props.text)
-  copied.value = true
-  setTimeout(() => copied.value = false, 2000)
+const copy = async () => {
+  try {
+    await navigator.clipboard.writeText(props.text)
+    copied.value = true
+    setTimeout(() => copied.value = false, 2000)
+  }
+  catch {
+    toast.error('Impossible de copier dans le presse-papier')
+  }
 }
 </script>
 
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index a27b90bc2..0523b76a3 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -72,6 +72,8 @@ import TranslationT from './components/TranslationT.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
+export { Toaster, toast } from 'vue-sonner'
+
 export * from './composables/useActiveDescendant'
 export * from './composables/useMetrics'
 export * from './composables/useReuseType'
diff --git a/package.json b/package.json
index 92eea8f5d..0b8b3a48e 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "gray-matter": "^4.0.3",
     "leaflet": "^1.9.4",
     "lodash-es": "^4.17.21",
-    "mitt": "^3.0.1",
     "nuxt": "~3.16.2",
     "ofetch": "^1.4.1",
     "papaparse": "^5.5.3",
diff --git a/pages/admin/harvesters/[id].vue b/pages/admin/harvesters/[id].vue
index 11f0a1987..22ed9a307 100644
--- a/pages/admin/harvesters/[id].vue
+++ b/pages/admin/harvesters/[id].vue
@@ -150,7 +150,7 @@
 
 <script setup lang="ts">
 import { RiCalendarEventLine, RiCheckboxCircleLine, RiLink, RiPlayLargeLine, RiToolsLine } from '@remixicon/vue'
-import { BannerAction, BrandedButton } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, toast } from '@datagouv/components-next'
 import AdminBreadcrumb from '~/components/Breadcrumbs/AdminBreadcrumb.vue'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import HarvesterBadge from '~/components/Harvesters/HarvesterBadge.vue'
@@ -164,7 +164,6 @@ definePageMeta({
 const config = useRuntimeConfig()
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const { currentOrganization } = useCurrentOwned()
 
diff --git a/pages/admin/harvesters/[id]/configuration.vue b/pages/admin/harvesters/[id]/configuration.vue
index 6f23b6bb6..1699c6cd4 100644
--- a/pages/admin/harvesters/[id]/configuration.vue
+++ b/pages/admin/harvesters/[id]/configuration.vue
@@ -93,7 +93,7 @@
 
 <script setup lang="ts">
 import { RiDeleteBin6Line } from '@remixicon/vue'
-import { BannerAction, BrandedButton } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, toast } from '@datagouv/components-next'
 import DescribeHarvester from '~/components/Harvesters/DescribeHarvester.vue'
 import JobPage from '~/components/Harvesters/JobPage.vue'
 import PreviewLoader from '~/components/Harvesters/PreviewLoader.vue'
@@ -102,7 +102,6 @@ import type { HarvesterForm, HarvesterJob, HarvesterSource } from '~/types/harve
 const route = useRoute()
 const { $api } = useNuxtApp()
 const { t } = useTranslation()
-const { toast } = useToast()
 
 const sourceUrl = computed(() => `/api/1/harvest/source/${route.params.id}`)
 const { data: harvester, refresh } = await useAPI<HarvesterSource>(sourceUrl, { redirectOn404: true })
diff --git a/pages/admin/organizations/[oid]/profile/index.vue b/pages/admin/organizations/[oid]/profile/index.vue
index 813a1d6aa..7292eb483 100644
--- a/pages/admin/organizations/[oid]/profile/index.vue
+++ b/pages/admin/organizations/[oid]/profile/index.vue
@@ -89,7 +89,7 @@
 
 <script setup lang="ts">
 import { RiArrowGoBackLine, RiDeleteBin6Line } from '@remixicon/vue'
-import { AnimatedLoader, BannerAction, BrandedButton } from '@datagouv/components-next'
+import { AnimatedLoader, BannerAction, BrandedButton, toast } from '@datagouv/components-next'
 import type { Organization, Badge } from '@datagouv/components-next'
 import DescribeOrganizationFrom from '~/components/Organization/New/Step2DescribeOrganization.vue'
 import { updateOrganization, updateOrganizationBadges, uploadLogo } from '~/api/organizations'
@@ -102,7 +102,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useTranslation()
-const { toast } = useToast()
 const { $api } = useNuxtApp()
 const { start, finish, isLoading } = useLoadingIndicator()
 
diff --git a/pages/admin/posts/[id]/content.vue b/pages/admin/posts/[id]/content.vue
index 0d2baa5a0..4fcb5325e 100644
--- a/pages/admin/posts/[id]/content.vue
+++ b/pages/admin/posts/[id]/content.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script setup lang="ts">
+import { toast } from '@datagouv/components-next'
 import PostContentForm from '~/components/Posts/PostContentForm.vue'
 import type { Post } from '~/types/posts'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/posts/${route.params.id}/`)
diff --git a/pages/admin/posts/[id]/index.vue b/pages/admin/posts/[id]/index.vue
index 74a1e3ea0..9d04fdc47 100644
--- a/pages/admin/posts/[id]/index.vue
+++ b/pages/admin/posts/[id]/index.vue
@@ -33,13 +33,12 @@
 </template>
 
 <script setup lang="ts">
-import { BannerAction, BrandedButton } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, toast } from '@datagouv/components-next'
 import DescribePost from '~/components/Posts/DescribePost.vue'
 import type { Post, PostForm } from '~/types/posts'
 
 const { t } = useTranslation()
 const { $api, $fileApi } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/posts/${route.params.id}/`)
diff --git a/pages/admin/topics/[id]/index.vue b/pages/admin/topics/[id]/index.vue
index d5a44d436..9f88b5961 100644
--- a/pages/admin/topics/[id]/index.vue
+++ b/pages/admin/topics/[id]/index.vue
@@ -30,8 +30,8 @@
 </template>
 
 <script setup lang="ts">
+import { BrandedButton, toast } from '@datagouv/components-next'
 import type { TopicV2 } from '@datagouv/components-next'
-import { BrandedButton } from '@datagouv/components-next'
 
 const props = defineProps<{
   topic: TopicV2
@@ -49,7 +49,6 @@ const { form, validate, getFirstError, getFirstWarning } = useForm({
 }, {})
 
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 const { t } = useTranslation()
 
 const save = async () => {
diff --git a/pages/login.vue b/pages/login.vue
index c8bc3be8f..eb6bf6211 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -114,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, toast } from '@datagouv/components-next'
 import type { FieldsErrors } from '~/types/form'
 import { usePostApiWithCsrf } from '~/utils/api'
 
@@ -123,7 +123,6 @@ definePageMeta({
 })
 
 const { t } = useTranslation()
-const { toast } = useToast()
 const config = useRuntimeConfig()
 
 useSeoMeta({ title: t('Connexion') })
diff --git a/pages/organizations/[oid]/information.vue b/pages/organizations/[oid]/information.vue
index 532a961a1..cbbe2fb7e 100644
--- a/pages/organizations/[oid]/information.vue
+++ b/pages/organizations/[oid]/information.vue
@@ -277,7 +277,7 @@
 </template>
 
 <script setup lang="ts">
-import { Avatar, BrandedButton, CopyButton, OrganizationLogo, OrganizationNameWithCertificate, StatBox, getOrganizationOEmbedHtml, useFormatDate, useMetrics, createOrganizationMetricsUrl, type Organization, type OrganizationMetrics } from '@datagouv/components-next'
+import { Avatar, BrandedButton, CopyButton, OrganizationLogo, OrganizationNameWithCertificate, StatBox, getOrganizationOEmbedHtml, useFormatDate, useMetrics, createOrganizationMetricsUrl, type Organization, type OrganizationMetrics, toast } from '@datagouv/components-next'
 import { RiCheckLine, RiDownloadLine, RiTeamLine } from '@remixicon/vue'
 import Divider from '~/components/Divider.vue'
 import type { MembershipRequest, PendingMembershipRequest } from '~/types/types'
@@ -291,7 +291,6 @@ const { formatDate } = useFormatDate()
 
 const config = useRuntimeConfig()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 const me = useMaybeMe()
 
 const { getOrganizationMetrics } = useMetrics()
diff --git a/pages/register.vue b/pages/register.vue
index 36c76b99f..b3ec5b8ad 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -142,7 +142,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner, TranslationT } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, TranslationT, toast } from '@datagouv/components-next'
 import type { FieldsErrors } from '~/types/form'
 
 definePageMeta({
@@ -176,7 +176,6 @@ onMounted(() => {
 })
 
 const postApiWithCsrf = usePostApiWithCsrf()
-const { toast } = useToast()
 const me = useMe()
 
 const connect = async () => {
diff --git a/pages/reset/[token].vue b/pages/reset/[token].vue
index a3251918d..f9de7ad7e 100644
--- a/pages/reset/[token].vue
+++ b/pages/reset/[token].vue
@@ -55,14 +55,13 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, toast } from '@datagouv/components-next'
 import type { FieldsErrors } from '~/types/form'
 
 definePageMeta({
   matomoIgnore: true,
 })
 
-const { toast } = useToast()
 const { t } = useTranslation()
 const route = useRoute()
 const me = useMaybeMe()
diff --git a/plugins/api.ts b/plugins/api.ts
index cf73c2020..d92329b50 100644
--- a/plugins/api.ts
+++ b/plugins/api.ts
@@ -1,3 +1,5 @@
+import { toast } from '@datagouv/components-next'
+
 export default defineNuxtPlugin({
   async setup(nuxtApp) {
     const config = useRuntimeConfig()
@@ -6,7 +8,6 @@ export default defineNuxtPlugin({
     const route = useRoute()
     const { t, locale } = useTranslation()
 
-    const { toast } = useToast()
     const makeApi = (apiOptions: { sendJson: boolean, redirectOn404: boolean }) => {
       return $fetch.create({
         baseURL: config.public.apiBase,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58f0d8100..1f3d29fe8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,9 +107,6 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
-      mitt:
-        specifier: ^3.0.1
-        version: 3.0.1
       nuxt:
         specifier: ~3.16.2
         version: 3.16.2(@parcel/watcher@2.5.1)(@types/node@20.19.18)(db0@0.3.2)(eslint@9.36.0(jiti@2.6.0))(ioredis@5.8.0)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.7(@types/node@20.19.18)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.1)
@@ -297,6 +294,9 @@ importers:
       vue-router:
         specifier: ^4.5.0
         version: 4.5.1(vue@3.5.22(typescript@5.9.2))
+      vue-sonner:
+        specifier: ^2.0.9
+        version: 2.0.9(@nuxt/kit@4.1.2(magicast@0.3.5))(nuxt@3.16.2(@parcel/watcher@2.5.1)(@types/node@20.19.18)(db0@0.3.2)(eslint@9.36.0(jiti@2.6.0))(ioredis@5.8.0)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.7(@types/node@20.19.18)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.1))
       vue3-json-viewer:
         specifier: ^2.4.1
         version: 2.4.1(vue@3.5.22(typescript@5.9.2))
@@ -363,7 +363,7 @@ importers:
         version: 7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vite-plugin-vue-devtools:
         specifier: ^8.0
-        version: 8.0.5(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.2))
+        version: 8.0.5(@nuxt/kit@4.1.2(magicast@0.3.5))(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.2))
       vue-tsc:
         specifier: ^3.0
         version: 3.1.0(typescript@5.9.2)
@@ -7857,6 +7857,20 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-sonner@2.0.9:
+    resolution: {integrity: sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==}
+    peerDependencies:
+      '@nuxt/kit': ^4.0.3
+      '@nuxt/schema': ^4.0.3
+      nuxt: ^4.0.3
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@nuxt/schema':
+        optional: true
+      nuxt:
+        optional: true
+
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
@@ -17256,7 +17270,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-inspect@11.3.3(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-inspect@11.3.3(@nuxt/kit@4.1.2(magicast@0.3.5))(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       ansis: 4.2.0
       debug: 4.4.3
@@ -17268,17 +17282,19 @@ snapshots:
       unplugin-utils: 0.3.0
       vite: 7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vite-dev-rpc: 1.1.0(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+    optionalDependencies:
+      '@nuxt/kit': 4.1.2(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-devtools@8.0.5(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.2)):
+  vite-plugin-vue-devtools@8.0.5(@nuxt/kit@4.1.2(magicast@0.3.5))(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.2)):
     dependencies:
       '@vue/devtools-core': 8.0.5(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.2))
       '@vue/devtools-kit': 8.0.5
       '@vue/devtools-shared': 8.0.5
       sirv: 3.0.2
       vite: 7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      vite-plugin-inspect: 11.3.3(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      vite-plugin-inspect: 11.3.3(@nuxt/kit@4.1.2(magicast@0.3.5))(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       vite-plugin-vue-inspector: 5.3.2(vite@7.1.7(@types/node@22.18.7)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -17399,6 +17415,11 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.2)
 
+  vue-sonner@2.0.9(@nuxt/kit@4.1.2(magicast@0.3.5))(nuxt@3.16.2(@parcel/watcher@2.5.1)(@types/node@20.19.18)(db0@0.3.2)(eslint@9.36.0(jiti@2.6.0))(ioredis@5.8.0)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.7(@types/node@20.19.18)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.1)):
+    optionalDependencies:
+      '@nuxt/kit': 4.1.2(magicast@0.3.5)
+      nuxt: 3.16.2(@parcel/watcher@2.5.1)(@types/node@20.19.18)(db0@0.3.2)(eslint@9.36.0(jiti@2.6.0))(ioredis@5.8.0)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.3)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.2)(vite@7.1.7(@types/node@20.19.18)(jiti@2.6.0)(lightningcss@1.30.2)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.2))(yaml@2.8.1)
+
   vue-template-compiler@2.7.16:
     dependencies:
       de-indent: 1.0.2

From 473bda11bbe4412040e7f9e12073720a0c25d248 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 22 Dec 2025 11:22:12 +0100
Subject: [PATCH 2/6] Set colors

---
 app.vue                                       |  1 -
 datagouv-components/assets/main.css           | 38 +++++++++++++++++++
 .../src/components/CopyButton.vue             |  4 +-
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/app.vue b/app.vue
index ae899a568..a1f439c35 100644
--- a/app.vue
+++ b/app.vue
@@ -4,7 +4,6 @@
   <Toaster
     position="bottom-right"
     :duration="4000"
-    rich-colors
     close-button
   />
   <div
diff --git a/datagouv-components/assets/main.css b/datagouv-components/assets/main.css
index fc9e9d98f..67f867d12 100644
--- a/datagouv-components/assets/main.css
+++ b/datagouv-components/assets/main.css
@@ -210,4 +210,42 @@
   meter.quality-score:-moz-meter-optimum::-moz-meter-bar {
     background-color: #27A658;
   }
+
+  /* Vue Sonner Toast custom colors */
+  [data-sonner-toast][data-type="success"] {
+    background-color: var(--color-new-success-light) !important;
+    color: var(--color-new-success) !important;
+    border-color: var(--color-new-success) !important;
+  }
+  [data-sonner-toast][data-type="success"] [data-close-button] {
+    border-color: var(--color-new-success) !important;
+    color: var(--color-new-success) !important;
+  }
+  [data-sonner-toast][data-type="error"] {
+    background-color: var(--color-new-error-light) !important;
+    color: var(--color-new-error) !important;
+    border-color: var(--color-new-error) !important;
+  }
+  [data-sonner-toast][data-type="error"] [data-close-button] {
+    border-color: var(--color-new-error) !important;
+    color: var(--color-new-error) !important;
+  }
+  [data-sonner-toast][data-type="warning"] {
+    background-color: var(--color-new-warning-light) !important;
+    color: var(--color-new-warning) !important;
+    border-color: var(--color-new-warning) !important;
+  }
+  [data-sonner-toast][data-type="warning"] [data-close-button] {
+    border-color: var(--color-new-warning) !important;
+    color: var(--color-new-warning) !important;
+  }
+  [data-sonner-toast][data-type="info"] {
+    background-color: var(--color-new-info-light) !important;
+    color: var(--color-new-info) !important;
+    border-color: var(--color-new-info) !important;
+  }
+  [data-sonner-toast][data-type="info"] [data-close-button] {
+    border-color: var(--color-new-info) !important;
+    color: var(--color-new-info) !important;
+  }
 }
diff --git a/datagouv-components/src/components/CopyButton.vue b/datagouv-components/src/components/CopyButton.vue
index 9f7687b1d..5d945ee83 100644
--- a/datagouv-components/src/components/CopyButton.vue
+++ b/datagouv-components/src/components/CopyButton.vue
@@ -38,6 +38,7 @@
 import { RiCheckLine, RiClipboardLine, RiFileCopyLine } from '@remixicon/vue'
 import { ref } from 'vue'
 import { toast } from 'vue-sonner'
+import { useTranslation } from '../composables/useTranslation'
 
 const props = withDefaults(defineProps<{
   text: string
@@ -50,6 +51,7 @@ const props = withDefaults(defineProps<{
   reverse: false,
 })
 
+const { t } = useTranslation()
 const copied = ref(false)
 
 const copy = async () => {
@@ -59,7 +61,7 @@ const copy = async () => {
     setTimeout(() => copied.value = false, 2000)
   }
   catch {
-    toast.error('Impossible de copier dans le presse-papier')
+    toast.error(t('Impossible de copier dans le presse-papier'))
   }
 }
 </script>

From 06f1100ed1e96aa7df1c145ff892ccf7ec848d82 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 22 Dec 2025 11:32:07 +0100
Subject: [PATCH 3/6] fix merge

---
 datagouv-components/assets/main.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/datagouv-components/assets/main.css b/datagouv-components/assets/main.css
index df5a7608f..cd3187065 100644
--- a/datagouv-components/assets/main.css
+++ b/datagouv-components/assets/main.css
@@ -256,6 +256,8 @@
   [data-sonner-toast][data-type="info"] [data-close-button] {
     border-color: var(--color-new-info) !important;
     color: var(--color-new-info) !important;
+  }
+
   .fr-connect {
     padding-left: 4.375em !important;
   }

From 7660a62eb61bf3e28a0a61028bf28fa5308d41b9 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 23 Dec 2025 09:53:29 +0100
Subject: [PATCH 4/6] use dataset instead of datasetForm

---
 components/Datasets/AdminUpdateDatasetPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Datasets/AdminUpdateDatasetPage.vue b/components/Datasets/AdminUpdateDatasetPage.vue
index f6df1ef13..3a8166cec 100644
--- a/components/Datasets/AdminUpdateDatasetPage.vue
+++ b/components/Datasets/AdminUpdateDatasetPage.vue
@@ -215,7 +215,7 @@ async function switchDatasetPrivate() {
       body: JSON.stringify(datasetToApi(datasetForm.value, { private: !datasetForm.value.private })),
     })
     await refresh()
-    if (datasetForm.value.private) {
+    if (dataset.value?.private) {
       toast.success(t('Jeu de données passé en brouillon !'))
     }
     else {

From 07deae43eb60939468bbeb28a0b85f33414cb372 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 23 Dec 2025 09:56:24 +0100
Subject: [PATCH 5/6] fix archived toast messages

---
 components/Dataservices/AdminUpdateDataservicePage.vue | 4 ++--
 components/Datasets/AdminUpdateDatasetPage.vue         | 4 ++--
 components/Reuses/AdminUpdateReusePage.vue             | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/Dataservices/AdminUpdateDataservicePage.vue b/components/Dataservices/AdminUpdateDataservicePage.vue
index 9f214515d..0038872ed 100644
--- a/components/Dataservices/AdminUpdateDataservicePage.vue
+++ b/components/Dataservices/AdminUpdateDataservicePage.vue
@@ -201,10 +201,10 @@ async function archiveDataservice() {
     })
     await refresh()
     if (dataservice.value?.archived_at) {
-      toast.success(t('API désarchivée !'))
+      toast.success(t('API archivée !'))
     }
     else {
-      toast.success(t('API archivée !'))
+      toast.success(t('API désarchivée !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
diff --git a/components/Datasets/AdminUpdateDatasetPage.vue b/components/Datasets/AdminUpdateDatasetPage.vue
index 3a8166cec..e764ff200 100644
--- a/components/Datasets/AdminUpdateDatasetPage.vue
+++ b/components/Datasets/AdminUpdateDatasetPage.vue
@@ -253,10 +253,10 @@ async function archiveDataset() {
     })
     await refresh()
     if (dataset.value?.archived) {
-      toast.success(t('Jeu de données désarchivé !'))
+      toast.success(t('Jeu de données archivé !'))
     }
     else {
-      toast.success(t('Jeu de données archivé !'))
+      toast.success(t('Jeu de données désarchivé !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
diff --git a/components/Reuses/AdminUpdateReusePage.vue b/components/Reuses/AdminUpdateReusePage.vue
index 8b5109316..9aa569bf4 100644
--- a/components/Reuses/AdminUpdateReusePage.vue
+++ b/components/Reuses/AdminUpdateReusePage.vue
@@ -222,10 +222,10 @@ async function archiveReuse() {
 
     await refresh()
     if (reuse.value?.archived) {
-      toast.success(t('Réutilisation désarchivée !'))
+      toast.success(t('Réutilisation archivée !'))
     }
     else {
-      toast.success(t('Réutilisation archivée !'))
+      toast.success(t('Réutilisation désarchivée !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }

From b2457584d33ab613293cf34f0fc33a6f71eed9fa Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Tue, 23 Dec 2025 10:03:54 +0100
Subject: [PATCH 6/6] fix reuse message

---
 components/Reuses/AdminUpdateReusePage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Reuses/AdminUpdateReusePage.vue b/components/Reuses/AdminUpdateReusePage.vue
index 9aa569bf4..ae771aeba 100644
--- a/components/Reuses/AdminUpdateReusePage.vue
+++ b/components/Reuses/AdminUpdateReusePage.vue
@@ -248,10 +248,10 @@ async function switchReusePrivate() {
 
     await refresh()
     if (reuse.value?.private) {
-      toast.success(t('Réutilisation publiée !'))
+      toast.success(t('Réutilisation passée en brouillon !'))
     }
     else {
-      toast.success(t('Réutilisation passée en brouillon !'))
+      toast.success(t('Réutilisation publiée !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }