/* =========================================
   LES HÉRITIERS DU COMTE — reservation.css
   Palette : parchemin, bordeaux, or
   ========================================= */

.page-hero {
  padding: calc(80px + var(--s-16)) 0 var(--s-16);
  text-align: center;
  position: relative;
  background: var(--c-surface);
  border-bottom: 1px solid rgba(47,36,29,0.1);
}
.page-hero-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-blood);
  margin-bottom: var(--s-4);
  opacity: 0;
  animation: blur-focus 0.8s var(--ease-out-expo) 0.2s forwards;
}
.page-hero h1 { font-size: var(--t-xl); margin-bottom: var(--s-4); color: var(--c-text); opacity: 0; animation: blur-focus 0.8s var(--ease-out-expo) 0.4s forwards; }
.page-hero p { font-style: italic; color: var(--c-text-muted); max-width: 520px; margin: 0 auto; opacity: 0; animation: blur-focus 0.8s var(--ease-out-expo) 0.6s forwards; }

/* LAYOUT */
.booking-section { padding: var(--s-16) 0 var(--s-32); }
.booking-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-12); align-items: start; }
@media (max-width: 1000px) { .booking-grid { grid-template-columns: 1fr; } .booking-sidebar { order: -1; } }

/* FORM */
.booking-form {
  background: #fff;
  border: 1px solid rgba(47,36,29,0.1);
  padding: var(--s-12);
  position: relative;
  box-shadow: 0 2px 16px rgba(47,36,29,0.05);
}
.booking-form::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 48px; height: 48px;
  border-top: 2px solid var(--c-gold);
  border-left: 2px solid var(--c-gold);
}
.booking-form::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 48px; height: 48px;
  border-bottom: 2px solid var(--c-gold);
  border-right: 2px solid var(--c-gold);
}
.form-section-title {
  font-family: 'Cinzel', serif;
  font-size: var(--t-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-blood);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(47,36,29,0.1);
}

/* GRID */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-6); }
.form-grid.full { grid-template-columns: 1fr; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: var(--s-2); }
.form-group.span-2 { grid-column: 1 / -1; }
.form-label { font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-dim); }

/* INPUTS */
.form-input, .form-select, .form-textarea {
  background: var(--c-bg);
  border: 1px solid rgba(47,36,29,0.18);
  color: var(--c-text);
  padding: var(--s-3) var(--s-4);
  font-family: 'EB Garamond', serif;
  font-size: var(--t-sm);
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(199,161,91,0.12);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--c-text-muted); font-style: italic; opacity: 0.6; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A97B35' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-10);
  cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 120px; }

/* DATE SLOTS */
.date-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
@media (max-width: 600px) { .date-slots { grid-template-columns: repeat(2, 1fr); } }
.date-slot {
  border: 1px solid rgba(47,36,29,0.15);
  padding: var(--s-3) var(--s-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  background: var(--c-bg);
}
.date-slot:hover { border-color: var(--c-gold); background: rgba(199,161,91,0.06); }
.date-slot.selected { border-color: var(--c-blood); background: rgba(106,30,44,0.05); }
.date-slot.unavailable { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.date-slot-date { font-family: 'Cinzel', serif; font-size: var(--t-xs); color: var(--c-text); display: block; }
.date-slot-places { font-size: 0.65rem; color: var(--c-text-muted); font-style: italic; }

.form-separator { height: 1px; background: linear-gradient(to right, transparent, rgba(47,36,29,0.12), transparent); margin: var(--s-8) 0; }

/* FORMULES */
.formule-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 700px) { .formule-cards { grid-template-columns: 1fr; } }
.formule-card {
  border: 1px solid rgba(47,36,29,0.15);
  padding: var(--s-4);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  background: var(--c-bg);
  position: relative;
}
.formule-card input[type="radio"] { position: absolute; opacity: 0; width: 0; }
.formule-card:hover, .formule-card:has(input:checked) { border-color: var(--c-gold); background: rgba(199,161,91,0.06); }
.formule-card-check {
  width: 16px; height: 16px;
  border: 1px solid rgba(47,36,29,0.25);
  margin-bottom: var(--s-3);
  transition: background 0.3s, border-color 0.3s;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
}
.formule-card:has(input:checked) .formule-card-check { background: var(--c-gold); border-color: var(--c-gold); }
.formule-card-name { font-family: 'Cinzel', serif; font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--c-text); margin-bottom: var(--s-1); }
.formule-card-price { font-family: 'Cinzel Decorative', serif; font-size: var(--t-base); color: var(--c-blood); }
.formule-card-sub { font-size: 0.65rem; color: var(--c-text-muted); font-style: italic; }

