<!DOCTYPE html>
<html  lang="fr" 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.dbb57d8c.css">
        <style>
            /* Ensure loader animation compatibility with Safari */
            @-webkit-keyframes spin {
                0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
                100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
            }
            @keyframes spin {
                0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
                100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
            }
            .animate-spin {
                -webkit-backface-visibility: hidden;
                -webkit-animation: spin 1s linear infinite;
                animation: spin 1s linear infinite;
                will-change: transform;
            }
        </style>
        <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.webp) !important;
                background-size: 20px !important;
                background-position-y: 10px !important;
                padding-left: 30px !important;
                background-repeat: no-repeat !important;
            }
        </style>
    
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
            
                    <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" data-gt="auto">

    <!-- 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" data-gt="auto">
    <header>
            
        <div class="max-w-max max-h-min fixed top-10 right-0 z-50 p-2">
        <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 mt-6">
            <a href="tel:09 70 70 21 25"
               class="no-underline text-white flex items-center gap-2 text-lg">
                <img class="w-4 h-4" src="/assets/images/tel.png" alt="Phone Icon"/>
                09 70 70 21 25
            </a>
        </div>
            </div>
    </header></div>

    
<div class="w-full min-h-max p-4 bg-ohm-bg text-ohm-dark-blue shadow-lg relative">
    <div class="flex flex-col md:flex-row w-full items-center">
        <!-- Logo aligned to the extreme left -->
        <div class="flex-none md:absolute left-0 top-0 md:top-auto md:left-4">
            <a href="http://ohm-energie.com/" target="_blank" rel="noopener noreferrer">
                <img class="bg-no-repeat" src="/assets/images/backend_config/site_logo/ohmenergie.svg" alt="ohm energie logo" />
            </a>
        </div>
        <!-- Centered image section -->
        <div class="flex-1 flex flex-col md:flex-row justify-center items-center">
            <div class="w-full md:w-1/2 flex flex-col md:flex-row justify-center gap-3 items-center">
                <img class="bg-no-repeat hidden md:block" src="/assets/images/moine.png" style="
                    width: 100px;
                    height: 100px;
                "/>
                <div style="
                        position: relative;
                        background-image: url('/assets/images/OHMM.png');
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                        padding: 15px;
                        ">
                    <span class="text-base text-center md:text-start text-nowrap">
                    <div>Hello je suis votre assistant énergétique ! Je vais vous aider à trouver l’offre la plus adaptée. <br>1 an d'électricité à GAGNER*** avec le code<span style="color:green;font-weight:bold"> WELCOME</span></div>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- Conteneur principal avec un espace en haut et centrage des éléments -->
    <div class="mt-5 flex justify-center">
        <!-- Bloc conditionnel pour afficher les étapes basées sur la valeur de macroActivStep -->
        <!-- Si l'étape active est 'information' -->
                    <!-- Conteneur des étapes avec une largeur spécifique -->
            <div class="relative flex flex-wrap center custom-width">
                <!-- Étape 01: Informations, avec un fond vert et texte blanc pour l'étape active -->
                <a href=""
                   class="flex-1 flex items-center justify-center bg-green-500 text-white py-3 border border-gray-300 rounded-full -ml-10 z-40 text-xs md:text-base -mx-1 !important active">
                    <span class="mr-0" style="font-size: 14px; margin-right: 5px;">01.</span>
                    <span class="inline md:inline" style="font-size: 14px;">Informations</span>
                </a>
                <!-- Étape 02: Offres, avec un fond blanc et texte noir pour une étape inactive -->
                <a href=""
                   class="flex-1 text-center bg-white text-black py-3 border border-gray-300 rounded-full -ml-10 z-30 text-xs md:text-base mx-1 flex items-center justify-center inactive">
                    <span class="mr-1" style="font-size: 14px; margin-right: 5px;">02.</span>
                    <span class="hidden md:inline" style="font-size: 14px;">Offres</span>
                </a>
                <!-- Étape 03: Signature, avec un fond blanc et texte noir pour une étape inactive -->
                <a href=""
                   class="flex-1 text-center bg-white text-black py-3 border border-gray-300 rounded-full -ml-10 z-20 text-xs md:text-base mx-1 flex items-center justify-center inactive">
                    <span class="mr-0" style="font-size: 14px; margin-right: 5px;">03.</span>
                    <span class="hidden md:inline" style="font-size: 14px;">Signature</span>
                </a>
                <!-- Étape 04: Récapitulatif, avec un fond blanc et texte noir pour une étape inactive -->
                <a class="flex-1 text-center bg-white text-black py-3 border border-gray-300 rounded-full -ml-10 z-10 text-xs md:text-base mx-1 flex items-center justify-center inactive">
                    <span class="mr-1" style="font-size: 14px; margin-right: 5px;">04.</span>
                    <span class="hidden md:inline" style="font-size: 14px;">Récapitulatif</span>
                </a>
            </div>
                <!-- Si l'étape active est 'offer' -->
                <!-- Si l'étape active est 'sign' -->
                <!-- Si l'étape active est 'recup' -->
                </div>
        <style>
            .custom-width {
                width: 55%;
            }
            @media (max-width: 1030px) {
                /* Ajuste la largeur pour que les éléments prennent tout l'espace disponible sur petit écran */
                .relative.flex.flex-wrap.center {
                    width: 90%;
                }
                /* Ajuste la largeur et le padding des éléments inactifs pour s'adapter à l'écran mobile */
                .relative.flex.flex-wrap.center > a,
                .relative.flex.flex-wrap.center > div {
                    height: auto;
                    padding: 0.5rem 0rem;
                    white-space: nowrap;
                    margin-left: -3%; /* Ajustez la marge pour compenser le débordement */
                    margin-right: -5%; /* Ajustez la marge pour compenser le débordement */
                }
                /* Cacher les éléments de texte pour les étapes inactives */
                .relative.flex.flex-wrap.center > a span.hidden,
                .relative.flex.flex-wrap.center > div span.hidden {
                    display: none !important; /* Cache les textes inactifs */
                }
                /* Déplacement du numéro vers la gauche pour les éléments inactifs */
                .relative.flex.flex-wrap.center > a.inactive span.mr-1{
                    transform: translateX(-8px); /* Décale légèrement vers la gauche les éléments inactifs */
                }
                /* Assurez-vous que le numéro de l'étape active ne se déplace pas */
                .relative.flex.flex-wrap.center > div > span.mr-0 {
                    transform: none; /* Pas de déplacement pour l'étape active */
                }
                /* Si vous avez une classe active, assurez que le texte des éléments actifs reste visible */
                .relative.flex.flex-wrap.center > a.active span,
                .relative.flex.flex-wrap.center > div.active span {
                    display: inline !important; /* Affiche les textes actifs */
                }
            }
         </style>
        </div>



                
                <div class="flex justify-center h-20 md:h-10" style="background-color: #0073B8;">
        <p class="font-bold text-white flex items-center text-center ml-3 mr-3">Offre électricité EXTRA ÉCO VERT : jusqu'à -15% sur le prix du kWh HT** par rapport au TRV</p>
    </div>

    


