tunnel: intiation de la com officielle

major_edits: mail dans liens + graff overlay + simple click dans panneau 
'à propos'

v1-com-officielle/src/titleComponents/ColorBtn.vue

@@ -122,6 +122,7 @@
 <script>
   export default {
     name : 'InfoContent',
+    emits: ['themeDark', 'themeLight'],
     data(){
       return{
         isChecked: false
@@ -131,9 +132,11 @@
       toggleTheme(){
         if(this.isChecked){
           this.isChecked = false;
+          this.$emit('themeLight');
           return document.documentElement.setAttribute("data-theme", "light")
         }else{
           this.isChecked = true;
+          this.$emit('themeDark');
           return document.documentElement.setAttribute("data-theme", "dark")
         }
       }

v1-com-officielle/src/titleComponents/GeneratedContent.vue

@@ -14,7 +14,7 @@
       </div>
     </div>
     <PlayerDiv></PlayerDiv>
-    <ColorPan></ColorPan>
+    <ColorPan ref="colorBtn"></ColorPan>
     <button type="button" name="reload" data-tooltip="recharger" id="reloadBtnStyle" class="iconBtnStyle" @click="startContentReload">
       <ReloadIcon name="close" class="icon"/>
     </button>
@@ -37,7 +37,7 @@
   #generatedContainer{
     background-color: transparent;
     width:100%;
-    height:90%;
+    height:70%;
     position:relative;
   }
 
@@ -94,7 +94,7 @@
 
   .imgStyle{
     position: absolute;
-    width:77px;
+    width:100px;
     height:auto;
     z-index:-1;
     border-style: solid;
@@ -103,13 +103,13 @@
   }
   .imgStyle.highlightItem{
     border-color: transparent;
-    width:117px;
+    width:131.2px;
     height:auto;
     z-index:-1;
   }
   .imgStyle.highlightMax{
     border-color: transparent;
-    width:200px;
+    width:250px;
     height:auto;
     z-index:-1;
   }
@@ -166,7 +166,7 @@
           isHighlight: 0
         })),
         randomImgList: null,
-        marjTop:0,
+        marjTop:77,
         marjBot:161,
         marjSide:200,
         overlayIsActive: false
@@ -193,7 +193,7 @@
         do{
           c = this.getRandomInt(0,imgCount);
         } while (a == c || c == b);
-        console.log(a,b,c);
+        //console.log(a,b,c);
         this.randomImgList[a].isHighlight = 1;
         this.randomImgList[b].isHighlight = 1;
         this.randomImgList[c].isHighlight = 2;
@@ -213,7 +213,7 @@
           chain[i].y = y;
           //calc nouvelle position
             // distance contrôlée
-          const distance = this.getRandomInt(100, this.marjSide);
+          const distance = this.getRandomInt(161, 333);
           // perturbation continue
           dirX += (Math.random() - 0.5) * 1.2;
           dirY += (Math.random() - 0.5) * 0.5;
@@ -256,14 +256,14 @@
         this.randomImgList = structuredClone(toRaw(this.imgList)).sort(() => Math.random()-0.5);
         this.selectHighlight();
         this.genCoord(this.randomImgList);
-        console.log('Layout has been generated!');
+        //console.log('Layout has been generated!');
       },
       async reloadAnimation(){
         this.overlayIsActive = true;
-        for (let i = 0; i < 34; i++) {
+        for (let i = 0; i < 3; i++) {
           this.generateContent();
-          await this.delay(44);
-          if(i===33){
+          await this.delay(333);
+          if(i===2){
             this.overlayIsActive = false;
           };
         }
@@ -283,7 +283,7 @@
         const rect = entries[0].contentRect;
         this.containerWidth = rect.width;
         this.containerHeight = rect.height;
-        console.log(rect.width, rect.height);
+        //console.log(rect.width, rect.height);
         this.generateContent();
       });
       observer.observe(displayContainer);

v1-com-officielle/src/titleComponents/MusicPlayer.vue

@@ -123,7 +123,7 @@
     },
     methods:{
       loadAudio(){
-        console.log(this.target);
+        //console.log(this.target);
         this.target.pause();
         this.selectedSong = this.audioData[this.trackCount];
         this.audioFile = this.selectedSong.src;
@@ -147,7 +147,7 @@
         if (this.trackCount<0){
           this.trackCount = this.audioData.length - 1;
         }
-        console.log('prev:', this.trackCount);
+        //console.log('prev:', this.trackCount);
         this.loadAudio();
       },
       nextTrack(){
@@ -155,14 +155,14 @@
         if (this.trackCount>=this.audioData.length){
           this.trackCount = 0;
         }
-        console.log('next:', this.trackCount);
+        //console.log('next:', this.trackCount);
         this.loadAudio();
       }
     },
     async mounted(){
       this.audioData = await loadAudioData();
       this.target = this.$refs.selectedAudio;
-      console.log('AUDIO/', this.audioData);
+      //console.log('AUDIO/', this.audioData);
       this.loadAudio();
       console.log("Music player is loaded!");
     }

v1-com-officielle/src/titleComponents/TitleText.vue

@@ -17,17 +17,20 @@
         <TwoGraff name="graffTwo" class="numberTwo" id="graffTwo"/>
         <TwoExtra name="extraTwo" class="numberTwo" id="extraTwo"/>
         <div class="subtitleTextStyle">
-          <p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autre performances nerds</p>
+          <p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autres performances nerds</p>
+          <p>Thème / cyberpunk vs solarpunk</p>
         </div>
         <div id="infoContainer">
           <div class="subtitleTextStyle">
-            <time datetime="2026-05-22T16:00" id="timeInfo">
+            <time datetime="2026-05-22T18:00" id="timeInfo">
               <p><strong>22 Mai</strong></p>
               <p>2026</p>
               <p>
-              &emsp;&emsp;&emsp;&emsp;&emsp;&ensp;16h00
+              &emsp;&emsp;&emsp;&ensp;18h/ Forum
               <br>
-              &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; - 01h00
+              20h/ Début des shows
+              <br>
+              &emsp;&emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
               </p>
             </time>
           </div>
@@ -75,8 +78,10 @@
     width: auto;
     margin-left: 285px;
     margin-top: -99px;
-    animation: blink 3.33s infinite;
+    animation: none;
+    color: var(--neon-color);
     mix-blend-mode: exclusion;
+    transition: 3.33s ease;
   }
 
   /*================ PC HAUT/IPAD*/
@@ -209,6 +214,10 @@
     justify-content: flex-start;
   }
 
+  #placeInfo a:hover{
+  color: var(--accent-color);
+  }
+
   /*================ MID FORMAT*/
   @media(min-width:650px){
     .titleTextStyle{