<!DOCTYPE html>
<html class="text-base">
<head>
    <meta charset="UTF-8">
    <title>
        Étape 0 - souscription     </title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" href="/assets/images/ohmenergie.png">
                <link rel="stylesheet" href="/build/app.2623a05f.css">
        <style>
            input#recup_and_sign_step_elecContractStartDate, input#recup_and_sign_step_gasContractStartDate {
                display: block;
                width: auto;
                height: calc(2.25rem + 2px);
                padding: .375rem .75rem;
                font-size: 1rem;
                line-height: 1.5;
                border: 0px solid #ffffff;
                border-radius: 0px;
                transition: none !important;
                background: url(/assets/images/calendrier.png) !important;
                background-size: 20px !important;
                background-position-y: 10px !important;
                padding-left: 30px !important;
                background-repeat: no-repeat !important;
            }
        </style>
                
                    <script src="/assets/js/gtm_for_page_head.js"></script>
        </head>
<style>
    [type="radio"]:checked + label div {
        background-color: #30AD71;
    }

    [type="radio"]:checked + label span {
        @apply font-bold;
    }

    [type="radio"]:checked + label div span{
        color: #ffffff;
    }

    [type="radio"]:checked + #prTE {
        border: none;
    }


    [type="radio"]:not(:checked) + label div {
        background-color: #fff;
    }

    [type="radio"]:not(:checked) + label div span{
        color: #000000;
    }

    .zoom-img-1 {
        position: absolute;
        left: 230px;
        z-index: 99999;
        top: 400px;
    }

        @keyframes saveBtn {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0);
        }
    }

</style>
<body class="bg-white p-0 m-0 text-ohm-dark-blue">
    <!-- Google Tag Manager (noscript) -->
<noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T6BR9TS"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

<div id="header">
    <header>


    <div class="max-w-min max-h-min fixed top-10 right-0 z-10 p-4 top-6">
        <div class="bg-ohm-green rounded-full min-w-max px-3 py-1 text-center hidden md:flex justify-center align-middle cursor-pointer ">
            <a href="tel:01 76 49 78 88"
               class="no-underline text-white flex lg:text-lg justify-center align-middle items-center gap-2">
                <img class="w-5 h-5" src="/assets/images/tel.png"/>01 76 49 78 88
            </a>
        </div>

            </div>

    </header>  
</div>

    
<div class="w-full min-h-max p-4 bg-ohm-bg text-ohm-dark-blue shadow-lg relative top-0">

    <div class="block md:flex w-2/3 justify-center items-center align-middle min-h-max gap-3 container">
        <div style="position: absolute; height: 30px; width: 150px; top: 20px; left: 20px; z-index: 5;">
            <img class="bg-no-repeat responsive-logo" src="/assets/images/backend_config/site_logo/logo_pro.png" alt="ohm energie logo"/>
        </div>

        <div class="w-4/5 mx-auto mt-5 md:mt-0">
            <div class='flex justify-start gap-3 items-center align-middle'>
                <img class="bg-no-repeat hidden md:block" src="/assets/images/ohmy_waving.svg"/>
                <span class="text-base text-center md:text-start">
                        <div>Hello je suis Ohmy, votre assistant énergétique ! <br>Je vais vous aider à trouver l’offre la plus adaptée</div>
                </span>
            </div>
        </div>
    </div>
            <div class='mt-5 w-full flex items-center align-middle container'>
            <div class="w-full">
                <div class="flex">
                                        
                                                                                                                                
                                                            
                                                                                <div class="w-1/4">
                        <a class="relative mb-2" href="">
                            <div class="w-10 h-10 mx-auto border-2 border-ohm-dark-blue rounded-full text-lg text-ohm-dark-blue flex items-center">
                                            <span class="text-center text-ohm-dark-blue  w-full">
                                                1
                                            </span>
                            </div>
                        </a>
                        <div class="text-xs text-center md:text-base mt-2 md:block">Informations</div>
                    </div>
                    <div class="w-1/4">
                        <a class="">
                            <div class="relative mb-2">
                                <div class="absolute flex align-center items-center align-middle content-center" style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)">
                                    <div class="w-full bg-gray-300 rounded items-center align-middle align-center flex-1">
                                        <div class="w-0 bg-ohm-green  py-1 rounded" style="width: 0%;"></div>
                                    </div>
                                </div>
                                <a href="">
                                    <div class="w-10 h-10 mx-auto border-2 border-ohm-green rounded-full text-lg text-ohm-green flex items-center">
                                                <span class="text-center text-ohm-green  w-full">
                                                    2
                                                </span>
                                    </div>
                                </a>
                            </div>

                            <div class="text-xs text-center md:text-base hidden md:block">Offres</div>
                        </a>
                    </div>

                    <div class="w-1/4">
                        <div class="relative mb-2">
                            <div class="absolute flex align-center items-center align-middle content-center" style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)">
                                <div class="w-full bg-gray-300 rounded items-center align-middle align-center flex-1">
                                    <div class="w-0 bg-ohm-green  py-1 rounded" style="width: 0%;"></div>
                                </div>
                            </div>
                            <a href="">
                                <div class="w-10 h-10 mx-auto border-2 border-ohm-green rounded-full text-lg text-ohm-green flex items-center">
                                    <span class="text-center text-ohm-green  w-full">3</span>
                                </div>
                            </a>
                        </div>
                        <div class="text-xs text-center md:text-base hidden md:block">Signature</div>
                    </div>

                    <div class="w-1/4">
                        <div class="relative mb-2">
                            <div class="absolute flex align-center items-center align-middle content-center" style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)">
                                <div class="w-full bg-gray-300 rounded items-center align-middle align-center flex-1">
                                    <div class="w-0 bg-ohm-green  py-1 rounded" style="width: 0%;"></div>
                                </div>
                            </div>

                            <div class="w-10 h-10 mx-auto border-2 border-ohm-green rounded-full text-lg text-ohm-green flex items-center">
                                <span class="text-center text-ohm-green w-full">4</span>
                            </div>
                        </div>

                        <div class="text-xs text-center md:text-base hidden md:block">Récapitulatif</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
    /* Default logo size */
    .responsive-logo {
        width: 150px;
    }

    /* Medium screens */
    @media (max-width: 768px) {
        .responsive-logo {
            width: 100px; /* Adjust width for tablets */
        }
    }

    /* Small screens */
    @media (max-width: 576px) {
        .responsive-logo {
            width: 70px; /* Adjust width for mobile devices */
        }
    }
