/* _content/Xprosoft/Pages/cbls.razor.rz.scp.css */
/* Grille responsive pour cartes commandes */
.order-grid[b-25eup0x93y] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Carte commande */
.order-card[b-25eup0x93y] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Lignes */
.oc-row[b-25eup0x93y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ligne 1 */
.oc-left[b-25eup0x93y] {
    min-width: 0;
}

.oc-num[b-25eup0x93y] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-25eup0x93y] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-25eup0x93y] {
    font-weight: 700;
    color: #08a39c;
}

/* Ligne 2 */
.oc-meta[b-25eup0x93y] {
    gap: 10px;
}

.oc-client[b-25eup0x93y] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-25eup0x93y] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-25eup0x93y], .badge-regl[b-25eup0x93y] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-25eup0x93y] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-25eup0x93y] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Ligne 3 (totaux) */
.oc-totaux[b-25eup0x93y] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

    .oc-totaux span[b-25eup0x93y] {
        white-space: nowrap;
    }

/* Actions */
.oc-actions[b-25eup0x93y] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Petits écrans : tout tient sur 1 colonne naturellement */
@media (max-width:640px) {
    .oc-row[b-25eup0x93y] {
        gap: 8px;
    }
}
/* Grille cartes par défaut */
.order-grid[b-25eup0x93y] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

    /* Une seule carte par ligne (peu importe la largeur) */
    .order-grid.one-per-row[b-25eup0x93y] {
        grid-template-columns: 1fr !important;
        max-width: 1100px; /* optionnel: largeur lisible */
        margin: 0 auto; /* centre la colonne */
    }

/* Carte commande (déjà présent chez toi, au cas où) */
.order-card[b-25eup0x93y] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-row[b-25eup0x93y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.oc-left[b-25eup0x93y] {
    min-width: 0;
}

.oc-num[b-25eup0x93y] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-25eup0x93y] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-25eup0x93y] {
    font-weight: 700;
    color: #08a39c;
}

.oc-client[b-25eup0x93y] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-25eup0x93y] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-25eup0x93y], .badge-regl[b-25eup0x93y] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-25eup0x93y] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-25eup0x93y] {
    background: #fff3cd;
    color: #7a5b00;
}

.oc-totaux[b-25eup0x93y] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

    .oc-totaux span[b-25eup0x93y] {
        white-space: nowrap;
    }

.oc-actions[b-25eup0x93y] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
/* Carte compacte */
.order-card--compact[b-25eup0x93y] {
    padding: 8px 10px;
    gap: 6px;
}

/* Row 1 */
.oc-r1[b-25eup0x93y] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r1 .left[b-25eup0x93y] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .oc-r1 .num[b-25eup0x93y] {
        font-weight: 600;
        font-size: .92rem;
        color: #111827;
    }

    .oc-r1 .sep[b-25eup0x93y] {
        color: #9ca3af;
    }

    .oc-r1 .date[b-25eup0x93y] {
        font-size: .85rem;
        color: #6b7280;
        white-space: nowrap;
    }

    .oc-r1 .total[b-25eup0x93y] {
        font-weight: 700;
        color: #08a39c;
        white-space: nowrap;
    }

/* Row 2 */
.oc-r2[b-25eup0x93y] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r2 .client[b-25eup0x93y] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .92rem;
        color: #111827;
    }

    .oc-r2 .badges[b-25eup0x93y] {
        display: flex;
        gap: 6px;
        align-items: center;
    }

.badge-etat[b-25eup0x93y], .badge-regl[b-25eup0x93y] {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
}

.badge-etat[b-25eup0x93y] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-25eup0x93y] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Row 3 */
.oc-r3[b-25eup0x93y] {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px,1fr)) auto; /* 4 chiffres + actions */
    align-items: center;
    gap: 8px;
}

    .oc-r3 .kv[b-25eup0x93y] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: .85rem;
        color: #374151;
        white-space: nowrap;
    }

        .oc-r3 .kv span[b-25eup0x93y] {
            color: #6b7280;
        }

        .oc-r3 .kv b[b-25eup0x93y] {
            font-weight: 600;
            color: #111827;
        }

 .oc-r3 .actions[b-25eup0x93y] {
    display: flex;
    gap: 10px; /* espace entre les boutons */
    justify-content: flex-end; /* aligner à droite */
    min-width: 180px; /* ou plus si tu veux plus large */
}

.oc-r3 .actions .icon[b-25eup0x93y] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px; /* largeur bouton */
        height: 38px; /* hauteur bouton */
        font-size: 16px;
        border-radius: 6px;
        border: 1px solid #ccc;
        background-color: #fff;
        cursor: pointer;
        transition: 0.2s;
    }

     .oc-r3 .actions .icon:hover[b-25eup0x93y] {
            background-color: #f0f0f0;
        }

/* Petits écrans : les blocs se replient proprement */
@media (max-width:640px) {
    .oc-r3[b-25eup0x93y] {
        grid-template-columns: repeat(2, minmax(90px,1fr)) auto;
    }
}
/* Vue cartes : 1 carte par ligne, ALIGNÉE À GAUCHE, pleine largeur */
.order-grid.one-per-row[b-25eup0x93y] {
    grid-template-columns: 1fr !important;
    max-width: none !important; /* supprime la largeur max qui recentre */
    width: 100% !important;
    margin: 0 !important; /* enlève le centrage */
    padding-left: 0; /* au cas où */
}

