diff --git a/front/package-lock.json b/front/package-lock.json
index 625a7c0..b6ffb63 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -8,6 +8,7 @@
       "name": "chris-haga-vue-part",
       "version": "0.0.0",
       "dependencies": {
+        "bootstrap-icons-vue": "^1.8.1",
         "html5-qrcode": "^2.2.1",
         "vue": "^3.2.37",
         "vue-router": "^4.1.3"
@@ -164,6 +165,11 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
+    "node_modules/bootstrap-icons-vue": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons-vue/-/bootstrap-icons-vue-1.8.1.tgz",
+      "integrity": "sha512-uItRULwQz0epETi9x/RBEqfjHmTAmkIIczpH1R6L9T6yyaaijk0826PzTWnWNm15tw66JT/8GNuXjB0HI5PHLw=="
+    },
     "node_modules/csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
@@ -889,6 +895,11 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
+    "bootstrap-icons-vue": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons-vue/-/bootstrap-icons-vue-1.8.1.tgz",
+      "integrity": "sha512-uItRULwQz0epETi9x/RBEqfjHmTAmkIIczpH1R6L9T6yyaaijk0826PzTWnWNm15tw66JT/8GNuXjB0HI5PHLw=="
+    },
     "csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
diff --git a/front/package.json b/front/package.json
index 585b414..af2a8d6 100644
--- a/front/package.json
+++ b/front/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bootstrap-icons-vue": "^1.8.1",
     "html5-qrcode": "^2.2.1",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
diff --git a/front/src/assets/css/style.css b/front/src/assets/css/style.css
index f14f93b..4c4d791 100644
--- a/front/src/assets/css/style.css
+++ b/front/src/assets/css/style.css
@@ -50,6 +50,17 @@ h1 {
   line-height: 1.1;
 }
 
+/* Acces to pages */
+.img-pages{
+  margin-top: 40px;
+  margin-bottom: 10px;
+}
+
+.col1{
+  margin-left: 20px;
+}
+/*     */
+
 button {
   border-radius: 8px;
   padding: 0.6em 1.2em;
@@ -90,316 +101,37 @@ button:focus-visible {
   }
 }
 
-/*  Play Button */
+/*  Play Pause and home Buttons */
 
-.play-bt {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-.fond {
-  background: #f4471f;
+.container-icons-vue {
+  width: 5rem;
+  height: 5rem;
+  background-color: #f4471f;
   border-radius: 50%;
-  box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051),
-    0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06),
-    0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059),
-    0 35px 80px rgba(0, 0, 0, 0.07);
-  cursor: pointer;
-  height: 100px;
-  position: absolute;
-  width: 100px;
-}
-.play-bt:active .fond {
-  background: #e93c15;
-}
-.icon {
-  height: 200px;
-  transform: rotate(-120deg);
-  transition: transform 500ms;
-  width: 200px;
+  margin: 0 6px;
 }
