{"id":5115,"date":"2026-10-09T02:00:50","date_gmt":"2026-10-09T02:00:50","guid":{"rendered":"https:\/\/jiris.ca\/?page_id=5115"},"modified":"2026-10-09T23:27:31","modified_gmt":"2026-10-09T23:27:31","slug":"quand-cest-moi-quand-cest-lautre","status":"publish","type":"page","link":"https:\/\/jiris.ca\/en\/quand-cest-moi-quand-cest-lautre\/","title":{"rendered":"Quand c\u2019est moi \/ quand c\u2019est l\u2019autre"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5115\" class=\"elementor elementor-5115\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e14c1da e-flex e-con-boxed e-con e-parent\" data-id=\"e14c1da\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4cc071ae e-con-full e-flex e-con e-child\" data-id=\"4cc071ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f41d0a elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"9f41d0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:200}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Quand c\u2019est moi \/ quand c\u2019est l\u2019autre<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-239c81ce elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"239c81ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_delay&quot;:300}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jiris.ca\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Accueil<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Quand c\u2019est moi \/ quand c\u2019est l\u2019autre<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fab9f9f e-flex e-con-boxed e-con e-parent\" data-id=\"fab9f9f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9f4783 elementor-widget elementor-widget-html\" data-id=\"b9f4783\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n<meta name=\"color-scheme\" content=\"light\">\n<title>Quand c'est moi \/ quand c'est l'autre \u00b7 JIRIS<\/title>\n\n<style>\n\/* ============================================================\n   JIRIS \u2014 QUAND C'EST MOI \/ QUAND C'EST L'AUTRE\n   Version responsive : palette claire et mobile corrig\u00e9\n   ============================================================ *\/\n\n\/* Conteneur ext\u00e9rieur *\/\n.qmo-outer,\n.qmo-outer * {\n  box-sizing: border-box;\n}\n\n.qmo-outer {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  padding: clamp(8px, 3vw, 32px);\n  padding-top: calc(clamp(8px, 3vw, 32px) + env(safe-area-inset-top, 0px));\n  padding-bottom: calc(clamp(8px, 3vw, 32px) + env(safe-area-inset-bottom, 0px));\n}\n\n\/* Palette claire fixe *\/\n.qmo {\n  --bg: #f6f3ee;\n  --card: #ffffff;\n  --ink: #23312f;\n  --mute: #5d6b68;\n  --acc: #2f6f6a;\n  --acc-dark: #1f4f4b;\n  --acc2: #e6f0ee;\n  --line: #e2ded4;\n  --line-strong: #cdc9bd;\n  --warm: #f3e6d3;\n  --warm-border: #e8d7bd;\n  --btn: #ffffff;\n  --shadow-sm: 0 1px 3px rgba(35,49,47,.06);\n  --shadow-md: 0 4px 14px rgba(35,49,47,.08);\n\n  color-scheme: light;\n  background: var(--bg);\n  color: var(--ink);\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: 17px;\n  line-height: 1.65;\n  font-weight: 400;\n\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0 auto;\n  border: 1px solid var(--line);\n  border-radius: clamp(20px, 4vw, 32px);\n  box-shadow: var(--shadow-md);\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  isolation: isolate;\n}\n\n.qmo,\n.qmo *,\n.qmo *::before,\n.qmo *::after {\n  box-sizing: border-box;\n}\n\n\/* Neutralisation des couleurs sombres impos\u00e9es par le th\u00e8me *\/\n.qmo,\n.qmo section,\n.qmo .privacy-banner,\n.qmo .opt,\n.qmo input,\n.qmo textarea {\n  color-scheme: light;\n}\n\n\/* Contenu principal *\/\n.qmo-wrap {\n  width: 100%;\n  max-width: 760px;\n  min-width: 0;\n  margin: 0 auto;\n  padding: clamp(24px, 5vw, 48px) clamp(14px, 4vw, 32px);\n}\n\n\/* ============================================================\n   RETOUR AU HUB\n   ============================================================ *\/\n\n.qmo .back-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  max-width: 100%;\n  margin: 0 0 22px;\n  padding: 9px 16px;\n  background: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--acc);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: .85rem;\n  font-weight: 700;\n  letter-spacing: .02em;\n  text-decoration: none;\n  box-shadow: var(--shadow-sm);\n  transition: background .18s ease, border-color .18s ease,\n              transform .18s ease, box-shadow .18s ease;\n}\n\n.qmo .back-link svg {\n  display: block;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  transition: transform .18s ease;\n}\n\n.qmo .back-link:hover {\n  background: var(--acc2);\n  border-color: var(--acc);\n  transform: translateX(-2px);\n  box-shadow: 0 3px 10px rgba(47,111,106,.12);\n}\n\n.qmo .back-link:hover svg {\n  transform: translateX(-2px);\n}\n\n.qmo .back-link:focus-visible {\n  outline: 3px solid rgba(47,111,106,.4);\n  outline-offset: 2px;\n}\n\n\/* ============================================================\n   TITRES ET INTRODUCTION\n   ============================================================ *\/\n\n.qmo h1 {\n  max-width: 100%;\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: clamp(1.65rem, 4.5vw, 2.2rem);\n  line-height: 1.15;\n  letter-spacing: -.02em;\n  margin: 0 0 14px;\n  color: var(--ink);\n  font-weight: 500;\n  overflow-wrap: anywhere;\n}\n\n.qmo .lead {\n  color: var(--mute);\n  font-size: clamp(1rem, 2vw, 1.08rem);\n  line-height: 1.7;\n  margin: 0 0 22px;\n  max-width: 60ch;\n}\n\n\/* ============================================================\n   BANDEAU CONFIDENTIALIT\u00c9\n   ============================================================ *\/\n\n.qmo .privacy-banner {\n  display: flex;\n  align-items: flex-start;\n  gap: 14px;\n  width: 100%;\n  min-width: 0;\n  margin: 0 0 28px;\n  padding: 18px 22px;\n  background: linear-gradient(135deg, #e6f0ee 0%, #f0f6f4 100%);\n  border: 1px solid var(--acc);\n  border-left: 5px solid var(--acc);\n  border-radius: 16px;\n  color: var(--acc-dark);\n  font: 600 15px\/1.55 system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  box-shadow: var(--shadow-sm);\n}\n\n.qmo .privacy-banner > div {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.qmo .privacy-banner svg {\n  display: block;\n  flex: 0 0 26px;\n  width: 26px;\n  height: 26px;\n  color: var(--acc);\n  margin-top: 2px;\n}\n\n.qmo .privacy-banner strong {\n  display: block;\n  font-weight: 800;\n  font-size: 15px;\n  letter-spacing: .01em;\n  color: var(--acc-dark);\n  margin-bottom: 4px;\n}\n\n.qmo .privacy-banner span {\n  display: block;\n  font-weight: 500;\n  color: var(--mute);\n  font-size: 14px;\n  line-height: 1.55;\n}\n\n.qmo .privacy-banner a {\n  color: var(--acc-dark);\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 3px;\n  font-weight: 700;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n\/* ============================================================\n   PROGRESSION\n   ============================================================ *\/\n\n.qmo .dots {\n  display: flex;\n  gap: 8px;\n  width: 100%;\n  margin: 0 0 26px;\n}\n\n.qmo .dots i {\n  display: block;\n  height: 5px;\n  flex: 1 1 0;\n  min-width: 0;\n  border-radius: 3px;\n  background: var(--line);\n  transition: background .3s ease;\n}\n\n.qmo .dots i.on {\n  background: var(--acc);\n}\n\n\/* ============================================================\n   SECTIONS ET CARTES\n   ============================================================ *\/\n\n.qmo section {\n  display: none;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n  background: var(--card);\n  color: var(--ink);\n  border: 1px solid var(--line);\n  border-radius: 22px;\n  padding: clamp(18px, 4vw, 34px);\n  box-shadow: var(--shadow-sm);\n}\n\n.qmo section.on {\n  display: block;\n  animation: qmoFadeIn .3s ease;\n}\n\n@keyframes qmoFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .qmo section.on {\n    animation: none;\n  }\n\n  .qmo *,\n  .qmo *::before,\n  .qmo *::after {\n    scroll-behavior: auto !important;\n    transition-duration: .01ms !important;\n  }\n}\n\n.qmo h2 {\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: clamp(1.25rem, 2.6vw, 1.5rem);\n  line-height: 1.3;\n  letter-spacing: -.015em;\n  margin: 0 0 12px;\n  color: var(--ink);\n  font-weight: 600;\n  overflow-wrap: anywhere;\n}\n\n.qmo p {\n  color: var(--ink);\n  margin: .5em 0;\n  overflow-wrap: anywhere;\n}\n\n.qmo em {\n  overflow-wrap: anywhere;\n}\n\n\/* ============================================================\n   OPTIONS DE S\u00c9LECTION\n   ============================================================ *\/\n\n.qmo .opts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 10px;\n  width: 100%;\n  min-width: 0;\n  margin: 18px 0;\n}\n\n.qmo button,\n.qmo input,\n.qmo textarea {\n  font-family: inherit;\n  max-width: 100%;\n}\n\n.qmo .opt {\n  appearance: none;\n  -webkit-appearance: none;\n  display: block;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n  margin: 0;\n  padding: 14px 18px;\n\n  text-align: left;\n  text-indent: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  word-break: normal;\n\n  border: 1.5px solid var(--line-strong);\n  border-radius: 14px;\n  background: var(--bg);\n  color: var(--ink);\n  -webkit-text-fill-color: var(--ink);\n\n  cursor: pointer;\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  line-height: 1.55;\n\n  box-shadow: none;\n  text-transform: none;\n  letter-spacing: normal;\n\n  transition: border-color .18s ease, background .18s ease,\n              transform .18s ease, box-shadow .18s ease;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.qmo .opt:hover {\n  border-color: var(--acc);\n  background: var(--acc2);\n  color: var(--ink);\n  -webkit-text-fill-color: var(--ink);\n}\n\n.qmo .opt:active {\n  transform: scale(.995);\n}\n\n.qmo .opt[aria-pressed=\"true\"] {\n  border-color: var(--acc);\n  background: var(--acc2);\n  color: var(--ink);\n  -webkit-text-fill-color: var(--ink);\n  font-weight: 600;\n  box-shadow: 0 0 0 3px rgba(47,111,106,.12);\n}\n\n.qmo .opt:focus-visible {\n  outline: 3px solid rgba(47,111,106,.4);\n  outline-offset: 2px;\n}\n\n\/* ============================================================\n   CHAMPS DE SAISIE\n   ============================================================ *\/\n\n.qmo input[type=\"text\"],\n.qmo textarea {\n  appearance: none;\n  -webkit-appearance: none;\n  display: block;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n  margin: 0;\n\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: 16px;\n  line-height: 1.6;\n  font-weight: 400;\n\n  color: var(--ink);\n  -webkit-text-fill-color: var(--ink);\n  background: var(--bg);\n\n  border: 1.5px solid var(--line-strong);\n  border-radius: 16px;\n  padding: 14px 16px;\n\n  box-shadow: inset 0 1px 2px rgba(35,49,47,.03);\n  transition: border-color .18s ease, background .18s ease,\n              box-shadow .18s ease;\n}\n\n.qmo input[type=\"text\"]:hover,\n.qmo textarea:hover {\n  border-color: #b8c4bf;\n}\n\n.qmo input[type=\"text\"]:focus,\n.qmo textarea:focus {\n  outline: none;\n  background: var(--card);\n  border-color: var(--acc);\n  box-shadow: 0 0 0 4px rgba(47,111,106,.12);\n}\n\n.qmo textarea {\n  min-height: 120px;\n  resize: vertical;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.qmo input::placeholder,\n.qmo textarea::placeholder {\n  color: #718580;\n  -webkit-text-fill-color: #718580;\n  opacity: 1;\n  font-style: italic;\n}\n\n\/* ============================================================\n   ACCESSIBILIT\u00c9 DU FOCUS\n   ============================================================ *\/\n\n.qmo button:focus-visible,\n.qmo a:focus-visible {\n  outline: 3px solid rgba(47,111,106,.4);\n  outline-offset: 2px;\n}\n\n.qmo input:focus-visible,\n.qmo textarea:focus-visible {\n  outline: 2px solid var(--acc);\n  outline-offset: 2px;\n}\n\n\/* ============================================================\n   LIBELL\u00c9S\n   ============================================================ *\/\n\n.qmo label {\n  display: block;\n  max-width: 100%;\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 700;\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 22px 0 6px;\n  color: var(--ink);\n  letter-spacing: .01em;\n  overflow-wrap: anywhere;\n}\n\n.qmo small {\n  display: block;\n  max-width: 100%;\n  color: var(--mute);\n  font: 14px\/1.6 system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  margin-bottom: 10px;\n  overflow-wrap: anywhere;\n}\n\n\/* ============================================================\n   ENCADR\u00c9 DOUX\n   ============================================================ *\/\n\n.qmo .soft {\n  max-width: 100%;\n  font: 14px\/1.65 system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  color: var(--mute);\n  margin-top: 18px;\n  padding: 14px 16px;\n  background: var(--bg);\n  border-left: 3px solid var(--line-strong);\n  border-radius: 0 14px 14px 0;\n  overflow-wrap: anywhere;\n}\n\n\/* ============================================================\n   BOUTONS DE NAVIGATION\n   ============================================================ *\/\n\n.qmo .row {\n  display: flex;\n  align-items: stretch;\n  gap: 10px;\n  flex-wrap: wrap;\n  width: 100%;\n  min-width: 0;\n  margin-top: 26px;\n  padding-top: 22px;\n  border-top: 1px solid var(--line);\n}\n\n.qmo .btn {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  max-width: 100%;\n  margin: 0;\n  padding: 12px 22px;\n\n  border-radius: 999px;\n  border: 1.5px solid var(--acc);\n  background: var(--acc);\n  color: #ffffff;\n  -webkit-text-fill-color: #ffffff;\n\n  cursor: pointer;\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 15px;\n  font-weight: 650;\n  line-height: 1.5;\n  text-align: center;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  text-transform: none;\n  letter-spacing: normal;\n\n  box-shadow: 0 2px 8px rgba(47,111,106,.18);\n  transition: background .18s ease, transform .18s ease,\n              box-shadow .18s ease;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.qmo .btn:hover:not(:disabled) {\n  background: var(--acc-dark);\n  border-color: var(--acc-dark);\n  color: #ffffff;\n  -webkit-text-fill-color: #ffffff;\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px rgba(47,111,106,.28);\n}\n\n.qmo .btn:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.qmo .btn.alt {\n  background: transparent;\n  color: var(--acc);\n  -webkit-text-fill-color: var(--acc);\n  border-color: var(--acc);\n  box-shadow: none;\n}\n\n.qmo .btn.alt:hover:not(:disabled) {\n  background: var(--acc2);\n  color: var(--acc-dark);\n  -webkit-text-fill-color: var(--acc-dark);\n  box-shadow: none;\n}\n\n.qmo .btn:disabled {\n  opacity: .48;\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n\/* ============================================================\n   COMPARAISON DES DEUX R\u00c9PONSES\n   ============================================================ *\/\n\n.qmo .two {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 14px;\n  width: 100%;\n  min-width: 0;\n  margin: 20px 0;\n}\n\n.qmo .q {\n  min-width: 0;\n  max-width: 100%;\n  border-radius: 16px;\n  padding: 18px 16px;\n  border: 1px solid var(--line);\n  min-height: 100px;\n  overflow-wrap: anywhere;\n}\n\n.qmo .q.me {\n  background: var(--acc2);\n  border-color: rgba(47,111,106,.25);\n}\n\n.qmo .q.other {\n  background: var(--warm);\n  border-color: var(--warm-border);\n}\n\n.qmo .q b {\n  display: block;\n  font: 700 12px\/1.5 system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  text-transform: uppercase;\n  letter-spacing: .06em;\n  color: var(--mute);\n  margin-bottom: 8px;\n}\n\n.qmo .q p {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  word-break: normal;\n  margin: 0;\n  font-size: 16px;\n  line-height: 1.65;\n  color: var(--ink);\n}\n\n\/* ============================================================\n   NOTE ET PONT R\u00c9FLEXIF\n   ============================================================ *\/\n\n.qmo .note {\n  background: var(--acc2);\n  border: 1px solid rgba(47,111,106,.2);\n  border-radius: 14px;\n  padding: 16px;\n  margin-top: 18px;\n  font-size: 15.5px;\n  line-height: 1.65;\n  color: var(--ink);\n  overflow-wrap: anywhere;\n}\n\n.qmo ul {\n  padding-left: 1.3em;\n  margin: 14px 0;\n}\n\n.qmo li {\n  margin: .5em 0;\n  line-height: 1.65;\n  padding-left: 2px;\n  overflow-wrap: anywhere;\n}\n\n.qmo li::marker {\n  color: var(--acc);\n}\n\n.qmo .bridge {\n  background: var(--acc2);\n  border-radius: 14px;\n  padding: 16px;\n  margin: 20px 0;\n  font-style: italic;\n  color: var(--acc-dark);\n  border-left: 4px solid var(--acc);\n  overflow-wrap: anywhere;\n}\n\n\/* ============================================================\n   PIED DE PAGE\n   ============================================================ *\/\n\n.qmo footer {\n  margin-top: 32px;\n  padding-top: 20px;\n  border-top: 1px solid var(--line);\n  font: 13.5px\/1.6 system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  color: var(--mute);\n  text-align: center;\n}\n\n.qmo footer p {\n  color: var(--mute);\n  margin: 0;\n}\n\n\/* ============================================================\n   RESPONSIVE \u2014 TABLETTES ET T\u00c9L\u00c9PHONES\n   ============================================================ *\/\n\n@media (max-width: 560px) {\n  .qmo-outer {\n    padding: 8px;\n    padding-top: calc(8px + env(safe-area-inset-top, 0px));\n    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n  }\n\n  .qmo {\n    width: 100%;\n    max-width: 100%;\n    font-size: 16px;\n    border-radius: 20px;\n  }\n\n  .qmo-wrap {\n    width: 100%;\n    padding: 24px 12px;\n  }\n\n  .qmo h1 {\n    font-size: clamp(1.55rem, 7vw, 2rem);\n    line-height: 1.2;\n  }\n\n  .qmo .lead {\n    font-size: 1rem;\n  }\n\n  .qmo section {\n    width: 100%;\n    padding: 20px 13px;\n    border-radius: 16px;\n  }\n\n  .qmo .privacy-banner {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 15px 13px;\n  }\n\n  .qmo .privacy-banner svg {\n    flex: 0 0 22px;\n    width: 22px;\n    height: 22px;\n  }\n\n  .qmo .privacy-banner strong {\n    font-size: 14px;\n  }\n\n  .qmo .privacy-banner span {\n    font-size: 13.5px;\n  }\n\n  .qmo .opts {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 10px;\n    margin: 16px 0;\n  }\n\n  .qmo .opt {\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    padding: 13px 12px;\n    font-size: 15px;\n    line-height: 1.6;\n  }\n\n  .qmo input[type=\"text\"],\n  .qmo textarea {\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    padding: 13px 12px;\n    font-size: 16px;\n  }\n\n  .qmo .two {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 12px;\n  }\n\n  .qmo .q {\n    padding: 16px 14px;\n  }\n\n  .qmo .row {\n    flex-direction: column-reverse;\n    align-items: stretch;\n    gap: 10px;\n    width: 100%;\n    margin-top: 22px;\n    padding-top: 18px;\n  }\n\n  .qmo .row .btn {\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    min-height: 46px;\n    padding: 12px 16px;\n    justify-content: center;\n    white-space: normal;\n    overflow-wrap: anywhere;\n  }\n\n  .qmo .soft,\n  .qmo .note,\n  .qmo .bridge {\n    padding: 14px 12px;\n  }\n}\n\n\/* Tr\u00e8s petits \u00e9crans *\/\n@media (max-width: 360px) {\n  .qmo-wrap {\n    padding: 20px 9px;\n  }\n\n  .qmo section {\n    padding: 17px 10px;\n  }\n\n  .qmo .back-link {\n    padding: 8px 12px;\n    font-size: .8rem;\n  }\n\n  .qmo .opt {\n    padding: 12px 10px;\n    font-size: 14px;\n  }\n\n  .qmo .privacy-banner {\n    gap: 8px;\n    padding: 12px 10px;\n  }\n}\n\n\/* Impression *\/\n@media print {\n  .qmo-outer {\n    padding: 0;\n  }\n\n  .qmo {\n    box-shadow: none;\n    border: none;\n  }\n\n  .qmo .back-link,\n  .qmo .row,\n  .qmo .dots {\n    display: none !important;\n  }\n\n  .qmo section {\n    display: block !important;\n    page-break-inside: avoid;\n    margin-bottom: 18px;\n    box-shadow: none;\n  }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"qmo-outer\">\n<div class=\"qmo\" id=\"qmo\">\n<main class=\"qmo-wrap\">\n\n  <a class=\"back-link\"\n     href=\"https:\/\/jiris.ca\/comprendre-sans-conclure\/\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n         stroke-width=\"2.2\" stroke-linecap=\"round\"\n         stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M19 12H5\"\/>\n      <path d=\"M12 19l-7-7 7-7\"\/>\n    <\/svg>\n    Retour au hub\n  <\/a>\n\n  <h1>Quand c'est moi \/ quand c'est l'autre<\/h1>\n\n  <p class=\"lead\">\n    Il arrive que nous nous parlions plus durement que nous ne parlerions\n    \u00e0 quelqu'un que nous aimons. Cet outil permet de regarder cet \u00e9cart,\n    sans le juger.\n  <\/p>\n\n  <div class=\"privacy-banner\" role=\"note\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n         stroke-width=\"1.8\" stroke-linecap=\"round\"\n         stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M12 3 20 6v5c0 5-3.4 8-8 10-4.6-2-8-5-8-10V6z\"\/>\n      <path d=\"m9 12 2 2 4-4\"\/>\n    <\/svg>\n    <div>\n      <strong>Ce que vous \u00e9crivez reste avec vous.<\/strong>\n      <span>\n        Vos r\u00e9ponses ne sont pas transmises \u00e0 JIRIS.\n        Pour plus de discr\u00e9tion, le mode priv\u00e9 de votre navigateur est recommand\u00e9.\n        <a href=\"\/confidentialite\">En savoir plus<\/a>\n      <\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"dots\" aria-hidden=\"true\">\n    <i class=\"on\"><\/i><i><\/i><i><\/i><i><\/i>\n  <\/div>\n\n  <!-- \u00c9TAPE 1 -->\n  <section id=\"qmo-s0\" class=\"on\">\n    <h2>Une situation \u00e0 regarder<\/h2>\n\n    <p>\n      Choisissez ce qui s'approche le plus de ce que vous vivez,\n      ou de ce que vous avez envie d'explorer aujourd'hui.\n    <\/p>\n\n    <div class=\"opts\" id=\"qmo-opts\"\n         role=\"group\" aria-label=\"Choisissez une situation\"><\/div>\n\n    <label for=\"qmo-autre\">Ou nommez-la avec vos mots<\/label>\n    <input type=\"text\" id=\"qmo-autre\" maxlength=\"140\"\n           placeholder=\"Une situation personnelle\u2026\"\n           autocomplete=\"off\">\n\n    <div class=\"row\">\n      <button type=\"button\" class=\"btn\" id=\"qmo-n0\" disabled>\n        Continuer\n      <\/button>\n    <\/div>\n  <\/section>\n\n  <!-- \u00c9TAPE 2 -->\n  <section id=\"qmo-s1\">\n    <h2>Deux regards sur la m\u00eame situation<\/h2>\n\n    <p>Situation : <em id=\"qmo-sit\"><\/em><\/p>\n\n    <label for=\"qmo-moi\">Quand c'est moi<\/label>\n    <small>\n      Qu'est-ce que je me dis, dans ma t\u00eate, quand je vis cela?\n    <\/small>\n    <textarea id=\"qmo-moi\"\n              placeholder=\"Les mots tels qu'ils viennent.\"><\/textarea>\n\n    <label for=\"qmo-autrui\">Quand c'est l'autre<\/label>\n    <small>\n      Quelqu'un que j'aime vit exactement la m\u00eame chose.\n      Qu'est-ce que je lui dirais? Si personne ne me vient en t\u00eate,\n      je peux penser \u00e0 une personne que je respecte, ou \u00e0 une personne\n      que je ne connais pas.\n    <\/small>\n    <textarea id=\"qmo-autrui\"\n              placeholder=\"Ce que je dirais \u00e0 cette personne.\"><\/textarea>\n\n    <p class=\"soft\">\n      Si les mots ne viennent pas, quelques mots suffisent, ou vous pouvez\n      revenir plus tard. Si c'est trop lourd \u00e0 \u00e9crire, vous pouvez vous\n      arr\u00eater ici : le 9-8-8 (appel ou texto, en tout temps) est l\u00e0 pour\n      en parler.\n    <\/p>\n\n    <div class=\"row\">\n      <button type=\"button\" class=\"btn alt\" data-go=\"0\">Retour<\/button>\n      <button type=\"button\" class=\"btn\" id=\"qmo-n1\" disabled>\n        Comparer\n      <\/button>\n    <\/div>\n  <\/section>\n\n  <!-- \u00c9TAPE 3 -->\n  <section id=\"qmo-s2\">\n    <h2>Ce que je remarque<\/h2>\n\n    <div class=\"two\">\n      <div class=\"q me\">\n        <b>Quand c'est moi<\/b>\n        <p id=\"qmo-rm\"><\/p>\n      <\/div>\n\n      <div class=\"q other\">\n        <b>Quand c'est l'autre<\/b>\n        <p id=\"qmo-ra\"><\/p>\n      <\/div>\n    <\/div>\n\n    <p><strong>Le ton, entre les deux, est\u2026<\/strong><\/p>\n\n    <div class=\"opts\" id=\"qmo-ton\" role=\"group\"\n         aria-label=\"Choisissez le ton entre les deux r\u00e9ponses\">\n\n      <button type=\"button\" class=\"opt\"\n              data-t=\"dur\" aria-pressed=\"false\">\n        plus dur envers moi\n      <\/button>\n\n      <button type=\"button\" class=\"opt\"\n              data-t=\"pareil\" aria-pressed=\"false\">\n        \u00e0 peu pr\u00e8s le m\u00eame\n      <\/button>\n\n      <button type=\"button\" class=\"opt\"\n              data-t=\"doux\" aria-pressed=\"false\">\n        plus doux envers moi\n      <\/button>\n    <\/div>\n\n    <div class=\"note\" id=\"qmo-msg\" hidden aria-live=\"polite\"><\/div>\n\n    <div class=\"row\">\n      <button type=\"button\" class=\"btn alt\" data-go=\"1\">Retour<\/button>\n      <button type=\"button\" class=\"btn\" id=\"qmo-n2\" disabled>\n        Continuer\n      <\/button>\n    <\/div>\n  <\/section>\n\n  <!-- \u00c9TAPE 4 -->\n  <section id=\"qmo-s3\">\n    <h2>Pour prolonger<\/h2>\n\n    <p>\n      Quelques questions \u00e0 garder en t\u00eate, sans obligation d'y r\u00e9pondre :\n    <\/p>\n\n    <ul>\n      <li>\n        Qu'est-ce que je me permets d'accueillir chez l'autre,\n        mais pas chez moi?\n      <\/li>\n      <li>\n        D'o\u00f9 me vient la voix qui parle quand c'est moi?\n        Est-ce vraiment la mienne?\n      <\/li>\n      <li>\n        Pourquoi faudrait-il attendre qu'il s'agisse de quelqu'un\n        que j'aime pour \u00eatre juste, ou doux? Et si c'\u00e9tait quelqu'un\n        que je ne connais pas?\n      <\/li>\n    <\/ul>\n\n    <p class=\"bridge\">\n      Se parler autrement ne signifie pas nier ce qui est difficile,\n      ni porter seul la responsabilit\u00e9 de ce qui arrive.\n    <\/p>\n\n    <label for=\"qmo-phrase\">\n      Une phrase de \u00ab l'autre \u00bb que je pourrais m'adresser\n    <\/label>\n\n    <small>\n      Vous pouvez la reprendre de la colonne de droite,\n      ou l'\u00e9crire autrement.\n    <\/small>\n\n    <textarea id=\"qmo-phrase\"\n              style=\"min-height:90px\"\n              aria-label=\"Phrase que je pourrais m'adresser\"><\/textarea>\n\n    <div class=\"row\">\n      <button type=\"button\" class=\"btn alt\" data-go=\"2\">Retour<\/button>\n      <button type=\"button\" class=\"btn\" id=\"qmo-copy\">\n        Copier ma phrase\n      <\/button>\n      <button type=\"button\" class=\"btn alt\" id=\"qmo-again\">\n        Recommencer\n      <\/button>\n    <\/div>\n\n    <p id=\"qmo-cm\" class=\"lead\" aria-live=\"polite\"><\/p>\n  <\/section>\n\n  <footer>\n    <p>\n      Cet outil propose une r\u00e9flexion personnelle.\n      Il ne remplace pas l'avis d'une personne professionnelle.\n    <\/p>\n  <\/footer>\n\n<\/main>\n<\/div>\n<\/div>\n\n<script>\n(function () {\n  \"use strict\";\n\n  var root = document.getElementById(\"qmo\");\n  if (!root) return;\n\n  var $ = function (id) {\n    return root.querySelector(\"#\" + id);\n  };\n\n  var S = [\n    \"Je n'arrive plus \u00e0 fonctionner comme avant\",\n    \"J'h\u00e9site \u00e0 demander de l'aide\",\n    \"J'ai besoin de repos et je me le reproche\",\n    \"Je viens de recevoir un diagnostic ou une \u00e9tiquette\",\n    \"Je traverse une p\u00e9riode difficile et je le cache\"\n  ];\n\n  var sit = \"\";\n  var ton = \"\";\n\n  var secs = [\n    $(\"qmo-s0\"),\n    $(\"qmo-s1\"),\n    $(\"qmo-s2\"),\n    $(\"qmo-s3\")\n  ];\n\n  var dots = root.querySelectorAll(\".dots i\");\n\n  function go(n) {\n    secs.forEach(function (section, i) {\n      section.classList.toggle(\"on\", i === n);\n    });\n\n    dots.forEach(function (dot, i) {\n      dot.classList.toggle(\"on\", i <= n);\n    });\n\n    \/* Revenir au d\u00e9but de l'outil sans d\u00e9placement horizontal *\/\n    root.scrollIntoView({\n      block: \"start\",\n      behavior: window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n        ? \"auto\"\n        : \"smooth\"\n    });\n  }\n\n  \/* Cr\u00e9ation des choix de la premi\u00e8re \u00e9tape *\/\n  var opts = $(\"qmo-opts\");\n\n  function clearOpts() {\n    opts.querySelectorAll(\".opt\").forEach(function (button) {\n      button.setAttribute(\"aria-pressed\", \"false\");\n    });\n  }\n\n  S.forEach(function (text) {\n    var button = document.createElement(\"button\");\n\n    button.type = \"button\";\n    button.className = \"opt\";\n    button.textContent = text;\n    button.setAttribute(\"aria-pressed\", \"false\");\n\n    button.addEventListener(\"click\", function () {\n      clearOpts();\n\n      button.setAttribute(\"aria-pressed\", \"true\");\n      sit = text;\n\n      $(\"qmo-autre\").value = \"\";\n      $(\"qmo-n0\").disabled = false;\n    });\n\n    opts.appendChild(button);\n  });\n\n  \/* Situation personnalis\u00e9e *\/\n  $(\"qmo-autre\").addEventListener(\"input\", function () {\n    var value = this.value.trim();\n\n    clearOpts();\n    sit = value;\n    $(\"qmo-n0\").disabled = !value;\n  });\n\n  $(\"qmo-n0\").addEventListener(\"click\", function () {\n    if (!sit.trim()) return;\n\n    $(\"qmo-sit\").textContent = sit;\n    go(1);\n  });\n\n  \/* Validation des deux r\u00e9ponses *\/\n  function checkResponses() {\n    $(\"qmo-n1\").disabled = !(\n      $(\"qmo-moi\").value.trim() &&\n      $(\"qmo-autrui\").value.trim()\n    );\n  }\n\n  $(\"qmo-moi\").addEventListener(\"input\", checkResponses);\n  $(\"qmo-autrui\").addEventListener(\"input\", checkResponses);\n\n  $(\"qmo-n1\").addEventListener(\"click\", function () {\n    var mine = $(\"qmo-moi\").value.trim();\n    var other = $(\"qmo-autrui\").value.trim();\n\n    if (!mine || !other) return;\n\n    $(\"qmo-rm\").textContent = mine;\n    $(\"qmo-ra\").textContent = other;\n    $(\"qmo-phrase\").value = other;\n\n    go(2);\n  });\n\n  \/* Messages r\u00e9flexifs *\/\n  var M = {\n    dur:\n      \"Cet \u00e9cart est fr\u00e9quent. Il ne dit pas que vous manquez de bonne \" +\n      \"volont\u00e9 : il montre souvent \u00e0 quel point nous avons appris \u00e0 \" +\n      \"exiger beaucoup de nous-m\u00eames. La phrase de droite peut devenir \" +\n      \"une ressource \u00e0 laquelle revenir, m\u00eame si elle ne vous semble \" +\n      \"pas encore naturelle.\",\n\n    pareil:\n      \"Vous vous parlez \u00e0 peu pr\u00e8s comme vous parleriez \u00e0 quelqu'un \" +\n      \"que vous aimez. Qu'est-ce qui vous permet cette justesse? \" +\n      \"Elle peut servir les jours plus difficiles.\",\n\n    doux:\n      \"Vous vous accordez de la douceur. Il peut \u00eatre utile de remarquer \" +\n      \"ce qui la rend possible, et si elle tient aussi les jours plus difficiles.\"\n  };\n\n  var tons = root.querySelectorAll(\"#qmo-ton .opt\");\n\n  function clearTon() {\n    tons.forEach(function (button) {\n      button.setAttribute(\"aria-pressed\", \"false\");\n    });\n  }\n\n  tons.forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      clearTon();\n\n      button.setAttribute(\"aria-pressed\", \"true\");\n      ton = button.getAttribute(\"data-t\");\n\n      var message = $(\"qmo-msg\");\n      message.textContent = M[ton];\n      message.hidden = false;\n\n      $(\"qmo-n2\").disabled = false;\n    });\n  });\n\n  $(\"qmo-n2\").addEventListener(\"click\", function () {\n    if (!ton) return;\n    go(3);\n  });\n\n  \/* Navigation Retour *\/\n  root.querySelectorAll(\"[data-go]\").forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      go(Number(button.getAttribute(\"data-go\")));\n    });\n  });\n\n  \/* Copier la phrase *\/\n  $(\"qmo-copy\").addEventListener(\"click\", async function () {\n    var text = $(\"qmo-phrase\").value.trim();\n    var message = $(\"qmo-cm\");\n    var field = $(\"qmo-phrase\");\n\n    if (!text) {\n      message.textContent = \"\u00c9crivez d'abord une phrase.\";\n      return;\n    }\n\n    try {\n      if (navigator.clipboard && window.isSecureContext) {\n        await navigator.clipboard.writeText(text);\n        message.textContent = \"Phrase copi\u00e9e.\";\n      } else {\n        field.focus();\n        field.select();\n\n        var copied = document.execCommand(\"copy\");\n\n        message.textContent = copied\n          ? \"Phrase copi\u00e9e.\"\n          : \"Phrase s\u00e9lectionn\u00e9e : utilisez la commande Copier de votre appareil.\";\n      }\n    } catch (error) {\n      field.focus();\n      field.select();\n\n      message.textContent =\n        \"Phrase s\u00e9lectionn\u00e9e : utilisez la commande Copier de votre appareil.\";\n    }\n  });\n\n  \/* Recommencer *\/\n  $(\"qmo-again\").addEventListener(\"click\", function () {\n    [\n      \"qmo-moi\",\n      \"qmo-autrui\",\n      \"qmo-phrase\",\n      \"qmo-autre\"\n    ].forEach(function (id) {\n      $(id).value = \"\";\n    });\n\n    $(\"qmo-sit\").textContent = \"\";\n    $(\"qmo-rm\").textContent = \"\";\n    $(\"qmo-ra\").textContent = \"\";\n\n    clearOpts();\n    clearTon();\n\n    $(\"qmo-msg\").hidden = true;\n    $(\"qmo-msg\").textContent = \"\";\n\n    $(\"qmo-n0\").disabled = true;\n    $(\"qmo-n1\").disabled = true;\n    $(\"qmo-n2\").disabled = true;\n\n    $(\"qmo-cm\").textContent = \"\";\n\n    sit = \"\";\n    ton = \"\";\n\n    go(0);\n  });\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>Accueil Quand c&rsquo;est moi \/ quand c&rsquo;est l&rsquo;autre \u00b7 JIRIS Retour au hub Quand c&rsquo;est moi \/ quand c&rsquo;est l&rsquo;autre Il arrive que nous nous parlions plus durement que nous ne parlerions \u00e0 quelqu&rsquo;un que nous aimons. Cet outil permet de regarder cet \u00e9cart, sans le juger. Ce que vous \u00e9crivez reste avec vous. Vos [&hellip;]<\/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-5115","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/5115","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=5115"}],"version-history":[{"count":34,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/5115\/revisions"}],"predecessor-version":[{"id":5173,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/5115\/revisions\/5173"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=5115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}