From d25fff55058e2861f59095790f452b94c12c43e6 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 3 Jun 2026 11:43:34 -0400
Subject: [PATCH] Fix: hamburger first-click, add search clear X button

---
 frontend/index.html |  3 ++-
 frontend/style.css  | 30 +++++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index ef7deaa..4146b10 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -762,7 +762,7 @@
   <div class="editor-modal" id="help-modal">
     <div class="editor-container help-container">
       <div class="editor-header">
-        <button class="help-hamburger" id="help-hamburger" title="Sommaire" aria-label="Afficher le sommaire" onclick="var n=document.getElementById('help-nav');if(n){n.style.display=n.style.display==='none'?'flex':'none'}">
+        <button class="help-hamburger" id="help-hamburger" title="Sommaire" aria-label="Afficher le sommaire" onclick="var n=document.getElementById('help-nav');if(n){var d=n.style.display;n.style.display=(d==='none'||d==='')?'flex':'none'}">
           <i data-lucide="menu" style="width:18px;height:18px"></i>
         </button>
         <div class="editor-title" id="help-title">Guide d'utilisation ObsiGate</div>
@@ -779,6 +779,7 @@
           </div>
           <div class="help-nav-search-wrap">
             <input type="text" class="help-nav-search" id="help-nav-search" placeholder="Rechercher dans l'aide..." autocomplete="off" spellcheck="false">
+            <button class="help-search-clear" id="help-search-clear" title="Effacer la recherche" aria-label="Effacer" onclick="var s=document.getElementById('help-nav-search');if(s){s.value='';s.dispatchEvent(new Event('input'));s.focus()}">✕</button>
           </div>
           <ul class="help-nav-list" id="help-nav-list">
                       <li><a href="#help-intro" class="help-nav-link">📘 Introduction</a></li>
diff --git a/frontend/style.css b/frontend/style.css
index 6ebb95c..ecc0289 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -2227,10 +2227,13 @@ select {
 .help-nav-search-wrap {
   padding: 0 12px 8px;
   flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 .help-nav-search {
   width: 100%;
-  padding: 7px 10px;
+  padding: 7px 30px 7px 10px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--bg-primary);
@@ -2243,6 +2246,31 @@ select {
   border-color: var(--accent);
 }
 .help-nav-search::placeholder { color: var(--text-muted); }
+.help-search-clear {
+  position: absolute;
+  right: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px; height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: 0.6;
+  transition: opacity 0.15s, color 0.15s;
+}
+.help-search-clear:hover {
+  opacity: 1;
+  color: var(--text-primary);
+  background: rgba(255,255,255,0.08);
+}
 .help-nav-list {
   list-style: none;
   margin: 0;