/* ===== CSS Voyageurs - Modales génériques ===== */

.generic-modal { position: fixed; top:0; left:0; width:100%; height:100%; z-index:2000; opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease; }
.generic-modal.show { opacity:1; visibility:visible; }
.modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.95); cursor:pointer; z-index:2001; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-container { position: fixed; top:50%; left:50%; transform: translate(-50%,-50%) scale(.85); width:40%; max-height:90vh; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow:hidden; opacity:0; transition: opacity .3s ease, transform .3s ease; z-index:2002; }
.generic-modal.show .modal-container { opacity:1; transform: translate(-50%,-50%) scale(1); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding: 24px 32px; background: linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%); border-bottom:1px solid #e2e8f0; }
.modal-close { background:none; border:none; color:#64748b; cursor:pointer; padding:8px; border-radius:8px; transition: all .3s ease; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background: rgba(0,0,0,.1); color:#1a1a1a; transform: scale(1.1); }
.modal-body { max-height: calc(90vh - 80px); overflow-y:auto; }
.modal-content { padding: 32px; }
.modal-section { margin-bottom: 32px; }
.modal-section:last-child { margin-bottom:0; }
.modal-image { position:relative; height: 250px; overflow:hidden; border-radius: 12px; margin-bottom: 24px; }
.modal-image img { width:100%; height:100%; object-fit:cover; }
.modal-image-overlay { position:absolute; left:0; right:0; bottom:0; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: 24px; }
.modal-image-info { display:flex; justify-content: space-between; align-items:center; color:#fff; }
.modal-type, .modal-duration { background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 20px; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.modal-price-section { display:flex; justify-content: space-between; align-items:center; margin-bottom: 24px; }
.modal-price { display:flex; align-items: baseline; gap: 4px; }
.price-amount { font-size: var(--font-size-6xl); font-weight: var(--font-weight-extrabold); }
.price-currency { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
.modal-booking-btn { background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); color:#fff; border:none; padding: 12px 24px; border-radius: 8px; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); cursor:pointer; transition: all .3s ease; }
.modal-booking-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.modal-features-list { list-style:none; padding:0; }
.modal-features-list li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; position:relative; padding-left:24px; }
.modal-features-list li:before { content:"✓"; position:absolute; left:0; color:#1a1a1a; font-weight: var(--font-weight-bold); }
.modal-timeline { position:relative; padding: 12px 0; }
.modal-timeline::before { content:''; position:absolute; left:61px; top:20px; bottom:20px; width:2px; background:#1a1a1a; border-radius:1px; }
.timeline-step { position:relative; display:flex; align-items:center; gap:16px; margin-bottom:16px; transition: all .3s ease; }
.timeline-step:last-child { margin-bottom:0; }
.timeline-time { background:#1a1a1a; color:#fff; padding:6px 12px; border-radius:6px; font-weight: var(--font-weight-semibold); min-width:65px; text-align:center; font-size: var(--font-size-md); z-index:1; }
.timeline-content { flex:1; background:#f8fafc; padding:12px 16px; border-radius:8px; border-left:3px solid #1a1a1a; font-size: var(--font-size-lg); line-height: var(--line-height-base); color:#334155; }

/* Responsive modales */
@media (max-width:768px){
  .modal-container{ width:85%; max-height:95vh; left:50%; transform: translate(-50%,-50%) scale(.85); }
  .modal-header{ padding:16px 20px; }
  .modal-content{ padding:20px; }
  .modal-image{ height:200px; }
  .modal-image-overlay{ padding:20px; }
  .modal-image-info{ flex-direction:column; align-items:flex-start; gap:8px; }
  .modal-price-section{ flex-direction:column; gap:16px; align-items:stretch; }
}
@media (max-width:480px){
  .modal-container{ width:95%; max-height:98vh; left:50%; transform: translate(-50%,-50%) scale(.85); max-width: calc(100vw - 20px); }
  .modal-header{ padding:12px 16px; }
  .modal-content{ padding:16px; }
  .modal-image{ height:180px; }
  .modal-image-overlay{ padding:16px; }
}