Explorer mes possibilit\u00e9s \u00b7 Hub JIRIS<\/title>\n\n<style>\n:root{\n--bg:#f4f7fa;\n--surface:#ffffff;\n--ink:#1b2f3d;\n--ink-soft:#55677a;\n--line:#e4ecf3;\n--primary:#3d7ea6;\n--primary-dark:#2c6288;\n--primary-soft:#eef5fa;\n--radius:16px;\n--radius-lg:24px;\n--shadow-sm:0 2px 8px rgba(29,54,74,.06);\n--shadow-md:0 12px 30px rgba(29,54,74,.08);\n--shadow-hover:0 16px 40px rgba(29,54,74,.12);\n}\n\n*,*::before,*::after{box-sizing:border-box;}\n\nbody{\nmargin:0;\nfont-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\nbackground:#ffffff;\ncolor:var(--ink);\nline-height:1.65;\n-webkit-font-smoothing:antialiased;\ntext-rendering:optimizeLegibility;\n}\n\n.wrap{\nmax-width:960px;\nmargin:0 auto;\npadding:0 20px;\n}\n\n.wrap-narrow{\nmax-width:800px;\nmargin:0 auto;\npadding:0 20px;\n}\n\n\/* Cadre principal de l'interface *\/\n.hub-shell{\nmax-width:1000px;\nmargin:24px auto;\nbackground:var(--bg);\nborder-radius:24px;\noverflow:hidden;\n}\n\n@media(max-width:520px){\n.hub-shell{\nmargin:12px 0;\nborder-radius:18px;\n}\n}\n\n\/* Vues *\/\n.hub-view{display:none;}\n.hub-view.active{display:block;}\n.tool-view{display:none;}\n.tool-view.active{display:block;}\n\n\/* HUB *\/\nheader.hub-head{\nposition:relative;\nbackground:linear-gradient(180deg,#fbfdff 0%,var(--bg) 100%);\npadding:50px 0 30px;\nborder-bottom:1px solid var(--line);\ntext-align:center;\n}\n\n\/* ---------- Bouton \u00ab Retour au hub \u00bb ---------- *\/\n.back-to-hub{\nposition:absolute;\ntop:20px;\nleft:20px;\ndisplay:inline-flex;\nalign-items:center;\ngap:8px;\npadding:8px 16px;\nfont-size:.85rem;\nfont-weight:600;\ncolor:var(--primary-dark);\nbackground:var(--surface);\nborder:1px solid #dbe8f1;\nborder-radius:999px;\ntext-decoration:none;\nbox-shadow:var(--shadow-sm);\ncursor:pointer;\ntransition:background .2s ease,border-color .2s ease,transform .2s ease;\nz-index:5;\n}\n.back-to-hub:hover,\n.back-to-hub:focus-visible{\nbackground:var(--primary-soft);\nborder-color:#c3ddec;\ntransform:translateX(-2px);\n}\n.back-to-hub:focus-visible{\noutline:3px solid rgba(61,126,166,.35);\noutline-offset:3px;\n}\n\nheader.hub-head h1{\nmargin:0 0 12px;\nfont-size:clamp(2rem,4vw,2.6rem);\nfont-weight:800;\ncolor:var(--ink);\nletter-spacing:-0.02em;\n}\n\nheader.hub-head p{\nmargin:0 auto;\nmax-width:640px;\nfont-size:1.05rem;\ncolor:var(--ink-soft);\n}\n\n.hub-head p + p{\nmargin-top:12px;\n}\n\nmain.hub-main{\npadding:45px 0 60px;\n}\n\n.grid{\ndisplay:grid;\ngrid-template-columns:repeat(auto-fit,minmax(420px,1fr));\ngap:24px;\n}\n\n@media(max-width:520px){\n.grid{\ngrid-template-columns:1fr;\n}\n}\n\n.card{\nbackground:var(--surface);\nborder:1px solid var(--line);\nborder-radius:var(--radius-lg);\npadding:32px;\nbox-shadow:var(--shadow-sm);\ntransition:all .25s ease;\ndisplay:flex;\nflex-direction:column;\njustify-content:space-between;\nposition:relative;\noverflow:hidden;\ntext-decoration:none;\ncolor:inherit;\n}\n\n.card:hover{\ntransform:translateY(-4px);\nbox-shadow:var(--shadow-hover);\nborder-color:#cbdceb;\n}\n\n.card-tag{\ndisplay:inline-block;\nmargin-bottom:14px;\npadding:5px 14px;\nfont-size:.78rem;\nfont-weight:700;\ntext-transform:uppercase;\nletter-spacing:0.04em;\nborder-radius:999px;\n}\n\n.card h2{\nmargin:0 0 10px;\nfont-size:1.35rem;\nfont-weight:750;\ncolor:var(--ink);\n}\n\n.card p{\nmargin:0 0 24px;\nfont-size:.95rem;\ncolor:var(--ink-soft);\nline-height:1.6;\n}\n\n.card-footer{\ndisplay:flex;\nalign-items:center;\njustify-content:space-between;\npadding-top:20px;\nborder-top:1px solid var(--line);\n}\n\n.card-meta{\nfont-size:.82rem;\nfont-weight:600;\ncolor:var(--ink-soft);\n}\n\n.btn{\ndisplay:inline-flex;\nalign-items:center;\ngap:8px;\npadding:10px 20px;\nfont-family:inherit;\nfont-size:.9rem;\nfont-weight:650;\nborder-radius:10px;\ntext-decoration:none;\ntransition:background .2s ease;\nborder:none;\ncursor:pointer;\n}\n\n.card.t-green .card-tag{\ncolor:#275f47;\nbackground:#e9f6f0;\n}\n\n.card.t-green .btn{\nbackground:#3f9a72;\ncolor:#fff;\n}\n\n.card.t-green .btn:hover{\nbackground:#368a64;\n}\n\n.card.t-blue .card-tag{\ncolor:#2c6288;\nbackground:#eef5fa;\n}\n\n.card.t-blue .btn{\nbackground:#3d7ea6;\ncolor:#fff;\n}\n\n.card.t-blue .btn:hover{\nbackground:#2c6288;\n}\n\n.card.t-purple .card-tag{\ncolor:#6b4f96;\nbackground:#f2eef9;\n}\n\n.card.t-purple .btn{\nbackground:#8163b0;\ncolor:#fff;\n}\n\n.card.t-purple .btn:hover{\nbackground:#6b4f96;\n}\n\n.card.t-orange .card-tag{\ncolor:#b85e23;\nbackground:#fef3ec;\n}\n\n.card.t-orange .btn{\nbackground:#d97736;\ncolor:#fff;\n}\n\n.card.t-orange .btn:hover{\nbackground:#b85e23;\n}\n\nfooter.hub-foot{\nmargin-top:20px;\npadding:30px 20px 50px;\ntext-align:center;\nfont-size:.86rem;\ncolor:#7b8b9b;\nborder-top:1px solid var(--line);\n}\n\n\/* OUTILS *\/\n.tool-view[data-tool=\"voix\"]{\n--accent:#3f9a72;\n--accent-dark:#2f7e5c;\n--accent-soft:#e9f6f0;\n--accent-ring:rgba(63,154,114,.35);\n}\n\n.tool-view[data-tool=\"clarifier\"]{\n--accent:#3d7ea6;\n--accent-dark:#2c6288;\n--accent-soft:#eef5fa;\n--accent-ring:rgba(61,126,166,.35);\n}\n\n.tool-view[data-tool=\"voie\"]{\n--accent:#8163b0;\n--accent-dark:#6b4f96;\n--accent-soft:#f2eef9;\n--accent-ring:rgba(129,99,176,.35);\n}\n\n.tool-view[data-tool=\"forces\"]{\n--accent:#d97736;\n--accent-dark:#b85e23;\n--accent-soft:#fef3ec;\n--accent-ring:rgba(217,119,54,.35);\n}\n\n.tool-topbar{\nbackground:linear-gradient(180deg,#fbfdff 0%,var(--bg) 100%);\nborder-bottom:1px solid var(--line);\npadding:22px 0 0;\n}\n\n.back-link{\ndisplay:inline-flex;\nalign-items:center;\ngap:8px;\npadding:8px 16px;\nfont-size:.88rem;\nfont-weight:600;\ncolor:var(--primary-dark);\nbackground:var(--surface);\nborder:1px solid #dbe8f1;\nborder-radius:999px;\ntext-decoration:none;\nbox-shadow:var(--shadow-sm);\ncursor:pointer;\ntransition:background .2s ease,border-color .2s ease,transform .2s ease;\n}\n\n.back-link:hover,\n.back-link:focus-visible{\nbackground:var(--primary-soft);\nborder-color:#c3ddec;\ntransform:translateX(-2px);\n}\n\n.back-link:focus-visible{\noutline:3px solid var(--accent-ring);\noutline-offset:3px;\n}\n\n.tool-head{\npadding:22px 0 26px;\n}\n\n.tool-head h1{\nmargin:0 0 8px;\nfont-size:clamp(1.5rem,3.4vw,1.95rem);\nline-height:1.25;\nletter-spacing:-.02em;\nfont-weight:750;\ncolor:var(--ink);\n}\n\n.tool-head p{\nmargin:0;\nmax-width:640px;\nfont-size:.98rem;\ncolor:var(--ink-soft);\n}\n\n.progress{\nposition:sticky;\ntop:0;\nz-index:10;\nbackground:rgba(244,247,250,.92);\nbackdrop-filter:blur(8px);\n-webkit-backdrop-filter:blur(8px);\nborder-bottom:1px solid var(--line);\npadding:14px 0 16px;\n}\n\n.progress-inner{\ndisplay:flex;\nalign-items:center;\ngap:14px;\n}\n\n.progress-track{\nflex:1;\nheight:6px;\nbackground:#e2ebf2;\nborder-radius:999px;\noverflow:hidden;\n}\n\n.progress-fill{\nheight:100%;\nwidth:0;\nbackground:linear-gradient(90deg,var(--accent),var(--accent-soft));\nborder-radius:999px;\ntransition:width .35s ease;\n}\n\n.progress-label{\nfont-size:.82rem;\nfont-weight:600;\ncolor:var(--ink-soft);\nwhite-space:nowrap;\nletter-spacing:.02em;\n}\n\nmain.tool-main{\npadding:32px 0 0;\n}\n\n.step{\nbackground:var(--surface);\nborder:1px solid var(--line);\nborder-radius:var(--radius-lg);\npadding:clamp(22px,4vw,34px);\nbox-shadow:var(--shadow-sm);\nanimation:fade-in .3s ease;\n}\n\n.step.hidden{\ndisplay:none;\n}\n\n@keyframes fade-in{\nfrom{\nopacity:0;\ntransform:translateY(6px);\n}\nto{\nopacity:1;\ntransform:translateY(0);\n}\n}\n\n.step h2{\nmargin:0 0 6px;\nfont-size:1.22rem;\nfont-weight:700;\nletter-spacing:-.01em;\ncolor:var(--ink);\n}\n\n.step .step-intro{\nmargin:0 0 22px;\nfont-size:.95rem;\ncolor:var(--ink-soft);\n}\n\n.field{\nmargin-bottom:18px;\n}\n\n.field:last-child{\nmargin-bottom:0;\n}\n\n.field label,\n.step > label{\ndisplay:block;\nmargin-bottom:7px;\nfont-size:.92rem;\nfont-weight:600;\ncolor:var(--ink);\n}\n\nlabel .opt{\nfont-weight:400;\nfont-size:.82rem;\ncolor:#8b9aa9;\nmargin-left:4px;\n}\n\ninput[type=\"text\"],\ntextarea,\nselect{\nwidth:100%;\npadding:11px 14px;\nfont-family:inherit;\nfont-size:.95rem;\ncolor:var(--ink);\nbackground:#fbfdff;\nborder:1px solid #d8e3ec;\nborder-radius:10px;\ntransition:border-color .18s ease,background .18s ease,box-shadow .18s ease;\n}\n\ninput[type=\"text\"]::placeholder,\ntextarea::placeholder{\ncolor:#9aacbc;\n}\n\ninput[type=\"text\"]:focus,\ntextarea:focus,\nselect:focus{\noutline:none;\nbackground:#fff;\nborder-color:var(--accent);\nbox-shadow:0 0 0 3px var(--accent-ring);\n}\n\ntextarea{\nmin-height:88px;\nresize:vertical;\nline-height:1.55;\n}\n\nselect{\nappearance:none;\nbackground-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7b8c' d='M6 8 0 0h12z'\/><\/svg>\");\nbackground-repeat:no-repeat;\nbackground-position:right 14px center;\npadding-right:38px;\ncursor:pointer;\n}\n\n.choices{\ndisplay:grid;\ngap:10px;\nmargin-bottom:18px;\n}\n\n.choices--inline{\ngrid-template-columns:repeat(auto-fit,minmax(180px,1fr));\n}\n\n.choice{\nposition:relative;\ndisplay:flex;\nalign-items:flex-start;\ngap:12px;\npadding:13px 16px;\nbackground:#fbfdff;\nborder:1px solid #d8e3ec;\nborder-radius:12px;\ncursor:pointer;\nfont-size:.94rem;\nfont-weight:500;\ncolor:var(--ink);\ntransition:border-color .18s ease,background .18s ease,box-shadow .18s ease;\n}\n\n.choice:hover{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.choice input{\nposition:absolute;\nopacity:0;\npointer-events:none;\n}\n\n.choice .box{\nflex:0 0 20px;\nwidth:20px;\nheight:20px;\nmargin-top:1px;\nborder:2px solid #c3d3e0;\nborder-radius:6px;\nbackground:#fff;\ndisplay:grid;\nplace-items:center;\ntransition:background .18s ease,border-color .18s ease;\n}\n\n.choice .box::after{\ncontent:\"\";\nwidth:10px;\nheight:10px;\nborder-radius:3px;\nbackground:#fff;\ntransform:scale(0);\ntransition:transform .18s ease;\n}\n\n.choice input[type=\"radio\"] + .box{\nborder-radius:50%;\n}\n\n.choice input[type=\"radio\"] + .box::after{\nborder-radius:50%;\n}\n\n.choice input:checked + .box{\nbackground:var(--accent);\nborder-color:var(--accent);\n}\n\n.choice input:checked + .box::after{\ntransform:scale(1);\n}\n\n.choice:has(input:checked){\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.choice input:focus-visible + .box{\nbox-shadow:0 0 0 3px var(--accent-ring);\n}\n\n.open-question,\n.option-block,\n.thought-block{\npadding:20px;\nmargin-bottom:18px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-radius:14px;\ntransition:border-color .2s ease,background .2s ease;\n}\n\n.open-question:focus-within,\n.option-block:focus-within,\n.thought-block:focus-within{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.block-title{\ndisplay:inline-block;\nmargin:0 0 14px;\npadding:4px 12px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.06em;\ntext-transform:uppercase;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:999px;\n}\n\n.option-block .field:last-child,\n.thought-block .field:last-child,\n.open-question .field:last-child{\nmargin-bottom:0;\n}\n\n.q-head{\ndisplay:flex;\nalign-items:flex-start;\ngap:12px;\nmargin-bottom:12px;\n}\n\n.q-num{\nflex:0 0 auto;\ndisplay:grid;\nplace-items:center;\nwidth:28px;\nheight:28px;\nfont-size:.82rem;\nfont-weight:700;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:50%;\nmargin-top:1px;\n}\n\n.q-text{\nmargin:0;\nfont-size:.95rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.5;\n}\n\n.opt-title{\ndisplay:flex;\nalign-items:center;\ngap:10px;\nmargin:0 0 14px;\nfont-size:1rem;\nfont-weight:700;\ncolor:var(--ink);\n}\n\n.opt-title .opt-num{\ndisplay:grid;\nplace-items:center;\nwidth:26px;\nheight:26px;\nfont-size:.82rem;\nfont-weight:700;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:50%;\nflex:0 0 auto;\n}\n\n.paths-list{\ndisplay:grid;\ngap:12px;\nmargin-bottom:18px;\n}\n\n.path-option{\nposition:relative;\ndisplay:block;\npadding:18px 20px 18px 56px;\nbackground:#fbfdff;\nborder:1px solid #d8e3ec;\nborder-radius:14px;\ncursor:pointer;\ntransition:border-color .18s ease,background .18s ease,box-shadow .18s ease;\n}\n\n.path-option:hover{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.path-option input{\nposition:absolute;\nopacity:0;\npointer-events:none;\n}\n\n.path-option .radio-dot{\nposition:absolute;\nleft:20px;\ntop:22px;\nwidth:22px;\nheight:22px;\nborder:2px solid #c3d3e0;\nborder-radius:50%;\nbackground:#fff;\ntransition:background .18s ease,border-color .18s ease,box-shadow .18s ease;\n}\n\n.path-option .radio-dot::after{\ncontent:\"\";\nposition:absolute;\ntop:50%;\nleft:50%;\nwidth:10px;\nheight:10px;\nborder-radius:50%;\nbackground:#fff;\ntransform:translate(-50%,-50%) scale(0);\ntransition:transform .18s ease;\n}\n\n.path-option input:checked ~ .radio-dot{\nbackground:var(--accent);\nborder-color:var(--accent);\n}\n\n.path-option input:checked ~ .radio-dot::after{\ntransform:translate(-50%,-50%) scale(1);\n}\n\n.path-option:has(input:checked){\nborder-color:var(--accent);\nbackground:var(--accent-soft);\nbox-shadow:0 4px 14px var(--accent-ring);\n}\n\n.path-option input:focus-visible ~ .radio-dot{\nbox-shadow:0 0 0 3px var(--accent-ring);\n}\n\n.path-option .path-q{\ndisplay:block;\nmargin-bottom:6px;\nfont-size:.74rem;\nfont-weight:700;\nletter-spacing:.06em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.path-option .path-a{\ndisplay:block;\nfont-size:.96rem;\ncolor:var(--ink);\nline-height:1.55;\nfont-weight:500;\n}\n\n.path-option.path-other .path-a{\ncolor:var(--ink-soft);\nfont-style:italic;\nfont-weight:400;\n}\n\n.hint{\ndisplay:none;\nmargin-top:16px;\npadding:12px 16px;\nfont-size:.89rem;\ncolor:#8a5a1f;\nbackground:#fdf3e2;\nborder:1px solid #f0dcb4;\nborder-radius:10px;\n}\n\n.hint.show{\ndisplay:block;\nanimation:fade-in .25s ease;\n}\n\n.hint--info{\ncolor:var(--accent-dark);\nbackground:var(--accent-soft);\nborder-color:var(--accent-ring);\n}\n\n.actions{\ndisplay:flex;\nflex-wrap:wrap;\ngap:12px;\nmargin-top:26px;\npadding-top:22px;\nborder-top:1px solid var(--line);\n}\n\n.actions .spacer{\nflex:1;\n}\n\n.btn-ghost{\ndisplay:inline-flex;\nalign-items:center;\njustify-content:center;\ngap:8px;\npadding:12px 24px;\nfont-family:inherit;\nfont-size:.95rem;\nfont-weight:650;\nborder-radius:10px;\ncursor:pointer;\ntext-decoration:none;\nbackground:#fff;\ncolor:var(--ink-soft);\nborder:1px solid #d8e3ec;\ntransition:background .18s ease,color .18s ease,border-color .18s ease;\n}\n\n.btn-ghost:hover{\nbackground:#f6fafd;\ncolor:var(--ink);\nborder-color:#c3d9e8;\n}\n\n.btn-primary{\ndisplay:inline-flex;\nalign-items:center;\njustify-content:center;\ngap:8px;\npadding:12px 24px;\nfont-family:inherit;\nfont-size:.95rem;\nfont-weight:650;\nborder-radius:10px;\ncursor:pointer;\ntext-decoration:none;\nborder:none;\nbackground:var(--accent);\ncolor:#fff;\nbox-shadow:0 4px 12px var(--accent-ring);\ntransition:background .18s ease,transform .18s ease,box-shadow .18s ease;\n}\n\n.btn-primary:hover{\nbackground:var(--accent-dark);\ntransform:translateY(-1px);\nbox-shadow:0 8px 18px var(--accent-ring);\n}\n\n.btn-primary:focus-visible,\n.btn-ghost:focus-visible{\noutline:3px solid var(--accent-ring);\noutline-offset:2px;\n}\n\n.result{\ndisplay:none;\nmargin-top:26px;\nbackground:var(--surface);\nborder:1px solid var(--line);\nborder-radius:var(--radius-lg);\nbox-shadow:var(--shadow-md);\noverflow:hidden;\nanimation:fade-in .35s ease;\n}\n\n.result.show{\ndisplay:block;\n}\n\n.result-head{\npadding:26px clamp(22px,4vw,34px) 22px;\nbackground:linear-gradient(135deg,var(--accent-soft),#fff);\nborder-bottom:1px solid var(--line);\n}\n\n.result-head h2{\nmargin:0 0 6px;\nfont-size:1.28rem;\nfont-weight:750;\ncolor:var(--accent-dark);\nletter-spacing:-.01em;\n}\n\n.result-head p{\nmargin:0;\nfont-size:.92rem;\ncolor:var(--ink-soft);\n}\n\n.result-body{\npadding:clamp(22px,4vw,32px);\n}\n\n.result-section{\nmargin-bottom:26px;\n}\n\n.result-section:last-child{\nmargin-bottom:0;\n}\n\n.result-section h3{\nmargin:0 0 12px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.08em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.result-section p{\nmargin:0;\nfont-size:.96rem;\ncolor:var(--ink-soft);\nline-height:1.7;\n}\n\n.result-section p strong{\ncolor:var(--ink);\n}\n\n.chips{\ndisplay:flex;\nflex-wrap:wrap;\ngap:8px;\nmargin-top:4px;\n}\n\n.chip{\ndisplay:inline-block;\npadding:5px 13px;\nfont-size:.84rem;\nfont-weight:600;\ncolor:var(--accent-dark);\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:999px;\n}\n\n.card-highlight{\npadding:16px 20px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-left:4px solid var(--accent);\nborder-radius:0 12px 12px 0;\nfont-size:1rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.55;\nwhite-space:pre-line;\n}\n\n.card-quote{\npadding:18px 22px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-left:4px solid var(--accent);\nborder-radius:0 12px 12px 0;\nfont-size:.96rem;\ncolor:var(--ink);\nline-height:1.6;\nwhite-space:pre-line;\n}\n\n.card-action{\ndisplay:flex;\ngap:14px;\nalign-items:flex-start;\npadding:18px 20px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:14px;\n}\n\n.card-action .icon{\nflex:0 0 auto;\nfont-size:1.4rem;\nline-height:1;\n}\n\n.card-action .label{\nmargin:0 0 3px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.08em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.card-action .text{\nmargin:0;\nfont-size:1rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.5;\nwhite-space:pre-line;\n}\n\n.card-phare{\npadding:24px 26px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:16px;\ntext-align:center;\n}\n\n.card-phare .mark{\ndisplay:block;\nmargin-bottom:10px;\nfont-size:1.5rem;\nline-height:1;\ncolor:var(--accent);\n}\n\n.card-phare .phare-text{\nmargin:0;\nfont-size:1.08rem;\nfont-weight:650;\ncolor:var(--ink);\nfont-style:italic;\nline-height:1.55;\n}\n\n.thought-list,\n.explored-list{\nlist-style:none;\nmargin:0;\npadding:0;\ndisplay:grid;\ngap:10px;\n}\n\n.thought-list li,\n.explored-list li{\npadding:12px 16px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-radius:12px;\nfont-size:.92rem;\ncolor:var(--ink-soft);\nline-height:1.55;\n}\n\n.thought-list li strong{\ncolor:var(--ink);\nfont-weight:600;\n}\n\n.thought-list .origin-tag{\ndisplay:inline-block;\nmargin-left:6px;\npadding:1px 9px;\nfont-size:.75rem;\nfont-weight:700;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:999px;\n}\n\n.explored-list .q-label,\n.q-label{\ndisplay:block;\nmargin-bottom:4px;\nfont-size:.76rem;\nfont-weight:700;\nletter-spacing:.06em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.either-or-card{\npadding:16px 20px;\nbackground:var(--accent-soft);\nborder:1px dashed var(--accent-ring);\nborder-radius:12px;\nfont-size:.95rem;\nfont-style:italic;\ncolor:var(--accent-dark);\nline-height:1.55;\n}\n\n.question-shift{\ndisplay:grid;\ngap:10px;\n}\n\n.question-shift .shift-item{\ndisplay:flex;\ngap:12px;\nalign-items:flex-start;\npadding:14px 18px;\nborder-radius:12px;\nfont-size:.95rem;\nline-height:1.55;\n}\n\n.question-shift .shift-item.old{\nbackground:#f8fbfd;\nborder:1px solid var(--line);\ncolor:#7b8b9b;\ntext-decoration:line-through;\ntext-decoration-color:rgba(123,139,155,.4);\n}\n\n.question-shift .shift-item.new{\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\ncolor:var(--ink);\nfont-weight:600;\n}\n\n.question-shift .shift-item .mark{\nflex:0 0 auto;\nfont-size:1.05rem;\nline-height:1.4;\n}\n\n.options-summary{\ndisplay:grid;\ngap:12px;\n}\n\n.option-summary-item{\npadding:14px 18px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-radius:12px;\n}\n\n.option-summary-item .os-head{\ndisplay:flex;\nalign-items:center;\ngap:8px;\nmargin-bottom:8px;\nfont-weight:650;\ncolor:var(--ink);\nfont-size:.97rem;\n}\n\n.option-summary-item .os-head .dot{\nwidth:8px;\nheight:8px;\nborder-radius:50%;\nbackground:var(--accent);\nflex:0 0 auto;\n}\n\n.option-summary-item .os-line{\nfont-size:.88rem;\ncolor:var(--ink-soft);\nmargin:3px 0;\n}\n\n.option-summary-item .os-line .os-label{\ndisplay:inline-block;\nmin-width:78px;\nfont-weight:600;\ncolor:#7b8b9b;\nfont-size:.8rem;\ntext-transform:uppercase;\nletter-spacing:.04em;\n}\n\n.option-summary-item.aligned{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\nbox-shadow:0 4px 14px var(--accent-ring);\n}\n\n.option-summary-item.aligned .os-head .dot{\nbox-shadow:0 0 0 4px var(--accent-ring);\n}\n\n.aligned-badge{\ndisplay:inline-flex;\nalign-items:center;\ngap:6px;\nmargin-bottom:10px;\npadding:5px 14px;\nfont-size:.82rem;\nfont-weight:700;\nletter-spacing:.03em;\ncolor:#fff;\nbackground:var(--accent);\nborder-radius:999px;\nbox-shadow:0 4px 12px var(--accent-ring);\n}\n\n.path-card{\ndisplay:flex;\ngap:14px;\nalign-items:flex-start;\npadding:18px 20px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:14px;\n}\n\n.path-card .icon{\nflex:0 0 auto;\nfont-size:1.4rem;\nline-height:1;\n}\n\n.path-card .label{\nmargin:0 0 3px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.08em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.path-card .text{\nmargin:0;\nfont-size:1rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.5;\n}\n\n.path-card .origin{\ndisplay:block;\nmargin-top:6px;\nfont-size:.82rem;\nfont-style:italic;\ncolor:var(--ink-soft);\nfont-weight:400;\n}\n\n.closing-note{\nmargin:24px 0 0;\npadding:16px 20px;\nfont-size:.9rem;\nfont-style:italic;\ncolor:var(--ink-soft);\nbackground:#f8fbfd;\nborder-left:4px solid var(--accent-ring);\nborder-radius:0 12px 12px 0;\n}\n\n@media (max-width:520px){\nheader.hub-head{\npadding:36px 0 24px;\n}\n\n.back-to-hub{\ntop:12px;\nleft:12px;\npadding:6px 12px;\nfont-size:.78rem;\n}\n\nmain.hub-main{\npadding:28px 0 40px;\n}\n\n.card{\npadding:24px 20px;\n}\n\n.card-footer{\nflex-direction:column;\ngap:14px;\nalign-items:stretch;\n}\n\n.card-footer .btn{\njustify-content:center;\n}\n\n.tool-head{\npadding:16px 0 20px;\n}\n\n.step{\npadding:22px 18px;\n}\n\n.actions{\nflex-direction:column-reverse;\n}\n\n.actions .btn-ghost,\n.actions .btn-primary{\nwidth:100%;\n}\n\n.actions .spacer{\ndisplay:none;\n}\n\n.progress-label{\ndisplay:none;\n}\n\n.choices--inline{\ngrid-template-columns:1fr;\n}\n\n.path-option{\npadding:16px 16px 16px 50px;\n}\n\n.path-option .radio-dot{\nleft:16px;\ntop:19px;\n}\n}\n\n@media (prefers-reduced-motion:reduce){\n*{\ntransition:none !important;\nanimation:none !important;\n}\n\n.card:hover{\ntransform:none;\n}\n\n.btn-primary:hover,\n.btn-ghost:hover{\ntransform:none;\n}\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n\n<div id=\"view-hub\" class=\"hub-view active\">\n\n<div class=\"hub-shell\">\n\n<header class=\"hub-head\">\n\n<a href=\"https:\/\/jiris.ca\/ressources\/\" class=\"back-to-hub\" aria-label=\"Retour au hub de ressources\">\u2190 Retour au hub<\/a>\n\n<div class=\"wrap\">\n\n<h1>Explorer mes possibilit\u00e9s<\/h1>\n\n<p>Prendre un pas de recul pour clarifier o\u00f9 vous en \u00eates, identifier ce qui compte pour vous et ouvrir de nouvelles perspectives.<\/p>\n\n<p>\u00c0 votre rythme, explorez ce qui vous anime, clarifiez vos choix et appuyez-vous sur vos forces pour avancer avec plus de justesse.<\/p>\n\n<\/div>\n\n<\/header>\n\n<main class=\"hub-main wrap\">\n\n<div class=\"grid\">\n\n<a href=\"https:\/\/jiris.ca\/retrouver-ma-voix\/\" class=\"card t-green\">\n\n<div>\n\n<span class=\"card-tag\">Int\u00e9riorit\u00e9 & Alignement<\/span>\n\n<h2>\u2728 Retrouver ma voix<\/h2>\n\n<p>Distinguez ce qui vient profond\u00e9ment de vous (d\u00e9sirs, intuitions, valeurs) des pressions, des normes ou des attentes ext\u00e9rieures.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">4 \u00e9tapes \u00b7 3 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n\n<a href=\"https:\/\/jiris.ca\/fiche-clarifier-une-decision\/\" class=\"card t-blue\">\n\n<div>\n\n<span class=\"card-tag\">D\u00e9cision & Strat\u00e9gie<\/span>\n\n<h2>\ud83e\udded Clarifier une d\u00e9cision<\/h2>\n\n<p>Mettez \u00e0 plat une d\u00e9cision floue ou complexe, pesez vos options, reliez vos choix \u00e0 vos besoins et d\u00e9nouez les freins cach\u00e9s.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">5 \u00e9tapes \u00b7 5 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n\n<a href=\"https:\/\/jiris.ca\/fiche-et-si-une-autre-voie-etait-possible\/\" class=\"card t-purple\">\n\n<div>\n\n<span class=\"card-tag\">Cr\u00e9ativit\u00e9 & Horizon<\/span>\n\n<h2>\ud83d\udd2e Et si une autre voie \u00e9tait possible ?<\/h2>\n\n<p>Sortez des sentiers battus, imaginez des sc\u00e9narios audacieux et explorez des alternatives professionnelles ou personnelles inattendues.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">5 \u00e9tapes \u00b7 4 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n\n<a href=\"https:\/\/jiris.ca\/fiche-mes-forces-et-mes-ressources\/\" class=\"card t-orange\">\n\n<div>\n\n<span class=\"card-tag\">Ressources & Ancrage<\/span>\n\n<h2>\ud83c\udf1f Mes forces et mes ressources<\/h2>\n\n<p>Identifiez ce sur quoi vous pouvez d\u00e9j\u00e0 vous appuyer : forces personnelles, ressources externes, exp\u00e9riences pass\u00e9es et apprentissages.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">7 \u00e9tapes \u00b7 5 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n<\/div>\n\n<\/main>\n\n<footer class=\"hub-foot\">\n\n<\/footer>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div id=\"view-voix\" class=\"tool-view\" data-tool=\"voix\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83c\udf31 Retrouver ma voix<\/h1>\n\n<p>Aide-toi \u00e0 distinguer ce qui vient de toi (d\u00e9sirs, intuitions, valeurs) de ce qui vient des autres (attentes, pressions, normes).<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"vx-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"4\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"vx-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"vx-progress-label\">\u00c9tape 1 sur 4<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"vx-step1\">\n\n<h2>1. Cartographier les voix<\/h2>\n\n<p class=\"step-intro\">Quand tu penses \u00e0 une d\u00e9cision importante r\u00e9cente, quelles voix entends-tu en toi ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"Ma voix int\u00e9rieure\"><span class=\"box\"><\/span><span>Ma voix int\u00e9rieure <em style=\"font-style:normal;color:#8b9aa9;\">(ce que je ressens vraiment)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"La voix des proches\"><span class=\"box\"><\/span><span>La voix des proches <em style=\"font-style:normal;color:#8b9aa9;\">(famille, ami\u00b7e\u00b7s, conjoint\u00b7e)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"La voix de la soci\u00e9t\u00e9\"><span class=\"box\"><\/span><span>La voix de la soci\u00e9t\u00e9 \/ culture <em style=\"font-style:normal;color:#8b9aa9;\">(ce qu'on \u00ab devrait \u00bb faire)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"La voix de la peur\"><span class=\"box\"><\/span><span>La voix de la peur <em style=\"font-style:normal;color:#8b9aa9;\">(ce qui m'emp\u00eache)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre<\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-voicesDetail\">Pr\u00e9cise bri\u00e8vement chaque voix <span class=\"opt\">(optionnel)<\/span><\/label>\n\n<textarea id=\"vx-voicesDetail\" placeholder=\"Ex. \u00ab La voix des proches : mes parents aimeraient que je\u2026 \u00bb\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"vx-hint1\">Prends un instant pour cocher au moins une voix \u2014 m\u00eame une seule suffit pour commencer.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vx-step2\">\n\n<h2>2. Identifier l'origine de chaque pens\u00e9e<\/h2>\n\n<p class=\"step-intro\">Pour 3 pens\u00e9es ou croyances r\u00e9centes, pr\u00e9cise d'o\u00f9 elles viennent.<\/p>\n\n<div class=\"thought-block\">\n\n<span class=\"block-title\">Pens\u00e9e 1<\/span>\n\n<div class=\"field\"><label>Ta pens\u00e9e<\/label><input type=\"text\" class=\"vx-thought\" data-n=\"1\" placeholder=\"Ex. Je devrais accepter ce poste\"><\/div>\n\n<div class=\"field\"><label>Origine principale<\/label>\n\n<select class=\"vx-origin\" data-n=\"1\">\n\n<option value=\"\">\u2014 Choisir \u2014<\/option>\n\n<option>Moi<\/option>\n\n<option>Les autres<\/option>\n\n<option>La peur<\/option>\n\n<option>Un m\u00e9lange<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"field\"><label>Comment je le sais <span class=\"opt\">(indice corporel, \u00e9motion, exp\u00e9rience)<\/span><\/label><input type=\"text\" class=\"vx-clue\" data-n=\"1\" placeholder=\"Ex. Je sens une tension dans le ventre\"><\/div>\n\n<\/div>\n\n\n<div class=\"thought-block\">\n\n<span class=\"block-title\">Pens\u00e9e 2<\/span>\n\n<div class=\"field\"><label>Ta pens\u00e9e<\/label><input type=\"text\" class=\"vx-thought\" data-n=\"2\" placeholder=\"Ex. Il faut que je reste prudent\u00b7e\"><\/div>\n\n<div class=\"field\"><label>Origine principale<\/label>\n\n<select class=\"vx-origin\" data-n=\"2\">\n\n<option value=\"\">\u2014 Choisir \u2014<\/option>\n\n<option>Moi<\/option>\n\n<option>Les autres<\/option>\n\n<option>La peur<\/option>\n\n<option>Un m\u00e9lange<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"field\"><label>Comment je le sais<\/label><input type=\"text\" class=\"vx-clue\" data-n=\"2\" placeholder=\"Ex. Un message entendu depuis l'enfance\"><\/div>\n\n<\/div>\n\n\n<div class=\"thought-block\">\n\n<span class=\"block-title\">Pens\u00e9e 3<\/span>\n\n<div class=\"field\"><label>Ta pens\u00e9e<\/label><input type=\"text\" class=\"vx-thought\" data-n=\"3\" placeholder=\"Ex. J'aimerais changer de direction\"><\/div>\n\n<div class=\"field\"><label>Origine principale<\/label>\n\n<select class=\"vx-origin\" data-n=\"3\">\n\n<option value=\"\">\u2014 Choisir \u2014<\/option>\n\n<option>Moi<\/option>\n\n<option>Les autres<\/option>\n\n<option>La peur<\/option>\n\n<option>Un m\u00e9lange<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"field\"><label>Comment je le sais<\/label><input type=\"text\" class=\"vx-clue\" data-n=\"3\" placeholder=\"Ex. Je me sens plus l\u00e9g\u00e8re en l'imaginant\"><\/div>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vx-step3\">\n\n<h2>3. Retrouver un signal personnel<\/h2>\n\n<p class=\"step-intro\">Un moment o\u00f9 tu as senti que tu \u00e9coutais vraiment ta propre voix.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vx-momentOwnVoice\">Y a-t-il un moment r\u00e9cent o\u00f9 tu as senti que tu \u00e9coutais vraiment ta propre voix ?<\/label>\n\n<input type=\"text\" id=\"vx-momentOwnVoice\" placeholder=\"Ex. La semaine derni\u00e8re, quand j'ai dit non \u00e0\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-whatDoing\">Que faisais-tu ?<\/label>\n\n<input type=\"text\" id=\"vx-whatDoing\" placeholder=\"Ex. J'\u00e9tais en train de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-bodyFeeling\">Comment ton corps se sentait-il ?<\/label>\n\n<input type=\"text\" id=\"vx-bodyFeeling\" placeholder=\"Ex. Plus calme, plus ancr\u00e9, plus l\u00e9ger\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-differenceOthers\">Qu'est-ce qui \u00e9tait diff\u00e9rent par rapport aux moments o\u00f9 tu \u00e9coutes surtout les autres ?<\/label>\n\n<textarea id=\"vx-differenceOthers\" placeholder=\"Ex. Moins de pression, plus de clart\u00e9, moins de culpabilit\u00e9\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vx-step4\">\n\n<h2>4. Petit engagement<\/h2>\n\n<p class=\"step-intro\">Quelle petite action, cette semaine, pourrait t'aider \u00e0 \u00e9couter un peu plus ta propre voix ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"\u00c9crire 5 min sans filtre\"><span class=\"box\"><\/span><span>\u00c9crire 5 min sans filtre<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"Dire non \u00e0 une demande\"><span class=\"box\"><\/span><span>Dire non \u00e0 une demande<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"Dire oui \u00e0 une envie discr\u00e8te\"><span class=\"box\"><\/span><span>Dire oui \u00e0 une envie discr\u00e8te<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-actionOther\">Pr\u00e9cise ton action si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"vx-actionOther\" placeholder=\"Ex. Prendre 10 min pour marcher sans t\u00e9l\u00e9phone\">\n\n<\/div>\n\n<div class=\"hint\" id=\"vx-hint4\">Choisis une action \u2014 m\u00eame toute petite. C'est elle qui fera la diff\u00e9rence cette semaine.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"vx-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83c\udf31 Ton r\u00e9sultat<\/h2>\n\n<p>Un instantan\u00e9 de ce que tu viens de traverser.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"vx-section-voices\">\n\n<h3>Les voix que tu as rep\u00e9r\u00e9es<\/h3>\n\n<div class=\"chips\" id=\"vx-resultVoices\"><\/div>\n\n<p id=\"vx-resultVoicesDetail\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vx-section-thoughts\">\n\n<h3>Tes pens\u00e9es et leur origine<\/h3>\n\n<ul class=\"thought-list\" id=\"vx-resultThoughts\"><\/ul>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vx-section-signal\">\n\n<h3>Ton signal personnel<\/h3>\n\n<p id=\"vx-resultSignal\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\">\n\n<h3>Ton petit pas pour cette semaine<\/h3>\n\n<div class=\"card-action\">\n\n<span class=\"icon\">\u2728<\/span>\n\n<div>\n\n<p class=\"label\">Ton engagement<\/p>\n\n<p class=\"text\" id=\"vx-resultAction\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu peux revenir sur cet outil quand tu sens que les voix des autres prennent trop de place.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n\n\n<div id=\"view-clarifier\" class=\"tool-view\" data-tool=\"clarifier\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83e\udded Clarifier une d\u00e9cision<\/h1>\n\n<p>Mets \u00e0 plat une d\u00e9cision sans chercher imm\u00e9diatement la \u00ab bonne \u00bb r\u00e9ponse, en clarifiant options, besoins, avantages et limites.<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"cl-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"5\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"cl-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"cl-progress-label\">\u00c9tape 1 sur 5<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"cl-step1\">\n\n<h2>1. D\u00e9crire la d\u00e9cision<\/h2>\n\n<p class=\"step-intro\">Commence par nommer la d\u00e9cision \u2014 sans chercher \u00e0 la r\u00e9soudre pour l'instant.<\/p>\n\n<div class=\"field\">\n\n<label for=\"cl-decisionDesc\">Quelle d\u00e9cision est floue ou difficile en ce moment ?<\/label>\n\n<input type=\"text\" id=\"cl-decisionDesc\" placeholder=\"Ex. Changer de travail, reprendre des \u00e9tudes, d\u00e9m\u00e9nager\u2026\">\n\n<\/div>\n\n<div class=\"hint\" id=\"cl-hint1\">Prends un instant pour nommer la d\u00e9cision \u2014 m\u00eame quelques mots suffisent.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step2\">\n\n<h2>2. Lister les options r\u00e9elles<\/h2>\n\n<p class=\"step-intro\">Nomme 2 \u00e0 4 options concr\u00e8tes \u2014 m\u00eame celles qui semblent \u00ab peu r\u00e9alistes \u00bb.<\/p>\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 1<\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"1\" placeholder=\"Ex. Rester dans mon poste actuel\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"1\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"1\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 2<\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"2\" placeholder=\"Ex. Chercher un nouveau poste\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"2\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"2\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 3 <em style=\"font-style:normal;font-weight:500;color:#9aacbc;text-transform:none;letter-spacing:0;\">(optionnel)<\/em><\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"3\" placeholder=\"Nom de l'option\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"3\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"3\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 4 <em style=\"font-style:normal;font-weight:500;color:#9aacbc;text-transform:none;letter-spacing:0;\">(optionnel)<\/em><\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"4\" placeholder=\"Nom de l'option\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"4\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"4\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n<div class=\"hint\" id=\"cl-hint2\">Essaie de nommer au moins 2 options \u2014 m\u00eame imparfaites \u2014 pour ouvrir le champ des possibles.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step3\">\n\n<h2>3. Relier aux besoins et valeurs<\/h2>\n\n<p class=\"step-intro\">Pour chaque option, coche les besoins principaux qu'elle sert. Puis indique celle qui te semble la plus align\u00e9e.<\/p>\n\n<div id=\"cl-needsOptions\"><\/div>\n\n<div class=\"field\" style=\"margin-top:22px;\">\n\n<label for=\"cl-mostAligned\">Laquelle de ces options semble la plus align\u00e9e avec ce qui compte vraiment pour toi en ce moment ?<\/label>\n\n<select id=\"cl-mostAligned\">\n\n<option value=\"\">\u2014 Choisir une option \u2014<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step4\">\n\n<h2>4. Identifier les freins<\/h2>\n\n<p class=\"step-intro\">Qu'est-ce qui rend cette d\u00e9cision difficile, au-del\u00e0 des aspects pratiques ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Peur de se tromper\"><span class=\"box\"><\/span><span>Peur de se tromper<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Peur de d\u00e9cevoir\"><span class=\"box\"><\/span><span>Peur de d\u00e9cevoir<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Peur de perdre quelque chose\"><span class=\"box\"><\/span><span>Peur de perdre quelque chose<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Manque d'information\"><span class=\"box\"><\/span><span>Manque d'information<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Conflit entre deux valeurs importantes\"><span class=\"box\"><\/span><span>Conflit entre deux valeurs importantes<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"cl-barrierOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"cl-barrierOther\" placeholder=\"Ex. Je ne sais pas ce que je veux vraiment\u2026\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(5)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step5\">\n\n<h2>5. Prochain petit pas<\/h2>\n\n<p class=\"step-intro\">Quel petit pas, dans les 7 prochains jours, pourrait t'aider \u00e0 avancer sur cette d\u00e9cision \u2014 sans la r\u00e9gler compl\u00e8tement ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"Recueillir une information\"><span class=\"box\"><\/span><span>Recueillir une information<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"En parler \u00e0 une personne de confiance\"><span class=\"box\"><\/span><span>En parler \u00e0 une personne de confiance<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"\u00c9crire les pour et les contre\"><span class=\"box\"><\/span><span>\u00c9crire les pour et les contre<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"Fixer une date pour d\u00e9cider\"><span class=\"box\"><\/span><span>Fixer une date pour d\u00e9cider<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"Tester une option \u00e0 petite \u00e9chelle\"><span class=\"box\"><\/span><span>Tester une option \u00e0 petite \u00e9chelle<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"cl-nextStepOther\">Pr\u00e9cise ton petit pas si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"cl-nextStepOther\" placeholder=\"Ex. Prendre un temps seul\u00b7e pour y r\u00e9fl\u00e9chir\u2026\">\n\n<\/div>\n\n<div class=\"hint\" id=\"cl-hint5\">Choisis un petit pas \u2014 m\u00eame tout petit. C'est lui qui fera bouger la d\u00e9cision.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(4)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"cl-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83e\udded Ton r\u00e9sultat<\/h2>\n\n<p>Un instantan\u00e9 de ta d\u00e9cision, mise \u00e0 plat.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"cl-section-decision\">\n\n<h3>Ta d\u00e9cision<\/h3>\n\n<div class=\"card-highlight\" id=\"cl-resultDecision\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"cl-section-options\">\n\n<h3>Les options que tu as mises \u00e0 plat<\/h3>\n\n<div class=\"options-summary\" id=\"cl-resultOptions\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"cl-section-aligned\">\n\n<h3>L'option la plus align\u00e9e<\/h3>\n\n<span class=\"aligned-badge\">\u2728 Ton choix du moment<\/span>\n\n<p id=\"cl-resultAligned\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"cl-section-barriers\">\n\n<h3>Ce qui rend la d\u00e9cision difficile<\/h3>\n\n<div class=\"chips\" id=\"cl-resultBarriers\"><\/div>\n\n<p id=\"cl-resultBarrierOther\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\">\n\n<h3>Ton petit pas pour cette semaine<\/h3>\n\n<div class=\"card-action\">\n\n<span class=\"icon\">\ud83d\udc63<\/span>\n\n<div>\n\n<p class=\"label\">Ton engagement<\/p>\n\n<p class=\"text\" id=\"cl-resultAction\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu peux revenir sur cet outil quand la d\u00e9cision \u00e9volue, ou quand tu veux approfondir une option en particulier.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n\n\n<div id=\"view-voie\" class=\"tool-view\" data-tool=\"voie\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83d\udeaa Et si une autre voie \u00e9tait possible ?<\/h1>\n\n<p>Aide-toi \u00e0 sortir du \u00ab soit\u2026 soit\u2026 \u00bb et \u00e0 explorer plusieurs possibilit\u00e9s quand une situation semble bloqu\u00e9e.<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"vo-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"5\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"vo-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"vo-progress-label\">\u00c9tape 1 sur 5<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"vo-step1\">\n\n<h2>1. D\u00e9crire le blocage<\/h2>\n\n<p class=\"step-intro\">Pose des mots sur la situation \u2014 sans chercher \u00e0 la r\u00e9soudre pour l'instant.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vo-blockageDesc\">Quelle situation te donne l'impression d'\u00eatre coinc\u00e9\u00b7e ou sans issue ?<\/label>\n\n<textarea id=\"vo-blockageDesc\" placeholder=\"D\u00e9cris bri\u00e8vement la situation\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"vo-hint1\">Prends un instant pour d\u00e9crire la situation \u2014 m\u00eame quelques mots suffisent pour commencer.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step2\">\n\n<h2>2. Rep\u00e9rer le \u00ab soit\u2026 soit\u2026 \u00bb<\/h2>\n\n<p class=\"step-intro\">Souvent, le blocage vient d'une alternative fig\u00e9e : soit A, soit B. Mets des mots sur celle qui t'enferme.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vo-eitherOr\">Quelle est la fa\u00e7on dont tu pr\u00e9sentes habituellement les choix dans cette situation ?<\/label>\n\n<input type=\"text\" id=\"vo-eitherOr\" placeholder=\"Ex. \u00ab Soit je reste, soit je pars \u00bb\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step3\">\n\n<h2>3. \u00c9largir le champ des possibles<\/h2>\n\n<p class=\"step-intro\">Cinq questions pour ouvrir des pistes \u2014 r\u00e9ponds bri\u00e8vement, sans chercher la perfection.<\/p>\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">1<\/span>\n\n<p class=\"q-text\">Et si tu n'\u00e9tais pas oblig\u00e9\u00b7e de choisir tout de suite, que pourrais-tu explorer en attendant ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q1\" placeholder=\"Ex. Tester, observer, recueillir des infos\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">2<\/span>\n\n<p class=\"q-text\">Et si une solution \u00ab ni l'un ni l'autre \u00bb \u00e9tait possible, \u00e0 quoi pourrait-elle ressembler ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q2\" placeholder=\"Ex. Un compromis, une troisi\u00e8me option, un d\u00e9tour\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">3<\/span>\n\n<p class=\"q-text\">Et si tu avais 10 % de libert\u00e9 en plus dans cette situation, qu'en ferais-tu ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q3\" placeholder=\"Ex. J'essaierais\u2026, je parlerais de\u2026, je changerais\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">4<\/span>\n\n<p class=\"q-text\">Qui, autour de toi, a d\u00e9j\u00e0 v\u00e9cu quelque chose de similaire et s'en est sorti autrement ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q4\" placeholder=\"Ex. Une personne, un exemple, une histoire\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">5<\/span>\n\n<p class=\"q-text\">Quelle serait une option \u00ab suffisamment bonne \u00bb plut\u00f4t que parfaite ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q5\" placeholder=\"Ex. Une option r\u00e9aliste, imparfaite mais qui avance\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step4\">\n\n<h2>4. S\u00e9lectionner une piste<\/h2>\n\n<p class=\"step-intro\">Voici toutes les pistes que tu viens d'ouvrir. Laquelle te semble la plus int\u00e9ressante \u00e0 explorer \u2014 m\u00eame si ce n'est pas \u00ab la solution \u00bb ?<\/p>\n\n<div class=\"paths-list\" id=\"vo-pathsList\" role=\"radiogroup\" aria-label=\"Pistes explor\u00e9es\"><\/div>\n\n<div class=\"hint hint--info\" id=\"vo-pathsEmpty\" style=\"display:none;\">\n\nTu n'as pas encore rempli de piste \u00e0 l'\u00e9tape pr\u00e9c\u00e9dente.<br>\n\n<a href=\"#\" onclick=\"VO.goToStep(3);return false;\" style=\"color:var(--accent);font-weight:600;\">\u2190 Revenir \u00e0 l'\u00e9tape 3<\/a>\n\n<\/div>\n\n<div class=\"field\" id=\"vo-otherPathField\" style=\"display:none;\">\n\n<label for=\"vo-otherPath\">D\u00e9cris ta piste<\/label>\n\n<textarea id=\"vo-otherPath\" placeholder=\"Ex. Commencer par en parler \u00e0 une personne qui a v\u00e9cu quelque chose de similaire\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"vo-hint4\">Choisis une piste pour continuer.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(5)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step5\">\n\n<h2>5. Transformer l'obstacle en question<\/h2>\n\n<p class=\"step-intro\">Un obstacle formul\u00e9 en \u00ab pourquoi \u00bb enferme. Une question ouverte en \u00ab quoi \u00bb ou \u00ab comment \u00bb ouvre.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vo-oldQuestion\">Obstacle initial <span class=\"opt\">(ex. \u00ab Pourquoi cela m'arrive ? \u00bb)<\/span><\/label>\n\n<input type=\"text\" id=\"vo-oldQuestion\" placeholder=\"Ex. Pourquoi je n'arrive pas \u00e0 avancer ?\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vo-newQuestion\">Nouvelle question <span class=\"opt\">(ex. \u00ab Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ? \u00bb)<\/span><\/label>\n\n<input type=\"text\" id=\"vo-newQuestion\" placeholder=\"Ex. Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ?\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(4)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"vo-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83d\udeaa Ton r\u00e9sultat<\/h2>\n\n<p>De nouvelles voies s'ouvrent \u00e0 partir de ta situation.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"vo-section-blockage\">\n\n<h3>Ton point de d\u00e9part<\/h3>\n\n<div class=\"card-highlight\" id=\"vo-resultBlockage\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-eitheror\">\n\n<h3>Le \u00ab soit\u2026 soit\u2026 \u00bb que tu as rep\u00e9r\u00e9<\/h3>\n\n<div class=\"either-or-card\" id=\"vo-resultEitherOr\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-explored\">\n\n<h3>Les pistes que tu as ouvertes<\/h3>\n\n<ul class=\"explored-list\" id=\"vo-resultExplored\"><\/ul>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-path\">\n\n<h3>La piste que tu souhaites explorer<\/h3>\n\n<div class=\"path-card\">\n\n<span class=\"icon\">\ud83e\udded<\/span>\n\n<div>\n\n<p class=\"label\">Ta piste prioritaire<\/p>\n\n<p class=\"text\" id=\"vo-resultPath\"><\/p>\n\n<span class=\"origin\" id=\"vo-resultPathOrigin\"><\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-question\">\n\n<h3>Ta question pour avancer<\/h3>\n\n<div class=\"question-shift\" id=\"vo-resultQuestionShift\"><\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu as commenc\u00e9 \u00e0 \u00e9largir le champ des possibles autour de cette situation. Au lieu d'un \u00ab soit\u2026 soit\u2026 \u00bb fig\u00e9, plusieurs pistes apparaissent.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n\n\n<div id=\"view-forces\" class=\"tool-view\" data-tool=\"forces\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83c\udf1f Mes forces et mes ressources<\/h1>\n\n<p>Identifie ce sur quoi tu peux d\u00e9j\u00e0 t'appuyer pour avancer : ce que tu portes en toi, ce que tu as appris, les personnes et ressources autour de toi.<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"fo-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"7\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"fo-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"fo-progress-label\">\u00c9tape 1 sur 7<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"fo-step1\">\n\n<h2>1. Ce que je porte d\u00e9j\u00e0 en moi<\/h2>\n\n<p class=\"step-intro\">Au-del\u00e0 des \u00ab qualit\u00e9s \u00bb, qu'est-ce qui fait partie de toi et pourrait t'aider \u00e0 avancer ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Mes valeurs\"><span class=\"box\"><\/span><span>Mes valeurs <em style=\"font-style:normal;color:#8b9aa9;\">(ce qui compte vraiment)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Mes fa\u00e7ons de faire\"><span class=\"box\"><\/span><span>Mes fa\u00e7ons de faire <em style=\"font-style:normal;color:#8b9aa9;\">(ma mani\u00e8re d'aborder les choses)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Des apprentissages pass\u00e9s\"><span class=\"box\"><\/span><span>Des apprentissages pass\u00e9s <em style=\"font-style:normal;color:#8b9aa9;\">(m\u00eame petits)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"De petites victoires\"><span class=\"box\"><\/span><span>De petites victoires <em style=\"font-style:normal;color:#8b9aa9;\">(des moments o\u00f9 \u00e7a a march\u00e9)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Des qualit\u00e9s que je me reconnais\"><span class=\"box\"><\/span><span>Des qualit\u00e9s que je me reconnais<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"fo-innerOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"fo-innerOther\" placeholder=\"Ex. Ma capacit\u00e9 \u00e0 demander de l'aide\u2026\">\n\n<\/div>\n\n<div class=\"hint\" id=\"fo-hint1\">Prends un instant pour cocher au moins une force ou ressource int\u00e9rieure \u2014 m\u00eame une seule suffit.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step2\">\n\n<h2>2. Ce que j'ai appris de mes exp\u00e9riences<\/h2>\n\n<p class=\"step-intro\">M\u00eame les p\u00e9riodes difficiles ont pu t'apprendre quelque chose.<\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-learnings\">Qu'as-tu d\u00e9couvert sur toi ou sur la vie \u00e0 travers ce que tu as v\u00e9cu ?<\/label>\n\n<textarea id=\"fo-learnings\" placeholder=\"Ex. \u00ab J'ai appris que je pouvais tenir bon m\u00eame quand c'\u00e9tait dur \u00bb\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step3\">\n\n<h2>3. Les personnes sur lesquelles je peux m'appuyer<\/h2>\n\n<p class=\"step-intro\">Qui, autour de toi, pourrait \u00eatre une ressource \u2014 m\u00eame de loin, m\u00eame occasionnellement ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Famille\"><span class=\"box\"><\/span><span>Famille<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Ami\u00b7e\u00b7s\"><span class=\"box\"><\/span><span>Ami\u00b7e\u00b7s<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Coll\u00e8gues \/ camarades\"><span class=\"box\"><\/span><span>Coll\u00e8gues \/ camarades<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Professionnel\u00b7le\u00b7s\"><span class=\"box\"><\/span><span>Professionnel\u00b7le\u00b7s <em style=\"font-style:normal;color:#8b9aa9;\">(th\u00e9rapeute, m\u00e9decin, coach\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Groupes \/ communaut\u00e9s\"><span class=\"box\"><\/span><span>Groupes \/ communaut\u00e9s <em style=\"font-style:normal;color:#8b9aa9;\">(en ligne, locaux\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Une personne en particulier\"><span class=\"box\"><\/span><span>Une personne en particulier <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Je ne pense \u00e0 personne pour l'instant\"><span class=\"box\"><\/span><span>Je ne pense \u00e0 personne pour l'instant<\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"fo-peopleDetail\">Pr\u00e9cise si tu le souhaites <span class=\"opt\">(noms, r\u00f4les, types de soutien\u2026)<\/span><\/label>\n\n<input type=\"text\" id=\"fo-peopleDetail\" placeholder=\"Ex. Ma s\u0153ur, qui sait \u00e9couter sans juger\u2026\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step4\">\n\n<h2>4. Les ressources dans mon environnement<\/h2>\n\n<p class=\"step-intro\">Qu'est-ce qui, autour de toi, pourrait t'aider \u2014 lieux, outils, temps, informations, espaces\u2026 ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Lieux\"><span class=\"box\"><\/span><span>Lieux <em style=\"font-style:normal;color:#8b9aa9;\">(biblioth\u00e8que, parc, association\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Outils\"><span class=\"box\"><\/span><span>Outils <em style=\"font-style:normal;color:#8b9aa9;\">(livres, sites, applications\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Temps disponible\"><span class=\"box\"><\/span><span>Temps disponible <em style=\"font-style:normal;color:#8b9aa9;\">(m\u00eame un peu)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Informations\"><span class=\"box\"><\/span><span>Informations <em style=\"font-style:normal;color:#8b9aa9;\">(ce que tu as d\u00e9j\u00e0 appris, lu\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Espace physique\"><span class=\"box\"><\/span><span>Espace physique <em style=\"font-style:normal;color:#8b9aa9;\">(chez toi, un coin \u00e0 toi\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"fo-envOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"fo-envOther\" placeholder=\"Ex. Une association pr\u00e8s de chez moi\u2026\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(5)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step5\">\n\n<h2>5. Ce qui m'a d\u00e9j\u00e0 aid\u00e9\u00b7e, m\u00eame modestement<\/h2>\n\n<p class=\"step-intro\">Les petites choses comptent aussi \u2014 parfois plus qu'on ne le croit.<\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-smallHelp\">Qu'est-ce qui t'a d\u00e9j\u00e0 apport\u00e9 un peu de soulagement, de clart\u00e9 ou de soutien ?<\/label>\n\n<textarea id=\"fo-smallHelp\" placeholder=\"Ex. \u00ab \u00c9crire ce que je ressens \u00bb, \u00ab Marcher 10 minutes \u00bb\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(4)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(6)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step6\">\n\n<h2>6. Ce que je pourrais mobiliser maintenant<\/h2>\n\n<p class=\"step-intro\">Parmi tout ce que tu as identifi\u00e9, qu'est-ce qui est accessible cette semaine ?<\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-toMobilize\">Qu'est-ce qui pourrait t'aider \u00e0 avancer, m\u00eame un tout petit peu, dans les 7 prochains jours ?<\/label>\n\n<textarea id=\"fo-toMobilize\" placeholder=\"Ex. \u00ab Reprendre contact avec\u2026 \u00bb, \u00ab Utiliser tel outil\u2026 \u00bb\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(5)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(7)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step7\">\n\n<h2>7. Phrase-ressource<\/h2>\n\n<p class=\"step-intro\">Cr\u00e9e une phrase courte \u00e0 garder comme appui, du type :<br><em>\u00ab Je peux m'appuyer sur [ressource] pour [intention\/action]. \u00bb<\/em><\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-resourcePhrase\">Ta phrase-ressource<\/label>\n\n<textarea id=\"fo-resourcePhrase\" placeholder=\"Ex. \u00ab Je peux m'appuyer sur ce que j'ai d\u00e9j\u00e0 travers\u00e9 et sur les personnes autour de moi pour avancer pas \u00e0 pas. \u00bb\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"fo-hint7\">Prends un instant pour \u00e9crire ta phrase-ressource \u2014 c'est elle qui te servira de rep\u00e8re.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(6)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"fo-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83c\udf1f Ton r\u00e9sultat<\/h2>\n\n<p>Ce sur quoi tu peux d\u00e9j\u00e0 t'appuyer pour avancer.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"fo-section-inner\">\n\n<h3>Ce que tu portes en toi<\/h3>\n\n<div class=\"chips\" id=\"fo-resultInner\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-learnings\">\n\n<h3>Ce que tes exp\u00e9riences t'ont appris<\/h3>\n\n<div class=\"card-quote\" id=\"fo-resultLearnings\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-people\">\n\n<h3>Les personnes sur qui tu peux t'appuyer<\/h3>\n\n<div class=\"chips\" id=\"fo-resultPeople\"><\/div>\n\n<p id=\"fo-resultPeopleDetail\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-env\">\n\n<h3>Les ressources dans ton environnement<\/h3>\n\n<div class=\"chips\" id=\"fo-resultEnv\"><\/div>\n\n<p id=\"fo-resultEnvOther\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-smallhelp\">\n\n<h3>Ce qui t'a d\u00e9j\u00e0 aid\u00e9\u00b7e, m\u00eame modestement<\/h3>\n\n<div class=\"card-quote\" id=\"fo-resultSmallHelp\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-mobilize\">\n\n<h3>Ce que tu peux mobiliser cette semaine<\/h3>\n\n<div class=\"card-action\">\n\n<span class=\"icon\">\u2728<\/span>\n\n<div>\n\n<p class=\"label\">Ton appui pour avancer<\/p>\n\n<p class=\"text\" id=\"fo-resultMobilize\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-phrase\">\n\n<h3>Ta phrase-ressource<\/h3>\n\n<div class=\"card-phare\">\n\n<span class=\"mark\">\u275d<\/span>\n\n<p class=\"phare-text\" id=\"fo-resultPhrase\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu as identifi\u00e9 plusieurs ressources : en toi, dans tes exp\u00e9riences, autour de toi et dans ton environnement. Tu n'es pas seul\u00b7e face \u00e0 ce que tu traverses.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n<script>\n\n\/* ============================================================\nUTILITAIRES\n============================================================ *\/\n\nfunction escapeHtml(str){\nreturn String(str)\n.replace(\/&\/g,'&')\n.replace(\/<\/g,'<')\n.replace(\/>\/g,'>')\n.replace(\/\"\/g,'"')\n.replace(\/'\/g,''');\n}\n\nfunction capitalize(s){\nreturn s.charAt(0).toUpperCase() + s.slice(1);\n}\n\nfunction showStepTool(prefix,n,total){\n\ndocument.querySelectorAll('[id^=\"' + prefix + '-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\nconst target=document.getElementById(prefix + '-step' + n);\n\nif(target){\n\ntarget.classList.remove('hidden');\n\nupdateProgressTool(prefix,n,total);\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\nconst title=target.querySelector('h2');\n\nif(title){\ntitle.setAttribute('tabindex','-1');\ntitle.focus({\npreventScroll:true\n});\n}\n\n}\n\n}\n\nfunction updateProgressTool(prefix,n,total){\n\nconst pct=Math.round((n\/total)*100);\n\nconst fill=document.getElementById(prefix + '-progress-fill');\nconst label=document.getElementById(prefix + '-progress-label');\nconst track=document.getElementById(prefix + '-progress-track');\n\nif(fill) fill.style.width=pct + '%';\n\nif(label) label.textContent='\u00c9tape ' + n + ' sur ' + total;\n\nif(track) track.setAttribute('aria-valuenow',n);\n\n}\n\nfunction currentStepTool(prefix,total){\n\nfor(let i=1;i<=total;i++){\n\nconst el=document.getElementById(prefix + '-step' + i);\n\nif(el && !el.classList.contains('hidden')) return i;\n\n}\n\nreturn total;\n\n}\n\n\n\/* ============================================================\nOUTIL 1 \u2014 RETROUVER MA VOIX\n============================================================ *\/\n\nconst VX=(function(){\n\nconst P='vx',\nKEY='jiris_voix_v1',\nTOTAL=4;\n\nfunction goToStep(n){\n\nif(n===2){\n\nconst any=document.querySelector('.vx-voice:checked');\n\nconst detail=document.getElementById('vx-voicesDetail').value.trim();\n\nif(!any && !detail){\n\ndocument.getElementById('vx-hint1').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('vx-hint1').classList.remove('show');\n\n}\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction showResult(){\n\nconst action=document.querySelector('input[name=\"vx-action\"]:checked');\n\nif(!action){\n\ndocument.getElementById('vx-hint4').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('vx-hint4').classList.remove('show');\n\nconst voices=Array.from(document.querySelectorAll('.vx-voice:checked')).map(function(c){\nreturn c.value;\n});\n\nconst voicesDetail=document.getElementById('vx-voicesDetail').value.trim();\n\nconst thoughts=[];\n\nfor(let i=1;i<=3;i++){\n\nconst t=document.querySelector('.vx-thought[data-n=\"'+i+'\"]').value.trim();\n\nconst o=document.querySelector('.vx-origin[data-n=\"'+i+'\"]').value;\n\nconst c=document.querySelector('.vx-clue[data-n=\"'+i+'\"]').value.trim();\n\nif(t) thoughts.push({\nt:t,\no:o,\nc:c\n});\n\n}\n\nconst moment=document.getElementById('vx-momentOwnVoice').value.trim();\n\nconst doing=document.getElementById('vx-whatDoing').value.trim();\n\nconst body=document.getElementById('vx-bodyFeeling').value.trim();\n\nconst diff=document.getElementById('vx-differenceOthers').value.trim();\n\nlet actionText=action.value;\n\nif(action.value==='autre'){\n\nconst other=document.getElementById('vx-actionOther').value.trim();\n\nactionText=other || 'une action personnelle';\n\n}\n\nconst vS=document.getElementById('vx-section-voices');\n\nconst vBox=document.getElementById('vx-resultVoices');\n\nconst vD=document.getElementById('vx-resultVoicesDetail');\n\nif(voices.length){\n\nvS.style.display='';\n\nvBox.innerHTML=voices.map(function(v){\n\nreturn '<span class=\"chip\">'+escapeHtml(v)+'<\/span>';\n\n}).join('');\n\nvD.textContent=voicesDetail || '';\n\nvD.style.display=voicesDetail ? '' : 'none';\n\n}else{\n\nvS.style.display='none';\n\n}\n\nconst tS=document.getElementById('vx-section-thoughts');\n\nconst tL=document.getElementById('vx-resultThoughts');\n\nif(thoughts.length){\n\ntS.style.display='';\n\ntL.innerHTML=thoughts.map(function(item){\n\nconst t=item.t,\no=item.o,\nc=item.c;\n\nconst tag=o ? '<span class=\"origin-tag\">'+escapeHtml(o)+'<\/span>' : '';\n\nconst clue=c ? '<br><span style=\"font-size:.85rem;color:#8b9aa9;\">Indice : '+escapeHtml(c)+'<\/span>' : '';\n\nreturn '<li><strong>'+escapeHtml(t)+'<\/strong>'+tag+clue+'<\/li>';\n\n}).join('');\n\n}else{\n\ntS.style.display='none';\n\n}\n\nconst sS=document.getElementById('vx-section-signal');\n\nconst sP=document.getElementById('vx-resultSignal');\n\nconst bits=[];\n\nif(moment)\nbits.push('Tu as rep\u00e9r\u00e9 un moment : <strong>'+escapeHtml(moment)+'<\/strong>.');\n\nif(doing)\nbits.push('Ce que tu faisais : '+escapeHtml(doing)+'.');\n\nif(body)\nbits.push('Ton corps se sentait '+escapeHtml(body).toLowerCase()+'.');\n\nif(diff)\nbits.push('Ce qui \u00e9tait diff\u00e9rent : '+escapeHtml(diff)+'.');\n\nif(bits.length){\n\nsS.style.display='';\n\nsP.innerHTML=bits.join(' ');\n\n}else{\n\nsS.style.display='none';\n\n}\n\ndocument.getElementById('vx-resultAction').textContent=actionText;\n\ndocument.querySelectorAll('[id^=\"' + P + '-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('vx-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\ndocument.querySelectorAll('.vx-voice').forEach(function(c){\nc.checked=false;\n});\n\ndocument.getElementById('vx-voicesDetail').value='';\n\nfor(let i=1;i<=3;i++){\n\ndocument.querySelector('.vx-thought[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.vx-origin[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.vx-clue[data-n=\"'+i+'\"]').value='';\n\n}\n\n[\n'vx-momentOwnVoice',\n'vx-whatDoing',\n'vx-bodyFeeling',\n'vx-differenceOthers',\n'vx-actionOther'\n].forEach(function(id){\n\ndocument.getElementById(id).value='';\n\n});\n\ndocument.querySelectorAll('input[name=\"vx-action\"]').forEach(function(r){\nr.checked=false;\n});\n\ndocument.getElementById('vx-hint1').classList.remove('show');\n\ndocument.getElementById('vx-hint4').classList.remove('show');\n\ndocument.getElementById('vx-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst data={\n\nvoices:Array.from(document.querySelectorAll('.vx-voice:checked')).map(function(c){\nreturn c.value;\n}),\n\nvoicesDetail:document.getElementById('vx-voicesDetail').value,\n\nthoughts:[1,2,3].map(function(i){\n\nreturn{\n\nt:document.querySelector('.vx-thought[data-n=\"'+i+'\"]').value,\n\no:document.querySelector('.vx-origin[data-n=\"'+i+'\"]').value,\n\nc:document.querySelector('.vx-clue[data-n=\"'+i+'\"]').value\n\n};\n\n}),\n\nmomentOwnVoice:document.getElementById('vx-momentOwnVoice').value,\n\nwhatDoing:document.getElementById('vx-whatDoing').value,\n\nbodyFeeling:document.getElementById('vx-bodyFeeling').value,\n\ndifferenceOthers:document.getElementById('vx-differenceOthers').value,\n\naction:(document.querySelector('input[name=\"vx-action\"]:checked') || {}).value || '',\n\nactionOther:document.getElementById('vx-actionOther').value,\n\ncurrentStep:currentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nif(Array.isArray(data.voices))\n\ndocument.querySelectorAll('.vx-voice').forEach(function(c){\n\nc.checked=data.voices.indexOf(c.value)!==-1;\n\n});\n\nif(typeof data.voicesDetail==='string')\n\ndocument.getElementById('vx-voicesDetail').value=data.voicesDetail;\n\nif(Array.isArray(data.thoughts)){\n\ndata.thoughts.forEach(function(th,idx){\n\nconst i=idx+1;\n\nif(i>3) return;\n\nconst tE=document.querySelector('.vx-thought[data-n=\"'+i+'\"]');\n\nconst oE=document.querySelector('.vx-origin[data-n=\"'+i+'\"]');\n\nconst cE=document.querySelector('.vx-clue[data-n=\"'+i+'\"]');\n\nif(tE && typeof th.t==='string') tE.value=th.t;\n\nif(oE && typeof th.o==='string') oE.value=th.o;\n\nif(cE && typeof th.c==='string') cE.value=th.c;\n\n});\n\n}\n\n[\n'momentOwnVoice',\n'whatDoing',\n'bodyFeeling',\n'differenceOthers',\n'actionOther'\n].forEach(function(k){\n\nif(typeof data[k]==='string')\ndocument.getElementById('vx-'+k).value=data[k];\n\n});\n\nif(data.action){\n\nconst r=document.querySelector(\n'input[name=\"vx-action\"][value=\"' + CSS.escape(data.action) + '\"]'\n);\n\nif(r) r.checked=true;\n\n}\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('vx-resultBox').classList.contains('show')) return;\n\nupdateProgressTool(\nP,\ncurrentStepTool(P,TOTAL),\nTOTAL\n);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-voix')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-voix')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.VX=VX;\n\n\n\/* ============================================================\nOUTIL 2 \u2014 CLARIFIER UNE D\u00c9CISION\n============================================================ *\/\n\nconst CL=(function(){\n\nconst P='cl',\nKEY='jiris_clarifier_decision_v1',\nTOTAL=5;\n\nconst NEEDS=[\n's\u00e9curit\u00e9',\n'libert\u00e9',\n'reconnaissance',\n'sens',\n'lien',\n'stabilit\u00e9',\n'croissance',\n'autre'\n];\n\nfunction goToStep(n){\n\nif(n===2){\n\nconst d=document.getElementById('cl-decisionDesc').value.trim();\n\nif(!d){\n\ndocument.getElementById('cl-hint1').classList.add('show');\n\ndocument.getElementById('cl-decisionDesc').focus();\n\nreturn;\n\n}\n\ndocument.getElementById('cl-hint1').classList.remove('show');\n\n}\n\nif(n===3){\n\nif(countNamedOptions()<2){\n\ndocument.getElementById('cl-hint2').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('cl-hint2').classList.remove('show');\n\nbuildNeedsStep();\n\nbuildMostAligned();\n\n}\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction countNamedOptions(){\n\nlet c=0;\n\ndocument.querySelectorAll('.cl-optName').forEach(function(i){\n\nif(i.value.trim()) c++;\n\n});\n\nreturn c;\n\n}\n\nfunction getOptions(){\n\nconst opts=[];\n\nfor(let i=1;i<=4;i++){\n\nconst name=document.querySelector('.cl-optName[data-n=\"'+i+'\"]').value.trim();\n\nconst gain=document.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value.trim();\n\nconst loss=document.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value.trim();\n\nif(name)\n\nopts.push({\nindex:i,\nname:name,\ngain:gain,\nloss:loss\n});\n\n}\n\nreturn opts;\n\n}\n\nfunction buildNeedsStep(){\n\nconst opts=getOptions();\n\nconst container=document.getElementById('cl-needsOptions');\n\nconst prev={};\n\ncontainer.querySelectorAll('.cl-needs').forEach(function(cb){\n\nconst key=cb.dataset.opt+'::'+cb.value;\n\nif(cb.checked) prev[key]=true;\n\n});\n\nlet html='';\n\nopts.forEach(function(o){\n\nhtml+='<div class=\"option-block\">';\n\nhtml+='<div class=\"opt-title\"><span class=\"opt-num\">'+o.index+'<\/span><span>'+escapeHtml(o.name)+'<\/span><\/div>';\n\nhtml+='<div class=\"choices choices--inline\">';\n\nNEEDS.forEach(function(n){\n\nhtml+='<label class=\"choice\"><input type=\"checkbox\" class=\"cl-needs\" data-opt=\"'+o.index+'\" value=\"'+n+'\">';\n\nhtml+='<span class=\"box\"><\/span><span>'+capitalize(n)+'<\/span><\/label>';\n\n});\n\nhtml+='<\/div><\/div>';\n\n});\n\ncontainer.innerHTML=html;\n\ncontainer.querySelectorAll('.cl-needs').forEach(function(cb){\n\nconst key=cb.dataset.opt+'::'+cb.value;\n\nif(prev[key]) cb.checked=true;\n\n});\n\n}\n\nfunction buildMostAligned(){\n\nconst opts=getOptions();\n\nconst select=document.getElementById('cl-mostAligned');\n\nconst prev=select.value;\n\nlet html='<option value=\"\">\u2014 Choisir une option \u2014<\/option>';\n\nopts.forEach(function(o){\n\nhtml+='<option value=\"'+escapeHtml(o.name)+'\">'+escapeHtml(o.name)+'<\/option>';\n\n});\n\nselect.innerHTML=html;\n\nif(prev){\n\nconst m=Array.from(select.options).find(function(opt){\nreturn opt.value===prev;\n});\n\nif(m) select.value=prev;\n\n}\n\n}\n\nfunction showResult(){\n\nconst action=document.querySelector('input[name=\"cl-nextStepAction\"]:checked');\n\nif(!action){\n\ndocument.getElementById('cl-hint5').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('cl-hint5').classList.remove('show');\n\nconst decision=document.getElementById('cl-decisionDesc').value.trim();\n\nconst opts=getOptions();\n\nconst aligned=document.getElementById('cl-mostAligned').value;\n\nconst barriers=Array.from(\ndocument.querySelectorAll('.cl-barrier:checked')\n).map(function(b){\nreturn b.value;\n});\n\nconst barrierOther=document.getElementById('cl-barrierOther').value.trim();\n\nlet actionText=action.value;\n\nif(action.value==='autre'){\n\nconst other=document.getElementById('cl-nextStepOther').value.trim();\n\nactionText=other || 'un petit pas personnel';\n\n}\n\ndocument.getElementById('cl-resultDecision').textContent=decision || '\u2014';\n\nconst optsCont=document.getElementById('cl-resultOptions');\n\nif(opts.length){\n\nlet html='';\n\nopts.forEach(function(o){\n\nconst needs=Array.from(\ndocument.querySelectorAll('.cl-needs[data-opt=\"'+o.index+'\"]:checked')\n).map(function(cb){\nreturn capitalize(cb.value);\n});\n\nconst isAligned=aligned && aligned===o.name;\n\nhtml+='<div class=\"option-summary-item'+(isAligned?' aligned':'')+'\">';\n\nhtml+='<div class=\"os-head\"><span class=\"dot\"><\/span><span>'+escapeHtml(o.name)+'<\/span><\/div>';\n\nif(o.gain)\n\nhtml+='<p class=\"os-line\"><span class=\"os-label\">Permet<\/span>'+escapeHtml(o.gain)+'<\/p>';\n\nif(o.loss)\n\nhtml+='<p class=\"os-line\"><span class=\"os-label\">Limite<\/span>'+escapeHtml(o.loss)+'<\/p>';\n\nif(needs.length){\n\nhtml+='<div class=\"chips\" style=\"margin-top:10px;\">';\n\nneeds.forEach(function(n){\n\nhtml+='<span class=\"chip\">'+escapeHtml(n)+'<\/span>';\n\n});\n\nhtml+='<\/div>';\n\n}\n\nhtml+='<\/div>';\n\n});\n\noptsCont.innerHTML=html;\n\n}else{\n\noptsCont.innerHTML='<p>Aucune option nomm\u00e9e.<\/p>';\n\n}\n\nconst aS=document.getElementById('cl-section-aligned');\n\nif(aligned){\n\naS.style.display='';\n\ndocument.getElementById('cl-resultAligned').innerHTML=\n'En ce moment, l\\'option qui te semble la plus align\u00e9e est <strong>'+\nescapeHtml(aligned)+\n'<\/strong>. Ce n\\'est pas un engagement d\u00e9finitif \u2014 juste un rep\u00e8re pour avancer.';\n\n}else{\n\naS.style.display='none';\n\n}\n\nconst bS=document.getElementById('cl-section-barriers');\n\nconst bBox=document.getElementById('cl-resultBarriers');\n\nconst bP=document.getElementById('cl-resultBarrierOther');\n\nif(barriers.length){\n\nbS.style.display='';\n\nconst chips=barriers\n.filter(function(b){\nreturn b!=='Autre';\n})\n.map(function(b){\nreturn '<span class=\"chip\">'+escapeHtml(b)+'<\/span>';\n})\n.join('');\n\nbBox.innerHTML=chips || '<span class=\"chip\">Autre<\/span>';\n\nbP.textContent=barrierOther ? 'Pr\u00e9cision : '+barrierOther : '';\n\nbP.style.display=barrierOther ? '' : 'none';\n\n}else{\n\nbS.style.display='none';\n\n}\n\ndocument.getElementById('cl-resultAction').textContent=actionText;\n\ndocument.querySelectorAll('[id^=\"'+P+'-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('cl-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\ndocument.getElementById('cl-decisionDesc').value='';\n\nfor(let i=1;i<=4;i++){\n\ndocument.querySelector('.cl-optName[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value='';\n\n}\n\ndocument.getElementById('cl-needsOptions').innerHTML='';\n\ndocument.getElementById('cl-mostAligned').innerHTML='<option value=\"\">\u2014 Choisir une option \u2014<\/option>';\n\ndocument.querySelectorAll('.cl-barrier').forEach(function(cb){\ncb.checked=false;\n});\n\ndocument.getElementById('cl-barrierOther').value='';\n\ndocument.querySelectorAll('input[name=\"cl-nextStepAction\"]').forEach(function(r){\nr.checked=false;\n});\n\ndocument.getElementById('cl-nextStepOther').value='';\n\n[\n'cl-hint1',\n'cl-hint2',\n'cl-hint5'\n].forEach(function(id){\n\ndocument.getElementById(id).classList.remove('show');\n\n});\n\ndocument.getElementById('cl-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst data={\n\ndecisionDesc:document.getElementById('cl-decisionDesc').value,\n\noptions:[1,2,3,4].map(function(i){\n\nreturn{\n\nname:document.querySelector('.cl-optName[data-n=\"'+i+'\"]').value,\n\ngain:document.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value,\n\nloss:document.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value\n\n};\n\n}),\n\nneeds:Array.from(document.querySelectorAll('.cl-needs:checked')).map(function(cb){\n\nreturn{\nopt:cb.dataset.opt,\nvalue:cb.value\n};\n\n}),\n\nmostAligned:document.getElementById('cl-mostAligned').value,\n\nbarriers:Array.from(document.querySelectorAll('.cl-barrier:checked')).map(function(cb){\nreturn cb.value;\n}),\n\nbarrierOther:document.getElementById('cl-barrierOther').value,\n\nnextStepAction:(document.querySelector('input[name=\"cl-nextStepAction\"]:checked') || {}).value || '',\n\nnextStepOther:document.getElementById('cl-nextStepOther').value,\n\ncurrentStep:currentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nif(typeof data.decisionDesc==='string')\n\ndocument.getElementById('cl-decisionDesc').value=data.decisionDesc;\n\nif(Array.isArray(data.options)){\n\ndata.options.forEach(function(o,idx){\n\nconst i=idx+1;\n\nif(i>4) return;\n\ndocument.querySelector('.cl-optName[data-n=\"'+i+'\"]').value=o.name || '';\n\ndocument.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value=o.gain || '';\n\ndocument.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value=o.loss || '';\n\n});\n\n}\n\nif(\ndata.options &&\ndata.options.filter(function(o){\nreturn o.name && o.name.trim();\n}).length>=2\n){\n\nbuildNeedsStep();\n\nbuildMostAligned();\n\n}\n\nif(Array.isArray(data.needs)){\n\ndata.needs.forEach(function(n){\n\nconst cb=document.querySelector(\n'.cl-needs[data-opt=\"'+n.opt+'\"][value=\"'+n.value+'\"]'\n);\n\nif(cb) cb.checked=true;\n\n});\n\n}\n\nif(typeof data.mostAligned==='string'){\n\nconst select=document.getElementById('cl-mostAligned');\n\nconst m=Array.from(select.options).find(function(o){\nreturn o.value===data.mostAligned;\n});\n\nif(m) select.value=data.mostAligned;\n\n}\n\nif(Array.isArray(data.barriers))\n\ndocument.querySelectorAll('.cl-barrier').forEach(function(cb){\n\ncb.checked=data.barriers.indexOf(cb.value)!==-1;\n\n});\n\nif(typeof data.barrierOther==='string')\n\ndocument.getElementById('cl-barrierOther').value=data.barrierOther;\n\nif(data.nextStepAction){\n\nconst r=document.querySelector(\n'input[name=\"cl-nextStepAction\"][value=\"'+CSS.escape(data.nextStepAction)+'\"]'\n);\n\nif(r) r.checked=true;\n\n}\n\nif(typeof data.nextStepOther==='string')\n\ndocument.getElementById('cl-nextStepOther').value=data.nextStepOther;\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('cl-resultBox').classList.contains('show')) return;\n\nupdateProgressTool(\nP,\ncurrentStepTool(P,TOTAL),\nTOTAL\n);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-clarifier')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-clarifier')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.CL=CL;\n\n\n\/* ============================================================\nOUTIL 3 \u2014 ET SI UNE AUTRE VOIE \u00c9TAIT POSSIBLE ?\n============================================================ *\/\n\nconst VO=(function(){\n\nconst P='vo',\nKEY='jiris_autre_voie_v1',\nTOTAL=5;\n\nconst QUESTIONS=[\n{\nid:'vo-q1',\nlabel:'Explorer en attendant'\n},\n{\nid:'vo-q2',\nlabel:'Solution \u00ab ni l\\'un ni l\\'autre \u00bb'\n},\n{\nid:'vo-q3',\nlabel:'10 % de libert\u00e9 en plus'\n},\n{\nid:'vo-q4',\nlabel:'Exemple inspirant'\n},\n{\nid:'vo-q5',\nlabel:'Option \u00ab suffisamment bonne \u00bb'\n}\n];\n\nfunction goToStep(n){\n\nif(n===2){\n\nif(!document.getElementById('vo-blockageDesc').value.trim()){\n\ndocument.getElementById('vo-hint1').classList.add('show');\n\ndocument.getElementById('vo-blockageDesc').focus();\n\nreturn;\n\n}\n\ndocument.getElementById('vo-hint1').classList.remove('show');\n\n}\n\nif(n===4) buildPathsList();\n\nif(n===5 && !validatePathSelection()) return;\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction buildPathsList(){\n\nconst container=document.getElementById('vo-pathsList');\n\nconst emptyMsg=document.getElementById('vo-pathsEmpty');\n\nconst otherField=document.getElementById('vo-otherPathField');\n\nconst prevRadio=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst prevValue=prevRadio ? prevRadio.value : '';\n\nconst prevOther=document.getElementById('vo-otherPath').value;\n\nconst available=QUESTIONS\n.map(function(q){\n\nreturn{\nid:q.id,\nlabel:q.label,\nvalue:document.getElementById(q.id).value.trim()\n};\n\n})\n.filter(function(q){\nreturn q.value;\n});\n\nif(!available.length){\n\ncontainer.innerHTML='';\n\ncontainer.style.display='none';\n\notherField.style.display='none';\n\nemptyMsg.style.display='block';\n\nreturn;\n\n}\n\ncontainer.style.display='';\n\nemptyMsg.style.display='none';\n\nlet html='';\n\navailable.forEach(function(p){\n\nhtml+='<label class=\"path-option\">';\n\nhtml+='<input type=\"radio\" name=\"vo-selectedPath\" value=\"'+escapeHtml(p.value)+'\" data-label=\"'+escapeHtml(p.label)+'\" data-qid=\"'+p.id+'\">';\n\nhtml+='<span class=\"radio-dot\"><\/span>';\n\nhtml+='<span class=\"path-q\">'+escapeHtml(p.label)+'<\/span>';\n\nhtml+='<span class=\"path-a\">'+escapeHtml(p.value)+'<\/span>';\n\nhtml+='<\/label>';\n\n});\n\nhtml+='<label class=\"path-option path-other\">';\n\nhtml+='<input type=\"radio\" name=\"vo-selectedPath\" value=\"__autre__\" data-label=\"Autre\" data-qid=\"other\">';\n\nhtml+='<span class=\"radio-dot\"><\/span>';\n\nhtml+='<span class=\"path-q\">Autre<\/span>';\n\nhtml+='<span class=\"path-a\">\u00c9crire une nouvelle piste<\/span>';\n\nhtml+='<\/label>';\n\ncontainer.innerHTML=html;\n\nif(prevValue){\n\ncontainer.querySelectorAll(\n'input[name=\"vo-selectedPath\"]'\n).forEach(function(r){\n\nif(r.value===prevValue) r.checked=true;\n\n});\n\n}\n\ndocument.getElementById('vo-otherPath').value=prevOther;\n\ncontainer.querySelectorAll(\n'input[name=\"vo-selectedPath\"]'\n).forEach(function(r){\n\nr.addEventListener('change',toggleOtherField);\n\n});\n\ntoggleOtherField();\n\n}\n\nfunction toggleOtherField(){\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst otherField=document.getElementById('vo-otherPathField');\n\nif(selected && selected.value==='__autre__')\n\notherField.style.display='block';\n\nelse\n\notherField.style.display='none';\n\n}\n\nfunction validatePathSelection(){\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst hint=document.getElementById('vo-hint4');\n\nif(!selected){\n\nhint.textContent='Choisis une piste pour continuer.';\n\nhint.classList.add('show');\n\nreturn false;\n\n}\n\nif(selected.value==='__autre__'){\n\nconst other=document.getElementById('vo-otherPath').value.trim();\n\nif(!other){\n\nhint.textContent='D\u00e9cris ta piste dans le champ ci-dessus.';\n\nhint.classList.add('show');\n\ndocument.getElementById('vo-otherPath').focus();\n\nreturn false;\n\n}\n\n}\n\nhint.classList.remove('show');\n\nreturn true;\n\n}\n\nfunction showResult(){\n\nif(!validatePathSelection()) return;\n\nconst blockage=\ndocument.getElementById('vo-blockageDesc').value.trim()\n|| 'cette situation';\n\nconst eitherOr=\ndocument.getElementById('vo-eitherOr').value.trim();\n\nconst explored=QUESTIONS\n.map(function(q){\n\nreturn{\nlabel:q.label,\nvalue:document.getElementById(q.id).value.trim()\n};\n\n})\n.filter(function(q){\nreturn q.value;\n});\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nlet chosenPath,\npathLabel;\n\nif(selected.value==='__autre__'){\n\nchosenPath=document.getElementById('vo-otherPath').value.trim();\n\npathLabel='Autre';\n\n}else{\n\nchosenPath=selected.value;\n\npathLabel=selected.dataset.label || '';\n\n}\n\nconst oldQ=document.getElementById('vo-oldQuestion').value.trim();\n\nconst newQ=\ndocument.getElementById('vo-newQuestion').value.trim()\n||\n\"Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ?\";\n\ndocument.getElementById('vo-resultBlockage').textContent=blockage;\n\nconst eoSection=document.getElementById('vo-section-eitheror');\n\nif(eitherOr){\n\neoSection.style.display='';\n\ndocument.getElementById('vo-resultEitherOr').textContent=\n'\u00ab '+eitherOr+' \u00bb';\n\n}else{\n\neoSection.style.display='none';\n\n}\n\nconst eS=document.getElementById('vo-section-explored');\n\nconst eL=document.getElementById('vo-resultExplored');\n\nif(explored.length){\n\neS.style.display='';\n\nlet html='';\n\nexplored.forEach(function(q){\n\nhtml+=\n'<li><span class=\"q-label\">'+\nescapeHtml(q.label)+\n'<\/span>'+\nescapeHtml(q.value)+\n'<\/li>';\n\n});\n\neL.innerHTML=html;\n\n}else{\n\neS.style.display='none';\n\n}\n\ndocument.getElementById('vo-resultPath').textContent=chosenPath;\n\nconst origin=document.getElementById('vo-resultPathOrigin');\n\nif(pathLabel && pathLabel!=='Autre'){\n\norigin.textContent='Issue de la question : '+pathLabel;\n\norigin.style.display='';\n\n}else if(pathLabel==='Autre'){\n\norigin.textContent='Piste formul\u00e9e librement';\n\norigin.style.display='';\n\n}else{\n\norigin.style.display='none';\n\n}\n\nconst shiftBox=document.getElementById('vo-resultQuestionShift');\n\nlet html='';\n\nif(oldQ)\n\nhtml+=\n'<div class=\"shift-item old\"><span class=\"mark\">\u2715<\/span><span>'+\nescapeHtml(oldQ)+\n'<\/span><\/div>';\n\nhtml+=\n'<div class=\"shift-item new\"><span class=\"mark\">\u2192<\/span><span>'+\nescapeHtml(newQ)+\n'<\/span><\/div>';\n\nshiftBox.innerHTML=html;\n\ndocument.querySelectorAll('[id^=\"'+P+'-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('vo-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\n[\n'vo-blockageDesc',\n'vo-eitherOr',\n'vo-q1',\n'vo-q2',\n'vo-q3',\n'vo-q4',\n'vo-q5',\n'vo-otherPath',\n'vo-oldQuestion',\n'vo-newQuestion'\n].forEach(function(id){\n\ndocument.getElementById(id).value='';\n\n});\n\ndocument.getElementById('vo-pathsList').innerHTML='';\n\ndocument.getElementById('vo-pathsEmpty').style.display='none';\n\ndocument.getElementById('vo-otherPathField').style.display='none';\n\n[\n'vo-hint1',\n'vo-hint4'\n].forEach(function(id){\n\ndocument.getElementById(id).classList.remove('show');\n\n});\n\ndocument.getElementById('vo-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst data={\n\nblockageDesc:\ndocument.getElementById('vo-blockageDesc').value,\n\neitherOr:\ndocument.getElementById('vo-eitherOr').value,\n\nq1:document.getElementById('vo-q1').value,\n\nq2:document.getElementById('vo-q2').value,\n\nq3:document.getElementById('vo-q3').value,\n\nq4:document.getElementById('vo-q4').value,\n\nq5:document.getElementById('vo-q5').value,\n\nselectedPath:selected ? selected.value : '',\n\notherPath:document.getElementById('vo-otherPath').value,\n\noldQuestion:document.getElementById('vo-oldQuestion').value,\n\nnewQuestion:document.getElementById('vo-newQuestion').value,\n\ncurrentStep:currentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nconst map={\n\nblockageDesc:'vo-blockageDesc',\n\neitherOr:'vo-eitherOr',\n\nq1:'vo-q1',\n\nq2:'vo-q2',\n\nq3:'vo-q3',\n\nq4:'vo-q4',\n\nq5:'vo-q5',\n\notherPath:'vo-otherPath',\n\noldQuestion:'vo-oldQuestion',\n\nnewQuestion:'vo-newQuestion'\n\n};\n\nObject.keys(map).forEach(function(k){\n\nif(typeof data[k]==='string')\n\ndocument.getElementById(map[k]).value=data[k];\n\n});\n\nif(data.selectedPath)\n\nwindow.__jirisPrevPath=data.selectedPath;\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('vo-resultBox').classList.contains('show')) return;\n\nconst cur=currentStepTool(P,TOTAL);\n\nif(cur>=4){\n\nbuildPathsList();\n\nif(window.__jirisPrevPath){\n\ndocument.querySelectorAll(\n'input[name=\"vo-selectedPath\"]'\n).forEach(function(r){\n\nif(r.value===window.__jirisPrevPath)\nr.checked=true;\n\n});\n\ntoggleOtherField();\n\n}\n\n}\n\nupdateProgressTool(P,cur,TOTAL);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-voie')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-voie')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.VO=VO;\n\n\n\/* ============================================================\nOUTIL 4 \u2014 MES FORCES ET MES RESSOURCES\n============================================================ *\/\n\nconst FO=(function(){\n\nconst P='fo',\nKEY='jiris_forces_ressources_v1',\nTOTAL=7;\n\nfunction goToStep(n){\n\nif(n===2){\n\nconst any=document.querySelector('.fo-inner:checked');\n\nconst other=document.getElementById('fo-innerOther').value.trim();\n\nif(!any && !other){\n\ndocument.getElementById('fo-hint1').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('fo-hint1').classList.remove('show');\n\n}\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction showResult(){\n\nconst phrase=document.getElementById('fo-resourcePhrase').value.trim();\n\nif(!phrase){\n\ndocument.getElementById('fo-hint7').classList.add('show');\n\ndocument.getElementById('fo-resourcePhrase').focus();\n\nreturn;\n\n}\n\ndocument.getElementById('fo-hint7').classList.remove('show');\n\nconst inners=Array.from(\ndocument.querySelectorAll('.fo-inner:checked')\n).map(function(c){\nreturn c.value;\n});\n\nconst innerOther=\ndocument.getElementById('fo-innerOther').value.trim();\n\nconst learnings=\ndocument.getElementById('fo-learnings').value.trim();\n\nconst peoples=Array.from(\ndocument.querySelectorAll('.fo-people:checked')\n).map(function(c){\nreturn c.value;\n});\n\nconst peopleDetail=\ndocument.getElementById('fo-peopleDetail').value.trim();\n\nconst envs=Array.from(\ndocument.querySelectorAll('.fo-env:checked')\n).map(function(c){\nreturn c.value;\n});\n\nconst envOther=\ndocument.getElementById('fo-envOther').value.trim();\n\nconst smallHelp=\ndocument.getElementById('fo-smallHelp').value.trim();\n\nconst toMobilize=\ndocument.getElementById('fo-toMobilize').value.trim();\n\nconst iS=document.getElementById('fo-section-inner');\n\nconst iB=document.getElementById('fo-resultInner');\n\nconst innerList=inners.filter(function(v){\nreturn v!=='Autre';\n});\n\nconst chips=[];\n\ninnerList.forEach(function(v){\n\nchips.push(\n'<span class=\"chip\">'+\nescapeHtml(v)+\n'<\/span>'\n);\n\n});\n\nif(innerOther)\n\nchips.push(\n'<span class=\"chip\">'+\nescapeHtml(innerOther)+\n'<\/span>'\n);\n\nif(chips.length){\n\niS.style.display='';\n\niB.innerHTML=chips.join('');\n\n}else{\n\niS.style.display='none';\n\n}\n\nconst lS=document.getElementById('fo-section-learnings');\n\nif(learnings){\n\nlS.style.display='';\n\ndocument.getElementById('fo-resultLearnings').textContent=learnings;\n\n}else{\n\nlS.style.display='none';\n\n}\n\nconst pS=document.getElementById('fo-section-people');\n\nconst pB=document.getElementById('fo-resultPeople');\n\nconst pD=document.getElementById('fo-resultPeopleDetail');\n\nconst pf=peoples.filter(function(p){\nreturn p!=='Une personne en particulier';\n});\n\nif(pf.length || peopleDetail){\n\npS.style.display='';\n\npB.innerHTML=pf.map(function(p){\n\nreturn '<span class=\"chip\">'+escapeHtml(p)+'<\/span>';\n\n}).join('');\n\npD.textContent=peopleDetail\n? 'Pr\u00e9cision : '+peopleDetail\n: '';\n\npD.style.display=peopleDetail ? '' : 'none';\n\n}else{\n\npS.style.display='none';\n\n}\n\nconst eS=document.getElementById('fo-section-env');\n\nconst eB=document.getElementById('fo-resultEnv');\n\nconst eP=document.getElementById('fo-resultEnvOther');\n\nconst ef=envs.filter(function(v){\nreturn v!=='Autre';\n});\n\nif(ef.length || envOther){\n\neS.style.display='';\n\neB.innerHTML=ef.map(function(v){\n\nreturn '<span class=\"chip\">'+escapeHtml(v)+'<\/span>';\n\n}).join('');\n\neP.textContent=envOther\n? 'Pr\u00e9cision : '+envOther\n: '';\n\neP.style.display=envOther ? '' : 'none';\n\n}else{\n\neS.style.display='none';\n\n}\n\nconst sS=document.getElementById('fo-section-smallhelp');\n\nif(smallHelp){\n\nsS.style.display='';\n\ndocument.getElementById('fo-resultSmallHelp').textContent=smallHelp;\n\n}else{\n\nsS.style.display='none';\n\n}\n\nconst mS=document.getElementById('fo-section-mobilize');\n\nif(toMobilize){\n\nmS.style.display='';\n\ndocument.getElementById('fo-resultMobilize').textContent=toMobilize;\n\n}else{\n\nmS.style.display='none';\n\n}\n\ndocument.getElementById('fo-resultPhrase').textContent=phrase;\n\ndocument.querySelectorAll('[id^=\"'+P+'-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('fo-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\ndocument.querySelectorAll(\n'.fo-inner, .fo-people, .fo-env'\n).forEach(function(cb){\n\ncb.checked=false;\n\n});\n\n[\n'fo-innerOther',\n'fo-learnings',\n'fo-peopleDetail',\n'fo-envOther',\n'fo-smallHelp',\n'fo-toMobilize',\n'fo-resourcePhrase'\n].forEach(function(id){\n\ndocument.getElementById(id).value='';\n\n});\n\n[\n'fo-hint1',\n'fo-hint7'\n].forEach(function(id){\n\ndocument.getElementById(id).classList.remove('show');\n\n});\n\ndocument.getElementById('fo-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst data={\n\ninner:Array.from(\ndocument.querySelectorAll('.fo-inner:checked')\n).map(function(c){\nreturn c.value;\n}),\n\ninnerOther:\ndocument.getElementById('fo-innerOther').value,\n\nlearnings:\ndocument.getElementById('fo-learnings').value,\n\npeople:Array.from(\ndocument.querySelectorAll('.fo-people:checked')\n).map(function(c){\nreturn c.value;\n}),\n\npeopleDetail:\ndocument.getElementById('fo-peopleDetail').value,\n\nenv:Array.from(\ndocument.querySelectorAll('.fo-env:checked')\n).map(function(c){\nreturn c.value;\n}),\n\nenvOther:\ndocument.getElementById('fo-envOther').value,\n\nsmallHelp:\ndocument.getElementById('fo-smallHelp').value,\n\ntoMobilize:\ndocument.getElementById('fo-toMobilize').value,\n\nresourcePhrase:\ndocument.getElementById('fo-resourcePhrase').value,\n\ncurrentStep:\ncurrentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nif(Array.isArray(data.inner))\n\ndocument.querySelectorAll('.fo-inner').forEach(function(cb){\n\ncb.checked=data.inner.indexOf(cb.value)!==-1;\n\n});\n\nif(Array.isArray(data.people))\n\ndocument.querySelectorAll('.fo-people').forEach(function(cb){\n\ncb.checked=data.people.indexOf(cb.value)!==-1;\n\n});\n\nif(Array.isArray(data.env))\n\ndocument.querySelectorAll('.fo-env').forEach(function(cb){\n\ncb.checked=data.env.indexOf(cb.value)!==-1;\n\n});\n\n[\n'innerOther',\n'learnings',\n'peopleDetail',\n'envOther',\n'smallHelp',\n'toMobilize',\n'resourcePhrase'\n].forEach(function(k){\n\nif(typeof data[k]==='string')\n\ndocument.getElementById('fo-'+k).value=data[k];\n\n});\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('fo-resultBox').classList.contains('show')) return;\n\nupdateProgressTool(\nP,\ncurrentStepTool(P,TOTAL),\nTOTAL\n);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-forces')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-forces')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.FO=FO;\n\n\n\/* ============================================================\nROUTAGE\n============================================================ *\/\n\nconst VIEWS=[\n'hub',\n'voix',\n'clarifier',\n'voie',\n'forces'\n];\n\nfunction route(){\n\nlet hash=(location.hash || '#hub').slice(1);\n\nif(VIEWS.indexOf(hash)===-1)\nhash='hub';\n\nVIEWS.forEach(function(v){\n\nconst el=document.getElementById('view-'+v);\n\nif(el)\nel.classList.toggle('active',v===hash);\n\n});\n\nwindow.scrollTo({\ntop:0,\nbehavior:'auto'\n});\n\nif(hash==='voix' && window.VX)\nVX.onEnter();\n\nif(hash==='clarifier' && window.CL)\nCL.onEnter();\n\nif(hash==='voie' && window.VO)\nVO.onEnter();\n\nif(hash==='forces' && window.FO)\nFO.onEnter();\n\n}\n\nwindow.addEventListener('hashchange',route);\n\nwindow.addEventListener('DOMContentLoaded',function(){\n\nif(!location.hash)\nhistory.replaceState(null,'','#hub');\n\nroute();\n\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>Accueil Explorer mes possibilit\u00e9s \u00b7 Hub JIRIS \u2190 Retour au hub Explorer mes possibilit\u00e9s Prendre un pas de recul pour clarifier o\u00f9 vous en \u00eates, identifier ce qui compte pour vous et ouvrir de nouvelles perspectives. \u00c0 votre rythme, explorez ce qui vous anime, clarifiez vos choix et appuyez-vous sur vos forces pour avancer avec […]<\/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-3873","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3873","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=3873"}],"version-history":[{"count":61,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3873\/revisions"}],"predecessor-version":[{"id":5042,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3873\/revisions\/5042"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=3873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

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

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nExplorer mes possibilit\u00e9s \u00b7 Hub JIRIS<\/title>\n\n<style>\n:root{\n--bg:#f4f7fa;\n--surface:#ffffff;\n--ink:#1b2f3d;\n--ink-soft:#55677a;\n--line:#e4ecf3;\n--primary:#3d7ea6;\n--primary-dark:#2c6288;\n--primary-soft:#eef5fa;\n--radius:16px;\n--radius-lg:24px;\n--shadow-sm:0 2px 8px rgba(29,54,74,.06);\n--shadow-md:0 12px 30px rgba(29,54,74,.08);\n--shadow-hover:0 16px 40px rgba(29,54,74,.12);\n}\n\n*,*::before,*::after{box-sizing:border-box;}\n\nbody{\nmargin:0;\nfont-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\nbackground:#ffffff;\ncolor:var(--ink);\nline-height:1.65;\n-webkit-font-smoothing:antialiased;\ntext-rendering:optimizeLegibility;\n}\n\n.wrap{\nmax-width:960px;\nmargin:0 auto;\npadding:0 20px;\n}\n\n.wrap-narrow{\nmax-width:800px;\nmargin:0 auto;\npadding:0 20px;\n}\n\n\/* Cadre principal de l'interface *\/\n.hub-shell{\nmax-width:1000px;\nmargin:24px auto;\nbackground:var(--bg);\nborder-radius:24px;\noverflow:hidden;\n}\n\n@media(max-width:520px){\n.hub-shell{\nmargin:12px 0;\nborder-radius:18px;\n}\n}\n\n\/* Vues *\/\n.hub-view{display:none;}\n.hub-view.active{display:block;}\n.tool-view{display:none;}\n.tool-view.active{display:block;}\n\n\/* HUB *\/\nheader.hub-head{\nposition:relative;\nbackground:linear-gradient(180deg,#fbfdff 0%,var(--bg) 100%);\npadding:50px 0 30px;\nborder-bottom:1px solid var(--line);\ntext-align:center;\n}\n\n\/* ---------- Bouton \u00ab Retour au hub \u00bb ---------- *\/\n.back-to-hub{\nposition:absolute;\ntop:20px;\nleft:20px;\ndisplay:inline-flex;\nalign-items:center;\ngap:8px;\npadding:8px 16px;\nfont-size:.85rem;\nfont-weight:600;\ncolor:var(--primary-dark);\nbackground:var(--surface);\nborder:1px solid #dbe8f1;\nborder-radius:999px;\ntext-decoration:none;\nbox-shadow:var(--shadow-sm);\ncursor:pointer;\ntransition:background .2s ease,border-color .2s ease,transform .2s ease;\nz-index:5;\n}\n.back-to-hub:hover,\n.back-to-hub:focus-visible{\nbackground:var(--primary-soft);\nborder-color:#c3ddec;\ntransform:translateX(-2px);\n}\n.back-to-hub:focus-visible{\noutline:3px solid rgba(61,126,166,.35);\noutline-offset:3px;\n}\n\nheader.hub-head h1{\nmargin:0 0 12px;\nfont-size:clamp(2rem,4vw,2.6rem);\nfont-weight:800;\ncolor:var(--ink);\nletter-spacing:-0.02em;\n}\n\nheader.hub-head p{\nmargin:0 auto;\nmax-width:640px;\nfont-size:1.05rem;\ncolor:var(--ink-soft);\n}\n\n.hub-head p + p{\nmargin-top:12px;\n}\n\nmain.hub-main{\npadding:45px 0 60px;\n}\n\n.grid{\ndisplay:grid;\ngrid-template-columns:repeat(auto-fit,minmax(420px,1fr));\ngap:24px;\n}\n\n@media(max-width:520px){\n.grid{\ngrid-template-columns:1fr;\n}\n}\n\n.card{\nbackground:var(--surface);\nborder:1px solid var(--line);\nborder-radius:var(--radius-lg);\npadding:32px;\nbox-shadow:var(--shadow-sm);\ntransition:all .25s ease;\ndisplay:flex;\nflex-direction:column;\njustify-content:space-between;\nposition:relative;\noverflow:hidden;\ntext-decoration:none;\ncolor:inherit;\n}\n\n.card:hover{\ntransform:translateY(-4px);\nbox-shadow:var(--shadow-hover);\nborder-color:#cbdceb;\n}\n\n.card-tag{\ndisplay:inline-block;\nmargin-bottom:14px;\npadding:5px 14px;\nfont-size:.78rem;\nfont-weight:700;\ntext-transform:uppercase;\nletter-spacing:0.04em;\nborder-radius:999px;\n}\n\n.card h2{\nmargin:0 0 10px;\nfont-size:1.35rem;\nfont-weight:750;\ncolor:var(--ink);\n}\n\n.card p{\nmargin:0 0 24px;\nfont-size:.95rem;\ncolor:var(--ink-soft);\nline-height:1.6;\n}\n\n.card-footer{\ndisplay:flex;\nalign-items:center;\njustify-content:space-between;\npadding-top:20px;\nborder-top:1px solid var(--line);\n}\n\n.card-meta{\nfont-size:.82rem;\nfont-weight:600;\ncolor:var(--ink-soft);\n}\n\n.btn{\ndisplay:inline-flex;\nalign-items:center;\ngap:8px;\npadding:10px 20px;\nfont-family:inherit;\nfont-size:.9rem;\nfont-weight:650;\nborder-radius:10px;\ntext-decoration:none;\ntransition:background .2s ease;\nborder:none;\ncursor:pointer;\n}\n\n.card.t-green .card-tag{\ncolor:#275f47;\nbackground:#e9f6f0;\n}\n\n.card.t-green .btn{\nbackground:#3f9a72;\ncolor:#fff;\n}\n\n.card.t-green .btn:hover{\nbackground:#368a64;\n}\n\n.card.t-blue .card-tag{\ncolor:#2c6288;\nbackground:#eef5fa;\n}\n\n.card.t-blue .btn{\nbackground:#3d7ea6;\ncolor:#fff;\n}\n\n.card.t-blue .btn:hover{\nbackground:#2c6288;\n}\n\n.card.t-purple .card-tag{\ncolor:#6b4f96;\nbackground:#f2eef9;\n}\n\n.card.t-purple .btn{\nbackground:#8163b0;\ncolor:#fff;\n}\n\n.card.t-purple .btn:hover{\nbackground:#6b4f96;\n}\n\n.card.t-orange .card-tag{\ncolor:#b85e23;\nbackground:#fef3ec;\n}\n\n.card.t-orange .btn{\nbackground:#d97736;\ncolor:#fff;\n}\n\n.card.t-orange .btn:hover{\nbackground:#b85e23;\n}\n\nfooter.hub-foot{\nmargin-top:20px;\npadding:30px 20px 50px;\ntext-align:center;\nfont-size:.86rem;\ncolor:#7b8b9b;\nborder-top:1px solid var(--line);\n}\n\n\/* OUTILS *\/\n.tool-view[data-tool=\"voix\"]{\n--accent:#3f9a72;\n--accent-dark:#2f7e5c;\n--accent-soft:#e9f6f0;\n--accent-ring:rgba(63,154,114,.35);\n}\n\n.tool-view[data-tool=\"clarifier\"]{\n--accent:#3d7ea6;\n--accent-dark:#2c6288;\n--accent-soft:#eef5fa;\n--accent-ring:rgba(61,126,166,.35);\n}\n\n.tool-view[data-tool=\"voie\"]{\n--accent:#8163b0;\n--accent-dark:#6b4f96;\n--accent-soft:#f2eef9;\n--accent-ring:rgba(129,99,176,.35);\n}\n\n.tool-view[data-tool=\"forces\"]{\n--accent:#d97736;\n--accent-dark:#b85e23;\n--accent-soft:#fef3ec;\n--accent-ring:rgba(217,119,54,.35);\n}\n\n.tool-topbar{\nbackground:linear-gradient(180deg,#fbfdff 0%,var(--bg) 100%);\nborder-bottom:1px solid var(--line);\npadding:22px 0 0;\n}\n\n.back-link{\ndisplay:inline-flex;\nalign-items:center;\ngap:8px;\npadding:8px 16px;\nfont-size:.88rem;\nfont-weight:600;\ncolor:var(--primary-dark);\nbackground:var(--surface);\nborder:1px solid #dbe8f1;\nborder-radius:999px;\ntext-decoration:none;\nbox-shadow:var(--shadow-sm);\ncursor:pointer;\ntransition:background .2s ease,border-color .2s ease,transform .2s ease;\n}\n\n.back-link:hover,\n.back-link:focus-visible{\nbackground:var(--primary-soft);\nborder-color:#c3ddec;\ntransform:translateX(-2px);\n}\n\n.back-link:focus-visible{\noutline:3px solid var(--accent-ring);\noutline-offset:3px;\n}\n\n.tool-head{\npadding:22px 0 26px;\n}\n\n.tool-head h1{\nmargin:0 0 8px;\nfont-size:clamp(1.5rem,3.4vw,1.95rem);\nline-height:1.25;\nletter-spacing:-.02em;\nfont-weight:750;\ncolor:var(--ink);\n}\n\n.tool-head p{\nmargin:0;\nmax-width:640px;\nfont-size:.98rem;\ncolor:var(--ink-soft);\n}\n\n.progress{\nposition:sticky;\ntop:0;\nz-index:10;\nbackground:rgba(244,247,250,.92);\nbackdrop-filter:blur(8px);\n-webkit-backdrop-filter:blur(8px);\nborder-bottom:1px solid var(--line);\npadding:14px 0 16px;\n}\n\n.progress-inner{\ndisplay:flex;\nalign-items:center;\ngap:14px;\n}\n\n.progress-track{\nflex:1;\nheight:6px;\nbackground:#e2ebf2;\nborder-radius:999px;\noverflow:hidden;\n}\n\n.progress-fill{\nheight:100%;\nwidth:0;\nbackground:linear-gradient(90deg,var(--accent),var(--accent-soft));\nborder-radius:999px;\ntransition:width .35s ease;\n}\n\n.progress-label{\nfont-size:.82rem;\nfont-weight:600;\ncolor:var(--ink-soft);\nwhite-space:nowrap;\nletter-spacing:.02em;\n}\n\nmain.tool-main{\npadding:32px 0 0;\n}\n\n.step{\nbackground:var(--surface);\nborder:1px solid var(--line);\nborder-radius:var(--radius-lg);\npadding:clamp(22px,4vw,34px);\nbox-shadow:var(--shadow-sm);\nanimation:fade-in .3s ease;\n}\n\n.step.hidden{\ndisplay:none;\n}\n\n@keyframes fade-in{\nfrom{\nopacity:0;\ntransform:translateY(6px);\n}\nto{\nopacity:1;\ntransform:translateY(0);\n}\n}\n\n.step h2{\nmargin:0 0 6px;\nfont-size:1.22rem;\nfont-weight:700;\nletter-spacing:-.01em;\ncolor:var(--ink);\n}\n\n.step .step-intro{\nmargin:0 0 22px;\nfont-size:.95rem;\ncolor:var(--ink-soft);\n}\n\n.field{\nmargin-bottom:18px;\n}\n\n.field:last-child{\nmargin-bottom:0;\n}\n\n.field label,\n.step > label{\ndisplay:block;\nmargin-bottom:7px;\nfont-size:.92rem;\nfont-weight:600;\ncolor:var(--ink);\n}\n\nlabel .opt{\nfont-weight:400;\nfont-size:.82rem;\ncolor:#8b9aa9;\nmargin-left:4px;\n}\n\ninput[type=\"text\"],\ntextarea,\nselect{\nwidth:100%;\npadding:11px 14px;\nfont-family:inherit;\nfont-size:.95rem;\ncolor:var(--ink);\nbackground:#fbfdff;\nborder:1px solid #d8e3ec;\nborder-radius:10px;\ntransition:border-color .18s ease,background .18s ease,box-shadow .18s ease;\n}\n\ninput[type=\"text\"]::placeholder,\ntextarea::placeholder{\ncolor:#9aacbc;\n}\n\ninput[type=\"text\"]:focus,\ntextarea:focus,\nselect:focus{\noutline:none;\nbackground:#fff;\nborder-color:var(--accent);\nbox-shadow:0 0 0 3px var(--accent-ring);\n}\n\ntextarea{\nmin-height:88px;\nresize:vertical;\nline-height:1.55;\n}\n\nselect{\nappearance:none;\nbackground-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7b8c' d='M6 8 0 0h12z'\/><\/svg>\");\nbackground-repeat:no-repeat;\nbackground-position:right 14px center;\npadding-right:38px;\ncursor:pointer;\n}\n\n.choices{\ndisplay:grid;\ngap:10px;\nmargin-bottom:18px;\n}\n\n.choices--inline{\ngrid-template-columns:repeat(auto-fit,minmax(180px,1fr));\n}\n\n.choice{\nposition:relative;\ndisplay:flex;\nalign-items:flex-start;\ngap:12px;\npadding:13px 16px;\nbackground:#fbfdff;\nborder:1px solid #d8e3ec;\nborder-radius:12px;\ncursor:pointer;\nfont-size:.94rem;\nfont-weight:500;\ncolor:var(--ink);\ntransition:border-color .18s ease,background .18s ease,box-shadow .18s ease;\n}\n\n.choice:hover{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.choice input{\nposition:absolute;\nopacity:0;\npointer-events:none;\n}\n\n.choice .box{\nflex:0 0 20px;\nwidth:20px;\nheight:20px;\nmargin-top:1px;\nborder:2px solid #c3d3e0;\nborder-radius:6px;\nbackground:#fff;\ndisplay:grid;\nplace-items:center;\ntransition:background .18s ease,border-color .18s ease;\n}\n\n.choice .box::after{\ncontent:\"\";\nwidth:10px;\nheight:10px;\nborder-radius:3px;\nbackground:#fff;\ntransform:scale(0);\ntransition:transform .18s ease;\n}\n\n.choice input[type=\"radio\"] + .box{\nborder-radius:50%;\n}\n\n.choice input[type=\"radio\"] + .box::after{\nborder-radius:50%;\n}\n\n.choice input:checked + .box{\nbackground:var(--accent);\nborder-color:var(--accent);\n}\n\n.choice input:checked + .box::after{\ntransform:scale(1);\n}\n\n.choice:has(input:checked){\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.choice input:focus-visible + .box{\nbox-shadow:0 0 0 3px var(--accent-ring);\n}\n\n.open-question,\n.option-block,\n.thought-block{\npadding:20px;\nmargin-bottom:18px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-radius:14px;\ntransition:border-color .2s ease,background .2s ease;\n}\n\n.open-question:focus-within,\n.option-block:focus-within,\n.thought-block:focus-within{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.block-title{\ndisplay:inline-block;\nmargin:0 0 14px;\npadding:4px 12px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.06em;\ntext-transform:uppercase;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:999px;\n}\n\n.option-block .field:last-child,\n.thought-block .field:last-child,\n.open-question .field:last-child{\nmargin-bottom:0;\n}\n\n.q-head{\ndisplay:flex;\nalign-items:flex-start;\ngap:12px;\nmargin-bottom:12px;\n}\n\n.q-num{\nflex:0 0 auto;\ndisplay:grid;\nplace-items:center;\nwidth:28px;\nheight:28px;\nfont-size:.82rem;\nfont-weight:700;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:50%;\nmargin-top:1px;\n}\n\n.q-text{\nmargin:0;\nfont-size:.95rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.5;\n}\n\n.opt-title{\ndisplay:flex;\nalign-items:center;\ngap:10px;\nmargin:0 0 14px;\nfont-size:1rem;\nfont-weight:700;\ncolor:var(--ink);\n}\n\n.opt-title .opt-num{\ndisplay:grid;\nplace-items:center;\nwidth:26px;\nheight:26px;\nfont-size:.82rem;\nfont-weight:700;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:50%;\nflex:0 0 auto;\n}\n\n.paths-list{\ndisplay:grid;\ngap:12px;\nmargin-bottom:18px;\n}\n\n.path-option{\nposition:relative;\ndisplay:block;\npadding:18px 20px 18px 56px;\nbackground:#fbfdff;\nborder:1px solid #d8e3ec;\nborder-radius:14px;\ncursor:pointer;\ntransition:border-color .18s ease,background .18s ease,box-shadow .18s ease;\n}\n\n.path-option:hover{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\n}\n\n.path-option input{\nposition:absolute;\nopacity:0;\npointer-events:none;\n}\n\n.path-option .radio-dot{\nposition:absolute;\nleft:20px;\ntop:22px;\nwidth:22px;\nheight:22px;\nborder:2px solid #c3d3e0;\nborder-radius:50%;\nbackground:#fff;\ntransition:background .18s ease,border-color .18s ease,box-shadow .18s ease;\n}\n\n.path-option .radio-dot::after{\ncontent:\"\";\nposition:absolute;\ntop:50%;\nleft:50%;\nwidth:10px;\nheight:10px;\nborder-radius:50%;\nbackground:#fff;\ntransform:translate(-50%,-50%) scale(0);\ntransition:transform .18s ease;\n}\n\n.path-option input:checked ~ .radio-dot{\nbackground:var(--accent);\nborder-color:var(--accent);\n}\n\n.path-option input:checked ~ .radio-dot::after{\ntransform:translate(-50%,-50%) scale(1);\n}\n\n.path-option:has(input:checked){\nborder-color:var(--accent);\nbackground:var(--accent-soft);\nbox-shadow:0 4px 14px var(--accent-ring);\n}\n\n.path-option input:focus-visible ~ .radio-dot{\nbox-shadow:0 0 0 3px var(--accent-ring);\n}\n\n.path-option .path-q{\ndisplay:block;\nmargin-bottom:6px;\nfont-size:.74rem;\nfont-weight:700;\nletter-spacing:.06em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.path-option .path-a{\ndisplay:block;\nfont-size:.96rem;\ncolor:var(--ink);\nline-height:1.55;\nfont-weight:500;\n}\n\n.path-option.path-other .path-a{\ncolor:var(--ink-soft);\nfont-style:italic;\nfont-weight:400;\n}\n\n.hint{\ndisplay:none;\nmargin-top:16px;\npadding:12px 16px;\nfont-size:.89rem;\ncolor:#8a5a1f;\nbackground:#fdf3e2;\nborder:1px solid #f0dcb4;\nborder-radius:10px;\n}\n\n.hint.show{\ndisplay:block;\nanimation:fade-in .25s ease;\n}\n\n.hint--info{\ncolor:var(--accent-dark);\nbackground:var(--accent-soft);\nborder-color:var(--accent-ring);\n}\n\n.actions{\ndisplay:flex;\nflex-wrap:wrap;\ngap:12px;\nmargin-top:26px;\npadding-top:22px;\nborder-top:1px solid var(--line);\n}\n\n.actions .spacer{\nflex:1;\n}\n\n.btn-ghost{\ndisplay:inline-flex;\nalign-items:center;\njustify-content:center;\ngap:8px;\npadding:12px 24px;\nfont-family:inherit;\nfont-size:.95rem;\nfont-weight:650;\nborder-radius:10px;\ncursor:pointer;\ntext-decoration:none;\nbackground:#fff;\ncolor:var(--ink-soft);\nborder:1px solid #d8e3ec;\ntransition:background .18s ease,color .18s ease,border-color .18s ease;\n}\n\n.btn-ghost:hover{\nbackground:#f6fafd;\ncolor:var(--ink);\nborder-color:#c3d9e8;\n}\n\n.btn-primary{\ndisplay:inline-flex;\nalign-items:center;\njustify-content:center;\ngap:8px;\npadding:12px 24px;\nfont-family:inherit;\nfont-size:.95rem;\nfont-weight:650;\nborder-radius:10px;\ncursor:pointer;\ntext-decoration:none;\nborder:none;\nbackground:var(--accent);\ncolor:#fff;\nbox-shadow:0 4px 12px var(--accent-ring);\ntransition:background .18s ease,transform .18s ease,box-shadow .18s ease;\n}\n\n.btn-primary:hover{\nbackground:var(--accent-dark);\ntransform:translateY(-1px);\nbox-shadow:0 8px 18px var(--accent-ring);\n}\n\n.btn-primary:focus-visible,\n.btn-ghost:focus-visible{\noutline:3px solid var(--accent-ring);\noutline-offset:2px;\n}\n\n.result{\ndisplay:none;\nmargin-top:26px;\nbackground:var(--surface);\nborder:1px solid var(--line);\nborder-radius:var(--radius-lg);\nbox-shadow:var(--shadow-md);\noverflow:hidden;\nanimation:fade-in .35s ease;\n}\n\n.result.show{\ndisplay:block;\n}\n\n.result-head{\npadding:26px clamp(22px,4vw,34px) 22px;\nbackground:linear-gradient(135deg,var(--accent-soft),#fff);\nborder-bottom:1px solid var(--line);\n}\n\n.result-head h2{\nmargin:0 0 6px;\nfont-size:1.28rem;\nfont-weight:750;\ncolor:var(--accent-dark);\nletter-spacing:-.01em;\n}\n\n.result-head p{\nmargin:0;\nfont-size:.92rem;\ncolor:var(--ink-soft);\n}\n\n.result-body{\npadding:clamp(22px,4vw,32px);\n}\n\n.result-section{\nmargin-bottom:26px;\n}\n\n.result-section:last-child{\nmargin-bottom:0;\n}\n\n.result-section h3{\nmargin:0 0 12px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.08em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.result-section p{\nmargin:0;\nfont-size:.96rem;\ncolor:var(--ink-soft);\nline-height:1.7;\n}\n\n.result-section p strong{\ncolor:var(--ink);\n}\n\n.chips{\ndisplay:flex;\nflex-wrap:wrap;\ngap:8px;\nmargin-top:4px;\n}\n\n.chip{\ndisplay:inline-block;\npadding:5px 13px;\nfont-size:.84rem;\nfont-weight:600;\ncolor:var(--accent-dark);\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:999px;\n}\n\n.card-highlight{\npadding:16px 20px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-left:4px solid var(--accent);\nborder-radius:0 12px 12px 0;\nfont-size:1rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.55;\nwhite-space:pre-line;\n}\n\n.card-quote{\npadding:18px 22px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-left:4px solid var(--accent);\nborder-radius:0 12px 12px 0;\nfont-size:.96rem;\ncolor:var(--ink);\nline-height:1.6;\nwhite-space:pre-line;\n}\n\n.card-action{\ndisplay:flex;\ngap:14px;\nalign-items:flex-start;\npadding:18px 20px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:14px;\n}\n\n.card-action .icon{\nflex:0 0 auto;\nfont-size:1.4rem;\nline-height:1;\n}\n\n.card-action .label{\nmargin:0 0 3px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.08em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.card-action .text{\nmargin:0;\nfont-size:1rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.5;\nwhite-space:pre-line;\n}\n\n.card-phare{\npadding:24px 26px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:16px;\ntext-align:center;\n}\n\n.card-phare .mark{\ndisplay:block;\nmargin-bottom:10px;\nfont-size:1.5rem;\nline-height:1;\ncolor:var(--accent);\n}\n\n.card-phare .phare-text{\nmargin:0;\nfont-size:1.08rem;\nfont-weight:650;\ncolor:var(--ink);\nfont-style:italic;\nline-height:1.55;\n}\n\n.thought-list,\n.explored-list{\nlist-style:none;\nmargin:0;\npadding:0;\ndisplay:grid;\ngap:10px;\n}\n\n.thought-list li,\n.explored-list li{\npadding:12px 16px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-radius:12px;\nfont-size:.92rem;\ncolor:var(--ink-soft);\nline-height:1.55;\n}\n\n.thought-list li strong{\ncolor:var(--ink);\nfont-weight:600;\n}\n\n.thought-list .origin-tag{\ndisplay:inline-block;\nmargin-left:6px;\npadding:1px 9px;\nfont-size:.75rem;\nfont-weight:700;\ncolor:var(--accent);\nbackground:var(--accent-soft);\nborder-radius:999px;\n}\n\n.explored-list .q-label,\n.q-label{\ndisplay:block;\nmargin-bottom:4px;\nfont-size:.76rem;\nfont-weight:700;\nletter-spacing:.06em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.either-or-card{\npadding:16px 20px;\nbackground:var(--accent-soft);\nborder:1px dashed var(--accent-ring);\nborder-radius:12px;\nfont-size:.95rem;\nfont-style:italic;\ncolor:var(--accent-dark);\nline-height:1.55;\n}\n\n.question-shift{\ndisplay:grid;\ngap:10px;\n}\n\n.question-shift .shift-item{\ndisplay:flex;\ngap:12px;\nalign-items:flex-start;\npadding:14px 18px;\nborder-radius:12px;\nfont-size:.95rem;\nline-height:1.55;\n}\n\n.question-shift .shift-item.old{\nbackground:#f8fbfd;\nborder:1px solid var(--line);\ncolor:#7b8b9b;\ntext-decoration:line-through;\ntext-decoration-color:rgba(123,139,155,.4);\n}\n\n.question-shift .shift-item.new{\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\ncolor:var(--ink);\nfont-weight:600;\n}\n\n.question-shift .shift-item .mark{\nflex:0 0 auto;\nfont-size:1.05rem;\nline-height:1.4;\n}\n\n.options-summary{\ndisplay:grid;\ngap:12px;\n}\n\n.option-summary-item{\npadding:14px 18px;\nbackground:#f8fbfd;\nborder:1px solid var(--line);\nborder-radius:12px;\n}\n\n.option-summary-item .os-head{\ndisplay:flex;\nalign-items:center;\ngap:8px;\nmargin-bottom:8px;\nfont-weight:650;\ncolor:var(--ink);\nfont-size:.97rem;\n}\n\n.option-summary-item .os-head .dot{\nwidth:8px;\nheight:8px;\nborder-radius:50%;\nbackground:var(--accent);\nflex:0 0 auto;\n}\n\n.option-summary-item .os-line{\nfont-size:.88rem;\ncolor:var(--ink-soft);\nmargin:3px 0;\n}\n\n.option-summary-item .os-line .os-label{\ndisplay:inline-block;\nmin-width:78px;\nfont-weight:600;\ncolor:#7b8b9b;\nfont-size:.8rem;\ntext-transform:uppercase;\nletter-spacing:.04em;\n}\n\n.option-summary-item.aligned{\nborder-color:var(--accent);\nbackground:var(--accent-soft);\nbox-shadow:0 4px 14px var(--accent-ring);\n}\n\n.option-summary-item.aligned .os-head .dot{\nbox-shadow:0 0 0 4px var(--accent-ring);\n}\n\n.aligned-badge{\ndisplay:inline-flex;\nalign-items:center;\ngap:6px;\nmargin-bottom:10px;\npadding:5px 14px;\nfont-size:.82rem;\nfont-weight:700;\nletter-spacing:.03em;\ncolor:#fff;\nbackground:var(--accent);\nborder-radius:999px;\nbox-shadow:0 4px 12px var(--accent-ring);\n}\n\n.path-card{\ndisplay:flex;\ngap:14px;\nalign-items:flex-start;\npadding:18px 20px;\nbackground:var(--accent-soft);\nborder:1px solid var(--accent-ring);\nborder-radius:14px;\n}\n\n.path-card .icon{\nflex:0 0 auto;\nfont-size:1.4rem;\nline-height:1;\n}\n\n.path-card .label{\nmargin:0 0 3px;\nfont-size:.78rem;\nfont-weight:700;\nletter-spacing:.08em;\ntext-transform:uppercase;\ncolor:var(--accent);\n}\n\n.path-card .text{\nmargin:0;\nfont-size:1rem;\nfont-weight:600;\ncolor:var(--ink);\nline-height:1.5;\n}\n\n.path-card .origin{\ndisplay:block;\nmargin-top:6px;\nfont-size:.82rem;\nfont-style:italic;\ncolor:var(--ink-soft);\nfont-weight:400;\n}\n\n.closing-note{\nmargin:24px 0 0;\npadding:16px 20px;\nfont-size:.9rem;\nfont-style:italic;\ncolor:var(--ink-soft);\nbackground:#f8fbfd;\nborder-left:4px solid var(--accent-ring);\nborder-radius:0 12px 12px 0;\n}\n\n@media (max-width:520px){\nheader.hub-head{\npadding:36px 0 24px;\n}\n\n.back-to-hub{\ntop:12px;\nleft:12px;\npadding:6px 12px;\nfont-size:.78rem;\n}\n\nmain.hub-main{\npadding:28px 0 40px;\n}\n\n.card{\npadding:24px 20px;\n}\n\n.card-footer{\nflex-direction:column;\ngap:14px;\nalign-items:stretch;\n}\n\n.card-footer .btn{\njustify-content:center;\n}\n\n.tool-head{\npadding:16px 0 20px;\n}\n\n.step{\npadding:22px 18px;\n}\n\n.actions{\nflex-direction:column-reverse;\n}\n\n.actions .btn-ghost,\n.actions .btn-primary{\nwidth:100%;\n}\n\n.actions .spacer{\ndisplay:none;\n}\n\n.progress-label{\ndisplay:none;\n}\n\n.choices--inline{\ngrid-template-columns:1fr;\n}\n\n.path-option{\npadding:16px 16px 16px 50px;\n}\n\n.path-option .radio-dot{\nleft:16px;\ntop:19px;\n}\n}\n\n@media (prefers-reduced-motion:reduce){\n*{\ntransition:none !important;\nanimation:none !important;\n}\n\n.card:hover{\ntransform:none;\n}\n\n.btn-primary:hover,\n.btn-ghost:hover{\ntransform:none;\n}\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n\n<div id=\"view-hub\" class=\"hub-view active\">\n\n<div class=\"hub-shell\">\n\n<header class=\"hub-head\">\n\n<a href=\"https:\/\/jiris.ca\/ressources\/\" class=\"back-to-hub\" aria-label=\"Retour au hub de ressources\">\u2190 Retour au hub<\/a>\n\n<div class=\"wrap\">\n\n<h1>Explorer mes possibilit\u00e9s<\/h1>\n\n<p>Prendre un pas de recul pour clarifier o\u00f9 vous en \u00eates, identifier ce qui compte pour vous et ouvrir de nouvelles perspectives.<\/p>\n\n<p>\u00c0 votre rythme, explorez ce qui vous anime, clarifiez vos choix et appuyez-vous sur vos forces pour avancer avec plus de justesse.<\/p>\n\n<\/div>\n\n<\/header>\n\n<main class=\"hub-main wrap\">\n\n<div class=\"grid\">\n\n<a href=\"https:\/\/jiris.ca\/retrouver-ma-voix\/\" class=\"card t-green\">\n\n<div>\n\n<span class=\"card-tag\">Int\u00e9riorit\u00e9 & Alignement<\/span>\n\n<h2>\u2728 Retrouver ma voix<\/h2>\n\n<p>Distinguez ce qui vient profond\u00e9ment de vous (d\u00e9sirs, intuitions, valeurs) des pressions, des normes ou des attentes ext\u00e9rieures.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">4 \u00e9tapes \u00b7 3 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n\n<a href=\"https:\/\/jiris.ca\/fiche-clarifier-une-decision\/\" class=\"card t-blue\">\n\n<div>\n\n<span class=\"card-tag\">D\u00e9cision & Strat\u00e9gie<\/span>\n\n<h2>\ud83e\udded Clarifier une d\u00e9cision<\/h2>\n\n<p>Mettez \u00e0 plat une d\u00e9cision floue ou complexe, pesez vos options, reliez vos choix \u00e0 vos besoins et d\u00e9nouez les freins cach\u00e9s.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">5 \u00e9tapes \u00b7 5 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n\n<a href=\"https:\/\/jiris.ca\/fiche-et-si-une-autre-voie-etait-possible\/\" class=\"card t-purple\">\n\n<div>\n\n<span class=\"card-tag\">Cr\u00e9ativit\u00e9 & Horizon<\/span>\n\n<h2>\ud83d\udd2e Et si une autre voie \u00e9tait possible ?<\/h2>\n\n<p>Sortez des sentiers battus, imaginez des sc\u00e9narios audacieux et explorez des alternatives professionnelles ou personnelles inattendues.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">5 \u00e9tapes \u00b7 4 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n\n<a href=\"https:\/\/jiris.ca\/fiche-mes-forces-et-mes-ressources\/\" class=\"card t-orange\">\n\n<div>\n\n<span class=\"card-tag\">Ressources & Ancrage<\/span>\n\n<h2>\ud83c\udf1f Mes forces et mes ressources<\/h2>\n\n<p>Identifiez ce sur quoi vous pouvez d\u00e9j\u00e0 vous appuyer : forces personnelles, ressources externes, exp\u00e9riences pass\u00e9es et apprentissages.<\/p>\n\n<\/div>\n\n<div class=\"card-footer\">\n\n<span class=\"card-meta\">7 \u00e9tapes \u00b7 5 min<\/span>\n\n<span class=\"btn\">Acc\u00e9der \u00e0 l'outil \u2192<\/span>\n\n<\/div>\n\n<\/a>\n\n<\/div>\n\n<\/main>\n\n<footer class=\"hub-foot\">\n\n<\/footer>\n\n<\/div>\n\n<\/div>\n\n\n\n\n<div id=\"view-voix\" class=\"tool-view\" data-tool=\"voix\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83c\udf31 Retrouver ma voix<\/h1>\n\n<p>Aide-toi \u00e0 distinguer ce qui vient de toi (d\u00e9sirs, intuitions, valeurs) de ce qui vient des autres (attentes, pressions, normes).<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"vx-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"4\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"vx-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"vx-progress-label\">\u00c9tape 1 sur 4<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"vx-step1\">\n\n<h2>1. Cartographier les voix<\/h2>\n\n<p class=\"step-intro\">Quand tu penses \u00e0 une d\u00e9cision importante r\u00e9cente, quelles voix entends-tu en toi ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"Ma voix int\u00e9rieure\"><span class=\"box\"><\/span><span>Ma voix int\u00e9rieure <em style=\"font-style:normal;color:#8b9aa9;\">(ce que je ressens vraiment)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"La voix des proches\"><span class=\"box\"><\/span><span>La voix des proches <em style=\"font-style:normal;color:#8b9aa9;\">(famille, ami\u00b7e\u00b7s, conjoint\u00b7e)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"La voix de la soci\u00e9t\u00e9\"><span class=\"box\"><\/span><span>La voix de la soci\u00e9t\u00e9 \/ culture <em style=\"font-style:normal;color:#8b9aa9;\">(ce qu'on \u00ab devrait \u00bb faire)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"La voix de la peur\"><span class=\"box\"><\/span><span>La voix de la peur <em style=\"font-style:normal;color:#8b9aa9;\">(ce qui m'emp\u00eache)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"vx-voice\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre<\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-voicesDetail\">Pr\u00e9cise bri\u00e8vement chaque voix <span class=\"opt\">(optionnel)<\/span><\/label>\n\n<textarea id=\"vx-voicesDetail\" placeholder=\"Ex. \u00ab La voix des proches : mes parents aimeraient que je\u2026 \u00bb\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"vx-hint1\">Prends un instant pour cocher au moins une voix \u2014 m\u00eame une seule suffit pour commencer.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vx-step2\">\n\n<h2>2. Identifier l'origine de chaque pens\u00e9e<\/h2>\n\n<p class=\"step-intro\">Pour 3 pens\u00e9es ou croyances r\u00e9centes, pr\u00e9cise d'o\u00f9 elles viennent.<\/p>\n\n<div class=\"thought-block\">\n\n<span class=\"block-title\">Pens\u00e9e 1<\/span>\n\n<div class=\"field\"><label>Ta pens\u00e9e<\/label><input type=\"text\" class=\"vx-thought\" data-n=\"1\" placeholder=\"Ex. Je devrais accepter ce poste\"><\/div>\n\n<div class=\"field\"><label>Origine principale<\/label>\n\n<select class=\"vx-origin\" data-n=\"1\">\n\n<option value=\"\">\u2014 Choisir \u2014<\/option>\n\n<option>Moi<\/option>\n\n<option>Les autres<\/option>\n\n<option>La peur<\/option>\n\n<option>Un m\u00e9lange<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"field\"><label>Comment je le sais <span class=\"opt\">(indice corporel, \u00e9motion, exp\u00e9rience)<\/span><\/label><input type=\"text\" class=\"vx-clue\" data-n=\"1\" placeholder=\"Ex. Je sens une tension dans le ventre\"><\/div>\n\n<\/div>\n\n\n<div class=\"thought-block\">\n\n<span class=\"block-title\">Pens\u00e9e 2<\/span>\n\n<div class=\"field\"><label>Ta pens\u00e9e<\/label><input type=\"text\" class=\"vx-thought\" data-n=\"2\" placeholder=\"Ex. Il faut que je reste prudent\u00b7e\"><\/div>\n\n<div class=\"field\"><label>Origine principale<\/label>\n\n<select class=\"vx-origin\" data-n=\"2\">\n\n<option value=\"\">\u2014 Choisir \u2014<\/option>\n\n<option>Moi<\/option>\n\n<option>Les autres<\/option>\n\n<option>La peur<\/option>\n\n<option>Un m\u00e9lange<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"field\"><label>Comment je le sais<\/label><input type=\"text\" class=\"vx-clue\" data-n=\"2\" placeholder=\"Ex. Un message entendu depuis l'enfance\"><\/div>\n\n<\/div>\n\n\n<div class=\"thought-block\">\n\n<span class=\"block-title\">Pens\u00e9e 3<\/span>\n\n<div class=\"field\"><label>Ta pens\u00e9e<\/label><input type=\"text\" class=\"vx-thought\" data-n=\"3\" placeholder=\"Ex. J'aimerais changer de direction\"><\/div>\n\n<div class=\"field\"><label>Origine principale<\/label>\n\n<select class=\"vx-origin\" data-n=\"3\">\n\n<option value=\"\">\u2014 Choisir \u2014<\/option>\n\n<option>Moi<\/option>\n\n<option>Les autres<\/option>\n\n<option>La peur<\/option>\n\n<option>Un m\u00e9lange<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"field\"><label>Comment je le sais<\/label><input type=\"text\" class=\"vx-clue\" data-n=\"3\" placeholder=\"Ex. Je me sens plus l\u00e9g\u00e8re en l'imaginant\"><\/div>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vx-step3\">\n\n<h2>3. Retrouver un signal personnel<\/h2>\n\n<p class=\"step-intro\">Un moment o\u00f9 tu as senti que tu \u00e9coutais vraiment ta propre voix.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vx-momentOwnVoice\">Y a-t-il un moment r\u00e9cent o\u00f9 tu as senti que tu \u00e9coutais vraiment ta propre voix ?<\/label>\n\n<input type=\"text\" id=\"vx-momentOwnVoice\" placeholder=\"Ex. La semaine derni\u00e8re, quand j'ai dit non \u00e0\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-whatDoing\">Que faisais-tu ?<\/label>\n\n<input type=\"text\" id=\"vx-whatDoing\" placeholder=\"Ex. J'\u00e9tais en train de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-bodyFeeling\">Comment ton corps se sentait-il ?<\/label>\n\n<input type=\"text\" id=\"vx-bodyFeeling\" placeholder=\"Ex. Plus calme, plus ancr\u00e9, plus l\u00e9ger\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-differenceOthers\">Qu'est-ce qui \u00e9tait diff\u00e9rent par rapport aux moments o\u00f9 tu \u00e9coutes surtout les autres ?<\/label>\n\n<textarea id=\"vx-differenceOthers\" placeholder=\"Ex. Moins de pression, plus de clart\u00e9, moins de culpabilit\u00e9\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vx-step4\">\n\n<h2>4. Petit engagement<\/h2>\n\n<p class=\"step-intro\">Quelle petite action, cette semaine, pourrait t'aider \u00e0 \u00e9couter un peu plus ta propre voix ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"\u00c9crire 5 min sans filtre\"><span class=\"box\"><\/span><span>\u00c9crire 5 min sans filtre<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"Dire non \u00e0 une demande\"><span class=\"box\"><\/span><span>Dire non \u00e0 une demande<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"Dire oui \u00e0 une envie discr\u00e8te\"><span class=\"box\"><\/span><span>Dire oui \u00e0 une envie discr\u00e8te<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"vx-action\" value=\"autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vx-actionOther\">Pr\u00e9cise ton action si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"vx-actionOther\" placeholder=\"Ex. Prendre 10 min pour marcher sans t\u00e9l\u00e9phone\">\n\n<\/div>\n\n<div class=\"hint\" id=\"vx-hint4\">Choisis une action \u2014 m\u00eame toute petite. C'est elle qui fera la diff\u00e9rence cette semaine.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VX.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"vx-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83c\udf31 Ton r\u00e9sultat<\/h2>\n\n<p>Un instantan\u00e9 de ce que tu viens de traverser.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"vx-section-voices\">\n\n<h3>Les voix que tu as rep\u00e9r\u00e9es<\/h3>\n\n<div class=\"chips\" id=\"vx-resultVoices\"><\/div>\n\n<p id=\"vx-resultVoicesDetail\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vx-section-thoughts\">\n\n<h3>Tes pens\u00e9es et leur origine<\/h3>\n\n<ul class=\"thought-list\" id=\"vx-resultThoughts\"><\/ul>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vx-section-signal\">\n\n<h3>Ton signal personnel<\/h3>\n\n<p id=\"vx-resultSignal\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\">\n\n<h3>Ton petit pas pour cette semaine<\/h3>\n\n<div class=\"card-action\">\n\n<span class=\"icon\">\u2728<\/span>\n\n<div>\n\n<p class=\"label\">Ton engagement<\/p>\n\n<p class=\"text\" id=\"vx-resultAction\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu peux revenir sur cet outil quand tu sens que les voix des autres prennent trop de place.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VX.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n\n\n<div id=\"view-clarifier\" class=\"tool-view\" data-tool=\"clarifier\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83e\udded Clarifier une d\u00e9cision<\/h1>\n\n<p>Mets \u00e0 plat une d\u00e9cision sans chercher imm\u00e9diatement la \u00ab bonne \u00bb r\u00e9ponse, en clarifiant options, besoins, avantages et limites.<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"cl-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"5\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"cl-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"cl-progress-label\">\u00c9tape 1 sur 5<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"cl-step1\">\n\n<h2>1. D\u00e9crire la d\u00e9cision<\/h2>\n\n<p class=\"step-intro\">Commence par nommer la d\u00e9cision \u2014 sans chercher \u00e0 la r\u00e9soudre pour l'instant.<\/p>\n\n<div class=\"field\">\n\n<label for=\"cl-decisionDesc\">Quelle d\u00e9cision est floue ou difficile en ce moment ?<\/label>\n\n<input type=\"text\" id=\"cl-decisionDesc\" placeholder=\"Ex. Changer de travail, reprendre des \u00e9tudes, d\u00e9m\u00e9nager\u2026\">\n\n<\/div>\n\n<div class=\"hint\" id=\"cl-hint1\">Prends un instant pour nommer la d\u00e9cision \u2014 m\u00eame quelques mots suffisent.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step2\">\n\n<h2>2. Lister les options r\u00e9elles<\/h2>\n\n<p class=\"step-intro\">Nomme 2 \u00e0 4 options concr\u00e8tes \u2014 m\u00eame celles qui semblent \u00ab peu r\u00e9alistes \u00bb.<\/p>\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 1<\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"1\" placeholder=\"Ex. Rester dans mon poste actuel\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"1\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"1\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 2<\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"2\" placeholder=\"Ex. Chercher un nouveau poste\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"2\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"2\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 3 <em style=\"font-style:normal;font-weight:500;color:#9aacbc;text-transform:none;letter-spacing:0;\">(optionnel)<\/em><\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"3\" placeholder=\"Nom de l'option\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"3\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"3\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"option-block\">\n\n<span class=\"block-title\">Option 4 <em style=\"font-style:normal;font-weight:500;color:#9aacbc;text-transform:none;letter-spacing:0;\">(optionnel)<\/em><\/span>\n\n<div class=\"field\">\n\n<label>Nom de l'option<\/label>\n\n<input type=\"text\" class=\"cl-optName\" data-n=\"4\" placeholder=\"Nom de l'option\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option permettrait<\/label>\n\n<input type=\"text\" class=\"cl-optGain\" data-n=\"4\" placeholder=\"Ex. Cela me permettrait de\u2026\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label>Ce que cette option ferait perdre ou limiterait<\/label>\n\n<input type=\"text\" class=\"cl-optLoss\" data-n=\"4\" placeholder=\"Ex. Cela limiterait\u2026\">\n\n<\/div>\n\n<\/div>\n\n<div class=\"hint\" id=\"cl-hint2\">Essaie de nommer au moins 2 options \u2014 m\u00eame imparfaites \u2014 pour ouvrir le champ des possibles.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step3\">\n\n<h2>3. Relier aux besoins et valeurs<\/h2>\n\n<p class=\"step-intro\">Pour chaque option, coche les besoins principaux qu'elle sert. Puis indique celle qui te semble la plus align\u00e9e.<\/p>\n\n<div id=\"cl-needsOptions\"><\/div>\n\n<div class=\"field\" style=\"margin-top:22px;\">\n\n<label for=\"cl-mostAligned\">Laquelle de ces options semble la plus align\u00e9e avec ce qui compte vraiment pour toi en ce moment ?<\/label>\n\n<select id=\"cl-mostAligned\">\n\n<option value=\"\">\u2014 Choisir une option \u2014<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step4\">\n\n<h2>4. Identifier les freins<\/h2>\n\n<p class=\"step-intro\">Qu'est-ce qui rend cette d\u00e9cision difficile, au-del\u00e0 des aspects pratiques ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Peur de se tromper\"><span class=\"box\"><\/span><span>Peur de se tromper<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Peur de d\u00e9cevoir\"><span class=\"box\"><\/span><span>Peur de d\u00e9cevoir<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Peur de perdre quelque chose\"><span class=\"box\"><\/span><span>Peur de perdre quelque chose<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Manque d'information\"><span class=\"box\"><\/span><span>Manque d'information<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Conflit entre deux valeurs importantes\"><span class=\"box\"><\/span><span>Conflit entre deux valeurs importantes<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"cl-barrier\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"cl-barrierOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"cl-barrierOther\" placeholder=\"Ex. Je ne sais pas ce que je veux vraiment\u2026\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.goToStep(5)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"cl-step5\">\n\n<h2>5. Prochain petit pas<\/h2>\n\n<p class=\"step-intro\">Quel petit pas, dans les 7 prochains jours, pourrait t'aider \u00e0 avancer sur cette d\u00e9cision \u2014 sans la r\u00e9gler compl\u00e8tement ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"Recueillir une information\"><span class=\"box\"><\/span><span>Recueillir une information<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"En parler \u00e0 une personne de confiance\"><span class=\"box\"><\/span><span>En parler \u00e0 une personne de confiance<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"\u00c9crire les pour et les contre\"><span class=\"box\"><\/span><span>\u00c9crire les pour et les contre<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"Fixer une date pour d\u00e9cider\"><span class=\"box\"><\/span><span>Fixer une date pour d\u00e9cider<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"Tester une option \u00e0 petite \u00e9chelle\"><span class=\"box\"><\/span><span>Tester une option \u00e0 petite \u00e9chelle<\/span><\/label>\n\n<label class=\"choice\"><input type=\"radio\" name=\"cl-nextStepAction\" value=\"autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"cl-nextStepOther\">Pr\u00e9cise ton petit pas si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"cl-nextStepOther\" placeholder=\"Ex. Prendre un temps seul\u00b7e pour y r\u00e9fl\u00e9chir\u2026\">\n\n<\/div>\n\n<div class=\"hint\" id=\"cl-hint5\">Choisis un petit pas \u2014 m\u00eame tout petit. C'est lui qui fera bouger la d\u00e9cision.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.goToStep(4)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"CL.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"cl-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83e\udded Ton r\u00e9sultat<\/h2>\n\n<p>Un instantan\u00e9 de ta d\u00e9cision, mise \u00e0 plat.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"cl-section-decision\">\n\n<h3>Ta d\u00e9cision<\/h3>\n\n<div class=\"card-highlight\" id=\"cl-resultDecision\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"cl-section-options\">\n\n<h3>Les options que tu as mises \u00e0 plat<\/h3>\n\n<div class=\"options-summary\" id=\"cl-resultOptions\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"cl-section-aligned\">\n\n<h3>L'option la plus align\u00e9e<\/h3>\n\n<span class=\"aligned-badge\">\u2728 Ton choix du moment<\/span>\n\n<p id=\"cl-resultAligned\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"cl-section-barriers\">\n\n<h3>Ce qui rend la d\u00e9cision difficile<\/h3>\n\n<div class=\"chips\" id=\"cl-resultBarriers\"><\/div>\n\n<p id=\"cl-resultBarrierOther\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\">\n\n<h3>Ton petit pas pour cette semaine<\/h3>\n\n<div class=\"card-action\">\n\n<span class=\"icon\">\ud83d\udc63<\/span>\n\n<div>\n\n<p class=\"label\">Ton engagement<\/p>\n\n<p class=\"text\" id=\"cl-resultAction\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu peux revenir sur cet outil quand la d\u00e9cision \u00e9volue, ou quand tu veux approfondir une option en particulier.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"CL.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n\n\n<div id=\"view-voie\" class=\"tool-view\" data-tool=\"voie\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83d\udeaa Et si une autre voie \u00e9tait possible ?<\/h1>\n\n<p>Aide-toi \u00e0 sortir du \u00ab soit\u2026 soit\u2026 \u00bb et \u00e0 explorer plusieurs possibilit\u00e9s quand une situation semble bloqu\u00e9e.<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"vo-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"5\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"vo-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"vo-progress-label\">\u00c9tape 1 sur 5<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"vo-step1\">\n\n<h2>1. D\u00e9crire le blocage<\/h2>\n\n<p class=\"step-intro\">Pose des mots sur la situation \u2014 sans chercher \u00e0 la r\u00e9soudre pour l'instant.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vo-blockageDesc\">Quelle situation te donne l'impression d'\u00eatre coinc\u00e9\u00b7e ou sans issue ?<\/label>\n\n<textarea id=\"vo-blockageDesc\" placeholder=\"D\u00e9cris bri\u00e8vement la situation\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"vo-hint1\">Prends un instant pour d\u00e9crire la situation \u2014 m\u00eame quelques mots suffisent pour commencer.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step2\">\n\n<h2>2. Rep\u00e9rer le \u00ab soit\u2026 soit\u2026 \u00bb<\/h2>\n\n<p class=\"step-intro\">Souvent, le blocage vient d'une alternative fig\u00e9e : soit A, soit B. Mets des mots sur celle qui t'enferme.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vo-eitherOr\">Quelle est la fa\u00e7on dont tu pr\u00e9sentes habituellement les choix dans cette situation ?<\/label>\n\n<input type=\"text\" id=\"vo-eitherOr\" placeholder=\"Ex. \u00ab Soit je reste, soit je pars \u00bb\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step3\">\n\n<h2>3. \u00c9largir le champ des possibles<\/h2>\n\n<p class=\"step-intro\">Cinq questions pour ouvrir des pistes \u2014 r\u00e9ponds bri\u00e8vement, sans chercher la perfection.<\/p>\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">1<\/span>\n\n<p class=\"q-text\">Et si tu n'\u00e9tais pas oblig\u00e9\u00b7e de choisir tout de suite, que pourrais-tu explorer en attendant ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q1\" placeholder=\"Ex. Tester, observer, recueillir des infos\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">2<\/span>\n\n<p class=\"q-text\">Et si une solution \u00ab ni l'un ni l'autre \u00bb \u00e9tait possible, \u00e0 quoi pourrait-elle ressembler ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q2\" placeholder=\"Ex. Un compromis, une troisi\u00e8me option, un d\u00e9tour\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">3<\/span>\n\n<p class=\"q-text\">Et si tu avais 10 % de libert\u00e9 en plus dans cette situation, qu'en ferais-tu ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q3\" placeholder=\"Ex. J'essaierais\u2026, je parlerais de\u2026, je changerais\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">4<\/span>\n\n<p class=\"q-text\">Qui, autour de toi, a d\u00e9j\u00e0 v\u00e9cu quelque chose de similaire et s'en est sorti autrement ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q4\" placeholder=\"Ex. Une personne, un exemple, une histoire\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"open-question\">\n\n<div class=\"q-head\">\n\n<span class=\"q-num\">5<\/span>\n\n<p class=\"q-text\">Quelle serait une option \u00ab suffisamment bonne \u00bb plut\u00f4t que parfaite ?<\/p>\n\n<\/div>\n\n<div class=\"field\">\n\n<textarea id=\"vo-q5\" placeholder=\"Ex. Une option r\u00e9aliste, imparfaite mais qui avance\u2026\"><\/textarea>\n\n<\/div>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step4\">\n\n<h2>4. S\u00e9lectionner une piste<\/h2>\n\n<p class=\"step-intro\">Voici toutes les pistes que tu viens d'ouvrir. Laquelle te semble la plus int\u00e9ressante \u00e0 explorer \u2014 m\u00eame si ce n'est pas \u00ab la solution \u00bb ?<\/p>\n\n<div class=\"paths-list\" id=\"vo-pathsList\" role=\"radiogroup\" aria-label=\"Pistes explor\u00e9es\"><\/div>\n\n<div class=\"hint hint--info\" id=\"vo-pathsEmpty\" style=\"display:none;\">\n\nTu n'as pas encore rempli de piste \u00e0 l'\u00e9tape pr\u00e9c\u00e9dente.<br>\n\n<a href=\"#\" onclick=\"VO.goToStep(3);return false;\" style=\"color:var(--accent);font-weight:600;\">\u2190 Revenir \u00e0 l'\u00e9tape 3<\/a>\n\n<\/div>\n\n<div class=\"field\" id=\"vo-otherPathField\" style=\"display:none;\">\n\n<label for=\"vo-otherPath\">D\u00e9cris ta piste<\/label>\n\n<textarea id=\"vo-otherPath\" placeholder=\"Ex. Commencer par en parler \u00e0 une personne qui a v\u00e9cu quelque chose de similaire\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"vo-hint4\">Choisis une piste pour continuer.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.goToStep(5)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"vo-step5\">\n\n<h2>5. Transformer l'obstacle en question<\/h2>\n\n<p class=\"step-intro\">Un obstacle formul\u00e9 en \u00ab pourquoi \u00bb enferme. Une question ouverte en \u00ab quoi \u00bb ou \u00ab comment \u00bb ouvre.<\/p>\n\n<div class=\"field\">\n\n<label for=\"vo-oldQuestion\">Obstacle initial <span class=\"opt\">(ex. \u00ab Pourquoi cela m'arrive ? \u00bb)<\/span><\/label>\n\n<input type=\"text\" id=\"vo-oldQuestion\" placeholder=\"Ex. Pourquoi je n'arrive pas \u00e0 avancer ?\">\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"vo-newQuestion\">Nouvelle question <span class=\"opt\">(ex. \u00ab Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ? \u00bb)<\/span><\/label>\n\n<input type=\"text\" id=\"vo-newQuestion\" placeholder=\"Ex. Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ?\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.goToStep(4)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"VO.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"vo-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83d\udeaa Ton r\u00e9sultat<\/h2>\n\n<p>De nouvelles voies s'ouvrent \u00e0 partir de ta situation.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"vo-section-blockage\">\n\n<h3>Ton point de d\u00e9part<\/h3>\n\n<div class=\"card-highlight\" id=\"vo-resultBlockage\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-eitheror\">\n\n<h3>Le \u00ab soit\u2026 soit\u2026 \u00bb que tu as rep\u00e9r\u00e9<\/h3>\n\n<div class=\"either-or-card\" id=\"vo-resultEitherOr\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-explored\">\n\n<h3>Les pistes que tu as ouvertes<\/h3>\n\n<ul class=\"explored-list\" id=\"vo-resultExplored\"><\/ul>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-path\">\n\n<h3>La piste que tu souhaites explorer<\/h3>\n\n<div class=\"path-card\">\n\n<span class=\"icon\">\ud83e\udded<\/span>\n\n<div>\n\n<p class=\"label\">Ta piste prioritaire<\/p>\n\n<p class=\"text\" id=\"vo-resultPath\"><\/p>\n\n<span class=\"origin\" id=\"vo-resultPathOrigin\"><\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"vo-section-question\">\n\n<h3>Ta question pour avancer<\/h3>\n\n<div class=\"question-shift\" id=\"vo-resultQuestionShift\"><\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu as commenc\u00e9 \u00e0 \u00e9largir le champ des possibles autour de cette situation. Au lieu d'un \u00ab soit\u2026 soit\u2026 \u00bb fig\u00e9, plusieurs pistes apparaissent.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"VO.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n\n\n<div id=\"view-forces\" class=\"tool-view\" data-tool=\"forces\">\n\n<header class=\"tool-topbar\">\n\n<div class=\"wrap-narrow\">\n\n<a href=\"#hub\" class=\"back-link\">\u2190 Retour aux ressources<\/a>\n\n<div class=\"tool-head\">\n\n<h1>\ud83c\udf1f Mes forces et mes ressources<\/h1>\n\n<p>Identifie ce sur quoi tu peux d\u00e9j\u00e0 t'appuyer pour avancer : ce que tu portes en toi, ce que tu as appris, les personnes et ressources autour de toi.<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/header>\n\n<div class=\"progress\">\n\n<div class=\"wrap-narrow\">\n\n<div class=\"progress-inner\">\n\n<div class=\"progress-track\" id=\"fo-progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"7\" aria-valuenow=\"1\">\n\n<div class=\"progress-fill\" id=\"fo-progress-fill\"><\/div>\n\n<\/div>\n\n<span class=\"progress-label\" id=\"fo-progress-label\">\u00c9tape 1 sur 7<\/span>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<main class=\"tool-main wrap-narrow\">\n\n<section class=\"step\" id=\"fo-step1\">\n\n<h2>1. Ce que je porte d\u00e9j\u00e0 en moi<\/h2>\n\n<p class=\"step-intro\">Au-del\u00e0 des \u00ab qualit\u00e9s \u00bb, qu'est-ce qui fait partie de toi et pourrait t'aider \u00e0 avancer ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Mes valeurs\"><span class=\"box\"><\/span><span>Mes valeurs <em style=\"font-style:normal;color:#8b9aa9;\">(ce qui compte vraiment)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Mes fa\u00e7ons de faire\"><span class=\"box\"><\/span><span>Mes fa\u00e7ons de faire <em style=\"font-style:normal;color:#8b9aa9;\">(ma mani\u00e8re d'aborder les choses)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Des apprentissages pass\u00e9s\"><span class=\"box\"><\/span><span>Des apprentissages pass\u00e9s <em style=\"font-style:normal;color:#8b9aa9;\">(m\u00eame petits)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"De petites victoires\"><span class=\"box\"><\/span><span>De petites victoires <em style=\"font-style:normal;color:#8b9aa9;\">(des moments o\u00f9 \u00e7a a march\u00e9)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Des qualit\u00e9s que je me reconnais\"><span class=\"box\"><\/span><span>Des qualit\u00e9s que je me reconnais<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-inner\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"fo-innerOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"fo-innerOther\" placeholder=\"Ex. Ma capacit\u00e9 \u00e0 demander de l'aide\u2026\">\n\n<\/div>\n\n<div class=\"hint\" id=\"fo-hint1\">Prends un instant pour cocher au moins une force ou ressource int\u00e9rieure \u2014 m\u00eame une seule suffit.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(2)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step2\">\n\n<h2>2. Ce que j'ai appris de mes exp\u00e9riences<\/h2>\n\n<p class=\"step-intro\">M\u00eame les p\u00e9riodes difficiles ont pu t'apprendre quelque chose.<\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-learnings\">Qu'as-tu d\u00e9couvert sur toi ou sur la vie \u00e0 travers ce que tu as v\u00e9cu ?<\/label>\n\n<textarea id=\"fo-learnings\" placeholder=\"Ex. \u00ab J'ai appris que je pouvais tenir bon m\u00eame quand c'\u00e9tait dur \u00bb\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(1)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(3)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step3\">\n\n<h2>3. Les personnes sur lesquelles je peux m'appuyer<\/h2>\n\n<p class=\"step-intro\">Qui, autour de toi, pourrait \u00eatre une ressource \u2014 m\u00eame de loin, m\u00eame occasionnellement ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Famille\"><span class=\"box\"><\/span><span>Famille<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Ami\u00b7e\u00b7s\"><span class=\"box\"><\/span><span>Ami\u00b7e\u00b7s<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Coll\u00e8gues \/ camarades\"><span class=\"box\"><\/span><span>Coll\u00e8gues \/ camarades<\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Professionnel\u00b7le\u00b7s\"><span class=\"box\"><\/span><span>Professionnel\u00b7le\u00b7s <em style=\"font-style:normal;color:#8b9aa9;\">(th\u00e9rapeute, m\u00e9decin, coach\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Groupes \/ communaut\u00e9s\"><span class=\"box\"><\/span><span>Groupes \/ communaut\u00e9s <em style=\"font-style:normal;color:#8b9aa9;\">(en ligne, locaux\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Une personne en particulier\"><span class=\"box\"><\/span><span>Une personne en particulier <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-people\" value=\"Je ne pense \u00e0 personne pour l'instant\"><span class=\"box\"><\/span><span>Je ne pense \u00e0 personne pour l'instant<\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"fo-peopleDetail\">Pr\u00e9cise si tu le souhaites <span class=\"opt\">(noms, r\u00f4les, types de soutien\u2026)<\/span><\/label>\n\n<input type=\"text\" id=\"fo-peopleDetail\" placeholder=\"Ex. Ma s\u0153ur, qui sait \u00e9couter sans juger\u2026\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(2)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(4)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step4\">\n\n<h2>4. Les ressources dans mon environnement<\/h2>\n\n<p class=\"step-intro\">Qu'est-ce qui, autour de toi, pourrait t'aider \u2014 lieux, outils, temps, informations, espaces\u2026 ?<\/p>\n\n<div class=\"choices\">\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Lieux\"><span class=\"box\"><\/span><span>Lieux <em style=\"font-style:normal;color:#8b9aa9;\">(biblioth\u00e8que, parc, association\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Outils\"><span class=\"box\"><\/span><span>Outils <em style=\"font-style:normal;color:#8b9aa9;\">(livres, sites, applications\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Temps disponible\"><span class=\"box\"><\/span><span>Temps disponible <em style=\"font-style:normal;color:#8b9aa9;\">(m\u00eame un peu)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Informations\"><span class=\"box\"><\/span><span>Informations <em style=\"font-style:normal;color:#8b9aa9;\">(ce que tu as d\u00e9j\u00e0 appris, lu\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Espace physique\"><span class=\"box\"><\/span><span>Espace physique <em style=\"font-style:normal;color:#8b9aa9;\">(chez toi, un coin \u00e0 toi\u2026)<\/em><\/span><\/label>\n\n<label class=\"choice\"><input type=\"checkbox\" class=\"fo-env\" value=\"Autre\"><span class=\"box\"><\/span><span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span><\/label>\n\n<\/div>\n\n<div class=\"field\">\n\n<label for=\"fo-envOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n\n<input type=\"text\" id=\"fo-envOther\" placeholder=\"Ex. Une association pr\u00e8s de chez moi\u2026\">\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(3)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(5)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step5\">\n\n<h2>5. Ce qui m'a d\u00e9j\u00e0 aid\u00e9\u00b7e, m\u00eame modestement<\/h2>\n\n<p class=\"step-intro\">Les petites choses comptent aussi \u2014 parfois plus qu'on ne le croit.<\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-smallHelp\">Qu'est-ce qui t'a d\u00e9j\u00e0 apport\u00e9 un peu de soulagement, de clart\u00e9 ou de soutien ?<\/label>\n\n<textarea id=\"fo-smallHelp\" placeholder=\"Ex. \u00ab \u00c9crire ce que je ressens \u00bb, \u00ab Marcher 10 minutes \u00bb\u2026\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(4)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(6)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step6\">\n\n<h2>6. Ce que je pourrais mobiliser maintenant<\/h2>\n\n<p class=\"step-intro\">Parmi tout ce que tu as identifi\u00e9, qu'est-ce qui est accessible cette semaine ?<\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-toMobilize\">Qu'est-ce qui pourrait t'aider \u00e0 avancer, m\u00eame un tout petit peu, dans les 7 prochains jours ?<\/label>\n\n<textarea id=\"fo-toMobilize\" placeholder=\"Ex. \u00ab Reprendre contact avec\u2026 \u00bb, \u00ab Utiliser tel outil\u2026 \u00bb\"><\/textarea>\n\n<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(5)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.goToStep(7)\">Continuer \u2192<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"step hidden\" id=\"fo-step7\">\n\n<h2>7. Phrase-ressource<\/h2>\n\n<p class=\"step-intro\">Cr\u00e9e une phrase courte \u00e0 garder comme appui, du type :<br><em>\u00ab Je peux m'appuyer sur [ressource] pour [intention\/action]. \u00bb<\/em><\/p>\n\n<div class=\"field\">\n\n<label for=\"fo-resourcePhrase\">Ta phrase-ressource<\/label>\n\n<textarea id=\"fo-resourcePhrase\" placeholder=\"Ex. \u00ab Je peux m'appuyer sur ce que j'ai d\u00e9j\u00e0 travers\u00e9 et sur les personnes autour de moi pour avancer pas \u00e0 pas. \u00bb\"><\/textarea>\n\n<\/div>\n\n<div class=\"hint\" id=\"fo-hint7\">Prends un instant pour \u00e9crire ta phrase-ressource \u2014 c'est elle qui te servira de rep\u00e8re.<\/div>\n\n<div class=\"actions\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.goToStep(6)\">\u2190 Retour<\/button>\n\n<div class=\"spacer\"><\/div>\n\n<button type=\"button\" class=\"btn-primary\" onclick=\"FO.showResult()\">Voir mon r\u00e9sultat \u2728<\/button>\n\n<\/div>\n\n<\/section>\n\n\n<section class=\"result\" id=\"fo-resultBox\">\n\n<div class=\"result-head\">\n\n<h2>\ud83c\udf1f Ton r\u00e9sultat<\/h2>\n\n<p>Ce sur quoi tu peux d\u00e9j\u00e0 t'appuyer pour avancer.<\/p>\n\n<\/div>\n\n<div class=\"result-body\">\n\n<div class=\"result-section\" id=\"fo-section-inner\">\n\n<h3>Ce que tu portes en toi<\/h3>\n\n<div class=\"chips\" id=\"fo-resultInner\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-learnings\">\n\n<h3>Ce que tes exp\u00e9riences t'ont appris<\/h3>\n\n<div class=\"card-quote\" id=\"fo-resultLearnings\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-people\">\n\n<h3>Les personnes sur qui tu peux t'appuyer<\/h3>\n\n<div class=\"chips\" id=\"fo-resultPeople\"><\/div>\n\n<p id=\"fo-resultPeopleDetail\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-env\">\n\n<h3>Les ressources dans ton environnement<\/h3>\n\n<div class=\"chips\" id=\"fo-resultEnv\"><\/div>\n\n<p id=\"fo-resultEnvOther\" style=\"margin-top:10px;\"><\/p>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-smallhelp\">\n\n<h3>Ce qui t'a d\u00e9j\u00e0 aid\u00e9\u00b7e, m\u00eame modestement<\/h3>\n\n<div class=\"card-quote\" id=\"fo-resultSmallHelp\"><\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-mobilize\">\n\n<h3>Ce que tu peux mobiliser cette semaine<\/h3>\n\n<div class=\"card-action\">\n\n<span class=\"icon\">\u2728<\/span>\n\n<div>\n\n<p class=\"label\">Ton appui pour avancer<\/p>\n\n<p class=\"text\" id=\"fo-resultMobilize\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<div class=\"result-section\" id=\"fo-section-phrase\">\n\n<h3>Ta phrase-ressource<\/h3>\n\n<div class=\"card-phare\">\n\n<span class=\"mark\">\u275d<\/span>\n\n<p class=\"phare-text\" id=\"fo-resultPhrase\"><\/p>\n\n<\/div>\n\n<\/div>\n\n<p class=\"closing-note\">Tu as identifi\u00e9 plusieurs ressources : en toi, dans tes exp\u00e9riences, autour de toi et dans ton environnement. Tu n'es pas seul\u00b7e face \u00e0 ce que tu traverses.<\/p>\n\n<div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n\n<button type=\"button\" class=\"btn-ghost\" onclick=\"FO.reset()\">\u21ba Recommencer<\/button>\n\n<a href=\"#hub\" class=\"btn-primary\">Retour aux ressources<\/a>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n\n<script>\n\n\/* ============================================================\nUTILITAIRES\n============================================================ *\/\n\nfunction escapeHtml(str){\nreturn String(str)\n.replace(\/&\/g,'&')\n.replace(\/<\/g,'<')\n.replace(\/>\/g,'>')\n.replace(\/\"\/g,'"')\n.replace(\/'\/g,''');\n}\n\nfunction capitalize(s){\nreturn s.charAt(0).toUpperCase() + s.slice(1);\n}\n\nfunction showStepTool(prefix,n,total){\n\ndocument.querySelectorAll('[id^=\"' + prefix + '-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\nconst target=document.getElementById(prefix + '-step' + n);\n\nif(target){\n\ntarget.classList.remove('hidden');\n\nupdateProgressTool(prefix,n,total);\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\nconst title=target.querySelector('h2');\n\nif(title){\ntitle.setAttribute('tabindex','-1');\ntitle.focus({\npreventScroll:true\n});\n}\n\n}\n\n}\n\nfunction updateProgressTool(prefix,n,total){\n\nconst pct=Math.round((n\/total)*100);\n\nconst fill=document.getElementById(prefix + '-progress-fill');\nconst label=document.getElementById(prefix + '-progress-label');\nconst track=document.getElementById(prefix + '-progress-track');\n\nif(fill) fill.style.width=pct + '%';\n\nif(label) label.textContent='\u00c9tape ' + n + ' sur ' + total;\n\nif(track) track.setAttribute('aria-valuenow',n);\n\n}\n\nfunction currentStepTool(prefix,total){\n\nfor(let i=1;i<=total;i++){\n\nconst el=document.getElementById(prefix + '-step' + i);\n\nif(el && !el.classList.contains('hidden')) return i;\n\n}\n\nreturn total;\n\n}\n\n\n\/* ============================================================\nOUTIL 1 \u2014 RETROUVER MA VOIX\n============================================================ *\/\n\nconst VX=(function(){\n\nconst P='vx',\nKEY='jiris_voix_v1',\nTOTAL=4;\n\nfunction goToStep(n){\n\nif(n===2){\n\nconst any=document.querySelector('.vx-voice:checked');\n\nconst detail=document.getElementById('vx-voicesDetail').value.trim();\n\nif(!any && !detail){\n\ndocument.getElementById('vx-hint1').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('vx-hint1').classList.remove('show');\n\n}\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction showResult(){\n\nconst action=document.querySelector('input[name=\"vx-action\"]:checked');\n\nif(!action){\n\ndocument.getElementById('vx-hint4').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('vx-hint4').classList.remove('show');\n\nconst voices=Array.from(document.querySelectorAll('.vx-voice:checked')).map(function(c){\nreturn c.value;\n});\n\nconst voicesDetail=document.getElementById('vx-voicesDetail').value.trim();\n\nconst thoughts=[];\n\nfor(let i=1;i<=3;i++){\n\nconst t=document.querySelector('.vx-thought[data-n=\"'+i+'\"]').value.trim();\n\nconst o=document.querySelector('.vx-origin[data-n=\"'+i+'\"]').value;\n\nconst c=document.querySelector('.vx-clue[data-n=\"'+i+'\"]').value.trim();\n\nif(t) thoughts.push({\nt:t,\no:o,\nc:c\n});\n\n}\n\nconst moment=document.getElementById('vx-momentOwnVoice').value.trim();\n\nconst doing=document.getElementById('vx-whatDoing').value.trim();\n\nconst body=document.getElementById('vx-bodyFeeling').value.trim();\n\nconst diff=document.getElementById('vx-differenceOthers').value.trim();\n\nlet actionText=action.value;\n\nif(action.value==='autre'){\n\nconst other=document.getElementById('vx-actionOther').value.trim();\n\nactionText=other || 'une action personnelle';\n\n}\n\nconst vS=document.getElementById('vx-section-voices');\n\nconst vBox=document.getElementById('vx-resultVoices');\n\nconst vD=document.getElementById('vx-resultVoicesDetail');\n\nif(voices.length){\n\nvS.style.display='';\n\nvBox.innerHTML=voices.map(function(v){\n\nreturn '<span class=\"chip\">'+escapeHtml(v)+'<\/span>';\n\n}).join('');\n\nvD.textContent=voicesDetail || '';\n\nvD.style.display=voicesDetail ? '' : 'none';\n\n}else{\n\nvS.style.display='none';\n\n}\n\nconst tS=document.getElementById('vx-section-thoughts');\n\nconst tL=document.getElementById('vx-resultThoughts');\n\nif(thoughts.length){\n\ntS.style.display='';\n\ntL.innerHTML=thoughts.map(function(item){\n\nconst t=item.t,\no=item.o,\nc=item.c;\n\nconst tag=o ? '<span class=\"origin-tag\">'+escapeHtml(o)+'<\/span>' : '';\n\nconst clue=c ? '<br><span style=\"font-size:.85rem;color:#8b9aa9;\">Indice : '+escapeHtml(c)+'<\/span>' : '';\n\nreturn '<li><strong>'+escapeHtml(t)+'<\/strong>'+tag+clue+'<\/li>';\n\n}).join('');\n\n}else{\n\ntS.style.display='none';\n\n}\n\nconst sS=document.getElementById('vx-section-signal');\n\nconst sP=document.getElementById('vx-resultSignal');\n\nconst bits=[];\n\nif(moment)\nbits.push('Tu as rep\u00e9r\u00e9 un moment : <strong>'+escapeHtml(moment)+'<\/strong>.');\n\nif(doing)\nbits.push('Ce que tu faisais : '+escapeHtml(doing)+'.');\n\nif(body)\nbits.push('Ton corps se sentait '+escapeHtml(body).toLowerCase()+'.');\n\nif(diff)\nbits.push('Ce qui \u00e9tait diff\u00e9rent : '+escapeHtml(diff)+'.');\n\nif(bits.length){\n\nsS.style.display='';\n\nsP.innerHTML=bits.join(' ');\n\n}else{\n\nsS.style.display='none';\n\n}\n\ndocument.getElementById('vx-resultAction').textContent=actionText;\n\ndocument.querySelectorAll('[id^=\"' + P + '-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('vx-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\ndocument.querySelectorAll('.vx-voice').forEach(function(c){\nc.checked=false;\n});\n\ndocument.getElementById('vx-voicesDetail').value='';\n\nfor(let i=1;i<=3;i++){\n\ndocument.querySelector('.vx-thought[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.vx-origin[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.vx-clue[data-n=\"'+i+'\"]').value='';\n\n}\n\n[\n'vx-momentOwnVoice',\n'vx-whatDoing',\n'vx-bodyFeeling',\n'vx-differenceOthers',\n'vx-actionOther'\n].forEach(function(id){\n\ndocument.getElementById(id).value='';\n\n});\n\ndocument.querySelectorAll('input[name=\"vx-action\"]').forEach(function(r){\nr.checked=false;\n});\n\ndocument.getElementById('vx-hint1').classList.remove('show');\n\ndocument.getElementById('vx-hint4').classList.remove('show');\n\ndocument.getElementById('vx-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst data={\n\nvoices:Array.from(document.querySelectorAll('.vx-voice:checked')).map(function(c){\nreturn c.value;\n}),\n\nvoicesDetail:document.getElementById('vx-voicesDetail').value,\n\nthoughts:[1,2,3].map(function(i){\n\nreturn{\n\nt:document.querySelector('.vx-thought[data-n=\"'+i+'\"]').value,\n\no:document.querySelector('.vx-origin[data-n=\"'+i+'\"]').value,\n\nc:document.querySelector('.vx-clue[data-n=\"'+i+'\"]').value\n\n};\n\n}),\n\nmomentOwnVoice:document.getElementById('vx-momentOwnVoice').value,\n\nwhatDoing:document.getElementById('vx-whatDoing').value,\n\nbodyFeeling:document.getElementById('vx-bodyFeeling').value,\n\ndifferenceOthers:document.getElementById('vx-differenceOthers').value,\n\naction:(document.querySelector('input[name=\"vx-action\"]:checked') || {}).value || '',\n\nactionOther:document.getElementById('vx-actionOther').value,\n\ncurrentStep:currentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nif(Array.isArray(data.voices))\n\ndocument.querySelectorAll('.vx-voice').forEach(function(c){\n\nc.checked=data.voices.indexOf(c.value)!==-1;\n\n});\n\nif(typeof data.voicesDetail==='string')\n\ndocument.getElementById('vx-voicesDetail').value=data.voicesDetail;\n\nif(Array.isArray(data.thoughts)){\n\ndata.thoughts.forEach(function(th,idx){\n\nconst i=idx+1;\n\nif(i>3) return;\n\nconst tE=document.querySelector('.vx-thought[data-n=\"'+i+'\"]');\n\nconst oE=document.querySelector('.vx-origin[data-n=\"'+i+'\"]');\n\nconst cE=document.querySelector('.vx-clue[data-n=\"'+i+'\"]');\n\nif(tE && typeof th.t==='string') tE.value=th.t;\n\nif(oE && typeof th.o==='string') oE.value=th.o;\n\nif(cE && typeof th.c==='string') cE.value=th.c;\n\n});\n\n}\n\n[\n'momentOwnVoice',\n'whatDoing',\n'bodyFeeling',\n'differenceOthers',\n'actionOther'\n].forEach(function(k){\n\nif(typeof data[k]==='string')\ndocument.getElementById('vx-'+k).value=data[k];\n\n});\n\nif(data.action){\n\nconst r=document.querySelector(\n'input[name=\"vx-action\"][value=\"' + CSS.escape(data.action) + '\"]'\n);\n\nif(r) r.checked=true;\n\n}\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('vx-resultBox').classList.contains('show')) return;\n\nupdateProgressTool(\nP,\ncurrentStepTool(P,TOTAL),\nTOTAL\n);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-voix')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-voix')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.VX=VX;\n\n\n\/* ============================================================\nOUTIL 2 \u2014 CLARIFIER UNE D\u00c9CISION\n============================================================ *\/\n\nconst CL=(function(){\n\nconst P='cl',\nKEY='jiris_clarifier_decision_v1',\nTOTAL=5;\n\nconst NEEDS=[\n's\u00e9curit\u00e9',\n'libert\u00e9',\n'reconnaissance',\n'sens',\n'lien',\n'stabilit\u00e9',\n'croissance',\n'autre'\n];\n\nfunction goToStep(n){\n\nif(n===2){\n\nconst d=document.getElementById('cl-decisionDesc').value.trim();\n\nif(!d){\n\ndocument.getElementById('cl-hint1').classList.add('show');\n\ndocument.getElementById('cl-decisionDesc').focus();\n\nreturn;\n\n}\n\ndocument.getElementById('cl-hint1').classList.remove('show');\n\n}\n\nif(n===3){\n\nif(countNamedOptions()<2){\n\ndocument.getElementById('cl-hint2').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('cl-hint2').classList.remove('show');\n\nbuildNeedsStep();\n\nbuildMostAligned();\n\n}\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction countNamedOptions(){\n\nlet c=0;\n\ndocument.querySelectorAll('.cl-optName').forEach(function(i){\n\nif(i.value.trim()) c++;\n\n});\n\nreturn c;\n\n}\n\nfunction getOptions(){\n\nconst opts=[];\n\nfor(let i=1;i<=4;i++){\n\nconst name=document.querySelector('.cl-optName[data-n=\"'+i+'\"]').value.trim();\n\nconst gain=document.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value.trim();\n\nconst loss=document.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value.trim();\n\nif(name)\n\nopts.push({\nindex:i,\nname:name,\ngain:gain,\nloss:loss\n});\n\n}\n\nreturn opts;\n\n}\n\nfunction buildNeedsStep(){\n\nconst opts=getOptions();\n\nconst container=document.getElementById('cl-needsOptions');\n\nconst prev={};\n\ncontainer.querySelectorAll('.cl-needs').forEach(function(cb){\n\nconst key=cb.dataset.opt+'::'+cb.value;\n\nif(cb.checked) prev[key]=true;\n\n});\n\nlet html='';\n\nopts.forEach(function(o){\n\nhtml+='<div class=\"option-block\">';\n\nhtml+='<div class=\"opt-title\"><span class=\"opt-num\">'+o.index+'<\/span><span>'+escapeHtml(o.name)+'<\/span><\/div>';\n\nhtml+='<div class=\"choices choices--inline\">';\n\nNEEDS.forEach(function(n){\n\nhtml+='<label class=\"choice\"><input type=\"checkbox\" class=\"cl-needs\" data-opt=\"'+o.index+'\" value=\"'+n+'\">';\n\nhtml+='<span class=\"box\"><\/span><span>'+capitalize(n)+'<\/span><\/label>';\n\n});\n\nhtml+='<\/div><\/div>';\n\n});\n\ncontainer.innerHTML=html;\n\ncontainer.querySelectorAll('.cl-needs').forEach(function(cb){\n\nconst key=cb.dataset.opt+'::'+cb.value;\n\nif(prev[key]) cb.checked=true;\n\n});\n\n}\n\nfunction buildMostAligned(){\n\nconst opts=getOptions();\n\nconst select=document.getElementById('cl-mostAligned');\n\nconst prev=select.value;\n\nlet html='<option value=\"\">\u2014 Choisir une option \u2014<\/option>';\n\nopts.forEach(function(o){\n\nhtml+='<option value=\"'+escapeHtml(o.name)+'\">'+escapeHtml(o.name)+'<\/option>';\n\n});\n\nselect.innerHTML=html;\n\nif(prev){\n\nconst m=Array.from(select.options).find(function(opt){\nreturn opt.value===prev;\n});\n\nif(m) select.value=prev;\n\n}\n\n}\n\nfunction showResult(){\n\nconst action=document.querySelector('input[name=\"cl-nextStepAction\"]:checked');\n\nif(!action){\n\ndocument.getElementById('cl-hint5').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('cl-hint5').classList.remove('show');\n\nconst decision=document.getElementById('cl-decisionDesc').value.trim();\n\nconst opts=getOptions();\n\nconst aligned=document.getElementById('cl-mostAligned').value;\n\nconst barriers=Array.from(\ndocument.querySelectorAll('.cl-barrier:checked')\n).map(function(b){\nreturn b.value;\n});\n\nconst barrierOther=document.getElementById('cl-barrierOther').value.trim();\n\nlet actionText=action.value;\n\nif(action.value==='autre'){\n\nconst other=document.getElementById('cl-nextStepOther').value.trim();\n\nactionText=other || 'un petit pas personnel';\n\n}\n\ndocument.getElementById('cl-resultDecision').textContent=decision || '\u2014';\n\nconst optsCont=document.getElementById('cl-resultOptions');\n\nif(opts.length){\n\nlet html='';\n\nopts.forEach(function(o){\n\nconst needs=Array.from(\ndocument.querySelectorAll('.cl-needs[data-opt=\"'+o.index+'\"]:checked')\n).map(function(cb){\nreturn capitalize(cb.value);\n});\n\nconst isAligned=aligned && aligned===o.name;\n\nhtml+='<div class=\"option-summary-item'+(isAligned?' aligned':'')+'\">';\n\nhtml+='<div class=\"os-head\"><span class=\"dot\"><\/span><span>'+escapeHtml(o.name)+'<\/span><\/div>';\n\nif(o.gain)\n\nhtml+='<p class=\"os-line\"><span class=\"os-label\">Permet<\/span>'+escapeHtml(o.gain)+'<\/p>';\n\nif(o.loss)\n\nhtml+='<p class=\"os-line\"><span class=\"os-label\">Limite<\/span>'+escapeHtml(o.loss)+'<\/p>';\n\nif(needs.length){\n\nhtml+='<div class=\"chips\" style=\"margin-top:10px;\">';\n\nneeds.forEach(function(n){\n\nhtml+='<span class=\"chip\">'+escapeHtml(n)+'<\/span>';\n\n});\n\nhtml+='<\/div>';\n\n}\n\nhtml+='<\/div>';\n\n});\n\noptsCont.innerHTML=html;\n\n}else{\n\noptsCont.innerHTML='<p>Aucune option nomm\u00e9e.<\/p>';\n\n}\n\nconst aS=document.getElementById('cl-section-aligned');\n\nif(aligned){\n\naS.style.display='';\n\ndocument.getElementById('cl-resultAligned').innerHTML=\n'En ce moment, l\\'option qui te semble la plus align\u00e9e est <strong>'+\nescapeHtml(aligned)+\n'<\/strong>. Ce n\\'est pas un engagement d\u00e9finitif \u2014 juste un rep\u00e8re pour avancer.';\n\n}else{\n\naS.style.display='none';\n\n}\n\nconst bS=document.getElementById('cl-section-barriers');\n\nconst bBox=document.getElementById('cl-resultBarriers');\n\nconst bP=document.getElementById('cl-resultBarrierOther');\n\nif(barriers.length){\n\nbS.style.display='';\n\nconst chips=barriers\n.filter(function(b){\nreturn b!=='Autre';\n})\n.map(function(b){\nreturn '<span class=\"chip\">'+escapeHtml(b)+'<\/span>';\n})\n.join('');\n\nbBox.innerHTML=chips || '<span class=\"chip\">Autre<\/span>';\n\nbP.textContent=barrierOther ? 'Pr\u00e9cision : '+barrierOther : '';\n\nbP.style.display=barrierOther ? '' : 'none';\n\n}else{\n\nbS.style.display='none';\n\n}\n\ndocument.getElementById('cl-resultAction').textContent=actionText;\n\ndocument.querySelectorAll('[id^=\"'+P+'-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('cl-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\ndocument.getElementById('cl-decisionDesc').value='';\n\nfor(let i=1;i<=4;i++){\n\ndocument.querySelector('.cl-optName[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value='';\n\ndocument.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value='';\n\n}\n\ndocument.getElementById('cl-needsOptions').innerHTML='';\n\ndocument.getElementById('cl-mostAligned').innerHTML='<option value=\"\">\u2014 Choisir une option \u2014<\/option>';\n\ndocument.querySelectorAll('.cl-barrier').forEach(function(cb){\ncb.checked=false;\n});\n\ndocument.getElementById('cl-barrierOther').value='';\n\ndocument.querySelectorAll('input[name=\"cl-nextStepAction\"]').forEach(function(r){\nr.checked=false;\n});\n\ndocument.getElementById('cl-nextStepOther').value='';\n\n[\n'cl-hint1',\n'cl-hint2',\n'cl-hint5'\n].forEach(function(id){\n\ndocument.getElementById(id).classList.remove('show');\n\n});\n\ndocument.getElementById('cl-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst data={\n\ndecisionDesc:document.getElementById('cl-decisionDesc').value,\n\noptions:[1,2,3,4].map(function(i){\n\nreturn{\n\nname:document.querySelector('.cl-optName[data-n=\"'+i+'\"]').value,\n\ngain:document.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value,\n\nloss:document.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value\n\n};\n\n}),\n\nneeds:Array.from(document.querySelectorAll('.cl-needs:checked')).map(function(cb){\n\nreturn{\nopt:cb.dataset.opt,\nvalue:cb.value\n};\n\n}),\n\nmostAligned:document.getElementById('cl-mostAligned').value,\n\nbarriers:Array.from(document.querySelectorAll('.cl-barrier:checked')).map(function(cb){\nreturn cb.value;\n}),\n\nbarrierOther:document.getElementById('cl-barrierOther').value,\n\nnextStepAction:(document.querySelector('input[name=\"cl-nextStepAction\"]:checked') || {}).value || '',\n\nnextStepOther:document.getElementById('cl-nextStepOther').value,\n\ncurrentStep:currentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nif(typeof data.decisionDesc==='string')\n\ndocument.getElementById('cl-decisionDesc').value=data.decisionDesc;\n\nif(Array.isArray(data.options)){\n\ndata.options.forEach(function(o,idx){\n\nconst i=idx+1;\n\nif(i>4) return;\n\ndocument.querySelector('.cl-optName[data-n=\"'+i+'\"]').value=o.name || '';\n\ndocument.querySelector('.cl-optGain[data-n=\"'+i+'\"]').value=o.gain || '';\n\ndocument.querySelector('.cl-optLoss[data-n=\"'+i+'\"]').value=o.loss || '';\n\n});\n\n}\n\nif(\ndata.options &&\ndata.options.filter(function(o){\nreturn o.name && o.name.trim();\n}).length>=2\n){\n\nbuildNeedsStep();\n\nbuildMostAligned();\n\n}\n\nif(Array.isArray(data.needs)){\n\ndata.needs.forEach(function(n){\n\nconst cb=document.querySelector(\n'.cl-needs[data-opt=\"'+n.opt+'\"][value=\"'+n.value+'\"]'\n);\n\nif(cb) cb.checked=true;\n\n});\n\n}\n\nif(typeof data.mostAligned==='string'){\n\nconst select=document.getElementById('cl-mostAligned');\n\nconst m=Array.from(select.options).find(function(o){\nreturn o.value===data.mostAligned;\n});\n\nif(m) select.value=data.mostAligned;\n\n}\n\nif(Array.isArray(data.barriers))\n\ndocument.querySelectorAll('.cl-barrier').forEach(function(cb){\n\ncb.checked=data.barriers.indexOf(cb.value)!==-1;\n\n});\n\nif(typeof data.barrierOther==='string')\n\ndocument.getElementById('cl-barrierOther').value=data.barrierOther;\n\nif(data.nextStepAction){\n\nconst r=document.querySelector(\n'input[name=\"cl-nextStepAction\"][value=\"'+CSS.escape(data.nextStepAction)+'\"]'\n);\n\nif(r) r.checked=true;\n\n}\n\nif(typeof data.nextStepOther==='string')\n\ndocument.getElementById('cl-nextStepOther').value=data.nextStepOther;\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('cl-resultBox').classList.contains('show')) return;\n\nupdateProgressTool(\nP,\ncurrentStepTool(P,TOTAL),\nTOTAL\n);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-clarifier')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-clarifier')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.CL=CL;\n\n\n\/* ============================================================\nOUTIL 3 \u2014 ET SI UNE AUTRE VOIE \u00c9TAIT POSSIBLE ?\n============================================================ *\/\n\nconst VO=(function(){\n\nconst P='vo',\nKEY='jiris_autre_voie_v1',\nTOTAL=5;\n\nconst QUESTIONS=[\n{\nid:'vo-q1',\nlabel:'Explorer en attendant'\n},\n{\nid:'vo-q2',\nlabel:'Solution \u00ab ni l\\'un ni l\\'autre \u00bb'\n},\n{\nid:'vo-q3',\nlabel:'10 % de libert\u00e9 en plus'\n},\n{\nid:'vo-q4',\nlabel:'Exemple inspirant'\n},\n{\nid:'vo-q5',\nlabel:'Option \u00ab suffisamment bonne \u00bb'\n}\n];\n\nfunction goToStep(n){\n\nif(n===2){\n\nif(!document.getElementById('vo-blockageDesc').value.trim()){\n\ndocument.getElementById('vo-hint1').classList.add('show');\n\ndocument.getElementById('vo-blockageDesc').focus();\n\nreturn;\n\n}\n\ndocument.getElementById('vo-hint1').classList.remove('show');\n\n}\n\nif(n===4) buildPathsList();\n\nif(n===5 && !validatePathSelection()) return;\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction buildPathsList(){\n\nconst container=document.getElementById('vo-pathsList');\n\nconst emptyMsg=document.getElementById('vo-pathsEmpty');\n\nconst otherField=document.getElementById('vo-otherPathField');\n\nconst prevRadio=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst prevValue=prevRadio ? prevRadio.value : '';\n\nconst prevOther=document.getElementById('vo-otherPath').value;\n\nconst available=QUESTIONS\n.map(function(q){\n\nreturn{\nid:q.id,\nlabel:q.label,\nvalue:document.getElementById(q.id).value.trim()\n};\n\n})\n.filter(function(q){\nreturn q.value;\n});\n\nif(!available.length){\n\ncontainer.innerHTML='';\n\ncontainer.style.display='none';\n\notherField.style.display='none';\n\nemptyMsg.style.display='block';\n\nreturn;\n\n}\n\ncontainer.style.display='';\n\nemptyMsg.style.display='none';\n\nlet html='';\n\navailable.forEach(function(p){\n\nhtml+='<label class=\"path-option\">';\n\nhtml+='<input type=\"radio\" name=\"vo-selectedPath\" value=\"'+escapeHtml(p.value)+'\" data-label=\"'+escapeHtml(p.label)+'\" data-qid=\"'+p.id+'\">';\n\nhtml+='<span class=\"radio-dot\"><\/span>';\n\nhtml+='<span class=\"path-q\">'+escapeHtml(p.label)+'<\/span>';\n\nhtml+='<span class=\"path-a\">'+escapeHtml(p.value)+'<\/span>';\n\nhtml+='<\/label>';\n\n});\n\nhtml+='<label class=\"path-option path-other\">';\n\nhtml+='<input type=\"radio\" name=\"vo-selectedPath\" value=\"__autre__\" data-label=\"Autre\" data-qid=\"other\">';\n\nhtml+='<span class=\"radio-dot\"><\/span>';\n\nhtml+='<span class=\"path-q\">Autre<\/span>';\n\nhtml+='<span class=\"path-a\">\u00c9crire une nouvelle piste<\/span>';\n\nhtml+='<\/label>';\n\ncontainer.innerHTML=html;\n\nif(prevValue){\n\ncontainer.querySelectorAll(\n'input[name=\"vo-selectedPath\"]'\n).forEach(function(r){\n\nif(r.value===prevValue) r.checked=true;\n\n});\n\n}\n\ndocument.getElementById('vo-otherPath').value=prevOther;\n\ncontainer.querySelectorAll(\n'input[name=\"vo-selectedPath\"]'\n).forEach(function(r){\n\nr.addEventListener('change',toggleOtherField);\n\n});\n\ntoggleOtherField();\n\n}\n\nfunction toggleOtherField(){\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst otherField=document.getElementById('vo-otherPathField');\n\nif(selected && selected.value==='__autre__')\n\notherField.style.display='block';\n\nelse\n\notherField.style.display='none';\n\n}\n\nfunction validatePathSelection(){\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst hint=document.getElementById('vo-hint4');\n\nif(!selected){\n\nhint.textContent='Choisis une piste pour continuer.';\n\nhint.classList.add('show');\n\nreturn false;\n\n}\n\nif(selected.value==='__autre__'){\n\nconst other=document.getElementById('vo-otherPath').value.trim();\n\nif(!other){\n\nhint.textContent='D\u00e9cris ta piste dans le champ ci-dessus.';\n\nhint.classList.add('show');\n\ndocument.getElementById('vo-otherPath').focus();\n\nreturn false;\n\n}\n\n}\n\nhint.classList.remove('show');\n\nreturn true;\n\n}\n\nfunction showResult(){\n\nif(!validatePathSelection()) return;\n\nconst blockage=\ndocument.getElementById('vo-blockageDesc').value.trim()\n|| 'cette situation';\n\nconst eitherOr=\ndocument.getElementById('vo-eitherOr').value.trim();\n\nconst explored=QUESTIONS\n.map(function(q){\n\nreturn{\nlabel:q.label,\nvalue:document.getElementById(q.id).value.trim()\n};\n\n})\n.filter(function(q){\nreturn q.value;\n});\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nlet chosenPath,\npathLabel;\n\nif(selected.value==='__autre__'){\n\nchosenPath=document.getElementById('vo-otherPath').value.trim();\n\npathLabel='Autre';\n\n}else{\n\nchosenPath=selected.value;\n\npathLabel=selected.dataset.label || '';\n\n}\n\nconst oldQ=document.getElementById('vo-oldQuestion').value.trim();\n\nconst newQ=\ndocument.getElementById('vo-newQuestion').value.trim()\n||\n\"Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ?\";\n\ndocument.getElementById('vo-resultBlockage').textContent=blockage;\n\nconst eoSection=document.getElementById('vo-section-eitheror');\n\nif(eitherOr){\n\neoSection.style.display='';\n\ndocument.getElementById('vo-resultEitherOr').textContent=\n'\u00ab '+eitherOr+' \u00bb';\n\n}else{\n\neoSection.style.display='none';\n\n}\n\nconst eS=document.getElementById('vo-section-explored');\n\nconst eL=document.getElementById('vo-resultExplored');\n\nif(explored.length){\n\neS.style.display='';\n\nlet html='';\n\nexplored.forEach(function(q){\n\nhtml+=\n'<li><span class=\"q-label\">'+\nescapeHtml(q.label)+\n'<\/span>'+\nescapeHtml(q.value)+\n'<\/li>';\n\n});\n\neL.innerHTML=html;\n\n}else{\n\neS.style.display='none';\n\n}\n\ndocument.getElementById('vo-resultPath').textContent=chosenPath;\n\nconst origin=document.getElementById('vo-resultPathOrigin');\n\nif(pathLabel && pathLabel!=='Autre'){\n\norigin.textContent='Issue de la question : '+pathLabel;\n\norigin.style.display='';\n\n}else if(pathLabel==='Autre'){\n\norigin.textContent='Piste formul\u00e9e librement';\n\norigin.style.display='';\n\n}else{\n\norigin.style.display='none';\n\n}\n\nconst shiftBox=document.getElementById('vo-resultQuestionShift');\n\nlet html='';\n\nif(oldQ)\n\nhtml+=\n'<div class=\"shift-item old\"><span class=\"mark\">\u2715<\/span><span>'+\nescapeHtml(oldQ)+\n'<\/span><\/div>';\n\nhtml+=\n'<div class=\"shift-item new\"><span class=\"mark\">\u2192<\/span><span>'+\nescapeHtml(newQ)+\n'<\/span><\/div>';\n\nshiftBox.innerHTML=html;\n\ndocument.querySelectorAll('[id^=\"'+P+'-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('vo-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\n[\n'vo-blockageDesc',\n'vo-eitherOr',\n'vo-q1',\n'vo-q2',\n'vo-q3',\n'vo-q4',\n'vo-q5',\n'vo-otherPath',\n'vo-oldQuestion',\n'vo-newQuestion'\n].forEach(function(id){\n\ndocument.getElementById(id).value='';\n\n});\n\ndocument.getElementById('vo-pathsList').innerHTML='';\n\ndocument.getElementById('vo-pathsEmpty').style.display='none';\n\ndocument.getElementById('vo-otherPathField').style.display='none';\n\n[\n'vo-hint1',\n'vo-hint4'\n].forEach(function(id){\n\ndocument.getElementById(id).classList.remove('show');\n\n});\n\ndocument.getElementById('vo-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst selected=document.querySelector(\n'input[name=\"vo-selectedPath\"]:checked'\n);\n\nconst data={\n\nblockageDesc:\ndocument.getElementById('vo-blockageDesc').value,\n\neitherOr:\ndocument.getElementById('vo-eitherOr').value,\n\nq1:document.getElementById('vo-q1').value,\n\nq2:document.getElementById('vo-q2').value,\n\nq3:document.getElementById('vo-q3').value,\n\nq4:document.getElementById('vo-q4').value,\n\nq5:document.getElementById('vo-q5').value,\n\nselectedPath:selected ? selected.value : '',\n\notherPath:document.getElementById('vo-otherPath').value,\n\noldQuestion:document.getElementById('vo-oldQuestion').value,\n\nnewQuestion:document.getElementById('vo-newQuestion').value,\n\ncurrentStep:currentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nconst map={\n\nblockageDesc:'vo-blockageDesc',\n\neitherOr:'vo-eitherOr',\n\nq1:'vo-q1',\n\nq2:'vo-q2',\n\nq3:'vo-q3',\n\nq4:'vo-q4',\n\nq5:'vo-q5',\n\notherPath:'vo-otherPath',\n\noldQuestion:'vo-oldQuestion',\n\nnewQuestion:'vo-newQuestion'\n\n};\n\nObject.keys(map).forEach(function(k){\n\nif(typeof data[k]==='string')\n\ndocument.getElementById(map[k]).value=data[k];\n\n});\n\nif(data.selectedPath)\n\nwindow.__jirisPrevPath=data.selectedPath;\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('vo-resultBox').classList.contains('show')) return;\n\nconst cur=currentStepTool(P,TOTAL);\n\nif(cur>=4){\n\nbuildPathsList();\n\nif(window.__jirisPrevPath){\n\ndocument.querySelectorAll(\n'input[name=\"vo-selectedPath\"]'\n).forEach(function(r){\n\nif(r.value===window.__jirisPrevPath)\nr.checked=true;\n\n});\n\ntoggleOtherField();\n\n}\n\n}\n\nupdateProgressTool(P,cur,TOTAL);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-voie')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-voie')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.VO=VO;\n\n\n\/* ============================================================\nOUTIL 4 \u2014 MES FORCES ET MES RESSOURCES\n============================================================ *\/\n\nconst FO=(function(){\n\nconst P='fo',\nKEY='jiris_forces_ressources_v1',\nTOTAL=7;\n\nfunction goToStep(n){\n\nif(n===2){\n\nconst any=document.querySelector('.fo-inner:checked');\n\nconst other=document.getElementById('fo-innerOther').value.trim();\n\nif(!any && !other){\n\ndocument.getElementById('fo-hint1').classList.add('show');\n\nreturn;\n\n}\n\ndocument.getElementById('fo-hint1').classList.remove('show');\n\n}\n\nshowStepTool(P,n,TOTAL);\n\nsave();\n\n}\n\nfunction showResult(){\n\nconst phrase=document.getElementById('fo-resourcePhrase').value.trim();\n\nif(!phrase){\n\ndocument.getElementById('fo-hint7').classList.add('show');\n\ndocument.getElementById('fo-resourcePhrase').focus();\n\nreturn;\n\n}\n\ndocument.getElementById('fo-hint7').classList.remove('show');\n\nconst inners=Array.from(\ndocument.querySelectorAll('.fo-inner:checked')\n).map(function(c){\nreturn c.value;\n});\n\nconst innerOther=\ndocument.getElementById('fo-innerOther').value.trim();\n\nconst learnings=\ndocument.getElementById('fo-learnings').value.trim();\n\nconst peoples=Array.from(\ndocument.querySelectorAll('.fo-people:checked')\n).map(function(c){\nreturn c.value;\n});\n\nconst peopleDetail=\ndocument.getElementById('fo-peopleDetail').value.trim();\n\nconst envs=Array.from(\ndocument.querySelectorAll('.fo-env:checked')\n).map(function(c){\nreturn c.value;\n});\n\nconst envOther=\ndocument.getElementById('fo-envOther').value.trim();\n\nconst smallHelp=\ndocument.getElementById('fo-smallHelp').value.trim();\n\nconst toMobilize=\ndocument.getElementById('fo-toMobilize').value.trim();\n\nconst iS=document.getElementById('fo-section-inner');\n\nconst iB=document.getElementById('fo-resultInner');\n\nconst innerList=inners.filter(function(v){\nreturn v!=='Autre';\n});\n\nconst chips=[];\n\ninnerList.forEach(function(v){\n\nchips.push(\n'<span class=\"chip\">'+\nescapeHtml(v)+\n'<\/span>'\n);\n\n});\n\nif(innerOther)\n\nchips.push(\n'<span class=\"chip\">'+\nescapeHtml(innerOther)+\n'<\/span>'\n);\n\nif(chips.length){\n\niS.style.display='';\n\niB.innerHTML=chips.join('');\n\n}else{\n\niS.style.display='none';\n\n}\n\nconst lS=document.getElementById('fo-section-learnings');\n\nif(learnings){\n\nlS.style.display='';\n\ndocument.getElementById('fo-resultLearnings').textContent=learnings;\n\n}else{\n\nlS.style.display='none';\n\n}\n\nconst pS=document.getElementById('fo-section-people');\n\nconst pB=document.getElementById('fo-resultPeople');\n\nconst pD=document.getElementById('fo-resultPeopleDetail');\n\nconst pf=peoples.filter(function(p){\nreturn p!=='Une personne en particulier';\n});\n\nif(pf.length || peopleDetail){\n\npS.style.display='';\n\npB.innerHTML=pf.map(function(p){\n\nreturn '<span class=\"chip\">'+escapeHtml(p)+'<\/span>';\n\n}).join('');\n\npD.textContent=peopleDetail\n? 'Pr\u00e9cision : '+peopleDetail\n: '';\n\npD.style.display=peopleDetail ? '' : 'none';\n\n}else{\n\npS.style.display='none';\n\n}\n\nconst eS=document.getElementById('fo-section-env');\n\nconst eB=document.getElementById('fo-resultEnv');\n\nconst eP=document.getElementById('fo-resultEnvOther');\n\nconst ef=envs.filter(function(v){\nreturn v!=='Autre';\n});\n\nif(ef.length || envOther){\n\neS.style.display='';\n\neB.innerHTML=ef.map(function(v){\n\nreturn '<span class=\"chip\">'+escapeHtml(v)+'<\/span>';\n\n}).join('');\n\neP.textContent=envOther\n? 'Pr\u00e9cision : '+envOther\n: '';\n\neP.style.display=envOther ? '' : 'none';\n\n}else{\n\neS.style.display='none';\n\n}\n\nconst sS=document.getElementById('fo-section-smallhelp');\n\nif(smallHelp){\n\nsS.style.display='';\n\ndocument.getElementById('fo-resultSmallHelp').textContent=smallHelp;\n\n}else{\n\nsS.style.display='none';\n\n}\n\nconst mS=document.getElementById('fo-section-mobilize');\n\nif(toMobilize){\n\nmS.style.display='';\n\ndocument.getElementById('fo-resultMobilize').textContent=toMobilize;\n\n}else{\n\nmS.style.display='none';\n\n}\n\ndocument.getElementById('fo-resultPhrase').textContent=phrase;\n\ndocument.querySelectorAll('[id^=\"'+P+'-step\"]').forEach(function(s){\ns.classList.add('hidden');\n});\n\ndocument.getElementById('fo-resultBox').classList.add('show');\n\nupdateProgressTool(P,TOTAL,TOTAL);\n\nsave();\n\nwindow.scrollTo({\ntop:0,\nbehavior:'smooth'\n});\n\n}\n\nfunction reset(){\n\nif(!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\ndocument.querySelectorAll(\n'.fo-inner, .fo-people, .fo-env'\n).forEach(function(cb){\n\ncb.checked=false;\n\n});\n\n[\n'fo-innerOther',\n'fo-learnings',\n'fo-peopleDetail',\n'fo-envOther',\n'fo-smallHelp',\n'fo-toMobilize',\n'fo-resourcePhrase'\n].forEach(function(id){\n\ndocument.getElementById(id).value='';\n\n});\n\n[\n'fo-hint1',\n'fo-hint7'\n].forEach(function(id){\n\ndocument.getElementById(id).classList.remove('show');\n\n});\n\ndocument.getElementById('fo-resultBox').classList.remove('show');\n\ntry{\nlocalStorage.removeItem(KEY);\n}catch(e){}\n\ngoToStep(1);\n\n}\n\nfunction save(){\n\ntry{\n\nconst data={\n\ninner:Array.from(\ndocument.querySelectorAll('.fo-inner:checked')\n).map(function(c){\nreturn c.value;\n}),\n\ninnerOther:\ndocument.getElementById('fo-innerOther').value,\n\nlearnings:\ndocument.getElementById('fo-learnings').value,\n\npeople:Array.from(\ndocument.querySelectorAll('.fo-people:checked')\n).map(function(c){\nreturn c.value;\n}),\n\npeopleDetail:\ndocument.getElementById('fo-peopleDetail').value,\n\nenv:Array.from(\ndocument.querySelectorAll('.fo-env:checked')\n).map(function(c){\nreturn c.value;\n}),\n\nenvOther:\ndocument.getElementById('fo-envOther').value,\n\nsmallHelp:\ndocument.getElementById('fo-smallHelp').value,\n\ntoMobilize:\ndocument.getElementById('fo-toMobilize').value,\n\nresourcePhrase:\ndocument.getElementById('fo-resourcePhrase').value,\n\ncurrentStep:\ncurrentStepTool(P,TOTAL)\n\n};\n\nlocalStorage.setItem(KEY,JSON.stringify(data));\n\n}catch(e){}\n\n}\n\nfunction load(){\n\nlet raw;\n\ntry{\nraw=localStorage.getItem(KEY);\n}catch(e){\nreturn false;\n}\n\nif(!raw) return false;\n\nlet data;\n\ntry{\ndata=JSON.parse(raw);\n}catch(e){\nreturn false;\n}\n\nif(!data) return false;\n\nif(Array.isArray(data.inner))\n\ndocument.querySelectorAll('.fo-inner').forEach(function(cb){\n\ncb.checked=data.inner.indexOf(cb.value)!==-1;\n\n});\n\nif(Array.isArray(data.people))\n\ndocument.querySelectorAll('.fo-people').forEach(function(cb){\n\ncb.checked=data.people.indexOf(cb.value)!==-1;\n\n});\n\nif(Array.isArray(data.env))\n\ndocument.querySelectorAll('.fo-env').forEach(function(cb){\n\ncb.checked=data.env.indexOf(cb.value)!==-1;\n\n});\n\n[\n'innerOther',\n'learnings',\n'peopleDetail',\n'envOther',\n'smallHelp',\n'toMobilize',\n'resourcePhrase'\n].forEach(function(k){\n\nif(typeof data[k]==='string')\n\ndocument.getElementById('fo-'+k).value=data[k];\n\n});\n\nreturn true;\n\n}\n\nlet firstEnter=true;\n\nfunction onEnter(){\n\nif(firstEnter){\n\nload();\n\nfirstEnter=false;\n\n}\n\nif(document.getElementById('fo-resultBox').classList.contains('show')) return;\n\nupdateProgressTool(\nP,\ncurrentStepTool(P,TOTAL),\nTOTAL\n);\n\n}\n\ndocument.addEventListener('input',function(e){\n\nif(e.target.closest('#view-forces')) save();\n\n});\n\ndocument.addEventListener('change',function(e){\n\nif(e.target.closest('#view-forces')) save();\n\n});\n\nreturn{\ngoToStep:goToStep,\nshowResult:showResult,\nreset:reset,\nonEnter:onEnter\n};\n\n})();\n\nwindow.FO=FO;\n\n\n\/* ============================================================\nROUTAGE\n============================================================ *\/\n\nconst VIEWS=[\n'hub',\n'voix',\n'clarifier',\n'voie',\n'forces'\n];\n\nfunction route(){\n\nlet hash=(location.hash || '#hub').slice(1);\n\nif(VIEWS.indexOf(hash)===-1)\nhash='hub';\n\nVIEWS.forEach(function(v){\n\nconst el=document.getElementById('view-'+v);\n\nif(el)\nel.classList.toggle('active',v===hash);\n\n});\n\nwindow.scrollTo({\ntop:0,\nbehavior:'auto'\n});\n\nif(hash==='voix' && window.VX)\nVX.onEnter();\n\nif(hash==='clarifier' && window.CL)\nCL.onEnter();\n\nif(hash==='voie' && window.VO)\nVO.onEnter();\n\nif(hash==='forces' && window.FO)\nFO.onEnter();\n\n}\n\nwindow.addEventListener('hashchange',route);\n\nwindow.addEventListener('DOMContentLoaded',function(){\n\nif(!location.hash)\nhistory.replaceState(null,'','#hub');\n\nroute();\n\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>Accueil Explorer mes possibilit\u00e9s \u00b7 Hub JIRIS \u2190 Retour au hub Explorer mes possibilit\u00e9s Prendre un pas de recul pour clarifier o\u00f9 vous en \u00eates, identifier ce qui compte pour vous et ouvrir de nouvelles perspectives. \u00c0 votre rythme, explorez ce qui vous anime, clarifiez vos choix et appuyez-vous sur vos forces pour avancer avec […]<\/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-3873","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3873","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=3873"}],"version-history":[{"count":61,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3873\/revisions"}],"predecessor-version":[{"id":5042,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3873\/revisions\/5042"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=3873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}