diff --git a/module/rdd-roll.js b/module/rdd-roll.js
index cf8d2a70..aff36f6b 100644
--- a/module/rdd-roll.js
+++ b/module/rdd-roll.js
@@ -203,22 +203,22 @@ export class RdDRoll extends Dialog {
       console.log(html.find('.iconeSmile'));
       this.updateRollResult();
     });     
-    html.find('#useAppelAuMoralCheckbox').change((event) => { /* l'appel au moral, qui donne un bonus de +1 */
-	  this.rollData.appelAuMoralDemander = event.currentTarget.checked
-      if ( this.rollData.appelAuMoralDemander ) {
-		if ( this.rollData.moral > 0 ) {
-          html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-heureux.svg";
-		  html.find('#textSmile')[0].innerHTML = "Appel au moral";
+    html.find('#iconeSmile').click((event) => { /* l'appel au moral, qui donne un bonus de +1 */
+	  this.rollData.appelAuMoralDemander = ! this.rollData.appelAuMoralDemander;
+        if ( this.rollData.appelAuMoralDemander ) {
+		  if ( this.rollData.moral > 0 ) {
+            html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-heureux.svg";
+		    html.find('#tooltipAppelAuMoralText')[0].innerHTML = "Appel au moral";
+	      } else {
+            html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-malheureux.svg";
+		    html.find('#tooltipAppelAuMoralText')[0].innerHTML = "Appel à l'énergie du désespoir";
+	      }
 	    } else {
-          html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-malheureux.svg";
-		  html.find('#textSmile')[0].innerHTML = "Appel à l'énergie du désespoir";
-	    }
-	  } else {
-		html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg";
-		html.find('#textSmile')[0].innerHTML = "Sans appel au moral";
-	  } 
+		  html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg";
+		  html.find('#tooltipAppelAuMoralText')[0].innerHTML = "Sans appel au moral";
+	    } 
       this.updateRollResult();
-    });
+	});
     // Section Méditation
     html.find('.conditionMeditation').change((event) => {
       let condition = event.currentTarget.attributes['id'].value;
diff --git a/styles/simple.css b/styles/simple.css
index 9e33cca0..fb4342b2 100644
--- a/styles/simple.css
+++ b/styles/simple.css
@@ -812,17 +812,13 @@ ul, li {
   left: 0px;
   text-align: center;
 }
+
+/* ======================================== */
+/* dialogue competence : Appel au moral */
 .diffAppelAuMoral {
   display: none !important;
 }
-.diffAppelAuMoral-checker {
-  height: 20px;
-  background-image: url('../icons/moral-neutre.svg');
-  background-size: cover;
-}
-.diffAppelAuMoral:checked + .diffAppelAuMoral-checker {
-  background-image: url('../icons/moral-heureux.svg');
-}
+
 .iconeSmile	 {
   height: 20px;
   width: 20px;
@@ -830,9 +826,37 @@ ul, li {
   outline: none;
   background-size: cover;
 }
-.textSmile {
+
+/* Tooltip container */
+.tooltipAppelAuMoral {
+  position: relative;
+  display: inline-block;
+  border-bottom: 0; 
 }
 
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltipAppelAuMoral:hover .tooltipAppelAuMoralText {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Tooltip text */
+.tooltipAppelAuMoral .tooltipAppelAuMoralText {
+  text-align: center;
+  
+  /* Position the tooltip text */
+  position: absolute;
+  z-index: 1;
+  top: -10px;
+  left: 18%;
+  
+  /* Fade in tooltip */
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+
 /* ======================================== */
 /* Fatigue CSS */
 .table-fatigue {
diff --git a/templates/dialog-competence.html b/templates/dialog-competence.html
index b7a32544..a099493b 100644
--- a/templates/dialog-competence.html
+++ b/templates/dialog-competence.html
@@ -10,6 +10,13 @@
       {{/select}}
   </select>
   <label></label>
+  <div class="form-group" id="divAppelAuMoral" >
+    <div class="tooltipAppelAuMoral">
+      <input class="diffAppelAuMoral"  id="useAppelAuMoralCheckbox" type="checkbox" name="appelAuMoralDemander" />
+      <img for="useAppelAuMoralCheckbox" class="iconeSmile"  id="iconeSmile" src="/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg">
+      <span class="tooltipAppelAuMoralText" id="tooltipAppelAuMoralText">Sans appel au moral</span>
+    </div>
+  </div> 
 </div>
 <div class="form-group">
   {{#if attackerRoll}}
@@ -67,12 +74,6 @@
     {{/if}}
   </div>
 {{/if}}
-<div class="form-group" id="divAppelAuMoral" >
-  <input class="diffAppelAuMoral"  id="useAppelAuMoralCheckbox" type="checkbox" name="appelAuMoralDemander" />
-  <label for="useAppelAuMoralCheckbox" class="diffAppelAuMoral-checker" id="diffAppelAuMoral-checker"></label>
-  <label for="useAppelAuMoralCheckbox" class="textSmile" id="textSmile" >Sans appel au moral</label>
-  <img for="useAppelAuMoralCheckbox" class="iconeSmile"  id="iconeSmile" src="/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg">
-</div>
 
 {{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-surenc.html"}}
 {{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-enctotal.html"}}