Et si une autre voie \u00e9tait possible ? \u00b7 JIRIS<\/title>\n<style>\n\/* ============================================================\n DESIGN SYSTEM JIRIS\n ============================================================ *\/\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 --accent:#8163b0;\n --accent-dark:#6b4f96;\n --accent-soft:#f2eef9;\n --accent-ring:rgba(129,99,176,.35);\n --radius:16px;\n --radius-lg:20px;\n --shadow-sm:0 2px 8px rgba(29,54,74,.06);\n --shadow-md:0 12px 30px rgba(29,54,74,.11);\n}\n\n*,*::before,*::after{ box-sizing:border-box; }\n\nbody{\n margin:0;\n font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n background:#e1e8f0; \/* ext\u00e9rieur du cadre, contraste doux avec #eef3f9 *\/\n color:var(--ink);\n line-height:1.65;\n -webkit-font-smoothing:antialiased;\n text-rendering:optimizeLegibility;\n}\n\n\/* ============================================================\n CADRE PRINCIPAL \u2014 JIRIS\n ============================================================ *\/\n.jiris-retrouver-voix{\n max-width:1100px;\n margin:28px auto;\n background:#eef3f9;\n border-radius:24px;\n box-shadow:\n 0 18px 48px rgba(29,54,74,.10),\n 0 4px 12px rgba(29,54,74,.05);\n overflow:clip; \/* clip (et non hidden) \u2192 sticky pr\u00e9serv\u00e9 *\/\n}\n\n.wrap{\n max-width:780px;\n margin:0 auto;\n padding:0 20px;\n}\n\n\/* ============================================================\n EN-T\u00caTE\n ============================================================ *\/\n.topbar{\n background:linear-gradient(180deg,#ffffff 0%,#eef3f9 100%);\n border-bottom:1px solid var(--line);\n padding:22px 0 0;\n}\n\n.back-link{\n display:inline-flex;\n align-items:center;\n gap:8px;\n padding:7px 14px;\n font-size:.88rem;\n font-weight:600;\n color:var(--primary-dark);\n background:var(--surface);\n border:1px solid #dbe8f1;\n border-radius:999px;\n text-decoration:none;\n box-shadow:var(--shadow-sm);\n transition:background .2s ease, border-color .2s ease, transform .2s ease;\n}\n.back-link:hover,\n.back-link:focus-visible{\n background:var(--primary-soft);\n border-color:#c3ddec;\n transform:translateX(-2px);\n}\n.back-link:focus-visible{\n outline:3px solid var(--accent-ring);\n outline-offset:3px;\n}\n\n.page-head{\n padding:22px 0 26px;\n}\n.page-head h1{\n margin:0 0 8px;\n font-size:clamp(1.5rem,3.4vw,1.95rem);\n line-height:1.25;\n letter-spacing:-.02em;\n font-weight:750;\n color:var(--ink);\n}\n.page-head p{\n margin:0;\n max-width:620px;\n font-size:.98rem;\n color:var(--ink-soft);\n}\n\n\/* ============================================================\n BARRE DE PROGRESSION\n ============================================================ *\/\n.progress{\n position:sticky;\n top:0;\n z-index:10;\n background:rgba(238,243,249,.92);\n backdrop-filter:blur(8px);\n -webkit-backdrop-filter:blur(8px);\n border-bottom:1px solid var(--line);\n padding:14px 0 16px;\n}\n.progress-inner{\n display:flex;\n align-items:center;\n gap:14px;\n}\n.progress-track{\n flex:1;\n height:6px;\n background:#dde6ee;\n border-radius:999px;\n overflow:hidden;\n}\n.progress-fill{\n height:100%;\n width:20%;\n background:linear-gradient(90deg,var(--accent),#a98ed0);\n border-radius:999px;\n transition:width .35s ease;\n}\n.progress-label{\n font-size:.82rem;\n font-weight:600;\n color:var(--ink-soft);\n white-space:nowrap;\n letter-spacing:.02em;\n}\n\n\/* ============================================================\n \u00c9TAPES\n ============================================================ *\/\nmain{\n padding:32px 0 0;\n}\n\n\/* espace blanc avant le footer *\/\nmain.wrap{\n padding-bottom:72px;\n}\n\n.step{\n background:var(--surface);\n border:1px solid var(--line);\n border-radius:var(--radius-lg);\n padding:clamp(22px,4vw,34px);\n box-shadow:var(--shadow-sm);\n animation:fade-in .3s ease;\n}\n.step.hidden{ display:none; }\n\n@keyframes fade-in{\n from{ opacity:0; transform:translateY(6px); }\n to{ opacity:1; transform:translateY(0); }\n}\n\n.step h2{\n margin:0 0 6px;\n font-size:1.22rem;\n font-weight:700;\n letter-spacing:-.01em;\n color:var(--ink);\n}\n.step .step-intro{\n margin:0 0 22px;\n font-size:.95rem;\n color:var(--ink-soft);\n}\n\n\/* --- Champs --- *\/\n.field{\n margin-bottom:18px;\n}\n.field:last-child{ margin-bottom:0; }\n\nlabel{\n display:block;\n margin-bottom:7px;\n font-size:.92rem;\n font-weight:600;\n color:var(--ink);\n}\nlabel .opt{\n font-weight:400;\n font-size:.82rem;\n color:#8b9aa9;\n margin-left:4px;\n}\n\ninput[type=\"text\"],\ntextarea,\nselect{\n width:100%;\n padding:11px 14px;\n font-family:inherit;\n font-size:.95rem;\n color:var(--ink);\n background:#fbfdff;\n border:1px solid #d8e3ec;\n border-radius:10px;\n transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;\n}\ninput[type=\"text\"]::placeholder,\ntextarea::placeholder{\n color:#9aacbc;\n}\ninput[type=\"text\"]:focus,\ntextarea:focus,\nselect:focus{\n outline:none;\n background:#fff;\n border-color:var(--accent);\n box-shadow:0 0 0 3px var(--accent-ring);\n}\ntextarea{\n min-height:88px;\n resize:vertical;\n line-height:1.55;\n}\n\n\/* --- Question ouverte (\u00e9tape 3) --- *\/\n.open-question{\n padding:20px;\n margin-bottom:18px;\n background:#f8fbfd;\n border:1px solid var(--line);\n border-radius:14px;\n transition:border-color .2s ease, background .2s ease;\n}\n.open-question:focus-within{\n border-color:#d8c9ec;\n background:#faf8fd;\n}\n.open-question .q-head{\n display:flex;\n align-items:flex-start;\n gap:12px;\n margin-bottom:12px;\n}\n.open-question .q-num{\n flex:0 0 auto;\n display:grid;\n place-items:center;\n width:28px;\n height:28px;\n font-size:.82rem;\n font-weight:700;\n color:var(--accent);\n background:var(--accent-soft);\n border-radius:50%;\n margin-top:1px;\n}\n.open-question .q-text{\n margin:0;\n font-size:.95rem;\n font-weight:600;\n color:var(--ink);\n line-height:1.5;\n}\n.open-question .field:last-child{ margin-bottom:0; }\n\n\/* --- Liste des pistes (\u00e9tape 4) --- *\/\n.paths-list{\n display:grid;\n gap:12px;\n margin-bottom:18px;\n}\n\n.path-option{\n position:relative;\n display:block;\n padding:18px 20px 18px 56px;\n background:#fbfdff;\n border:1px solid #d8e3ec;\n border-radius:14px;\n cursor:pointer;\n transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;\n}\n.path-option:hover{\n border-color:#d8c9ec;\n background:#faf8fd;\n}\n.path-option input{\n position:absolute;\n opacity:0;\n pointer-events:none;\n}\n.path-option .radio-dot{\n position:absolute;\n left:20px;\n top:22px;\n width:22px;\n height:22px;\n border:2px solid #c3d3e0;\n border-radius:50%;\n background:#fff;\n transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;\n}\n.path-option .radio-dot::after{\n content:\"\";\n position:absolute;\n top:50%; left:50%;\n width:10px; height:10px;\n border-radius:50%;\n background:#fff;\n transform:translate(-50%,-50%) scale(0);\n transition:transform .18s ease;\n}\n.path-option input:checked ~ .radio-dot{\n background:var(--accent);\n border-color:var(--accent);\n}\n.path-option input:checked ~ .radio-dot::after{\n transform:translate(-50%,-50%) scale(1);\n}\n.path-option:has(input:checked){\n border-color:var(--accent);\n background:linear-gradient(135deg,var(--accent-soft),#faf8fd);\n box-shadow:0 4px 14px rgba(129,99,176,.12);\n}\n.path-option input:focus-visible ~ .radio-dot{\n box-shadow:0 0 0 3px var(--accent-ring);\n}\n.path-option .path-q{\n display:block;\n margin-bottom:6px;\n font-size:.74rem;\n font-weight:700;\n letter-spacing:.06em;\n text-transform:uppercase;\n color:var(--accent);\n}\n.path-option .path-a{\n display:block;\n font-size:.96rem;\n color:var(--ink);\n line-height:1.55;\n font-weight:500;\n}\n.path-option.path-other .path-a{\n color:var(--ink-soft);\n font-style:italic;\n font-weight:400;\n}\n\n\/* --- Message de validation --- *\/\n.hint{\n display:none;\n margin-top:16px;\n padding:12px 16px;\n font-size:.89rem;\n color:#8a5a1f;\n background:#fdf3e2;\n border:1px solid #f0dcb4;\n border-radius:10px;\n}\n.hint.show{ display:block; animation:fade-in .25s ease; }\n.hint--info{\n color:#4f3a72;\n background:var(--accent-soft);\n border-color:#ded3ec;\n}\n\n\/* --- Navigation --- *\/\n.actions{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:26px;\n padding-top:22px;\n border-top:1px solid var(--line);\n}\n.actions .spacer{ flex:1; }\n\n.btn{\n display:inline-flex;\n align-items:center;\n justify-content:center;\n gap:8px;\n padding:12px 24px;\n font-family:inherit;\n font-size:.95rem;\n font-weight:650;\n letter-spacing:.01em;\n border-radius:10px;\n border:1px solid transparent;\n cursor:pointer;\n text-decoration:none;\n transition:background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n}\n.btn:focus-visible{\n outline:3px solid var(--accent-ring);\n outline-offset:2px;\n}\n\n.btn-primary{\n background:var(--accent);\n color:#fff;\n box-shadow:0 4px 12px rgba(129,99,176,.28);\n}\n.btn-primary:hover{\n background:var(--accent-dark);\n transform:translateY(-1px);\n box-shadow:0 8px 18px rgba(129,99,176,.32);\n}\n\n.btn-ghost{\n background:#fff;\n color:var(--ink-soft);\n border-color:#d8e3ec;\n}\n.btn-ghost:hover{\n background:#f6fafd;\n color:var(--ink);\n border-color:#c3d9e8;\n}\n\n\/* ============================================================\n R\u00c9SULTAT\n ============================================================ *\/\n.result{\n display:none;\n margin-top:26px;\n background:var(--surface);\n border:1px solid var(--line);\n border-radius:var(--radius-lg);\n box-shadow:var(--shadow-md);\n overflow:hidden;\n animation:fade-in .35s ease;\n}\n.result.show{ display:block; }\n\n.result-head{\n padding:26px clamp(22px,4vw,34px) 22px;\n background:linear-gradient(135deg,var(--accent-soft),#f8f5fc);\n border-bottom:1px solid #ded3ec;\n}\n.result-head h2{\n margin:0 0 6px;\n font-size:1.28rem;\n font-weight:750;\n color:#4f3a72;\n letter-spacing:-.01em;\n}\n.result-head p{\n margin:0;\n font-size:.92rem;\n color:#6b5590;\n}\n\n.result-body{\n padding:clamp(22px,4vw,32px);\n}\n\n.result-section{\n margin-bottom:26px;\n}\n.result-section:last-child{ margin-bottom:0; }\n\n.result-section h3{\n margin:0 0 12px;\n font-size:.78rem;\n font-weight:700;\n letter-spacing:.08em;\n text-transform:uppercase;\n color:var(--accent);\n}\n\n.result-section p{\n margin:0;\n font-size:.96rem;\n color:var(--ink-soft);\n line-height:1.7;\n}\n.result-section p strong{ color:var(--ink); }\n\n.blockage-card{\n padding:16px 20px;\n background:#f8fbfd;\n border:1px solid var(--line);\n border-left:4px solid var(--accent);\n border-radius:0 12px 12px 0;\n font-size:1rem;\n font-weight:600;\n color:var(--ink);\n line-height:1.55;\n}\n\n.either-or-card{\n padding:16px 20px;\n background:#faf8fd;\n border:1px dashed #d8c9ec;\n border-radius:12px;\n font-size:.95rem;\n font-style:italic;\n color:#5b4a80;\n line-height:1.55;\n}\n\n.path-card{\n display:flex;\n gap:14px;\n align-items:flex-start;\n padding:18px 20px;\n background:linear-gradient(135deg,var(--accent-soft),#f8f5fc);\n border:1px solid #ded3ec;\n border-radius:14px;\n}\n.path-card .icon{\n flex:0 0 auto;\n font-size:1.4rem;\n line-height:1;\n}\n.path-card .label{\n margin:0 0 3px;\n font-size:.78rem;\n font-weight:700;\n letter-spacing:.08em;\n text-transform:uppercase;\n color:var(--accent);\n}\n.path-card .text{\n margin:0;\n font-size:1rem;\n font-weight:600;\n color:var(--ink);\n line-height:1.5;\n}\n.path-card .origin{\n display:block;\n margin-top:6px;\n font-size:.82rem;\n font-style:italic;\n color:var(--ink-soft);\n font-weight:400;\n}\n\n.question-shift{\n display:grid;\n gap:10px;\n}\n.question-shift .shift-item{\n display:flex;\n gap:12px;\n align-items:flex-start;\n padding:14px 18px;\n border-radius:12px;\n font-size:.95rem;\n line-height:1.55;\n}\n.question-shift .shift-item.old{\n background:#f8fbfd;\n border:1px solid var(--line);\n color:#7b8b9b;\n text-decoration:line-through;\n text-decoration-color:rgba(123,139,155,.4);\n}\n.question-shift .shift-item.new{\n background:linear-gradient(135deg,var(--accent-soft),#f8f5fc);\n border:1px solid #ded3ec;\n color:var(--ink);\n font-weight:600;\n}\n.question-shift .shift-item .mark{\n flex:0 0 auto;\n font-size:1.05rem;\n line-height:1.4;\n}\n\n.explored-list{\n list-style:none;\n margin:0;\n padding:0;\n display:grid;\n gap:10px;\n}\n.explored-list li{\n padding:12px 16px;\n background:#f8fbfd;\n border:1px solid var(--line);\n border-radius:12px;\n font-size:.92rem;\n color:var(--ink-soft);\n line-height:1.55;\n}\n.explored-list li .q-label{\n display:block;\n margin-bottom:4px;\n font-size:.76rem;\n font-weight:700;\n letter-spacing:.06em;\n text-transform:uppercase;\n color:var(--accent);\n}\n\n.closing-note{\n margin:24px 0 0;\n padding:16px 20px;\n font-size:.9rem;\n font-style:italic;\n color:var(--ink-soft);\n background:#f8fbfd;\n border-left:4px solid #d8c9ec;\n border-radius:0 12px 12px 0;\n}\n\n\/* ============================================================\n PIED DE PAGE\n ============================================================ *\/\nfooter{\n margin-top:0;\n padding:26px 20px 44px;\n text-align:center;\n font-size:.86rem;\n color:#7b8b9b;\n border-top:1px solid var(--line);\n}\n\n\/* ============================================================\n RESPONSIVE & ACCESSIBILIT\u00c9\n ============================================================ *\/\n\n\/* Tablette : cadre r\u00e9duit avec petite marge *\/\n@media (max-width:900px){\n .jiris-retrouver-voix{\n margin:14px auto;\n border-radius:18px;\n }\n}\n\n\/* Mobile : cadre plein \u00e9cran, sans marge ni coins arrondis *\/\n@media (max-width:520px){\n .jiris-retrouver-voix{\n margin:0;\n border-radius:0;\n max-width:none;\n width:100%;\n box-shadow:none;\n }\n\n .page-head{ padding:16px 0 20px; }\n .step{ padding:22px 18px; }\n .actions{ flex-direction:column-reverse; }\n .actions .btn{ width:100%; }\n .actions .spacer{ display:none; }\n .progress-label{ display:none; }\n .path-option{ padding:16px 16px 16px 50px; }\n .path-option .radio-dot{ left:16px; top:19px; }\n\n main.wrap{ padding-bottom:56px; }\n}\n\n@media (prefers-reduced-motion:reduce){\n *{ transition:none !important; animation:none !important; }\n .btn:hover{ transform:none; }\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"jiris-retrouver-voix\">\n\n \n <header class=\"topbar\">\n <div class=\"wrap\">\n <a href=\"https:\/\/jiris.ca\/explorer-mes-possibilites\/#hub\" class=\"back-link\">\u2190 Retour au hub<\/a>\n <div class=\"page-head\">\n <h1>\ud83d\udeaa Et si une autre voie \u00e9tait possible ?<\/h1>\n <p>\n Aide-toi \u00e0 sortir du \u00ab soit\u2026 soit\u2026 \u00bb et \u00e0 explorer plusieurs possibilit\u00e9s\n quand une situation semble bloqu\u00e9e.\n <\/p>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"progress\">\n <div class=\"wrap\">\n <div class=\"progress-inner\">\n <div class=\"progress-track\" role=\"progressbar\" aria-valuemin=\"1\" aria-valuemax=\"5\" aria-valuenow=\"1\" aria-label=\"Progression dans l'outil\" id=\"progressTrack\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <\/div>\n <span class=\"progress-label\" id=\"progressLabel\">\u00c9tape 1 sur 5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <main class=\"wrap\">\n\n \n <section class=\"step\" id=\"step1\" aria-labelledby=\"step1-title\">\n <h2 id=\"step1-title\">1. D\u00e9crire le blocage<\/h2>\n <p class=\"step-intro\">\n Pose des mots sur la situation \u2014 sans chercher \u00e0 la r\u00e9soudre pour l'instant.\n <\/p>\n\n <div class=\"field\">\n <label for=\"blockageDesc\">Quelle situation te donne l'impression d'\u00eatre coinc\u00e9\u00b7e ou sans issue ?<\/label>\n <textarea id=\"blockageDesc\" placeholder=\"D\u00e9cris bri\u00e8vement la situation\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"hint\" id=\"hint1\" role=\"alert\">\n Prends un instant pour d\u00e9crire la situation \u2014 m\u00eame quelques mots suffisent pour commencer.\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"goToStep(2)\">\n Continuer \u2192\n <\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step hidden\" id=\"step2\" aria-labelledby=\"step2-title\">\n <h2 id=\"step2-title\">2. Rep\u00e9rer le \u00ab soit\u2026 soit\u2026 \u00bb<\/h2>\n <p class=\"step-intro\">\n Souvent, le blocage vient d'une alternative fig\u00e9e : soit A, soit B.\n Mets des mots sur celle qui t'enferme.\n <\/p>\n\n <div class=\"field\">\n <label for=\"eitherOr\">\n Quelle est la fa\u00e7on dont tu pr\u00e9sentes habituellement les choix dans cette situation ?\n <\/label>\n <input type=\"text\" id=\"eitherOr\" placeholder=\"Ex. \u00ab Soit je reste, soit je pars \u00bb \/ \u00ab Soit \u00e7a reste comme \u00e7a, soit\u2026 \u00bb\">\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(1)\">\u2190 Retour<\/button>\n <div class=\"spacer\"><\/div>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"goToStep(3)\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step hidden\" id=\"step3\" aria-labelledby=\"step3-title\">\n <h2 id=\"step3-title\">3. \u00c9largir le champ des possibles<\/h2>\n <p class=\"step-intro\">\n Cinq questions pour ouvrir des pistes \u2014 r\u00e9ponds bri\u00e8vement, sans chercher la perfection.\n <\/p>\n\n <div class=\"open-question\">\n <div class=\"q-head\">\n <span class=\"q-num\">1<\/span>\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 <\/div>\n <div class=\"field\">\n <textarea id=\"q1\" placeholder=\"Ex. Tester, observer, recueillir des infos\u2026\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"open-question\">\n <div class=\"q-head\">\n <span class=\"q-num\">2<\/span>\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 <\/div>\n <div class=\"field\">\n <textarea id=\"q2\" placeholder=\"Ex. Un compromis, une troisi\u00e8me option, un d\u00e9tour\u2026\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"open-question\">\n <div class=\"q-head\">\n <span class=\"q-num\">3<\/span>\n <p class=\"q-text\">Et si tu avais 10 % de libert\u00e9 en plus dans cette situation, qu'en ferais-tu ?<\/p>\n <\/div>\n <div class=\"field\">\n <textarea id=\"q3\" placeholder=\"Ex. J'essaierais\u2026, je parlerais de\u2026, je changerais\u2026\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"open-question\">\n <div class=\"q-head\">\n <span class=\"q-num\">4<\/span>\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 ? Qu'a-t-il\/elle fait ?<\/p>\n <\/div>\n <div class=\"field\">\n <textarea id=\"q4\" placeholder=\"Ex. Une personne, un exemple, une histoire\u2026\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"open-question\">\n <div class=\"q-head\">\n <span class=\"q-num\">5<\/span>\n <p class=\"q-text\">Quelle serait une option \u00ab suffisamment bonne \u00bb plut\u00f4t que parfaite ?<\/p>\n <\/div>\n <div class=\"field\">\n <textarea id=\"q5\" placeholder=\"Ex. Une option r\u00e9aliste, imparfaite mais qui avance\u2026\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(2)\">\u2190 Retour<\/button>\n <div class=\"spacer\"><\/div>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"goToStep(4)\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step hidden\" id=\"step4\" aria-labelledby=\"step4-title\">\n <h2 id=\"step4-title\">4. S\u00e9lectionner une piste<\/h2>\n <p class=\"step-intro\">\n Voici toutes les pistes que tu viens d'ouvrir. Laquelle te semble la plus\n int\u00e9ressante \u00e0 explorer \u2014 m\u00eame si ce n'est pas \u00ab la solution \u00bb ?\n <\/p>\n\n <div class=\"paths-list\" id=\"pathsList\" role=\"radiogroup\" aria-label=\"Pistes explor\u00e9es\"><\/div>\n\n <div class=\"hint hint--info\" id=\"pathsEmpty\" style=\"display:none;\">\n Tu n'as pas encore rempli de piste \u00e0 l'\u00e9tape pr\u00e9c\u00e9dente.\n <br><a href=\"#\" onclick=\"goToStep(3);return false;\" style=\"color:var(--accent);font-weight:600;\">\u2190 Revenir \u00e0 l'\u00e9tape 3<\/a>\n <\/div>\n\n <div class=\"field\" id=\"otherPathField\" style=\"display:none;\">\n <label for=\"otherPath\">D\u00e9cris ta piste<\/label>\n <textarea id=\"otherPath\" placeholder=\"Ex. Commencer par en parler \u00e0 une personne qui a v\u00e9cu quelque chose de similaire\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"hint\" id=\"hint4\" role=\"alert\">\n Choisis une piste pour continuer.\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(3)\">\u2190 Retour<\/button>\n <div class=\"spacer\"><\/div>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"goToStep(5)\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step hidden\" id=\"step5\" aria-labelledby=\"step5-title\">\n <h2 id=\"step5-title\">5. Transformer l'obstacle en question<\/h2>\n <p class=\"step-intro\">\n Un obstacle formul\u00e9 en \u00ab pourquoi \u00bb enferme. Une question ouverte en \u00ab quoi \u00bb ou \u00ab comment \u00bb ouvre.\n <\/p>\n\n <div class=\"field\">\n <label for=\"oldQuestion\">\n Obstacle initial <span class=\"opt\">(ex. \u00ab Pourquoi cela m'arrive ? \u00bb \/ \u00ab Pourquoi je suis coinc\u00e9\u00b7e ? \u00bb)<\/span>\n <\/label>\n <input type=\"text\" id=\"oldQuestion\" placeholder=\"Ex. Pourquoi je n'arrive pas \u00e0 avancer ?\">\n <\/div>\n\n <div class=\"field\">\n <label for=\"newQuestion\">\n Nouvelle question <span class=\"opt\">(ex. \u00ab Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ? \u00bb)<\/span>\n <\/label>\n <input type=\"text\" id=\"newQuestion\" placeholder=\"Ex. Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ?\">\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(4)\">\u2190 Retour<\/button>\n <div class=\"spacer\"><\/div>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"showResult()\">\n Voir mon r\u00e9sultat \u2728\n <\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"result\" id=\"resultBox\" aria-labelledby=\"result-title\">\n <div class=\"result-head\">\n <h2 id=\"result-title\">\ud83d\udeaa Ton r\u00e9sultat<\/h2>\n <p>De nouvelles voies s'ouvrent \u00e0 partir de ta situation.<\/p>\n <\/div>\n\n <div class=\"result-body\">\n\n <div class=\"result-section\" id=\"section-blockage\">\n <h3>Ton point de d\u00e9part<\/h3>\n <div class=\"blockage-card\" id=\"resultBlockage\"><\/div>\n <\/div>\n\n <div class=\"result-section\" id=\"section-eitheror\">\n <h3>Le \u00ab soit\u2026 soit\u2026 \u00bb que tu as rep\u00e9r\u00e9<\/h3>\n <div class=\"either-or-card\" id=\"resultEitherOr\"><\/div>\n <\/div>\n\n <div class=\"result-section\" id=\"section-explored\">\n <h3>Les pistes que tu as ouvertes<\/h3>\n <ul class=\"explored-list\" id=\"resultExplored\"><\/ul>\n <\/div>\n\n <div class=\"result-section\" id=\"section-path\">\n <h3>La piste que tu souhaites explorer<\/h3>\n <div class=\"path-card\">\n <span class=\"icon\" aria-hidden=\"true\">\ud83e\udded<\/span>\n <div>\n <p class=\"label\">Ta piste prioritaire<\/p>\n <p class=\"text\" id=\"resultPath\"><\/p>\n <span class=\"origin\" id=\"resultPathOrigin\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"result-section\" id=\"section-question\">\n <h3>Ta question pour avancer<\/h3>\n <div class=\"question-shift\" id=\"resultQuestionShift\"><\/div>\n <\/div>\n\n <p class=\"closing-note\">\n Tu as commenc\u00e9 \u00e0 \u00e9largir le champ des possibles autour de cette situation.\n Au lieu d'un \u00ab soit\u2026 soit\u2026 \u00bb fig\u00e9, plusieurs pistes apparaissent.\n Tu peux revenir sur cet outil quand la situation \u00e9volue.\n <\/p>\n\n <div class=\"actions\" style=\"border-top:none;padding-top:6px;\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"resetTool()\">\u21ba Recommencer<\/button>\n <a href=\"https:\/\/jiris.ca\/explorer-mes-possibilites\/#hub\" class=\"btn btn-primary\">Retour au hub<\/a>\n <\/div>\n\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer>\n <p>Outil JIRIS \u2014 \ud83d\udeaa Et si une autre voie \u00e9tait possible ?<\/p>\n <\/footer>\n\n<\/div>\n\n<script>\n\/* ============================================================\n CONSTANTES\n ============================================================ *\/\nconst STORAGE_KEY = 'jiris_autre_voie_v1';\nconst TOTAL_STEPS = 5;\n\nconst QUESTIONS = [\n { id: 'q1', label: \"Explorer en attendant\" },\n { id: 'q2', label: \"Solution \u00ab ni l'un ni l'autre \u00bb\" },\n { id: 'q3', label: \"10 % de libert\u00e9 en plus\" },\n { id: 'q4', label: \"Exemple inspirant\" },\n { id: 'q5', label: \"Option \u00ab suffisamment bonne \u00bb\" }\n];\n\n\/* ============================================================\n NAVIGATION ENTRE LES \u00c9TAPES\n ============================================================ *\/\nfunction goToStep(n){\n if (n === 2){\n const d = document.getElementById('blockageDesc').value.trim();\n if (!d){\n document.getElementById('hint1').classList.add('show');\n document.getElementById('blockageDesc').focus();\n return;\n }\n document.getElementById('hint1').classList.remove('show');\n }\n\n if (n === 4){\n buildPathsList();\n }\n\n if (n === 5){\n if (!validatePathSelection()){\n return;\n }\n }\n\n document.querySelectorAll('.step').forEach(s => s.classList.add('hidden'));\n const target = document.getElementById('step' + n);\n if (target){\n target.classList.remove('hidden');\n updateProgress(n);\n saveState();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n const title = target.querySelector('h2');\n if (title){\n title.setAttribute('tabindex', '-1');\n title.focus({ preventScroll: true });\n }\n }\n}\n\nfunction updateProgress(n){\n const pct = Math.round((n \/ TOTAL_STEPS) * 100);\n document.getElementById('progressFill').style.width = pct + '%';\n document.getElementById('progressLabel').textContent = `\u00c9tape ${n} sur ${TOTAL_STEPS}`;\n document.getElementById('progressTrack').setAttribute('aria-valuenow', n);\n}\n\n\/* ============================================================\n \u00c9TAPE 4 \u2014 Construction dynamique des pistes\n ============================================================ *\/\nfunction buildPathsList(){\n const container = document.getElementById('pathsList');\n const emptyMsg = document.getElementById('pathsEmpty');\n const otherField = document.getElementById('otherPathField');\n\n const prevRadio = document.querySelector('input[name=\"selectedPath\"]:checked');\n const prevValue = prevRadio ? prevRadio.value : '';\n const prevOther = document.getElementById('otherPath').value;\n\n const available = QUESTIONS\n .map(q => ({\n id: q.id,\n label: q.label,\n value: document.getElementById(q.id).value.trim()\n }))\n .filter(q => q.value);\n\n if (!available.length){\n container.innerHTML = '';\n container.style.display = 'none';\n otherField.style.display = 'none';\n emptyMsg.style.display = 'block';\n return;\n }\n\n container.style.display = '';\n emptyMsg.style.display = 'none';\n\n const cards = available.map(p => `\n <label class=\"path-option\">\n <input type=\"radio\" name=\"selectedPath\" value=\"${escapeHtml(p.value)}\" data-label=\"${escapeHtml(p.label)}\" data-qid=\"${p.id}\">\n <span class=\"radio-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"path-q\">${escapeHtml(p.label)}<\/span>\n <span class=\"path-a\">${escapeHtml(p.value)}<\/span>\n <\/label>\n `).join('');\n\n const otherCard = `\n <label class=\"path-option path-other\">\n <input type=\"radio\" name=\"selectedPath\" value=\"__autre__\" data-label=\"Autre\" data-qid=\"other\">\n <span class=\"radio-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"path-q\">Autre<\/span>\n <span class=\"path-a\">\u00c9crire une nouvelle piste<\/span>\n <\/label>\n `;\n\n container.innerHTML = cards + otherCard;\n\n if (prevValue){\n container.querySelectorAll('input[name=\"selectedPath\"]').forEach(r => {\n if (r.value === prevValue) r.checked = true;\n });\n }\n document.getElementById('otherPath').value = prevOther;\n\n container.querySelectorAll('input[name=\"selectedPath\"]').forEach(r => {\n r.addEventListener('change', toggleOtherField);\n });\n\n toggleOtherField();\n}\n\nfunction toggleOtherField(){\n const selected = document.querySelector('input[name=\"selectedPath\"]:checked');\n const otherField = document.getElementById('otherPathField');\n if (selected && selected.value === '__autre__'){\n otherField.style.display = 'block';\n } else {\n otherField.style.display = 'none';\n }\n}\n\n\/* ============================================================\n VALIDATION DE LA PISTE\n ============================================================ *\/\nfunction validatePathSelection(){\n const selected = document.querySelector('input[name=\"selectedPath\"]:checked');\n const hint = document.getElementById('hint4');\n\n if (!selected){\n hint.textContent = \"Choisis une piste pour continuer.\";\n hint.classList.add('show');\n return false;\n }\n\n if (selected.value === '__autre__'){\n const other = document.getElementById('otherPath').value.trim();\n if (!other){\n hint.textContent = \"D\u00e9cris ta piste dans le champ ci-dessus.\";\n hint.classList.add('show');\n document.getElementById('otherPath').focus();\n return false;\n }\n }\n\n hint.classList.remove('show');\n return true;\n}\n\n\/* ============================================================\n R\u00c9SULTAT\n ============================================================ *\/\nfunction showResult(){\n if (!validatePathSelection()) return;\n\n const blockage = document.getElementById('blockageDesc').value.trim() || 'cette situation';\n const eitherOr = document.getElementById('eitherOr').value.trim();\n\n const explored = QUESTIONS\n .map(q => ({\n label: q.label,\n value: document.getElementById(q.id).value.trim()\n }))\n .filter(q => q.value);\n\n const selected = document.querySelector('input[name=\"selectedPath\"]:checked');\n let chosenPath, pathLabel;\n if (selected.value === '__autre__'){\n chosenPath = document.getElementById('otherPath').value.trim();\n pathLabel = 'Autre';\n } else {\n chosenPath = selected.value;\n pathLabel = selected.dataset.label || '';\n }\n\n const oldQuestion = document.getElementById('oldQuestion').value.trim();\n const newQuestion = document.getElementById('newQuestion').value.trim()\n || \"Qu'est-ce que je peux explorer \u00e0 partir de l\u00e0 ?\";\n\n document.getElementById('resultBlockage').textContent = blockage;\n\n const eoSection = document.getElementById('section-eitheror');\n if (eitherOr){\n eoSection.style.display = '';\n document.getElementById('resultEitherOr').textContent = `\u00ab ${eitherOr} \u00bb`;\n } else {\n eoSection.style.display = 'none';\n }\n\n const exploredSection = document.getElementById('section-explored');\n const exploredList = document.getElementById('resultExplored');\n if (explored.length){\n exploredSection.style.display = '';\n exploredList.innerHTML = explored.map(q =>\n `<li><span class=\"q-label\">${escapeHtml(q.label)}<\/span>${escapeHtml(q.value)}<\/li>`\n ).join('');\n } else {\n exploredSection.style.display = 'none';\n }\n\n document.getElementById('resultPath').textContent = chosenPath;\n const origin = document.getElementById('resultPathOrigin');\n if (pathLabel && pathLabel !== 'Autre'){\n origin.textContent = `Issue de la question : ${pathLabel}`;\n origin.style.display = '';\n } else if (pathLabel === 'Autre'){\n origin.textContent = 'Piste formul\u00e9e librement';\n origin.style.display = '';\n } else {\n origin.style.display = 'none';\n }\n\n const shiftBox = document.getElementById('resultQuestionShift');\n let shiftHtml = '';\n if (oldQuestion){\n shiftHtml += `<div class=\"shift-item old\"><span class=\"mark\" aria-hidden=\"true\">\u2715<\/span><span>${escapeHtml(oldQuestion)}<\/span><\/div>`;\n }\n shiftHtml += `<div class=\"shift-item new\"><span class=\"mark\" aria-hidden=\"true\">\u2192<\/span><span>${escapeHtml(newQuestion)}<\/span><\/div>`;\n shiftBox.innerHTML = shiftHtml;\n\n document.querySelectorAll('.step').forEach(s => s.classList.add('hidden'));\n document.getElementById('resultBox').classList.add('show');\n updateProgress(TOTAL_STEPS);\n saveState();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\n\/* ============================================================\n UTILITAIRES\n ============================================================ *\/\nfunction escapeHtml(str){\n return String(str)\n .replace(\/&\/g, '&')\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/\"\/g, '"')\n .replace(\/'\/g, ''');\n}\n\n\/* ============================================================\n R\u00c9INITIALISATION\n ============================================================ *\/\nfunction resetTool(){\n if (!confirm('Recommencer l\\'outil ? Tes r\u00e9ponses actuelles seront effac\u00e9es.')) return;\n\n ['blockageDesc','eitherOr','q1','q2','q3','q4','q5','otherPath','oldQuestion','newQuestion']\n .forEach(id => { document.getElementById(id).value = ''; });\n\n document.getElementById('pathsList').innerHTML = '';\n document.getElementById('pathsEmpty').style.display = 'none';\n document.getElementById('otherPathField').style.display = 'none';\n\n ['hint1','hint4'].forEach(id => document.getElementById(id).classList.remove('show'));\n document.getElementById('resultBox').classList.remove('show');\n\n try { localStorage.removeItem(STORAGE_KEY); } catch(e){}\n\n goToStep(1);\n}\n\n\/* ============================================================\n SAUVEGARDE LOCALE\n ============================================================ *\/\nfunction saveState(){\n try {\n const selected = document.querySelector('input[name=\"selectedPath\"]:checked');\n const data = {\n blockageDesc: document.getElementById('blockageDesc').value,\n eitherOr: document.getElementById('eitherOr').value,\n q1: document.getElementById('q1').value,\n q2: document.getElementById('q2').value,\n q3: document.getElementById('q3').value,\n q4: document.getElementById('q4').value,\n q5: document.getElementById('q5').value,\n selectedPath: selected ? selected.value : '',\n otherPath: document.getElementById('otherPath').value,\n oldQuestion: document.getElementById('oldQuestion').value,\n newQuestion: document.getElementById('newQuestion').value,\n currentStep: currentStepNumber()\n };\n localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n } catch(e){}\n}\n\nfunction loadState(){\n let raw;\n try { raw = localStorage.getItem(STORAGE_KEY); } catch(e){ return false; }\n if (!raw) return false;\n\n let data;\n try { data = JSON.parse(raw); } catch(e){ return false; }\n if (!data) return false;\n\n ['blockageDesc','eitherOr','q1','q2','q3','q4','q5','otherPath','oldQuestion','newQuestion']\n .forEach(id => {\n if (typeof data[id] === 'string') document.getElementById(id).value = data[id];\n });\n\n if (data.selectedPath){\n window.__jirisPrevPath = data.selectedPath;\n }\n\n return true;\n}\n\nfunction currentStepNumber(){\n for (let i = 1; i <= TOTAL_STEPS; i++){\n const el = document.getElementById('step' + i);\n if (el && !el.classList.contains('hidden')) return i;\n }\n return TOTAL_STEPS;\n}\n\n\/* ============================================================\n INITIALISATION\n ============================================================ *\/\ndocument.addEventListener('DOMContentLoaded', () => {\n const restored = loadState();\n\n if (restored){\n try {\n const data = JSON.parse(localStorage.getItem(STORAGE_KEY));\n if (data && data.currentStep && data.currentStep > 1 && data.currentStep <= TOTAL_STEPS){\n const reprendre = confirm('Tu avais commenc\u00e9 cet outil. Veux-tu reprendre o\u00f9 tu t\\'\u00e9tais arr\u00eat\u00e9\u00b7e ?');\n if (reprendre){\n if (data.currentStep >= 4){\n buildPathsList();\n if (window.__jirisPrevPath){\n document.querySelectorAll('input[name=\"selectedPath\"]').forEach(r => {\n if (r.value === window.__jirisPrevPath) r.checked = true;\n });\n toggleOtherField();\n }\n }\n goToStep(data.currentStep);\n updateProgress(data.currentStep);\n return;\n } else {\n try { localStorage.removeItem(STORAGE_KEY); } catch(e){}\n }\n }\n } catch(e){}\n }\n\n updateProgress(1);\n document.addEventListener('input', saveState);\n document.addEventListener('change', saveState);\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>Et si une autre voie \u00e9tait possible ? Et si une autre voie \u00e9tait possible ? \u00b7 JIRIS \u2190 Retour au hub \ud83d\udeaa Et si une autre voie \u00e9tait possible ? Aide-toi \u00e0 sortir du \u00ab soit\u2026 soit\u2026 \u00bb et \u00e0 explorer plusieurs possibilit\u00e9s quand une situation semble bloqu\u00e9e. \u00c9tape 1 sur 5 1. D\u00e9crire […]<\/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-3953","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3953","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=3953"}],"version-history":[{"count":7,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3953\/revisions"}],"predecessor-version":[{"id":4025,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3953\/revisions\/4025"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=3953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}