/* ============================================================
   Réservation — calendrier "carnet de rendez-vous" + formulaire
   ============================================================ */

/* ---- Small stamp badge (used on reservation page) ---- */
.stamp{
  width:104px; height:104px; border-radius:50%;
  border:2px dashed var(--gold);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-display); color:var(--green-deep);
  font-size:.72rem; line-height:1.25; padding:10px; background:var(--cream);
}
.stamp strong{ display:block; font-size:.95rem; }

.booking-hero{ padding-bottom:8px; }
.booking-layout{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:32px;
  align-items:flex-start;
}
@media (max-width:980px){ .booking-layout{ grid-template-columns:1fr; } }

/* ---- Calendar card, styled like an open notebook ---- */
.booking-calendar{
  padding:28px;
  background:
    repeating-linear-gradient(var(--white) 0 43px, var(--paper-line) 43px 44px);
  background-color:var(--white);
  position:relative;
}
.booking-calendar::before{
  content:"";
  position:absolute; left:38px; top:0; bottom:0; width:1px;
  background:var(--terracotta-soft); opacity:.35;
}
.calendar-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; position:relative; z-index:1;
}
.calendar-head h3{ margin:0; font-size:1.1rem; }
.cal-nav{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--paper-line); background:var(--cream);
  cursor:pointer; font-size:1rem; color:var(--green-deep);
  transition:background .15s ease;
}
.cal-nav:hover{ background:var(--cream-deep); }
.cal-nav:disabled{ opacity:.35; cursor:not-allowed; }

.calendar-legend{
  display:flex; gap:18px; margin-bottom:20px; font-size:.8rem; color:var(--ink-soft); position:relative; z-index:1;
}
.calendar-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot--free{ background:var(--green-olive); }
.dot--selected{ background:var(--terracotta); }
.dot--full{ background:#C9BFA8; }

.calendar-days{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:14px;
  position:relative; z-index:1;
}
.cal-day{
  border:1px solid var(--paper-line);
  border-radius:var(--radius-s);
  background:var(--cream);
  padding:14px 12px;
}
.cal-day-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  color:var(--green-deeper);
  margin-bottom:2px;
  text-transform:capitalize;
}
.cal-day-date{ font-size:.72rem; color:var(--ink-soft); margin-bottom:10px; display:block; }
.cal-day.is-closed .cal-day-date::after{ content:" · fermé"; }
.slot-list{ display:flex; flex-direction:column; gap:6px; }
.slot-btn{
  border:1px solid var(--green-olive);
  background:var(--white);
  color:var(--green-deep);
  border-radius:999px;
  padding:7px 10px;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.slot-btn:hover{ background:var(--green-olive); color:var(--cream); }
.slot-btn.is-selected{ background:var(--terracotta); border-color:var(--terracotta); color:var(--cream); transform:scale(1.02); }
.slot-btn.is-taken{ background:transparent; border-color:#D9D2BE; color:#B8AF98; cursor:not-allowed; text-decoration:line-through; }
.slot-btn.is-taken:hover{ background:transparent; color:#B8AF98; }
.no-slots{ font-size:.78rem; color:var(--ink-soft); font-style:italic; }

/* ---- Form ---- */
.booking-form-card{ position:sticky; top:96px; }
.booking-stamp{ position:absolute; top:-26px; right:-14px; transform:rotate(8deg); width:104px; height:104px; font-size:.7rem; }
.selected-slot-summary{
  background:var(--cream-deep);
  border-left:3px solid var(--terracotta);
  padding:12px 14px;
  border-radius:var(--radius-s);
  font-size:.88rem;
  color:var(--green-deeper);
  font-weight:500;
}
.booking-form{ margin-top:20px; }
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--green-deeper); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%;
  padding:11px 13px;
  border-radius:var(--radius-s);
  border:1px solid var(--paper-line);
  background:var(--cream);
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(168,92,50,.14);
}
.form-note{ font-size:.76rem; color:var(--ink-soft); margin-top:12px; margin-bottom:0; }

.success-message{
  text-align:center; padding:18px 6px 4px;
}
.success-title{ font-family:var(--font-display); font-size:1.3rem; color:var(--green-deep); margin-bottom:10px; }

/* ---- Paiement en ligne ---- */
.payment-card{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  background:var(--green-mist); border-color:var(--green-olive);
}
.payment-icon{
  width:64px; height:64px; border-radius:50%; background:var(--white); flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--green-deep);
  box-shadow:var(--shadow-card);
}
.payment-card h3{ margin-bottom:6px; }
.payment-card p{ margin:0; max-width:520px; }
.payment-card .btn{ margin-left:auto; }
@media (max-width:760px){ .payment-card{ text-align:center; justify-content:center; } .payment-card .btn{ margin-left:0; width:100%; } }


/* Téléphone : le calendrier ne doit pas déborder de l'écran */
.booking-layout > *{ min-width:0; }
@media (max-width:520px){
  .calendar-days{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .booking-calendar{ padding-left:14px; padding-right:14px; }
}