diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html
index 9f82363..c113277 100644
--- a/src/app/football-field/football-field.component.html
+++ b/src/app/football-field/football-field.component.html
@@ -54,6 +54,18 @@
 							[style.width]="calculateBlockWidth(stepBall)"
 				    		(mousedown)="onTLBallBlockMouseDown($event, ball, i)">
 							{{ i + 1 }}
+							<div class="handle-left"
+								(mousedown)="onHandleMouseDown($event, 'left', ball, i)"
+								(mousemove)="onHandleMouseMove($event)"
+								(mouseup)="onHandleMouseUp()">
+								<!-- poignée gauche -->
+							</div> 
+							<div class="handle-right"
+								(mousedown)="onHandleMouseDown($event, 'right', ball, i)"
+								(mousemove)="onHandleMouseMove($event)"
+								(mouseup)="onHandleMouseUp()">
+								<!-- poignée droite -->	
+							</div> 
 					</div>
 					<div class="time-indicator" id="time-indicator">
 						<!-- Trait de visualisation -->
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts
index a37a116..0b8318d 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -110,12 +110,11 @@ export class FootballFieldComponent {
 	private animationStartTime: number = 0;
 	private isResizingLeft: boolean = false;
 	private isResizingRight: boolean = false;
-	private currentBlock: TimelineStep | null = null;
 	private initialMouseX:number = 0;
-	private initialBlockLeft:number = 0;
-	private initialBlockWidth:number = 0;
 	private resizedTLPlayer: TimelineStep[] | null = null;
     private resizedBlockIndex: number = 0;
+	private curBlockEndTime: number = 0;
+	private curBlockStartTime: number = 0;
 
 	public playerCount: number = 8; // Nombre de joueurs par défaut
 	public plotCount: number = 2; // Nombre de plots par défaut
@@ -977,25 +976,41 @@ export class FootballFieldComponent {
         if (!this.resizedTLPlayer) return;
     
         const deltaX = event.clientX - this.initialMouseX;
-
+		// On recupère le bloc courant
+		const curStep = this.resizedTLPlayer[this.resizedBlockIndex];
+		let nextStep:TimelineStep = null;
+		let prevStep:TimelineStep = null;
+		// On recupère le bloc suivant si il existe
+		if (this.resizedBlockIndex < (this.resizedTLPlayer.length  - 1)) {
+			nextStep = this.resizedTLPlayer[this.resizedBlockIndex + 1];
+		}
+		// On recupère le bloc précédent si il existe
+		if (this.resizedBlockIndex > 0) {
+			prevStep = this.resizedTLPlayer[this.resizedBlockIndex - 1];
+		}
         if (this.isResizingLeft) {
-            console.log("[onHandleMouseMove] Resizing Left");
-            const newLeft = this.initialBlockLeft + deltaX;
-            const newWidth = this.initialBlockWidth - deltaX;
-            if (newWidth > 10) { // Empêcher une largeur trop petite
-                //this.currentBlock.style.left = `${newLeft}px`;
-                //this.currentBlock.style.width = `${newWidth}px`;
-                //this.updateTimelineData(); // Mettre à jour les données de la timeline
-            }
+			const newStartTime = Math.floor(this.curBlockStartTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
+			console.log("[onHandleMouseMove] Resizing Left (",this.curBlockStartTime, "-", curStep.startTime, "-", newStartTime, ")");
+			if (prevStep) {
+				curStep.startTime = Math.max(prevStep.endTime, newStartTime);
+			} else {
+				curStep.startTime = Math.max(0, newStartTime);
+			}
+			// On calcule la nouvelle durée du bloc
+			curStep.duration = curStep.endTime - newStartTime;
         } else if (this.isResizingRight) {
-            const curStep = this.resizedTLPlayer[this.resizedBlockIndex];
-            const newEndTime = Math.floor(curStep.endTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)) / 10);
-            console.log("[onHandleMouseMove] Resizing Right (",curStep, "-",newEndTime,")");
-            curStep.endTime = Math.max(curStep.startTime, newEndTime);
-            curStep.duration = Math.max(curStep.startTime, newEndTime);
-            //curStep.endTime = Math.max(0, newWidth);
-                //this.currentBlock.style.width = `${newWidth}px`;
-                //this.updateTimelineData(); // Mettre à jour les données de la timeline
+            const newEndTime = Math.floor(this.curBlockEndTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
+            console.log("[onHandleMouseMove] Resizing Right (",this.curBlockEndTime, "-", curStep.endTime, "-",newEndTime,")");
+			if (newEndTime < this.getTotalTimelineDuration()) {
+				if (nextStep) {
+					curStep.endTime = Math.max(curStep.startTime, nextStep.startTime)
+				} else {
+					curStep.endTime = Math.max(curStep.startTime, newEndTime);
+				}
+            	
+            	// On calcule la nouvelle durée du bloc
+				curStep.duration = newEndTime - curStep.startTime;
+			}
         }
     }
     
@@ -1003,25 +1018,24 @@ export class FootballFieldComponent {
         console.log("[onHandleMouseUp]");
         this.isResizingLeft = false;
         this.isResizingRight = false;
-        this.currentBlock = null;
         this.resizedTLPlayer = null;
         this.resizedBlockIndex = 0;
+		this.curBlockEndTime = 0;
     }
 
-    onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', player: Player, blockIndex: number) {
-        console.log("[onHandleMouseDown] player:", player);
+    onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', elmt: Player | Ball, blockIndex: number) {
         // Empêche le comportement par défaut (déplacement du bloc)
         //event.preventDefault();
         event.stopPropagation();
-        this.resizedTLPlayer = player.steps;
-        this.resizedBlockIndex = blockIndex;
-        // Position initiale de la souris
+		// Position initiale de la souris
         this.initialMouseX = event.clientX;
-        // Position initiale du bloc
-        //this.initialBlockLeft = this.calculateBlockPixelPosition(this.currentBlock.startTime);
-        // Largeur initiale du bloc
-        //this.initialBlockWidth = this.calculateBlockPixelPosition(this.currentBlock.endTime) - this.initialBlockLeft;
-        //console.log("[onResizeStart] (",this.initialMouseX, "px -", this.initialBlockLeft, "px -",this.initialBlockWidth,"px)");
+
+		this.resizedTLPlayer = elmt.steps;
+        this.resizedBlockIndex = blockIndex;
+        this.curBlockEndTime = this.resizedTLPlayer[this.resizedBlockIndex].endTime;
+		this.curBlockStartTime = this.resizedTLPlayer[this.resizedBlockIndex].startTime;
+
+		console.log("[onHandleMouseDown] Element:", elmt, "- Index:", blockIndex, "- EndTime:", this.curBlockEndTime, "- StartTime", this.curBlockStartTime);
         if (direction === 'left') {
             this.isResizingLeft = true;
         } else if (direction === 'right') {
@@ -1029,26 +1043,6 @@ export class FootballFieldComponent {
         }
     }
 
-/*
-	updateTimelineData() {
-		if (!this.currentBlock) return;
-	
-		const blockId = this.currentBlock.id;
-		const blockLeft = this.currentBlock.offsetLeft;
-		const blockWidth = this.currentBlock.offsetWidth;
-	
-		// Conversion des positions en temps sur la timeline (ex: 1px = 10ms)
-		const startTime = blockLeft * 10;
-		const endTime = (blockLeft + blockWidth) * 10;
-	
-		// Mettre à jour les données du bloc (par exemple pour un joueur)
-		const timelineStep = this.getTimelineStepById(blockId);
-		if (timelineStep) {
-			timelineStep.startTime = startTime;
-			timelineStep.endTime = endTime;
-		}
-	}
-*/
 	getTimelineStepById(blockId: string): TimelineStep | null {
 		// Trouver le bloc correspondant aux données
 		// Cette fonction est un exemple. Adapte-la selon la manière dont tu stockes tes données