/* Mobile : formulaires de réservation.
   1) Champs à 16 px minimum : iOS Safari zoome automatiquement dès qu'un champ de
      saisie est plus petit, ce qui décale toute la page (sans bloquer le zoom manuel).
   2) Page de réservation : sur mobile, le formulaire passe avant le bouton WhatsApp. */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}
@media (max-width: 960px) {
  .resa-hero:has(> .hero-form-wrap) {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .resa-hero:has(> .hero-form-wrap) > .resa-hero-content {
    display: contents;
  }
  .resa-hero:has(> .hero-form-wrap) > .resa-hero-content > * { order: 1; }
  .resa-hero:has(> .hero-form-wrap) > .hero-form-wrap {
    order: 2;
    margin: 1.25rem 0 0;
  }
  .resa-hero:has(> .hero-form-wrap) > .resa-hero-content > .resa-wa {
    order: 3;
    align-self: stretch;
    margin-top: 1.5rem;
  }
}

/* Page de réservation, mobile : bloc de texte compact pour que le formulaire
   apparaisse plus haut à l'écran (aucun texte modifié, seulement la taille). */
@media (max-width: 600px) {
  .resa-hero:has(> .hero-form-wrap) { padding: 4.9rem 1rem 1.5rem; }
  .resa-hero:has(> .hero-form-wrap) .resa-badge {
    font-size: .66rem; padding: .28rem .8rem; margin-bottom: .7rem;
  }
  .resa-hero:has(> .hero-form-wrap) .resa-hero-content h1 {
    font-size: 1.4rem; line-height: 1.15; margin: 0 0 .5rem;
  }
  .resa-hero:has(> .hero-form-wrap) .resa-hero-lead {
    font-size: .82rem; line-height: 1.4; margin: 0 0 .8rem;
  }
  .resa-hero:has(> .hero-form-wrap) .resa-guarantees {
    gap: .4rem; margin-bottom: 0;
  }
  .resa-hero:has(> .hero-form-wrap) .resa-guarantee {
    font-size: .74rem; line-height: 1.3; gap: .55rem; text-align: left;
  }
  .resa-hero:has(> .hero-form-wrap) .resa-guarantee-icon {
    width: 24px; height: 24px; font-size: .68rem;
  }
  .resa-hero:has(> .hero-form-wrap) > .hero-form-wrap { margin-top: 1rem; }
}