/*!
 * wynstor-category-consommables.css
 *
 * CSS dédié aux catégories design_key = "consommables".
 * Chargé conditionnellement via head.phtml uniquement quand la catégorie courante
 * a design_key=consommables (sinon non-injecté = zéro surcharge sur les autres pages).
 *
 * Cible :
 *   - Hero catégorie (.consommables-hero)
 *   - Tableau références (.consommables-table-*)
 *   - Stepper quantité (.qty-stepper)
 *   - Footer cumul sticky (.consommables-table-footer)
 *
 * Lucas Wynstor - 2026-04-10
 * V1 pilote cat 340 "Rouleaux de plastification" (110 références)
 */

/* =====================================================================
   HERO CONSOMMABLES
   Le hero utilise les classes utility Wynstor/Bootstrap (.master-hero,
   .text-body, .fs-5xl, etc.) — voir mainstart_consommables.phtml.
   Pas de CSS custom ici, on hérite du design system global.
===================================================================== */

/* Classe custom pour garantir le contraste WCAG AA sur les textes "muted"
   (description hero + meta count). text-secondary Bootstrap 5.0-5.2 est trop
   clair (#6c757d = ratio 4.5 limite, flagué Lighthouse). On force #4a4a4a qui
   donne un ratio 9:1 (WCAG AAA). */
.consommables-muted {
    color: #4a4a4a;
}

.consommables-muted strong,
.consommables-muted .text-body {
    color: #1a1a1a;
}

/* =====================================================================
   TABLEAU CONSOMMABLES
===================================================================== */

.consommables-table-section {
    padding: 24px 15px 120px; /* padding-bottom pour laisser place au footer sticky */
    max-width: 1280px;
    margin: 0 auto;
}

.consommables-table-header {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
}

.consommables-table-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-primary, #2b2b2b);
    margin: 0;
}

.consommables-table-meta {
    font-size: 0.85rem;
    color: #4a4a4a; /* WCAG AAA contrast on white (9:1) — fix Lighthouse accessibility */
    margin: 0;
}

.consommables-table-meta strong {
    color: #1a1a1a;
}

/* Filtres select — labels passés en placeholder pour gagner de la place
   Toujours en ligne (pas de wrap) — scroll horizontal en fallback sur très petit écran */
