From 32be3a1730c16bc193b29569ba85ab770bf0f7fa Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Mon, 4 Mar 2024 11:23:46 +0100
Subject: [PATCH] header & zoom in

---
 .../css/quartiers_de_demain.css               | 171 +++++++++++++-----
 .../images/noun-loop-3037049.svg              |  52 ++++++
 .../js/quartiers_de_demain.js                 |  41 ++++-
 .../scss/global/_layout.scss                  |   1 +
 .../scss/pages/_partenaires.scss              |   9 +
 .../scss/pages/_presentation.scss             | 108 +++++------
 .../scss/partials/_aside.scss                 |  57 ++++++
 .../scss/partials/_header.scss                |  42 ++++-
 .../scss/quartiers_de_demain.scss             |   2 +-
 .../templates/html.html.twig                  |   1 +
 10 files changed, 365 insertions(+), 119 deletions(-)
 create mode 100644 web/themes/custom/quartiers_de_demain/images/noun-loop-3037049.svg

diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
index f7065d1..a8c6209 100644
--- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
+++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
@@ -163,6 +163,13 @@ header {
   @media (max-width: 810px) {
     header {
       height: 110px; } }
+  @media (max-width: 660px) {
+    header {
+      height: 70px; } }
+  @media (max-width: 660px) {
+    header {
+      display: flex;
+      height: 50px; } }
   header .contextual-region {
     width: max-content; }
   header .header_left_container {
@@ -171,7 +178,11 @@ header {
     display: flex;
     flex-direction: row;
     border-right: 1px solid #808080;
-    padding-left: 5%; }
+    padding-left: 5%;
+    padding-right: 5%; }
+    @media (max-width: 660px) {
+      header .header_left_container {
+        height: inherit; } }
     @media (max-width: 891px) {
       header .header_left_container #block-quartiers-de-demain-logorepu-2 {
         height: 110px; } }
@@ -189,13 +200,25 @@ header {
       @media (max-width: 891px) {
         header .header_left_container img {
           height: 110px; } }
+      @media (max-width: 660px) {
+        header .header_left_container img {
+          height: 70px; } }
+      @media (max-width: 660px) {
+        header .header_left_container img {
+          height: 50px; } }
   header .header_right_container {
     padding-right: 10px; }
+    @media (max-width: 660px) {
+      header .header_right_container {
+        padding-right: 0; } }
     header .header_right_container .language-switcher-language-url ul {
       display: flex;
       flex-direction: row;
       font-size: 0.8rem;
       padding: 0; }
+      @media (max-width: 660px) {
+        header .header_right_container .language-switcher-language-url ul {
+          margin-bottom: 0; } }
       header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
         content: "/"; }
       header .header_right_container .language-switcher-language-url ul .is-active {
@@ -231,14 +254,23 @@ header {
       background: black;
       border-radius: 3px;
       z-index: 1; }
+      @media (max-width: 660px) {
+        header .open-block span, header .open-block.opened span {
+          width: 25px; } }
   header .open-block {
     height: 100%;
     display: grid;
     align-items: center;
     margin: auto; }
+    @media (max-width: 660px) {
+      header .open-block {
+        height: 50px; } }
     header .open-block span {
       margin-bottom: 13px;
       transform-origin: 4px 0px; }
+      @media (max-width: 660px) {
+        header .open-block span {
+          margin-bottom: 5px; } }
   header .open-block.opened {
     margin: auto; }
     header .open-block.opened span {
@@ -323,6 +355,51 @@ header {
     .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 {
       text-transform: uppercase; }
 
+aside {
+  position: relative;
+  grid-column: 1 /span 2;
+  grid-row: 1;
+  z-index: 100;
+  order: 1;
+  margin-top: 5rem; }
+  @media (max-width: 891px) {
+    aside {
+      margin-left: 5%;
+      margin-top: 9rem; } }
+  @media (max-width: 500px) {
+    aside {
+      width: 80%;
+      margin-top: 3rem; } }
+  aside .sidebar_first_container {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 10rem;
+    font-weight: 400; }
+    aside .sidebar_first_container .field-content {
+      margin-bottom: 0.7rem; }
+    @media (max-width: 810px) {
+      aside .sidebar_first_container {
+        display: none; } }
+  aside .views-field-field-pieces-jointes .field-content {
+    display: flex;
+    flex-direction: column; }
+    aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
+      display: inline-flex; }
+      aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
+        display: block;
+        font-size: small;
+        font-weight: 800; }
+      aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
+        content: url(../images/noun-arrow-download.svg);
+        margin: auto;
+        padding-right: 00.5rem; }
+    aside .views-field-field-pieces-jointes .field-content span {
+      font-size: small;
+      font-weight: 800; }
+      aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
+        margin-left: 50px;
+        align-self: center; }
+
 /*pages*/
 #home {
   width: 100%;
