From a8dcc4bba5590234a784ebe7207ef3ef02a0d32e Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Fri, 10 Jul 2026 11:58:29 +0200
Subject: [PATCH] Consistent scrollbar styling across browsers

- colors.css: added --scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-track, --scrollbar-corner custom properties
- base.css: consolidated all scrollbar rules (WebKit ::-webkit-scrollbar* + Firefox scrollbar-width/color), added ::-webkit-scrollbar-corner, changed selector from * to html (scrollbar-width inherits), added scrollbar-gutter: stable
- admin.css: removed redundant scrollbar-width: thin on header nav
- toc.css: removed redundant scrollbar-width: thin on desktop .toc
---
 TODO.md                                  |  1 +
 app/public/assets/css/admin.css          |  1 -
 app/public/assets/css/base.css           | 32 +++++++++---------------
 app/public/assets/css/colors.css         |  7 ++++++
 app/public/assets/css/components/toc.css |  1 -
 5 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/TODO.md b/TODO.md
index 8b2637a..e72715b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -46,3 +46,4 @@
 - [x] Wider heading scale (h1/h2/h3) for apropos/licence/charte pages: step-5 / step-3 / step-1
 - [x] Masquer le bloc "Durée" sur la page TFE quand aucune durée n'est encodée (ni pages ni minutes)
 - [x] Fix: locked_year cleared on edit — edit dialog didn't populate the field, so any edit cleared the locked academic year
+- [x] Consistent scrollbar styling across browsers (WebKit/Blink/Firefox): custom properties in colors.css, unified rules in base.css, removed redundant declarations
diff --git a/app/public/assets/css/admin.css b/app/public/assets/css/admin.css
index de158c3..eadbfd9 100644
--- a/app/public/assets/css/admin.css
+++ b/app/public/assets/css/admin.css
@@ -14,7 +14,6 @@
 .admin-body header nav {
   overflow-x: auto;
   white-space: nowrap;
-  scrollbar-width: thin;
 }
 .admin-body header nav .nav-right-links {
   flex-shrink: 0;
diff --git a/app/public/assets/css/base.css b/app/public/assets/css/base.css
index f4867d1..641acf7 100644
--- a/app/public/assets/css/base.css
+++ b/app/public/assets/css/base.css
@@ -11,30 +11,22 @@ body {
   overflow: hidden;
 }
 
-/* ── Discreet scrollbars ─────────────────────────────────────────── */
-/* WebKit browsers */
+/* ── Discreet scrollbars (WebKit / Blink / Firefox) ──────────────── */
+/* CSS custom properties defined in colors.css:
+   --scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-track, --scrollbar-corner */
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width:  var(--scrollbar-width, 5px);
+  height: var(--scrollbar-width, 5px);
 }
+::-webkit-scrollbar-track        { background: var(--scrollbar-track); }
+::-webkit-scrollbar-thumb        { background: var(--scrollbar-thumb); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-thumb-hover); }
+::-webkit-scrollbar-corner       { background: var(--scrollbar-corner); }
 
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--text-tertiary);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
-}
-
-/* Firefox */
-* {
+html {
   scrollbar-width: thin;
-  scrollbar-color: var(--text-tertiary) transparent;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  scrollbar-gutter: stable;
 }
 
 body {
diff --git a/app/public/assets/css/colors.css b/app/public/assets/css/colors.css
index a97dd98..5e68b40 100644
--- a/app/public/assets/css/colors.css
+++ b/app/public/assets/css/colors.css
@@ -15,6 +15,13 @@
 	--text-secondary: #666666;
 	--text-tertiary: #999999;
 
+	/* Scrollbar */
+	--scrollbar-width: 5px;
+	--scrollbar-thumb: var(--text-tertiary);
+	--scrollbar-thumb-hover: var(--text-secondary);
+	--scrollbar-track: transparent;
+	--scrollbar-corner: transparent;
+
 	/* Borders */
 	--border-primary: #dddddd;
 	--border-secondary: #cccccc;
diff --git a/app/public/assets/css/components/toc.css b/app/public/assets/css/components/toc.css
index 409ebe1..039950d 100644
--- a/app/public/assets/css/components/toc.css
+++ b/app/public/assets/css/components/toc.css
@@ -119,7 +119,6 @@
 		max-height: calc(100vh - var(--space-xl) - var(--space-2xl));
 		overflow-y: auto;
 		overscroll-behavior: contain;
-		scrollbar-width: thin;
 	}
 
 	.toc summary {