From f5ed2a7d9cc130904ef7f5ea12aa7c49aac9dc63 Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Mon, 30 Mar 2026 04:14:53 +0200
Subject: [PATCH] edit: ajout icon & bug fix infobulle timer

---
 .../src/assets/icons/contact.svg              |  5 ++--
 v1-com-officielle/src/assets/icons/day.svg    | 12 ++++++++
 v1-com-officielle/src/assets/icons/folder.svg |  4 +--
 v1-com-officielle/src/assets/icons/img.svg    |  5 ++++
 v1-com-officielle/src/assets/icons/insta.svg  |  6 ++++
 v1-com-officielle/src/assets/icons/like.svg   |  4 +++
 v1-com-officielle/src/assets/icons/link.svg   |  6 ++--
 v1-com-officielle/src/assets/icons/msg.svg    |  4 +++
 v1-com-officielle/src/assets/icons/next.svg   |  4 +--
 v1-com-officielle/src/assets/icons/night.svg  |  5 ++++
 v1-com-officielle/src/assets/icons/pause.svg  |  5 ++++
 v1-com-officielle/src/assets/icons/people.svg | 11 ++++++++
 v1-com-officielle/src/assets/icons/play.svg   |  4 +--
 v1-com-officielle/src/assets/icons/prev.svg   |  4 +--
 v1-com-officielle/src/assets/icons/text.svg   |  5 ++++
 v1-com-officielle/src/assets/style.css        |  8 +++---
 .../src/indieComponents/ArtistPannel.vue      | 28 ++++++++++---------
 .../src/indieComponents/Infobulle.vue         | 12 ++++++--
 .../src/indieComponents/MessagePannel.vue     |  3 +-
 .../src/indieComponents/VisualizerPannel.vue  |  3 +-
 .../src/infoComponents/InboxContent.vue       | 17 +++++++----
 .../src/infoComponents/InfoMenu.vue           | 12 ++++----
 .../src/titleComponents/ColorBtn.vue          |  9 ++++--
 .../src/titleComponents/MusicPlayer.vue       | 16 ++++++++---
 .../src/titleComponents/TitleText.vue         |  2 +-
 25 files changed, 141 insertions(+), 53 deletions(-)
 create mode 100644 v1-com-officielle/src/assets/icons/day.svg
 create mode 100644 v1-com-officielle/src/assets/icons/img.svg
 create mode 100644 v1-com-officielle/src/assets/icons/insta.svg
 create mode 100644 v1-com-officielle/src/assets/icons/like.svg
 create mode 100644 v1-com-officielle/src/assets/icons/msg.svg
 create mode 100644 v1-com-officielle/src/assets/icons/night.svg
 create mode 100644 v1-com-officielle/src/assets/icons/pause.svg
 create mode 100644 v1-com-officielle/src/assets/icons/people.svg
 create mode 100644 v1-com-officielle/src/assets/icons/text.svg

diff --git a/v1-com-officielle/src/assets/icons/contact.svg b/v1-com-officielle/src/assets/icons/contact.svg
index 296b560..39235f2 100644
--- a/v1-com-officielle/src/assets/icons/contact.svg
+++ b/v1-com-officielle/src/assets/icons/contact.svg
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.29 109.29">
-  <path d="M26.84,102.1c-8.31-4.79-14.87-11.36-19.66-19.72C2.4,74.02,0,64.76,0,54.58s2.4-19.42,7.19-27.74c4.79-8.31,11.34-14.86,19.66-19.66C35.16,2.4,44.44,0,54.71,0s19.42,2.4,27.73,7.19c8.31,4.79,14.86,11.34,19.66,19.66,4.79,8.31,7.19,17.56,7.19,27.74v42.75h-12.72v-7.89c-2.97,2.46-6.3,4.37-9.99,5.72-3.69,1.36-7.53,2.04-11.51,2.04-7.21,0-13.78-2.16-19.72-6.49l.64,18.45c-.34.08-.76.13-1.27.13-10.26,0-19.55-2.4-27.86-7.19ZM24.75,71.56c2.84,5.13,6.74,9.25,11.71,12.34,4.96,3.1,10.5,4.77,16.6,5.02-3.56-3.22-6.36-7.02-8.4-11.39-2.04-4.37-3.05-9.05-3.05-14.06,0-6.02,1.5-11.58,4.52-16.67,3.01-5.09,7.08-9.14,12.21-12.15,5.13-3.01,10.71-4.52,16.73-4.52.85,0,2.2.08,4.07.25-3.05-3.14-6.7-5.58-10.94-7.32-4.24-1.74-8.74-2.61-13.49-2.61-6.36,0-12.15,1.49-17.37,4.45-5.22,2.97-9.33,7.06-12.34,12.28-3.01,5.22-4.52,11.01-4.52,17.37s1.42,11.85,4.26,16.99ZM84.29,72.71c2.59-2.5,3.88-5.49,3.88-8.97s-1.29-6.59-3.88-9.1c-2.59-2.5-5.66-3.75-9.22-3.75s-6.57,1.25-9.03,3.75c-2.46,2.5-3.69,5.53-3.69,9.1s1.23,6.57,3.69,9.03c2.46,2.46,5.47,3.69,9.03,3.69s6.64-1.25,9.22-3.75Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.96 38.9">
+  <path d="M7.99,22.5c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.17,22.5c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.34,22.5c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+  <path d="M36.39,9.59c-1.71-2.97-4.05-5.31-7.02-7.02-2.97-1.71-6.25-2.57-9.86-2.57s-6.94.86-9.91,2.57c-2.97,1.71-5.31,4.05-7.02,7C.86,12.52,0,15.81,0,19.45s.86,6.93,2.57,9.88c.04.07.08.13.12.19l-.86,5.81.03.03,5.31-.7c.76.6,1.56,1.16,2.43,1.66,2.97,1.71,6.27,2.57,9.91,2.57s6.89-.86,9.86-2.57c2.97-1.71,5.31-4.05,7.02-7.02,1.71-2.97,2.57-6.25,2.57-9.86s-.86-6.89-2.57-9.86ZM19.48,33.98c-3.73,0-7.12-1.42-9.69-3.72l-3.44.6-.03-.03.74-3.85c-1.34-2.2-2.12-4.77-2.12-7.53,0-8.03,6.51-14.53,14.53-14.53s14.53,6.51,14.53,14.53-6.51,14.53-14.53,14.53Z"/>
 </svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/day.svg b/v1-com-officielle/src/assets/icons/day.svg
