/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =====================================================================
   MainLayout « Organic » — pilule de recherche et écran d'échec du shell.
   Tout ce qui bascule clair/sombre passe par var(--mud-palette-*),
   les primitives par var(--g-*). Aucun hex.
   ===================================================================== */

/* ── AppBar / drawer / contenu principal ────────────────────────────── */

/* Leur habillage (bordure basse de l'AppBar, bordure droite du drawer, boutons
   ronds 38px) vit dans wwwroot/css/app.css, section « SHELL ». MudLayout est la
   racine de ce composant : ni lui ni MudAppBar/MudDrawer ne portent l'attribut
   de scope, donc un `::deep .gostan-appbar` d'ici ne matche jamais — il exige un
   ancêtre scopé qui n'existe pas. Seuls les éléments écrits dans ce fichier
   (pilule de recherche, écran d'échec) sont stylables ici. */

/* ── Pilule de recherche centrale ───────────────────────────────────── */

.appbar-search-host[b-al3kw1x7sa] {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 0 calc(16px * var(--g-scale));
}

.appbar-search-pill[b-al3kw1x7sa] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    width: 100%;
    max-width: 420px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    padding: calc(11px * var(--g-scale)) calc(20px * var(--g-scale));
    color: var(--mud-palette-text-disabled);
    font-family: inherit;
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.appbar-search-pill:hover:not(:disabled)[b-al3kw1x7sa] {
    border-color: var(--mud-palette-gray-default);
}

.appbar-search-pill:disabled[b-al3kw1x7sa] {
    opacity: 0.55;
    cursor: default;
}

.appbar-search-pill svg[b-al3kw1x7sa] {
    flex: none;
}

.appbar-search-placeholder[b-al3kw1x7sa] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Écrans étroits : la pilule cède la place au bouton loupe compact */
.appbar-narrow-spacer[b-al3kw1x7sa] {
    display: none;
}

.appbar-search-compact[b-al3kw1x7sa] {
    display: none;
}

@media (max-width: 900px) {
    .appbar-search-host[b-al3kw1x7sa] {
        display: none;
    }

    .appbar-narrow-spacer[b-al3kw1x7sa] {
        flex: 1 1 auto;
    }

    .appbar-search-compact[b-al3kw1x7sa] {
        display: flex;
    }
}

/* ── Contexte applicatif indisponible ───────────────────────────────── */

/* Rendu à la place du shell entier : pas de navbar ni de rail, qui laisseraient croire
   que l'application est utilisable alors qu'aucune page ne peut travailler. */
.shell-failure[b-al3kw1x7sa] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--g-space-6);
    background: var(--mud-palette-background);
}

.shell-failure-card[b-al3kw1x7sa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-space-4);
    max-width: 34rem;
    padding: var(--g-space-8);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--g-shadow-md);
}

.shell-failure-card h1[b-al3kw1x7sa] {
    margin: 0;
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--mud-palette-text-primary);
}

.shell-failure-card p[b-al3kw1x7sa] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =====================================================================
   NavMenu « Organic » — pilules, deux ambiances via var(--mud-palette-*),
   primitives via var(--g-*). Aucun hex : tout ce qui bascule clair/sombre
   passe par la palette MudBlazor.
   ===================================================================== */

/* ── Racine ─────────────────────────────────────────────────────────── */

.nav-root[b-ow2dopx5wt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(14px * var(--g-scale));
    gap: calc(4px * var(--g-scale));
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mode mini : tuiles centrées, flyouts qui débordent du drawer */
.nav-root.nav-collapsed[b-ow2dopx5wt] {
    padding: calc(20px * var(--g-scale)) 0;
    gap: calc(6px * var(--g-scale));
    align-items: center;
    overflow: visible;
}

/* ── Logo ───────────────────────────────────────────────────────────── */

.nav-logo[b-ow2dopx5wt] {
    display: flex;
    align-items: center;
    padding: calc(8px * var(--g-scale)) calc(10px * var(--g-scale)) calc(34px * var(--g-scale)) calc(10px * var(--g-scale));
}

.nav-logo-wordmark[b-ow2dopx5wt] {
    height: 32px;
    width: auto;
}

.nav-collapsed .nav-logo[b-ow2dopx5wt] {
    justify-content: center;
    padding: 0 0 calc(30px * var(--g-scale)) 0;
}

.nav-logo-icon[b-ow2dopx5wt] {
    height: 35px;
    width: auto;
}

/* ── Labels de section ──────────────────────────────────────────────── */

.nav-section-label[b-ow2dopx5wt] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 0 calc(10px * var(--g-scale)) calc(8px * var(--g-scale));
}

.nav-section-management[b-ow2dopx5wt] {
    padding-top: calc(18px * var(--g-scale));
}

.nav-collapsed .nav-section-label[b-ow2dopx5wt] {
    display: none;
}

/* ── Items : pilule (icône + libellé) ───────────────────────────────── */

/* Bloc conteneur du .nav-link-text sr-only (position: absolute) des tuiles :
   .mud-nav-link n'est pas positionné côté MudBlazor, contrairement à
   .mud-button-root. Ne pas retirer. */
.nav-link-wrapper[b-ow2dopx5wt] {
    position: relative;
}

[b-ow2dopx5wt] .nav-link-item .mud-nav-link {
    border-radius: var(--g-radius-pill);
    padding: calc(11px * var(--g-scale)) calc(12px * var(--g-scale));
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-drawer-text);
    transition: background 0.15s ease, color 0.15s ease;
}

[b-ow2dopx5wt] .nav-link-item .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    margin-left: 0;
    width: 100%;
}

[b-ow2dopx5wt] .nav-link-item .mud-nav-link:hover {
    background: var(--mud-palette-gray-lighter) !important;
    color: var(--mud-palette-text-primary);
}

/* Actif : texte accent sur teinte accent translucide — rend sur les deux thèmes */
[b-ow2dopx5wt] .nav-link-item .mud-nav-link.active {
    color: var(--mud-palette-primary) !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) !important;
    font-weight: 700;
}

/* Items secondaires (section GESTION) */
.nav-item-secondary[b-ow2dopx5wt]  .mud-nav-link {
    padding: calc(10px * var(--g-scale)) calc(12px * var(--g-scale));
    font-size: 14.5px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.nav-item-secondary[b-ow2dopx5wt]  .mud-nav-link:hover {
    color: var(--mud-palette-text-primary);
}

.nav-link-text[b-ow2dopx5wt] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Icônes ─────────────────────────────────────────────────────────── */

[b-ow2dopx5wt] .nav-link-item .nav-icon-wrapper,
[b-ow2dopx5wt] .nav-link-item .nav-icon-wrapper svg {
    width: 22px;
    height: 22px;
}

[b-ow2dopx5wt] .nav-link-item .mud-icon-root {
    width: 22px;
    height: 22px;
    font-size: 22px;
    flex-shrink: 0;
}

/* Trait renforcé sur l'item actif (jeu linéaire stroke currentColor) */
[b-ow2dopx5wt] .nav-link-item .mud-nav-link.active .nav-icon-wrapper svg {
    stroke-width: 2.5;
}

/* ── Mode mini : tuiles 48×48, icônes seules ────────────────────────── */

.nav-collapsed .nav-link-wrapper[b-ow2dopx5wt] {
    width: 48px;
}

.nav-collapsed[b-ow2dopx5wt]  .nav-link-item .mud-nav-link {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-collapsed[b-ow2dopx5wt]  .nav-link-item .mud-nav-link .mud-nav-link-text {
    width: auto;
    gap: 0;
    justify-content: center;
}

.nav-collapsed[b-ow2dopx5wt]  .nav-link-item .nav-icon-wrapper,
.nav-collapsed[b-ow2dopx5wt]  .nav-link-item .nav-icon-wrapper svg {
    width: 24px;
    height: 24px;
}

.nav-collapsed[b-ow2dopx5wt]  .nav-link-item .mud-icon-root {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

/* Libellés masqués mais accessibles (lecteurs d'écran) */
.nav-collapsed[b-ow2dopx5wt]  .nav-link-item .nav-link-text,
.nav-collapsed[b-ow2dopx5wt]  .nav-popover-btn .nav-link-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Actif mini : tuile accent pleine, icône en contraste */
.nav-collapsed[b-ow2dopx5wt]  .nav-link-item .mud-nav-link.active {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* ── Flyout label au survol (mode mini) ─────────────────────────────── */

/* Rendu par NavTileTooltip dans le MudPopoverProvider, hors du drawer (qui scrolle
   en overflow-y: auto et rognerait un absolute). Le flyout ne porte pas l'attribut
   de scope — son habillage vit dans wwwroot/css/app.css (.mud-tooltip.nav-flyout-label).
   Le wrapper .nav-tile-tooltip n'a besoin d'aucune règle : MudTooltip en Inline="false"
   rend un div nu, la tuile 48×48 pilote la largeur. */

/* ── Forçage actif contextuel (détail article ← Stocks / Catalogue) ─── */

.nav-force-active[b-ow2dopx5wt]  .nav-link-item .mud-nav-link:not(.active) {
    color: var(--mud-palette-primary) !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) !important;
    font-weight: 700 !important;
}

.nav-collapsed .nav-force-active[b-ow2dopx5wt]  .nav-link-item .mud-nav-link:not(.active) {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* ── Boutons popover (SuperAdmin, Developer) ────────────────────────── */

[b-ow2dopx5wt] .nav-popover-btn {
    color: var(--mud-palette-text-secondary);
    text-transform: none;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    justify-content: flex-start;
    border-radius: var(--g-radius-pill);
    padding: calc(10px * var(--g-scale)) calc(12px * var(--g-scale));
    min-height: 0;
}

[b-ow2dopx5wt] .nav-popover-btn .mud-button-label {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
}

[b-ow2dopx5wt] .nav-popover-btn .mud-icon-root {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

[b-ow2dopx5wt] .nav-popover-btn:hover {
    background: var(--mud-palette-gray-lighter) !important;
    color: var(--mud-palette-text-primary);
}

.nav-collapsed[b-ow2dopx5wt]  .nav-popover-btn {
    width: 48px;
    height: 48px;
    min-width: 0;
    padding: 0;
    justify-content: center;
    border-radius: 15px;
}

/* ── Bas de sidebar : Documentation ─────────────────────────────────────── */

.nav-footer[b-ow2dopx5wt] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    padding-top: calc(16px * var(--g-scale));
}

.nav-collapsed .nav-footer[b-ow2dopx5wt] {
    align-items: center;
}
/* /Components/Pages/Admin/ManageBeverage/ManageBeveragePage.razor.rz.scp.css */
/* =========================================================
   ManageBeverage Page – Scoped styles (dark theme)
   ========================================================= */

/* --- Header -------------------------------------------- */
.mb-header[b-u2i4osucdf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(20px * var(--g-scale));
}

.mb-header-title[b-u2i4osucdf] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* --- Table panel --------------------------------------- */
.mb-table-panel[b-u2i4osucdf] {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
}

/* --- Tabs override ------------------------------------- */
/* v9 : le bandeau d'onglets est .mud-tabs-tabbar (ex-.mud-tabs-toolbar en v8) */
[b-u2i4osucdf] .mb-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

[b-u2i4osucdf] .mb-tabs .mud-tab {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    /* Largeur mini : paramètre MinimumTabWidth du MudTabs (style inline, prime sur le CSS). */
}

[b-u2i4osucdf] .mb-tabs .mud-tab.mud-tab-active {
    font-weight: 700;
}

/* --- Table section ------------------------------------- */
[b-u2i4osucdf] .mb-table-section {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--g-scale));
}

[b-u2i4osucdf] .mb-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--g-scale));
    flex-wrap: wrap;
}

[b-u2i4osucdf] .mb-search-field {
    min-width: 260px;
    max-width: 360px;
}

/* --- Table styling ------------------------------------- */
[b-u2i4osucdf] .mb-beverage-table .mud-table-container {
    border-radius: 8px;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-head .mud-table-cell {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-body .mud-table-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

[b-u2i4osucdf] .mb-beverage-table .mud-table-body .mud-table-row:hover {
    background: var(--mud-palette-action-default-hover);
}

/* --- Chips inside tables ------------------------------- */
[b-u2i4osucdf] .mb-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4px * var(--g-scale));
}

/* --- Organic / boolean badges -------------------------- */
[b-u2i4osucdf] .mb-badge-organic {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
    font-size: 0.75rem;
    font-weight: 500;
}

/* --- Fusion panel -------------------------------------- */
.fusion-panel[b-u2i4osucdf] {
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-warning);
    border-radius: 12px;
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
}

.fusion-panel-header[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
}

.fusion-panel-hint[b-u2i4osucdf] {
    color: var(--mud-palette-text-secondary);
    margin-top: calc(8px * var(--g-scale));
    font-style: italic;
}

.fusion-chip-list[b-u2i4osucdf] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6px * var(--g-scale));
    margin-top: calc(12px * var(--g-scale));
}

.fusion-destination-section[b-u2i4osucdf] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    margin-top: calc(12px * var(--g-scale));
}

/* --- Fusion row highlighting --------------------------- */
[b-u2i4osucdf] .fusion-row-source {
    background-color: color-mix(in srgb, var(--mud-palette-success) 18%, transparent) !important;
}

[b-u2i4osucdf] .fusion-row-source:hover {
    background-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent) !important;
}

[b-u2i4osucdf] .fusion-row-destination {
    background-color: color-mix(in srgb, var(--mud-palette-error) 18%, transparent) !important;
}

[b-u2i4osucdf] .fusion-row-destination:hover {
    background-color: color-mix(in srgb, var(--mud-palette-error) 28%, transparent) !important;
}

/* --- Responsive ---------------------------------------- */
@media (max-width: 960px) {
    .mb-header[b-u2i4osucdf] {
        flex-direction: column;
        gap: calc(8px * var(--g-scale));
    }

    [b-u2i4osucdf] .mb-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-u2i4osucdf] .mb-search-field {
        min-width: 100%;
        max-width: 100%;
    }
}
/* /Components/Pages/Articles/ArticleDetails/ArticleDetailsPage.razor.rz.scp.css */
/* Fiche article « Organic » — fil d'Ariane et lien de retour. */

.ad-breadcrumb-row[b-pdhhvhyv1i] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--g-space-4);
}

.ad-breadcrumb[b-pdhhvhyv1i] {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--g-scale));
    font-size: 0.85rem;
    color: var(--mud-palette-gray-dark);
}

.ad-breadcrumb a[b-pdhhvhyv1i] {
    color: inherit;
    text-decoration: none;
}

.ad-breadcrumb a:hover[b-pdhhvhyv1i] {
    color: var(--mud-palette-text-primary);
}

[b-pdhhvhyv1i] .ad-breadcrumb-chevron {
    font-size: 0.9rem;
    color: var(--mud-palette-text-disabled);
}

.ad-breadcrumb-current[b-pdhhvhyv1i] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.ad-back-link[b-pdhhvhyv1i] {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--g-scale));
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-tertiary);
    text-decoration: none;
}

.ad-back-link:hover[b-pdhhvhyv1i] {
    color: var(--mud-palette-primary);
}

[b-pdhhvhyv1i] .ad-back-icon {
    font-size: 0.95rem;
}
/* /Components/Pages/Articles/ArticleDetails/Glasses/AdjustOpenedBottleVolumeDialog.razor.rz.scp.css */
/* Curseur vertical natif (input[type=range]).
   writing-mode: vertical-lr + direction: rtl => piste verticale avec le MAX en HAUT
   (bouteille pleine en haut). accent-color tinte la piste + le pouce sans bricolage
   de pseudo-éléments. Vraie hauteur, aucun débordement (contrairement au rotate MudBlazor). */
.bottle-range[b-tnuy9dx4sl] {
    writing-mode: vertical-lr;
    direction: rtl;
    accent-color: var(--mud-palette-primary);
    width: 20px;
    height: 300px;
    margin: 0 calc(12px * var(--g-scale));
    cursor: pointer;
}

.bottle-range:disabled[b-tnuy9dx4sl] {
    opacity: 0.4;
    cursor: default;
}

/* Effet « loupe » : la bouteille apparaît en avançant vers le premier plan. */
.bottle-zoom[b-tnuy9dx4sl] {
    transform-origin: center;
    animation: bottle-zoom-in-b-tnuy9dx4sl 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bottle-zoom-in-b-tnuy9dx4sl {
    from {
        transform: scale(0.6);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Raccourcis de niveau : pastilles de quarts, puis les deux gestes de la planche
   (terminer la bouteille, en ouvrir une nouvelle). */
.bottle-presets[b-tnuy9dx4sl] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    flex-wrap: wrap;
}

.bottle-preset[b-tnuy9dx4sl] {
    padding: calc(6px * var(--g-scale)) calc(13px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bottle-preset:hover:not(:disabled)[b-tnuy9dx4sl] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-tertiary);
}

.bottle-preset--on[b-tnuy9dx4sl] {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-tertiary);
}

.bottle-preset:disabled[b-tnuy9dx4sl] {
    opacity: 0.5;
    cursor: default;
}

.bottle-shortcuts[b-tnuy9dx4sl] {
    display: flex;
    flex-direction: column;
    gap: calc(7px * var(--g-scale));
    align-items: flex-start;
}

.bottle-shortcut[b-tnuy9dx4sl] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.bottle-shortcut:hover:not(:disabled)[b-tnuy9dx4sl] {
    color: var(--mud-palette-tertiary);
}

.bottle-shortcut:disabled[b-tnuy9dx4sl] {
    opacity: 0.5;
    cursor: default;
}

.bottle-shortcut-mark[b-tnuy9dx4sl] {
    width: 20px;
    height: 20px;
    flex: none;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-tnuy9dx4sl] .bottle-shortcut-mark .mud-icon-root {
    font-size: 0.7rem;
}
/* /Components/Pages/Articles/ArticleDetails/Glasses/ArticleGlassesPanel.razor.rz.scp.css */
/* Section « Services au verre » du panneau « Prix & vente » : en-tête avec la part servie
   de la bouteille ouverte, puis une grille de tuiles — bouteille entamée, formats de verre,
   ajout d'un format. */

.gp-section[b-23j7j2n509] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
}

.gp-head[b-23j7j2n509] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.gp-title[b-23j7j2n509] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-tertiary);
}

[b-23j7j2n509] .gp-title-icon {
    font-size: 1rem;
    color: var(--mud-palette-primary);
}

.gp-served[b-23j7j2n509] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
}

.gp-served-label[b-23j7j2n509] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.gp-served-badge[b-23j7j2n509] {
    padding: calc(4px * var(--g-scale)) calc(12px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    color: var(--mud-palette-tertiary);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

/* ── Grille de tuiles ────────────────────────────────────────────────── */

.gp-grid[b-23j7j2n509] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-3);
    align-items: stretch;
}

/* ── Tuile « bouteille entamée » ─────────────────────────────────────── */

.gp-bottle[b-23j7j2n509] {
    position: relative;
    width: 152px;
    flex: none;
    min-height: 214px;
    padding: calc(14px * var(--g-scale));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 18px;
    box-shadow: var(--g-shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--g-scale));
}

[b-23j7j2n509] .gp-bottle-edit {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 28px;
    height: 28px;
}

[b-23j7j2n509] .gp-bottle-edit .mud-icon-root {
    font-size: 0.9rem;
}

.gp-bottle-figure[b-23j7j2n509] {
    position: relative;
    width: 92px;
    height: 150px;
}

.gp-bottle-figure svg[b-23j7j2n509] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gp-bottle-readout[b-23j7j2n509] {
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.gp-bottle-pct[b-23j7j2n509] {
    font-family: var(--mud-typography-h6-family);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-tertiary);
}

.gp-bottle-vol[b-23j7j2n509] {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
}

.gp-bottle-caption[b-23j7j2n509] {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* ── Ajout d'un format ───────────────────────────────────────────────── */

.gp-add[b-23j7j2n509] {
    width: 152px;
    flex: none;
    min-height: 214px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--g-scale));
    padding: calc(12px * var(--g-scale));
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: 18px;
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    color: var(--mud-palette-tertiary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.gp-add:hover[b-23j7j2n509] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.gp-add:active[b-23j7j2n509] {
    transform: scale(0.99);
}

[b-23j7j2n509] .gp-add-icon {
    font-size: 1.25rem;
}

.gp-empty[b-23j7j2n509] {
    padding: var(--g-space-4);
    text-align: center;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: 18px;
}
/* /Components/Pages/Articles/ArticleDetails/Glasses/GlassCard.razor.rz.scp.css */
/* Tuile d'un format de verre : contenance en tête, prix TTC en évidence, marge et
   coût matière, prix alternatifs dépliables, bandeau de liaison caisse en pied. */

.gc-tile[b-lsfp1fmplt] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 18px;
    box-shadow: var(--g-shadow-sm);
    overflow: hidden;
    flex: 1 1 250px;
    min-width: 250px;
    max-width: 330px;
    min-height: 214px;
    display: flex;
    flex-direction: column;
}

.gc-head[b-lsfp1fmplt] {
    padding: calc(13px * var(--g-scale)) calc(15px * var(--g-scale)) calc(11px * var(--g-scale));
    display: flex;
    align-items: flex-start;
    gap: calc(6px * var(--g-scale));
}

