edit: version html css propre pour version dégradé sans js + responsive pour écrans larges

style/main.css

@@ -30,7 +30,7 @@ html, body{
 
 header{
   width: 100%;
-  height: auto;
+  height: 93px;
   margin: 0;
   position: relative;
   top:0;
@@ -75,10 +75,11 @@ header{
                   position: relative;
                   z-index: -33;
                   opacity: 0;
+                  width: 0;
                 }
         }
 
-        nav{
+        nav > ul{
           width: auto;
           height: 100%;
           margin: 0;
@@ -87,6 +88,8 @@ header{
           flex-direction: column;
           justify-content: space-between;
           align-items: center;
+          margin-right: 7.77px;
+          margin-top: 13.12px;
 
                 .textBtnStyle{
                   border-radius: 0;
@@ -96,9 +99,8 @@ header{
 
 }
 
-
 video{
-  height: 100vh;
+  height: 110%;
   width: auto;
   position: absolute;
   inset: 0;
@@ -118,12 +120,13 @@ video{
 main{
   position: relative;
   z-index: -33;
+  overflow: hidden;
 
       #homeContent{
-        height: 70vh;
+        height: 80vh;
         width: 100%;
         position:relative;
-        z-index: -33;
+        z-index: 0;
         display: grid;
         grid-template-columns: 2.5fr 2fr 1fr;
         grid-template-rows: 1fr 1.5fr;
@@ -175,6 +178,7 @@ main{
 
                         padding: 3.33px;
                         margin-bottom: 3.33px;
+                        box-sizing: border-box;
 
                         border-color: var(--main-color);
                       }
@@ -204,18 +208,20 @@ main{
                 grid-row: 1;
                 width: 150%;
                 font-size: 15px;
+                padding-top: 33px;
               }
 
               #planSection{
                 grid-column: 1 / 3;
                 grid-row: 2;
                 color: var(--back-color);
+                justify-self: end;
 
                 #planContainer{
                   width: 100%;
                   height: 100%;
                   margin-left: 13.12px;
-                  margin-top: 33px;
+                  margin-top: 0;
                 }
 
                 img{
@@ -269,7 +275,7 @@ main{
         align-items: center;
         justify-content: space-between;
         padding: 0;
-        height: 16.1vh;
+        height: 20vh;
 
 
             #statusDesc{
@@ -352,7 +358,7 @@ main{
                           z-index: 33;
 
                           .iconBtnStyle{
-                            visibility: hidden;
+                            visibility: visible;
                             position: absolute;
                             z-index: 34;
                             width: 33px;
@@ -360,6 +366,10 @@ main{
                             right: 7.77px;
                             top: 33px;
                           }
+
+                          .icon{
+                            transform: rotate(45deg);
+                          }
                         }
 
                         details{