ps4

SwichGIT/src/css/base.css

@@ -14,15 +14,6 @@
 	--colorfive : #2E6DB4;/*HEXA*/
 	--colorsix : #E6792F;/*HOCTO*/
 
-	--colorbase : #e75259;
-	--colorcarre : #30C0DE;
-	--colorone : #00CBFF;
-	--colortwo : #00FF6E;
-	--colorthree : #C800FF;
-	--colorfour : #E6DA27;
-	--colorfive : #2E6DB4;
-	--colorsix : #E6792F;
-
 	/*Tailles cartes*/
 	--tailleTablette : 12vw;
 	--taille: 10vw;

SwichGIT/src/css/formes.css

@@ -20,6 +20,8 @@
     vertical-align: middle;
     background-color: black;
 }
+
+
 /*ROND*/
 .containexte{
     height: var(--y);
@@ -33,10 +35,7 @@
     display: none;
 }
 
-.rond{
-    -webkit-clip-path: circle(50% at 50% 50%);
-    clip-path: circle(50% at 50% 50%);
-}
+
 
 .round{
     border-radius: 5vw; 
@@ -50,14 +49,16 @@
     background-color: black;
 }
 
-.formeinte{
-    height: 90%;
-    width: 90%;
-    margin: 0 auto;
-}
-.formeexte{
-    height: 100%;
-    width: 100%;
+
+
+
+
+/* UTILISATION FORMES CARTES*/
+.containformCarte{
+    position: relative;
+    height: var(--x);
+    width: var(--x);
+    display: table-cell;
 }
 
 .carre{
@@ -109,3 +110,35 @@
     clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
 }
 
+.rond{
+    -webkit-clip-path: circle(50% at 50% 50%);
+    clip-path: circle(50% at 50% 50%);
+}
+
+.formeinte{
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+}
+.formeexte{
+    height: 100%;
+    width: 100%;
+}
+
+.containinteCarte{
+    top:calc((var(--x) - var(--z)) / 2);
+    left:calc((var(--x) - var(--z)) / 2);
+    height: var(--z);
+    width: var(--z);
+    z-index: 2;
+    position: absolute;
+}
+
+.containexteCarte{
+    top:calc((var(--x) - var(--y)) / 2);
+    left:calc((var(--x) - var(--y)) / 2);
+    height: var(--y);
+    width: var(--y);
+    z-index: 1;
+    position: absolute;
+}