bouton 1er bandeau home

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

@@ -263,78 +263,102 @@ a {
 
 .block-views-blockhome-nodes-block-1 .node-type-static div:first-child {
   display: grid;
-  grid-template-columns: 1fr repeat(4, 2fr) 1fr; }
+  grid-template-columns: 1fr repeat(4, 2fr) 1fr;
+  grid-template-rows: repeat(4, auto); }
   .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images {
-    grid-column: 1 /span 10; }
+    z-index: -99;
+    filter: grayscale(100%);
+    filter: brightness(0%);
+    opacity: 0.5;
+    grid-column: 1 /span 10;
+    grid-row: 1 / span 4; }
     .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-images img {
+      width: 100vw;
       height: auto; }
-
-.block-views-blockhome-nodes-block-1 .field--name-field-accroche {
-  display: none; }
-
-.block-views-blockhome-nodes-block-1 .field--name-title {
-  grid-column: 2; }
-  .block-views-blockhome-nodes-block-1 .field--name-title h2 {
-    grid-column: 2; }
-    .block-views-blockhome-nodes-block-1 .field--name-title h2 a {
+  .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-field-accroche {
+    display: none; }
+  .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title {
+    grid-column: 2;
+    grid-row: 1; }
+    .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .field--name-title h2 a {
       color: #009ee3;
       font-weight: 900; }
+  .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline {
+    grid-column: 2;
+    grid-row: 4;
+    max-width: 70%;
+    min-width: fit-content;
+    height: 1.5rem;
+    padding: 0.4rem 1rem;
+    font-size: 0.8rem;
+    margin-bottom: 2.5rem;
+    background-color: white;
+    border: 2px solid #009ee3;
+    list-style: none;
+    text-align: center !important; }
+    .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline a {
+      display: inline-flex;
+      text-transform: uppercase;
+      font-weight: 700;
+      color: #009ee3; }
+      .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline a:after {
+        display: block;
+        content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
 
-.block-views-blockhome-nodes-block-1 .links.inline {
-  grid-column: 2;
-  align-self: flex-end;
-  width: fit-content;
-  height: fit-content;
-  padding: 0.4rem 1rem;
-  font-size: 0.8rem;
-  margin: 0;
-  background-color: white;
-  border: 2px solid #009ee3;
-  list-style: none; }
-  .block-views-blockhome-nodes-block-1 .links.inline a {
-    text-transform: uppercase;
-    font-weight: 700;
-    color: #009ee3; }
-    .block-views-blockhome-nodes-block-1 .links.inline a:after {
+.block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca {
+  display: grid;
+  grid-template-columns: 1fr repeat(4, 2fr) 1fr; }
+  .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link {
+    grid-column: 3;
+    position: relative;
+    max-width: 70%;
+    min-width: fit-content;
+    height: 1.5rem;
+    padding: 0.4rem 1rem;
+    font-size: 0.8rem;
+    margin: 0;
+    background-color: white;
+    border: 2px solid #009ee3;
+    list-style: none;
+    top: -200%;
+    text-align: center !important; }
+    .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a {
+      display: inline-flex;
+      text-transform: uppercase;
+      font-weight: 700;
+      color: #009ee3; }
+    .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a::after {
       content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
 
-.block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link {
-  justify-self: end;
-  position: relative;
-  width: fit-content;
-  height: fit-content;
-  padding: 0.4rem 1rem;
-  font-size: 0.8rem;
-  margin: 0;
-  background-color: white;
-  border: 2px solid #009ee3;
-  list-style: none; }
-  .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a {
-    text-transform: uppercase;
-    font-weight: 700;
-    color: #009ee3; }
-  .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a::after {
-    content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
+.block-region-content {
+  position: relative; }
 
 .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 {
+  position: relative;
   background-color: #009ee3;
-  width: 25%;
-  float: right; }
+  width: 20%;
+  float: right;
+  margin-right: 10%; }
   .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link {
-    align-self: flex-end;
     width: fit-content;
-    height: fit-content;
     padding: 0.4rem 1rem;
     font-size: 0.8rem;
-    margin: 0;
+    margin: auto;
     list-style: none; }
     .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link a {
       text-transform: uppercase;
       font-weight: 700;
       color: black; }
+      .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien.field--type-link a:before {
+        display: block;
+        content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="white" stroke="white" stroke-width="0.7"/></svg>'); }
   .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483 p {
     color: white;
-    font-size: 1.2rem; }
+    font-size: 1.2rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-top: 0;
+    text-align: center; }
 
 .block-views-blockactus-blocks-pages-block-1 {
   clear: both;

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

@@ -23,71 +23,92 @@
 // 1er bandeau
 
 .block-views-blockhome-nodes-block-1{
+
     .node-type-static{
         div:first-child{
             display: grid;
+            // flex-direction: column;
             grid-template-columns: 1fr repeat(4, 2fr) 1fr;
+            grid-template-rows: repeat(4, auto);
             .field--name-field-images{
+                z-index: -99;
+                filter: grayscale(100%);
+                filter: brightness(0%);
+                opacity: 0.5;
+                // display: none;
                 grid-column: 1 /span 10;
+                grid-row: 1 / span 4;
                 img{
+                    width: 100vw;
                     height: auto;
                 }
             }
-
-        }
-    }
-    .field--name-field-accroche{
-        display: none;
-    }
-    .field--name-title{
-        grid-column: 2;
-        h2{ 
-            grid-column: 2;
-            a{
-                color: $blue-light;
-                font-weight: 900;
-        
+            .field--name-field-accroche{
+                display: none;
             }
-        }
-    
-    }
-    .links.inline{
-        grid-column: 2;
-        align-self: flex-end;
-        width: fit-content;
-        height: fit-content;
-        padding: 0.4rem 1rem;
-        font-size: 0.8rem;
-        margin: 0;
-        background-color: $white;
-        border: 2px solid $blue-light;  
-        list-style: none;
-        
-        a{
-            text-transform: uppercase;
-            font-weight: 700;
-            color: $blue-light;
-            &:after{
-                // display: block;
-                content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
+            .field--name-title{
+                grid-column: 2;
+                grid-row: 1;
+                h2{ 
+                    a{
+                        color: $blue-light;
+                        font-weight: 900;
+                    }
+                }
+            }
+            .links.inline{
+                grid-column: 2;
+                grid-row: 4;
+                max-width: 70%;
+                min-width: fit-content;
+                height: 1.5rem;
+                padding: 0.4rem 1rem;
+                font-size: 0.8rem;
+                margin-bottom: 2.5rem;
+                background-color: $white;
+                border: 2px solid $blue-light;  
+                list-style: none;
+                text-align: center !important;
+
+                a{
+                    display: inline-flex;
+                    text-transform: uppercase;
+                    font-weight: 700;
+                    color: $blue-light;
+                    &:after{
+                        display: block;
+                        content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
+
+                    }
+                }
             }
         }
     }
+    
 }
+
+// bouton déposer candidature
 .block-block-content.block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca{
+    display: grid;
+    grid-template-columns: 1fr repeat(4, 2fr) 1fr;
     .field--type-link {
-        justify-self: end;
+        grid-column: 3;
+        // justify-self: end;
         position: relative;
-        width: fit-content;
-        height: fit-content;
+        max-width: 70%;
+        min-width: fit-content;
+        height: 1.5rem;
         padding: 0.4rem 1rem;
         font-size: 0.8rem;
         margin: 0;
         background-color: $white;
         border: 2px solid $blue-light;  
         list-style: none; 
+        top: -200%;
+        text-align: center !important;
       
         a{
+            display: inline-flex;
             text-transform: uppercase;
             font-weight: 700;
             color: $blue-light;
@@ -101,33 +122,44 @@
 }
 
 // bouton foire aux questions
-
+.block-region-content{
+    position: relative;
+}
 .block-block-content.block-block-content1bb9024b-d95f-4137-894c-362abf10a483{
+    position: relative;
     background-color: $blue-light;
-    width: 25%;
+    width: 20%;
     float: right;
+
+    // display: flex;
+    // flex-direction: column;
+    margin-right: 10%;
     .field--name-field-lien.field--type-link{
-        align-self: flex-end;
+        // align-self: flex-end;
         width: fit-content;
-        height: fit-content;
+        // height: fit-content;
         padding: 0.4rem 1rem;
         font-size: 0.8rem;
-        margin: 0;
+        margin: auto;
         list-style: none;
 
         a{
             text-transform: uppercase;
             font-weight: 700;
             color: $black;
-            // &:after{
-            //     // display: block;
-            //     content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
-            // }
+            &:before{
+                display: block;
+                content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="white" stroke="white" stroke-width="0.7"/></svg>');
+            }
         }
     }    
     p{
         color: $white;
         font-size: 1.2rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        margin-top: 0;
+        text-align: center;
     }
 }