arrow to the top

web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css

@@ -160,9 +160,16 @@ header {
   position: relative;
   top: 0;
   border-bottom: 1px solid #808080; }
-  @media (max-width: 800px) {
+  @media (max-width: 810px) {
     header {
-      width: 800px; } }
+      height: 110px; } }
+  @media (max-width: 660px) {
+    header {
+      height: 70px; } }
+  @media (max-width: 450px) {
+    header {
+      display: flex;
+      height: 50px; } }
   header .contextual-region {
     width: max-content; }
   header .header_left_container {
@@ -171,19 +178,46 @@ header {
     display: flex;
     flex-direction: row;
     border-right: 1px solid #808080;
-    padding-left: 40px; }
+    padding-left: 2%;
+    padding-right: 2%; }
+    @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; } }
     header .header_left_container #block-quartiers-de-demain-logoepau-2 {
       height: 150px; }
+      @media (max-width: 891px) {
+        header .header_left_container #block-quartiers-de-demain-logoepau-2 {
+          height: 110px; } }
+    header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
+      margin-left: auto; }
     header .header_left_container img {
       width: auto;
       height: 150px; }
+      @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: 450px) {
+        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 {
@@ -198,7 +232,8 @@ header {
     background: #e8ebf4;
     border-bottom: 1px solid #808080;
     border-top: 1px solid #808080;
-    font-size: 1rem; }
+    font-size: 1rem;
+    text-align: center; }
     header .header_nav_container #block-quartiers-de-demain-entete {
       grid-column: 1 /span 11;
       order: 2;
@@ -219,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: 450px) {
+      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 {
@@ -239,34 +283,78 @@ header {
     header .open-block.opened > div > span:nth-child(3) {
       display: none; }
 
+footer span.totop {
+  display: inline-flex;
+  width: 100vw; }
+  footer span.totop #toTop {
+    margin: auto;
+    background-color: #fff;
+    border-top-left-radius: 10%;
+    border-top-right-radius: 10%;
+    padding-bottom: 0.5rem; }
+    footer span.totop #toTop .fa-arrow-up {
+      font-size: 1.7rem;
+      line-height: 2.5rem;
+      text-align: center;
+      width: 3rem;
+      height: 2rem;
+      display: inline-block;
+      text-align: top; }
+      footer span.totop #toTop .fa-arrow-up .fa {
+        color: #fff; }
+
 .footer {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(1, 1fr);
   background-color: white;
   padding-top: 1rem;
+  padding-bottom: 1rem;
   border-top: 1px solid #808080; }
   .footer section {
     width: fit-content; }
   .footer h2, .footer ul {
     margin: 0; }
+  @media (max-width: 891px) {
+    .footer {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between; } }
+  @media (max-width: 600px) {
+    .footer {
+      flex-wrap: nowrap; } }
   .footer #footer-left {
     grid-column: 1 /span 5;
     grid-row: 1;
-    padding-left: 40px; }
+    padding-left: 5%; }
     .footer #footer-left .footer_left_container {
       display: flex;
       flex-direction: row; }
       .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
         height: 150px; }
+        @media (max-width: 891px) {
+          .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
+            height: 110px; } }
       .footer #footer-left .footer_left_container img {
         width: auto;
         height: 150px; }
+        @media (max-width: 891px) {
+          .footer #footer-left .footer_left_container img {
+            height: 110px; } }
+        @media (max-width: 660px) {
+          .footer #footer-left .footer_left_container img {
+            height: 70px; } }
+        @media (max-width: 450px) {
+          .footer #footer-left .footer_left_container img {
+            height: 50px; } }
   .footer #footer-middle {
     grid-column: 6 /span 7;
     grid-row: 1; }
     .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li {
       padding-bottom: 0.2rem; }
+    @media (max-width: 891px) {
+      .footer #footer-middle #block-quartiers-de-demain-pieddepage ul {
+        padding-left: 00.5rem; } }
   .footer #footer-right {
     grid-column: 10 / 12;
     grid-row: 1; }
@@ -277,11 +365,13 @@ header {
         flex-direction: column;
         font-size: 0.8rem;
         font-weight: 400;
-        padding-bottom: 1rem; }
+        padding-bottom: 0.6rem; }
         .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2::before {
           content: "Nous contacter";
-          padding-bottom: 1rem;
+          padding-bottom: 0.6rem;
           font-weight: 600; }
+      .footer #footer-right #block-quartiers-de-demain-socialmedialinks .fa-3x {
+        font-size: 2em; }
   @media (max-width: 891px) {
     .footer div {
       flex-wrap: wrap; } }
@@ -291,13 +381,175 @@ header {
 
 .layout-sidebar-first {
   display: flex;
-  justify-content: end; }
+  justify-content: end;
+  position: relative;
+  grid-column: 1 /span 2;
+  grid-row: 1;
+  z-index: 98;
+  order: 1;
+  margin-top: 5rem; }
+  @media (max-width: 891px) {
+    .layout-sidebar-first {
+      margin-left: 5%;
+      margin-top: 9rem; } }
+  @media (max-width: 500px) {
+    .layout-sidebar-first {
+      width: 80%;
+      margin-top: 3rem; } }
   .layout-sidebar-first .sidebar_first_container {
-    width: 80%; }
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 10rem;
+    font-weight: 400; }
+    .layout-sidebar-first .sidebar_first_container .field-content {
+      margin-bottom: 0.7rem; }
+    @media (max-width: 810px) {
+      .layout-sidebar-first .sidebar_first_container {
+        display: none; } }
     .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 {
+      order: 1;
       text-transform: uppercase; }
 
 /*pages*/
