/* ============================================
   RESERVATION TABLET — min-width: 768px
   Belle Pour Son Mariage
   ============================================ */

@media (min-width: 768px) {

  /* --- Stepper --- */
  .stepper__label {
    display: block;
  }

  .stepper__circle {
    width: 48px;
    height: 48px;
    font-size: var(--fs-md);
  }

  .stepper__connector {
    margin-top: 23px;
  }

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

  /* --- Step 1 --- */
  .rdv-options {
    max-width: 600px;
  }

  .rdv-option {
    padding: var(--space-xl);
  }

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

  .time-slots__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

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

  .reservation-form__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reservation-form__grid .form-group--full {
    grid-column: 1 / -1;
  }

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

  .recap__card-body {
    padding: var(--space-2xl);
  }

  /* --- Success --- */
  .reservation-success__actions {
    flex-direction: row;
    justify-content: center;
  }

  /* --- Decorative --- */
  .reservation-deco-1 {
    width: 350px;
    height: 350px;
    right: -80px;
    opacity: 0.06;
  }

  .reservation-deco-2 {
    width: 280px;
    height: 280px;
    left: -60px;
    opacity: 0.06;
  }
}