From a9dd246faed791fa157df9716a561a68eec4e3a5 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 2 Apr 2026 14:54:53 +0200
Subject: [PATCH 01/12] feat: create copybutton component and use it on report
 page

---
 .../src/components/ui/CopyButton.vue          | 41 +++++++++++++++++
 .../src/pages/report/ReportPage.vue           | 44 ++++---------------
 2 files changed, 50 insertions(+), 35 deletions(-)
 create mode 100644 confiture-web-app/src/components/ui/CopyButton.vue

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..bb5ecc53e
--- /dev/null
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const props = defineProps<{
+  icon: string;
+  label: string;
+  successLabel: string;
+  contentToCopy: string;
+}>();
+
+const showSuccess = ref(false);
+
+function copyContent() {
+  navigator.clipboard.writeText(props.contentToCopy).then(() => {
+    showSuccess.value = true;
+  });
+
+  setTimeout(() => {
+    showSuccess.value = false;
+  }, 3500);
+}
+</script>
+
+<template>
+  <div class="fr-btns-group fr-btns-group--equisized fr-btns-group--icon-left">
+    <button
+      type="button"
+      :class="`fr-btn fr-btn--secondary ${showSuccess ? 'fr-icon-check-line copy-button--success' : icon} fr-m-0`"
+      @click="copyContent"
+    >
+      {{ showSuccess ? successLabel : label }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.copy-button--success {
+  color: var(--text-default-success) !important;
+  box-shadow: inset 0 0 0 1px var(--text-default-success) !important;
+}
+</style>
diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index bbb2960a8..f752f3d00 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,12 @@ 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"
+        success-label="Lien copié"
+      />
       <Dropdown
         title="Télécharger"
         :button-props="{ class: 'fr-btn--secondary' }"
@@ -204,18 +190,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"

From 0040984649721435a688055408987010fc5480e6 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 2 Apr 2026 17:03:59 +0200
Subject: [PATCH 02/12] feat: add copybutton component and use it, alone or
 within btn-group

---
 .../src/components/overview/ReportStep.vue    |  51 +++++++--
 .../src/components/overview/StatementStep.vue |  53 ++++++---
 .../src/components/ui/CopyBlock.vue           | 106 ------------------
 .../src/components/ui/CopyButton.vue          |  48 +++++---
 4 files changed, 112 insertions(+), 146 deletions(-)
 delete mode 100644 confiture-web-app/src/components/ui/CopyBlock.vue

diff --git a/confiture-web-app/src/components/overview/ReportStep.vue b/confiture-web-app/src/components/overview/ReportStep.vue
index 50c0fb8c7..3ed8e07bd 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,34 @@ 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"
+        >
+          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
+          label="Copier le lien de partage"
+          icon="fr-icon-link"
+          success-label="Lien copié"
+          :content-to-copy="{
+            name: 'report',
+            params: { uniqueId: audit.consultUniqueId }
+          }"
+          is-within-btn-group
+        />
+      </div>
+    </div>
   </StepCard>
 </template>
 
@@ -69,4 +86,14 @@ 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;
+  }
+}
 </style>
diff --git a/confiture-web-app/src/components/overview/StatementStep.vue b/confiture-web-app/src/components/overview/StatementStep.vue
index 32553e7a1..96675df29 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,33 @@ 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"
+        >
+          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
+          label="Copier le lien de partage"
+          icon="fr-icon-link"
+          success-label="Lien copié"
+          :content-to-copy="{
+            name: 'a11y-statement',
+            params: { uniqueId: audit.consultUniqueId }
+          }"
+          is-within-btn-group
+        />
+      </div>
+    </div>
 
     <ul
       v-else
@@ -145,4 +158,14 @@ 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;
+  }
+}
 </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
index bb5ecc53e..a086dead3 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -1,17 +1,25 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { templateRef } from "@vueuse/core";
+import { onMounted, ref } from "vue";
+import { RouteLocationRaw } from "vue-router";
+import router from "../../router";
 
 const props = defineProps<{
   icon: string;
   label: string;
   successLabel: string;
-  contentToCopy: string;
+  contentToCopy: string | RouteLocationRaw;
+  isWithinBtnGroup?: boolean;
 }>();
 
 const showSuccess = ref(false);
 