new file mode 100644
index 0000000..61a8d2e
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/day.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.01 34.53">
+  <path d="M10.91,27.58c-1.85-1.07-3.31-2.52-4.37-4.36-1.07-1.84-1.6-3.89-1.6-6.16s.53-4.32,1.6-6.15c1.07-1.84,2.52-3.29,4.37-4.36,1.85-1.07,3.91-1.6,6.17-1.6s4.29.53,6.14,1.6c1.85,1.07,3.3,2.52,4.37,4.37,1.07,1.85,1.6,3.89,1.6,6.14s-.53,4.29-1.6,6.14c-1.07,1.85-2.52,3.31-4.37,4.37-1.85,1.07-3.89,1.6-6.14,1.6s-4.32-.53-6.17-1.6ZM20.51,22.94c1.03-.59,1.85-1.41,2.44-2.44s.89-2.18.89-3.43-.3-2.4-.89-3.43-1.41-1.85-2.44-2.44c-1.04-.59-2.18-.89-3.43-.89s-2.43.3-3.46.89c-1.03.59-1.85,1.41-2.44,2.44-.59,1.03-.89,2.18-.89,3.43s.3,2.4.89,3.43c.59,1.03,1.41,1.85,2.44,2.44,1.03.59,2.19.89,3.46.89s2.4-.3,3.43-.89Z"/>
+  <path d="M15.29.08l3.31-.08-.15,3.71h-2.86s-.31-3.63-.31-3.63Z"/>
+  <path d="M19.13,34.43l-3.97.1.18-4.45h3.42s.37,4.35.37,4.35Z"/>
+  <path d="M30.95,28.29l-2.37,2.49-2.61-2.83,2.08-2.1,2.9,2.44Z"/>
+  <path d="M33.93,15.34l.08,3.31-3.71-.15v-2.86s3.63-.31,3.63-.31Z"/>
+  <path d="M28.48,3.38l2.47,2.35-2.81,2.59-2.08-2.07,2.42-2.87Z"/>
+  <path d="M5.79,30.92l-2.49-2.37,2.83-2.62,2.1,2.09-2.45,2.9Z"/>
+  <path d="M.08,18.76l-.08-3.35,3.76.15v2.89s-3.68.31-3.68.31Z"/>
+  <path d="M3.46,5.82l2.29-2.41,2.53,2.74-2.02,2.03-2.8-2.37Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/folder.svg b/v1-com-officielle/src/assets/icons/folder.svg
index 258f9f5..b14d6dc 100644
--- a/v1-com-officielle/src/assets/icons/folder.svg
+++ b/v1-com-officielle/src/assets/icons/folder.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
-  <path d="M78.75,24.59c-1.86-.06-3.42-.72-4.65-1.99-1.3-1.33-1.95-2.97-1.95-4.9V0H10.95v24.59H0v78.6h118.5V24.59h-39.75ZM102.5,87.19H16v-46.29h11.55v-24.9h27.8v1.05c0,4.4,1.03,8.38,3.1,11.95,2.07,3.57,4.92,6.38,8.55,8.45,3.55,2.02,7.47,3.04,11.75,3.09v.05h23.75v46.6Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.67">
+  <path d="M36,15.81c-.66,0-1.21-.22-1.63-.66-.43-.44-.64-.98-.64-1.62v-3.66L3.28,0v10.09H0v28.58h40.19V15.81h-4.18ZM32.3,33.39H5.28V15.37h2.33l-.03-.13h1.17v-7.59l19.43,5.85v.03c0,1.45.34,2.77,1.02,3.94.68,1.18,1.62,2.11,2.82,2.79.89.51,1.85.82,2.88.95v12.17h-2.61Z"/>
 </svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/img.svg b/v1-com-officielle/src/assets/icons/img.svg
