Version 1.0.0 — Initiale (extension de base sans tooltips avancés)

Première version stable de l'extension Planification : viewer pour planning EasyVista, fetch XML, affichage cards par tech.
2026-04-16 09:30:00 +02:00
parent 43c6e0e487
commit 3b1831a83a
8 changed files with 1196 additions and 0 deletions
@@ -0,0 +1,68 @@
+// background.js — Service worker (Manifest V3)
+//
+// Quand l'utilisateur clique sur l'icône de l'extension :
+// 1. On vérifie qu'il est bien sur itsma.vd.ch
+// 2. On injecte un script dans l'onglet qui récupère le HTML complet
+//    de la page + tous les liens vers les fiches d'intervention
+// 3. On stocke ça dans chrome.storage.local
+// 4. On ouvre un nouvel onglet avec viewer.html
+
+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;
+    }
+
+    // Injecter un script dans l'onglet pour extraire le HTML
+    const results = await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      func: extractPlanningFromPage
+    });
+
+    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 bien sur la page du planning des techniciens."
+      });
+      await openViewer();
+      return;
+    }
+
+    // Stocker le HTML capturé + l'URL de base pour les requêtes futures
+    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();
+  }
+});
+
+// Fonction injectée dans la page du planning
+// (elle s'exécute dans le contexte de itsma.vd.ch, pas dans le service worker)
+function extractPlanningFromPage() {
+  // Récupérer tout le HTML de la page
+  const html = document.documentElement.outerHTML;
+  return { html: html };
+}
+
+async function openViewer() {
+  const viewerUrl = chrome.runtime.getURL("viewer.html");
+  await chrome.tabs.create({ url: viewerUrl });
+}
@@ -0,0 +1,37 @@
+{
+  "manifest_version": 3,
+  "name": "Planning Techniciens — Vue claire",
+  "version": "1.0.0",
+  "description": "Réaffiche le planning du jour (itsma.vd.ch) avec pompier, absents et détails d'interventions à la demande.",
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "storage"
+  ],
+  "host_permissions": [
+    "https://itsma.vd.ch/*"
+  ],
+  "action": {
+    "default_title": "Ouvrir la vue claire du planning"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "viewer.html",
+        "viewer.js",
+        "viewer.css"
+      ],
+      "matches": [
+        "https://itsma.vd.ch/*"
+      ]
+    }
+  ]
+}
@@ -0,0 +1,360 @@
+/* viewer.css — Style de la vue claire du planning */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #f5f7fa;
+  color: #1f2937;
+  line-height: 1.5;
+  min-height: 100vh;
+  padding-bottom: 40px;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* === Top bar === */
+.topbar {
+  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+  color: white;
+  padding: 20px 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.topbar h1 {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.subtitle {
+  font-size: 13px;
+  opacity: 0.85;
+  margin-top: 4px;
+}
+
+.topbar-right {
+  display: flex;
+  gap: 12px;
+}
+
+.topbar button {
+  background: rgba(255,255,255,0.15);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.3);
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.topbar button:hover {
+  background: rgba(255,255,255,0.25);
+}
+
+.topbar button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* === Error zone === */
+.error-zone {
+  margin: 24px 32px;
+  padding: 16px 20px;
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  color: #991b1b;
+  border-radius: 8px;
+}
+
+/* === Summary cards (pompier, absents, stats) === */
+.summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  margin: 24px 32px;
+}
+
+.summary-card {
+  background: white;
+  padding: 18px 22px;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  border-left: 4px solid #e5e7eb;
+}
+
+.summary-card.summary-pompier {
+  border-left-color: #dc2626;
+}
+
+.summary-card.summary-absents {
+  border-left-color: #f59e0b;
+}
+
+.summary-card.summary-stats {
+  border-left-color: #10b981;
+}
+
+.summary-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.summary-value .muted {
+  font-weight: 400;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+/* === Main content : cartes techniciens === */
+#main-content {
+  margin: 0 32px;
+}
+
+.placeholder {
+  background: white;
+  padding: 48px 32px;
+  border-radius: 10px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 16px;
+}
+
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 20px;
+}
+
+.tech-card {
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tech-card.tech-absent {
+  opacity: 0.7;
+  background: #fafafa;
+}
+
+.tech-card.tech-pompier {
+  box-shadow: 0 0 0 2px #dc2626, 0 2px 6px rgba(220,38,38,0.2);
+}
+
+.tech-header {
+  padding: 14px 18px;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tech-card.tech-pompier .tech-header {
+  background: #fef2f2;
+}
+
+.tech-card.tech-absent .tech-header {
+  background: #fef3c7;
+}
+
+.tech-name {
+  font-weight: 600;
+  font-size: 16px;
+  color: #111827;
+}
+
+.tech-badge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.tech-badge.badge-pompier {
+  background: #dc2626;
+  color: white;
+}
+
+.tech-badge.badge-absent {
+  background: #f59e0b;
+  color: white;
+}
+
+.tech-badge.badge-count {
+  background: #e5e7eb;
+  color: #4b5563;
+}
+
+.tech-interventions {
+  padding: 8px 0;
+  flex: 1;
+}
+
+.tech-empty {
+  padding: 24px;
+  text-align: center;
+  color: #9ca3af;
+  font-style: italic;
+  font-size: 14px;
+}
+
+/* === Intervention items === */
+.intervention {
+  padding: 10px 18px;
+  border-bottom: 1px solid #f3f4f6;
+  cursor: pointer;
+  transition: background 0.15s;
+  position: relative;
+}
+
+.intervention:last-child {
+  border-bottom: none;
+}
+
+.intervention:hover {
+  background: #eff6ff;
+}
+
+.interv-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.interv-time {
+  font-weight: 600;
+  color: #1e40af;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.interv-ref {
+  font-size: 12px;
+  color: #6b7280;
+  font-family: ui-monospace, "SF Mono", Consolas, monospace;
+}
+
+.interv-summary {
+  font-size: 13px;
+  color: #374151;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.interv-contact {
+  font-weight: 500;
+}
+
+.interv-location {
+  color: #6b7280;
+}
+
+.interv-details {
+  margin-top: 12px;
+  padding: 12px;
+  background: #f9fafb;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.interv-details.loading {
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.interv-details.error {
+  color: #991b1b;
+  background: #fef2f2;
+}
+
+.interv-open-link {
+  display: inline-block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.interv-open-link:hover {
+  text-decoration: underline;
+}
+
+/* === Absence item (affichée dans la carte du tech absent) === */
+.absence-info {
+  padding: 12px 18px;
+  font-size: 14px;
+  color: #78350f;
+  background: #fef3c7;
+  border-left: 3px solid #f59e0b;
+}
+
+.pompier-info {
+  padding: 12px 18px;
+  font-size: 14px;
+  color: #7f1d1d;
+  background: #fee2e2;
+  border-left: 3px solid #dc2626;
+  font-weight: 500;
+}
+
+/* === Tooltip flottant === */
+.tooltip {
+  position: fixed;
+  background: #1f2937;
+  color: white;
+  padding: 12px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.5;
+  max-width: 400px;
+  z-index: 1000;
+  pointer-events: none;
+  white-space: pre-wrap;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+/* === Responsive === */
+@media (max-width: 768px) {
+  .topbar {
+    padding: 16px 20px;
+  }
+  .summary, #main-content {
+    margin: 20px 16px;
+  }
+  .tech-grid {
+    grid-template-columns: 1fr;
+  }
+}
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Planning Techniciens — Vue claire</title>
+  <link rel="stylesheet" href="viewer.css">
+</head>
+<body>
+  <header class="topbar">
+    <div class="topbar-left">
+      <h1>📅 Planning du <span id="display-date">—</span></h1>
+      <div class="subtitle" id="subtitle">Chargement…</div>
+    </div>
+    <div class="topbar-right">
+      <button id="btn-refresh" title="Recharger depuis la page EasyVista">
+        🔄 Actualiser
+      </button>
+      <button id="btn-preload" title="Pré-charger tous les détails d'interventions (22 requêtes)">
+        📥 Charger tous les détails
+      </button>
+    </div>
+  </header>
+
+  <div id="error-zone" class="error-zone hidden"></div>
+
+  <section id="summary" class="summary hidden">
+    <div class="summary-card summary-pompier">
+      <div class="summary-label">🚒 Pompier du jour</div>
+      <div class="summary-value" id="pompier-name">—</div>
+    </div>
+    <div class="summary-card summary-absents">
+      <div class="summary-label">❌ Absents</div>
+      <div class="summary-value" id="absents-list">—</div>
+    </div>
+    <div class="summary-card summary-stats">
+      <div class="summary-label">🔧 Interventions</div>
+      <div class="summary-value" id="stats-interv">—</div>
+    </div>
+  </section>
+
+  <main id="main-content">
+    <div class="placeholder">Le planning va s'afficher ici.</div>
+  </main>
+
+  <!-- Tooltip pour le survol -->
+  <div id="tooltip" class="tooltip hidden"></div>
+
+  <script src="viewer.js"></script>
+</body>
+</html>
@@ -0,0 +1,681 @@
+// viewer.js — Logique de la vue claire
+//
+// Étapes :
+// 1. Lire le HTML capturé depuis chrome.storage.local
+// 2. Parser les techniciens (emp_XXXXX dans le DOM)
+// 3. Parser les événements (g_arr_player[N] dans le JS inline)
+// 4. Calculer : pompier du jour, absents, interventions par tech
+// 5. Afficher tout ça
+// 6. Au survol / clic : charger la fiche détaillée via fetch()
+
+// ==========================================================================
+// Configuration
+// ==========================================================================
+
+// Règles fixes (techs avec horaires particuliers)
+const RULES = {
+  // Pillonel, Olivier (ID 40944) est absent tous les vendredis
+  "40944": {
+    alwaysAbsentOn: [5], // 5 = vendredi (JS: 0=dim, 1=lun, ..., 5=ven, 6=sam)
+    reason: "Absent fixe le vendredi"
+  }
+};
+
+// Cache des fiches détaillées (persiste pour la session)
+const detailsCache = new Map();
+// Fetch en cours (pour éviter de lancer 2x la même requête)
+const detailsPromises = new Map();
+
+// ==========================================================================
+// Init
+// ==========================================================================
+
+document.addEventListener("DOMContentLoaded", async () => {
+  document.getElementById("btn-refresh").addEventListener("click", refresh);
+  document.getElementById("btn-preload").addEventListener("click", preloadAll);
+  await loadFromStorage();
+});
+
+async function loadFromStorage() {
+  const data = await chrome.storage.local.get([
+    "planningHtml", "planningUrl", "planningCapturedAt", "planningError"
+  ]);
+
+  if (data.planningError) {
+    showError(data.planningError);
+    return;
+  }
+
+  if (!data.planningHtml) {
+    showError(
+      "Aucune donnée de planning disponible. " +
+      "Va sur la page du planning des techniciens sur itsma.vd.ch puis clique sur l'icône de l'extension."
+    );
+    return;
+  }
+
+  try {
+    const parsed = parsePlanning(data.planningHtml, data.planningUrl);
+    render(parsed, data.planningCapturedAt);
+  } catch (err) {
+    console.error(err);
+    showError("Erreur lors du parsing du planning : " + err.message);
+  }
+}
+
+async function refresh() {
+  document.getElementById("subtitle").textContent = "Retour sur EasyVista pour actualiser…";
+  // Inviter l'utilisateur à revenir sur l'onglet EasyVista et re-cliquer sur l'icône
+  // (on ne peut pas re-capturer automatiquement depuis le viewer)
+  showError(
+    "Pour actualiser : va sur l'onglet EasyVista, recharge le planning (F5), " +
+    "puis clique à nouveau sur l'icône de l'extension."
+  );
+}
+
+// ==========================================================================
+// Parsing
+// ==========================================================================
+
+function parsePlanning(html, sourceUrl) {
+  // Parser le HTML dans un DOM isolé pour pouvoir utiliser les sélecteurs CSS
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+
+  // --- 1. Extraire les techniciens depuis <div class="support_list" id="emp_XXXXX">
+  const techs = {}; // id -> { name, id }
+  for (const el of doc.querySelectorAll('div.support_list[id^="emp_"]')) {
+    const id = el.id.replace("emp_", "");
+    // Le nom est le texte direct du div (après le checkbox)
+    const rawText = el.textContent.trim();
+    // Nettoyer : enlever les \u00a0 (&nbsp;)
+    const name = rawText.replace(/\u00a0/g, " ").trim();
+    if (name && /^\d+$/.test(id)) {
+      techs[id] = { id, name };
+    }
+  }
+
+  // --- 2. Extraire les événements depuis le JS inline (g_arr_player[N])
+  // On parse les scripts
+  const events = {};
+  for (const script of doc.querySelectorAll("script")) {
+    const src = script.textContent;
+    if (!src.includes("g_arr_player")) continue;
+
+    // Pattern 1 : new action_player("event_id", "label", ...)
+    const pLabel = /g_arr_player\[(\d+)\]\s*=\s*new action_player\("(\d+)",\s*"([^"]*)"/g;
+    let m;
+    while ((m = pLabel.exec(src)) !== null) {
+      const idx = m[1];
+      events[idx] = events[idx] || {};
+      events[idx].eventId = m[2];
+      events[idx].label = decodeText(m[3]);
+    }
+
+    // Pattern 2 : assign_informations(tech_id, "title", "type", ...)
+    const pInfo = /g_arr_player\[(\d+)\]\.assign_informations\((\d+),\s*"([^"]*)",\s*"([^"]*)"/g;
+    while ((m = pInfo.exec(src)) !== null) {
+      const idx = m[1];
+      events[idx] = events[idx] || {};
+      events[idx].techId = m[2];
+      events[idx].title = decodeText(m[3]);
+      events[idx].type = m[4];
+    }
+
+    // Pattern 3 : assign_date_time_informations (plusieurs arguments)
+    const pTime = /g_arr_player\[(\d+)\]\.assign_date_time_informations\(([^)]+)\)/g;
+    while ((m = pTime.exec(src)) !== null) {
+      const idx = m[1];
+      const args = m[2];
+      const parts = [...args.matchAll(/"([^"]*)"/g)].map(x => x[1]);
+      if (parts.length >= 10) {
+        events[idx] = events[idx] || {};
+        events[idx].dateStart = parts[0];
+        events[idx].dateEnd = parts[4];
+        events[idx].timeStart = parts[8];
+        events[idx].timeEnd = parts[9];
+      }
+    }
+  }
+
+  // --- 3. Extraire les liens vers les fiches détaillées depuis les AffBulle
+  // Les <a href="..."> contenant target=XXXXXXXX donnent l'URL de la fiche
+  const eventLinks = {}; // eventId -> full URL
+  for (const a of doc.querySelectorAll('a[href*="target="]')) {
+    const href = a.getAttribute("href");
+    const m = /target=(\d+)/.exec(href);
+    if (m) {
+      // Construire l'URL absolue à partir de sourceUrl
+      try {
+        const absoluteUrl = new URL(href, sourceUrl || "https://itsma.vd.ch/").href;
+        eventLinks[m[1]] = absoluteUrl;
+      } catch (e) {
+        // ignore
+      }
+    }
+  }
+
+  // --- 4. Extraire les infobulles rapides pour chaque event
+  // Format : AffBulle(this, '...texte échappé...')
+  const eventBulles = {}; // eventId -> texte décodé
+  // Recherche dans le HTML brut pour les AffBulle (ils ne sont pas dans <script>)
+  const bulleRegex = /AffBulle\(this,\s*'([^']+)'/g;
+  let bm;
+  while ((bm = bulleRegex.exec(html)) !== null) {
+    const raw = bm[1];
+    // Décoder : &lt; &gt; &amp; &#xx; + \'XX hex (RTF-like)
+    let text = raw
+      .replace(/&lt;BR&gt;/gi, "\n")
+      .replace(/&amp;/g, "&")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">");
+    // Trouver l'eventId dans ce texte : il commence par "HH:MM RÉFÉRENCE"
+    // On associe la bulle à l'eventId du lien <a> le plus proche
+    // Stratégie plus simple : chercher une réf S... ou I... dans le texte
+    const refMatch = /([SI]\d{6}_\d{5})/.exec(text);
+    if (refMatch) {
+      eventBulles[refMatch[1]] = text;
+    }
+  }
+
+  // --- 5. Calculer le jour cible = date la plus fréquente dans les events
+  const dateCounts = {};
+  for (const e of Object.values(events)) {
+    if (e.dateStart) {
+      dateCounts[e.dateStart] = (dateCounts[e.dateStart] || 0) + 1;
+    }
+  }
+  let targetDate = null;
+  let maxCount = 0;
+  for (const [d, c] of Object.entries(dateCounts)) {
+    if (c > maxCount) { maxCount = c; targetDate = d; }
+  }
+  // Si on n'a rien, fallback sur aujourd'hui
+  if (!targetDate) {
+    const t = new Date();
+    targetDate = `${pad(t.getDate())}/${pad(t.getMonth()+1)}/${t.getFullYear()}`;
+  }
+
+  // --- 6. Filtrer les événements actifs ce jour
+  const targetDateObj = parseFrDate(targetDate);
+  const eventsToday = [];
+  for (const e of Object.values(events)) {
+    if (!e.techId || !e.dateStart) continue;
+    const d1 = parseFrDate(e.dateStart);
+    const d2 = parseFrDate(e.dateEnd || e.dateStart);
+    if (d1 && d2 && targetDateObj >= d1 && targetDateObj <= d2) {
+      // Associer la bulle si on a trouvé la réf correspondante
+      const refMatch = /([SI]\d{6}_\d{5})/.exec(e.label || "");
+      if (refMatch) {
+        e.ref = refMatch[1];
+        e.bulleText = eventBulles[refMatch[1]];
+      }
+      e.detailUrl = eventLinks[e.eventId];
+      eventsToday.push(e);
+    }
+  }
+
+  // --- 7. Détecter pompier et absents
+  let pompierId = null;
+  const absentIds = new Set();
+  for (const e of eventsToday) {
+    if (e.type !== "AL-Absence") continue;
+    const lbl = ((e.label || "") + " " + (e.title || "")).toLowerCase();
+    if (lbl.includes("pompier")) {
+      pompierId = e.techId;
+    } else {
+      absentIds.add(e.techId);
+    }
+  }
+
+  // Appliquer les règles fixes (Pillonel absent le vendredi)
+  const dayOfWeek = targetDateObj ? targetDateObj.getDay() : null;
+  const fixedAbsences = {}; // techId -> reason
+  for (const [tid, rule] of Object.entries(RULES)) {
+    if (rule.alwaysAbsentOn && dayOfWeek !== null && rule.alwaysAbsentOn.includes(dayOfWeek)) {
+      // On l'ajoute aux absents (si pas déjà là)
+      if (tid !== pompierId && techs[tid]) {
+        absentIds.add(tid);
+        fixedAbsences[tid] = rule.reason;
+      }
+    }
+  }
+
+  return {
+    techs,
+    eventsToday,
+    targetDate,
+    pompierId,
+    absentIds,
+    fixedAbsences
+  };
+}
+
+function decodeText(s) {
+  if (!s) return s;
+  // Décodage des séquences RTF \'XX en caractères latin-1
+  // (rare dans un DOM vivant, mais présent si le HTML vient d'un fichier RTF)
+  return s.replace(/\\'([0-9a-fA-F]{2})/g, (_, hex) => {
+    return String.fromCharCode(parseInt(hex, 16));
+  });
+}
+
+function parseFrDate(s) {
+  if (!s) return null;
+  const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(s);
+  if (!m) return null;
+  return new Date(parseInt(m[3]), parseInt(m[2])-1, parseInt(m[1]));
+}
+
+function pad(n) { return String(n).padStart(2, "0"); }
+
+// ==========================================================================
+// Rendu
+// ==========================================================================
+
+function render(data, capturedAt) {
+  const { techs, eventsToday, targetDate, pompierId, absentIds, fixedAbsences } = data;
+
+  // Topbar
+  document.getElementById("display-date").textContent = formatFrDate(targetDate);
+  const ago = capturedAt ? ` (capturé il y a ${formatAgo(Date.now() - capturedAt)})` : "";
+  document.getElementById("subtitle").textContent =
+    `${Object.keys(techs).length} techniciens · ${eventsToday.length} événements${ago}`;
+
+  // Summary cards
+  const interventions = eventsToday.filter(e => e.type === "AL-Intervention");
+  document.getElementById("summary").classList.remove("hidden");
+  document.getElementById("pompier-name").textContent =
+    pompierId ? techs[pompierId]?.name || "?" : "(aucun)";
+  document.getElementById("absents-list").innerHTML = [...absentIds]
+    .map(id => techs[id]?.name || id)
+    .map(n => `<div>${escape(n)}</div>`).join("") || '<span class="muted">(aucun)</span>';
+  document.getElementById("stats-interv").innerHTML =
+    `<span>${interventions.length}</span> <span class="muted">sur ${eventsToday.length} événements</span>`;
+
+  // Grid des techniciens
+  const main = document.getElementById("main-content");
+  main.innerHTML = "";
+  const grid = document.createElement("div");
+  grid.className = "tech-grid";
+
+  // Ordonner les techs : pompier d'abord, puis actifs par nb d'interv desc, puis absents
+  const sortedIds = Object.keys(techs).sort((a, b) => {
+    if (a === pompierId) return -1;
+    if (b === pompierId) return 1;
+    const aAbs = absentIds.has(a);
+    const bAbs = absentIds.has(b);
+    if (aAbs !== bAbs) return aAbs ? 1 : -1;
+    const aInt = eventsToday.filter(e => e.techId === a && e.type === "AL-Intervention").length;
+    const bInt = eventsToday.filter(e => e.techId === b && e.type === "AL-Intervention").length;
+    return bInt - aInt;
+  });
+
+  for (const tid of sortedIds) {
+    const tech = techs[tid];
+    const techEvents = eventsToday.filter(e => e.techId === tid);
+    const card = renderTechCard(tech, techEvents, tid === pompierId, absentIds.has(tid), fixedAbsences[tid]);
+    grid.appendChild(card);
+  }
+
+  main.appendChild(grid);
+}
+
+function renderTechCard(tech, events, isPompier, isAbsent, fixedAbsenceReason) {
+  const card = document.createElement("div");
+  card.className = "tech-card";
+  if (isPompier) card.classList.add("tech-pompier");
+  if (isAbsent && !isPompier) card.classList.add("tech-absent");
+
+  // Header
+  const header = document.createElement("div");
+  header.className = "tech-header";
+  const name = document.createElement("div");
+  name.className = "tech-name";
+  name.textContent = tech.name;
+  header.appendChild(name);
+
+  const badges = document.createElement("div");
+  if (isPompier) {
+    badges.innerHTML += '<span class="tech-badge badge-pompier">🚒 Pompier</span> ';
+  }
+  if (isAbsent && !isPompier) {
+    badges.innerHTML += '<span class="tech-badge badge-absent">❌ Absent</span> ';
+  }
+  const interv = events.filter(e => e.type === "AL-Intervention");
+  if (interv.length > 0) {
+    badges.innerHTML += `<span class="tech-badge badge-count">${interv.length} interv.</span>`;
+  }
+  header.appendChild(badges);
+  card.appendChild(header);
+
+  // Pompier info (bandeau)
+  if (isPompier) {
+    const pompierEvent = events.find(e =>
+      e.type === "AL-Absence" &&
+      (((e.label || "") + " " + (e.title || "")).toLowerCase().includes("pompier"))
+    );
+    if (pompierEvent) {
+      const info = document.createElement("div");
+      info.className = "pompier-info";
+      const period = pompierEvent.dateStart && pompierEvent.dateEnd && pompierEvent.dateStart !== pompierEvent.dateEnd
+        ? `Astreinte du ${pompierEvent.dateStart} au ${pompierEvent.dateEnd}`
+        : `Astreinte ${pompierEvent.timeStart || ""}-${pompierEvent.timeEnd || ""}`;
+      info.textContent = "🚒 " + period;
+      card.appendChild(info);
+    }
+  }
+
+  // Absence info (bandeau)
+  if (isAbsent && !isPompier) {
+    const absenceEvent = events.find(e => e.type === "AL-Absence");
+    const info = document.createElement("div");
+    info.className = "absence-info";
+    if (fixedAbsenceReason) {
+      info.textContent = "📌 " + fixedAbsenceReason;
+    } else if (absenceEvent) {
+      // On n'affiche pas le motif précis (congé/maladie) - juste "Absent"
+      const period = absenceEvent.dateStart && absenceEvent.dateEnd && absenceEvent.dateStart !== absenceEvent.dateEnd
+        ? `Absent du ${absenceEvent.dateStart} au ${absenceEvent.dateEnd}`
+        : `Absent`;
+      info.textContent = period;
+    } else {
+      info.textContent = "Absent";
+    }
+    card.appendChild(info);
+  }
+
+  // Interventions list
+  const list = document.createElement("div");
+  list.className = "tech-interventions";
+
+  if (interv.length === 0 && !isAbsent && !isPompier) {
+    list.innerHTML = '<div class="tech-empty">Aucune intervention planifiée</div>';
+  } else if (interv.length === 0 && isPompier) {
+    list.innerHTML = '<div class="tech-empty">Pompier sans intervention planifiée</div>';
+  } else {
+    // Trier par heure de début
+    interv.sort((a, b) => (a.timeStart || "").localeCompare(b.timeStart || ""));
+    for (const e of interv) {
+      list.appendChild(renderInterventionItem(e));
+    }
+  }
+  card.appendChild(list);
+
+  return card;
+}
+
+function renderInterventionItem(e) {
+  const item = document.createElement("div");
+  item.className = "intervention";
+  item.dataset.eventId = e.eventId;
+
+  // Header : heure + ref
+  const header = document.createElement("div");
+  header.className = "interv-header";
+  const time = document.createElement("span");
+  time.className = "interv-time";
+  time.textContent = `${e.timeStart || "?"} – ${e.timeEnd || "?"}`;
+  const ref = document.createElement("span");
+  ref.className = "interv-ref";
+  ref.textContent = e.ref || "";
+  header.appendChild(time);
+  header.appendChild(ref);
+  item.appendChild(header);
+
+  // Summary depuis la bulle rapide (contact + lieu si dispo)
+  if (e.bulleText) {
+    const lines = e.bulleText.split("\n").map(l => l.trim()).filter(Boolean);
+    // Format bulle : ligne 0 = "HH:MM ref (type)", 1 = AL-Intervention, 2 = contact, 3 = lieu, 4 = catégorie
+    const contact = lines[2] || "";
+    const lieu = lines[3] || "";
+    const summary = document.createElement("div");
+    summary.className = "interv-summary";
+    if (contact) {
+      const c = document.createElement("div");
+      c.className = "interv-contact";
+      c.textContent = "👤 " + contact;
+      summary.appendChild(c);
+    }
+    if (lieu) {
+      const l = document.createElement("div");
+      l.className = "interv-location";
+      l.textContent = "📍 " + lieu;
+      summary.appendChild(l);
+    }
+    item.appendChild(summary);
+  }
+
+  // Zone détails (cachée au départ, s'affiche au clic)
+  const details = document.createElement("div");
+  details.className = "interv-details hidden";
+  item.appendChild(details);
+
+  // Click pour déplier/replier
+  item.addEventListener("click", async (ev) => {
+    if (ev.target.tagName === "A") return; // ne pas intercepter les liens
+    if (!details.classList.contains("hidden")) {
+      details.classList.add("hidden");
+      return;
+    }
+    details.classList.remove("hidden");
+    await loadIntervDetails(e, details);
+  });
+
+  // Tooltip au survol (quand détails pas chargés : affiche la bulle)
+  item.addEventListener("mouseenter", (ev) => {
+    if (!details.classList.contains("hidden")) return;
+    const cached = detailsCache.get(e.eventId);
+    const text = cached || e.bulleText || "(pas d'aperçu)";
+    showTooltip(ev, text);
+  });
+  item.addEventListener("mousemove", moveTooltip);
+  item.addEventListener("mouseleave", hideTooltip);
+
+  return item;
+}
+
+async function loadIntervDetails(event, container) {
+  if (detailsCache.has(event.eventId)) {
+    renderDetails(container, detailsCache.get(event.eventId), event);
+    return;
+  }
+  if (detailsPromises.has(event.eventId)) {
+    container.classList.add("loading");
+    container.textContent = "Chargement en cours…";
+    const text = await detailsPromises.get(event.eventId);
+    renderDetails(container, text, event);
+    return;
+  }
+
+  container.classList.add("loading");
+  container.textContent = "Chargement de la fiche détaillée…";
+
+  const promise = fetchInterventionDetails(event.detailUrl);
+  detailsPromises.set(event.eventId, promise);
+
+  try {
+    const text = await promise;
+    detailsCache.set(event.eventId, text);
+    renderDetails(container, text, event);
+  } catch (err) {
+    container.classList.add("error");
+    container.textContent = "Erreur : " + err.message;
+  } finally {
+    detailsPromises.delete(event.eventId);
+  }
+}
+
+function renderDetails(container, text, event) {
+  container.classList.remove("loading", "error");
+  container.textContent = "";
+  const pre = document.createElement("div");
+  pre.style.whiteSpace = "pre-wrap";
+  pre.textContent = text || "(pas de description disponible)";
+  container.appendChild(pre);
+
+  if (event.detailUrl) {
+    const link = document.createElement("a");
+    link.href = event.detailUrl;
+    link.target = "_blank";
+    link.rel = "noopener";
+    link.className = "interv-open-link";
+    link.textContent = "🔍 Ouvrir la fiche complète dans EasyVista";
+    container.appendChild(link);
+  }
+}
+
+async function fetchInterventionDetails(url) {
+  if (!url) throw new Error("Lien de la fiche introuvable");
+
+  // Requête avec les cookies de session de l'utilisateur
+  const resp = await fetch(url, { credentials: "include" });
+  if (!resp.ok) {
+    throw new Error(`HTTP ${resp.status} en accédant à la fiche`);
+  }
+  const html = await resp.text();
+
+  // Extraire la description : chercher la zone Froala Editor
+  // Elle contient un <div class="fr-element fr-view ..."> ou, si doublement encodé,
+  // &lt;div class="fr-element fr-view ..."&gt;
+  return extractDescription(html);
+}
+
+function extractDescription(html) {
+  // Essayer la forme directe
+  let m = /class="fr-element fr-view[^"]*"[^>]*>([\s\S]*?)<\/div>/.exec(html);
+  if (m) {
+    return cleanDescription(m[1]);
+  }
+  // Essayer la forme doublement encodée (Copy outerHTML sur Angular)
+  m = /class="fr-element fr-view[^"]*"[^&]*&gt;([\s\S]*?)&lt;\/div&gt;/.exec(html);
+  if (m) {
+    let raw = m[1];
+    // Décoder les entités HTML
+    raw = raw
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&amp;/g, "&")
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'");
+    return cleanDescription(raw);
+  }
+  // Dernier recours : chercher autour du mot "Description"
+  return "(Description introuvable dans la fiche — il se peut que la structure ait changé)";
+}
+
+function cleanDescription(raw) {
+  // Remplacer <br> par \n
+  let text = raw.replace(/<br\s*\/?>/gi, "\n");
+  // Enlever toutes les autres balises
+  text = text.replace(/<[^>]+>/g, "");
+  // Décoder les entités HTML résiduelles
+  text = text
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'");
+  // Enlever les espaces multiples mais préserver les retours à la ligne
+  text = text.split("\n").map(l => l.replace(/\s+/g, " ").trim()).join("\n");
+  return text.trim();
+}
+
+// ==========================================================================
+// Pré-chargement (bouton "Charger tous les détails")
+// ==========================================================================
+
+async function preloadAll() {
+  const items = document.querySelectorAll(".intervention");
+  const btn = document.getElementById("btn-preload");
+  btn.disabled = true;
+  const total = items.length;
+  let done = 0;
+
+  // On fait ça en séquentiel avec un petit délai pour être gentil avec le serveur
+  for (const item of items) {
+    const eventId = item.dataset.eventId;
+    if (detailsCache.has(eventId)) { done++; continue; }
+
+    // Retrouver l'événement correspondant (via data-attribute on n'a que l'eventId)
+    // On fetch directement depuis le lien présent dans la page d'origine
+    // Mais on ne l'a pas en direct ici — on ré-utilise la structure via item interne
+    // Pour simplifier : on clique programmatiquement pour déclencher loadIntervDetails
+    // → mais on veut pas afficher. Donc on récupère via une autre voie.
+    // Solution : on a stocké l'URL dans un data-attribute au rendu ? Non.
+    // Plus simple : déclencher l'expansion puis la replier.
+    item.click(); // déplie → déclenche le fetch
+    await new Promise(r => setTimeout(r, 250)); // 250ms entre chaque
+    done++;
+    btn.textContent = `📥 Chargement ${done}/${total}…`;
+  }
+
+  btn.textContent = "✅ Tout chargé";
+  setTimeout(() => {
+    btn.disabled = false;
+    btn.textContent = "📥 Charger tous les détails";
+  }, 2000);
+}
+
+// ==========================================================================
+// Tooltip
+// ==========================================================================
+
+function showTooltip(ev, text) {
+  const tip = document.getElementById("tooltip");
+  tip.textContent = text;
+  tip.classList.remove("hidden");
+  moveTooltip(ev);
+}
+
+function moveTooltip(ev) {
+  const tip = document.getElementById("tooltip");
+  if (tip.classList.contains("hidden")) return;
+  let x = ev.clientX + 16;
+  let y = ev.clientY + 16;
+  const rect = tip.getBoundingClientRect();
+  if (x + rect.width > window.innerWidth - 10) x = ev.clientX - rect.width - 16;
+  if (y + rect.height > window.innerHeight - 10) y = ev.clientY - rect.height - 16;
+  tip.style.left = x + "px";
+  tip.style.top = y + "px";
+}
+
+function hideTooltip() {
+  document.getElementById("tooltip").classList.add("hidden");
+}
+
+// ==========================================================================
+// Utilitaires
+// ==========================================================================
+
+function showError(msg) {
+  const z = document.getElementById("error-zone");
+  z.textContent = msg;
+  z.classList.remove("hidden");
+  document.getElementById("main-content").innerHTML = "";
+}
+
+function formatFrDate(dateStr) {
+  // "17/04/2026" -> "vendredi 17 avril 2026"
+  const d = parseFrDate(dateStr);
+  if (!d) return dateStr;
+  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"];
+  return `${jours[d.getDay()]} ${d.getDate()} ${mois[d.getMonth()]} ${d.getFullYear()}`;
+}
+
+function formatAgo(ms) {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m} min`;
+  const h = Math.floor(m / 60);
+  return `${h}h${m % 60 ? " " + (m % 60) + "min" : ""}`;
+}
+
+function escape(s) {
+  return String(s).replace(/[&<>"']/g, c => ({
+    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
+  }[c]));
+}