.picking-page {
  position: relative; /* For the bottom white line */

  .map-header {
    background-color: var(--sable);
    overflow: hidden;
    padding: 0;
    margin-top: calc(var(--sp1) * -1);

    .content-margins {
      --welcome-width: calc(100vw - var(--sp1) * 2);
      --slide-offset: min(25rem, calc(var(--welcome-width) + var(--sp1) * 2));
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "full";
      gap: 0;

      .welcome,
      .map {
        grid-area: full;
        place-self: center start;
        transition: translate 0.6s var(--bounce-back-large), opacity 0.2s linear;
      }

      .welcome {
        width: 22rem;
        max-width: calc(100vw - var(--sp1) * 2);
        padding: var(--sp2) 0 var(--sp4);
        translate: 0 0;
        opacity: 1;

        h1 {
          color: var(--rouge-fonce);
          margin-bottom: var(--sp1);
        }

        .page-title {
          margin-bottom: var(--sp3);
        }

        .schedule {
          color: var(--rouge-fonce);
          font-size: var(--size-lg);
          margin-bottom: var(--sp1);
        }

        .address {
          font-size: var(--size-sm);
          a {
            color: var(--rouge-fonce);
          }
        }

        hr {
          border: none;
          border-top: solid 0.05rem var(--sable-fonce);
          margin: var(--sp2) 0;
        }

        .page-presentation {
          p {
            margin-bottom: var(--sp1);
          }
        }
      }

      .map {
        margin: 0 calc(var(--sp2) * -1) 0 calc(var(--sp4) * -1);
        width: 34.5rem;
        max-width: calc(100vw + var(--sp1) * 2);
        height: auto;
        translate: var(--slide-offset) 0;

        .map-markers {
          position: absolute;
          inset: 0;

          & > .marker {
            --size: 2.5rem;
            position: absolute;
            display: flex;
            justify-content: center;
            width: var(--size);
            height: calc(var(--size) * 2);
            border-radius: 50%;
            margin-left: calc(var(--size) / -2);
            margin-top: calc(var(--size) * -1.5);

            &.road-marker {
              border-radius: 0;
              rotate: -16deg;
              width: 70%;
              border-top-left-radius: 100%;
              border-top-right-radius: 100%;

              .label {
                transform: translateX(15%) translateY(-5%);
              }
            }

            .label {
              font-family: "UglyDave", sans-serif;
              font-size: var(--size-md);
              text-align: center;
              min-width: max-content;
              place-self: end center;
              pointer-events: none;
              scale: 0.8;
              opacity: 0;
              transform-origin: bottom center;
              translate: 0 calc(var(--size) * -0.5 + 0.2rem);
              transition: translate 1s var(--bounce-back),
                scale 1s var(--bounce-back), opacity 0.2s linear;

              .text-marker {
                background: url("/assets/img/bg-puce-carte.svg") center center
                  no-repeat;
                background-size: 100% 100%;
                padding: var(--sp025) var(--sp1);
                position: relative;

                &::after {
                  background: url("/assets/img/bg-pointe-carte.svg") center
                    bottom;
                  width: 1.5rem;
                  height: 0.8rem;
                  content: "";
                  display: block;
                  position: absolute;
                  top: calc(100% - 0.4rem);
                  left: calc(50% - 0.75rem);
                }
              }

              &.apple-label {
                pointer-events: visible;
                opacity: 1;
                scale: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                min-width: 0;
                margin: 0;
                padding-bottom: 2rem;

                &::before {
                  content: "";
                  width: 1.5rem;
                  height: 1rem;
                  background: url("/assets/img/puce-pomme-carte.svg") center
                    bottom;
                  position: absolute;
                  bottom: 0.5rem;
                  left: calc(50% - 0.75rem);
                  opacity: 1;
                  transition: opacity 0.2s linear, scale 1s var(--bounce-back),
                    translate 1s var(--bounce-back);
                }

                .vignette {
                  pointer-events: none;
                  display: inline-flex;
                  flex-direction: row;
                  justify-content: center;
                  gap: 0;
                  align-self: center;
                  padding: 0;
                  transition: padding 0.5s var(--bounce-back);

                  .apple-name {
                    flex: 0;
                    font-size: 0.1rem;
                    background: url("/assets/img/bg-puce-carte.svg") center
                      center no-repeat;
                    background-size: 100% 100%;
                    margin: var(--sp05) 0 var(--sp05) calc(var(--sp2) * -1);
                    position: relative;

                    transition: font-size 0.5s var(--bounce-back),
                      padding 0.5s var(--bounce-back);

                    &::after {
                      background: url("/assets/img/bg-pointe-carte.svg") center
                        bottom;
                      width: 1.5rem;
                      height: 0.8rem;
                      content: "";
                      display: block;
                      position: absolute;
                      top: calc(100% - 0.4rem);
                      left: calc(50% - 0.75rem);
                      scale: 0;
                      transition: scale 1.5s var(--bounce-back);
                    }
                  }

                  .image {
                    flex: 0 0 3rem;
                    position: relative;
                    margin: calc(var(--sp1) * -1) 0 calc(var(--sp1) * -1)
                      calc(var(--sp1) * -1.5);
                    align-self: center;
                    z-index: 1;

                    .color-dot {
                      width: 1rem;
                      position: absolute;
                      left: 0;
                      top: 0;
                      color: var(--vert);
                    }
                  }
                }
              }

              &.oscillate {
                animation: oscillate 2s ease-in-out forwards;
              }
            }

            &.visible {
              .label {
                translate: 0 calc(var(--size) * -1);
                opacity: 1;
                scale: 0.6;
              }
            }

            &:hover {
              z-index: 10;

              .label {
                translate: 0 calc(var(--size) * -1);
                opacity: 1;
                scale: 1;

                &.apple-label {
                  translate: 0;

                  &::before {
                    translate: 0 calc(var(--size) * -1);
                    scale: 0.2;
                    opacity: 0;
                  }

                  .vignette {
                    padding: 0 var(--sp2);

                    .apple-name {
                      font-size: var(--size-md);
                      padding: var(--sp025) var(--sp1) var(--sp025) var(--sp2);

                      &::after {
                        opacity: 1;
                        scale: 1;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        img {
          max-width: 100%;
          max-height: 100%;
        }
      }

      .switch {
        grid-row: 1;
        grid-column: 1 / 3;
        place-self: end center;
        margin-bottom: var(--sp1);
        display: none;
      }
    }

    @media (max-width: 1150px) {
      .content-margins {
        .switch {
          display: flex;
        }
      }

      &.focus {
        .content-margins {
          .welcome {
            translate: calc(var(--slide-offset) * -1) 0;
          }

          .map {
            place-self: center center;
            translate: 0 0;
          }
        }
      }
    }

    @media (max-width: 520px) {
      .content-margins {
        .welcome {
          .overtitle,
          .address {
            font-size: var(--size-xs);
          }

          hr {
            margin: var(--sp1) 0;
          }

          .page-title {
            font-size: var(--size-ugly-bigger);
            margin-bottom: var(--sp2);
          }

          .page-presentation,
          .schedule {
            font-size: var(--size-sm);
          }
        }
      }
    }
  }
}

@keyframes oscillate {
  0% {
    transform: rotate(0);
  }
  33% {
    transform: rotate(-8.5deg);
  }

  66% {
    transform: rotate(8.5deg);
  }

  100% {
    transform: rotate(0);
  }
}