Amélioration mise en forme image

src/agenda_culturel/static/js/modal.js

@@ -38,7 +38,7 @@ const openModal = (modal, back=true) => {
     console.log("ici");
     const mask = visibleModal.querySelector(".h-mask");
     mask.classList.add("visible");
-  }, 250);
+  }, 350);
 };
 
 const hideModal = (modal) => {

src/agenda_culturel/static/style.scss

@@ -1708,13 +1708,14 @@ label.required::after {
         }
     }
 }
-.h-image {
-    background-repeat: no-repeat;  
-    background-size: cover;
-    background-position: center, center;
-}
 
 dialog {
+    .h-image {
+        background-repeat: no-repeat;  
+        background-size: cover;
+        background-position: center, center;
+    }
+
     .h-mask {
         background-color: var(--background-color);
         margin: calc(var(--spacing) * -1.5);
@@ -1722,7 +1723,7 @@ dialog {
     }
     .h-mask.visible {
         background-color: var(--background-color-transparent);
-        transition: background-color .8s linear;
+        transition: background-color .8s ease-in;
     }
     .h-mask.visible:hover {
         background-color: var(--background-color-transparent-light);

src/agenda_culturel/templates/agenda_culturel/page-week.html

@@ -97,7 +97,7 @@
                     <dialog id="event-{{ event.id }}">
                         <article>
                             {% if event.has_image_url %}
-                            <header style="background: url({{ event.get_image_url }});" class="h-image">
+                            <header style="background-image: url({{ event.get_image_url }});" class="h-image">
                             {% else %}
                             <header class="cat-{{ event.category.pk }}">
                             {% endif %}