il faudrait ajouter la verification du mot de passe

static/css/style_final2_b.css

@@ -15,6 +15,7 @@ html, body {
 }
 
 .carte {
+    animation: zoomOut 0.4s ease-out; /* Applique l'animation à chaque carte */
     position: absolute;
     width: 15vw; /* Taille des cartes */
     height: calc(15vw * 1.4); /* Respecte le ratio */
@@ -24,6 +25,16 @@ html, body {
     touch-action: none;
 }
 
+
+
+#zone_cartes .carte.zoom-in {
+    transform: scale(1.8) !important;
+    z-index: 20 !important;
+    transition: transform 0.2s ease-in-out !important;
+}
+
+
+
 #emplacements {
     position: absolute;
     bottom: 150px; /* Augmente la distance par rapport au bas de l'écran */
@@ -56,3 +67,15 @@ html, body {
     border: 2px solid black;
     z-index: 5;
 }
+
+/* Animation de zoom */
+@keyframes zoomOut {
+    from {
+        transform: scale(10); /* Taille initiale (double) */
+        opacity: 0; /* Invisible */
+    }
+    to {
+        transform: scale(1); /* Taille normale */
+        opacity: 1; /* Visible */
+    }
+}

static/js/script_final2_b.js

@@ -133,12 +133,18 @@ function positionAleatoire(zone, carte) {
 
 function rendreDeplacable(carte) {
     let offsetX, offsetY;
+    let hasMoved = false; // Indique si la carte a été déplacée
 
     carte.addEventListener('pointerdown', (e) => {
+        console.log("Pointer down : Début du déplacement.");
         offsetX = e.clientX - carte.getBoundingClientRect().left;
         offsetY = e.clientY - carte.getBoundingClientRect().top;
 
         carte.style.cursor = 'grabbing';
+        
+                // Ajout de la classe pour zoom in
+                carte.classList.add('zoom-in');
+                console.log("Classe zoom-in ajoutée.");
 
         const pointerMove = (e) => {
             carte.style.left = `${e.clientX - offsetX}px`;
@@ -149,7 +155,17 @@ function rendreDeplacable(carte) {
         };
 
         const pointerUp = () => {
+            console.log("Pointer up : Fin du déplacement.");
             carte.style.cursor = 'grab';
+                        // Retirer la classe pour zoom in
+                        carte.classList.remove('zoom-in');
+                        console.log("Classe zoom-in retirée.");
+
+                        if (carte.dataset.aimantee === "true") {
+                            console.log("Carte reste aimantée");
+                        } else {
+                            console.log("Carte n'est plus aimantée");
+                        }
         
             // Vérifier si la carte est dans la zone blanche
             if (isInZoneBlanche(carte)) {
@@ -223,6 +239,7 @@ async function supprimerCarte(carte) {
 function verifierAimantation(carte) {
     const emplacements = document.querySelectorAll('.emplacement');
     const aimantationDistance = 50; // Augmenter la distance pour plus de tolérance
+    let aimantationEffectuee = false; // Initialisation de la variable
 
     emplacements.forEach((rond) => {
         const rondRect = rond.getBoundingClientRect();
@@ -240,8 +257,14 @@ function verifierAimantation(carte) {
 
         if (distanceX <= aimantationDistance && distanceY <= aimantationDistance) {
             aimanterCarte(carte, rond);
+            carte.dataset.aimantee = "true"; // Marque la carte comme aimantée
+            aimantationEffectuee = true;
+            carte.classList.remove('zoom-in'); // Désactive le zoom après aimantation
         }
     });
+    if (!aimantationEffectuee) {
+        carte.dataset.aimantee = "false"; // La carte n'est plus aimantée
+    }
 }
 // Faire glisser et pivoter une carte relâchée en dehors des zones d'aimantation
 function lancerCarte(carte) {