new file mode 100644
index 0000000..5bfe6b2
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/img.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM6.2,33.62h-.92V5.28h2.61s24.41,0,24.41,0h0s2.61,0,2.61,0v19.57l-5.89-14.74-6.79,17.11-4.83-10.08h-.07l-7.87,16.48h-3.26ZM19.42,33.62h-4.08l2.03-4.6,2.05,4.6ZM25.3,33.62l-.02-.04,3.78-9.64,3.74,9.69h-7.5Z"/>
+  <path d="M11.89,14.3c.9,0,1.67-.31,2.31-.94s.96-1.38.96-2.26-.32-1.67-.96-2.31c-.64-.64-1.41-.96-2.31-.96s-1.67.32-2.31.96-.96,1.41-.96,2.31.32,1.63.96,2.26c.64.63,1.41.94,2.31.94Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/insta.svg b/v1-com-officielle/src/assets/icons/insta.svg
new file mode 100644
index 0000000..cc31da8
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/insta.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M15.72,28.19c-1.34-.78-2.4-1.84-3.18-3.18-.78-1.34-1.17-2.81-1.17-4.39s.39-3.04,1.17-4.37c.78-1.33,1.84-2.39,3.18-3.17,1.34-.78,2.8-1.17,4.39-1.17s3.04.39,4.37,1.17c1.33.78,2.39,1.84,3.17,3.17.78,1.33,1.17,2.79,1.17,4.37s-.39,3.05-1.17,4.39-1.84,2.4-3.17,3.18c-1.33.78-2.79,1.17-4.37,1.17s-3.05-.39-4.39-1.17ZM22.54,23.05c.67-.68,1.01-1.5,1.01-2.44s-.34-1.75-1.01-2.43c-.67-.67-1.48-1.01-2.43-1.01s-1.76.34-2.44,1.01c-.68.67-1.02,1.48-1.02,2.43s.34,1.76,1.02,2.44c.68.68,1.5,1.02,2.44,1.02s1.75-.34,2.43-1.02Z"/>
+  <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM32.3,33.62H5.28V5.28h2.61s24.41,0,24.41,0h0s2.61,0,2.61,0v28.34h-2.61Z"/>
+  <path d="M27.2,12.71c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/like.svg b/v1-com-officielle/src/assets/icons/like.svg
new file mode 100644
index 0000000..0d24c54
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/like.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.31 24.54">
+  <path d="M29.31,8.82c0-1.65-.39-3.14-1.16-4.49-.77-1.35-1.83-2.41-3.16-3.18-1.33-.77-2.82-1.16-4.47-1.16s-3.18.39-4.54,1.16c-.48.27-.92.6-1.33.95-.41-.35-.84-.67-1.33-.95-1.36-.77-2.87-1.16-4.54-1.16s-3.13.39-4.47,1.16c-1.33.77-2.39,1.83-3.16,3.18-.77,1.35-1.16,2.84-1.16,4.49s.39,3.15,1.16,4.51c.41.72.91,1.36,1.48,1.92l11.56,9.29h.17l12.62-9.63c.22-.24.43-.49.62-.76l.08-.1h-.01c.16-.24.33-.47.47-.72.77-1.36,1.16-2.86,1.16-4.51ZM22.36,10.66l-.28.33-7.18,6.34c-.35.31-.87.29-1.2-.03l-6.75-6.64h0c-.49-.48-.74-1.09-.74-1.83s.24-1.36.73-1.85,1.1-.73,1.85-.73,1.38.24,1.89.73c.11.11.21.26.3.44.46.92,1.36,1.53,2.39,1.53h2.59c1.03,0,1.93-.61,2.39-1.53.09-.18.19-.33.3-.44.51-.49,1.14-.73,1.89-.73s1.36.24,1.85.73.73,1.1.73,1.85-.25,1.35-.74,1.84h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/link.svg b/v1-com-officielle/src/assets/icons/link.svg
index a2ed00b..37d7232 100644
--- a/v1-com-officielle/src/assets/icons/link.svg
+++ b/v1-com-officielle/src/assets/icons/link.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.15 105.63">
-  <path d="M35.16,0h23.64L23.64,105.63H0L35.16,0Z"/>
-  <path d="M74.51,0h23.64l-35.16,105.63h-23.64L74.51,0Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.83 37.87">
+  <path d="M16.91,30.56l1.95,3.36,5.02-2.9,3.97,6.85,9.94-5.75-3.97-6.85,5.02-2.9-1.95-3.36L12.5,0l4.41,30.56ZM33.34,21.05l-4.98,2.88.66,1.14h0s3.27,5.65,3.27,5.65l-2.95,1.68-1.98-3.41h.02s-1.95-3.37-1.95-3.37l-4.97,2.88-2.84-19.71,15.72,12.26Z"/>
+  <path d="M3.53,12.35H0v-3.53h3.53v-3.47h3.53v3.47h3.45v3.53h-3.45v3.5h-3.53v-3.5Z"/>
 </svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/msg.svg b/v1-com-officielle/src/assets/icons/msg.svg