/* Si tu utilises un wrapper centré (ex: .page-wrap) dans cette page, neutralise-le */
.page-wrap[b-25eup0x93y] {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* Option Bootstrap : si le parent a un padding (container), retire-le */
.container[b-25eup0x93y], .container-fluid[b-25eup0x93y] {
    /* retire si tu veux coller vraiment au bord de la colonne */
    /* padding-left: 0; padding-right: 0; */
}
/* Barre de recherche et filtres figés en haut */
.sticky-top-bar[b-25eup0x93y] {
    position: sticky;
    top: 0;
    z-index: 10; /* Assurez-vous qu'il reste au-dessus du reste du contenu */
    background: #fff; /* Pour masquer le contenu en dessous */
    padding: 10px; /* Un peu d'espacement */
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* Petite ombre pour un effet "flottant" */
    margin: 0 -1rem 1rem -1rem; /* Corrigez les marges négatives si nécessaire pour l'alignement */
}
/* _content/Xprosoft/Pages/Clients.razor.rz.scp.css */
/* Grille des cartes clients */
.client-grid[b-4xo5moqw5f] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

    /* Une carte par ligne (si souhaité) */
    .client-grid.one-per-row[b-4xo5moqw5f] {
        grid-template-columns: 1fr !important;
        width: 100%;
        margin: 0;
    }

/* Carte client compacte (3 lignes) */
.client-card[b-4xo5moqw5f] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Row 1 : gauche/droite */
.cc-r1[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .cc-r1 .left[b-4xo5moqw5f] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .cc-r1 .code[b-4xo5moqw5f] {
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
    }

    .cc-r1 .name[b-4xo5moqw5f] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-r1 .sep[b-4xo5moqw5f] {
        color: #9ca3af;
    }

    .cc-r1 .right[b-4xo5moqw5f] {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .cc-r1 .city[b-4xo5moqw5f] {
        color: #374151;
        font-size: .9rem;
    }

/* Row 2 : libellé + badges */
.cc-r2[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.line-ellipsis[b-4xo5moqw5f] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badges[b-4xo5moqw5f] {
    display: flex;
    gap: 6px;
}

.badge-soft[b-4xo5moqw5f] {
    display: inline-block;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

    .badge-soft.info[b-4xo5moqw5f] {
        background: #eef7ff;
        color: #0b5cab;
        border-color: #dbeafe;
    }

    .badge-soft.warn[b-4xo5moqw5f] {
        background: #fff3cd;
        color: #7a5b00;
        border-color: #fde68a;
    }

/* Row 3 : tel + adresses */
.cc-r3[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
}

.kv[b-4xo5moqw5f] {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    font-size: .9rem;
}

    .kv .k[b-4xo5moqw5f] {
        color: #6b7280;
    }

    .kv .v[b-4xo5moqw5f] {
        font-weight: 600;
        color: #111827;
    }

.addr[b-4xo5moqw5f] {
    display: grid;
    gap: 2px;
}

.addr-line[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    align-items: center;
}

    .addr-line .k[b-4xo5moqw5f] {
        color: #6b7280;
        white-space: nowrap;
        font-size: .85rem;
    }

    .addr-line .v[b-4xo5moqw5f] {
        color: #111827;
        font-size: .9rem;
    }

/* Petits écrans */
@media (max-width:640px) {
    .cc-r3[b-4xo5moqw5f] {
        grid-template-columns: 1fr;
    }
}
/* Barre de recherche et filtres figés en haut */
.sticky-top-bar[b-4xo5moqw5f] {
    position: sticky;
    top: 0;
    z-index: 10; /* Assurez-vous qu'il reste au-dessus du reste du contenu */
    background: #fff; /* Pour masquer le contenu en dessous */
    padding: 10px; /* Un peu d'espacement */
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* Petite ombre pour un effet "flottant" */
    margin: 0 -1rem 1rem -1rem; /* Corrigez les marges négatives si nécessaire pour l'alignement */
}
/* _content/Xprosoft/Pages/Commandes.razor.rz.scp.css */
/* Grille responsive pour cartes commandes */
.order-grid[b-82gdhkszqm] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Carte commande */
.order-card[b-82gdhkszqm] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Lignes */
.oc-row[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ligne 1 */
.oc-left[b-82gdhkszqm] {
    min-width: 0;
}

.oc-num[b-82gdhkszqm] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-82gdhkszqm] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-82gdhkszqm] {
    font-weight: 700;
    color: #08a39c;
}

/* Ligne 2 */
.oc-meta[b-82gdhkszqm] {
    gap: 10px;
}

.oc-client[b-82gdhkszqm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-82gdhkszqm], .badge-regl[b-82gdhkszqm] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-82gdhkszqm] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-82gdhkszqm] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Ligne 3 (totaux) */
.oc-totaux[b-82gdhkszqm] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

    .oc-totaux span[b-82gdhkszqm] {
        white-space: nowrap;
    }

/* Actions */
.oc-actions[b-82gdhkszqm] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Petits écrans : tout tient sur 1 colonne naturellement */
@media (max-width:640px) {
    .oc-row[b-82gdhkszqm] {
        gap: 8px;
    }
}
/* Grille cartes par défaut */
.order-grid[b-82gdhkszqm] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

    /* Une seule carte par ligne (peu importe la largeur) */
    .order-grid.one-per-row[b-82gdhkszqm] {
        grid-template-columns: 1fr !important;
        max-width: 1100px; /* optionnel: largeur lisible */
        margin: 0 auto; /* centre la colonne */
    }

/* Carte commande (déjà présent chez toi, au cas où) */
.order-card[b-82gdhkszqm] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-row[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.oc-left[b-82gdhkszqm] {
    min-width: 0;
}

.oc-num[b-82gdhkszqm] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-82gdhkszqm] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-82gdhkszqm] {
    font-weight: 700;
    color: #08a39c;
}

.oc-client[b-82gdhkszqm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-82gdhkszqm], .badge-regl[b-82gdhkszqm] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-82gdhkszqm] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-82gdhkszqm] {
    background: #fff3cd;
    color: #7a5b00;
}

.oc-totaux[b-82gdhkszqm] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

    .oc-totaux span[b-82gdhkszqm] {
        white-space: nowrap;
    }

.oc-actions[b-82gdhkszqm] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
/* Carte compacte */
.order-card--compact[b-82gdhkszqm] {
    padding: 8px 10px;
    gap: 6px;
}

/* Row 1 */
.oc-r1[b-82gdhkszqm] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r1 .left[b-82gdhkszqm] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .oc-r1 .num[b-82gdhkszqm] {
        font-weight: 600;
        font-size: .92rem;
        color: #111827;
    }

    .oc-r1 .sep[b-82gdhkszqm] {
        color: #9ca3af;
    }

    .oc-r1 .date[b-82gdhkszqm] {
        font-size: .85rem;
        color: #6b7280;
        white-space: nowrap;
    }

    .oc-r1 .total[b-82gdhkszqm] {
        font-weight: 700;
        color: #08a39c;
        white-space: nowrap;
    }

/* Row 2 */
.oc-r2[b-82gdhkszqm] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r2 .client[b-82gdhkszqm] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .92rem;
        color: #111827;
    }

    .oc-r2 .badges[b-82gdhkszqm] {
        display: flex;
        gap: 6px;
        align-items: center;
    }

.badge-etat[b-82gdhkszqm], .badge-regl[b-82gdhkszqm] {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
}

.badge-etat[b-82gdhkszqm] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-82gdhkszqm] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Row 3 */
.oc-r3[b-82gdhkszqm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px,1fr)) auto; /* 4 chiffres + actions */
    align-items: center;
    gap: 8px;
}

    .oc-r3 .kv[b-82gdhkszqm] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: .85rem;
        color: #374151;
        white-space: nowrap;
    }

        .oc-r3 .kv span[b-82gdhkszqm] {
            color: #6b7280;
        }

        .oc-r3 .kv b[b-82gdhkszqm] {
            font-weight: 600;
            color: #111827;
        }

    .oc-r3 .actions[b-82gdhkszqm] {
        justify-self: end;
        display: flex;
        gap: 6px;
    }

        .oc-r3 .actions .icon[b-82gdhkszqm] {
            width: 28px;
            height: 28px;
            line-height: 26px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: #fff;
            font-size: 14px;
            cursor: pointer;
        }

            .oc-r3 .actions .icon.danger[b-82gdhkszqm] {
                border-color: #ef4444;
                color: #ef4444;
            }

            .oc-r3 .actions .icon:hover[b-82gdhkszqm] {
                background: #f9fafb;
            }

/* Petits écrans : les blocs se replient proprement */
@media (max-width:640px) {
    .oc-r3[b-82gdhkszqm] {
        grid-template-columns: repeat(2, minmax(90px,1fr)) auto;
    }
}
/* Vue cartes : 1 carte par ligne, ALIGNÉE À GAUCHE, pleine largeur */
.order-grid.one-per-row[b-82gdhkszqm] {
    grid-template-columns: 1fr !important;
    max-width: none !important; /* supprime la largeur max qui recentre */
    width: 100% !important;
    margin: 0 !important; /* enlève le centrage */
    padding-left: 0; /* au cas où */
}

