iframe responsive (help)

Bonjour, j'ai un souci au niveau d'un iframe sur un site internet de réservation. Sur mobile, le formulaire dépasse et il faut scroller pour voir les élément (pas vraiment pratique ni propre)
J'ai testé ça mais c'est pas vraiment concluant (ça permet de scroller)
Quelqu'un aurais une piste svp?

html de l'iframe:

<div class="iframe-responsive-wrapper">
    <img class="iframe-ratio" src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7"/>
    <iframe src="https://www.secure-hotel-booking.com/smart/Baudon-de-Mauny/2PEK/fr" width="1200px" height="1500px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

et le css:

.iframe-responsive-wrapper{
    position: relative;
}

.iframe-responsive-wrapper .iframe-ratio{
    display: block;
    height: 100%;
    width: 100%;
}

.iframe-responsive-wrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;  
}

La page en question :
http://baudondemauny.com/fr/reservation
(je bloque :()