<div class="relative w-full pb-2" data-gt="auto">
    <div class="min-h-[420px] h-full my-1 container">
        <div class="w-full flex flex-col md:flex-row gap-7">
                        <div class="w-full">
                    <style>
        .autocomplete-list {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 8px;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-height: 200px;
            overflow-y: auto;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 26px;
            position: absolute;
            top: 6px;
            right: 1px;
            width: 20px;
        }

        .select2-selection__rendered {
            border: 0;
            outline: 0;
            background: white;
            padding: 4px 20px 4px 8px;
            height: 100%;
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 0;
            border-radius: 4px;
            height: 37.5px;
        }
        .select2-results {
            display: block;
            width: 200px;
        }

        .select2-dropdown--below {
            width: 200px !important;
        }

        .select2-dropdown--above {
            width: 200px !important;
        }

    </style>
                                                                                                                                                                                                                                
    <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.webp">
                            </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.webp">
                            </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.webp">
                            </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.webp">
                            </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.webp">
                            </div>
                            <span class="mt-5 peer-checked:font-bold text-base">Mon logement 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="relative w-full flex items-center space-x-4">
                                                        <span class="flex items-center">
            <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="mr"
                   id="step_zero_common_civility549460"
                   >
            <label class="ml-1 text-base cursor-pointer" for='step_zero_common_civility549460'>
                Monsieur
            </label>
        </span>
                                                        <span class="flex items-center">
            <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_civility776051"
                   >
            <label class="ml-1 text-base cursor-pointer" for='step_zero_common_civility776051'>
                Madame
            </label>
        </span>
                                            </div>
            <div class="relative w-full mt-4">
                <div class="block md:flex justify-center items-center gap-3">
                    <!-- Champ Prénom -->
                    <div class="w-full mt-2 md:mt-0 relative">
                        <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" />
                        <ul id="autocomplete-list-first-name" class="autocomplete-list hidden">
                        </ul>
                    </div>

                    <!-- Champ Nom -->
                    <div class="w-full mt-2 md:mt-0 relative">
                        <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" />
                        <ul id="autocomplete-list-last-name" class="autocomplete-list hidden">
                        </ul>
                    </div>
                </div>
                <div class="block md:flex justify-center items-center gap-3 mt-4">
                    <div class="w-full mt-2 md:mt-0">
                        <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>

                        <!-- Wrapper to visually combine both inputs -->
                        <div class="flex mt-2 gap-0 rounded-2xl shadow-lg overflow-hidden border
                                                            border-gray-300
                            ">
                                                        <!-- Phone Number Input -->
                            <div class="flex-1">
                                <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" oninvalid="this.setCustomValidity(&#039;Numéro de mobile invalide! Utilisez le format national de votre pays (10-12 chiffres pour les pays avec 0 initial ou 8-10 sans 0 initial)&#039;)" oninput="this.setCustomValidity(&#039;&#039;)" class="w-full px-5 py-2 border-none focus:ring-0 form-control" id="phone-input" />
                            </div>
                        </div>

                        <!-- Display validation errors -->
                        
                                            </div>
                </div>
            </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 et SMS
                        </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>

            <input type="hidden" id="step_zero_common_sponsorshipCode" name="step_zero_common[sponsorshipCode]" />
        <input type="hidden" id="step_zero_common__token" name="step_zero_common[_token]" value="82ffc9532f0a61b32.EC4eYXWJoWw-ZeUw9cO7o7U0ODGI22lLa7DSdUAS5e4.TxdrLC3dlyJMPKBjw5qC4NZXXH_ZvRMcJ9aoIhl9rqNZZEgYMsDLP1oqlg" />
    <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]" 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]" /></form>

            <div class="w-full mt-8">
            
                            <span class="text-sm text-gray-500 first-letter:capitalize">*Remarque : lors d’un emménagement, des frais de mise en service s’appliquent. Ils sont facturés par le réseau de distribution et Ohm Energie vous les refacture sans surcout. Ces frais sont communs à tous les fournisseurs. Voir les tarifs pour
                <a target="_blank" class="text-blue-600 underline cursor-pointer" href="https://www.enedis.fr/media/2014/download">l'électricité</a> et pour le
                <a target="_blank" class="text-blue-600 underline cursor-pointer" href="https://www.grdf.fr/institutionnel/actualite/publications/catalogue-prestations">gaz</a></span>
                                </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:09 70 70 21 25"
       class="block text-ohm-green text-lg font-extrabold">09 70 70 21 25</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 underline gap-4 w-full p-5 font-medium text-xs 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>

                <!-- Updated Loader Code -->
        <div id="loader"
             class="fixed inset-0 h-screen flex justify-center items-center bg-opacity-50 z-50"
             style="display: none; height: calc(100% - 60px);">
            <img class="animate-spin w-40 h-40"
                 src="/assets/images/loader2.gif"
                 alt="Loader"/>
        </div>
    </div>
