/**
 * DZ CRM — Composant catalogue (styles)
 * Utilisé par la page catalogue du site ET /mon-catalogue/ (espace client).
 *
 * SURCHARGE THÈME : chaque couleur lit d'abord la variable CSS du thème
 * (--color-primary, --color-dark, --color-bg, --color-border, --color-muted,
 * --color-text, --color-white, --font-base) avec un fallback David Zinc.
 * Le thème n'a donc qu'à définir ses variables :root pour rethèmer le composant.
 */

/* Base typographique du composant. Les variables, .btn* et .form-control
   viennent du fichier PARTAGÉ base-ui.css (thème, avec fallback plugin) —
   imprimé par le thème sur le site et par render_base_ui_styles() sur le portail. */
.catalogue-page {
    font-family: var(--font-base, 'Inter', system-ui, -apple-system, sans-serif);
    font-size: 16px;
    line-height: 1.6;
}

/* ------------------------------------------------------------
   Reset SCOPÉ : le composant est autonome hors thème (portail).
   Reproduit les conditions du reset global du site (marges/paddings
   à zéro, listes sans puces, liens sans soulignement) uniquement à
   l'intérieur du composant et du panier (monté au niveau body).
   :where() garde une spécificité nulle : toutes les règles du
   composant gardent la priorité.
------------------------------------------------------------ */
.catalogue-page *,
.catalogue-page *::before,
.catalogue-page *::after,
.cart-drawer *,
.cart-bar,
.cart-overlay {
    box-sizing: border-box;
}

.catalogue-page :where(h1, h2, h3, h4, p, ul, ol, li, figure, form),
.cart-drawer :where(h2, p, ul, ol, li) {
    margin: 0;
    padding: 0;
}

.catalogue-page :where(ul, ol),
.cart-drawer :where(ul, ol) {
    list-style: none;
}

