Correctif des modales en mode mobile

- centrage et occupation de 100% de l'écran mobile
- bouton de fermetture dans le titre / header
- suppression des arrondis supérieurs

assets/app.js

@@ -5,9 +5,10 @@ import './bootstrap.js';
  * This file will be included onto the page via the importmap() Twig function,
  * which should already be in your base.html.twig.
  */
-import './styles/app.css';
+
 import './vendor/bulma/css/bulma.min.css';
 import './styles/datatables.min.css';
+import './styles/app.css';
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
 

assets/styles/app.css

@@ -1,5 +1,22 @@
 /* Styles spécifiques à l'application */
 
+@media screen and (max-width: 768px) {
+  .modal-card,
+  .modal-content {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0; /* supprime l'espace autour */
+    height: 100% !important;
+    max-height: 100% !important;
+  }
+  .modal-card-head {  
+    border-radius: 0 !important;
+  }
+  .modal-close {
+    --bulma-delete-color: black !important;
+  }
+}
+
 .navbar-item svg {
   color: rgb(46,48,146); /* couleur par défaut (mode clair) */
 }