.gc-ident[b-lsfp1fmplt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gc-vol[b-lsfp1fmplt] {
    font-family: var(--mud-typography-h5-family);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.gc-name[b-lsfp1fmplt] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-lsfp1fmplt] .gc-icon-btn {
    flex: none;
    width: 30px;
    height: 30px;
}

[b-lsfp1fmplt] .gc-icon-btn .mud-icon-root {
    font-size: 0.95rem;
}

.gc-sep[b-lsfp1fmplt] {
    height: 1px;
    margin: 0 calc(15px * var(--g-scale));
    background: var(--mud-palette-lines-default);
}

/* ── Prix ────────────────────────────────────────────────────────────── */

.gc-prices[b-lsfp1fmplt] {
    padding: calc(11px * var(--g-scale)) calc(15px * var(--g-scale));
    display: flex;
    align-items: flex-end;
    gap: var(--g-space-4);
}

.gc-ttc[b-lsfp1fmplt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gc-ttc-label[b-lsfp1fmplt] {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.gc-ttc-value[b-lsfp1fmplt] {
    font-family: var(--mud-typography-h5-family);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-tertiary);
}

.gc-side[b-lsfp1fmplt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    font-size: 0.75rem;
}

.gc-side-row[b-lsfp1fmplt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(8px * var(--g-scale));
}

.gc-side-key[b-lsfp1fmplt] {
    color: var(--mud-palette-text-secondary);
}

.gc-side-row b[b-lsfp1fmplt] {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Marge et coût matière ───────────────────────────────────────────── */

.gc-margin[b-lsfp1fmplt] {
    padding: calc(10px * var(--g-scale)) calc(15px * var(--g-scale)) calc(12px * var(--g-scale));
    display: flex;
    align-items: baseline;
    gap: calc(7px * var(--g-scale));
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.gc-margin-key[b-lsfp1fmplt] {
    color: var(--mud-palette-text-secondary);
}

.gc-margin-value[b-lsfp1fmplt] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.gc-margin-pct[b-lsfp1fmplt] {
    font-weight: 700;
    color: var(--mud-palette-secondary);
}

.gc-margin-spacer[b-lsfp1fmplt] {
    flex: 1;
}

.gc-margin-cost[b-lsfp1fmplt] {
    color: var(--mud-palette-text-secondary);
}

/* ── Prix alternatifs ────────────────────────────────────────────────── */

.gc-alt[b-lsfp1fmplt] {
    padding: 0 calc(15px * var(--g-scale)) calc(12px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
}

.gc-alt-toggle[b-lsfp1fmplt] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    cursor: pointer;
}

[b-lsfp1fmplt] .gc-alt-chevron {
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

[b-lsfp1fmplt] .gc-alt-chevron--open {
    transform: rotate(90deg);
}

.gc-alt-row[b-lsfp1fmplt] {
    display: flex;
    align-items: baseline;
    gap: calc(9px * var(--g-scale));
    padding: calc(7px * var(--g-scale)) calc(11px * var(--g-scale));
    background: var(--mud-palette-background);
    border-radius: 12px;
    font-size: 0.75rem;
}

.gc-alt-name[b-lsfp1fmplt] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-alt-ttc[b-lsfp1fmplt] {
    color: var(--mud-palette-tertiary);
    font-variant-numeric: tabular-nums;
}

.gc-alt-vat[b-lsfp1fmplt] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.gc-noprice[b-lsfp1fmplt] {
    padding: calc(12px * var(--g-scale)) calc(15px * var(--g-scale));
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Bandeau de liaison caisse ───────────────────────────────────────────
   Quatre états repris de la planche : lié (sauge), écart de prix (accent),
   non lié (neutre), produit introuvable (alerte). La teinte est toujours
   dérivée d'un rôle MudBlazor pour suivre l'ambiance claire / sombre. */

.gc-band[b-lsfp1fmplt] {
    margin-top: auto;
    border-top: 1px solid transparent;
}

.gc-band--ok[b-lsfp1fmplt] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent);
    border-top-color: color-mix(in srgb, var(--mud-palette-secondary) 30%, transparent);
    color: var(--mud-palette-secondary);
}

.gc-band--gap[b-lsfp1fmplt] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    border-top-color: color-mix(in srgb, var(--mud-palette-primary) 32%, transparent);
    color: var(--mud-palette-tertiary);
}

.gc-band--off[b-lsfp1fmplt] {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    border-top-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.gc-band--error[b-lsfp1fmplt] {
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    border-top-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    color: var(--mud-palette-error);
}

.gc-band-head[b-lsfp1fmplt] {
    width: 100%;
    padding: calc(9px * var(--g-scale)) calc(14px * var(--g-scale));
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    border: none;
    background: transparent;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

[b-lsfp1fmplt] .gc-band-icon {
    flex: none;
    font-size: 0.9rem;
}

.gc-band-label[b-lsfp1fmplt] {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-band-right[b-lsfp1fmplt] {
    flex: none;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

[b-lsfp1fmplt] .gc-band-chevron {
    flex: none;
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

[b-lsfp1fmplt] .gc-band-chevron--open {
    transform: rotate(90deg);
}

.gc-band-body[b-lsfp1fmplt] {
    padding: 2px calc(14px * var(--g-scale)) calc(13px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
}

.gc-band-row[b-lsfp1fmplt] {
    display: flex;
    align-items: baseline;
    gap: calc(8px * var(--g-scale));
    font-size: 0.75rem;
}

.gc-band-row-key[b-lsfp1fmplt] {
    flex: 1;
    min-width: 0;
    opacity: 0.75;
}

.gc-band-row b[b-lsfp1fmplt] {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-align: right;
}

.gc-band-actions[b-lsfp1fmplt] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding-top: calc(4px * var(--g-scale));
}

.gc-band-action[b-lsfp1fmplt] {
    flex: 1;
    padding: calc(8px * var(--g-scale)) calc(12px * var(--g-scale));
    border: 1.5px solid currentColor;
    border-radius: var(--g-radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.gc-band-action:hover[b-lsfp1fmplt] {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* L'accent « lier » de l'état non lié : le bandeau est neutre, l'action ne l'est pas. */
.gc-band--off .gc-band-action[b-lsfp1fmplt] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-tertiary);
}

[b-lsfp1fmplt] .gc-band-unlink {
    flex: none;
    width: 32px;
    height: 32px;
    opacity: 0.8;
}

[b-lsfp1fmplt] .gc-band-unlink .mud-icon-root {
    font-size: 0.9rem;
}
/* /Components/Pages/Articles/ArticleDetails/Header/ArticleHeader.razor.rz.scp.css */
/* =====================================================================
   En-tête de fiche article « Organic » — carte r24, titre Poppins,
   rangée méta à icônes accent, badges d'état en pilules.
   ===================================================================== */

.ah-card[b-mbauzphzvk] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    padding: var(--g-space-4) var(--g-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

.ah-top[b-mbauzphzvk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-6);
}

.ah-titles[b-mbauzphzvk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ah-title[b-mbauzphzvk] {
    margin: 0;
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.ah-subtitle[b-mbauzphzvk] {
    font-size: 1rem;
    color: var(--mud-palette-text-secondary);
}

.ah-divider[b-mbauzphzvk] {
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.ah-meta[b-mbauzphzvk] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4) var(--g-space-6);
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.ah-meta-item[b-mbauzphzvk] {
    display: inline-flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    white-space: nowrap;
}

[b-mbauzphzvk] .ah-meta-icon {
    font-size: 1.1rem;
    color: var(--mud-palette-primary);
    flex: none;
}

/* ── Badges d'état (pilules) ─────────────────────────────────────────── */

.ah-badge[b-mbauzphzvk] {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    padding: calc(4px * var(--g-scale)) calc(12px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

[b-mbauzphzvk] .ah-badge .mud-icon-root {
    font-size: 0.95rem;
}

.ah-badge--success[b-mbauzphzvk] {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent);
    color: var(--mud-palette-success);
}

.ah-badge--warning[b-mbauzphzvk] {
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    color: var(--mud-palette-warning);
}

.ah-badge--error[b-mbauzphzvk] {
    background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
    color: var(--mud-palette-error);
}

.ah-badge--aging[b-mbauzphzvk] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

/* ── Repli de la fiche boisson ────────────────────────────────────────
   Bouton centré au pied de la carte : c'est lui qui nomme le bloc, la
   grille dépliée n'a pas d'intitulé propre. Les marges négatives ramènent
   le bouton contre ses deux filets, comme la planche. */

.ah-sheet-toggle-row[b-mbauzphzvk] {
    display: flex;
    justify-content: center;
    margin: calc(-4px * var(--g-scale)) 0 calc(-2px * var(--g-scale));
}

.ah-sheet-toggle[b-mbauzphzvk] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-2);
    padding: calc(5px * var(--g-scale)) calc(14px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    cursor: pointer;
}

.ah-sheet-toggle:hover[b-mbauzphzvk] {
    background: var(--mud-palette-background);
}

[b-mbauzphzvk] .ah-sheet-chevron {
    font-size: 0.95rem;
    transition: transform 0.15s ease;
}

[b-mbauzphzvk] .ah-sheet-chevron--open {
    transform: rotate(180deg);
}
/* /Components/Pages/Articles/ArticleDetails/Header/BeverageSheetBand.razor.rz.scp.css */
/* =====================================================================
   Fiche boisson — grille dense de quatre colonnes, dépliée depuis le pied
   de la carte d'en-tête. Le filet qui sépare les cases est le gap d'un
   pixel laissé sur le fond de la grille : pas de bordure par cellule.
   ===================================================================== */

.bsb-grid[b-b3d6j6brps] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--mud-palette-lines-default);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    overflow: hidden;
}

/* La cellule s'écarte de la carte d'en-tête dans les deux ambiances : plus sombre en « salle »,
   plus claire en « cave ». Un ton fixe irait dans le bon sens d'un côté et disparaîtrait de
   l'autre — background-gray VAUT surface en sombre. */
.bsb-cell[b-b3d6j6brps] {
    background: color-mix(in srgb, var(--mud-palette-lines-default) 55%, var(--mud-palette-surface));
    padding: calc(11px * var(--g-scale)) calc(15px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Champ long (commentaire) : il court sur toute la largeur de la grille. */
.bsb-cell--wide[b-b3d6j6brps] {
    grid-column: 1 / -1;
}

.bsb-label[b-b3d6j6brps] {
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.bsb-value[b-b3d6j6brps] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.bsb-value--wide[b-b3d6j6brps] {
    font-weight: 400;
    white-space: pre-wrap;
}

@media (max-width: 1100px) {
    .bsb-grid[b-b3d6j6brps] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .bsb-grid[b-b3d6j6brps] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .bsb-grid[b-b3d6j6brps] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Articles/ArticleDetails/Movements/ArticleMovementsTab.razor.rz.scp.css */
/* ── Container ── */
.movement-container[b-tcdmlsdxp4] {
    position: relative;
    min-height: 80px;
    /* L'onglet le plus dense de la fiche : un peu plus d'air sous le dernier mois (retour QA 01/09). */
    padding-bottom: var(--g-space-4);
}

/* ── Movement card column widths (::deep targets MudBlazor child components) ── */
.movement-container[b-tcdmlsdxp4]  .col-time {
    width: 40px;
    flex-shrink: 0;
    text-align: right;
}

.movement-container[b-tcdmlsdxp4]  .col-establishment {
    width: 90px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movement-container[b-tcdmlsdxp4]  .col-icon-label {
    width: 120px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movement-container[b-tcdmlsdxp4]  .col-zone {
    width: 130px;
    flex-shrink: 0;
}

.movement-container[b-tcdmlsdxp4]  .col-delta {
    width: 50px;
    flex-shrink: 0;
    text-align: right;
}

.movement-container[b-tcdmlsdxp4]  .col-quantity {
    width: 70px;
    flex-shrink: 0;
    text-align: right;
}

.movement-container[b-tcdmlsdxp4]  .col-transition {
    width: 120px;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
}

/* ── Summary column widths (month & day headers) ── */
.movement-container[b-tcdmlsdxp4]  .col-chip-added {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

.movement-container[b-tcdmlsdxp4]  .col-chip-removed {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

.movement-container[b-tcdmlsdxp4]  .col-summary-stock {
    width: 100px;
    flex-shrink: 0;
    text-align: right;
}

.movement-container[b-tcdmlsdxp4]  .col-summary-value {
    width: 110px;
    flex-shrink: 0;
    text-align: right;
}

.movement-container[b-tcdmlsdxp4]  .col-summary-count {
    width: 110px;
    flex-shrink: 0;
    text-align: right;
}

.movement-container[b-tcdmlsdxp4]  .col-summary-day-count {
    width: 80px;
    flex-shrink: 0;
    text-align: right;
}

/* ── Layout helpers ── */
.movement-container[b-tcdmlsdxp4]  .spacer {
    flex: 1;
}

/* ── Month section ── */
.movement-container[b-tcdmlsdxp4]  .month-section {
    border-color: var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
}

.movement-container[b-tcdmlsdxp4]  .col-icon-spacer {
    width: 86px;
    flex-shrink: 0;
}

.movement-container[b-tcdmlsdxp4]  .stock-count-border {
    border-color: var(--mud-palette-info);
}

.movement-container[b-tcdmlsdxp4]  .notes-text {
    width: 120px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movement-container[b-tcdmlsdxp4]  .notes-text--expanded {
    width: 120px;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
}

.movement-container[b-tcdmlsdxp4]  .col-unit-price {
    width: 80px;
    flex-shrink: 0;
    text-align: right;
}
/* /Components/Pages/Articles/ArticleDetails/Pricing/ArticleJournalSection.razor.rz.scp.css */
/* Colonne « Journal récent » du panneau « Prix & vente » — carte neutre en élévation,
   une ligne par genre d'événement, date au-dessus du chiffre. */

.aj-section[b-t4w06l4k5m] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    margin-top: var(--g-space-1);
}

.aj-section-title[b-t4w06l4k5m] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

[b-t4w06l4k5m] .aj-section-icon {
    font-size: 1rem;
    color: var(--mud-palette-text-disabled);
}

/* Le rôle « lignes » est la seule teinte neutre qui s'élève au-dessus de la surface dans les
   deux ambiances : en « cave », background-gray VAUT surface et la carte disparaîtrait. */
.aj-card[b-t4w06l4k5m] {
    background: var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: calc(13px * var(--g-scale)) calc(16px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--g-scale));
}

.aj-row[b-t4w06l4k5m] {
    display: flex;
    align-items: baseline;
    gap: calc(10px * var(--g-scale));
    font-size: 0.78rem;
}

.aj-row-key[b-t4w06l4k5m] {
    flex: 1;
    min-width: 0;
    color: var(--mud-palette-text-secondary);
}

.aj-row-figures[b-t4w06l4k5m] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
}

.aj-row-when[b-t4w06l4k5m] {
    font-size: 0.81rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Rien sur la fenêtre : la ligne reste, en ton secondaire — l'absence est l'information. */
.aj-row-when--empty[b-t4w06l4k5m] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.aj-row-amount[b-t4w06l4k5m] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.aj-footnote[b-t4w06l4k5m] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Articles/ArticleDetails/Pricing/ArticleSalesPanel.razor.rz.scp.css */
/* =====================================================================
   Panneau unique « Prix & vente » — bandeau de titre teinté, colonne
   tarification/caisse à gauche, service au verre à droite sur fond
   d'application.
   ===================================================================== */

.sp-card[b-c6sy7fzazh] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-md);
    overflow: hidden;
}

.sp-header[b-c6sy7fzazh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-4);
    flex-wrap: wrap;
    padding: 14px var(--g-space-6);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sp-header-titles[b-c6sy7fzazh] {
    display: flex;
    align-items: baseline;
    gap: var(--g-space-3);
    flex-wrap: wrap;
    min-width: 0;
}

.sp-header-title[b-c6sy7fzazh] {
    font-family: var(--mud-typography-h5-family);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sp-header-subtitle[b-c6sy7fzazh] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.sp-header-actions[b-c6sy7fzazh] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
}

.sp-badge-linked[b-c6sy7fzazh] {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    padding: calc(5px * var(--g-scale)) calc(12px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

[b-c6sy7fzazh] .sp-badge-linked .mud-icon-root {
    font-size: 0.85rem;
}

/* ── Corps : tarification et caisse côte à côte, verres en pleine largeur ──
   La planche pose la caisse à droite de la tarification, largeur fixe, puis
   décroche le service au verre sur toute la largeur, sur le fond d'application. */

.sp-body[b-c6sy7fzazh] {
    display: flex;
    flex-direction: column;
}

.sp-top[b-c6sy7fzazh] {
    padding: var(--g-space-4) var(--g-space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-6);
    flex-wrap: wrap;
}

.sp-top-pricing[b-c6sy7fzazh] {
    flex: 1 1 320px;
    min-width: 0;
}

/* Caisse et journal : deux colonnes de même largeur à droite de la tarification, comme la
   planche. Elles se replient l'une après l'autre plutôt que de comprimer la tarification. */
.sp-top-pos[b-c6sy7fzazh],
.sp-top-journal[b-c6sy7fzazh] {
    width: 296px;
    flex: none;
}

.sp-hdivider[b-c6sy7fzazh] {
    height: 1px;
    background: var(--mud-palette-lines-default);
}

/* Le fond d'application détache le service au verre de la tarification, comme la
   planche — les tuiles de verre y ressortent sur la surface. */
.sp-glasses[b-c6sy7fzazh] {
    padding: var(--g-space-4) var(--g-space-6);
    background: var(--mud-palette-background);
    min-width: 0;
}

/* Sous 1400px les deux colonnes de droite cessent d'être fixes et se partagent la ligne
   restante ; sous 1100px elles passent l'une sous l'autre, la place n'y est plus. */
@media (max-width: 1400px) {
    .sp-top-pos[b-c6sy7fzazh],
    .sp-top-journal[b-c6sy7fzazh] {
        flex: 1 1 260px;
        width: auto;
    }
}

@media (max-width: 1100px) {
    .sp-top[b-c6sy7fzazh] {
        flex-direction: column;
        gap: var(--g-space-3);
    }

    .sp-top-pos[b-c6sy7fzazh],
    .sp-top-journal[b-c6sy7fzazh] {
        width: 100%;
    }
}
/* /Components/Pages/Articles/ArticleDetails/Pricing/PosLinkSection.razor.rz.scp.css */
/* Section « Connexion caisse » du panneau « Prix & vente » — carte sauge
   portant l'identité du produit POS et son état de tarification. */

.pl-section[b-0ygetgxszl] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    margin-top: var(--g-space-1);
}

.pl-section-title[b-0ygetgxszl] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pl-section-title--sage[b-0ygetgxszl] {
    color: var(--mud-palette-secondary);
}

[b-0ygetgxszl] .pl-section-icon--sage {
    font-size: 1rem;
    color: var(--mud-palette-secondary);
}

.pl-card[b-0ygetgxszl] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent);
    border-radius: 18px;
    padding: calc(14px * var(--g-scale)) calc(16px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--g-scale));
}

.pl-identity[b-0ygetgxszl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pl-name[b-0ygetgxszl] {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-secondary);
    overflow-wrap: anywhere;
}

.pl-id[b-0ygetgxszl] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.pl-rows[b-0ygetgxszl] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 30%, transparent);
    padding-top: calc(8px * var(--g-scale));
}

.pl-row[b-0ygetgxszl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-2);
    font-size: 0.82rem;
}

.pl-row-key[b-0ygetgxszl] {
    color: var(--mud-palette-text-secondary);
}

.pl-row b[b-0ygetgxszl] {
    color: var(--mud-palette-text-primary);
}

.pl-actions[b-0ygetgxszl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
}

[b-0ygetgxszl] .pl-update {
    flex: 1;
    border-radius: var(--g-radius-pill);
}
/* /Components/Pages/Articles/ArticleDetails/Pricing/PricingSection.razor.rz.scp.css */
/* Colonne tarification du panneau « Prix & vente » : tuile de prix TTC
   en évidence, lignes secondaires, prix alternatifs dépliables. */

.ps-section[b-qunzan3n2s] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.ps-section-title[b-qunzan3n2s] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ps-section-title--accent[b-qunzan3n2s] {
    color: var(--mud-palette-tertiary);
}

[b-qunzan3n2s] .ps-section-icon {
    font-size: 1rem;
    color: var(--mud-palette-primary);
}

/* ── Prix principal ──────────────────────────────────────────────────── */

.ps-hero[b-qunzan3n2s] {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    border-radius: 18px;
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-hero-label[b-qunzan3n2s] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-tertiary);
}

.ps-hero-value[b-qunzan3n2s] {
    font-family: var(--mud-typography-h4-family);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--mud-palette-tertiary);
}

/* ── Lignes secondaires ──────────────────────────────────────────────── */

.ps-rows[b-qunzan3n2s] {
    display: flex;
    flex-direction: column;
}

.ps-row[b-qunzan3n2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
    padding: calc(11px * var(--g-scale)) 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ps-row-key[b-qunzan3n2s] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.ps-row-value[b-qunzan3n2s] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Prix alternatifs ────────────────────────────────────────────────── */

.ps-alt-toggle[b-qunzan3n2s] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    padding: calc(11px * var(--g-scale)) 2px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
    cursor: pointer;
}

[b-qunzan3n2s] .ps-alt-chevron {
    font-size: 0.9rem;
    transition: transform 0.15s ease;
}

[b-qunzan3n2s] .ps-alt-chevron--open {
    transform: rotate(90deg);
}

.ps-alt-row[b-qunzan3n2s] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    padding: calc(9px * var(--g-scale)) calc(12px * var(--g-scale));
    margin-bottom: calc(6px * var(--g-scale));
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
    font-size: 0.82rem;
}

.ps-alt-name[b-qunzan3n2s] {
    flex: 1;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.ps-alt-figure[b-qunzan3n2s] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ps-alt-figure b[b-qunzan3n2s] {
    color: var(--mud-palette-text-primary);
}

.ps-alt-figure-accent[b-qunzan3n2s] {
    color: var(--mud-palette-tertiary);
}
/* /Components/Pages/Articles/ArticleDetails/Tabs/ArticleStocksPanel.razor.rz.scp.css */
/* Bloc à onglets de la fiche article : les onglets soulignés courent au-dessus
   du contenu, sans carte englobante — c'est la barre qui structure la section. */

.asp-panel[b-rdv15dml4q] {
    display: flex;
    flex-direction: column;
}
/* /Components/Pages/Home/Home.razor.rz.scp.css */
/* =====================================================================
   Accueil « Organic » — maquette « GoStan - Accueil » (claire + sombre).
   Aucun hex en dur : ce qui bascule clair/sombre passe par
   var(--mud-palette-*), les primitives par var(--g-*).
   ===================================================================== */

/* ── En-tête : salutation + sélecteur de période ─────────────────────── */

.home-head[b-ndkt03sbu9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--g-space-6);
    flex-wrap: wrap;
    margin-bottom: var(--g-space-6);
}

.home-head-titles[b-ndkt03sbu9] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    min-width: 0;
}

.home-head-range[b-ndkt03sbu9] {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

.home-period[b-ndkt03sbu9] {
    display: inline-flex;
    gap: 3px;
    padding: calc(4px * var(--g-scale));
    background: var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill);
    flex-wrap: wrap;
}

.home-period-pill[b-ndkt03sbu9] {
    padding: calc(9px * var(--g-scale)) calc(18px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-period-pill:hover:not(:disabled):not(.home-period-pill--active)[b-ndkt03sbu9] {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.home-period-pill--active[b-ndkt03sbu9] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
}

.home-period-pill:disabled[b-ndkt03sbu9] {
    cursor: default;
    opacity: 0.6;
}

/* ── Aucun établissement ─────────────────────────────────────────────── */

.home-empty[b-ndkt03sbu9] {
    padding: var(--g-space-8);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    text-align: center;
}

/* ── Grille du tableau de bord ───────────────────────────────────────── */

.home-dashboard[b-ndkt03sbu9] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

.home-kpi-row[b-ndkt03sbu9] {
    display: grid;
    grid-template-columns: 1.05fr 0.8fr 0.8fr;
    gap: var(--g-space-4);
}

.home-main-row[b-ndkt03sbu9] {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: var(--g-space-4);
    align-items: start;
}

.home-main-col[b-ndkt03sbu9] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    min-width: 0;
}

/* ── Cartes KPI ──────────────────────────────────────────────────────── */

.home-kpi[b-ndkt03sbu9] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    min-width: 0;
    padding: calc(22px * var(--g-scale)) calc(26px * var(--g-scale));
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
}

.home-kpi-spacer[b-ndkt03sbu9] {
    flex: 1;
}

.home-kpi-head[b-ndkt03sbu9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-space-3);
}

.home-kpi-label[b-ndkt03sbu9] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.home-kpi-value[b-ndkt03sbu9] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 700;
    font-size: 2.375rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.home-kpi-value--hero[b-ndkt03sbu9] {
    font-size: 2.75rem;
}

.home-kpi-headline[b-ndkt03sbu9] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--g-space-3);
}

/* Hausse en sauge, baisse en alerte : la couleur porte le signe autant que le « + ». */
.home-kpi-change[b-ndkt03sbu9] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-secondary);
}

