feat: Mise à jour du design de l'application

src/components/Question.vue

@@ -41,11 +41,7 @@ function slideMove(splide, newIndex) {
             :id="`question_${question.id}`"
             ref="slides"
           >
-            <SplideSlide
-              v-for="answer in question.answers"
-              :key="answer.id"
-              @click="$emit('nextQuestion')"
-            >
+            <SplideSlide v-for="answer in question.answers" :key="answer.id">
               <img height="200" :src="`/answers/${answer.image}.webp`" />
             </SplideSlide>
           </Splide>
@@ -77,9 +73,39 @@ function slideMove(splide, newIndex) {
       </template>
     </div>
   </div>
+
+  <button class="btn next" @click="$emit('nextQuestion')">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 40 40"
+      width="40"
+      height="40"
+    >
+      <path
+        d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"
+      ></path>
+    </svg>
+  </button>
 </template>
 
 <style lang="sass">
+.next
+  background: var(--color-highlight-background)
+  bottom: 1rem
+  right: 1rem
+  width: 3rem
+  height: 3rem
+  opacity: .8
+
+  &:hover
+    opacity: 1
+
+  svg
+    width: 80%
+    height: 80%
+    transform: rotate(90deg)
+    fill: var(--color-highlight-text)
+
 .splide__arrow
   background: transparent
   border: 3px solid var(--color-green)
@@ -93,6 +119,7 @@ function slideMove(splide, newIndex) {
     width: 1.6rem
 .splide__pagination
   bottom: -1.5em
+  display: none
 .splide__pagination__page
   width: .7rem
   height: .7rem
@@ -108,7 +135,7 @@ legend
   text-align: center
   font-size: 1.4rem
   line-height: 2rem
-  margin: 1rem
+  font-weight: bold
 
 .choices
   list-style-type: none
@@ -116,12 +143,15 @@ legend
   display: inline-block
   padding-left: 0
 
+  label
+    cursor: pointer
+
   input[type=radio]
     display: none
 
     & + label
       position: relative
-      padding-left: 2rem
+      padding: .2rem .2rem .2rem 2rem
     & + label::before,
     & + label::after
       display: block
@@ -130,20 +160,22 @@ legend
       content:''
       border-radius: 1rem
     & + label::before
-      bottom: 0
+      bottom: .3rem
       left: 0
       background-color: var(--color-green)
       width: 1rem
       height: 1rem
     & + label::after
-      bottom: 3px
+      bottom: calc(3px + .3rem)
       left: 3px
       width: calc(1rem - 6px)
       height: calc(1rem - 6px)
+    &:checked + label
+      text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor
     &:checked + label::before
-      background-color: white
-    &:checked + label::after
       background-color: var(--color-green)
+    &:checked + label::after
+      background-color: white
 
 .main
   height: 100%
@@ -163,6 +195,9 @@ legend
     max-width: 100%
     min-width: 280px
 
+    @media (max-height: 600px)
+      margin: 1rem auto
+
   h2
     font-size: 2rem