Merge remote-tracking branch 'origin/master' into indeps2

2019-01-08 18:22:44 +01:00 · 2019-01-08 18:22:44 +01:00 · 9ba4a57139
parent 6a1fb340d6 1cfb204986
commit 9ba4a57139
25 changed files with 554 additions and 338 deletions
--- a/index.html
+++ b/index.html
@ -8,6 +8,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="google-site-verification" content="y1B_PVRQAlMoLd7La3AlOt_0Ja8Lp-lrkoXGat9-uMA" />
 	<meta name="google-site-verification" content="C03WwnrJP0FLqf83ibMBA7_N-TLQcwsJaAhqKXppxaE" />
+	<meta name="google-site-verification" content="QciT8g0vom7kg0Qz6aFIS9s_5r7-21ip0Ho6cuEN1KA" />
 	<!-- vérification pour Bing Webmaster -->
 	<meta name="msvalidate.01" content="65161AFDF93A706CED3F68C7621C00D7" />
 	<meta name="description" content="<%= htmlWebpackPlugin.options.description %>" data-react-helmet="true">
--- a/netlify.toml
+++ b/netlify.toml
@ -1,5 +1,10 @@
 # InFrance PRODUCTION settings 

+[[redirects]]
+from = "https://www.mycompanyinfrance.fr/*"
+to = "https://mycompanyinfrance.fr/:splat"
+status = 301
+
 [[redirects]]
 from = "https://mycompanyinfrance.fr/robots.txt"
 to = "/robots.infrance.txt"
--- 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,13 @@ import {
 	noUserInputSelector,
 	ruleAnalysisSelector
 } from 'Selectors/analyseSelectors'
+import Animate from 'Ui/animate'
+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'))

@ -73,71 +74,75 @@ export default compose(
 						</>
 					) : (
 						<div id="rule" className="ui__ container">
-							<Helmet>
-								<title>{title}</title>
-								<meta name="description" content={description} />
-							</Helmet>
-							<RuleHeader
-								{...{
-									ns,
-									type,
-									description,
-									question,
-									flatRule,
-									flatRules,
-									name,
-									title,
-									icon,
-									valuesToShow
-								}}
-							/>
-
-							{this.renderToggleSourceButton()}
-							<section id="rule-content">
-								{displayedRule.nodeValue ? (
-									<div id="ruleValue">
-										<i className="fa fa-calculator" aria-hidden="true" />{' '}
-										{displayedRule.format === 'euros' || displayedRule.formule
-											? Intl.NumberFormat(language, {
-													style: 'currency',
-													currency: 'EUR'
-											  }).format(displayedRule.nodeValue)
-											: typeof displayedRule.nodeValue !== 'object'
-											? displayedRule.nodeValue
-											: null}
-									</div>
-								) : null}
-
-								{displayedRule.defaultValue != null &&
-								typeof displayedRule.defaultValue !== 'object' ? (
-									<div id="ruleDefault">
-										Valeur par défaut : {displayedRule.defaultValue}
-									</div>
-								) : null}
-
-								{//flatRule.question &&
-								// Fonctionnalité intéressante, à implémenter correctement
-								false && <UserInput {...{ flatRules, dottedName }} />}
-								<Algorithm
-									rule={displayedRule}
-									showValues={valuesToShow || currentExample}
+							<Animate.fromBottom key={title}>
+								<Helmet>
+									<title>{title}</title>
+									<meta name="description" content={description} />
+								</Helmet>
+								<RuleHeader
+									{...{
+										ns,
+										type,
+										description,
+										question,
+										flatRule,
+										flatRules,
+										name,
+										title,
+										icon,
+										valuesToShow
+									}}
 								/>
-								{flatRule.note && (
-									<section id="notes">
-										<h3>Note: </h3>
-										{createMarkdownDiv(flatRule.note)}
-									</section>
-								)}
-								<Examples
-									currentExample={currentExample}
-									situationExists={valuesToShow}
-									rule={displayedRule}
-								/>
-								{!isEmpty(namespaceRules) && (
-									<NamespaceRulesList {...{ namespaceRules }} />
-								)}
-								{this.renderReferences(flatRule)}
-							</section>
+
+								{this.renderToggleSourceButton()}
+								<section id="rule-content">
+									{displayedRule.nodeValue ? (
+										<div id="ruleValue">
+											<i className="fa fa-calculator" aria-hidden="true" />{' '}
+											{displayedRule.format === 'euros' || displayedRule.formule
+												? Intl.NumberFormat(language, {
+														style: 'currency',
+														currency: 'EUR'
+												  }).format(displayedRule.nodeValue)
+												: typeof displayedRule.nodeValue !== 'object'
+												? displayedRule.nodeValue
+												: null}
+										</div>
+									) : null}
+
+									{displayedRule.defaultValue != null &&
+									typeof displayedRule.defaultValue !== 'object' ? (
+										<div id="ruleDefault">
+											Valeur par défaut : {displayedRule.defaultValue}
+										</div>
+									) : null}
+
+									{//flatRule.question &&
+									// Fonctionnalité intéressante, à implémenter correctement
+									false && <UserInput {...{ flatRules, dottedName }} />}
+									{flatRule.ns && (
+										<Algorithm
+											rule={displayedRule}
+											showValues={valuesToShow || currentExample}
+										/>
+									)}
+									{flatRule.note && (
+										<section id="notes">
+											<h3>Note: </h3>
+											{createMarkdownDiv(flatRule.note)}
+										</section>
+									)}
+									<Examples
+										currentExample={currentExample}
+										situationExists={valuesToShow}
+										rule={displayedRule}
+									/>
+									{!isEmpty(namespaceRules) && (
+										<NamespaceRulesList {...{ namespaceRules }} />
+									)}
+									{this.renderReferences(flatRule)}
+								</section>
+							</Animate.fromBottom>
 						</div>
 					)}
 				</>
