diff --git a/confiture-web-app/src/components/overview/AuditStep.vue b/confiture-web-app/src/components/overview/AuditStep.vue
index 463091c95..39b55db47 100644
--- a/confiture-web-app/src/components/overview/AuditStep.vue
+++ b/confiture-web-app/src/components/overview/AuditStep.vue
@@ -130,10 +130,7 @@ const auditIsInProgress = computed(() => {
     />
 
     <ul
-      :class="[
-        'fr-btns-group fr-btns-group--icon-left audit-step-card-actions',
-        { 'audit-step-card-actions--half': auditIsReady }
-      ]"
+      class="fr-btns-group fr-btns-group--icon-left audit-step-card-actions"
     >
       <li>
         <RouterLink
@@ -215,10 +212,6 @@ const auditIsInProgress = computed(() => {
   grid-column: 1 / -1;
 }
 
-.audit-step-card-actions--half {
-  grid-column: 1;
-}
-
 @media (width < 48rem) {
   .audit-step-charts {
     grid-template-columns: 1fr;
diff --git a/confiture-web-app/src/components/overview/GridStep.vue b/confiture-web-app/src/components/overview/GridStep.vue
index 73a843772..544a0e148 100644
--- a/confiture-web-app/src/components/overview/GridStep.vue
+++ b/confiture-web-app/src/components/overview/GridStep.vue
@@ -62,8 +62,7 @@ const csvExportSizeEstimation = computed(() => {
     <ul class="fr-btns-group fr-btns-group--icon-left">
       <li>
         <a
-          class="fr-btn fr-mb-1w fr-btn--icon-left fr-icon-download-line"
-          :class="auditIsReady ? 'fr-btn--secondary' : 'fr-btn--tertiary'"
+          class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-download-line fr-mb-1w"
           aria-describedby="audit-grid-step-download-informations"
           :href="csvExportUrl"
           :download="csvExportFilename"
diff --git a/confiture-web-app/src/components/overview/ReportStep.vue b/confiture-web-app/src/components/overview/ReportStep.vue
index 50c0fb8c7..69f3dfed2 100644
--- a/confiture-web-app/src/components/overview/ReportStep.vue
+++ b/confiture-web-app/src/components/overview/ReportStep.vue
@@ -3,7 +3,7 @@ import { computed } from "vue";
 
 import { useResultsStore } from "../../store";
 import { Audit } from "../../types";
-import CopyBlock from "../ui/CopyBlock.vue";
+import CopyButton from "../ui/CopyButton.vue";
 import StepCard from "./StepCard.vue";
 
 defineProps<{
@@ -46,17 +46,33 @@ const auditIsReady = computed(() => {
           : "Terminez l’audit avant de livrer le rapport d’audit."
       }}
     </p>
-    <CopyBlock
-      class="report-step-copy"
-      :to="{
-        name: 'report',
-        params: { uniqueId: audit.consultUniqueId }
-      }"
-      :show-copy-button="auditIsReady"
-      success-message="Le lien vers le rapport d’audit a bien été copié dans le presse-papier."
-      link-hidden-label="le rapport"
-      copy-button-hidden-label="du rapport"
-    />
+    <div class="report-step-actions">
+      <div class="fr-btns-group fr-btns-group--icon-left">
+        <RouterLink
+          :to="{
+            name: 'report',
+            params: { uniqueId: audit.consultUniqueId }
+          }"
+          target="_blank"
+          class="fr-btn fr-btn--tertiary fr-mb-0"
+        >
+          Consulter
+          <span class="fr-sr-only">le rapport (nouvelle fenêtre)</span>
+        </RouterLink>
+      </div>
+
+      <div class="fr-btns-group fr-btns-group--icon-left">
+        <CopyButton
+          hidden-label-suffix="du rapport"
+          icon="fr-icon-link"
+          :content-to-copy="{
+            name: 'report',
+            params: { uniqueId: audit.consultUniqueId }
+          }"
+          is-within-btn-group
+        />
+      </div>
+    </div>
   </StepCard>
 </template>
 
@@ -69,4 +85,16 @@ const auditIsReady = computed(() => {
 .report-step-copy {
   grid-column: 1 / -1;
 }
+
+.report-step-actions {
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: subgrid;
+
+  @media (width < 48rem) {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 1rem;
+  }
+}
 </style>
diff --git a/confiture-web-app/src/components/overview/StatementStep.vue b/confiture-web-app/src/components/overview/StatementStep.vue
index 32553e7a1..52ba55021 100644
--- a/confiture-web-app/src/components/overview/StatementStep.vue
+++ b/confiture-web-app/src/components/overview/StatementStep.vue
@@ -4,7 +4,7 @@ import { computed } from "vue";
 import { useResultsStore } from "../../store";
 import { Audit } from "../../types";
 import { formatDate, isSameDay } from "../../utils";
-import CopyBlock from "../ui/CopyBlock.vue";
+import CopyButton from "../ui/CopyButton.vue";
 import StepCard from "./StepCard.vue";
 
 const props = defineProps<{
@@ -68,20 +68,32 @@ const auditIsPublishable = computed(() => {
       </template>
     </p>
 
-    <CopyBlock
-      v-if="auditIsPublishable"
-      class="statement-step-copy"
-      :to="{
-        name: 'a11y-statement',
-        params: {
-          uniqueId: audit.consultUniqueId
-        }
-      }"
-      :show-copy-button="auditIsPublishable"
-      success-message="Le lien vers la déclaration d’accessibilité a bien été copié dans le presse-papier."
-      link-hidden-label="la déclaration d’accessibilité"
-      copy-button-hidden-label="de la déclaration d’accessibilité"
-    />
+    <div v-if="auditIsPublishable" class="statement-step-actions">
+      <div class="fr-btns-group fr-btns-group--icon-left">
+        <RouterLink
+          :to="{
+            name: 'a11y-statement',
+            params: { uniqueId: audit.consultUniqueId }
+          }"
+          target="_blank"
+          class="fr-btn fr-btn--tertiary fr-mb-0"
+        >
+          Consulter
+          <span class="fr-sr-only">la déclaration d’accessibilité (nouvelle fenêtre)</span>
+        </RouterLink>
+      </div>
+      <div class="fr-btns-group fr-btns-group--icon-left">
+        <CopyButton
+          hidden-label-suffix="de la déclaration"
+          icon="fr-icon-link"
+          :content-to-copy="{
+            name: 'a11y-statement',
+            params: { uniqueId: audit.consultUniqueId }
+          }"
+          is-within-btn-group
+        />
+      </div>
+    </div>
 
     <ul
       v-else
@@ -145,4 +157,16 @@ const auditIsPublishable = computed(() => {
 .statement-step-copy {
   grid-column: 1 / -1;
 }
+
+.statement-step-actions {
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: subgrid;
+
+  @media (width < 48rem) {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 1rem;
+  }
+}
 </style>
diff --git a/confiture-web-app/src/components/ui/CopyBlock.vue b/confiture-web-app/src/components/ui/CopyBlock.vue
deleted file mode 100644
index 2ece311b7..000000000
--- a/confiture-web-app/src/components/ui/CopyBlock.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import { RouteLocationRaw } from "vue-router";
-
-import router from "../../router";
-
-const props = defineProps<{
-  linkHiddenLabel: string;
-  copyButtonHiddenLabel: string;
-  to: RouteLocationRaw;
-  showCopyButton: boolean;
-  successMessage: string;
-}>();
-
-const showCopyAlert = ref(false);
-
-const fullUrl = computed(
-  () => window.location.origin + router.resolve(props.to).fullPath
-);
-
-async function copyUrl() {
-  navigator.clipboard.writeText(fullUrl.value).then(() => {
-    showCopyAlert.value = true;
-  });
-}
-
-const copyButtonRef = ref<HTMLButtonElement>();
-
-function onAlertClose() {
-  copyButtonRef.value?.focus();
-  showCopyAlert.value = false;
-}
-</script>
-
-<template>
-  <div class="copy-block">
-    <ul
-      class="fr-btns-group fr-btns-group--inline-md fr-btns-group--icon-left copy-block-actions"
-    >
-      <li class="fr-mb-2w fr-mb-md-0">
-        <RouterLink
-          :to="to"
-          target="_blank"
-          class="fr-btn fr-btn--tertiary fr-mb-0"
-        >
-          Consulter
-          <span class="fr-sr-only">{{ linkHiddenLabel }} (nouvelle fenêtre)</span>
-        </RouterLink>
-      </li>
-      <li v-if="showCopyButton">
-        <button
-          ref="copyButtonRef"
-          class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-file-copy-line fr-mb-0"
-          @click="copyUrl"
-        >
-          Copier le lien de partage
-          <span class="fr-sr-only">{{ copyButtonHiddenLabel }}</span>
-        </button>
-      </li>
-    </ul>
-
-    <div role="alert" aria-live="polite" class="copy-block-alert">
-      <div
-        v-if="showCopyAlert"
-        class="fr-alert fr-alert--success fr-alert--sm fr-mt-2w"
-      >
-        <p>{{ successMessage }}</p>
-        <button class="fr-link fr-link--close" @click="onAlertClose">
-          Masquer le message
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.copy-block {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.copy-block-actions {
-  grid-column: 1 / -1;
-
-  li:first-child {
-    width: 50%;
-
-    @media (width < 48rem) {
-      width: 100%;
-    }
-  }
-
-  li:last-child {
-    min-width: 18rem;
-  }
-
-  li > a,
-  li > button {
-    width: calc(100% - 1rem);
-  }
-}
-
-.copy-block-alert {
-  grid-column: 1 / -1;
-}
-</style>
diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
new file mode 100644
index 000000000..3c7290783
--- /dev/null
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { RouteLocationRaw } from "vue-router";
+import router from "../../router";
+
+/**
+ * FIXME: trigger warning ⚠️ the code of the following component is a bit dirty.
+ *
+ * The goal is to create a button that changes its content
+ * when clicked without changing its size, in 2 different contexts.
+ */
+const props = withDefaults(defineProps<{
+  icon: string;
+  label?: string;
+  successLabel?: string;
+  hiddenLabelSuffix?: string;
+  contentToCopy: string | RouteLocationRaw;
+  isWithinBtnGroup?: boolean;
+}>(), {
+  label: "Copier le lien de partage",
+  successLabel: "Lien copié"
+});
+
+const showSuccess = ref(false);
+
+function copyContentToClipboard() {
+  if (showSuccess.value) return;
+
+  const content = typeof props.contentToCopy === "string"
+    ? props.contentToCopy
+    : window.location.origin + router.resolve(props.contentToCopy).fullPath;
+
+  navigator.clipboard.writeText(content).then(() => {
+    showSuccess.value = true;
+  });
+
+  setTimeout(() => {
+    showSuccess.value = false;
+  }, 3500);
+}
+</script>
+
+<template>
+  <button
+    ref="copyButtonRef"
+    type="button"
+    :class="[`fr-btn fr-btn--secondary fr-btn--icon-left ${showSuccess ? 'fr-icon-check-line copy-button--success' : icon} copy-button`, {
+      'copy-button--within-btn-group fr-mb-0': isWithinBtnGroup
+    }]"
+    @click="copyContentToClipboard"
+  >
+    <template v-if="isWithinBtnGroup">
+      {{ showSuccess ? successLabel : label }}
+    </template>
+
+    <span v-else class="copy-button-outer-wrapper" :style="{ '--content': `'${label}'` }">
+      <span class="copy-button-inner-wrapper">
+        <template v-if="showSuccess">
+          <span class="fr-icon-check-line copy-button-success-icon" aria-hidden="true" />
+          {{ successLabel }}
+        </template>
+        <template v-else>
+          {{ label }}
+        </template>
+      </span>
+    </span>
+
+    <span v-if="hiddenLabelSuffix" class="fr-sr-only">{{ hiddenLabelSuffix }}</span>
+  </button>
+</template>
+
+<style scoped>
+.copy-button {
+  &:not(.copy-button--within-btn-group) {
+    .copy-button-outer-wrapper {
+      position: relative;
+
+      &::after {
+        content: var(--content);
+        visibility: hidden;
+      }
+
+      .copy-button-inner-wrapper {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .copy-button-success-icon::before {
+        --icon-size: 1rem;
+      }
+    }
+  }
+}
+
+.copy-button--success {
+  color: var(--text-default-success) !important;
+  box-shadow: inset 0 0 0 1px var(--text-default-success) !important;
+
+  &:not(.copy-button--within-btn-group) {
+    .copy-button-inner-wrapper {
+      translate: 1.5rem;
+    }
+
+    &::before {
+      opacity: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index bbb2960a8..270618d38 100644
--- a/confiture-web-app/src/pages/report/ReportPage.vue
+++ b/confiture-web-app/src/pages/report/ReportPage.vue
@@ -9,6 +9,7 @@ import ReportErrors from "../../components/report/ReportErrors.vue";
 import ReportImprovements from "../../components/report/ReportImprovements.vue";
 import ReportNotes from "../../components/report/ReportNotes.vue";
 import ReportResults from "../../components/report/ReportResults.vue";
+import CopyButton from "../../components/ui/CopyButton.vue";
 import Dropdown from "../../components/ui/Dropdown.vue";
 import TopLink from "../../components/ui/TopLink.vue";
 import { useWrappedFetch } from "../../composables/useWrappedFetch";
@@ -35,7 +36,6 @@ const report = useReportStore();
 
 const router = useRouter();
 
-const showCopyAlert = ref(false);
 const onboardingModalRef = ref<InstanceType<typeof OnboardingModal>>();
 const tabsRef = ref<InstanceType<typeof AraTabs>>();
 
@@ -120,23 +120,10 @@ const siteUrl = computed(() => {
   return null;
 });
 
-const copyReportButtonRef = ref<HTMLButtonElement>();
-
-async function copyReportUrl() {
-  const url =
-    window.location.origin +
+const reportUrlToCopy =
+  window.location.origin +
     router.resolve({ name: "report", params: { uniqueId } }).fullPath;
 
-  navigator.clipboard.writeText(url).then(() => {
-    showCopyAlert.value = true;
-  });
-}
-
-function hideReportAlert() {
-  showCopyAlert.value = false;
-  copyReportButtonRef.value?.focus();
-}
-
 function onOnboardingClose() {
   localStorage.setItem("confiture:seen-onboarding", "true");
 }
@@ -175,13 +162,11 @@ watch(
   <div class="fr-mb-3v heading">
     <h1 class="fr-mb-0">Rapport d’audit accessibilité</h1>
     <div class="heading-actions">
-      <button
-        ref="copyReportButtonRef"
-        class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-links-fill"
-        @click="copyReportUrl"
-      >
-        Copier le lien du rapport
-      </button>
+      <CopyButton
+        icon="fr-icon-link"
+        :content-to-copy="reportUrlToCopy"
+        label="Copier le lien du rapport"
+      />
       <Dropdown
         title="Télécharger"
         :button-props="{ class: 'fr-btn--secondary' }"
@@ -204,18 +189,6 @@ watch(
     </div>
   </div>
 
-  <div role="alert" aria-live="polite">
-    <div
-      v-if="showCopyAlert"
-      class="fr-alert fr-alert--success fr-alert--sm fr-mb-2w"
-    >
-      <p>Le lien vers le rapport a bien été copié dans le presse-papier.</p>
-      <button class="fr-link fr-link--close" @click="hideReportAlert">
-        Masquer le message
-      </button>
-    </div>
-  </div>
-
   <template v-if="report.data">
     <PageMeta
       :title="pageTitle"
@@ -315,6 +288,7 @@ watch(
 .heading-actions {
   display: flex;
   gap: 1rem;
+  flex-wrap: wrap;
 }
 
 .dates {
diff --git a/cypress/e2e/audit.cy.ts b/cypress/e2e/audit.cy.ts
index 88f431a1b..ed5905001 100644
--- a/cypress/e2e/audit.cy.ts
+++ b/cypress/e2e/audit.cy.ts
@@ -598,9 +598,7 @@ describe("Audit", () => {
       cy.contains("a", "Accéder");
 
       cy.contains("button", "Copier le lien").click();
-      cy.contains(
-        "Le lien vers le rapport d’audit a bien été copié dans le presse-papier."
-      );
+      cy.contains("button", "Lien de partage copié");
       cy.assertClipboardValue(`http://localhost:3000/rapport/${reportId}/`);
     });
   });
diff --git a/cypress/e2e/report.cy.ts b/cypress/e2e/report.cy.ts
index c7f6ae880..761df9e21 100644
--- a/cypress/e2e/report.cy.ts
+++ b/cypress/e2e/report.cy.ts
@@ -39,9 +39,7 @@ describe("Report", () => {
       // Adding `force: true` to click() function solves the problem.
       cy.contains("button", "Copier le lien du rapport").click({ force: true });
       cy.assertClipboardValue(`http://localhost:3000/rapport/${reportId}/`);
-      cy.contains(
-        "Le lien vers le rapport a bien été copié dans le presse-papier."
-      );
+      cy.contains("button", "Lien copié");
     });
   });