responsive fini

SwichGIT/src/css/desktops.css

@@ -10,6 +10,24 @@
         /*vertical-align: middle;*/
     }
 
+    .containinteCarte{
+        top:calc((var(--l) - var(--n)) / 2);
+        left:calc((var(--l) - var(--n)) / 2);
+        height: var(--n);
+        width: var(--n);
+        z-index: 2;
+        position: absolute;
+    }
+
+    .containexteCarte{
+        top:calc((var(--l) - var(--m)) / 2);
+        left:calc((var(--l) - var(--m)) / 2);
+        height: var(--m);
+        width: var(--m);
+        z-index: 1;
+        position: absolute;
+    }
+
     .containform3carte {
         position: relative;
         height: var(--l);

SwichGIT/src/css/formes.css

@@ -135,22 +135,4 @@
 .formeexte{
     height: 100%;
     width: 100%;
-}
-
-.containinteCarte{
-    top:calc((var(--l) - var(--n)) / 2);
-    left:calc((var(--l) - var(--n)) / 2);
-    height: var(--n);
-    width: var(--n);
-    z-index: 2;
-    position: absolute;
-}
-
-.containexteCarte{
-    top:calc((var(--l) - var(--m)) / 2);
-    left:calc((var(--l) - var(--m)) / 2);
-    height: var(--m);
-    width: var(--m);
-    z-index: 1;
-    position: absolute;
 }

SwichGIT/src/css/tablet.css

@@ -10,6 +10,14 @@
         left: -2vw;
     }
 
+    .containform3carte {
+        position: relative;
+        height: var(--l);
+        width: var(--l);
+        display: table-cell;
+        /*vertical-align: middle;*/
+    }
+
     .containinte{
         /*PROBLEME SIZE*/
         top: calc(1.5*((var(--y) - var(--z)) / 2));
@@ -20,6 +28,24 @@
         position: absolute;
     }
 
+    .containinteCarte{
+        top:calc((var(--l) - var(--n)) / 1.3);
+        left:calc((var(--l) - var(--n)) / 1.2);
+        height: var(--n);
+        width: var(--n);
+        z-index: 2;
+        position: absolute;
+    }
+
+    .containexteCarte{
+        top:calc((var(--l) - var(--m)) / 0.8);
+        left:calc((var(--l) - var(--m)) / 0.7);
+        height: var(--m);
+        width: var(--m);
+        z-index: 1;
+        position: absolute;
+    }
+
     .cache{
         top: calc(0.91*((var(--x) - var(--y)) / 2.8));
         left: calc(4.55*((var(--x) - var(--y)) / 2.2));
@@ -299,16 +325,19 @@
 
     .item-form {
         width: 4vh;
-        height: 4vh;
         padding-left: 0.1vw;
-        margin-top: 0.25vw;        
+        margin-top: 0.25vw;
+        height: 4vh;
         border-radius: 10px;
+        display: table-cell;
+        position: relative;
+        vertical-align: middle;
         background-color: var(--lighttercia);
     }
 
     #containBottom{
         position: absolute;
-        bottom: -15%;
+        bottom: -0%;
         width: auto;
         left: 50%;
         z-index: 20;
@@ -316,13 +345,12 @@
     }
 
     #containScore {
-        display: grid;
+        display: flex;
-        grid-template-columns: repeat(5, 100px);
-        grid-template-rows: repeat(2, 100px);
-        grid-column-gap: 1vw;
         justify-content: center;
         position: relative;
         left: -50%;
+        flex-flow: row wrap;
+        width: 80vw;
         
     }
 
@@ -338,8 +366,9 @@
         padding: 4px;
         position: relative;
         z-index: 1;
-        width: 12vh;
+        width: 12vw;
-        height: 12vh;
+        height: 12vw;
+        margin: 1vw;
         cursor: default;
         transition: all 0.3s ease;
     }
@@ -456,10 +485,6 @@
         left: 5vw;
     }
 
-    .last{
-        display: none;
-    }
-
     #cf2 {
       position:relative;
       margin-left: 14vh;