/* Si tu utilises un wrapper centré (ex: .page-wrap) dans cette page, neutralise-le */
.page-wrap[b-82gdhkszqm] {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* Option Bootstrap : si le parent a un padding (container), retire-le */
.container[b-82gdhkszqm], .container-fluid[b-82gdhkszqm] {
    /* retire si tu veux coller vraiment au bord de la colonne */
    /* padding-left: 0; padding-right: 0; */
}
/* Barre de recherche et filtres figés en haut */
.sticky-top-bar[b-82gdhkszqm] {
    position: sticky;
    top: 0;
    z-index: 10; /* Assurez-vous qu'il reste au-dessus du reste du contenu */
    background: #fff; /* Pour masquer le contenu en dessous */
    padding: 10px; /* Un peu d'espacement */
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* Petite ombre pour un effet "flottant" */
    margin: 0 -1rem 1rem -1rem; /* Corrigez les marges négatives si nécessaire pour l'alignement */
}
/* _content/Xprosoft/Pages/Produits.razor.rz.scp.css */
/* Toolbar + layout */
.cart-toolbar[b-t3ic3h7ywu] {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

    .cart-toolbar .left[b-t3ic3h7ywu], .cart-toolbar .right[b-t3ic3h7ywu] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.vm-btn[b-t3ic3h7ywu] {
    margin-right: 6px;
}

.page-content[b-t3ic3h7ywu] {
    padding: 12px;
}

/* GRILLE (cards) */
.catalog-grid[b-t3ic3h7ywu] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 1024px) {
    .catalog-grid[b-t3ic3h7ywu] {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 640px) {
    .catalog-grid[b-t3ic3h7ywu] {
        grid-template-columns: 1fr;
    }
}

.item-card[b-t3ic3h7ywu] {
    border: 1px solid #eaeaea;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.img-wrap[b-t3ic3h7ywu] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 10px;
}

    .img-wrap img[b-t3ic3h7ywu] {
        max-height: 140px;
        max-width: 95%;
        object-fit: contain;
    }

.meta[b-t3ic3h7ywu] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

    .meta .left .code[b-t3ic3h7ywu] {
        font-size: .8rem;
        color: #6b7280;
    }

    .meta .left .name[b-t3ic3h7ywu] {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 20ch;
    }

    .meta .left .price[b-t3ic3h7ywu] {
        font-weight: 700;
    }

.stock-badge[b-t3ic3h7ywu] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e6fffb;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-size: .8rem;
}

/* LISTE (cart-line) */
.cart-list[b-t3ic3h7ywu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-line[b-t3ic3h7ywu] {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 8px 10px;
}

    .cart-line .thumb[b-t3ic3h7ywu] {
        width: 64px;
        height: 64px;
        object-fit: contain;
        background: #fafafa;
        border-radius: 8px;
        border: 1px solid #f1f1f1;
    }

    .cart-line .info[b-t3ic3h7ywu] {
        flex: 1;
        min-width: 0;
    }

    .cart-line .title[b-t3ic3h7ywu] {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-line .meta[b-t3ic3h7ywu] {
        font-size: .85rem;
        color: #6b7280;
    }
    .cart-line .price[b-t3ic3h7ywu] {
        font-weight: 600;
        color: #08a39c;
    }
/* Dropdown DevExpress au-dessus de la toolbar */
[b-t3ic3h7ywu] .dxbl-overlay,
[b-t3ic3h7ywu] .dxbl-overlay-content,
[b-t3ic3h7ywu] .dxbl-dropdown,
[b-t3ic3h7ywu] .dxbl-dropdown-list {
    z-index: 5000 !important;
}

[b-t3ic3h7ywu] .dxbl-dropdown-list {
    margin-top: 4px;
}
/* _content/Xprosoft/Pages/Xblbarcode.razor.rz.scp.css */

/* =================================================================== */
/* 1. OVERRIDES GLOBAUX DEVEXPRESS
/* =================================================================== */
/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-22hkxhd6rc] .dxbl-overlay,
[b-22hkxhd6rc] .dxbl-overlay-content,
[b-22hkxhd6rc] .dxbl-dropdown,
[b-22hkxhd6rc] .dxbl-dropdown-list {
    z-index: 5000 !important;
}
.cart-toolbar .toggles[b-22hkxhd6rc], .cart-toolbar--fixed[b-22hkxhd6rc] {
    overflow: visible !important;
}
/* (Optionnel) petit espace visuel sous la toolbar */
[b-22hkxhd6rc] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-22hkxhd6rc] .dxbl-spin-edit-input {
    text-align: center;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-22hkxhd6rc] .spin-small .dxbl-spin-edit,
[b-22hkxhd6rc] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-22hkxhd6rc] .spin-qty .dxbl-spin-edit,
[b-22hkxhd6rc] .spin-qty .dxbl-spin-edit-input {
    width: 88px !important;
    max-width: 88px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-22hkxhd6rc] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 80px !important;
    flex: 0 0 80px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-22hkxhd6rc] {
    color: black !important;
    text-align: center;
    max-width: 60px !important;
    flex: 0 0 20px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-22hkxhd6rc] {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    padding: .5rem .75rem;
    /* Sticky par défaut */
    position: sticky;
    top: 0;
    z-index: 1100; /* Au-dessus du contenu, en dessous des popups */
    /* Apparence */
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #eee;
}

/* Classe 'fallback' si sticky n'est pas supporté (géré par JS) */
.cart-toolbar--fixed[b-22hkxhd6rc] {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
}
.cart-toolbar .center[b-22hkxhd6rc] {
    flex: 1; /* Prend l'espace libre */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}
/* Espace réservé pour la toolbar en mode 'fixed' */
.toolbar-spacer[b-22hkxhd6rc] {
    height: 56px; /* Ajustez si la hauteur de votre toolbar change */
}

/* Layout interne de la Toolbar */
.cart-toolbar .left[b-22hkxhd6rc],
.cart-toolbar .right[b-22hkxhd6rc] {
    display: flex;
    align-items: center;
}

.cart-toolbar .left[b-22hkxhd6rc] {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-toolbar .right[b-22hkxhd6rc] {
    flex: 0 0 auto;
    min-width: 0;
}

.cart-toolbar .toggles[b-22hkxhd6rc] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.cart-toolbar .toggle[b-22hkxhd6rc] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.cart-toolbar .order-title[b-22hkxhd6rc] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-inline: .5rem;
}

.cart-toolbar .btn-back .icon[b-22hkxhd6rc] {
    margin-right: .35rem;
}

.cart-toolbar .pill[b-22hkxhd6rc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: .35rem;
    border-radius: 999px;
    font-size: 12px;
    background: #ef4444; /* rouge */
    color: #fff;
}

/* Champ de recherche */
.cart-toolbar .right input.form-control[b-22hkxhd6rc] {
    max-width: 260px;
}


/* =================================================================== */
/* 3. TOOLBAR RESPONSIVE (AVEC CORRECTIONS)
/* =================================================================== */

/* ≤ 1200px : on autorise le wrap */
@media (max-width: 1200px) {
    .cart-toolbar[b-22hkxhd6rc] {
        flex-wrap: wrap;
    }

        .cart-toolbar .order-title[b-22hkxhd6rc] {
            max-width: 40vw;
        }

        .cart-toolbar .right input.form-control[b-22hkxhd6rc] {
            max-width: 220px;
        }
}

