Faire face \u00e0 la discrimination \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(47, 143, 91, 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 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(--primary-soft), var(--accent-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 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 .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 .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 .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 .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 .control-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 8px;\n }\n\n .control-box {\n background: var(--surface-soft);\n border: 1.5px solid var(--divider);\n border-radius: var(--radius-sm);\n padding: 16px 18px;\n transition: all var(--transition);\n }\n\n .control-box: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 .control-box.facts {\n border-left: 4px solid var(--accent);\n }\n\n .control-box.fears {\n border-left: 4px solid var(--warm);\n }\n\n .control-box .control-header {\n font-size: 13.5px;\n font-weight: 700;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n line-height: 1.4;\n }\n\n .control-box.facts .control-header { color: var(--accent); }\n .control-box.fears .control-header { color: var(--warm); }\n\n .control-box .control-icon {\n font-size: 16px;\n line-height: 1;\n }\n\n .control-box textarea {\n min-height: 120px;\n font-size: 14.5px;\n padding: 12px 14px;\n border: 1px solid var(--divider);\n background: var(--surface);\n }\n\n .control-box .control-help {\n font-size: 12px;\n color: var(--muted);\n font-style: italic;\n margin-top: 8px;\n line-height: 1.5;\n }\n\n @media (max-width: 640px) {\n .control-grid {\n grid-template-columns: 1fr;\n }\n }\n\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 .multi-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 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 .info-callout {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n border-radius: 0 12px 12px 0;\n padding: 16px 20px;\n margin: 16px 0;\n font-size: 14px;\n color: var(--ink);\n line-height: 1.65;\n }\n\n .info-callout strong {\n color: var(--accent);\n font-weight: 700;\n }\n\n .info-emphasis {\n background: var(--primary-soft);\n border-left: 4px solid var(--primary);\n border-radius: 0 12px 12px 0;\n padding: 16px 20px;\n margin: 16px 0;\n font-size: 14px;\n color: var(--ink);\n line-height: 1.65;\n }\n\n .info-emphasis strong {\n color: var(--primary);\n font-weight: 700;\n }\n\n .safety-box {\n background: var(--danger-soft);\n border: 1.5px solid var(--danger-border);\n border-radius: var(--radius-sm);\n padding: 16px 20px;\n margin: 16px 0;\n font-size: 14px;\n color: #7F1D1D;\n line-height: 1.65;\n }\n\n .safety-box strong {\n color: var(--danger);\n font-weight: 700;\n }\n\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 .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-control-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n margin-top: 8px;\n }\n\n .summary-control-box {\n padding: 14px 16px;\n border-radius: 10px;\n border: 1px solid var(--divider);\n font-size: 14.5px;\n line-height: 1.65;\n }\n\n .summary-control-box.facts {\n background: var(--accent-soft);\n border-left: 4px solid var(--accent);\n }\n\n .summary-control-box.fears {\n background: var(--warm-soft);\n border-left: 4px solid var(--warm);\n }\n\n .summary-control-box .summary-control-label {\n font-weight: 700;\n font-size: 12.5px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 6px;\n display: block;\n }\n\n .summary-control-box.facts .summary-control-label { color: var(--accent); }\n .summary-control-box.fears .summary-control-label { color: #92400E; }\n\n @media (max-width: 640px) {\n .summary-control-grid {\n grid-template-columns: 1fr;\n }\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 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 @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\">\u2696\ufe0f<\/div>\n <h1>Faire face \u00e0 la discrimination<\/h1>\n <p class=\"subtitle\">Un outil d'accompagnement pour comprendre ce qu'on vit, nommer ses besoins et retrouver du pouvoir d'agir.<\/p>\n <\/header>\n\n \n <div class=\"intro-card\" id=\"introCard\">\n <h2>Avant de commencer<\/h2>\n\n <div class=\"warning-card\">\n <div class=\"warning-icon\">\u26a0\ufe0f<\/div>\n <div class=\"warning-content\">\n <h3>Ce que vous vivez est r\u00e9el \u2014 et la loi vous prot\u00e8ge<\/h3>\n <p>La discrimination est un <strong>traitement in\u00e9gal fond\u00e9 sur un motif prot\u00e9g\u00e9<\/strong> (origine, race, sexe, genre, religion, \u00e2ge, handicap, orientation sexuelle, \u00e9tat civil, etc.). Elle est interdite par la <strong>Charte des droits et libert\u00e9s de la personne du Qu\u00e9bec<\/strong> et par la <strong>Loi canadienne sur les droits de la personne<\/strong> dans de nombreux contextes.<\/p>\n <p>Cet outil <strong>ne remplace pas un accompagnement juridique ou un recours formel<\/strong>. Il vous aide \u00e0 mettre en ordre ce que vous vivez, distinguer les faits des ressentis, rep\u00e9rer vos droits, et identifier vos appuis. Pour un v\u00e9ritable recours, consultez un\u00b7e avocat\u00b7e, une clinique juridique, la <strong>Commission des droits de la personne et des droits de la jeunesse (CDPDJ)<\/strong> ou la <strong>Commission canadienne des droits de la personne<\/strong>.<\/p>\n <p>Si vous vivez une situation de <strong>violence, de harc\u00e8lement grave ou de menace<\/strong> : <strong>911<\/strong> en cas d'urgence, <strong>811<\/strong> (Info-Social, 24\/7, Qu\u00e9bec), <strong>988<\/strong> (pr\u00e9vention du suicide, 24\/7, Canada).<\/p>\n <\/div>\n <\/div>\n\n <p>Vivre de la discrimination, ce n'est pas seulement un \u00e9v\u00e9nement isol\u00e9. C'est souvent une <strong>r\u00e9p\u00e9tition<\/strong> \u2014 un regard, une parole, un refus, une exclusion \u2014 qui s'accumule et finit par peser sur l'estime de soi, la sant\u00e9, le sentiment d'appartenance. Ce n'est ni de l'hypersensibilit\u00e9, ni une invention.<\/p>\n <p>Cet outil vous propose de <strong>nommer la situation, explorer ce qu'elle touche en vous, distinguer les faits des interpr\u00e9tations, reconna\u00eetre vos besoins et vos droits, rep\u00e9rer les ressources et recours possibles, et poser un premier pas concret vers du pouvoir d'agir<\/strong>. Que ce pas soit juridique, collectif, ou personnel \u2014 c'est vous qui d\u00e9cidez.<\/p>\n <p><strong>Vous n'avez pas \u00e0 prouver votre exp\u00e9rience \u00e0 qui que ce soit ici.<\/strong> Vous n'avez pas non plus \u00e0 d\u00e9cider aujourd'hui si vous voulez porter plainte. Le seul objectif est de vous redonner un peu de marge de man\u0153uvre.<\/p>\n <div class=\"intro-note\">\n <strong>\u23f1\ufe0f Dur\u00e9e estim\u00e9e :<\/strong> 20 \u00e0 30 minutes. Prenez le temps qu'il vous faut. Vos r\u00e9ponses sont enregistr\u00e9es automatiquement dans votre navigateur et restent confidentielles.\n <\/div>\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 relire, l'imprimer, ou la partager avec une personne de confiance ou un\u00b7e professionnel\u00b7le.<\/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 en douceur \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 Nommer<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83d\udcdd<\/span> La situation telle que je la vis<\/h2>\n <p class=\"step-hint\">Commen\u00e7ons par poser les choses \u2014 sans avoir \u00e0 tout raconter en d\u00e9tail, sans avoir \u00e0 justifier. Juste pour reconna\u00eetre ce que vous traversez, dans vos mots.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n De quel type de discrimination s'agit-il (ou s'est-il agi) ?\n <span class=\"field-example\">Cochez ce qui correspond, m\u00eame partiellement.<\/span>\n <\/label>\n <div class=\"chips-row\" id=\"typeChips\"><\/div>\n <div class=\"helper-text\">Vous pouvez ne cocher aucune case. C'est un droit.<\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"context\">\n Dans quel contexte cela s'est-il produit ?\n <span class=\"field-example\">Ex. : \u00ab Au travail \u00bb, \u00ab \u00c0 l'\u00e9cole \u00bb, \u00ab Dans un logement \u00bb, \u00ab Dans un service public \u00bb, \u00ab Dans un commerce \u00bb, \u00ab En ligne \u00bb, \u00ab Dans la rue \u00bb, \u00ab Dans ma famille \u00bb, \u00ab Dans une d\u00e9marche administrative \u00bb.<\/span>\n <\/label>\n <textarea id=\"context\" placeholder=\"Le contexte\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"when\">\n Quand cela s'est-il produit (approximativement) ?\n <span class=\"field-example\">Ex. : \u00ab Hier \u00bb, \u00ab Il y a 3 semaines \u00bb, \u00ab \u00c7a dure depuis des mois \u00bb, \u00ab \u00c0 plusieurs reprises \u00bb, \u00ab Une fois, r\u00e9cemment \u00bb.<\/span>\n <\/label>\n <input type=\"text\" id=\"when\" placeholder=\"Quand\u2026\">\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Est-ce un \u00e9v\u00e9nement isol\u00e9, ou une r\u00e9p\u00e9tition ?\n <span class=\"field-example\">Cette distinction peut avoir son importance pour un recours \u00e9ventuel.<\/span>\n <\/label>\n <div class=\"chips-row\" id=\"repetitionChips\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">Sur une \u00e9chelle de 0 \u00e0 10, quelle est la charge que cela repr\u00e9sente pour vous en ce moment ?<\/label>\n <div class=\"chips-row\" id=\"loadChips\"><\/div>\n <div class=\"helper-text\">0 = tr\u00e8s l\u00e9g\u00e8re \u00b7 10 = tr\u00e8s lourde. Aucun 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\udf0a<\/span> Ce que \u00e7a touche<\/h2>\n <p class=\"step-hint\">La discrimination ne fait pas que blesser sur le moment : elle touche l'estime de soi, le sentiment d'appartenance, la s\u00e9curit\u00e9. Reconna\u00eetre ces impacts, c'est d\u00e9j\u00e0 reprendre un peu de pouvoir.<\/p>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Qu'est-ce que cette situation a touch\u00e9 chez vous ?\n <span class=\"field-example\">Cochez tout ce qui r\u00e9sonne, m\u00eame partiellement.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"impactGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"emotions\">\n Quelles \u00e9motions cela a-t-il fait monter ?\n <span class=\"field-example\">Ex. : \u00ab Col\u00e8re \u00bb, \u00ab Tristesse \u00bb, \u00ab Honte \u00bb, \u00ab Peur \u00bb, \u00ab Sentiment d'injustice \u00bb, \u00ab \u00c9puisement \u00bb, \u00ab D\u00e9couragement \u00bb, \u00ab Sentiment d'\u00eatre seul\u00b7e \u00bb.<\/span>\n <\/label>\n <textarea id=\"emotions\" placeholder=\"Ce que je ressens\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"bodyReaction\">\n Comment votre corps a-t-il r\u00e9agi ?\n <span class=\"field-example\">Ex. : gorge serr\u00e9e, ventre nou\u00e9, tremblement, chaleur, sid\u00e9ration, envie de pleurer, difficult\u00e9 \u00e0 respirer, maux de t\u00eate.<\/span>\n <\/label>\n <textarea id=\"bodyReaction\" placeholder=\"Dans mon corps\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"dailyImpact\">\n Comment cela affecte-t-il votre vie <strong>aujourd'hui<\/strong> \u2014 au quotidien ?\n <span class=\"field-example\">Ex. : \u00ab J'\u00e9vite cet endroit \u00bb, \u00ab Je dors mal \u00bb, \u00ab Je me m\u00e9fie de tout le monde \u00bb, \u00ab Je remets en question ma place \u00bb, \u00ab J'ai du mal \u00e0 me concentrer \u00bb.<\/span>\n <\/label>\n <textarea id=\"dailyImpact\" placeholder=\"Au quotidien\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"safety-box\">\n <strong>\ud83d\uded1 Si la d\u00e9tresse est forte<\/strong><br>\n La discrimination r\u00e9p\u00e9t\u00e9e peut mener \u00e0 un \u00e9puisement profond, voire \u00e0 des id\u00e9es noires. Ce n'est pas un signe de faiblesse, c'est une r\u00e9ponse \u00e0 une accumulation. Parlez-en : <strong>811<\/strong> (Info-Social), <strong>988<\/strong> (pr\u00e9vention du suicide), ou votre m\u00e9decin.\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 Distinguer<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83d\udd0d<\/span> Faits et interpr\u00e9tations<\/h2>\n <p class=\"step-hint\">La discrimination est souvent d\u00e9lib\u00e9r\u00e9ment rendue ambigu\u00eb \u2014 \u00ab ce n'est pas ce que j'ai voulu dire \u00bb, \u00ab tu exag\u00e8res \u00bb, \u00ab c'est ton interpr\u00e9tation \u00bb. Distinguer les faits des ressentis aide \u00e0 sortir du doute qu'on cherche \u00e0 installer.<\/p>\n\n <div class=\"info-callout\">\n <strong>\ud83d\udca1 Pourquoi c'est utile<\/strong><br>\n Un recours ou une d\u00e9marche repose sur des <strong>faits observables<\/strong> : ce qui a \u00e9t\u00e9 dit, \u00e9crit, fait, quand, par qui, devant qui. Vos ressentis sont r\u00e9els et importants, mais ce ne sont pas eux qui p\u00e8seront dans un cadre juridique. Les distinguer n'invalide rien \u2014 cela clarifie.\n <\/div>\n\n <div class=\"control-grid\">\n <div class=\"control-box facts\">\n <div class=\"control-header\">\n <span class=\"control-icon\">\u2705<\/span>\n <span>Ce que je sais (faits)<\/span>\n <\/div>\n <textarea id=\"facts\" placeholder=\"Ce qui a \u00e9t\u00e9 dit mot pour mot, ce qui a \u00e9t\u00e9 fait, quand, o\u00f9, devant qui, ce qui est \u00e9crit, ce qui est document\u00e9\u2026\"><\/textarea>\n <div class=\"control-help\">Observable, v\u00e9rifiable, reproductible.<\/div>\n <\/div>\n\n <div class=\"control-box fears\">\n <div class=\"control-header\">\n <span class=\"control-icon\">\ud83d\udcad<\/span>\n <span>Ce que j'en ai compris (interpr\u00e9tations)<\/span>\n <\/div>\n <textarea id=\"interpretations\" placeholder=\"Ex. : \u00ab On a voulu me rabaisser \u00bb, \u00ab On me consid\u00e8re comme inf\u00e9rieur\u00b7e \u00bb, \u00ab On me refuse \u00e0 cause de qui je suis \u00bb, \u00ab Je ne suis pas \u00e0 ma place \u00bb\u2026\"><\/textarea>\n <div class=\"control-help\">Ce que je pense que \u00e7a signifie \u2014 souvent juste, mais pas encore prouv\u00e9.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"field-group\" style=\"margin-top: 18px;\">\n <label class=\"field-label\" for=\"evidence\">\n Y a-t-il des <strong>\u00e9l\u00e9ments concrets<\/strong> que vous pourriez rassembler ?\n <span class=\"field-example\">Ex. : \u00ab Des courriels \u00bb, \u00ab Des captures d'\u00e9cran \u00bb, \u00ab Des notes personnelles avec dates \u00bb, \u00ab Le nom de t\u00e9moins \u00bb, \u00ab Des documents administratifs \u00bb, \u00ab Un dossier m\u00e9dical si impact sur la sant\u00e9 \u00bb.<\/span>\n <\/label>\n <textarea id=\"evidence\" placeholder=\"Ce que je pourrais rassembler\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"motif\">\n Savez-vous sur quel <strong>motif prot\u00e9g\u00e9<\/strong> la discrimination pourrait reposer ?\n <span class=\"field-example\">La Charte des droits et libert\u00e9s de la personne du Qu\u00e9bec \u00e9num\u00e8re 14 motifs pr\u00e9cis : race, couleur, sexe, identit\u00e9 ou expression de genre, orientation sexuelle, \u00e9tat civil, \u00e2ge (sauf dans la mesure pr\u00e9vue par la loi), religion, convictions politiques, langue, origine ethnique ou nationale, condition sociale, handicap ou moyen d'y pallier, grossesse.<\/span>\n <\/label>\n <textarea id=\"motif\" placeholder=\"Le motif possible\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\udf3f<\/span> Mes besoins et mes droits<\/h2>\n <p class=\"step-hint\">Faire face \u00e0 la discrimination, c'est aussi r\u00e9clamer une place. Cette \u00e9tape vous aide \u00e0 nommer ce dont vous avez besoin, et \u00e0 reconna\u00eetre que certains de ces besoins sont en fait des droits.<\/p>\n\n <div class=\"info-emphasis\">\n <strong>\ud83d\udd11 Ce que la loi pr\u00e9voit<\/strong><br>\n Au Qu\u00e9bec et au Canada, la discrimination est interdite dans plusieurs domaines : <strong>emploi<\/strong>, <strong>logement<\/strong>, <strong>services publics<\/strong>, <strong>biens et services offerts au public<\/strong>, <strong>transport<\/strong>, <strong>\u00e9ducation<\/strong>. Il existe des <strong>d\u00e9lais<\/strong> pour porter plainte (souvent 2 ans au Qu\u00e9bec aupr\u00e8s de la CDPDJ) : il est utile de v\u00e9rifier rapidement aupr\u00e8s d'un\u00b7e professionnel\u00b7le.\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n De quoi auriez-vous besoin <strong>maintenant<\/strong> ?\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 Ces besoins, formul\u00e9s plus pr\u00e9cis\u00e9ment :\n <\/label>\n <textarea id=\"needText\" placeholder=\"J'aurais besoin de\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"rights\">\n Quels <strong>droits<\/strong> vous semblent en jeu, ou importants \u00e0 faire respecter ?\n <span class=\"field-example\">Ex. : \u00ab \u00catre trait\u00e9\u00b7e avec dignit\u00e9 \u00bb, \u00ab Ne pas \u00eatre \u00e9cart\u00e9\u00b7e pour un motif interdit \u00bb, \u00ab \u00catre prot\u00e9g\u00e9\u00b7e au travail \u00bb, \u00ab Avoir un recours effectif \u00bb, \u00ab Obtenir r\u00e9paration \u00bb, \u00ab Que cela ne se reproduise plus \u00bb.<\/span>\n <\/label>\n <textarea id=\"rights\" placeholder=\"Les droits en jeu\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"whatIWant\">\n Qu'est-ce que vous aimeriez, <strong>au fond<\/strong>, obtenir ?\n <span class=\"field-example\">Ex. : \u00ab Que ce soit reconnu \u00bb, \u00ab Des excuses \u00bb, \u00ab Une r\u00e9paration \u00bb, \u00ab Que la personne cesse \u00bb, \u00ab Un changement dans le milieu \u00bb, \u00ab Tourner la page \u00bb, \u00ab Que d'autres ne vivent pas \u00e7a \u00bb.<\/span>\n <\/label>\n <textarea id=\"whatIWant\" placeholder=\"Ce que je voudrais obtenir\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"selfPreservation\">\n De quoi avez-vous besoin <strong>pour vous prot\u00e9ger<\/strong>, dans cette d\u00e9marche ?\n <span class=\"field-example\">Ex. : \u00ab Ne pas en parler \u00e0 tout le monde \u00bb, \u00ab Choisir mes moments pour agir \u00bb, \u00ab Ne pas m'\u00e9puiser \u00bb, \u00ab \u00catre entour\u00e9\u00b7e \u00bb, \u00ab Prendre du recul \u00bb, \u00ab Me rappeler que je ne suis pas le probl\u00e8me \u00bb.<\/span>\n <\/label>\n <textarea id=\"selfPreservation\" placeholder=\"Pour me prot\u00e9ger\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 Ressources<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83e\udd1d<\/span> Ressources et appuis<\/h2>\n <p class=\"step-hint\">Faire face \u00e0 la discrimination est \u00e9puisant si on le fait seul\u00b7e. Il existe des ressources sp\u00e9cialis\u00e9es \u2014 juridiques, communautaires, syndicales, psychologiques \u2014 pour vous accompagner.<\/p>\n\n <div class=\"info-callout\">\n <strong>\ud83d\udca1 Plusieurs voies existent<\/strong><br>\n Selon votre situation : <strong>plainte \u00e0 la CDPDJ<\/strong>, <strong>plainte \u00e0 la Commission canadienne des droits de la personne<\/strong>, <strong>recours au Tribunal des droits de la personne<\/strong>, <strong>grief syndical<\/strong>, <strong>plainte \u00e0 la CNESST<\/strong> (harc\u00e8lement), <strong>plainte au Protecteur du citoyen<\/strong>, <strong>d\u00e9marche aupr\u00e8s d'un organisme communautaire<\/strong>, <strong>plainte interne \u00e0 l'organisation<\/strong>, <strong>soutien d'un\u00b7e avocat\u00b7e ou d'une clinique juridique<\/strong>. Ces voies ne s'excluent pas forc\u00e9ment.\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Parmi ces ressources, lesquelles pourraient vous \u00eatre utiles ?\n <span class=\"field-example\">Cochez ce qui est r\u00e9aliste pour votre situation.<\/span>\n <\/label>\n <div class=\"multi-grid\" id=\"resourcesGrid\"><\/div>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"chosenResources\">\n Lesquelles aimeriez-vous explorer en priorit\u00e9 ?\n <\/label>\n <textarea id=\"chosenResources\" placeholder=\"En priorit\u00e9, je voudrais\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"personalSupport\">\n Sur qui pouvez-vous compter, dans votre entourage actuel ?\n <span class=\"field-example\">Ex. : \u00ab Un proche \u00bb, \u00ab Un\u00b7e ami\u00b7e \u00bb, \u00ab Un\u00b7e coll\u00e8gue \u00bb, \u00ab Un\u00b7e intervenant\u00b7e \u00bb, \u00ab Une communaut\u00e9 \u00bb, \u00ab Personne pour l'instant \u00bb (c'est aussi une r\u00e9ponse).<\/span>\n <\/label>\n <textarea id=\"personalSupport\" placeholder=\"Sur qui je peux compter\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"obstacles\">\n Y a-t-il des obstacles concrets \u00e0 ces d\u00e9marches ?\n <span class=\"field-example\">Ex. : \u00ab Peur des repr\u00e9sailles \u00bb, \u00ab Peur de perdre mon emploi \u00bb, \u00ab D\u00e9lais \u00bb, \u00ab Lourdeur administrative \u00bb, \u00ab Co\u00fbt \u00bb, \u00ab Peur de ne pas \u00eatre cru\u00b7e \u00bb, \u00ab Fatigue \u00bb, \u00ab Isolement \u00bb.<\/span>\n <\/label>\n <textarea id=\"obstacles\" placeholder=\"Ce qui pourrait me freiner\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"safety-box\">\n <strong>\ud83d\uded1 Sur les d\u00e9lais<\/strong><br>\n Les recours ont souvent des <strong>d\u00e9lais stricts<\/strong>. Si vous envisagez un recours formel, il est recommand\u00e9 de <strong>v\u00e9rifier rapidement<\/strong> aupr\u00e8s d'une clinique juridique, de la CDPDJ, ou d'un\u00b7e avocat\u00b7e \u2014 m\u00eame si vous n'\u00eates pas encore d\u00e9cid\u00e9\u00b7e. Ne pas d\u00e9cider maintenant n'emp\u00eache pas de vous informer maintenant.\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 Agir<\/span>\n <h2 class=\"step-title\"><span class=\"step-emoji\">\ud83d\udc63<\/span> Premier pas de pouvoir d'agir<\/h2>\n <p class=\"step-hint\">Pas besoin de tout d\u00e9cider aujourd'hui. Un tout petit geste concret \u2014 m\u00eame s'il ne change rien \u00e0 la situation imm\u00e9diate \u2014 vous remet en mouvement. Et le mouvement, c'est d\u00e9j\u00e0 un pouvoir.<\/p>\n\n <div class=\"info-emphasis\">\n <strong>\ud83d\udca1 La r\u00e8gle du pas protecteur<\/strong><br>\n Choisissez un geste <strong>petit, concret, et sans risque de repr\u00e9sailles<\/strong>. Ex. : \u00ab \u00c9crire ce qui s'est pass\u00e9 avec des dates \u00bb, \u00ab Prendre un rendez-vous d'information gratuit \u00bb, \u00ab En parler \u00e0 une personne de confiance \u00bb, \u00ab Appeler un service d'\u00e9coute \u00bb, \u00ab Consulter le site de la CDPDJ \u00bb, \u00ab M'informer sur les d\u00e9lais \u00bb. Un pas vers la clart\u00e9, pas n\u00e9cessairement vers le conflit.\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"firstStep\">\n Quel serait votre premier pas ?\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 pourriez-vous 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. : cette semaine, dans les 3 prochains jours, d\u00e8s que j'aurai un moment calme\u2026\">\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"supportStep\">\n De qui ou de quoi auriez-vous besoin pour vous y tenir ?\n <span class=\"field-example\">Optionnel \u2014 mais souvent utile.<\/span>\n <\/label>\n <textarea id=\"supportStep\" placeholder=\"Pour m'aider \u00e0 faire ce premier pas, je pourrais\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\" for=\"ifHard\">\n Comment prendrez-vous soin de vous, si c'est difficile ou si la d\u00e9marche s'\u00e9tire ?\n <span class=\"field-example\">Ex. : \u00ab Je me rappellerai que ce n'est pas \u00e0 moi de porter la honte \u00bb, \u00ab Je demanderai de l'aide \u00bb, \u00ab Je m'autoriserai des pauses \u00bb, \u00ab Je reviendrai \u00e0 l'essentiel : ma dignit\u00e9 \u00bb.<\/span>\n <\/label>\n <textarea id=\"ifHard\" placeholder=\"Si c'est difficile, je\u2026\"><\/textarea>\n <\/div>\n\n <div class=\"field-group\">\n <label class=\"field-label\">\n Apr\u00e8s ce travail, quelle est la charge ressentie <em>maintenant<\/em> ?\n <\/label>\n <div class=\"chips-row\" id=\"loadChipsAfter\"><\/div>\n <div class=\"helper-text\">Aucun jugement. Observez simplement, 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 \u2696\ufe0f<\/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 en ordre. Ce document vous appartient \u2014 vous pouvez le relire, l'imprimer, ou l'apporter \u00e0 un rendez-vous avec une clinique juridique, la CDPDJ, un\u00b7e intervenant\u00b7e ou 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>Commission des droits de la personne et des droits de la jeunesse (CDPDJ)<\/strong> \u2014 cdpdj.qc.ca \u2014 Pour les situations relevant du Qu\u00e9bec<br>\n \u2022 <strong>Commission canadienne des droits de la personne<\/strong> \u2014 Pour les domaines de comp\u00e9tence f\u00e9d\u00e9rale<br>\n \u2022 <strong>Clinique juridique<\/strong> \u2014 Souvent gratuite ou \u00e0 faible co\u00fbt<br>\n \u2022 <strong>CNESST<\/strong> \u2014 Pour le harc\u00e8lement et la discrimination au travail (Qu\u00e9bec)<br>\n \u2022 <strong>Votre syndicat<\/strong> \u2014 Si vous \u00eates syndiqu\u00e9\u00b7e, il peut vous accompagner<br>\n \u2022 <strong>Protecteur du citoyen<\/strong> \u2014 Pour les services publics<br>\n \u2022 <strong>811 (Info-Social)<\/strong> \u2014 Soutien psychosocial 24\/7 (Qu\u00e9bec)<br>\n \u2022 <strong>988<\/strong> \u2014 Pr\u00e9vention du suicide (24\/7, Canada)<br>\n \u2022 <strong>911<\/strong> \u2014 En cas d'urgence<br>\n \u2022 <strong>Organismes communautaires<\/strong> \u2014 Sp\u00e9cifiques \u00e0 votre situation (racisme, LGBTQ+, handicap, femmes, immigration, etc.)\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>\u2696\ufe0f <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 constitue pas un avis juridique 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-discrimination-outil';\n const TOTAL_STEPS = 6;\n\n const state = {\n currentStep: 0,\n type: [],\n context: '',\n when: '',\n repetition: '',\n loadBefore: null,\n impact: [],\n emotions: '',\n bodyReaction: '',\n dailyImpact: '',\n facts: '',\n interpretations: '',\n evidence: '',\n motif: '',\n needs: [],\n needText: '',\n rights: '',\n whatIWant: '',\n selfPreservation: '',\n resources: [],\n chosenResources: '',\n personalSupport: '',\n obstacles: '',\n firstStep: '',\n whenStep: '',\n supportStep: '',\n ifHard: '',\n loadAfter: null,\n completed: false\n };\n\n const LOAD_LEVELS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\n const TYPE_LIST = [\n 'Origine ethnique ou nationale',\n 'Race, couleur de peau',\n 'Sexe, genre',\n 'Identit\u00e9 ou expression de genre',\n 'Orientation sexuelle',\n '\u00c2ge',\n 'Handicap, sant\u00e9',\n 'Religion, convictions',\n '\u00c9tat civil, situation familiale',\n 'Grossesse',\n 'Condition sociale, pauvret\u00e9',\n 'Langue, accent',\n 'Statut d\\'immigration',\n 'Autre motif prot\u00e9g\u00e9'\n ];\n\n const REPETITION_LIST = [\n 'Un \u00e9v\u00e9nement isol\u00e9, r\u00e9cent',\n 'Un \u00e9v\u00e9nement isol\u00e9, plus ancien',\n 'Des \u00e9pisodes r\u00e9p\u00e9t\u00e9s, r\u00e9cents',\n 'Une situation qui dure depuis longtemps',\n 'Un climat, plus qu\\'un \u00e9v\u00e9nement',\n 'Plusieurs contextes \u00e0 la fois',\n 'Je ne sais pas encore comment le nommer'\n ];\n\n const IMPACT_LIST = [\n 'Mon estime de moi',\n 'Mon sentiment de s\u00e9curit\u00e9',\n 'Mon sentiment d\\'appartenance',\n 'Ma confiance dans les autres',\n 'Ma confiance dans les institutions',\n 'Ma sant\u00e9 mentale',\n 'Ma sant\u00e9 physique',\n 'Mon sommeil',\n 'Mon travail, mes \u00e9tudes',\n 'Mes relations',\n 'Ma capacit\u00e9 \u00e0 me d\u00e9fendre',\n 'Mon image de moi',\n 'Mon rapport \u00e0 ma culture, \u00e0 mon identit\u00e9',\n 'Ma capacit\u00e9 \u00e0 me projeter dans l\\'avenir',\n 'Mon \u00e9nergie au quotidien',\n 'Mon sentiment d\\'\u00eatre l\u00e9gitime'\n ];\n\n const NEEDS_LIST = [\n '\u00catre cru\u00b7e',\n '\u00catre entendu\u00b7e sans avoir \u00e0 me justifier',\n '\u00catre respect\u00e9\u00b7e',\n 'Me sentir en s\u00e9curit\u00e9',\n 'Comprendre mes droits',\n 'Un accompagnement juridique',\n 'Un soutien psychologique',\n '\u00catre entour\u00e9\u00b7e, ne pas rester seul\u00b7e',\n 'Que ce soit reconnu',\n 'Que cela cesse',\n 'Une r\u00e9paration, si possible',\n 'Tourner la page',\n 'De la solidarit\u00e9, un collectif',\n 'Un espace pour me reposer',\n 'Retrouver confiance en moi',\n 'Me rappeler que je ne suis pas le probl\u00e8me'\n ];\n\n const RESOURCES_LIST = [\n 'Commission des droits de la personne (CDPDJ)',\n 'Commission canadienne des droits de la personne',\n 'Clinique juridique ou service d\\'aide juridique',\n 'CNESST (travail, harc\u00e8lement)',\n 'Mon syndicat, si j\\'en ai un',\n 'Protecteur du citoyen (services publics)',\n 'Organisme communautaire sp\u00e9cialis\u00e9',\n 'Association de d\u00e9fense de droits',\n 'Psychologue ou travailleur\u00b7se social\u00b7e',\n 'Programme d\\'aide aux employ\u00e9s (PAE)',\n 'Ligne d\\'\u00e9coute (811, 988, lignes locales)',\n 'Groupe de soutien de pairs',\n 'Un\u00b7e avocat\u00b7e',\n 'Un\u00b7e intervenant\u00b7e dans un organisme d\\'accueil'\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 renderLoadChips(containerId, keyName) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n LOAD_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 renderChipsRow(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 = '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 renderSingleChipRow(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 = 'chip';\n btn.textContent = item;\n if (state[keyName] === item) btn.classList.add('selected');\n btn.addEventListener('click', () => {\n if (state[keyName] === item) {\n state[keyName] = '';\n btn.classList.remove('selected');\n } else {\n state[keyName] = item;\n container.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));\n btn.classList.add('selected');\n }\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 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('context', 'context');\n bind('when', 'when');\n bind('emotions', 'emotions');\n bind('bodyReaction', 'bodyReaction');\n bind('dailyImpact', 'dailyImpact');\n bind('facts', 'facts');\n bind('interpretations', 'interpretations');\n bind('evidence', 'evidence');\n bind('motif', 'motif');\n bind('needText', 'needText');\n bind('rights', 'rights');\n bind('whatIWant', 'whatIWant');\n bind('selfPreservation', 'selfPreservation');\n bind('chosenResources', 'chosenResources');\n bind('personalSupport', 'personalSupport');\n bind('obstacles', 'obstacles');\n bind('firstStep', 'firstStep');\n bind('whenStep', 'whenStep');\n bind('supportStep', 'supportStep');\n bind('ifHard', 'ifHard');\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('context', state.context);\n fill('when', state.when);\n fill('emotions', state.emotions);\n fill('bodyReaction', state.bodyReaction);\n fill('dailyImpact', state.dailyImpact);\n fill('facts', state.facts);\n fill('interpretations', state.interpretations);\n fill('evidence', state.evidence);\n fill('motif', state.motif);\n fill('needText', state.needText);\n fill('rights', state.rights);\n fill('whatIWant', state.whatIWant);\n fill('selfPreservation', state.selfPreservation);\n fill('chosenResources', state.chosenResources);\n fill('personalSupport', state.personalSupport);\n fill('obstacles', state.obstacles);\n fill('firstStep', state.firstStep);\n fill('whenStep', state.whenStep);\n fill('supportStep', state.supportStep);\n fill('ifHard', state.ifHard);\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.type.length > 0 || state.context || state.when || state.repetition || state.loadBefore !== null) {\n let inner = '';\n if (state.type.length > 0) {\n inner += '<p><strong>Motifs possibles :<\/strong><\/p>';\n inner += '<ul>' + state.type.map(t => '<li>' + escapeHtml(t) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.context) inner += '<p style=\"margin-top: 12px;\"><strong>Contexte :<\/strong><br>' + escapeHtml(state.context) + '<\/p>';\n if (state.when) inner += '<p style=\"margin-top: 10px;\"><strong>Quand :<\/strong> ' + escapeHtml(state.when) + '<\/p>';\n if (state.repetition) inner += '<p style=\"margin-top: 10px;\"><strong>R\u00e9p\u00e9tition :<\/strong> ' + escapeHtml(state.repetition) + '<\/p>';\n if (state.loadBefore !== null) inner += '<p style=\"margin-top: 10px; font-size: 14px; color: var(--muted);\">Charge ressentie au d\u00e9part : <strong style=\"color: var(--primary);\">' + state.loadBefore + '\/10<\/strong><\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udcdd La situation<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.impact.length > 0 || state.emotions || state.bodyReaction || state.dailyImpact) {\n let inner = '';\n if (state.impact.length > 0) {\n inner += '<p><strong>Ce qui est touch\u00e9 :<\/strong><\/p>';\n inner += '<ul>' + state.impact.map(i => '<li>' + escapeHtml(i) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.emotions) inner += '<p style=\"margin-top: 12px;\"><strong>\u00c9motions :<\/strong><br>' + escapeHtml(state.emotions) + '<\/p>';\n if (state.bodyReaction) inner += '<p style=\"margin-top: 10px;\"><strong>Dans mon corps :<\/strong><br>' + escapeHtml(state.bodyReaction) + '<\/p>';\n if (state.dailyImpact) inner += '<p style=\"margin-top: 10px;\"><strong>Au quotidien :<\/strong><br>' + escapeHtml(state.dailyImpact) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udf0a Ce que \u00e7a touche<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.facts || state.interpretations || state.evidence || state.motif) {\n let inner = '<div class=\"summary-control-grid\">';\n if (state.facts) {\n inner += '<div class=\"summary-control-box facts\">' +\n '<span class=\"summary-control-label\">\u2705 Faits<\/span>' +\n escapeHtml(state.facts) +\n '<\/div>';\n }\n if (state.interpretations) {\n inner += '<div class=\"summary-control-box fears\">' +\n '<span class=\"summary-control-label\">\ud83d\udcad Interpr\u00e9tations<\/span>' +\n escapeHtml(state.interpretations) +\n '<\/div>';\n }\n inner += '<\/div>';\n if (state.evidence) {\n inner += '<p style=\"margin-top: 14px;\"><strong>\u00c9l\u00e9ments \u00e0 rassembler :<\/strong><br>' + escapeHtml(state.evidence) + '<\/p>';\n }\n if (state.motif) {\n inner += '<p style=\"margin-top: 10px;\"><strong>Motif prot\u00e9g\u00e9 possible :<\/strong><br>' + escapeHtml(state.motif) + '<\/p>';\n }\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udd0d Faits et interpr\u00e9tations<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.needs.length > 0 || state.needText || state.rights || state.whatIWant || state.selfPreservation) {\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) inner += '<p style=\"margin-top: 10px;\">' + escapeHtml(state.needText) + '<\/p>';\n if (state.rights) inner += '<p style=\"margin-top: 12px;\"><strong>Droits en jeu :<\/strong><br>' + escapeHtml(state.rights) + '<\/p>';\n if (state.whatIWant) inner += '<p style=\"margin-top: 10px;\"><strong>Ce que je voudrais obtenir :<\/strong><br>' + escapeHtml(state.whatIWant) + '<\/p>';\n if (state.selfPreservation) inner += '<p style=\"margin-top: 10px;\"><strong>Pour me prot\u00e9ger :<\/strong><br>' + escapeHtml(state.selfPreservation) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83c\udf3f Mes besoins et mes droits<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.resources.length > 0 || state.chosenResources || state.personalSupport || state.obstacles) {\n let inner = '';\n if (state.resources.length > 0) {\n inner += '<p><strong>Ressources envisag\u00e9es :<\/strong><\/p>';\n inner += '<ul>' + state.resources.map(r => '<li>' + escapeHtml(r) + '<\/li>').join('') + '<\/ul>';\n }\n if (state.chosenResources) inner += '<p style=\"margin-top: 12px;\"><strong>\u00c0 explorer en priorit\u00e9 :<\/strong><br>' + escapeHtml(state.chosenResources) + '<\/p>';\n if (state.personalSupport) inner += '<p style=\"margin-top: 10px;\"><strong>Sur qui je peux compter :<\/strong><br>' + escapeHtml(state.personalSupport) + '<\/p>';\n if (state.obstacles) inner += '<p style=\"margin-top: 10px;\"><strong>Obstacles possibles :<\/strong><br>' + escapeHtml(state.obstacles) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83e\udd1d Ressources et appuis<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.firstStep || state.whenStep || state.supportStep || state.ifHard) {\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 if (state.ifHard) inner += '<p style=\"margin-top: 10px;\"><strong>Si c\\'est difficile :<\/strong><br>' + escapeHtml(state.ifHard) + '<\/p>';\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udc63 Premier pas de pouvoir d\\'agir<\/h3>' +\n inner +\n '<\/div>'\n );\n }\n\n if (state.loadBefore !== null && state.loadAfter !== null) {\n const diff = state.loadBefore - state.loadAfter;\n let evoText = '';\n if (diff > 0) evoText = 'La charge ressentie a <strong style=\"color: var(--accent);\">diminu\u00e9 de ' + diff + ' point' + (diff > 1 ? 's' : '') + '<\/strong> apr\u00e8s ce travail. C\\'est pr\u00e9cieux \u00e0 noter.';\n else if (diff === 0) evoText = 'La charge est rest\u00e9e <strong>stable<\/strong>. Prendre ce temps compte d\u00e9j\u00e0.';\n else evoText = 'La charge a <strong>augment\u00e9<\/strong> de ' + Math.abs(diff) + ' point' + (Math.abs(diff) > 1 ? 's' : '') + '. Regarder une situation de discrimination peut raviver temporairement la tension \u2014 c\\'est humain. Prenez soin de vous, doucement.';\n\n blocks.push(\n '<div class=\"summary-block\">' +\n '<h3>\ud83d\udcca \u00c9volution de la charge ressentie<\/h3>' +\n '<p>Avant : <strong>' + state.loadBefore + '\/10<\/strong> \u00b7 Apr\u00e8s : <strong>' + state.loadAfter + '\/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 = '\u2696\ufe0f FAIRE FACE \u00c0 LA DISCRIMINATION\\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\\n';\n t += 'Cet outil ne constitue pas un avis juridique et ne remplace pas un accompagnement professionnel.\\n';\n t += 'La discrimination est interdite par la Charte des droits et libert\u00e9s du Qu\u00e9bec et la Loi canadienne sur les droits de la personne.\\n';\n t += 'Ressources : CDPDJ \u00b7 Commission canadienne des droits de la personne \u00b7 clinique juridique\\n';\n t += 'Soutien : 811 Info-Social \u00b7 988 pr\u00e9vention du suicide \u00b7 911 en urgence\\n\\n';\n\n if (state.type.length > 0 || state.context || state.when || state.repetition || state.loadBefore !== null) {\n t += '\ud83d\udcdd LA SITUATION\\n';\n if (state.type.length > 0) t += 'Motifs possibles : ' + state.type.join(', ') + '\\n';\n if (state.context) t += 'Contexte : ' + state.context + '\\n';\n if (state.when) t += 'Quand : ' + state.when + '\\n';\n if (state.repetition) t += 'R\u00e9p\u00e9tition : ' + state.repetition + '\\n';\n if (state.loadBefore !== null) t += 'Charge ressentie : ' + state.loadBefore + '\/10\\n';\n t += '\\n';\n }\n\n if (state.impact.length > 0 || state.emotions || state.bodyReaction || state.dailyImpact) {\n t += '\ud83c\udf0a CE QUE \u00c7A TOUCHE\\n';\n state.impact.forEach((i, idx) => t += (idx + 1) + '. ' + i + '\\n');\n if (state.emotions) t += '\u00c9motions : ' + state.emotions + '\\n';\n if (state.bodyReaction) t += 'Dans mon corps : ' + state.bodyReaction + '\\n';\n if (state.dailyImpact) t += 'Au quotidien : ' + state.dailyImpact + '\\n';\n t += '\\n';\n }\n\n if (state.facts || state.interpretations || state.evidence || state.motif) {\n t += '\ud83d\udd0d FAITS ET INTERPR\u00c9TATIONS\\n';\n if (state.facts) t += 'Faits : ' + state.facts + '\\n';\n if (state.interpretations) t += 'Interpr\u00e9tations : ' + state.interpretations + '\\n';\n if (state.evidence) t += '\u00c9l\u00e9ments \u00e0 rassembler : ' + state.evidence + '\\n';\n if (state.motif) t += 'Motif prot\u00e9g\u00e9 possible : ' + state.motif + '\\n';\n t += '\\n';\n }\n\n if (state.needs.length > 0 || state.needText || state.rights || state.whatIWant || state.selfPreservation) {\n t += '\ud83c\udf3f MES BESOINS ET MES DROITS\\n';\n if (state.needs.length > 0) t += 'Besoins identifi\u00e9s : ' + state.needs.join(', ') + '\\n';\n if (state.needText) t += state.needText + '\\n';\n if (state.rights) t += 'Droits en jeu : ' + state.rights + '\\n';\n if (state.whatIWant) t += 'Ce que je voudrais obtenir : ' + state.whatIWant + '\\n';\n if (state.selfPreservation) t += 'Pour me prot\u00e9ger : ' + state.selfPreservation + '\\n';\n t += '\\n';\n }\n\n if (state.resources.length > 0 || state.chosenResources || state.personalSupport || state.obstacles) {\n t += '\ud83e\udd1d RESSOURCES ET APPUIS\\n';\n state.resources.forEach((r, i) => t += (i + 1) + '. ' + r + '\\n');\n if (state.chosenResources) t += '\u00c0 explorer en priorit\u00e9 : ' + state.chosenResources + '\\n';\n if (state.personalSupport) t += 'Sur qui je peux compter : ' + state.personalSupport + '\\n';\n if (state.obstacles) t += 'Obstacles possibles : ' + state.obstacles + '\\n';\n t += '\\n';\n }\n\n if (state.firstStep || state.whenStep || state.supportStep || state.ifHard) {\n t += '\ud83d\udc63 PREMIER PAS DE POUVOIR D\\'AGIR\\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 if (state.ifHard) t += 'Si c\\'est difficile : ' + state.ifHard + '\\n';\n t += '\\n';\n }\n\n if (state.loadBefore !== null && state.loadAfter !== null) {\n t += '\ud83d\udcca \u00c9VOLUTION DE LA CHARGE RESSENTIE\\n';\n t += 'Avant : ' + state.loadBefore + '\/10 \u00b7 Apr\u00e8s : ' + state.loadAfter + '\/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 constitue pas un avis juridique et ne remplace pas un accompagnement professionnel.';\n\n return t;\n }\n\n function downloadSummary() {\n const text = buildPlainTextSummary();\n const filename = 'discrimination-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 Faire face \u00e0 la discrimination';\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 === 'type' || k === 'impact' || k === 'needs' || k === 'resources') state[k] = [];\n else if (k === 'loadBefore' || k === 'loadAfter') 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 renderLoadChips('loadChips', 'loadBefore');\n renderLoadChips('loadChipsAfter', 'loadAfter');\n renderChipsRow('typeChips', 'type', TYPE_LIST);\n renderSingleChipRow('repetitionChips', 'repetition', REPETITION_LIST);\n renderMultiGrid('impactGrid', 'impact', IMPACT_LIST);\n renderChipsRow('needsChips', 'needs', NEEDS_LIST);\n renderMultiGrid('resourcesGrid', 'resources', RESOURCES_LIST);\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 en douceur \u2192';\n }\n\n console.log('\u2705 Outil \u00ab Faire face \u00e0 la discrimination \u00bb initialis\u00e9');\n }\n\n window.jirisDiscrimination = {\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>\n\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>Faire face \u00e0 la discrimination Faire face \u00e0 la discrimination \u2014 Outil d’accompagnement JIRIS \u2696\ufe0f Faire face \u00e0 la discrimination Un outil d’accompagnement pour comprendre ce qu’on vit, nommer ses besoins et retrouver du pouvoir d’agir. Avant de commencer \u26a0\ufe0f Ce que vous vivez est r\u00e9el \u2014 et la loi vous prot\u00e8ge La discrimination est […]<\/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-3595","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3595","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=3595"}],"version-history":[{"count":4,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3595\/revisions"}],"predecessor-version":[{"id":3600,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/3595\/revisions\/3600"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=3595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}