:engine: Ajoute les dernières branches manquante et leurs

traductions. Ajoute les liens vers les pages règles de branche depuis la distribution et le bulletin de paie
2018-11-30 12:46:19 +01:00 · 2018-11-30 12:46:19 +01:00 · cb0bdcbdd8
parent 5e739ccdec
commit cb0bdcbdd8
18 changed files with 372 additions and 290 deletions
--- 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%;
--- 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>
 )
--- 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}>
--- 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;
--- 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>
 	)
--- 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 {
--- 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),
--- 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'))

--- 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'
--- 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.
--- 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
+
+
--- 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.
--- 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
--- 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 } : {})
 		}
 	}
--- 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
+)
--- 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 & {
--- 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,
--- 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