/* ============================================
   RESERVATION DESKTOP — min-width: 1024px
   Belle Pour Son Mariage
   ============================================ */

@media (min-width: 1024px) {

  /* --- Layout --- */
  .reservation-page {
    padding-top: 90px;
  }

  /* --- Stepper --- */
  .stepper__inner {
    max-width: 650px;
  }

  .stepper__circle {
    width: 52px;
    height: 52px;
  }

  .stepper__connector {
    margin-top: 25px;
  }

  .stepper__label {
    font-size: var(--fs-sm);
  }

  /* --- Step content --- */
  .tunnel {
    padding: var(--space-3xl) 0 var(--space-4xl);
  }

  .tunnel__step-header {
    margin-bottom: var(--space-3xl);
  }

  .tunnel__step-title {
    font-size: var(--fs-2xl);
  }

  /* --- Step 1 --- */
  .rdv-options {
    max-width: 700px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .rdv-option {
    flex: 1 1 calc(50% - var(--space-md));
  }

  .rdv-option:last-child:nth-child(odd) {
    flex: 0 1 calc(50% - var(--space-md));
  }

  /* --- Step 2 --- */
  .calendar {
    max-width: 600px;
    padding: var(--space-2xl);
  }

  .time-slots__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- Step 3 --- */
  .reservation-form {
    max-width: 700px;
  }

  /* --- Step 4 --- */
  .recap {
    max-width: 650px;
  }

  /* --- Nav --- */
  .tunnel__nav {
    max-width: 700px;
  }
}