drupal-erable/web/themes/erabletheme/scss/_home.scss

.home_introduction {
  box-sizing: border-box;
  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;
    }
  }

  .intro_logo {
    display: flex;
    justify-content: center;
    img {
      width: 40vw;
      max-width: 14rem;
      height: auto;
      @media (min-width: $breakpoint_desktop) {
        width: 100%;
      }
    }
  }

  .intro_separator {
    display: none;
    @media (min-width: $breakpoint_desktop) {
      display: block;
      width: 1px;
      align-self: stretch;
      background-color: $text_grey;
      justify-self: center;
    }
  }

  .intro_body {
    width: 100%;
    article > div {
      height: unset !important;
      min-height: unset;
      width: 100%;
      max-width: 45rem;
      margin-inline: auto; // centrage horizontal du wrapper texte
      p {
        @include main_text_content();
        margin: 0;
      }
    }
  }

  // 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();
    margin-top: 1rem;
  }
}

// plus sur l'accueil
.home_consultation {
    position: relative;
    width: 100%;
    padding: 4rem 0;
    @include beige_gradient();
    h2 {
      margin-bottom: 1.2rem;
      @include main_title();
      @media (min-width: $breakpoint_tablet) {
          padding-left: 0 !important;
      }
      @media (min-width: $breakpoint_desktop) {
          margin-left: 12.5vw;
          max-width: 50vw;
      }
    }
    h2 + div {
        h2, h3, h4 {
            @include sous_titre_alt();
            @media (min-width: $breakpoint_desktop) {
                max-width: 50vw;
                margin-left: 12.5vw;
            }
        }
    }
    article > div {
        height: unset !important;
        p {
          @include main_text_content();
          @media (min-width: $breakpoint_desktop) {
              margin-left: 12.5vw;
              max-width: 50vw;
          }
        }
        @media (min-width: $breakpoint_tablet) {
            padding: 0 !important;
        }
    }
    div.more-link {
        @include fluo_button();
        margin-top: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        @media (min-width: $breakpoint_desktop) {
            display: flex;
            justify-content: flex-end;
        }
    }
    @media (min-width: $breakpoint_tablet) {
        padding-left: 12.5vw;
        padding-right: 12.5vw;
    }
}

// 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-top: 10vh;
    margin-bottom: 10vh;
  }
}

.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: 2.5rem;
    @include main_text_content();
    @media screen and (min-width: $breakpoint_tablet) {
      margin-top: 2vh;
    }
    h1, h2, h3,
    h4, h5, h6 {
      @include sous_titre_alt();
    }
    a {
      color: black;
    }
    > p {
      margin: 1rem 0;
    }
  }
  > #sites-map-container {
    margin: 0 2rem;
    width: calc(100% - 4rem);
    #popup {
      background-color: $page_bg;
      h3 {
        @include sous_titre();
      }
      p {
        @include main_text_content();
      }
    }
  }
}