Apaiser la col\u00e8re \u2014 Outil d'accompagnement JIRIS<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\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\">\n<style>\n :root {\n --bg: #F4F2F8;\n --surface: #FFFFFF;\n --surface-soft: #FAF8FE;\n --ink: #2A2438;\n --muted: #756E8C;\n --divider: #E1DCEC;\n --primary: #453876;\n --primary-light: #6D5AA0;\n --primary-soft: #ECE8F8;\n --primary-shadow: rgba(69, 56, 118, 0.14);\n --accent: #2F8F5B;\n --accent-soft: #E6F5EE;\n --accent-shadow: rgba(47, 143, 91, 0.16);\n --warm: #D97706;\n --warm-soft: #FEF3C7;\n --warm-border: #FDE68A;\n --danger: #DC2626;\n --danger-soft: #FEF2F2;\n --danger-border: #FCA5A5;\n --radius: 18px;\n --radius-sm: 12px;\n --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n background: var(--bg);\n color: var(--ink);\n font-family: \"Work Sans\", sans-serif;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n min-height: 100vh;\n background-image:\n radial-gradient(circle at 15% 0%, rgba(109, 90, 160, 0.08) 0%, transparent 45%),\n radial-gradient(circle at 85% 100%, rgba(217, 119, 6, 0.06) 0%, transparent 45%);\n background-attachment: fixed;\n }\n\n .wrap {\n max-width: 780px;\n margin: 0 auto;\n padding: 40px 20px 80px;\n }\n\n \/* ===== HERO ===== *\/\n .hero {\n text-align: center;\n margin-bottom: 32px;\n }\n\n .hero-frame {\n width: 72px;\n height: 72px;\n margin: 0 auto 20px;\n border-radius: 22px;\n background: linear-gradient(135deg, var(--warm-soft), var(--primary-soft));\n border: 1.5px solid var(--divider);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 34px;\n box-shadow: 0 12px 32px var(--primary-shadow);\n animation: float 4s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n }\n\n .hero h1 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: clamp(28px, 5.5vw, 40px);\n color: var(--primary);\n margin-bottom: 10px;\n letter-spacing: -0.02em;\n }\n\n .hero .subtitle {\n font-family: \"Fraunces\", serif;\n font-style: italic;\n color: var(--muted);\n font-size: 17px;\n max-width: 620px;\n margin: 0 auto;\n }\n\n \/* ===== INTRO CARD ===== *\/\n .intro-card {\n background: var(--surface);\n border-radius: var(--radius);\n padding: 30px 32px;\n margin-bottom: 32px;\n box-shadow: 0 10px 30px rgba(42, 36, 56, 0.06);\n border: 1px solid var(--divider);\n border-left: 5px solid var(--primary);\n }\n\n .intro-card h2 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 20px;\n color: var(--primary);\n margin-bottom: 14px;\n }\n\n .intro-card p {\n font-size: 15.5px;\n color: var(--ink);\n margin-bottom: 12px;\n line-height: 1.7;\n }\n\n .intro-card p:last-child { margin-bottom: 0; }\n .intro-card strong { color: var(--primary); font-weight: 600; }\n\n .intro-note {\n margin-top: 18px;\n padding: 14px 18px;\n background: var(--primary-soft);\n border-left: 4px solid var(--primary);\n border-radius: 0 10px 10px 0;\n font-size: 14px;\n color: var(--primary);\n line-height: 1.6;\n }\n\n .intro-note strong { color: var(--primary); }\n\n \/* ===== AVERTISSEMENT VIOLENCE (dans l'intro) ===== *\/\n .warning-card {\n background: var(--warm-soft);\n border: 1.5px solid var(--warm-border);\n border-radius: var(--radius-sm);\n padding: 20px 22px;\n margin-bottom: 22px;\n display: flex;\n gap: 14px;\n align-items: flex-start;\n }\n\n .warning-card .warning-icon {\n font-size: 24px;\n line-height: 1;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .warning-card .warning-content h3 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 16px;\n color: #92400E;\n margin-bottom: 8px;\n }\n\n .warning-card .warning-content p {\n font-size: 14px;\n color: #78350F;\n line-height: 1.6;\n margin-bottom: 6px;\n }\n\n .warning-card .warning-content p:last-child { margin-bottom: 0; }\n\n .warning-card strong {\n color: #78350F;\n font-weight: 700;\n }\n\n \/* ===== AVIS DE COMPL\u00c9TION ===== *\/\n .completed-notice {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n border-radius: 0 10px 10px 0;\n padding: 16px 20px;\n margin-bottom: 18px;\n display: flex;\n gap: 14px;\n align-items: flex-start;\n }\n .completed-notice .completed-icon {\n font-size: 22px;\n line-height: 1;\n flex-shrink: 0;\n margin-top: 2px;\n }\n .completed-notice .completed-text { flex: 1; }\n .completed-notice .completed-text strong {\n display: block;\n color: var(--accent);\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 15px;\n margin-bottom: 6px;\n }\n .completed-notice .completed-text p {\n font-size: 14px;\n color: var(--ink);\n line-height: 1.6;\n margin: 0;\n }\n\n .restart-hint {\n text-align: center;\n font-size: 13px;\n color: var(--muted);\n font-style: italic;\n margin-top: 16px;\n line-height: 1.6;\n }\n\n \/* ===== PROGRESSION ===== *\/\n .progress-wrapper {\n margin-bottom: 28px;\n }\n\n .progress-text {\n display: flex;\n justify-content: space-between;\n font-size: 13.5px;\n font-weight: 600;\n color: var(--muted);\n margin-bottom: 8px;\n letter-spacing: 0.02em;\n }\n\n .progress-bar {\n width: 100%;\n height: 8px;\n background: var(--primary-soft);\n border-radius: 99px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary), var(--accent));\n border-radius: 99px;\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n width: 0%;\n }\n\n \/* ===== \u00c9TAPE ===== *\/\n .step {\n display: none;\n background: var(--surface);\n border-radius: var(--radius);\n padding: 34px 32px;\n margin-bottom: 24px;\n box-shadow: 0 10px 30px rgba(42, 36, 56, 0.06);\n border: 1px solid var(--divider);\n animation: fadeInUp 0.4s ease;\n }\n\n .step.active { display: block; }\n\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .step-badge {\n display: inline-block;\n padding: 5px 14px;\n background: var(--primary-soft);\n color: var(--primary);\n border-radius: 99px;\n font-size: 11.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n margin-bottom: 14px;\n }\n\n .step-title {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 24px;\n color: var(--primary);\n margin-bottom: 8px;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .step-title .step-emoji {\n font-size: 26px;\n line-height: 1;\n }\n\n .step-hint {\n font-size: 14.5px;\n color: var(--muted);\n margin-bottom: 22px;\n font-style: italic;\n line-height: 1.6;\n }\n\n .field-group {\n margin-bottom: 18px;\n }\n\n .field-label {\n display: block;\n font-size: 14.5px;\n font-weight: 600;\n color: var(--ink);\n margin-bottom: 8px;\n line-height: 1.5;\n }\n\n .field-label .field-example {\n display: block;\n font-weight: 400;\n font-style: italic;\n font-size: 13px;\n color: var(--muted);\n margin-top: 4px;\n }\n\n textarea,\n input[type=\"text\"] {\n width: 100%;\n border: 1.5px solid var(--divider);\n background: var(--surface);\n border-radius: 12px;\n padding: 14px 16px;\n font-family: \"Work Sans\", sans-serif;\n font-size: 15px;\n color: var(--ink);\n transition: all var(--transition);\n resize: vertical;\n line-height: 1.6;\n min-height: 90px;\n }\n\n input[type=\"text\"] { min-height: auto; }\n\n textarea:focus,\n input[type=\"text\"]:focus {\n outline: none;\n border-color: var(--primary-light);\n box-shadow: 0 0 0 4px rgba(69, 56, 118, 0.08);\n }\n\n textarea::placeholder,\n input::placeholder {\n color: var(--muted);\n opacity: 0.7;\n }\n\n .helper-text {\n font-size: 13px;\n color: var(--muted);\n margin-top: 8px;\n line-height: 1.6;\n font-style: italic;\n }\n\n .guided-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 18px;\n }\n\n .guided-item {\n background: var(--surface-soft);\n border: 1.5px solid var(--divider);\n border-radius: var(--radius-sm);\n padding: 14px 18px;\n transition: all var(--transition);\n }\n\n .guided-item:focus-within {\n border-color: var(--primary);\n background: var(--surface);\n box-shadow: 0 0 0 4px rgba(69, 56, 118, 0.06);\n }\n\n .guided-item .item-label {\n font-size: 13.5px;\n font-weight: 600;\n color: var(--primary);\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .guided-item .item-num {\n display: inline-flex;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--primary-soft);\n color: var(--primary);\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 700;\n flex-shrink: 0;\n }\n\n .guided-item textarea {\n min-height: 64px;\n padding: 10px 14px;\n font-size: 14.5px;\n border: 1px solid var(--divider);\n background: var(--surface);\n }\n\n \/* ===== CHIPS ===== *\/\n .chips-row {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 14px;\n }\n\n .chip {\n padding: 8px 16px;\n background: var(--surface);\n border: 1.5px solid var(--divider);\n border-radius: 99px;\n font-size: 13.5px;\n font-weight: 500;\n color: var(--ink);\n cursor: pointer;\n transition: all var(--transition);\n font-family: inherit;\n }\n\n .chip:hover {\n border-color: var(--primary);\n color: var(--primary);\n background: var(--primary-soft);\n }\n\n .chip.selected {\n background: var(--primary);\n border-color: var(--primary);\n color: #FFFFFF;\n }\n\n \/* ===== GRILLE MULTI-S\u00c9LECTION ===== *\/\n .multi-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 10px;\n margin-bottom: 8px;\n }\n\n .multi-chip {\n padding: 12px 16px;\n background: var(--surface-soft);\n border: 1.5px solid var(--divider);\n border-radius: var(--radius-sm);\n font-size: 13.5px;\n font-weight: 500;\n color: var(--ink);\n cursor: pointer;\n transition: all var(--transition);\n text-align: left;\n font-family: inherit;\n display: flex;\n align-items: center;\n gap: 10px;\n line-height: 1.4;\n }\n\n .multi-chip::before {\n content: \"\";\n width: 18px;\n height: 18px;\n border-radius: 5px;\n border: 1.5px solid var(--divider);\n background: var(--surface);\n flex-shrink: 0;\n transition: all var(--transition);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .multi-chip:hover {\n border-color: var(--primary);\n background: var(--primary-soft);\n }\n\n .multi-chip.selected {\n border-color: var(--primary);\n background: var(--primary-soft);\n color: var(--primary);\n font-weight: 600;\n }\n\n .multi-chip.selected::before {\n background: var(--primary);\n border-color: var(--primary);\n content: \"\u2713\";\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n \/* ===== BOUTONS ===== *\/\n .btn-group {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n margin-top: 26px;\n justify-content: space-between;\n }\n\n .btn {\n padding: 14px 28px;\n border: none;\n border-radius: var(--radius-sm);\n font-family: \"Work Sans\", sans-serif;\n font-weight: 600;\n font-size: 15px;\n cursor: pointer;\n transition: all var(--transition);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n white-space: nowrap;\n }\n\n .btn-primary {\n background: var(--primary);\n color: #FFFFFF;\n box-shadow: 0 6px 20px var(--primary-shadow);\n }\n\n .btn-primary:hover {\n background: var(--primary-light);\n transform: translateY(-2px);\n box-shadow: 0 10px 28px var(--primary-shadow);\n }\n\n .btn-accent {\n background: var(--accent);\n color: #FFFFFF;\n box-shadow: 0 6px 20px var(--accent-shadow);\n }\n\n .btn-accent:hover {\n background: #27794d;\n transform: translateY(-2px);\n box-shadow: 0 10px 28px var(--accent-shadow);\n }\n\n .btn-secondary {\n background: var(--surface);\n color: var(--ink);\n border: 1.5px solid var(--divider);\n }\n\n .btn-secondary:hover {\n background: var(--primary-soft);\n border-color: var(--primary);\n color: var(--primary);\n }\n\n \/* ===== R\u00c9SUM\u00c9 ===== *\/\n .summary-section {\n background: var(--surface);\n border-radius: var(--radius);\n padding: 34px 32px;\n margin-bottom: 24px;\n box-shadow: 0 16px 40px rgba(42, 36, 56, 0.08);\n border: 1px solid var(--divider);\n border-top: 5px solid var(--accent);\n display: none;\n }\n\n .summary-section.active { display: block; animation: fadeInUp 0.5s ease; }\n\n .summary-hero {\n text-align: center;\n margin-bottom: 28px;\n padding-bottom: 24px;\n border-bottom: 1px dashed var(--divider);\n }\n\n .summary-hero .summary-emoji {\n font-size: 44px;\n line-height: 1;\n margin-bottom: 12px;\n }\n\n .summary-hero h2 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 26px;\n color: var(--primary);\n margin-bottom: 10px;\n }\n\n .summary-hero p {\n font-size: 15px;\n color: var(--muted);\n font-style: italic;\n max-width: 520px;\n margin: 0 auto;\n }\n\n .summary-block {\n margin-bottom: 22px;\n padding-bottom: 22px;\n border-bottom: 1px solid var(--divider);\n }\n\n .summary-block:last-child {\n border-bottom: none;\n padding-bottom: 0;\n margin-bottom: 0;\n }\n\n .summary-block h3 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 17px;\n color: var(--primary);\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .summary-block p {\n font-size: 15px;\n color: var(--ink);\n line-height: 1.7;\n white-space: pre-wrap;\n }\n\n .summary-block ul {\n list-style: none;\n padding-left: 0;\n }\n\n .summary-block ul li {\n position: relative;\n padding-left: 22px;\n font-size: 14.5px;\n color: var(--ink);\n line-height: 1.65;\n margin-bottom: 8px;\n }\n\n .summary-block ul li::before {\n content: \"\u2726\";\n position: absolute;\n left: 0;\n color: var(--accent);\n font-size: 13px;\n top: 1px;\n }\n\n .summary-resources {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n border-radius: 0 10px 10px 0;\n padding: 16px 20px;\n margin-top: 10px;\n font-size: 14.5px;\n color: var(--ink);\n line-height: 1.7;\n }\n\n .summary-resources strong {\n color: var(--accent);\n display: block;\n margin-bottom: 6px;\n }\n\n .summary-actions {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n justify-content: center;\n margin-top: 26px;\n padding-top: 24px;\n border-top: 1px solid var(--divider);\n }\n\n \/* ===== FOOTER ===== *\/\n .footer {\n text-align: center;\n margin-top: 56px;\n padding-top: 28px;\n border-top: 1px solid var(--divider);\n color: var(--muted);\n font-size: 13px;\n line-height: 1.7;\n }\n\n .footer strong {\n color: var(--primary);\n font-weight: 600;\n }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 640px) {\n .wrap { padding: 28px 16px 60px; }\n .step { padding: 24px 20px; }\n .intro-card { padding: 22px 20px; }\n .summary-section { padding: 24px 20px; }\n .step-title { font-size: 20px; }\n .step-title .step-emoji { font-size: 22px; }\n .btn-group { flex-direction: column-reverse; }\n .btn-group .btn { width: 100%; }\n .summary-actions { flex-direction: column; }\n .summary-actions .btn { width: 100%; }\n .warning-card { padding: 16px 16px; flex-direction: column; gap: 10px; }\n .completed-notice { padding: 14px 16px; flex-direction: column; gap: 10px; }\n .multi-grid { grid-template-columns: 1fr; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }\n\n @media print {\n body { background: white; }\n .wrap { padding: 0; }\n .hero-frame, .btn, .intro-note, .footer, .progress-wrapper, .restart-hint { display: none !important; }\n .summary-section { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }\n .step { display: none !important; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"wrap\">\n\n \n <header class=\"hero\">\n <div class=\"hero-frame\">\ud83d\udd25<\/div>\n <h1>Apaiser la col\u00e8re<\/h1>\n <p class=\"subtitle\">Un outil d'accompagnement pour comprendre la col\u00e8re, l'\u00e9couter autrement, et l'exprimer sans se blesser ni blesser.<\/p>\n <\/header>\n\n \n <div class=\"intro-card\" id=\"introCard\">\n <h2>Avant de commencer<\/h2>\n\n \n <div class=\"warning-card\">\n <div class=\"warning-icon\">\u26a0\ufe0f<\/div>\n <div class=\"warning-content\">\n <h3>Col\u00e8re n'est pas violence<\/h3>\n <p>La col\u00e8re est une \u00e9motion humaine, l\u00e9gitime et parfois utile. La <strong>violence<\/strong> \u2014 verbale, physique, psychologique ou mat\u00e9rielle \u2014 est un comportement qui blesse et qui n'est jamais acceptable.<\/p>\n <p>Si vous sentez que vous pourriez perdre le contr\u00f4le ou faire du mal \u00e0 quelqu'un, <strong>arr\u00eatez-vous et cherchez de l'aide imm\u00e9diatement<\/strong> : <strong>911<\/strong> en cas d'urgence, <strong>811<\/strong> (Info-Social) pour parler \u00e0 quelqu'un, ou <strong>1 800 363-9010<\/strong> (SOS violence conjugale, 24\/7).<\/p>\n <p>Vous \u00eates aussi l\u00e9gitime \u00e0 chercher de l'aide si <strong>vous vivez de la violence<\/strong>. Personne ne m\u00e9rite d'\u00eatre violent\u00e9\u00b7e.<\/p>\n <\/div>\n <\/div>\n\n <p>La col\u00e8re n'est ni bonne ni mauvaise en soi. C'est un <strong>signal<\/strong> : quelque chose compte pour nous, une limite a peut-\u00eatre \u00e9t\u00e9 franchie, un besoin n'a pas \u00e9t\u00e9 entendu. La difficult\u00e9 n'est pas de ressentir la col\u00e8re \u2014 c'est d'apprendre \u00e0 la traverser sans qu'elle nous submerge ou qu'elle fasse du d\u00e9g\u00e2t.<\/p>\n <p>Cet outil vous propose d'explorer ce qui se passe en vous, d'identifier ce que votre col\u00e8re prot\u00e8ge, de reconna\u00eetre les besoins cach\u00e9s derri\u00e8re, et d'exp\u00e9rimenter d'autres fa\u00e7ons de l'exprimer.<\/p>\n <p><strong>Il ne remplace pas un accompagnement professionnel<\/strong>, et il ne s'adresse pas aux situations de violence active \u2014 pour lesquelles il faut chercher de l'aide imm\u00e9diate.<\/p>\n <div class=\"intro-note\">\n <strong>\u23f1\ufe0f Dur\u00e9e estim\u00e9e :<\/strong> 15 \u00e0 25 minutes. Prenez le temps qu'il vous faut, \u00e0 votre rythme. Vous pouvez vous arr\u00eater et revenir plus tard \u2014 vos r\u00e9ponses sont sauvegard\u00e9es dans votre navigateur.\n <\/div>\n\n \n <div class=\"completed-notice\" id=\"completedNotice\" style=\"display: none;\">\n <div class=\"completed-icon\">\u2705<\/div>\n <div class=\"completed-text\">\n <strong>Vous avez termin\u00e9 cette exploration.<\/strong>\n <p>Votre synth\u00e8se est pr\u00eate. Vous pouvez la revoir ou recommencer une nouvelle exploration.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"btn-group\" style=\"justify-content: flex-start;\">\n <button class=\"btn btn-primary\" id=\"startBtn\" type=\"button\">Commencer \u2192<\/button>\n <button class=\"btn btn-accent\" id=\"reviewBtn\" type=\"button\" style=\"display: none;\">\u2728 Revoir ma synth\u00e8se<\/button>\n <button class=\"btn btn-secondary\" id=\"resetBtn\" type=\"button\">R\u00e9initialiser<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"progress-wrapper\" id=\"progressWrapper\" style=\"display: none;\">\n <div class=\"progress-text\">\n <span id=\"progressLabel\">\u00c9tape 1 sur 6<\/span>\n <span id=\"progressPercent\">0%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <\/div>\n <\/div>\n\n \n <section class=\"step\" id=\"step1\" data-step=\"1\">\n <span class=\"step-badge\">\u00c9tape 1 \u00b7 Reconna\u00eetre<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\u26a1<\/span> Les signes pr\u00e9curseurs<\/h2>\n <p class=\"step-hint\">La col\u00e8re ne surgit pas de nulle part. Avant l'explosion ou la rumination, il y a des signes \u2014 dans le corps, les pens\u00e9es, les comportements. Les reconna\u00eetre, c'est reprendre un peu de pouvoir.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Quels signes ressentez-vous <em>avant<\/em> que la col\u00e8re ne prenne toute la place ?\n <span class=\"field-example\">Cochez tout ce qui vous parle.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"signsGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"otherSigns\">\n D'autres signes, plus personnels ?\n <span class=\"field-example\">Ex. : \u00ab Je serre les dents \u00bb, \u00ab Je deviens silencieux \u00bb, \u00ab Je claque les portes \u00bb.<\/span>\n <\/label>\n <textarea id=\"otherSigns\" placeholder=\"Mes signes pr\u00e9curseurs\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Sur une \u00e9chelle de 0 \u00e0 10, \u00e0 quelle intensit\u00e9 votre col\u00e8re se manifeste-t-elle en g\u00e9n\u00e9ral ?\n <\/label>\n <div class=\"chips-row\" id=\"intensityChips\"><\/div>\n <div class=\"helper-text\">0 = tr\u00e8s l\u00e9g\u00e8re \u00b7 10 = tr\u00e8s intense. Un simple rep\u00e8re, sans jugement.<\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"intro\">\u2190 Retour<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"2\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step2\" data-step=\"2\">\n <span class=\"step-badge\">\u00c9tape 2 \u00b7 Explorer<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83c\udfaf<\/span> Ce qui d\u00e9clenche<\/h2>\n <p class=\"step-hint\">Ce ne sont pas les situations qui cr\u00e9ent la col\u00e8re \u2014 c'est ce qu'elles touchent en nous. Explorer les d\u00e9clencheurs, c'est se donner une chance de les anticiper.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Quelles situations d\u00e9clenchent le plus souvent votre col\u00e8re ?\n <span class=\"field-example\">Cochez celles qui reviennent chez vous.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"triggersGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"recentTrigger\">\n D\u00e9crivez une situation r\u00e9cente qui vous a mis\u00b7e en col\u00e8re :\n <span class=\"field-example\">Quelques lignes suffisent. Ce qui s'est pass\u00e9, dans quel contexte.<\/span>\n <\/label>\n <textarea id=\"recentTrigger\" placeholder=\"La derni\u00e8re fois o\u00f9\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"contextFactors\">\n Y a-t-il des facteurs qui rendent la col\u00e8re plus forte ?\n <span class=\"field-example\">Ex. : la fatigue, la faim, le stress accumul\u00e9, une blessure ancienne, un manque de sommeil, l'alcool\u2026<\/span>\n <\/label>\n <textarea id=\"contextFactors\" placeholder=\"Ce qui rend ma col\u00e8re plus forte\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"1\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"3\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step3\" data-step=\"3\">\n <span class=\"step-badge\">\u00c9tape 3 \u00b7 Comprendre<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83d\udee1\ufe0f<\/span> Ce que ma col\u00e8re prot\u00e8ge<\/h2>\n <p class=\"step-hint\">Sous la col\u00e8re, il y a souvent autre chose : une blessure, une peur, une tristesse, un sentiment d'impuissance. La col\u00e8re agit comme une armure \u2014 elle prot\u00e8ge quelque chose de plus vuln\u00e9rable.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n D'apr\u00e8s vous, que prot\u00e8ge votre col\u00e8re ?\n <span class=\"field-example\">Cochez les pistes qui r\u00e9sonnent. Il n'y a pas de bonne r\u00e9ponse \u2014 juste des hypoth\u00e8ses \u00e0 explorer.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"protectsGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"protectsText\">\n Si vous deviez mettre des mots sur ce que votre col\u00e8re cache ou prot\u00e8ge :\n <\/label>\n <textarea id=\"protectsText\" placeholder=\"Sous ma col\u00e8re, il y a\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"2\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"4\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step4\" data-step=\"4\">\n <span class=\"step-badge\">\u00c9tape 4 \u00b7 Besoins<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83c\udf31<\/span> Les besoins cach\u00e9s<\/h2>\n <p class=\"step-hint\">Toute col\u00e8re signale un besoin qui n'a pas \u00e9t\u00e9 entendu. Identifier ce besoin aide \u00e0 sortir de la col\u00e8re pour entrer dans une demande claire \u2014 \u00e0 soi-m\u00eame ou \u00e0 l'autre.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n De quoi auriez-vous besoin, concr\u00e8tement ?\n <span class=\"field-example\">Cochez tout ce qui r\u00e9sonne, m\u00eame partiellement.<\/span>\n <\/label>\n <div class=\"chips-row\" id=\"needsChips\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"needText\">\n Ce besoin, formul\u00e9 plus pr\u00e9cis\u00e9ment :\n <\/label>\n <textarea id=\"needText\" placeholder=\"J'aurais besoin de\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"3\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"5\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step5\" data-step=\"5\">\n <span class=\"step-badge\">\u00c9tape 5 \u00b7 Transformer<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83d\udd04<\/span> Exprimer autrement<\/h2>\n <p class=\"step-hint\">La col\u00e8re a besoin d'\u00eatre exprim\u00e9e \u2014 mais pas n'importe comment. Il existe des fa\u00e7ons de dire les choses sans exploser ni se taire, qui pr\u00e9servent le lien et le respect.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Parmi ces strat\u00e9gies, lesquelles vous semblent accessibles ?\n <span class=\"field-example\">Cochez ce que vous pourriez essayer, sans pression.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"strategiesGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"phrases\">\n Y a-t-il des phrases ou des formulations qui pourraient vous aider \u00e0 dire les choses autrement ?\n <span class=\"field-example\">Ex. : \u00ab Quand tu fais X, je me sens Y, et j'aurais besoin de Z \u00bb (message-je). Ou une phrase plus personnelle.<\/span>\n <\/label>\n <textarea id=\"phrases\" placeholder=\"Ce que je pourrais dire autrement\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"pauseStrategy\">\n Comment pourriez-vous vous accorder une pause avant d'exploser ou de ruminer ?\n <span class=\"field-example\">Ex. : respirer 3 fois, sortir marcher, \u00e9crire ce que je ressens, boire un verre d'eau\u2026<\/span>\n <\/label>\n <textarea id=\"pauseStrategy\" placeholder=\"Ma strat\u00e9gie de pause\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"4\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-primary\" type=\"button\" data-action=\"step\" data-target=\"6\">Continuer \u2192<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"step\" id=\"step6\" data-step=\"6\">\n <span class=\"step-badge\">\u00c9tape 6 \u00b7 Premier pas<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83d\udc63<\/span> Un premier pas r\u00e9gul\u00e9<\/h2>\n <p class=\"step-hint\">Pas besoin de tout changer d'un coup. Un tout petit geste, choisi par vous, qui pourra \u00eatre r\u00e9p\u00e9t\u00e9. C'est la r\u00e9p\u00e9tition qui cr\u00e9e le changement.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"firstStep\">\n Quel serait votre premier pas pour apaiser votre col\u00e8re ?\n <span class=\"field-example\">Ex. : \u00ab Rep\u00e9rer le moment o\u00f9 je sens la tension monter et respirer 3 fois avant de parler \u00bb, \u00ab \u00c9crire ce que je ressens avant de r\u00e9pondre \u00bb, \u00ab En parler \u00e0 quelqu'un de confiance \u00bb, \u00ab Consulter pour comprendre ce qui se r\u00e9p\u00e8te \u00bb.<\/span>\n <\/label>\n <textarea id=\"firstStep\" placeholder=\"Mon premier pas serait\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"whenStep\">\n Quand vais-je le faire ?\n <span class=\"field-example\">Un moment pr\u00e9cis, dans un d\u00e9lai r\u00e9aliste.<\/span>\n <\/label>\n <input type=\"text\" id=\"whenStep\" placeholder=\"Ex. : d\u00e8s la prochaine fois, cette semaine, dans les 3 prochains jours\u2026\">\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"supportStep\">\n De qui ou de quoi aurais-je besoin pour m'y tenir ?\n <span class=\"field-example\">Optionnel \u2014 mais souvent utile.<\/span>\n <\/label>\n <textarea id=\"supportStep\" placeholder=\"Pour m'aider \u00e0 tenir ce premier pas, je pourrais\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Apr\u00e8s ce travail, comment \u00e9valuez-vous l'intensit\u00e9 de votre col\u00e8re <em>maintenant<\/em> ?\n <\/label>\n <div class=\"chips-row\" id=\"intensityChipsAfter\"><\/div>\n <div class=\"helper-text\">Aucun jugement. Simplement observer, m\u00eame un l\u00e9ger changement.<\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-secondary\" type=\"button\" data-action=\"step\" data-target=\"5\">\u2190 Pr\u00e9c\u00e9dent<\/button>\n <button class=\"btn btn-accent\" type=\"button\" data-action=\"summary\">Voir ma synth\u00e8se \ud83d\udd25<\/button>\n <\/div>\n <\/section>\n\n \n <section class=\"summary-section\" id=\"summarySection\">\n <div class=\"summary-hero\">\n <div class=\"summary-emoji\">\ud83c\udf3f<\/div>\n <h2>Votre synth\u00e8se<\/h2>\n <p>Voici ce que vous avez mis au clair. Ce document vous appartient \u2014 vous pouvez le relire, l'imprimer, en parler \u00e0 un professionnel ou \u00e0 une personne de confiance.<\/p>\n <\/div>\n\n <div id=\"summaryContent\"><\/div>\n\n <div class=\"summary-resources\">\n <strong>\ud83e\udded Ressources \u00e0 garder sous la main<\/strong>\n \u2022 <strong>911<\/strong> \u2014 En cas de danger imm\u00e9diat ou de violence en cours<br>\n \u2022 <strong>811 (Info-Social)<\/strong> \u2014 Parler \u00e0 une intervenante psychosociale (24\/7, gratuit, Qu\u00e9bec)<br>\n \u2022 <strong>1 800 363-9010<\/strong> \u2014 SOS violence conjugale (24\/7, gratuit, confidentiel)<br>\n \u2022 <strong>Votre m\u00e9decin de famille<\/strong> ou <strong>CLSC<\/strong> \u2014 Pour un accompagnement suivi<br>\n \u2022 <strong>Programme d'aide aux employ\u00e9s (PAE)<\/strong> \u2014 Si vous \u00eates en emploi<br>\n \u2022 <strong>Tel-jeunes, Jeunesse J'\u00e9coute<\/strong> \u2014 Pour les plus jeunes\n <\/div>\n\n <div class=\"summary-actions\">\n <button class=\"btn btn-primary\" id=\"printBtn\" type=\"button\">\ud83d\udda8\ufe0f Imprimer<\/button>\n <button class=\"btn btn-secondary\" id=\"downloadBtn\" type=\"button\">\ud83d\udce5 T\u00e9l\u00e9charger<\/button>\n <button class=\"btn btn-secondary\" id=\"restartBtn\" type=\"button\">\ud83d\udd04 Nouvelle exploration<\/button>\n <\/div>\n <p class=\"restart-hint\">Envie de refaire l'exercice ? Vos r\u00e9ponses actuelles seront effac\u00e9es \u2014 pensez \u00e0 imprimer ou t\u00e9l\u00e9charger votre synth\u00e8se avant.<\/p>\n <\/section>\n\n \n <footer class=\"footer\">\n <p>\ud83d\udd25 <strong>Outil d'accompagnement JIRIS<\/strong> \u2014 Justice \u00b7 Inclusion \u00b7 R\u00e9int\u00e9gration \u00b7 Innovation Sociale<\/p>\n <p style=\"margin-top: 8px; opacity: 0.8;\">Cet outil ne pose aucun diagnostic et ne remplace pas un accompagnement professionnel. Vos r\u00e9ponses restent dans votre navigateur.<\/p>\n <\/footer>\n\n<\/div>\n\n<script>\n(function () {\n \"use strict\";\n\n const STORAGE_KEY = 'jiris-colere-outil';\n const TOTAL_STEPS = 6;\n\n const state = {\n currentStep: 0,\n signs: [],\n otherSigns: '',\n intensityBefore: null,\n triggers: [],\n recentTrigger: '',\n contextFactors: '',\n protects: [],\n protectsText: '',\n needs: [],\n needText: '',\n strategies: [],\n phrases: '',\n pauseStrategy: '',\n firstStep: '',\n whenStep: '',\n supportStep: '',\n intensityAfter: null,\n completed: false\n };\n\n const INTENSITY_LEVELS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\n const SIGNS_LIST = [\n 'Tension dans le corps (\u00e9paules, m\u00e2choire, poings)',\n 'Chaleur, rougeurs, acc\u00e9l\u00e9ration du c\u0153ur',\n 'Respiration courte ou rapide',\n 'Irritabilit\u00e9, impatience, agacement',\n 'Pens\u00e9es rigides (\u00ab c\\'est injuste \u00bb, \u00ab toujours pareil \u00bb)',\n 'Rumination : je ressasse sans fin la m\u00eame situation',\n 'Envie de crier, de claquer, de partir',\n 'Silence tendu, repli, mutisme',\n 'Sentiment d\\'\u00eatre incompris\u00b7e ou m\u00e9pris\u00e9\u00b7e',\n 'Difficult\u00e9 \u00e0 \u00e9couter ou \u00e0 penser clairement'\n ];\n\n const TRIGGERS_LIST = [\n 'Une injustice ou un traitement in\u00e9quitable',\n 'Un manque de respect, une parole blessante',\n '\u00catre ignor\u00e9\u00b7e, non \u00e9cout\u00e9\u00b7e',\n 'Une frustration r\u00e9p\u00e9t\u00e9e (attente, \u00e9chec)',\n 'Une limite personnelle franchie',\n 'Une situation d\\'impuissance ou de contr\u00f4le subi',\n 'La fatigue, la faim, le stress accumul\u00e9',\n 'Une blessure ancienne r\u00e9activ\u00e9e',\n 'Un conflit avec une personne proche',\n 'Une critique, un reproche',\n 'Un impr\u00e9vu, un retard, un obstacle',\n 'Se sentir seul\u00b7e face \u00e0 une difficult\u00e9'\n ];\n\n const PROTECTS_LIST = [\n 'Une blessure plus profonde',\n 'Une peur (d\\'\u00eatre rejet\u00e9\u00b7e, abandonn\u00e9\u00b7e, domin\u00e9\u00b7e)',\n 'Une tristesse ou un chagrin non exprim\u00e9',\n 'Un sentiment d\\'impuissance',\n 'Une atteinte \u00e0 ma dignit\u00e9 ou \u00e0 ma valeur',\n 'Un besoin de justice, d\\'\u00e9quit\u00e9',\n 'Une d\u00e9ception face \u00e0 quelqu\\'un ou \u00e0 moi-m\u00eame',\n 'Une fatigue ou un \u00e9puisement',\n 'Une ins\u00e9curit\u00e9 ancienne',\n 'Un d\u00e9sir d\\'\u00eatre entendu\u00b7e, reconnu\u00b7e'\n ];\n\n const NEEDS_LIST = [\n '\u00catre respect\u00e9\u00b7e',\n '\u00catre \u00e9cout\u00e9\u00b7e et entendu\u00b7e',\n '\u00catre reconnu\u00b7e dans ma valeur',\n 'Sentir de la justice, de l\\'\u00e9quit\u00e9',\n 'Me sentir en s\u00e9curit\u00e9',\n 'Avoir de l\\'autonomie, du contr\u00f4le sur ma vie',\n 'Avoir un espace pour m\\'exprimer',\n 'Du repos, de la douceur',\n '\u00catre compris\u00b7e sans jugement',\n 'De la clart\u00e9, des limites claires',\n '\u00catre accompagn\u00e9\u00b7e dans une difficult\u00e9',\n 'Du temps pour moi'\n ];\n\n const STRATEGIES_LIST = [\n 'Respirer profond\u00e9ment avant de r\u00e9agir',\n 'Prendre une pause (sortir, marcher, m\\'isoler quelques minutes)',\n '\u00c9crire ce que je ressens avant d\\'en parler',\n 'Utiliser le message-je (\u00ab Quand X arrive, je me sens Y, j\\'aurais besoin de Z \u00bb)',\n 'Nommer l\\'\u00e9motion \u00e0 voix haute (\u00ab l\u00e0, je sens la col\u00e8re monter \u00bb)',\n 'Choisir le bon moment pour en parler, pas \u00e0 chaud',\n 'Demander un temps de discussion calme',\n 'Faire une activit\u00e9 physique pour \u00e9vacuer la tension',\n 'Parler \u00e0 une personne de confiance en dehors de la situation',\n '\u00c9crire une lettre que je ne vais pas envoyer',\n 'Consulter un professionnel pour comprendre ce qui se r\u00e9p\u00e8te'\n ];\n\n const introCard = document.getElementById('introCard');\n const progressWrapper = document.getElementById('progressWrapper');\n const progressLabel = document.getElementById('progressLabel');\n const progressPercent = document.getElementById('progressPercent');\n const progressFill = document.getElementById('progressFill');\n const summarySection = document.getElementById('summarySection');\n const summaryContent = document.getElementById('summaryContent');\n\n function renderIntensityChips(containerId, keyName) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n INTENSITY_LEVELS.forEach(n => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'chip';\n btn.textContent = n;\n if (state[keyName] === n) btn.classList.add('selected');\n btn.addEventListener('click', () => {\n state[keyName] = n;\n container.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));\n btn.classList.add('selected');\n saveState();\n });\n container.appendChild(btn);\n });\n }\n\n function renderMultiGrid(containerId, keyName, list) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n list.forEach(item => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'multi-chip';\n btn.textContent = item;\n if (state[keyName].includes(item)) btn.classList.add('selected');\n btn.addEventListener('click', () => {\n const idx = state[keyName].indexOf(item);\n if (idx >= 0) {\n state[keyName].splice(idx, 1);\n btn.classList.remove('selected');\n } else {\n state[keyName].push(item);\n btn.classList.add('selected');\n }\n saveState();\n });\n container.appendChild(btn);\n });\n }\n\n function renderNeedsChips() {\n const container = document.getElementById('needsChips');\n if (!container) return;\n container.innerHTML = '';\n NEEDS_LIST.forEach(need => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'chip';\n btn.textContent = need;\n if (state.needs.includes(need)) btn.classList.add('selected');\n btn.addEventListener('click', () => {\n const idx = state.needs.indexOf(need);\n if (idx >= 0) {\n state.needs.splice(idx, 1);\n btn.classList.remove('selected');\n } else {\n state.needs.push(need);\n btn.classList.add('selected');\n }\n saveState();\n });\n container.appendChild(btn);\n });\n }\n\n function saveState() {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(state));\n } catch (e) {\n console.warn('Sauvegarde impossible :', e);\n }\n }\n\n function loadState() {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return false;\n const saved = JSON.parse(raw);\n Object.keys(state).forEach(k => {\n if (saved[k] !== undefined) state[k] = saved[k];\n });\n return true;\n } catch (e) {\n return false;\n }\n }\n\n function bindInputs() {\n const bind = (id, key) => {\n const el = document.getElementById(id);\n if (!el) return;\n el.addEventListener('input', e => {\n state[key] = e.target.value;\n saveState();\n });\n };\n bind('otherSigns', 'otherSigns');\n bind('recentTrigger', 'recentTrigger');\n bind('contextFactors', 'contextFactors');\n bind('protectsText', 'protectsText');\n bind('needText', 'needText');\n bind('phrases', 'phrases');\n bind('pauseStrategy', 'pauseStrategy');\n bind('firstStep', 'firstStep');\n bind('whenStep', 'whenStep');\n bind('supportStep', 'supportStep');\n }\n\n function fillInputs() {\n const fill = (id, val) => {\n const el = document.getElementById(id);\n if (el) el.value = val || '';\n };\n fill('otherSigns', state.otherSigns);\n fill('recentTrigger', state.recentTrigger);\n fill('contextFactors', state.contextFactors);\n fill('protectsText', state.protectsText);\n fill('needText', state.needText);\n fill('phrases', state.phrases);\n fill('pauseStrategy', state.pauseStrategy);\n fill('firstStep', state.firstStep);\n fill('whenStep', state.whenStep);\n fill('supportStep', state.supportStep);\n }\n\n function goToIntro() {\n state.currentStep = 0;\n introCard.style.display = 'block';\n progressWrapper.style.display = 'none';\n summarySection.classList.remove('active');\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n updateIntroForCompleted();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n saveState();\n }\n\n function goToStep(n) {\n if (n < 1 || n > TOTAL_STEPS) return;\n state.currentStep = n;\n introCard.style.display = 'none';\n progressWrapper.style.display = 'block';\n summarySection.classList.remove('active');\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n const target = document.getElementById('step' + n);\n if (target) target.classList.add('active');\n updateProgress();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n saveState();\n }\n\n function updateProgress() {\n const pct = Math.round((state.currentStep \/ TOTAL_STEPS) * 100);\n progressLabel.textContent = '\u00c9tape ' + state.currentStep + ' sur ' + TOTAL_STEPS;\n progressPercent.textContent = pct + '%';\n progressFill.style.width = pct + '%';\n }\n\n function escapeHtml(s) {\n const div = document.createElement('div');\n div.textContent = s || '';\n return div.innerHTML;\n }\n\n function buildSummaryHtml() {\n const blocks = [];\n\n if (state.signs.length > 0 || state.otherSigns || state.intensityBefore !== null) {\n let inner = '';\n if (state.signs.length > 0) {\n inner += '<ul>' + state.signs.map(s => '<li>' + escapeHtml(s) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.otherSigns) {\n inner += '<p style=\"margin-top: 10px;\"><strong>Autres signes :<\/strong><br>' + escapeHtml(state.otherSigns) + '<\/p>';\n }\n if (state.intensityBefore !== null) {\n inner += '<p style=\"margin-top: 10px; font-size: 14px; color: var(--muted);\">Intensit\u00e9 g\u00e9n\u00e9rale : <strong style=\"color: var(--primary);\">' + state.intensityBefore + '\/10<\/strong><\/p>';\n }\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\u26a1 Signes pr\u00e9curseurs<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.triggers.length > 0 || state.recentTrigger || state.contextFactors) {\n let inner = '';\n if (state.triggers.length > 0) {\n inner += '<ul>' + state.triggers.map(t => '<li>' + escapeHtml(t) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.recentTrigger) {\n inner += '<p style=\"margin-top: 10px;\"><strong>Situation r\u00e9cente :<\/strong><br>' + escapeHtml(state.recentTrigger) + '<\/p>';\n }\n if (state.contextFactors) {\n inner += '<p style=\"margin-top: 10px;\"><strong>Facteurs aggravants :<\/strong><br>' + escapeHtml(state.contextFactors) + '<\/p>';\n }\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udfaf D\u00e9clencheurs<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.protects.length > 0 || state.protectsText) {\n let inner = '';\n if (state.protects.length > 0) {\n inner += '<ul>' + state.protects.map(p => '<li>' + escapeHtml(p) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.protectsText) {\n inner += '<p style=\"margin-top: 10px;\">' + escapeHtml(state.protectsText) + '<\/p>';\n }\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udee1\ufe0f Ce que ma col\u00e8re prot\u00e8ge<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.needs.length > 0 || state.needText) {\n let inner = '';\n if (state.needs.length > 0) {\n inner += '<ul>' + state.needs.map(n => '<li>' + escapeHtml(n) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.needText) {\n inner += '<p style=\"margin-top: 10px;\">' + escapeHtml(state.needText) + '<\/p>';\n }\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udf31 Besoins cach\u00e9s<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.strategies.length > 0 || state.phrases || state.pauseStrategy) {\n let inner = '';\n if (state.strategies.length > 0) {\n inner += '<ul>' + state.strategies.map(s => '<li>' + escapeHtml(s) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.phrases) {\n inner += '<p style=\"margin-top: 10px;\"><strong>Phrases que je pourrais dire autrement :<\/strong><br>' + escapeHtml(state.phrases) + '<\/p>';\n }\n if (state.pauseStrategy) {\n inner += '<p style=\"margin-top: 10px;\"><strong>Ma strat\u00e9gie de pause :<\/strong><br>' + escapeHtml(state.pauseStrategy) + '<\/p>';\n }\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udd04 Exprimer autrement<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.firstStep || state.whenStep || state.supportStep) {\n let inner = '';\n if (state.firstStep) inner += '<p><strong>Mon premier pas :<\/strong><br>' + escapeHtml(state.firstStep) + '<\/p>';\n if (state.whenStep) inner += '<p style=\"margin-top: 10px;\"><strong>Quand :<\/strong> ' + escapeHtml(state.whenStep) + '<\/p>';\n if (state.supportStep) inner += '<p style=\"margin-top: 10px;\"><strong>Soutien pr\u00e9vu :<\/strong> ' + escapeHtml(state.supportStep) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udc63 Premier pas r\u00e9gul\u00e9<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.intensityBefore !== null && state.intensityAfter !== null) {\n const diff = state.intensityBefore - state.intensityAfter;\n let evoText = '';\n if (diff > 0) evoText = 'L\\'intensit\u00e9 ressentie a <strong style=\"color: var(--accent);\">diminu\u00e9 de ' + diff + ' point' + (diff > 1 ? 's' : '') + '<\/strong> apr\u00e8s ce travail. C\\'est une observation pr\u00e9cieuse.';\n else if (diff === 0) evoText = 'L\\'intensit\u00e9 est rest\u00e9e <strong>stable<\/strong>. Simplement avoir pris ce temps compte d\u00e9j\u00e0.';\n else evoText = 'L\\'intensit\u00e9 a <strong>augment\u00e9<\/strong> de ' + Math.abs(diff) + ' point' + (Math.abs(diff) > 1 ? 's' : '') + '. Explorer la col\u00e8re peut parfois raviver la charge \u00e9motionnelle \u2014 c\\'est un passage possible. Prenez soin de vous.';\n\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udcca \u00c9volution de l\\'intensit\u00e9<\/h3>' +\n '<p>Avant : <strong>' + state.intensityBefore + '\/10<\/strong> \u00b7 Apr\u00e8s : <strong>' + state.intensityAfter + '\/10<\/strong><\/p>' +\n '<p style=\"margin-top: 8px;\">' + evoText + '<\/p>' +\n '<\/div>'\n );\n }\n\n if (blocks.length === 0) {\n return '<p style=\"text-align: center; color: var(--muted); font-style: italic;\">Vous n\\'avez encore rien not\u00e9. Revenez en arri\u00e8re pour compl\u00e9ter quelques \u00e9tapes \u2014 \u00e0 votre rythme.<\/p>';\n }\n\n return blocks.join('');\n }\n\n function showSummary() {\n state.completed = true;\n summaryContent.innerHTML = buildSummaryHtml();\n document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\n summarySection.classList.add('active');\n progressWrapper.style.display = 'none';\n progressLabel.textContent = 'Synth\u00e8se';\n progressPercent.textContent = '100%';\n progressFill.style.width = '100%';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n saveState();\n }\n\n function printSummary() {\n try {\n if (typeof window.print === 'function') {\n window.print();\n } else {\n throw new Error('window.print non disponible');\n }\n } catch (err) {\n console.warn('Impression non disponible :', err);\n alert('L\\'impression n\\'est pas disponible dans cet environnement.\\n\\nVous pouvez utiliser la fonction \"T\u00e9l\u00e9charger\" pour sauvegarder votre synth\u00e8se.');\n }\n }\n\n function buildPlainTextSummary() {\n let t = '\ud83d\udd25 APAISER LA COL\u00c8RE\\n';\n t += '================================================\\n';\n t += 'Outil JIRIS \u2014 Justice \u00b7 Inclusion \u00b7 R\u00e9int\u00e9gration \u00b7 Innovation Sociale\\n\\n';\n\n t += '\u26a0\ufe0f RAPPEL IMPORTANT\\n';\n t += 'La col\u00e8re est une \u00e9motion l\u00e9gitime. La violence (verbale, physique, psychologique, mat\u00e9rielle) n\\'est jamais acceptable.\\n';\n t += 'En cas d\\'urgence : 911 \u00b7 Info-Social : 811 \u00b7 SOS violence conjugale : 1 800 363-9010\\n\\n';\n\n if (state.signs.length > 0 || state.otherSigns || state.intensityBefore !== null) {\n t += '\u26a1 SIGNES PR\u00c9CURSEURS\\n';\n state.signs.forEach((s, i) => t += (i + 1) + '. ' + s + '\\n');\n if (state.otherSigns) t += 'Autres signes : ' + state.otherSigns + '\\n';\n if (state.intensityBefore !== null) t += 'Intensit\u00e9 g\u00e9n\u00e9rale : ' + state.intensityBefore + '\/10\\n';\n t += '\\n';\n }\n\n if (state.triggers.length > 0 || state.recentTrigger || state.contextFactors) {\n t += '\ud83c\udfaf D\u00c9CLENCHEURS\\n';\n state.triggers.forEach((tr, i) => t += (i + 1) + '. ' + tr + '\\n');\n if (state.recentTrigger) t += 'Situation r\u00e9cente : ' + state.recentTrigger + '\\n';\n if (state.contextFactors) t += 'Facteurs aggravants : ' + state.contextFactors + '\\n';\n t += '\\n';\n }\n\n if (state.protects.length > 0 || state.protectsText) {\n t += '\ud83d\udee1\ufe0f CE QUE MA COL\u00c8RE PROT\u00c8GE\\n';\n state.protects.forEach((p, i) => t += (i + 1) + '. ' + p + '\\n');\n if (state.protectsText) t += state.protectsText + '\\n';\n t += '\\n';\n }\n\n if (state.needs.length > 0 || state.needText) {\n t += '\ud83c\udf31 BESOINS CACH\u00c9S\\n';\n if (state.needs.length > 0) t += 'Besoins identifi\u00e9s : ' + state.needs.join(', ') + '\\n';\n if (state.needText) t += state.needText + '\\n';\n t += '\\n';\n }\n\n if (state.strategies.length > 0 || state.phrases || state.pauseStrategy) {\n t += '\ud83d\udd04 EXPRIMER AUTREMENT\\n';\n state.strategies.forEach((s, i) => t += (i + 1) + '. ' + s + '\\n');\n if (state.phrases) t += 'Phrases possibles : ' + state.phrases + '\\n';\n if (state.pauseStrategy) t += 'Ma strat\u00e9gie de pause : ' + state.pauseStrategy + '\\n';\n t += '\\n';\n }\n\n if (state.firstStep || state.whenStep || state.supportStep) {\n t += '\ud83d\udc63 PREMIER PAS R\u00c9GUL\u00c9\\n';\n if (state.firstStep) t += 'Mon premier pas : ' + state.firstStep + '\\n';\n if (state.whenStep) t += 'Quand : ' + state.whenStep + '\\n';\n if (state.supportStep) t += 'Soutien pr\u00e9vu : ' + state.supportStep + '\\n';\n t += '\\n';\n }\n\n if (state.intensityBefore !== null && state.intensityAfter !== null) {\n t += '\ud83d\udcca \u00c9VOLUTION DE L\\'INTENSIT\u00c9\\n';\n t += 'Avant : ' + state.intensityBefore + '\/10 \u00b7 Apr\u00e8s : ' + state.intensityAfter + '\/10\\n\\n';\n }\n\n t += '================================================\\n';\n t += 'G\u00e9n\u00e9r\u00e9 le ' + new Date().toLocaleDateString('fr-CA', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }) + '\\n';\n t += 'Cet outil ne pose aucun diagnostic et ne remplace pas un accompagnement professionnel.';\n\n return t;\n }\n\n function downloadSummary() {\n const text = buildPlainTextSummary();\n const filename = 'colere-jiris-' + new Date().toISOString().slice(0, 10) + '.txt';\n\n try {\n const blob = new Blob([text], { type: 'text\/plain;charset=utf-8' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n a.style.display = 'none';\n document.body.appendChild(a);\n a.click();\n setTimeout(() => {\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }, 500);\n console.log('\u2705 T\u00e9l\u00e9chargement lanc\u00e9 via Blob');\n return;\n } catch (err1) {\n console.warn('M\u00e9thode Blob \u00e9chou\u00e9e :', err1);\n }\n\n try {\n const dataUri = 'data:text\/plain;charset=utf-8,' + encodeURIComponent(text);\n const a = document.createElement('a');\n a.href = dataUri;\n a.download = filename;\n a.style.display = 'none';\n document.body.appendChild(a);\n a.click();\n setTimeout(() => document.body.removeChild(a), 500);\n console.log('\u2705 T\u00e9l\u00e9chargement lanc\u00e9 via data URI');\n return;\n } catch (err2) {\n console.warn('M\u00e9thode data URI \u00e9chou\u00e9e :', err2);\n }\n\n try {\n const blob = new Blob([text], { type: 'text\/plain;charset=utf-8' });\n const url = URL.createObjectURL(blob);\n const newWindow = window.open(url, '_blank');\n if (!newWindow) throw new Error('Popup bloqu\u00e9e');\n console.log('\u2705 Ouverture dans un nouvel onglet');\n return;\n } catch (err3) {\n console.warn('Ouverture nouvel onglet \u00e9chou\u00e9e :', err3);\n }\n\n alert('Le t\u00e9l\u00e9chargement automatique n\\'est pas disponible dans cet environnement.\\n\\nLe texte de votre synth\u00e8se va s\\'afficher dans une nouvelle fen\u00eatre.');\n const w = window.open('', '_blank');\n if (w) {\n w.document.write('<pre style=\"font-family: monospace; white-space: pre-wrap; padding: 20px; line-height: 1.5;\">' + escapeHtml(text) + '<\/pre>');\n w.document.title = 'Synth\u00e8se \u2014 Apaiser la col\u00e8re';\n }\n }\n\n function restart() {\n if (!confirm('Effacer toutes vos r\u00e9ponses et recommencer ?')) return;\n try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}\n Object.keys(state).forEach(k => {\n if (k === 'signs' || k === 'triggers' || k === 'protects' || k === 'needs' || k === 'strategies') state[k] = [];\n else if (k === 'intensityBefore' || k === 'intensityAfter') state[k] = null;\n else if (k === 'completed') state[k] = false;\n else if (k === 'currentStep') state[k] = 0;\n else state[k] = '';\n });\n saveState();\n location.reload();\n }\n\n function updateIntroForCompleted() {\n const notice = document.getElementById('completedNotice');\n const startBtn = document.getElementById('startBtn');\n const reviewBtn = document.getElementById('reviewBtn');\n const resetBtn = document.getElementById('resetBtn');\n\n if (state.completed) {\n if (notice) notice.style.display = 'flex';\n if (startBtn) startBtn.style.display = 'none';\n if (reviewBtn) reviewBtn.style.display = 'inline-flex';\n if (resetBtn) resetBtn.textContent = '\ud83d\udd04 Recommencer une nouvelle exploration';\n } else {\n if (notice) notice.style.display = 'none';\n if (startBtn) startBtn.style.display = 'inline-flex';\n if (reviewBtn) reviewBtn.style.display = 'none';\n if (resetBtn) resetBtn.textContent = 'R\u00e9initialiser';\n }\n }\n\n function init() {\n const hasSaved = loadState();\n fillInputs();\n bindInputs();\n\n renderIntensityChips('intensityChips', 'intensityBefore');\n renderIntensityChips('intensityChipsAfter', 'intensityAfter');\n renderMultiGrid('signsGrid', 'signs', SIGNS_LIST);\n renderMultiGrid('triggersGrid', 'triggers', TRIGGERS_LIST);\n renderMultiGrid('protectsGrid', 'protects', PROTECTS_LIST);\n renderMultiGrid('strategiesGrid', 'strategies', STRATEGIES_LIST);\n renderNeedsChips();\n\n const printBtn = document.getElementById('printBtn');\n const downloadBtn = document.getElementById('downloadBtn');\n const restartBtn = document.getElementById('restartBtn');\n const reviewBtn = document.getElementById('reviewBtn');\n\n if (printBtn) {\n printBtn.addEventListener('click', function (e) {\n e.preventDefault();\n printSummary();\n });\n }\n if (downloadBtn) {\n downloadBtn.addEventListener('click', function (e) {\n e.preventDefault();\n downloadSummary();\n });\n }\n if (restartBtn) {\n restartBtn.addEventListener('click', function (e) {\n e.preventDefault();\n restart();\n });\n }\n if (reviewBtn) {\n reviewBtn.addEventListener('click', function (e) {\n e.preventDefault();\n showSummary();\n });\n }\n\n const startBtn = document.getElementById('startBtn');\n const resetBtn = document.getElementById('resetBtn');\n if (startBtn) {\n startBtn.addEventListener('click', function () {\n if (hasSaved && state.currentStep > 0 && state.currentStep <= TOTAL_STEPS) {\n goToStep(state.currentStep);\n } else {\n goToStep(1);\n }\n });\n }\n if (resetBtn) {\n resetBtn.addEventListener('click', restart);\n }\n\n document.querySelectorAll('[data-action]').forEach(btn => {\n btn.addEventListener('click', function () {\n const action = this.dataset.action;\n const target = this.dataset.target;\n if (action === 'intro') goToIntro();\n else if (action === 'step') goToStep(parseInt(target, 10));\n else if (action === 'summary') showSummary();\n });\n });\n\n if (state.completed) {\n updateIntroForCompleted();\n } else if (hasSaved && state.currentStep > 0 && state.currentStep <= TOTAL_STEPS && startBtn) {\n startBtn.textContent = 'Reprendre o\u00f9 j\\'en \u00e9tais \u2192';\n }\n\n console.log('\u2705 Outil \u00ab Apaiser la col\u00e8re \u00bb initialis\u00e9');\n }\n\n window.jirisColere = {\n state,\n goToStep,\n showSummary,\n printSummary,\n downloadSummary,\n restart\n };\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Apaiser la col\u00e8re Apaiser la col\u00e8re \u2014 Outil d’accompagnement JIRIS \ud83d\udd25 Apaiser la col\u00e8re Un outil d’accompagnement pour comprendre la col\u00e8re, l’\u00e9couter autrement, et l’exprimer sans se blesser ni blesser. Avant de commencer \u26a0\ufe0f Col\u00e8re n’est pas violence La col\u00e8re est une \u00e9motion humaine, l\u00e9gitime et parfois utile. La violence \u2014 verbale, physique, psychologique ou […]<\/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-3609","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3609","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=3609"}],"version-history":[{"count":4,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3609\/revisions"}],"predecessor-version":[{"id":3613,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3609\/revisions\/3613"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=3609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}