</style>



    
    


<div class="relative w-full pb-2">
    <div class="min-h-[420px] h-full my-8 container">
        <div class="w-full flex flex-col md:flex-row gap-7">
                        <div class="w-full">
                    
    <form name="step_zero_common" method="post" onsubmit="$(&#039;#loader&#039;).show();">
    <div class="w-full flex flex-col justify-start gap-y-3">
        <span class="text-lg text-ohm-green font-bold">
            Votre type de contrat :
        </span>
        <div class="w-full rounded-lg shadow-lg bg-ohm-bg  py-5 flex items-center "
             id="contratEnergy">
            <div class="w-full flex justify-center align-middle items-center gap-5 md:gap-20 cursor-pointer">
                                    <div class="max-h-max flex flex-col text-center justify-start gap-y-3">
                        <label for="step_zero_common_contratEnergy_0" class="flex flex-col space-y-3">
                            <input type="radio" class="peer hidden"                                    name="step_zero_common[contratEnergy]" value="elec_energy"
                                   id="step_zero_common_contratEnergy_0" onchange="disableBorderError('contratEnergy')"/>
                            <div class="rounded-full w-[80px] h-[80px] shadow-2xl bg-white cursor-pointer text-center p-4 inline-flex items-center justify-center peer-checked:bg-ohm-green">
                                <img class="w-14" src="/assets/images/OHM-elec_energy.png">
                            </div>
                            <span class="capitalize text-ohm-dark-blue peer-checked:font-bold">électricité</span>
                        </label>
                    </div>
                                    <div class="max-h-max flex flex-col text-center justify-start gap-y-3">
                        <label for="step_zero_common_contratEnergy_1" class="flex flex-col space-y-3">
                            <input type="radio" class="peer hidden"                                    name="step_zero_common[contratEnergy]" value="dual_energy"
                                   id="step_zero_common_contratEnergy_1" onchange="disableBorderError('contratEnergy')"/>
                            <div class="rounded-full w-[80px] h-[80px] shadow-2xl bg-white cursor-pointer text-center p-4 inline-flex items-center justify-center peer-checked:bg-ohm-green">
                                <img class="w-14" src="/assets/images/OHM-dual_energy.png">
                            </div>
                            <span class="capitalize text-ohm-dark-blue peer-checked:font-bold">Elec + Gaz</span>
                        </label>
                    </div>
                                    <div class="max-h-max flex flex-col text-center justify-start gap-y-3">
                        <label for="step_zero_common_contratEnergy_2" class="flex flex-col space-y-3">
                            <input type="radio" class="peer hidden"                                    name="step_zero_common[contratEnergy]" value="gaz_energy"
                                   id="step_zero_common_contratEnergy_2" onchange="disableBorderError('contratEnergy')"/>
                            <div class="rounded-full w-[80px] h-[80px] shadow-2xl bg-white cursor-pointer text-center p-4 inline-flex items-center justify-center peer-checked:bg-ohm-green">
                                <img class="w-14" src="/assets/images/OHM-gaz_energy.png">
                            </div>
                            <span class="capitalize text-ohm-dark-blue peer-checked:font-bold">Gaz</span>
                        </label>
                    </div>
                                            </div>
        </div>
    </div>


    <div class="w-full flex flex-col justify-start gap-y-3 mt-8">
        <span class="text-lg text-ohm-green font-bold">
            Votre contrat concerne :
        </span>
        <div class="w-full rounded-lg shadow-lg bg-ohm-bg py-5 "
             id="contractType">
            <input type="hidden" name="typelogement" value="emm" id="typelogement"/>
            <div class="flex flex-row justify-evenly align-top text-center h-full">
                                                                                                                                                                                                            <label for="step_zero_common_contractType_0"
                               class="w-full md:w-1/3 flex flex-col justify-start items-center align-top">
                            <input type="radio" class="peer hidden"                                    name="step_zero_common[contractType]" value="mise_en_service"
                                   id="step_zero_common_contractType_0" onchange="disableBorderError('contractType')"/>
                            <div class="w-[80px] h-[80px] bg-white rounded-full shadow-lg flex justify-center align-middle items-center cursor-pointer peer-checked:bg-ohm-green">
                                <img class="w-16 h-16" src="/assets/images/OHM-mise_en_service.png">
                            </div>
                            <span class="mt-5 peer-checked:font-bold text-base">Un emménagement*</span>
                                                    </label>

                                                                                                                                <label for="step_zero_common_contractType_1"
                               class="w-full md:w-1/3 flex flex-col justify-start items-center align-top">
                            <input type="radio" class="peer hidden"                                    name="step_zero_common[contractType]" value="changement_de_fournisseur"
                                   id="step_zero_common_contractType_1" onchange="disableBorderError('contractType')"/>
                            <div class="w-[80px] h-[80px] bg-white rounded-full shadow-lg flex justify-center align-middle items-center cursor-pointer peer-checked:bg-ohm-green">
                                <img class="w-16 h-16" src="/assets/images/OHM-changement_de_fournisseur.png">
                            </div>
                            <span class="mt-5 peer-checked:font-bold text-base">Mon site actuel</span>
                                                    </label>

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

    <div class="w-full flex flex-col justify-start gap-y-3 mt-8">
        <span class="text-lg text-ohm-green font-bold">
            Et si on faisait connaissance ?
        </span>
        <div class="w-full rounded-lg shadow-lg bg-ohm-bg p-5">
                <div class="w-full mt-2 md:mt-0">
                    <label class="text-ohm-dark-blue text-base" >Siret *</label>
                                                                                    <input type="text" id="step_zero_common_siret" name="step_zero_common[siret]" required="required" Onblur="searchCompanyBySiret()" minlength="14" maxlength="14" onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57" placeholder="Une série de 14 chiffres" class="w-full rounded-2xl shadow-lg focus:border-ohm-green border-none py-2 px-5 mt-2 form-control" id="siret-input" />
                </div>
                <div>
                    <div id="test" ></div>
                </div>
                <div class="mt-4"></div>
                <div>
                    <h4>
                        <span id ="raisonSocialeLibelle" style="display: none;">Raison sociale :</span>
                        <span class="font-weight-bold" id="raisonSocial"></span>
                    </h4>
                </div>
                <div>
                    <h4>
                        <span id ="codeNafLibelle" style="display: none;">Code NAF :</span>
                        <span class="font-weight-bold" id="codeNaf"></span>
                    </h4>
                </div>

            <div class="mt-4"></div>
               <div class="w-full rounded-lg shadow-lg bg-ohm-bg p-5">
                   <div class="relative w-full flex items-center space-x-4">
                                                                                <span class="flex items-center">
                                <label class="ml-1 text-base" for='step_zero_common_civility947416'>
                                    <input type="radio"
                                           checked class="w-4 h-4 text-ohm-green bg-ohm-bg border-gray-300 focus:ring-ohm-green focus:ring-2"
                                           name="step_zero_common[civility]"
                                           value='mr'
                                           id='step_zero_common_civility_mr'>
                                    Monsieur
                                </label>
                            </span>
                                                                                <span class="flex items-center">
                                <label class="ml-1 text-base" for='step_zero_common_civility82294'>
                                    <input type="radio"
                                            class="w-4 h-4 text-ohm-green bg-ohm-bg border-gray-300 focus:ring-ohm-green focus:ring-2"
                                           name="step_zero_common[civility]"
                                           value='mme'
                                           id='step_zero_common_civility_mme'>
                                    Madame
                                </label>
                            </span>
                                                                        
                   </div>
            <div class="relative w-full mt-4">
                <div class="block md:flex justify-center items-center gap-3">
                        <div class="w-full mt-2 md:mt-0">
                            <label class="text-ohm-dark-blue text-base">Prénom *</label>
                                                                                                                    <input type="text" id="step_zero_common_firstName" name="step_zero_common[firstName]" required="required" class="w-full rounded-2xl shadow-lg focus:border-ohm-green border-none py-2 px-5 mt-2 form-control" />
                        </div>
                        <div class='w-full'>
                            <label class="text-ohm-dark-blue text-base">Nom *</label>
                                                                                                                    <input type="text" id="step_zero_common_lastName" name="step_zero_common[lastName]" required="required" class="w-full rounded-2xl shadow-lg focus:border-ohm-green border-none py-2 px-5 mt-2 form-control" />
                        </div>
                    </div>
                    <div class="block md:flex justify-center items-center gap-3 mt-5">
                        <div class='w-full'>
                            <label class="text-ohm-dark-blue text-base">Bénéficiaire </label>
                                                                                                                    <input type="text" id="step_zero_common_beneficiary" name="step_zero_common[beneficiary]" class="w-full rounded-2xl shadow-lg focus:border-ohm-green border-none py-2 px-5 mt-2 form-control" />
                        </div>
                    </div>
                    <div class="block md:flex justify-center items-center gap-3 mt-5">
                        <div class='w-full'>
                            <label class="text-ohm-dark-blue text-base">E-mail *</label>
                                                                                                                    <input type="email" id="step_zero_common_mail" name="step_zero_common[mail]" required="required" class="w-full rounded-2xl shadow-lg focus:border-ohm-green border-none py-2 px-5 mt-2 form-control" />
                        </div>
                        <div class="w-full mt-2 md:mt-0">
                            <label class="text-ohm-dark-blue text-base">Téléphone portable*</label>
                                                                                                                    <input type="tel" id="step_zero_common_phone" name="step_zero_common[phone]" required="required" pattern="0[1-9]{1}[0-9]{8}" title="0123456789" class="w-full rounded-2xl shadow-lg focus:border-ohm-green border-none py-2 px-5 mt-2 form-control" />
                        </div>
                </div>
                <input type="hidden" id="step_zero_common_sponsorshipCode" name="step_zero_common[sponsorshipCode]" />
            </div>
            <div class="w-full block mt-8">
                <label class="relative flex flex-row items-start cursor-pointer">
                    <div class="relative max-w-max">
                        <input type="checkbox" id="step_zero_common_isAcceptCommercialOffers" value="1" name="step_zero_common[isAcceptCommercialOffers]"  class="sr-only peer">
                        <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-ohm-green after:inline-flex after:items-center peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-ohm-green"></div>
                    </div>

                    <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
                         J’accepte de recevoir les meilleures offres et bons plans de Ohm Energie par e-mail
                        </span>
                </label>
                
                <span class="flex justify-start items-center mt-5">
                     <label class="relative flex flex-row items-start cursor-pointer">
                        <div class="relative max-w-max">
                            <input type="checkbox" id="step_zero_common_isAcceptedOhmAdvices" value="1" name="step_zero_common[isAcceptedOhmAdvices]"  class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-ohm-green after:inline-flex after:items-center peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-ohm-green"></div>
                        </div>
                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
                            Pratique, j’accepte de recevoir des conseils malins pour faire des économies d’énergie
                        </span>
                     </label>
                </span>

                            </div>

            <div id="name_check" data-modal-ohm-initialize="true" data-modal-ohm-function="nameCheck" tabindex="-1"
                 aria-hidden="true"
                 class="fixed top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center bg-gray-600 bg-opacity-80 hidden">
                <div class="w-full max-w-2xl">
                    <div class="bg-white rounded-lg shadow">
                        <div class="flex items-start justify-between p-4 rounded-t">
                            <div class="flex w-full justify-center">
                                <h3 class="flex text-xl font-semibold text-ohm-dark-blue uppercase content-center gap-3">
                                    <span class="w-full">Pouvez-vous confirmer que votre <p id="identity" class="text-xl font-semibold text-ohm-dark-blue uppercase inline-flex items-center gap-3"></p> est bien :</span>
                                </h3>
                            </div>
                            <button type="button"
                                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover-text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark-hover-bg-gray-600 dark-hover-text-white"
                                    onclick="nameCheck.hide()">
                                <svg class="w-3 h-3" aria-hidden="false" xmlns="http://www.w3.org/2000/svg" fill="none"
                                     viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                          stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                                </svg>
                                <span class="sr-only">Close modal</span>
                            </button>
                        </div>
                        <div class="p-6 mt-10">
                            <p id="show_name" class="text-green-500 font-bold text-center relative bottom-5"></p>
                            <p class="text-center italic">Une information correcte est indispensable pour retrouver
                                votre PDL</p>
                            <p class="text-center italic">(Point de Livraison)</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4 center p-6 space-x-2 place-content-around">
                            <button type="button" id="edit_name"
                                    class="uppercase shadow-xl text-ohm-dark-blue bg-ohm-input-bg hover:bg-grey-600 focus-ring-4 focus-outline-none font-medium rounded-full text-sm px-5 py-2.5">
                                Modifier
                            </button>
                            <button type="button" id="validateName" onclick="nameCheck.hide()"
                                    class="uppercase shadow-xl text-white bg-ohm-green hover-bg-green-600 focus-ring-4 focus-outline-none font-medium rounded-full text-sm px-5 py-2.5">
                                Valider
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <input type="hidden" id="step_zero_common__token" name="step_zero_common[_token]" value="c871e6891b0078d84b9fc13797166.nE3Co7BW71r4Q5jyXsGI03P-7yBdAkyMXH7Wd-zVyx4.w3mY1OocuSywKajGEILEtDGnnHozMS7rDDbiTqWHkUuuNKfE1jqDP4AT0Q" />
    <div class="w-full flex justify-center md:justify-end items-center align-middle mt-5">
        <button type="submit" id="step_zero_common_next" name="step_zero_common[next]" onclick="searchCompanyBySiret(true)" class="px-10 py-2 uppercase  bg-ohm-green rounded-full text-center text-white shadow-lg btn btn">Suivant</button>
    </div>

    <input type="hidden" id="step_zero_common_prospectReference" name="step_zero_common[prospectReference]" /><input type="hidden" id="step_zero_common_raisonSocial" name="step_zero_common[raisonSocial]" /><input type="hidden" id="step_zero_common_codeNaf" name="step_zero_common[codeNaf]" required="required" /><input type="hidden" id="step_zero_common_categorieJuridique" name="step_zero_common[categorieJuridique]" required="required" /><input type="hidden" id="step_zero_common_companyAddressLineOne" name="step_zero_common[companyAddressLineOne]" required="required" /><input type="hidden" id="step_zero_common_companyAddressZipCode" name="step_zero_common[companyAddressZipCode]" required="required" /><input type="hidden" id="step_zero_common_companyAddressCity" name="step_zero_common[companyAddressCity]" required="required" /><input type="hidden" id="step_zero_common_companyAddressInseeCode" name="step_zero_common[companyAddressInseeCode]" required="required" /></form>

            <div class="w-full mt-8">
            
                                </div>
    
                                                                                                                                                                                        
                
            </div>
            
                            <div class="w-full flex flex-col gap-5 md:w-[330px] space-y-3">
                            <div class="w-full bg-ohm-bg rounded-lg shadow-lg p-5 mt-10">
        <div class="w-full">
                            <div class="w-full space-y-3">
    <span class="block text-ohm-dark-blue font-extrabold text-sm">Avis clients : notre contrat de confiance !</span>
    <div class="trustpilot-widget" data-locale="fr-FR" data-template-id="53aa8807dec7e10d38f59f32" data-businessunit-id="5cade69d58378f00012168ed" data-style-height="150px" data-style-width="100%" data-theme="light" style="position: relative;"><iframe style="position: relative; height: 150px; width: 100%; border-style: none; display: block; overflow: hidden;" title="Customer reviews powered by Trustpilot" src="https://widget.trustpilot.com/trustboxes/53aa8807dec7e10d38f59f32/index.html?templateId=53aa8807dec7e10d38f59f32&amp;businessunitId=5cade69d58378f00012168ed#locale=fr-FR&amp;styleHeight=150px&amp;styleWidth=100%25&amp;theme=light"></iframe></div>
