🎨 Sur /regle toutes les sections sont empilées verticalement

source/components/rule/Algorithm.css

@@ -3,11 +3,6 @@
 	Règles CSS d'affichage des algorithmes
 */
 
-#rule-rules {
-	display: inline-flex;
-	justify-content: start;
-	min-height: 5em;
-}
 
 #rule-rules .situationValue {
 	display: none;
@@ -21,11 +16,10 @@
 }
 
 #algorithm {
-	margin-right: 10em;
 }
 
 #rule-rules section {
-	margin: 1em 0 1em 3em;
+	margin: 1em 0 1em 0;
 	font-weight: 500;
 	color: #444
 }
@@ -209,9 +203,6 @@
 
 
 
-#rule-calc {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: baseline;
+#rule-content {
+	margin-left: 2em;
 }

source/components/rule/Examples.css

@@ -1,5 +1,4 @@
 #examples {
-	min-width: 30%;
 }
 
 #examples h2.subtitled {

source/components/rule/References.js

@@ -26,7 +26,7 @@ export default class References extends React.Component {
 							<li id="complementary" key="compl">
 								<span className="meta" />
 								<a
-									href="#"
+									href="#/"
 									onClick={() => this.setState({ showComplementary: true })}
 								>
 										sources complémentaires

source/components/rule/Rule.css

@@ -4,9 +4,9 @@
 	padding-bottom: 10%;
 }
 
-@media screen and (min-width:800px) {
+@media screen and (min-width:860px) {
 	#rule {
-		width: 800px;
+		width: 860px;
 		margin: 0 auto;
 	}
 }

source/components/rule/Rule.js

@@ -79,7 +79,7 @@ export default class Rule extends Component {
 				</section>
 				<div
 					id="ruleValue"
-					style={{ visibility: situationExists ? "visible" : "hidden" }}
+					style={{ display: situationExists ? "block" : "none" }}
 				>
 					<h2>Résultat</h2>
 					<p>
@@ -91,7 +91,7 @@ export default class Rule extends Component {
 					</p>
 				</div>
 
-				<section id="rule-calc">
+				<section id="rule-content">
 					<Algorithm
 						traversedRule={situationOrExampleRule}
 						showValues={situationExists}