.cat-ecran {
    --cat-vert: #0E7A3D;
    --cat-vert-fonce: #0A6332;
    --cat-vert-doux: #E8F5EE;
    --cat-fond: #F7F9F8;
    --cat-surface: #FFFFFF;
    --cat-bordure: #E5E7EB;
    --cat-texte: #1F2937;
    --cat-texte-2: #6B7280;
    --cat-texte-3: #9CA3AF;
    --cat-rouge: #CC4646;
    --cat-rouge-doux: #FCDADA;
    --cat-ambre: #B75218;
    --cat-ambre-doux: #F5E6D8;
    --cat-r: 12px;
    --cat-ombre: 0 1px 2px rgba(16, 40, 28, .06);
    --cat-ombre-forte: 0 8px 24px rgba(16, 40, 28, .14);

    font-family: Manrope, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    color: var(--cat-texte);
    background: var(--cat-fond);
    min-height: 100vh;
    padding-bottom: 92px; 
}

.cat-ecran * { box-sizing: border-box; }
.cat-ecran .num { font-variant-numeric: tabular-nums; }


.cat-hd {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--cat-surface);
    border-bottom: 1px solid var(--cat-bordure);
    padding: 10px 12px 8px;
}

.cat-hd-l1 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.cat-retour {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--cat-bordure); background: var(--cat-surface);
    border-radius: var(--r-10); color: var(--cat-texte); cursor: pointer;
}

.cat-client { min-width: 0; flex: 1 1 auto; }
.cat-client-nom {
    font-family: Manrope, sans-serif; font-weight: 700; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-client-sub { font-size: 12px; color: var(--cat-texte-2); }


.cat-search { position: relative; }
.cat-search input {
    width: 100%; height: 44px;
    padding: 0 38px 0 38px;
    border: 1px solid var(--cat-bordure); border-radius: var(--r-10);
    background: var(--cat-fond); font-size: 15px; color: var(--cat-texte);
}
.cat-search input:focus { outline: 2px solid var(--cat-vert); outline-offset: 1px; background: var(--cat-surface); }
.cat-search-ico { position: absolute; left: 11px; top: 12px; color: var(--cat-texte-3); pointer-events: none; }
.cat-search-clear {
    position: absolute; right: 6px; top: 6px; width: 32px; height: 32px;
    border: 0; background: transparent; color: var(--cat-texte-2); font-size: 18px; cursor: pointer;
}


.cat-chips {
    display: flex; gap: 7px; overflow-x: auto; padding: 8px 0 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
    flex: 0 0 auto; padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--cat-bordure); background: var(--cat-surface);
    font-size: 13px; font-weight: 600; color: var(--cat-texte-2); cursor: pointer; white-space: nowrap;
}
.cat-chip.actif { background: var(--cat-vert); border-color: var(--cat-vert); color: #fff; }



.cat-note {
    margin: 10px 12px 0; padding: 9px 11px;
    background: var(--cat-ambre-doux); color: var(--cat-ambre);
    border-radius: var(--r-10); font-size: 12.5px; line-height: 1.4;
    display: flex; gap: 8px; align-items: flex-start;
}
.cat-note button { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; }
.cat-feuille-ft .cat-note { margin: 0 0 8px; }


.cat-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 12px;
}


.cat-carte {
    background: var(--cat-surface); border: 1px solid var(--cat-bordure);
    border-radius: var(--cat-r); box-shadow: var(--cat-ombre);
    overflow: hidden; display: flex; flex-direction: column;
    text-align: left; padding: 0; width: 100%;
}


.cat-img {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    background: #FFFFFF; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.cat-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-img-vide { color: var(--cat-texte-3); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }

.cat-carte-bd { padding: 8px 9px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }
.cat-nom {
    font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--cat-texte);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 34px;
}
.cat-ref { font-size: 11px; color: var(--cat-texte-3); }
.cat-prix-l { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: auto; }
.cat-prix { font-family: Manrope, sans-serif; font-weight: 700; font-size: 15px; color: var(--cat-vert); }
.cat-prix-u { font-size: 10.5px; color: var(--cat-texte-3); font-weight: 500; }

