🎨 Amélioration du style de l'explication

source/components/Explanation.css

@@ -0,0 +1,7 @@
+#explanation {
+	margin: 6em 0;
+}
+
+#explanation p {
+	text-align: center;
+}

source/components/Explanation.js

@@ -3,6 +3,7 @@ import ResultsGrid from 'Components/ResultsGrid'
 import { salaries } from 'Components/TargetSelection'
 import { isEmpty, intersection, head } from 'ramda'
 import Rule from 'Components/rule/Rule'
+import './Explanation.css'
 
 export default class Explanation extends Component {
 	render() {
@@ -10,10 +11,13 @@ export default class Explanation extends Component {
 
 		if (!targetRules) return null
 
+		return <section id="explanation">{this.renderExplanation(targetRules)}</section>
+	}
+	renderExplanation(targetRules) {
 		if (!isEmpty(intersection(targetRules, salaries))) return <ResultsGrid /> // Problem if targetRules is [salaire net, aides] the Explanation will not explain 'aides'. The user will have to click on Aides to understand it. Should we display a list of <Rule /> sections ?
 
 		if (targetRules.length > 1)
-			return <p>L'explication de ces objectifs n'est pas encore disponible</p>
+			return <p>Cliquez sur les lignes de résultat ci-dessus pour les comprendre</p>
 
 		return <Rule rule={head(targetRules)} />
 	}

source/components/ResultsGrid.css

@@ -1,3 +0,0 @@
-.resultsGrid {
-	margin: 6em 0;
-}

source/components/ResultsGrid.js

@@ -9,7 +9,6 @@ import { humanFigure } from "./rule/RuleValueVignette"
 
 import { capitalise0 } from "../utils"
 import { nameLeaf } from "Engine/rules"
-import "./ResultsGrid.css"
 
 
 // Filtered variables and rules can't be filtered in a uniform way, for now

source/components/rule/Rule.css

@@ -2,13 +2,8 @@
 	font-size: 110%;
 	height: 100%;
 	padding-bottom: 10%;
-}
-
-@media screen and (min-width:860px) {
-	#rule {
-		width: 860px;
-		margin: 0 auto;
-	}
+	max-width: 45em;
+	margin: 0 auto;
 }
 
 #rule-meta {