header & zoom in

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

@@ -10,4 +10,61 @@
     
     
     }   
+}
+
+aside{
+    position: relative;
+    grid-column: 1 /span 2;
+    grid-row: 1;
+    z-index: 100;
+    order: 1;
+    margin-top: 5rem;
+    @media(max-width:891px){
+        margin-left: 5%;
+        margin-top: 9rem;
+    }
+    @media (max-width:500px) {
+        width: 80%;
+        margin-top: 3rem;
+    }
+    .sidebar_first_container{
+        position: -webkit-sticky;
+        position: sticky;
+        top: 10rem;
+        font-weight: 400;
+        .field-content{
+            margin-bottom: 0.7rem;
+        }
+        @media (max-width: 810px){
+            display: none;
+        }
+    }
+    .views-field-field-pieces-jointes{
+        .field-content{
+            display: flex;
+            flex-direction: column;
+            .file--application-pdf{
+                display: inline-flex;
+                a{
+                    display: block;
+                    font-size: small;
+                    font-weight: 800;
+                }
+                &::before{
+                    content: url(../images/noun-arrow-download.svg);
+                    margin: auto;
+                    padding-right: 00.5rem;
+                }
+            }
+            span{
+                font-size: small;
+                font-weight: 800;
+                &:nth-child(2){
+                    margin-left: 50px;
+                    align-self: center;
+
+                }
+            }
+        }
+    }
 }

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

@@ -17,7 +17,13 @@ header{
             // width: 800px;
             height: $header-height-pad;
     }
-    @media (max-width:360px) {    }
+    @media(max-width: 660px){
+        height: $header-height-small;
+    }
+    @media(max-width: 660px){
+        display: flex;
+        height: $header-height-ultrasmall;
+    }
     .contextual-region{
         width: max-content;
     }
@@ -29,6 +35,10 @@ header{
          flex-direction: row;
          border-right: 1px solid #808080;
          padding-left: 5%;
+         padding-right: 5%;
+         @media(max-width: 660px){
+            height: inherit;
+        }
 
          #block-quartiers-de-demain-logorepu-2{
             @media(max-width: 891px){
@@ -51,17 +61,28 @@ header{
              @media(max-width: 891px){
                 height: $header-height-pad;
             }
+            @media(max-width: 660px){
+                height: $header-height-small;
+            }
+            @media(max-width: 660px){
+                height: $header-height-ultrasmall;
+            }
          }
      }
      .header_right_container{
-
         padding-right: 10px;
+        @media(max-width: 660px){
+            padding-right: 0;
+        }
         .language-switcher-language-url{
             ul{
                 display: flex;
                 flex-direction: row;   
                 font-size: $font-medium;
                 padding: 0;
+                @media(max-width: 660px){
+                    margin-bottom: 0;      
+                }
                 li:nth-child(1){
                     &::after{
                         content: "/";
@@ -80,18 +101,14 @@ header{
         display: none;
         grid-row: 3;
         grid-column: 1 /span 12;
-
         position: absolute;
         top: 100%; 
         width: 100%;
-
         background: $bleu_fond_header;
         border-bottom: 1px solid #808080;
         border-top: 1px solid #808080;
         font-size: $font-big;
 
-
-
         #block-quartiers-de-demain-entete{
             grid-column: 1 /span 11;
             order: 2;
@@ -99,6 +116,9 @@ header{
             h2{
                 display: none;
             }
+            @media(max-width: 660px){
+
+            }
         }
     }
     
@@ -119,6 +139,9 @@ header{
             background: black;
             border-radius: 3px;
             z-index: 1;
+            @media(max-width: 660px){
+                width: 25px;
+            }
         }
     }
     .open-block{
@@ -126,10 +149,17 @@ header{
         display: grid;
         align-items: center;
         margin: auto;
+        @media(max-width: 660px){
+            height: $header-height-ultrasmall;
+        }
         span{
             margin-bottom: 13px;	
             transform-origin: 4px 0px;
+            @media(max-width: 660px){
+                margin-bottom: 5px;
+            }
         }
+
     }
     .open-block.opened {
         margin: auto;