From 6cd8a2e6342cb9f625f14f445612bc4933444909 Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Fri, 20 Mar 2026 04:36:56 +0100
Subject: [PATCH] =?UTF-8?q?edit:=20ajout=20d'une=20s=C3=A9rie=20de=20fen?=
 =?UTF-8?q?=C3=AAtre=20flottantes=20d=C3=A9pla=C3=A7able=20avec=20syt?=
 =?UTF-8?q?=C3=A8me=20de=20focus=20+=20transformation=20msgVisualizer=20en?=
 =?UTF-8?q?=20composant=20s=C3=A9par=C3=A9=20et=20r=C3=A9glages=20associ?=
 =?UTF-8?q?=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v1-com-officielle/src/App.vue                 |   1 +
 v1-com-officielle/src/assets/style.css        |  12 +-
 .../src/components/InfoContent.vue            |   2 +-
 v1-com-officielle/src/dataExchange.js         |  16 ++
 .../src/indieComponents/ArtistPannel.vue      |  84 ++++++++++
 .../src/indieComponents/ContactPannel.vue     |  83 +++++++++
 .../src/indieComponents/InstaPannel.vue       |  83 +++++++++
 .../src/indieComponents/MessagePannel.vue     | 157 ++++++++++++++++++
 .../src/indieComponents/NewsletterPannel.vue  |  83 +++++++++
 .../src/infoComponents/InboxContent.vue       | 118 +------------
 .../src/infoComponents/InfoMenu.vue           |  68 +++++++-
 v1-com-officielle/src/main.js                 |  16 ++
 .../src/titleComponents/MusicPlayer.vue       |  65 +++++++-
 .../src/titleComponents/TitleText.vue         |   4 +-
 14 files changed, 667 insertions(+), 125 deletions(-)
 create mode 100644 v1-com-officielle/src/dataExchange.js
 create mode 100644 v1-com-officielle/src/indieComponents/ArtistPannel.vue
 create mode 100644 v1-com-officielle/src/indieComponents/ContactPannel.vue
 create mode 100644 v1-com-officielle/src/indieComponents/InstaPannel.vue
 create mode 100644 v1-com-officielle/src/indieComponents/MessagePannel.vue
 create mode 100644 v1-com-officielle/src/indieComponents/NewsletterPannel.vue