+#home {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: 10px; }
+  #home .layout-content {
+    grid-row: 1;
+    order: 2;
+    padding-top: 3rem;
+    padding-bottom: 6rem; }
+    @media (max-width: 500px) {
+      #home .layout-content {
+        padding-top: 0; } }
+    #home .layout-content .content_container {
+      display: flex; }
+      #home .layout-content .content_container #block-quartiers-de-demain-titredepage {
+        display: none; }
+      #home .layout-content .content_container article.node-type-static {
+        width: 100%; }
+        #home .layout-content .content_container article.node-type-static .field_body {
+          padding-left: 20%;
+          padding-right: 20%; }
+          @media (max-width: 640px) {
+            #home .layout-content .content_container article.node-type-static .field_body {
+              padding-left: 10%;
+              padding-right: 10%; } }
+          #home .layout-content .content_container article.node-type-static .field_body h2 {
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-bottom: 0; }
+          #home .layout-content .content_container article.node-type-static .field_body img {
+            width: 100%;
+            height: auto; }
+          #home .layout-content .content_container article.node-type-static .field_body p {
+            margin-top: 0; }
+        #home .layout-content .content_container article.node-type-static .paragraph {
+          padding-top: 1rem;
+          padding-bottom: 1rem;
+          padding-left: 20%;
+          padding-right: 20%; }
+          @media (max-width: 640px) {
+            #home .layout-content .content_container article.node-type-static .paragraph {
+              padding-left: 10%;
+              padding-right: 10%; } }
+        #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_title {
+          text-transform: uppercase;
+          font-size: 1rem;
+          font-weight: 400; }
+        #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
+          color: #0732c2; }
+        #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title {
+          color: #f7002b; }
+        #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
+          background-color: #e8ebf4; }
+        #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
+          text-align: center; }
+        #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 {
+          display: flex;
+          flex-direction: column; }
+          #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title {
+            width: 60%;
+            margin: auto; }
+          #home .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; }
+            #home .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; }
+        #home .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; }
+          #home .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; }
+        #home .layout-content .content_container article.node-type-static .field_field_textes p {
+          margin-bottom: 0; }
+        #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
+          height: auto;
+          float: inline-start;
+          padding-right: 0.5rem; }
+          #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
+            width: 40px;
+            height: auto; }
+            @media (max-width: 891px) {
+              #home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
+                width: 30px; } }
+        #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
+          width: -moz-available;
+          height: auto;
+          cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
+  #home aside {
+    position: relative;
+    grid-column: 1 /span 2;
+    grid-row: 1;
+    z-index: 100;
+    order: 1;
+    margin-top: 5rem; }
+    @media (max-width: 891px) {
+      #home aside {
+        margin-left: 5%;
+        margin-top: 9rem; } }
+    @media (max-width: 500px) {
+      #home aside {
+        width: 80%;
+        margin-top: 3rem; } }
+    #home aside .sidebar_first_container {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 10rem;
+      font-weight: 400; }
+      #home aside .sidebar_first_container .field-content {
+        margin-bottom: 0.7rem; }
+      @media (max-width: 810px) {
+        #home aside .sidebar_first_container {
+          display: none; } }
+    #home aside .views-field-field-pieces-jointes .field-content {
+      display: flex;
+      flex-direction: column; }
+      #home aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
+        display: inline-flex; }
+        #home aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
+          display: block;
+          font-size: small;
+          font-weight: 800; }
+        #home 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; }
+      #home aside .views-field-field-pieces-jointes .field-content span {
+        font-size: small;
+        font-weight: 800; }
+        #home aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
+          margin-left: 50px;
+          align-self: center; }
+
 .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
   grid-column: 3 /span 9;
   grid-row: 1;
@@ -322,7 +574,7 @@ header {
         display: flex;
         flex-direction: column; } }
     .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo {
-      grid-column: 1 /span 2;
+      grid-column: 1 / 3;
       grid-row: 1 /span 3;
       padding-right: 1rem;
       margin: auto; }
@@ -336,10 +588,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;
@@ -347,6 +605,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; }
@@ -361,49 +622,83 @@ header {
 #presentation {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(12, 1fr); }
-  grid-gap: 10px; }
+  #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 {
+    order: 2;
+    border-top: 2px solid #0732c2;
+    padding-top: 0.3rem; }
+    #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes {
+      display: flex;
+      flex-direction: row; }
+      #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes::before {
+        content: url(../images/noun-arrow-download.svg);
+        padding-right: 00.3rem; }
+      #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content {
+        display: flex;
+        flex-direction: column;
+        font-size: 0.6rem;
+        font-weight: 800; }
+        #presentation #block-quartiers-de-demain-views-block-statics-fields-block-1 .views-field-field-pieces-jointes .field-content span {
+          font-weight: 400; }
   #presentation .layout-content {
     grid-row: 1;
     order: 2;
