/* Tableau des remises par paliers : fiche et modale des articles (buildApercuRemise() / ArticleCardRenderer::apercuRemise())
   et page Panier (renderRemises() de pages/panier.js) ; une ligne par palier, celui atteint surligné (tr.is-atteint) */

.article-remise-apercu {
    margin: 0 0 6px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--promo) 40%, transparent);
    border-radius: 8px;
    overflow: hidden;
}

.article-remise-apercu th,
.article-remise-apercu td {
    padding: 4px 10px;
    text-align: right;
    white-space: nowrap;
    border-top: 1px solid color-mix(in srgb, var(--promo) 18%, transparent);
}

.article-remise-apercu thead th {
    border-top: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--brun-cuir-clair);
}

.article-remise-apercu tbody th {
    text-align: left;
    font-weight: 600;
}

.article-remise-apercu td {
    font-weight: 700;
    color: var(--promo-fonce);
}

/* Palier atteint avec la quantité visée (majPrixRemises()) */
.article-remise-apercu tr.is-atteint th,
.article-remise-apercu tr.is-atteint td {
    background: color-mix(in srgb, var(--promo) 14%, transparent);
}

/* Ligne de référence : prix sans remise, en retrait */
.article-remise-apercu .is-normal th,
.article-remise-apercu .is-normal td {
    font-weight: 400;
    color: var(--brun-cuir-clair);
}

.article-remise-apercu-taux {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--promo);
    color: var(--white);
    font-size: 11.5px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .article-remise-apercu th,
    .article-remise-apercu td {
        padding: 4px 6px;
    }
}

/* Panier : un tableau par type de remise, une colonne par article du type ; défilement horizontal si beaucoup d'articles */
.remise-apercu-defilement {
    max-width: 100%;
    overflow-x: auto;
}

.remise-apercu-defilement .article-remise-apercu {
    margin: 0.35rem 0;
}

.article-remise-apercu thead .remise-apercu-article {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--brun-nuit);
}

/* Une ligne par état et par option (pages/panier.js) */
.remise-apercu-article small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--brun-cuir-clair);
}