/* ============================================================
   INGRÉDIENTS
   Affichage de la liste d'ingrédients sur la page show d'une recette
   ============================================================ */

.ingredient-list {
    display: flex;
    flex-direction: column;
}

.ingredient-line {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    gap: 1rem;
    padding: 0.625rem 0;
    align-items: baseline;
    font-size: 0.9375rem;
}

.ingredient-line + .ingredient-line {
    border-top: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}

.ingredient-quantity {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    /* tabular-nums : les chiffres font tous la même largeur,
       la colonne quantité s'aligne parfaitement entre lignes */
}

.ingredient-quantity-empty {
    /* Case vide pour les ingrédients sans quantité (ex: "Sel") 
       garde l'alignement de la grille */
}

.ingredient-name {
    color: var(--color-text);
}

.ingredient-note {
    display: block;
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}

.ingredient-optional-tag {
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-style: italic;
    white-space: nowrap;
}

/* Ingrédients facultatifs : légèrement atténués */
.ingredient-optional {
    opacity: 0.7;
}