/* ============================================================
   rs1/solutions-grid — grille des solutions
   Cartes, pastilles, liens : mp-tokens.css
   Grille : 1 colonne → 2 dès 601px → 3 ou 4 dès 1101px
   ============================================================ */

.mp-sg{ padding-block: var(--mp-section) }
.mp-sg--blanc{ background: var(--mp-blanc) }
.mp-sg--brume{ background: var(--mp-bleu-brume) }
.mp-sg--bleu { background: var(--mp-bleu) }

.mp-sg__entete{
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.mp-sg__titre{
  margin: 0;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-sombre .mp-sg__titre{ color: var(--mp-blanc) }

.mp-sg__grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mp-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mp-sg__grille > li{ display: flex }

.mp-sg__carte{
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--mp-texte);
  text-decoration: none;
}

.mp-sg__ico{ margin-bottom: 1.25rem }
.mp-sg__ico img{
  width: 55%;
  height: 55%;
  object-fit: contain;
  transition: filter var(--mp-dur) ease;
}
/* Les icônes sont des SVG en <img> : on les passe en blanc sur la pastille turquoise */
.mp-sg__carte:hover .mp-sg__ico img{ filter: brightness(0) invert(1) }

.mp-sg__carte-titre{
  margin: 0 0 .65rem;
  font-size: var(--mp-t-h3);
  font-weight: 700;
  color: var(--mp-encre);
}

.mp-sg__texte{
  flex: 1;
  margin: 0 0 1.25rem;
  font-size: var(--mp-t-carte);
  line-height: var(--mp-lh-texte);
  color: var(--mp-gris);
}

.mp-sg__carte:hover .mp-sg__lien{ color: var(--mp-turquoise-fonce) }
.mp-sg__carte:hover .mp-sg__lien svg{ transform: translateX(4px) }

@media (min-width: 601px){
  .mp-sg__grille{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 1101px){
  .mp-sg__grille--3{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mp-sg__grille--4{ grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* ── Cinq cartes et plus : rangées de trois centrées ─────────
   Une grille auto-fit (repeat(auto-fit, minmax(…))) laisse la dernière
   rangée calée à gauche et passe par deux colonnes : 5 cartes y donnent
   3 + 2 décalées, puis 2 + 2 + 1 avec une carte orpheline.
   Flex centré, base d'un tiers : 5 → 3 + 2 centrées au pixel près,
   6 → 3 + 3, 8 → 3 + 3 + 2. Jamais de disposition à deux colonnes.
   Sous 961px : une colonne ; de 601 à 960px, cartes horizontales
   (icône à gauche) pour ne pas empiler des cartes de 700px de large
   presque vides. Hauteurs égales sur une rangée (étirement flex),
   lien calé en bas de carte (.mp-sg__texte flex: 1).                */
.mp-sg__grille--rangees{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mp-sg__grille--rangees > li{
  flex: 0 0 100%;
  min-width: 0;
}
.mp-sg__grille--rangees .mp-sg__carte-titre{
  text-wrap: balance;
  hyphens: manual;
}

@media (min-width: 601px) and (max-width: 960px){
  .mp-sg__grille--rangees .mp-sg__carte{
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 1.35rem;
  }
  .mp-sg__grille--rangees .mp-sg__ico{
    grid-row: 1 / span 3;
    margin-bottom: 0;
  }
  .mp-sg__grille--rangees .mp-sg__carte-titre,
  .mp-sg__grille--rangees .mp-sg__texte,
  .mp-sg__grille--rangees .mp-sg__lien{ grid-column: 2 }
  .mp-sg__grille--rangees .mp-sg__texte{ margin-bottom: .9rem }
}

@media (min-width: 961px){
  .mp-sg__grille--rangees > li{
    flex-basis: calc((100% - 2 * var(--mp-gap)) / 3);
  }
}

@media (prefers-reduced-motion: reduce){
  .mp-sg__ico img{ transition: none }
  .mp-sg__carte:hover .mp-sg__lien svg{ transform: none }
}

/* ── Sous-titre et pictogrammes (refonte IRVE) ───────────── */
.mp-sg__intro{
  margin: 1.1rem auto 0;
  max-width: 60ch;
  font-size: var(--mp-t-lg);
  line-height: var(--mp-lh-texte);
  color: var(--mp-texte);
}
.mp-sombre .mp-sg__intro{ color: var(--mp-texte-sombre) }
.mp-sg__ico svg{ display: block }