add sider

src/app/app.component.html

-<div style="display: flex;">
-    
-    <div style="display: flex; flex-direction: column;" [style.z-index]="4">
-        <app-game-educationnal-objective></app-game-educationnal-objective>
-        <app-game-context [style.z-index]="2"></app-game-context>
-    </div>
-    
-    <div style="display: flex; flex-direction: column;" [style.z-index]="3">
-        <app-educational-objective></app-educational-objective>
-          
-        <app-mission-context [style.z-index]="2"></app-mission-context>
+<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>
+            <app-game-context [style.z-index]="2"></app-game-context>
+        </div>
         
+        <div style="display: flex; flex-direction: column;" [style.z-index]="3">
+            <app-educational-objective></app-educational-objective>
+            
+            <app-mission-context [style.z-index]="2"></app-mission-context>
+            
+        </div>
+
+        <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-role [style.z-index]="2" ></app-role>
 
-    <app-task [style.z-index]="1"></app-task>
 
-    <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);