edit: ajout d'une série de fenêtre flottantes déplaçable avec sytème de focus + transformation msgVisualizer en composant séparé et réglages associés

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>