/* ============================================================
   assets/css/rdv.css — Module prise de rendez-vous BONDEKO
   ============================================================ */

/* ── PAGE HERO ─────────────────────────────────────────────── */
.rdv-hero {
  background: linear-gradient(135deg, #0D3D20, #1B6B3A);
  padding: 3rem 2rem 2.5rem;
  text-align: center;
  color: #fff;
}
.rdv-hero-content { max-width: 600px; margin: 0 auto; }
.rdv-hero h1 { font-family: var(--font-titre); font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0.5rem 0; }
.rdv-hero p  { color: rgba(255,255,255,0.8); font-size: 1rem; }
.rdv-hero .section-tag { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }

/* ── MAIN WRAPPER ───────────────────────────────────────────── */
.rdv-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* ── ÉTAPES ─────────────────────────────────────────────────── */
.rdv-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.step {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--texte-m);
  padding: 0.5rem 0.75rem;
  border-radius: 99px;
  transition: all 0.2s;
  white-space: nowrap;
}
.step span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bordure); color: var(--texte-m);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 500;
}
.step.active { color: var(--vert); font-weight: 500; }
.step.active span { background: var(--vert); color: #fff; }
.step.done span { background: var(--vert-clair); color: var(--vert); }
.step-sep { width: 24px; height: 1px; background: var(--bordure); flex-shrink: 0; }

/* ── CONTENU ÉTAPE ──────────────────────────────────────────── */
.rdv-step-content { animation: fadeSlide 0.25s ease; }
.rdv-step-content.hidden { display: none; }
.rdv-step-content h2 { font-family: var(--font-titre); font-size: 1.5rem; margin-bottom: 0.3rem; }
.step-sub { color: var(--texte-m); font-size: 0.9rem; margin-bottom: 1.5rem; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-nav {
  display: flex; justify-content: flex-end; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
}

/* ── SÉLECTEUR DE SERVICE ───────────────────────────────────── */
.services-picker { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1rem; }
.picker-group {}
.picker-cat {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texte-m); margin-bottom: 0.5rem; font-weight: 500;
}
.service-pick {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--bordure);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s, background 0.15s;
  background: var(--blanc);
}
.service-pick input[type="radio"] { display: none; }
.service-pick:hover { border-color: var(--vert-mid); background: var(--vert-clair); }
.service-pick.selected { border-color: var(--vert); background: var(--vert-clair); }
.pick-icon { font-size: 1.2rem; flex-shrink: 0; }
.pick-nom { font-size: 0.9rem; font-weight: 400; color: var(--texte); }

