feat: ajout des badges thèmes rapides dans le modal CSS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/index.html

@@ -74,6 +74,15 @@
         <button class="css-modal__tab" data-tab="avance">Développement</button>
       </div>
       <div class="css-modal__body">
+        <div class="css-modal__quick-themes">
+          <p class="css-modal__quick-themes-label">Thèmes rapides</p>
+          <div class="css-modal__quick-themes-list">
+            <button class="css-modal__theme-badge" data-theme="dark">Mode sombre</button>
+            <button class="css-modal__theme-badge" data-theme="sepia">Sépia</button>
+            <button class="css-modal__theme-badge" data-theme="large-text">Grand texte</button>
+            <button class="css-modal__theme-badge" data-theme="emerald">Accent émeraude</button>
+          </div>
+        </div>
         <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>

src/style.css

@@ -646,6 +646,40 @@ body {
 .css-modal__btn--ghost { background: transparent; color: #777; border: 1px solid #ddd; }
 .css-modal__btn--ghost:hover { background: #f0f0f4; color: #444; }
 
+/* ── Quick themes ── */
+.css-modal__quick-themes { flex-shrink: 0; }
+.css-modal__quick-themes-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #aaa;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0 0 8px;
+}
+.css-modal__quick-themes-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.css-modal__theme-badge {
+  padding: 6px 14px;
+  border: 1px solid #ddd;
+  border-radius: 999px;
+  background: #fff;
+  font-family: 'Poppins', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  color: #555;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+.css-modal__theme-badge:hover { border-color: #bbb; color: #222; background: #f8f8f8; }
+.css-modal__theme-badge.active {
+  border-color: #ff5577;
+  color: #ff5577;
+  background: rgba(255, 85, 119, 0.06);
+}
+
 /* ── Back button ── */
 .btn-back {
   width: 100%;

src/ui/css-modal.js

@@ -1,6 +1,34 @@
 const CSS_TABS = ['general', 'police', 'contenu', 'avance'];
 let activeTab = CSS_TABS[0];
 
+const QUICK_THEME_KEY = 'pena_quick_theme';
+
+const QUICK_THEMES = {
+  dark: `.content { background: #1e1e2e; color: #cdd6f4; }
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #cdd6f4; }
+.content p, .content ul li, .content ol li { color: #cdd6f4; }
+.content a { color: #89b4fa; }
+.content a:visited { color: #cba6f7; }
+.content code { background: #313244; color: #cba6f7; }
+.content pre { background: #313244; }
+.content blockquote { border-color: #6c7086; color: #a6adc8; }
+.content table td, .content table th { color: #cdd6f4; }`,
+
+  sepia: `.content { background: #f4ecd8; }
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #5c4a1e; }
+.content p, .content ul li, .content ol li { color: #5c4a1e; }
+.content a { color: #7a5c2e; }
+.content code { background: #e8d5b0; color: #5c4a1e; }
+.content pre { background: #e8d5b0; }`,
+
+  'large-text': `.content { font-size: 18px; }
+.content p { line-height: 1.8; }`,
+
+  emerald: `.content a:hover { color: #10b981; }
+.content table th { border-bottom-color: #10b981; }
+.content table td { border-bottom-color: rgba(16, 185, 129, 0.25); }`,
+};
+
 function cssKey(tab) { return `pena_css_${tab}`; }
 
 function loadTabCss(tab) { return localStorage.getItem(cssKey(tab)) ?? ''; }
@@ -17,11 +45,22 @@ function applyCustomCss() {
     styleEl.id = 'pena-custom-style';
     document.head.appendChild(styleEl);
   }
-  styleEl.textContent = CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n');
+  const tabCss = CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n');
+  const activeTheme = localStorage.getItem(QUICK_THEME_KEY);
+  const themeCss = activeTheme ? (QUICK_THEMES[activeTheme] ?? '') : '';
+  styleEl.textContent = [tabCss, themeCss].filter(Boolean).join('\n');
+}
+
+function syncThemeBadges() {
+  const activeTheme = localStorage.getItem(QUICK_THEME_KEY);
+  document.querySelectorAll('.css-modal__theme-badge').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.theme === activeTheme);
+  });
 }
 
 export function initCssModal() {
   applyCustomCss();
+  syncThemeBadges();
 
   const cssModalOverlay = document.getElementById('css-modal-overlay');
   const cssEditor = document.getElementById('css-editor');
@@ -60,7 +99,20 @@ export function initCssModal() {
 
   document.getElementById('btn-css-reset').addEventListener('click', () => {
     CSS_TABS.forEach(t => localStorage.removeItem(cssKey(t)));
+    localStorage.removeItem(QUICK_THEME_KEY);
     cssEditor.value = '';
     applyCustomCss();
+    syncThemeBadges();
+  });
+
+  document.querySelectorAll('.css-modal__theme-badge').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const theme = btn.dataset.theme;
+      const current = localStorage.getItem(QUICK_THEME_KEY);
+      if (current === theme) localStorage.removeItem(QUICK_THEME_KEY);
+      else localStorage.setItem(QUICK_THEME_KEY, theme);
+      applyCustomCss();
+      syncThemeBadges();
+    });
   });
 }