objectif et résultat alignés et centrés

code/game.css

@@ -83,3 +83,32 @@
     position: absolute;
     bottom: 5px;
   }
+
+  .bd {
+  
+    border-style: solid;
+    border-width: 5px;
+  }
+  .bd2 {
+    border-color: mediumblue;
+    border-style: solid;
+    border-width: 5px;
+  }
+
+  .child {
+    position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  }
+
+  .parent {
+    position: relative;
+  }
+
+  h1 {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }

code/game.html

@@ -10,20 +10,28 @@
     <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
     <ul id="all-container" class="all-container"> 
         
-        <ul class="stats">
-            <p id="temps"></p>
-            <span id="chronotime" class="stats">0:00:00</span>
-            <span id="timer" class="stats">0:00:00</span>
-            <p id="stats" class="stats"></p>
+        <ul class="vitraux stats">
+            <div id="obj_box" class="parent">
+                <h1 class="child" id="obj_text" >Objectif</h1>
+            </div>
+            
+            <div id="res_box" class="parent">
+                <h1 class="child" id="res_text" >R&eacute;sultat</h1>
+            </div>
+
+            
             
-            <h1>Objectif</h1>
             
-            <h1>R&eacute;sultat</h1>
         </ul>
 
         <ul id="obj-container" class="vitraux">
             <canvas id="canvasObj" class="vitrail-plein"></canvas>
             <canvas id="canvasTotal" class="vitrail-plein"></canvas>
+
+            <p id="temps"></p>
+            <span id="chronotime" class="stats">0:00:00</span>
+            <span id="timer" class="stats">0:00:00</span>
+            <p id="stats" class="stats"></p>
         </ul>
         <ul id="vitraux" class="vitraux">
             <canvas id="canvas1" class="vitrail-plein"></canvas>

code/vitraux.js

@@ -67,6 +67,10 @@ canvasT.height=size;
 canvasO.height=size;
 
 document.getElementById("btn_back").width=size;
+document.getElementById("obj_box").style.width=size+"px";
+document.getElementById("obj_box").style.height=size+"px";
+document.getElementById("res_box").style.width=size+"px";
+document.getElementById("res_box").style.height=size+"px";
 
 for(var a=1;a<5;a++)
 {