temps / modale détail / drag / waze

modules/holidays/holidays.css

@@ -788,7 +788,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
 
 .hol-cp-header {
   background: var(--bg-page);
-  padding: 12px 15px;
+  padding: 6px 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1485,3 +1485,157 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
     justify-content: center;
   }
 }
+
+/* --- EN-TÊTE DES ÉTAPES ROADTRIP --- */
+.hol-step-header {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Ligne 1 : Icône + Titre + Poignée */
+.hol-step-row-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+}
+
+.hol-step-icon {
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.hol-step-title {
+  flex: 1;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text-main);
+  line-height: 1.3;
+  word-break: break-word;
+  cursor: pointer;
+  padding-top: 4px;
+}
+
+.hol-step-controls {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.hol-drag-handle {
+  color: #cbd5e1;
+  font-size: 1.4rem;
+  cursor: grab;
+  user-select: none;
+  line-height: 1;
+}
+
+.hol-step-arrows {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.hol-step-arrows button {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+/* Ligne 2 : Tags/Dates + Prix/Actions */
+.hol-step-row-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 5px;
+  width: 100%;
+}
+
+.hol-step-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.hol-tag-return {
+  background: #fff7ed;
+  color: #ea580c;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border: 1px solid #ffedd5;
+  line-height: 1.2;
+}
+
+.hol-step-date {
+  font-size: 0.8rem;
+  color: #64748b;
+  background: var(--bg-page);
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--border-light);
+  line-height: 1.2;
+}
+
+.hol-step-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto; /* Pousse le prix et les boutons tout à droite */
+}
+
+.hol-step-price {
+  font-weight: 800;
+  color: var(--primary);
+  white-space: nowrap;
+}
+
+/* Optimisation Mobile */
+@media (max-width: 768px) {
+  .hol-step-row-bottom {
+    padding-left: 0; /* Sur mobile, on prend toute la largeur pour éviter d'écraser les boutons */
+  }
+}
+
+/* --- LIGNES DE DÉPENSES --- */
+.hol-expense-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.hol-expense-name {
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+
+.hol-expense-price-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap; /* Interdit le passage à la ligne */
+  flex-shrink: 0; /* Empêche le bloc d'être écrasé */
+  margin-top: 2px;
+}
+
+.hol-expense-price-group .status-paid,
+.hol-expense-price-group .status-pending {
+  line-height: 1;
+}