-    padding-top: 3rem;
+    padding-top: 3rem; }
-    padding-bottom: 6rem; }
-    @media (max-width: 891px) {
-      #presentation .layout-content {
-        width: 90%; } }
     @media (max-width: 500px) {
       #presentation .layout-content {
         padding-top: 0; } }
     #presentation .layout-content .content_container {
-      display: flex; }
+      display: flex;
+      margin-bottom: 0; }
       #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
         display: none; }
       #presentation .layout-content .content_container article.node-type-static {
         width: 100%; }
         #presentation .layout-content .content_container article.node-type-static .field_body {
           padding-left: 20%;
-          width: 80%; }
+          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%;
+              padding-right: 10%; } }
           #presentation .layout-content .content_container article.node-type-static .field_body h2 {
             font-size: 0.8rem;
             font-weight: 600;
             margin-bottom: 0; }
-          #presentation .layout-content .content_container article.node-type-static .field_body p {
+          #presentation .layout-content .content_container article.node-type-static .field_body img {
-            margin-top: 0; }
+            width: 100%;
+            height: auto; }
         #presentation .layout-content .content_container article.node-type-static .paragraph {
-          padding-top: 1rem;
+          padding-top: 2rem;
-          padding-bottom: 1rem;
+          padding-bottom: 2rem;
           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%;
+              padding-right: 10%; } }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title {
           text-transform: uppercase;
           font-size: 1rem;
-          font-weight: 300; }
+          font-weight: 400; }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
           color: #0732c2; }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title {
           color: #f7002b; }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
           background-color: #e8ebf4; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 {
+          padding-top: 1rem; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 {
+          padding-bottom: 1rem; }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
           text-align: center; }
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 {
@@ -411,20 +706,47 @@ header {
           flex-direction: column; }
           #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title {
             width: 60%;
-            margin: auto; }
+            margin: auto;
+            padding-bottom: 1rem; }
           #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 {
+              display: flex;
+              flex-direction: column;
               padding-right: 30px;
               text-align: left;
-              color: #0732c2; }
+              color: #0732c2;
-        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
+              width: calc(100vw / 3); }
-          display: flex;
+              @media (max-width: 500px) {
-          flex-direction: row; }
+                #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
-          #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;
-            padding-right: 30px;
+                  text-align: center; } }
-            text-align: left; }
+              #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p img {
+                width: 70%;
+                height: auto;
+                padding-bottom: 1rem; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
+          padding-bottom: 4rem; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
+            padding-bottom: 1rem; }
+          #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 {
+              width: calc(100vw / 3);
+              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 {
@@ -432,49 +754,58 @@ header {
           float: inline-start;
           padding-right: 0.5rem; }
           #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
-            width: 50px;
+            width: 40px;
-            height: auto; }
+            height: auto;
-  #presentation aside {
+            margin: auto; }
-    position: relative;
+            @media (max-width: 891px) {
-    grid-column: 1 /span 2;
+              #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
-    grid-row: 1;
+                width: 30px; } }
-    z-index: 100;
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
-    order: 1;
+          width: -moz-available;
-    margin-top: 5rem; }
+          width: 100%;
-    @media (max-width: 891px) {
+          height: auto;
-      #presentation aside {
+          cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
-        margin-left: 5%;
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
-        margin-top: 9rem; } }
+            filter: brightness(75%);
-    @media (max-width: 500px) {
+            transition: 0.2s; }
-      #presentation aside {
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in {
-        width: 80%;
+          -ms-transform: scale(1.7);
-        margin-top: 3rem; } }
+          /* IE 9 */
-    #presentation aside .sidebar_first_container {
+          -webkit-transform: scale(1.7);
-      position: -webkit-sticky;
+          /* Safari 3-8 */
-      position: sticky;
+          transform: scale(1.7);
-      top: 10rem; }
+          max-width: 100vw;
-      @media (max-width: 810px) {
+          overflow-x: scroll; }
-        #presentation aside .sidebar_first_container {
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
-          display: none; } }
+            filter: brightness(100%);
-    #presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
+            transition: 0.2s;
-      content: url(../images/noun-arrow-download.png); }
+            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 {
+.presentation footer span.totop {
-  grid-column: 3 /span 9;
+  display: inline-flex;
-  grid-row: 1;
+  width: 100vw;
-  margin-top: 3rem; }
+  background: #e8ebf4; }
-  .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
-    text-transform: uppercase;
-    color: #f7002b;
-    font-size: 1.6rem;
-    font-weight: 300; }
 
