Merge remote-tracking branch 'origin/master'

jsp ce que je fais

web/themes/erabletheme/assets/icons/arrow-down-s-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>

web/themes/erabletheme/css/styles.css

@@ -84,9 +84,8 @@ body.toolbar-fixed header[role=banner] {
 
 .layout-container header[role=banner] {
   width: 100%;
-  background: white;
+  background-color: white;
   z-index: 99;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
 }
 @media (min-width: 1080px) {
   .layout-container header[role=banner] {
@@ -95,26 +94,28 @@ body.toolbar-fixed header[role=banner] {
     box-shadow: none;
   }
 }
-.layout-container header[role=banner] > div {
+.layout-container header[role=banner] > div:first-of-type {
+  z-index: 99;
+  position: relative;
   display: grid;
   grid-template-columns: repeat(16, 1fr);
 }
-.layout-container header[role=banner] > div > div {
+.layout-container header[role=banner] > div:first-of-type > div {
   height: 12vh;
   grid-row: 1;
   max-height: 100%;
   width: 100%;
 }
-.layout-container header[role=banner] > div > div > div {
+.layout-container header[role=banner] > div:first-of-type > div > div {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.layout-container header[role=banner] > div > div > div > div {
+.layout-container header[role=banner] > div:first-of-type > div > div > div {
   height: 12vh;
 }
-.layout-container header[role=banner] > div > div > div > div a {
+.layout-container header[role=banner] > div:first-of-type > div > div > div a {
   display: block;
   height: 100%;
   width: 100%;
@@ -122,85 +123,90 @@ body.toolbar-fixed header[role=banner] {
   justify-content: center;
   align-items: center;
 }
-.layout-container header[role=banner] > div > div > div > div img {
+.layout-container header[role=banner] > div:first-of-type > div > div > div img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
 }
-.layout-container header[role=banner] > div #block-erabletheme-logorep-2 {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 {
   grid-column: 1/5;
 }
-.layout-container header[role=banner] > div #block-erabletheme-logorep-2 img {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 img {
   padding-top: 0.8rem;
   padding-bottom: 0.8rem;
 }
 @media (min-width: 760px) {
-  .layout-container header[role=banner] > div #block-erabletheme-logorep-2 {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 {
     grid-column: 0/4;
   }
 }
 @media (min-width: 1080px) {
-  .layout-container header[role=banner] > div #block-erabletheme-logorep-2 {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 {
     grid-column: 1/3;
   }
 }
-.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 {
   grid-column: 5/9;
 }
-.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div {
   align-items: flex-start;
   justify-content: flex-start;
 }
-.layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div > div > a > img {
   transform: translateX(-20px);
   padding-top: 1.2rem;
   padding-bottom: 1.2rem;
 }
 @media (min-width: 760px) {
-  .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 {
     grid-column: 4/7;
   }
-  .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div > div > a > img {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
   }
 }
 @media (min-width: 1080px) {
-  .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 {
+    grid-column: 3/8;
+  }
+}
+@media (min-width: 1600px) {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 {
     grid-column: 3/6;
   }
-  .layout-container header[role=banner] > div #block-erabletheme-logoepau-2 > div > div > a > img {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div > div > a > img {
     transform: translateX(-40px);
     padding-top: 30px;
     padding-bottom: 30px;
   }
 }
-.layout-container header[role=banner] > div #block-erabletheme-logoerable {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoerable {
   grid-column: 10/15;
 }
 @media (min-width: 1080px) {
-  .layout-container header[role=banner] > div #block-erabletheme-logoerable {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoerable {
     grid-column: 14/16;
   }
 }
-.layout-container header[role=banner] > div #block-erabletheme-logoerable img {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoerable img {
   padding-right: 1rem;
   padding-top: 0.8rem;
   padding-bottom: 0.8rem;
 }
-.layout-container header[role=banner] > div #block-erabletheme-socialmedialinks {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-socialmedialinks {
   display: none;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header {
   grid-column: 15/17;
 }
 @media (min-width: 1080px) {
-  .layout-container header[role=banner] > div #block-erabletheme-header {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header {
     grid-column: 16/17;
   }
 }
-.layout-container header[role=banner] > div #block-erabletheme-header #hamburger {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger {
   cursor: pointer;
   width: auto;
   height: 100%;