.cat-stock { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; align-self: flex-start; }
.cat-stock-ok { background: var(--cat-vert-doux); color: var(--cat-vert-fonce); }
.cat-stock-ko { background: var(--cat-rouge-doux); color: var(--cat-rouge); }
.cat-stock-srv { background: #EAF0FE; color: #3B6FE0; }


.cat-img-fiche {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center;
    font: inherit; color: inherit; cursor: pointer;
}
.cat-img-fiche:active { opacity: .85; }
.cat-img-fiche:focus-visible { outline: 2px solid var(--cat-vert); outline-offset: -2px; }


.cat-add {
    position: absolute; right: 6px; bottom: 6px; z-index: 1;
    width: 40px; height: 40px; border-radius: 50%; padding: 0;
    border: 0; background: var(--cat-vert); color: #fff;
    font-family: inherit; font-size: 22px; line-height: 1; font-weight: 400;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--cat-ombre-forte); cursor: pointer;
}
.cat-add:active { background: var(--cat-vert-fonce); }


.cat-cpt {
    position: absolute; right: 6px; bottom: 6px; z-index: 1;
    display: flex; align-items: center; height: 40px; border-radius: 999px;
    background: var(--cat-vert-fonce); color: var(--cat-surface);
    box-shadow: var(--cat-ombre-forte);
}
.cat-cpt-btn {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; padding: 0;
    border: 0; background: transparent; color: inherit;
    font-family: inherit; font-size: 22px; line-height: 1; font-weight: 400;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cat-cpt-btn:active { background: var(--cat-vert); }
.cat-cpt-n { min-width: 26px; padding: 0 2px; text-align: center; font-weight: 700; font-size: 14px; }

.cat-vide { padding: 40px 16px; text-align: center; color: var(--cat-texte-2); }
.cat-suite { padding: 4px 12px 16px; }
.cat-suite button {
    width: 100%; height: 46px; border-radius: var(--r-10);
    border: 1px solid var(--cat-bordure); background: var(--cat-surface);
    font-weight: 600; color: var(--cat-texte); cursor: pointer;
}
.cat-compte { text-align: center; font-size: 12px; color: var(--cat-texte-3); padding: 0 0 10px; }



.cat-barre {
    position: fixed; left: 0; right: 0; bottom: 61px; z-index: 40;
    background: var(--cat-surface); border-top: 1px solid var(--cat-bordure);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(16, 40, 28, .08);
}
.cat-barre button {
    width: 100%; height: 52px; border: 0; border-radius: var(--r-12);
    background: var(--cat-vert); color: #fff; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between; padding: 0 16px; cursor: pointer;
}
.cat-barre button:disabled { background: var(--cat-bordure); color: var(--cat-texte-3); }
.cat-barre-g { display: flex; align-items: center; gap: 9px; }
.cat-pastille {
    background: rgba(255, 255, 255, .22); border-radius: 999px;
    min-width: 26px; height: 26px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}


.cat-feuille {
    position: fixed; inset: 0; z-index: 60;
    background: var(--cat-surface);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.cat-feuille-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--cat-bordure);
    background: var(--cat-surface); flex: 0 0 auto;
}
.cat-feuille-t { font-family: Manrope, sans-serif; font-weight: 700; font-size: 16px; flex: 1 1 auto; min-width: 0; }
.cat-feuille-bd { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cat-feuille-ft { flex: 0 0 auto; border-top: 1px solid var(--cat-bordure); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--cat-surface); }


