Version 4.1.3 — Introduction tooltips épinglables (pinTooltip)

(manifest.json corrigé : était resté à 3.2.0 par oubli)

background.js

@@ -1,61 +1,282 @@
-// background.js — Service worker (Manifest V3)
+// background.js — Service worker (Manifest V3) — v4
 //
-// Au clic sur l'icône :
-// 1. Vérifier qu'on est bien sur itsma.vd.ch (sinon message d'erreur)
-// 2. Injecter un script dans la page qui récupère le HTML complet
-// 3. Stocker dans chrome.storage.local (persistant, sert de "dernière capture")
-// 4. Ouvrir viewer.html
+// Rôles :
+// 1. Au clic sur l'icône : ouvrir le viewer
+// 2. Répondre aux messages du viewer :
+//    - getSession         : trouve l'onglet EasyVista ouvert, renvoie {phpsessid, origin}
+//    - fetchPlanning      : fetch le XML du planning pour une date (1 requête = tout)
+//    - fetchXhr2          : fetch un texte d'action détaillé (utilisé en lazy-load au survol)
+//    - fetchFiche         : fetch une fiche individuelle (HTML) pour statut + commentaire tech
+// 3. Programmer les alarmes de refresh auto (12h, 15h)
+// 4. Nettoyer les vieux caches (>7 jours)
+//
+// v4 : suppression de fetchTimeline (pu utilisé). Le calendar_block contient
+// directement ref/contact/lieu/catégorie dans ses attributs attr1/attr2/attr3,
+// donc on n'a plus besoin ni de xhr2 en masse, ni de l'API timeline.
 
