Version 2026.5.30 — Absence récurrente cyan + mode compact 24"

[code interpolé]

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Planification",
-  "version": "2026.5.27",
+  "version": "2026.5.30",
   "description": "Vue claire et rapide du planning des techniciens EasyVista. Regroupe interventions et réservations par tech, affiche horaires, contact, lieu, catégorie et statut en un coup d'œil.",
   "browser_specific_settings": {
     "gecko": {

viewer.css

@@ -2512,11 +2512,12 @@ header.topbar::before {
 
 /* Breakpoint medium : entre 1000 et 1300px, on compacte un peu */
 @media (max-width: 1300px) {
-  .app-clock-date { font-size: 11px; }
-  .app-clock-time { font-size: 20px; }
+  .app-clock-date { font-size: 18px; }
+  .app-clock-time { font-size: 18px; }
+  .app-clock-date::after { font-size: 20px; }
   .topbar-right .btn-action .btn-action-label,
   .topbar-right .btn-refresh .btn-refresh-label {
-    font-size: 12px;
+    font-size: 13px;
   }
 }
 
@@ -2524,10 +2525,10 @@ header.topbar::before {
    et on réduit encore l'horloge. Les icônes restent, titres restent. */
 @media (max-width: 1000px) {
   .topbar { padding: 8px 14px; gap: 8px; }
-  .topbar h1 { font-size: 16px; }
-  .app-clock { font-size: smaller; }
-  .app-clock-date { font-size: 10px; }
-  .app-clock-time { font-size: 18px; }
+  .topbar h1 { font-size: 18px; }
+  .app-clock-date { font-size: 16px; }
+  .app-clock-time { font-size: 16px; }
+  .app-clock-date::after { font-size: 18px; }
   .btn-action .btn-action-label,
   .btn-refresh .btn-refresh-label {
     display: none;
@@ -2618,14 +2619,18 @@ header.topbar::before {
    v2026.5.19 : refonte — élément .pinned-popup-minref créé à la volée
    v2026.5.21 : agrandi pour que la ref tienne sans déborder
    v2026.5.22 : encore agrandi + plus d'espace entre dragbar et topbar
+   v2026.5.23 : refonte complète en style "onglet" single-line, compact
    ========================================================================== */
 .pinned-popup.pinned-popup-minimized {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
   min-width: 300px !important;
-  max-width: 360px !important;
-  width: 300px !important;
-  height: auto !important;
-  min-height: 80px !important;
-  padding: 44px 16px 16px 16px !important;
+  max-width: 400px !important;
+  width: auto !important;
+  height: 36px !important;
+  min-height: 36px !important;
+  padding: 0 6px 0 4px !important;
   overflow: visible;
   background: var(--bg-elevated) !important;
   border: 1px solid var(--border) !important;

viewer.js

@@ -4855,8 +4855,22 @@ function buildCard(tech, isoDate) {
         showTooltip(e, ivCopy, card);
       });
       card.addEventListener("mouseleave", () => {
+        if (_isHorizontalView()) return;
         hideTooltip();
       });
+      // Hover sur le badge (Congé / Maladie/Accident / Absent) : actif
+      // SEULEMENT en vue horizontale.
+      const badgeEl = card.querySelector(".card-tech-badge");
+      if (badgeEl) {
+        badgeEl.addEventListener("mouseenter", (e) => {
+          if (!_isHorizontalView()) return;  // bloqué en classique
+          showTooltip(e, ivCopy, badgeEl);
+        });
+        badgeEl.addEventListener("mouseleave", () => {
+          if (!_isHorizontalView()) return;
+          hideTooltip();
+        });
+      }
     }
   }
 
@@ -5102,19 +5116,42 @@ function getStatusClass(iv) {
 }
 
 function bindTimelinePopover(el) {
-  el.addEventListener("mouseenter", (e) => showTimelinePopover(e, el));
+  // v2026.5.33 : en vue horizontale, les interactions sont différentes :
+  //   - hover   : ouvre directement la GRANDE popup (pas la petite)
+  //   - clic    : ouvre la fiche EasyVista dans un nouvel onglet
+  // En vue classique, le comportement existant est conservé :
+  //   - hover        : petite popup qui suit la souris
+  //   - clic simple  : grande popup persistante
+  //   - double-clic  : fiche EasyVista nouvel onglet
+  //   - Ctrl+clic    : fiche EasyVista en arrière-plan
+  const _isHorizontalView = () => document.documentElement.classList.contains("view-horizontal");
+
+  el.addEventListener("mouseenter", (e) => {
+    if (_isHorizontalView()) {
+      // Grande popup directement en vue horizontale
+      if (el.dataset.ivIdx !== undefined) {
+        openPersistentTimelinePopup(el);
+      }
+    } else {
+      showTimelinePopover(e, el);
+    }
+  });
   // v4.2.3 : la petite popup timeline SUIT la souris (différent de la grande
   // popup des lignes d'intervention qui est ancrée). On n'utilise pas
   // moveTooltip() (no-op depuis v4.1.12) mais une fonction dédiée.
-  el.addEventListener("mousemove", (e) => moveTimelineTooltip(e));
-  el.addEventListener("mouseleave", hideTooltip);
+  el.addEventListener("mousemove", (e) => {
+    if (!_isHorizontalView()) {
+      moveTimelineTooltip(e);
+    }
+  });
+  el.addEventListener("mouseleave", () => {
+    if (!_isHorizontalView()) {
+      hideTooltip();
+    }
+    // En vue horizontale, la grande popup est persistante donc on ne ferme
+    // pas au mouseleave (l'user peut interagir avec).
+  });
 
-  // v4.2.3 : clic / double-clic / Ctrl+clic sur un segment timeline
-  //   - clic simple : ferme la petite popup et ouvre la GRANDE popup
-  //     (ancrée juste en dessous de la timeline, persistante pour permettre
-  //     de sélectionner du texte / copier)
-  //   - double-clic : ouvre la fiche EasyVista dans un nouvel onglet actif
-  //   - Ctrl+clic (Cmd+clic sur Mac) : ouvre dans un onglet en arrière-plan
   const kind = el.dataset.kind;
   const ivIdxStr = el.dataset.ivIdx;
   // Seulement sur les segments avec une interventoin (pas les "hole" libres
@@ -5123,6 +5160,17 @@ function bindTimelinePopover(el) {
 
   let singleClickTimer = null;
   el.addEventListener("click", (e) => {
+    // v2026.5.33 : en vue horizontale, tout clic simple = ouvrir la fiche EV
+    if (_isHorizontalView()) {
+      e.preventDefault();
+      e.stopPropagation();
+      // Ctrl/Cmd/middle → arrière-plan, sinon nouvel onglet actif
+      const background = !!(e.ctrlKey || e.metaKey || e.button === 1);
+      openInterventionFromTimeline(el, { background });
+      return;
+    }
+
+    // Vue classique (inchangé) :
     // Ctrl / Cmd / molette → ouvrir fiche en arrière-plan
     if (e.ctrlKey || e.metaKey || e.button === 1) {
       e.preventDefault();
@@ -5140,34 +5188,48 @@ function bindTimelinePopover(el) {
     }, 250);
   });
   el.addEventListener("dblclick", (e) => {
-    // Annuler le clic simple en attente
+    // En vue horizontale le clic simple fait déjà l'ouverture, le dblclick
+    // devient inutile — on le laisse par sécurité (comportement idem).
     if (singleClickTimer) { clearTimeout(singleClickTimer); singleClickTimer = null; }
+    if (_isHorizontalView()) return;
     e.preventDefault();
     e.stopPropagation();
     openInterventionFromTimeline(el, { background: false });
   });
 }
 
-// v4.2.3 : positionne la petite popup timeline à côté du curseur
+/**
+ * v4.2.3 : positionne la petite popup timeline à côté du curseur.
+ * Utilisée UNIQUEMENT en vue classique pour la petite popup qui suit la souris
+ * quand on survole un segment timeline (informations courtes : durée, ref).
+ *
+ * v2026.5.34 : documentation + logs. Le clamp dans le viewport reste local
+ * (pas unifié avec positionTooltipAnchored car la logique "suit-souris" est
+ * fondamentalement différente d'un ancrage fixe à une source).
+ *
+ * @param {MouseEvent} e - événement souris pour position courante
+ */
 function moveTimelineTooltip(e) {
   const tip = tooltipEl();
   if (!tip || !tip.classList.contains("visible")) return;
   // La popup ancrée (grande bulle) ne doit pas être déplacée par la souris
   if (bulleState.pinned) return;
-  // Si la popup affiche une grande bulle d'intervention (classe pinned-like),
+  // Si la popup affiche une grande bulle d'intervention (mode anchored),
   // on ne la bouge pas non plus : on la laisse ancrée.
   if (tip.dataset.mode === "anchored") return;
+
   const offsetX = 14, offsetY = 16;
   let x = e.clientX + offsetX;
   let y = e.clientY + offsetY;
   const rect = tip.getBoundingClientRect();
-  // Ajuster si on sort de la fenêtre
-  if (x + rect.width > window.innerWidth - 8) x = e.clientX - rect.width - offsetX;
+
+  // Ajuster si on sort de la fenêtre (logique simple : flip autour du curseur)
+  if (x + rect.width  > window.innerWidth  - 8) x = e.clientX - rect.width  - offsetX;
   if (y + rect.height > window.innerHeight - 8) y = e.clientY - rect.height - offsetY;
   if (x < 4) x = 4;
   if (y < 4) y = 4;
-  // v4.2.4 : utiliser setTooltipViewportPosition pour bénéficier de la
-  // détection automatique fixed/abs (et donc de la stabilité au scroll).
+
+  // setTooltipViewportPosition gère la détection auto fixed vs abs.
   setTooltipViewportPosition(x, y);
 }
 
@@ -5201,19 +5263,46 @@ function findIvByActionId(actionId) {
 // v4.2.3/4 : ouvre la GRANDE popup au clic sur un segment timeline, ancrée
 // juste en dessous du segment. Pas épinglée : se ferme sur clic ailleurs,
 // Échap, OU quand la souris quitte la popup elle-même (mouseleave).
+// v4.2.3/4 : ouvre la GRANDE popup au clic sur un segment timeline (vue
+// classique) ou au hover (vue horizontale). Ancrée à côté du segment, pas
+// sur. Se ferme au clic ailleurs.
+//
+// v2026.5.34 : utilise positionTooltipAnchored() unifié au lieu de recalculer
+// sa propre position. Plus de code dupliqué.
 function openPersistentTimelinePopup(el) {
+  if (!el) {
+    console.warn("[persistentTimeline] segment el null — abandon");
+    return;
+  }
   const ivIdx = el.dataset.ivIdx;
-  if (ivIdx === undefined) return;
+  if (ivIdx === undefined) {
+    console.log("[persistentTimeline] segment sans ivIdx (hole/absence vide) — abandon");
+    return;
+  }
   const cardEl = el.closest(".card");
-  if (!cardEl) return;
+  if (!cardEl) {
+    console.warn("[persistentTimeline] pas de .card parent trouvée");
+    return;
+  }
   const row = cardEl.querySelector(`.intervention-v2[data-iv-idx="${ivIdx}"]`);
-  if (!row) return;
+  if (!row) {
+    console.warn(`[persistentTimeline] row intervention-v2[data-iv-idx="${ivIdx}"] introuvable`);
+    return;
+  }
   const actionId = row.dataset.actionId;
   const iv = findIvByActionId(actionId);
-  if (!iv) return;
+  if (!iv) {
+    console.warn(`[persistentTimeline] iv pour actionId=${actionId} introuvable`);
+    return;
+  }
 
   const tip = tooltipEl();
-  if (!tip) return;
+  if (!tip) {
+    console.warn("[persistentTimeline] tooltipEl() null");
+    return;
+  }
+
+  console.log(`[persistentTimeline] ouverture grande popup pour iv actionId=${actionId}`);
 
   // Nettoyer tout état précédent (ancrage, épinglage, timers)
   bulleState.pinned = false;
@@ -5226,29 +5315,20 @@ function openPersistentTimelinePopup(el) {
   tip.innerHTML = buildTooltipHTML(iv);
   tip.classList.remove("hidden");
   tip.classList.add("visible");
-  // mode "anchored" : le hover ne doit pas la remplacer par une autre popup
+  // mode "anchored" : le hover timeline ne doit pas la remplacer par la petite popup
   tip.dataset.mode = "anchored";
   state.currentTooltipIv = iv;
 
-  // Position : juste sous le segment timeline. D'abord on reset les coords
-  // pour que getBoundingClientRect() reflète la vraie taille du nouveau
-  // contenu.
+  // v2026.5.34 : utiliser positionTooltipAnchored() unifié, en préférant
+  // dessous (sous le segment timeline) via opts.anchorBelow = true.
+  //
+  // D'abord on reset les coords pour que le tipRect soit correctement mesuré
+  // avec le nouveau contenu.
   tip.style.left = "-9999px";
   tip.style.top = "0px";
-  // Forcer un reflow pour que tipRect soit à jour avec le nouveau contenu
-  const tipRect = tip.getBoundingClientRect();
-  const r = el.getBoundingClientRect();
-  let x = r.left;
-  let y = r.bottom + 8;
-  if (x + tipRect.width > window.innerWidth - 8) x = window.innerWidth - tipRect.width - 8;
-  if (x < 4) x = 4;
-  if (y + tipRect.height > window.innerHeight - 8) {
-    y = r.top - tipRect.height - 8;
-  }
-  if (y < 4) y = 4;
-
-  // Positionner proprement (avec détection auto fixed vs abs)
-  setTooltipViewportPosition(x, y);
+  // Force reflow
+  void tip.offsetWidth;
+  positionTooltipAnchored(el, { anchorBelow: true });
 }
 
 function showTimelinePopover(e, el) {