-.node-type-static .layout-content .content_container article.node-type-static {
+.node-type-static .layout-content {
-  grid-column: 3 /span 9;
+  grid-row: 1; }
-  grid-row: 2; }
+  .node-type-static .layout-content .content_container {
-  .node-type-static .layout-content .content_container article.node-type-static div.field_body h2 {
+    margin-bottom: 3rem; }
-    font-size: 0.8rem;
+    .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
-    font-weight: 600;
+      grid-column: 3 /span 9;
-    margin-bottom: 0; }
+      grid-row: 1;
-  .node-type-static .layout-content .content_container article.node-type-static div.field_body p {
+      margin-top: 3rem; }
-    margin-top: 0; }
+      .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
+        text-transform: uppercase;
+        color: #f7002b;
+        font-size: 1.6rem;
+        font-weight: 300; }
+    .node-type-static .layout-content .content_container article.node-type-static {
+      grid-column: 3 /span 9;
+      grid-row: 2; }
+      .node-type-static .layout-content .content_container article.node-type-static div.field_body h2 {
+        font-size: 0.8rem;
+        font-weight: 600;
+        margin-bottom: 0; }
+      .node-type-static .layout-content .content_container article.node-type-static div.field_body p {
+        margin-top: 0; }

web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg

@@ -2,16 +2,44 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="210mm"
+   width="15mm"
-   height="296.99997mm"
+   height="15mm"
-   viewBox="0 0 210 296.99997"
+   viewBox="0 0 10.531931 10.531931"
    version="1.1"
    id="svg1"
+   inkscape:export-filename="noun-arrow-download.svg"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="noun-arrow-download.svg"
+   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">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.72337262"
+     inkscape:cx="8.9856871"
+     inkscape:cy="215.65649"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="36"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
   <defs
      id="defs1" />
   <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
      id="layer1"
      transform="translate(-102.65834,-91.281253)">
     <circle

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>

web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js

@@ -37,6 +37,62 @@
         $('.header_nav_container').fadeOut();
     });
 
-});
   
-  
+
+// // /////////////////
+// //// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
+
+
+(function($, window) {
+  var adjustAnchor = function() {
+      var $anchor = $('.sidebar_first_container'),
+              fixedElementHeight = 350;
+      if ($anchor.length > 0) {
+          $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
+      }
+  };
+
+  $(window).on('hashchange', function() {
+      adjustAnchor();
+  });
+
+})(jQuery, window);
+  
+
+
+//////////// 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() {
+
+}

web/themes/custom/quartiers_de_demain/scss/global/_layout.scss

@@ -1,5 +1,8 @@
 
 $header-height : 150px;
+$header-height-pad : 110px;
+$header-height-small : 70px;
+$header-height-ultrasmall : 50px;
 $width-menu-slidedown : 550px; 
 
 .layout-container {

web/themes/custom/quartiers_de_demain/scss/pages/_home.scss

@@ -0,0 +1,200 @@
+
+#home{
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 10px;
+    .layout-content{
+        // grid-column: 3 / 11;
+        grid-row: 1;
+        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;
+        }
+        .content_container{
+            display: flex;
+            #block-quartiers-de-demain-titredepage{
+                display: none;
+            }
+
+            article.node-type-static{
+                width: 100%;
+    
+                .field_body{
+                    padding-left: 20%;
+                    padding-right: 20%;
+                    @media (max-width:640px) { 
+                        padding-left: 10%;
+                        padding-right: 10%;
+                    }
+
+                    // width: 80%;
+                    h2{
+                        font-size: $font-medium;
+                        font-weight: 600;
+                        margin-bottom: 0;
+                    }
+                    img{
+                        width: 100%;
+                        height: auto;
+                    }
+                    p{
+                        margin-top: 0;
+                    }
+                }
+                .paragraph{
+                    padding-top: 1rem;
+                    padding-bottom: 1rem;
+                    padding-left: 20%;
+                    padding-right: 20%;
+                    @media (max-width:640px) { 
+                        padding-left: 10%;
+                        padding-right: 10%;
+                    }
+
+                }
+                .field_field_textes{
+                    .field_field_title{
+                        text-transform: uppercase;
+                        font-size: $font-big;
+                        font-weight: 400;
+                    }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7,  #paragraph-id--8{
+                        .field_field_title{
+                            color: $blue_QDD;
+                        }
+                    }
+                    #paragraph-id--3, #paragraph-id--4{
+                        .field_field_title{
+                            color: $red_QDD;
+                        }
+                    }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4,  #paragraph-id--6, #paragraph-id--8{
+                        background-color: $bleu_fond_header;
+                    }
+                    #paragraph-id--7, #paragraph-id--8{
+                        text-align: center;
+                    }
+                    
+                    #paragraph-id--7{
+                        display: flex;
+                        flex-direction: column;
+                        .field_field_title{
+                            width: 60%;
+                            margin: auto;
+                        }
+                        .field_field_texte div:nth-child(2){
+                            display: flex;
+                            flex-direction: row;
+                            p{
+                                padding-right: 30px;
+                                text-align: left;
+                                color: $blue_QDD;
+                            }
+                        }
+                    }
+
+                    #paragraph-id--8{
+                        .field_field_texte div:nth-child(2){
+                            display: flex;
+                            flex-direction: row;
+                            p{
+                                padding-right: 30px;
+                                text-align: left;
+                            }
+                        }
+                    }
+                    p{
+                        margin-bottom: 0;
+                        // padding-bottom: 1.5rem;
+                    }    
+                    .field_field_picto{
+                        height: auto;
+                        float: inline-start;
+                        padding-right: 0.5rem;
+                        img{
+                            width: 40px;
+                            height: auto;
+                            @media(max-width: 891px){
+                                width: 30px;
+                            }
+                        }
+                    }
+                    #paragraph-id--9{
+                        img{
+                            width: -moz-available;
+                            height: auto;   
+                            cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; 
+                        }
+                    }
+                }
+            }
+        }
+    }    
+
+    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/pages/_partenaires.scss

