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.29",
+  "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

@@ -2622,43 +2622,109 @@ header.topbar::before {
    v2026.5.23 : refonte complète en style "onglet" single-line, compact
    ========================================================================== */
 .pinned-popup.pinned-popup-minimized {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
   min-width: 300px !important;
-  max-width: 360px !important;
-  width: 300px !important;
-  height: auto !important;
-  min-height: 80px !important;
-  padding: 44px 16px 16px 16px !important;
+  max-width: 400px !important;
+  width: auto !important;
+  height: 36px !important;
+  min-height: 36px !important;
+  padding: 0 6px 0 4px !important;
   overflow: visible;
   background: var(--bg-elevated) !important;
   border: 1px solid var(--border) !important;
+  border-radius: 6px !important;
 }
-/* Séparer visuellement la dragbar (collée en haut) des boutons topbar */
+
+/* Dans le mode minimisé, la topbar n'est plus en absolute : elle se pose en fin
+   de ligne à droite, après la ref */
 .pinned-popup.pinned-popup-minimized .pinned-popup-topbar {
-  top: 14px !important;   /* sous la dragbar (qui fait ~6-8px) */
+  position: static !important;
+  top: auto !important;
+  right: auto !important;
+  margin-left: auto !important;
+  order: 3;
+  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;
-  text-align: center;
-  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  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;
 }
 
 /* ==========================================================================
@@ -2705,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; }
-.pinned-popup-dock-pill.color-installation { background: var(--c-installation); color: white; border-color: transparent; }
-.pinned-popup-dock-pill.color-recup        { background: var(--c-recup);        color: white; border-color: transparent; }
-.pinned-popup-dock-pill.color-remplacement { background: var(--c-remplacement); color: white; border-color: transparent; }
-.pinned-popup-dock-pill.color-incident     { background: var(--c-incident);     color: white; border-color: transparent; }
-.pinned-popup-dock-pill.color-rollout      { background: var(--c-rollout);      color: white; border-color: transparent; }
-.pinned-popup-dock-pill.color-reservation  { background: var(--c-reservation);  color: white; border-color: transparent; }
-.pinned-popup-dock-pill.color-absence      { background: #2a2f36;               color: white; border-color: transparent; }
-.pinned-popup-dock-pill.color-autre        { background: var(--c-autre);        color: white; border-color: transparent; }
+/* v2026.5.26 : les anciennes règles color-XXX qui mettaient un fond coloré vif
+   sont remplacées par une simple barre verticale à gauche de la pastille.
+   Les styles pour ::before sont plus bas dans le fichier. */
 
 /* v2026.5.18 : bouton "Fermer tous" à droite du dock */
 .pinned-popups-close-all {
@@ -2937,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>