Choisissez votre psychologue | 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 }\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: 1200px; 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;\r\n background: white;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .page-header h1 { font-size: 2.5rem; margin-bottom: 10px; }\r\n .page-header p { color: var(--gray); font-size: 1.1rem; }\r\n\r\n \/* === INDICATEUR D'\u00c9TAPES (PROGRESS STEPS) === *\/\r\n .steps-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 40px 0 60px;\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 }\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(--primary);\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.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 \/* Ligne entre les \u00e9tapes *\/\r\n .step + .step: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\r\n \/* === GRILLE DES PSYCHOLOGUES === *\/\r\n .psycho-selection-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n gap: 30px;\r\n margin-bottom: 60px;\r\n }\r\n .psycho-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n border: 2px solid transparent;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n .psycho-card:hover {\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\r\n }\r\n .psycho-card.selected {\r\n border-color: var(--primary);\r\n box-shadow: 0 5px 15px rgba(79, 70, 229, 0.15);\r\n }\r\n \/* En-t\u00eate de la carte *\/\r\n .psycho-card-header {\r\n padding: 25px;\r\n border-bottom: 1px solid var(--border);\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n }\r\n .psycho-main-info { flex-grow: 1; }\r\n .psycho-name { font-size: 1.5rem; margin-bottom: 5px; }\r\n .psycho-title { color: var(--primary); font-weight: 600; margin-bottom: 15px; }\r\n .response-time {\r\n background: #f0f9ff;\r\n color: #0369a1;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n }\r\n \/* Corps de la carte *\/\r\n .psycho-card-body { padding: 25px; }\r\n .psycho-stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 15px;\r\n margin-bottom: 20px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .stat-item { text-align: center; }\r\n .stat-value {\r\n display: block;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: var(--primary);\r\n }\r\n .stat-label {\r\n display: block;\r\n font-size: 0.8rem;\r\n color: var(--gray);\r\n margin-top: 4px;\r\n }\r\n .psycho-description {\r\n color: var(--gray);\r\n font-size: 0.95rem;\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n padding-right: 5px;\r\n }\r\n \/* Sp\u00e9cialit\u00e9s *\/\r\n .specialties-title {\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n color: var(--dark);\r\n }\r\n .specialties-list {\r\n list-style: none;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n }\r\n .specialty-tag {\r\n background: var(--primary-light);\r\n color: var(--primary);\r\n padding: 5px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n }\r\n\r\n \/* === SECTION DES FORMULES\/TARIFS === *\/\r\n .pricing-section {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 40px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n margin-bottom: 60px;\r\n }\r\n .section-title {\r\n font-size: 1.8rem;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n }\r\n .pricing-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n }\r\n .pricing-card {\r\n border: 2px solid var(--border);\r\n border-radius: 10px;\r\n padding: 30px;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n position: relative;\r\n }\r\n .pricing-card:hover {\r\n border-color: var(--primary);\r\n }\r\n .pricing-card.selected {\r\n border-color: var(--primary);\r\n background: #fafaff;\r\n }\r\n .pricing-card h3 {\r\n font-size: 1.4rem;\r\n margin-bottom: 15px;\r\n }\r\n .price {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n margin-bottom: 5px;\r\n }\r\n .price-period {\r\n color: var(--gray);\r\n font-size: 1rem;\r\n margin-bottom: 20px;\r\n }\r\n .pricing-features {\r\n list-style: none;\r\n margin: 20px 0;\r\n }\r\n .pricing-features li {\r\n padding: 8px 0;\r\n border-bottom: 1px solid #f1f1f1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .pricing-features li:before {\r\n content: '\u2713';\r\n color: var(--primary);\r\n font-weight: bold;\r\n margin-right: 10px;\r\n }\r\n .recommended-badge {\r\n position: absolute;\r\n top: -12px;\r\n right: 20px;\r\n background: #10b981;\r\n color: white;\r\n padding: 5px 15px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n }\r\n\r\n \/* === BOUTON D'ACTION PRINCIPAL === *\/\r\n .cta-container {\r\n text-align: center;\r\n padding: 30px 0 60px;\r\n }\r\n .primary-cta {\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n padding: 18px 45px;\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n .primary-cta:hover {\r\n background: #4338ca;\r\n }\r\n .primary-cta:disabled {\r\n background: #a5b4fc;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* === RESPONSIVE === *\/\r\n @media (max-width: 768px) {\r\n .psycho-selection-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .steps-container {\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n }\r\n .step + .step:before {\r\n display: none;\r\n }\r\n .psycho-stats {\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n }\r\n .pricing-grid {\r\n grid-template-columns: 1fr;\r\n }\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>Choisissez votre psychologue<\/h1>\r\n <p>S\u00e9lectionnez le professionnel qui correspond le mieux \u00e0 vos besoins et pr\u00e9f\u00e9rences.<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"steps-container\">\r\n <div class=\"step active\">\r\n <div class=\"step-number\">1<\/div>\r\n <div class=\"step-label\">Choisir son psychologue<\/div>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-number\">2<\/div>\r\n <div class=\"step-label\">S\u00e9lectionner sa formule<\/div>\r\n <\/div>\r\n <div class=\"step\">\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=\"psycho-selection-grid\">\r\n \r\n <div class=\"psycho-card\" onclick=\"selectPsycho(this, 'Alicia')\">\r\n <div class=\"psycho-card-header\">\r\n <div class=\"psycho-main-info\">\r\n <h3 class=\"psycho-name\">Alicia M.<\/h3>\r\n <p class=\"psycho-title\">Docteur en psychologie<\/p>\r\n <\/div>\r\n <span class=\"response-time\">R\u00e9pond en 1h<\/span>\r\n <\/div>\r\n <div class=\"psycho-card-body\">\r\n <div class=\"psycho-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">Master<\/span>\r\n <span class=\"stat-label\">Dipl\u00f4me<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">8 ans<\/span>\r\n <span class=\"stat-label\">Exp\u00e9rience<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">< 1 an<\/span>\r\n <span class=\"stat-label\">Sur la plateforme<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"psycho-description\">\r\n Je vous accueille avec une \u00e9coute active pour vous aider \u00e0 traverser vos moments de doute. Mon ambition est de vous soutenir d\u00e8s que vous en ressentez le besoin...\r\n <\/p>\r\n <p class=\"specialties-title\">Sp\u00e9cialit\u00e9s :<\/p>\r\n <ul class=\"specialties-list\">\r\n <li class=\"specialty-tag\">Th\u00e9rapie syst\u00e9mique<\/li>\r\n <li class=\"specialty-tag\">Th\u00e9rapie d'acceptation<\/li>\r\n <li class=\"specialty-tag\">Gestion des TCA<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"psycho-card\" onclick=\"selectPsycho(this, 'Nadine')\">\r\n <div class=\"psycho-card-header\">\r\n <div class=\"psycho-main-info\">\r\n <h3 class=\"psycho-name\">Nadine L.<\/h3>\r\n <p class=\"psycho-title\">Psychologue clinicienne<\/p>\r\n <\/div>\r\n <span class=\"response-time\">R\u00e9pond en 2h<\/span>\r\n <\/div>\r\n <div class=\"psycho-card-body\">\r\n <div class=\"psycho-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">Master<\/span>\r\n <span class=\"stat-label\">Dipl\u00f4me<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">15 ans<\/span>\r\n <span class=\"stat-label\">Exp\u00e9rience<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">1 an<\/span>\r\n <span class=\"stat-label\">Sur la plateforme<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"psycho-description\">\r\n Dot\u00e9e d'une \u00e9coute active et bienveillante, je vous guide sur le chemin du mieux-\u00eatre. Je con\u00e7ois mes accompagnements comme des espaces de co-construction...\r\n <\/p>\r\n <p class=\"specialties-title\">Sp\u00e9cialit\u00e9s :<\/p>\r\n <ul class=\"specialties-list\">\r\n <li class=\"specialty-tag\">Th\u00e9rapie humaniste<\/li>\r\n <li class=\"specialty-tag\">Th\u00e9rapie d'acceptation<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n\r\n \r\n <section class=\"pricing-section\">\r\n <h2 class=\"section-title\">Choisissez votre formule d'accompagnement<\/h2>\r\n <div class=\"pricing-grid\">\r\n \r\n <div class=\"pricing-card\" onclick=\"selectPlan(this, 'message')\">\r\n <h3>Th\u00e9rapie par message<\/h3>\r\n <div class=\"price\">35\u20ac <span class=\"price-period\">\/ semaine<\/span><\/div>\r\n <p><em>Soit 150\u20ac \/ mois \u2022 Sans engagement<\/em><\/p>\r\n <ul class=\"pricing-features\">\r\n <li>\u00c9changez par message\/vocal quotidien<\/li>\r\n <li>Psychologue dipl\u00f4m\u00e9 d\u00e9di\u00e9<\/li>\r\n <li>R\u00e9ponse personnalis\u00e9e sous quelques heures<\/li>\r\n <li>Suivi illimit\u00e9 par \u00e9crit<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"pricing-card selected\" onclick=\"selectPlan(this, 'complete')\">\r\n <div class=\"recommended-badge\">Recommand\u00e9<\/div>\r\n <h3>Formule compl\u00e8te<\/h3>\r\n <div class=\"price\">55\u20ac <span class=\"price-period\">\/ semaine<\/span><\/div>\r\n <p><em>Tout inclus \u2022 4 s\u00e9ances en direct \/ mois<\/em><\/p>\r\n <ul class=\"pricing-features\">\r\n <li>Tous les avantages de la formule Message<\/li>\r\n <li>+ 4 s\u00e9ances de 45 min par mois<\/li>\r\n <li>Par t\u00e9l\u00e9phone ou visioconf\u00e9rence<\/li>\r\n <li>Remboursement mutuelle possible<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"cta-container\">\r\n <button class=\"primary-cta\" id=\"mainCta\" onclick=\"proceedToCheckout()\" disabled>\r\n Continuer vers la prise en charge \u2022 35\u20ac\/semaine\r\n <\/button>\r\n <p style=\"color: var(--gray); margin-top: 15px; font-size: 0.9rem;\">\r\n <i class=\"fas fa-lock\"><\/i> Paiement s\u00e9curis\u00e9 \u2022 Rembours\u00e9 par la plupart des mutuelles\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Variables pour stocker les s\u00e9lections\r\n let selectedPsychoId = null;\r\n let selectedPlanId = 'complete'; \/\/ Plan s\u00e9lectionn\u00e9 par d\u00e9faut\r\n\r\n \/\/ Fonction pour s\u00e9lectionner un psychologue\r\n function selectPsycho(cardElement, psychoId) {\r\n \/\/ Retire la s\u00e9lection de toutes les cartes\r\n document.querySelectorAll('.psycho-card').forEach(card => {\r\n card.classList.remove('selected');\r\n });\r\n \/\/ Ajoute la s\u00e9lection \u00e0 la carte cliqu\u00e9e\r\n cardElement.classList.add('selected');\r\n selectedPsychoId = psychoId;\r\n updateCtaButton();\r\n }\r\n\r\n \/\/ Fonction pour s\u00e9lectionner une formule\r\n function selectPlan(cardElement, planId) {\r\n \/\/ Retire la s\u00e9lection de toutes les cartes de tarif\r\n document.querySelectorAll('.pricing-card').forEach(card => {\r\n card.classList.remove('selected');\r\n });\r\n \/\/ Ajoute la s\u00e9lection \u00e0 la carte cliqu\u00e9e\r\n cardElement.classList.add('selected');\r\n selectedPlanId = planId;\r\n updateCtaButton();\r\n }\r\n\r\n \/\/ Met \u00e0 jour le bouton d'action principal\r\n function updateCtaButton() {\r\n const ctaButton = document.getElementById('mainCta');\r\n const price = selectedPlanId === 'message' ? '35\u20ac' : '55\u20ac';\r\n \r\n if (selectedPsychoId) {\r\n ctaButton.disabled = false;\r\n ctaButton.textContent = `Continuer avec la s\u00e9lection \u2022 ${price}\/semaine`;\r\n } else {\r\n ctaButton.disabled = true;\r\n ctaButton.textContent = `Veuillez s\u00e9lectionner un psychologue`;\r\n }\r\n }\r\n\r\n \/\/ Fonction pour simuler la suite du processus\r\n function proceedToCheckout() {\r\n if (!selectedPsychoId) {\r\n alert('Veuillez s\u00e9lectionner un psychologue.');\r\n return;\r\n }\r\n \r\n alert(`Redirection vers l'inscription...\\nPsychologue: ${selectedPsychoId}\\nFormule: ${selectedPlanId}\\nMerci !`);\r\n \/\/ Ici, vous redirigeriez normalement vers une page de paiement ou d'inscription\r\n window.location.href = 'formule';\r\n }\r\n\r\n \/\/ S\u00e9lectionne automatiquement la premi\u00e8re carte psychologue au chargement\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const firstPsychoCard = document.querySelector('.psycho-card');\r\n if (firstPsychoCard) {\r\n firstPsychoCard.click();\r\n }\r\n updateCtaButton();\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>Choisissez votre psychologue | VotreSite Choisissez votre psychologue S\u00e9lectionnez le professionnel qui correspond le mieux \u00e0 vos besoins et pr\u00e9f\u00e9rences. […]<\/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-305","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/305","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=305"}],"version-history":[{"count":16,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/305\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/305\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/media?parent=305"}],"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 Choisissez votre psychologue | 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 }\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: 1200px; 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;\r\n background: white;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .page-header h1 { font-size: 2.5rem; margin-bottom: 10px; }\r\n .page-header p { color: var(--gray); font-size: 1.1rem; }\r\n\r\n \/* === INDICATEUR D'\u00c9TAPES (PROGRESS STEPS) === *\/\r\n .steps-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 40px 0 60px;\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 }\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(--primary);\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.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 \/* Ligne entre les \u00e9tapes *\/\r\n .step + .step: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\r\n \/* === GRILLE DES PSYCHOLOGUES === *\/\r\n .psycho-selection-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n gap: 30px;\r\n margin-bottom: 60px;\r\n }\r\n .psycho-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n border: 2px solid transparent;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n .psycho-card:hover {\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\r\n }\r\n .psycho-card.selected {\r\n border-color: var(--primary);\r\n box-shadow: 0 5px 15px rgba(79, 70, 229, 0.15);\r\n }\r\n \/* En-t\u00eate de la carte *\/\r\n .psycho-card-header {\r\n padding: 25px;\r\n border-bottom: 1px solid var(--border);\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n }\r\n .psycho-main-info { flex-grow: 1; }\r\n .psycho-name { font-size: 1.5rem; margin-bottom: 5px; }\r\n .psycho-title { color: var(--primary); font-weight: 600; margin-bottom: 15px; }\r\n .response-time {\r\n background: #f0f9ff;\r\n color: #0369a1;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n }\r\n \/* Corps de la carte *\/\r\n .psycho-card-body { padding: 25px; }\r\n .psycho-stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 15px;\r\n margin-bottom: 20px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .stat-item { text-align: center; }\r\n .stat-value {\r\n display: block;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: var(--primary);\r\n }\r\n .stat-label {\r\n display: block;\r\n font-size: 0.8rem;\r\n color: var(--gray);\r\n margin-top: 4px;\r\n }\r\n .psycho-description {\r\n color: var(--gray);\r\n font-size: 0.95rem;\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n padding-right: 5px;\r\n }\r\n \/* Sp\u00e9cialit\u00e9s *\/\r\n .specialties-title {\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n color: var(--dark);\r\n }\r\n .specialties-list {\r\n list-style: none;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n }\r\n .specialty-tag {\r\n background: var(--primary-light);\r\n color: var(--primary);\r\n padding: 5px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n }\r\n\r\n \/* === SECTION DES FORMULES\/TARIFS === *\/\r\n .pricing-section {\r\n background: white;\r\n border-radius: 12px;\r\n padding: 40px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n margin-bottom: 60px;\r\n }\r\n .section-title {\r\n font-size: 1.8rem;\r\n margin-bottom: 30px;\r\n text-align: center;\r\n }\r\n .pricing-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n }\r\n .pricing-card {\r\n border: 2px solid var(--border);\r\n border-radius: 10px;\r\n padding: 30px;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n position: relative;\r\n }\r\n .pricing-card:hover {\r\n border-color: var(--primary);\r\n }\r\n .pricing-card.selected {\r\n border-color: var(--primary);\r\n background: #fafaff;\r\n }\r\n .pricing-card h3 {\r\n font-size: 1.4rem;\r\n margin-bottom: 15px;\r\n }\r\n .price {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n color: var(--primary);\r\n margin-bottom: 5px;\r\n }\r\n .price-period {\r\n color: var(--gray);\r\n font-size: 1rem;\r\n margin-bottom: 20px;\r\n }\r\n .pricing-features {\r\n list-style: none;\r\n margin: 20px 0;\r\n }\r\n .pricing-features li {\r\n padding: 8px 0;\r\n border-bottom: 1px solid #f1f1f1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .pricing-features li:before {\r\n content: '\u2713';\r\n color: var(--primary);\r\n font-weight: bold;\r\n margin-right: 10px;\r\n }\r\n .recommended-badge {\r\n position: absolute;\r\n top: -12px;\r\n right: 20px;\r\n background: #10b981;\r\n color: white;\r\n padding: 5px 15px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n }\r\n\r\n \/* === BOUTON D'ACTION PRINCIPAL === *\/\r\n .cta-container {\r\n text-align: center;\r\n padding: 30px 0 60px;\r\n }\r\n .primary-cta {\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n padding: 18px 45px;\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n .primary-cta:hover {\r\n background: #4338ca;\r\n }\r\n .primary-cta:disabled {\r\n background: #a5b4fc;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* === RESPONSIVE === *\/\r\n @media (max-width: 768px) {\r\n .psycho-selection-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .steps-container {\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n }\r\n .step + .step:before {\r\n display: none;\r\n }\r\n .psycho-stats {\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n }\r\n .pricing-grid {\r\n grid-template-columns: 1fr;\r\n }\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>Choisissez votre psychologue<\/h1>\r\n <p>S\u00e9lectionnez le professionnel qui correspond le mieux \u00e0 vos besoins et pr\u00e9f\u00e9rences.<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"steps-container\">\r\n <div class=\"step active\">\r\n <div class=\"step-number\">1<\/div>\r\n <div class=\"step-label\">Choisir son psychologue<\/div>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"step-number\">2<\/div>\r\n <div class=\"step-label\">S\u00e9lectionner sa formule<\/div>\r\n <\/div>\r\n <div class=\"step\">\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=\"psycho-selection-grid\">\r\n \r\n <div class=\"psycho-card\" onclick=\"selectPsycho(this, 'Alicia')\">\r\n <div class=\"psycho-card-header\">\r\n <div class=\"psycho-main-info\">\r\n <h3 class=\"psycho-name\">Alicia M.<\/h3>\r\n <p class=\"psycho-title\">Docteur en psychologie<\/p>\r\n <\/div>\r\n <span class=\"response-time\">R\u00e9pond en 1h<\/span>\r\n <\/div>\r\n <div class=\"psycho-card-body\">\r\n <div class=\"psycho-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">Master<\/span>\r\n <span class=\"stat-label\">Dipl\u00f4me<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">8 ans<\/span>\r\n <span class=\"stat-label\">Exp\u00e9rience<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">< 1 an<\/span>\r\n <span class=\"stat-label\">Sur la plateforme<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"psycho-description\">\r\n Je vous accueille avec une \u00e9coute active pour vous aider \u00e0 traverser vos moments de doute. Mon ambition est de vous soutenir d\u00e8s que vous en ressentez le besoin...\r\n <\/p>\r\n <p class=\"specialties-title\">Sp\u00e9cialit\u00e9s :<\/p>\r\n <ul class=\"specialties-list\">\r\n <li class=\"specialty-tag\">Th\u00e9rapie syst\u00e9mique<\/li>\r\n <li class=\"specialty-tag\">Th\u00e9rapie d'acceptation<\/li>\r\n <li class=\"specialty-tag\">Gestion des TCA<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"psycho-card\" onclick=\"selectPsycho(this, 'Nadine')\">\r\n <div class=\"psycho-card-header\">\r\n <div class=\"psycho-main-info\">\r\n <h3 class=\"psycho-name\">Nadine L.<\/h3>\r\n <p class=\"psycho-title\">Psychologue clinicienne<\/p>\r\n <\/div>\r\n <span class=\"response-time\">R\u00e9pond en 2h<\/span>\r\n <\/div>\r\n <div class=\"psycho-card-body\">\r\n <div class=\"psycho-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">Master<\/span>\r\n <span class=\"stat-label\">Dipl\u00f4me<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">15 ans<\/span>\r\n <span class=\"stat-label\">Exp\u00e9rience<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-value\">1 an<\/span>\r\n <span class=\"stat-label\">Sur la plateforme<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"psycho-description\">\r\n Dot\u00e9e d'une \u00e9coute active et bienveillante, je vous guide sur le chemin du mieux-\u00eatre. Je con\u00e7ois mes accompagnements comme des espaces de co-construction...\r\n <\/p>\r\n <p class=\"specialties-title\">Sp\u00e9cialit\u00e9s :<\/p>\r\n <ul class=\"specialties-list\">\r\n <li class=\"specialty-tag\">Th\u00e9rapie humaniste<\/li>\r\n <li class=\"specialty-tag\">Th\u00e9rapie d'acceptation<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n\r\n \r\n <section class=\"pricing-section\">\r\n <h2 class=\"section-title\">Choisissez votre formule d'accompagnement<\/h2>\r\n <div class=\"pricing-grid\">\r\n \r\n <div class=\"pricing-card\" onclick=\"selectPlan(this, 'message')\">\r\n <h3>Th\u00e9rapie par message<\/h3>\r\n <div class=\"price\">35\u20ac <span class=\"price-period\">\/ semaine<\/span><\/div>\r\n <p><em>Soit 150\u20ac \/ mois \u2022 Sans engagement<\/em><\/p>\r\n <ul class=\"pricing-features\">\r\n <li>\u00c9changez par message\/vocal quotidien<\/li>\r\n <li>Psychologue dipl\u00f4m\u00e9 d\u00e9di\u00e9<\/li>\r\n <li>R\u00e9ponse personnalis\u00e9e sous quelques heures<\/li>\r\n <li>Suivi illimit\u00e9 par \u00e9crit<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"pricing-card selected\" onclick=\"selectPlan(this, 'complete')\">\r\n <div class=\"recommended-badge\">Recommand\u00e9<\/div>\r\n <h3>Formule compl\u00e8te<\/h3>\r\n <div class=\"price\">55\u20ac <span class=\"price-period\">\/ semaine<\/span><\/div>\r\n <p><em>Tout inclus \u2022 4 s\u00e9ances en direct \/ mois<\/em><\/p>\r\n <ul class=\"pricing-features\">\r\n <li>Tous les avantages de la formule Message<\/li>\r\n <li>+ 4 s\u00e9ances de 45 min par mois<\/li>\r\n <li>Par t\u00e9l\u00e9phone ou visioconf\u00e9rence<\/li>\r\n <li>Remboursement mutuelle possible<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"cta-container\">\r\n <button class=\"primary-cta\" id=\"mainCta\" onclick=\"proceedToCheckout()\" disabled>\r\n Continuer vers la prise en charge \u2022 35\u20ac\/semaine\r\n <\/button>\r\n <p style=\"color: var(--gray); margin-top: 15px; font-size: 0.9rem;\">\r\n <i class=\"fas fa-lock\"><\/i> Paiement s\u00e9curis\u00e9 \u2022 Rembours\u00e9 par la plupart des mutuelles\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Variables pour stocker les s\u00e9lections\r\n let selectedPsychoId = null;\r\n let selectedPlanId = 'complete'; \/\/ Plan s\u00e9lectionn\u00e9 par d\u00e9faut\r\n\r\n \/\/ Fonction pour s\u00e9lectionner un psychologue\r\n function selectPsycho(cardElement, psychoId) {\r\n \/\/ Retire la s\u00e9lection de toutes les cartes\r\n document.querySelectorAll('.psycho-card').forEach(card => {\r\n card.classList.remove('selected');\r\n });\r\n \/\/ Ajoute la s\u00e9lection \u00e0 la carte cliqu\u00e9e\r\n cardElement.classList.add('selected');\r\n selectedPsychoId = psychoId;\r\n updateCtaButton();\r\n }\r\n\r\n \/\/ Fonction pour s\u00e9lectionner une formule\r\n function selectPlan(cardElement, planId) {\r\n \/\/ Retire la s\u00e9lection de toutes les cartes de tarif\r\n document.querySelectorAll('.pricing-card').forEach(card => {\r\n card.classList.remove('selected');\r\n });\r\n \/\/ Ajoute la s\u00e9lection \u00e0 la carte cliqu\u00e9e\r\n cardElement.classList.add('selected');\r\n selectedPlanId = planId;\r\n updateCtaButton();\r\n }\r\n\r\n \/\/ Met \u00e0 jour le bouton d'action principal\r\n function updateCtaButton() {\r\n const ctaButton = document.getElementById('mainCta');\r\n const price = selectedPlanId === 'message' ? '35\u20ac' : '55\u20ac';\r\n \r\n if (selectedPsychoId) {\r\n ctaButton.disabled = false;\r\n ctaButton.textContent = `Continuer avec la s\u00e9lection \u2022 ${price}\/semaine`;\r\n } else {\r\n ctaButton.disabled = true;\r\n ctaButton.textContent = `Veuillez s\u00e9lectionner un psychologue`;\r\n }\r\n }\r\n\r\n \/\/ Fonction pour simuler la suite du processus\r\n function proceedToCheckout() {\r\n if (!selectedPsychoId) {\r\n alert('Veuillez s\u00e9lectionner un psychologue.');\r\n return;\r\n }\r\n \r\n alert(`Redirection vers l'inscription...\\nPsychologue: ${selectedPsychoId}\\nFormule: ${selectedPlanId}\\nMerci !`);\r\n \/\/ Ici, vous redirigeriez normalement vers une page de paiement ou d'inscription\r\n window.location.href = 'formule';\r\n }\r\n\r\n \/\/ S\u00e9lectionne automatiquement la premi\u00e8re carte psychologue au chargement\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const firstPsychoCard = document.querySelector('.psycho-card');\r\n if (firstPsychoCard) {\r\n firstPsychoCard.click();\r\n }\r\n updateCtaButton();\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>Choisissez votre psychologue | VotreSite Choisissez votre psychologue S\u00e9lectionnez le professionnel qui correspond le mieux \u00e0 vos besoins et pr\u00e9f\u00e9rences. […]<\/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-305","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/305","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=305"}],"version-history":[{"count":16,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/305\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/pages\/305\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/psychologue.dipto-france.com\/index.php\/wp-json\/wp\/v2\/media?parent=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}