.apples-page {
  .apples-table-title {
    font-family: UglyDave, sans-serif;
    font-size: var(--size-ugly-bigger);
    margin: var(--sp4) 0 var(--sp2);
  }

  .apples-table {
    font-size: var(--size-md);
    border-spacing: 0;
    width: 100%;

    a {
      text-decoration: none;
    }

    thead {
      th {
        font-weight: 350;
        text-transform: uppercase;
        text-align: left;
        border-bottom: solid 0.05rem var(--sable-fonce);
        padding: var(--sp025) 0;
        font-size: var(--size-xs);
      }

      .varieties {
        width: 30%;
      }

      .picking-range {
        width: 35%;
      }

      .characteristics {
        width: 35%;
      }
    }

    tbody {
      tr {
        cursor: pointer;
        transition: background-image 0.2s ease-out;

        &:hover {
          background-image: linear-gradient(
            to right,
            transparent,
            color-mix(in srgb, var(--sable) 20%, transparent) 20%,
            color-mix(in srgb, var(--sable) 20%, transparent) 80%,
            transparent
          );
        }
      }

      td {
        border-bottom: solid 0.05rem var(--sable-fonce);
        padding: var(--sp1) var(--sp2) var(--sp1) 0;
      }

      td:first-child {
        padding-left: 0;
      }

      td:last-child {
        padding-right: 0;
      }

      .apple-vignette {
        .apple-title {
          color: var(--noir);
        }

        .apple-subtitle {
          color: var(--noir);
          line-height: 0.9;
        }
      }

      .picking-range {
        position: relative;

        display: flex;
        flex-direction: row;
        gap: var(--sp025);
        max-width: 100%;

        .range-line {
          position: absolute;
          top: 0.25rem;
          height: 0.5rem;
          transform: translateX(0.5rem);

          img {
            height: 0.5rem;
            translate: 0 -0.33rem;
          }

          &::before,
          &::after {
            content: "";
            position: absolute;
            height: 0.4rem;
            width: 0.4rem;
            background-color: var(--rouge-pomme);
            margin: 0.05rem -0.2rem;
            border-radius: 50%;
          }
        }

        .month {
          flex: 1 0 0;
          height: 1.5rem;
          position: relative;

          font-size: var(--size-xs);
          padding: 1rem 0 0;

          &::before {
            content: "";
            position: absolute;
            inset: 0;
            bottom: auto;
            height: 1rem;
            background-color: var(--sable);
            border-radius: 0.5rem;
          }
        }
      }

      .characteristics {
        font-size: var(--size-xs);
        line-height: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: var(--sp2);

        @media (max-width: 1100px) {
          gap: var(--sp1);
        }

        .range {
          width: 33%;
          max-width: 8rem;
          padding-top: var(--sp05);

          .line {
            width: 100%;
            height: 0.15rem;
            margin-bottom: var(--sp025);
            background: url("/assets/img/ligne.svg") center center no-repeat;
            background-size: 100%;

            .dot {
              border-radius: 0.2rem 0.2rem 0.2rem 0.3rem;
              margin: -0.2rem;
              height: 0.5rem;
              width: 0.5rem;
              background-color: var(--rouge-pomme);
              transform: translateY(-0.2rem);
              transform-origin: center center;
            }
          }
        }
      }
    }

    @media (max-width: 725px) {
      thead {
        display: none;
      }

      tbody {
        tr {
          display: flex;
          flex-direction: column;
          padding: var(--sp1) 0;
          border-bottom: solid 0.05rem var(--sable-fonce);

          td {
            .apple-vignette {
              min-width: 10rem;
              max-width: 100%;
            }

            border-bottom: none;
            padding: var(--sp05) 0;
          }

          .characteristics,
          .picking-range {
            margin-left: 3.5rem; /* Aligned with the apple-vignette */
          }

          .characteristics {
            max-width: 20rem;
          }
        }
      }
    }
  }
}