css grille ressources

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

@@ -1,211 +1,6 @@
 @charset "UTF-8";
 /*eql*/
 /*setup*/
-/* 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 */
-@font-face {
-  font-family: "slick";
-  src: url("./fonts/slick.eot");
-  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
-  font-weight: normal;
-  font-style: normal; }
-
-/* Arrows */
-.slick-prev,
-.slick-next {
-  position: absolute;
-  display: block;
-  height: 20px;
-  width: 20px;
-  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: "slick";
-    font-size: 20px;
-    line-height: 1;
-    color: white;
-    opacity: 0.75;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale; }
-
-.slick-prev {
-  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; }
-
-.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: "slick";
-        font-size: 6px;
-        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; }
-
 /*global*/
 @font-face {
   font-family: 'Font Awesome';
@@ -604,73 +399,149 @@ a {
           font-weight: 800;
           vertical-align: middle; }
 
+/* Slider */
+.slick-slider {
+  padding-top: 6rem;
+  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;
   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 .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 {
+  .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; }
-    .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row:nth-of-type(1) {
-      grid-column: 2; }
-    .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; }
+      @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-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 {
   visibility: hidden; }
@@ -3742,12 +3613,11 @@ a {
     margin: auto; }
     .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content {
       display: grid;
-      grid-template-columns: 1fr repeat(8, 2fr) 1fr; }
+      grid-template-columns: 1fr repeat(4, 1fr) 1fr; }
       .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block {
-        grid-column: 3 / span 5; }
+        grid-column: 1 / span 6; }
         .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full {
-          grid-column: 3 / span 5;
-          margin: 2rem; }
+          grid-column: 1 / span 5; }
           .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full .field--name-field-introduction {
             margin: auto;
             background: white;
@@ -3757,13 +3627,12 @@ a {
               padding: 2rem;
               margin-top: 1rem; } }
       .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d {
-        grid-column: 8 / span 9;
+        grid-column: 6 / span 6;
         grid-row: 1;
         margin-top: 4rem;
         background-color: #009ee3;
         height: fit-content;
-        width: 60%;
-        margin-left: 2rem;
+        width: 100%;
         grid-row: 2; }
         .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d .display {
           display: block; }
