edit: contenu et structure de la section titre + réglages responsive global

v1-com-officielle/src/App.vue

@@ -14,9 +14,9 @@
 
   /*+++++++++++++++++ COPYBOX
       ================ PC HAUT/IPAD
-      @media(min-width:500px){}
+      @media(min-width:650px){}
       ================ PC LARGE
-      @media(min-width:1000px){}
+      @media(min-width:1300px){}
   */
 
   #mainContainer{
@@ -31,7 +31,7 @@
     justify-content: flex-start;
   }
   /*================ PC LARGE*/
-  @media(min-width:1000px){
+  @media(min-width:1300px){
     #mainContainer{
       flex-direction: row;
       height:100%;

v1-com-officielle/src/assets/style.css

@@ -43,6 +43,12 @@ input {
 
 a{
   text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+a p{
+  cursor:inherit;
 }
 
 p{
@@ -53,7 +59,7 @@ p{
 .referenceText{
   position:absolute;
   z-index: -33;
-  color: var(--dark-color);
+  color: var(--back-color);
 }
 
 /*=============Body & background*/
@@ -61,7 +67,7 @@ html, body{
   margin: 0;
   padding: 0;
   position: absolute;
-  background-color: var(--dark-color);
+  background-color: var(--back-color);
   width: 100%;
   height:100%;
   position: fixed;
@@ -111,6 +117,7 @@ canvas {
   width:100%;
   height: 100%;
   overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 
@@ -122,6 +129,8 @@ canvas {
   border-color: var(--main-color);
   border-width: thin;
   border-radius: 0;
+  position: relative;
+  z-index: 0;
 }
 
 .icon{

v1-com-officielle/src/components/InfoContent.vue

@@ -14,9 +14,9 @@
 
   /*+++++++++++++++++ COPYBOX
       ================ PC HAUT/IPAD
-      @media(min-width:500px){}
+      @media(min-width:650px){}
       ================ PC LARGE
-      @media(min-width:1000px){}
+      @media(min-width:1300px){}
   */
 
   #infoContainer{
@@ -30,7 +30,7 @@
     justify-content: flex-start;
   }
   /*================ PC LARGE*/
-  @media(min-width:1000px){
+  @media(min-width:1300px){
     #infoContainer{
       height: 100%;
       width: 33.3%;

v1-com-officielle/src/components/TitleContent.vue

@@ -15,9 +15,9 @@
 
   /*+++++++++++++++++ COPYBOX
       ================ PC HAUT/IPAD
-      @media(min-width:500px){}
+      @media(min-width:650px){}
       ================ PC LARGE
-      @media(min-width:1000px){}
+      @media(min-width:1300px){}
   */
 
   #titleContainer{
@@ -31,7 +31,7 @@
     justify-content: flex-start;
   }
   /*================ PC LARGE*/
-  @media(min-width:1000px){
+  @media(min-width:1300px){
     #titleContainer{
       height:100%;
       width:66.7%;

v1-com-officielle/src/infoComponents/InfoMenu.vue

@@ -68,9 +68,9 @@
 
   #btnColumn .iconBtnStyle{
     width:100%;
-    height:16.1%;
+    height:20%;
     margin-left: -13.12%;
-    margin-top: 33%;
+    margin-top: 19%;
   }
 
   #btnColumn .icon{
@@ -91,7 +91,7 @@
 
   #welcomeText{
     overflow-y: scroll;
-    height: 66.6%;
+    height: 73%;
     font-size: 16.1px;
     font-family: 'velvelyne';
     color: var(--main-color);
@@ -105,8 +105,22 @@
     width: 70%;
   }
 
+  /*================ MID FORMAT*/
+  @media(min-width:500px){
+    #welcomeText{
+      height:75%;
+    }
+
+    #btnColumn .iconBtnStyle{
+      height:20%;
+      margin-left: 0;
+      margin-top: 7.77%;
+    }
+
+  }
+
   /*================ PC LARGE*/
-  @media(min-width:1000px){
+  @media(min-width:1300px){
     #welcomeText{
       height:71%;
     }

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

@@ -1,5 +1,34 @@
 <template>
     <div id="titleTextContainer" class="uiStyle">
+      <div id="mainTitleContainer">
+        <div class="titleTextStyle" id="drag">
+          <p><strong>DRAGs</strong></p>
+          <p>AND</p>
+        </div>
+        <div class="titleTextStyle" id="nerd">
+          <p><strong>NERDs</strong></p>
+          <p>#</p>
+          <p id="numberTwo"></p>
+        </div>
+        <div class="subtitleTextStyle">
+          <p>Drag shows, musique électronique, synthés vidéos et autre performances nerds</p>
+        </div>
+        <div id="infoContainer">
+          <div class="subtitleTextStyle">
+            <time datetime="2026-05-22" id="timeInfo">
+              <p><strong>22 Mai</strong></p>
+              <p>2026</p>
+            </time>
+          </div>
+          <div id="placeInfo" class="subtitleTextStyle">
+            <a href="https://grrrndzero.org/" target="_blank">
+              <p><strong>Grrrnd Zero</strong></p>
+              <p>60 Avenue de Bohlen</p>
+              <p>69110 Vaux-en-Velin</p>
+            </a>
+          </div>
+        </div>
+      </div>
 
     </div>
 </template>
@@ -22,9 +51,168 @@
     width:100%;
     position:relative;
     height:20%;
+    z-index: 3;
+  }
+
+  #mainTitleContainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 100%;
+  }
+
+  .titleTextStyle{
+    position: absolute;
+    background-color: var(--back-color);
+    width: 85%;
+    height: 27px;
+    padding-bottom: 16.1px;
+    padding-left: 7.77%;
+    font-family: 'lineal';
+    font-size: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 1;
+  }
+  #drag{
+    margin-top: -100px;
+    margin-left: 33px;
+  }
+  #nerd{
+    margin-top: -50px;
+    margin-left: -77px;
+    justify-content: flex-start;
+  }
+  .titleTextStyle strong{
+    font-family: 'pressStart2P';
+    font-size: 50px;
+  }
+
+  .subtitleTextStyle{
+    width: 100%;
+    text-align: left;
+    font-family: 'velvelyne';
+    font-weight: bold;
+    color: var(--main-color);
+    font-size: 16.1px;
+    margin-top: 7.77px;
+  }
+  .subtitleTextStyle strong{
+    font-family: 'lineal';
+    font-size: 23px;
+    font-weight: normal;
+  }
+  .subtitleTextStyle p{
+    margin: 0;
+    padding: 0;
+    margin-left: 16.1px;
+    margin-right: 16.1px;
+  }
+
+  #infoContainer{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width:100%;
+    height:50%;
+  }
+  #infoContainer div{
+    width:50%;
+    height:100%;
+    padding:0;
+  }
+  #timeInfo{
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  #placeInfo{
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-start;
+  }
+
+  /*================ MID FORMAT*/
+  @media(min-width:650px){
+    .titleTextStyle{
+      width: 77%;
+      height: 50px;
+      padding-bottom: 16.1px;
+      padding-left: 33px;
+      font-size: 20px;
+    }
+    #drag{
+      margin-top: -155px;
+      margin-left: 217px;
+    }
+    #nerd{
+      margin-top: -77px;
+      margin-left: 0;
+    }
+    .titleTextStyle strong{
+      font-size: 77px;
+    }
+
+    .subtitleTextStyle{
+      font-size: 16.1px;
+      margin-top: 13.12px;
+    }
+    .subtitleTextStyle strong{
+      font-size: 33px;
+      line-height: 1em;
+    }
+    .subtitleTextStyle p{
+      margin: 0;
+      padding: 0;
+      margin-left: 16.1px;
+      margin-right: 16.1px;
+    }
   }
   /*================ PC LARGE*/
-  @media(min-width:1000px){}
+  @media(min-width:1300px){
+    .titleTextStyle{
+      width: 60%;
+      height: 50px;
+      padding-bottom: 16.1px;
+      padding-left: 33px;
+      font-size: 33px;
+    }
+    #drag{
+      margin-top: -150px;
+      margin-left: 75px;
+    }
+    #nerd{
+      margin-top: -75px;
+      margin-left: -75px;
+      justify-content: space-between;
+    }
+    .titleTextStyle strong{
+      font-size: 77px;
+    }
+
+    .subtitleTextStyle{
+      font-size: 20px;
+      margin-top: 13.12px;
+    }
+    .subtitleTextStyle strong{
+      font-size: 33px;
+      line-height: 1em;
+    }
+    .subtitleTextStyle p{
+      margin: 0;
+      padding: 0;
+      margin-left: 16.1px;
+      margin-right: 16.1px;
+    }
+  }
 </style>
 
 <script>