/* ============================================================
   rs1/text-images — texte | images (logos, certificats), fond blanc
   Grille : 1 colonne → 2 colonnes dès 961px
   ============================================================ */

.mp-ti{
  padding-block: var(--mp-section-sm);
  background: var(--mp-blanc);
  color: var(--mp-texte);
}

.mp-ti__grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.mp-ti__titre{
  margin: 0;
  font-size: var(--mp-t-h2-sm);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-ti__texte{ margin-top: 1rem }
.mp-ti__texte > :first-child{ margin-top: 0 }
.mp-ti__texte > :last-child{ margin-bottom: 0 }

/* ── Visuels dans un cadre arrondi ────────────────────────── */
.mp-ti__images{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mp-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-ti__images--une{ grid-template-columns: minmax(0, 1fr) }

.mp-ti__cadre{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--mp-blanc);
  border: 1px solid var(--mp-trait);
  border-radius: var(--mp-r);
  box-shadow: var(--mp-sh-1);
}
.mp-ti__cadre img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 16rem;
  object-fit: contain;
  border-radius: var(--mp-r-sm);
}
.mp-ti__images--une .mp-ti__cadre img{ max-width: 20rem }

@media (min-width: 961px){
  .mp-ti__grille{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mp-ti--sans-image .mp-ti__grille{ grid-template-columns: minmax(0, 1fr); max-width: 52rem }
}