From cb0bdcbdd8c702c4b62793a5802e6f0527f94447 Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Fri, 30 Nov 2018 12:46:19 +0100
Subject: [PATCH] =?UTF-8?q?:engine:=20Ajoute=20les=20derni=C3=A8res=20bran?=
 =?UTF-8?q?ches=20manquante=20et=20leurs=20traductions.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute les liens vers les pages règles de branche depuis la
distribution et le bulletin de paie
---
 source/components/Distribution.css       |   4 +-
 source/components/Distribution.js        |  62 ++-------
 source/components/PaySlip.js             |   6 +-
 source/components/rule/Header.css        |   2 +-
 source/components/rule/Header.js         |  60 +++++----
 source/components/rule/References.css    |  14 +-
 source/components/rule/References.js     |  39 +-----
 source/components/rule/Rule.js           |   6 +-
 source/engine/rules.js                   |  58 +++++----
 source/locales/en.yaml                   |  30 -----
 source/règles/base.yaml                  | 156 ++++++++++++++---------
 source/règles/externalized.yaml          | 111 ++++++++++++++++
 source/selectors/ficheDePaieSelectors.js |  37 +++---
 source/selectors/regleSelectors.js       |   5 +
 source/selectors/repartitionSelectors.js |  40 ++++--
 source/types/RegleTypes.js               |   4 +-
 source/types/ResultViewTypes.js          |  21 ++-
 test/ficheDePaieSelector.test.js         |   7 +-
 18 files changed, 372 insertions(+), 290 deletions(-)

diff --git a/source/components/Distribution.css b/source/components/Distribution.css
index 7c1480a39..74c50f7e5 100644
--- a/source/components/Distribution.css
+++ b/source/components/Distribution.css
@@ -26,7 +26,7 @@
 }
 
 .distribution-chart__counterparts {
-	width: 20em;
+	width: 25em;
 	line-height: 1.2em;
 	font-weight: 300;
 }
@@ -56,6 +56,7 @@
 		justify-content: flex-start !important;
 		position: initial !important;
 		flex-direction: column !important;
+		padding-right: 0 !important;
 		width: auto !important;
 		height: initial !important;
 	}
