Push avant Clean

2026-07-29 18:25:47 +02:00 · 2025-11-09 09:04:57 +01:00
parent ac854ae559
commit 4954de5f1a
71 changed files with 1256 additions and 1350 deletions
--- a/public/assets/images/Chirac.png
+++ b/public/assets/images/Chirac.png
--- a/public/assets/images/Cyberpunk.webp
+++ b/public/assets/images/Cyberpunk.webp
--- a/public/assets/images/Drift.jpg
+++ b/public/assets/images/Drift.jpg
--- a/public/assets/images/NF.jpg
+++ b/public/assets/images/NF.jpg
--- a/public/assets/images/Vilbrequin.webp
+++ b/public/assets/images/Vilbrequin.webp
--- a/public/assets/images/spicy.webp
+++ b/public/assets/images/spicy.webp
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="
+    default-src 'self' 'unsafe-inline' data:;
+    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
+    font-src https://fonts.gstatic.com;
+    img-src 'self' data: https://i.ytimg.com;
+    ">
+    <title></title>
+
+    <!--CSS-->
+    <link rel="stylesheet" href="styles/styles.css">
+    
+</head>
+<body>
+
+        <div class="container">
+
+        <header>
+            <h1 id="title"> Freedom Loader </h1>
+            <p id="subtitle"> Because why not? </p>
+        </header>
+        
+        <form action="/download" method="POST" id="downloadForm">
+            <input name="url" placeholder="URL" id="UrlInput">
+
+            <label class="checkbox-inline">
+
+                <label class="checkbox-mp3">
+                    <input type="checkbox" name="audioOnly" value="1">
+                    <div class="checkmark"></div>
+                </label>
+                <!-- <input type="checkbox" name="audioOnly" value="1"> -->
+                Audio seulement (MP3)
+            </label>
+            <!-- <input type="checkbox" name="audioOnly" value="1"> Audio seulement (MP3) -->
+            <select name="quality">
+                <option value="best">Meilleure qualité</option>
+                <option value="medium">Qualité moyenne</option>
+                <option value="worst">Qualité minimale</option>
+                <option value="1080">1080p</option>
+                <option value="720">720p</option>
+                <option value="480">480p</option>
+            </select>
+
+            <button type="submit">Télécharger</button>
+        </form>
+
+        <!--Il faut utiliser un formulaire, parce que on doit envoyer a un serveur 
+        les données à traiter. Pour cela on définit une route vers /download, ca va
+        être l'espèce de "canal" attribué a ça. Ca va faire que si jamais on veut ensuite recup
+        les infos du form, il faut aller sur ce canal précis (/download). La méthode POST dit
+        que l'on envoie des données.-->
+        
+    </div>
+
+    <div class="download-path">
+            Sera enregistré dans <span id="savePath"></span> 
+            <button id="changePath">Modifier</button>
+    </div>
+
+    <div id="downloadStatus"></div>
+
+    <div class="infos-container">
+         <div id="videoInfo" style="margin-top: 20px;"></div>
+    </div>
+    
+    <footer class="theme-switcher">
+            <label for="themeSelect">Thème :</label>
+            <select id="themeSelect" aria-label="Choisir le thème">
+            <!-- <option value="dark">Sombre</option>
+            <option value="light">Clair</option>
+            <option value="Chirac">Chirac</option>
+            <option value="Fanatic">Fanatic</option> -->
+            </select>
+    </footer>
+
+    <script src="script/custompath.js"></script>
+    <script src="script/downloadstatus.js"></script>
+    <script src="script/fetchinfo.js"></script>
+    <script src="script/chirac.js"></script>
+    <script src="script/customthemes.js"></script>
+
+</body>
+</html>
--- a/public/script/custompath.js
+++ b/public/script/custompath.js
@@ -0,0 +1,71 @@
+/*
+  This file is part of Freedom Loader.
+
+  Copyright (C) 2025 MasterAcnolo
+
+  Freedom Loader is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License.
+
+  Freedom Loader is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+/*
+  Ce script attend que le DOM soit complètement chargé pour initialiser
+  l'affichage et la gestion du chemin de sauvegarde personnalisé.
+
+  1. Récupère le chemin de téléchargement par défaut depuis le main process via l'API exposée.
+  2. Met à jour le texte affiché dans l'élément avec l'id "savePath".
+  3. Crée un input caché nommé "savePath" dans le formulaire pour envoyer ce chemin lors du submit.
+  4. Ajoute un écouteur sur le bouton "changePath" pour permettre à l'utilisateur
+     de choisir un dossier via une boîte de dialogue native.
+  5. Met à jour l'affichage et la valeur cachée du chemin sélectionné.
+*/
+
+window.addEventListener("DOMContentLoaded", async () => {
+  const savePathElem = document.getElementById("savePath");
+
+  // 1️Essayer de charger depuis le localStorage
+  let savedPath = localStorage.getItem("customDownloadPath");
+
+  // 2️Sinon demander le chemin par défaut à l'API Electron
+  if (!savedPath) {
+    savedPath = await window.electronAPI.getDefaultDownloadPath();
+  }
+
+  // 3 Afficher le chemin
+  if (savePathElem) {
+    savePathElem.textContent = savedPath;
+  }
+
+  //  Créer l'input caché s'il n'existe pas déjà
+  let hidden = document.getElementById("savePathInput");
+  if (!hidden) {
+    hidden = document.createElement("input");
+    hidden.type = "hidden";
+    hidden.name = "savePath";
+    hidden.id = "savePathInput";
+    document.getElementById("downloadForm").appendChild(hidden);
+  }
+  hidden.value = savedPath;
+
+  //  Gestion du bouton de modification
+  document.getElementById("changePath").addEventListener("click", async () => {
+    const selectedPath = await window.electronAPI.selectDownloadFolder();
+    if (selectedPath) {
+      // Met à jour l'affichage
+      savePathElem.textContent = selectedPath;
+      hidden.value = selectedPath;
+
+      // Et le stocke en localStorage pour la prochaine fois
+      localStorage.setItem("customDownloadPath", selectedPath);
+    }
+  });
+});
+
--- a/public/script/customthemes.js
+++ b/public/script/customthemes.js
@@ -0,0 +1,92 @@
+/*
+  This file is part of Freedom Loader.
+
+  Copyright (C) 2025 MasterAcnolo
+
+  Freedom Loader is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License.
+
+  Freedom Loader is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+// Définition des thèmes disponibles
+// Chaque thème a un label (affiché dans le select) et un subtitle (texte sous le titre)
+const themes = {
+  default:    { label: "Default", subtitle: "Because why not?" },
+  dark:       { label: "Sombre", subtitle: "Darkness is my ally" },
+  light:      { label: "Clair", subtitle: "Qui aime ce thème ?" },
+  neon:       { label: "Néon", subtitle: "How was your day ?"},
+  nf:         { label: "NF", subtitle: "You call it music, i call it my Therapist" },
+  drift:      { label: "Drift", subtitle: "Si la route t'appelle, contre appel" },
+  fanatic:    { label: "Fanatic", subtitle: "Always Fnatic !" },
+  cyberpunk:  { label: "Cyberpunk", subtitle: "Wake up, choom. We’ve got a city to burn." },
+  chirac:     { label: "Chirac", subtitle: "J'aime les pommes" },
+  spicy:      { label: "Spicy", subtitle: "The Spiciest One" },
+  vilbrequin: { label: "Vilbrequin", subtitle: "Rend l'argent" }
+};
+
+
+const themeSelect = document.getElementById("themeSelect");
+
+// Remplir le select avec les options à partir du dictionnaire
+function populateThemeSelect() {
+  for (const [themeKey, themeInfo] of Object.entries(themes)) {
+    const option = document.createElement("option");
+    option.value = themeKey;        
+    option.textContent = themeInfo.label; 
+    themeSelect.appendChild(option);
+  }
+}
+
+// Appliquer un thème sur le body et mettre à jour le subtitle
+function applyTheme(themeKey) {
+  // Supprimer les classes de tous les thèmes
+  document.body.classList.remove(...Object.keys(themes));
+  // Ajouter la classe correspondant au thème sélectionné
+  document.body.classList.add(themeKey);
+
+  // Mettre à jour le subtitle
+  const subtitleElement = document.getElementById("subtitle");
+  if (subtitleElement && themes[themeKey]) {
+    subtitleElement.textContent = themes[themeKey].subtitle;
+  }
+
+}
+
+// Sauvegarder le thème choisi dans le navigateur
+function saveTheme(themeKey) {
+  localStorage.setItem("selectedTheme", themeKey);
+}
+
+// Charger le thème sauvegardé au démarrage
+function loadTheme() {
+  const savedTheme = localStorage.getItem("selectedTheme");
+
+  if (savedTheme && themes[savedTheme]) {
+    applyTheme(savedTheme);
+    themeSelect.value = savedTheme;
+  } else {
+    applyTheme("dark");  // thème par défaut
+    themeSelect.value = "dark";
+  }
+}
+
+// Quand l'utilisateur change le thème depuis le select
+themeSelect.addEventListener("change", (event) => {
+  const selectedTheme = event.target.value;
+  if (themes[selectedTheme]) {
+    applyTheme(selectedTheme);
+    saveTheme(selectedTheme);
+  }
+});
+
+// Initialisation
+populateThemeSelect();
+loadTheme();
--- a/public/script/downloadstatus.js
+++ b/public/script/downloadstatus.js
@@ -0,0 +1,55 @@
+/*
+  This file is part of Freedom Loader.
+
+  Copyright (C) 2025 MasterAcnolo
+
+  Freedom Loader is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License.
+
+  Freedom Loader is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+const form = document.getElementById("downloadForm");
+const statusDiv = document.getElementById("downloadStatus");
+const button = form.querySelector("button");
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  button.disabled = true; // Empêche les clics multiples
+  statusDiv.textContent = "Téléchargement en cours...";
+
+  const formData = new FormData(form);
+  const params = new URLSearchParams(formData);
+
+  try {
+    const res = await fetch("/download", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: params,
+    });
+
+    if (!res.ok) {
+      statusDiv.textContent = "❌ Erreur pendant le téléchargement.";
+      return;
+    }
+
+    const text = await res.text();
+    statusDiv.textContent = text;
+
+  } catch {
+    statusDiv.textContent = "❌ Une erreur s’est produite.";
+  } finally {
+    button.disabled = false;
+
+    setTimeout(() => {
+      statusDiv.textContent = "";
+    }, 5000);
+  }
+});
--- a/public/script/fetchinfo.js
+++ b/public/script/fetchinfo.js
@@ -0,0 +1,122 @@
+/*
+  This file is part of Freedom Loader.
+
+  Copyright (C) 2025 MasterAcnolo
+
+  Freedom Loader is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License.
+
+  Freedom Loader is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+function formatDate(dateStr) {
+  if (!dateStr || dateStr.length !== 8) return "Inconnue";
+  return `${dateStr.slice(6,8)}/${dateStr.slice(4,6)}/${dateStr.slice(0,4)}`;
+}
+
+function formatSize(bytes) {
+  return bytes ? (bytes / (1024*1024)).toFixed(2) + " Mo" : "Inconnue";
+}
+
+async function fetchVideoInfo(url) {
+  try {
+    const res = await fetch("/info", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({ url }),
+    });
+
+    if (!res.ok) return { error: `Erreur serveur: ${res.status}` };
+
+    const data = await res.json();
+    if (!data) return { error: "Données manquantes" };
+
+    return data;
+  } catch (e) {
+    return { error: "Erreur réseau ou JSON" };
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const urlInput = document.getElementById("UrlInput");
+  const infoDiv = document.getElementById("videoInfo");
+  let lastFetchedUrl = "";
+
+  urlInput.addEventListener("input", async () => {
+    const url = urlInput.value.trim();
+
+    if (!url || url.length < 5) {
+      infoDiv.innerHTML = "";
+      infoDiv.classList.remove("visible");
+      lastFetchedUrl = "";
+      return;
+    }
+
+    if (url === lastFetchedUrl) return;
+    lastFetchedUrl = url;
+
+    const data = await fetchVideoInfo(url);
+    if (data.error) {
+      infoDiv.innerHTML = `❌ ${data.error}`;
+      infoDiv.classList.remove("visible");
+      return;
+    }
+
+    // Playlist
+    if (data.type === "playlist") {
+      infoDiv.innerHTML = `
+        <p style="color:orange;"><strong>Playlist détectée – ${data.count} vidéos</strong></p>
+        <h3>${data.title}</h3>
+        <p><strong>Channel :</strong> ${data.channel || "Inconnu"}</p>
+        <div id="playlistVideos"></div>
+      `;
+      const listDiv = document.getElementById("playlistVideos");
+      data.videos.forEach(v => {
+        const durationStr = `${Math.floor(v.duration/60)}m ${(v.duration%60).toString().padStart(2,"0")}s`;
+        listDiv.innerHTML += `
+          <div style="margin-bottom:12px;">
+            <img src="${v.thumbnail}" width="160" alt="Thumbnail">
+            <p><strong>${v.title}</strong></p>
+            <p>Durée : ${durationStr}</p>
+            <p>URL : <a href="${v.webpage_url}" target="_blank">${v.webpage_url}</a></p>
+          </div>
+        `;
+      });
+      infoDiv.classList.add("visible");
+    return;
+  }
+
+
+    // Vidéo normale
+    const durationStr = `${Math.floor(data.duration/60)}m ${(data.duration%60)
+      .toString()
+      .padStart(2,"0")}s`;
+    const sizeStr = formatSize(data.filesize_approx);
+    const readableDate = formatDate(data.upload_date);
+    const categories = data.categories?.join(", ") || "Non spécifiées";
+
+    infoDiv.innerHTML = `
+      <h3>${data.title}</h3>
+      <img src="${data.thumbnail}" width="320" alt="Thumbnail">
+      <ul>
+        <li><strong>Durée :</strong> ${durationStr}</li>
+        <li><strong>Uploader :</strong> ${data.uploader || "Inconnu"}</li>
+        <li><strong>Date d’upload :</strong> ${readableDate}</li>
+        <li><strong>Vues :</strong> ${data.view_count?.toLocaleString() || "?"}</li>
+        <li><strong>Likes :</strong> ${data.like_count?.toLocaleString() || "?"}</li>
+        <li><strong>URL :</strong> <a href="${data.webpage_url}" target="_blank">${data.webpage_url}</a></li>
+        <li><strong>Channel :</strong> <a href="${data.channel_url}" target="_blank">${data.channel_url}</a></li>
+        <li><strong>Taille estimée :</strong> ${sizeStr}</li>
+        <li><strong>Catégories :</strong> ${categories}</li>
+      </ul>
+    `;
+    infoDiv.classList.add("visible");
+  });
+})
--- a/public/styles/components/checkbox.css
+++ b/public/styles/components/checkbox.css
@@ -0,0 +1,73 @@
+.checkbox-mp3 input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkbox-mp3 {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  font-size: 1.5rem;
+  user-select: none;
+}
+
+.checkmark {
+  --clr: var(--checkbox-bg-checked);
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 1.3em;
+  width: 1.3em;
+  background-color: var(--checkbox-bg-default);
+  border-radius: .5rem;
+  transition: background-color 300ms, border-radius 300ms;
+}
+
+.checkbox-mp3 input:checked ~ .checkmark {
+  background-color: var(--clr);
+  border-radius: .5rem;
+  animation: pulse 500ms ease-in-out;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.checkbox-mp3 input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.container .checkmark:after {
+  left: 0.45em;
+  top: 0.25em;
+  width: 0.25em;
+  height: 0.5em;
+  border: solid var(--checkbox-checkmark-border-color);
+  border-width: 0 0.15em 0.15em 0;
+  transform: rotate(45deg);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 var(--checkbox-pulse-color);
+    rotate: 20deg;
+  }
+
+  50% {
+    rotate: -20deg;
+  }
+
+  75% {
+    box-shadow: 0 0 0 10px var(--checkbox-pulse-color);
+  }
+
+  100% {
+    box-shadow: 0 0 0 13px var(--checkbox-pulse-color);
+    rotate: 0;
+  }
+}
--- a/public/styles/components/editpathbutton.css
+++ b/public/styles/components/editpathbutton.css
@@ -0,0 +1,42 @@
+.download-path {
+  margin-top: 1em;
+  font-size: 1rem;
+  color: var(--default-text-color);
+}
+
+.download-path #savePath:empty {
+  display: none;
+}
+
+.download-path #savePath {
+  font-size: 1rem;         
+  font-weight: 600;    
+  background-color: rgba(0, 0, 0, 0.1);
+  color: var(--form-input-text-color);
+  padding: 0.3em 0.6em;
+  border-radius: 6px;
+  font-family: monospace;
+  border: 1px dashed var(--form-input-border-color);
+  word-break: break-all;
+  display: inline-block;
+  max-width: 80%;
+}
+
+
+.download-path button#changePath {
+  margin-left: 0.5em;
+  background-color: var(--form-button-bg-color);
+  color: var(--form-button-text-color);
+  border: none;
+  padding: 0.3em 0.8em;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  font-size: 0.9rem;
+  font-weight: 550;
+}
+
+.download-path button#changePath:hover {
+  background-color: var(--form-button-bg-hover-color);
+}
--- a/public/styles/components/themebutton.css
+++ b/public/styles/components/themebutton.css
@@ -0,0 +1,38 @@
+.theme-switcher {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #242424;
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: #fff;
+  font-family: sans-serif;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 1000;
+}
+
+.theme-switcher label {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.theme-switcher select {
+  background: #fff;
+  border: 1px solid #242424;
+  border-radius: 6px;
+  padding: 4px 8px;
+  color: #000;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.theme-switcher select:hover,
+.theme-switcher select:focus {
+  background: #474747;
+  color: #fff;
+  outline: none;
+}
--- a/public/styles/layout/container.css
+++ b/public/styles/layout/container.css
@@ -0,0 +1,25 @@
+.container, .infos-container {
+  position: relative;      
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1em;
+  z-index: 1000;        
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#downloadStatus {
+  margin-top: 1em;
+  min-height: 1.5em;  
+  font-weight: bold;
+  text-align: center;
+  color: var(--download-status-color);
+}
+
+label {
+  display: flex;
+  align-items: center;
+  font-size: 0.9em;
+}
--- a/public/styles/layout/form.css
+++ b/public/styles/layout/form.css
@@ -0,0 +1,76 @@
+form {
+    background-color: var(--form-bg-color);
+    padding: 2em;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1em;
+}
+
+form input[type="text"],
+form input[type="url"],
+form select {
+    padding: 0.75em;
+    border: 1px solid var(--form-input-border-color);
+    border-radius: 8px;
+    background-color: var(--form-input-bg-color);
+    color: var(--form-input-text-color);
+}
+
+form input[type="checkbox"] {
+    margin-right: 0.5em;
+}
+
+form button {
+    background-color: var(--form-button-bg-color);
+    color: var(--form-button-text-color);
+    border: none;
+    padding: 0.75em;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+form button:hover {
+    background-color: var(--form-button-bg-hover-color);
+}
+
+form#downloadForm {
+    display: flex;
+    gap: 0.5em;
+    max-width: 600px;
+    width: 100%;
+    justify-content: center;
+}
+
+.checkbox-inline {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: 0.5em;
+    color: var(--form-input-text-color);
+}
+
+#UrlInput {
+    padding: 0.75em 1em;
+    border-color: var(--form-input-border-color);
+    box-shadow: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    background-color: var(--form-input-bg-color);
+    color: var(--form-input-text-color);
+}
+
+#UrlInput:focus {
+    border-color: var(--form-input-border-focus-color);
+    box-shadow: 0 0 5px rgba(0,123,255,0.4);
+    outline: none;
+    background-color: var(--form-input-bg-color);
+}
+
+#UrlInput::placeholder {
+    color: var(--form-input-placeholder-color);
+}
--- a/public/styles/layout/header.css
+++ b/public/styles/layout/header.css
@@ -0,0 +1,11 @@
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;  
+    margin-bottom: 2vw;
+}
+
+
+header h1{
+    margin-bottom: 0.2vw;
+}
--- a/public/styles/layout/videoinfo.css
+++ b/public/styles/layout/videoinfo.css
@@ -0,0 +1,81 @@
+#videoInfo {
+  margin-top: 20px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1.5em 2em;
+  background-color: var(--infos-box-color);
+  border-radius: 12px;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+  color: var(--video-info-text-color);
+  font-size: 1rem;
+  line-height: 1.5;
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
+  user-select: text;
+  word-wrap: break-word;
+}
+
+#videoInfo.visible {
+  opacity: 1;
+  max-height: 1500px; 
+  overflow: visible;
+}
+
+#videoInfo h3 {
+  font-size: 1.8rem;
+  margin-bottom: 0.6em;
+  color: var(--video-info-heading-color);
+  font-weight: 700;
+  word-break: break-word;
+}
+
+#videoInfo img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+  margin-bottom: 1em;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#videoInfo ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+#videoInfo ul li {
+  margin-bottom: 0.5em;
+  font-weight: 500;
+  color: var(--video-info-list-color);
+}
+
+#videoInfo ul li strong {
+  color: var(--video-info-list-strong-color);
+}
+
+#videoInfo ul li a {
+  color: var(--video-info-link-color);
+  text-decoration: none;
+}
+
+#videoInfo ul li a:hover,
+#videoInfo ul li a:focus {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  #videoInfo {
+    padding: 1em;
+    font-size: 0.9rem;
+  }
+
+  #videoInfo h3 {
+    font-size: 1.4rem;
+  }
+}
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -0,0 +1,65 @@
+/* Layout */
+@import url("layout/form.css");
+@import url("layout/container.css");
+@import url("layout/header.css");
+@import url("layout/videoinfo.css");
+
+/* Components */
+@import url("components/checkbox.css");
+@import url("components/themebutton.css");
+
+@import url("theme/themeimport.css");
+@import url("components/editpathbutton.css");
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+#app {
+  display: block; 
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+#app.visible {
+  opacity: 1;
+}
+
+html,body{
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+    /*outline: 2px solid red; /*<-- Utile pour le debug ça */ 
+    font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+}
+
+body {
+    margin: 0;
+    background-color: var(--background-color);
+    width: 100%;
+    height: 100%;
+    color: var(--default-text-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;   
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+header p{
+  color: var(--subtitle-color);
+}
+
+.checkbox-inline{
+  color: var(--mp3-text-color);
+}
+
+body, 
+.container, 
+input, 
+button, 
+select, 
+label {
+  transition: background-color 0.2s ease, color 0.5s ease, border-color 0.2s ease;
+}
--- a/public/styles/theme/chirac-theme.css
+++ b/public/styles/theme/chirac-theme.css
@@ -0,0 +1,90 @@
+body.chirac {
+  
+  background-image: url('../../assets/images/Chirac.png'); 
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  
+
+  --background-color: rgba(255, 255, 255, 0.85); 
+  --default-text-color: #002395;
+  --subtitle-color: #EF4135;
+  --mp3-text-color: #002395;
+  
+  /* Formulaire */
+  --form-bg-color: rgba(255, 255, 255, 0.9);
+  --form-input-bg-color: #f5f5f5;
+  --form-input-border-color: #002395;
+  --form-input-border-focus-color: #EF4135;
+  --form-input-text-color: #002395;
+  --form-input-placeholder-color: #999999;
+  --form-button-bg-color: #002395; 
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #EF4135;
+  
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #002395;
+  --checkbox-checkmark-border-color: #ffffff;
+  --checkbox-pulse-color: rgba(0, 35, 149, 0.5);
+  
+  /* Download status */
+  --download-status-color: #002395;
+  
+  /* Video Info Box */
+  --infos-box-color: rgba(255, 255, 255, 0.9);
+  --video-info-text-color: #002395;
+  --video-info-heading-color: #EF4135;
+  --video-info-list-color: #444444;
+  --video-info-list-strong-color: #000000;
+  --video-info-link-color: #002395;
+  --video-info-link-hover-color: #EF4135;
+}
+
+
+/* 
+
+Je serai le président de tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Mes chers compatriotes
+Je serai le président de tous les Français, de tous les Français
+Je mesure la difficulté de la tâche qui nous attend
+Tous les Français
+Tous les Français
+Je veux un État, je veux les Français
+Je veux un État, je veux
+Je veux un État-tat-tat-tat vigoureux
+Un État-tat-tat-tat impartial
+Un État-tat-tat-tat vigoureux
+Un État-tat-tat-tat exigeant
+Un État-tat-tat-tat
+Je serai le président de tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Un État qui n'isole pas, tous, pas, pas
+Tous, pas, tous, pas, pas
+Tous, pas, tous, pas, pas (les Français)
+Tous, tous, pas, tous, tous, pas, pas
+Tous, tous, pas, tous, tous, pas, pas
+Tous, tous, tous, pas, tous, pas, pas (les Français)
+Tous, pas, tous, tous, pas, pas
+Tous, tous, tous, pas, tous, tous, pas, pas
+Tous, tous, pas, tous, tous, pas, pas
+Tous, tous, tous-tous, tous-tous, pas, pas
+Tous, tous-tous, tous-tous, pas, pas
+Un État-tat-tat-tat vigoureux
+Un État-tat-tat-tat impartial
+Un État-tat-tat-tat exigeant
+Un État-tat-tat-tat
+Je serai le président de tous les Français
+
+*/
--- a/public/styles/theme/cyberpunk-theme.css
+++ b/public/styles/theme/cyberpunk-theme.css
@@ -0,0 +1,43 @@
+body.cyberpunk {
+
+  background-image: url('../../assets/images/Cyberpunk.webp');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+
+  /* Couleurs générales */
+  --background-color: #0d0d0d;
+  --default-text-color: #e0e0e0;
+  --subtitle-color: #ffea00;
+  --mp3-text-color: #ffea00;
+
+  /* Formulaire */
+  --form-bg-color: #141414;
+  --form-input-bg-color: #1a1a1a;
+  --form-input-border-color: #333333;
+  --form-input-border-focus-color: #ffea00;
+  --form-input-text-color: #e0e0e0;
+  --form-input-placeholder-color: #777777;
+  --form-button-bg-color: #ffea00;
+  --form-button-text-color: #0d0d0d;
+  --form-button-bg-hover-color: #d4c000;
+
+  /* Checkbox */
+  --checkbox-bg-default: #333333;
+  --checkbox-bg-checked: #ffea00;
+  --checkbox-checkmark-border-color: #0d0d0d;
+  --checkbox-pulse-color: rgba(255, 234, 0, 0.5);
+
+  /* Download status */
+  --download-status-color: #fffbd1;
+
+  /* Video Info Box */
+  --infos-box-color: #1a1a1a;
+  --video-info-text-color: #e0e0e0;
+  --video-info-heading-color: #ffea00;
+  --video-info-list-color: #cccccc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #ffea00;
+  --video-info-link-hover-color: #d4c000;
+}
--- a/public/styles/theme/dark-theme.css
+++ b/public/styles/theme/dark-theme.css
@@ -0,0 +1,36 @@
+body.dark {
+  /* Couleurs générales */
+  --background-color: #121212;               /* noir/gris très foncé */
+  --default-text-color: #e0e0e0;             /* texte clair */
+  --subtitle-color: #2196f3;                 /* bleu accent */
+  --mp3-text-color: #f5f5f5;                 /* texte checkbox */
+
+  /* Formulaire */
+  --form-bg-color: #1e1e1e;                  /* fond formulaire */
+  --form-input-bg-color: #2a2a2a;            /* fond inputs */
+  --form-input-border-color: #444444;        /* bordure */
+  --form-input-border-focus-color: #2196f3;  /* focus bleu */
+  --form-input-text-color: #f5f5f5;          /* texte clair */
+  --form-input-placeholder-color: #888888;   /* placeholder gris */
+  --form-button-bg-color: #2196f3;           /* bouton bleu */
+  --form-button-text-color: #ffffff;         /* texte bouton */
+  --form-button-bg-hover-color: #1976d2;     /* hover bleu plus foncé */
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;             /* gris moyen */
+  --checkbox-bg-checked: #2196f3;             /* bleu accent */
+  --checkbox-checkmark-border-color: #ffffff; /* blanc */
+  --checkbox-pulse-color: rgba(33, 150, 243, 0.5);
+
+  /* Download status */
+  --download-status-color: #2196f3;
+
+  /* Video Info Box */
+  --infos-box-color: #1a1a1a;
+  --video-info-text-color: #e0e0e0;
+  --video-info-heading-color: #2196f3;
+  --video-info-list-color: #cccccc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #2196f3;
+  --video-info-link-hover-color: #1976d2;
+}
--- a/public/styles/theme/default-theme.css
+++ b/public/styles/theme/default-theme.css
@@ -0,0 +1,40 @@
+:root {
+  /* Couleurs générales */
+  --background-color: #001224;            /* body background bleu nuit */
+  --default-text-color: #eee;             /* texte clair principal */
+  --subtitle-color: #007bff;              /* sous-titres, header p */
+  --mp3-text-color: #000000;              /* couleur texte checkbox inline */
+
+  /* Formulaire */
+  --form-bg-color: #ffffff;               /* fond du formulaire */
+  --form-input-bg-color: #f9f9f9;         /* fond inputs */
+  --form-input-border-color: #cccccc;     /* bordure inputs */
+  --form-input-border-focus-color: #0056b3; /* bordure focus */
+  --form-input-text-color: #333333;       /* texte inputs */
+  --form-input-placeholder-color: #aaaaaa; /* placeholder */
+  --form-button-bg-color: #007bff;         /* bouton bg */
+  --form-button-text-color: #ffffff;       /* texte bouton */
+  --form-button-bg-hover-color: #0056b3;   /* bouton hover */
+
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #3B82F6;
+  --checkbox-checkmark-border-color: #E0E0E2;
+  --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
+
+  /* Download status */
+  --download-status-color: #007bff;
+
+  /* Video Info Box */
+  --infos-box-color: #f0f0f0;
+  --video-info-text-color: #222222;
+  --video-info-heading-color: #007bff;
+  --video-info-list-color: #444444;
+  --video-info-list-strong-color: #000000;
+  --video-info-link-color: #007bff;
+  --video-info-link-hover-color: #0056b3;
+}
+
+body.default .download-path #savePath {
+  color: #ffffff;
+}
--- a/public/styles/theme/drift-theme.css
+++ b/public/styles/theme/drift-theme.css
@@ -0,0 +1,47 @@
+body.drift {
+
+    background-image: url('../../assets/images/Drift.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+
+    /* Palette principale */
+    --background-color: #0f1218;
+    --default-text-color: #3d4b61;
+    --subtitle-color: #1a1a1a;
+    --mp3-text-color: #c0d4ff;
+
+    /* Formulaire */
+    --form-bg-color: #1e222a;         
+    --form-input-bg-color: #13171d; 
+    --form-input-border-color: #3b4b6d;
+    --form-input-border-focus-color: #6ea8ff; 
+    --form-input-text-color: #f0f4ff;
+    --form-input-placeholder-color: #7a8fae;
+    --form-button-bg-color: #2a2979;
+    --form-button-text-color: #ffffff;
+    --form-button-bg-hover-color: #353393;
+
+    /* Checkbox */
+    --checkbox-bg-default: #2a2e38;
+    --checkbox-bg-checked: #2a2979;
+    --checkbox-checkmark-border-color: #ffffff;
+    --checkbox-pulse-color: rgba(76,108,255,0.3);
+
+    /* Download status */
+    --download-status-color: #ff8e8e;
+
+    /* Video Info Box */
+    --infos-box-color: #1e222a;
+    --video-info-text-color: #e8e8f0;
+    --video-info-heading-color: #9ab6ff;
+    --video-info-list-color: #c0d4ff;
+    --video-info-list-strong-color: #ffffff;
+    --video-info-link-color: #4c6cff;
+    --video-info-link-hover-color: #6c8dff;
+    }
+
+
+body.drift .download-path{
+    color: #ededed;
+}
--- a/public/styles/theme/fanatic-theme.css
+++ b/public/styles/theme/fanatic-theme.css
@@ -0,0 +1,36 @@
+body.fanatic{
+  /* Couleurs générales */
+  --background-color: #121212;
+  --default-text-color: #eee;
+  --subtitle-color: #FF5900;
+  --mp3-text-color: #ffffff;
+
+  /* Formulaire */
+  --form-bg-color: #1e1e1e;
+  --form-input-bg-color: #2b2b2b;
+  --form-input-border-color: #333333;
+  --form-input-border-focus-color: #FF5900;
+  --form-input-text-color: #eeeeee;
+  --form-input-placeholder-color: #666666;
+  --form-button-bg-color: #FF5900;
+  --form-button-text-color: #121212;
+  --form-button-bg-hover-color: #e65500;
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;
+  --checkbox-bg-checked: #ff6600;
+  --checkbox-checkmark-border-color: #eee;
+  --checkbox-pulse-color: rgba(255, 102, 0, 0.5);
+
+  /* Download status */
+  --download-status-color: #FF5900;
+
+  /* Video Info Box */
+  --infos-box-color: #222222;
+  --video-info-text-color: #eee;
+  --video-info-heading-color: #FF5900;
+  --video-info-list-color: #ccc;
+  --video-info-list-strong-color: #fff;
+  --video-info-link-color: #FF5900;
+  --video-info-link-hover-color: #e65500;
+}
--- a/public/styles/theme/light-theme.css
+++ b/public/styles/theme/light-theme.css
@@ -0,0 +1,36 @@
+body.light {
+  /* Couleurs générales */
+  --background-color: #dadada;
+  --default-text-color: #222222;
+  --subtitle-color: #007bff;
+  --mp3-text-color: #000000;
+
+  /* Formulaire */
+  --form-bg-color: #ffffff;
+  --form-input-bg-color: #fafafa;
+  --form-input-border-color: #cccccc;
+  --form-input-border-focus-color: #007bff;
+  --form-input-text-color: #333333;
+  --form-input-placeholder-color: #888888;
+  --form-button-bg-color: #007bff;
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #0056b3;
+
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #007bff;
+  --checkbox-checkmark-border-color: #ffffff;
+  --checkbox-pulse-color: rgba(0, 123, 255, 0.4);
+
+  /* Download status */
+  --download-status-color: #007bff;
+
+  /* Video Info Box */
+  --infos-box-color: #ffffff;
+  --video-info-text-color: #222222;
+  --video-info-heading-color: #007bff;
+  --video-info-list-color: #444444;
+  --video-info-list-strong-color: #000000;
+  --video-info-link-color: #007bff;
+  --video-info-link-hover-color: #0056b3;
+}
--- a/public/styles/theme/neon-theme.css
+++ b/public/styles/theme/neon-theme.css
@@ -0,0 +1,47 @@
+body.neon {
+
+    background: (url("../../assets/images/drift.jpg"));
+    background-image: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* dégradé sombre violet/bleu */
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+
+    /* Couleurs générales */
+    --background-color: #1b1b2f;
+    --default-text-color: #e0e0ff;
+    --subtitle-color: #a3a3ff;
+    --mp3-text-color: #c0c0ff;
+
+    /* Formulaire */
+    --form-bg-color: #2c2c4a;
+    --form-input-bg-color: #1f1f3a;
+    --form-input-border-color: #5858f0;
+    --form-input-border-focus-color: #a3a3ff;
+    --form-input-text-color: #ffffff;
+    --form-input-placeholder-color: #8888ff;
+    --form-button-bg-color: #5858f0;
+    --form-button-text-color: #ffffff;
+    --form-button-bg-hover-color: #7a7aff;
+
+    /* Checkbox */
+    --checkbox-bg-default: #302b63;
+    --checkbox-bg-checked: #5858f0;
+    --checkbox-checkmark-border-color: #ffffff;
+    --checkbox-pulse-color: rgba(88,88,240,0.3);
+
+    /* Download status */
+    --download-status-color: #a3a3ff;
+
+    /* Video Info Box */
+    --infos-box-color: #2c2c4a;
+    --video-info-text-color: #e0e0ff;
+    --video-info-heading-color: #a3a3ff;
+    --video-info-list-color: #c0c0ff;
+    --video-info-list-strong-color: #ffffff;
+    --video-info-link-color: #5858f0;
+    --video-info-link-hover-color: #7a7aff;
+}
+
+body.neon .download-path {
+  color: var(--default-text-color);
+}
--- a/public/styles/theme/nf-theme.css
+++ b/public/styles/theme/nf-theme.css
@@ -0,0 +1,46 @@
+body.nf {
+
+  background-image: url('../../assets/images/NF.jpg');
+  background-size: cover;
+  background-position: 70% center; 
+  background-attachment: fixed;
+
+  /* Couleurs générales */
+  --background-color: #1a1a1a;
+  --default-text-color: #e6dfd5;
+  --subtitle-color: #f5f0e6;
+  --mp3-text-color: #d8cfc2;
+
+  /* Formulaire */
+  --form-bg-color: #2a2a2a;
+  --form-input-bg-color: #222222;
+  --form-input-border-color: #4a4036;
+  --form-input-border-focus-color: #cbb89d;
+  --form-input-text-color: #f0e8dd;
+  --form-input-placeholder-color: #9a8f80;
+  --form-button-bg-color: #cbb89d;
+  --form-button-text-color: #1a1a1a;
+  --form-button-bg-hover-color: #b7a588;
+
+  /* Checkbox */
+  --checkbox-bg-default: #4a4036;
+  --checkbox-bg-checked: #cbb89d;
+  --checkbox-checkmark-border-color: #1a1a1a;
+  --checkbox-pulse-color: rgba(203,184,157,0.3);
+
+  /* Download status */
+  --download-status-color: #cbb89d;
+
+  /* Video Info Box */
+  --infos-box-color: #2a2a2a;
+  --video-info-text-color: #e6dfd5;
+  --video-info-heading-color: #f5f0e6;
+  --video-info-list-color: #d8cfc2;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #cbb89d;
+  --video-info-link-hover-color: #b7a588;
+}
+
+body.nf .download-path {
+  color: var(--default-text-color);
+}
--- a/public/styles/theme/spicy-theme.css
+++ b/public/styles/theme/spicy-theme.css
@@ -0,0 +1,43 @@
+body.spicy {
+
+  background-image: url('../../assets/images/spicy.webp');  
+  background-size:contain;
+  background-position: center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+
+  /* Couleurs générales */
+  --background-color: #121212;
+  --default-text-color: #581010;
+  --subtitle-color: #3d0909;
+  --mp3-text-color: #ffffff;
+
+  /* Formulaire */
+  --form-bg-color: #1a1a1a;
+  --form-input-bg-color: #2b2b2b;
+  --form-input-border-color: #444444;
+  --form-input-border-focus-color: #ff1a1a;
+  --form-input-text-color: #eeeeee;
+  --form-input-placeholder-color: #888888;
+  --form-button-bg-color: #ff1a1a;
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #cc0000;
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;
+  --checkbox-bg-checked: #ff1a1a;
+  --checkbox-checkmark-border-color: #f5f5f5;
+  --checkbox-pulse-color: rgba(255, 26, 26, 0.5);
+
+  /* Download status */
+  --download-status-color: #ffffff;
+
+  /* Video Info Box */
+  --infos-box-color: #1a1a1a;
+  --video-info-text-color: #f5f5f5;
+  --video-info-heading-color: #ff1a1a;
+  --video-info-list-color: #cccccc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #ff1a1a;
+  --video-info-link-hover-color: #cc0000;
+}
--- a/public/styles/theme/themeimport.css
+++ b/public/styles/theme/themeimport.css
@@ -0,0 +1,11 @@
+@import url("chirac-theme.css");
+@import url("dark-theme.css");
+@import url("default-theme.css");
+@import url("fanatic-theme.css");
+@import url("light-theme.css");
+@import url("cyberpunk-theme.css");
+@import url("spicy-theme.css");
+@import url("vilbrequin-theme.css");
+@import url("nf-theme.css");
+@import url("drift-theme.css");
+@import url("neon-theme.css");
--- a/public/styles/theme/vilbrequin-theme.css
+++ b/public/styles/theme/vilbrequin-theme.css
@@ -0,0 +1,46 @@
+body.vilbrequin {
+
+  background-image: url('../../assets/images/Vilbrequin.webp');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+
+  /* Couleurs générales */
+  --background-color: #0a1f3d;
+  --default-text-color: #535353;
+  --subtitle-color: #001696;
+  --mp3-text-color: #ffffff;
+
+  /* Formulaire */
+  --form-bg-color: #12284f;
+  --form-input-bg-color: #1c3760;
+  --form-input-border-color: #2a4b80;
+  --form-input-border-focus-color: #00bfff;
+  --form-input-text-color: #f0f0f0;
+  --form-input-placeholder-color: #b0c4de;
+  --form-button-bg-color: #ffd700;
+  --form-button-text-color: #0a1f3d;  
+  --form-button-bg-hover-color: #e6c200;
+
+  /* Checkbox */
+  --checkbox-bg-default: #2a4b80;
+  --checkbox-bg-checked: #00bfff;
+  --checkbox-checkmark-border-color: #f0f0f0;
+  --checkbox-pulse-color: rgba(0,191,255,0.5);
+
+  /* Download status */
+  --download-status-color: #ffd700;
+
+  /* Video Info Box */
+  --infos-box-color: #12284f;
+  --video-info-text-color: #f0f0f0;
+  --video-info-heading-color: #00bfff;
+  --video-info-list-color: #dcdcdc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #00bfff;
+  --video-info-link-hover-color: #009acd;
+}
+
+body.vilbrequin .download-path{
+  color: white;
+}
--- a/public/styles/variables.css
+++ b/public/styles/variables.css
@@ -0,0 +1,36 @@
+:root {
+  /* Couleurs générales */
+  --background-color: #001224;
+  --default-text-color: #eee;
+  --subtitle-color: #007bff;
+  --mp3-text-color: #000000;
+
+  /* Formulaire */
+  --form-bg-color: #ffffff;
+  --form-input-bg-color: #f9f9f9;
+  --form-input-border-color: #cccccc;
+  --form-input-border-focus-color: #0056b3;
+  --form-input-text-color: #333333;
+  --form-input-placeholder-color: #aaaaaa;
+  --form-button-bg-color: #007bff;
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #0056b3;
+
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #3B82F6;
+  --checkbox-checkmark-border-color: #E0E0E2;
+  --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
+
+  /* Download status */
+  --download-status-color: #007bff;
+
+  /* Video Info Box */
+  --infos-box-color: #f0f0f0;
+  --video-info-text-color: #222222;
+  --video-info-heading-color: #007bff;
+  --video-info-list-color: #444444;
+  --video-info-list-strong-color: #000000;
+  --video-info-link-color: #007bff;
+  --video-info-link-hover-color: #0056b3;
+}