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

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>