/* ----- Base ----- */
.DateSelect {
	width: 100%;
}

.OsProduitPlanning {
  background-color: #F9F8F3;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ----- Navigation des mois ----- */
.PlanningEntete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.PlanningMoisPrec,
.PlanningMoisSuiv {
  color: #1A2948;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
}

/* ----- Mois / année select ----- */
.DateSelect select,
.OsWrapSelect select {
  background-color: #fff;
  color: #1A2948;
  border: 1px solid #1A2948;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  appearance: none;
  outline: none;
}

.DateSelect select:hover,
.OsWrapSelect select:hover {
  border-color: #BA6B31;
}

/* ----- Calendrier ----- */
.ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.ui-datepicker-calendar th {
  text-align: center;
  padding: 8px;
  color: #1A2948;
  font-weight: bold;
}

.ui-datepicker-calendar td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.ui-datepicker-calendar td a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Aujourd'hui */
.ui-datepicker-today {
  background-color: #BA6B31 !important;
  color: #fff !important;
  border-radius: 5px;
}

/* Date sélectionnée */
.ui-state-active {
  background-color: #1A2948 !important;
  color: #fff !important;
  font-weight: bold;
}

/* Disponibles */
.etat1 .ui-state-default {
  background-color: #F9F8F3 !important;
  color: #030B1B !important;
}

.etat1:hover .ui-state-default {
  background-color: #BA6B31 !important;
  color: white !important;
}

/* Non disponibles */

.etat2 .ui-state-default,
.ui-datepicker-unselectable {
  background-color: #e0e0e0 !important;
  color: #999 !important;
  cursor: not-allowed;
}

/* ----- Boîte de réservation (formulaire à droite) ----- */
.FormBox {
  font-weight: bold;
  margin-top: 20px;
  color: #1A2948;
}

/* Sélecteurs durée et capacité */
.ChoixDuree,
.ChoixCapacite {
  margin-top: 15px;
}

.ChoixDuree select,
.ChoixCapacite select {
  width: 100%;
  border: 1px solid #1A2948;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: #fff;
  color: #1A2948;
  font-size: 1em;
  outline: none;
}

.ChoixDuree select:focus,
.ChoixCapacite select:focus {
  border-color: #BA6B31;
}

/* Prix */
.PrixLabel {
  font-weight: bold;
  color: #1A2948;
  margin-top: 20px;
}

.PrixValeur {
  font-size: 1.4em;
  color: #030B1B;
  margin-top: 5px;
}

/* ----- Bouton Réserver ----- */
.BtnReserver {
  background-color: #BA6B31;
  color: #fff;
  padding: 14px;
  text-align: center;
  border-radius: 8px;
  margin-top: 25px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  transition: background-color 0.3s ease;
  border: none;
}

.BtnReserver:hover {
  background-color: #a65b2a;
}

/* Message ou indication (prix, durée, etc.) */
.InfoSupp {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
}