@@ -34,7 +34,7 @@
                         flex-direction: column;
                     }
                     .field_field_logo{
-                        grid-column: 1 /span 2;
+                        grid-column: 1 / 3;
                         grid-row:  1 /span 3;
                         padding-right: 1rem;
                         margin: auto;
@@ -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;

web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss

@@ -3,23 +3,45 @@
     width: 100%;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
-    grid-gap: 10px;
+    // grid-gap: 10px;
+
+    #block-quartiers-de-demain-views-block-statics-fields-block-1{
+        order: 2;
+        border-top: 2px solid $blue_QDD;
+        padding-top: 0.3rem;
+        .views-field-field-pieces-jointes{
+            display: flex;
+            flex-direction: row;
+            &::before{
+                content: url(../images/noun-arrow-download.svg);
+                padding-right: 00.3rem;
+            }
+            .field-content{
+                display: flex;
+                flex-direction: column;
+                font-size: 0.6rem;
+                font-weight: 800;
+                span{
+                    font-weight: 400;
+                }
+                
+            }
+        }
+
+    }
+    
     .layout-content{
         // grid-column: 3 / 11;
         grid-row: 1;
         order: 2;
         padding-top: 3rem;
-        padding-bottom: 6rem;
+        // padding-bottom: 6rem;
-        // width: 70%;
-        // margin: auto;
-        @media(max-width: 891px){
-            width: 90%;
-        }
         @media (max-width:500px) {
             padding-top: 0;
         }
         .content_container{
             display: flex;
+            margin-bottom: 0;
             #block-quartiers-de-demain-titredepage{
                 display: none;
             }
@@ -29,28 +51,49 @@
     
                 .field_body{
                     padding-left: 20%;
-                    width: 80%;
+                    padding-right: 20%;
+                    @media (max-width:810px) { 
+                        padding-left: 13%;
+                        padding-right: 13%;
+                    }
+                    @media (max-width:640px) { 
+                        padding-left: 10%;
+                        padding-right: 10%;
+                    }
+
+                    // width: 80%;
                     h2{
                         font-size: $font-medium;
                         font-weight: 600;
                         margin-bottom: 0;
                     }
+                    img{
+                        width: 100%;
+                        height: auto;
+                    }
                     p{
-                        margin-top: 0;
+                        // margin-top: 0;
                     }
                 }
                 .paragraph{
-                    padding-top: 1rem;
+                    padding-top: 2rem;
-                    padding-bottom: 1rem;
+                    padding-bottom: 2rem;
                     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%;
+                    }
                 }
                 .field_field_textes{
                     .field_field_title{
                         text-transform: uppercase;
                         font-size: $font-big;
-                        font-weight: 300;
+                        font-weight: 400;
                     }
                     #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7,  #paragraph-id--8{
                         .field_field_title{
@@ -65,6 +108,13 @@
                     #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4,  #paragraph-id--6, #paragraph-id--8{
                         background-color: $bleu_fond_header;
                     }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4{
+                        padding-top: 1rem;
+                    }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3{
+                        padding-bottom: 1rem;
+                    }
+
                     #paragraph-id--7, #paragraph-id--8{
                         text-align: center;
                     }
@@ -75,26 +125,56 @@
                         .field_field_title{
                             width: 60%;
                             margin: auto;
+                            padding-bottom: 1rem;
                         }
                         .field_field_texte div:nth-child(2){
                             display: flex;
                             flex-direction: row;
+                            @media(max-width: 500px){
+                                flex-direction: column;
+                            }
                             p{
+                                display: flex;
+                                flex-direction: column;
                                 padding-right: 30px;
                                 text-align: left;
                                 color: $blue_QDD;
+                                width: calc(100vw / 3);
+                                @media(max-width: 500px){
+                                    padding-right: 0px;
+                                    text-align: center;
+                                }
+                                img{
+                                    width: 70%;
+                                    height: auto;
+                                    padding-bottom: 1rem;
+                                }
                             }
-                    }
+                        }
+                        
                     }
 
                     #paragraph-id--8{
