meteo mobile

modules/holidays/holidays.css

@@ -482,6 +482,26 @@ body.no-scroll {
     max-height: 100vh;
     border-radius: 0;
   }
+  @media (max-width: 768px) {
+    .hol-date-weather-wrapper {
+      gap: 6px; /* On rapproche la météo de la date sur mobile */
+    }
+
+    /* On aligne le haut de la carte au cas où le contenu passe sur 2 lignes */
+    .hol-cp-header {
+      align-items: flex-start;
+    }
+
+    /* On autorise le titre et les dates à prendre la place nécessaire */
+    .hol-cp-info-group {
+      flex: 1;
+      min-width: 0; /* Empêche le flexbox de "déborder" de l'écran */
+    }
+
+    .hol-cp-title {
+      white-space: normal; /* Permet au titre de l'étape de passer à la ligne si besoin */
+    }
+  }
 }
 
 /* --- 11. CALENDRIER & DATES (Force Light Theme) --- */
@@ -1219,3 +1239,20 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
 .pf-weather-icon {
   font-size: 0.9rem;
 }
+
+/* Conteneur Date + Météo */
+.hol-date-weather-wrapper {
+  font-size: 0.75rem;
+  color: #64748b;
+  font-weight: normal;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap; /* Le secret pour le responsive ! */
+}
+
+/* On s'assure que le texte de la date ne se coupe pas au milieu d'un mot */
+.hol-step-dates {
+  white-space: nowrap;
+}

modules/holidays/views/detail.php

@@ -204,8 +204,8 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
                                             <span style="background: #fff7ed; color: #ea580c; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; margin-left: 5px; border: 1px solid #ffedd5; vertical-align: middle;">🏁 <?= tr('hdl_return') ?></span>
                                         <?php endif; ?>
                                         <?php if (!empty($step['step_start_date']) && !empty($step['step_end_date'])): ?>
-                                            <div style="font-size:0.75rem; color:#64748b; font-weight:normal; margin-top:2px; display: flex; align-items: center; gap: 10px;">
+                                            <div class="hol-date-weather-wrapper">
-                                                <span>
+                                                <span class="hol-step-dates">
                                                     <?= tr('hdl_from') ?> <?= date('d/m', strtotime($step['step_start_date'])) ?> <?= tr('hdl_to') ?> <?= date('d/m', strtotime($step['step_end_date'])) ?>
                                                 </span>
                                                 <div class="hol-weather-info"></div>