-function copyContent() {
-  navigator.clipboard.writeText(props.contentToCopy).then(() => {
+function copyContentToClipboard() {
+  const content = typeof props.contentToCopy === "string"
+    ? props.contentToCopy
+    : window.location.origin + router.resolve(props.contentToCopy).fullPath;
+
+  navigator.clipboard.writeText(content).then(() => {
     showSuccess.value = true;
   });
 
@@ -19,21 +27,35 @@ function copyContent() {
     showSuccess.value = false;
   }, 3500);
 }
+
+const initialButtonWidth = ref<string>();
+const copyButtonRef = templateRef("copyButtonRef");
+onMounted(() => {
+  initialButtonWidth.value = `${copyButtonRef.value?.offsetWidth}px`;
+});
 </script>
 
 <template>
-  <div class="fr-btns-group fr-btns-group--equisized fr-btns-group--icon-left">
-    <button
-      type="button"
-      :class="`fr-btn fr-btn--secondary ${showSuccess ? 'fr-icon-check-line copy-button--success' : icon} fr-m-0`"
-      @click="copyContent"
-    >
-      {{ showSuccess ? successLabel : label }}
-    </button>
-  </div>
+  <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': isWithinBtnGroup
+    }]"
+    @click="copyContentToClipboard"
+  >
+    {{ showSuccess ? successLabel : label }}
+  </button>
 </template>
 
 <style scoped>
+.copy-button {
+  &:not(.copy-button--within-btn-group) {
+    width: v-bind(initialButtonWidth) !important;
+    justify-content: center !important;
+  }
+}
+
 .copy-button--success {
   color: var(--text-default-success) !important;
   box-shadow: inset 0 0 0 1px var(--text-default-success) !important;

From cd286fa239c4a68193d089b85f12f5bd071ef6e0 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 2 Apr 2026 17:11:52 +0200
Subject: [PATCH 03/12] tests: update e2e tests wording

---
 cypress/e2e/audit.cy.ts  | 4 +---
 cypress/e2e/report.cy.ts | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/cypress/e2e/audit.cy.ts b/cypress/e2e/audit.cy.ts
index 88f431a1b..be6b24c5a 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 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é");
     });
   });
 

From 42815313150c4482e7a8eb0cef14f33b627396b4 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 2 Apr 2026 17:20:46 +0200
Subject: [PATCH 04/12] fix: spacing and wording

---
 confiture-web-app/src/components/overview/ReportStep.vue    | 6 ++++--
 confiture-web-app/src/components/overview/StatementStep.vue | 6 ++++--
 confiture-web-app/src/components/ui/CopyButton.vue          | 2 +-
 cypress/e2e/audit.cy.ts                                     | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/confiture-web-app/src/components/overview/ReportStep.vue b/confiture-web-app/src/components/overview/ReportStep.vue
