From dda23c5a90edcc1251e267de7a0c5f3bdb8fe7a7 Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Thu, 7 Dec 2017 19:19:57 +0100
Subject: [PATCH] =?UTF-8?q?:art:=20Am=C3=A9lioration=20du=20style=20de=20l?=
 =?UTF-8?q?'explication?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/Explanation.css | 7 +++++++
 source/components/Explanation.js  | 6 +++++-
 source/components/ResultsGrid.css | 3 ---
 source/components/ResultsGrid.js  | 1 -
 source/components/rule/Rule.css   | 9 ++-------
 5 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 source/components/Explanation.css
 delete mode 100644 source/components/ResultsGrid.css

diff --git a/source/components/Explanation.css b/source/components/Explanation.css
new file mode 100644
index 000000000..c02ccc520
--- /dev/null
+++ b/source/components/Explanation.css
@@ -0,0 +1,7 @@
+#explanation {
+	margin: 6em 0;
+}
+
+#explanation p {
+	text-align: center;
+}
diff --git a/source/components/Explanation.js b/source/components/Explanation.js
index 8b081ccc4..388f76451 100644
--- a/source/components/Explanation.js
+++ b/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)} />
 	}
diff --git a/source/components/ResultsGrid.css b/source/components/ResultsGrid.css
deleted file mode 100644
index e1b6045d1..000000000
--- a/source/components/ResultsGrid.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.resultsGrid {
-	margin: 6em 0;
-}
diff --git a/source/components/ResultsGrid.js b/source/components/ResultsGrid.js
index 5cb0cde22..9f6181146 100644
--- a/source/components/ResultsGrid.js
+++ b/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
diff --git a/source/components/rule/Rule.css b/source/components/rule/Rule.css
index c016bb3eb..bec991f17 100644
--- a/source/components/rule/Rule.css
+++ b/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 {