diff --git a/css/backoffice/utils/helpers/_misc.scss b/css/backoffice/utils/helpers/_misc.scss
index a26aa75908..39d82878f8 100644
--- a/css/backoffice/utils/helpers/_misc.scss
+++ b/css/backoffice/utils/helpers/_misc.scss
@@ -16,99 +16,121 @@
  * You should have received a copy of the GNU Affero General Public License
  */
 
-.ibo-is-visible{
-	display: inherit !important; /* Note: !important is necessary as it needs to overload any standard rules */
-	visibility: visible !important;
+/**************/
+/* Visibility */
+/**************/
+.ibo-is-visible {
+  display: inherit !important; /* Note: !important is necessary as it needs to overload any standard rules */
+  visibility: visible !important;
 }
-.ibo-is-hidden{
-	display: none !important; /* Note: !important is necessary as it needs to overload any standard rules */
+
+.ibo-is-hidden {
+  display: none !important; /* Note: !important is necessary as it needs to overload any standard rules */
 }
+
+/****************************/
+/* Disposition / alignement */
+/****************************/
 .ibo-is-fullwidth {
   width: 100%;
 }
 
-/* Used on all ancestors when an element needs to be fullscreen (see .ibo-is-fullscreen) */
-html.ibo-has-fullscreen-descendant{
-	position: fixed !important;
-	width: 0 !important;
-	height: 0 !important;
-}
-body.ibo-has-fullscreen-descendant{
-	width: 0 !important;
-	height: 0 !important;
-	overflow: hidden !important;
-}
-.ibo-has-fullscreen-descendant{
-	position: static !important;
-	overflow: visible !important;
-	z-index: 9000 !important;
-}
-/* Used on a fullscreen element (see .ibo-has-fullscreen-descendant) */
-.ibo-is-fullscreen{
-	position: absolute;
-	top: 0 !important;
-	left: 0 !important;
-	margin: 0 !important;
-	padding: 0 !important;
-	width: 100vw;
-	height: 100vh;
-	overflow: auto;
-	z-index: 9000;
+%ibo-fully-centered-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-%ibo-fully-centered-content{
-	display: flex;
-	justify-content: center;
-	align-items: center;
+%ibo-vertically-centered-content {
+  display: flex;
+  align-items: center;
 }
-%ibo-vertically-centered-content{
-	display: flex;
-	align-items: center;
-}
-/* Typically to align icons and text */
-%ibo-baseline-centered-content{
-	display: flex;
-	align-items: baseline;
+
+/* Typically to align icons and text as it is a good practice to align them on the baseline and not the "middle" */
+%ibo-baseline-centered-content {
+  display: flex;
+  align-items: baseline;
 }
+
 /* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */
-%ibo-full-height-content{
-	display: flex;
-	align-items: stretch;
+%ibo-full-height-content {
+  display: flex;
+  align-items: stretch;
 }
 
-%ibo-text-truncated-with-ellipsis{
-	white-space: nowrap;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
+/**************/
+/* Fullscreen */
+/**************/
+/* Used on all ancestors when an element needs to be fullscreen (see .ibo-is-fullscreen) */
+html.ibo-has-fullscreen-descendant {
+  position: fixed !important;
+  width: 0 !important;
+  height: 0 !important;
 }
-.ibo-text-truncated-with-ellipsis{
+
+body.ibo-has-fullscreen-descendant {
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+.ibo-has-fullscreen-descendant {
+  position: static !important;
+  overflow: visible !important;
+  z-index: 9000 !important;
+}
+
+/* Used on a fullscreen element (see .ibo-has-fullscreen-descendant) */
+.ibo-is-fullscreen {
+  position: absolute;
+  top: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  z-index: 9000;
+}
+
+/****************/
+/* Text helpers */
+/****************/
+%ibo-text-truncated-with-ellipsis {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.ibo-text-truncated-with-ellipsis {
   @extend %ibo-text-truncated-with-ellipsis;
 }
 
-%ibo-medallion{
-	position: relative;
-	border-radius: var(--ibo-border-radius-full);
-	border: 2px solid var(--ibo-color-grey-300);
-	overflow: hidden;
-	@extend %ibo-fully-centered-content;
+/* Use this when you want the hyperlink to be of the color of its container's text instead of the global hyperlink color */
+%ibo-hyperlink-inherited-colors {
+  color: inherit;
 
-	> *{
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-position: center;
-		background-size: contain;
-		background-color: var(--ibo-color-grey-500);
-	}
+  &:hover,
+  &:active {
+    color: inherit;
+  }
 }
 
-%ibo-hyperlink-inherited-colors{
-	color: inherit;
+%ibo-medallion {
+  position: relative;
+  border-radius: var(--ibo-border-radius-full);
+  border: 2px solid var(--ibo-color-grey-300);
+  overflow: hidden;
+  @extend %ibo-fully-centered-content;
 
-	&:hover,
-	&:active{
-		color: inherit;
-	}
-}
\ No newline at end of file
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: contain;
+    background-color: var(--ibo-color-grey-500);
+  }
+}