/* =====================================================================
   07 — Ce que cela change (#resultats) · fond brume (section--tint)
   Cinq bénéfices en colonnes éditoriales : chaque bloc est posé contre un
   fin filet vertical (écho des axes du symbole), icône or 32 px, titre
   court, texte. Sur mobile, l'icône accompagne le texte dans une même rangée.
   Grille : 1 col < 640 · 2 col ≥ 640 · 3 col (3 + 2 centrées) 900–1199 ·
   5 col ≥ 1200. Tokens uniquement (voir styles.css / DESIGN.md).
   ===================================================================== */

.resultats__grille {
  gap: var(--space-6) var(--space-5);
}

/* Bloc bénéfice — flat, sans carte : la structure vient du filet vertical */
.resultats__item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-1);
}
.resultats__item::before {
  content: "";
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  background: var(--color-border);
}
.resultats__icone {
  grid-row: 1 / span 2;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  color: var(--color-accent);
}
.resultats__icone svg {
  width: 100%;
  height: 100%;
}

.resultats__titre {
  grid-column: 2;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.resultats__texte {
  grid-column: 2;
  max-width: 42ch;
  line-height: 1.55;
  color: var(--color-text-soft);
}

@media (min-width: 640px) {
  .resultats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-5);
  }
  .resultats__item::before { display: block; }
}

/* Tablette (900–1199) : 3 + 2 blocs, dernière rangée centrée
   (grille à 6 pistes, chaque bloc en occupe 2). */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .resultats__grille {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .resultats__item {
    grid-column: span 2;
  }
  .resultats__item:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .resultats__item:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* Desktop (≥ 1200) : cinq colonnes, texte légèrement resserré */
@media (min-width: 1200px) {
  .resultats__grille {
    gap: var(--space-6) var(--space-6);
  }
  .resultats__item {
    padding-left: var(--space-5);
  }
  .resultats__titre { min-height: calc(2 * var(--text-lg) * var(--leading-snug)); }
}