@@ -3789,7 +3658,7 @@ a {
             margin: auto; } }
       .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 {
         width: 100%;
-        grid-column: 3 / span 8; }
+        grid-column: 1 / span 6; }
         .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-filters {
           background-color: white;
           margin-top: 2rem;
@@ -3804,17 +3673,19 @@ a {
             .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-filters .views-exposed-form-base-de-donnees-block-1 .form-item-field-type-de-ressource-target-id {
               width: fit-content; }
         .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content {
+          width: 100%;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap; }
           .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row {
             width: 25%;
-            flex: 0 0 25%;
-            border: 2px solid #009ee3; }
+            flex: 0 0 22%;
+            padding: 0.5rem; }
             .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource {
               display: flex;
               flex-direction: column;
-              padding: 1rem; }
+              padding: 1rem;
+              border: 2px solid #009ee3; }
               .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource .field--name-field-type-de-ressource {
                 text-transform: uppercase; }
                 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource .field--name-field-type-de-ressource a {
@@ -3825,8 +3696,9 @@ a {
                 margin: 0; }
                 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource .field--name-title h2 a {
                   color: black;
-                  font-size: 1.4rem;
-                  font-weight: 600; }
+                  font-size: 1rem;
+                  font-weight: 900;
+                  font-style: italic; }
               .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource .field--name-field-auteur-s- {
                 font-weight: 800; }
                 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row .node-type-ressource .field--name-field-auteur-s- p {
@@ -4152,3 +4024,209 @@ 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 {
+  padding-top: 6rem;
+  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 */
+@font-face {
+  font-family: "slick";
+  src: url("./fonts/slick.eot");
+  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+  position: absolute;
+  display: block;
+  height: 20px;
+  width: 20px;
+  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: "slick";
+    font-size: 20px;
+    line-height: 1;
+    color: white;
+    opacity: 0.75;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+
+.slick-prev {
+  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; }
+
+.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: "slick";
+        font-size: 6px;
+        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

@@ -5,8 +5,9 @@ global-css:
       #  css-prefixed/styles.css: {}
 global-js:
   js:
-    scripts/main.js: {}
     scripts/slick.js: {}
+    scripts/main.js: {}
+
  
   dependencies:
     - core/jquery

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

@@ -185,7 +185,6 @@ jQuery(function($) {
 
 (function($, window) {
   
-    // 'slick-carousel';
     var mobile = false;
   
     $(function(){
@@ -201,23 +200,23 @@ jQuery(function($) {
         // $("#"+).fadeIn();
 
         $(".node-type-actualite").slick({
+          dots: true,
           slidesToShow: 1,
-          slidesToScroll: 4,
+          slidesToScroll: 1,
           centerMode: true,
-          centerPadding: '300px',
+          centerPadding: '500px',
           // appendDots: $(element),
-          dots: true,
-          // appendArrows: $(element),
+          // // appendArrows: $(element),
           arrows: true,
           // prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
-          // nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
-          responsive: [
-          {
-            breakpoint: 800,
-            settings: {
-              centerPadding: '0',
-            }
-          }]
+          // // nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
+          // responsive: [
+          // {
+          //   breakpoint: 800,
+          //   settings: {
+          //     centerPadding: '0',
+          //   }
+          // }]
 
         });
         console.log(".node-type-actualite");

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

@@ -1,4 +1,5 @@
 // home juin 2023
+@import "../partials/_slick-slider.scss";
 
 .path-frontpage{
         // bandeau actus
@@ -9,6 +10,7 @@
             // border-top: 5px solid $blue-light;
             background: $background-actus;
             .view-actus-blocks-pages{
+                padding-top: 5rem;
                 .view-content{
                     display: flex;
                     flex-basis: auto;
@@ -27,10 +29,12 @@
                         flex-basis: auto;
 
                     }
-                    .w3-button{
+                    // .w3-button{
     
-                    }
-                    .views-row:nth-of-type(1) { grid-column: 2; }
+                    // }
+                    // .views-row:nth-of-type(1) { grid-column: 2; }
+                   
+                   
                     .node-type-actualite{
                         color: $black;
                         line-height: 1.5rem;

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

@@ -11,16 +11,16 @@
                     .layout__region--content{
                         .block-region-content{
                             display: grid;
-                            grid-template-columns: 1fr repeat(8, 2fr) 1fr;
+                            grid-template-columns: 1fr repeat(4, 1fr) 1fr;
 
                             // texte présentation
                            .block-config-pages-block{
-                            grid-column: 3 / span 5;
+                            grid-column: 1 / span 6;
 
                                 .config_pages--base-de-donnees--full{
                                     // .field--name-field-introduction{
-                                        grid-column: 3 / span 5;
-                                        margin: 2rem;
+                                        grid-column: 1 / span 5;
+                                        // margin: 2rem;
                                         .field--name-field-introduction{
                                             // width: 65%;
                                             margin: auto;
@@ -52,13 +52,13 @@
                             //button proposer une ressource
                             .block-block-content82917d0c-5004-4bfb-af66-ce334782d82d{
                                 // visibility: hidden;
-                                grid-column: 8 / span 9;
+                                grid-column: 6 / span 6;
                                 grid-row: 1;
                                 margin-top: 4rem;
                                 background-color: $blue-light;
                                 height: fit-content;
-                                width: 60%;
-                                margin-left: 2rem;
+                                width: 100%;
+                                // margin-left: 2rem;
                                 grid-row: 2;
                                 .display{
                                     display: block;
@@ -96,7 +96,7 @@
                         // grille des ressources
                             .block-views-blockbase-de-donnees-block-1{
                                 width: 100%;
-                                grid-column: 3 / span 8;
+                                grid-column: 1 / span 6;
                                 .view-filters{
                                     background-color: $white;
                                     margin-top: 2rem;
@@ -118,13 +118,15 @@
                                     }
                                 }
                                 .view-content{
+                                    width: 100%;
                                     display: flex;
                                     flex-direction: row;
                                     flex-wrap: wrap;
+                                    // justify-content: space-between;
                                     .views-row{
                                         width: 25%;
-                                        flex: 0 0 25%;
-                                         border: 2px solid $blue-light;
+                                        flex: 0 0 22%;
+                                        padding: 0.5rem;
                                         // background-color: $white;
                                         // margin-bottom: 1rem;
                                         // &:hover{
@@ -134,8 +136,9 @@
                                             display: flex;
                                             flex-direction: column;
                                             // border: 2px solid $blue-light;
-                                            padding: 1rem;
-                                            
+                                            padding: 1rem;                                        
+                                            border: 2px solid $blue-light;
+
                                             // &:hover{
                                             //     background-color: $blue-light;
                                             //     .field--name-field-mots-clefs{
@@ -165,9 +168,10 @@
                                                     margin: 0;
                                                     a{
                                                         color: $black;
-                                                        font-size: 1.4rem;
-                                                        font-weight: 600;
-                                
+                                                        font-size: 1rem;
+                                                        // font-weight: 600;
+                                                        font-weight: 900;
+                                                        font-style: italic;
                                                     }
             
                                                 }

web/themes/custom/eql/scss/global/_slick-slider.scss → web/themes/custom/eql/scss/partials/_slick-slider.scss

@@ -1,7 +1,8 @@
 /* Slider */
 
 .slick-slider {
-    background-color: blue;
+    padding-top: 6rem;
+    // background-color: blue;
     position: relative;
     display: block;
     box-sizing: border-box;
@@ -42,6 +43,8 @@
 
 .slick-track {
     position: relative;
+    // width: 600px !important ;
+    
     left: 0;
     top: 0;
     display: block;
@@ -63,6 +66,8 @@
     }
 }
 .slick-slide {
+    // width: 600px !important ;
+
     float: left;
     height: 100%;
     min-height: 1px;

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

@@ -0,0 +1,194 @@
+@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: "slick" !default;
+$slick-loader-path: "./" !default;
+$slick-arrow-color: white !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: 6px !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: 20px;
+    width: 20px;
+    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: 20px;
+        line-height: 1;
+        color: $slick-arrow-color;
+        opacity: $slick-opacity-default;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+.slick-prev {
+    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;
+}
+
+.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/styles.scss

@@ -1,8 +1,8 @@
 /*eql*/
 
 /*setup*/
-@import "../node_modules/slick-carousel/slick/slick.scss";
-@import "../node_modules/slick-carousel/slick/slick-theme.scss";
+// @import "../node_modules/slick-carousel/slick/slick.scss";
+// @import "../node_modules/slick-carousel/slick/slick-theme.scss";
 
 
 /*global*/
@@ -14,7 +14,7 @@
 // @import "global/_reset";
 @import "global/_typography";
 @import "global/_mediaqueries";
-// @import "global/_slick-slider";
+
 
 
 
@@ -56,3 +56,5 @@
 /*partials*/
 @import "partials/_header";
 @import "partials/_footer";
+@import "partials/_slick-slider.scss";
+@import "partials/_slick-theme.scss";

web/themes/custom/eql/templates/block--views-block--actus-blocks-pages-block-1.html.twig

@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+      {# <video autoplay muted loop id="myVideo">
+  <source src="rain.mp4" type="video/mp4">
+</video> #}
+    <span><h2{{ title_attributes }}>{{ label }}</h2></span>
+  {% endif %}
+  {{ title_suffix }}
+
+
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig

@@ -78,6 +78,8 @@
     'mySlides',
   ]
 %}
+{# <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> #}
+
 
 <article{{ attributes.addClass(classes, 'field__items') }}>
 

web/themes/custom/eql/templates/views-view-actus-blocks-pages--block-1.html.twig

@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Theme override for a main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   JavaScript.
+ *
+ * @see template_preprocess_views_view()
+ */
+#}
+{%
+  set classes = [
+    'view',
+    'view-' ~ id|clean_class,
+    'view-id-' ~ id,
+    'view-display-id-' ~ display_id,
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if title %}
+    {{ title }}
+  {% endif %}
+  {{ title_suffix }}
+  {% if header %}
+    <div class="view-header">
+      {{ header }}
+    </div>
+  {% endif %}
+  {% if exposed %}
+    <div class="view-filters">
+      {{ exposed }}
+    </div>
+  {% endif %}
+  {% if attachment_before %}
+    <div class="attachment attachment-before">
+      {{ attachment_before }}
+    </div>
+  {% endif %}
+
+  {% if rows %}
+
+    <div class="view-content">
+      {{ rows }}
+{# <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> #}
+    </div>
+  {% elseif empty %}
+    <div class="view-empty">
+      {{ empty }}
+    </div>
+  {% endif %}
+
+  {% if pager %}
+    {{ pager }}
+  {% endif %}
+  {% if attachment_after %}
+    <div class="attachment attachment-after">
+      {{ attachment_after }}
+    </div>
+  {% endif %}
+  {% if more %}
+    {{ more }}
+  {% endif %}
+  {% if footer %}
+    <div class="view-footer">
+      {{ footer }}
+    </div>
+  {% endif %}
+  {% if feed_icons %}
+    <div class="feed-icons">
+      {{ feed_icons }}
+    </div>
+  {% endif %}
+</div>

web/themes/custom/eql/templates/views-view-unformatted.html.twig

@@ -31,4 +31,6 @@
   <div{{ row.attributes.addClass(row_classes) }}>
     {{- row.content -}}
   </div>
+  {# <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> #}
+
 {% endfor %}

web/themes/custom/eql/templates/views-view.html.twig

@@ -65,7 +65,7 @@
 
     <div class="view-content">
       {{ rows }}
-
+    
     </div>
   {% elseif empty %}
     <div class="view-empty">