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

[code interpolé]

background.js

@@ -1184,6 +1184,11 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
             url: `${origin}/`,  // racine → EV redirige vers SSO si besoin
             active: true
           });
+          // v2026.5.16 : surveiller cet onglet — si on tombe sur la page de
+          // login manuel portail.etat-de-vaud.ch/iamlogin/, rediriger vers
+          // portail.etat-de-vaud.ch/iam/accueil/ qui déclenche le Windows
+          // SSO Kerberos automatiquement.
+          watchReconnectTabForIamLogin(tab.id);
           sendResponse({ ok: true, tabId: tab.id, origin });
         } catch (err) {
           sendResponse({ ok: false, error: err.message || String(err) });

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Planification",
-  "version": "2026.5.21",
+  "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

@@ -9,8 +9,8 @@
   --border: #e2e4e8;
   --border-strong: #cfd3da;
   --text: #1a1f2b;
-  --text-muted: #5b6573;
+  --text-muted: #2e3642;   /* v2026.5.29 : +contraste (était #4a5260) */
-  --text-faint: #8892a0;
+  --text-faint: #50596a;   /* v2026.5.29 : +contraste (était #6c7583) */
   --accent: #0f4f8b;
   --accent-soft: #e1ecf7;
   --danger: #b03030;
@@ -59,8 +59,8 @@
   --border: #2e333c;
   --border-strong: #414754;
   --text: #e6e8ec;
-  --text-muted: #9ba2ad;
+  --text-muted: #d0d5de;    /* v2026.5.29 : +contraste (était #b8c0cc) — quasi blanc */
-  --text-faint: #6a727e;
+  --text-faint: #a8b0bc;    /* v2026.5.29 : +contraste (était #8b93a0) */
   --accent: #5ea8e8;
   --accent-soft: #223348;
   --danger: #e87878;
@@ -842,6 +842,17 @@ html, body {
   background: var(--bg-hover);
 }
 
+/* v2026.5.29 : highlight visible sur les rows .intervention-v2 quand on
+   survole le segment timeline correspondant (ou que l'user survole la row) */
+.intervention-v2.highlight {
+  background: var(--accent-soft);
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  box-shadow: 0 0 0 3px var(--accent-soft);
+  z-index: 2;
+  position: relative;
+}
+
 /* ==========================================================================
    Interventions — layout v2 (heures verticales)
    ========================================================================== */
@@ -1832,22 +1843,28 @@ body.modal-open {
   overflow: hidden;
 }
 
-/* v4.2.9 : pied de page discret en bas à droite — affiche auteur + date + version */
+/* v4.2.9 : pied de page discret en bas à droite — affiche auteur + date + version
+   v2026.5.29 : agrandi + plus contrasté */
 .app-footer {
   position: fixed;
-  right: 8px;
+  right: 10px;
-  bottom: 4px;
+  bottom: 6px;
-  font-size: 10px;
+  font-size: 13px;
-  color: var(--text-faint, #8892a0);
+  font-weight: 500;
-  opacity: 0.55;
+  color: var(--text-muted);
-  pointer-events: none;        /* ne capture pas les clics */
+  opacity: 0.85;
+  pointer-events: none;
   user-select: none;
   font-variant-numeric: tabular-nums;
-  letter-spacing: 0.2px;
+  letter-spacing: 0.3px;
-  z-index: 1;                  /* sous les modals (qui sont à 10000) */
+  z-index: 1;
+  padding: 3px 8px;
+  background: var(--bg-muted);
+  border: 1px solid var(--border);
+  border-radius: 6px;
 }
 .app-footer:hover {
-  opacity: 0.85;
+  opacity: 1;
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
@@ -1992,18 +2009,18 @@ body.modal-open {
 /* ─────────────────────────────────────────────────────────────────────────
    v5.0.0 : horloge au milieu de la topbar (HH:MM, pas de secondes)
    ───────────────────────────────────────────────────────────────────────── */
-/* v2026.5.16 : app-clock contient maintenant 2 lignes empilées :
+/* v2026.5.27 : app-clock sur UNE seule ligne : "Jeudi 23.04.26 • 21:55"
-   - app-clock-date : "Mardi 21 avril 2026" (petit)
+   Même taille pour la date et l'heure, gros point au milieu. */
-   - app-clock-time : "12:34" (grand) */
 .app-clock {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
+  gap: 12px;
   line-height: 1.1;
   color: var(--text);
   pointer-events: none;
@@ -2011,11 +2028,19 @@ body.modal-open {
   white-space: nowrap;
 }
 .app-clock-date {
-  font-size: 12px;
+  font-size: 22px;
-  font-weight: 500;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: 0.5px;
+  font-variant-numeric: tabular-nums;
+}
+.app-clock-date::after {
+  content: "•";
+  margin-left: 12px;
   color: var(--text-muted);
-  letter-spacing: 0.3px;
+  font-size: 26px;
-  text-transform: capitalize;
+  line-height: 0.8;
+  vertical-align: middle;
 }
 .app-clock-time {
   font-size: 22px;
@@ -2480,3 +2505,438 @@ header.topbar::before {
 .banner-reconnect-failed .banner-btn-primary:hover {
   background: #f8d7da;
 }
+
+/* ==========================================================================
+   v2026.5.16 : responsive topbar
+   ========================================================================== */
+
+/* Breakpoint medium : entre 1000 et 1300px, on compacte un peu */
+@media (max-width: 1300px) {
+  .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: 13px;
+  }
+}
+
+/* Breakpoint small : moins de 1000px, on masque les labels de boutons action
+   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: 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;
+  }
+  .btn-action, .btn-refresh {
+    padding: 6px 10px;
+  }
+  .capture-info { display: none; }
+}
+
+/* Breakpoint très petit : moins de 720px, on cache la date complète (garde
+   juste l'heure) et on autorise le wrap total */
+@media (max-width: 720px) {
+  .topbar {
+    flex-wrap: wrap;
+    padding: 6px 10px;
+  }
+  .app-clock {
+    position: static;
+    transform: none;
+    margin: 0 auto;
+  }
+  .app-clock-date { display: none; }
+  .topbar-left { flex-wrap: wrap; }
+  .date-nav { margin-top: 4px; }
+  .date-picker-day { min-width: 46px; font-size: 12px; }
+  .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
+}
+
+/* Breakpoint minuscule : masque aussi les labels de refresh, boutons deviennent
+   vraiment iconifiés */
+@media (max-width: 520px) {
+  .app-clock-time { font-size: 16px; }
+  .topbar h1 { font-size: 14px; }
+  .btn-today { padding: 4px 6px; font-size: 11px; }
+  .btn-nav { min-width: 26px; padding: 4px 6px; }
+}
+
+/* ==========================================================================
+   v2026.5.17 : topbar des popups épinglés (3 boutons : _ ▭ 📍)
+   ========================================================================== */
+.pinned-popup {
+  /* Laisser un peu de place en haut pour la topbar */
+  padding-top: 30px !important;
+}
+/* v2026.5.18 : masquer le conteneur d'actions d'origine (↻ reload + 📌 pin)
+   dans les popups épinglés — leur place est reprise par notre .pinned-popup-topbar */
+.pinned-popup .tooltip-actions {
+  display: none !important;
+}
+.pinned-popup-topbar {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  z-index: 10;
+}
+.pinned-popup-btn {
+  width: 26px;
+  height: 22px;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1;
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.pinned-popup-btn:hover {
+  background: var(--bg-muted);
+  color: var(--text);
+  border-color: var(--border);
+}
+.pinned-popup-unpin {
+  font-size: 14px;
+}
+
+/* ==========================================================================
+   v2026.5.17 : mode Minimisé (popup flottant compact, juste la ref)
+   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: 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;
+}
+/* Séparer visuellement la dragbar (collée en haut) des boutons topbar */
+.pinned-popup.pinned-popup-minimized .pinned-popup-topbar {
+  top: 14px !important;   /* sous la dragbar (qui fait ~6-8px) */
+}
+/* Masquer tous les enfants directs du popup minimisé */
+.pinned-popup.pinned-popup-minimized > *:not(.pinned-popup-topbar):not(.pinned-popup-dragbar):not(.pinned-popup-minref) {
+  display: none !important;
+}
+/* L'élément ref dédié, centré et gros */
+.pinned-popup-minref {
+  display: block;
+  text-align: center;
+  padding: 10px 12px;
+  font-family: var(--mono, monospace);
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
+  cursor: pointer;
+  user-select: none;
+  border-radius: 4px;
+  transition: background 0.12s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pinned-popup-minref:hover {
+  background: var(--bg-muted);
+}
+
+/* ==========================================================================
+   v2026.5.17 : mode Réduit (docké en bas de l'écran) + taskbar
+   ========================================================================== */
+.pinned-popup.pinned-popup-reduced {
+  display: none !important;
+}
+.pinned-popups-dock {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+  display: none;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 10px;
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
+  align-items: center;
+}
+.pinned-popups-dock.visible {
+  display: flex;
+}
+.pinned-popup-dock-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 14px;
+  background: var(--bg-muted);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  font-family: var(--mono, monospace);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.15s, filter 0.15s;
+  white-space: nowrap;
+}
+.pinned-popup-dock-pill:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.1);
+}
+/* v2026.5.18 : couleurs par catégorie (fond = couleur, texte blanc) */
+.pinned-popup-dock-pill.color-livraison    { background: var(--c-livraison);    color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-installation { background: var(--c-installation); color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-recup        { background: var(--c-recup);        color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-remplacement { background: var(--c-remplacement); color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-incident     { background: var(--c-incident);     color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-rollout      { background: var(--c-rollout);      color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-reservation  { background: var(--c-reservation);  color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-absence      { background: #2a2f36;               color: white; border-color: transparent; }
+.pinned-popup-dock-pill.color-autre        { background: var(--c-autre);        color: white; border-color: transparent; }
+
+/* v2026.5.18 : bouton "Fermer tous" à droite du dock */
+.pinned-popups-close-all {
+  margin-left: auto;
+  padding: 6px 12px;
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.pinned-popups-close-all:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  border-color: #ef4444;
+}
+
+/* ==========================================================================
+   v2026.5.17 : popup user-badge avec ligne session
+   ========================================================================== */
+.user-name-popup-name {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.user-name-popup-session {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  padding-top: 4px;
+  border-top: 1px solid var(--border);
+}
+.user-name-popup-session.session-ok { color: var(--text-muted); }
+.user-name-popup-session.session-warn { color: #f59e0b; font-weight: 600; }
+.user-name-popup-session.session-critical { color: #ef4444; font-weight: 700; }
+
+/* ==========================================================================
+   v2026.5.17 : popup alerte session qui glisse depuis haut-gauche
+   ========================================================================== */
+.session-slide-alert {
+  position: fixed;
+  top: 60px;
+  left: -420px;  /* hors écran au départ */
+  width: 380px;
+  max-width: calc(100vw - 40px);
+  padding: 14px 18px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-left: 4px solid #f59e0b;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
+  z-index: 1000;
+  transition: left 0.28s ease-out, opacity 0.28s;
+  opacity: 0;
+}
+.session-slide-alert.visible {
+  left: 20px;
+  opacity: 1;
+}
+.session-slide-alert.urgent {
+  border-left-color: #ef4444;
+  animation: session-pulse 1.4s ease-in-out infinite;
+}
+@keyframes session-pulse {
+  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
+  50% { box-shadow: 0 8px 24px rgba(239,68,68,0.5); }
+}
+.session-slide-alert-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 12px;
+}
+.session-slide-alert-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.session-slide-alert-extend,
+.session-slide-alert-later {
+  padding: 6px 14px;
+  font-size: 13px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  font-family: inherit;
+}
+.session-slide-alert-extend {
+  background: #10b981;
+  color: white;
+  border-color: #10b981;
+  font-weight: 600;
+}
+.session-slide-alert-extend:hover { background: #059669; }
+.session-slide-alert-extend:disabled { opacity: 0.6; cursor: wait; }
+.session-slide-alert-later {
+  background: transparent;
+  color: var(--text-muted);
+}
+.session-slide-alert-later:hover {
+  background: var(--bg-muted);
+  color: var(--text);
+}
+
+/* ==========================================================================
+   v2026.5.19 : nouveaux éléments
+   ========================================================================== */
+
+/* Bouton Actualiser (↻) dans la topbar du popup épinglé — animation spin */
+.pinned-popup-refresh {
+  font-size: 14px;
+  line-height: 1;
+}
+.pinned-popup-refresh svg {
+  width: 14px;
+  height: 14px;
+}
+.pinned-popup-refresh.spinning svg {
+  animation: pinned-popup-refresh-spin 0.6s linear infinite;
+  transform-origin: 50% 50%;
+}
+.pinned-popup-refresh.spinning {
+  pointer-events: none;
+}
+@keyframes pinned-popup-refresh-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Pendant le drag d'un popup, ignorer les hover sur les cartes pour ne pas
+   ouvrir des tooltips parasites */
+body.popup-dragging .intervention-v2,
+body.popup-dragging .card {
+  pointer-events: none;
+}
+/* Mais garder les popups épinglés cliquables */
+body.popup-dragging .pinned-popup {
+  pointer-events: auto;
+}
+
+/* Pastille dock à 2 lignes : ref (gras) + date (petit) */
+.pinned-popup-dock-pill {
+  flex-direction: column !important;
+  align-items: center !important;
+  padding: 4px 14px !important;
+  line-height: 1.1;
+  gap: 1px !important;
+}
+.pinned-popup-dock-pill-ref {
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  font-family: var(--mono, monospace);
+}
+.pinned-popup-dock-pill-date {
+  display: block;
+  font-size: 10px;
+  font-weight: 500;
+  opacity: 0.85;
+  font-family: var(--mono, monospace);
+}
+
+/* ==========================================================================
+   v2026.5.20 : mini-menu au survol d'une pastille dock
+   ========================================================================== */
+.pill-hover-menu {
+  position: fixed;
+  z-index: 60;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 130px;
+  animation: pill-hover-menu-appear 0.12s ease-out;
+}
+@keyframes pill-hover-menu-appear {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.pill-hover-menu-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: transparent;
+  color: var(--text);
+  border: none;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s;
+}
+.pill-hover-menu-btn:hover {
+  background: var(--bg-muted);
+}
+.pill-hover-menu-btn.pill-hover-menu-close:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+.pill-menu-ico {
+  font-size: 14px;
+  width: 16px;
+  text-align: center;
+}
+
+/* ==========================================================================
+   v2026.5.21 : icône 📍 "active" dans le tooltip hover = déjà épinglée
+   ========================================================================== */
+.tooltip-pinbtn.tooltip-pinbtn-active {
+  opacity: 1 !important;
+  filter: none !important;
+  background: rgba(239, 68, 68, 0.15);
+  border-radius: 4px;
+}

viewer.html

@@ -9,8 +9,13 @@
   <header class="topbar">
     <div class="topbar-left">
       <!-- v4.2.3 : pastille avec initiales de l'utilisateur connecté, avant
-           le titre. Clic → popup fixe avec nom complet juste en dessous. -->
+           le titre. Clic → popup fixe avec nom complet juste en dessous.
-      <button id="user-badge" class="user-badge hidden"
+           v2026.5.34 : TOUJOURS visible d'office avec "?" (état user inconnu)
+           pour garantir l'accès au menu (⊞ Vue / ⚙ Paramètres) même si
+           la détection user échoue ou est en retard.
+           Le script JS mettra à jour le textContent + classes quand le
+           fetch aboutit. En cas d'échec persistant, reste sur "?". -->
+      <button id="user-badge" class="user-badge user-badge-unknown"
               type="button" aria-label="Utilisateur connecté"
               title="Utilisateur connecté"></button>
       <h1 id="app-title">Planification</h1>

viewer.js

@@ -240,6 +240,7 @@ async function init() {
   initModalScrollLock();  // v4.2.9 : bloquer le scroll arrière quand modal
   initAppFooter();        // v4.2.9 : pied de page discret bas-droite
   initAppClock();         // v5.0.0 : horloge HH:MM au milieu topbar
+  _applyViewMode();       // v2026.5.32 : appliquer la vue sauvegardée
   initAdminMenu();        // v5.0.0 : menu admin caché (5 clics sur titre)
   initSessionTimer();     // v5.0.9 : compteur de session EV (tick 1s)
   initDateCustomPicker(); // v2026.5.17 : faux input date avec jour
@@ -325,27 +326,121 @@ function markSessionActivity() {
 }
 
 // v4.2 : fetche l'utilisateur EasyVista connecté (via background.js) et
-// l'affiche dans la topbar. En cas d'échec ou si aucun nom n'est trouvé,
+// l'affiche dans la topbar.
-// le badge reste caché.
+// v2026.5.26 : en cas d'échec, affiche un rond gris "?" + retry 60s (max 10 essais).
+// v2026.5.34 : le badge est maintenant TOUJOURS visible (état "?" par défaut
+//              dans le HTML). Cette fonction met à jour le contenu (initiales
+//              quand succès, "?" quand échec). Logs abondants pour debug.
+//
+// État initial (HTML) : <button class="user-badge user-badge-unknown">?</button>
+// État succès          : initiales calculées + couleur dérivée du nom
+// État échec           : "?" + couleur grise (classe user-badge-unknown)
+//
+// Retry : 10 tentatives espacées de 60s (10 min max), arrêt au 1er succès.
+let _currentUserRetryCount = 0;
+const _CURRENT_USER_MAX_RETRIES = 10;
+const _CURRENT_USER_RETRY_DELAY_MS = 60 * 1000;
+
 async function fetchAndShowCurrentUser() {
+  const attemptId = _currentUserRetryCount + 1;
+  console.log(`[currentUser] tentative ${attemptId}/${_CURRENT_USER_MAX_RETRIES + 1} de fetchCurrentUser`);
+
+  const badge = document.getElementById("user-badge");
+  if (!badge) {
+    // Fallback défensif : pas de badge dans le DOM ? On log et on abandonne.
+    console.warn("[currentUser] badge DOM introuvable — abandon");
+    return;
+  }
+
+  let success = false;
+  let errorReason = null;
+
   try {
     const resp = await sendMessage({ type: "fetchCurrentUser" });
-    if (!resp || !resp.ok || !resp.user) return;
+    console.log("[currentUser] réponse reçue :", resp ? JSON.stringify(resp).substring(0, 200) : "(null)");
-    const badge = document.getElementById("user-badge");
+
-    if (!badge) return;
+    if (!resp) {
+      errorReason = "response_null";
+    } else if (!resp.ok) {
+      errorReason = resp.error || "ok_false";
+    } else if (!resp.user) {
+      errorReason = "user_null";
+    } else {
       const fullName = resp.user.name || resp.user.login || null;
-    if (!fullName) return;
+      if (!fullName) {
+        errorReason = "name_empty";
+      } else {
+        // ✅ Succès : mise à jour du badge
         const initials = computeUserInitials(fullName);
+        console.log(`[currentUser] SUCCÈS : "${fullName}" → initiales "${initials}"`);
         badge.textContent = initials;
         badge.title = fullName;
-    // v4.2.3 : couleur unique dérivée du nom, dans la palette neutre du thème
         badge.style.setProperty("--user-badge-color", colorFromName(fullName));
+        badge.classList.remove("user-badge-unknown");
+        // On retire aussi "hidden" au cas où (compat ancienne version)
         badge.classList.remove("hidden");
         state.currentUser = resp.user;
-  } catch (err) {
+        success = true;
-    console.warn("[currentUser] fetch failed:", err);
+        _currentUserRetryCount = 0;  // reset compteur au succès
       }
     }
+  } catch (err) {
+    errorReason = "exception: " + String(err);
+    console.warn("[currentUser] exception durant sendMessage :", err);
+  }
+
+  if (success) return;
+
+  // ❌ Échec : on laisse le badge en état "inconnu" (déjà le cas par défaut)
+  // et on schedule un retry.
+  console.warn(`[currentUser] échec (raison: ${errorReason}) — badge reste en état "?"`);
+
+  // Défense : s'assurer que le badge est bien en état inconnu (au cas où
+  // une mise à jour partielle a eu lieu puis échoué).
+  badge.textContent = "?";
+  badge.title = "Utilisateur — cliquer pour accéder aux paramètres";
+  badge.style.setProperty("--user-badge-color", "#6b7280");
+  badge.classList.add("user-badge-unknown");
+  badge.classList.remove("hidden");
+
+  // Schedule retry si pas trop d'essais
+  if (_currentUserRetryCount < _CURRENT_USER_MAX_RETRIES) {
+    _currentUserRetryCount++;
+    console.log(`[currentUser] retry programmé : ${_currentUserRetryCount}/${_CURRENT_USER_MAX_RETRIES} dans ${_CURRENT_USER_RETRY_DELAY_MS / 1000}s`);
+    setTimeout(() => {
+      fetchAndShowCurrentUser();
+    }, _CURRENT_USER_RETRY_DELAY_MS);
+  } else {
+    console.warn("[currentUser] max retries atteint, arrêt du retry automatique. Le badge reste cliquable (⚙ Paramètres accessible).");
+  }
+}
+
+/**
+ * v2026.5.34 : déclenche un fetchAndShowCurrentUser() SI le user n'est pas
+ * encore connu (badge en état "?"). Appelée après chaque succès de planning
+ * pour profiter d'une session EV valide sans attendre le retry de 60s.
+ *
+ * Sans effet si :
+ *  - state.currentUser est déjà renseigné (pas besoin de re-fetcher)
+ *  - un retry est déjà en cours (évite les doublons)
+ *
+ * @param {string} reason - contexte pour les logs (ex: "after_load_success")
+ */
+function _maybeRetryFetchUser(reason) {
+  if (state.currentUser && state.currentUser.name) {
+    // User déjà connu, rien à faire
+    return;
+  }
+  const badge = document.getElementById("user-badge");
+  if (badge && !badge.classList.contains("user-badge-unknown")) {
+    // Badge n'est pas en état inconnu → user probablement connu par un autre chemin
+    return;
+  }
+  console.log(`[currentUser] relance opportuniste (raison: ${reason}) — user encore inconnu`);
+  // Reset le compteur puisqu'on a un nouveau contexte (session fraîche)
+  _currentUserRetryCount = 0;
+  fetchAndShowCurrentUser();
+}
 
 // v4.2.3 : calcule les initiales depuis un nom au format "Nom, Prénom" ou
 // "Nom Prénom" ou "Prénom Nom". On prend la 1re lettre majuscule de chaque
@@ -400,14 +495,20 @@ function toggleUserNamePopup() {
     hideUserNamePopup();
     return;
   }
-  if (!state.currentUser || !state.currentUser.name) return;
 
   // v2026.5.17 : afficher aussi le temps restant de la session (MM:SS) avec
   // une couleur qui dépend du seuil (vert/jaune/rouge).
+  // v2026.5.26 : si user inconnu, afficher "Utilisateur inconnu" + retry + réglages
   popup.innerHTML = "";
   const nameEl = document.createElement("div");
   nameEl.className = "user-name-popup-name";
+  if (state.currentUser && state.currentUser.name) {
     nameEl.textContent = state.currentUser.name;
+  } else {
+    nameEl.textContent = "Utilisateur inconnu";
+    nameEl.style.fontStyle = "italic";
+    nameEl.style.color = "var(--text-muted)";
+  }
   popup.appendChild(nameEl);
 
   const sessEl = document.createElement("div");
@@ -416,6 +517,36 @@ function toggleUserNamePopup() {
   _renderUserPopupSessionLine(sessEl);
   popup.appendChild(sessEl);
 
+  // v2026.5.25 : bouton Paramètres (remplace les 5 clics sur le titre)
+  // v2026.5.32 : bouton "Vue" pour basculer Vue classique ↔ Vue horizontale
+  const viewBtn = document.createElement("button");
+  viewBtn.type = "button";
+  viewBtn.className = "user-name-popup-settings";
+  const currentView = _getCurrentView();
+  viewBtn.innerHTML = '<span class="settings-ico">⊞</span> Vue : '
+                    + (currentView === "horizontal" ? "Horizontale" : "Classique");
+  viewBtn.title = "Changer la disposition du planning";
+  viewBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    hideUserNamePopup();
+    _toggleView();
+  });
+  popup.appendChild(viewBtn);
+
+  const settingsBtn = document.createElement("button");
+  settingsBtn.type = "button";
+  settingsBtn.className = "user-name-popup-settings";
+  settingsBtn.innerHTML = '<span class="settings-ico">⚙</span> Paramètres';
+  settingsBtn.title = "Ouvrir les paramètres d'administration";
+  settingsBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    hideUserNamePopup();
+    if (typeof showAdminPanel === "function") {
+      showAdminPanel();
+    }
+  });
+  popup.appendChild(settingsBtn);
+
   popup.classList.remove("hidden");
   badge.classList.add("open");
   // Positionne juste en dessous de la pastille
@@ -889,20 +1020,49 @@ function initAppFooter() {
   document.body.appendChild(el);
 }
 
+// v2026.5.32 : bascule entre Vue classique (cards) et Vue horizontale (rows)
+// Persisté dans localStorage (clé : "view_mode"). Défaut : "classic".
+const VIEW_MODE_KEY = "view_mode";
+
+function _getCurrentView() {
+  try {
+    const v = localStorage.getItem(VIEW_MODE_KEY);
+    return v === "horizontal" ? "horizontal" : "classic";
+  } catch (e) {
+    return "classic";
+  }
+}
+
+function _setCurrentView(mode) {
+  try {
+    localStorage.setItem(VIEW_MODE_KEY, mode === "horizontal" ? "horizontal" : "classic");
+  } catch (e) {}
+  _applyViewMode();
+}
+
+function _toggleView() {
+  const current = _getCurrentView();
+  const next = current === "horizontal" ? "classic" : "horizontal";
+  _setCurrentView(next);
+}
+
+function _applyViewMode() {
+  const mode = _getCurrentView();
+  document.documentElement.classList.remove("view-classic", "view-horizontal");
+  document.documentElement.classList.add("view-" + mode);
+}
+
 // v5.0.0 : horloge HH:MM au milieu de la topbar. Mise à jour toutes les 30s
 // (les secondes ne sont pas affichées donc pas besoin d'un tick plus rapide).
+// v2026.5.27 : date courte "Jeudi 23.04.26" sur la même ligne que l'heure,
+// séparées par un gros point "•", même taille que l'heure.
 function initAppClock() {
   const el = document.getElementById("app-clock");
   if (!el) return;
   const dateEl = document.getElementById("app-clock-date");
   const timeEl = document.getElementById("app-clock-time");
 
-  // v2026.5.16 : format "Mardi 21 avril 2026"
   const JOURS = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
-  const MOIS = [
-    "janvier", "février", "mars", "avril", "mai", "juin",
-    "juillet", "août", "septembre", "octobre", "novembre", "décembre"
-  ];
 
   let lastDateStr = "";
   const tick = () => {
@@ -913,13 +1073,13 @@ function initAppClock() {
     if (timeEl) timeEl.textContent = timeStr;
     else el.textContent = timeStr;  // fallback si ancien markup
 
-    // Date complète : actualisée seulement si elle a changé (évite reflow inutile)
+    // Date courte : "Jeudi 23.04.26"
     if (dateEl) {
       const jour = JOURS[d.getDay()];
-      const num = d.getDate();
+      const dd = String(d.getDate()).padStart(2, "0");
-      const mois = MOIS[d.getMonth()];
+      const mm = String(d.getMonth() + 1).padStart(2, "0");
-      const annee = d.getFullYear();
+      const yy = String(d.getFullYear()).slice(-2);
-      const dateStr = `${jour} ${num} ${mois} ${annee}`;
+      const dateStr = `${jour} ${dd}.${mm}.${yy}`;
       if (dateStr !== lastDateStr) {
         dateEl.textContent = dateStr;
         lastDateStr = dateStr;
@@ -1002,25 +1162,14 @@ function updateNowLine() {
   });
 }
 
-// v5.0.0 : menu admin caché. 5 clics consécutifs sur le titre "Planification"
+// v5.0.0 : menu admin caché via 5 clics sur le titre "Planification".
-// (avec max 2 secondes entre chaque clic) ouvrent le panneau admin.
+// v2026.5.25 : SUPPRIMÉ — l'accès au panneau admin se fait désormais via le
+// bouton "⚙ Paramètres" du popup user-badge (clic sur les initiales).
 function initAdminMenu() {
   const title = document.getElementById("app-title");
   if (!title) return;
-  let clicks = 0;
-  let resetTimer = null;
-  title.addEventListener("click", () => {
-    clicks++;
-    if (resetTimer) clearTimeout(resetTimer);
-    resetTimer = setTimeout(() => { clicks = 0; }, 2000);
-    if (clicks >= 5) {
-      clicks = 0;
-      clearTimeout(resetTimer);
-      showAdminPanel();
-    }
-  });
-  // Cursor pointer pour indiquer (discrètement) qu'il est cliquable
   title.style.cursor = "default";
+  // Plus de handler de clic : les 5 clics n'ouvrent plus rien.
 }
 
 // ============================================================================
@@ -1063,6 +1212,10 @@ function initSessionTimer() {
           hideReconnectFailedBanner();
           markSessionActivity();
           showToast("Reconnecté", "Session EasyVista renouvelée");
+          // v2026.5.34 : relancer fetchUser tout de suite (au lieu d'attendre
+          // le retry de 60s) — la session vient d'être renouvelée, c'est le
+          // meilleur moment pour récupérer le user.
+          _maybeRetryFetchUser("session_reconnected");
           // Recharger le planning à la date courante sans perdre la position
           await loadForDate(state.currentDate);
         }
@@ -1710,17 +1863,9 @@ function renderAdminSectionTeam(container, cfg, saveFn) {
 
     tableWrap.appendChild(table);
 
-    // Bouton Ajouter manuellement
+    // v2026.5.26 : bouton "+ Ajouter manuellement" retiré. La liste complète
-    const addBtn = document.createElement("button");
+    // des techniciens du groupe est chargée automatiquement depuis EasyVista
-    addBtn.type = "button";
+    // à l'ouverture du panel admin (voir auto-détection plus bas).
-    addBtn.className = "btn btn-secondary";
-    addBtn.textContent = "+ Ajouter manuellement";
-    addBtn.style.marginTop = "10px";
-    addBtn.addEventListener("click", () => {
-      rows.push({ id: "", name: "", included: true, days: [] });
-      render();
-    });
-    tableWrap.appendChild(addBtn);
 
     // Bouton Enregistrer
     const saveBtn = document.createElement("button");
@@ -1746,6 +1891,36 @@ function renderAdminSectionTeam(container, cfg, saveFn) {
   }
 
   render();
+
+  // v2026.5.26 : auto-détection EasyVista à l'ouverture du panel admin.
+  // On lance en arrière-plan (non-bloquant), et on merge avec cfg.team actuel
+  // quand le résultat arrive. Les techs actuellement en cfg.team restent
+  // cochés par défaut ; les nouveaux détectés du groupe apparaissent non-cochés.
+  (async () => {
+    try {
+      const resp = await sendMessage({ type: "detectTeam" });
+      if (resp && resp.ok && resp.members && resp.members.length) {
+        for (const m of resp.members) {
+          const existing = rows.find(r => r.id === m.id);
+          if (existing) {
+            if (m.name && !m.name.startsWith("?") && existing.name.startsWith("?")) {
+              existing.name = m.name;
+            }
+          } else {
+            rows.push({
+              id: m.id,
+              name: m.name || "? (" + m.id + ")",
+              included: !!m.alreadyInTeam,
+              days: []
+            });
+          }
+        }
+        render();
+      }
+    } catch (err) {
+      console.warn("[admin auto-detect]", err);
+    }
+  })();
 }
 
 // v5.0.0 : sections suivantes (placeholders, à enrichir v5.0.1+)
@@ -2577,6 +2752,11 @@ async function loadForDate(isoDate, opts = {}) {
     console.log(`[load] merged : ${merged.techs.length} techs, ${totalIv} iv totales, ${totalInterIv} interventions réelles, ${notFetched} sans fiche`);
     console.log(`[load] needFetch = ${needFetch} | doStatusRefresh = ${!!opts.doStatusRefresh} | forceRefetch = ${!!opts.forceRefetch} | aborted = ${isRefreshAborted(myToken)}`);
 
+    // v2026.5.34 : si le user n'est pas encore connu (badge "?"), on tente
+    // un fetch immédiatement puisque le planning a réussi = session valide.
+    // Évite d'attendre le retry de 60s quand on vient juste de se reconnecter.
+    _maybeRetryFetchUser("after_load_success");
+
     // v4.3.2 : avant de lancer le fetch des fiches (lourd, ~460 KB chacune),
     // on fait d'abord un batch xhr2 (léger, ~2-5 KB chacun) pour récupérer
     // les vraies infos contact/lieu de toutes les interventions en parallèle.
@@ -2839,6 +3019,16 @@ function actionNodeToIntervention(node) {
     reservationCreator: reservationCreator, // "Nom, Prénom" du coordinateur
     cssClass: cssClass,
     isPompier: /pompier/i.test(label) || /pompier/i.test(actionType),
+    // v2026.5.27 : catégorie d'absence pour classification visuelle
+    //   "maladie" | "conge" | "pompier" | null
+    absenceCategory: (function() {
+      if (effectiveType !== "AL-Absence") return null;
+      const lblTest = reservationMatch ? reservationMatch[1].trim() : label;
+      if (/pompier/i.test(lblTest) || /pompier/i.test(actionType)) return "pompier";
+      if (/maladie/i.test(lblTest)) return "maladie";
+      if (/cong[ée]s?/i.test(lblTest)) return "conge";
+      return null;
+    })(),
     ref: ref,
     startDate: startDate,
     endDate: endDate,
@@ -4517,9 +4707,30 @@ function buildCard(tech, isoDate) {
 
   const isPompier = tech.interventions.some(iv => iv.isPompier);
   const isAbsent = isTechAbsent(tech, isoDate);
+  // v2026.5.30 : détecter aussi les absences récurrentes hardcodées (Pillonel vendredi)
+  // pour leur appliquer le code couleur cyan (comme Congé) au lieu du rouge Pompier.
+  const isRecurring = isPillonelAbsentFriday(tech, isoDate);
+
   if (isPompier) card.classList.add("is-pompier");
   if (isAbsent) card.classList.add("is-absent");
 
+  // v2026.5.27 : déterminer la catégorie d'absence principale (maladie/conge/pompier)
+  // pour appliquer le bon code couleur sur la carte entière.
+  // v2026.5.30 : les absences récurrentes hardcodées prennent la catégorie
+  //              "recurring" (même cyan que Congé, texte distinct).
+  let absenceCategory = null;  // "maladie" | "conge" | "pompier" | "recurring" | null
+  if (isRecurring) {
+    absenceCategory = "recurring";
+  } else if (isPompier) {
+    absenceCategory = "pompier";
+  } else if (isAbsent) {
+    const catBlock = tech.interventions.find(iv => iv.type === "AL-Absence" && iv.absenceCategory);
+    if (catBlock) absenceCategory = catBlock.absenceCategory;
+  }
+  if (absenceCategory) {
+    card.classList.add("absence-cat-" + absenceCategory);
+  }
+
   const realInterventions = tech.interventions.filter(iv =>
     iv.type !== "AL-Absence" && !iv.isPompier
   );
@@ -4535,23 +4746,57 @@ function buildCard(tech, isoDate) {
   // --- Header ---
   const header = document.createElement("div");
   header.className = "card-header";
+
+  // v2026.5.27 : pastille colorée supprimée (v2026.5.28) — la barre gauche de la
+  // carte + le badge à droite suffisent pour indiquer la catégorie d'absence.
+
   const nameEl = document.createElement("div");
   nameEl.className = "card-tech-name";
   nameEl.textContent = tech.name;
   header.appendChild(nameEl);
 
-  if (isPompier || isAbsent) {
+  if (isPompier || isAbsent || isRecurring) {
     const badge = document.createElement("div");
     badge.className = "card-tech-badge";
-    if (isPompier) {
+    if (isRecurring) {
+      // v2026.5.30 : absence récurrente (Pillonel vendredi) → badge "Absent" cyan
+      badge.classList.add("badge-recurring");
+      badge.textContent = "Absent";
+    } else if (isPompier) {
       badge.classList.add("badge-pompier");
       badge.textContent = "Pompier";
+    } else if (absenceCategory === "maladie") {
+      badge.classList.add("badge-maladie");
+      badge.textContent = "Maladie/Accident";
+    } else if (absenceCategory === "conge") {
+      // Déterminer singulier/pluriel selon la durée
+      const ab = absenceBlocks.find(a => a.absenceCategory === "conge") || absenceBlocks[0];
+      const multiDay = ab && ab.startDate && ab.endDate && ab.startDate !== ab.endDate;
+      badge.classList.add("badge-conge");
+      badge.textContent = multiDay ? "Congés" : "Congé";
     } else {
       badge.classList.add("badge-absent");
       badge.textContent = "Absent";
     }
     header.appendChild(badge);
   }
+
+  // v2026.5.32 : stats rapides pour la vue horizontale (cachées en classique)
+  const rowStats = document.createElement("div");
+  rowStats.className = "tech-row-stats";
+  const totalInterv = realInterventions.length;
+  const pill1 = document.createElement("span");
+  pill1.className = "stat-pill";
+  pill1.textContent = totalInterv + " interv.";
+  rowStats.appendChild(pill1);
+  if (morning > 0 || afternoon > 0) {
+    const pill2 = document.createElement("span");
+    pill2.className = "stat-pill";
+    pill2.textContent = morning + "m · " + afternoon + "a";
+    rowStats.appendChild(pill2);
+  }
+  header.appendChild(rowStats);
+
   card.appendChild(header);
 
   // --- Body ---
@@ -4572,30 +4817,60 @@ function buildCard(tech, isoDate) {
   } else if (isAbsent && absenceBlocks.length) {
     const note = document.createElement("div");
     note.className = "card-status-note absent";
-    const ab = absenceBlocks[0];
+    if (absenceCategory) {
-    if (ab.startDate && ab.endDate && ab.startDate !== ab.endDate) {
+      note.classList.add("absent-" + absenceCategory);
-      note.textContent = `Absent du ${ab.startDate.substring(0, 5)} au ${ab.endDate.substring(0, 5)}`;
-    } else {
-      note.textContent = "Absent toute la journée";
     }
+    const ab = absenceBlocks[0];
+    // v2026.5.27 : libellé enrichi "Absent du XX au YY — Maladie" ou "Absent — Congé"
+    const multiDay = ab.startDate && ab.endDate && ab.startDate !== ab.endDate;
+    const catLabel = absenceCategory === "maladie" ? "Maladie/Accident"
+                   : absenceCategory === "conge"   ? (multiDay ? "Congés" : "Congé")
+                   : null;
+    let txt;
+    if (multiDay) {
+      txt = `Absent du ${ab.startDate.substring(0, 5)} au ${ab.endDate.substring(0, 5)}`;
+    } else {
+      txt = "Absent toute la journée";
+    }
+    if (catLabel) txt += ` — ${catLabel}`;
+    note.textContent = txt;
     body.appendChild(note);
 
     // v5.0.4 : tooltip au hover sur toute la carte absent (pas juste un
     // bouton visible). Contient : détail période + bouton supprimer si
     // c'est une absence supprimable (actionId réel, pas pompier récurrent).
+    // v2026.5.33 : en vue horizontale, attacher le hover SEULEMENT au badge
+    // (Congé / Maladie/Accident / Absent) pour éviter que la popup s'affiche
+    // dès qu'on approche de la ligne du tech. En vue classique, on garde la
+    // carte entière comme zone de hover (comportement d'origine).
     if (ab.actionId && !ab.isPompier && !ab._recurring) {
-      // On attache le tooltip sur la CARD ENTIÈRE (card) — comme ça
-      // survoler n'importe où sur la zone grisée "absent" le déclenche.
       const ivCopy = {
         ...ab,
-        type: "AL-Absence"  // force pour buildTooltipHTML
+        type: "AL-Absence"
       };
+      const _isHorizontalView = () => document.documentElement.classList.contains("view-horizontal");
+      // Hover sur la carte entière : actif SEULEMENT en vue classique
       card.addEventListener("mouseenter", (e) => {
+        if (_isHorizontalView()) return;  // bloqué en horizontal
         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();
+        });
+      }
     }
   }
 
@@ -4841,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("mousemove", (e) => {
-  el.addEventListener("mouseleave", hideTooltip);
+    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
@@ -4862,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();
@@ -4879,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
+
+  // 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);
 }
 
@@ -4940,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;
@@ -4965,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
+  // v2026.5.34 : utiliser positionTooltipAnchored() unifié, en préférant
-  // pour que getBoundingClientRect() reflète la vraie taille du nouveau
+  // dessous (sous le segment timeline) via opts.anchorBelow = true.
-  // contenu.
+  //
+  // 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
+  // Force reflow
-  const tipRect = tip.getBoundingClientRect();
+  void tip.offsetWidth;
-  const r = el.getBoundingClientRect();
+  positionTooltipAnchored(el, { anchorBelow: true });
-  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);
 }
 
 function showTimelinePopover(e, el) {
@@ -7419,6 +7760,11 @@ function _attachPopupDragHandler(popup, dragbar) {
     startLeft = parseFloat(popup.style.left) || 0;
     startTop  = parseFloat(popup.style.top)  || 0;
     popup.classList.add("dragging");
+    // v2026.5.19 : flag global pour que showTooltip ignore les mouseenter
+    // pendant le drag. Ajout d'une classe sur <body> qui désactive les
+    // pointer-events sur les cartes.
+    state._popupDragging = true;
+    document.body.classList.add("popup-dragging");
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
   });
@@ -7624,10 +7970,10 @@ function bindTooltipInteractions() {
     }
   });
 
-  // Double-Ctrl : v4.3.0
+  // Double-Ctrl : v2026.5.21 — toggle sur l'intervention survolée
-  //   - Si 0 popup épinglé ET un tooltip live visible : épingler
+  //   - Si tooltip visible et iv pas encore épinglée pour cette date : épingle
-  //   - Si EXACTEMENT 1 popup épinglé ET souris pas dessus : le fermer
+  //   - Si tooltip visible et iv déjà épinglée pour cette date : désépingle
-  //   - Si 2+ popups épinglés : ne fait rien (ambigu, user doit utiliser Échap)
+  //   - Sinon (pas de tooltip visible) : rien
   // On détecte 2 keydown Control dans une fenêtre de 400 ms.
   let lastCtrlTs = 0;
   document.addEventListener("keydown", (e) => {
@@ -7636,17 +7982,36 @@ function bindTooltipInteractions() {
     const now = performance.now();
     if (now - lastCtrlTs < 400) {
       lastCtrlTs = 0;
-      if (pinnedPopups.length === 0) {
+      const iv = state.currentTooltipIv;
-        // Aucun popup épinglé : épingler le tooltip live s'il y en a un
+      if (!iv) return;
-        if (state.currentTooltipIv) pinTooltip();
+      const pinState = _getPinStateForIv(iv);
-      } else if (pinnedPopups.length === 1) {
+      if (pinState.isPinned && pinState.popup) {
-        // 1 popup épinglé : le fermer si la souris n'est pas dessus
+        // Déjà épinglée : désépingle (ferme le popup correspondant)
-        const p = pinnedPopups[0];
+        const idx = pinnedPopups.findIndex(p => p.el === pinState.popup);
-        if (!p.el.matches(":hover")) {
+        if (idx >= 0) pinnedPopups.splice(idx, 1);
-          _closePinnedPopup(p.el);
+        // Fermer aussi la pastille dock si elle existe
+        if (pinState.popup._linkedPill) {
+          try { pinState.popup._linkedPill.remove(); } catch (e) {}
         }
+        try { pinState.popup.remove(); } catch (e) {}
+        // Nettoyer dock si vide
+        const dock = document.getElementById("pinned-popups-dock");
+        if (dock && dock.querySelectorAll(".pinned-popup-dock-pill").length === 0) {
+          dock.classList.remove("visible");
+          const closeAllBtn = document.getElementById("pinned-popups-close-all");
+          if (closeAllBtn) closeAllBtn.remove();
+        } else {
+          _ensureDockCloseAllBtn();
+        }
+        // Mettre à jour le tooltip hover (📍 → 📌)
+        const tip = tooltipEl();
+        if (tip && tip.classList.contains("visible")) {
+          tip.innerHTML = buildTooltipHTML(iv);
+        }
+      } else {
+        // Pas encore épinglée : épingle
+        pinTooltip();
       }
-      // 2+ popups : rien faire (Échap pour tout fermer)
     } else {
       lastCtrlTs = now;
     }
@@ -7660,8 +8025,12 @@ function bindTooltipInteractions() {
     e.preventDefault();
     const action = btn.dataset.action;
     if (action === "pin") {
-      // v4.3.0 : toujours épingler (le tooltip live clone son contenu en popup
+      // v2026.5.22 : clic sur 📌/📍 dans le tooltip hover = TOUJOURS réépingler
-      // détaché). Pour désépingler, l'user utilise × sur le popup, ou Échap.
+      // à la position actuelle. Si un popup existe déjà pour cette iv+date,
+      // il est supprimé avant d'en créer un nouveau à côté de la carte survolée.
+      // (La suppression de l'ancien est faite dans pinTooltip() qui gère
+      // l'unicité actionId+date — v2026.5.21.)
+      // Pour désépingler : bouton 📍 dans la topbar du popup, double-Ctrl, ou Échap.
       if (state.currentTooltipIv) {
         pinTooltip();
       }
@@ -7804,12 +8173,25 @@ function buildTooltipHTML(iv) {
     rows.push(`<dt></dt><dd style="color:var(--text-faint);font-size:11px">Cliquer pour ouvrir la fiche</dd>`);
   }
 
+  // v2026.5.21 : icône épingle adaptative
+  //   📌 (épingle couchée) = pas encore épinglée, clic pour épingler
+  //   📍 (épingle plantée, rouge) = déjà épinglée pour cette (ref + date)
+  //     — clic pour désépingler. NB : le popup a sa propre topbar avec un
+  //     bouton 📍 explicite ; celui-ci dans le tooltip hover sert surtout
+  //     à montrer visuellement l'état à l'user au survol.
+  const _pinState = _getPinStateForIv(iv);
+  const _pinIcon = _pinState.isPinned ? "📍" : "📌";
+  const _pinTitle = _pinState.isPinned
+      ? "Cette intervention est déjà épinglée pour ce jour. Cliquer pour désépingler."
+      : "Épingler la bulle (ou double-Ctrl). Cliquer à nouveau pour libérer.";
+  const _pinClass = _pinState.isPinned ? " tooltip-pinbtn-active" : "";
+
   if (rows.length === 0) {
     return `<div class="tooltip-actions">
   <div class="tooltip-actionbtn" data-action="reload" title="Recharger uniquement cette intervention">
     <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8a6 6 0 1 0 1.76-4.24M2 3v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
   </div>
-  <div class="tooltip-actionbtn tooltip-pinbtn" data-action="pin" title="Épingler la bulle (ou double-Ctrl). Cliquer à nouveau pour libérer.">📌</div>
+  <div class="tooltip-actionbtn tooltip-pinbtn${_pinClass}" data-action="pin" title="${_pinTitle}">${_pinIcon}</div>
 </div><dl><dt>Info</dt><dd>Aucun détail disponible</dd></dl>`;
   }
   // v4.1.13/14 : boutons d'action en haut à droite (recharger + épingler)
@@ -7817,10 +8199,30 @@ function buildTooltipHTML(iv) {
   <div class="tooltip-actionbtn" data-action="reload" title="Recharger uniquement cette intervention">
     <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8a6 6 0 1 0 1.76-4.24M2 3v3h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
   </div>
-  <div class="tooltip-actionbtn tooltip-pinbtn" data-action="pin" title="Épingler la bulle (ou double-Ctrl). Cliquer à nouveau pour libérer.">📌</div>
+  <div class="tooltip-actionbtn tooltip-pinbtn${_pinClass}" data-action="pin" title="${_pinTitle}">${_pinIcon}</div>
 </div><dl>${rows.join("")}</dl>`;
 }
 
+/**
+ * v2026.5.21 : retourne l'état d'épinglage pour une intervention donnée
+ * (pour la date actuellement affichée). Utilisé pour afficher 📌 vs 📍
+ * dans le tooltip hover.
+ */
+function _getPinStateForIv(iv) {
+  if (!iv || !iv.actionId) return { isPinned: false };
+  const date = state.currentDate || "";
+  const key = iv.actionId + "|" + date;
+  for (const p of pinnedPopups) {
+    if (!p || !p.el) continue;
+    const aid = p.el.dataset.actionId || "";
+    const d = p.el.dataset.originDate || "";
+    if (aid + "|" + d === key) {
+      return { isPinned: true, popup: p.el };
+    }
+  }
+  return { isPinned: false };
+}
+
 /**
  * Met en forme un texte d'action EasyVista en ajoutant des retours à la ligne
  * avant chaque étiquette connue ("Date :", "Lieu :", "Contact :", etc.).