parallax ornements + modifs d'après kanboard

web/themes/erabletheme/css/styles.css

@@ -605,11 +605,12 @@ a {
 }
 .actu_full .retour_actus {
   padding-top: 3vh;
+  padding-left: 3vw;
+}
+.actu_full .retour_actus a {
   font-size: 0.8rem;
   font-weight: 800;
   color: #038788;
-  padding-left: 3vw;
-  cursor: pointer;
 }
 .actu_full .article_meta {
   padding-left: 3vw;
@@ -756,6 +757,7 @@ a {
   right: -55vw;
   top: -5vh;
   z-index: 0;
+  transition: left 0.05s ease, top 0.05s ease;
 }
 .ornements_top_over > div {
   position: absolute;
@@ -763,6 +765,7 @@ a {
   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);
@@ -781,7 +784,7 @@ a {
 @media (min-width: 760px) {
   .ornements_top_over {
     left: -40vw;
-    top: -10vw;
+    top: -16vw;
   }
   .ornements_top_over > div {
     transform: scaleX(-1);
@@ -802,12 +805,14 @@ a {
 }
 
 .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;
@@ -816,6 +821,7 @@ a {
   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);
@@ -1006,6 +1012,7 @@ a {
 }
 
 .ornements_presentation_left {
+  pointer-events: none;
   position: absolute !important;
   height: 20vh;
   width: 20vw;
@@ -1055,6 +1062,7 @@ a {
 }
 
 .ornements_presentation_right {
+  pointer-events: none;
   position: absolute !important;
   height: 20vh;
   width: 20vw;
@@ -1073,15 +1081,192 @@ a {
 .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: unset;
+    top: -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;
+    right: -4vw;
+    width: 60%;
+  }
+}
+@media (min-width: 1080px) {
+  .ornements_consultation_right {
+    bottom: unset;
+    top: 0;
+    right: 0;
+  }
+}
+
+.login, .user {
+  width: 100vw;
+  height: 50vh;
+  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
+  padding-top: 15vh;
+}
+.login > h2, .user > h2 {
+  font-family: "Barlow", sans-serif;
+  color: black;
+  font-size: 1.6rem;
+  text-align: center;
+}
+.login > div, .user > div {
+  height: 100%;
+}
+.login > div > div:not(.hidden), .user > div > div:not(.hidden) {
+  margin-top: 5vh !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login > div > div:not(.hidden) form, .user > div > div:not(.hidden) form {
+  font-family: "Marianne", sans-serif;
+}
+.login > div > div:not(.hidden) form .form-item, .user > div > div:not(.hidden) form .form-item {
+  margin: 1.8rem 0;
+}
+.login > div > div:not(.hidden) form .form-item .form-checkbox, .user > div > div:not(.hidden) form .form-item .form-checkbox {
+  width: 1rem;
+  height: 1rem;
+  -webkit-appearance: auto;
+}
+.login > div > div:not(.hidden) form .form-item .form-required, .user > div > div:not(.hidden) form .form-item .form-required {
+  font-weight: 800;
+  padding-right: 1rem;
+}
+.login > div > div:not(.hidden) form .form-item .description, .user > div > div:not(.hidden) form .form-item .description {
+  margin-top: 0.3rem;
+}
+.login > div > div:not(.hidden) form input, .user > div > div:not(.hidden) form input {
+  border: solid 1px #038788;
+}
+.login > div > div:not(.hidden) form .button, .user > div > div:not(.hidden) form .button {
+  font-family: "Marianne", sans-serif;
+  font-weight: 800;
+  border: solid 1px #038788;
+  background-color: white;
+  cursor: pointer;
+}
+.login > div > div:not(.hidden) form .button:hover, .user > div > div:not(.hidden) form .button:hover {
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.user .contextual-region > div {
+  display: flex;
+  font-family: "Marianne", sans-serif;
+}
+.user .contextual-region > div > h4 {
+  padding-right: 0.5rem;
+}
+
 /* PAGES */
 .home_introduction {
   position: relative;
@@ -1171,6 +1356,7 @@ a {
 }
 
 .home_consultation {
+  position: relative;
   background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
   width: 100%;
   padding: 4rem 0;
@@ -1197,6 +1383,13 @@ a {
     max-width: 50vw;
   }
 }
+.home_consultation h2 + div h2, .home_consultation h2 + div h3 {
+  font-family: "Barlow", sans-serif;
+  color: black;
+  font-size: 1.6rem;
+  margin-left: 12.5vw;
+  max-width: 50vw;
+}
 .home_consultation article > div {
   height: unset !important;
 }
@@ -1397,7 +1590,7 @@ a {
 .content_gouvernance .views-row article .paragraph--type--membre-equipe {
   height: auto;
   display: grid;
-  grid-template-columns: 30vw 1fr;
+  grid-template-columns: 30vw auto 1fr;
   grid-auto-rows: auto;
   margin-bottom: 5vh;
 }
@@ -1416,25 +1609,27 @@ a {
   width: 100%;
   height: auto;
 }
-.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2) {
+.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2),
+.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) {
   font-family: "Marianne", sans-serif;
   font-size: 1.3rem;
   color: #038788;
   font-weight: 800;
   margin-bottom: 2vh;
-  align-self: center;
+  align-self: flex-start;
 }
 .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) {
-  display: none;
+  padding-left: 0.5rem;
 }
 .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:last-of-type {
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
+  grid-column: 2/4;
 }
 @media (min-width: 760px) {
   .content_gouvernance .views-row article .paragraph--type--membre-equipe {
-    grid-template-columns: 10vw 1fr;
+    grid-template-columns: 10vw auto 1fr;
   }
   .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type > div {
     width: 10vw;

web/themes/erabletheme/js/erabletheme.js

@@ -128,6 +128,117 @@
       let socialsContainer = document.createElement('li');
       socialsContainer.append(socialsClone);
       menuContainer.append(socialsContainer);
+
+      //
+      // Effets parallax
+      //
+      let ornements, scrollHeight;
+      function getElementsAndPositions() {
+        scrollHeight = document.body.scrollHeight;
+        ornements = {
+          topUnderFirst : {
+            el : document.querySelector('.ornements_top_under > div:first-of-type'),
+            values : window.innerWidth < 1080 ? { left : -45, top : -3 } : { left : -50, top : 1 },
+            mobileValues : { left : -45, top : -3 }
+          },
+          topUnderSecond : {
+            el : document.querySelector('.ornements_top_under > div:last-of-type'),
+            values : window.innerWidth < 1080 ? { left : -60, top : 0 } : { left : -56.5, top : 6 },
+            mobileValues : { left : -60, top : 0 }
+          },
+          topOver : {
+            el : document.querySelector('.ornements_top_over'),
+            values : { left : -40, top : -16 },
+            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 }
+          }
+        }
+      }
+
+      function moveElementsOnScroll() {
+        ornements.topOver.el.style.left = `${ornements.topOver.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
+        ornements.topOver.el.style.top = `${ornements.topOver.values.top * (window.innerHeight / 100) + window.scrollY / 1.1}px`;
+
+        ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left * (window.innerWidth / 100) - window.scrollY / 5}px`;
+        ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top * (window.innerHeight / 100) + window.scrollY / 1.3}px`;
+
+        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.top = `${ornements.bottomFirst.values.bottom * (window.innerHeight / 100) + ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
+      }
+
+      function resetElementsPosition() {
+        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`;
+      }
+
+      function resetMobileElementsPosition() {
+        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`;
+      }
+
+      function setupResize() {
+        getElementsAndPositions();
+        resetElementsPosition();
+        window.addEventListener("scroll", moveElementsOnScroll);
+      }
+
+      if (document.querySelector('.fullpage:not(.actus)')) {
+        if (window.innerWidth > 760) setupResize();
+        
+        window.addEventListener('resize', () => { 
+          window.scrollTo(0, 0);
+          window.removeEventListener("scroll", moveElementsOnScroll); 
+          if (window.innerWidth > 760) {
+            setupResize();
+          } else if (ornements) {
+            resetMobileElementsPosition();
+          }
+        });
+      }
+
+
     }
   };
 

web/themes/erabletheme/scss/_gouvernance.scss

@@ -14,7 +14,7 @@
             .paragraph--type--membre-equipe {
                 height: auto;
                 display: grid;
-                grid-template-columns: 30vw 1fr;
+                grid-template-columns: 30vw auto 1fr;
                 grid-auto-rows: auto;
                 margin-bottom: 5vh;
                 > div:first-of-type {
@@ -33,21 +33,23 @@
                     }
                 }
                 
-                > div:nth-of-type(2) {
+                > div:nth-of-type(2),
+                > div:nth-of-type(3) {
                     @include sous_titre();
                     margin-bottom: 2vh;
-                    align-self: center;
+                    align-self: flex-start;
                 }
     
                 > div:nth-of-type(3) {
-                    display: none;
+                    padding-left: 0.5rem;
                 }
     
                 > div:last-of-type {
                     @include main_text_content();
+                    grid-column: 2 / 4;;
                 }
                 @media (min-width: $breakpoint_tablet) {
-                    grid-template-columns: 10vw 1fr;
+                    grid-template-columns: 10vw auto 1fr;
                     > div:first-of-type > div {
                             width: 10vw;
                             height: 10vw;

web/themes/erabletheme/scss/_home.scss

@@ -56,6 +56,7 @@
 }
 
 .home_consultation {
+    position: relative;
     @include beige_gradient();
     width: 100%;
     padding: 4rem 0;
@@ -70,6 +71,13 @@
             max-width: 50vw;
         }
     }
+    h2 + div {
+        h2, h3 {
+            @include sous_titre_alt();
+            margin-left: 12.5vw;
+            max-width: 50vw;
+        }
+    }
     article > div {
         height: unset !important;
         p {

web/themes/erabletheme/scss/partials/_articles.scss

@@ -4,11 +4,12 @@
     }
     .retour_actus {
         padding-top: 3vh;
+        padding-left: $x_margin;
+        a {
             font-size: $sm_font_size;
             font-weight: 800;
             color: $teal;
-        padding-left: $x_margin;
+        }
-        cursor: pointer;
     }
     .article_meta {
         padding-left: $x_margin;

web/themes/erabletheme/scss/partials/_login.scss

@@ -0,0 +1,61 @@
+.login, .user {
+    width: 100vw;
+    height: 50vh;
+    @include beige_gradient();
+    padding-top: 15vh;
+    > h2 {
+        @include sous_titre_alt();
+        text-align: center;
+    }
+    > div {
+        height: 100%;
+        > div:not(.hidden) {
+          //  height: 100%;
+            margin-top: 5vh !important;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            form {
+                font-family: 'Marianne', sans-serif;
+                .form-item {
+                    margin: 1.8rem 0;
+                    .form-checkbox {
+                        width: 1rem;
+                        height: 1rem;
+                        -webkit-appearance: auto;
+                    }
+                    .form-required {
+                        font-weight: 800;
+                        padding-right: 1rem;
+                    }
+                    .description {
+                        margin-top: 0.3rem;
+                    }
+                }
+                input {
+                    border: solid 1px $teal;
+                }
+                .button {
+                    font-family: 'Marianne', sans-serif;
+                    font-weight: 800;
+                    border: solid 1px $teal;
+                    background-color: white;
+                    cursor: pointer;
+                }
+                .button:hover {
+                    background-color: rgba(255, 255, 255, 0.6);
+                }
+            }
+        }
+    }
+}
+
+.user {
+    .contextual-region > div {
+        display: flex;
+        font-family: 'Marianne', sans-serif;
+        > h4 {
+            padding-right: 0.5rem;
+        }
+    }
+}

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

@@ -6,12 +6,14 @@
     right: -55vw;
     top: -5vh;
     z-index: 0;
+    transition: left 0.05s ease, top 0.05s ease;
     > div {
         position: absolute;
         background-repeat: no-repeat;
         background-size: contain;
         width: 100%;
         height: 100%;
+        transition: left 0.05s ease, top 0.05s ease;
     }
     > div:first-of-type {
         background-image: url(../assets/formes/forme_4.png);
@@ -29,7 +31,7 @@
     }    
     @media (min-width: $breakpoint_tablet) {
         left: -40vw;
-        top: -10vw;
+        top: -16vw;
         > div {
             transform: scaleX(-1);
             left: -55vw;
@@ -50,12 +52,14 @@
 }
 
 .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;
     > div {
         position: absolute;
         background-repeat: no-repeat;
@@ -63,6 +67,7 @@
         width: 100%;
         height: 100%;
         transform: scaleX(-1);
+        transition: left 0.05s ease, top 0.05s ease;
     }
     > div:first-of-type {
         background-image: url(../assets/formes/forme_4.png);
@@ -248,10 +253,10 @@
 }
 
 .ornements_presentation_left {
+    pointer-events: none;
     position: absolute !important;
     height: 20vh;
     width: 20vw;
- //   background-color: red;
     bottom: 0;
     left: 0;
     z-index: 0;
@@ -296,6 +301,7 @@
 }
 
 .ornements_presentation_right {
+    pointer-events: none;
     position: absolute !important;
     height: 20vh;
     width: 20vw;
@@ -313,12 +319,113 @@
     > div:first-of-type {
         background-image: url(../assets/formes/forme_1.png);
         transform: rotate(-90deg);
+        right: -15vw;
+        bottom: -6vh;
+        @media (min-width: $breakpoint_tablet) {
             bottom: -3vh;
             right: -6vw;
         }
+    }
     > 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;
+    > div {
+        background-repeat: no-repeat;
+        background-size: contain;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    > 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: $breakpoint_desktop) {
+            transform: rotate(0deg);
+            bottom: unset;
+            top: -5vh;
+            left: 0;
+            width: 60%;
+        }    
+    
+    }
+    > div:nth-of-type(2) {
+        background-image: url(../assets/formes/forme_5.png);
+        transform: rotate(180deg);
+        left: -12vw;
+        @media (min-width: $breakpoint_desktop) {
+            left: -20vw;
+            top: -5vh;
+        }
+    }
+    @media (min-width: $breakpoint_desktop) {
+        top:0;
+    }    
+}
+
+.ornements_consultation_right {
+    pointer-events: none;    
+    position: absolute !important;
+    height: 20vh;
+    width: 30vw;
+    bottom: -8vh;
+    right: 0;
+    z-index: 0;
+    overflow: hidden;
+    > div {
+        background-repeat: no-repeat;
+        background-size: contain;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    > 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: $breakpoint_desktop) {
+            right: -3vw;
+            bottom: 6vh;
+            transform: rotate(180deg);
+        }
+    }
+    > div:nth-of-type(2) {
+        background-image: url(../assets/formes/forme_3.png);
+        transform: rotate(180deg);
+        right: -4vw;
+        width: 100%;
+        @media (min-width: $breakpoint_tablet) {
+            width: 30%;
+            bottom: 3vh;
+        }
+        @media (min-width: $breakpoint_desktop) {
+            transform: none;
+            right: -4vw;
+            width: 60%;
+        }
+    }
+    @media (min-width: $breakpoint_desktop) {
+        bottom: unset;
+        top: 0;
+        right: 0;
+    }
+}

web/themes/erabletheme/scss/styles.scss

@@ -13,6 +13,7 @@
 @import "partials/_articles";
 @import "partials/_articles_teaser";
 @import "partials/_ornements.scss";
+@import "partials/_login.scss";
 
 /* PAGES */
 

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

@@ -30,6 +30,14 @@
 #}
 <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

@@ -84,7 +84,7 @@
   </div>
 
   <div class="retour_actus">
-    ← Retour aux actualités
+    <a href="/actualites">← Retour aux actualités</a>
   </div>
 
   <div class="article_meta">

web/themes/erabletheme/templates/page/page--user--1.html.twig

@@ -0,0 +1,102 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer_top: Items for the footer region.
+ * - page.footer_left: Items for the footer region.
+ * - page.footer_center: Items for the footer region.
+ * - page.footer_right: Items for the footer region.
+ * - page.footer_bottom: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="layout-container">
+
+  <header role="banner">
+    {{ page.header }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content user">
+      <h2>Connecté à l'espace d'administration</h2>
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+  <footer role="contentinfo">
+    <section id="footer_top">{{ page.footer_top }}</section>
+    <section id="footer_middle">
+      <section id="footer_left">{{ page.footer_left }}</section>
+      <div id="footer_section">
+        <section id="footer_center">{{ page.footer_center }}</section>
+        <section id="footer_right">{{ page.footer_right }}</section>
+      </div>
+    </section>
+    <section id="footer_bottom">{{ page.bottom }}</section>
+    
+  </footer>
+
+</div>{# /.layout-container #}

web/themes/erabletheme/templates/page/page--user--login.html.twig

@@ -0,0 +1,102 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer_top: Items for the footer region.
+ * - page.footer_left: Items for the footer region.
+ * - page.footer_center: Items for the footer region.
+ * - page.footer_right: Items for the footer region.
+ * - page.footer_bottom: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="layout-container">
+
+  <header role="banner">
+    {{ page.header }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content login">
+      <h2>Connexion à l'espace d'administration</h2>
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+  <footer role="contentinfo">
+    <section id="footer_top">{{ page.footer_top }}</section>
+    <section id="footer_middle">
+      <section id="footer_left">{{ page.footer_left }}</section>
+      <div id="footer_section">
+        <section id="footer_center">{{ page.footer_center }}</section>
+        <section id="footer_right">{{ page.footer_right }}</section>
+      </div>
+    </section>
+    <section id="footer_bottom">{{ page.bottom }}</section>
+    
+  </footer>
+
+</div>{# /.layout-container #}