/* ============================================================
   rs1/icon-list — grille de cartes à pictogramme
   Cartes et pastilles : .mp-carte, .mp-ico (mp-tokens.css)
   ============================================================ */

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

.mp-il__titre{
  margin: 0 0 2rem;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}

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

.mp-il__ico{ margin-bottom: 1.25rem }
.mp-il__ico img{ width: 60%; height: 60%; object-fit: contain }

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

.mp-il__etiquette{
  margin: 0 0 .35rem;
  font-size: var(--mp-t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mp-turquoise-fonce);
}

.mp-il__texte{
  font-size: var(--mp-t-carte);
  color: var(--mp-texte);
}
.mp-il__texte > :last-child{ margin-bottom: 0 }

@media (min-width: 961px){
  .mp-il__grille{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ── Variantes (refonte IRVE) : fond, introduction, 4 colonnes ── */
.mp-il--brume{ background: var(--mp-bleu-brume) }
.mp-il__titre + .mp-il__intro{ margin-top: -1.25rem }
.mp-il__intro{
  margin: 0 0 2rem;
  max-width: 60ch;
  font-size: var(--mp-t-lg);
  line-height: var(--mp-lh-texte);
  color: var(--mp-texte);
}
.mp-il__ico svg{ display: block }

/* Ligne de liens sous l'introduction (liens partagés .mp-lien) */
.mp-il__liens{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.75rem;
  margin: -.75rem 0 2rem;
  font-size: var(--mp-t-base);
}
.mp-il__liens-intro{
  font-weight: 600;
  color: var(--mp-encre);
}
@media (max-width: 600px){
  .mp-il__liens-intro{ flex-basis: 100% }
}

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

/* ── Variantes (page Maintenance) : 3 colonnes, section masquée,
   emplacements à renseigner (éditeur uniquement) ── */
/* Rangées de trois centrées : 5 cartes → 3 + 2 centrées, jamais de
   carte orpheline calée à gauche (page IRVE, cinq arguments métier).
   Rangées complètes : rendu identique à une grille à 3 colonnes.     */
@media (min-width: 961px){
  .mp-il__grille--3{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mp-il__grille--3 > li{
    flex: 0 0 calc((100% - 2 * var(--mp-gap)) / 3);
    min-width: 0;
  }
}

.mp-il__note{
  margin: 0 0 1.5rem;
  padding: .6rem .9rem;
  border: 1px dashed var(--mp-trait);
  border-radius: var(--mp-r-sm);
  background: var(--mp-blanc);
  font-size: var(--mp-t-xs);
  color: var(--mp-gris);
}

.mp-il__item--emplacement,
.mp-il__item--emplacement:hover{
  border-style: dashed;
  background: transparent;
}
.mp-il__a-renseigner{
  margin: .75rem 0 0;
  font-size: var(--mp-t-xs);
  font-weight: 600;
  color: var(--mp-gris);
}