/* Page de suivi de la liste de courses */

.ligne.est-cochee .nom-produit {
    text-decoration: line-through;
    color: #888;
}

/* Par défaut : les lignes cochées sont masquées */
#conteneur-liste .ligne.est-cochee {
    display: none;
}

/* Quand la case "Afficher les articles cochés" est cochée,
   on réaffiche les lignes cochées (classe posée en JS sur le conteneur) */
#conteneur-liste.afficher-articles-coches .ligne.est-cochee {
    display: block;
}

.barre-outils-suivi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.afficher-coches-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.ligne label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    min-height: 44px; /* zone de clic confortable au doigt */
}

.case-produit {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.groupe-titre {
    margin-top: 1.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #ddd;
}

.texte-explicatif {
    color: #666;
    font-size: 0.9rem;
    max-width: 540px;
}

.ligne-principale {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ligne-budget {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 0.4rem 0 0.6rem 2.7rem; /* aligné sous le nom du produit, après la case à cocher */
    font-size: 0.8rem;
    color: #666;
}

.ligne-budget label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ligne-budget input {
    width: 90px;
    padding: 0.4rem;
    font-size: 0.9rem;
}

.montant-ligne {
    align-self: center;
    font-weight: 600;
    color: #2e7d32;
    min-width: 60px;
}

.barre-total-budget {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #e8f5e9;
    border-radius: 8px;
    text-align: right;
    font-size: 1.05rem;
}