style: replace scss variable by css ones

Small documentation fixes

com/static/com/css/news-detail.scss

@@ -5,7 +5,6 @@
   margin-top: 20px;
   padding: 0.4em;
   width: 80%;
-  background: $white-color;
 
   h4 {
     margin-top: 1em;

com/static/com/css/news-list.scss

@@ -32,7 +32,7 @@
 
   h3 {
     --box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 3px 7px 2px;
-    background: lighten($second-color, 5%);
+    background: var(--bg-yellow);
     box-shadow: var(--box-shadow);
     padding: .75rem;
     margin: 0 0 0.5em 0;
@@ -85,7 +85,7 @@
 
     #links_content {
       overflow: auto;
-      box-shadow: $shadow-color 1px 1px 1px;
+      box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
       min-height: 20em;
       padding: 1em;
 
@@ -111,7 +111,7 @@
     }
 
     #birthdays_content {
-      box-shadow: $shadow-color 1px 1px 1px;
+      box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
       padding: 1em;
 
       ul.birthdays_year {
@@ -123,7 +123,7 @@
           padding: 0.5em;
 
           &:nth-child(even) {
-            background: $secondary-neutral-light-color;
+            background: var(--bg-off-white);
           }
         }
 
@@ -141,7 +141,7 @@
 
   /* EVENTS TODAY AND NEXT FEW DAYS */
   .news_events_group {
-    box-shadow: $shadow-color 1px 1px 1px;
+    box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
     margin-left: 0;
     margin-bottom: 0.5em;
 
@@ -153,8 +153,8 @@
       display: table-cell;
       padding: 0.6em;
       vertical-align: middle;
-      background: $primary-neutral-dark-color;
+      background: var(--deepblue);
-      color: $white-color;
+      color: var(--text-white);
       text-transform: uppercase;
       text-align: center;
       font-weight: bold;
@@ -180,7 +180,7 @@
       }
 
       .news_event:nth-of-type(even) {
-        background: $primary-neutral-light-color;
+        background: var(--bg-white);
       }
 
       .news_event {

core/static/core/colors.scss

@@ -1,42 +1,38 @@
-$first-color: hsl(220, 100%, 50%);
+/**
-$second-color: hsl(48, 100%, 67%);
+ * Sith theme variables
-$primary-color: hsl(219.9, 53.7%, 50%);
+ */
-$secondary-color: hsl(204, 64%, 44%);
+:root {
-$primary-color-text: hsl(0, 0%, 100%);
+  --bg-yellow: #ffe270;
-$secondary-color-text: hsla(0, 0%, 0%, 0.87);
+  --bg-white: #f9fafb;
+  --bg-off-white: #f0f0f0;
+  --bg-darkened-off-white: #e3e3e3;
+  --bg-lightgrey: #d4d4d4;
 
-$primary-light-color: hsl(219.8, 46.4%, 64.9%);
+  --text-white: #f9fafb;
-$primary-dark-color: hsl(203, 75%, 40%);
+  --text-black: #2b2b2b;
+  --text-red: #eb2f06;
 
-$secondary-light-color: hsl(40, 68%, 65%);
+  --blue: #3b69c4;
-$secondary-dark-color: hsl(40, 68%, 35%);
+  --lightblue: #1a78b3;
-
+  // darkened-deepblue is 10% darker than deepblue
-$primary-neutral-color: hsl(219.6, 20.8%, 50%);
+  // This is explicitely declared, because the `darken` scss function
-$primary-neutral-light-color: hsl(0, 0%, 94%);
+  // isn't called at compile-time somehow.
-$primary-neutral-dark-color: hsl(210, 29%, 29%);
+  --deepblue: #354a5f;
-
+  --darkened-deepblue: #23313e;
-$secondary-neutral-color: hsl(204, 64%, 44%);
+}
-$secondary-neutral-light-color: hsl(0, 0%, 91%);
-$secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
-
-$white-color: hsl(219.6, 20.8%, 98%);
-$black-color: hsl(0, 0%, 17%);
-$red-text-color: #eb2f06;
-$hovered-red-text-color: #ff4d4d;
 
+/**
+ * Brand colours.
+ * Those are officially defined by their respective companies,
+ * and so are more appropriate as scss variables.
+ */
 $faceblue: hsl(221, 44%, 41%);
 $twitblue: hsl(206, 82%, 63%);
 $discordblurple: #7289da;
 $instagradient: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
 $githubblack: rgb(22, 22, 20);
 
-$shadow-color: rgb(223, 223, 223);
-
-$background-button-color: hsl(0, 0%, 95%);
-
-$deepblue: #354a5f;
-
 @mixin shadow {
   box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
-              rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
+  rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
 }

core/static/core/components/card.scss

@@ -17,7 +17,7 @@
 }
 
 .card {
-  background-color: $primary-neutral-light-color;
+  background-color: var(--bg-off-white);
   border-radius: 5px;
   position: relative;
   box-sizing: border-box;
@@ -30,12 +30,12 @@
   gap: 20px;
 
   &:disabled {
-    background-color: darken($primary-neutral-light-color, 5%);
+    background-color: var(--bg-darkened-off-white);
     opacity: 65%;
   }
 
   &.clickable:not(:disabled):hover {
-    background-color: darken($primary-neutral-light-color, 5%);
+    background-color: var(--bg-darkened-off-white);
   }
 
   &.selected {

core/static/core/components/tabs.scss

@@ -11,7 +11,7 @@ ui-tab-group {
     .tab-headers {
       display: flex;
       flex-flow: row wrap;
-      background-color: $primary-neutral-light-color;
+      background-color: var(--bg-off-white);
       padding: 3px 12px 12px;
       column-gap: 20px;
       border-top-left-radius: 5px;
@@ -25,23 +25,27 @@ ui-tab-group {
         background-color: unset;
         position: relative;
 
+        &:hover {
+          background-color: var(--bg-lightgrey);
+        }
+
         &:after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
-          border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
+          border-bottom: 4px solid var(--bg-lightgrey);
           border-radius: 2px;
           transition: all 0.2s ease-in-out;
         }
 
         &:hover:after {
-          border-bottom-color: darken($primary-neutral-light-color, 20%);
+          filter: brightness(85%);
         }
 
         &.active:after {
-          border-bottom-color: $primary-dark-color;
+          border-bottom-color: var(--lightblue);
         }
       }
     }

core/static/core/footer.scss

@@ -9,7 +9,7 @@ footer.bottom-links {
   @media (max-width: $small-devices) {
     margin-top: 0.6em;
     padding: 1.25em;
-    background-color: $primary-neutral-dark-color;
+    background-color: var(--deepblue);
 
     display: flex;
     flex-direction: column;
@@ -28,24 +28,24 @@ footer.bottom-links {
     }
 
     a {
-      color: $white-color;
+      color: var(--text-white);
       width: auto;
 
       &:hover {
-        color: $white-color;
+        color: var(--text-white);
-        text-shadow: 0.5px 0.5px 0.5px $shadow-color;
+        text-shadow: 0.5px 0.5px 0.5px var(--bg-darkened-off-white);
       }
     }
 
     .fa-github {
-      color: $white-color;
+      color: var(--text-white);
     }
 
     hr {
       width: 100%;
-      height: 0px;
+      height: 0;
       border: none;
-      border-top: 0.5px solid $white-color;
+      border-top: 0.5px solid var(--bg-white);
     }
   }
 
@@ -59,24 +59,22 @@ footer.bottom-links {
 
     section:first-of-type {
       margin: 0.6em 0;
-      color: $white-color;
+      color: var(--text-white);
       border-radius: 5px;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      background-color: $primary-neutral-dark-color;
+      background-color: var(--deepblue);
-      box-shadow: $shadow-color 0 0 15px;
+      box-shadow: var(--bg-white) 0 0 15px;
 
       a {
-        color: $white-color;
         width: auto;
         padding: 0.8em;
         flex: 1;
         font-weight: bold;
 
         &:hover {
-          color: $white-color;
+          text-shadow: 0.5px 0.5px 0.5px var(--bg-white);
-          text-shadow: 0.5px 0.5px 0.5px $shadow-color;
         }
       }
     }

core/static/core/forms.scss

@@ -16,7 +16,6 @@
   input[type="file"] {
     border: none;
     text-decoration: none;
-    background-color: $background-button-color;
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.2em;
@@ -24,7 +23,7 @@
     color: black;
 
     &:not(.link-like):not(:disabled):hover {
-      background: hsl(0, 0%, 83%);
+      background: var(--bg-lightgrey);
     }
   }
 
@@ -53,7 +52,7 @@
   .ts-control {
     border: none;
     text-decoration: none;
-    background-color: $background-button-color;
+    //background-color: $background-button-color;
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.2em;
@@ -64,7 +63,7 @@
   textarea {
     border: none;
     text-decoration: none;
-    background-color: $background-button-color;
+    //background-color: $background-button-color;
     padding: 7px;
     font-size: 1.2em;
     border-radius: 5px;
@@ -75,7 +74,7 @@
     border: none;
     text-decoration: none;
     font-size: 1.2em;
-    background-color: $background-button-color;
+    //background-color: $background-button-color;
     padding: 10px;
     border-radius: 5px;
     cursor: pointer;
@@ -83,14 +82,14 @@
 
   a:not(.button) {
     text-decoration: none;
-    color: $primary-dark-color;
+    color: var(--lightblue);
 
     &:hover {
-      color: $primary-light-color;
+      color: var(--blue);
     }
 
     &:active {
-      color: $primary-color;
+      color: var(--blue);
     }
   }
 }
@@ -762,16 +761,13 @@ form {
   // a submit input that should look like a regular <a>
   input[type="submit"], button {
     &.link-like {
-      color: $primary-dark-color;
+      color: var(--lightblue);
       &:hover {
-        color: $primary-light-color;
+        color: var(--blue);
       }
 
       &.link-red {
-        color: $red-text-color;
+        color: var(--text-red);
-        &:hover {
-          color: $hovered-red-text-color;
-        }
       }
       font-weight: normal;
       font-size: 100%;

core/static/core/header.scss

@@ -7,7 +7,7 @@ $background-color-hovered: #283747;
 
 .header {
   box-sizing: border-box;
-  background-color: $deepblue;
+  background-color: var(--deepblue);
   box-shadow: 3px 3px 3px 0 #dfdfdf;
   border-radius: 0;
   width: 100%;
@@ -96,7 +96,7 @@ $background-color-hovered: #283747;
         border-radius: 0;
         margin: 0;
         box-sizing: border-box;
-        background-color: $deepblue;
+        background-color: var(--deepblue);
         width: 45px;
         height: 25px;
         padding: 0;
@@ -212,7 +212,7 @@ $background-color-hovered: #283747;
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
-          background-color: $deepblue;
+          background-color: var(--deepblue);
         }
 
         >.options {
@@ -298,7 +298,7 @@ $background-color-hovered: #283747;
             width: 10px;
             height: 10px;
             padding: 5px;
-            background-color: $red-text-color;
+            background-color: var(--text-red);
             border-radius: 50%;
             position: absolute;
             top: -50%;

core/static/core/markdown.scss

@@ -1,7 +1,4 @@
 .markdown {
-  --bg-lightgrey: rgb(240, 241, 245);
-  --border-lightgrey: rgb(215, 216, 220);
-
   h1,
   h2,
   h3,
@@ -28,8 +25,8 @@
     font-size: 14px;
     tab-size: 4;
     border-radius: 4px;
-    border: 1px solid var(--border-lightgrey);
+    border: 1px solid var(--bg-lightgrey);
-    background-color: var(--bg-lightgrey);
+    background-color: var(--bg-off-white);
     padding: 1px 2px;
   }
 

core/static/core/navbar.scss

@@ -3,7 +3,7 @@
 $desktop-size: 500px;
 
 nav.navbar {
-  background-color: $primary-dark-color;
+  background-color: var(--lightblue);
   margin: 1em;
   color: white;
   border-radius: 0.6em;

core/static/core/pagination.scss

@@ -6,27 +6,21 @@
   margin: 30px;
 
   button {
-    background-color: $secondary-neutral-light-color;
+    background-color: var(--bg-off-white);
     min-width: 37px;
 
     &:hover {
-      background-color: darken($secondary-neutral-light-color, 10%);
+      background-color: var(--bg-lightgrey);
-    }
-
-    &:disabled {
-      color: #fff;
-      background-color: darken($secondary-neutral-light-color, 5%);
     }
 
     &.active,
     &.active:hover {
-      background-color: $primary-neutral-color;
+      background-color: var(--deepblue);
       color: white;
       border-radius: 50%;
     }
 
-    &:first-of-type,
+    .pagination-arrow {
-    &:last-of-type {
       // previous and next buttons
       &:disabled {
         // Hide the arrows when they are disabled, without

core/static/core/style.scss

@@ -57,7 +57,7 @@ body {
 
   .collapse-header {
     color: white;
-    background-color: $deepblue;
+    background-color: var(--deepblue);
     padding: 5px 10px;
     display: flex;
     align-items: center;
@@ -141,7 +141,7 @@ body {
   }
 
   #info_box {
-    background: $primary-neutral-light-color;
+    background: var(--bg-off-white);
 
     &:before {
       content: "\f05a";
@@ -150,11 +150,11 @@ body {
   }
 
   #alert_box {
-    background: $second-color;
+    background: var(--bg-yellow);
 
     &:before {
       content: "\f06a";
-      color: $white-color;
+      color: var(--text-white);
     }
   }
 }
@@ -189,10 +189,10 @@ body {
     border-radius: 5px;
 
     &.btn-blue {
-      background-color: $deepblue;
+      background-color: var(--deepblue);
 
       &:not(:disabled):hover {
-        background-color: darken($deepblue, 10%);
+        background-color: var(--darkened-deepblue);
       }
 
       &:disabled {
@@ -215,7 +215,7 @@ body {
     &.btn-green {
       $bg-color: rgba(0, 210, 83, 0.4);
       background-color: $bg-color;
-      color: $black-color;
+      color: var(--text-black);
 
       &:not(:disabled):hover {
         background-color: darken($bg-color, 15%);
@@ -272,8 +272,8 @@ body {
   /*--------------------------------CONTENT------------------------------*/
   #content {
     padding: 1.5em 3%;
-    box-shadow: $shadow-color 0 5px 10px;
+    box-shadow: var(--bg-darkened-off-white) 0 5px 10px;
-    background: $white-color;
+    background: var(--bg-white);
     overflow: auto;
   }
 
@@ -343,7 +343,7 @@ body {
       display: flex;
       flex-wrap: wrap;
       float: right;
-      background: $primary-neutral-light-color;
+      background: var(--bg-off-white);
       padding: 5px;
       border-radius: 6px;
       text-align: center;
@@ -351,7 +351,7 @@ body {
       a {
         padding: 7px;
         display: inline-block;
-        color: $black-color;
+        color: var(--text-black);
         font-weight: bold;
         margin: 2px;
         flex: 1;
@@ -359,14 +359,14 @@ body {
         white-space: nowrap;
 
         &.selected_tab {
-          background: $primary-color;
+          background: var(--blue);
-          color: $white-color;
+          color: var(--text-white);
           border-radius: 6px;
         }
 
         &:hover {
-          background: $primary-color;
+          background: var(--blue);
-          color: $white-color;
+          color: var(--text-white);
           border-radius: 6px;
         }
       }
@@ -556,23 +556,23 @@ thead td {
 }
 
 thead {
-  background-color: $deepblue;
+  background-color: var(--deepblue);
   color: white;
 }
 
 tbody>tr {
   &:nth-child(even):not(.highlight) {
-    background: $primary-neutral-light-color;
+    background: var(--bg-off-white);
   }
 
   &.clickable:hover {
     cursor: pointer;
-    background: $secondary-neutral-light-color;
+    background: var(--bg-lightgrey);
     width: 100%;
   }
 
   &.highlight {
-    color: $primary-dark-color;
+    color: var(--lightblue);
     font-style: italic;
   }
 }
@@ -598,7 +598,7 @@ em {
 }
 
 .highlight {
-  background: $second-color;
+  background: var(--bg-yellow);
   font-weight: bold;
 }
 
@@ -700,15 +700,15 @@ u,
     height: 18em;
     overflow: hidden;
     border: 1px solid black;
-    box-shadow: $shadow-color 1px 1px 1px;
+    box-shadow: var(--bg-darkened-off-white) 1px 1px 1px;
 
     &:hover {
-      box-shadow: 1px 1px 5px $second-color;
+      box-shadow: 1px 1px 5px var(--bg-yellow);
     }
   }
 
   .matmat_user a {
-    color: $primary-neutral-dark-color;
+    color: var(--deepblue);
     height: 100%;
     width: 100%;
     margin: 0;
@@ -723,7 +723,6 @@ u,
   display: block;
   margin: 10px;
   padding: 10px;
-  background: $white-color;
 }
 
 textarea {

core/static/user/user_detail.scss

@@ -71,7 +71,7 @@ main {
         border-radius: 50%;
         justify-content: center;
         align-items: center;
-        background-color: $primary-neutral-light-color;
+        background-color: var(--bg-white);
 
         > span {
           font-size: small;

core/static/user/user_godfathers.scss

@@ -62,7 +62,7 @@
         }
 
         &:enabled>.fa {
-          background-color: #354a5f;
+          background-color: var(--deepblue);
           color: white;
         }
 

core/templates/core/macros.jinja

@@ -102,6 +102,7 @@
       @click.prevent="{{ page }}--"
       :disabled="{{ page }} <= 1"
       @keyup.right.window="{{ page }} = Math.min({{ nb_pages }}, {{ page }} + 1)"
+      class="pagination-arrow"
     >
       <i class="fa fa-caret-left"></i>
     </button>
@@ -112,6 +113,7 @@
       @click.prevent="{{ page }}++"
       :disabled="{{ page }} >= {{ nb_pages }}"
       @keyup.left.window="{{ page }} = Math.max(1, {{ page }} - 1)"
+      class="pagination-arrow"
     >
       <i class="fa fa-caret-right"></i>
     </button>
@@ -163,12 +165,14 @@
           href="?{{ querystring(request, page=current_page.previous_page_number()) }}"
         {%- endif -%}
       >
-        <button>
+        <button class="pagination-arrow">
           <i class="fa fa-caret-left"></i>
         </button>
       </a>
     {% else %}
-      <button disabled="disabled"><i class="fa fa-caret-left"></i></button>
+      <button disabled="disabled" class="pagination-arrow">
+          <i class="fa fa-caret-left"></i>
+      </button>
     {% endif %}
     {% for i in paginator.get_elided_page_range(current_page.number) %}
       {% if i == current_page.number %}
@@ -201,12 +205,14 @@
         {%- else -%}
           href="?{{querystring(request, page=current_page.next_page_number())}}"
         {%- endif -%}
-      ><button>
+      ><button class="pagination-arrow">
         <i class="fa fa-caret-right"></i>
       </button>
       </a>
     {% else %}
-      <button disabled="disabled"><i class="fa fa-caret-right"></i></button>
+      <button disabled="disabled" class="pagination-arrow">
+          <i class="fa fa-caret-right"></i>
+      </button>
     {% endif %}
   </nav>
 {% endmacro %}

counter/static/counter/css/counter-click.scss

@@ -71,7 +71,7 @@
   padding: 0.5em;
   margin: 0.2em;
   height: 100%;
-  background: $secondary-neutral-light-color;
+  background: var(--bg-off-white);
 
   img {
     max-width: 70%;

docs/howto/terminal.md

@@ -48,7 +48,7 @@ des scripts complets mais qui restent lisibles,
     ```
     Ok, c'est de la triche, on installe un package externe.
     Mais bon, ça marche, et l'équivalent pur bash
-    serait carrément plus moche.
+    serait un pur enfer.
 
 === "nu"
 
@@ -59,20 +59,18 @@ des scripts complets mais qui restent lisibles,
 
     Nombre de lignes total :
     ```nu
-    ls **/*.py | insert linecount { get name | open | lines | length } | math sum
+    ls **/*.py | par-each { open $in.name | lines | length } | math sum
     ```
 
     Vous pouvez aussi exlure les lignes vides
     et les les lignes de commentaire :
     ```nu
     ls **/*.py |
-    insert linecount {
+    par-each {
-        get name |
+        open $in.name |
-        open |
         lines |
         each { str trim } |
-        filter { |l| not ($l | str starts-with "#") } |  # commentaires
+        where { |l| ($l | str length) > 0 and not ($l | str starts-with "#") } |
-        filter { |l| ($l | str length) > 0 } |  # lignes vides
         length
     } |
     math sum

docs/tutorial/install.md

@@ -18,7 +18,8 @@ il n'est pas possible de développer le site sur ce système d'exploitation.
 Heureusement, il existe une alternative qui ne requiert pas de désinstaller votre
 OS ni de mettre un dual boot sur votre ordinateur : `WSL`.
 
-- **Prérequis:** vous devez être sur Windows 10 version 2004 ou ultérieure (build 19041 & versions ultérieures) ou Windows 11.
+- **Prérequis:** vous devez être sur Windows 10 version 2004 ou ultérieure (build 19041 & versions ultérieures) ou
+  Windows 11.
 - **Plus d'info:** [docs.microsoft.com](https://docs.microsoft.com/fr-fr/windows/wsl/install)
 
 ```shell
@@ -43,7 +44,7 @@ il suffit d'utiliser la commande suivante :
 cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
 ```
 
-!!!note
+!!!success
 
     À ce stade, si vous avez réussi votre installation de `WSL` ou bien qu'il
     était déjà installé, vous pouvez effectuer la mise en place du projet en suivant
@@ -101,10 +102,10 @@ cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
         ln -s /usr/bin/valkey-server /usr/bin/redis-server
         ```
 
-
 === "macOS"
 
-    Pour installer les dépendances, il est fortement recommandé d'installer le gestionnaire de paquets `homebrew <https://brew.sh/index_fr>`_.  
+    Pour installer les dépendances, il est fortement recommandé 
+    d'installer le gestionnaire de paquets `homebrew <https://brew.sh/index_fr>`_.  
     Il est également nécessaire d'avoir installé xcode
     
     ```bash    
@@ -116,12 +117,15 @@ cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
     
     !!!note
     
-        Si vous rencontrez des erreurs lors de votre configuration, n'hésitez pas à vérifier l'état de votre installation homebrew avec :code:`brew doctor`
+        Si vous rencontrez des erreurs lors de votre configuration, 
+        n'hésitez pas à vérifier l'état de votre installation homebrew 
+        avec :code:`brew doctor`
 
 !!!note
 
     Python ne fait pas parti des dépendances puisqu'il est automatiquement
-    installé par uv. Il est cependant parfois nécessaire d'installer les headers Python nécessaire à la compilation de certains paquets.
+    installé par uv. Il est cependant parfois nécessaire d'installer 
+    les headers Python nécessaire à la compilation de certains paquets.
 
 ## Finaliser l'installation
 
@@ -145,7 +149,6 @@ uv run ./manage.py install_xapian
     de texte à l'écran.
     C'est normal, il ne faut pas avoir peur.
 
-
 La modification de la configuration passe par la modification de variables
 d'environnement.
 Ces variables sont stockées dans un fichier `.env`.
@@ -174,8 +177,8 @@ uv run ./manage.py compilemessages
 
 ## Démarrer le serveur de développement
 
-Il faut toujours avoir préalablement activé 
+Il faut toujours avoir préalablement activé
-l'environnement virtuel comme fait plus haut 
+l'environnement virtuel comme fait plus haut
 et se placer à la racine du projet.
 Il suffit ensuite d'utiliser cette commande :
 
@@ -183,11 +186,32 @@ Il suffit ensuite d'utiliser cette commande :
 uv run ./manage.py runserver
 ```
 
-!!!note
+Le serveur est alors accessible à l'adresse
+[http://localhost:8000](http://localhost:8000) 
+ou bien [http://127.0.0.1:8000/](http://127.0.0.1:8000/).
 
-    Le serveur est alors accessible à l'adresse
+Pour vous connecter, vous pouvez utiliser un des comptes utilisateur
-    [http://localhost:8000](http://localhost:8000) 
+créés durant l'installation :
-    ou bien [http://127.0.0.1:8000/](http://127.0.0.1:8000/).
+
+| username         | description                                                                |
+|------------------|----------------------------------------------------------------------------|
+| `root`           | super-utilisateur<br/>il peut tout faire et tout voir                      |
+| `subscriber`     | simple cotisant                                                            |
+| `old_subscriber` | ancien cotisant                                                            |
+| `public`         | non-cotisant                                                               |
+| `krophil`        | cotisant<br/>barman Foyer<br/>président du Troll Penché                    |
+| `sli`            | cotisant<br/>VP Troll                                                      |
+| `skia`           | cotisant<br/>barman MDE<br/>membre du bureau AE<br/>ancien membre du Troll |
+| `comunity`       | cotisant<br/>membre du bureau PdF<br/>admin communication                  |
+| `counter`        | cotisant<br/>admin comptoirs                                               |
+| `comptable`      | cotisant<br/>admin comptabilité                                            |
+| `rbatsbak`       | cotisant<br/>membre du Troll                                               |
+
+En plus de ces dernier, quelques centaines d'utilisateurs
+supplémentaires sont générés procéduralement,
+afin de rajouter un peu de volume de données.
+
+Tous les utilisateurs ont le mot de passe `plop`.
 
 !!!note
 
@@ -228,10 +252,10 @@ uv run ./manage.py runserver
 
 La documentation est automatiquement mise en ligne à chaque envoi de code sur GitHub.
 Pour l'utiliser en local ou globalement pour la modifier,
-il existe une commande du site qui génère 
+il existe une commande du site qui génère
 la documentation et lance un serveur la rendant
 accessible à l'adresse [http://localhost:8080](http://localhost:8000).
-Cette commande génère la documentation à 
+Cette commande génère la documentation à
 chacune de ses modifications,
 inutile de relancer le serveur à chaque fois.
 
@@ -241,7 +265,7 @@ uv run mkdocs serve
 
 ## Lancer les tests
 
-Pour lancer les tests, il suffit d'utiliser 
+Pour lancer les tests, il suffit d'utiliser
 la commande suivante :
 
 ```bash

eboutic/static/eboutic/css/eboutic.scss

@@ -67,7 +67,7 @@
   .fa-plus,
   .fa-minus {
     cursor: pointer;
-    background-color: #354a5f;
+    background-color: var(--deepblue);
     color: white;
     border-radius: 50%;
     padding: 5px;

election/static/election/css/election.scss

@@ -288,7 +288,7 @@ $min_col_width: 100px;
     border: none;
     color: black;
     text-decoration: none;
-    background-color: $primary-neutral-light-color;
+    background-color: var(--bg-white);
     padding: 0.4em;
     margin: 0.1em;
     font-size: 1.18em;

forum/static/forum/css/forum.scss

@@ -13,7 +13,8 @@
   }
 
   .topic {
-    border: solid $primary-neutral-color 1px;
+    border: solid var(--darkened-deepblue) 1px;
+    border-radius: 5px;
     padding: 1px;
     margin: 1px;
 
@@ -23,7 +24,7 @@
     }
 
     a {
-      color: $black-color;
+      color: var(--text-black);
     }
 
     a:hover {
@@ -56,7 +57,7 @@
   }
 
   .forum {
-    background: $primary-neutral-light-color;
+    background: var(--bg-white);
     padding: 1px;
     margin: 1px;
 
@@ -66,7 +67,7 @@
     }
 
     a {
-      color: $black-color;
+      color: var(--text-black);
     }
     a:hover {
       text-decoration: underline;
@@ -91,7 +92,7 @@
 
   .category {
     margin-top: 5px;
-    background: $secondary-color;
+    background: var(--deepblue);
     color: white;
     border-radius: 10px 10px 0 0;
     .title {
@@ -105,12 +106,12 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    background: $secondary-neutral-light-color;
+    background: var(--bg-off-white);
     border-radius: 5px;
-    border: 1px darken($secondary-neutral-light-color, 10%) solid;
+    border: 1px var(--bg-lightgrey) solid;
 
     &:nth-child(odd) {
-      background: $primary-neutral-light-color;
+      background: var(--bg-white);
     }
 
     .message-header {

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -23,7 +23,6 @@ $pedagogy-white-text: #f0f0f0;
     overflow-wrap: break-word;
 
     .closed td.title {
-      color: lighten($black-color, 10%);
       font-style: italic;
     }
 
@@ -69,9 +68,6 @@ $pedagogy-white-text: #f0f0f0;
       min-width: 300px;
     }
     .info-container {
-      // Darken the background color just enough to make this part
-      // stand out a little, while not being too perceptible
-      background: darken($white-color, 1%);
       display: grid;
       grid-template-columns: 1fr 1fr;
       border-radius: 5px;
@@ -158,9 +154,9 @@ $pedagogy-white-text: #f0f0f0;
       display: flex;
       flex-direction: column;
       gap: 10px;
-      background: $primary-neutral-light-color;
+      background: var(--bg-off-white);
       border-radius: 5px;
-      border: 1px darken($secondary-neutral-light-color, 10%) solid;
+      border: 1px var(--bg-lightgrey) solid;
 
       &.reported {
         border: #fc8181 1px solid;

pyproject.toml

@@ -27,7 +27,7 @@ dependencies = [
     "django-jinja<3.0.0,>=2.11.0",
     "cryptography>=50.0.2,<51.0.0",
     "django-phonenumber-field>=8.5.0,<9.0.0",
-    "phonenumbers>=9.0.41,<10.0.0",
+    "phonenumbers>=9.0.40,<10.0.0",
     "reportlab>=5.0.1,<6.0.0",
     "django-haystack>=3.4.0,<4.0.0",
     "xapian-haystack>=4.0.0,<5.0.0",

sas/static/sas/css/album.scss

@@ -27,7 +27,7 @@ main {
     font-size: 1.2em;
     line-height: 1.2em;
     color: black;
-    background-color: $primary-neutral-light-color;
+    background-color: var(--bg-white);
     border-radius: 5px;
     font-weight: bold;
 
@@ -36,7 +36,7 @@ main {
     }
 
     &:disabled {
-      background-color: $primary-neutral-light-color;
+      background-color: var(--bg-white);
       color: #d4d4d4;
     }
   }

sas/static/sas/css/picture.scss

@@ -239,7 +239,7 @@
   >.tools {
     flex: 1;
     .btn {
-      background-color: $primary-neutral-light-color;
+      background-color: var(--bg-white);
       display: flex;
       justify-content: center;
       align-items: center;

timetable/static/timetable/css/generator.scss

@@ -6,7 +6,7 @@
   display: block;
   margin: 2em auto;
   .header {
-    background-color: $white-color;
+    background-color: var(--bg-white);
     font-weight: bold;
     box-shadow: none;
     width: calc(100% - var(--hour-side-width) - 10px);