.cat-fiche-img { width: 100%; aspect-ratio: 1 / 1; max-height: 46vh; background: #FFFFFF; }
.cat-fiche-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-fiche-bd { padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.cat-fiche-nom { font-family: Manrope, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.25; }
.cat-fiche-meta { font-size: 12.5px; color: var(--cat-texte-2); }
.cat-fiche-prix { font-family: Manrope, sans-serif; font-weight: 800; font-size: 26px; color: var(--cat-vert); }


.cat-pave { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 8px 0 2px; }
.cat-pave button {
    width: 52px; height: 52px; border-radius: var(--r-12);
    border: 1px solid var(--cat-bordure); background: var(--cat-surface);
    font-size: 26px; line-height: 1; color: var(--cat-texte); cursor: pointer;
}
.cat-pave button:active { background: var(--cat-vert-doux); }
.cat-pave input {
    width: 96px; height: 52px; text-align: center;
    border: 1px solid var(--cat-bordure); border-radius: var(--r-12);
    font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cat-texte);
}


.cat-lignes { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.cat-ligne {
    display: flex; gap: 10px; align-items: center;
    background: var(--cat-surface); border: 1px solid var(--cat-bordure);
    border-radius: var(--r-10); padding: 8px 10px;
}
.cat-ligne-img { width: 46px; height: 46px; border-radius: var(--r-8); background: var(--cat-fond); flex: 0 0 auto; overflow: hidden; }
.cat-ligne-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-ligne-main { flex: 1 1 auto; min-width: 0; }
.cat-ligne-nom { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-ligne-pu { font-size: 11.5px; color: var(--cat-texte-2); }
.cat-ligne-qte { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cat-ligne-qte button {
    width: 34px; height: 34px; border-radius: var(--r-8);
    border: 1px solid var(--cat-bordure); background: var(--cat-surface);
    font-size: 18px; line-height: 1; cursor: pointer; color: var(--cat-texte);
}
.cat-ligne-qte input {
    width: 54px; height: 34px; text-align: center;
    border: 1px solid var(--cat-bordure); border-radius: var(--r-8);
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cat-ligne-tot { flex: 0 0 auto; min-width: 76px; text-align: right; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.cat-totaux { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.cat-tot-l { display: flex; justify-content: space-between; font-size: 13px; color: var(--cat-texte-2); }
.cat-tot-l.fort { font-size: 17px; font-weight: 800; color: var(--cat-texte); font-family: Manrope, sans-serif; }
.cat-tot-l .num { font-variant-numeric: tabular-nums; }

.cat-msg { margin: 10px 12px; padding: 10px 12px; border-radius: var(--r-10); font-size: 13px; line-height: 1.45; }
.cat-msg-err { background: var(--cat-rouge-doux); color: var(--cat-rouge); }
.cat-msg-ok { background: var(--cat-vert-doux); color: var(--cat-vert-fonce); }
.cat-msg-info { background: var(--cat-ambre-doux); color: var(--cat-ambre); }

.cat-champ { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 10px; }
.cat-champ label { font-size: 11.5px; font-weight: 600; color: var(--cat-texte-2); text-transform: uppercase; letter-spacing: .04em; }
.cat-champ select {
    height: 46px; border: 1px solid var(--cat-bordure); border-radius: var(--r-10);
    padding: 0 10px; font-size: 15px; background: var(--cat-surface); color: var(--cat-texte);
}
.cat-champ select.manquant { border-color: var(--cat-rouge); }


@media (min-width: 769px) {
    .cat-ecran { padding-bottom: 0; }

    .cat-hd { padding: 14px 20px 10px; }
    .cat-hd-l1 { margin-bottom: 10px; }
    .cat-client-nom { font-size: 19px; }

    .cat-grille {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px; padding: 16px 20px; max-width: 1500px; margin: 0 auto;
    }
    .cat-nom { font-size: 14px; min-height: 36px; }
    .cat-prix { font-size: 16px; }

    
    .cat-barre { left: auto; right: 24px; bottom: 24px; width: 380px; border-radius: var(--r-14); border: 1px solid var(--cat-bordure); }

    
    .cat-feuille {
        inset: 50% auto auto 50%; transform: translate(-50%, -50%);
        width: min(560px, 92vw); height: min(88vh, 900px);
        border-radius: var(--r-16); border: 1px solid var(--cat-bordure); box-shadow: var(--cat-ombre-forte);
    }
    .cat-voile { position: fixed; inset: 0; background: rgba(16, 24, 20, .45); z-index: 55; }
}



.cat-remise {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cat-bordure);
    display: flex; flex-direction: column; gap: 8px;
}
.cat-remise-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cat-remise-hd > span { font-size: 11.5px; font-weight: 600; color: var(--cat-texte-2); text-transform: uppercase; letter-spacing: .04em; }

.cat-remise-modes { display: inline-flex; border: 1px solid var(--cat-bordure); border-radius: var(--r-9); overflow: hidden; }
.cat-remise-modes button {
    border: 0; background: var(--cat-surface); color: var(--cat-texte-2);
    font-size: 12.5px; font-weight: 600; padding: 8px 11px; cursor: pointer; white-space: nowrap;
}
.cat-remise-modes button + button { border-left: 1px solid var(--cat-bordure); }
.cat-remise-modes button.actif { background: var(--cat-vert); color: #fff; }

.cat-pave-sm button { width: 46px; height: 46px; font-size: 22px; }
.cat-pave-sm input { width: 88px; height: 46px; font-size: 17px; }

.cat-remise-apercu { font-size: 13px; color: var(--cat-texte-2); text-align: center; }
.cat-remise-apercu b { color: var(--cat-vert); font-size: 15px; }
.cat-remise-barre { text-decoration: line-through; color: var(--cat-texte-3); margin-left: 7px; font-size: 12.5px; }


.cat-ligne-remise {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: -4px 0 2px; padding: 6px 10px 8px;
    background: var(--cat-muted, #F9FAFB); border: 1px solid var(--cat-bordure);
    border-top: 0; border-radius: 0 0 10px 10px;
}
.cat-ligne-remise .cat-remise-modes button { padding: 5px 9px; font-size: 11.5px; }
.cat-ligne-remise input {
    width: 78px; height: 34px; text-align: center;
    border: 1px solid var(--cat-bordure); border-radius: var(--r-8);
    font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cat-ligne-detail { margin-left: auto; font-size: 11.5px; color: var(--cat-texte-2); }


.cat-ligne:has(+ .cat-ligne-remise) { border-radius: 10px 10px 0 0; margin-bottom: 0; }

.cat-tot-remise { align-items: center; gap: 10px; }
.cat-tot-remise label { flex: 1 1 auto; font-size: 13px; color: var(--cat-texte-2); }
.cat-tot-remise input {
    width: 116px; height: 40px; text-align: right; padding: 0 9px;
    border: 1px solid var(--cat-bordure); border-radius: var(--r-9);
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cat-texte);
}
.cat-tot-remise input:focus { outline: 2px solid var(--cat-vert); outline-offset: 1px; }



.cat-ecran {
    --cat-promo: #9E4614;
    --cat-promo-doux: #F5E6D8;
}
.cat-stock-promo { background: var(--cat-promo-doux); color: var(--cat-promo); }


.cat-prix-barre { text-decoration: line-through; color: var(--cat-texte-3); font-size: 11.5px; font-weight: 600; }


.cat-ligne-tarif {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--cat-promo-doux); color: var(--cat-promo);
    font-size: 10.5px; font-weight: 700;
}


.cat-ligne.cadeau { border-style: dashed; }
.cat-offert-mot {
    display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--cat-promo-doux); color: var(--cat-promo); font-size: 10.5px; font-weight: 700;
}
.cat-offre, .cat-offre-alerte {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -2px 0 2px; padding: 8px 10px;
    border-radius: var(--r-10); background: var(--cat-promo-doux); color: var(--cat-promo);
    font-size: 12.5px; line-height: 1.4;
}
.cat-offre span { flex: 1 1 180px; }
.cat-offre button {
    height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-10);
    background: var(--cat-promo); color: var(--cat-surface); font-weight: 700; cursor: pointer;
}
.cat-retirer-cadeau {
    height: 34px; padding: 0 10px; border: 1px solid var(--cat-bordure); border-radius: var(--r-8);
    background: var(--cat-surface); color: var(--cat-texte-2); font-size: 12px; font-weight: 600; cursor: pointer;
}

.cat-toff { display: block; font-size: 11px; font-weight: 700; color: var(--cat-promo); line-height: 1.25; }