@@ -498,10 +575,16 @@ header {
       font-weight: 500;
       font-size: 0.6rem;
       margin-left: 1rem; }
+      @media (max-width: 810px) {
+        .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
+          margin-left: 0; } }
     .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
       grid-column: 3 /span 8;
       grid-row: 2;
       margin-left: 1rem; }
+      @media (max-width: 810px) {
+        .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
+          margin-left: 0; } }
     .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
       grid-column: 3 /span 8;
       grid-row: 3;
@@ -509,6 +592,9 @@ header {
       width: fit-content;
       padding-bottom: 0.5rem;
       margin-left: 1rem; }
+      @media (max-width: 810px) {
+        .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
+          margin-left: 0; } }
       .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
         display: inline-flex;
         align-items: center; }
@@ -542,6 +628,10 @@ header {
         #presentation .layout-content .content_container article.node-type-static .field_body {
           padding-left: 20%;
           padding-right: 20%; }
+          @media (max-width: 810px) {
+            #presentation .layout-content .content_container article.node-type-static .field_body {
+              padding-left: 13%;
+              padding-right: 13%; } }
           @media (max-width: 640px) {
             #presentation .layout-content .content_container article.node-type-static .field_body {
               padding-left: 10%;
@@ -560,6 +650,10 @@ header {
           padding-bottom: 1rem;
           padding-left: 20%;
           padding-right: 20%; }
+          @media (max-width: 810px) {
+            #presentation .layout-content .content_container article.node-type-static .paragraph {
+              padding-left: 13%;
+              padding-right: 13%; } }
           @media (max-width: 640px) {
             #presentation .layout-content .content_container article.node-type-static .paragraph {
               padding-left: 10%;
@@ -585,16 +679,30 @@ header {
           #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
             display: flex;
             flex-direction: row; }
+            @media (max-width: 500px) {
+              #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
+                flex-direction: column; } }
             #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
               padding-right: 30px;
               text-align: left;
               color: #0732c2; }
+              @media (max-width: 500px) {
+                #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
+                  padding-right: 0px;
+                  text-align: center; } }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
           display: flex;
           flex-direction: row; }
+          @media (max-width: 500px) {
+            #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
+              flex-direction: column; } }
           #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
             padding-right: 30px;
             text-align: left; }
+            @media (max-width: 500px) {
+              #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
+                padding-right: 0px;
+                text-align: center; } }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes p {
           margin-bottom: 0; }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
@@ -609,52 +717,25 @@ header {
                 width: 30px; } }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
           width: -moz-available;
+          width: 100%;
           height: auto;
           cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