+                        padding-bottom: 4rem;
+                        .field_field_title{
+                            padding-bottom: 1rem;
+                        }
+                        
                         .field_field_texte div:nth-child(2){
-                                display: flex;
+                            display: flex;
-                                flex-direction: row;
+                            flex-direction: row;
-                                p{
+                            @media(max-width: 500px){
-                                    padding-right: 30px;
+                                flex-direction: column;
-                                    text-align: left;
+                            }
+                            p{
+                                width: calc(100vw / 3);
+                                padding-right: 30px;
+                                text-align: left;
+                                @media(max-width: 500px){
+                                    padding-right: 0px;
+                                    text-align: center;
                                 }
+                            }
                         }
                     }
                     p{
@@ -106,56 +186,53 @@
                         float: inline-start;
                         padding-right: 0.5rem;
                         img{
-                            width: 50px;
+                            width: 40px;
                             height: auto;
+                            margin: auto;
+                            @media(max-width: 891px){
+                                width: 30px;
+                            }
+                        }
+                    }
+                    #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;
-            // width: 80%;
-            order: 1;
-            margin-top: 5rem;
-            // margin-left: 10%;
-            // margin-right: 1rem;
-            @media(max-width:891px){
-                margin-left: 5%;
-                margin-top: 9rem;
-            }
-            @media (max-width:500px) {
-                width: 80%;
-                margin-top: 3rem;
-            }
-            .sidebar_first_container{
-                // display: flex;
-                // justify-content: flex-end;
-                position: -webkit-sticky;
-                position: sticky;
-                top: 10rem;
-                @media (max-width: 810px){
-                    display: none;
-                }
-            }
-            .views-field-field-pieces-jointes{
-                .field-content{
-                    .file--application-pdf{
-                        &::before{
-                            content: url(../images/noun-arrow-download.png);
-                        }
-                    }
-                }
-            }
-        }
-    
-            
 }       
-        
+.presentation footer{
+    span.totop {
+        display: inline-flex;
+        width: 100vw;
+        background: $bleu_fond_header;
+    }
+}          
     
 
 

web/themes/custom/quartiers_de_demain/scss/pages/_static.scss

@@ -1,8 +1,9 @@
 .node-type-static{
     .layout-content{
         // grid-column: 1 / span 12;
+        grid-row: 1;
         .content_container{
-
+            margin-bottom: 3rem;
             #block-quartiers-de-demain-titredepage{
                 grid-column: 3 /span 9;
                 grid-row: 1;
@@ -34,3 +35,4 @@
     }
    
 }
+

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

@@ -1,13 +1,64 @@
 .layout-sidebar-first{
     display: flex;
     justify-content: end;
-    .sidebar_first_container{
+    position: relative;
+    grid-column: 1 /span 2;
+    grid-row: 1;
+    z-index: 98;
+    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{
+        display: flex;
+        flex-direction: column;
+        width: 80%;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 10rem;
+        font-weight: 400;
+        .field-content{
+            margin-bottom: 0.7rem;
+        }
+        @media (max-width: 810px){
+            display: none;
+        }
         
         #block-quartiers-de-demain-views-block-statics-block-1{
+            order: 1;
             text-transform: uppercase;
         }
+        // #block-quartiers-de-demain-views-block-statics-fields-block-1{
+        //     order: 2;
+        //     border-top: 2px solid $blue_QDD;
+        //     padding-top: 0.3rem;
+        //     .views-field-field-pieces-jointes{
+        //         display: flex;
+        //         flex-direction: row;
+        //         &::before{
+        //             content: url(../images/noun-arrow-download.svg);
+        //             padding-right: 00.3rem;
+        //         }
+        //         .field-content{
+        //             display: flex;
+        //             flex-direction: column;
+        //             font-size: 0.6rem;
+        //             font-weight: 800;
+        //             span{
+        //                 font-weight: 400;
+        //             }
+                    
+        //         }
+        //     }
+
+        // }
     
     
     }   
-}
+}

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

@@ -1,18 +1,54 @@
+footer{
+    span.totop {
+        display: inline-flex;
+        width: 100vw;
+        // background: $bleu_fond_header;
+        #toTop{
+            margin: auto;
+            background-color: #fff;
+            border-top-left-radius: 10%;
+            border-top-right-radius: 10%;
+            padding-bottom: 0.5rem;
+            .fa-arrow-up{
+                font-size: 1.7rem;
+                line-height: 2.5rem;
+                text-align: center;
+                // background: $footer-bg;
+                width: 3rem;
+                height: 2rem;
+                display: inline-block;
+                text-align: top;
+                .fa{
+                    color: #fff;
+                }    
+            }
+
+        }
+    }
+}
 .footer{
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: repeat(1, 1fr);
     background-color: $white-header;
     padding-top: 1rem;
+    padding-bottom: 1rem;
     section{width: fit-content;}
     h2, ul{margin: 0;}
     border-top: 1px solid #808080;
+    @media(max-width: 891px){
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+    @media(max-width: 600px){
+        flex-wrap: nowrap;
+    }    
 
-    
     #footer-left{
         grid-column: 1 /span 5;
         grid-row: 1;
-        padding-left: 40px;
+        padding-left: 5%;
         .footer_left_container{
             display: flex;
             flex-direction: row;
@@ -20,11 +56,23 @@
 
             }
             #block-quartiers-de-demain-logoepau{
-            height: $header-height;
+                height: $header-height;
+                @media(max-width: 891px){
+                    height: $header-height-pad;
+                }
             }
             img{
                 width: auto;
-                    height: $header-height;
+                height: $header-height;
+                @media(max-width: 891px){
+                    height: $header-height-pad;
+                }
+                @media(max-width: 660px){
+                    height: $header-height-small;
+                }
+                @media(max-width: 450px){
+                    height: $header-height-ultrasmall;
+                }
             }
         }
  
