Ameliorations 'responsive' de plusieurs elements

src/Maj.vue

@@ -5,7 +5,6 @@
       <span :class="darktheme ? 'switchDark' : 'switch'" v-bind:style="!isModeRecu ? {'font-weight': 'bold'} : {'font-weight': 1}" @click="changerTabMaj" id="proposees">Proposees</span>
     </div>
     <div  v-show="!detailContenu">
-      <p> Vous êtes {{auteur}}</p>
 
       <div id="detailRecues" v-show="isModeRecu">
         <table>

src/Manuel.vue

@@ -58,7 +58,7 @@
         </ul>
 
       </div>
-      <div id="ohHolyNight">
+      <div id="sectionPrincipale">
         <br id="titreZero">
         <h2 >OpenQuizz - Généralités</h2>
         <br>
@@ -534,27 +534,28 @@ export default {
 
 #menuLateral{
   height: auto;
-  width: 30vh;
-  margin-left: 10vh;
+  width: 14vw;
+  margin-left: 5vw;
   margin-top: 5vh;
 
+
   border: 1px solid black;
   position: fixed;
 }
 
-#ohHolyNight {
-  width: 120vh;
+#sectionPrincipale {
+  width: 75vw;
   min-height: 100%;
   height: 100%;
   margin-top: 5vh;
   margin-bottom: 5vh;
-  margin-left: 65vh;
+  margin-left: 21vw;
   border: 1px solid coral;
 
 }
 
 img {
-  width: 119vh;
+  width: 60vw;
   border: 0.5px solid black;
   margin-bottom: 0.5vh;
 }

src/Menu.vue

 <template>
   <div v-bind:class="[darkMode ? 'dark' : '', etat === 'manuel' ? 'menuManuel' : 'menuHaut']">
-    <DarkModeSwitch v-bind:style="[etat === 'manuel' ? {'margin-top': '10px', 'padding-top': '0px', 'padding-bottom': '5px', 'padding-left': '4px'} : {'margin-top': '10px'}, {'margin-left': '10px'}]" @switched="onSwitched"/>
-    <Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante && nouveauTitre !== 'Manuel d\'utilisation de l\'application OpenQuizz'"></Choix_Mode_Variante>
+    <DarkModeSwitch id="switch" v-bind:style="[etat === 'manuel' ? {'margin-top': '10px', 'padding-top': '0px', 'padding-bottom': '5px', 'padding-left': '4px'} :
+    {'margin-top': '10px'}, {'margin-left': '10px'}]" @switched="onSwitched"/>
+    <Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante && nouveauTitre !== 'Manuel d\'utilisation de l\'application OpenQuizz'"/>
     <span v-show="!variante || nouveauTitre === 'Manuel d\'utilisation de l\'application OpenQuizz'" :class="etat !== 'manuel' ? 'prout' : 'proutManuel'">{{ titrePage }}</span>
     <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true"
          v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div>
-    <div class="circle" id="menuAuteur" v-if="etat !=='manuel'" v-on:click="isAffiche = !isAffiche"  v-bind:style="styleCircle">
+    <div class="circle" id="menuAuteur" v-if="etat !=='manuel'" v-on:click="isAffiche = !isAffiche" >
+<!--      v-bind:style="styleCircle">-->
 
     </div>
     <div :class="darkMode ? 'circleVideDark' : 'circleVide'" v-else>         </div>
