v2026.5.33 — Vue horizontale : interactions différenciées (hover/clic) [code interpolé]

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Planification",
-  "version": "2026.5.26",
+  "version": "2026.5.33",
   "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.",
   "permissions": ["activeTab", "scripting", "storage", "tabs", "alarms"],
   "host_permissions": [

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;
@@ -2487,11 +2512,12 @@ header.topbar::before {
 
 /* Breakpoint medium : entre 1000 et 1300px, on compacte un peu */
 @media (max-width: 1300px) {
-  .app-clock-date { font-size: 11px; }
+  .app-clock-date { font-size: 18px; }
-  .app-clock-time { font-size: 20px; }
+  .app-clock-time { font-size: 18px; }
+  .app-clock-date::after { font-size: 20px; }
   .topbar-right .btn-action .btn-action-label,
   .topbar-right .btn-refresh .btn-refresh-label {
-    font-size: 12px;
+    font-size: 13px;
   }
 }
 
@@ -2499,10 +2525,10 @@ header.topbar::before {
    et on réduit encore l'horloge. Les icônes restent, titres restent. */
 @media (max-width: 1000px) {
   .topbar { padding: 8px 14px; gap: 8px; }
-  .topbar h1 { font-size: 16px; }
+  .topbar h1 { font-size: 18px; }
-  .app-clock { font-size: smaller; }
+  .app-clock-date { font-size: 16px; }
-  .app-clock-date { font-size: 10px; }
+  .app-clock-time { font-size: 16px; }
-  .app-clock-time { font-size: 18px; }
+  .app-clock-date::after { font-size: 18px; }
   .btn-action .btn-action-label,
   .btn-refresh .btn-refresh-label {
     display: none;
@@ -3129,3 +3155,423 @@ body.popup-dragging .pinned-popup {
 .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 */
+html.view-horizontal .card-header {
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  justify-content: center !important;
+  min-width: 200px !important;
+  max-width: 200px !important;
+  border-bottom: none !important;
+  border-right: 1px solid var(--border) !important;
+  padding: 8px 12px !important;
+  gap: 4px !important;
+  flex: 0 0 auto;
+}
+html.view-horizontal .card-tech-name {
+  font-size: 14px !important;
+  font-weight: 600;
+}
+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;
+}

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
@@ -459,6 +460,21 @@ function toggleUserNamePopup() {
   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";
@@ -946,20 +962,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 = () => {
@@ -970,13 +1015,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;
@@ -2907,6 +2952,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,
@@ -4585,9 +4640,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
   );
@@ -4603,23 +4679,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 ---
@@ -4640,30 +4750,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();
+        });
+      }
     }
   }
 
@@ -4909,19 +5049,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
@@ -4930,6 +5093,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();
@@ -4947,8 +5121,10 @@ 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 });
@@ -6229,6 +6405,13 @@ function showTooltip(e, iv, rowEl) {
   // l'ouverture d'un nouveau tooltip par-dessus ce qu'on est en train de bouger.
   if (state._popupDragging) return;
 
+  // v2026.5.27 : fermer tout popup "soft-unpinned" encore visible (il traîne
+  // parce que la souris était dessus). Dès qu'on survole autre chose, on veut
+  // que seul le popup actuel ou les popups épinglés restent.
+  document.querySelectorAll(".soft-unpinned").forEach(el => {
+    try { el.remove(); } catch (err) {}
+  });
+
   // v4.1.15 : si la bulle est épinglée sur une autre iv, on NE REMPLACE PAS
   // son contenu (l'user veut garder la fiche épinglée même en survolant
   // d'autres cartes).
@@ -7334,15 +7517,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;
+  const safeWidth = safe.right - safe.left;
+  const safeHeight = safe.bottom - safe.top;
+  if (w <= safeWidth) {
+    // Popup rentre : on clamp normalement
     if (newVLeft < safe.left) newVLeft = safe.left;
     if (newVLeft + w > safe.right) newVLeft = safe.right - w;
-  if (newVLeft < safe.left) newVLeft = safe.left;  // si popup plus large que viewport
+    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
 
@@ -7956,6 +8150,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 });
@@ -8302,10 +8521,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) {}
+  }
 }
 
 // ============================================================================