-.side {
-  background: white;
-  height: 200px;
-  position: absolute;
-  width: 200px;
+.t1rem {
+  width: 1rem;
+  height: 1rem;
 }
-.gauche {
-  clip-path: polygon(
-    43.77666% 55.85251%,
-    43.77874% 55.46331%,
-    43.7795% 55.09177%,
-    43.77934% 54.74844%,
-    43.77855% 54.44389%,
-    43.77741% 54.18863%,
-    43.77625% 53.99325%,
-    43.77533% 53.86828%,
-    43.77495% 53.82429%,
-    43.77518% 53.55329%,
-    43.7754% 53.2823%,
-    43.77563% 53.01131%,
-    43.77585% 52.74031%,
-    43.77608% 52.46932%,
-    43.7763% 52.19832%,
-    43.77653% 51.92733%,
-    43.77675% 51.65633%,
-    43.77653% 51.38533%,
-    43.7763% 51.11434%,
-    43.77608% 50.84334%,
-    43.77585% 50.57235%,
-    43.77563% 50.30136%,
-    43.7754% 50.03036%,
-    43.77518% 49.75936%,
-    43.77495% 49.48837%,
-    44.48391% 49.4885%,
-    45.19287% 49.48865%,
-    45.90183% 49.48878%,
-    46.61079% 49.48892%,
-    47.31975% 49.48906%,
-    48.0287% 49.4892%,
-    48.73766% 49.48934%,
-    49.44662% 49.48948%,
-    50.72252% 49.48934%,
-    51.99842% 49.4892%,
-    53.27432% 49.48906%,
-    54.55022% 49.48892%,
-    55.82611% 49.48878%,
-    57.10201% 49.48865%,
-    58.3779% 49.4885%,
-    59.6538% 49.48837%,
-    59.57598% 49.89151%,
-    59.31883% 50.28598%,
-    58.84686% 50.70884%,
-    58.12456% 51.19714%,
-    57.11643% 51.78793%,
-    55.78697% 52.51828%,
-    54.10066% 53.42522%,
-    52.02202% 54.54581%,
-    49.96525% 55.66916%,
-    48.3319% 56.57212%,
-    47.06745% 57.27347%,
-    46.11739% 57.79191%,
-    45.42719% 58.14619%,
-    44.94235% 58.35507%,
-    44.60834% 58.43725%,
-    44.37066% 58.41149%,
-    44.15383% 58.27711%,
-    43.99617% 58.0603%,
-    43.88847% 57.77578%,
-    43.82151% 57.43825%,
-    43.78608% 57.06245%,
-    43.77304% 56.66309%,
-    43.773% 56.25486%
-  );
-  transition: clip-path 500ms;
+.t2-5rem {
+  width: 2.5rem;
+  height: 2.5rem;
 }
-.droite {
-  clip-path: polygon(
-    43.77666% 43.83035%,
-    43.77874% 44.21955%,
-    43.7795% 44.59109%,
-    43.77934% 44.93442%,
-    43.77855% 45.23898%,
-    43.77741% 45.49423%,
-    43.77625% 45.68961%,
-    43.77533% 45.81458%,
-    43.77495% 45.85858%,
-    43.77518% 46.12957%,
-    43.7754% 46.40056%,
-    43.77563% 46.67156%,
-    43.77585% 46.94255%,
-    43.77608% 47.21355%,
-    43.7763% 47.48454%,
-    43.77653% 47.75554%,
-    43.77675% 48.02654%,
-    43.77653% 48.29753%,
-    43.7763% 48.56852%,
-    43.77608% 48.83952%,
-    43.77585% 49.11051%,
-    43.77563% 49.38151%,
-    43.7754% 49.65251%,
-    43.77518% 49.9235%,
-    43.77495% 50.1945%,
-    44.48391% 50.19436%,
-    45.19287% 50.19422%,
-    45.90183% 50.19408%,
-    46.61079% 50.19394%,
-    47.31975% 50.1938%,
-    48.0287% 50.19366%,
-    48.73766% 50.19353%,
-    49.44662% 50.19338%,
-    50.72252% 50.19353%,
-    51.99842% 50.19366%,
-    53.27432% 50.1938%,
-    54.55022% 50.19394%,
-    55.82611% 50.19408%,
-    57.10201% 50.19422%,
-    58.3779% 50.19436%,
-    59.6538% 50.1945%,
-    59.57598% 49.79136%,
-    59.31883% 49.39688%,
-    58.84686% 48.97402%,
-    58.12456% 48.48572%,
-    57.11643% 47.89493%,
-    55.78697% 47.16458%,
-    54.10066% 46.25764%,
-    52.02202% 45.13705%,
-    49.96525% 44.01371%,
-    48.3319% 43.11074%,
-    47.06745% 42.4094%,
-    46.11739% 41.89096%,
-    45.42719% 41.53667%,
-    44.94235% 41.3278%,
-    44.60834% 41.24561%,
-    44.37066% 41.27137%,
-    44.15383% 41.40575%,
-    43.99617% 41.62256%,
-    43.88847% 41.90709%,
-    43.82151% 42.24461%,
-    43.78608% 42.62041%,
-    43.77304% 43.01978%,
-    43.773% 43.428%
-  );
-  transition: clip-path 500ms;
+.t4rem {
+  width: 4rem;
+  height: 4rem;
 }
-.active .icon {
-  transform: rotate(-90deg);
+.icons-vue1 {
+  color: #FFFFFF;
 }
-.active .gauche {
-  clip-path: polygon(
-    56.42249% 57.01763%,
-    54.93283% 57.0175%,
-    53.00511% 57.01738%,
-    50.83554% 57.01727%,
-    48.62036% 57.01718%,
-    46.55585% 57.01709%,
-    44.83822% 57.01702%,
-    43.66373% 57.01698%,
-    43.22863% 57.01696%,
-    42.86372% 57.01904%,
-    42.56988% 57.01621%,
-    42.3402% 56.99486%,
-    42.16778% 56.94152%,
-    42.0457% 56.84267%,
-    41.96705% 56.68478%,
-    41.92493% 56.45432%,
-    41.91246% 56.13777%,
-    41.91258% 55.76282%,
-    41.9129% 55.37058%,
-    41.91335% 54.96757%,
-    41.91387% 54.56032%,
-    41.91439% 54.15537%,
-    41.91485% 53.75926%,
-    41.91517% 53.3785%,
-    41.91529% 53.01965%,
-    41.94275% 52.72355%,
-    42.02117% 52.51653%,
-    42.14465% 52.38328%,
-    42.30727% 52.30854%,
-    42.50308% 52.27699%,
-    42.72619% 52.27341%,
-    42.97065% 52.28248%,
-    43.23056% 52.2889%,
-    43.94949% 52.28896%,
-    45.45083% 52.28912%,
-    47.47445% 52.28932%,
-    49.76027% 52.28957%,
-    52.04818% 52.28981%,
-    54.07805% 52.29003%,
-    55.5898% 52.29019%,
-    56.32332% 52.29024%,
-    56.58221% 52.28816%,
-    56.83726% 52.28948%,
-    57.07897% 52.30593%,
-    57.29794% 52.34898%,
-    57.48468% 52.43029%,
-    57.62978% 52.56146%,
-    57.72375% 52.7541%,
-    57.75718% 53.01981%,
-    57.75713% 53.37763%,
-    57.75699% 53.81831%,
-    57.75679% 54.31106%,
-    57.75657% 54.82507%,
-    57.75635% 55.32958%,
-    57.75615% 55.79377%,
-    57.75601% 56.18684%,
-    57.75596% 56.47801%,
-    57.7549% 56.50122%,
-    57.74034% 56.5624%,
-    57.6955% 56.64887%,
-    57.60334% 56.748%,
-    57.44691% 56.84712%,
-    57.20925% 56.93358%,
-    56.87342% 56.99471%
-  );
+.rotate90 {
+  transform: rotate(90deg);
 }
-.active .droite {
-  clip-path: polygon(
-    56.42249% 42.44625%,
-    54.93283% 42.44637%,
-    53.00511% 42.44649%,
-    50.83554% 42.4466%,
-    48.62036% 42.4467%,
-    46.55585% 42.44679%,
-    44.83822% 42.44685%,
-    43.66373% 42.4469%,
-    43.22863% 42.44691%,
-    42.86372% 42.44483%,
-    42.56988% 42.44767%,
-    42.3402% 42.46902%,
-    42.16778% 42.52235%,
-    42.0457% 42.6212%,
-    41.96705% 42.77909%,
-    41.92493% 43.00956%,
-    41.91246% 43.32611%,
-    41.91258% 43.70105%,
-    41.9129% 44.0933%,
-    41.91335% 44.49631%,
-    41.91387% 44.90355%,
-    41.91439% 45.3085%,
-    41.91485% 45.70462%,
-    41.91517% 46.08537%,
-    41.91529% 46.44422%,
-    41.94275% 46.74032%,
-    42.02117% 46.94735%,
-    42.14465% 47.0806%,
-    42.30727% 47.15534%,
-    42.50308% 47.18688%,
-    42.72619% 47.19047%,
-    42.97065% 47.1814%,
-    43.23056% 47.17497%,
-    43.94949% 47.17491%,
-    45.45083% 47.17476%,
-    47.47445% 47.17455%,
-    49.76027% 47.1743%,
-    52.04818% 47.17406%,
-    54.07805% 47.17384%,
-    55.5898% 47.17369%,
-    56.32332% 47.17363%,
-    56.58221% 47.17571%,
-    56.83726% 47.17439%,
-    57.07897% 47.15795%,
-    57.29794% 47.1149%,
-    57.48468% 47.03359%,
-    57.62978% 46.90242%,
-    57.72375% 46.70977%,
-    57.75718% 46.44406%,
-    57.75713% 46.08625%,
-    57.75699% 45.64557%,
-    57.75679% 45.15282%,
-    57.75657% 44.6388%,
-    57.75635% 44.1343%,
-    57.75615% 43.6701%,
-    57.75601% 43.27703%,
-    57.75596% 42.98586%,
-    57.7549% 42.96265%,
-    57.74034% 42.90148%,
-    57.6955% 42.815%,
-    57.60334% 42.71587%,
-    57.44691% 42.61675%,
-    57.20925% 42.53029%,
-    56.87342% 42.46916%
-  );
+
+.marquee-wrap {
+  /* hauteur calculée */
+	height: calc(100% - 100px);
 }
 
 /*  Fin Play Button*/
@@ -411,7 +143,7 @@ button:focus-visible {
 	margin-left: auto;
   margin-right: auto;
   width: 90%;
-	height:50%;
+	height:80%;
 	text-align: center;
 	border:1px solid #000;
 	padding:10px;
@@ -419,11 +151,26 @@ button:focus-visible {
 	font-size:45px;
 	line-height:1.6;
 }
-/* increase duration to speed up scroll */
-.marquee{
-	animation:scrollUp 30s linear 1s infinite;
+.marquee-wrap-test {
+	overflow:auto;
+	margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+	height:80%;
+	text-align: center;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+	border:1px solid #000;
+	padding:10px;
+	color: white;
+	font-size:45px;
+	line-height:1.6;
 }
 
+
+
 @supports (transform:translate3d(0px,0px,0px)){
 	.marquee-wrap {overflow:hidden; }
 	.marquee{padding-top:160px;}
@@ -438,4 +185,4 @@ button:focus-visible {
 }
 .marquee:hover{animation-play-state:paused}
 
-/*    End   */
+/*    End   */
\ No newline at end of file
diff --git a/front/src/assets/images/chaga.png b/front/src/assets/images/chaga.png
new file mode 100644
index 0000000..e500b6e
Binary files /dev/null and b/front/src/assets/images/chaga.png differ
diff --git a/front/src/assets/images/oiseau_40x40.png b/front/src/assets/images/oiseau_40x40.png
new file mode 100644
index 0000000..f77f8ea
Binary files /dev/null and b/front/src/assets/images/oiseau_40x40.png differ
diff --git a/front/src/assets/images/schema-app-Ch-H.png b/front/src/assets/images/schema-app-Ch-H.png
new file mode 100644
index 0000000..8fc7d48
Binary files /dev/null and b/front/src/assets/images/schema-app-Ch-H.png differ
diff --git a/front/src/assets/musiques/ZOIZO_MALOYA_1.wav b/front/src/assets/musiques/ZOIZO_MALOYA_1.wav
new file mode 100644
index 0000000..c4b6cb1
Binary files /dev/null and b/front/src/assets/musiques/ZOIZO_MALOYA_1.wav differ
diff --git a/front/src/assets/musiques/chant_zoizo.mp3 b/front/src/assets/musiques/chant_zoizo.mp3
new file mode 100644
index 0000000..68a0078
Binary files /dev/null and b/front/src/assets/musiques/chant_zoizo.mp3 differ
diff --git a/front/src/assets/musiques/chant_zoizo.wav b/front/src/assets/musiques/chant_zoizo.wav
new file mode 100644
index 0000000..04c3179
Binary files /dev/null and b/front/src/assets/musiques/chant_zoizo.wav differ
diff --git a/front/src/assets/musiques/la_pluie_violoncelle.mp3 b/front/src/assets/musiques/la_pluie_violoncelle.mp3
new file mode 100644
index 0000000..990b82d
Binary files /dev/null and b/front/src/assets/musiques/la_pluie_violoncelle.mp3 differ
diff --git a/front/src/assets/musiques/la_pluie_violoncelle.wav b/front/src/assets/musiques/la_pluie_violoncelle.wav
new file mode 100644
index 0000000..9b7bedf
Binary files /dev/null and b/front/src/assets/musiques/la_pluie_violoncelle.wav differ
diff --git a/front/src/assets/musiques/musique-test.mp3 b/front/src/assets/musiques/musique-test.mp3
new file mode 100644
index 0000000..f2e74e3
Binary files /dev/null and b/front/src/assets/musiques/musique-test.mp3 differ
diff --git a/front/src/assets/musiques/test-pg1.mp3 b/front/src/assets/musiques/test-pg1.mp3
new file mode 100644
index 0000000..f67d896
Binary files /dev/null and b/front/src/assets/musiques/test-pg1.mp3 differ
diff --git a/front/src/assets/musiques/test-pg2.mp3 b/front/src/assets/musiques/test-pg2.mp3
new file mode 100644
index 0000000..19a49bb
Binary files /dev/null and b/front/src/assets/musiques/test-pg2.mp3 differ
diff --git a/front/src/assets/musiques/test-pg3.mp3 b/front/src/assets/musiques/test-pg3.mp3
new file mode 100644
index 0000000..0b6028f
Binary files /dev/null and b/front/src/assets/musiques/test-pg3.mp3 differ
diff --git a/front/src/assets/musiques/vent_violoncelle.mp3 b/front/src/assets/musiques/vent_violoncelle.mp3
new file mode 100644
index 0000000..3be13fd
Binary files /dev/null and b/front/src/assets/musiques/vent_violoncelle.mp3 differ
diff --git a/front/src/assets/musiques/vent_violoncelle.wav b/front/src/assets/musiques/vent_violoncelle.wav
new file mode 100644
index 0000000..4b6123d
Binary files /dev/null and b/front/src/assets/musiques/vent_violoncelle.wav differ
diff --git a/front/src/views/Accueil.vue b/front/src/views/Accueil.vue
index 3cdc2d9..beb20ab 100644
--- a/front/src/views/Accueil.vue
+++ b/front/src/views/Accueil.vue
@@ -1,31 +1,39 @@
 <template>
-  <div>{{ resultat }}</div>
-
-  <section id="intro" :style="{ backgroundImage: `url(${backgroundImage})` }">
-    <div>
-      <header>
-        <h2 style="color:white;">Jardin App.</h2>
-      </header>
-      <p style="color:white;">
-        Bienvenue à
-        <strong>App name ou Autre!</strong> Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.
-        Fusce blandit ultrices sapien, in accumsan orci rhoncus eu!
-      </p>
-      <br />
-      <br />
-
-      <ScanQrcode :expected="expected" :qrbox="250" :fps="10" style="width: 400px;height: 400px;" @resultat="onScan" />
-      <br/><br/><br/><br/><br/><br/>
-      
-      <footer>
+  <section id="intro" :style="{ backgroundImage: `url(${backgroundImage})` }"><br/>
+
+    <div style="margin-top: 130px;">
+      <ScanQrcode :expected="expected" :qrbox="250" :fps="10" style="width: 400px;height: 400px;" @resultat="onScan"/>
+      <div class="img-pages">
+        <div class="d-flex flex-row justify-content-sm-center align-items-center mt-2">
+          <div class="col1">
+            <img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page1')">
+          </div>
+          <div class="col1">
+            <img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page2')">
+          </div>
+          <div class="col1">
+            <img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page3')">
+          </div>
+          <div class="col1">
+            <img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page4')">
+          </div>
+          <div class="col1">
+            <img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page5')">
+          </div>
+        </div>
+      </div>
+      <footer class="mt-5">
         <a href="#one">
-          <button type="button" class="btn bg-transparent" style='font-size: 25px; border-color:white; color:white;'>&dArr;</button>
+          <button type="button" class="btn bg-transparent" style='font-size: 25px; border-color:white; color:white;'>
+            <BIconArrowDown/>
+          </button>
         </a>
       </footer>
     </div>
   </section>
 
-  <section id="one" class="main style2 right dark fullscreen" :style="{ backgroundImage: `url(${backgroundImageOne})` }">
+  <section id="one" class="main style2 right dark fullscreen"
+           :style="{ backgroundImage: `url(${backgroundImageOne})` }">
 
     <div class="content-style2">
       <div class="slide-right">
@@ -41,10 +49,10 @@
           Lorem ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.
           Fusce blandit ultrices sapien, in accumsan orci rhoncus eu. Sed sodales venenatis arcu,
           id varius justo euismod in. Curabitur egestas consectetur magna.
-          <br />ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.
+          <br/>ipsum dolor sit amet et sapien sed elementum egestas dolore condimentum.
           Fusce blandit ultrices sapien, Sed sodales venenatis arcu,
           id varius justo euismod in. Curabitur egestas consectetur magna.
-          <br />
+          <br/>
         </p>
       </div>
     </div>
@@ -54,44 +62,34 @@
 
 <script setup>
 import ScanQrcode from '@/components/ScanQrcode.vue'
-import { ref } from 'vue'
-
+import {ref} from 'vue'
 // routes
-import { useRouter } from 'vue-router'
-
+import {useRouter} from 'vue-router'
 // medias: images en background
-import backgroundImage from "@/assets/images/first.jpg"
+import backgroundImage from "@/assets/images/chaga.png"
 import backgroundImageOne from "@/assets/images/one.jpg"
-
+import oiseau from "@/assets/images/oiseau_40x40.png"
+// icon
+import {BIconArrowDown} from 'bootstrap-icons-vue'
 const router = useRouter()
-
 const routesQrCode = [
-  { code: "https://m.tibillet.re/q474d", route: "/Page5" },
-  { code: "https://m.tibillet.re/sd4df", route: "/Page4" },
-  { code: "https://m.tibillet.re/q47f7", route: "/Page3" },
-  { code: "https://m.tibillet.re/q47s4", route: "/Page2" },
-  { code: "https://m.tibillet.re/q474s", route: "/Page1" }
+  {code: "chpt", route: "/PageTest"},
+  {code: "chp5", route: "/Page5"},
+  {code: "chp4", route: "/Page4"},
+  {code: "chp3", route: "/Page3"},
+  {code: "chp2", route: "/Page2"},
+  {code: "chp1", route: "/Page1"}
 ]
- // https://raffinerie.tibillet.re/qr/07510c96-6eda-48a9-b31e-149042068112
-
-
+// https://raffinerie.tibillet.re/qr/07510c96-6eda-48a9-b31e-149042068112
 // résultats qrcodes attendu
 let expected = []
 for (let i = 0; i < routesQrCode.length; i++) {
   expected.push(routesQrCode[i].code)
 }
-
-
-let resultat = ref('')
-
-function onScan(decodedText, decodedResult) {
+function onScan(qrCodeMessage) {
   console.log('-> fonc onScan !')
-  console.log('decodedText =', decodedText)
-  console.log('decodedResult =', decodedResult)
-  resultat.value = decodedText
-
-
-  const test = routesQrCode.find(obj => obj.code === decodedText)
+  console.log('qrCodeMessage =', qrCodeMessage)
+  const test = routesQrCode.find(obj => obj.code === qrCodeMessage)
   if (test !== undefined) {
     // Stoper le  lecteur de qrcode
     // Aller à la page
@@ -102,7 +100,6 @@ function onScan(decodedText, decodedResult) {
   }
   console.log('test =', test)
 }
-
 </script>
 
 <style>
@@ -113,9 +110,7 @@ function onScan(decodedText, decodedResult) {
   background-repeat: no-repeat;
   background-size: cover;
 }
-
 /*    2iem page accueil! */
-
 #one {
   background-size: cover;
   width: 100vw;
@@ -124,7 +119,6 @@ function onScan(decodedText, decodedResult) {
   background-attachment: fixed, fixed;
   background-position: top left, center center;
 }
-
 .content-style2 {
   margin: auto;
   width: 60%;
@@ -132,19 +126,16 @@ function onScan(decodedText, decodedResult) {
   padding: 10%;
   overflow: hidden;
   box-shadow: 0 0 25px #000;
-  border: 1px solid #444;  
+  border: 1px solid #444;
   text-align: center;
 }
-
-p{
+p {
   font-size: 20px;
   color: #444;
 }
-
 .slide-right, .slide-left {
   width: 100%;
 }
-
 .slide-right {
   animation: 3s slide-right;
 }
@@ -156,7 +147,6 @@ p{
     margin-left: 0%;
   }
 }
-
 /***** Slide Left *****/
 .slide-left {
   animation: 3s slide-left;
@@ -169,7 +159,6 @@ p{
     margin-left: 0%;
   }
 }
-
 .line {
   border-bottom: 3px solid red;
   width: 200px;
@@ -178,13 +167,12 @@ p{
 .fade-in {
   animation: fadeIn ease 3s;
 }
-@keyframes fadeIn{
+@keyframes fadeIn {
   0% {
-    opacity:0;
+    opacity: 0;
   }
   100% {
-    opacity:1;
+    opacity: 1;
   }
 }
-
-</style>
+</style>
\ No newline at end of file
diff --git a/front/src/views/Page1.vue b/front/src/views/Page1.vue
index ed3bd10..f144e3c 100644
--- a/front/src/views/Page1.vue
+++ b/front/src/views/Page1.vue
@@ -1,54 +1,71 @@
 <template>
-  <section id="pg1" :style="{ backgroundImage: `url(${backgroundImagePg1})` }">
-    <div class="container-wd-pg">
-      <div>
-        <div class="btn-play">
-          <div class="play-bt" onclick="this.classList.toggle('active')">
-            <div class="fond" x="0" y="0" width="200" height="200"></div>
-            <div class="icon" width="200" height="200">
-              <div class="side gauche" x="0" y="0" width="200" height="200" fill="#fff"></div>
-              <div class="side droite" x="0" y="0" width="200" height="200" fill="#fff"></div>
-            </div>
-          </div>
-        </div>
+  <audio autoplay>
+    <source src="@/assets/musiques/chant_zoizo.mp3">
+  </audio>
+  <section id="pg1" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg1})` }">
+    <div class="d-flex flex-row justify-content-center mt-2 mb-2">
+      <div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
+        <BIconPlayFill v-if="buttonAction === 'play'" class="icons-vue1 t4rem rotate90"/>
+        <BIconPauseFill v-if="buttonAction === 'pause'" class="icons-vue1 t4rem"/>
       </div>
-
-      <div class="marquee-wrap">
-        <div class="marquee">
-          <p style="color: white;">
-            <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is bearable only through love great turbulent  e muse about! Cambrian explosion dispassionate extraterrestrial observer.
-            <br/>
-            and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds venture. Flatland paroxysm of global
-            death Jean-François Champollion.
-          </p><br/>
-        </div>
+      <div class="d-flex justify-content-center align-items-center container-icons-vue  ms-1 me-1" role="button" @click="router.push('/')">
+        <BIconHouseFill class="icons-vue1  t2-5rem"/>
       </div>
     </div>
-    <button @click="router.push('/')">Retour</button><br/>
+
+    <div class="marquee-wrap-test">
+      <p style="color: white;text-shadow: 3px 3px 4px black;">
+        <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.
+                  <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.<br/>
+      </p><br/>
+    </div>
+
   </section>
 
 </template>
 
 <script setup>
+import {ref} from 'vue'
 import {useRouter} from 'vue-router'
-
-// medias: images en background
+// bootstrap-icons-vue - prefixed with BIcon. For example, the icon pause-fill is exported as BIconPauseFill
+// icons list : https://icons.getbootstrap.com/
+import {BIconPlayFill, BIconPauseFill, BIconHouseFill} from 'bootstrap-icons-vue'
 import backgroundImagePg1 from "@/assets/images/sunset.jpg"
-
 const router = useRouter()
+let buttonAction = ref('play')
+function toggleAction() {
+  if (buttonAction.value === 'play') {
+    buttonAction.value = 'pause'
+  } else {
+    buttonAction.value = 'play'
+  }
+}
 </script>
 
-<style>
+<style scoped>
+
 #pg1 {
-  width: 100vw;
-  height: 100vh;
-  background-position: absolute;
+  width: 100%;
+  height: 100%;
+  background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.container-wd-pg {
-  padding-top: 5%;
-}
-
 </style>
diff --git a/front/src/views/Page2.vue b/front/src/views/Page2.vue
index 4fc1325..6bff6ec 100644
--- a/front/src/views/Page2.vue
+++ b/front/src/views/Page2.vue
@@ -1,41 +1,61 @@
 <template>
-  <section id="pg2" :style="{ backgroundImage: `url(${backgroundImagePg2})` }">
-    <div class="container-wd-pg">
-      <div>
-        <div class="btn-play">
-          <div class="play-bt" onclick="this.classList.toggle('active')">
-              <div class="fond" x="0" y="0" width="200" height="200"></div>
-            <div class="icon" width="200" height="200">
-              <div class="side gauche" x="0" y="0" width="200" height="200" fill="#fff"></div>
-              <div class="side droite" x="0" y="0" width="200" height="200" fill="#fff"></div>
-            </div>
-          </div>
-        </div>
+  <audio autoplay>
+    <source src="@/assets/musiques/vent_violoncelle.mp3">
+  </audio>
+  <section id="pg2" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg2})` }">
+    <div class="d-flex flex-row justify-content-center mt-2 mb-2">
+      <div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
+        <BIconPlayFill v-if="buttonAction === 'play'" class="icons-vue1 t4rem rotate90"/>
+        <BIconPauseFill v-if="buttonAction === 'pause'" class="icons-vue1 t4rem"/>
       </div>
-
-      <div class="marquee-wrap">
-        <div class="marquee">
-          <p style="color: white;">
-            <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is bearable only through love great turbulent  e muse about! Cambrian explosion dispassionate extraterrestrial observer.
-            <br/>
-            and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds venture. Flatland paroxysm of global
-            death Jean-François Champollion.
-          </p><br/>
-        </div>
+      <div class="d-flex justify-content-center align-items-center container-icons-vue  ms-1 me-1" role="button" @click="router.push('/')">
+        <BIconHouseFill class="icons-vue1  t2-5rem"/>
       </div>
     </div>
-    <button @click="router.push('/')">Retour</button><br/>
+
+    <div class="marquee-wrap-test">
+      <p style="color: white;text-shadow: 3px 3px 4px black;">
+        <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.
+                  <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.<br/>
+      </p><br/>
+    </div>
+
   </section>
 
 </template>
 
 <script setup>
+import {ref} from 'vue'
 import {useRouter} from 'vue-router'
-
+// bootstrap-icons-vue - prefixed with BIcon. For example, the icon pause-fill is exported as BIconPauseFill
+// icons list : https://icons.getbootstrap.com/
+import {BIconPlayFill, BIconPauseFill, BIconHouseFill} from 'bootstrap-icons-vue'
 import backgroundImagePg2 from "@/assets/images/sunset.jpg"
-
-
 const router = useRouter()
+let buttonAction = ref('play')
+function toggleAction() {
+  if (buttonAction.value === 'play') {
+    buttonAction.value = 'pause'
+  } else {
+    buttonAction.value = 'play'
+  }
+}
 </script>
 
 <style scoped>
@@ -48,8 +68,4 @@ const router = useRouter()
   background-size: cover;
 }
 
-.container-wd-pg {
-  padding-top: 5%;
-}
-
 </style>
diff --git a/front/src/views/Page3.vue b/front/src/views/Page3.vue
index 6ad844b..2ddb814 100644
--- a/front/src/views/Page3.vue
+++ b/front/src/views/Page3.vue
@@ -1,40 +1,61 @@
 <template>
-    <section id="pg3" :style="{ backgroundImage: `url(${backgroundImagePg3})` }">
-    <div class="container-wd-pg">
-      <div>
-        <div class="btn-play">
-          <div class="play-bt" onclick="this.classList.toggle('active')">
-              <div class="fond" x="0" y="0" width="200" height="200"></div>
-            <div class="icon" width="200" height="200">
-              <div class="side gauche" x="0" y="0" width="200" height="200" fill="#fff"></div>
-              <div class="side droite" x="0" y="0" width="200" height="200" fill="#fff"></div>
-            </div>
-          </div>
-        </div>
+  <audio autoplay>
+    <source src="@/assets/musiques/la_pluie_violoncelle.mp3">
+  </audio>
+  <section id="pg3" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg3})` }">
+    <div class="d-flex flex-row justify-content-center mt-2 mb-2">
+      <div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
+        <BIconPlayFill v-if="buttonAction === 'play'" class="icons-vue1 t4rem rotate90"/>
+        <BIconPauseFill v-if="buttonAction === 'pause'" class="icons-vue1 t4rem"/>
       </div>
-
-      <div class="marquee-wrap">
-        <div class="marquee">
-          <p style="color: white; text-shadow: 3px 3px 4px red;">
-            <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is bearable only through love great turbulent  e muse about! Cambrian explosion dispassionate extraterrestrial observer.
-            <br/>
-            and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds venture. Flatland paroxysm of global
-            death Jean-François Champollion.
-          </p><br/>
-        </div>
+      <div class="d-flex justify-content-center align-items-center container-icons-vue  ms-1 me-1" role="button" @click="router.push('/')">
+        <BIconHouseFill class="icons-vue1  t2-5rem"/>
       </div>
     </div>
-    <button @click="router.push('/')">Retour</button><br/>
+
+    <div class="marquee-wrap-test">
+      <p style="color: white; text-shadow: 3px 3px 4px black;">
+        <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.
+                  <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.<br/>
+      </p><br/>
+    </div>
+
   </section>
 
 </template>
 
 <script setup>
+import {ref} from 'vue'
 import {useRouter} from 'vue-router'
-
+// bootstrap-icons-vue - prefixed with BIcon. For example, the icon pause-fill is exported as BIconPauseFill
+// icons list : https://icons.getbootstrap.com/
+import {BIconPlayFill, BIconPauseFill, BIconHouseFill} from 'bootstrap-icons-vue'
 import backgroundImagePg3 from "@/assets/images/rain.jpg"
-
 const router = useRouter()
+let buttonAction = ref('play')
+function toggleAction() {
+  if (buttonAction.value === 'play') {
+    buttonAction.value = 'pause'
+  } else {
+    buttonAction.value = 'play'
+  }
+}
 </script>
 
 <style scoped>
@@ -47,8 +68,4 @@ const router = useRouter()
   background-size: cover;
 }
 
-.container-wd-pg {
-  padding-top: 5%;
-}
-
 </style>
diff --git a/front/src/views/Page4.vue b/front/src/views/Page4.vue
index b2beeec..a97a1d0 100644
--- a/front/src/views/Page4.vue
+++ b/front/src/views/Page4.vue
@@ -1,39 +1,61 @@
 <template>
-  <section id="pg4" :style="{ backgroundImage: `url(${backgroundImagePg4})` }">
-    <div class="container-wd-pg">
-      <div>
-        <div class="btn-play">
-          <div class="play-bt" onclick="this.classList.toggle('active')">
-              <div class="fond" x="0" y="0" width="200" height="200"></div>
-            <div class="icon" width="200" height="200">
-              <div class="side gauche" x="0" y="0" width="200" height="200" fill="#fff"></div>
-              <div class="side droite" x="0" y="0" width="200" height="200" fill="#fff"></div>
-            </div>
-          </div>
-        </div>
+  <audio autoplay>
+    <source src="@/assets/musiques/test-pg1.mp3">
+  </audio>
+  <section id="pg4" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg4})` }">
+    <div class="d-flex flex-row justify-content-center mt-2 mb-2">
+      <div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
+        <BIconPlayFill v-if="buttonAction === 'play'" class="icons-vue1 t4rem rotate90"/>
+        <BIconPauseFill v-if="buttonAction === 'pause'" class="icons-vue1 t4rem"/>
       </div>
-
-      <div class="marquee-wrap">
-        <div class="marquee">
-          <p style="color: white;">
-            <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is bearable only through love great turbulent  e muse about! Cambrian explosion dispassionate extraterrestrial observer.
-            <br/>
-            and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds venture. Flatland paroxysm of global
-            death Jean-François Champollion.
-          </p><br/>
-        </div>
+      <div class="d-flex justify-content-center align-items-center container-icons-vue  ms-1 me-1" role="button" @click="router.push('/')">
+        <BIconHouseFill class="icons-vue1  t2-5rem"/>
       </div>
     </div>
-    <button @click="router.push('/')">Retour</button><br/>
+
+    <div class="marquee-wrap-test">
+      <p style="color: white;text-shadow: 3px 3px 4px black;">
+        <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.
+                  <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.<br/>
+      </p><br/>
+    </div>
+
   </section>
+
 </template>
 
 <script setup>
+import {ref} from 'vue'
 import {useRouter} from 'vue-router'
-
+// bootstrap-icons-vue - prefixed with BIcon. For example, the icon pause-fill is exported as BIconPauseFill
+// icons list : https://icons.getbootstrap.com/
+import {BIconPlayFill, BIconPauseFill, BIconHouseFill} from 'bootstrap-icons-vue'
 import backgroundImagePg4 from "@/assets/images/marble.jpg"
-
 const router = useRouter()
+let buttonAction = ref('play')
+function toggleAction() {
+  if (buttonAction.value === 'play') {
+    buttonAction.value = 'pause'
+  } else {
+    buttonAction.value = 'play'
+  }
+}
 </script>
 
 <style scoped>
@@ -46,8 +68,4 @@ const router = useRouter()
   background-size: cover;
 }
 
-.container-wd-pg {
-  padding-top: 5%;
-}
-
 </style>
diff --git a/front/src/views/Page5.vue b/front/src/views/Page5.vue
index 4712818..e326432 100644
--- a/front/src/views/Page5.vue
+++ b/front/src/views/Page5.vue
@@ -1,40 +1,61 @@
 <template>
-  <section id="pg5" :style="{ backgroundImage: `url(${backgroundImagePg5})` }">
-    <div class="container-wd-pg">
-      <div>
-        <div class="btn-play">
-          <div class="play-bt" onclick="this.classList.toggle('active')">
-              <div class="fond" x="0" y="0" width="200" height="200"></div>
-            <div class="icon" width="200" height="200">
-              <div class="side gauche" x="0" y="0" width="200" height="200" fill="#fff"></div>
-              <div class="side droite" x="0" y="0" width="200" height="200" fill="#fff"></div>
-            </div>
-          </div>
-        </div>
+  <audio autoplay>
+    <source src="@/assets/musiques/musique-test.mp3">
+  </audio>
+  <section id="pg5" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg5})` }">
+    <div class="d-flex flex-row justify-content-center mt-2 mb-2">
+      <div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
+        <BIconPlayFill v-if="buttonAction === 'play'" class="icons-vue1 t4rem rotate90"/>
+        <BIconPauseFill v-if="buttonAction === 'pause'" class="icons-vue1 t4rem"/>
       </div>
-
-      <div class="marquee-wrap">
-        <div class="marquee">
-          <p style="color: white;text-shadow: 3px 3px 4px black;">
-            <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is bearable only through love great turbulent  e muse about! Cambrian explosion dispassionate extraterrestrial observer.
-            <br/>
-            and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds venture. Flatland paroxysm of global
-            death Jean-François Champollion.
-          </p><br/>
-        </div>
+      <div class="d-flex justify-content-center align-items-center container-icons-vue  ms-1 me-1" role="button" @click="router.push('/')">
+        <BIconHouseFill class="icons-vue1  t2-5rem"/>
       </div>
     </div>
-    <button @click="router.push('/')">Retour</button><br/>
+
+    <div class="marquee-wrap-test">
+      <p style="color: white; text-shadow: 3px 3px 4px red;">
+        <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.
+                  <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+        billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+        bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+        observer.
+        <br/>
+        and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+        Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+        venture. Flatland paroxysm of global
+        death Jean-François Champollion.<br/>
+      </p><br/>
+    </div>
+
   </section>
 
 </template>
 
 <script setup>
+import {ref} from 'vue'
 import {useRouter} from 'vue-router'
-
+// bootstrap-icons-vue - prefixed with BIcon. For example, the icon pause-fill is exported as BIconPauseFill
+// icons list : https://icons.getbootstrap.com/
+import {BIconPlayFill, BIconPauseFill, BIconHouseFill} from 'bootstrap-icons-vue'
 import backgroundImagePg5 from "@/assets/images/tropical.jpg"
-
 const router = useRouter()
+let buttonAction = ref('play')
+function toggleAction() {
+  if (buttonAction.value === 'play') {
+    buttonAction.value = 'pause'
+  } else {
+    buttonAction.value = 'play'
+  }
+}
 </script>
 
 <style scoped>
@@ -47,8 +68,4 @@ const router = useRouter()
   background-size: cover;
 }
 
-.container-wd-pg {
-  padding-top: 5%;
-}
-
 </style>
diff --git a/front/src/views/test_pg.vue b/front/src/views/test_pg.vue
new file mode 100644
index 0000000..ddea937
--- /dev/null
+++ b/front/src/views/test_pg.vue
@@ -0,0 +1,86 @@
+<template>
+  <audio id="play-audio" autoplay>
+    <source src="@/assets/musiques/test-pg1.mp3">
+  </audio>
+  <section id="pg1" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg1})` }">
+    <div class="d-flex flex-row justify-content-center mt-2 mb-2">
+      <div class="d-flex justify-content-center align-items-center container-icons-vue  ms-1 me-1" role="button"
+           @click="replayAudio()">
+        <BIconSkipBackwardFill class="icons-vue1  t2-5rem"/>
+      </div>
+      <div class="container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
+        <!-- <BIconFonts v-if="buttonAction === 'scrollTextProgress'" class="icons-vue1 t4rem rotate90"/> -->
+        <div v-if="buttonAction === 'scrollTextProgress'" class="position-relative">
+          <BIconFonts class="position-absolute icons-vue1"
+                      style="width: 3rem; height: 3rem; left: 0.5rem; top: 0.5rem;"/>
+          <BIconPauseFill class="position-absolute icons-vue1"
+                          style="width: 2rem; height: 2rem; right: 0.5rem; top: 2rem;"/>
+        </div>
+        <div v-if="buttonAction === 'scrollTextPause'" class="position-relative">
+          <BIconFonts class="position-absolute icons-vue1"
+                      style="width: 3rem; height: 3rem; left: 0.5rem; top: 0.5rem;"/>
+          <BIconPlayFill class="position-absolute icons-vue1"
+                         style="width: 2rem; height: 2rem; right: 0.5rem; top: 2rem;"/>
+        </div>
+      </div>
+      <div class="d-flex justify-content-center align-items-center container-icons-vue  ms-1 me-1" role="button"
+           @click="router.push('/')">
+        <BIconHouseFill class="icons-vue1  t2-5rem"/>
+      </div>
+    </div>
+
+    <div class="marquee-wrap">
+      <div class="marquee">
+        <h1>Page test</h1>
+        <p style="color: white;text-shadow: 3px 3px 4px black;">
+          <b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
+          billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
+          bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
+          observer.
+          <br/>
+          and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
+          Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
+          venture. Flatland paroxysm of global
+          death Jean-François Champollion.
+        </p><br/>
+      </div>
+    </div>
+
+  </section>
+
+</template>
+
+<script setup>
+import {ref} from 'vue'
+import {useRouter} from 'vue-router'
+// bootstrap-icons-vue - prefixed with BIcon. For example, the icon pause-fill is exported as BIconPauseFill
+// icons list : https://icons.getbootstrap.com/
+import {BIconFonts, BIconPlayFill, BIconSkipBackwardFill, BIconPauseFill, BIconHouseFill} from 'bootstrap-icons-vue'
+import backgroundImagePg1 from "@/assets/images/sunset.jpg"
+const router = useRouter()
+let buttonAction = ref('scrollTextProgress')
+function toggleAction() {
+  if (buttonAction.value === 'scrollTextProgress') {
+    buttonAction.value = 'scrollTextPause'
+    document.querySelector('.marquee').style.animationPlayState = 'paused'
+  } else {
+    buttonAction.value = 'scrollTextProgress'
+    document.querySelector('.marquee').style.animationPlayState = 'running'
+  }
+}
+function replayAudio() {
+  const audioElement = document.querySelector('#play-audio')
+  audioElement.currentTime = 0
+  audioElement.play()
+}
+</script>
+
+<style scoped>
+#pg1 {
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>
\ No newline at end of file
diff --git a/platforms/browser/www/index.html b/platforms/browser/www/index.html
index 47ad73c..7c2b869 100644
--- a/platforms/browser/www/index.html
+++ b/platforms/browser/www/index.html
@@ -35,8 +35,8 @@
         <meta name="color-scheme" content="light dark">
         <link rel="icon" href="favicon.ico">
         <title>Cordova + vue</title>
-      <script type="module" crossorigin src="/assets/index.d9bdc915.js"></script>
-      <link rel="stylesheet" href="/assets/index.a53f070b.css">
+      <script type="module" crossorigin src="/assets/index.5c23272d.js"></script>
+      <link rel="stylesheet" href="/assets/index.baec488c.css">
     </head>
     <body>
         <div id="app" class="container-fluid"></div>
diff --git a/www/index.html b/www/index.html
index 47ad73c..7c2b869 100644
--- a/www/index.html
+++ b/www/index.html
@@ -35,8 +35,8 @@
         <meta name="color-scheme" content="light dark">
         <link rel="icon" href="favicon.ico">
         <title>Cordova + vue</title>
-      <script type="module" crossorigin src="/assets/index.d9bdc915.js"></script>
-      <link rel="stylesheet" href="/assets/index.a53f070b.css">
+      <script type="module" crossorigin src="/assets/index.5c23272d.js"></script>
+      <link rel="stylesheet" href="/assets/index.baec488c.css">
     </head>
     <body>
         <div id="app" class="container-fluid"></div>