.home-kpi-change--down[b-ndkt03sbu9] {
    color: var(--mud-palette-error);
}

.home-kpi-track[b-ndkt03sbu9] {
    height: 8px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.home-kpi-bar[b-ndkt03sbu9] {
    height: 100%;
    border-radius: var(--g-radius-pill);
}

.home-kpi-bar--accent[b-ndkt03sbu9] {
    background: var(--mud-palette-primary);
}

.home-kpi-bar--sage[b-ndkt03sbu9] {
    background: var(--mud-palette-secondary);
}

.home-kpi-period[b-ndkt03sbu9],
.home-kpi-foot[b-ndkt03sbu9] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

/*
   Carte « héro » : elle prend systématiquement le contre-pied du fond de
   l'application — encre en ambiance salle, crème en ambiance cave. La classe
   inversée est posée depuis Home.razor (abonnement à ThemeState) : le CSS seul
   ne connaît pas l'ambiance, MudBlazor ne pose pas de classe de thème.
*/
.home-kpi--hero[b-ndkt03sbu9] {
    background: var(--mud-palette-dark);
    border-color: transparent;
}

.home-kpi--hero .home-kpi-value[b-ndkt03sbu9] {
    color: var(--g-neutral-100);
}

.home-kpi--hero .home-kpi-label[b-ndkt03sbu9] {
    color: var(--g-accent-300);
}

.home-kpi--hero .home-kpi-period[b-ndkt03sbu9],
.home-kpi--hero .home-kpi-foot[b-ndkt03sbu9] {
    color: var(--g-neutral-500);
}

.home-kpi--hero .home-kpi-change[b-ndkt03sbu9] {
    color: var(--g-accent2-400);
}

.home-kpi--hero .home-kpi-change--down[b-ndkt03sbu9] {
    color: var(--g-accent-300);
}

.home-kpi--hero-inverted[b-ndkt03sbu9] {
    background: var(--g-hero-card);
}

.home-kpi--hero-inverted .home-kpi-value[b-ndkt03sbu9] {
    color: var(--g-ink);
}

.home-kpi--hero-inverted .home-kpi-label[b-ndkt03sbu9] {
    color: var(--g-accent-700);
}

.home-kpi--hero-inverted .home-kpi-period[b-ndkt03sbu9],
.home-kpi--hero-inverted .home-kpi-foot[b-ndkt03sbu9] {
    color: var(--g-neutral-700);
}

.home-kpi--hero-inverted .home-kpi-change[b-ndkt03sbu9] {
    color: var(--g-accent2-700);
}

.home-kpi--hero-inverted .home-kpi-change--down[b-ndkt03sbu9] {
    color: var(--g-accent-700);
}

/* ── Carte générique ─────────────────────────────────────────────────── */

.home-card[b-ndkt03sbu9] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
    min-width: 0;
    padding: calc(22px * var(--g-scale)) calc(26px * var(--g-scale));
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
}

.home-card-head[b-ndkt03sbu9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-space-2);
}

.home-card-title[b-ndkt03sbu9] {
    margin: 0;
    font-family: var(--mud-typography-h5-family);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
}

.home-card-note[b-ndkt03sbu9] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.home-card-divider[b-ndkt03sbu9] {
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.home-empty-note[b-ndkt03sbu9] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Légendes de graphique ───────────────────────────────────────────── */

.home-legend[b-ndkt03sbu9] {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.home-legend-item[b-ndkt03sbu9] {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
}

.home-legend-dot[b-ndkt03sbu9] {
    width: 9px;
    height: 9px;
    border-radius: var(--g-radius-pill);
}

.home-legend-dot--accent[b-ndkt03sbu9] {
    background: var(--mud-palette-primary);
}

.home-legend-dot--sage[b-ndkt03sbu9] {
    background: var(--mud-palette-secondary);
}

.home-legend-dot--neutral[b-ndkt03sbu9] {
    background: var(--mud-palette-gray-default);
}

/* ── Panneaux de graphique ───────────────────────────────────────────── */

.home-chart-panel[b-ndkt03sbu9] {
    height: 300px;
    overflow: hidden;
}

/* MudChart s'intercale entre le panneau et son SVG (un wrapper sans classe, puis
   .mud-chart porteur de « min-height: fit-content »). Sans contrainte sur TOUTE la
   chaîne, la hauteur naturelle du SVG — étiquettes d'axe comprises — l'emporte sur
   height:100% : le graphique déborde du panneau et ses étiquettes chevauchent le
   contenu suivant. Contraints, MatchBoundsToSize mesure le bon cadre et y cale le
   viewBox. */
[b-ndkt03sbu9] .home-chart-panel > div,
[b-ndkt03sbu9] .home-chart-panel .mud-chart {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

[b-ndkt03sbu9] .home-chart-panel .mud-chart > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.home-chart-empty[b-ndkt03sbu9] {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-md);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

/* MudBlazor code les lignes de grille en dur (#e0e0e0 / gray) : illisible en
   ambiance cave. On les repasse sur la teinte d'élévation de la DA. */
[b-ndkt03sbu9] .home-chart-panel .mud-charts-gridlines-yaxis path,
[b-ndkt03sbu9] .home-chart-panel .mud-charts-gridlines-xaxis-lines path {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

/* ── Contrôle segmenté (au verre / à la bouteille) ───────────────────── */

.home-segmented[b-ndkt03sbu9] {
    display: inline-flex;
    gap: 3px;
    padding: calc(4px * var(--g-scale));
    background: var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill);
}

.home-segmented-pill[b-ndkt03sbu9] {
    padding: calc(7px * var(--g-scale)) calc(16px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-segmented-pill:hover:not(.home-segmented-pill--active)[b-ndkt03sbu9] {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.home-segmented-pill--active[b-ndkt03sbu9] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
}

/* ── Meilleures ventes : moyennes + classement ───────────────────────── */

[b-ndkt03sbu9] .home-top-sales {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

[b-ndkt03sbu9] .home-top-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-2);
}

[b-ndkt03sbu9] .home-top-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(12px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

[b-ndkt03sbu9] .home-top-stat-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

[b-ndkt03sbu9] .home-top-stat-value {
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

/* Gap réduit d'autant que les lignes gagnent du padding : l'écart entre deux contenus
   reste celui d'avant (--g-space-3), la surface de survol occupe l'intervalle. */
[b-ndkt03sbu9] .home-top-list {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le retrait horizontal négatif compense le padding : le texte reste aligné sur les autres
   blocs de la carte, tandis que le survol déborde jusqu'aux bords intérieurs. */
[b-ndkt03sbu9] .home-top-row {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-1) var(--g-space-2);
    margin: 0 calc(-1 * var(--g-space-2));
    border-radius: var(--g-radius-md);
    color: inherit;
    text-decoration: none;
}

[b-ndkt03sbu9] .home-top-row--clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

[b-ndkt03sbu9] .home-top-row--clickable:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

[b-ndkt03sbu9] .home-top-rank {
    width: 26px;
    flex: none;
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mud-palette-text-disabled);
}

[b-ndkt03sbu9] .home-top-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--g-scale));
}

[b-ndkt03sbu9] .home-top-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-space-3);
}

[b-ndkt03sbu9] .home-top-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-ndkt03sbu9] .home-top-qty {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

[b-ndkt03sbu9] .home-top-track {
    height: 7px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

[b-ndkt03sbu9] .home-top-bar {
    height: 100%;
    border-radius: var(--g-radius-pill);
}

[b-ndkt03sbu9] .home-top-bar--accent {
    background: var(--mud-palette-primary);
}

[b-ndkt03sbu9] .home-top-bar--sage {
    background: var(--mud-palette-secondary);
}

/* ── Meilleures ventes : lignes clé / valeur ─────────────────────────── */

[b-ndkt03sbu9] .home-best-sales {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

[b-ndkt03sbu9] .home-best-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
    padding: calc(12px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-md);
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    color: inherit;
    text-decoration: none;
}

[b-ndkt03sbu9] .home-best-row--clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

[b-ndkt03sbu9] .home-best-row--clickable:hover {
    background: color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
}

[b-ndkt03sbu9] .home-best-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-ndkt03sbu9] .home-best-label {
    font-size: 0.73rem;
    color: var(--mud-palette-text-secondary);
}

[b-ndkt03sbu9] .home-best-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-ndkt03sbu9] .home-best-value-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
}

[b-ndkt03sbu9] .home-best-value {
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

[b-ndkt03sbu9] .home-best-unit {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Raccourcis ──────────────────────────────────────────────────────── */

.home-shortcuts[b-ndkt03sbu9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-2);
}

[b-ndkt03sbu9] .home-shortcuts .mud-button-root {
    padding: calc(14px * var(--g-scale)) calc(12px * var(--g-scale));
}


/* ── À traiter ───────────────────────────────────────────────────────── */

/* Carte teintée accent : le point à traiter appelle l'œil avant les cartes neutres.
   La teinte est dérivée de la palette, elle suit donc les deux ambiances. */
.home-card--actions[b-ndkt03sbu9] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 34%, transparent);
}

.home-card-count[b-ndkt03sbu9] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-tertiary);
}

[b-ndkt03sbu9] .home-actions {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

[b-ndkt03sbu9] .home-action {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(14px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: 18px;
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

[b-ndkt03sbu9] .home-action:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface));
}

[b-ndkt03sbu9] .home-action-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--g-radius-pill);
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

[b-ndkt03sbu9] .home-action-badge--alert {
    background: color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    color: var(--mud-palette-tertiary);
}

[b-ndkt03sbu9] .home-action-badge--sage {
    background: color-mix(in srgb, var(--mud-palette-secondary) 24%, transparent);
    color: var(--mud-palette-secondary);
}

[b-ndkt03sbu9] .home-action-badge--neutral {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

[b-ndkt03sbu9] .home-action-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

[b-ndkt03sbu9] .home-action-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-ndkt03sbu9] .home-action-sub {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

[b-ndkt03sbu9] .home-action-chevron {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

[b-ndkt03sbu9] .home-actions-clear {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Valeur du stock ─────────────────────────────────────────────────── */

/* Carte teintée sauge — seconde voix de la DA, elle distingue la valorisation
   des points à traiter sans entrer en concurrence avec l'accent. */
.home-card--stock[b-ndkt03sbu9] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 34%, transparent);
}

[b-ndkt03sbu9] .home-stock-value {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
}

[b-ndkt03sbu9] .home-stock-headline {
    display: flex;
    align-items: baseline;
    gap: var(--g-space-3);
}

[b-ndkt03sbu9] .home-stock-amount {
    font-family: var(--mud-typography-h1-family);
    font-weight: 700;
    font-size: 2.125rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

[b-ndkt03sbu9] .home-stock-amount-unit {
    font-size: 0.85rem;
    color: var(--mud-palette-secondary);
}

[b-ndkt03sbu9] .home-stock-rows {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
}

[b-ndkt03sbu9] .home-stock-row {
    display: flex;
    justify-content: space-between;
    gap: var(--g-space-3);
}

[b-ndkt03sbu9] .home-stock-row-accent {
    color: var(--mud-palette-secondary);
}

[b-ndkt03sbu9] .home-stock-row-strong {
    font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .home-kpi-row[b-ndkt03sbu9] {
        grid-template-columns: 1fr 1fr;
    }

    .home-kpi--hero[b-ndkt03sbu9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .home-kpi-row[b-ndkt03sbu9],
    .home-main-row[b-ndkt03sbu9] {
        grid-template-columns: 1fr;
    }

    .home-head[b-ndkt03sbu9] {
        align-items: flex-start;
    }
}
/* /Components/Pages/Metrics/MetricsPage.razor.rz.scp.css */
/* =====================================================================
   Page Analyses « Organic » — en-tête, bandeau CA et corps d'onglet.
   Maquettes « GoStan - Analyses Tops & Lows » (claire + sombre).
   ===================================================================== */

.metrics-head[b-o6hha2t16f] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--g-space-6);
    flex-wrap: wrap;
    margin-bottom: var(--g-space-4);
}

.metrics-body[b-o6hha2t16f] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    padding-top: var(--g-space-4);
}
/* /Components/Pages/Metrics/MetricsPeriodFilter.razor.rz.scp.css */
/* =====================================================================
   Sélecteur de période de la page Analyses — pilules segmentées et plage
   exacte, maquette « GoStan - Analyses Tops & Lows ».
   ===================================================================== */

.metrics-period[b-isp6xouwnb] {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    flex-wrap: wrap;
    align-self: flex-start;
    padding: calc(7px * var(--g-scale)) calc(16px * var(--g-scale)) calc(7px * var(--g-scale)) calc(8px * var(--g-scale));
    border: 1.5px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-surface);
}

.metrics-period-presets[b-isp6xouwnb] {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill);
    flex-wrap: wrap;
}

.metrics-period-pill[b-isp6xouwnb] {
    padding: calc(7px * var(--g-scale)) calc(13px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.metrics-period-pill:hover:not(.metrics-period-pill--active)[b-isp6xouwnb] {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.metrics-period-pill--active[b-isp6xouwnb] {
    background: var(--mud-palette-dark);
    color: var(--g-neutral-100);
    font-weight: 700;
}

.metrics-period-range[b-isp6xouwnb] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
}

.metrics-period-arrow[b-isp6xouwnb] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

[b-isp6xouwnb] .metrics-period-picker {
    min-width: 148px;
}
/* /Components/Pages/Metrics/MetricsRevenueBanner.razor.rz.scp.css */
/* =====================================================================
   Bandeau chiffre d'affaires de la page Analyses — maquettes « GoStan -
   Analyses Tops & Lows » (claire + sombre). La carte s'inverse avec
   l'ambiance, comme le héros de l'accueil : encre en clair, crème en
   sombre. Aucun hex en dur.
   ===================================================================== */

.metrics-revenue[b-tk4e4wfrhw] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    flex-wrap: wrap;
    padding: calc(22px * var(--g-scale)) calc(26px * var(--g-scale));
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    background: var(--mud-palette-dark);
}

.metrics-revenue-figures[b-tk4e4wfrhw] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-8);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.metrics-revenue-figure[b-tk4e4wfrhw] {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--g-scale));
    min-width: 0;
}

.metrics-revenue-label[b-tk4e4wfrhw] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--g-accent-300);
}

.metrics-revenue-value[b-tk4e4wfrhw] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--g-neutral-100);
}

.metrics-revenue-note[b-tk4e4wfrhw] {
    font-size: 0.78rem;
    color: var(--g-neutral-500);
}

/* Hausse en sauge, baisse en accent : la couleur porte le signe autant que le « + ». */
.metrics-revenue-note--up[b-tk4e4wfrhw] {
    color: var(--g-accent2-400);
    font-weight: 600;
}

.metrics-revenue-note--down[b-tk4e4wfrhw] {
    color: var(--g-accent-300);
    font-weight: 600;
}

.metrics-revenue-empty[b-tk4e4wfrhw] {
    font-size: 0.85rem;
    color: var(--g-neutral-500);
}

/* ── Sparkline douze mois ────────────────────────────────────────────── */

.metrics-revenue-spark[b-tk4e4wfrhw] {
    display: flex;
    align-items: flex-end;
    gap: calc(6px * var(--g-scale));
    height: 74px;
    flex: none;
}

.metrics-revenue-bar[b-tk4e4wfrhw] {
    width: 12px;
    border-radius: var(--g-radius-pill) var(--g-radius-pill) 4px 4px;
    background: var(--g-neutral-700);
}

.metrics-revenue-bar--current[b-tk4e4wfrhw] {
    background: var(--g-accent);
}

/* ── Ambiance sombre : la carte passe en crème, l'encre revient ──────── */

.metrics-revenue--inverted[b-tk4e4wfrhw] {
    background: var(--g-hero-card);
}

.metrics-revenue--inverted .metrics-revenue-label[b-tk4e4wfrhw] {
    color: var(--g-accent-700);
}

.metrics-revenue--inverted .metrics-revenue-value[b-tk4e4wfrhw] {
    color: var(--g-neutral-900);
}

.metrics-revenue--inverted .metrics-revenue-note[b-tk4e4wfrhw] {
    color: var(--g-neutral-700);
}

.metrics-revenue--inverted .metrics-revenue-note--up[b-tk4e4wfrhw] {
    color: var(--g-accent2-700);
}

.metrics-revenue--inverted .metrics-revenue-note--down[b-tk4e4wfrhw] {
    color: var(--g-accent-700);
}

.metrics-revenue--inverted .metrics-revenue-bar[b-tk4e4wfrhw] {
    background: var(--g-neutral-400);
}

.metrics-revenue--inverted .metrics-revenue-empty[b-tk4e4wfrhw] {
    color: var(--g-neutral-700);
}

@media (max-width: 960px) {
    .metrics-revenue-spark[b-tk4e4wfrhw] {
        display: none;
    }
}
/* /Components/Pages/Metrics/Purchases/PurchasesChartsPanel.razor.rz.scp.css */
/* Carte de graphique de la page Analyses — même châssis que les autres cartes
   « Organic » : surface du thème, rayon 24, ombre encre douce. */

.metrics-chart-card[b-80viejindq] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}
/* /Components/Pages/Metrics/Sales/SalesChartsPanel.razor.rz.scp.css */
/* Carte de graphique de la page Analyses — même châssis que les autres cartes
   « Organic » : surface du thème, rayon 24, ombre encre douce. */

