🎨 Titres et sous-titres plus clairs sur /regle

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>

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;

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" />

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 {