/* ════════════════════════════════════════════════════════════════
   CERFACIL — Prise de rendez-vous (widget moderne type planning)
   Surcharge propre des classes existantes du calendrier.
   ════════════════════════════════════════════════════════════════ */
/* Centrage du module de réservation */
.main-p2 {
    display: block !important;
    width: auto !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 8px 20px 48px !important;
}
.booking-heading { text-align: center; max-width: 640px; margin: 0 auto 28px !important; }
.booking-heading h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--cf-ink); letter-spacing: -0.02em; margin: 0 0 10px; }
.booking-heading p { font-size: 16px; color: var(--cf-text); line-height: 1.6; margin: 0; }

.booking-container {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 0 !important;
    background: #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(74, 64, 255, 0.14) !important;
    border: 1px solid rgba(93, 111, 255, 0.12);
    overflow: hidden;
}

/* ---- Colonne gauche : présentateur ---- */
.booking-left {
    flex: 0 0 300px !important;
    background: linear-gradient(160deg, #5D6FFF 0%, #4A40FF 100%) !important;
    color: #fff !important;
    padding: 34px 28px !important;
    border: none !important;
}
.presenter-info { text-align: left; }
.presenter-photo {
    width: 88px !important; height: 88px !important;
    border-radius: 50% !important; object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.35);
    margin-bottom: 14px;
}
.booking-left h3 { color: #fff !important; font-size: 15px !important; opacity: 0.9; margin: 0 0 2px !important; }
.booking-left h2 { color: #fff !important; font-size: 22px !important; margin: 0 0 18px !important; line-height: 1.25; }
.booking-left .duration,
.booking-left .conference-info {
    display: flex; align-items: flex-start; gap: 9px;
    background: rgba(255, 255, 255, 0.12);
    padding: 10px 13px; border-radius: 12px;
    margin-bottom: 10px; font-size: 13.5px;
}
.booking-left .duration i,
.booking-left .conference-info i { margin-top: 2px; opacity: 0.9; }
.booking-left .heure { color: #fff !important; }

/* ---- Colonne droite : calendrier ---- */
.booking-right { flex: 1 !important; padding: 30px 32px !important; }
.booking-right > h2 { font-size: 19px; color: var(--cf-ink); margin: 0 0 18px; }

.calendar-navigation {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
#current-month { font-weight: 700; color: var(--cf-ink); text-transform: capitalize; }
.nav-button {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(93, 111, 255, 0.2); background: #fff;
    color: var(--cf-primary-dark); cursor: pointer; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s var(--cf-ease);
}
.nav-button:hover { background: var(--cf-primary); color: #fff; border-color: var(--cf-primary); }

.weekdays, .days { display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.weekdays {
    margin-bottom: 8px;
    font-size: 11px; font-weight: 700; color: #9aa0c4; text-align: center; text-transform: uppercase;
}
.days .day {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 14px; color: var(--cf-ink);
    cursor: pointer; border: 1px solid transparent;
    transition: all 0.18s var(--cf-ease);
}
.days .day:not(.inactive):not(.empty):hover {
    background: rgba(93, 111, 255, 0.1); border-color: rgba(93, 111, 255, 0.25);
}
.days .day.empty { cursor: default; }
.days .day.inactive { color: #c7cadf; cursor: not-allowed; }
.days .day.today { font-weight: 700; color: var(--cf-primary-dark); box-shadow: inset 0 0 0 1.5px rgba(93,111,255,0.4); }
.days .day.selected {
    background: var(--cf-gradient) !important; color: #fff !important;
    border-color: transparent !important; box-shadow: 0 8px 20px rgba(74,64,255,0.3);
}

/* ---- Créneaux horaires ---- */
.time-slots-container { margin-top: 24px; }
.time-slots-container h3,
.booking-form h3 { font-size: 15px; color: var(--cf-ink); margin-bottom: 12px; }
.time-slots { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.time-slot {
    padding: 11px 8px; text-align: center; border-radius: 12px;
    border: 1.5px solid rgba(93, 111, 255, 0.22); background: #fff;
    color: var(--cf-primary-dark); font-weight: 600; font-size: 14px; cursor: pointer;
    transition: all 0.18s var(--cf-ease);
}
.time-slot:hover { border-color: var(--cf-primary); background: rgba(93,111,255,0.06); transform: translateY(-1px); }
.time-slot.selected, .time-slot.active {
    background: var(--cf-gradient) !important; color: #fff !important; border-color: transparent !important;
}

/* ---- Formulaire ---- */
.booking-form { margin-top: 26px; border-top: 1px solid #eef0fb; padding-top: 22px; }
.booking-form .submit-button {
    background: var(--cf-gradient) !important; border-radius: 50px !important;
    font-weight: 600; padding: 14px 20px !important;
}

@media (max-width: 760px) {
    .booking-container { flex-direction: column !important; }
    .booking-left { flex: none !important; }
}