From 91472e83d18e9275aa0cc239e263e61ccabbcaba Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Fri, 13 Oct 2023 09:11:42 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20optimisation=20css=20g=C3=A9n=C3=A9r?=
 =?UTF-8?q?=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/article.php           |    2 +-
 components/featured.php          |    4 +-
 components/footer-content.php    |    2 +-
 components/mobile-sidebar.php    |    2 +-
 components/navbar-pages.php      |   12 +-
 components/posts-list.php        |    4 +-
 components/preview-list-home.php |    6 +-
 components/preview-list.php      |    6 +-
 header.php                       |    4 +-
 scss/_core.scss                  |    8 +-
 scss/_drawing.scss               |    9 +-
 scss/_global.scss                |    4 -
 scss/_mixins.scss                |    2 +-
 scss/_utils.scss                 |    4 -
 scss/components/_badges.scss     |    3 +-
 scss/components/_buttons.scss    |  148 ++-
 scss/components/_cards.scss      |   23 +-
 scss/components/_input.scss      |   89 +-
 scss/components/_menus.scss      |   51 +-
 scss/components/_pagination.scss |   20 +-
 scss/components/_previews.scss   |   18 +-
 scss/components/_tables.scss     |    4 -
 scss/components/_toasts.scss     |   31 +-
 scss/core/_bases.scss            |   47 +
 scss/core/_box-sizing.scss       |   18 -
 scss/core/_columns.scss          |   12 +-
 scss/core/_normalize.scss        |  305 -----
 scss/core/_typography.scss       |   91 +-
 scss/custom/_global.scss         |   49 -
 scss/custom/_previews.scss       |   93 --
 scss/definitions/_palette.scss   |   11 -
 scss/mixins/_colors.scss         |   13 +-
 scss/mixins/_panels.scss         |   23 +-
 scss/utils/_a11y.scss            |    4 -
 scss/utils/_align.scss           |    4 -
 scss/utils/_colorize.scss        |   88 +-
 scss/utils/_lists.scss           |    4 -
 scss/utils/_sizing.scss          |    4 -
 style.css                        | 2025 ++++++------------------------
 39 files changed, 807 insertions(+), 2440 deletions(-)
 create mode 100644 scss/core/_bases.scss
 delete mode 100644 scss/core/_box-sizing.scss
 delete mode 100644 scss/custom/_previews.scss

diff --git a/components/article.php b/components/article.php
index 2052150..0cf3175 100644
--- a/components/article.php
+++ b/components/article.php
@@ -9,7 +9,7 @@
     <?php $category = get_the_category(); 
     $category_parent_id = $category[0]->category_parent;
     if ( get_term( $category_parent_id, 'category' )->slug != "3-gallerie" ) {?>
-      <p class="align-right pr-half"><span class="btn-small btn-secondary"> <?php echo reading_time(); ?> </span></p>
+      <p class="align-right pr-half"><span class="btn btn-small c-secondary"> <?php echo reading_time(); ?> </span></p>
     <?php }?>
   <?php } else { ?>
     <h1 class="sr-only"><?php the_title(); ?></h1>
diff --git a/components/featured.php b/components/featured.php
index fca7a99..e8ecceb 100644
--- a/components/featured.php
+++ b/components/featured.php
@@ -22,12 +22,12 @@
     <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 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 icon-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
         </div>
         <time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
     </div>
     <?php the_excerpt(); ?>
-    <p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-readmore" title="<?php the_title();?>">Lire l'article</a> </p>
+    <p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-link" title="<?php the_title();?>">Lire l'article</a> </p>
   </article>
 
   <?php endwhile; ?> <?php wp_reset_query(); /*4*/ ?>
diff --git a/components/footer-content.php b/components/footer-content.php
index bcd9b4b..479c7b9 100644
--- a/components/footer-content.php
+++ b/components/footer-content.php
@@ -1,4 +1,4 @@
-<footer>
+<footer class="fg-light">
   <ul class="social">
     <?php
       $listmenu = get_nav_menu_locations();
diff --git a/components/mobile-sidebar.php b/components/mobile-sidebar.php
index 4fb716d..ec31529 100644
--- a/components/mobile-sidebar.php
+++ b/components/mobile-sidebar.php
@@ -61,4 +61,4 @@
   </ul>
 </nav>
 
-<button id="mobile-button" class="menu-button"><i class="icon icon-navicon" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button>
\ No newline at end of file
+<button id="mobile-button" class="menu-button"><i class="icon icon-bars" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button>
\ No newline at end of file
diff --git a/components/navbar-pages.php b/components/navbar-pages.php
index c43601c..c88090e 100644
--- a/components/navbar-pages.php
+++ b/components/navbar-pages.php
@@ -2,7 +2,7 @@
   <h2 class="sr-only">Menu des pages</h2>
   <ul>
     <li>
-      <a href="<?php echo site_url(); ?>" class="btn btn-navbar">
+      <a href="<?php echo site_url(); ?>" >
         <i class="icon icon-home"  aria-hidden="true"></i><span class="sr-only">Accueil</span>
       </a>
     </li>
@@ -10,7 +10,7 @@
       $listmenu = get_nav_menu_locations();
       $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
         foreach ($menu as $menuElement) {
-          echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
+          echo '<li><a href="' . $menuElement->url . '" >'. $menuElement->title . '</a></li>';
         }
       ?>
   </ul>
@@ -20,22 +20,22 @@
       $listmenu = get_nav_menu_locations();
       $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
         foreach ($menu as $menuElement) {
-          echo '<li class="d-none d-block-sm"><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
+          echo '<li class="d-none d-block-sm"><a href="' . $menuElement->url . '">'. $menuElement->title . '</a></li>';
         }
       ?>
     <li>
         <a class="menu-item submenu" href="#">Mes sites <i class="icon icon-caret-down" aria-hidden="true"></i></a>
-        <ul class="bg-light menu fg-dark">
+        <ul class="menu fg-dark">
         <?php
           $listmenu = get_nav_menu_locations();
           $menu = wp_get_nav_menu_items($listmenu['link-menu']);
           foreach ($menu as $menuElement) {
-            echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
+            echo '<li><a href="' . $menuElement->url . '">'. $menuElement->title . '</a></li>';
           }
         ?>
         </ul>
     </li>
-    <li><a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="icon icon-rss"  aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
+    <li><a href="<?php bloginfo('rss2_url'); ?>" ><i class="icon icon-rss"  aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
   </ul>
 </nav>
 
diff --git a/components/posts-list.php b/components/posts-list.php
index e79462a..2eda6c4 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-header"><h1><?php the_title(); ?></h1></div>
+    <h1 class="card-header"><?php the_title(); ?></h1>
     <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 icon-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
+            echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn btn-small btn-info'><i class='icon 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/preview-list-home.php b/components/preview-list-home.php
index 6674596..97075cb 100644
--- a/components/preview-list-home.php
+++ b/components/preview-list-home.php
@@ -25,13 +25,13 @@
                     <div><?php
                     if (!has_category('chapters')) {
                       $category = get_the_category();
-                      echo"<span class='btn-small btn-info small-text'>" . $category[0]->cat_name . "</span>";
+                      echo"<span class='badge c-info small-text'>" . $category[0]->cat_name . "</span>";
                     } else {
                       $romans = get_the_terms($post->ID, 'roman');
-                      echo"<span class='btn-small btn-info small-text'>" . $romans[0]->name . "</span>";
+                      echo"<span class='badge c-info small-text'>" . $romans[0]->name . "</span>";
                     }
                     ?></div>
-                    <div><time><span class="btn-small btn-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
+                    <div><time><span class="badge c-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
                   </div>
                   <div class="comment-text">
                     <?php $category = get_the_category(); 
diff --git a/components/preview-list.php b/components/preview-list.php
index 63e0d24..a70f7f5 100644
--- a/components/preview-list.php
+++ b/components/preview-list.php
@@ -21,13 +21,13 @@
                     <div><?php
                     if (!has_category('chapters')) {
                       $category = get_the_category();
-                      echo"<span class='btn-small btn-info small-text'>" . $category[0]->cat_name . "</span>";
+                      echo"<span class='badge c-info small-text'>" . $category[0]->cat_name . "</span>";
                     } else {
                       $romans = get_the_terms($post->ID, 'roman');
-                      echo"<span class='btn-small btn-info small-text'>" . $romans[0]->name . "</span>";
+                      echo"<span class='badge c-info small-text'>" . $romans[0]->name . "</span>";
                     }
                     ?></div>
-                    <div><time><span class="btn-small btn-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
+                    <div><time><span class="badge c-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
                   </div>
                   <div class="comment-text">
                     <?php $category = get_the_category(); 
diff --git a/header.php b/header.php
index 8e8ef64..9ffc7ce 100644
--- a/header.php
+++ b/header.php
@@ -15,11 +15,11 @@
 	<link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/img/favicon.png">
 
 	<!-- Dépendances -->
-	<link href="<?php echo get_template_directory_uri() . "/dep/iconfont/style.css?f43dse"; ?>" rel="stylesheet"/>
+	<link href="<?php echo get_template_directory_uri() . "/dep/iconfont/style.css?f43dsf"; ?>" rel="stylesheet"/>
 	<link href="<?php echo get_template_directory_uri() . "/dep/viewerjs/viewer.min.css"; ?>" rel="stylesheet"/>
 
 	<!-- CSS -->
-	<link href="<?php bloginfo('stylesheet_url'); ?>?f43dse" rel="stylesheet"/>
+	<link href="<?php bloginfo('stylesheet_url'); ?>?f43dsf" rel="stylesheet"/>
 	
 	<!-- Viewer -->
 	<script src="<?php echo get_template_directory_uri();?>/dep/viewerjs/viewer.min.js"></script>
diff --git a/scss/_core.scss b/scss/_core.scss
index 20b25f0..e0ed8d2 100644
--- a/scss/_core.scss
+++ b/scss/_core.scss
@@ -1,9 +1,5 @@
-/* 0. CORE
-** All the basic functions from the stylesheet
-*/
-
-@import 'core/normalize';
-@import 'core/box-sizing';
+//@import 'core/normalize';
+@import 'core/bases';
 @import 'core/typography';
 @import 'core/containers';
 @import 'core/columns';
diff --git a/scss/_drawing.scss b/scss/_drawing.scss
index f9bc19d..3b12d1d 100644
--- a/scss/_drawing.scss
+++ b/scss/_drawing.scss
@@ -1,18 +1,11 @@
-/* --- 04. COMPOSANTS --- */
-
-/*
- * Les différents composants réutilisables de la page.
- *
- */
-
 @import 'components/buttons';
 @import 'components/btn-groups';
 @import 'components/breadcrumb';
+@import 'components/badges';
 @import 'components/pagination';
 @import 'components/cards';
 @import 'components/menus';
 @import 'components/toasts';
 @import 'components/tables';
-//@import 'components/previews';
 @import 'components/sidebar';
 @import 'components/input';
diff --git a/scss/_global.scss b/scss/_global.scss
index 5aed014..12a20ed 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -1,7 +1,3 @@
-/* 4 - Custom styling
- * Styles that are custom to this particular theme
-**/
-
 @import 'custom/global';
 @import 'components/previews';
 @import 'custom/featured';
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index d59131c..98dea2b 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -5,6 +5,6 @@
 @import 'mixins/responsive';
 @import 'mixins/borders';
 @import 'mixins/shape';
-@import 'mixins/btns';
+//@import 'mixins/btns';
 @import 'mixins/panels';
 @import 'mixins/li';
diff --git a/scss/_utils.scss b/scss/_utils.scss
index 725c49c..554d5de 100644
--- a/scss/_utils.scss
+++ b/scss/_utils.scss
@@ -1,7 +1,3 @@
-/* 1. Utils
-** All the utilities class of the stylesheet
-*/
-
 @import 'utils/a11y';
 @import 'utils/align';
 @import 'utils/borders';
diff --git a/scss/components/_badges.scss b/scss/components/_badges.scss
index d6cedf6..9360a61 100644
--- a/scss/components/_badges.scss
+++ b/scss/components/_badges.scss
@@ -1,7 +1,8 @@
 .badge {
-  @include button(0rem);
   line-height: 1.5em;
   padding-left: $button_small;
   padding-right: $button_small;
   text-decoration:none!important;
+  background-color:var(--accent-color);
+  color:var(--text-color-contrast);
 }
diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss
index a799f9f..e7db8a0 100644
--- a/scss/components/_buttons.scss
+++ b/scss/components/_buttons.scss
@@ -1,36 +1,138 @@
-/*
- * 3. Buttons and labels
- * All clickable elements
- *
-*/
+@mixin button($size) {
+  @include button-layout($size);
+  @include shape-style($size);
+  @include button-hover();
+  font-weight: $fontweight_base;
+}
+
+@mixin button-layout($size) {
+  padding: $size;
+  padding-top: $size/3;
+  padding-bottom: $size/3;
+  margin: $size/2;
+  margin-top: $size/3;
+  margin-bottom: $lineheight;
+  //font-size: 4.75mm;
+  line-height: $lineheight;
+  height: auto;
+}
+
+@mixin button-hover() {
+  transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
+
+  &:hover,
+  &:active {
+    background-color: transparent;
+  }
+}
+
+@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
+  @include colorize-shape($background-color);
+  outline-color: $background-color;
+  color: $text-color;
+
+  &:visited {
+    @include colorize-shape($background-color);
+    color: $text-color;
+  }
+
+  &,
+  &:visited,
+  &:not(.disabled):not(:disabled) {
+
+    &:hover,
+    &:active {
+      @include colorize-shape($hover-color);
+      color: lighten($text-color, 5%);
+      outline-color: $hover-color;
+      box-shadow: none;
+    }
+  }
+}
+
+@mixin button-color($background-color) {
+  @include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
+  box-shadow: $narrow-shadow;
+}
+
 
 .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);
