.icon-button.disabled.subtle {
  filter: grayscale(80%) brightness(0.8) opacity(0.6);
  background: rgba(220,220,220,0.6);
}

.icon-button.disabled.subtle::after {
  display: none;
}

.icon-button:hover {
  transform: scale(1.0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Pictogramme (image) */
.icon-btn-picto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5em;
  height: 3.5em;
  overflow: hidden;
  border-radius: .3em;
}

.icon-button-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Libellé sous l’image */
.icon-btn-label {
  font-size: 0.65em;
  text-align: center;
  margin-top: 0.2em;
  font-weight: 600;
  color: #222;
  line-height: 1.1em;
  text-transform: capitalize;
}
.ingr-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
  justify-content: flex-start;
  align-items: center;
  margin-top: .4em;
}

.ingr-grid .icon-btn {
  width: 1.8em;
  height: 1.8em;
  border-radius: .3em;
  overflow: hidden;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  transition: transform .2s ease;
}

.ingr-grid .icon-btn:hover {
  transform: scale(1);
}
.icon-button:active {
  transform: scale(0.95);
  transition: transform .05s;
}