</div>
            
                                        <div class="w-1/3 bg-ohm-dark-blue h-[1px]"></div>
                <div class="w-full text-ohm-dark-blue mt-8">
    <span class="font-extrabold inline-flex items-start gap-x-2 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 mt-1">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"></path>
        </svg>
         Besoin d’aide ?
    </span>
    <span class="block font-extrabold text-sm">Appelez-nous vite !</span>
    <a href="tel:01 76 49 78 88"
       class="block text-ohm-green text-lg font-extrabold">01 76 49 78 88</a>
    <span class="block text-sm">du lundi au vendredi 8:30 - 20:00 </span>
    <span class="block text-sm">le samedi : 9:00 - 14:00 </span>
    <span class="block text-sm">le dimanche : 9:00 - 13:00</span>
</div>
                                </div>
</div>

                    </div>
                    </div>


                
        <div class="mt-5">
            <div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white">
                <h2 id="policyCollapse">
                    <button type="button" class="flex items-center gap-4 w-full p-5 font-medium text-left text-gray-500" data-accordion-target="#policyBodyCollapse" aria-expanded="false" aria-controls="policyBodyCollapse">
                        <b>Confidentialité et données personnelles</b>
                        <svg data-accordion-icon="data-accordion-icon" class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
                        </svg>
                    </button>
                </h2>
                <div id="policyBodyCollapse" class="hidden text-gray-500 space-y-5 text-sm" aria-labelledby="policyCollapse">
                    <p>En cliquant sur "Suivant", vous autorisez Ohm Énergie, responsable de traitement, à recueillir vos données à caractère personnel au moyen du présent formulaire de souscription pour nous permettre de traiter votre demande et vous proposer le contrat le plus adapté. Vos données personnelles seront conservées le temps nécessaire à la réalisation des opérations décrites.
                        Ohm Energie transmettra à ses sous-traitants les données personnelles nécessaires à la réalisation des missions qui leur sont confiées dans le cadre de ces mêmes finalités.
                    </p>

                    <p>Ohm énergie et ses partenaires conservent vos coordonnées téléphoniques pour vous contacter sous 30 jours et permettre la finalisation de votre souscription.</p>

                    <p>Vous disposez d'un droit d’opposition, d'accès, de rectification, de suppression, de limitation
                        portant sur les données vous concernant ainsi qu’un droit à la portabilité de vos données. Vous
                        pouvez exercer ces droits en vous adressant à : service_rgpd@ohm-energie.com
                        Vous avez également le droit d’exercer un recours auprès de la Commission Nationale de
                        l’Informatique et des Libertés (CNIL).
                    </p>

                    <p>Pour en savoir plus, consultez notre <a target="_blank"
                                                               href="https://ohm-energie.com/mentions-legales#RGPDancre"
                                                               class="underline">Politique de confidentialité</a>.</p>
                </div>
            </div>
        </div>
        <div id="loader" class="inset-0 h-screen flex justify-center items-center fixed"
             style="display: none; height:calc(100% - 60px);">
            <img width="180px" height="180px" src="/assets/images/loader2.gif"/>
        </div>
    </div>