/* SUBMIT */
.form-submit { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-6); margin-top: var(--s-8); flex-wrap: wrap; }
.form-total { text-align: right; }
.form-total-label { font-size: var(--t-xs); color: var(--c-text-muted); font-style: italic; }
.form-total-value { font-family: 'Cinzel Decorative', serif; font-size: var(--t-lg); color: var(--c-blood); }

/* SIDEBAR */
.booking-sidebar { position: sticky; top: 100px; }
.sidebar-recap {
  background: #fff;
  border: 1px solid rgba(47,36,29,0.1);
  padding: var(--s-8);
  margin-bottom: var(--s-4);
  position: relative;
  box-shadow: 0 2px 12px rgba(47,36,29,0.06);
}
.sidebar-recap::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 32px; height: 32px;
  border-top: 2px solid var(--c-gold);
  border-left: 2px solid var(--c-gold);
}
.sidebar-recap-title { font-family: 'Cinzel', serif; font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-blood); margin-bottom: var(--s-6); }
.recap-item { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid rgba(47,36,29,0.06); gap: var(--s-4); }
.recap-item:last-of-type { border-bottom: none; }
.recap-item-label { font-size: var(--t-xs); color: var(--c-text-muted); font-style: italic; }
.recap-item-value { font-family: 'Cinzel', serif; font-size: var(--t-xs); color: var(--c-text); text-align: right; }

.sidebar-info { background: var(--c-surface); border: 1px solid rgba(47,36,29,0.08); padding: var(--s-6); }
.sidebar-info-item { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid rgba(47,36,29,0.06); align-items: flex-start; }
.sidebar-info-item:last-child { border-bottom: none; }
.sidebar-info-icon { color: var(--c-gold-dim); font-size: var(--t-base); flex-shrink: 0; margin-top: 2px; }
.sidebar-info-text { font-size: var(--t-xs); color: var(--c-text-muted); font-style: italic; line-height: 1.6; }

/* SUCCESS */
.booking-success { display: none; text-align: center; padding: var(--s-24) var(--s-8); }
.booking-success.visible { display: block; }
.success-seal {
  width: 80px; height: 80px;
  background: rgba(106,30,44,0.08);
  border: 2px solid var(--c-blood);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-8);
  font-size: 2rem; color: var(--c-blood);
  animation: stamp-in 0.8s var(--ease-spring) 0.3s both;
}
.success-title { font-family: 'Cinzel Decorative', serif; font-size: var(--t-xl); color: var(--c-blood); margin-bottom: var(--s-4); }
.success-text { font-style: italic; color: var(--c-text-muted); max-width: 480px; margin: 0 auto var(--s-8); line-height: 1.9; }

/* LOADING */
.form-loading { display: none; align-items: center; gap: var(--s-3); color: var(--c-text-muted); font-style: italic; }
.form-loading.active { display: flex; }
.loading-dot { width: 6px; height: 6px; background: var(--c-gold); border-radius: 50%; animation: loading-bounce 0.8s ease-in-out infinite; }
.loading-dot:nth-child(2) { animation-delay: 0.15s; }
.loading-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes loading-bounce { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-6px); opacity: 1; } }