@@ -98,7 +99,6 @@
 
 .distribution-chart__branche-name {
 	font-weight: 500;
-	text-transform: capitalize;
 }
 .distribution-chart__icon {
 	font-size: 200%;
diff --git a/source/components/Distribution.js b/source/components/Distribution.js
index 89b07b37a..0a70d8d4f 100644
--- a/source/components/Distribution.js
+++ b/source/components/Distribution.js
@@ -14,47 +14,13 @@ import './Distribution.css'
 import Montant from './Montant'
 import './PaySlip'
 import RuleLink from './RuleLink'
-
-import type { Répartition, Branche } from 'Types/ResultViewTypes.js'
-
-const brancheToEmoji: { [Branche]: string } = {
-	retraite: '👵',
-	santé: '🏥',
-	famille: '👶',
-	formation: '👩‍🎓',
-	logement: '🏡',
-	'accidents du travail / maladies professionnelles': '☣️',
-	'assurance chômage': '💸',
-	transport: '🚌',
-	autres: '🔧'
-}
-
-const brancheToCounterparts: { [Branche]: string } = {
-	retraite: "Garantit en moyenne 60 à 70 % de votre dernier revenu d'activité.",
-	santé:
-		"Couvre la plupart des soins de santé de la vie quotidienne et 100 % des maladies graves comme les séjours à l'hôpital.",
-	famille:
-		"Offre une vie professionnelle et familiale équilibrée. Finance des crèches et divers services de garde d'enfants.",
-	formation: "Donne aux employés l'accès à la formation professionnelle.",
-	logement: 'Aide à la construction de logements neufs et abordables.',
-	'accidents du travail / maladies professionnelles':
-		'Offre une couverture complète des maladies ou accidents du travail.',
-	'assurance chômage':
-		"Assure un revenu aux travailleurs à la recherche d'un nouvel emploi.",
-	transport: "Permet de baisser le prix d'un ticket de transport en commun.",
-	autres: 'Autres contributions au système social.'
-}
-
-const brancheToLabel: { [Branche]: string } = {
-	'accidents du travail / maladies professionnelles': 'accidents',
-	'assurance chômage': 'chômage'
-}
+import type { Répartition } from 'Types/ResultViewTypes.js'
 
 type Props = ?Répartition & {
 	colours: { colour: string }
 }
 type State = {
-	branchesInViewport: Array<Branche>
+	branchesInViewport: Array<string>
 }
 
 const ANIMATION_SPRING = config.gentle
@@ -93,15 +59,15 @@ class Distribution extends Component<Props, State> {
 				<div className="distribution-chart__container">
 					{répartition.map(([branche, { partPatronale, partSalariale }]) => {
 						const brancheInViewport =
-							this.state.branchesInViewport.indexOf(branche) !== -1
+							this.state.branchesInViewport.indexOf(branche.id) !== -1
 						const montant = brancheInViewport
 							? partPatronale + partSalariale
 							: 0
 						return (
 							<Observer
-								key={branche}
+								key={branche.id}
 								threshold={[0.33]}
-								onChange={this.handleBrancheInViewport(branche)}>
+								onChange={this.handleBrancheInViewport(branche.id)}>
 								<Spring
 									config={ANIMATION_SPRING}
 									to={{
@@ -114,18 +80,14 @@ class Distribution extends Component<Props, State> {
 											style={{
 												opacity: styles.opacity
 											}}>
-											<ChartItemLegend branche={branche} />
+											<BranchIcône icône={branche.icône} />
 											<div className="distribution-chart__item-content">
 												<p className="distribution-chart__counterparts">
 													<span className="distribution-chart__branche-name">
-														<Trans i18nKey={`branches.${branche}.name`}>
-															{brancheToLabel[branche] || branche}
-														</Trans>
-														.{' '}
+														<RuleLink {...branche} />
 													</span>
-													<Trans i18nKey={`branches.${branche}.counterpart`}>
-														{brancheToCounterparts[branche]}
-													</Trans>
+													{' : '}
+													{branche.descriptionCourte}
 												</p>
 												<ChartItemBar {...{ styles, colour, montant, total }} />
 											</div>
@@ -191,10 +153,8 @@ let ChartItemBar = ({ styles, colour, montant, total }) => (
 	</div>
 )
 
-let ChartItemLegend = ({ branche }) => (
+let BranchIcône = ({ icône }) => (
 	<div className="distribution-chart__legend">
-		<span className="distribution-chart__icon">
-			{emoji(brancheToEmoji[branche])}
-		</span>
+		<span className="distribution-chart__icon">{emoji(icône)}</span>
 	</div>
 )
diff --git a/source/components/PaySlip.js b/source/components/PaySlip.js
index 61b983ef5..3a2563301 100644
--- a/source/components/PaySlip.js
+++ b/source/components/PaySlip.js
@@ -81,10 +81,10 @@ const PaySlip = ({
 				<h4>
 					<Trans>Part salariale</Trans>
 				</h4>
-				{cotisations.map(([section, cotisationList]) => (
-					<Fragment key={section}>
+				{cotisations.map(([branche, cotisationList]) => (
+					<Fragment key={branche.id}>
 						<h5 className="payslip__cotisationTitle">
-							<Trans i18nKey={`branches.${section}.name`}>{section}</Trans>
+							<RuleLink {...branche} />
 						</h5>
 						{cotisationList.map(cotisation => (
 							<Fragment key={cotisation.lien}>
diff --git a/source/components/rule/Header.css b/source/components/rule/Header.css
index 4ceef28dc..07aef1234 100644
--- a/source/components/rule/Header.css
+++ b/source/components/rule/Header.css
@@ -20,7 +20,6 @@
 
 #ruleHeader__content {
 	display: flex;
-	padding-top: 1rem;
 }
 @media (max-width: 500px) {
 	#ruleHeader__content {
@@ -31,6 +30,7 @@
 }
 #ruleHeader__description {
 	flex: 1;
+	padding-top: 1rem;
 }
 #ruleHeader__infobox {
 	padding: 1rem;
diff --git a/source/components/rule/Header.js b/source/components/rule/Header.js
index e386f68af..34ba09666 100644
--- a/source/components/rule/Header.js
+++ b/source/components/rule/Header.js
@@ -1,3 +1,4 @@
+import PeriodSwitch from 'Components/PeriodSwitch'
 import withColours from 'Components/utils/withColours'
 import { createMarkdownDiv } from 'Engine/marked'
 import { path } from 'ramda'
@@ -8,7 +9,6 @@ import { capitalise0 } from '../../utils'
 import Destinataire from './Destinataire'
 import './Header.css'
 import Namespace from './Namespace'
-import PeriodSwitch from 'Components/PeriodSwitch'
 
 let RuleHeader = withColours(
 	({
@@ -40,35 +40,39 @@ let RuleHeader = withColours(
 				<div id="ruleHeader__description">
 					{createMarkdownDiv(description || question)}
 				</div>
-				<div id="ruleHeader__infobox">
-					{type && (
-						<div className="infobox__item">
-							<h4>Type&nbsp;:</h4>
-							<Trans>{capitalise0(type)}</Trans>
-						</div>
-					)}
-					{do {
-						let period = flatRule['période']
-						period && (
+				{(type || flatRule['période']) && (
+					<div id="ruleHeader__infobox">
+						{type && (
 							<div className="infobox__item">
-								<h4>Période :</h4>
-								{valuesToShow && period === 'flexible' ? (
-									<PeriodSwitch />
-								) : (
-									<div className="inlineMecanism">
-										<span
-											className="name"
-											data-term-definition="période"
-											style={{ background: '#8e44ad' }}>
-											{period}
-										</span>
-									</div>
-								)}
+								<h4>Type&nbsp;:</h4>
+								<Trans>{capitalise0(type)}</Trans>
 							</div>
-						)
-					}}
-					<Destinataire destinataire={path([type, 'destinataire'])(flatRule)} />
-				</div>
+						)}
+						{do {
+							let period = flatRule['période']
+							period && (
+								<div className="infobox__item">
+									<h4>Période :</h4>
+									{valuesToShow && period === 'flexible' ? (
+										<PeriodSwitch />
+									) : (
+										<div className="inlineMecanism">
+											<span
+												className="name"
+												data-term-definition="période"
+												style={{ background: '#8e44ad' }}>
+												{period}
+											</span>
+										</div>
+									)}
+								</div>
+							)
+						}}
+						<Destinataire
+							destinataire={path([type, 'destinataire'])(flatRule)}
+						/>
+					</div>
+				)}
 			</div>
 		</section>
 	)
diff --git a/source/components/rule/References.css b/source/components/rule/References.css
index e07cd25d8..861291afb 100644
--- a/source/components/rule/References.css
+++ b/source/components/rule/References.css
@@ -30,16 +30,18 @@
 	font-size: 95%;
 }
 .references .imageWrapper {
-	width: 8em;
-	display: inline-block;
+	width: 6rem;
+	height: 3rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 1rem;
 }
 .references img {
+	max-height: 3rem;
 	vertical-align: sub;
-	max-height: 3em;
-	max-width: 5em;
+	max-width: 100%;
 	border-radius: 0.3em;
-	margin: 0 auto;
-	display: block;
 }
 
 li#complementary {
diff --git a/source/components/rule/References.js b/source/components/rule/References.js
index 01c28cc8c..65ab9d5e8 100644
--- a/source/components/rule/References.js
+++ b/source/components/rule/References.js
@@ -1,6 +1,6 @@
-import { groupBy, toPairs } from 'ramda'
+import { toPairs } from 'ramda'
 import React from 'react'
-import { Trans, withNamespaces } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 import references from 'Règles/ressources/références/références.yaml'
 import { capitalise0 } from '../../utils'
 import './References.css'
@@ -12,39 +12,8 @@ export default withNamespaces()(
 		}
 		render() {
 			let { refs } = this.props,
-				{ complementary, official = [] } = groupBy(([, link]) =>
-					this.findRefKey(link) ? 'official' : 'complementary'
-				)(toPairs(refs)),
-				showComplementary = this.state.showComplementary,
-				showComplementaryButton = !this.state.showComplementary && complementary
-
-			return (
-				<ul className="references">
-					{[
-						...official.map(this.renderRef),
-						official.length == 0 ? (
-							<li id="noOfficialReferences">
-								<Trans>Pas de sources officielles</Trans>
-							</li>
-						) : null,
-						...(showComplementaryButton
-							? [
-									<li id="complementary" key="compl">
-										<a
-											href="#/"
-											onClick={() =>
-												this.setState({ showComplementary: true })
-											}>
-											<i className="fa fa-eye" aria-hidden="true" />
-											<Trans>afficher les sources complémentaires</Trans>
-										</a>
-									</li>
-							  ]
-							: []),
-						...(showComplementary ? complementary.map(this.renderRef) : [])
-					]}
-				</ul>
-			)
+				references = toPairs(refs)
+			return <ul className="references">{references.map(this.renderRef)}</ul>
 		}
 		renderRef = ([name, link]) => {
 			let refKey = this.findRefKey(link),
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index 33a9c7866..85f9b0542 100644
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@@ -1,6 +1,7 @@
 import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
 import { getInputComponent } from 'Engine/generateQuestions'
+import knownMecanisms from 'Engine/known-mecanisms.yaml'
 import { createMarkdownDiv } from 'Engine/marked'
 import {
 	encodeRuleName,
@@ -9,6 +10,7 @@ import {
 } from 'Engine/rules'
 import { compose, isEmpty } from 'ramda'
 import React, { Component, Suspense } from 'react'
+import emoji from 'react-easy-emoji'
 import Helmet from 'react-helmet'
 import { Trans, withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
@@ -20,14 +22,12 @@ import {
 	noUserInputSelector,
 	ruleAnalysisSelector
 } from 'Selectors/analyseSelectors'
+import { AttachDictionary } from '../AttachDictionary'
 import Algorithm from './Algorithm'
 import Examples from './Examples'
 import RuleHeader from './Header'
 import References from './References'
 import './Rule.css'
-import { AttachDictionary } from '../AttachDictionary'
-import knownMecanisms from 'Engine/known-mecanisms.yaml'
-import emoji from 'react-easy-emoji'
 
 let LazySource = React.lazy(() => import('./RuleSource'))
 
diff --git a/source/engine/rules.js b/source/engine/rules.js
index 9d9491119..8c3e213ab 100644
--- a/source/engine/rules.js
+++ b/source/engine/rules.js
@@ -1,39 +1,38 @@
 // Séparation artificielle, temporaire, entre ces deux types de règles
-import rawRules from 'Règles/base.yaml'
-import translations from 'Règles/externalized.yaml'
+import formValueTypes from 'Components/conversation/formValueTypes'
 import {
 	assoc,
-	mapObjIndexed,
 	chain,
-	has,
-	pipe,
-	toPairs,
-	map,
-	fromPairs,
-	split,
-	join,
 	dropLast,
-	take,
-	propEq,
-	reduce,
-	when,
-	is,
-	props,
+	fromPairs,
+	has,
 	identity,
-	path,
-	reject,
-	reduced,
-	range,
+	is,
+	join,
 	last,
-	trim
+	map,
+	mapObjIndexed,
+	path,
+	pipe,
+	propEq,
+	props,
+	range,
+	reduce,
+	reduced,
+	reject,
+	split,
+	take,
+	toPairs,
+	trim,
+	when
 } from 'ramda'
-import possibleVariableTypes from './possibleVariableTypes.yaml'
-import marked from './marked'
-import { capitalise0 } from '../utils'
-import formValueTypes from 'Components/conversation/formValueTypes'
-
+import rawRules from 'Règles/base.yaml'
+import translations from 'Règles/externalized.yaml'
 // TODO - should be in UI, not engine
 import taux_versement_transport from 'Règles/taux-versement-transport.json'
+import { capitalise0 } from '../utils'
+import marked from './marked'
+import possibleVariableTypes from './possibleVariableTypes.yaml'
 
 // console.log('rawRules', rawRules.map(({espace, nom}) => espace + nom))
 /***********************************
@@ -52,7 +51,8 @@ export let enrichRule = (rule, sharedData = {}) => {
 			subquestion = subquestionMarkdown && marked(subquestionMarkdown),
 			defaultValue = rule['par défaut'],
 			examples = rule['exemples'],
-			icon = rule['icônes']
+			icon = rule['icônes'],
+			shortDescription = rule['description courte']
 
 		return {
 			...rule,
@@ -66,7 +66,8 @@ export let enrichRule = (rule, sharedData = {}) => {
 			defaultValue,
 			raw: rule,
 			examples,
-			icon
+			icon,
+			shortDescription
 		}
 	} catch (e) {
 		throw new Error('Problem enriching ' + JSON.stringify(rule))
@@ -250,6 +251,7 @@ export let translateAll = (translations, flatRules) => {
 		'titre',
 		'description',
 		'question',
+		'description courte',
 		'sous-question',
 		'résumé',
 		'suggestions'
diff --git a/source/locales/en.yaml b/source/locales/en.yaml
index 5de617a6b..004844e23 100644
--- a/source/locales/en.yaml
+++ b/source/locales/en.yaml
@@ -31,35 +31,6 @@ non: no
 inlineExpressionNegation: Not
 déplier: show more
 replier: show less
-branches:
-  assurance chômage:
-    name: unemployment
-    counterpart: Gives income to former employees while they're looking for a new job.
-  retraite:
-    name: pensions
-    counterpart: Guarantees on average 60%-70% of your last income.
-  formation:
-    name: training
-    counterpart: Gives access to professional training for employees.
-  logement:
-    name: housing
-    counterpart: Helps build new and affordable housing.
-  transport:
-    name: transportation
-    counterpart: Lowers the price of a public transportation ticket.
-  accidents du travail / maladies professionnelles:
-    name: work accidents / occupational diseases
-    counterpart: Offers full coverage of occupational illnesses or accidents.
-  santé:
-    name: healthcare
-    counterpart: Covers most of everyday-life health care needs and 100% for serious illnesses, e.g. hospital stays.
-  famille:
-    name: family allowances
-    counterpart: Offers a balanced work and family life. Finances day nurseries and various child care.
-  autres:
-    name: other
-    counterpart: Other contributions to the social system.
-
 Salaire brut: Gross salary
 Salaire net: Net salary
 Salaire chargé: Total salary
@@ -594,5 +565,4 @@ an: year
 par: per
 Explorez notre base de règles: Explore our rules
 
-
 maj2019: The simulation is up-to-date in 2019.
diff --git a/source/règles/base.yaml b/source/règles/base.yaml
index 2541b31f7..291db4cee 100644
--- a/source/règles/base.yaml
+++ b/source/règles/base.yaml
@@ -344,7 +344,7 @@
   description: Cotisation due au titre des Accidents du Travail et Maladies Professionnelles.
   cotisation:
     dû par: employeur
-    branche: accidents du travail / maladies professionnelles
+    branche: accidents du travail et maladies professionnelles
     destinataire: URSSAF
     responsable: CARSAT
   période: flexible
@@ -2071,7 +2071,7 @@
   cotisation:
     dû par: employeur
     destinataire: URSSAF
-    branche: logement
+    branche: famille
   références:
     calcul: https://www.urssaf.fr/portail/home/employeur/calculer-les-cotisations/les-taux-de-cotisations/la-contribution-au-fonds-nationa.html
   période: flexible
@@ -2547,111 +2547,147 @@
         contrat salarié . rémunération . net imposable: 4000
       valeur attendue: 7253.26
 
-- nom: cotisation
+- nom: branche de la protection sociale
+  description: >
+    La protection sociale est composée de 5 branches principales : maladie, famille, accidents 
+    du travail et maladie professionnelles, retraite et chômage. A cela s'ajoutent
+    aussi les cotisations pour la formation professionnelle et le transport.
 
 - nom: retraite
-  espace: cotisation
+  espace: branche de la protection sociale
   icônes: 👵
   type: branche
-  description: >
-    Tous les salariés en France cotisent tout au long de leur vie professionnelle
-    pour bénéficier d’un régime de retraite dès lors qu’ils ont l’âge de cesser
-    leur activité.
+  description courte: Garantit en moyenne 60 à 70 % de votre dernier revenu d'activité après 65
+  description: |
+    Tous les salariés en France cotisent tout au long de leur vie professionnelle pour bénéficier d’un régime de retraite dès lors qu’ils ont l’âge de cesser leur activité.
 
-    Le système des retraites est actuellement fondé sur le principe de la 
-    « répartition ». Cela veut dire que les cotisations des actifs financent 
-    les pensions des retraités.
+    Le système des retraites est actuellement fondé sur le principe de la « répartition ». Cela veut dire que les cotisations des actifs financent les pensions des retraités.
 
-    La retraite en France en quelques chiffres : 
-      - **103 %** :  le revenu des plus de 65 ans en pourcentage du revenu moyen (le plus élevé de l'OCDE)
-      - **25 ans** : le nombre d'année en moyenne passée à la retraite (le plus élevé de l'OCDE)
-      - **75 %** : le taux de remplacement en pourcentage du salaire net après annuitées complètes
+    ## La retraite en France en quelques chiffres 
+      - **103 %** :  le revenu des plus de 65 ans en pourcentage du revenu moyen (le plus élevé de l'OCDE)  
+      - **25 ans** : le nombre d'année en moyenne passée à la retraite (le plus élevé de l'OCDE)  
+      - **75 %** : le taux de remplacement en pourcentage du salaire net après annuités complètes
 
-    La retraite est la plus élevée des cotisations sociales. Elle peut être considéré comme 
-    un salaire différé, puisque vos cotisations vous assurerons un revenu lors de votre départ
-    à la retraite.
+    La retraite est la plus élevée des cotisations sociales. Elle peut être considéré comme un salaire différé, puisque vos cotisations vous assurerons un revenu lors de votre départ à la retraite.
 
   références:
     OCDE: https://read.oecd-ilibrary.org/social-issues-migration-health/pensions-at-a-glance-2017_pension_glance-2017-en#page135
 
 - nom: santé
-  espace: cotisation
+  espace: branche de la protection sociale
   icônes: 🏥
   type: branche
-  description: >
+  description courte: Couvre la plupart des soins de santé de la vie quotidienne et 100 % des maladies graves comme les séjours à l'hôpital.
+  description: |
     L’Assurance Maladie protège durablement la santé de chacun – dans sa vie personnelle ou professionnelle – en agissant auprès de tous. 
-    Concrètement, elle accompagne 60 millions d’assurés tout au long de leur vie, en prenant en charge leurs soins quels que soient leurs ressources, leur situation ou leur état de santé.
 
-    Elle garantit ainsi un accès universel aux droits et elle permet l’accès aux soins.
+    Concrètement, elle accompagne 60 millions d’assurés tout au long de leur vie, en prenant en charge leurs soins quels que soient leurs ressources, leur situation ou leur état de santé. Elle garantit ainsi un accès universel aux droits et elle permet l’accès aux soins.
 
     Grâce à elle, vous êtes couvert sur la plupart des soins de santé. En cas de maladie grave ou de longue durée, 100 % des soins sont remboursés.
 
-    L'assurance maladie en France en quelques chiffres : 
+    ## L'assurance maladie en France en quelques chiffres
       - **92 %** des dépenses de santé remboursée par l'assurance maladie et la complémentaire (un des plus élevé au monde)
       - **30 000 € / an / patient** : dépense de santé d'une personne atteinte de [mucoviscidose](https://fr.wikipedia.org/wiki/Mucoviscidose), 
       **entièrement pris en charge par la sécurité sociale**
       - **11,7 % ** du PIB consacré aux dépenses de santé, le 5ème de l'OCDE
-      - **82,4 ans** d'esperance de vie moyenne en france (dans le top 10 mondial)
+      - **82,4 ans** d’espérance de vie moyenne en france (dans le top 10 mondial)
 
   références:
     ameli.fr: https://assurance-maladie.ameli.fr/sites/default/files/ra-2017_agir-ensemble-proteger-chacun.pdf
     OCDE: https://read.oecd-ilibrary.org/social-issues-migration-health/health-at-a-glance-europe-2018_health_glance_eur-2018-en#page89
 
-- nom: chômage
-  espace: cotisation
+- nom: assurance chômage
+  espace: branche de la protection sociale
   icônes: 💸
-  type: branche
+  type: assurance
+  description courte: Assure un revenu aux travailleurs à la recherche d'un nouvel emploi.
   description: >
-    Depuis 1958, l’Assurance chômage protège tous les salariés du privé et certains 
-    du secteur public lorsqu’ils perdent leur emploi. Elle leur verse une allocation et
-    favorise leur retour à l’emploi grâce à des aides. 
+    Depuis 1958, l’Assurance chômage protège tous les salariés du privé et certains du secteur public lorsqu’ils perdent leur emploi. Elle leur verse une allocation et favorise leur retour à l’emploi grâce à des aides. 
 
-    Fonctionnant comme une assurance,  elle indemnise ceux qui ont cotisé, en fonction 
-    de leur ancien salaire. Mais elle est aussi solidaire, puisqu’elle mutualise les 
-    risques et compense mieux la perte d’un bas salaire que d’un haut revenu.
+    Fonctionnant comme une assurance,  elle indemnise ceux qui ont cotisé, en fonction de leur ancien salaire. Mais elle est aussi solidaire, puisqu’elle mutualise les risques et compense mieux la perte d’un bas salaire que d’un haut revenu.
 
-    Grâce à elle, tous ceux qui perdent leur emploi de façon involontaire peuvent toucher 
-    un revenu sous forme d’allocation à condition d’avoir cotisé suffisamment.
+    Grâce à elle, tous ceux qui perdent leur emploi de façon involontaire peuvent toucher un revenu sous forme d’allocation à condition d’avoir cotisé suffisamment.
 
-    L'assurance maladie en France en quelques chiffres :
-      - **72 %** de l'ancien salaire net : pourcentage de l'allocation chômage en moyenne
-      - **2,7 millions** de chômeurs indémnisés chaque mois
-      - **1 020 €** : montant de l'allocation nette par moi
+    ## L'assurance maladie en France en quelques chiffres 
+      - **72 %** de l'ancien salaire net : pourcentage de l'allocation chômage en moyenne    
+      - **2,7 millions** de chômeurs indemnisés chaque mois    
+      - **1 020 €** : montant de l'allocation nette par mois  
       - **51 %** des allocataires cumulent allocation et salaire
 
   références:
     Unédic: https://www.unedic.org/a-propos/quest-ce-que-lassurance-chomage
 
-
 - nom: famille
-  espace: cotisation
+  espace: branche de la protection sociale
   icônes: 👶
   type: branche
-  description: >
-    Créée en 1945, la branche Famille est l’un des principaux acteurs de la politique 
-    familiale française. Actuellement, elle a deux missions prioritaires :
-
-    - aider les familles dans leur vie quotidienne, faciliter, en particulier, la conciliation entre vie familiale et vie professionnelle ;  
-    - développer la solidarité envers les plus vulnérables, dont les personnes handicapées.
+  description courte: Offre une vie professionnelle et familiale équilibrée. Finance des crèches et divers services de garde d'enfants
+  description: |
+    Créée en 1945, la branche Famille est l’un des principaux acteurs de la politique familiale française. Actuellement, elle a deux missions prioritaires :
+      - Aider les familles dans leur vie quotidienne, faciliter, en particulier, la conciliation entre vie familiale et vie professionnelle 
+      - Développer la solidarité envers les plus vulnérables, dont les personnes handicapées
 
     Pour remplir ces missions, elle s’appuie sur deux leviers : 
+      - Le versement de prestations financières aux familles (prestations familiales et sociales, aides au logement et minima sociaux comme l’aide aux adultes handicapés et le revenu de solidarité active) 
+      - L’accompagnement des familles et la mise en place ou le cofinancement de différents
+      services et équipements collectifs qui leur sont destinés (comme les crèches)
 
-    - le versement de prestations financières aux familles (prestations familiales et 
-    sociales, aides au logement et minima sociaux comme l’aide aux adultes handicapés 
-    et le revenu de solidarité active) ;
-    
-    - l’accompagnement des familles et la mise en place ou le cofinancement de différents
-     services et équipements collectifs qui leur sont destinés (comme les crèches).
+    Son objectif est de proposer une offre globale de services, au plus près des habitants, en luttant contre les inégalités territoriales et sociale
 
-    Son objectif est de proposer une offre globale de services, au plus près des 
-    habitants, en luttant contre les inégalités territoriales et sociale
-
-    Les allocations familiales en France en quelques chiffres :
+    ## Les allocations familiales en France en quelques chiffres
       - **19 %** part des dépenses allouées à la petite enfance
       - **2,6** enfants souhaités en France en moyenne (un des chiffre les plus elevé d'Europe)
-      
-
- 
 
   références:
     Unédic: https://www.unedic.org/a-propos/quest-ce-que-lassurance-chomage
+
+- nom: accidents du travail et maladies professionnelles
+  espace: branche de la protection sociale
+  icônes: ☣️
+  description courte: Offre une couverture complète des maladies ou accidents du travail.
+  description: |
+    L’assurance AT/MP (accident du travail et maladie professionnelle) est la plus ancienne branche de la Sécurité sociale : elle relève de principes qui remontent à l’année 1898 et qui ont été reprise dans la loi du 31 décembre 1946.
+
+    [🎞️ Voir la vidéo](https://www.youtube.com/watch?v=NaGI_deZJD8 )
+
+    La cotisation AT/MP couvre les risques accidents du travail, accidents de trajet et maladies professionnelles pour les salariés relevant du régime général.
+
+    Cette cotisation est obligatoire et à la charge exclusive de l’employeur.
+    
+    Pour connaître les risques professionnels et mettre en place des actions de prévention, le [compte AT/MP](https://www.ameli.fr/paris/entreprise/cotisations/mp-tarification-calculs-baremes/compte-mp) est un service ouvert à toutes les entreprises du régime général de la Sécurité sociale
+
+    En cas d’AT/MP, les soins médicaux et chirurgicaux sont remboursés à 100% sur la base de remboursement sécurité sociale (BRSS) dans la limite des tarifs de la Sécurité sociale.
+
+  références:
+    ameli.fr: https://www.ameli.fr/paris/entreprise/cotisations/mp-tarification-calculs-baremes/compte-mp
+    service-public.fr (AT): https://www.service-public.fr/particuliers/vosdroits/F31881
+    service-public.fr (MP): https://www.service-public.fr/particuliers/vosdroits/F31880
+
+
+
+- nom: formation
+  espace: branche de la protection sociale
+  icônes: 👩‍🎓
+  description courte: Donne aux employés l'accès à la formation professionnelle.
+  description: La formation professionnelle permet à chaque personne, indépendamment de son statut, d’acquérir et d’actualiser ses connaissances et ses compétences, d’accroître son niveau de qualification et de favoriser son évolution professionnelle.
+
+- nom: autres
+  espace: branche de la protection sociale
+  icônes: 🔧
+  description courte: Autres contributions au système social.
+  description: Les contributions transverses au système social. On y retrouve par exemple la CRDS (contribution pour le remboursement de la dette social) qui est un impôt destiné à résorber l'endettement de la Sécurité sociale.
+
+- nom: transport
+  espace: branche de la protection sociale
+  icônes: 🚌
+  description courte: Permet de maintenir le prix d'un billet de transport en commun à un bas prix
+  description: |
+    Cette contribution est reversée intégralement à l'[autorité organisatrice de la mobilité](https://fr.wikipedia.org/wiki/Autorit%C3%A9_organisatrice_de_la_mobilit%C3%A9) de la zone ou est implantée l'entreprise. Celle-ci peut ensuite l'utiliser pour subventionner les transports en commun existants ou pour développer de nouvelles infrastructures de transport (tramway, métro, bus...).
+    
+    ## Le versement transport en quelques chiffres 
+    - **45% de réduction** sur le coût des transports en communs dans les 12 plus grandes agglomérations de France. 
+    - **263 € / an / habitant** de gain de pouvoir d'achat pour les habitants d'Île-de-France
+  références:
+    wikipedia: https://fr.wikipedia.org/wiki/Versement_transport
+
+
diff --git a/source/règles/externalized.yaml b/source/règles/externalized.yaml
index 0c5e689a5..f3796be6a 100644
--- a/source/règles/externalized.yaml
+++ b/source/règles/externalized.yaml
@@ -1290,3 +1290,114 @@ contrat salarié . complémentaire santé . part employeur:
 contrat salarié . complémentaire santé . part salarié:
   titre.en: employee share
   description.en: Share of the complementary health insurance paid by the employee. Cannot be more than 50%.
+branche de la protection sociale:
+  titre.en: social welfare branch
+  description.en: >
+    Social protection in France is composed of 5 main branches: sickness, family, accidents at work and occupational diseases, retirement and unemployment. In addition, there are also contributions for vocational training and transport.
+
+branche de la protection sociale . retraite:
+  titre.en: pensions
+  description courte.en: Guarantees on average 60%-70% of your last income.
+  description.en: |
+    All employees in France contribute throughout their working lives to benefit from a pension plan as soon as they are old enough to stop working their activity.
+
+    The pension system is currently based on the principle of the "distribution". This means that asset contributions finance retirement pensions.
+
+    ## Retirement in France in a few figures
+      - **103%**: income of people over 65 as a percentage of average income (highest in the OECD)  
+      - **25 years**: the average number of years spent in retirement (the highest in the OECD)  
+      - **75%**: the replacement rate as a percentage of net salary after full annuities
+
+    Pensions are the highest of social security contributions. It can be considered a deferred salary, since your contributions will provide you with income when you retire.
+
+branche de la protection sociale . santé:
+  titre.en: healthcare
+  description courte.en: Covers most everyday health care and 100% of serious illnesses such as hospital stays.
+  description.en: |
+    Health Insurance protects the health of everyone on a long-term basis - in their personal or professional life - by acting on behalf of everyone. 
+
+    In concrete terms, it supports 60 million insured throughout their lives, by taking charge of their care regardless of their resources, situation or state of health. It thus guarantees universal access to rights and allows access to health care.
+
+    Thanks to it, you are covered on most health care services. In the event of a serious or long-term illness, 100% of the care is reimbursed.
+
+    ## Health insurance in France in a few figures
+      - **92%** of health expenses reimbursed by health and supplementary insurance (one of the highest in the world)
+      - **€30,000 / year / patient** : health expenditure of a person with [cystic fibrosis](https://en.wikipedia.org/wiki/Cystic_fibrosis), **fully covered by social security**
+      - **11.7%** of GDP spent on health expenditure, the 5th of the OECD
+      - **82.4 years** of average life expectancy in France (in the top 10 worldwide)
+
+  références.en:
+    - Cleiss: https://www.cleiss.fr/docs/regimes/regime_france/an_1.html
+
+branche de la protection sociale . assurance chômage:
+  titre.en: unemployment
+  description courte.en: Gives income to former employees while they're looking for a new job.
+  description.en: |
+    Since 1958, the Unemployment Insurance has been protecting all private and some public sector employees when they lose their jobs. It provides them with an allowance and promotes their return to employment through assistance. 
+
+    Operating as an insurance, it compensates those who have contributed, based on their former salary. But it is also supportive, since it pools risks and compensates better for the loss of a low salary than a high income.
+
+    Thanks to it, all those who involuntarily lose their jobs can receive income in the form of an allowance as long as they have made sufficient contributions.
+
+    ## Health insurance in France in a few figures
+      - 72%** of old net salary: average percentage of unemployment benefit    
+      - 2.7 million** unemployed people compensated each month    
+      - 1,020 €****: amount of the net allowance per month  
+      - 51%** of recipients combine allowance and salary
+
+branche de la protection sociale . famille:
+  titre.en: family
+  description courte.en: Offers a balanced professional and family life. Financing of nurseries and various childcare services
+  description.en: |
+    Created in 1945, the Family branch is one of the main actors of French family policy. Currently, it has two priority missions:
+      - Helping families in their daily lives, facilitating, in particular, the reconciliation of family and professional life;  
+      - Develop solidarity with the most vulnerable, including people with disabilities.
+
+    To fulfil these missions, it relies on two levers: 
+      - The payment of financial benefits to families (family and social benefits, housing subsidies and minimum social benefits such as assistance for disabled adults and active solidarity income)
+      - Support for families and the setting up or co-financing of various
+      community services and facilities for them (such as nurseries)
+
+    Its objective is to provide a global offer of services, as close as possible to the inhabitants, by fighting against territorial and social inequalities
+
+    ## Family allowances in France in a few figures:
+      - **2.6** children wanted in France on average (one of the highest figures in Europe)
+      - **19%** share of expenditure allocated to early childhood
+      
+
+? branche de la protection sociale . accidents du travail et maladies professionnelles
+: titre.en: Work accidents / occupational diseases
+  description courte.en: Offers full coverage of occupational illnesses or accidents
+  description.en: |
+    Occupational injury and disease insurance (AT/MP) is the oldest branch of social security: it is based on principles dating back to 1898 and which were incorporated into the law of 31 December 1946.
+
+    [🎞️ See video [fr]](https://www.youtube.com/watch?v=NaGI_deZJD8)
+
+    The AT/MP contribution covers the risks of accidents at work, commuting accidents and occupational diseases for employees covered by the general scheme.
+
+    This contribution is mandatory and is the sole responsibility of the employer.
+
+    To find out about occupational risks and set up preventive actions, the [AT/MP account [fr]](https://www.ameli.fr/paris/entreprise/cotisations/mp-tarification-calculs-baremes/compte-mp) is a service open to all companies in the general social security system
+
+    In the case of accidents at work, medical and surgical care is reimbursed at 100% on the basis of social security reimbursement (BRSS) within the limits of the Social Security rates.
+
+branche de la protection sociale . transport:
+  titre.en: transportation
+  description courte.en: Helps keep the price of a public transportation ticket low.
+  description.en: |
+    This contribution is paid in full to the [mobility authority](https://fr.wikipedia.org/wiki/Autorit%C3%A9_mobility_organiser%C3%A9) in the area where the company is located. It can then be used to subsidize existing public transport or to develop new transport infrastructure (tramway, metro, bus, etc.).
+
+    ## The transport payment in a few figures 
+    - **45% discount** on the cost of public transport in the 12 largest conurbations in France. 
+    - **€263 / year / inhabitant** in purchasing power gains for Île-de-France residents
+
+branche de la protection sociale . autres:
+  titre.en: other
+  description courte.en: Other contributions to the social system.
+  description.en: |
+    Cross-cutting contributions to the social system. For example, there is the CRDS (contribution for the repayment of the social debt) which is a tax intended to reduce the debt of the Social Security.
+
+branche de la protection sociale . formation:
+  titre.en: training
+  description courte.en: Gives employees access to professional training.
+  description.en: Vocational training enables each person, regardless of their status, to acquire and update their knowledge and skills, to increase their level of qualification and to promote their professional development.
diff --git a/source/selectors/ficheDePaieSelectors.js b/source/selectors/ficheDePaieSelectors.js
index 4a39ec446..24b93a60d 100644
--- a/source/selectors/ficheDePaieSelectors.js
+++ b/source/selectors/ficheDePaieSelectors.js
@@ -34,15 +34,14 @@ import type {
 import type { Règle } from 'Types/RegleTypes'
 
 export const COTISATION_BRANCHE_ORDER: Array<Branche> = [
-	'santé',
-	'accidents du travail / maladies professionnelles',
-	'retraite',
-	'famille',
-	'assurance chômage',
-	'formation',
-	'logement',
-	'transport',
-	'autres'
+	'branche de la protection sociale . santé',
+	'branche de la protection sociale . accidents du travail et maladies professionnelles',
+	'branche de la protection sociale . retraite',
+	'branche de la protection sociale . famille',
+	'branche de la protection sociale . assurance chômage',
+	'branche de la protection sociale . formation',
+	'branche de la protection sociale . transport',
+	'branche de la protection sociale . autres'
 ]
 
 // Used for type consistency
@@ -55,7 +54,7 @@ export const BLANK_COTISATION: Cotisation = {
 	type: 'euros',
 	nom: 'ERROR_SHOULD_BE_INSTANCIATED',
 	lien: 'ERROR_SHOULD_BE_INSTANCIATED',
-	branche: 'autres'
+	branche: 'branche de la protection sociale . autres'
 }
 
 function duParSelector(
@@ -76,15 +75,19 @@ function brancheSelector(variable: VariableWithCotisation): Branche {
 		['explanation', 'cotisation', 'branche'],
 		['explanation', 'taxe', 'branche']
 	].map(p => path(p, variable))
-	return branches.filter(Boolean)[0] || 'autres'
+	return (
+		// $FlowFixMe
+		'branche de la protection sociale . ' +
+		(branches.filter(Boolean)[0] || 'autres')
+	)
 }
 
 // $FlowFixMe
 export const mergeCotisations: (
 	Cotisation,
 	Cotisation
-) => Cotisation = mergeWithKey(
-	(key, a, b) => (key === 'montant' ? mergeWith(add, a, b) : b)
+) => Cotisation = mergeWithKey((key, a, b) =>
+	key === 'montant' ? mergeWith(add, a, b) : b
 )
 
 const variableToCotisation = (règleLocaliséeSelector: string => Règle) => (
@@ -100,7 +103,9 @@ const variableToCotisation = (règleLocaliséeSelector: string => Règle) => (
 		}
 	})
 }
-function groupByBranche(cotisations: Array<Cotisation>): Cotisations {
+const groupByBranche = (règleLocaliséeSelector: string => Règle) => (
+	cotisations: Array<Cotisation>
+): Cotisations => {
 	const cotisationsMap = cotisations.reduce(
 		(acc, cotisation) => ({
 			...acc,
@@ -109,7 +114,7 @@ function groupByBranche(cotisations: Array<Cotisation>): Cotisations {
 		{}
 	)
 	return COTISATION_BRANCHE_ORDER.map(branche => [
-		branche,
+		règleLocaliséeSelector(branche),
 		// $FlowFixMe
 		cotisationsMap[branche]
 	])
@@ -140,7 +145,7 @@ const analysisToCotisations = (
 				cotisation.montant.partPatronale !== 0 ||
 				cotisation.montant.partSalariale !== 0
 		),
-		groupByBranche,
+		groupByBranche(règleLocaliséeSelector),
 		filter(([, brancheCotisation]) => !!brancheCotisation)
 	)(variables)
 	return cotisations
diff --git a/source/selectors/regleSelectors.js b/source/selectors/regleSelectors.js
index 1963d3162..45b0da36b 100644
--- a/source/selectors/regleSelectors.js
+++ b/source/selectors/regleSelectors.js
@@ -35,7 +35,12 @@ export const règleLocaliséeSelector = createSelector(
 		return {
 			nom: localizedRule.titre || localizedRule.nom,
 			lien: 'règle/' + encodeRuleName(dottedName),
+
 			id: dottedName,
+			...(localizedRule.shortDescription
+				? { descriptionCourte: localizedRule.shortDescription }
+				: {}),
+			...(localizedRule.icon ? { icône: localizedRule.icon } : {}),
 			...(localizedRule.format ? { type: localizedRule.format } : {})
 		}
 	}
diff --git a/source/selectors/repartitionSelectors.js b/source/selectors/repartitionSelectors.js
index 05f575e63..dcf257282 100644
--- a/source/selectors/repartitionSelectors.js
+++ b/source/selectors/repartitionSelectors.js
@@ -21,6 +21,7 @@ import FicheDePaieSelectors, {
 	BLANK_COTISATION,
 	mergeCotisations
 } from './ficheDePaieSelectors'
+import { règleLocaliséeSelector } from './regleSelectors'
 
 import type {
 	Cotisation,
@@ -29,7 +30,7 @@ import type {
 	FicheDePaie,
 	Répartition
 } from 'Types/ResultViewTypes'
-import type { RègleAvecMontant } from 'Types/RegleTypes'
+import type { RègleAvecMontant, Règle } from 'Types/RegleTypes'
 
 const totalCotisations = (cotisations: Array<Cotisation>): MontantPartagé =>
 	cotisations.reduce(mergeCotisations, BLANK_COTISATION).montant
@@ -47,11 +48,11 @@ const byMontantTotal = (
 }
 
 const REPARTITION_CSG: { [Branche]: number } = {
-	famille: 0.85,
-	santé: 7.75,
+	'branche de la protection sociale . famille': 0.85,
+	'branche de la protection sociale . santé': 7.75,
 	// TODO: cette part correspond à l'amortissement de la dette de la sécurité sociale.
 	// On peut imaginer la partager à toute les composantes concernées
-	autres: 0.6
+	'branche de la protection sociale . autres': 0.6
 }
 function applyCSGInPlace(
 	CSG: Cotisation,
@@ -77,7 +78,7 @@ const brancheConcernéeParLaRéduction = [
 	'retraite',
 	'logement',
 	'famille'
-]
+].map(branche => 'branche de la protection sociale . ' + branche)
 function applyReduction(
 	réduction: RègleAvecMontant,
 	répartitionMap: { [Branche]: MontantPartagé }
@@ -101,22 +102,34 @@ function applyReduction(
 	)
 }
 
-const répartition = (ficheDePaie: ?FicheDePaie): ?Répartition => {
+const répartition = (
+	ficheDePaie: ?FicheDePaie,
+	règle: string => Règle
+): ?Répartition => {
 	if (!ficheDePaie) {
 		return null
 	}
 	// $FlowFixMe
 	const cotisations: { [Branche]: Array<Cotisation> } = fromPairs(
-		ficheDePaie.cotisations
+		map(
+			([brancheRègle, cotisations]) => [brancheRègle.id, cotisations],
+			ficheDePaie.cotisations
+		)
 	)
 	const { salaireNet, salaireChargé, réductionsDeCotisations } = ficheDePaie
 	let CSG
-	if (cotisations.autres) {
-		CSG = cotisations.autres.find(({ nom }) => nom === 'CSG')
+	const autresCotisations =
+		cotisations['branche de la protection sociale . autres']
+	if (autresCotisations) {
+		CSG = autresCotisations.find(({ id }) => id === 'contrat salarié . CSG')
 		if (!CSG)
 			throw new Error('[répartition selector]: expect CSG not to be null')
-		cotisations.autres = without([CSG], cotisations.autres)
+		cotisations['branche de la protection sociale . autres'] = without(
+			[CSG],
+			autresCotisations
+		)
 	}
+
 	let répartitionMap: { [Branche]: MontantPartagé } = map(
 		totalCotisations,
 		cotisations
@@ -130,6 +143,7 @@ const répartition = (ficheDePaie: ?FicheDePaie): ?Répartition => {
 		// $FlowFixMe
 		répartition: compose(
 			sort(byMontantTotal),
+			map(([id, cotisation]) => [règle(id), cotisation]),
 			Object.entries,
 			filter(
 				({ partPatronale, partSalariale }) =>
@@ -152,4 +166,8 @@ const répartition = (ficheDePaie: ?FicheDePaie): ?Répartition => {
 	}
 }
 
-export default createSelector(FicheDePaieSelectors, répartition)
+export default createSelector(
+	FicheDePaieSelectors,
+	règleLocaliséeSelector,
+	répartition
+)
diff --git a/source/types/RegleTypes.js b/source/types/RegleTypes.js
index 03d323169..3e9b90c9e 100644
--- a/source/types/RegleTypes.js
+++ b/source/types/RegleTypes.js
@@ -4,7 +4,9 @@ export type Règle = {
 	nom: string,
 	type: string,
 	id: string,
-	lien: string
+	lien: string,
+	icône?: string,
+	descriptionCourte?: string
 }
 
 export type RègleAvecMontant = Règle & {
diff --git a/source/types/ResultViewTypes.js b/source/types/ResultViewTypes.js
index e979ae8f3..b712c1810 100644
--- a/source/types/ResultViewTypes.js
+++ b/source/types/ResultViewTypes.js
@@ -7,21 +7,20 @@ export type Cotisation = Règle & {
 }
 
 export type Branche =
-	| 'santé'
-	| 'accidents du travail / maladies professionnelles'
-	| 'retraite'
-	| 'famille'
-	| 'assurance chômage'
-	| 'formation'
-	| 'logement'
-	| 'transport'
-	| 'autres'
+	| 'branche de la protection sociale . santé'
+	| 'branche de la protection sociale . accidents du travail et maladies professionnelles'
+	| 'branche de la protection sociale . retraite'
+	| 'branche de la protection sociale . famille'
+	| 'branche de la protection sociale . assurance chômage'
+	| 'branche de la protection sociale . formation'
+	| 'branche de la protection sociale . transport'
+	| 'branche de la protection sociale . autres'
 
 export type MontantPartagé = {
 	partSalariale: number,
 	partPatronale: number
 }
-export type Cotisations = Array<[Branche, Array<Cotisation>]>
+export type Cotisations = Array<[Règle, Array<Cotisation>]>
 
 export type VariableWithCotisation = {
 	category: 'variable',
@@ -62,7 +61,7 @@ export type FicheDePaie = {
 }
 
 export type Répartition = {
-	répartition: Array<[Branche, MontantPartagé]>,
+	répartition: Array<[Règle, MontantPartagé]>,
 	total: MontantPartagé,
 	salaireNet: RègleAvecMontant,
 	salaireChargé: RègleAvecMontant,
diff --git a/test/ficheDePaieSelector.test.js b/test/ficheDePaieSelector.test.js
index 18ffba0eb..61f31cbed 100644
--- a/test/ficheDePaieSelector.test.js
+++ b/test/ficheDePaieSelector.test.js
@@ -4,7 +4,6 @@ import { expect } from 'chai'
 import FicheDePaieSelectors, {
 	COTISATION_BRANCHE_ORDER
 } from 'Selectors/ficheDePaieSelectors'
-
 import { simulationTargetNames } from '../source/config'
 
 let state = {
@@ -33,13 +32,13 @@ describe('pay slip selector', function() {
 	it('should have cotisations grouped by branches in the proper ordering', function() {
 		// $FlowFixMe
 		let branches = paySlip.cotisations.map(([branche]) => branche)
-		expect(branches).to.eql(COTISATION_BRANCHE_ORDER)
+		expect(branches.map(({ id }) => id)).to.eql(COTISATION_BRANCHE_ORDER)
 	})
 
 	it('should collect all cotisations in a branche', function() {
 		// $FlowFixMe
 		let cotisationsSanté = (paySlip.cotisations.find(
-			([branche]) => branche === 'santé'
+			([branche]) => branche.nom === 'santé'
 		) || [])[1].map(cotisation => cotisation.nom)
 		expect(cotisationsSanté).to.have.lengthOf(3)
 		expect(cotisationsSanté).to.include('maladie')
@@ -58,7 +57,7 @@ describe('pay slip selector', function() {
 		// $FlowFixMe
 		let cotisationATMP = (paySlip.cotisations.find(
 			([branche]) =>
-				branche === 'accidents du travail / maladies professionnelles'
+				branche.nom === 'accidents du travail et maladies professionnelles'
 		) || [])[1][0]
 		expect(cotisationATMP.montant.partSalariale).to.be.closeTo(0, 0.1)
 		let defaultATMPRate = 2.22 / 100