-  #presentation aside {
-    position: relative;
-    grid-column: 1 /span 2;
-    grid-row: 1;
-    z-index: 100;
-    order: 1;
-    margin-top: 5rem; }
-    @media (max-width: 891px) {
-      #presentation aside {
-        margin-left: 5%;
-        margin-top: 9rem; } }
-    @media (max-width: 500px) {
-      #presentation aside {
-        width: 80%;
-        margin-top: 3rem; } }
-    #presentation aside .sidebar_first_container {
-      position: -webkit-sticky;
-      position: sticky;
-      top: 10rem;
-      font-weight: 400; }
-      #presentation aside .sidebar_first_container .field-content {
-        margin-bottom: 0.7rem; }
-      @media (max-width: 810px) {
-        #presentation aside .sidebar_first_container {
-          display: none; } }
-    #presentation aside .views-field-field-pieces-jointes .field-content {
-      display: flex;
-      flex-direction: column; }
-      #presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
-        display: inline-flex; }
-        #presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
-          display: block;
-          font-size: small;
-          font-weight: 800; }
-        #presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
-          content: url(../images/noun-arrow-download.svg);
-          margin: auto;
-          padding-right: 00.5rem; }
-      #presentation aside .views-field-field-pieces-jointes .field-content span {
-        font-size: small;
-        font-weight: 800; }
-        #presentation aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
-          margin-left: 50px;
-          align-self: center; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
+            filter: brightness(75%);
+            transition: 0.2s; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in {
+          -ms-transform: scale(1.7);
+          /* IE 9 */
+          -webkit-transform: scale(1.7);
+          /* Safari 3-8 */
+          transform: scale(1.7);
+          max-width: 100vw;
+          overflow-x: scroll; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
+            filter: brightness(100%);
+            transition: 0.2s;
+            cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-out;
+            overflow-x: scroll; }
 
 .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
   grid-column: 3 /span 9;
diff --git a/web/themes/custom/quartiers_de_demain/images/noun-loop-3037049.svg b/web/themes/custom/quartiers_de_demain/images/noun-loop-3037049.svg
new file mode 100644
index 0000000..2fa55d2
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/images/noun-loop-3037049.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.0"
+   x="0px"
+   y="0px"
+   viewBox="0 0 100 125"
+   style="enable-background:new 0 0 100 100;"
+   xml:space="preserve"
+   id="svg2"
+   sodipodi:docname="noun-loop-3037049.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="4.1365747"
+     inkscape:cx="41.217677"
+     inkscape:cy="56.810288"
+     inkscape:window-width="1920"
+     inkscape:window-height="1012"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><g
+     id="g1"
+     transform="matrix(-1,0,0,1,99.722674,0)"><path
+       d="M 86.85,13.47 C 81.61,8.34 74.67,5.51 67.35,5.63 c -7.34,0.08 -14.2,3 -19.34,8.24 -8.48,8.65 -10.23,21.81 -4.45,32.36 l -7.58,7.74 -2.3,-2.26 c -0.24,-0.23 -0.57,-0.37 -0.89,-0.36 -0.33,0 -0.65,0.14 -0.88,0.38 L 5.01,79.17 c -0.23,0.24 -0.36,0.56 -0.36,0.89 0,0.33 0.14,0.65 0.38,0.88 l 14.11,13.83 c 0.24,0.24 0.56,0.36 0.88,0.36 0.32,0 0.65,-0.13 0.89,-0.38 l 26.9,-27.44 c 0.23,-0.24 0.36,-0.56 0.36,-0.89 0,-0.33 -0.14,-0.65 -0.38,-0.88 l -2.3,-2.26 7.1,-7.24 c 0.43,0.28 0.86,0.56 1.32,0.82 4.29,2.48 9.02,3.69 13.73,3.69 7.19,0 14.3,-2.83 19.61,-8.25 C 97.83,41.5 97.66,24.07 86.85,13.47 Z M 20,92.11 7.67,80.03 32.82,54.37 45.14,66.45 Z m 23.7,-30.58 -5.94,-5.82 7.11,-7.26 c 0.04,0.06 0.08,0.11 0.12,0.17 0.09,0.14 0.19,0.27 0.29,0.4 0.21,0.3 0.43,0.6 0.66,0.89 0.11,0.15 0.23,0.29 0.34,0.43 0.23,0.29 0.47,0.57 0.71,0.84 0.11,0.12 0.21,0.25 0.32,0.37 0.35,0.39 0.72,0.77 1.09,1.14 0.46,0.45 0.93,0.87 1.42,1.28 0.12,0.1 0.24,0.2 0.36,0.3 0.12,0.1 0.23,0.2 0.34,0.29 z M 85.46,50.56 c -7.98,8.15 -20.44,9.85 -30.3,4.14 -0.7,-0.41 -1.36,-0.84 -2.01,-1.3 -1.04,-0.75 -2.05,-1.59 -2.98,-2.51 -1.49,-1.46 -2.8,-3.1 -3.91,-4.95 -0.02,-0.05 -0.05,-0.1 -0.08,-0.15 -5.78,-9.7 -4.28,-22.11 3.63,-30.19 4.67,-4.76 10.91,-7.42 17.58,-7.49 0.09,0 0.18,0 0.26,0 6.57,0 12.76,2.53 17.46,7.13 9.82,9.65 9.97,25.49 0.35,35.32 z"
+       id="path1" /></g><g
+     id="g2"
+     transform="translate(0.48349182,-0.48349182)"><rect
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="rect2"
+       width="0.68201739"
+       height="26.391418"
+       x="31.111984"
+       y="20.342749" /><rect
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1.59149;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="rect2-5"
+       width="0.68201739"
+       height="26.391418"
+       x="-33.879463"
+       y="18.257284"
+       transform="rotate(-90)" /></g></svg>
diff --git a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
index d7c4a27..5afa954 100644
--- a/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
+++ b/web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
@@ -37,7 +37,6 @@
         $('.header_nav_container').fadeOut();
     });
 
