diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 4488bd76..8af5b824 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -850,6 +850,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   élément à l'autre sont affichées. (visible ou none)</p></td>
   <td><p><var>visible</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$carrousel-item-mask-color</code></p></td>
+  <td><p>Couleur du masque qui se superpose à l'image de la diapositive</p></td>
+  <td><p><var>rgba(0, 0, 0, 0.3)</var></p></td>
+ </tr>
 </table>
 
 </section>
diff --git a/static/includes/_carrousel.scss b/static/includes/_carrousel.scss
index 4738062f..ae2258f1 100644
--- a/static/includes/_carrousel.scss
+++ b/static/includes/_carrousel.scss
@@ -1,5 +1,6 @@
 /* $carrousel-height: height of carrousel image */
 $carrousel-height: 20rem !default;
+$carrousel-item-mask-color: rgba(0, 0, 0, 0.3) !default;
 
 /* $carrousel-text-position: [vertical option] [horizontal option] */
 /* vertical options: top | middle | bottom */
@@ -47,6 +48,7 @@ div.carrousel-content {
 			height: 100%;
 			background-size: cover;
 			padding: 10px;
+			@if ($carrousel-item-mask-color and $carrousel-item-mask-color != transparent) {
 			&::after {
 				content: "";
 				display: block;
@@ -55,8 +57,8 @@ div.carrousel-content {
 				width: 100%;
 				height: 100%;
 				position: absolute;
-				background: black;
-				opacity: 0.3;
+				background: $carrousel-item-mask-color;
+			}
 			}
 			div.carrousel-item-content {
 				@if $carrousel-navigation == "visible" {