/* ≤ 992px : la recherche passe en dessous */
@media (max-width: 992px) {
    .cart-toolbar[b-22hkxhd6rc] {
        row-gap: .5rem;
    }

        .cart-toolbar .left[b-22hkxhd6rc] {
            order: 1;
            flex: 1 1 100%;
        }

        .cart-toolbar .right[b-22hkxhd6rc] {
            order: 2;
            flex: 1 1 100%;
            justify-content: flex-start;
        }

            /* recherche full width */
            .cart-toolbar .right input.form-control[b-22hkxhd6rc] {
                max-width: none;
                width: min(560px, 100%);
            }

        /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est requis pour que les dropdowns 
     * puissent s'afficher.
     * 'flex-wrap: wrap' gère le débordement des filtres.
    */
        .cart-toolbar .toggles[b-22hkxhd6rc] {
            max-width: 100%;
            overflow: visible !important; /* <-- CORRECTION */
            flex-wrap: wrap; /* <-- AJOUT */
            padding-bottom: 2px;
        }
}

/* ≤ 768px : on empile plus */
@media (max-width: 768px) {
    /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est aussi requis ici si la toolbar
     * passe en mode 'fixed'.
    */
    .cart-toolbar--fixed[b-22hkxhd6rc] {
        overflow: visible !important; /* <-- CORRECTION */
    }

    .cart-toolbar .order-title[b-22hkxhd6rc] {
        font-size: .95rem;
        max-width: 70vw;
    }

    .cart-toolbar .left[b-22hkxhd6rc],
    .cart-toolbar .right[b-22hkxhd6rc] {
        gap: .5rem;
        flex-wrap: wrap;
    }

    /* DxComboBox full width */
    .cart-toolbar .toggles > *[b-22hkxhd6rc] {
        flex: 1 1 220px;
        min-width: 200px;
    }
}

/* ≤ 576px : layout en colonnes */
@media (max-width: 576px) {
    .cart-toolbar[b-22hkxhd6rc] {
        padding: .5rem .5rem;
    }

        .cart-toolbar .left[b-22hkxhd6rc] {
            flex-direction: column;
            align-items: stretch;
        }

        .cart-toolbar .order-title[b-22hkxhd6rc] {
            width: 100%;
            max-width: 100%;
        }

        /* (overflow: visible est déjà bon à ce breakpoint) */
        .cart-toolbar .toggles[b-22hkxhd6rc] {
            width: 100%;
            flex-wrap: wrap;
            gap: .5rem;
            overflow: visible;
        }

            .cart-toolbar .toggles > *[b-22hkxhd6rc] {
                flex: 1 1 100%;
                min-width: 0;
            }

        .cart-toolbar .right[b-22hkxhd6rc] {
            flex-direction: column;
            align-items: stretch;
        }

            .cart-toolbar .right input.form-control[b-22hkxhd6rc] {
                width: 100%;
                max-width: none;
            }

            .cart-toolbar .right small.text-muted[b-22hkxhd6rc] {
                order: 2;
                margin-top: .25rem;
            }

            .cart-toolbar .right .toggle[b-22hkxhd6rc] {
                order: 3;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                .cart-toolbar .right .toggle .mt-2[b-22hkxhd6rc] {
                    margin-top: .25rem !important;
                    text-align: left !important;
                }
}

/* ≤ 420px : micro-ajustements */
@media (max-width: 420px) {
    .cart-toolbar .right .label[b-22hkxhd6rc] {
        display: none; /* cache "Panier" */
    }
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES
/* =================================================================== */

.catalog-grid[b-22hkxhd6rc] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .catalog-grid[b-22hkxhd6rc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .catalog-grid[b-22hkxhd6rc] {
        grid-template-columns: 1fr;
    }
}

/* Carte */
.item-card[b-22hkxhd6rc] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 10px;
    overflow: hidden; /* Sécurité anti-débordement */
}

.img-wrap[b-22hkxhd6rc] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    background: #fafafa;
}

    .img-wrap img.thumb[b-22hkxhd6rc] {
        max-height: 140px;
        max-width: 95%;
        object-fit: contain;
    }

/* Conteneur Meta (simplifié) */
.meta[b-22hkxhd6rc] {
    display: block;
}

/* Ligne 1: Code + Stock */
.meta-row[b-22hkxhd6rc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.code[b-22hkxhd6rc] {
    font-weight: 600;
    font-size: .9rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right .stock-badge[b-22hkxhd6rc] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #eef7ff;
    color: #0b5cab;
    font-size: .85rem;
    white-space: nowrap;
}

.stock-badge.out-of-stock[b-22hkxhd6rc] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Ligne 2: Libellé */
.name[b-22hkxhd6rc] {
    margin-top: 4px;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ligne 3: Prix */
.right.prices[b-22hkxhd6rc] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.price[b-22hkxhd6rc] {
    font-size: 1.05rem;
    line-height: 1.4;
}

.price-old[b-22hkxhd6rc] {
    text-decoration: line-through;
    opacity: .7;
    font-weight: 600;
}

.price-new[b-22hkxhd6rc] {
    font-weight: 600;
    color: #08a39c;
}

.remise-badge[b-22hkxhd6rc] {
    padding: .15rem .45rem;
    border-radius: .5rem;
    background: #fff3cd;
    color: #7a5b00;
    font-size: .85rem;
}

.break[b-22hkxhd6rc] {
    flex-basis: 100%;
    height: 0;
}

/* Ligne 4: Editeurs (Bonus, Remise, Testeur) */
/* * NOTE: J'utilise .edits-row ici car il est responsive.
 * Assurez-vous que votre HTML utilise <div class="edits-row">
 * pour envelopper les champs Bonus/Remise/Testeur.
*/
.edits-row[b-22hkxhd6rc] {
    display: flex;
    flex-wrap: wrap; /* Clé du responsive */
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

    .edits-row .edit[b-22hkxhd6rc] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 180px; /* S'adapte, base de 180px */
        min-width: 160px; /* Seuil pour "wrapper" */
    }

        .edits-row .edit label[b-22hkxhd6rc] {
            white-space: nowrap;
            font-size: .85rem;
            color: #6b7280;
        }


/* Ligne 5: Contrôles Quantité */
.qty-controls[b-22hkxhd6rc] {
    display: flex;
    align-items: center;
    justify-content: center; /* Centré */
    gap: 10px;
    margin-top: 10px;
}

    .qty-controls label[b-22hkxhd6rc] {
        font-size: .9rem;
        color: #6b7280;
        font-weight: 500;
    }

.btn-round[b-22hkxhd6rc] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    user-select: none;
}

    .btn-round:disabled[b-22hkxhd6rc] {
        opacity: .4;
        cursor: not-allowed;
    }

    .btn-round.plus[b-22hkxhd6rc] {
        border-color: #08a39c;
        color: #08a39c;
        background: #f0fdfa;
    }

    .btn-round:not(.plus)[b-22hkxhd6rc] {
        border-color: #f87171;
        color: #f87171;
        background: #fef2f2;
    }


/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-22hkxhd6rc] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-22hkxhd6rc] {
    flex: 1 1 auto;
    max-height: 60vh; /* limite en hauteur */
    overflow-y: auto;
    padding: 12px;
}

