/* ==========================================================================
   07. Icônes — Google Material Symbols (Outlined), couleur primaire
   https://fonts.google.com/icons
   ========================================================================== */

.msi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  color: var(--color-primary-700);
  vertical-align: middle;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-32);
  max-width: 640px;
}

.icon-grid .msi {
  font-size: 30px;
}

.icon-caption {
  margin-top: var(--space-32);
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--color-grey-500);
}

@media (max-width: 640px) {
  .icon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Marque / icônes de réseaux sociaux (hors bibliothèque Material) ---- */
.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}