v2026.5.46 — Couche données v2, vue « échelle de temps exacte », session fiabilisée, réservations partagées

src/viewer.html

@@ -54,16 +54,19 @@
     <!-- v5.0.9 : compteur de session EasyVista (visible < 5 min restantes) -->
     <div id="app-session" class="app-session hidden"></div>
     <div class="topbar-right">
-      <!-- v4.2.6 : bouton créer une absence pour un ou plusieurs techs -->
-      <button id="absence-btn" class="btn btn-action" title="Créer une absence pour un ou plusieurs techniciens">
-        <svg class="btn-action-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-          <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/>
-          <path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
-          <circle cx="12" cy="15" r="4.2" stroke="currentColor" stroke-width="1.8" fill="none"/>
-          <line x1="9" y1="15" x2="15" y2="15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" transform="rotate(-45 12 15)"/>
-        </svg>
-        <span class="btn-action-label">Absence</span>
-      </button>
+      <!-- v2026.5.46 — bouton principal "Ajouter" : ouvre un menu déroulant
+           avec Réservation / Absence / Pompier (remplace les boutons séparés). -->
+      <div id="add-menu-wrap" class="add-menu-wrap">
+        <button id="add-menu-btn" class="btn btn-action" title="Ajouter : réservation, absence ou pompier" aria-haspopup="true" aria-expanded="false">
+          <span class="btn-action-emoji">➕</span>
+          <span class="btn-action-label">Ajouter</span>
+        </button>
+        <div id="add-menu" class="add-menu hidden" role="menu">
+          <button id="add-menu-reservation" class="add-menu-item" type="button" role="menuitem"><span class="add-menu-emoji">📅</span> Réservation</button>
+          <button id="add-menu-absence" class="add-menu-item" type="button" role="menuitem"><span class="add-menu-emoji">🗓️</span> Absence</button>
+          <button id="add-menu-pompier" class="add-menu-item" type="button" role="menuitem"><span class="add-menu-emoji">🚒</span> Pompier</button>
+        </div>
+      </div>
       <!-- v4.2.6 : bouton envoyer la planification sur la douchette -->
       <button id="douchette-btn" class="btn btn-action" title="Envoyer la planification sur la douchette des techniciens">
         <span class="btn-action-emoji">🎯</span>
@@ -89,7 +92,10 @@
     </div>
   </header>
 
-  <!-- Bannière session expirée (non bloquante, apparaît en haut du contenu) -->
+  <!-- v2026.5.46 — bandeaux pleine largeur en haut (sous la topbar). Le
+       chevauchement avec la ligne stats+recherche est réglé par l'empilement
+       sticky (--stack-top), pas en les déplaçant. Un seul visible à la fois
+       (coordinateur _hideAllSessionBanners / _setSessionBanner). -->
   <div id="session-expired-banner" class="session-banner hidden">
     <span class="session-banner-icon">⚠</span>
     <span class="session-banner-text">
@@ -99,8 +105,6 @@
     <button id="session-banner-reconnect" class="btn btn-primary btn-sm">Ouvrir EasyVista</button>
     <button id="session-banner-close" class="btn btn-icon" title="Masquer">×</button>
   </div>
-
-  <!-- v4.2.5 : Bannière EasyVista inaccessible (non bloquante, avec cache) -->
   <div id="ev-unreachable-banner" class="session-banner ev-banner hidden">
     <span class="session-banner-icon">⚠</span>
     <span class="session-banner-text">
@@ -112,12 +116,6 @@
     <button id="ev-unreachable-banner-close" class="btn btn-icon" title="Masquer">×</button>
   </div>
 
-  <!-- Barre de progression (visible uniquement pendant un refresh actif) -->
-  <div id="progress-bar" class="progress-bar hidden">
-    <div class="progress-bar-fill" id="progress-bar-fill"></div>
-    <span class="progress-bar-label" id="progress-bar-label"></span>
-  </div>
-
   <main id="main">
     <div id="error-box" class="error-box hidden"></div>
     <div id="session-needed" class="session-needed hidden">
@@ -131,8 +129,37 @@
       <button id="open-ev-btn-2" class="btn btn-primary">Ouvrir EasyVista</button>
       <button id="retry-btn" class="btn btn-subtle">Réessayer</button>
     </div>
+    <!-- v2026.5.46 — ligne collante (sticky) EN PREMIER : stats + barre de
+         recherche sur la même hauteur, toujours visibles au scroll. En vue
+         horizontale, les deux enfants sont relocalisés dans la sidebar
+         (cf. ELEMENTS_TO_RELOCATE). -->
+    <div id="topline" class="topline">
+      <div id="stats" class="stats hidden"></div>
+      <div id="search-zone" class="search-zone hidden">
+        <div class="search-bar">
+          <span class="search-ico" aria-hidden="true">🔍</span>
+          <input id="ev-search" class="search-input" type="search" autocomplete="off"
+                 spellcheck="false" placeholder="Rechercher : réf, personne, matériel, lieu…">
+          <span id="ev-search-spin" class="search-spin hidden" aria-hidden="true"></span>
+          <button id="ev-search-clear" class="search-clear hidden" type="button" title="Effacer" aria-label="Effacer">×</button>
+          <!-- v2026.5.46 — aide sur la syntaxe de recherche -->
+          <button id="ev-search-help" class="search-help" type="button" title="Aide sur la recherche" aria-label="Aide sur la recherche">❕</button>
+        </div>
+        <div id="ev-search-results" class="search-results hidden" role="listbox"></div>
+      </div>
+      <!-- v2026.5.46 — 3e colonne (droite) : bouton « Mes actions » du mode
+           coordinateur, calé complètement à droite de la ligne. -->
+      <div id="topline-coord" class="topline-coord"></div>
+    </div>
+    <!-- v2026.5.46 — barre de progression du rafraîchissement : SOUS la ligne
+         stats+recherche (#topline), sticky juste en dessous (avant : au-dessus). -->
+    <div id="progress-bar" class="progress-bar hidden">
+      <div class="progress-bar-fill" id="progress-bar-fill"></div>
+      <span class="progress-bar-label" id="progress-bar-label"></span>
+    </div>
+    <!-- v2026.5.46 — le « Chargement… » vit DANS la zone des cartes
+         (sous la ligne stats+recherche), jamais en haut de page. -->
     <div id="loading" class="loading">Chargement…</div>
-    <div id="stats" class="stats hidden"></div>
     <div id="cards" class="cards"></div>
   </main>