<div class="container-fluid px-4">
    <div class="row">

        <!-- barre latérale gauche: image assistant, ecran large -->
        <div class="col-xl-2 visible-lg">
            <img class="avatar" src="https://www.mondialcare.eu/wp-content/uploads/2019/12/assistante-4.png">
        </div>

        <!-- contenu -->
        <div class="col-xl-10">
            <!-- assistant infobulle -->
            <div class="row">
                <div class="hidden-lg col-2 align-self-center">
                    <img class="avatar" src="https://www.mondialcare.eu/wp-content/uploads/2019/12/vignette-mobile.gif">
                </div>
                <div class="col-10">
                    <p><strong>OK ! Now I need to know how many people you want to insure for this travel ?</strong></p>
                </div>
            </div>

            <!-- contenu formulaire -->
            <div class="row mt-4  align-self-center">
                <div class="row">
                    <div class="col">
                        <fieldset>
                            [radio categorie default:1 "Only one" "Few people" "Group (> à 10 people)"]

                            [group multi]
                            <label>Number of people</label>
                            <i class="material-icons prefix">account_circle</i>
                            [number* number-pers]
                            [/group]

                        </fieldset>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-12 mt-2 d-flex justify-content-start mb-3">
                        <input type="button" id="prevBtn" style="margin-rigth: 15px;" class="wpcf7-form-control wpcf7-submit button prevBtn btn-radius button-secondary" value="Back" />
                        [submit id:nextBtn class:jump-tarif class:ml-5 class:w-50 class:btn-radius "Next"]

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>