-});
   
 
 // // /////////////////
@@ -58,4 +57,42 @@
 //   });
 
 // })(jQuery, window);
-  
\ No newline at end of file
+  
+
+
+//////////// agrandissement du shema
+
+  $('#paragraph-id--9 img').click(function() {
+    $(this).toggleClass('zoom_in');
+  });
+
+
+});
+
+// function $(id){
+//   return document.getElementById(id);
+//   }
+  
+//   function agrandir(id){
+//   $('popup').style.display='block';
+//   $('imageAgrandie').src=$(id).src;
+//   }
+  
+//   function reduire(){
+//   $('popup').style.display='none';
+//   $('imageAgrandie').src="";
+//   }
+  
+
+// zoom=2;
+// document.body.onmousemouve=function(){
+//   loupe=document.getElementById("#paragraph-id--9");
+//   loupe.style.left=event.clientX+"px";
+//   loupe.style.right=event.clientY+"px";  
+//   loupe.style.backgroundSize=(1500*zoom)+"px";
+//   loupe.style.backgroundPosition=(-loupe.offsetLeft+zoom-150)+"px"+(-loupe.offsetTop+zoom-150)+"px";
+// }
+
+function $zoom() {
+
+}
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss
index 25f6cc7..29e5c75 100644
--- a/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/global/_layout.scss
@@ -2,6 +2,7 @@
 $header-height : 150px;
 $header-height-pad : 110px;
 $header-height-small : 70px;
