From 2df558e10f1d5c85a462f7862d4ea6dd59b99421 Mon Sep 17 00:00:00 2001
From: Gato <cedric@goutailler-olivier.fr>
Date: Fri, 19 Jun 2026 13:18:10 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20remplacer=20le=20panneau=20CSS=20pa?=
 =?UTF-8?q?r=20une=20modale=20centr=C3=A9e=20avec=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.html |  32 +++++++---
 src/main.js    |  67 +++++++++++++-------
 src/style.css  | 167 ++++++++++++++++++++++++++++++++-----------------
 3 files changed, 177 insertions(+), 89 deletions(-)

diff --git a/src/index.html b/src/index.html
index 0cfaea6..f33b577 100644
--- a/src/index.html
+++ b/src/index.html
@@ -44,16 +44,32 @@
       Personnaliser le CSS
     </button>
     <button id="btn-back" class="btn-back">← Accueil</button>
+  </div>
 
-    <div id="css-editor-panel" class="css-editor-panel hidden">
-      <div class="css-editor-panel__header">
-        <span>CSS personnalisé</span>
-        <button id="btn-css-close" class="css-editor-panel__close">✕</button>
+  <!-- Modale CSS -->
+  <div id="css-modal-overlay" class="css-modal-overlay hidden">
+    <div class="css-modal">
+      <div class="css-modal__header">
+        <span class="css-modal__title">CSS personnalisé</span>
+        <button id="btn-css-close" class="css-modal__close">✕</button>
       </div>
-      <textarea id="css-editor" class="css-editor__textarea" placeholder="/* Entrez votre CSS personnalisé ici */&#10;/* Exemple : .content { font-size: 18px; } */"></textarea>
-      <div class="css-editor-panel__footer">
-        <button id="btn-css-reset" class="css-editor-panel__btn css-editor-panel__btn--secondary">Réinitialiser</button>
-        <button id="btn-css-apply" class="css-editor-panel__btn css-editor-panel__btn--primary">Appliquer</button>
+      <div class="css-modal__tabs" id="css-tabs">
+        <button class="css-modal__tab active" data-tab="general">Arrière-scène</button>
+        <button class="css-modal__tab" data-tab="police">Police</button>
+        <button class="css-modal__tab" data-tab="contenu">Contenu fond</button>
+        <button class="css-modal__tab" data-tab="avance">Développement</button>
+      </div>
+      <div class="css-modal__body">
+        <p class="css-modal__description">Personnalisez l'apparence de vos pages en modifiant le CSS ci-dessous. Les styles s'appliquent à l'onglet actif.</p>
+        <textarea id="css-editor" class="css-modal__editor" placeholder="/* Entrez votre CSS ici */&#10;/* Exemple : .content { font-size: 18px; } */"></textarea>
+      </div>
+      <div class="css-modal__footer">
+        <input type="text" id="css-config-name" class="css-modal__config-name" placeholder="Nom de la configuration..." />
+        <div class="css-modal__footer-actions">
+          <button id="btn-css-reset" class="css-modal__btn css-modal__btn--ghost">Réinitialiser</button>
+          <button id="btn-css-cancel" class="css-modal__btn css-modal__btn--ghost">Fermer</button>
+          <button id="btn-css-apply" class="css-modal__btn css-modal__btn--primary">★ Enregistrer</button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/main.js b/src/main.js
index 78f6782..e88df80 100644
--- a/src/main.js
+++ b/src/main.js
@@ -274,48 +274,71 @@ document.getElementById('btn-back').addEventListener('click', () => {
 });
 
 // ── CSS personnalisé ──
-const CSS_STORAGE_KEY = 'pena_custom_css';
+const CSS_TABS = ['general', 'police', 'contenu', 'avance'];
+let activeTab = CSS_TABS[0];
 
