taille fleches diap et taille fixe vignette

web/themes/custom/reha/dist/css/bundle.css

@@ -1150,10 +1150,10 @@ aside.layout-sidebar-second footer.view-footer :hover {
   right: 200px;
 }
 .slick-prev:before {
-  content: url("../../dist/images/grandes_fleches_prev.svg");
+  content: url("../../dist/images/moyennes_fleches_prev.svg");
 }
 [dir=rtl] .slick-prev:before {
-  content: url("../../dist/images/grandes_fleches_prev.svg");
+  content: url("../../dist/images/moyennes_fleches_prev.svg");
 }
 
 .slick-next {
@@ -1164,10 +1164,10 @@ aside.layout-sidebar-second footer.view-footer :hover {
   right: auto;
 }
 .slick-next:before {
-  content: url("../../dist/images/grandes_fleches_next.svg");
+  content: url("../../dist/images/moyennes_fleches_next.svg");
 }
 [dir=rtl] .slick-next:before {
-  content: url("../../dist/images/grandes_fleches_next.svg");
+  content: url("../../dist/images/moyennes_fleches_next.svg");
 }
 
 /* Dots */
@@ -1332,6 +1332,8 @@ aside.layout-sidebar-second footer.view-footer :hover {
   background-image: radial-gradient(white, transparent);
   border-radius: 50%;
   padding: 0.8rem;
+  padding-bottom: 1.8rem;
+  padding-top: 1.8rem;
   width: 120px;
   height: auto;
   top: 50%;
@@ -2172,6 +2174,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   align-items: baseline;
   justify-content: space-between;
 }
+@media (max-width: 1200px) {
+  .page-sitespilotes .view-display-id-page_1 {
+    justify-content: flex-start;
+  }
+}
 .page-sitespilotes .view-display-id-page_1 article {
   padding-bottom: 0.7rem;
 }
@@ -2179,6 +2186,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   width: 28%;
   padding: 1rem;
 }
+@media (max-width: 1200px) {
+  .page-sitespilotes .view-display-id-page_1 .views-row {
+    width: 40%;
+  }
+}
 .page-sitespilotes .view-display-id-page_1 .views-row:hover {
   transform: scale(1.05);
   transition: 0.3s transform ease, 0.3s box-shadow ease;
@@ -2199,7 +2211,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-sitespilotes .view-display-id-page_1 .views-row .node-type-site .entete_site .image-site .field--name-field-image img {
   width: 100%;
   object-fit: cover;
-  height: fit-content;
+  max-height: 200px;
 }
 .page-sitespilotes .view-display-id-page_1 .views-row .node-type-site .entete_site .infos-content-site {
   background-color: rgb(255, 255, 255);

web/themes/custom/reha/dist/images/moyennes_fleches_next.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="8.4272375mm"
+   height="17.259748mm"
+   viewBox="0 0 8.427237 17.259749"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="grandes_fleches_prev.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:page
+       x="2.5850003e-15"
+       y="0"
+       width="8.4272366"
+       height="17.259748"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="matrix(0.49488659,0,0,0.49488659,-67.815583,-66.980702)"
+     inkscape:export-filename="moyennes_fleches_prev.svg"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>

web/themes/custom/reha/dist/images/moyennes_fleches_prev.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="8.4272375mm"
+   height="17.259748mm"
+   viewBox="0 0 8.427237 17.259749"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="grandes_fleches_prev.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:page
+       x="2.5850003e-15"
+       y="0"
+       width="8.4272366"
+       height="17.259748"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="matrix(-0.49488659,0,0,0.49488659,76.242822,-66.980702)">
+    <path
+       style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+       d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
+       id="path1" />
+  </g>
+</svg>

web/themes/custom/reha/scss/pages/_les-sites-pilotes.scss

@@ -17,12 +17,18 @@
         flex-wrap: wrap;
         align-items: baseline;
         justify-content: space-between;
+        @media (max-width:1200px){
+            justify-content: flex-start;
+        }
         article{
             padding-bottom: 0.7rem;
         }
         .views-row{
             width: 28%;
             padding: 1rem;
+            @media (max-width:1200px){
+                width: 40%;
+            }
             &:hover{
                 transform: scale(1.05);
                 transition: 0.3s transform ease, 0.3s box-shadow ease;   
@@ -40,7 +46,8 @@
                             img{
                                 width: 100%;
                                 object-fit: cover;
-                                height: fit-content;
+                                // height: fit-content;
+                                max-height: 200px;
                             }
                         }
                     }

web/themes/custom/reha/scss/partials/_slick-theme.scss

@@ -111,12 +111,12 @@ $slick-opacity-not-active: 0.25 !default;
         right: 200px;
     }
     &:before {
-        content: url('../../dist/images/grandes_fleches_prev.svg');
+        content: url('../../dist/images/moyennes_fleches_prev.svg');
         // content: $slick-prev-character;
         // font-weight: lighter;
 
         [dir="rtl"] & {
-            content: url('../../dist/images/grandes_fleches_prev.svg');
+            content: url('../../dist/images/moyennes_fleches_prev.svg');
             // content: $slick-next-character;
             // font-weight: lighter;
 
@@ -131,12 +131,12 @@ $slick-opacity-not-active: 0.25 !default;
         right: auto;
     }
     &:before {
-        content: url('../../dist/images/grandes_fleches_next.svg');
+        content: url('../../dist/images/moyennes_fleches_next.svg');
         // content: $slick-next-character;
         // font-weight: lighter;
 
         [dir="rtl"] & {
-            content: url('../../dist/images/grandes_fleches_next.svg');
+            content: url('../../dist/images/moyennes_fleches_next.svg');
             // content: $slick-prev-character;
             // font-weight: lighter;
 

web/themes/custom/reha/scss/partials/_slick_custom.scss

@@ -18,6 +18,8 @@ $slick-arrow-color: $yellow-puca !default;
     background-image: radial-gradient(white, transparent);
     border-radius: 50%;
     padding: 0.8rem;
+    padding-bottom: 1.8rem;
+    padding-top: 1.8rem;
     width: 120px;
     height: auto;
     top: 50%;

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

@@ -77,6 +77,9 @@
       <aside class="layout-sidebar-second close" role="complementary">
         {{ page.sidebar_second }}
       </aside>
+      <h2{{ title_attributes }}>
+        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      </h2>
     {% endif %}
 
   </main>