/* ============================================================
   rs1/page-header — mise en page propre
   Le bandeau (fond, voile, titre, badges, fil d'Ariane) est un
   composant partagé : .mp-bandeau dans assets/css/mp-tokens.css,
   également utilisé par rs1/hero.
   ============================================================ */

.mp-ph .mp-eyebrow{ margin-bottom: 1rem }

.mp-ph .mp-bandeau__titre{ max-width: 24ch }

/* ── Engagement sous le titre (attribut « engagement ») ───── */
.mp-ph__engagement{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 1.1rem 0 0;
  padding: .55rem 1.05rem .55rem .8rem;
  border: 1px solid var(--mp-trait);
  border-radius: var(--mp-r-pill);
  background: var(--mp-blanc);
  font-family: var(--mp-font-texte);
  font-size: var(--mp-t-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--mp-encre);
}
.mp-ph__engagement svg{ flex: none; color: var(--mp-turquoise-fonce) }
.mp-sombre .mp-ph__engagement{
  border-color: var(--mp-trait-sombre);
  background: var(--mp-voile-sombre);
  color: var(--mp-blanc);
}
.mp-sombre .mp-ph__engagement svg{ color: var(--mp-turquoise-vif) }
.mp-ph__engagement + .mp-bandeau__texte{ margin-top: 1.1rem }