ActesCitoyens/assets/app/frontend/scss/carto-carte.scss

#carto-carte {
  margin-top: 75px;

  .title-carte {
    color: $green;
    font-size: 5.0rem;
    font-family: FranklinGothic;
    text-align: center;
  }

  .row-contrib {
    color: $green;
    font-size: 2.0rem;
    font-family: FranklinGothic;
    margin-top: 50px;

    .revolt, .dream {
      padding-top: 25px;
      padding-left: 0;
    }

    .project-boost, .project-insp {
      padding-top: 15px;
      padding-left: 0;
    }
  }

  .help-legend {
    text-align: center;
    color: #828282;
    font-family: FranklinGothic;
    margin-top: 50px;
    font-size: 20px;
  }

  .map {
    border: 2px solid $green;
    margin-top: 20px;
    padding: 10px 10px 40px;
    position: relative;

    .popover {
      border: 2px solid $green;
      border-radius: 0;
      font-size: 1.4rem;

      .popover-body {
        color: $green;
        font-family: dinbold;
        padding: 0;

        span {
          padding: 10px 0 10px 50px;
          display: inline-block;
        }

        a {
          font-family: dinbold;
          background-image: url($dir-img + 'Picto-Loupe.png');
          background-repeat: no-repeat;
          background-size: 20px;
          background-position: 15px center;
          color: $green;
          display: inline-block;
          width: 100%;
          background-color: $yellow;
          padding: 5px 0 5px 50px;
        }
      }

      .arrow {
        &:after {
          border-top-color: $green;
        }

        &:before {
          border-top-color: $green;
        }
      }
    }

    .img-map {
      display: none;

      img {
        width: 7.5rem;

        @include desktop-only {
          width: 5.8rem;
        }

        &:hover {
          cursor: pointer;
        }
      }
    }

    .img-vosges {
      display: block;
      position: absolute;
      top: 17%;
      left: 35%;
    }

    .img-belfort {
      display: block;
      position: absolute;
      top: 33%;
      left: 45%;
      width: 160px;

      @include desktop-only {
        width: 110px;
      }
    }

    .img-hericourt {
      display: block;
      position: absolute;
      top: 44%;
      left: 21%;
      width: 160px;

      @include desktop-only {
        top: 43%;
        left: 19%;
        width: 110px;
      }
    }

    .img-montbeliard {
      display: block;
      position: absolute;
      top: 69%;
      left: 29%;
      width: 160px;

      @include desktop-only {
        width: 110px;
      }
    }

    .img-sud_territoire {
      display: block;
      position: absolute;
      top: 54%;
      left: 67%;
    }
  }
}