/* ============================================================
   CORFLY — Réserver un appel découverte
   Design cohérent avec la charte du site
   ============================================================ */

:root {
  --navy:       #0d1b2a;
  --gold:       #b07e2f;
  --gold-light: #c99a4a;
  --gold-dim:   rgba(176,126,47,0.10);
  --cream:      #f2efea;
  --cream-mid:  #faf9f7;
  --white:      #ffffff;
  --text-dark:  #111111;
  --text-mid:   #444444;
  --text-muted: #777777;
  --border:     #e8e4de;
  --shadow:     0 2px 12px rgba(0,0,0,0.06);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'League Spartan', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  min-height: 100vh;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */
.ra-header {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}

.ra-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ra-logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--white);
  text-decoration: none;
}

.ra-back {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.ra-back:hover { color: var(--gold); }

/* ----------------------------------------------------------
   PAGE PRINCIPALE
---------------------------------------------------------- */
.ra-main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

/* ----------------------------------------------------------
   INTRO
---------------------------------------------------------- */
.ra-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.ra-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  line-height: 1.15;
}

.ra-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 40px;
}

/* ----------------------------------------------------------
   GRILLE
---------------------------------------------------------- */
.ra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* ----------------------------------------------------------
   CARTES
---------------------------------------------------------- */
.ra-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.ra-card-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ----------------------------------------------------------
   NAVIGATION MOIS
---------------------------------------------------------- */
.ra-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ra-month-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.5px;
}

.ra-arrow {
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  font-family: inherit;
}

.ra-arrow:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}

/* ----------------------------------------------------------
   CALENDRIER
---------------------------------------------------------- */
.ra-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ra-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.ra-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  color: var(--text-dark);
}

.ra-day.empty { background: none; border: none; cursor: default; }

.ra-day.disabled {
  color: #ccc;
  cursor: not-allowed;
  background: none;
}

.ra-day.available {
  border: 1px solid var(--gold);
  font-weight: 700;
  color: var(--navy);
  background: var(--gold-dim);
}

.ra-day.available:hover {
  background: var(--gold);
  color: var(--white);
}

.ra-day.selected {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  font-weight: 700;
}

/* ----------------------------------------------------------
   CRÉNEAUX
---------------------------------------------------------- */
.ra-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ra-slots-loading {
  font-size: 12px;
  color: var(--text-muted);
}

.ra-no-slot {
  font-size: 13px;
  color: var(--text-muted);
}

.ra-slot {
  padding: 10px 18px;
  border: 1px solid var(--border);
  background: var(--cream-mid);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'League Spartan', sans-serif;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ra-slot:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}

.ra-slot.selected {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.ra-slot.disabled {
  color: #ccc;
  border-color: var(--border);
  background: none;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ----------------------------------------------------------
   ÉTAT VIDE
---------------------------------------------------------- */
.ra-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  text-align: center;
  gap: 14px;
}

.ra-empty-icon {
  width: 56px;
  height: 56px;
  background: var(--cream);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ra-empty-icon svg { stroke: var(--gold); }

.ra-empty-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 220px;
}

/* ----------------------------------------------------------
   FORMULAIRE
---------------------------------------------------------- */
.ra-selected-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(176,126,47,0.2);
  padding: 10px 14px;
  margin-bottom: 20px;
}

.ra-selected-slot svg { stroke: var(--gold); flex-shrink: 0; }

.ra-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.ra-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ra-input,
.ra-select,
.ra-textarea {
  padding: 10px 12px;
  background: #f7f5f2;
  border: 1px solid var(--border);
  color: var(--text-dark);
  font-size: 13px;
  font-family: 'League Spartan', sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.ra-input:focus,
.ra-select:focus,
.ra-textarea:focus {
  border-color: var(--gold);
  background: var(--white);
}

.ra-input::placeholder,
.ra-textarea::placeholder { color: #bbb; }

.ra-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.ra-btn-confirm {
  width: 100%;
  background: var(--navy);
  color: var(--white);
  padding: 14px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'League Spartan', sans-serif;
  transition: background 0.2s;
  margin-top: 8px;
}

.ra-btn-confirm:hover    { background: var(--gold); }
.ra-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

.ra-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.5;
}

.ra-note svg { stroke: var(--gold); flex-shrink: 0; }

/* ----------------------------------------------------------
   CONFIRMATION
---------------------------------------------------------- */
.ra-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 28px;
}

.ra-confirmation.hidden { display: none; }

.ra-confirm-icon {
  width: 56px;
  height: 56px;
  background: rgba(45,106,79,0.08);
  border: 1px solid rgba(45,106,79,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ra-confirm-icon svg { stroke: #2d6a4f; }

.ra-confirm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

.ra-confirm-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}

.ra-btn-home {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  padding: 12px 24px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background 0.2s;
  margin-top: 8px;
}

.ra-btn-home:hover { background: var(--gold); }

.ra-day.complet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: rgba(176, 126, 47, 0.06);
  color: #999;
  cursor: not-allowed;
  border: 1px solid rgba(176, 126, 47, 0.15);
  font-size: 11px;
}

.ra-day-complet-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--gold, #b07e2f);
  line-height: 1;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 768px) {
  .ra-grid {
    grid-template-columns: 1fr;
  }

  .ra-title { font-size: 1.7rem; }
  .ra-main  { padding: 28px 16px 60px; }
}