/* Lignes du panier */
.cart-line[b-22hkxhd6rc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
}

    .cart-line .info[b-22hkxhd6rc] {
        flex: 1 1 auto;
    }

    .cart-line .title[b-22hkxhd6rc] {
        font-weight: 600;
    }

    .cart-line .meta[b-22hkxhd6rc] {
        font-size: .85rem;
        color: #555;
    }

    .cart-line .actions[b-22hkxhd6rc] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        flex: 0 0 auto;
        padding-left: 10px;
    }

    .cart-line .total[b-22hkxhd6rc] {
        font-weight: 600;
        color: #08a39c;
        font-size: 1.05rem;
    }

.delete-btn[b-22hkxhd6rc] {
    background: #fff;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

    .delete-btn:hover:not(:disabled)[b-22hkxhd6rc] {
        background: #fee2e2;
    }

    .delete-btn:disabled[b-22hkxhd6rc] {
        opacity: .5;
        cursor: not-allowed;
    }

/* Footer (Total) du panier */
.footer-actions[b-22hkxhd6rc] {
    flex: 0 0 auto;
    border-top: 1px solid #ddd;
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fafafa;
}

.grand-total[b-22hkxhd6rc] {
    font-size: 1.1rem;
    font-weight: 500;
}

    .grand-total b[b-22hkxhd6rc] {
        color: #08a39c;
        font-size: 1.2rem;
    }

.grand-reste[b-22hkxhd6rc] {
    font-size: 1.1rem;
    font-weight: 500;
}

    .grand-reste b[b-22hkxhd6rc] {
        color: #FF0000;
        font-size: 1.2rem;
    }
/* Responsive Panier */
@media (max-width:640px) {
    .cart-line[b-22hkxhd6rc] {
        flex-direction: column;
    }

        .cart-line .actions[b-22hkxhd6rc] {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-22hkxhd6rc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}
.dxbl-overlay[b-22hkxhd6rc], .dxbl-overlay-content[b-22hkxhd6rc], .dxbl-dropdown[b-22hkxhd6rc], .dxbl-dropdown-list[b-22hkxhd6rc] {
    position: fixed !important; /* ou absolute selon layout */
    z-index: 9999 !important;
}
.cart-toolbar .right[b-22hkxhd6rc] {
    overflow: visible !important;
    z-index: 100 !important; /* ou auto si 100 pose problème */
   
}
/* Carte commande */
.order-card[b-22hkxhd6rc] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-card--compact[b-22hkxhd6rc] {
    padding: 8px 10px;
    gap: 6px;
}
.oc-r1[b-22hkxhd6rc] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r1 .left[b-22hkxhd6rc] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
.dxbl-dropdown-menu-container[b-22hkxhd6rc],
.dxbl-combobox-popup[b-22hkxhd6rc],
.dxi-dropdown-menu-container[b-22hkxhd6rc] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}


.page-wrap[b-22hkxhd6rc] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.catalog-grid[b-22hkxhd6rc] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Barre de recherche centrée */
.search-bar[b-22hkxhd6rc] {
    padding: 10px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.search-input[b-22hkxhd6rc] {
    width: 60%;
    max-width: 450px;
}

/* Zone scrollable */
.cart-scroll[b-22hkxhd6rc] {
    flex: 1; /* prend tout l’espace restant */
    overflow-y: auto; /* scroll vertical */
    padding: 10px;
}

/* Pour être joli */
.cart-list[b-22hkxhd6rc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* _content/Xprosoft/Pages/Xbltocart.razor.rz.scp.css */

/* =================================================================== */
/* 1. OVERRIDES GLOBAUX DEVEXPRESS
/* =================================================================== */
/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-oogfyiqgzk] .dxbl-overlay,
[b-oogfyiqgzk] .dxbl-overlay-content,
[b-oogfyiqgzk] .dxbl-dropdown,
[b-oogfyiqgzk] .dxbl-dropdown-list {
    z-index: 5000 !important;
}
.cart-toolbar .toggles[b-oogfyiqgzk], .cart-toolbar--fixed[b-oogfyiqgzk] {
    overflow: visible !important;
}
/* (Optionnel) petit espace visuel sous la toolbar */
[b-oogfyiqgzk] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-oogfyiqgzk] .dxbl-spin-edit-input {
    text-align: center;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-oogfyiqgzk] .spin-small .dxbl-spin-edit,
[b-oogfyiqgzk] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-oogfyiqgzk] .spin-qty .dxbl-spin-edit,
[b-oogfyiqgzk] .spin-qty .dxbl-spin-edit-input {
    width: 88px !important;
    max-width: 88px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-oogfyiqgzk] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 80px !important;
    flex: 0 0 80px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-oogfyiqgzk] {
    color: black !important;
    text-align: center;
    max-width: 60px !important;
    flex: 0 0 20px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-oogfyiqgzk] {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    padding: .5rem .75rem;
    /* Sticky par défaut */
    position: sticky;
    top: 0;
    z-index: 1100; /* Au-dessus du contenu, en dessous des popups */
    /* Apparence */
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #eee;
}

/* Classe 'fallback' si sticky n'est pas supporté (géré par JS) */
.cart-toolbar--fixed[b-oogfyiqgzk] {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
}

/* Espace réservé pour la toolbar en mode 'fixed' */
.toolbar-spacer[b-oogfyiqgzk] {
    height: 56px; /* Ajustez si la hauteur de votre toolbar change */
}

