Entretenir : Step - Intervention

<div class="md:max-w-[415px]" >

    <div class="bg-white border border-ui rounded-button p-7.5">

        <p class="tracking-tightened font-medium text-base text-text-light">⚙️ Choisissez votre intervention</p>

        <div class="mt-6 flex flex-col gap-4.5">

            <div class="form-element form-select w-full"

                 x-data="selectInput"

                 :class="{ 'active' : active }"

                 @click.away="active = false"

            >

                <input x-ref="input" name="city" class="" id="city" type="text" pattern="\S+" x-model="currentValue">

                <div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>

                <label @click="active = !active" :class="{ 'moved' : full }" for="city">Choisir une intervention</label>

                <ul x-ref="options" class="select-options" x-show="active">

                    <li><button type="button" @click="setValue('recharge-climatisation', 'Recharge climatisation')">Recharge climatisation</button></li>

                </ul>

            </div>



            <div class="pt-2.5">

                <div class="bg-ui-light px-5 py-6.25 flex gap-4.5">

                    <div class="shrink-0"><?= icon('ice-cone', 'w-7.5 text-icon'); ?></div>

                    <div class="text-smaller tracking-tight">

                        <div class="font-semibold">Recharge climatisation</div>

                        <div class="mt-1.25 font-medium text-text-light">

                            <p>Durée d’intervention : <span class="text-secondary">3h</span></p>

                            <p>Budget prévisionnel : <span class="text-secondary">250 €</span></p>

                        </div>

                    </div>

                </div>



                <div class="mt-6.25">

                    <div x-data="dropdown()" class="border border-ui rounded-button">

                        <div @click="toggle()"

                             class="flex justify-between font-semibold tracking-tight leading-[1.2] py-6 px-5 md:px-6.25 cursor-pointer gap-7.5 md:gap-13">

                            <div>Pourquoi changer votre pare-brise&nbsp;?</div>

                            <div>

                                <span x-show="!open"><?= icon('plus', 'w-5 text-text') ?></span>

                                <span x-show="open" x-cloak><?= icon('minus', 'w-5 text-text') ?></span>

                            </div>

                        </div>

                        <div class="overflow-hidden">

                            <div x-ref="content" class="hidden dropdown-content">

                                <div class="px-5 md:px-6.25 pb-5">

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis cursus...

                                </div>

                            </div>

                        </div>

                    </div>

                    <div x-data="dropdown()" class="border border-ui rounded-button mt-2.75">

                        <div @click="toggle()"

                             class="flex justify-between font-semibold tracking-tight leading-[1.2] py-6 px-5 md:px-6.25 cursor-pointer gap-7.5 md:gap-13">

                            <div>Comment se déroule l’intervention</div>

                            <div>

                                <span x-show="!open"><?= icon('plus', 'w-5 text-text') ?></span>

                                <span x-show="open" x-cloak><?= icon('minus', 'w-5 text-text') ?></span>

                            </div>

                        </div>

                        <div class="overflow-hidden">

                            <div x-ref="content" class="hidden dropdown-content">

                                <div class="px-5 md:px-6.25 pb-5">

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis cursus...

                                </div>

                            </div>

                        </div>

                    </div>



                    <div class="mt-6.25">

                        <div class="rounded-button bg-background relative h-[225px]">

                            <div class="absolute inset-center"><?= icon('youtube-play', 'w-13'); ?></div>

                        </div>

                        <div class="px-5 pt-2.5 tracking-tightened font-medium leading-[1.2]">

                            <p class="text-text-light">Comment réalise-t-on un changement de pare-brise ?</p>

                            <p class="text-icon text-sm">2 min - 2500 vues</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>