/* Nouveau calendrier actif. Le calendrier jQuery UI historique reste disponible dans le template. */
.date-devis-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(176, 142, 35, .12), transparent 28rem),
    radial-gradient(circle at 92% 46%, rgba(84, 120, 125, .11), transparent 25rem),
    #f7f4ed;
  color: #555;
}

.date-devis-page::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(92vw, 980px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 142, 35, .55), transparent);
  content: "";
  transform: translateX(-50%);
}

.date-devis-page section:not(.no-padding) {
  position: relative;
}

.date-devis-page__content {
  position: relative;
  margin-top: -1.25rem;
  margin-bottom: 2rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgba(176, 142, 35, .26);
  border-radius: 24px;
  background: rgba(255, 253, 248, .92);
  box-shadow: 0 24px 60px rgba(65, 52, 29, .13), 0 2px 0 rgba(255,255,255,.8) inset;
}

.date-devis-page__content::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 110px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #54787d, #b08e23);
  content: "";
  transform: translateX(-50%);
}

.date-devis-page__content h2 {
  margin-top: 0;
  color: #b08e23;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  letter-spacing: .01em;
}

.date-devis-page__step-title {
  position: relative;
  z-index: 1;
  margin: 0 0 0 90px !important;
  padding-top: 15px;
  padding-left: 12px;
}

.date-devis-page__intro-content {
  margin-left: 90px;
  padding-left: 12px;
  margin-bottom: 50px;
}

.date-devis-page__content p,
.date-devis-page__content i {
  color: #555;
}

.date-devis-page__feedback {
  padding: 2.5rem 1rem 0;
}

.date-devis-page__success-card,
.date-devis-page__error-card {
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 14px 34px rgba(65, 52, 29, .12);
}

.date-devis-page__success-card {
  border: 1px solid rgba(176, 142, 35, .35);
  background: #fffdf8;
  color: #555;
}

.date-devis-page__error-card {
  border: 1px solid rgba(156, 68, 68, .35);
  background: #fbefed;
  color: #7d3434;
}

#formSaveTheDate.calendar-engine--vanilla #datepicker {
  display: none;
}

/* Pour revenir à l'ancien calendrier : remplacer calendar-engine--vanilla par
   calendar-engine--legacy dans le formulaire du template. */
#formSaveTheDate.calendar-engine--legacy .mdl-calendar-panel {
  display: none;
}

#formSaveTheDate .mdl-calendar-panel {
  margin: 1.15rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(176, 142, 35, .28);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,245,237,.88));
  box-shadow: 0 12px 30px rgba(50, 42, 28, .08);
}

/* Même traitement que le formulaire de devis principal du site. */
#formSaveTheDate > div > div > label,
#formSaveTheDate > div > label,
#formSaveTheDate label[for="email"] {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  color: #555;
  font-weight: 700;
}

#formSaveTheDate #datepickerInput,
#formSaveTheDate #email {
  width: 100%;
  min-height: 2.45rem;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-left: 1px solid #54787d;
  border-radius: 5px;
  color: #555;
  background-color: #fff;
  box-shadow: none;
}

#formSaveTheDate .date-devis-page__date-summary {
  margin: .5rem 0 0;
  padding: .45rem .65rem;
  border-left: 1px solid #54787d;
  color: #555;
  font-size: .92rem;
  font-style: normal;
}

#formSaveTheDate .date-devis-page__date-summary.is-selected {
  border-left-color: #b08e23;
  color: #b08e23;
  font-style: normal;
  font-weight: 600;
}

#formSaveTheDate .date-devis-page__date-summary.is-error {
  border-left-color: #b08e23;
  color: #b08e23;
  font-style: normal;
  font-weight: 600;
}

#formSaveTheDate #datepickerInput::placeholder,
#formSaveTheDate #email::placeholder {
  font-size: .8rem;
  color: #777;
  opacity: 1;
}

#formSaveTheDate #datepickerInput:focus,
#formSaveTheDate #email:focus {
  border-color: #b08e23;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(176, 142, 35, .12);
}

#formSaveTheDate .checkbox label {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  color: #555;
  font-weight: 400;
}

#formSaveTheDate .checkbox {
  align-items: flex-start;
  gap: .6rem;
}

#formSaveTheDate .checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: .25rem 0 0;
}

#formSaveTheDate .mdl-calendar-panel__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 auto .85rem;
  max-width: 690px;
}

#formSaveTheDate .mdl-calendar-panel__eyebrow {
  color: #b08e23;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#formSaveTheDate .mdl-calendar-panel__hint {
  color: #6b6256;
  font-size: .78rem;
  text-align: right;
}