.metrics-chart-card[b-ytzqgobatp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}
/* /Components/Pages/Metrics/Tabs/MetricsStockTab.razor.rz.scp.css */
/* Onglet « Stock » de la page Analyses — cartes « Organic ». */

.metrics-card[b-5edjvidaa5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}
/* /Components/Pages/Metrics/Tabs/MetricsTopsLowsTab.razor.rz.scp.css */
/* =====================================================================
   Onglet « Tops & Lows » — grille de cartes, maquette « GoStan -
   Analyses Tops & Lows ».
   ===================================================================== */

.topslows-tab[b-x0efpzqjbf] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

.topslows-grid[b-x0efpzqjbf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-4);
    align-items: stretch;
}

/* Les régions ont besoin de plus de largeur que le donut des non consommées. */
.topslows-grid--wide-left[b-x0efpzqjbf] {
    grid-template-columns: 1.15fr 1fr;
}

@media (max-width: 1100px) {
    .topslows-grid[b-x0efpzqjbf],
    .topslows-grid--wide-left[b-x0efpzqjbf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Metrics/TopsLows/TopsLowsBestRegions.razor.rz.scp.css */
/* =====================================================================
   « Régions les plus vendues » — barres horizontales, maquette
   « GoStan - Analyses Tops & Lows ».
   ===================================================================== */

.regions-card[b-y8o6kc9m6z] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}

.regions-head[b-y8o6kc9m6z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.regions-title[b-y8o6kc9m6z] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--mud-palette-text-primary);
}

.regions-subtitle[b-y8o6kc9m6z] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.regions-rows[b-y8o6kc9m6z] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
}

.regions-row[b-y8o6kc9m6z] {
    display: grid;
    grid-template-columns: minmax(90px, 130px) 1fr 52px;
    align-items: center;
    gap: var(--g-space-3);
}

.regions-label[b-y8o6kc9m6z] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.regions-track[b-y8o6kc9m6z] {
    height: 14px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.regions-bar[b-y8o6kc9m6z] {
    height: 100%;
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-primary) 62%, transparent);
    min-width: 2px;
}

.regions-bar--leader[b-y8o6kc9m6z] {
    background: var(--mud-palette-primary);
}

.regions-value[b-y8o6kc9m6z] {
    font-size: 0.9rem;
    font-weight: 800;
    text-align: right;
    color: var(--mud-palette-text-primary);
}
/* /Components/Pages/Metrics/TopsLows/TopsLowsNonConsumed.razor.rz.scp.css */
/* =====================================================================
   « Références non consommées » — donut à valeur centrale et légende
   chiffrée, maquette « GoStan - Analyses Tops & Lows ».
   ===================================================================== */

.nonconsumed-card[b-j9m77nedft] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}

.nonconsumed-head[b-j9m77nedft] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nonconsumed-title[b-j9m77nedft] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--mud-palette-text-primary);
}

.nonconsumed-subtitle[b-j9m77nedft] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.nonconsumed-body[b-j9m77nedft] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    flex-wrap: wrap;
}

/* ── Donut et sa valeur centrale ─────────────────────────────────────── */

.nonconsumed-donut[b-j9m77nedft] {
    position: relative;
    flex: none;
    width: 180px;
    height: 180px;
}

.nonconsumed-donut-center[b-j9m77nedft] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
}

.nonconsumed-donut-value[b-j9m77nedft] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.nonconsumed-donut-caption[b-j9m77nedft] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Légende ─────────────────────────────────────────────────────────── */

.nonconsumed-legend[b-j9m77nedft] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    flex: 1;
    min-width: 180px;
}

.nonconsumed-legend-row[b-j9m77nedft] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
}

.nonconsumed-dot[b-j9m77nedft] {
    width: 11px;
    height: 11px;
    border-radius: var(--g-radius-pill);
    flex: none;
}

.nonconsumed-legend-label[b-j9m77nedft] {
    flex: 1;
    font-size: 0.88rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nonconsumed-legend-count[b-j9m77nedft] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.nonconsumed-legend-pct[b-j9m77nedft] {
    width: 48px;
    text-align: right;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

[b-j9m77nedft] .nonconsumed-action {
    align-self: flex-start;
    margin-top: var(--g-space-1);
    border-radius: var(--g-radius-pill);
}
/* /Components/Pages/Metrics/TopsLows/TopsLowsProfitabilityBanner.razor.rz.scp.css */
/* « Rentabilité par référence » — carte « Organic » et tuiles de répartition
   par type. Le bloc n'est pas dans la maquette Analyses ; il en reprend le
   châssis pour ne pas détonner à côté des cartes redessinées. */

.profitability-card[b-vhnaqdeznr] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}

.profitability-tile[b-vhnaqdeznr] {
    padding: calc(13px * var(--g-scale));
    text-align: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
}

/* Pilule alignée sur « Voir les références » (TopsLowsNonConsumed). */
[b-vhnaqdeznr] .profitability-action {
    border-radius: var(--g-radius-pill);
}
/* /Components/Pages/Metrics/TopsLows/TopsLowsReferencesCard.razor.rz.scp.css */
/* =====================================================================
   Cartes de classement « Tops » / « Lows » — maquettes « GoStan - Analyses
   Tops & Lows » (claire + sombre). Aucun hex en dur.
   ===================================================================== */

.topslows-card[b-5uq8vi1laj] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}

.topslows-card-head[b-5uq8vi1laj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
}

.topslows-card-titles[b-5uq8vi1laj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.topslows-kicker[b-5uq8vi1laj] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topslows-kicker--accent[b-5uq8vi1laj] {
    color: var(--mud-palette-primary);
}

.topslows-kicker--sage[b-5uq8vi1laj] {
    color: var(--mud-palette-secondary);
}

.topslows-card-title[b-5uq8vi1laj] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--mud-palette-text-primary);
}

/* Critère du classement, énoncé sous le titre. */
.topslows-card-note[b-5uq8vi1laj] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* CTA vers le détail exhaustif — même pilule que « Voir les références ». */
[b-5uq8vi1laj] .topslows-card-action {
    align-self: flex-start;
    border-radius: var(--g-radius-pill);
}

/* ── Badges (part du CA, valeur immobilisée, tendance, dormance) ─────── */

.topslows-badge[b-5uq8vi1laj] {
    display: inline-block;
    padding: calc(6px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.topslows-badge--neutral[b-5uq8vi1laj] {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.topslows-badge--accent[b-5uq8vi1laj] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

.topslows-badge--sage[b-5uq8vi1laj] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 18%, transparent);
    color: var(--mud-palette-secondary);
}

/* ── Lignes ──────────────────────────────────────────────────────────── */

.topslows-rows[b-5uq8vi1laj] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

/* La ligne est une ancre vers la fiche article : neutraliser le style de lien pour que
   la typographie du classement reste intacte. */
.topslows-row[b-5uq8vi1laj] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(10px * var(--g-scale)) calc(4px * var(--g-scale));
    border-radius: var(--g-radius-md);
    color: inherit;
    text-decoration: none;
}

/* Survol réservé aux lignes qui mènent quelque part : une référence non résolue ne doit
   pas se signaler comme cliquable. */
.topslows-row--clickable[b-5uq8vi1laj] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.topslows-row--clickable:hover[b-5uq8vi1laj] {
    background: var(--mud-palette-background);
}

.topslows-rank[b-5uq8vi1laj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--g-radius-pill);
    font-size: 0.8rem;
    font-weight: 800;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.topslows-rank--leader[b-5uq8vi1laj] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.topslows-row-identity[b-5uq8vi1laj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topslows-row-title[b-5uq8vi1laj],
.topslows-row-subtitle[b-5uq8vi1laj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topslows-row-title[b-5uq8vi1laj] {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.topslows-row-subtitle[b-5uq8vi1laj] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.topslows-row-quantity[b-5uq8vi1laj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.topslows-row-value[b-5uq8vi1laj] {
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.topslows-row-unit[b-5uq8vi1laj] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.topslows-row-badge[b-5uq8vi1laj] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Metrics/TopsLows/TopsLowsSalesDonut.razor.rz.scp.css */
/* =====================================================================
   Cartes « Vente au verre » / « Vente à la bouteille » — tuiles de
   moyenne, donut et légende, maquette « GoStan - Analyses Tops & Lows ».
   ===================================================================== */

.salesmix-card[b-tpyz4p7bti] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    height: 100%;
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}

.salesmix-title[b-tpyz4p7bti] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--mud-palette-text-primary);
}

.salesmix-body[b-tpyz4p7bti] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    flex-wrap: wrap;
}

/* ── Tuiles de moyenne journalière ───────────────────────────────────── */

.salesmix-tiles[b-tpyz4p7bti] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    flex: none;
    width: 168px;
}

.salesmix-tile[b-tpyz4p7bti] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(14px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: 18px;
    border: 1.5px solid transparent;
}

.salesmix-tile-value[b-tpyz4p7bti] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

.salesmix-tile-label[b-tpyz4p7bti] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.salesmix-tile--accent[b-tpyz4p7bti] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.salesmix-tile--accent .salesmix-tile-value[b-tpyz4p7bti] {
    color: var(--mud-palette-primary);
}

.salesmix-tile--sage[b-tpyz4p7bti] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 45%, transparent);
}

.salesmix-tile--sage .salesmix-tile-value[b-tpyz4p7bti] {
    color: var(--mud-palette-secondary);
}

/* ── Donut et légende ────────────────────────────────────────────────── */

.salesmix-donut[b-tpyz4p7bti] {
    flex: none;
    width: 150px;
    height: 150px;
}

.salesmix-legend[b-tpyz4p7bti] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    flex: 1;
    min-width: 140px;
}

.salesmix-legend-row[b-tpyz4p7bti] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
}

.salesmix-dot[b-tpyz4p7bti] {
    width: 11px;
    height: 11px;
    border-radius: var(--g-radius-pill);
    flex: none;
}

.salesmix-legend-label[b-tpyz4p7bti] {
    flex: 1;
    font-size: 0.88rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salesmix-legend-pct[b-tpyz4p7bti] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.salesmix-empty[b-tpyz4p7bti] {
    flex: 1;
}
/* /Components/Pages/Metrics/TopsLows/TopsLowsSupplierPurchases.razor.rz.scp.css */
/* =====================================================================
   « Classement fournisseurs » — carte unique montant + part, maquette
   « GoStan - Analyses Tops & Lows ».
   ===================================================================== */

.suppliers-card[b-t4zlbcrmj7] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: var(--g-shadow-sm);
}

.suppliers-head[b-t4zlbcrmj7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.suppliers-head-right[b-t4zlbcrmj7] {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
}

.suppliers-title[b-t4zlbcrmj7] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--mud-palette-text-primary);
}

.suppliers-total[b-t4zlbcrmj7] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* Gap réduit d'autant que les lignes gagnent du padding : l'écart entre deux contenus reste
   celui d'avant (--g-space-3), la surface de survol occupe l'intervalle. */
.suppliers-rows[b-t4zlbcrmj7] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
}

/* Le retrait horizontal négatif compense le padding : le contenu reste aligné sur le reste de
   la carte, tandis que le survol déborde jusqu'aux bords intérieurs. */
.suppliers-row[b-t4zlbcrmj7] {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr 92px 56px;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-1) var(--g-space-2);
    margin: 0 calc(-1 * var(--g-space-2));
    border-radius: var(--g-radius-md);
    color: inherit;
    text-decoration: none;
}

.suppliers-row--clickable[b-t4zlbcrmj7] {
    cursor: pointer;
    transition: background 0.15s ease;
}

.suppliers-row--clickable:hover[b-t4zlbcrmj7] {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.suppliers-row--clickable:focus-visible[b-t4zlbcrmj7] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.suppliers-identity[b-t4zlbcrmj7] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    min-width: 0;
}

.suppliers-dot[b-t4zlbcrmj7] {
    width: 11px;
    height: 11px;
    border-radius: var(--g-radius-pill);
    flex: none;
}

.suppliers-name[b-t4zlbcrmj7] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suppliers-track[b-t4zlbcrmj7] {
    height: 14px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.suppliers-bar[b-t4zlbcrmj7] {
    height: 100%;
    border-radius: var(--g-radius-pill);
    min-width: 2px;
}

.suppliers-amount[b-t4zlbcrmj7] {
    font-size: 0.9rem;
    font-weight: 800;
    text-align: right;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.suppliers-share[b-t4zlbcrmj7] {
    font-size: 0.82rem;
    text-align: right;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Pages/Purchases/ManagePurchases.razor.rz.scp.css */
/* =====================================================================
   Achats « Organic » — maquette « GoStan - Commandes ».
   Aucun hex en dur : rôles clair/sombre via var(--mud-palette-*),
   primitives via var(--g-*).
   ===================================================================== */

.purchases-page[b-g08bn5650a] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

.purchases-head[b-g08bn5650a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-6);
    flex-wrap: wrap;
}

.purchases-head-titles[b-g08bn5650a] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.purchases-head-sub[b-g08bn5650a] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.purchases-head-actions[b-g08bn5650a] {
    display: flex;
    gap: var(--g-space-2);
    flex-wrap: wrap;
}
/* /Components/Pages/Purchases/PurchaseListView.razor.rz.scp.css */
/* =====================================================================
   Liste unifiée des achats — maquette « GoStan - Commandes ».
   Aucun hex en dur : les rôles clair/sombre viennent de
   var(--mud-palette-*), les primitives de var(--g-*).
   ===================================================================== */

.purchase-list[b-gc7wzgl8li] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
    min-width: 0;
}

/* ── Titre de liste + chips ──────────────────────────────────────────── */

.purchase-list-head[b-gc7wzgl8li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.purchase-list-titles[b-gc7wzgl8li] {
    display: flex;
    align-items: baseline;
    gap: var(--g-space-3);
    flex-wrap: wrap;
    min-width: 0;
}

.purchase-list-title[b-gc7wzgl8li] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.19rem;
    color: var(--mud-palette-text-primary);
}

.purchase-list-note[b-gc7wzgl8li] {
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
}

.purchase-list-chips[b-gc7wzgl8li] {
    display: flex;
    gap: calc(7px * var(--g-scale));
    flex-wrap: wrap;
}

.purchase-chip[b-gc7wzgl8li] {
    padding: calc(9px * var(--g-scale)) calc(16px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.81rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.purchase-chip:hover:not(.purchase-chip--active)[b-gc7wzgl8li] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.purchase-chip--active[b-gc7wzgl8li] {
    background: var(--mud-palette-dark);
    border-color: var(--mud-palette-dark);
    color: var(--g-neutral-100);
    font-weight: 700;
}

/* ── Carte de liste ──────────────────────────────────────────────────── */

.purchase-table[b-gc7wzgl8li] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(8px * var(--g-scale));
    background: var(--mud-palette-drawer-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    overflow-x: auto;
}

.purchase-row[b-gc7wzgl8li] {
    display: grid;
    grid-template-columns: 1.55fr 0.8fr 1.3fr 0.6fr 0.9fr 0.95fr 1.35fr 44px;
    gap: calc(14px * var(--g-scale));
    align-items: center;
    padding: calc(13px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: var(--g-radius-md);
    min-width: 980px;
}

.purchase-row--header[b-gc7wzgl8li] {
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale)) calc(12px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.purchase-row--clickable[b-gc7wzgl8li] {
    cursor: pointer;
}

.purchase-row--clickable:hover[b-gc7wzgl8li] {
    background: var(--mud-palette-background-gray);
}

/* ── Cellules ────────────────────────────────────────────────────────── */

.purchase-cell--right[b-gc7wzgl8li] {
    text-align: right;
}

.purchase-cell-ref[b-gc7wzgl8li] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    min-width: 0;
}

[b-gc7wzgl8li] .purchase-row-chevron {
    font-size: 1.15rem;
    color: var(--mud-palette-text-secondary);
    flex: none;
}

.purchase-ref-texts[b-gc7wzgl8li] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.purchase-ref[b-gc7wzgl8li] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-ref-sub[b-gc7wzgl8li] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-cell-date[b-gc7wzgl8li] {
    font-size: 0.84rem;
    color: var(--mud-palette-text-primary);
}

.purchase-cell-supplier[b-gc7wzgl8li] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    min-width: 0;
}

.purchase-supplier-initials[b-gc7wzgl8li] {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.69rem;
    font-weight: 800;
}

.purchase-supplier-name[b-gc7wzgl8li] {
    font-size: 0.84rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-supplier-name--none[b-gc7wzgl8li] {
    color: var(--mud-palette-text-secondary);
}

.purchase-cell-number[b-gc7wzgl8li] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.purchase-cell-actions[b-gc7wzgl8li] {
    display: flex;
    justify-content: flex-end;
}

/* ── Pastilles ───────────────────────────────────────────────────────── */

.purchase-badge[b-gc7wzgl8li] {
    display: inline-block;
    padding: calc(5px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.purchase-badge--neutral[b-gc7wzgl8li] {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.purchase-badge--accent[b-gc7wzgl8li] {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    color: var(--mud-palette-primary);
}

.purchase-badge--sage[b-gc7wzgl8li] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

.purchase-badge--warn[b-gc7wzgl8li] {
    background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
    color: var(--mud-palette-error);
}

/* ── Détail déplié (achats en cave) ──────────────────────────────────── */

.purchase-details[b-gc7wzgl8li] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 calc(18px * var(--g-scale)) calc(8px * var(--g-scale)) calc(40px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale));
    background: var(--mud-palette-background-gray);
    border-radius: var(--g-radius-md);
}

.purchase-detail-row[b-gc7wzgl8li] {
    display: grid;
    grid-template-columns: 2fr 0.7fr 0.8fr 0.9fr 0.9fr 0.9fr 0.9fr 1.4fr;
    gap: calc(12px * var(--g-scale));
    align-items: center;
    padding: calc(6px * var(--g-scale)) calc(4px * var(--g-scale));
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
    min-width: 860px;
}

.purchase-detail-row--header[b-gc7wzgl8li] {
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.purchase-detail-notes[b-gc7wzgl8li] {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Pied de liste ───────────────────────────────────────────────────── */

.purchase-list-foot[b-gc7wzgl8li] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-4);
    padding: calc(12px * var(--g-scale)) calc(18px * var(--g-scale)) calc(6px * var(--g-scale));
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.81rem;
    color: var(--mud-palette-text-secondary);
}

.purchase-list-foot-right[b-gc7wzgl8li] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
}

.purchase-list-total[b-gc7wzgl8li] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.purchase-pager[b-gc7wzgl8li] {
    display: flex;
    gap: calc(6px * var(--g-scale));
}

[b-gc7wzgl8li] .purchase-pager-btn {
    border: 1px solid var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}

/* ── État vide ───────────────────────────────────────────────────────── */

.purchase-empty[b-gc7wzgl8li] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-3);
    min-height: 320px;
    padding: var(--g-space-8);
    background: var(--mud-palette-drawer-background);
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-card);
}

[b-gc7wzgl8li] .purchase-empty-icon {
    width: 62px;
    height: 62px;
    padding: calc(17px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--g-hero-card);
    color: var(--g-accent-600);
    font-size: 28px;
}

.purchase-empty-texts[b-gc7wzgl8li] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-1);
    max-width: 420px;
}

.purchase-empty-title[b-gc7wzgl8li] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.19rem;
    color: var(--mud-palette-text-primary);
}

.purchase-empty-text[b-gc7wzgl8li] {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.purchase-empty-actions[b-gc7wzgl8li] {
    display: flex;
    gap: var(--g-space-2);
    padding-top: calc(4px * var(--g-scale));
    flex-wrap: wrap;
    justify-content: center;
}
/* /Components/Pages/Purchases/PurchaseStageCards.razor.rz.scp.css */
/* =====================================================================
   Étapes du flux d'achat — maquette « GoStan - Commandes ».
   La carte active passe en encre (rôle Dark du thème), donc identique
   dans les deux ambiances : c'est le repère de l'étape courante.
   ===================================================================== */

.purchase-stages[b-1ey1u18hk7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--g-space-3);
}

.purchase-stage[b-1ey1u18hk7] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
    border-radius: 20px;
    box-shadow: var(--g-shadow-sm);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.purchase-stage:hover:not(.purchase-stage--active)[b-1ey1u18hk7] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.purchase-stage--active[b-1ey1u18hk7] {
    background: var(--mud-palette-dark);
    border-color: transparent;
    cursor: default;
}

.purchase-stage-top[b-1ey1u18hk7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-2);
}

.purchase-stage-kicker[b-1ey1u18hk7] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.purchase-stage--active .purchase-stage-kicker[b-1ey1u18hk7] {
    color: var(--g-accent-300);
}

.purchase-stage-count[b-1ey1u18hk7] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.purchase-stage--active .purchase-stage-count[b-1ey1u18hk7] {
    color: var(--g-neutral-100);
}

.purchase-stage-note[b-1ey1u18hk7] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.purchase-stage--active .purchase-stage-note[b-1ey1u18hk7] {
    color: var(--g-neutral-500);
}

