Les boutons réponses et comprendre sont visibles dès le début

source/components/Results.css

@@ -6,11 +6,12 @@
 }
 #results {
 	width: 100%;
+	padding: .5em;
 }
 #resultsContent {
 	position: relative;
 	margin: 0 auto;
-	padding: .6em 0;
+	padding: .2em 0;
 	width: 100%;
 	max-width: 45em;
 	background: #2975D1;
@@ -20,7 +21,8 @@
 
 #results button {
 	display: block;
-	margin: 1em auto;
+	margin: .5em auto 0;
+	transition: 1s opacity;
 }
 
 #results-actions {
@@ -63,7 +65,7 @@
 	align-items: center;
 	flex-wrap: wrap;
 	height: 70%;
-	margin: .2em auto 1.2em;
+	margin: .6em auto 1.2em;
 }
 
 

source/components/Results.js

@@ -63,7 +63,7 @@ export default class Results extends Component {
               ))}
             </ul>
           </div>
-          {done && <button>Comprendre mes résultats</button>}
+          <button style={{opacity: done ? 1 : 0}}>Comprendre mes résultats</button>
         </section>
       </div>
     )

source/components/conversation/Conversation.js

@@ -52,7 +52,7 @@ export default class Conversation extends Component {
           </div>
         )}
         <Element name="myScrollToElement" id="myScrollToElement">
-          {foldedSteps.length != 0 && <button>↑ Modifier mes réponses</button>}
+          <button style={{opacity: foldedSteps.length != 0 ? 1 : 0}}>↑ Modifier mes réponses</button>
           <div id="currentQuestion">
             {currentQuestion || <Satisfaction simu={this.props.simu} />}
           </div>

source/components/conversation/conversation.css

@@ -6,7 +6,8 @@
 
 #myScrollToElement button {
 	display: block;
-	margin: 1em auto;
+	margin: 0 auto 1em;
+	transition: 1s opacity;
 }