diff --git a/publicodes/source/components/mecanisms/Somme.js b/publicodes/source/components/mecanisms/Somme.js
deleted file mode 100644
index fc315b52d..000000000
--- a/publicodes/source/components/mecanisms/Somme.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { path } from 'ramda'
-import { useState } from 'react'
-import Explanation from '../Explanation'
-import { Mecanism, NodeValuePointer } from './common'
-import styled from 'styled-components'
-
-const SommeNode = ({ explanation, nodeValue, unit }) => (
-	<StyledSomme>
-		<Mecanism name="somme" value={nodeValue} unit={unit}>
-			<Table explanation={explanation} unit={unit} />
-		</Mecanism>
-	</StyledSomme>
-)
-export default SommeNode
-
-// We want to put non applicable rules a the bottom of list #1055
-function sortByApplicability(a, b) {
-	const isApplicable = (x) => x.nodeValue === false
-	if (isApplicable(a) === isApplicable(b)) {
-		return 0
-	}
-	return isApplicable(a) ? 1 : -1
-}
-
-let Table = ({ explanation, unit }) => (
-	<div
-		css={`
-			display: flex;
-			max-width: 100%;
-			flex-direction: column;
-		`}
-	>
-		<div>
-			{explanation.sort(sortByApplicability).map((v, i) => (
-				<Row key={i} {...{ v, i }} unit={unit} />
-			))}
-		</div>
-	</div>
-)
-
-/* La colonne peut au clic afficher une nouvelle colonne qui sera une autre somme imbriquée */
-function Row({ v, i, unit }) {
-	let [folded, setFolded] = useState(true),
-		rowFormula = path(['explanation', 'formule', 'explanation'], v),
-		isSomme = rowFormula && rowFormula.name == 'somme'
-
-	return [
-		<StyledRow
-			key={v.name || i}
-			// className={isSomme ? '' : 'noNest'}
-			className={v.nodeValue === false ? 'notApplicable' : ''}
-			onClick={() => setFolded(!folded)}
-		>
-			<div className="element">
-				<Explanation node={v} />
-				{isSomme && (
-					<button className="unfoldIndication ui__ notice small static simple button">
-						{folded ? 'déplier' : 'replier'}
-					</button>
-				)}
-			</div>
-			{v.nodeValue != null && (
-				<div className="situationValue value">
-					<NodeValuePointer data={v.nodeValue} unit={v.unit} />
-				</div>
-			)}
-		</StyledRow>,
-		...(isSomme && !folded
-			? [
-					<div className="nested" key={v.name + '-nest'}>
-						<Table explanation={rowFormula.explanation} unit={v.unit || unit} />
-					</div>,
-			  ]
-			: []),
-	]
-}
-
-const StyledSomme = styled.div`
-	/* mécanisme somme */
-	table {
-		width: 100%;
-		border-collapse: collapse;
-	}
-	tr .element {
-		text-align: left;
-		padding: 0.2rem 0.4rem;
-	}
-	tr .value span {
-		text-align: right;
-	}
-	.nested {
-		padding: 0;
-	}
-`
-const StyledRow = styled.div`
-	display: flex;
-	align-items: center;
-	flex-flow: row nowrap;
-	:nth-child(2n) {
-		background-color: var(--lightestColor);
-	}
-
-	&.notApplicable {
-		opacity: 0.6;
-	}
-
-	.element .result,
-	.element > .variable > .nodeHead > .nodeValue {
-		display: none;
-	}
-	:first-child {
-		border-top: none;
-	}
-
-	.element {
-		flex: 1;
-		max-width: 100%;
-		display: flex;
-		align-items: baseline;
-		padding: 0.1em 0.4em;
-		padding-top: 0.2em;
-		overflow: hidden;
-	}
-	.element .unfoldIndication {
-		text-transform: capitalize;
-		flex: 1;
-		margin-left: 0.6rem;
-		text-align: left;
-	}
-
-	.element .variable,
-	.element .nodeHead {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 100%;
-	}
-
-	.element .situationValue {
-		display: none !important;
-	}
-
-	/* Nested Mecanism */
-	+ .nested {
-		padding-left: 2em;
-		border-top: 1px dashed rgba(51, 51, 80, 0.15);
-	}
-`
diff --git a/publicodes/source/components/mecanisms/Somme.tsx b/publicodes/source/components/mecanisms/Somme.tsx
new file mode 100644
index 000000000..72b9ea781
--- /dev/null
+++ b/publicodes/source/components/mecanisms/Somme.tsx
@@ -0,0 +1,104 @@
+import styled from 'styled-components'
+import { EvaluatedNode } from '../..'
+import Explanation from '../Explanation'
+import { Mecanism, NodeValuePointer, UnfoldIsEnabledContext } from './common'
+
+const SommeNode = ({ explanation, nodeValue, unit }) => (
+	<StyledSomme>
+		<Mecanism name="somme" value={nodeValue} unit={unit}>
+			<Table explanation={explanation} />
+		</Mecanism>
+	</StyledSomme>
+)
+export default SommeNode
+
+// We want to put non applicable rules a the bottom of list #1055
+function sortByApplicability(a: EvaluatedNode, b: EvaluatedNode): 1 | 0 | -1 {
+	const isApplicable = (x) => x.nodeValue === false
+	if (isApplicable(a) === isApplicable(b)) {
+		return 0
+	}
+	return isApplicable(a) ? 1 : -1
+}
+
+const Table = ({ explanation }) => (
+	<div
+		css={`
+			display: flex;
+			max-width: 100%;
+			flex-direction: column;
+		`}
+	>
+		<div>
+			{explanation.sort(sortByApplicability).map((node: EvaluatedNode, i) => (
+				<Row key={i} node={node} />
+			))}
+		</div>
+	</div>
+)
+
+/* La colonne peut au clic afficher une nouvelle colonne qui sera une autre somme imbriquée */
+function Row({ node }: { node: EvaluatedNode }) {
+	return (
+		<StyledRow className={node.nodeValue === false ? 'notApplicable' : ''}>
+			<div className="element">
+				<UnfoldIsEnabledContext.Provider value={true}>
+					<Explanation node={node} />
+				</UnfoldIsEnabledContext.Provider>
+			</div>
+		</StyledRow>
+	)
+}
+
+const StyledSomme = styled.div`
+	/* mécanisme somme */
+	table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+	tr .element {
+		text-align: left;
+		padding: 0.2rem 0.4rem;
+	}
+	tr .value span {
+		text-align: right;
+	}
+	.nested {
+		padding: 0;
+	}
+`
+const StyledRow = styled.div`
+	display: flex;
+	align-items: center;
+	flex-flow: row nowrap;
+	:nth-child(2n) {
+		background-color: var(--lightestColor);
+	}
+
+	&.notApplicable {
+		opacity: 0.6;
+	}
+
+	.element .result,
+	:first-child {
+		border-top: none;
+	}
+
+	.element {
+		flex: 1;
+		display: flex;
+		max-width: 100%;
+		align-items: baseline;
+
+		padding: 0.1em 0.4em;
+		padding-top: 0.2em;
+		overflow: hidden;
+		flex-wrap: wrap;
+	}
+
+	.element > * {
+		flex: 1;
+		display: flex;
+		text-overflow: ellipsis;
+	}
+`
diff --git a/publicodes/source/components/mecanisms/common.tsx b/publicodes/source/components/mecanisms/common.tsx
index 8efbd2a1c..d01349e1c 100644
--- a/publicodes/source/components/mecanisms/common.tsx
+++ b/publicodes/source/components/mecanisms/common.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { createContext, useContext, useState } from 'react'
 import { Trans } from 'react-i18next'
 import styled from 'styled-components'
 import mecanismsDoc from '../../../docs/mecanisms.yaml'
