Version 2026.5.35 — Fix popup épinglé position vue horizontale + stats gauche

- _softUnpinPopup refait, _maybeRetryFetchUser, positionTooltipAnchored unifiée
[code interpolé]

manifest.json

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

@@ -2648,29 +2648,83 @@ header.topbar::before {
   flex-shrink: 0;
   padding: 0 2px;
 }
-/* Masquer tous les enfants directs du popup minimisé */
+
+/* La dragbar devient un simple "handle" à gauche (≡) */
+.pinned-popup.pinned-popup-minimized .pinned-popup-dragbar {
+  position: static !important;
+  top: auto !important;
+  left: auto !important;
+  right: auto !important;
+  order: 1;
+  flex-shrink: 0;
+  width: 18px !important;
+  height: 22px !important;
+  background: transparent !important;
+  border: none !important;
+  cursor: grab;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-faint);
+  opacity: 0.6;
+  transition: opacity 0.12s, color 0.12s;
+}
+.pinned-popup.pinned-popup-minimized .pinned-popup-dragbar::before {
+  content: "≡" !important;
+  font-size: 15px;
+  line-height: 1;
+  /* v2026.5.24 : annuler les propriétés du ::before normal (barre grise) */
+  width: auto !important;
+  height: auto !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+}
+.pinned-popup.pinned-popup-minimized .pinned-popup-dragbar:hover {
+  opacity: 1;
+  color: var(--text);
+}
+.pinned-popup.pinned-popup-minimized.dragging .pinned-popup-dragbar {
+  cursor: grabbing;
+}
+
+/* Masquer tous les enfants directs SAUF topbar, dragbar et minref */
 .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 */