index 3ed8e07bd..3885dcffe 100644
--- a/confiture-web-app/src/components/overview/ReportStep.vue
+++ b/confiture-web-app/src/components/overview/ReportStep.vue
@@ -54,7 +54,7 @@ const auditIsReady = computed(() => {
             params: { uniqueId: audit.consultUniqueId }
           }"
           target="_blank"
-          class="fr-btn fr-btn--tertiary"
+          class="fr-btn fr-btn--tertiary fr-mb-0"
         >
           Consulter
           <span class="fr-sr-only">le rapport (nouvelle fenêtre)</span>
@@ -65,7 +65,7 @@ const auditIsReady = computed(() => {
         <CopyButton
           label="Copier le lien de partage"
           icon="fr-icon-link"
-          success-label="Lien copié"
+          success-label="Lien de partage copié"
           :content-to-copy="{
             name: 'report',
             params: { uniqueId: audit.consultUniqueId }
@@ -94,6 +94,8 @@ const auditIsReady = computed(() => {
 
   @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 96675df29..ef57dfc0b 100644
--- a/confiture-web-app/src/components/overview/StatementStep.vue
+++ b/confiture-web-app/src/components/overview/StatementStep.vue
@@ -76,7 +76,7 @@ const auditIsPublishable = computed(() => {
             params: { uniqueId: audit.consultUniqueId }
           }"
           target="_blank"
-          class="fr-btn fr-btn--tertiary"
+          class="fr-btn fr-btn--tertiary fr-mb-0"
         >
           Consulter
           <span class="fr-sr-only">la déclaration d’accessibilité (nouvelle fenêtre)</span>
@@ -86,7 +86,7 @@ const auditIsPublishable = computed(() => {
         <CopyButton
           label="Copier le lien de partage"
           icon="fr-icon-link"
-          success-label="Lien copié"
+          success-label="Lien de partage copié"
           :content-to-copy="{
             name: 'a11y-statement',
             params: { uniqueId: audit.consultUniqueId }
@@ -166,6 +166,8 @@ const auditIsPublishable = computed(() => {
 
   @media (width < 48rem) {
     grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 1rem;
   }
 }
 </style>
diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index a086dead3..7137792a6 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -40,7 +40,7 @@ onMounted(() => {
     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': isWithinBtnGroup
+      'copy-button--within-btn-group fr-mb-0': isWithinBtnGroup
     }]"
     @click="copyContentToClipboard"
   >
diff --git a/cypress/e2e/audit.cy.ts b/cypress/e2e/audit.cy.ts
index be6b24c5a..ed5905001 100644
--- a/cypress/e2e/audit.cy.ts
+++ b/cypress/e2e/audit.cy.ts
@@ -598,7 +598,7 @@ describe("Audit", () => {
       cy.contains("a", "Accéder");
 
       cy.contains("button", "Copier le lien").click();
-      cy.contains("button", "Lien copié");
+      cy.contains("button", "Lien de partage copié");
       cy.assertClipboardValue(`http://localhost:3000/rapport/${reportId}/`);
     });
   });

From 5a8c0c146d2e9bcaa84118e24f10e411d67bbee9 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 8 Apr 2026 10:40:41 +0200
Subject: [PATCH 05/12] feat: add default labels value for copybutton

---
 .../src/components/overview/ReportStep.vue            |  2 --
 .../src/components/overview/StatementStep.vue         |  2 --
 confiture-web-app/src/components/ui/CopyButton.vue    | 11 +++++++----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/confiture-web-app/src/components/overview/ReportStep.vue b/confiture-web-app/src/components/overview/ReportStep.vue
index 3885dcffe..8069189de 100644
--- a/confiture-web-app/src/components/overview/ReportStep.vue
+++ b/confiture-web-app/src/components/overview/ReportStep.vue
@@ -63,9 +63,7 @@ const auditIsReady = computed(() => {
 
       <div class="fr-btns-group fr-btns-group--icon-left">
         <CopyButton
-          label="Copier le lien de partage"
           icon="fr-icon-link"
-          success-label="Lien de partage copié"
           :content-to-copy="{
             name: 'report',
             params: { uniqueId: audit.consultUniqueId }
diff --git a/confiture-web-app/src/components/overview/StatementStep.vue b/confiture-web-app/src/components/overview/StatementStep.vue
index ef57dfc0b..65b5e3150 100644
--- a/confiture-web-app/src/components/overview/StatementStep.vue
+++ b/confiture-web-app/src/components/overview/StatementStep.vue
@@ -84,9 +84,7 @@ const auditIsPublishable = computed(() => {
       </div>
       <div class="fr-btns-group fr-btns-group--icon-left">
         <CopyButton
-          label="Copier le lien de partage"
           icon="fr-icon-link"
-          success-label="Lien de partage copié"
           :content-to-copy="{
             name: 'a11y-statement',
             params: { uniqueId: audit.consultUniqueId }
diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index 7137792a6..bd50578d9 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -4,13 +4,16 @@ import { onMounted, ref } from "vue";
 import { RouteLocationRaw } from "vue-router";
 import router from "../../router";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   icon: string;
-  label: string;
-  successLabel: string;
+  label?: string;
+  successLabel?: string;
   contentToCopy: string | RouteLocationRaw;
   isWithinBtnGroup?: boolean;
-}>();
+}>(), {
+  label: "Copier le lien de partage",
+  successLabel: "Lien de partage copié"
+});
 
 const showSuccess = ref(false);
 

From 959c6ded2c4389ba4e9cddb0487a65eb511bffe1 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 8 Apr 2026 10:44:59 +0200
Subject: [PATCH 06/12] fix: wrap button group in report page

---
 confiture-web-app/src/pages/report/ReportPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index f752f3d00..04c6482ec 100644
--- a/confiture-web-app/src/pages/report/ReportPage.vue
+++ b/confiture-web-app/src/pages/report/ReportPage.vue
@@ -289,6 +289,7 @@ watch(
 .heading-actions {
   display: flex;
   gap: 1rem;
+  flex-wrap: wrap;
 }
 
 .dates {

From ba10b0fa101e287018a1683b85befcd34b7576c3 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 8 Apr 2026 10:47:44 +0200
Subject: [PATCH 07/12] fix: return if showsuccess is already true to avoid
 creating multiple settimeout

---
 confiture-web-app/src/components/ui/CopyButton.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index bd50578d9..df960cf61 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<{
 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;

From d304ea6246663085d697cdf103f47e6855ea38ec Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 8 Apr 2026 11:33:37 +0200
Subject: [PATCH 08/12] feat: add optionnal a11y label prop to copybutton

---
 confiture-web-app/src/components/overview/ReportStep.vue    | 1 +
 confiture-web-app/src/components/overview/StatementStep.vue | 1 +
 confiture-web-app/src/components/ui/CopyButton.vue          | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/confiture-web-app/src/components/overview/ReportStep.vue b/confiture-web-app/src/components/overview/ReportStep.vue
index 8069189de..69f3dfed2 100644
--- a/confiture-web-app/src/components/overview/ReportStep.vue
+++ b/confiture-web-app/src/components/overview/ReportStep.vue
@@ -63,6 +63,7 @@ const auditIsReady = computed(() => {
 
       <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',
diff --git a/confiture-web-app/src/components/overview/StatementStep.vue b/confiture-web-app/src/components/overview/StatementStep.vue
index 65b5e3150..52ba55021 100644
--- a/confiture-web-app/src/components/overview/StatementStep.vue
+++ b/confiture-web-app/src/components/overview/StatementStep.vue
@@ -84,6 +84,7 @@ const auditIsPublishable = computed(() => {
       </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',
diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index df960cf61..11ce69798 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -8,6 +8,7 @@ const props = withDefaults(defineProps<{
   icon: string;
   label?: string;
   successLabel?: string;
+  hiddenLabelSuffix?: string;
   contentToCopy: string | RouteLocationRaw;
   isWithinBtnGroup?: boolean;
 }>(), {
@@ -50,6 +51,7 @@ onMounted(() => {
     @click="copyContentToClipboard"
   >
     {{ showSuccess ? successLabel : label }}
+    <span v-if="hiddenLabelSuffix" class="fr-sr-only">{{ hiddenLabelSuffix }}</span>
   </button>
 </template>
 

From 9498ef348215c755f4db6534cb7b085251fd19a7 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 15 Apr 2026 15:13:28 +0200
Subject: [PATCH 09/12] fix: update wording and some button tweaks

---
 confiture-web-app/src/components/overview/AuditStep.vue | 9 +--------
 confiture-web-app/src/components/overview/GridStep.vue  | 3 +--
 confiture-web-app/src/components/ui/CopyButton.vue      | 2 +-
 confiture-web-app/src/pages/report/ReportPage.vue       | 1 -
 4 files changed, 3 insertions(+), 12 deletions(-)

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/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index 11ce69798..125241925 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
   isWithinBtnGroup?: boolean;
 }>(), {
   label: "Copier le lien de partage",
-  successLabel: "Lien de partage copié"
+  successLabel: "Lien copié"
 });
 
 const showSuccess = ref(false);
diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index 04c6482ec..270618d38 100644
--- a/confiture-web-app/src/pages/report/ReportPage.vue
+++ b/confiture-web-app/src/pages/report/ReportPage.vue
@@ -166,7 +166,6 @@ watch(
         icon="fr-icon-link"
         :content-to-copy="reportUrlToCopy"
         label="Copier le lien du rapport"
-        success-label="Lien copié"
       />
       <Dropdown
         title="Télécharger"

From 2c2995c1fc22f037e1a09a621f38b9f07d945a9f Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 15 Apr 2026 17:36:38 +0200
Subject: [PATCH 10/12] fix: correctly computed copy link button width in
 report page header

---
 confiture-web-app/src/components/ui/CopyButton.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index 125241925..7b02a6727 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -37,7 +37,10 @@ function copyContentToClipboard() {
 const initialButtonWidth = ref<string>();
 const copyButtonRef = templateRef("copyButtonRef");
 onMounted(() => {
-  initialButtonWidth.value = `${copyButtonRef.value?.offsetWidth}px`;
+  // FIXME: `setTimeout()` used to force computing element's width after prop is assigned
+  setTimeout(() => {
+    initialButtonWidth.value = `${copyButtonRef.value?.offsetWidth}px`;
+  }, 1);
 });
 </script>
 

From c1fe3c8639f3651e44669665c0a096aeecaba07d Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 16 Apr 2026 10:06:20 +0200
Subject: [PATCH 11/12] fix: slighly increase settimeout delay

---
 confiture-web-app/src/components/ui/CopyButton.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index 7b02a6727..17f38fa28 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { templateRef } from "@vueuse/core";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, useTemplateRef } from "vue";
 import { RouteLocationRaw } from "vue-router";
 import router from "../../router";
 
@@ -35,12 +34,13 @@ function copyContentToClipboard() {
 }
 
 const initialButtonWidth = ref<string>();
-const copyButtonRef = templateRef("copyButtonRef");
+const copyButtonRef = useTemplateRef("copyButtonRef");
+
 onMounted(() => {
   // FIXME: `setTimeout()` used to force computing element's width after prop is assigned
   setTimeout(() => {
     initialButtonWidth.value = `${copyButtonRef.value?.offsetWidth}px`;
-  }, 1);
+  }, 500);
 });
 </script>
 

From 4585e5a2fb815619c7e4d4a4735ad769f1a2addc Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 24 Apr 2026 16:06:50 +0200
Subject: [PATCH 12/12] fix: hardly make copy button size dont change when
 content does

---
 .../src/components/ui/CopyButton.vue          | 66 +++++++++++++++----
 1 file changed, 52 insertions(+), 14 deletions(-)

diff --git a/confiture-web-app/src/components/ui/CopyButton.vue b/confiture-web-app/src/components/ui/CopyButton.vue
index 17f38fa28..3c7290783 100644
--- a/confiture-web-app/src/components/ui/CopyButton.vue
+++ b/confiture-web-app/src/components/ui/CopyButton.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { onMounted, ref, useTemplateRef } from "vue";
+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;
@@ -32,16 +38,6 @@ function copyContentToClipboard() {
     showSuccess.value = false;
   }, 3500);
 }
-
-const initialButtonWidth = ref<string>();
-const copyButtonRef = useTemplateRef("copyButtonRef");
-
-onMounted(() => {
-  // FIXME: `setTimeout()` used to force computing element's width after prop is assigned
-  setTimeout(() => {
-    initialButtonWidth.value = `${copyButtonRef.value?.offsetWidth}px`;
-  }, 500);
-});
 </script>
 
 <template>
@@ -53,7 +49,22 @@ onMounted(() => {
     }]"
     @click="copyContentToClipboard"
   >
-    {{ showSuccess ? successLabel : label }}
+    <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>
@@ -61,13 +72,40 @@ onMounted(() => {
 <style scoped>
 .copy-button {
   &:not(.copy-button--within-btn-group) {
-    width: v-bind(initialButtonWidth) !important;
-    justify-content: center !important;
+    .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>