#formSaveTheDate .mdl-vanilla-calendar {
  max-width: 690px;
  margin: 0 auto;
  --vc-color-primary: #b08e23;
  --vc-color-secondary: #54787d;
  --vc-color-white: #fff;
  --vc-color-black: #555;
  --vc-color-danger: #555;
  --vc-color-gray-200: #ece7dc;
  --vc-color-gray-500: #847b6e;
  --vc-border-radius: 10px;
}

/* Les intitulés des week-ends (samedi et dimanche) restent noirs. */
#formSaveTheDate .mdl-vanilla-calendar .vc-week__day:nth-child(6),
#formSaveTheDate .mdl-vanilla-calendar .vc-week__day:nth-child(7),
#formSaveTheDate .mdl-vanilla-calendar .vc-week__day[data-vc-week-day="0"],
#formSaveTheDate .mdl-vanilla-calendar .vc-week__day[data-vc-week-day="6"] {
  color: #555 !important;
}

#formSaveTheDate .mdl-vanilla-calendar .vc-header {
  border-bottom: 1px solid rgba(176, 142, 35, .18);
}

#formSaveTheDate .mdl-vanilla-calendar .vc-arrow {
  color: #b08e23;
}

/* État sélectionné : remplacement explicite du bleu natif par l'or du site. */
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].vc-date--selected,
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date][aria-selected="true"],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date][data-vc-date-selected],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date-btn].vc-date--selected,
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date-btn][aria-selected="true"],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date-btn][data-vc-date-selected],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].vc-date--selected [data-vc-date-btn],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date][aria-selected="true"] [data-vc-date-btn],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date][data-vc-date-selected] [data-vc-date-btn] {
  border-color: #b08e23 !important;
  background: #b08e23 !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 4px 10px rgba(139,108,23,.2) !important;
}

#formSaveTheDate .mdl-vanilla-calendar .mdl-calendar-selected,
#formSaveTheDate .mdl-vanilla-calendar .mdl-calendar-selected [data-vc-date-btn] {
  border: 2px solid #b08e23 !important;
  border-color: #b08e23 !important;
  background: #b08e23 !important;
  color: #fff !important;
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition.mdl-calendar-selected {
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 2px #b08e23, inset 0 0 0 1px rgba(255,255,255,.28) !important;
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition.mdl-calendar-selected [data-vc-date-btn] {
  border: 2px solid #fff !important;
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].vc-date--selected .mdl-calendar-condition__price,
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date-btn][aria-selected="true"] .mdl-calendar-condition__price {
  color: #fff !important;
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition {
  color: #fff;
  background: #b08e23;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-unavailable,
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].vc-date--disabled {
  opacity: 1;
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-unavailable [data-vc-date-btn],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].vc-date--disabled [data-vc-date-btn],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date-btn][disabled] {
  color: #a7a7a7 !important;
  background: #e4e4e4 !important;
  border-color: #d1d1d1 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  text-decoration: line-through;
}

/* Un week-end disponible utilise la même couleur noire que les autres dates.
   Les dates prises ne reçoivent pas cette classe et restent donc grises. */
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-weekend:not(.mdl-calendar-condition) [data-vc-date-btn] {
  color: #555 !important;
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition [data-vc-date-btn],
#formSaveTheDate .mdl-vanilla-calendar .mdl-calendar-condition__button {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  min-height: 3.15rem;
  padding: .35rem .15rem;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: #fff !important;
  background: #b08e23 !important;
  line-height: 1.05;
}

/* La couleur rouge des week-ends ne doit pas écraser une date dorée. */
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition:hover [data-vc-date-btn],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition:focus [data-vc-date-btn],
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition [data-vc-date-btn]:hover,
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition [data-vc-date-btn]:focus {
  color: #fff !important;
  background: #b08e23 !important;
}

#formSaveTheDate .mdl-calendar-condition__day {
  font-size: 1rem;
  font-weight: 700;
}

#formSaveTheDate .mdl-calendar-condition__price {
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
}

#formSaveTheDate .mdl-vanilla-calendar .mdl-calendar-condition-popup {
  border: 1px solid rgba(176, 142, 35, .35);
  border-radius: 7px;
  background: #54787d;
  color: #fff;
  font-family: "Varela Round", sans-serif;
  font-size: .75rem;
  line-height: 1.3;
  padding: .45rem .6rem;
  box-shadow: 0 8px 18px rgba(48, 45, 39, .2);
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition:hover,
#formSaveTheDate .mdl-vanilla-calendar [data-vc-date].mdl-calendar-condition:focus {
  background: #b08e23;
}