</div>

<footer id="footer" data-gt="auto">
                                                            <div class="w-full bg-ohm-dark-blue"><p class="text-white text-sm" id="offer-detail">** Réduction de -15 % pour une puissance de compteur souscrite inférieure ou égale à 8 kVA et de -14,3 % pour une puissance de compteur souscrite supérieure à 8 kVA, sur l’option tarifaire Base et réduction de -13,5 % sur l’option tarifaire Heures Pleines / Heures Creuses. Réductions exprimées en pourcentage sur le prix du kWh HT par rapport au TRV en vigueur en mars 2026. Prix de l'abonnement supérieurs au TRV en vigueur en mars 2026. Prix exacts du kWh, de l’abonnement et autres modalités disponibles sur la grille tarifaire de l’offre. Offre réservée aux nouveaux clients particuliers.
<br> *** Jeu-concours avec tirage au sort organisé par Ohm Énergie, réservé à toute souscription d’un contrat d’électricité ou d’électricité et de gaz, pour une puissance souscrite inférieure ou égale à 36 kVA, effectuée entre le 30/03/2026 et le 28/06/2026 inclus, via les canaux de souscription éligibles et avec saisie obligatoire du code promotionnel « WELCOME ». Le gagnant bénéficiera d’un geste commercial équivalent au montant de ses factures d’électricité, dans la limite de 15 000 kWh (valeur estimée à environ 3 000 € TTC), pour une durée maximale de 12 mois consécutifs. Voir le règlement et les conditions de participation sur <a href="https://ohm-energie.com/reglement/jeu-concours-1-an-electricite-a-gagner" target="_blank">https://ohm-energie.com/reglement/jeu-concours-1-an-electricite-a-gagner</a></p>
    </div>


                <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/pictocadenas.svg" />
                </div>
                <div class="block mt-5 text-center">
                    <h3 class="font-extrabold uppercase">sans engagement</h3>
                    <span class="text-sm">Résiliation à tout moment sans frais</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.webp"/>
        </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;
        }
    }

    .bold-label {
        font-family: 'Inter', 'Segoe UI', sans-serif;
        font-weight: 800;
        font-size: 17px;
        color: #0B294A;
        margin-bottom: 12px;
    }
