⚙️ Présenter plus explicitement les résultats

source/components/Results.css

@@ -7,7 +7,7 @@
 	padding: .6em 0;
 	text-align: center;
 	width: 100%;
-	height: 10em;
+	height: 12em;
 	position: fixed;
 	bottom: 0;
 	left: 0;

source/components/Results.js

@@ -31,7 +31,8 @@ export default class Results extends Component {
 		} = this.props
 
 
-		let explanation = R.has('root', analysedSituation) && clearDict() && getObjectives(situationGate, analysedSituation.root, analysedSituation.parsedRules)
+		let explanation = R.has('root', analysedSituation) && clearDict() && getObjectives(situationGate, analysedSituation.root, analysedSituation.parsedRules),
+			hint = analysedSituation.root.simulateur && analysedSituation.root.simulateur.indice
 
 		if (!explanation) return null
 
@@ -46,12 +47,11 @@ export default class Results extends Component {
 						</Link>
 					</div>
 					: <div id="results-titles">
-						<h2>Vos résultats <i className="fa fa-hand-o-right" aria-hidden="true"></i></h2>
+						<h2>{hint || "Vos résultats"}: <i className="fa fa-hand-o-right" aria-hidden="true"></i></h2>
 						{do {let text = R.path(['simulateur', 'résultats'])(analysedSituation.root)
 							text &&
 								<p id="resultText">{text}</p>
 						}}
-						<p id="understandTip"><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Cliquez pour comprendre chaque calcul</em></p>
 					</div>
 				}
 				<ul>

source/components/rule/Algorithm.js

@@ -35,6 +35,7 @@ export default class Algorithm extends React.Component {
 					}}
 					<section id="formule">
 						<h2>Calcul</h2>
+						<p>Vous pouvez cliquer sur chaque valeur pour comprendre comment elle est calculée.</p>
 						{ruleWithoutFormula ? <RuleWithoutFormula /> : makeJsx(rule['formule'])}
 					</section>
 				</section>

source/components/rule/Rule.js

@@ -59,7 +59,7 @@ export default class Rule extends Component {
 			situationExists = conversationStarted || this.state.example != null
 
 		let
-			{type, name, description} = this.rule,
+			{type, name, titre, description} = this.rule,
 			destinataire = R.path([type, 'destinataire'])(this.rule),
 			destinataireData = possiblesDestinataires[destinataire],
 			situationOrExampleRule = R.path(['example', 'rule'])(this.state) || this.rule,
@@ -68,7 +68,7 @@ export default class Rule extends Component {
 		return (
 			<div id="rule">
 				<Helmet>
-					<title>{capitalise0(name)}</title>
+					<title>{titre || capitalise0(name)}</title>
 					<meta name="description" content={description} />
 				</Helmet>
 				<h1>

source/components/rule/RuleValueVignette.css

@@ -23,7 +23,7 @@
 	background: white;
 	border-radius: 3px;
 	white-space: nowrap;
-	height: 6em;
+	height: 8em;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;

source/components/rule/RuleValueVignette.js

@@ -38,9 +38,11 @@ export default ({
 								? "Vous n'êtes pas concerné"
 								: unsatisfied
 									? "En attente de vos réponses..."
-									: <span className="figure">
+									: <div><span className="figure">
 										{humanFigure(2)(ruleValue) + "€"}
-									</span>)}
+									</span>
+									<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p>
+									</div>)}
 					</p>
 				</div>
 			</Link>