/* ==========================================================================
   TYPOGRAPHY - base text, headings, eyebrow, lead, inline helpers.
   ========================================================================== */
body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--epsa-navy);
  color: var(--epsa-ink);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--epsa-gold); }
::selection { background: var(--epsa-gold); color: var(--epsa-navy); }

h1, h2, h3, h4, h5, h6 { color: var(--epsa-ink); text-wrap: balance; }
h1 { font-size: clamp(var(--font-size-3xl), 4.1vw, var(--font-size-4xl)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
h2 { font-size: clamp(var(--font-size-2xl), 2.2vw, var(--font-size-3xl)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
h3 { font-size: clamp(var(--font-size-lg), 1.6vw, var(--font-size-2xl)); line-height: var(--lh-tight); font-weight: 600; }
h4 { font-size: var(--font-size-lg); font-weight: 600; }

/* Body copy inside the paragraph bands. */
.pg p { color: var(--epsa-text); line-height: var(--lh-relaxed); }
.pg strong, .pg b { font-weight: 600; }
.bg-color-light .pg p, .bg-color-white p { color: var(--epsa-navy); }

/* Eyebrow: chevron + uppercase label (hero kicker, section kicker).
   Usable from CKEditor as the "Eyebrow" paragraph style. */
.eyebrow, .hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--epsa-text-2);
}
.eyebrow::before, .hero__eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 0.8rem;
  height: 1.05rem;
  background-color: var(--epsa-gold);
  -webkit-mask: url('../images/chevron.png') center / contain no-repeat;
  mask: url('../images/chevron.png') center / contain no-repeat;
}

/* Lead: large intro sentence. */
.lead-text, .pg p.lead-text {
  font-size: clamp(var(--font-size-lg), 1.7vw, var(--font-size-2xl));
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--epsa-ink);
}
/* Gold sub title under an H2 ("Plus de 15 ans à construire..."). */
.subtitle-gold, .pg p.subtitle-gold {
  font-size: clamp(var(--font-size-base), 1.4vw, var(--font-size-xl));
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--epsa-gold);
}
/* Call-out line: "C'est là que nous intervenons." */
.callout-gold, .pg p.callout-gold {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--epsa-gold);
}
/* Big gold statement (Enjeux). */
.statement-gold, .pg p.statement-gold, .pg h2.statement-gold {
  font-size: clamp(var(--font-size-2xl), 2.8vw, var(--font-size-3xl));
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--epsa-gold);
}
.title-upper { text-transform: uppercase; font-weight: 700; letter-spacing: var(--tracking-tight); }
.hero-xl { display: block; font-size: clamp(var(--font-size-4xl), 7.2vw, var(--font-size-display)); font-weight: 500; line-height: var(--lh-none); letter-spacing: var(--tracking-tighter); color: var(--epsa-gold); text-transform: uppercase; }
.hero-gold { color: var(--epsa-gold); }

/* Gold short bar under a slider title. */
.carousel-item h2 + p::before, .title-bar::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: var(--space-4);
  background: var(--epsa-gold);
}
.title-bar::after { margin: var(--space-4) 0 0; }

.breadcrumb { font-size: var(--font-size-sm); }
.breadcrumb a:hover { color: var(--epsa-gold); }