Séparation du css du html

jericho/static/index.html

@@ -81,19 +81,11 @@
           <label>Nom de la création :</label>
           <input type="text" id="seq-name" placeholder="ex: sequence_test_01" />
         </div>
-        <div id="sequence-list" style="margin-bottom: 15px"></div>
-        <button
-          id="add-emotion-btn"
-          class="btn-primary"
-          style="background-color: #27ae60"
-        >
+        <div id="sequence-list"></div>
+        <button id="add-emotion-btn" class="btn-primary">
           + Ajouter une émotion
         </button>
-        <button
-          id="save-seq-btn"
-          class="btn-primary"
-          style="background-color: #8e44ad; margin-left: 10px"
-        >
+        <button id="save-seq-btn" class="btn-primary">
           Enregistrer la séquence
         </button>
         <p id="seq-msg"></p>
@@ -106,7 +98,7 @@
           <button id="launch-sync-btn" class="btn-success">
             [►] Lire vidéo + robot synchronisés
           </button>
-          <button id="launch-seq-btn" class="btn-success" style="display: none">
+          <button id="launch-seq-btn" class="btn-success">
             [►] Lire la séquence (sans vidéo)
           </button>
           <p class="sync-hint">

jericho/static/main.js

@@ -380,7 +380,7 @@ function createEmotionRow() {
 
     const btnRemove = document.createElement('button');
     btnRemove.textContent = '✗';
-    btnRemove.style.background = '#e74c3c';
+    btnRemove.style.background = '#c77981';
     btnRemove.style.color = 'white';
     btnRemove.style.border = 'none';
     btnRemove.style.cursor = 'pointer';

jericho/static/style.css

@@ -152,4 +152,21 @@ input[type="text"], input[type="number"], input[type="url"] {
         margin-right : 2.5%;
         width : 11%;
     }
+}
+
+#sequence-list{
+    margin-bottom: 2%;
+}
+
+#add-emotion-btn{
+    background-color : #c77981;
+}
+
+#save-seq-btn{
+    background-color: #a34952;
+    margin-left: 2%;
+}
+
+#launch-seq-btn{
+    display: none;
 }