header menus déroulant et burger

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

@@ -303,8 +303,8 @@ a {
         font-weight: 700;
         color: #009ee3; }
         .view-display-id-block_2 .node-type-static .inline.links a:after {
-          display: block;
-          width: 40px; }
+          width: 40%;
+          content: url('data:image/svg+xml,<svg width="60" height="40" 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="translate(-23.815852,-33.316918)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
     .view-display-id-block_2 .node-type-static .field--name-field-images .field__item img {
       width: 15rem;
       height: auto; }
@@ -316,8 +316,9 @@ a {
       .view-display-id-block_2 .node-type-static .field--name-field-accroche p {
         font-size: 1.5rem;
         width: 110%;
-        margin: 0;
-        padding-bottom: 2rem; }
+        margin-bottom: 2rem;
+        padding-bottom: 2rem;
+        margin-block-start: 0; }
 
 .field--name-field-partenaires {
   padding-top: 3rem; }
@@ -353,6 +354,8 @@ a {
     margin: auto; }
     .path-actualites .block-region-content .block-views:nth-of-type(1) {
       grid-column: 2; }
+    .path-actualites .block-region-content .block-views .view-display-id-block_2 {
+      padding-top: 0; }
     .path-actualites .block-region-content .block-views .node-type-actualite {
       color: #09398b;
       line-height: 1.5rem;
@@ -368,6 +371,16 @@ a {
           order: 3; }
         .path-actualites .block-region-content .block-views .node-type-actualite div:first-child a {
           color: #09398b; }
+        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images .field__item img {
+          width: 100%;
+          height: fit-content; }
+        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images::after {
+          display: block;
+          content: url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>'); }
+        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field:not(.field--name-field-images) {
+          width: 80%; }
+        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child h2 {
+          margin: 0; }
 
 /*partials*/
 .layout-container {
@@ -399,31 +412,27 @@ header {
       height: 100%;
       align-items: center; }
     #header-top .region-header-top-left ul {
-      position: absolute;
       list-style: none;
       display: flex;
       flex-direction: row; }
-      #header-top .region-header-top-left ul li {
-        padding-right: 1rem; }
-        #header-top .region-header-top-left ul li a {
-          color: black; }
-        #header-top .region-header-top-left ul li .is-active {
-          color: #009ee3; }
-      #header-top .region-header-top-left ul .ul2 {
+      #header-top .region-header-top-left ul :is(.sous-liste) {
+        display: flex;
         flex-direction: column;
-        display: none; }
-      #header-top .region-header-top-left ul :hover {
+        padding: 1rem; }
+      #header-top .region-header-top-left ul .ul1.sous-liste {
+        padding-right: 2rem; }
+      #header-top .region-header-top-left ul li a {
+        color: black; }
+      #header-top .region-header-top-left ul li .is-active {
         color: #009ee3; }
-    #header-top .region-header-top-left li:not(ul):not(.ul2) {
-      display: block;
-      position: relative; }
-    #header-top .region-header-top-left :hover .ul2 {
+      #header-top .region-header-top-left ul li :hover {
+        color: #009ee3; }
+    #header-top .region-header-top-left ul:is(.ul1 .sous-liste .ul2) {
+      display: none; }
+    #header-top .region-header-top-left :hover ul:is(.ul1 .sous-liste .ul2) {
       display: block;
       background-color: white;
       padding: 1rem; }
-  #header-top li .ul1 {
-    display: flex;
-    flex-direction: column; }
   #header-top #block-burger {
     z-index: 1;
     background-color: #009ee3;
@@ -440,20 +449,19 @@ header {
     #header-top #block-burger h2:after {
       display: block;
       margin: auto;
-      height: 60px;
-      content: url('data:image/svg+xml,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>'); }
+      content: url('data:image/svg+xml,<svg width="100" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 20,10 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 20,25 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 20,40 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>'); }
     #header-top #block-burger #block-burger-menu {
       display: block;
       margin: 0;
       align-self: center;
-      text-align: center;
-      height: 7rem; }
+      text-align: center; }
     #header-top #block-burger .ul1:not(.sous-liste) {
       width: 300%;
       position: relative;
       right: 260px;
       margin: 0;
       padding-top: 2rem;
+      padding-bottom: 2rem;
       z-index: 99; }
     #header-top #block-burger ul {
       display: none;

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