/* Layout interne de la Toolbar */
.cart-toolbar .left[b-oogfyiqgzk],
.cart-toolbar .right[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cart-toolbar .left[b-oogfyiqgzk] {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-toolbar .right[b-oogfyiqgzk] {
    flex: 0 0 auto;
    min-width: 0;
}

.cart-toolbar .toggles[b-oogfyiqgzk] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.cart-toolbar .toggle[b-oogfyiqgzk] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.cart-toolbar .order-title[b-oogfyiqgzk] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-inline: .5rem;
}

.cart-toolbar .btn-back .icon[b-oogfyiqgzk] {
    margin-right: .35rem;
}

.cart-toolbar .pill[b-oogfyiqgzk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: .35rem;
    border-radius: 999px;
    font-size: 12px;
    background: #ef4444; /* rouge */
    color: #fff;
}

/* Champ de recherche */
.cart-toolbar .right input.form-control[b-oogfyiqgzk] {
    max-width: 260px;
}


/* =================================================================== */
/* 3. TOOLBAR RESPONSIVE (AVEC CORRECTIONS)
/* =================================================================== */

/* ≤ 1200px : on autorise le wrap */
@media (max-width: 1200px) {
    .cart-toolbar[b-oogfyiqgzk] {
        flex-wrap: wrap;
    }

        .cart-toolbar .order-title[b-oogfyiqgzk] {
            max-width: 40vw;
        }

        .cart-toolbar .right input.form-control[b-oogfyiqgzk] {
            max-width: 220px;
        }
}

/* ≤ 992px : la recherche passe en dessous */
@media (max-width: 992px) {
    .cart-toolbar[b-oogfyiqgzk] {
        row-gap: .5rem;
    }

        .cart-toolbar .left[b-oogfyiqgzk] {
            order: 1;
            flex: 1 1 100%;
        }

        .cart-toolbar .right[b-oogfyiqgzk] {
            order: 2;
            flex: 1 1 100%;
            justify-content: flex-start;
        }

            /* recherche full width */
            .cart-toolbar .right input.form-control[b-oogfyiqgzk] {
                max-width: none;
                width: min(560px, 100%);
            }

        /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est requis pour que les dropdowns 
     * puissent s'afficher.
     * 'flex-wrap: wrap' gère le débordement des filtres.
    */
        .cart-toolbar .toggles[b-oogfyiqgzk] {
            max-width: 100%;
            overflow: visible !important; /* <-- CORRECTION */
            flex-wrap: wrap; /* <-- AJOUT */
            padding-bottom: 2px;
        }
}

/* ≤ 768px : on empile plus */
@media (max-width: 768px) {
    /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est aussi requis ici si la toolbar
     * passe en mode 'fixed'.
    */
    .cart-toolbar--fixed[b-oogfyiqgzk] {
        overflow: visible !important; /* <-- CORRECTION */
    }

    .cart-toolbar .order-title[b-oogfyiqgzk] {
        font-size: .95rem;
        max-width: 70vw;
    }

    .cart-toolbar .left[b-oogfyiqgzk],
    .cart-toolbar .right[b-oogfyiqgzk] {
        gap: .5rem;
        flex-wrap: wrap;
    }

    /* DxComboBox full width */
    .cart-toolbar .toggles > *[b-oogfyiqgzk] {
        flex: 1 1 220px;
        min-width: 200px;
    }
}

/* ≤ 576px : layout en colonnes */
@media (max-width: 576px) {
    .cart-toolbar[b-oogfyiqgzk] {
        padding: .5rem .5rem;
    }

        .cart-toolbar .left[b-oogfyiqgzk] {
            flex-direction: column;
            align-items: stretch;
        }

        .cart-toolbar .order-title[b-oogfyiqgzk] {
            width: 100%;
            max-width: 100%;
        }

        /* (overflow: visible est déjà bon à ce breakpoint) */
        .cart-toolbar .toggles[b-oogfyiqgzk] {
            width: 100%;
            flex-wrap: wrap;
            gap: .5rem;
            overflow: visible;
        }

            .cart-toolbar .toggles > *[b-oogfyiqgzk] {
                flex: 1 1 100%;
                min-width: 0;
            }

        .cart-toolbar .right[b-oogfyiqgzk] {
            flex-direction: column;
            align-items: stretch;
        }

            .cart-toolbar .right input.form-control[b-oogfyiqgzk] {
                width: 100%;
                max-width: none;
            }

            .cart-toolbar .right small.text-muted[b-oogfyiqgzk] {
                order: 2;
                margin-top: .25rem;
            }

            .cart-toolbar .right .toggle[b-oogfyiqgzk] {
                order: 3;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                .cart-toolbar .right .toggle .mt-2[b-oogfyiqgzk] {
                    margin-top: .25rem !important;
                    text-align: left !important;
                }
}

/* ≤ 420px : micro-ajustements */
@media (max-width: 420px) {
    .cart-toolbar .right .label[b-oogfyiqgzk] {
        display: none; /* cache "Panier" */
    }
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES
/* =================================================================== */

.catalog-grid[b-oogfyiqgzk] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .catalog-grid[b-oogfyiqgzk] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .catalog-grid[b-oogfyiqgzk] {
        grid-template-columns: 1fr;
    }
}

/* Carte */
.item-card[b-oogfyiqgzk] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 10px;
    overflow: hidden; /* Sécurité anti-débordement */
}

.img-wrap[b-oogfyiqgzk] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    background: #fafafa;
}

    .img-wrap img.thumb[b-oogfyiqgzk] {
        max-height: 140px;
        max-width: 95%;
        object-fit: contain;
    }

/* Conteneur Meta (simplifié) */
.meta[b-oogfyiqgzk] {
    display: block;
}

/* Ligne 1: Code + Stock */
.meta-row[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.code[b-oogfyiqgzk] {
    font-weight: 600;
    font-size: .9rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right .stock-badge[b-oogfyiqgzk] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #eef7ff;
    color: #0b5cab;
    font-size: .85rem;
    white-space: nowrap;
}

.stock-badge.out-of-stock[b-oogfyiqgzk] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Ligne 2: Libellé */
.name[b-oogfyiqgzk] {
    margin-top: 4px;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ligne 3: Prix */
.right.prices[b-oogfyiqgzk] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.price[b-oogfyiqgzk] {
    font-size: 1.05rem;
    line-height: 1.4;
}

.price-old[b-oogfyiqgzk] {
    text-decoration: line-through;
    opacity: .7;
    font-weight: 600;
}

.price-new[b-oogfyiqgzk] {
    font-weight: 600;
    color: #08a39c;
}

.remise-badge[b-oogfyiqgzk] {
    padding: .15rem .45rem;
    border-radius: .5rem;
    background: #fff3cd;
    color: #7a5b00;
    font-size: .85rem;
}

.break[b-oogfyiqgzk] {
    flex-basis: 100%;
    height: 0;
}

/* Ligne 4: Editeurs (Bonus, Remise, Testeur) */
/* * NOTE: J'utilise .edits-row ici car il est responsive.
 * Assurez-vous que votre HTML utilise <div class="edits-row">
 * pour envelopper les champs Bonus/Remise/Testeur.
*/
.edits-row[b-oogfyiqgzk] {
    display: flex;
    flex-wrap: wrap; /* Clé du responsive */
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

    .edits-row .edit[b-oogfyiqgzk] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 180px; /* S'adapte, base de 180px */
        min-width: 160px; /* Seuil pour "wrapper" */
    }

        .edits-row .edit label[b-oogfyiqgzk] {
            white-space: nowrap;
            font-size: .85rem;
            color: #6b7280;
        }


/* Ligne 5: Contrôles Quantité */
.qty-controls[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    justify-content: center; /* Centré */
    gap: 10px;
    margin-top: 10px;
}

    .qty-controls label[b-oogfyiqgzk] {
        font-size: .9rem;
        color: #6b7280;
        font-weight: 500;
    }

.btn-round[b-oogfyiqgzk] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    user-select: none;
}

    .btn-round:disabled[b-oogfyiqgzk] {
        opacity: .4;
        cursor: not-allowed;
    }

    .btn-round.plus[b-oogfyiqgzk] {
        border-color: #08a39c;
        color: #08a39c;
        background: #f0fdfa;
    }

    .btn-round:not(.plus)[b-oogfyiqgzk] {
        border-color: #f87171;
        color: #f87171;
        background: #fef2f2;
    }


/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-oogfyiqgzk] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-oogfyiqgzk] {
    flex: 1 1 auto;
    max-height: 60vh; /* limite en hauteur */
    overflow-y: auto;
    padding: 12px;
}

/* Lignes du panier */
.cart-line[b-oogfyiqgzk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
}

    .cart-line .info[b-oogfyiqgzk] {
        flex: 1 1 auto;
    }

    .cart-line .title[b-oogfyiqgzk] {
        font-weight: 600;
    }

    .cart-line .meta[b-oogfyiqgzk] {
        font-size: .85rem;
        color: #555;
    }

    .cart-line .actions[b-oogfyiqgzk] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        flex: 0 0 auto;
        padding-left: 10px;
    }

    .cart-line .total[b-oogfyiqgzk] {
        font-weight: 600;
        color: #08a39c;
        font-size: 1.05rem;
    }

