/* ============================================================
   CONTACT.CSS — Contact Form Section & Process Section
   ============================================================
   PURPOSE:
     Styles the contact section (two-column: info + form card)
     and the 4-step process section (dark navy background).

   SAFE TO EDIT:
     - Contact section blockquote font size and border color
     - Process step background tint (rgba(255,255,255,0.05))
     - Urgency alert box colors in .contact-urgent

   DO NOT MODIFY:
     - #contact display: grid — handled by layout.css.
       Do not duplicate grid rules here.
     - Process step border colors — these use semi-transparent
       white on a dark background. Changing to solid colors
       will look wrong on the navy background.
============================================================ */


/* ── Process Section ─────────────────────────────────────────
   Dark navy background with 4-step horizontal layout.
   On mobile this becomes 2 columns, then 1 column (layout.css).
────────────────────────────────────────────────────────────── */
#processus {
  background: var(--ink);
  text-align: center;
}

/* Override eyebrow, title, and lead for dark background */
#processus .section-eyebrow,
#processus .section-title,
#processus .section-lead {
  margin-left: auto;
  margin-right: auto;
}

#processus .section-eyebrow {
  justify-content: center;
  color: var(--gold-lt);
}

/* Hide the decorative line before eyebrow on dark bg */
#processus .section-eyebrow::before {
  display: none;
}

#processus .section-title {
  color: var(--white);
}

#processus .section-lead {
  color: rgba(255,255,255,0.7);
}


/* ── Process Steps Grid ───────────────────────────────────── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: left;
  border: 1px solid rgba(197,217,231,0.25);
}

/* Individual step card */
.process-step {
  padding: 2.4rem 2rem;
  border-right: 1px solid rgba(197,217,231,0.2);
  background: rgba(255,255,255,0.05); /* subtle white tint on dark bg */
  position: relative;
}

.process-step:last-child {
  border-right: none;
}

/* Large number label ("01", "02", etc.) */
.process-step-num {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 300;
  color: var(--gold-lt);
  opacity: 0.5;
  line-height: 1;
  margin-bottom: 1.2rem;
}

/* Step title */
.process-step-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0.75rem;
}

/* Step description */
.process-step-text {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
}

/* CTA below the process steps */
.process-cta {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.process-cta-note {
  font-size: 0.78rem;
  color: var(--mist);
}

.process-cta-calc-note {
  font-size: 0.85rem;
  color: var(--mist);
  margin-top: 1rem;
}


/* ── Contact Section ─────────────────────────────────────────
   Two-column: left = info + quote, right = form card.
   Grid layout is defined in layout.css.
────────────────────────────────────────────────────────────── */

/* Lead statement — carries the former standalone Final CTA section's
   copy ("On commence par une conversation…"), merged in here since
   that section and Contact were adjacent and asked for the same
   action. Plain (not italic) so it reads as a direct statement,
   distinct from the personal .contact-quote pull-quote below it. */
.contact-lead {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  max-width: 460px;
  margin: 1.2rem 0 1.8rem;
}

/* Blockquote in the contact info column */
.contact-quote {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  color: var(--stone);
  line-height: 1.6;
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  margin: 1.8rem 0;
}

/* Contact details (phone, availability, language) */
.contact-detail {
  font-size: 0.87rem;
  color: var(--stone);
  line-height: 1.9;
}

.contact-detail strong {
  color: var(--ink);
  font-weight: 500;
}

.contact-detail a {
  color: var(--stone);
  text-decoration: none;
}

.contact-detail a:hover {
  color: var(--gold);
}


/* ── Urgency Alert Box ────────────────────────────────────────
   Green tinted box with an info icon for time-sensitive cases.
────────────────────────────────────────────────────────────── */
.contact-urgent {
  background: var(--gold-bg);
  border: 1px solid rgba(76,156,46,0.25);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-top: 1.5rem;
  font-size: 0.84rem;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.contact-urgent svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}


/* ── Contact Form Card ────────────────────────────────────────
   Light background card on the right column containing
   the full contact request form with radio buttons.
────────────────────────────────────────────────────────────── */
.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2.4rem;
}

.contact-form-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.6rem;
}