/* ============================================================
   Recette V6 — Stocks, inventaire, éco-contributions
   Fichier séparé d'app.css : il reprend les jetons Aurora (--grad,
   --v1…, --r-lg…) sans toucher aux règles communes.
   ============================================================ */

/* ---------- Pastille d'état du stock ---------- */
.stk-pill {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-family: var(--font-display); font-weight: 600; font-size: .78rem;
    padding: .16rem .6rem; border-radius: 999px; font-variant-numeric: tabular-nums;
    background: rgba(34,197,94,.13); color: #15803d; border: 1px solid rgba(34,197,94,.18);
}
.stk-pill i { font-size: .8em; }
.stk-pill.is-minimum { background: rgba(245,158,11,.15); color: #b45309; border-color: rgba(245,158,11,.25); }
.stk-pill.is-rupture { background: rgba(148,163,184,.18); color: #475569; border-color: rgba(148,163,184,.28); }
.stk-pill.is-negatif { background: rgba(239,68,68,.13); color: #b91c1c; border-color: rgba(239,68,68,.25); }
.stk-pill.is-off { background: transparent; color: var(--ink-faint); border: 1px dashed #d6d7e6; font-family: var(--font-body); font-weight: 500; }

/* ---------- Encart « Stock » de la fiche article ---------- */
.stk-encart { position: relative; overflow: hidden; }
.stk-encart::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad);
}
.stk-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.stk-metric {
    border-radius: var(--r-md); padding: .6rem .7rem; background: #fafaff; border: 1px solid var(--line);
    min-width: 0;
}
.stk-metric .stk-metric-label { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.stk-metric .stk-metric-value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stk-metric.is-main { background: var(--grad-soft); border-color: rgba(124,92,255,.2); }
.stk-metric.is-main .stk-metric-value {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.55rem;
}
.stk-metric.is-main.is-negatif .stk-metric-value { background: none; color: #b91c1c; }
@media (max-width: 575.98px) { .stk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Historique des mouvements ---------- */
.stk-mvts { list-style: none; margin: 0; padding: 0; }
.stk-mvt { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.stk-mvt:first-child { border-top: 0; }
.stk-mvt-chip {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center;
    background: var(--grad-soft); color: var(--v1); border: 1px solid rgba(124,92,255,.14);
}
.stk-mvt-body { flex: 1 1 auto; min-width: 0; }
.stk-mvt-title { font-weight: 600; font-size: .86rem; color: var(--ink); }
.stk-mvt-sub { font-size: .76rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-qte { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-qte.is-in { color: #15803d; }
.stk-qte.is-out { color: #b91c1c; }

/* ---------- Page « Stocks » ---------- */
.stk-filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.stk-filtres .form-select { width: auto; min-width: 12rem; }
.stk-famille-head td {
    background: linear-gradient(90deg, rgba(124,92,255,.08), rgba(34,211,238,.04) 70%, transparent) !important;
    font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .85rem;
}
.stk-famille-head .stk-famille-meta { font-family: var(--font-body); font-weight: 500; color: var(--ink-faint); font-size: .78rem; }
.stk-table td, .stk-table th { vertical-align: middle; }
/* Tableaux à 8-9 colonnes chiffrées (Stocks, inventaire, éco-contributions) :
   en-têtes insécables et marges d'app.css, ils débordaient de leur carte dès
   1440 px et la dernière colonne (écotaxe nette, état, prix d'achat) passait
   hors champ. Les en-têtes reviennent à la ligne, les chiffres jamais. */
.stk-table > :not(caption) > * > *,
.eco-table > :not(caption) > * > * { padding: .7rem .55rem; }
.stk-table > thead th.num,
.eco-table > thead th.num { white-space: normal; }
/* Une désignation d'un seul bloc (« MESUREUR+COCHONNET ») fixait à elle seule
   la largeur minimale de la colonne. */
.stk-table td.stk-designation { overflow-wrap: anywhere; min-width: 9rem; }
.stk-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-table .is-neg { color: #b91c1c; font-weight: 600; }
.stk-table tr.is-inactif td:not(.stk-famille-head td) { opacity: .6; }
.stk-debut { font-size: .8rem; color: var(--ink-faint); }

/* ---------- Inventaire ---------- */
.stk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.stk-step {
    position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-sm); padding: 1.1rem 1.2rem 1.15rem; overflow: hidden;
}
.stk-step-num {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: .55rem;
    background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700; box-shadow: var(--sh-glow);
}
.stk-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 .25rem; color: var(--ink); }
.stk-step p { font-size: .84rem; color: var(--ink-soft); margin-bottom: .7rem; }
.stk-step::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,92,255,.12), transparent 70%);
}
.stk-count { max-width: 7rem; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.stk-count.is-filled { border-color: var(--v1); background: #f5f2ff; box-shadow: var(--ring); }
tr.is-counted td { background: rgba(124,92,255,.035); }
.stk-ecart-live { min-width: 4.5rem; }
.stk-sticky-bar {
    position: sticky; bottom: 0; z-index: 5; margin-top: 1rem;
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
    padding: .8rem 1.1rem; border-radius: var(--r-lg); background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.stk-compteur { font-family: var(--font-display); font-weight: 700; color: var(--v1); }

/* ---------- Éco-contributions ---------- */
.eco-hero {
    position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 1.5rem 1.8rem; margin-bottom: 1.4rem; color: #fff;
    background: linear-gradient(120deg, #0f9d74 0%, #22b8a0 45%, #22d3ee 110%); box-shadow: 0 20px 44px rgba(16,150,120,.28);
}
.eco-hero::before {
    content: ""; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%);
}
.eco-hero > * { position: relative; }
.eco-hero .eco-total { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.eco-hero .eco-sous { opacity: .92; font-size: .9rem; }
.eco-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-table tr.is-special td { background: #fafaff; font-style: italic; color: var(--ink-soft); }
.eco-table tfoot td { font-family: var(--font-display); font-weight: 700; }
.eco-code { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.eco-orga { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #0f9d74; background: rgba(16,185,129,.1); padding: .12rem .5rem; border-radius: 999px; }