{"id":4053,"date":"2026-09-16T10:28:17","date_gmt":"2026-09-16T10:28:17","guid":{"rendered":"https:\/\/jiris.ca\/?page_id=4053"},"modified":"2026-09-30T22:46:42","modified_gmt":"2026-09-30T22:46:42","slug":"outil1-preparer-une-conversation-difficile","status":"publish","type":"page","link":"https:\/\/jiris.ca\/en\/outil1-preparer-une-conversation-difficile\/","title":{"rendered":"Outil1-Pr\u00e9parer une conversation difficile"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4053\" class=\"elementor elementor-4053\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba1aa42 e-flex e-con-boxed e-con e-parent\" data-id=\"ba1aa42\" 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-37f6361f e-con-full e-flex e-con e-child\" data-id=\"37f6361f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-64f579f5 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"64f579f5\" 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\">Pr\u00e9parer une conversation difficile<\/h1>\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-1927957 e-flex e-con-boxed e-con e-parent\" data-id=\"1927957\" 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-0d1c037 elementor-widget elementor-widget-html\" data-id=\"0d1c037\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- D\u00e9but de l'outil JIRIS - Outil 1 -->\n<div class=\"jiris-app-wrapper\">\n  <style>\n    \/* =========================================================\n       JIRIS \u2014 OUTIL 1 : PR\u00c9PARER UNE CONVERSATION DIFFICILE\n       Styles isol\u00e9s au composant\n       ========================================================= *\/\n\n    .jiris-app-wrapper {\n      --cream: #FAF6F0;\n      --cream-dark: #F0EAE0;\n      --terracotta: #C86B4A;\n      --terracotta-soft: #E8A88C;\n      --terracotta-light: #F5D5C4;\n      --sage: #8FA98B;\n      --sage-dark: #6F8E6B;\n      --sage-light: #D5E3D2;\n      --ink: #2B2522;\n      --ink-soft: #5C5450;\n      --ink-muted: #8A817A;\n      --white: #FFFFFF;\n\n      --shadow-sm: 0 2px 8px rgba(43, 37, 34, 0.04);\n      --shadow-md: 0 8px 24px rgba(43, 37, 34, 0.08);\n      --shadow-lg: 0 16px 40px rgba(43, 37, 34, 0.12);\n\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n      background-color: var(--cream);\n      color: var(--ink);\n      line-height: 1.6;\n      padding: 2rem 1rem;\n      border-radius: 16px;\n      margin: 2rem 0;\n    }\n\n    .jiris-app-wrapper * {\n      box-sizing: border-box;\n    }\n\n    .jiris-app-wrapper h1,\n    .jiris-app-wrapper h2,\n    .jiris-app-wrapper h3,\n    .jiris-app-wrapper p {\n      margin: 0;\n      padding: 0;\n    }\n\n    .jiris-app-wrapper :focus-visible {\n      outline: 3px solid var(--terracotta);\n      outline-offset: 3px;\n    }\n\n    .jiris-app-wrapper button,\n    .jiris-app-wrapper textarea,\n    .jiris-app-wrapper input {\n      font: inherit;\n    }\n\n    .jiris-app-wrapper .jiris-container {\n      max-width: 780px;\n      margin: 0 auto;\n    }\n\n    \/* =========================================================\n       HEADER\n       ========================================================= *\/\n\n    .jiris-app-wrapper .jiris-header {\n      text-align: center;\n      margin-bottom: 2rem;\n      padding: 0 1rem;\n    }\n\n    .jiris-app-wrapper .breadcrumb {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-size: 0.875rem;\n      color: var(--ink-muted);\n      margin-bottom: 1.5rem;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n    }\n\n    .jiris-app-wrapper .breadcrumb .dot {\n      width: 4px;\n      height: 4px;\n      background: var(--terracotta);\n      border-radius: 50%;\n    }\n\n    .jiris-app-wrapper .jiris-header h1 {\n      font-family: 'Fraunces', Georgia, serif;\n      font-size: clamp(2rem, 5vw, 3rem);\n      font-weight: 500;\n      line-height: 1.15;\n      color: var(--ink);\n      margin-bottom: 1rem;\n      letter-spacing: -0.02em;\n    }\n\n    .jiris-app-wrapper .jiris-header .subtitle {\n      font-size: 1.125rem;\n      color: var(--ink-soft);\n      max-width: 560px;\n      margin: 0 auto 1.5rem;\n      font-weight: 400;\n    }\n\n    .jiris-app-wrapper .jiris-header .intro {\n      font-size: 1rem;\n      color: var(--ink-soft);\n      background: var(--white);\n      padding: 1.5rem 2rem;\n      border-radius: 20px;\n      border-left: 3px solid var(--terracotta);\n      text-align: left;\n      box-shadow: var(--shadow-sm);\n    }\n\n    \/* =========================================================\n       CONFIDENTIALIT\u00c9 \u2014 MENTION INFORMATIVE EN AMONT\n       ========================================================= *\/\n\n    .jiris-app-wrapper .storage-status {\n      display: flex;\n      align-items: flex-start;\n      gap: 0.85rem;\n      background: rgba(255, 255, 255, 0.72);\n      border: 1px solid var(--cream-dark);\n      border-radius: 14px;\n      padding: 0.9rem 1.1rem;\n      margin: 0 auto 2rem;\n      max-width: 720px;\n      color: var(--ink-soft);\n      font-size: 0.85rem;\n      text-align: left;\n    }\n\n    .jiris-app-wrapper .storage-status-icon {\n      flex-shrink: 0;\n      font-size: 1rem;\n      line-height: 1.5;\n    }\n\n    .jiris-app-wrapper .storage-status strong {\n      color: var(--ink);\n      font-weight: 600;\n    }\n\n    .jiris-app-wrapper .storage-status p {\n      margin: 0;\n    }\n\n    \/* =========================================================\n       S\u00c9CURIT\u00c9 \u2014 AVERTISSEMENT SP\u00c9CIFIQUE \u00c0 L'OUTIL 1\n       ========================================================= *\/\n\n    .jiris-app-wrapper .jiris-safety {\n      background: var(--terracotta-light);\n      border-radius: 20px;\n      padding: 1.5rem 2rem;\n      margin-bottom: 2rem;\n      color: var(--ink);\n    }\n\n    .jiris-app-wrapper .jiris-safety h2 {\n      font-family: 'Fraunces', Georgia, serif;\n      font-size: 1.125rem;\n      font-weight: 500;\n      margin-bottom: 0.5rem;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n\n    .jiris-app-wrapper .jiris-safety p {\n      font-size: 0.95rem;\n      color: var(--ink-soft);\n    }\n\n    \/* =========================================================\n       STEPS\n       ========================================================= *\/\n\n    .jiris-app-wrapper .steps {\n      display: flex;\n      flex-direction: column;\n      gap: 1.5rem;\n      margin-bottom: 2.5rem;\n    }\n\n    .jiris-app-wrapper .step {\n      background: var(--white);\n      border-radius: 24px;\n      padding: 2rem;\n      box-shadow: var(--shadow-sm);\n      transition:\n        box-shadow 0.3s ease,\n        transform 0.3s ease;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .jiris-app-wrapper .step:hover {\n      box-shadow: var(--shadow-md);\n      transform: translateY(-2px);\n    }\n\n    .jiris-app-wrapper .step::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      background: linear-gradient(\n        to bottom,\n        var(--terracotta),\n        var(--terracotta-soft)\n      );\n    }\n\n    .jiris-app-wrapper .step-header {\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      margin-bottom: 1rem;\n    }\n\n    .jiris-app-wrapper .step-number {\n      flex-shrink: 0;\n      width: 44px;\n      height: 44px;\n      background: var(--terracotta-light);\n      color: var(--terracotta);\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-family: 'Fraunces', Georgia, serif;\n      font-weight: 600;\n      font-size: 1.25rem;\n    }\n\n    .jiris-app-wrapper .step-title-block {\n      flex: 1;\n    }\n\n    .jiris-app-wrapper .step-title {\n      font-family: 'Fraunces', Georgia, serif;\n      font-size: 1.375rem;\n      font-weight: 500;\n      color: var(--ink);\n      margin-bottom: 0.25rem;\n      letter-spacing: -0.01em;\n    }\n\n    .jiris-app-wrapper .step-objective {\n      font-size: 0.875rem;\n      color: var(--ink-muted);\n      font-style: italic;\n    }\n\n    .jiris-app-wrapper .step-description {\n      color: var(--ink-soft);\n      margin-bottom: 1rem;\n      font-size: 0.975rem;\n    }\n\n    \/* =========================================================\n       EXEMPLES & REP\u00c8RES\n       ========================================================= *\/\n\n    .jiris-app-wrapper .example {\n      background: var(--cream);\n      border-radius: 12px;\n      padding: 1rem 1.25rem;\n      margin-bottom: 1.25rem;\n      font-size: 0.9rem;\n      color: var(--ink-soft);\n      border-left: 2px solid var(--terracotta-soft);\n    }\n\n    .jiris-app-wrapper .example strong {\n      display: block;\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--terracotta);\n      font-weight: 600;\n      margin-bottom: 0.4rem;\n    }\n\n    .jiris-app-wrapper .example ul {\n      margin: 0.5rem 0 0 1.25rem;\n      padding: 0;\n    }\n\n    .jiris-app-wrapper .example li {\n      margin-bottom: 0.35rem;\n    }\n\n    .jiris-app-wrapper .reflection {\n      background: #FBF8F4;\n      border: 1px solid var(--cream-dark);\n      border-radius: 14px;\n      padding: 1rem 1.15rem;\n      margin-bottom: 1.25rem;\n    }\n\n    .jiris-app-wrapper .reflection-title {\n      font-size: 0.78rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.07em;\n      color: var(--terracotta);\n      margin-bottom: 0.45rem;\n    }\n\n    .jiris-app-wrapper .reflection p {\n      font-size: 0.9rem;\n      color: var(--ink-soft);\n    }\n\n    \/* =========================================================\n       FIELDS \/ INPUT WRAPPER\n       ========================================================= *\/\n\n    .jiris-app-wrapper .input-wrapper {\n      position: relative;\n    }\n\n    .jiris-app-wrapper .input-wrapper + .input-wrapper {\n      margin-top: 1rem;\n    }\n\n    .jiris-app-wrapper .input-wrapper label {\n      display: block;\n      font-size: 0.875rem;\n      color: var(--ink);\n      font-weight: 500;\n      margin-bottom: 0.5rem;\n    }\n\n    .jiris-app-wrapper .input-wrapper textarea {\n      display: block;\n      width: 100%;\n      min-height: 80px;\n      padding: 1rem 1.25rem;\n      border: 1.5px solid var(--cream-dark);\n      border-radius: 14px;\n      background: var(--cream);\n      font-family: inherit;\n      font-size: 1rem;\n      color: var(--ink);\n      resize: vertical;\n      transition:\n        border-color 0.2s ease,\n        background 0.2s ease,\n        box-shadow 0.2s ease;\n      line-height: 1.5;\n      overflow-y: hidden;\n    }\n\n    .jiris-app-wrapper .input-wrapper textarea::placeholder {\n      color: var(--ink-muted);\n      font-style: italic;\n    }\n\n    .jiris-app-wrapper .input-wrapper textarea:focus {\n      outline: none;\n      border-color: var(--terracotta);\n      background: var(--white);\n      box-shadow: 0 0 0 4px rgba(200, 107, 74, 0.1);\n    }\n\n    \/* =========================================================\n       TIP\n       ========================================================= *\/\n\n    .jiris-app-wrapper .jiris-tip {\n      background: linear-gradient(\n        135deg,\n        var(--terracotta-light) 0%,\n        var(--cream) 100%\n      );\n      border-radius: 24px;\n      padding: 2rem;\n      margin-bottom: 1.5rem;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .jiris-app-wrapper .jiris-tip::after {\n      content: '\u2726';\n      position: absolute;\n      top: -10px;\n      right: -10px;\n      font-size: 8rem;\n      color: var(--terracotta-soft);\n      opacity: 0.15;\n      pointer-events: none;\n    }\n\n    .jiris-app-wrapper .tip-header {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      margin-bottom: 0.75rem;\n      position: relative;\n      z-index: 1;\n    }\n\n    .jiris-app-wrapper .tip-icon {\n      font-size: 1.5rem;\n    }\n\n    .jiris-app-wrapper .tip-title {\n      font-family: 'Fraunces', Georgia, serif;\n      font-size: 1.125rem;\n      font-weight: 500;\n      color: var(--ink);\n    }\n\n    .jiris-app-wrapper .tip-content {\n      color: var(--ink-soft);\n      font-size: 0.975rem;\n      position: relative;\n      z-index: 1;\n    }\n\n    \/* =========================================================\n       PRIVACY BOX \u2014 align\u00e9e sur Outils 2, 3 et 4\n       ========================================================= *\/\n\n    .jiris-app-wrapper .privacy-box {\n      background: var(--white);\n      border: 1px solid var(--cream-dark);\n      border-radius: 16px;\n      padding: 1rem 1.25rem;\n      margin-bottom: 1.5rem;\n      text-align: left;\n    }\n\n    .jiris-app-wrapper .privacy-label {\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      color: var(--ink-soft);\n      font-size: 0.875rem;\n      line-height: 1.5;\n    }\n\n    .jiris-app-wrapper .privacy-label input[type=\"checkbox\"] {\n      flex-shrink: 0;\n      width: 18px;\n      height: 18px;\n      margin-top: 0.15rem;\n      accent-color: var(--terracotta);\n      cursor: pointer;\n    }\n\n    .jiris-app-wrapper .privacy-label input[type=\"checkbox\"]:disabled {\n      cursor: default;\n    }\n\n    .jiris-app-wrapper .privacy-label strong {\n      color: var(--ink);\n      font-weight: 600;\n    }\n\n    .jiris-app-wrapper .privacy-note {\n      margin: 0.65rem 0 0 2rem;\n      font-size: 0.78rem;\n      color: var(--ink-muted);\n    }\n\n    \/* =========================================================\n       ACTIONS\n       ========================================================= *\/\n\n    .jiris-app-wrapper .actions {\n      display: flex;\n      gap: 1rem;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    .jiris-app-wrapper .btn {\n      padding: 1rem 2rem;\n      border-radius: 14px;\n      font-family: inherit;\n      font-size: 1rem;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border: 1.5px solid transparent;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.5rem;\n    }\n\n    .jiris-app-wrapper .btn:disabled {\n      opacity: 0.65;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    .jiris-app-wrapper .btn-primary {\n      background: var(--ink);\n      color: var(--cream);\n    }\n\n    .jiris-app-wrapper .btn-primary:hover {\n      background: var(--terracotta);\n      transform: translateY(-2px);\n      box-shadow: var(--shadow-md);\n    }\n\n    .jiris-app-wrapper .btn-secondary {\n      background: var(--white);\n      color: var(--ink);\n      border-color: var(--cream-dark);\n    }\n\n    .jiris-app-wrapper .btn-secondary:hover {\n      border-color: var(--terracotta);\n      color: var(--terracotta);\n    }\n\n    \/* =========================================================\n       TOAST\n       ========================================================= *\/\n\n    .jiris-app-wrapper .toast {\n      position: fixed;\n      bottom: 2rem;\n      left: 50%;\n      transform: translateX(-50%) translateY(100px);\n      background: var(--ink);\n      color: var(--cream);\n      padding: 1rem 1.5rem;\n      border-radius: 12px;\n      box-shadow: var(--shadow-lg);\n      opacity: 0;\n      pointer-events: none;\n      transition:\n        opacity 0.3s ease,\n        transform 0.3s ease;\n      z-index: 1000;\n      font-size: 0.95rem;\n      max-width: calc(100vw - 2rem);\n      text-align: center;\n    }\n\n    .jiris-app-wrapper .toast.show {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0);\n    }\n\n    .jiris-app-wrapper .print-date {\n      display: none;\n    }\n\n    \/* =========================================================\n       RESPONSIVE\n       ========================================================= *\/\n\n    @media (max-width: 640px) {\n      .jiris-app-wrapper {\n        padding: 1.5rem 0.75rem;\n      }\n\n      .jiris-app-wrapper .jiris-header {\n        padding: 0 0.25rem;\n      }\n\n      .jiris-app-wrapper .step,\n      .jiris-app-wrapper .jiris-safety,\n      .jiris-app-wrapper .jiris-tip {\n        padding: 1.5rem;\n      }\n\n      .jiris-app-wrapper .storage-status {\n        margin-bottom: 1.5rem;\n      }\n\n      .jiris-app-wrapper .actions {\n        flex-direction: column;\n      }\n\n      .jiris-app-wrapper .btn {\n        width: 100%;\n      }\n    }\n\n    \/* =========================================================\n       IMPRESSION \u2014 align\u00e9e sur Outils 2, 3 et 4\n       ========================================================= *\/\n\n    @media print {\n      @page {\n        margin: 1.2cm;\n        size: A4 portrait;\n      }\n\n      .jiris-app-wrapper * {\n        -webkit-print-color-adjust: exact !important;\n        print-color-adjust: exact !important;\n        box-shadow: none !important;\n        transform: none !important;\n        transition: none !important;\n      }\n\n      .jiris-app-wrapper {\n        background-color: var(--cream) !important;\n        padding: 0 !important;\n        margin: 0 !important;\n      }\n\n      .jiris-app-wrapper .steps {\n        display: block !important;\n      }\n\n      .jiris-app-wrapper .jiris-header,\n      .jiris-app-wrapper .jiris-safety,\n      .jiris-app-wrapper .step,\n      .jiris-app-wrapper .jiris-tip {\n        page-break-inside: avoid !important;\n        break-inside: avoid !important;\n        display: block !important;\n        margin-bottom: 1.5rem !important;\n      }\n\n      .jiris-app-wrapper .jiris-tip::after {\n        display: none !important;\n      }\n\n      .jiris-app-wrapper .actions,\n      .jiris-app-wrapper .toast,\n      .jiris-app-wrapper .privacy-box,\n      .jiris-app-wrapper .storage-status {\n        display: none !important;\n      }\n\n      .jiris-app-wrapper .print-date {\n        display: block !important;\n        font-size: 0.8rem;\n        color: var(--ink-muted);\n        margin-bottom: 1rem;\n        text-align: center;\n      }\n\n      .jiris-app-wrapper .input-wrapper textarea {\n        background: #fff !important;\n        border: 1px solid #999 !important;\n        min-height: 60px !important;\n      }\n    }\n  <\/style>\n\n  <div class=\"jiris-container\">\n\n    <!-- =======================================================\n         HEADER\n         ======================================================= -->\n\n    <header class=\"jiris-header\">\n\n      <div class=\"breadcrumb\">\n        <span>JIRIS<\/span>\n        <span class=\"dot\"><\/span>\n        <span>Passer \u00e0 l'action<\/span>\n        <span class=\"dot\"><\/span>\n        <span>Outil 1<\/span>\n      <\/div>\n\n      <h1>Pr\u00e9parer une conversation difficile<\/h1>\n\n      <p class=\"subtitle\">\n        Organiser ses id\u00e9es pour s'exprimer avec clart\u00e9, \u00e0 son rythme,\n        en prenant soin de soi.\n      <\/p>\n\n      <div class=\"intro\">\n        Une conversation importante n'a pas \u00e0 \u00eatre un affrontement.\n        Quand les enjeux sont \u00e9lev\u00e9s, les \u00e9motions peuvent prendre beaucoup de place.\n        Cet outil vous aide \u00e0 clarifier ce que vous voulez dire, dans quel cadre,\n        et \u00e0 pr\u00e9voir ce que vous ferez si l'\u00e9change ne se passe pas comme esp\u00e9r\u00e9.\n        Vous pouvez remplir seulement les \u00e9tapes qui vous parlent et revenir plus tard.\n        Vos r\u00e9ponses ne sont pas m\u00e9moris\u00e9es par d\u00e9faut ; vous pouvez choisir de les\n        conserver sur cet appareil si vous le souhaitez.\n      <\/div>\n\n    <\/header>\n\n    <div class=\"print-date\" id=\"jiris_printDate\" aria-hidden=\"true\"><\/div>\n\n    <!-- =======================================================\n         MENTION INFORMATIVE \u2014 EN AMONT\n         ======================================================= -->\n\n    <div class=\"storage-status\">\n      <div class=\"storage-status-icon\" aria-hidden=\"true\">\ud83d\udd12<\/div>\n\n      <div>\n        <p>\n          <strong>Vos r\u00e9ponses restent sur votre appareil.<\/strong>\n          Elles ne quittent jamais votre navigateur.\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <!-- =======================================================\n         S\u00c9CURIT\u00c9\n         ======================================================= -->\n\n    <section class=\"jiris-safety\" aria-labelledby=\"safety-title\">\n\n      <h2 id=\"safety-title\">\n        \ud83d\udee1\ufe0f Avant de commencer\n      <\/h2>\n\n      <p>\n        Cet outil convient aux \u00e9changes o\u00f9 vous vous sentez en s\u00e9curit\u00e9.\n        Si vous craignez la r\u00e9action de l'autre personne, ou si la relation comporte\n        de la peur, des menaces ou du contr\u00f4le, vous n'avez pas \u00e0 pr\u00e9parer cette\n        conversation seul(e) : vous pouvez d'abord en parler \u00e0 une personne de confiance\n        ou \u00e0 un service sp\u00e9cialis\u00e9. Votre s\u00e9curit\u00e9 passe avant l'\u00e9change lui-m\u00eame.\n      <\/p>\n\n    <\/section>\n\n    <!-- =======================================================\n         STEPS\n         ======================================================= -->\n\n    <div class=\"steps\">\n\n      <!-- =====================================================\n           \u00c9TAPE 1 \u2014 MON INTENTION\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">1<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Mon intention\n            <\/h2>\n\n            <p class=\"step-objective\">\n              Ce que j'esp\u00e8re de cet \u00e9change\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Avant les mots, la direction.\n          Que voudriez-vous qu'il se passe, ou qu'il soit compris,\n          \u00e0 la fin de la conversation ?\n          Une intention claire peut vous aider \u00e0 garder le fil de ce que vous souhaitez exprimer.\n        <\/p>\n\n        <div class=\"example\">\n\n          <strong>Exemple<\/strong>\n\n          \u00ab J'aimerais que mon voisin comprenne que le bruit tardif m'emp\u00eache\n          de dormir, et qu'on trouve ensemble une solution. \u00bb\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s1\">\n            Mon intention\n          <\/label>\n\n          <textarea\n            id=\"jiris_s1\"\n            data-label=\"Mon intention\"\n            placeholder=\"J'esp\u00e8re que\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =====================================================\n           \u00c9TAPE 2 \u2014 LES FAITS\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">2<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Les faits\n            <\/h2>\n\n            <p class=\"step-objective\">\n              Ce que j'ai observ\u00e9, sans chercher \u00e0 tout expliquer\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Partir de ce que vous avez r\u00e9ellement observ\u00e9 peut aider\n          \u00e0 distinguer ce qui s'est pass\u00e9 de l'interpr\u00e9tation que vous en faites.\n          Il n'est toutefois pas n\u00e9cessaire d'\u00eatre parfaitement objectif :\n          l'important est de d\u00e9crire la situation le plus concr\u00e8tement possible.\n        <\/p>\n\n        <div class=\"reflection\">\n\n          <div class=\"reflection-title\">\n            Un rep\u00e8re\n          <\/div>\n\n          <p>\n            Si un fait est difficile \u00e0 isoler, ce n'est pas grave.\n            Notez ce qui s'est pass\u00e9 le plus concr\u00e8tement possible,\n            sans chercher \u00e0 tout expliquer.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"example\">\n\n          <strong>Exemple<\/strong>\n\n          \u00ab Ces derni\u00e8res semaines, nos rencontres ont \u00e9t\u00e9 annul\u00e9es trois fois,\n          chaque fois quelques heures avant. \u00bb\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s2\">\n            Les faits\n          <\/label>\n\n          <textarea\n            id=\"jiris_s2\"\n            data-label=\"Les faits\"\n            placeholder=\"Quand\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =====================================================\n           \u00c9TAPE 3 \u2014 MON RESSENTI\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">3<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Mon ressenti\n            <\/h2>\n\n            <p class=\"step-objective\">\n              Ce que je vis int\u00e9rieurement\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Nommer ce que vous ressentez peut aider \u00e0 mieux comprendre\n          ce que vous souhaitez exprimer.\n          Un ressenti d\u00e9crit ce que vous vivez (\u00ab d\u00e9\u00e7u(e) \u00bb, \u00ab inquiet(e) \u00bb),\n          plut\u00f4t que ce que vous pensez de l'autre.\n        <\/p>\n\n        <div class=\"example\">\n\n          <strong>Exemple<\/strong>\n\n          \u00ab \u2026je me sens d\u00e9\u00e7u(e) et un peu inquiet(e). \u00bb\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s3\">\n            Mon ressenti\n          <\/label>\n\n          <textarea\n            id=\"jiris_s3\"\n            data-label=\"Mon ressenti\"\n            placeholder=\"Je me sens\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =====================================================\n           \u00c9TAPE 4 \u2014 MON BESOIN\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">4<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Mon besoin\n            <\/h2>\n\n            <p class=\"step-objective\">\n              Ce qui est important pour moi\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Identifier ce qui compte pour vous peut aider \u00e0 comprendre\n          ce que vous souhaitez r\u00e9ellement exprimer : respect, clart\u00e9,\n          s\u00e9curit\u00e9, reconnaissance, \u00e9quit\u00e9, repos, fiabilit\u00e9\u2026\n        <\/p>\n\n        <div class=\"reflection\">\n\n          <div class=\"reflection-title\">\n            \u00c0 garder en t\u00eate\n          <\/div>\n\n          <p>\n            Identifier ce qui compte pour vous ne signifie pas que l'autre personne\n            devra n\u00e9cessairement y r\u00e9pondre de la mani\u00e8re souhait\u00e9e.\n            Cela vous aide d'abord \u00e0 savoir ce que vous voulez exprimer.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"example\">\n\n          <strong>Exemple<\/strong>\n\n          \u00ab \u2026parce que j'ai besoin de pouvoir compter sur les moments\n          que nous pr\u00e9voyons ensemble. \u00bb\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s4\">\n            Mon besoin\n          <\/label>\n\n          <textarea\n            id=\"jiris_s4\"\n            data-label=\"Mon besoin\"\n            placeholder=\"Parce que j'ai besoin de\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =====================================================\n           \u00c9TAPE 5 \u2014 MA DEMANDE\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">5<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Ma demande\n            <\/h2>\n\n            <p class=\"step-objective\">\n              Une action concr\u00e8te et r\u00e9alisable\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Proposer une piste, pas une exigence :\n          quelque chose de pr\u00e9cis et de n\u00e9gociable.\n          Selon la relation, la marge de n\u00e9gociation peut \u00eatre plus ou moins grande,\n          et c'est utile d'en tenir compte.\n        <\/p>\n\n        <div class=\"reflection\">\n\n          <div class=\"reflection-title\">\n            Avant de formuler ma demande\n          <\/div>\n\n          <p>\n            Qu'est-ce que je sais r\u00e9ellement de la situation de l'autre ?\n            Qu'est-ce que je suppose sans en \u00eatre certain(e) ?\n          <\/p>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s5prep\">\n            Ce que je sais \/ ce que je suppose\n          <\/label>\n\n          <textarea\n            id=\"jiris_s5prep\"\n            data-label=\"Ce que je sais \/ ce que je suppose\"\n            placeholder=\"Ce que je sais : \u2026 \/ Ce que je suppose : \u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n        <div class=\"example\">\n\n          <strong>Exemple<\/strong>\n\n          \u00ab Serait-il possible de nous pr\u00e9venir au moins la veille\n          lorsqu'un rendez-vous doit \u00eatre d\u00e9plac\u00e9 ? \u00bb\n\n        <\/div>\n\n        <div class=\"reflection\">\n\n          <div class=\"reflection-title\">\n            Une demande laisse une possibilit\u00e9 de r\u00e9ponse\n          <\/div>\n\n          <p>\n            L'autre personne peut accepter, proposer une autre solution,\n            demander du temps ou refuser.\n            Pr\u00e9parer une demande ne permet pas de contr\u00f4ler la r\u00e9ponse.\n          <\/p>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s5\">\n            Ma demande\n          <\/label>\n\n          <textarea\n            id=\"jiris_s5\"\n            data-label=\"Ma demande\"\n            placeholder=\"J'aimerais que nous puissions\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =====================================================\n           \u00c9TAPE 6 \u2014 LE MOMENT ET LE LIEU\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">6<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Le moment et le lieu\n            <\/h2>\n\n            <p class=\"step-objective\">\n              Un cadre qui me convient\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Le moment et l'endroit comptent autant que les mots.\n          Vous pouvez choisir un moment calme, sans public, avec assez de temps devant vous.\n          Un \u00e9change \u00e9crit ou une autre fa\u00e7on de communiquer peut aussi convenir\n          selon la situation.\n        <\/p>\n\n        <div class=\"example\">\n\n          <strong>Exemple<\/strong>\n\n          \u00ab Un appel en fin de journ\u00e9e, quand je ne suis pas press\u00e9(e),\n          plut\u00f4t qu'un \u00e9change devant les autres. \u00bb\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s6\">\n            Le moment et le lieu\n          <\/label>\n\n          <textarea\n            id=\"jiris_s6\"\n            data-label=\"Le moment et le lieu\"\n            placeholder=\"Ce serait plus facile pour moi si\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =====================================================\n           \u00c9TAPE 7 \u2014 SI L'\u00c9CHANGE NE SE PASSE PAS COMME PR\u00c9VU\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">7<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Si l'\u00e9change ne se passe pas comme pr\u00e9vu\n            <\/h2>\n\n            <p class=\"step-objective\">\n              Pr\u00e9voir ce que je ferai si la situation devient difficile\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Pr\u00e9voir diff\u00e9rentes possibilit\u00e9s peut vous aider \u00e0 ne pas devoir\n          tout d\u00e9cider dans le feu de l'\u00e9change.\n          Vous pouvez interrompre la conversation si vous en avez besoin,\n          mais la r\u00e9action de l'autre peut aussi prendre d'autres formes.\n        <\/p>\n\n        <div class=\"example\">\n\n          <strong>Exemple<\/strong>\n\n          <ul>\n            <li>\n              <strong>Ma limite :<\/strong>\n              \u00ab Si la voix monte, je m'arr\u00eate. \u00bb\n            <\/li>\n            <li>\n              <strong>Ma phrase de pause :<\/strong>\n              \u00ab J'ai besoin d'un moment, reprenons demain. \u00bb\n            <\/li>\n            <li>\n              <strong>Si l'autre ne souhaite pas parler maintenant :<\/strong>\n              \u00ab Je peux lui laisser du temps et d\u00e9cider plus tard de la suite. \u00bb\n            <\/li>\n            <li>\n              <strong>Ensuite :<\/strong>\n              \u00ab J'appelle une amie et je marche dix minutes. \u00bb\n            <\/li>\n          <\/ul>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s7a\">\n            Ma limite : \u00e0 quel moment je m'arr\u00eate\n          <\/label>\n\n          <textarea\n            id=\"jiris_s7a\"\n            data-label=\"Ma limite\"\n            placeholder=\"Si\u2026, alors je\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s7b\">\n            Ma phrase de pause\n          <\/label>\n\n          <textarea\n            id=\"jiris_s7b\"\n            data-label=\"Ma phrase de pause\"\n            placeholder=\"J'ai besoin de\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s7c\">\n            Si l'autre ne souhaite pas parler maintenant\n          <\/label>\n\n          <textarea\n            id=\"jiris_s7c\"\n            data-label=\"Si l'autre ne souhaite pas parler maintenant\"\n            placeholder=\"Si la personne refuse, demande un d\u00e9lai ou ne souhaite pas avoir cette conversation, je choisirai de\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s7d\">\n            Ce que je ferai ensuite pour prendre soin de moi\n          <\/label>\n\n          <textarea\n            id=\"jiris_s7d\"\n            data-label=\"Ce que je ferai ensuite\"\n            placeholder=\"Apr\u00e8s, je pourrai\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =====================================================\n           \u00c9TAPE 8 \u2014 MON PROCHAIN PAS\n           ===================================================== -->\n\n      <section class=\"step\">\n\n        <div class=\"step-header\">\n\n          <div class=\"step-number\">8<\/div>\n\n          <div class=\"step-title-block\">\n\n            <h2 class=\"step-title\">\n              Mon prochain pas\n            <\/h2>\n\n            <p class=\"step-objective\">\n              D\u00e9cider de la suite, sans devoir tout r\u00e9soudre maintenant\n            <\/p>\n\n          <\/div>\n        <\/div>\n\n        <p class=\"step-description\">\n          Une pr\u00e9paration devient utile lorsqu'elle peut d\u00e9boucher sur une prochaine \u00e9tape,\n          m\u00eame petite. Cette \u00e9tape n'a pas n\u00e9cessairement besoin d'\u00eatre la conversation elle-m\u00eame.\n          Vous pouvez choisir ce qui vous semble le plus appropri\u00e9 dans votre situation.\n        <\/p>\n\n        <div class=\"example\">\n\n          <strong>Exemples<\/strong>\n\n          <ul>\n            <li>Avoir la conversation.<\/li>\n            <li>Envoyer plut\u00f4t un message ou choisir une autre fa\u00e7on de communiquer.<\/li>\n            <li>Demander du soutien avant de faire le prochain pas.<\/li>\n            <li>Attendre un moment plus appropri\u00e9.<\/li>\n            <li>D\u00e9cider de ne pas avoir cette conversation maintenant.<\/li>\n          <\/ul>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s8\">\n            Ce que je choisis de faire maintenant\n          <\/label>\n\n          <textarea\n            id=\"jiris_s8\"\n            data-label=\"Mon prochain pas\"\n            placeholder=\"Pour la suite, je vais\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n        <div class=\"input-wrapper\">\n\n          <label for=\"jiris_s8when\">\n            Quand, si je le sais\n          <\/label>\n\n          <textarea\n            id=\"jiris_s8when\"\n            data-label=\"Quand\"\n            placeholder=\"Aujourd'hui\u2026 \/ demain\u2026 \/ apr\u00e8s avoir\u2026 \/ je ne sais pas encore\u2026\"\n          ><\/textarea>\n\n        <\/div>\n\n      <\/section>\n\n    <\/div>\n\n\n    <!-- =======================================================\n         RAPPEL\n         ======================================================= -->\n\n    <section class=\"jiris-tip\">\n\n      <div class=\"tip-header\">\n\n        <span class=\"tip-icon\" aria-hidden=\"true\">\ud83c\udf31<\/span>\n\n        <h2 class=\"tip-title\">\n          Un petit pas suffit\n        <\/h2>\n\n      <\/div>\n\n      <div class=\"tip-content\">\n        Une conversation pr\u00e9par\u00e9e ne garantit pas le r\u00e9sultat souhait\u00e9.\n        Elle peut toutefois vous aider \u00e0 mieux savoir ce que vous voulez exprimer,\n        ce qui compte pour vous et ce que vous choisirez de faire selon la r\u00e9ponse\n        ou la situation.\n        <br><br>\n        <strong>\n          Vous n'avez pas \u00e0 tout r\u00e9soudre aujourd'hui.\n          Vous pouvez simplement choisir le prochain pas qui a du sens pour vous.\n        <\/strong>\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =======================================================\n         CONFIDENTIALIT\u00c9 \u2014 CHOIX DE CONSERVATION\n         ======================================================= -->\n\n    <div class=\"privacy-box\">\n\n      <label\n        class=\"privacy-label\"\n        for=\"jiris_conversation_rememberResponses\"\n      >\n\n        <input\n          type=\"checkbox\"\n          id=\"jiris_conversation_rememberResponses\"\n          aria-describedby=\"jiris_conversation_privacyExplanation\"\n        >\n\n        <span>\n          <strong>\n            Conserver mes r\u00e9ponses sur cet appareil\n          <\/strong>\n          <br>\n          Par d\u00e9faut, vos r\u00e9ponses ne sont pas m\u00e9moris\u00e9es :\n          elles disparaissent si vous rechargez la page.\n          En cochant cette case, elles seront conserv\u00e9es dans le stockage\n          local de votre navigateur et vous pourrez les retrouver \u00e0 votre\n          prochaine visite.\n        <\/span>\n\n      <\/label>\n\n      <p\n        class=\"privacy-note\"\n        id=\"jiris_conversation_privacyExplanation\"\n      >\n        \u26a0\ufe0f Sur un appareil partag\u00e9, \u00e9vitez d'activer cette option\n        ou effacez vos r\u00e9ponses avant de partir.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- =======================================================\n         ACTIONS\n         ======================================================= -->\n\n    <div class=\"actions\">\n\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        id=\"jiris_copy\"\n      >\n        \ud83d\udccb Copier ma pr\u00e9paration\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        id=\"jiris_print\"\n      >\n        \ud83d\udda8\ufe0f Imprimer\n      <\/button>\n\n      <button\n        type=\"button\"\n        class=\"btn btn-secondary\"\n        id=\"jiris_clear\"\n      >\n        \u2728 Effacer mes r\u00e9ponses\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- TOAST -->\n\n  <div\n    class=\"toast\"\n    id=\"jiris_toast\"\n    role=\"status\"\n    aria-live=\"polite\"\n  ><\/div>\n\n\n  <!-- =========================================================\n       JAVASCRIPT\n       ========================================================= -->\n\n  <script>\n  (function () {\n    'use strict';\n\n    var wrapper = document.querySelector('.jiris-app-wrapper');\n    if (!wrapper) return;\n\n    \/* =======================================================\n       \u00c9L\u00c9MENTS\n       ======================================================= *\/\n\n    var inputs = wrapper.querySelectorAll(\n      'textarea'\n    );\n\n    var toast = wrapper.querySelector('#jiris_toast');\n\n    var copyButton = wrapper.querySelector('#jiris_copy');\n\n    var printButton = wrapper.querySelector('#jiris_print');\n\n    var clearButton = wrapper.querySelector('#jiris_clear');\n\n    var printDate = wrapper.querySelector('#jiris_printDate');\n\n    var rememberResponses =\n      wrapper.querySelector('#jiris_conversation_rememberResponses');\n\n    var privacyExplanation =\n      wrapper.querySelector('#jiris_conversation_privacyExplanation');\n\n    var originalCopyText = copyButton.innerHTML;\n\n\n    \/*\n     * Deux cl\u00e9s distinctes, comme dans les Outils 2, 3 et 4 :\n     *\n     *  - PREF_KEY : m\u00e9morise uniquement le choix explicite\n     *    de l'utilisateur. La cl\u00e9 est supprim\u00e9e lorsque\n     *    la case est d\u00e9coch\u00e9e, pour que le d\u00e9faut\n     *    \u00ab rien n'est m\u00e9moris\u00e9 \u00bb reste litt\u00e9ralement vrai.\n     *\n     *  - KEY : pr\u00e9fixe des r\u00e9ponses elles-m\u00eames.\n     *    Aucune cl\u00e9 sous ce pr\u00e9fixe n'existe tant que\n     *    l'utilisateur n'a pas activ\u00e9 la conservation.\n     *\/\n\n    var PREF_KEY = 'jiris_conversation_v1_preference';\n\n    var KEY = 'jiris_conversation_v1_';\n\n\n    \/* =======================================================\n       STOCKAGE \u2014 DISPONIBILIT\u00c9 (test r\u00e9el)\n       ======================================================= *\/\n\n    function storageAvailable() {\n      try {\n        var testKey = '__jiris_storage_test__';\n\n        localStorage.setItem(testKey, '1');\n        var verified = localStorage.getItem(testKey) === '1';\n        localStorage.removeItem(testKey);\n\n        return verified;\n\n      } catch (e) {\n        return false;\n      }\n    }\n\n    var canUseStorage = storageAvailable();\n\n\n    \/* =======================================================\n       STOCKAGE \u2014 R\u00c9PONSES (pr\u00e9fixe KEY)\n       ======================================================= *\/\n\n    function store(action, id, value) {\n\n      if (!canUseStorage) {\n        return action === 'get' ? null : false;\n      }\n\n      try {\n\n        if (action === 'get') {\n          return localStorage.getItem(KEY + id);\n        }\n\n        if (action === 'set') {\n          localStorage.setItem(KEY + id, value);\n          return localStorage.getItem(KEY + id) === String(value);\n        }\n\n        if (action === 'remove') {\n          localStorage.removeItem(KEY + id);\n          return localStorage.getItem(KEY + id) === null;\n        }\n\n      } catch (e) {\n        return false;\n      }\n\n      return false;\n    }\n\n\n    \/* =======================================================\n       STOCKAGE \u2014 PR\u00c9F\u00c9RENCE (cl\u00e9 PREF_KEY s\u00e9par\u00e9e)\n       ======================================================= *\/\n\n    function getPreference() {\n\n      if (!canUseStorage) return null;\n\n      try {\n        return localStorage.getItem(PREF_KEY);\n      } catch (e) {\n        return null;\n      }\n    }\n\n\n    function setPreference(value) {\n\n      if (!canUseStorage) return false;\n\n      try {\n\n        if (value === null) {\n\n          localStorage.removeItem(PREF_KEY);\n\n          return localStorage.getItem(PREF_KEY) === null;\n        }\n\n        localStorage.setItem(PREF_KEY, String(value));\n\n        return localStorage.getItem(PREF_KEY) === String(value);\n\n      } catch (e) {\n        return false;\n      }\n    }\n\n\n    function isRemembering() {\n      return rememberResponses &&\n        rememberResponses.checked === true;\n    }\n\n\n    \/* =======================================================\n       TOAST\n       ======================================================= *\/\n\n    var toastTimer = null;\n\n    function showToast(message) {\n\n      toast.textContent = message;\n\n      toast.classList.add('show');\n\n      clearTimeout(toastTimer);\n\n      toastTimer = setTimeout(function () {\n        toast.classList.remove('show');\n      }, 2500);\n    }\n\n\n    \/* =======================================================\n       REDIMENSIONNEMENT AUTOMATIQUE (peut r\u00e9tr\u00e9cir)\n       ======================================================= *\/\n\n    function autoResize(field) {\n\n      if (\n        field &&\n        field.tagName &&\n        field.tagName.toLowerCase() === 'textarea'\n      ) {\n\n        field.style.height = 'auto';\n\n        field.style.height =\n          Math.max(field.scrollHeight, 80) + 'px';\n      }\n    }\n\n\n    \/* =======================================================\n       \u00c9TAT DE DISPONIBILIT\u00c9 DU STOCKAGE\n       ======================================================= *\/\n\n    function updateStorageAvailabilityUI() {\n\n      if (canUseStorage) return;\n\n      rememberResponses.disabled = true;\n      rememberResponses.checked = false;\n\n      if (privacyExplanation) {\n        privacyExplanation.textContent =\n          'La m\u00e9morisation locale n\u2019est pas disponible sur cet appareil. ' +\n          'Vos r\u00e9ponses ne pourront pas \u00eatre conserv\u00e9es apr\u00e8s votre visite.';\n      }\n    }\n\n\n    \/* =======================================================\n       SAUVEGARDE DES R\u00c9PONSES\n       ======================================================= *\/\n\n    function saveCurrentResponses() {\n\n      if (!isRemembering()) {\n        return;\n      }\n\n      inputs.forEach(function (field) {\n\n        store(\n          'set',\n          field.id,\n          field.value\n        );\n\n      });\n\n    }\n\n\n    \/* =======================================================\n       CHARGEMENT INITIAL\n       ======================================================= *\/\n\n    function loadSavedResponses() {\n\n      var savedPreference = getPreference();\n\n      if (savedPreference === 'true') {\n        rememberResponses.checked = true;\n      } else {\n        rememberResponses.checked = false;\n      }\n\n\n      if (!isRemembering()) {\n        updateStorageAvailabilityUI();\n        return;\n      }\n\n\n      inputs.forEach(function (field) {\n\n        var savedValue =\n          store('get', field.id);\n\n        if (savedValue !== null) {\n          field.value = savedValue;\n        }\n\n        autoResize(field);\n\n      });\n\n      updateStorageAvailabilityUI();\n    }\n\n\n    \/* =======================================================\n       GESTION DU CHOIX DE CONSERVATION\n       ======================================================= *\/\n\n    rememberResponses.addEventListener(\n      'change',\n      function () {\n\n        if (!canUseStorage) {\n          rememberResponses.checked = false;\n          updateStorageAvailabilityUI();\n          showToast(\n            'La m\u00e9morisation locale n\u2019est pas disponible dans ce navigateur.'\n          );\n          return;\n        }\n\n        if (rememberResponses.checked) {\n\n          var preferenceSaved =\n            setPreference('true');\n\n          if (!preferenceSaved) {\n\n            rememberResponses.checked = false;\n            canUseStorage = false;\n            updateStorageAvailabilityUI();\n            showToast(\n              'La m\u00e9morisation locale n\u2019a pas pu \u00eatre activ\u00e9e sur cet appareil.'\n            );\n            return;\n          }\n\n          saveCurrentResponses();\n\n          showToast(\n            '\u2713 La m\u00e9morisation locale est activ\u00e9e.'\n          );\n\n        } else {\n\n          \/*\n           * On supprime la cl\u00e9 de pr\u00e9f\u00e9rence au lieu\n           * d'\u00e9crire 'false'. Le d\u00e9faut \u00ab rien n'est m\u00e9moris\u00e9 \u00bb\n           * redevient litt\u00e9ralement vrai dans le localStorage.\n           *\/\n\n          setPreference(null);\n\n          clearStoredAnswersOnly();\n\n          showToast(\n            '\u2713 Vos r\u00e9ponses ne seront plus m\u00e9moris\u00e9es.'\n          );\n        }\n      }\n    );\n\n\n    \/* =======================================================\n       CHARGEMENT INITIAL (suite)\n       ======================================================= *\/\n\n    loadSavedResponses();\n\n\n    \/* =======================================================\n       CHAMPS TEXTES\n       ======================================================= *\/\n\n    inputs.forEach(function (field) {\n\n      autoResize(field);\n\n      field.addEventListener(\n        'input',\n        function () {\n\n          autoResize(field);\n\n          if (isRemembering()) {\n\n            store(\n              'set',\n              field.id,\n              field.value\n            );\n          }\n\n        }\n      );\n\n    });\n\n\n    \/* =======================================================\n       DATE D'IMPRESSION\n       ======================================================= *\/\n\n    function updatePrintDate() {\n\n      var now = new Date();\n\n      var formattedDate =\n        now.toLocaleDateString(\n          'fr-CA',\n          {\n            year: 'numeric',\n            month: 'long',\n            day: 'numeric'\n          }\n        );\n\n      printDate.textContent =\n        'Pr\u00e9paration r\u00e9alis\u00e9e le ' +\n        formattedDate;\n    }\n\n\n    window.addEventListener(\n      'beforeprint',\n      updatePrintDate\n    );\n\n\n    \/* =======================================================\n       EFFACER LES DONN\u00c9ES STOCK\u00c9ES (r\u00e9ponses uniquement)\n       ======================================================= *\/\n\n    function clearStoredAnswersOnly() {\n\n      inputs.forEach(function (field) {\n\n        store(\n          'remove',\n          field.id\n        );\n\n      });\n\n    }\n\n\n    \/* =======================================================\n       V\u00c9RIFIER SI AU MOINS UNE R\u00c9PONSE EXISTE\n       ======================================================= *\/\n\n    function hasAnyResponse() {\n\n      var hasField = false;\n\n      inputs.forEach(function (field) {\n        if (field.value.trim() !== '') {\n          hasField = true;\n        }\n      });\n\n      return hasField;\n    }\n\n\n    \/* =======================================================\n       CONSTRUIRE LE TEXTE \u00c0 COPIER\n       ======================================================= *\/\n\n    function buildPreparationText() {\n\n      var sections = [];\n\n\n      wrapper\n        .querySelectorAll('.step')\n        .forEach(function (step) {\n\n          var titleElement =\n            step.querySelector('.step-title');\n\n          var stepTitle =\n            titleElement\n              ? titleElement.textContent.trim()\n              : '';\n\n          var filledFields = [];\n\n\n          step\n            .querySelectorAll('textarea')\n            .forEach(function (field) {\n\n              var value =\n                field.value.trim();\n\n              if (value !== '') {\n\n                var label =\n                  field.dataset.label ||\n                  (\n                    field.previousElementSibling &&\n                    field.previousElementSibling.tagName &&\n                    field.previousElementSibling.tagName.toLowerCase() === 'label'\n                      ? field.previousElementSibling.textContent.trim()\n                      : 'R\u00e9ponse'\n                  );\n\n                filledFields.push({\n                  label: label,\n                  value: value\n                });\n\n              }\n\n            });\n\n\n          if (filledFields.length > 0) {\n\n            var sectionText =\n              '\u25b8 ' +\n              stepTitle.toUpperCase() +\n              '\\n';\n\n            filledFields.forEach(\n              function (item) {\n\n                sectionText +=\n                  item.label +\n                  ' : ' +\n                  item.value +\n                  '\\n';\n\n              }\n            );\n\n            sections.push(\n              sectionText.trim()\n            );\n\n          }\n\n        });\n\n\n      if (sections.length === 0) {\n        return '';\n      }\n\n\n      return (\n        '\ud83d\udde3\ufe0f MA PR\u00c9PARATION DE CONVERSATION\\n' +\n        '================================\\n\\n' +\n        sections.join('\\n\\n') +\n        '\\n\\n\u2014\\n' +\n        'Pr\u00e9par\u00e9 avec JIRIS'\n      );\n\n    }\n\n\n    \/* =======================================================\n       COPIE DE SECOURS\n       ======================================================= *\/\n\n    function fallbackCopy(text) {\n\n      var temporary =\n        document.createElement('textarea');\n\n      temporary.value = text;\n\n      temporary.setAttribute(\n        'readonly',\n        ''\n      );\n\n      temporary.style.position =\n        'fixed';\n\n      temporary.style.opacity =\n        '0';\n\n      document.body.appendChild(\n        temporary\n      );\n\n      temporary.select();\n\n      try {\n\n        document.execCommand('copy');\n\n        return true;\n\n      } catch (e) {\n\n        return false;\n\n      } finally {\n\n        document.body.removeChild(\n          temporary\n        );\n\n      }\n    }\n\n\n    \/* =======================================================\n       FEEDBACK COPIE\n       ======================================================= *\/\n\n    function showCopiedFeedback() {\n\n      copyButton.textContent = '\u2713 Copi\u00e9 !';\n      copyButton.disabled = true;\n\n      showToast('\u2713 Votre pr\u00e9paration a \u00e9t\u00e9 copi\u00e9e.');\n\n      setTimeout(\n        function () {\n          copyButton.innerHTML = originalCopyText;\n          copyButton.disabled = false;\n        },\n        2000\n      );\n    }\n\n\n    \/* =======================================================\n       COPIER\n       ======================================================= *\/\n\n    copyButton.addEventListener(\n      'click',\n      function () {\n\n        if (!hasAnyResponse()) {\n\n          showToast(\n            '\u00c9crivez au moins une r\u00e9ponse avant de copier votre pr\u00e9paration.'\n          );\n\n          return;\n        }\n\n\n        var text = buildPreparationText();\n\n\n        function success() {\n          showCopiedFeedback();\n        }\n\n\n        function failure() {\n\n          if (fallbackCopy(text)) {\n\n            success();\n\n          } else {\n\n            showToast(\n              'La copie a \u00e9chou\u00e9. Vous pouvez utiliser \u00ab Imprimer \u00bb.'\n            );\n\n          }\n\n        }\n\n\n        if (\n          navigator.clipboard &&\n          navigator.clipboard.writeText\n        ) {\n\n          navigator.clipboard\n            .writeText(text)\n            .then(success)\n            .catch(failure);\n\n        } else {\n\n          failure();\n\n        }\n\n      }\n    );\n\n\n    \/* =======================================================\n       IMPRESSION\n       ======================================================= *\/\n\n    printButton.addEventListener(\n      'click',\n      function () {\n\n        updatePrintDate();\n\n        window.print();\n\n      }\n    );\n\n\n    \/* =======================================================\n       EFFACER\n       ======================================================= *\/\n\n    clearButton.addEventListener(\n      'click',\n      function () {\n\n        if (\n          !window.confirm(\n            'Effacer toutes vos r\u00e9ponses de cet appareil ?'\n          )\n        ) {\n\n          return;\n\n        }\n\n\n        inputs.forEach(\n          function (field) {\n\n            field.value = '';\n\n            autoResize(field);\n\n          }\n        );\n\n\n        clearStoredAnswersOnly();\n\n\n        showToast(\n          '\u2713 Vos r\u00e9ponses ont \u00e9t\u00e9 effac\u00e9es.'\n        );\n\n      }\n    );\n\n  })();\n  <\/script>\n\n<\/div>\n<!-- Fin de l'outil JIRIS - Outil 1 -->\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>Pr\u00e9parer une conversation difficile JIRIS Passer \u00e0 l&rsquo;action Outil 1 Pr\u00e9parer une conversation difficile Organiser ses id\u00e9es pour s&rsquo;exprimer avec clart\u00e9, \u00e0 son rythme, en prenant soin de soi. Une conversation importante n&rsquo;a pas \u00e0 \u00eatre un affrontement. Quand les enjeux sont \u00e9lev\u00e9s, les \u00e9motions peuvent prendre beaucoup de place. Cet outil vous aide \u00e0 [&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":1,"footnotes":""},"class_list":["post-4053","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/4053","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=4053"}],"version-history":[{"count":102,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/4053\/revisions"}],"predecessor-version":[{"id":4679,"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/pages\/4053\/revisions\/4679"}],"wp:attachment":[{"href":"https:\/\/jiris.ca\/en\/wp-json\/wp\/v2\/media?parent=4053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}