@media (max-width: 1100px) {
    .purchase-stages[b-1ey1u18hk7] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .purchase-stages[b-1ey1u18hk7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Recettes/FichesRecettePage.razor.rz.scp.css */
/* =====================================================================
   Recettes « Organic » — maquette « GoStan - Recettes ».
   Aucun hex en dur : rôles clair/sombre via var(--mud-palette-*),
   primitives via var(--g-*).
   ===================================================================== */

.recipes-page[b-8hu84ni56w] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

.recipes-head[b-8hu84ni56w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-6);
    flex-wrap: wrap;
}

.recipes-head-titles[b-8hu84ni56w] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.recipes-head-sub[b-8hu84ni56w] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.recipes-head-actions[b-8hu84ni56w] {
    display: flex;
    gap: var(--g-space-2);
    flex-wrap: wrap;
}

/* ── Types et filtres ────────────────────────────────────────────────── */

.recipes-filters[b-8hu84ni56w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.recipes-types[b-8hu84ni56w] {
    display: flex;
    gap: var(--g-space-2);
    padding: calc(5px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-background-gray);
}

.recipes-type[b-8hu84ni56w] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(20px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.recipes-type:hover:not(.recipes-type--active)[b-8hu84ni56w] {
    color: var(--mud-palette-text-primary);
}

/* Type actif en encre, donc identique dans les deux ambiances : c'est le repère
   de la liste affichée, au même titre que l'étape active des Commandes. */
.recipes-type--active[b-8hu84ni56w] {
    background: var(--mud-palette-dark);
    color: var(--g-neutral-100);
    font-weight: 700;
    cursor: default;
}

.recipes-type-count[b-8hu84ni56w] {
    padding: 2px calc(9px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.recipes-type--active .recipes-type-count[b-8hu84ni56w] {
    background: var(--g-neutral-800);
    color: var(--g-accent-300);
}

.recipes-chips[b-8hu84ni56w] {
    display: flex;
    gap: calc(7px * var(--g-scale));
    flex-wrap: wrap;
}

.recipes-chip[b-8hu84ni56w] {
    padding: calc(9px * var(--g-scale)) calc(16px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.81rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.recipes-chip:hover:not(.recipes-chip--active)[b-8hu84ni56w] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.recipes-chip--active[b-8hu84ni56w] {
    background: var(--mud-palette-dark);
    border-color: var(--mud-palette-dark);
    color: var(--g-neutral-100);
    font-weight: 700;
}

/* ── Liste + fiche ───────────────────────────────────────────────────── */

.recipes-split[b-8hu84ni56w] {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--g-space-4);
    align-items: start;
    min-height: 0;
}

@media (max-width: 1100px) {
    .recipes-split[b-8hu84ni56w] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Recettes/RecipeDetailPanel.razor.rz.scp.css */
/* =====================================================================
   Fiche recette — maquette « GoStan - Recettes », panneau de droite.
   Aucun hex en dur : rôles clair/sombre via var(--mud-palette-*),
   primitives via var(--g-*).
   ===================================================================== */

.recipe-panel[b-gpwmkm1yot] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--mud-palette-drawer-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    overflow: hidden;
}

.recipe-panel-placeholder[b-gpwmkm1yot] {
    padding: var(--g-space-6);
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

.recipe-panel-head[b-gpwmkm1yot] {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: calc(14px * var(--g-scale));
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale)) calc(16px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.recipe-panel-titles[b-gpwmkm1yot] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--g-scale));
}

.recipe-panel-kicker[b-gpwmkm1yot] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--mud-palette-primary);
}

.recipe-panel-name[b-gpwmkm1yot] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.recipe-panel-meta[b-gpwmkm1yot] {
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
}

.recipe-panel-actions[b-gpwmkm1yot] {
    flex: none;
    display: flex;
    gap: calc(7px * var(--g-scale));
}

/* Deux formes pour la même pastille : MudIconButton reçoit la classe sur le bouton,
   MudMenu la reçoit sur son enveloppe et rend le bouton en dessous. */
[b-gpwmkm1yot] .recipe-panel-action.mud-icon-button,
[b-gpwmkm1yot] .recipe-panel-action .mud-icon-button {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    color: var(--mud-palette-text-primary);
}

/* ── Onglets en pilule ───────────────────────────────────────────────── */

.recipe-panel-tabs[b-gpwmkm1yot] {
    flex: none;
    display: flex;
    gap: calc(6px * var(--g-scale));
    padding: calc(14px * var(--g-scale)) calc(24px * var(--g-scale)) 0;
}

.recipe-panel-tab[b-gpwmkm1yot] {
    padding: calc(9px * var(--g-scale)) calc(18px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.recipe-panel-tab:hover:not(.recipe-panel-tab--active)[b-gpwmkm1yot] {
    background: var(--mud-palette-lines-default);
}

.recipe-panel-tab--active[b-gpwmkm1yot] {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 700;
    cursor: default;
}

/* ── Corps ───────────────────────────────────────────────────────────── */

.recipe-panel-body[b-gpwmkm1yot] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: calc(16px * var(--g-scale)) calc(24px * var(--g-scale)) calc(22px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
}

.recipe-section[b-gpwmkm1yot] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
    min-width: 0;
}

.recipe-section-label[b-gpwmkm1yot] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--mud-palette-gray-dark);
}

/* ── Ingrédients ─────────────────────────────────────────────────────── */

.recipe-ingredient[b-gpwmkm1yot] {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    gap: calc(12px * var(--g-scale));
    align-items: center;
    padding: calc(9px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: 14px;
    background: var(--mud-palette-lines-default);
    text-decoration: none;
    transition: background 0.15s ease;
}

.recipe-ingredient:hover[b-gpwmkm1yot] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-lines-default));
}

.recipe-ingredient--out[b-gpwmkm1yot] {
    box-shadow: inset 3px 0 0 var(--mud-palette-error);
}

.recipe-ingredient-dose[b-gpwmkm1yot] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

.recipe-ingredient-texts[b-gpwmkm1yot] {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: calc(8px * var(--g-scale));
    flex-wrap: wrap;
}

.recipe-ingredient-name[b-gpwmkm1yot] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.recipe-ingredient-origin[b-gpwmkm1yot] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-ingredient-cost[b-gpwmkm1yot] {
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* ── Six repères économiques ─────────────────────────────────────────── */

.recipe-stats[b-gpwmkm1yot] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: calc(6px * var(--g-scale));
}

.recipe-stat[b-gpwmkm1yot] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(10px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: 14px;
    min-width: 0;
}

.recipe-stat--neutral[b-gpwmkm1yot] {
    background: var(--mud-palette-lines-default);
}

.recipe-stat--ok[b-gpwmkm1yot] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
}

.recipe-stat--warn[b-gpwmkm1yot] {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
}

.recipe-stat-label[b-gpwmkm1yot] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-stat--ok .recipe-stat-label[b-gpwmkm1yot] {
    color: var(--mud-palette-secondary);
}

.recipe-stat--warn .recipe-stat-label[b-gpwmkm1yot] {
    color: var(--mud-palette-error);
}

.recipe-stat-value[b-gpwmkm1yot] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.recipe-stat--ok .recipe-stat-value[b-gpwmkm1yot] {
    color: var(--mud-palette-secondary);
}

.recipe-stat--warn .recipe-stat-value[b-gpwmkm1yot] {
    color: var(--mud-palette-error);
}

/* ── Connexion caisse ────────────────────────────────────────────────── */

.recipe-pos-label--linked[b-gpwmkm1yot] {
    color: var(--mud-palette-secondary);
}

.recipe-pos-label--unlinked[b-gpwmkm1yot] {
    color: var(--mud-palette-error);
}

.recipe-pos[b-gpwmkm1yot] {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--g-scale));
    flex-wrap: wrap;
    padding: calc(11px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: 18px;
}

.recipe-pos--linked[b-gpwmkm1yot] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent);
}

.recipe-pos--unlinked[b-gpwmkm1yot] {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
}

.recipe-pos-texts[b-gpwmkm1yot] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recipe-pos-figures[b-gpwmkm1yot] {
    flex: none;
    display: flex;
    gap: var(--g-space-4);
}

.recipe-pos-figure[b-gpwmkm1yot] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.recipe-pos-name[b-gpwmkm1yot] {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-pos-id[b-gpwmkm1yot] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Note contextuelle ───────────────────────────────────────────────── */

.recipe-note[b-gpwmkm1yot] {
    display: flex;
    align-items: center;
    gap: calc(11px * var(--g-scale));
    padding: calc(11px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-md);
    font-size: 0.81rem;
    line-height: 1.45;
}

.recipe-note--neutral[b-gpwmkm1yot] {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.recipe-note--warn[b-gpwmkm1yot] {
    background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
    color: var(--mud-palette-error);
}

[b-gpwmkm1yot] .recipe-note-icon {
    flex: none;
}

/* ── Ventes ──────────────────────────────────────────────────────────── */

.recipe-sales-head[b-gpwmkm1yot] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.recipe-sales-total[b-gpwmkm1yot] {
    font-size: 0.81rem;
    color: var(--mud-palette-text-secondary);
}

.recipe-bars[b-gpwmkm1yot] {
    display: flex;
    align-items: flex-end;
    gap: calc(12px * var(--g-scale));
    height: 190px;
    padding: 0 calc(4px * var(--g-scale));
}

.recipe-bar[b-gpwmkm1yot] {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: calc(8px * var(--g-scale));
    min-width: 0;
}

.recipe-bar-value[b-gpwmkm1yot] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.recipe-bar-fill[b-gpwmkm1yot] {
    width: 100%;
    border-radius: 12px 12px 6px 6px;
    background: var(--mud-palette-lines-default);
}

.recipe-bar-fill--current[b-gpwmkm1yot] {
    background: var(--mud-palette-primary);
}

.recipe-bar-month[b-gpwmkm1yot] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.recipe-sales-stats[b-gpwmkm1yot] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(10px * var(--g-scale));
}

.recipe-sales-stat[b-gpwmkm1yot] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    padding: calc(14px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: 18px;
    background: var(--mud-palette-lines-default);
    min-width: 0;
}

.recipe-sales-stat-value[b-gpwmkm1yot] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

/* ── Adaptations étroites ────────────────────────────────────────────── */

@media (max-width: 1400px) {
    .recipe-stats[b-gpwmkm1yot] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .recipe-stats[b-gpwmkm1yot] {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe-sales-stats[b-gpwmkm1yot] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Recettes/RecipeListView.razor.rz.scp.css */
/* =====================================================================
   Liste des recettes — maquette « GoStan - Recettes », colonne gauche.
   Aucun hex en dur : rôles clair/sombre via var(--mud-palette-*),
   primitives via var(--g-*).
   ===================================================================== */

.recipe-list[b-kmq2du82ah] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    min-height: 0;
    min-width: 0;
}

.recipe-rows[b-kmq2du82ah] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

/* ── Ligne ───────────────────────────────────────────────────────────── */

.recipe-row[b-kmq2du82ah] {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--g-scale));
    width: 100%;
    padding: calc(15px * var(--g-scale)) calc(18px * var(--g-scale));
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    background: var(--mud-palette-drawer-background);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.recipe-row:hover:not(.recipe-row--selected)[b-kmq2du82ah] {
    border-color: var(--mud-palette-lines-inputs);
}

.recipe-row--selected[b-kmq2du82ah] {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--g-shadow-md);
    cursor: default;
}

/* ── Pastille d'icône ────────────────────────────────────────────────── */

.recipe-row-icon[b-kmq2du82ah] {
    width: 40px;
    height: 40px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
}

.recipe-row--selected .recipe-row-icon[b-kmq2du82ah] {
    background: var(--mud-palette-primary);
    color: var(--g-accent-100);
}

/* Le SVG est injecté en MarkupString par NavIcon : il ne porte aucun attribut
   de portée, d'où le ::deep. Sa couleur vient du `color` ci-dessus. */
.recipe-row-icon[b-kmq2du82ah]  .nav-icon-wrapper,
.recipe-row-icon[b-kmq2du82ah]  .nav-icon-wrapper svg {
    width: 21px;
    height: 21px;
}

/* ── Textes ──────────────────────────────────────────────────────────── */

.recipe-row-texts[b-kmq2du82ah] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.recipe-row-name[b-kmq2du82ah] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-row-sub[b-kmq2du82ah] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Prix et marge ───────────────────────────────────────────────────── */

.recipe-row-figures[b-kmq2du82ah] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.recipe-row-price[b-kmq2du82ah] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.recipe-badge[b-kmq2du82ah] {
    padding: 3px calc(10px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.recipe-badge--ok[b-kmq2du82ah] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

.recipe-badge--warn[b-kmq2du82ah] {
    background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
    color: var(--mud-palette-error);
}

/* Marge figée à l'enregistrement, faute de coût matière complet : ton neutre. */
.recipe-badge--stale[b-kmq2du82ah] {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* ── Bouton de création ──────────────────────────────────────────────── */

.recipe-new[b-kmq2du82ah] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--g-scale));
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale));
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: 20px;
    background: transparent;
    color: var(--mud-palette-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.recipe-new:hover[b-kmq2du82ah] {
    background: var(--mud-palette-drawer-background);
    border-color: var(--mud-palette-primary);
}

[b-kmq2du82ah] .recipe-new-icon {
    font-size: 1.15rem;
}

/* ── État vide ───────────────────────────────────────────────────────── */

.recipe-empty[b-kmq2du82ah] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 220px;
    padding: var(--g-space-6);
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-card);
    background: var(--mud-palette-drawer-background);
}

.recipe-empty-texts[b-kmq2du82ah] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-1);
    max-width: 340px;
}

.recipe-empty-title[b-kmq2du82ah] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--mud-palette-text-primary);
}

.recipe-empty-text[b-kmq2du82ah] {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}
/* /Components/Pages/Settings/Sections/SettingsDestockReasonsSection.razor.rz.scp.css */
/* Colonnes de la maquette : libellés FR / EN, ordre, portée, état, usages, actions. */
.settings-reasons-grid[b-cww80jbwdv] {
    display: grid;
    grid-template-columns: 1.5fr 1.4fr 0.7fr 1fr 0.7fr 0.9fr 40px;
    gap: var(--g-space-3);
}

.settings-reasons-label[b-cww80jbwdv] {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.settings-reasons-right[b-cww80jbwdv] {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.settings-reasons-on[b-cww80jbwdv] {
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--g-accent2-700);
}

.settings-reasons-off[b-cww80jbwdv] {
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--mud-palette-text-disabled);
}

/* Un motif jamais utilisé est celui qu'on peut encore supprimer : le zéro s'efface. */
.settings-reasons-unused[b-cww80jbwdv] {
    color: var(--mud-palette-text-disabled);
}

/* À l'étroit, le libellé anglais et l'ordre de tri cèdent la place : ils se relisent dans
   le dialog d'édition, alors que portée, état et usages ne s'y trouvent pas. */
@media (max-width: 1250px) {
    .settings-reasons-grid[b-cww80jbwdv] {
        grid-template-columns: 1.6fr 1fr 0.7fr 0.9fr 40px;
    }

    .settings-reasons-grid > :nth-child(2)[b-cww80jbwdv],
    .settings-reasons-grid > :nth-child(3)[b-cww80jbwdv] {
        display: none;
    }
}
/* /Components/Pages/Settings/Sections/SettingsEstablishmentSection.razor.rz.scp.css */
/* La pastille de type ne doit pas s'étirer sur toute la largeur de sa tuile. */
.settings-establishment-type[b-9e9smybg9i] {
    display: flex;
    align-self: flex-start;
    margin-top: 2px;
}
/* /Components/Pages/Settings/Sections/SettingsGlassVolumesSection.razor.rz.scp.css */
.settings-glass-label[b-prsiqh6x25] {
    flex: none;
    width: 150px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Le champ est étroit : la valeur et son unité tiennent dans une pilule, comme la maquette. */
.settings-glass-field[b-prsiqh6x25] {
    flex: none;
    width: 150px;
}

.settings-glass-field[b-prsiqh6x25]  .mud-input.mud-input-outlined {
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-surface);
}

.settings-glass-field[b-prsiqh6x25]  .mud-input-outlined-border {
    border-radius: var(--g-radius-pill);
}

.settings-glass-field[b-prsiqh6x25]  input {
    font-family: var(--mud-typography-h1-family);
    font-weight: 700;
    font-size: 1rem;
}

.settings-glass-note[b-prsiqh6x25] {
    min-width: 0;
}

@media (max-width: 900px) {
    .settings-glass-label[b-prsiqh6x25],
    .settings-glass-field[b-prsiqh6x25] {
        width: auto;
    }
}
/* /Components/Pages/Settings/Sections/SettingsPosSection.razor.rz.scp.css */
/* Bandeau « caisse reliée » — pendant sauge du bandeau d'alerte `set-callout--warm`. */
.settings-pos-banner--ok[b-su1a166d7p] {
    color: var(--g-accent2-700);
    background: var(--g-accent2-200);
    border: 1.5px solid var(--g-accent2-300);
    border-radius: 20px;
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
}

.settings-pos-systems[b-su1a166d7p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-3);
}

.settings-pos-system[b-su1a166d7p] {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(15px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: 20px;
    background: var(--mud-palette-lines-default);
}

.settings-pos-system--current[b-su1a166d7p] {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mud-palette-secondary) 55%, transparent);
}

.settings-pos-mark[b-su1a166d7p] {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-surface);
    font-family: var(--mud-typography-h1-family);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.settings-pos-system-text[b-su1a166d7p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-pos-system-name[b-su1a166d7p] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.settings-pos-tile-action[b-su1a166d7p] {
    display: flex;
    margin: var(--g-space-1) 0 0 -8px;
}

@media (max-width: 1100px) {
    .settings-pos-systems[b-su1a166d7p] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/Sections/SettingsSellingPriceRulesSection.razor.rz.scp.css */
.settings-bareme-basis[b-bdnsnv2wde] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    flex-wrap: wrap;
}

.settings-bareme-basis-label[b-bdnsnv2wde] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Colonnes de la maquette : de / à / coefficient / exemple / suppression. */
.settings-bareme-grid[b-bdnsnv2wde] {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.9fr 1.4fr 40px;
    gap: var(--g-space-3);
}

.settings-bareme-row[b-bdnsnv2wde] {
    align-items: center;
    padding: calc(10px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: 18px;
    background: var(--mud-palette-lines-default);
}

.settings-bareme-example[b-bdnsnv2wde] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.settings-bareme-delete[b-bdnsnv2wde] {
    display: flex;
    justify-content: flex-end;
}

.settings-bareme-gaps[b-bdnsnv2wde] {
    margin: var(--g-space-1) 0 0;
    padding-left: 1.2rem;
}

.settings-bareme-row[b-bdnsnv2wde]  .mud-input.mud-input-outlined {
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-surface);
}

.settings-bareme-row[b-bdnsnv2wde]  .mud-input-outlined-border {
    border-radius: var(--g-radius-pill);
}

@media (max-width: 1100px) {
    .settings-bareme-grid[b-bdnsnv2wde] {
        grid-template-columns: 1fr 1fr;
    }

    .settings-bareme-grid.set-table-head[b-bdnsnv2wde] {
        display: none;
    }
}
/* /Components/Pages/Settings/Sections/SettingsStockAreasSection.razor.rz.scp.css */
/* Zone désactivée : la carte s'éteint sans disparaître — c'est de là qu'on la réactive.
   Le fond passe au rôle « fond application », qui est en retrait de la carte du panneau
   dans les deux ambiances. */
.settings-zone--off[b-adxbnp76z7] {
    background: var(--mud-palette-background);
    opacity: 0.72;
}

.settings-zone--off .settings-zone-name[b-adxbnp76z7] {
    color: var(--mud-palette-text-secondary);
}

.settings-zone-head[b-adxbnp76z7] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    min-width: 0;
}

