divers styles: colors var, table thead,...

src/Bundle/ChillMainBundle/Resources/public/js/collection/collection.scss

@@ -8,10 +8,10 @@ div.chill-collection {
 
       li.entry {
          padding: 1em;
-         border: 1px solid var(--chill-llight-gray);
+         border: 1px solid var(--bs-chill-light-gray);
          
          &:nth-child(even) {
-            background-color: var(--chill-llight-gray);
+            background-color: var(--bs-chill-light-gray);
          }
       }
 

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss

@@ -29,6 +29,14 @@ h1, h2, .h1, .h2 {
    display: block;
 }
 
+label:not(.form-check-label),
+legend.col-form-label {
+   padding-top: .5em;
+   padding-bottom: .5em;
+   font-weight: 700;
+   margin-bottom: .375em;
+}
+
 form {
    /* avoid useless html in first level of the custom fields row loop in forms
    * (better should to improve the loop)
@@ -58,6 +66,15 @@ form {
    }
 }
 
+/// table 
+
+table.table-bordered {
+   thead, thead * {
+      border: 0 !important;
+      text-align: center;
+   }
+}
+
 /// chill elements of design 
 
 .sticky-form-buttons {
@@ -266,9 +283,3 @@ footer.footer {
       }
    }
 }
-
-/// modal + vue 
-
-div.modal-mask {
-   display: inherit;
-}

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -6,6 +6,7 @@
  * when possible, try to use bootstrap html class
 */
 
+@import '~ChillMainAssets/modules/bootstrap/bootstrap';
 
 @import 'alert-first-child';
 @import 'alert-with-actions';
@@ -68,7 +69,7 @@ div.flex-table {
       margin: 0;
    }
    h2, h3, h4 {
-      color: var(--chill-blue);
+      color: var(--bs-chill-blue);
    }
    div.item-bloc {
       // We use box-shadow instead of border
@@ -76,11 +77,11 @@ div.flex-table {
       // when blocs are resized for small screen !
       // Then we can simulate border-collapse: collapse (table)
       box-shadow: 
-          1px 0 0 0 #000, 
-          0 1px 0 0 #000, 
-          1px 1px 0 0 #000,   /* fix the corner */
-          1px 0 0 0 #000 inset, 
-          0 1px 0 0 #000 inset;
+          1px 0 0 0 var(--bs-dark), 
+          0 1px 0 0 var(--bs-dark), 
+          1px 1px 0 0 var(--bs-dark),   /* fix the corner */
+          1px 0 0 0 var(--bs-dark) inset, 
+          0 1px 0 0 var(--bs-dark) inset;
    }
 }