From 2781a3efc281aa140235e65db543ed4ac7a8c302 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Mon, 20 Nov 2023 10:05:50 +0100
Subject: [PATCH] fix: optim css

---
 404.php                              |    2 +-
 category-blog.php                    |    2 +-
 comments.php                         |    4 +-
 components/article/terms.php         |    6 +-
 components/featured.php              |    2 +-
 components/footer-content.php        |    2 +-
 components/navbar-category.php       |    2 +-
 components/navbar-pages.php          |    2 +-
 components/posts-list.php            |    4 +-
 components/previews.php              |    4 +-
 components/sidebar/archives.php      |    2 +-
 components/sidebar/categories.php    |    2 +-
 components/sidebar/last-articles.php |    2 +-
 components/sidebar/links.php         |    2 +-
 components/sidebar/tags.php          |    2 +-
 fonts/teko-bold-webfont.woff2        |  Bin 0 -> 15308 bytes
 functions.php                        |    2 +-
 header.php                           |    2 +-
 page-about.php                       |    2 +-
 page-links.php                       |    2 +-
 page-roman.php                       |    4 +-
 scss/_core.scss                      |    5 +-
 scss/_drawing.scss                   |    2 +-
 scss/components/_badges.scss         |    9 +-
 scss/components/_breadcrumb.scss     |   50 +-
 scss/components/_btn-groups.scss     |    2 -
 scss/components/_buttons.scss        |   99 +-
 scss/components/_cards.scss          |   59 +-
 scss/components/_input.scss          |   84 ++
 scss/components/_menus.scss          |   65 +-
 scss/components/_pagination.scss     |   39 +-
 scss/components/_previews.scss       |    5 -
 scss/components/_tables.scss         |    4 -
 scss/components/_toasts.scss         |   39 +-
 scss/core/_bases.scss                |   47 +
 scss/core/_typography.scss           |   99 +-
 scss/custom/_global.scss             |   49 +-
 scss/definitions/_fonts.scss         |    3 +-
 scss/definitions/_palette.scss       |    4 +-
 scss/mixins/_colors.scss             |    6 +
 scss/mixins/_panels.scss             |   59 +-
 scss/utils/_a11y.scss                |   21 +-
 scss/utils/_colorize.scss            |   87 +-
 style.css                            | 1849 +++++---------------------
 taxonomy-roman.php                   |    2 +-
 45 files changed, 838 insertions(+), 1902 deletions(-)
 create mode 100644 fonts/teko-bold-webfont.woff2
 create mode 100644 scss/core/_bases.scss

diff --git a/404.php b/404.php
index aafcc64..7219013 100644
--- a/404.php
+++ b/404.php
@@ -1,6 +1,6 @@
 <?php get_header(); ?>
 <main id="skip">
-  <div class="card head-danger">
+  <div class="card c-danger">
     <div class="card-header"><i class="icon-folder-exclamation-mark" aria-hidden="true"></i> 404 Not Found</div>
     <div class="card-body">
       <p>La page que vous cherchez n'a pas été trouvée</p>
diff --git a/category-blog.php b/category-blog.php
index 3ed3764..81447fb 100644
--- a/category-blog.php
+++ b/category-blog.php
@@ -9,7 +9,7 @@
 
 <!-- Sidebar custom pour contenir la description -->
 <aside class="sidebar">
-  <div class="card head-info">
+  <div class="card c-info">
     <div class="card-header"><i class="icon-folder-open"></i> <?php echo single_cat_title(); ?></div>
     <div class="card-body">
       <?php the_archive_description() ?>
diff --git a/comments.php b/comments.php
index ae28836..bfd87dd 100644
--- a/comments.php
+++ b/comments.php
@@ -57,7 +57,7 @@ $oddcomment = 'alt';
 <?php endif; ?>
 
 <?php if ('open' == $post->comment_status) : ?>
-	<div class="card head-secondary">
+	<div class="card c-secondary">
 		<h2 id="respond" class="card-header">Laissez un commentaire</h2>
 
 		<!-- Cas du besoin de s'enregistrer -->
@@ -97,7 +97,7 @@ $oddcomment = 'alt';
 		<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
 		<?php do_action('comment_form', $post->ID); ?>
 
-		<p class="align-right"><button name="submit" class="btn btn-primary" type="submit" id="submit" value="Envoyer" >Envoyer</button>
+		<p class="align-right"><button name="submit" class="btn c-primary" type="submit" id="submit" value="Envoyer" >Envoyer</button>
 		</p>
 
 
diff --git a/components/article/terms.php b/components/article/terms.php
index 245284c..6715216 100644
--- a/components/article/terms.php
+++ b/components/article/terms.php
@@ -5,7 +5,7 @@
     echo '<h4 class="sr-only" id="title-article-taxo-romans">Romans</h4>';
     $romans = get_the_terms($post->ID, 'roman');
     foreach( $romans as $roman ) {
-      echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary'><i class='icon-book'></i>&nbsp;" . $roman->name . "</a></li>";
+      echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge c-primary'><i class='icon-book'></i>&nbsp;" . $roman->name . "</a></li>";
     }
     echo "</ul>";
   } else {
@@ -13,7 +13,7 @@
     echo "<ul class='nolist' aria-labelledby='title-article-taxo-categories'>";
     echo '<h4 class="sr-only" id="title-article-taxo-categories">Catégories</h4>';
     foreach( $categories as $category ) {
-      echo "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary'><i class='icon-folder'></i>&nbsp;" . $category->cat_name . "</a></li>";
+      echo "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge c-primary'><i class='icon-folder'></i>&nbsp;" . $category->cat_name . "</a></li>";
     }
     echo "</ul>";
   }
@@ -22,7 +22,7 @@
     echo "<ul class='nolist' aria-labelledby='title-article-taxo-tags'>";
     echo '<h4 class="sr-only" id="title-article-taxo-tags">Tags</h4>';
     foreach( $tags as $tag ) {
-      echo "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary'><i class='icon-tag'></i>&nbsp;" . $tag->name . "</a></li>";
+      echo "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge c-secondary'><i class='icon-tag'></i>&nbsp;" . $tag->name . "</a></li>";
     }
     echo "</ul>";
   }
diff --git a/components/featured.php b/components/featured.php
index dfb809e..27127f0 100644
--- a/components/featured.php
+++ b/components/featured.php
@@ -22,7 +22,7 @@
 		    <div class="preview-overlay">
 		      <div class="preview-categories">
 		        <?php $category = get_the_category();
-              echo"<span class='badge bg-secondary'>" . $category[0]->cat_name . "</span>"; ?>
+              echo"<span class='badge c-secondary'>" . $category[0]->cat_name . "</span>"; ?>
             </div>
 		    
 		      <h2 class="preview-title"><?php the_title();/*3*/ ?></h2>
diff --git a/components/footer-content.php b/components/footer-content.php
index 6e20bfe..10f8be5 100644
--- a/components/footer-content.php
+++ b/components/footer-content.php
@@ -1,6 +1,6 @@
 <footer class="bg-dark fg-light" aria-labelledby="title-footer">
   <h1 class="sr-only" id="title-footer">Informations sur le site</h1>
-  <nav class="container menu toolbar bg-light fg-dark" aria-labelledby="title-footer-social">
+  <nav class="container menu toolbar bg fg-dark" aria-labelledby="title-footer-social">
     <h2 class="sr-only" id="title-footer-social">Me suivre</h2>
     <ul class="f-end">
       <?php
diff --git a/components/navbar-category.php b/components/navbar-category.php
index 79fadf9..3772198 100644
--- a/components/navbar-category.php
+++ b/components/navbar-category.php
@@ -1,4 +1,4 @@
-<nav class="container menu toolbar bg-light fg-dark categories d-none d-flex-sm">
+<nav class="container menu toolbar bg fg-dark categories d-none d-flex-sm">
   <h2 class="sr-only">Liste des catégories</h2>
   <ul class="f-around">
     <?php
diff --git a/components/navbar-pages.php b/components/navbar-pages.php
index 730fd26..7eed50a 100644
--- a/components/navbar-pages.php
+++ b/components/navbar-pages.php
@@ -12,7 +12,7 @@
           <a href="#" class="menu-item submenu">
             Pages <i class="icon-caret-down"></i>
           </a>
-          <ul class="bg-light menu fg-dark">
+          <ul class="bg menu fg-dark">
             <?php
             $listmenu = get_nav_menu_locations();
             $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
diff --git a/components/posts-list.php b/components/posts-list.php
index 43b9f22..499dd27 100644
--- a/components/posts-list.php
+++ b/components/posts-list.php
@@ -1,10 +1,10 @@
 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
-  <div class="card head-primary" id="post-<?php the_ID(); ?>">
+  <div class="card c-primary" id="post-<?php the_ID(); ?>">
     <div class="card-header"><h1><?php the_title(); ?></h1></div>
     <div class="flex-that mb">
         <div class="article-category">
           <?php $category = get_the_category();
-            echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='icon-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
+            echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn btn-small c-info'><i class='icon-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
         </div>
         <time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
     </div>
diff --git a/components/previews.php b/components/previews.php
index 3e836a5..de67686 100644
--- a/components/previews.php
+++ b/components/previews.php
@@ -12,12 +12,12 @@
           <?php
             if (!has_category('chapters')) {
               $category = get_the_category();
-              echo"<span class='badge bg-secondary small-text m-0'>" . $category[0]->cat_name . "</span>";
+              echo"<span class='badge c-secondary small-text m-0'>" . $category[0]->cat_name . "</span>";
             }
           ?>
         </div>
         <div>
-          <time><span class="badge bg-secondary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
+          <time><span class="badge c-secondary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
         </div>
       </div>
       <div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>
diff --git a/components/sidebar/archives.php b/components/sidebar/archives.php
index f898e1d..b317d73 100644
--- a/components/sidebar/archives.php
+++ b/components/sidebar/archives.php
@@ -1,4 +1,4 @@
-<section class="card head-secondary">
+<section class="card c-secondary">
   <h2 class="card-header"><i class="icon-folder" aria-hidden="true"></i> Archives</h2>
   <div class="card-body">
     <ul class="tag-list">
diff --git a/components/sidebar/categories.php b/components/sidebar/categories.php
index dd45e10..8535991 100644
--- a/components/sidebar/categories.php
+++ b/components/sidebar/categories.php
@@ -1,4 +1,4 @@
-<section class="card head-secondary d-flex-sm d-none">
+<section class="card c-secondary d-flex-sm d-none">
   <h2 class="card-header"><i class="icon-folder" aria-hidden="true"></i> Catégories</h2>
   <div class="menu fg-dark">
     <ul>
diff --git a/components/sidebar/last-articles.php b/components/sidebar/last-articles.php
index 110339d..385c7d9 100644
--- a/components/sidebar/last-articles.php
+++ b/components/sidebar/last-articles.php
@@ -1,4 +1,4 @@
-<section class="card head-secondary">
+<section class="card c-secondary">
   <h2 class="card-header"><i class="icon-rss" aria-hidden="true"></i> Publications</h2>
   <div class="menu fg-dark">
     <ul>
