Finalisez votre inscription | VotreSite<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* === STYLES G\u00c9N\u00c9RAUX === *\/\r\n :root {\r\n --primary: #4f46e5;\r\n --primary-light: #e0e7ff;\r\n --dark: #1f2937;\r\n --light: #f9fafb;\r\n --gray: #6b7280;\r\n --border: #e5e7eb;\r\n --success: #10b981;\r\n }\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--dark); background: var(--light); }\r\n .container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; }\r\n\r\n \/* === EN-T\u00caTE DE PAGE === *\/\r\n .page-header {\r\n text-align: center;\r\n padding: 40px 0 30px;\r\n background: white;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .page-header h1 { font-size: 2.2rem; margin-bottom: 10px; }\r\n .page-header p { color: var(--gray); font-size: 1.1rem; }\r\n\r\n \/* === INDICATEUR D'\u00c9TAPES === *\/\r\n .steps-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 40px 0 50px;\r\n }\r\n .step {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n flex: 1;\r\n max-width: 200px;\r\n }\r\n .step-number {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: var(--primary-light);\r\n color: var(--gray);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border: 3px solid white;\r\n }\r\n .step.completed .step-number {\r\n background: var(--success);\r\n color: white;\r\n }\r\n .step.active .step-number {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n .step-label {\r\n font-size: 0.9rem;\r\n color: var(--gray);\r\n text-align: center;\r\n }\r\n .step.active .step-label {\r\n color: var(--primary);\r\n font-weight: 600;\r\n }\r\n .step.completed .step-label {\r\n color: var(--success);\r\n }\r\n \/* Ligne entre les \u00e9tapes *\/\r\n .step:not(:first-child):before {\r\n content: '';\r\n position: absolute;\r\n top: 20px;\r\n left: -50%;\r\n width: 100%;\r\n height: 2px;\r\n background: var(--border);\r\n z-index: -1;\r\n }\r\n .step.completed:not(:first-child):before {\r\n background: var(--success);\r\n }\r\n\r\n \/* === CONTENU PRINCIPAL - DEUX COLONNES === *\/\r\n .main-content {\r\n display: grid;\r\n grid-template-columns: 1fr 350px;\r\n gap: 40px;\r\n margin-bottom: 60px;\r\n }\r\n @media (max-width: 768px) {\r\n .main-content {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n \/* === COLONNE DE GAUCHE - FORMULAIRE === *\/\r\n .form-section {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 35px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n }\r\n .form-title {\r\n font-size: 1.5rem;\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .form-group {\r\n margin-bottom: 25px;\r\n }\r\n .form-label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n .form-control {\r\n width: 100%;\r\n padding: 14px 16px;\r\n border: 1px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n transition: border-color 0.3s;\r\n }\r\n .form-control:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n }\r\n .form-hint {\r\n font-size: 0.85rem;\r\n color: var(--gray);\r\n margin-top: 6px;\r\n }\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n @media (max-width: 480px) {\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n \/* Section paiement *\/\r\n .payment-methods {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\r\n gap: 15px;\r\n margin: 20px 0;\r\n }\r\n .payment-method {\r\n border: 2px solid var(--border);\r\n border-radius: 8px;\r\n padding: 15px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n }\r\n .payment-method:hover {\r\n border-color: var(--primary-light);\r\n }\r\n .payment-method.selected {\r\n border-color: var(--primary);\r\n background: var(--primary-light);\r\n }\r\n .payment-icon {\r\n font-size: 2rem;\r\n margin-bottom: 10px;\r\n color: var(--gray);\r\n }\r\n .payment-method.selected .payment-icon {\r\n color: var(--primary);\r\n }\r\n\r\n \/* Case \u00e0 cocher CGU *\/\r\n .checkbox-group {\r\n display: flex;\r\n align-items: flex-start;\r\n margin: 30px 0;\r\n }\r\n .checkbox-group input {\r\n margin-top: 5px;\r\n margin-right: 12px;\r\n }\r\n\r\n \/* === COLONNE DE DROITE - R\u00c9CAPITULATIF === *\/\r\n .summary-section {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 30px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n position: sticky;\r\n top: 20px;\r\n height: fit-content;\r\n }\r\n .summary-title {\r\n font-size: 1.3rem;\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .selected-psycho, .selected-plan {\r\n margin-bottom: 25px;\r\n }\r\n .psycho-summary {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n }\r\n .psycho-avatar {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n background: var(--primary-light);\r\n color: var(--primary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n margin-right: 15px;\r\n }\r\n .psycho-info h4 {\r\n margin-bottom: 5px;\r\n }\r\n .plan-summary {\r\n background: #f8fafc;\r\n padding: 20px;\r\n border-radius: 8px;\r\n margin: 20px 0;\r\n }\r\n .plan-name {\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n }\r\n .plan-price {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n }\r\n .price-period {\r\n color: var(--gray);\r\n font-size: 1rem;\r\n }\r\n .summary-details {\r\n list-style: none;\r\n margin: 20px 0;\r\n }\r\n .summary-details li {\r\n padding: 10px 0;\r\n border-bottom: 1px solid #f1f1f1;\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n .summary-total {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n text-align: right;\r\n margin-top: 20px;\r\n padding-top: 20px;\r\n border-top: 2px solid var(--border);\r\n }\r\n\r\n \/* === BOUTONS D'ACTION === *\/\r\n .action-buttons {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 40px;\r\n padding-top: 30px;\r\n border-top: 1px solid var(--border);\r\n }\r\n .btn-secondary {\r\n background: white;\r\n color: var(--primary);\r\n border: 2px solid var(--primary);\r\n padding: 14px 30px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n }\r\n .btn-secondary:hover {\r\n background: var(--primary-light);\r\n }\r\n .btn-primary {\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n padding: 14px 40px;\r\n border-radius: 8px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n .btn-primary:hover {\r\n background: #4338ca;\r\n }\r\n .btn-primary:disabled {\r\n background: #a5b4fc;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* === MODAL DE CONFIRMATION === *\/\r\n .modal-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n .modal-content {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 40px;\r\n max-width: 500px;\r\n width: 90%;\r\n text-align: center;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.2);\r\n }\r\n .modal-icon {\r\n font-size: 4rem;\r\n color: var(--success);\r\n margin-bottom: 20px;\r\n }\r\n .modal-title {\r\n font-size: 1.8rem;\r\n margin-bottom: 15px;\r\n }\r\n .modal-text {\r\n color: var(--gray);\r\n margin-bottom: 30px;\r\n line-height: 1.7;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <header class=\"page-header\">\r\n <h1>Finalisez votre inscription<\/h1>\r\n <p>Remplissez vos informations personnelles pour commencer votre th\u00e9rapie<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"steps-container\">\r\n <div class=\"step completed\">\r\n <div class=\"step-number\"><i class=\"fas fa-check\"><\/i><\/div>\r\n <div class=\"step-label\">Choisir son psychologue<\/div>\r\n <\/div>\r\n <div class=\"step completed\">\r\n <div class=\"step-number\"><i class=\"fas fa-check\"><\/i><\/div>\r\n <div class=\"step-label\">S\u00e9lectionner sa formule<\/div>\r\n <\/div>\r\n <div class=\"step active\">\r\n <div class=\"step-number\">3<\/div>\r\n <div class=\"step-label\">Finaliser l'inscription<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"main-content\">\r\n \r\n <div class=\"form-section\">\r\n <h2 class=\"form-title\">Informations personnelles<\/h2>\r\n \r\n <form id=\"registrationForm\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\" class=\"form-label\">Pr\u00e9nom *<\/label>\r\n <input type=\"text\" id=\"firstName\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\" class=\"form-label\">Nom *<\/label>\r\n <input type=\"text\" id=\"lastName\" class=\"form-control\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\" class=\"form-label\">Adresse email *<\/label>\r\n <input type=\"email\" id=\"email\" class=\"form-control\" required>\r\n <div class=\"form-hint\">Cela servira d'identifiant pour vous connecter<\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"phone\" class=\"form-label\">Num\u00e9ro de t\u00e9l\u00e9phone *<\/label>\r\n <input type=\"tel\" id=\"phone\" class=\"form-control\" required>\r\n <div class=\"form-hint\">Pour les rappels de rendez-vous<\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"birthDate\" class=\"form-label\">Date de naissance *<\/label>\r\n <input type=\"date\" id=\"birthDate\" class=\"form-control\" required>\r\n <\/div>\r\n \r\n <h3 class=\"form-title\" style=\"margin-top: 40px;\">Moyen de paiement<\/h3>\r\n \r\n <div class=\"payment-methods\">\r\n <div class=\"payment-method selected\" onclick=\"selectPaymentMethod(this, 'card')\">\r\n <div class=\"payment-icon\"><i class=\"far fa-credit-card\"><\/i><\/div>\r\n <div>Carte bancaire<\/div>\r\n <\/div>\r\n <div class=\"payment-method\" onclick=\"selectPaymentMethod(this, 'paypal')\">\r\n <div class=\"payment-icon\"><i class=\"fab fa-paypal\"><\/i><\/div>\r\n <div>PayPal<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\" id=\"cardDetails\" style=\"display: block;\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"cardNumber\" class=\"form-label\">Num\u00e9ro de carte *<\/label>\r\n <input type=\"text\" id=\"cardNumber\" class=\"form-control\" placeholder=\"1234 5678 9012 3456\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"cardExpiry\" class=\"form-label\">Date d'expiration *<\/label>\r\n <input type=\"text\" id=\"cardExpiry\" class=\"form-control\" placeholder=\"MM\/AA\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"cardCVC\" class=\"form-label\">Cryptogramme *<\/label>\r\n <input type=\"text\" id=\"cardCVC\" class=\"form-control\" placeholder=\"123\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"checkbox-group\">\r\n <input type=\"checkbox\" id=\"terms\" required>\r\n <label for=\"terms\">\r\n J'accepte les <a href=\"#\" style=\"color: var(--primary);\">Conditions G\u00e9n\u00e9rales d'Utilisation<\/a> \r\n et la <a href=\"#\" style=\"color: var(--primary);\">Politique de Confidentialit\u00e9<\/a>. \r\n Je comprends que mon abonnement sera renouvel\u00e9 automatiquement chaque mois et que je peux l'annuler \u00e0 tout moment.\r\n <\/label>\r\n <\/div>\r\n \r\n <div class=\"checkbox-group\">\r\n <input type=\"checkbox\" id=\"newsletter\">\r\n <label for=\"newsletter\">\r\n Je souhaite recevoir des conseils bien-\u00eatre et des informations sur les nouveaux services (d\u00e9sabonnement possible \u00e0 tout moment).\r\n <\/label>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"summary-section\">\r\n <h3 class=\"summary-title\">R\u00e9capitulatif de votre commande<\/h3>\r\n \r\n <div class=\"selected-psycho\">\r\n <h4>Votre psychologue<\/h4>\r\n <div class=\"psycho-summary\">\r\n <div class=\"psycho-avatar\">Y<\/div>\r\n <div class=\"psycho-info\">\r\n <h4>Yasmine M.<\/h4>\r\n <p>Docteur en psychologie<\/p>\r\n <p style=\"color: var(--success); font-size: 0.9rem;\"><i class=\"fas fa-check-circle\"><\/i> R\u00e9pond en 1h<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"selected-plan\">\r\n <h4>Votre formule<\/h4>\r\n <div class=\"plan-summary\">\r\n <div class=\"plan-name\">Formule compl\u00e8te<\/div>\r\n <div class=\"plan-price\">55\u20ac <span class=\"price-period\">\/ semaine<\/span><\/div>\r\n <p style=\"color: var(--gray); margin-top: 10px;\">Soit 220\u20ac \/ mois \u2022 4 s\u00e9ances incluses<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <ul class=\"summary-details\">\r\n <li>\r\n <span>Abonnement mensuel<\/span>\r\n <span>220,00 \u20ac<\/span>\r\n <\/li>\r\n <li>\r\n <span>Frais de dossier<\/span>\r\n <span>0,00 \u20ac<\/span>\r\n <\/li>\r\n <li>\r\n <span>Remboursement mutuelle estim\u00e9<\/span>\r\n <span>- 80,00 \u20ac<\/span>\r\n <\/li>\r\n <\/ul>\r\n \r\n <div class=\"summary-total\">\r\n Total aujourd'hui : 220,00 \u20ac\r\n <\/div>\r\n \r\n <div style=\"margin-top: 25px; padding: 15px; background: #f0f9ff; border-radius: 8px;\">\r\n <p style=\"font-size: 0.9rem; color: var(--gray);\">\r\n <i class=\"fas fa-lock\"><\/i> <strong>Paiement 100% s\u00e9curis\u00e9<\/strong><br>\r\n Vos donn\u00e9es bancaires sont crypt\u00e9es et ne sont jamais stock\u00e9es sur nos serveurs.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"action-buttons\">\r\n <a href=\"monpsy\" class=\"btn-secondary\">\r\n <i class=\"fas fa-arrow-left\"><\/i> Retour \u00e0 la s\u00e9lection\r\n <\/a>\r\n <button class=\"btn-primary\" id=\"submitBtn\" onclick=\"submitRegistration()\">\r\n <i class=\"fas fa-lock\"><\/i> Payer et commencer ma th\u00e9rapie\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal-overlay\" id=\"confirmationModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-icon\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"modal-title\">F\u00e9licitations !<\/h3>\r\n <p class=\"modal-text\">\r\n Votre inscription a \u00e9t\u00e9 finalis\u00e9e avec succ\u00e8s. \r\n Vous pouvez d\u00e8s maintenant commencer \u00e0 \u00e9changer avec Yasmine M. depuis votre espace personnel.\r\n <\/p>\r\n <p class=\"modal-text\">\r\n Un email de confirmation vous a \u00e9t\u00e9 envoy\u00e9 avec toutes les informations pour vous connecter.\r\n <\/p>\r\n <button class=\"btn-primary\" onclick=\"closeModal()\" style=\"width: 100%;\">\r\n Acc\u00e9der \u00e0 mon espace th\u00e9rapie\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Variables\r\n let selectedPaymentMethod = 'card';\r\n \r\n \/\/ S\u00e9lectionner une m\u00e9thode de paiement\r\n function selectPaymentMethod(element, method) {\r\n \/\/ Retire la s\u00e9lection de toutes les m\u00e9thodes\r\n document.querySelectorAll('.payment-method').forEach(m => {\r\n m.classList.remove('selected');\r\n });\r\n \/\/ Ajoute la s\u00e9lection \u00e0 la m\u00e9thode cliqu\u00e9e\r\n element.classList.add('selected');\r\n selectedPaymentMethod = method;\r\n \r\n \/\/ Affiche\/masque les d\u00e9tails de la carte\r\n const cardDetails = document.getElementById('cardDetails');\r\n cardDetails.style.display = method === 'card' ? 'block' : 'none';\r\n }\r\n \r\n \/\/ Validation du formulaire\r\n function validateForm() {\r\n const form = document.getElementById('registrationForm');\r\n const requiredFields = form.querySelectorAll('[required]');\r\n let isValid = true;\r\n \r\n \/\/ V\u00e9rifie les champs requis\r\n requiredFields.forEach(field => {\r\n if (!field.value.trim()) {\r\n isValid = false;\r\n field.style.borderColor = '#ef4444';\r\n } else {\r\n field.style.borderColor = '';\r\n }\r\n });\r\n \r\n \/\/ V\u00e9rifie la case CGU\r\n const termsCheckbox = document.getElementById('terms');\r\n if (!termsCheckbox.checked) {\r\n isValid = false;\r\n alert('Vous devez accepter les Conditions G\u00e9n\u00e9rales d\\'Utilisation.');\r\n }\r\n \r\n return isValid;\r\n }\r\n \r\n \/\/ Soumission du formulaire\r\n function submitRegistration() {\r\n if (!validateForm()) {\r\n alert('Veuillez remplir tous les champs obligatoires.');\r\n return;\r\n }\r\n \r\n \/\/ Affiche le modal de confirmation\r\n document.getElementById('confirmationModal').style.display = 'flex';\r\n \r\n \/\/ Ici, normalement, vous enverriez les donn\u00e9es au serveur\r\n \/\/ et redirigeriez vers l'espace membre apr\u00e8s traitement\r\n console.log('Donn\u00e9es soumises :', {\r\n firstName: document.getElementById('firstName').value,\r\n lastName: document.getElementById('lastName').value,\r\n email: document.getElementById('email').value,\r\n phone: document.getElementById('phone').value,\r\n birthDate: document.getElementById('birthDate').value,\r\n paymentMethod: selectedPaymentMethod\r\n });\r\n }\r\n \r\n \/\/ Fermer le modal\r\n function closeModal() {\r\n document.getElementById('confirmationModal').style.display = 'none';\r\n \/\/ Redirection vers l'espace membre (simul\u00e9e)\r\n \/\/ window.location.href = '\/mon-espace';\r\n }\r\n \r\n \/\/ Formatage automatique des champs de carte\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const cardNumber = document.getElementById('cardNumber');\r\n const cardExpiry = document.getElementById('cardExpiry');\r\n \r\n if (cardNumber) {\r\n cardNumber.addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/\\s+\/g, '').replace(\/[^0-9]\/gi, '');\r\n let formatted = value.replace(\/(\\d{4})\/g, '$1 ').trim();\r\n e.target.value = formatted.substring(0, 19);\r\n });\r\n }\r\n \r\n if (cardExpiry) {\r\n cardExpiry.addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/\\s+\/g, '').replace(\/[^0-9]\/gi, '');\r\n if (value.length >= 2) {\r\n value = value.substring(0, 2) + '\/' + value.substring(2, 4);\r\n }\r\n e.target.value = value.substring(0, 5);\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Finalisez votre inscription | VotreSite Finalisez votre inscription Remplissez vos informations personnelles pour commencer votre th\u00e9rapie Choisir son psychologue S\u00e9lectionner […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-333","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":7,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/333\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/333\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/media?parent=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Finalisez votre inscription | VotreSite<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* === STYLES G\u00c9N\u00c9RAUX === *\/\r\n :root {\r\n --primary: #4f46e5;\r\n --primary-light: #e0e7ff;\r\n --dark: #1f2937;\r\n --light: #f9fafb;\r\n --gray: #6b7280;\r\n --border: #e5e7eb;\r\n --success: #10b981;\r\n }\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--dark); background: var(--light); }\r\n .container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; }\r\n\r\n \/* === EN-T\u00caTE DE PAGE === *\/\r\n .page-header {\r\n text-align: center;\r\n padding: 40px 0 30px;\r\n background: white;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .page-header h1 { font-size: 2.2rem; margin-bottom: 10px; }\r\n .page-header p { color: var(--gray); font-size: 1.1rem; }\r\n\r\n \/* === INDICATEUR D'\u00c9TAPES === *\/\r\n .steps-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 40px 0 50px;\r\n }\r\n .step {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n flex: 1;\r\n max-width: 200px;\r\n }\r\n .step-number {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: var(--primary-light);\r\n color: var(--gray);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border: 3px solid white;\r\n }\r\n .step.completed .step-number {\r\n background: var(--success);\r\n color: white;\r\n }\r\n .step.active .step-number {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n .step-label {\r\n font-size: 0.9rem;\r\n color: var(--gray);\r\n text-align: center;\r\n }\r\n .step.active .step-label {\r\n color: var(--primary);\r\n font-weight: 600;\r\n }\r\n .step.completed .step-label {\r\n color: var(--success);\r\n }\r\n \/* Ligne entre les \u00e9tapes *\/\r\n .step:not(:first-child):before {\r\n content: '';\r\n position: absolute;\r\n top: 20px;\r\n left: -50%;\r\n width: 100%;\r\n height: 2px;\r\n background: var(--border);\r\n z-index: -1;\r\n }\r\n .step.completed:not(:first-child):before {\r\n background: var(--success);\r\n }\r\n\r\n \/* === CONTENU PRINCIPAL - DEUX COLONNES === *\/\r\n .main-content {\r\n display: grid;\r\n grid-template-columns: 1fr 350px;\r\n gap: 40px;\r\n margin-bottom: 60px;\r\n }\r\n @media (max-width: 768px) {\r\n .main-content {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n \/* === COLONNE DE GAUCHE - FORMULAIRE === *\/\r\n .form-section {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 35px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n }\r\n .form-title {\r\n font-size: 1.5rem;\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .form-group {\r\n margin-bottom: 25px;\r\n }\r\n .form-label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n .form-control {\r\n width: 100%;\r\n padding: 14px 16px;\r\n border: 1px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n transition: border-color 0.3s;\r\n }\r\n .form-control:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n }\r\n .form-hint {\r\n font-size: 0.85rem;\r\n color: var(--gray);\r\n margin-top: 6px;\r\n }\r\n .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n @media (max-width: 480px) {\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n \/* Section paiement *\/\r\n .payment-methods {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\r\n gap: 15px;\r\n margin: 20px 0;\r\n }\r\n .payment-method {\r\n border: 2px solid var(--border);\r\n border-radius: 8px;\r\n padding: 15px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n }\r\n .payment-method:hover {\r\n border-color: var(--primary-light);\r\n }\r\n .payment-method.selected {\r\n border-color: var(--primary);\r\n background: var(--primary-light);\r\n }\r\n .payment-icon {\r\n font-size: 2rem;\r\n margin-bottom: 10px;\r\n color: var(--gray);\r\n }\r\n .payment-method.selected .payment-icon {\r\n color: var(--primary);\r\n }\r\n\r\n \/* Case \u00e0 cocher CGU *\/\r\n .checkbox-group {\r\n display: flex;\r\n align-items: flex-start;\r\n margin: 30px 0;\r\n }\r\n .checkbox-group input {\r\n margin-top: 5px;\r\n margin-right: 12px;\r\n }\r\n\r\n \/* === COLONNE DE DROITE - R\u00c9CAPITULATIF === *\/\r\n .summary-section {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 30px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n position: sticky;\r\n top: 20px;\r\n height: fit-content;\r\n }\r\n .summary-title {\r\n font-size: 1.3rem;\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .selected-psycho, .selected-plan {\r\n margin-bottom: 25px;\r\n }\r\n .psycho-summary {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n }\r\n .psycho-avatar {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n background: var(--primary-light);\r\n color: var(--primary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n margin-right: 15px;\r\n }\r\n .psycho-info h4 {\r\n margin-bottom: 5px;\r\n }\r\n .plan-summary {\r\n background: #f8fafc;\r\n padding: 20px;\r\n border-radius: 8px;\r\n margin: 20px 0;\r\n }\r\n .plan-name {\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n }\r\n .plan-price {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n }\r\n .price-period {\r\n color: var(--gray);\r\n font-size: 1rem;\r\n }\r\n .summary-details {\r\n list-style: none;\r\n margin: 20px 0;\r\n }\r\n .summary-details li {\r\n padding: 10px 0;\r\n border-bottom: 1px solid #f1f1f1;\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n .summary-total {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n text-align: right;\r\n margin-top: 20px;\r\n padding-top: 20px;\r\n border-top: 2px solid var(--border);\r\n }\r\n\r\n \/* === BOUTONS D'ACTION === *\/\r\n .action-buttons {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 40px;\r\n padding-top: 30px;\r\n border-top: 1px solid var(--border);\r\n }\r\n .btn-secondary {\r\n background: white;\r\n color: var(--primary);\r\n border: 2px solid var(--primary);\r\n padding: 14px 30px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n }\r\n .btn-secondary:hover {\r\n background: var(--primary-light);\r\n }\r\n .btn-primary {\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n padding: 14px 40px;\r\n border-radius: 8px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n .btn-primary:hover {\r\n background: #4338ca;\r\n }\r\n .btn-primary:disabled {\r\n background: #a5b4fc;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* === MODAL DE CONFIRMATION === *\/\r\n .modal-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n .modal-content {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 40px;\r\n max-width: 500px;\r\n width: 90%;\r\n text-align: center;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.2);\r\n }\r\n .modal-icon {\r\n font-size: 4rem;\r\n color: var(--success);\r\n margin-bottom: 20px;\r\n }\r\n .modal-title {\r\n font-size: 1.8rem;\r\n margin-bottom: 15px;\r\n }\r\n .modal-text {\r\n color: var(--gray);\r\n margin-bottom: 30px;\r\n line-height: 1.7;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <header class=\"page-header\">\r\n <h1>Finalisez votre inscription<\/h1>\r\n <p>Remplissez vos informations personnelles pour commencer votre th\u00e9rapie<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"steps-container\">\r\n <div class=\"step completed\">\r\n <div class=\"step-number\"><i class=\"fas fa-check\"><\/i><\/div>\r\n <div class=\"step-label\">Choisir son psychologue<\/div>\r\n <\/div>\r\n <div class=\"step completed\">\r\n <div class=\"step-number\"><i class=\"fas fa-check\"><\/i><\/div>\r\n <div class=\"step-label\">S\u00e9lectionner sa formule<\/div>\r\n <\/div>\r\n <div class=\"step active\">\r\n <div class=\"step-number\">3<\/div>\r\n <div class=\"step-label\">Finaliser l'inscription<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"main-content\">\r\n \r\n <div class=\"form-section\">\r\n <h2 class=\"form-title\">Informations personnelles<\/h2>\r\n \r\n <form id=\"registrationForm\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\" class=\"form-label\">Pr\u00e9nom *<\/label>\r\n <input type=\"text\" id=\"firstName\" class=\"form-control\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\" class=\"form-label\">Nom *<\/label>\r\n <input type=\"text\" id=\"lastName\" class=\"form-control\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\" class=\"form-label\">Adresse email *<\/label>\r\n <input type=\"email\" id=\"email\" class=\"form-control\" required>\r\n <div class=\"form-hint\">Cela servira d'identifiant pour vous connecter<\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"phone\" class=\"form-label\">Num\u00e9ro de t\u00e9l\u00e9phone *<\/label>\r\n <input type=\"tel\" id=\"phone\" class=\"form-control\" required>\r\n <div class=\"form-hint\">Pour les rappels de rendez-vous<\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"birthDate\" class=\"form-label\">Date de naissance *<\/label>\r\n <input type=\"date\" id=\"birthDate\" class=\"form-control\" required>\r\n <\/div>\r\n \r\n <h3 class=\"form-title\" style=\"margin-top: 40px;\">Moyen de paiement<\/h3>\r\n \r\n <div class=\"payment-methods\">\r\n <div class=\"payment-method selected\" onclick=\"selectPaymentMethod(this, 'card')\">\r\n <div class=\"payment-icon\"><i class=\"far fa-credit-card\"><\/i><\/div>\r\n <div>Carte bancaire<\/div>\r\n <\/div>\r\n <div class=\"payment-method\" onclick=\"selectPaymentMethod(this, 'paypal')\">\r\n <div class=\"payment-icon\"><i class=\"fab fa-paypal\"><\/i><\/div>\r\n <div>PayPal<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\" id=\"cardDetails\" style=\"display: block;\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"cardNumber\" class=\"form-label\">Num\u00e9ro de carte *<\/label>\r\n <input type=\"text\" id=\"cardNumber\" class=\"form-control\" placeholder=\"1234 5678 9012 3456\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"cardExpiry\" class=\"form-label\">Date d'expiration *<\/label>\r\n <input type=\"text\" id=\"cardExpiry\" class=\"form-control\" placeholder=\"MM\/AA\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"cardCVC\" class=\"form-label\">Cryptogramme *<\/label>\r\n <input type=\"text\" id=\"cardCVC\" class=\"form-control\" placeholder=\"123\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"checkbox-group\">\r\n <input type=\"checkbox\" id=\"terms\" required>\r\n <label for=\"terms\">\r\n J'accepte les <a href=\"#\" style=\"color: var(--primary);\">Conditions G\u00e9n\u00e9rales d'Utilisation<\/a> \r\n et la <a href=\"#\" style=\"color: var(--primary);\">Politique de Confidentialit\u00e9<\/a>. \r\n Je comprends que mon abonnement sera renouvel\u00e9 automatiquement chaque mois et que je peux l'annuler \u00e0 tout moment.\r\n <\/label>\r\n <\/div>\r\n \r\n <div class=\"checkbox-group\">\r\n <input type=\"checkbox\" id=\"newsletter\">\r\n <label for=\"newsletter\">\r\n Je souhaite recevoir des conseils bien-\u00eatre et des informations sur les nouveaux services (d\u00e9sabonnement possible \u00e0 tout moment).\r\n <\/label>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"summary-section\">\r\n <h3 class=\"summary-title\">R\u00e9capitulatif de votre commande<\/h3>\r\n \r\n <div class=\"selected-psycho\">\r\n <h4>Votre psychologue<\/h4>\r\n <div class=\"psycho-summary\">\r\n <div class=\"psycho-avatar\">Y<\/div>\r\n <div class=\"psycho-info\">\r\n <h4>Yasmine M.<\/h4>\r\n <p>Docteur en psychologie<\/p>\r\n <p style=\"color: var(--success); font-size: 0.9rem;\"><i class=\"fas fa-check-circle\"><\/i> R\u00e9pond en 1h<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"selected-plan\">\r\n <h4>Votre formule<\/h4>\r\n <div class=\"plan-summary\">\r\n <div class=\"plan-name\">Formule compl\u00e8te<\/div>\r\n <div class=\"plan-price\">55\u20ac <span class=\"price-period\">\/ semaine<\/span><\/div>\r\n <p style=\"color: var(--gray); margin-top: 10px;\">Soit 220\u20ac \/ mois \u2022 4 s\u00e9ances incluses<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <ul class=\"summary-details\">\r\n <li>\r\n <span>Abonnement mensuel<\/span>\r\n <span>220,00 \u20ac<\/span>\r\n <\/li>\r\n <li>\r\n <span>Frais de dossier<\/span>\r\n <span>0,00 \u20ac<\/span>\r\n <\/li>\r\n <li>\r\n <span>Remboursement mutuelle estim\u00e9<\/span>\r\n <span>- 80,00 \u20ac<\/span>\r\n <\/li>\r\n <\/ul>\r\n \r\n <div class=\"summary-total\">\r\n Total aujourd'hui : 220,00 \u20ac\r\n <\/div>\r\n \r\n <div style=\"margin-top: 25px; padding: 15px; background: #f0f9ff; border-radius: 8px;\">\r\n <p style=\"font-size: 0.9rem; color: var(--gray);\">\r\n <i class=\"fas fa-lock\"><\/i> <strong>Paiement 100% s\u00e9curis\u00e9<\/strong><br>\r\n Vos donn\u00e9es bancaires sont crypt\u00e9es et ne sont jamais stock\u00e9es sur nos serveurs.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"action-buttons\">\r\n <a href=\"monpsy\" class=\"btn-secondary\">\r\n <i class=\"fas fa-arrow-left\"><\/i> Retour \u00e0 la s\u00e9lection\r\n <\/a>\r\n <button class=\"btn-primary\" id=\"submitBtn\" onclick=\"submitRegistration()\">\r\n <i class=\"fas fa-lock\"><\/i> Payer et commencer ma th\u00e9rapie\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal-overlay\" id=\"confirmationModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-icon\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <h3 class=\"modal-title\">F\u00e9licitations !<\/h3>\r\n <p class=\"modal-text\">\r\n Votre inscription a \u00e9t\u00e9 finalis\u00e9e avec succ\u00e8s. \r\n Vous pouvez d\u00e8s maintenant commencer \u00e0 \u00e9changer avec Yasmine M. depuis votre espace personnel.\r\n <\/p>\r\n <p class=\"modal-text\">\r\n Un email de confirmation vous a \u00e9t\u00e9 envoy\u00e9 avec toutes les informations pour vous connecter.\r\n <\/p>\r\n <button class=\"btn-primary\" onclick=\"closeModal()\" style=\"width: 100%;\">\r\n Acc\u00e9der \u00e0 mon espace th\u00e9rapie\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Variables\r\n let selectedPaymentMethod = 'card';\r\n \r\n \/\/ S\u00e9lectionner une m\u00e9thode de paiement\r\n function selectPaymentMethod(element, method) {\r\n \/\/ Retire la s\u00e9lection de toutes les m\u00e9thodes\r\n document.querySelectorAll('.payment-method').forEach(m => {\r\n m.classList.remove('selected');\r\n });\r\n \/\/ Ajoute la s\u00e9lection \u00e0 la m\u00e9thode cliqu\u00e9e\r\n element.classList.add('selected');\r\n selectedPaymentMethod = method;\r\n \r\n \/\/ Affiche\/masque les d\u00e9tails de la carte\r\n const cardDetails = document.getElementById('cardDetails');\r\n cardDetails.style.display = method === 'card' ? 'block' : 'none';\r\n }\r\n \r\n \/\/ Validation du formulaire\r\n function validateForm() {\r\n const form = document.getElementById('registrationForm');\r\n const requiredFields = form.querySelectorAll('[required]');\r\n let isValid = true;\r\n \r\n \/\/ V\u00e9rifie les champs requis\r\n requiredFields.forEach(field => {\r\n if (!field.value.trim()) {\r\n isValid = false;\r\n field.style.borderColor = '#ef4444';\r\n } else {\r\n field.style.borderColor = '';\r\n }\r\n });\r\n \r\n \/\/ V\u00e9rifie la case CGU\r\n const termsCheckbox = document.getElementById('terms');\r\n if (!termsCheckbox.checked) {\r\n isValid = false;\r\n alert('Vous devez accepter les Conditions G\u00e9n\u00e9rales d\\'Utilisation.');\r\n }\r\n \r\n return isValid;\r\n }\r\n \r\n \/\/ Soumission du formulaire\r\n function submitRegistration() {\r\n if (!validateForm()) {\r\n alert('Veuillez remplir tous les champs obligatoires.');\r\n return;\r\n }\r\n \r\n \/\/ Affiche le modal de confirmation\r\n document.getElementById('confirmationModal').style.display = 'flex';\r\n \r\n \/\/ Ici, normalement, vous enverriez les donn\u00e9es au serveur\r\n \/\/ et redirigeriez vers l'espace membre apr\u00e8s traitement\r\n console.log('Donn\u00e9es soumises :', {\r\n firstName: document.getElementById('firstName').value,\r\n lastName: document.getElementById('lastName').value,\r\n email: document.getElementById('email').value,\r\n phone: document.getElementById('phone').value,\r\n birthDate: document.getElementById('birthDate').value,\r\n paymentMethod: selectedPaymentMethod\r\n });\r\n }\r\n \r\n \/\/ Fermer le modal\r\n function closeModal() {\r\n document.getElementById('confirmationModal').style.display = 'none';\r\n \/\/ Redirection vers l'espace membre (simul\u00e9e)\r\n \/\/ window.location.href = '\/mon-espace';\r\n }\r\n \r\n \/\/ Formatage automatique des champs de carte\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const cardNumber = document.getElementById('cardNumber');\r\n const cardExpiry = document.getElementById('cardExpiry');\r\n \r\n if (cardNumber) {\r\n cardNumber.addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/\\s+\/g, '').replace(\/[^0-9]\/gi, '');\r\n let formatted = value.replace(\/(\\d{4})\/g, '$1 ').trim();\r\n e.target.value = formatted.substring(0, 19);\r\n });\r\n }\r\n \r\n if (cardExpiry) {\r\n cardExpiry.addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/\\s+\/g, '').replace(\/[^0-9]\/gi, '');\r\n if (value.length >= 2) {\r\n value = value.substring(0, 2) + '\/' + value.substring(2, 4);\r\n }\r\n e.target.value = value.substring(0, 5);\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Finalisez votre inscription | VotreSite Finalisez votre inscription Remplissez vos informations personnelles pour commencer votre th\u00e9rapie Choisir son psychologue S\u00e9lectionner […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-333","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":7,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/333\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/333\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/media?parent=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}