/* Shared page-title typography — deliberately matches the homepage hero's
   title/subtitle exactly (same font, weight, size, colour, gradient) so
   every page opens with the same visual "voice" as the hero, instead of
   each page inventing its own heading style. */

.page-title {
  font-family: var(--font-satoshi);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  text-align: center;
}

@media (min-width: 640px) {
  .page-title {
    font-size: 34px;
  }
}

@media (min-width: 1024px) {
  .page-title {
    font-size: 40px;
  }
}

.page-title-highlight {
  display: inline-block;
  background: linear-gradient(90deg, #3f7bf8 0%, #a866f0 50%, #f86bb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Two-line titles (title on one line, gradient part on the next, like the
   hero itself) want a little breathing room above the second line. */
.page-title--stacked .page-title-highlight {
  margin-top: 0.2em;
}

/* Opt-in modifier (not a global .page-title change) for a longer, multi-
   line stacked title (e.g. Contact's "Brisez le plafond de verre / qui
   vous empêche de vous démarquer !") where the default 1.35 line-height
   reads as too loose across 2-3 lines — tightened so the whole title
   reads as one compact, powerful block instead of stacked separate
   titles. Only the gradient line's own top gap shrinks with it; nothing
   else about .page-title changes, and no other page is affected unless it
   opts in with this same class. */
.page-title--tight {
  line-height: 1.14;
}

.page-title--tight.page-title--stacked .page-title-highlight {
  margin-top: 0.06em;
}

.page-subtitle {
  margin: 20px auto 0;
  font-family: var(--font-satoshi);
  font-size: 18px;
  color: #d4d4e0;
  max-width: 620px;
  text-align: center;
}

.page-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}