.time-div-active {
  max-width: 900px;
}

#calendar-section #calendar {
  font-family: Lato, sans-serif;
  font-weight: 300;
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  min-height: 400px;
}

#calendar-section table {
  border: none;
}

#calendar-section .fc-theme-standard td, #calendar-section .fc-theme-standard th {
  border: none;
}

#calendar-section .fc-toolbar-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  text-align: center;
}

#calendar-section .fc-today-button {
  display: none;
}

#calendar-section .fc-prev-button, #calendar-section .fc-next-button {
  color: #333;
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  outline: none;
  font-size: 1.2rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

#calendar-section .fc-prev-button:hover, #calendar-section .fc-next-button:hover {
  background-color: #f8f9fa;
  border-color: #007bff;
  color: #007bff;
}

#calendar-section .fc .fc-button-primary:focus {
  -webkit-box-shadow: 0;
          box-shadow: 0;
}

#calendar-section .fc-col-header-cell {
  font-weight: 500;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
  padding: 10px 0;
}

#calendar-section .fc-daygrid-day {
  font-weight: 400;
  color: #333;
  text-align: center;
}

#calendar-section .fc-daygrid-day-events {
  margin: 0;
}

#calendar-section .fc-daygrid-day-number {
  margin: auto;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #333;
  padding: 8px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#calendar-section .fc-day-today {
  background-color: #f8f9fa;
}

#calendar-section .fc-day-today .fc-daygrid-day-number {
  background-color: transparent;
  color: #333;
}

#calendar-section .fc-day-disabled {
  background-color: white;
  color: #ccc;
}

#calendar-section .fc-day-disabled .fc-daygrid-day-number {
  color: #ccc;
}

/* Styles pour la sélection de dates */
#calendar-section .fc-daygrid-day.fc-day-selected {
  background-color: dodgerblue!important;
}

#calendar-section .fc-daygrid-day.fc-day-selected .fc-daygrid-day-number {
  background-color: dodgerblue!important;
  color: white;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
}

/* Hover effect pour les dates */
#calendar-section .fc-daygrid-day:hover .fc-daygrid-day-number {
  background-color: #e3f2fd;
  color: #007bff;
}

#schedule-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

#available-times-div {
  display: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-left: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  min-width: 200px;
  max-width: 250px;
}

#available-times-div h4 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
}

.time-slot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 15px;
}

.time-btn, .time-slot-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 2px solid #007bff;
  color: #007bff;
  background-color: white;
  width: 100%;
  font-weight: 600;
  font-size: 1rem;
  /* margin-bottom: 0; */
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.time-btn:hover, .time-slot-btn:hover {
  background-color: #007bff;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.time-btn:active, .time-slot-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.time-btn:focus, .time-slot-btn:focus {
  background-color: #0056b3;
  color: white;
  outline: none;
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.confirm-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  margin-left: 10px;
  background: #28a745;
  color: white;
  border: none;
  padding: 15px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.confirm-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

/* Message d'absence de créneaux */
#available-times-div p {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  margin: 20px 0;
  padding: 20px;
  background: #e9ecef;
  border-radius: 6px;
  border-left: 4px solid #dc3545;
}

/* ===== RÈGLES RESPONSIVE COMPLÈTES ===== */

/* === ÉCRANS TRÈS LARGES (4K, Ultra-wide) === */
@media (min-width: 1920px) {
  #schedule-div {
    gap: 50px;
    max-width: 1800px;
    margin: 0 auto;
  }
  
  #calendar {
    flex: 1;
    min-height: 500px;
    width: 100%;
    max-width: 500px;
  }
  
  #available-times-div {
    flex: 0 0 250px;
    min-width: 200px;
    max-width: 250px;
    padding: 30px;
  }
  
  .time-slot-btn {
    padding: 18px 25px;
    font-size: 1.1rem;
  }
  
  .confirm-btn {
    padding: 18px 25px;
    font-size: 1.1rem;
  }
}

/* === ÉCRANS LARGES (Desktop standard) === */
@media (min-width: 1440px) and (max-width: 1919px) {
  #schedule-div {
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  #calendar {
    flex: 1;
    min-height: 450px;
    width: 100%;
    max-width: 500px;
  }
  
  #available-times-div {
    flex: 0 0 250px;
    min-width: 200px;
    max-width: 250px;
    padding: 25px;
  }
}