.delete-btn[b-oogfyiqgzk] {
    background: #fff;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

    .delete-btn:hover:not(:disabled)[b-oogfyiqgzk] {
        background: #fee2e2;
    }

    .delete-btn:disabled[b-oogfyiqgzk] {
        opacity: .5;
        cursor: not-allowed;
    }

/* Footer (Total) du panier */
.footer-actions[b-oogfyiqgzk] {
    flex: 0 0 auto;
    border-top: 1px solid #ddd;
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fafafa;
}

.grand-total[b-oogfyiqgzk] {
    font-size: 1.1rem;
    font-weight: 500;
}

    .grand-total b[b-oogfyiqgzk] {
        color: #08a39c;
        font-size: 1.2rem;
    }


/* Responsive Panier */
@media (max-width:640px) {
    .cart-line[b-oogfyiqgzk] {
        flex-direction: column;
    }

        .cart-line .actions[b-oogfyiqgzk] {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-oogfyiqgzk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}
.dxbl-overlay[b-oogfyiqgzk], .dxbl-overlay-content[b-oogfyiqgzk], .dxbl-dropdown[b-oogfyiqgzk], .dxbl-dropdown-list[b-oogfyiqgzk] {
    position: fixed !important; /* ou absolute selon layout */
    z-index: 9999 !important;
}
.cart-toolbar .right[b-oogfyiqgzk] {
    overflow: visible !important;
    z-index: 100 !important; /* ou auto si 100 pose problème */
   
}
/* Carte commande */
.order-card[b-oogfyiqgzk] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-card--compact[b-oogfyiqgzk] {
    padding: 8px 10px;
    gap: 6px;
}
.oc-r1[b-oogfyiqgzk] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r1 .left[b-oogfyiqgzk] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
.dxbl-dropdown-menu-container[b-oogfyiqgzk],
.dxbl-combobox-popup[b-oogfyiqgzk],
.dxi-dropdown-menu-container[b-oogfyiqgzk] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}
/* _content/Xprosoft/Pages/xcommandetocart.razor.rz.scp.css */

/* =================================================================== */
/* 1. OVERRIDES GLOBAUX DEVEXPRESS
/* =================================================================== */
/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-ni9dagjn5b] .dxbl-overlay,
[b-ni9dagjn5b] .dxbl-overlay-content,
[b-ni9dagjn5b] .dxbl-dropdown,
[b-ni9dagjn5b] .dxbl-dropdown-list {
    z-index: 5000 !important;
}
.cart-toolbar .toggles[b-ni9dagjn5b], .cart-toolbar--fixed[b-ni9dagjn5b] {
    overflow: visible !important;
}
/* (Optionnel) petit espace visuel sous la toolbar */
[b-ni9dagjn5b] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-ni9dagjn5b] .dxbl-spin-edit-input {
    text-align: center;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-ni9dagjn5b] .spin-small .dxbl-spin-edit,
[b-ni9dagjn5b] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-ni9dagjn5b] .spin-qty .dxbl-spin-edit,
[b-ni9dagjn5b] .spin-qty .dxbl-spin-edit-input {
    width: 88px !important;
    max-width: 88px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-ni9dagjn5b] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 80px !important;
    flex: 0 0 80px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-ni9dagjn5b] {
    color: black !important;
    text-align: center;
    max-width: 60px !important;
    flex: 0 0 20px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-ni9dagjn5b] {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    padding: .5rem .75rem;
    /* Sticky par défaut */
    position: sticky;
    top: 0;
    z-index: 1100; /* Au-dessus du contenu, en dessous des popups */
    /* Apparence */
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #eee;
}

/* Classe 'fallback' si sticky n'est pas supporté (géré par JS) */
.cart-toolbar--fixed[b-ni9dagjn5b] {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
}

/* Espace réservé pour la toolbar en mode 'fixed' */
.toolbar-spacer[b-ni9dagjn5b] {
    height: 56px; /* Ajustez si la hauteur de votre toolbar change */
}

/* Layout interne de la Toolbar */
.cart-toolbar .left[b-ni9dagjn5b],
.cart-toolbar .right[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cart-toolbar .left[b-ni9dagjn5b] {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-toolbar .right[b-ni9dagjn5b] {
    flex: 0 0 auto;
    min-width: 0;
}

.cart-toolbar .toggles[b-ni9dagjn5b] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.cart-toolbar .toggle[b-ni9dagjn5b] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.cart-toolbar .order-title[b-ni9dagjn5b] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-inline: .5rem;
}

.cart-toolbar .btn-back .icon[b-ni9dagjn5b] {
    margin-right: .35rem;
}

.cart-toolbar .pill[b-ni9dagjn5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: .35rem;
    border-radius: 999px;
    font-size: 12px;
    background: #ef4444; /* rouge */
    color: #fff;
}

/* Champ de recherche */
.cart-toolbar .right input.form-control[b-ni9dagjn5b] {
    max-width: 260px;
}


/* =================================================================== */
/* 3. TOOLBAR RESPONSIVE (AVEC CORRECTIONS)
/* =================================================================== */

/* ≤ 1200px : on autorise le wrap */
@media (max-width: 1200px) {
    .cart-toolbar[b-ni9dagjn5b] {
        flex-wrap: wrap;
    }

        .cart-toolbar .order-title[b-ni9dagjn5b] {
            max-width: 40vw;
        }

        .cart-toolbar .right input.form-control[b-ni9dagjn5b] {
            max-width: 220px;
        }
}

/* ≤ 992px : la recherche passe en dessous */
@media (max-width: 992px) {
    .cart-toolbar[b-ni9dagjn5b] {
        row-gap: .5rem;
    }

        .cart-toolbar .left[b-ni9dagjn5b] {
            order: 1;
            flex: 1 1 100%;
        }

        .cart-toolbar .right[b-ni9dagjn5b] {
            order: 2;
            flex: 1 1 100%;
            justify-content: flex-start;
        }

            /* recherche full width */
            .cart-toolbar .right input.form-control[b-ni9dagjn5b] {
                max-width: none;
                width: min(560px, 100%);
            }

        /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est requis pour que les dropdowns 
     * puissent s'afficher.
     * 'flex-wrap: wrap' gère le débordement des filtres.
    */
        .cart-toolbar .toggles[b-ni9dagjn5b] {
            max-width: 100%;
            overflow: visible !important; /* <-- CORRECTION */
            flex-wrap: wrap; /* <-- AJOUT */
            padding-bottom: 2px;
        }
}

/* ≤ 768px : on empile plus */
@media (max-width: 768px) {
    /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est aussi requis ici si la toolbar
     * passe en mode 'fixed'.
    */
    .cart-toolbar--fixed[b-ni9dagjn5b] {
        overflow: visible !important; /* <-- CORRECTION */
    }

    .cart-toolbar .order-title[b-ni9dagjn5b] {
        font-size: .95rem;
        max-width: 70vw;
    }

    .cart-toolbar .left[b-ni9dagjn5b],
    .cart-toolbar .right[b-ni9dagjn5b] {
        gap: .5rem;
        flex-wrap: wrap;
    }

    /* DxComboBox full width */
    .cart-toolbar .toggles > *[b-ni9dagjn5b] {
        flex: 1 1 220px;
        min-width: 200px;
    }
}

/* ≤ 576px : layout en colonnes */
@media (max-width: 576px) {
    .cart-toolbar[b-ni9dagjn5b] {
        padding: .5rem .5rem;
    }

        .cart-toolbar .left[b-ni9dagjn5b] {
            flex-direction: column;
            align-items: stretch;
        }

        .cart-toolbar .order-title[b-ni9dagjn5b] {
            width: 100%;
            max-width: 100%;
        }

        /* (overflow: visible est déjà bon à ce breakpoint) */
        .cart-toolbar .toggles[b-ni9dagjn5b] {
            width: 100%;
            flex-wrap: wrap;
            gap: .5rem;
            overflow: visible;
        }

            .cart-toolbar .toggles > *[b-ni9dagjn5b] {
                flex: 1 1 100%;
                min-width: 0;
            }

        .cart-toolbar .right[b-ni9dagjn5b] {
            flex-direction: column;
            align-items: stretch;
        }

            .cart-toolbar .right input.form-control[b-ni9dagjn5b] {
                width: 100%;
                max-width: none;
            }

            .cart-toolbar .right small.text-muted[b-ni9dagjn5b] {
                order: 2;
                margin-top: .25rem;
            }

            .cart-toolbar .right .toggle[b-ni9dagjn5b] {
                order: 3;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                .cart-toolbar .right .toggle .mt-2[b-ni9dagjn5b] {
                    margin-top: .25rem !important;
                    text-align: left !important;
                }
}

/* ≤ 420px : micro-ajustements */
@media (max-width: 420px) {
    .cart-toolbar .right .label[b-ni9dagjn5b] {
        display: none; /* cache "Panier" */
    }
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES
/* =================================================================== */

.catalog-grid[b-ni9dagjn5b] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .catalog-grid[b-ni9dagjn5b] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .catalog-grid[b-ni9dagjn5b] {
        grid-template-columns: 1fr;
    }
}

/* Carte */
.item-card[b-ni9dagjn5b] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 10px;
    overflow: hidden; /* Sécurité anti-débordement */
}

.img-wrap[b-ni9dagjn5b] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    background: #fafafa;
}

    .img-wrap img.thumb[b-ni9dagjn5b] {
        max-height: 140px;
        max-width: 95%;
        object-fit: contain;
    }