</style>
<!-- End model-->
<!-- MODAL -->
<div id="subscribed_power_modal"
     class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto h-[100%] max-h-full">
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4">
        <div class="bg-white rounded-2xl shadow-xl p-6 sm:p-8 max-w-2xl w-full relative text-[15px] animate-fade-in">

            <div class="flex justify-end mb-6">
                <!-- Fermer -->
                <button onclick="closeSubscribedPowerModal()"
                        class="flex items-center gap-1 border border-[#00A376] text-[#00A376] rounded-full px-4 py-1.5 text-sm font-medium hover:bg-[#00A376] hover:text-white transition">
                    <span>x</span> <span>Fermer</span>
                </button>
            </div>

            <!-- Titre -->
            <h2 class="text-xl font-bold text-ohm-light-blue mb-6">La “puissance souscrite”, c’est quoi ?</h2>

            <!-- Texte -->
            <p class="text-gray-800 mb-6">
                C’est la capacité maximale d’électricité que votre compteur peut fournir en même temps.
                Elle détermine donc le nombre d’appareils électriques que vous pouvez utiliser en même temps.
            </p>

            <p class="text-gray-800 mb-6">
                <span class="bold-label">À la signature du contrat</span> :
                la Puissance Souscrite retenue est déterminée sur la base de la configuration actuelle de votre compteur
                (OU : la Puissance Souscrite retenue est déterminée sur la base de vos réponses au questionnaire conso précédent).
            </p>
            <p class="text-gray-800 mb-6">
                <span class="bold-label">Pendant votre contrat</span> : possibilité de suivre la Puissance Maximale journalière (service gratuit) ;
                Ohm Énergie vous proposera alors d’optimiser votre Puissance Souscrite afin de réduire le prix de votre abonnement.
                Vous pouvez, de plus, à tout moment demander à changer de Puissance Souscrite.
            </p>

            <!-- J’AI COMPRIS -->
            <div class="flex justify-end">
                <button onclick="closeSubscribedPowerModal()" class="bg-ohm-green hover:bg-green-700 text-white font-semibold px-12 py-2 rounded-full text-lg">
                    J’AI COMPRIS
                </button>
            </div>

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


<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.webp" />
                    <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="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.webp" />
                    <img src="/assets/images/facture_gaz.webp" />
                </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:09 70 70 21 25">
                        09 70 70 21 25
                    </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.webp"/>
                    </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>

<!-- Modal "confirm_hangup_with_client" -->
<div id="confirm_hangup_with_client" data-modal-ohm-initialize="true" data-modal-ohm-function="confirmHangupWithClient" tabindex="-1" aria-modal="true" role="dialog" aria-hidden="true" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full flex justify-center items-center z-50">
        <div class="relative bg-white rounded-lg shadow max-h-[70%] w-full">
            <!-- Close Button -->
            <div class="flex items-start justify-between p-3 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">
                    <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="text-center">
                <p class="text-2xl font-semibold text-ohm-dark-blue">J'ai bien raccroché avec le client</p>
            </div>
            <div class="flex items-center justify-center p-5 space-x-4 rounded-b">
                <button id="hangup_yes" 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-10 py-2.5 text-center"> Oui</button>
                <button id="hangup_no" 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-10 py-2.5 text-center"> Non</button>
            </div>
            <!-- toast message to alert client to hungup-->
            <div id="alert_hangup_agent" class="flex items-center p-4 mb-4 animate-bounce delay-300 text-orange-500 bg-orange-100 rounded-lg shadow fixed bottom-5 right-5 z-50 space-x-2 hidden" role="alert">
                <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg">
                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
                    </svg>
                    <span class="sr-only">Warning icon</span>
                </div>
                <div class="ml-3 text-sm font-normal">En vertu de la réglementation, vous ne pouvez pas envoyer le contrat pour signature AVANT d'avoir raccroché avec le client</div>
                <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8" data-dismiss-target="#alert_hangup_agent" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <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>
    </div>
