Retrouver ma voix \u00b7 JIRIS<\/title>\n<style>\n\/* ============================================================\n DESIGN SYSTEM JIRIS\n ============================================================ *\/\n:root{\n --bg:#eef3f9;\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:#3f9a72;\n --accent-soft:#e9f6f0;\n --accent-ring:rgba(63,154,114,.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 --shadow-frame:0 22px 60px rgba(15,23,42,.13);\n}\n\n*,*::before,*::after{ box-sizing:border-box; }\n\nhtml,body{\n margin:0;\n padding:0;\n min-height:100%;\n}\n\nbody{\n font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n background:#dfe8f1;\n color:#1b2f3d;\n -webkit-font-smoothing:antialiased;\n text-rendering:optimizeLegibility;\n}\n\n\/* ============================================================\n CADRE PRINCIPAL (identique au style de la page services)\n ============================================================ *\/\n.jiris-retrouver-voix{\n width:100%;\n max-width:1100px;\n margin:28px auto;\n min-height:calc(100vh - 56px);\n display:flex;\n flex-direction:column;\n background:var(--bg);\n border-radius:24px;\n overflow:hidden;\n overflow:clip;\n box-shadow:var(--shadow-frame);\n color:var(--ink);\n line-height:1.65;\n font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n -webkit-font-smoothing:antialiased;\n text-rendering:optimizeLegibility;\n}\n\n.wrap{\n width:100%;\n max-width:760px;\n margin:0 auto;\n padding:0 20px;\n}\n\n\/* ============================================================\n EN-T\u00caTE\n ============================================================ *\/\n.topbar{\n background:linear-gradient(180deg,#fbfdff 0%,var(--bg) 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:600px;\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,.94);\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:#e2ebf2;\n border-radius:999px;\n overflow:hidden;\n}\n.progress-fill{\n height:100%;\n width:25%;\n background:linear-gradient(90deg,var(--accent),#5bb894);\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 flex:1;\n padding:32px 0 0;\n}\n\nmain.wrap{\n padding-bottom:72px; \/* espace blanc avant le footer *\/\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.field{ margin-bottom:18px; }\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{ color:#9aacbc; }\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}\nselect{\n appearance:none;\n background-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>\");\n background-repeat:no-repeat;\n background-position:right 14px center;\n padding-right:38px;\n cursor:pointer;\n}\n\n.choices{\n display:grid;\n gap:10px;\n margin-bottom:18px;\n}\n.choice{\n position:relative;\n display:flex;\n align-items:flex-start;\n gap:12px;\n padding:13px 16px;\n background:#fbfdff;\n border:1px solid #d8e3ec;\n border-radius:12px;\n cursor:pointer;\n font-size:.94rem;\n font-weight:500;\n color:var(--ink);\n transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;\n}\n.choice:hover{\n border-color:#c3d9e8;\n background:#f6fafd;\n}\n.choice input{\n position:absolute;\n opacity:0;\n pointer-events:none;\n}\n.choice .box{\n flex:0 0 20px;\n width:20px;\n height:20px;\n margin-top:1px;\n border:2px solid #c3d3e0;\n border-radius:6px;\n background:#fff;\n display:grid;\n place-items:center;\n transition:background .18s ease, border-color .18s ease;\n}\n.choice .box::after{\n content:\"\";\n width:10px;\n height:10px;\n border-radius:3px;\n background:#fff;\n transform:scale(0);\n transition:transform .18s ease;\n}\n.choice input[type=\"radio\"] + .box{ border-radius:50%; }\n.choice input[type=\"radio\"] + .box::after{ border-radius:50%; }\n.choice input:checked + .box{\n background:var(--accent);\n border-color:var(--accent);\n}\n.choice input:checked + .box::after{ transform:scale(1); }\n.choice:has(input:checked){\n border-color:var(--accent);\n background:var(--accent-soft);\n}\n.choice input:focus-visible + .box{\n box-shadow:0 0 0 3px var(--accent-ring);\n}\n\n.thought-block{\n padding:20px;\n margin-bottom:18px;\n background:#f8fbfd;\n border:1px solid var(--line);\n border-radius:14px;\n}\n.thought-block .block-title{\n display:inline-block;\n margin:0 0 14px;\n padding:4px 12px;\n font-size:.78rem;\n font-weight:700;\n letter-spacing:.06em;\n text-transform:uppercase;\n color:var(--accent);\n background:var(--accent-soft);\n border-radius:999px;\n}\n.thought-block .field:last-child{ margin-bottom:0; }\n\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\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\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(63,154,114,.25);\n}\n.btn-primary:hover{\n background:#368a64;\n transform:translateY(-1px);\n box-shadow:0 8px 18px rgba(63,154,114,.3);\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),#f4fbf8);\n border-bottom:1px solid #d5ece1;\n}\n.result-head h2{\n margin:0 0 6px;\n font-size:1.28rem;\n font-weight:750;\n color:#275f47;\n letter-spacing:-.01em;\n}\n.result-head p{\n margin:0;\n font-size:.92rem;\n color:#3e7a60;\n}\n\n.result-body{ padding:clamp(22px,4vw,32px); }\n\n.result-section{ margin-bottom:24px; }\n.result-section:last-child{ margin-bottom:0; }\n\n.result-section h3{\n margin:0 0 10px;\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.chips{\n display:flex;\n flex-wrap:wrap;\n gap:8px;\n margin-top:4px;\n}\n.chip{\n display:inline-block;\n padding:5px 13px;\n font-size:.84rem;\n font-weight:600;\n color:var(--accent);\n background:var(--accent-soft);\n border:1px solid #cfe9dd;\n border-radius:999px;\n}\n\n.thought-list{\n list-style:none;\n margin:0;\n padding:0;\n display:grid;\n gap:10px;\n}\n.thought-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}\n.thought-list li strong{\n color:var(--ink);\n font-weight:600;\n}\n.thought-list .origin-tag{\n display:inline-block;\n margin-left:6px;\n padding:1px 9px;\n font-size:.75rem;\n font-weight:700;\n color:var(--accent);\n background:var(--accent-soft);\n border-radius:999px;\n}\n\n.action-card{\n display:flex;\n gap:14px;\n align-items:flex-start;\n padding:18px 20px;\n background:linear-gradient(135deg,var(--accent-soft),#f6fcf9);\n border:1px solid #cfe9dd;\n border-radius:14px;\n}\n.action-card .icon{\n flex:0 0 auto;\n font-size:1.4rem;\n line-height:1;\n}\n.action-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.action-card .text{\n margin:0;\n font-size:1rem;\n font-weight:600;\n color:var(--ink);\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 #cfe0ec;\n border-radius:0 12px 12px 0;\n}\n\n\/* ============================================================\n PIED DE PAGE\n ============================================================ *\/\nfooter{\n padding:26px 20px 40px;\n text-align:center;\n font-size:.86rem;\n color:#7b8b9b;\n border-top:1px solid var(--line);\n background:linear-gradient(0deg,#fbfdff 0%,var(--bg) 100%);\n}\n\n\/* ============================================================\n RESPONSIVE & ACCESSIBILIT\u00c9\n ============================================================ *\/\n@media (max-width:900px){\n .jiris-retrouver-voix{\n max-width:calc(100% - 24px);\n margin:16px auto;\n min-height:calc(100vh - 32px);\n border-radius:20px;\n }\n}\n\n@media (max-width:520px){\n .jiris-retrouver-voix{\n max-width:100%;\n margin:0;\n min-height:100vh;\n border-radius:0;\n box-shadow:none;\n }\n .page-head{ padding:16px 0 20px; }\n .step{ padding:22px 18px; }\n main.wrap{ padding-bottom:52px; }\n .actions{ flex-direction:column-reverse; }\n .actions .btn{ width:100%; }\n .progress-label{ display:none; }\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>\u2728 Retrouver ma voix<\/h1>\n <p>\n Aide-toi \u00e0 distinguer ce qui vient de toi (d\u00e9sirs, intuitions, valeurs)\n de ce qui vient des autres (attentes, pressions, normes).\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=\"4\" 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 4<\/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. Cartographier les voix<\/h2>\n <p class=\"step-intro\">\n Quand tu penses \u00e0 une d\u00e9cision importante r\u00e9cente, quelles voix entends-tu en toi ?\n <\/p>\n\n <div class=\"choices\" role=\"group\" aria-label=\"Voix que tu entends en toi\">\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"voice\" value=\"Ma voix int\u00e9rieure\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Ma voix int\u00e9rieure <em style=\"font-style:normal;color:#8b9aa9;\">(ce que je ressens vraiment)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"voice\" value=\"La voix des proches\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>La voix des proches <em style=\"font-style:normal;color:#8b9aa9;\">(famille, ami\u00b7e\u00b7s, conjoint\u00b7e)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"voice\" value=\"La voix de la soci\u00e9t\u00e9\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <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>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"voice\" value=\"La voix de la peur\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>La voix de la peur <em style=\"font-style:normal;color:#8b9aa9;\">(ce qui m'emp\u00eache)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"voice\" value=\"Autre\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Autre<\/span>\n <\/label>\n <\/div>\n\n <div class=\"field\">\n <label for=\"voicesDetail\">\n Pr\u00e9cise bri\u00e8vement chaque voix <span class=\"opt\">(optionnel)<\/span>\n <\/label>\n <textarea id=\"voicesDetail\" placeholder=\"Ex. \u00ab La voix des proches : mes parents aimeraient que je\u2026 \u00bb\"><\/textarea>\n <\/div>\n\n <div class=\"hint\" id=\"hint1\" role=\"alert\">\n Prends un instant pour cocher au moins une voix \u2014 m\u00eame une seule suffit 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. Identifier l'origine de chaque pens\u00e9e<\/h2>\n <p class=\"step-intro\">\n Pour 3 pens\u00e9es ou croyances r\u00e9centes (ex. \u00ab Je devrais\u2026 \u00bb, \u00ab Il faut que\u2026 \u00bb, \u00ab J'aimerais\u2026 \u00bb),\n pr\u00e9cise d'o\u00f9 elles viennent.\n <\/p>\n\n \n <div class=\"thought-block\">\n <span class=\"block-title\">Pens\u00e9e 1<\/span>\n <div class=\"field\">\n <label for=\"thought1\">Ta pens\u00e9e<\/label>\n <input type=\"text\" id=\"thought1\" class=\"thought\" data-n=\"1\" placeholder=\"Ex. Je devrais accepter ce poste\">\n <\/div>\n <div class=\"field\">\n <label for=\"origin1\">Origine principale<\/label>\n <select id=\"origin1\" class=\"origin\" data-n=\"1\">\n <option value=\"\">\u2014 Choisir \u2014<\/option>\n <option>Moi<\/option>\n <option>Les autres<\/option>\n <option>La peur<\/option>\n <option>Un m\u00e9lange<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label for=\"clue1\">Comment je le sais <span class=\"opt\">(indice corporel, \u00e9motion, exp\u00e9rience)<\/span><\/label>\n <input type=\"text\" id=\"clue1\" class=\"originClue\" data-n=\"1\" placeholder=\"Ex. Je sens une tension dans le ventre quand j'y pense\">\n <\/div>\n <\/div>\n\n \n <div class=\"thought-block\">\n <span class=\"block-title\">Pens\u00e9e 2<\/span>\n <div class=\"field\">\n <label for=\"thought2\">Ta pens\u00e9e<\/label>\n <input type=\"text\" id=\"thought2\" class=\"thought\" data-n=\"2\" placeholder=\"Ex. Il faut que je reste prudent\u00b7e\">\n <\/div>\n <div class=\"field\">\n <label for=\"origin2\">Origine principale<\/label>\n <select id=\"origin2\" class=\"origin\" data-n=\"2\">\n <option value=\"\">\u2014 Choisir \u2014<\/option>\n <option>Moi<\/option>\n <option>Les autres<\/option>\n <option>La peur<\/option>\n <option>Un m\u00e9lange<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label for=\"clue2\">Comment je le sais<\/label>\n <input type=\"text\" id=\"clue2\" class=\"originClue\" data-n=\"2\" placeholder=\"Ex. C'est un message que j'entends depuis l'enfance\">\n <\/div>\n <\/div>\n\n \n <div class=\"thought-block\">\n <span class=\"block-title\">Pens\u00e9e 3<\/span>\n <div class=\"field\">\n <label for=\"thought3\">Ta pens\u00e9e<\/label>\n <input type=\"text\" id=\"thought3\" class=\"thought\" data-n=\"3\" placeholder=\"Ex. J'aimerais changer de direction\">\n <\/div>\n <div class=\"field\">\n <label for=\"origin3\">Origine principale<\/label>\n <select id=\"origin3\" class=\"origin\" data-n=\"3\">\n <option value=\"\">\u2014 Choisir \u2014<\/option>\n <option>Moi<\/option>\n <option>Les autres<\/option>\n <option>La peur<\/option>\n <option>Un m\u00e9lange<\/option>\n <\/select>\n <\/div>\n <div class=\"field\">\n <label for=\"clue3\">Comment je le sais<\/label>\n <input type=\"text\" id=\"clue3\" class=\"originClue\" data-n=\"3\" placeholder=\"Ex. Quand j'imagine cette option, je me sens plus l\u00e9g\u00e8re\">\n <\/div>\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(1)\">\u2190 Retour<\/button>\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. Retrouver un signal personnel<\/h2>\n <p class=\"step-intro\">\n Un moment o\u00f9 tu as senti que tu \u00e9coutais vraiment ta propre voix.\n <\/p>\n\n <div class=\"field\">\n <label for=\"momentOwnVoice\">Y a-t-il un moment r\u00e9cent o\u00f9 tu as senti que tu \u00e9coutais vraiment ta propre voix ?<\/label>\n <input type=\"text\" id=\"momentOwnVoice\" placeholder=\"Ex. La semaine derni\u00e8re, quand j'ai dit non \u00e0\u2026\">\n <\/div>\n\n <div class=\"field\">\n <label for=\"whatDoing\">Que faisais-tu ?<\/label>\n <input type=\"text\" id=\"whatDoing\" placeholder=\"Ex. J'\u00e9tais en train de\u2026\">\n <\/div>\n\n <div class=\"field\">\n <label for=\"bodyFeeling\">Comment ton corps se sentait-il ?<\/label>\n <input type=\"text\" id=\"bodyFeeling\" placeholder=\"Ex. Plus calme, plus ancr\u00e9, plus l\u00e9ger\u2026\">\n <\/div>\n\n <div class=\"field\">\n <label for=\"differenceOthers\">Qu'est-ce qui \u00e9tait diff\u00e9rent par rapport aux moments o\u00f9 tu \u00e9coutes surtout les autres ?<\/label>\n <textarea id=\"differenceOthers\" placeholder=\"Ex. Moins de pression, plus de clart\u00e9, moins de culpabilit\u00e9\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(2)\">\u2190 Retour<\/button>\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. Petit engagement<\/h2>\n <p class=\"step-intro\">\n Quelle petite action, cette semaine, pourrait t'aider \u00e0 \u00e9couter un peu plus ta propre voix ?\n <\/p>\n\n <div class=\"choices\" role=\"radiogroup\" aria-label=\"Petite action pour cette semaine\">\n <label class=\"choice\">\n <input type=\"radio\" name=\"action\" value=\"\u00c9crire 5 min sans filtre\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>\u00c9crire 5 min sans filtre<\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"radio\" name=\"action\" value=\"Dire non \u00e0 une demande\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Dire non \u00e0 une demande<\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"radio\" name=\"action\" value=\"Dire oui \u00e0 une envie discr\u00e8te\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Dire oui \u00e0 une envie discr\u00e8te<\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"radio\" name=\"action\" value=\"autre\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Autre <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span>\n <\/label>\n <\/div>\n\n <div class=\"field\">\n <label for=\"actionOther\">Pr\u00e9cise ton action si \u00ab Autre \u00bb<\/label>\n <input type=\"text\" id=\"actionOther\" placeholder=\"Ex. Prendre 10 min pour marcher sans t\u00e9l\u00e9phone\">\n <\/div>\n\n <div class=\"hint\" id=\"hint4\" role=\"alert\">\n Choisis une action \u2014 m\u00eame toute petite. C'est elle qui fera la diff\u00e9rence cette semaine.\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(3)\">\u2190 Retour<\/button>\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\">\ud83c\udf31 Ton r\u00e9sultat<\/h2>\n <p>Un instantan\u00e9 de ce que tu viens de traverser.<\/p>\n <\/div>\n\n <div class=\"result-body\">\n\n <div class=\"result-section\" id=\"section-voices\">\n <h3>Les voix que tu as rep\u00e9r\u00e9es<\/h3>\n <div class=\"chips\" id=\"resultVoices\"><\/div>\n <p id=\"resultVoicesDetail\" style=\"margin-top:10px;\"><\/p>\n <\/div>\n\n <div class=\"result-section\" id=\"section-thoughts\">\n <h3>Tes pens\u00e9es et leur origine<\/h3>\n <ul class=\"thought-list\" id=\"resultThoughts\"><\/ul>\n <\/div>\n\n <div class=\"result-section\" id=\"section-signal\">\n <h3>Ton signal personnel<\/h3>\n <p id=\"resultSignal\"><\/p>\n <\/div>\n\n <div class=\"result-section\">\n <h3>Ton petit pas pour cette semaine<\/h3>\n <div class=\"action-card\">\n <span class=\"icon\" aria-hidden=\"true\">\u2728<\/span>\n <div>\n <p class=\"label\">Ton engagement<\/p>\n <p class=\"text\" id=\"resultAction\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <p class=\"closing-note\">\n Tu peux revenir sur cet outil quand tu sens que les voix des autres prennent trop de place.\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 \u2728 Retrouver ma voix<\/p>\n <\/footer>\n\n<\/div>\n\n<script>\n\/* ============================================================\n NAVIGATION ENTRE LES \u00c9TAPES\n ============================================================ *\/\nconst STORAGE_KEY = 'jiris_retrouver_ma_voix_v1';\nconst TOTAL_STEPS = 4;\n\nfunction goToStep(n){\n if (n === 2){\n const anyVoice = document.querySelector('.voice:checked');\n const detail = document.getElementById('voicesDetail').value.trim();\n if (!anyVoice && !detail){\n document.getElementById('hint1').classList.add('show');\n return;\n }\n document.getElementById('hint1').classList.remove('show');\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 const track = document.getElementById('progressTrack');\n track.setAttribute('aria-valuenow', n);\n}\n\n\/* ============================================================\n R\u00c9SULTAT\n ============================================================ *\/\nfunction showResult(){\n const action = document.querySelector('input[name=\"action\"]:checked');\n if (!action){\n document.getElementById('hint4').classList.add('show');\n return;\n }\n document.getElementById('hint4').classList.remove('show');\n\n const voices = Array.from(document.querySelectorAll('.voice:checked')).map(c => c.value);\n const voicesDetail = document.getElementById('voicesDetail').value.trim();\n\n const thoughts = [];\n for (let i = 1; i <= 3; i++){\n const t = document.querySelector(`.thought[data-n=\"${i}\"]`).value.trim();\n const o = document.querySelector(`.origin[data-n=\"${i}\"]`).value;\n const c = document.querySelector(`.originClue[data-n=\"${i}\"]`).value.trim();\n if (t) thoughts.push({ t, o, c });\n }\n\n const moment = document.getElementById('momentOwnVoice').value.trim();\n const doing = document.getElementById('whatDoing').value.trim();\n const body = document.getElementById('bodyFeeling').value.trim();\n const diff = document.getElementById('differenceOthers').value.trim();\n\n let actionText = action.value;\n if (action.value === 'autre'){\n const other = document.getElementById('actionOther').value.trim();\n actionText = other || 'une action personnelle';\n }\n\n const voicesSection = document.getElementById('section-voices');\n const chipsBox = document.getElementById('resultVoices');\n const detailP = document.getElementById('resultVoicesDetail');\n if (voices.length){\n voicesSection.style.display = '';\n chipsBox.innerHTML = voices.map(v => `<span class=\"chip\">${escapeHtml(v)}<\/span>`).join('');\n detailP.textContent = voicesDetail || '';\n detailP.style.display = voicesDetail ? '' : 'none';\n } else {\n voicesSection.style.display = 'none';\n }\n\n const thoughtsSection = document.getElementById('section-thoughts');\n const thoughtsList = document.getElementById('resultThoughts');\n if (thoughts.length){\n thoughtsSection.style.display = '';\n thoughtsList.innerHTML = thoughts.map(({t, o, c}) => {\n const originTag = o ? `<span class=\"origin-tag\">${escapeHtml(o)}<\/span>` : '';\n const clue = c ? `<br><span style=\"font-size:.85rem;color:#8b9aa9;\">Indice : ${escapeHtml(c)}<\/span>` : '';\n return `<li><strong>${escapeHtml(t)}<\/strong>${originTag}${clue}<\/li>`;\n }).join('');\n } else {\n thoughtsSection.style.display = 'none';\n }\n\n const signalSection = document.getElementById('section-signal');\n const signalP = document.getElementById('resultSignal');\n const signalBits = [];\n if (moment) signalBits.push(`Tu as rep\u00e9r\u00e9 un moment : <strong>${escapeHtml(moment)}<\/strong>.`);\n if (doing) signalBits.push(`Ce que tu faisais : ${escapeHtml(doing)}.`);\n if (body) signalBits.push(`Ton corps se sentait ${escapeHtml(body).toLowerCase()}.`);\n if (diff) signalBits.push(`Ce qui \u00e9tait diff\u00e9rent : ${escapeHtml(diff)}.`);\n if (signalBits.length){\n signalSection.style.display = '';\n signalP.innerHTML = signalBits.join(' ');\n } else {\n signalSection.style.display = 'none';\n }\n\n document.getElementById('resultAction').textContent = actionText;\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\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 document.querySelectorAll('.voice').forEach(c => c.checked = false);\n document.getElementById('voicesDetail').value = '';\n for (let i = 1; i <= 3; i++){\n document.querySelector(`.thought[data-n=\"${i}\"]`).value = '';\n document.querySelector(`.origin[data-n=\"${i}\"]`).value = '';\n document.querySelector(`.originClue[data-n=\"${i}\"]`).value = '';\n }\n ['momentOwnVoice','whatDoing','bodyFeeling','differenceOthers','actionOther'].forEach(id => {\n document.getElementById(id).value = '';\n });\n document.querySelectorAll('input[name=\"action\"]').forEach(r => r.checked = false);\n document.getElementById('hint1').classList.remove('show');\n document.getElementById('hint4').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 data = {\n voices: Array.from(document.querySelectorAll('.voice:checked')).map(c => c.value),\n voicesDetail: document.getElementById('voicesDetail').value,\n thoughts: [1,2,3].map(i => ({\n t: document.querySelector(`.thought[data-n=\"${i}\"]`).value,\n o: document.querySelector(`.origin[data-n=\"${i}\"]`).value,\n c: document.querySelector(`.originClue[data-n=\"${i}\"]`).value\n })),\n momentOwnVoice: document.getElementById('momentOwnVoice').value,\n whatDoing: document.getElementById('whatDoing').value,\n bodyFeeling: document.getElementById('bodyFeeling').value,\n differenceOthers: document.getElementById('differenceOthers').value,\n action: (document.querySelector('input[name=\"action\"]:checked') || {}).value || '',\n actionOther: document.getElementById('actionOther').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 if (Array.isArray(data.voices)){\n document.querySelectorAll('.voice').forEach(c => {\n c.checked = data.voices.includes(c.value);\n });\n }\n if (typeof data.voicesDetail === 'string')\n document.getElementById('voicesDetail').value = data.voicesDetail;\n\n if (Array.isArray(data.thoughts)){\n data.thoughts.forEach((th, idx) => {\n const i = idx + 1;\n if (i > 3) return;\n const tEl = document.querySelector(`.thought[data-n=\"${i}\"]`);\n const oEl = document.querySelector(`.origin[data-n=\"${i}\"]`);\n const cEl = document.querySelector(`.originClue[data-n=\"${i}\"]`);\n if (tEl && typeof th.t === 'string') tEl.value = th.t;\n if (oEl && typeof th.o === 'string') oEl.value = th.o;\n if (cEl && typeof th.c === 'string') cEl.value = th.c;\n });\n }\n\n ['momentOwnVoice','whatDoing','bodyFeeling','differenceOthers','actionOther'].forEach(id => {\n if (typeof data[id] === 'string') document.getElementById(id).value = data[id];\n });\n\n if (data.action){\n const r = document.querySelector(`input[name=\"action\"][value=\"${CSS.escape(data.action)}\"]`);\n if (r) r.checked = true;\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 && localStorage.getItem(STORAGE_KEY)){\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 goToStep(data.currentStep);\n return;\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>Retrouver ma voix Retrouver ma voix \u00b7 JIRIS \u2190 Retour au hub \u2728 Retrouver ma voix Aide-toi \u00e0 distinguer ce qui vient de toi (d\u00e9sirs, intuitions, valeurs) de ce qui vient des autres (attentes, pressions, normes). \u00c9tape 1 sur 4 1. Cartographier les voix Quand tu penses \u00e0 une d\u00e9cision importante r\u00e9cente, quelles voix entends-tu […]<\/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-3937","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3937","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=3937"}],"version-history":[{"count":19,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3937\/revisions"}],"predecessor-version":[{"id":4016,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3937\/revisions\/4016"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=3937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}