fix tamporaire bug actu carroussel =responsive

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -202,7 +202,7 @@ h2, h3 {
 }
 @media (max-width: 810px) {
   .layout-container main#home {
-    padding-top: 380px;
+    padding-top: 300px;
   }
 }
 @media (max-width: 810px) {
@@ -432,17 +432,17 @@ header .header_nav_container {
   transform: translateX(0);
   transition: transform 0.3s ease-in-out;
   z-index: -1;
-}
+  display: flex;
-@media (max-width: 1090px) {
+  flex-direction: column;
-  header .header_nav_container {
-    height: fit-content;
-  }
 }
 @media (max-width: 500px) {
   header .header_nav_container {
     flex: 0 0 40%;
   }
 }
+header .header_nav_container #block-quartiers-de-demain-entete {
+  margin: auto;
+}
 header .header_nav_container #block-quartiers-de-demain-entete h2 {
   display: none;
 }
@@ -564,7 +564,6 @@ header .header:hover + .header_nav_container {
     flex: 1 0 100%;
     position: relative;
     left: -100%;
-    top: -45px;
   }
 }
 
@@ -607,7 +606,11 @@ header .header:hover + .header_nav_container {
     flex: 1 0 100%;
     position: relative;
     left: -100%;
-    top: -75px;
+  }
+}
+@media (max-width: 550px) {
+  .header--collapsed-already .header_nav_container {
+    top: 0px;
   }
 }
 
@@ -1511,9 +1514,19 @@ footer {
 #actus-caroussel button {
   top: -2.5rem;
 }
+@media (max-width: 810px) {
+  #actus-caroussel button {
+    top: -1.5rem;
+  }
+}
 #actus-caroussel .content-actus .slick-list {
   padding-bottom: 4rem;
 }
+@media (max-width: 810px) {
+  #actus-caroussel .content-actus .slick-list {
+    padding-bottom: 0rem;
+  }
+}
 #actus-caroussel .content-actus .view {
   display: flex;
   flex-direction: row;
@@ -3171,8 +3184,11 @@ body {
 #page-node .content_container .node-type-actualite {
   width: 100%;
   padding-bottom: 7rem;
+  display: flex;
+  flex-direction: column;
 }
 #page-node .content_container .node-type-actualite .infos-actu {
+  order: 1;
   display: flex;
   flex-direction: row;
   border-top: solid red 1px;
@@ -3203,12 +3219,14 @@ body {
   padding-right: 0.4rem;
 }
 #page-node .content_container .node-type-actualite .field_body {
+  order: 2;
   padding-bottom: 2rem;
 }
 #page-node .content_container .node-type-actualite .field_body p {
   font-size: 0.8rem;
 }
 #page-node .content_container .node-type-actualite .field_field_liens {
+  order: 3;
   padding-bottom: 2rem;
 }
 #page-node .content_container .node-type-actualite .field_field_liens a {
@@ -3229,6 +3247,12 @@ body {
   padding-right: 0.2rem;
   padding-left: 0.2rem;
 }
+#page-node .content_container .node-type-actualite .field_field_liens a:not(.ext) {
+  display: none;
+}
+#page-node .content_container .node-type-actualite .field_field_images {
+  order: 5;
+}
 #page-node .content_container .node-type-actualite .field_field_images img {
   width: 100%;
   height: auto;

