/* Chemouli — sections propres à Make It Right / Break It Right (page-make-it-right.php,
   page-break-it-right.php). Tout le reste (hero, intro, vision/enjeux, cas/dossiers,
   faq, ressources) réutilise les classes .offre-* de offre.css — port fidèle de
   _maquette/chunks/page-make-it-right-sassocier.jsx et page-break-it-right-se-separer.jsx. */

/* ---- Intro « à qui ça s'adresse » (Make It Right) ---------------------------- */
.mb-mir-intro {
  background: var(--color-white);
  padding: clamp(72px, 10vw, 128px) 0;
}
.mb-mir-intro__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0 clamp(48px, 7vw, 104px);
  align-items: start;
}
.mb-mir-intro .offre-h2 {
  max-width: 18ch;
}
.mb-mir-intro__aside {
  padding-top: 10px;
}
.mb-mir-intro .offre-lead {
  margin-top: 32px;
  text-align: left;
}
/* Puces carrées 20×20 (plus grandes que la puce ronde par défaut de .offre-lead ul). */
.mb-bullets-lg {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mb-bullets-lg li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--grey-700);
}
.mb-bullets-lg li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 4px;
  background: var(--accent-emerald);
  display: block;
}

/* ---- Intro (Break It Right) : deux paragraphes côte à côte -------------------- */
.mb-bir-intro {
  background: var(--color-white);
  padding: clamp(72px, 10vw, 128px) 0;
}
.mb-bir-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(48px, 7vw, 104px);
  align-items: start;
}
.mb-bir-intro .offre-lead {
  text-align: left;
}

/* ---- Le travail : piliers (Make It Right) ---------------------------------- */
.mb-piliers {
  background: var(--bg-muted);
  padding: clamp(72px, 10vw, 128px) 0;
}
.mb-piliers .offre-lead {
  margin-top: 28px;
  max-width: 58ch;
}
.mb-piliers__list {
  margin-top: 48px;
}
.mb-piliers__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 6vw, 88px);
  padding: clamp(40px, 4.5vw, 64px) 0;
  border-bottom: 1px solid var(--hairline);
}
.mb-piliers__row:last-child {
  border-bottom: none;
}
.mb-piliers__num {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--fw-bold);
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.mb-piliers__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mb-piliers__intro {
  margin-bottom: 20px;
}
.mb-piliers__items {
  display: flex;
  flex-direction: column;
}
.mb-piliers__item {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-weight: var(--fw-light);
  font-size: 15.5px;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--grey-700);
}

/* ---- Le travail : trois séances (Break It Right) ---------------------------- */
.mb-travail {
  background: var(--bg-muted);
  padding: clamp(72px, 10vw, 128px) 0;
}
.mb-travail__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0 clamp(40px, 6vw, 88px);
  align-items: start;
}
.mb-travail__list {
  display: flex;
  flex-direction: column;
}
.mb-travail__item {
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  font-weight: var(--fw-light);
  font-size: 16.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--grey-700);
}
.mb-travail__item:first-child {
  border-top: none;
}

/* ---- Le rendu (fond noir) ---------------------------------------------------- */
.mb-rendu {
  background: var(--color-black);
  color: var(--color-white);
}
.mb-rendu__inner {
  padding: clamp(72px, 9vw, 120px) var(--gutter);
}
.mb-rendu__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 4vw, 64px);
  align-items: start;
}
.mb-rendu .offre-h2 {
  max-width: 20ch;
}
.mb-rendu .offre-lead {
  color: var(--grey-300);
}
.mb-rendu .offre-lead a {
  color: var(--color-white);
  font-weight: var(--fw-medium);
}
.mb-rendu .offre-lead + .offre-lead {
  margin-top: 24px;
}
.mb-rendu .offre-lead ul li {
  color: var(--grey-300);
}
.mb-rendu__distingue {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border-inverse);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.mb-rendu__distingue h3 {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.mb-rendu__distingue-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Les modalités financières (fond emerald) -------------------------------- */
.mb-modalites {
  background: var(--accent-emerald);
  color: var(--color-black);
}
.mb-modalites__inner {
  padding: clamp(64px, 8vw, 112px) var(--gutter);
}
.mb-modalites__label {
  margin-bottom: 40px;
}
.mb-modalites__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(48px, 7vw, 96px);
  align-items: end;
}
.mb-modalites__price {
  font-weight: var(--fw-bold);
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.mb-modalites__text p {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.65;
  max-width: 48ch;
  text-align: justify;
}
.mb-modalites__text p + p {
  margin-top: 20px;
}
.mb-modalites__cta {
  margin-top: 32px;
}
/* Bouton "Réserver un appel" sur fond emerald : noir par défaut, blanc au survol
   (inverse du .btn--secondary générique, propre à cette section). */
.mb-modalites .btn--secondary {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.mb-modalites .btn--secondary:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}

/* ---- Responsive (≤900px) ------------------------------------------------------ */
@media (max-width: 900px) {
  .mb-mir-intro__grid,
  .mb-bir-intro__grid,
  .mb-piliers__row,
  .mb-travail__grid,
  .mb-rendu__top,
  .mb-rendu__distingue,
  .mb-modalites__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}