@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   02 — TYPOGRAPHIE
   Display serré (Inter Tight), corps lisible (Inter),
   mono pour tout ce qui est étiquette, mesure ou métadonnée.
   ═══════════════════════════════════════════════════════════ */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  font-feature-settings: 'zero' 1;
}

/* ── Titres ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 500; }

.h2 {
  font-size: var(--fs-h2);
  letter-spacing: -.038em;
  line-height: 1.03;
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -.018em;
  line-height: 1.3;
  font-weight: 600;
}

/* ── Corps ──────────────────────────────────────────────── */
p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--gray-700);
  letter-spacing: -.008em;
}

strong, b { font-weight: 600; color: var(--ink); }

/* ── Étiquette de section ───────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 22px;
}
.eyebrow .num {
  color: var(--accent-text);
  letter-spacing: .08em;
}
.eyebrow .num::after {
  content: '';
  display: inline-block;
  width: 22px; height: 1px;
  margin: 0 2px 4px 10px;
  background: var(--gray-300);
  vertical-align: middle;
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse-dot 2.6s var(--ease) infinite;
}
.eyebrow--light { color: rgba(255,255,255,.6); }

/* ── Chiffres tabulaires partout où ça compte ───────────── */
.stat__v, .plan__amount, .gauge__val b, .bars b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* ── Emphase accentuée (le mot qui porte) ───────────────── */
em.brand-em, .hero__title em {
  font-style: normal;
  position: relative;
  color: var(--ink);
}
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .1em;
  height: .085em;
  background: var(--accent);
  border-radius: 99px;
  transform-origin: left center;
  scale: 0 1;
  animation: underline-in 1s var(--ease-out) 1.35s forwards;
}