From 7eeec8829e6698f16a20f49cc1c54e049fd34084 Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Thu, 13 Nov 2025 23:42:33 +0100
Subject: calendrier responsive avec une modale en position fixe

---
 public/css/body.css     |  7 +++----
 public/css/calendar.css | 23 ++++++++++++++++++-----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/public/css/body.css b/public/css/body.css
index 8d5850d..4b11890 100644
--- a/public/css/body.css
+++ b/public/css/body.css
@@ -237,11 +237,10 @@ article a:hover
         display: block;
     }
 }
-@media screen and (max-width: 500px)
+@media screen and (max-width: 480px)
 {
-    main
-    {
-        padding: 10px;
+    main{
+        padding: 10px 0;
     }
     .empty_column
     {
diff --git a/public/css/calendar.css b/public/css/calendar.css
index d011f03..47efcbb 100644
--- a/public/css/calendar.css
+++ b/public/css/calendar.css
@@ -15,7 +15,6 @@
 #calendar{
     width: 1165px; /* on enlève le "gap" */
 }
-#event_modal{}
 .event_title_box{
     display: flex;
     align-items: center;
@@ -58,7 +57,7 @@ td .fc-timegrid-axis{
     border-radius: 5px;
 }
 
-@media screen and (max-width: 900px){
+@media screen and (max-width: 1024px){
     #calendar_zone{
         padding: 0;
     }
@@ -71,8 +70,23 @@ td .fc-timegrid-axis{
     .fc-header-toolbar{
         font-size: smaller;
     }
+    #event_modal{
+        position: fixed;
+        /* technique pour centrer un élément positionné */
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 4;
+    }
+    #event_modal > div{
+        background-color: #e3f3ff;
+        box-shadow: 1px 1px 3px black;
+    }
+    .event{
+        width: 250px;
+    }
 }
-@media screen and (max-width: 650px){
+@media screen and (max-width: 768px){
     .fc-header-toolbar{
         font-size: small;
     }
@@ -80,5 +94,4 @@ td .fc-timegrid-axis{
         font-size: 1.5em !important; /* au lieu de 1.75em */
     }
 }
-@media screen and (max-width: 550px){
-}
\ No newline at end of file
+@media screen and (max-width: 480px){}
\ No newline at end of file
-- 
cgit v1.2.3