focus etape

modules/holidays/holidays.js

@@ -221,26 +221,46 @@ function initDetailMap() {
     latlngs.push(pos);
     bounds.extend(pos);
 
-    // Couleur selon le paiement
-    const color = pt.paid == 1 ? "#10b981" : "#f59e0b";
+    // Couleur de base (Bleu PachaFamily)
+    const color = "#2563eb";
 
     // On place un petit cercle pour chaque point
     const marker = L.circleMarker(pos, {
       color: color,
-      radius: 7,
+      radius: 8,
       fillOpacity: 1,
       fillColor: "white",
       weight: 3,
     }).addTo(detailMap);
 
-    // Numérotation et Popup
+    // Correction : Numérotation et Popup avec les bonnes variables
     marker.bindPopup(`
             <div style="text-align:center;">
-                <div style="font-size:0.7rem; color:#64748b; margin-bottom:2px;">Étape ${index + 1}</div>
-                <strong>${pt.title}</strong><br>
-                <span style="font-weight:bold; color:${color};">${parseFloat(pt.amount).toFixed(2)} €</span>
+                <div style="font-size:0.75rem; color:#64748b; margin-bottom:2px; font-weight:bold;">Étape ${index + 1}</div>
+                <strong style="font-size:1rem; color:#0f172a;">${pt.location_name}</strong><br>
+                <span style="font-weight:bold; color:${color};">${parseFloat(pt.total_amount).toFixed(2)} €</span>
             </div>
         `);
+
+    // NOUVEAU : Focus et scroll sur la liste au clic sur la carte !
+    marker.on("click", function () {
+      const card = document.getElementById("step-card-" + pt.sort_order);
+      if (card) {
+        // Fait défiler la liste doucement jusqu'à l'élément
+        card.scrollIntoView({ behavior: "smooth", block: "center" });
+
+        // Effet visuel "Flash" pour repérer la carte
+        card.style.transition = "box-shadow 0.3s, transform 0.3s";
+        card.style.boxShadow = "0 0 0 3px #3b82f6";
+        card.style.transform = "scale(1.02)";
+
+        // Retire l'effet après 1.5 seconde
+        setTimeout(() => {
+          card.style.boxShadow = "";
+          card.style.transform = "";
+        }, 1500);
+      }
+    });
   });
 
   // On dessine le trait en pointillés pour relier le roadtrip !

modules/holidays/views/detail.php

@@ -129,9 +129,8 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
                     <p style="color:var(--text-muted); font-style:italic; text-align:center; margin-top:40px;">Aucune étape planifiée.</p>
                 <?php else: ?>
                     <?php foreach ($steps as $step): ?>
-                        <div class="hol-checkpoint hol-checkpoint-draggable" draggable="true" data-location="<?= htmlspecialchars($step['location_name']) ?>">
+                        <div id="step-card-<?= $step['sort_order'] ?>" class="hol-checkpoint hol-checkpoint-draggable" draggable="true" data-location="<?= htmlspecialchars($step['location_name']) ?>">                            
                             <div class="hol-cp-header">
-                                
                                 <div class="hol-cp-info-group">
                                     <span style="color:#94a3b8; font-size:1.1rem; cursor:grab; user-select:none;">☰</span>
                                     <div class="hol-cp-title" onclick="panMapTo(<?= $step['lat'] ?>, <?= $step['lng'] ?>)" title="<?= htmlspecialchars($step['location_name']) ?>">