From ae0f46160b81331bc5e8d3857bd4f69051f5d2bc Mon Sep 17 00:00:00 2001
From: "LIABEUF, Stephane (External)" <ext-stephane.liabeuf@limagrain.com>
Date: Sun, 17 May 2026 21:59:01 +0200
Subject: [PATCH] feat: move theme switcher to fixed burger menu, positioned in
 corner bracket (cyberpunk)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 110 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 82 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index 9455c34..c8c6c7e 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,8 @@
   <style>
     @media print {
 
-      #theme-switcher,
+      .burger-btn,
+      #theme-menu,
       .cursor-dot,
       .hero-scroll,
       .corner-bracket {
@@ -306,17 +307,43 @@
       }
     }
 
-    /* ════ THEME SWITCHER ════ */
-    #theme-switcher {
+    /* ════ BURGER + THEME DROPDOWN ════ */
+    .burger-btn {
       position: fixed;
-      bottom: 32px;
-      right: 32px;
-      z-index: 10001;
+      top: 16px;
+      right: 24px;
+      z-index: 10003;
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 8px;
       display: flex;
       flex-direction: column;
-      gap: 8px;
-      filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .4));
+      gap: 5px;
+      border-radius: 4px;
+      transition: opacity .2s;
     }
+    .burger-btn:hover { opacity: .7; }
+    .burger-btn span {
+      display: block;
+      width: 22px;
+      height: 2px;
+      border-radius: 2px;
+      transition: background .3s;
+    }
+
+    #theme-menu {
+      position: fixed;
+      top: 56px;
+      right: 16px;
+      z-index: 10002;
+      display: none;
+      flex-direction: column;
+      gap: 8px;
+      padding: 16px;
+      min-width: 200px;
+    }
+    #theme-menu.open { display: flex; }
 
     .theme-btn {
       cursor: pointer;
@@ -328,16 +355,10 @@
       border-radius: 4px;
       transition: transform .15s, opacity .15s;
       white-space: nowrap;
+      text-align: left;
     }
-
-    .theme-btn:hover {
-      transform: scale(1.05);
-    }
-
-    .theme-btn.active {
-      outline: 3px solid #fff;
-      outline-offset: 2px;
-    }
+    .theme-btn:hover { transform: scale(1.03); }
+    .theme-btn.active { outline: 3px solid #fff; outline-offset: 2px; }
 
     .theme-btn.btn-cyberpunk {
       background: #00f5ff;
@@ -346,7 +367,6 @@
       font-size: 10px;
       letter-spacing: .12em;
     }
-
     .theme-btn.btn-bd {
       background: #FFE033;
       color: #1a1a1a;
@@ -355,7 +375,6 @@
       letter-spacing: .08em;
       border: 3px solid #1a1a1a;
     }
-
     .theme-btn.btn-itpro {
       background: #1a56db;
       color: #fff;
@@ -364,6 +383,28 @@
       font-weight: 600;
     }
 
+    /* burger par thème */
+    [data-theme="cyberpunk"] .burger-btn { top: 24px; right: 64px; }
+    [data-theme="cyberpunk"] .burger-btn span { background: #00f5ff; }
+    [data-theme="cyberpunk"] #theme-menu {
+      background: #050810;
+      border: 1px solid rgba(0,245,255,.2);
+      box-shadow: 0 8px 32px rgba(0,0,0,.6);
+    }
+    [data-theme="bd"] .burger-btn span { background: #1a1a1a; }
+    [data-theme="bd"] #theme-menu {
+      background: #FFE033;
+      border: 3px solid #1a1a1a;
+      box-shadow: 4px 4px 0 #1a1a1a;
+    }
+    [data-theme="itpro"] .burger-btn span { background: #1a56db; }
+    [data-theme="itpro"] #theme-menu {
+      background: #fff;
+      border: 1px solid #e2e8f0;
+      box-shadow: 0 8px 24px rgba(0,0,0,.1);
+      border-radius: 8px;
+    }
+
     /* ════ TRANSITIONS ════ */
     body {
       transition: background .4s, color .4s;
@@ -2277,11 +2318,6 @@
         font-size: 10px
       }
 
-      #theme-switcher {
-        bottom: 16px;
-        right: 16px
-      }
-
       .theme-btn {
         padding: 8px 12px;
         font-size: 11px
@@ -2387,9 +2423,12 @@
   <!-- Cursor -->
   <div class="cursor-dot" id="cursorDot"></div>
 
-  <!-- Theme switcher -->
-  <div id="theme-switcher">
-    <button class="theme-btn btn-cyberpunk active" onclick="setTheme('cyberpunk')">⚡ CYBERPUNK</button>
+  <!-- Burger + Theme menu (fixed, hors de tout backdrop-filter) -->
+  <button class="burger-btn" id="burgerBtn" onclick="toggleThemeMenu()" aria-label="Changer de thème">
+    <span></span><span></span><span></span>
+  </button>
+  <div id="theme-menu">
+    <button class="theme-btn btn-cyberpunk" onclick="setTheme('cyberpunk')">⚡ CYBERPUNK</button>
     <button class="theme-btn btn-bd" onclick="setTheme('bd')">💥 BANDE DESSINÉE</button>
     <button class="theme-btn btn-itpro" onclick="setTheme('itpro')">💼 IT PROFESSIONNEL</button>
   </div>
@@ -2631,10 +2670,25 @@
     // ══════════════════════════════════════════════
     //  THÈME
     // ══════════════════════════════════════════════
+    function toggleThemeMenu() {
+      const menu = document.getElementById('theme-menu');
+      if (menu) menu.classList.toggle('open');
+    }
+
+    document.addEventListener('click', e => {
+      const menu = document.getElementById('theme-menu');
+      const btn = document.getElementById('burgerBtn');
+      if (menu && btn && !btn.contains(e.target) && !menu.contains(e.target)) {
+        menu.classList.remove('open');
+      }
+    });
+
     function setTheme(theme) {
       document.documentElement.setAttribute('data-theme', theme);
       document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
-      document.querySelector('.btn-' + theme).classList.add('active');
+      document.querySelectorAll('.btn-' + theme).forEach(b => b.classList.add('active'));
+      const menu = document.getElementById('theme-menu');
+      if (menu) menu.classList.remove('open');
       // re-animer les barres
       document.querySelectorAll('.skill-fill').forEach(f => { f.style.width = '0'; });
       setTimeout(() => {