@@ -266,16 +266,43 @@ export function Leaf(
 	if (!rule) {
 		throw new InternalError(node)
 	}
-	const inlineRule =
+
+	const [folded, setFolded] = useState(true)
+	const foldButton = useContext(UnfoldIsEnabledContext) ? (
+		<button
+			onClick={() => setFolded(!folded)}
+			css={`
+				text-transform: none !important;
+				flex: 1 !important;
+				margin-left: 0.4rem !important;
+				text-align: left !important;
+			`}
+			className="ui__ notice small static simple button"
+		>
+			{folded ? 'déplier' : 'replier'}
+		</button>
+	) : null
+
+	if (
 		node.dottedName === node.contextDottedName + ' . ' + node.name &&
 		!node.name.includes(' . ') &&
 		rule.virtualRule
-	if (inlineRule) {
-		return <Explanation node={engine?.evaluateNode(rule)} />
+	) {
+		return <Explanation node={node.explanation ?? rule} />
 	}
 	return (
-		<span className="variable filtered leaf">
-			<span className="nodeHead">
+		<div
+			css={`
+				display: flex;
+				flex-direction: column;
+			`}
+		>
+			<span
+				css={`
+					display: flex;
+					align-items: baseline;
+				`}
+			>
 				<RuleLinkWithContext dottedName={dottedName}>
 					<span className="name">
 						{rule.rawNode.acronyme ? (
@@ -285,11 +312,25 @@ export function Leaf(
 						)}
 					</span>
 				</RuleLinkWithContext>
+				{foldButton}
 
-				{nodeValue != null && unit && (
+				{nodeValue !== null && unit && (
 					<NodeValuePointer data={nodeValue} unit={unit} />
 				)}
-			</span>
-		</span>
+			</span>{' '}
+			{!folded && (
+				<div
+					css={`
+						width: 100%;
+					`}
+				>
+					<UnfoldIsEnabledContext.Provider value={false}>
+						<Explanation node={engine?.evaluateNode(rule).explanation.valeur} />
+					</UnfoldIsEnabledContext.Provider>
+				</div>
+			)}
+		</div>
 	)
 }
+
+export const UnfoldIsEnabledContext = createContext<boolean>(false)