implement collapse expand for gant

index.html

@@ -117,6 +117,10 @@
                             <button class="btn btn-secondary btn-sm" onclick="setGanttView('quarter')">Trimestres</button>
                             <button class="btn btn-secondary btn-sm" onclick="setGanttView('year')">Années</button>
                         </div>
+                        <button class="btn btn-secondary btn-sm" id="ganttExpandBtn" onclick="toggleGanttExpand()" title="Agrandir ou réduire la hauteur du Gantt">
+                            <i class="fa-solid fa-up-right-and-down-left-from-center" id="ganttExpandIcon"></i>
+                            <span id="ganttExpandLabel">Déplier</span>
+                        </button>
                     </div>
             
                     <div class="export-drawio-box">

public/css/style.css

@@ -932,6 +932,13 @@ GANTT
     background: var(--gantt-bg);
     border: 1px solid var(--border);
     border-radius: 8px;
+    transition: height 0.3s ease;
+}
+
+.gantt-container.expanded {
+    height: auto;
+    max-height: none;
+    overflow-y: visible;
 }
 
 /* Ligne du temps (Header) */

public/js/script.js

@@ -5,6 +5,7 @@ let customFieldsMap = [];
 let lastUsername = '';
 let lastApiToken = '';
 let currentGanttView = 'month'; 
+let isGanttExpanded = false;
 let currentSortCol = null;
 let isAsc = true;
 
@@ -334,6 +335,38 @@ function setGanttView(view) {
     renderRoadmap();
 }
 
+function toggleGanttExpand() {
+    isGanttExpanded = !isGanttExpanded;
+    updateGanttExpandState();
+}
+
+function updateGanttExpandState() {
+    const container = document.querySelector('.gantt-container');
+    const icon = document.getElementById('ganttExpandIcon');
+    const label = document.getElementById('ganttExpandLabel');
+    const btn = document.getElementById('ganttExpandBtn');
+
+    if (container) {
+        if (isGanttExpanded) {
+            container.classList.add('expanded');
+        } else {
+            container.classList.remove('expanded');
+        }
+    }
+
+    if (icon && label) {
+        if (isGanttExpanded) {
+            icon.className = 'fa-solid fa-down-left-and-up-right-to-center';
+            label.textContent = 'Replier';
+            if (btn) btn.classList.add('active');
+        } else {
+            icon.className = 'fa-solid fa-up-right-and-down-left-from-center';
+            label.textContent = 'Déplier';
+            if (btn) btn.classList.remove('active');
+        }
+    }
+}
+
 // --- FONCTIONS UTILITAIRES POUR LE GANTT ---
 
 /**
@@ -458,7 +491,7 @@ function renderRoadmap() {
     }, {});
 
     // Début HTML
-    let html = `<div class="gantt-container"><div class="gantt-canvas" style="width: ${leftWidth + (timeScale.length * colWidth)}px;">`;
+    let html = `<div class="gantt-container ${isGanttExpanded ? 'expanded' : ''}"><div class="gantt-canvas" style="width: ${leftWidth + (timeScale.length * colWidth)}px;">`;
     
     // Ligne "Aujourd'hui"
     const todayX = getXPos(new Date());