+
+  &::before {
+    background-color: var(--accent-color);
+  }
+  &:visited {
+    color: var(--text-color-contrast);
+  }
+
+  &:hover,
+  &:active {
+    &::before {
+      background-color: var(--accent-color-hover);
     }
 
-    p &:last-child {
-        margin-bottom:0;
+    outline-color: var(--accent-color-hover);
+    box-shadow: none;
+  }
+  font-weight: $fontweight_base;
+
+  p &:last-child {
+    margin-bottom:0;
+  }
+
+  .fake {
+    background-color: transparent !important;
+
+    &::before {
+      background-color: transparent !important;
     }
+
+    color:var(--text-color);
+  }
 }
 
-.btn-small, .badge {
-  @include button($button_small);
-  padding-left: $button_small;
-  padding-right: $button_small;
-  text-decoration:none;
-  line-height: 1.5em;
+.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;
 }
 
-// COLORIZE BUTTONS
-
-strong.btn-fake {
-  @include button($button_large);
-  @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
+.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 {
-  @include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
-  @include prefer-no-borders();
+  color: var(--link-color);
+  &:visited {
+    color: var(--link-color);
+  }
+  background-color: transparent!important;
+  &::before {
+    background-color: transparent;
+  }
+
+  &:hover,
+  &:active {
+    &::before {
+      background-color: var(--link-color-hover);
+    }
+  }
+
 }
diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss
index c96bb47..a156bd8 100644
--- a/scss/components/_cards.scss
+++ b/scss/components/_cards.scss
@@ -1,10 +1,3 @@
-/*
- * 2. Cards and containers
- * All elements that are supposed to contain other stuff
- *
- *
-*/
-
 $card-bigpad: $lineheight_rel * 1.25;
 $card-smallpad: $lineheight_rel / 4;
 
@@ -20,16 +13,17 @@ $card-smallpad: $lineheight_rel / 4;
 
     &-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;
@@ -67,8 +61,3 @@ ul.card-list, .card > ul {
     &-success{@include list-color($color-success);}
 }
 
-.smallcard {
-    &-header {
-        @include panel-header($card-bigpad);
-    }
-}
diff --git a/scss/components/_input.scss b/scss/components/_input.scss
index a249c90..02d0d38 100644
--- a/scss/components/_input.scss
+++ b/scss/components/_input.scss
@@ -2,12 +2,99 @@ input,
 textarea {
   width: 100%;
   background-color: $color-background-alt;
-  border-radius: $btn-radius;
+  border-radius: $well-radius;
   border: 0px solid rgba(0, 0, 0, 0);
   padding: $lineheight_rel / 4;
   line-height: $lineheight_rel;
+  overflow: auto;
 
   .card & {
     background-color: $color-background;
   }
+}
+
+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"] {
+  -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;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -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 9a1ebc0..3437a12 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);
     }
   }
 }
@@ -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 {
@@ -113,6 +80,7 @@
       display: none;
       padding:0.33rem;
       z-index:2;
+      background-color: $color-background-alt;
     }
 
     &:hover ul,
