/* =============================================================================================
   01 Métier : un récit en trois temps
   1. le constat : titre et chapô à gauche, un chiffre sourcé à droite ;
   2. ce que le client y gagne : un chiffre sourcé à gauche, la conclusion à droite ;
   3. ce que fait Nostia, en un tout : aplat bordeaux, trois livrables, le prix et le bouton.
   Variables communes seulement (tokens.css) ; mises en page en @container page, comme le reste.
   ============================================================================================= */
.metier {
  --metier-beat: clamp(64px, calc(3.4cqw + 51px), 104px);  /* écart entre deux temps (64, 82, 100) */
  --metier-h3: clamp(26px, calc(1.3cqw + 21px), 40px);     /* titre d'un temps (26, 33, 40) */
}

/* Titre d'un temps du récit (entre le titre de section et le titre de carte) */
.metier__titre {
  margin: 0;
  max-width: 20em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--metier-h3);
  line-height: 1.06;
  letter-spacing: -0.03em;
  word-spacing: 0.08em;
  text-wrap: balance;
}

/* Le signe « % » plus petit que le nombre, sur la même ligne de base */
.metier__unite { font-size: 0.6em; letter-spacing: 0; }

.metier .stat { max-width: 440px; }
/* Lien de source : zone cliquable portée à 44 px de haut, sans changer la mise en page */
.metier .stat__source a { padding-block: 14px; }
/* Texte lu par les lecteurs d'écran seulement */
.metier__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.metier .stat__label { max-width: 34ch; text-wrap: pretty; }

/* ---- Temps 1 : le constat ---- */
.metier__constat {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--split-gap);
}
.metier__constat > .stat { margin-top: 0; }
.metier__constat > .stat,
.metier__gain-bloc .stat { max-width: none; }

/* ---- Temps 2 : ce que fait Nostia ---- */
.metier__offre {
  margin-top: var(--metier-beat);
  padding: clamp(28px, calc(3cqw + 18px), 64px);
  border-radius: var(--radius-card-lg);
  background: var(--dark);
  color: var(--on);
}
.metier__liste {
  margin: clamp(32px, calc(1.6cqw + 26px), 48px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3cqw, 48px);
}
/* Le bouton est le même partout (.btn-fill), en version claire sur l'aplat. */
.metier__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--dline);
}
.metier__nom {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
  color: var(--on);
}
.metier__nom abbr { text-decoration: none; }
.metier__gain { color: var(--on2); line-height: 1.5; text-wrap: pretty; }
.metier__pied {
  padding-top: var(--space-6);
  border-top: 1px solid var(--dline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.metier__prix {
  margin: 0;
  max-width: 40em;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--on2);
  text-wrap: pretty;
}
.metier__prix strong { color: var(--on); }

/* ---- Temps 3 : ce que le client y gagne ---- */
.metier__gain-bloc {
  margin-top: var(--metier-beat);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--split-gap);
}
.metier__texte {
  margin: var(--space-title-lead) 0 0;
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- Largeurs moyennes : le constat passe en une colonne, chiffres côte à côte ---- */
@container page (max-width: 991px) {
  .metier__constat { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .metier__constat > .stat { margin-top: var(--space-head); }
}

/* ---- Mobile ---- */
@container page (max-width: 767px) {
  .metier__liste { grid-template-columns: minmax(0, 1fr); }
  .metier__item { padding: var(--space-4) 0 var(--space-5); }
  .metier__gain-bloc { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .metier__conclusion { order: -1; }
}