header css

web/themes/custom/quartiers_de_demain/scss/global/variables/_colors.scss

@@ -7,6 +7,7 @@ $background-home: rgba(153, 147, 174, 0.1);
 $white-button: rgb(255, 255, 255);
 $white-header:rgb(255, 255, 255);
 $yellow-puca: #fdc300;
+$bleu_fond_header: rgb(232, 235, 244);
 
 
 

web/themes/custom/quartiers_de_demain/scss/partials/_footer.scss

@@ -0,0 +1,55 @@
+.footer{
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 10px;
+    background-color: $white-header;
+    padding-top: 3rem;
+    font-family: "Marianne";
+    font-weight: 800;
+    font-size: 1.1rem;
+    text-transform: lowercase;
+    #footer-left{
+        grid-column: 1 /span 3;
+        #block-quartiers-de-demain-logorepu{
+
+        }
+        #block-quartiers-de-demain-logoepau{
+           height: $header-height;
+           
+        }
+        img{
+            width: $header-height;
+            height: auto;
+        }
+    }
+    #footer-middle{
+        grid-column: 6 /span 7;
+
+    }
+    #footer-right{
+        grid-column: 9 /span 12;
+
+    }
+
+    div{
+
+        // display: flex;
+        // flex-direction: row;
+        @media(max-width: 891px){
+            // // flex-direction: row;
+            flex-wrap: wrap;
+        }
+        @media(max-width: 520px){
+            flex-direction: column;
+        }
+    }
+
+}
+
+#block-quartiers-de-demain-pieddepage-2-menu{
+    display: none;
+}
+
+#block-quartiers-de-demain-socialmedialinks{
+    flex-direction: column;
+}

web/themes/custom/quartiers_de_demain/scss/partials/_header.scss

@@ -45,15 +45,40 @@ header{
      }
 
     .language-switcher-language-url{
-        
-    }
-    #block-quartiers-de-demain-entete{
-        h2{
-            display: none;
+        ul{
+            display: flex;
+            flex-direction: row;   
+            li:nth-child(1){
+                &::after{
+                    content: "/";
+                }
+            }
         }
     }
+
+    .header_nav_container{
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: 10px;
+        // grid-template-rows: repeat(3, 1fr);
+        grid-row: 3;
+        grid-column: 1 /span 12;
+        background: $bleu_fond_header;
+        #block-quartiers-de-demain-entete{
+            grid-column: 1 /span 11;
+            order: 2;
+            margin: auto;
+            h2{
+                display: none;
+            }
+        }
+        .close-block{
+            order: 1;
+        }
+
+    }
+    
     .close-block, .open-block{
-        // background: red;
         cursor:pointer;
         span{
             display: block;
@@ -66,8 +91,10 @@ header{
         }
     }
     .close-block{
-        padding-top: 1.2rem;
-        padding-left: 2rem;
+        order: 1;
+        grid-column: 12;
+        display: grid;
+        margin: auto;
         span{
             transform-origin: center;
         }
@@ -89,6 +116,7 @@ header{
         height: 100%;
         display: grid;
         align-items: center;
+        margin: auto;
         span{
             margin-bottom: 5px;	
             transform-origin: 4px 0px;