@@ -147,7 +115,6 @@ ul.menu h2 {
 }
 
 .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 9ff283e..8b031aa 100644
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@@ -5,17 +5,19 @@ nav.pagination {
     width:100%;
   }
   .page-numbers, .next, .prev {
-      @include button($button_small);
-      padding-left: $button_small;
-      padding-right: $button_small;
-      margin-right : $button_small / 2;
-      margin-left: $button_small / 2;
+      @include shape-style($button_small);
+      padding: $button_small/2 $button_small;
+      margin : $button_small / 2;
       text-decoration: none;
 
-
-      &:not(.current):not(.dots) {
-        @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 {
+          &::before {
+            background-color: var(--link-color-hover);
+          }
+        }
       }
 
       &.current {
diff --git a/scss/components/_previews.scss b/scss/components/_previews.scss
index de319e2..5f90280 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;
@@ -66,12 +61,13 @@ $comment-peek-height:0px;
   height: $preview-height;
 
   .card-header {
-    font-family: $basefont;
-    font-size: 1em;
-    @include panel-header($lineheight_half);
-    @include colorize-shape($color-primary);
-    color: getTextColorFromBackground($color-primary);
-    font-weight: $fontweight_bold;
+    padding: $lineheight_half/2 $card-header-padding;
+    padding-bottom: $lineheight_half/2 !important;
+    &:before {
+      left: -$lineheight_half/2;
+      right: -$lineheight_half/2;
+    }
+    
     position:absolute;
     margin:0;
     top:0.5rem;
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..43045b3 100644
--- a/scss/components/_toasts.scss
+++ b/scss/components/_toasts.scss
@@ -1,8 +1,25 @@
-.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 {
+  background-color: var(--accent-color);
+  color: var(--text-color-contrast);
+}
+
+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/_box-sizing.scss b/scss/core/_box-sizing.scss
deleted file mode 100644
index dbe61eb..0000000
--- a/scss/core/_box-sizing.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/* 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;
-}
diff --git a/scss/core/_columns.scss b/scss/core/_columns.scss
index 92a9065..6e485d0 100644
--- a/scss/core/_columns.scss
+++ b/scss/core/_columns.scss
@@ -1,10 +1,14 @@
 @mixin column($size) {
   grid-column: span $size;
-  width:100%;
-  margin:0;
+}
 
-  & > *:last-child {
-    margin-bottom:0!important;
+[class*=" col-"],
+[class^=col-] {
+  width: 100%;
+  margin: 0;
+
+  &>*:last-child {
+    margin-bottom: 0 !important;
   }
 }
 
diff --git a/scss/core/_normalize.scss b/scss/core/_normalize.scss
index 192eb9c..039c093 100644
--- a/scss/core/_normalize.scss
+++ b/scss/core/_normalize.scss
@@ -1,315 +1,10 @@
-/*! 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.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * 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 */
-}
-
-/**
- * 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%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-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
    ========================================================================== */
 
diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss
index 70cb611..b612eea 100644
--- a/scss/core/_typography.scss
+++ b/scss/core/_typography.scss
@@ -1,24 +1,24 @@
-/* 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%)};
+ }
+
+// html, body {
+// 	font-family: $basefont;
+// 	text-align: left;
+//   font-size:  $fontsize;
+// 	line-height: $lineheight;
+// 	color: getFontColor();
+//   font-weight: $fontweight_base;
+// }
 
 strong {
 	font-weight: $fontweight_bold;
@@ -34,27 +34,24 @@ mark {
   border-radius: 0.1rem;
 }
 
+img {
+  border-style: none;
+}
+
 a {
-  color: darken($color-link, 10%);
+  color: var(--link-color);
   outline-color: $color-link;
   padding: 0.05rem;
   border-radius: 0.1rem;
   text-decoration: underline dashed;
 
   &:visited {
-    color: darken($color-link, 10%);
+    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;
-    }
+    background-color: var(--link-color-hover);
+    text-decoration: none;
   }
 }
 
@@ -105,8 +102,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,50 +163,24 @@ 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;
+  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;
diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss
index f0ca91d..463e67e 100644
--- a/scss/custom/_global.scss
+++ b/scss/custom/_global.scss
@@ -1,10 +1,3 @@
-/* --- 03. GLOBAL STYLING --- */
-
-/*
- * Les styles "globaux" touchant toute la page.
- *
- */
-
 @mixin li-no-margin() {
     li {
         margin: 0;
@@ -42,8 +35,6 @@
   }
 }
 
-  /* ------------------ HEADERS ------------------- */
-
 #page-header {
     background: get-color("skyblue") url('img/background.png');
     border-top: 6px solid get-color("dark");
@@ -121,7 +112,6 @@ header h1 {
 .dropdown-menu {
     box-shadow: $narrow-shadow, $inset-shadow;
 }
-/* ------------------ CONTAINERS ------------------- */
 
 .container-big {
     @include container-big();
@@ -190,49 +180,10 @@ 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 {
     background-color: $color-background;
 }
 
-  /* ------------------ FOOTER ------------------- */
-
 $color-footer-back: get-color("dark");
 $color-footer-text: get-color("light");
 
diff --git a/scss/custom/_previews.scss b/scss/custom/_previews.scss
deleted file mode 100644
index a5f88bc..0000000
--- a/scss/custom/_previews.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-.preview-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-gap: $lineheight / 3;
-    margin: -$lineheight / 3;
-    padding-bottom: $lineheight;
-
-    @include md() {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    @include lg() {
-        grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    @include xl() {
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
-}
-
-.preview-list {
-    .preview {
-        display: block;
-    }
-    @include sm() {
-        .preview-thumbnail {
-            width: min-content;
-            img {
-                width: 240px;
-                margin-right: $lineheight /2;
-            }
-        }
-    
-        .preview {
-            display: flex;
-            align-items: start;
-            margin-bottom: $lineheight;
-        }
-    }
-    @include xl() {
-        .preview-thumbnail img {
-            width: 320px;
-        }
-    }
-}
-
-.preview {
-    font-size: 0.8rem;
-    text-decoration: none;
-    padding: $lineheight / 3;
-    border-radius: $card-radius;
-}
-
-.preview-thumbnail {
-    display:block;
-    width: 100%;
-    background-color:transparent;
-    object-fit: cover;
-    padding:0;
-    line-height:0;
-    img {
-        width:100%;
-        object-fit: cover;
-        height: auto;
-        aspect-ratio: 16/9;
-        border-radius: $card-radius;
-    }
-}
-
-.preview h2, .preview-featured h2 {
-    font-size:1.25rem;
-    line-height: 1.5rem;
-    font-family: $titlefont;
-    font-weight: 800;
-    height:3rem;
-    color: $color-font;
-    a {
-        background-color:transparent!important;
-        color:$color-font;
-    }
-}
-
-.preview-featured h2 {
-    color: $color-font-light;
-}
-
-.preview-excerpt {
-    margin-top: $lineheight / 2;
-    font-size:0.8rem;
-    line-height:1.25rem;
-    color:transparentize($color-font, 0.2);
-}
\ No newline at end of file
diff --git a/scss/definitions/_palette.scss b/scss/definitions/_palette.scss
index b6ace7f..fb05255 100644
--- a/scss/definitions/_palette.scss
+++ b/scss/definitions/_palette.scss
@@ -1,14 +1,3 @@
-/* --- 00. PALETTE --- */
-
-/*
- * Les définitions globales des couleurs du theme.
- *
- * Elle permettent de définir rapidement à la fois les couleurs
- * de base qui seront utilisée pour tout le theme, mais
- * également celles spécifiques pour certains sujets (liens, texte)
- *
- */
-
 $whiteness_value: 0.8;
 
 // Couleurs de base du theme :
diff --git a/scss/mixins/_colors.scss b/scss/mixins/_colors.scss
index 6c39696..a08ed32 100644
--- a/scss/mixins/_colors.scss
+++ b/scss/mixins/_colors.scss
@@ -1,10 +1,3 @@
-/* --- 00. COLORS --- */
-
-/*
- * La gestion des couleurs dans le theme. Cette partie de la stylesheet est
- * automatique et n'a pas besoin d'être modifiée
- */
-
  // FUNCTIONS TO GET MORE EASILY COLORS
  @function list-colors() {
      @return $semantics;
@@ -58,3 +51,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 8fd545f..eaa25e8 100644
--- a/scss/mixins/_panels.scss
+++ b/scss/mixins/_panels.scss
@@ -26,15 +26,16 @@
 }
 
 @mixin panel-header($size) {
+    font-family: $basefont;
     font-size:1em;
     font-weight: $fontweight_bold;
-    padding: $size/2;
-    padding-left:$card-header-padding;
-    padding-right:$card-header-padding;
+
+
+    padding: $size/2 $card-header-padding;
     padding-bottom: $size/2!important;
-    margin:$card-header-hmargin;
-    margin-bottom:$lineheight_rel / 2;
-    margin-top:$lineheight_rel / 2;
+    margin:$lineheight_rel / 2 $card-header-hmargin;
+    // margin-bottom:$lineheight_rel / 2;
+    // margin-top:$lineheight_rel / 2;
     line-height:1;
 
     position:relative;
@@ -51,14 +52,4 @@
       border-bottom-left-radius: $card-radius;
       border-bottom-right-radius: $card-radius;
     }
-
-    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;
-    }
 }
diff --git a/scss/utils/_a11y.scss b/scss/utils/_a11y.scss
index 66eb7aa..f249252 100644
--- a/scss/utils/_a11y.scss
+++ b/scss/utils/_a11y.scss
@@ -1,7 +1,3 @@
-/* 1.0 - Accessibility classes
- * Some classes to help accessibility
-**/
-
 .screen-reader-text, .sr-only {
   visibility: collapse;
   font-size:0;
diff --git a/scss/utils/_align.scss b/scss/utils/_align.scss
index ae92e8d..d543560 100644
--- a/scss/utils/_align.scss
+++ b/scss/utils/_align.scss
@@ -1,7 +1,3 @@
-/* 1.1 - Alignement classes
- * Handle easily alignement and flexboxes
-**/
-
 .flex-that {
   display: flex;
   justify-content: space-between;
diff --git a/scss/utils/_colorize.scss b/scss/utils/_colorize.scss
index c53c4ba..b615f3a 100644
--- a/scss/utils/_colorize.scss
+++ b/scss/utils/_colorize.scss
@@ -1,7 +1,3 @@
-/* 1.2 - Colorization classes
- * Colorize some aspect of a class
-**/
-
 @mixin heading-color($background-color) {
 
   & .card-header,
@@ -25,53 +21,69 @@
   }
 }
 
-.bg {
+.bg-accent {
+  $background-color: var(--accent-color);
+}
 
+// .bg {
+
+//   @each $name,
+//   $color in list-colors() {
+//     &-#{$name} {
+//       @include bg-color(get-color($name));
+//       &:hover {
+//         @include bg-color(get-color($name));
+//       }
+//     }
+//   }
+// }
+
+// .text {
+
+//   @each $name,
+//   $color in list-colors() {
+//     &-#{$name} {
+//       @include text-color(get-color($name));
+//     }
+//   }
+// }
+
+// .btn {
+
+//   @each $name,
+//   $color in list-colors() {
+//     &-#{$name} {
+//       @include button-color(get-color($name));
+//     }
+//   }
+// }
+
+.c, .btn, .head, .text {
   @each $name,
   $color in list-colors() {
     &-#{$name} {
-      @include bg-color(get-color($name));
-      &:hover {
-        @include bg-color(get-color($name));
-      }
+      @include accent-color(get-color($name));
     }
   }
 }
 
-.text {
+// .head {
 
-  @each $name,
-  $color in list-colors() {
-    &-#{$name} {
-      @include text-color(get-color($name));
-    }
-  }
-}
-
-.btn {
-
-  @each $name,
-  $color in list-colors() {
-    &-#{$name} {
-      @include button-color(get-color($name));
-    }
-  }
-}
-
-.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/scss/utils/_lists.scss b/scss/utils/_lists.scss
index 8d593cf..7d366c7 100644
--- a/scss/utils/_lists.scss
+++ b/scss/utils/_lists.scss
@@ -1,7 +1,3 @@
-/* 1.3 - List classes
- * Handle more easily list
-**/
-
 .no-pills {
     list-style:none;
 }
diff --git a/scss/utils/_sizing.scss b/scss/utils/_sizing.scss
index 0db0ce6..754b0a0 100644
--- a/scss/utils/_sizing.scss
+++ b/scss/utils/_sizing.scss
@@ -1,7 +1,3 @@
-/* 1.3 - Sizing classes
- * Handle sizing and margin
-**/
-
 @mixin addmargins($name, $size) {
   &-#{$name} {
     margin:$size;
diff --git a/style.css b/style.css
index a44e3ce..994d91e 100644
--- a/style.css
+++ b/style.css
@@ -13,136 +13,36 @@
 
   This theme is licensed under the GPLv3.
 */
-/* --- 00. PALETTE --- */
-/*
- * Les définitions globales des couleurs du theme.
- *
- * Elle permettent de définir rapidement à la fois les couleurs
- * de base qui seront utilisée pour tout le theme, mais
- * également celles spécifiques pour certains sujets (liens, texte)
- *
- */
 @font-face {
   font-family: 'Amatic SC';
   src: url("fonts/AmaticSC-Regular.woff2") format("woff2");
   font-weight: 400; }
 
-/* --- 00. COLORS --- */
-/*
- * La gestion des couleurs dans le theme. Cette partie de la stylesheet est
- * automatique et n'a pas besoin d'être modifiée
- */
-/* 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.5mm;
+  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%;
@@ -156,217 +56,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.5mm;
-  line-height: 1.6rem;
-  color: #073642;
-  font-weight: 400; }
+:root {
+  --accent-color: #CB357D;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #ad2d6a;
+  --text-color:#073642;
+  --link-color-hover:rgba(7, 54, 66, 0.15);
+  --link-color:#a32a64; }
 
 strong {
   font-weight: 600; }
@@ -379,19 +75,19 @@ mark {
   padding: 0.05rem 0.25rem;
   border-radius: 0.1rem; }
 
+img {
+  border-style: none; }
+
 a {
-  color: #a32a64;
+  color: var(--link-color);
   outline-color: #CB357D;
   padding: 0.05rem;
   border-radius: 0.1rem;
   text-decoration: underline dashed; }
   a:visited {
-    color: #a32a64; }
-  a:hover, a:hover.fg-dark, .fg-light a:hover, a:active, a:active.fg-dark, .fg-light a:active {
-    background-color: rgba(7, 54, 66, 0.1);
-    text-decoration: none; }
-  .fg-light a:hover, a:hover.fg-light, .fg-light a:active, a:active.fg-light {
-    background-color: rgba(253, 247, 231, 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 {
@@ -433,7 +129,6 @@ ul, ol {
   background-color: #0f7e84;
   color: #FDF7E7; }
 
-/* 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;
@@ -489,35 +184,21 @@ 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: 0px;
-  margin: 0 0 1.6rem 0;
-  padding: 1.6rem 1rem 1.6rem 1rem;
-  max-width: 100%;
-  font-style: italic;
-  background-color: #eee8d5;
-  color: #073642;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-
-code {
-  background: transparent;
-  color: #dc322f; }
-
-.small-text {
+.small-text, small {
   font-size: 0.9em; }
 
-/* 2.6 - Special styling */
 .time {
   font-style: italic;
   text-align: right;
@@ -539,6 +220,14 @@ code {
   max-width: 1200px;
   margin: auto; }
 
+[class*=" col-"],
+[class^=col-] {
+  width: 100%;
+  margin: 0; }
+  [class*=" col-"] > *:last-child,
+  [class^=col-] > *:last-child {
+    margin-bottom: 0 !important; }
+
 .columns {
   display: grid;
   grid-gap: 1.6rem;
@@ -549,492 +238,189 @@ code {
     grid-gap: 0px; }
 
 .column {
-  grid-column: span 12;
-  width: 100%;
-  margin: 0; }
-  .column > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 12; }
 
 .col-1 {
-  grid-column: span 1;
-  width: 100%;
-  margin: 0; }
-  .col-1 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 1; }
 
 .col-2 {
-  grid-column: span 2;
-  width: 100%;
-  margin: 0; }
-  .col-2 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 2; }
 
 .col-3 {
-  grid-column: span 3;
-  width: 100%;
-  margin: 0; }
-  .col-3 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 3; }
 
 .col-4 {
-  grid-column: span 4;
-  width: 100%;
-  margin: 0; }
-  .col-4 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 4; }
 
 .col-5 {
-  grid-column: span 5;
-  width: 100%;
-  margin: 0; }
-  .col-5 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 5; }
 
 .col-6 {
-  grid-column: span 6;
-  width: 100%;
-  margin: 0; }
-  .col-6 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 6; }
 
 .col-7 {
-  grid-column: span 7;
-  width: 100%;
-  margin: 0; }
-  .col-7 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 7; }
 
 .col-8 {
-  grid-column: span 8;
-  width: 100%;
-  margin: 0; }
-  .col-8 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 8; }
 
 .col-9 {
-  grid-column: span 9;
-  width: 100%;
-  margin: 0; }
-  .col-9 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 9; }
 
 .col-10 {
-  grid-column: span 10;
-  width: 100%;
-  margin: 0; }
-  .col-10 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 10; }
 
 .col-11 {
-  grid-column: span 11;
-  width: 100%;
-  margin: 0; }
-  .col-11 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 11; }
 
 .col-12 {
-  grid-column: span 12;
-  width: 100%;
-  margin: 0; }
-  .col-12 > *:last-child {
-    margin-bottom: 0 !important; }
+  grid-column: span 12; }
 
 @media (min-width: 576px) {
   .col-sm-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-sm-1 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 1; }
   .col-sm-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-sm-2 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 2; }
   .col-sm-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-sm-3 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 3; }
   .col-sm-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-sm-4 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 4; }
   .col-sm-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-sm-5 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 5; }
   .col-sm-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-sm-6 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 6; }
   .col-sm-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-sm-7 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 7; }
   .col-sm-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-sm-8 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 8; }
   .col-sm-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-sm-9 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 9; }
   .col-sm-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-sm-10 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 10; }
   .col-sm-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-sm-11 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 11; }
   .col-sm-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-sm-12 > *:last-child {
-      margin-bottom: 0 !important; } }
+    grid-column: span 12; } }
 
 @media (min-width: 768px) {
   .col-md-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-md-1 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 1; }
   .col-md-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-md-2 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 2; }
   .col-md-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-md-3 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 3; }
   .col-md-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-md-4 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 4; }
   .col-md-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-md-5 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 5; }
   .col-md-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-md-6 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 6; }
   .col-md-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-md-7 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 7; }
   .col-md-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-md-8 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 8; }
   .col-md-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-md-9 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 9; }
   .col-md-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-md-10 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 10; }
   .col-md-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-md-11 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 11; }
   .col-md-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-md-12 > *:last-child {
-      margin-bottom: 0 !important; } }
+    grid-column: span 12; } }
 
 @media (min-width: 992px) {
   .col-lg-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-lg-1 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 1; }
   .col-lg-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-lg-2 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 2; }
   .col-lg-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-lg-3 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 3; }
   .col-lg-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-lg-4 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 4; }
   .col-lg-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-lg-5 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 5; }
   .col-lg-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-lg-6 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 6; }
   .col-lg-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-lg-7 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 7; }
   .col-lg-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-lg-8 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 8; }
   .col-lg-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-lg-9 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 9; }
   .col-lg-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-lg-10 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 10; }
   .col-lg-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-lg-11 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 11; }
   .col-lg-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-lg-12 > *:last-child {
-      margin-bottom: 0 !important; } }
+    grid-column: span 12; } }
 
 @media (min-width: 1200px) {
   .col-xl-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-xl-1 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 1; }
   .col-xl-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-xl-2 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 2; }
   .col-xl-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-xl-3 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 3; }
   .col-xl-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-xl-4 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 4; }
   .col-xl-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-xl-5 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 5; }
   .col-xl-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-xl-6 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 6; }
   .col-xl-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-xl-7 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 7; }
   .col-xl-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-xl-8 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 8; }
   .col-xl-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-xl-9 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 9; }
   .col-xl-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-xl-10 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 10; }
   .col-xl-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-xl-11 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 11; }
   .col-xl-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-xl-12 > *:last-child {
-      margin-bottom: 0 !important; } }
+    grid-column: span 12; } }
 
 @media (min-width: 1600px) {
   .col-xxl-1 {
-    grid-column: span 1;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-1 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 1; }
   .col-xxl-2 {
-    grid-column: span 2;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-2 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 2; }
   .col-xxl-3 {
-    grid-column: span 3;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-3 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 3; }
   .col-xxl-4 {
-    grid-column: span 4;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-4 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 4; }
   .col-xxl-5 {
-    grid-column: span 5;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-5 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 5; }
   .col-xxl-6 {
-    grid-column: span 6;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-6 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 6; }
   .col-xxl-7 {
-    grid-column: span 7;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-7 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 7; }
   .col-xxl-8 {
-    grid-column: span 8;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-8 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 8; }
   .col-xxl-9 {
-    grid-column: span 9;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-9 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 9; }
   .col-xxl-10 {
-    grid-column: span 10;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-10 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 10; }
   .col-xxl-11 {
-    grid-column: span 11;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-11 > *:last-child {
-      margin-bottom: 0 !important; }
+    grid-column: span 11; }
   .col-xxl-12 {
-    grid-column: span 12;
-    width: 100%;
-    margin: 0; }
-    .col-xxl-12 > *:last-child {
-      margin-bottom: 0 !important; } }
+    grid-column: span 12; } }
 
