/**
 * DA partagée — Contact / Réservation / Mon compte
 */

:root {
  --blue-100: #121F59;
  --blue-70: rgba(18, 31, 89, 0.70);
  --blue-55: rgba(18, 31, 89, 0.55);
  --blue-15: rgba(18, 31, 89, 0.15);
  --blue-10: rgba(18, 31, 89, 0.10);
  --white: #FFFFFF;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body.page-template-page-contact,
body.page-id-contact,
body.page-contact,
.contact-page,
.page-reserver-rdv,
.page-mon-compte,
body.page-reserver-rdv,
body.page-mon-compte {
  background: #f7f8fc !important;
  color: var(--blue-100);
  font-family: var(--font-family);
}

/* ========== Contact ========== */
.contact-page {
  background: #f7f8fc;
}

.contact-hero {
  background: var(--white) !important;
  padding: 2.75rem 0 1.25rem !important;
  text-align: center;
  color: var(--blue-100) !important;
  border-bottom: 1px solid var(--blue-15);
}

.contact-hero-title {
  color: var(--blue-100) !important;
  font-family: var(--font-family);
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  animation: none !important;
}

.contact-hero-subtitle {
  color: var(--blue-70) !important;
  opacity: 1 !important;
  animation: none !important;
  max-width: 520px;
  margin-inline: auto;
}

.contact-form-section {
  background: transparent !important;
  padding: 2.5rem 0 3rem !important;
}

.contact-form-section::before {
  display: none !important;
}

.contact-form-intro {
  color: var(--blue-55) !important;
}

.contact-form {
  background: var(--white) !important;
  border: 1px solid var(--blue-15) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(18, 31, 89, 0.08) !important;
  padding: 1.75rem !important;
}

.contact-form:hover {
  box-shadow: 0 10px 32px rgba(18, 31, 89, 0.12) !important;
}

.contact-form-field label {
  color: var(--blue-100) !important;
  font-weight: 600;
}

.contact-form-field input,
.contact-form-field textarea {
  border: 1px solid var(--blue-15) !important;
  border-radius: 12px !important;
  background: var(--blue-10) !important;
  color: var(--blue-100) !important;
  font-family: var(--font-family);
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
  outline: 2px solid rgba(18, 31, 89, 0.25);
  border-color: var(--blue-100) !important;
  background: var(--white) !important;
}

.contact-form-btn {
  background: var(--blue-100) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 0.9rem 1.6rem !important;
  font-family: var(--font-family);
}

.contact-form-btn:hover {
  background: #0d1745 !important;
}

.contact-info-section {
  background: transparent !important;
  padding: 0 0 3.5rem !important;
}

.contact-info-card {
  background: var(--white) !important;
  border: 1px solid var(--blue-15) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 22px rgba(18, 31, 89, 0.07) !important;
  color: var(--blue-100) !important;
}

.contact-info-heading {
  color: var(--blue-100) !important;
}

.contact-info-text,
.contact-info-text a {
  color: var(--blue-70) !important;
}

.contact-info-icon {
  color: var(--blue-100) !important;
}

/* ========== Réservation / Mon compte wrappers ========== */
.page-reserver-rdv,
.page-mon-compte {
  padding: 2rem 0 3.5rem;
}

.page-reserver-rdv .container,
.page-mon-compte .container {
  max-width: 960px;
}

.page-da-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--blue-100);
  font-family: var(--font-family);
}

/* MEC — harmonisation légère vers la nouvelle DA */
.mec-wrapper {
  font-family: var(--font-family) !important;
  color: var(--blue-100) !important;
}

.mec-title,
.mec-tunnel-title,
.mec-auth-title {
  color: var(--blue-100) !important;
  font-family: var(--font-family) !important;
}

.mec-card,
.mec-tunnel,
.mec-auth-card {
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(18, 31, 89, 0.08) !important;
  border: 1px solid var(--blue-15);
}

.mec-btn,
.mec-tunnel-btn,
button.mec-btn-primary {
  border-radius: 999px !important;
}