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

.layout-content .fullpage.projets {
  padding-top: 5vh;
  > .intro_map {
    @media (min-width: $breakpoint_desktop) {
      display: flex;
      flex-direction: row;
    }
    > header {
      margin-right: 5vw;
      padding: 0 3vw;
      @include main_text_content();
      h1, h2, h3,
      h4, h5, h6 {
        padding: 0 !important;
        margin: 0 !important;
        @include sous_titre_alt();
      }
      > h2 {
        margin-bottom: 5vh !important;
        padding-bottom: 3.5vh !important;
        border-bottom: 1px solid $teal;
        @include main_title();
        @media (min-width: $breakpoint_desktop) {
          width: 100%;
        }
      }
    }
    .projets_intro {
      display: none;
    }
    #sites-map-container {
      width: 70%;
      padding: 0 !important;
      @media screen and (min-width: $breakpoint_tablet) {
        width: 50%;
      }
      @media (min-width: $breakpoint_desktop) {
        margin-right: 8vw !important;
        width: 85%;
      }
      #popup {
        h3 {
          @include sous_titre();
        }
        p {
          @include main_text_content();
        }
      }
    }
  }
  > .projets_list {
    display: grid;
    margin: 3vh $x_margin;
    margin-top: 8vh;
    grid-template-columns: 1fr;
    gap: 2rem;
    @media (min-width: $breakpoint_tablet) {
        grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: $breakpoint_desktop) {
        grid-template-columns: repeat(3, 1fr);
    }
    > h3 {
      display: none;
    }
    > .views-row{
      display: grid;
      grid-template-columns: 0.5fr 1fr;
      grid-template-rows: repeat(4, auto);
      > .views-field-field-diaporama {
        grid-column: 1;
        grid-row: 1/5;
        align-self: start;
        > .field-content {
          width: 8rem;
          height: 8rem;
          > a {
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: block;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
              mask-image: url('/themes/erabletheme/assets/shapes/shape_1.svg');
              mask-repeat: no-repeat;
              mask-size: 100% 100%;
              mask-position: center;
              object-fit: cover;
            }
          }
        }
      }
      > .views-field-title {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 1rem;
        a {
          color: $teal;
        }
        @include sous_titre();
      }
      > .views-field-field-sous-titre {
        grid-column: 2;
        grid-row: 2;
        font-size: 1.1rem !important;
        margin-bottom: 1rem;
        line-height: 1.3;
        a {
          color: black;
        }
        @include sous_titre_alt();
      }
      > .views-field-field-localisation-textuel {
        grid-column: 2;
        grid-row: 3;
        margin-bottom: 1rem;
        @include main_text_content();
        a {
          color: black;
        }
      }
      > .views-field-field-th {
        grid-column: 2;
        grid-row: 4;
        ul {
          li {
            display: inline-block;
            font-size: 0.8rem !important;
            background-color: #d3f0ea;
            margin: 0.2rem;
            transition: background-color 0.3s ease;
            @include main_text_content();
            &:hover {
              background-color: #8ec2b8;
            }
            a {
              display: block;
              color: black;
              padding: 0.2rem 0.4rem;
            }
          }
        }
      }
    }
  }
}

