diff --git a/source/components/PaySlip.js b/source/components/PaySlip.js
index 511fd6bf2..f02d4be03 100644
--- a/source/components/PaySlip.js
+++ b/source/components/PaySlip.js
@@ -85,13 +85,13 @@ export default compose(
 										<Value
 											nilValueSymbol="—"
 											unit="€"
-											style={{ backgroundColor: lightestColour }}>
+											customCSS="background-color: var(--lightestColour)">
 											{cotisation.montant.partPatronale}
 										</Value>
 										<Value
 											nilValueSymbol="—"
 											unit="€"
-											style={{ backgroundColor: lightestColour }}>
+											customCSS="background-color: var(--lightestColour)">
 											{cotisation.montant.partSalariale}
 										</Value>
 									</Fragment>
diff --git a/source/components/Value.js b/source/components/Value.js
index ba1e9c41d..67d02aa38 100644
--- a/source/components/Value.js
+++ b/source/components/Value.js
@@ -23,8 +23,10 @@ let booleanTranslations = {
 	en: { true: 'Yes', false: 'No' }
 }
 
-let style = `
+let style = customStyle => `
 		font-family: 'Courier New', Courier, monospace;
+
+		${customStyle}
 `
 
 export default withLanguage(
@@ -35,7 +37,8 @@ export default withLanguage(
 		numFractionDigits,
 		children,
 		negative,
-		language
+		language,
+		customCSS = ''
 	}) => {
 		/* Either an entire rule object is passed, or just the right attributes and the value as a JSX  child*/
 		let nodeValue = value === undefined ? children : value
@@ -46,7 +49,7 @@ export default withLanguage(
 			nodeValue === null
 		)
 			return (
-				<span css={style} className="value">
+				<span css={style(customCSS)} className="value">
 					-
 				</span>
 			)
@@ -71,7 +74,7 @@ export default withLanguage(
 				)
 
 		return nodeValue == undefined ? null : (
-			<span css={style} className="value">
+			<span css={style(customCSS)} className="value">
 				{negative ? '-' : ''}
 				{formattedValue}
 			</span>