/* Gabarits : largeur de page, rythme vertical, grilles récurrentes.
   Points de rupture en dur : 900px (moyen) et 640px (compact) — voir tokens.css. */

.mb-page {
  max-width: var(--mb-page-max);
  margin-inline: auto;
  padding-inline: var(--mb-page-pad);
}

.mb-section { padding-block: var(--mb-section-pad); }
.mb-section--tight { padding-block: calc(var(--mb-section-pad) * 0.6); }

/* Aplats pleine largeur : hero, contact, encarts. Deux à trois par page au
   maximum, règle de la DA. */
.mb-dark {
  background: var(--mb-bordeaux-900);
  color: var(--mb-on-dark);
}
.mb-dark h1,
.mb-dark h2,
.mb-dark h3 { color: var(--mb-on-dark); }
.mb-dark p { color: var(--mb-on-dark-soft); }
.mb-dark a { color: var(--mb-on-dark); }

.mb-tinted {
  background: var(--mb-bg-alt);
  border-block: var(--mb-rule) solid var(--mb-divider);
}

/* — grille du hero : texte + portrait — */
.mb-split {
  display: grid;
  grid-template-columns: 1.05fr 0.75fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
}

/* — grille à deux colonnes, trois répartitions — */
.mb-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.mb-two--wide-left  { grid-template-columns: 1.25fr 0.85fr; }
.mb-two--wide-right { grid-template-columns: 0.85fr 1.15fr; }

/* — ligne éditoriale : numéro | titre | texte —
   Jamais de cartes juxtaposées, règle de la DA. */
.mb-editorial {
  display: grid;
  grid-template-columns: auto 1fr 1.15fr;
  gap: clamp(20px, 3vw, 40px);
  padding-block: 32px;
  border-top: var(--mb-rule) solid var(--mb-divider);
}
.mb-editorial:last-of-type { border-bottom: var(--mb-rule) solid var(--mb-divider); }

@media (max-width: 900px) {
  .mb-split,
  .mb-two,
  .mb-two--wide-left,
  .mb-two--wide-right { grid-template-columns: 1fr; }

  .mb-split { align-items: start; }

  /* Le numéro reste en tête de ligne, titre et texte s'empilent dessous. */
  .mb-editorial {
    grid-template-columns: auto 1fr;
    gap: 12px 20px;
  }
  .mb-editorial > :last-child { grid-column: 2; }
}

/* Sous 640px, la ligne éditoriale garde la même composition qu'en dessous de
   900px : le numéro reste accolé au titre plutôt que de flotter seul sur sa
   propre ligne. */