/* Page de création / modification de liste */

.champ-nom-liste {
    display: block;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.champ-nom-liste input {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.6rem;
    font-size: 1rem;
}

.tableau-produits {
    width: 100%;
    border-collapse: collapse;
}

.tableau-produits th {
    text-align: left;
    font-size: 0.85rem;
    color: #666;
    padding-bottom: 0.5rem;
}

.tableau-produits td {
    padding: 0.4rem 0.4rem 0.4rem 0;
    vertical-align: middle;
}

.tableau-produits input,
.tableau-produits select {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    min-height: 44px; /* confort tactile sur mobile */
}

/* --- Champ produit + bouton supprimer : toujours à la suite l'un de
   l'autre dans le flux normal (jamais en position absolue), aussi bien
   sur ordinateur que sur mobile — le bouton ne peut donc plus jamais
   chevaucher le libellé ou le texte saisi. --- */
.champ-produit-avec-suppression {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.champ-produit-avec-suppression input {
    flex: 1;
    min-width: 0; /* évite que l'input ne déborde de la carte sur mobile */
}

.bouton-supprimer-ligne {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #c0392b;
    font-size: 1.1rem;
    cursor: pointer;
}

.bouton-secondaire {
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    border: 1px dashed #999;
    background: transparent;
    cursor: pointer;
}

.actions-formulaire {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.actions-formulaire .lien-action {
    color: #666;
    text-decoration: underline;
}

.bouton-principal {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    cursor: pointer;
}

.etiquette-cochee {
    display: inline-block;
    font-size: 0.75rem;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-top: 0.25rem;
}

/* --- Adaptation mobile : le tableau devient une pile de cartes --- */
@media (max-width: 600px) {
    .tableau-produits thead {
        display: none;
    }

    .tableau-produits,
    .tableau-produits tbody,
    .tableau-produits tr,
    .tableau-produits td {
        display: block;
        width: 100%;
    }

    .ligne-produit {
        margin-bottom: 1rem;
        padding: 0.75rem;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
    }

    /* Le thead étant masqué sur mobile, chaque champ affiche son propre
       libellé au-dessus, via l'attribut data-label posé sur le <td> */
    .tableau-produits td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: #666;
        margin-bottom: 0.2rem;
    }
}