new file mode 100644
index 0000000..ce00c3e
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/msg.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M34.25,0H0v38.9h40.19V0h-5.94ZM31.49,5.28l-11.38,21.74L8.85,5.28h22.63ZM7.89,33.62h-2.61V9.97l12.1,23.65H7.89ZM32.3,33.62h-9.44l12.04-23.37v23.37h-2.61Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/next.svg b/v1-com-officielle/src/assets/icons/next.svg
index ba6b56f..575bf4a 100644
--- a/v1-com-officielle/src/assets/icons/next.svg
+++ b/v1-com-officielle/src/assets/icons/next.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
-  <polygon points="24.73 0 24.73 17.46 0 17.46 0 35.64 24.73 35.64 24.73 53.1 80.03 26.6 80.03 26.4 24.73 0"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <polygon points="12.97 .23 12.97 6.19 0 0 0 5.94 6.37 8.75 0 11.58 0 17.52 12.97 11.31 12.97 17.29 18.25 17.29 18.25 8.78 18.25 8.71 18.25 .23 12.97 .23"/>
 </svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/night.svg b/v1-com-officielle/src/assets/icons/night.svg
new file mode 100644
index 0000000..dc4d76d
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/night.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.8 30.75">
+  <path d="M4.06,8.45l-2.47,1.39-1.58-2.84,2.41-1.39-2.41-1.39L1.58,1.39l2.47,1.35V0h3.23v2.74l2.51-1.35,1.55,2.84-2.38,1.39,2.38,1.39-1.55,2.84-2.51-1.39v2.8h-3.23v-2.8Z"/>
+  <path d="M31.8,18.58c0-2.12-.52-4.11-1.57-5.97-1.03-1.8-2.48-3.26-4.36-4.39-.06-.03-.1-.07-.16-.11-1.64-.96-3.35-1.5-5.11-1.67,0,1.22-.12,2.45-.42,3.71-.13.54-.28,1.07-.45,1.6-.49,1.51-1.16,3.01-2.03,4.49-1.18,2.01-2.55,3.73-4.1,5.15-.04.04-.09.07-.13.11-1.41,1.26-2.93,2.21-4.58,2.86.11.21.22.42.34.62.88,1.38,2.03,2.54,3.43,3.5.26.18.52.37.8.53,1.96,1.14,4,1.72,6.13,1.74,2.13.01,4.13-.5,5.97-1.55,1.85-1.05,3.35-2.55,4.49-4.5s1.72-4,1.73-6.12ZM22.95,24.51c-1.04.59-2.15.88-3.34.87-.68,0-1.34-.13-1.98-.34,2-1.74,3.67-3.72,4.97-5.94.9-1.55,1.62-3.2,2.15-4.95.3.34.57.69.79,1.08.59,1.03.88,2.15.87,3.34-.01,1.19-.33,2.33-.97,3.41s-1.47,1.92-2.5,2.51Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/pause.svg b/v1-com-officielle/src/assets/icons/pause.svg
new file mode 100644
index 0000000..ec47557
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/pause.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.67 16.63">
+  <path d="M5.28,0v16.63H0V0h5.28Z"/>
+  <path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/people.svg b/v1-com-officielle/src/assets/icons/people.svg
new file mode 100644
index 0000000..642c43b
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/people.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.92 39.51">
+  <path d="M16.09,24.94c-.54-.92-1.27-1.64-2.21-2.17-.94-.53-1.98-.79-3.14-.79s-2.15.26-3.08.79c-.93.53-1.66,1.26-2.2,2.19-.54.93-.81,1.95-.81,3.05v11.5h12.24v-11.5c0-1.13-.27-2.15-.81-3.07ZM8.83,35.39v-7.3c0-.51.19-.97.57-1.35.38-.39.83-.58,1.34-.58.55,0,1.01.19,1.4.57.39.38.58.84.58,1.37v7.3h-3.9Z"/>
+  <path d="M31.13,35.3l-2.72-17.3h-6.16l-2.72,17.3h-.04v4.12h11.67v-4.12h-.04ZM25.33,22.42l1.56,12.88h-3.12l1.56-12.88Z"/>
+  <g>
+    <polygon points="38.56 29.52 38.56 22.21 38.36 22.21 34.76 22.21 32.47 22.21 32.47 26.16 34.76 26.16 34.76 29.52 32.54 29.52 32.54 33.47 40.92 33.47 40.92 29.52 38.56 29.52"/>
+    <path d="M36.73,20.99c.63,0,1.17-.22,1.59-.65.43-.44.64-.97.64-1.61s-.22-1.12-.65-1.56-.96-.65-1.58-.65-1.13.22-1.57.67-.67.96-.67,1.55c0,.63.22,1.17.67,1.61.44.44.97.65,1.57.65Z"/>
+  </g>
+  <path d="M17.29,11.84s-.01,0-.02-.01c.08-.24.13-.5.13-.77,0-.22-.04-.43-.09-.63.05-.21.09-.42.09-.64,0-.43-.11-.82-.32-1.17.2-.36.32-.75.32-1.19,0-.66-.24-1.23-.72-1.7-.34-.33-.73-.54-1.17-.64-.08-.49-.3-.93-.68-1.31-.48-.47-1.06-.71-1.74-.71-.32,0-.62.06-.89.16-.47-.43-1.02-.65-1.67-.65-.61,0-1.13.2-1.58.58-.41-.3-.89-.46-1.43-.46-.68,0-1.26.24-1.74.71-.22.21-.38.45-.49.7-.2-.05-.4-.08-.62-.08-.68,0-1.26.24-1.74.71-.48.47-.72,1.04-.72,1.7-.26.12-.5.28-.72.49-.48.47-.72,1.04-.72,1.7,0,.33.06.63.17.91-.07.06-.15.11-.22.18C.24,10.18,0,10.75,0,11.41s.24,1.26.72,1.74c.02.02.04.03.06.05-.21.35-.32.75-.32,1.18,0,.68.24,1.26.72,1.74.41.41.89.63,1.43.69.12.33.3.63.57.9.39.39.86.62,1.38.69.57.9,1.31,1.63,2.24,2.16,1.01.59,2.11.88,3.3.88s2.29-.29,3.29-.88c1-.59,1.8-1.39,2.38-2.4.44-.75.71-1.56.82-2.41.24-.12.47-.27.68-.48.48-.48.72-1.06.72-1.74s-.24-1.23-.72-1.7ZM10.09,19c-1.97,0-3.56-1.6-3.56-3.56s1.6-3.56,3.56-3.56,3.56,1.6,3.56,3.56-1.6,3.56-3.56,3.56Z"/>
+  <path d="M31.69,12.54l4.65-3.36v-.02s-4.89-1.01-4.89-1.01l2.43-4.54v-.02s-5.27,1.35-5.27,1.35L29.74.01h-.02s-5.93,4.41-5.93,4.41l-1.13-2.82h-.02s-2.56,5.33-2.56,5.33c-.16.21-.31.43-.45.66-.59,1-.88,2.1-.88,3.29s.29,2.29.88,3.3c.59,1.01,1.39,1.81,2.4,2.4,1.01.59,2.11.88,3.3.88s2.29-.29,3.29-.88c.37-.22.71-.48,1.03-.76l5.11-.61v-.02s-3.08-2.65-3.08-2.65c0,0,0,0,0,0ZM31.89,10.12l-.04.03s0-.02,0-.03h.04ZM25.33,15.46c-1.97,0-3.56-1.6-3.56-3.56,0-1.73,1.24-3.18,2.88-3.49.22-.06.45-.1.69-.1s.48.04.7.1c.01,0,.02,0,.03,0,.09.03.18.05.27.08,1.47.44,2.55,1.79,2.55,3.4,0,1.97-1.6,3.56-3.56,3.56Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/play.svg b/v1-com-officielle/src/assets/icons/play.svg
index 35f115d..bf16538 100644
--- a/v1-com-officielle/src/assets/icons/play.svg
+++ b/v1-com-officielle/src/assets/icons/play.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
-  <path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
 </svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/prev.svg b/v1-com-officielle/src/assets/icons/prev.svg