-chrome.action.onClicked.addListener(async (tab) => {
-  try {
-    if (!tab.url || !tab.url.startsWith("https://itsma.vd.ch/")) {
-      await chrome.storage.local.set({
-        planningError:
-          "Cette extension ne fonctionne que sur https://itsma.vd.ch/. " +
-          "Va d'abord sur la page du planning, puis reclique sur l'icône."
-      });
-      await openViewer();
-      return;
-    }
+// Domaines EasyVista reconnus (interne d'abord, externe en fallback)
+const EV_ORIGINS = [
+  "https://itsma.etat-de-vaud.ch",
+  "https://itsma.vd.ch"
+];
 
-    const results = await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: extractPlanningFromPage
-    });
+// ============================================================================
+// Clic sur l'icône → ouvrir le viewer
+// ============================================================================
 
-    const data = results[0]?.result;
-    if (!data || !data.html) {
-      await chrome.storage.local.set({
-        planningError:
-          "Impossible de lire le contenu de la page. " +
-          "Assure-toi d'être sur la page du planning des techniciens."
-      });
-      await openViewer();
-      return;
-    }
-
-    await chrome.storage.local.set({
-      planningHtml: data.html,
-      planningUrl: tab.url,
-      planningCapturedAt: Date.now(),
-      planningError: null
-    });
-
-    await openViewer();
-  } catch (err) {
-    console.error("Erreur extension:", err);
-    await chrome.storage.local.set({
-      planningError: "Erreur inattendue : " + (err?.message || String(err))
-    });
-    await openViewer();
-  }
-});
-
-function extractPlanningFromPage() {
-  return { html: document.documentElement.outerHTML };
-}
-
-async function openViewer() {
+chrome.action.onClicked.addListener(async () => {
   const viewerUrl = chrome.runtime.getURL("viewer.html");
+  // Si le viewer est déjà ouvert, on focus cet onglet plutôt que d'en ouvrir un autre
+  const existing = await chrome.tabs.query({ url: viewerUrl + "*" });
+  if (existing.length > 0) {
+    await chrome.tabs.update(existing[0].id, { active: true });
+    await chrome.windows.update(existing[0].windowId, { focused: true });
+  } else {
     await chrome.tabs.create({ url: viewerUrl });
   }
+});
+
+// ============================================================================
+// Trouver l'onglet EasyVista actif et en extraire le PHPSESSID
+// ============================================================================
+
+async function findEasyVistaSession() {
+  // Chercher tous les onglets sur un domaine EasyVista
+  for (const origin of EV_ORIGINS) {
+    const tabs = await chrome.tabs.query({ url: origin + "/*" });
+    for (const tab of tabs) {
+      const m = (tab.url || "").match(/[?&]PHPSESSID=([a-zA-Z0-9]+)/);
+      if (m) {
+        return { phpsessid: m[1], origin: origin, tabId: tab.id };
+      }
+    }
+  }
+  return null;
+}
+
+// ============================================================================
+// Fetch helpers (s'exécutent dans le contexte du service worker,
+// les cookies du domaine sont automatiquement inclus via credentials: include)
+// ============================================================================
+
+/**
+ * Fetch du XML retourné par planning_xhr.php?div=calendar_block.
+ * Contient les interventions de nos 8 techs pour la date donnée (~40 ko).
+ *
+ * Ce n'est PAS le HTML de la page Planning — le serveur ne rend pas les données
+ * dans le HTML, elles arrivent via cet endpoint AJAX.
+ */
+async function fetchPlanningXml(origin, phpsessid, unixDate) {
+  const techIds = "76272,83725,66635,92235,90070,40944,72485,86874";
+  const groupId = "191";
+  const url =
+    `${origin}/planning_xhr.php` +
+    `?PHPSESSID=${encodeURIComponent(phpsessid)}` +
+    `&div=calendar_block` +
+    `&mode=day` +
+    `&group_id=${groupId}` +
+    `&event_name=HelpDesk_PlanningItem` +
+    `&sql_param=${techIds}` +
+    `&unix_date=${unixDate}` +
+    `&start_date_label=Date` +
+    `&end_date_label=Date` +
+    `&click_here_label=Ici` +
+    `&mail_title=mail` +
+    `&day_start_hour=8` +
+    `&day_end_hour=19`;
+  console.log("[bg] fetchPlanningXml →", url.substring(0, 140));
+  const r = await fetch(url, { credentials: "include" });
+  console.log("[bg]   status =", r.status);
+  if (!r.ok) throw new Error("HTTP " + r.status);
+  const xml = await r.text();
+  console.log("[bg]   taille XML =", xml.length);
+  return xml;
+}
+
+/**
+ * Fetch planning_xhr_2.php?id=ACTIONID pour UNE intervention.
+ * Retourne ~400 octets au format custom :
+ *   @@DESCRIPTION_S@@...@@DESCRIPTION_E@@@@LABEL_S@@...
+ */
+async function fetchXhr2(origin, phpsessid, actionId) {
+  const url = `${origin}/planning_xhr_2.php?PHPSESSID=${encodeURIComponent(phpsessid)}&id=${encodeURIComponent(actionId)}`;
+  const r = await fetch(url, { credentials: "include" });
+  if (!r.ok) throw new Error("HTTP " + r.status);
+  return await r.text();
+}
+
+async function fetchFicheHtml(origin, phpsessid, formLink) {
+  const url = `${origin}/index.php?${formLink}&PHPSESSID=${encodeURIComponent(phpsessid)}`;
+  console.log("[bg] fetchFicheHtml →", url.substring(0, 120));
+  const r = await fetch(url, { credentials: "include" });
+  if (!r.ok) throw new Error("HTTP " + r.status);
+  const html = await r.text();
+  console.log("[bg]   fiche status =", r.status, "| taille =", html.length);
+  return html;
+}
+
+// ============================================================================
+// Détection "session invalide"
+// ============================================================================
+
+function looksLikeLoginPage(text) {
+  // La page de login EasyVista contient cette chaîne
+  return /customer_login|my\.policy/i.test((text || "").substring(0, 3000));
+}
+
+// ============================================================================
+// Messages du viewer
+// ============================================================================
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  (async () => {
+    try {
+      if (msg.type === "getSession") {
+        const session = await findEasyVistaSession();
+        sendResponse({ ok: true, session });
+        return;
+      }
+
+      if (msg.type === "fetchPlanning") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        // Fetch XML calendar_block du planning (rapide ~40 ko)
+        const xml = await fetchPlanningXml(session.origin, session.phpsessid, msg.unixDate);
+        if (looksLikeLoginPage(xml)) {
+          sendResponse({ ok: false, error: "session_expired" });
+          return;
+        }
+        sendResponse({ ok: true, xml, session });
+        return;
+      }
+
+      if (msg.type === "fetchXhr2") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        try {
+          const body = await fetchXhr2(session.origin, session.phpsessid, msg.actionId);
+          sendResponse({ ok: true, body });
+        } catch (err) {
+          sendResponse({ ok: false, error: String(err) });
+        }
+        return;
+      }
+
+      if (msg.type === "fetchFiche") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        const html = await fetchFicheHtml(session.origin, session.phpsessid, msg.formLink);
+        if (looksLikeLoginPage(html)) {
+          sendResponse({ ok: false, error: "session_expired" });
+          return;
+        }
+        sendResponse({ ok: true, html, session });
+        return;
+      }
+
+      if (msg.type === "scheduleAutoRefresh") {
+        scheduleAutoRefreshAlarms();
+        sendResponse({ ok: true });
+        return;
+      }
+
+      if (msg.type === "cleanupOldCaches") {
+        const removed = await cleanupOldCaches(msg.daysToKeep || 7);
+        sendResponse({ ok: true, removed });
+        return;
+      }
+
+      sendResponse({ ok: false, error: "unknown_message" });
+    } catch (err) {
+      console.error("background error:", err);
+      sendResponse({ ok: false, error: err.message || String(err) });
+    }
+  })();
+
+  // Retourner true pour garder sendResponse asynchrone
+  return true;
+});
+
+// ============================================================================
+// Alarmes : refresh auto 12h / 15h
+// ============================================================================
+
+function scheduleAutoRefreshAlarms() {
+  // Calculer le prochain 12h et 15h à partir de maintenant
+  const now = new Date();
+
+  function nextAt(hour, minute) {
+    const d = new Date();
+    d.setHours(hour, minute, 0, 0);
+    if (d <= now) d.setDate(d.getDate() + 1);
+    return d.getTime();
+  }
+
+  chrome.alarms.create("refresh_12h", {
+    when: nextAt(12, 0),
+    periodInMinutes: 24 * 60  // tous les jours
+  });
+  chrome.alarms.create("refresh_15h", {
+    when: nextAt(15, 0),
+    periodInMinutes: 24 * 60
+  });
+}
+
+chrome.alarms.onAlarm.addListener(async (alarm) => {
+  if (alarm.name === "refresh_12h" || alarm.name === "refresh_15h") {
+    // Envoyer un message à tous les viewers ouverts pour qu'ils se rafraîchissent
+    const viewerUrl = chrome.runtime.getURL("viewer.html");
+    const tabs = await chrome.tabs.query({ url: viewerUrl + "*" });
+    for (const tab of tabs) {
+      try {
+        await chrome.tabs.sendMessage(tab.id, { type: "autoRefresh" });
+      } catch {
+        // Onglet fermé ou pas réactif, on ignore
+      }
+    }
+  }
+});
+
+// ============================================================================
+// Nettoyage caches > 7 jours
+// ============================================================================
+
+async function cleanupOldCaches(daysToKeep) {
+  const all = await chrome.storage.local.get(null);
+  const threshold = new Date();
+  threshold.setDate(threshold.getDate() - daysToKeep);
+  const thresholdStr = threshold.toISOString().substring(0, 10); // YYYY-MM-DD
+
+  const toRemove = [];
+  for (const key of Object.keys(all)) {
+    // Nos clés de cache sont planning_cache_YYYY-MM-DD
+    const m = key.match(/^planning_cache_(\d{4}-\d{2}-\d{2})$/);
+    if (m && m[1] < thresholdStr) {
+      toRemove.push(key);
+    }
+  }
+  if (toRemove.length > 0) {
+    await chrome.storage.local.remove(toRemove);
+  }
+  return toRemove.length;
+}
+
+// Au démarrage, programmer les alarmes et nettoyer
+chrome.runtime.onInstalled.addListener(() => {
+  scheduleAutoRefreshAlarms();
+  cleanupOldCaches(7).catch(err => console.warn("cleanup:", err));
+});
+
+chrome.runtime.onStartup.addListener(() => {
+  scheduleAutoRefreshAlarms();
+  cleanupOldCaches(7).catch(err => console.warn("cleanup:", err));
+});