diff --git a/components/sidebar/links.php b/components/sidebar/links.php
index 5bf413b..90bcc48 100644
--- a/components/sidebar/links.php
+++ b/components/sidebar/links.php
@@ -3,7 +3,7 @@ $listmenu = get_nav_menu_locations();
 $menu = wp_get_nav_menu_items($listmenu['link-menu']);
 if ($menu != null) {
 ?>
-<section class="card head-secondary">
+<section class="card c-secondary">
   <h2 class="card-header"><i class="icon-link"  aria-hidden="true"></i> Liens</h2>
   <ul class="card-menu">
     <?php
diff --git a/components/sidebar/tags.php b/components/sidebar/tags.php
index 07bdc76..7e183dd 100644
--- a/components/sidebar/tags.php
+++ b/components/sidebar/tags.php
@@ -9,7 +9,7 @@ $tags = get_tags($args);
 
 ?>
 
-<section class="card head-secondary">
+<section class="card c-secondary">
   <h2 class="card-header"><i class="icon-tags" aria-hidden="true"></i> Tags</h2>
   <div class="card-body">
     <ul class="tag-list">
diff --git a/fonts/teko-bold-webfont.woff2 b/fonts/teko-bold-webfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..3f05c6c0272d4244ab2960ffd56c7a641d7ab7a8
GIT binary patch
literal 15308
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

literal 0
HcmV?d00001

diff --git a/functions.php b/functions.php
index d6add68..0cf301d 100644
--- a/functions.php
+++ b/functions.php
@@ -172,7 +172,7 @@ function kspace_cat_breadcrumb_with_rss($categoryName, $icon, $categoryType, $rs
     <div class="flex-that d-none d-flex-sm">
         <?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
         <div class="rss">
-            <a href="<?php echo $rssLink; ?>" class="btn btn-warning d-block m-0" /><i class="icon-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
+            <a href="<?php echo $rssLink; ?>" class="btn c-warning d-block m-0" /><i class="icon-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
         </div>
     </div>
 <?php
diff --git a/header.php b/header.php
index 268a8f1..1ae1f1a 100644
--- a/header.php
+++ b/header.php
@@ -23,7 +23,7 @@
 
 <!-- Début du vrai HTML -->
 <body>
-	<div class="bg-dark skip small-text">
+	<div class="bg-dark skip small-text fg-light">
 		<a href="#skip">Accéder au contenu</a>
 	</div>
   <div id="wrapper">
diff --git a/page-about.php b/page-about.php
index 55cd58f..71a81c3 100644
--- a/page-about.php
+++ b/page-about.php
@@ -15,7 +15,7 @@
   <?php endif; ?>
 </main>
 <aside class="sidebar">
-  <div class="card head-info">
+  <div class="card c-info">
     <?php $desc = explode(";", get_the_author_meta( 'infodata' )) ?>
     <div class="card-header"><i class="icon-info" aria-hidden="true"></i> <?php
       if (!empty($desc[1])) {
diff --git a/page-links.php b/page-links.php
index f50afe6..ac6c2ad 100644
--- a/page-links.php
+++ b/page-links.php
@@ -11,7 +11,7 @@
     </div>
   </article>
 
-  <div class="card head-secondary" id="social-network-card">
+  <div class="card c-secondary" id="social-network-card">
     <h2 class="card-header"><i class="icon-comments" aria-hidden="true"></i> Me retrouver</h2>
     <table>
       <thead>
diff --git a/page-roman.php b/page-roman.php
index 5ffded0..50d5520 100644
--- a/page-roman.php
+++ b/page-roman.php
@@ -11,7 +11,7 @@
 
   <?php if ( ! empty( $terms ) && is_array( $terms ) ) : ?>
       <?php foreach ( $terms as $term ) : ?>
-        <article class="card card-preview head-primary">
+        <article class="card card-preview c-primary">
           <a href="<?php echo esc_url( get_term_link( $term ) ) ?>" class="preview-link">
             <div class="preview-item">
               <?php
@@ -40,7 +40,7 @@
 <aside class="sidebar">
   <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
 
-    <div class="card head-info">
+    <div class="card c-info">
       <div class="card-header"><i class="icon-folder-open" aria-hidden="true"></i> <?php the_title(); ?></div>
       <div class="card-body">
         <?php the_content(); ?>
diff --git a/scss/_core.scss b/scss/_core.scss
index 20b25f0..8c0deec 100644
--- a/scss/_core.scss
+++ b/scss/_core.scss
@@ -2,8 +2,7 @@
 ** All the basic functions from the stylesheet
 */
 
-@import 'core/normalize';
-@import 'core/box-sizing';
+@import 'core/bases';
 @import 'core/typography';
 @import 'core/containers';
-@import 'core/columns';
+//@import 'core/columns';
diff --git a/scss/_drawing.scss b/scss/_drawing.scss
index f9bc19d..2e1e535 100644
--- a/scss/_drawing.scss
+++ b/scss/_drawing.scss
@@ -5,6 +5,7 @@
  *
  */
 
+@import 'components/badges';
 @import 'components/buttons';
 @import 'components/btn-groups';
 @import 'components/breadcrumb';
@@ -13,6 +14,5 @@
 @import 'components/menus';
 @import 'components/toasts';
 @import 'components/tables';
-//@import 'components/previews';
 @import 'components/sidebar';
 @import 'components/input';
diff --git a/scss/components/_badges.scss b/scss/components/_badges.scss
index 605ec5b..508ad00 100644
--- a/scss/components/_badges.scss
+++ b/scss/components/_badges.scss
@@ -1,6 +1,9 @@
 .badge {
-  @include button(0rem);
+  @include shape-style($button_large);
+  line-height: 1.5em;
   padding-left: $button_small;
   padding-right: $button_small;
-  text-decoration:none!important;
-}
+  text-decoration: none !important;
+  background-color: var(--accent-color);
+  color: var(--text-color-contrast);
+}
\ No newline at end of file
diff --git a/scss/components/_breadcrumb.scss b/scss/components/_breadcrumb.scss
index 4d967d2..a075363 100644
--- a/scss/components/_breadcrumb.scss
+++ b/scss/components/_breadcrumb.scss
@@ -1,41 +1,25 @@
-/* ------------------ BREADCRUMB ------------------- */
+ul.breadcrumb,
+ol.breadcrumb,
+.breadcrumb {
+    @include shape-style($button_large);
+    background-color: $color-background-alt;
 
-ul.breadcrumb, ol.breadcrumb, .breadcrumb {
-    padding-top: 0em;
-    background-color:transparent;
-    margin: 0;
-    padding-bottom:$lineheight;
+    &::before {
+        background-color: $color-background-alt;
+    }
+
+    padding: $button_large/2;
+    margin: 0 0 $lineheight;
     @include li-flex();
 }
 
-.breadcrumb li.breadcrumb-item {
-    padding:0;
-    margin:0!important;
-    &:before {
-        display:none;
+.breadcrumb {
+    li:not(:first-child)::before {
+        content: "/";
+        padding: 0.3rem;
     }
 
-    a, & > span {
-        display:inline-block;
-        @include button($button-large);
-        @include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
-        margin:0 $button-group-margin 0 $button-group-margin;
-        outline-color: accentuate($color-background-alt)!important;
-        text-decoration: none;
-
-        &.active {
-            @include button-fullcontrol($color-secondary, $color-secondary, $color-font-light);
-        }
+    .active {
+        font-weight: 600;
     }
-
-    &:not(:first-child) a, &:not(:first-child) > span {
-      border-top-left-radius: 0;
-      border-bottom-left-radius:0;
-    }
-
-    &:not(:last-child) a, &:not(:last-child) > span {
-      border-top-right-radius: 0;
-      border-bottom-right-radius:0;
-    }
-
 }
diff --git a/scss/components/_btn-groups.scss b/scss/components/_btn-groups.scss
index aa33e1d..577b035 100644
--- a/scss/components/_btn-groups.scss
+++ b/scss/components/_btn-groups.scss
@@ -1,5 +1,3 @@
-// BUTTONS GROUPS
-
 .btn-toolbar {
     padding: 0 $button-large;
 }
diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss
index 68fca1c..cb3c61f 100644
--- a/scss/components/_buttons.scss
+++ b/scss/components/_buttons.scss
@@ -1,35 +1,72 @@
-/*
- * 3. Buttons and labels
- * All clickable elements
- *
-*/
-
 .btn {
-	@include button($button_large);
-    &:hover, &:active {
-        @include borders();
+  @include shape-style($button_large);
+  text-decoration: none;
+  padding: $button_large/3 $button_large;
+  margin: $button_large/3 $button_large/2 $lineheight;
+  line-height: $lineheight;
+  height: auto;
+
+  transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
+  outline-color: var(--accent-color);
+  color: var(--text-color-contrast);
+  background-color: var(--accent-color);
+
+  &:visited {
+    color: var(--text-color-contrast);
+  }
+
+  &:hover,
+  &:active {
+    background-color: var(--accent-color-hover);
+    outline-color: var(--accent-color-hover);
+    box-shadow: none;
+  }
+
+  font-weight: $fontweight_base;
+
+  p &:last-child {
+    margin-bottom: 0;
+  }
+
+  .fake {
+    background-color: transparent !important;
+    color:var(--text-color);
+  }
+}
+
+.btn.disabled,
+.btn:disabled {
+  opacity: 0.8;
+  background-color: var(--accent-color) !important;
+  outline-color: var(--accent-color) !important;
+  color: var(--text-color-contrast) !important;
+}
+
+.btn-small {
+  padding: $button_small/3 $button_small/2;
+  margin: $button_small/3 $button_small/2 $lineheight;
+
+  &:before {
+    left: -$button_small/2;
+    right: -$button_small/2;
+  }
+}
+
+
+.btn-readmore,
+.btn-link {
+  color: var(--link-color);
+
+  &:visited {
+    color: var(--link-color);
+  }
+  background-color: transparent;
+
+  &:hover,
+  &:active {
+    &::before {
+      background-color: var(--link-color-hover);
     }
+  }
 
-    p &:last-child {
-        margin-bottom:0;
-    }
-}
-
-.btn-small, .badge {
-  @include button($button_small);
-  padding-left: $button_small;
-  padding-right: $button_small;
-  text-decoration:none;
-}
-
-// COLORIZE BUTTONS
-
-strong.btn-fake {
-  @include button($button_large);
-  @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
-}
-
-.btn-readmore, .btn-link {
-  @include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
-  @include prefer-no-borders();
 }
diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss
index bfe4c2a..3f2ac25 100644
--- a/scss/components/_cards.scss
+++ b/scss/components/_cards.scss
@@ -1,40 +1,39 @@
-/*
- * 2. Cards and containers
- * All elements that are supposed to contain other stuff
- *
- *
-*/
-
-$card-bigpad: $lineheight_rel;
+$card-bigpad: $lineheight_rel * 1.25;
 $card-smallpad: $lineheight_rel / 4;
 
 .card {
     @include panel($card-bigpad);
     display: flex;
     flex-direction: column;
-    color:$color-font;
+    color: $color-font;
 
     &-body {
-        padding:0!important;
+        padding: 0 !important;
     }
 
     &-header {
         @include panel-header($card-bigpad);
-        .fa {
-          margin-right: 0.5em;
+
+        .icon {
+            margin-right: 0.25em;
+        }
+
+        font-family: $basefont;
+        color: var(--text-color-contrast);
+
+        &::before {
+            background-color: var(--accent-color);
         }
     }
 }
 
-/* CARD LIST - Make a list part of a card */
-
-
 @mixin list-symbol($symbol) {
     li.list-element {
         list-style: none;
+
         &::before {
             font-family: "ForkAwesome";
-            content:$symbol;
+            content: $symbol;
             padding-right: $lineheight_rel / 4;
         }
     }
@@ -48,26 +47,14 @@ $card-smallpad: $lineheight_rel / 4;
     }
 }
 
-ul.card-list, .card > ul {
-    padding:0;
-    margin:0;
+ul.card-list,
+.card>ul {
+    padding: 0;
+    margin: 0;
+
     li.list-element {
-        line-height:$lineheight_rel / 2;
+        line-height: $lineheight_rel / 2;
         padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
-        margin:0;
+        margin: 0;
     }
-}
-
-.list {
-    &-check {@include list-symbol("\f00c");}
-    &-cross {@include list-symbol("\f00d");}
-
-    &-danger{@include list-color($color-danger);}
-    &-success{@include list-color($color-success);}
-}
-
-.smallcard {
-    &-header {
-        @include panel-header($card-bigpad);
-    }
-}
+}
\ No newline at end of file
diff --git a/scss/components/_input.scss b/scss/components/_input.scss
index 34c70a2..8962fff 100644
--- a/scss/components/_input.scss
+++ b/scss/components/_input.scss
@@ -6,4 +6,88 @@ textarea {
   border: 0px solid rgba(0, 0, 0, 0);
   padding: $lineheight_rel / 4;
   line-height: $lineheight_rel;
+}button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: inherit;
+  margin: 0;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  appearance: button;
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 2px dotted var(--accent-color);
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
 }
\ No newline at end of file
diff --git a/scss/components/_menus.scss b/scss/components/_menus.scss
index 21ef078..d66e05a 100644
--- a/scss/components/_menus.scss
+++ b/scss/components/_menus.scss
@@ -1,5 +1,3 @@
-/* Menu handling */
-
 .menu {
   display: flex;
   flex-direction: column;
@@ -13,7 +11,6 @@
 
   a,
   a:visited {
-    @include shape-style($lineheight_half);
     display: flex;
     line-height: $lineheight_rel;
     padding: $lineheight_rel / 4;
@@ -26,47 +23,19 @@
     text-overflow: ellipsis;
     overflow: hidden;
 
-    @include shape-style($lineheight_half);
-    //@include button-hover();
-    @include prefer-no-borders();
     .badge {
       margin: 0;
     }
   }
 
-  &.fg-light,
-  .fg-light & {
-    a {
-      color: $color-font-light;
-      outline-color: $color-font-light;
+  a {
+    color: var(--text-color);
+    outline-color: var(--text-color);
 
-      &:hover,
-      &:active,
-      &.submenu:focus {
-        background-color: transparentize($color-font-light, 0.7);
-      }
-    }
-
-    input {
-      outline-color: $color-font-light;
-    }
-  }
-
-  &.fg-dark,
-  .fg-dark & {
-    a {
-      color: $color-font;
-      outline-color: $color-font;
-
-      &:hover,
-      &:active,
-      &.submenu:focus {
-        background-color: transparentize($color-font, 0.85);
-      }
-    }
-
-    input {
-      outline-color: $color-font;
+    &:hover,
+    &:active,
+    &.submenu:focus {
+      background-color: var(--link-color-hover);
     }
   }
 }
@@ -74,7 +43,7 @@
 .submenu .fa-caret-down {
   position: relative;
   top: 2px;
-  font-size:0.8em;
+  font-size: 0.8em;
 }
 
 .toolbar {
@@ -98,9 +67,7 @@
     strong,
     &.toolbar-element {
       display: block;
-      padding: $lineheight_rel/3;
-      padding-left: $lineheight_rel/2;
-      padding-right: $lineheight_rel/2;
+      padding: $lineheight_rel/3 $lineheight_rel/2;
     }
 
     ul {
@@ -111,7 +78,9 @@
       margin-top: 0rem;
       left: 0;
       display: none;
-      padding:0.33rem;
+      padding: 0.33rem;
+      z-index: 2;
+      background-color: $color-background-alt;
     }
 
     &:hover ul,
@@ -122,10 +91,11 @@
       display: flex;
       flex-direction: column;
       border-radius: $card-radius;
-      box-shadow:0px 1px 1px rgba(0,0,0,0.2);
+      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
       width: max-content;
+
       li {
-        text-align:left;
+        text-align: left;
       }
     }
   }
@@ -141,12 +111,11 @@ ul.menu h2 {
   font-weight: $fontweight_hyper;
   padding-top: $lineheight_rel / 4;
   padding-bottom: $lineheight_rel / 4;
-  font-size:1em;
-  line-height:$lineheight_rel;
+  font-size: 1em;
+  line-height: $lineheight_rel;
 }
 
 .menu-label {
-  @include shape-style($button_small);
   @include button-hover();
   padding-left: $button_small;
   padding-right: $button_small;
diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
index 121be6b..1289935 100644
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@@ -1,25 +1,32 @@
 nav.pagination {
-  padding-bottom:$lineheight;
+  padding-bottom: $lineheight;
+
   .nav-links {
     text-align: center;
-    width:100%;
+    width: 100%;
   }
-  .page-numbers, .next, .prev {
-      @include button($button_small);
-      padding-left: $button_small;
-      padding-right: $button_small;
-      margin-right : $button_small / 8;
-      margin-left: $button_small / 8;
-      text-decoration: none;
 
+  .page-numbers,
+  .next,
+  .prev {
+    @include shape-style($button_small);
+    padding: $button_small/2 $button_small;
+    margin: $button_small / 2;
+    text-decoration: none;
 
-      &:not(.current) {
-        @include button-color($color-background-alt);
-        outline-color: mix($color-background-alt, getTextColorFromBackground($color-background-alt), 85%);
+    &:not(.current):not(.dots) {
+      outline-color: var(--accent-color);
+      color: var(--link-color);
+
+      &:hover {
+        background-color: var(--link-color-hover);
       }
+    }
 
-      &.current {
-        @include background-color($color-primary);
-      }
+    &.current {
+      @include background-color($color-primary);
+
+      background-color: $color-primary;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/scss/components/_previews.scss b/scss/components/_previews.scss
index 593b9b1..d3ed9fd 100644
--- a/scss/components/_previews.scss
+++ b/scss/components/_previews.scss
@@ -1,8 +1,3 @@
-/*
- * 4. Previews
- * Special style for previews cards
- *
-*/
 $preview-height: 8*$lineheight;
 $preview-content-height:165px;
 $comment-peek-height:0px;
diff --git a/scss/components/_tables.scss b/scss/components/_tables.scss
index 3b722e8..c6cc8f0 100644
--- a/scss/components/_tables.scss
+++ b/scss/components/_tables.scss
@@ -1,7 +1,3 @@
-/* TABLE
- * Style tables
-*/
-
 table {
   border-collapse: collapse;
 }
diff --git a/scss/components/_toasts.scss b/scss/components/_toasts.scss
index 7022ab3..492e4e3 100644
--- a/scss/components/_toasts.scss
+++ b/scss/components/_toasts.scss
@@ -1,8 +1,33 @@
-.toast {
-  @include panel($card-smallpad);
-  padding:$card-smallpad;
-  font-size: 0.8rem;
-  a {
-    margin: 0;
-  }
+@mixin well() {
+  border: 0;
+  border-radius: $well-radius;
+
+  margin: 0 0 $lineheight 0;
+  padding: $lineheight 1rem $lineheight 1rem;
+
+  max-width: 100%;
+  font-style: italic;
+  @include background-color($color-background-alt);
+  box-shadow: $narrow-shadow;
 }
+
+blockquote,
+.quote,
+.well,
+pre,
+.pre,
+.well-pre,
+.toast,
+.code {
+  @include well();
+}
+
+.toast {
+  font-size: 0.8rem;
+  line-height: 1.5em;
+  padding: $card-smallpad * 2;
+}
+
+code {
+  font-family: monospace, monospace;
+}
\ No newline at end of file
diff --git a/scss/core/_bases.scss b/scss/core/_bases.scss
new file mode 100644
index 0000000..0c4f1b6
--- /dev/null
+++ b/scss/core/_bases.scss
@@ -0,0 +1,47 @@
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  // Text initialization
+  font-family: $basefont;
+  text-align: left;
+  font-size: $fontsize;
+  line-height: $lineheight;
+  font-weight: $fontweight_base;
+
+  // Normalization
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
+  color: var(--text-color);
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
\ No newline at end of file
diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss
index 397eac4..17cbd69 100644
--- a/scss/core/_typography.scss
+++ b/scss/core/_typography.scss
@@ -1,23 +1,14 @@
-/* 0.3 - Typography
- * This part of the (s)css handle everything related to the typography
- * like paragraphs, blockquote, etc.
-**/
-
-/* 2.2 - Global Typography */
-
 @mixin paragraph() {
   padding:0;
   padding-bottom: $lineheight;
   margin: 0;
 }
 
-html, body {
-	font-family: $basefont;
-	text-align: left;
-  font-size:  $fontsize;
-	line-height: $lineheight;
-	color: getFontColor();
-  font-weight: $fontweight_base;
+:root {
+  @include accent-color($color-primary);
+  --text-color:#{$color-font};
+  --link-color-hover:#{transparentize($color-font, 0.85)};
+  --link-color:#{darken($color-link, 10%)};
 }
 
 strong {
@@ -35,26 +26,21 @@ mark {
 }
 
 a {
-  color: darken($color-link, 25%);
+  color: var(--link-color);
   outline-color: $color-link;
   padding: 0.05rem;
   border-radius: 0.1rem;
-  text-decoration: underline dashed;
+  text-decoration: underline dashed 1px;
+  text-underline-offset: 0.1rem;
 
   &:visited {
-    color: darken($color-link, 25%);
+    color: var(--link-color);
   }
 
-  &:hover, &:active {
-    &, &.fg-dark, .fg-light & {
-      background-color: transparentize($color-font, 0.9);
-      text-decoration:none;
-    }
-
-    .fg-light &, &.fg-light {
-      background-color: transparentize($color-font-light, 0.8);
-      text-decoration: none;
-    }
+  &:hover,
+  &:active {
+    background-color: var(--link-color-hover);
+    text-decoration: none;
   }
 }
 
@@ -105,8 +91,6 @@ ul, ol {
   @include background-color($color-selection);
 }
 
-/* 2.3 - Titles */
-
 @mixin newTitle($size, $weight) {
   $lineNumber: ceil($size / 1.5);
   font-size: $size * 1rem;
@@ -168,53 +152,28 @@ h6, .title-6 {
   @include newTitle(1, $fontweight_hyper);
 }
 
-/* 2.4 - hr */
-
 hr {
-	border: 0px solid rgba(1, 1, 1, 0.15);
-	border-bottom: 1px;
-	margin: 1.5em;
+  border: 0px solid rgba(1, 1, 1, 0.15);
+  border-bottom: 1px;
+  margin: 1.5em;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
 }
 
-/* 2.5 - Wells and quotes */
-
-@mixin well() {
-  border: 0;
-  border-radius: $well-radius;
-
-  margin: 0 0 $lineheight 0;
-  padding: $lineheight 1rem $lineheight 1rem;
-
-  max-width: 100%;
-  font-style: italic;
-  @include background-color($color-background-alt);
-  box-shadow: $narrow-shadow;
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 
-blockquote, .quote {
-  &:before {
-    content:"";
-  }
-}
-
-blockquote, .quote, .well, pre, .pre, .well-pre {
-  @include well();
-}
-
-code {
-  background:transparent;
-  color: $color-danger;
-}
-
-.small-text {
+.small-text,
+small {
   font-size: 0.9em;
 }
 
-/* 2.6 - Special styling */
-
 .time {
-	font-style: italic;
-	text-align: right;
-	width: 100%;
-	display: block;
-}
+  font-style: italic;
+  text-align: right;
+  width: 100%;
+  display: block;
+}
\ No newline at end of file
diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss
index 96c995c..bf5ff47 100644
--- a/scss/custom/_global.scss
+++ b/scss/custom/_global.scss
@@ -157,41 +157,6 @@ ul.tag-list {
     padding-bottom: $lineheight;
 }
 
-.container-personnage {
-    @include container-big();
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: auto;
-    row-gap: 3rem;
-    column-gap: 3rem;
-
-    grid-template-areas:
-    "nomp nomp nomp nomp nomp nomp"
-    "info info info info meta meta"
-    "goss goss look look look look"
-    "aime aime aime dete dete dete"
-    "hist hist hist hist hist hist";
-
-    .card {
-        margin:0;
-    }
-
-    h1 {
-        padding:0;
-    }
-}
-
-.personnage {
-    &-nomp {grid-area: nomp;}
-    &-info {grid-area: info;}
-    &-meta {grid-area: meta;}
-    &-goss {grid-area: goss;}
-    &-look {grid-area: look;}
-    &-aime {grid-area: aime;}
-    &-dete {grid-area: dete;}
-    &-hist {grid-area: hist;}
-}
-
 /* ------------------ PAGE ------------------- */
 
 #wrapper {
@@ -211,12 +176,20 @@ body {
 
 footer {
     color: $color-footer-text;
+    --link-color: $color-footer-text;
     padding-bottom:1.5rem;
     .columns {
       font-size:0.8rem;
-      a {
-        color: $color-footer-text;
-      }
+      margin-top: 1.5rem;
+      @include md() {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          grid-gap: $lineheight;
+        }
+      
+        .col {
+          margin-bottom: $lineheight;
+        }
     }
 }
 
diff --git a/scss/definitions/_fonts.scss b/scss/definitions/_fonts.scss
index dcb92e5..66dc0f8 100644
--- a/scss/definitions/_fonts.scss
+++ b/scss/definitions/_fonts.scss
@@ -48,6 +48,7 @@ $titlefont: Teko, sans-serif;
 
 @font-face {
     font-family: 'Teko';
-    src: url('fonts/teko-bold-webfont.woff');
+    src: url('fonts/teko-bold-webfont.woff2') format('woff2'), url('fonts/teko-bold-webfont.woff') format('woff');
     font-weight: 700;
+    font-display: swap;
 }
\ No newline at end of file
diff --git a/scss/definitions/_palette.scss b/scss/definitions/_palette.scss
index 43874a0..37eb157 100644
--- a/scss/definitions/_palette.scss
+++ b/scss/definitions/_palette.scss
@@ -25,7 +25,7 @@ $palette: (
   "yellow":#ffe066,
   "grey":#adb5bd,
   "dark2":#212529,
-  "light2":#f1f3f5);
+  "light2":#e9ecef);
 
 $palette-light: (
   "blue": #a5d8ff,
@@ -36,7 +36,7 @@ $palette-light: (
   "skyblue":#99e9f2,
   "yellow":#ffec99,
   "light":#ffffff,
-  "grey":#f1f3f5,
+  "grey":#e9ecef,
   "dark":#adb5bd
 );
 
diff --git a/scss/mixins/_colors.scss b/scss/mixins/_colors.scss
index 6c39696..f2e84cd 100644
--- a/scss/mixins/_colors.scss
+++ b/scss/mixins/_colors.scss
@@ -58,3 +58,9 @@
   background-color: $background-color;
   color: getTextColorFromBackground($background-color);
  }
+
+ @mixin accent-color($accent-color) {
+    --accent-color: #{$accent-color};
+    --text-color-contrast: #{getTextColorFromBackground($accent-color)};
+    --accent-color-hover: #{accentuate($accent-color)};
+}
\ No newline at end of file
diff --git a/scss/mixins/_panels.scss b/scss/mixins/_panels.scss
index 7418838..7ee312b 100644
--- a/scss/mixins/_panels.scss
+++ b/scss/mixins/_panels.scss
@@ -26,40 +26,33 @@
 }
 
 @mixin panel-header($size) {
-    font-size:1.1em;
-    font-weight: $fontweight_big;
-    padding: $size/2;
-    padding-left:$card-header-padding;
-    padding-right:$card-header-padding;
-    padding-bottom: $size/2!important;
-    margin:$card-header-hmargin;
-    margin-bottom:$lineheight_rel / 2;
-    margin-top:$lineheight_rel / 2;
-    line-height:$lineheight_rel;
-    white-space: nowrap;
+  font-family: $basefont;
+  font-size: 1em;
+  font-weight: $fontweight_bold;
 
-    position:relative;
-    left: $card-header-position;
-    width:$card-header-width;
 
-    @include shape-style($size);
-    border-radius:0;
-    &:first-child {
-      border-top-left-radius: $card-radius;
-      border-top-right-radius: $card-radius;
-    }
-    &:last-child {
-      border-bottom-left-radius: $card-radius;
-      border-bottom-right-radius: $card-radius;
-    }
+  padding: $size/2 $card-header-padding;
+  padding-bottom: $size/2 !important;
+  margin: $lineheight_rel / 2 $card-header-hmargin;
+  // margin-bottom:$lineheight_rel / 2;
+  // margin-top:$lineheight_rel / 2;
+  line-height: 1;
 
-    h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
-        font-family:$basefont;
-        font-size:1em;
-        padding:0px;
-        margin:0px;
-        color:$color-font-light;
-        font-weight: $fontweight_big;
-        line-height:$lineheight_rel;
-    }
+  position: relative;
+  left: $card-header-position;
+  width: $card-header-width;
+
+  @include shape-style($size);
+  background-color: var(--accent-color);
+  border-radius: 0;
+
+  &:first-child {
+    border-top-left-radius: $card-radius;
+    border-top-right-radius: $card-radius;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: $card-radius;
+    border-bottom-right-radius: $card-radius;
+  }
 }
diff --git a/scss/utils/_a11y.scss b/scss/utils/_a11y.scss
index 0d4ab3c..7c91b81 100644
--- a/scss/utils/_a11y.scss
+++ b/scss/utils/_a11y.scss
@@ -2,10 +2,25 @@
  * Some classes to help accessibility
 **/
 
-.screen-reader-text, .sr-only {
-  visibility: collapse;
-  font-size:0;
+.sr-only, .screen-reader-text {
   position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
 }
 
 .skip {
diff --git a/scss/utils/_colorize.scss b/scss/utils/_colorize.scss
index daa88dd..881334f 100644
--- a/scss/utils/_colorize.scss
+++ b/scss/utils/_colorize.scss
@@ -2,6 +2,17 @@
  * Colorize some aspect of a class
 **/
 
+.c {
+
+  @each $name,
+  $color in list-colors() {
+    &-#{$name} {
+      @include accent-color(get-color($name));
+    }
+  }
+}
+
+
 @mixin heading-color($background-color) {
 
   & .card-header,
@@ -25,17 +36,20 @@
   }
 }
 
-.bg {
+.bg-accent {
+  background-color: var(--accent-color);
+}
 
-  @each $name,
-  $color in list-colors() {
-    &-#{$name} {
-      @include bg-color(get-color($name));
-      &:hover {
-        @include bg-color(get-color($name));
-      }
-    }
-  }
+.bg-dark {
+  background-color: get-color("dark");
+}
+
+.bg {
+  background-color: $color-background;
+}
+
+.bg-alt {
+  background-color: $color-background-alt;
 }
 
 .bg-soft {
@@ -52,40 +66,43 @@
   }
 }
 
-.text {
+// .text {
 
-  @each $name,
-  $color in list-colors() {
-    &-#{$name} {
-      @include text-color(get-color($name));
-    }
-  }
-}
+//   @each $name,
+//   $color in list-colors() {
+//     &-#{$name} {
+//       @include text-color(get-color($name));
+//     }
+//   }
+// }
 
-.btn {
+// .btn {
 
-  @each $name,
-  $color in list-colors() {
-    &-#{$name} {
-      @include button-color(get-color($name));
-    }
-  }
-}
+//   @each $name,
+//   $color in list-colors() {
+//     &-#{$name} {
+//       @include button-color(get-color($name));
+//     }
+//   }
+// }
 
-.head {
+// .head {
 
-  @each $name,
-  $color in list-colors() {
-    &-#{$name} {
-      @include heading-color(get-color($name));
-    }
-  }
-}
+//   @each $name,
+//   $color in list-colors() {
+//     &-#{$name} {
+//       @include heading-color(get-color($name));
+//     }
+//   }
+// }
 
 .fg-light {
-  color: $color-font-light;
+  --text-color:#{$color-font-light};
+  --link-color-hover:#{transparentize($color-font-light, 0.7)};
 }
 
 .fg-dark {
   color: $color-font;
+  --text-color:#{$color-font};
+  --link-color-hover:#{transparentize($color-font, 0.85)};
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index d134ead..fa39e9a 100644
--- a/style.css
+++ b/style.css
@@ -44,8 +44,9 @@
 
 @font-face {
   font-family: 'Teko';
-  src: url("fonts/teko-bold-webfont.woff");
-  font-weight: 700; }
+  src: url("fonts/teko-bold-webfont.woff2") format("woff2"), url("fonts/teko-bold-webfont.woff") format("woff");
+  font-weight: 700;
+  font-display: swap; }
 
 /* --- 00. COLORS --- */
 /*
@@ -55,114 +56,31 @@
 /* 0. CORE
 ** All the basic functions from the stylesheet
 */
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-/* Document
-   ========================================================================== */
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
+*,
+*::before,
+*::after {
+  box-sizing: inherit; }
+
 html {
-  line-height: 1.15;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */ }
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  text-align: left;
+  font-size: 4.75mm;
+  line-height: 1.6rem;
+  font-weight: 400;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%; }
 
-/* Sections
-   ========================================================================== */
-/**
- * Remove the margin in all browsers.
- */
 body {
-  margin: 0; }
+  margin: 0;
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
+  color: var(--text-color); }
 
-/**
- * Render the `main` element consistently in IE.
- */
-main {
-  display: block; }
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0; }
-
-/* Grouping content
-   ========================================================================== */
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-hr {
-  box-sizing: content-box;
-  /* 1 */
-  height: 0;
-  /* 1 */
-  overflow: visible;
-  /* 2 */ }
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-pre {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */ }
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Remove the gray background on active links in IE 10.
- */
-a {
-  background-color: transparent; }
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
 abbr[title] {
   border-bottom: none;
-  /* 1 */
   text-decoration: underline;
-  /* 2 */
-  text-decoration: underline dotted;
-  /* 2 */ }
+  text-decoration: underline dotted; }
 
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-b,
-strong {
-  font-weight: bolder; }
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-code,
-kbd,
-samp {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */ }
-
-/**
- * Add the correct font size in all browsers.
- */
-small {
-  font-size: 80%; }
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
 sub,
 sup {
   font-size: 75%;
@@ -176,217 +94,13 @@ sub {
 sup {
   top: -0.5em; }
 
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove the border on images inside links in IE 10.
- */
-img {
-  border-style: none; }
-
-/* Forms
-   ========================================================================== */
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  line-height: 1.15;
-  /* 1 */
-  margin: 0;
-  /* 2 */ }
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-button,
-input {
-  /* 1 */
-  overflow: visible; }
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-button,
-select {
-  /* 1 */
-  text-transform: none; }
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; }
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0; }
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText; }
-
-/**
- * Correct the padding in Firefox.
- */
-fieldset {
-  padding: 0.35em 0.75em 0.625em; }
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-legend {
-  box-sizing: border-box;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  display: table;
-  /* 1 */
-  max-width: 100%;
-  /* 1 */
-  padding: 0;
-  /* 3 */
-  white-space: normal;
-  /* 1 */ }
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-progress {
-  vertical-align: baseline; }
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-textarea {
-  overflow: auto; }
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto; }
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */ }
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none; }
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */ }
-
-/* Interactive
-   ========================================================================== */
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-details {
-  display: block; }
-
-/*
- * Add the correct display in all browsers.
- */
-summary {
-  display: list-item; }
-
-/* Misc
-   ========================================================================== */
-/**
- * Add the correct display in IE 10+.
- */
-template {
-  display: none; }
-
-/**
- * Add the correct display in IE 10.
- */
-[hidden] {
-  display: none; }
-
-/* 0.2 - Box-sizing
- * Make sure that everything have its box-sizing to border-box
-**/
-*,
-*::before,
-*::after {
-  box-sizing: inherit; }
-
-html {
-  box-sizing: border-box; }
-
-body {
-  overflow-x: hidden;
-  text-rendering: optimizeLegibility; }
-
-/* 0.3 - Typography
- * This part of the (s)css handle everything related to the typography
- * like paragraphs, blockquote, etc.
-**/
-/* 2.2 - Global Typography */
-html, body {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  text-align: left;
-  font-size: 4.75mm;
-  line-height: 1.6rem;
-  color: #212529;
-  font-weight: 400; }
+:root {
+  --accent-color: #e03131;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #cc1f1f;
+  --text-color:#212529;
+  --link-color-hover:rgba(33, 37, 41, 0.15);
+  --link-color:#c11d1d; }
 
 strong {
   font-weight: 600; }
@@ -400,18 +114,16 @@ mark {
   border-radius: 0.1rem; }
 
 a {
-  color: #7e1313;
+  color: var(--link-color);
   outline-color: #e03131;
   padding: 0.05rem;
   border-radius: 0.1rem;
-  text-decoration: underline dashed; }
+  text-decoration: underline dashed 1px;
+  text-underline-offset: 0.1rem; }
   a:visited {
-    color: #7e1313; }
-  a:hover, a:hover.fg-dark, .fg-light a:hover, a:active, a:active.fg-dark, .fg-light a:active {
-    background-color: rgba(33, 37, 41, 0.1);
-    text-decoration: none; }
-  .fg-light a:hover, a:hover.fg-light, .fg-light a:active, a:active.fg-light {
-    background-color: rgba(255, 255, 255, 0.2);
+    color: var(--link-color); }
+  a:hover, a:active {
+    background-color: var(--link-color-hover);
     text-decoration: none; }
 
 a:focus-visible, input:focus-visible {
@@ -453,7 +165,6 @@ ul, ol {
   background-color: #1971c2;
   color: #ffffff; }
 
-/* 2.3 - Titles */
 h1, h2, h3, h4, h5, h6, h7 {
   font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   text-align: left;
@@ -509,35 +220,22 @@ h6, .title-6 {
   line-height: 1.6rem;
   font-weight: 800; }
 
-/* 2.4 - hr */
 hr {
   border: 0px solid rgba(1, 1, 1, 0.15);
   border-bottom: 1px;
-  margin: 1.5em; }
+  margin: 1.5em;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible; }
 
-/* 2.5 - Wells and quotes */
-blockquote:before, .quote:before {
-  content: ""; }
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em; }
 
-blockquote, .quote, .well, pre, .pre, .well-pre {
-  border: 0;
-  border-radius: 4px;
-  margin: 0 0 1.6rem 0;
-  padding: 1.6rem 1rem 1.6rem 1rem;
-  max-width: 100%;
-  font-style: italic;
-  background-color: #f1f3f5;
-  color: #212529;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-
-code {
-  background: transparent;
-  color: #e03131; }
-
-.small-text {
+.small-text,
+small {
   font-size: 0.9em; }
 
-/* 2.6 - Special styling */
 .time {
   font-style: italic;
   text-align: right;
@@ -559,569 +257,73 @@ code {
   max-width: 1200px;
   margin: auto; }
 
-.columns {
-  display: grid;
-  grid-gap: 1.6rem;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: auto;
-  padding: 1.6rem; }
-  .columns-nogap {
-    grid-gap: 0px; }
-
-.column {
-  grid-column: span 12;
-  width: 100%;
-  margin: 0; }
-  .column > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-1 {
-  grid-column: span 1;
-  width: 100%;
-  margin: 0; }
-  .col-1 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-2 {
-  grid-column: span 2;
-  width: 100%;
-  margin: 0; }
-  .col-2 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-3 {
-  grid-column: span 3;
-  width: 100%;
-  margin: 0; }
-  .col-3 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-4 {
-  grid-column: span 4;
-  width: 100%;
-  margin: 0; }
-  .col-4 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-5 {
-  grid-column: span 5;
-  width: 100%;
-  margin: 0; }
-  .col-5 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-6 {
-  grid-column: span 6;
-  width: 100%;
-  margin: 0; }
-  .col-6 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-7 {
-  grid-column: span 7;
-  width: 100%;
-  margin: 0; }
-  .col-7 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-8 {
-  grid-column: span 8;
-  width: 100%;
-  margin: 0; }
-  .col-8 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-9 {
-  grid-column: span 9;
-  width: 100%;
-  margin: 0; }
-  .col-9 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-10 {
-  grid-column: span 10;
-  width: 100%;
-  margin: 0; }
-  .col-10 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-11 {
-  grid-column: span 11;
-  width: 100%;
-  margin: 0; }
-  .col-11 > *:last-child {
-    margin-bottom: 0 !important; }
-
-.col-12 {
-  grid-column: span 12;
-  width: 100%;
-  margin: 0; }
-  .col-12 > *:last-child {
-    margin-bottom: 0 !important; }
-
-@media (min-width: 576px) {
-  .col-sm-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-sm-1 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-sm-2 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-sm-3 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-sm-4 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-sm-5 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-sm-6 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-sm-7 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-sm-8 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-sm-9 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-sm-10 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-sm-11 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-sm-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-sm-12 > *:last-child {
-      margin-bottom: 0 !important; } }
-
-@media (min-width: 768px) {
-  .col-md-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-md-1 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-md-2 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-md-3 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-md-4 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-md-5 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-md-6 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-md-7 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-md-8 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-md-9 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-md-10 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-md-11 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-md-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-md-12 > *:last-child {
-      margin-bottom: 0 !important; } }
-
-@media (min-width: 992px) {
-  .col-lg-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-lg-1 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-lg-2 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-lg-3 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-lg-4 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-lg-5 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-lg-6 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-lg-7 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-lg-8 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-lg-9 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-lg-10 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-lg-11 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-lg-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-lg-12 > *:last-child {
-      margin-bottom: 0 !important; } }
-
-@media (min-width: 1200px) {
-  .col-xl-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-xl-1 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-xl-2 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-xl-3 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-xl-4 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-xl-5 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-xl-6 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-xl-7 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-xl-8 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-xl-9 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-xl-10 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-xl-11 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xl-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-xl-12 > *:last-child {
-      margin-bottom: 0 !important; } }
-
-@media (min-width: 1600px) {
-  .col-xxl-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-1 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-2 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-3 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-4 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-5 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-6 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-7 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-8 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-9 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-10 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-11 > *:last-child {
-      margin-bottom: 0 !important; }
-  .col-xxl-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-12 > *:last-child {
-      margin-bottom: 0 !important; } }
-
 /* --- 04. COMPOSANTS --- */
 /*
  * Les différents composants réutilisables de la page.
  *
  */
-/*
- * 3. Buttons and labels
- * All clickable elements
- *
-*/
-.btn {
-  padding: 1.6em;
-  padding-top: 0.5333333333em;
-  padding-bottom: 0.5333333333em;
-  margin: 0.8em;
-  margin-top: 0.5333333333em;
-  margin-bottom: 1.6rem;
-  line-height: 1.6rem;
-  height: auto;
+.badge {
   border: 0px solid rgba(0, 0, 0, 0.3);
   border-radius: 4px 4px 4px 4px;
   background-color: transparent;
-  transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-  font-weight: 400; }
-  .btn:hover, .btn:active {
-    background-color: transparent; }
-  .btn:hover, .btn:active {
-    border: 0px solid rgba(0, 0, 0, 0.3); }
-  p .btn:last-child {
-    margin-bottom: 0; }
-
-.btn-small, .badge {
-  padding: 0.4em;
-  padding-top: 0.1333333333em;
-  padding-bottom: 0.1333333333em;
-  margin: 0.2em;
-  margin-top: 0.1333333333em;
-  margin-bottom: 1.6rem;
-  line-height: 1.6rem;
-  height: auto;
-  border: 0px solid rgba(0, 0, 0, 0.3);
-  border-radius: 4px 4px 4px 4px;
-  background-color: transparent;
-  transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-  font-weight: 400;
+  line-height: 1.5em;
   padding-left: 0.4em;
   padding-right: 0.4em;
-  text-decoration: none; }
-  .btn-small:hover, .btn-small:active, .badge:hover, .badge:active {
-    background-color: transparent; }
+  text-decoration: none !important;
+  background-color: var(--accent-color);
+  color: var(--text-color-contrast); }
 
-strong.btn-fake {
-  padding: 1.6em;
-  padding-top: 0.5333333333em;
-  padding-bottom: 0.5333333333em;
-  margin: 0.8em;
-  margin-top: 0.5333333333em;
-  margin-bottom: 1.6rem;
-  line-height: 1.6rem;
-  height: auto;
+.btn {
   border: 0px solid rgba(0, 0, 0, 0.3);
   border-radius: 4px 4px 4px 4px;
   background-color: transparent;
+  text-decoration: none;
+  padding: 0.5333333333em 1.6em;
+  margin: 0.5333333333em 0.8em 1.6rem;
+  line-height: 1.6rem;
+  height: auto;
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-  font-weight: 400;
-  background-color: transparent;
-  outline-color: transparent;
-  color: black; }
-  strong.btn-fake:hover, strong.btn-fake:active {
-    background-color: transparent; }
-  strong.btn-fake:visited {
-    background-color: transparent;
-    color: black; }
-  strong.btn-fake:hover, strong.btn-fake:active, strong.btn-fake:visited:hover, strong.btn-fake:visited:active, strong.btn-fake:not(.disabled):not(:disabled):hover, strong.btn-fake:not(.disabled):not(:disabled):active {
-    background-color: transparent;
-    color: #0d0d0d;
-    outline-color: transparent;
+  outline-color: var(--accent-color);
+  color: var(--text-color-contrast);
+  background-color: var(--accent-color);
+  font-weight: 400; }
+  .btn:visited {
+    color: var(--text-color-contrast); }
+  .btn:hover, .btn:active {
+    background-color: var(--accent-color-hover);
+    outline-color: var(--accent-color-hover);
     box-shadow: none; }
+  p .btn:last-child {
+    margin-bottom: 0; }
+  .btn .fake {
+    background-color: transparent !important;
+    color: var(--text-color); }
 
-.btn-readmore, .btn-link {
-  background-color: transparent;
-  outline-color: transparent;
-  color: #e03131; }
-  .btn-readmore:visited, .btn-link:visited {
-    background-color: transparent;
-    color: #e03131; }
-  .btn-readmore:hover, .btn-readmore:active, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-link:hover, .btn-link:active, .btn-link:visited:hover, .btn-link:visited:active, .btn-link:not(.disabled):not(:disabled):hover, .btn-link:not(.disabled):not(:disabled):active {
-    background-color: #dbe0e5;
-    color: #e34747;
-    outline-color: #dbe0e5;
-    box-shadow: none; }
-  .btn-readmore:not(:hover), .btn-link:not(:hover) {
-    border-color: transparent; }
+.btn.disabled,
+.btn:disabled {
+  opacity: 0.8;
+  background-color: var(--accent-color) !important;
+  outline-color: var(--accent-color) !important;
+  color: var(--text-color-contrast) !important; }
+
+.btn-small {
+  padding: 0.1333333333em 0.2em;
+  margin: 0.1333333333em 0.2em 1.6rem; }
+  .btn-small:before {
+    left: -0.2em;
+    right: -0.2em; }
+
+.btn-readmore,
+.btn-link {
+  color: var(--link-color);
+  background-color: transparent; }
+  .btn-readmore:visited,
+  .btn-link:visited {
+    color: var(--link-color); }
+  .btn-readmore:hover::before, .btn-readmore:active::before,
+  .btn-link:hover::before,
+  .btn-link:active::before {
+    background-color: var(--link-color-hover); }
 
 .btn-toolbar {
   padding: 0 1.6em; }
@@ -1141,127 +343,68 @@ strong.btn-fake {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0; }
 
-/* ------------------ BREADCRUMB ------------------- */
-ul.breadcrumb, ol.breadcrumb, .breadcrumb {
-  padding-top: 0em;
+ul.breadcrumb,
+ol.breadcrumb,
+.breadcrumb {
+  border: 0px solid rgba(0, 0, 0, 0.3);
+  border-radius: 4px 4px 4px 4px;
   background-color: transparent;
-  margin: 0;
-  padding-bottom: 1.6rem;
+  background-color: #e9ecef;
+  padding: 0.8em;
+  margin: 0 0 1.6rem;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   list-style: none; }
-  ul.breadcrumb li, ol.breadcrumb li, .breadcrumb li {
+  ul.breadcrumb::before,
+  ol.breadcrumb::before,
+  .breadcrumb::before {
+    background-color: #e9ecef; }
+  ul.breadcrumb li,
+  ol.breadcrumb li,
+  .breadcrumb li {
     margin: 0; }
 
-.breadcrumb li.breadcrumb-item {
-  padding: 0;
-  margin: 0 !important; }
-  .breadcrumb li.breadcrumb-item:before {
-    display: none; }
-  .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item > span {
-    display: inline-block;
-    padding: 1.6em;
-    padding-top: 0.5333333333em;
-    padding-bottom: 0.5333333333em;
-    margin: 0.8em;
-    margin-top: 0.5333333333em;
-    margin-bottom: 1.6rem;
-    line-height: 1.6rem;
-    height: auto;
-    border: 0px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px 4px 4px 4px;
-    background-color: transparent;
-    transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-    font-weight: 400;
-    background-color: #f1f3f5;
-    outline-color: #f1f3f5;
-    color: #212529;
-    margin: 0 0 0 0;
-    outline-color: #dbe0e5 !important;
-    text-decoration: none; }
-    .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active {
-      background-color: transparent; }
-    .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item > span:visited {
-      background-color: #f1f3f5;
-      color: #212529; }
-    .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:visited:hover, .breadcrumb li.breadcrumb-item a:visited:active, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active, .breadcrumb li.breadcrumb-item > span:visited:hover, .breadcrumb li.breadcrumb-item > span:visited:active, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):active {
-      background-color: #dbe0e5;
-      color: #2c3237;
-      outline-color: #dbe0e5;
-      box-shadow: none; }
-    .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active {
-      background-color: #343a40;
-      outline-color: #343a40;
-      color: #ffffff; }
-      .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item > span.active:visited {
-        background-color: #343a40;
-        color: #ffffff; }
-      .breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span.active:hover, .breadcrumb li.breadcrumb-item > span.active:active, .breadcrumb li.breadcrumb-item > span.active:visited:hover, .breadcrumb li.breadcrumb-item > span.active:visited:active, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active {
-        background-color: #343a40;
-        color: white;
-        outline-color: #343a40;
-        box-shadow: none; }
-  .breadcrumb li.breadcrumb-item:not(:first-child) a, .breadcrumb li.breadcrumb-item:not(:first-child) > span {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0; }
-  .breadcrumb li.breadcrumb-item:not(:last-child) a, .breadcrumb li.breadcrumb-item:not(:last-child) > span {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0; }
+.breadcrumb li:not(:first-child)::before {
+  content: "/";
+  padding: 0.3rem; }
+
+.breadcrumb .active {
+  font-weight: 600; }
 
 nav.pagination {
   padding-bottom: 1.6rem; }
   nav.pagination .nav-links {
     text-align: center;
     width: 100%; }
-  nav.pagination .page-numbers, nav.pagination .next, nav.pagination .prev {
-    padding: 0.4em;
-    padding-top: 0.1333333333em;
-    padding-bottom: 0.1333333333em;
-    margin: 0.2em;
-    margin-top: 0.1333333333em;
-    margin-bottom: 1.6rem;
-    line-height: 1.6rem;
-    height: auto;
+  nav.pagination .page-numbers,
+  nav.pagination .next,
+  nav.pagination .prev {
     border: 0px solid rgba(0, 0, 0, 0.3);
     border-radius: 4px 4px 4px 4px;
     background-color: transparent;
-    transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-    font-weight: 400;
-    padding-left: 0.4em;
-    padding-right: 0.4em;
-    margin-right: 0.05em;
-    margin-left: 0.05em;
+    padding: 0.2em 0.4em;
+    margin: 0.2em;
     text-decoration: none; }
-    nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .prev:hover, nav.pagination .prev:active {
-      background-color: transparent; }
-    nav.pagination .page-numbers:not(.current), nav.pagination .next:not(.current), nav.pagination .prev:not(.current) {
-      background-color: #f1f3f5;
-      outline-color: #f1f3f5;
-      color: #212529;
-      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
-      outline-color: #d2d4d6; }
-      nav.pagination .page-numbers:not(.current):visited, nav.pagination .next:not(.current):visited, nav.pagination .prev:not(.current):visited {
-        background-color: #f1f3f5;
-        color: #212529; }
-      nav.pagination .page-numbers:not(.current):hover, nav.pagination .page-numbers:not(.current):active, nav.pagination .page-numbers:not(.current):visited:hover, nav.pagination .page-numbers:not(.current):visited:active, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):active, nav.pagination .next:not(.current):hover, nav.pagination .next:not(.current):active, nav.pagination .next:not(.current):visited:hover, nav.pagination .next:not(.current):visited:active, nav.pagination .next:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .next:not(.current):not(.disabled):not(:disabled):active, nav.pagination .prev:not(.current):hover, nav.pagination .prev:not(.current):active, nav.pagination .prev:not(.current):visited:hover, nav.pagination .prev:not(.current):visited:active, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):active {
-        background-color: #d2d4d6;
-        color: #2c3237;
-        outline-color: #d2d4d6;
-        box-shadow: none; }
-    nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current {
+    nav.pagination .page-numbers:not(.current):not(.dots),
+    nav.pagination .next:not(.current):not(.dots),
+    nav.pagination .prev:not(.current):not(.dots) {
+      outline-color: var(--accent-color);
+      color: var(--link-color); }
+      nav.pagination .page-numbers:not(.current):not(.dots):hover,
+      nav.pagination .next:not(.current):not(.dots):hover,
+      nav.pagination .prev:not(.current):not(.dots):hover {
+        background-color: var(--link-color-hover); }
+    nav.pagination .page-numbers.current,
+    nav.pagination .next.current,
+    nav.pagination .prev.current {
       background-color: #e03131;
-      color: #ffffff; }
+      color: #ffffff;
+      background-color: #e03131; }
 
-/*
- * 2. Cards and containers
- * All elements that are supposed to contain other stuff
- *
- *
-*/
 .card {
   border-radius: 8px 8px 8px 8px;
-  background-color: #f1f3f5;
+  background-color: #e9ecef;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
   border: none;
   margin: 0;
@@ -1270,118 +413,57 @@ nav.pagination {
   flex-direction: column;
   color: #212529; }
   .card > * {
-    margin-left: 0.8em;
-    margin-right: 0.8em; }
+    margin-left: 1em;
+    margin-right: 1em; }
     .card > *:first-child, .card > *.sr-only:first-child ~ * {
-      margin-top: 1.6em; }
+      margin-top: 2em; }
       .card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header {
         margin-top: 0px; }
     .card > *:last-child {
-      margin-bottom: 1.6em; }
+      margin-bottom: 2em; }
       .card > *:last-child.card-header {
         margin-bottom: 0px; }
   .card-body {
     padding: 0 !important; }
   .card-header {
-    font-size: 1.1em;
-    font-weight: 300;
-    padding: 0.8em;
-    padding-left: 1.6em;
-    padding-right: 1.6em;
-    padding-bottom: 0.8em !important;
-    margin: 0px;
-    margin-bottom: 0.8em;
-    margin-top: 0.8em;
-    line-height: 1.6em;
-    white-space: nowrap;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 1em;
+    font-weight: 600;
+    padding: 1em 1.6em;
+    padding-bottom: 1em !important;
+    margin: 0.8em 0px;
+    line-height: 1;
     position: relative;
     left: 0px;
     width: 100%;
     border: 0px solid rgba(0, 0, 0, 0.3);
     border-radius: 4px 4px 4px 4px;
     background-color: transparent;
-    border-radius: 0; }
+    background-color: var(--accent-color);
+    border-radius: 0;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    color: var(--text-color-contrast); }
     .card-header:first-child {
       border-top-left-radius: 8px;
       border-top-right-radius: 8px; }
     .card-header:last-child {
       border-bottom-left-radius: 8px;
       border-bottom-right-radius: 8px; }
-    .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 {
-      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-      font-size: 1em;
-      padding: 0px;
-      margin: 0px;
-      color: #ffffff;
-      font-weight: 300;
-      line-height: 1.6em; }
-    .card-header .fa {
-      margin-right: 0.5em; }
+    .card-header .icon {
+      margin-right: 0.25em; }
+    .card-header::before {
+      background-color: var(--accent-color); }
 
-/* CARD LIST - Make a list part of a card */
-ul.card-list, .card > ul {
+ul.card-list,
+.card > ul {
   padding: 0;
   margin: 0; }
-  ul.card-list li.list-element, .card > ul li.list-element {
+  ul.card-list li.list-element,
+  .card > ul li.list-element {
     line-height: 0.8em;
     padding: 0.4em, 0.4em, 0.4em, 0.8em;
     margin: 0; }
 
-.list-check li.list-element {
-  list-style: none; }
-  .list-check li.list-element::before {
-    font-family: "ForkAwesome";
-    content: "";
-    padding-right: 0.4em; }
-
-.list-cross li.list-element {
-  list-style: none; }
-  .list-cross li.list-element::before {
-    font-family: "ForkAwesome";
-    content: "";
-    padding-right: 0.4em; }
-
-.list-danger li.list-element::before {
-  color: #e03131; }
-
-.list-success li.list-element::before {
-  color: #2f9e44; }
-
-.smallcard-header {
-  font-size: 1.1em;
-  font-weight: 300;
-  padding: 0.8em;
-  padding-left: 1.6em;
-  padding-right: 1.6em;
-  padding-bottom: 0.8em !important;
-  margin: 0px;
-  margin-bottom: 0.8em;
-  margin-top: 0.8em;
-  line-height: 1.6em;
-  white-space: nowrap;
-  position: relative;
-  left: 0px;
-  width: 100%;
-  border: 0px solid rgba(0, 0, 0, 0.3);
-  border-radius: 4px 4px 4px 4px;
-  background-color: transparent;
-  border-radius: 0; }
-  .smallcard-header:first-child {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px; }
-  .smallcard-header:last-child {
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px; }
-  .smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10 {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    font-size: 1em;
-    padding: 0px;
-    margin: 0px;
-    color: #ffffff;
-    font-weight: 300;
-    line-height: 1.6em; }
-
-/* Menu handling */
 .menu {
   display: flex;
   flex-direction: column; }
@@ -1392,9 +474,6 @@ ul.card-list, .card > ul {
     margin: 0; }
   .menu a,
   .menu a:visited {
-    border: 0px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px 4px 4px 4px;
-    background-color: transparent;
     display: flex;
     line-height: 1.6em;
     padding: 0.4em;
@@ -1404,30 +483,15 @@ ul.card-list, .card > ul {
     text-decoration: none;
     word-wrap: none;
     text-overflow: ellipsis;
-    overflow: hidden;
-    border: 0px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px 4px 4px 4px;
-    background-color: transparent; }
-    .menu a:not(:hover),
-    .menu a:visited:not(:hover) {
-      border-color: transparent; }
+    overflow: hidden; }
     .menu a .badge,
     .menu a:visited .badge {
       margin: 0; }
-  .menu.fg-light a, .fg-light .menu a {
-    color: #ffffff;
-    outline-color: #ffffff; }
-    .menu.fg-light a:hover, .menu.fg-light a:active, .menu.fg-light a.submenu:focus, .fg-light .menu a:hover, .fg-light .menu a:active, .fg-light .menu a.submenu:focus {
-      background-color: rgba(255, 255, 255, 0.3); }
-  .menu.fg-light input, .fg-light .menu input {
-    outline-color: #ffffff; }
-  .menu.fg-dark a, .fg-dark .menu a {
-    color: #212529;
-    outline-color: #212529; }
-    .menu.fg-dark a:hover, .menu.fg-dark a:active, .menu.fg-dark a.submenu:focus, .fg-dark .menu a:hover, .fg-dark .menu a:active, .fg-dark .menu a.submenu:focus {
-      background-color: rgba(33, 37, 41, 0.15); }
-  .menu.fg-dark input, .fg-dark .menu input {
-    outline-color: #212529; }
+  .menu a {
+    color: var(--text-color);
+    outline-color: var(--text-color); }
+    .menu a:hover, .menu a:active, .menu a.submenu:focus {
+      background-color: var(--link-color-hover); }
 
 .submenu .fa-caret-down {
   position: relative;
@@ -1449,9 +513,7 @@ ul.card-list, .card > ul {
     .toolbar li em,
     .toolbar li strong, .toolbar li.toolbar-element {
       display: block;
-      padding: 0.5333333333em;
-      padding-left: 0.8em;
-      padding-right: 0.8em; }
+      padding: 0.5333333333em 0.8em; }
     .toolbar li ul {
       visibility: hidden;
       opacity: 0;
@@ -1460,7 +522,9 @@ ul.card-list, .card > ul {
       margin-top: 0rem;
       left: 0;
       display: none;
-      padding: 0.33rem; }
+      padding: 0.33rem;
+      z-index: 2;
+      background-color: #e9ecef; }
     .toolbar li:hover ul,
     .toolbar li ul:hover, .toolbar li:focus-within ul {
       visibility: visible;
@@ -1488,41 +552,38 @@ ul.menu h2 {
   line-height: 1.6em; }
 
 .menu-label {
-  border: 0px solid rgba(0, 0, 0, 0.3);
-  border-radius: 4px 4px 4px 4px;
-  background-color: transparent;
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
   padding-left: 0.4em;
   padding-right: 0.4em; }
   .menu-label:hover, .menu-label:active {
     background-color: transparent; }
 
-.toast {
-  border-radius: 8px 8px 8px 8px;
-  background-color: #f1f3f5;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
-  border: none;
-  margin: 0;
-  margin-bottom: 1.6rem;
-  padding: 0.4em;
-  font-size: 0.8rem; }
-  .toast > * {
-    margin-left: 0.2em;
-    margin-right: 0.2em; }
-    .toast > *:first-child, .toast > *.sr-only:first-child ~ * {
-      margin-top: 0.4em; }
-      .toast > *:first-child.card-header, .toast > *.sr-only:first-child ~ *.card-header {
-        margin-top: 0px; }
-    .toast > *:last-child {
-      margin-bottom: 0.4em; }
-      .toast > *:last-child.card-header {
-        margin-bottom: 0px; }
-  .toast a {
-    margin: 0; }
+blockquote,
+.quote,
+.well,
+pre,
+.pre,
+.well-pre,
+.toast,
+.code {
+  border: 0;
+  border-radius: 4px;
+  margin: 0 0 1.6rem 0;
+  padding: 1.6rem 1rem 1.6rem 1rem;
+  max-width: 100%;
+  font-style: italic;
+  background-color: #e9ecef;
+  color: #212529;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
+
+.toast {
+  font-size: 0.8rem;
+  line-height: 1.5em;
+  padding: 0.8em; }
+
+code {
+  font-family: monospace, monospace; }
 
-/* TABLE
- * Style tables
-*/
 table {
   border-collapse: collapse; }
 
@@ -1563,16 +624,102 @@ textarea {
   padding: 0.4em;
   line-height: 1.6em; }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: inherit;
+  margin: 0; }
+
+button,
+select {
+  text-transform: none; }
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  appearance: button;
+  -webkit-appearance: button; }
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0; }
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 2px dotted var(--accent-color); }
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em; }
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal; }
+
+progress {
+  vertical-align: baseline; }
+
+textarea {
+  overflow: auto; }
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0; }
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+[type="search"] {
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  outline-offset: -2px; }
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit; }
+
 /* 1. Utils
 ** All the utilities class of the stylesheet
 */
 /* 1.0 - Accessibility classes
  * Some classes to help accessibility
 **/
-.screen-reader-text, .sr-only {
-  visibility: collapse;
-  font-size: 0;
-  position: absolute; }
+.sr-only, .screen-reader-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0; }
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto; }
 
 .skip {
   position: absolute;
@@ -1614,122 +761,62 @@ textarea {
 /* 1.2 - Colorization classes
  * Colorize some aspect of a class
 **/
-.bg-primary {
-  background-color: #e03131;
-  color: #ffffff; }
-  .bg-primary a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-primary:hover {
-    background-color: #e03131;
-    color: #ffffff; }
-    .bg-primary:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-primary {
+  --accent-color: #e03131;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #cc1f1f; }
 
-.bg-secondary {
-  background-color: #343a40;
-  color: #ffffff; }
-  .bg-secondary a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-secondary:hover {
-    background-color: #343a40;
-    color: #ffffff; }
-    .bg-secondary:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-secondary {
+  --accent-color: #343a40;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #3d444b; }
 
-.bg-warning {
-  background-color: #e8590c;
-  color: #ffffff; }
-  .bg-warning a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-warning:hover {
-    background-color: #e8590c;
-    color: #ffffff; }
-    .bg-warning:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-warning {
+  --accent-color: #e8590c;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #c44b0a; }
 
-.bg-danger {
-  background-color: #e03131;
-  color: #ffffff; }
-  .bg-danger a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-danger:hover {
-    background-color: #e03131;
-    color: #ffffff; }
-    .bg-danger:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-danger {
+  --accent-color: #e03131;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #cc1f1f; }
 
-.bg-info {
-  background-color: #1971c2;
-  color: #ffffff; }
-  .bg-info a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-info:hover {
-    background-color: #1971c2;
-    color: #ffffff; }
-    .bg-info:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-info {
+  --accent-color: #1971c2;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #155da0; }
 
-.bg-success {
-  background-color: #2f9e44;
-  color: #ffffff; }
-  .bg-success a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-success:hover {
-    background-color: #2f9e44;
-    color: #ffffff; }
-    .bg-success:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-success {
+  --accent-color: #2f9e44;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #268137; }
 
-.bg-muted {
-  background-color: #adb5bd;
-  color: #ffffff; }
-  .bg-muted a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-muted:hover {
-    background-color: #adb5bd;
-    color: #ffffff; }
-    .bg-muted:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-muted {
+  --accent-color: #adb5bd;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #98a2ac; }
 
-.bg-light {
-  background-color: #ffffff;
-  color: #212529; }
-  .bg-light a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-light:hover {
-    background-color: #ffffff;
-    color: #212529; }
-    .bg-light:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-light {
+  --accent-color: #ffffff;
+  --text-color-contrast: #212529;
+  --accent-color-hover: #ececec; }
+
+.c-dark {
+  --accent-color: #343a40;
+  --text-color-contrast: #ffffff;
+  --accent-color-hover: #3d444b; }
+
+.bg-accent {
+  background-color: var(--accent-color); }
 
 .bg-dark {
-  background-color: #343a40;
-  color: #ffffff; }
-  .bg-dark a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-dark:hover {
-    background-color: #343a40;
-    color: #ffffff; }
-    .bg-dark:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+  background-color: #343a40; }
+
+.bg {
+  background-color: #ffffff; }
+
+.bg-alt {
+  background-color: #e9ecef; }
 
 .bg-soft-primary {
   background-color: #ffc9c9;
@@ -1810,13 +897,13 @@ textarea {
       outline-color: currentColor; }
 
 .bg-soft-muted {
-  background-color: #f1f3f5;
+  background-color: #e9ecef;
   color: #212529; }
   .bg-soft-muted a {
     color: currentColor;
     outline-color: currentColor; }
   .bg-soft-muted:hover {
-    background-color: #f1f3f5;
+    background-color: #e9ecef;
     color: #212529; }
     .bg-soft-muted:hover a {
       color: currentColor;
@@ -1848,227 +935,14 @@ textarea {
       color: currentColor;
       outline-color: currentColor; }
 
-.text-primary {
-  color: #e03131; }
-
-.text-secondary {
-  color: #343a40; }
-
-.text-warning {
-  color: #e8590c; }
-
-.text-danger {
-  color: #e03131; }
-
-.text-info {
-  color: #1971c2; }
-
-.text-success {
-  color: #2f9e44; }
-
-.text-muted {
-  color: #adb5bd; }
-
-.text-light {
-  color: #ffffff; }
-
-.text-dark {
-  color: #343a40; }
-
-.btn-primary {
-  background-color: #e03131;
-  outline-color: #e03131;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-primary:visited {
-    background-color: #e03131;
-    color: #ffffff; }
-  .btn-primary:hover, .btn-primary:active, .btn-primary:visited:hover, .btn-primary:visited:active, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active {
-    background-color: #e55050;
-    color: white;
-    outline-color: #e55050;
-    box-shadow: none; }
-
-.btn-secondary {
-  background-color: #343a40;
-  outline-color: #343a40;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-secondary:visited {
-    background-color: #343a40;
-    color: #ffffff; }
-  .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited:hover, .btn-secondary:visited:active, .btn-secondary:not(.disabled):not(:disabled):hover, .btn-secondary:not(.disabled):not(:disabled):active {
-    background-color: #52585d;
-    color: white;
-    outline-color: #52585d;
-    box-shadow: none; }
-
-.btn-warning {
-  background-color: #e8590c;
-  outline-color: #e8590c;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-warning:visited {
-    background-color: #e8590c;
-    color: #ffffff; }
-  .btn-warning:hover, .btn-warning:active, .btn-warning:visited:hover, .btn-warning:visited:active, .btn-warning:not(.disabled):not(:disabled):hover, .btn-warning:not(.disabled):not(:disabled):active {
-    background-color: #eb7230;
-    color: white;
-    outline-color: #eb7230;
-    box-shadow: none; }
-
-.btn-danger {
-  background-color: #e03131;
-  outline-color: #e03131;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-danger:visited {
-    background-color: #e03131;
-    color: #ffffff; }
-  .btn-danger:hover, .btn-danger:active, .btn-danger:visited:hover, .btn-danger:visited:active, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active {
-    background-color: #e55050;
-    color: white;
-    outline-color: #e55050;
-    box-shadow: none; }
-
-.btn-info {
-  background-color: #1971c2;
-  outline-color: #1971c2;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-info:visited {
-    background-color: #1971c2;
-    color: #ffffff; }
-  .btn-info:hover, .btn-info:active, .btn-info:visited:hover, .btn-info:visited:active, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active {
-    background-color: #3c86cb;
-    color: white;
-    outline-color: #3c86cb;
-    box-shadow: none; }
-
-.btn-success {
-  background-color: #2f9e44;
-  outline-color: #2f9e44;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-success:visited {
-    background-color: #2f9e44;
-    color: #ffffff; }
-  .btn-success:hover, .btn-success:active, .btn-success:visited:hover, .btn-success:visited:active, .btn-success:not(.disabled):not(:disabled):hover, .btn-success:not(.disabled):not(:disabled):active {
-    background-color: #4ead60;
-    color: white;
-    outline-color: #4ead60;
-    box-shadow: none; }
-
-.btn-muted {
-  background-color: #adb5bd;
-  outline-color: #adb5bd;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-muted:visited {
-    background-color: #adb5bd;
-    color: #ffffff; }
-  .btn-muted:hover, .btn-muted:active, .btn-muted:visited:hover, .btn-muted:visited:active, .btn-muted:not(.disabled):not(:disabled):hover, .btn-muted:not(.disabled):not(:disabled):active {
-    background-color: #b9c0c7;
-    color: white;
-    outline-color: #b9c0c7;
-    box-shadow: none; }
-
-.btn-light {
-  background-color: #ffffff;
-  outline-color: #ffffff;
-  color: #212529;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-light:visited {
-    background-color: #ffffff;
-    color: #212529; }
-  .btn-light:hover, .btn-light:active, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active {
-    background-color: #dededf;
-    color: #2c3237;
-    outline-color: #dededf;
-    box-shadow: none; }
-
-.btn-dark {
-  background-color: #343a40;
-  outline-color: #343a40;
-  color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-dark:visited {
-    background-color: #343a40;
-    color: #ffffff; }
-  .btn-dark:hover, .btn-dark:active, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active {
-    background-color: #52585d;
-    color: white;
-    outline-color: #52585d;
-    box-shadow: none; }
-
-.head-primary .card-header, .head-primary .menu-header, .head-primary.header-bg th {
-  background-color: #e03131;
-  color: #ffffff; }
-
-.head-primary th {
-  color: #e03131; }
-
-.head-secondary .card-header, .head-secondary .menu-header, .head-secondary.header-bg th {
-  background-color: #343a40;
-  color: #ffffff; }
-
-.head-secondary th {
-  color: #343a40; }
-
-.head-warning .card-header, .head-warning .menu-header, .head-warning.header-bg th {
-  background-color: #e8590c;
-  color: #ffffff; }
-
-.head-warning th {
-  color: #e8590c; }
-
-.head-danger .card-header, .head-danger .menu-header, .head-danger.header-bg th {
-  background-color: #e03131;
-  color: #ffffff; }
-
-.head-danger th {
-  color: #e03131; }
-
-.head-info .card-header, .head-info .menu-header, .head-info.header-bg th {
-  background-color: #1971c2;
-  color: #ffffff; }
-
-.head-info th {
-  color: #1971c2; }
-
-.head-success .card-header, .head-success .menu-header, .head-success.header-bg th {
-  background-color: #2f9e44;
-  color: #ffffff; }
-
-.head-success th {
-  color: #2f9e44; }
-
-.head-muted .card-header, .head-muted .menu-header, .head-muted.header-bg th {
-  background-color: #adb5bd;
-  color: #ffffff; }
-
-.head-muted th {
-  color: #adb5bd; }
-
-.head-light .card-header, .head-light .menu-header, .head-light.header-bg th {
-  background-color: #ffffff;
-  color: #212529; }
-
-.head-light th {
-  color: #ffffff; }
-
-.head-dark .card-header, .head-dark .menu-header, .head-dark.header-bg th {
-  background-color: #343a40;
-  color: #ffffff; }
-
-.head-dark th {
-  color: #343a40; }
-
 .fg-light {
-  color: #ffffff; }
+  --text-color:#ffffff;
+  --link-color-hover:rgba(255, 255, 255, 0.3); }
 
 .fg-dark {
-  color: #212529; }
+  color: #212529;
+  --text-color:#212529;
+  --link-color-hover:rgba(33, 37, 41, 0.15); }
 
 /* 1.3 - List classes
  * Handle more easily list
@@ -2464,46 +1338,6 @@ ul.tag-list {
   margin: auto;
   padding-bottom: 1.6rem; }
 
-.container-personnage {
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
-  max-width: 1200px;
-  margin: auto;
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: auto;
-  row-gap: 3rem;
-  column-gap: 3rem;
-  grid-template-areas: "nomp nomp nomp nomp nomp nomp" "info info info info meta meta" "goss goss look look look look" "aime aime aime dete dete dete" "hist hist hist hist hist hist"; }
-  .container-personnage .card {
-    margin: 0; }
-  .container-personnage h1 {
-    padding: 0; }
-
-.personnage-nomp {
-  grid-area: nomp; }
-
-.personnage-info {
-  grid-area: info; }
-
-.personnage-meta {
-  grid-area: meta; }
-
-.personnage-goss {
-  grid-area: goss; }
-
-.personnage-look {
-  grid-area: look; }
-
-.personnage-aime {
-  grid-area: aime; }
-
-.personnage-dete {
-  grid-area: dete; }
-
-.personnage-hist {
-  grid-area: hist; }
-
 /* ------------------ PAGE ------------------- */
 #wrapper {
   background-color: #ffffff; }
@@ -2514,11 +1348,18 @@ body {
 
 footer {
   color: #ffffff;
+  --link-color: $color-footer-text;
   padding-bottom: 1.5rem; }
   footer .columns {
-    font-size: 0.8rem; }
-    footer .columns a {
-      color: #ffffff; }
+    font-size: 0.8rem;
+    margin-top: 1.5rem; }
+    @media (min-width: 768px) {
+      footer .columns {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 1.6rem; } }
+    footer .columns .col {
+      margin-bottom: 1.6rem; }
 
 .home-toast {
   max-width: 800px;
diff --git a/taxonomy-roman.php b/taxonomy-roman.php
index acd3948..6ea7be7 100644
--- a/taxonomy-roman.php
+++ b/taxonomy-roman.php
@@ -29,7 +29,7 @@
         $query = new WP_Query( $args );
       ?>
 
-			<div class="card head-primary">
+			<div class="card c-primary">
 			  <h2 class="card-header"><i class="icon-list" aria-hidden="true"></i> Chapitres</h2>
 			  <div class="card-menu">
           <?php if($query->have_posts()) : ?>