index 904d3db..208c901 100644
--- a/v1-com-officielle/src/assets/icons/prev.svg
+++ b/v1-com-officielle/src/assets/icons/prev.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
-  <polygon points="55.3 53.1 55.3 35.64 80.03 35.64 80.03 17.46 55.3 17.46 55.3 0 0 26.5 0 26.7 55.3 53.1"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <polygon points="18.25 0 5.28 6.21 5.28 .23 0 .23 0 8.75 0 8.81 0 17.29 5.28 17.29 5.28 11.33 18.25 17.52 18.25 11.58 11.88 8.78 18.25 5.94 18.25 0"/>
 </svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/icons/text.svg b/v1-com-officielle/src/assets/icons/text.svg
new file mode 100644
index 0000000..f1e71bc
--- /dev/null
+++ b/v1-com-officielle/src/assets/icons/text.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M8.61,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26,1.41-.94,2.31-.94,1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96ZM17.78,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31c-.64.64-1.41.96-2.31.96s-1.67-.32-2.31-.96ZM26.96,30.26c-.64-.64-.96-1.41-.96-2.31s.32-1.63.96-2.26c.64-.63,1.41-.94,2.31-.94s1.67.31,2.31.94c.64.63.96,1.38.96,2.26s-.32,1.67-.96,2.31-1.41.96-2.31.96-1.67-.32-2.31-.96Z"/>
+  <path d="M34.91,7.2l-1.92-1.92L27.71,0H0v38.9h40.19V12.48l-5.28-5.28ZM32.3,33.62H5.28V5.28h2.61s17.64,0,17.64,0v9.84h9.38v18.5h-2.61Z"/>
+</svg>
\ No newline at end of file
diff --git a/v1-com-officielle/src/assets/style.css b/v1-com-officielle/src/assets/style.css
index f750821..473ece5 100644
--- a/v1-com-officielle/src/assets/style.css
+++ b/v1-com-officielle/src/assets/style.css
@@ -38,11 +38,11 @@
 /*===================Animation*/
 @keyframes blink {
   0%   { color: var(--accent-color);}
-  15%  { color: var(--back-color);}
-  35%  { color: var(--back-color);}
+  15%  { color: #000000;}
+  35%  { color: #000000;}
   50%  { color: var(--accent-color);}
-  65%  { color: var(--back-color);}
-  85%  { color: var(--back-color);}
+  65%  { color: #000000;}
+  85%  { color: #000000;}
   100%  { color: var(--accent-color);}
 }
 
diff --git a/v1-com-officielle/src/indieComponents/ArtistPannel.vue b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
index 9208337..53c728d 100644
--- a/v1-com-officielle/src/indieComponents/ArtistPannel.vue
+++ b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
@@ -1,9 +1,9 @@
 <script setup>
   import CloseIcon from '../assets/icons/close.svg'
   import FolderIcon from '../assets/icons/folder.svg'
-  import FileIcon from '../assets/icons/file.svg'
-  import ReloadIcon from '../assets/icons/reload.svg'
-  import AboutIcon from '../assets/icons/about.svg'
+  import TextIcon from '../assets/icons/text.svg'
+  import ImgIcon from '../assets/icons/img.svg'
+  import LinkIcon from '../assets/icons/link.svg'
   import BackIcon from '../assets/icons/back.svg'
   import { loadPeopleData } from '@/data/peopleData.js'
 </script>
@@ -36,14 +36,14 @@
         <p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
         <div v-show="gridDisplay" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
           <div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
-            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
             <p class="itemCaption">{{item.caption}}</p>
           </div>
         </div>
         <div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
           <div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
-            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
-            <p class="itemCaption">{{item.caption}}</p>
+            <component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
+            <p class="itemCaption" id="listTitle">{{item.caption}}</p>
             <p class="itemCaption">*auteurice*</p>
             <p class="itemCaption">{{item.date}}</p>
           </div>
@@ -258,6 +258,7 @@
     border-width: thin;
     border-color: transparent;
     border-radius: 16.1px;
+    overflow-x: hidden;
   }
 
   .listItemStyle:hover{
@@ -278,7 +279,7 @@
     font-size: 16.1px;
     pointer-events: none;
     cursor:inherit;
-    width: 30%;
+    width: 20%;
     height: 100%;
     text-align: left;
     display: flex;
@@ -288,6 +289,9 @@
     user-select: none;
   }
 
+  #listTitle{
+    width: 50%;
+  }
 
 </style>
 
@@ -378,13 +382,11 @@
           }
           console.log(dataStorage.selectedLink);
         }