/* Conteneur Meta (simplifié) */
.meta[b-ni9dagjn5b] {
    display: block;
}

/* Ligne 1: Code + Stock */
.meta-row[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.code[b-ni9dagjn5b] {
    font-weight: 600;
    font-size: .9rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right .stock-badge[b-ni9dagjn5b] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #eef7ff;
    color: #0b5cab;
    font-size: .85rem;
    white-space: nowrap;
}

.stock-badge.out-of-stock[b-ni9dagjn5b] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Ligne 2: Libellé */
.name[b-ni9dagjn5b] {
    margin-top: 4px;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ligne 3: Prix */
.right.prices[b-ni9dagjn5b] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.price[b-ni9dagjn5b] {
    font-size: 1.05rem;
    line-height: 1.4;
}

.price-old[b-ni9dagjn5b] {
    text-decoration: line-through;
    opacity: .7;
    font-weight: 600;
}

.price-new[b-ni9dagjn5b] {
    font-weight: 600;
    color: #08a39c;
}

.remise-badge[b-ni9dagjn5b] {
    padding: .15rem .45rem;
    border-radius: .5rem;
    background: #fff3cd;
    color: #7a5b00;
    font-size: .85rem;
}

.break[b-ni9dagjn5b] {
    flex-basis: 100%;
    height: 0;
}

/* Ligne 4: Editeurs (Bonus, Remise, Testeur) */
/* * NOTE: J'utilise .edits-row ici car il est responsive.
 * Assurez-vous que votre HTML utilise <div class="edits-row">
 * pour envelopper les champs Bonus/Remise/Testeur.
*/
.edits-row[b-ni9dagjn5b] {
    display: flex;
    flex-wrap: wrap; /* Clé du responsive */
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

    .edits-row .edit[b-ni9dagjn5b] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 180px; /* S'adapte, base de 180px */
        min-width: 160px; /* Seuil pour "wrapper" */
    }

        .edits-row .edit label[b-ni9dagjn5b] {
            white-space: nowrap;
            font-size: .85rem;
            color: #6b7280;
        }


/* Ligne 5: Contrôles Quantité */
.qty-controls[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    justify-content: center; /* Centré */
    gap: 10px;
    margin-top: 10px;
}

    .qty-controls label[b-ni9dagjn5b] {
        font-size: .9rem;
        color: #6b7280;
        font-weight: 500;
    }

.btn-round[b-ni9dagjn5b] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    user-select: none;
}

    .btn-round:disabled[b-ni9dagjn5b] {
        opacity: .4;
        cursor: not-allowed;
    }

    .btn-round.plus[b-ni9dagjn5b] {
        border-color: #08a39c;
        color: #08a39c;
        background: #f0fdfa;
    }

    .btn-round:not(.plus)[b-ni9dagjn5b] {
        border-color: #f87171;
        color: #f87171;
        background: #fef2f2;
    }


/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-ni9dagjn5b] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-ni9dagjn5b] {
    flex: 1 1 auto;
    max-height: 60vh; /* limite en hauteur */
    overflow-y: auto;
    padding: 12px;
}

/* Lignes du panier */
.cart-line[b-ni9dagjn5b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
}

    .cart-line .info[b-ni9dagjn5b] {
        flex: 1 1 auto;
    }

    .cart-line .title[b-ni9dagjn5b] {
        font-weight: 600;
    }

    .cart-line .meta[b-ni9dagjn5b] {
        font-size: .85rem;
        color: #555;
    }

    .cart-line .actions[b-ni9dagjn5b] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        flex: 0 0 auto;
        padding-left: 10px;
    }

    .cart-line .total[b-ni9dagjn5b] {
        font-weight: 600;
        color: #08a39c;
        font-size: 1.05rem;
    }

.delete-btn[b-ni9dagjn5b] {
    background: #fff;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

    .delete-btn:hover:not(:disabled)[b-ni9dagjn5b] {
        background: #fee2e2;
    }

    .delete-btn:disabled[b-ni9dagjn5b] {
        opacity: .5;
        cursor: not-allowed;
    }

/* Footer (Total) du panier */
.footer-actions[b-ni9dagjn5b] {
    flex: 0 0 auto;
    border-top: 1px solid #ddd;
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fafafa;
}

.grand-total[b-ni9dagjn5b] {
    font-size: 1.1rem;
    font-weight: 500;
}

    .grand-total b[b-ni9dagjn5b] {
        color: #08a39c;
        font-size: 1.2rem;
    }


/* Responsive Panier */
@media (max-width:640px) {
    .cart-line[b-ni9dagjn5b] {
        flex-direction: column;
    }

        .cart-line .actions[b-ni9dagjn5b] {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-ni9dagjn5b] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}
.dxbl-overlay[b-ni9dagjn5b], .dxbl-overlay-content[b-ni9dagjn5b], .dxbl-dropdown[b-ni9dagjn5b], .dxbl-dropdown-list[b-ni9dagjn5b] {
    position: fixed !important; /* ou absolute selon layout */
    z-index: 9999 !important;
}
.cart-toolbar .right[b-ni9dagjn5b] {
    overflow: visible !important;
    z-index: 100 !important; /* ou auto si 100 pose problème */
   
}
/* Carte commande */
.order-card[b-ni9dagjn5b] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-card--compact[b-ni9dagjn5b] {
    padding: 8px 10px;
    gap: 6px;
}
.oc-r1[b-ni9dagjn5b] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r1 .left[b-ni9dagjn5b] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
.dxbl-dropdown-menu-container[b-ni9dagjn5b],
.dxbl-combobox-popup[b-ni9dagjn5b],
.dxi-dropdown-menu-container[b-ni9dagjn5b] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}