/* ==============================
   WRAPPER
============================== */
.villa-calendar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ==============================
   NAVIGATION
============================== */
.villa-calendar-wrapper .nav {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.villa-calendar-wrapper .nav button {
    background-color: #fff;
    color: #2C3E50;
    border: 1px solid #DADADA;
    border-radius: 4px;
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.villa-calendar-wrapper .nav button:hover {
    background-color: #476e54;
    color: #fff;
    border-color: #476e54;
}

/* ==============================
   CONTAINER DES MOIS
============================== */
.villa-calendar {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: stretch;
}

/* ==============================
   MOIS
============================== */
.villa-calendar .month {
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    padding: 18px 22px 22px;
    width: 340px;
    text-align: center;
    animation: fadeUp 0.4s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==============================
   TITRE MOIS
============================== */
.villa-calendar .month h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 14px;
    text-transform: capitalize;
}

/* ==============================
   JOURS
============================== */
.villa-calendar .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
}

/* CASE JOUR */
.villa-calendar .days div {
    position: relative;
    padding: 9px 0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* PASSÉ */
.villa-calendar .days div.past {
    color: #C4C8CC;
}

/* DISPONIBLE */
.villa-calendar .days div.available {
    background-color: #2ecc71;
    color: #fff;
}

/* RÉSERVÉ */
.villa-calendar .days div.booked {
    background-color: #e74c3c;
    color: #fff;
}

/* ==============================
   TOOLTIP (AU SURVOL)
============================== */
.villa-calendar .days div::after {
    content: attr(data-status);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #2C3E50;
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.villa-calendar .days div::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #2C3E50 transparent transparent transparent;
    opacity: 0;
    transition: all 0.2s ease;
}

.villa-calendar .days div:hover::after,
.villa-calendar .days div:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 992px) {
    .villa-calendar {
        flex-direction: column;
        gap: 30px;
    }
    .villa-calendar .month {
        width: 92%;
    }
}