edit: consstruction d'une structure responsive pour l'interface

v1-com-officielle/src/App.vue

@@ -1,21 +1,49 @@
-<script setup>
-</script>
-
 <template>
     <div id="mainContainer">
-
+      <TitleDiv></TitleDiv>
+      <InfoDiv></InfoDiv>
     </div>
 </template>
 
 <style scoped>
-  /*CSS général app*/
+  /*================= 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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #mainContainer{
+    background-color: transparent;
+    width:100%;
+    position:absolute;
+    inset:0;
+    height:200%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #mainContainer{
+      flex-direction: row;
+      height:100%;
+    }
+  }
 </style>
 
 <script>
   export default {
     name : 'App',
     mounted(){
-      document.documentElement.setAttribute("data-theme", "dark");
+      document.documentElement.setAttribute("data-theme", "light");
       console.log("Vue root app is fully loaded!");
     }
   };