.settings-zone-name[b-adxbnp76z7] {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le MudCheckBox garde son padding Material par défaut, qui décale la ligne. */
.settings-zone-head[b-adxbnp76z7]  .mud-checkbox {
    margin: 0;
}
/* /Components/Pages/Settings/Sections/SettingsSubTypesSection.razor.rz.scp.css */
.settings-family-head[b-20xhqw3noq] {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-family-name[b-20xhqw3noq] {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.settings-family-chevron[b-20xhqw3noq] {
    color: var(--mud-palette-text-secondary);
    transition: transform 0.15s ease;
}

.settings-family-chevron--open[b-20xhqw3noq] {
    transform: rotate(180deg);
}

.settings-subtype-chips[b-20xhqw3noq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-2);
}

.settings-subtype-chip[b-20xhqw3noq] {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
    padding: calc(7px * var(--g-scale)) calc(14px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    font-family: inherit;
    font-size: 0.81rem;
    font-weight: 600;
}

.settings-subtype-chip--global[b-20xhqw3noq] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.settings-subtype-chip--exclusive[b-20xhqw3noq] {
    color: var(--g-accent2-700);
    background: var(--g-accent2-200);
    padding-right: calc(6px * var(--g-scale));
}

/* Le « + Sous-type » est un contour pointillé : il crée, il ne représente rien d'existant. */
.settings-subtype-chip--add[b-20xhqw3noq] {
    color: var(--mud-palette-primary);
    background: transparent;
    border: 1.5px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    font-weight: 700;
    cursor: pointer;
}

.settings-subtype-chip--add:hover:not(:disabled)[b-20xhqw3noq] {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.settings-subtype-remove[b-20xhqw3noq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.settings-subtype-remove:hover:not(:disabled)[b-20xhqw3noq] {
    background: color-mix(in srgb, var(--g-accent2-700) 18%, transparent);
}

.settings-subtype-remove:disabled[b-20xhqw3noq] {
    cursor: default;
    opacity: 0.5;
}

.settings-subtype-legend[b-20xhqw3noq] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    flex-wrap: wrap;
}
/* /Components/Pages/Settings/SettingsPage.razor.rz.scp.css */
/* =====================================================================
   Paramètres « Organic » — maquette « GoStan - Paramètres » (1a).
   Sommaire vertical à gauche, panneau unique à droite : les sept sections
   tiennent en colonne là où la barre d'onglets défilait.
   ===================================================================== */

.settings-page[b-ia2xj03kul] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

.settings-head[b-ia2xj03kul] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-6);
    flex-wrap: wrap;
}

.settings-head-titles[b-ia2xj03kul] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.settings-head-sub[b-ia2xj03kul] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.settings-layout[b-ia2xj03kul] {
    display: flex;
    align-items: stretch;
    gap: var(--g-space-4);
    min-height: 0;
}

.settings-rail[b-ia2xj03kul] {
    flex: none;
    width: 266px;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.settings-rail-spacer[b-ia2xj03kul] {
    flex: 1;
    min-height: var(--g-space-4);
}

.settings-scope[b-ia2xj03kul] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    padding: calc(16px * var(--g-scale)) calc(18px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    box-shadow: var(--g-shadow-sm);
    background: var(--mud-palette-surface);
}

.settings-scope-text[b-ia2xj03kul] {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* En dessous de 1100px le rail passe au-dessus du panneau : à cette largeur, une colonne de
   266px ne laisse plus assez de place aux tableaux du barème et des motifs. */
@media (max-width: 1100px) {
    .settings-layout[b-ia2xj03kul] {
        flex-direction: column;
    }

    .settings-rail[b-ia2xj03kul] {
        width: 100%;
    }

    .settings-rail-spacer[b-ia2xj03kul] {
        display: none;
    }
}
/* /Components/Pages/Settings/SettingsPanel.razor.rz.scp.css */
/* =====================================================================
   Panneau unique des Paramètres — maquette « GoStan - Paramètres » (1a).
   ===================================================================== */

.settings-panel[b-kgl4c1i7cj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    padding: calc(26px * var(--g-scale)) calc(28px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-sm);
    background: var(--mud-palette-surface);
}

.settings-panel-head[b-kgl4c1i7cj] {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-4);
}

.settings-panel-titles[b-kgl4c1i7cj] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    min-width: 0;
}

.settings-panel-title[b-kgl4c1i7cj] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--mud-palette-text-primary);
}

.settings-panel-desc[b-kgl4c1i7cj] {
    max-width: 660px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.settings-panel-body[b-kgl4c1i7cj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* /Components/Pages/Settings/SettingsSectionNav.razor.rz.scp.css */
/* =====================================================================
   Sommaire vertical des Paramètres — maquette « GoStan - Paramètres » (1a).
   Aucun hex en dur : rôles clair/sombre via var(--mud-palette-*),
   primitives via var(--g-*).
   ===================================================================== */

.settings-nav[b-z1h6dqdzql] {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
}

.settings-nav-item[b-z1h6dqdzql] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-3);
    width: 100%;
    padding: calc(12px * var(--g-scale)) calc(14px * var(--g-scale));
    border: none;
    border-radius: 18px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.settings-nav-item:hover:not(.settings-nav-item--active)[b-z1h6dqdzql] {
    background: var(--mud-palette-surface);
}

.settings-nav-item--active[b-z1h6dqdzql] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    cursor: default;
}

/* Le SVG est injecté en MarkupString : il n'a pas d'attribut de portée, sa couleur vient
   donc du `color` de ce conteneur via currentColor. */
.settings-nav-icon[b-z1h6dqdzql] {
    flex: none;
    display: flex;
    margin-top: 2px;
    color: inherit;
}

.settings-nav-icon[b-z1h6dqdzql]  .nav-icon-wrapper,
.settings-nav-icon[b-z1h6dqdzql]  .nav-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

.settings-nav-text[b-z1h6dqdzql] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-label[b-z1h6dqdzql] {
    font-size: 0.9rem;
    font-weight: 600;
}

.settings-nav-hint[b-z1h6dqdzql] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.settings-nav-flag[b-z1h6dqdzql] {
    flex: none;
    margin-top: 1px;
    padding: calc(4px * var(--g-scale)) calc(9px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.settings-nav-flag--neutral[b-z1h6dqdzql] {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-lines-default);
}

.settings-nav-flag--warm[b-z1h6dqdzql] {
    color: var(--g-accent-700);
    background: var(--g-accent-200);
}

.settings-nav-flag--sage[b-z1h6dqdzql] {
    color: var(--g-accent2-700);
    background: var(--g-accent2-200);
}
/* /Components/Pages/Stock/StockPage.razor.rz.scp.css */
/* =====================================================================
   Stocks « Organic » — maquette « GoStan - Stocks » (salle + cave).
   Aucun hex en dur : ce qui bascule clair/sombre passe par
   var(--mud-palette-*), les primitives par var(--g-*).
   ===================================================================== */

.stock-page[b-5hasmrypic] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

.stock-head[b-5hasmrypic] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-6);
    flex-wrap: wrap;
}

.stock-head-titles[b-5hasmrypic] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.stock-head-sub[b-5hasmrypic] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.stock-head-actions[b-5hasmrypic] {
    display: flex;
    gap: var(--g-space-2);
}

/* ── Sélecteur de zone ───────────────────────────────────────────────── */

.stock-zones[b-5hasmrypic] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    flex-wrap: wrap;
}

.stock-zones-label[b-5hasmrypic] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--mud-palette-gray-dark);
}

.stock-zones-pills[b-5hasmrypic] {
    display: inline-flex;
    gap: 3px;
    padding: calc(4px * var(--g-scale));
    background: var(--mud-palette-lines-default);
    border-radius: var(--g-radius-pill);
    flex-wrap: wrap;
}

.stock-zone-pill[b-5hasmrypic] {
    padding: calc(8px * var(--g-scale)) calc(16px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.stock-zone-pill:hover:not(.stock-zone-pill--active)[b-5hasmrypic] {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.stock-zone-pill--active[b-5hasmrypic] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
}

/* ── Cartes d'état ───────────────────────────────────────────────────── */

.stock-cards[b-5hasmrypic] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--g-space-3);
}

.stock-card[b-5hasmrypic] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-space-2);
    padding: calc(18px * var(--g-scale)) calc(22px * var(--g-scale));
    border-radius: 20px;
    box-shadow: var(--g-shadow-sm);
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-inputs);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.stock-card:hover:not(.stock-card--active):not(.stock-card--value)[b-5hasmrypic] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.stock-card--active[b-5hasmrypic] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.stock-card-label[b-5hasmrypic] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.stock-card-label--rupture[b-5hasmrypic] {
    color: var(--mud-palette-tertiary);
}

.stock-card-label--low[b-5hasmrypic] {
    color: var(--mud-palette-secondary);
}

.stock-card-value[b-5hasmrypic] {
    font-family: var(--mud-typography-h1-family);
    font-weight: 700;
    font-size: 2.375rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.stock-card-sub[b-5hasmrypic] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
}

/* Carte valeur : rôle Dark — sombre dans les deux ambiances (cf. OrganicTheme). */
.stock-card--value[b-5hasmrypic] {
    background: var(--mud-palette-dark);
    border-color: transparent;
    cursor: default;
}

.stock-card-label--value[b-5hasmrypic] {
    color: var(--g-accent-300);
}

.stock-card-value--money[b-5hasmrypic] {
    font-size: 2rem;
    line-height: 1.15;
    color: var(--g-neutral-100);
}

.stock-card-sub--value[b-5hasmrypic] {
    color: var(--g-neutral-500);
}

[b-5hasmrypic] .stock-card-info {
    color: var(--g-neutral-500);
    padding: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .stock-cards[b-5hasmrypic] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .stock-cards[b-5hasmrypic] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Stock/Views/StockListView.razor.rz.scp.css */
/* =====================================================================
   Liste de stock « Organic » — recherche pilule, chips de portée,
   onglets de type soulignés, lignes-cartes en grille.
   ===================================================================== */

/* ── Barre outils : recherche + chips ────────────────────────────────── */

.stock-list-toolbar[b-m4g9872avx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.stock-search[b-m4g9872avx] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    flex: 1;
    max-width: 380px;
    min-width: 220px;
    padding: calc(10px * var(--g-scale)) calc(18px * var(--g-scale));
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
}

.stock-search:focus-within[b-m4g9872avx] {
    border-color: var(--mud-palette-primary);
}

[b-m4g9872avx] .stock-search-icon {
    font-size: 1.05rem;
    color: var(--mud-palette-text-disabled);
    flex: none;
}

.stock-search-input[b-m4g9872avx] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.stock-search-input[b-m4g9872avx]::placeholder {
    color: var(--mud-palette-text-disabled);
}

.stock-scope-chips[b-m4g9872avx] {
    display: flex;
    gap: calc(7px * var(--g-scale));
    flex-wrap: wrap;
}

.stock-scope-chip[b-m4g9872avx] {
    padding: calc(10px * var(--g-scale)) calc(18px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.stock-scope-chip:hover:not(.stock-scope-chip--active)[b-m4g9872avx] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.stock-scope-chip--active[b-m4g9872avx] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
}

/* ── Onglets de type ─────────────────────────────────────────────────── */

.stock-type-tabs[b-m4g9872avx] {
    display: flex;
    gap: var(--g-space-6);
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    padding: 0 2px;
    overflow-x: auto;
}

.stock-type-tab[b-m4g9872avx] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    padding: 0 2px calc(12px * var(--g-scale));
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.stock-type-tab:hover[b-m4g9872avx] {
    color: var(--mud-palette-text-primary);
}

.stock-type-tab--active[b-m4g9872avx] {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    border-bottom-color: var(--mud-palette-primary);
}

.stock-type-tab-count[b-m4g9872avx] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-gray-dark);
}

/* ── Liste ───────────────────────────────────────────────────────────── */

/* Hauteur bornée : MudVirtualize a besoin d'un ancêtre défilant pour ne rendre
   que les lignes visibles — sans lui, 800+ lignes partent au DOM d'un coup. */
.stock-list[b-m4g9872avx] {
    display: block;
    max-height: calc(100vh - 220px);
    min-height: 320px;
    overflow-y: auto;
    padding-right: 2px;
}

.stock-list-empty[b-m4g9872avx] {
    padding: var(--g-space-8);
    text-align: center;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    border-radius: var(--g-radius-md);
}

/* Grille partagée en-tête/lignes. La colonne millésime n'existe que pour les vins. */
.stock-grid[b-m4g9872avx] {
    display: grid;
    grid-template-columns: 6px 2.6fr 1.4fr 0.6fr 0.6fr 0.8fr 1.4fr;
    gap: calc(14px * var(--g-scale));
    align-items: center;
}

.stock-grid--wine[b-m4g9872avx] {
    grid-template-columns: 6px 2.6fr 1.4fr 0.6fr 0.6fr 0.6fr 0.8fr 1.4fr;
}

.stock-list-header[b-m4g9872avx] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-background);
    padding: 2px calc(18px * var(--g-scale)) calc(8px * var(--g-scale)) 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
}

.stock-sort[b-m4g9872avx] {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.stock-sort:hover[b-m4g9872avx] {
    color: var(--mud-palette-text-primary);
}

.stock-sort--right[b-m4g9872avx] {
    text-align: right;
}

.stock-col-center[b-m4g9872avx] {
    text-align: center;
}

/* ── Lignes ──────────────────────────────────────────────────────────── */

/* L'espacement vient de la marge (pas d'un gap flex) : Virtualize estime la hauteur
   d'un item via ItemSize, un gap de conteneur fausserait le spacer de défilement. */
.stock-row[b-m4g9872avx] {
    background: var(--mud-palette-surface);
    border-radius: var(--g-radius-md);
    padding: calc(12px * var(--g-scale)) calc(18px * var(--g-scale)) calc(12px * var(--g-scale)) 0;
    margin-bottom: calc(8px * var(--g-scale));
    cursor: pointer;
    box-shadow: var(--g-shadow-sm);
    transition: box-shadow 0.15s ease;
}

.stock-row:hover[b-m4g9872avx] {
    box-shadow: var(--g-shadow-md);
}

.stock-row-rail[b-m4g9872avx] {
    align-self: stretch;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-inputs);
}

.stock-row-rail--rupture[b-m4g9872avx] {
    background: var(--mud-palette-error);
}

.stock-row-rail--low[b-m4g9872avx] {
    background: var(--mud-palette-warning);
}

.stock-row-name[b-m4g9872avx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stock-row-title[b-m4g9872avx] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-row-sub[b-m4g9872avx] {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    font-size: 0.78rem;
    color: var(--mud-palette-gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-row-dot[b-m4g9872avx] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--g-radius-pill);
    border: 1px solid color-mix(in srgb, var(--g-ink) 15%, transparent);
}

.stock-row-producer[b-m4g9872avx] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-row-muted[b-m4g9872avx] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

[b-m4g9872avx] .stock-pos-ok {
    color: var(--mud-palette-success);
}

[b-m4g9872avx] .stock-pos-none {
    color: var(--mud-palette-text-disabled);
}

.stock-row-stock[b-m4g9872avx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stock-row-qty[b-m4g9872avx] {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.stock-row-qty--rupture[b-m4g9872avx] {
    color: var(--mud-palette-error);
}

.stock-row-qty--low[b-m4g9872avx] {
    color: var(--mud-palette-warning);
}

.stock-row-threshold[b-m4g9872avx] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-disabled);
}

/* ── Actions de ligne ────────────────────────────────────────────────── */

.stock-row-actions[b-m4g9872avx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(6px * var(--g-scale));
}

.stock-btn[b-m4g9872avx] {
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--g-scale));
    padding: calc(8px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.stock-btn--order[b-m4g9872avx] {
    border: 1.5px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-tertiary);
}

.stock-btn--order:hover[b-m4g9872avx] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.stock-btn--ghost[b-m4g9872avx] {
    border: 1.5px solid var(--mud-palette-lines-inputs);
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.stock-btn--ghost:hover[b-m4g9872avx] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-tertiary);
}

/* Variante icône seule du bouton de ligne : plus de MudIconButton ici, donc plus
   de ::deep — le sélecteur porte sur un <button> du composant lui-même. */
.stock-btn--icon[b-m4g9872avx] {
    padding: calc(6px * var(--g-scale));
    border: none;
    background: transparent;
}

.stock-archive-btn[b-m4g9872avx] {
    color: var(--mud-palette-text-disabled);
}

