/* ============================================================
   INNER PAGES — À Propos, Posture, Contact (Figma typography)
   ============================================================ */

:root {
  --page-intro-size: clamp(1.75rem, 3.7vw, 4rem);       /* 64px */
  --page-heading-size: clamp(2rem, 5.53vw, 5.964rem);   /* 95.43px */
  --page-body-size:    clamp(1rem, 1.45vw, 1.5625rem);  /* 25px */
  --page-heading-track: -0.02em;
}

.page-main {
  min-height: calc(100vh - var(--header-height));
}

.page-content {
  padding-inline: clamp(1rem, 1.16vw, 1.25rem);
  padding-bottom: var(--space-2xl);
}

/* ---- Intro (À Propos hero text) ---- */

.page-intro {
  font-size: var(--page-intro-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 105rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.page-intro .accent {
  color: var(--color-accent);
}

/* ---- Pillar sections (Posture) ---- */

.pillars {
  display: flex;
  flex-direction: column;
}

.pillar {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 2.3vw, 2.5rem);
}

.pillar--green {
  background: var(--color-accent);
}

.pillar__inner {
  max-width: 70rem;
}

.pillar__title {
  font-size: var(--page-heading-size);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--page-heading-track);
  text-transform: lowercase;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.pillar__text {
  font-size: var(--page-body-size);
  font-weight: 600;
  line-height: 1.35;
  max-width: 70rem;
}

/* ---- Contact ---- */

.contact-page {
  padding-block: clamp(2rem, 5vw, 4rem);
  max-width: 70rem;
}

.contact-page__title {
  font-size: var(--page-heading-size);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--page-heading-track);
  text-transform: lowercase;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.contact-info {
  font-size: var(--page-body-size);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.contact-info a {
  transition: color var(--transition);
}

.contact-info a:hover {
  color: var(--color-accent);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 36rem;
}

.contact-form label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: lowercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: var(--font-size-base);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact-form__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-height: 1.25rem;
}

/* ---- Scroll to top (shared with homepage) ---- */

.scroll-top {
  position: fixed;
  top: auto;
  bottom: clamp(1rem, 8vw, 5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 7vw, 7.875rem);
  height: clamp(3rem, 8vw, 8.542rem);
  padding: 0;
  background: none;
  border: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition),
              transform var(--transition);
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scroll-top.is-visible:hover {
  transform: translateY(-3px);
}

.scroll-top__arrow {
  font-size: clamp(3rem, 7vw, 7.51rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
}

/* ---- Active nav link ---- */

.nav__links--main a[aria-current="page"] {
  color: var(--color-accent);
}