+
+/* La ref au centre, cliquable pour agrandir */
 .pinned-popup-minref {
-  display: block;
+  display: flex;
-  text-align: center;
+  align-items: center;
-  padding: 10px 12px;
+  justify-content: center;  /* v2026.5.24 : centrer horizontalement la ref */
+  flex: 1;
+  min-width: 0;
+  padding: 0 10px;
   font-family: var(--mono, monospace);
-  font-size: 15px;
+  font-size: 14px;
   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;
+  order: 2;
+  text-align: center;  /* v2026.5.24 : centrer le texte */
 }
 .pinned-popup-minref:hover {
-  background: var(--bg-muted);
+  color: var(--accent, #3b82f6);
+}
+
+/* Boutons plus petits en mode minimisé */
+.pinned-popup.pinned-popup-minimized .pinned-popup-btn {
+  width: 22px !important;
+  height: 22px !important;
+  font-size: 12px !important;
+}
+.pinned-popup.pinned-popup-minimized .pinned-popup-refresh svg {
+  width: 12px;
+  height: 12px;
 }
 
 /* ==========================================================================
@@ -2717,15 +2771,9 @@ header.topbar::before {
   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; }
+/* v2026.5.26 : les anciennes règles color-XXX qui mettaient un fond coloré vif
-.pinned-popup-dock-pill.color-installation { background: var(--c-installation); color: white; border-color: transparent; }
+   sont remplacées par une simple barre verticale à gauche de la pastille.
-.pinned-popup-dock-pill.color-recup        { background: var(--c-recup);        color: white; border-color: transparent; }
+   Les styles pour ::before sont plus bas dans le fichier. */
-.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 {
@@ -2949,3 +2997,644 @@ body.popup-dragging .pinned-popup {
   background: rgba(239, 68, 68, 0.15);
   border-radius: 4px;
 }
+
+/* ==========================================================================
+   v2026.5.23 : drag & drop des pastilles du dock
+   ========================================================================== */
+.pinned-popup-dock-pill {
+  cursor: grab;
+  user-select: none;
+  transition: opacity 0.15s, transform 0.12s;
+}
+.pinned-popup-dock-pill:active {
+  cursor: grabbing;
+}
+.pinned-popup-dock-pill.pill-dragging {
+  opacity: 0.3 !important;
+  pointer-events: none;
+}
+.pill-dragging-ghost {
+  animation: pill-ghost-bounce 0.2s ease-out;
+  transform: scale(1.05);
+  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
+}
+@keyframes pill-ghost-bounce {
+  from { transform: scale(1); }
+  to   { transform: scale(1.05); }
+}
+
+/* ==========================================================================
+   v2026.5.25 : pastille dock enrichie (lieu + service + date) +
+                bouton Paramètres dans popup user-badge +
+                ref dans mini-menu pill
+   v2026.5.26 : couleurs sobres (fond sombre + barre colorée à gauche) +
+                contenu centré
+   ========================================================================== */
+
+/* Pastille dock : 3 lignes centrées, fond sombre, barre colorée à gauche */
+.pinned-popup-dock-pill {
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 6px 14px 6px 18px !important;
+  gap: 2px !important;
+  line-height: 1.2 !important;
+  text-align: center;
+  min-width: 200px;
+  max-width: 300px;
+  /* Fond sobre et texte bien lisible, peu importe la catégorie */
+  background: var(--bg-muted) !important;
+  color: var(--text) !important;
+  border: 1px solid var(--border) !important;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Barre verticale colorée à gauche = indicateur de catégorie */
+.pinned-popup-dock-pill::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--c-autre);
+}
+.pinned-popup-dock-pill.color-livraison::before    { background: var(--c-livraison); }
+.pinned-popup-dock-pill.color-installation::before { background: var(--c-installation); }
+.pinned-popup-dock-pill.color-recup::before        { background: var(--c-recup); }
+.pinned-popup-dock-pill.color-remplacement::before { background: var(--c-remplacement); }
+.pinned-popup-dock-pill.color-incident::before     { background: var(--c-incident); }
+.pinned-popup-dock-pill.color-rollout::before      { background: var(--c-rollout); }
+.pinned-popup-dock-pill.color-reservation::before  { background: var(--c-reservation); }
+.pinned-popup-dock-pill.color-absence::before      { background: #666; }
+.pinned-popup-dock-pill.color-autre::before        { background: var(--c-autre); }
+
+.pinned-popup-dock-pill-lieu {
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text);
+  text-align: center;
+}
+.pinned-popup-dock-pill-service {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.pinned-popup-dock-pill-date {
+  display: block;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-faint);
+  font-family: var(--mono, monospace);
+  text-align: center;
+}
+
+/* Ref dans le mini-menu hover de la pastille */
+.pill-hover-menu-ref {
+  padding: 6px 12px;
+  text-align: center;
+  font-family: var(--mono, monospace);
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Bouton Paramètres dans popup user-badge */
+.user-name-popup-settings {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 6px 10px;
+  background: var(--bg-muted);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  width: 100%;
+  justify-content: center;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.user-name-popup-settings:hover {
+  background: var(--accent, #3b82f6);
+  color: white;
+  border-color: var(--accent, #3b82f6);
+}
+.user-name-popup-settings .settings-ico {
+  font-size: 15px;
+}
+
+/* ==========================================================================
+   v2026.5.26 : rond gris avec "?" quand user inconnu
+   ========================================================================== */
+.user-badge.user-badge-unknown {
+  --user-badge-color: #6b7280 !important;
+  opacity: 0.75;
+  font-weight: 500;
+}
+.user-badge.user-badge-unknown:hover {
+  opacity: 1;
+}
+
+/* ==========================================================================
+   v2026.5.27 : agrandir +20% les textes topbar + stats bar pour la lisibilité
+   ========================================================================== */
+/* Labels boutons topbar */
+.btn-action-label,
+.btn-refresh-label {
+  font-size: 14px !important;  /* +20% depuis 12px */
+}
+.btn-today {
+  font-size: 14px !important;
+  padding: 7px 12px !important;
+}
+.btn-subtle {
+  font-size: 14px !important;
+}
+.capture-info {
+  font-size: 14px !important;  /* +20% depuis 12px */
+}
+.topbar h1 {
+  font-size: 21px !important;  /* +20% depuis 18px */
+}
+/* Date-custom label (Vendredi 24.04.2026) */
+#date-custom-label {
+  font-size: 14px !important;  /* +20% depuis 12px */
+}
+.date-custom {
+  font-size: 14px !important;
+}
+/* Stats bar */
+.stats-bar,
+.stats-bar * {
+  font-size: 14px !important;
+}
+.stats-bar strong {
+  font-size: 16px !important;
+}
+
+/* v2026.5.27 : icône thème plus contrastée avec bordure + fond visible */
+#theme-toggle {
+  border: 1.5px solid var(--border-strong, rgba(128,128,128,0.5)) !important;
+  background: var(--bg-muted) !important;
+  width: 38px;
+  height: 38px;
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+#theme-toggle:hover {
+  background: var(--accent-soft, rgba(59, 130, 246, 0.15)) !important;
+  border-color: var(--accent, #3b82f6) !important;
+}
+#theme-icon {
+  font-size: 20px;
+  line-height: 1;
+  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+}
+
+/* ==========================================================================
+   v2026.5.27 : classification visuelle des absences (Maladie, Congé, Pompier)
+   ========================================================================== */
+
+/* Variables de couleurs pour les catégories d'absence */
+:root {
+  --c-maladie: #4338ca;         /* Indigo foncé */
+  --c-maladie-soft: #e0e7ff;    /* Indigo très clair */
+  --c-conge: #06b6d4;           /* Cyan */
+  --c-conge-soft: #cffafe;      /* Cyan très clair */
+}
+html.theme-dark {
+  --c-maladie: #818cf8;         /* Indigo plus clair pour dark mode */
+  --c-maladie-soft: #2a1e66;    /* Indigo foncé pour fonds */
+  --c-conge: #67e8f9;           /* Cyan plus clair pour dark mode */
+  --c-conge-soft: #0e3e4a;      /* Cyan foncé pour fonds */
+}
+
+/* Badge "Maladie" à côté du nom */
+.badge-maladie {
+  background: var(--c-maladie-soft);
+  color: var(--c-maladie);
+  font-weight: 600;
+}
+
+/* Badge "Congé" / "Congés" à côté du nom */
+.badge-conge {
+  background: var(--c-conge-soft);
+  color: var(--c-conge);
+  font-weight: 600;
+}
+
+/* Carte entière : couleur de fond + barre gauche épaisse pour absence */
+.card.absence-cat-maladie {
+  border-left: 4px solid var(--c-maladie);
+  background: linear-gradient(to bottom, var(--c-maladie-soft) 0%, var(--bg-elevated) 40%);
+}
+html.theme-dark .card.absence-cat-maladie {
+  background: linear-gradient(to bottom, rgba(67, 56, 202, 0.12) 0%, var(--bg-elevated) 40%);
+}
+
+.card.absence-cat-conge {
+  border-left: 4px solid var(--c-conge);
+  background: linear-gradient(to bottom, var(--c-conge-soft) 0%, var(--bg-elevated) 40%);
+}
+html.theme-dark .card.absence-cat-conge {
+  background: linear-gradient(to bottom, rgba(6, 182, 212, 0.12) 0%, var(--bg-elevated) 40%);
+}
+
+/* Pompier — on reprend le style existant mais on accentue le border-left */
+.card.absence-cat-pompier {
+  border-left: 4px solid var(--danger);
+}
+
+/* Pastille ronde à côté du nom */
+.tech-name-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 8px;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.tech-name-dot.absence-dot-maladie  { background: var(--c-maladie); }
+.tech-name-dot.absence-dot-conge    { background: var(--c-conge); }
+.tech-name-dot.absence-dot-pompier  { background: var(--danger); }
+
+/* Note statut (banner texte sur la zone interventions) */
+.card-status-note {
+  padding: 14px 16px;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 6px;
+  margin: 10px;
+}
+.card-status-note.absent-maladie {
+  background: var(--c-maladie-soft);
+  color: var(--c-maladie);
+}
+.card-status-note.absent-conge {
+  background: var(--c-conge-soft);
+  color: var(--c-conge);
+}
+.card-status-note.pompier {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+/* ==========================================================================
+   v2026.5.28 : popups épinglés gardent une taille standard au resize de la
+   fenêtre. Le max-width 620px du tooltip de base les contraignait quand on
+   réduisait la largeur depuis le côté droit — désormais ils restent à leur
+   taille créée et sont simplement repositionnés dans la safe area.
+   ========================================================================== */
+.pinned-popup:not(.pinned-popup-minimized):not(.pinned-popup-reduced) {
+  max-width: none !important;
+  width: 520px !important;   /* largeur standard fixe */
+  min-width: 380px;
+}
+/* Sur les très petits écrans (< 600px), on laisse le clamp naturel */
+@media (max-width: 600px) {
+  .pinned-popup:not(.pinned-popup-minimized):not(.pinned-popup-reduced) {
+    width: calc(100vw - 20px) !important;
+    min-width: 0;
+  }
+}
+
+/* ==========================================================================
+   v2026.5.30 : absences récurrentes (Pillonel vendredi) en cyan
+   (même couleur que Congé mais texte distinct "Absent le vendredi")
+   ========================================================================== */
+
+/* Badge "Absent" cyan pour récurrent */
+.badge-recurring {
+  background: var(--c-conge-soft);
+  color: var(--c-conge);
+  font-weight: 600;
+}
+
+/* Carte entière : bordure gauche cyan + fond dégradé */
+.card.absence-cat-recurring {
+  border-left: 4px solid var(--c-conge);
+  background: linear-gradient(to bottom, var(--c-conge-soft) 0%, var(--bg-elevated) 40%);
+}
+html.theme-dark .card.absence-cat-recurring {
+  background: linear-gradient(to bottom, rgba(6, 182, 212, 0.12) 0%, var(--bg-elevated) 40%);
+}
+
+/* Message "Absent le vendredi" (ou autre récurrence) en cyan */
+.tech-absence-recurring {
+  padding: 14px 12px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 500;
+  font-style: normal;
+  color: var(--c-conge);
+  background: var(--c-conge-soft);
+  border-radius: 6px;
+  margin: 10px;
+}
+html.theme-dark .tech-absence-recurring {
+  background: rgba(6, 182, 212, 0.12);
+}
+
+/* ==========================================================================
+   v2026.5.30 : mode compact pour écrans 24" Full HD (1920×1080) ou plus petits
+   Objectif : réduire les paddings et tailles sans casser la lisibilité.
+   ========================================================================== */
+@media (max-width: 1920px) {
+  /* Topbar légèrement compactée */
+  .topbar {
+    padding: 8px 14px !important;
+    gap: 10px;
+  }
+  .topbar h1 {
+    font-size: 18px !important;
+  }
+  .app-clock-date,
+  .app-clock-time {
+    font-size: 19px !important;
+  }
+  .app-clock-date::after {
+    font-size: 22px !important;
+  }
+
+  /* Stats bar plus dense */
+  .stats-bar {
+    padding: 6px 12px !important;
+  }
+  .stats-bar,
+  .stats-bar * {
+    font-size: 13px !important;
+  }
+  .stats-bar strong {
+    font-size: 14px !important;
+  }
+
+  /* Cartes : padding réduit */
+  .card-header {
+    padding: 8px 12px !important;
+  }
+  .card-tech-name {
+    font-size: 14px !important;
+  }
+  .card-tech-badge {
+    font-size: 10px !important;
+    padding: 2px 6px !important;
+  }
+
+  /* Interventions : padding vertical réduit */
+  .intervention-v2 {
+    padding: 7px 10px 9px 6px !important;
+  }
+
+  /* Timeline plus fine */
+  .timeline {
+    padding: 10px 12px 6px 12px !important;
+  }
+  .timeline-bar {
+    height: 18px !important;
+  }
+  .timeline-label {
+    font-size: 10px !important;
+  }
+
+  /* Boutons topbar un peu plus compacts */
+  .btn-action,
+  .btn-refresh {
+    padding: 6px 10px !important;
+  }
+  .btn-action-label,
+  .btn-refresh-label {
+    font-size: 13px !important;
+  }
+  .btn-today {
+    padding: 6px 10px !important;
+    font-size: 13px !important;
+  }
+  .btn-subtle {
+    padding: 6px 10px !important;
+    font-size: 13px !important;
+  }
+
+  /* Grid cartes : colonnes légèrement plus étroites pour en caser 1-2 de + */
+  .main-grid {
+    gap: 10px !important;
+  }
+}
+
+/* Breakpoint encore plus étroit (tablette / laptop 13-14") */
+@media (max-width: 1400px) {
+  .topbar {
+    padding: 6px 10px !important;
+  }
+  .topbar h1 {
+    font-size: 17px !important;
+  }
+  .app-clock-date,
+  .app-clock-time {
+    font-size: 17px !important;
+  }
+  .intervention-v2 {
+    padding: 6px 8px 7px 5px !important;
+  }
+  .card-header {
+    padding: 7px 10px !important;
+  }
+  .stats-bar,
+  .stats-bar * {
+    font-size: 12px !important;
+  }
+}
+
+/* ==========================================================================
+   v2026.5.32 : Vue horizontale — chaque tech = 1 ligne fine empilée
+   Active seulement quand <html class="view-horizontal">.
+   But : voir les 8 techs d'un coup sur un 24" Full HD.
+   ========================================================================== */
+
+/* Mode horizontal : la grille devient un simple stack vertical */
+html.view-horizontal .cards {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 6px !important;
+  padding: 8px 12px 24px 12px !important;
+}
+
+/* Chaque carte devient une ligne horizontale compacte */
+html.view-horizontal .card {
+  flex-direction: row !important;
+  align-items: stretch !important;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+/* Header devient une barre latérale gauche fixe */
+/* v2026.5.35 : réduit à 140px (au lieu de 200px) pour donner plus de place à la timeline */
+html.view-horizontal .card-header {
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  justify-content: center !important;
+  min-width: 140px !important;
+  max-width: 140px !important;
+  border-bottom: none !important;
+  border-right: 1px solid var(--border) !important;
+  padding: 6px 10px !important;
+  gap: 3px !important;
+  flex: 0 0 auto;
+}
+html.view-horizontal .card-tech-name {
+  font-size: 13px !important;
+  font-weight: 600;
+  line-height: 1.2 !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  max-width: 100%;
+}
+html.view-horizontal .card-tech-badge {
+  font-size: 10px !important;
+  padding: 2px 6px !important;
+  white-space: nowrap;
+}
+
+/* Le body prend le reste de la ligne, scroll horizontal si trop d'interv */
+html.view-horizontal .card-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Timeline visible, un peu plus fine */
+html.view-horizontal .timeline {
+  padding: 6px 10px 4px 10px !important;
+  background: transparent !important;
+  border-bottom: none !important;
+}
+html.view-horizontal .timeline-bar {
+  height: 22px !important;
+}
+
+/* Liste interventions en mode "chips" (défilement horizontal) */
+html.view-horizontal .card-body > .intervention-v2,
+html.view-horizontal .card-body > .intervention {
+  display: none !important;  /* masquer la liste détaillée en vue horiz */
+}
+
+/* Messages "Pas d'intervention planifiée" / "Absent" tiennent sur la ligne */
+html.view-horizontal .card-empty,
+html.view-horizontal .card-status-note,
+html.view-horizontal .tech-absence-recurring {
+  padding: 8px 12px !important;
+  font-size: 13px !important;
+  margin: 4px 8px !important;
+  text-align: left !important;
+}
+
+/* Stats quick pour chaque tech (nb interv etc.) affichées dans le header */
+html.view-horizontal .card-header::after {
+  content: "";
+}
+html.view-horizontal .tech-row-stats {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+html.view-horizontal .tech-row-stats .stat-pill {
+  padding: 1px 6px;
+  background: var(--bg-muted);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* En vue classique, on cache les éléments spécifiques horizontal */
+html.view-classic .tech-row-stats {
+  display: none !important;
+}
+
+/* ==========================================================================
+   v2026.5.35 : en vue horizontale, stats globales sur le CÔTÉ GAUCHE
+   (colonne verticale fixe) au lieu d'être au-dessus des cartes.
+   Libère de la hauteur verticale pour les 8 techs.
+   ========================================================================== */
+html.view-horizontal main {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+html.view-horizontal .stats {
+  flex: 0 0 auto;
+  width: 200px;
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  gap: 8px !important;
+  padding: 12px 16px !important;
+  border-right: 1px solid var(--border);
+  background: var(--bg-muted);
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  min-height: calc(100vh - 80px);
+  font-size: 12px !important;
+}
+
+html.view-horizontal .stats .global-stat {
+  display: block;
+  width: 100%;
+  padding: 4px 0;
+}
+html.view-horizontal .stats .global-stat-main b {
+  font-size: 18px !important;
+  color: var(--text);
+}
+/* Masquer les séparateurs "·" en vue verticale */
+html.view-horizontal .stats .global-stat-sep {
+  display: none !important;
+}
+
+html.view-horizontal .cards {
+  flex: 1 1 auto;
+  min-width: 0;   /* autorise le shrink si grand nombre de techs */
+}
+
+/* Breakpoint étroit : stats plus compactes */
+@media (max-width: 1400px) {
+  html.view-horizontal .stats {
+    width: 160px;
+    padding: 8px 12px !important;
+    font-size: 11px !important;
+  }
+}

viewer.html

@@ -17,7 +17,7 @@
            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>
+              title="Utilisateur — cliquer pour accéder aux paramètres">?</button>
       <h1 id="app-title">Planification</h1>
       <div class="date-nav">
         <button id="nav-prev" class="btn btn-nav" title="Jour précédent" aria-label="Jour précédent">◀</button>

viewer.js

@@ -7015,11 +7015,52 @@ function pinTooltip() {
   // source visuelle du clic/hover). Fallback sur le segment timeline. Enfin
   // la row (qui marche en vue classique).
   let rowEl = null;
-  if (iv.actionId) {
+  const _isHorizontalView = document.documentElement.classList.contains("view-horizontal");
-    rowEl = document.querySelector(`.intervention-v2[data-action-id="${iv.actionId}"]`);
+
+  if (_isHorizontalView) {
+    console.log("[pinTooltip] vue horizontale → source = tooltip visible ou segment timeline");
+    // Priorité 1 : le tooltip actuellement affiché (meilleure source visuelle)
+    const currentTip = tooltipEl();
+    if (currentTip && currentTip.classList.contains("visible")) {
+      const r = currentTip.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) {
+        rowEl = currentTip;
+        console.log(`[pinTooltip] source = tooltip visible (${Math.round(r.left)}, ${Math.round(r.top)})`);
+      }
+    }
+    // Priorité 2 : segment timeline pour cette actionId
+    if (!rowEl && iv.actionId) {
+      // Il peut y avoir plusieurs .timeline-slot avec le même ivIdx si plusieurs
+      // cartes. On prend celui dont la row parente a le bon actionId.
+      const allSlots = document.querySelectorAll(".timeline-slot[data-iv-idx]");
+      for (const slot of allSlots) {
+        const card = slot.closest(".card");
+        if (!card) continue;
+        const ivIdx = slot.dataset.ivIdx;
+        const row = card.querySelector(`.intervention-v2[data-iv-idx="${ivIdx}"]`);
+        if (row && row.dataset.actionId === iv.actionId) {
+          const r = slot.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            rowEl = slot;
+            console.log(`[pinTooltip] source = segment timeline actionId=${iv.actionId}`);
+            break;
+          }
+        }
+      }
+    }
+  } else {
+    // Vue classique : chercher la row .intervention-v2 (comportement d'origine)
+    if (iv.actionId) {
+      rowEl = document.querySelector(`.intervention-v2[data-action-id="${iv.actionId}"]`);
+      if (rowEl) {
+        console.log(`[pinTooltip] vue classique → source = row intervention-v2`);
+      }
+    }
   }
+
+  // Fallback final : le tooltip live (même s'il n'est pas visible) — position actuelle
   if (!rowEl) {
-    // Fallback : utiliser la position actuelle du tooltip live
+    console.warn("[pinTooltip] aucune source visible trouvée → fallback tooltip live");
     rowEl = srcEl;
   }
 
@@ -7037,6 +7078,49 @@ function pinTooltip() {
   // v2026.5.19 : mémoriser aussi la date pour l'afficher sur la pastille dock
   popup.dataset.originDate = state.currentDate || "";
 
+  // v2026.5.25 : mémoriser aussi lieu + service pour la pastille enrichie
+  try {
+    const info = iv.infobulle || {};
+    const lieuRaw = info.lieu || iv.bulleLieu || "";
+    // Format pour pastille : "VILLE, Adresse" (on extrait les 2 premières parties)
+    const { ville, adresse } = (typeof splitLieu === "function")
+      ? splitLieu(lieuRaw)
+      : { ville: null, adresse: null };
+    let lieuFmt = "";
+    if (ville && adresse) lieuFmt = ville.toUpperCase() + ", " + adresse;
+    else if (adresse) lieuFmt = adresse;
+    else if (ville) lieuFmt = ville.toUpperCase();
+    popup.dataset.lieu = lieuFmt;
+
+    // Service : prendre les 2 dernières parties séparées par "/"
+    // Ex: "AdmCV/DJES/SSCM/SSCM - Admin/TEO - OS" → "SSCM - Admin/TEO - OS"
+    //     "AdmCV/OJV/JPX/JPX Lavaux-Oron" → "JPX/JPX Lavaux-Oron"
+    // v2026.5.26 : dans le DERNIER segment seulement, couper au " - " (espace
+    //              tiret espace) pour retirer les descriptions longues. Les
+    //              noms propres comme "Lavaux-Oron" (sans espaces) sont préservés.
+    //   Ex: "AdmCV/DJES/SSCM/SPOP - Centre administratif" → "SSCM/SPOP"
+    //       "AdmCV/OJV/JPX/JPX Lavaux-Oron" → "JPX/JPX Lavaux-Oron" (inchangé)
+    const serviceRaw = (info.service) || iv.categoryLine || "";
+    if (serviceRaw) {
+      const parts = serviceRaw.split("/").map(s => s.trim()).filter(Boolean);
+      let last2 = parts.slice(-2);
+      // Couper au " - " dans le DERNIER élément de last2
+      if (last2.length > 0) {
+        const lastIdx = last2.length - 1;
+        const lastSeg = last2[lastIdx];
+        const dashIdx = lastSeg.indexOf(" - ");
+        if (dashIdx > 0) {
+          last2[lastIdx] = lastSeg.substring(0, dashIdx).trim();
+        }
+      }
+      popup.dataset.service = last2.join("/");
+    } else {
+      popup.dataset.service = "";
+    }
+  } catch (err) {
+    console.warn("[pin] lieu/service build failed", err);
+  }
+
   // v2026.5.17 : masquer l'icône 📌 du contenu cloné (redondante car le
   // popup a sa propre topbar avec le bouton "désépingler" 📍 explicite)
   const oldPin = popup.querySelector('.tooltip-pinbtn[data-action="pin"]');
@@ -7165,6 +7249,9 @@ function pinTooltip() {
 
   // Enregistrer dans la liste
   pinnedPopups.push({ el: popup, iv: iv, rect: pos.rect });
+  // v2026.5.34 : stocker une référence à l'iv sur l'élément DOM — utilisée
+  // par _softUnpinPopup pour pouvoir ré-épingler via le bouton 📌 restauré.
+  popup._linkedIv = iv;
 
   // v4.3.0 : libérer le tooltip live (il redevient utilisable pour d'autres survols)
   bulleState.pinned = false;
@@ -7228,40 +7315,53 @@ async function _refreshPinnedPopupIv(popup, iv) {
 }
 
 /**
- * Désépinglage "mou" : la popup n'est plus considérée épinglée (elle n'est
+ * Désépinglage "mou" (v4.3.3) : transforme un popup épinglé en tooltip simple.
- * plus dans pinnedPopups, donc le comptage pour Ctrl×2 etc. ignore) mais on
+ *
- * la laisse visible. Elle disparait quand la souris sort.
+ * v2026.5.34 : refonte — le popup ne disparaît PLUS au mouseleave. À la place,
+ * il redevient un tooltip normal avec ses boutons ↻ (Actualiser) et 📌
+ * (Épingler) restaurés dans .tooltip-actions, et reste visible à l'écran
+ * comme un tooltip classique. L'user peut le re-cliquer sur 📌 pour le
+ * ré-épingler, ou cliquer ailleurs pour s'en débarrasser normalement.
+ *
+ * @param {HTMLElement} el - le popup à désépingler
  */
 function _softUnpinPopup(el) {
-  // Retirer de la liste (pour le comptage Ctrl×2) mais garder le DOM
+  if (!el) {
-  const idx = pinnedPopups.findIndex(p => p.el === el);
+    console.warn("[softUnpin] elément null — abandon");
-  if (idx >= 0) pinnedPopups.splice(idx, 1);
+    return;
+  }
+  console.log("[softUnpin] désépinglage du popup", el.dataset.actionId || "(sans actionId)");
 
-  // v4.3.3 corr : basculer visuellement en tooltip normal (retirer tous les
+  // 1. Retirer de la liste des popups épinglés (pour Ctrl×2 etc.)
-  // attributs visuels du mode épinglé : bordure bleue, dragbar, bouton ×,
+  const idx = pinnedPopups.findIndex(p => p.el === el);
-  // padding-top, etc.). La classe .soft-unpinned fait ça côté CSS.
+  if (idx >= 0) {
-  // On retire .pinned-popup pour que les règles visuelles lourdes
+    pinnedPopups.splice(idx, 1);
-  // disparaissent, tout en gardant la popup au même endroit (position
+    console.log(`[softUnpin] retiré de pinnedPopups (reste ${pinnedPopups.length})`);
-  // absolute conservée).
+  }
-  el.classList.remove("pinned-popup");
+
-  el.classList.add("soft-unpinned");
+  // 2. Reset le flag global bulleState.pinned si plus aucun popup épinglé.
-  // Icône 📌 → 📍 pour le clin d'œil (même si elle va bientôt disparaitre)
+  //    Sans ça, le tooltip live "croit" toujours qu'il est pinned et son
-  const pinBtn = el.querySelector('[data-action="pin"]');
+  //    handler click (notamment ↻ reload) peut partir en cacahuète.
-  if (pinBtn) pinBtn.textContent = "📍";
+  if (pinnedPopups.length === 0) {
-  // Supprimer les éléments propres au mode épinglé : barre de drag et ×
+    bulleState.pinned = false;
+  }
+
+  // 3. Retirer les éléments propres au mode épinglé : topbar, dragbar,
+  //    close btn, et classes minimized/reduced.
   const dragbar = el.querySelector(".pinned-popup-dragbar");
   if (dragbar) dragbar.remove();
   const closeBtn = el.querySelector(".pinned-popup-close");
   if (closeBtn) closeBtn.remove();
-  // v2026.5.17 : retirer aussi la nouvelle topbar et le conteneur minimisé
   const topbar = el.querySelector(".pinned-popup-topbar");
   if (topbar) topbar.remove();
   el.classList.remove("pinned-popup-minimized");
   el.classList.remove("pinned-popup-reduced");
 
-  // v2026.5.18 : retirer aussi la pastille du dock si elle existe
+  // 4. Retirer la pastille du dock si elle existe
   if (el._linkedPill) {
-    try { el._linkedPill.remove(); } catch (e) {}
+    try { el._linkedPill.remove(); } catch (e) {
+      console.warn("[softUnpin] erreur remove pill:", e);
+    }
     el._linkedPill = null;
   }
   // Si le dock est vide, le cacher ; mettre à jour le bouton "Fermer tous"
@@ -7274,28 +7374,123 @@ function _softUnpinPopup(el) {
     _ensureDockCloseAllBtn();
   }
 
-  // v2026.5.22 : si le tooltip hover est actuellement affiché pour la même
+  // 5. Restaurer le bouton 📌 dans .tooltip-actions
-  // intervention que celle qu'on désépingle, il faut regénérer son HTML pour
+  //    Lors de l'épinglage, ce bouton a été SUPPRIMÉ du DOM (voir pinTooltip
-  // que l'icône passe de 📍 (active rouge) à 📌 (non active) — sinon l'user
+  //    v2026.5.17 ligne 6921). Il faut le recréer pour que l'user puisse
-  // voit l'ancienne icône et croit qu'il est toujours épinglé.
+  //    ré-épingler ou que l'icône 📌 revienne visible.
+  const actionsEl = el.querySelector('.tooltip-actions');
+  if (actionsEl) {
+    const existingPin = actionsEl.querySelector('.tooltip-pinbtn[data-action="pin"]');
+    if (!existingPin) {
+      console.log("[softUnpin] restauration du bouton 📌 dans .tooltip-actions");
+      const pinBtn = document.createElement('div');
+      pinBtn.className = 'tooltip-actionbtn tooltip-pinbtn';
+      pinBtn.setAttribute('data-action', 'pin');
+      pinBtn.title = 'Épingler la bulle (ou double-Ctrl). Cliquer à nouveau pour libérer.';
+      pinBtn.textContent = '📌';
+      actionsEl.appendChild(pinBtn);
+    } else {
+      console.log("[softUnpin] bouton 📌 déjà présent, mise à jour visuelle");
+      existingPin.textContent = '📌';
+      existingPin.classList.remove('tooltip-pinbtn-active');
+    }
+  } else {
+    console.warn("[softUnpin] .tooltip-actions introuvable dans le popup — boutons pas restaurés");
+  }
+
+  // 5bis. v2026.5.34 : attacher un nouveau handler click sur .tooltip-actions
+  //       du popup soft-unpinned pour ré-épinglement / actualisation.
+  //       L'ancien handler du popup épinglé (qui faisait softUnpin au clic
+  //       sur pin) est encore attaché, mais notre nouveau handler utilise
+  //       stopPropagation avant pour l'empêcher de s'exécuter.
+  //       On garde une référence à l'iv pour pouvoir ré-épingler proprement.
+  const ivForRepin = el._linkedIv || null;
+  if (actionsEl && ivForRepin) {
+    // Retirer d'éventuels handlers précédents en remplaçant l'element
+    const newActions = actionsEl.cloneNode(true);
+    actionsEl.parentNode.replaceChild(newActions, actionsEl);
+
+    newActions.addEventListener("click", (e) => {
+      const btn = e.target.closest('[data-action]');
+      if (!btn) return;
+      const action = btn.dataset.action;
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (action === "pin") {
+        console.log("[softUnpin] clic sur 📌 d'un popup soft-unpinned → ré-épinglage");
+        // Retirer le popup soft-unpinned actuel
+        try { el.remove(); } catch (err) {}
+        // Simuler le survol de l'iv pour rendre le tooltip live, puis épingler
+        state.currentTooltipIv = ivForRepin;
+        pinTooltip();
+      } else if (action === "reload") {
+        console.log("[softUnpin] clic sur ↻ d'un popup soft-unpinned → recharger intervention");
+        if (typeof reloadSingleIntervention === "function") {
+          reloadSingleIntervention(ivForRepin, btn);
+        } else {
+          console.warn("[softUnpin] reloadSingleIntervention indisponible");
+        }
+      }
+    });
+  }
+
+  // 6. Basculer visuellement : retirer pinned-popup, mettre soft-unpinned.
+  //    La classe .soft-unpinned applique les styles "tooltip normal"
+  //    (pas de bordure bleue, pas de padding-top pour topbar disparue, etc.)
+  el.classList.remove("pinned-popup");
+  el.classList.add("soft-unpinned");
+
+  // 7. Régénérer le tooltip hover si on est en train de survoler la même iv
+  //    (pour synchroniser l'icône 📌/📍 dans le tooltip live).
+  //    Aussi, reset iv._reloading qui pourrait rester bloqué à true.
   const tip = tooltipEl();
   if (tip && tip.classList.contains("visible") && state.currentTooltipIv) {
-    tip.innerHTML = buildTooltipHTML(state.currentTooltipIv);
+    try {
+      state.currentTooltipIv._reloading = false;
+      tip.innerHTML = buildTooltipHTML(state.currentTooltipIv);
+    } catch (err) {
+      console.warn("[softUnpin] buildTooltipHTML failed:", err);
+    }
   }
 
-  // Helper qui joue l'animation de sortie puis supprime le DOM
+  // 8. v2026.5.34 : ne PAS programmer de suppression automatique au mouseleave.
-  const animateAndRemove = () => {
+  //    Le popup reste visible comme un tooltip normal. L'user le ferme en
-    el.classList.add("unpinning");
+  //    cliquant ailleurs ou en appuyant sur Échap. Il peut aussi re-cliquer
-    setTimeout(() => el.remove(), 180);
+  //    sur 📌 pour le ré-épingler.
-  };
+  //
+  //    Pour que le popup disparaisse quand l'user clique ailleurs, on ajoute
+  //    un handler de clic document qui supprime tous les .soft-unpinned si
+  //    le clic est hors du popup. Ce handler ne s'arme QU'UNE FOIS (au premier
+  //    désépinglage) et reste globalement.
+  _ensureSoftUnpinnedCleanupHandler();
 
-  if (!el.matches(":hover")) {
+  console.log("[softUnpin] terminé — popup reste visible en mode tooltip normal");
-    animateAndRemove();
+}
-    return;
+
-  }
+/**
-  // Souris dessus : on ne supprime pas tout de suite. On attend mouseleave
+ * v2026.5.34 : pose un handler global (une seule fois) qui ferme les popups
-  // et à ce moment on joue l'animation de sortie et on supprime.
+ * en état .soft-unpinned quand l'user clique ailleurs, ou appuie sur Échap.
-  el.addEventListener("mouseleave", animateAndRemove, { once: true });
+ */
+let _softUnpinnedCleanupHandlerInstalled = false;
+function _ensureSoftUnpinnedCleanupHandler() {
+  if (_softUnpinnedCleanupHandlerInstalled) return;
+  _softUnpinnedCleanupHandlerInstalled = true;
+
+  // Clic hors d'un popup soft-unpinned → supprimer
+  document.addEventListener("mousedown", (e) => {
+    const softPopups = document.querySelectorAll(".soft-unpinned");
+    if (softPopups.length === 0) return;
+    softPopups.forEach(el => {
+      // Ne pas fermer si le clic est DANS le popup lui-même
+      if (el.contains(e.target)) return;
+      console.log("[softUnpin cleanup] clic hors du popup — suppression");
+      el.classList.add("unpinning");
+      setTimeout(() => { try { el.remove(); } catch (err) {} }, 180);
+    });
+  }, true);  // phase capture pour attraper avant d'autres handlers
+
+  console.log("[softUnpin] handler cleanup global installé");
 }
 
 // ============================================================================
@@ -7401,24 +7596,34 @@ function _reducePinnedPopup(popup) {
 
   // Créer la pastille dock
   // v2026.5.18 : le fond de la pastille prend la couleur de catégorie
-  //   (via la classe color-XXX déjà utilisée ailleurs dans le CSS)
+  // v2026.5.25 : pastille à 3 lignes — lieu (fort), service (petit), date (petit)
-  // v2026.5.19 : pastille à 2 lignes — ref (gras) + date origine (petit)
+  //              La référence est affichée dans le mini-menu au survol.
   const pill = document.createElement("button");
   pill.type = "button";
   pill.className = "pinned-popup-dock-pill color-" + colorKey;
   pill.title = "Cliquer pour agrandir";
 
-  const pillRef = document.createElement("span");
+  // Ligne 1 : lieu (ou ref si pas de lieu)
-  pillRef.className = "pinned-popup-dock-pill-ref";
+  const pillLieu = document.createElement("span");
-  pillRef.textContent = label;
+  pillLieu.className = "pinned-popup-dock-pill-lieu";
-  pill.appendChild(pillRef);
+  pillLieu.textContent = popup.dataset.lieu || label || "—";
+  pill.appendChild(pillLieu);
 
-  // Date d'origine (ex: "21.04")
+  // Ligne 2 : service (2 dernières parties)
+  const serviceTxt = popup.dataset.service || "";
+  if (serviceTxt) {
+    const pillService = document.createElement("span");
+    pillService.className = "pinned-popup-dock-pill-service";
+    pillService.textContent = serviceTxt;
+    pill.appendChild(pillService);
+  }
+
+  // Ligne 3 : date "Mardi 22.04"
   const originDate = popup.dataset.originDate || "";
   if (originDate) {
     const pillDate = document.createElement("span");
     pillDate.className = "pinned-popup-dock-pill-date";
-    pillDate.textContent = _formatDateShort(originDate);
+    pillDate.textContent = _formatDateForPill(originDate);
     pill.appendChild(pillDate);
   }
 
@@ -7437,12 +7642,18 @@ function _reducePinnedPopup(popup) {
   popup._linkedPill = pill;
 
   pill.addEventListener("click", (e) => {
+    // v2026.5.23 : si on était en train de drag, ne pas déclencher le clic
+    if (pill._justDragged) {
+      pill._justDragged = false;
+      return;
+    }
     e.stopPropagation();
     _restorePinnedPopupFromDock(popup);
   });
 
   // v2026.5.20 : mini-menu au survol (Agrandir / Fermer)
   pill.addEventListener("mouseenter", () => {
+    if (pill._dragging) return;  // pas de menu pendant le drag
     _showPillHoverMenu(pill, popup);
   });
   pill.addEventListener("mouseleave", (e) => {
@@ -7450,6 +7661,9 @@ function _reducePinnedPopup(popup) {
     _schedulePillMenuClose();
   });
 
+  // v2026.5.23 : drag & drop — réordonne dans le dock, ou restaure hors du dock
+  _attachPillDragHandler(pill, popup);
+
   dock.appendChild(pill);
   dock.classList.add("visible");
 
@@ -7485,6 +7699,15 @@ function _showPillHoverMenu(pill, popup) {
   menu._linkedPill = pill;
   menu._linkedPopup = popup;
 
+  // v2026.5.25 : REF en haut du menu (info seulement, centrée)
+  const refText = popup.dataset.ref || "";
+  if (refText) {
+    const refLabel = document.createElement("div");
+    refLabel.className = "pill-hover-menu-ref";
+    refLabel.textContent = refText;
+    menu.appendChild(refLabel);
+  }
+
   const restoreBtn = document.createElement("button");
   restoreBtn.type = "button";
   restoreBtn.className = "pill-hover-menu-btn";
@@ -7596,15 +7819,26 @@ function _clampPopupInSafeArea(popup) {
   const vTop = rect.top;
 
   // Calcul des coords viewport cibles après clamp
+  // v2026.5.28 : si le popup est plus large que la zone dispo (fenêtre rétrécie
+  //              depuis le côté droit), on le garde à sa position actuelle —
+  //              l'user redimensionnera ou bougera manuellement. On préfère
+  //              "déborder" à droite plutôt que rétrécir le popup.
   let newVLeft = vLeft;
   let newVTop = vTop;
-  if (newVLeft < safe.left) newVLeft = safe.left;
+  const safeWidth = safe.right - safe.left;
-  if (newVLeft + w > safe.right) newVLeft = safe.right - w;
+  const safeHeight = safe.bottom - safe.top;
-  if (newVLeft < safe.left) newVLeft = safe.left;  // si popup plus large que viewport
+  if (w <= safeWidth) {
-
+    // Popup rentre : on clamp normalement
-  if (newVTop < safe.top) newVTop = safe.top;
+    if (newVLeft < safe.left) newVLeft = safe.left;
-  if (newVTop + h > safe.bottom) newVTop = safe.bottom - h;
+    if (newVLeft + w > safe.right) newVLeft = safe.right - w;
-  if (newVTop < safe.top) newVTop = safe.top;
+    if (newVLeft < safe.left) newVLeft = safe.left;
+  }
+  // Sinon : popup plus large que la zone → on laisse où il est, user libre
+  if (h <= safeHeight) {
+    if (newVTop < safe.top) newVTop = safe.top;
+    if (newVTop + h > safe.bottom) newVTop = safe.bottom - h;
+    if (newVTop < safe.top) newVTop = safe.top;
+  }
 
   if (newVLeft === vLeft && newVTop === vTop) return; // rien à faire
 
@@ -7626,6 +7860,185 @@ function _reclampAllFloatingPopups() {
   });
 }
 
+/**
+ * v2026.5.23 : drag & drop d'une pastille du dock.
+ * - Drag dans le dock : réordonne les pastilles (drop = insérer à la nouvelle
+ *   position). Les autres se décalent en live.
+ * - Drop HORS du dock : restaure le popup en mode Normal à la position de la
+ *   souris.
+ * Semi-transparent pendant le drag.
+ */
+function _attachPillDragHandler(pill, popup) {
+  const DRAG_THRESHOLD = 4;  // px avant de considérer un vrai drag
+  let isDown = false;
+  let isDragging = false;
+  let startX = 0, startY = 0;
+  let ghostEl = null;
+  let pillOriginalNext = null;  // voisin d'origine pour restaurer l'ordre
+
+  const onMouseMove = (e) => {
+    if (!isDown) return;
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    if (!isDragging) {
+      if (Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) return;
+      // Début du drag
+      isDragging = true;
+      pill._dragging = true;
+      pill._justDragged = true;
+      _hidePillHoverMenu();
+      pill.classList.add("pill-dragging");
+
+      // Créer un "ghost" flottant qui suit la souris
+      const r = pill.getBoundingClientRect();
+      ghostEl = pill.cloneNode(true);
+      ghostEl.style.position = "fixed";
+      ghostEl.style.left = r.left + "px";
+      ghostEl.style.top = r.top + "px";
+      ghostEl.style.width = r.width + "px";
+      ghostEl.style.height = r.height + "px";
+      ghostEl.style.zIndex = "1100";
+      ghostEl.style.opacity = "0.85";
+      ghostEl.style.pointerEvents = "none";
+      ghostEl.classList.add("pill-dragging-ghost");
+      document.body.appendChild(ghostEl);
+
+      // Mémoriser le voisin d'origine pour restaurer si drop hors dock
+      pillOriginalNext = pill.nextSibling;
+    }
+    // Déplacer le ghost avec la souris
+    if (ghostEl) {
+      ghostEl.style.left = (e.clientX - ghostEl.offsetWidth / 2) + "px";
+      ghostEl.style.top  = (e.clientY - ghostEl.offsetHeight / 2) + "px";
+    }
+
+    // Détecter si on est au-dessus du dock
+    const dock = document.getElementById("pinned-popups-dock");
+    if (!dock) return;
+    const dockRect = dock.getBoundingClientRect();
+    const insideDock = (
+      e.clientX >= dockRect.left && e.clientX <= dockRect.right &&
+      e.clientY >= dockRect.top && e.clientY <= dockRect.bottom
+    );
+
+    if (insideDock) {
+      // Trouver où insérer parmi les autres pastilles
+      const pills = Array.from(dock.querySelectorAll(".pinned-popup-dock-pill"))
+                          .filter(p => p !== pill);
+      let inserted = false;
+      for (const other of pills) {
+        const or = other.getBoundingClientRect();
+        const midX = or.left + or.width / 2;
+        if (e.clientX < midX) {
+          dock.insertBefore(pill, other);
+          inserted = true;
+          break;
+        }
+      }
+      if (!inserted) {
+        // Insérer juste avant le bouton "Fermer tous" s'il existe, sinon en fin
+        const closeAllBtn = document.getElementById("pinned-popups-close-all");
+        if (closeAllBtn) {
+          dock.insertBefore(pill, closeAllBtn);
+        } else {
+          dock.appendChild(pill);
+        }
+      }
+    }
+  };
+
+  const onMouseUp = (e) => {
+    if (!isDown) return;
+    isDown = false;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+
+    if (!isDragging) return;  // juste un clic simple, pas un drag
+
+    isDragging = false;
+    setTimeout(() => { pill._dragging = false; }, 10);
+    pill.classList.remove("pill-dragging");
+    if (ghostEl) {
+      try { ghostEl.remove(); } catch (err) {}
+      ghostEl = null;
+    }
+
+    // Vérifier si drop dans le dock ou hors
+    const dock = document.getElementById("pinned-popups-dock");
+    let insideDock = false;
+    if (dock) {
+      const dockRect = dock.getBoundingClientRect();
+      insideDock = (
+        e.clientX >= dockRect.left && e.clientX <= dockRect.right &&
+        e.clientY >= dockRect.top && e.clientY <= dockRect.bottom
+      );
+    }
+
+    if (insideDock) {
+      // Drop dans le dock = réordonnage déjà fait pendant onMouseMove. OK.
+      return;
+    }
+
+    // Drop HORS du dock : restaurer le popup en mode Normal à la position souris
+    // Le popup est actuellement en état "réduit" — on le réaffiche.
+    popup.classList.remove("pinned-popup-reduced");
+    popup.classList.remove("pinned-popup-minimized");
+    // Positionner à la souris (coords document)
+    const popupW = popup.offsetWidth || 320;
+    const popupH = popup.offsetHeight || 200;
+    const docX = _viewportToDocumentX(e.clientX - popupW / 2);
+    const docY = _viewportToDocumentY(e.clientY - 20);
+    popup.style.left = docX + "px";
+    popup.style.top = docY + "px";
+    // Clamper dans la safe area
+    _clampPopupInSafeArea(popup);
+
+    // Retirer la pastille et nettoyer le dock si vide
+    try { pill.remove(); } catch (err) {}
+    popup._linkedPill = null;
+    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();
+    }
+    // Restaurer le bouton Minimiser (si c'était en mode minimisé avant réduction)
+    const minBtn = popup.querySelector(".pinned-popup-minimize");
+    if (minBtn) {
+      minBtn.innerHTML = "▭";
+      minBtn.title = "Minimiser (reste flottant mais compact)";
+      const newBtn = minBtn.cloneNode(true);
+      minBtn.replaceWith(newBtn);
+      newBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        _minimizePinnedPopup(popup);
+      });
+    }
+
+    // v2026.5.23 : mettre à jour le rect dans pinnedPopups pour que l'anti-
+    // chevauchement tienne compte de la nouvelle position
+    const entry = pinnedPopups.find(p => p.el === popup);
+    if (entry) {
+      const l = parseFloat(popup.style.left) || 0;
+      const t = parseFloat(popup.style.top) || 0;
+      const w = popup.offsetWidth;
+      const h = popup.offsetHeight;
+      entry.rect = { left: l, top: t, right: l + w, bottom: t + h };
+    }
+  };
+
+  pill.addEventListener("mousedown", (e) => {
+    if (e.button !== 0) return;
+    isDown = true;
+    isDragging = false;
+    startX = e.clientX;
+    startY = e.clientY;
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  });
+}
+
 /**
  * v2026.5.19 : réduit TOUS les popups épinglés actuellement ouverts (en mode
  * normal ou minimisé) dans la taskbar du bas. Appelé au changement de date.
@@ -7647,6 +8060,24 @@ function _formatDateShort(iso) {
   return `${m[3]}.${m[2]}`;
 }
 
+/**
+ * v2026.5.25 : formatte une date ISO en "Mardi 22.04" pour la pastille dock.
+ */
+function _formatDateForPill(iso) {
+  if (!iso) return "";
+  const m = String(iso).match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!m) return iso;
+  try {
+    const d = new Date(parseInt(m[1]), parseInt(m[2]) - 1, parseInt(m[3]));
+    const dayName = (typeof DAY_NAMES_FULL !== "undefined" && DAY_NAMES_FULL[d.getDay()])
+                      ? DAY_NAMES_FULL[d.getDay()]
+                      : "";
+    return (dayName ? dayName + " " : "") + m[3] + "." + m[2];
+  } catch (e) {
+    return m[3] + "." + m[2];
+  }
+}
+
 /**
  * v2026.5.18 : ajoute (ou met à jour) le bouton "Fermer tous" dans le dock
  * quand au moins 2 popups épinglés existent (réduits OU affichés).
@@ -8021,6 +8452,31 @@ function bindTooltipInteractions() {
   const el = tooltipEl();
   if (!el) return;
 
+  // v2026.5.27 : quand la souris entre dans un popup épinglé, fermer tout
+  // popup non-épinglé (tooltip live ou soft-unpinned) pour garder l'écran clair.
+  document.addEventListener("mouseover", (e) => {
+    const target = e.target;
+    if (!target || !target.closest) return;
+    const pinned = target.closest(".pinned-popup");
+    if (!pinned) return;
+    // On survole un popup épinglé → fermer tooltip live s'il n'est pas pinned
+    if (!bulleState.pinned) {
+      const tip = tooltipEl();
+      if (tip && tip.classList.contains("visible")) {
+        tip.classList.remove("visible");
+        tip.classList.add("hidden");
+        if (tip.dataset) delete tip.dataset.mode;
+        state.currentTooltipIv = null;
+        currentTooltipPos = null;
+        tooltipPositionMode = null;
+      }
+    }
+    // Fermer les soft-unpinned qui traînent
+    document.querySelectorAll(".soft-unpinned").forEach(el => {
+      try { el.remove(); } catch (err) {}
+    });
+  });
+
   // v4.1.17 : ré-applique la position au scroll de la page (safety net
   // contre un ancêtre qui casserait position:fixed silencieusement).
   window.addEventListener("scroll", reapplyTooltipPosition, { passive: true });
@@ -8168,6 +8624,7 @@ function bindTooltipInteractions() {
 }
 
 function buildTooltipHTML(iv) {
+  if (!iv) return '<dl><dt>Info</dt><dd>—</dd></dl>';
   const i = iv.infobulle || {};
   const rows = [];
 
@@ -8366,10 +8823,22 @@ function escapeHtml(s) {
 }
 
 function highlightIntervention(cardEl, ivIdx, on) {
-  const row = cardEl.querySelector(`.intervention[data-iv-idx="${ivIdx}"]`);
+  // v2026.5.29 : chercher .intervention-v2 (nouveau nom) et fallback .intervention
+  const row = cardEl.querySelector(`.intervention-v2[data-iv-idx="${ivIdx}"]`)
+           || cardEl.querySelector(`.intervention[data-iv-idx="${ivIdx}"]`);
   const slot = cardEl.querySelector(`.timeline-slot[data-iv-idx="${ivIdx}"]`);
   if (row) row.classList.toggle("highlight", on);
   if (slot) slot.classList.toggle("highlight", on);
+
+  // v2026.5.29 : quand on active le highlight (typiquement depuis un slot
+  // timeline), faire scroller la row dans la vue pour que l'user voie la
+  // carte correspondante sans avoir à chercher. On évite de scroller le
+  // body, on scroll juste la row à l'intérieur de la carte si elle déborde.
+  if (on && row && typeof row.scrollIntoView === "function") {
+    try {
+      row.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
+    } catch (e) {}
+  }
 }
 
 // ============================================================================