Mon prochain petit pas | JIRIS<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Work+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg: #F4F2F8;\r\n --surface: #FFFFFF;\r\n --surface-soft: #FAF8FE;\r\n --ink: #2A2438;\r\n --muted: #756E8C;\r\n --divider: #E1DCEC;\r\n --primary: #453876;\r\n --primary-light: #6D5AA0;\r\n --primary-soft: #ECE8F8;\r\n --primary-shadow: rgba(69, 56, 118, 0.14);\r\n --accent: #2F8F5B;\r\n --accent-soft: #E6F5EE;\r\n --accent-shadow: rgba(47, 143, 91, 0.16);\r\n --warm: #D97706;\r\n --warm-soft: #FEF3C7;\r\n --radius: 18px;\r\n --radius-sm: 12px;\r\n --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n html { scroll-behavior: smooth; }\r\n body {\r\n font-family: \"Work Sans\", sans-serif;\r\n background: var(--bg);\r\n color: var(--ink);\r\n line-height: 1.7;\r\n min-height: 100vh;\r\n }\r\n\r\n .wrap {\r\n max-width: 780px;\r\n margin: 0 auto;\r\n padding: 40px 20px 80px;\r\n }\r\n\r\n \/* HERO *\/\r\n .hero { text-align: center; margin-bottom: 36px; }\r\n .hero-frame {\r\n width: 74px; height: 74px; margin: 0 auto 20px;\r\n border-radius: 22px;\r\n background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));\r\n border: 1.5px solid var(--divider);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 34px;\r\n box-shadow: 0 12px 32px var(--primary-shadow);\r\n }\r\n .hero h1 {\r\n font-family: \"Fraunces\", serif;\r\n font-weight: 600;\r\n font-size: clamp(28px, 5.5vw, 40px);\r\n color: var(--primary);\r\n margin-bottom: 10px;\r\n letter-spacing: -0.02em;\r\n }\r\n .hero .subtitle {\r\n font-family: \"Fraunces\", serif;\r\n font-style: italic;\r\n color: var(--muted);\r\n font-size: 17px;\r\n max-width: 560px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* INTRO *\/\r\n .intro-card {\r\n background: var(--surface);\r\n border-radius: var(--radius);\r\n padding: 30px 32px;\r\n margin-bottom: 32px;\r\n box-shadow: 0 10px 30px rgba(42, 36, 56, 0.06);\r\n border: 1px solid var(--divider);\r\n border-left: 5px solid var(--primary);\r\n }\r\n .intro-card h2 {\r\n font-family: \"Fraunces\", serif;\r\n font-weight: 600;\r\n font-size: 20px;\r\n color: var(--primary);\r\n margin-bottom: 14px;\r\n }\r\n .intro-card p {\r\n font-size: 15.5px;\r\n color: var(--ink);\r\n margin-bottom: 12px;\r\n }\r\n .intro-card p:last-child { margin-bottom: 0; }\r\n .intro-note {\r\n margin-top: 18px;\r\n padding: 14px 18px;\r\n background: var(--primary-soft);\r\n border-left: 4px solid var(--primary);\r\n border-radius: 0 10px 10px 0;\r\n font-size: 14px;\r\n color: var(--primary);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* PROGRESS *\/\r\n .progress-wrapper { margin-bottom: 28px; display: none; }\r\n .progress-text {\r\n display: flex; justify-content: space-between;\r\n font-size: 13.5px; font-weight: 600; color: var(--muted);\r\n margin-bottom: 8px;\r\n }\r\n .progress-bar {\r\n width: 100%; height: 8px;\r\n background: var(--primary-soft);\r\n border-radius: 99px; overflow: hidden;\r\n }\r\n .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n border-radius: 99px;\r\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n width: 0%;\r\n }\r\n\r\n \/* STEPS *\/\r\n .step {\r\n display: none;\r\n background: var(--surface);\r\n border-radius: var(--radius);\r\n padding: 34px 32px;\r\n margin-bottom: 24px;\r\n box-shadow: 0 10px 30px rgba(42, 36, 56, 0.06);\r\n border: 1px solid var(--divider);\r\n animation: fadeInUp 0.4s ease;\r\n }\r\n .step.active { display: block; }\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(12px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .step-badge {\r\n display: inline-block;\r\n padding: 5px 14px;\r\n background: var(--primary-soft);\r\n color: var(--primary);\r\n border-radius: 99px;\r\n font-size: 11.5px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.08em;\r\n margin-bottom: 14px;\r\n }\r\n .step-title {\r\n font-family: \"Fraunces\", serif;\r\n font-weight: 600;\r\n font-size: 24px;\r\n color: var(--primary);\r\n margin-bottom: 8px;\r\n line-height: 1.3;\r\n }\r\n .step-hint {\r\n font-size: 14.5px;\r\n color: var(--muted);\r\n margin-bottom: 22px;\r\n font-style: italic;\r\n }\r\n .field-label {\r\n display: block;\r\n font-size: 14.5px;\r\n font-weight: 600;\r\n color: var(--ink);\r\n margin-bottom: 8px;\r\n }\r\n textarea, input[type=\"text\"] {\r\n width: 100%;\r\n border: 1.5px solid var(--divider);\r\n background: var(--surface);\r\n border-radius: 12px;\r\n padding: 14px 16px;\r\n font-family: \"Work Sans\", sans-serif;\r\n font-size: 15px;\r\n color: var(--ink);\r\n transition: all var(--transition);\r\n resize: vertical;\r\n line-height: 1.6;\r\n min-height: 100px;\r\n }\r\n input[type=\"text\"] { min-height: auto; }\r\n textarea:focus, input[type=\"text\"]:focus {\r\n outline: none;\r\n border-color: var(--primary-light);\r\n box-shadow: 0 0 0 4px rgba(69, 56, 118, 0.08);\r\n }\r\n textarea::placeholder, input::placeholder {\r\n color: var(--muted);\r\n opacity: 0.7;\r\n }\r\n .helper-text {\r\n font-size: 13px;\r\n color: var(--muted);\r\n margin-top: 8px;\r\n font-style: italic;\r\n }\r\n\r\n \/* BUTTONS *\/\r\n .btn-group {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n margin-top: 28px;\r\n justify-content: space-between;\r\n }\r\n .btn {\r\n padding: 14px 28px;\r\n border: none;\r\n border-radius: var(--radius-sm);\r\n font-family: \"Work Sans\", sans-serif;\r\n font-weight: 600;\r\n font-size: 15px;\r\n cursor: pointer;\r\n transition: all var(--transition);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n }\r\n .btn-primary {\r\n background: var(--primary);\r\n color: #FFFFFF;\r\n box-shadow: 0 6px 20px var(--primary-shadow);\r\n }\r\n .btn-primary:hover {\r\n background: var(--primary-light);\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 28px var(--primary-shadow);\r\n }\r\n .btn-secondary {\r\n background: var(--surface);\r\n color: var(--ink);\r\n border: 1.5px solid var(--divider);\r\n }\r\n .btn-secondary:hover {\r\n background: var(--primary-soft);\r\n border-color: var(--primary);\r\n color: var(--primary);\r\n }\r\n .btn-accent {\r\n background: var(--accent);\r\n color: #FFFFFF;\r\n box-shadow: 0 6px 20px var(--accent-shadow);\r\n }\r\n .btn-accent:hover {\r\n background: #27794d;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* SUMMARY *\/\r\n .summary-section {\r\n display: none;\r\n background: var(--surface);\r\n border-radius: var(--radius);\r\n padding: 34px 32px;\r\n margin-bottom: 24px;\r\n box-shadow: 0 16px 40px rgba(42, 36, 56, 0.08);\r\n border: 1px solid var(--divider);\r\n border-top: 5px solid var(--accent);\r\n animation: fadeInUp 0.5s ease;\r\n }\r\n .summary-section.active { display: block; }\r\n .summary-hero {\r\n text-align: center;\r\n margin-bottom: 28px;\r\n padding-bottom: 24px;\r\n border-bottom: 1px dashed var(--divider);\r\n }\r\n .summary-hero .summary-emoji { font-size: 44px; margin-bottom: 12px; }\r\n .summary-hero h2 {\r\n font-family: \"Fraunces\", serif;\r\n font-weight: 600;\r\n font-size: 26px;\r\n color: var(--primary);\r\n margin-bottom: 10px;\r\n }\r\n .summary-hero p {\r\n font-size: 15px;\r\n color: var(--muted);\r\n font-style: italic;\r\n max-width: 480px;\r\n margin: 0 auto;\r\n }\r\n .summary-block {\r\n margin-bottom: 22px;\r\n padding-bottom: 22px;\r\n border-bottom: 1px solid var(--divider);\r\n }\r\n .summary-block:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }\r\n .summary-block h3 {\r\n font-family: \"Fraunces\", serif;\r\n font-weight: 600;\r\n font-size: 17px;\r\n color: var(--primary);\r\n margin-bottom: 10px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .summary-block p {\r\n font-size: 15px;\r\n color: var(--ink);\r\n line-height: 1.7;\r\n white-space: pre-wrap;\r\n }\r\n .summary-actions {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n margin-top: 28px;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--divider);\r\n }\r\n\r\n \/* FOOTER *\/\r\n .footer {\r\n text-align: center;\r\n margin-top: 50px;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--divider);\r\n color: var(--muted);\r\n font-size: 13px;\r\n line-height: 1.7;\r\n }\r\n .footer strong { color: var(--primary); }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 600px) {\r\n .wrap { padding: 28px 16px 60px; }\r\n .step, .intro-card, .summary-section { padding: 24px 20px; }\r\n .step-title { font-size: 20px; }\r\n .btn-group { flex-direction: column-reverse; }\r\n .btn-group .btn { width: 100%; }\r\n .summary-actions { flex-direction: column; }\r\n .summary-actions .btn { width: 100%; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after {\r\n transition-duration: 0.01ms !important;\r\n animation-duration: 0.01ms !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n\r\n \r\n <header class=\"hero\">\r\n <div class=\"hero-frame\">\ud83c\udfaf<\/div>\r\n <h1>Mon prochain petit pas<\/h1>\r\n <p class=\"subtitle\">Passer d\u2019une pr\u00e9occupation \u00e0 une action r\u00e9aliste et \u00e0 ma port\u00e9e.<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"intro-card\" id=\"introCard\">\r\n <h2>Avant de commencer<\/h2>\r\n <p>Parfois, on sait qu\u2019il y a quelque chose \u00e0 faire\u2026 mais on ne sait pas par o\u00f9 commencer.<\/p>\r\n <p>Cet outil vous aide \u00e0 transformer une pr\u00e9occupation en un <strong>petit pas concret<\/strong>, r\u00e9aliste, et que vous choisissez vous-m\u00eame.<\/p>\r\n <p>Il ne s\u2019agit pas de tout r\u00e9soudre d\u2019un coup. Juste de trouver le prochain pas possible.<\/p>\r\n <div class=\"intro-note\">\r\n <strong>Rappel :<\/strong> Vous n\u2019avez pas \u00e0 tout \u00e9crire. R\u00e9pondez seulement \u00e0 ce qui vous parle. Vous pouvez aussi revenir plus tard.\r\n <\/div>\r\n <div class=\"btn-group\" style=\"justify-content: center; margin-top: 24px;\">\r\n <button class=\"btn btn-primary\" id=\"startBtn\">Commencer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"progress-wrapper\" id=\"progressWrapper\">\r\n <div class=\"progress-text\">\r\n <span id=\"progressLabel\">\u00c9tape 1 sur 6<\/span>\r\n <span id=\"progressPercent\">17%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step\" id=\"step1\">\r\n <div class=\"step-badge\">\u00c9tape 1 sur 6<\/div>\r\n <h2 class=\"step-title\">Ce qui me pr\u00e9occupe<\/h2>\r\n <p class=\"step-hint\">Qu\u2019est-ce qui occupe mon esprit en ce moment ?<\/p>\r\n <label class=\"field-label\" for=\"preoccupation\">Qu\u2019est-ce qui me pr\u00e9occupe ?<\/label>\r\n <textarea id=\"preoccupation\" placeholder=\"Ex. : une conversation \u00e0 avoir, une d\u00e9marche \u00e0 faire, une situation qui stagne, une d\u00e9cision en suspens\u2026\"><\/textarea>\r\n <p class=\"helper-text\">Pas besoin d\u2019\u00eatre pr\u00e9cis. \u00c9crivez simplement ce qui vous vient.<\/p>\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary\" data-action=\"intro\">\u2190 Retour<\/button>\r\n <button class=\"btn btn-primary\" data-action=\"step\" data-target=\"2\">Continuer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step\" id=\"step2\">\r\n <div class=\"step-badge\">\u00c9tape 2 sur 6<\/div>\r\n <h2 class=\"step-title\">Ce que j\u2019aimerais voir changer<\/h2>\r\n <p class=\"step-hint\">Si cette situation \u00e9voluait un peu, qu\u2019est-ce que j\u2019aimerais voir se passer ?<\/p>\r\n <label class=\"field-label\" for=\"souhait\">Ce que j\u2019aimerais voir se passer<\/label>\r\n <textarea id=\"souhait\" placeholder=\"Ex. : pouvoir en parler calmement, avoir plus de clart\u00e9, me sentir moins seul\u00b7e face \u00e0 \u00e7a\u2026\"><\/textarea>\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary\" data-action=\"step\" data-target=\"1\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n <button class=\"btn btn-primary\" data-action=\"step\" data-target=\"3\">Continuer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step\" id=\"step3\">\r\n <div class=\"step-badge\">\u00c9tape 3 sur 6<\/div>\r\n <h2 class=\"step-title\">Ce qui d\u00e9pend de moi<\/h2>\r\n <p class=\"step-hint\">Parmi tout ce qui se passe, qu\u2019est-ce qui d\u00e9pend r\u00e9ellement de moi ?<\/p>\r\n <label class=\"field-label\" for=\"dependDeMoi\">Ce que je peux faire, dire, pr\u00e9parer ou demander<\/label>\r\n <textarea id=\"dependDeMoi\" placeholder=\"Ex. : pr\u00e9parer ce que je veux dire, chercher une information, demander un rendez-vous, \u00e9crire quelques notes\u2026\"><\/textarea>\r\n <p class=\"helper-text\">Concentrez-vous uniquement sur ce qui est \u00e0 votre port\u00e9e.<\/p>\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary\" data-action=\"step\" data-target=\"2\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n <button class=\"btn btn-primary\" data-action=\"step\" data-target=\"4\">Continuer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step\" id=\"step4\">\r\n <div class=\"step-badge\">\u00c9tape 4 sur 6<\/div>\r\n <h2 class=\"step-title\">Mon prochain petit pas<\/h2>\r\n <p class=\"step-hint\">Quel serait un petit pas que je pourrais faire dans les prochains jours, et qui serait \u00e0 ma port\u00e9e ?<\/p>\r\n <label class=\"field-label\" for=\"petitPas\">Mon prochain petit pas<\/label>\r\n <textarea id=\"petitPas\" placeholder=\"Ex. : \u00e9crire trois points que je veux aborder, chercher le num\u00e9ro d\u2019un organisme, en parler \u00e0 une personne de confiance\u2026\"><\/textarea>\r\n <p class=\"helper-text\">Il n\u2019a pas besoin d\u2019\u00eatre parfait ni de tout r\u00e9soudre. Juste d\u2019\u00eatre possible.<\/p>\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary\" data-action=\"step\" data-target=\"3\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n <button class=\"btn btn-primary\" data-action=\"step\" data-target=\"5\">Continuer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step\" id=\"step5\">\r\n <div class=\"step-badge\">\u00c9tape 5 sur 6<\/div>\r\n <h2 class=\"step-title\">Quand et comment<\/h2>\r\n <p class=\"step-hint\">Rendre ce petit pas encore plus concret.<\/p>\r\n <label class=\"field-label\" for=\"quand\">Quand pourrais-je le faire ?<\/label>\r\n <input type=\"text\" id=\"quand\" placeholder=\"Ex. : demain matin, ce week-end, d\u2019ici la fin de la semaine\u2026\">\r\n <br><br>\r\n <label class=\"field-label\" for=\"besoin\">De quoi aurais-je besoin pour le faire plus facilement ?<\/label>\r\n <textarea id=\"besoin\" placeholder=\"Ex. : un moment calme, une information, le soutien d\u2019une personne, un peu de courage\u2026\" style=\"min-height: 80px;\"><\/textarea>\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary\" data-action=\"step\" data-target=\"4\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n <button class=\"btn btn-primary\" data-action=\"step\" data-target=\"6\">Continuer \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step\" id=\"step6\">\r\n <div class=\"step-badge\">\u00c9tape 6 sur 6<\/div>\r\n <h2 class=\"step-title\">Si c\u2019est difficile<\/h2>\r\n <p class=\"step-hint\">Si ce pas me semble encore trop grand, qu\u2019est-ce que je pourrais faire de encore plus petit ?<\/p>\r\n <label class=\"field-label\" for=\"encorePlusPetit\">Une version encore plus petite (optionnel)<\/label>\r\n <textarea id=\"encorePlusPetit\" placeholder=\"Ex. : juste noter les 3 points sans les envoyer, juste chercher le num\u00e9ro sans appeler\u2026\"><\/textarea>\r\n <p class=\"helper-text\">Cette \u00e9tape est optionnelle. Vous pouvez la laisser vide si votre petit pas vous semble d\u00e9j\u00e0 r\u00e9aliste.<\/p>\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-secondary\" data-action=\"step\" data-target=\"5\">\u2190 Pr\u00e9c\u00e9dent<\/button>\r\n <button class=\"btn btn-accent\" data-action=\"summary\">Voir ma synth\u00e8se \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"summary-section\" id=\"summarySection\">\r\n <div class=\"summary-hero\">\r\n <div class=\"summary-emoji\">\ud83c\udfaf<\/div>\r\n <h2>Ma synth\u00e8se<\/h2>\r\n <p>Un petit pas ne change pas tout.<br>Mais il change quelque chose.<\/p>\r\n <\/div>\r\n <div id=\"summaryContent\"><\/div>\r\n <div class=\"summary-actions\">\r\n <button class=\"btn btn-secondary\" id=\"printBtn\">Imprimer<\/button>\r\n <button class=\"btn btn-secondary\" id=\"downloadBtn\">T\u00e9l\u00e9charger<\/button>\r\n <button class=\"btn btn-primary\" id=\"restartBtn\">Recommencer<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <footer class=\"footer\">\r\n <strong>JIRIS<\/strong> \u2014 Justice \u00b7 Inclusion \u00b7 R\u00e9int\u00e9gration \u00b7 Innovation Sociale<br>\r\n Cet outil est un espace de r\u00e9flexion. Il ne remplace pas un accompagnement professionnel.\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n (function () {\r\n \"use strict\";\r\n const STORAGE_KEY = \"jiris-petit-pas\";\r\n const TOTAL_STEPS = 6;\r\n\r\n const state = {\r\n currentStep: 0,\r\n preoccupation: \"\",\r\n souhait: \"\",\r\n dependDeMoi: \"\",\r\n petitPas: \"\",\r\n quand: \"\",\r\n besoin: \"\",\r\n encorePlusPetit: \"\",\r\n completed: false\r\n };\r\n\r\n const fields = [\"preoccupation\", \"souhait\", \"dependDeMoi\", \"petitPas\", \"quand\", \"besoin\", \"encorePlusPetit\"];\r\n\r\n function saveState() {\r\n try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (e) {}\r\n }\r\n\r\n function loadState() {\r\n try {\r\n const data = localStorage.getItem(STORAGE_KEY);\r\n if (data) Object.assign(state, JSON.parse(data));\r\n } catch (e) {}\r\n }\r\n\r\n function bindInputs() {\r\n fields.forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el) {\r\n el.value = state[id] || \"\";\r\n el.addEventListener(\"input\", () => {\r\n state[id] = el.value;\r\n saveState();\r\n });\r\n }\r\n });\r\n }\r\n\r\n function updateProgress(stepNum) {\r\n const wrapper = document.getElementById(\"progressWrapper\");\r\n if (stepNum === 0) {\r\n wrapper.style.display = \"none\";\r\n return;\r\n }\r\n wrapper.style.display = \"block\";\r\n document.getElementById(\"progressLabel\").textContent = `\u00c9tape ${stepNum} sur ${TOTAL_STEPS}`;\r\n const pct = Math.round((stepNum \/ TOTAL_STEPS) * 100);\r\n document.getElementById(\"progressPercent\").textContent = pct + \"%\";\r\n document.getElementById(\"progressFill\").style.width = pct + \"%\";\r\n }\r\n\r\n function goToStep(stepNum) {\r\n state.currentStep = stepNum;\r\n saveState();\r\n\r\n document.getElementById(\"introCard\").style.display = stepNum === 0 ? \"block\" : \"none\";\r\n document.getElementById(\"summarySection\").classList.remove(\"active\");\r\n document.querySelectorAll(\".step\").forEach(s => s.classList.remove(\"active\"));\r\n\r\n if (stepNum > 0 && stepNum <= TOTAL_STEPS) {\r\n const step = document.getElementById(\"step\" + stepNum);\r\n if (step) step.classList.add(\"active\");\r\n }\r\n updateProgress(stepNum);\r\n window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n }\r\n\r\n function buildSummary() {\r\n state.completed = true;\r\n saveState();\r\n\r\n let html = \"\";\r\n if (state.preoccupation) {\r\n html += `<div class=\"summary-block\"><h3>\ud83d\udcad Ce qui me pr\u00e9occupe<\/h3><p>${escapeHtml(state.preoccupation)}<\/p><\/div>`;\r\n }\r\n if (state.souhait) {\r\n html += `<div class=\"summary-block\"><h3>\ud83c\udf31 Ce que j\u2019aimerais voir changer<\/h3><p>${escapeHtml(state.souhait)}<\/p><\/div>`;\r\n }\r\n if (state.dependDeMoi) {\r\n html += `<div class=\"summary-block\"><h3>\ud83e\udded Ce qui d\u00e9pend de moi<\/h3><p>${escapeHtml(state.dependDeMoi)}<\/p><\/div>`;\r\n }\r\n if (state.petitPas) {\r\n html += `<div class=\"summary-block\"><h3>\ud83c\udfaf Mon prochain petit pas<\/h3><p><strong>${escapeHtml(state.petitPas)}<\/strong><\/p><\/div>`;\r\n }\r\n if (state.quand || state.besoin) {\r\n html += `<div class=\"summary-block\"><h3>\ud83d\udcc5 Quand et comment<\/h3>`;\r\n if (state.quand) html += `<p><strong>Quand :<\/strong> ${escapeHtml(state.quand)}<\/p>`;\r\n if (state.besoin) html += `<p><strong>Ce dont j\u2019ai besoin :<\/strong> ${escapeHtml(state.besoin)}<\/p>`;\r\n html += `<\/div>`;\r\n }\r\n if (state.encorePlusPetit) {\r\n html += `<div class=\"summary-block\"><h3>\ud83e\udeb6 Version encore plus petite<\/h3><p>${escapeHtml(state.encorePlusPetit)}<\/p><\/div>`;\r\n }\r\n\r\n document.getElementById(\"summaryContent\").innerHTML = html || \"<p style='text-align:center;color:var(--muted);font-style:italic;'>Vous n\u2019avez encore rien not\u00e9. Revenez en arri\u00e8re pour compl\u00e9ter quelques \u00e9tapes.<\/p>\";\r\n document.getElementById(\"summarySection\").classList.add(\"active\");\r\n document.querySelectorAll(\".step\").forEach(s => s.classList.remove(\"active\"));\r\n updateProgress(0);\r\n window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n }\r\n\r\n function escapeHtml(text) {\r\n const div = document.createElement(\"div\");\r\n div.textContent = text;\r\n return div.innerHTML;\r\n }\r\n\r\n function restart() {\r\n if (!confirm(\"Effacer toutes vos r\u00e9ponses et recommencer ?\")) return;\r\n try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}\r\n location.reload();\r\n }\r\n\r\n function downloadSummary() {\r\n let text = \"\ud83c\udfaf MON PROCHAIN PETIT PAS \u2014 JIRIS\\n\";\r\n text += \"=====================================\\n\\n\";\r\n if (state.preoccupation) text += \"Ce qui me pr\u00e9occupe :\\n\" + state.preoccupation + \"\\n\\n\";\r\n if (state.souhait) text += \"Ce que j\u2019aimerais voir changer :\\n\" + state.souhait + \"\\n\\n\";\r\n if (state.dependDeMoi) text += \"Ce qui d\u00e9pend de moi :\\n\" + state.dependDeMoi + \"\\n\\n\";\r\n if (state.petitPas) text += \"Mon prochain petit pas :\\n\" + state.petitPas + \"\\n\\n\";\r\n if (state.quand) text += \"Quand : \" + state.quand + \"\\n\";\r\n if (state.besoin) text += \"Ce dont j\u2019ai besoin : \" + state.besoin + \"\\n\\n\";\r\n if (state.encorePlusPetit) text += \"Version encore plus petite :\\n\" + state.encorePlusPetit + \"\\n\\n\";\r\n text += \"-------------------------------------\\n\";\r\n text += \"Un petit pas ne change pas tout.\\nMais il change quelque chose.\\n\\n\";\r\n text += \"JIRIS \u2014 Justice \u00b7 Inclusion \u00b7 R\u00e9int\u00e9gration \u00b7 Innovation Sociale\\n\";\r\n text += new Date().toLocaleDateString(\"fr-CA\", { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" });\r\n\r\n const blob = new Blob([text], { type: \"text\/plain;charset=utf-8\" });\r\n const a = document.createElement(\"a\");\r\n a.href = URL.createObjectURL(blob);\r\n a.download = \"jiris-mon-prochain-petit-pas.txt\";\r\n a.click();\r\n URL.revokeObjectURL(a.href);\r\n }\r\n\r\n \/\/ Init\r\n loadState();\r\n bindInputs();\r\n\r\n document.getElementById(\"startBtn\").addEventListener(\"click\", () => goToStep(1));\r\n document.getElementById(\"printBtn\").addEventListener(\"click\", () => window.print());\r\n document.getElementById(\"downloadBtn\").addEventListener(\"click\", downloadSummary);\r\n document.getElementById(\"restartBtn\").addEventListener(\"click\", restart);\r\n\r\n document.querySelectorAll(\"[data-action]\").forEach(btn => {\r\n btn.addEventListener(\"click\", function () {\r\n const action = this.dataset.action;\r\n if (action === \"intro\") goToStep(0);\r\n else if (action === \"step\") goToStep(parseInt(this.dataset.target, 10));\r\n else if (action === \"summary\") buildSummary();\r\n });\r\n });\r\n\r\n \/\/ Si d\u00e9j\u00e0 compl\u00e9t\u00e9\r\n if (state.completed) {\r\n buildSummary();\r\n } else if (state.currentStep > 0) {\r\n goToStep(state.currentStep);\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\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>Mon prochain petit pas | JIRIS \ud83c\udfaf Mon prochain petit pas Passer d\u2019une pr\u00e9occupation \u00e0 une action r\u00e9aliste et \u00e0 ma port\u00e9e. Avant de commencer Parfois, on sait qu\u2019il y a quelque chose \u00e0 faire\u2026 mais on ne sait pas par o\u00f9 commencer. Cet outil vous aide \u00e0 transformer une pr\u00e9occupation en un petit pas […]<\/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-4053","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/pages\/4053","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=4053"}],"version-history":[{"count":61,"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/pages\/4053\/revisions"}],"predecessor-version":[{"id":4437,"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/pages\/4053\/revisions\/4437"}],"wp:attachment":[{"href":"https:\/\/caadi.ca\/en\/wp-json\/wp\/v2\/media?parent=4053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}