+$header-height-ultrasmall : 50px;
 $width-menu-slidedown : 550px; 
 
 .layout-container {
diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss
index 365ac18..7a5dc8b 100644
--- a/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/pages/_partenaires.scss
@@ -50,11 +50,17 @@
                         font-weight: 500;
                         font-size: $font-normal;
                         margin-left: 1rem;
+                        @media (max-width:810px) {  
+                            margin-left: 0;
+                        }
                     }
                     .field_body{
                         grid-column: 3 /span 8;
                         grid-row:  2;
                         margin-left: 1rem;
+                        @media (max-width:810px) {  
+                            margin-left: 0;
+                        }
 
                     }
                     .field_field_lien{
@@ -64,6 +70,9 @@
                         width: fit-content;
                         padding-bottom: 0.5rem;
                         margin-left: 1rem;
+                        @media (max-width:810px) {  
+                            margin-left: 0;
+                        }
 
                         a{
                             display: inline-flex;
diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
index 1cb32eb..690a99c 100644
--- a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
@@ -10,11 +10,6 @@
         order: 2;
         padding-top: 3rem;
         padding-bottom: 6rem;
-        // width: 70%;
-        // margin: auto;
-        @media(max-width: 891px){
-            // width: 90%;
-        }
         @media (max-width:500px) {
             padding-top: 0;
         }
@@ -30,6 +25,10 @@
                 .field_body{
                     padding-left: 20%;
                     padding-right: 20%;
+                    @media (max-width:810px) { 
+                        padding-left: 13%;
+                        padding-right: 13%;
+                    }
                     @media (max-width:640px) { 
                         padding-left: 10%;
                         padding-right: 10%;
@@ -54,6 +53,10 @@
                     padding-bottom: 1rem;
                     padding-left: 20%;
                     padding-right: 20%;
+                    @media (max-width:810px) { 
+                        padding-left: 13%;
+                        padding-right: 13%;
+                    }
                     @media (max-width:640px) { 
                         padding-left: 10%;
                         padding-right: 10%;
@@ -93,21 +96,36 @@
                         .field_field_texte div:nth-child(2){
                             display: flex;
                             flex-direction: row;
+                            @media(max-width: 500px){
+                                flex-direction: column;
+                            }
                             p{
                                 padding-right: 30px;
                                 text-align: left;
                                 color: $blue_QDD;
+                                @media(max-width: 500px){
+                                    padding-right: 0px;
+                                    text-align: center;
+                                }
                             }
                         }
+                        
                     }
 
                     #paragraph-id--8{
                         .field_field_texte div:nth-child(2){
                             display: flex;
                             flex-direction: row;
+                            @media(max-width: 500px){
+                                flex-direction: column;
+                            }
                             p{
                                 padding-right: 30px;
                                 text-align: left;
+                                @media(max-width: 500px){
+                                    padding-right: 0px;
+                                    text-align: center;
+                                }
                             }
                         }
                     }
@@ -130,73 +148,33 @@
                     #paragraph-id--9{
                         img{
                             width: -moz-available;
+                            width: 100%;
                             height: auto;   
                             cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; 
+                            &:hover{
+                                filter: brightness(75%);
+                                transition: 0.2s;
+                            }
+                        }
+
+                        .zoom_in{
+                            -ms-transform: scale(1.7); /* IE 9 */
+                            -webkit-transform: scale(1.7); /* Safari 3-8 */
+                            transform: scale(1.7);
+                            max-width: 100vw;
+                            overflow-x: scroll;
+                            &:hover{
+                                filter: brightness(100%);
+                                transition: 0.2s;
+                                cursor:url(/img/layout/backgrounds/zoom.cur),-moz-zoom-out;
+                                overflow-x: scroll;
+                            }   
                         }
                     }
                 }
             }
         }
-    }    
-
-    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;
-
-                    }
-                }
-            }
-        }
-    }
-    
-            
+    }              
 }       
         
     
diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss
index 07ae03b..2f1d393 100644
--- a/web/themes/custom/quartiers_de_demain/scss/partials/_aside.scss
+++ b/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;
+
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
index 2d1b775..3bed516 100644
--- a/web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
+++ b/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;
diff --git a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
index 1a1e707..2ac0301 100644
--- a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
@@ -26,7 +26,7 @@
 
 
 /*pages*/
-@import "pages/_home";
+@import "pages/home";
 @import "pages/partenaires";
 @import "pages/presentation";
 @import "pages/static";
diff --git a/web/themes/custom/quartiers_de_demain/templates/html.html.twig b/web/themes/custom/quartiers_de_demain/templates/html.html.twig
index 107c56b..17c2642 100644
--- a/web/themes/custom/quartiers_de_demain/templates/html.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/html.html.twig
@@ -32,6 +32,7 @@
     <title>{{ head_title|safe_join(' | ') }}</title>
     <css-placeholder token="{{ placeholder_token }}">
     <js-placeholder token="{{ placeholder_token }}">
+
   </head>
   <body{{ attributes }}>
     {#