diff --git a/cours-ensiie.html b/cours-ensiie.html
index 5abeb2e70f1415710cf76216cb4b3f428f67cfcf..baeaa8fbf44ca7cc6de6d62f43acf2f3587b4afc 100644
--- a/cours-ensiie.html
+++ b/cours-ensiie.html
@@ -136,30 +136,8 @@
 
 </body>
 
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="cookies.js"></script>
 <script type="text/javascript" src="lightsoff.js"></script>
-<script type="text/javascript">
-$(document).ready(function() {
-    let color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
-    let col_rd = color[Math.floor(Math.random() * color.length)];
-
-    // Changement aléatoire de la couleur
-    $("header").css("background-color", col_rd);
-    $("section.cours a").css("background-color", col_rd);
-
-    $("section.header_links a").hover(
-        function() { $(this).css("background-color", col_rd); },
-        function() { $(this).removeAttr("style"); }
-    );
-
-    // Changement de la couleur pour Google Chrome Mobile
-    $('meta[name=theme-color]').remove();
-    $('head').append('<meta name="theme-color" content="'+ col_rd +'">');
-});
-</script>
-<!--[if IE]>
-    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
+<script type="text/javascript" src="script.js"></script>
 
 </html>
diff --git a/index.html b/index.html
index 1084a0d47c8f63ea409d6b0299604ab1abe1114a..68192a64e9d0b0e68dadb0bb853f473ddadfd908 100644
--- a/index.html
+++ b/index.html
@@ -74,32 +74,8 @@
 
 </body>
 
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="cookies.js"></script>
 <script type="text/javascript" src="lightsoff.js"></script>
-<script type="text/javascript">
-$(document).ready(function() {
-    let color = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
-    let col_rd = color[Math.floor(Math.random() * color.length)];
-
-    // Changement aléatoire de la couleur
-    $("header").css("background-color", col_rd);
-    $("section.cours a").css("background-color", col_rd);
-    $("section.content").css("border-color", col_rd);
-    $("section.content a").css("color", col_rd);
-
-    $("section.header_links a").hover(
-        function() { $(this).css("background-color", col_rd); },
-        function() { $(this).removeAttr("style"); }
-    );
-
-    // Changement de la couleur pour Google Chrome Mobile
-    $('meta[name=theme-color]').remove();
-    $('head').append('<meta name="theme-color" content="'+ col_rd +'">');
-});
-</script>
-<!--[if IE]>
-    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
+<script type="text/javascript" src="script.js"></script>
 
 </html>
diff --git a/lightsoff.js b/lightsoff.js
index e0edaea0a1ccca4aaebcbe0d7a0bf1abca46da97..1d3e09de6f8f02c6426ca11c342a58d985d3816b 100644
--- a/lightsoff.js
+++ b/lightsoff.js
@@ -1,4 +1,4 @@
-$(document).ready(function() {
+document.addEventListener("DOMContentLoaded", function() {
   let lightsoff = getCookie("lightsoff") === "on";
   let switcher = document.getElementsByClassName("theme_toggle")[0];
   switcher.style.display = "inline-block";
diff --git a/script.js b/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..e650cf6b0cd8c53d21e1daaf339ac490a6cbc7bf
--- /dev/null
+++ b/script.js
@@ -0,0 +1,10 @@
+const colors = ["#F17105", "#D11149", "#6610F2", "#177CC5", "#92A500"];
+const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.documentElement.style.setProperty("--accent-color", randomColor);
+});
+
+document
+  .querySelector('meta[name="theme-color"]')
+  .setAttribute("content", randomColor);
diff --git a/styles.css b/styles.css
index 8437e0076b318fab1dcf0798eae4c2d2a5df63b9..f0b7ecfed41ef1be591ae5c80392c826185e201c 100644
--- a/styles.css
+++ b/styles.css
@@ -7,6 +7,10 @@
     list-style: none;
 }
 
+:root {
+    --accent-color: #444;
+}
+
 .clear { clear: both; }
 
 html, body {
@@ -98,7 +102,7 @@ section.container a::after {
 }
 
 header {
-    background: #333333 url("ressources/bg_crop_kumiko.png") 90% bottom / contain no-repeat;
+    background: var(--accent-color) url("ressources/bg_crop_kumiko.png") 90% bottom / contain no-repeat;
     width: 100%;
     height: 200px;
     color: #FFFFFF;
@@ -151,7 +155,7 @@ section.header_links a {
     font-size: 12px;
     text-transform: uppercase;
 }
-section.header_links a:hover { background: rgba(0,0,0,0.5); }
+section.header_links a:hover { background: var(--accent-color); }
 section.cours { padding: 15px; overflow: hidden; }
 
 section.content {
@@ -159,17 +163,16 @@ section.content {
     padding: 15px 20px;
     line-height: 25px;
     border-radius: 15px;
-    border: 2px dashed #222;
+    border: 2px dashed var(--accent-color);
     color: #222;
     background-color: #eee;
 }
 
-section.content a:hover {
-    opacity: 0.5;
-}
+section.content a { color: var(--accent-color); }
+section.content a:hover { opacity: 0.5; }
 
 section.cours a {
-    background-color: #222;
+    background-color: var(--accent-color);
     border-radius: 3px;
     display: inline-block;
     font-size: 14px;