/* ============================================================
   rs1/section-2-cols — section à deux colonnes
   Surcharge la grille compilée (.grid-2-cols : bascule à 1024px,
   séparateurs #039) : bascule à 960px, séparateurs aux tokens.
   ============================================================ */

.mp-s2c{
  padding-block: var(--mp-section-sm);
  background: var(--mp-blanc);
  color: var(--mp-texte);
}
.mp-s2c--sombre{ background: var(--mp-bleu-fonce) }

/* Sections claires empilées : pas de double espacement */
.mp-s2c:not(.mp-s2c--sombre) + .mp-s2c:not(.mp-s2c--sombre){ padding-top: 0 }

/* Grille : une colonne jusqu'à 960px */
.mp-s2c .grid-2-cols{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 2.5rem;
}
.mp-s2c .grid-2-cols > div > :nth-child(odd),
.mp-s2c .grid-2-cols > div > :nth-child(2n){ padding-inline: 0 }

.mp-s2c .with-divider > div > :not(:first-child),
.mp-s2c .with-dark-divider > div > :not(:first-child){
  padding-top: 2.5rem;
  border-top: 1px solid var(--mp-trait);
  border-left: 0;
}
.mp-s2c .with-dark-divider > div > :not(:first-child){ border-top-color: var(--mp-trait-sombre) }

@media (min-width: 961px){
  .mp-s2c .grid-2-cols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }
  .mp-s2c .grid-2-cols > div > :nth-child(odd){ padding-right: clamp(1.5rem, 3vw, 3rem) }
  .mp-s2c .grid-2-cols > div > :nth-child(2n){ padding-left: clamp(1.5rem, 3vw, 3rem) }

  .mp-s2c .with-divider > div > :not(:first-child),
  .mp-s2c .with-dark-divider > div > :not(:first-child){ padding-top: 0; border-top: 0 }
  .mp-s2c .with-divider > div > :nth-child(2n){ border-left: 1px solid var(--mp-trait) }
  .mp-s2c .with-dark-divider > div > :nth-child(2n){ border-left: 1px solid var(--mp-trait-sombre) }
}

/* ── Disposition « principale » : 2/3 – 1/3 ──────────────────
   Page outil (Contact) : colonne principale dominante, colonne
   latérale à droite. Sous 960px, empilement dans l'ordre du HTML :
   la colonne principale (le formulaire) passe en premier.        */
.mp-s2c--principale:not(.mp-s2c--sombre){ background: var(--mp-bleu-brume) }
.mp-s2c--principale{ padding-block: clamp(2.5rem, 5vw, 4.5rem) }

@media (min-width: 961px){
  .mp-s2c--principale .grid-2-cols{
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .mp-s2c--principale .grid-2-cols > div > :nth-child(odd),
  .mp-s2c--principale .grid-2-cols > div > :nth-child(2n){ padding-inline: 0 }
}