manifest.json

@@ -1,14 +1,17 @@
 {
   "manifest_version": 3,
   "name": "Planning Techniciens — Vue claire",
-  "version": "2.0.1",
-  "description": "Réaffiche le planning du jour (itsma.vd.ch) avec pompier, absents, tooltips enrichis et thème clair/sombre.",
+  "version": "4.1.3",
+  "description": "Vue claire du planning EasyVista (itsma.etat-de-vaud.ch et itsma.vd.ch). v4.1.3 : fix ouverture intervention (tentative 3 regex retirée car elle écrasait le bon checksum avec le mauvais).",
   "permissions": [
     "activeTab",
     "scripting",
-    "storage"
+    "storage",
+    "tabs",
+    "alarms"
   ],
   "host_permissions": [
+    "https://itsma.etat-de-vaud.ch/*",
     "https://itsma.vd.ch/*"
   ],
   "action": {
@@ -30,6 +33,7 @@
         "viewer.css"
       ],
       "matches": [
+        "https://itsma.etat-de-vaud.ch/*",
         "https://itsma.vd.ch/*"
       ]
     }

viewer.css

@@ -20,16 +20,30 @@
   --ok: #2e7b4a;
   --ok-soft: #dff0e4;
 
-  /* Palette par type d'intervention (clair & lisible) */
-  --c-livraison:      #2563eb;     /* bleu */
+  /* Palette par type d'intervention */
+  --c-livraison:      #2563eb;
   --c-livraison-soft: #dbeafe;
