From f1204ed4597a4b99a42eed46900beec1e108408e Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Fri, 5 Jun 2026 15:50:17 -0400
Subject: [PATCH] roster(planif): assignation drag-drop + timeline ressource +
 occupation + nettoyage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Panneau « jobs à assigner » v2 : multi-sélection (cases), groupes parent-enfant
surlignés, heuristique terrain/à distance (activation/netadmin pré-décochés),
pré-total d'heures, aperçu d'occupation PROJETÉE au survol (barre fantôme + badge).

Fix barre d'occupation figée après drop : /roster/assign-job pose désormais un
start_time (premier-trou-libre dans le shift) + garantit duration_h, sinon le job
compte dans les heures mais n'affiche aucun bloc. Nouvel endpoint
/roster/backfill-start-times (idempotent) pour rattraper l'historique.

Infobulle de cellule : nb de jobs + liste triée par priorité (occupancyByTechDay
renvoie jobs[]). Timeline contextuelle par ressource (dialogue, 0 appel réseau).

Lisibilité du drag : fantôme compact semi-transparent décalé sous le curseur
(ne masque plus l'aperçu) + source estompée.

Scoring de priorité : hook proximité (neutre — secteur géré manuellement),
réservé à 20% du score quand la géoloc arrivera.

Refactor hub : helper partagé firstFitStart (assign-job + backfill).
Nettoyage : retrait code mort (onDeleteRosterTag, projUsedH), carte des sections
en tête de PlanificationPage. Doc : docs/features/roster.md + index.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/ops/src/api/roster.js                   |   18 +-
 apps/ops/src/components/shared/TagEditor.vue |    6 +-
 apps/ops/src/pages/CopilotePage.vue          |   26 +-
 apps/ops/src/pages/PlanificationPage.vue     | 1064 +++++++++++++++---
 apps/ops/src/pages/RendezVousPage.vue        |   27 +-
 docs/features/README.md                      |    1 +
 docs/features/roster.md                      |   86 ++
 services/targo-hub/lib/roster-assistant.js   |    4 +-
 services/targo-hub/lib/roster.js             |  206 +++-
 9 files changed, 1230 insertions(+), 208 deletions(-)
 create mode 100644 docs/features/roster.md

diff --git a/apps/ops/src/api/roster.js b/apps/ops/src/api/roster.js
index e694424..5939d6b 100644
--- a/apps/ops/src/api/roster.js
+++ b/apps/ops/src/api/roster.js
@@ -64,10 +64,12 @@ export const approveAvailability = (name, body) => jpost('/roster/availability/'
 export const pauseTechnician = (id, paused, reason) => jpost(`/roster/technician/${encodeURIComponent(id)}/pause`, { paused, reason })
 export const setTechEfficiency = (id, efficiency) => jpost(`/roster/technician/${encodeURIComponent(id)}/efficiency`, { efficiency })
 export const setTechCost = (id, body) => jpost(`/roster/technician/${encodeURIComponent(id)}/cost`, body)
-export const setTechSkills = (id, skills) => jpost(`/roster/technician/${encodeURIComponent(id)}/skills`, { skills })
+export const setTechSkills = (id, skills, skillLevels, skillEff) => { const body = { skills }; if (skillLevels !== undefined) body.skill_levels = skillLevels; if (skillEff !== undefined) body.skill_eff = skillEff; return jpost(`/roster/technician/${encodeURIComponent(id)}/skills`, body) }
 
 // ── Prise de RDV ──
 export const bookJobs = () => jget('/roster/book/jobs')
+// Méta de l'éditeur type→compétence : { service_types, skills, skill_by_type }
+export const bookMeta = () => jget('/roster/book/meta')
 export const bookSlots = (p) => jget('/roster/book/slots?' + new URLSearchParams(p).toString())
 export const bookFit = (body) => jpost('/roster/book/fit', body)
 export const bookConfirm = (body) => jpost('/roster/book/confirm', body)
@@ -77,5 +79,19 @@ export const bookHold = (body) => jpost('/roster/book/hold', body)
 export const bookLink = (job) => jpost('/roster/book/link', { job })
 // File « À recontacter » (jobs À reporter)
 export const jobsToReschedule = () => jget('/roster/jobs-to-reschedule')
+// Impact d'un retrait de compétence : jobs assignés exigeant cette compétence
+export const skillImpact = (tech, skill) => jget('/roster/skill-impact?tech=' + encodeURIComponent(tech) + '&skill=' + encodeURIComponent(skill))
+// Impact d'une absence : jobs assignés au tech sur ces dates (CSV)
+export const absenceImpact = (tech, dates) => jget('/roster/absence-impact?tech=' + encodeURIComponent(tech) + '&dates=' + encodeURIComponent((dates || []).join(',')))
+// Redistribuer ces jobs : mode 'auto' (re-match) ou 'requeue' (À recontacter)
+export const redistributeSkillJobs = (jobs, skill, mode) => jpost('/roster/skill-impact/redistribute', { jobs, skill, mode })
+// Candidats classés pour reprendre un job (techs qualifiés + libres au créneau)
+export const jobCandidates = (job, exclude) => jget('/roster/job-candidates?job=' + encodeURIComponent(job) + '&exclude=' + encodeURIComponent(exclude || ''))
+// Plan explicite : [{ job, tech } | { job, requeue:true }]
+export const redistributePlan = (plan) => jpost('/roster/skill-impact/redistribute', { plan })
+// Jobs non assignés (+ groupe/dépendances) pour le panneau glisser-déposer
+export const unassignedJobs = () => jget('/roster/unassigned-jobs')
+// Assigner un job à un tech (date = case déposée)
+export const assignJob = (job, tech, date) => jpost('/roster/assign-job', { job, tech, date })
 // Aviser le client d'un report : désassigne + SMS lien /book — { job, phone?, message? }
 export const notifyReschedule = (body) => jpost('/roster/job/notify-reschedule', body)
diff --git a/apps/ops/src/components/shared/TagEditor.vue b/apps/ops/src/components/shared/TagEditor.vue
index 10d9ee4..03e3116 100644
--- a/apps/ops/src/components/shared/TagEditor.vue
+++ b/apps/ops/src/components/shared/TagEditor.vue
@@ -10,7 +10,7 @@
  *  - Create new tags on-the-fly with color picker
  *  - Reusable everywhere: jobs, techs, sidebar filter
  */
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 
 const $q = useQuasar()
@@ -28,6 +28,7 @@ const props = defineProps({
   levelHint:   { type: String, default: '1 = base · 5 = expert' },
   showRequired:{ type: Boolean, default: false },          // show required pin per tag (jobs)
   compact:     { type: Boolean, default: false },          // smaller chips
+  autofocus:   { type: Boolean, default: false },          // focus l'input au montage (ouvre la liste direct)
 })
 const emit = defineEmits(['update:modelValue', 'create', 'update-tag', 'rename-tag', 'delete-tag'])
 
@@ -179,6 +180,9 @@ function onBlur () {
 function onEditBlur () {
   setTimeout(() => closeEdit(), 250)
 }
+
+// Autofocus optionnel : ouvre la liste d'autocomplétion dès l'apparition (ergonomie popover près du clic).
+onMounted(() => { if (props.autofocus) nextTick(() => { inputEl.value?.focus(); focused.value = true }) })
 </script>
 
 <template>
diff --git a/apps/ops/src/pages/CopilotePage.vue b/apps/ops/src/pages/CopilotePage.vue
index 4e688e8..b3cf205 100644
--- a/apps/ops/src/pages/CopilotePage.vue
+++ b/apps/ops/src/pages/CopilotePage.vue
@@ -43,6 +43,23 @@
           :text-color="(booking.days_offered || []).includes(d.v) ? 'white' : 'grey-8'"
           @click="toggleDay(d.v)">{{ d.l }}</q-chip>
       </div>
+      <q-separator class="q-my-md" />
+      <div class="text-caption text-weight-medium q-mb-xs">Compétence requise par type de job</div>
+      <div class="text-caption text-grey-7 q-mb-sm">
+        Le client ne voit que les créneaux des techs ayant le <b>tag</b> correspondant. Laisser vide = aucun tag requis
+        (ex. ajout TV / borne WiFi → n'importe qui ; installation ou réparation → « installateur »).
+      </div>
+      <div v-if="!meta.service_types.length" class="text-caption text-grey-6 q-mb-sm">
+        Aucun type de job détecté (champ <code>service_type</code> vide sur les jobs). Renseigne‑le sur les Dispatch Jobs.
+      </div>
+      <div v-for="st in meta.service_types" :key="st" class="row items-center q-col-gutter-sm q-mb-xs">
+        <div class="col-12 col-sm-5 text-body2">{{ st }}</div>
+        <q-select class="col" dense outlined clearable use-input new-value-mode="add-unique" input-debounce="0"
+          :options="meta.skills" v-model="skillMap[st]" label="Compétence requise (tag)" placeholder="(aucune)" />
+      </div>
+      <div v-if="!meta.skills.length" class="text-caption text-orange-9 q-mt-xs">
+        ⚠️ Aucun technicien n'a de compétence saisie — renseigne les tags dans Planification › Outils › Cadence équipe, sinon le filtre exclura tout le monde.
+      </div>
       <div class="row items-center q-mt-sm">
         <q-space />
         <q-btn unelevated color="primary" label="Enregistrer" :loading="savingBooking" @click="doSaveBooking" />
@@ -80,7 +97,7 @@
 
 <script setup>
 import { ref, reactive, onMounted, nextTick } from 'vue'
-import { askAssistant, getPolicy, savePolicy } from 'src/api/roster'
+import { askAssistant, getPolicy, savePolicy, bookMeta } from 'src/api/roster'
 
 const messages = ref([])
 const input = ref('')
@@ -99,6 +116,9 @@ const bookingFields = ref([])
 const weekdays = ref([])
 const savingBooking = ref(false)
 const bookingSaved = ref(false)
+// Table type de job → compétence requise (le client ne voit que les techs qualifiés)
+const meta = reactive({ service_types: [], skills: [] })
+const skillMap = reactive({})
 
 onMounted(async () => {
   loadingPolicy.value = true
@@ -111,6 +131,7 @@ onMounted(async () => {
     bookingFields.value = d.options?.booking_fields || []
     weekdays.value = d.options?.weekdays || []
   } catch (e) { /* defaults */ }
+  try { const m = await bookMeta(); meta.service_types = m.service_types || []; meta.skills = m.skills || []; Object.assign(skillMap, m.skill_by_type || {}) } catch (e) { /* non bloquant */ }
   loadingPolicy.value = false
 })
 
@@ -128,7 +149,8 @@ function toggleDay (v) {
 }
 async function doSaveBooking () {
   savingBooking.value = true; bookingSaved.value = false
-  try { await savePolicy({ booking: { ...booking, days_offered: [...(booking.days_offered || [])] } }); bookingSaved.value = true; setTimeout(() => { bookingSaved.value = false }, 2500) }
+  const sbt = {}; for (const k in skillMap) { if (skillMap[k]) sbt[k] = String(skillMap[k]).trim() } // n'enregistre que les types tagués
+  try { await savePolicy({ booking: { ...booking, days_offered: [...(booking.days_offered || [])], skill_by_type: sbt } }); bookingSaved.value = true; setTimeout(() => { bookingSaved.value = false }, 2500) }
   catch (e) { /* ignore */ }
   savingBooking.value = false
 }
diff --git a/apps/ops/src/pages/PlanificationPage.vue b/apps/ops/src/pages/PlanificationPage.vue
index b2e862f..ab340cd 100644
--- a/apps/ops/src/pages/PlanificationPage.vue
+++ b/apps/ops/src/pages/PlanificationPage.vue
@@ -1,5 +1,6 @@
 <template>
   <q-page padding>
+    <!-- Rangée 1 : actions principales (nav · Outils · Générer · Publier) -->
     <div class="row items-center q-mb-sm q-gutter-xs">
       <div class="text-h6 text-weight-bold">Planification</div>
       <q-chip v-if="dirty" dense size="sm" color="orange" text-color="white" icon="circle">{{ dirtyCount }} non publié(s)</q-chip>
@@ -9,41 +10,85 @@
         <q-btn dense flat label="Auj." @click="navToday" />
         <q-btn dense flat icon="chevron_right" @click="navWeek(1)"><q-tooltip>Semaine suivante</q-tooltip></q-btn>
       </q-btn-group>
-      <q-input dense outlined type="date" v-model="start" style="width:160px" @update:model-value="onWeekChange" />
-      <q-select dense outlined v-model="days" :options="[7, 14]" style="width:80px" emit-value map-options @update:model-value="onDaysChange" />
+      <q-input dense outlined type="date" v-model="start" style="width:150px" @update:model-value="onWeekChange" />
+      <q-select dense outlined v-model="days" :options="[7, 14]" style="width:76px" emit-value map-options @update:model-value="onDaysChange" />
       <q-btn dense flat round icon="undo" :disable="!history.length" @click="undo"><q-tooltip>Annuler (Ctrl+Z)</q-tooltip></q-btn>
       <q-btn dense flat round icon="redo" :disable="!future.length" @click="redo"><q-tooltip>Rétablir (Ctrl+Shift+Z)</q-tooltip></q-btn>
-      <q-btn dense :outline="!showDemand" :unelevated="showDemand" color="indigo" icon="tune" label="Demande" @click="showDemand = !showDemand" />
-      <q-btn dense outline color="brown" icon="bookmark" label="Modèles">
-        <q-menu>
-          <q-list dense style="min-width:230px">
-            <q-item clickable v-close-popup @click="saveTemplate"><q-item-section avatar><q-icon name="save" /></q-item-section><q-item-section>Enregistrer la semaine comme modèle…</q-item-section></q-item>
-            <q-separator v-if="weekTemplates.length" />
-            <q-item-label v-if="weekTemplates.length" header>Appliquer</q-item-label>
-            <q-item v-for="(tm, i) in weekTemplates" :key="i" clickable @click="applyTemplate(tm)">
-              <q-item-section avatar><q-btn flat dense round size="sm" :icon="tm.default ? 'star' : 'star_border'" :color="tm.default ? 'amber-8' : 'grey-5'" @click.stop="setDefaultTemplate(i)"><q-tooltip>Modèle par défaut (★)</q-tooltip></q-btn></q-item-section>
-              <q-item-section>{{ tm.name }}</q-item-section>
-              <q-item-section side><q-btn flat dense round size="sm" icon="delete" color="grey-6" @click.stop="deleteTemplate(i)" /></q-item-section>
-            </q-item>
-          </q-list>
-        </q-menu>
-      </q-btn>
+      <q-separator vertical class="q-mx-xs" />
+      <!-- Menu OUTILS : regroupe la config secondaire pour désencombrer -->
+      <q-btn-dropdown dense outline color="grey-8" icon="build" label="Outils" no-caps>
+        <q-list dense style="min-width:230px">
+          <q-item clickable v-close-popup @click="showDemand = !showDemand">
+            <q-item-section avatar><q-icon name="tune" :color="showDemand ? 'indigo' : 'grey-7'" /></q-item-section>
+            <q-item-section>Demande de personnel</q-item-section>
+            <q-item-section side><q-icon v-if="showDemand" name="check" color="indigo" /></q-item-section>
+          </q-item>
+          <q-item clickable>
+            <q-item-section avatar><q-icon name="bookmark" color="brown" /></q-item-section>
+            <q-item-section>Modèles de semaine</q-item-section>
+            <q-item-section side><q-icon name="chevron_right" color="grey-6" /></q-item-section>
+            <q-menu anchor="top end" self="top start">
+              <q-list dense style="min-width:250px">
+                <q-item clickable v-close-popup @click="saveTemplate"><q-item-section avatar><q-icon name="save" /></q-item-section><q-item-section>Enregistrer la semaine…</q-item-section></q-item>
+                <q-separator v-if="weekTemplates.length" />
+                <q-item-label v-if="weekTemplates.length" header>Appliquer</q-item-label>
+                <q-item v-for="(tm, i) in weekTemplates" :key="i" clickable @click="applyTemplate(tm)">
+                  <q-item-section avatar><q-btn flat dense round size="sm" :icon="tm.default ? 'star' : 'star_border'" :color="tm.default ? 'amber-8' : 'grey-5'" @click.stop="setDefaultTemplate(i)"><q-tooltip>Modèle par défaut (★)</q-tooltip></q-btn></q-item-section>
+                  <q-item-section>{{ tm.name }}</q-item-section>
+                  <q-item-section side><q-btn flat dense round size="sm" icon="delete" color="grey-6" @click.stop="deleteTemplate(i)" /></q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-item>
+          <q-item clickable v-close-popup @click="openGarde"><q-item-section avatar><q-icon name="shield" color="brown" /></q-item-section><q-item-section>Rotation de garde</q-item-section></q-item>
+          <q-separator />
+          <q-item clickable v-close-popup @click="openTeamEditor"><q-item-section avatar><q-icon name="speed" /></q-item-section><q-item-section>Cadence équipe</q-item-section></q-item>
+          <q-item clickable v-close-popup @click="showTagManager = true"><q-item-section avatar><q-icon name="sell" color="teal" /></q-item-section><q-item-section>Gérer les compétences (tags)</q-item-section></q-item>
+          <q-item clickable v-close-popup @click="openAssignPanel"><q-item-section avatar><q-icon name="drag_indicator" color="deep-purple" /></q-item-section><q-item-section>Jobs à assigner (glisser-déposer)</q-item-section></q-item>
+          <q-item clickable v-close-popup @click="$router.push('/dispatch')"><q-item-section avatar><q-icon name="open_in_new" color="indigo" /></q-item-section><q-item-section>Tableau Dispatch (détails & priorités)</q-item-section></q-item>
+          <q-item clickable v-close-popup @click="openLeave"><q-item-section avatar><q-icon name="beach_access" /></q-item-section><q-item-section>Congés / absences</q-item-section></q-item>
+        </q-list>
+      </q-btn-dropdown>
       <q-btn v-if="defaultTemplate" dense flat color="amber-9" icon="star" :label="defaultTemplate.name" @click="applyDefault"><q-tooltip>Appliquer le modèle par défaut (consciente des absences)</q-tooltip></q-btn>
-      <q-btn dense outline color="brown" icon="shield" label="Garde" @click="openGarde"><q-tooltip>Rotation de garde par département</q-tooltip></q-btn>
+      <q-separator vertical class="q-mx-xs" />
       <q-btn unelevated color="primary" icon="auto_awesome" label="Générer" :loading="generating" @click="doGenerate" />
       <q-checkbox v-model="notifySms" label="SMS" dense size="sm"><q-tooltip>Notifier les techs par SMS à la publication</q-tooltip></q-checkbox>
       <q-btn :outline="!dirty" :unelevated="dirty" color="positive" icon="cloud_upload" :label="dirty ? ('Publier (' + dirtyCount + ')') : 'Publier'" :loading="publishing" :disable="!dirty" @click="doPublish" />
       <q-btn flat dense round icon="refresh" :loading="loading" @click="() => guard(loadWeek)" />
     </div>
 
-    <!-- Filtres -->
+    <!-- Rangée 2 : filtres + légende en popover -->
     <div class="row items-center q-gutter-sm q-mb-sm">
       <q-input dense outlined clearable v-model="search" placeholder="Rechercher un technicien…" style="width:230px"><template #prepend><q-icon name="search" /></template></q-input>
       <q-select dense outlined clearable v-model="groupFilter" :options="groupOptions" emit-value map-options label="Équipe" style="width:180px" />
       <q-input dense outlined type="number" v-model.number="maxHours" label="Max h/sem" style="width:110px" />
-      <q-btn dense flat icon="speed" label="Cadence équipe" @click="openTeamEditor" />
-      <q-btn dense flat icon="beach_access" label="Congés" @click="openLeave" />
       <span class="text-caption text-grey-6">{{ visibleTechs.length }} / {{ techs.length }} techs</span>
+      <q-chip v-if="cellClipboard.length" dense size="sm" color="indigo" text-color="white" icon="content_paste">{{ cellClipboard.length }} copié(s)</q-chip>
+      <q-space />
+      <q-btn dense flat round icon="help_outline" color="grey-7"><q-tooltip>Légende & raccourcis</q-tooltip>
+        <q-menu>
+          <div class="q-pa-md" style="max-width:420px">
+            <div class="text-subtitle2 q-mb-sm">Légende</div>
+            <div class="row items-center q-gutter-xs q-mb-xs"><span class="tod-leg"></span><span class="text-grey-8">dispo (matin → soir)</span></div>
+            <div class="row items-center q-gutter-xs q-mb-xs"><span class="occ-leg"></span><span class="text-grey-8">occupation (vert → rouge)</span></div>
+            <div class="row items-center q-gutter-xs q-mb-xs"><span class="leg-absent"></span><span class="text-grey-8">absent / congé</span></div>
+            <div class="row items-center q-gutter-xs q-mb-xs"><span class="leg-garde"></span><span class="text-grey-8">garde (hors bureau)</span></div>
+            <div class="row items-center q-gutter-xs q-mb-sm"><span class="free q-mr-xs">·</span><span class="text-grey-8">libre</span><span class="cell-dirty-demo q-ml-md q-mr-xs">J</span><span class="text-grey-8">modifié (non publié)</span></div>
+            <div class="text-subtitle2 q-mb-xs">Raccourcis</div>
+            <div class="text-caption text-grey-8"><b>glisser</b> = sélection · <b>shift+clic</b> = bloc · clic en-tête = colonne · clic nom = rangée · <b>ctrl+clic</b> = +1 · <b>ctrl+C/V</b> = copier/coller · <b>Suppr/⌫</b> = vider · <b>A</b> = absent · <b>G</b> = garde</div>
+          </div>
+        </q-menu>
+      </q-btn>
+    </div>
+
+    <!-- Filtre par compétence (chip/tag) → n'affiche que les techs capables, triés par priorité -->
+    <div v-if="allSkills.length" class="row items-center q-gutter-xs q-mb-sm">
+      <q-icon name="sell" size="16px" color="teal" /><span class="text-caption text-grey-7">Compétences :</span>
+      <q-chip v-for="sk in allSkills" :key="sk" clickable dense size="sm" :color="skillFilter.includes(sk) ? 'teal' : 'grey-3'" :text-color="skillFilter.includes(sk) ? 'white' : 'grey-8'" @click="toggleSkill(sk)">{{ sk }}</q-chip>
+      <template v-if="skillFilter.length">
+        <q-btn flat dense size="sm" color="grey-7" icon="close" label="Effacer" @click="skillFilter = []" />
+        <span class="text-caption text-teal text-weight-medium">▸ {{ skillFilter.length > 1 ? 'toutes requises (ET)' : 'capables' }} · {{ visibleTechs.length }} tech(s), triés par priorité</span>
+      </template>
     </div>
 
     <!-- Demande -->
@@ -82,33 +127,28 @@
       {{ solverStats.assignments }} assignations · {{ solverStats.shortfall ? (solverStats.shortfall + ' poste(s) non couvert(s)') : 'couverture complète' }} · équité {{ solverStats.spread }} h · {{ solverStats.ms }} ms
     </q-banner>
 
-    <q-banner v-if="selection.length" dense rounded class="bg-teal-1 text-teal-9 q-mb-sm">
-      {{ selection.length }} cellule(s) — assigner :
-      <q-btn v-for="t in presetTemplates" :key="t.name" dense unelevated size="sm" class="q-mx-xs" :style="chip(t.color)" :label="code(t)" @click="assignBulk(t)"><q-tooltip>{{ t.template_name }}</q-tooltip></q-btn>
+    <!-- Barre d'actions FLOTTANTE (position: fixed) → n'altère JAMAIS la hauteur de la grille : pas de décalage
+         du tableau quand la sélection démarre pendant un glisser (le curseur reste sur la rangée visée). -->
+    <div v-if="selection.length" class="sel-actions" @mousedown.stop>
+      <span class="text-weight-medium q-mr-xs">{{ selection.length }} cellule(s) :</span>
+      <q-btn dense unelevated size="sm" color="primary" label="Jour" @click="bulkWindow(8, 17)" />
+      <q-btn dense unelevated size="sm" color="deep-purple-5" label="Soir" @click="bulkWindow(16, 20)" />
+      <q-btn dense unelevated size="sm" color="brown" icon="shield" label="Garde" @click="bulkGarde" />
+      <q-btn dense unelevated size="sm" color="red-6" icon="event_busy" label="Absent" @click="bulkAbsent" />
+      <q-input dense outlined v-model="quickEntry" placeholder="8-17" style="width:84px" @keyup.enter="bulkQuick" @mousedown.stop><q-tooltip>Saisie rapide : 8-17 · 830-16 · 85</q-tooltip></q-input>
       <q-separator vertical class="q-mx-xs" />
       <q-btn dense flat size="sm" icon="content_copy" label="Copier" @click="copyCell" />
       <q-btn dense flat size="sm" icon="content_paste" :label="cellClipboard.length ? ('Coller (' + cellClipboard.length + ')') : 'Coller'" :disable="!cellClipboard.length" @click="pasteCells" />
       <q-btn dense flat size="sm" icon="layers_clear" label="Libérer" @click="clearBulk" />
       <q-btn dense flat size="sm" icon="close" label="Annuler" @click="selection = []" />
-    </q-banner>
-
-    <div class="row items-center q-gutter-xs q-mb-sm text-caption">
-      <q-chip v-if="cellClipboard.length" dense size="sm" color="indigo" text-color="white" icon="content_paste">{{ cellClipboard.length }} copié(s)</q-chip>
-      <span class="text-grey-7 q-mr-xs">Légende :</span>
-      <span class="tod-leg"></span><span class="text-grey-7 q-mr-sm">dispo (matin → soir)</span>
-      <span class="occ-leg"></span><span class="text-grey-7 q-mr-sm">occupation</span>
-      <span class="leg-absent"></span><span class="text-grey-7 q-mr-sm">absent</span>
-      <span class="leg-garde"></span><span class="text-grey-7 q-mr-sm">garde</span>
-      <span class="free q-mr-xs">·</span><span class="text-grey-7 q-mr-sm">libre</span>
-      <span class="cell-dirty-demo q-mr-xs">J</span><span class="text-grey-7 q-mr-sm">modifié (non publié)</span>
-      <span class="text-teal-8">· <b>glisser</b> = sélection · shift+clic = bloc · clic en-tête = colonne · clic nom = rangée · ctrl+clic = +1 · <b>ctrl+C/V</b> = copier/coller · <b>Suppr/⌫</b> = vider</span>
     </div>
 
+
     <div class="grid-wrap">
       <table class="roster-grid">
         <thead>
           <tr>
-            <th class="tech-col">Technicien</th>
+            <th class="tech-col"><div class="row items-center no-wrap">Ressource<q-space /><q-btn v-if="hiddenCount" flat dense round size="xs" :icon="showHidden ? 'visibility' : 'visibility_off'" :color="showHidden ? 'primary' : 'grey-6'" @click="showHidden = !showHidden"><q-badge floating color="grey-7" style="top:-7px;right:6px">{{ hiddenCount }}</q-badge><q-tooltip>{{ showHidden ? 'Cacher les ressources masquées' : (hiddenCount + ' masquée(s) — afficher en grisé') }}</q-tooltip></q-btn></div></th>
             <th v-for="(d, di) in dayList" :key="d.iso" class="clk" :class="{ weekend: d.weekend, holiday: isHoliday(d.iso) }" @click="maybeSelectCol(di)">
               <div class="dow">{{ d.dow }}</div><div class="dnum">{{ d.dnum }}</div>
               <q-badge v-if="gapByDay[d.iso]" color="red" floating style="top:2px;right:2px">{{ gapByDay[d.iso] }}</q-badge>
@@ -118,26 +158,51 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(t, ti) in visibleTechs" :key="t.id" :class="{ paused: isPaused(t) }">
-            <td class="tech-col clk" @click="maybeSelectRow(ti)">
-              <q-btn flat round dense size="9px" :icon="isPaused(t) ? 'play_arrow' : 'pause'" :color="isPaused(t) ? 'grey' : 'primary'" @click.stop="togglePause(t)"><q-tooltip>{{ isPaused(t) ? 'Réactiver' : 'Pause' }}</q-tooltip></q-btn>
-              {{ t.name }}
-              <span v-if="t.group" class="grp">{{ t.group }}</span>
-              <span v-if="t.efficiency && t.efficiency !== 1" class="eff" :class="t.efficiency < 1 ? 'fast' : 'slow'">{{ effLabel(t.efficiency) }}</span>
-              <span v-if="hoursOf(t.id)" :class="hoursOf(t.id) > maxHours ? 'text-red text-weight-bold' : 'text-grey-6'"> · {{ hoursOf(t.id) }}h<q-icon v-if="hoursOf(t.id) > maxHours" name="warning" color="red" size="12px" /></span>
+          <tr v-for="(t, ti) in visibleTechs" :key="t.id" :class="{ paused: isPaused(t), 'res-hidden': isHidden(t.id) }">
+            <td class="tech-col">
+              <div class="tech-row">
+                <q-btn flat round dense size="9px" :icon="isRowSelected(ti) ? 'check_box' : 'check_box_outline_blank'" :color="isRowSelected(ti) ? 'primary' : 'grey-5'" @click.stop="maybeSelectRow(ti)"><q-tooltip>Sélectionner la rangée</q-tooltip></q-btn>
+                <q-btn flat round dense size="9px" :icon="isPaused(t) ? 'play_arrow' : 'pause'" :color="isPaused(t) ? 'grey' : 'primary'" @click.stop="togglePause(t)"><q-tooltip>{{ isPaused(t) ? 'Réactiver' : 'Pause' }}</q-tooltip></q-btn>
+                <q-badge v-if="techRank(t)" color="teal">{{ techRank(t) }}<q-tooltip>Priorité {{ techRank(t) }} — combine maîtrise (niveau) + vitesse (efficacité) + coût.</q-tooltip></q-badge>
+                <!-- Clic sur la RESSOURCE (nom ou chips) → propriétés de l'employé (compétences, horaire) -->
+                <span class="tech-name clk" @click.stop="openSkillEditor(t, $event)"><q-tooltip>Compétences & horaire de {{ t.name }}</q-tooltip>{{ t.name }}</span>
+                <q-icon v-if="roleIcon(t)" :name="roleIcon(t)" size="15px" class="role-ic"><q-tooltip class="bg-grey-9">{{ roleLabel(t) }}</q-tooltip></q-icon>
+                <span v-if="t.group" class="grp">{{ t.group }}</span>
+                <span v-if="hoursOf(t.id)" class="th" :class="hoursOf(t.id) > maxHours ? 'text-red text-weight-bold' : 'text-grey-6'">{{ hoursOf(t.id) }}h<q-icon v-if="hoursOf(t.id) > maxHours" name="warning" color="red" size="12px" /></span>
+                <q-btn flat dense round size="9px" icon="timeline" color="indigo-5" @click.stop="openTimeline(t)"><q-tooltip>Timeline dispatch de {{ t.name }} — jobs de la semaine & priorités</q-tooltip></q-btn>
+                <div class="tech-skills clk" @click.stop="openSkillEditor(t, $event)">
+                  <span v-for="sk in (t.skills || [])" :key="sk" class="skill-chip" :style="{ background: getTagColor(sk) }">{{ sk }}<span v-if="(t.skill_levels || {})[sk] || (t.skill_eff || {})[sk]" class="chip-lvl" :style="{ background: skillEffColor(t, sk) }"><q-tooltip class="bg-grey-9">Niveau {{ (t.skill_levels || {})[sk] || '—' }} · {{ effSuffix(skillEffOf(t, sk)) }}</q-tooltip>{{ (t.skill_levels || {})[sk] || '·' }}</span></span>
+                  <span v-if="!(t.skills || []).length" class="add-skill-hint">+ compétences</span>
+                </div>
+                <q-btn flat dense round size="9px" class="hide-eye" :icon="isHidden(t.id) ? 'visibility_off' : 'visibility'" :color="isHidden(t.id) ? 'grey-5' : 'grey-6'" @click.stop="toggleHidden(t.id)"><q-tooltip>{{ isHidden(t.id) ? 'Réafficher / considérer cette ressource' : 'Masquer & ignorer (hors front-line)' }}</q-tooltip></q-btn>
+              </div>
             </td>
-            <td v-for="(d, di) in dayList" :key="d.iso" class="cell" :class="{ weekend: d.weekend, holiday: isHoliday(d.iso), sel: isSelected(t.id, d.iso), dirty: isCellDirty(t.id, d.iso) }" @mousedown="onDown(ti, di, $event)" @mouseenter="onEnter(ti, di)" @click="onCellClick(t, d, $event, ti, di)">
+            <td v-for="(d, di) in dayList" :key="d.iso" class="cell" :class="{ weekend: d.weekend, holiday: isHoliday(d.iso), sel: isSelected(t.id, d.iso), dirty: isCellDirty(t.id, d.iso), 'drop-hover': dropCell === t.id + '|' + d.iso }" @mousedown="onDown(ti, di, $event)" @mouseenter="onEnter(ti, di)" @click="onCellClick(t, d, $event, ti, di)" @dragover.prevent="onCellDragOver(t, d)" @dragleave="dropCell === t.id + '|' + d.iso && (dropCell = null, dropPreview.key = null)" @drop.prevent="onCellDrop($event, t, d)">
               <template v-if="isAbsent(t.id, d.iso) || isPaused(t)">
                 <div class="tl"><div class="tl-absent"></div><q-tooltip class="bg-grey-9">Absent · {{ absenceLabel(t.id, d.iso) }}</q-tooltip></div>
               </template>
-              <template v-else-if="cellsOf(t.id, d.iso).length">
-                <div v-if="cellOcc(t.id, d.iso)" class="tl">
+              <template v-else-if="hasReg(t.id, d.iso) || onGarde(t.id, d.iso)">
+                <div class="tl">
                   <div v-for="(b, bi) in cellBands(t.id, d.iso)" :key="'b' + bi" class="tl-shift" :class="{ oncall: b.oncall }" :style="{ left: b.left, width: b.width, background: b.bg || undefined }"></div>
-                  <div v-for="(b, bi) in cellOcc(t.id, d.iso).blocks" :key="'j' + bi" class="tl-blk" :style="blockStyle(b, cellOcc(t.id, d.iso).pct)"></div>
-                  <q-tooltip class="bg-grey-9">{{ cellInterval(t.id, d.iso) }}<template v-if="cellOcc(t.id, d.iso).bookableH"> · {{ cellOcc(t.id, d.iso).usedH }} h occupé / {{ cellOcc(t.id, d.iso).bookableH }} h offrable ({{ cellOcc(t.id, d.iso).pct }} %)</template></q-tooltip>
+                  <div v-for="(b, bi) in cellBlocks(t.id, d.iso)" :key="'j' + bi" class="tl-blk" :style="blockStyle(b, cellPct(t.id, d.iso))"></div>
+                  <!-- Aperçu d'occupation projetée pendant le drag : barre fantôme + delta -->
+                  <div v-if="isDropTarget(t.id, d.iso) && projPct(t.id, d.iso) != null" class="tl-proj" :style="{ width: Math.min(100, projPct(t.id, d.iso)) + '%', background: occColor(projPct(t.id, d.iso)) }"></div>
+                  <q-tooltip class="bg-grey-9" :offset="[0, 6]" max-width="320px">
+                    <div class="text-weight-medium">{{ cellTip(t.id, d.iso) }}</div>
+                    <template v-if="cellJobs(t.id, d.iso).length">
+                      <div class="text-amber-4 q-mt-xs" style="font-size:11px">{{ cellJobs(t.id, d.iso).length }} job(s) · par priorité</div>
+                      <div v-for="j in cellJobs(t.id, d.iso)" :key="j.name" class="row items-center no-wrap" style="gap:5px;font-size:11px;line-height:1.5">
+                        <span :style="{ display:'inline-block', width:'7px', height:'7px', borderRadius:'50%', background: prioColor(j.priority), flex:'0 0 auto' }"></span>
+                        <span v-if="j.start" class="text-grey-4" style="flex:0 0 auto">{{ j.start }}</span>
+                        <span class="ellipsis">{{ j.subject }}</span><span v-if="j.customer" class="text-grey-5" style="flex:0 0 auto">· {{ j.customer }}</span>
+                      </div>
+                      <div class="text-grey-5 q-mt-xs" style="font-size:10px">Outils › Tableau Dispatch pour le détail complet</div>
+                    </template>
+                  </q-tooltip>
                 </div>
               </template>
               <span v-else class="free">·</span>
+              <div v-if="isDropTarget(t.id, d.iso)" class="drop-badge" :class="{ over: projPct(t.id, d.iso) >= 100 }">+{{ dropPreview.addH }}h<template v-if="projPct(t.id, d.iso) != null"> → {{ projPct(t.id, d.iso) }}%</template></div>
             </td>
           </tr>
           <tr v-if="!visibleTechs.length"><td :colspan="dayList.length + 1" class="text-grey-6 q-pa-md text-center">Aucun technicien (filtre ?).</td></tr>
@@ -259,97 +324,311 @@
 
     <!-- Rotation de garde par département -->
     <q-dialog v-model="showGarde">
-      <q-card style="min-width:620px">
+      <q-card style="min-width:680px;max-width:760px">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-subtitle1 text-weight-bold">🛡️ Rotation de garde (par département)</div><q-space />
           <q-btn flat round dense icon="close" v-close-popup />
         </q-card-section>
+        <q-card-section class="q-gutter-y-md">
+          <!-- Règles actives -->
+          <div v-if="gardeRules.length">
+            <div class="text-caption text-weight-bold text-grey-7 q-mb-xs">Règles actives</div>
+            <q-list dense bordered class="rounded-borders">
+              <q-item v-for="(r, i) in gardeRules" :key="r.id">
+                <q-item-section>
+                  <q-item-label class="text-weight-medium">{{ r.dept }} · {{ shiftName(r.shift) }}<span v-if="r.shiftWeekend"> · WE : {{ shiftName(r.shiftWeekend) }}</span></q-item-label>
+                  <q-item-label caption>{{ gardeDowLabel(r) }} · dès {{ (r.anchor || '').slice(5) }} · {{ gardeSeqLabel(r) }}</q-item-label>
+                </q-item-section>
+                <q-item-section side class="row no-wrap">
+                  <q-btn flat dense round size="sm" icon="edit" color="primary" @click="editGardeRule(r)"><q-tooltip>Modifier (ordre, techs, période)</q-tooltip></q-btn>
+                  <q-btn flat dense round size="sm" icon="delete" color="grey-6" @click="removeGardeRule(i)" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+
+          <!-- Éditeur de règle (sous-panneau) -->
+          <div class="garde-editor q-pa-md rounded-borders">
+            <div class="text-subtitle2 text-weight-bold q-mb-md">{{ editingGardeId ? '✏️ Modifier la règle' : '➕ Nouvelle règle' }}</div>
+
+            <!-- Section 1 : Quand & quel quart -->
+            <div class="text-caption text-weight-bold text-brown-7 q-mb-sm">1 · Quand &amp; quel quart</div>
+            <div class="row q-col-gutter-sm">
+              <div class="col-12 col-sm-6"><q-select dense outlined class="full-width" v-model="newGardeRule.dept" :options="groupNames" use-input fill-input hide-selected new-value-mode="add-unique" input-debounce="0" label="Département (optionnel)" /></div>
+              <div class="col-12 col-sm-6"><q-input dense outlined class="full-width" type="date" v-model="newGardeRule.anchor" label="Rotation démarre la semaine du" /></div>
+              <div class="col-12 col-sm-6"><q-select dense outlined class="full-width" v-model="newGardeRule.shift" :options="gardeTemplateOptions" emit-value map-options label="Quart en semaine (soir)" /></div>
+              <div class="col-12 col-sm-6"><q-select dense outlined class="full-width" clearable v-model="newGardeRule.shiftWeekend" :options="gardeTemplateOptions" emit-value map-options label="Quart fin de semaine" hint="sinon = quart de semaine" /></div>
+            </div>
+            <div class="q-mt-sm">
+              <div class="text-caption text-grey-7 q-mb-xs">Jours couverts (hors bureau) :</div>
+              <div class="row items-center q-gutter-xs">
+                <q-btn :outline="!isSetActive(WD_SEMAINE)" :unelevated="isSetActive(WD_SEMAINE)" dense size="sm" color="brown" no-caps label="Soirs de semaine" @click="toggleWeekdaysSet(WD_SEMAINE)" />
+                <q-btn :outline="!isSetActive(WD_FINSEM)" :unelevated="isSetActive(WD_FINSEM)" dense size="sm" color="brown" no-caps label="Fin de semaine" @click="toggleWeekdaysSet(WD_FINSEM)" />
+                <span class="text-grey-5 q-mx-xs">·</span>
+                <q-chip v-for="dw in GARDE_DOW" :key="dw.v" clickable dense size="sm" :color="newGardeRule.weekdays.includes(dw.v) ? 'brown' : 'grey-4'" :text-color="newGardeRule.weekdays.includes(dw.v) ? 'white' : 'grey-8'" @click="toggleGardeDow(dw.v)">{{ dw.l }}</q-chip>
+              </div>
+            </div>
+
+            <q-separator class="q-my-md" />
+
+            <!-- Section 2 : Séquence de rotation -->
+            <div class="text-caption text-weight-bold text-brown-7 q-mb-sm">2 · Séquence de rotation</div>
+            <div class="row items-center q-gutter-sm">
+              <q-select dense outlined v-model="gardePick" :options="techOptions" emit-value map-options label="Ajouter un tech à la suite" style="min-width:240px" class="col" />
+              <q-btn dense unelevated color="brown" icon="add" label="Ajouter" :disable="!gardePick" @click="addTechToSeq" />
+            </div>
+            <div v-if="newGardeRule.steps.length" class="q-mt-sm">
+              <div v-for="(s, i) in newGardeRule.steps" :key="i" class="row items-center no-wrap q-gutter-xs q-mb-xs">
+                <span class="text-caption text-weight-bold text-brown-7" style="min-width:22px">{{ i + 1 }}.</span>
+                <q-select dense outlined options-dense v-model="s.tech" :options="techOptions" emit-value map-options class="col" />
+                <q-input dense outlined type="number" min="1" v-model.number="s.weeks" style="width:88px" suffix="sem." />
+                <q-btn flat dense round size="xs" icon="arrow_upward" :disable="i === 0" @click="moveTech(i, -1)"><q-tooltip>Monter</q-tooltip></q-btn>
+                <q-btn flat dense round size="xs" icon="arrow_downward" :disable="i === newGardeRule.steps.length - 1" @click="moveTech(i, 1)"><q-tooltip>Descendre</q-tooltip></q-btn>
+                <q-btn flat dense round size="xs" icon="close" color="grey-6" @click="newGardeRule.steps.splice(i, 1)"><q-tooltip>Retirer</q-tooltip></q-btn>
+              </div>
+              <div class="text-caption text-grey-6">« sem. » = semaines consécutives. Pour <b>N semaines d'écart</b> entre 2 tours d'un tech, mets <b>N+1 étapes</b> (ex. A→B→C = 2 sem. d'écart).</div>
+            </div>
+            <div v-else class="text-caption text-grey-6 q-mt-xs">Ajoute les techs dans l'ordre de passage (doublons permis pour des tours inégaux).</div>
+            <div v-if="gardePreview.length" class="q-mt-sm bg-brown-1 rounded-borders q-pa-sm">
+              <div class="text-caption text-weight-medium text-brown-9">Aperçu — qui est de garde :</div>
+              <div class="row q-gutter-xs q-mt-xs">
+                <q-chip v-for="(p, i) in gardePreview" :key="i" dense size="sm" color="white" text-color="brown-9">{{ p.week.slice(8) }}/{{ p.week.slice(5, 7) }} → {{ p.name }}</q-chip>
+              </div>
+            </div>
+
+            <div class="row items-center q-mt-md">
+              <q-btn dense unelevated color="brown" :icon="editingGardeId ? 'save' : 'add'" :label="editingGardeId ? 'Mettre à jour la règle' : 'Enregistrer la règle'" @click="addGardeRule" />
+              <q-btn v-if="editingGardeId" flat dense class="q-ml-xs" label="Annuler" @click="editingGardeId = null; newGardeRule.steps = []; newGardeRule.weekdays = []" />
+            </div>
+          </div>
+
+          <!-- Section 3 : Publication -->
+          <div class="row items-center q-gutter-sm">
+            <div class="text-caption text-grey-6 col">La grille montre la garde <b>en direct</b> (calque). « Publier » la matérialise sur l'horizon (remplacement propre) pour dispatch &amp; les techs. Vacances ⇒ substitut auto.</div>
+            <q-select dense outlined v-model="gardeHorizon" :options="[4, 8, 12, 26]" emit-value map-options style="width:96px" label="semaines" />
+            <q-btn dense unelevated color="primary" icon="cloud_upload" label="Publier la garde" @click="applyGardeRules" />
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
+    <!-- Éditeur de compétences (modal, comme Dispatch) : overflow visible → dropdown + niveau/couleur jamais clippés -->
+    <!-- Éditeur compétences : POPOVER ancré au clic (sur la rangée), liste déjà ouverte (autofocus) -->
+    <q-menu v-model="skillMenuShown" :target="skillMenuTarget" anchor="bottom left" self="top left" no-focus max-height="80vh">
+      <div v-if="skillDialog" class="q-pa-sm" style="width:368px;min-height:300px" @click.stop @mousedown.stop>
+        <div class="row items-center q-mb-xs"><div class="text-subtitle2 text-weight-bold col ellipsis">🏷 {{ skillDialog.name }}</div><q-btn flat dense round size="sm" icon="close" v-close-popup /></div>
+        <TagEditor :model-value="skillDialog.skills" :all-tags="tagCatalog" :get-color="getTagColor" :can-edit="false" autofocus placeholder="Chercher ou créer une compétence…"
+          @update:model-value="items => onTagsChange(skillDialog, items)"
+          @create="onCreateRosterTag" />
+        <div v-if="(skillDialog.skills || []).length" class="q-mt-md">
+          <div class="row items-center text-caption text-grey-6 q-pb-xs">
+            <div class="col">Compétence</div>
+            <div style="width:90px" class="text-center">Score</div>
+            <div style="width:88px" class="text-center">Efficacité</div>
+          </div>
+          <div v-for="sk in skillDialog.skills" :key="sk" class="row items-center no-wrap q-py-xs" style="border-top:1px solid #eee">
+            <div class="col row items-center no-wrap">
+              <q-btn flat dense round size="xs" icon="circle" :style="{ color: getTagColor(sk) }"><q-tooltip>Couleur</q-tooltip>
+                <q-menu><div class="q-pa-xs" style="width:208px">
+                  <div class="row">
+                    <q-btn v-for="c in TAG_PALETTE" :key="c" v-close-popup flat dense round size="xs" icon="circle" :style="{ color: c }" @click="onUpdateRosterTag({ name: sk, color: c })" />
+                  </div>
+                  <div class="row items-center no-wrap q-mt-xs q-px-xs">
+                    <span class="text-caption text-grey-7 q-mr-sm">Perso</span>
+                    <input type="color" :value="getTagColor(sk)" @change="e => onUpdateRosterTag({ name: sk, color: e.target.value })" style="width:42px;height:26px;border:1px solid #ddd;border-radius:4px;background:none;cursor:pointer;padding:0" />
+                    <span class="text-caption text-grey-5 q-ml-sm">toute couleur</span>
+                  </div>
+                </div></q-menu>
+              </q-btn>
+              <span class="skill-chip" :style="{ background: getTagColor(sk) }">{{ sk }}</span>
+            </div>
+            <div style="width:90px" class="text-center no-wrap">
+              <q-icon v-for="n in 5" :key="n" :name="skillLevelOf(skillDialog, sk) >= n ? 'star' : 'star_outline'" :color="skillLevelOf(skillDialog, sk) >= n ? 'indigo' : 'grey-4'" size="16px" class="cursor-pointer" @click="setSkillLevel(skillDialog, sk, skillLevelOf(skillDialog, sk) === n ? 0 : n)" />
+            </div>
+            <div style="width:88px">
+              <q-input dense outlined type="number" step="5" debounce="600" :model-value="skillEffPct(skillDialog, sk)" @update:model-value="v => setSkillEffPct(skillDialog, sk, v)" suffix="%" placeholder="glob." input-class="text-right" />
+            </div>
+          </div>
+          <div class="text-caption text-grey-6 q-mt-xs"><b>Score</b> ★ = maîtrise · <b>Efficacité</b> : <b>+</b> plus vite / <b>−</b> plus lent pour CETTE compétence (ex. <b>+80</b>), vide = globale · × sur le chip = retirer.</div>
+        </div>
+        <q-separator class="q-my-sm" />
+        <div class="text-caption text-weight-medium text-grey-7 q-mb-xs">🗓 Horaire — semaine affichée</div>
+        <div class="row q-gutter-xs">
+          <q-btn dense outline size="sm" no-caps color="primary" label="5×8h (L–V)" @click="applyWeekPreset(skillDialog, [1,2,3,4,5], 8, 16)" />
+          <q-btn dense outline size="sm" no-caps color="primary" label="4×10h (L–J)" @click="applyWeekPreset(skillDialog, [1,2,3,4], 7, 17)" />
+          <q-btn dense outline size="sm" no-caps color="primary" label="3×12h (L–M)" @click="applyWeekPreset(skillDialog, [1,2,3], 7, 19)" />
+        </div>
+      </div>
+    </q-menu>
+
+    <!-- Impact d'un retrait de compétence : jobs assignés devenus invalides → redistribuer -->
+    <q-dialog v-model="skillImpactOpen">
+      <q-card style="min-width:420px;max-width:520px" v-if="skillImpactDialog">
+        <q-card-section class="row items-center q-pb-none">
+          <q-icon name="warning" color="orange" size="22px" class="q-mr-sm" />
+          <div class="text-subtitle1 text-weight-bold col">{{ skillImpactDialog.kind === 'absence' ? 'Absence — impact' : 'Compétence retirée — impact' }}</div>
+          <q-btn flat round dense icon="close" v-close-popup />
+        </q-card-section>
         <q-card-section>
-          <div class="text-caption text-grey-7 q-mb-sm">La garde tourne entre les techs d'un département, à la période choisie — <b>indépendante par département</b>. « Appliquer » génère les gardes de la semaine affichée (un tech absent est sauté au profit du suivant dans la rotation).</div>
-          <q-list v-if="gardeRules.length" dense bordered class="rounded-borders q-mb-md">
-            <q-item v-for="(r, i) in gardeRules" :key="r.id">
+          <div v-if="skillImpactDialog.kind === 'absence'" class="text-body2 q-mb-sm"><b>{{ skillImpactDialog.jobs.length }}</b> job(s) assigné(s) à <b>{{ skillImpactDialog.tech.name }}</b> tombent sur son absence — à redistribuer.</div>
+          <div v-else class="text-body2 q-mb-sm"><b>{{ skillImpactDialog.jobs.length }}</b> job(s) assigné(s) à <b>{{ skillImpactDialog.tech.name }}</b> exigent « <b>{{ skillImpactDialog.skill }}</b> », qu'on vient de retirer — il/elle ne peut plus les faire.</div>
+          <q-list dense bordered class="rounded-borders" style="max-height:320px;overflow:auto">
+            <q-item v-for="j in skillImpactDialog.jobs" :key="j.name" class="q-py-sm">
               <q-item-section>
-                <q-item-label class="text-weight-medium">{{ r.dept }} · {{ shiftName(r.shift) }}<span v-if="r.shiftWeekend"> · WE : {{ shiftName(r.shiftWeekend) }}</span></q-item-label>
-                <q-item-label caption>{{ gardeDowLabel(r) }} · dès {{ (r.anchor || '').slice(5) }} · {{ gardeSeqLabel(r) }}</q-item-label>
+                <q-item-label>{{ j.service_type || 'Job' }}{{ j.customer_name ? ' — ' + j.customer_name : '' }}</q-item-label>
+                <q-item-label caption><q-icon name="event" size="12px" /> {{ j.scheduled_date ? j.scheduled_date.slice(5) : '—' }} {{ j.start_time ? j.start_time.slice(0, 5) : '' }} · {{ j.location_label || j.service_location || '—' }}</q-item-label>
               </q-item-section>
-              <q-item-section side class="row no-wrap">
-                <q-btn flat dense round size="sm" icon="edit" color="primary" @click="editGardeRule(r)"><q-tooltip>Modifier (ordre, techs, période)</q-tooltip></q-btn>
-                <q-btn flat dense round size="sm" icon="delete" color="grey-6" @click="removeGardeRule(i)" />
+              <q-item-section side style="min-width:188px">
+                <q-select dense outlined options-dense :model-value="impactPlan[j.name]" :options="candidateOptions(j.name)" emit-value map-options :loading="loadingCandidates" label="Réassigner à" @update:model-value="v => { impactPlan[j.name] = v }" />
               </q-item-section>
             </q-item>
           </q-list>
-          <div class="text-caption text-weight-medium q-mb-xs">{{ editingGardeId ? 'Modifier la règle' : 'Nouvelle règle' }}</div>
-          <div class="row q-col-gutter-sm items-end">
-            <q-select dense outlined v-model="newGardeRule.dept" :options="groupNames" use-input fill-input hide-selected new-value-mode="add-unique" input-debounce="0" label="Département (optionnel)" style="width:170px" hint="existant ou tape un nom" />
-            <q-select dense outlined v-model="newGardeRule.shift" :options="gardeTemplateOptions" emit-value map-options label="Shift semaine (soir)" style="width:180px" />
-            <q-select dense outlined clearable v-model="newGardeRule.shiftWeekend" :options="gardeTemplateOptions" emit-value map-options label="Shift fin de semaine" style="width:180px" hint="optionnel — sinon = shift semaine" />
-            <q-input dense outlined type="date" v-model="newGardeRule.anchor" label="Rotation démarre la semaine du" style="width:200px"><q-tooltip>Donnée de référence : la séquence commence à cette semaine (ancrage stable dans le temps).</q-tooltip></q-input>
-          </div>
-          <div class="q-mt-sm row items-center q-gutter-xs">
-            <span class="text-caption text-grey-7 q-mr-xs">Plages (hors bureau) :</span>
-            <q-btn :outline="!isSetActive(WD_SEMAINE)" :unelevated="isSetActive(WD_SEMAINE)" dense size="sm" color="brown" no-caps label="Soirs de semaine" @click="toggleWeekdaysSet(WD_SEMAINE)" />
-            <q-btn :outline="!isSetActive(WD_FINSEM)" :unelevated="isSetActive(WD_FINSEM)" dense size="sm" color="brown" no-caps label="Fin de semaine" @click="toggleWeekdaysSet(WD_FINSEM)" />
-            <span class="text-grey-5 q-mx-xs">·</span>
-            <q-chip v-for="dw in GARDE_DOW" :key="dw.v" clickable dense size="sm" :color="newGardeRule.weekdays.includes(dw.v) ? 'brown' : 'grey-4'" :text-color="newGardeRule.weekdays.includes(dw.v) ? 'white' : 'grey-8'" @click="toggleGardeDow(dw.v)">{{ dw.l }}</q-chip>
-          </div>
-          <div class="text-caption text-grey-6 q-mt-xs">Combinables. La garde couvre les heures du shift choisi (hors bureau) ; pour des heures différentes semaine/week-end, crée 2 règles.</div>
-          <div class="row items-end q-gutter-sm q-mt-sm">
-            <q-select dense outlined v-model="gardePick" :options="techOptions" emit-value map-options label="Ajouter un tech à la suite" style="min-width:210px" />
-            <q-btn dense unelevated color="grey-7" icon="add" label="Ajouter" :disable="!gardePick" @click="addTechToSeq" />
-          </div>
-          <div v-if="newGardeRule.steps.length" class="q-mt-xs">
-            <div class="text-caption text-grey-7">Séquence ({{ newGardeRule.steps.length }} étapes) — « sem. » = nb de semaines consécutives du tech avant de passer au suivant :</div>
-            <div v-for="(s, i) in newGardeRule.steps" :key="i" class="row items-center no-wrap q-gutter-xs q-mt-xs">
-              <span class="text-caption text-weight-medium" style="min-width:22px">{{ i + 1 }}.</span>
-              <q-select dense outlined options-dense v-model="s.tech" :options="techOptions" emit-value map-options style="min-width:170px" />
-              <q-input dense outlined type="number" min="1" v-model.number="s.weeks" style="width:92px" suffix="sem." />
-              <q-btn flat dense round size="xs" icon="arrow_upward" :disable="i === 0" @click="moveTech(i, -1)"><q-tooltip>Monter</q-tooltip></q-btn>
-              <q-btn flat dense round size="xs" icon="arrow_downward" :disable="i === newGardeRule.steps.length - 1" @click="moveTech(i, 1)"><q-tooltip>Descendre</q-tooltip></q-btn>
-              <q-btn flat dense round size="xs" icon="close" color="grey-6" @click="newGardeRule.steps.splice(i, 1)"><q-tooltip>Retirer</q-tooltip></q-btn>
-            </div>
-          </div>
-          <div v-if="gardePreview.length" class="q-mt-sm bg-grey-1 rounded-borders q-pa-sm">
-            <div class="text-caption text-weight-medium">Aperçu (qui est de garde, prochaines semaines) :</div>
-            <div class="row q-gutter-xs q-mt-xs">
-              <q-chip v-for="(p, i) in gardePreview" :key="i" dense size="sm" color="brown-1" text-color="brown-9">sem. {{ p.week.slice(8) }}/{{ p.week.slice(5, 7) }} → {{ p.name }}</q-chip>
-            </div>
-          </div>
-          <div class="row items-center q-mt-md">
-            <q-btn dense unelevated color="brown" :icon="editingGardeId ? 'save' : 'add'" :label="editingGardeId ? 'Mettre à jour' : 'Ajouter la règle'" @click="addGardeRule" />
-            <q-btn v-if="editingGardeId" flat dense class="q-ml-xs" label="Annuler" @click="editingGardeId = null; newGardeRule.steps = []; newGardeRule.weekdays = []" />
-            <q-space />
-            <q-select dense outlined v-model="gardeHorizon" :options="[4, 8, 12, 26]" emit-value map-options style="width:96px" label="semaines" />
-            <q-btn dense unelevated color="primary" icon="event_repeat" label="Générer la garde" class="q-ml-sm" @click="applyGardeRules" />
-          </div>
-          <div class="text-caption text-grey-6 q-mt-xs">Matérialise la rotation sur l'horizon (publié direct, comme un évènement récurrent). Re-générer reflète les modifs de séquence.</div>
+          <div class="text-caption text-grey-6 q-mt-sm">Choix <b>classés</b> = techs qualifiés <b>libres au même créneau</b> (le 1er = suggéré). « À recontacter » → file RDV (créneaux filtrés, SMS client possible).</div>
         </q-card-section>
+        <q-card-actions align="right">
+          <q-btn flat label="Ignorer" v-close-popup :disable="redistributing" />
+          <q-btn outline color="grey-8" no-caps label="Tout à recontacter" :loading="redistributing" @click="doRedistribute('requeue')" />
+          <q-btn unelevated color="primary" icon="check" no-caps label="Appliquer" :loading="redistributing" @click="applyImpactPlan" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+    <!-- Gestionnaire global des compétences (tags) : renommer / recolorer / supprimer partout -->
+    <q-dialog v-model="showTagManager">
+      <q-card style="min-width:420px;max-width:540px">
+        <q-card-section class="row items-center q-pb-none">
+          <div class="text-subtitle1 text-weight-bold col">🏷 Gérer les compétences</div>
+          <q-btn flat round dense icon="close" v-close-popup />
+        </q-card-section>
+        <q-card-section style="max-height:62vh;overflow:auto">
+          <div v-if="!managedTags.length" class="text-grey-6">Aucune compétence — ajoute-en via un employé.</div>
+          <q-list v-else dense separator>
+            <q-item v-for="tg in managedTags" :key="tg.label">
+              <q-item-section avatar>
+                <q-btn flat dense round size="sm" icon="circle" :style="{ color: tg.color }"><q-tooltip>Couleur</q-tooltip>
+                  <q-menu><div class="q-pa-xs" style="width:208px">
+                    <div class="row"><q-btn v-for="c in TAG_PALETTE" :key="c" v-close-popup flat dense round size="xs" icon="circle" :style="{ color: c }" @click="onUpdateRosterTag({ name: tg.label, color: c })" /></div>
+                    <div class="row items-center no-wrap q-mt-xs q-px-xs"><span class="text-caption text-grey-7 q-mr-sm">Perso</span><input type="color" :value="tg.color" @change="e => onUpdateRosterTag({ name: tg.label, color: e.target.value })" style="width:42px;height:26px;border:1px solid #ddd;border-radius:4px;background:none;cursor:pointer;padding:0" /></div>
+                  </div></q-menu>
+                </q-btn>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="cursor-pointer">{{ tg.label }}
+                  <q-popup-edit :model-value="tg.label" auto-save v-slot="scope" @save="v => renameTagGlobal(tg.label, v)">
+                    <q-input dense autofocus :model-value="scope.value" @update:model-value="scope.value = $event" label="Renommer (partout)" @keyup.enter="scope.set" />
+                  </q-popup-edit>
+                </q-item-label>
+                <q-item-label caption>{{ tg.count }} technicien(s) · clic = renommer</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-btn flat dense round size="sm" icon="delete" color="grey-6" @click="deleteTagGlobal(tg)"><q-tooltip>Supprimer partout</q-tooltip></q-btn>
+              </q-item-section>
+            </q-item>
+          </q-list>
+          <div class="text-caption text-grey-6 q-mt-sm">Renommer/​supprimer s'applique à <b>tous les techniciens</b> qui ont la compétence. Recolorer change la couleur partout.</div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
+    <!-- Panneau FLOTTANT déplaçable : jobs à assigner (groupes parent-enfant) → glisser sur une case (tech × jour) -->
+    <div v-if="assignPanel.open" class="assign-panel" :style="{ left: assignPanel.x + 'px', top: assignPanel.y + 'px' }">
+      <div class="assign-hdr" @mousedown="panelHeaderDown">
+        <q-icon name="drag_indicator" size="18px" /><span>Jobs à assigner ({{ assignPanel.jobs.length }})</span><q-space />
+        <q-btn flat dense round size="sm" icon="refresh" color="white" :loading="assignPanel.loading" @click="openAssignPanel" />
+        <q-btn flat dense round size="sm" icon="close" color="white" @click="assignPanel.open = false" />
+      </div>
+      <div class="assign-body">
+        <div v-if="assignPanel.loading" class="text-grey-6 q-pa-md text-center">Chargement…</div>
+        <div v-else-if="!assignPanel.jobs.length" class="text-grey-6 q-pa-md text-center">Aucun job à assigner 🎉</div>
+        <div v-for="grp in assignGroups" :key="grp.key" class="assign-grp" :class="{ 'grp-hl': groupSelected(grp) }">
+          <div v-if="grp.jobs.length > 1" class="assign-grp-hdr" @click="toggleGroupSel(grp)"><q-icon name="account_tree" size="12px" /> Groupe ({{ grp.jobs.length }}) — tout sélectionner (terrain)</div>
+          <div v-for="(j, idx) in grp.jobs" :key="j.name" class="assign-job" :class="{ blocked: j.status === 'On Hold', child: grp.jobs.length > 1 && idx > 0, sel: !!selectedJobs[j.name], dragging: draggingSet.has(j.name) }" draggable="true" @dragstart="onJobDragStart($event, j)" @dragend="onJobDragEnd">
+            <div class="row items-center no-wrap">
+              <q-checkbox dense size="xs" :model-value="!!selectedJobs[j.name]" @update:model-value="selectedJobs[j.name] = $event" @click.stop @mousedown.stop class="q-mr-xs" />
+              <q-icon :name="jobIsOnsite(j) ? 'home_repair_service' : 'cloud'" size="13px" :color="jobIsOnsite(j) ? 'teal' : 'grey-5'" class="q-mr-xs"><q-tooltip>{{ jobIsOnsite(j) ? 'Sur site (terrain)' : 'À distance / netadmin — pas pour un tech terrain' }}</q-tooltip></q-icon>
+              <q-badge v-if="j.step_order" color="indigo" class="q-mr-xs">{{ j.step_order }}</q-badge>
+              <span class="ellipsis text-weight-medium">{{ j.subject || j.service_type || j.name }}</span>
+              <q-space />
+              <q-icon v-if="j.status === 'On Hold'" name="lock" size="13px" color="orange"><q-tooltip>En attente de {{ j.depends_on || 'la tâche précédente' }}</q-tooltip></q-icon>
+            </div>
+            <div class="assign-sub">
+              <span v-if="j.required_skill" class="assign-skill" :style="{ background: getTagColor(j.required_skill) }">{{ j.required_skill }}</span>
+              {{ j.customer_name || j.location_label || j.service_location || '' }}<span v-if="j.depends_on"> · après {{ j.depends_on }}</span> · {{ j.duration_h || 1 }}h
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="assignPanel.jobs.length" class="assign-foot">
+        <template v-if="selectedNames.length"><b>{{ selectedNames.length }}</b> sélectionné(s) · <b>{{ selectedHours }}h</b> — glisse la sélection sur un tech</template>
+        <template v-else>Coche des jobs (groupe lié surligné), puis glisse la sélection sur une case <b>tech × jour</b>. <q-icon name="home_repair_service" size="11px" color="teal" />=terrain · <q-icon name="cloud" size="11px" color="grey-5" />=à distance · 🔒=bloqué.</template>
+      </div>
+    </div>
+
+    <!-- Timeline contextuelle d'une ressource : dispatch des jobs de la semaine visible (heures + priorités) -->
+    <q-dialog v-model="timelineDlg.open">
+      <q-card style="min-width:560px;max-width:780px">
+        <q-card-section class="row items-center q-pb-sm">
+          <q-icon name="timeline" color="indigo" size="22px" class="q-mr-sm" />
+          <div class="text-subtitle1 text-weight-bold">Timeline — {{ timelineDlg.tech && timelineDlg.tech.name }}</div>
+          <q-space />
+          <q-btn flat dense no-caps size="sm" icon="open_in_new" label="Dispatch" color="indigo" @click="$router.push('/dispatch')" />
+          <q-btn flat round dense icon="close" v-close-popup />
+        </q-card-section>
+        <q-card-section class="q-pt-none" style="max-height:70vh;overflow:auto">
+          <div v-if="!timelineDays.length" class="text-grey-6 q-pa-md text-center">Aucun job planifié cette semaine pour cette ressource.</div>
+          <div v-for="day in timelineDays" :key="day.iso" class="tldlg-day">
+            <div class="row items-center q-mb-xs">
+              <div class="text-weight-medium" :class="{ 'text-deep-orange-7': day.weekend }">{{ day.label }}</div><q-space />
+              <q-badge v-if="day.pct != null" text-color="white" :style="{ background: occColor(day.pct) }">{{ day.usedH }}h · {{ day.pct }}%</q-badge>
+              <q-badge v-else color="grey-5" class="q-ml-xs">{{ day.usedH }}h</q-badge>
+            </div>
+            <div class="tldlg-bar">
+              <div v-for="(b, bi) in day.bands" :key="'b' + bi" class="tl-shift" :class="{ oncall: b.oncall }" :style="{ left: b.left, width: b.width, background: b.bg || undefined }"></div>
+              <div v-for="(b, bi) in day.blocks" :key="'k' + bi" class="tl-blk" :style="blockStyle(b, day.pct)"></div>
+              <span v-for="tk in axisTicks" :key="'t' + tk.h" class="tldlg-tick" :style="{ left: tk.left }">{{ tk.h }}</span>
+            </div>
+            <div v-for="j in day.jobs" :key="j.name" class="tldlg-job">
+              <span class="tldlg-dot" :style="{ background: prioColor(j.priority) }"><q-tooltip>{{ j.priority }}</q-tooltip></span>
+              <span class="tldlg-time">{{ j.start || '—' }}</span>
+              <span class="ellipsis">{{ j.subject }}</span>
+              <span v-if="j.customer" class="text-grey-6 ellipsis">· {{ j.customer }}</span>
+              <q-space /><span class="text-grey-6" style="flex:0 0 auto">{{ j.dur }}h</span>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-section v-if="timelineDays.length" class="q-pt-none text-caption text-grey-6">Trié par priorité puis heure · 🔴 urgent 🟠 élevée 🔵 moyenne ⚪ basse. Heures posées en premier-trou-libre.</q-card-section>
       </q-card>
     </q-dialog>
 
     <q-menu v-model="menu.show" :target="menu.target" anchor="bottom left" self="top left" max-height="85vh">
       <q-list dense style="width:262px;user-select:none;-webkit-user-select:none">
         <q-item-label header class="q-py-xs">{{ menu.tech && menu.tech.name }} — {{ menu.day && menu.day.dnum }}</q-item-label>
-        <!-- Raccourcis (près du clic) -->
+        <!-- 4 actions : Jour · Soir · Garde · Absent -->
         <div class="row q-gutter-xs q-px-sm q-pb-xs">
-          <q-btn dense unelevated size="sm" color="primary" label="Normal 8–17" class="col" @click="quickShift(8, 17)" />
+          <q-btn dense unelevated size="sm" color="primary" label="Jour 8–17" class="col" @click="quickShift(8, 17)" />
           <q-btn dense unelevated size="sm" color="deep-purple-5" label="Soir 16–20" class="col" @click="quickShift(16, 20)" />
         </div>
-        <!-- Slider d'ajustement (en haut = proche du clic ; Appliquer dans la même rangée) -->
-        <div class="q-px-md q-pb-sm" @click.stop @mousedown.stop>
-          <q-range v-model="menuRange" :min="0" :max="24" :step="0.5" snap color="primary" class="q-mt-sm" />
-          <div class="row items-center no-wrap q-gutter-sm">
-            <span class="text-caption text-weight-bold">{{ fmtH(menuRange.min) }}h–{{ fmtH(menuRange.max) }}h</span>
-            <q-space />
-            <q-toggle dense v-model="menuOnCall" :true-value="1" :false-value="0" label="Garde" color="brown" />
-            <q-btn dense unelevated size="sm" color="primary" label="Appliquer" @click="applyMenuRange" />
-          </div>
+        <div class="row q-gutter-xs q-px-sm q-pb-xs">
+          <q-btn dense :unelevated="menuIsGarde" :outline="!menuIsGarde" size="sm" color="brown" icon="shield" :label="menuIsGarde ? 'Garde ✓' : 'Garde'" class="col" @click="toggleGardeMenu"><q-tooltip>Mettre / retirer de garde (G) — en parallèle d'un shift</q-tooltip></q-btn>
+          <q-btn dense :unelevated="menuIsAbsent" :outline="!menuIsAbsent" size="sm" color="red-6" icon="event_busy" :label="menuIsAbsent ? 'Absent ✓' : 'Absent'" class="col" @click="toggleAbsentMenu"><q-tooltip>Marquer / retirer absent (A)</q-tooltip></q-btn>
         </div>
-        <q-separator />
-        <q-item clickable v-close-popup @click="toggleAbsentMenu">
-          <q-item-section avatar><q-icon name="event_busy" size="18px" :color="menuIsAbsent ? 'grey-7' : 'red-6'" /></q-item-section>
-          <q-item-section>{{ menuIsAbsent ? "Retirer l'absence" : 'Marquer absent ce jour' }}</q-item-section>
-          <q-item-section side><span class="text-caption text-grey-6">A</span></q-item-section>
-        </q-item>
+        <!-- Saisie rapide d'heures : 8-17 · 830-16 · 85 (=8→17) -->
+        <div class="q-px-sm q-pb-xs" @click.stop @mousedown.stop>
+          <q-input dense outlined v-model="quickEntry" placeholder="Heures : 8-17 · 830-16 · 85" @keyup.enter="applyQuick()">
+            <template #append><q-btn flat dense round size="sm" icon="keyboard_return" color="primary" @click="applyQuick()"><q-tooltip>Appliquer</q-tooltip></q-btn></template>
+          </q-input>
+        </div>
+        <!-- Plage personnalisée (slider replié) -->
+        <q-expansion-item dense dense-toggle icon="tune" label="Personnaliser la plage" header-class="text-caption text-grey-7">
+          <div class="q-px-md q-pb-sm" @click.stop @mousedown.stop>
+            <q-range v-model="menuRange" :min="0" :max="24" :step="0.5" snap color="primary" class="q-mt-sm" />
+            <div class="row items-center no-wrap q-gutter-sm">
+              <span class="text-caption text-weight-bold">{{ fmtH(menuRange.min) }}h–{{ fmtH(menuRange.max) }}h</span>
+              <q-space />
+              <q-btn dense unelevated size="sm" color="primary" label="Appliquer" @click="applyMenuRange" />
+            </div>
+          </div>
+        </q-expansion-item>
         <q-separator />
         <!-- Shifts en place + actions compactes -->
         <q-item v-for="a in menuCellShifts" :key="'c' + a.shift" dense>
@@ -368,12 +647,33 @@
 </template>
 
 <script setup>
+/**
+ * PlanificationPage — grille hebdomadaire roster (ressources × jours) + prise en charge dispatch.
+ * Backend : targo-hub /roster/* (src/api/roster.js) → ERPNext facturation + solveur OR-Tools.
+ * Voir aussi : services/targo-hub/lib/roster.js (endpoints) et docs/ROSTER.md (vue d'ensemble).
+ *
+ * CARTE DES SECTIONS (chercher les bannières « ── … ── ») :
+ *   1. État réactif & constantes ............ refs techs/templates/assignments, LS_*, dayList
+ *   2. Calque de garde LIVE ................. gardeOverlay (règles) ⊕ manualGarde (touche G) → gardeEffective
+ *   3. Filtres & scoring priorité ........... skillFilter (ET), techCompetence/techSpeed/techProximity → priorityScores
+ *   4. Ressources masquées .................. hiddenTechs / visibleTechs
+ *   5. Compétences inline ................... skillLevel (1-5) + skillEff (%/compétence) + TagEditor + gestionnaire global
+ *   6. Sélection / peinture cellules ........ souris (onDown/onEnter) + clavier (onKey : A absent, G garde, copier/coller)
+ *   7. Occupation & timeline ................ occCells → cellBands/cellBlocks/cellPct/cellJobs ; openTimeline (dialogue)
+ *   8. Panneau « jobs à assigner » .......... multi-sélection + terrain/distant + drag-drop + aperçu occupation projetée
+ *   9. Dialogue d'impact .................... retrait compétence / absence → redistribution (candidats classés)
+ *  10. Chargement & solveur ................. loadBase/loadWeek/loadStats · doGenerate/doPublish
+ *  11. Helpers date/temps/couleur .......... iso/hToNum/numToTime · occColor/todColor/getTagColor
+ */
 import { ref, computed, reactive, onMounted, onUnmounted } from 'vue'
+// Icônes de rôle monochromes outline (Material Symbols, style « une couleur » demandé) : échelle = installation.
+import { symOutlinedToolsLadder, symOutlinedHeadsetMic, symOutlinedHandyman } from '@quasar/extras/material-symbols-outlined'
 import { onBeforeRouteLeave } from 'vue-router'
 import { useQuasar } from 'quasar'
 import * as roster from 'src/api/roster'
 import TechSelect from 'src/components/shared/TechSelect.vue'
 import SkillSelect from 'src/components/shared/SkillSelect.vue'
+import TagEditor from 'src/components/shared/TagEditor.vue' // module de tags partagé (Dispatch) : condensé, création à la volée, couleurs
 
 const $q = useQuasar()
 const DIRTY_MSG = 'Vous avez des modifications non publiées. Les abandonner ?'
@@ -396,10 +696,16 @@ const activeCell = ref(null) // dernière case cliquée {id, name, iso} — pour
 const anchor = ref(null)
 const demand = ref([]); const holidays = ref([]); const weekTemplates = ref([])
 const gardeRules = ref([]); const showGarde = ref(false)
+const manualGarde = ref({}) // overrides manuels de garde : 'techId|iso' → 'on' | 'off' (touche « G »)
 const newGardeRule = reactive({ dept: '', shift: '', shiftWeekend: '', weekdays: [], anchor: '', steps: [] })
 const GARDE_DOW = [{ v: 1, l: 'L' }, { v: 2, l: 'M' }, { v: 3, l: 'M' }, { v: 4, l: 'J' }, { v: 5, l: 'V' }, { v: 6, l: 'S' }, { v: 0, l: 'D' }]
 const history = ref([]); const future = ref([])
-const search = ref(''); const groupFilter = ref(null); const maxHours = ref(40)
+const search = ref(''); const groupFilter = ref(null); const maxHours = ref(40); const skillFilter = ref([])
+// Ressources masquées (hors front-line : compta, etc.) — masquées ET ignorées du calcul ; localStorage.
+const hiddenTechs = ref([]); const showHidden = ref(false)
+function isHidden (id) { return hiddenTechs.value.includes(id) }
+function toggleHidden (id) { const i = hiddenTechs.value.indexOf(id); if (i >= 0) hiddenTechs.value.splice(i, 1); else hiddenTechs.value.push(id); localStorage.setItem('roster-hidden-techs-v1', JSON.stringify(hiddenTechs.value)) }
+const hiddenCount = computed(() => techs.value.filter(t => isHidden(t.id)).length)
 const showShiftEditor = ref(false); const editTpls = ref([])
 const showTeamEditor = ref(false); const editTechs = ref([])
 const notifySms = ref(false)
@@ -410,7 +716,7 @@ function numToTime (h) { const hh = Math.floor(h); const mm = Math.round((h - hh
 // Slider à 2 poignées pour le nouveau modèle (heures custom) ↔ newTpl.start/end
 const newTplRange = computed({ get: () => ({ min: hToNum(newTpl.start) || 8, max: hToNum(newTpl.end) || 16 }), set: (v) => { newTpl.start = numToTime(v.min); newTpl.end = numToTime(v.max) } })
 
-const LS_DEMAND = 'roster-demand-v1'; const LS_HOL = 'roster-holidays-v1'; const LS_TPL = 'roster-week-templates-v1'; const LS_GARDE = 'roster-garde-rules-v1'
+const LS_DEMAND = 'roster-demand-v1'; const LS_HOL = 'roster-holidays-v1'; const LS_TPL = 'roster-week-templates-v1'; const LS_GARDE = 'roster-garde-rules-v1'; const LS_GARDE_MANUAL = 'roster-garde-manual-v1'
 
 function upcomingMonday () { const d = new Date(); d.setDate(d.getDate() + ((1 - d.getDay() + 7) % 7)); return d.toISOString().slice(0, 10) }
 function thisMonday () { const d = new Date(); const diff = (d.getDay() === 0 ? -6 : 1) - d.getDay(); d.setDate(d.getDate() + diff); return d.toISOString().slice(0, 10) }
@@ -425,23 +731,310 @@ function dowOf (iso) { const [y, m, d] = iso.split('-').map(Number); return new
 
 const tplOptions = computed(() => templates.value.map(t => ({ label: t.template_name, value: t.name })))
 const techOptions = computed(() => techs.value.map(t => ({ label: t.name, value: t.id })))
-function code (t) { return (t.template_name || t.name || '?').trim()[0].toUpperCase() }
 const tplByName = computed(() => Object.fromEntries(templates.value.map(t => [t.name, t])))
-// Modèles triés par usage (les plus utilisés en premier) — pour l'assignation rapide
-const templatesRanked = computed(() => {
-  const cnt = {}; for (const a of assignments.value) cnt[a.shift] = (cnt[a.shift] || 0) + 1
-  return templates.value.slice().sort((x, y) => (cnt[y.name] || 0) - (cnt[x.name] || 0) || (x.template_name || '').localeCompare(y.template_name || ''))
+// ── CALQUE de garde LIVE ──────────────────────────────────────────────────
+// La garde n'est PAS matérialisée pour l'affichage : on la recalcule à la volée depuis les règles
+// (rotation déterministe ancrée + saut d'absent, via rotationTech). Éditer la séquence ou marquer
+// une absence se reflète INSTANTANÉMENT, sans régénérer → fini la désync « la suite est bousillée ».
+// Clé techId|iso → nom du shift de garde (semaine vs week-end). Vacances ⇒ substitut auto.
+const gardeOverlay = computed(() => {
+  const map = {}; const rules = gardeRules.value; if (!rules.length) return map
+  for (const d of dayList.value) {
+    const dow = dowOf(d.iso); const weekend = (dow === 0 || dow === 6)
+    for (const rule of rules) {
+      if (!(rule.weekdays || []).includes(dow)) continue
+      const sh = (weekend && rule.shiftWeekend) ? rule.shiftWeekend : rule.shift
+      if (!tplByName.value[sh]) continue
+      const id = rotationTech(rule, d.iso); if (!id) continue
+      map[id + '|' + d.iso] = sh // si 2 règles visent le même tech/jour, la dernière gagne (rare)
+    }
+  }
+  return map
 })
-// Presets « nommés » seulement (Jour/Soir/…) → barre d'assignation + légende propres, même si des modèles auto existent
-const presetTemplates = computed(() => templatesRanked.value.filter(t => /[a-gi-zA-GI-Z]/.test(t.template_name || '')))
+// Shift de garde à utiliser pour un ajout MANUEL un jour donné : celui des règles (semaine/WE), sinon 1er modèle on_call.
+function gardeShiftForDay (iso) {
+  const dow = dowOf(iso); const weekend = (dow === 0 || dow === 6)
+  for (const rule of gardeRules.value) { if (!(rule.weekdays || []).includes(dow)) continue; const sh = (weekend && rule.shiftWeekend) ? rule.shiftWeekend : rule.shift; if (tplByName.value[sh]) return sh }
+  const oc = templates.value.find(t => t.on_call); return oc ? oc.name : null
+}
+// Garde EFFECTIVE = rotation (gardeOverlay) + overrides MANUELS (touche « G »/menu, localStorage) :
+//   manualGarde[key]='on' → ajoute la garde (shift du jour) ; 'off' → la retire (override d'une garde de règle).
+// Permet de DÉPLACER la garde à la main (tech en congé → la placer ailleurs) SANS toucher aux règles.
+const gardeEffective = computed(() => {
+  const base = { ...gardeOverlay.value }
+  for (const key in manualGarde.value) {
+    const v = manualGarde.value[key]
+    if (v === 'off') delete base[key]
+    else if (v === 'on') { const sh = gardeShiftForDay(key.split('|')[1]); if (sh) base[key] = sh }
+  }
+  return base
+})
+function onGarde (techId, iso) { return !!gardeEffective.value[techId + '|' + iso] }
+// Nb de techs de garde par jour (garde EFFECTIVE) → ligne de pied cohérente avec la grille
+const gardeCountByDate = computed(() => { const m = {}; for (const k in gardeEffective.value) { const iso = k.split('|')[1]; m[iso] = (m[iso] || 0) + 1 } return m })
 function chip (color) { return { background: color || '#1976d2', color: '#fff' } }
 
 // techs visibles (recherche + groupe + tri)
 const groupOptions = computed(() => { const s = new Set(); for (const t of techs.value) if (t.group) s.add(t.group); return [...s].sort().map(g => ({ label: g, value: g })) })
+// Compétences distinctes (chips de filtrage) + score de PRIORITÉ provisoire.
+const allSkills = computed(() => [...new Set(techs.value.flatMap(t => t.skills || []))].sort())
+// Édition des compétences dans la cellule du nom (popover) + suggestions ALIGNÉES sur les catégories de job.
+const jobTypes = ref([]) // service_types distincts (catégories de job) → suggérés comme compétences
+const skillDialog = ref(null) // tech dont on édite les compétences
+const skillMenuTarget = ref(null) // élément cliqué = ancre du popover (près de la souris, sur la rangée)
+const skillMenuShown = ref(false)
+function openSkillEditor (t, ev) { skillDialog.value = t; skillMenuTarget.value = (ev && ev.currentTarget) || null; skillMenuShown.value = true }
+// TagEditor (showLevel) ↔ tech : skills = libellés (CSV) · skill_levels = {compétence: niveau 1–5} (JSON).
+// Par compétence : SCORE (maîtrise 1–5, qualité) + EFFICACITÉ (facteur vitesse ; défaut = efficacité globale).
+function skillLevelOf (t, sk) { return (t.skill_levels && t.skill_levels[sk]) || 0 } // 0 = non défini (étoiles vides) ; pas de défaut trompeur
+// Applique un horaire standard à CE tech sur la semaine affichée (presets type Dispatch).
+async function applyWeekPreset (t, dows, min, max) {
+  const tpl = await ensureWindowTpl(min, max); if (!tpl) return
+  pushHistory()
+  for (const d of dayList.value) { if (dows.includes(dowOf(d.iso))) { clearLocal(t.id, d.iso); addShift(t.id, t.name, d.iso, tpl) } }
+  skillMenuShown.value = false
+  $q.notify({ type: 'positive', message: t.name + ' : horaire appliqué (semaine affichée) — pense à Publier', timeout: 2500 })
+}
+function skillEffOf (t, sk) { const e = t.skill_eff && t.skill_eff[sk]; return (e != null && e !== '') ? Number(e) : (Number(t.efficiency) || 1) } // facteur (pour le calcul de priorité)
+// Efficacité saisie en % de PERFORMANCE : + = plus VITE (moins de temps) · − = plus LENT. Conversion ↔ facteur.
+function effPctOf (factor) { return Math.round((1 - (Number(factor) || 1)) * 100) }
+function factorFromPct (pct) { const f = 1 - (Number(pct) || 0) / 100; return Math.max(0.1, Math.min(3, Math.round(f * 100) / 100)) }
+function skillEffPct (t, sk) { const e = t.skill_eff && t.skill_eff[sk]; return (e != null && e !== '') ? effPctOf(e) : '' } // '' = hérite de la globale
+function setSkillEffPct (t, sk, pct) { const m = { ...(t.skill_eff || {}) }; if (pct === '' || pct == null) delete m[sk]; else m[sk] = factorFromPct(pct); t.skill_eff = m; queueSkillSave(t) } // libre (ex. +80)
+function setSkillLevel (t, sk, v) { if (!t.skill_levels) t.skill_levels = {}; t.skill_levels = { ...t.skill_levels, [sk]: v }; queueSkillSave(t) }
+// Efficacité GLOBALE du tech, éditable/réinitialisable depuis le popover (débouncée via setTechEfficiency).
+// Couleur du cercle (vitesse PAR compétence) : vite → vert · normal → bleu-gris · lent → rouge. Intensité ∝ écart.
+function effColor (factor) { const p = effPctOf(factor); if (!p) return '#607d8b'; const a = Math.min(Math.abs(p), 30) / 30; const hue = p > 0 ? 122 : 4; return 'hsl(' + hue + ',' + Math.round(50 + a * 28) + '%,' + (44 - Math.round(a * 8)) + '%)' }
+function skillEffColor (t, sk) { const e = t.skill_eff && t.skill_eff[sk]; return (e == null || e === '') ? '#607d8b' : effColor(Number(e)) } // neutre si pas d'override (pure par-compétence)
+function onTagsChange (t, items) {
+  const newLabels = (items || []).map(x => typeof x === 'string' ? x : x.tag).filter(Boolean)
+  const removed = (t.skills || []).filter(s => !newLabels.includes(s)) // compétences retirées → vérifier l'impact sur les jobs assignés
+  t.skills = newLabels; queueSkillSave(t)
+  if (removed.length) checkSkillImpact(t, removed)
+}
+// IROPS : un retrait de compétence peut invalider des jobs assignés qui l'exigent → proposer de redistribuer.
+const skillImpactDialog = ref(null) // { tech, skill, jobs }
+const skillImpactOpen = computed({ get: () => !!skillImpactDialog.value, set: v => { if (!v) skillImpactDialog.value = null } })
+const redistributing = ref(false)
+const impactCandidates = reactive({}) // jobName → [{tech,tech_name}] candidats classés
+const impactPlan = reactive({}) // jobName → techId choisi | '__requeue'
+const loadingCandidates = ref(false)
+function candidateOptions (jobName) { return [...((impactCandidates[jobName] || []).map(x => ({ label: x.tech_name || x.tech, value: x.tech }))), { label: '→ À recontacter (client)', value: '__requeue' }] }
+async function loadImpactCandidates () { // candidats classés par job + pré-sélection du meilleur
+  const d = skillImpactDialog.value; if (!d) return
+  loadingCandidates.value = true
+  for (const k in impactCandidates) delete impactCandidates[k]; for (const k in impactPlan) delete impactPlan[k]
+  for (const j of d.jobs) {
+    try { const r = await roster.jobCandidates(j.name, d.tech.id); impactCandidates[j.name] = r.candidates || []; impactPlan[j.name] = (r.candidates && r.candidates[0]) ? r.candidates[0].tech : '__requeue' }
+    catch (e) { impactCandidates[j.name] = []; impactPlan[j.name] = '__requeue' }
+  }
+  loadingCandidates.value = false
+}
+async function checkSkillImpact (t, removedSkills) {
+  for (const sk of removedSkills) {
+    try { const r = await roster.skillImpact(t.id, sk); if (r.jobs && r.jobs.length) { skillImpactDialog.value = { tech: t, kind: 'skill', skill: sk, jobs: r.jobs }; await loadImpactCandidates(); return } } catch (e) { /* non bloquant */ }
+  }
+}
+// Même principe pour une ABSENCE : jobs assignés tombant sur les jours d'absence → dialogue de redistribution.
+async function checkAbsenceImpact (targets) {
+  const byTech = {}; for (const k of targets) { const [tid, iso] = k.split('|'); (byTech[tid] = byTech[tid] || []).push(iso) }
+  for (const tid in byTech) {
+    try { const r = await roster.absenceImpact(tid, byTech[tid]); if (r.jobs && r.jobs.length) { const t = techs.value.find(x => x.id === tid) || { id: tid, name: tid }; skillImpactDialog.value = { tech: t, kind: 'absence', jobs: r.jobs }; await loadImpactCandidates(); return } } catch (e) { /* non bloquant */ }
+  }
+}
+async function applyImpactPlan () { // applique le plan choisi (tech par job) puis RECHARGE (occupation à jour)
+  const d = skillImpactDialog.value; if (!d) return
+  redistributing.value = true
+  const plan = d.jobs.map(j => (!impactPlan[j.name] || impactPlan[j.name] === '__requeue') ? { job: j.name, requeue: true } : { job: j.name, tech: impactPlan[j.name] })
+  try { const r = await roster.redistributePlan(plan); $q.notify({ type: 'positive', message: (r.reassigned || 0) + ' réassigné(s) · ' + (r.requeued || 0) + ' à recontacter', timeout: 4500 }); skillImpactDialog.value = null; await loadWeek() }
+  catch (e) { err(e) } finally { redistributing.value = false }
+}
+async function doRedistribute (mode) { // « Tout à recontacter » (bascule simple)
+  const d = skillImpactDialog.value; if (!d) return
+  redistributing.value = true
+  try {
+    const r = await roster.redistributeSkillJobs(d.jobs.map(j => j.name), d.kind === 'skill' ? d.skill : '', mode) // absence → compétence par job côté hub
+    $q.notify({ type: 'positive', message: (r.reassigned || 0) + ' réassigné(s) · ' + (r.requeued || 0) + ' à recontacter', timeout: 4500 })
+    skillImpactDialog.value = null; await loadWeek() // refresh : occupation/jobs à jour (fix bar 4h résiduelle)
+  } catch (e) { err(e) } finally { redistributing.value = false }
+}
+// ── Panneau FLOTTANT « jobs à assigner » (multi-sélection + glisser-déposer + aperçu d'occupation) ──
+const assignPanel = reactive({ open: false, x: 40, y: 130, jobs: [], loading: false })
+const draggingJobName = ref(null); const dropCell = ref(null); const dragHours = ref(0)
+const selectedJobs = reactive({}) // jobName → true
+const dropPreview = reactive({ key: null, addH: 0 })
+const draggingSet = reactive(new Set()); let _dragGhost = null // jobs en cours de glissé (source estompée) + fantôme custom
+async function openAssignPanel () { assignPanel.open = true; assignPanel.loading = true; for (const k in selectedJobs) delete selectedJobs[k]; try { assignPanel.jobs = (await roster.unassignedJobs()).jobs || [] } catch (e) { err(e) } finally { assignPanel.loading = false } }
+const assignGroups = computed(() => { // regroupe par parent_job (ou nom propre), ordonné par step_order
+  const g = {}; for (const j of assignPanel.jobs) { const k = j.parent_job || j.name; (g[k] = g[k] || []).push(j) }
+  return Object.keys(g).map(k => ({ key: k, jobs: g[k].slice().sort((a, b) => (a.step_order || 0) - (b.step_order || 0)) }))
+})
+// Terrain vs à distance : l'activation / config / netadmin ne va PAS à un tech sur site (heuristique skill + type/sujet).
+function jobIsOnsite (j) {
+  const txt = ((j.required_skill || '') + ' ' + (j.service_type || '') + ' ' + (j.subject || '')).toLowerCase()
+  if (/activation|config|netadmin|à distance|a distance|distant|remote|provision/.test(txt)) return false
+  return true
+}
+const selectedNames = computed(() => assignPanel.jobs.filter(j => selectedJobs[j.name]).map(j => j.name))
+const jobHours = (j) => Number(j.duration_h) || 1 // défaut système = 1h (cf. hub)
+const selectedHours = computed(() => Math.round(assignPanel.jobs.filter(j => selectedJobs[j.name]).reduce((s, j) => s + jobHours(j), 0) * 10) / 10)
+function toggleGroupSel (grp) { const anyOnsiteOff = grp.jobs.some(j => jobIsOnsite(j) && !selectedJobs[j.name]); for (const j of grp.jobs) selectedJobs[j.name] = anyOnsiteOff ? jobIsOnsite(j) : false } // (dé)sélectionne le groupe ; pré-coche les terrain
+function groupSelected (grp) { return grp.jobs.some(j => selectedJobs[j.name]) }
+function onJobDragStart (ev, job) {
+  const names = selectedJobs[job.name] ? selectedNames.value : [job.name] // job non coché → on glisse juste lui
+  draggingJobName.value = names.join(','); dragHours.value = Math.round(assignPanel.jobs.filter(j => names.includes(j.name)).reduce((s, j) => s + jobHours(j), 0) * 10) / 10
+  draggingSet.clear(); names.forEach(n => draggingSet.add(n)) // source estompée (feedback)
+  try {
+    ev.dataTransfer.setData('text/plain', names.join(',')); ev.dataTransfer.effectAllowed = 'move'
+    // Fantôme COMPACT et semi-transparent décalé sous le curseur → ne masque plus le badge d'occupation projetée.
+    const g = document.createElement('div')
+    g.textContent = (names.length > 1 ? names.length + ' jobs · ' : '') + dragHours.value + 'h'
+    g.style.cssText = 'position:fixed;top:-1000px;left:-1000px;padding:2px 9px;background:rgba(94,53,177,.78);color:#fff;font:600 11px sans-serif;border-radius:10px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3)'
+    document.body.appendChild(g); _dragGhost = g
+    ev.dataTransfer.setDragImage(g, -12, -10) // curseur en haut-gauche du fantôme → fantôme bas-droite, badge (haut) lisible
+  } catch (e) {}
+}
+function onJobDragEnd () { dropCell.value = null; dropPreview.key = null; draggingSet.clear(); if (_dragGhost) { _dragGhost.remove(); _dragGhost = null } }
+function onCellDragOver (t, d) { dropCell.value = t.id + '|' + d.iso; dropPreview.key = t.id + '|' + d.iso; dropPreview.addH = dragHours.value }
+async function onCellDrop (ev, t, d) {
+  dropCell.value = null; dropPreview.key = null
+  const raw = (ev.dataTransfer && ev.dataTransfer.getData('text/plain')) || draggingJobName.value; draggingJobName.value = null
+  const names = (raw || '').split(',').filter(Boolean); if (!names.length) return
+  let ok = 0
+  for (const jn of names) { try { await roster.assignJob(jn, t.id, d.iso); ok++; delete selectedJobs[jn] } catch (e) { err(e) } } // SÉQUENTIEL
+  assignPanel.jobs = assignPanel.jobs.filter(j => !names.includes(j.name))
+  $q.notify({ type: 'positive', message: ok + ' job(s) assigné(s) à ' + t.name + ' · ' + d.dnum, timeout: 2800 }); await loadWeek()
+}
+let _panelDrag = null // déplacement du panneau via son en-tête
+function panelHeaderDown (ev) { _panelDrag = { dx: ev.clientX - assignPanel.x, dy: ev.clientY - assignPanel.y }; document.addEventListener('mousemove', panelMove); document.addEventListener('mouseup', panelUp) }
+function panelMove (ev) { if (!_panelDrag) return; assignPanel.x = Math.max(0, ev.clientX - _panelDrag.dx); assignPanel.y = Math.max(0, ev.clientY - _panelDrag.dy) }
+function panelUp () { _panelDrag = null; document.removeEventListener('mousemove', panelMove); document.removeEventListener('mouseup', panelUp) }
+
+// ── Timeline contextuelle d'une RESSOURCE (dispatch des jobs de la semaine visible) ──
+// Réutilise les helpers de cellule (cellBands/cellBlocks/cellJobs/cellPct) → 0 nouvel appel réseau.
+const timelineDlg = reactive({ open: false, tech: null })
+function openTimeline (t) { timelineDlg.tech = t; timelineDlg.open = true }
+const timelineDays = computed(() => {
+  const t = timelineDlg.tech; if (!t) return []
+  const out = []
+  for (const d of dayList.value) {
+    const jobs = cellJobs(t.id, d.iso); const shift = hasReg(t.id, d.iso) || onGarde(t.id, d.iso)
+    if (!jobs.length && !shift) continue // on saute les jours vides
+    const o = cellOcc(t.id, d.iso)
+    out.push({ iso: d.iso, label: d.dow + ' ' + d.dnum, weekend: d.weekend, bands: cellBands(t.id, d.iso), blocks: cellBlocks(t.id, d.iso), jobs, pct: cellPct(t.id, d.iso), usedH: o ? o.usedH : 0 })
+  }
+  return out
+})
+// Sauvegarde DEBOUNCÉE + silencieuse (succès) : coalesce les clics rapides → 1 seul appel (évite « load fail » concurrents).
+let _skillSaveTimer = null
+function queueSkillSave (t) { if (_skillSaveTimer) clearTimeout(_skillSaveTimer); _skillSaveTimer = setTimeout(() => { _skillSaveTimer = null; doSaveSkillData(t) }, 500) }
+async function doSaveSkillData (t) {
+  const sset = new Set(t.skills || [])
+  const lv = {}; for (const k in (t.skill_levels || {})) if (sset.has(k)) lv[k] = t.skill_levels[k]
+  const ef = {}; for (const k in (t.skill_eff || {})) if (sset.has(k)) ef[k] = t.skill_eff[k]
+  t.skill_levels = lv; t.skill_eff = ef
+  try { await roster.setTechSkills(t.id, (t.skills || []).join(','), lv, ef) } catch (e) { $q.notify({ type: 'negative', message: 'Échec sauvegarde compétences — réessaie', timeout: 1800 }) }
+}
+// ── Catalogue de compétences (réutilise TagEditor) : couleurs persistées + création/suppression ──
+// Palette élargie (incl. roses/magentas) + sélecteur HTML natif pour toute couleur.
+const TAG_PALETTE = [
+  '#6366f1', '#3b82f6', '#0ea5e9', '#06b6d4', '#14b8a6', '#10b981', '#22c55e', '#84cc16',
+  '#eab308', '#f59e0b', '#f97316', '#ef4444', '#f43f5e', '#fb7185', '#ec4899', '#f472b6',
+  '#db2777', '#d946ef', '#a855f7', '#8b5cf6', '#78716c', '#64748b', '#94a3b8', '#111827',
+]
+function hashColor (label) { let h = 0; for (const c of String(label)) h = (h * 31 + c.charCodeAt(0)) >>> 0; return TAG_PALETTE[h % TAG_PALETTE.length] }
+const customTags = ref([]) // [{label,color}] créés à la volée (localStorage)
+function saveCustomTags () { localStorage.setItem('roster-skill-tags-v1', JSON.stringify(customTags.value)) }
+function getTagColor (label) { const ct = customTags.value.find(x => x.label === label); return (ct && ct.color) || hashColor(label) }
+const tagCatalog = computed(() => {
+  const m = new Map()
+  for (const ct of customTags.value) m.set(ct.label, { name: ct.label, label: ct.label, color: ct.color || hashColor(ct.label), category: 'Custom' })
+  for (const s of [...allSkills.value, ...jobTypes.value, 'installation', 'réparation', 'support', 'fibre', 'aérien', 'épissure']) if (s && !m.has(s)) m.set(s, { name: s, label: s, color: getTagColor(s), category: jobTypes.value.includes(s) ? 'Type de job' : 'Compétence' })
+  return [...m.values()]
+})
+function onCreateRosterTag ({ label, color }) { if (label && !customTags.value.some(x => x.label === label)) { customTags.value.push({ label, color: color || hashColor(label) }); saveCustomTags() } }
+function onUpdateRosterTag ({ name, color }) { const ct = customTags.value.find(x => x.label === name); if (ct) ct.color = color; else customTags.value.push({ label: name, color }); saveCustomTags() }
+// (onDeleteRosterTag retiré : la suppression de tag passe par deleteTagGlobal du gestionnaire ci-dessous)
+// ── Gestionnaire global de compétences (tags) : renommer / supprimer PARTOUT, recolorer, voir l'usage ──
+const showTagManager = ref(false)
+const managedTags = computed(() => {
+  const labels = new Set([...techs.value.flatMap(t => t.skills || []), ...customTags.value.map(c => c.label)])
+  return [...labels].filter(Boolean).sort((a, b) => a.localeCompare(b)).map(l => ({ label: l, color: getTagColor(l), count: techs.value.filter(t => (t.skills || []).includes(l)).length }))
+})
+async function renameTagGlobal (oldL, newL) { // remplace le label sur TOUS les techs (skills + niveaux + eff) + catalogue
+  newL = String(newL || '').trim(); if (!newL || newL === oldL) return
+  for (const t of techs.value) { // SÉQUENTIEL (pas de Promise.all sur erp)
+    if (!(t.skills || []).includes(oldL)) continue
+    t.skills = t.skills.map(s => s === oldL ? newL : s)
+    if (t.skill_levels && t.skill_levels[oldL] != null) { const m = { ...t.skill_levels, [newL]: t.skill_levels[oldL] }; delete m[oldL]; t.skill_levels = m }
+    if (t.skill_eff && t.skill_eff[oldL] != null) { const m = { ...t.skill_eff, [newL]: t.skill_eff[oldL] }; delete m[oldL]; t.skill_eff = m }
+    try { await roster.setTechSkills(t.id, t.skills.join(','), t.skill_levels || {}, t.skill_eff || {}) } catch (e) { err(e) }
+  }
+  const ct = customTags.value.find(c => c.label === oldL); if (ct) ct.label = newL; else customTags.value.push({ label: newL, color: getTagColor(oldL) })
+  saveCustomTags(); await syncSkillByType({ [oldL]: newL }, null) // cohérence avec la table type de job → compétence (booking)
+  $q.notify({ type: 'positive', message: '« ' + oldL +' » renommée « ' + newL + ' » partout', timeout: 2500 })
+}
+// Propage rename/delete d'un tag vers la table booking skill_by_type (Copilote #56) → cohérence globale du filtre.
+async function syncSkillByType (renames, deletes) {
+  try {
+    const d = await roster.getPolicy(); const map = { ...((d.policy && d.policy.booking && d.policy.booking.skill_by_type) || {}) }; let changed = false
+    for (const k in map) { if (deletes && deletes.includes(map[k])) { delete map[k]; changed = true } else if (renames && renames[map[k]]) { map[k] = renames[map[k]]; changed = true } }
+    if (changed) await roster.savePolicy({ booking: { skill_by_type: map } })
+  } catch (e) { /* non bloquant */ }
+}
+async function deleteTagGlobal (tg) {
+  if (tg.count && !window.confirm('Supprimer « ' + tg.label + ' » de ' + tg.count + ' technicien(s) ?')) return
+  for (const t of techs.value) {
+    if (!(t.skills || []).includes(tg.label)) continue
+    t.skills = t.skills.filter(s => s !== tg.label)
+    if (t.skill_levels) { const m = { ...t.skill_levels }; delete m[tg.label]; t.skill_levels = m }
+    if (t.skill_eff) { const m = { ...t.skill_eff }; delete m[tg.label]; t.skill_eff = m }
+    try { await roster.setTechSkills(t.id, t.skills.join(','), t.skill_levels || {}, t.skill_eff || {}) } catch (e) { err(e) }
+  }
+  customTags.value = customTags.value.filter(c => c.label !== tg.label); saveCustomTags()
+  await syncSkillByType(null, [tg.label]) // retire aussi le tag de la table type de job → compétence (booking)
+  $q.notify({ type: 'info', message: '« ' + tg.label + ' » supprimée partout', timeout: 2000 })
+}
+function toggleSkill (sk) { const i = skillFilter.value.indexOf(sk); if (i >= 0) skillFilter.value.splice(i, 1); else skillFilter.value.push(sk) }
+function techHasSkill (t) { const sk = (t.skills || []); return !skillFilter.value.length || skillFilter.value.every(f => sk.includes(f)) } // ET : toutes les compétences cochées requises
+// Score de priorité (0 = meilleur) sur les techs qualifiés. DEUX dimensions DISTINCTES + coût :
+//  • COMPÉTENCE = niveau 1–5 dans la/les compétence(s) filtrée(s) (qualité ; haut = mieux)
+//  • VITESSE = efficiency (<1 = plus rapide = mieux) — un tech peut être très compétent MAIS lent
+//  • COÛT = coût chargé $/h. Pondéré compétence 0,4 · vitesse 0,3 · coût 0,3 (sans filtre : vitesse/coût 50/50).
+function techCompetence (t) { const f = skillFilter.value; if (!f.length) return null; const ls = f.map(s => (t.skill_levels && t.skill_levels[s]) || 1); return ls.reduce((a, b) => a + b, 0) / ls.length }
+// Vitesse retenue = efficacité PAR compétence filtrée (skillEffOf, fallback global) ; sinon efficacité globale.
+function techSpeed (t) { const f = skillFilter.value; if (!f.length) return Number(t.efficiency) || 1; const es = f.map(s => skillEffOf(t, s)); return es.reduce((a, b) => a + b, 0) / es.length }
+// PROXIMITÉ (à venir) : on gère le secteur MANUELLEMENT pour l'instant (zones). Ce hook renverra
+// plus tard une distance normalisée 0..1 (0 = sur place) job↔tech (lat/lng de la Service Location vs
+// secteur/base du tech). Tant qu'il retourne null, le score reste inchangé (poids redistribué).
+// eslint-disable-next-line no-unused-vars
+function techProximity (t /*, job */) { return null } // TODO proximité : brancher une fois lat/lng dispo
+const priorityScores = computed(() => {
+  const cands = techs.value.filter(t => !isHidden(t.id) && techHasSkill(t)); const m = {}
+  if (!cands.length) return m
+  const effs = cands.map(techSpeed); const costs = cands.map(t => Number(t.cost_h) || 0)
+  const eMin = Math.min(...effs); const eMax = Math.max(...effs); const cMin = Math.min(...costs); const cMax = Math.max(...costs)
+  const norm = (v, lo, hi) => (hi > lo ? (v - lo) / (hi - lo) : 0)
+  for (const t of cands) {
+    const eff = norm(techSpeed(t), eMin, eMax); const cost = norm(Number(t.cost_h) || 0, cMin, cMax)
+    const comp = techCompetence(t)
+    const prox = techProximity(t) // null pour l'instant → ignoré (secteur manuel)
+    let s
+    if (comp == null) s = 0.5 * eff + 0.5 * cost
+    else { const compN = (Math.min(5, Math.max(1, comp)) - 1) / 4; s = 0.4 * (1 - compN) + 0.3 * eff + 0.3 * cost } // compétence ⊕ vitesse(par-skill) ⊕ coût
+    if (prox != null) s = 0.8 * s + 0.2 * prox // quand la proximité arrivera : 20% du score (réservé)
+    m[t.id] = s
+  }
+  return m
+})
+function techScore (t) { const v = priorityScores.value[t.id]; return v == null ? 0 : v }
+function techRank (t) { if (!skillFilter.value.length) return null; const i = visibleTechs.value.findIndex(x => x.id === t.id); return i >= 0 ? i + 1 : null }
 const visibleTechs = computed(() => {
   const q = search.value.trim().toLowerCase()
-  return techs.value.filter(t => (!groupFilter.value || t.group === groupFilter.value) && (!q || (t.name || '').toLowerCase().includes(q) || (t.group || '').toLowerCase().includes(q)))
-    .slice().sort((a, b) => (a.group || '~').localeCompare(b.group || '~') || (a.name || '').localeCompare(b.name || ''))
+  const list = techs.value.filter(t => (showHidden.value || !isHidden(t.id)) && (!groupFilter.value || t.group === groupFilter.value) && techHasSkill(t) && (!q || (t.name || '').toLowerCase().includes(q) || (t.group || '').toLowerCase().includes(q)))
+  // Filtre par compétence actif → on TRIE par priorité (meilleur score d'abord) ; sinon ordre équipe/nom.
+  if (skillFilter.value.length) return list.slice().sort((a, b) => techScore(a) - techScore(b) || (a.name || '').localeCompare(b.name || ''))
+  return list.slice().sort((a, b) => (a.group || '~').localeCompare(b.group || '~') || (a.name || '').localeCompare(b.name || ''))
 })
 
 const cellsByTechDay = computed(() => { const m = {}; for (const a of assignments.value) { const t = (m[a.tech] || (m[a.tech] = {})); (t[a.date] || (t[a.date] = [])).push(a) } return m })
@@ -464,8 +1057,8 @@ const selSet = computed(() => new Set(selection.value))
 function isSelected (techId, iso) { return selSet.value.has(techId + '|' + iso) }
 
 const statByDate = computed(() => Object.fromEntries(dailyStats.value.map(s => [s.date, s])))
-function stat (iso) { return statByDate.value[iso] || {} }
-const hasOnCall = computed(() => dailyStats.value.some(s => s.on_call > 0))
+function stat (iso) { const s = statByDate.value[iso] || {}; const g = gardeCountByDate.value[iso]; return g != null ? { ...s, on_call: g } : s } // on_call = calque live (cohérent avec la grille)
+const hasOnCall = computed(() => Object.keys(gardeEffective.value).length > 0 || dailyStats.value.some(s => s.on_call > 0))
 
 // Micro-timeline 24 h par cellule : fenêtre(s) du shift = bande neutre, jobs pris = trait coloré.
 const occByTechDay = ref({})
@@ -480,13 +1073,31 @@ async function toggleAbsentCells (targets) {
   for (const k of targets) { const [tid, iso] = k.split('|'); try { await roster.setAbsence(tid, iso, 'Congé', allAbsent) } catch (e) { err(e) } }
   await reloadAbsences()
   $q.notify({ type: 'info', message: allAbsent ? 'Absence retirée' : (targets.length + ' absence(s) marquée(s)') })
+  if (!allAbsent) await checkAbsenceImpact(targets) // marquage → vérifier les jobs assignés impactés (IROPS)
+}
+function saveManualGarde () { localStorage.setItem(LS_GARDE_MANUAL, JSON.stringify(manualGarde.value)) }
+// Override manuel : ne stocke QUE les écarts vs règles (want===défaut-règle → on retire l'override) → carte minimale.
+function setGardeCell (m, key, want) { const ruleHas = !!gardeOverlay.value[key]; if (want === ruleHas) delete m[key]; else m[key] = want ? 'on' : 'off' }
+// Bascule la garde sur des cases (clic + « G » ou menu). Toutes déjà de garde → retire ; sinon ajoute.
+function toggleGardeCells (targets) {
+  if (!targets || !targets.length) return
+  const allG = targets.every(k => { const [tid, iso] = k.split('|'); return onGarde(tid, iso) })
+  const want = !allG // tout en garde ⇒ on retire ; sinon on place
+  if (want && !templates.value.some(t => t.on_call)) { $q.notify({ type: 'warning', message: 'Aucun modèle de garde (🛡️) — créez-en un dans « Types de shift »' }); return }
+  const m = { ...manualGarde.value }; let n = 0
+  for (const k of targets) { const [tid, iso] = k.split('|'); if (onGarde(tid, iso) !== want) { setGardeCell(m, k, want); n++ } }
+  manualGarde.value = m; saveManualGarde()
+  $q.notify({ type: 'info', message: want ? (n + ' garde(s) placée(s)') : (n + ' garde(s) retirée(s)') })
 }
 function hToNum (t) { if (!t) return null; const p = String(t).split(':'); return Number(p[0]) + (Number(p[1]) || 0) / 60 }
 function fmtH (h) { const hh = Math.floor(h); const mm = Math.round((h - hh) * 60); return mm ? (hh + ':' + String(mm).padStart(2, '0')) : ('' + hh) }
-// Axe ADAPTATIF : se cale sur l'amplitude réelle des shifts réguliers de la semaine (la garde n'élargit pas).
+// Axe ADAPTATIF : se cale sur l'amplitude réelle des shifts réguliers + la garde AFFICHÉE (calque),
+// pour que les quarts de garde de soir/nuit (17h–minuit, 8h–minuit) soient visibles sur l'échelle.
 const axisBounds = computed(() => {
   let lo = Infinity; let hi = -Infinity
-  for (const techId in cellsByTechDay.value) { const day = cellsByTechDay.value[techId]; for (const iso in day) for (const a of day[iso]) { const t = tplByName.value[a.shift]; if (!t || t.on_call) continue; const s = hToNum(t.start_time); const e = hToNum(t.end_time); if (s != null) lo = Math.min(lo, s); if (e != null) hi = Math.max(hi, e <= s ? 24 : e) } }
+  const grow = (t) => { if (!t) return; const s = hToNum(t.start_time); const e = hToNum(t.end_time); if (s != null) lo = Math.min(lo, s); if (e != null) hi = Math.max(hi, e <= s ? 24 : e) }
+  for (const techId in cellsByTechDay.value) { const day = cellsByTechDay.value[techId]; for (const iso in day) for (const a of day[iso]) { const t = tplByName.value[a.shift]; if (!t || t.on_call) continue; grow(t) } }
+  for (const sh of new Set(Object.values(gardeEffective.value))) grow(tplByName.value[sh]) // garde visible (calque + manuel)
   if (!isFinite(lo) || !isFinite(hi)) return { min: 7, max: 19 }
   lo = Math.max(0, Math.floor(lo)); hi = Math.min(24, Math.ceil(hi)); if (hi - lo < 4) hi = Math.min(24, lo + 4)
   return { min: lo, max: hi }
@@ -502,16 +1113,18 @@ function pos (s, e) { const b = axisBounds.value; const span = (b.max - b.min) |
 // Barre de temps PÂLE : bleu très pâle le matin → violet pâle le soir (repère discret du « quand »)
 function todColor (h) { const t = Math.max(0, Math.min(1, (h - 6) / 15)); return 'hsl(' + Math.round(210 + t * 60) + ',45%,' + Math.round(91 - t * 8) + '%)' }
 function bandGradient (s, e) { return 'linear-gradient(to right, ' + todColor(s) + ', ' + todColor(e) + ')' }
-// Bandes = chaque shift. Régulier = dégradé matin→soir ; garde (on_call) = hachuré (réserve).
+// Bandes = shifts réguliers (dégradé) + GARDE en CALQUE LIVE (calculée depuis les règles, pointillé ambre).
+// La garde n'est PAS stockée : on l'ignore dans cellsOf (on_call) et on la recalcule → temps réel, pas de désync.
+function pushBand (out, s, e, opt) { if (s == null || e == null) return; if (e <= s) { out.push({ ...pos(s, 24), ...opt }); out.push({ ...pos(0, e), ...opt }) } else out.push({ ...pos(s, e), ...opt }) }
 function cellBands (techId, iso) {
   const out = []
   for (const a of cellsOf(techId, iso)) {
-    const t = tplByName.value[a.shift]; if (!t) continue
-    const oc = !!t.on_call
+    const t = tplByName.value[a.shift]; if (!t || t.on_call) continue // garde stockée ignorée → gérée par le calque live
     const s = hToNum(t.start_time); const e = hToNum(t.end_time); if (s == null || e == null) continue
-    if (e <= s) { out.push({ ...pos(s, 24), oncall: oc, bg: oc ? null : bandGradient(s, 24) }); out.push({ ...pos(0, e), oncall: oc, bg: oc ? null : bandGradient(0, e) }) }
-    else out.push({ ...pos(s, e), oncall: oc, bg: oc ? null : bandGradient(s, e) }) // chevauche minuit
+    pushBand(out, s, e, { oncall: false, bg: bandGradient(s, e <= s ? 24 : e) })
   }
+  const gShift = gardeEffective.value[techId + '|' + iso] // garde EFFECTIVE (règles + overrides manuels « G »)
+  if (gShift) { const t = tplByName.value[gShift]; if (t) pushBand(out, hToNum(t.start_time), hToNum(t.end_time), { oncall: true }) }
   return out
 }
 // Barre de statut OPAQUE selon l'occupation : vert (peu) → orange (plein) → rouge (surbooké).
@@ -525,14 +1138,29 @@ const occCells = computed(() => {
     const cells = ct[techId][iso]; if (!cells.length) continue
     let bookableH = 0; let hasGarde = false; let hasReg = false
     for (const a of cells) { const t = tplByName.value[a.shift]; if (t && t.on_call) hasGarde = true; else { hasReg = true; bookableH += Number(a.hours) || 0 } }
-    const o = occByTechDay.value[techId + '|' + iso] || { h: 0, blocks: [] }
-    m[techId + '|' + iso] = { bookableH, usedH: Math.round((o.h || 0) * 10) / 10, hasGarde, hasReg, pct: bookableH > 0 ? Math.round((o.h || 0) / bookableH * 100) : null, blocks: o.blocks || [] }
+    const o = occByTechDay.value[techId + '|' + iso] || { h: 0, blocks: [], jobs: [] }
+    m[techId + '|' + iso] = { bookableH, usedH: Math.round((o.h || 0) * 10) / 10, hasGarde, hasReg, pct: bookableH > 0 ? Math.round((o.h || 0) / bookableH * 100) : null, blocks: o.blocks || [], jobs: o.jobs || [] }
   }
   return m
 })
 function cellOcc (techId, iso) { return occCells.value[techId + '|' + iso] || null }
+function hasReg (techId, iso) { return cellsOf(techId, iso).some(a => { const t = tplByName.value[a.shift]; return t && !t.on_call }) } // a au moins un shift régulier (garde exclue)
+function cellBlocks (techId, iso) { const o = cellOcc(techId, iso); return o ? o.blocks : [] }
+function cellPct (techId, iso) { const o = cellOcc(techId, iso); return o ? o.pct : null }
+function cellJobs (techId, iso) { const o = cellOcc(techId, iso); return o ? (o.jobs || []) : [] } // jobs du jour, déjà triés priorité→heure côté hub
+function prioColor (p) { return p === 'urgent' ? '#ef4444' : p === 'high' ? '#f59e0b' : p === 'medium' ? '#6366f1' : '#9e9e9e' }
+// Aperçu en survol de drop : occupation projetée si on dépose la sélection ici.
+function isDropTarget (techId, iso) { return dropPreview.key === techId + '|' + iso }
+function projPct (techId, iso) { const o = cellOcc(techId, iso); if (!o || !o.bookableH) return null; return Math.round((o.usedH + dropPreview.addH) / o.bookableH * 100) }
+function cellTip (techId, iso) {
+  const parts = []
+  if (hasReg(techId, iso)) parts.push(cellInterval(techId, iso))
+  const o = cellOcc(techId, iso); if (o && o.bookableH) parts.push(o.usedH + ' h occupé / ' + o.bookableH + ' h offrable (' + o.pct + ' %)')
+  const g = gardeEffective.value[techId + '|' + iso]; if (g) { const t = tplByName.value[g]; const nm = (t && t.template_name) || 'Garde'; const hrs = t ? (' ' + (t.start_time || '').slice(0, 5) + '–' + (t.end_time || '').slice(0, 5)) : ''; parts.push('🛡️ ' + nm + hrs) }
+  return parts.join(' · ')
+}
 function cellInterval (techId, iso) {
-  return cellsOf(techId, iso).map(a => { const t = tplByName.value[a.shift]; const nm = (t && t.template_name) ? t.template_name.split(' ')[0] + ' ' : ''; const tag = (t && t.on_call) ? ' (garde)' : ''; return (t && t.start_time) ? (nm + t.start_time.slice(0, 5) + '–' + (t.end_time || '').slice(0, 5) + tag) : (a.shift_name || a.shift) }).join(' + ')
+  return cellsOf(techId, iso).filter(a => { const t = tplByName.value[a.shift]; return !(t && t.on_call) }).map(a => { const t = tplByName.value[a.shift]; const nm = (t && t.template_name) ? t.template_name.split(' ')[0] + ' ' : ''; return (t && t.start_time) ? (nm + t.start_time.slice(0, 5) + '–' + (t.end_time || '').slice(0, 5)) : (a.shift_name || a.shift) }).join(' + ')
 }
 
 // coût de main-d'œuvre (coût chargé × heures)
@@ -567,7 +1195,20 @@ async function loadBase () { const tr = await roster.listTechnicians(); techs.va
 async function refreshTemplates () { const tp = await roster.listTemplates(); templates.value = tp.templates || [] }
 
 // cadence / efficacité par tech
-function effLabel (e) { const p = Math.round((e - 1) * 100); return (p < 0 ? '−' : '+') + Math.abs(p) + '%' }
+// Libellé orienté PERFORMANCE/vitesse (≠ libellé "facteur temps") : facteur 0,9 = plus rapide, 1,2 = plus lent.
+function effSuffix (e) { const d = Math.round((1 - Number(e)) * 100); if (!d) return 'normal'; return d > 0 ? ('+' + d + '% vite') : ('−' + Math.abs(d) + '% lent') }
+// RÔLE dérivé des compétences (tags) : support→casque · installation→échelle · réparation/terrain→handyman.
+const ROLE_ICON = { support: symOutlinedHeadsetMic, install: symOutlinedToolsLadder, repair: symOutlinedHandyman }
+const ROLE_LABEL = { support: 'Support / service client', install: 'Installation', repair: 'Réparation / terrain' }
+function techRole (t) {
+  const s = (t.skills || []).map(x => String(x).toLowerCase())
+  if (s.some(x => x.includes('support') || x.includes('service'))) return 'support'
+  if (s.some(x => x.includes('install'))) return 'install'
+  if (s.some(x => x.includes('répar') || x.includes('repar') || x.includes('fusion') || x.includes('terrain'))) return 'repair'
+  return null
+}
+function roleIcon (t) { const r = techRole(t); return r ? ROLE_ICON[r] : null }
+function roleLabel (t) { const r = techRole(t); return r ? ROLE_LABEL[r] : '' }
 function openTeamEditor () { editTechs.value = techs.value.map(t => ({ id: t.id, name: t.name, group: t.group, skills: (t.skills || []).join(', '), efficiency: t.efficiency || 1, salary: t.cost_salary_h || 0, charges: t.cost_charges_pct || 0, other: t.cost_other_h || 0 })); showTeamEditor.value = true }
 async function saveSkills (t) { try { await roster.setTechSkills(t.id, t.skills || ''); const tt = techs.value.find(x => x.id === t.id); if (tt) tt.skills = (t.skills || '').split(',').map(s => s.trim()).filter(Boolean); $q.notify({ type: 'positive', message: t.name + ' : compétences enregistrées' }) } catch (e) { err(e) } }
 
@@ -628,7 +1269,7 @@ async function doPublish () {
 }
 
 // demande
-function loadLS () { try { demand.value = JSON.parse(localStorage.getItem(LS_DEMAND) || '[]') } catch { demand.value = [] } try { holidays.value = JSON.parse(localStorage.getItem(LS_HOL) || '[]') } catch { holidays.value = [] } try { weekTemplates.value = JSON.parse(localStorage.getItem(LS_TPL) || '[]') } catch { weekTemplates.value = [] } try { gardeRules.value = JSON.parse(localStorage.getItem(LS_GARDE) || '[]') } catch { gardeRules.value = [] } }
+function loadLS () { try { demand.value = JSON.parse(localStorage.getItem(LS_DEMAND) || '[]') } catch { demand.value = [] } try { holidays.value = JSON.parse(localStorage.getItem(LS_HOL) || '[]') } catch { holidays.value = [] } try { weekTemplates.value = JSON.parse(localStorage.getItem(LS_TPL) || '[]') } catch { weekTemplates.value = [] } try { gardeRules.value = JSON.parse(localStorage.getItem(LS_GARDE) || '[]') } catch { gardeRules.value = [] } try { manualGarde.value = JSON.parse(localStorage.getItem(LS_GARDE_MANUAL) || '{}') } catch { manualGarde.value = {} } try { customTags.value = JSON.parse(localStorage.getItem('roster-skill-tags-v1') || '[]') } catch { customTags.value = [] } try { hiddenTechs.value = JSON.parse(localStorage.getItem('roster-hidden-techs-v1') || '[]') } catch { hiddenTechs.value = [] } }
 
 // ── Rotation de garde par département (récurrence + rotation) ────────────────
 const GARDE_EPOCH = '2026-01-05' // lundi de référence pour l'index de semaine
@@ -694,29 +1335,31 @@ function gardeSeqLabel (r) { return ruleSteps(r).map(s => ((techs.value.find(t =
 const gardeHorizon = ref(8) // nb de semaines à matérialiser (évènement récurrent)
 // Génère la garde sur un HORIZON (plusieurs semaines) et l'écrit directement (publié) → navigable semaine par semaine.
 async function applyGardeRules () {
-  if (!gardeRules.value.length) { $q.notify({ type: 'info', message: 'Aucune règle — ajoute-en une' }); return }
+  if (!gardeRules.value.length && !Object.keys(manualGarde.value).length) { $q.notify({ type: 'info', message: 'Aucune règle — ajoute-en une' }); return }
   if (dirty.value && !window.confirm('Les modifications non publiées de la grille seront rechargées. Continuer ?')) return
-  const weeks = gardeHorizon.value || 8; const wk0 = mondayISO(start.value); const list = []
-  for (let i = 0; i < weeks; i++) {
-    const ws = addDaysISO(wk0, i * 7)
-    for (let k = 0; k < 7; k++) {
-      const d = addDaysISO(ws, k); const dow = dowOf(d)
-      const weekend = (dow === 0 || dow === 6)
-      for (const rule of gardeRules.value) {
-        if (!rule.weekdays.includes(dow)) continue
-        const shiftName = (weekend && rule.shiftWeekend) ? rule.shiftWeekend : rule.shift
-        const tpl = tplByName.value[shiftName]; if (!tpl) continue
-        const id = rotationTech(rule, d); if (!id) continue
-        const t = techs.value.find(x => x.id === id)
-        list.push({ tech: id, tech_name: t ? t.name : id, date: d, shift: shiftName, hours: tpl.hours || 8, zone: tpl.zone || '' })
-      }
+  const weeks = gardeHorizon.value || 8; const wk0 = mondayISO(start.value)
+  // Construit la même garde EFFECTIVE que l'affichage, mais sur tout l'horizon : rotation par règles…
+  const horizon = new Set(); for (let i = 0; i < weeks * 7; i++) horizon.add(addDaysISO(wk0, i))
+  const map = {}
+  for (const iso of horizon) {
+    const dow = dowOf(iso); const weekend = (dow === 0 || dow === 6)
+    for (const rule of gardeRules.value) {
+      if (!rule.weekdays.includes(dow)) continue
+      const sh = (weekend && rule.shiftWeekend) ? rule.shiftWeekend : rule.shift
+      if (!tplByName.value[sh]) continue
+      const id = rotationTech(rule, iso); if (!id) continue
+      map[id + '|' + iso] = sh
     }
   }
-  const shifts = [...new Set(gardeRules.value.flatMap(r => [r.shift, r.shiftWeekend].filter(Boolean)))]
+  // … + overrides MANUELS « G » dans l'horizon (déplacements faits à la main) → publiés aussi.
+  for (const key in manualGarde.value) { const iso = key.split('|')[1]; if (!horizon.has(iso)) continue; const v = manualGarde.value[key]; if (v === 'off') delete map[key]; else if (v === 'on') { const sh = gardeShiftForDay(iso); if (sh) map[key] = sh } }
+  const list = []
+  for (const key in map) { const [id, iso] = key.split('|'); const sh = map[key]; const tpl = tplByName.value[sh]; const t = techs.value.find(x => x.id === id); list.push({ tech: id, tech_name: t ? t.name : id, date: iso, shift: sh, hours: (tpl && tpl.hours) || 8, zone: (tpl && tpl.zone) || '' }) }
+  const shifts = [...new Set([...gardeRules.value.flatMap(r => [r.shift, r.shiftWeekend].filter(Boolean)), ...Object.values(map)])]
   try {
     const r = await roster.applyGardeHorizon(wk0, weeks, list, shifts)
     showGarde.value = false; await loadWeek()
-    $q.notify({ type: 'positive', message: `Garde générée sur ${weeks} sem. : ${r.created} assignations` + (r.deleted ? ` (${r.deleted} remplacées)` : '') + '. Navigue les semaines pour voir la rotation.', timeout: 6000 })
+    $q.notify({ type: 'positive', message: `Garde publiée sur ${weeks} sem. : ${r.created} assignations` + (r.deleted ? ` (${r.deleted} remplacées)` : '') + '. La grille la montrait déjà en direct ; c\'est maintenant visible par dispatch et les techs.', timeout: 6000 })
   } catch (e) { err(e) }
 }
 function saveDemand () { localStorage.setItem(LS_DEMAND, JSON.stringify(demand.value)) }
@@ -787,7 +1430,7 @@ function applyTemplate (tm) {
 
 // édition + sélection
 const menu = reactive({ show: false, target: null, tech: null, day: null })
-const menuRange = ref({ min: 8, max: 16 }); const menuOnCall = ref(0)
+const menuRange = ref({ min: 8, max: 16 }); const quickEntry = ref('')
 function rect (sti, sdi, eti, edi) {
   const t0 = Math.min(sti, eti), t1 = Math.max(sti, eti), d0 = Math.min(sdi, edi), d1 = Math.max(sdi, edi)
   const out = []
@@ -807,33 +1450,54 @@ function onCellClick (t, d, ev, ti, di) {
   if (ev.shiftKey && anchor.value) { selectBlock(ti, di); return }
   if (ev.ctrlKey || ev.metaKey) { const k = t.id + '|' + d.iso; selection.value = selSet.value.has(k) ? selection.value.filter(x => x !== k) : [...selection.value, k]; anchor.value = { ti, di }; return }
   selection.value = []; anchor.value = { ti, di }; menu.tech = t; menu.day = d; menu.target = ev.currentTarget
-  const wr = winOf(t.id, d.iso, false); const wg = winOf(t.id, d.iso, true); const w0 = wr || wg
-  menuRange.value = w0 ? { min: w0.s, max: w0.e } : { min: 8, max: 16 }; menuOnCall.value = wr ? 0 : (wg ? 1 : 0)
+  const wr = winOf(t.id, d.iso, false); quickEntry.value = ''
+  menuRange.value = wr ? { min: wr.s, max: wr.e } : { min: 8, max: 16 }
   menu.show = true
 }
 function selectBlock (ti, di) { const a = anchor.value; const t0 = Math.min(a.ti, ti); const t1 = Math.max(a.ti, ti); const d0 = Math.min(a.di, di); const d1 = Math.max(a.di, di); const add = []; for (let i = t0; i <= t1; i++) for (let j = d0; j <= d1; j++) add.push(visibleTechs.value[i].id + '|' + dayList.value[j].iso); selection.value = [...new Set([...selection.value, ...add])] }
 function maybeSelectCol (di) { const ks = visibleTechs.value.map(t => t.id + '|' + dayList.value[di].iso); const all = ks.every(k => selSet.value.has(k)); selection.value = all ? selection.value.filter(k => !ks.includes(k)) : [...new Set([...selection.value, ...ks])] }
 function maybeSelectRow (ti) { const ks = dayList.value.map(d => visibleTechs.value[ti].id + '|' + d.iso); const all = ks.every(k => selSet.value.has(k)); selection.value = all ? selection.value.filter(k => !ks.includes(k)) : [...new Set([...selection.value, ...ks])] }
+function isRowSelected (ti) { const t = visibleTechs.value[ti]; if (!t || !dayList.value.length) return false; return dayList.value.every(d => selSet.value.has(t.id + '|' + d.iso)) } // rangée entière sélectionnée ?
 const menuCellShifts = computed(() => (menu.tech && menu.day) ? cellsOf(menu.tech.id, menu.day.iso) : [])
 const menuIsAbsent = computed(() => (menu.tech && menu.day) ? isAbsent(menu.tech.id, menu.day.iso) : false)
 function toggleAbsentMenu () { if (menu.tech && menu.day) { toggleAbsentCells([menu.tech.id + '|' + menu.day.iso]); menu.show = false } }
+const menuIsGarde = computed(() => (menu.tech && menu.day) ? onGarde(menu.tech.id, menu.day.iso) : false)
+function toggleGardeMenu () { if (menu.tech && menu.day) { toggleGardeCells([menu.tech.id + '|' + menu.day.iso]); menu.show = false } }
 function removeShiftFromMenu (a) { pushHistory(); removeShift(a.tech, a.date, a.shift) }
 function clearOne () { if (menu.tech && menu.day) { pushHistory(); clearLocal(menu.tech.id, menu.day.iso); menu.show = false } }
 // Menu : copier / coller (marche au clic, sans Cmd+clic) + ajuster l'horaire au slider
 function copyFromMenu () { if (!menu.tech || !menu.day) return; cellClipboard.value = cellsOf(menu.tech.id, menu.day.iso).map(a => a.shift); $q.notify({ type: 'positive', message: cellClipboard.value.length ? (cellClipboard.value.length + ' shift(s) copié(s) — ouvre une autre case puis Coller') : 'Case vide copiée (Coller la videra)' }) }
 function pasteFromMenu () { if (!menu.tech || !menu.day) return; pushHistory(); if (!cellClipboard.value.length) { clearLocal(menu.tech.id, menu.day.iso) } else { for (const name of cellClipboard.value) { const tpl = tplByName.value[name]; if (tpl) addShift(menu.tech.id, menu.tech.name, menu.day.iso, tpl) } } menu.show = false }
 // Applique une fenêtre [min,max] à la case du menu : trouve/crée un modèle auto-nommé puis remplace.
-async function applyWindow (min, max, oncall) {
-  if (!menu.tech || !menu.day || max <= min) return
-  const s = numToTime(min); const e = numToTime(max)
-  const nm = fmtH(min) + 'h–' + fmtH(max) + 'h' + (oncall ? ' (garde)' : '')
+// Trouve OU crée un modèle de shift régulier pour une plage horaire (réutilisé par menu + barre de sélection).
+async function ensureWindowTpl (min, max) {
+  const s = numToTime(min); const e = numToTime(max); const nm = fmtH(min) + 'h–' + fmtH(max) + 'h'
   let tpl = templates.value.find(t => t.template_name === nm)
-  if (!tpl) { try { await roster.createTemplate({ template_name: nm, start_time: s + ':00', end_time: e + ':00', hours: calcHours(s, e), color: oncall ? '#f9a825' : '#1976d2', default_required: 1, on_call: oncall ? 1 : 0 }); await refreshTemplates(); tpl = templates.value.find(t => t.template_name === nm) } catch (e2) { err(e2); return } }
+  if (!tpl) { try { await roster.createTemplate({ template_name: nm, start_time: s + ':00', end_time: e + ':00', hours: calcHours(s, e), color: '#1976d2', default_required: 1, on_call: 0 }); await refreshTemplates(); tpl = templates.value.find(t => t.template_name === nm) } catch (e2) { err(e2); return null } }
+  return tpl
+}
+async function applyWindow (min, max) {
+  if (!menu.tech || !menu.day || max <= min) return
+  const tpl = await ensureWindowTpl(min, max)
   if (tpl) { pushHistory(); setCellReplace(menu.tech.id, menu.tech.name, menu.day.iso, tpl); menu.show = false }
 }
-function quickShift (min, max) { return applyWindow(min, max, 0) }
-async function applyMenuRange () { return applyWindow(menuRange.value.min, menuRange.value.max, menuOnCall.value) }
+function quickShift (min, max) { return applyWindow(min, max) }
+async function applyMenuRange () { return applyWindow(menuRange.value.min, menuRange.value.max) }
+// Saisie rapide d'heures : « 8-17 » · « 8:30-16 » · « 830-16 » · « 85 » (=8→17, dernier chiffre en pm si ≤ début).
+function parseHM (tok) { tok = String(tok).trim().toLowerCase().replace(/h/g, ':').replace(/[^\d:]/g, ''); if (!tok) return null; if (tok.includes(':')) { const [h, m] = tok.split(':'); return Number(h) + (Number(m || 0)) / 60 } if (tok.length >= 3) return Number(tok.slice(0, -2)) + Number(tok.slice(-2)) / 60; return Number(tok) }
+function parseQuickShift (str) {
+  const s = (str || '').trim().toLowerCase(); if (!s) return null
+  if (/[-–—]|to|→|\s/.test(s)) { const p = s.split(/[-–—]|to|→|\s+/).filter(Boolean); if (p.length < 2) return null; const a = parseHM(p[0]); const b = parseHM(p[1]); return (a == null || b == null || b <= a || b > 24) ? null : { min: a, max: b } }
+  if (/^\d{2}$/.test(s)) { const a = Number(s[0]); let b = Number(s[1]); if (b <= a) b += 12; return (b <= a || b > 24) ? null : { min: a, max: b } } // « 85 » = 8→17
+  return null
+}
+function applyQuick () { const r = parseQuickShift(quickEntry.value); if (!r) { $q.notify({ type: 'warning', message: 'Format : 8-17 · 8:30-16 · 85' }); return } quickEntry.value = ''; applyWindow(r.min, r.max) }
 function assignBulk (tpl) { pushHistory(); for (const k of selection.value) { const [tid, iso] = k.split('|'); const t = techs.value.find(x => x.id === tid); addShift(tid, t ? t.name : tid, iso, tpl) } selection.value = [] }
+// ── Barre de sélection : mêmes 4 actions que le menu de cellule ──
+async function bulkWindow (min, max) { if (!selection.value.length) return; const tpl = await ensureWindowTpl(min, max); if (tpl) assignBulk(tpl) }
+function bulkQuick () { const r = parseQuickShift(quickEntry.value); if (!r) { $q.notify({ type: 'warning', message: 'Format : 8-17 · 8:30-16 · 85' }); return } quickEntry.value = ''; bulkWindow(r.min, r.max) }
+function bulkGarde () { const t = selection.value.slice(); toggleGardeCells(t); selection.value = [] }
+function bulkAbsent () { const t = selection.value.slice(); toggleAbsentCells(t); selection.value = [] }
 function clearBulk () { pushHistory(); for (const k of selection.value) { const [tid, iso] = k.split('|'); clearLocal(tid, iso) } selection.value = [] }
 // Copier-coller une case (bâtir l'horaire vite) : copie les shifts de la 1re case sélectionnée → colle dans les autres
 const cellClipboard = ref([])
@@ -873,19 +1537,57 @@ function onKey (e) {
     const targets = selection.value.length ? selection.value.slice() : [activeCell.value.id + '|' + activeCell.value.iso]
     toggleAbsentCells(targets); if (selection.value.length) selection.value = []
   }
+  if (k === 'g' && !e.altKey && !e.ctrlKey && !e.metaKey && (selection.value.length || activeCell.value)) { // « G » = bascule garde (manuel)
+    e.preventDefault(); menu.show = false
+    const targets = selection.value.length ? selection.value.slice() : [activeCell.value.id + '|' + activeCell.value.iso]
+    toggleGardeCells(targets); if (selection.value.length) selection.value = []
+  }
 }
 function onUnload (e) { if (dirty.value) { e.preventDefault(); e.returnValue = '' } }
-onMounted(async () => { loadLS(); document.addEventListener('keydown', onKey); document.addEventListener('mouseup', onUp); window.addEventListener('beforeunload', onUnload); try { await loadBase() } catch (e) { err(e) } await loadWeek() })
+onMounted(async () => { loadLS(); document.addEventListener('keydown', onKey); document.addEventListener('mouseup', onUp); window.addEventListener('beforeunload', onUnload); try { await loadBase() } catch (e) { err(e) } await loadWeek(); try { const m = await roster.bookMeta(); jobTypes.value = m.service_types || [] } catch (e) { /* catégories de job pour suggestions */ } })
 onUnmounted(() => { document.removeEventListener('keydown', onKey); document.removeEventListener('mouseup', onUp); window.removeEventListener('beforeunload', onUnload) })
 onBeforeRouteLeave(() => { if (dirty.value && !window.confirm(DIRTY_MSG)) return false })
 </script>
 
 <style scoped>
+/* Barre d'actions de sélection : flottante (fixed) → hors flux, aucune incidence sur la hauteur de la grille. */
+.sel-actions { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 4000; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; max-width: 94vw; padding: 6px 12px; background: #e0f2f1; color: #00695c; border: 1px solid #4db6ac; border-radius: 9px; box-shadow: 0 6px 22px rgba(0,0,0,.20); }
+.garde-editor { background: #faf8f6; border: 1px solid #e8e0d8; } /* sous-panneau éditeur de garde */
+/* Panneau flottant « jobs à assigner » (déplaçable, glisser-déposer) */
+.assign-panel { position: fixed; z-index: 5000; width: 320px; max-height: 72vh; background: #fff; border: 1px solid #cfd8dc; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.24); display: flex; flex-direction: column; }
+.assign-hdr { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: #5e35b1; color: #fff; border-radius: 8px 8px 0 0; cursor: move; font-weight: 600; font-size: 13px; user-select: none; }
+.assign-body { overflow: auto; padding: 5px; }
+.assign-grp { margin-bottom: 6px; border-radius: 7px; padding: 2px; }
+.assign-grp.grp-hl { background: #ede7f6; box-shadow: inset 0 0 0 1px #b39ddb; } /* groupe lié surligné dès qu'un membre est coché */
+.assign-grp-hdr { font-size: 10px; font-weight: 700; color: #5e35b1; padding: 2px 6px; cursor: pointer; display: flex; align-items: center; gap: 3px; }
+.assign-grp-hdr:hover { text-decoration: underline; }
+.assign-job { border: 1px solid #e0e0e0; border-radius: 6px; padding: 3px 7px; margin: 3px 0; cursor: grab; background: #fafafa; font-size: 12px; }
+.assign-job:hover { border-color: #5e35b1; background: #f3e9fb; }
+.assign-job:active { cursor: grabbing; }
+.assign-job.sel { border-color: #00897b; background: #e0f2f1; box-shadow: inset 0 0 0 1px #00897b; } /* sélectionné = à dispatcher */
+.assign-job.child { margin-left: 14px; border-left: 3px solid #b39ddb; }
+.assign-job.blocked { opacity: .65; }
+.assign-sub { font-size: 10px; color: #888; margin-top: 1px; }
+.assign-skill { display: inline-block; color: #fff; border-radius: 6px; padding: 0 5px; font-size: 9px; font-weight: 600; margin-right: 3px; }
+.assign-foot { border-top: 1px solid #e0e0e0; padding: 6px 9px; font-size: 11px; color: #555; line-height: 1.45; background: #fafafa; border-radius: 0 0 8px 8px; }
+.assign-job.dragging { opacity: .4; } /* source estompée pendant le glissé (le fantôme compact suit le curseur) */
+/* Dialogue Timeline d'une ressource */
+.tldlg-day { padding: 7px 0; border-bottom: 1px solid #eee; }
+.tldlg-bar { position: relative; height: 18px; background: #f1f3f5; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
+.tldlg-tick { position: absolute; top: 1px; font-size: 8px; color: #90a4ae; transform: translateX(-50%); pointer-events: none; }
+.tldlg-job { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 2px 2px 4px; border-radius: 4px; }
+.tldlg-job:hover { background: #f5f5f5; }
+.tldlg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
+.tldlg-time { font-variant-numeric: tabular-nums; color: #555; flex: 0 0 auto; min-width: 34px; }
+.cell.drop-hover { outline: 2px dashed #5e35b1; outline-offset: -2px; background: #f3e9fb; }
+.tl-proj { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; opacity: .42; outline: 1px dashed rgba(0,0,0,.35); outline-offset: -1px; } /* aperçu occupation projetée (fantôme) */
+.drop-badge { position: absolute; top: -8px; right: 2px; z-index: 6; background: #5e35b1; color: #fff; font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 5px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none; }
+.drop-badge.over { background: #e53935; } /* projection ≥ 100% = surbooké */
 .grid-wrap { overflow-x: auto; border: 1px solid #e0e0e0; border-radius: 6px; max-width: 100%; }
 .roster-grid { border-collapse: collapse; font-size: 12px; width: 100%; user-select: none; -webkit-user-select: none; }
 .roster-grid th, .roster-grid td { border: 1px solid #eee; text-align: center; padding: 2px; }
 .roster-grid thead th { position: sticky; top: 0; background: #fafafa; z-index: 1; }
-.tech-col { position: sticky; left: 0; background: #fff; text-align: left !important; white-space: nowrap; padding: 2px 8px !important; min-width: 195px; z-index: 2; }
+.tech-col { position: sticky; left: 0; background: #fff; text-align: left !important; white-space: nowrap; padding: 2px 8px !important; min-width: 240px; max-width: 300px; z-index: 2; }
 .roster-grid thead .tech-col { z-index: 3; }
 .roster-grid tbody tr:hover td { background: #f0f7ff; }
 .roster-grid tbody tr:hover .tech-col { background: #f0f7ff; }
@@ -895,9 +1597,23 @@ th.clk, td.clk { cursor: pointer; }
 .dow { font-size: 10px; color: #999; text-transform: uppercase; }
 .dnum { font-size: 11px; font-weight: 600; }
 .grp { font-size: 9px; color: #999; background: #f0f0f0; border-radius: 3px; padding: 0 4px; margin-left: 2px; }
+.role-ic { color: #546e7a; vertical-align: middle; margin-right: 3px; display: inline-flex; } /* icône de rôle monochrome (Lucide) */
+.tech-row { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0; }
+.tech-name { white-space: nowrap; flex-shrink: 0; }
+.th { white-space: nowrap; flex-shrink: 0; }
+.tech-row > .q-btn, .tech-row > .q-badge, .tech-row > .role-ic, .tech-row > .grp, .tech-row > .eff { flex-shrink: 0; }
+.tech-skills { display: flex; align-items: center; gap: 2px; overflow: hidden; flex: 1 1 auto; min-width: 0; } /* chips inline, débordement clippé */
+.skill-edit-btn { flex-shrink: 0; }
+.skill-chip { font-size: 10px; line-height: 15px; height: 15px; padding: 0 5px; border-radius: 8px; color: #fff; font-weight: 600; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; }
+.chip-lvl { display: inline-flex; align-items: center; justify-content: center; min-width: 13px; height: 13px; padding: 0 1px; border-radius: 50%; background: rgba(0,0,0,.32); font-size: 8px; font-weight: 800; box-shadow: 0 0 0 1.5px #fff; margin-left: 1px; } /* niveau 1–5 · contour blanc pour détacher la couleur (vitesse) */
+.add-skill-hint { font-size: 10px; color: #9e9e9e; font-style: italic; } /* invite quand aucune compétence */
+.hide-eye { flex-shrink: 0; opacity: .45; } .tech-row:hover .hide-eye { opacity: 1; } /* œil masquer (discret, visible au survol) */
+tr.res-hidden { opacity: .5; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f0f0f0 6px, #f0f0f0 12px); } /* ressource masquée affichée en grisé */
+tr.res-hidden .hide-eye { opacity: 1; }
+.tech-name.clk:hover { text-decoration: underline; }
 .hol-toggle { font-size: 9px; color: #ccc; cursor: pointer; border: 1px solid #eee; border-radius: 3px; width: 14px; margin: 1px auto 0; line-height: 12px; }
 .hol-toggle.on { background: #ff9800; color: #fff; border-color: #ff9800; }
-.cell { cursor: pointer; min-height: 24px; }
+.cell { cursor: pointer; min-height: 24px; position: relative; }
 .cell:hover { outline: 2px solid #1976d2; outline-offset: -2px; }
 .cell.sel { outline: 2px solid #00897b; outline-offset: -2px; background: #e0f2f1; }
 .cell.dirty { box-shadow: inset 0 0 0 2px #ff9800; }
diff --git a/apps/ops/src/pages/RendezVousPage.vue b/apps/ops/src/pages/RendezVousPage.vue
index c649b75..d34f759 100644
--- a/apps/ops/src/pages/RendezVousPage.vue
+++ b/apps/ops/src/pages/RendezVousPage.vue
@@ -20,8 +20,9 @@
           </q-item-label>
           <q-item v-for="j in filteredJobs" :key="j.name" clickable :active="sel && sel.name === j.name" active-class="bg-blue-1" @click="selectJob(j)">
             <q-item-section>
-              <q-item-label class="text-weight-medium">{{ j.customer_name || j.name }}</q-item-label>
-              <q-item-label caption>{{ j.service_location || '—' }} · {{ j.duration_h || 1 }}h</q-item-label>
+              <q-item-label class="text-weight-medium">{{ jobTitle(j) }}</q-item-label>
+              <q-item-label caption lines="1"><MapPin :size="12" class="q-mr-xs" style="vertical-align:middle;color:#546e7a" />{{ jobLoc(j) }} · {{ fmtDur(j.duration_h) }}</q-item-label>
+              <q-item-label caption class="text-grey-5" style="font-size:10px">{{ j.name }}</q-item-label>
             </q-item-section>
             <q-item-section side>
               <q-badge v-if="view === 'reschedule' || j.booking_status === 'À reporter'" color="red" label="à reporter" />
@@ -38,8 +39,9 @@
         <q-card v-else flat bordered>
           <q-card-section class="q-pb-none row items-start">
             <div class="col">
-              <div class="text-subtitle1 text-weight-bold">{{ sel.customer_name || sel.name }}</div>
-              <div class="text-caption text-grey-7">{{ sel.service_location || '—' }} · durée {{ params.duration }}h · tech actuel : {{ sel.assigned_tech || '—' }}</div>
+              <div class="text-subtitle1 text-weight-bold">{{ jobTitle(sel) }}</div>
+              <div class="text-caption text-grey-7"><MapPin :size="13" style="vertical-align:middle;color:#546e7a" /> {{ jobLoc(sel) }} · durée {{ fmtDur(params.duration) }} · tech actuel : {{ sel.assigned_tech || '—' }}</div>
+              <div class="text-caption text-grey-5" style="font-size:10px">{{ sel.name }}</div>
             </div>
             <q-btn flat dense no-caps icon="link" label="Lien client" color="primary" @click="genLink(sel)" />
           </q-card-section>
@@ -53,7 +55,7 @@
           </q-card-section>
 
           <q-card-section class="row q-col-gutter-sm items-end">
-            <q-input dense outlined v-model="params.skill" label="Compétence requise" style="width:150px" />
+            <q-input dense outlined v-model="params.skill" label="Compétence requise" style="width:160px" :hint="sel.service_type ? ('auto : ' + sel.service_type) : 'tag (vide = tous)'"><template v-if="params.skill" #append><q-icon name="sell" size="16px" color="teal" /></template></q-input>
             <q-input dense outlined v-model="params.zone" label="Zone" style="width:140px" />
             <q-input dense outlined type="number" step="0.5" v-model.number="params.duration" label="Durée (h)" style="width:100px" />
             <q-input dense outlined type="date" v-model="params.start" label="À partir du" style="width:160px" />
@@ -121,6 +123,7 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
+import { MapPin } from 'lucide-vue-next' // pin monochrome outline (style menu Dispatch)
 import { useQuasar } from 'quasar'
 import * as roster from 'src/api/roster'
 
@@ -132,7 +135,11 @@ const loadingJobs = ref(false)
 const sel = ref(null)
 const mode = ref('propose')
 const params = reactive({ skill: '', zone: '', duration: 1, start: todayISO(), days: 14 })
-const prefs = ref([{ date: '', start: '' }, { date: '', start: '' }, { date: '', start: '' }])
+// Les 3 dispos sont PRÉ-REMPLIES avec des valeurs réelles (et non des défauts navigateur vides) →
+// « Vérifier » fonctionne d'emblée ; l'agent ajuste selon ce que dit le client.
+function plusDaysISO (iso, n) { const a = iso.split('-').map(Number); const d = new Date(Date.UTC(a[0], a[1] - 1, a[2])); d.setUTCDate(d.getUTCDate() + n); return d.toISOString().slice(0, 10) }
+function defaultPrefs () { const d1 = plusDaysISO(todayISO(), 1); const d2x = plusDaysISO(todayISO(), 2); return [{ date: d1, start: '09:00' }, { date: d1, start: '13:00' }, { date: d2x, start: '09:00' }] }
+const prefs = ref(defaultPrefs())
 const fit = ref(null); const fitting = ref(false)
 const slots = ref([]); const chosen = ref(null); const finding = ref(false); const searched = ref(false)
 const confirming = ref(false); const smsing = ref(false)
@@ -145,6 +152,10 @@ const MO = ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août',
 function d2 (iso) { const a = iso.split('-').map(Number); return new Date(Date.UTC(a[0], a[1] - 1, a[2])) }
 function frDate (iso) { if (!iso) return ''; return FR_DOW[d2(iso).getUTCDay()] + ' ' + iso.slice(8) + '/' + iso.slice(5, 7) }
 function dayLabel (iso) { const dt = d2(iso); return FR_DOW_FULL[dt.getUTCDay()] + ' ' + dt.getUTCDate() + ' ' + MO[dt.getUTCMonth()] }
+// Titre LISIBLE d'un job : type de service + client (l'ID DJ-… est secondaire). Lieu = adresse lisible si dispo.
+function jobTitle (j) { if (!j) return ''; const t = (j.service_type || '').trim(); const c = (j.customer_name || '').trim(); if (t) return c ? (t + ' — ' + c) : t; return c || j.location_label || j.name }
+function jobLoc (j) { return (j && (j.location_label || j.service_location)) || '—' }
+function fmtDur (h) { h = Number(h) || 0; const H = Math.floor(h); const M = Math.round((h - H) * 60); return M ? (H + 'h' + String(M).padStart(2, '0')) : (H + 'h') }
 function wkMon (iso) { const dt = d2(iso); const off = (dt.getUTCDay() + 6) % 7; dt.setUTCDate(dt.getUTCDate() - off); return dt.toISOString().slice(0, 10) }
 function wkLabel (m) { const a = d2(m); const b = new Date(a); b.setUTCDate(b.getUTCDate() + 6); return 'Semaine du ' + a.getUTCDate() + ' ' + MO[a.getUTCMonth()] + ' – ' + b.getUTCDate() + ' ' + MO[b.getUTCMonth()] }
 
@@ -175,8 +186,8 @@ async function loadJobs () {
   } catch (e) { err(e) } finally { loadingJobs.value = false }
 }
 function onViewChange () { sel.value = null; resetPanel() }
-function resetPanel () { fit.value = null; slots.value = []; chosen.value = null; searched.value = false }
-async function selectJob (j) { await releaseChosen(); sel.value = j; params.duration = Number(j.duration_h) || 1; resetPanel() }
+function resetPanel () { fit.value = null; slots.value = []; chosen.value = null; searched.value = false; prefs.value = defaultPrefs() }
+async function selectJob (j) { await releaseChosen(); sel.value = j; params.duration = Number(j.duration_h) || 1; params.skill = j.required_skill || ''; resetPanel() } // compétence requise dérivée du type de job
 
 async function doFit () {
   const valid = prefs.value.filter(p => p.date && p.start)
diff --git a/docs/features/README.md b/docs/features/README.md
index dc10602..c5a283b 100644
--- a/docs/features/README.md
+++ b/docs/features/README.md
@@ -7,6 +7,7 @@ modes. Open the one that matches the feature you're changing.
 | Doc | Owns |
 |---|---|
 | [dispatch.md](dispatch.md) | Ops dispatch board: drag-and-drop scheduling, tech assignment with skill tags, travel-time optimization, magic-link SMS issuance, live SSE updates |
+| [roster.md](roster.md) | Planification (Roster AI): grille hebdo ressources × jours, garde live, solveur OR-Tools, scoring priorité (maîtrise⊕vitesse⊕coût), panneau « jobs à assigner » (drag-drop + aperçu occupation), timeline ressource, dialogues d'impact, booking roster-aware |
 | [tech-mobile.md](tech-mobile.md) | Field tech app (three surfaces: SSR `/t/{jwt}`, transitional `apps/field/`, unified `/ops/#/j/*`). Native camera → Gemini scanner, equipment install/remove, JWT auth, offline queue |
 | [customer-portal.md](customer-portal.md) | Passwordless customer self-service at `portal.gigafibre.ca`: magic-link email (24h JWT), invoice + ticket view, Stripe-linked payment flows |
 | [billing-payments.md](billing-payments.md) | Stripe integration (Checkout, Billing Portal, webhook), subscription lifecycle, invoice generation, payment reconciliation, PPA (Plan de paiement automatique), Klarna BNPL |
diff --git a/docs/features/roster.md b/docs/features/roster.md
new file mode 100644
index 0000000..e0ee7c9
--- /dev/null
+++ b/docs/features/roster.md
@@ -0,0 +1,86 @@
+# Planification (Roster AI) & assignation dispatch — Handoff dev
+
+Grille hebdomadaire **ressources × jours** pour planifier les quarts, la garde, et
+**prendre en charge les jobs dispatch** (glisser-déposer, timeline, occupation).
+Aucune paie : on planifie, on approuve, on assigne.
+
+## Surfaces
+
+| Couche | Fichier | Rôle |
+|---|---|---|
+| UI Ops | `apps/ops/src/pages/PlanificationPage.vue` | Grille, garde, panneau « jobs à assigner », timeline ressource, dialogues d'impact |
+| Client API | `apps/ops/src/api/roster.js` | Wrappers `fetch` vers `targo-hub /roster/*` |
+| Backend | `services/targo-hub/lib/roster.js` | Endpoints, accès ERPNext, moteur de créneaux, orchestration solveur |
+| Copilote | `services/targo-hub/lib/roster-assistant.js` | Actions d'écriture en langage naturel (réassign / SMS / escalade) |
+| Solveur | `services/roster-solver/` (conteneur OR-Tools, réseau `erpnext_erpnext:8090`) | Propose un horaire (ne publie jamais) |
+| RDV client | `apps/ops/src/pages/RendezVousPage.vue`, portail Lovable | Prise de rendez-vous (booking) roster-aware |
+
+## Doctypes ERPNext (site facturation `erp.gigafibre.ca`)
+
+- **Dispatch Technician** — ressources. Custom fields clés (cf. `dispatch-app/frappe-setup/setup_dispatch_custom_fields.py`) :
+  `efficiency` (cadence globale), `skills` (CSV), `skill_levels` (JSON `{compétence:1-5}` = maîtrise),
+  `skill_eff` (JSON `{compétence:facteur}` = vitesse par compétence), `cost_salary_h`/`cost_charges_pct`/`cost_other_h`.
+- **Shift Template** — quarts. `on_call` (garde : capacité de réserve, **jamais** offerte au booking).
+- **Shift Requirement** — besoins de couverture (« dispo vs requis »).
+- **Shift Assignment** — assignations (statut Proposé/Publié). Le solveur propose, `/publish` écrit.
+- **Tech Availability** — congés/absences (Approuvé). `long_term` = à remplacer (≠ vacances ponctuelles).
+- **Dispatch Job** — les tickets. Champs utilisés ici : `assigned_tech`, `scheduled_date`, `start_time`,
+  `duration_h`, `priority`, `parent_job`/`depends_on`/`step_order` (groupes), `booking_*`, `required_skill`.
+
+## Concepts UI (PlanificationPage.vue — voir la carte des sections en tête de `<script setup>`)
+
+- **Garde LIVE** : jamais matérialisée. `gardeOverlay` (règles de rotation) ⊕ `manualGarde` (touche **G**, localStorage)
+  → `gardeEffective`. Recalculée à chaque rendu ⇒ pas de désync. La garde est **exclue** des heures travaillées et du coût.
+- **Filtre compétences (ET)** : `skillFilter` — un tech n'apparaît que s'il a **toutes** les compétences cochées.
+- **Score de priorité** : `priorityScores` = maîtrise (`techCompetence` 1-5) ⊕ vitesse (`techSpeed`, efficacité par
+  compétence) ⊕ coût. Hook **proximité** (`techProximity`) câblé mais **neutre** (renvoie `null`) — secteur géré
+  manuellement via les zones ; réservé à 20 % du score quand la géoloc arrivera.
+- **Occupation** : `occCells` combine la fenêtre de shift (`bookableH`) et les jobs (`occByTechDay` du hub) →
+  `usedH`, `pct`, `blocks` (barres colorées), `jobs` (liste triée priorité→heure). ⚠️ **un bloc n'apparaît que si le job
+  a un `start_time`** (sinon il compte dans `usedH` mais reste invisible — d'où le premier-trou-libre, voir hub).
+- **Timeline ressource** : `openTimeline(t)` → dialogue listant les jobs de la semaine visible (barre + liste priorisée).
+  0 appel réseau (réutilise les helpers de cellule). Lien « Dispatch » vers le tableau (`/dispatch`).
+- **Panneau « jobs à assigner »** (Outils) : flottant, déplaçable. Multi-sélection (cases), groupes parent-enfant
+  surlignés, heuristique **terrain vs à distance** (`jobIsOnsite` : activation/config/netadmin = à distance → pré-décoché),
+  pré-total d'heures, **glisser la sélection** sur une case → assignation **séquentielle**, **aperçu d'occupation projetée**
+  (barre fantôme + badge `+Xh → Y%`) au survol.
+- **Dialogues d'impact** : retirer une compétence ou poser une absence sur un tech avec jobs assignés → liste des jobs
+  affectés + **candidats classés** (qualifiés + libres au créneau) ou « À recontacter ».
+
+## Endpoints hub `/roster/*` (extrait)
+
+| Méthode | Chemin | Usage |
+|---|---|---|
+| GET | `/technicians` `/templates` `/requirements` `/assignments` `/coverage` `/stats` `/occupancy` `/absences` | Lecture grille |
+| POST | `/generate` | Solveur OR-Tools (propose) |
+| POST | `/publish-week` | Écrit les Shift Assignment (diff : crée/retire seulement le delta) |
+| POST | `/technician/:id/skills` `/pause` `/efficiency` `/cost` | Édition ressource |
+| GET | `/unassigned-jobs` | Jobs ouverts/On Hold sans tech (+ groupe/dépendances) pour le panneau |
+| POST | `/assign-job` | Assigne un job (pose `start_time` **premier-trou-libre** + garantit `duration_h`) |
+| POST | `/backfill-start-times` | Pose un `start_time` sur les jobs **déjà** assignés sans heure (idempotent) |
+| GET | `/skill-impact` `/absence-impact` `/job-candidates` | Données des dialogues d'impact |
+| POST | `/skill-impact/redistribute` | `plan` (explicite) / `auto` / `requeue` |
+| GET/POST | `/book/slots` `/book/fit` `/book/confirm` `/book/hold` `/book/meta` `/policy` | Prise de RDV (booking) |
+
+Moteur de créneaux partagé : `loadBookingData` → `techGaps` (trous libres) → `firstFitStart` (premier trou pour une durée,
+réutilisé par `assign-job` **et** `backfill-start-times`) → `bookingSlots` / `fitBooking`.
+
+## Pièges (à NE PAS réintroduire)
+
+- **frappe_pg ne supporte PAS la concurrence** : `erp.list`/écritures en **séquentiel**, jamais `Promise.all`
+  (sous charge concurrente la connexion PG se réinitialise → « load fail »). Les sauvegardes d'édition sont **debouncées**.
+- **Occupation invisible sans `start_time`** : un job assigné sans heure ne dessine aucun bloc. `assign-job` pose donc
+  toujours une heure (premier-trou-libre). Le backfill rattrape l'historique. Si le tech n'a **aucun quart** ce jour-là,
+  on ne peut pas placer de bloc (écart de planification, pas un bug).
+- **Scheduler ERPNext en pause** : la facturation legacy reste autoritaire jusqu'au cutover.
+- **Déploiement** : front via `apps/ops/deploy.sh` (`DEPLOY_BASE=/ops/ quasar build` + tar/scp → `/opt/ops-app/`) ;
+  hub via `scp lib/roster.js → /opt/targo-hub/lib/` + `docker restart targo-hub`. Custom fields via le script frappe-setup.
+
+## TODO / dette
+
+- Bloquer réellement (≠ 🔒 visuel) le dépôt d'un job « On Hold » avant son prérequis.
+- Brancher la **proximité** (lat/lng Service Location ↔ base/secteur du tech) dans `techProximity`.
+- Deep-link Dispatch filtré tech/date (DispatchPage ne lit pas encore `route.query`).
+- Apprentissage IA compétence ↔ type de cas (historique des jobs).
+- **Refactor** : `PlanificationPage.vue` (~1,5k lignes) gagnerait à extraire des composables
+  (`useGarde`, `useOccupancy`, `useAssignPanel`, `useSkillEditor`) — non fait (risque sur fichier prod).
diff --git a/services/targo-hub/lib/roster-assistant.js b/services/targo-hub/lib/roster-assistant.js
index a1d6a50..ff82f82 100644
--- a/services/targo-hub/lib/roster-assistant.js
+++ b/services/targo-hub/lib/roster-assistant.js
@@ -32,7 +32,9 @@ const DEFAULT_POLICY = {
   sms_max: 1,
   escalation: 'queue_sms', // file Ops + SMS superviseur
   // #56 — créneaux offerts au booking (page /book + vue agent). Lu par lib/roster.js getBookingPolicy().
-  booking: { lead_hours: 24, day_start: 8, day_end: 18, days_offered: [1, 2, 3, 4, 5], horizon_days: 21, max_per_day: 0, hold_minutes: 10 },
+  // skill_by_type : table type de job (service_type) → compétence requise. Le client ne voit que les
+  // créneaux des techs qui ont ce tag. '' = aucun tag requis (ex. ajout TV/borne WiFi → n'importe qui).
+  booking: { lead_hours: 24, day_start: 8, day_end: 18, days_offered: [1, 2, 3, 4, 5], horizon_days: 21, max_per_day: 0, hold_minutes: 10, skill_by_type: {} },
 }
 const POLICY_OPTIONS = {
   reschedule: [
diff --git a/services/targo-hub/lib/roster.js b/services/targo-hub/lib/roster.js
index 0db23f8..1aaf15e 100644
--- a/services/targo-hub/lib/roster.js
+++ b/services/targo-hub/lib/roster.js
@@ -96,7 +96,7 @@ async function fetchTechnicians () {
     filters: [['resource_type', '=', 'human']],
     fields: ['name', 'technician_id', 'full_name', 'status', 'color_hex', 'tech_group', 'efficiency', 'skills',
       'cost_salary_h', 'cost_charges_pct', 'cost_other_h',
-      'absence_from', 'absence_until', 'employee', 'phone', '_user_tags'],
+      'absence_from', 'absence_until', 'employee', 'phone', '_user_tags', 'skill_levels', 'skill_eff'],
     limit: 500,
   })
   return rows.map(t => ({
@@ -113,6 +113,8 @@ async function fetchTechnicians () {
     phone: t.phone,
     employee: t.employee,
     skills: splitCsv(t.skills || t._user_tags),  // champ skills (ou tags Frappe)
+    skill_levels: (() => { try { return JSON.parse(t.skill_levels || '{}') } catch { return {} } })(), // {compétence: niveau 1–5}
+    skill_eff: (() => { try { return JSON.parse(t.skill_eff || '{}') } catch { return {} } })(), // {compétence: facteur d'efficacité (vitesse)}
     absence_from: t.absence_from,
     absence_until: t.absence_until,
   }))
@@ -262,10 +264,30 @@ function hToTime (h) { const hh = Math.floor(h); const mm = Math.round((h - hh)
 // Persistée dans le même fichier que la politique de reprise (sous-objet `booking`),
 // éditée via /roster/policy (lib/roster-assistant.js). Appliquée ici à TOUTE source
 // de créneaux (page /book, vue agent, fit) → comportement cohérent partout.
-const BOOKING_DEFAULTS = { lead_hours: 24, day_start: 8, day_end: 18, days_offered: [1, 2, 3, 4, 5], horizon_days: 21, max_per_day: 0, hold_minutes: 10 }
+const BOOKING_DEFAULTS = { lead_hours: 24, day_start: 8, day_end: 18, days_offered: [1, 2, 3, 4, 5], horizon_days: 21, max_per_day: 0, hold_minutes: 10, skill_by_type: {} }
 function getBookingPolicy () {
   try { const p = JSON.parse(fs.readFileSync(POLICY_FILE, 'utf8')); return { ...BOOKING_DEFAULTS, ...(p.booking || {}) } } catch { return { ...BOOKING_DEFAULTS } }
 }
+// Compétence REQUISE pour un job → seuls les techs qui l'ont produisent des créneaux (techGaps filtre).
+// Un ajout TV/borne WiFi peut mapper à '' (n'importe qui) ; une installation/réparation à 'installateur'.
+// Source : champ explicite Dispatch Job.required_skill, sinon table service_type → tag (politique booking).
+function skillForJob (job) {
+  if (!job) return ''
+  if (job.required_skill) return String(job.required_skill).trim()
+  const map = getBookingPolicy().skill_by_type || {}
+  return String(map[job.service_type] || '').trim()
+}
+// Enrichit des jobs avec une adresse LISIBLE (le champ service_location est un code « LOC-… »).
+// Batch : 1 seule requête sur Service Location pour tous les codes distincts.
+async function attachLocations (jobs) {
+  const codes = [...new Set((jobs || []).map(j => j.service_location).filter(Boolean))]
+  if (!codes.length) return jobs
+  let locs = []
+  try { locs = await erp.list('Service Location', { filters: [['name', 'in', codes]], fields: ['name', 'address_line', 'city', 'location_name'], limit: codes.length + 10 }) } catch (e) { return jobs }
+  const m = {}; for (const l of locs) m[l.name] = l
+  for (const j of jobs) { const l = m[j.service_location]; if (l) j.location_label = [l.address_line, l.city].filter(Boolean).join(', ') || l.location_name || '' }
+  return jobs
+}
 function nowMs () { return new Date().getTime() }
 // Holds en mémoire : quand un client/agent sélectionne une fenêtre, on la réserve
 // quelques minutes pour éviter qu'un autre la prenne pendant la confirmation.
@@ -320,6 +342,18 @@ function techGaps (a, d, skill, zone) {
   return { tech: t, gaps }
 }
 
+// Premier créneau libre (en heures, ex 8.5) d'un tech un jour donné pour une durée `dur`.
+// Aucun trou assez large → empile après le dernier bloc (surbook visible) ; pas de shift régulier → null.
+// Partagé par /roster/assign-job (drag-drop) et /roster/backfill-start-times.
+function firstFitStart (d, techId, date, dur) {
+  const mine = d.asgs.filter(a => a.tech === techId && a.date === date && !(d.tplByName[a.shift] && d.tplByName[a.shift].on_call))
+  if (!mine.length) return null
+  let best = null
+  for (const a of mine) { const g = techGaps(a, d, null, null); if (!g) continue; for (const [gs, ge] of g.gaps) if (ge - gs >= dur - 1e-6) { if (best == null || gs < best) best = gs; break } }
+  if (best == null) { const tpl = d.tplByName[mine[0].shift]; const sh = timeToH(tpl && tpl.start_time) || 8; const day = (d.booked[techId + '|' + date] || []).slice().sort((x, y) => x.e - y.e); best = day.length ? day[day.length - 1].e : sh }
+  return best
+}
+
 async function bookingSlots ({ skill, zone, duration = 1, start, days = 7, limit = 24, aggregate = false, ignorePolicy = false } = {}) {
   const dur = Number(duration) || 1
   const pol = getBookingPolicy()
@@ -381,13 +415,14 @@ async function fitBooking ({ skill, zone, duration = 1, prefs = [] } = {}) {
 function todayET () { return new Date().toLocaleDateString('en-CA', { timeZone: 'America/Toronto' }) }
 async function jobByToken (token) {
   if (!token) return null
-  const rows = await erp.list('Dispatch Job', { filters: [['booking_token', '=', token]], fields: ['name', 'service_location', 'duration_h', 'scheduled_date', 'start_time', 'booking_status'], limit: 1 })
+  const rows = await erp.list('Dispatch Job', { filters: [['booking_token', '=', token]], fields: ['name', 'service_location', 'service_type', 'duration_h', 'scheduled_date', 'start_time', 'booking_status'], limit: 1 })
   return rows[0] || null
 }
-async function confirmWindow (jobName, date, start, duration) {
+async function confirmWindow (jobName, date, start, duration, skill) {
   // À la confirmation on veut juste vérifier que le tech est ENCORE physiquement libre
-  // (pas re-filtrer par la politique d'offre) → ignorePolicy.
-  const day = await bookingSlots({ duration, start: date, days: 1, limit: 300, ignorePolicy: true })
+  // (pas re-filtrer par la politique d'offre) → ignorePolicy. MAIS on garde le filtre COMPÉTENCE
+  // (skill) sinon on pourrait assigner un tech non qualifié au créneau choisi.
+  const day = await bookingSlots({ skill, duration, start: date, days: 1, limit: 300, ignorePolicy: true })
   const slot = day.find(s => s.start === start)
   if (!slot) return { ok: false, message: 'Ce créneau vient d\'être pris — choisissez-en un autre.' }
   const st = start.length === 5 ? start + ':00' : start
@@ -431,16 +466,16 @@ async function handlePublicBooking (req, res, method, path, url) {
   const token = url.searchParams.get('token') || ''
   if (path === '/book/api/options' && method === 'GET') {
     const job = await jobByToken(token); if (!job) return json(res, 404, { ok: false, error: 'lien invalide' })
-    const dur = Number(job.duration_h) || 1
-    const windows = await bookingSlots({ duration: dur, start: todayET(), days: getBookingPolicy().horizon_days || 21, aggregate: true, limit: 60 })
-    return json(res, 200, { ok: true, job: { location: job.service_location || '', duration: dur, scheduled: job.scheduled_date || '' }, windows })
+    const dur = Number(job.duration_h) || 1; const skill = skillForJob(job) // seuls les techs qualifiés
+    const windows = await bookingSlots({ skill, duration: dur, start: todayET(), days: getBookingPolicy().horizon_days || 21, aggregate: true, limit: 60 })
+    return json(res, 200, { ok: true, job: { location: job.service_location || '', service_type: job.service_type || '', required_skill: skill, duration: dur, scheduled: job.scheduled_date || '' }, windows })
   }
   if (path === '/book/api/submit' && method === 'POST') {
     const job = await jobByToken(token); if (!job) return json(res, 404, { ok: false, error: 'lien invalide' })
-    const b = await parseBody(req); const dur = Number(job.duration_h) || 1
+    const b = await parseBody(req); const dur = Number(job.duration_h) || 1; const skill = skillForJob(job)
     if (b.mode === 'rank' && Array.isArray(b.prefs) && b.prefs.length) {
-      const fit = await fitBooking({ duration: dur, prefs: b.prefs })
-      if (fit.chosen) { const r = await confirmWindow(job.name, fit.chosen.date, fit.chosen.start, dur); if (r.ok) return json(res, 200, { ...r, rank: fit.chosen.rank }) }
+      const fit = await fitBooking({ skill, duration: dur, prefs: b.prefs })
+      if (fit.chosen) { const r = await confirmWindow(job.name, fit.chosen.date, fit.chosen.start, dur, skill); if (r.ok) return json(res, 200, { ...r, rank: fit.chosen.rank }) }
       await retryWrite(() => erp.update('Dispatch Job', job.name, { booking_prefs: JSON.stringify(b.prefs), booking_status: 'Proposé' }))
       return json(res, 200, { ok: true, confirmed: false, message: 'Vos disponibilités sont enregistrées — nous vous confirmerons sous peu.' })
     }
@@ -476,17 +511,21 @@ async function occupancyByTechDay (start, days) {
   const dates = rangeDates(start, days)
   const jobs = await erp.list('Dispatch Job', {
     filters: [['scheduled_date', 'in', dates], ['status', 'in', ['open', 'assigned', 'in_progress']]],
-    fields: ['assigned_tech', 'scheduled_date', 'start_time', 'duration_h'], limit: 5000,
+    fields: ['name', 'subject', 'customer_name', 'service_type', 'assigned_tech', 'scheduled_date', 'start_time', 'duration_h', 'priority'], limit: 5000,
   })
+  const PRIO = { urgent: 0, high: 1, medium: 2, low: 3 } // ordre d'affichage
   const m = {}
   for (const j of jobs) {
     if (!j.assigned_tech || !j.scheduled_date) continue
     const k = j.assigned_tech + '|' + j.scheduled_date
-    const o = m[k] || (m[k] = { h: 0, blocks: [] })
+    const o = m[k] || (m[k] = { h: 0, blocks: [], jobs: [] })
     const dur = Number(j.duration_h) || 0
     o.h += dur
-    if (j.start_time) { const s = timeToH(j.start_time); o.blocks.push({ s, e: s + dur }) }
+    const s = j.start_time ? timeToH(j.start_time) : null
+    if (s != null) o.blocks.push({ s, e: s + dur })
+    o.jobs.push({ name: j.name, subject: j.subject || j.service_type || j.name, customer: j.customer_name || '', start: j.start_time ? String(j.start_time).slice(0, 5) : '', start_h: s, dur, priority: j.priority || 'low' })
   }
+  for (const k in m) m[k].jobs.sort((a, b) => (PRIO[a.priority] ?? 3) - (PRIO[b.priority] ?? 3) || ((a.start_h ?? 99) - (b.start_h ?? 99))) // priorité puis heure
   return m
 }
 
@@ -590,8 +629,18 @@ async function handle (req, res, method, path, url) {
       fields: ['name', 'customer_name', 'service_location', 'service_type', 'duration_h', 'scheduled_date', 'start_time', 'assigned_tech', 'booking_status', 'status'],
       orderBy: 'modified desc', limit: 100,
     })
+    for (const j of rows) j.required_skill = skillForJob(j) // tag requis (table service_type → compétence)
+    await attachLocations(rows) // adresse lisible (service_location = code)
     return json(res, 200, { jobs: rows })
   }
+  // Méta pour l'éditeur de la table « type de job → compétence requise » (#56 booking)
+  if (path === '/roster/book/meta' && method === 'GET') {
+    const tk = await fetchTechnicians()
+    const skills = [...new Set(tk.flatMap(t => t.skills || []))].sort()
+    let types = []
+    try { const jb = await erp.list('Dispatch Job', { fields: ['service_type'], limit: 3000 }); types = [...new Set(jb.map(j => j.service_type).filter(Boolean))].sort() } catch (e) {}
+    return json(res, 200, { service_types: types, skills, skill_by_type: getBookingPolicy().skill_by_type || {} })
+  }
   // Générer le lien client (token) pour un job → URL publique /book?token=
   if (path === '/roster/book/link' && method === 'POST') {
     const b = await parseBody(req); if (!b.job) return json(res, 400, { error: 'job requis' })
@@ -621,9 +670,118 @@ async function handle (req, res, method, path, url) {
   }
   // File « À reporter » (jobs à recontacter) — pour le superviseur
   if (path === '/roster/jobs-to-reschedule' && method === 'GET') {
-    const rows = await erp.list('Dispatch Job', { filters: [['booking_status', '=', 'À reporter']], fields: ['name', 'customer_name', 'service_location', 'service_type', 'scheduled_date', 'assigned_tech', 'booking_token'], limit: 100 })
+    const rows = await erp.list('Dispatch Job', { filters: [['booking_status', '=', 'À reporter']], fields: ['name', 'customer_name', 'service_location', 'service_type', 'duration_h', 'scheduled_date', 'assigned_tech', 'booking_token'], limit: 100 })
+    await attachLocations(rows || []) // adresse lisible
     return json(res, 200, { jobs: rows || [] })
   }
+  // Impact d'un retrait de compétence : jobs assignés à un tech qui EXIGENT cette compétence (devenus invalides).
+  if (path === '/roster/skill-impact' && method === 'GET') {
+    const tech = qs.get('tech'); const skill = qs.get('skill')
+    if (!tech || !skill) return json(res, 400, { error: 'tech + skill requis' })
+    const rows = await erp.list('Dispatch Job', { filters: [['assigned_tech', '=', tech], ['status', 'in', ['open', 'assigned']]], fields: ['name', 'customer_name', 'service_location', 'service_type', 'duration_h', 'scheduled_date', 'start_time'], limit: 500 })
+    const impacted = (rows || []).filter(j => skillForJob(j) === skill)
+    await attachLocations(impacted)
+    return json(res, 200, { jobs: impacted })
+  }
+  // Impact d'une ABSENCE : jobs assignés à un tech sur des dates données (devenus à redistribuer).
+  if (path === '/roster/absence-impact' && method === 'GET') {
+    const tech = qs.get('tech'); const dates = (qs.get('dates') || '').split(',').filter(Boolean)
+    if (!tech || !dates.length) return json(res, 400, { error: 'tech + dates requis' })
+    const rows = await erp.list('Dispatch Job', { filters: [['assigned_tech', '=', tech], ['scheduled_date', 'in', dates], ['status', 'in', ['open', 'assigned']]], fields: ['name', 'customer_name', 'service_location', 'service_type', 'duration_h', 'scheduled_date', 'start_time'], limit: 500 })
+    await attachLocations(rows || [])
+    return json(res, 200, { jobs: rows || [] })
+  }
+  // Candidats CLASSÉS pour reprendre un job : techs qualifiés + LIBRES au même créneau (≠ l'impacté).
+  if (path === '/roster/job-candidates' && method === 'GET') {
+    const jobName = qs.get('job'); const exclude = qs.get('exclude') || ''
+    if (!jobName) return json(res, 400, { error: 'job requis' })
+    let job = null
+    try { job = await erp.get('Dispatch Job', jobName, { fields: ['name', 'scheduled_date', 'start_time', 'duration_h', 'service_type'] }) } catch (e) {}
+    if (!job || !job.scheduled_date || !job.start_time) return json(res, 200, { candidates: [], date: (job && job.scheduled_date) || '', start: '' })
+    const skill = skillForJob(job); const start = String(job.start_time).slice(0, 5); const dur = Number(job.duration_h) || 1
+    const slots = await bookingSlots({ skill, duration: dur, start: job.scheduled_date, days: 1, limit: 500, ignorePolicy: true })
+    const seen = new Set(); const cands = []
+    for (const s of slots) { if (s.start !== start || s.tech === exclude || seen.has(s.tech)) continue; seen.add(s.tech); cands.push({ tech: s.tech, tech_name: s.tech_name }) }
+    return json(res, 200, { candidates: cands.slice(0, 6), date: job.scheduled_date, start, skill })
+  }
+  // Redistribuer les jobs impactés. 3 voies : b.plan (réassign explicite par tech / requeue) · b.mode 'auto' (re-match
+  // auto au même créneau, compétence b.skill ou par job) · 'requeue' (À recontacter).
+  if (path === '/roster/skill-impact/redistribute' && method === 'POST') {
+    const b = await parseBody(req); const mode = b.mode || 'requeue'
+    if (Array.isArray(b.plan)) { // plan explicite : { job, tech } (réassigner) OU { job, requeue:true }
+      let reassigned = 0; let requeued = 0; let errors = 0
+      for (const p of b.plan) {
+        if (!p || !p.job) { errors++; continue }
+        if (p.tech && !p.requeue) { const r = await retryWrite(() => erp.update('Dispatch Job', p.job, { assigned_tech: p.tech, status: 'assigned', booking_status: 'Confirmé' })); if (r.ok) reassigned++; else errors++ }
+        else { const r = await retryWrite(() => erp.update('Dispatch Job', p.job, { booking_status: 'À reporter', scheduled_date: null, start_time: null, assigned_tech: null, status: 'open' })); if (r.ok) requeued++; else errors++ }
+      }
+      return json(res, 200, { ok: errors === 0, reassigned, requeued, errors })
+    }
+    let reassigned = 0; let requeued = 0; let errors = 0; const details = []
+    for (const jobName of (b.jobs || [])) {
+      let job = null
+      try { job = await erp.get('Dispatch Job', jobName, { fields: ['name', 'scheduled_date', 'start_time', 'duration_h', 'customer_name', 'service_type'] }) } catch (e) {}
+      if (!job) { errors++; continue }
+      if (mode === 'auto' && job.scheduled_date && job.start_time) { // re-match au même créneau, tech qualifié ≠ l'impacté
+        const sk = b.skill || skillForJob(job) // compétence requise (globale si fournie, sinon par job → cas absence)
+        const r = await confirmWindow(jobName, job.scheduled_date, String(job.start_time).slice(0, 5), Number(job.duration_h) || 1, sk)
+        if (r.ok) { reassigned++; details.push({ job: jobName, customer: job.customer_name, tech: r.tech, action: 'réassigné' }); continue }
+      }
+      const r = await retryWrite(() => erp.update('Dispatch Job', jobName, { booking_status: 'À reporter', scheduled_date: null, start_time: null, assigned_tech: null, status: 'open' }))
+      if (r.ok) { requeued++; details.push({ job: jobName, customer: job.customer_name, action: 'à recontacter' }) } else errors++
+    }
+    return json(res, 200, { ok: errors === 0, reassigned, requeued, errors, details })
+  }
+  // Jobs À ASSIGNER (non assignés) avec leur groupe/dépendances (parent_job, depends_on, step_order, chaîne On Hold).
+  if (path === '/roster/unassigned-jobs' && method === 'GET') {
+    const rows = await erp.list('Dispatch Job', { filters: [['status', 'in', ['open', 'On Hold']]], fields: ['name', 'subject', 'customer_name', 'service_location', 'service_type', 'duration_h', 'scheduled_date', 'status', 'depends_on', 'parent_job', 'step_order', 'assigned_tech'], orderBy: 'modified desc', limit: 400 })
+    const jobs = (rows || []).filter(j => !j.assigned_tech) // non assignés
+    for (const j of jobs) j.required_skill = skillForJob(j)
+    await attachLocations(jobs)
+    return json(res, 200, { jobs })
+  }
+  // Assigner un job à un tech (depuis le panneau flottant glisser-déposer) — date = case déposée.
+  // On pose AUSSI un start_time (premier trou libre du shift) : sans heure, le job compte dans
+  // les heures occupées mais n'affiche AUCUN bloc sur la timeline → la barre d'occupation semble figée.
+  if (path === '/roster/assign-job' && method === 'POST') {
+    const b = await parseBody(req); if (!b.job || !b.tech) return json(res, 400, { error: 'job + tech requis' })
+    let dur = 1
+    try { const jb = await erp.get('Dispatch Job', b.job, { fields: ['duration_h'] }); dur = Number(jb && jb.duration_h) || 1 } catch (e) {}
+    const patch = { assigned_tech: b.tech, status: 'assigned', duration_h: dur } // duration_h garanti → occupation comptée
+    if (b.date) patch.scheduled_date = b.date
+    let placed = null
+    if (b.start) patch.start_time = (String(b.start).length === 5 ? b.start + ':00' : b.start)
+    else if (b.date) { // premier trou libre dans le shift du tech ce jour-là
+      try { const d = await loadBookingData(b.date, 1); const h = firstFitStart(d, b.tech, b.date, dur); if (h != null) { placed = hToTime(h); patch.start_time = placed } } catch (e) {}
+    }
+    const r = await retryWrite(() => erp.update('Dispatch Job', b.job, patch))
+    return json(res, r.ok ? 200 : 500, { ...r, job: b.job, tech: b.tech, start_time: placed, duration_h: dur })
+  }
+  // Backfill : pose un start_time (premier trou libre) sur les jobs DÉJÀ assignés mais SANS heure
+  // → leurs blocs d'occupation apparaissent enfin sur la grille. Idempotent (ne touche que start_time vide).
+  if (path === '/roster/backfill-start-times' && method === 'POST') {
+    const b = await parseBody(req)
+    const start = b.start || todayET(); const days = Number(b.days) || 14
+    const dates = rangeDates(start, days)
+    const rows = await erp.list('Dispatch Job', {
+      filters: [['scheduled_date', 'in', dates], ['status', 'in', ['open', 'assigned', 'in_progress']]],
+      fields: ['name', 'assigned_tech', 'scheduled_date', 'start_time', 'duration_h'], limit: 5000,
+    })
+    const todo = (rows || []).filter(j => j.assigned_tech && j.scheduled_date && !j.start_time)
+    const d = await loadBookingData(start, days) // chargé UNE fois ; on mute d.booked au fil de l'eau pour empiler
+    let placed = 0; const details = []
+    for (const j of todo) { // SÉQUENTIEL (frappe_pg ne supporte pas la concurrence)
+      const dur = Number(j.duration_h) || 1
+      const k = j.assigned_tech + '|' + j.scheduled_date
+      if (!d.booked[k]) d.booked[k] = []
+      const h = firstFitStart(d, j.assigned_tech, j.scheduled_date, dur)
+      if (h == null) { details.push({ job: j.name, skipped: 'pas de shift régulier ce jour-là' }); continue }
+      const r = await retryWrite(() => erp.update('Dispatch Job', j.name, { start_time: hToTime(h), duration_h: dur }))
+      if (r.ok) { d.booked[k].push({ s: h, e: h + dur }); placed++; details.push({ job: j.name, tech: j.assigned_tech, date: j.scheduled_date, start: hToTime(h) }) }
+      else details.push({ job: j.name, error: r.error || 'update failed' })
+    }
+    return json(res, 200, { ok: true, candidates: todo.length, placed, details })
+  }
   // Hold : réserver temporairement une fenêtre (agent au tél. ou client qui sélectionne)
   // → la fenêtre est retirée des dispos des autres pendant `minutes` (défaut politique).
   if (path === '/roster/book/hold' && method === 'POST') {
@@ -727,14 +885,17 @@ async function handle (req, res, method, path, url) {
     return json(res, 200, { ok: errors === 0, created, deleted, errors, notified, unchanged })
   }
   // Garde : matérialiser la rotation sur un HORIZON (plusieurs semaines) — comme un évènement récurrent.
-  // Wipe ciblé sur les shifts de garde dans l'horizon + recréation (idempotent, reflète l'édition de la séquence).
+  // Wipe ROBUSTE : on supprime TOUTE garde (tout template on_call) dans la plage, pas seulement les shifts
+  // courants — sinon une ancienne garde sous un autre nom de template survit et fausse la rotation
+  // (« la suite est bousillée »). Puis recréation depuis la rotation déterministe (= le calque live).
   if (path === '/roster/garde/apply' && method === 'POST') {
     const b = await parseBody(req)
     const dates = rangeDates(b.start, (b.weeks || 1) * 7)
-    const shifts = b.shifts || []
+    const tpls = await fetchTemplates()
+    const gardeTpls = tpls.filter(t => t.on_call).map(t => t.name)
     let deleted = 0
-    if (shifts.length) {
-      const existing = await erp.list('Shift Assignment', { filters: [['shift_template', 'in', shifts], ['assignment_date', 'in', dates]], fields: ['name'], limit: 3000 })
+    if (gardeTpls.length && dates.length) {
+      const existing = await erp.list('Shift Assignment', { filters: [['shift_template', 'in', gardeTpls], ['assignment_date', 'in', dates]], fields: ['name'], limit: 5000 })
       for (const a of existing) { const r = await retryWrite(() => erp.remove('Shift Assignment', a.name)); if (r.ok) deleted++ }
     }
     let created = 0; let errors = 0
@@ -792,7 +953,10 @@ async function handle (req, res, method, path, url) {
     const techId = decodeURIComponent(mSkills[1]); const b = await parseBody(req)
     const techName = await resolveTechName(techId)
     if (!techName) return json(res, 404, { error: 'technicien introuvable: ' + techId })
-    const r = await retryWrite(() => erp.update('Dispatch Technician', techName, { skills: (b.skills || '').trim() }))
+    const patch = { skills: (b.skills || '').trim() }
+    if (b.skill_levels !== undefined) patch.skill_levels = typeof b.skill_levels === 'string' ? b.skill_levels : JSON.stringify(b.skill_levels || {}) // niveaux 1–5 par compétence (JSON)
+    if (b.skill_eff !== undefined) patch.skill_eff = typeof b.skill_eff === 'string' ? b.skill_eff : JSON.stringify(b.skill_eff || {}) // efficacité (facteur vitesse) PAR compétence (JSON)
+    const r = await retryWrite(() => erp.update('Dispatch Technician', techName, patch))
     return json(res, r.ok ? 200 : 500, { ...r, technician: techId })
   }
   const mCost = path.match(/^\/roster\/technician\/(.+)\/cost$/)