Traverser une transition de vie \u2014 Outil d'accompagnement JIRIS<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Work+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #F4F2F8;\n --surface: #FFFFFF;\n --surface-soft: #FAF8FE;\n --ink: #2A2438;\n --muted: #756E8C;\n --divider: #E1DCEC;\n --primary: #453876;\n --primary-light: #6D5AA0;\n --primary-soft: #ECE8F8;\n --primary-shadow: rgba(69, 56, 118, 0.14);\n --accent: #2F8F5B;\n --accent-soft: #E6F5EE;\n --accent-shadow: rgba(47, 143, 91, 0.16);\n --warm: #D97706;\n --warm-soft: #FEF3C7;\n --warm-border: #FDE68A;\n --danger: #DC2626;\n --danger-soft: #FEF2F2;\n --danger-border: #FCA5A5;\n --radius: 18px;\n --radius-sm: 12px;\n --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n background: var(--bg);\n color: var(--ink);\n font-family: \"Work Sans\", sans-serif;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n min-height: 100vh;\n background-image:\n radial-gradient(circle at 15% 0%, rgba(109, 90, 160, 0.08) 0%, transparent 45%),\n radial-gradient(circle at 85% 100%, rgba(47, 143, 91, 0.06) 0%, transparent 45%);\n background-attachment: fixed;\n }\n\n .wrap {\n max-width: 780px;\n margin: 0 auto;\n padding: 40px 20px 80px;\n }\n\n .hero {\n text-align: center;\n margin-bottom: 32px;\n }\n\n .hero-frame {\n width: 72px;\n height: 72px;\n margin: 0 auto 20px;\n border-radius: 22px;\n background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));\n border: 1.5px solid var(--divider);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 34px;\n box-shadow: 0 12px 32px var(--primary-shadow);\n animation: float 4s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n }\n\n .hero h1 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: clamp(28px, 5.5vw, 40px);\n color: var(--primary);\n margin-bottom: 10px;\n letter-spacing: -0.02em;\n }\n\n .hero .subtitle {\n font-family: \"Fraunces\", serif;\n font-style: italic;\n color: var(--muted);\n font-size: 17px;\n max-width: 620px;\n margin: 0 auto;\n }\n\n .intro-card {\n background: var(--surface);\n border-radius: var(--radius);\n padding: 30px 32px;\n margin-bottom: 32px;\n box-shadow: 0 10px 30px rgba(42, 36, 56, 0.06);\n border: 1px solid var(--divider);\n border-left: 5px solid var(--primary);\n }\n\n .intro-card h2 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 20px;\n color: var(--primary);\n margin-bottom: 14px;\n }\n\n .intro-card p {\n font-size: 15.5px;\n color: var(--ink);\n margin-bottom: 12px;\n line-height: 1.7;\n }\n\n .intro-card p:last-child { margin-bottom: 0; }\n .intro-card strong { color: var(--primary); font-weight: 600; }\n\n .intro-note {\n margin-top: 18px;\n padding: 14px 18px;\n background: var(--primary-soft);\n border-left: 4px solid var(--primary);\n border-radius: 0 10px 10px 0;\n font-size: 14px;\n color: var(--primary);\n line-height: 1.6;\n }\n\n .intro-note strong { color: var(--primary); }\n\n .warning-card {\n background: var(--warm-soft);\n border: 1.5px solid var(--warm-border);\n border-radius: var(--radius-sm);\n padding: 20px 22px;\n margin-bottom: 22px;\n display: flex;\n gap: 14px;\n align-items: flex-start;\n }\n\n .warning-card .warning-icon {\n font-size: 24px;\n line-height: 1;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .warning-card .warning-content h3 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 16px;\n color: #92400E;\n margin-bottom: 8px;\n }\n\n .warning-card .warning-content p {\n font-size: 14px;\n color: #78350F;\n line-height: 1.6;\n margin-bottom: 6px;\n }\n\n .warning-card .warning-content p:last-child { margin-bottom: 0; }\n\n .warning-card strong {\n color: #78350F;\n font-weight: 700;\n }\n\n .completed-notice {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n border-radius: 0 10px 10px 0;\n padding: 16px 20px;\n margin-bottom: 18px;\n display: flex;\n gap: 14px;\n align-items: flex-start;\n }\n .completed-notice .completed-icon {\n font-size: 22px;\n line-height: 1;\n flex-shrink: 0;\n margin-top: 2px;\n }\n .completed-notice .completed-text { flex: 1; }\n .completed-notice .completed-text strong {\n display: block;\n color: var(--accent);\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 15px;\n margin-bottom: 6px;\n }\n .completed-notice .completed-text p {\n font-size: 14px;\n color: var(--ink);\n line-height: 1.6;\n margin: 0;\n }\n\n .restart-hint {\n text-align: center;\n font-size: 13px;\n color: var(--muted);\n font-style: italic;\n margin-top: 16px;\n line-height: 1.6;\n }\n\n .progress-wrapper {\n margin-bottom: 28px;\n }\n\n .progress-text {\n display: flex;\n justify-content: space-between;\n font-size: 13.5px;\n font-weight: 600;\n color: var(--muted);\n margin-bottom: 8px;\n letter-spacing: 0.02em;\n }\n\n .progress-bar {\n width: 100%;\n height: 8px;\n background: var(--primary-soft);\n border-radius: 99px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary), var(--accent));\n border-radius: 99px;\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n width: 0%;\n }\n\n .step {\n display: none;\n background: var(--surface);\n border-radius: var(--radius);\n padding: 34px 32px;\n margin-bottom: 24px;\n box-shadow: 0 10px 30px rgba(42, 36, 56, 0.06);\n border: 1px solid var(--divider);\n animation: fadeInUp 0.4s ease;\n }\n\n .step.active { display: block; }\n\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .step-badge {\n display: inline-block;\n padding: 5px 14px;\n background: var(--primary-soft);\n color: var(--primary);\n border-radius: 99px;\n font-size: 11.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n margin-bottom: 14px;\n }\n\n .step-title {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 24px;\n color: var(--primary);\n margin-bottom: 8px;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .step-title .step-emoji {\n font-size: 26px;\n line-height: 1;\n }\n\n .step-hint {\n font-size: 14.5px;\n color: var(--muted);\n margin-bottom: 22px;\n font-style: italic;\n line-height: 1.6;\n }\n\n .field-group {\n margin-bottom: 18px;\n }\n\n .field-label {\n display: block;\n font-size: 14.5px;\n font-weight: 600;\n color: var(--ink);\n margin-bottom: 8px;\n line-height: 1.5;\n }\n\n .field-label .field-example {\n display: block;\n font-weight: 400;\n font-style: italic;\n font-size: 13px;\n color: var(--muted);\n margin-top: 4px;\n }\n\n textarea,\n input[type=\"text\"] {\n width: 100%;\n border: 1.5px solid var(--divider);\n background: var(--surface);\n border-radius: 12px;\n padding: 14px 16px;\n font-family: \"Work Sans\", sans-serif;\n font-size: 15px;\n color: var(--ink);\n transition: all var(--transition);\n resize: vertical;\n line-height: 1.6;\n min-height: 90px;\n }\n\n input[type=\"text\"] { min-height: auto; }\n\n textarea:focus,\n input[type=\"text\"]:focus {\n outline: none;\n border-color: var(--primary-light);\n box-shadow: 0 0 0 4px rgba(69, 56, 118, 0.08);\n }\n\n textarea::placeholder,\n input::placeholder {\n color: var(--muted);\n opacity: 0.7;\n }\n\n .helper-text {\n font-size: 13px;\n color: var(--muted);\n margin-top: 8px;\n line-height: 1.6;\n font-style: italic;\n }\n\n .guided-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 18px;\n }\n\n .guided-item {\n background: var(--surface-soft);\n border: 1.5px solid var(--divider);\n border-radius: var(--radius-sm);\n padding: 14px 18px;\n transition: all var(--transition);\n }\n\n .guided-item:focus-within {\n border-color: var(--primary);\n background: var(--surface);\n box-shadow: 0 0 0 4px rgba(69, 56, 118, 0.06);\n }\n\n .guided-item .item-label {\n font-size: 13.5px;\n font-weight: 600;\n color: var(--primary);\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .guided-item .item-num {\n display: inline-flex;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--primary-soft);\n color: var(--primary);\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 700;\n flex-shrink: 0;\n }\n\n .guided-item textarea {\n min-height: 64px;\n padding: 10px 14px;\n font-size: 14.5px;\n border: 1px solid var(--divider);\n background: var(--surface);\n }\n\n .control-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 8px;\n }\n\n .control-box {\n background: var(--surface-soft);\n border: 1.5px solid var(--divider);\n border-radius: var(--radius-sm);\n padding: 16px 18px;\n transition: all var(--transition);\n }\n\n .control-box:focus-within {\n border-color: var(--primary);\n background: var(--surface);\n box-shadow: 0 0 0 4px rgba(69, 56, 118, 0.06);\n }\n\n .control-box.left {\n border-left: 4px solid var(--warm);\n }\n\n .control-box.build {\n border-left: 4px solid var(--accent);\n }\n\n .control-box .control-header {\n font-size: 13.5px;\n font-weight: 700;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n line-height: 1.4;\n }\n\n .control-box.left .control-header { color: var(--warm); }\n .control-box.build .control-header { color: var(--accent); }\n\n .control-box .control-icon {\n font-size: 16px;\n line-height: 1;\n }\n\n .control-box textarea {\n min-height: 120px;\n font-size: 14.5px;\n padding: 12px 14px;\n border: 1px solid var(--divider);\n background: var(--surface);\n }\n\n .control-box .control-help {\n font-size: 12px;\n color: var(--muted);\n font-style: italic;\n margin-top: 8px;\n line-height: 1.5;\n }\n\n @media (max-width: 640px) {\n .control-grid {\n grid-template-columns: 1fr;\n }\n }\n\n .chips-row {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 14px;\n }\n\n .chip {\n padding: 8px 16px;\n background: var(--surface);\n border: 1.5px solid var(--divider);\n border-radius: 99px;\n font-size: 13.5px;\n font-weight: 500;\n color: var(--ink);\n cursor: pointer;\n transition: all var(--transition);\n font-family: inherit;\n }\n\n .chip:hover {\n border-color: var(--primary);\n color: var(--primary);\n background: var(--primary-soft);\n }\n\n .chip.selected {\n background: var(--primary);\n border-color: var(--primary);\n color: #FFFFFF;\n }\n\n .multi-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n gap: 10px;\n margin-bottom: 8px;\n }\n\n .multi-chip {\n padding: 12px 16px;\n background: var(--surface-soft);\n border: 1.5px solid var(--divider);\n border-radius: var(--radius-sm);\n font-size: 13.5px;\n font-weight: 500;\n color: var(--ink);\n cursor: pointer;\n transition: all var(--transition);\n text-align: left;\n font-family: inherit;\n display: flex;\n align-items: center;\n gap: 10px;\n line-height: 1.4;\n }\n\n .multi-chip::before {\n content: \"\";\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border: 1.5px solid var(--divider);\n background: var(--surface);\n flex-shrink: 0;\n transition: all var(--transition);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .multi-chip:hover {\n border-color: var(--primary);\n background: var(--primary-soft);\n }\n\n .multi-chip.selected {\n border-color: var(--primary);\n background: var(--primary-soft);\n color: var(--primary);\n font-weight: 600;\n }\n\n .multi-chip.selected::before {\n background: var(--primary);\n border-color: var(--primary);\n content: \"\u2713\";\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n .info-callout {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n border-radius: 0 12px 12px 0;\n padding: 16px 20px;\n margin: 16px 0;\n font-size: 14px;\n color: var(--ink);\n line-height: 1.65;\n }\n\n .info-callout strong {\n color: var(--accent);\n font-weight: 700;\n }\n\n .info-emphasis {\n background: var(--primary-soft);\n border-left: 4px solid var(--primary);\n border-radius: 0 12px 12px 0;\n padding: 16px 20px;\n margin: 16px 0;\n font-size: 14px;\n color: var(--ink);\n line-height: 1.65;\n }\n\n .info-emphasis strong {\n color: var(--primary);\n font-weight: 700;\n }\n\n .btn-group {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n margin-top: 26px;\n justify-content: space-between;\n }\n\n .btn {\n padding: 14px 28px;\n border: none;\n border-radius: var(--radius-sm);\n font-family: \"Work Sans\", sans-serif;\n font-weight: 600;\n font-size: 15px;\n cursor: pointer;\n transition: all var(--transition);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n white-space: nowrap;\n }\n\n .btn-primary {\n background: var(--primary);\n color: #FFFFFF;\n box-shadow: 0 6px 20px var(--primary-shadow);\n }\n\n .btn-primary:hover {\n background: var(--primary-light);\n transform: translateY(-2px);\n box-shadow: 0 10px 28px var(--primary-shadow);\n }\n\n .btn-accent {\n background: var(--accent);\n color: #FFFFFF;\n box-shadow: 0 6px 20px var(--accent-shadow);\n }\n\n .btn-accent:hover {\n background: #27794d;\n transform: translateY(-2px);\n box-shadow: 0 10px 28px var(--accent-shadow);\n }\n\n .btn-secondary {\n background: var(--surface);\n color: var(--ink);\n border: 1.5px solid var(--divider);\n }\n\n .btn-secondary:hover {\n background: var(--primary-soft);\n border-color: var(--primary);\n color: var(--primary);\n }\n\n .summary-section {\n background: var(--surface);\n border-radius: var(--radius);\n padding: 34px 32px;\n margin-bottom: 24px;\n box-shadow: 0 16px 40px rgba(42, 36, 56, 0.08);\n border: 1px solid var(--divider);\n border-top: 5px solid var(--accent);\n display: none;\n }\n\n .summary-section.active { display: block; animation: fadeInUp 0.5s ease; }\n\n .summary-hero {\n text-align: center;\n margin-bottom: 28px;\n padding-bottom: 24px;\n border-bottom: 1px dashed var(--divider);\n }\n\n .summary-hero .summary-emoji {\n font-size: 44px;\n line-height: 1;\n margin-bottom: 12px;\n }\n\n .summary-hero h2 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 26px;\n color: var(--primary);\n margin-bottom: 10px;\n }\n\n .summary-hero p {\n font-size: 15px;\n color: var(--muted);\n font-style: italic;\n max-width: 520px;\n margin: 0 auto;\n }\n\n .summary-block {\n margin-bottom: 22px;\n padding-bottom: 22px;\n border-bottom: 1px solid var(--divider);\n }\n\n .summary-block:last-child {\n border-bottom: none;\n padding-bottom: 0;\n margin-bottom: 0;\n }\n\n .summary-block h3 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 17px;\n color: var(--primary);\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .summary-block p {\n font-size: 15px;\n color: var(--ink);\n line-height: 1.7;\n white-space: pre-wrap;\n }\n\n .summary-block ul {\n list-style: none;\n padding-left: 0;\n }\n\n .summary-block ul li {\n position: relative;\n padding-left: 22px;\n font-size: 14.5px;\n color: var(--ink);\n line-height: 1.65;\n margin-bottom: 8px;\n }\n\n .summary-block ul li::before {\n content: \"\u2726\";\n position: absolute;\n left: 0;\n color: var(--accent);\n font-size: 13px;\n top: 1px;\n }\n\n .summary-control-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n margin-top: 8px;\n }\n\n .summary-control-box {\n padding: 14px 16px;\n border-radius: 10px;\n border: 1px solid var(--divider);\n font-size: 14.5px;\n line-height: 1.65;\n }\n\n .summary-control-box.left {\n background: var(--warm-soft);\n border-left: 4px solid var(--warm);\n }\n\n .summary-control-box.build {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n }\n\n .summary-control-box .summary-control-label {\n font-weight: 700;\n font-size: 12.5px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 6px;\n display: block;\n }\n\n .summary-control-box.left .summary-control-label { color: #92400E; }\n .summary-control-box.build .summary-control-label { color: var(--accent); }\n\n @media (max-width: 640px) {\n .summary-control-grid {\n grid-template-columns: 1fr;\n }\n }\n\n .summary-resources {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n border-radius: 0 10px 10px 0;\n padding: 16px 20px;\n margin-top: 10px;\n font-size: 14.5px;\n color: var(--ink);\n line-height: 1.7;\n }\n\n .summary-resources strong {\n color: var(--accent);\n display: block;\n margin-bottom: 6px;\n }\n\n .summary-actions {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n justify-content: center;\n margin-top: 26px;\n padding-top: 24px;\n border-top: 1px solid var(--divider);\n }\n\n .footer {\n text-align: center;\n margin-top: 56px;\n padding-top: 28px;\n border-top: 1px solid var(--divider);\n color: var(--muted);\n font-size: 13px;\n line-height: 1.7;\n }\n\n .footer strong {\n color: var(--primary);\n font-weight: 600;\n }\n\n @media (max-width: 640px) {\n .wrap { padding: 28px 16px 60px; }\n .step { padding: 24px 20px; }\n .intro-card { padding: 22px 20px; }\n .summary-section { padding: 24px 20px; }\n .step-title { font-size: 20px; }\n .step-title .step-emoji { font-size: 22px; }\n .btn-group { flex-direction: column-reverse; }\n .btn-group .btn { width: 100%; }\n .summary-actions { flex-direction: column; }\n .summary-actions .btn { width: 100%; }\n .warning-card { padding: 16px 16px; flex-direction: column; gap: 10px; }\n .completed-notice { padding: 14px 16px; flex-direction: column; gap: 10px; }\n .multi-grid { grid-template-columns: 1fr; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }\n\n @media print {\n body { background: white; }\n .wrap { padding: 0; }\n .hero-frame, .btn, .intro-note, .footer, .progress-wrapper, .restart-hint { display: none !important; }\n .summary-section { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }\n .step { display: none !important; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"wrap\">\n\n \n <header class=\"hero\">\n <div class=\"hero-frame\">\ud83e\udded<\/div>\n <h1>Traverser une transition de vie<\/h1>\n <p class=\"subtitle\">Un outil d'accompagnement pour habiter les grands changements \u2014 immigration, retraite, expatriation \u2014 avec plus de douceur, de clart\u00e9 et d'ancrage.<\/p>\n <\/header>\n\n \n <div class=\"intro-card\" id=\"introCard\">\n <h2>Avant de commencer<\/h2>\n\n <div class=\"warning-card\">\n <div class=\"warning-icon\">\u26a0\ufe0f<\/div>\n <div class=\"warning-content\">\n <h3>Une transition n'est pas un simple \u00ab avant\/apr\u00e8s \u00bb<\/h3>\n <p>Immigrer, prendre sa retraite, s'expatrier \u2014 ce ne sont pas seulement des \u00e9v\u00e9nements. Ce sont des <strong>travers\u00e9es<\/strong>, qui remuent l'identit\u00e9, les rep\u00e8res, le sentiment d'appartenance, le sens. Le choc culturel, le deuil du pays quitt\u00e9, la perte du r\u00f4le professionnel, la solitude du nouveau contexte sont <strong>des exp\u00e9riences r\u00e9elles et document\u00e9es<\/strong>.<\/p>\n <p>Cet outil ne remplace pas un accompagnement psychologique, social ou administratif. Si vous traversez une d\u00e9tresse importante : <strong>811<\/strong> (Info-Social, 24\/7, Qu\u00e9bec), <strong>988<\/strong> (pr\u00e9vention du suicide, 24\/7, Canada), ou <strong>911<\/strong> en cas d'urgence.<\/p>\n <\/div>\n <\/div>\n\n <p>Toute grande transition comporte une part de perte \u2014 ce qui a \u00e9t\u00e9 quitt\u00e9, laiss\u00e9, abandonn\u00e9 \u2014 et une part de construction \u2014 ce qui est \u00e0 inventer, \u00e0 recr\u00e9er, \u00e0 habiter. Naviguer entre les deux demande du temps, de la patience, et souvent beaucoup de douceur envers soi-m\u00eame.<\/p>\n <p>Cet outil vous propose d'explorer <strong>ce que vous traversez comme transition, ce que vous avez quitt\u00e9, ce qui est \u00e0 construire, les besoins profonds qui s'expriment (identit\u00e9, appartenance, sens), les ressources disponibles, et un premier pas d'ancrage<\/strong> dans votre nouvelle r\u00e9alit\u00e9 \u2014 m\u00eame si elle est encore mouvante.<\/p>\n <p><strong>Vous n'avez pas \u00e0 aller vite.<\/strong> Une transition prend le temps qu'elle prend. Ce que vous faites ici, c'est simplement vous donner un espace pour la traverser plus consciemment.<\/p>\n <div class=\"intro-note\">\n <strong>\u23f1\ufe0f Dur\u00e9e estim\u00e9e :<\/strong> 20 \u00e0 30 minutes. Prenez le temps qu'il vous faut. Vos r\u00e9ponses sont enregistr\u00e9es automatiquement dans votre navigateur et restent confidentielles.\n <\/div>\n\n <div class=\"completed-notice\" id=\"completedNotice\" style=\"display: none;\">\n <div class=\"completed-icon\">\u2705<\/div>\n <div class=\"completed-text\">\n <strong>Vous avez termin\u00e9 cette exploration.<\/strong>\n <p>Votre synth\u00e8se est pr\u00eate. Vous pouvez la relire en douceur, ou recommencer une nouvelle exploration.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"btn-group\" style=\"justify-content: flex-start;\">\n <button class=\"btn btn-primary\" id=\"startBtn\" type=\"button\">Commencer en douceur \u2192<\/button>\n <button class=\"btn btn-accent\" id=\"reviewBtn\" type=\"button\" style=\"display: none;\">\u2728 Revoir ma synth\u00e8se<\/button>\n <button class=\"btn btn-secondary\" id=\"resetBtn\" type=\"button\">R\u00e9initialiser<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"progress-wrapper\" id=\"progressWrapper\" style=\"display: none;\">\n <div class=\"progress-text\">\n <span id=\"progressLabel\">\u00c9tape 1 sur 6<\/span>\n <span id=\"progressPercent\">0%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <\/div>\n <\/div>\n\n \n <section class=\"step\" id=\"step1\" data-step=\"1\">\n <span class=\"step-badge\">\u00c9tape 1 \u00b7 Nommer<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83c\udf0d<\/span> La transition telle que je la vis<\/h2>\n <p class=\"step-hint\">Commen\u00e7ons par nommer la transition \u2014 sans juger si elle se passe \u00ab bien \u00bb ou \u00ab mal \u00bb. Une transition est un processus, pas un r\u00e9sultat.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Quelle transition traversez-vous en ce moment ?\n <span class=\"field-example\">Cochez ce qui correspond le mieux, ou plusieurs si applicable.<\/span>\n <\/label>\n <div class=\"chips-row\" id=\"transitionTypeChips\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"situation\">\n Comment d\u00e9cririez-vous ce que vous vivez, en quelques phrases ?\n <span class=\"field-example\">Sans entrer dans les d\u00e9tails personnels si vous pr\u00e9f\u00e9rez rester g\u00e9n\u00e9ral.<\/span>\n <\/label>\n <textarea id=\"situation\" placeholder=\"En ce moment, je\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"duration\">\n Depuis combien de temps \u00eates-vous dans cette transition ?\n <span class=\"field-example\">Ex. : \u00ab Depuis 3 mois \u00bb, \u00ab Depuis 2 ans \u00bb, \u00ab La retraite a commenc\u00e9 il y a 6 mois \u00bb, \u00ab Je viens d'arriver \u00bb, \u00ab Je suis encore dans la pr\u00e9paration \u00bb.<\/span>\n <\/label>\n <input type=\"text\" id=\"duration\" placeholder=\"Depuis\u2026\">\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">Sur une \u00e9chelle de 0 \u00e0 10, quelle est la charge que cette transition repr\u00e9sente pour vous en ce moment ?<\/label>\n <div class=\"chips-row\" id=\"loadChips\"><\/div>\n <div class=\"helper-text\">0 = tr\u00e8s l\u00e9g\u00e8re \u00b7 10 = tr\u00e8s lourde. Aucun jugement \u2014 juste un rep\u00e8re.<\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"intro\">\u2190 Retour<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"2\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step2\" data-step=\"2\">\n <span class=\"step-badge\">\u00c9tape 2 \u00b7 Reconna\u00eetre<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83c\udf42<\/span> Ce qui a \u00e9t\u00e9 quitt\u00e9<\/h2>\n <p class=\"step-hint\">Toute transition comporte un deuil \u2014 un pays, un r\u00f4le, un environnement, un rythme, une version de soi. Reconna\u00eetre ce qui a \u00e9t\u00e9 quitt\u00e9 est un acte de respect, pas de faiblesse.<\/p>\n\n <div class=\"info-callout\">\n <strong>\ud83d\udca1 Le deuil de la transition est r\u00e9el<\/strong><br>\n On peut vivre un deuil sans qu'il y ait eu un d\u00e9c\u00e8s. Le deuil migratoire, le deuil de la retraite, le deuil de l'expatriation sont des exp\u00e9riences reconnues. Ils comportent des phases \u2014 choc, d\u00e9ni, col\u00e8re, tristesse, ajustement, r\u00e9organisation \u2014 et ne suivent pas un ordre lin\u00e9aire.\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Qu'est-ce que cette transition vous a fait quitter ?\n <span class=\"field-example\">Cochez tout ce qui r\u00e9sonne, puis compl\u00e9tez.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"leftGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"leftText\">\n D\u00e9crivez plus pr\u00e9cis\u00e9ment ce qui vous manque le plus :\n <\/label>\n <textarea id=\"leftText\" placeholder=\"Ce qui me manque le plus, c'est\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"griefExpression\">\n Y a-t-il un deuil, une tristesse, une nostalgie que vous n'avez pas encore pu exprimer ?\n <span class=\"field-example\">Ces \u00e9motions ont besoin d'espace. Les nommer sans les fuir est d\u00e9j\u00e0 une forme de soin.<\/span>\n <\/label>\n <textarea id=\"griefExpression\" placeholder=\"Ce que je porte parfois sans le dire\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"lostIdentity\">\n Y a-t-il une part de votre identit\u00e9 qui se sent mise en suspens ou perdue ?\n <span class=\"field-example\">Ex. : \u00ab Mon r\u00f4le professionnel \u00bb, \u00ab Ma langue maternelle au quotidien \u00bb, \u00ab Mes rep\u00e8res culturels \u00bb, \u00ab Mes amiti\u00e9s de longue date \u00bb, \u00ab Ma place reconnue dans un milieu \u00bb.<\/span>\n <\/label>\n <textarea id=\"lostIdentity\" placeholder=\"Ce qui, dans mon identit\u00e9, se sent en suspens\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"1\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"3\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step3\" data-step=\"3\">\n <span class=\"step-badge\">\u00c9tape 3 \u00b7 Explorer<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83c\udf31<\/span> Ce qui est \u00e0 construire<\/h2>\n <p class=\"step-hint\">Apr\u00e8s le deuil, vient la reconstruction. Pas \u00e0 pas. Cette \u00e9tape vous invite \u00e0 regarder \u2014 sans pression \u2014 ce qui pourrait \u00eatre invent\u00e9, recr\u00e9\u00e9, habit\u00e9 dans votre nouvelle r\u00e9alit\u00e9.<\/p>\n\n <div class=\"info-emphasis\">\n <strong>\ud83d\udca1 Une transition n'efface pas \u2014 elle recompose<\/strong><br>\n Il ne s'agit pas de \u00ab repartir de z\u00e9ro \u00bb ou de \u00ab tourner la page \u00bb. Il s'agit de <strong>recomposer une vie<\/strong> \u00e0 partir de ce qui a \u00e9t\u00e9, de ce qui est l\u00e0, et de ce qui vient. Votre histoire vous suit \u2014 c'est une force, pas un poids.\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Qu'est-ce qui pourrait se construire, dans cette nouvelle phase ?\n <span class=\"field-example\">Cochez ce qui r\u00e9sonne, m\u00eame timidement.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"buildGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"buildText\">\n Formulez plus pr\u00e9cis\u00e9ment ce que vous aimeriez voir grandir :\n <\/label>\n <textarea id=\"buildText\" placeholder=\"J'aimerais que\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"kept\">\n Qu'est-ce qui vous suit, et que vous voulez conserver ?\n <span class=\"field-example\">Ex. : \u00ab Ma langue \u00bb, \u00ab Mes valeurs \u00bb, \u00ab Ma cuisine \u00bb, \u00ab Mes rituels \u00bb, \u00ab Ma mani\u00e8re d'\u00eatre en relation \u00bb, \u00ab Certaines amiti\u00e9s \u00bb, \u00ab Une comp\u00e9tence \u00bb.<\/span>\n <\/label>\n <textarea id=\"kept\" placeholder=\"Ce que je veux garder\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"newPossibilities\">\n Y a-t-il des possibilit\u00e9s qui s'ouvrent et que vous n'auriez pas eues avant ?\n <span class=\"field-example\">Ex. : \u00ab Du temps libre \u00bb, \u00ab De nouvelles rencontres \u00bb, \u00ab Une autre langue \u00bb, \u00ab Un rythme plus doux \u00bb, \u00ab Une nouvelle activit\u00e9 \u00bb, \u00ab Un rapport diff\u00e9rent \u00e0 moi-m\u00eame \u00bb.<\/span>\n <\/label>\n <textarea id=\"newPossibilities\" placeholder=\"Ce qui s'ouvre\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"2\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"4\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step4\" data-step=\"4\">\n <span class=\"step-badge\">\u00c9tape 4 \u00b7 Besoins<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83c\udf3f<\/span> Besoins (identit\u00e9, appartenance, sens)<\/h2>\n <p class=\"step-hint\">Dans une grande transition, trois besoins profonds remontent souvent : <strong>identit\u00e9<\/strong> (qui suis-je ici ?), <strong>appartenance<\/strong> (o\u00f9 est ma place ?), <strong>sens<\/strong> (pourquoi, vers quoi ?). Les reconna\u00eetre aide \u00e0 ne pas se perdre.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Quels besoins sont les plus vivants pour vous en ce moment ?\n <span class=\"field-example\">Cochez tout ce qui r\u00e9sonne, m\u00eame partiellement.<\/span>\n <\/label>\n <div class=\"chips-row\" id=\"needsChips\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"needText\">\n Ces besoins, formul\u00e9s plus pr\u00e9cis\u00e9ment :\n <\/label>\n <textarea id=\"needText\" placeholder=\"J'aurais besoin de\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"identityQuestion\">\n Si vous deviez r\u00e9pondre \u00e0 la question \u00ab qui suis-je, ici, maintenant ? \u00bb, que diriez-vous ?\n <span class=\"field-example\">Pas besoin d'une r\u00e9ponse d\u00e9finitive. M\u00eame une amorce, un doute, une piste. C'est d\u00e9j\u00e0 un travail d'identit\u00e9.<\/span>\n <\/label>\n <textarea id=\"identityQuestion\" placeholder=\"Qui je suis, ici, maintenant\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"meaning\">\n Qu'est-ce qui donne du sens \u00e0 votre vie en ce moment ?\n <span class=\"field-example\">Ex. : \u00ab Mes liens \u00bb, \u00ab Cr\u00e9er \u00bb, \u00ab Aider \u00bb, \u00ab Apprendre \u00bb, \u00ab Transmettre \u00bb, \u00ab Prendre soin de moi \u00bb, \u00ab Une foi, une spiritualit\u00e9 \u00bb, \u00ab Un projet \u00bb.<\/span>\n <\/label>\n <textarea id=\"meaning\" placeholder=\"Ce qui donne du sens\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"belonging\">\n O\u00f9, avec qui, dans quel espace vous sentez-vous \u2014 m\u00eame un peu \u2014 chez vous ?\n <span class=\"field-example\">Ex. : \u00ab Avec certains proches \u00bb, \u00ab Dans un lieu (caf\u00e9, parc, lieu de culte) \u00bb, \u00ab Dans une communaut\u00e9 en ligne \u00bb, \u00ab Dans une activit\u00e9 \u00bb, \u00ab Dans ma langue \u00bb, \u00ab Nulle part pour l'instant \u00bb (c'est aussi une r\u00e9ponse).<\/span>\n <\/label>\n <textarea id=\"belonging\" placeholder=\"Ce qui, ou ceux, me font sentir chez moi\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"3\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"5\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step5\" data-step=\"5\">\n <span class=\"step-badge\">\u00c9tape 5 \u00b7 Ressources<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83e\udd1d<\/span> Ressources<\/h2>\n <p class=\"step-hint\">Une transition se traverse mieux quand on ne la porte pas seul\u00b7e. Il existe de nombreuses ressources, souvent m\u00e9connues, pour les personnes en immigration, en expatriation ou en retraite.<\/p>\n\n <div class=\"info-callout\">\n <strong>\ud83d\udca1 Des ressources existent pour chaque type de transition<\/strong><br>\n <strong>Immigration<\/strong> : organismes d'accueil, services d'aide aux nouveaux arrivants, francisation, banques alimentaires, cliniques juridiques.<br>\n <strong>Retraite<\/strong> : associations de retrait\u00e9\u00b7es, clubs sociaux, groupes d'entraide, services municipaux pour a\u00een\u00e9\u00b7es.<br>\n <strong>Expatriation<\/strong> : communaut\u00e9s d'expatri\u00e9\u00b7es, forums, groupes locaux, associations culturelles.<br>\n <strong>Soutien transversal<\/strong> : psychologues, travailleurs sociaux, 811, organismes communautaires de votre r\u00e9gion.\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Parmi ces ressources, lesquelles pourraient vous \u00eatre utiles ?\n <span class=\"field-example\">Cochez ce qui est r\u00e9aliste pour votre situation.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"resourcesGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"chosenResources\">\n Lesquelles aimeriez-vous explorer en priorit\u00e9 ?\n <\/label>\n <textarea id=\"chosenResources\" placeholder=\"En priorit\u00e9, je voudrais\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"personalSupport\">\n Sur qui pouvez-vous compter, dans votre entourage actuel ?\n <span class=\"field-example\">Proches pr\u00e9sents, amiti\u00e9s nouvelles, amiti\u00e9s \u00e0 distance, r\u00e9seau en ligne, coll\u00e8gues, communaut\u00e9\u2026<\/span>\n <\/label>\n <textarea id=\"personalSupport\" placeholder=\"Sur qui je peux compter\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"obstacles\">\n Y a-t-il des obstacles concrets pour acc\u00e9der \u00e0 ces ressources ?\n <span class=\"field-example\">Ex. : \u00ab La langue \u00bb, \u00ab Les d\u00e9marches administratives \u00bb, \u00ab Le co\u00fbt \u00bb, \u00ab La distance \u00bb, \u00ab La fatigue \u00bb, \u00ab La peur de demander \u00bb, \u00ab Ne pas savoir o\u00f9 chercher \u00bb.<\/span>\n <\/label>\n <textarea id=\"obstacles\" placeholder=\"Ce qui pourrait me freiner\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"4\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"6\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step6\" data-step=\"6\">\n <span class=\"step-badge\">\u00c9tape 6 \u00b7 S'ancrer<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83d\udc63<\/span> Premier pas d'ancrage<\/h2>\n <p class=\"step-hint\">Dans une transition, on n'a pas besoin de tout reconstruire d'un coup. Un petit geste d'ancrage \u2014 quelque chose de concret, de simple, qui vous relie au pr\u00e9sent \u2014 peut suffire pour aujourd'hui.<\/p>\n\n <div class=\"info-emphasis\">\n <strong>\ud83d\udca1 La r\u00e8gle du petit ancrage<\/strong><br>\n Choisissez une action <strong>petite, concr\u00e8te, et apaisante<\/strong>. Ex. : \u00ab Marcher 10 minutes dans mon quartier \u00bb, \u00ab Pr\u00e9parer un plat de mon pays \u00bb, \u00ab \u00c9crire \u00e0 un proche rest\u00e9 l\u00e0-bas \u00bb, \u00ab Rejoindre un groupe local \u00bb, \u00ab Am\u00e9nager un coin de chez moi qui me ressemble \u00bb, \u00ab Prendre un caf\u00e9 au m\u00eame endroit chaque semaine \u00bb. Ces petits gestes construisent, sans qu'on s'en rende compte, un nouveau chez-soi.\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"firstStep\">\n Quel serait votre premier pas d'ancrage ?\n <\/label>\n <textarea id=\"firstStep\" placeholder=\"Mon premier pas serait\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"whenStep\">\n Quand pourriez-vous le faire ?\n <span class=\"field-example\">Un moment pr\u00e9cis, dans un d\u00e9lai r\u00e9aliste.<\/span>\n <\/label>\n <input type=\"text\" id=\"whenStep\" placeholder=\"Ex. : cette semaine, demain, dans les prochains jours\u2026\">\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"supportStep\">\n De qui ou de quoi auriez-vous besoin pour vous y tenir ?\n <span class=\"field-example\">Optionnel \u2014 mais souvent utile.<\/span>\n <\/label>\n <textarea id=\"supportStep\" placeholder=\"Pour m'aider \u00e0 faire ce premier pas, je pourrais\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"ifHard\">\n Comment prendrez-vous soin de vous si c'est difficile ?\n <span class=\"field-example\">Ex. : \u00ab Je me rappellerai que c'est un processus \u00bb, \u00ab Je ne me jugerai pas si je pleure \u00bb, \u00ab J'appellerai un proche \u00bb, \u00ab Je m'autoriserai \u00e0 faire moins \u00bb, \u00ab Je demanderai de l'aide \u00bb.<\/span>\n <\/label>\n <textarea id=\"ifHard\" placeholder=\"Si c'est difficile, je\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Apr\u00e8s ce travail, quelle est la charge ressentie <em>maintenant<\/em> ?\n <\/label>\n <div class=\"chips-row\" id=\"loadChipsAfter\"><\/div>\n <div class=\"helper-text\">Aucun jugement. Observez simplement, m\u00eame un l\u00e9ger changement.<\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"5\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-accent\" type=\"button\" data-action=\"summary\">Voir ma synth\u00e8se \ud83e\udded<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"summary-section\" id=\"summarySection\">\n <div class=\"summary-hero\">\n <div class=\"summary-emoji\">\ud83c\udf3f<\/div>\n <h2>Votre synth\u00e8se<\/h2>\n <p>Voici ce que vous avez mis en mots. Ce document vous appartient \u2014 vous pouvez le relire, l'imprimer, ou en parler \u00e0 un proche ou \u00e0 un professionnel.<\/p>\n <\/div>\n\n <div id=\"summaryContent\"><\/div>\n\n <div class=\"summary-resources\">\n <strong>\ud83e\udded Ressources \u00e0 garder sous la main<\/strong>\n \u2022 <strong>811 (Info-Social)<\/strong> \u2014 Soutien psychosocial 24\/7 (Qu\u00e9bec)<br>\n \u2022 <strong>988<\/strong> \u2014 Pr\u00e9vention du suicide (24\/7, Canada)<br>\n \u2022 <strong>911<\/strong> \u2014 En cas d'urgence<br>\n \u2022 <strong>Votre m\u00e9decin de famille<\/strong> ou <strong>CLSC<\/strong> \u2014 Pour un suivi et un accompagnement<br>\n \u2022 <strong>Psychologue ou travailleur\u00b7se social\u00b7e<\/strong> \u2014 Soutien sp\u00e9cialis\u00e9 pour les transitions<br>\n \u2022 <strong>Organismes d'accueil pour nouveaux arrivants<\/strong> \u2014 Selon votre r\u00e9gion<br>\n \u2022 <strong>Associations de retrait\u00e9\u00b7es et clubs sociaux<\/strong> \u2014 Pour la transition retraite<br>\n \u2022 <strong>Communaut\u00e9s d'expatri\u00e9\u00b7es et associations culturelles<\/strong> \u2014 Pour l'expatriation<br>\n \u2022 <strong>Services municipaux et communautaires<\/strong> \u2014 Activit\u00e9s, soutien, entraide locale\n <\/div>\n\n <div class=\"summary-actions\">\n <button class=\"btn btn-primary\" id=\"printBtn\" type=\"button\">\ud83d\udda8\ufe0f Imprimer<\/button>\n <button class=\"btn btn-secondary\" id=\"downloadBtn\" type=\"button\">\ud83d\udce5 T\u00e9l\u00e9charger<\/button>\n <button class=\"btn btn-secondary\" id=\"restartBtn\" type=\"button\">\ud83d\udd04 Nouvelle exploration<\/button>\n <\/div>\n <p class=\"restart-hint\">Envie de refaire l'exercice ? Vos r\u00e9ponses actuelles seront effac\u00e9es \u2014 pensez \u00e0 imprimer ou t\u00e9l\u00e9charger votre synth\u00e8se avant.<\/p>\n <\/section>\n\n \n <footer class=\"footer\">\n <p>\ud83e\udded <strong>Outil d'accompagnement JIRIS<\/strong> \u2014 Justice \u00b7 Inclusion \u00b7 R\u00e9int\u00e9gration \u00b7 Innovation Sociale<\/p>\n <p style=\"margin-top: 8px; opacity: 0.8;\">Cet outil ne pose aucun diagnostic et ne remplace pas un accompagnement professionnel. Vos r\u00e9ponses restent dans votre navigateur.<\/p>\n <\/footer>\n\n<\/div>\n\n<script>\n(function () {\n \"use strict\";\n\n const STORAGE_KEY = 'jiris-transition-vie-outil';\n const TOTAL_STEPS = 6;\n\n const state = {\n currentStep: 0,\n transitionType: [],\n situation: '',\n duration: '',\n loadBefore: null,\n left: [],\n leftText: '',\n griefExpression: '',\n lostIdentity: '',\n build: [],\n buildText: '',\n kept: '',\n newPossibilities: '',\n needs: [],\n needText: '',\n identityQuestion: '',\n meaning: '',\n belonging: '',\n resources: [],\n chosenResources: '',\n personalSupport: '',\n obstacles: '',\n firstStep: '',\n whenStep: '',\n supportStep: '',\n ifHard: '',\n loadAfter: null,\n completed: false\n };\n\n const LOAD_LEVELS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\n const TRANSITION_TYPE_LIST = [\n 'Immigration',\n 'Expatriation',\n 'Retour au pays',\n 'Retraite',\n 'Changement de carri\u00e8re',\n 'D\u00e9m\u00e9nagement majeur',\n 'Fin de vie professionnelle',\n 'Deuil d\\'un proche',\n 'Reconversion apr\u00e8s maladie',\n 'Transition familiale (parentalit\u00e9, s\u00e9paration)',\n 'Transition apr\u00e8s une \u00e9preuve',\n 'Autre grand changement'\n ];\n\n const LEFT_LIST = [\n 'Mon pays, ma r\u00e9gion, mes paysages',\n 'Ma langue au quotidien',\n 'Mes proches rest\u00e9s l\u00e0-bas',\n 'Mon r\u00f4le professionnel',\n 'Mon r\u00e9seau social',\n 'Mes rep\u00e8res culturels',\n 'Mes habitudes, mes rituels',\n 'Ma place reconnue dans un milieu',\n 'Ma routine',\n 'Un sentiment d\\'appartenance',\n 'Une certaine version de moi-m\u00eame',\n 'Une partie de mon identit\u00e9',\n 'Ma maison, mon quartier',\n 'Mon sentiment de comp\u00e9tence',\n 'Des projets que j\\'avais',\n 'Une certaine insouciance'\n ];\n\n const BUILD_LIST = [\n 'Un nouveau r\u00e9seau social',\n 'Une place dans ma communaut\u00e9',\n 'Une nouvelle routine',\n 'Un espace chez moi qui me ressemble',\n 'Un projet qui m\\'anime',\n 'Une nouvelle activit\u00e9, un loisir',\n 'Une nouvelle comp\u00e9tence, un apprentissage',\n 'Un rapport diff\u00e9rent au temps',\n 'Une intimit\u00e9 avec moi-m\u00eame',\n 'Un engagement, du b\u00e9n\u00e9volat',\n 'Une nouvelle identit\u00e9 professionnelle',\n 'Une nouvelle langue',\n 'Des amiti\u00e9s qui se tissent',\n 'Un lieu o\u00f9 je me sens bien',\n 'Une transmission (\u00e0 d\\'autres, \u00e0 des plus jeunes)',\n 'Du sens dans mon quotidien'\n ];\n\n const NEEDS_LIST = [\n 'Me sentir chez moi, quelque part',\n 'Comprendre qui je suis maintenant',\n 'Trouver un sens \u00e0 cette nouvelle phase',\n 'Sentir de l\\'appartenance',\n '\u00catre entour\u00e9\u00b7e',\n 'Pr\u00e9server ma langue, ma culture',\n 'Transmettre quelque chose',\n 'Me sentir utile',\n 'Avoir du temps pour m\\'adapter',\n '\u00catre reconnu\u00b7e pour ce que je suis',\n 'Me sentir en s\u00e9curit\u00e9',\n '\u00catre \u00e9cout\u00e9\u00b7e sans jugement',\n 'Avoir des rep\u00e8res simples',\n 'De la douceur envers moi-m\u00eame',\n 'Pouvoir dire que c\\'est difficile',\n 'Continuer \u00e0 \u00eatre moi-m\u00eame, autrement'\n ];\n\n const RESOURCES_LIST = [\n 'Un\u00b7e psychologue ou psychoth\u00e9rapeute',\n 'Un\u00b7e travailleur\u00b7se social\u00b7e',\n 'Mon m\u00e9decin de famille ou le CLSC',\n 'Un organisme d\\'accueil pour nouveaux arrivants',\n 'Un service d\\'aide \u00e0 l\\'emploi ou \u00e0 la retraite',\n 'Une association culturelle ou communaut\u00e9 d\\'origine',\n 'Un groupe de soutien (transition, immigration, retraite)',\n 'Un club social ou une activit\u00e9 de quartier',\n 'Une communaut\u00e9 en ligne',\n 'Une banque alimentaire ou un service d\\'entraide',\n 'Un\u00b7e conseiller\u00b7\u00e8re en orientation ou en retraite',\n 'Une ligne d\\'\u00e9coute (811, 988, lignes locales)',\n 'Un lieu de culte ou une communaut\u00e9 spirituelle',\n 'Un service municipal pour les a\u00een\u00e9\u00b7es ou les familles',\n 'Une clinique juridique (d\u00e9marches, statut)',\n 'Des cours de langue ou de francisation'\n ];\n\n const introCard = document.getElementById('introCard');\n const progressWrapper = document.getElementById('progressWrapper');\n const progressLabel = document.getElementById('progressLabel');\n const progressPercent = document.getElementById('progressPercent');\n const progressFill = document.getElementById('progressFill');\n const summarySection = document.getElementById('summarySection');\n const summaryContent = document.getElementById('summaryContent');\n\n function renderLoadChips(containerId, keyName) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n LOAD_LEVELS.forEach(n => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'chip';\n btn.textContent = n;\n if (state[keyName] === n) btn.classList.add('selected');\n btn.addEventListener('click', () => {\n state[keyName] = n;\n container.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));\n btn.classList.add('selected');\n saveState();\n });\n container.appendChild(btn);\n });\n }\n\n function renderMultiGrid(containerId, keyName, list) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n list.forEach(item => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'multi-chip';\n btn.textContent = item;\n if (state[keyName].includes(item)) btn.classList.add('selected');\n btn.addEventListener('click', () => {\n const idx = state[keyName].indexOf(item);\n if (idx >= 0) {\n state[keyName].splice(idx, 1);\n btn.classList.remove('selected');\n } else {\n state[keyName].push(item);\n btn.classList.add('selected');\n }\n saveState();\n });\n container.appendChild(btn);\n });\n }\n\n function renderChipsRow(containerId, keyName, list) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n list.forEach(item => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'chip';\n btn.textContent = item;\n if (state[keyName].includes(item)) btn.classList.add('selected');\n btn.addEventListener('click', () => {\n const idx = state[keyName].indexOf(item);\n if (idx >= 0) {\n state[keyName].splice(idx, 1);\n btn.classList.remove('selected');\n } else {\n state[keyName].push(item);\n btn.classList.add('selected');\n }\n saveState();\n });\n container.appendChild(btn);\n });\n }\n\n function saveState() {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(state));\n } catch (e) {\n console.warn('Sauvegarde impossible :', e);\n }\n }\n\n function loadState() {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return false;\n const saved = JSON.parse(raw);\n Object.keys(state).forEach(k => {\n if (saved[k] !== undefined) state[k] = saved[k];\n });\n return true;\n } catch (e) {\n return false;\n }\n }\n\n function bindInputs() {\n const bind = (id, key) => {\n const el = document.getElementById(id);\n if (!el) return;\n el.addEventListener('input', e => {\n state[key] = e.target.value;\n saveState();\n });\n };\n bind('situation', 'situation');\n bind('duration', 'duration');\n bind('leftText', 'leftText');\n bind('griefExpression', 'griefExpression');\n bind('lostIdentity', 'lostIdentity');\n bind('buildText', 'buildText');\n bind('kept', 'kept');\n bind('newPossibilities', 'newPossibilities');\n bind('needText', 'needText');\n bind('identityQuestion', 'identityQuestion');\n bind('meaning', 'meaning');\n bind('belonging', 'belonging');\n bind('chosenResources', 'chosenResources');\n bind('personalSupport', 'personalSupport');\n bind('obstacles', 'obstacles');\n bind('firstStep', 'firstStep');\n bind('whenStep', 'whenStep');\n bind('supportStep', 'supportStep');\n bind('ifHard', 'ifHard');\n }\n\n function fillInputs() {\n const fill = (id, val) => {\n const el = document.getElementById(id);\n if (el) el.value = val || '';\n };\n fill('situation', state.situation);\n fill('duration', state.duration);\n fill('leftText', state.leftText);\n fill('griefExpression', state.griefExpression);\n fill('lostIdentity', state.lostIdentity);\n fill('buildText', state.buildText);\n fill('kept', state.kept);\n fill('newPossibilities', state.newPossibilities);\n fill('needText', state.needText);\n fill('identityQuestion', state.identityQuestion);\n fill('meaning', state.meaning);\n fill('belonging', state.belonging);\n fill('chosenResources', state.chosenResources);\n fill('personalSupport', state.personalSupport);\n fill('obstacles', state.obstacles);\n fill('firstStep', state.firstStep);\n fill('whenStep', state.whenStep);\n fill('supportStep', state.supportStep);\n fill('ifHard', state.ifHard);\n }\n\n function goToIntro() {\n state.currentStep = 0;\n introCard.style.display = 'block';\n progressWrapper.style.display = 'none';\n summarySection.classList.remove('active');\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n updateIntroForCompleted();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n saveState();\n }\n\n function goToStep(n) {\n if (n < 1 || n > TOTAL_STEPS) return;\n state.currentStep = n;\n introCard.style.display = 'none';\n progressWrapper.style.display = 'block';\n summarySection.classList.remove('active');\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n const target = document.getElementById('step' + n);\n if (target) target.classList.add('active');\n updateProgress();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n saveState();\n }\n\n function updateProgress() {\n const pct = Math.round((state.currentStep \/ TOTAL_STEPS) * 100);\n progressLabel.textContent = '\u00c9tape ' + state.currentStep + ' sur ' + TOTAL_STEPS;\n progressPercent.textContent = pct + '%';\n progressFill.style.width = pct + '%';\n }\n\n function escapeHtml(s) {\n const div = document.createElement('div');\n div.textContent = s || '';\n return div.innerHTML;\n }\n\n function buildSummaryHtml() {\n const blocks = [];\n\n if (state.transitionType.length > 0 || state.situation || state.duration || state.loadBefore !== null) {\n let inner = '';\n if (state.transitionType.length > 0) {\n inner += '<p><strong>Type de transition :<\/strong><\/p>';\n inner += '<ul>' + state.transitionType.map(t => '<li>' + escapeHtml(t) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.situation) {\n inner += '<p style=\"margin-top: 12px;\">' + escapeHtml(state.situation) + '<\/p>';\n }\n if (state.duration) {\n inner += '<p style=\"margin-top: 10px;\"><strong>Depuis :<\/strong> ' + escapeHtml(state.duration) + '<\/p>';\n }\n if (state.loadBefore !== null) {\n inner += '<p style=\"margin-top: 10px; font-size: 14px; color: var(--muted);\">Charge ressentie au d\u00e9part : <strong style=\"color: var(--primary);\">' + state.loadBefore + '\/10<\/strong><\/p>';\n }\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udf0d La transition<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.left.length > 0 || state.leftText || state.griefExpression || state.lostIdentity) {\n let inner = '';\n if (state.left.length > 0) {\n inner += '<p><strong>Ce que j\\'ai quitt\u00e9 :<\/strong><\/p>';\n inner += '<ul>' + state.left.map(l => '<li>' + escapeHtml(l) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.leftText) inner += '<p style=\"margin-top: 12px;\">' + escapeHtml(state.leftText) + '<\/p>';\n if (state.griefExpression) inner += '<p style=\"margin-top: 10px;\"><strong>Ce que je porte parfois sans le dire :<\/strong><br>' + escapeHtml(state.griefExpression) + '<\/p>';\n if (state.lostIdentity) inner += '<p style=\"margin-top: 10px;\"><strong>Identit\u00e9 en suspens :<\/strong><br>' + escapeHtml(state.lostIdentity) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udf42 Ce qui a \u00e9t\u00e9 quitt\u00e9<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.build.length > 0 || state.buildText || state.kept || state.newPossibilities) {\n let inner = '';\n if (state.build.length > 0) {\n inner += '<p><strong>Ce qui pourrait se construire :<\/strong><\/p>';\n inner += '<ul>' + state.build.map(b => '<li>' + escapeHtml(b) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.buildText) inner += '<p style=\"margin-top: 12px;\">' + escapeHtml(state.buildText) + '<\/p>';\n if (state.kept) inner += '<p style=\"margin-top: 10px;\"><strong>Ce que je veux garder :<\/strong><br>' + escapeHtml(state.kept) + '<\/p>';\n if (state.newPossibilities) inner += '<p style=\"margin-top: 10px;\"><strong>Ce qui s\\'ouvre :<\/strong><br>' + escapeHtml(state.newPossibilities) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udf31 Ce qui est \u00e0 construire<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.needs.length > 0 || state.needText || state.identityQuestion || state.meaning || state.belonging) {\n let inner = '';\n if (state.needs.length > 0) {\n inner += '<ul>' + state.needs.map(n => '<li>' + escapeHtml(n) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.needText) inner += '<p style=\"margin-top: 10px;\">' + escapeHtml(state.needText) + '<\/p>';\n if (state.identityQuestion) inner += '<p style=\"margin-top: 12px;\"><strong>Qui je suis, ici, maintenant :<\/strong><br>' + escapeHtml(state.identityQuestion) + '<\/p>';\n if (state.meaning) inner += '<p style=\"margin-top: 10px;\"><strong>Ce qui donne du sens :<\/strong><br>' + escapeHtml(state.meaning) + '<\/p>';\n if (state.belonging) inner += '<p style=\"margin-top: 10px;\"><strong>O\u00f9 je me sens un peu chez moi :<\/strong><br>' + escapeHtml(state.belonging) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udf3f Besoins profonds<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.resources.length > 0 || state.chosenResources || state.personalSupport || state.obstacles) {\n let inner = '';\n if (state.resources.length > 0) {\n inner += '<p><strong>Ressources possibles :<\/strong><\/p>';\n inner += '<ul>' + state.resources.map(r => '<li>' + escapeHtml(r) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.chosenResources) inner += '<p style=\"margin-top: 12px;\"><strong>\u00c0 explorer en priorit\u00e9 :<\/strong><br>' + escapeHtml(state.chosenResources) + '<\/p>';\n if (state.personalSupport) inner += '<p style=\"margin-top: 10px;\"><strong>Sur qui je peux compter :<\/strong><br>' + escapeHtml(state.personalSupport) + '<\/p>';\n if (state.obstacles) inner += '<p style=\"margin-top: 10px;\"><strong>Obstacles possibles :<\/strong><br>' + escapeHtml(state.obstacles) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83e\udd1d Ressources<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.firstStep || state.whenStep || state.supportStep || state.ifHard) {\n let inner = '';\n if (state.firstStep) inner += '<p><strong>Mon premier pas d\\'ancrage :<\/strong><br>' + escapeHtml(state.firstStep) + '<\/p>';\n if (state.whenStep) inner += '<p style=\"margin-top: 10px;\"><strong>Quand :<\/strong> ' + escapeHtml(state.whenStep) + '<\/p>';\n if (state.supportStep) inner += '<p style=\"margin-top: 10px;\"><strong>Soutien pr\u00e9vu :<\/strong> ' + escapeHtml(state.supportStep) + '<\/p>';\n if (state.ifHard) inner += '<p style=\"margin-top: 10px;\"><strong>Si c\\'est difficile :<\/strong><br>' + escapeHtml(state.ifHard) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udc63 Premier pas d\\'ancrage<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.loadBefore !== null && state.loadAfter !== null) {\n const diff = state.loadBefore - state.loadAfter;\n let evoText = '';\n if (diff > 0) evoText = 'La charge ressentie a <strong style=\"color: var(--accent);\">diminu\u00e9 de ' + diff + ' point' + (diff > 1 ? 's' : '') + '<\/strong> apr\u00e8s ce travail. C\\'est pr\u00e9cieux \u00e0 noter.';\n else if (diff === 0) evoText = 'La charge est rest\u00e9e <strong>stable<\/strong>. Prendre ce temps compte d\u00e9j\u00e0.';\n else evoText = 'La charge a <strong>augment\u00e9<\/strong> de ' + Math.abs(diff) + ' point' + (Math.abs(diff) > 1 ? 's' : '') + '. Mettre des mots sur une transition peut raviver temporairement la tension \u2014 c\\'est humain. Allez-y en douceur.';\n\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udcca \u00c9volution de la charge ressentie<\/h3>' +\n '<p>Avant : <strong>' + state.loadBefore + '\/10<\/strong> \u00b7 Apr\u00e8s : <strong>' + state.loadAfter + '\/10<\/strong><\/p>' +\n '<p style=\"margin-top: 8px;\">' + evoText + '<\/p>' +\n '<\/div>'\n );\n }\n\n if (blocks.length === 0) {\n return '<p style=\"text-align: center; color: var(--muted); font-style: italic;\">Vous n\\'avez encore rien not\u00e9. Revenez en arri\u00e8re pour compl\u00e9ter quelques \u00e9tapes \u2014 \u00e0 votre rythme.<\/p>';\n }\n\n return blocks.join('');\n }\n\n function showSummary() {\n state.completed = true;\n summaryContent.innerHTML = buildSummaryHtml();\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n summarySection.classList.add('active');\n progressWrapper.style.display = 'none';\n progressLabel.textContent = 'Synth\u00e8se';\n progressPercent.textContent = '100%';\n progressFill.style.width = '100%';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n saveState();\n }\n\n function printSummary() {\n try {\n if (typeof window.print === 'function') {\n window.print();\n } else {\n throw new Error('window.print non disponible');\n }\n } catch (err) {\n console.warn('Impression non disponible :', err);\n alert('L\\'impression n\\'est pas disponible dans cet environnement.\\n\\nVous pouvez utiliser la fonction \"T\u00e9l\u00e9charger\" pour sauvegarder votre synth\u00e8se.');\n }\n }\n\n function buildPlainTextSummary() {\n let t = '\ud83e\udded TRAVERSER UNE TRANSITION DE VIE\\n';\n t += '================================================\\n';\n t += 'Outil JIRIS \u2014 Justice \u00b7 Inclusion \u00b7 R\u00e9int\u00e9gration \u00b7 Innovation Sociale\\n\\n';\n\n t += '\u26a0\ufe0f RAPPEL\\n';\n t += 'Cet outil ne remplace pas un accompagnement psychologique, social ou administratif.\\n';\n t += 'Ressources : 811 Info-Social \u00b7 988 pr\u00e9vention du suicide \u00b7 911 en urgence\\n\\n';\n\n if (state.transitionType.length > 0 || state.situation || state.duration || state.loadBefore !== null) {\n t += '\ud83c\udf0d LA TRANSITION\\n';\n if (state.transitionType.length > 0) t += 'Type : ' + state.transitionType.join(', ') + '\\n';\n if (state.situation) t += state.situation + '\\n';\n if (state.duration) t += 'Depuis : ' + state.duration + '\\n';\n if (state.loadBefore !== null) t += 'Charge ressentie : ' + state.loadBefore + '\/10\\n';\n t += '\\n';\n }\n\n if (state.left.length > 0 || state.leftText || state.griefExpression || state.lostIdentity) {\n t += '\ud83c\udf42 CE QUI A \u00c9T\u00c9 QUITT\u00c9\\n';\n state.left.forEach((l, i) => t += (i + 1) + '. ' + l + '\\n');\n if (state.leftText) t += state.leftText + '\\n';\n if (state.griefExpression) t += 'Ce que je porte parfois sans le dire : ' + state.griefExpression + '\\n';\n if (state.lostIdentity) t += 'Identit\u00e9 en suspens : ' + state.lostIdentity + '\\n';\n t += '\\n';\n }\n\n if (state.build.length > 0 || state.buildText || state.kept || state.newPossibilities) {\n t += '\ud83c\udf31 CE QUI EST \u00c0 CONSTRUIRE\\n';\n state.build.forEach((b, i) => t += (i + 1) + '. ' + b + '\\n');\n if (state.buildText) t += state.buildText + '\\n';\n if (state.kept) t += 'Ce que je veux garder : ' + state.kept + '\\n';\n if (state.newPossibilities) t += 'Ce qui s\\'ouvre : ' + state.newPossibilities + '\\n';\n t += '\\n';\n }\n\n if (state.needs.length > 0 || state.needText || state.identityQuestion || state.meaning || state.belonging) {\n t += '\ud83c\udf3f BESOINS PROFONDS\\n';\n if (state.needs.length > 0) t += 'Besoins identifi\u00e9s : ' + state.needs.join(', ') + '\\n';\n if (state.needText) t += state.needText + '\\n';\n if (state.identityQuestion) t += 'Qui je suis, ici, maintenant : ' + state.identityQuestion + '\\n';\n if (state.meaning) t += 'Ce qui donne du sens : ' + state.meaning + '\\n';\n if (state.belonging) t += 'O\u00f9 je me sens un peu chez moi : ' + state.belonging + '\\n';\n t += '\\n';\n }\n\n if (state.resources.length > 0 || state.chosenResources || state.personalSupport || state.obstacles) {\n t += '\ud83e\udd1d RESSOURCES\\n';\n state.resources.forEach((r, i) => t += (i + 1) + '. ' + r + '\\n');\n if (state.chosenResources) t += '\u00c0 explorer en priorit\u00e9 : ' + state.chosenResources + '\\n';\n if (state.personalSupport) t += 'Sur qui je peux compter : ' + state.personalSupport + '\\n';\n if (state.obstacles) t += 'Obstacles possibles : ' + state.obstacles + '\\n';\n t += '\\n';\n }\n\n if (state.firstStep || state.whenStep || state.supportStep || state.ifHard) {\n t += '\ud83d\udc63 PREMIER PAS D\\'ANCRAGE\\n';\n if (state.firstStep) t += 'Mon premier pas : ' + state.firstStep + '\\n';\n if (state.whenStep) t += 'Quand : ' + state.whenStep + '\\n';\n if (state.supportStep) t += 'Soutien pr\u00e9vu : ' + state.supportStep + '\\n';\n if (state.ifHard) t += 'Si c\\'est difficile : ' + state.ifHard + '\\n';\n t += '\\n';\n }\n\n if (state.loadBefore !== null && state.loadAfter !== null) {\n t += '\ud83d\udcca \u00c9VOLUTION DE LA CHARGE RESSENTIE\\n';\n t += 'Avant : ' + state.loadBefore + '\/10 \u00b7 Apr\u00e8s : ' + state.loadAfter + '\/10\\n\\n';\n }\n\n t += '================================================\\n';\n t += 'G\u00e9n\u00e9r\u00e9 le ' + new Date().toLocaleDateString('fr-CA', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }) + '\\n';\n t += 'Cet outil ne pose aucun diagnostic et ne remplace pas un accompagnement professionnel.';\n\n return t;\n }\n\n function downloadSummary() {\n const text = buildPlainTextSummary();\n const filename = 'transition-vie-jiris-' + new Date().toISOString().slice(0, 10) + '.txt';\n\n try {\n const blob = new Blob([text], { type: 'text\/plain;charset=utf-8' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n a.style.display = 'none';\n document.body.appendChild(a);\n a.click();\n setTimeout(() => {\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }, 500);\n console.log('\u2705 T\u00e9l\u00e9chargement lanc\u00e9 via Blob');\n return;\n } catch (err1) {\n console.warn('M\u00e9thode Blob \u00e9chou\u00e9e :', err1);\n }\n\n try {\n const dataUri = 'data:text\/plain;charset=utf-8,' + encodeURIComponent(text);\n const a = document.createElement('a');\n a.href = dataUri;\n a.download = filename;\n a.style.display = 'none';\n document.body.appendChild(a);\n a.click();\n setTimeout(() => document.body.removeChild(a), 500);\n console.log('\u2705 T\u00e9l\u00e9chargement lanc\u00e9 via data URI');\n return;\n } catch (err2) {\n console.warn('M\u00e9thode data URI \u00e9chou\u00e9e :', err2);\n }\n\n try {\n const blob = new Blob([text], { type: 'text\/plain;charset=utf-8' });\n const url = URL.createObjectURL(blob);\n const newWindow = window.open(url, '_blank');\n if (!newWindow) throw new Error('Popup bloqu\u00e9e');\n console.log('\u2705 Ouverture dans un nouvel onglet');\n return;\n } catch (err3) {\n console.warn('Ouverture nouvel onglet \u00e9chou\u00e9e :', err3);\n }\n\n alert('Le t\u00e9l\u00e9chargement automatique n\\'est pas disponible dans cet environnement.\\n\\nLe texte de votre synth\u00e8se va s\\'afficher dans une nouvelle fen\u00eatre.');\n const w = window.open('', '_blank');\n if (w) {\n w.document.write('<pre style=\"font-family: monospace; white-space: pre-wrap; padding: 20px; line-height: 1.5;\">' + escapeHtml(text) + '<\/pre>');\n w.document.title = 'Synth\u00e8se \u2014 Traverser une transition de vie';\n }\n }\n\n function restart() {\n if (!confirm('Effacer toutes vos r\u00e9ponses et recommencer ?')) return;\n try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}\n Object.keys(state).forEach(k => {\n if (k === 'transitionType' || k === 'left' || k === 'build' || k === 'needs' || k === 'resources') state[k] = [];\n else if (k === 'loadBefore' || k === 'loadAfter') state[k] = null;\n else if (k === 'completed') state[k] = false;\n else if (k === 'currentStep') state[k] = 0;\n else state[k] = '';\n });\n saveState();\n location.reload();\n }\n\n function updateIntroForCompleted() {\n const notice = document.getElementById('completedNotice');\n const startBtn = document.getElementById('startBtn');\n const reviewBtn = document.getElementById('reviewBtn');\n const resetBtn = document.getElementById('resetBtn');\n\n if (state.completed) {\n if (notice) notice.style.display = 'flex';\n if (startBtn) startBtn.style.display = 'none';\n if (reviewBtn) reviewBtn.style.display = 'inline-flex';\n if (resetBtn) resetBtn.textContent = '\ud83d\udd04 Recommencer une nouvelle exploration';\n } else {\n if (notice) notice.style.display = 'none';\n if (startBtn) startBtn.style.display = 'inline-flex';\n if (reviewBtn) reviewBtn.style.display = 'none';\n if (resetBtn) resetBtn.textContent = 'R\u00e9initialiser';\n }\n }\n\n function init() {\n const hasSaved = loadState();\n fillInputs();\n bindInputs();\n\n renderLoadChips('loadChips', 'loadBefore');\n renderLoadChips('loadChipsAfter', 'loadAfter');\n renderChipsRow('transitionTypeChips', 'transitionType', TRANSITION_TYPE_LIST);\n renderMultiGrid('leftGrid', 'left', LEFT_LIST);\n renderMultiGrid('buildGrid', 'build', BUILD_LIST);\n renderChipsRow('needsChips', 'needs', NEEDS_LIST);\n renderMultiGrid('resourcesGrid', 'resources', RESOURCES_LIST);\n\n const printBtn = document.getElementById('printBtn');\n const downloadBtn = document.getElementById('downloadBtn');\n const restartBtn = document.getElementById('restartBtn');\n const reviewBtn = document.getElementById('reviewBtn');\n\n if (printBtn) {\n printBtn.addEventListener('click', function (e) {\n e.preventDefault();\n printSummary();\n });\n }\n if (downloadBtn) {\n downloadBtn.addEventListener('click', function (e) {\n e.preventDefault();\n downloadSummary();\n });\n }\n if (restartBtn) {\n restartBtn.addEventListener('click', function (e) {\n e.preventDefault();\n restart();\n });\n }\n if (reviewBtn) {\n reviewBtn.addEventListener('click', function (e) {\n e.preventDefault();\n showSummary();\n });\n }\n\n const startBtn = document.getElementById('startBtn');\n const resetBtn = document.getElementById('resetBtn');\n if (startBtn) {\n startBtn.addEventListener('click', function () {\n if (hasSaved && state.currentStep > 0 && state.currentStep <= TOTAL_STEPS) {\n goToStep(state.currentStep);\n } else {\n goToStep(1);\n }\n });\n }\n if (resetBtn) {\n resetBtn.addEventListener('click', restart);\n }\n\n document.querySelectorAll('[data-action]').forEach(btn => {\n btn.addEventListener('click', function () {\n const action = this.dataset.action;\n const target = this.dataset.target;\n if (action === 'intro') goToIntro();\n else if (action === 'step') goToStep(parseInt(target, 10));\n else if (action === 'summary') showSummary();\n });\n });\n\n if (state.completed) {\n updateIntroForCompleted();\n } else if (hasSaved && state.currentStep > 0 && state.currentStep <= TOTAL_STEPS && startBtn) {\n startBtn.textContent = 'Reprendre en douceur \u2192';\n }\n\n console.log('\u2705 Outil \u00ab Traverser une transition de vie \u00bb initialis\u00e9');\n }\n\n window.jirisTransitionVie = {\n state,\n goToStep,\n showSummary,\n printSummary,\n downloadSummary,\n restart\n };\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n})();\n<\/script>\n\n<\/body>\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>Traverser une tansition de vie Traverser une transition de vie \u2014 Outil d’accompagnement JIRIS \ud83e\udded Traverser une transition de vie Un outil d’accompagnement pour habiter les grands changements \u2014 immigration, retraite, expatriation \u2014 avec plus de douceur, de clart\u00e9 et d’ancrage. Avant de commencer \u26a0\ufe0f Une transition n’est pas un simple \u00ab avant\/apr\u00e8s \u00bb Immigrer, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"iawp_total_views":0,"footnotes":""},"class_list":["post-3538","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/comments?post=3538"}],"version-history":[{"count":8,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3538\/revisions"}],"predecessor-version":[{"id":3546,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3538\/revisions\/3546"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=3538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}