From 5c59f004b12768e67fdade58b8359ab11e34d1b0 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 5 Sep 2024 16:18:37 +0200
Subject: [PATCH 01/11] Focus le champ d'erreur quand le statut est "Non
 conforme" (#766)

* open accordion when status is not compliant and focus error field

* remove useless import

* remove unnecessary nextTick

* Fix focus in NC textarea after disclose animation

* a11y: Add sr-only info for NC checkbox label

Tells user that focus is going to be moved automatically on the following textarea

* update extra label after focus moves

* update changelog

---------

Co-authored-by: Yaacov <yaacov@goodimpact.studio>
---
 CHANGELOG.md                                  |  6 +++
 .../audit/AuditGenerationCriterium.vue        |  7 +++
 .../audit/CriteriumNotCompliantAccordion.vue  | 26 ++++++++++-
 .../src/components/audit/LazyAccordion.vue    | 45 ++++++++++++-------
 .../src/components/ui/RadioGroup.vue          |  3 +-
 5 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06619946..5aeff246 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 05/09/2024
+
+### Nouvelles fonctionnalités 🚀
+
+- Le champs "Erreur et recommandation" est automatiquement focus lorsque le critère est défini comme "Non conforme" ([#766](https://github.com/DISIC/Ara/pull/766))
+
 ## 24/07/2024
 
 ### Autres changements ⚙️
diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
index 8add83da..12a28680 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -40,6 +40,7 @@ const props = defineProps<{
 
 const statuses: Array<{
   label: string;
+  extraLabel?: string;
   value: CriteriumResultStatus;
   color?: RadioColor;
 }> = [
@@ -50,6 +51,8 @@ const statuses: Array<{
   },
   {
     label: formatStatus(CriteriumResultStatus.NOT_COMPLIANT),
+    extraLabel:
+      "Le focus se déplacera dans le champ « Erreur et recommandation »",
     value: CriteriumResultStatus.NOT_COMPLIANT,
     color: "red"
   },
@@ -128,6 +131,10 @@ function updateResultStatus(status: CriteriumResultStatus) {
   store
     .updateResults(props.auditUniqueId, [{ ...result.value, status }])
     .then(() => {
+      if (status === CriteriumResultStatus.NOT_COMPLIANT) {
+        criteriumNotCompliantAccordion.value?.disclose();
+      }
+
       if (
         store.everyCriteriumAreTested &&
         !auditStore.currentAudit?.publicationDate
diff --git a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
index 5e643576..74cbf155 100644
--- a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
+++ b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
   (e: "update:quickWin", payload: boolean): void;
 }>();
 
-defineExpose({ onFileRequestFinished });
+defineExpose({ onFileRequestFinished, disclose });
 
 const userImpacts: Array<{
   label: string;
@@ -71,12 +71,35 @@ function handleDeleteFile(image: AuditFile) {
 function onFileRequestFinished() {
   fileUpload.value?.onFileRequestFinished();
 }
+
+const lazyAccordionRef = ref<InstanceType<typeof LazyAccordion>>();
+const commentFieldRef = ref<HTMLTextAreaElement>();
+
+let hasJustBeenSetAsNotCompliant = false;
+
+async function disclose() {
+  const accordion = lazyAccordionRef.value?.accordionRef;
+
+  hasJustBeenSetAsNotCompliant = true;
+  dsfr(accordion).accordionsGroup.members[0].disclose();
+}
+
+function lazyAccordionOpened() {
+  if (!hasJustBeenSetAsNotCompliant) {
+    return;
+  }
+
+  commentFieldRef.value?.focus();
+  hasJustBeenSetAsNotCompliant = false;
+}
 </script>
 
 <template>
   <LazyAccordion
+    ref="lazyAccordionRef"
     title="Erreur et recommandation"
     disclose-color="var(--background-default-grey)"
+    @opened="lazyAccordionOpened"
   >
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">
@@ -85,6 +108,7 @@ function onFileRequestFinished() {
       </label>
       <textarea
         :id="`criterum-comment-field-${id}`"
+        ref="commentFieldRef"
         :value="comment ?? ''"
         class="fr-input"
         rows="5"
diff --git a/confiture-web-app/src/components/audit/LazyAccordion.vue b/confiture-web-app/src/components/audit/LazyAccordion.vue
index a213de8f..e64b1e4c 100644
--- a/confiture-web-app/src/components/audit/LazyAccordion.vue
+++ b/confiture-web-app/src/components/audit/LazyAccordion.vue
@@ -10,6 +10,12 @@ defineProps<{
   discloseColor?: string;
 }>();
 
+const accordionRef = ref<HTMLDivElement>();
+
+defineExpose({ accordionRef });
+
+const emit = defineEmits(["opened"]);
+
 const showContent = ref(false);
 const uniqueId = useUniqueId();
 
@@ -19,29 +25,34 @@ function onConceal() {
 
 function onDisclose() {
   showContent.value = true;
+  requestAnimationFrame(function () {
+    emit("opened");
+  });
 }
 </script>
 
 <template>
-  <div
-    class="fr-accordion"
-    :class="{ 'dynamic-color': !!discloseColor, 'is-open': showContent }"
-  >
-    <span class="fr-accordion__title">
-      <button
-        class="fr-accordion__btn"
-        aria-expanded="false"
-        :aria-controls="`accordion-${uniqueId}`"
-      >
-        {{ title }}
-      </button>
-    </span>
+  <div ref="accordionRef" class="fr-accordions-group">
     <div
-      :id="`accordion-${uniqueId}`"
-      class="fr-collapse"
-      v-on="{ 'dsfr.disclose': onDisclose, 'dsfr.conceal': onConceal }"
+      class="fr-accordion"
+      :class="{ 'dynamic-color': !!discloseColor, 'is-open': showContent }"
     >
-      <slot v-if="showContent"></slot>
+      <span class="fr-accordion__title">
+        <button
+          class="fr-accordion__btn"
+          aria-expanded="false"
+          :aria-controls="`accordion-${uniqueId}`"
+        >
+          {{ title }}
+        </button>
+      </span>
+      <div
+        :id="`accordion-${uniqueId}`"
+        class="fr-collapse"
+        v-on="{ 'dsfr.disclose': onDisclose, 'dsfr.conceal': onConceal }"
+      >
+        <slot v-if="showContent"></slot>
+      </div>
     </div>
   </div>
 </template>
diff --git a/confiture-web-app/src/components/ui/RadioGroup.vue b/confiture-web-app/src/components/ui/RadioGroup.vue
index d4cb6eb0..0da324f7 100644
--- a/confiture-web-app/src/components/ui/RadioGroup.vue
+++ b/confiture-web-app/src/components/ui/RadioGroup.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
   items: {
     value: any;
     label: string;
+    extraLabel?: string;
     color?: RadioColor;
   }[];
   disabled?: boolean;
@@ -53,7 +54,7 @@ function handleChange(value: string) {
         :class="item.color"
         :for="`checkbox-group-${uniqueId}--${i}`"
       >
-        {{ item.label }}
+        {{ item.label }}<span class="fr-sr-only">, {{ item.extraLabel }}</span>
       </label>
     </div>
   </fieldset>

From aa5d75b3864f3164332fc318d02a05e7904bf171 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 6 Sep 2024 16:00:06 +0200
Subject: [PATCH 02/11] Ajoute une modale de confirmation avant de supprimer un
 fichier (#788)

* add confirm modal before deleting example

* open delete modal to delete notes files

* force focusing button when closing notes modal

* Revert "force focusing button when closing notes modal"

This reverts commit 7d3e913e27f542cc7f21d92b2e77a1c7180b4693.

* Revert "open delete modal to delete notes files"

This reverts commit 87c47a513e1df206a688fe076390248c926f9bc7.

* make confirm button a danger button

* make content in modal computed props

* update changelog

* typo
---
 CHANGELOG.md                                  |  3 +-
 .../audit/AuditGenerationCriterium.vue        | 25 ++++-
 .../src/components/audit/DeleteFileModal.vue  | 97 +++++++++++++++++++
 3 files changed, 121 insertions(+), 4 deletions(-)
 create mode 100644 confiture-web-app/src/components/audit/DeleteFileModal.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5aeff246..118ec91c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,8 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ### Nouvelles fonctionnalités 🚀
 
-- Le champs "Erreur et recommandation" est automatiquement focus lorsque le critère est défini comme "Non conforme" ([#766](https://github.com/DISIC/Ara/pull/766))
+- Ajoute une modale de confirmation lors de la suppression d’une pièce jointe sur un critère "Non conforme" ([#788](https://github.com/DISIC/Ara/pull/788))
+- Met automatiquement le focus sur le champs "Erreur et recommandation" lorsque qu’un critère est défini comme "Non conforme" ([#766](https://github.com/DISIC/Ara/pull/766))
 
 ## 24/07/2024
 
diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
index 12a28680..3fce3ec5 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -25,6 +25,7 @@ import CriteriumCompliantAccordion from "./CriteriumCompliantAccordion.vue";
 import CriteriumNotApplicableAccordion from "./CriteriumNotApplicableAccordion.vue";
 import CriteriumNotCompliantAccordion from "./CriteriumNotCompliantAccordion.vue";
 import CriteriumTestsAccordion from "./CriteriumTestsAccordion.vue";
+import DeleteFileModal from "./DeleteFileModal.vue";
 
 const store = useResultsStore();
 const auditStore = useAuditStore();
@@ -98,14 +99,24 @@ function handleUploadExample(file: File) {
     });
 }
 
-function handleDeleteExample(image: AuditFile) {
+const deleteFileModalRef = ref<InstanceType<typeof DeleteFileModal>>();
+const fileToDelete = ref<AuditFile>();
+
+function openDeleteFileModal(image: AuditFile) {
+  deleteFileModalRef.value?.show();
+  fileToDelete.value = image;
+}
+
+function handleDeleteExample() {
+  if (!fileToDelete.value) return;
+
   store
     .deleteExampleImage(
       props.auditUniqueId,
       props.page.id,
       props.topicNumber,
       props.criterium.number,
-      image.id
+      fileToDelete.value.id
     )
     .then(() => {
       errorMessage.value = null;
@@ -115,6 +126,7 @@ function handleDeleteExample(image: AuditFile) {
     })
     .finally(() => {
       criteriumNotCompliantAccordion.value?.onFileRequestFinished();
+      deleteFileModalRef.value?.hide();
     });
 }
 
@@ -276,10 +288,17 @@ const isOffline = useIsOffline();
       @update:comment="updateResultComment($event, 'notCompliantComment')"
       @update:user-impact="updateResultImpact($event)"
       @upload-file="handleUploadExample"
-      @delete-file="handleDeleteExample"
+      @delete-file="openDeleteFileModal"
       @update:quick-win="updateQuickWin"
     />
 
+    <DeleteFileModal
+      ref="deleteFileModalRef"
+      :mime-type="fileToDelete?.mimetype"
+      @confirm="handleDeleteExample"
+      @cancel="deleteFileModalRef?.hide()"
+    />
+
     <!-- TESTS + METHODO -->
     <CriteriumTestsAccordion
       v-if="!filtersStore.hideTestsAndReferences"
diff --git a/confiture-web-app/src/components/audit/DeleteFileModal.vue b/confiture-web-app/src/components/audit/DeleteFileModal.vue
new file mode 100644
index 00000000..bdc9d235
--- /dev/null
+++ b/confiture-web-app/src/components/audit/DeleteFileModal.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import DsfrModal from "../ui/DsfrModal.vue";
+
+const modal = ref<InstanceType<typeof DsfrModal>>();
+const isOpen = ref(false);
+
+const props = defineProps<{
+  mimeType?: string;
+}>();
+
+defineEmits(["confirm", "cancel"]);
+
+defineExpose({
+  show: () => {
+    isOpen.value = true;
+    modal.value?.show();
+  },
+  hide: () => modal.value?.hide(),
+  isOpen
+});
+
+const isImage = computed(() => {
+  return props.mimeType && props.mimeType.startsWith("image");
+});
+
+const title = computed(() => {
+  return isImage.value
+    ? "Voulez-vous supprimer cette image ?"
+    : "Voulez-vous supprimer ce fichier ?";
+});
+
+const description = computed(() => {
+  return isImage.value
+    ? "Cette image sera définitivement supprimée de votre audit."
+    : "Ce fichier sera définitivement supprimé de votre audit.";
+});
+
+const confirm = computed(() => {
+  return isImage.value ? "Supprimer l’image" : "Supprimer le fichier";
+});
+</script>
+
+<template>
+  <DsfrModal
+    id="delete-file-modal"
+    ref="modal"
+    aria-labelledby="delete-file-modal-title"
+    @closed="isOpen = false"
+  >
+    <div class="fr-container fr-container--fluid fr-container-md">
+      <div class="fr-grid-row fr-grid-row--center">
+        <div class="fr-col-12 fr-col-md-8">
+          <div class="fr-modal__body">
+            <div class="fr-modal__header">
+              <button
+                class="fr-btn--close fr-btn"
+                aria-controls="delete-file-modal"
+              >
+                Fermer
+              </button>
+            </div>
+            <div class="fr-modal__content">
+              <h1 id="delete-file-modal-title" class="fr-modal__title">
+                {{ title }}
+              </h1>
+              <p>{{ description }}</p>
+            </div>
+            <div class="fr-modal__footer">
+              <ul
+                class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
+              >
+                <li>
+                  <button
+                    class="fr-btn danger-button"
+                    @click="$emit('confirm')"
+                  >
+                    {{ confirm }}
+                  </button>
+                </li>
+                <li>
+                  <button
+                    class="fr-btn fr-btn--secondary"
+                    @click="$emit('cancel')"
+                  >
+                    Annuler
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DsfrModal>
+</template>

From 952801d5166bfe352f256b92c1309591717d7304 Mon Sep 17 00:00:00 2001
From: Yaacov <yaacov@goodimpact.studio>
Date: Wed, 11 Sep 2024 15:14:23 +0300
Subject: [PATCH 03/11] =?UTF-8?q?Supprimer=20la=20notion=20d'audit=20rapid?=
 =?UTF-8?q?e=20sur=20la=20page=20d=E2=80=99accueil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 confiture-web-app/src/pages/HomePage.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/confiture-web-app/src/pages/HomePage.vue b/confiture-web-app/src/pages/HomePage.vue
index de6665cf..ffe903f9 100644
--- a/confiture-web-app/src/pages/HomePage.vue
+++ b/confiture-web-app/src/pages/HomePage.vue
@@ -94,8 +94,7 @@ const steps = [
       l’accessibilité (RGAA 4.1) vous pouvez&nbsp;:
     </p>
     <ul>
-      <li>Commencer par un audit rapide (25 critères)</li>
-      <li>Poursuivre par un audit complémentaire (50 critères)</li>
+      <li>Faire un état des lieux (audit partiel de 25 ou 50 critères)</li>
       <li>Faire un audit complet, dit de conformité (106 critères)</li>
       <li>
         Générer votre rapport d’audit et votre déclaration d’accessibilité

From dbf9d8116331fecc5755e1da83514e3d72042805 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 18 Sep 2024 11:54:18 +0200
Subject: [PATCH 04/11] update default meta description (#806)

---
 confiture-web-app/src/App.vue            | 4 ++--
 confiture-web-app/src/pages/HomePage.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/confiture-web-app/src/App.vue b/confiture-web-app/src/App.vue
index 2ede7f2d..9d870bbf 100644
--- a/confiture-web-app/src/App.vue
+++ b/confiture-web-app/src/App.vue
@@ -15,13 +15,13 @@ useHead({
     {
       name: "description",
       content:
-        "Ara est l’outil qui vous permet de réaliser, simplement et rapidement, des audits d'accessibilité numérique."
+        "Avec Ara, vous évaluez manuellement les 106 critères du RGAA, générez un rapport d’audit et une déclaration d’accessibilité"
     },
     { name: "og:title", content: "Audit d’accessibilité numérique" },
     {
       name: "og:description",
       content:
-        "Ara est l’outil qui vous permet de réaliser, simplement et rapidement, des audits d'accessibilité numérique."
+        "Avec Ara, vous évaluez manuellement les 106 critères du RGAA, générez un rapport d’audit et une déclaration d’accessibilité"
     },
     { name: "og:url", content: "URL" },
     { name: "og:image", content: "image" },
diff --git a/confiture-web-app/src/pages/HomePage.vue b/confiture-web-app/src/pages/HomePage.vue
index ffe903f9..30ceba1b 100644
--- a/confiture-web-app/src/pages/HomePage.vue
+++ b/confiture-web-app/src/pages/HomePage.vue
@@ -61,7 +61,7 @@ const steps = [
 <template>
   <PageMeta
     title="Ara - Réaliser des audits d’accessibilité"
-    description="Ara est l’outil qui vous permet de réaliser, simplement et rapidement, des audits d’accessibilité numérique."
+    description="Avec Ara, vous évaluez manuellement les 106 critères du RGAA, générez un rapport d’audit et une déclaration d’accessibilité"
   />
 
   <div

From bbdd3f89546efed15549131c1dc7f25011b69fc4 Mon Sep 17 00:00:00 2001
From: Yaacov <yaacov@goodimpact.studio>
Date: Wed, 25 Sep 2024 16:19:58 +0300
Subject: [PATCH 05/11] Add publiccode.yml (#800)

* Add publiccode.yml

* Update publiccode.yml

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>

* add fundedBy and update license in publiccode yml file

---------

Co-authored-by: Bastien <bzg@bzg.fr>
Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>
Co-authored-by: Quentin Bellanger <hello@quentin-bellanger.com>
---
 publiccode.yml | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 publiccode.yml

diff --git a/publiccode.yml b/publiccode.yml
new file mode 100644
index 00000000..db271eb7
--- /dev/null
+++ b/publiccode.yml
@@ -0,0 +1,30 @@
+publiccodeYmlVersion: "0.2"
+name: Ara
+url: https://github.com/DISIC/Ara
+landingURL: https://ara.numerique.gouv.fr/
+creationDate: 2022-07-11
+latestRelease:
+  date: ""
+  version: ""
+logo: https://github.com/DISIC.png
+usedBy: []
+roadmap: "https://ara.numerique.gouv.fr/feuille-de-route"
+softwareType: ""
+description:
+  fr:
+    shortDescription: Faire des audits RGAA, les rendre lisibles et suivre
+      l’amélioration de leur taux de conformité
+    documentation: ""
+legal:
+  license: MIT
+  authorsFile: ""
+maintenance:
+  type: community
+  contacts:
+    - name: ""
+      email: ""
+fundedBy:
+  - name: Direction interministérielle du numérique
+    url: https://www.numerique.gouv.fr/dinum/
+  - name: FIPHFP
+    url: https://www.fiphfp.fr/

From e3517107aab49f95adb22424ed66eb17fe404391 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 9 Oct 2024 11:41:48 +0200
Subject: [PATCH 06/11] Ajoute un attribut `autocomplete` sur le champ email du
 formulaire de connexion (#808)

* autocomplete email field in login form

* update changelog
---
 CHANGELOG.md                                      | 6 ++++++
 confiture-web-app/src/components/ui/DsfrField.vue | 2 ++
 confiture-web-app/src/pages/account/LoginPage.vue | 1 +
 3 files changed, 9 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 118ec91c..74660b02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 09/10/2024
+
+### Corrections 🐛
+
+- Corrige l’application de l'attribut `autocomplete` sur le champ "email" du formulaire de connexion ([#808](https://github.com/DISIC/Ara/pull/808))
+
 ## 05/09/2024
 
 ### Nouvelles fonctionnalités 🚀
diff --git a/confiture-web-app/src/components/ui/DsfrField.vue b/confiture-web-app/src/components/ui/DsfrField.vue
index 755fe0f0..53e0da3e 100644
--- a/confiture-web-app/src/components/ui/DsfrField.vue
+++ b/confiture-web-app/src/components/ui/DsfrField.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
   title?: string;
   error?: string;
   id: string;
+  autocomplete?: string;
 }>();
 
 defineEmits<{
@@ -43,6 +44,7 @@ defineExpose({ inputRef });
       :required="required"
       :pattern="pattern ? pattern.toString().slice(1, -1) : undefined"
       :title="title"
+      :autocomplete="autocomplete"
       :value="modelValue"
       @input="
         $emit('update:modelValue', ($event.target as HTMLInputElement).value)
diff --git a/confiture-web-app/src/pages/account/LoginPage.vue b/confiture-web-app/src/pages/account/LoginPage.vue
index e7032412..28748199 100644
--- a/confiture-web-app/src/pages/account/LoginPage.vue
+++ b/confiture-web-app/src/pages/account/LoginPage.vue
@@ -142,6 +142,7 @@ async function handleSubmit() {
         hint="Format attendu : nom@domaine.fr"
         type="email"
         required
+        autocomplete="email"
         :error="userEmailError"
       />
 

From bb8a16990a8ab3f5466b049baf36289cdf4e6b6d Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 9 Oct 2024 11:45:52 +0200
Subject: [PATCH 07/11] Corrige le changement d'ordre des pages (#809)

* force emit pages model in settings form

* fix types

* update changelog
---
 CHANGELOG.md                                           | 1 +
 confiture-web-app/src/components/audit/PagesSample.vue | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74660b02..b4e42bcf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ### Corrections 🐛
 
+- Corrige la mise à jour de l’ordre des pages quand les 2 pages ne sont pas adjacentes ([#809](https://github.com/DISIC/Ara/pull/809))
 - Corrige l’application de l'attribut `autocomplete` sur le champ "email" du formulaire de connexion ([#808](https://github.com/DISIC/Ara/pull/808))
 
 ## 05/09/2024
diff --git a/confiture-web-app/src/components/audit/PagesSample.vue b/confiture-web-app/src/components/audit/PagesSample.vue
index 13af0fd5..f996f0c1 100644
--- a/confiture-web-app/src/components/audit/PagesSample.vue
+++ b/confiture-web-app/src/components/audit/PagesSample.vue
@@ -10,8 +10,8 @@ const props = defineProps<{
   modelValue: Omit<AuditPage, "id" | "order">[];
 }>();
 
-defineEmits<{
-  (e: "update:modelValue", payload: Omit<AuditPage, "id">[]): void;
+const emit = defineEmits<{
+  (e: "update:modelValue", payload: Omit<AuditPage, "id" | "order">[]): void;
 }>();
 
 // Allow parent to focus last field
@@ -94,6 +94,8 @@ function updatePageOrder(startIndex: number, endIndex: number) {
           ];
   }
 
+  emit("update:modelValue", pages.value);
+
   // Focus `endIndex` select
   pageOrderSelectRefs.value?.at(endIndex)?.focus();
 

From bd7e0c96998e0154c9489adc158c024a7dfa7e54 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 17 Oct 2024 22:01:43 +0200
Subject: [PATCH 08/11] =?UTF-8?q?Ajoute=20un=20onglet=20"=C3=A9l=C3=A9ment?=
 =?UTF-8?q?s=20transverses"=20(#758)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* remove ability to set a criterium as transverse

* add new tab for transverse elements

* show transverse notice

* add transverse status in notice

* always show 3 criterium statuses

* handle transverse page when creating and saving settings

* display transverse criteria in report errors tab

* display transverse criteria in report improvements tab

* simplify data functions to get errors & improvements

* rename transverse tab

* redesign transverse status indicator

* display transverse comment

* update wording and remove optional mentions

* remove first audit page and table wrappers in context and report pages

* clean transverse data filtering

* add transverse callout in results detail tab

* add icon to transverse tab

* fix ts types

* fix ts error on dynamic component

* TEMP

* return transverse page data in audit endpoints

* include transverse results in fetch

* fix spacing + get id of transverse page

* take transverse page into account in report

* lint backend

* adjust transverse comment margin

* hide topic NA on transverse page

* update wording on transverse criterium

* exclude transverse results from audit progression

* fix already evaluated filter

* exclude transverse results in topics completion

* set currentPageId to transverse page by default

* exclude transverse results to display in progress banner

* exclude transverse results to display in progress banner 2

* fix page title when on transverse tab

* exclude transverse criteria to calculate not applicable and compliant criteria

* include transverse elements in exports

* fix audit stats computing

* harmonize wording

* criterium is nc if c on all pages but nc on transverse elements

* update wording on transverse result notice

* update computing applicable & compliant criteria

* harmonize nc and c gauges on both audit and report

* compute audit stats from scratch

* fix na criteria count

* include transverse criteria in account audits list

* migration to add transverse page to audits

* fix migration syntax

* clean report errors and improvements sorting

* change default transverse page order, fix report menu

* add na on all page toggle on transverse elements page

* update criterium comment accordion wording

* add transverse elements alert on audit pages

* harmonize wording on report

* fix improvements sorting on report

* Update confiture-web-app/src/pages/report/ContextPage.vue

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>

* refactor switch statement

* update changelog

---------

Co-authored-by: Adrien Boutigny <adrien@slash-tmp.dev>
---
 CHANGELOG.md                                  |   6 +
 .../migration.sql                             |  25 ++
 confiture-rest-api/prisma/schema.prisma       |  12 +-
 .../src/audits/audit-export.service.ts        |  15 +-
 .../src/audits/audit.service.ts               | 278 ++++++++++++------
 .../src/audits/audits.controller.ts           |   1 +
 .../src/components/audit/AraTabs.vue          |  10 +-
 .../audit/AuditGenerationCriterium.vue        | 148 +++++++---
 .../audit/AuditGenerationPageCriteria.vue     |  53 +++-
 .../audit/CriteriumCompliantAccordion.vue     |   9 +-
 .../audit/CriteriumNotApplicableAccordion.vue |   9 +-
 .../audit/CriteriumNotCompliantAccordion.vue  |  12 +-
 .../components/audit/NotApplicableSwitch.vue  |  13 +-
 .../src/components/icons/LayoutIcon.vue       |  21 ++
 .../src/components/report/ReportCriteria.vue  |  41 +--
 .../report/ReportErrorCriterium.vue           |   2 +-
 .../src/components/report/ReportErrors.vue    |  58 ++--
 .../components/report/ReportImprovements.vue  |  40 ++-
 .../src/components/report/ReportResults.vue   |  86 ++++--
 .../src/components/report/getReportErrors.ts  |  48 +--
 .../report/getReportImprovements.ts           | 147 ++++-----
 confiture-web-app/src/components/ui/Radio.vue |   7 +-
 .../src/components/ui/RadioGroup.vue          |   5 +-
 .../src/composables/useAuditStats.ts          | 120 ++++----
 .../src/pages/audit/AuditGenerationPage.vue   |  51 ++--
 .../src/pages/report/ContextPage.vue          |   7 +-
 .../src/pages/report/ReportPage.vue           |  15 +-
 confiture-web-app/src/store/results.ts        |  52 +---
 confiture-web-app/src/types/types.ts          |   1 +
 confiture-web-app/src/utils.ts                |  13 +-
 30 files changed, 799 insertions(+), 506 deletions(-)
 create mode 100644 confiture-rest-api/prisma/migrations/20240911153613_add_transverse_elements_page/migration.sql
 create mode 100644 confiture-web-app/src/components/icons/LayoutIcon.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4e42bcf..7270087a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 17/10/2024
+
+### Nouvelles fonctionnalités 🚀
+
+- Modifie la gestion des éléments transverses : l’interrupteur "Sur toutes les pages" est remplacé par l’onglet "Éléments transverses" qui permet d’évaluer les éléments communs à toutes les pages : en-tête, pied de page... ([#758](https://github.com/DISIC/Ara/pull/758))
+
 ## 09/10/2024
 
 ### Corrections 🐛
diff --git a/confiture-rest-api/prisma/migrations/20240911153613_add_transverse_elements_page/migration.sql b/confiture-rest-api/prisma/migrations/20240911153613_add_transverse_elements_page/migration.sql
new file mode 100644
index 00000000..7e68796c
--- /dev/null
+++ b/confiture-rest-api/prisma/migrations/20240911153613_add_transverse_elements_page/migration.sql
@@ -0,0 +1,25 @@
+-- AlterTable
+ALTER TABLE "Audit" ADD COLUMN     "transverseElementsPageId" INTEGER;
+
+-- Create one transverse elements page for each existing audit and link it
+DO $$
+DECLARE temprow RECORD;
+DECLARE transversePageId "AuditedPage"."id"%TYPE;
+BEGIN FOR temprow IN
+        SELECT * FROM "Audit" WHERE "transverseElementsPageId" IS NULL
+    LOOP
+      -- Crée la page élément transverse
+    INSERT INTO "AuditedPage"("name", "url", "order") VALUES ('Éléments transverses (optionnel)', '', -1) RETURNING "id" INTO transversePageId;
+        -- Lie la page à l'audit
+    UPDATE "Audit" SET "transverseElementsPageId" = transversePageId WHERE "id" = "temprow"."id";
+  END LOOP;
+END $$;
+
+-- Make transverseElementsPageId not nullable
+ALTER TABLE "Audit" ALTER COLUMN "transverseElementsPageId" SET NOT NULL;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Audit_transverseElementsPageId_key" ON "Audit"("transverseElementsPageId");
+
+-- AddForeignKey
+ALTER TABLE "Audit" ADD CONSTRAINT "Audit_transverseElementsPageId_fkey" FOREIGN KEY ("transverseElementsPageId") REFERENCES "AuditedPage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/confiture-rest-api/prisma/schema.prisma b/confiture-rest-api/prisma/schema.prisma
index 7edb012f..cbf4388e 100644
--- a/confiture-rest-api/prisma/schema.prisma
+++ b/confiture-rest-api/prisma/schema.prisma
@@ -49,7 +49,10 @@ model Audit {
   auditType                AuditType
   procedureName            String
   /// @DtoEntityHidden
-  pages                    AuditedPage[]
+  pages                    AuditedPage[] @relation("UserPages")
+  // single page for transverse elements
+  transverseElementsPage       AuditedPage @relation("TransversePage", fields: [transverseElementsPageId], references: [id])
+  transverseElementsPageId Int @unique
   auditorName              String?
   auditorEmail             String?
   showAuditorEmailInReport Boolean       @default(false)
@@ -111,9 +114,14 @@ model AuditedPage {
   name  String
   url   String
 
-  audit         Audit?  @relation(fields: [auditUniqueId], references: [editUniqueId], onDelete: Cascade)
+  // parent audit when the page is a user made page
+  audit         Audit?  @relation(name: "UserPages", fields: [auditUniqueId], references: [editUniqueId], onDelete: Cascade)
   auditUniqueId String?
 
+  // parent audit when the page is a transverse page
+  auditTransverse Audit? @relation(name: "TransversePage")
+
+
   results CriterionResult[]
 }
 
diff --git a/confiture-rest-api/src/audits/audit-export.service.ts b/confiture-rest-api/src/audits/audit-export.service.ts
index 3f8a21a0..d3258985 100644
--- a/confiture-rest-api/src/audits/audit-export.service.ts
+++ b/confiture-rest-api/src/audits/audit-export.service.ts
@@ -38,7 +38,11 @@ export class AuditExportService {
     const data = [];
 
     // Column headers
-    data.push(["Critères", ...audit.pages.map((p) => p.name)]);
+    data.push([
+      "Critères",
+      "Éléments transverses",
+      ...audit.pages.map((p) => p.name)
+    ]);
 
     const resultsByCriteria = groupBy(
       results,
@@ -50,6 +54,13 @@ export class AuditExportService {
     // Tests results
     criteria.forEach((c) => {
       const criterionKey = c.topic + "." + c.criterium;
+
+      const transverseStatus =
+        CRITERIUM_STATUS[
+          resultsByCriteria[criterionKey].find(
+            (r) => r.pageId === audit.transverseElementsPageId
+          ).status
+        ];
       const criteriumStatuses = audit.pages.map(
         (p) =>
           CRITERIUM_STATUS[
@@ -57,7 +68,7 @@ export class AuditExportService {
               .status
           ]
       );
-      data.push([criterionKey, ...criteriumStatuses]);
+      data.push([criterionKey, transverseStatus, ...criteriumStatuses]);
     });
 
     // compile data to CSV buffer
diff --git a/confiture-rest-api/src/audits/audit.service.ts b/confiture-rest-api/src/audits/audit.service.ts
index a95c8c10..2a092679 100644
--- a/confiture-rest-api/src/audits/audit.service.ts
+++ b/confiture-rest-api/src/audits/audit.service.ts
@@ -1,14 +1,11 @@
 import { Injectable } from "@nestjs/common";
 import {
   Audit,
-  AuditedPage,
   CriterionResult,
   CriterionResultStatus,
   CriterionResultUserImpact,
-  AuditFile,
   Prisma,
-  StoredFile,
-  TestEnvironment
+  StoredFile
 } from "@prisma/client";
 import { nanoid } from "nanoid";
 import sharp from "sharp";
@@ -24,9 +21,10 @@ import { UpdateAuditDto } from "./dto/update-audit.dto";
 import { UpdateResultsDto } from "./dto/update-results.dto";
 import { PatchAuditDto } from "./dto/patch-audit.dto";
 
-const AUDIT_EDIT_INCLUDE: Prisma.AuditInclude = {
+const AUDIT_EDIT_INCLUDE = {
   recipients: true,
   environments: true,
+  transverseElementsPage: true,
   pages: true,
   sourceAudit: {
     select: {
@@ -34,7 +32,22 @@ const AUDIT_EDIT_INCLUDE: Prisma.AuditInclude = {
     }
   },
   notesFiles: true
-};
+} as const;
+
+const isCompliant = (c: CriterionResult) =>
+  c.status === CriterionResultStatus.COMPLIANT;
+
+const isNotCompliant = (c: CriterionResult) =>
+  c.status === CriterionResultStatus.NOT_COMPLIANT;
+
+const isNotApplicable = (c: CriterionResult) =>
+  c.status === CriterionResultStatus.NOT_APPLICABLE;
+
+const isNotTested = (c: CriterionResult) =>
+  c.status === CriterionResultStatus.NOT_TESTED;
+
+const isTransverse = (c: CriterionResult, transversePageId: number) =>
+  c.pageId === transversePageId;
 
 @Injectable()
 export class AuditService {
@@ -61,10 +74,17 @@ export class AuditService {
         auditorEmail: data.auditorEmail,
         auditorName: data.auditorName,
 
+        transverseElementsPage: {
+          create: {
+            name: "Éléments transverses",
+            url: "",
+            order: -1
+          }
+        },
         pages: {
           createMany: {
             data: data.pages.map((p, i) => {
-              return { ...p, order: i };
+              return { ...p, order: i + 1 };
             })
           }
         },
@@ -130,6 +150,9 @@ export class AuditService {
   > {
     const [audit, pages, existingResults] = await Promise.all([
       this.prisma.audit.findUnique({
+        include: {
+          transverseElementsPage: true
+        },
         where: {
           editUniqueId: uniqueId
         }
@@ -140,9 +163,18 @@ export class AuditService {
       this.prisma.criterionResult.findMany({
         where: {
           page: {
-            audit: {
-              editUniqueId: uniqueId
-            }
+            OR: [
+              {
+                audit: {
+                  editUniqueId: uniqueId
+                }
+              },
+              {
+                auditTransverse: {
+                  editUniqueId: uniqueId
+                }
+              }
+            ]
           }
         },
         include: {
@@ -153,7 +185,7 @@ export class AuditService {
 
     // We do not create every empty criterion result rows in the db when creating pages.
     // Instead we return the results in the database and fill missing criteria with placeholder data.
-    return pages.flatMap((page) =>
+    return [audit.transverseElementsPage, ...pages].flatMap((page) =>
       CRITERIA_BY_AUDIT_TYPE[audit.auditType].map((criterion) => {
         const existingResult = existingResults.find(
           (result) =>
@@ -750,14 +782,10 @@ export class AuditService {
   async getAuditReportData(
     consultUniqueId: string
   ): Promise<AuditReportDto | undefined> {
-    const audit = (await this.prisma.audit.findUnique({
+    const audit = await this.prisma.audit.findUnique({
       where: { consultUniqueId },
       include: AUDIT_EDIT_INCLUDE
-    })) as Audit & {
-      environments: TestEnvironment[];
-      pages: AuditedPage[];
-      notesFiles: AuditFile[];
-    };
+    });
 
     if (!audit) {
       return;
@@ -766,14 +794,21 @@ export class AuditService {
     const results = await this.prisma.criterionResult.findMany({
       where: {
         page: {
-          auditUniqueId: audit.editUniqueId
-        },
-        criterium: {
-          in: CRITERIA_BY_AUDIT_TYPE[audit.auditType].map((c) => c.criterium)
+          OR: [
+            {
+              auditUniqueId: audit.editUniqueId
+            },
+            {
+              auditTransverse: {
+                editUniqueId: audit.editUniqueId
+              }
+            }
+          ]
         },
-        topic: {
-          in: CRITERIA_BY_AUDIT_TYPE[audit.auditType].map((c) => c.topic)
-        }
+        OR: CRITERIA_BY_AUDIT_TYPE[audit.auditType].map((c) => ({
+          criterium: c.criterium,
+          topic: c.topic
+        }))
       },
       include: {
         exampleImages: true
@@ -794,25 +829,36 @@ export class AuditService {
     );
 
     const applicableCriteria = Object.values(groupedCriteria).filter(
-      (criteria) =>
-        criteria.some((c) => c.status !== CriterionResultStatus.NOT_APPLICABLE)
+      (criteria) => criteria.some((c) => isCompliant(c) || isNotCompliant(c))
     );
 
-    const notApplicableCriteria = Object.values(groupedCriteria).filter(
-      (criteria) =>
-        criteria.every((c) => c.status === CriterionResultStatus.NOT_APPLICABLE)
-    );
-
-    const compliantCriteria = applicableCriteria.filter((criteria) =>
-      criteria.every(
+    const compliantCriteria = applicableCriteria.filter((criteria) => {
+      // remove untested transverse criterion
+      const withoutUntestedTrans = criteria.filter(
         (c) =>
-          c.status === CriterionResultStatus.COMPLIANT ||
-          c.status === CriterionResultStatus.NOT_APPLICABLE
-      )
-    );
+          !(isTransverse(c, audit.transverseElementsPageId) && isNotTested(c))
+      );
+
+      return (
+        withoutUntestedTrans.some((c) => isCompliant(c)) &&
+        withoutUntestedTrans.every((c) => isCompliant(c) || isNotApplicable(c))
+      );
+    });
 
-    const notCompliantCriteria = applicableCriteria.filter((criteria) =>
-      criteria.some((c) => c.status === CriterionResultStatus.NOT_COMPLIANT)
+    const notCompliantCriteria = applicableCriteria.filter((criteria) => {
+      return criteria.some((c) => isNotCompliant(c));
+    });
+
+    const notApplicableCriteria = Object.values(groupedCriteria).filter(
+      (criteria) => {
+        // remove untested transverse criterion
+        const withoutUntestedTrans = criteria.filter(
+          (c) =>
+            !isTransverse(c, audit.transverseElementsPageId) && isNotTested(c)
+        );
+
+        return withoutUntestedTrans.every((c) => isNotApplicable(c));
+      }
     );
 
     const accessibilityRate =
@@ -878,7 +924,7 @@ export class AuditService {
           browser: e.browser
         })),
         referencial: "RGAA Version 4.1",
-        samples: audit.pages
+        samples: [audit.transverseElementsPage, ...audit.pages]
           .map((p, i) => ({
             name: p.name,
             order: p.order,
@@ -891,53 +937,56 @@ export class AuditService {
         technologies: audit.technologies
       },
 
-      pageDistributions: audit.pages.map((p) => ({
-        name: p.name,
-        compliant: {
-          raw: results.filter(
-            (r) =>
-              r.pageId === p.id && r.status === CriterionResultStatus.COMPLIANT
-          ).length,
-          percentage:
-            (results.filter(
+      pageDistributions: [audit.transverseElementsPage, ...audit.pages].map(
+        (p) => ({
+          name: p.name,
+          compliant: {
+            raw: results.filter(
               (r) =>
                 r.pageId === p.id &&
                 r.status === CriterionResultStatus.COMPLIANT
-            ).length /
-              totalCriteriaCount) *
-            100
-        },
-        notApplicable: {
-          raw: results.filter(
-            (r) =>
-              r.pageId === p.id &&
-              r.status === CriterionResultStatus.NOT_APPLICABLE
-          ).length,
-          percentage:
-            (results.filter(
+            ).length,
+            percentage:
+              (results.filter(
+                (r) =>
+                  r.pageId === p.id &&
+                  r.status === CriterionResultStatus.COMPLIANT
+              ).length /
+                totalCriteriaCount) *
+              100
+          },
+          notApplicable: {
+            raw: results.filter(
               (r) =>
                 r.pageId === p.id &&
                 r.status === CriterionResultStatus.NOT_APPLICABLE
-            ).length /
-              totalCriteriaCount) *
-            100
-        },
-        notCompliant: {
-          raw: results.filter(
-            (r) =>
-              r.pageId === p.id &&
-              r.status === CriterionResultStatus.NOT_COMPLIANT
-          ).length,
-          percentage:
-            (results.filter(
+            ).length,
+            percentage:
+              (results.filter(
+                (r) =>
+                  r.pageId === p.id &&
+                  r.status === CriterionResultStatus.NOT_APPLICABLE
+              ).length /
+                totalCriteriaCount) *
+              100
+          },
+          notCompliant: {
+            raw: results.filter(
               (r) =>
                 r.pageId === p.id &&
                 r.status === CriterionResultStatus.NOT_COMPLIANT
-            ).length /
-              totalCriteriaCount) *
-            100
-        }
-      })),
+            ).length,
+            percentage:
+              (results.filter(
+                (r) =>
+                  r.pageId === p.id &&
+                  r.status === CriterionResultStatus.NOT_COMPLIANT
+              ).length /
+                totalCriteriaCount) *
+              100
+          }
+        })
+      ),
 
       resultDistribution: {
         compliant: {
@@ -1050,6 +1099,15 @@ export class AuditService {
       where: { editUniqueId: sourceUniqueId, isHidden: false },
       include: {
         environments: true,
+        transverseElementsPage: {
+          include: {
+            results: {
+              include: {
+                exampleImages: true
+              }
+            }
+          }
+        },
         pages: {
           include: {
             results: {
@@ -1182,7 +1240,12 @@ export class AuditService {
 
     const newAudit = await this.prisma.audit.create({
       data: {
-        ...omit(originalAudit, ["id", "auditTraceId", "sourceAuditId"]),
+        ...omit(originalAudit, [
+          "id",
+          "auditTraceId",
+          "sourceAuditId",
+          "transverseElementsPageId"
+        ]),
 
         // link new audit with the original
         sourceAudit: {
@@ -1208,6 +1271,25 @@ export class AuditService {
           }
         },
 
+        transverseElementsPage: {
+          create: {
+            ...originalAudit.transverseElementsPage,
+            results: {
+              create: originalAudit.transverseElementsPage.results.map((r) => ({
+                ...omit(r, ["id", "pageId"]),
+                exampleImages: {
+                  create: r.exampleImages.map(
+                    (e) =>
+                      imagesCreateData[originalAudit.transverseElementsPage.id][
+                        r.id
+                      ][e.id]
+                  )
+                }
+              }))
+            }
+          }
+        },
+
         pages: {
           create: originalAudit.pages.map((p) => ({
             name: p.name,
@@ -1267,16 +1349,25 @@ export class AuditService {
         editUniqueId: true,
         consultUniqueId: true,
         initiator: true,
+        transverseElementsPageId: true,
         pages: {
           select: {
             results: true
           }
+        },
+        transverseElementsPage: {
+          select: {
+            results: true
+          }
         }
       }
     });
 
     return audits.map((a) => {
-      const results = a.pages.flatMap((p) => p.results);
+      const results = [
+        ...a.transverseElementsPage.results,
+        ...a.pages.flatMap((p) => p.results)
+      ];
 
       const progress =
         results.filter((r) => r.status !== CriterionResultStatus.NOT_TESTED)
@@ -1302,21 +1393,24 @@ export class AuditService {
           (c) => resultsGroupedById[`${c.topic}.${c.criterium}`] ?? null
         );
 
-        const applicableCriteria = results2.filter(
-          (criteria) =>
-            criteria &&
-            criteria.some(
-              (c) => c.status !== CriterionResultStatus.NOT_APPLICABLE
-            )
+        const applicableCriteria = results2.filter((criteria) =>
+          criteria.some((c) => isCompliant(c) || isNotCompliant(c))
         );
 
-        const compliantCriteria = applicableCriteria.filter((criteria) =>
-          criteria.every(
+        const compliantCriteria = applicableCriteria.filter((criteria) => {
+          // remove untested transverse criterion
+          const withoutUntestedTrans = criteria.filter(
             (c) =>
-              c.status === CriterionResultStatus.COMPLIANT ||
-              c.status === CriterionResultStatus.NOT_APPLICABLE
-          )
-        );
+              !(isTransverse(c, a.transverseElementsPageId) && isNotTested(c))
+          );
+
+          return (
+            withoutUntestedTrans.some((c) => isCompliant(c)) &&
+            withoutUntestedTrans.every(
+              (c) => isCompliant(c) || isNotApplicable(c)
+            )
+          );
+        });
 
         complianceLevel = Math.round(
           (compliantCriteria.length / applicableCriteria.length) * 100
diff --git a/confiture-rest-api/src/audits/audits.controller.ts b/confiture-rest-api/src/audits/audits.controller.ts
index 17f239a6..d2a7c92a 100644
--- a/confiture-rest-api/src/audits/audits.controller.ts
+++ b/confiture-rest-api/src/audits/audits.controller.ts
@@ -88,6 +88,7 @@ export class AuditsController {
   async getAudit(@Param("uniqueId") uniqueId: string) {
     const audit = await this.auditService.findAuditWithEditUniqueId(uniqueId, {
       environments: true,
+      transverseElementsPage: true,
       pages: true,
       sourceAudit: {
         select: {
diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue
index c2d0a67e..e58468a3 100644
--- a/confiture-web-app/src/components/audit/AraTabs.vue
+++ b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -8,9 +8,10 @@
 import { ref, watch } from "vue";
 
 import { useUniqueId } from "../../composables/useUniqueId";
+import LayoutIcon from "../icons/LayoutIcon.vue";
 
 const props = defineProps<{
-  tabs: { label: string; data: T; icon?: string }[];
+  tabs: { label: string; data: T }[];
   stickyTop: string;
 }>();
 
@@ -74,18 +75,13 @@ watch(currentTab, (currentTab) => {
           :aria-controls="panelId(i)"
           :aria-selected="i === currentTab ? 'true' : 'false'"
           :tabindex="i === currentTab ? undefined : '-1'"
-          :class="{
-            'fr-tabs__tab--icon-left': !!tab.icon,
-            ...(!!tab.icon && {
-              [`fr-icon-${tab.icon}`]: !!tab.icon
-            })
-          }"
           @click="currentTab = i"
           @keydown.right.down.prevent="selectNextTab"
           @keydown.left.up.prevent="selectPreviousTab"
           @keydown.home.prevent="selectFirstTab"
           @keydown.end.prevent="selectLastTab"
         >
+          <LayoutIcon v-if="i === 0" class="fr-mr-2v" />
           {{ tab.label }}
         </button>
       </li>
diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
index 3fce3ec5..0d167eac 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -20,7 +20,9 @@ import {
   handleFileDeleteError,
   handleFileUploadError
 } from "../../utils";
-import RadioGroup, { RadioColor } from "../ui/RadioGroup.vue";
+import MarkdownRenderer from "../ui/MarkdownRenderer.vue";
+import { RadioColor } from "../ui/Radio.vue";
+import RadioGroup from "../ui/RadioGroup.vue";
 import CriteriumCompliantAccordion from "./CriteriumCompliantAccordion.vue";
 import CriteriumNotApplicableAccordion from "./CriteriumNotApplicableAccordion.vue";
 import CriteriumNotCompliantAccordion from "./CriteriumNotCompliantAccordion.vue";
@@ -48,19 +50,19 @@ const statuses: Array<{
   {
     label: formatStatus(CriteriumResultStatus.COMPLIANT),
     value: CriteriumResultStatus.COMPLIANT,
-    color: "green"
+    color: RadioColor.GREEN
   },
   {
     label: formatStatus(CriteriumResultStatus.NOT_COMPLIANT),
     extraLabel:
       "Le focus se déplacera dans le champ « Erreur et recommandation »",
     value: CriteriumResultStatus.NOT_COMPLIANT,
-    color: "red"
+    color: RadioColor.RED
   },
   {
     label: formatStatus(CriteriumResultStatus.NOT_APPLICABLE),
     value: CriteriumResultStatus.NOT_APPLICABLE,
-    color: "grey"
+    color: RadioColor.GREY
   }
 ];
 
@@ -73,6 +75,48 @@ const result = computed(
     )!
 );
 
+const transversePageId = computed(() => {
+  return auditStore.currentAudit?.transverseElementsPage.id;
+});
+
+const transverseStatus = computed((): CriteriumResultStatus | null => {
+  if (store.data && transversePageId.value) {
+    return store.data?.[transversePageId.value][props.topicNumber][
+      props.criterium.number
+    ].status;
+  }
+
+  return null;
+});
+
+const transverseComment = computed((): string | null => {
+  if (store.data && transversePageId.value) {
+    const result =
+      store.data?.[transversePageId.value][props.topicNumber][
+        props.criterium.number
+      ];
+
+    switch (transverseStatus.value) {
+      case CriteriumResultStatus.COMPLIANT:
+        return result.compliantComment;
+      case CriteriumResultStatus.NOT_COMPLIANT:
+        return result.notCompliantComment;
+      case CriteriumResultStatus.NOT_APPLICABLE:
+        return result.notApplicableComment;
+      default:
+        return null;
+    }
+  }
+
+  return null;
+});
+
+const showTransverseComment = ref(false);
+
+function toggleTransverseComment() {
+  showTransverseComment.value = !showTransverseComment.value;
+}
+
 const notify = useNotifications();
 
 const errorMessage: Ref<FileErrorMessage | null> = ref(null);
@@ -185,13 +229,6 @@ function updateResultImpact(userImpact: CriterionResultUserImpact | null) {
     .catch(handleUpdateResultError);
 }
 
-function updateTransverseStatus(e: Event) {
-  const transverse = (e.target as HTMLInputElement).checked;
-  store
-    .updateResults(props.auditUniqueId, [{ ...result.value, transverse }])
-    .catch(handleUpdateResultError);
-}
-
 function updateQuickWin(quickWin: boolean) {
   store
     .updateResults(props.auditUniqueId, [{ ...result.value, quickWin }])
@@ -219,14 +256,7 @@ const isOffline = useIsOffline();
     </div>
 
     <!-- STATUS -->
-    <div
-      :class="[
-        'fr-ml-6w criterium-radios-container',
-        {
-          'fr-mb-2w': result.status !== CriteriumResultStatus.NOT_TESTED
-        }
-      ]"
-    >
+    <div class="fr-ml-6w fr-mb-2w criterium-radios-container">
       <RadioGroup
         :disabled="isOffline"
         :model-value="result.status"
@@ -236,29 +266,58 @@ const isOffline = useIsOffline();
         :items="statuses"
         @update:model-value="updateResultStatus"
       />
+    </div>
 
-      <div class="fr-toggle fr-toggle--label-left">
-        <input
-          :id="`applicable-all-pages-${uniqueId}`"
-          :checked="result.transverse"
-          type="checkbox"
-          class="fr-toggle__input"
-          :disabled="
-            result.status === CriteriumResultStatus.NOT_TESTED || isOffline
-          "
-          @input="updateTransverseStatus"
-        />
-        <label
-          class="fr-toggle__label"
-          :for="`applicable-all-pages-${uniqueId}`"
+    <!-- TRANSVERSE STATUS -->
+    <div
+      v-if="
+        page.id !== transversePageId &&
+        transverseStatus &&
+        transverseStatus !== CriteriumResultStatus.NOT_TESTED
+      "
+      class="fr-ml-5w fr-mb-4w fr-p-1w"
+      :class="{ 'criterium-transverse-is-open': showTransverseComment }"
+    >
+      <div class="criterium-transverse-notice">
+        <span class="fr-icon-information-line fr-icon--sm" aria-hidden="true" />
+        <p class="fr-text--sm fr-m-0">
+          Vous avez évalué ce critère
+          <strong
+            :class="[
+              'fr-badge fr-badge--sm fr-badge--no-icon',
+              {
+                'fr-badge--success':
+                  transverseStatus === CriteriumResultStatus.COMPLIANT,
+                'fr-badge--error':
+                  transverseStatus === CriteriumResultStatus.NOT_COMPLIANT
+              }
+            ]"
+            >{{ formatStatus(transverseStatus) }}</strong
+          >
+          pour les éléments transverses.
+        </p>
+
+        <button
+          v-if="transverseComment"
+          class="fr-link fr-link--sm"
+          @click="toggleTransverseComment"
         >
-          <span class="fr-sr-only">
-            Appliquer le statut {{ formatStatus(result.status) }} pour le
-            critère {{ topicNumber }}.{{ criterium.number }}
-          </span>
-          &nbsp;Sur toutes les pages
-        </label>
+          {{ showTransverseComment ? "Masquer" : "Voir" }}
+          {{
+            transverseStatus === CriteriumResultStatus.NOT_COMPLIANT
+              ? "les erreurs"
+              : "le commentaire"
+          }}
+          <span class="fr-sr-only">transverse</span>
+          <span class="fr-icon-arrow-down-s-line fr-icon--sm" />
+        </button>
       </div>
+
+      <MarkdownRenderer
+        v-if="showTransverseComment && transverseComment"
+        class="fr-mt-5w"
+        :markdown="transverseComment"
+      />
     </div>
 
     <!-- COMMENT / DESCRIPTION -->
@@ -322,6 +381,17 @@ const isOffline = useIsOffline();
   content: none;
 }
 
+.criterium-transverse-is-open {
+  background: var(--background-contrast-info);
+}
+
+.criterium-transverse-notice {
+  align-items: start;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 0.75rem;
+}
+
 .criterium-main-section {
   display: grid;
   grid-template-columns: 2.5rem 1fr;
diff --git a/confiture-web-app/src/components/audit/AuditGenerationPageCriteria.vue b/confiture-web-app/src/components/audit/AuditGenerationPageCriteria.vue
index 1ddef18b..2485c266 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationPageCriteria.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationPageCriteria.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
-import { useFiltersStore } from "../../store";
+import { useAuditStore, useFiltersStore } from "../../store";
 import { AuditPage } from "../../types";
 import TopLink from "../ui/TopLink.vue";
 import AuditGenerationCriterium from "./AuditGenerationCriterium.vue";
@@ -13,6 +13,11 @@ defineProps<{
 }>();
 
 const store = useFiltersStore();
+const auditStore = useAuditStore();
+
+const transversePageId = computed(() => {
+  return auditStore.currentAudit?.transverseElementsPage.id;
+});
 
 const noResults = computed(() => {
   if (store.hasNoResultsFromEvaluated) {
@@ -41,11 +46,42 @@ const noResults = computed(() => {
     };
   }
 });
+
+// TODO: remove this alert in 3 months (16/10/2024)
+const topicNameRefs = ref<HTMLHeadingElement[]>();
+
+async function hideTransverseAlert() {
+  showTransverseAlert.value = false;
+  localStorage.setItem("ara:hide-transverse-alert", "true");
+  topicNameRefs.value?.[0].focus();
+}
+
+const showTransverseAlert = ref(
+  localStorage.getItem("ara:hide-transverse-alert") !== "true"
+);
 </script>
 
 <template>
   <!-- TODO: handle empty state -->
-  <div class="fr-mb-2w page-url">
+  <div v-if="showTransverseAlert" class="fr-alert fr-alert--info fr-mb-4w">
+    <h3 class="fr-alert__title">
+      Nouveauté : gestion des éléments transverses
+    </h3>
+    <p>
+      L'interrupteur "Sur toutes les pages" est remplacé par l'onglet "Éléments
+      transverses", qui vous permet d’évaluer les éléments communs à toutes les
+      pages : en-tête, pied de page...
+    </p>
+    <button
+      class="fr-btn--close fr-btn"
+      title="Masquer le message"
+      @click="hideTransverseAlert"
+    >
+      Masquer le message
+    </button>
+  </div>
+
+  <div v-if="page.id !== transversePageId" class="fr-mb-2w page-url">
     <a class="fr-link fr-link--sm" :href="page.url" target="_blank">
       {{ page.url }} <span class="fr-sr-only">(nouvelle fenêtre)</span>
     </a>
@@ -58,7 +94,12 @@ const noResults = computed(() => {
       class="fr-mb-6w"
     >
       <div class="fr-mb-3w topic-header">
-        <h3 :id="topic.number" class="fr-m-0 topic-heading">
+        <h3
+          :id="topic.number"
+          ref="topicNameRefs"
+          class="fr-m-0 topic-heading"
+          tabindex="-1"
+        >
           {{ topic.number }}. {{ topic.topic }}
         </h3>
         <NotApplicableSwitch :page-id="page.id" :topic-number="topic.number" />
@@ -107,6 +148,10 @@ const noResults = computed(() => {
 </template>
 
 <style scoped>
+.optional-notice {
+  color: var(--text-mention-grey);
+}
+
 .page-url {
   text-align: right;
 }
diff --git a/confiture-web-app/src/components/audit/CriteriumCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumCompliantAccordion.vue
index 9938644c..abdc7133 100644
--- a/confiture-web-app/src/components/audit/CriteriumCompliantAccordion.vue
+++ b/confiture-web-app/src/components/audit/CriteriumCompliantAccordion.vue
@@ -13,17 +13,16 @@ defineEmits<{
 }>();
 
 const isOffline = useIsOffline();
+
+const title = "Points d’amélioration";
 </script>
 
 <template>
-  <LazyAccordion
-    disclose-color="var(--background-default-grey)"
-    title="Points d’améliorations"
-  >
+  <LazyAccordion disclose-color="var(--background-default-grey)" :title="title">
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">
       <label class="fr-label fr-sr-only" :for="`criterum-comment-field-${id}`">
-        Points d’améliorations
+        {{ title }}
       </label>
       <textarea
         :id="`criterum-comment-field-${id}`"
diff --git a/confiture-web-app/src/components/audit/CriteriumNotApplicableAccordion.vue b/confiture-web-app/src/components/audit/CriteriumNotApplicableAccordion.vue
index 4a40efff..0ad919dc 100644
--- a/confiture-web-app/src/components/audit/CriteriumNotApplicableAccordion.vue
+++ b/confiture-web-app/src/components/audit/CriteriumNotApplicableAccordion.vue
@@ -10,17 +10,16 @@ defineEmits<{
 }>();
 
 const isOffline = useIsOffline();
+
+const title = "Commentaire";
 </script>
 
 <template>
-  <LazyAccordion
-    title="Commentaire"
-    disclose-color="var(--background-default-grey)"
-  >
+  <LazyAccordion :title="title" disclose-color="var(--background-default-grey)">
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">
       <label class="fr-label fr-sr-only" :for="`criterum-comment-field-${id}`">
-        Commentaire
+        {{ title }}
       </label>
       <textarea
         :id="`criterum-comment-field-${id}`"
diff --git a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
index 74cbf155..c544da97 100644
--- a/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
+++ b/confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
@@ -42,17 +42,17 @@ const userImpacts: Array<{
   {
     value: CriterionResultUserImpact.MINOR,
     label: formatUserImpact(CriterionResultUserImpact.MINOR),
-    color: "grey"
+    color: RadioColor.GREY
   },
   {
     value: CriterionResultUserImpact.MAJOR,
     label: formatUserImpact(CriterionResultUserImpact.MAJOR),
-    color: "yellow"
+    color: RadioColor.YELLOW
   },
   {
     value: CriterionResultUserImpact.BLOCKING,
     label: formatUserImpact(CriterionResultUserImpact.BLOCKING),
-    color: "red"
+    color: RadioColor.RED
   }
 ];
 
@@ -92,19 +92,21 @@ function lazyAccordionOpened() {
   commentFieldRef.value?.focus();
   hasJustBeenSetAsNotCompliant = false;
 }
+
+const title = "Erreur et recommandation";
 </script>
 
 <template>
   <LazyAccordion
     ref="lazyAccordionRef"
-    title="Erreur et recommandation"
+    :title="title"
     disclose-color="var(--background-default-grey)"
     @opened="lazyAccordionOpened"
   >
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">
       <label class="fr-label" :for="`criterum-comment-field-${id}`">
-        Description des erreurs et recommandations
+        {{ title }}
       </label>
       <textarea
         :id="`criterum-comment-field-${id}`"
diff --git a/confiture-web-app/src/components/audit/NotApplicableSwitch.vue b/confiture-web-app/src/components/audit/NotApplicableSwitch.vue
index c1984307..5285ad3f 100644
--- a/confiture-web-app/src/components/audit/NotApplicableSwitch.vue
+++ b/confiture-web-app/src/components/audit/NotApplicableSwitch.vue
@@ -3,7 +3,7 @@ import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import { useIsOffline } from "../../composables/useIsOffline";
-import { useResultsStore } from "../../store";
+import { useAuditStore, useResultsStore } from "../../store";
 import { CriteriumResultStatus } from "../../types";
 
 const props = defineProps<{
@@ -14,6 +14,10 @@ const props = defineProps<{
 const isOffline = useIsOffline();
 
 const resultsStore = useResultsStore();
+const auditStore = useAuditStore();
+
+const transverseElementsPageId =
+  auditStore.currentAudit?.transverseElementsPage.id;
 
 const isChecked = computed(() =>
   resultsStore
@@ -58,7 +62,12 @@ watch(switchValue, (switchValue) => {
       :disabled="isOffline"
     />
     <label class="fr-toggle__label" :for="`topic-switch-${topicNumber}`">
-      Non applicable sur la page
+      Non applicable
+      {{
+        pageId === transverseElementsPageId
+          ? "pour les éléments transverses"
+          : "sur la page"
+      }}
     </label>
   </div>
 </template>
diff --git a/confiture-web-app/src/components/icons/LayoutIcon.vue b/confiture-web-app/src/components/icons/LayoutIcon.vue
new file mode 100644
index 00000000..0b36addf
--- /dev/null
+++ b/confiture-web-app/src/components/icons/LayoutIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_5693_190138)">
+      <path
+        d="M1.99967 14C1.82286 14 1.65329 13.9298 1.52827 13.8047C1.40325 13.6797 1.33301 13.5101 1.33301 13.3333V2.66667C1.33301 2.48986 1.40325 2.32029 1.52827 2.19526C1.65329 2.07024 1.82286 2 1.99967 2H13.9997C14.1765 2 14.3461 2.07024 14.4711 2.19526C14.5961 2.32029 14.6663 2.48986 14.6663 2.66667V13.3333C14.6663 13.5101 14.5961 13.6797 14.4711 13.8047C14.3461 13.9298 14.1765 14 13.9997 14H1.99967ZM4.66634 6.66667H2.66634V12.6667H4.66634V6.66667ZM13.333 6.66667H5.99967V12.6667H13.333V6.66667ZM13.333 3.33333H2.66634V5.33333H13.333V3.33333Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5693_190138">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue
index af8f3b41..74ba0371 100644
--- a/confiture-web-app/src/components/report/ReportCriteria.vue
+++ b/confiture-web-app/src/components/report/ReportCriteria.vue
@@ -3,26 +3,17 @@ import { computed, useSlots } from "vue";
 import { useRoute } from "vue-router";
 
 import { pluralize } from "../../utils";
-import { ReportErrors, ReportTransverseError } from "./getReportErrors";
-import {
-  ReportImprovement,
-  ReportTransverseImprovement
-} from "./getReportImprovements";
-
-const props = defineProps<{
-  pagesData: ReportErrors[] | ReportImprovement[];
-  transverseData: ReportTransverseError[] | ReportTransverseImprovement[];
+import type { ReportError } from "./getReportErrors";
+import { ReportImprovement } from "./getReportImprovements";
+
+defineProps<{
+  count: number;
+  pagesData: ReportError[] | ReportImprovement[];
+  transverseData: ReportError | ReportImprovement;
+  showFilters?: boolean;
   topNotice?: string;
 }>();
 
-const dataCount = computed(() => {
-  return (
-    props.pagesData
-      .map((page: any) => page.topics.map((topic: any) => topic.improvements))
-      .flat(2).length + props.transverseData.length
-  );
-});
-
 // Set active side menu link
 const route = useRoute();
 
@@ -54,26 +45,26 @@ const hasFilters = computed(() => {
             <div class="fr-sidemenu__title fr-mb-2w">Pages</div>
             <ul class="fr-sidemenu__list">
               <li
-                v-if="transverseData.length"
+                v-if="transverseData.topics.length"
                 :class="[
                   'fr-sidemenu__item',
                   {
                     'fr-sidemenu__item--active':
-                      !route.hash || isActive('#all-pages')
+                      !route.hash || isActive('#elements-transverses')
                   }
                 ]"
               >
                 <a
                   class="fr-sidemenu__link"
-                  href="#all-pages"
+                  href="#elements-transverses"
                   :aria-current="
                     route.hash
-                      ? isActive('#all-pages')
+                      ? isActive('#elements-transverses')
                         ? 'true'
                         : undefined
                       : 'true'
                   "
-                  >Toutes les pages</a
+                  >Éléments transverses</a
                 >
               </li>
               <li
@@ -103,8 +94,8 @@ const hasFilters = computed(() => {
       <div v-if="hasFilters" class="fr-mb-6w header">
         <div role="alert" aria-live="polite">
           <p class="fr-mb-0 fr-text--xl fr-text--bold">
-            {{ dataCount }}
-            {{ pluralize("résultat", "résultats", dataCount) }}
+            {{ count }}
+            {{ pluralize("résultat", "résultats", count) }}
           </p>
         </div>
       </div>
@@ -113,7 +104,7 @@ const hasFilters = computed(() => {
         {{ topNotice }}
       </p>
 
-      <slot v-if="transverseData.length" name="transverse-data" />
+      <slot v-if="transverseData" name="transverse-data" />
 
       <slot name="pages-data" />
     </div>
diff --git a/confiture-web-app/src/components/report/ReportErrorCriterium.vue b/confiture-web-app/src/components/report/ReportErrorCriterium.vue
index de6f0f19..c483a935 100644
--- a/confiture-web-app/src/components/report/ReportErrorCriterium.vue
+++ b/confiture-web-app/src/components/report/ReportErrorCriterium.vue
@@ -30,7 +30,7 @@ function getCriteriumTitle(topicNumber: number, criteriumNumber: number) {
 
 <template>
   <div>
-    <p class="fr-text--lg fr-text--bold criterium-title">
+    <p class="fr-text--lg fr-text--bold criterium-title fr-mb-3v">
       {{ error.topic }}.{{ error.criterium }}&nbsp;
       <span v-html="getCriteriumTitle(error.topic, error.criterium)" />
     </p>
diff --git a/confiture-web-app/src/components/report/ReportErrors.vue b/confiture-web-app/src/components/report/ReportErrors.vue
index 785273b7..a02a250e 100644
--- a/confiture-web-app/src/components/report/ReportErrors.vue
+++ b/confiture-web-app/src/components/report/ReportErrors.vue
@@ -3,7 +3,7 @@ import { computed, ref } from "vue";
 
 import { useReportStore } from "../../store";
 import { CriterionResultUserImpact, CriteriumResultStatus } from "../../types";
-import { getReportErrors, getReportTransverseErrors } from "./getReportErrors";
+import { getReportErrors } from "./getReportErrors";
 import ReportCriteria from "./ReportCriteria.vue";
 import ReportErrorCriterium from "./ReportErrorCriterium.vue";
 
@@ -63,6 +63,28 @@ const unknownUserImpactErrorCount = computed(
     ).length
 );
 
+const transverseErrors = computed(() => {
+  return getReportErrors(
+    report,
+    quickWinFilter.value,
+    userImpactFilters.value
+  )[0];
+});
+
+const pagesErrors = computed(() => {
+  return getReportErrors(
+    report,
+    quickWinFilter.value,
+    userImpactFilters.value
+  ).slice(1);
+});
+
+const errorsCount = computed(() => {
+  return getReportErrors(report, quickWinFilter.value, userImpactFilters.value)
+    .map((page: any) => page.topics.map((topic: any) => topic.errors))
+    .flat(2).length;
+});
+
 const quickWinFilter = ref(false);
 
 function resetFilters() {
@@ -74,8 +96,10 @@ function resetFilters() {
 <template>
   <ReportCriteria
     v-if="report.data"
-    :pages-data="getReportErrors(report, quickWinFilter, userImpactFilters)"
-    :transverse-data="getReportTransverseErrors(report, userImpactFilters)"
+    :count="errorsCount"
+    :pages-data="pagesErrors"
+    :transverse-data="transverseErrors"
+    :show-filters="true"
   >
     <template #filter>
       <div class="fr-text--bold fr-text--xl fr-mb-2w filter-title">Filtres</div>
@@ -172,24 +196,18 @@ function resetFilters() {
       </div>
     </template>
 
-    <template #transverse-data>
-      <section
-        v-if="getReportTransverseErrors(report, userImpactFilters).length"
-        class="fr-mb-8w"
-      >
-        <h2 id="all-pages" class="fr-h3 fr-mb-2w page-title">
-          Toutes les pages
+    <template v-if="transverseErrors.topics.length" #transverse-data>
+      <section class="fr-mb-8w">
+        <h2 id="elements-transverses" class="fr-h3 fr-mb-2w page-title">
+          Éléments transverses
         </h2>
 
         <div
-          v-for="(topic, i) in getReportTransverseErrors(
-            report,
-            userImpactFilters
-          )"
+          v-for="(topic, i) in transverseErrors.topics"
           :key="topic.topic"
           :class="{ 'fr-mt-9v': i !== 0 }"
         >
-          <p class="fr-tag fr-tag--sm fr-mb-3w">
+          <p class="fr-tag fr-tag--sm fr-mb-3v">
             {{ topic.topic }}.&nbsp;{{ topic.name }}
           </p>
 
@@ -204,15 +222,7 @@ function resetFilters() {
     </template>
 
     <template #pages-data>
-      <section
-        v-for="page in getReportErrors(
-          report,
-          quickWinFilter,
-          userImpactFilters
-        )"
-        :key="page.id"
-        class="fr-mb-8w"
-      >
+      <section v-for="page in pagesErrors" :key="page.id" class="fr-mb-8w">
         <h2 :id="`${page.id}`" class="fr-h3 fr-mb-2w page-title">
           {{ page.name }}
         </h2>
diff --git a/confiture-web-app/src/components/report/ReportImprovements.vue b/confiture-web-app/src/components/report/ReportImprovements.vue
index 44ccf092..59265a1d 100644
--- a/confiture-web-app/src/components/report/ReportImprovements.vue
+++ b/confiture-web-app/src/components/report/ReportImprovements.vue
@@ -1,30 +1,44 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 import { useReportStore } from "../../store";
-import {
-  getReportImprovements,
-  getReportTransverseImprovements
-} from "./getReportImprovements";
+import { getReportImprovements } from "./getReportImprovements";
 import ReportCriteria from "./ReportCriteria.vue";
 import ReportImprovementCriterium from "./ReportImprovementCriterium.vue";
 
 const report = useReportStore();
+
+const transverseImprovements = computed(() => {
+  return getReportImprovements(report)[0];
+});
+
+const pagesImprovements = computed(() => {
+  return getReportImprovements(report).slice(1);
+});
+
+const improvementsCount = computed(() => {
+  return getReportImprovements(report)
+    .map((page: any) => page.topics.map((topic: any) => topic.improvements))
+    .flat(2).length;
+});
 </script>
 
 <template>
   <ReportCriteria
     v-if="report.data"
-    :pages-data="getReportImprovements(report)"
-    :transverse-data="getReportTransverseImprovements(report)"
     top-notice="Ci-dessous les commentaires de l’auditeur ou de l’auditrice concernant des critères conformes ou non applicables."
+    :count="improvementsCount"
+    :pages-data="pagesImprovements"
+    :transverse-data="transverseImprovements"
   >
     <template #transverse-data>
       <section class="fr-mb-8w">
-        <h2 id="all-pages" class="fr-h3 fr-mb-2w page-title">
-          Toutes les pages
+        <h2 id="elements-transverses" class="fr-h3 fr-mb-2w page-title">
+          Éléments transverses
         </h2>
 
         <div
-          v-for="(topic, i) in getReportTransverseImprovements(report)"
+          v-for="(topic, i) in transverseImprovements.topics"
           :key="topic.number"
           :class="{ 'fr-mt-9v': i !== 0 }"
         >
@@ -36,7 +50,7 @@ const report = useReportStore();
             v-for="(improvement, j) in topic.improvements"
             :key="j"
             :class="j === 0 ? null : 'fr-mt-9v'"
-            :topic="improvement.topic"
+            :topic="topic.number"
             :criterium="improvement.criterium"
             :comment="improvement.comment!"
             :status="improvement.status"
@@ -47,7 +61,7 @@ const report = useReportStore();
 
     <template #pages-data>
       <section
-        v-for="page in getReportImprovements(report)"
+        v-for="page in pagesImprovements"
         :key="page.id"
         class="fr-mb-8w"
       >
@@ -63,6 +77,10 @@ const report = useReportStore();
           {{ page.url }} <span class="fr-sr-only">(nouvelle fenêtre)</span>
         </a>
 
+        <p v-if="page.topics.length === 0" class="fr-mt-4w">
+          Aucun point d’amélioration relevé sur cette page.
+        </p>
+
         <div
           v-for="(topic, i) in page.topics"
           :key="topic.number"
diff --git a/confiture-web-app/src/components/report/ReportResults.vue b/confiture-web-app/src/components/report/ReportResults.vue
index d75d1da0..3b40b4f1 100644
--- a/confiture-web-app/src/components/report/ReportResults.vue
+++ b/confiture-web-app/src/components/report/ReportResults.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useRoute } from "vue-router";
 
 import { useReportStore } from "../../store";
 import { AuditStatus, AuditType } from "../../types";
@@ -7,6 +8,13 @@ import { getAuditStatus, pluralize, slugify } from "../../utils";
 import { StatDonutTheme } from "../StatDonut.vue";
 import SummaryCard from "../SummaryCard.vue";
 
+defineEmits<{
+  (e: "toTab", payload: string): void;
+}>();
+
+const route = useRoute();
+const uniqueId = route.params.uniqueId as string;
+
 const report = useReportStore();
 
 const stats = computed(() => {
@@ -43,7 +51,7 @@ const stats = computed(() => {
     {
       title: "Critères<br/> conformes",
       value: report.data?.criteriaCount.compliant,
-      total: report.data?.criteriaCount.total,
+      total: report.data?.criteriaCount.applicable,
       theme: "green" as StatDonutTheme
     }
   ];
@@ -54,11 +62,11 @@ const pageDistributionTableData = {
   data: [
     ["Pages", "Critères conformes", "Critères non conformes"],
     ...(report.data
-      ? report.data.pageDistributions.map((p) => {
+      ? report.data.pageDistributions.slice(1).map((p) => {
           return [
             p.name,
-            `${Math.round(p.compliant.raw)}`,
-            `${Math.round(p.notCompliant.raw)}`
+            Math.round(p.compliant.raw),
+            Math.round(p.notCompliant.raw)
           ];
         })
       : [])
@@ -78,9 +86,9 @@ const topicDistributionTableData = {
       ? report.data.topicDistributions.map((t, i) => {
           return [
             `${i + 1}. ${t.name}`,
-            `${Math.round(t.compliant.raw)}`,
-            `${Math.round(t.notCompliant.raw)}`,
-            `${Math.round(t.notApplicable.raw)}`
+            Math.round(t.compliant.raw),
+            Math.round(t.notCompliant.raw),
+            Math.round(t.notApplicable.raw)
           ];
         })
       : [])
@@ -90,6 +98,10 @@ const topicDistributionTableData = {
 const auditInProgress = computed(
   () => !!report.data && getAuditStatus(report.data) === AuditStatus.IN_PROGRESS
 );
+
+const transverseNotCompliantCount = computed(() => {
+  return report.data?.pageDistributions[0].notCompliant.raw;
+});
 </script>
 
 <template>
@@ -132,15 +144,15 @@ const auditInProgress = computed(
       </div>
     </div>
 
-    <h2 class="fr-mt-8w">Détails des résultats</h2>
+    <div class="wrapper">
+      <h2 class="fr-mt-8w">Détails des résultats</h2>
 
-    <!-- Per page -->
-    <h3 :id="slugify(pageDistributionTableData.title)" class="fr-h4 fr-mb-3w">
-      {{ pageDistributionTableData.title }}
-    </h3>
+      <!-- Per page -->
+      <h3 :id="slugify(pageDistributionTableData.title)" class="fr-h4 fr-mb-3w">
+        {{ pageDistributionTableData.title }}
+      </h3>
 
-    <div class="fr-p-4w fr-mb-6w table-wrapper">
-      <div class="fr-table fr-table--no-caption fr-m-0">
+      <div class="fr-table fr-table--no-caption fr-mb-3v">
         <div class="fr-table__wrapper">
           <div class="fr-table__container">
             <div class="fr-table__content">
@@ -187,14 +199,43 @@ const auditInProgress = computed(
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Per topic -->
-    <h3 :id="slugify(topicDistributionTableData.title)" class="fr-h4 fr-mb-3w">
-      {{ topicDistributionTableData.title }}
-    </h3>
+      <div v-if="transverseNotCompliantCount" class="fr-callout fr-mb-6w">
+        <p class="fr-callout__text fr-mb-2w">
+          <strong>{{ transverseNotCompliantCount }}</strong>
+          {{ pluralize("critère", "critères", transverseNotCompliantCount) }}
+          non
+          {{ pluralize("conforme", "conformes", transverseNotCompliantCount) }}
+          concernent des éléments transverses à toutes les pages de
+          l’échantillon.
+        </p>
+        <!-- FIXME: make this link work -->
+        <RouterLink
+          :to="{
+            name: 'report',
+            params: { uniqueId, tab: slugify('Détails des non-conformités') }
+          }"
+          class="fr-link"
+          @click="$emit('toTab', 'Détails des non-conformités')"
+          >Voir
+          {{
+            pluralize(
+              "le critère non conforme transverse",
+              "les critères non conformes transverses",
+              transverseNotCompliantCount
+            )
+          }}</RouterLink
+        >
+      </div>
+
+      <!-- Per topic -->
+      <h3
+        :id="slugify(topicDistributionTableData.title)"
+        class="fr-h4 fr-mb-3w"
+      >
+        {{ topicDistributionTableData.title }}
+      </h3>
 
-    <div class="fr-p-4w table-wrapper">
       <div class="fr-table fr-table--no-caption fr-m-0">
         <div class="fr-table__wrapper">
           <div class="fr-table__container">
@@ -248,8 +289,7 @@ const auditInProgress = computed(
 </template>
 
 <style scoped>
-.table-wrapper {
-  border: 1px solid var(--border-default-grey);
-  max-width: 49.5rem;
+.wrapper {
+  max-width: 46rem;
 }
 </style>
diff --git a/confiture-web-app/src/components/report/getReportErrors.ts b/confiture-web-app/src/components/report/getReportErrors.ts
index fcdd2a71..31cc50f7 100644
--- a/confiture-web-app/src/components/report/getReportErrors.ts
+++ b/confiture-web-app/src/components/report/getReportErrors.ts
@@ -1,4 +1,4 @@
-import { groupBy, mapValues, sortBy, uniqWith } from "lodash-es";
+import { groupBy, mapValues, sortBy } from "lodash-es";
 
 import rgaa from "../../criteres.json";
 import { ReportStoreState } from "../../store";
@@ -9,7 +9,7 @@ import {
   ReportCriteriumResult
 } from "../../types";
 
-export type ReportErrors = {
+export type ReportError = {
   id: number;
   name?: string;
   order: number;
@@ -25,7 +25,7 @@ export function getReportErrors(
   report: ReportStoreState,
   quickWinFilter: boolean,
   userImpactFilters: Array<CriterionResultUserImpact | null>
-): ReportErrors[] {
+): ReportError[] {
   const resultsGroupedByPage = {
     // include pages with no errors
     ...report.data?.context.samples.reduce<Record<string, []>>((acc, val) => {
@@ -38,7 +38,6 @@ export function getReportErrors(
         .filter((r) => {
           return (
             r.status === CriteriumResultStatus.NOT_COMPLIANT &&
-            !r.transverse &&
             userImpactFilters.includes(r.userImpact)
           );
         })
@@ -62,10 +61,7 @@ export function getReportErrors(
               return {
                 topic: Number(topicNumber),
                 name: getTopicName(Number(topicNumber)),
-                errors: sortBy(
-                  results.filter((r) => !r.transverse),
-                  "criterium"
-                )
+                errors: sortBy(results, "criterium")
               };
             })
           ),
@@ -81,42 +77,6 @@ function getPage(report: ReportStoreState, pageId: number | string) {
   return report.data!.context.samples.find((p) => p.id === Number(pageId))!;
 }
 
-export type ReportTransverseError = {
-  topic: number;
-  name?: string;
-  errors: ReportCriteriumResult[];
-};
-
-export function getReportTransverseErrors(
-  report: ReportStoreState,
-  userImpactFilters: Array<CriterionResultUserImpact | null>
-): ReportTransverseError[] {
-  return Object.values(
-    mapValues(
-      groupBy(
-        uniqWith(
-          report.data?.results.filter((r) => {
-            return (
-              r.transverse &&
-              r.status === CriteriumResultStatus.NOT_COMPLIANT &&
-              userImpactFilters.includes(r.userImpact)
-            );
-          }),
-          (a, b) => a.criterium === b.criterium && a.topic === b.topic
-        ),
-        "topic"
-      ),
-      (results, topicNumber) => {
-        return {
-          topic: Number(topicNumber),
-          name: getTopicName(Number(topicNumber)),
-          errors: results
-        };
-      }
-    )
-  );
-}
-
 function getTopicName(topicNumber: number) {
   return rgaa.topics.find((t) => t.number === topicNumber)?.topic;
 }
diff --git a/confiture-web-app/src/components/report/getReportImprovements.ts b/confiture-web-app/src/components/report/getReportImprovements.ts
index 7c38eb42..93717096 100644
--- a/confiture-web-app/src/components/report/getReportImprovements.ts
+++ b/confiture-web-app/src/components/report/getReportImprovements.ts
@@ -1,8 +1,12 @@
-import { groupBy, mapValues, uniqWith } from "lodash-es";
+import { groupBy, mapValues, sortBy } from "lodash-es";
 
 import rgaa from "../../criteres.json";
 import { ReportStoreState } from "../../store";
-import { CriteriumResultStatus, ReportCriteriumResult } from "../../types";
+import {
+  AuditReport,
+  CriteriumResultStatus,
+  ReportCriteriumResult
+} from "../../types";
 
 export type ReportImprovement = {
   id: number;
@@ -21,45 +25,67 @@ export type ReportImprovement = {
 };
 
 export function getReportImprovements(
-  reportData: ReportStoreState
+  report: ReportStoreState
 ): ReportImprovement[] {
-  return (
-    reportData.data?.context.samples
-      .map((pageSample) => {
-        return {
-          ...pageSample,
-          topics: Object.entries(
-            groupBy(
-              reportData.data?.results.filter(resultIsFromPage(pageSample.id)),
-              "topic"
-            )
-          )
-            .map(([topic, results]) => {
+  const resultsGroupedByPage = {
+    // include pages with no errors
+    ...report.data?.context.samples.reduce<Record<string, []>>((acc, val) => {
+      acc[val.id] = [];
+      return acc;
+    }, {}),
+
+    ...groupBy(
+      report.data?.results.filter((r) => {
+        return (
+          (r.status === CriteriumResultStatus.COMPLIANT &&
+            r.compliantComment) ||
+          (r.status === CriteriumResultStatus.NOT_APPLICABLE &&
+            r.notApplicableComment)
+        );
+      }),
+      "pageId"
+    )
+  } as Record<number, AuditReport["results"]>;
+
+  return sortBy(
+    Object.entries(resultsGroupedByPage).map(([pageId, results]) => {
+      return {
+        id: Number(pageId),
+        order: getPage(report, pageId).order,
+        name: getPage(report, pageId).name,
+        url: getPage(report, pageId).url,
+        topics: sortBy(
+          Object.values(
+            mapValues(groupBy(results, "topic"), (results, topicNumber) => {
               return {
-                number: Number(topic),
-                name: getTopicName(Number(topic)),
-                improvements: results
-                  .filter(hasImprovement)
-                  .map(getImprovementObject)
+                number: Number(topicNumber),
+                name: getTopicName(Number(topicNumber)),
+                improvements: sortBy(
+                  results.filter(hasImprovement).map(getImprovementObject),
+                  "criterium"
+                )
               };
             })
-            .filter(hasOneOrMoreImprovements)
-        };
-      })
-      .filter(hasOneOrMoreTopics) || []
+          ),
+          "topic"
+        )
+      };
+    }),
+    (el) => el.order
   );
 }
 
-const hasOneOrMoreTopics = (p: { topics: unknown[] }) => p.topics.length > 0;
+function getPage(report: ReportStoreState, pageId: number | string) {
+  return report.data!.context.samples.find((p) => p.id === Number(pageId))!;
+}
 
-const hasOneOrMoreImprovements = (t: { improvements: unknown[] }) =>
-  t.improvements.length > 0;
+function getTopicName(topicNumber: number) {
+  return rgaa.topics.find((t) => t.number === topicNumber)?.topic;
+}
 
 const hasImprovement = (r: ReportCriteriumResult) =>
-  !r.transverse &&
-  ((r.status === CriteriumResultStatus.COMPLIANT && r.compliantComment) ||
-    (r.status === CriteriumResultStatus.NOT_APPLICABLE &&
-      r.notApplicableComment));
+  (r.status === CriteriumResultStatus.COMPLIANT && r.compliantComment) ||
+  (r.status === CriteriumResultStatus.NOT_APPLICABLE && r.notApplicableComment);
 
 const getImprovementObject = (r: ReportCriteriumResult) => {
   return {
@@ -68,62 +94,3 @@ const getImprovementObject = (r: ReportCriteriumResult) => {
     comment: r.compliantComment || r.notApplicableComment
   };
 };
-
-const resultIsFromPage = (pageId: number) => (result: ReportCriteriumResult) =>
-  result.pageId === pageId;
-
-function getTopicName(topicNumber: number) {
-  return rgaa.topics.find((t) => t.number === topicNumber)?.topic;
-}
-
-export type ReportTransverseImprovement = {
-  number: number;
-  name?: string;
-  improvements: {
-    topic: number;
-    criterium: number;
-    status: CriteriumResultStatus;
-    comment: string | null;
-  }[];
-};
-
-export function getReportTransverseImprovements(
-  reportData: ReportStoreState
-): ReportTransverseImprovement[] {
-  return Object.values(
-    mapValues(
-      groupBy(
-        uniqWith(
-          reportData.data?.results.filter((r) => {
-            return (
-              r.transverse &&
-              [
-                CriteriumResultStatus.COMPLIANT,
-                CriteriumResultStatus.NOT_APPLICABLE
-              ].includes(r.status)
-            );
-          }),
-          (a, b) => a.criterium === b.criterium && a.topic === b.topic
-        ),
-        "topic"
-      ),
-      (results, topicNumber) => {
-        return {
-          number: Number(topicNumber),
-          name: getTopicName(Number(topicNumber)),
-          improvements: results.map((r) => {
-            return {
-              topic: r.topic,
-              criterium: r.criterium,
-              status: r.status,
-              comment:
-                r.status === CriteriumResultStatus.COMPLIANT
-                  ? r.compliantComment
-                  : r.notApplicableComment
-            };
-          })
-        };
-      }
-    )
-  );
-}
diff --git a/confiture-web-app/src/components/ui/Radio.vue b/confiture-web-app/src/components/ui/Radio.vue
index a166ee64..67502571 100644
--- a/confiture-web-app/src/components/ui/Radio.vue
+++ b/confiture-web-app/src/components/ui/Radio.vue
@@ -1,5 +1,10 @@
 <script lang="ts">
-export type RadioColor = "red" | "green" | "yellow" | "grey";
+export enum RadioColor {
+  RED = "red",
+  GREEN = "green",
+  YELLOW = "yellow",
+  GREY = "grey"
+}
 </script>
 
 <script setup lang="ts">
diff --git a/confiture-web-app/src/components/ui/RadioGroup.vue b/confiture-web-app/src/components/ui/RadioGroup.vue
index 0da324f7..49bfd3cb 100644
--- a/confiture-web-app/src/components/ui/RadioGroup.vue
+++ b/confiture-web-app/src/components/ui/RadioGroup.vue
@@ -1,9 +1,6 @@
-<script lang="ts">
-export type RadioColor = "red" | "green" | "yellow" | "grey";
-</script>
-
 <script lang="ts" setup>
 import { useUniqueId } from "../../composables/useUniqueId";
+import { RadioColor } from "./Radio.vue";
 
 const props = defineProps<{
   label: string;
diff --git a/confiture-web-app/src/composables/useAuditStats.ts b/confiture-web-app/src/composables/useAuditStats.ts
index d94a7ae7..199ec857 100644
--- a/confiture-web-app/src/composables/useAuditStats.ts
+++ b/confiture-web-app/src/composables/useAuditStats.ts
@@ -1,6 +1,6 @@
 import { computed } from "vue";
 
-import { useResultsStore } from "../store";
+import { useAuditStore, useResultsStore } from "../store";
 import {
   CriterionResultUserImpact,
   CriteriumResult,
@@ -8,6 +8,7 @@ import {
 } from "../types";
 
 export function useAuditStats() {
+  const auditStore = useAuditStore();
   const store = useResultsStore();
 
   const groupedCriteria = computed(() => {
@@ -24,63 +25,64 @@ export function useAuditStats() {
     );
   });
 
+  const isCompliant = (c: CriteriumResult) =>
+    c.status === CriteriumResultStatus.COMPLIANT;
+
+  const isNotCompliant = (c: CriteriumResult) =>
+    c.status === CriteriumResultStatus.NOT_COMPLIANT;
+
+  const isNotApplicable = (c: CriteriumResult) =>
+    c.status === CriteriumResultStatus.NOT_APPLICABLE;
+
+  const isNotTested = (c: CriteriumResult) =>
+    c.status === CriteriumResultStatus.NOT_TESTED;
+
+  const isTransverse = (c: CriteriumResult) =>
+    c.pageId === auditStore.currentAudit?.transverseElementsPage.id;
+
   const applicableCriteria = computed(() => {
     return Object.values(groupedCriteria.value).filter((criteria) =>
-      criteria.some((c) => c.status !== CriteriumResultStatus.NOT_APPLICABLE)
+      criteria.some((c) => isCompliant(c) || isNotCompliant(c))
     );
   });
 
-  const notApplicableCriteriaCount = computed(() => {
-    return Object.values(groupedCriteria.value).filter((criteria) => {
-      return criteria.every((c) => c.status === "NOT_APPLICABLE");
-    }).length;
-  });
+  const compliantCriteria = computed(() => {
+    return applicableCriteria.value.filter((criteria) => {
+      // remove untested transverse criterion
+      const withoutUntestedTrans = criteria.filter(
+        (c) => !(isTransverse(c) && isNotTested(c))
+      );
 
-  const compliantCriteriaCount = computed(() => {
-    return applicableCriteria.value.filter((criteria) =>
-      criteria.every(
-        (c) =>
-          c.status === CriteriumResultStatus.COMPLIANT ||
-          c.status === CriteriumResultStatus.NOT_APPLICABLE
-      )
-    ).length;
+      return (
+        withoutUntestedTrans.some((c) => isCompliant(c)) &&
+        withoutUntestedTrans.every((c) => isCompliant(c) || isNotApplicable(c))
+      );
+    });
   });
 
-  const notCompliantCriteriaCount = computed(() => {
-    return applicableCriteria.value.filter((criteria) =>
-      criteria.some((c) => c.status === CriteriumResultStatus.NOT_COMPLIANT)
-    ).length;
+  const notCompliantCriteria = computed(() => {
+    return applicableCriteria.value.filter((criteria) => {
+      return criteria.some((c) => isNotCompliant(c));
+    });
   });
 
-  const blockingCriteriaCount = computed(() => {
-    return applicableCriteria.value.filter((criteria) =>
-      criteria.some(
-        (c) =>
-          c.status === CriteriumResultStatus.NOT_COMPLIANT &&
-          c.userImpact === CriterionResultUserImpact.BLOCKING
-      )
-    ).length;
-  });
-
-  const complianceLevel = computed(() => {
-    const applicableCriteria = Object.values(groupedCriteria.value).filter(
-      (criteria) =>
-        criteria.some((c) => c.status !== CriteriumResultStatus.NOT_APPLICABLE)
-    );
+  const notApplicableCriteria = computed(() => {
+    return Object.values(groupedCriteria.value).filter((criteria) => {
+      // remove untested transverse criterion
+      const withoutUntestedTrans = criteria.filter(
+        (c) => !(isTransverse(c) && isNotTested(c))
+      );
 
-    const compliantCriteria = applicableCriteria.filter((criteria) =>
-      criteria.every(
-        (c) =>
-          c.status === CriteriumResultStatus.COMPLIANT ||
-          c.status === CriteriumResultStatus.NOT_APPLICABLE
-      )
-    );
+      return withoutUntestedTrans.every((c) => isNotApplicable(c));
+    });
+  });
 
-    return (
-      Math.round(
-        (compliantCriteria.length / applicableCriteria.length) * 100
-      ) || 0
-    );
+  const blockingCriteria = computed(() => {
+    return notCompliantCriteria.value.filter((criteria) => {
+      return criteria.some(
+        (c) => c.userImpact === CriterionResultUserImpact.BLOCKING
+      );
+    });
   });
 
   const errorsCount = computed(() => {
@@ -100,13 +102,25 @@ export function useAuditStats() {
     return { total, blocking };
   });
 
+  const complianceLevel = computed(() => {
+    return (
+      Math.round(
+        (compliantCriteria.value.length / applicableCriteria.value.length) * 100
+      ) || 0
+    );
+  });
+
   return {
-    groupedCriteria,
-    notApplicableCriteriaCount,
-    compliantCriteriaCount,
-    notCompliantCriteriaCount,
-    blockingCriteriaCount,
-    complianceLevel,
-    errorsCount
+    applicableCriteriaCount: computed(() => applicableCriteria.value.length),
+    compliantCriteriaCount: computed(() => compliantCriteria.value.length),
+    notCompliantCriteriaCount: computed(
+      () => notCompliantCriteria.value.length
+    ),
+    notApplicableCriteriaCount: computed(
+      () => notApplicableCriteria.value.length
+    ),
+    blockingCriteriaCount: computed(() => blockingCriteria.value.length),
+    errorsCount,
+    complianceLevel
   };
 }
diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
index 0116c23b..2e2f1593 100644
--- a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
+++ b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -16,7 +16,7 @@ import rgaa from "../../criteres.json";
 import { CRITERIA_BY_AUDIT_TYPE } from "../../criteria";
 import { useAuditStore, useFiltersStore, useResultsStore } from "../../store";
 import { AuditPage, AuditType, CriteriumResultStatus } from "../../types";
-import { getCriteriaCount, pluralize } from "../../utils";
+import { pluralize } from "../../utils";
 
 const route = useRoute();
 
@@ -27,8 +27,8 @@ useWrappedFetch(async () => {
   resultsStore.$reset();
   await auditStore.fetchAuditIfNeeded(uniqueId.value);
   await resultsStore.fetchResults(uniqueId.value);
-  auditStore.updateCurrentPageId(
-    auditStore.currentAudit?.pages.at(0)?.id ?? null
+  await auditStore.updateCurrentPageId(
+    auditStore.currentAudit?.transverseElementsPage.id || null
   );
 }, true);
 
@@ -52,7 +52,10 @@ const topics = computed(() => {
         // Every results for the current topic
         const relevantResults =
           resultsStore.allResults?.filter(
-            (result) => result.topic === topic.number
+            (result) =>
+              result.topic === topic.number &&
+              result.pageId !==
+                auditStore.currentAudit?.transverseElementsPage.id
           ) ?? [];
 
         // number of criteria for the topic accross all pages
@@ -76,13 +79,17 @@ const topics = computed(() => {
 const auditIsInProgress = computed(() => resultsStore.auditProgress < 1);
 
 function updateCurrentPageId(i: number) {
-  const pageIdOrNull = auditStore.currentAudit?.pages.at(i)?.id ?? null;
-  auditStore.updateCurrentPageId(pageIdOrNull);
+  auditStore.updateCurrentPageId(
+    i === 0
+      ? auditStore.currentAudit?.transverseElementsPage.id ?? null
+      : auditStore.currentAudit?.pages.at(i - 1)?.id ?? null
+  );
 }
 
 const {
   complianceLevel,
   compliantCriteriaCount,
+  applicableCriteriaCount,
   notCompliantCriteriaCount,
   blockingCriteriaCount
 } = useAuditStats();
@@ -113,13 +120,13 @@ const headerInfos = computed(() => [
       blockingCriteriaCount.value
     )} pour l’usager`,
     value: notCompliantCriteriaCount.value,
-    total: getCriteriaCount(auditStore.currentAudit?.auditType as AuditType),
+    total: applicableCriteriaCount.value,
     theme: "red" as StatDonutTheme
   },
   {
     title: "Critères<br/> conformes",
     value: compliantCriteriaCount.value,
-    total: getCriteriaCount(auditStore.currentAudit?.auditType as AuditType),
+    total: applicableCriteriaCount.value,
     theme: "green" as StatDonutTheme
   }
 ]);
@@ -179,9 +186,11 @@ const pageTitle = computed(() => {
   if (auditStore.currentAudit) {
     let title = `Audit ${auditStore.currentAudit.procedureName}`;
 
-    const tabName = ` - Page en cours « ${auditStore.currentAudit.pages.find(
-      (p) => p.id === auditStore.currentPageId
-    )?.name} »`;
+    const tabName = ` - Page en cours « ${
+      auditStore.currentAudit.pages.find(
+        (p) => p.id === auditStore.currentPageId
+      )?.name ?? "Éléments transverses"
+    } »`;
 
     title += tabName;
 
@@ -204,13 +213,19 @@ const pageTitle = computed(() => {
 type TabData = { label: string; data: AuditPage };
 
 const tabsData = computed((): TabData[] => {
-  return sortBy(
-    auditStore.currentAudit?.pages.map((p) => ({
-      label: p.name,
-      data: p
-    })) ?? [],
-    (p) => p.data.order
-  );
+  const transversePage = auditStore.currentAudit?.transverseElementsPage;
+  return [
+    ...(transversePage
+      ? [{ label: transversePage?.name, data: transversePage }]
+      : []),
+    ...sortBy(
+      auditStore.currentAudit?.pages.map((p) => ({
+        label: p.name,
+        data: p
+      })) ?? [],
+      (p) => p.data.order
+    )
+  ];
 });
 </script>
 
diff --git a/confiture-web-app/src/pages/report/ContextPage.vue b/confiture-web-app/src/pages/report/ContextPage.vue
index 478b17c1..d1287b98 100644
--- a/confiture-web-app/src/pages/report/ContextPage.vue
+++ b/confiture-web-app/src/pages/report/ContextPage.vue
@@ -139,7 +139,7 @@ useWrappedFetch(() => report.fetchReport(uniqueId));
 
     <p>
       L’audit a porté sur un échantillon de
-      <strong>{{ report.data.context.samples.length }} pages</strong> :
+      <strong>{{ report.data.context.samples.length - 1 }} pages</strong> :
     </p>
 
     <div class="fr-table fr-table--no-caption">
@@ -158,7 +158,10 @@ useWrappedFetch(() => report.fetchReport(uniqueId));
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="(page, i) in report.data.context.samples" :key="i">
+                <tr
+                  v-for="(page, i) in report.data.context.samples.slice(1)"
+                  :key="i"
+                >
                   <td>{{ i + 1 }}</td>
                   <td>{{ page.name }}</td>
                   <td>
diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index dd7a4255..493b75df 100644
--- a/confiture-web-app/src/pages/report/ReportPage.vue
+++ b/confiture-web-app/src/pages/report/ReportPage.vue
@@ -41,7 +41,7 @@ const tabs = computed(() => [
   ...(hasNotes.value ? [{ title: "Notes", component: ReportNotes }] : []),
   { title: "Détails des non-conformités", component: ReportErrors },
   ...(hasCompliantOrNotApplicableComments.value
-    ? [{ title: "Points d’améliorations", component: ReportImprovements }]
+    ? [{ title: "Points d’amélioration", component: ReportImprovements }]
     : [])
 ]);
 
@@ -88,7 +88,7 @@ const targetTabIndex = computed(() => {
 });
 const router = useRouter();
 
-function handleTabChange(tab: { title: string }) {
+function handleTabChange(tabTitle: string) {
   // change the URL in the browser adress bar without triggering vue-router navigation
   history.pushState(
     {},
@@ -97,12 +97,12 @@ function handleTabChange(tab: { title: string }) {
       name: "report",
       params: {
         uniqueId,
-        tab: slugify(tab.title)
+        tab: slugify(tabTitle)
       }
     }).fullPath
   );
 
-  targetTab.value = slugify(tab.title);
+  targetTab.value = slugify(tabTitle);
 }
 
 const csvExportUrl = computed(() => `/api/reports/${uniqueId}/exports/csv`);
@@ -122,7 +122,7 @@ const siteUrl = computed(() => {
   if (report.data) {
     return (
       report.data.procedureUrl ||
-      new URL(report.data.context.samples[0].url).origin
+      new URL(report.data.context.samples[1].url).origin
     );
   }
 
@@ -286,9 +286,10 @@ const siteUrl = computed(() => {
         role="tabpanel"
         :aria-labelledby="`tabpanel-${slugify(tab.title)}`"
         tabindex="0"
-        v-on="{ 'dsfr.disclose': () => handleTabChange(tab) }"
+        v-on="{ 'dsfr.disclose': () => handleTabChange(tab.title) }"
       >
-        <component :is="tab.component" />
+        <ReportResults v-if="i === 0" @to-tab="handleTabChange" />
+        <component :is="tab.component" v-else />
       </div>
     </div>
   </template>
diff --git a/confiture-web-app/src/store/results.ts b/confiture-web-app/src/store/results.ts
index ee398931..709064eb 100644
--- a/confiture-web-app/src/store/results.ts
+++ b/confiture-web-app/src/store/results.ts
@@ -115,13 +115,17 @@ export const useResultsStore = defineStore("results", {
     },
 
     /**
-     * @returns True when every criterium in the audit have been tested (status is different from NOT_TESTED)
+     * @returns True when every criterium (transverse excluded) in the audit have been tested (status is different from NOT_TESTED)
      */
     everyCriteriumAreTested(): boolean {
+      const auditStore = useAuditStore();
+      const transversePageId =
+        auditStore.currentAudit?.transverseElementsPage.id;
+
       return (
-        !this.allResults?.some(
-          (r) => r.status === CriteriumResultStatus.NOT_TESTED
-        ) ?? false
+        !this.allResults
+          ?.filter((r) => r.pageId !== transversePageId)
+          .some((r) => r.status === CriteriumResultStatus.NOT_TESTED) ?? false
       );
     },
 
@@ -144,6 +148,7 @@ export const useResultsStore = defineStore("results", {
 
     /**
      * Ratio of tested criteria over total number of criteria.
+     * Transverse criteria are excluded.
      *
      * `0.5` means half of the audit criteria have been tested.
      */
@@ -151,9 +156,15 @@ export const useResultsStore = defineStore("results", {
       if (!this.data) {
         return 0;
       }
+
+      const auditStore = useAuditStore();
+      const transversePageId =
+        auditStore.currentAudit?.transverseElementsPage.id;
+
       const r = Object.values(this.data)
         .flatMap(Object.values)
-        .flatMap(Object.values) as CriteriumResult[];
+        .flatMap(Object.values)
+        .filter((cr) => cr.pageId !== transversePageId) as CriteriumResult[];
 
       const total = r.length;
 
@@ -211,37 +222,6 @@ export const useResultsStore = defineStore("results", {
 
         // Update UI immediately, rollbacks later if update fails.
         this.data[update.pageId][update.topic][update.criterium] = update;
-
-        // Apply `transverse` result update to every pages
-        if (update.transverse) {
-          Object.keys(this.data)
-            .map(Number) // this.data requires a number index
-            .filter((pageId) => pageId !== update.pageId) // Ignore current page
-            .forEach((pageId) => {
-              if (!this.data) {
-                return;
-              }
-
-              const target = this.data[pageId][update.topic][update.criterium];
-
-              target.status = update.status;
-              target.transverse = true;
-
-              if (update.status === CriteriumResultStatus.COMPLIANT) {
-                target.compliantComment = update.compliantComment;
-              }
-
-              if (update.status === CriteriumResultStatus.NOT_COMPLIANT) {
-                target.notCompliantComment = update.notCompliantComment;
-                target.userImpact = update.userImpact;
-                target.quickWin = update.quickWin;
-              }
-
-              if (update.status === CriteriumResultStatus.NOT_APPLICABLE) {
-                target.notApplicableComment = update.notApplicableComment;
-              }
-            });
-        }
       });
 
       // update the edition date of the local audit. It will not be the same
diff --git a/confiture-web-app/src/types/types.ts b/confiture-web-app/src/types/types.ts
index 514b37dc..9da7167c 100644
--- a/confiture-web-app/src/types/types.ts
+++ b/confiture-web-app/src/types/types.ts
@@ -44,6 +44,7 @@ export interface Audit {
   // Audit creation
   auditType: AuditType;
   procedureName: string;
+  transverseElementsPage: AuditPage;
   pages: AuditPage[];
   auditorEmail: string;
   auditorName: string | null;
diff --git a/confiture-web-app/src/utils.ts b/confiture-web-app/src/utils.ts
index 00c4f7e6..31c3bdcb 100644
--- a/confiture-web-app/src/utils.ts
+++ b/confiture-web-app/src/utils.ts
@@ -79,15 +79,20 @@ export function getCriteriaCount(auditType: AuditType): number {
 
 /**
  * Return the audit status based on:
- * - the number of results (criteria count * number of pages)
+ * - the number of results excluding transverse (criteria count * number of pages)
  * - the status of each criteria
  * - the completion of a11y statement
  */
 export function getAuditStatus(report: AuditReport): string {
+  const transversePageId = report.context.samples[0].id;
+
   if (
-    report.results.length !==
-      getCriteriaCount(report.auditType) * report.pageDistributions.length ||
-    report?.results.some((r) => r.status === CriteriumResultStatus.NOT_TESTED)
+    report.results.filter((r) => r.pageId !== transversePageId).length !==
+      getCriteriaCount(report.auditType) *
+        (report.context.samples.length - 1) ||
+    report?.results
+      .filter((r) => r.pageId !== transversePageId)
+      .some((r) => r.status === CriteriumResultStatus.NOT_TESTED)
   ) {
     return AuditStatus.IN_PROGRESS;
   }

From 0bf603a174c82b38d3e51a391ded6bdc68424a4a Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 18 Oct 2024 10:36:37 +0200
Subject: [PATCH 09/11] =?UTF-8?q?Ajout=20de=20liens=20de=20recours=20dans?=
 =?UTF-8?q?=20la=20d=C3=A9claration=20(#812)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add help links to statement page

* add new window span + mail list item
---
 CHANGELOG.md                                  |  6 ++++
 confiture-web-app/src/pages/StatementPage.vue | 30 ++++++++++++++-----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7270087a..45bbc11a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 18/10/2024
+
+### Autres changements ⚙️
+
+- Ajout de liens de recours dans la déclaration d’accessibilité générée ([#812](https://github.com/DISIC/Ara/pull/812))
+
 ## 17/10/2024
 
 ### Nouvelles fonctionnalités 🚀
diff --git a/confiture-web-app/src/pages/StatementPage.vue b/confiture-web-app/src/pages/StatementPage.vue
index 29de0d45..e7b7d32b 100644
--- a/confiture-web-app/src/pages/StatementPage.vue
+++ b/confiture-web-app/src/pages/StatementPage.vue
@@ -363,16 +363,32 @@ const siteUrl = computed(() => {
 
           <p>Plusieurs moyens sont à votre disposition :</p>
           <ul>
-            <li>Écrire un message au Défenseur des droits</li>
             <li>
-              Contacter le délégué du Défenseur des droits dans votre région
+              <a
+                href="https://formulaire.defenseurdesdroits.fr/formulaire_saisine"
+                target="_blank"
+              >
+                Écrire un message au Défenseur des droits
+                <span class="fr-sr-only">nouvelle fenêtre</span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.defenseurdesdroits.fr/carte-des-delegues"
+                target="_blank"
+              >
+                Contacter le délégué du Défenseur des droits dans votre région
+                <span class="fr-sr-only">nouvelle fenêtre</span>
+              </a>
+            </li>
+            <li>
+              Envoyer un courrier par la poste (gratuit, ne pas mettre de
+              timbre)<br />
+              Défenseur des droits<br />
+              Libre réponse 71120<br />
+              75342 Paris CEDEX 07
             </li>
           </ul>
-
-          <p>
-            Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre)
-            Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07
-          </p>
         </div>
       </div>
     </template>

From 8953cd037578ed5adae71e5d8484911840e85b28 Mon Sep 17 00:00:00 2001
From: Yaacov <yaacov@goodimpact.studio>
Date: Mon, 21 Oct 2024 18:36:35 +0300
Subject: [PATCH 10/11] Fix audit duplication issue: omit id (#816)

---
 confiture-rest-api/src/audits/audit.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/confiture-rest-api/src/audits/audit.service.ts b/confiture-rest-api/src/audits/audit.service.ts
index 2a092679..861b73bf 100644
--- a/confiture-rest-api/src/audits/audit.service.ts
+++ b/confiture-rest-api/src/audits/audit.service.ts
@@ -1273,7 +1273,7 @@ export class AuditService {
 
         transverseElementsPage: {
           create: {
-            ...originalAudit.transverseElementsPage,
+            ...omit(originalAudit.transverseElementsPage, ["id"]),
             results: {
               create: originalAudit.transverseElementsPage.results.map((r) => ({
                 ...omit(r, ["id", "pageId"]),

From 12fe8d05bfec1c6ae3f0227c47a64c5c049166f9 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 23 Oct 2024 14:18:15 +0200
Subject: [PATCH 11/11] add documentation file to detail business rules (#814)

---
 DOCUMENTATION.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 DOCUMENTATION.md

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
new file mode 100644
index 00000000..4a65a546
--- /dev/null
+++ b/DOCUMENTATION.md
@@ -0,0 +1,46 @@
+# Documentation
+
+Ce fichier détaille les règles métiers utilisées au sein du projet.
+
+## Calcul du nombre de critères
+
+Le statut final d’un critère est déterminé en calculant le résultat de l’ensemble des statuts sur chaque page et sur les éléments transverses pour ce critère.
+
+### Critères applicables
+
+Un critère est applicable si :
+
+- il est conforme ou non-conforme sur au moins une page ou sur les éléments transverses.
+
+### Critères non-applicables
+
+Un critère est non-applicable si :
+
+- il est non-applicable sur l’ensemble des pages et sur les éléments transverses testés.
+
+### Critères conformes
+
+Un critère est conforme si :
+
+- il est conforme ou non-applicable sur l’ensemble des pages et sur les éléments transverses testés.
+- il est conforme sur au moins une page ou sur les éléments transverses testés.
+
+### Critères non-conformes
+
+Un critère est non-conforme si :
+
+- il est non-conforme sur au moins une page ou sur les éléments transverses.
+
+## Taux de conformité d’un audit
+
+Le taux de conformité d’un audit se fait selon le calcul suivant :
+
+```
+Taux de conformité = (Nombre de critères conformes / Nombre de critères applicables) * 100
+```
+
+Exemple avec 89 critères applicables et 27 critères conformes :
+
+```
+Taux de conformité = (27 / 89) * 100 = 30,34%
+```