diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/alcoolique.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/alcoolique.mp3
new file mode 100644
index 000000000..73a34d415
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/alcoolique.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/bananier.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/bananier.mp3
new file mode 100644
index 000000000..16e7b1323
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/bananier.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/bras.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/bras.mp3
new file mode 100644
index 000000000..9c7ddee41
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/bras.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/catalogue.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/catalogue.mp3
new file mode 100644
index 000000000..c87e827ab
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/catalogue.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/cyclistes.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/cyclistes.mp3
new file mode 100644
index 000000000..a2432e4de
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/cyclistes.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/hate.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/hate.mp3
new file mode 100644
index 000000000..b7fe3de1c
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/hate.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/intervention.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/intervention.mp3
new file mode 100644
index 000000000..e48620fa9
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/intervention.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/marchandises.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/marchandises.mp3
new file mode 100644
index 000000000..c83bd4a55
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/marchandises.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/parfum.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/parfum.mp3
new file mode 100644
index 000000000..54888dd04
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/parfum.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/remboursement.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/remboursement.mp3
new file mode 100644
index 000000000..190a63d0c
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/remboursement.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/roses.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/roses.mp3
new file mode 100644
index 000000000..45c0d1176
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/roses.mp3 differ
diff --git a/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/sentaient.mp3 b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/sentaient.mp3
new file mode 100644
index 000000000..76b7c9863
Binary files /dev/null and b/src/situations/cafe_de_la_place/assets/audio_reponses/HPfb/sentaient.mp3 differ
diff --git a/src/situations/cafe_de_la_place/data/parcours_haut.js b/src/situations/cafe_de_la_place/data/parcours_haut.js
index 2bd8d15a7..d1a1d0209 100644
--- a/src/situations/cafe_de_la_place/data/parcours_haut.js
+++ b/src/situations/cafe_de_la_place/data/parcours_haut.js
@@ -346,6 +346,7 @@ const HPfb2 = {
   nom_technique: 'hpfb_2',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -359,6 +360,7 @@ const HPfb3 = {
   nom_technique: 'hpfb_3',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -372,6 +374,7 @@ const HPfb4 = {
   nom_technique: 'hpfb_4',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -385,6 +388,7 @@ const HPfb5 = {
   nom_technique: 'hpfb_5',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -398,6 +402,7 @@ const HPfb6 = {
   nom_technique: 'hpfb_6',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -411,6 +416,7 @@ const HPfb7 = {
   nom_technique: 'hpfb_7',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -424,6 +430,7 @@ const HPfb8 = {
   nom_technique: 'hpfb_8',
   type: 'champ-saisie',
   sous_type: 'texte',
+  scrollEffectue: false,
   extensionVue: 'email_HPfb_a_trous',
   illustration: telephoneEMail,
   reponse: {
@@ -432,6 +439,174 @@ const HPfb8 = {
   }
 };
 
+const HPfb9 = {
+  id: 'HPfb9',
+  nom_technique: 'hpfb_9',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'roses',
+    textes: ['roses']
+  }
+};
+
+const HPfb10 = {
+  id: 'HPfb10',
+  nom_technique: 'hpfb_10',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'sentaient',
+    textes: ['sentaient']
+  }
+};
+
+const HPfb11 = {
+  id: 'HPfb11',
+  nom_technique: 'hpfb_11',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'parfum',
+    textes: ['parfum']
+  }
+};
+
+const HPfb12 = {
+  id: 'HPfb12',
+  nom_technique: 'hpfb_12',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'catalogue',
+    textes: ['catalogue']
+  }
+};
+
+const HPfb13 = {
+  id: 'HPfb13',
+  nom_technique: 'hpfb_13',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'bras',
+    textes: ['bras']
+  }
+};
+
+const HPfb14 = {
+  id: 'HPfb14',
+  nom_technique: 'hpfb_14',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'cyclistes',
+    textes: ['cyclistes']
+  }
+};
+
+const HPfb15 = {
+  id: 'HPfb15',
+  nom_technique: 'hpfb_15',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'bananier',
+    textes: ['bananier']
+  }
+};
+
+const HPfb16 = {
+  id: 'HPfb16',
+  nom_technique: 'hpfb_16',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'alcoolique',
+    textes: ['alcoolique']
+  }
+};
+
+const HPfb17 = {
+  id: 'HPfb17',
+  nom_technique: 'hpfb_17',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'intervention',
+    textes: ['intervention']
+  }
+};
+
+const HPfb18 = {
+  id: 'HPfb18',
+  nom_technique: 'hpfb_18',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'remboursement',
+    textes: ['remboursement']
+  }
+};
+
+const HPfb19 = {
+  id: 'HPfb19',
+  nom_technique: 'hpfb_19',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'marchandises',
+    textes: ['marchandises']
+  }
+};
+
+const HPfb20 = {
+  id: 'HPfb20',
+  nom_technique: 'hpfb_20',
+  type: 'champ-saisie',
+  sous_type: 'texte',
+  scrollEffectue: true,
+  extensionVue: 'email_HPfb_a_trous',
+  illustration: telephoneEMail,
+  reponse: {
+    nom_technique: 'hate',
+    textes: ['hâte']
+  }
+};
+
 const parcoursHaut1 = {
   series: [
     { cartes: [ sousConsigneHPar1 ] },
@@ -464,7 +639,7 @@ const parcoursHaut2 = {
     {
       cartes: [ sousConsigneHPfb1, sousConsigneHPfb2 ]
     },
-    { cartes: [ HPfb1, HPfb2, HPfb3, HPfb4, HPfb5, HPfb6, HPfb7, HPfb8 ] }
+    { cartes: [ HPfb1, HPfb2, HPfb3, HPfb4, HPfb5, HPfb6, HPfb7, HPfb8, HPfb9, HPfb10, HPfb11, HPfb12, HPfb13, HPfb14, HPfb15, HPfb16, HPfb17, HPfb18, HPfb19, HPfb20 ] }
   ]
 };
 
diff --git a/src/situations/cafe_de_la_place/styles/email_HPfb_a_trous.scss b/src/situations/cafe_de_la_place/styles/email_HPfb_a_trous.scss
index b9976856b..c35b7edab 100644
--- a/src/situations/cafe_de_la_place/styles/email_HPfb_a_trous.scss
+++ b/src/situations/cafe_de_la_place/styles/email_HPfb_a_trous.scss
@@ -1,11 +1,6 @@
 @import 'commun/styles/variables.scss';
 
 .email-fleurs-bibelots {
-  padding: 1.5rem;
-  position: absolute;
-  width: 23.75rem;
-  left: 8.5rem;
-  top: 0.5rem;
   font-family: $font-sarabun;
 
   hr {
@@ -13,13 +8,8 @@
   }
 
   p {
-    margin: 0.875rem 0;
-  }
-
-  &__ascenseur {
-    position: absolute;
-    right: 0.5rem;
-    top: 1.75rem;
+    margin: 0;
+    margin-bottom: 0.875rem;
   }
 
   &__destinataire {
@@ -32,7 +22,22 @@
   }
 
   &__message {
-    padding-top: 0.625rem;
+    padding-top: 1.5rem;
   }
 }
 
+.zone-scroll {
+  position: absolute;
+  display: flex;
+  justify-content: end;
+  padding: 1.5rem;
+  width: 23.75rem;
+  top: 0.5rem;
+  left: 8.5rem;
+
+  &__ascenseur {
+    position: absolute;
+    right: 0.5rem;
+    top: 1.75rem;
+  }
+}
diff --git a/src/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.vue b/src/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.vue
index 55b18ad21..007fe5d2c 100644
--- a/src/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.vue
+++ b/src/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.vue
@@ -1,34 +1,47 @@
 <template>
-  <div class="email-fleurs-bibelots">
-    <svg class="email-fleurs-bibelots__ascenseur" width="8" height="100" viewBox="0 0 8 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <div class="zone-scroll">
+    <div class="email-fleurs-bibelots">
+      <component :is="messageEmail"/>
+    </div>
+    <svg
+      class="zone-scroll__ascenseur"
+      :style="{ 'margin-top': topPositionScrollBar }"
+      width="8"
+      height="100"
+      viewBox="0 0 8 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <rect width="8" height="100" rx="4" fill="#D6DAEC"/>
     </svg>
-    <div class="email-fleurs-bibelots__destinataire">
-      Destinataire&nbsp;:
-      <div class="nom">
-        Charles Perrac <u>&lt;charles.perrac@fleursetbibelots.fr&gt;</u>
-      </div>
-    </div>
-    <hr>
-    <strong>Objet&nbsp;: Détail des articles non conformes</strong>
-    <hr>
-    <div class="email-fleurs-bibelots__message">
-      <p>Bonjour mon ami&nbsp;!</p>
-      <p>J'espère que tu vas bien.</p>
-      <p>Comme convenu, je vais te décrire<br>les problèmes que j'ai eus hier, le 10 <trou-a-completer idQuestion="HPfb1"/>,<br>quand je t'ai remplacé à la boutique.</p>
-      <p>Une commande est arrivée et elle ne correspondait pas à ta <trou-a-completer idQuestion="HPfb2"/>.</p>
-      <p>Le <trou-a-completer idQuestion="HPfb3"/> d'<trou-a-completer idQuestion="HPfb4"/> était en <trou-a-completer idQuestion="HPfb5"/> avec la commande. Mais certains étaient dans un mauvais <trou-a-completer idQuestion="HPfb6"/> ou ne <trou-a-completer idQuestion="HPfb7"/> pas à ce qu'on attendait.</p>
-      <p>Les dahlias, couleur bleu azuré, étaient en fait de couleur <trou-a-completer idQuestion="HPfb8"/>.</p>
-      <p>Les <trou-a-completer idQuestion="HPfb9"/> de Chine ne <trou-a-completer idQuestion="HPfb10"/> aucun <trou-a-completer idQuestion="HPfb11"/> contrairement à ce qui était annoncé dans le <trou-a-completer idQuestion="HPfb12"/>.</p>
-    </div>
   </div>
 </template>
 
 <script>
 import 'cafe_de_la_place/styles/email_HPfb_a_trous.scss';
 import TrouACompleter from 'cafe_de_la_place/vues/components/trou_a_completer.vue';
+import emailPartie1 from 'cafe_de_la_place/vues/components/email_partie_1.vue';
+import emailPartie2 from 'cafe_de_la_place/vues/components/email_partie_2.vue';
 
 export default {
-  components: { TrouACompleter },
+  components: { TrouACompleter, emailPartie1, emailPartie2 },
+
+  props: {
+    question: {
+      type: Object,
+      required: true
+    },
+  },
+
+  computed: {
+    topPositionScrollBar() {
+      return this.question.scrollEffectue ? '25.625rem' : '0rem';
+    },
+
+    messageEmail () {
+      if (this.question.scrollEffectue) return emailPartie2;
+      return emailPartie1;
+    },
+  }
 };
 </script>
diff --git a/src/situations/cafe_de_la_place/vues/components/email_partie_1.vue b/src/situations/cafe_de_la_place/vues/components/email_partie_1.vue
new file mode 100644
index 000000000..9822b6bbe
--- /dev/null
+++ b/src/situations/cafe_de_la_place/vues/components/email_partie_1.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="email-fleurs-bibelots__destinataire">
+      Destinataire&nbsp;:
+      <div class="nom">
+        Charles Perrac <u>&lt;charles.perrac@fleursetbibelots.fr&gt;</u>
+      </div>
+    </div>
+    <hr>
+    <strong>Objet&nbsp;: Détail des articles non conformes</strong>
+    <hr>
+    <div class="email-fleurs-bibelots__message">
+      <p>Bonjour mon ami&nbsp;!</p>
+      <p>J'espère que tu vas bien.</p>
+      <p>Comme convenu, je vais te décrire<br>les problèmes que j'ai eus hier, le 10 <trou-a-completer idQuestion="HPfb1"/>,<br>quand je t'ai remplacé à la boutique.</p>
+      <p>Une commande est arrivée et elle ne correspondait pas à ta <trou-a-completer idQuestion="HPfb2"/>.</p>
+      <p>Le <trou-a-completer idQuestion="HPfb3"/> d'<trou-a-completer idQuestion="HPfb4"/> était en <trou-a-completer idQuestion="HPfb5"/> avec la commande. Mais certains étaient dans un mauvais <trou-a-completer idQuestion="HPfb6"/> ou ne <trou-a-completer idQuestion="HPfb7"/> pas à ce qu'on attendait.</p>
+      <p>Les dahlias, couleur bleu azuré, étaient en fait de couleur <trou-a-completer idQuestion="HPfb8"/>.</p>
+      <p>Les <trou-a-completer/> de Chine ne <trou-a-completer/> aucun <trou-a-completer/> contrairement à ce qui était annoncé dans le <trou-a-completer/>.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import TrouACompleter from 'cafe_de_la_place/vues/components/trou_a_completer.vue';
+
+export default {
+  components: { TrouACompleter }
+};
+</script>
diff --git a/src/situations/cafe_de_la_place/vues/components/email_partie_2.vue b/src/situations/cafe_de_la_place/vues/components/email_partie_2.vue
new file mode 100644
index 000000000..d56a02650
--- /dev/null
+++ b/src/situations/cafe_de_la_place/vues/components/email_partie_2.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <p>Les <trou-a-completer idQuestion="HPfb9"/> de Chine ne <trou-a-completer idQuestion="HPfb10"/> aucun <trou-a-completer idQuestion="HPfb11"/> contrairement à ce qui était annoncé dans le <trou-a-completer idQuestion="HPfb12"/>.</p>
+    <p>En plus, il manquait un <trou-a-completer idQuestion="HPfb13"/> à toutes les figurines des <trou-a-completer idQuestion="HPfb14"/> faites en feuilles de <trou-a-completer idQuestion="HPfb15"/>.</p>
+    <p>Enfin, cinq bouteilles de solution <trou-a-completer idQuestion="HPfb16"/> pour nettoyer les barbecues fuyaient par le bouchon.</p>
+    <p>Si tu en parles à ton fournisseur, je suis sûr qu'il y aura une <trou-a-completer idQuestion="HPfb17"/>, et sans doute un <trou-a-completer idQuestion="HPfb18"/> de tes <trou-a-completer idQuestion="HPfb19"/>.</p>
+    <p>La commande a probablement été préparée à la <trou-a-completer idQuestion="HPfb20"/>.</p>
+    <p>Bon courage et à très vite !</p>
+  </div>
+</template>
+
+<script>
+import TrouACompleter from 'cafe_de_la_place/vues/components/trou_a_completer.vue';
+
+export default {
+  components: { TrouACompleter }
+};
+</script>
diff --git a/src/situations/cafe_de_la_place/vues/components/trou_a_completer.vue b/src/situations/cafe_de_la_place/vues/components/trou_a_completer.vue
index ee824575a..1af907ec7 100644
--- a/src/situations/cafe_de_la_place/vues/components/trou_a_completer.vue
+++ b/src/situations/cafe_de_la_place/vues/components/trou_a_completer.vue
@@ -10,7 +10,7 @@ export default {
   props: {
     idQuestion: {
       type: String,
-      required: true
+      required: false
     }
   },
 
diff --git a/tests/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.test.js b/tests/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.test.js
new file mode 100644
index 000000000..d1722e2eb
--- /dev/null
+++ b/tests/situations/cafe_de_la_place/vues/components/email_HPfb_a_trous.test.js
@@ -0,0 +1,46 @@
+import emailHPfb from 'cafe_de_la_place/vues/components/email_HPfb_a_trous.vue';
+import emailPartie1 from 'cafe_de_la_place/vues/components/email_partie_1.vue';
+import emailPartie2 from 'cafe_de_la_place/vues/components/email_partie_2.vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+describe('Le composant Email HPfb à trous', function () {
+  let wrapper;
+  let localVue;
+
+  beforeEach(function () {
+    localVue = createLocalVue();
+  });
+
+  function composant(question) {
+    return shallowMount(emailHPfb, {
+      localVue,
+      propsData: { question: question }
+    });
+  }
+
+  describe("pour une question qui concerne la première partie de l'email", function () {
+    beforeEach(function () {
+      const question = { id: 'hpfb1', scrollEffectue: false };
+      wrapper = composant(question);
+    });
+
+    it("affiche l'email pas encore scrollé", function () {
+      expect(wrapper.findComponent(emailPartie1).exists()).toBe(true);
+      expect(wrapper.vm.topPositionScrollBar).toEqual('0rem');
+      expect(wrapper.find('.zone-scroll__ascenseur').element.style.marginTop).toEqual('0rem');
+    });
+  });
+
+  describe("pour une question qui concerne la deuxième partie de l'email", function () {
+    beforeEach(function () {
+      const question = { id: 'hpfb2', scrollEffectue: true };
+      wrapper = composant(question);
+    });
+
+    it("affiche l'email scrollé", function () {
+      expect(wrapper.findComponent(emailPartie2).exists()).toBe(true);
+      expect(wrapper.vm.topPositionScrollBar).toEqual('25.625rem');
+      expect(wrapper.find('.zone-scroll__ascenseur').element.style.marginTop).toEqual('25.625rem');
+    });
+  });
+});