.stock-archive-btn:hover[b-m4g9872avx] {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.stock-badge[b-m4g9872avx] {
    padding: calc(5px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.stock-badge--aging[b-m4g9872avx] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

.stock-badge--archived[b-m4g9872avx] {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Liste dense : sous 900px elle défile horizontalement dans son conteneur
   plutôt que de sacrifier des colonnes (grille partagée en-tête/lignes). */
@media (max-width: 900px) {
    .stock-list[b-m4g9872avx] {
        overflow-x: auto;
    }

    .stock-grid[b-m4g9872avx],
    .stock-grid--wine[b-m4g9872avx] {
        min-width: 860px;
    }
}
/* /Components/Pages/Suppliers/Components/Details/SupplierDocumentsSection.razor.rz.scp.css */
/* Onglet « Documents » — actions de carte. La grille et la carte elle-même
   viennent de wwwroot/css/suppliers.css. */

.sup-doc-actions[b-r0c0cbtpp2] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}
/* /Components/Pages/Suppliers/Components/Details/SupplierInformationSection.razor.rz.scp.css */
/* Onglet « Informations » — deux colonnes, contacts à gauche. */

.sup-info-grid[b-xjl0ew9c6d] {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--g-space-3);
    align-items: start;
}

.sup-contact-body[b-xjl0ew9c6d] {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
    flex: 1;
    min-width: 0;
}

.sup-contact-head[b-xjl0ew9c6d] {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    flex-wrap: wrap;
}

.sup-contact-lines[b-xjl0ew9c6d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
    font-size: 0.84rem;
    color: var(--mud-palette-primary);
    word-break: break-word;
}

/* Pousse les notes en pied de colonne, comme la maquette. */
.sup-spacer[b-xjl0ew9c6d] {
    flex: 1;
}

@media (max-width: 1100px) {
    .sup-info-grid[b-xjl0ew9c6d] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Suppliers/Components/Details/SupplierOrdersSection.razor.rz.scp.css */
/* Onglet « Commandes » — grille de l'historique. */

.sup-order-row[b-7kv5mb1pwn] {
    grid-template-columns: 1.4fr 1fr 1.2fr 0.6fr 1fr;
    min-width: 720px;
}

[b-7kv5mb1pwn] .sup-orders-reorder {
    margin-left: auto;
    white-space: nowrap;
}
/* /Components/Pages/Suppliers/Components/Details/SupplierReferencesSection.razor.rz.scp.css */
/* Onglet « Références » — grille propre à la table du catalogue fournisseur. */

.sup-ref-row[b-an0ism5m6c] {
    grid-template-columns: 2.4fr 0.9fr 0.9fr 1fr 190px 44px;
    min-width: 900px;
}

.sup-cell-cart[b-an0ism5m6c] {
    display: flex;
    justify-content: flex-end;
}

[b-an0ism5m6c] .sup-cart-btn {
    border-radius: var(--g-radius-pill);
    font-size: 0.81rem;
    font-weight: 700;
    padding: calc(6px * var(--g-scale)) calc(15px * var(--g-scale));
    white-space: nowrap;
}

.sup-refs-head-right[b-an0ism5m6c] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    margin-left: auto;
    flex-wrap: wrap;
}

.sup-refs-head-right .sup-search[b-an0ism5m6c] {
    width: 300px;
}

.sup-refs-chips[b-an0ism5m6c] {
    display: flex;
    gap: calc(6px * var(--g-scale));
    padding: 0 calc(18px * var(--g-scale)) calc(10px * var(--g-scale));
    flex-wrap: wrap;
}

/* Référence arrêtée : lisible mais visiblement hors catalogue courant. */
.sup-ref-row--stopped[b-an0ism5m6c] {
    opacity: 0.6;
}
/* /Components/Pages/Suppliers/Components/Dialogs/AddReferencesDialog.razor.rz.scp.css */
/* =====================================================================
   Modale « Ajouter des références » — mise en page propre à la modale.
   Les primitives (carte, chips, pastilles, pied de modale) viennent de
   wwwroot/css/suppliers.css.
   ===================================================================== */

.sup-search-row[b-pdkg4jvqbi] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    flex-wrap: wrap;
}

.sup-search-row .sup-search[b-pdkg4jvqbi] {
    flex: 1;
    width: auto;
    min-width: 260px;
}

.sup-type-chips[b-pdkg4jvqbi] {
    display: flex;
    gap: calc(7px * var(--g-scale));
    flex-wrap: wrap;
}

/* ── Résultats du référentiel ────────────────────────────────────────── */

.sup-results[b-pdkg4jvqbi] {
    padding: calc(6px * var(--g-scale));
    max-height: 280px;
    overflow-y: auto;
}

.sup-results-kicker[b-pdkg4jvqbi] {
    padding: calc(10px * var(--g-scale)) calc(16px * var(--g-scale)) calc(8px * var(--g-scale));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sup-result[b-pdkg4jvqbi] {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(12px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.sup-result:hover[b-pdkg4jvqbi] {
    background: var(--mud-palette-background-gray);
}

.sup-result--taken[b-pdkg4jvqbi] {
    opacity: 0.55;
    cursor: default;
}

.sup-result-tag[b-pdkg4jvqbi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: calc(5px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.sup-result-texts[b-pdkg4jvqbi] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.sup-result-add[b-pdkg4jvqbi] {
    flex: none;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

/* ── Lignes en cours de saisie ───────────────────────────────────────── */

.sup-draft-list[b-pdkg4jvqbi] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.sup-draft-row[b-pdkg4jvqbi] {
    display: grid;
    grid-template-columns: 2.2fr 0.8fr 1fr 0.9fr 1fr 44px;
    gap: calc(12px * var(--g-scale));
    align-items: center;
}

/* Doublon exact (boisson, contenance, millésime) : signalé sur la ligne, bloque l'enregistrement. */
.sup-draft-dup[b-pdkg4jvqbi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-error);
}

.sup-draft-row--header[b-pdkg4jvqbi] {
    padding: 0 calc(16px * var(--g-scale));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.sup-draft-row--item[b-pdkg4jvqbi] {
    padding: calc(12px * var(--g-scale)) calc(16px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    background: var(--mud-palette-drawer-background);
}

@media (max-width: 860px) {
    .sup-draft-row[b-pdkg4jvqbi] {
        grid-template-columns: 1fr 1fr;
    }

    .sup-draft-row--header[b-pdkg4jvqbi] {
        display: none;
    }
}
/* /Components/Pages/Suppliers/Components/Dialogs/MergeSuppliersDialog.razor.rz.scp.css */
/* =====================================================================
   Modale de fusion — grille d'arbitrage propre à la modale. Les cartes
   des deux fiches, les pastilles de choix et le pied viennent de
   wwwroot/css/suppliers.css.
   ===================================================================== */

.sup-merge-row[b-9url2tev7o] {
    grid-template-columns: 0.8fr 1.2fr 1.2fr;
    min-width: 620px;
}

[b-9url2tev7o] .sup-merge-picker {
    flex: none;
    width: 260px;
    max-width: 100%;
}

@media (max-width: 860px) {
    .sup-merge-row[b-9url2tev7o] {
        min-width: 480px;
    }
}
/* /Components/Pages/Suppliers/Components/SupplierListView.razor.rz.scp.css */
/* =====================================================================
   Grille du répertoire fournisseurs — propre à ce composant. Les
   primitives partagées (carte, pastilles, pied) vivent dans
   wwwroot/css/suppliers.css.
   ===================================================================== */

.sup-list-row[b-s6ta9734t9] {
    grid-template-columns: 2.2fr 1.9fr 0.5fr 0.7fr 0.9fr 0.9fr 48px;
    min-width: 940px;
}

.sup-pending-cell[b-s6ta9734t9] {
    display: flex;
    justify-content: flex-end;
}

.sup-foot-right[b-s6ta9734t9] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
}

.sup-pager[b-s6ta9734t9] {
    display: flex;
    gap: calc(6px * var(--g-scale));
}

[b-s6ta9734t9] .sup-pager-btn {
    border: 1px solid var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}
/* /Components/Pages/Suppliers/SupplierDetailsPage.razor.rz.scp.css */
/* Fiche fournisseur — en-tête d'identité. Le reste vient de
   wwwroot/css/suppliers.css et du CSS scopé de chaque section. */

[b-sk3205z69i] .sup-back {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.sup-head-meta[b-sk3205z69i] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
}

.sup-head-dot[b-sk3205z69i] {
    color: var(--mud-palette-lines-inputs);
}
/* /Components/Shared/ArticleSearch/ArticleSearchPanel.razor.rz.scp.css */
/* Liseré pêche (maquette « Assistant Entrée de stock ») : démarque le panneau de recherche de la
   carte qui l'héberge. Teinte prise sur la rampe accent, jamais en dur, pour rester aligné si la
   palette évolue. */
.article-search-panel[b-qdofni1kbt] {
    border: 1.5px solid var(--g-accent-300);
    border-radius: 20px;
    padding: calc(12px * var(--g-scale));
    /* Surface : le panneau se détache du fond crème de la carte. */
    background-color: var(--mud-palette-surface);
}

/* ── Mode focus ──────────────────────────────────────────────────────────────────────────────
   Au focus du champ de recherche, le panneau quitte le flux et s'ancre en haut de l'écran, la
   liste de résultats prenant toute la hauteur restante, sur fond assombri (MudOverlay à 9998,
   déclaré dans ArticleSearchPanel.razor). */

/* Réserve la place du panneau pendant qu'il est en position fixed : sans ça le contenu de l'étape
   hôte remonte, et le retour au mode normal fait sauter la page sous le curseur. Hauteur du panneau
   replié : champ outlined (~56px) + padding 2×12 + bordure 2×1,5. */
.article-search-panel-host:has(> .article-search-panel--focus)[b-qdofni1kbt] {
    min-height: 83px;
}

/* Colonne centrée collée au bord haut, au-dessus de tout (9999, valeur des overlays bloquants du
   projet). max-height déclarée deux fois : vh sert de fallback, et dvh (si supporté) corrige sur
   mobile la barre d'URL rétractable qui fausse vh — la dernière card se retrouverait sinon sous le
   pli. */
.article-search-panel--focus[b-qdofni1kbt] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 100vw - 32px);
    max-height: 100vh;
    max-height: 100dvh;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    /* Ancré au bord de l'écran : ni bordure ni arrondi côté haut, arrondi seulement en bas. */
    border-top: none;
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-8);
}

/* La MudStack racine devient la colonne du panneau : ligne de recherche figée en haut, résultats
   extensibles. min-height: 0 sans quoi un enfant flex refuse de descendre sous la taille de son
   contenu et le scroll interne ne s'active jamais. */
.article-search-panel--focus[b-qdofni1kbt]  .article-search-panel__inner {
    flex: 1 1 auto;
    min-height: 0;
}

/* Zone de résultats — ne s'affiche qu'en mode focus (gardé côté markup) : elle prend toute la
   hauteur restante de l'écran, avec son propre ascenseur.
   padding-right : réserve la gouttière de l'ascenseur, sinon il recouvre le bord droit des cards
   (et rogne leur ombre au survol, overflow-x étant contraint par overflow-y). */
[b-qdofni1kbt] .article-search-panel__results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: calc(8px * var(--g-scale));
}

/* La classe .article-card est posée par les composants enfants (ArticleSearchCard /
   BeverageSearchCard) : il faut ::deep pour l'atteindre depuis le CSS scopé du panneau. */
[b-qdofni1kbt] .article-card {
    border-radius: 8px;
}

/* Le curseur main est porté par le seul en-tête cliquable (classe cursor-pointer posée sur
   le MudCardContent), pas par la card entière : le détail déplié n'est pas actionnable. */
[b-qdofni1kbt] .article-card:hover {
    box-shadow: var(--mud-elevation-4);
}

/* Card dépliée : fond légèrement teinté + élévation, pour la repérer dans la liste scrollable.
   Toutes les cards sont Outlined, elles restent donc lisibles comme des cards sur fond blanc. */
[b-qdofni1kbt] .article-card--expanded {
    background-color: var(--mud-palette-action-default-hover);
    box-shadow: var(--mud-elevation-6);
}
/* /Components/Shared/ArticleSearch/BeverageSearchCard.razor.rz.scp.css */
/* En-tête = <button> natif pour l'accessibilité clavier (Entrée + Espace gratuits, pas de scroll
   parasite sur Espace) : on annule son apparence de bouton pour qu'il se comporte exactement comme
   le MudCardContent qu'il enveloppe. */
.beverage-card-header[b-9sokuqpntt] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* Sans OnClick, la card n'est pas actionnable : ni curseur main, ni entrée dans l'ordre de tab. */
.beverage-card-header[tabindex="-1"][b-9sokuqpntt] {
    cursor: default;
}

/* Anneau de focus au clavier uniquement (:focus-visible), pas au clic souris. */
.beverage-card-header:focus-visible[b-9sokuqpntt] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Le détail est un sous-niveau, marqué par le seul retrait + filet vertical : pas de fond propre.
   Il s'affiche sur la card dépliée, qui est déjà teintée — empiler les deux assombrissait la zone
   sans rien apporter. Le retrait s'ajoute au liseré de type de boisson (4px) porté par la card. */
.beverage-detail[b-9sokuqpntt] {
    margin: calc(4px * var(--g-scale)) calc(12px * var(--g-scale)) calc(10px * var(--g-scale)) calc(20px * var(--g-scale));
    padding: calc(4px * var(--g-scale)) 0 0 calc(12px * var(--g-scale));
    border-left: 2px solid var(--mud-palette-divider);
}

/* Les classes ci-dessous sont portées par des MudStack : ::deep est nécessaire pour les atteindre
   depuis le CSS scopé de ce composant. */
[b-9sokuqpntt] .beverage-zone-header {
    padding: 1px 0 2px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

[b-9sokuqpntt] .beverage-zone-line {
    padding: 1px 0 1px calc(8px * var(--g-scale));
}

/* Puces de casier resserrées : à la taille par défaut, leurs marges verticales dominaient la
   hauteur de ligne et annulaient la condensation. */
[b-9sokuqpntt] .beverage-zone-line .mud-chip {
    height: 18px;
    margin: 0;
}
/* /Components/Shared/ArticleSearch/RackSearchCard.razor.rz.scp.css */
.rack-search-card__reference[b-k42to0arx4] {
    cursor: pointer;
    padding: 2px calc(4px * var(--g-scale));
    border-radius: 4px;
}

.rack-search-card__reference:hover[b-k42to0arx4] {
    background-color: var(--mud-palette-action-default-hover);
}
/* /Components/Shared/Destock/DestockReasonPicker.razor.rz.scp.css */
/* Sélecteur de motif par famille — quatre colonnes (assistant) ou rangées de pilules (modale).
   Teintes par famille : sauge pour la vente, terracotta pour la perte, brun du « moment » pour
   l'offert, neutre pour l'interne. Aucun hex en dur : rampes --g-* et rôles --mud-palette-*. */

.drp[b-3s5nnzvapi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(14px * var(--g-scale));
}

.drp-col[b-3s5nnzvapi] {
    display: flex;
    flex-direction: column;
    gap: calc(9px * var(--g-scale));
    min-width: 0;
}

.drp-head[b-3s5nnzvapi] {
    display: flex;
    align-items: center;
    gap: calc(7px * var(--g-scale));
}

.drp-dot[b-3s5nnzvapi] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--g-radius-pill);
    background: var(--g-neutral-500);
}

.drp-label[b-3s5nnzvapi] {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-neutral-700);
}

.drp-opts[b-3s5nnzvapi] {
    display: flex;
    flex-direction: column;
    gap: calc(7px * var(--g-scale));
}

.drp-opt[b-3s5nnzvapi] {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.drp-opt:hover[b-3s5nnzvapi] {
    border-color: var(--g-neutral-500);
    background: var(--g-neutral-200);
}

.drp-opt--on[b-3s5nnzvapi] {
    font-weight: 700;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
}

/* ── Vente : sauge ── */
.drp-col--sale .drp-dot[b-3s5nnzvapi] { background: var(--mud-palette-secondary); }
.drp-col--sale .drp-label[b-3s5nnzvapi] { color: var(--g-accent2-700); }

.drp-col--sale .drp-opt[b-3s5nnzvapi] {
    background: var(--g-accent2-100);
    border-color: var(--g-accent2-300);
    color: var(--g-accent2-800);
}

.drp-col--sale .drp-opt:hover[b-3s5nnzvapi],
.drp-col--sale .drp-opt--on[b-3s5nnzvapi] {
    background: var(--g-accent2-200);
    border-color: var(--mud-palette-secondary);
}

/* ── Perte : terracotta ── */
.drp-col--loss .drp-dot[b-3s5nnzvapi] { background: var(--mud-palette-primary); }
.drp-col--loss .drp-label[b-3s5nnzvapi] { color: var(--g-accent-700); }

.drp-col--loss .drp-opt[b-3s5nnzvapi] {
    background: var(--g-accent-200);
    border-color: var(--g-accent-300);
    color: var(--g-accent-700);
}

.drp-col--loss .drp-opt:hover[b-3s5nnzvapi],
.drp-col--loss .drp-opt--on[b-3s5nnzvapi] {
    background: var(--g-accent-300);
    border-color: var(--mud-palette-primary);
}

/* ── Offert : brun du moment ── */
.drp-col--gift .drp-dot[b-3s5nnzvapi] { background: var(--g-moment-soft); }

.drp-col--gift .drp-opt[b-3s5nnzvapi] {
    background: var(--g-neutral-200);
    border-color: var(--g-neutral-300);
    color: var(--g-neutral-800);
}

.drp-col--gift .drp-opt:hover[b-3s5nnzvapi],
.drp-col--gift .drp-opt--on[b-3s5nnzvapi] {
    background: var(--g-neutral-300);
    border-color: var(--g-moment-soft);
}

/* ── Interne : neutre ── */
.drp-col--internal .drp-opt:hover[b-3s5nnzvapi],
.drp-col--internal .drp-opt--on[b-3s5nnzvapi] {
    background: var(--g-neutral-200);
    border-color: var(--g-neutral-500);
    color: var(--g-neutral-800);
}

/* ── Compact : les colonnes se couchent, les options deviennent des pilules ── */
.drp--compact[b-3s5nnzvapi] {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--g-scale));
}

.drp--compact .drp-col[b-3s5nnzvapi] {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(8px * var(--g-scale)) calc(10px * var(--g-scale));
}

.drp--compact .drp-head[b-3s5nnzvapi] {
    min-width: 78px;
}

.drp--compact .drp-opts[b-3s5nnzvapi] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(7px * var(--g-scale));
}

.drp--compact .drp-opt[b-3s5nnzvapi] {
    padding: calc(7px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 13px;
}

@media (max-width: 900px) {
    .drp[b-3s5nnzvapi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .drp[b-3s5nnzvapi] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/GlobalSearch/GlobalSearchOverlay.razor.rz.scp.css */
/* Recherche transverse — planche 1A « groupé par entité ».

   Aucune couleur n'est écrite en dur : les rôles qui doivent basculer avec l'ambiance passent par
   var(--mud-palette-*), les primitives de la DA par var(--g-*). Un hex ici casserait le mode
   sombre, où le panneau occupe tout l'écran. */

/* ── Voile ─────────────────────────────────────────────────────────────────────────────────── */

.gsearch-scrim[b-zx82ag9gmu] {
    position: fixed;
    inset: 0;
    /* 9998 : juste sous le panneau, au-dessus de l'AppBar et du drawer MudBlazor. */
    z-index: 9998;
    background: color-mix(in srgb, var(--g-ink) 46%, transparent);
    backdrop-filter: blur(1.5px);
    animation: gsearch-fade-b-zx82ag9gmu 0.22s ease;
}

/* ── Panneau ───────────────────────────────────────────────────────────────────────────────── */

.gsearch-panel[b-zx82ag9gmu] {
    position: fixed;
    top: 14px;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    transform-origin: 50% 0;
    animation: gsearch-open-b-zx82ag9gmu 0.28s cubic-bezier(0.22, 0.68, 0.36, 1);
}

@media (max-width: 900px) {
    .gsearch-panel[b-zx82ag9gmu] {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        border: none;
    }
}

@keyframes gsearch-fade-b-zx82ag9gmu {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gsearch-open-b-zx82ag9gmu {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gsearch-scrim[b-zx82ag9gmu],
    .gsearch-panel[b-zx82ag9gmu] {
        animation: none;
    }
}

/* ── En-tête de saisie ─────────────────────────────────────────────────────────────────────── */

.gsearch-head[b-zx82ag9gmu] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(19px * var(--g-scale)) calc(24px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gsearch-head-icon[b-zx82ag9gmu] {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--mud-palette-primary);
}

/* Le champ n'a ni cadre ni fond : l'en-tête entier fait office de champ, comme sur la maquette. */
.gsearch-input[b-zx82ag9gmu] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--mud-typography-h6-family, inherit);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.gsearch-input[b-zx82ag9gmu]::placeholder {
    color: var(--mud-palette-text-disabled);
    font-weight: 400;
}

/* Retire la croix native de type="search", qui doublonnerait avec Échap. */
.gsearch-input[b-zx82ag9gmu]::-webkit-search-cancel-button {
    display: none;
}

.gsearch-scope[b-zx82ag9gmu] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    padding: calc(7px * var(--g-scale)) calc(14px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.gsearch-scope svg[b-zx82ag9gmu] {
    width: 15px;
    height: 15px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 900px) {
    .gsearch-scope[b-zx82ag9gmu] {
        display: none;
    }
}

.gsearch-esc[b-zx82ag9gmu] {
    flex: none;
    padding: calc(6px * var(--g-scale)) calc(12px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.71875rem;
    font-weight: 700;
    cursor: pointer;
}

.gsearch-esc:hover[b-zx82ag9gmu] {
    background: var(--mud-palette-action-default-hover);
}

/* ── Corps ─────────────────────────────────────────────────────────────────────────────────── */

.gsearch-body[b-zx82ag9gmu] {
    flex: 1;
    min-height: 0;
    display: flex;
}

.gsearch-results[b-zx82ag9gmu] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: calc(12px * var(--g-scale)) calc(14px * var(--g-scale)) calc(16px * var(--g-scale));
}

.gsearch-group[b-zx82ag9gmu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: calc(12px * var(--g-scale));
}

.gsearch-group-head[b-zx82ag9gmu] {
    display: flex;
    align-items: baseline;
    gap: var(--g-space-2);
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale)) calc(6px * var(--g-scale));
}

.gsearch-group-label[b-zx82ag9gmu] {
    font-size: 0.71875rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: var(--mud-palette-text-secondary);
}

.gsearch-group-count[b-zx82ag9gmu] {
    font-size: 0.78125rem;
    color: var(--mud-palette-text-disabled);
}

.gsearch-group-spacer[b-zx82ag9gmu] {
    flex: 1;
}

.gsearch-group-cta[b-zx82ag9gmu] {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-accent-700);
    cursor: pointer;
}

.gsearch-group-cta:hover[b-zx82ag9gmu] {
    color: var(--g-accent-600);
}

/* ── Ligne de résultat ─────────────────────────────────────────────────────────────────────── */

.gsearch-row[b-zx82ag9gmu] {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    width: 100%;
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-md);
    background: none;
    text-align: left;
    cursor: pointer;
}

.gsearch-row:hover[b-zx82ag9gmu] {
    background: var(--mud-palette-action-default-hover);
}

.gsearch-row--selected[b-zx82ag9gmu],
.gsearch-row--selected:hover[b-zx82ag9gmu] {
    background: var(--g-accent-200);
}

.gsearch-row-icon[b-zx82ag9gmu] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-pill);
    background: var(--g-hero-card);
    color: var(--g-accent-700);
}

.gsearch-row-icon svg[b-zx82ag9gmu] {
    width: 19px;
    height: 19px;
}

/* Les recherches récentes ne sont pas des entités : leur horloge reste sans pastille. */
.gsearch-row-icon--plain[b-zx82ag9gmu] {
    background: none;
    color: var(--mud-palette-text-disabled);
}

.gsearch-row-text[b-zx82ag9gmu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gsearch-row-title[b-zx82ag9gmu] {
    font-size: 0.9375rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fragment trouvé : c'est le seul endroit du panneau qui porte l'accent sur du texte courant. */
.gsearch-row-title[b-zx82ag9gmu]  b,
.gsearch-row-title b[b-zx82ag9gmu] {
    color: var(--g-accent-700);
    font-weight: 700;
}

.gsearch-row-subtitle[b-zx82ag9gmu] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsearch-row-trailing[b-zx82ag9gmu] {
    flex: none;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ── États sans résultat ───────────────────────────────────────────────────────────────────── */

.gsearch-message[b-zx82ag9gmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-2);
    padding: calc(52px * var(--g-scale)) calc(24px * var(--g-scale)) calc(48px * var(--g-scale));
    text-align: center;
}

.gsearch-message-title[b-zx82ag9gmu] {
    margin: 0;
    font-family: var(--mud-typography-h6-family, inherit);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.gsearch-message-hint[b-zx82ag9gmu] {
    margin: 0;
    font-size: 0.90625rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Pied ──────────────────────────────────────────────────────────────────────────────────── */

.gsearch-foot[b-zx82ag9gmu] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    padding: calc(12px * var(--g-scale)) calc(24px * var(--g-scale));
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.gsearch-foot-scope[b-zx82ag9gmu],
.gsearch-hint[b-zx82ag9gmu] {
    font-size: 0.78125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.gsearch-hint[b-zx82ag9gmu] {
    display: flex;
    align-items: center;
    gap: calc(7px * var(--g-scale));
}

.gsearch-hint kbd[b-zx82ag9gmu] {
    padding: 3px calc(8px * var(--g-scale));
    border-radius: 7px;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 0.71875rem;
    font-weight: 700;
}

/* Les raccourcis n'ont pas de sens sans clavier : sous 900px seul le rappel de portée reste. */
@media (max-width: 900px) {
    .gsearch-hint[b-zx82ag9gmu] {
        display: none;
    }
}
/* /Components/Shared/GlobalSearch/SearchPreviewPanel.razor.rz.scp.css */
/* Colonne d'aperçu de la recherche transverse — moitié droite de la planche 1A.
   Même règle que l'overlay : rôles via var(--mud-palette-*), primitives via var(--g-*). */

.gsearch-preview[b-umrfgesdki] {
    flex: none;
    width: 404px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

/* Sous 1200px, la colonne prendrait plus de place que la liste qu'elle commente : l'aperçu
   disparaît et la sélection ne sert plus qu'à ouvrir. */
@media (max-width: 1200px) {
    .gsearch-preview[b-umrfgesdki] {
        display: none;
    }
}

.gsearch-preview-scroll[b-umrfgesdki] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-6);
    padding: calc(22px * var(--g-scale)) calc(24px * var(--g-scale));
}

.gsearch-preview-head[b-umrfgesdki] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-3);
}

.gsearch-preview-identity[b-umrfgesdki] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--g-scale));
}

.gsearch-preview-kind[b-umrfgesdki] {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.gsearch-preview-title[b-umrfgesdki] {
    font-family: var(--mud-typography-h6-family, inherit);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.gsearch-preview-subtitle[b-umrfgesdki] {
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
}

.gsearch-preview-close[b-umrfgesdki] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--g-radius-pill);
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.gsearch-preview-close:hover[b-umrfgesdki] {
    background: var(--mud-palette-action-default-hover);
}

.gsearch-preview-close svg[b-umrfgesdki] {
    width: 16px;
    height: 16px;
}

.gsearch-preview-unavailable[b-umrfgesdki] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Pastilles ─────────────────────────────────────────────────────────────────────────────── */

.gsearch-preview-tags[b-umrfgesdki] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(7px * var(--g-scale));
}

.gsearch-preview-tag[b-umrfgesdki] {
    padding: calc(5px * var(--g-scale)) calc(12px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--g-hero-card);
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ── Sections ──────────────────────────────────────────────────────────────────────────────── */

.gsearch-preview-section[b-umrfgesdki] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.gsearch-preview-section-label[b-umrfgesdki] {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.gsearch-preview-bar[b-umrfgesdki] {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--g-scale));
}

