Dependence milestone

src/app/milestones/milestone-detail/milestone-detail.html

@@ -132,6 +132,40 @@
   </div>
 </div>
 
+<!-- Dépendances -->
+@if (!isNewRoute) {
+  <div class="card shadow-sm mb-3">
+    <div class="card-header section-header">Dépendances</div>
+    <div class="card-body">
+      @if (hasDependencies) {
+        <div class="d-flex flex-wrap gap-2 mb-3">
+          @for (depId of dependencyIds; track depId) {
+            <span class="dep-badge">
+              <span class="dep-id">#{{ depId }}</span>
+              {{ resolveDependency(depId)?.name || 'Sans nom' }}
+              <button type="button" class="dep-remove" (click)="removeDependency(depId)" title="Supprimer">×</button>
+            </span>
+          }
+        </div>
+      }
+      @if (showAddDependency) {
+        <div class="d-flex gap-2 flex-wrap">
+          <select aria-label="Choisir un milestone" class="form-select form-select-sm dep-select" [(ngModel)]="selectedCandidateMilestoneId">
+            <option [ngValue]="null">Choisir un milestone...</option>
+            @for (candidate of availableCandidates; track candidate.id) {
+              <option [ngValue]="candidate.id">#{{ candidate.id }} – {{ candidate.name || 'Sans nom' }}</option>
+            }
+          </select>
+          <button type="button" class="btn btn-sm btn-primary text-nowrap" (click)="confirmAddDependency()" [disabled]="selectedCandidateMilestoneId === null">Ajouter</button>
+          <button type="button" class="btn btn-sm btn-outline-secondary text-nowrap" (click)="cancelAddDependency()">Annuler</button>
+        </div>
+      } @else {
+        <button type="button" class="btn btn-sm btn-outline-primary" (click)="openAddDependency()">+ Ajouter une dépendance</button>
+      }
+    </div>
+  </div>
+}
+
 <!-- Issues liées -->
 <div class="card shadow-sm mb-3">
   <div class="card-header section-header d-flex align-items-center justify-content-between">