utiliser variables bootstrap pour la couleur

science-quest/src/components/jeux/kahoot/Kahoot.vue

@@ -47,7 +47,7 @@ export default {
         <h1 style="padding-left: 0.5em;">Kahoot</h1>
         <div class="Kahoot-Header">
             <h2>Rejoindre un Kahoot</h2>
-            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createKahootModal">
+            <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#createKahootModal">
                 Créer un Kahoot
             </button>
             <form @submit.prevent>

science-quest/src/scss/kahoot.scss

@@ -1,12 +1,14 @@
 // kahoot styles
 
+@import "styles.scss";
+
 .Kahoot-Header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1em;
-    background-color: #007bff;
-    color: #fff;
+    background-color: $primary;
+    color: $light;
 }
 
 .Kahoot-content {
@@ -23,8 +25,8 @@
 .Kahoot-Create {
     display: flex;
     align-items: center;
-    background-color: #007bff;
-    color: #fff;
+    background-color: $primary;
+    color: $light;
 }
 
 // kahoot styles