-        if (e.type === 'text'){
-          this.selectFile(e);
-        }
+
+        this.selectFile(e);
 
       },
       selectFile(e){
-        this.$emit('focus');
         this.displayedItems.forEach(it => {
           it.isSelected = false;
         })
@@ -420,8 +422,6 @@
       backToRoot(){
         this.displayedItems = this.rootFolderContent.at(-1).content;
         this.fileName = this.rootFolderContent.at(-1).directory;
-        this.displayedDescription = this.rootFolderContent.at(-1).description;
-        this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
         this.rootDepth = this.rootFolderContent.length
         if (this.rootDepth === 0){
           this.isNotRoot = false;
@@ -431,6 +431,8 @@
           this.listDisplay = false;
           this.gridDisplay = true;
         }
+        this.deselectAll();
+        this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
       },
       closeClicked(){
         this.dataFirstLoad();
diff --git a/v1-com-officielle/src/indieComponents/Infobulle.vue b/v1-com-officielle/src/indieComponents/Infobulle.vue
index a19ed1d..015f70c 100644
--- a/v1-com-officielle/src/indieComponents/Infobulle.vue
+++ b/v1-com-officielle/src/indieComponents/Infobulle.vue
@@ -28,7 +28,7 @@
   }
 
   #infoBulleContainer div{
-    visibility: hidden;
+    visibility: visible;
     text-align: center;
     width: 100%;
     height: 100%;
@@ -70,11 +70,12 @@
         isActive: false,
         posX: 0,
         posY: 0,
-        bubbleContent:""
+        bubbleContent:"",
+        hideTimer: null
       }
     },
     methods:{
-      loadBubble(event){
+      async loadBubble(event){
         let item = event.target
         if (!item.dataset.tooltip) {
           this.hideBubble();
@@ -87,6 +88,11 @@
         }
         this.posY = event.clientY + 13.12;
         this.isActive = true;
+        clearTimeout(this.hideTimer)
+
+        this.hideTimer = setTimeout(() => {
+          this.hideBubble();
+        }, 3333)
       },
       hideBubble(){
         this.isActive = false
diff --git a/v1-com-officielle/src/indieComponents/MessagePannel.vue b/v1-com-officielle/src/indieComponents/MessagePannel.vue
index 935dd08..b836a7d 100644
--- a/v1-com-officielle/src/indieComponents/MessagePannel.vue
+++ b/v1-com-officielle/src/indieComponents/MessagePannel.vue
@@ -1,5 +1,6 @@
 <script setup>
     import CloseIcon from '../assets/icons/close.svg'
+    import LikeIcon from '../assets/icons/like.svg'
 </script>
 
 <template>
@@ -25,7 +26,7 @@
       <div class="reactBar">
         <p class="reactStatStyle">{{selectedMsg.like}}</p>
         <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
-          <CloseIcon name="test" class="icon"/>
+          <LikeIcon name="test" class="icon"/>
         </button>
         <p v-show="selectedMsg.isEvent" class="reactStatStyle">{{selectedMsg.going}}</p>
         <button v-show="selectedMsg.isEvent" type="button" class="textBtnStyle" :class="{reactedStyle: selectedMsg.isGoing}" @mousedown.capture="goingToEvent" @touchstart.capture="goingToEvent">
diff --git a/v1-com-officielle/src/indieComponents/VisualizerPannel.vue b/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
index c270ecb..b9fc570 100644
--- a/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
+++ b/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
@@ -1,5 +1,6 @@
 <script setup>
     import CloseIcon from '../assets/icons/close.svg'
+    import LikeIcon from '../assets/icons/like.svg'
 </script>
 
 <template>
@@ -25,7 +26,7 @@
       <div class="reactBar">
         <p class="reactStatStyle">{{selectedImg.like}}</p>
         <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedImg.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
-          <CloseIcon name="test" class="icon"/>
+          <LikeIcon name="test" class="icon"/>
         </button>
       </div>
     </div>
diff --git a/v1-com-officielle/src/infoComponents/InboxContent.vue b/v1-com-officielle/src/infoComponents/InboxContent.vue
index 3a8d86e..18970fe 100644
--- a/v1-com-officielle/src/infoComponents/InboxContent.vue
+++ b/v1-com-officielle/src/infoComponents/InboxContent.vue
@@ -1,5 +1,6 @@
 <script setup>
-  import CloseIcon from '../assets/icons/close.svg'
+  import MsgIcon from '../assets/icons/msg.svg'
+  import LikeIcon from '../assets/icons/like.svg'
   import { loadMsgData } from '@/data/msgData.js'
 </script>
 
@@ -10,6 +11,7 @@
           <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
         </div>
         <div id="msgNumberStyle" data-tooltip="message.s non lu.s">
+          <MsgIcon name="msg" class="icon"/>
           <p>{{msgNumber}}</p>
         </div>
       </div>
@@ -21,7 +23,7 @@
           </div>
           <div class="msgReact">
             <p class="reactStatStyle">{{item.like}}</p>
-            <CloseIcon name="testLike" class="icon" :class="{reactedStyle: item.isLiked}"/>
+            <LikeIcon name="testLike" class="icon" :class="{reactedStyle: item.isLiked}"/>
             <p class="reactStatStyle"v-show="item.isEvent">{{item.going}}</p>
             <p v-show="item.isEvent && !item.isGoing" >PARTICIPAN.X.S</p>
             <p v-show="item.isEvent && item.isGoing" class="reactedStyle">JE PARTICIPE!</p>
@@ -58,8 +60,8 @@
     width: 100%;
     height: 20%;
     position: relative;
-    background-color: var(--main-color);
-    color: var(--back-color);
+    background-color: var(--accent-color);
+    color: black;
     font-size: 16.1px;
     display: flex;
     flex-direction: row;
@@ -75,7 +77,12 @@
   #msgNumberStyle{
     font-family: 'lineal';
     font-size: 33px;
-    padding-right: 44px;
+    padding-right: 50px;
+    width: 44px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
   }
 
   #msgNumberStyle p{
diff --git a/v1-com-officielle/src/infoComponents/InfoMenu.vue b/v1-com-officielle/src/infoComponents/InfoMenu.vue
index 42e18c6..5cdd208 100644
--- a/v1-com-officielle/src/infoComponents/InfoMenu.vue
+++ b/v1-com-officielle/src/infoComponents/InfoMenu.vue
@@ -1,5 +1,7 @@
 <script setup>
-  import CloseIcon from '../assets/icons/close.svg'
+  import PeopleIcon from '../assets/icons/people.svg'
+  import InstaIcon from '../assets/icons/insta.svg'
+  import ContactIcon from '../assets/icons/contact.svg'
 </script>
 
 <template>
@@ -15,16 +17,16 @@
       </div>
       <div id="btnColumn">
         <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
-          <CloseIcon name="test" class="icon"/>
+          <PeopleIcon name="people" class="icon"/>
         </button>
         <!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
           <CloseIcon name="test" class="icon"/>
         </button>-->
         <button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
-          <CloseIcon name="test" class="icon"/>
+          <InstaIcon name="insta" class="icon"/>
         </button>
         <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
-          <CloseIcon name="test" class="icon"/>
+          <ContactIcon name="contact" class="icon"/>
         </button>
       </div>
     </div>
@@ -126,7 +128,7 @@
   }
 
   #btnColumn .icon{
-    width: 33px;
+    width: 50px;
   }
 
   #welcomeTextContainer{
