css

modules/family-calendar/family-calendar.css

@@ -824,55 +824,71 @@
    8. OPTIMISATIONS MOBILES ET ERGONOMIE (AJOUTS)
    ========================================================= */
 
-/* --- A. COLONNES MOIS ET SEMAINE FIGÉES (Sticky Left) --- */
+/* =========================================================
+   8. OPTIMISATIONS MOBILES ET ERGONOMIE
+   ========================================================= */
 
-/* 1. Les cellules du corps (td) : Fixées uniquement à gauche */
+/* --- A. COLONNES MOIS ET SEMAINE FIGÉES (Double Axe Blindé) --- */
-.col-sticky-mois {
+
+/* 1. On force une largeur stricte pour éviter le décalage de la 2ème colonne */
+.col-month {
+  box-sizing: border-box !important;
+  width: 54px !important;
+  min-width: 54px !important;
+  max-width: 54px !important;
+}
+
+/* 2. Fixation horizontale pour les cellules (Valeurs) */
+#planningTable tbody td.col-sticky-mois {
+  position: -webkit-sticky !important;
   position: sticky !important;
   left: 0 !important;
   z-index: 15 !important;
-  background: white;
+  background: white !important;
 }
 
-.col-sticky-sem {
+#planningTable tbody td.col-sticky-sem {
+  position: -webkit-sticky !important;
   position: sticky !important;
-  left: 52px !important; /* 50px de largeur + 2px de bordure */
+  left: 54px !important; /* Exactement la largeur de la colonne Mois */
-  z-index: 14 !important; /* Légèrement en dessous du mois en cas de chevauchement */
+  z-index: 14 !important;
-  background: white;
+  background: white !important;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); /* Ombre pour marquer la fin de la zone figée */
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
 }
 
-/* 2. Les En-têtes (th) : Fixés en Haut ET à Gauche (Priorité absolue) */
+/* 3. Fixation 2D (Haut + Gauche) ultra prioritaire pour les En-têtes */
-#planningTable thead th.col-sticky-mois {
+#planningTable thead tr th.col-sticky-mois {
+  position: -webkit-sticky !important;
   position: sticky !important;
   top: 0 !important;
   left: 0 !important;
-  z-index: 30 !important; /* Le plus haut niveau, passe au-dessus de TOUT */
+  z-index: 30 !important; /* Le plus haut niveau possible */
   background: var(--bg-header) !important;
 }
 
-#planningTable thead th.col-sticky-sem {
+#planningTable thead tr th.col-sticky-sem {
+  position: -webkit-sticky !important;
   position: sticky !important;
   top: 0 !important;
-  left: 52px !important;
+  left: 54px !important;
-  z-index: 29 !important; /* Reste sous la colonne Mois, mais au-dessus du reste du tableau */
+  z-index: 29 !important; /* Sous Mois, mais au dessus du reste */
   background: var(--bg-header) !important;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
 }
 
 /* --- B. MENU BOTTOM SHEET (Mobile Uniquement) --- */
 @media (max-width: 768px) {
   .fc-selection-menu {
-    position: fixed !important; /* Fixé à l'écran, pas au tableau */
+    position: fixed !important;
     top: auto !important;
     left: 0 !important;
     bottom: 0 !important;
     width: 100% !important;
-    border-radius: 24px 24px 0 0; /* Bords arrondis en haut */
+    border-radius: 24px 24px 0 0;
     box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
     padding: 24px 20px;
-    /* Padding dynamique pour les iPhone (encoche du bas) */
     padding-bottom: env(safe-area-inset-bottom, 24px);
-    transform: translateY(100%); /* Caché en bas par défaut */
+    transform: translateY(100%);
     animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     max-height: 85vh;
     overflow-y: auto;
@@ -884,7 +900,6 @@
     }
   }
 
-  /* Optionnel : On grossit un peu les boutons pour les gros doigts */
   .fc-menu-btn,
   .fc-menu-danger {
     padding: 10px;
@@ -892,3 +907,28 @@
     font-weight: 600;
   }
 }
+
+/* --- C. RÉDUCTION DES ICÔNES SUR MOBILE (Nouveau) --- */
+@media (max-width: 768px) {
+  /* Icône Centre (Emoji) */
+  .fc-day--centre::after {
+    font-size: 9px !important;
+    top: 1px !important;
+    right: 1px !important;
+  }
+
+  /* Icône Avis (SVG) */
+  .fc-day--avis::after {
+    width: 10px !important;
+    height: 10px !important;
+    top: 1px !important;
+    right: 1px !important;
+  }
+
+  /* Icône Pep Malade (Emoji) */
+  .fc-pep-sick-emoji {
+    font-size: 9px !important;
+    bottom: 1px !important;
+    right: 1px !important;
+  }
+}