/* Liens : mêmes défauts que le reset du site (rouge primaire, sans soulignement) */
.catalogue-page :where(a),
.cart-drawer :where(a),
.cart-bar :where(a) {
    text-decoration: none;
    color: var(--color-primary, #a4151b);
}

.catalogue-page :where(button),
.cart-drawer :where(button) {
    font-family: inherit;
}

/* ============================================================
   CATALOGUE
============================================================ */
.catalogue-page { background: var(--color-bg, #f8f9fa); min-height: 70vh; }

.catalogue-topbar {
    background: linear-gradient(135deg, var(--color-dark, #1c1c1e) 0%, #2a2a2e 100%);
    color: var(--color-white, #ffffff);
    padding: 2.25rem 0 1.75rem;
    margin-bottom: 0;
    border-bottom: 3px solid var(--color-primary, #a4151b);
    position: relative;
    overflow: hidden;
}
.catalogue-topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(164,21,27,.18), transparent 55%);
    pointer-events: none;
}
.catalogue-topbar .container { position: relative; }
.catalogue-topbar h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: .3rem; letter-spacing: -.02em; }
.catalogue-topbar p { color: rgba(255,255,255,.6); font-size: .88rem; }

/* Notice mode commande (compte non lié) */
.catalogue-shop-notice {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .45rem .9rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    font-size: .78rem;
    color: rgba(255,255,255,.75);
}
.catalogue-shop-notice.linked {
    background: rgba(26,127,55,.2);
    border-color: rgba(60,180,90,.35);
    color: #b7e8c3;
}

.catalogue-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; align-items: start; }

/* Sidebar */
.catalogue-sidebar {
    background: var(--color-white, #ffffff);
    border-right: 1px solid var(--color-border, #e5e7eb);
    padding: 1.5rem 1.25rem;
    min-height: calc(100vh - 180px);
    position: sticky;
    top: 83px; /* hauteur header */
    max-height: calc(100vh - 83px);
    overflow-y: auto;
}
.catalogue-sidebar h3,
.catalogue-sidebar-toggle {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-muted, #6b7280);
    margin-bottom: 1rem;
}

/* Desktop : le toggle est un simple titre (non cliquable, caret masqué) */
.catalogue-sidebar-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
    font-family: inherit;
}
.cat-toggle-caret { display: none; }
.cat-toggle-ico { display: none; }

/* Chip « filtre catégorie actif » au-dessus de la liste produits */
.cat-active-filter { margin: 0 0 .75rem; }
.cat-active-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(164, 21, 27, .07);
    color: var(--color-primary, #a4151b);
    border: 1px solid rgba(164, 21, 27, .25);
    border-radius: 20px;
    padding: .3rem .45rem .3rem .8rem;
    font-size: .82rem;
    font-weight: 600;
}
.cat-active-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(164, 21, 27, .12);
    color: inherit;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}
.cat-active-chip button:hover { background: var(--color-primary, #a4151b); color: #fff; }
.cat-tree ul { padding: 0; margin: 0; }
.cat-tree > ul > li { margin-bottom: .15rem; }
.cat-tree a {
    color: var(--color-text, #2d2d2d);
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 6px;
    transition: all .15s;
    line-height: 1.3;
}
.cat-tree a:hover { background: var(--color-bg, #f8f9fa); color: var(--color-dark, #1c1c1e); }
.cat-tree a.active {
    background: var(--color-primary, #a4151b);
    color: var(--color-white, #ffffff);
    font-weight: 500;
}
.cat-tree a.active:hover { background: var(--color-primary-dark, #7d1015); color: var(--color-white, #ffffff); }

/* Ligne parent avec bouton toggle */
.cat-parent-row {
    display: flex;
    align-items: center;
}
.cat-parent-link { flex: 1; min-width: 0; }

.cat-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 5px;
    color: var(--color-muted, #6b7280);
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color .15s, background .15s;
    line-height: 1;
}
.cat-toggle:hover { background: var(--color-bg, #f8f9fa); color: var(--color-dark, #1c1c1e); }
.cat-toggle .cat-chevron { transition: transform .2s ease; display: block; }
.cat-toggle[aria-expanded="true"] .cat-chevron { transform: rotate(180deg); }

/* Sous-catégories — repliées par défaut (imbrication N niveaux) */
.cat-sub-list {
    display: none;
    padding-left: .85rem;
    margin-top: .15rem;
    border-left: 2px solid var(--color-border, #e5e7eb);
    margin-left: .75rem;
}
.cat-sub-list.open { display: block; }
.cat-sub-list a { font-size: .83rem; padding: .4rem .6rem; }
/* Niveaux profonds : indentation moindre pour rester lisible */
.cat-sub-list .cat-sub-list { padding-left: .6rem; margin-left: .5rem; }

/* Bouton export catalogue (.xls au prix client) */
.dz-export-form { flex-shrink: 0; }
.dz-btn-export {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    background: #1a7f37;
    color: var(--color-white, #ffffff);
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 3px 10px rgba(26,127,55,.3);
}
.dz-btn-export:hover {
    background: #146c2e;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(26,127,55,.4);
}

@media (max-width: 768px) {
    .catalogue-search-bar { flex-wrap: wrap; }
    .dz-export-form { width: 100%; }
    .dz-btn-export { width: 100%; justify-content: center; }
}

/* Zone produits */
.catalogue-main {
    background: var(--color-white, #ffffff);
    padding: 1.75rem;
    min-width: 0; /* évite le débordement de la piste grid (grid blowout) */
}

/* Barre de recherche */
.catalogue-search-bar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}
.catalogue-search-bar input {
    flex: 1;
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: .65rem 1rem;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
}
.catalogue-search-bar input:focus {
    outline: none;
    border-color: var(--color-primary, #a4151b);
    box-shadow: 0 0 0 3px rgba(164,21,27,.12);
}
.catalogue-count {
    font-size: .82rem;
    color: var(--color-muted, #6b7280);
    margin-bottom: 1rem;
    padding: 0 .25rem;
}

/* Liste produits — GRILLE CSS (plus de <table> : les styles de table
   hérités écrasaient la mise en page mobile). Chaque ligne est sa propre
   grille : les largeurs de colonnes sont FIXES pour rester alignées. */
.products-table-wrapper {
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 1px 12px rgba(0,0,0,.05);
    background: var(--color-white, #ffffff);
}
.products-list { font-size: .88rem; }

/* Desktop : réf | désignation | type | prix [| commander] */
.products-head,
.product-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) minmax(0, 170px) 110px;
    align-items: center;
    column-gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.products-list.has-cart .products-head,
.products-list.has-cart .product-row {
    grid-template-columns: 150px minmax(0, 1fr) minmax(0, 170px) 110px 150px;
}
.products-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: .8rem;
    padding-bottom: .8rem;
    background: var(--color-dark, #1c1c1e);
    color: rgba(255,255,255,.8);
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    white-space: nowrap;
}
.product-row {
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    transition: background .12s;
}
.product-row:last-child { border-bottom: none; }
/* Survol uniquement avec une vraie souris (sur mobile il « colle ») */
@media (hover: hover) {
    .product-row:hover { background: #faf7f7; }
}
.pc-ref, .pc-name, .pc-type { min-width: 0; }
.pc-nom { font-size: .9rem; }
.ph-price, .pc-price { text-align: right; white-space: nowrap; }
.ph-cart { text-align: right; }
.pc-cart { display: flex; align-items: center; justify-content: flex-end; }
.products-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-muted, #6b7280);
}
/* Éléments propres au mobile, masqués sur desktop */
.pc-more,
.pc-desc,
.product-fiche-link.fiche-m { display: none; }

.product-ref {
    font-family: 'Courier New', monospace;
    font-size: .78rem;
    color: var(--color-muted, #6b7280);
    background: var(--color-bg, #f8f9fa);
    border: 1px solid var(--color-border, #e5e7eb);
    padding: .18rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
}
.product-type-badge {
    display: inline-block;
    font-size: .72rem;
    padding: .18rem .6rem;
    background: #f3f4f6;
    color: var(--color-muted, #6b7280);
    border-radius: 20px;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.product-price {
    font-weight: 700;
    color: var(--color-primary-dark, #7d1015);
    font-size: .95rem;
    white-space: nowrap;
}
.product-price-unit { font-size: .72rem; font-weight: 400; color: var(--color-muted, #6b7280); }

.product-fiche-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .5rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .18rem .55rem;
    color: var(--color-primary-dark, #7d1015);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}
.product-fiche-link:hover {
    background: var(--color-primary-dark, #7d1015);
    border-color: var(--color-primary-dark, #7d1015);
    color: #fff;
}

/* Mobile : lignes COMPACTES sur deux rangées pour voir un maximum de
   produits à l'écran :
     désignation (1 ligne, ▾ si tronquée) ........ 8,14 € HT
     RÉF [📄] ............................ [− 1 +] [🛒]
   Le détail (nom complet + description) s'ouvre en accordéon. */
@media (max-width: 640px) {
    /* Espace client / PWA : la zone produits prend toute la largeur */
    .dzo-wrap-catalogue { padding-left: 0; padding-right: 0; }
    .dzo-wrap-catalogue .catalogue-body { border-radius: 0; }

    .products-head { display: none; }

    .product-row,
    .products-list.has-cart .product-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name  price"
            "ref   cart"
            "desc  desc";
        column-gap: .6rem;
        row-gap: .15rem;
        padding: .45rem .75rem;
    }
    .products-list:not(.has-cart) .product-row {
        grid-template-areas:
            "name  price"
            "ref   ref"
            "desc  desc";
    }

    .pc-name  { grid-area: name; display: flex; align-items: center; gap: .25rem; }
    .pc-price { grid-area: price; }
    .pc-ref   { grid-area: ref; display: flex; align-items: center; gap: .35rem; }
    .pc-cart  { grid-area: cart; }
    .pc-type  { display: none; }

    .pc-nom {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .86rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-fiche-link.fiche-d { display: none; }
    .product-fiche-link.fiche-m {
        display: inline-flex;
        margin-left: 0;
        padding: .2rem .35rem;
    }
    .product-ref {
        font-size: .66rem;
        padding: .08rem .35rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .product-price { font-size: .9rem; }
    .product-price-unit { font-size: .66rem; }

    /* Accordéon : ▾ visible seulement si utile (nom tronqué ou description) */
    .product-row.has-more .pc-name { cursor: pointer; }
    .product-row.has-more .pc-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--color-bg, #f3f4f6);
        color: var(--color-muted, #6b7280);
        font-size: .7rem;
        line-height: 1;
        cursor: pointer;
        transition: transform .15s;
    }
    .product-row.open .pc-more { transform: rotate(180deg); }
    .product-row.open .pc-nom { white-space: normal; }
    .product-row.open .pc-desc {
        display: block;
        grid-area: desc;
        margin-top: .15rem;
        font-size: .76rem;
        line-height: 1.4;
        color: var(--color-muted, #6b7280);
    }

    /* Rangée d'achat compacte : [− 1 +] [🛒] */
    .pc-cart { gap: .35rem; }
    .pc-cart .cart-qty-group { margin-right: 0; }
    .pc-cart .cart-qty-btn { width: 30px; min-height: 32px; font-size: 1rem; }
    .pc-cart .cart-qty-group .cart-qty { width: 36px; padding: .2rem 0; font-size: 16px; }
    .pc-cart .cart-add { width: 40px; height: 34px; border-radius: 8px; }
    .pc-cart .cart-add svg { width: 16px; height: 16px; }
}


/* ============================================================
   PANIER CATALOGUE — mode commande (option dz-crm)
============================================================ */

.cart-qty {
    display: inline-block;
    vertical-align: middle;
    width: 54px;
    padding: .3rem .4rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius);
    font-size: .85rem;
    text-align: center;
    margin-right: .35rem;
}
.cart-qty:focus {
    outline: none;
    border-color: var(--color-primary, #a4151b);
    box-shadow: 0 0 0 2px rgba(164,21,27,.12);
}
/* Spinners natifs masqués (minuscules et intapables au doigt) —
   clavier numérique via inputmode, +/- du panier pour ajuster */
.cart-qty { -moz-appearance: textfield; appearance: textfield; }
.cart-qty::-webkit-outer-spin-button,
.cart-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Stepper − quantité + dans la cellule d'achat du tableau */
.cart-qty-group {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-white, #fff);
    margin-right: .35rem;
}
.cart-qty-group .cart-qty {
    width: 40px;
    margin: 0;
    border: none;
    border-left: 1px solid var(--color-border, #e5e7eb);
    border-right: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0;
}
.cart-qty-group .cart-qty:focus { box-shadow: none; }


.cart-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius);
    background: var(--color-primary, #a4151b);
    color: var(--color-white, #ffffff);
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.cart-add:hover { background: var(--color-primary-dark, #7d1015); }
.cart-add.added { background: #1a7f37; transform: scale(1.1); }

/* hidden doit gagner malgré les display:flex ci-dessous */
.cart-bar[hidden],
.cart-drawer[hidden],
.cart-overlay[hidden] { display: none !important; }

/* Barre flottante */
.cart-bar {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.3rem;
    background: var(--color-dark, #1c1c1e);
    color: var(--color-white, #ffffff);
    border: none;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0,0,0,.3);
    transition: transform .2s, box-shadow .2s;
}
.cart-bar:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.cart-bar svg { color: var(--color-primary, #a4151b); }
.cart-bar.bump { animation: cart-bump .4s ease; }
@keyframes cart-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.09); }
    100% { transform: scale(1); }
}

/* Overlay + tiroir */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 990;
}
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    background: var(--color-white, #ffffff);
    z-index: 991;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,.2);
    animation: cart-slide-in .28s ease;
}
@keyframes cart-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: var(--color-dark, #1c1c1e);
    color: var(--color-white, #ffffff);
}
.cart-drawer-head h2 { font-size: 1.05rem; margin: 0; }
.cart-close {
    background: none;
    border: none;
    color: var(--color-white, #ffffff);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}

.cart-lines {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.4rem;
}
.cart-empty { color: var(--color-muted, #6b7280); text-align: center; padding: 2rem 0; }

.cart-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    font-size: .85rem;
}
.cart-line-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.cart-line-ref { font-size: .72rem; color: var(--color-muted, #6b7280); font-family: monospace; }
.cart-line-nom {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-line-qty-group {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}
.cart-qty-btn {
    width: 32px;
    min-height: 32px;
    border: none;
    background: var(--color-bg, #f8f9fa);
    color: var(--color-text, #1f2937);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
.cart-qty-btn:active { background: var(--color-border, #e5e7eb); }
.cart-line-qty {
    width: 42px;
    padding: .25rem .1rem;
    border: none;
    border-left: 1px solid var(--color-border, #e5e7eb);
    border-right: 1px solid var(--color-border, #e5e7eb);
    text-align: center;
    font-size: .85rem;
    flex-shrink: 0;
    -moz-appearance: textfield;
}
.cart-line-qty::-webkit-outer-spin-button,
.cart-line-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-line-price {
    font-weight: 700;
    white-space: nowrap;
    min-width: 74px;
    text-align: right;
}
.cart-line-remove {
    background: none;
    border: none;
    color: var(--color-muted, #6b7280);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem .3rem;
    flex-shrink: 0;
}
.cart-line-remove:hover { color: var(--color-primary, #a4151b); }

.cart-foot {
    padding: 1rem 1.4rem 1.3rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #f8f9fa);
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: .95rem;
    margin-bottom: .75rem;
}
.cart-foot textarea {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .85rem;
    resize: vertical;
    margin-bottom: .75rem;
}
.cart-submit {
    width: 100%;
    justify-content: center;
    font-size: .95rem;
}
.cart-submit:disabled { opacity: .5; cursor: not-allowed; }
/* hidden doit gagner malgré le display des .btn / .cart-total-row
   (état post-commande : seuls la confirmation et ses boutons restent) */
.cart-foot [hidden] { display: none !important; }
.cart-success-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
}
/* Styles autonomes : ne dépendent PAS de base-ui (le lien .btn-primary
   était invisible selon le contexte de chargement) */
.cart-success-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .65rem 1rem;
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 8px;
    background: var(--color-white, #fff);
    color: var(--color-text, #1f2937) !important;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.cart-success-actions .btn:hover { background: var(--color-bg, #f8f9fa); }
.cart-success-actions .btn-primary {
    background: var(--color-primary, #a4151b);
    border-color: var(--color-primary, #a4151b);
    color: #fff !important;
}
.cart-success-actions .btn-primary:hover { background: var(--color-primary-dark, #7d1015); }
.cart-hint {
    font-size: .75rem;
    color: var(--color-muted, #6b7280);
    text-align: center;
    margin-top: .6rem;
}
/* Prix indicatifs (commandes gérées par le CRM externe) + site d'enregistrement */
.cart-price-note {
    font-size: .75rem;
    color: #92610e;
    background: #fef8e7;
    border: 1px solid #f2dfae;
    border-radius: 6px;
    padding: .45rem .6rem;
    margin-bottom: .6rem;
}
.cart-site-note {
    font-size: .72rem;
    color: var(--color-muted, #6b7280);
    margin-bottom: .6rem;
}
/* Note prix indicatifs au-dessus de la liste catalogue */
.catalogue-price-note {
    font-size: .78rem;
    color: #92610e;
    background: #fef8e7;
    border: 1px solid #f2dfae;
    border-radius: 6px;
    padding: .45rem .7rem;
    margin: 0 0 .75rem;
}
.cart-error {
    color: #b32d2e;
    background: #fdf0f0;
    padding: .6rem .8rem;
    border-radius: var(--radius);
    font-size: .82rem;
    margin-top: .6rem;
}
.cart-success {
    background: #eefaf0;
    border: 1px solid #b7e8c3;
    color: #1a4731;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    font-size: .9rem;
    line-height: 1.7;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .cart-bar { bottom: 1rem; right: 1rem; }

    /* Tiroir panier : la ligne passe sur deux rangées, le stepper
       (− qté +) et le prix ne débordent plus de l'écran */
    .cart-line { flex-wrap: wrap; row-gap: .35rem; }
    .cart-line-info { flex: 1 1 100%; }
    .cart-line-qty-group { margin-left: auto; }
    .cart-line-qty-group .cart-qty-btn { width: 36px; min-height: 36px; }
    .cart-line-qty { width: 46px; font-size: 16px; } /* 16px : pas de zoom iOS au focus */
}

/* ============================================================
   RESPONSIVE (fragments repris des media queries du thème)
============================================================ */
@media (max-width: 1024px) {
    .catalogue-body { grid-template-columns: 220px 1fr; }
}

@media (max-width: 768px) {
    /* Catalogue mobile : sidebar repliée en accordéon */
    .catalogue-body { grid-template-columns: 1fr; }
    .catalogue-sidebar {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border, #e5e7eb);
        min-height: auto;
        padding: 0;
    }
    /* Mobile : le toggle est un VRAI bouton de filtre (icône entonnoir +
       « Filtrer par catégorie » / nom de la catégorie choisie, accentué
       quand un filtre est actif) — plus une ligne grise ambiguë */
    .catalogue-sidebar-toggle {
        pointer-events: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: .6rem;
        margin: .75rem 1rem;
        width: auto;
        padding: .75rem 1rem;
        font-size: .85rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--color-dark, #1c1c1e);
        background: var(--color-white, #ffffff);
        border: 1px solid var(--color-border, #e5e7eb);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }
    .cat-toggle-ico { display: inline-flex; color: var(--color-muted, #6b7280); }
    #cat-sidebar-label { flex: 1; text-align: left; }
    .catalogue-sidebar-toggle.has-filter {
        border-color: var(--color-primary, #a4151b);
        color: var(--color-primary, #a4151b);
        background: rgba(164, 21, 27, .05);
    }
    .catalogue-sidebar-toggle.has-filter .cat-toggle-ico { color: var(--color-primary, #a4151b); }
    .cat-toggle-caret {
        display: inline-block;
        font-size: .9rem;
        transition: transform .2s;
    }
    .catalogue-sidebar.open .cat-toggle-caret { transform: rotate(180deg); }

    .catalogue-sidebar .cat-tree { display: none; padding: .5rem 1rem 1rem; }
    .catalogue-sidebar.open .cat-tree { display: block; }
}

/* ============================================================
   MOBILE : pleine largeur pour un maximum d'information
============================================================ */
@media (max-width: 768px) {
    /* La table colle aux bords de l'écran : plus de padding latéral sur la
       zone, les éléments hors table le récupèrent en marge */
    .catalogue-main { padding: .75rem 0; }
    .catalogue-search-bar,
    .catalogue-count,
    #cat-pagination { margin-left: .5rem; margin-right: .5rem; }

    .products-table-wrapper {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .catalogue-search-bar { gap: .5rem; }
}

/* Tablette UNIQUEMENT (641–768px). ⚠️ Borne basse indispensable : ce bloc
   est placé APRÈS la mise en page mobile (≤640px) — sans min-width, à
   spécificité égale il l'écrasait sur téléphone (désignation réduite à
   110px, panier superposé à la référence). Colonne Type masquée pour
   laisser la place à la désignation. */
@media (min-width: 641px) and (max-width: 768px) {
    .products-head,
    .product-row {
        grid-template-columns: 100px minmax(0, 1fr) 90px;
        column-gap: .5rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .products-list.has-cart .products-head,
    .products-list.has-cart .product-row {
        grid-template-columns: 100px minmax(0, 1fr) 90px 150px;
    }
    .products-head > :nth-child(3),
    .pc-type { display: none; }
}

/* ============================================================
   MODALE FICHE PRODUIT (intégrée, remplace la popup)
============================================================ */
body.fiche-modal-lock { overflow: hidden; }

.fiche-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(17, 17, 20, .6);
    backdrop-filter: blur(3px);
}
.fiche-modal-overlay.open { display: flex; animation: ficheFade .18s ease; }

@keyframes ficheFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fiche-modal {
    background: var(--color-white, #ffffff);
    border-radius: 14px;
    overflow: hidden;
    width: min(760px, 100%);
    height: min(85vh, 900px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    animation: ficheSlide .22s ease;
}

@keyframes ficheSlide {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.fiche-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1.1rem;
    background: var(--color-dark, #1c1c1e);
    color: var(--color-white, #ffffff);
    border-bottom: 3px solid var(--color-primary, #a4151b);
    flex-shrink: 0;
}
.fiche-modal-title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fiche-modal-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.fiche-modal-newtab,
.fiche-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.fiche-modal-newtab:hover,
.fiche-modal-close:hover { background: rgba(255,255,255,.22); color: #fff; }

.fiche-modal-body { position: relative; flex: 1; min-height: 0; background: var(--color-bg, #f8f9fa); }
.fiche-modal-frame { width: 100%; height: 100%; border: none; display: block; opacity: 0; transition: opacity .2s; }
.fiche-modal-overlay.loaded .fiche-modal-frame { opacity: 1; }

.fiche-modal-loader {
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid var(--color-border, #e5e7eb);
    border-top-color: var(--color-primary, #a4151b);
    border-radius: 50%;
    animation: ficheSpin .8s linear infinite;
}
.fiche-modal-overlay.loaded .fiche-modal-loader { display: none; }

@keyframes ficheSpin { to { transform: rotate(360deg); } }

/* Mobile : la modale occupe tout l'écran */
@media (max-width: 768px) {
    .fiche-modal-overlay { padding: 0; }
    .fiche-modal { width: 100%; height: 100%; border-radius: 0; }
}

/* ============================================================
   Panier : profil dessiné + pièces jointes (v2.20.0)
   ============================================================ */
.cart-attachments { margin: .5rem 0; }
.cart-attach-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.cart-attach-croquis-edit {
    flex: 1;
    min-width: 0;
    text-align: left;
    border: none;
    background: none;
    padding: 0;
    font-size: .78rem;
    color: #1a7a3c;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-attach-croquis-edit:hover { text-decoration: underline; }
.cart-attach-btn {
    display: inline-block;
    padding: .45rem .75rem;
    border: 1px dashed var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--color-muted, #6b7280);
    cursor: pointer;
}
.cart-attach-btn:hover {
    border-color: var(--color-primary, #a4151b);
    color: var(--color-primary, #a4151b);
}
.cart-attach-list {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
}
.cart-attach-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    padding: .25rem 0;
}
.cart-attach-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-attach-size { color: var(--color-muted, #6b7280); flex-shrink: 0; }
.cart-attach-remove {
    border: none;
    background: none;
    color: var(--color-primary, #a4151b);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 .3rem;
    flex-shrink: 0;
}

/* Le bouton « Dessiner un croquis » réutilise le style du label pièce jointe */
button.cart-attach-btn {
    background: none;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.cart-attach-view {
    flex-shrink: 0;
    text-decoration: none;
    font-size: .9rem;
    padding: 0 .2rem;
}

/* Bouton « Prendre une photo » : uniquement sur écrans tactiles
   (la photo passe ensuite par le module image-editor) */
.cart-attach-btn-camera { display: none; }
@media (pointer: coarse) {
    .cart-attach-btn-camera { display: inline-block; }
}

/* ============================================================
   CATALOGUE PUBLIC (visiteur non connecté) : pas de colonne prix
   ============================================================ */
.products-list.no-price .products-head,
.products-list.no-price .product-row {
    grid-template-columns: 150px minmax(0, 1fr) minmax(0, 220px);
}

@media (min-width: 641px) and (max-width: 768px) {
    .products-list.no-price .products-head,
    .products-list.no-price .product-row {
        grid-template-columns: 100px minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .products-list.no-price .product-row {
        grid-template-areas:
            "name  name"
            "ref   ref"
            "desc  desc";
    }
}

/* Bandeau d'invitation à se connecter */
.catalogue-guest-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: 0 0 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 4px solid var(--color-primary, #a4151b);
    border-radius: 8px;
    background: var(--color-white, #ffffff);
}
.catalogue-guest-text { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.catalogue-guest-text strong { font-size: .95rem; }
.catalogue-guest-text span { color: var(--color-muted, #6b7280); }
.catalogue-guest-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Styles autonomes (ne dépendent PAS de .btn du thème : même souci de
   lien .btn-primary invisible que pour .cart-success-actions) */
.catalogue-guest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1.1rem;
    border: 2px solid var(--color-primary, #a4151b);
    border-radius: 8px;
    background: var(--color-white, #fff);
    color: var(--color-primary, #a4151b) !important;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.catalogue-guest-btn:hover,
.catalogue-guest-btn:focus-visible {
    background: var(--color-primary, #a4151b);
    color: #fff !important;
}
.catalogue-guest-btn--primary {
    background: var(--color-primary, #a4151b);
    color: #fff !important;
}
.catalogue-guest-btn--primary:hover,
.catalogue-guest-btn--primary:focus-visible {
    background: var(--color-primary-dark, #7d1015);
    border-color: var(--color-primary-dark, #7d1015);
}

@media (max-width: 640px) {
    .catalogue-guest-actions { width: 100%; }
    .catalogue-guest-btn { flex: 1 1 0; }
}