css slick caroussel

web/themes/custom/eql/css-compiled/styles.css

@@ -414,148 +414,87 @@ a {
           .path-node.page-node-type-static .layout-container .layout-content .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource div ul.links.inline {
             display: none; }
 
-/* Slider */
-.slick-slider {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -ms-touch-action: pan-y;
-  touch-action: pan-y;
-  -webkit-tap-highlight-color: transparent; }
-
-.slick-list {
-  position: relative;
-  overflow: hidden;
-  display: block;
-  margin: 0;
-  padding: 0; }
-  .slick-list:focus {
-    outline: none; }
-  .slick-list.dragging {
-    cursor: pointer;
-    cursor: hand; }
-
-.slick-slider .slick-track,
-.slick-slider .slick-list {
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0); }
-
-.slick-track {
-  position: relative;
-  left: 0;
-  top: 0;
-  display: block;
-  margin-left: auto;
-  margin-right: auto; }
-  .slick-track:before, .slick-track:after {
-    content: "";
-    display: table; }
-  .slick-track:after {
-    clear: both; }
-  .slick-loading .slick-track {
-    visibility: hidden; }
-
-.slick-slide {
-  float: left;
-  height: 100%;
-  min-height: 1px;
-  display: none; }
-  [dir="rtl"] .slick-slide {
-    float: right; }
-  .slick-slide img {
-    display: block; }
-  .slick-slide.slick-loading img {
-    display: none; }
-  .slick-slide.dragging img {
-    pointer-events: none; }
-  .slick-initialized .slick-slide {
-    display: block; }
-  .slick-loading .slick-slide {
-    visibility: hidden; }
-  .slick-vertical .slick-slide {
-    display: block;
-    height: auto;
-    border: 1px solid transparent; }
-
-.slick-arrow.slick-hidden {
-  display: none; }
-
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
   width: 100vw;
+  height: 600px;
   border-bottom: 5px solid #009ee3;
   background: rgba(0, 158, 227, 0.2); }