</div>

<footer id="footer">
                                <div class="relative w-full min-h-[358px] bg-ohm-dark-blue text-white px-3 py-10">
        <div class="text-white text-md md:text-lg lg:text-2xl text-center">
            Changer de fournisseur d’Énergie, c’est beaucoup plus simple que vous ne le pensez !
        </div>
        <div class="flex flex-wrap justify-center align-middle items-center text-center mt-5 gap-5">
            <div class="block p-4 w-44 lg:w-64" style="margin-bottom:11px;">
                                <div class="flex justify-center align-middle items-center">
                    <img src="/assets/images/svg/pictoeclair.svg" />
                </div>
                <div class="block mt-5 text-center pb-1">
                    <h3 class="font-extrabold uppercase">sans coupure d'énergie</h3>
                    <span class="text-sm">Restez toujours branchés, sans pause ni coupure.</span>
                </div>
            </div>

            <div class="block p-4 w-44 lg:w-64">
                <div class="flex justify-center align-middle items-center">
                    <img src="/assets/images/svg/pictoeuro.svg"/>
                </div>
                <div class="block mt-5 text-center">
                    <h3 class="font-extrabold uppercase">sans frais de dossier</h3>
                    <span class="text-sm">Raccordement gratuit</span>
                </div>
            </div>

            <div class="block p-4 w-44 lg:w-64">
                <div class="flex justify-center align-middle items-center">
                    <img src="/assets/images/svg/pictodossier.svg" />
                </div>
                <div class="block mt-5 text-center">
                    <h3 class="font-extrabold uppercase">sans intervention</h3>
                    <span class="text-sm">Aucun RDV, aucun changement de compteur</span>
                </div>
            </div>

            <div class="block p-4 w-44 lg:w-64">
                <div class="flex justify-center align-middle items-center">
                    <img src="/assets/images/svg/pictodossier2.svg" />
                </div>
                <div class="block mt-5 text-center">
                    <h3 class="font-extrabold uppercase">sans document</h3>
                    <span class="text-sm">On s'occupe de toutes les démarches pour vous</span>
                </div>
            </div>
        </div>
    </div>
