{"id":481,"date":"2025-04-28T20:05:53","date_gmt":"2025-04-28T19:05:53","guid":{"rendered":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/?page_id=481"},"modified":"2025-04-28T20:06:04","modified_gmt":"2025-04-28T19:06:04","slug":"inscription","status":"publish","type":"page","link":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/inscription\/","title":{"rendered":"inscription"},"content":{"rendered":"\n\n<div class=\"membership-registration-container\">\n    \n    \n    <div id=\"membership-messages\" style=\"display: none;\">\n        <div class=\"membership-message-content\"><\/div>\n    <\/div>\n    \n    <form id=\"membership-registration-form\" method=\"post\" action=\"\">\n        <input type=\"hidden\" id=\"membership_register_nonce\" name=\"membership_register_nonce\" value=\"b46b457498\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/serviceteleconseilrh\/wp-json\/wp\/v2\/pages\/481\" \/>        \n        <div class=\"membership-form-section\">\n            <h3>Informations personnelles<\/h3>\n            \n            <div class=\"membership-form-row\">\n                <div class=\"membership-form-column\">\n                    <label for=\"first_name\">Pr\u00e9nom <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"first_name\" name=\"first_name\" required>\n                <\/div>\n                \n                <div class=\"membership-form-column\">\n                    <label for=\"last_name\">Nom <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"last_name\" name=\"last_name\" required>\n                <\/div>\n            <\/div>\n            \n            <div class=\"membership-form-row\">\n                <div class=\"membership-form-column\">\n                    <label for=\"email\">Adresse e-mail <span class=\"required\">*<\/span><\/label>\n                    <input type=\"email\" id=\"email\" name=\"email\" required>\n                <\/div>\n                \n                <div class=\"membership-form-column\">\n                    <label for=\"phone\">T\u00e9l\u00e9phone <span class=\"required\">*<\/span><\/label>\n                    <input type=\"tel\" id=\"phone\" name=\"phone\" required>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"membership-form-section\">\n            <h3>Informations de compte<\/h3>\n            \n            <div class=\"membership-form-row\">\n                <div class=\"membership-form-column\">\n                    <label for=\"username\">Nom d'utilisateur <span class=\"required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"username\" name=\"username\" required>\n                <\/div>\n            <\/div>\n            \n            <div class=\"membership-form-row\">\n                <div class=\"membership-form-column\">\n                    <label for=\"password\">Mot de passe <span class=\"required\">*<\/span><\/label>\n                    <input type=\"password\" id=\"password\" name=\"password\" required>\n                    <p class=\"membership-form-hint\">Le mot de passe doit contenir au moins 8 caract\u00e8res.<\/p>\n                <\/div>\n                \n                <div class=\"membership-form-column\">\n                    <label for=\"confirm_password\">Confirmer le mot de passe <span class=\"required\">*<\/span><\/label>\n                    <input type=\"password\" id=\"confirm_password\" name=\"confirm_password\" required>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"membership-form-section\">\n            <h3>Type de compte<\/h3>\n            \n            <div class=\"membership-form-row\">\n                <div class=\"membership-form-column membership-account-type\">\n                    <label>\n                        <input type=\"radio\" name=\"account_type\" value=\"individual\" checked>\n                        <span>Particulier<\/span>\n                    <\/label>\n                    \n                    <label>\n                        <input type=\"radio\" name=\"account_type\" value=\"business\">\n                        <span>Entreprise<\/span>\n                    <\/label>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"membership-form-section\" id=\"individual-plans-section\">\n            <h3>Plans d'abonnement pour particuliers<\/h3>\n            \n                            <div class=\"membership-plans-container\">\n                                            <div class=\"membership-plan-card\">\n                            <div class=\"membership-plan-header\">\n                                <h4>Particulier Gratuit<\/h4>\n                                <div class=\"membership-plan-price\">\n                                                                            <span class=\"membership-plan-amount\">Gratuit<\/span>\n                                        <span class=\"membership-plan-duration\">\/ 30 jours<\/span>\n                                                                    <\/div>\n                            <\/div>\n                            \n                            <div class=\"membership-plan-description\">\n                                Abonnement mensuel gratuit pour particuliers                            <\/div>\n                            \n                            <div class=\"membership-plan-features\">\n                                <ul>\n                                                                            <li>Acc\u00e8s de base<\/li>\n                                                                            <li>1 question par mois<\/li>\n                                                                    <\/ul>\n                            <\/div>\n                            \n                            <div class=\"membership-plan-select\">\n                                <label>\n                                    <input type=\"radio\" name=\"plan_id\" value=\"1\" class=\"individual-plan\" data-free=\"true\">\n                                    <span>S\u00e9lectionner<\/span>\n                                <\/label>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n                    <\/div>\n        \n        <div class=\"membership-form-section\" id=\"business-plans-section\" style=\"display: none;\">\n            <h3>Plans d'abonnement pour entreprises<\/h3>\n            \n                            <div class=\"membership-plans-container\">\n                                            <div class=\"membership-plan-card\">\n                            <div class=\"membership-plan-header\">\n                                <h4>Entreprise Gratuit<\/h4>\n                                <div class=\"membership-plan-price\">\n                                                                            <span class=\"membership-plan-amount\">Gratuit<\/span>\n                                        <span class=\"membership-plan-duration\">\/ 30 jours<\/span>\n                                                                    <\/div>\n                            <\/div>\n                            \n                            <div class=\"membership-plan-description\">\n                                Abonnement mensuel gratuit pour entreprises                            <\/div>\n                            \n                            <div class=\"membership-plan-features\">\n                                <ul>\n                                                                            <li>Acc\u00e8s de base<\/li>\n                                                                            <li>1 question par mois<\/li>\n                                                                    <\/ul>\n                            <\/div>\n                            \n                            <div class=\"membership-plan-select\">\n                                                                    <label>\n                                        <input type=\"radio\" name=\"plan_id\" value=\"6\" class=\"business-plan\" data-free=\"true\">\n                                        <span>S\u00e9lectionner<\/span>\n                                    <\/label>\n                                                            <\/div>\n                        <\/div>\n                                    <\/div>\n                    <\/div>\n        \n        <div class=\"membership-form-section\">\n            <div class=\"membership-form-row\">\n                <div class=\"membership-form-column\">\n                    <button type=\"submit\" id=\"membership-register-submit\" class=\"membership-submit-button\">\n                        <span class=\"button-text\">S'inscrire<\/span>\n                        <span class=\"button-loader\" style=\"display: none;\">\n                            <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n                                <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\"><\/circle>\n                            <\/svg>\n                        <\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <div class=\"membership-form-row\">\n                <div class=\"membership-form-column\">\n                    <p>Vous avez d\u00e9j\u00e0 un compte ? <a href=\"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-login.php\">Connectez-vous<\/a><\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/form>\n<\/div>\n\n<style>\n    input[type=\"radio\"] {\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        border: 2px solid gray;\n        border-radius: 50%;\n        display: inline-block;\n        position: relative;\n        transition: all 0.3s ease-in-out;\n    }\n\n    input[type=\"radio\"]:checked {\n        border-color: #DC3545;  \/* Rouge *\/\n        background-color: #DC3545;  \/* Rouge *\/\n        box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);\n    }\n\n    input[type=\"radio\"]:checked::before {\n        content: \"\";\n        width: 10px;\n        height: 10px;\n        background-color: white;\n        border-radius: 50%;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        transition: all 0.3s ease-in-out;\n    }\n\n    .membership-plan-features ul{\n        list-style-type: none;\n    }\n    .membership-registration-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 20px;\n        font-family: Arial, sans-serif;\n    }\n    \n    #membership-messages {\n        padding: 15px;\n        margin-bottom: 20px;\n        border-radius: 5px;\n        transition: all 0.3s ease;\n    }\n    \n    #membership-messages.success {\n        background-color: #d4edda;\n        color: #155724;\n        border: 1px solid #c3e6cb;\n    }\n    \n    #membership-messages.error {\n        background-color: #f8d7da;\n        color: #721c24;\n        border: 1px solid #f5c6cb;\n    }\n    \n    .membership-form-section {\n        margin-bottom: 30px;\n        background-color: #f9f9f9;\n        padding: 20px;\n        border-radius: 5px;\n    }\n    \n    .membership-form-row {\n        display: flex;\n        flex-wrap: wrap;\n        margin: 0 -10px 15px;\n    }\n    \n    .membership-form-column {\n        flex: 1;\n        padding: 0 10px;\n        min-width: 250px;\n    }\n    \n    @media (max-width: 768px) {\n        .membership-form-column {\n            flex: 100%;\n            margin-bottom: 15px;\n        }\n    }\n    \n    .membership-form-section h3 {\n        margin-top: 0;\n        margin-bottom: 20px;\n        padding-bottom: 10px;\n        border-bottom: 1px solid #ddd;\n    }\n    \n    label {\n        display: block;\n        margin-bottom: 5px;\n        font-weight: bold;\n    }\n    \n    input[type=\"text\"],\n    input[type=\"email\"],\n    input[type=\"tel\"],\n    input[type=\"password\"] {\n        width: 100%;\n        padding: 10px;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-size: 16px;\n    }\n    \n    .membership-form-hint {\n        font-size: 12px;\n        color: #666;\n        margin-top: 5px;\n    }\n    \n    .required {\n        color: #e74c3c;\n    }\n    \n    .membership-account-type {\n        display: flex;\n        gap: 20px;\n    }\n    \n    .membership-account-type label {\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .membership-account-type input[type=\"radio\"] {\n        margin-right: 8px;\n    }\n    \n    .membership-plans-container {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n        gap: 20px;\n    }\n    \n    .membership-plan-card {\n        border: 1px solid #ddd;\n        border-radius: 5px;\n        overflow: hidden;\n        background-color: #fff;\n        transition: transform 0.3s, box-shadow 0.3s;\n    }\n    \n    .membership-plan-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    }\n    \n    .membership-plan-header {\n        background-color: #d32f2f;\n        color: #fff;\n        padding: 15px;\n        text-align: center;\n    }\n    \n    .membership-plan-header h4 {\n        margin: 0 0 10px;\n        font-size: 20px;\n    }\n    \n    .membership-plan-price {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n    \n    .membership-plan-amount {\n        font-size: 24px;\n        font-weight: bold;\n    }\n    \n    .membership-plan-duration,\n    .membership-plan-contact {\n        font-size: 14px;\n        opacity: 0.8;\n    }\n    \n    .membership-plan-description {\n        padding: 15px;\n        text-align: center;\n        color: #666;\n        border-bottom: 1px solid #eee;\n    }\n    \n    .membership-plan-features {\n        padding: 15px;\n    }\n    \n    .membership-plan-features ul {\n        margin: 0;\n        padding-left: 20px;\n    }\n    \n    .membership-plan-features li {\n        margin-bottom: 8px;\n    }\n    \n    .membership-plan-select {\n        padding: 15px;\n        text-align: center;\n        background-color: #f9f9f9;\n    }\n    \n    .membership-plan-select label {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .membership-plan-select input[type=\"radio\"] {\n        margin-right: 8px;\n    }\n    \n    .membership-contact-button {\n        display: inline-block;\n        background-color: #4a90e2;\n        color: #fff;\n        padding: 10px 20px;\n        border-radius: 4px;\n        text-decoration: none;\n        transition: background-color 0.3s;\n    }\n    \n    .membership-contact-button:hover {\n        background-color: #3a7bc8;\n    }\n    \n    .membership-submit-button {\n        background-color: #4a90e2;\n        color: #fff;\n        border: none;\n        padding: 12px 24px;\n        font-size: 16px;\n        border-radius: 4px;\n        cursor: pointer;\n        transition: background-color 0.3s;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        max-width: 200px;\n    }\n    \n    .membership-submit-button:hover {\n        background-color: #3a7bc8;\n    }\n    \n    .membership-submit-button:disabled {\n        background-color: #cccccc;\n        cursor: not-allowed;\n    }\n    \n    .spinner {\n        animation: rotate 2s linear infinite;\n        width: 20px;\n        height: 20px;\n        margin-left: 10px;\n    }\n    \n    .path {\n        stroke: #ffffff;\n        stroke-linecap: round;\n        animation: dash 1.5s ease-in-out infinite;\n    }\n    \n    @keyframes rotate {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    \n    @keyframes dash {\n        0% {\n            stroke-dasharray: 1, 150;\n            stroke-dashoffset: 0;\n        }\n        50% {\n            stroke-dasharray: 90, 150;\n            stroke-dashoffset: -35;\n        }\n        100% {\n            stroke-dasharray: 90, 150;\n            stroke-dashoffset: -124;\n        }\n    }\n<\/style>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-enregistrement.php","meta":{"footnotes":""},"class_list":["post-481","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/pages\/481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":2,"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/pages\/481\/revisions"}],"predecessor-version":[{"id":483,"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/pages\/481\/revisions\/483"}],"wp:attachment":[{"href":"https:\/\/solutionsrhplusemploi.com\/serviceteleconseilrh\/wp-json\/wp\/v2\/media?parent=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}