-/* --- 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;
   border: 0px solid rgba(0, 0, 0, 0.3);
   border-radius: 0px 0px 0px 0px;
   position: relative;
   z-index: 1;
   overflow: visible;
   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;
+  outline-color: var(--accent-color);
+  color: var(--text-color-contrast);
   font-weight: 400; }
   .btn:before {
     content: " ";
@@ -1046,114 +432,45 @@ code {
     z-index: -1;
     transform: skewX(-15deg);
     transition: background-color 0.3s; }
+  .btn::before {
+    background-color: var(--accent-color); }
+  .btn:visited {
+    color: var(--text-color-contrast); }
   .btn:hover, .btn:active {
-    background-color: transparent; }
-  .btn:hover, .btn:active {
-    border: 0px solid rgba(0, 0, 0, 0.3); }
+    outline-color: var(--accent-color-hover);
+    box-shadow: none; }
+    .btn:hover::before, .btn:active::before {
+      background-color: var(--accent-color-hover); }
   p .btn:last-child {
     margin-bottom: 0; }
+  .btn .fake {
+    background-color: transparent !important;
+    color: var(--text-color); }
+    .btn .fake::before {
+      background-color: transparent !important; }
 
-.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: 0px 0px 0px 0px;
-  position: relative;
-  z-index: 1;
-  overflow: visible;
-  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;
-  text-decoration: none;
-  line-height: 1.5em; }
-  .btn-small:before, .badge:before {
-    content: " ";
-    position: absolute;
-    top: 0;
+.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;
-    bottom: 0;
-    z-index: -1;
-    transform: skewX(-15deg);
-    transition: background-color 0.3s; }
-  .btn-small:hover, .btn-small:active, .badge:hover, .badge:active {
-    background-color: transparent; }
-
-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;
-  border: 0px solid rgba(0, 0, 0, 0.3);
-  border-radius: 0px 0px 0px 0px;
-  position: relative;
-  z-index: 1;
-  overflow: visible;
-  background-color: transparent;
-  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:before {
-    content: " ";
-    position: absolute;
-    top: 0;
-    left: -0.8em;
-    right: -0.8em;
-    bottom: 0;
-    z-index: -1;
-    transform: skewX(-15deg);
-    transition: background-color 0.3s; }
-  strong.btn-fake:hover, strong.btn-fake:active {
-    background-color: transparent; }
-  strong.btn-fake:before {
-    background-color: transparent; }
-  strong.btn-fake:visited {
-    background-color: transparent;
-    color: black; }
-    strong.btn-fake:visited:before {
-      background-color: transparent; }
-  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;
-    box-shadow: none; }
-    strong.btn-fake:hover:before, strong.btn-fake:active:before, strong.btn-fake:visited:hover:before, strong.btn-fake:visited:active:before, strong.btn-fake:not(.disabled):not(:disabled):hover:before, strong.btn-fake:not(.disabled):not(:disabled):active:before {
-      background-color: transparent; }
+    right: -0.2em; }
 
 .btn-readmore, .btn-link {
-  background-color: transparent;
-  outline-color: transparent;
-  color: #CB357D; }
-  .btn-readmore:before, .btn-link:before {
-    background-color: transparent; }
+  color: var(--link-color);
+  background-color: transparent !important; }
   .btn-readmore:visited, .btn-link:visited {
-    background-color: transparent;
-    color: #CB357D; }
-    .btn-readmore:visited:before, .btn-link:visited:before {
-      background-color: transparent; }
-  .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: #e3d9ba;
-    color: #d0498a;
-    outline-color: #e3d9ba;
-    box-shadow: none; }
-    .btn-readmore:hover:before, .btn-readmore:active:before, .btn-readmore:visited:hover:before, .btn-readmore:visited:active:before, .btn-readmore:not(.disabled):not(:disabled):hover:before, .btn-readmore:not(.disabled):not(:disabled):active:before, .btn-link:hover:before, .btn-link:active:before, .btn-link:visited:hover:before, .btn-link:visited:active:before, .btn-link:not(.disabled):not(:disabled):hover:before, .btn-link:not(.disabled):not(:disabled):active:before {
-      background-color: #e3d9ba; }
-  .btn-readmore:not(:hover), .btn-link:not(:hover) {
-    border-color: transparent; }
+    color: var(--link-color); }
+  .btn-readmore::before, .btn-link::before {
+    background-color: transparent; }
+  .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; }
@@ -1173,100 +490,49 @@ strong.btn-fake {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0; }
 
-/* ------------------ BREADCRUMB ------------------- */
 ul.breadcrumb, ol.breadcrumb, .breadcrumb {
-  padding-top: 0em;
+  border: 0px solid rgba(0, 0, 0, 0.3);
+  border-radius: 0px 0px 0px 0px;
+  position: relative;
+  z-index: 1;
+  overflow: visible;
   background-color: transparent;
-  margin: 0;
-  padding-bottom: 1.6rem;
+  background-color: #eee8d5;
+  padding: 0.8em;
+  margin: 0 0 1.6rem;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   list-style: none; }
+  ul.breadcrumb:before, ol.breadcrumb:before, .breadcrumb:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: -0.8em;
+    right: -0.8em;
+    bottom: 0;
+    z-index: -1;
+    transform: skewX(-15deg);
+    transition: background-color 0.3s; }
+  ul.breadcrumb::before, ol.breadcrumb::before, .breadcrumb::before {
+    background-color: #eee8d5; }
   ul.breadcrumb li, ol.breadcrumb li, .breadcrumb li {
     margin: 0; }
 
-.breadcrumb li.breadcrumb-item {
-  padding: 0;
-  margin: 0; }
-  .breadcrumb li.breadcrumb-item:not(:first-child) {
-    margin: 0 0 0 1rem !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: 0px 0px 0px 0px;
-    position: relative;
-    z-index: 1;
-    overflow: visible;
-    background-color: transparent;
-    transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-    font-weight: 400;
-    background-color: #eee8d5;
-    outline-color: #eee8d5;
-    color: #073642;
-    margin: 0 0 0 0;
-    outline-color: #e3d9ba !important;
-    text-decoration: none; }
-    .breadcrumb li.breadcrumb-item a:before, .breadcrumb li.breadcrumb-item > span:before {
-      content: " ";
-      position: absolute;
-      top: 0;
-      left: -0.8em;
-      right: -0.8em;
-      bottom: 0;
-      z-index: -1;
-      transform: skewX(-15deg);
-      transition: background-color 0.3s; }
-    .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:before, .breadcrumb li.breadcrumb-item > span:before {
-      background-color: #eee8d5; }
-    .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item > span:visited {
-      background-color: #eee8d5;
-      color: #073642; }
-      .breadcrumb li.breadcrumb-item a:visited:before, .breadcrumb li.breadcrumb-item > span:visited:before {
-        background-color: #eee8d5; }
-    .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: #e3d9ba;
-      color: #094959;
-      outline-color: #e3d9ba;
-      box-shadow: none; }
-      .breadcrumb li.breadcrumb-item a:hover:before, .breadcrumb li.breadcrumb-item a:active:before, .breadcrumb li.breadcrumb-item a:visited:hover:before, .breadcrumb li.breadcrumb-item a:visited:active:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item > span:hover:before, .breadcrumb li.breadcrumb-item > span:active:before, .breadcrumb li.breadcrumb-item > span:visited:hover:before, .breadcrumb li.breadcrumb-item > span:visited:active:before, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):active:before {
-        background-color: #e3d9ba; }
-    .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active {
-      background-color: #0f7e84;
-      outline-color: #0f7e84;
-      color: #FDF7E7; }
-      .breadcrumb li.breadcrumb-item a.active:before, .breadcrumb li.breadcrumb-item > span.active:before {
-        background-color: #0f7e84; }
-      .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item > span.active:visited {
-        background-color: #0f7e84;
-        color: #FDF7E7; }
-        .breadcrumb li.breadcrumb-item a.active:visited:before, .breadcrumb li.breadcrumb-item > span.active:visited:before {
-          background-color: #0f7e84; }
-      .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: #0f7e84;
-        color: white;
-        outline-color: #0f7e84;
-        box-shadow: none; }
-        .breadcrumb li.breadcrumb-item a.active:hover:before, .breadcrumb li.breadcrumb-item a.active:active:before, .breadcrumb li.breadcrumb-item a.active:visited:hover:before, .breadcrumb li.breadcrumb-item a.active:visited:active:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active:before, .breadcrumb li.breadcrumb-item > span.active:hover:before, .breadcrumb li.breadcrumb-item > span.active:active:before, .breadcrumb li.breadcrumb-item > span.active:visited:hover:before, .breadcrumb li.breadcrumb-item > span.active:visited:active:before, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover:before, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active:before {
-          background-color: #0f7e84; }
-  .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; }
+
+.badge {
+  line-height: 1.5em;
+  padding-left: 0.4em;
+  padding-right: 0.4em;
+  text-decoration: none !important;
+  background-color: var(--accent-color);
+  color: var(--text-color-contrast); }
 
 nav.pagination {
   padding-bottom: 1.6rem; }
@@ -1274,26 +540,14 @@ nav.pagination {
     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;
     border: 0px solid rgba(0, 0, 0, 0.3);
     border-radius: 0px 0px 0px 0px;
     position: relative;
     z-index: 1;
     overflow: visible;
     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.2em;
-    margin-left: 0.2em;
+    padding: 0.2em 0.4em;
+    margin: 0.2em;
     text-decoration: none; }
     nav.pagination .page-numbers:before, nav.pagination .next:before, nav.pagination .prev:before {
       content: " ";
@@ -1305,42 +559,19 @@ nav.pagination {
       z-index: -1;
       transform: skewX(-15deg);
       transition: background-color 0.3s; }
-    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):not(.dots), nav.pagination .next:not(.current):not(.dots), nav.pagination .prev:not(.current):not(.dots) {
-      background-color: #eee8d5;
-      outline-color: #eee8d5;
-      color: #073642;
-      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
-      outline-color: #cbcdbf; }
-      nav.pagination .page-numbers:not(.current):not(.dots):before, nav.pagination .next:not(.current):not(.dots):before, nav.pagination .prev:not(.current):not(.dots):before {
-        background-color: #eee8d5; }
-      nav.pagination .page-numbers:not(.current):not(.dots):visited, nav.pagination .next:not(.current):not(.dots):visited, nav.pagination .prev:not(.current):not(.dots):visited {
-        background-color: #eee8d5;
-        color: #073642; }
-        nav.pagination .page-numbers:not(.current):not(.dots):visited:before, nav.pagination .next:not(.current):not(.dots):visited:before, nav.pagination .prev:not(.current):not(.dots):visited:before {
-          background-color: #eee8d5; }
-      nav.pagination .page-numbers:not(.current):not(.dots):hover, nav.pagination .page-numbers:not(.current):not(.dots):active, nav.pagination .page-numbers:not(.current):not(.dots):visited:hover, nav.pagination .page-numbers:not(.current):not(.dots):visited:active, nav.pagination .page-numbers:not(.current):not(.dots):not(.disabled):not(:disabled):hover, nav.pagination .page-numbers:not(.current):not(.dots):not(.disabled):not(:disabled):active, nav.pagination .next:not(.current):not(.dots):hover, nav.pagination .next:not(.current):not(.dots):active, nav.pagination .next:not(.current):not(.dots):visited:hover, nav.pagination .next:not(.current):not(.dots):visited:active, nav.pagination .next:not(.current):not(.dots):not(.disabled):not(:disabled):hover, nav.pagination .next:not(.current):not(.dots):not(.disabled):not(:disabled):active, nav.pagination .prev:not(.current):not(.dots):hover, nav.pagination .prev:not(.current):not(.dots):active, nav.pagination .prev:not(.current):not(.dots):visited:hover, nav.pagination .prev:not(.current):not(.dots):visited:active, nav.pagination .prev:not(.current):not(.dots):not(.disabled):not(:disabled):hover, nav.pagination .prev:not(.current):not(.dots):not(.disabled):not(:disabled):active {
-        background-color: #cbcdbf;
-        color: #094959;
-        outline-color: #cbcdbf;
-        box-shadow: none; }
-        nav.pagination .page-numbers:not(.current):not(.dots):hover:before, nav.pagination .page-numbers:not(.current):not(.dots):active:before, nav.pagination .page-numbers:not(.current):not(.dots):visited:hover:before, nav.pagination .page-numbers:not(.current):not(.dots):visited:active:before, nav.pagination .page-numbers:not(.current):not(.dots):not(.disabled):not(:disabled):hover:before, nav.pagination .page-numbers:not(.current):not(.dots):not(.disabled):not(:disabled):active:before, nav.pagination .next:not(.current):not(.dots):hover:before, nav.pagination .next:not(.current):not(.dots):active:before, nav.pagination .next:not(.current):not(.dots):visited:hover:before, nav.pagination .next:not(.current):not(.dots):visited:active:before, nav.pagination .next:not(.current):not(.dots):not(.disabled):not(:disabled):hover:before, nav.pagination .next:not(.current):not(.dots):not(.disabled):not(:disabled):active:before, nav.pagination .prev:not(.current):not(.dots):hover:before, nav.pagination .prev:not(.current):not(.dots):active:before, nav.pagination .prev:not(.current):not(.dots):visited:hover:before, nav.pagination .prev:not(.current):not(.dots):visited:active:before, nav.pagination .prev:not(.current):not(.dots):not(.disabled):not(:disabled):hover:before, nav.pagination .prev:not(.current):not(.dots):not(.disabled):not(:disabled):active:before {
-          background-color: #cbcdbf; }
+      outline-color: var(--accent-color);
+      color: var(--link-color); }
+      nav.pagination .page-numbers:not(.current):not(.dots):hover::before, nav.pagination .next:not(.current):not(.dots):hover::before, nav.pagination .prev:not(.current):not(.dots):hover::before {
+        background-color: var(--link-color-hover); }
     nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current {
       background-color: #CB357D;
       color: #FDF7E7; }
       nav.pagination .page-numbers.current::before, nav.pagination .next.current::before, nav.pagination .prev.current::before {
         background-color: #CB357D; }
 
-/*
- * 2. Cards and containers
- * All elements that are supposed to contain other stuff
- *
- *
-*/
 .card {
-  border-radius: 0px 0px 0px 0px;
+  border-radius: 3px 3px 3px 3px;
   background-color: #eee8d5;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
   border: none;
@@ -1363,15 +594,12 @@ nav.pagination {
   .card-body {
     padding: 0 !important; }
   .card-header {
+    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;
-    padding-left: 1.6em;
-    padding-right: 1.6em;
+    padding: 1em 1.6em;
     padding-bottom: 1em !important;
-    margin: 0px;
-    margin-bottom: 0.8em;
-    margin-top: 0.8em;
+    margin: 0.8em 0px;
     line-height: 1;
     position: relative;
     left: 0px;
@@ -1383,7 +611,8 @@ nav.pagination {
     overflow: visible;
     background-color: transparent;
     border-radius: 0;
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
+    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:before {
       content: " ";
       position: absolute;
@@ -1395,23 +624,16 @@ nav.pagination {
       transform: skewX(-15deg);
       transition: background-color 0.3s; }
     .card-header:first-child {
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px; }
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px; }
     .card-header:last-child {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px; }
-    .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: #FDF7E7;
-      font-weight: 300;
-      line-height: 1.6em; }
-    .card-header .fa {
-      margin-right: 0.5em; }
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px; }
+    .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 {
   padding: 0;
   margin: 0; }
@@ -1440,53 +662,6 @@ ul.card-list, .card > ul {
 .list-success li.list-element::before {
   color: #859900; }
 
-.smallcard-header {
-  font-size: 1em;
-  font-weight: 600;
-  padding: 1em;
-  padding-left: 1.6em;
-  padding-right: 1.6em;
-  padding-bottom: 1em !important;
-  margin: 0px;
-  margin-bottom: 0.8em;
-  margin-top: 0.8em;
-  line-height: 1;
-  position: relative;
-  left: 0px;
-  width: 85%;
-  border: 0px solid rgba(0, 0, 0, 0.3);
-  border-radius: 0px 0px 0px 0px;
-  position: relative;
-  z-index: 1;
-  overflow: visible;
-  background-color: transparent;
-  border-radius: 0; }
-  .smallcard-header:before {
-    content: " ";
-    position: absolute;
-    top: 0;
-    left: -1em;
-    right: -1em;
-    bottom: 0;
-    z-index: -1;
-    transform: skewX(-15deg);
-    transition: background-color 0.3s; }
-  .smallcard-header:first-child {
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px; }
-  .smallcard-header:last-child {
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px; }
-  .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: #FDF7E7;
-    font-weight: 300;
-    line-height: 1.6em; }
-
-/* Menu handling */
 .menu {
   display: flex;
   flex-direction: column; }
@@ -1497,12 +672,6 @@ ul.card-list, .card > ul {
     margin: 0; }
   .menu a,
   .menu a:visited {
-    border: 0px solid rgba(0, 0, 0, 0.3);
-    border-radius: 0px 0px 0px 0px;
-    position: relative;
-    z-index: 1;
-    overflow: visible;
-    background-color: transparent;
     display: flex;
     line-height: 1.6em;
     padding: 0.4em;
@@ -1512,55 +681,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: 0px 0px 0px 0px;
-    position: relative;
-    z-index: 1;
-    overflow: visible;
-    background-color: transparent; }
-    .menu a:before,
-    .menu a:visited:before {
-      content: " ";
-      position: absolute;
-      top: 0;
-      left: -0.4rem;
-      right: -0.4rem;
-      bottom: 0;
-      z-index: -1;
-      transform: skewX(-15deg);
-      transition: background-color 0.3s; }
-    .menu a:before,
-    .menu a:visited:before {
-      content: " ";
-      position: absolute;
-      top: 0;
-      left: -0.4rem;
-      right: -0.4rem;
-      bottom: 0;
-      z-index: -1;
-      transform: skewX(-15deg);
-      transition: background-color 0.3s; }
-    .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: #FDF7E7;
-    outline-color: #FDF7E7; }
-    .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(253, 247, 231, 0.3); }
-  .menu.fg-light input, .fg-light .menu input {
-    outline-color: #FDF7E7; }
-  .menu.fg-dark a, .fg-dark .menu a {
-    color: #073642;
-    outline-color: #073642; }
-    .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(7, 54, 66, 0.15); }
-  .menu.fg-dark input, .fg-dark .menu input {
-    outline-color: #073642; }
+  .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;
@@ -1582,9 +711,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;
@@ -1594,14 +721,15 @@ ul.card-list, .card > ul {
       left: 0;
       display: none;
       padding: 0.33rem;
-      z-index: 2; }
+      z-index: 2;
+      background-color: #eee8d5; }
     .toolbar li:hover ul,
     .toolbar li ul:hover, .toolbar li:focus-within ul {
       visibility: visible;
       opacity: 1;
       display: flex;
       flex-direction: column;
-      border-radius: 0px;
+      border-radius: 3px;
       box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
       width: max-content; }
       .toolbar li:hover ul li,
@@ -1622,54 +750,30 @@ ul.menu h2 {
   line-height: 1.6em; }
 
 .menu-label {
-  border: 0px solid rgba(0, 0, 0, 0.3);
-  border-radius: 0px 0px 0px 0px;
-  position: relative;
-  z-index: 1;
-  overflow: visible;
-  background-color: transparent;
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
   padding-left: 0.4em;
   padding-right: 0.4em; }
-  .menu-label:before {
-    content: " ";
-    position: absolute;
-    top: 0;
-    left: -0.2em;
-    right: -0.2em;
-    bottom: 0;
-    z-index: -1;
-    transform: skewX(-15deg);
-    transition: background-color 0.3s; }
   .menu-label:hover, .menu-label:active {
     background-color: transparent; }
 
-.toast {
-  border-radius: 0px 0px 0px 0px;
+blockquote, .quote, .well, pre, .pre, .well-pre, .toast, .code {
+  border: 0;
+  border-radius: 3px;
+  margin: 0 0 1.6rem 0;
+  padding: 1.6rem 1rem 1.6rem 1rem;
+  max-width: 100%;
+  font-style: italic;
   background-color: #eee8d5;
-  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: 0.8em; }
-    .toast > *:last-child {
-      margin-bottom: 0.4em; }
-      .toast > *:last-child.card-header {
-        margin-bottom: 0.8em; }
-  .toast a {
-    margin: 0; }
+  color: #073642;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
+
+.toast {
+  background-color: var(--accent-color);
+  color: var(--text-color-contrast); }
+
+code {
+  font-family: monospace, monospace; }
 
-/* TABLE
- * Style tables
-*/
 table {
   border-collapse: collapse; }
 
@@ -1705,19 +809,86 @@ input,
 textarea {
   width: 100%;
   background-color: #eee8d5;
-  border-radius: 0px;
+  border-radius: 3px;
   border: 0px solid rgba(0, 0, 0, 0);
   padding: 0.4em;
-  line-height: 1.6em; }
+  line-height: 1.6em;
+  overflow: auto; }
   .card input, .card textarea {
     background-color: #FDF7E7; }
 
-/* 1. Utils
-** All the utilities class of the stylesheet
-*/
-/* 1.0 - Accessibility classes
- * Some classes to help accessibility
-**/
+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"] {
+  -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;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px; }
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit; }
+
 .screen-reader-text, .sr-only {
   visibility: collapse;
   font-size: 0;
@@ -1737,9 +908,6 @@ textarea {
   width: auto;
   height: auto; }
 
-/* 1.1 - Alignement classes
- * Handle easily alignement and flexboxes
-**/
 .flex-that {
   display: flex;
   justify-content: space-between; }
@@ -1766,429 +934,63 @@ textarea {
   border-width: 0px;
   border-style: none; }
 
-/* 1.2 - Colorization classes
- * Colorize some aspect of a class
-**/
-.bg-primary {
-  background-color: #CB357D;
-  color: #FDF7E7; }
-  .bg-primary a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-primary:hover {
-    background-color: #CB357D;
-    color: #FDF7E7; }
-    .bg-primary:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-primary, .btn-primary, .head-primary, .text-primary {
+  --accent-color: #CB357D;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #ad2d6a; }
 
-.bg-secondary {
-  background-color: #0f7e84;
-  color: #FDF7E7; }
-  .bg-secondary a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-secondary:hover {
-    background-color: #0f7e84;
-    color: #FDF7E7; }
-    .bg-secondary:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-secondary, .btn-secondary, .head-secondary, .text-secondary {
+  --accent-color: #0f7e84;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #0b5d62; }
 
-.bg-warning {
-  background-color: #cb4b16;
-  color: #FDF7E7; }
-  .bg-warning a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-warning:hover {
-    background-color: #cb4b16;
-    color: #FDF7E7; }
-    .bg-warning:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-warning, .btn-warning, .head-warning, .text-warning {
+  --accent-color: #cb4b16;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #a83e12; }
 
-.bg-danger {
-  background-color: #dc322f;
-  color: #FDF7E7; }
-  .bg-danger a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-danger:hover {
-    background-color: #dc322f;
-    color: #FDF7E7; }
-    .bg-danger:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-danger, .btn-danger, .head-danger, .text-danger {
+  --accent-color: #dc322f;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #c42421; }
 
-.bg-info {
-  background-color: #0f7e84;
-  color: #FDF7E7; }
-  .bg-info a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-info:hover {
-    background-color: #0f7e84;
-    color: #FDF7E7; }
-    .bg-info:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-info, .btn-info, .head-info, .text-info {
+  --accent-color: #0f7e84;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #0b5d62; }
 
-.bg-success {
-  background-color: #859900;
-  color: #FDF7E7; }
-  .bg-success a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-success:hover {
-    background-color: #859900;
-    color: #FDF7E7; }
-    .bg-success:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-success, .btn-success, .head-success, .text-success {
+  --accent-color: #859900;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #647300; }
 
-.bg-muted {
-  background-color: #586e75;
-  color: #FDF7E7; }
-  .bg-muted a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-muted:hover {
-    background-color: #586e75;
-    color: #FDF7E7; }
-    .bg-muted:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-muted, .btn-muted, .head-muted, .text-muted {
+  --accent-color: #586e75;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #48595f; }
 
-.bg-light {
-  background-color: #FDF7E7;
-  color: #073642; }
-  .bg-light a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-light:hover {
-    background-color: #FDF7E7;
-    color: #073642; }
-    .bg-light:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.c-light, .btn-light, .head-light, .text-light {
+  --accent-color: #FDF7E7;
+  --text-color-contrast: #073642;
+  --accent-color-hover: #faebc4; }
 
-.bg-dark {
-  background-color: #002b36;
-  color: #FDF7E7; }
-  .bg-dark a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-dark:hover {
-    background-color: #002b36;
-    color: #FDF7E7; }
-    .bg-dark:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.text-primary {
-  color: #CB357D; }
-
-.text-secondary {
-  color: #0f7e84; }
-
-.text-warning {
-  color: #cb4b16; }
-
-.text-danger {
-  color: #dc322f; }
-
-.text-info {
-  color: #0f7e84; }
-
-.text-success {
-  color: #859900; }
-
-.text-muted {
-  color: #586e75; }
-
-.text-light {
-  color: #FDF7E7; }
-
-.text-dark {
-  color: #002b36; }
-
-.btn-primary {
-  background-color: #CB357D;
-  outline-color: #CB357D;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-primary:before {
-    background-color: #CB357D; }
-  .btn-primary:visited {
-    background-color: #CB357D;
-    color: #FDF7E7; }
-    .btn-primary:visited:before {
-      background-color: #CB357D; }
-  .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: #d3528d;
-    color: white;
-    outline-color: #d3528d;
-    box-shadow: none; }
-    .btn-primary:hover:before, .btn-primary:active:before, .btn-primary:visited:hover:before, .btn-primary:visited:active:before, .btn-primary:not(.disabled):not(:disabled):hover:before, .btn-primary:not(.disabled):not(:disabled):active:before {
-      background-color: #d3528d; }
-
-.btn-secondary {
-  background-color: #0f7e84;
-  outline-color: #0f7e84;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-secondary:before {
-    background-color: #0f7e84; }
-  .btn-secondary:visited {
-    background-color: #0f7e84;
-    color: #FDF7E7; }
-    .btn-secondary:visited:before {
-      background-color: #0f7e84; }
-  .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: #339093;
-    color: white;
-    outline-color: #339093;
-    box-shadow: none; }
-    .btn-secondary:hover:before, .btn-secondary:active:before, .btn-secondary:visited:hover:before, .btn-secondary:visited:active:before, .btn-secondary:not(.disabled):not(:disabled):hover:before, .btn-secondary:not(.disabled):not(:disabled):active:before {
-      background-color: #339093; }
-
-.btn-warning {
-  background-color: #cb4b16;
-  outline-color: #cb4b16;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-warning:before {
-    background-color: #cb4b16; }
-  .btn-warning:visited {
-    background-color: #cb4b16;
-    color: #FDF7E7; }
-    .btn-warning:visited:before {
-      background-color: #cb4b16; }
-  .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: #d36535;
-    color: white;
-    outline-color: #d36535;
-    box-shadow: none; }
-    .btn-warning:hover:before, .btn-warning:active:before, .btn-warning:visited:hover:before, .btn-warning:visited:active:before, .btn-warning:not(.disabled):not(:disabled):hover:before, .btn-warning:not(.disabled):not(:disabled):active:before {
-      background-color: #d36535; }
-
-.btn-danger {
-  background-color: #dc322f;
-  outline-color: #dc322f;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-danger:before {
-    background-color: #dc322f; }
-  .btn-danger:visited {
-    background-color: #dc322f;
-    color: #FDF7E7; }
-    .btn-danger:visited:before {
-      background-color: #dc322f; }
-  .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: #e1504b;
-    color: white;
-    outline-color: #e1504b;
-    box-shadow: none; }
-    .btn-danger:hover:before, .btn-danger:active:before, .btn-danger:visited:hover:before, .btn-danger:visited:active:before, .btn-danger:not(.disabled):not(:disabled):hover:before, .btn-danger:not(.disabled):not(:disabled):active:before {
-      background-color: #e1504b; }
-
-.btn-info {
-  background-color: #0f7e84;
-  outline-color: #0f7e84;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-info:before {
-    background-color: #0f7e84; }
-  .btn-info:visited {
-    background-color: #0f7e84;
-    color: #FDF7E7; }
-    .btn-info:visited:before {
-      background-color: #0f7e84; }
-  .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: #339093;
-    color: white;
-    outline-color: #339093;
-    box-shadow: none; }
-    .btn-info:hover:before, .btn-info:active:before, .btn-info:visited:hover:before, .btn-info:visited:active:before, .btn-info:not(.disabled):not(:disabled):hover:before, .btn-info:not(.disabled):not(:disabled):active:before {
-      background-color: #339093; }
-
-.btn-success {
-  background-color: #859900;
-  outline-color: #859900;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-success:before {
-    background-color: #859900; }
-  .btn-success:visited {
-    background-color: #859900;
-    color: #FDF7E7; }
-    .btn-success:visited:before {
-      background-color: #859900; }
-  .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: #97a723;
-    color: white;
-    outline-color: #97a723;
-    box-shadow: none; }
-    .btn-success:hover:before, .btn-success:active:before, .btn-success:visited:hover:before, .btn-success:visited:active:before, .btn-success:not(.disabled):not(:disabled):hover:before, .btn-success:not(.disabled):not(:disabled):active:before {
-      background-color: #97a723; }
-
-.btn-muted {
-  background-color: #586e75;
-  outline-color: #586e75;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-muted:before {
-    background-color: #586e75; }
-  .btn-muted:visited {
-    background-color: #586e75;
-    color: #FDF7E7; }
-    .btn-muted:visited:before {
-      background-color: #586e75; }
-  .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: #718386;
-    color: white;
-    outline-color: #718386;
-    box-shadow: none; }
-    .btn-muted:hover:before, .btn-muted:active:before, .btn-muted:visited:hover:before, .btn-muted:visited:active:before, .btn-muted:not(.disabled):not(:disabled):hover:before, .btn-muted:not(.disabled):not(:disabled):active:before {
-      background-color: #718386; }
-
-.btn-light {
-  background-color: #FDF7E7;
-  outline-color: #FDF7E7;
-  color: #073642;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-light:before {
-    background-color: #FDF7E7; }
-  .btn-light:visited {
-    background-color: #FDF7E7;
-    color: #073642; }
-    .btn-light:visited:before {
-      background-color: #FDF7E7; }
-  .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: #d8dace;
-    color: #094959;
-    outline-color: #d8dace;
-    box-shadow: none; }
-    .btn-light:hover:before, .btn-light:active:before, .btn-light:visited:hover:before, .btn-light:visited:active:before, .btn-light:not(.disabled):not(:disabled):hover:before, .btn-light:not(.disabled):not(:disabled):active:before {
-      background-color: #d8dace; }
-
-.btn-dark {
-  background-color: #002b36;
-  outline-color: #002b36;
-  color: #FDF7E7;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-dark:before {
-    background-color: #002b36; }
-  .btn-dark:visited {
-    background-color: #002b36;
-    color: #FDF7E7; }
-    .btn-dark:visited:before {
-      background-color: #002b36; }
-  .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: #264a51;
-    color: white;
-    outline-color: #264a51;
-    box-shadow: none; }
-    .btn-dark:hover:before, .btn-dark:active:before, .btn-dark:visited:hover:before, .btn-dark:visited:active:before, .btn-dark:not(.disabled):not(:disabled):hover:before, .btn-dark:not(.disabled):not(:disabled):active:before {
-      background-color: #264a51; }
-
-.head-primary .card-header, .head-primary .menu-header, .head-primary.header-bg th {
-  background-color: #CB357D;
-  color: #FDF7E7; }
-  .head-primary .card-header:before, .head-primary .menu-header:before, .head-primary.header-bg th:before {
-    background-color: #CB357D; }
-
-.head-primary th {
-  color: #CB357D; }
-
-.head-secondary .card-header, .head-secondary .menu-header, .head-secondary.header-bg th {
-  background-color: #0f7e84;
-  color: #FDF7E7; }
-  .head-secondary .card-header:before, .head-secondary .menu-header:before, .head-secondary.header-bg th:before {
-    background-color: #0f7e84; }
-
-.head-secondary th {
-  color: #0f7e84; }
-
-.head-warning .card-header, .head-warning .menu-header, .head-warning.header-bg th {
-  background-color: #cb4b16;
-  color: #FDF7E7; }
-  .head-warning .card-header:before, .head-warning .menu-header:before, .head-warning.header-bg th:before {
-    background-color: #cb4b16; }
-
-.head-warning th {
-  color: #cb4b16; }
-
-.head-danger .card-header, .head-danger .menu-header, .head-danger.header-bg th {
-  background-color: #dc322f;
-  color: #FDF7E7; }
-  .head-danger .card-header:before, .head-danger .menu-header:before, .head-danger.header-bg th:before {
-    background-color: #dc322f; }
-
-.head-danger th {
-  color: #dc322f; }
-
-.head-info .card-header, .head-info .menu-header, .head-info.header-bg th {
-  background-color: #0f7e84;
-  color: #FDF7E7; }
-  .head-info .card-header:before, .head-info .menu-header:before, .head-info.header-bg th:before {
-    background-color: #0f7e84; }
-
-.head-info th {
-  color: #0f7e84; }
-
-.head-success .card-header, .head-success .menu-header, .head-success.header-bg th {
-  background-color: #859900;
-  color: #FDF7E7; }
-  .head-success .card-header:before, .head-success .menu-header:before, .head-success.header-bg th:before {
-    background-color: #859900; }
-
-.head-success th {
-  color: #859900; }
-
-.head-muted .card-header, .head-muted .menu-header, .head-muted.header-bg th {
-  background-color: #586e75;
-  color: #FDF7E7; }
-  .head-muted .card-header:before, .head-muted .menu-header:before, .head-muted.header-bg th:before {
-    background-color: #586e75; }
-
-.head-muted th {
-  color: #586e75; }
-
-.head-light .card-header, .head-light .menu-header, .head-light.header-bg th {
-  background-color: #FDF7E7;
-  color: #073642; }
-  .head-light .card-header:before, .head-light .menu-header:before, .head-light.header-bg th:before {
-    background-color: #FDF7E7; }
-
-.head-light th {
-  color: #FDF7E7; }
-
-.head-dark .card-header, .head-dark .menu-header, .head-dark.header-bg th {
-  background-color: #002b36;
-  color: #FDF7E7; }
-  .head-dark .card-header:before, .head-dark .menu-header:before, .head-dark.header-bg th:before {
-    background-color: #002b36; }
-
-.head-dark th {
-  color: #002b36; }
+.c-dark, .btn-dark, .head-dark, .text-dark {
+  --accent-color: #002b36;
+  --text-color-contrast: #FDF7E7;
+  --accent-color-hover: #003b4a; }
 
 .fg-light {
-  color: #FDF7E7; }
+  --text-color:#FDF7E7;
+  --link-color-hover:rgba(253, 247, 231, 0.3); }
 
 .fg-dark {
-  color: #073642; }
+  color: #073642;
+  --text-color:#073642;
+  --link-color-hover:rgba(7, 54, 66, 0.15); }
 
-/* 1.3 - List classes
- * Handle more easily list
-**/
 .no-pills {
   list-style: none; }
 
-/* 1.3 - Sizing classes
- * Handle sizing and margin
-**/
 .m-half {
   margin: 0.8rem; }
 
@@ -2447,14 +1249,6 @@ textarea {
   @media (min-width: 1600px) {
     .d-flex-xxl {
       display: flex !important; } }
-/* 4 - Custom styling
- * Styles that are custom to this particular theme
-**/
-/* --- 03. GLOBAL STYLING --- */
-/*
- * Les styles "globaux" touchant toute la page.
- *
- */
 .no-pills {
   list-style: none; }
 
@@ -2479,7 +1273,6 @@ textarea {
       position: relative;
       top: 0px;
       right: 64px; } }
-/* ------------------ HEADERS ------------------- */
 #page-header {
   background: #0f7e84 url("img/background.png");
   border-top: 6px solid #002b36;
@@ -2541,7 +1334,6 @@ header h1 {
 .dropdown-menu {
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); }
 
-/* ------------------ CONTAINERS ------------------- */
 .container-big {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
@@ -2599,51 +1391,9 @@ 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: #FDF7E7; }
 
-/* ------------------ FOOTER ------------------- */
 body {
   background-color: #002b36; }
 
@@ -2703,11 +1453,6 @@ ul.social {
         color: #FDF7E7;
         background-color: #002b36; }
 
-/*
- * 4. Previews
- * Special style for previews cards
- *
-*/
 .preview-grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -2747,31 +1492,8 @@ ul.social {
   position: relative;
   height: 12.8rem; }
   .preview-link .card-header {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    font-size: 1em;
-    font-size: 1em;
-    font-weight: 600;
-    padding: 0.4rem;
-    padding-left: 1.6em;
-    padding-right: 1.6em;
+    padding: 0.4rem 1.6em;
     padding-bottom: 0.4rem !important;
-    margin: 0px;
-    margin-bottom: 0.8em;
-    margin-top: 0.8em;
-    line-height: 1;
-    position: relative;
-    left: 0px;
-    width: 85%;
-    border: 0px solid rgba(0, 0, 0, 0.3);
-    border-radius: 0px 0px 0px 0px;
-    position: relative;
-    z-index: 1;
-    overflow: visible;
-    background-color: transparent;
-    border-radius: 0;
-    background-color: #CB357D;
-    color: #FDF7E7;
-    font-weight: 600;
     position: absolute;
     margin: 0;
     top: 0.5rem;
@@ -2781,31 +1503,8 @@ ul.social {
     flex-direction: column;
     justify-content: center; }
     .preview-link .card-header:before {
-      content: " ";
-      position: absolute;
-      top: 0;
       left: -0.4rem;
-      right: -0.4rem;
-      bottom: 0;
-      z-index: -1;
-      transform: skewX(-15deg);
-      transition: background-color 0.3s; }
-    .preview-link .card-header:first-child {
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px; }
-    .preview-link .card-header:last-child {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px; }
-    .preview-link .card-header h1, .preview-link .card-header h2, .preview-link .card-header h3, .preview-link .card-header h4, .preview-link .card-header h5, .preview-link .card-header h6, .preview-link .card-header h7, .preview-link .card-header h8, .preview-link .card-header h9, .preview-link .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: #FDF7E7;
-      font-weight: 300;
-      line-height: 1.6em; }
-    .preview-link .card-header:before {
-      background-color: #CB357D; }
+      right: -0.4rem; }
 
 .preview-content {
   font-size: 0.9rem;
@@ -2826,7 +1525,7 @@ ul.social {
     padding-top: 0.4em;
     backdrop-filter: none;
     transition: background-color 0.3s, backdrop-filter 0.3s;
-    border-radius: 0px 0px 0px 0px; }
+    border-radius: 3px 3px 3px 3px; }
   .preview-content:hover .preview-overlay {
     backdrop-filter: blur(2px);
     background-color: rgba(0, 0, 0, 0.4); }
@@ -2842,7 +1541,7 @@ ul.social {
   background-size: cover;
   min-height: 100%;
   min-width: 100%;
-  border-radius: 0px 0px 0px 0px;
+  border-radius: 3px 3px 3px 3px;
   font-size: 0.85rem;
   line-height: 1.25rem;
   display: flex;
@@ -2877,7 +1576,7 @@ ul.social {
   color: #FDF7E7;
   height: 100%;
   overflow: hidden;
-  border-radius: 0px 0px 0px 0px; }
+  border-radius: 3px 3px 3px 3px; }
   .preview-metadata .metadata-pills {
     opacity: 0;
     transition: opacity .3s, height .3s;
@@ -2990,7 +1689,7 @@ ul.social {
 .cover {
   width: 100%;
   height: auto;
-  border-radius: 0px 0px 0px 0px; }
+  border-radius: 3px 3px 3px 3px; }
 
 @media (min-width: 768px) {
   .roman {
@@ -3004,7 +1703,7 @@ ul.social {
   .preview-featured .preview-link {
     display: block;
     padding: 0;
-    border-radius: 0px;
+    border-radius: 3px;
     overflow: hidden;
     text-decoration: none; }
     .preview-featured .preview-link .preview-item {
@@ -3036,7 +1735,7 @@ ul.social {
 .article .thumbnail img {
   width: 100%;
   aspect-ratio: 16 / 9;
-  border-radius: 0px;
+  border-radius: 3px;
   object-fit: cover; }
 
 .article-meta .author-area {