From c327f865ea6eadc3e3234f6371bfbdb785e47cc7 Mon Sep 17 00:00:00 2001
From: Richard Dern <gitea.local.richard@dern.ovh>
Date: Wed, 17 Sep 2025 10:36:30 +0200
Subject: [PATCH] =?UTF-8?q?Refactor:=20centraliser=20les=20couleurs=20du?=
 =?UTF-8?q?=20th=C3=A8me=20dans=20des=20variables=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/default/assets/css/article.css    | 18 ++++----
 themes/default/assets/css/base.css       |  4 +-
 themes/default/assets/css/footer.css     | 10 ++---
 themes/default/assets/css/header.css     | 38 ++++++++---------
 themes/default/assets/css/list.css       | 14 +++----
 themes/default/assets/css/pagination.css | 20 ++++-----
 themes/default/assets/css/typography.css | 52 ++++++++++++------------
 themes/default/assets/css/variables.css  | 47 +++++++++++++++++++++
 8 files changed, 125 insertions(+), 78 deletions(-)

diff --git a/themes/default/assets/css/article.css b/themes/default/assets/css/article.css
index f47f7cb8..3a0d4d37 100644
--- a/themes/default/assets/css/article.css
+++ b/themes/default/assets/css/article.css
@@ -23,7 +23,7 @@ article {
 
             font-size: 0.75rem;
             color: var(--text-soft);
-            background: rgba(0, 0, 0, 0.75);
+            background: var(--overlay-black-75);
             padding: 0.4rem 0.6rem;
             border-radius: 6px 6px 0 0;
             pointer-events: none;
@@ -39,11 +39,11 @@ article {
         max-width: 80ch;
         margin: 2rem auto;
         padding: 2rem;
-        background: rgba(30, 30, 30, 1);
+        background: var(--surface-panel-strong);
         border-radius: 12px;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
-            inset 0 1px 2px rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.05);
+        box-shadow: 0 8px 24px var(--overlay-black-30),
+            inset 0 1px 2px var(--bg-white-05);
+        border: 1px solid var(--bg-white-05);
     }
 
 }
