refonte page d'accueil nouveau design, sans images pour l'instant

web/themes/erabletheme/scss/_home.scss

@@ -1,74 +1,76 @@
 .home_introduction {
-  background-color: white;
-  width: 100%;
   box-sizing: border-box;
-  padding: 3rem 1rem;
-  margin: 2rem 0;
-  h2 {
-    display: none;
+  width: 100%;
+  max-width: 70rem;
+  margin: 8vw auto;
+  padding: 8vw 6vw;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3rem;
+
+  h2 { display: none; } // titre du bloc Drupal masqué (logo le remplace)
+
+  // Bloc supérieur : logo | séparateur | texte
+  .intro_main {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr; // mobile : empilé
+    gap: 6vw;
+    justify-items: center;
+
+    @media (min-width: $breakpoint_desktop) {
+      grid-template-columns: minmax(8rem, 22%) 1px 1fr;
+      align-items: center;
+      gap: 2.5vw;
+    }
   }
-  > .logo {
+
+  .intro_logo {
     display: flex;
     justify-content: center;
-    align-items: center;
-    width: 100%;
-    margin-bottom: 2rem;
     img {
-      width: 50%;
+      width: 40vw;
+      max-width: 14rem;
       height: auto;
       @media (min-width: $breakpoint_desktop) {
-          width: 100%;
+        width: 100%;
       }
     }
+  }
+
+  .intro_separator {
+    display: none;
     @media (min-width: $breakpoint_desktop) {
-      width: 170%;
-      margin: 0 3rem;
+      display: block;
+      width: 1px;
+      align-self: stretch;
+      background-color: $text_grey;
+      justify-self: center;
     }
   }
-  article > div {
-    height: unset !important;
-    min-height: 100%;
-    p {
-      @include main_text_content();
+
+  .intro_body {
+    width: 100%;
+    article > div {
+      height: unset !important;
+      min-height: unset;
       width: 100%;
-      @media (min-width: $breakpoint_tablet) {
-        padding-left: 3rem;
-        padding-right: 3rem;
+      max-width: 45rem;
+      margin-inline: auto; // centrage horizontal du wrapper texte
+      p {
+        @include main_text_content();
+        margin: 0;
       }
-      @media (min-width: $breakpoint_desktop) {
-        padding-left: 0;
-      }
-    }
-    @media (min-width: $breakpoint_tablet) {
-      padding: 0 !important;
     }
   }
-  div.more-link {
-    margin-top: 3rem;
-    margin-bottom: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
+  // CTA "En savoir plus" — déplacé par JS comme enfant direct de
+  // .home_introduction → centrage naturel via le flex-column du parent.
+  > div.more-link {
     @include fluo_button();
-    @media (min-width: $breakpoint_tablet) {
-      position: absolute;
-      left:0;
-      right:0;
-    }
-  }
-  @media (min-width: $breakpoint_tablet) {
-    padding: 8rem 1rem;
-    padding-top: 4rem;
-    margin: 6rem 0;
-    margin-left: 20vw;
-    margin-right: 20vw;
-    width: calc(100% - 40vw);
-  }
-  @media (min-width: $breakpoint_desktop) {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 20vh;
-    margin-bottom: 20vh !important;
+    margin-top: 1rem;
   }
 }
 
@@ -128,28 +130,48 @@
     }
 }
 
-.map-projets {
-  background-color: white;
-  padding: 1rem 0;
-  margin-left: $x_margin;
-  width: calc(100% - #{$x_margin} * 2);
-  @media (min-width: $breakpoint_tablet) {
-    margin-left: 20vw;
-    width: calc(100% - 40vw);
-  }
+// Section "projets lauréats" : titre hors du bloc (centré page),
+// puis le bloc lui-même avec son contenu, bordure brand en bas.
+.map-projets-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   @media (min-width: $breakpoint_desktop) {
-    margin-left: 25vw;
-    width: calc(100% - 50vw);
     margin-top: 10vh;
     margin-bottom: 10vh;
   }
-  > h2 {
-    @include main_title();
+}
+
+.map-projets-title {
+  @include main_title();
+  text-align: center;
+  padding: 0;
+  margin: 0 0 4rem;
+}
+
+.map-projets {
+  background-color: white;
+  padding: 1rem 0;
+  margin: 0 auto;
+  width: calc(100% - #{$x_margin} * 2);
+  border-bottom: 7px solid $fluo_green;
+  // CTA "Voir les projets" : même style fluo_button, fond gris page
+  // pour se fondre dans la section.
+  > footer.fluo_links {
+    margin-top: 1rem;
+    margin-bottom: 4rem;
+    a { background-color: $page_bg; }
+  }
+  @media (min-width: $breakpoint_tablet) {
+    width: 60vw;
+  }
+  @media (min-width: $breakpoint_desktop) {
+    width: 50vw;
   }
   > .projets_intro {
     padding: 0 3vw;
     margin-top: 1.3rem;
-    margin-bottom: 6vh;
+    margin-bottom: 2.5rem;
     @include main_text_content();
     @media screen and (min-width: $breakpoint_tablet) {
       margin-top: 2vh;
@@ -169,6 +191,7 @@
     margin: 0 2rem;
     width: calc(100% - 4rem);
     #popup {
+      background-color: $page_bg;
       h3 {
         @include sous_titre();
       }