web/themes/custom/quartiers_de_demain/dist/assets/img/rect4.svg

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="1801.0212"
+   height="4029.4231"
+   viewBox="0 0 1801.0212 4029.4232"
+   sodipodi:docname="formes-animees.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:page
+       x="0"
+       y="0"
+       width="1801.0212"
+       height="4029.4231"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath258">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1095.6993,-8098.7595)"
+         id="path258" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath301">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1476.5001,-5895.4337)"
+         id="path301" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath303">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1623.8512,-4272.9005)"
+         id="path303" />
+    </clipPath>
+  </defs>
+  <g
+     id="g2"
+     transform="translate(-299.16899,-2519.6031)">
+    <g
+       id="g1"
+       transform="translate(0.17944336,-2.9196463)">
+      <path
+         id="path256"
+         d="m 321.27266,3336.1817 182.91889,175.8201"
+         style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         inkscape:export-filename="formes-animees.svg"
+         inkscape:export-xdpi="300"
+         inkscape:export-ydpi="300" />
+      <path
+         id="path256-3"
+         d="m 1852.1683,6336.9184 -163.0856,194.3583"
+         style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         id="path257"
+         d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
+         style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(-0.80902482,0,0,-0.80902482,1743.8143,2885.2905)"
+         clip-path="url(#clipPath258)" />
+      <path
+         id="path300"
+         d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
+         style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.72647042,0,0,-0.72647042,1836.7965,4740.0583)"
+         clip-path="url(#clipPath301)" />
+      <path
+         id="path302"
+         d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
+         style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.82260013,0,0,-0.82260013,2025.1937,5635.4927)"
+         clip-path="url(#clipPath303)" />
+      <path
+         id="path311"
+         d="M 456.65311,5469.771 V 5209.7705"
+         style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+  <rect
+     style="fill:none;stroke:none;stroke-width:0;paint-order:fill markers stroke"
+     id="rect2"
+     width="1550.348"
+     height="114.74608"
+     x="122.31378"
+     y="-9.4031076e-13" />
+  <rect
+     style="fill:none;stroke:none;stroke-width:0;paint-order:fill markers stroke"
+     id="rect1"
+     width="1540.1483"
+     height="112.19624"
+     x="73.095963"
+     y="68.049309" />
+  <rect
+     style="fill:none;stroke-width:0;paint-order:stroke fill markers"
+     id="rect3"
+     width="1559.4871"
+     height="238.19258"
+     x="108.70975"
+     y="3395.3674" />
+  <rect
+     style="fill:none;stroke-width:0;paint-order:stroke fill markers"
+     id="rect4"
+     width="1801.0212"
+     height="252.14297"
+     x="1.3299257e-06"
+     y="4.5025892" />
+</svg>

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

@@ -45,7 +45,7 @@ $width-menu-slidedown : 550px;
                 
             
             @media(max-width: 810px){
-                padding-top: 380px;
+                padding-top: 300px;
             }
         }
     }

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss

@@ -33,7 +33,10 @@
             .node-type-actualite{
                 width: 100%;
                 padding-bottom: 7rem;
+                display: flex;
+                flex-direction: column;
                 .infos-actu{
+                    order: 1;
                     display: flex;
                     flex-direction: row;
                     border-top: solid red 1px;
@@ -65,12 +68,14 @@
         
                 }
                 .field_body {
+                    order: 2;
                     padding-bottom: 2rem;
                     p{
                     font-size: 0.8rem;
                     }
                 }
                 .field_field_liens{
+                    order: 3;
                     padding-bottom: 2rem;
                     a{
                         padding-left: 0.5rem;
@@ -91,9 +96,14 @@
                             
                         }
                     }
+                    
+                    a:not(.ext){
+                        display: none;
+                    }
                 }
 
                 .field_field_images{
+                    order: 5;
                     img{
                         width: 100%;
                         height: auto;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss

@@ -16,10 +16,16 @@
     }
     button{
         top: -2.5rem;
+        @media(max-width: 810px){
+            top: -1.5rem;
+        }
     }
     .content-actus{
         .slick-list{
             padding-bottom: 4rem;
+            @media(max-width: 810px){
+                padding-bottom: 0rem;
+            }
         }
         .view{
             display: flex;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss

@@ -184,14 +184,18 @@ header{
         transform: translateX(0);
         transition: transform 0.3s ease-in-out;
         z-index: -1 ;
+        display: flex;
+        flex-direction: column;
+
         @media(max-width: 1090px){
             // text-align:left;
-            height: fit-content;
+            // height: fit-content;
         }
         @media(max-width: 500px){
             flex: 0 0 40%;
         }
         #block-quartiers-de-demain-entete{
+            margin: auto;
             h2{
                 display: none;
             }
@@ -307,7 +311,7 @@ header{
             flex: 1 0 100%;
             position: relative;
             left: -100%;
-            top: -45px;
+            // top: -45px;  /* a remettre et faire varier si ajoute éléments dans menu */
 
         }
     }
@@ -343,7 +347,10 @@ header{
             flex: 1 0 100%;
             position: relative;
             left: -100%;
-            top: -75px;
+            // top: -75px;
+        }
+        @media(max-width: 550px){
+            top: 0px;
         }
     }
 

web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig

@@ -92,22 +92,17 @@
     {# {{ content }} #}
   {# </div> #}
   {% block content %}
-
+  <a href="{{ url }}" rel="bookmark">{{ label }}
-<a href="{{ url }}" rel="bookmark">{{ label }}
+  {{content.field_images}}
-{{content.field_images}}
   <div class="infos-actu">
     {{content.field_type_d_actualite}}
     {{content.field_date}}
   </div>
-    <h2{{ title_attributes }}>
-     
-    </h2>
     {{content.body}}
-    {{content.field_liens}}
+   {{content.field_liens}}
     
-    
+   
-    </a>
+</a>
-
   {% endblock %}
 
 </article>