@@ -246,13 +248,13 @@ export default {
 .menuHaut{
   display: flex;
   background-color: white;
-  justify-content: space-evenly;
+  justify-content: space-between;
 }
 
 .menuManuel{
   display: flex;
   background-color: white;
-  justify-content: space-evenly;
+  justify-content: space-between;
 }
 
 .circle {
@@ -260,9 +262,9 @@ export default {
   margin-top: 0.25%;
   margin-bottom: 0.25%;
   border-radius: 50%;
-  display: flex; /* or inline-flex */
+/*  display: flex; !* or inline-flex *!
   align-items: center;
-  justify-content: center;
+  justify-content: center;*/
   height: 4.2vh;
   width: 4.2vh;
 
@@ -276,9 +278,6 @@ export default {
   margin-top: 0.25%;
   margin-bottom: 0.25%;
   border-radius: 50%;
-  display: flex; /* or inline-flex */
-  align-items: center;
-  justify-content: center;
   height: 4.2vh;
   width: 4.2vh;
   margin-right: 0.25%;
@@ -289,9 +288,6 @@ export default {
   margin-top: 0.25%;
   margin-bottom: 0.25%;
   border-radius: 50%;
-  display: flex; /* or inline-flex */
-  align-items: center;
-  justify-content: center;
   height: 4.2vh;
   width: 4.2vh;
   margin-right: 0.25%;
@@ -309,9 +305,11 @@ export default {
   width: 100px;
   background: white;
   border: thin solid black;
-  margin-top: 46px;
-  margin-left: 94.75%;
-  position: fixed;
+/*  margin-top: 46px;
+  margin-left: 94.75%;*/
+  position: absolute;
+  right: 0.1vw;
+  top: 5vh;
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -344,8 +342,8 @@ export default {
 
 .prout {
 
-  display: flex;
-  position: absolute;
+  /*display: flex;*/
+  /*position: absolute;*/
   margin-top: 0.5%;
   margin-bottom: 0.1%;
 }
@@ -361,4 +359,5 @@ export default {
   color: #eee;
   border-color: white !important;
 }
+
 </style>
\ No newline at end of file

src/components/Choix_Mode.vue

 <template>
-  <div>
     <div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix" >
       <div class= "contenusPanier" v-if="!darktheme" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
         <p>Panier</p>
@@ -21,7 +20,6 @@
 
 
 
-    </div>
     </div>
 </template>
 
@@ -69,7 +67,11 @@ export default {
 <style scoped>
 #choixDuMode {
   display: flex;
-  z-index: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  /*z-index: 1;*/
 }
 
 .contenusPanier, .contenusBanque {
@@ -77,19 +79,19 @@ export default {
   flex-grow: 1;
   text-align: center;
   vertical-align: bottom;
-  padding-bottom: 0px;
-  padding-top: 10px;
+  /*padding-bottom: 0;*/
+  padding-top: 1vh;
 }
 
 .nonClicked {
-  outline: 1px solid black;
+  border: 1px solid black;
 }
 
 .nonClickedDark {
-  outline: 1px solid white;
+  border: 1px solid white;
 }
 
 .clicked {
-  outline: 5px solid yellow;
+  border: 5px solid yellow;
 }
 </style>
\ No newline at end of file

src/components/Volet_Base.vue

@@ -1180,7 +1180,7 @@ tfoot {
   position: relative;
   width: 15vw;
   height: 56vh;
-  border: 1px solid;
+  border: 1px solid forestgreen;
   margin-top: 2px;
   margin-left: 1vw;
   margin-right: 1vw;

src/components/Volet_Contenu.vue

@@ -110,7 +110,7 @@ export default {
   margin-top: -5%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  /*justify-content: space-evenly;*/
 }
 
 #detailFiltre {
@@ -126,15 +126,13 @@ export default {
   display: inline-block;
   text-align: center;
   vertical-align: middle;
-  margin-top: 15%;
-  margin-bottom: 15%;
+  /*margin-top: 15%;*/
+  /*margin-bottom: 15%;*/
   overflow: auto;
 }
 
 #detailChoixMode {
-  flex-basis: 10%;
-
-
+  /*flex-basis: 10%;*/
 }
 
 

src/components/filtres/Filtre_Tag_Libre.vue

@@ -371,7 +371,7 @@ export default {
 
 .editArborescenceLibre {
   margin-top: 5vh;
-  margin-left: 55vh;
+  margin-left: 35vw;
 }
 
 .tagsLibres {