-  --c-recup:          #16a34a;     /* vert */
+  --c-recup:          #16a34a;
   --c-recup-soft:     #dcfce7;
-  --c-remplacement:   #ea580c;     /* orange */
+  --c-remplacement:   #ea580c;
   --c-remplacement-soft: #fed7aa;
-  --c-autre:          #6b7280;     /* gris */
+  --c-incident:       #8b5cf6;
+  --c-incident-soft:  #ede9fe;
+  --c-installation:       #2563eb;
+  --c-installation-soft:  #dbeafe;
+  --c-rollout:        #92400e;    /* brun */
+  --c-rollout-soft:   #fde68a;
+  --c-reservation:       #f59e0b;    /* jaune/ambre */
+  --c-reservation-soft:  #fef3c7;
+  --c-autre:          #6b7280;
   --c-autre-soft:     #e5e7eb;
 
+  /* Statuts clos */
+  --c-closed:         #15803d;    /* vert foncé = Clôturé */
+  --c-closed-soft:    #bbf7d0;
+  --c-resolved:       #4ade80;    /* vert clair = Résolu */
+  --c-resolved-soft:  #dcfce7;
+
   --shadow: 0 1px 3px rgba(20, 30, 50, 0.06), 0 1px 2px rgba(20, 30, 50, 0.04);
   --shadow-hover: 0 2px 8px rgba(20, 30, 50, 0.08);
   --radius: 8px;
@@ -56,16 +70,24 @@
   --ok: #78c59a;
   --ok-soft: #1f3a2b;
 
-  /* Palette sombre — tons plus doux mais toujours distincts */
   --c-livraison:      #60a5fa;
   --c-livraison-soft: #1e3a5f;
   --c-recup:          #4ade80;
   --c-recup-soft:     #14432a;
   --c-remplacement:   #fb923c;
   --c-remplacement-soft: #4a2512;
+  --c-incident:       #a78bfa;
+  --c-incident-soft:  #2e1065;
+  --c-installation:       #60a5fa;
+  --c-installation-soft:  #1e3a5f;
   --c-autre:          #9ca3af;
   --c-autre-soft:     #2a2e36;
 
+  --c-closed:         #22c55e;
+  --c-closed-soft:    #14432a;
+  --c-resolved:       #86efac;
+  --c-resolved-soft:  #0f3320;
+
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.4);
 }
