add sider

src/app/app.component.html

-<div style="display: flex;">
+<div class="container">
+    <div class="container-main" style="display: flex;">
         
         <div style="display: flex; flex-direction: column;" [style.z-index]="4">
             <app-game-educationnal-objective></app-game-educationnal-objective>
@@ -12,10 +13,33 @@
             
         </div>
 
-    <app-role [style.z-index]="2" ></app-role>
+        <div [style.z-index]="2">
+            <div style="display: flex;">
+                <app-role [style.z-index]="10"></app-role>
+                <div [style.z-index]="1">
+                    <div style="display: flex;" [style.z-index]="2">
+                        <app-task [style.z-index]="2"></app-task >
+                        <app-task [style.z-index]="1"></app-task>  
+                    </div>
                     
+                </div>
+            </div>
+            <div style="display: flex;">
+                <app-role [style.z-index]="10"></app-role>
+                <div [style.z-index]="1">
+                    <div style="display: flex;" [style.z-index]="2">
+                        <app-task [style.z-index]="2"></app-task >
                         <app-task [style.z-index]="1"></app-task>  
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div> 
+
+    <div class="container-sider">
+
+    </div>
 
-    <app-annexe-task [style.z-index]="0"></app-annexe-task>
 
 </div>
+

src/app/app.component.scss

+.container {
+    
+    display: flex;
+    flex-direction: row;
+
+    &-main {
+        margin-top: 60px;
+        margin-right: 20%;
+        height: 100%;
+        width: 100%;
+        //width: 80%;
+        //transform: scale(0.75);
+        //transform-origin: top left;
+        overflow: scroll;
+        //overflow-y: visible;
+
+    }
+
+    &-sider {
+        height: 100%;
+        width: 20%;
+        background-color: green;
+        position: fixed;
+        right: 0;
+        top: 0;
+        z-index: 2;
+        border-left: solid black 3px;
+    }
+}
\ No newline at end of file

src/styles.scss

@@ -25,7 +25,7 @@
 }
 
 body {
-    margin-top: 60px;
+    //margin-top: 60px;
     background-color: var(--background-color);
     font-family: 'Glacial Indifference', sans-serif;
     //transform: scale(0.9);