-  .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages {
-    padding-top: 5rem; }
-    .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content {
-      display: flex;
-      flex-basis: auto; }
-      @media (max-width: 479px) {
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content {
-          display: flex;
-          flex-direction: column;
-          width: 80%; } }
-      .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row {
-        flex-basis: auto; }
-      .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite {
-        color: black;
-        line-height: 1.5rem;
-        padding: 0.5rem; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child {
-          display: flex;
-          flex-direction: column; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images {
-          order: 1; }
-          .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images .field__item img {
-            max-width: 95%;
-            max-height: 150px;
-            object-fit: cover;
-            width: 100%;
-            padding-bottom: 1rem; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date {
-          order: 2;
-          display: flex;
-          flex-direction: row;
-          justify-content: flex-start; }
-          .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date:not(:last-child):after {
-            padding-right: 1rem;
-            content: "|"; }
-          .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date time {
-            font-size: 0.9rem;
-            font-weight: 800;
-            padding-right: 1rem;
-            width: fit-content; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-title {
-          order: 3; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-sous-titre {
-          order: 4;
-          margin-top: 0.3rem;
-          font-weight: 800; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field:not(.field--name-field-images) {
-          width: 100%; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite h2 {
-          margin: 0; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite a {
-          color: black; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links {
-          padding-top: none !important;
-          list-style: none;
-          width: fit-content;
-          align-self: flex-end;
-          padding-right: 1rem; }
-          .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links a {
-            display: none; }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-actu-type {
-          order: 5;
-          padding-top: 1rem; }
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div {
+    height: 100%; }
+    .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages {
+      height: 100%; }
+      .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
+        height: 90%; }
+        @media (max-width: 479px) {
+          .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
+            display: flex;
+            flex-direction: column;
+            width: 80%; } }
+        .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite {
+          color: black;
+          line-height: 1.5rem;
+          width: 80%;
+          height: 600px;
+          margin: auto; }
+          .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
+            display: grid;
+            grid-template-columns: 1fr repeat(8, 1fr) 1fr; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images {
+              order: 1;
+              grid-column: 1 /span 5;
+              grid-row: 1 / span 6; }
+              .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img {
+                max-height: 450px;
+                object-fit: contain;
+                max-width: 700px; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date {
+              display: inline;
+              grid-column: 9 / span 7;
+              grid-row: 2;
+              order: 2;
+              flex-direction: row; }
+              .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date time {
+                font-size: 0.9rem;
+                font-weight: 800;
+                padding-right: 1rem;
+                width: fit-content; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu {
+              grid-column: 9 / span 9;
+              grid-row: 2; }
+              .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu .field__label {
+                display: none; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title {
+              display: inline-flex;
+              grid-column: 9 / span 9;
+              grid-row: 3;
+              order: 3; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre {
+              display: inline-block;
+              grid-column: 9 / span 9;
+              grid-row: 4;
+              order: 4;
+              margin-top: 0.3rem;
+              font-weight: 800; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field:not(.field--name-field-images) {
+              width: 100%; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child h2 {
+              margin: 0; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child a {
+              color: black; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links {
+              padding-top: none !important;
+              list-style: none;
+              width: fit-content;
+              align-self: flex-end;
+              padding-right: 1rem; }
+              .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links a {
+                display: none; }
+            .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type {
+              display: inline-block;
+              grid-column: 9 / span 7;
+              grid-row: 5;
+              order: 5;
+              padding-top: 1rem; }
 
 .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 {
   visibility: hidden; }
@@ -707,6 +646,9 @@ a {
               margin-top: 0.8rem;
               font-size: 0.7rem; }
 
+.path-frontpage .block-views-blockprojets-block-2 #leaflet-map-view-projets-block-2 {
+  height: 500px !important; }
+
 .node-id-20 {
   background: url("../images/pictos/carre-contour-bleu_partenaire.svg");
   background-repeat: no-repeat;
@@ -1101,7 +1043,8 @@ a {
           width: 25%; }
           .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource div .field--name-field-images img {
             width: 100%;
-            height: auto; }
+            height: auto;
+            margin: auto; }
         .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource div .field--name-field-mots-clefs {
           order: 6;
           display: flex;
@@ -4103,3 +4046,205 @@ a {
       #fotter-bottom .region-footer-bottom-middle .view-id-partenaires .view-content .node-type-partenaires_logo_footer_ {
         padding-right: 1rem;
         padding-bottom: 1rem; }
+
+/* Slider */
+.slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent; }
+
+.slick-list {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  padding: 0; }
+  .slick-list:focus {
+    outline: none; }
+  .slick-list.dragging {
+    cursor: pointer;
+    cursor: hand; }
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0); }
+
+.slick-track {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto; }
+  .slick-track:before, .slick-track:after {
+    content: "";
+    display: table; }
+  .slick-track:after {
+    clear: both; }
+  .slick-loading .slick-track {
+    visibility: hidden; }
+
+.slick-slide {
+  float: left;
+  height: 100%;
+  min-height: 1px;
+  display: none; }
+  [dir="rtl"] .slick-slide {
+    float: right; }
+  .slick-slide img {
+    display: block; }
+  .slick-slide.slick-loading img {
+    display: none; }
+  .slick-slide.dragging img {
+    pointer-events: none; }
+  .slick-initialized .slick-slide {
+    display: block; }
+  .slick-loading .slick-slide {
+    visibility: hidden; }
+  .slick-vertical .slick-slide {
+    display: block;
+    height: auto;
+    border: 1px solid transparent; }
+
+.slick-arrow.slick-hidden {
+  display: none; }
+
+/* Slider */
+.slick-loading .slick-list {
+  background: #fff url("./ajax-loader.gif") center center no-repeat; }
+
+/* Icons */
+/* Arrows */
+.slick-prev,
+.slick-next {
+  position: absolute;
+  display: block;
+  height: 60px;
+  width: 60px;
+  line-height: 0px;
+  font-size: 0px;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  padding: 0;
+  border: none;
+  outline: none; }
+  .slick-prev:hover, .slick-prev:focus,
+  .slick-next:hover,
+  .slick-next:focus {
+    outline: none;
+    background: transparent;
+    color: transparent; }
+    .slick-prev:hover:before, .slick-prev:focus:before,
+    .slick-next:hover:before,
+    .slick-next:focus:before {
+      opacity: 1; }
+  .slick-prev.slick-disabled:before,
+  .slick-next.slick-disabled:before {
+    opacity: 0.25; }
+  .slick-prev:before,
+  .slick-next:before {
+    font-family: "marianne";
+    font-size: 60px;
+    line-height: 1;
+    color: #009ee3;
+    opacity: 0.75;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+
+.slick-prev {
+  z-index: 1;
+  left: 25px; }
+  [dir="rtl"] .slick-prev {
+    left: auto;
+    right: 25px; }
+  .slick-prev:before {
+    content: "←"; }
+    [dir="rtl"] .slick-prev:before {
+      content: "→"; }
+
+.slick-next {
+  right: 25px; }
+  [dir="rtl"] .slick-next {
+    left: 25px;
+    right: auto; }
+  .slick-next:before {
+    content: "→"; }
+    [dir="rtl"] .slick-next:before {
+      content: "←"; }
+
+/* Dots */
+.slick-dotted.slick-slider {
+  margin-bottom: 30px; }
+
+html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.region.region-content div#block-contenudelapageprincipale.block.block-system.block-system-main-block div.layout.layout--threecol-25-50-25 div.layout__region.layout__region--top div.block-region-top div.block.block-ctools-block.block-entity-fieldnodefield-images div.field.field--name-field-images.field--type-image.field--label-hidden.field__items.slick-initialized.slick-slider.slick-dotted ul.slick-dots {
+  width: 600px; }
+
+.slick-dots {
+  position: absolute;
+  bottom: -25px;
+  list-style: none;
+  display: block;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  width: 100%; }
+  .slick-dots li {
+    position: relative;
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    margin: 0 5px;
+    padding: 0;
+    cursor: pointer; }
+    .slick-dots li button {
+      border: 0;
+      background: transparent;
+      display: block;
+      height: 20px;
+      width: 20px;
+      outline: none;
+      line-height: 0px;
+      font-size: 0px;
+      color: transparent;
+      padding: 5px;
+      cursor: pointer; }
+      .slick-dots li button:hover, .slick-dots li button:focus {
+        outline: none; }
+        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
+          opacity: 1; }
+      .slick-dots li button:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        content: "•";
+        width: 20px;
+        height: 20px;
+        font-family: "marianne";
+        font-size: 50px;
+        line-height: 20px;
+        text-align: center;
+        color: black;
+        opacity: 0.25;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale; }
+    .slick-dots li.slick-active button:before {
+      color: black;
+      opacity: 0.75; }

web/themes/custom/eql/eql.libraries.yml

@@ -3,8 +3,8 @@ global-css:
     theme:
       css-compiled/styles.css: {}
       #  css-prefixed/styles.css: {}
-      librairies/slick-1.8.1/slick/slick-theme.css: {}
-      librairies/slick-1.8.1/slick/slick.css: {}
+      # librairies/slick-1.8.1/slick/slick-theme.css: {}
+      # librairies/slick-1.8.1/slick/slick.css: {}
 
 
 global-js:

web/themes/custom/eql/scripts/main.js

@@ -169,28 +169,41 @@ jQuery(function($) {
     // if ('.view-id-actus_blocks_pages view-display-id-block_1'){
 
       $('.path-frontpage .view-actus-blocks-pages .view-content').slick({
-        // slidesToShow: 1,
+        slidesToShow: 1,
         // slidesToScroll: 1,
         dots: true,
         arrows: true,
         // centerMode: true,
-        centerPadding: '200px',
-        // responsive: [
-        //   {
-        //     breakpoint: 800,
-        //     settings: {
-        //       centerPadding: '0',
-        //       adaptiveHeight: true
-        //     }
-        //   }]
+        // centerPadding: '100px',
+        responsive: [
+          {
+            breakpoint: 800,
+            settings: {
+              // centerPadding: '0',
+              adaptiveHeight: true
+            }
+          }]
       });
-    // }
+      console.log('salut slick home');
+
+      $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({
+        dots: true,
+        arrows: false,
+
+
+      });
+      console.log('salut slick actus');
+
+
+      $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({
+        dots: true,
+        arrows: false,
+      });
+      console.log('salut slick projets');
+
   });
 
-  // $('.slidshow-home2').slick(
-  // {slidesToShow: 1,}
-  // );
-  console.log('salut slick');
+  // console.log('salut slick actus');
 
 })(jQuery, window);
 

web/themes/custom/eql/scss/pages/_actualite.scss

@@ -455,6 +455,7 @@
                                     img{
                                         width: 100%;
                                         height: auto;
+                                        margin: auto;
                                     }
                                 }
                                 .field--name-field-mots-clefs{

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

@@ -1,116 +1,142 @@
 // home juin 2023
-@import "../partials/_slick-slider.scss";
+// @import "../partials/_slick-slider.scss";
 
 .path-frontpage{
         // bandeau actus
         .block-views-blockactus-blocks-pages-block-1{
             // grid-area: actus;
             width: 100vw;
+            height: 600px;
             border-bottom: 5px solid $blue-light;
-            // border-top: 5px solid $blue-light;
             background: $background-actus;
-            .view-actus-blocks-pages{
-                padding-top: 5rem;
-                .view-content{
-                    display: flex;
-                    flex-basis: auto;
-                    // display: grid;
-                    // grid-template-columns: 1fr repeat(4, 2fr) 1fr;
-                    // margin: auto;
-                    // padding-top: 2rem;
-                    // padding-bottom: 4rem;
-                    @media (max-width: 479px){ 
-                        display: flex;
-                        flex-direction: column;
-                        // padding-left: 1rem;
-                        width: 80%;
-                    }
-                    .views-row{
-                        flex-basis: auto;
+            div{
+                height: 100%;
+                .view-actus-blocks-pages{
+                    height: 100%;
+                    .view-content{
+                        // display: flex;
+                        // flex-basis: auto;
+                        height: 90%;
 
-                    }
-                    // .w3-button{
-    
-                    // }
-                    // .views-row:nth-of-type(1) { grid-column: 2; }
-                   
-                   
-                    .node-type-actualite{
-                        color: $black;
-                        line-height: 1.5rem;
-                        padding: 0.5rem;
-                        div:first-child{           // block actu dans le bandeau
+                        @media (max-width: 479px){ 
                             display: flex;
                             flex-direction: column;
-                            // :nth-child(1) { order: 1; } 
-                            // :nth-child(4) { order: 2; }  
-                            // :nth-child(5) { order: 3; }            
+                            width: 80%;
                         }
-                        .field--name-field-images {
-                            order: 1;
-                            .field__item img{  
-                                max-width: 95%; 
-                                max-height: 150px;
-                                object-fit: cover;
-                                width: 100%; 
-                                padding-bottom: 1rem;
-                            }
-                        }
-                        
-                        .field--name-field-date{
-                            order: 2;
-                            display: flex;
-                            flex-direction: row;
-                            justify-content: flex-start;
-                            &:not(:last-child):after{ 
-                                padding-right: 1rem;
-                                content: "|";
-                            }
-                            time{ 
-                                font-size: 0.9rem;
-                                font-weight: 800;
-                                padding-right: 1rem;
-                                width: fit-content;
-                                // :not(:last-child):after{ 
-                                //     padding-left: 0.5rem;
-                                //     content: "|";
-                                // }
-                                
+                        .views-row{
+                            // width: 80%;
+                            // margin: auto;
+                            .node-type-actualite{
+                                color: $black;
+                                line-height: 1.5rem;
+                                width: 80%;
+                                height: 600px;
+                                margin: auto;
     
-                            }
-                        }
-                        .field--name-title{
-                            order:3;
-                        }
-                        .field--name-field-sous-titre{
-                            order:4;
-                            margin-top: 0.3rem;
-                            font-weight: 800;
-                        }
+                                // background-color: burlywood;
+        
+                                div:first-child{           // block actu dans le bandeau
+                                    // display: flex;
+                                    // flex-direction: column;
+                                    // flex-wrap: wrap;
+                                    display: grid;
+                                    grid-template-columns: 1fr repeat(8, 1fr) 1fr;
+                                    .field--name-field-images {
+                                        order: 1;
+                                        grid-column: 1 /span 5;
+                                        grid-row: 1 / span 6;
+                                        .field__item img{  
+                                            max-height: 450px;
+                                            object-fit: contain;
+                                            // padding-bottom: 1rem;
+                                            max-width: 700px;
+                            
+                                        }
+                                    }
+                                    
+                                    .field--name-field-date{
+                                        display: inline;
+
+                                        grid-column: 9 / span 7;
+                                        grid-row: 2;
+                                        order: 2;
+                                        // display: flex;
+                                        flex-direction: row;
+                                        // justify-content: flex-start;
+                                        // &:not(:last-child):after{ 
+                                        //     padding-right: 1rem;
+                                        //     content: "|";
+                                        // }
+                                        time{ 
+                                            font-size: 0.9rem;
+                                            font-weight: 800;
+                                            padding-right: 1rem;
+                                            width: fit-content;
+                                            // :not(:last-child):after{ 
+                                            //     padding-left: 0.5rem;
+                                            //     content: "|";
+                                            // }            
+                                        }
+                                    }
+    
+                                    .field--name-field-lieu{
+                                        .field__label{
+                                            display: none;
+                                        }
+                                        grid-column: 9 / span 9;
+                                        grid-row: 2;
+                                    }
+                                    .field--name-title{
+                                        display: inline-flex;
+                                        grid-column: 9 / span 9;
+                                        grid-row: 3;
+                                        order:3;
+                                    }
+                                    .field--name-field-sous-titre{
+                                        display: inline-block;
+                                        grid-column: 9 / span 9;
+                                        grid-row: 4;
+                                        order:4;
+                                        margin-top: 0.3rem;
+                                        font-weight: 800;
+                                    }
+                                    
+                                    .field:not(.field--name-field-images){
+                                        width: 100%;
+                                    }
+                                    h2{ margin:0; }
+                                    a{ color: $black; } 
                         
-                        .field:not(.field--name-field-images){
-                            width: 100%;
-                        }
-                        h2{ margin:0; }
-                        a{ color: $black; } 
-            
-                        .inline.links{
-                            padding-top: none !important;
-                            list-style: none;
-                            width: fit-content;
-                            align-self: flex-end;
-                            padding-right: 1rem;
-                            a{
-                                display: none;
+                                    .inline.links{
+                                        // grid-column: 5;
+                                        // grid-row: 4;
+                                        padding-top: none !important;
+                                        list-style: none;
+                                        width: fit-content;
+                                        align-self: flex-end;
+                                        padding-right: 1rem;
+                                        a{
+                                            display: none;
+                                        }
+                                    }
+                                    .field--name-field-actu-type{
+                                        display: inline-block;
+    
+                                        grid-column: 9 / span 7;
+                                        grid-row: 5;
+                                        order:5;
+                                        padding-top: 1rem;
+                                    }
+                                }
+
                             }
                         }
-                        .field--name-field-actu-type{
-                            order:5;
-                            padding-top: 1rem;
-                        }
+                       
+
                     }
                 }
             }
+
         }
     
         // bouton voir toutes actus du bandeau bleu
@@ -381,4 +407,14 @@
 
             }
         }
-}
+
+        //carte
+
+        .block-views-blockprojets-block-2{
+            #leaflet-map-view-projets-block-2{
+                height: 500px !important;
+            }
+        }
+
+        
+    }

web/themes/custom/eql/scss/pages/_projet.scss

@@ -6,39 +6,12 @@
         .region-content{
             #block-contenudelapageprincipale{
                 .layout--threecol-25-50-25{
-                    // display: grid;
-                    // grid-template-rows: repeat(6, auto);
-                
                     .layout__region--top{
                         
                         .block-region-top{
-                            // position: relative;
                             padding-top: 2rem;
                             display: grid;
                             grid-template-columns: 1fr repeat(8, 1fr) 1fr;
-                            // @media (max-width: 479px) {
-                            //     display: flex;
-                            //     flex-direction: column;                                
-                            // }
-
-                            // .block-block-contentbfb4368c-4f85-4329-88f1-8769161aa66f{
-                            //     grid-column: 1 / span 10;
-                            //     background-color: $blue-light;
-                                
-                            //     .field--name-body{
-                            //         vertical-align: middle;
-                            //         color: $white;
-                            //         font-family: 'Source Code Pro';
-                            //         font-size: 2rem;
-                            //         font-weight: 800;
-                            //         text-transform: uppercase;
-                            //         margin-left: 10%;
-                            //         a{
-                            //             color:$white;
-                            //         }
-                            //     }
-                            // }
-            
 
                             .block-entity-fieldnodetitle{
 

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

@@ -0,0 +1,201 @@
+@charset "UTF-8";
+
+// Default Variables
+
+// Slick icon entity codes outputs the following
+// "\2190" outputs ascii character "←"
+// "\2192" outputs ascii character "→"
+// "\2022" outputs ascii character "•"
+
+$slick-font-path: "./fonts/" !default;
+$slick-font-family: "marianne" !default;
+$slick-loader-path: "./" !default;
+$slick-arrow-color: rgb(0,158,227) !default;
+$slick-dot-color: black !default;
+$slick-dot-color-active: $slick-dot-color !default;
+$slick-prev-character: "\2190" !default;
+$slick-next-character: "\2192" !default;
+$slick-dot-character: "\2022" !default;
+$slick-dot-size: 50px !default;
+$slick-opacity-default: 0.75 !default;
+$slick-opacity-on-hover: 1 !default;
+$slick-opacity-not-active: 0.25 !default;
+
+@function slick-image-url($url) {
+    @if function-exists(image-url) {
+        @return image-url($url);
+    }
+    @else {
+        @return url($slick-loader-path + $url);
+    }
+}
+
+@function slick-font-url($url) {
+    @if function-exists(font-url) {
+        @return font-url($url);
+    }
+    @else {
+        @return url($slick-font-path + $url);
+    }
+}
+
+/* Slider */
+
+.slick-list {
+    .slick-loading & {
+        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
+    }
+}
+
+/* Icons */
+@if $slick-font-family == "slick" {
+    @font-face {
+        font-family: "slick";
+        src: slick-font-url("slick.eot");
+        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
+        font-weight: normal;
+        font-style: normal;
+    }
+}
+
+/* Arrows */
+
+.slick-prev,
+.slick-next {
+    position: absolute;
+    display: block;
+    height: 60px;
+    width: 60px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: $slick-opacity-on-hover;
+        }
+    }
+    &.slick-disabled:before {
+        opacity: $slick-opacity-not-active;
+    }
+    &:before {
+        font-family: $slick-font-family;
+        font-size: 60px;
+        line-height: 1;
+        color: $slick-arrow-color;
+        opacity: $slick-opacity-default;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+.slick-prev {
+    z-index: 1;
+    left: 25px;
+    [dir="rtl"] & {
+        left: auto;
+        right: 25px;
+    }
+    &:before {
+        content: $slick-prev-character;
+        [dir="rtl"] & {
+            content: $slick-next-character;
+        }
+    }
+}
+
+.slick-next {
+    right: 25px;
+    [dir="rtl"] & {
+        left: 25px;
+        right: auto;
+    }
+    &:before {
+        content: $slick-next-character;
+        [dir="rtl"] & {
+            content: $slick-prev-character;
+        }
+    }
+}
+
+
+
+/* Dots */
+
+.slick-dotted.slick-slider {
+    margin-bottom: 30px;
+}
+
+html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.region.region-content div#block-contenudelapageprincipale.block.block-system.block-system-main-block div.layout.layout--threecol-25-50-25 div.layout__region.layout__region--top div.block-region-top div.block.block-ctools-block.block-entity-fieldnodefield-images div.field.field--name-field-images.field--type-image.field--label-hidden.field__items.slick-initialized.slick-slider.slick-dotted ul.slick-dots{
+    width: 600px;
+}
+
+.slick-dots {
+    position: absolute;
+    bottom: -25px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    li {
+        position: relative;
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        margin: 0 5px;
+        padding: 0;
+        cursor: pointer;
+        button {
+            border: 0;
+            background: transparent;
+            display: block;
+            height: 20px;
+            width: 20px;
+            outline: none;
+            line-height: 0px;
+            font-size: 0px;
+            color: transparent;
+            padding: 5px;
+            cursor: pointer;
+            &:hover, &:focus {
+                outline: none;
+                &:before {
+                    opacity: $slick-opacity-on-hover;
+                }
+            }
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: $slick-dot-character;
+                width: 20px;
+                height: 20px;
+                font-family: $slick-font-family;
+                font-size: $slick-dot-size;
+                line-height: 20px;
+                text-align: center;
+                color: $slick-dot-color;
+                opacity: $slick-opacity-not-active;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+        }
+        &.slick-active button:before {
+            color: $slick-dot-color-active;
+            opacity: $slick-opacity-default;
+        }
+    }
+}

web/themes/custom/eql/scss/partials/_slick.scss

@@ -0,0 +1,100 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

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

@@ -0,0 +1,5 @@
+.slick-prev {
+    color: $blue-light;
+    left: 25px;
+}
+

web/themes/custom/eql/scss/styles.scss

@@ -58,7 +58,7 @@
 /*partials*/
 @import "partials/_header";
 @import "partials/_footer";
-@import "partials/_slick_carousel_custom";
-// @import "partials/_slick-slider.scss";
-// @import "partials/_slick-theme.scss";
+// @import "partials/_slick_custom.scss";
+@import "partials/_slick";
+@import "partials/_slick-theme";
 // @import "partials/_nodetyperessource.scss";