:root { 
    --pink: #ff385c; 
    --text: #222; 
    --border: #ebebeb; 
    --dark-border: #b0b0b0;
    --grey: #717171;
}

* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

body { 
    margin: 0; 
    background: #fff; 
    min-height: 100vh; 
    width: 100%; 
    color: var(--text); 
    overflow-x: hidden; 
    overflow-y: auto; 
}

/* --- HEADER --- */
.header-overlay { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    padding: 15px; 
    z-index: 2000; 
    transition: background 0.3s, box-shadow 0.3s;
}

.header-overlay.scrolled {
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 12px rgba(0,0,0,0.08);
}

.right-icons { display: flex; gap: 10px; }

.circle-btn { 
    background: #fff; 
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    cursor: pointer; 
}

.heart-icon.active {
    color: var(--pink);
    font-weight: 900;
}

/* --- HERO GALLERY --- */
.hero-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 45vh; z-index: 1; background: #000; }
.hero-gallery { width: 100%; height: 100%; position: relative; overflow: hidden; }

.gallery-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    visibility: hidden;
    z-index: 1; 
    transition: opacity 0.4s ease-in-out; 
}

.gallery-img.active { 
    opacity: 1; 
    visibility: visible;
    z-index: 5; 
}

.counter-badge { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    background: rgba(0,0,0,0.7); 
    color: #fff; 
    padding: 4px 12px; 
    border-radius: 15px; 
    font-size: 12px; 
    z-index: 1000; 
}

.tap { position: absolute; top: 0; width: 50%; height: 100%; z-index: 999; cursor: pointer; }
.tap.left { left: 0; }
.tap.right { right: 0; }

/* --- SCROLL CONTENT --- */
.scroll-wrapper { 
    position: relative; 
    z-index: 10; 
    width: 100%; 
    pointer-events: none; 
}

.spacer-top { height: 45vh; background: transparent; }

.main-content { 
    background: #fff; 
    border-radius: 24px 24px 0 0; 
    min-height: 100vh; 
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1); 
    position: relative; 
    margin-top: -20px;
    pointer-events: auto; 
}

.drag-handle { width: 40px; height: 5px; background: #ddd; border-radius: 3px; margin: 12px auto; }
.main-padding { padding: 10px 24px 200px 24px; }

.listing-title { font-size: 24px; font-weight: 600; margin: 10px 0; }
.rating-line { font-size: 14px; margin-bottom: 15px; font-weight: 600; }
.separator { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; }

.favorite-banner { display: flex; border: 1px solid #dddddd; border-radius: 12px; margin: 20px 0; padding: 15px 0; text-align: center; }
.fav-section { flex: 1; display: flex; flex-direction: column; align-items: center; }
.border-right { border-right: 1px solid #dddddd; }
.border-left { border-left: 1px solid #dddddd; }

.host-profile { display: flex; align-items: center; padding: 8px 0; }
.host-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-right: 16px; }

/* --- ÉQUIPEMENTS (CORRIGÉ) --- */
.amenity-item { 
    display: flex; 
    align-items: center; 
    margin-bottom: 16px; 
    font-size: 16px; 
}

/* Correction : Largeur fixe pour que les textes soient parfaitement alignés */
.amenity-item i { 
    width: 28px; 
    margin-right: 12px; 
    font-size: 18px; 
    text-align: center;
    color: var(--text);
}

.btn-outline {
    background: #fff; border: 1px solid var(--text); color: var(--text);
    padding: 13px 23px; border-radius: 8px; font-size: 16px; font-weight: 600; width: 100%; cursor: pointer;
}

/* --- BOOKING WIDGET --- */
.booking-widget { border: 1px solid var(--dark-border); border-radius: 12px; overflow: hidden; margin-top: 15px; }
.booking-row { display: flex; padding: 12px; cursor: pointer; }
.border-bottom { border-bottom: 1px solid var(--dark-border); }
.booking-col { flex: 1; }
.booking-col label { display: block; font-size: 10px; font-weight: 800; color: var(--grey); }

.booking-footer { 
    position: fixed; bottom: 0; width: 100%; background: #fff; 
    border-top: 1px solid #eee; padding: 16px 24px; display: flex; 
    justify-content: space-between; align-items: center; z-index: 5000; 
}
.btn-reserve { background: var(--pink); color: #fff; border: none; padding: 14px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn-reserve:disabled { background: #ddd; cursor: not-allowed; }

/* --- MODALS & CALENDAR (AMÉLIORÉ) --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: none; align-items: flex-end; }
.modal-sheet { background: #fff; width: 100%; border-radius: 20px 20px 0 0; padding: 24px; max-height: 90vh; overflow-y: auto; }

/* Style pour les sélecteurs de mois/année dans le calendrier */
.clean-select {
    background-color: #f7f7f7;
    border: 1px solid var(--border);
    font-weight: 600;
    color: var(--text);
    outline: none;
    transition: border 0.2s;
}
.clean-select:focus {
    border-color: var(--text);
}

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 10px; }
.calendar-day { 
    aspect-ratio: 1/1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 500;
}
.calendar-day.selected { background: var(--text) !important; color: #fff !important; border-radius: 50%; }

.btn-dark { width: 100%; background: var(--text); color: #fff; padding: 14px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; margin-top: 15px; }

.total-underline { text-decoration: underline; font-size: 14px; color: var(--text); font-weight: 600; margin-top: 2px; }