/* Styles responsifs supplémentaires pour l'onglet Calendrier & Réservation */

/* Ajustements pour les tablettes et appareils moyens */
@media (max-width: 992px) {
  /* Layout principal */
  .reservation-layout {
    flex-direction: column;
  }
  
  /* Calendrier et carte */
  .calendar-container, 
  .map-container {
    width: 100%;
    max-width: 100%;
  }
  
  /* Hauteur de la carte */
  .mapbox-map {
    height: 350px;
  }
  
  /* Récapitulatif */
  .summary-details {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Formulaire */
  .reservation-form {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ajustements pour les mobiles */
@media (max-width: 768px) {
  /* Onglets */
  .tabs-header {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .tab-btn {
    flex: 0 0 auto;
    margin-bottom: 10px;
    font-size: 0.9rem;
    padding: 8px 12px;
  }
  
  /* Calendrier */
  .calendar-container, 
  .map-container, 
  .reservation-summary {
    padding: 15px;
  }
  
  .calendar-days span,
  .calendar-dates span {
    padding: 8px;
    font-size: 0.85rem;
  }
  
  /* Créneaux horaires */
  .time-slots-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .time-slot {
    padding: 8px;
    font-size: 0.85rem;
    text-align: center;
  }
  
  /* Carte */
  .mapbox-map {
    height: 300px;
  }
  
  /* Récapitulatif */
  .summary-details {
    grid-template-columns: 1fr;
  }
  
  /* Formulaire */
  .reservation-form {
    grid-template-columns: 1fr;
  }
  
  /* Bouton de réservation */
  .btn-reserve-large {
    padding: 12px;
    font-size: 1rem;
  }
  
  /* Notification */
  .notification {
    max-width: 90%;
    left: 5%;
    right: 5%;
  }
  
  /* Modal de confirmation */
  .reservation-modal-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .confirmation-details {
    padding: 15px;
  }
  
  .confirmation-item {
    flex-direction: column;
    margin-bottom: 15px;
  }
  
  .confirmation-label {
    width: 100%;
    margin-bottom: 5px;
  }
}

/* Ajustements pour les petits mobiles */
@media (max-width: 480px) {
  /* Onglets */
  .tab-btn {
    font-size: 0.8rem;
    padding: 6px 10px;
    margin-right: 5px;
  }
  
  /* Calendrier */
  .calendar-days span,
  .calendar-dates span {
    padding: 6px;
    font-size: 0.8rem;
  }
  
  /* Créneaux horaires */
  .time-slots-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Carte */
  .mapbox-map {
    height: 250px;
  }
  
  /* Spot sélectionné */
  .spot-details {
    flex-direction: column;
    text-align: center;
  }
  
  .spot-icon {
    margin: 0 auto 10px;
  }
  
  /* Modal de confirmation */
  .reservation-modal-footer {
    flex-direction: column;
    gap: 10px;
  }
  
  .reservation-modal-footer .btn {
    width: 100%;
  }
}

/* Ajustements pour le mode sombre */
@media (prefers-color-scheme: dark) {
  .calendar-container,
  .map-container,
  .reservation-summary {
    background-color: #222;
    color: #f5f5f5;
  }
  
  .calendar-header {
    background-color: #333;
  }
  
  .calendar-days span {
    color: #aaa;
  }
  
  .date-disabled {
    color: #666;
  }
  
  .time-slot {
    background-color: #333;
    color: #f5f5f5;
  }
  
  .spot-details {
    background-color: #333;
  }
  
  .spot-info p {
    color: #ccc;
  }
  
  .form-control {
    background-color: #333;
    color: #f5f5f5;
    border-color: #444;
  }
  
  .form-control::placeholder {
    color: #888;
  }
  
  .notification,
  .reservation-modal-content {
    background-color: #222;
    color: #f5f5f5;
  }
  
  .reservation-modal-header,
  .reservation-modal-footer {
    border-color: #444;
  }
  
  .confirmation-details {
    background-color: #333;
  }
  
  .confirmation-label {
    color: #ccc;
  }
}

/* Ajustements pour les préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .reservation-container,
  .notification,
  .reservation-modal,
  .reservation-modal-content {
    animation: none;
  }
  
  .btn:hover,
  .time-slot:hover,
  .map-marker:hover {
    transform: none;
  }
}

/* Ajustements pour l'accessibilité */
.form-control:focus,
.time-slot:focus,
.btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Styles pour les états de focus visibles au clavier */
.keyboard-focus .form-control:focus,
.keyboard-focus .time-slot:focus,
.keyboard-focus .btn:focus {
  box-shadow: 0 0 0 3px rgba(42, 59, 154, 0.5);
}

/* Amélioration du contraste pour l'accessibilité */
.btn-reserve-large {
  background-color: #e6c000; /* Version plus foncée de #FFD700 pour un meilleur contraste */
}

/* Styles pour les écrans à haute densité de pixels */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .map-placeholder-img {
    image-rendering: -webkit-optimize-contrast;
  }
}