</div>
<!-- Modal "client_confirm_hangup" -->
<div id="client_confirm_hangup" data-modal-ohm-initialize="true" data-modal-ohm-function="clientConfirmHangupModal" tabindex="-1" aria-modal="true" role="dialog" aria-hidden="true" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-gray-600 bg-opacity-80">
    <div class="relative w-full max-w-2xl max-h-full flex justify-center items-center z-50">
        <div class="relative bg-white rounded-lg shadow max-h-[70%] w-full">
            <!-- Close Button -->
            <div class="flex items-start justify-between p-3 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">
                    <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="text-center">
                <p class="text-2xl font-semibold text-ohm-dark-blue">Le conseiller a-t-il bien raccroché ?</p>
            </div>
            <div class="flex items-center justify-center p-5 space-x-4 rounded-b">
                <button id="hangup_yes" 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-10 py-2.5 text-center"> Oui</button>
                <button id="hangup_no" 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-10 py-2.5 text-center"> Non</button>
            </div>
            <!-- toast message to alert client to hungup-->
            <div id="alert_hangup_client" class="flex items-center p-4 mb-4 animate-bounce delay-300 text-orange-500 bg-orange-100 rounded-lg shadow fixed bottom-5 right-5 z-50 space-x-2 hidden" role="alert">
                    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg">
                        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
                        </svg>
                        <span class="sr-only">Warning icon</span>
                    </div>
                <div class="ml-3 text-sm font-normal">En vertu de la réglementation, le conseiller ne peut pas rester en ligne avec vous.</div>
                <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8" data-dismiss-target="#alert_hangup_client" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <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>
    </div>
</div>

<!-- toast message to alert agent to hungup-->
<div id="alert_remind_hangup_agent" class="flex items-center p-4 mb-4 animate-bounce delay-300 text-orange-500 bg-orange-100 rounded-lg shadow fixed bottom-5 right-5 z-50 space-x-2 hidden" role="alert">
    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg">
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
        </svg>
        <span class="sr-only">Warning icon</span>
    </div>
    <div class="ml-3 text-sm font-normal">L'e-mail est en cours de réception dans la boite e-mail du client. N'oubliez pas de raccrocher et recontacter le client selon la réglementation en vigueur.</div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8" data-dismiss-target="#alert_remind_hangup_agent" aria-label="Close">
        <span class="sr-only">Close</span>
        <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 id="certainty_level_bloc_modal"
      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">
    <div class="relative w-full max-w-2xl max-h-full">
        <div class="relative bg-white rounded-lg shadow">
            <!-- Contenu dynamique de la modale -->
            <span id="certainty_level_modal_content" class="block p-4 text-lg text-gray-700"></span>
        </div>
        <button type="button"
                class="btnClose absolute top-2 right-2 text-ohm-green hover:text-ohm-green border border-ohm-green rounded-full bg-white  w-8 h-8">
            &times;
        </button>
    </div>

</div>

