Fix Colofond style and add variables

Author: thomlamb

base/src/scss/_trucaverif.scss

@@ -575,20 +575,6 @@ body#visual-portal-wrapper.userrole-anonymous.portaltype-imio-smartweb-procedure
   padding-bottom: 0 !important;
 }
 
-.colophonWrapper {
-  padding: 0.5rem 1rem 0;
-}
-
-.colophonWrapper ul {
-  justify-content: center;
-  gap: 1rem;
-  text-align: center;
-}
-
-.colophonWrapper li {
-  margin-right: 0;
-}
-
 .template-sitemap ul {
   padding-left: 2rem;
 }

base/src/scss/common/_com-footer.scss

@@ -1,7 +1,32 @@
 #portal-colophon {
+  background-color: $colofon-bg;
+  padding: 15px 0;
+
   li {
+    color: $colofon-color;
+
+    a {
+      color: $colofon-color;
+
+      &:hover,
+      &:focus {
+        color: lighten($colofon-color, 20%) !important;
+      }
+    }
+
     list-style: none;
   }
+
+  .colophonWrapper {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0;
+      align-items: center;
+      justify-content: center;
+      gap: 15px;
+    }
+  }
 }
 
 footer li {

base/src/scss/variables.scss

@@ -291,6 +291,11 @@ $event-date-color: $primary !default;
 $event-date-font-size: 14px !default;
 $event-see-all-justify-content: $see-all-justify-content !default;
 
+// footer
+
+$colofon-bg: $primary !default;
+$colofon-color: #fff !default;
+
 // Album
 $album-section-full-width: true !default;
 $album-section-bg: #edeae5 !default;