@@ -13,7 +13,9 @@
             grid-column: 2;
         }
         .block-views{
-
+            .view-display-id-block_2{
+                padding-top: 0;
+            }
             .node-type-actualite{
                 
                 color: $blue-dark;
@@ -28,7 +30,21 @@
                     :nth-child(5) { order: 3; }    
                     a{
                         color: $blue-dark;
-                    }        
+                    } 
+                    .field--name-field-images {
+                        .field__item img{  
+                            width: 100%; 
+                            height: fit-content;  
+                        }
+                        &::after{ 
+                            display: block;
+                            content:url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>');
+                        }
+                    }
+                    .field:not(.field--name-field-images){
+                        width: 80%;
+                    }
+                    h2{ margin:0; }
                 }
             }
         }
@@ -36,20 +52,3 @@
     }
 }
 
-// .node-type-actualite{
-    
-//     color: $blue-dark;
-//     line-height: 1.5rem;
-//     padding: 0.5rem;
-//     div:first-child{                
-//         display: flex;
-//         flex-direction: column;
-
-//         :nth-child(1) { order: 1; } 
-//         :nth-child(4) { order: 2; }  
-//         :nth-child(5) { order: 3; }    
-//         a{
-//             color: $blue-dark;
-//         }        
-//     }
-// }

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

@@ -1,9 +1,4 @@
 
-// .node-type-static {
-//     display: grid;
-//     grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
-// }
-
 
 .field--type-entity-reference-revisions{
         .paragraph-summary{
@@ -29,8 +24,6 @@
 
 .block-views-blockactus-blocks-pages-block-1{
     background-color: $blue-dark;
-    // padding: 1rem;
-
 
     .view-content{
 
@@ -71,15 +64,6 @@
 }
 
 
-// actu dans bandeau
-
-// .node-type-actualite div:first-child{
-//     display: flex;
-//     flex-direction: column;
-//     :nth-child(1) { order: 1; } 
-//     :nth-child(4) { order: 2; }  
-//     :nth-child(5) { order: 3; }            
-// }
 
 // bouton voir toutes actus du bandeau bleu
 .layout--onecol{
@@ -127,16 +111,12 @@
         width: 70%;
         margin: auto;
         div:first-child:not(.field__item):not(.field){
-        // display: grid;
-        // grid-template-columns: 1fr repeat(8, 2fr) 1fr;
         display: flex;
         flex-direction: row;
         }
 
         .inline.links{
             align-self: flex-end;
-            // grid-column: 9;
-            // grid-row: 2;
             width: fit-content;
             height: fit-content;
             padding: 0.4rem 1rem;
@@ -145,24 +125,15 @@
             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("../images/pictos/noun_Arrow_3771902.svg");
-                    width: 40px;
-                    // background-image: ;
-                    
-                    // content: url("data:image/svg+xml; utf8, <svg version="1.1" x="0px" y="0px" viewBox="0 0 52 33" 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="translate(-23.815852,-33.316918)"/></svg>");
-                    // // display:block;
-                    // width:22px;
-                    // height:10px;
-                    // margin:10px 5px 0 10px;
+                    // display: block;
+                    width: 40%;
+                    content: url('data:image/svg+xml,<svg width="60" height="40" 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="translate(-23.815852,-33.316918)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
                 }
             }
         }
@@ -185,8 +156,9 @@
             p{
                 font-size: 1.5rem;
                 width: 110%;
-                margin: 0;
+                margin-bottom: 2rem;
                 padding-bottom: 2rem;
+                margin-block-start: 0;
             }
 
         }

web/themes/custom/eql/scss/partials/_header copy.scss

@@ -0,0 +1,154 @@
+
+.layout-container{
+    position: relative;
+}
+header{                       
+    display: block;
+    position: sticky;     // sticky marche pas :(
+
+}
+
+#header-top {
+    height: 7rem;
+    background-color: $white;
+    box-shadow: 1px 0px 8px $black;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: $black;
+    position: sticky;
+    top:0%;
+
+
+    .region-header-top-left {                // logo + menu déroulant
+        display:flex;
+        flex-direction: row;
+        padding: 1rem;
+        align-items:start;  
+        color: $black;  
+        font-weight: 800;
+
+        #block-logogouv{
+            display: flex;
+            height: 100%;
+            align-items: center;
+        }
+
+        ul{
+            // position: absolute;
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            li {
+                padding-right: 1rem;
+       
+                a {
+                    color: $black;
+                    // font-weight: 800;
+
+                }
+                .is-active {
+                    color: $blue-light;
+                }
+
+            } 
+            .ul2{
+                flex-direction: column;
+                display: none;
+            }
+            :hover{
+                color: $blue-light;
+            }
+        }
+
+        li:not(ul):not(.ul2){
+            display: block;
+            position: relative;
+        }
+
+        // .ul:not(:-moz-first-node){
+        //     display: none;
+        // }
+        :hover {
+            .ul2{
+                display: block;
+                background-color: $white;
+                padding: 1rem;
+            }
+        }
+        
+    }
+
+    li .ul1 {
+        display: flex;
+        flex-direction: column;
+
+    }
+
+
+    #block-burger {                         // menu burger à droite
+        z-index: 1;
+        background-color: $blue-light;
+        font-size: 0.7rem;
+        color: $white;
+        display: block;
+        width: 7rem;
+        height: 100%;
+        margin-top: 0;
+        :hover{
+            cursor: pointer;
+        }
+        h2{
+            padding-top: 1rem;
+        }
+        h2:after{
+            display: block;
+            margin:auto;
+            height: 60px;
+            content:url('data:image/svg+xml,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
+        }          
+
+        #block-burger-menu{
+            display: block;
+            margin: 0;
+            align-self: center;
+            text-align: center;
+            height:7rem;
+        }
+
+        .ul1:not(.sous-liste){
+            width: 300%;
+            position: relative;
+            right: 260px;
+            margin: 0;
+            padding-top: 2rem;
+            z-index: 99;
+
+        }
+        ul  {
+            display: none;
+            background-color: $blue-light;
+            line-height: 2rem;
+            list-style: none;
+        
+            .ul1 .sous-liste{
+                a{
+                    opacity: 1;
+                }
+            }
+            a{
+                opacity: 0.6;
+                color: $white;
+                font-weight: 800;
+                font-size: 1rem;
+            }
+        }
+        &.opened ul {
+          display: block;
+
+        }
+    }   
+
+
+}
+

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