.consommables-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--ws-gray-50, #fafbfc);
    border: 1px solid var(--ws-gray-200, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.filters-label {
    font-weight: 700;
    color: var(--bs-primary, #2b2b2b);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.consommables-filters .filter-select,
.consommables-filters .filter-reset {
    flex-shrink: 0;
}

/* Filtres select simples Bootstrap .form-select — width auto + min-width
   pour éviter le `select { width: 100% }` global Wynstor. */
.consommables-filters .filter-select {
    width: auto !important;
    min-width: 160px;
    max-width: 260px;
    flex-shrink: 0;
}

.consommables-filters .filter-reset {
    margin-left: auto;
    white-space: nowrap;
    text-decoration: none;
}

.consommables-filters .filter-reset:hover {
    text-decoration: underline;
}

.consommables-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ws-gray-200, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

.consommables-table {
    width: 100%;
    min-width: 860px; /* force scroll horizontal sur mobile */
    border-collapse: collapse;
    table-layout: auto;
    font-size: 1.2rem;
    background: #fff;
}

.consommables-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ws-gray-50, #fafbfc);
}

/* Thead harmonisé (pattern repris du récap sticky : uppercase, gris, fin).
   Appliqué conjointement au main table + récap via .recap-table thead th */
.consommables-table thead th {
    padding: 0;
    font-weight: 600;
    color: var(--ws-gray-600, #6b6b6b);
    background: var(--ws-gray-50, #fafbfc);
    border-bottom: 1px solid var(--ws-gray-200, #e5e7eb);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.th-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    cursor: pointer;
    text-align: left;
}

.th-sort-btn:hover {
    background: var(--ws-gray-100, #f5f5f5);
}

.th-sort-icon::after {
    content: '⇅';
    opacity: 0.35;
    font-size: 0.85em;
    margin-left: 2px;
}

th[aria-sort="ascending"] .th-sort-icon::after { content: '▲'; opacity: 1; }
th[aria-sort="descending"] .th-sort-icon::after { content: '▼'; opacity: 1; }

/* Colonnes non-triables (type/finition/conditionnement textuels) */
.consommables-table thead th.col-unsortable {
    padding: 10px 14px;
    cursor: default;
}

.th-label-static {
    font-weight: 600;
    font-size: inherit;
}

.consommables-table tbody tr {
    border-bottom: 1px solid var(--ws-gray-150, #eef0f3);
    transition: background 0.15s ease;
}

.consommables-table tbody tr:nth-child(even) {
    background: var(--ws-gray-50, #fafbfc);
}

.consommables-table tbody tr:hover {
    background: var(--ws-hover, #f0f7ff);
}

.consommables-table tbody tr.row-selected {
    background: #fff8e8;
    box-shadow: inset 3px 0 0 var(--bs-primary, #d93535);
}

.consommables-table tbody tr.row-added {
    animation: rowAddedFlash 1.2s ease;
}

@keyframes rowAddedFlash {
    0%   { background: #d4f4dd; }
    100% { background: inherit; }
}

.consommables-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--ws-gray-800, #2d3748);
    font-size: 1.1rem;
}

.consommables-table .col-ref {
    min-width: 90px;
    width: 90px;
}

.row-ref-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
}

.row-ref-link:hover {
    color: var(--bs-primary, #d93535);
    text-decoration: none;
}

.row-sku {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ws-blue-500, #276ef1);
}

.row-name {
    font-size: 0.75rem;
    color: var(--ws-gray-600, #6b6b6b);
    line-height: 1.35;
}

.row-ref-link:hover .row-sku {
    color: var(--bs-primary, #d93535);
}

.consommables-table .col-price {
    font-weight: 700;
    color: var(--bs-primary, #2b2b2b);
    white-space: nowrap;
    font-size: 1.1rem;
}

.consommables-table .col-subtotal {
    font-weight: 600;
    color: var(--ws-gray-500, #9ca3af);
    white-space: nowrap;
    text-align: right;
    min-width: 90px;
}

.consommables-table .col-subtotal.has-value {
    color: var(--bs-success, #16a34a);
}

/* =====================================================================
   STEPPER QUANTITE
   Le visuel du stepper (main table + récap) utilise les classes globales
   Wynstor offcanvas : .qty-wrapper .count-input .btn .btn-icon .btn-sm
   .less .more .ws-ico .form-control.
   Aucun CSS custom ici — on hérite 100% du design system.
===================================================================== */

/* =====================================================================
   BOUTON + PAR LIGNE
   On hérite de .btn .btn-primary du design system Wynstor.
   Ajustements locaux uniquement : taille compacte pour s'intégrer dans la cellule
   et icône cart centrée. Pas de couleur custom — la couleur vient de btn-primary.
===================================================================== */

.consommables-table .btn-row-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 6px 10px;
    line-height: 1;
}

.consommables-table .btn-row-add-icon {
    display: block;
    width: 16px;
    height: 16px;
}

/* =====================================================================
   FOOTER CUMUL STICKY
===================================================================== */

.consommables-table-footer {
    /* État par défaut : invisible (aucun produit sélectionné).
       Apparaît avec animation slide-up dès que le 1er produit est ajouté
       (classe .is-active ajoutée par le JS sur transition 0 → 1+ refs). */
    display: none;
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex-direction: column;
    gap: 14px;
    padding: 20px 26px;
    margin: 16px 0 0;
    background: #fff;
    border: 1px solid var(--ws-gray-300, #d1d5db);
    border-radius: 10px;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
}

.consommables-table-footer.is-active {
    display: flex;
    animation: consommablesFooterSlideUp 0.4s ease-out;
}

@keyframes consommablesFooterSlideUp {
    0%   { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Toutes les règles .footer-* et .recap-* sont scopées au parent .consommables-table-footer
   pour éviter le conflit avec le footer global Porto (.footer-bottom natif = bandeau noir
   en bas de page, défini dans style-m.css). Ne JAMAIS dé-scoper sans renommer les classes. */

.consommables-table-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* Groupe droit : prix total + bouton CTA collés */
.consommables-table-footer .footer-cta-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Refs count → bouton cliquable (toggle du récap) — couleur primary bleu */
.consommables-table-footer .footer-refs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 1.1rem;
    color: var(--ws-blue-500, #276ef1);
    cursor: pointer;
    line-height: 1.2;
    text-align: left;
}

.consommables-table-footer .footer-refs-toggle strong {
    color: var(--ws-blue-500, #276ef1);
    font-weight: 800;
    font-size: 1.25rem;
}

.consommables-table-footer .footer-refs-toggle:hover strong,
.consommables-table-footer .footer-refs-toggle:hover .footer-refs-text {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.consommables-table-footer .recap-toggle-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    color: var(--ws-blue-500, #276ef1);
    margin-left: 4px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.consommables-table-footer.recap-collapsed .recap-toggle-icon {
    transform: rotate(180deg);
}

/* État collapsed : récap entier (header + body) caché, summary + bouton restent */
.consommables-table-footer.recap-collapsed .footer-recap {
    display: none;
}

/* Animation slide-in d'une nouvelle ligne ajoutée au récap */
@keyframes recapRowSlideIn {
    0%   { opacity: 0; transform: translateY(-6px); background-color: #fff8e8; }
    60%  { opacity: 1; background-color: #fff8e8; }
    100% { opacity: 1; transform: translateY(0); background-color: transparent; }
}

.consommables-table-footer .recap-table tbody tr.recap-row-new {
    animation: recapRowSlideIn 0.55s ease-out;
}

/* Récap mini-tableau (positionné sous le résumé + bouton)
   - Max ~3 lignes visibles + thead, scroll vertical au-delà
   - thead sticky en haut du scroll (reste visible quand on scroll les rows) */
.consommables-table-footer .footer-recap {
    border-top: 1px solid var(--ws-gray-200, #e5e7eb);
    padding-top: 12px;
    max-height: calc(3 * 36px + 32px); /* 3 rows ~36px + thead ~32px = 140px */
    overflow-y: auto;
    overflow-x: hidden;
}

.consommables-table-footer .recap-table {
    width: 100%;
    /* border-collapse: collapse casse position:sticky sur <th> dans Safari/Firefox.
       On passe en separate + spacing 0 pour conserver l'apparence collapse. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.2rem;
}

.consommables-table-footer .recap-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--ws-gray-600, #6b6b6b);
    background: var(--ws-gray-50, #fafbfc);
    border-bottom: 1px solid var(--ws-gray-200, #e5e7eb);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    /* Sticky thead — reste visible pendant le scroll vertical du body */
    position: sticky;
    top: 0;
    z-index: 2;
}

.consommables-table-footer .recap-table thead th.recap-th-price,
.consommables-table-footer .recap-table thead th.recap-th-qty {
    text-align: right;
}

.consommables-table-footer .recap-table tbody tr {
    border-bottom: 1px solid var(--ws-gray-150, #eef0f3);
}

.consommables-table-footer .recap-table tbody tr:last-child {
    border-bottom: 0;
}

.consommables-table-footer .recap-table tbody td {
    padding: 8px 10px;
    color: var(--ws-gray-800, #2d3748);
    vertical-align: middle;
    font-size: 1.1rem;
}

.consommables-table-footer .recap-td-ref {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ws-blue-500, #276ef1);
    white-space: nowrap;
}

.consommables-table-footer .recap-td-price {
    text-align: right;
    color: var(--ws-gray-700, #4a4a4a);
    white-space: nowrap;
}

.consommables-table-footer .recap-td-total {
    text-align: right;
    font-weight: 700;
    color: var(--bs-success, #16a34a);
    white-space: nowrap;
}

.consommables-table-footer .recap-td-qty {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 10px;
}

/* Bouton trash (supprimer ligne récap) */
.consommables-table-footer .recap-td-trash {
    text-align: center;
    padding: 4px 6px;
    width: 38px;
}

.consommables-table-footer .recap-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ws-gray-500, #9ca3af);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.consommables-table-footer .recap-trash-btn:hover {
    background: #fff0f0;
    border-color: #e5bfbf;
    color: #d93535;
}

.consommables-table-footer .recap-trash-btn:focus-visible {
    outline: 2px solid var(--ws-blue-500, #276ef1);
    outline-offset: 1px;
}

.consommables-table-footer .recap-trash-btn svg {
    display: block;
}

.consommables-table-footer.is-active {
    border-color: var(--bs-primary, #d93535);
    background: #fffdf9;
}

.consommables-table-footer .footer-summary {
    display: flex;
    align-items: center;
    margin: 0;
}

.consommables-table-footer .footer-refs-text {
    margin-left: 4px;
}

.consommables-table-footer .footer-total-block {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1;
}

.consommables-table-footer .footer-total-label {
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ws-gray-600, #6b6b6b);
}

.consommables-table-footer .footer-total-amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ws-blue-500, #276ef1);
    line-height: 1;
}

.consommables-table-footer .footer-total-tax {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ws-gray-600, #6b6b6b);
}

/* CTA principal sticky : on hérite de .btn .btn-primary, on ajoute juste
   l'alignement icône + label + le poids visuel "important" du sticky. */
.consommables-table-footer .btn-add-all-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 28px;
}

.consommables-table-footer .btn-add-all-cta .icon-cart {
    font-size: 1.25rem;
    line-height: 1;
}

.consommables-table-footer .btn-add-all-cta:hover:not(:disabled) {
    transform: translateY(-1px);
}

.consommables-table-footer .btn-add-all-cta.is-ready {
    animation: btnReadyPulse 2s ease-in-out 1;
}

@keyframes btnReadyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 53, 53, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(217, 53, 53, 0); }
}

/* =====================================================================
   EMPTY STATE
===================================================================== */

.consommables-table-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--ws-gray-600, #6b6b6b);
    max-width: 1280px;
    margin: 0 auto;
}

/* =====================================================================
   ACCESSIBILITE
===================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   RESPONSIVE MOBILE
===================================================================== */

@media (max-width: 767px) {
    .consommables-hero {
        padding: 20px 15px 16px;
    }

    .consommables-table-section {
        padding: 16px 10px 140px;
    }

    .consommables-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .consommables-table-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
    }

    .consommables-table-footer .btn-add-all-cta {
        width: 100%;
        padding: 14px 20px;
        justify-content: center;
    }

    .consommables-table-footer .footer-summary {
        justify-content: space-between;
    }

    .consommables-table thead {
        position: static; /* sticky header inutile en scroll horizontal */
    }
}