From 7e5f8a019e8d4f7429bae87fec0834053bcb56ab Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Fri, 13 Oct 2017 17:20:31 +0200
Subject: [PATCH] :art: Titres et sous-titres plus clairs sur /regle

---
 source/components/rule/Algorithm.js | 15 +++++++++------
 source/components/rule/Examples.css | 10 ----------
 source/components/rule/Examples.js  |  3 +--
 source/components/rule/Rule.css     | 14 ++++++++++----
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/source/components/rule/Algorithm.js b/source/components/rule/Algorithm.js
index 586f43fec..e86581336 100644
--- a/source/components/rule/Algorithm.js
+++ b/source/components/rule/Algorithm.js
@@ -32,16 +32,19 @@ export default class Algorithm extends React.Component {
 							R.toPairs(rule).find(([,v]) => v && v.rulePropType == 'cond') || []
 						cond != null &&
 							<section id="declenchement">
-								<h2>Conditions de déclenchement</h2>
+								<h2>Déclenchement</h2>
 								{makeJsx(cond)}
 							</section>
 					}}
 					<section id="formule">
-						<h2>Calcul</h2>
-						{ruleWithoutFormula ? <RuleWithoutFormula /> : <div>
-							<p>Vous pouvez cliquer sur chaque valeur pour comprendre comment elle est calculée.</p>
-							{makeJsx(rule['formule'])}
-						</div>}
+						<h2>
+							Calcul
+							{!ruleWithoutFormula && <small>Cliquez sur chaque chaque valeur pour comprendre</small> }
+						</h2>
+						{ruleWithoutFormula
+							? <RuleWithoutFormula />
+							: makeJsx(rule['formule'])
+						}
 					</section>
 				</section>
 			</div>
diff --git a/source/components/rule/Examples.css b/source/components/rule/Examples.css
index be83aa850..0d2dad9b4 100644
--- a/source/components/rule/Examples.css
+++ b/source/components/rule/Examples.css
@@ -1,16 +1,6 @@
 #examples {
 }
 
-#examples h2.subtitled {
-	margin-bottom: .1em;
-}
-#examples .subtitle {
-	font-size: 85%;
-	font-style: italic;
-	margin-top: 0.3em;
-	margin-bottom: 1.6em
-}
-
 #injectSituation {
 	background: rgb(74, 137, 220);
 	color: white;
diff --git a/source/components/rule/Examples.js b/source/components/rule/Examples.js
index 28f485ea3..ea0fe6ec3 100644
--- a/source/components/rule/Examples.js
+++ b/source/components/rule/Examples.js
@@ -44,8 +44,7 @@ export default class Examples extends Component {
 		if (!examples.length) return null
 		return (
 			<div id="examples">
-				<h2 className="subtitled">Exemples de calcul</h2>
-				<p className="subtitle">Cliquez sur un exemple pour le visualiser</p>
+				<h2>Exemples de calcul <small>Cliquez sur un exemple pour le tester</small></h2>
 				{R.isEmpty(examples) ? (
 					<p>
 						<i className="fa fa-exclamation-triangle" aria-hidden="true" />
diff --git a/source/components/rule/Rule.css b/source/components/rule/Rule.css
index b27de78ca..00fa955ad 100644
--- a/source/components/rule/Rule.css
+++ b/source/components/rule/Rule.css
@@ -42,11 +42,17 @@
 }
 
 #rule h2 {
-	font-size: 140%;
+	font-size: 150%;
 	font-weight: 400;
-	border-bottom: 1px solid #4B4B66;
-	display: inline-block;
-	padding-right: .6em;
+	border-bottom: 1px solid rgba(51, 51, 80, 0.15);
+	padding: 0.3em 0 .1em;
+}
+
+#rule h2 small {
+	font-size: 60%;
+	color: #888;
+	font-style: italic;
+	margin-left: 1em;
 }
 
 #rule ul {