--- a/source/engine/rules.js
+++ b/source/engine/rules.js
@ -1,41 +1,40 @@
 // 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,
+	map,
+	mapObjIndexed,
+	path,
+	pipe,
+	propEq,
+	props,
+	range,
 	trim,
 	isNil,
-	find
+	find,
+	reduce,
+	reduced,
+	reject,
+	split,
+	take,
+	toPairs,
+	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))
 /***********************************
@ -54,7 +53,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,
@ -68,7 +68,8 @@ export let enrichRule = (rule, sharedData = {}) => {
 			defaultValue,
 			raw: rule,
 			examples,
-			icon
+			icon,
+			shortDescription
 		}
 	} catch (e) {
 		console.log(e)
@ -263,6 +264,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
@ -254,7 +225,7 @@ entreprise:
    statuts:
      titre: Write the company's articles
      exemple: Example articles for your
-      description: <0>The company's articles of association</0> ( "les statuts"), is an official document written in French, describing the status choice, naming the associate(s) and the contributed capital. For more than one associate, it is recommended to ask for the help of a lawyer to write them.
+      description: The company's articles of association ( "les statuts"), is an official document written in French, describing the status choice, naming the associate(s) and the contributed capital. <2>For more than one associate, it is recommended to ask for the help of a lawyer to write them.</2>
    banque:
      titre: Open a business bank account
      description:
@ -270,7 +241,7 @@ entreprise:
    journal:
      titre: Publish a notice of creation in a newspaper
      description: |
-        <0>A <1>a notice of incorporation of the company</1> must be published in a newspaper of legal announcements (« JAL »), for a cost of publication that depends on the size of the announcement and the rates charged by the chosen newspaper.</0><1><0>Find a newspaper of legal announcements</0></1><2>For a SARL or EURL, the notice must contain the following information:</2>
+        <0>A notice of incorporation of the company must be published in a newspaper of legal announcements (« JAL » in French), for a cost of publication that depends on the size of the announcement and the rates charged by the chosen newspaper.</0><1><0>Find a newspaper of legal announcements</0></1><2>The notice must contain the following information:</2>
        <3>
        <0>The company's name and possibly its acronym</0>
        <1>The legal form</1>
@ -331,9 +302,9 @@ formeJuridique:
  intro: 'The French business law defines more than 20 possible legal statuses to declare a company with various acronyms and processes : SAS, SARL, SA, EIRL... This guide will help you find quickly the right status for your needs.'
  EI: Also called company in own name or company in a personal name. No capital contribution is necessary. Private wealth and corporate wealth are one.
  EIRL: Allows you to protect your personal assets by allocating specific capital to your professional activity. Society and the individual are the same person. Not suitable if the sole shareholder is a legal entity (company) or if you plan to welcome other shareholders during the development of your company (choose EURL in this case).
-  EURL: The company has only one partner. Liability is limited to the amount of the capital contribution of the sole shareholder. Evolves into a limited liability company when new partners join the company.
+  EURL: The company has only one partner. Liability is limited to the amount of the capital contribution of the sole shareholder. Evolves into a SARL when new partners join the company.
  SARL: Composed of at least 2 partners whose financial responsibility is limited to the amount of their contribution to the company's capital. The minimum capital is freely fixed in the articles of association.
-  SAS: Company with at least 2 partners. The financial liability of the shareholders is limited to the amount of their contribution to the company's capital. The minimum capital is freely set in the Articles of Association.
+  SAS: Company with at least 2 partners. The financial liability of the shareholders is limited to the amount of their contribution to the company's capital. The minimum capital is freely set in the Articles of Association. An SAS is characterised by a high degree of flexibility in terms of functioning (tailor-made statutes).
  SASU: Composed of only one partner. The financial responsibility is limited to the amount of his contribution to the company's capital. The minimum capital is freely fixed in the Articles of Association.
  SA: Composed of at least 2 shareholders. This is the only status that allows you to be listed on the stock exchange (from 7 shareholders). The minimum share capital is €37.000.
  SNC: The liability of the partners for the debts of the company is unified (one  partner only can be sued for the entire debt) and indefinite (responsible on the entirety of their personnal wealth).
@ -449,7 +420,10 @@ sécu:
    titre: 'Social security in France: costs and benefits'
    description: Découvrez les coûts et avantages de la sécurité sociale française en simulant un cas concret d'embauche dans votre entreprise.
  content: |
-    <0>Social protection: costs and benefits</0><1>France has chosen to provide its citizens with a high-quality social safety net. This mandatory system is based on solidarity and designed to ensure the <strong>general welfare of its people</2>.</1><2>Easy access to health care and other services ensures that companies can put healthy, productive and highly skilled employees to work in an attractive market in the heart of Europe.</2><3>As soon as you declare and pay your employees, you automatically entitle them to the general scheme of French Social Security (health, maternity, disability, old age, occupational illness and accidents) and unemployment insurance.</3><4><0></0></4><5>How much does it cost to hire ?</5>
+    <0>Social protection: costs and benefits</0>
+    <1>
+      France has chosen to provide its citizens with a high-quality social safety net. This mandatory system is based on solidarity and designed to ensure the <strong>general welfare of its people
+    </1>
  video: Social security explained visually

 Votre entreprise: Your company
@ -597,5 +571,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
@ -339,7 +339,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
@ -1901,7 +1901,7 @@
        alors: en alsace moselle
      - sinon: en france
  contrôles:
-    - si: forfait [mensuel] < 15
+    - si:  complémentaire santé . forfait [mensuel] < 15
      niveau: avertissement

 - espace: contrat salarié . complémentaire santé . forfait
@ -2044,7 +2044,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
@ -2890,3 +2890,154 @@
  nom: revenu abattu
  période: flexible
  formule: base des cotisations - abattement
+- nom: 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: protection sociale
+  icônes: 👵
+  type: branche
+  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.
+
+    ## La retraite en France en quelques chiffres 
+      - ** 2094 € / mois** :  Niveau de vie moyen des plus de 65 ans (en comparaison du reste de la population, c'est le plus élevé de l'OCDE 🥇)  
+      - **25 ans** : le nombre d'années passées en moyenne à la retraite (le plus élevé de l'OCDE 🥇)  
+      - **75 %** : le taux de remplacement en pourcentage du salaire net à taux plein
+
+    La retraite est la plus élevée des cotisations sociales. Elle peut être considérée comme un salaire différé, puisque vos cotisations vous assurerons un revenu futur.
+
+  références:
+    OCDE: https://read.oecd-ilibrary.org/social-issues-migration-health/pensions-at-a-glance-2017_pension_glance-2017-en#page135
+    INSEE: https://www.insee.fr/fr/statistiques/fichier/3549496/REVPMEN18_F1.21_niv-pauv-pers-agees.pdf
+
+- nom: santé
+  espace: protection sociale
+  icônes: 🏥
+  type: branche
+  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.
+
+    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
+      - **92 %** des dépenses de santé remboursées en moyenne par l'assurance maladie et la complémentaire 
+      - **30 000 € / an / patient** : dépense de santé d'une personne atteinte de [mucoviscidose](https://fr.wikipedia.org/wiki/Mucoviscidose), entièrement prise en charge par la sécurité sociale
+      - **1 468 € / mois** : indémnité versée par la sécurité sociale pour un congé maternité (salaire moyen)
+      - **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: assurance chômage
+  espace: protection sociale
+  icônes: 💸
+  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. 
+
+    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.
+
+    ## L'assurance chômage 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 moyenne 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
+    ameli.fr: https://www.ameli.fr/simulateur/public/index.php/index/calcul
+
+- nom: famille
+  espace: protection sociale
+  icônes: 👶
+  type: branche
+  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)
+
+    ## Les allocations familiales en France en quelques chiffres
+      - **19 %** part des dépenses allouées à la petite enfance
+      - **900 € / mois**: montant de l'allocation aux adultes handicapés
+      - **75 %** des mères avec un enfant à charge travaillent (dont seulement 30% en temps partiel)
+
+  références:
+    CAF: https://www.caf.fr/sites/default/files/plaquette branche famille francais.pdf
+    service-public.fr: https://www.service-public.fr/particuliers/vosdroits/F12242
+
+- nom: accidents du travail et maladies professionnelles
+  espace: 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é repris 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 intégralement 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: 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.
+    
+    Pour avoir un compte rendu personnalisé de vos droits à la formation, rendez vous sur [www.moncompteactivite.gouv.fr](https://www.moncompteactivite.gouv.fr)
+
+- nom: autres
+  espace: protection sociale
+  icônes: 🔧
+  description courte: Autres contributions au système social.
+  description: |
+    Toutes 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, et ainsi assurer la viabilité de la protection sociale pour vos enfants et petits enfants.
+
+- nom: transport
+  espace: 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
@ -1266,3 +1266,122 @@ 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%.
+
+protection sociale:
+  titre.en: social welfare
+  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.
+
+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
+      - **2094 € / month**: Average standard of living for people over 65 (compared to the rest of the population, it is the 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.
+
+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 🏅)
+      - **€1,468 / month** : allowance paid by the social security system for maternity leave (average salary)
+
+  références.en:
+    - Cleiss: https://www.cleiss.fr/docs/regimes/regime_france/an_1.html
+
+protection sociale . assurance chômage:
+  titre.en: unemployment insurance
+  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.
+
+    ## Unemployment 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
+
+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:
+      - **900 € / month**: amount of the allowance for disabled adults
+      - **19%** share of expenditure allocated to early childhood
+      - **75%** of mothers with a dependent child work (only 30% part-time)
+      
+
+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.
+
+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
+
+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, and thus ensure the sustainability of social protection for your children and grandchildren.
+
+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.
+
+     For a personalized report on your training rights, go to [www.moncompteactivite.gouv.fr](https://www.moncompteactivite.gouv.fr)
--- 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'
+	'protection sociale . santé',
+	'protection sociale . accidents du travail et maladies professionnelles',
+	'protection sociale . retraite',
+	'protection sociale . famille',
+	'protection sociale . assurance chômage',
+	'protection sociale . formation',
+	'protection sociale . transport',
+	'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: '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
+		'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,
+	'protection sociale . famille': 0.85,
+	'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
+	'protection sociale . autres': 0.6
 }
 function applyCSGInPlace(
 	CSG: Cotisation,
@ -77,7 +78,7 @@ const brancheConcernéeParLaRéduction = [
 	'retraite',
 	'logement',
 	'famille'
-]
+].map(branche => '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['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['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/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js
@ -44,6 +44,11 @@ const CreateCompany = ({
 	const isMicroenterprise = [
 		'micro-entreprise',
 		'micro-entreprise-EIRL'
+	].includes(companyStatus);
+	const multipleAssociates = [
+		'SARL',
+		'SAS',
+		'SA'
 	].includes(companyStatus)
 	const isEI = isMicroenterprise || ['EI', 'EIRL'].includes(companyStatus)
 	if (!companyStatus) {
@ -172,11 +177,12 @@ const CreateCompany = ({
 						explanations={
 							<p>
 								<T k="entreprise.tâches.statuts.description">
-									<strong>Les statuts</strong> de l'entreprise sont un document
-									officiel qui donne le choix de la forme juridique, nomme les
-									associés et leurs contributions au capital. Dans le cas où il
-									y a plus d'un associé, il est recommandé de faire appel à un
-									juriste pour les rédiger.{' '}
+									Il s'agit d'un document officiel qui intègre la forme juridique, nomme les
+									associés et leurs contributions au capital.{' '}
+									<span style={{display: multipleAssociates ? 'visible' : 'none'}}>
+										Dans le cas d'une création d'entreprise avec plusieurs associés, il est recommandé 
+										de faire appel à un juriste pour les rédiger.{' '}
+									</span>
 								</T>
 								{['SARL', 'EURL'].includes(companyStatus) && (
 									<StatutsExample companyStatus={companyStatus} />
@ -293,9 +299,8 @@ const CreateCompany = ({
 						explanations={
 							<T k="entreprise.tâches.journal.description">
 								<p>
-									Une <strong>annonce légal de création d'entreprise</strong>{' '}
-									doit être publié dans un journal d'annonces légales (« JAL »),
-									pour un coût de publication qui dépend du volume de l'annonce
+									Vous devez publier la création de votre entreprise dans un journal 
+									d'annonces légales (« JAL »), pour un coût de publication qui dépend du volume de l'annonce
 									et des tarifs pratiqués par le journal choisi{' '}
 								</p>
 								<p>
@ -304,8 +309,7 @@ const CreateCompany = ({
 									</a>
 								</p>
 								<p>
-									Pour une SARL ou EURL, cette annonce doit contenir les
-									informations suivantes :{' '}
+									Cette annonce doit contenir les informations suivantes :{' '}
 								</p>
 								<ul>
 									<li>Le nom de l'entreprise et éventuellement son acronyme</li>
@ -339,8 +343,7 @@ const CreateCompany = ({
 					explanations={
 						<T k="entreprise.tâches.formulaire.description">
 							<p>
-								Vous pouvez faire votre d'inscription en ligne à tout moment,
-								l'enregistrer et y revenir comme vous le souhaitez.{' '}
+								Vous pouvez faire votre inscription en ligne à tout moment, l'enregistrer et y revenir comme vous le souhaitez. 
 							</p>
 							<div style={{ textAlign: 'center' }}>
 								<a
--- a/source/sites/mycompanyinfrance.fr/pages/Company/Liability.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/Liability.js
@ -54,7 +54,7 @@ const Liability = ({
 					<T k="responsabilité.1">
 						<strong>Entreprise individuelle : </strong>
 						Une activité économique exercée par une seule personne physique, en
-						son nom propre. Moins de paperasse, mais plus de problèmes en cas de
+						son nom propre. Moins de formalités, mais plus de risques en cas de
 						faillite, car votre patrimoine personnel peut être mis à
 						contribution.
 					</T>
@ -82,10 +82,10 @@ const Liability = ({
 			<li>
 				<T k="responsabilité.3">
 					<strong>Responsabilité limitée : </strong>
-					Structure organisationnelle dans laquelle le/les membres de la société
-					ne peuvent être tenus personnellement responsables des dettes ou
-					obligations de la société. En revanche, les démarches de création sont
-					un peu plus lourdes, et vous devez fournir un capital initial.
+					Option dans laquelle le/les membres de la société ne peuvent être
+					tenus personnellement responsables des dettes ou obligations de la
+					société. En revanche, les démarches de création sont un peu plus
+					lourdes, et vous devez fournir un capital initial.
 				</T>
 			</li>
 		</ul>
--- a/source/sites/mycompanyinfrance.fr/pages/Company/Microenterprise.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/Microenterprise.js
@ -58,13 +58,12 @@ const Microenterprise = ({ companyIsMicroenterprise, t }: Props) => (
 					importantes pour mener votre activité
 				</li>
 				<li>
-					Vous voulez tester la viabilité de votre modèle, ou prévoyez de rester
-					petits
+				Vous voulez tester la viabilité de votre modèle (activité ou projet), ou prévoyez de rester petits (une petite activité)
 				</li>
-				<li>Vous voulez la quantité minimale de paperasse pour commencer</li>
+				<li>vous souhaitez un minimum de formalités (ou démarches) pour commencer</li>
 			</ul>
 			<p>
-				<strong>Note</strong> : Certaines activités sont exclus de ce statut (
+				<strong>Note</strong> : Certaines activités sont exclues de ce statut (
 				<a href="https://www.afecreation.fr/pid10375/pour-quelles-activites.html#principales-exclusions">
 					{' '}
 					voir la liste
--- a/source/sites/mycompanyinfrance.fr/pages/Company/StatusDescription.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/StatusDescription.js
@ -23,8 +23,8 @@ const StatusDescription = ({ status }: Props) =>
 	) : status === 'EURL' ? (
 		<T k="formeJuridique.EURL">
 			L'entreprise n'a qu'un associé. La responsabilité est limitée au montant
-			de l'apport de capital de l'unique associé. Evolue en SARL lors de
-			l'arrivée de nouveaux associés dans la société.
+			de l'apport de capital. Evolue en SARL lors de l'arrivée de nouveaux
+			associés dans la société.
 		</T>
 	) : status.includes('SARL') ? (
 		<T k="formeJuridique.SARL">
@ -33,7 +33,7 @@ const StatusDescription = ({ status }: Props) =>
 			librement dans les statuts. Les associés se répartissent des parts
 			sociales toutes identiques, et la société est dirigée par un ou plusieurs
 			gérants qui sont forcément des personnes physiques. Le fonctionnement
-			d'une SARL n'est pas libre, il est encadré par le code du commerce.
+			d'une SARL est encadré par le code du commerce.
 		</T>
 	) : status === 'SAS' ? (
 		<T k="formeJuridique.SAS">
@ -41,15 +41,15 @@ const StatusDescription = ({ status }: Props) =>
 			associés est limitée au montant de leur apport au capital de la société.
 			Le capital minimum est fixé librement dans les statuts. Les associés se
 			répartissent des actions qui peuvent être de plusieurs catégories, et la
-			société est dirigée notamment par un président qui peut être une personne
-			morale (une autre société). Le fonctionnement d'une SAS est peu encadré
-			par la législation.
+			société est dirigée par un président qui peut être une personne morale
+			(une autre société). La SAS se caractérise par une grande souplesse de
+			fonctionnement (statuts sur mesure).
 		</T>
 	) : status === 'SASU' ? (
 		<T k="formeJuridique.SASU">
 			L'entreprise n'a qu'un associé. La responsabilité est limitée au montant
-			de l'apport de capital de l'unique associé. Le fonctionnement d'une SASU
-			est peu encadré par la législation.
+			de l'apport de capital de l'unique associé (qui peut être une personne
+			morale).
 		</T>
 	) : status === 'SA' ? (
 		<T k="formeJuridique.SA">
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js
@ -47,13 +47,8 @@ class SocialSecurity extends Component<Props, {}> {
 									solidarité et vise à assurer le{' '}
 									<strong>bien-être général de la population</strong>.
 								</p>
-								<p>
-									L'accès facile aux soins de santé et à d'autres services
-									permet aux entreprises d'employer des travailleurs en bonne
-									santé, productifs et hautement qualifiés.
-								</p>
-								<Video />
 							</T>
+							<Video />
 							<h2>Que voulez-vous estimer ?</h2>

 							<p>
@ -62,7 +57,7 @@ class SocialSecurity extends Component<Props, {}> {
 									protection sociale.
 								</T>
 							</p>
-							<div className="ui__ answer-group">
+							<div style={{ textAlign: 'center' }}>
 								<Link
 									className="ui__ button"
 									to={sitePaths().sécuritéSociale['assimilé-salarié']}>
--- 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'
+	| 'protection sociale . santé'
+	| 'protection sociale . accidents du travail et maladies professionnelles'
+	| 'protection sociale . retraite'
+	| 'protection sociale . famille'
+	| 'protection sociale . assurance chômage'
+	| 'protection sociale . formation'
+	| 'protection sociale . transport'
+	| '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
@ -5,7 +5,6 @@ import FicheDePaieSelectors, {
 	COTISATION_BRANCHE_ORDER
 } from 'Selectors/ficheDePaieSelectors'

-
 let state = {
 	form: {
 		conversation: {
@ -31,13 +30,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')
@ -56,7 +55,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