<div id="certainty_level_bloc_desc" data-modal-ohm-initialize="true"
     data-modal-ohm-function="showCertaintyLevelBlocDesc" 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="p-6 space-x-6 flex flex-col md:flex-row justify-center items-center gap-4">
                <div class="relative w-full max-w-2xl max-h-full">
                    <div class="relative bg-white rounded-lg shadow">
                        <div class="p-4">
                            <div class="space-y-6">
                                <div class="flex items-start gap-3">
                                    <div class="space-y-4">
                                        <div><p class="font-semibold text-sm"> Le prix unitaire de l'offre
                                                sélectionnée, au moment de la souscription. </p>
                                            <p class="text-sm text-gray-600"> Un « niveau de certitude » du prix
                                                unitaire est défini par offre : </p></div> <!-- Certainty levels -->
                                        <div class="space-y-3">
                                            <div class="flex items-start"><img src="/assets/images/icon/A.png"
                                                                               alt="A" class="w-7 h-6 mr-2">
                                                <div><p class="font-medium text-sm">Prix fixe tout compris :</p>
                                                    <p class="text-sm text-gray-600"> Le prix unitaire hors taxe de
                                                        l’offre ne change pas, même si le tarif d’acheminement
                                                        change ou si les prix de marché évoluent. </p></div>
                                            </div>
                                            <div class="flex items-start"><img src="/assets/images/icon/B.png"
                                                                               alt="B" class="w-6 h-6 mr-2">
                                                <div><p class="font-medium text-sm">Prix fixe :</p>
                                                    <p class="text-sm text-gray-600"> Le prix unitaire hors taxe de
                                                        l’offre ne change pas, quelques soient les variation de prix
                                                        sur les marchés. En revanche, les changements de tarif
                                                        d’acheminement sont répercutés à l’euro près </p></div>
                                            </div>
                                            <div class="flex items-start"><img src="/assets/images/icon/C.png"
                                                                               alt="C" class="w-5 h-6 mr-2">
                                                <div><p class="font-medium text-sm">Prix indexé :</p>
                                                    <p class="text-sm text-gray-600"> Le prix unitaire varie selon
                                                        une formule préétablie. Par exemple : offre indexée au
                                                        TRV </p></div>
                                            </div>
                                            <div class="flex items-start"><img src="/assets/images/icon/D.png"
                                                                               alt="D" class="w-10 h-6 mr-2">
                                                <div><p class="font-medium text-sm">Prix variable :</p>
                                                    <p class="text-sm text-gray-600"> Le prix unitaire peut varier à
                                                        la hausse comme à la baisse. Un préavis d’1 mois sera
                                                        appliqué avant toute variation. De plus, le prix unitaire
                                                        reste inférieur à un prix plafond </p></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- Important note --> <p class="text-xs text-gray-500 mt-6 italic"> Remarque :
                                un niveau de certitude du prix ‘D’ ne signifie pas que vous paierez plus cher votre
                                énergie, mais qu’à consommation donnée, votre budget annuel réel peut se retrouver
                                plus bas ou plus haut que le budget estimé, selon que le prix unitaire a augmenté ou
                                diminué </p></div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between p-6 space-x-2  rounded-b">
                <button onclick="showCertaintyLevelBlocDesc.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>

            <script>
(function(d,u,ac){
    var s=d.createElement('script');
    s.type='text/javascript';
    s.src='https://a.omappapi.com/app/js/api.min.js';
    s.async=true;
    s.dataset.user=u;
    s.dataset.account=ac;
    d.getElementsByTagName('head')[0].appendChild(s);
})(document,293485,311652);
</script>
    
</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"
                    src="https://yelda-webchat.s3.eu-west-3.amazonaws.com/js/yeldaWebchatInjector.min.js"></script>
                        <script>
        window.addEventListener('load', function () {
            const interval = setInterval(function () {
                    const yelda = document.getElementById('yelda_container');
                    if (yelda) {
                        yelda.style.bottom = '100px';  // ou toute autre position
                        clearInterval(interval);
                    }
                },
                500);
        });
    </script>
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        var searchNameDetailsUrl = "/ajax/search-name";
        var dqeMale = "M";
        var dqeMadame = "F";
    </script>
    <script type="text/javascript">

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

        function formatCountryWithoutName(country) {
            if (!country.id) return country.text;
            const flag = $(country.element).data('flag');
            const code = $(country.element).data('code');
            const absoluteUrl = "https://souscription.ohm-energie.com//" + flag ;
            if (flag) {
                return $(
                    `<span><img src="${absoluteUrl}" class="w-5 h-4 inline-block"/> (${code})</span>`
                );
            }
        }

        function formatCountry(country) {
            if (!country.id) return country.text;
            const flag = $(country.element).data('flag');
            const absoluteUrl = "https://souscription.ohm-energie.com//" + flag ;
            if (flag) {
                return $(
                    `<span><img src="${absoluteUrl}" class="w-5 h-4 inline-block"/> ${country.text}</span>`
                );
            }
        }

        var name = ''
        var clicked = ''
        var isFirstNameValidated = false;
        var isLastNameValidated = false;

        $(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;
                }
            });

            $(".select2").select2({
                width: '100%',
                templateResult: formatCountry,
                templateSelection: formatCountryWithoutName,
                minimumResultsForSearch: -1
            });

        });
    </script>
</html>