@@ -61,10 +61,10 @@ article {
     z-index: 1;
 
     background: linear-gradient(to bottom,
-            rgba(0, 0, 0, 0) 0%,
-            rgba(0, 0, 0, 0) 100vh,
-            rgba(0, 0, 0, 0.4) 113vh,
-            rgba(0, 0, 0, 0.8) 125vh);
+            var(--transparent) 0%,
+            var(--transparent) 100vh,
+            var(--overlay-black-40) 113vh,
+            var(--overlay-black-80) 125vh);
 }
 
 @media (max-width: 768px) {
diff --git a/themes/default/assets/css/base.css b/themes/default/assets/css/base.css
index 1843684d..17156353 100644
--- a/themes/default/assets/css/base.css
+++ b/themes/default/assets/css/base.css
@@ -23,8 +23,8 @@ body::before {
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+    background-image: linear-gradient(var(--bg-white-02) 1px, var(--transparent) 1px),
+        linear-gradient(90deg, var(--bg-white-02) 1px, var(--transparent) 1px);
     background-size: 2px 2px;
     opacity: 0.5;
     pointer-events: none;
diff --git a/themes/default/assets/css/footer.css b/themes/default/assets/css/footer.css
index eafaa49e..59e15178 100644
--- a/themes/default/assets/css/footer.css
+++ b/themes/default/assets/css/footer.css
@@ -4,12 +4,12 @@ body>footer {
     max-width: 1200px;
     margin: 2rem auto 0 auto;
     padding: 2rem;
-    background: linear-gradient(to bottom, rgba(15, 15, 15, 1), rgba(1, 1, 1, 1));
+    background: linear-gradient(to bottom, var(--surface-charcoal), var(--surface-onyx));
     border-radius: 2rem 2rem 0 0;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 8px 20px var(--overlay-black-60);
     text-align: center;
     color: var(--text-dim);
-    border-top: 2px solid rgba(255, 255, 255, 0.2);
+    border-top: 2px solid var(--bg-white-20);
 
     p {
         font-size: 0.85rem;
@@ -38,7 +38,7 @@ body>footer {
 
             &:hover {
                 color: var(--text-white);
-                background: rgba(138, 180, 248, 0.2);
+                background: var(--accent-blue-alpha-20);
                 border-radius: 3px;
             }
         }
@@ -62,7 +62,7 @@ body>footer {
                     flex-direction: column;
                     margin-top: 0.5rem;
                     padding-top: 0.5rem;
-                    border-top: 2px solid rgba(255, 255, 255, 0.15);
+                    border-top: 2px solid var(--bg-white-15);
                     list-style: none;
                     padding-left: 0;
                     gap: 0.3rem;
diff --git a/themes/default/assets/css/header.css b/themes/default/assets/css/header.css
index 73d69856..1c29a868 100644
--- a/themes/default/assets/css/header.css
+++ b/themes/default/assets/css/header.css
@@ -11,10 +11,10 @@ main>header {
     justify-content: space-between;
     padding: .5rem 1rem;
     background:
-        radial-gradient(circle at top left, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0) 60%),
-        linear-gradient(to bottom, rgba(15, 15, 15, 1), rgba(1, 1, 1, 1));
+        radial-gradient(circle at top left, var(--bg-white-12) 0%, var(--transparent) 60%),
+        linear-gradient(to bottom, var(--surface-charcoal), var(--surface-onyx));
     border-radius: 0 0 2rem 2rem;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 8px 20px var(--overlay-black-60);
     gap: 1rem;
 
     .site-logo {
@@ -65,28 +65,28 @@ main>header {
     background-image:
         /* Stries métalliques irrégulières */
         repeating-linear-gradient(to right,
-            hsla(0, 0%, 28%, 0.02) 0%,
-            hsla(0, 0%, 28%, 0.02) 4%,
-            hsla(0, 0%, 32%, 0.04) 5%,
-            hsla(0, 0%, 28%, 0.02) 6%),
+            var(--header-metal-stripe-strong) 0%,
+            var(--header-metal-stripe-strong) 4%,
+            var(--header-metal-stripe-highlight) 5%,
+            var(--header-metal-stripe-strong) 6%),
         /* Stries secondaires plus douces */
         repeating-linear-gradient(to right,
-            hsla(0, 0%, 22%, 0.01) 0%,
-            hsla(0, 0%, 22%, 0.01) 2%,
-            hsla(0, 0%, 26%, 0.03) 3%,
-            hsla(0, 0%, 22%, 0.01) 4%),
+            var(--header-metal-stripe-soft) 0%,
+            var(--header-metal-stripe-soft) 2%,
+            var(--header-metal-stripe-soft-highlight) 3%,
+            var(--header-metal-stripe-soft) 4%),
         /* Effet d'ombrage et reflet léger */
         linear-gradient(to bottom,
-            hsl(0, 0%, 18%) 0%,
-            hsl(0, 0%, 22%) 47%,
-            hsl(0, 0%, 18%) 53%,
-            hsl(0, 0%, 16%) 100%);
+            var(--header-metal-gradient-top) 0%,
+            var(--header-metal-gradient-mid) 47%,
+            var(--header-metal-gradient-top) 53%,
+            var(--header-metal-gradient-bottom) 100%);
 
     background-size: 200px 100%;
     background-repeat: repeat;
 
     border-radius: 0 0 1rem 1rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 12px var(--overlay-black-50);
     overflow: hidden;
 
     .tablet-links {
@@ -103,7 +103,7 @@ main>header {
             background: var(--surface-elevated);
             color: var(--text-light);
             text-decoration: none;
-            border: 1px solid transparent;
+            border: 1px solid var(--transparent);
             font-size: 0.85rem;
             line-height: 1;
             transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
@@ -118,7 +118,7 @@ main>header {
         .tablet-link:focus-visible {
             outline: 2px solid var(--accent-blue);
             outline-offset: 3px;
-            border-color: transparent;
+            border-color: var(--transparent);
         }
 
         .tablet-link:focus:not(:focus-visible) {
@@ -182,7 +182,7 @@ main>header {
             background-color: var(--surface-elevated);
             border: 1px solid var(--border-panel);
             border-radius: 0.5rem;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+            box-shadow: 0 0 10px var(--overlay-black-40);
             overflow: auto;
             padding: 1rem;
             scrollbar-width: thin;
diff --git a/themes/default/assets/css/list.css b/themes/default/assets/css/list.css
index 819a5da5..085090d6 100644
--- a/themes/default/assets/css/list.css
+++ b/themes/default/assets/css/list.css
@@ -18,10 +18,10 @@
     border-radius: 12px;
     overflow: hidden;
     position: relative;
-    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.9), rgba(1, 1, 1, 0.95));
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-top: 2px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
+    background: linear-gradient(to bottom, var(--surface-charcoal-90), var(--surface-onyx-95));
+    border: 1px solid var(--bg-white-10);
+    border-top: 2px solid var(--bg-white-20);
+    box-shadow: 0 6px 14px var(--overlay-black-50);
     color: inherit;
     text-decoration: none;
     transition: box-shadow 0.2s ease-in-out;
@@ -29,7 +29,7 @@
 
 /* Effet léger au survol */
 .article-card:hover {
-    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
+    box-shadow: 0 8px 18px var(--overlay-black-70);
 }
 
 /* Image en haut, occupant toute la largeur */
@@ -38,7 +38,7 @@
     background-size: cover;
     background-position: center;
     position: relative;
-    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 2px solid var(--bg-white-10);
     filter: brightness(0.6);
     /* Image légèrement plus sombre */
     transition: filter 0.2s ease-in-out;
@@ -54,7 +54,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    background: linear-gradient(to top, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+    background: linear-gradient(to top, var(--bg-white-05), var(--transparent));
     opacity: 0.4;
 }
 
diff --git a/themes/default/assets/css/pagination.css b/themes/default/assets/css/pagination.css
index 021f6968..6a3a2b9e 100644
--- a/themes/default/assets/css/pagination.css
+++ b/themes/default/assets/css/pagination.css
@@ -3,10 +3,10 @@
     justify-content: space-between;
     align-items: center;
     padding: .2rem .3rem;
-    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.9), rgba(1, 1, 1, 0.95));
-    border-top: 2px solid rgba(255, 255, 255, 0.2);
+    background: linear-gradient(to bottom, var(--surface-charcoal-90), var(--surface-onyx-95));
+    border-top: 2px solid var(--bg-white-20);
     border-radius: 12px;
-    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 6px 14px var(--overlay-black-50);
     gap: 1rem;
     flex-wrap: wrap;
 
@@ -31,7 +31,7 @@
 
 .pagination-bar a:hover {
     color: var(--text-white);
-    background: rgba(138, 180, 248, 0.2);
+    background: var(--accent-blue-alpha-20);
 }
 
 .pagination-bar .disabled {
@@ -50,9 +50,9 @@
 
     &[open] {
         summary {
-            background: rgba(138, 180, 248, 0.2);
+            background: var(--accent-blue-alpha-20);
             color: var(--text-white);
-            border-color: rgba(138, 180, 248, 0.4);
+            border-color: var(--accent-blue-alpha-40);
         }
     }
 
@@ -61,8 +61,8 @@
         cursor: pointer;
         user-select: none;
         padding: 0.5rem 1rem;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.2);
+        background: var(--bg-white-05);
+        border: 1px solid var(--bg-white-20);
         border-radius: 6px;
         font-weight: bold;
         text-align: center;
@@ -132,14 +132,14 @@
     }
 
     li a:hover {
-        background-color: rgba(255, 255, 255, 0.05);
+        background-color: var(--bg-white-05);
         color: var(--footer-link-hover-color);
     }
 
     li span.current {
         color: var(--text-white);
         font-weight: bold;
-        background-color: rgba(255, 255, 255, 0.1);
+        background-color: var(--bg-white-10);
     }
 }
 
diff --git a/themes/default/assets/css/typography.css b/themes/default/assets/css/typography.css
index cc807744..b5f42867 100644
--- a/themes/default/assets/css/typography.css
+++ b/themes/default/assets/css/typography.css
@@ -61,7 +61,7 @@ article aside {
         margin: 2em;
         padding: 1em 1.5em;
         border-left: 4px solid var(--accent-blue);
-        background-color: rgba(255, 255, 255, 0.03);
+        background-color: var(--bg-white-03);
         font-size: 0.9em;
         color: var(--text-light);
         font-style: normal;
@@ -141,7 +141,7 @@ article aside {
         display: inline;
         text-decoration: line-through;
         color: var(--text-red);
-        background-color: rgba(255, 0, 0, 0.1);
+        background-color: var(--bg-red-01);
         padding: 0 0.2em;
         border-radius: 0.2em;
     }
@@ -161,7 +161,7 @@ article aside {
 
         &.spoiler {
             border-left: 4px solid var(--border-muted);
-            background-color: rgba(255, 255, 255, 0.03);
+            background-color: var(--bg-white-03);
 
             summary {
                 color: var(--text-muted);
@@ -179,7 +179,7 @@ article aside {
 
         &.update {
             border-left: 4px solid var(--accent-blue);
-            background-color: rgba(100, 199, 255, 0.1);
+            background-color: var(--bg-accent-blue-01);
 
             summary {
                 color: var(--accent-blue);
@@ -234,10 +234,10 @@ article aside {
         margin: 3em auto;
         padding: 1rem;
         border-radius: 1em;
-        background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.7));
+        background: radial-gradient(circle at top left, var(--bg-white-05), var(--overlay-black-70));
         box-shadow:
-            inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-            0 0 10px rgba(0, 0, 0, 0.4);
+            inset 0 0 0 1px var(--bg-white-05),
+            0 0 10px var(--overlay-black-40);
         backdrop-filter: blur(4px);
         max-width: 100%;
         text-align: center;
@@ -279,8 +279,8 @@ article aside {
         margin: 4em auto;
         position: relative;
         background: radial-gradient(ellipse at center -20px,
-                rgba(200, 240, 255, 0.18),
-                transparent 80%);
+                var(--accent-blue-glow),
+                var(--transparent) 80%);
     }
 
     input[type="checkbox"] {
@@ -292,7 +292,7 @@ article aside {
         /* ⬅ correction ici */
         border: 2px solid var(--border-muted);
         border-radius: 0.2em;
-        background-color: transparent;
+        background-color: var(--transparent);
         position: relative;
         cursor: default;
 
@@ -320,7 +320,7 @@ article aside {
         text-decoration: none;
         font-weight: bold;
         color: var(--text-green);
-        background-color: rgba(0, 255, 0, 0.1);
+        background-color: var(--bg-green-01);
         padding: 0 0.2em;
         border-radius: 0.2em;
     }
@@ -336,9 +336,9 @@ article aside {
         background-color: var(--bg-dark);
         border-radius: 0.3em;
         box-shadow:
-            0 0 6px rgba(255, 255, 255, 0.25),
-            0 0 12px rgba(255, 255, 255, 0.12),
-            inset 0 0 1px rgba(255, 255, 255, 0.04);
+            0 0 6px var(--bg-white-25),
+            0 0 12px var(--bg-white-12),
+            inset 0 0 1px var(--bg-white-04);
         white-space: nowrap;
         vertical-align: middle;
     }
@@ -443,8 +443,8 @@ article aside {
         background-color: var(--bg-dark);
         border-radius: 0.3em;
         box-shadow:
-            0 0 1px rgba(0, 255, 0, 0.2),
-            inset 0 0 2px rgba(255, 255, 255, 0.05);
+            0 0 1px var(--bg-green-02),
+            inset 0 0 2px var(--bg-white-05);
         white-space: pre-wrap;
     }
 
@@ -456,8 +456,8 @@ article aside {
         color: var(--accent-green-bright);
         border-radius: 0.5em;
         box-shadow:
-            0 0 10px rgba(0, 255, 100, 0.05),
-            inset 0 0 3px rgba(0, 255, 100, 0.1);
+            0 0 10px var(--bg-lime-005),
+            inset 0 0 3px var(--bg-lime-01);
         font-size: 0.8em;
         max-height: 50vh;
         overflow: auto;
@@ -490,13 +490,13 @@ article aside {
         font-size: 0.95em;
         line-height: 1.5;
         border: 1px solid var(--border-dark);
-        background-color: rgba(255, 255, 255, 0.015);
+        background-color: var(--bg-white-015);
         /* Suppression des coins arrondis */
         border-radius: 0;
     }
 
     thead {
-        background-color: rgba(255, 255, 255, 0.04);
+        background-color: var(--bg-white-04);
         color: var(--text-white);
         font-weight: bold;
     }
@@ -506,7 +506,7 @@ article aside {
         border: 1px solid var(--border-dark);
         text-align: left;
         white-space: nowrap;
-        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
+        background: linear-gradient(to bottom, var(--bg-white-06), var(--overlay-black-40));
     }
 
     tbody td {
@@ -515,23 +515,23 @@ article aside {
         vertical-align: top;
         text-align: left;
         color: var(--text-light);
-        background-color: transparent;
+        background-color: var(--transparent);
         transition: background-color 0.2s;
     }
 
     /* Alternance des lignes */
     tbody tr:nth-child(even) td {
-        background-color: rgba(255, 255, 255, 0.015);
+        background-color: var(--bg-white-015);
     }
 
     /* Survol ligne */
     tbody tr:hover td {
-        background-color: rgba(100, 199, 255, 0.05);
+        background-color: var(--bg-accent-blue-005);
     }
 
     /* Survol cellule */
     tbody td:hover {
-        background-color: rgba(100, 199, 255, 0.08);
+        background-color: var(--bg-accent-blue-008);
     }
 
     /* Pied du tableau */
@@ -539,7 +539,7 @@ article aside {
         padding: 0.75em 1em;
         font-style: italic;
         color: var(--text-muted);
-        background-color: rgba(255, 255, 255, 0.02);
+        background-color: var(--bg-white-02);
         border: 1px solid var(--border-dark);
     }
 }
diff --git a/themes/default/assets/css/variables.css b/themes/default/assets/css/variables.css
index 3214b6e5..323665d0 100644
--- a/themes/default/assets/css/variables.css
+++ b/themes/default/assets/css/variables.css
@@ -50,15 +50,62 @@
 
     --scrollbar-thumb: #555;
 
+    /* Transparency helpers */
+    --transparent: rgba(0, 0, 0, 0);
+
+    /* Neutral white alphas */
+    --bg-white-00: rgba(255, 255, 255, 0);
     --bg-white-015: rgba(255, 255, 255, 0.015);
     --bg-white-02: rgba(255, 255, 255, 0.02);
     --bg-white-03: rgba(255, 255, 255, 0.03);
     --bg-white-04: rgba(255, 255, 255, 0.04);
+    --bg-white-05: rgba(255, 255, 255, 0.05);
+    --bg-white-06: rgba(255, 255, 255, 0.06);
+    --bg-white-10: rgba(255, 255, 255, 0.1);
+    --bg-white-12: rgba(255, 255, 255, 0.12);
+    --bg-white-15: rgba(255, 255, 255, 0.15);
+    --bg-white-20: rgba(255, 255, 255, 0.2);
+    --bg-white-25: rgba(255, 255, 255, 0.25);
 
+    /* Accent overlays */
+    --accent-blue-alpha-20: rgba(138, 180, 248, 0.2);
+    --accent-blue-alpha-40: rgba(138, 180, 248, 0.4);
+    --accent-blue-glow: rgba(200, 240, 255, 0.18);
+
+    /* Utility overlays */
     --bg-red-01: rgba(255, 0, 0, 0.1);
     --bg-green-01: rgba(0, 255, 0, 0.1);
+    --bg-green-02: rgba(0, 255, 0, 0.2);
+    --bg-lime-005: rgba(0, 255, 100, 0.05);
+    --bg-lime-01: rgba(0, 255, 100, 0.1);
 
+    /* Accent blues */
     --bg-accent-blue-01: rgba(100, 199, 255, 0.1);
     --bg-accent-blue-005: rgba(100, 199, 255, 0.05);
     --bg-accent-blue-008: rgba(100, 199, 255, 0.08);
+
+    /* Neutral black alphas */
+    --overlay-black-30: rgba(0, 0, 0, 0.3);
+    --overlay-black-40: rgba(0, 0, 0, 0.4);
+    --overlay-black-50: rgba(0, 0, 0, 0.5);
+    --overlay-black-60: rgba(0, 0, 0, 0.6);
+    --overlay-black-70: rgba(0, 0, 0, 0.7);
+    --overlay-black-75: rgba(0, 0, 0, 0.75);
+    --overlay-black-80: rgba(0, 0, 0, 0.8);
+
+    /* Charcoal solids */
+    --surface-panel-strong: rgba(30, 30, 30, 1);
+    --surface-charcoal-90: rgba(15, 15, 15, 0.9);
+    --surface-charcoal: rgba(15, 15, 15, 1);
+    --surface-onyx-95: rgba(1, 1, 1, 0.95);
+    --surface-onyx: rgba(1, 1, 1, 1);
+
+    /* Metallic header accents */
+    --header-metal-stripe-strong: hsla(0, 0%, 28%, 0.02);
+    --header-metal-stripe-highlight: hsla(0, 0%, 32%, 0.04);
+    --header-metal-stripe-soft: hsla(0, 0%, 22%, 0.01);
+    --header-metal-stripe-soft-highlight: hsla(0, 0%, 26%, 0.03);
+    --header-metal-gradient-top: hsl(0, 0%, 18%);
+    --header-metal-gradient-mid: hsl(0, 0%, 22%);
+    --header-metal-gradient-bottom: hsl(0, 0%, 16%);
 }