Mes forces et mes ressources \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:#c8901f; \/* ambre de l'outil \u00ab Mes forces et mes ressources \u00bb *\/\n --accent-dark:#a87716;\n --accent-soft:#fdf3e2;\n --accent-ring:rgba(200,144,31,.32);\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:640px;\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:14%;\n background:linear-gradient(90deg,var(--accent),#e0b04a);\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:96px;\n resize:vertical;\n line-height:1.55;\n}\n\n\/* --- Cases \u00e0 cocher personnalis\u00e9es --- *\/\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:#e6c98b;\n background:#fdf8ee;\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:checked + .box{\n background:var(--accent);\n border-color:var(--accent);\n}\n.choice input:checked + .box::after{\n transform:scale(1);\n}\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\/* --- 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\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(200,144,31,.28);\n}\n.btn-primary:hover{\n background:var(--accent-dark);\n transform:translateY(-1px);\n box-shadow:0 8px 18px rgba(200,144,31,.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),#fefaf2);\n border-bottom:1px solid #f0dcb4;\n}\n.result-head h2{\n margin:0 0 6px;\n font-size:1.28rem;\n font-weight:750;\n color:#7a5810;\n letter-spacing:-.01em;\n}\n.result-head p{\n margin:0;\n font-size:.92rem;\n color:#8a6b1e;\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-dark);\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-dark);\n background:var(--accent-soft);\n border:1px solid #f0dcb4;\n border-radius:999px;\n}\n\n.quote-card{\n padding:18px 22px;\n background:#fdf9f0;\n border:1px solid #f0dcb4;\n border-left:4px solid var(--accent);\n border-radius:0 12px 12px 0;\n font-size:.96rem;\n color:var(--ink);\n line-height:1.6;\n white-space:pre-line;\n}\n\n.phare-card{\n padding:24px 26px;\n background:linear-gradient(135deg,var(--accent-soft),#fefaf2);\n border:1px solid #f0dcb4;\n border-radius:16px;\n text-align:center;\n}\n.phare-card .mark{\n display:block;\n margin-bottom:10px;\n font-size:1.5rem;\n line-height:1;\n color:var(--accent);\n}\n.phare-card .phare-text{\n margin:0;\n font-size:1.08rem;\n font-weight:650;\n color:var(--ink);\n font-style:italic;\n line-height:1.55;\n}\n\n.mobilize-card{\n display:flex;\n gap:14px;\n align-items:flex-start;\n padding:18px 20px;\n background:linear-gradient(135deg,var(--accent-soft),#fefaf2);\n border:1px solid #f0dcb4;\n border-radius:14px;\n}\n.mobilize-card .icon{\n flex:0 0 auto;\n font-size:1.4rem;\n line-height:1;\n}\n.mobilize-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-dark);\n}\n.mobilize-card .text{\n margin:0;\n font-size:1rem;\n font-weight:600;\n color:var(--ink);\n line-height:1.55;\n white-space:pre-line;\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:#fdf9f0;\n border-left:4px solid #f0dcb4;\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\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\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:\/\/caadi.ca\/explorer-mes-possibilites\/#hub\" class=\"back-link\">\u2190 Retour au hub<\/a>\n <div class=\"page-head\">\n <h1>\ud83c\udf1f Mes forces et mes ressources<\/h1>\n <p>\n Identifie ce sur quoi tu peux d\u00e9j\u00e0 t'appuyer pour avancer : ce que tu portes\n en toi, ce que tu as appris, les personnes et ressources autour de toi.\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=\"7\" 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 7<\/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. Ce que je porte d\u00e9j\u00e0 en moi<\/h2>\n <p class=\"step-intro\">\n Au-del\u00e0 des \u00ab qualit\u00e9s \u00bb, qu'est-ce qui fait partie de toi et pourrait t'aider \u00e0 avancer ?\n <\/p>\n\n <div class=\"choices\" role=\"group\" aria-label=\"Ce que tu portes en toi\">\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"inner\" value=\"Mes valeurs\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Mes valeurs <em style=\"font-style:normal;color:#8b9aa9;\">(ce qui compte vraiment pour moi)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"inner\" value=\"Mes fa\u00e7ons de faire\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Mes fa\u00e7ons de faire <em style=\"font-style:normal;color:#8b9aa9;\">(ma mani\u00e8re d'aborder les choses)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"inner\" value=\"Des apprentissages pass\u00e9s\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Des apprentissages pass\u00e9s <em style=\"font-style:normal;color:#8b9aa9;\">(m\u00eame petits)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"inner\" value=\"De petites victoires\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>De petites victoires <em style=\"font-style:normal;color:#8b9aa9;\">(des moments o\u00f9 \u00e7a a march\u00e9)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"inner\" value=\"Des qualit\u00e9s que je me reconnais\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Des qualit\u00e9s que je me reconnais<\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"inner\" 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=\"innerOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n <input type=\"text\" id=\"innerOther\" placeholder=\"Ex. Ma capacit\u00e9 \u00e0 demander de l'aide\u2026\">\n <\/div>\n\n <div class=\"hint\" id=\"hint1\" role=\"alert\">\n Prends un instant pour cocher au moins une force ou ressource int\u00e9rieure \u2014 m\u00eame une seule suffit.\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. Ce que j'ai appris de mes exp\u00e9riences<\/h2>\n <p class=\"step-intro\">\n M\u00eame les p\u00e9riodes difficiles ont pu t'apprendre quelque chose.\n <\/p>\n\n <div class=\"field\">\n <label for=\"learnings\">\n Qu'as-tu d\u00e9couvert sur toi ou sur la vie \u00e0 travers ce que tu as v\u00e9cu ?\n <\/label>\n <textarea id=\"learnings\" placeholder=\"Ex. \u00ab J'ai appris que je pouvais tenir bon m\u00eame quand c'\u00e9tait dur \u00bb, \u00ab J'ai compris que j'avais besoin de\u2026 \u00bb, \u00ab Je sais maintenant que\u2026 \u00bb\"><\/textarea>\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. Les personnes sur lesquelles je peux m'appuyer<\/h2>\n <p class=\"step-intro\">\n Qui, autour de toi, pourrait \u00eatre une ressource \u2014 m\u00eame de loin, m\u00eame occasionnellement ?\n <\/p>\n\n <div class=\"choices\" role=\"group\" aria-label=\"Personnes ressources\">\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"people\" value=\"Famille\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Famille<\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"people\" value=\"Ami\u00b7e\u00b7s\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Ami\u00b7e\u00b7s<\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"people\" value=\"Coll\u00e8gues \/ camarades\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Coll\u00e8gues \/ camarades<\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"people\" value=\"Professionnel\u00b7le\u00b7s\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Professionnel\u00b7le\u00b7s <em style=\"font-style:normal;color:#8b9aa9;\">(th\u00e9rapeute, m\u00e9decin, coach\u2026)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"people\" value=\"Groupes \/ communaut\u00e9s\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Groupes \/ communaut\u00e9s <em style=\"font-style:normal;color:#8b9aa9;\">(en ligne, locaux\u2026)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"people\" value=\"Une personne en particulier\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Une personne en particulier <em style=\"font-style:normal;color:#8b9aa9;\">(pr\u00e9cise ci-dessous)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"people\" value=\"Je ne pense \u00e0 personne pour l'instant\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Je ne pense \u00e0 personne pour l'instant<\/span>\n <\/label>\n <\/div>\n\n <div class=\"field\">\n <label for=\"peopleDetail\">\n Pr\u00e9cise si tu le souhaites <span class=\"opt\">(noms, r\u00f4les, types de soutien\u2026)<\/span>\n <\/label>\n <input type=\"text\" id=\"peopleDetail\" placeholder=\"Ex. Ma s\u0153ur, qui sait \u00e9couter sans juger\u2026\">\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. Les ressources dans mon environnement<\/h2>\n <p class=\"step-intro\">\n Qu'est-ce qui, autour de toi, pourrait t'aider \u2014 lieux, outils, temps, informations, espaces\u2026 ?\n <\/p>\n\n <div class=\"choices\" role=\"group\" aria-label=\"Ressources dans ton environnement\">\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"env\" value=\"Lieux\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Lieux <em style=\"font-style:normal;color:#8b9aa9;\">(biblioth\u00e8que, parc, espace calme, association\u2026)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"env\" value=\"Outils\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Outils <em style=\"font-style:normal;color:#8b9aa9;\">(livres, sites, applications, m\u00e9thodes, contenus\u2026)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"env\" value=\"Temps disponible\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Temps disponible <em style=\"font-style:normal;color:#8b9aa9;\">(m\u00eame un peu)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"env\" value=\"Informations\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Informations <em style=\"font-style:normal;color:#8b9aa9;\">(ce que tu as d\u00e9j\u00e0 appris, lu, entendu)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"env\" value=\"Espace physique\">\n <span class=\"box\" aria-hidden=\"true\"><\/span>\n <span>Espace physique <em style=\"font-style:normal;color:#8b9aa9;\">(chez toi, un coin \u00e0 toi, un endroit o\u00f9 respirer)<\/em><\/span>\n <\/label>\n <label class=\"choice\">\n <input type=\"checkbox\" class=\"env\" 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=\"envOther\">Pr\u00e9cise si \u00ab Autre \u00bb<\/label>\n <input type=\"text\" id=\"envOther\" placeholder=\"Ex. Une association pr\u00e8s de chez moi\u2026\">\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. Ce qui m'a d\u00e9j\u00e0 aid\u00e9\u00b7e, m\u00eame modestement<\/h2>\n <p class=\"step-intro\">\n Les petites choses comptent aussi \u2014 parfois plus qu'on ne le croit.\n <\/p>\n\n <div class=\"field\">\n <label for=\"smallHelp\">\n Qu'est-ce qui t'a d\u00e9j\u00e0 apport\u00e9 un peu de soulagement, de clart\u00e9 ou de soutien,\n m\u00eame de fa\u00e7on petite ou temporaire ?\n <\/label>\n <textarea id=\"smallHelp\" placeholder=\"Ex. \u00ab \u00c9crire ce que je ressens \u00bb, \u00ab Marcher 10 minutes \u00bb, \u00ab En parler \u00e0 X \u00bb, \u00ab Lire tel article \u00bb, \u00ab Faire une pause \u00bb\u2026\"><\/textarea>\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=\"goToStep(6)\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step hidden\" id=\"step6\" aria-labelledby=\"step6-title\">\n <h2 id=\"step6-title\">6. Ce que je pourrais mobiliser maintenant<\/h2>\n <p class=\"step-intro\">\n Parmi tout ce que tu as identifi\u00e9, qu'est-ce qui est accessible cette semaine ?\n <\/p>\n\n <div class=\"field\">\n <label for=\"toMobilize\">\n Qu'est-ce qui pourrait t'aider \u00e0 avancer, m\u00eame un tout petit peu, dans les 7 prochains jours ?\n <\/label>\n <textarea id=\"toMobilize\" placeholder=\"Ex. \u00ab Reprendre contact avec\u2026 \u00bb, \u00ab Utiliser tel outil\u2026 \u00bb, \u00ab Retourner dans tel lieu\u2026 \u00bb, \u00ab Me rappeler que\u2026 \u00bb\"><\/textarea>\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(5)\">\u2190 Retour<\/button>\n <div class=\"spacer\"><\/div>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"goToStep(7)\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step hidden\" id=\"step7\" aria-labelledby=\"step7-title\">\n <h2 id=\"step7-title\">7. Phrase-ressource<\/h2>\n <p class=\"step-intro\">\n Cr\u00e9e une phrase courte \u00e0 garder comme appui, du type :<br>\n <em>\u00ab Je peux m'appuyer sur [ressource] pour [intention\/action]. \u00bb<\/em>\n <\/p>\n\n <div class=\"field\">\n <label for=\"resourcePhrase\">Ta phrase-ressource<\/label>\n <textarea id=\"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 <\/div>\n\n <div class=\"hint\" id=\"hint7\" role=\"alert\">\n Prends un instant pour \u00e9crire ta phrase-ressource \u2014 c'est elle qui te servira de rep\u00e8re.\n <\/div>\n\n <div class=\"actions\">\n <button type=\"button\" class=\"btn btn-ghost\" onclick=\"goToStep(6)\">\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\">\ud83c\udf1f Ton r\u00e9sultat<\/h2>\n <p>Ce sur quoi tu peux d\u00e9j\u00e0 t'appuyer pour avancer.<\/p>\n <\/div>\n\n <div class=\"result-body\">\n\n <div class=\"result-section\" id=\"section-inner\">\n <h3>Ce que tu portes en toi<\/h3>\n <div class=\"chips\" id=\"resultInner\"><\/div>\n <\/div>\n\n <div class=\"result-section\" id=\"section-learnings\">\n <h3>Ce que tes exp\u00e9riences t'ont appris<\/h3>\n <div class=\"quote-card\" id=\"resultLearnings\"><\/div>\n <\/div>\n\n <div class=\"result-section\" id=\"section-people\">\n <h3>Les personnes sur qui tu peux t'appuyer<\/h3>\n <div class=\"chips\" id=\"resultPeople\"><\/div>\n <p id=\"resultPeopleDetail\" style=\"margin-top:10px;\"><\/p>\n <\/div>\n\n <div class=\"result-section\" id=\"section-env\">\n <h3>Les ressources dans ton environnement<\/h3>\n <div class=\"chips\" id=\"resultEnv\"><\/div>\n <p id=\"resultEnvOther\" style=\"margin-top:10px;\"><\/p>\n <\/div>\n\n <div class=\"result-section\" id=\"section-smallhelp\">\n <h3>Ce qui t'a d\u00e9j\u00e0 aid\u00e9\u00b7e, m\u00eame modestement<\/h3>\n <div class=\"quote-card\" id=\"resultSmallHelp\"><\/div>\n <\/div>\n\n <div class=\"result-section\" id=\"section-mobilize\">\n <h3>Ce que tu peux mobiliser cette semaine<\/h3>\n <div class=\"mobilize-card\">\n <span class=\"icon\" aria-hidden=\"true\">\u2728<\/span>\n <div>\n <p class=\"label\">Ton appui pour avancer<\/p>\n <p class=\"text\" id=\"resultMobilize\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"result-section\" id=\"section-phrase\">\n <h3>Ta phrase-ressource<\/h3>\n <div class=\"phare-card\">\n <span class=\"mark\" aria-hidden=\"true\">\u275d<\/span>\n <p class=\"phare-text\" id=\"resultPhrase\"><\/p>\n <\/div>\n <\/div>\n\n <p class=\"closing-note\">\n Tu as identifi\u00e9 plusieurs ressources : en toi, dans tes exp\u00e9riences, autour de toi\n et dans ton environnement. Tu n'es pas seul\u00b7e face \u00e0 ce que tu traverses. Tu peux\n relire ta phrase-ressource quand tu doutes de ta capacit\u00e9 \u00e0 avancer.\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:\/\/caadi.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 \ud83c\udf1f Mes forces et mes ressources<\/p>\n <\/footer>\n\n<\/div>\n\n<script>\n\/* ============================================================\n CONSTANTES\n ============================================================ *\/\nconst STORAGE_KEY = 'jiris_forces_ressources_v1';\nconst TOTAL_STEPS = 7;\n\n\/* ============================================================\n NAVIGATION ENTRE LES \u00c9TAPES\n ============================================================ *\/\nfunction goToStep(n){\n if (n === 2){\n const anyInner = document.querySelector('.inner:checked');\n const other = document.getElementById('innerOther').value.trim();\n if (!anyInner && !other){\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 document.getElementById('progressTrack').setAttribute('aria-valuenow', n);\n}\n\n\/* ============================================================\n R\u00c9SULTAT\n ============================================================ *\/\nfunction showResult(){\n const phrase = document.getElementById('resourcePhrase').value.trim();\n if (!phrase){\n document.getElementById('hint7').classList.add('show');\n document.getElementById('resourcePhrase').focus();\n return;\n }\n document.getElementById('hint7').classList.remove('show');\n\n const inners = Array.from(document.querySelectorAll('.inner:checked')).map(c => c.value);\n const innerOther = document.getElementById('innerOther').value.trim();\n const learnings = document.getElementById('learnings').value.trim();\n const peoples = Array.from(document.querySelectorAll('.people:checked')).map(c => c.value);\n const peopleDetail = document.getElementById('peopleDetail').value.trim();\n const envs = Array.from(document.querySelectorAll('.env:checked')).map(c => c.value);\n const envOther = document.getElementById('envOther').value.trim();\n const smallHelp = document.getElementById('smallHelp').value.trim();\n const toMobilize = document.getElementById('toMobilize').value.trim();\n\n \/* --- Ce que tu portes en toi --- *\/\n const innerSection = document.getElementById('section-inner');\n const innerBox = document.getElementById('resultInner');\n const innerList = inners.filter(v => v !== 'Autre');\n const innerChips = [];\n if (innerList.length){\n innerChips.push(...innerList.map(v => `<span class=\"chip\">${escapeHtml(v)}<\/span>`));\n }\n if (innerOther){\n innerChips.push(`<span class=\"chip\">${escapeHtml(innerOther)}<\/span>`);\n }\n if (innerChips.length){\n innerSection.style.display = '';\n innerBox.innerHTML = innerChips.join('');\n } else {\n innerSection.style.display = 'none';\n }\n\n \/* --- Apprentissages --- *\/\n const learningsSection = document.getElementById('section-learnings');\n if (learnings){\n learningsSection.style.display = '';\n document.getElementById('resultLearnings').textContent = learnings;\n } else {\n learningsSection.style.display = 'none';\n }\n\n \/* --- Personnes --- *\/\n const peopleSection = document.getElementById('section-people');\n const peopleBox = document.getElementById('resultPeople');\n const peopleDetailP = document.getElementById('resultPeopleDetail');\n const peopleFiltered = peoples.filter(p => p !== 'Une personne en particulier');\n if (peopleFiltered.length || peopleDetail){\n peopleSection.style.display = '';\n peopleBox.innerHTML = peopleFiltered.map(p => `<span class=\"chip\">${escapeHtml(p)}<\/span>`).join('');\n peopleDetailP.textContent = peopleDetail ? `Pr\u00e9cision : ${peopleDetail}` : '';\n peopleDetailP.style.display = peopleDetail ? '' : 'none';\n } else {\n peopleSection.style.display = 'none';\n }\n\n \/* --- Environnement --- *\/\n const envSection = document.getElementById('section-env');\n const envBox = document.getElementById('resultEnv');\n const envOtherP = document.getElementById('resultEnvOther');\n const envFiltered = envs.filter(v => v !== 'Autre');\n if (envFiltered.length || envOther){\n envSection.style.display = '';\n envBox.innerHTML = envFiltered.map(v => `<span class=\"chip\">${escapeHtml(v)}<\/span>`).join('');\n envOtherP.textContent = envOther ? `Pr\u00e9cision : ${envOther}` : '';\n envOtherP.style.display = envOther ? '' : 'none';\n } else {\n envSection.style.display = 'none';\n }\n\n \/* --- Ce qui a d\u00e9j\u00e0 aid\u00e9 --- *\/\n const smallSection = document.getElementById('section-smallhelp');\n if (smallHelp){\n smallSection.style.display = '';\n document.getElementById('resultSmallHelp').textContent = smallHelp;\n } else {\n smallSection.style.display = 'none';\n }\n\n \/* --- Ce que tu peux mobiliser --- *\/\n const mobilizeSection = document.getElementById('section-mobilize');\n if (toMobilize){\n mobilizeSection.style.display = '';\n document.getElementById('resultMobilize').textContent = toMobilize;\n } else {\n mobilizeSection.style.display = 'none';\n }\n\n \/* --- Phrase-ressource --- *\/\n document.getElementById('resultPhrase').textContent = phrase;\n\n \/* --- Affichage --- *\/\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 document.querySelectorAll('.inner, .people, .env').forEach(cb => cb.checked = false);\n ['innerOther','learnings','peopleDetail','envOther','smallHelp','toMobilize','resourcePhrase']\n .forEach(id => { document.getElementById(id).value = ''; });\n\n ['hint1','hint7'].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 data = {\n inner: Array.from(document.querySelectorAll('.inner:checked')).map(c => c.value),\n innerOther: document.getElementById('innerOther').value,\n learnings: document.getElementById('learnings').value,\n people: Array.from(document.querySelectorAll('.people:checked')).map(c => c.value),\n peopleDetail: document.getElementById('peopleDetail').value,\n env: Array.from(document.querySelectorAll('.env:checked')).map(c => c.value),\n envOther: document.getElementById('envOther').value,\n smallHelp: document.getElementById('smallHelp').value,\n toMobilize: document.getElementById('toMobilize').value,\n resourcePhrase: document.getElementById('resourcePhrase').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.inner)){\n document.querySelectorAll('.inner').forEach(cb => {\n cb.checked = data.inner.includes(cb.value);\n });\n }\n if (Array.isArray(data.people)){\n document.querySelectorAll('.people').forEach(cb => {\n cb.checked = data.people.includes(cb.value);\n });\n }\n if (Array.isArray(data.env)){\n document.querySelectorAll('.env').forEach(cb => {\n cb.checked = data.env.includes(cb.value);\n });\n }\n\n ['innerOther','learnings','peopleDetail','envOther','smallHelp','toMobilize','resourcePhrase']\n .forEach(id => {\n if (typeof data[id] === 'string') document.getElementById(id).value = data[id];\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 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>Mes forces et mes ressources Mes forces et mes ressources \u00b7 JIRIS \u2190 Retour au hub \ud83c\udf1f Mes forces et mes ressources 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. \u00c9tape 1 sur 7 […]<\/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":{"footnotes":""},"class_list":["post-2712","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/pages\/2712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/comments?post=2712"}],"version-history":[{"count":26,"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/pages\/2712\/revisions"}],"predecessor-version":[{"id":4019,"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/pages\/2712\/revisions\/4019"}],"wp:attachment":[{"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/media?parent=2712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}