#formSaveTheDate .mdl-vanilla-calendar [data-vc-date]:focus-visible {
  outline: 2px solid #54787d;
  outline-offset: 2px;
}

@media screen and (max-width: 639px) {
  #formSaveTheDate .mdl-calendar-panel {
    padding: .7rem;
  }

  #formSaveTheDate .mdl-calendar-panel__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #formSaveTheDate .mdl-calendar-panel__hint {
    text-align: left;
  }
}

/* Alignement avec la page de devis principale : mise en page ouverte,
   sans fond, carte ni cadre décoratif. */
.date-devis-page {
  overflow: visible;
  background: transparent;
}

.date-devis-page::before,
.date-devis-page__content::before {
  display: none;
}

.date-devis-page__welcome {
  margin: 0 0 .35rem;
  color: #b08e23;
  font-size: 1.15rem;
  font-weight: 700;
}

.date-devis-page .border.date-devis-page__welcome-block {
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 1.15rem 1.35rem 1.2rem;
  border: 2px solid rgba(176, 142, 35, .72);
  border-radius: 16px;
  background: rgba(255, 253, 248, .7);
}

.date-devis-page .border.date-devis-page__welcome-block::before,
.date-devis-page .border.date-devis-page__welcome-block::after {
  position: absolute;
  content: "";
}

.date-devis-page .border.date-devis-page__welcome-block::before {
  width: 80px;
  border: 6px solid white;
  bottom: -3px;
  left: 40px;
}

.date-devis-page .border.date-devis-page__welcome-block::after {
  border: 2px solid var(--color-secondary, #b08e23);
  border-radius: 0 100% 0 0;
  width: 40px;
  height: 40px;
  bottom: -40px;
  left: 40px;
  border-bottom: none;
  border-left: none;
}

.date-devis-page__welcome-note {
  max-width: 680px;
  margin: 0;
  color: #555;
  font-size: .94rem;
  line-height: 1.6;
}

.date-devis-page__welcome-signature {
  margin: 1rem 0 0;
  color: #555;
}

.date-devis-page__content {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.date-devis-page__content h2 {
  font-size: 1.3rem;
}

#formSaveTheDate .mdl-calendar-panel {
  padding-right: 0;
  padding-left: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.date-devis-page__feedback {
  padding: 1rem 0;
}

.date-devis-page__success-card,
.date-devis-page__error-card {
  border: 0;
  border-radius: 0;
  padding: 1rem 0;
  box-shadow: none;
}

.date-devis-page__success-card {
  background: transparent;
}

.date-devis-page__success-card .blockquote {
  padding-left: 150px;
  padding-top: 15px;
}

#messageCondition {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(176, 142, 35, .28);
  border-left: 4px solid #b08e23;
  border-radius: 8px;
  background: transparent url('https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/pepper-grinder/images/ui-bg_fine-grain_15_ffffff_60x60.png') repeat !important;
  color: #555;
}

#messageCondition p {
  margin: 0 0 .85rem;
  color: #555;
  line-height: 1.6;
}

#messageCondition p > b:first-child {
  color: #b08e23;
  font-size: 1rem;
  letter-spacing: .02em;
}

#messageCondition .date-devis-condition-minimum {
  display: inline-block;
  margin: 0 .15rem;
  color: #b08e23;
  font-size: 1.08em;
  letter-spacing: .01em;
}

#messageCondition .date-devis-condition-minimum span,
#formSaveTheDate #mini {
  color: #b08e23;
  font-weight: 700;
}

/* Écrin réservé au calendrier : discret, mais suffisamment respirant. */
#formSaveTheDate .mdl-calendar-panel {
  margin: 2rem 0 2.35rem;
  padding: 1.35rem clamp(.85rem, 2.5vw, 1.75rem) 1.6rem;
  border: 1px solid rgba(176, 142, 35, .38);
  border-radius: 14px;
  background: transparent url('https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/pepper-grinder/images/ui-bg_fine-grain_15_ffffff_60x60.png') repeat;
  box-shadow: 0 8px 22px rgba(65, 52, 29, .08);
}

#formSaveTheDate .mdl-calendar-panel__heading {
  margin-bottom: 1.2rem;
}

#formSaveTheDate > div {
  margin-bottom: 1.65rem;
}

#formSaveTheDate > .checkbox {
  margin-top: -.55rem;
  margin-bottom: 1.75rem;
}

#formSaveTheDate > div:last-child {
  margin-top: 2rem !important;
}

#formSaveTheDate .mdl-calendar-panel + #datepicker + #messageCondition {
  margin-top: 1rem;
}