/* Page-owned styles for reservation-contact page */

/* Section 1: Introduction et options de réservation */
.reservation-intro {
  padding-block: var(--space-8);
  background-color: var(--surface-primary);
}

.reservation-intro__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
}

.reservation-intro__copy {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-7);
}

.reservation-intro__copy h1 {
  color: var(--color-ink);
}

.reservation-intro__copy p {
  color: var(--color-ink);
  margin-block-end: 0;
}

.reservation-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
}

.reservation-option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  background-color: var(--surface-card);
  border: var(--border-thin);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  color: var(--color-ink);
  text-decoration: none;
  transition: box-shadow var(--transition-shadow), transform var(--transition-transform);
  min-width: 0;
}

.reservation-option-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

.reservation-option-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.reservation-option-card__title {
  font-size: var(--text-h3);
  color: var(--color-ink);
  margin-block-end: 0;
}

.reservation-option-card p {
  margin-block-end: 0;
}

.reservation-option-card__link {
  font-weight: 700;
  color: var(--color-saffron);
  margin-block-start: auto;
}

.reservation-option-card:hover .reservation-option-card__link {
  color: var(--color-olive);
}

/* Section 2: Informations pratiques et horaires */
.practical-info {
  padding-block: var(--space-8);
  background-color: rgba(155, 142, 196, 0.12);
}

.practical-info__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
}

.practical-info__content {
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.practical-info__content h2 {
  color: var(--color-ink);
}

.practical-info__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-end: var(--space-5);
}

.practical-info__block {
  min-width: 0;
}

.practical-info__block h3 {
  color: var(--color-ink);
}

.practical-info__block p,
.practical-info__block ul {
  color: var(--color-ink);
}

.practical-info__note {
  background-color: var(--surface-card);
  border: var(--border-thin);
  border-radius: var(--radius-medium);
  padding: var(--space-5);
  margin-block-start: var(--space-5);
}

.practical-info__note h3 {
  color: var(--color-ink);
}

.practical-info__note p {
  color: var(--color-ink);
  margin-block-end: 0;
}

/* Section 3: Formulaire de réservation et contact */
.reservation-form-section {
  padding-block: var(--space-8);
  background-color: var(--surface-primary);
}

.reservation-form-section__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
}

.reservation-form-card {
  max-width: 600px;
  margin-inline: auto;
  background-color: var(--surface-card);
  border: var(--border-thin);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.reservation-form-card h2 {
  color: var(--color-ink);
  text-align: center;
}

.reservation-form-card > p {
  color: var(--color-ink);
  text-align: center;
  margin-block-end: var(--space-5);
}

.reservation-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.reservation-form .form-field {
  margin-block-end: 0;
}

.reservation-form .form-field--consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reservation-form .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ink);
}

.reservation-form .form-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-block-start: 0.2rem;
  accent-color: var(--color-saffron);
  flex-shrink: 0;
}

.reservation-form__submit {
  width: 100%;
}

.reservation-form .form-success {
  text-align: center;
}

/* Section 4: Coordonnées directes */
.direct-contact {
  padding-block: var(--space-8);
  background-color: rgba(155, 142, 196, 0.12);
}

.direct-contact__container {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
  text-align: center;
}

.direct-contact__container h2 {
  color: var(--color-ink);
}

.direct-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

.direct-contact__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.direct-contact__icon {
  font-size: 2rem;
  line-height: 1;
}

.direct-contact__block h3 {
  color: var(--color-ink);
  margin-block-end: 0;
}

.direct-contact__block p {
  color: var(--color-ink);
  margin-block-end: 0;
}

.direct-contact__block a {
  color: var(--color-saffron);
  font-weight: 700;
}

.direct-contact__block a:hover {
  color: var(--color-olive);
}

/* Section 5: Réassurance et prochaines étapes */
.reassurance {
  padding-block: var(--space-8);
  background-color: var(--surface-primary);
}

.reassurance__container {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
  text-align: left;
}

.reassurance__container h2 {
  color: var(--color-ink);
}

.reassurance__container p {
  color: var(--color-ink);
}

.reassurance__links {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.reassurance__links li {
  margin-block-end: 0;
}

.reassurance__links a {
  color: var(--color-saffron);
  font-weight: 700;
}

.reassurance__links a:hover {
  color: var(--color-olive);
}

/* Tablet breakpoint */
@media (max-width: 900px) {
  .reservation-options {
    grid-template-columns: 1fr;
  }

  .practical-info__grid {
    grid-template-columns: 1fr;
  }

  .direct-contact__grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile breakpoint */
@media (max-width: 767px) {
  .reservation-intro,
  .practical-info,
  .reservation-form-section,
  .direct-contact,
  .reassurance {
    padding-block: var(--space-7);
  }

  .reservation-intro__container,
  .practical-info__container,
  .reservation-form-section__container,
  .direct-contact__container,
  .reassurance__container {
    padding-inline: var(--container-padding-mobile);
  }

  .reservation-intro__copy {
    margin-block-end: var(--space-6);
  }

  .reservation-option-card {
    padding: var(--space-4);
  }

  .reservation-form-card {
    padding: var(--space-4);
  }

  .reservation-form__submit {
    width: 100%;
  }

  .practical-info__note {
    padding: var(--space-4);
  }

  .direct-contact__block {
    padding: var(--space-4);
    background-color: var(--surface-card);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
  }
}

@media (max-width: 390px) {
  .reservation-intro__copy h1 {
    font-size: var(--text-h1);
  }

  .reservation-option-card__title {
    font-size: var(--text-h4);
  }
}