@@ -211,13 +217,13 @@ body.toolbar-fixed header[role=banner] {
   justify-content: space-around;
   padding: 0.5rem 0;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header #hamburger h2 {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger h2 {
   font-size: 0.8rem;
   font-family: "Marianne", sans-serif;
   font-weight: 800;
   text-align: center;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header #hamburger .burger-icon {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon {
   width: 2rem;
   height: 1.5rem;
   display: flex;
@@ -225,7 +231,7 @@ body.toolbar-fixed header[role=banner] {
   justify-content: space-between;
   padding-bottom: 0.5rem;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header #hamburger .burger-icon div {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon div {
   border-bottom: solid 1px black;
   width: 100%;
   background-color: black;
@@ -233,16 +239,16 @@ body.toolbar-fixed header[role=banner] {
   transition: opacity 0.2s ease-out, transform 0.4s ease-out;
   transform: none;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header #hamburger .burger-icon.open div:first-of-type {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:first-of-type {
   transform: translate(0rem, 0.5rem) rotate(-45deg);
 }
-.layout-container header[role=banner] > div #block-erabletheme-header #hamburger .burger-icon.open div:nth-of-type(2) {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:nth-of-type(2) {
   opacity: 0;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header #hamburger .burger-icon.open div:last-of-type {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:last-of-type {
   transform: translate(0rem, -0.5rem) rotate(45deg);
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) {
   position: absolute;
   left: 0;
   z-index: -1;
@@ -257,11 +263,11 @@ body.toolbar-fixed header[role=banner] {
   flex-direction: column;
 }
 @media screen and (min-width: 1080px) {
-  .layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) {
     padding-top: 3rem;
   }
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -270,7 +276,7 @@ body.toolbar-fixed header[role=banner] {
   transition: opacity 0.3s ease;
   max-width: 60vw;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a {
   text-align: center;
   line-height: 1.2;
   color: white;
@@ -280,70 +286,74 @@ body.toolbar-fixed header[role=banner] {
   background-color: rgba(255, 255, 255, 0);
   transition: background-color 0.3s ease, color 0.3s ease;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a:hover {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a:hover {
   background-color: white;
   color: #314e41;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a.is-active {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a.is-active {
   background-color: white;
   color: #314e41;
 }
 @media (min-width: 760px) {
-  .layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li {
     max-width: 30vw;
   }
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper {
   display: flex;
   width: auto;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li {
   width: auto;
   padding: 0 1rem;
   margin-top: 1rem;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li a span {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li a span {
   color: white;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li a svg {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li a svg {
   display: none;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li.visible {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li.visible {
   opacity: 1;
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(1),
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(1),
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(2),
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(2),
-.layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(6) {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(6) {
   border-bottom: solid 1px white;
   padding: 12px 0;
 }
 @media (min-width: 1080px) {
-  .layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) {
     width: 25vw;
     right: 0;
     left: auto;
   }
-  .layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) li {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) li {
     width: calc(100% - 6vw);
   }
-  .layout-container header[role=banner] > div #block-erabletheme-header ul:not(.social-media-links--platforms) li a {
+  .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) li a {
     width: 100%;
     text-align: left;
   }
 }
-.layout-container header[role=banner] > div #block-erabletheme-header ul.active {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul.active {
   padding: 30px 0;
   padding-top: 3rem;
   max-height: 100vh;
 }
-.layout-container header[role=banner] > div #block-erabletheme-navigationprincipale {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-navigationprincipale {
   margin-top: 0 !important;
 }
+.layout-container header[role=banner] > div:nth-of-type(2) {
+  z-index: 98;
+  position: relative;
+}
 .layout-container #block-erabletheme-navigationprincipale {
   width: 100vw;
   display: none;
-  background-color: white;
+  position: absolute;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+  padding-top: 1rem;
 }
 @media (min-width: 1080px) {
   .layout-container #block-erabletheme-navigationprincipale {
@@ -355,24 +365,56 @@ body.toolbar-fixed header[role=banner] {
   display: flex;
   padding: 1rem 10vw;
   justify-content: space-around;
-  border-top: solid 1px #314e41;
 }
 .layout-container #block-erabletheme-navigationprincipale ul li {
   font-family: "Marianne", sans-serif;
   font-size: 0.9rem;
+  padding: 4px 12px;
+  background-color: white;
+  transition: background-color 0.3s ease;
+}
+.layout-container #block-erabletheme-navigationprincipale ul li:first-of-type {
+  display: flex;
+  justify-items: center;
+}
+.layout-container #block-erabletheme-navigationprincipale ul li:first-of-type::after {
+  content: url(../assets/icons/arrow-down-s-line.svg);
+  display: inline-block;
+  height: 1rem;
+  width: 1rem;
+  margin-left: 0.2rem;
+}
+.layout-container #block-erabletheme-navigationprincipale ul li:hover, .layout-container #block-erabletheme-navigationprincipale ul li.submenu-open {
+  background-color: #00ff80;
 }
 .layout-container #block-erabletheme-navigationprincipale ul li a {
   font-weight: 800;
-  padding: 4px 6px;
   color: black;
-  background-color: rgba(255, 255, 255, 0);
-  transition: background-color 0.3s ease;
 }
-.layout-container #block-erabletheme-navigationprincipale ul li a:hover {
+.layout-container #block-erabletheme-navigationprincipale ul li a:is-active {
   background-color: #00ff80;
 }
-.layout-container #block-erabletheme-navigationprincipale ul li a.is-active {
+.layout-container #block-erabletheme-leprogramme {
-  background-color: #00ff80;
+  position: absolute;
+  background-color: white;
+  max-height: 0vh;
+  overflow: hidden;
+  display: none;
+  transition: max-height 0.6s ease;
+}
+.layout-container #block-erabletheme-leprogramme > h2 {
+  display: none;
+}
+.layout-container #block-erabletheme-leprogramme ul {
+  padding: 1rem 1.5rem;
+}
+.layout-container #block-erabletheme-leprogramme ul li {
+  font-family: "Marianne", sans-serif;
+  font-size: 0.9rem;
+  margin: 0.5rem 0;
+}
+.layout-container #block-erabletheme-leprogramme ul li a {
+  color: black;
 }
 
 .layout-container > footer {
@@ -773,458 +815,6 @@ body.toolbar-fixed header[role=banner] {
   color: #038788;
 }
 
-.ornements_top_over {
-  pointer-events: none;
-  position: absolute;
-  width: 100vw;
-  height: 30vh;
-  right: -55vw;
-  top: -5vh;
-  z-index: 0;
-  transition: left 0.05s ease, top 0.05s ease;
-}
-.ornements_top_over > div {
-  position: absolute;
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 100%;
-  height: 100%;
-  transition: left 0.05s ease, top 0.05s ease;
-}
-.ornements_top_over > div:first-of-type {
-  background-image: url(../assets/formes/forme_4.png);
-  top: -3vh;
-  right: 5vw;
-}
-.ornements_top_over > div:nth-of-type(2) {
-  background-image: url(../assets/formes/forme_5.png);
-  right: -13vw;
-}
-.ornements_top_over > div:nth-of-type(3) {
-  background-image: url(../assets/formes/forme_3.png);
-  top: 4vh;
-  right: -8vw;
-}
-@media (min-width: 760px) {
-  .ornements_top_over {
-    left: -35vw;
-    top: -20vw;
-  }
-  .ornements_top_over > div {
-    transform: scaleX(-1);
-    left: -55vw;
-  }
-  .ornements_top_over > div:first-of-type {
-    display: none;
-  }
-  .ornements_top_over > div:nth-of-type(2) {
-    display: none;
-  }
-  .ornements_top_over > div:nth-of-type(3) {
-    background-image: url(../assets/formes/forme_6.png);
-  }
-}
-
-.ornements_top_under {
-  pointer-events: none;
-  display: none;
-  position: absolute;
-  width: 100vw;
-  height: 30vh;
-  left: -30vw;
-  top: 0vw;
-  transition: left 0.05s ease, top 0.05s ease;
-}
-.ornements_top_under > div {
-  position: absolute;
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 100%;
-  height: 100%;
-  transform: scaleX(-1);
-  transition: left 0.05s ease, top 0.05s ease;
-}
-.ornements_top_under > div:first-of-type {
-  background-image: url(../assets/formes/forme_4.png);
-  top: -3vh;
-  left: -45vw;
-}
-.ornements_top_under > div:nth-of-type(2) {
-  background-image: url(../assets/formes/forme_5.png);
-  left: -60vw;
-}
-@media (min-width: 760px) {
-  .ornements_top_under {
-    display: block;
-  }
-}
-@media (min-width: 1080px) {
-  .ornements_top_under > div:first-of-type {
-    top: 1vh;
-    left: -50vw;
-  }
-  .ornements_top_under > div:nth-of-type(2) {
-    top: 6vh;
-    left: -56.5vw;
-  }
-}
-
-.ornements_bottom_over {
-  pointer-events: none;
-  position: absolute;
-  width: 100vw;
-  height: 30vh;
-  left: -30vw;
-  bottom: -20vh;
-}
-.ornements_bottom_over > div {
-  position: absolute;
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 100%;
-  height: 100%;
-}
-.ornements_bottom_over > div:first-of-type {
-  background-image: url(../assets/formes/forme_1.png);
-  left: 8vw;
-  bottom: -4vh;
-}
-.ornements_bottom_over > div:nth-of-type(2) {
-  background-image: url(../assets/formes/forme_2.png);
-  bottom: -15vh;
-  left: -3vw;
-}
-@media (min-width: 760px) {
-  .ornements_bottom_over {
-    left: unset;
-    right: -8vw;
-    bottom: -25vh;
-  }
-  .ornements_bottom_over > div {
-    transform: scaleX(-1);
-  }
-  .ornements_bottom_over > div:nth-of-type(2) {
-    left: 18vw;
-    bottom: -11vh;
-  }
-}
-@media (min-width: 1080px) {
-  .ornements_bottom_over > div:first-of-type {
-    bottom: 6vh;
-    left: 20vw;
-  }
-  .ornements_bottom_over > div:nth-of-type(2) {
-    bottom: -9vh;
-    left: 25vw;
-  }
-}
-
-.fullpage.actus .ornements_top_over, .fullpage.actus .ornements_top_under {
-  top: -12vh;
-}
-.fullpage.actus .ornements_bottom_over {
-  bottom: -28vh;
-}
-.fullpage.actus .ornements_bottom_over > div:nth-of-type(2) {
-  bottom: -10vh;
-  left: -7vh;
-}
-@media (min-width: 760px) {
-  .fullpage.actus {
-    width: auto;
-    margin-left: 3vw;
-    margin-right: 3vw;
-  }
-  .fullpage.actus .actus_list {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (min-width: 1080px) {
-  .fullpage.actus .actus_list {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .fullpage.actus .ornements_top_over > div:nth-of-type(3) {
-    top: -28vh;
-  }
-  .fullpage.actus .ornements_bottom_over > div:first-of-type {
-    bottom: 0vh;
-    left: -3vw;
-  }
-  .fullpage.actus .ornements_bottom_over > div:nth-of-type(2) {
-    left: 6vh;
-  }
-}
-
-.carousel_container {
-  position: relative;
-}
-.carousel_container .ornements_carousel_top {
-  position: absolute;
-  display: none;
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-image: url(../assets/formes/forme_5.png);
-}
-@media (min-width: 760px) {
-  .carousel_container .ornements_carousel_top {
-    display: block;
-    width: 20vw;
-    height: 50vh;
-    top: -25vh;
-    left: 3vw;
-    transform: rotate(-90deg);
-  }
-}
-@media (min-width: 1080px) {
-  .carousel_container .ornements_carousel_top {
-    top: 20vh;
-    left: -10vw;
-    height: 30vh;
-  }
-}
-.carousel_container .ornements_carousel_bottom {
-  position: absolute;
-  display: none;
-  overflow: hidden;
-}
-@media (min-width: 760px) {
-  .carousel_container .ornements_carousel_bottom {
-    display: block;
-    width: 20vw;
-    height: 50vh;
-    right: 0;
-    bottom: 1px;
-  }
-  .carousel_container .ornements_carousel_bottom > div:first-of-type {
-    width: 100%;
-    height: 100%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-image: url(../assets/formes/forme_5.png);
-    position: absolute;
-    top: 35vh;
-  }
-  .carousel_container .ornements_carousel_bottom > div:nth-of-type(2) {
-    width: 100%;
-    height: 100%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-image: url(../assets/formes/forme_2.png);
-    position: absolute;
-    top: 40vh;
-    left: 12vw;
-  }
-}
-@media (min-width: 1080px) {
-  .carousel_container .ornements_carousel_bottom {
-    width: 12vw;
-    bottom: unset;
-    top: 0;
-    right: -2vw;
-  }
-  .carousel_container .ornements_carousel_bottom > div:first-of-type {
-    top: -16vh;
-  }
-  .carousel_container .ornements_carousel_bottom > div:nth-of-type(2) {
-    top: -8vh;
-    left: 4vw;
-  }
-}
-
-.ornements_presentation_left {
-  pointer-events: none;
-  position: absolute !important;
-  height: 20vh;
-  width: 20vw;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-  overflow: hidden;
-}
-.ornements_presentation_left > div {
-  background-repeat: no-repeat;
-  background-size: contain;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.ornements_presentation_left > div:first-of-type {
-  background-image: url(../assets/formes/forme_4.png);
-  transform: rotate(180deg);
-  width: 200%;
-  left: -20vw;
-  bottom: -8vh;
-}
-.ornements_presentation_left > div:nth-of-type(2) {
-  background-image: url(../assets/formes/forme_5.png);
-  transform: rotate(180deg);
-  width: 130%;
-  left: -10vw;
-  bottom: -5vh;
-}
-@media (min-width: 760px) {
-  .ornements_presentation_left > div:nth-of-type(2) {
-    width: 170%;
-    height: 120%;
-    left: -21vw;
-    bottom: -3vh;
-  }
-}
-.ornements_presentation_left > div:nth-of-type(3) {
-  background-image: url(../assets/formes/forme_3.png);
-  transform: rotate(180deg);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  width: 200%;
-  left: -22vw;
-  bottom: -3vh;
-}
-
-.ornements_presentation_right {
-  pointer-events: none;
-  position: absolute !important;
-  height: 20vh;
-  width: 20vw;
-  bottom: 0;
-  right: 0;
-  z-index: 0;
-  overflow: hidden;
-}
-.ornements_presentation_right > div {
-  background-repeat: no-repeat;
-  background-size: contain;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.ornements_presentation_right > div:first-of-type {
-  background-image: url(../assets/formes/forme_1.png);
-  transform: rotate(-90deg);
-  right: -15vw;
-  bottom: -6vh;
-}
-@media (min-width: 760px) {
-  .ornements_presentation_right > div:first-of-type {
-    bottom: -3vh;
-    right: -6vw;
-  }
-}
-.ornements_presentation_right > div:nth-of-type(2) {
-  background-image: url(../assets/formes/forme_2.png);
-  bottom: -12vh;
-  right: -12vw;
-}
-
-.ornements_consultation_left {
-  pointer-events: none;
-  position: absolute !important;
-  height: 20vh;
-  width: 30vw;
-  bottom: -8vh;
-  left: 0;
-  z-index: 0;
-  overflow: hidden;
-}
-.ornements_consultation_left > div {
-  background-repeat: no-repeat;
-  background-size: contain;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.ornements_consultation_left > div:first-of-type {
-  background-image: url(../assets/formes/forme_4.png);
-  transform: rotate(180deg);
-  width: 200%;
-  height: 120%;
-  left: -30vw;
-  bottom: -10vh;
-}
-@media (min-width: 1080px) {
-  .ornements_consultation_left > div:first-of-type {
-    transform: rotate(0deg);
-    bottom: 5vh;
-    left: 0;
-    width: 60%;
-  }
-}
-.ornements_consultation_left > div:nth-of-type(2) {
-  background-image: url(../assets/formes/forme_5.png);
-  transform: rotate(180deg);
-  left: -12vw;
-}
-@media (min-width: 1080px) {
-  .ornements_consultation_left > div:nth-of-type(2) {
-    left: -20vw;
-    top: -5vh;
-  }
-}
-@media (min-width: 1080px) {
-  .ornements_consultation_left {
-    top: 0;
-  }
-}
-
-.ornements_consultation_right {
-  pointer-events: none;
-  position: absolute !important;
-  height: 20vh;
-  width: 30vw;
-  bottom: -8vh;
-  right: 0;
-  z-index: 0;
-  overflow: hidden;
-}
-.ornements_consultation_right > div {
-  background-repeat: no-repeat;
-  background-size: contain;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.ornements_consultation_right > div:first-of-type {
-  background-image: url(../assets/formes/forme_1.png);
-  transform: rotate(-90deg);
-  width: 80%;
-  height: 80%;
-  right: -8vw;
-  bottom: -2vh;
-}
-@media (min-width: 1080px) {
-  .ornements_consultation_right > div:first-of-type {
-    right: -3vw;
-    bottom: 6vh;
-    transform: rotate(180deg);
-  }
-}
-.ornements_consultation_right > div:nth-of-type(2) {
-  background-image: url(../assets/formes/forme_3.png);
-  transform: rotate(180deg);
-  right: -4vw;
-  width: 100%;
-}
-@media (min-width: 760px) {
-  .ornements_consultation_right > div:nth-of-type(2) {
-    width: 30%;
-    bottom: 3vh;
-  }
-}
-@media (min-width: 1080px) {
-  .ornements_consultation_right > div:nth-of-type(2) {
-    transform: none;
-    width: 60%;
-  }
-}
-@media (min-width: 1080px) {
-  .ornements_consultation_right {
-    bottom: unset;
-    top: 0;
-    right: 0;
-  }
-}
-
 main.main-login, main.main-user, main.main-register, main.main-contact, main.main-ask, main.main-add-offre {
   min-height: 50vh;
 }
@@ -1314,6 +904,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 
 /* PAGES */
 .home_introduction {
+  background-color: rgb(27, 197, 112);
   position: relative;
   border-bottom: solid 2px #038788;
   width: 100%;
@@ -1635,6 +1226,13 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
     margin-left: 25%;
   }
 }
+@media (min-width: 760px) {
+  .fullpage.large-container {
+    width: auto;
+    margin-left: 3vw;
+    margin-right: 3vw;
+  }
+}
 
 .paragraph--type--membre-equipe {
   height: auto;
@@ -1856,13 +1454,6 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   transform: translateY(-2px);
 }
 
-@media (min-width: 760px) {
-  .fullpage.meetup {
-    width: auto;
-    margin-left: 3vw;
-    margin-right: 3vw;
-  }
-}
 .fullpage.meetup > h2 {
   border-bottom: solid 1px #038788;
   padding: 0;
@@ -2346,6 +1937,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   display: none;
 }
 
+@media (min-width: 760px) {
+  .fullpage.actus .actus_list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1080px) {
+  .fullpage.actus .actus_list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 .faq-fullpage {
   font-family: "Marianne", sans-serif;
   font-size: 1rem;

web/themes/erabletheme/js/erabletheme.js

@@ -44,7 +44,7 @@
           delay += opacityDelay;
         }
       }
-      
+
       // Toggle menu visibility on hamburger click
       hamburgerBtn.addEventListener("click", function(event) {
         event.stopPropagation();
@@ -57,8 +57,8 @@
             }, 700);
             toggleMenuItems('hide');
           } else {
-            menu.style.display = "flex";   
+            menu.style.display = "flex";
-            toggleMenuItems('show');       
+            toggleMenuItems('show');
           }
           setTimeout(() => {
             menu.classList.toggle("active");
@@ -70,7 +70,7 @@
 
 
       });
-    
+
       // Close menu when clicking outside of the menu
       document.addEventListener("click", function(event) {
         const isHamburgerClicked = event.target === hamburgerBtn;
@@ -98,7 +98,7 @@
       } else {
         fluoButtons = document.querySelectorAll('.liens_fixed > div > div:not(.visually-hidden), .file_fixed > div > div');
       }
-      
+
       let footer = document.querySelector('#footer_top');
       function positionFluoLinks() {
         for (let i = fluoButtons.length; i > 0 ; i--) {
@@ -107,7 +107,7 @@
           if (footer.offsetTop < window.innerHeight + window.scrollY && i === fluoButtons.length) {
             fluoButtons[i - 1].style.bottom = `${window.innerHeight - footer.offsetTop + window.scrollY + 30}px`;
           } else {
-            fluoButtons[i - 1].style.bottom = i === fluoButtons.length ? '30px' : `${prevButtonBottom + prevButtonHeight + 15}px`; 
+            fluoButtons[i - 1].style.bottom = i === fluoButtons.length ? '30px' : `${prevButtonBottom + prevButtonHeight + 15}px`;
           }
         }
       }
@@ -182,291 +182,46 @@
       }
 
       //
-      // Effets parallax
+      // Sous Menu display on hover
       //
 
-      let ornements, scrollHeight;
+      const programLink = document.querySelector("#block-erabletheme-navigationprincipale ul li:first-of-type");
-      function getElementsAndPositions() {
+      const programSubmenu = document.querySelector("#block-erabletheme-leprogramme");
-        scrollHeight = document.body.scrollHeight;
+      let isSubmenuOpen = false;
-        if (currentPage === 'fullpage') {
+
-          ornements = {
+      function showSubmenu() {
-            topUnderFirst : {
+        programLink.classList.add("submenu-open");
-              el : document.querySelector('.ornements_top_under > div:first-of-type'),
+        const rect = programLink.getBoundingClientRect();
-              values : window.innerWidth < 1080 ? { left : -45, top : -3 } : { left : -50, top : 1 },
+        programSubmenu.style.top = `${rect.bottom}px`;
-              mobileValues : { left : -45, top : -3 }
+        programSubmenu.style.left = `${rect.left}px`;
-            },
+        programSubmenu.style.display = "block";
-            topUnderSecond : {
+
-              el : document.querySelector('.ornements_top_under > div:last-of-type'),
+        programSubmenu.style.display = "block";
-              values : window.innerWidth < 1080 ? { left : -60, top : 0 } : { left : -56.5, top : 6 },
+        setTimeout(() => {
-              mobileValues : { left : -60, top : 0 }
+          programSubmenu.style.maxHeight = "50vh";
-            },
+        }, 10)
-            topOver : {
+
-              el : document.querySelector('.ornements_top_over'),
+        isSubmenuOpen = true;
-              values : { left : -36, top : -20 },
-              mobileValues : { right : -55, top : -5 }
-            },
-            bottomFirst : {
-              el : document.querySelector('.ornements_bottom_over > div:first-of-type'),
-              values : window.innerWidth < 1080 ? { left : -8, bottom : -4 } : { left : -20, bottom : 6 },
-              mobileValues : { left : -8, bottom : -4 }
-            },
-            bottomSecond : {
-              el : document.querySelector('.ornements_bottom_over > div:last-of-type'),
-              values : window.innerWidth < 1080 ? { left : 18, bottom : -11 } : { left : 25, bottom : -9 },
-              mobileValues : { left : -3, bottom : -15 }
-            }
-          };
-        } else if (currentPage === 'home') {
-          ornements = {
-            carouselTop : {
-              el : document.querySelector('.ornements_carousel_top'),
-              values : window.innerWidth < 1080 ? { left : 3, top : -25 } : { left : -10, top : 20 },
-            //  mobileValues : {}
-            },
-            carouselBottomFirst : {
-              el : document.querySelector('.ornements_carousel_bottom > div:first-of-type'),
-              values : window.innerWidth < 1080 ? { left : 0, top : 35 } : { left : 0, top : -16 },
-            //  mobileValues : {}
-            },
-            carouselBottomSecond : {
-              el : document.querySelector('.ornements_carousel_bottom > div:nth-of-type(2)'),
-              values : window.innerWidth < 1080 ? { left : 12, top : 40 } : { left : 4, top : -8 },
-            //  mobileValues : {}
-            },
-            presentationLeftFirst : {
-              el : document.querySelector('.ornements_presentation_left > div:first-of-type'),
-              values : { left : -20, bottom : -8 },
-              mobileValues : { left : -20, bottom : -8 }
-            },
-            presentationLeftSecond : {
-              el : document.querySelector('.ornements_presentation_left > div:nth-of-type(2)'),
-              values : { left : -21, bottom : -3 },
-              mobileValues : { left : -10, bottom : -5 }
-            },
-            presentationLeftThird : {
-              el : document.querySelector('.ornements_presentation_left > div:nth-of-type(3)'),
-              values : { left : -22, bottom : -3 },
-              mobileValues : { left : -22, bottom : -3 }
-            },
-            presentationRightFirst : {
-              el : document.querySelector('.ornements_presentation_right > div:first-of-type'),
-              values : { right : -6, bottom : -3 },
-              mobileValues : { right : -15, bottom : -6 }
-            },
-            presentationRightSecond : {
-              el : document.querySelector('.ornements_presentation_right > div:nth-of-type(2)'),
-              values : { right : -12, bottom : -12 },
-              mobileValues : { right : -12, bottom : -12 }
-            },
-            consultationLeftFirst : {
-              el : document.querySelector('.ornements_consultation_left > div:first-of-type'),
-              values : window.innerWidth < 1080 ? { left : -30, bottom : -10 } : { left : 0, bottom : 5 },
-              mobileValues : { left : -30, bottom : -10 }
-            },
-            consultationLeftSecond : {
-              el : document.querySelector('.ornements_consultation_left > div:nth-of-type(2)'),
-              values : window.innerWidth < 1080 ? { left : -12, top : 0 } : { left : -20, top : -5 },
-              mobileValues : { left : -12, top : 0 }
-            },
-            consultationRightFirst : {
-              el : document.querySelector('.ornements_consultation_right > div:first-of-type'),
-              values : window.innerWidth < 1080 ? { right : -8, bottom : -2 } : { right : -3, bottom : 6 },
-              mobileValues : { right : -8, bottom : -2 }
-            },
-            consultationRightSecond : {
-              el : document.querySelector('.ornements_consultation_right > div:nth-of-type(2)'),
-              values : { right : -4, bottom : 3 },
-              mobileValues : { right : -4, bottom : 0 }
-            }
-          };
-        }
       }
 
-      function moveElementsOnScroll() {
+      function hideSubmenu() {
-        if (currentPage === 'fullpage') {
+        programLink.classList.remove("submenu-open");
-          ornements.topOver.el.style.left = `${ornements.topOver.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
+        programSubmenu.style.maxHeight = "0px";
-          ornements.topOver.el.style.top = `${ornements.topOver.values.top * (window.innerHeight / 100) + window.scrollY / 5}px`;
+        isSubmenuOpen = false;
-  
+        setTimeout(() => {
-          ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left * (window.innerWidth / 100) - window.scrollY / 5}px`;
+          if (!isSubmenuOpen) {
-          ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top * (window.innerHeight / 100) + window.scrollY / 1.3}px`;
+            programSubmenu.style.display = "none";
-  
-          ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.values.left * (window.innerWidth / 100) - window.scrollY / 8}px`;
-          ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.values.top * (window.innerHeight / 100) + window.scrollY / 1.2}px`;
-  
-          ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
-  
-          ornements.bottomSecond.el.style.bottom = `${ornements.bottomFirst.values.bottom * (window.innerHeight / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
-        } else if (currentPage === 'home') {
-          ornements.carouselTop.el.style.left = `${ornements.carouselTop.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
-          ornements.carouselTop.el.style.top = `${ornements.carouselTop.values.top * (window.innerHeight / 100) + window.scrollY / 8}px`;
-
-          ornements.carouselBottomFirst.el.style.left = `${ornements.carouselBottomFirst.values.left * (window.innerWidth / 100) + window.scrollY / 5}px`;
-          ornements.carouselBottomFirst.el.style.top = `${ornements.carouselBottomFirst.values.top * (window.innerHeight / 100) + window.scrollY / 1.3}px`;
-
-          ornements.carouselBottomSecond.el.style.left = `${ornements.carouselBottomSecond.values.left * (window.innerWidth / 100) - window.scrollY / 8}px`;
-          ornements.carouselBottomSecond.el.style.top = `${ornements.carouselBottomSecond.values.top * (window.innerHeight / 100) + window.scrollY / 1.2}px`;
-
-
-          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
-
-          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 3)}px`;
-
-          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
-
-
-          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
-
-          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 3)}px`;
-
-
-
-
-          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 6)}px`;
-
-          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
-
-
-          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 4)}px`;
-
-          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
-
-        }
-      }
-
-      function resetElementsPosition() {
-        if (currentPage === 'fullpage') {
-
-          ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left}vw`;
-          ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top}vh`;
-  
-          ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.values.left}vw`;
-          ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.values.top}vh`;
-  
-          ornements.topOver.el.style.left = `${ornements.topOver.values.left}vw`;
-          ornements.topOver.el.style.top = `${ornements.topOver.values.top}vh`;
-  
-          ornements.bottomFirst.el.style.left = "unset",
-          ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.values.left}vw`;
-          ornements.bottomFirst.el.style.bottom = `${ornements.bottomFirst.values.bottom}vh`;
-  
-          ornements.bottomSecond.el.style.top = "unset";
-          ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.values.left}vw`;
-          ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.values.bottom}vh`;
-
-        } else if (currentPage === 'home') {
-
-          ornements.carouselTop.el.style.left = `${ornements.carouselTop.values.left}vw`;
-          ornements.carouselTop.el.style.top = `${ornements.carouselTop.values.top}vh`;
-
-          ornements.carouselBottomFirst.el.style.left = `${ornements.carouselBottomFirst.values.left}vw`;
-          ornements.carouselBottomFirst.el.style.top = `${ornements.carouselBottomFirst.values.top}vh`;
-
-          ornements.carouselBottomSecond.el.style.left = `${ornements.carouselBottomSecond.values.left}vw`;
-          ornements.carouselBottomSecond.el.style.top = `${ornements.carouselBottomSecond.values.top}vh`;
-
-          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.values.left}vw`;
-          ornements.presentationLeftFirst.el.style.bottom = `${ornements.presentationLeftFirst.values.bottom}vh`;
-
-          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.values.left}vw`;
-          ornements.presentationLeftSecond.el.style.bottom = `${ornements.presentationLeftSecond.values.bottom}vh`;
-
-          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.values.left}vw`;
-          ornements.presentationLeftThird.el.style.bottom = `${ornements.presentationLeftThird.values.bottom}vh`;
-
-          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.values.right}vw`;
-          ornements.presentationRightFirst.el.style.bottom = `${ornements.presentationRightFirst.values.bottom}vh`;
-
-          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.values.right}vw`;
-          ornements.presentationRightSecond.el.style.bottom = `${ornements.presentationRightSecond.values.bottom}vh`;
-
-          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.values.left}vw`;
-          ornements.consultationLeftFirst.el.style.bottom = `${ornements.consultationLeftFirst.values.bottom}vh`;
-
-          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.values.left}vw`;
-          ornements.consultationLeftSecond.el.style.top = `${ornements.consultationLeftSecond.values.top}vh`;
-
-          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.values.right}vw`;
-          ornements.consultationRightFirst.el.style.bottom = `${ornements.consultationRightFirst.values.bottom}vh`;
-
-          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.values.right}vw`;
-          ornements.consultationRightSecond.el.style.bottom = `${ornements.consultationRightSecond.values.bottom}vh`;
-        }
-      }
-
-      function resetMobileElementsPosition() {
-        if (currentPage === 'fullpage') {
-
-          ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.mobileValues.left}vw`;
-          ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.mobileValues.top}vh`;
-  
-          ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.mobileValues.left}vw`;
-          ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.mobileValues.top}vh`;
-  
-          ornements.topOver.el.style.left = "unset";
-          ornements.topOver.el.style.right = `${ornements.topOver.mobileValues.right}vw`;
-          ornements.topOver.el.style.top = `${ornements.topOver.mobileValues.top}vh`;
-  
-          ornements.bottomFirst.el.style.left = "unset",
-          ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.mobileValues.left}vw`;
-          ornements.bottomFirst.el.style.bottom = `${ornements.bottomFirst.mobileValues.bottom}vh`;
-  
-          ornements.bottomSecond.el.style.top = "unset";
-          ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.mobileValues.left}vw`;
-          ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.mobileValues.bottom}vh`;
-
-        } else if (currentPage === 'home') {
-
-          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.mobileValues.left}vw`;
-          ornements.presentationLeftFirst.el.style.bottom = `${ornements.presentationLeftFirst.mobileValues.bottom}vh`;
-
-          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.mobileValues.left}vw`;
-          ornements.presentationLeftSecond.el.style.bottom = `${ornements.presentationLeftSecond.mobileValues.bottom}vh`;
-
-          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.mobileValues.left}vw`;
-          ornements.presentationLeftThird.el.style.bottom = `${ornements.presentationLeftThird.mobileValues.bottom}vh`;
-
-          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.mobileValues.right}vw`;
-          ornements.presentationRightFirst.el.style.bottom = `${ornements.presentationRightFirst.mobileValues.bottom}vh`;
-
-          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.mobileValues.right}vw`;
-          ornements.presentationRightSecond.el.style.bottom = `${ornements.presentationRightSecond.mobileValues.bottom}vh`;
-
-          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.mobileValues.left}vw`;
-          ornements.consultationLeftFirst.el.style.bottom = `${ornements.consultationLeftFirst.mobileValues.bottom}vh`;
-
-          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.mobileValues.left}vw`;
-          ornements.consultationLeftSecond.el.style.top = `${ornements.consultationLeftSecond.mobileValues.top}vh`;
-
-          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.mobileValues.right}vw`;
-          ornements.consultationRightFirst.el.style.bottom = `${ornements.consultationRightFirst.mobileValues.bottom}vh`;
-
-          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.mobileValues.right}vw`;
-          ornements.consultationRightSecond.el.style.bottom = `${ornements.consultationRightSecond.mobileValues.bottom}vh`;
-        }
-      }
-
-      function setupParallax() {
-        getElementsAndPositions();
-        resetElementsPosition();
-        window.addEventListener("scroll", moveElementsOnScroll);
-      }
-
-      if (currentPage) {
-        if (window.innerWidth > 760) setupParallax();
-        
-        window.addEventListener('resize', () => { 
-          window.scrollTo(0, 0);
-          window.removeEventListener("scroll", moveElementsOnScroll); 
-          if (window.innerWidth > 760) {
-            setupParallax();
-          } else if (ornements) {
-            resetMobileElementsPosition();
           }
-        });
+        }, 600);
       }
 
+      programLink.addEventListener("mouseenter", showSubmenu);
+      programLink.addEventListener("mouseleave", hideSubmenu);
+
+      programSubmenu.addEventListener("mouseenter", showSubmenu);
+      programSubmenu.addEventListener("mouseleave", hideSubmenu);
 
     }
-  };
+  }
 
 } (Drupal));

web/themes/erabletheme/scss/_actualites.scss

@@ -0,0 +1,13 @@
+.fullpage.actus {
+  @media (min-width: $breakpoint_tablet) {
+    .actus_list {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (min-width: $breakpoint_desktop) {
+    .actus_list {
+        grid-template-columns: repeat(3, 1fr);
+    }
+  }
+}

web/themes/erabletheme/scss/_fullpage.scss

@@ -44,7 +44,7 @@
             font-size: $l_font_size;
             padding: 0 $x_margin;
         }
-        
+
         p {
             @include main_text_content();
             padding: 0 $x_margin;
@@ -103,4 +103,12 @@
         width: 50%;
         margin-left: 25%;
     }
-}
+
+    &.large-container {
+      @media (min-width: $breakpoint_tablet) {
+        width: auto;
+        margin-left: $x_margin;
+        margin-right: $x_margin;
+      }
+    }
+}

web/themes/erabletheme/scss/_home.scss

@@ -1,4 +1,5 @@
 .home_introduction {
+    background-color: rgb(27, 197, 112); // to remove
     position: relative;
     border-bottom: solid 2px $teal;
     width: 100%;
@@ -108,4 +109,4 @@
         padding-left: 12.5vw;
         padding-right: 12.5vw;
     }
-}
+}

web/themes/erabletheme/scss/_meetup.scss

@@ -1,9 +1,4 @@
 .fullpage.meetup {
-    @media (min-width: $breakpoint_tablet) {
-        width: auto;
-        margin-left: $x_margin;
-        margin-right: $x_margin;
-    }
     > h2 {
         border-bottom: solid 1px $teal;
         padding: 0;
@@ -415,4 +410,4 @@
             }
         }
     }
-}
+}

web/themes/erabletheme/scss/global/variables/_layout.scss

@@ -5,10 +5,11 @@ $y_margins: 2vh;
 
 $breakpoint_tablet: 760px;
 $breakpoint_desktop: 1080px;
+$breakpoint_desktop_large: 1600px;
 
 .layout-container {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 100vh;
-}
+}

web/themes/erabletheme/scss/partials/_forms.scss

@@ -26,10 +26,10 @@ main.main-login, main.main-user, main.main-register, main.main-contact, main.mai
                 justify-content: center;
                 form {
                     width: 95%;
+                    font-family: 'Marianne', sans-serif;
                     @media screen and (min-width: $breakpoint_desktop) {
                         padding: 0 20vw;
                     }
-                    font-family: 'Marianne', sans-serif;
                     .form-item {
                         margin: 1.8rem 0;
                         .form-checkbox {
@@ -75,4 +75,4 @@ main.main-login, main.main-user, main.main-register, main.main-contact, main.mai
 }
 #edit-field-description-0-format {
     display: none;
-}
+}

web/themes/erabletheme/scss/partials/_header.scss

@@ -13,15 +13,17 @@ body.toolbar-fixed header[role="banner"] {
     //overflow: hidden;
     header[role="banner"] {
         width: 100%;
-        background: white;
+        background-color: white;
-        z-index: 99; 
+        z-index: 99;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+        // box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
         @media (min-width: $breakpoint_desktop) {
             position: sticky;
             top: -12vh;
             box-shadow: none;
         }
-        > div {
+        > div:first-of-type {
+            z-index: 99;
+            position: relative;
             display: grid;
             grid-template-columns: repeat(16, 1fr);
             > div{
@@ -85,12 +87,15 @@ body.toolbar-fixed header[role="banner"] {
                     }
                 }
                 @media (min-width: $breakpoint_desktop) {
-                    grid-column: 3 / 6;
+                  grid-column: 3 / 8;
-                    > div > div > a > img {
+                }
-                        transform: translateX(-40px);
+                @media (min-width: $breakpoint_desktop_large) {
-                        padding-top: 30px;
+                  grid-column: 3 / 6;
-                        padding-bottom: 30px;
+                  > div > div > a > img {
-                    }
+                      transform: translateX(-40px);
+                      padding-top: 30px;
+                      padding-bottom: 30px;
+                  }
                 }
             }
             #block-erabletheme-logoerable {
@@ -216,8 +221,8 @@ body.toolbar-fixed header[role="banner"] {
                                         display: none;
                                     }
                                 }
-                            } 
+                            }
-                            
+
 
                         }
                     }
@@ -253,12 +258,18 @@ body.toolbar-fixed header[role="banner"] {
                 margin-top: 0 !important;
             }
         }
+        > div:nth-of-type(2) {
+          z-index: 98;
+          position: relative;
+        }
     }
     #block-erabletheme-navigationprincipale {
         width: 100vw;
         display: none;
-        background-color: white;
+        position: absolute;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+        padding-top: 1rem;
+        // background-color: white;
+        // box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
         @media (min-width: $breakpoint_desktop) {
             display: block;
         }
@@ -267,25 +278,57 @@ body.toolbar-fixed header[role="banner"] {
             display: flex;
             padding: 1rem 10vw;
             justify-content: space-around;
-            border-top: solid 1px $dark_green;
+            // border-top: solid 1px $dark_green;
             li {
                 font-family: 'Marianne', sans-serif;
                 font-size: $m_font_size;
+                padding: 4px 12px;
+                background-color: white;
+                transition: background-color 0.3s ease;
+                &:first-of-type {
+                  display: flex;
+                  justify-items: center;
+                  &::after {
+                    content: url(../assets/icons/arrow-down-s-line.svg);
+                    display: inline-block;
+                    height: 1rem;
+                    width: 1rem;
+                    margin-left: 0.2rem;
+                  }
+                }
+                &:hover, &.submenu-open {
+                  background-color: $fluo_green;
+                }
                 a {
-                    font-weight: 800;
+                  font-weight: 800;
-                    padding: 4px 6px;
+                  color: black;
-                    color: black;
+                  &:is-active {
-                    background-color: rgba(255, 255, 255, 0);
-                    transition: background-color 0.3s ease;
-                }
-                a:hover {
-                    background-color: $fluo_green;
-                }
-                a.is-active {
                     background-color: $fluo_green;
+                  }
                 }
             }
         }
     }
-
+    #block-erabletheme-leprogramme {
+      position: absolute;
+      background-color: white;
+      max-height: 0vh;
+      overflow: hidden;
+      display: none;
+      transition: max-height 0.6s ease;
+      > h2 {
+        display: none;
+      }
+      ul {
+        padding: 1rem 1.5rem;
+        li {
+          font-family: 'Marianne', sans-serif;
+          font-size: $m_font_size;
+          margin: 0.5rem 0;
+          a {
+            color: black;
+          }
+        }
+      }
+    }
 }

web/themes/erabletheme/scss/partials/_ornements.scss

@@ -28,7 +28,7 @@
         background-image: url(../assets/formes/forme_3.png);
         top: 4vh;
         right: -8vw;
-    }    
+    }
     @media (min-width: $breakpoint_tablet) {
         left: -35vw;
         top: -20vw;
@@ -202,7 +202,7 @@
             height: 30vh;
         }
     }
-    
+
     .ornements_carousel_bottom {
         position: absolute;
         display: none;
@@ -358,8 +358,8 @@
             bottom: 5vh;
             left: 0;
             width: 60%;
-        }    
+        }
-    
+
     }
     > div:nth-of-type(2) {
         background-image: url(../assets/formes/forme_5.png);
@@ -372,11 +372,11 @@
     }
     @media (min-width: $breakpoint_desktop) {
         top:0;
-    }    
+    }
 }
 
 .ornements_consultation_right {
-    pointer-events: none;    
+    pointer-events: none;
     position: absolute !important;
     height: 20vh;
     width: 30vw;
@@ -423,4 +423,4 @@
         top: 0;
         right: 0;
     }
-}
+}

web/themes/erabletheme/scss/styles.scss

@@ -12,7 +12,6 @@
 @import "partials/_carousel";
 @import "partials/_articles";
 @import "partials/_articles_teaser";
-@import "partials/_ornements.scss";
 @import "partials/_forms.scss";
 
 /* PAGES */
@@ -23,4 +22,5 @@
 @import "_partenaires.scss";
 @import "_consultation.scss";
 @import "_meetup.scss";
-@import "_faq.scss";
+@import "_actualites.scss";
+@import "_faq.scss";

web/themes/erabletheme/templates/block--views-block--actus-block-1.html.twig

@@ -29,8 +29,6 @@
  */
 #}
 <div class="carousel_container">
-  <div class="ornements_carousel_top"></div>
-  <div class="ornements_carousel_bottom"><div></div><div></div></div>
   <div{{ attributes.addClass('slick-container') }}>
     {{ title_prefix }}
     {% if label %}

web/themes/erabletheme/templates/block--views-block--home-blocks-block-1.html.twig

@@ -30,15 +30,6 @@
 #}
 <div{{ attributes }}>
     <div class="home_introduction">
-        <div class="ornements_presentation_left">
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <div class="ornements_presentation_right">
-            <div></div>
-            <div></div>
-        </div>
         <div class="logo">
             <img src="{{ directory }}/assets/logo_erable.png" alt="Logo Érable" />
         </div>

web/themes/erabletheme/templates/block--views-block--home-blocks-block-2.html.twig

@@ -30,14 +30,6 @@
 #}
 <div{{ attributes }}>
   <div class="home_consultation">
-    <div class="ornements_consultation_left">
-        <div></div>
-        <div></div>
-    </div>
-    <div class="ornements_consultation_right">
-        <div></div>
-        <div></div>
-    </div>
     {% block content %}
       {{ content }}
     {% endblock %}

web/themes/erabletheme/templates/node/node--actualite--full.html.twig

@@ -68,21 +68,7 @@
  * @ingroup themeable
  */
 #}
-<div class="ornements_top_under">
-  <div></div>
-  <div></div>
-</div>
 <article{{ attributes }} class="actu_full fullpage">
-  <div class="ornements_top_over">
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-  <div class="ornements_bottom_over">
-    <div></div>
-    <div></div>
-  </div>
-
   <div class="retour_actus">
     <a href="/actualites">← Retour aux actualités</a>
   </div>

web/themes/erabletheme/templates/node/node--content-global.html.twig

@@ -69,21 +69,7 @@
  */
 #}
 
-<div class="ornements_top_under">
-  <div></div>
-  <div></div>
-</div>
 <article class="fullpage">
-  <div class="ornements_top_over">
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-  <div class="ornements_bottom_over">
-    <div></div>
-    <div></div>
-  </div>
-
   <div class="fullpage_content">
 
     <h2>{{ label }}</h2>

web/themes/erabletheme/templates/region--faq.html.twig

@@ -15,20 +15,7 @@
  */
 #}
 {% if content %}
-  <div class="ornements_top_under">
-      <div></div>
-      <div></div>
-  </div>
   <div{{ attributes }} class="fullpage faq-fullpage">
-    <div class="ornements_top_over">
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
-    <div class="ornements_bottom_over">
-        <div></div>
-        <div></div>
-    </div>
     <h2>{{ elements.erabletheme_contenudelapageprincipale.content['#title'] }}</h2>
     {{ content }}
   </div>

web/themes/erabletheme/templates/views-view--content-gouvernance.html.twig

@@ -38,21 +38,7 @@
   ]
 %}
 <div{{ attributes.addClass(classes) }}>
-  <div class="ornements_top_under">
-    <div></div>
-    <div></div>
-  </div>
  <div class="content_gouvernance fullpage">
-    <div class="ornements_top_over">
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-    <div class="ornements_bottom_over">
-      <div></div>
-      <div></div>
-    </div>
-
     <h2>
         {{ view_array['#title']['#markup'] }}
     </h2>
@@ -82,6 +68,6 @@
     {{ attachment_after }}
     {{ more }}
   </div>
- 
+
   {{ feed_icons }}
 </div>

web/themes/erabletheme/templates/views-view--content-meetup.html.twig

@@ -37,20 +37,7 @@
     dom_id ? 'js-view-dom-id-' ~ dom_id,
   ]
 %}
-<div class="ornements_top_under">
+<div{{ attributes.addClass(classes).addClass('fullpage', 'meetup', 'large-container') }}>
-  <div></div>
-  <div></div>
-</div>
-<div{{ attributes.addClass(classes).addClass('fullpage', 'meetup') }}>
-  <div class="ornements_top_over">
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-  <div class="ornements_bottom_over">
-    <div></div>
-    <div></div>
-  </div>
   <h2>
     {{ view_array['#title']['#markup'] }}
   </h2>

web/themes/erabletheme/templates/views-view--content-partenaires.html.twig

@@ -38,38 +38,24 @@
       ]
     %}
     <div{{ attributes.addClass(classes) }}>
-    <div class="ornements_top_under">
-      <div></div>
-      <div></div>
-    </div>
      <div class="content_partenaires fullpage">
-      <div class="ornements_top_over">
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-      <div class="ornements_bottom_over">
-        <div></div>
-        <div></div>
-      </div>
-
         <h2>
             {{ view_array['#title']['#markup'] }}
         </h2>
-    
+
         {{ title_prefix }}
         {{ title }}
         {{ title_suffix }}
-    
+
         {% if header %}
           <header>
             {{ header }}
           </header>
         {% endif %}
-    
+
         {{ exposed }}
         {{ attachment_before }}
-    
+
         {% if rows -%}
           <div>
             {{ rows }}
@@ -78,11 +64,10 @@
           {{ empty }}
         {% endif %}
         {{ pager }}
-    
+
         {{ attachment_after }}
         {{ more }}
       </div>
-     
+
       {{ feed_icons }}
     </div>
-    

web/themes/erabletheme/templates/views-view--page-actus.html.twig

@@ -37,20 +37,7 @@
     dom_id ? 'js-view-dom-id-' ~ dom_id,
   ]
 %}
-<div class="ornements_top_under">
+<div{{ attributes.addClass(classes).addClass('fullpage', 'actus', 'large-container') }}>
-  <div></div>
-  <div></div>
-</div>
-<div{{ attributes.addClass(classes).addClass('fullpage', 'actus') }}>
-  <div class="ornements_top_over">
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-  <div class="ornements_bottom_over">
-    <div></div>
-    <div></div>
-  </div>
   <h2>
     {{ view_array['#title']['#markup'] }}
   </h2>