@@ -20,7 +20,7 @@ header{
     top:0%;
 
 
-    .region-header-top-left {                // logo + menu déroulant
+    .region-header-top-left {      // logo + menu déroulant
         display:flex;
         flex-direction: row;
         padding: 1rem;
@@ -35,60 +35,43 @@ header{
         }
 
         ul{
-            position: absolute;
             list-style: none;
             display: flex;
             flex-direction: row;
-            li {
-                padding-right: 1rem;
+            :is(.sous-liste){
+                display: flex;
+                flex-direction: column;
+                padding: 1rem;
+            }
+            .ul1.sous-liste{
+                padding-right: 2rem;
+            }
+            li{
+
                 a {
                     color: $black;
-                    // font-weight: 800;
-
                 }
-                .is-active {
+                .is-active{
+                    color:$blue-light;
+                }
+                :hover{
                     color: $blue-light;
                 }
-            } 
-            .ul2{
-                flex-direction: column;
-                display: none;
-
-            }
-            :hover{
-                color: $blue-light;
             }
         }
-
-        li:not(ul):not(.ul2){
-            display: block;
-            position: relative;
-
+        ul:is(.ul1 .sous-liste .ul2){
+            display: none;
         }
         :hover {
-            .ul2{
+            ul:is(.ul1 .sous-liste .ul2){
                 display: block;
                 background-color: $white;
                 padding: 1rem;
-                // a{
-                //     color: $white;
-                // }
-
-                // position: relative;
-                // transition: ease-in-out 2s;
             }
         }
-        
-    }
+    } 
 
-    li .ul1 {
-        display: flex;
-        flex-direction: column;
-
-    }
-
-
-    #block-burger {                         // menu burger à droite
+    #block-burger {              // menu burger à droite
         z-index: 1;
         background-color: $blue-light;
         font-size: 0.7rem;
@@ -106,8 +89,8 @@ header{
         h2:after{
             display: block;
             margin:auto;
-            height: 60px;
-            content:url('data:image/svg+xml,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
+            // height: 60px;
+            content:url('data:image/svg+xml,<svg width="100" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 20,10 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 20,25 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 20,40 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
         }          
 
         #block-burger-menu{
@@ -115,15 +98,19 @@ header{
             margin: 0;
             align-self: center;
             text-align: center;
-            height:7rem;
+            // height:7rem;
         }
 
-        .ul1:not(.sous-liste){
+
+  // block menu open fond bleu
+
+        .ul1:not(.sous-liste){    
             width: 300%;
             position: relative;
             right: 260px;
             margin: 0;
             padding-top: 2rem;
+            padding-bottom: 2rem;
             z-index: 99;
 
         }