🎨 Amélioration visuelle de l'introduction

source/components/Simulateur.css

@@ -25,23 +25,18 @@
 #simSubtitle {
 	margin-top: -.5em;
 	text-align: center;
-	font-size: 110%;
+	font-size: 120%;
 	font-weight: 300;
 	margin-bottom: 2.5em;
 }
 
-#sim .centered {
-	/*width: 40%;*/
+#sim .intro {
+	font-style: italic;
+	font-size: 110%;
 	width: 50em;
 	max-width: 90%;
 	margin: 0 auto;
 }
-
-#sim .intro {
-	font-style: italic;
-	font-size: 100%;
-	margin-bottom: 3%;
-}
 #sim .intro > div {
 	margin: 1em 0;
 	display: flex;
@@ -65,21 +60,22 @@
 	text-align: center;
 }
 
-#sim .action button {
+#sim .intro button {
 	color: white;
 	display: block;
 	text-align: center;
 	background: #4A89DC;
-	padding: .6em 1.2em;
+	padding: .3em 1em;
 	font-size: 140%;
-	margin: 1em auto;
-	width: 12em;
+	margin: 2em auto;
+	width: 8em;
 	border: none;
-	box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1)
+	box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
+	opacity: 0.95
 }
-#sim .action button:hover {
+#sim .intro button:hover {
 	box-shadow: none;
-	opacity: .95;
+	opacity: 1;
 }
 
 

source/components/Simulateur.js

@@ -84,7 +84,7 @@ export default class extends Component {
 					<div id="simSubtitle">{sim('sous-titre')}</div>
 				}
 				{!started && sim(['introduction', 'notes']) &&
-					<div className="intro centered">
+					<div className="intro">
 						{sim(['introduction', 'notes']).map( ({icône, texte, titre}) =>
 							<div key={titre}>
 								<i title={titre} className={"fa "+icône} aria-hidden="true"></i>