@@ -36,6 +84,11 @@
             ul li{
                 padding-bottom: 0.2rem;
             }
+            @media(max-width: 891px){
+             ul{
+                 padding-left: 00.5rem;
+             }
+            }
         }
     }
     #footer-right{
@@ -50,10 +103,13 @@
                 font-weight: 400;
                 &::before{
                     content: "Nous contacter";
-                    padding-bottom: 1rem;
+                    padding-bottom: 0.6rem;
                     font-weight: 600;
                 }
-                padding-bottom: 1rem;
+                padding-bottom: 0.6rem;
+            }
+            .fa-3x{
+                font-size: 2em;
             }
         }
     }

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

@@ -3,7 +3,7 @@ header{
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 10px;
     grid-template-rows: repeat(3, 1fr);
-    height: 150px;
+    height: $header-height;
     background-color: $white-header;
     z-index: 99;
     width: 100vw;
@@ -13,8 +13,16 @@ header{
     position: relative;
     top: 0;
     border-bottom: 1px solid #808080;
-    @media (max-width:800px) {
+    @media (max-width:810px) {
-            width: 800px;
+            // width: 800px;
+            height: $header-height-pad;
+    }
+    @media(max-width: 660px){
+        height: $header-height-small;
+    }
+    @media(max-width: 450px){
+        display: flex;
+        height: $header-height-ultrasmall;
     }
     .contextual-region{
         width: max-content;
@@ -26,27 +34,55 @@ header{
          display: flex;
          flex-direction: row;
          border-right: 1px solid #808080;
-         padding-left: 40px;
+         padding-left: 2%;
+         padding-right: 2%;
+         @media(max-width: 660px){
+            height: inherit;
+        }
 
          #block-quartiers-de-demain-logorepu-2{
+            @media(max-width: 891px){
+                height: $header-height-pad;
+            }
          }
          #block-quartiers-de-demain-logoepau-2{
             height: $header-height;
+            @media(max-width: 891px){
+                height: $header-height-pad;
+            }
+         }
+         #block-quartiers-de-demain-logoquartiersdedemain{
+             margin-left: auto;
+            //  padding-right: 5%;
          }
          img{
              width: auto;
              height: $header-height;
+             @media(max-width: 891px){
+                height: $header-height-pad;
+            }
+            @media(max-width: 660px){
+                height: $header-height-small;
+            }
+            @media(max-width: 450px){
+                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: "/";
@@ -65,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;
-
+        text-align: center;
-
-
         #block-quartiers-de-demain-entete{
             grid-column: 1 /span 11;
             order: 2;
@@ -84,6 +116,9 @@ header{
             h2{
                 display: none;
             }
+            @media(max-width: 660px){
+
+            }
         }
     }
     
@@ -104,6 +139,9 @@ header{
             background: black;
             border-radius: 3px;
             z-index: 1;
+            @media(max-width: 660px){
+                width: 25px;
+            }
         }
     }
     .open-block{
@@ -111,10 +149,17 @@ header{
         display: grid;
         align-items: center;
         margin: auto;
+        @media(max-width: 450px){
+            height: $header-height-ultrasmall;
+        }
         span{
             margin-bottom: 13px;	
             transform-origin: 4px 0px;
+            @media(max-width: 660px){
+                margin-bottom: 5px;
+            }
         }
+
     }
     .open-block.opened {
         margin: auto;

web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss

@@ -26,7 +26,7 @@
 
 
 /*pages*/
-
+@import "pages/home";
 @import "pages/partenaires";
 @import "pages/presentation";
 @import "pages/static";

web/themes/custom/quartiers_de_demain/templates/--paragraph--static-parts.html.twig

@@ -1,4 +1,4 @@
-{#
+{# 
 /**
  * @file
  * Default theme implementation to display a paragraph.
@@ -52,7 +52,7 @@
 {% block paragraph %}
   {# <div{{ attributes.addClass(classes) }}> #}
     <div{{ attributes.addClass(classes) }}>
-      <a href="{{ ancre_href }}">
+      {# <a href="{{ ancre_href }}"> #}
         {% block content %}
           {{ content }}
         {% endblock %}

web/themes/custom/quartiers_de_demain/templates/field--field-textes.html.twig

@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+{%
+  set ancre_href = '#field-id--' ~ field.id()
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes }}>
+      {% for item in items %}
+        <div{{ item.attributes }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      {# <div{{ attributes }}>{{ item.content }}</div> #}
+          <div{{ attributes.addClass(classes).setAttribute('id', 'field-id--' ~ field.id()) }}>{{ item.content }}</div>
+
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div>
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/quartiers_de_demain/templates/field.html.twig

@@ -47,7 +47,9 @@
     label_display == 'visually_hidden' ? 'visually-hidden',
   ]
 %}
-
+{%
+  set ancre_href = '#paragraph-id--' ~ paragraph.id()
+%}
 {% if label_hidden %}
   {% if multiple %}
     <div{{ attributes }}>

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 }}>
     {#

web/themes/custom/quartiers_de_demain/templates/page--front.html.twig

@@ -0,0 +1,92 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a single Drupal page.
+ *
+ * The doctype, html, head, and body tags are not in this template. Instead
+ * they can be found in the html.html.twig template normally located in the
+ * core/modules/system directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.pre_content: Items for the pre-content region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+<div class="layout-container" >
+
+  <header role="banner">
+    {{ page.header_left }}
+    {{ page.header_right }}
+    {{ page.header_nav }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main" id="home">
+    {# <a id="main-content" tabindex="-1"></a>link is in html.html.twig #}
+
+    <div class="layout-content">
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+  {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
+    <footer role="contentinfo">
+      {# <section id="footer-top">{{ page.footer_top }}</section>  #}
+      <div class="footer">
+        <section id="footer-left">{{ page.footer_left }}</section> 
+        <section id="footer-middle">{{ page.footer_middle }}</section> 
+        <section id="footer-right">{{ page.footer_right }}</section> 
+      </div> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
+    </footer>
+  {# {% endif %} #}
+
+</div>{# /.layout-container #}

web/themes/custom/quartiers_de_demain/templates/page--node--6.html.twig

@@ -39,7 +39,7 @@
  * @see html.html.twig
  */
 #}
-<div class="layout-container" >
+<div class="layout-container presentation" >
 
   <header role="banner">
     {{ page.header_left }}
@@ -79,7 +79,9 @@
 
   {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
-      {# <section id="footer-top">{{ page.footer_top }}</section>  #}
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
+      {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
         <section id="footer-middle">{{ page.footer_middle }}</section> 

web/themes/custom/quartiers_de_demain/templates/page--partenaires.html.twig

@@ -79,7 +79,9 @@
 
   {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
-      {# <section id="footer-top">{{ page.footer_top }}</section>  #}
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
+      {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
         <section id="footer-middle">{{ page.footer_middle }}</section> 

web/themes/custom/quartiers_de_demain/templates/page.html.twig

@@ -79,7 +79,9 @@
 
   {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
     <footer role="contentinfo">
-      {# <section id="footer-top">{{ page.footer_top }}</section>  #}
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
+      {# </section>  #}
       <div class="footer">
         <section id="footer-left">{{ page.footer_left }}</section> 
         <section id="footer-middle">{{ page.footer_middle }}</section> 

web/themes/custom/quartiers_de_demain/templates/paragraph.html.twig

@@ -46,10 +46,12 @@
     not paragraph.isPublished() ? 'paragraph--unpublished'
   ]
 %}
+
 {% block paragraph %}
   {# <div{{ attributes.addClass(classes) }}> #}
     <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
-    {% block content %}
+
+{% block content %}
       {{ content }}
     {% endblock %}
   </div>

web/themes/custom/quartiers_de_demain/templates/views-view-fields.html.twig

@@ -0,0 +1,67 @@
+{#
+/**
+ * @file
+ * Default view template to display all the fields in a row.
+ *
+ * Available variables:
+ * - view: The view in use.
+ * - fields: A list of fields, each one contains:
+ *   - content: The output of the field.
+ *   - raw: The raw data for the field, if it exists. This is NOT output safe.
+ *   - class: The safe class ID to use.
+ *   - handler: The Views field handler controlling this field.
+ *   - inline: Whether or not the field should be inline.
+ *   - wrapper_element: An HTML element for a wrapper.
+ *   - wrapper_attributes: List of attributes for wrapper element.
+ *   - separator: An optional separator that may appear before a field.
+ *   - label: The field's label text.
+ *   - label_element: An HTML element for a label wrapper.
+ *   - label_attributes: List of attributes for label wrapper.
+ *   - label_suffix: Colon after the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ *   - has_label_colon: A boolean indicating whether to display a colon after
+ *     the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ * - row: The raw result from the query, with all data it fetched.
+ *
+ * @see template_preprocess_views_view_fields()
+ *
+ * @ingroup themeable
+ */
+#}
+
+
+
+
+{% for field in fields -%}
+  {{ field.separator }}
+  {%- if field.wrapper_element -%}
+    <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
+  {%- endif %}
+  {%- if field.label -%}
+    {%- if field.label_element -%}
+      <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
+    {%- else -%}
+      {{ field.label }}{{ field.label_suffix }}
+    {%- endif %}
+  {%- endif %}
+  {%- if field.element_type -%}
+
+    <{{ field.element_type }}{{ field.element_attributes }}>
+    {# Vérifiez d'abord si le champ contient des données #}
+{% if row._entity.static_parts is not empty %}
+  {# Accédez à l'ID du paragraphe #}
+  {% set paragraph_id = row._entity.static_parts.entity.id() %}
+{% endif %}
+      {# Créez le lien d'ancrage avec l'ID du paragraphe #}
+      <a href="#{{ paragraph_id }}">{{ field.content }}</a>
+    </{{ field.element_type }}>
+  {%- else -%}
+    {{ field.content }}
+  {%- endif %}
+  {%- if field.wrapper_element -%}
+    </{{ field.wrapper_element }}>
+  {%- endif %}
+{%- endfor %}