.lycee-jean-pasteur,
.dechetterie,
.mediatheque,
.ecole-primaire {
  position: absolute;
  background-color: transparent;
  width: var(--size-0);
  height: var(--size-0);

  & > span {
    position: absolute;
    top: -62px;
    left: 18px;
    width: 100%;
    height: 100%;
    color: #647172;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-shadow: 1px 1px 0px #fff;
  }

  &:before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--spacing-40));
    left: calc(50% - 1px);
    width: var(--size-2);
    height: var(--size-40);
    background-color: var(--color-black);
    transform-origin: bottom center;
    animation: lycee-pin-line-grow 0.45s ease-out calc(var(--marker-delay, 0s) + 0.2s)
      both;
  }

  &:after {
    content: '';
    position: absolute;
    top: -62px;
    left: calc(50% - var(--spacing-12));
    width: var(--size-24);
    height: var(--size-24);
    background-image: url('../img/school-icon.svg');
    background-repeat: no-repeat;
    transform-origin: center;
    animation: lycee-pin-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(var(--marker-delay, 0s) + 0.55s) both;
  }

  .banner-card {
    transform-origin: bottom left;
    animation: banner-card-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(var(--marker-delay, 0s) + 0.9s) both;
  }
}

.dechetterie > span,
.mediatheque > span,
.ecole-primaire > span {
  opacity: 0;
  animation: marker-label-appear 0.4s ease-out calc(var(--marker-delay, 0s) + 1.05s) both;
}

.dechetterie:after {
  background-image: url('../img/trash-icon.svg');
}

.mediatheque:after {
  background-image: url('../img/media-icon.svg');
}

/* top / left : positionnés par js/section-banner-markers.js (coords image) */

.dechetterie {
  --marker-delay: 3.3s;
}

.mediatheque {
  --marker-delay: 1.1s;
}

.ecole-primaire {
  --marker-delay: 2.2s;
}

.lycee-jean-pasteur {
  --marker-delay: 0s;
}

@media (max-width: 1279px) {
  .lycee-jean-pasteur,
  .dechetterie,
  .mediatheque,
  .ecole-primaire {
    display: none;
  }
}