/* === ÉCRANS MOYENS (Laptop) === */
@media (min-width: 1024px) and (max-width: 1439px) {
  #schedule-div {
    gap: 30px;
  }
  
  #calendar {
    flex: 1;
    min-height: 400px;
    width: 100%;
    max-width: 500px;
  }
  
  #available-times-div {
    flex: 0 0 250px;
    min-width: 200px;
    max-width: 250px;
    padding: 10px;
  }
}

/* === ÉCRANS PETITS (Tablette paysage) === */
@media (min-width: 768px) and (max-width: 1023px) {
  #schedule-div {
    gap: 25px;
  }
  
  #calendar {
    flex: 1;
    min-height: 380px;
    width: 100%;
    max-width: 500px;
  }
  
  #available-times-div {
    flex: 0 0 220px;
    min-width: 180px;
    max-width: 220px;
    padding: 10px;
  }
  
  .time-slot-btn {
    padding: 12px 18px;
    font-size: 0.95rem;
  }
  
  .confirm-btn {
    padding: 12px 18px;
    font-size: 0.95rem;
  }
}

/* === ÉCRANS TRÈS PETITS (Tablette portrait) === */
@media (min-width: 481px) and (max-width: 767px) {
  #schedule-div {
    display: block;
    gap: 20px;
  }
  
  #calendar {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    min-height: 350px;
  }
  
  #available-times-div {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 10px;
  }
  
  .time-slot {
    flex-direction: column;
    gap: 10px;
  }
  
  .time-slot-btn {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .confirm-btn {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }
}

/* === ÉCRANS MOBILES (Smartphone) === */
@media (max-width: 480px) {
  #schedule-div {
    display: block;
    gap: 15px;
  }
  
  #calendar {
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
    min-height: 320px;
    padding: 15px;
  }
  
  #available-times-div {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 15px;
  }
  
  #available-times-div h4 {
    font-size: 1.1em;
    margin-bottom: 15px;
  }
  
  .time-slot {
    flex-direction: column;
    gap: 8px;
  }
  
  .time-slot-btn {
    width: 100%;
    margin-bottom: 8px;
    padding: 12px 15px;
    font-size: 0.9rem;
  }
  
  .confirm-btn {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    padding: 12px 15px;
    font-size: 0.9rem;
  }
  
  /* Masquer le calendrier quand les créneaux sont affichés sur mobile */
  #schedule-div.show-slots #calendar {
    display: none;
  }
  
  #schedule-div.show-slots #available-times-div {
    display: block;
    width: 100%;
    max-width: 100vw;
    margin: 0;
  }
}

/* === OPTIMISATIONS SPÉCIALES === */

/* Écrans haute densité (Retina, etc.) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #calendar {
    border-radius: 12px;
  }
  
  #available-times-div {
    border-radius: 12px;
  }
  
  .time-slot-btn, .confirm-btn {
    border-radius: 8px;
  }
}

/* Écrans ultra-larges (21:9, etc.) */
@media (min-width: 2560px) {
  #schedule-div {
    gap: 60px;
    max-width: 2200px;
  }
  
  #calendar {
    flex: 4;
    min-height: 600px;
    max-width: 1000px;
  }
  
  #available-times-div {
    flex: 1;
    min-width: 400px;
    /* max-width: 500px; */
    padding: 35px;
  }
  
  .time-slot-btn {
    padding: 20px 30px;
    font-size: 1.2rem;
  }
  
  .confirm-btn {
    padding: 20px 30px;
    font-size: 1.2rem;
  }
}

/* Application de la police Lato à tous les éléments du calendrier FullCalendar */
/* Exclusion des icônes pour préserver la police d'icônes de FullCalendar */
.fc,
.fc-theme-standard,
.fc-toolbar,
.fc-toolbar-title,
.fc-col-header-cell,
.fc-daygrid-day,
.fc-daygrid-day-number,
.fc-button-primary,
.fc-daygrid-day-top,
.fc-daygrid-day-frame,
.fc-scrollgrid {
  font-family: Lato, sans-serif !important;
}

/* Les boutons du calendrier utilisent Lato SAUF pour les icônes à l'intérieur */
.fc-button:not(.fc-icon):not(.fc-icon-chevron-left):not(.fc-icon-chevron-right) {
  font-family: Lato, sans-serif !important;
}

/* Préserver la police d'icônes 'fcicons' pour les icônes FullCalendar */
.fc-icon,
.fc-icon::before,
.fc-icon-chevron-left,
.fc-icon-chevron-left::before,
.fc-icon-chevron-right,
.fc-icon-chevron-right::before {
  font-family: 'fcicons' !important;
}