</footer>



    <div class="fixed bottom-9 left-0 p-4 space-y-3 z-20 hidden" id="error-modal">
                <div class="relative p-4 bg-red-100 border-red-500 border-2 rounded-lg ml-5" id="errorList">
            <div class="absolute top-2 right-2 text-black cursor-pointer" id="closeError">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </div>
            <ul class="text-red-500 space-y-3 p-4 errorMessage">

                            </ul>
        </div>
        <div id="ohmyError" class="cursor-pointer">
            <img class="w-20" alt="error" src="/assets/images/ohmy_error.png"/>
        </div>
    </div>

        
            <style>
        @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale3d(0.3, 0.3, 0.3);
        }

        50% {
            opacity: 1;
        }
    }
    
    @keyframes zoomOut {
        from {
            opacity: 1;
        }

        50% {
            opacity: 0;
            transform: scale3d(0.3, 0.3, 0.3);
        }

        to {
            opacity: 0;
        }
    }
</style>
<!-- End model-->

<div id="where_to_find_my_delivery_point_modal" data-modal-ohm-initialize="true" data-modal-ohm-function="whereToFindMyDeliveryPointModal"  tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80 flex items-center justify-center">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <h3 class="text-xl font-semibold text-ohm-dark-blue uppercase">

                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="where_to_find_my_delivery_point_modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="p-6 space-x-6 flex flex-col md:flex-row justify-center items-center gap-4">
                <div class="text-center flex flex-col items-center justify-center gap-2">
                    <span class="text-ohm-green text-sm lg:text-lg font-bold text-center">Je peux vous aider à trouver votre PDL</span>
                    <img class="w-48 h-48" src="/assets/images/svg/ohmyPdl.svg" />
                    <span class="text-ohm-dark-blue text-sm lg:text-md font-thin text-center">C’est le numéro à 14 chiffres se trouvant sur votre facture d`électricité</span>
                </div>

                <div class="relative">
                    <img class="animate-[zoomIn_1s_ease-in] absolute left-0 bottom-1/3" src="/assets/images/zoom.png" />
                    <img src="/assets/images/elec_paper.png" />
                </div>
            </div>
            <div class="flex items-center justify-between p-6 space-x-2  rounded-b">
                <button onclick="whereToFindMyDeliveryPointModal.hide()" type="button" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">Compris !</button>
            </div>
        </div>
    </div>
</div>

<div id="is_unable_to_continue_journey" data-modal-ohm-initialize="true" data-modal-ohm-function="isUnableToContinueJourney" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <h3 class="text-xl font-semibold text-ohm-dark-blue uppercase">

                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" onclick="isUnableToContinueJourney.hide()">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="p-6 space-x-6 flex flex-col md:flex-row justify-center items-center gap-4">
                <div class="text-center flex flex-col items-center justify-center gap-2">
                    <span class="text-ohm-black text-sm lg:text-lg font-bold text-center">Votre note financière semble être insuffisante selon notre partenaire Ellipro. Nous vous invitons à les contacter afin de la vérifier. En cas de mise à jour de cette note, vous pourrez réessayer de souscrire chez nous, après un délai de 72h.</span>
                </div>

            </div>
            <div class="flex items-center justify-center p-6 space-x-2  rounded-b">
                <a href="https://www.ellipro.fr/VcNom-web/#:~:text=Un service relation client disponible,relation-client%40ellisphere.com">
                <button onclick="isUnableToContinueJourney.hide()" type="button" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">Je contacte Ellipro</button>
                </a>
            </div>
        </div>
    </div>
</div>

<div id="where_to_find_my_calculation_point_modal" data-modal-ohm-initialize="true" data-modal-ohm-function="whereToFindMyCalculationPointModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <h3 class="text-xl font-semibold text-ohm-dark-blue uppercase">

                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="where_to_find_my_calculation_point_modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="p-6 space-x-6 flex flex-col md:flex-row justify-center items-center gap-4">
                <div class="text-center flex flex-col items-center justify-center gap-2">
                    <span class="text-ohm-green text-sm lg:text-lg font-bold text-center">Je peux vous aider à trouver votre PCE</span>
                    <img class="w-48 h-48" src="/assets/images/svg/ohmyPdl.svg" />
                    <span class="text-ohm-dark-blue text-sm lg:text-md font-thin text-center">C’est le numéro à 14 chiffres se trouvant sur votre facture</span>
                </div>

                <div class="relative">
                    <img class="animate-[zoomIn_1s_ease-in] absolute left-0 bottom-1/3" src="/assets/images/bulle_zoom_gaz.png" />
                    <img src="/assets/images/facture_gaz.jpg" />
                </div>
            </div>
            <div class="flex items-center justify-center p-6 space-x-2  rounded-b">
                <button onclick="whereToFindMyCalculationPointModal.hide()" type="button" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">Compris !</button>
            </div>
        </div>
    </div>
</div>

<div id="non_valid_pdl_pce_modal" data-modal-ohm-initialize="true" data-modal-ohm-function="nonValidPdlPceModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <h3 class="text-xl font-semibold text-ohm-dark-blue uppercase">

                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="non_valid_pdl_pce_modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="p-6 space-x-6 flex flex-col md:flex-row justify-center items-center gap-4">
                <div class="text-center flex flex-col items-center justify-center gap-2">
                    <span class="text-ohm-dark-blue text-sm lg:text-md font-thin text-center">
                            Attention, nous avons détecté un problème concernant votre adresse ou votre PDL/PCE
                            voulez-vous continuer pour évaluer votre mensualité ?
                    </span>
                </div>
            </div>
            <div class="flex items-center justify-center p-6 space-x-2  rounded-b">
                <button onclick="submitPdlPceForm(true); nonValidPdlPceModal.hide()" data-modal-hide="non_valid_pdl_pce_modal" type="button" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center"> Continuer</button>

                <button onclick="nonValidPdlPceModal.hide()" type="button" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center"> Modifier</button>
            </div>
        </div>
    </div>
</div>

<div id="error_city_code_between_energy_modal" data-modal-ohm-initialize="true" data-modal-ohm-function="errorCityCodeBetweenEnergyModal" aria-modal="true" role="dialog" aria-labelledby="error_city_code_between_energy_modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <h3 class="text-xl font-semibold text-ohm-dark-blue uppercase">

                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="error_city_code_between_energy_modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="p-6 space-x-6 flex flex-col md:flex-row justify-center items-center gap-4">
                <div class="text-center flex flex-col items-center justify-center gap-2">
                    <span class="text-ohm-dark-blue text-sm lg:text-md font-thin text-center">
                        Attention, la commune de votre Point de Comptage Gaz n’est pas la même que celle de votre
                        Point De Livraison Électricité, merci de vérifier ou de souscrire l’électricité et le gaz
                        séparément.
                    </span>
                </div>
            </div>
            <div class="flex items-center justify-center p-6 space-x-2  rounded-b">

                <button onclick="errorCityCodeBetweenEnergyModal.hide()" type="button" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center"> Continuer</button>
                <button id="js--modal_edit_pdl_pce" onclick="errorCityCodeBetweenEnergyModal.hide()" type="button" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">  Modifier Mes données</button>
            </div>
        </div>
    </div>
</div>

<div id="save_subscription" data-modal-ohm-initialize="true" data-modal-ohm-function="saveSubscription" tabindex="-1" aria-modal="true" role="dialog" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80 mx-auto">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="save_subscription">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="p-6 space-y-6">
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400 text-center">
                <h3>
                    Je sauvegarde l'avancement de mon contrat ?
                </h3>
                </p>
            </div>
            <div class="flex items-center justify-between p-6 space-x-2  rounded-b">
                <button id="continue_subscription" onclick="saveSubscription.hide()" data-modal-hide="save_subscription" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none  rounded-full border border-gray-200 text-sm font-medium px-5 py-2.5">Je continue</button>
                <button type="button" id="confirm_save_subscription" data-modal-hide="save_subscription" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">Je confirme</button>
            </div>
        </div>
    </div>
</div>

    <div id="error_research_point_modal" data-modal-ohm-initialize="true" data-modal-ohm-function="errorResearchPointModal" tabindex="-1" aria-hidden="true"
         class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
        <div class="relative w-full max-w-2xl max-h-full">
            <div class="relative bg-white rounded-lg shadow">
                <div class="flex items-start justify-between p-4 rounded-t">
                    <button type="button"
                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                            data-modal-hide="error_research_point_modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                             viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <div class="p-6 space-y-6">
                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400 text-center">
                        êtes vous sûr(e) que le nom renseigné est correct ?
                    </p>
                </div>
                <div class="flex items-center justify-between p-6 space-x-2  rounded-b">
                    <button onclick="errorResearchPointModal.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none  rounded-full border border-gray-200 text-sm font-medium px-5 py-2.5">Valider</button>
                    <button type="button" onclick="errorResearchPointModal.hide()" class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">Modifier</button>
                </div>
            </div>
        </div>
    </div>

    <div id="no_pdl_modal" data-modal-ohm-initialize="true" data-modal-ohm-function="noPdlModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
        <div class="relative w-full max-w-2xl max-h-full">
            <div class="relative bg-white rounded-lg shadow">
                <div class="flex items-start justify-between p-4 rounded-t">
                    <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="no_pdl_modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <div class="p-6 space-y-6">
                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400 text-center">
                        Désolé, nous n’avons pas pu trouver votre PDL. Vous pouvez nous
                        appeler pour qu’un agent vous accompagne : <br>
                        <a href="tel:01 76 49 78 88">
                            01 76 49 78 88
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>

<div id="indexElecModal" tabindex="-1" aria-hidden="true" data-modal-ohm-initialize="true"
     class="fixed hidden top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
    <div class="relative w-full lg:w-2/3 max-w-4xl max-h-full">
        <div class="relative bg-white rounded-xl shadow-lg">
            <div class="flex items-start justify-between px-4 py-1 rounded-t">
                <button type="button"
                        class="text-ohm-green font-black bg-transparent border-2 border-ohm-green hover:border-ohm-dark-green hover:text-ohm-dark-green rounded-full text-sm w-6 h-6 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        data-modal-hide="indexElecModal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewbox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>

            <div class="w-full bg-ohm-green py-1">
                <p class="text-white mx-auto text-center">Où trouver mon index (électricité) ?</p>
            </div>

            <div class="w-full pb-8 px-2 lg:px-16">

                <div id="indexElecButtons" class="group mt-5 flex flex-wrap justify-center gap-4">
                    <div>
                        <input type="radio" id="indexLinkyButton" name="indexElecType" value="linky"
                               class="hidden peer/indexLinky" checked/>
                        <label for="indexLinkyButton"
                               class="block text-xs p-2 w-32 text-center text-gray-900 border border-gray-900 hover:border-ohm-green peer-checked/indexLinky:border-ohm-green peer-checked/indexLinky:text-ohm-green rounded-full shadow-lg cursor-pointer">Linky</label>
                    </div>
                    <div>
                        <input type="radio" id="indexElectroButton" name="indexElecType" value="electro"
                               class="hidden peer/indexElectro"/>
                        <label for="indexElectroButton"
                               class="block text-xs p-2 w-32 text-center text-gray-900 border border-gray-900 hover:border-ohm-green peer-checked/indexElectro:border-ohm-green peer-checked/indexElectro:text-ohm-green rounded-full shadow-lg cursor-pointer">Electronique</label>
                    </div>
                    <div>
                        <input type="radio" id="indexElectroMButton" name="indexElecType" value="electroM"
                               class="hidden peer/indexElectroM"/>
                        <label for="indexElectroMButton"
                               class="block text-xs p-2 w-32 text-center text-gray-900 border border-gray-900 hover:border-ohm-green peer-checked/indexElectroM:border-ohm-green peer-checked/indexElectroM:text-ohm-green rounded-full shadow-lg cursor-pointer">Electromagnetique</label>
                    </div>
                </div>

                <div class="w-full p-6 space-x-6 flex flex-col lg:flex-row justify-center gap-4">
                    <div class="w-full lg:w-1/2 flex flex-col justify-between gap-12">
                        <p id='indexLinkyhelpText'
                           class="help-text-index-elec text-ohm-dark-blue text-base font-thin my-auto">
                            Les index peuvent être trouvé directement sur votre compteur Linky.
                            <br/>
                            Pour cela, faites défiler les affichages du compteur (<span
                                    class='text-ohm-dark-blue font-extrabold'>appui sur la touche +</span>) jusqu’à lire
                            la valeur «
                            <span class='text-ohm-dark-blue font-extrabold'>Heure pleine</span>
                            » et
                            <span class='text-ohm-dark-blue font-extrabold'>Heure creuse</span>
                            »
                        </p>
                        <p id='indexElectroMhelpText'
                           class="hidden help-text-index-elec text-ohm-dark-blue text-base font-thin my-auto">
                            En
                            <span class='text-ohm-dark-blue font-extrabold'>option “ base ”</span>
                            , il vous suffit de regarder l’unique cadran sur le compteur.
                            <br/>
                            En
                            <span class='text-ohm-dark-blue font-extrabold'>option “ heures pleines/heures creuses”</span>
                            , le compteur est constitué de 2 cadrans distincts : un cadran HP (heures pleines), et un
                            cadran HC (heures creuses.)
                        </p>
                        <p id='indexElectrohelpText'
                           class="hidden help-text-index-elec text-ohm-dark-blue text-base font-thin my-auto">
                            En
                            <span class='text-ohm-dark-blue font-extrabold'>option “base”</span>, appuyer
                            <span class='text-ohm-dark-blue font-extrabold'>une fois sur le bouton S</span>
                            pour afficher votre consommation à l’écran.
                            <br/>
                            En
                            <span class='text-ohm-dark-blue font-extrabold'>option “HP/HC”</span>, appuyer sur le
                            <span class='text-ohm-dark-blue font-extrabold'>bouton S</span>
                            pour avoir l’affichage de la consommation en HP. Et appuyez sur le
                            <span class='text-ohm-dark-blue font-extrabold'>bouton D</span>
                            pour voir s’afficher la consommation en HC.
                        </p>
                    </div>

                    <div class="w-full lg:w-1/2">
                        <img id='indexElecHelpImage' class='w-full object-contain'
                             src="/assets/images/linky-index.png"/>
                    </div>
                </div>

                <div class="flex justify-center">
                    <button type="button"
                            class="text-white text-sm bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full shadow-lg px-8 py-2.5 text-center uppercase"
                            data-modal-hide="indexElecModal">
                        Compris !
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="alert_no_pdl_souscription_modal" data-modal-ohm-initialize="true"
     data-modal-ohm-function="alert_no_pdl_souscription_modal" tabindex="-1" aria-hidden="true"
     class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <h3 class="text-xl font-semibold text-ohm-dark-blue uppercase">

                </h3>
                <button type="button"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        onclick="alert_no_pdl_souscription_modal.hide()">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="p-6 space-x-6 flex flex-col md:flex-row justify-center items-center gap-4">
                <div class="text-center flex flex-col items-center justify-center gap-2">
                    <span class="text-ohm-dark-blue text-sm lg:text-md font-thin text-center">Le Gestionnaire de Réseau de Distribution ne reconnait pas votre Point de Livraison</span>
                </div>
            </div>
            <div class="flex items-center justify-center p-6 space-x-2  rounded-b">
                <button onclick="alert_no_pdl_souscription_modal.hide()" type="button"
                        class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">
                    Annuler
                </button>

                <button onclick="submitForm(); alert_no_pdl_souscription_modal.hide()" type="button"
                        class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center">
                    Continuer quand même !
                </button>
            </div>
        </div>
    </div>
</div>
<div id="wrong_client_modal" data-modal-ohm-initialize="true" data-modal-ohm-function="wrong_client_modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[100%] max-h-full bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full mx-auto">
        <div class="relative bg-white rounded-2xl shadow">
            <div class="flex items-start justify-between p-4 rounded-t">
                <h3 class="text-xl font-semibold text-ohm-dark-blue uppercase"></h3>
                <button
                        type="button"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
                        onclick="(typeof wrong_client_modal!=='undefined'?wrong_client_modal:window.wrongClientModal)?.hide()"
                        aria-label="Fermer"
                >
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                </button>
            </div>
            <div class="p-8">
                <div class="flex flex-col items-center text-center space-y-6">
                    <p class="text-ohm-dark-blue text-base md:text-lg leading-relaxed max-w-xl">
                        Attention, le Point De Livraison
                        <span id="delivery_point_value" class="font-semibold text-ohm-green">
                        </span>
                        est référencé comme résidentiel.
                        Assurez-vous qu’il s’agisse du bon numéro de compteur avant de continuer à souscrire à notre offre professionnelle.
                    </p>
                    <button
                            id="btn_residential_next"
                            type="button"
                            class="text-white bg-ohm-green hover:bg-green-600 focus:ring-4 focus:outline-none font-medium rounded-full text-sm px-8 py-2.5 transition disabled:opacity-60 disabled:cursor-not-allowed">
                        <span id="btn_residential_text">Suivant</span>
                        <span id="btn_residential_spinner" class="hidden ml-2 inline-block align-middle animate-spin border-2 border-white border-t-transparent rounded-full w-4 h-4"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


    </div>
</body>

        <script src="/build/runtime.9a71ee5d.js" defer></script><script src="/build/751.1fc5c8ec.js" defer></script><script src="/build/app.0784ad4d.js" defer></script>
        <script src="/assets/js/jquery-3.3.1.min.js"></script>
    <script src="/assets/js/jquery-ui.js"></script>
    <script src="/assets/js/jquery-migrate-3.0.0.min.js"></script>
    <script src="/assets/js/main_ohm.js"></script>
    <script src="/assets/js/jquery.validate.min.js"></script>
    <script src="/assets/js/animation-ohmy-based-on-class.js"></script>
    <script src="/assets/js/validator.min.js"></script>
    <script src="/assets/datepicker/js/datepicker.min.js"></script>
    <script src="/assets/datepicker/js/constants/datepicker.fr-FR.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.js"></script>

    <script>
        var modals = document.querySelectorAll('[data-modal-ohm-initialize]');
        modals.forEach(function (modal) {
            if(modal.getAttribute('data-modal-ohm-initialize') == "true")
            {
                var input = document.createElement("input");
                input.setAttribute("type", "hidden");
                input.setAttribute("data-modal-target", modal.getAttribute('id'));
                input.setAttribute("id", "modalTarget");
                document.body.appendChild(input);

                const modalFunction = modal.getAttribute('data-modal-ohm-function');
                const options = {
                    placement: 'center',
                    backdrop: 'dynamic',
                    backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
                    closable: true,
                };
                
                const modalInstance = new Modal(modal, options);
                window[modalFunction] = {
                    show: function () {
                        modalInstance.show();
                    },
                    hide: function () {
                        modalInstance.hide();
                    }
                };
            }

        });

    </script>

            <script type="text/javascript">
            var userContact = {"contactFirstName":"","contactLastName":"","contactEmail":""};
        </script>
        <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

    <script src="/assets/js/journeyUtility/Common/elementsSelector.js"></script>
    <script src="/assets/js/journeyUtility/Common/inseeCompanyFunctions.js"></script>

    <script type="text/javascript">

        function disableBorderError(type) {
            $("#" + type).css({"border": "none"});
        }

        var name = ''
        var clicked = ''
        var isFirstNameValidated = false;
        var isLastNameValidated = false;
        var searchCompanyBySiretRoute = "/public_api/siret_info";


        $(document).ready(function () {
            $("#step_zero_common_lastName").on('blur', function () {
                clicked = '#step_zero_common_lastName'
                document.getElementById('identity').innerText = "nom"
                var lastName = $(this).val();
                var lastNameLength = lastName.length;
                if (lastNameLength < 3 && lastNameLength !== 0 && isLastNameValidated === false) {
                    nameCheck.show();
                    document.getElementById('show_name').innerText = lastName;
                }
            });

            $("#step_zero_common_firstName").on('blur', function () {
                clicked = '#step_zero_common_firstName'
                document.getElementById('identity').innerText = "prénom"
                var firstName = $(this).val();
                var firstNameLength = firstName.length;
                if (firstNameLength < 3 && firstNameLength !== 0 && isFirstNameValidated === false) {
                    nameCheck.show();
                    document.getElementById('show_name').innerText = firstName;
                }
            });

            $('#edit_name').on('click', function () {
                if (clicked === '#step_zero_common_lastName') {
                    $("#step_zero_common_lastName").focus().select();
                } else {
                    $("#step_zero_common_firstName").focus().select();
                }
                nameCheck.hide();
            });

            $("#validateName").on('click', function () {
                if (clicked === '#step_zero_common_lastName') {
                    isLastNameValidated = true;
                } else if (clicked === '#step_zero_common_firstName') {
                    isFirstNameValidated = true;
                }
            });
                    });
        var autoCompleteAddressUrl = "/ajax/search-adress";
    </script>

</html>