/* ── CALENDRIER ─────────────────────────────────────────────── */
.calendrier-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; margin-bottom: 1.25rem;
}
.calendrier {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.cal-nav button {
  background: none; border: 1px solid var(--bordure);
  border-radius: var(--radius-sm); width: 32px; height: 32px;
  font-size: 1.2rem; cursor: pointer; color: var(--texte-m);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cal-nav button:hover { background: var(--vert-clair); color: var(--vert); }
#calTitre { font-weight: 500; font-size: 0.95rem; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 4px;
}
.cal-head { text-align: center; font-size: 0.72rem; color: var(--texte-m); padding: 4px 0; font-weight: 500; }
.cal-dim { color: #C0392B; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  position: relative;
}
.cal-day:hover:not(.disabled):not(.past) { background: var(--vert-clair); border-color: var(--vert); }
.cal-day.today { border-color: var(--vert-mid); font-weight: 500; color: var(--vert); }
.cal-day.selected { background: var(--vert); color: #fff; border-color: var(--vert); }
.cal-day.disabled, .cal-day.past { color: #CCC; cursor: not-allowed; background: none; }
.cal-day.dimanche { color: #E0B0B0; }
.cal-day.complet::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--rouge);
}
.cal-day.empty { cursor: default; }

/* ── CRÉNEAUX HORAIRES ──────────────────────────────────────── */
.creneaux-wrap {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-height: 320px;
  overflow-y: auto;
}
.creneaux-titre { font-size: 0.88rem; font-weight: 500; margin-bottom: 0.75rem; color: var(--texte-m); }
.creneaux-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.creneau {
  padding: 0.5rem; border: 1.5px solid var(--bordure);
  border-radius: var(--radius-sm); text-align: center;
  font-size: 0.85rem; cursor: pointer;
  transition: all 0.15s; background: var(--blanc);
  color: var(--texte);
}
.creneau:hover:not(.pris) { background: var(--vert-clair); border-color: var(--vert); }
.creneau.selected { background: var(--vert); color: #fff; border-color: var(--vert); }
.creneau.pris { background: #F5F5F5; color: #CCC; cursor: not-allowed; text-decoration: line-through; font-size: 0.78rem; }

.date-selected-display {
  background: var(--vert-clair);
  border: 1px solid rgba(27,107,58,0.2);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--vert);
  margin-top: 1rem;
}

/* ── RÉCAPITULATIF ──────────────────────────────────────────── */
.recap-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.recap-section { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--bordure); }
.recap-section:last-of-type { border-bottom: none; }
.recap-section h4 { font-size: 0.85rem; color: var(--texte-m); margin-bottom: 0.75rem; font-weight: 500; }
.recap-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.35rem 0; font-size: 0.9rem;
  border-bottom: 1px solid var(--gris-clair, #F2F4F0);
}
.recap-row:last-child { border-bottom: none; }
.recap-row span { color: var(--texte-m); }
.recap-adresse {
  background: var(--vert-clair);
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  color: var(--vert);
}

.rdv-conditions { margin-bottom: 1.5rem; }
.checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.88rem; color: var(--texte-m); cursor: pointer; line-height: 1.5; }
.checkbox-label input { margin-top: 3px; flex-shrink: 0; accent-color: var(--vert); }

/* ── BOUTON CONFIRMER ───────────────────────────────────────── */
.btn-confirm {
  background: var(--vert); color: #fff;
  padding: 0.85rem 2rem; border-radius: 99px;
  font-size: 1rem; font-weight: 500;
  border: none; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn-confirm:hover { background: var(--vert-mid); }
.btn-confirm:active { transform: scale(0.98); }
.btn-confirm:disabled { background: #ccc; cursor: not-allowed; }
.btn-ghost-green {
  border: 1.5px solid var(--vert); color: var(--vert);
  padding: 0.75rem 1.5rem; border-radius: 99px;
  font-size: 0.95rem; background: none; cursor: pointer;
  transition: background 0.2s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn-ghost-green:hover { background: var(--vert-clair); }

/* ── PAGE SUCCÈS ─────────────────────────────────────────────── */
.rdv-succes {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 2rem 0;
}
.succes-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--vert); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 1.5rem;
}
.rdv-succes h2 { font-family: var(--font-titre); font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--vert); }
.rdv-succes > p { color: var(--texte-m); margin-bottom: 1.5rem; }
.succes-recap {
  background: var(--vert-clair);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.succes-info {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.succes-info p { font-size: 0.88rem; color: var(--texte-m); margin-bottom: 0.5rem; }
.succes-info p:last-child { margin-bottom: 0; }
.succes-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── INFOS PRATIQUES ─────────────────────────────────────────── */
.rdv-infos { background: var(--gris-clair, #F2F4F0); padding: 3rem 2rem; }
.rdv-infos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem; max-width: 900px; margin: 0 auto;
}
.info-card {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--radius); padding: 1.25rem;
  text-align: center;
}
.info-icon { font-size: 1.8rem; display: block; margin-bottom: 0.5rem; }
.info-card h4 { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; }
.info-card p { font-size: 0.82rem; color: var(--texte-m); margin-bottom: 2px; }
.info-card a { color: var(--vert); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .calendrier-wrap { grid-template-columns: 1fr; }
  .creneaux-grid { grid-template-columns: repeat(4, 1fr); }
  .rdv-steps { gap: 0.1rem; }
  .step { padding: 0.35rem 0.5rem; font-size: 0.75rem; }
  .step-sep { width: 12px; }
}
.active-rdv { background: var(--rouge) !important; }