.fullpage.projet_full {
  // overflow-x: hidden; // enlever quand on ajoute le menu des projets à gauche
  .retour_projets {

    padding-top: 3vh;
    padding-left: $x_margin;
    @include main_text_content();
    a {
      font-size: $sm_font_size;
      font-weight: 800;
      color: $teal;
    }
  }
  .sous_titre > div > div {
    @include sous_titre_alt();
  }
  .localisation {
    margin-left: $x_margin;
    margin-top: 2rem;
    @include main_text_content();
  }
  .thematiques {
    margin-top: 1rem;
    margin-left: $x_margin;
    > div > div {
      > div {
        display: inline-block;
        font-size: 0.8rem !important;
        background-color: #d3f0ea;
        margin: 0.2rem;
        transition: background-color 0.3s ease;
        @include main_text_content();
        &:hover {
          background-color: #8ec2b8;
        }
        a {
          display: block;
          color: black;
          padding: 0.2rem 0.4rem;
        }
      }
    }
  }
  .diapo {
    margin-top: 3rem;
    margin-left: calc($x_margin * 3);
    margin-right: calc($x_margin * 3);
    @media screen and (min-width: $breakpoint_tablet) {
      margin-left: $x_margin;
      margin-right: $x_margin;
    }
    img {
      width: 100%;
      height: auto;
    }
    .image-field-caption {
      p {
        margin: 0;
        padding: 0;
        margin-top: 0.5rem;
        font-size: 0.8rem;
        opacity: 0.7;
      }
    }

    .slick-arrow {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 1.5rem;
      background-color: $teal !important;
      transition: background-color 0.3s ease;
      &:hover {
        background-color: white !important;
        &::before {
          color: $teal;
        }
      }
      &::before {
        opacity: 1 !important;
        color: white;
        font-weight: bold;
        font-family: 'Marianne', sans-serif;
        display: block;
        font-size: $sm_font_size !important;
      }
    }
    .slick-prev {
      left: -2rem;
    }
    .slick-next {
      right: -2rem;
    }
  }
  .text-content {
    .intertitre {
      margin-left: $x_margin;
      @include sous_titre();
    }
    .paragraph {
      margin-bottom: 3rem;
      > div > div > p {
        margin: 1.2rem 0 !important;
      }
    }
  }
  .chiffre-clefs {
    > div > div {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
      width: auto;
      margin: 4rem $x_margin;
      .paragraph {
        > div:first-of-type {
          font-size: 2rem !important;
          @include sous_titre();
        }
        p {
          margin: 0;
          padding: 0;
          margin-top: 0.5rem;
          color: $teal;
        }
      }
    }
  }
  .carte {
    width: auto;
    margin: 4rem $x_margin;
    .leaflet-pane {
      path {
        stroke: $fluo_green;
        stroke-width: 2;
        fill: $fluo_green;
        fill-opacity: 0.2;
      }
    }
  }
  .chronologie {
    display: none;
  }
  .equipe {
    > div {
      > div:first-of-type {
        margin-left: $x_margin;
        margin-bottom: 2rem;
        @include sous_titre_alt();
      }
      > div:nth-of-type(2) {
        > div {
          > div {
            padding-left: $x_margin;
            padding-right: $x_margin;
            margin: 1rem 0;
            margin-bottom: 3rem !important;
            > div:first-of-type {
              margin-bottom: 2rem;
              @include sous_titre();
            }
            > div:nth-of-type(2) {
              > div {
                display: grid;
                grid-template-columns: 1fr;
                grid-row-gap: 1rem;
                grid-column-gap: 4rem;
                width: 75%;
                @media screen and (min-width: $breakpoint_tablet) {
                  grid-template-columns: repeat(2, 1fr);
                  width: unset;
                }
                > div {
                  margin-bottom: 1.5rem;
                  @media screen and (min-width: $breakpoint_tablet) {
                    margin-bottom: 0;
                  }
                  > .paragraph {
                    margin: 0 !important;
                    padding: 0 !important;
                    display: grid;
                    grid-template-columns: auto 1fr;
                    grid-column-gap: 0;
                    flex-direction: column;
                    > div:first-of-type {
                      grid-column: 1 / span 2;
                      grid-row: 1;
                      margin: 0;
                      padding: 0;
                      display: block;
                      width: 5rem;
                      height: 5rem;
                      margin-bottom: 0.75rem;
                      > div {
                        width: 5rem;
                        height: 5rem;
                        > img {
                          width: 5rem;
                          height: auto;
                        }
                      }
                    }
                    > div:nth-of-type(2) {
                      grid-column: 2;
                      grid-row: 2;
                      margin: 0;
                      padding: 0;
                      margin-left: 0.3rem;
                    }
                    > div:nth-of-type(3) {
                      grid-column: 1;
                      grid-row: 2;
                      margin: 0;
                      padding: 0;
                    }
                    > div:nth-of-type(4) {
                      margin-top: 0.5rem;
                      grid-column: 1 / span 2;
                      grid-row: 3;
                      p {
                        margin: 0;
                        padding: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .liens,
  .file_fixed {
    > div > div {
      margin: 0 !important;
      > div {
        padding: 1rem 0;
      }
    }
  }
}

#block-erabletheme-views-block-projets-block-1 {
  // display: none;
}