diff --git a/v1-com-officielle/src/App.vue b/v1-com-officielle/src/App.vue
index 7ab3389..1cefe86 100644
--- a/v1-com-officielle/src/App.vue
+++ b/v1-com-officielle/src/App.vue
@@ -29,6 +29,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
+    z-index: 0;
   }
   /*================ PC LARGE*/
   @media(min-width:1300px){
diff --git a/v1-com-officielle/src/assets/style.css b/v1-com-officielle/src/assets/style.css
index 6ff1de9..9d58263 100644
--- a/v1-com-officielle/src/assets/style.css
+++ b/v1-com-officielle/src/assets/style.css
@@ -193,10 +193,20 @@ canvas {
   background-color: var(--back-color);
   border-style: solid;
   border-width: thin;
-  border-radius: 16.1px;
+  border-radius: 21px;
   border-color: var(--main-color);
 }
 
+.zBase{
+  z-index: 33;
+}
+
+.zFocus{
+  z-index: 333;
+  border-color: var(--accent-color);
+  border-width: thick;
+}
+
 .windowTitle{
   width:100%;
   height:50px;
diff --git a/v1-com-officielle/src/components/InfoContent.vue b/v1-com-officielle/src/components/InfoContent.vue
index 9adfac5..426cb8a 100644
--- a/v1-com-officielle/src/components/InfoContent.vue
+++ b/v1-com-officielle/src/components/InfoContent.vue
@@ -1,7 +1,6 @@
 <template>
     <div id="infoContainer">
       <InfoMenuDiv></InfoMenuDiv>
-      <InboxDiv></InboxDiv>
     </div>
 </template>
 
@@ -28,6 +27,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
+    z-index: 0;
   }
   /*================ PC LARGE*/
   @media(min-width:1300px){
diff --git a/v1-com-officielle/src/dataExchange.js b/v1-com-officielle/src/dataExchange.js
new file mode 100644
index 0000000..b232702
--- /dev/null
+++ b/v1-com-officielle/src/dataExchange.js
@@ -0,0 +1,16 @@
+import { reactive } from 'vue'
+
+export const dataStorage = reactive({
+  selectedMsg: { //empty msg template
+    title: '',
+    date: '',
+    content: '',
+    like: 0,
+    isLiked: false,
+    going: 0,
+    isGoing: false,
+    wasRead: false,
+    isSelected: false,
+    isEvent: false
+  }
+})
diff --git a/v1-com-officielle/src/indieComponents/ArtistPannel.vue b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
new file mode 100644
index 0000000..2522a1c
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
@@ -0,0 +1,84 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="artistPannel" class="windowStyle" ref="artistPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          <b class="windowTitleLower">À PROPOS DE</b>
+          <br>
+          Nos Artistes
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent">
+
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #artistPannel{
+    position: fixed;
+    width: 333px;
+    height: 500px;
+    top: 16.1px;
+    left: 16.1px;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #artistPannel{
+      height: 777px;
+      width: 666px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'ArtistPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.artistPannel;
+      console.log("Artist pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/indieComponents/ContactPannel.vue b/v1-com-officielle/src/indieComponents/ContactPannel.vue
new file mode 100644
index 0000000..4285a84
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/ContactPannel.vue
@@ -0,0 +1,83 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="contactPannel" class="windowStyle" ref="contactPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Contacter l'orga :
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent">
+
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #contactPannel{
+    position: fixed;
+    width: 333px;
+    height: 333px;
+    top: 154px;
+    left: 66px;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #contactPannel{
+      height: 444px;
+      width: 444px;
+      left: 366px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'ContactPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.contactPannel;
+      console.log("Contact pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/indieComponents/InstaPannel.vue b/v1-com-officielle/src/indieComponents/InstaPannel.vue
new file mode 100644
index 0000000..601f322
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/InstaPannel.vue
@@ -0,0 +1,83 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="instaPannel" class="windowStyle" ref="instaPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          ATTENTION!
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent">
+
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #instaPannel{
+    position: fixed;
+    width: 333px;
+    height: 161px;
+    top: 333px;
+    left: 33px;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #instaPannel{
+      height: 250px;
+      width: 444px;
+      left:333px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'InstaPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.instaPannel;
+      console.log("Insta pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/indieComponents/MessagePannel.vue b/v1-com-officielle/src/indieComponents/MessagePannel.vue
new file mode 100644
index 0000000..8f276fa
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/MessagePannel.vue
@@ -0,0 +1,157 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+  <div class="windowStyle" id="msgVisualizer" ref="msgPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+    <Moveable
+        className="moveable"
+        :target="$refs.msgPannel"
+        :draggable="true"
+        @drag="onDrag"
+    />
+    <div class="windowTitle">
+      <p>
+        <b class="windowTitleLower">Message du {{selectedMsg.date}}</b>
+        <br>
+        {{selectedMsg.title}}
+      </p>
+      <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+      <button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="closeMsg" @click="closeMsg">
+        <CloseIcon name="close" class="icon"/>
+      </button>
+    </div>
+    <div class="windowContent">
+      <div class="msgReact">
+        <p class="reactStatStyle">{{selectedMsg.like}}</p>
+        <button type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
+          <CloseIcon 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">
+          JE PARTICIPE!
+        </button>
+      </div>
+      <p id="selectedMsgText" @touchstart.stop>{{selectedMsg.content}}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+  #msgVisualizer{
+    position: fixed;
+    top:50%;
+    left:3.33%;
+    width: 333px;
+    height: 333px;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #msgVisualizer{
+      left: 45%;
+      top: 33.3%;
+    }
+  }
+
+  .windowContent .msgReact{
+    margin-left: -16.1%;
+    width: 77%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    font-family: 'lineal';
+    font-weight: normal;
+    padding: 0;
+  }
+  .windowContent .reactStatStyle{
+    text-align: center;
+    width: 33px;
+    padding-right: 0;
+  }
+  .windowContent .icon{
+    height: 16.1px;
+    width: auto;
+    margin-top: 0;
+  }
+  .windowContent .iconBtnStyle{
+    height: 33px;
+    width: 33px;
+    border-radius: 33px;
+  }
+  .windowContent .textBtnStyle{
+    height: 33px;
+    width: 130px;
+  }
+
+  #selectedMsgText{
+    white-space: pre-line;
+    font-size: 16.1px;
+    font-family: 'velvelyne';
+    color: var(--main-color);
+    font-weight: bold;
+    padding-right: 16.1px;
+    padding-left: 7.77px;
+    margin-top: 0;
+    height: 77%;
+    overflow-y: scroll;
+  }
+
+  .reactedStyle{
+    color: var(--accent-color);
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'MessagePannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed:{
+      selectedMsg(){
+        return dataStorage.selectedMsg
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      likeMsg(){
+        dataStorage.selectedMsg.isLiked = !dataStorage.selectedMsg.isLiked
+      },
+      goingToEvent(){
+        dataStorage.selectedMsg.isGoing = !dataStorage.selectedMsg.isGoing;
+      },
+      closeMsg(){
+        this.$emit('close');
+        dataStorage.selectedMsg.isSelected = false;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.msgPannel;
+      console.log("Message pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/indieComponents/NewsletterPannel.vue b/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
new file mode 100644
index 0000000..4e3a1de
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/NewsletterPannel.vue
@@ -0,0 +1,83 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="newsletterPannel" class="windowStyle" ref="newsletterPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Newsletter
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent">
+
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #newsletterPannel{
+    position: fixed;
+    width: 333px;
+    height: 161px;
+    top: 77px;
+    left: 33px;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #newsletterPannel{
+      height: 250px;
+      width: 444px;
+      left:333px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'NewsletterPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.newsletterPannel;
+      console.log("Newsletter pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/infoComponents/InboxContent.vue b/v1-com-officielle/src/infoComponents/InboxContent.vue
index e028370..3b82e56 100644
--- a/v1-com-officielle/src/infoComponents/InboxContent.vue
+++ b/v1-com-officielle/src/infoComponents/InboxContent.vue
@@ -28,40 +28,7 @@
           </div>
         </div>
       </div>
-
-      <div class="windowStyle" v-show="msgSelected" id="msgVisualizer" ref="msgPannel">
-        <Moveable
-            className="moveable"
-            :target="$refs.msgPannel"
-            :draggable="true"
-            @drag="onDrag"
-        />
-        <div class="windowTitle">
-          <p>
-            <b class="windowTitleLower">Message du {{selectedMsg.date}}</b>
-            <br>
-            {{selectedMsg.title}}
-          </p>
-          <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
-          <button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="toggleMsg" @click="toggleMsg">
-            <CloseIcon name="close" class="icon"/>
-          </button>
-        </div>
-        <div class="windowContent">
-          <div class="msgReact">
-            <p class="reactStatStyle">{{selectedMsg.like}}</p>
-            <button type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
-              <CloseIcon 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">
-              JE PARTICIPE!
-            </button>
-          </div>
-          <p id="selectedMsgText" @touchstart.stop>{{selectedMsg.content}}</p>
-        </div>
-        </div>
-      </div>
+    </div>
 </template>
 
 <style scoped>
@@ -78,21 +45,6 @@
       @media(min-width:1000px){}
   */
 
-  #msgVisualizer{
-    position: fixed;
-    top:50%;
-    left:3.33%;
-    width: 333px;
-    height: 333px;
-  }
-  /*================ PC LARGE*/
-  @media(min-width:1000px){
-    #msgVisualizer{
-      left: 45%;
-      top: 33.3%;
-    }
-  }
-
   #inboxContainer{
     width:100%;
     position:relative;
@@ -230,47 +182,6 @@
     margin-top: -3.33px;
   }
 
-  .windowContent .msgReact{
-    margin-left: -16.1%;
-    width: 77%;
-    justify-content: flex-start;
-    font-family: 'lineal';
-    font-weight: normal;
-    padding: 0;
-  }
-  .windowContent .reactStatStyle{
-    text-align: center;
-    width: 33px;
-    padding-right: 0;
-  }
-  .windowContent .icon{
-    height: 16.1px;
-    width: auto;
-    margin-top: 0;
-  }
-  .windowContent .iconBtnStyle{
-    height: 33px;
-    width: 33px;
-    border-radius: 33px;
-  }
-  .windowContent .textBtnStyle{
-    height: 33px;
-    width: 130px;
-  }
-
-  #selectedMsgText{
-    white-space: pre-line;
-    font-size: 16.1px;
-    font-family: 'velvelyne';
-    color: var(--main-color);
-    font-weight: bold;
-    padding-right: 16.1px;
-    padding-left: 7.77px;
-    margin-top: 0;
-    height: 77%;
-    overflow-y: scroll;
-  }
-
   .reactedStyle{
     color: var(--accent-color);
   }
@@ -285,33 +196,25 @@
 
 <script>
   import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
 
   export default {
     name : 'InboxContent',
+    emits: ['open'],
     methods:{
       onDrag({ target, transform }) {
         target.style.transform = transform;
       },
-      toggleMsg(){
-        this.msgSelected = !this.msgSelected;
-        if (!this.msgSelected){
-          for (let k in this.msgList){
-            this.msgList[k].isSelected = false;
-          }
-        }
-      },
       selectMsg(e){
         for(let i in this.msgList){
           this.msgList[i].isSelected = false;
         }
-        this.selectedMsg = e
-
+        this.selectedMsg = e;
+        dataStorage.selectedMsg = this.selectedMsg;
+        this.$emit('open');
         e.isSelected = true;
         e.wasRead = true;
         this.unreadMsg();
-        if(!this.msgSelected){
-          this.msgSelected = true;
-        }
       },
       unreadMsg(){
         this.msgNumber = 0;
@@ -319,12 +222,6 @@
           if (!this.msgList[j].wasRead)
           this.msgNumber += 1;
         }
-      },
-      likeMsg(){
-        this.selectedMsg.isLiked = !this.selectedMsg.isLiked;
-      },
-      goingToEvent(){
-        this.selectedMsg.isGoing = !this.selectedMsg.isGoing;
       }
     },
     data(){
@@ -342,8 +239,7 @@
             wasRead: false,
             isSelected: false,
             isEvent: false
-          },
-          msgSelected: false
+          }
       }
     },
     mounted(){
diff --git a/v1-com-officielle/src/infoComponents/InfoMenu.vue b/v1-com-officielle/src/infoComponents/InfoMenu.vue
index 4adc250..c3b95a4 100644
--- a/v1-com-officielle/src/infoComponents/InfoMenu.vue
+++ b/v1-com-officielle/src/infoComponents/InfoMenu.vue
@@ -14,20 +14,52 @@
         <button type="button" class="textBtnStyle">NOUS SUIVRE HORS DES RÉSEAUX!</button>
       </div>
       <div id="btnColumn">
-        <button type="button" class="iconBtnStyle" id="btn001">
+        <button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')">
           <CloseIcon name="test" class="icon"/>
         </button>
-        <button type="button" class="iconBtnStyle" id="btn002">
+        <button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')">
           <CloseIcon name="test" class="icon"/>
         </button>
-        <button type="button" class="iconBtnStyle" id="btn003">
+        <button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')">
           <CloseIcon name="test" class="icon"/>
         </button>
-        <button type="button" class="iconBtnStyle" id="btn004">
+        <button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')">
           <CloseIcon name="test" class="icon"/>
         </button>
       </div>
     </div>
+    <!--'msg' 'insta' 'news' 'contact' 'artist'-->
+    <InboxDiv @open="openPannel('msg')"></InboxDiv>
+    <ArtistPan
+      v-show="isActive.includes('artist')"
+      @close="closePannel('artist')"
+      @focus="focusPannel('artist')"
+      :class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
+    </ArtistPan>
+    <NewsPan
+      v-show="isActive.includes('news')"
+      @close="closePannel('news')"
+      @focus="focusPannel('news')"
+      :class="{zBase: isFocused!=='news', zFocus: isFocused==='news'}">
+    </NewsPan>
+    <ContactPan
+      v-show="isActive.includes('contact')"
+      @close="closePannel('contact')"
+      @focus="focusPannel('contact')"
+      :class="{zBase: isFocused!=='contact', zFocus: isFocused==='contact'}">
+    </ContactPan>
+    <InstaPan
+      v-show="isActive.includes('insta')"
+      @close="closePannel('insta')"
+      @focus="focusPannel('insta')"
+      :class="{zBase: isFocused!=='insta', zFocus: isFocused==='insta'}">
+    </InstaPan>
+    <MessagePan
+      v-show="isActive.includes('msg')"
+      @close="closePannel('msg')"
+      @focus="focusPannel('msg')"
+      :class="{zBase: isFocused!=='msg', zFocus: isFocused==='msg'}">
+    </MessagePan>
 </template>
 
 <style scoped>
@@ -137,6 +169,34 @@
 <script>
   export default {
     name : 'InfoMenu',
+    data(){
+      return{
+        isActive: [],
+        isFocused: ""
+      }
+    },
+    methods:{
+      openPannel(name){
+        if(!this.isActive.includes(name)){
+          this.isActive.push(name);
+        }
+        this.isFocused = name;
+      },
+      focusPannel(name){
+        if(this.isActive.includes(name)){
+          this.isFocused = name;
+        }
+      },
+      closePannel(name){
+        const index = this.isActive.indexOf(name)
+        if(index !== -1){
+          this.isActive.splice(index,1);
+        }
+        if(this.isFocused === name){
+          this.isFocused = null;
+        }
+      }
+    },
     mounted(){
       console.log("Info menu is loaded!");
     }
diff --git a/v1-com-officielle/src/main.js b/v1-com-officielle/src/main.js
index 1117fd0..7f1036a 100644
--- a/v1-com-officielle/src/main.js
+++ b/v1-com-officielle/src/main.js
@@ -6,11 +6,19 @@ import App from './App.vue'
 // import composants
 import TitleContent from './components/TitleContent.vue'
 import InfoContent from './components/InfoContent.vue'
+  //title
 import TitleText from './titleComponents/TitleText.vue'
 import GeneratedContent from './titleComponents/GeneratedContent.vue'
 import MusicPlayer from './titleComponents/MusicPlayer.vue'
+  //info
 import InfoMenu from './infoComponents/InfoMenu.vue'
 import InboxContent from './infoComponents/InboxContent.vue'
+  //indie
+import ArtistPannel from './indieComponents/ArtistPannel.vue'
+import NewsletterPannel from './indieComponents/NewsletterPannel.vue'
+import ContactPannel from './indieComponents/ContactPannel.vue'
+import InstaPannel from './indieComponents/InstaPannel.vue'
+import MessagePannel from './indieComponents/MessagePannel.vue'
 
 // création app racine
 const app = createApp(App);
@@ -18,11 +26,19 @@ const app = createApp(App);
 //Composants
 app.component('TitleDiv', TitleContent);
 app.component('InfoDiv', InfoContent);
+  //title
 app.component('PlayerDiv', MusicPlayer);
 app.component('TitleTextDiv', TitleText);
 app.component('GeneratedDiv',GeneratedContent);
+  //info
 app.component('InfoMenuDiv', InfoMenu);
 app.component('InboxDiv', InboxContent);
+  //indie
+app.component('ArtistPan', ArtistPannel);
+app.component('NewsPan', NewsletterPannel);
+app.component('ContactPan', ContactPannel);
+app.component('InstaPan', InstaPannel);
+app.component('MessagePan', MessagePannel);
 
 //Montage dans div#app de index.html
 app.mount('#app');
diff --git a/v1-com-officielle/src/titleComponents/MusicPlayer.vue b/v1-com-officielle/src/titleComponents/MusicPlayer.vue
index 0684756..e0f48cd 100644
--- a/v1-com-officielle/src/titleComponents/MusicPlayer.vue
+++ b/v1-com-officielle/src/titleComponents/MusicPlayer.vue
@@ -1,6 +1,21 @@
-<template>
-    <div id="playerContainer" class="uiStyle">
+<script setup>
+  import CloseIcon from '../assets/icons/close.svg'
+</script>
 
+<template>
+    <div id="playerContainer">
+      <div id="playerCreditStyle">
+        <p>Test-333</p>
+      </div>
+      <button type="button" class="iconBtnStyle">
+        <CloseIcon name="test" class="icon"/>
+      </button>
+      <button type="button" class="iconBtnStyle">
+        <CloseIcon name="test" class="icon"/>
+      </button>
+      <button type="button" class="iconBtnStyle">
+        <CloseIcon name="test" class="icon"/>
+      </button>
     </div>
 </template>
 
@@ -21,12 +36,52 @@
   #playerContainer{
     width:100%;
     position:relative;
-    height:10%;
+    height:7.77%;
+    background-color: transparent;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding-top: 13.12px;
   }
+
+  #playerContainer .iconBtnStyle{
+    width: 33px;
+    height: 33px;
+    margin-left: 16.1px;
+  }
+
+  #playerCreditStyle{
+    width: 50%;
+    height: 50px;
+    background-color: var(--back-color);
+    color: var(--main-color);
+    display: flex;
+    align-items: center;
+    margin-left: 16.1px;
+    padding-left: 16.1px;
+    border-radius: 66px;
+    border-style: solid;
+    border-color: var(--main-color);
+    border-width: thin;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    font-weight: bold;
+  }
+
+
+
+
   /*================ PC LARGE*/
-  @media(min-width:1000px){
+  @media(min-width:1300px){
     #playerContainer{
-      height: 13%;
+      height: 7.77%;
+      padding: 16.1px;
+    }
+
+    #playerCreditStyle{
+      margin-left: 33px;
+      width: 33.3%;
     }
   }
 </style>
diff --git a/v1-com-officielle/src/titleComponents/TitleText.vue b/v1-com-officielle/src/titleComponents/TitleText.vue
index ed1c859..12254e7 100644
--- a/v1-com-officielle/src/titleComponents/TitleText.vue
+++ b/v1-com-officielle/src/titleComponents/TitleText.vue
@@ -49,9 +49,7 @@
 
   #titleTextContainer{
     width:100%;
-    position:relative;
-    height:20%;
-    z-index: 3;
+    height:24%;
   }
 
   #mainTitleContainer{