fix(planif): l'œil n'est plus poussé/clippé par un long tag groupe (A6)

Régression du lot précédent : `.tech-col { width:360px; overflow:hidden }` coupait l'œil
quand le contenu dépassait 360px (ex. groupe « Vente porte-à-porte », flex-shrink:0 sans max-width).
- retire la largeur fixe + overflow:hidden sur .tech-col (la colonne s'ajuste, l'œil reste visible)
- .grp tronque (max-width 90px + ellipsis, rétrécissable) → ne pousse plus l'œil
- .hide-eye épinglé (flex-shrink:0) au bout de la rangée

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/ops/src/pages/PlanificationPage.vue

@@ -6860,7 +6860,7 @@ onBeforeRouteLeave(async () => { await autosaveDraft() }) // #2 — flush le bro
 .roster-grid th, .roster-grid td { border: 1px solid #c7d0dc; text-align: center; padding: 2px; } /* séparateurs plus contrastés (était #eee, invisible sur le gris des cellules) */
 .roster-grid th + th, .roster-grid td + td { border-left-color: #aab6c6; } /* séparateur de COLONNE (jour) plus marqué que les lignes — en-tête ET rangées */
 .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: 300px; max-width: 360px; width: 360px; overflow: hidden; z-index: 2; } /* overflow:hidden + width fixe → la colonne Ressource NE s'élargit PAS (badges/triangles entassés clippés) : la largeur du tableau reste stable → barre de défilement horizontale proportionnelle aux colonnes-jour, pas gonflée par le débordement */
+.tech-col { position: sticky; left: 0; background: #fff; text-align: left !important; white-space: nowrap; padding: 2px 8px !important; min-width: 300px; max-width: 360px; z-index: 2; } /* largeur bornée ; le contenu interne (nom/groupe) tronque → l'œil reste visible sans clipper la colonne */
 .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; }
@@ -6869,12 +6869,13 @@ th.holiday, td.holiday { background: #fff3e0; }
 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; }
+.grp { font-size: 9px; color: #999; background: #f0f0f0; border-radius: 3px; padding: 0 4px; margin-left: 2px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; } /* tag groupe/rôle TRONQUÉ (ex. « Vente porte-à-porte ») → ne pousse plus l'œil hors de la colonne */
 .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-row > .q-btn, .tech-row > .q-badge, .tech-row > .role-ic, .tech-row > .eff { flex-shrink: 0; } /* .grp exclu : il DOIT pouvoir rétrécir/tronquer (sinon un long groupe pousse l'œil) */
+.tech-row > .hide-eye { flex-shrink: 0; margin-left: 2px; } /* œil TOUJOURS au bout, jamais écrasé */
 .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; }