@@ -100,12 +122,16 @@ html, body {
   background: var(--bg-elevated);
   border-bottom: 1px solid var(--border);
   box-shadow: var(--shadow);
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 .topbar-left {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 14px;
+  flex: 1;
+  min-width: 0;
 }
 
 .topbar h1 {
@@ -113,16 +139,72 @@ html, body {
   font-size: 18px;
   font-weight: 600;
   color: var(--text);
+  white-space: nowrap;
 }
 
 .capture-info {
   font-size: 12px;
   color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.refresh-check {
+  font-size: 14px;
+  color: var(--c-recup);    /* vert */
+  font-weight: 700;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  pointer-events: none;
+}
+.refresh-check.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.refresh-check.hidden {
+  display: none;
 }
 
 .topbar-right {
   display: flex;
   gap: 8px;
+  flex-shrink: 0;
+}
+
+/* Navigation de date */
+.date-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.btn-nav {
+  padding: 6px 10px;
+  font-size: 13px;
+  min-width: 32px;
+}
+
+.btn-today {
+  padding: 6px 10px;
+  font-size: 12px;
+}
+
+.date-input {
+  padding: 5px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-muted);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.date-input:hover {
+  border-color: var(--border-strong);
+}
+.date-input:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
 }
 
 .btn {
@@ -149,13 +231,57 @@ html, body {
   transform: translateY(1px);
 }
 
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .btn-icon {
   padding: 6px 10px;
   font-size: 15px;
 }
 
+.btn-subtle {
+  opacity: 0.75;
+  font-size: 12px;
+}
+.btn-subtle:hover {
+  opacity: 1;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+.btn-primary:hover {
+  background: var(--accent);
+  opacity: 0.9;
+}
+
+/* Bouton "Arrêter" (apparaît pendant un refresh manuel) */
+.btn-abort {
+  background: var(--danger-soft);
+  color: var(--danger);
+  border-color: var(--danger);
+}
+.btn-abort:hover {
+  background: var(--danger);
+  color: white;
+  border-color: var(--danger);
+}
+
+#refresh-icon.spinning {
+  display: inline-block;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 /* ==========================================================================
-   État initial
+   Écrans d'état
    ========================================================================== */
 .loading {
   padding: 40px 20px;
@@ -175,6 +301,38 @@ html, body {
   line-height: 1.55;
 }
 
+.session-needed {
+  max-width: 500px;
+  margin: 60px auto;
+  padding: 28px 32px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  text-align: center;
+}
+.session-needed h2 {
+  margin: 0 0 12px 0;
+  color: var(--text);
+}
+.session-needed p {
+  margin: 10px 0;
+  color: var(--text-muted);
+}
+.session-needed code {
+  background: var(--bg-muted);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+.session-needed button {
+  margin-top: 14px;
+}
+
+/* ==========================================================================
+   Stats globales
+   ========================================================================== */
 .stats {
   display: flex;
   flex-wrap: wrap;
@@ -205,7 +363,7 @@ html, body {
    ========================================================================== */
 .cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
   gap: 14px;
   padding: 14px 20px 40px 20px;
 }
@@ -262,7 +420,7 @@ html, body {
 }
 
 .card-body {
-  padding: 8px 0;
+  padding: 0;
   flex: 1;
 }
 
@@ -274,16 +432,12 @@ html, body {
   text-align: center;
 }
 
-/* Cartes pompier : liseré rouge discret */
 .card.is-pompier {
   border-left: 3px solid var(--danger);
 }
-
-/* Cartes absent : teinte neutre */
 .card.is-absent {
   opacity: 0.85;
 }
-
 .card.is-absent .card-header {
   background: var(--bg);
 }
@@ -297,8 +451,6 @@ html, body {
   border-bottom: 1px solid var(--border);
   position: relative;
 }
-
-/* Fond rouge discret quand la carte est "pompier" */
 .timeline-pompier {
   background: var(--danger-soft);
 }
@@ -312,7 +464,6 @@ html, body {
   overflow: hidden;
 }
 
-/* Trous (zones libres) : fond diagonal discret + vert léger au survol */
 .timeline-hole {
   position: absolute;
   top: 0;
@@ -336,7 +487,6 @@ html, body {
   background: var(--ok-soft);
 }
 
-/* Blocs occupés : couleurs selon type */
 .timeline-slot {
   position: absolute;
   top: 0;
@@ -347,10 +497,18 @@ html, body {
 }
 
 .timeline-slot.color-livraison    { background: var(--c-livraison); }
+.timeline-slot.color-installation { background: var(--c-installation); }
 .timeline-slot.color-recup        { background: var(--c-recup); }
 .timeline-slot.color-remplacement { background: var(--c-remplacement); }
+.timeline-slot.color-incident     { background: var(--c-incident); }
+.timeline-slot.color-rollout      { background: var(--c-rollout); }
+.timeline-slot.color-reservation  { background: var(--c-reservation); }
 .timeline-slot.color-autre        { background: var(--c-autre); }
 
+/* Statuts clos sur la timeline */
+.timeline-slot.status-closed    { background: var(--c-closed); }
+.timeline-slot.status-resolved  { background: var(--c-resolved); }
+
 .timeline-slot.kind-absence {
   background: repeating-linear-gradient(
     45deg,
@@ -368,7 +526,6 @@ html, body {
   z-index: 2;
 }
 
-/* Ligne de midi : marqueur vertical discret */
 .timeline-noon {
   position: absolute;
   top: -2px;
@@ -393,7 +550,7 @@ html, body {
   font-family: var(--mono);
 }
 
-/* Stats par carte : total en gros, matin/aprem en secondaire */
+/* Stats par carte */
 .card-stats {
   display: flex;
   align-items: baseline;
@@ -432,7 +589,7 @@ html, body {
   opacity: 0.4;
 }
 
-/* Note de statut pompier/absent en haut de carte */
+/* Notes de statut */
 .card-status-note {
   padding: 8px 14px;
   font-size: 12px;
@@ -456,14 +613,271 @@ html, body {
   opacity: 0.7;
 }
 
-/* Highlight réciproque */
 .intervention.highlight {
   background: var(--bg-hover);
 }
 
 /* ==========================================================================
-   Interventions (lignes dans la carte)
+   Interventions — layout v2 (heures verticales)
    ========================================================================== */
+.intervention-v2 {
+  display: grid;
+  grid-template-columns: 4px 58px 1fr auto;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "dot time ref  copy"
+    "dot time right status";
+  gap: 2px 10px;
+  align-items: start;
+  padding: 10px 12px 12px 8px;
+  border-top: 1px solid var(--border);
+  cursor: default;
+  transition: background 0.08s;
+  position: relative;
+}
+.intervention-v2:first-child { border-top: none; }
+.intervention-v2:hover { background: var(--bg-hover); }
+
+/* Pastille colorée (barre verticale) */
+.intervention-v2 .intervention-dot {
+  grid-area: dot;
+  width: 4px;
+  height: 100%;
+  border-radius: 2px;
+  align-self: stretch;
+}
+.intervention-v2.color-livraison    .intervention-dot { background: var(--c-livraison); }
+.intervention-v2.color-installation .intervention-dot { background: var(--c-installation); }
+.intervention-v2.color-recup        .intervention-dot { background: var(--c-recup); }
+.intervention-v2.color-remplacement .intervention-dot { background: var(--c-remplacement); }
+.intervention-v2.color-incident     .intervention-dot { background: var(--c-incident); }
+.intervention-v2.color-rollout      .intervention-dot { background: var(--c-rollout); }
+.intervention-v2.color-reservation  .intervention-dot { background: var(--c-reservation); }
+.intervention-v2.color-autre        .intervention-dot { background: var(--c-autre); }
+
+.intervention-v2.clickable { cursor: pointer; }
+.intervention-v2.clickable:active { transform: translateY(1px); }
+
+.intervention-v2.status-closed {
+  background: var(--c-closed-soft);
+  box-shadow: inset 4px 0 0 var(--c-closed);
+}
+.intervention-v2.status-closed:hover {
+  background: var(--c-closed-soft);
+  filter: brightness(0.96);
+}
+.intervention-v2.status-closed .intervention-dot {
+  background: var(--c-closed);
+  width: 5px;
+}
+
+.intervention-v2.status-resolved {
+  background: var(--c-resolved-soft);
+  box-shadow: inset 4px 0 0 var(--c-resolved);
+}
+.intervention-v2.status-resolved:hover {
+  background: var(--c-resolved-soft);
+  filter: brightness(0.96);
+}
+.intervention-v2.status-resolved .intervention-dot {
+  background: var(--c-resolved);
+  width: 5px;
+}
+
+.intervention-v2.is-ghost {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
+/* Ligne 1 : REF en titre centré gros gras */
+.iv-ref-header {
+  grid-area: ref;
+  font-family: var(--mono);
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: 0.03em;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 0;
+}
+.iv-ref-header.no-ref {
+  font-family: var(--font);
+  font-weight: 500;
+  color: var(--text-faint);
+}
+
+.iv-status-check {
+  grid-area: status;
+  align-self: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--c-closed);
+  padding-right: 6px;
+}
+.intervention-v2.status-resolved .iv-status-check { color: var(--c-resolved); }
+
+.intervention-copy {
+  grid-area: copy;
+  align-self: start;
+  padding: 2px 6px;
+  background: transparent;
+  color: var(--text-faint);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  opacity: 0;
+  transition: opacity 0.1s, background 0.1s, color 0.1s;
+  font-family: inherit;
+}
+.intervention-v2:hover .intervention-copy { opacity: 1; }
+.intervention-copy:hover {
+  background: var(--bg-muted);
+  color: var(--text);
+  border-color: var(--border);
+}
+.intervention-copy.copied {
+  color: var(--ok);
+  background: var(--ok-soft);
+  opacity: 1;
+}
+
+/* Ligne 2 GAUCHE : heures VERTICALES, centrées par rapport au bloc droit */
+.iv-time-vertical {
+  grid-area: time;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;     /* centrage vertical */
+  align-self: center;          /* centrage dans la cellule grille */
+  gap: 1px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text);
+  height: 100%;
+}
+.iv-time-start, .iv-time-end {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.iv-time-arrow {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+.intervention-v2.is-pompier-line .iv-time-start,
+.intervention-v2.is-pompier-line .iv-time-end {
+  color: var(--danger);
+  font-weight: 700;
+}
+
+/* Ligne 2 DROITE : lieu / contact+tél / bas (catégorie + signature) */
+.iv-right {
+  grid-area: right;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Lieu : ville (MAJ gras) + adresse (italique noir) */
+.iv-lieu-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.iv-lieu-ville {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: 0.04em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.iv-lieu-adresse {
+  font-size: 12.5px;
+  font-style: italic;
+  font-weight: 400;
+  color: var(--text);              /* noir, pas gris */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Contact + tél — wrap intelligent (pas de coupure de mot) */
+.iv-contact-line {
+  font-size: 13px;
+  word-break: normal;
+  overflow-wrap: break-word;
+  white-space: normal;
+  line-height: 1.35;
+}
+.iv-contact {
+  font-weight: 600;
+  color: var(--text);
+}
+.iv-sep {
+  color: var(--text-faint);
+  font-weight: 400;
+  margin: 0 2px;
+}
+.iv-phone {
+  font-family: var(--mono);
+  color: var(--text-muted);
+  font-weight: 400;
+  font-size: 12px;
+  white-space: nowrap;       /* numéro pas coupé */
+}
+
+/* Bas : catégorie à gauche + signature à droite */
+.iv-bottom-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 12px;
+}
+.iv-category {
+  color: var(--text-muted);
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.iv-signature {
+  color: var(--text-faint);
+  font-size: 11px;
+  font-family: var(--mono);
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+}
+
+/* Réservation (créneau bloqué par un coordinateur) */
+.iv-ref-header.is-reservation-title {
+  color: var(--c-reservation);
+  font-family: var(--font);
+  letter-spacing: 0.02em;
+}
+.iv-reservation-par {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+.iv-reservation-sujet {
+  font-size: 12.5px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+   Anciens styles .intervention (v1) — gardés pour ne pas casser le reste
+   ────────────────────────────────────────────────────────────────────────── */
 .intervention {
   display: flex;
   align-items: center;
@@ -472,17 +886,10 @@ html, body {
   border-top: 1px solid var(--border);
   cursor: default;
   transition: background 0.08s;
+  position: relative;
 }
-
-.intervention:first-child {
-  border-top: none;
-}
-
-.intervention:hover {
-  background: var(--bg-hover);
-}
-
-/* Pastille colorée à gauche, rappel visuel du type */
+.intervention:first-child { border-top: none; }
+.intervention:hover { background: var(--bg-hover); }
 .intervention-dot {
   flex-shrink: 0;
   width: 4px;
@@ -490,105 +897,16 @@ html, body {
   margin: 2px 4px 2px 0;
   border-radius: 2px;
 }
-.intervention.color-livraison    .intervention-dot { background: var(--c-livraison); }
-.intervention.color-recup        .intervention-dot { background: var(--c-recup); }
-.intervention.color-remplacement .intervention-dot { background: var(--c-remplacement); }
-.intervention.color-autre        .intervention-dot { background: var(--c-autre); }
-
-.intervention-time {
-  flex-shrink: 0;
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--text-muted);
-  min-width: 86px;
-}
-
-.intervention-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-/* La référence S260xxx_xxxxx est mise en avant */
-.intervention-refhdr {
-  font-family: var(--mono);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
-  letter-spacing: 0.02em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.intervention-refhdr.no-ref {
-  font-family: var(--font);
-  font-weight: normal;
-  color: var(--text-faint);
-}
-
-/* Titre type d'intervention en secondaire */
-.intervention-title {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.intervention-meta {
-  font-size: 11px;
-  color: var(--text-faint);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.intervention-copy {
-  flex-shrink: 0;
-  padding: 4px 8px;
-  background: transparent;
-  color: var(--text-faint);
-  border: 1px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  opacity: 0;
-  transition: opacity 0.1s, background 0.1s, color 0.1s;
-  font-family: inherit;
-}
-
-.intervention:hover .intervention-copy {
-  opacity: 1;
-}
-
-.intervention-copy:hover {
-  background: var(--bg-muted);
-  color: var(--text);
-  border-color: var(--border);
-}
-
-.intervention-copy.copied {
-  color: var(--ok);
-  background: var(--ok-soft);
-  opacity: 1;
-}
-
-/* Intervention de type pompier */
-.intervention.is-pompier-line .intervention-time {
-  color: var(--danger);
-  font-weight: 600;
-}
 
 /* ==========================================================================
-   Tooltip au survol
+   Tooltip
    ========================================================================== */
 .tooltip {
   position: fixed;
   z-index: 100;
-  max-width: 420px;
+  max-width: 620px;
+  max-height: calc(100vh - 40px);
+  overflow-y: auto;
   padding: 12px 14px;
   background: var(--bg-elevated);
   color: var(--text);
@@ -601,7 +919,6 @@ html, body {
   opacity: 0;
   transition: opacity 0.1s;
 }
-
 .tooltip.visible {
   opacity: 1;
 }
@@ -628,13 +945,96 @@ html, body {
   word-break: break-word;
 }
 
-.tooltip dd.description {
+.tooltip dd.description,
+.tooltip dd.commentaire {
   white-space: pre-wrap;
 }
 
+.tooltip dd.commentaire {
+  padding: 6px 8px;
+  background: var(--bg-muted);
+  border-radius: 4px;
+  border-left: 2px solid var(--c-closed);
+  font-style: italic;
+}
+
 .tooltip hr {
   border: none;
   border-top: 1px solid var(--border);
   margin: 8px 0;
   grid-column: 1 / -1;
 }
+
+/* Badge de statut dans le tooltip */
+.status-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.status-pill.closed {
+  background: var(--c-closed-soft);
+  color: var(--c-closed);
+}
+.status-pill.resolved {
+  background: var(--c-resolved-soft);
+  color: var(--c-resolved);
+}
+.status-pill.ongoing {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.status-pill.other {
+  background: var(--bg-muted);
+  color: var(--text-muted);
+}
+
+/* ==========================================================================
+   Toasts de notification (ouverture d'intervention)
+   ========================================================================== */
+.toast-stack {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 200;
+  display: flex;
+  flex-direction: column-reverse;   /* les nouveaux en bas, les anciens au-dessus */
+  gap: 8px;
+  pointer-events: none;
+}
+.toast {
+  min-width: 200px;
+  max-width: 340px;
+  padding: 10px 14px;
+  background: var(--bg-elevated);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  border-left: 3px solid var(--c-livraison);
+  border-radius: 6px;
+  box-shadow: var(--shadow-hover);
+  font-size: 13px;
+  opacity: 0;
+  transform: translateX(40px);
+  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
+  pointer-events: auto;
+}
+.toast.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+.toast.leaving {
+  opacity: 0;
+  transform: translateX(40px);
+}
+.toast-label {
+  color: var(--text-muted);
+  font-size: 11px;
+  margin-right: 6px;
+}
+.toast-ref {
+  font-family: var(--mono);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}

viewer.html

@@ -9,11 +9,24 @@
   <header class="topbar">
     <div class="topbar-left">
       <h1>Planning techniciens</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>
+        <input type="date" id="date-picker" class="date-input">
+        <button id="nav-next" class="btn btn-nav" title="Jour suivant" aria-label="Jour suivant">▶</button>
+        <button id="nav-today" class="btn btn-today" title="Aujourd'hui">Auj.</button>
+      </div>
       <span id="capture-info" class="capture-info"></span>
+      <span id="refresh-check" class="refresh-check hidden" title="Mise à jour terminée">✓</span>
     </div>
     <div class="topbar-right">
-      <button id="refresh-btn" class="btn" title="Revenir sur EasyVista pour recapturer le planning">
-        ↻ Rafraîchir
+      <button id="refresh-btn" class="btn" title="Rafraîchir maintenant">
+        <span id="refresh-icon">↻</span> Rafraîchir
+      </button>
+      <button id="abort-btn" class="btn btn-abort hidden" title="Arrêter le rafraîchissement en cours">
+        ✕ Arrêter
+      </button>
+      <button id="clear-cache-btn" class="btn btn-subtle" title="Vider le cache du jour affiché">
+        Vider cache
       </button>
       <button id="theme-toggle" class="btn btn-icon" title="Changer de thème" aria-label="Changer de thème">
         <span id="theme-icon">🌙</span>
@@ -23,6 +36,12 @@
 
   <main id="main">
     <div id="error-box" class="error-box hidden"></div>
+    <div id="session-needed" class="session-needed hidden">
+      <h2>Connexion à EasyVista requise</h2>
+      <p>Cette extension doit se connecter à <code>itsma.etat-de-vaud.ch</code> pour fonctionner.</p>
+      <p>Ouvre EasyVista dans un onglet, connecte-toi, puis <b>reclique sur l'icône de l'extension</b>.</p>
+      <button id="open-ev-btn" class="btn btn-primary">Ouvrir EasyVista</button>
+    </div>
     <div id="loading" class="loading">Chargement…</div>
     <div id="stats" class="stats hidden"></div>
     <div id="cards" class="cards"></div>
@@ -30,6 +49,9 @@
 
   <div id="tooltip" class="tooltip hidden" role="tooltip"></div>
 
+  <!-- Conteneur des toasts (notifications d'ouverture) -->
+  <div id="toast-stack" class="toast-stack" aria-live="polite"></div>
+
   <script src="viewer.js"></script>
 </body>
 </html>