-function applyCustomCss(css) {
+function cssKey(tab) { return `pena_css_${tab}`; }
+
+function loadTabCss(tab) { return localStorage.getItem(cssKey(tab)) ?? ''; }
+
+function saveTabCss(tab, css) {
+  if (css.trim()) localStorage.setItem(cssKey(tab), css);
+  else localStorage.removeItem(cssKey(tab));
+}
+
+function buildCombinedCss() {
+  return CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n');
+}
+
+function applyCustomCss() {
   let styleEl = document.getElementById('pena-custom-style');
   if (!styleEl) {
     styleEl = document.createElement('style');
     styleEl.id = 'pena-custom-style';
     document.head.appendChild(styleEl);
   }
-  styleEl.textContent = css;
+  styleEl.textContent = buildCombinedCss();
 }
 
-function loadCustomCss() {
-  return localStorage.getItem(CSS_STORAGE_KEY) ?? '';
-}
+applyCustomCss();
 
-const savedCss = loadCustomCss();
-if (savedCss) applyCustomCss(savedCss);
-
-const btnCustomizeCss = document.getElementById('btn-customize-css');
-const cssEditorPanel = document.getElementById('css-editor-panel');
+const cssModalOverlay = document.getElementById('css-modal-overlay');
 const cssEditor = document.getElementById('css-editor');
 
-cssEditor.value = loadCustomCss();
+function openCssModal() {
+  cssEditor.value = loadTabCss(activeTab);
+  cssModalOverlay.classList.remove('hidden');
+}
 
-btnCustomizeCss.addEventListener('click', () => {
-  cssEditorPanel.classList.toggle('hidden');
+function closeCssModal() {
+  cssModalOverlay.classList.add('hidden');
+}
+
+document.getElementById('btn-customize-css').addEventListener('click', openCssModal);
+document.getElementById('btn-css-close').addEventListener('click', closeCssModal);
+document.getElementById('btn-css-cancel').addEventListener('click', closeCssModal);
+
+cssModalOverlay.addEventListener('click', (e) => {
+  if (e.target === cssModalOverlay) closeCssModal();
 });
 
-document.getElementById('btn-css-close').addEventListener('click', () => {
-  cssEditorPanel.classList.add('hidden');
+document.getElementById('css-tabs').addEventListener('click', (e) => {
+  const tab = e.target.closest('.css-modal__tab');
+  if (!tab) return;
+  saveTabCss(activeTab, cssEditor.value);
+  activeTab = tab.dataset.tab;
+  document.querySelectorAll('.css-modal__tab').forEach(t => t.classList.toggle('active', t === tab));
+  cssEditor.value = loadTabCss(activeTab);
 });
 
 document.getElementById('btn-css-apply').addEventListener('click', () => {
-  const css = cssEditor.value.trim();
-  applyCustomCss(css);
-  localStorage.setItem(CSS_STORAGE_KEY, css);
-  cssEditorPanel.classList.add('hidden');
+  saveTabCss(activeTab, cssEditor.value);
+  applyCustomCss();
+  closeCssModal();
 });
 
 document.getElementById('btn-css-reset').addEventListener('click', () => {
+  CSS_TABS.forEach(t => localStorage.removeItem(cssKey(t)));
   cssEditor.value = '';
-  applyCustomCss('');
-  localStorage.removeItem(CSS_STORAGE_KEY);
+  applyCustomCss();
 });
diff --git a/src/style.css b/src/style.css
index 4102cf1..da8788c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -484,96 +484,145 @@ body {
   border-color: rgba(255,255,255,0.35);
   background: rgba(255,255,255,0.06);
 }
-.btn-customize-css__icon {
-  font-size: 15px;
-  opacity: 0.8;
-}
+.btn-customize-css__icon { font-size: 15px; opacity: 0.8; }
 
-/* ── CSS editor panel ── */
-.css-editor-panel {
+/* ── CSS modal ── */
+.css-modal-overlay {
   position: fixed;
-  bottom: 120px;
-  left: 12px;
-  width: 240px;
-  background: #12132a;
-  border: 1px solid rgba(255,255,255,0.15);
-  border-radius: 10px;
-  z-index: 101;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(2px);
+}
+.css-modal {
+  width: 580px;
+  max-height: 82vh;
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  overflow: hidden;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
 }
-.css-editor-panel__header {
+.css-modal__header {
+  background: #1a1b2e;
+  padding: 14px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 14px;
-  border-bottom: 1px solid rgba(255,255,255,0.08);
-  color: rgba(255,255,255,0.7);
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  flex-shrink: 0;
 }
-.css-editor-panel__close {
+.css-modal__title {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+}
+.css-modal__close {
   background: transparent;
   border: none;
-  color: rgba(255,255,255,0.4);
-  font-size: 13px;
+  color: rgba(255,255,255,0.45);
+  font-size: 14px;
   cursor: pointer;
-  padding: 2px 4px;
+  padding: 3px 6px;
   border-radius: 4px;
   font-family: inherit;
   transition: color 0.15s, background 0.15s;
+  line-height: 1;
 }
-.css-editor-panel__close:hover {
-  color: #fff;
-  background: rgba(255,255,255,0.08);
+.css-modal__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
+.css-modal__tabs {
+  display: flex;
+  border-bottom: 1px solid #e8e8ee;
+  background: #f6f6fa;
+  flex-shrink: 0;
 }
-.css-editor__textarea {
-  width: 100%;
-  height: 180px;
-  background: #0e0f24;
+.css-modal__tab {
+  padding: 10px 18px;
+  background: transparent;
   border: none;
-  color: rgba(255,255,255,0.8);
+  border-bottom: 2px solid transparent;
+  font-family: 'Poppins', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  color: #888;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+.css-modal__tab:hover { color: #444; }
+.css-modal__tab.active { color: #ff5577; border-bottom-color: #ff5577; font-weight: 600; }
+.css-modal__body {
+  padding: 18px 20px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+.css-modal__description {
+  font-size: 12px;
+  color: #999;
+  margin: 0;
+  line-height: 1.5;
+}
+.css-modal__editor {
+  flex: 1;
+  min-height: 200px;
+  background: #1e1e2e;
+  border: none;
+  border-radius: 6px;
+  color: #cdd6f4;
   font-family: 'Roboto Mono', monospace;
-  font-size: 11px;
-  line-height: 1.6;
-  padding: 12px;
+  font-size: 12px;
+  line-height: 1.65;
+  padding: 14px 16px;
   resize: none;
   outline: none;
 }
-.css-editor__textarea::placeholder {
-  color: rgba(255,255,255,0.2);
-}
-.css-editor-panel__footer {
+.css-modal__editor::placeholder { color: rgba(255,255,255,0.18); }
+.css-modal__footer {
+  padding: 12px 20px;
+  border-top: 1px solid #e8e8ee;
   display: flex;
-  gap: 8px;
-  padding: 10px 12px;
-  border-top: 1px solid rgba(255,255,255,0.08);
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  background: #fafafa;
 }
-.css-editor-panel__btn {
+.css-modal__config-name {
   flex: 1;
-  padding: 6px 10px;
-  border: none;
+  border: 1px solid #ddd;
   border-radius: 6px;
+  padding: 7px 12px;
   font-family: 'Poppins', sans-serif;
   font-size: 12px;
+  color: #444;
+  outline: none;
+  transition: border-color 0.15s;
+  background: #fff;
+}
+.css-modal__config-name:focus { border-color: #ff5577; }
+.css-modal__config-name::placeholder { color: #bbb; }
+.css-modal__footer-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.css-modal__btn {
+  padding: 7px 16px;
+  border-radius: 6px;
+  font-family: 'Poppins', sans-serif;
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.15s;
+  border: none;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
 }
-.css-editor-panel__btn--primary {
-  background: #ff5577;
-  color: #fff;
-}
-.css-editor-panel__btn--primary:hover { background: #ff3355; }
-.css-editor-panel__btn--secondary {
-  background: rgba(255,255,255,0.08);
-  color: rgba(255,255,255,0.7);
-}
-.css-editor-panel__btn--secondary:hover { background: rgba(255,255,255,0.14); }
+.css-modal__btn--primary { background: #ff5577; color: #fff; }
+.css-modal__btn--primary:hover { background: #ff3355; }
+.css-modal__btn--ghost { background: transparent; color: #777; border: 1px solid #ddd; }
+.css-modal__btn--ghost:hover { background: #f0f0f4; color: #444; }
 
 /* ── Back button ── */
 .btn-back {