diff --git a/v1-com-officielle/src/titleComponents/ColorBtn.vue b/v1-com-officielle/src/titleComponents/ColorBtn.vue
index 8079bfb..dd152bd 100644
--- a/v1-com-officielle/src/titleComponents/ColorBtn.vue
+++ b/v1-com-officielle/src/titleComponents/ColorBtn.vue
@@ -1,15 +1,16 @@
 <script setup>
-    import CloseIcon from '../assets/icons/close.svg'
+    import DayIcon from '../assets/icons/day.svg'
+    import NightIcon from '../assets/icons/night.svg'
 </script>
 
 <template>
     <div id="colorBtnContainer">
-      <CloseIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
+      <NightIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
       <label class="switch">
         <input type="checkbox" @click="toggleTheme">
         <span class="slider" data-tooltip="thème"></span>
       </label>
-      <CloseIcon name="solar" class="icon" :class="{checkedIcon: !isChecked}"/>
+      <DayIcon name="solar" class="icon" :class="{checkedIcon: !isChecked}"/>
     </div>
 </template>
 
@@ -79,6 +80,7 @@
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 34px;
+    cursor: cell;
   }
 
   .slider:before {
@@ -92,6 +94,7 @@
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 50%;
+    cursor: cell;
   }
 
   input:checked + .slider {
diff --git a/v1-com-officielle/src/titleComponents/MusicPlayer.vue b/v1-com-officielle/src/titleComponents/MusicPlayer.vue
index 2769d7c..8f494c3 100644
--- a/v1-com-officielle/src/titleComponents/MusicPlayer.vue
+++ b/v1-com-officielle/src/titleComponents/MusicPlayer.vue
@@ -1,5 +1,8 @@
 <script setup>
-  import CloseIcon from '../assets/icons/close.svg'
+  import PlayIcon from '../assets/icons/play.svg'
+  import PauseIcon from '../assets/icons/pause.svg'
+  import NextIcon from '../assets/icons/next.svg'
+  import PrevIcon from '../assets/icons/prev.svg'
   import { loadAudioData } from '@/data/audioData.js'
 </script>
 
@@ -9,13 +12,13 @@
         <p>{{audioCredits}}</p>
       </div>
       <button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
-        <CloseIcon name="prev" class="icon"/>
+        <PrevIcon name="prev" class="icon"/>
       </button>
       <button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
-        <CloseIcon name="toggle" class="icon"/>
+        <component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
       </button>
       <button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
-        <CloseIcon name="next" class="icon"/>
+        <NextIcon name="next" class="icon"/>
       </button>
     </div>
     <audio ref="selectedAudio" @ended="nextTrack">
@@ -57,6 +60,11 @@
     margin-left: 16.1px;
   }
 
+  #playerContainer .iconBtnStyle .icon{
+    pointer-events: none;
+    cursor: inherit;
+  }
+
   #playerCreditStyle{
     width: 50%;
     height: 50px;
diff --git a/v1-com-officielle/src/titleComponents/TitleText.vue b/v1-com-officielle/src/titleComponents/TitleText.vue
index e605456..62b67d2 100644
--- a/v1-com-officielle/src/titleComponents/TitleText.vue
+++ b/v1-com-officielle/src/titleComponents/TitleText.vue
@@ -76,7 +76,7 @@
     margin-left: 285px;
     margin-top: -99px;
     animation: blink 3.33s infinite;
-    mix-blend-mode: difference;
+    mix-blend-mode: exclusion;
   }
 
   /*================ PC HAUT/IPAD*/