.gsearch-preview-bar-head[b-umrfgesdki] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-space-2);
}

.gsearch-preview-bar-label[b-umrfgesdki] {
    font-size: 0.84375rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsearch-preview-bar-value[b-umrfgesdki] {
    flex: none;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.gsearch-preview-bar-track[b-umrfgesdki] {
    height: 6px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.gsearch-preview-bar-fill[b-umrfgesdki] {
    height: 100%;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-primary);
}

/* ── Faits ─────────────────────────────────────────────────────────────────────────────────── */

.gsearch-preview-facts[b-umrfgesdki] {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.gsearch-preview-fact[b-umrfgesdki] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-space-3);
    padding: calc(9px * var(--g-scale)) 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.gsearch-preview-fact dt[b-umrfgesdki] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.gsearch-preview-fact dd[b-umrfgesdki] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
    color: var(--mud-palette-text-primary);
}

/* ── Liens ─────────────────────────────────────────────────────────────────────────────────── */

.gsearch-preview-links[b-umrfgesdki] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(7px * var(--g-scale));
}

/* Sauge : seconde voix de la DA, réservée ici aux objets rattachés pour les distinguer des
   pastilles d'identité, en terracotta. */
.gsearch-preview-link[b-umrfgesdki] {
    padding: calc(6px * var(--g-scale)) calc(13px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--g-accent2-200);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-accent2-800);
}

/* ── Actions ───────────────────────────────────────────────────────────────────────────────── */

.gsearch-preview-actions[b-umrfgesdki] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-2);
    padding: calc(16px * var(--g-scale)) calc(24px * var(--g-scale)) calc(18px * var(--g-scale));
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
/* /Components/Shared/KpiCardGroup.razor.rz.scp.css */
/* =====================================================================
   Tuiles KPI « Organic » — petites cartes sur surface, libellé haut de
   casse atténué, valeur Poppins. Une couleur explicite (écrans non
   refondus) bascule la tuile en carte colorée à texte blanc.
   ===================================================================== */

.kpi-group[b-280vjm5eb6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: calc(10px * var(--g-scale));
}

.kpi-tile[b-280vjm5eb6] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    box-shadow: var(--g-shadow-sm);
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale));
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
    min-width: 0;
}

.kpi-tile-top[b-280vjm5eb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(6px * var(--g-scale));
    min-height: 20px;
}

.kpi-tile-label[b-280vjm5eb6] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-gray-dark);
}

.kpi-tile-value[b-280vjm5eb6] {
    font-family: var(--mud-typography-h5-family);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

[b-280vjm5eb6] .kpi-tile-info {
    padding: 0;
    width: 20px;
    height: 20px;
    color: var(--mud-palette-text-secondary);
}

/* ── Variante colorée (BackgroundColor explicite, écrans non refondus) ── */

.kpi-tile--colored[b-280vjm5eb6] {
    border: none;
}

.kpi-tile--colored .kpi-tile-label[b-280vjm5eb6] {
    color: rgba(255, 255, 255, 0.8);
}

.kpi-tile--colored .kpi-tile-value[b-280vjm5eb6] {
    color: white;
}

[b-280vjm5eb6] .kpi-tile--colored .kpi-tile-info {
    color: rgba(255, 255, 255, 0.7);
}
/* /Components/Shared/TabBar.razor.rz.scp.css */
/* =====================================================================
   TabBar — onglets soulignés « Organic » partagés (fiche article,
   commandes, analyses, inventaires). Actif = graisse 700 + soulignement
   accent ; tout vient des tokens du thème, aucun hex.
   ===================================================================== */

.tabbar[b-lbd6i5xk4c] {
    display: flex;
    gap: var(--g-space-6);
    margin-bottom: calc(20px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    padding: 0 2px;
    overflow-x: auto;
}

.tabbar__btn[b-lbd6i5xk4c] {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--g-scale));
    padding: 0 2px calc(12px * var(--g-scale));
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.tabbar__btn:hover[b-lbd6i5xk4c] {
    color: var(--mud-palette-text-primary);
}

.tabbar__btn--active[b-lbd6i5xk4c] {
    color: var(--mud-palette-text-primary);
    border-bottom-color: var(--mud-palette-primary);
    font-weight: 700;
}

.tabbar__btn--highlight[b-lbd6i5xk4c] {
    color: var(--mud-palette-error);
}

.tabbar__btn--highlight:hover[b-lbd6i5xk4c] {
    color: color-mix(in srgb, var(--mud-palette-error) 80%, var(--mud-palette-text-primary));
}

.tabbar__btn--right[b-lbd6i5xk4c] {
    margin-left: auto;
}
/* /Components/Shared/TenantEstablishmentSelector.razor.rz.scp.css */
/* =====================================================================
   Sélecteur d'établissement du header — DA « Organic ».
   Tout ce qui bascule clair/sombre passe par var(--mud-palette-*),
   les primitives par var(--g-*). Aucun hex.

   Le contenu du popover est téléporté dans le MudPopoverProvider mais reste
   écrit dans ce composant : il porte donc l'attribut de scope et se style ici.
   Seuls l'habillage du popover lui-même (.tes-popover) et la MudList qui
   l'enveloppe (.tes-list) sont rendus par MudBlazor, hors scope — leurs règles
   vivent dans wwwroot/css/app.css.
   ===================================================================== */

.tes-root[b-e6unqdnspy] {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ── Déclencheur ────────────────────────────────────────────────────── */

.tes-trigger[b-e6unqdnspy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    cursor: pointer;
}

.tes-trigger-static[b-e6unqdnspy] {
    gap: calc(4px * var(--g-scale));
    cursor: default;
}

.tes-overline[b-e6unqdnspy] {
    padding-left: calc(10px * var(--g-scale));
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tes-pill[b-e6unqdnspy] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--g-scale));
    max-width: 100%;
    padding: 2px calc(12px * var(--g-scale)) 3px calc(10px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-gray-lighter);
    transition: background 0.15s ease;
}

.tes-trigger:hover .tes-pill[b-e6unqdnspy] {
    background: var(--mud-palette-lines-default);
}

.tes-current[b-e6unqdnspy] {
    font-family: "Poppins", "Figtree", system-ui, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tes-chevron[b-e6unqdnspy] {
    flex: none;
    color: var(--mud-palette-text-secondary);
    transition: transform 0.18s ease;
}

.tes-chevron-open[b-e6unqdnspy] {
    transform: rotate(180deg);
}

/* ── Panneau ────────────────────────────────────────────────────────── */

.tes-panel[b-e6unqdnspy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tes-panel-wide[b-e6unqdnspy] {
    width: min(680px, calc(100vw - 24px));
}

.tes-panel-narrow[b-e6unqdnspy] {
    width: min(360px, calc(100vw - 24px));
    padding: calc(8px * var(--g-scale));
}

/* ── Champ de recherche ─────────────────────────────────────────────── */

.tes-search-host[b-e6unqdnspy] {
    padding: calc(14px * var(--g-scale)) calc(14px * var(--g-scale)) calc(10px * var(--g-scale));
}

.tes-search[b-e6unqdnspy] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    padding: calc(10px * var(--g-scale)) calc(16px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-disabled);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tes-search:focus-within[b-e6unqdnspy],
.tes-search-active[b-e6unqdnspy] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.tes-search svg[b-e6unqdnspy] {
    flex: none;
}

.tes-search-input[b-e6unqdnspy] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.tes-search-input[b-e6unqdnspy]::placeholder {
    font-weight: 400;
    color: var(--mud-palette-text-disabled);
}

/* ── Colonnes (SuperAdmin) ──────────────────────────────────────────── */

.tes-columns[b-e6unqdnspy] {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.tes-col[b-e6unqdnspy] {
    display: flex;
    flex-direction: column;
    padding: 0 calc(8px * var(--g-scale)) calc(12px * var(--g-scale));
    min-width: 0;
}

.tes-col-tenants[b-e6unqdnspy] {
    width: 300px;
    flex: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.tes-col-establishments[b-e6unqdnspy] {
    flex: 1;
}

.tes-simple[b-e6unqdnspy],
.tes-results[b-e6unqdnspy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tes-results[b-e6unqdnspy] {
    padding: 0 calc(8px * var(--g-scale)) calc(12px * var(--g-scale));
    max-height: 60vh;
    overflow-y: auto;
}

.tes-scroll[b-e6unqdnspy] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 336px;
}

/* ── Intitulés de section ───────────────────────────────────────────── */

.tes-section[b-e6unqdnspy] {
    display: flex;
    align-items: baseline;
    gap: calc(6px * var(--g-scale));
    padding: calc(6px * var(--g-scale)) calc(10px * var(--g-scale)) calc(8px * var(--g-scale));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tes-section-sep[b-e6unqdnspy] {
    opacity: 0.7;
}

/* ── Lignes ─────────────────────────────────────────────────────────── */

.tes-row[b-e6unqdnspy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--g-scale));
    width: 100%;
    padding: calc(9px * var(--g-scale)) calc(12px * var(--g-scale));
    border: none;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.tes-row:hover:not(:disabled)[b-e6unqdnspy] {
    background: var(--mud-palette-gray-lighter);
}

.tes-row:disabled[b-e6unqdnspy] {
    opacity: 0.55;
    cursor: default;
}

.tes-row-stacked[b-e6unqdnspy] {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: calc(8px * var(--g-scale)) calc(12px * var(--g-scale));
}

.tes-row-previewed[b-e6unqdnspy] {
    background: var(--mud-palette-gray-lighter);
}

/* Tenant courant, épinglé au-dessus du filet : seul élément du panneau à porter un fond teinté. */
.tes-row-pinned[b-e6unqdnspy] {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

.tes-row-pinned:hover:not(:disabled)[b-e6unqdnspy] {
    background: color-mix(in srgb, var(--mud-palette-primary) 26%, transparent);
}

/* Établissement courant : encre accent et coche, sans fond — la maquette réserve le fond
   teinté au tenant épinglé, sans quoi les deux colonnes se disputeraient le regard. */
.tes-row-current[b-e6unqdnspy] {
    color: var(--mud-palette-primary);
}

.tes-row-label[b-e6unqdnspy] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tes-row-pinned .tes-row-label[b-e6unqdnspy],
.tes-row-current .tes-row-label[b-e6unqdnspy],
.tes-row-previewed .tes-row-label[b-e6unqdnspy] {
    font-weight: 700;
}

.tes-row-label b[b-e6unqdnspy] {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.tes-row-sub[b-e6unqdnspy] {
    font-size: 12px;
    font-weight: 400;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tes-row-trail[b-e6unqdnspy] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    flex: none;
    color: var(--mud-palette-text-disabled);
}

.tes-count[b-e6unqdnspy] {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
}

.tes-row-pinned .tes-count[b-e6unqdnspy] {
    color: var(--mud-palette-primary);
}

.tes-row svg[b-e6unqdnspy] {
    flex: none;
}

.tes-rule[b-e6unqdnspy] {
    height: 1px;
    margin: calc(8px * var(--g-scale)) calc(10px * var(--g-scale));
    background: var(--mud-palette-lines-default);
}

/* ── États vides et attentes ────────────────────────────────────────── */

.tes-empty[b-e6unqdnspy] {
    padding: calc(14px * var(--g-scale)) calc(12px * var(--g-scale)) calc(18px * var(--g-scale));
    font-size: 13px;
    color: var(--mud-palette-text-disabled);
}

.tes-empty-state[b-e6unqdnspy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12px * var(--g-scale));
    padding: calc(12px * var(--g-scale)) calc(12px * var(--g-scale)) calc(16px * var(--g-scale));
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

[b-e6unqdnspy] .tes-progress {
    margin: calc(4px * var(--g-scale)) calc(12px * var(--g-scale)) calc(8px * var(--g-scale));
}

/* ── Écrans étroits ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .tes-columns[b-e6unqdnspy] {
        flex-direction: column;
    }

    .tes-col-tenants[b-e6unqdnspy] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .tes-scroll[b-e6unqdnspy] {
        max-height: 208px;
    }

    .tes-current[b-e6unqdnspy] {
        font-size: 16px;
        max-width: 40vw;
    }
}
/* /Components/Shared/Waiter.razor.rz.scp.css */
/* Waiter « Tracé » — option 1d du projet design « Waiter Animations », DA Organic.
   Trois emplacements où des contenants de vaisselle se dessinent au trait puis s'effacent en
   cascade, chacun posé sur une ombre qui s'étire, sous un libellé suivi de trois points.

   Défilement de la bibliothèque sans JavaScript : les contenants d'un emplacement sont tous dans
   le DOM, empilés, et partagent une animation dont la fenêtre de tracé ne couvre qu'un N-ième du
   cycle ; des délais négatifs espacés de 3,6 s les font passer un par un. Hors de sa fenêtre, un
   tracé est à -260 d'offset, donc entièrement hors du dash : invisible. Chaque <path> porte
   pathLength="260", si bien que tous les contenants se dessinent à la même vitesse apparente,
   quelle que soit la longueur réelle de leur tracé. */

/* ── Coques ──────────────────────────────────────────────────────────────────────────────── */

.gwait-host[b-jofi0dx4i3] {
    display: grid;
    place-items: center;
    width: 100%;
}

.gwait-host--full[b-jofi0dx4i3] {
    min-height: 100vh;
}

.gwait-card[b-jofi0dx4i3] {
    display: grid;
    place-items: center;
    max-width: min(420px, calc(100vw - 4 * var(--g-space-4)));
    padding: var(--g-space-8) var(--g-space-6) var(--g-space-6);
    background: var(--mud-palette-surface);
    border-radius: var(--g-radius-card);
    box-shadow: var(--g-shadow-lg);
}

/* ── Bloc ────────────────────────────────────────────────────────────────────────────────── */

.gwait[b-jofi0dx4i3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-6);
    color: var(--mud-palette-text-primary);
    text-align: center;
}

.gwait-row[b-jofi0dx4i3] {
    display: flex;
    align-items: flex-end;
    gap: calc(26px * var(--g-scale));
}

.gwait-slot[b-jofi0dx4i3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px * var(--g-scale));
}

.gwait-glyphs[b-jofi0dx4i3] {
    position: relative;
    width: 64px;
    height: 64px;
}

.gwait-glyph[b-jofi0dx4i3] {
    position: absolute;
    inset: 0;
    width: 64px;
    height: 64px;
}

.gwait-shadow[b-jofi0dx4i3] {
    width: 40px;
    height: 5px;
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent);
    animation: gwait-ground-b-jofi0dx4i3 3.6s ease-in-out infinite backwards;
}

/* Libellé, contenu de l'appelant et sous-texte forment une colonne resserrée : c'est elle, et non
   chaque paragraphe, qui prend l'écart avec les contenants. */
.gwait-texts[b-jofi0dx4i3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-2);
    width: 100%;
}

/* `overflow-wrap: anywhere` — et non `break-word` — parce que seul `anywhere` réduit aussi la
   largeur min-content. Sans lui, un message portant un mot long sans espace (un nom
   d'établissement, une référence d'article) pousse la carte du voile au-delà de son max-width :
   sur un élément de grille, le min-width automatique l'emporte sur le max-width. */
.gwait-label[b-jofi0dx4i3] {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    max-width: 40ch;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.gwait-label > span:first-child[b-jofi0dx4i3] {
    min-width: 0;
}

.gwait-dots[b-jofi0dx4i3] {
    display: flex;
    gap: calc(4px * var(--g-scale));
}

.gwait-dots i[b-jofi0dx4i3] {
    width: 5px;
    height: 5px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-primary);
    animation: gwait-dot-b-jofi0dx4i3 1.2s ease-in-out infinite backwards;
}

.gwait-dots i:nth-child(2)[b-jofi0dx4i3] {
    animation-delay: .2s;
}

.gwait-dots i:nth-child(3)[b-jofi0dx4i3] {
    animation-delay: .4s;
}

.gwait-hint[b-jofi0dx4i3] {
    max-width: 36ch;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    opacity: .75;
}

/* ── Cadence — 3,6 s par contenant, emplacements décalés de 0 / 0,5 / 1 s ─────────────────── */

/* `backwards` est indispensable : les emplacements b et c démarrent sur un délai *positif*, et
   sans lui leur premier contenant s'afficherait entièrement dessiné pendant cette demi-seconde,
   par-dessus celui qui est déjà en train de se tracer. */

.gwait-slot--a .gwait-glyph[b-jofi0dx4i3] {
    animation: gwait-draw-4-b-jofi0dx4i3 14.4s ease-in-out infinite backwards;
}

.gwait-slot--a .gwait-glyph:nth-child(1)[b-jofi0dx4i3] {
    animation-delay: 0s;
}

.gwait-slot--a .gwait-glyph:nth-child(2)[b-jofi0dx4i3] {
    animation-delay: -3.6s;
}

.gwait-slot--a .gwait-glyph:nth-child(3)[b-jofi0dx4i3] {
    animation-delay: -7.2s;
}

.gwait-slot--a .gwait-glyph:nth-child(4)[b-jofi0dx4i3] {
    animation-delay: -10.8s;
}

.gwait-slot--a .gwait-shadow[b-jofi0dx4i3] {
    animation-delay: 0s;
}

.gwait-slot--b .gwait-glyph[b-jofi0dx4i3] {
    animation: gwait-draw-3-b-jofi0dx4i3 10.8s ease-in-out infinite backwards;
}

.gwait-slot--b .gwait-glyph:nth-child(1)[b-jofi0dx4i3] {
    animation-delay: .5s;
}

.gwait-slot--b .gwait-glyph:nth-child(2)[b-jofi0dx4i3] {
    animation-delay: -3.1s;
}

.gwait-slot--b .gwait-glyph:nth-child(3)[b-jofi0dx4i3] {
    animation-delay: -6.7s;
}

.gwait-slot--b .gwait-shadow[b-jofi0dx4i3] {
    animation-delay: .5s;
}

.gwait-slot--c .gwait-glyph[b-jofi0dx4i3] {
    animation: gwait-draw-3-b-jofi0dx4i3 10.8s ease-in-out infinite backwards;
}

.gwait-slot--c .gwait-glyph:nth-child(1)[b-jofi0dx4i3] {
    animation-delay: 1s;
}

.gwait-slot--c .gwait-glyph:nth-child(2)[b-jofi0dx4i3] {
    animation-delay: -2.6s;
}

.gwait-slot--c .gwait-glyph:nth-child(3)[b-jofi0dx4i3] {
    animation-delay: -6.2s;
}

.gwait-slot--c .gwait-shadow[b-jofi0dx4i3] {
    animation-delay: 1s;
}

/* ── Variante claire — fond brun des assistants plein écran ──────────────────────────────── */

.gwait--dark[b-jofi0dx4i3] {
    color: var(--g-neutral-100);
}

.gwait--dark .gwait-shadow[b-jofi0dx4i3] {
    background: color-mix(in srgb, var(--g-neutral-100) 22%, transparent);
}

.gwait--dark .gwait-label[b-jofi0dx4i3],
.gwait--dark .gwait-hint[b-jofi0dx4i3] {
    color: var(--g-neutral-200);
}

.gwait--dark .gwait-dots i[b-jofi0dx4i3] {
    background: var(--g-accent-300);
}

/* ── Animations ──────────────────────────────────────────────────────────────────────────── */

/* Fenêtre de tracé de 3,6 s sur un cycle de 4 contenants (14,4 s) : dessiné entre 10 % et
   14,5 %, effacé à 25 %, hors du dash jusqu'à la fin du tour. */
@keyframes gwait-draw-4-b-jofi0dx4i3 {
    0% {
        stroke-dashoffset: 260;
    }

    10%, 14.5% {
        stroke-dashoffset: 0;
    }

    25%, 100% {
        stroke-dashoffset: -260;
    }
}

/* Même fenêtre de 3,6 s sur un cycle de 3 contenants (10,8 s). */
@keyframes gwait-draw-3-b-jofi0dx4i3 {
    0% {
        stroke-dashoffset: 260;
    }

    13.333%, 19.333% {
        stroke-dashoffset: 0;
    }

    33.333%, 100% {
        stroke-dashoffset: -260;
    }
}

@keyframes gwait-ground-b-jofi0dx4i3 {
    0%, 100% {
        transform: scaleX(.4);
        opacity: 0;
    }

    40%, 58% {
        transform: scaleX(1);
        opacity: .5;
    }
}

@keyframes gwait-dot-b-jofi0dx4i3 {
    0%, 100% {
        opacity: .25;
    }

    40% {
        opacity: 1;
    }
}

/* ── Mouvement réduit — le tracé s'arrête, un contenant par emplacement reste dessiné ─────── */

/* Sélecteurs à deux classes : ils doivent l'emporter sur les règles de cadence, qui sont
   elles-mêmes en `.gwait-slot--x .gwait-glyph`. Une media query n'ajoute pas de spécificité. */
@media (prefers-reduced-motion: reduce) {
    .gwait-slot .gwait-glyph[b-jofi0dx4i3] {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 0;
    }

    .gwait-slot .gwait-glyph:first-child[b-jofi0dx4i3] {
        opacity: 1;
    }

    .gwait-slot .gwait-shadow[b-jofi0dx4i3] {
        animation: none;
        opacity: .5;
    }
}